@rypen-dev/shared-components 5.1.2 → 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.2",
+	"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;
@@ -194,13 +202,12 @@ $button-height: 3.5rem !default;
 $button-height-medium: 5rem !default;
 
 $button-tiny-height: 2.75rem !default;
-$button-tiny-height-medium: 2.75re !default;
 
 $button-small-height: 3.5rem !default;
 $button-small-height-medium: 4rem !default;
 
 $button-large-height: 4.5rem !default;
-$button-large-height-medium: 4rem !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;
@@ -938,15 +938,15 @@ button,
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         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;
+            font-size: $button-small-font-size;
             line-height: $button-small-height-medium;
             box-shadow: $button-shadow-color 0 7px 12px;
 

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;
         }