Merge pull request #162 from scania/feature/4px_base_font-size

Feature - 4px base font size
scania · Nov 12, 2020 · a5def5b · a5def5b
2 parents 0955e37 + d57defe
commit a5def5b
Show file tree

Hide file tree

Showing 23 changed files with 160 additions and 87 deletions.
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -57,7 +57,8 @@ $dark-02:      #6c757d;
 $dark-03:      #212529;
 
 // Global Font variables
-$font-size-base:              1.4rem;
+//FIXME: Add correct rem
+$font-size-base:              3.5rem;
 $font-weight-normal:          400;
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;

diff --git a/src/styles/components/_alert.scss b/src/styles/components/_alert.scss
@@ -1,6 +1,8 @@
 .alert {
   --link-color: none;
   --link-color-hover: none;
+  //FIXME: Add correct rem
+  padding: 1.875rem 3.125rem;
 
   a {
     color: inherit;

diff --git a/src/styles/components/_badges.scss b/src/styles/components/_badges.scss
@@ -1,17 +1,20 @@
 //TODO: Look into regular badges design
 //TODO: Fix focus colors on badge-link
+@import '../core/spacing/spacing';
 
 .badge {
-  padding: .5rem .85rem .5rem .85rem;
-  border-radius: 1.2rem;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
+  //FIXME: Add correct rem
+  padding: 1.25rem 8.5px 1.25rem 8.5px;
+  border-radius: $spacing-element-04;
+  font-size: $spacing-element-04;
+  line-height: 3.5rem;
 
   &.badge-pill {
-    padding: .6rem 1.6rem .7rem 1.6rem;
-    border-radius: 1.6rem;
-    font-size: 1.4rem;
-    line-height: 1.7rem;
+    //FIXME: Add corect rem
+    padding: 1.5rem $spacing-element-05 1.75rem $spacing-element-05;
+    border-radius: $spacing-element-05;
+    font-size: 3.4rem;
+    line-height: 4.25rem;
   }
 
   @each $type in $types {

diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss
@@ -1,8 +1,10 @@
 @import '../variables';
+@import '../core/spacing/spacing';
 
 .breadcrumb {
-  font-size: 1.6rem;
-  padding: 1.2rem 1.6rem 1.3rem;
+  //FIXME: Add correct rem
+  font-size: $spacing-element-05;
+  padding: $spacing-element-04 $spacing-element-05 3.25rem;
   border-radius: $border-radius;
   background-color: $light-02; //TODO: Should breadcrumb be transparent
 

diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -1,14 +1,17 @@
 @import '../variables';
 @import '../mixins';
+@import '../core/spacing/spacing';
 
 .btn {
   --link-decoration: none;
   --link-decoration-hover: none;
 
-  border-radius: .3rem;
+  //FIXME: Add correct rem
+  border-radius: 0.75rem;
   border-radius: 3px;
-  padding: .9rem 1.8rem .8rem;
-  font-size: 1.4rem;
+  //FIXME: Add correct rem
+  padding: 2.25rem 4.5rem $spacing-element-03;
+  font-size: 3.5rem;
   font-weight: bold;
 
   &,
@@ -71,12 +74,14 @@
     }
   }
   &-sm {
-    padding: .5rem 1.6rem .5rem;
-    font-size: 1.2rem;
+    //FIXME: Add correct rem
+    padding: 1.25rem $spacing-element-05 1.25rem;
+    font-size: $spacing-element-04;
   }
   &-lg {
-    padding: 1.4rem 2.0rem;
-    font-size: 1.6rem;
+    //FIXME: Add correct rem
+    padding: 3.5rem $spacing-element-06;
+    font-size: $spacing-element-05;
   }
 
   @at-root a#{&}.disabled {
@@ -149,7 +154,7 @@
           border-color: map-get($interaction-colors, $type);
           border-color: Var(--#{$type});
         }
-      }  
+      }
     }
   }
   @each $type in $interaction-types {

diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss
@@ -5,7 +5,8 @@
   border-radius: $border-radius;
 
   .card-body {
-    padding: 3.0rem 1.7rem;
+    //FIXME: Add correct rem
+    padding: 7rem 4.25rem;
   }
 
   //TODO: should it match regular a element

diff --git a/src/styles/components/_custom-forms.scss b/src/styles/components/_custom-forms.scss
@@ -5,6 +5,7 @@
 @import 'node_modules/bootstrap/scss/mixins/gradients';
 
 @import '../variables';
+@import '../core/spacing/spacing';
 
 $gray-500:                                        $dark-02;
 $component-bg:                                    theme-color("light");
@@ -14,8 +15,9 @@ $component-active-bg:                             theme-color("primary");
 $custom-control-text-color:                       #53565A;
 $custom-control-disabled-color:                   #97999B;
 
-$custom-control-size:                             1.8rem;
-$custom-control-indicator-size:                   1.8rem;
+//FIXME: Add correct rem
+$custom-control-size:                             4.5rem;
+$custom-control-indicator-size:                   4.5rem;
 $custom-control-indicator-border-color:           transparent;
 $custom-control-indicator-border-width:           1px;
 
@@ -27,11 +29,12 @@ $custom-control-indicator-checked-border-color:   $custom-control-indicator-chec
 $custom-control-indicator-checked-disabled-bg:    lighten($component-active-bg, 20%);
 $custom-control-indicator-checked-box-shadow:     none;
 
-$custom-control-padding:                          ($custom-control-size + 1);
+//FIXME: Add correct rem
+$custom-control-padding:                          7rem;
 
-$custom-control-radio-space-around:               0.2;
-$custom-control-radio-size:                       ($custom-control-size - ($custom-control-radio-space-around * 2));
-$custom-control-radio-padding:                    ($custom-control-padding - $custom-control-radio-space-around);
+$custom-control-radio-space-around:               0.7rem;
+$custom-control-radio-size:                       3.5rem;
+$custom-control-radio-padding:                    6.5rem;
 
 $custom-switch-width:                             $custom-control-indicator-size * 1.9;
 $custom-switch-indicator-border-radius:           $custom-control-indicator-size / 2;
@@ -92,8 +95,8 @@ $custom-switch-indicator-size:                    calc(#{$custom-control-indicat
   .custom-control-input {
 
     &:checked ~ .custom-control-label::after {
-      width: 1.8rem;
-      left: -2.8rem;
+      width: 4.5rem;
+      left: -7rem;
     }
 
     &:disabled,
@@ -131,7 +134,7 @@ $custom-switch-indicator-size:                    calc(#{$custom-control-indicat
         background-color: Var(--primary);
         border-radius: 50%;
         left: ($custom-control-radio-padding * -1);
-        top: #{(2 * $custom-control-radio-space-around) + 0.05}rem;
+        top: $custom-control-radio-space-around;
       }
     }
 

diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss
@@ -1,16 +1,20 @@
 @import '../variables';
 @import '../mixins';
+@import '../core/spacing/spacing';
 
 .dropdown-menu{
-  padding: .8rem 1rem;
+  //FIXME: Add correct rem
+  padding: $spacing-element-03 2.5rem;
   border: 1px solid $light-04;
-  font-size: 1.4rem;
+  //FIXME: Add correct rem
+  font-size: 3.5rem;
   border-radius: $border-radius;
 }
 
 .dropdown-item {
   color: $dark;
-  padding: .4rem .2rem;
+  //FIXME: Add correct rem
+  padding: $spacing-element-02 $spacing-element-01;
   text-decoration: none;
 
   &:focus,
@@ -28,17 +32,20 @@
 }
 
 .dropdown-toggle-split {
-  padding-right: 0.5625rem;
-  padding-left: 0.5625rem;
+  //FIXME: Add correct rem
+  padding-right: 5.625px;
+  padding-left: 5.625px;
 
  .btn-lg + & {
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
+    //FIXME: Add correct rem
+    padding-right: 1.875rem;
+    padding-left: 1.875rem;
  }
 
  .btn-sm + & {
-    padding-right: 0.375rem;
-    padding-left: 0.375rem;
+    //FIXME: Add correct rem
+    padding-right: 3.75px;
+    padding-left: 3.75px;
   }
 }
 

diff --git a/src/styles/components/_forms.scss b/src/styles/components/_forms.scss
@@ -1,11 +1,13 @@
 @import '../variables';
+@import '../core/spacing/spacing';
 
 // Input
 $input-border-color:          $border-color;
-$input-padding-x:             1.2rem;
-$input-padding-y:             1rem;
-$input-padding-y-sm:          0.7rem;
-$input-padding-x-sm:          1.2rem;
+//FIXME: Add correct rem
+$input-padding-x:             $spacing-element-04;
+$input-padding-y:             2.5rem;
+$input-padding-y-sm:          1.75rem;
+$input-padding-x-sm:          $spacing-element-04;
 $input-border-radius:         $border-radius;
 $input-background-color:      $secondary;
 
@@ -27,8 +29,9 @@ $form-validation-states: (
     color: Var(--dark);
   }
 
-  font-size: 1.4rem;
-  line-height: 1.6rem;
+  //FIXME: Add correct rem
+  font-size: 3.5rem;
+  line-height: $spacing-element-05;
   font-weight: 400;
   height: auto;
   border-radius: $input-border-radius;
@@ -64,7 +67,8 @@ $form-validation-states: (
     border-bottom: 1px solid Var(--light-04);
     padding-left: 0;
     border-radius: 0;
-    line-height: 2.1rem;
+    //FIXME: Add correct rem
+    line-height: 5.25rem;
     opacity: 0.8;
   }
 
@@ -78,13 +82,15 @@ $form-validation-states: (
 }
 
 .form-control-lg {
-  font-size: 2.1rem;
-  line-height: 2.8rem;
+   //FIXME: Add correct rem
+  font-size: 5.25rem;
+  line-height: 7rem;
 }
 
 .form-control-sm {
-  font-size: 1.2rem;
-  line-height: 1.4rem;
+  //FIXME: Add correct rem
+  font-size: $spacing-element-04;
+  line-height: 3.5rem;
   padding: $input-padding-y-sm $input-padding-x-sm;
 }
 
@@ -95,8 +101,9 @@ select.form-control {
   appearance: none;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iNjMiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEwNS4wOTcwMDAxNDA0Mjg1NSwyLjc2NTY1NTQ4MjQwNjI1OTZlLTggTDU2LjA4NDAwMDE0MDQyODU0LDQ5LjAxMjAwMDAyNzY1NjU3IEw3LjA3MTAwMDE0MDQyODUzOCwyLjc2NTY1NTQ4MjQwNjI1OTZlLTggbC03LjA3MSw3LjA3MSBMNTYuMDg0MDAwMTQwNDI4NTQsNjMuMTU1MDAwMDI3NjU2NTQgbDU2LjA4MywtNTYuMDg0IHoiLz48L3N2Zz4=);
   background-repeat: no-repeat;
-  background-size: 1.2rem;
-  background-position: calc(100% - 1.2rem) center;
+  //FIXME: Add correct rem
+  background-size: $spacing-element-04;
+  background-position: calc(100% - 3rem) center;
   padding-right: 40px;
 }
 
@@ -123,7 +130,8 @@ select.form-control[multiple] {
     line-height: normal;
     background-color: #fff;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
-    padding: .8rem;
+    //FIXME: Add correct rem
+    padding: $spacing-element-03;
     border-radius: 5px;
   }
 
@@ -132,7 +140,8 @@ select.form-control[multiple] {
     &.is-#{$state},
     .was-validated &:#{$state} {
       background-image: none;
-      padding-right: 1.2rem;
+      //FIXME: Add correct rem
+      padding-right: $spacing-element-04;
 
       @each $key, $value in $data {
         #{$key} : map-get($theme-colors, $value);
@@ -155,5 +164,5 @@ select.form-control[multiple] {
 // Checkboxes and radios
 
 .form-check-label {
-  margin-left: 1rem;
+  margin-left: 2.5rem;
 }
diff --git a/src/styles/components/_list-group.scss b/src/styles/components/_list-group.scss
@@ -3,7 +3,8 @@
 .list-group {
 
   &-item {
-    padding: 1.7rem;
+    //FIXME: Add correct rem
+    padding: 4.25rem;
     border-color: $light-04;
     display: flex;
     text-decoration: none;

diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
@@ -12,8 +12,10 @@
     padding: $modal-padding;
     border-color: $modal-border-color;
 
-    & .close { //TODO: Should look into the btn.close
-      font-size: 3rem;
+    & .close {
+      //TODO: Should look into the btn.close
+      //FIXME: Add correct rem
+      font-size: 7.5rem;
       font-weight: normal;
       padding: 5px;
     }

diff --git a/src/styles/components/_navs.scss b/src/styles/components/_navs.scss
@@ -4,9 +4,11 @@
   --link-color:#{$dark-01};
 
   text-decoration: none;
-  font-size: 1.4rem;
+  //FIXME: Add correct rem
+  font-size: 3.5rem;
   font-weight: bold;
-  margin: 1rem 1.4rem 0.9rem;
+  //FIXME: Add correct rem
+  margin: 2.5rem 3.5rem 2.25rem;
   padding: 0;
 
   &:first-child {

diff --git a/src/styles/components/_pagination.scss b/src/styles/components/_pagination.scss
@@ -1,7 +1,8 @@
 @import "../variables";
+@import "../core/spacing/spacing";
 
 .pagination {
-  font-size: 1.6rem;
+  font-size: $spacing-element-05;
 
   .page-item {
     background-color: $pagination-bg-color; //TODO: Look into background-color for every state
@@ -18,6 +19,8 @@
 
     //TODO: Focus state interaction with page-link
     .page-link {
+      //FIXME: Add correct rem
+      padding: 1.25rem 1.875rem;
       border: none;
       color: #909090;
       text-decoration: none;