claritas-web-framework 8.0.23 → 8.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "8.0.23",
+  "version": "8.0.25",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {

package/sass/_variables.scss

@@ -332,6 +332,10 @@ $input-button-large-padding-y: calc($spacer * 0.5) !default;
 $input-button-large-padding-x: calc($spacer * 1.25) !default;
 $input-button-small-padding-y: calc($spacer * 0.25) !default;
 $input-button-small-padding-x: calc($spacer * 0.5) !default;
+$input-button-border-radius: $border-radius-medium !default;
+$input-button-large-border-radius: $border-radius-large !default;
+$input-button-small-border-radius: $border-radius-small !default;
+$input-button-round-border-radius: $border-radius-round !default;
 
 // Input
 $input-font-family: $input-button-font-family !default;
@@ -347,6 +351,10 @@ $input-small-padding-x: $input-button-small-padding-x !default;
 $input-large-padding-y: $input-button-large-padding-y !default;
 $input-large-padding-x: $input-button-large-padding-x !default;
 $input-white-space: nowrap !default;
+$input-border-radius: $input-button-border-radius !default;
+$input-large-border-radius: $input-button-large-border-radius !default;
+$input-small-border-radius: $input-button-small-border-radius !default;
+$input-round-border-radius: $input-button-round-border-radius !default;
 
 // Button
 $button-font-family: $input-button-font-family !default;
@@ -362,6 +370,10 @@ $button-large-padding-x: $input-button-large-padding-x !default;
 $button-small-padding-y: $input-button-small-padding-y !default;
 $button-small-padding-x: $input-button-small-padding-x !default;
 $button-white-space: nowrap !default;
+$button-border-radius: $input-button-border-radius !default;
+$button-large-border-radius: $input-button-large-border-radius !default;
+$button-small-border-radius: $input-button-small-border-radius !default;
+$button-round-border-radius: $input-button-round-border-radius !default;
 
 $button-color-flip-threshold: 60% !default;
 $button-color-flip-l: 35% !default;

package/sass/modules/_button.scss

@@ -53,9 +53,10 @@
   --button-border-width: 1px;
   --button-border-style: solid;
 
-  --button-border-radius: var(--border-radius-medium);
-  --button-small-border-radius: var(--border-radius-small);
-  --button-large-border-radius: var(--border-radius-large);
+  --button-border-radius: #{$button-border-radius};
+  --button-small-border-radius: #{$button-small-border-radius};
+  --button-large-border-radius: #{$button-large-border-radius};
+  --button-round-border-radius: #{$button-round-border-radius};
 
   --button-font-family: #{$button-font-family};
   --button-font-weight: #{$button-font-weight};
@@ -91,11 +92,19 @@
   outline: 0;
   transition: $form-transition;
 
+  &.button--rounded {
+    border-radius: var(--button-round-border-radius);
+  }
+
   &.button--large {
     padding: var(--button-large-padding-y) var(--button-large-padding-x);
 
     @include rfs($button-large-font-size, --button-font-size);
     @include font-size(var(--button-font-size));
+
+    &:not(.button--rounded) {
+      border-radius: var(--button-large-border-radius);
+    }
   }
 
   &.button--small {
@@ -103,6 +112,10 @@
 
     @include rfs($button-small-font-size, --button-font-size);
     @include font-size(var(--button-font-size));
+
+    &:not(.button--rounded) {
+      border-radius: var(--button-small-border-radius);
+    }
   }
 
   &:hover,

package/sass/modules/_form.scss

@@ -68,10 +68,10 @@
   --input-border-width: 1px;
   --input-border-style: solid;
 
-  --input-border-radius: var(--border-radius-medium);
-  --input-small-border-radius: var(--border-radius-small);
-  --input-large-border-radius: var(--border-radius-large);
-  --input-round-border-radius: var(--border-radius-round);
+  --input-border-radius: #{$input-border-radius};
+  --input-small-border-radius: #{$input-small-border-radius};
+  --input-large-border-radius: #{$input-large-border-radius};
+  --input-round-border-radius: #{$input-round-border-radius};
 
   --input-font-family: #{$input-font-family};
   --input-font-weight: #{$input-font-weight};
@@ -97,7 +97,6 @@
   white-space: var(--input-white-space);
   width: var(--input-width);
   height: var(--input-height);
-
   display: block;
   appearance: none;
   transition: $form-transition;
@@ -159,7 +158,7 @@
     @include font-size(var(--input-font-size));
 
     &:not(.input--rounded) {
-      border-radius: var(--input-large-border-radius);
+      border-radius: var(--input-small-border-radius);
     }
   }