new components, ribbons, button fixes

scss/_variables.scss

@@ -137,46 +137,24 @@ $hr-margin-y: 1rem !default;
 //Sizing
 $spacer: 1rem !default;
 $spacers: (
-  0: 0rem,
-  1: .25rem,
-  2: .5rem,
-  3: .75rem,
-  4: 1rem,
-  5: 1.5rem,
-  6: 2rem,
-  7: 2.5rem,
-  8: 3rem,
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.25,
+  5: $spacer * 1.5,
+  6: $spacer * 3,
+  7: $spacer * 6,
+  8: $spacer * 9,
+  9: $spacer * 12,
 ) !default;
 
 $size-spacers: (
-  9: 4rem,
-  10: 5rem,
-  11: 6rem,
-  12: 8rem,
-  13: 10rem,
-  14: 12rem,
-  15: 14rem,
-  16: 16rem,
-  17: 18rem,
-  18: 20rem,
   auto: auto,
   px: 1px,
   full: 100%
 ) !default;
 
-$size-max-spacers: (
-  xs: 20rem,
-  sm: 24rem,
-  md: 28rem,
-  lg: 32rem,
-  xl: 36rem,
-  2 xl: 42rem,
-  3 xl: 48rem,
-  4 xl: 56rem,
-  5 xl: 64rem,
-  6 xl: 72rem,
-  full: 100%
-) !default;
 
 $sizes-percentage: (
   1: 1%,
@@ -187,8 +165,6 @@ $sizes-percentage: (
   auto: auto
 ) !default;
 
-//Ribbons
-$ribbon-margin: .25rem !default;
 
 $loader-size: 2.5rem !default;
 
@@ -299,6 +275,9 @@ $yiq-contrasted-threshold: 200 !default;
 $progress-bg: $gray-100 !default;
 $progress-height: .75rem !default;
 
+//ribbons
+$ribbon-margin: .25rem !default;
+
 
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;

scss/mixins/_functions.scss

@@ -2,8 +2,15 @@
   @return ($px / 16px) * 1rem;
 }
 
+@function alpha-attribute($color, $background) {
+  $percent: alpha($color) * 100%;
+  $opaque: opacify($color, 1);
+
+  @return mix($opaque, $background, $percent);
+}
+
 @function theme-color-lighter($color) {
-  @return rgba($color, .2);
+  @return alpha-attribute(rgba($color, .2), #fff);
 }
 
 @function theme-color-lightest($color) {

scss/ui/_buttons.scss

@@ -4,7 +4,7 @@
   justify-content: center;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 
-  &:not([class^='btn-outline']):not([class*=' btn-outline']) {
+  &:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
 

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;
     }
   }
 }

scss/ui/forms/_input.selectgroup.scss

@@ -12,9 +12,18 @@ Selectgroup
 .selectgroup-item {
   position: relative;
   flex-grow: 1;
+  margin: 0;
 }
 
-.selectgroup:not(.selectgroup-vertical) > .selectgroup-item {
+.selectgroup-separated {
+  margin: 0 -.5rem -.5rem 0;
+
+  .selectgroup-item {
+    margin: 0 .5rem .5rem 0;
+  }
+}
+
+.selectgroup:not(.selectgroup-vertical):not(.selectgroup-separated) > .selectgroup-item {
   & + .selectgroup-item {
     margin-left: -1px;
   }
@@ -30,7 +39,7 @@ Selectgroup
   }
 }
 
-.selectgroup-vertical > .selectgroup-item {
+.selectgroup-vertical:not(.selectgroup-separated) > .selectgroup-item {
   &:not(:last-child) {
     margin-bottom: 0;
   }
@@ -64,7 +73,7 @@ Selectgroup
   display: block;
   min-width: $input-height;
   padding: $input-btn-padding-y 1rem;
-  font-size: $font-size-base;
+  font-size: $input-btn-font-size;
   line-height: $input-line-height;
   color: $text-muted;
   text-align: center;

scss/utils/_sizing.scss

@@ -25,9 +25,3 @@
 
 .h-screen	{ height: 100vh !important; }
 .w-screen	{ width: 100vw !important; }
-
-@each $size-name, $size in $size-max-spacers {
-  .max-w-#{$size-name} { max-width: $size !important; }
-  .max-h-#{$size-name} { max-height: $size !important; }
-}
-