@rypen-dev/shared-components 8.1.11 → 8.1.12

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.1.11",
+	"version": "8.1.12",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/scss/_variables.scss

@@ -194,6 +194,7 @@ $button-large-font-weight: $body-weight-normal !default;
 $button-font-size: 0.75rem !default;
 $button-font-size-medium: 1.0625rem !default;
 $button-small-font-size: 0.8125rem !default;
+$button-extra-small-font-size: 0.75rem !default;
 
 $button-letter-spacing: 1px !default;
 $button-letter-spacing-medium: 2px !default;
@@ -220,6 +221,7 @@ $button-height: 56px !default; //3.5rem !default;
 $button-height-medium: 80px !default; //5rem !default;
 
 $button-tiny-height: 44px !default; //2.75rem !default;
+$button-extra-tiny-height: 30px !default;
 
 $button-small-height: 56px !default; //3.5rem !default;
 $button-small-height-medium: 64px !default; //4rem !default;

package/scss/partials/_buttons.scss

@@ -827,14 +827,14 @@ button,
     }
 
     &.small,
-    &.tiny {
+    &.tiny,
+    &.extra-tiny {
         font-family: $button-font-family;
         font-weight: $button-font-weight;
     }
 
-    &.tiny {
-        line-height: $button-tiny-height !important;
-
+    &.tiny,
+    &.extra-tiny {
         &.multi-line {
             line-height: $button-multi-line-line-height !important;
             padding-top: $button-tiny-multi-line-vertical-padding;
@@ -842,6 +842,14 @@ button,
         }
     }
 
+    &.extra-tiny {
+        line-height: $button-tiny-height !important;
+    }
+
+    &.tiny {
+        line-height: $button-extra-tiny-height !important;
+    }
+
     &.full {
         width: 100% !important;
         margin-left: 0;
@@ -884,6 +892,11 @@ button,
         width: auto !important;
         padding-left: 1rem;
         padding-right: 1rem;
+
+        &.extra-tiny {
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+        }
     }
 
     &.qr-button {
@@ -965,7 +978,8 @@ button,
         }
 
         &.small,
-        &.tiny {
+        &.tiny,
+        &.extra-tiny {
             width: 220px;
             font-size: $button-small-font-size;
             line-height: $button-small-height-medium;
@@ -987,6 +1001,15 @@ button,
             width: 200px;
         }
 
+        &.extra-tiny {
+            font-size: $button-extra-small-font-size;
+            width: 180px;
+
+            &.stroke:not(.disabled):not(:disabled) {
+                line-height: calc($button-extra-tiny-height - 4px);
+            }
+        }
+
         &.large {
             width: 456px;
             line-height: $button-large-height-medium;
@@ -1017,6 +1040,11 @@ button,
         &.auto-width {
             padding-left: 2rem;
             padding-right: 2rem;
+
+            &.extra-tiny {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
         }
 
         &:disabled,

package/scss/partials/_layout.scss

@@ -484,4 +484,19 @@ hr {
             }
         }
     }
+}
+
+.information-message {
+    padding: 1rem;
+    border-radius: 5px;
+    color: $body-font-color;
+    background-color: $medium-gray;
+
+    &.attention {
+        background-color: $attention;
+    }
+
+    &.compact {
+        padding: 0.5rem;
+    }
 }

package/scss/partials/_typography.scss

@@ -1,10 +1,10 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500,700');
 
 // OpenSans: Light = 300, Regular = 400, Semi-Bold = 600, Bold = 700 (Extra-Bold = 800)
-// Ubuntu: Light = 300, Regular = 400, Medium = 500 (Bold = 700)
+// Ubuntu: Light = 300, Regular = 400, Medium = 500, Bold = 700
 
 body {
     font-weight: $body-weight-normal;