@rypen-dev/shared-components 5.1.3 → 5.2.0

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

package/scss/_variables.scss

@@ -172,14 +172,17 @@ $headline-weight-bold: 500 !default;
 
 $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;
 
+$button-letter-spacing: 1px !default;
+$button-letter-spacing-medium: 2px !default;
+
 // Measurements
 $form-field-padding: 0.625rem 1rem !default;
 
@@ -198,16 +201,19 @@ $global-base-radius: 5px !default;
 // Buttons
 $global-button-radius: $global-base-radius !default;
 
-$button-height: 3.5rem !default;
-$button-height-medium: 5rem !default;
+$button-height: 56px !default; //3.5rem !default;
+$button-height-medium: 80px !default; //5rem !default;
+
+$button-tiny-height: 44px !default; //2.75rem !default;
 
-$button-tiny-height: 2.75rem !default;
+$button-small-height: 56px !default; //3.5rem !default;
+$button-small-height-medium: 64px !default; //4rem !default;
 
-$button-small-height: 3.5rem !default;
-$button-small-height-medium: 4rem !default;
+$button-large-height: 72px !default; //4.5rem !default;
+$button-large-height-medium: 110px !default; //6.875rem !default;
 
-$button-large-height: 4.5rem !default;
-$button-large-height-medium: 6.875rem !default;
+$button-multi-line-line-height: 1.8 !default;
+$button-multi-line-side-padding: 30px !default;
 
 // Labels/Badges
 $global-badge-radius: $global-base-radius !default;

package/scss/partials/_buttons.scss

@@ -2,10 +2,7 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
-$short-arrow-width: 30px;
-$arrow-width: 40px;
-$arrow-width-medium: 50px;
-$button-transition-time: 200ms;
+@use "sass:math";
 
 .cta-link {
     display: inline-block;
@@ -249,6 +246,11 @@ a.info {
     }
 }
 
+$short-arrow-width: 30px;
+$arrow-width: 40px;
+$arrow-width-medium: 50px;
+$button-transition-time: 200ms;
+
 .arrow-link {
     display: inline-block;
     text-transform: uppercase;
@@ -610,6 +612,20 @@ a.info {
     }
 }
 
+$button-multi-line-height: $button-multi-line-line-height * math.div($button-font-size, 1rem) * 16;
+$button-multi-line-height-medium: $button-multi-line-line-height * math.div($button-font-size-medium, 1rem) * 16;
+
+$button-multi-line-vertical-padding: #{($button-height - $button-multi-line-height) * 0.5}; // 17.2px, used to be 14px
+$button-multi-line-vertical-padding-medium: #{($button-height-medium - $button-multi-line-height-medium) * 0.5};
+
+$button-tiny-multi-line-vertical-padding: #{($button-tiny-height - ($button-multi-line-line-height * math.div($button-small-font-size, 1rem) * 16)) * 0.5};
+
+$button-small-multi-line-vertical-padding: #{($button-small-height - $button-multi-line-height) * 0.5};
+$button-small-multi-line-vertical-padding-medium: #{($button-small-height-medium - ($button-multi-line-line-height * math.div($button-small-font-size, 1rem) * 16)) * 0.5};
+
+$button-large-multi-line-vertical-padding: #{($button-large-height - $button-multi-line-height) * 0.5};
+$button-large-multi-line-vertical-padding-medium: #{($button-large-height - $button-multi-line-height-medium) * 0.5};
+
 button,
 .button {
     background-color: $default-button-bg-color;
@@ -626,7 +642,7 @@ button,
     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;
+    font-size: $button-font-size;
     font-family: $button-large-font-family;
     font-weight: $button-large-font-weight;
     width: 200px;
@@ -648,8 +664,8 @@ button,
         line-height: $button-large-height;
 
         &.multi-line {
-            padding-top: 20px;
-            padding-bottom: 20px;
+            padding-top: $button-large-multi-line-vertical-padding;
+            padding-bottom: $button-large-multi-line-vertical-padding;
         }
     }
 
@@ -820,9 +836,9 @@ button,
         line-height: $button-tiny-height !important;
 
         &.multi-line {
-            line-height: 1.8 !important;
-            padding-top: 9px;
-            padding-bottom: 10px;
+            line-height: $button-multi-line-line-height !important;
+            padding-top: $button-tiny-multi-line-vertical-padding;
+            padding-bottom: $button-tiny-multi-line-vertical-padding;
         }
     }
 
@@ -833,12 +849,12 @@ button,
     }
 
     &.multi-line {
-        line-height: 1.8 !important;
-        padding: 14px 30px;
+        line-height: $button-multi-line-line-height !important;
+        padding: $button-multi-line-vertical-padding $button-multi-line-side-padding;
 
         &.narrow {
-            padding-left: 14px;
-            padding-right: 14px;
+            padding-left: $button-multi-line-side-padding * 0.5;
+            padding-right: $button-multi-line-side-padding * 0.5;
         }
     }
 
@@ -943,6 +959,11 @@ button,
         width: 388px;
         box-shadow: 0 12px 22px 0 $button-shadow-color;
 
+        &.multi-line {
+            padding-top: $button-multi-line-vertical-padding-medium;
+            padding-bottom: $button-multi-line-vertical-padding-medium;
+        }
+
         &.small,
         &.tiny {
             width: 220px;
@@ -957,8 +978,8 @@ button,
 
         &.small {
             &.multi-line {
-                padding-top: 18px;
-                padding-bottom: 18px;
+                padding-top: $button-small-multi-line-vertical-padding-medium;
+                padding-bottom: $button-small-multi-line-vertical-padding-medium;
             }
         }
 
@@ -975,8 +996,8 @@ button,
             }
 
             &.multi-line {
-                padding-top: 32px;
-                padding-bottom: 32px;
+                padding-top: $button-large-multi-line-vertical-padding-medium;
+                padding-bottom: $button-large-multi-line-vertical-padding-medium;
             }
 
             &:hover,