fix: use font size property on all components

dnbexperience · Jan 17, 2019 · d2dbc3a · d2dbc3a
1 parent cd99cc1
commit d2dbc3a
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 25 deletions.
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -646,7 +646,7 @@ a.dnb-button {
     flex: 1 100%;
     padding: 0.5em 1.5em;
     color: var(--color-black);
-    font-size: 0.75em;
+    font-size: var(--font-size-small);
     line-height: 1.25rem; }
   > .dnb-form-label ~ .dnb-input__extra-information {
     padding: 0.5em 0; }

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -503,7 +503,7 @@ a.dnb-button {
     flex: 1 100%;
     padding: 0.5em 1.5em;
     color: var(--color-black);
-    font-size: 0.75em;
+    font-size: var(--font-size-small);
     line-height: 1.25rem; }
   > .dnb-form-label ~ .dnb-input__extra-information {
     padding: 0.5em 0; }

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -688,7 +688,7 @@ a.dnb-button {
     flex: 1 100%;
     padding: 0.5em 1.5em;
     color: var(--color-black);
-    font-size: 0.75em;
+    font-size: var(--font-size-small);
     line-height: 1.25rem; }
   > .dnb-form-label ~ .dnb-input__extra-information {
     padding: 0.5em 0; }

diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -143,7 +143,7 @@
     padding: 0.5em 1.5em;
 
     color: var(--color-black);
-    font-size: 0.75em; // 12px
+    font-size: var(--font-size-small); // 14px
     line-height: 1.25rem;
   }
   > .dnb-form-label ~ &__extra-information {

diff --git a/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss b/packages/dnb-ui-lib/src/components/line-title/style/_line-title.scss
@@ -18,27 +18,30 @@ $large-right-padding: (100 - $large-title-width);
   }
 
   &__title {
-    font-size: 1.5rem;
-    line-height: 2rem;
+    display: inline;
     position: relative;
     z-index: 1;
-    display: inline;
+
+    font-size: var(--font-size-medium);
+    line-height: 2rem;
   }
 
   &__mask {
     position: absolute;
-    background-color: white; // so we overlay the line
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
+    z-index: 1;
     top: -0.5rem;
     left: -0.5rem;
-    z-index: 1;
+
+    width: calc(100% + 1rem);
+    height: calc(100% + 1rem);
+
+    background-color: white; // so we overlay the line
   }
 
   &__text {
+    display: inline;
     position: relative;
     z-index: 2;
-    display: inline;
   }
 
   &--small {
@@ -49,10 +52,12 @@ $large-right-padding: (100 - $large-title-width);
 }
 
 .dnb-line-title__line {
-  width: 100%;
-  height: 1px;
-  background: var(--color-summer-green);
   position: absolute;
   top: 50%;
   left: 0;
+
+  width: 100%;
+  height: 1px;
+
+  background: var(--color-summer-green);
 }
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -238,8 +238,7 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 
 .dnb-tabs__tabs .dnb-tablink-title {
   font-weight: var(--font-weight-book);
-  font-size: 1em;
-  line-height: 1.5em;
+  font-size: var(--font-size-default);
   text-align: center;
   color: var(--color-emerald-green); }
 
@@ -460,8 +459,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
     outline: none;
     border: none; }
     .dnb-tabs__tabs .dnb-tablink-title {
-      font-size: 1em;
-      line-height: 1.5em;
+      font-size: var(--font-size-default);
       white-space: nowrap; }
     .dnb-tabs__tabs .dnb-tablink > span[hidden] {
       display: flex;

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -7,8 +7,6 @@
   &__tabs {
     position: relative;
     z-index: 1;
-    // z-index: 100; /* some components have set a position, like MainMenu */
-    // overflow: hidden;
 
     display: flex;
     flex-direction: row;
@@ -34,6 +32,7 @@
 
     // we may wrap this &::after in allAbove to now show for mobile
     // @include allAbove(medium) {}
+
     &::after {
       content: '';
       position: absolute;
@@ -61,8 +60,7 @@
 
       // should be same as .lead small
       &-title {
-        font-size: 1em;
-        line-height: 1.5em;
+        font-size: var(--font-size-default);
         white-space: nowrap;
       }
 

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -15,8 +15,7 @@
       // should be same as .lead small
       &-title {
         font-weight: var(--font-weight-book);
-        font-size: 1em;
-        line-height: 1.5em;
+        font-size: var(--font-size-default);
         text-align: center;
 
         color: var(--color-emerald-green);