Remove unneeded css variables

components/_globals.scss

@@ -13,14 +13,9 @@ $color-accent-dark: $palette-pink-700 !default;
 $color-primary-contrast: $color-dark-contrast !default;
 $color-accent-contrast: $color-dark-contrast !default;
 
-//-- Unit
+//-- Sizing
 $unit: 1rem;
-
-// Sizes
-$input-height: 3.2 * $unit;
-$offset: 1.6 * $unit;
 $border-radius: 0.2 * $unit;
-$items-overflow-max-height: 45vh;
 
 // -- Fonts
 $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;

components/autocomplete/_config.scss

@@ -2,3 +2,4 @@ $autocomplete-color-primary: unquote("rgb(#{$color-primary})");
 $autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
 $autocomplete-color-white: unquote("rgb(#{$color-white})");
 $autocomplete-suggestion-color-active: unquote("rgb(#{$palette-grey-200})");
+$autocomplete-overflow-max-height: 45vh;

components/autocomplete/style.scss

@@ -10,7 +10,7 @@
     }
 
     .suggestions {
-      max-height: $items-overflow-max-height;
+      max-height: $autocomplete-overflow-max-height;
       visibility: visible;
       box-shadow: $zdepth-shadow-1;
     }

components/card/_config.scss

@@ -2,4 +2,6 @@ $card-color-white: unquote("rgb(#{$color-white})") !default;
 $card-title-height: 17.6 * $unit;
 $card-width-normal: 32 * $unit;
 $card-width-large: 51.2 * $unit;
+$card-offset: 1.6 * $unit;
+$card-navigation-offset: $card-offset / 2;
 $card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");

components/card/style.scss

@@ -33,13 +33,12 @@
 }
 
 .navigation {
-  $offset: ($offset / 2);
-  padding: $offset;
+  padding: $card-navigation-offset;
 
   > * {
     min-width: 0;
-    padding-right: $offset;
-    padding-left: $offset;
+    padding-right: $card-navigation-offset;
+    padding-left: $card-navigation-offset;
   }
 }
 
@@ -59,7 +58,7 @@
 
   // -- Children
   > *:not(.navigation) {
-    padding: $offset;
+    padding: $card-offset;
   }
 
   &:not(.color) > *:not(.figure), > *:not(:last-child) {
@@ -104,7 +103,7 @@
     padding: 0;
 
     > h5 {
-      padding: $offset;
+      padding: $card-offset;
       font-size: $font-size-small;
       font-weight: $font-weight-bold;
       background-color: $card-text-overlay;

components/dropdown/_config.scss

@@ -1,4 +1,6 @@
+$dropdown-offset: 1.6 * $unit;
 $dropdown-color-white: unquote("rgb(#{$color-white})");
 $dropdown-color-primary: unquote("rgb(#{$color-primary})");
 $dropdown-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
 $dropdown-value-hover-background: unquote("rgb(#{$palette-grey-200})");
+$dropdown-overflow-max-height: 45vh;

components/dropdown/style.scss

@@ -1,10 +1,11 @@
 @import "../base";
 @import "./config";
+@import "../input/config";
 
 .root {
   position: relative;
   width: inherit;
-  margin-bottom: $offset;
+  margin-bottom: $dropdown-offset;
   color: $color-text;
   border-bottom: 1px solid $color-divider;
   &:not(.active) {
@@ -18,7 +19,7 @@
       opacity: .5;
     }
     > .values {
-      max-height: $items-overflow-max-height;
+      max-height: $dropdown-overflow-max-height;
       visibility: visible;
       box-shadow: $zdepth-shadow-1;
     }
@@ -78,19 +79,20 @@
 .value {
   display: block;
   > span {
-    height: $input-height;
-    font-size: $font-size-normal;
-    line-height: $input-height;
+    display: inline-block;
+    height: $input-field-height;
+    font-size: $input-field-font-size;
+    line-height: $input-field-height;
   }
   > :not(span) {
-    margin: ($offset / 2) 0;
+    margin: ($dropdown-offset / 2) 0;
   }
   &:after {
-    $size: ($input-height / 7);
+    $size: ($input-field-height / 7);
     $border: $size solid transparent;
     position: absolute;
-    right: ($offset / 2);
-    bottom: $offset;
+    right: ($dropdown-offset / 2);
+    bottom: $dropdown-offset;
     width: 0;
     height: 0;
     content: "";

components/input/_config.scss

@@ -1,7 +1,7 @@
 $input-padding: 2 * $unit;
-$input-field-height: 1.6 * $unit;
 $input-field-padding: .8 * $unit;
 $input-field-font-size: 1.6 * $unit;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size;
 $input-label-font-size: 1.2 * $unit;
 $input-focus-label-top: .6 * $unit;
 $input-text-background-color: transparent !default;
@@ -13,3 +13,4 @@ $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
 $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
+$input-icon-offset: 1.6 * $unit;

components/input/style.scss

@@ -12,7 +12,7 @@
 
 .icon {
   position: absolute;
-  top: $offset;
+  top: $input-icon-offset;
   left: -$input-icon-size;
   display: block;
   width: $input-icon-size;