new components, ribbons, button fixes

scss/ui/_ribbons.scss

@@ -5,14 +5,15 @@
   top: .75rem;
   right: -($ribbon-margin);
   z-index: 1;
-  padding: .25rem 1rem;
-  font-weight: 600;
+  padding: .25rem .75rem;
+  font-weight: 700;
   color: #fff;
   text-align: center;
   background: $primary;
   border-color: $primary;
-  font-size: 1rem;
-  line-height: 1.5;
+  text-transform: uppercase;
+  font-size: $h6-font-size;
+  line-height: 1.5rem;
 
   &::before {
     position: absolute;
@@ -49,8 +50,8 @@
 .ribbon-top {
   top: -($ribbon-margin);
   right: .75rem;
-  width: 2.25rem;
-  padding: 1rem 0;
+  width: 2rem;
+  padding: .25rem 0;
 
   &::before {
     top: 0;
@@ -93,7 +94,7 @@
 }
 
 .ribbon-bookmark {
-  padding-left: .5rem;
+  padding-left: .25rem;
 
   &::after {
     position: absolute;
@@ -107,26 +108,26 @@
     border-color: inherit;
     border-right-width: 0;
     border-left-color: transparent;
-    border-left-width: .75rem;
+    border-left-width: .5rem;
   }
 
   &.ribbon-left {
     padding-right: .5rem;
-    padding-left: 1rem;
+    padding-left: .5rem;
 
     &::after {
       right: auto;
       left: 100%;
       border-right-color: transparent;
 
-      border-right-width: .75rem;
+      border-right-width: .5rem;
       border-left-width: 0;
     }
   }
 
   &.ribbon-top {
     padding-right: 0;
-    padding-bottom: .5rem;
+    padding-bottom: .25rem;
     padding-left: 0;
 
     &::after {
@@ -137,7 +138,7 @@
       border-width: 1rem;
       border-top-width: 0;
       border-bottom-color: transparent;
-      border-bottom-width: .75rem;
+      border-bottom-width: .5rem;
     }
   }
 }