@rypen-dev/shared-components 5.1.1 → 5.1.2

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.2",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_variables.scss

@@ -190,6 +190,18 @@ $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-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;
+
 // Labels/Badges
 $global-badge-radius: $global-base-radius !default;
 

package/scss/partials/_buttons.scss

@@ -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,7 +936,7 @@ 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;
@@ -947,11 +947,11 @@ button,
         &.tiny {
             width: 220px;
             font-size: 0.8125rem;
-            line-height: 4rem;
+            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 {