#70 fix site fonts beleeding into components.

- added default font to each component by updating fd-reset - change reset to fd-rest.
SAP · Feb 13, 2018 · 4b531ef · 4b531ef
1 parent 0dad446
commit 4b531ef
Show file tree

Hide file tree

Showing 26 changed files with 400 additions and 280 deletions.
diff --git a/docs/css/fui-site.css b/docs/css/fui-site.css
diff --git a/docs/css/fundamental-ui.css b/docs/css/fundamental-ui.css
diff --git a/scss/components/action-bar.scss b/scss/components/action-bar.scss
@@ -23,7 +23,7 @@ $block: ns(action-bar);
 
     //BLOCK BASE *******************************************
     //set all BLOCK reset and baseline styles
-    @include reset;
+    @include fd-reset;
     height: $fd-action-bar-height;
     background-color: $fd-action-bar-background-color;
     border-style: solid;
@@ -35,7 +35,7 @@ $block: ns(action-bar);
 
     }
     &__title {
-        @include reset;
+        @include fd-reset;
         @include fd-type(3, header, med);
         flex: 1;
         margin-bottom: 0;
@@ -44,7 +44,7 @@ $block: ns(action-bar);
         }
     }
     &__actions {
-        @include reset;
+        @include fd-reset;
         display: flex;
         transition: opacity $fd-action-bar-transition-params;
         visibility: visible;

diff --git a/scss/components/add-button.scss b/scss/components/add-button.scss
@@ -11,6 +11,7 @@ $block: ns(add-button);
 .#{$block} {
 
     // Block
+    @include fd-reset;
     text-align: right;
     padding: fd-space(s);
     margin-top: -(fd-space(m));

diff --git a/scss/components/alert.scss b/scss/components/alert.scss
@@ -21,6 +21,7 @@ $block: ns(alert);
     $fd-alert-action--clerance: 50px;
 
     // Block
+    @include fd-reset;
     color: $fd-alert-color;
     border: solid 1px $fd-alert-border-color;
     background-color: $fd-alert-background-color;

diff --git a/scss/components/badge.scss b/scss/components/badge.scss
@@ -8,7 +8,7 @@
 $block: ns(badge);
 
 .#{$block} {
-    @include reset;
+    @include fd-reset;
     @include fd-type(-3);
     line-height: fd-space(reg);
     border-radius: 5px;

diff --git a/scss/components/card-group.scss b/scss/components/card-group.scss
@@ -12,7 +12,7 @@ $block: ns(card-group);
     $fd-card-group-items-per-group: 3 !default;
     $fd-card-group-width--gutter: fd-space(reg) !default;
 
-    @include reset;
+    @include fd-reset;
     @include fd-clearfix;
     $gutter_: $fd-card-group-width--gutter;
     $i_: $fd-card-group-items-per-group;

diff --git a/scss/components/card.scss b/scss/components/card.scss
@@ -13,7 +13,7 @@
 //set component name using namespace function, then use #{$block} below
 $block: ns(card);
 .#{$block} {
-    @include reset;
+    @include fd-reset;
 
     //dimensions
     $fd-card-media-width: 75px !default;

diff --git a/scss/components/contextual-menu.scss b/scss/components/contextual-menu.scss
@@ -9,6 +9,7 @@
 $block: ns(contextual-menu);
 
 .#{$block} {
+    @include fd-reset;
     min-width: 169px;
     right: 0;
 }
diff --git a/scss/components/dropdown.scss b/scss/components/dropdown.scss
@@ -28,7 +28,7 @@ $block: ns(dropdown);
 
     //BLOCK BASE *******************************************
     //set all BLOCK reset and baseline styles
-    @include reset;
+    @include fd-reset;
     position: relative;
     display: inline-block;
 
@@ -86,7 +86,7 @@ $block: ns(dropdown);
     }
     &__item,
     &__option {
-        @include reset;
+        @include fd-reset;
         @include fd-type(-1,body);
         display: block;
         padding-left: 0;
@@ -99,7 +99,7 @@ $block: ns(dropdown);
         }
     }
     &__separator {
-        @include reset;
+        @include fd-reset;
         @include fd-type(-3, body, reg, none);
         display: block;
         color: fd-color(text, 2);

diff --git a/scss/components/form.scss b/scss/components/form.scss
@@ -24,6 +24,7 @@ $block: ns(form);
     $fd-form-item-gutter: $fd-width--gutter !default;
     $fd-form-item-margin-bottom: fd-space(8) !default;
 
+    @include fd-reset;
     &__group {
         @include fd-clearfix;
         @include fd-last-child;
@@ -77,6 +78,7 @@ $block: ns(form);
         }
     }
     &__label, &__legend {
+        @include fd-reset;
         @include fd-type($fd-form-label-font-size);
         display: block;
         margin-bottom: fd-space(2);

diff --git a/scss/components/image.scss b/scss/components/image.scss
@@ -23,6 +23,7 @@ $block: ns(image);
     $fd-image-background-image--product: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA1MiA1MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+dG4taW1hZ2UtYmFja2dyb3VuZC1pbWFnZS0tcHJvZHVjdDwvdGl0bGU+PHBhdGggZD0iTTEzLjg3NiAxOC4yMjNsNS44NzQtMi41NTUgMTEgNS45MzQtNS4yOTEgMi4xNzgtMTEuNTgzLTUuNTU3ek0xMyAzMy4wNDN2LTE0LjAzbDExLjkxNyA1LjcxdjE0LjA5MWwtMTEuNTktNS4yNzVhLjU0LjU0IDAgMCAxLS4zMjctLjQ5N3ptMy4yNS05LjIwOXY1LjQxN2EuNTQuNTQgMCAwIDAgLjMxNy40OTNsNS40MTcgMi43MDhjLjM1OC4xNjMuNzY2LS4xLjc2Ni0uNDkzdi01LjQxN2EuNTQyLjU0MiAwIDAgMC0uMzE3LS40OTJsLTUuNDE3LTIuNzA5YS41NDIuNTQyIDAgMCAwLS43NjYuNDkzem05Ljc1Ljg4OWwxMy01LjcxdjE0LjAzYS41NC41NCAwIDAgMS0uMzI2LjQ5NkwyNiAzOC44MTVWMjQuNzIzem0xMi4xMjQtNi41bC02LjE0IDIuODEzLTEwLjk3LTUuOTE3IDQuNzctMi4wNzNhLjUzNi41MzYgMCAwIDEgLjQzMiAwbDExLjkwOCA1LjE3N3oiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==" !default;
 
     //BLOCK BASE *******************************************
+    @include fd-reset;
     display: inline-block;
     vertical-align: middle;
     background-repeat: no-repeat;

diff --git a/scss/components/inline-help.scss b/scss/components/inline-help.scss
@@ -21,6 +21,7 @@ $block: ns(inline-help);
     $fd-tooltip-min-width: 350px;
 
     //BLOCK BASE *******************************************
+    @include fd-reset;
     @include fd-type(-1);
     position: relative;
     //margin-left: fd-space(xs);

diff --git a/scss/components/input-group.scss b/scss/components/input-group.scss
@@ -16,7 +16,7 @@ $block: ns(input-group);
 
     //BLOCK BASE *******************************************
     //set all BLOCK reset and baseline styles
-    @include reset;
+    @include fd-reset;
     display: flex;
     vertical-align: bottom;
     max-height: $fd-forms-height--input-text;

diff --git a/scss/components/label.scss b/scss/components/label.scss
@@ -8,7 +8,7 @@
 $block: ns(label);
 
 .#{$block} {
-    @include reset;
+    @include fd-reset;
     @include fd-type(-3);
     &--success {
         color: $fd-color--success;

diff --git a/scss/components/list-group.scss b/scss/components/list-group.scss
@@ -19,7 +19,7 @@ $block: ns(list-group);
     $fd-list-group-action-height: fd-space(10) !default;
     $fd-list-group-transition-params: $fd-animation--speed ease-in !default;
 
-    @include reset;
+    @include fd-reset;
 
     margin-left: 0;
     &__item {

diff --git a/scss/components/modal.scss b/scss/components/modal.scss
@@ -18,6 +18,7 @@ $block: ns(modal);
 
 
 .#{$block} {
+  @include fd-reset;
   width: 700px;
   margin: fd-space(8) auto;
   &__content{

diff --git a/scss/components/nav.scss b/scss/components/nav.scss
@@ -11,7 +11,7 @@ $block: ns(nav);
 
 .#{$block} {
     $fd-nav-link-padding: fd-space(2);
-    @include reset;
+    @include fd-reset;
     display: flex;
     flex-wrap: wrap;
     padding-left: 0;

diff --git a/scss/components/pagination.scss b/scss/components/pagination.scss
@@ -18,7 +18,7 @@ $block: ns(pagination);
   $fd-pagination-color--disabled: fd-color(text, 1) !default;
   $fd-pagination-nav-color--disabled: fd-color(text, 2) !default;
 
-  @include reset;
+  @include fd-reset;
   @include fd-type(-1);
   display: inline-block;
   margin-bottom: 0;

diff --git a/scss/components/spinner.scss b/scss/components/spinner.scss
@@ -21,8 +21,7 @@ $block: ns(spinner);
     $fd-spinner-backdrop-background-color: rgba(fd-color(background, 1),0.95) !default;
 
     //BLOCK BASE *******************************************
-    //set all BLOCK reset and baseline styles
-
+    @include fd-reset;
     $_width: $fd-spinner-width--bar*4 + $fd-spinner-width--gutter*3;
     $_height: $fd-spinner-height;
 

diff --git a/scss/components/table.scss b/scss/components/table.scss
@@ -20,7 +20,7 @@ $block: ns(table);
 
     //BLOCK BASE *******************************************
     //set all BLOCK reset and baseline styles
-    @include reset;
+    @include fd-reset;
     @include fd-last-child;
     width: 100%;
     max-width: 100%;

diff --git a/scss/components/tabs.scss b/scss/components/tabs.scss
@@ -21,7 +21,7 @@ $block: ns(tabs);
     $fd-tabs-link-border-color: fd-color(action, 1) !default;
     $fd-tabs-link-transition-params: $fd-animation--speed ease-in !default;
 
-    @include reset;
+    @include fd-reset;
     display: flex;
     flex-wrap: wrap;
     padding-left: 0;

diff --git a/scss/components/toggle.scss b/scss/components/toggle.scss
@@ -20,7 +20,7 @@ $block: ns(toggle);
     $fd-toggle-switch-background-color--disabled: fd-color(neutral, 2) !default;
     $fd-toggle-transition-params: $fd-animation--speed ease-in !default;
 
-    @include reset;
+    @include fd-reset;
     position: relative;
     display: inline-block;
     height: $fd-toggle-height;

diff --git a/scss/components/toolbar.scss b/scss/components/toolbar.scss
@@ -22,7 +22,7 @@ $block: ns(toolbar);
 
     //BLOCK BASE *******************************************
     //set all BLOCK reset and baseline styles
-    @include reset;
+    @include fd-reset;
     min-height: $fd-toolbar-group-height;
     background-color: $fd-toolbar-background-color;
     border-color: $fd-toolbar-border-color;

diff --git a/scss/components/tree.scss b/scss/components/tree.scss
@@ -23,7 +23,7 @@ $block: ns(tree);
     $fd-tree-control-margin-right: fd-space(2) !default;
     $fd-tree-transition-params: $fd-animation--speed ease-in !default;
 
-    @include reset;
+    @include fd-reset;
     @include fd-last-child;
     position: relative;
     width: 100%;

diff --git a/scss/core/_mixins.scss b/scss/core/_mixins.scss
@@ -2,17 +2,18 @@
 
 $ns: ns();
 //utils
-@mixin reset {
+@mixin fd-reset {
     font-size: $fd-font-size;
     line-height: $fd-line-height;
     color: $fd-color;
+    font-family: $fd-font-family;
 }
 
 
 
 //els
 @mixin fd-form-base {
-    @include reset;
+    @include fd-reset;
     @include fd-type(0, body);
     appearance: none;
     -webkit-appearance: textfield;