added ribbon style & some little changes

- added !important to elevation-* & text-sm, text-xs, text-lg & text-xl
- added variables for ribbon
- added ribbon style code in scss/_miscellaneous

build/scss/AdminLTE.scss

@@ -73,7 +73,7 @@
 // Miscellaneous
 // ---------------------------------------------------
 @import 'miscellaneous';
-@import 'colors';
 @import 'print';
 @import 'text';
 @import 'elevation';
+@import 'colors';

build/scss/_elevation.scss

@@ -4,25 +4,25 @@
  */
 
 .elevation-0 {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 .elevation-1 {
-  box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
+  box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24) !important;
 }
 
 .elevation-2 {
-  box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23);
+  box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23) !important;
 }
 
 .elevation-3 {
-  box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23);
+  box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23) !important;
 }
 
 .elevation-4 {
-  box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22);
+  box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22) !important;
 }
 
 .elevation-5 {
-  box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22);
+  box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22) !important;
 }

build/scss/_miscellaneous.scss

@@ -288,3 +288,68 @@
   }
 }
 
+// Ribbon
+.ribbon-wrapper {
+  height: $ribbon-wrapper-size;
+  overflow: hidden;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  z-index: 10;
+  width: $ribbon-wrapper-size;
+
+  &.ribbon-lg {
+    height: $ribbon-lg-wrapper-size;
+    width: $ribbon-lg-wrapper-size;
+
+    .ribbon {
+      top: $ribbon-lg-top;
+      right: $ribbon-lg-right;
+      width: $ribbon-lg-width;
+    }
+  }
+
+  &.ribbon-xl {
+    height: $ribbon-xl-wrapper-size;
+    width: $ribbon-xl-wrapper-size;
+
+    .ribbon {
+      top: $ribbon-xl-top;
+      right: $ribbon-xl-right;
+      width: $ribbon-xl-width;
+    }
+  }
+
+  .ribbon {
+    box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
+    font-size: $ribbon-font-size;
+    line-height: $ribbon-line-height;
+    padding: $ribbon-padding;
+    position: relative;
+    right: $ribbon-right;
+    text-align: center;
+    text-shadow: 0 -1px 0 rgba($black, .4);
+    text-transform: uppercase;
+    top: $ribbon-top;
+    transform: rotate(45deg);
+    width: $ribbon-width;
+
+    &::before,
+    &::after {
+      border-left: $ribbon-border-size solid transparent;
+      border-right: $ribbon-border-size solid transparent;
+      border-top: $ribbon-border-size solid #9e9e9e;
+      bottom: -$ribbon-border-size;
+      content: "";
+      position: absolute;
+    }
+
+    &::before {
+      left: 0;
+    }
+
+    &::after {
+      right: 0;
+    }
+  }
+}

build/scss/_text.scss

@@ -11,19 +11,19 @@
 }
 
 .text-sm {
-  font-size: $font-size-sm;
+  font-size: $font-size-sm !important;
 }
 
 .text-xs {
-  font-size: $font-size-base;
+  font-size: $font-size-base !important;
 }
 
 .text-lg {
-  font-size: $font-size-lg;
+  font-size: $font-size-lg !important;
 }
 
 .text-xl {
-  font-size: $font-size-xl;
+  font-size: $font-size-xl !important;
 }
 
 

build/scss/_variables.scss

@@ -161,3 +161,21 @@ $button-default-background-color: #f4f4f4 !default;
 $button-default-color: #444 !default;
 $button-default-border-color: #ddd !default;
   
+// RIBBON
+// --------------------------------------------------------
+$ribbon-border-size: 3px !default;
+$ribbon-line-height: 100% !default;
+$ribbon-padding: .375rem 0 !default;
+$ribbon-font-size: .8rem !default;
+$ribbon-width: 110px !default;
+$ribbon-wrapper-size: 90px !default;
+$ribbon-top: 9px !default;
+$ribbon-right: -12px !default;
+$ribbon-lg-wrapper-size: 180px !default;
+$ribbon-lg-width: 160px !default;
+$ribbon-lg-top: 26px !default;
+$ribbon-lg-right: -59px !default;
+$ribbon-xl-wrapper-size: 240px !default;
+$ribbon-xl-width: 240px !default;
+$ribbon-xl-top: 59px !default;
+$ribbon-xl-right: -48px !default;

dist/css/adminlte.css

@@ -16503,6 +16503,214 @@ html.maximized-card {
   color: #ced4da;
 }
 
+.ribbon-wrapper {
+  height: 90px;
+  overflow: hidden;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  z-index: 10;
+  width: 90px;
+}
+
+.ribbon-wrapper.ribbon-lg {
+  height: 180px;
+  width: 180px;
+}
+
+.ribbon-wrapper.ribbon-lg .ribbon {
+  top: 26px;
+  right: -59px;
+  width: 160px;
+}
+
+.ribbon-wrapper.ribbon-xl {
+  height: 240px;
+  width: 240px;
+}
+
+.ribbon-wrapper.ribbon-xl .ribbon {
+  top: 59px;
+  right: -48px;
+  width: 240px;
+}
+
+.ribbon-wrapper .ribbon {
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  font-size: 0.8rem;
+  line-height: 100%;
+  padding: 0.375rem 0;
+  position: relative;
+  right: -12px;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+  text-transform: uppercase;
+  top: 9px;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  width: 110px;
+}
+
+.ribbon-wrapper .ribbon::before, .ribbon-wrapper .ribbon::after {
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 3px solid #9e9e9e;
+  bottom: -3px;
+  content: "";
+  position: absolute;
+}
+
+.ribbon-wrapper .ribbon::before {
+  left: 0;
+}
+
+.ribbon-wrapper .ribbon::after {
+  right: 0;
+}
+
+/*
+ * Misc: Print
+ * -----------
+ */
+@media print {
+  .no-print, .main-sidebar,
+  .main-header,
+  .content-header {
+    display: none !important;
+  }
+  .content-wrapper,
+  .main-footer {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+    margin-left: 0 !important;
+    min-height: 0 !important;
+  }
+  .layout-fixed .content-wrapper {
+    padding-top: 0 !important;
+  }
+  .invoice {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  .invoice-col {
+    float: left;
+    width: 33.3333333%;
+  }
+  .table-responsive {
+    overflow: auto;
+  }
+  .table-responsive > .table tr th,
+  .table-responsive > .table tr td {
+    white-space: normal !important;
+  }
+}
+
+/*
+ * Component: Text
+ * -------------
+ */
+.text-bold, .text-bold.table td, .text-bold.table th {
+  font-weight: 700;
+}
+
+.text-sm {
+  font-size: 0.875rem !important;
+}
+
+.text-xs {
+  font-size: 1rem !important;
+}
+
+.text-lg {
+  font-size: 1.25rem !important;
+}
+
+.text-xl {
+  font-size: 2rem !important;
+}
+
+.text-blue {
+  color: #007bff;
+}
+
+.text-indigo {
+  color: #6610f2;
+}
+
+.text-purple {
+  color: #6f42c1;
+}
+
+.text-pink {
+  color: #e83e8c;
+}
+
+.text-red {
+  color: #dc3545;
+}
+
+.text-orange {
+  color: #fd7e14;
+}
+
+.text-yellow {
+  color: #ffc107;
+}
+
+.text-green {
+  color: #28a745;
+}
+
+.text-teal {
+  color: #20c997;
+}
+
+.text-cyan {
+  color: #17a2b8;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.text-gray {
+  color: #6c757d;
+}
+
+.text-gray-dark {
+  color: #343a40;
+}
+
+/*
+ * Component: Elevation
+ * --------------------
+ */
+.elevation-0 {
+  box-shadow: none !important;
+}
+
+.elevation-1, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-dark .nav-sidebar > .nav-item > .nav-link.active, .callout {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
+}
+
+.elevation-2 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
+}
+
+.elevation-3 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
+}
+
+.elevation-4 {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
+}
+
+.elevation-5 {
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
+}
+
 /*
  * Misc: Colors
  * ------------
@@ -17872,147 +18080,4 @@ a.text-muted:hover {
 .link-black:hover, .link-black:focus {
   color: #e6e8ea;
 }
-
-/*
- * Misc: Print
- * -----------
- */
-@media print {
-  .no-print, .main-sidebar,
-  .main-header,
-  .content-header {
-    display: none !important;
-  }
-  .content-wrapper,
-  .main-footer {
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-    margin-left: 0 !important;
-    min-height: 0 !important;
-  }
-  .layout-fixed .content-wrapper {
-    padding-top: 0 !important;
-  }
-  .invoice {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-  }
-  .invoice-col {
-    float: left;
-    width: 33.3333333%;
-  }
-  .table-responsive {
-    overflow: auto;
-  }
-  .table-responsive > .table tr th,
-  .table-responsive > .table tr td {
-    white-space: normal !important;
-  }
-}
-
-/*
- * Component: Text
- * -------------
- */
-.text-bold, .text-bold.table td, .text-bold.table th {
-  font-weight: 700;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-}
-
-.text-xs {
-  font-size: 1rem;
-}
-
-.text-lg {
-  font-size: 1.25rem;
-}
-
-.text-xl {
-  font-size: 2rem;
-}
-
-.text-blue {
-  color: #007bff;
-}
-
-.text-indigo {
-  color: #6610f2;
-}
-
-.text-purple {
-  color: #6f42c1;
-}
-
-.text-pink {
-  color: #e83e8c;
-}
-
-.text-red {
-  color: #dc3545;
-}
-
-.text-orange {
-  color: #fd7e14;
-}
-
-.text-yellow {
-  color: #ffc107;
-}
-
-.text-green {
-  color: #28a745;
-}
-
-.text-teal {
-  color: #20c997;
-}
-
-.text-cyan {
-  color: #17a2b8;
-}
-
-.text-white {
-  color: #ffffff;
-}
-
-.text-gray {
-  color: #6c757d;
-}
-
-.text-gray-dark {
-  color: #343a40;
-}
-
-/*
- * Component: Elevation
- * --------------------
- */
-.elevation-0 {
-  box-shadow: none;
-}
-
-.elevation-1, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-success .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-info .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-danger .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-light .nav-sidebar > .nav-item > .nav-link.active, .sidebar-dark-dark .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-dark .nav-sidebar > .nav-item > .nav-link.active, .callout {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-.elevation-2 {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-}
-
-.elevation-3 {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-}
-
-.elevation-4 {
-  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
-
-.elevation-5 {
-  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
-}
 /*# sourceMappingURL=adminlte.css.map */