claritas-web-framework 8.0.23 → 8.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/package.json +1 -1
- package/sass/_variables.scss +12 -0
- package/sass/modules/_button.scss +16 -3
- package/sass/modules/_form.scss +4 -5
package/package.json
CHANGED
package/sass/_variables.scss
CHANGED
|
@@ -332,6 +332,10 @@ $input-button-large-padding-y: calc($spacer * 0.5) !default;
|
|
|
332
332
|
$input-button-large-padding-x: calc($spacer * 1.25) !default;
|
|
333
333
|
$input-button-small-padding-y: calc($spacer * 0.25) !default;
|
|
334
334
|
$input-button-small-padding-x: calc($spacer * 0.5) !default;
|
|
335
|
+
$input-button-border-radius: $border-radius-medium !default;
|
|
336
|
+
$input-button-large-border-radius: $border-radius-large !default;
|
|
337
|
+
$input-button-small-border-radius: $border-radius-small !default;
|
|
338
|
+
$input-button-round-border-radius: $border-radius-round !default;
|
|
335
339
|
|
|
336
340
|
// Input
|
|
337
341
|
$input-font-family: $input-button-font-family !default;
|
|
@@ -347,6 +351,10 @@ $input-small-padding-x: $input-button-small-padding-x !default;
|
|
|
347
351
|
$input-large-padding-y: $input-button-large-padding-y !default;
|
|
348
352
|
$input-large-padding-x: $input-button-large-padding-x !default;
|
|
349
353
|
$input-white-space: nowrap !default;
|
|
354
|
+
$input-border-radius: $input-button-border-radius !default;
|
|
355
|
+
$input-large-border-radius: $input-button-large-border-radius !default;
|
|
356
|
+
$input-small-border-radius: $input-button-small-border-radius !default;
|
|
357
|
+
$input-round-border-radius: $input-button-round-border-radius !default;
|
|
350
358
|
|
|
351
359
|
// Button
|
|
352
360
|
$button-font-family: $input-button-font-family !default;
|
|
@@ -362,6 +370,10 @@ $button-large-padding-x: $input-button-large-padding-x !default;
|
|
|
362
370
|
$button-small-padding-y: $input-button-small-padding-y !default;
|
|
363
371
|
$button-small-padding-x: $input-button-small-padding-x !default;
|
|
364
372
|
$button-white-space: nowrap !default;
|
|
373
|
+
$button-border-radius: $input-button-border-radius !default;
|
|
374
|
+
$button-large-border-radius: $input-button-large-border-radius !default;
|
|
375
|
+
$button-small-border-radius: $input-button-small-border-radius !default;
|
|
376
|
+
$button-round-border-radius: $input-button-round-border-radius !default;
|
|
365
377
|
|
|
366
378
|
$button-color-flip-threshold: 60% !default;
|
|
367
379
|
$button-color-flip-l: 35% !default;
|
|
@@ -53,9 +53,10 @@
|
|
|
53
53
|
--button-border-width: 1px;
|
|
54
54
|
--button-border-style: solid;
|
|
55
55
|
|
|
56
|
-
--button-border-radius:
|
|
57
|
-
--button-small-border-radius:
|
|
58
|
-
--button-large-border-radius:
|
|
56
|
+
--button-border-radius: #{$button-border-radius};
|
|
57
|
+
--button-small-border-radius: #{$button-small-border-radius};
|
|
58
|
+
--button-large-border-radius: #{$button-large-border-radius};
|
|
59
|
+
--button-round-border-radius: #{$button-round-border-radius};
|
|
59
60
|
|
|
60
61
|
--button-font-family: #{$button-font-family};
|
|
61
62
|
--button-font-weight: #{$button-font-weight};
|
|
@@ -91,11 +92,19 @@
|
|
|
91
92
|
outline: 0;
|
|
92
93
|
transition: $form-transition;
|
|
93
94
|
|
|
95
|
+
&.button--rounded {
|
|
96
|
+
border-radius: var(--button-round-border-radius);
|
|
97
|
+
}
|
|
98
|
+
|
|
94
99
|
&.button--large {
|
|
95
100
|
padding: var(--button-large-padding-y) var(--button-large-padding-x);
|
|
96
101
|
|
|
97
102
|
@include rfs($button-large-font-size, --button-font-size);
|
|
98
103
|
@include font-size(var(--button-font-size));
|
|
104
|
+
|
|
105
|
+
&:not(.button--rounded) {
|
|
106
|
+
border-radius: var(--button-large-border-radius);
|
|
107
|
+
}
|
|
99
108
|
}
|
|
100
109
|
|
|
101
110
|
&.button--small {
|
|
@@ -103,6 +112,10 @@
|
|
|
103
112
|
|
|
104
113
|
@include rfs($button-small-font-size, --button-font-size);
|
|
105
114
|
@include font-size(var(--button-font-size));
|
|
115
|
+
|
|
116
|
+
&:not(.button--rounded) {
|
|
117
|
+
border-radius: var(--button-small-border-radius);
|
|
118
|
+
}
|
|
106
119
|
}
|
|
107
120
|
|
|
108
121
|
&:hover,
|
package/sass/modules/_form.scss
CHANGED
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
--input-border-width: 1px;
|
|
69
69
|
--input-border-style: solid;
|
|
70
70
|
|
|
71
|
-
--input-border-radius:
|
|
72
|
-
--input-small-border-radius:
|
|
73
|
-
--input-large-border-radius:
|
|
74
|
-
--input-round-border-radius:
|
|
71
|
+
--input-border-radius: #{$input-border-radius};
|
|
72
|
+
--input-small-border-radius: #{$input-small-border-radius};
|
|
73
|
+
--input-large-border-radius: #{$input-large-border-radius};
|
|
74
|
+
--input-round-border-radius: #{$input-round-border-radius};
|
|
75
75
|
|
|
76
76
|
--input-font-family: #{$input-font-family};
|
|
77
77
|
--input-font-weight: #{$input-font-weight};
|
|
@@ -97,7 +97,6 @@
|
|
|
97
97
|
white-space: var(--input-white-space);
|
|
98
98
|
width: var(--input-width);
|
|
99
99
|
height: var(--input-height);
|
|
100
|
-
|
|
101
100
|
display: block;
|
|
102
101
|
appearance: none;
|
|
103
102
|
transition: $form-transition;
|