@rypen-dev/shared-components 3.0.8 → 3.0.9

package/package.json

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

package/scss/_variables.scss

@@ -73,6 +73,7 @@ $button-hover-bg-color: $white !default;
 $button-shadow-color: $shadow-color !default;
 $button-stroke-color: $primary !default;
 
+$input-background-color: $white !default;
 $input-border-color: $secondary-alt !default;
 $input-border-focus-color: $primary !default;
 $input-highlight-color: $tertiary !default;

package/scss/partials/_forms.scss

@@ -40,6 +40,7 @@ textarea,
 select {
     padding: $form-field-padding;
     color: $body-font-color;
+    background-color: $input-background-color;
     font-family: $body-font-family;
     font-size: 1rem;
     border: solid 1px $input-border-color;
@@ -676,6 +677,20 @@ label {
             }
         }
 
+        &.disabled {
+            input {
+                color: $medium-gray;
+            }
+    
+            .steps {
+                a {
+                    background: $light-gray;
+                    color: $medium-gray;
+                    cursor: not-allowed;
+                }
+            }
+        }
+
         @media print, screen and (min-width: map-get($breakpoints, medium)) {
             input {
                 height: 4rem;
@@ -819,13 +834,13 @@ label {
 
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         &.medium-no-margin {
-            margin-bottom: 0;
+            margin-bottom: 0 !important;
         }
     }
 
     @media print, screen and (min-width: map-get($breakpoints, large)) {
         &.large-no-margin {
-            margin-bottom: 0;
+            margin-bottom: 0 !important;
         }
     }
 }
@@ -846,6 +861,10 @@ select {
     option:checked {
         background: $input-highlight-color linear-gradient(0deg, $input-highlight-color 0%, $input-highlight-color 100%);
     }
+
+    option:disabled {
+        color: $text-gray;
+    }
 }
 
 .swatch-input {
@@ -1042,6 +1061,26 @@ select {
         }
     }
 
+    &.tiny {
+        li {
+            width: 24px;
+            height: 24px;
+            padding: 2px;
+            margin-right: 4px;
+            margin-bottom: 4px;
+
+            &.current::before {
+                width: 26px;
+                height: 26px;
+            }
+
+            a {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
     @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
         a .preview {
             display: none !important;
@@ -1526,4 +1565,29 @@ input:checked ~ .switch-paddle {
             border-right-color: $secondary;
         }
     }
+
+    &.no-outline {
+        [type='text'],
+        [type='password'],
+        [type='date'],
+        [type='datetime'],
+        [type='datetime-local'],
+        [type='month'],
+        [type='week'],
+        [type='email'],
+        [type='number'],
+        [type='search'],
+        [type='tel'],
+        [type='time'],
+        [type='url'],
+        [type='color'],
+        textarea,
+        select {
+            border-color: $input-background-color;
+        }
+    }
+
+    &.no-margin {
+        margin-bottom: 0 !important;
+    }
 }