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;