@rypen-dev/shared-components 5.1.1 → 5.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "5.1.1",
+	"version": "5.1.3",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_variables.scss

@@ -61,10 +61,13 @@ $headline-accent-color-reversed: $white !default;
 
 $headline-divider-border-color: $medium-gray !default;
 $headline-divider-bg-color: transparent !default;
-$headline-divider-color: $text-gray !default;
 $headline-divider-reversed-color: $white !default;
+$headline-divider-color: $text-gray !default;
 $headline-divider-padding: 0 !default;
 
+$headline-divider-lite-color: $text-gray !default;
+$headline-divider-lite-border-color: $text-gray !default;
+
 $headline-small-color: $text-gray !default;
 
 $navigation-link-color: $primary !default;
@@ -171,6 +174,11 @@ $button-font-family: $body-font-family !default;
 $button-large-font-family: $headline-font-family !default;
 $button-font-weight: 600 !default;
 $button-large-font-weight: $body-weight-normal !default;
+$button-font-size: 0.75rem !default;
+$button-letter-spacing: 1px !default;
+$button-font-size-medium: 1.0625rem !default;
+$button-letter-spacing-medium: 2px !default;
+$button-small-font-size: 0.8125rem !default;
 
 // Measurements
 $form-field-padding: 0.625rem 1rem !default;
@@ -190,6 +198,17 @@ $global-base-radius: 5px !default;
 // Buttons
 $global-button-radius: $global-base-radius !default;
 
+$button-height: 3.5rem !default;
+$button-height-medium: 5rem !default;
+
+$button-tiny-height: 2.75rem !default;
+
+$button-small-height: 3.5rem !default;
+$button-small-height-medium: 4rem !default;
+
+$button-large-height: 4.5rem !default;
+$button-large-height-medium: 6.875rem !default;
+
 // Labels/Badges
 $global-badge-radius: $global-base-radius !default;
 

package/scss/partials/_buttons.scss

@@ -623,7 +623,7 @@ button,
     cursor: pointer;
     color: $primary;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: $button-letter-spacing;
     transition: box-shadow $button-transition-time ease-out, background-color $button-transition-time ease-out, color $button-transition-time ease-out;
     box-shadow: 0 4px 13px 1px $button-shadow-color;
     font-size: 0.75rem;
@@ -631,7 +631,7 @@ button,
     font-weight: $button-large-font-weight;
     width: 200px;
     max-width: 100%;
-    line-height: 3.5rem;
+    line-height: $button-height;
 
     &:focus {
         outline: none;
@@ -645,7 +645,7 @@ button,
     }
 
     &.large {
-        line-height: 4.5rem;
+        line-height: $button-large-height;
 
         &.multi-line {
             padding-top: 20px;
@@ -802,10 +802,10 @@ button,
         border: solid 2px $button-stroke-color;
 
         &:not(:disabled):not(.disabled) {
-            line-height: calc(3.5rem - 4px);
+            line-height: calc($button-height - 4px);
 
             &.tiny {
-                line-height: calc(2.75rem - 4px) !important;
+                line-height: calc($button-tiny-height - 4px) !important;
             }
         }
     }
@@ -817,7 +817,7 @@ button,
     }
 
     &.tiny {
-        line-height: 2.75rem !important;
+        line-height: $button-tiny-height !important;
 
         &.multi-line {
             line-height: 1.8 !important;
@@ -936,22 +936,22 @@ button,
     }
 
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        line-height: 5rem;
+        line-height: $button-height-medium;
         margin-bottom: 1rem;
-        letter-spacing: 2px;
-        font-size: 1.0625rem;
+        letter-spacing: $button-letter-spacing-medium;
+        font-size: $button-font-size-medium;
         width: 388px;
         box-shadow: 0 12px 22px 0 $button-shadow-color;
 
         &.small,
         &.tiny {
             width: 220px;
-            font-size: 0.8125rem;
-            line-height: 4rem;
+            font-size: $button-small-font-size;
+            line-height: $button-small-height-medium;
             box-shadow: $button-shadow-color 0 7px 12px;
 
             &.stroke:not(.disabled):not(:disabled) {
-                line-height: calc(4rem - 4px);
+                line-height: calc($button-small-height-medium - 4px);
             }
         }
 
@@ -968,10 +968,10 @@ button,
 
         &.large {
             width: 456px;
-            line-height: 6.875rem;
+            line-height: $button-large-height-medium;
 
             &.stroke {
-                line-height: calc(6.875rem - 4px);
+                line-height: calc($button-large-height-medium - 4px);
             }
 
             &.multi-line {

package/scss/partials/_typography.scss

@@ -242,8 +242,10 @@ h5 {
     
         &.lite {
             font-size: 0.875rem;
-            padding-bottom: 0.25rem;
-            border-bottom: solid 2px $headline-divider-color;
+            padding: 0 0 0.25rem;
+            border-bottom: solid 2px $headline-divider-lite-border-color;
+            color: $headline-divider-lite-color;
+            background-color: transparent;
             margin-bottom: 0.25rem;
         }