@massimo-cassandro/minimo 1.20.15 → 1.21.0

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.
Files changed (56) hide show
  1. package/design-tokens/_src/link.minimo.tokens.mjs +35 -4
  2. package/package.json +1 -1
  3. package/src/components/autocomplete/autocomplete.css +113 -109
  4. package/src/components/inner-nav/inner-nav.css +13 -9
  5. package/src/components/modal-alert/modal-alert.js +13 -13
  6. package/src/components/modal-alert/modal-alert.module.css +157 -153
  7. package/src/components/modal-popup/modal-popup.module.css +89 -85
  8. package/src/components/overlay/overlay.css +14 -10
  9. package/src/components/sf-macro/sf-macro.css +60 -56
  10. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +33 -29
  11. package/src/components/snackbar/snackbar.module.css +93 -89
  12. package/src/components/spinner/spinner-circle-basic.css +18 -14
  13. package/src/components/spinner/spinner.module.css +8 -4
  14. package/src/components/unsplash-page/unsplash-page.module.css +260 -256
  15. package/src/css/alerts.css +55 -53
  16. package/src/css/badge.css +16 -12
  17. package/src/css/buttons/btn-close.css +57 -53
  18. package/src/css/buttons/buttons-primary.css +38 -34
  19. package/src/css/buttons/buttons-secondary.css +38 -34
  20. package/src/css/buttons/buttons.css +84 -80
  21. package/src/css/buttons/status-buttons.css +66 -63
  22. package/src/css/container.css +9 -5
  23. package/src/css/data-formats.css +28 -24
  24. package/src/css/details.css +17 -13
  25. package/src/css/dimensions.css +13 -9
  26. package/src/css/display.css +27 -23
  27. package/src/css/flex.css +39 -35
  28. package/src/css/forms/fieldset.css +47 -43
  29. package/src/css/forms/form-collections.css +16 -12
  30. package/src/css/forms/form-disabled-readonly.css +31 -27
  31. package/src/css/forms/form-group.css +15 -11
  32. package/src/css/forms/form-utilities.css +32 -28
  33. package/src/css/forms/forms.css +136 -134
  34. package/src/css/forms/input-group.css +47 -43
  35. package/src/css/forms/switch.css +50 -46
  36. package/src/css/forms/validation.css +26 -22
  37. package/src/css/grid.css +66 -62
  38. package/src/css/headings.css +32 -28
  39. package/src/css/icons.css +41 -37
  40. package/src/css/layout-base.css +16 -12
  41. package/src/css/links.css +49 -0
  42. package/src/css/margin-padding-bootstrap-media.css +1836 -1832
  43. package/src/css/margin-padding-bootstrap.css +445 -441
  44. package/src/css/margin-padding-media.css +1836 -1832
  45. package/src/css/margin-padding.css +445 -441
  46. package/src/css/overflow.css +7 -3
  47. package/src/css/position.css +5 -1
  48. package/src/css/reset.css +47 -44
  49. package/src/css/svg.css +6 -2
  50. package/src/css/table.css +59 -55
  51. package/src/css/text.css +96 -92
  52. package/src/css/visibility.css +23 -19
  53. package/src/custom-properties.css +9 -3
  54. package/src/minimo.css +3 -1
  55. package/src/web-components/s-datatable-component/s-datatable-component.module.css +175 -171
  56. package/src/css/anchors.css +0 -45
package/src/css/alerts.css CHANGED
@@ -1,8 +1,10 @@
1
- /* default altert (danger) */
1
+ @layer base {
2
2
 
3
- .alert {
3
+ /* default altert (danger) */
4
4
 
5
- /*
5
+ .alert {
6
+
7
+ /*
6
8
  symfony message labels:
7
9
  - success
8
10
  - notice
@@ -24,56 +26,56 @@
24
26
  --------------------------
25
27
  */
26
28
 
27
- /* alert-danger (default) */
28
- --_alert-bg-color: var(--status-danger-background-color);
29
- --_alert-fg-color: var(--status-danger-fg);
30
- --_alert-border-color: var(--status-danger-border-color);
29
+ /* alert-danger (default) */
30
+ --_alert-bg-color: var(--status-danger-background-color);
31
+ --_alert-fg-color: var(--status-danger-fg);
32
+ --_alert-border-color: var(--status-danger-border-color);
31
33
 
32
- position: relative;
34
+ position: relative;
33
35
 
34
- &.alert-warning, &.alert-notice {
35
- --_alert-bg-color: var(--status-warning-color);
36
- --_alert-fg-color: var(--status-warning-fg);
37
- --_alert-border-color: var(--status-warning-border-color);
38
- }
39
- &.alert-info {
40
- --_alert-bg-color: var(--status-info-color);
41
- --_alert-fg-color: var(--status-info-fg);
42
- --_alert-border-color: var(--status-info-border-color);
43
- }
44
- &.alert-success {
45
- --_alert-bg-color: var(--status-success-color);
46
- --_alert-fg-color: var(--status-success-fg);
47
- --_alert-border-color: var(--status-success-border-color);
48
- }
36
+ &.alert-warning, &.alert-notice {
37
+ --_alert-bg-color: var(--status-warning-color);
38
+ --_alert-fg-color: var(--status-warning-fg);
39
+ --_alert-border-color: var(--status-warning-border-color);
40
+ }
41
+ &.alert-info {
42
+ --_alert-bg-color: var(--status-info-color);
43
+ --_alert-fg-color: var(--status-info-fg);
44
+ --_alert-border-color: var(--status-info-border-color);
45
+ }
46
+ &.alert-success {
47
+ --_alert-bg-color: var(--status-success-color);
48
+ --_alert-fg-color: var(--status-success-fg);
49
+ --_alert-border-color: var(--status-success-border-color);
50
+ }
49
51
 
50
- padding: var(--size-base) var(--size-xl) var(--size-base) var(--size-base);
51
- margin: var(--size-base) 0;
52
- font-size: var(--font-size-base);
53
- /* font-weight: var(--font-weight-semibold); */
54
- color: var(--_alert-fg-color);
55
- background-color: var(--_alert-bg-color);
56
- border: 1px solid var(--_alert-border-color);
57
- border-radius: var(--alert-border-radius);
58
- box-shadow: var(--alert-box-shadow);
52
+ padding: var(--size-base) var(--size-xl) var(--size-base) var(--size-base);
53
+ margin: var(--size-base) 0;
54
+ font-size: var(--font-size-base);
55
+ /* font-weight: var(--font-weight-semibold); */
56
+ color: var(--_alert-fg-color);
57
+ background-color: var(--_alert-bg-color);
58
+ border: 1px solid var(--_alert-border-color);
59
+ border-radius: var(--alert-border-radius);
60
+ box-shadow: var(--alert-box-shadow);
59
61
 
60
- *:not(.btn-close) {
61
- /* stylelint-disable-next-line declaration-no-important */
62
- color: var(--_alert-fg-color) !important;
63
- }
64
- h2 {
65
- margin: 0 0 var(--size-xs);
66
- font-size: var(--font-size-lg);
67
- }
68
- p {
69
- margin-block-end: var(--size-xs);
70
- &:last-child {
71
- margin-block-end: 0;
62
+ *:not(.btn-close) {
63
+ /* stylelint-disable-next-line declaration-no-important */
64
+ color: var(--_alert-fg-color) !important;
65
+ }
66
+ h2 {
67
+ margin: 0 0 var(--size-xs);
68
+ font-size: var(--font-size-lg);
69
+ }
70
+ p {
71
+ margin-block-end: var(--size-xs);
72
+ &:last-child {
73
+ margin-block-end: 0;
74
+ }
72
75
  }
73
- }
74
76
 
75
- /* TODO alerts links */
76
- /* a {
77
+ /* TODO alerts links */
78
+ /* a {
77
79
  text-decoration: underline;
78
80
  text-underline-offset: 3px;
79
81
  &, &:visited {
@@ -88,12 +90,12 @@
88
90
  }
89
91
  } */
90
92
 
91
- .btn-close {
92
- position: absolute;
93
- top: -.3rem;
94
- right: -.3rem;
93
+ .btn-close {
94
+ position: absolute;
95
+ top: -.3rem;
96
+ right: -.3rem;
97
+ }
98
+
95
99
  }
96
100
 
97
101
  }
98
-
99
-
package/src/css/badge.css CHANGED
@@ -1,16 +1,20 @@
1
- .badge {
2
- display: inline-block;
3
- padding: var(--size-xxs) var(--size-sm);
4
- font-size: var(--badge-font-size);
5
- font-weight: var(--badge-font-weight);
6
- vertical-align: middle;
7
- color: var(--badge-color);
8
- background-color: var(--badge-background-color);
9
- border-radius: var(--radius-pill);
1
+ @layer base {
10
2
 
11
- &.badge-lg {
12
- font-size: var(--badge-lg-font-size);
13
- font-weight: var(--badge-lg-font-weight);
3
+ .badge {
4
+ display: inline-block;
5
+ padding: var(--size-xxs) var(--size-sm);
6
+ font-size: var(--badge-font-size);
7
+ font-weight: var(--badge-font-weight);
8
+ vertical-align: middle;
9
+ color: var(--badge-color);
10
+ background-color: var(--badge-background-color);
11
+ border-radius: var(--radius-pill);
14
12
 
13
+ &.badge-lg {
14
+ font-size: var(--badge-lg-font-size);
15
+ font-weight: var(--badge-lg-font-weight);
16
+
17
+ }
15
18
  }
19
+
16
20
  }
package/src/css/buttons/btn-close.css CHANGED
@@ -1,72 +1,76 @@
1
- /*
1
+ @layer base {
2
+
3
+ /*
2
4
  <button type="button" class="btn-close" aria-label="Chiudi">Chiudi</button>
3
5
  <button type="button" class="btn-close">Chiudi</button>
4
6
  */
5
7
 
6
- /* TODO controllare allineamento x interna - prob. valutare meglio l'ingombro dello spessore */
8
+ /* TODO controllare allineamento x interna - prob. valutare meglio l'ingombro dello spessore */
7
9
 
8
- .btn-close {
9
- --_icon-bar-width: calc(var(--btn-close-size) - (var(--btn-close-padding) * 2) - (var(--btn-close-border-width) * 2));
10
+ .btn-close {
11
+ --_icon-bar-width: calc(var(--btn-close-size) - (var(--btn-close-padding) * 2) - (var(--btn-close-border-width) * 2));
10
12
 
11
- position: relative;
13
+ position: relative;
12
14
 
13
- display: inline-block;
14
- width: var(--btn-close-size);
15
- height: var(--btn-close-size);
16
- padding: var(--btn-close-padding);
17
- color: var(--btn-close-icon-color);
18
- text-indent: -999em;
19
- cursor: pointer;
20
- background-color: var(--btn-close-background-color);
21
- border: var(--btn-close-border-width) solid var(--btn-close-border-color);
22
- border-radius: var(--btn-close-border-radius);
15
+ display: inline-block;
16
+ width: var(--btn-close-size);
17
+ height: var(--btn-close-size);
18
+ padding: var(--btn-close-padding);
19
+ color: var(--btn-close-icon-color);
20
+ text-indent: -999em;
21
+ cursor: pointer;
22
+ background-color: var(--btn-close-background-color);
23
+ border: var(--btn-close-border-width) solid var(--btn-close-border-color);
24
+ border-radius: var(--btn-close-border-radius);
23
25
 
24
- &::before, &::after {
25
- position: absolute;
26
- top: 50%;
27
- left: 50%;
28
- display: block;
29
- width: var(--_icon-bar-width);
30
- height: var(--btn-close-icon-bar-size);
31
- content: '';
32
- background: currentColor;
33
- transform-origin: center;
34
- /* translate: var(--btn-close-padding) -50%; */
35
- translate: -50% -50%;
36
- }
37
- &::before {
38
- rotate: 45deg;
39
- }
40
- &::after {
41
- rotate: -45deg;
42
- }
26
+ &::before, &::after {
27
+ position: absolute;
28
+ top: 50%;
29
+ left: 50%;
30
+ display: block;
31
+ width: var(--_icon-bar-width);
32
+ height: var(--btn-close-icon-bar-size);
33
+ content: '';
34
+ background: currentColor;
35
+ transform-origin: center;
36
+ /* translate: var(--btn-close-padding) -50%; */
37
+ translate: -50% -50%;
38
+ }
39
+ &::before {
40
+ rotate: 45deg;
41
+ }
42
+ &::after {
43
+ rotate: -45deg;
44
+ }
43
45
 
44
- &:focus {
45
- outline: none;
46
- }
46
+ &:focus {
47
+ outline: none;
48
+ }
47
49
 
48
- &:focus-visible {
49
- outline: var(--btn-close-focus-outline-width) solid var(--btn-close-focus-outline-color);
50
- outline-offset: var(--btn-close-focus-outline-offset);
51
- }
50
+ &:focus-visible {
51
+ outline: var(--btn-close-focus-outline-width) solid var(--btn-close-focus-outline-color);
52
+ outline-offset: var(--btn-close-focus-outline-offset);
53
+ }
52
54
 
53
- @media (hover: hover) {
54
- &:hover {
55
+ @media (hover: hover) {
56
+ &:hover {
55
57
 
56
- background-color: var(--btn-close-hover-background-color);
57
- border-color: var(--btn-close-hover-border-color);
58
+ background-color: var(--btn-close-hover-background-color);
59
+ border-color: var(--btn-close-hover-border-color);
58
60
 
59
- &::before, &::after {
60
- background-color: var(--btn-close-hover-icon-color);
61
+ &::before, &::after {
62
+ background-color: var(--btn-close-hover-icon-color);
63
+ }
61
64
  }
62
65
  }
63
- }
64
66
 
65
- &:active {
66
- background-color: var(--btn-close-active-background-color);
67
- &::before, &::after {
68
- background-color: var(--btn-close-active-icon-color);
69
- }
67
+ &:active {
68
+ background-color: var(--btn-close-active-background-color);
69
+ &::before, &::after {
70
+ background-color: var(--btn-close-active-icon-color);
71
+ }
70
72
 
73
+ }
71
74
  }
75
+
72
76
  }
package/src/css/buttons/buttons-primary.css CHANGED
@@ -1,47 +1,51 @@
1
+ @layer base {
1
2
 
2
- .btn-primary {
3
- --_button-bg-color: var(--btn-primary-background-color);
4
- --_button-fg-color: var(--btn-primary-color);
5
- --_button-border-color: var(--btn-primary-border-color);
6
3
 
7
- @media (hover: hover) {
8
- &:hover {
9
- --_button-bg-color: var(--btn-primary-hover-background-color);
10
- --_button-fg-color: var(--btn-primary-hover-color);
11
- --_button-border-color: var(--btn-primary-hover-border-color);
4
+ .btn-primary {
5
+ --_button-bg-color: var(--btn-primary-background-color);
6
+ --_button-fg-color: var(--btn-primary-color);
7
+ --_button-border-color: var(--btn-primary-border-color);
8
+
9
+ @media (hover: hover) {
10
+ &:hover {
11
+ --_button-bg-color: var(--btn-primary-hover-background-color);
12
+ --_button-fg-color: var(--btn-primary-hover-color);
13
+ --_button-border-color: var(--btn-primary-hover-border-color);
14
+ }
15
+ }
16
+ &:focus {
17
+ outline: none;
12
18
  }
13
- }
14
- &:focus {
15
- outline: none;
16
- }
17
19
 
18
- &:focus-visible, &:active {
19
- outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
20
- /* outline-offset: 4px; */
21
- }
20
+ &:focus-visible, &:active {
21
+ outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
22
+ /* outline-offset: 4px; */
23
+ }
22
24
 
23
- &:active {
24
- --_button-bg-color: var(--btn-primary-active-background-color);
25
- --_button-fg-color: var(--btn-primary-active-color);
26
- --_button-border-color: var(--btn-primary-active-border-color);
27
- }
25
+ &:active {
26
+ --_button-bg-color: var(--btn-primary-active-background-color);
27
+ --_button-fg-color: var(--btn-primary-active-color);
28
+ --_button-border-color: var(--btn-primary-active-border-color);
29
+ }
28
30
 
29
31
 
30
- &.btn-hollow {
32
+ &.btn-hollow {
31
33
 
32
- --_button-bg-color: var(--btn-primary-hollow-background-color);
33
- --_button-fg-color: var(--btn-primary-hollow-color);
34
- /* --_button-border-color: var(--__btn-o-primary-border-color); */
34
+ --_button-bg-color: var(--btn-primary-hollow-background-color);
35
+ --_button-fg-color: var(--btn-primary-hollow-color);
36
+ /* --_button-border-color: var(--__btn-o-primary-border-color); */
35
37
 
36
38
 
37
- @media (hover: hover) {
38
- &:hover {
39
- --_button-bg-color: var(--btn-primary-hollow-hover-background-color);
40
- --_button-fg-color: var(--btn-primary-hollow-hover-color);
41
- /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
39
+ @media (hover: hover) {
40
+ &:hover {
41
+ --_button-bg-color: var(--btn-primary-hollow-hover-background-color);
42
+ --_button-fg-color: var(--btn-primary-hollow-hover-color);
43
+ /* --_button-border-color: var(--__btn-o-primary-hover-border-color); */
44
+ }
42
45
  }
43
- }
44
46
 
45
- } /* end .btn-primary.btn-hollow */
47
+ } /* end .btn-primary.btn-hollow */
48
+
49
+ } /* end btn-primary */
46
50
 
47
- } /* end btn-primary */
51
+ }
package/src/css/buttons/buttons-secondary.css CHANGED
@@ -1,48 +1,52 @@
1
+ @layer base {
1
2
 
2
- .btn-secondary {
3
- --_button-bg-color: var(--btn-secondary-background-color);
4
- --_button-fg-color: var(--btn-secondary-color);
5
- --_button-border-color: var(--btn-secondary-border-color);
6
3
 
7
- @media (hover: hover) {
8
- &:hover {
9
- --_button-bg-color: var(--btn-secondary-hover-background-color);
10
- --_button-fg-color: var(--btn-secondary-hover-color);
11
- --_button-border-color: var(--btn-secondary-hover-border-color);
4
+ .btn-secondary {
5
+ --_button-bg-color: var(--btn-secondary-background-color);
6
+ --_button-fg-color: var(--btn-secondary-color);
7
+ --_button-border-color: var(--btn-secondary-border-color);
8
+
9
+ @media (hover: hover) {
10
+ &:hover {
11
+ --_button-bg-color: var(--btn-secondary-hover-background-color);
12
+ --_button-fg-color: var(--btn-secondary-hover-color);
13
+ --_button-border-color: var(--btn-secondary-hover-border-color);
14
+ }
12
15
  }
13
- }
14
16
 
15
- &:focus {
16
- outline: none;
17
- }
17
+ &:focus {
18
+ outline: none;
19
+ }
18
20
 
19
- &:focus-visible, &:active {
20
- outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
21
- /* outline-offset: 4px; */
22
- }
21
+ &:focus-visible, &:active {
22
+ outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
23
+ /* outline-offset: 4px; */
24
+ }
23
25
 
24
- &:active {
25
- --_button-bg-color: var(--btn-secondary-active-background-color);
26
- --_button-fg-color: var(--btn-secondary-active-color);
27
- --_button-border-color: var(--btn-secondary-active-border-color);
28
- }
26
+ &:active {
27
+ --_button-bg-color: var(--btn-secondary-active-background-color);
28
+ --_button-fg-color: var(--btn-secondary-active-color);
29
+ --_button-border-color: var(--btn-secondary-active-border-color);
30
+ }
29
31
 
30
32
 
31
- &.btn-hollow {
33
+ &.btn-hollow {
32
34
 
33
- --_button-bg-color: var(--btn-secondary-hollow-background-color);
34
- --_button-fg-color: var(--btn-secondary-hollow-color);
35
- /* --_button-border-color: var(--__btn-o-secondary-border-color); */
35
+ --_button-bg-color: var(--btn-secondary-hollow-background-color);
36
+ --_button-fg-color: var(--btn-secondary-hollow-color);
37
+ /* --_button-border-color: var(--__btn-o-secondary-border-color); */
36
38
 
37
39
 
38
- @media (hover: hover) {
39
- &:hover {
40
- --_button-bg-color: var(--btn-secondary-hollow-hover-background-color);
41
- --_button-fg-color: var(--btn-secondary-hollow-hover-color);
42
- /* --_button-border-color: var(--__btn-o-secondary-hover-border-color); */
40
+ @media (hover: hover) {
41
+ &:hover {
42
+ --_button-bg-color: var(--btn-secondary-hollow-hover-background-color);
43
+ --_button-fg-color: var(--btn-secondary-hollow-hover-color);
44
+ /* --_button-border-color: var(--__btn-o-secondary-hover-border-color); */
45
+ }
43
46
  }
44
- }
45
47
 
46
- } /* end .btn-secondary.btn-hollow */
48
+ } /* end .btn-secondary.btn-hollow */
49
+
50
+ } /* end btn-secondary */
47
51
 
48
- } /* end btn-secondary */
52
+ }
package/src/css/buttons/buttons.css CHANGED
@@ -1,103 +1,107 @@
1
- /* TODO dividere in più file secondo la variante? */
1
+ @layer base {
2
2
 
3
- button, [role='button'], .btn, .btn-reset, .btn-link {
4
- &:not([disabled]) {
5
- cursor: pointer;
3
+ /* TODO dividere in più file secondo la variante? */
4
+
5
+ button, [role='button'], .btn, .btn-reset, .btn-link {
6
+ &:not([disabled]) {
7
+ cursor: pointer;
8
+ }
9
+ & svg, &[disabled] {
10
+ pointer-events: none;
11
+ }
6
12
  }
7
- & svg, &[disabled] {
8
- pointer-events: none;
13
+
14
+ .btn-reset, .btn-link, .btn-close {
15
+ padding: 0;
16
+ margin: 0;
17
+ background: transparent;
18
+ border: none;
19
+ box-shadow: none;
9
20
  }
10
- }
11
21
 
12
- .btn-reset, .btn-link, .btn-close {
13
- padding: 0;
14
- margin: 0;
15
- background: transparent;
16
- border: none;
17
- box-shadow: none;
18
- }
22
+ .btn-link[disabled] {
23
+ /* stylelint-disable declaration-no-important */
24
+ font-style: var(--btn-link-disabled-font-style) !important;
25
+ color: var(--btn-link-disabled-color) !important;
26
+ /* stylelint-enable declaration-no-important */
27
+ }
19
28
 
20
- .btn-link[disabled] {
21
- /* stylelint-disable declaration-no-important */
22
- font-style: var(--btn-link-disabled-font-style) !important;
23
- color: var(--btn-link-disabled-color) !important;
24
- /* stylelint-enable declaration-no-important */
25
- }
29
+ a.btn {
30
+ &:focus {
31
+ outline: none;
32
+ }
26
33
 
27
- a.btn {
28
- &:focus {
29
- outline: none;
34
+ &, &:hover, &:active, &:focus-visible, &:visited {
35
+ color: var(--_button-fg-color);
36
+ text-decoration: none;
37
+ }
30
38
  }
31
39
 
32
- &, &:hover, &:active, &:focus-visible, &:visited {
40
+ .btn {
41
+ display: inline-block;
42
+ padding: var(--btn-padding-block) var(--btn-padding-inline);
43
+ font-size: var(--btn-font-size);
44
+ font-style: var(--btn-font-style);
45
+ font-weight: var(--btn-font-weight);
33
46
  color: var(--_button-fg-color);
47
+ text-align: center;
34
48
  text-decoration: none;
35
- }
36
- }
37
-
38
- .btn {
39
- display: inline-block;
40
- padding: var(--btn-padding-block) var(--btn-padding-inline);
41
- font-size: var(--btn-font-size);
42
- font-style: var(--btn-font-style);
43
- font-weight: var(--btn-font-weight);
44
- color: var(--_button-fg-color);
45
- text-align: center;
46
- text-decoration: none;
47
- background: var(--_button-bg-color);
48
- border: var(--btn-border-width) solid var(--_button-border-color);
49
- border-radius: var(--btn-border-radius);
50
- box-shadow: none;
51
-
52
- &[disabled] {
53
- font-style: italic;
54
- cursor: not-allowed;
55
- opacity: var(--btn-disabled-opacity);
56
- filter: grayscale(60%);
57
- }
49
+ background: var(--_button-bg-color);
50
+ border: var(--btn-border-width) solid var(--_button-border-color);
51
+ border-radius: var(--btn-border-radius);
52
+ box-shadow: none;
53
+
54
+ &[disabled] {
55
+ font-style: italic;
56
+ cursor: not-allowed;
57
+ opacity: var(--btn-disabled-opacity);
58
+ filter: grayscale(60%);
59
+ }
58
60
 
59
- svg {
60
- width: 1em;
61
- fill: currentColor;
62
- }
61
+ svg {
62
+ width: 1em;
63
+ fill: currentColor;
64
+ }
63
65
 
64
- &.btn-sm {
65
- padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
66
- font-size: var(--btn-sm-font-size);
66
+ &.btn-sm {
67
+ padding: var(--btn-sm-padding-block) var(--btn-sm-padding-inline);
68
+ font-size: var(--btn-sm-font-size);
67
69
 
68
- svg {
69
- width: 1.5em;
70
+ svg {
71
+ width: 1.5em;
72
+ }
70
73
  }
71
- }
72
74
 
73
- &.btn-lg {
74
- padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
75
- font-size: var(--btn-lg-font-size);
75
+ &.btn-lg {
76
+ padding: var(--btn-lg-padding-block) var(--btn-lg-padding-inline);
77
+ font-size: var(--btn-lg-font-size);
76
78
 
77
- svg {
78
- width: 1.5em;
79
+ svg {
80
+ width: 1.5em;
81
+ }
79
82
  }
80
- }
81
83
 
82
- &.btn-xl {
83
- padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
84
- font-size: var(--btn-xl-font-size);
85
- --_focus-ring-size: 6px;
86
- }
84
+ &.btn-xl {
85
+ padding: var(--btn-xl-padding-block) var(--btn-xl-padding-inline);
86
+ font-size: var(--btn-xl-font-size);
87
+ --_focus-ring-size: 6px;
88
+ }
87
89
 
88
- &.btn-hollow {
89
- border-width: var(--btn-hollow-border-width);
90
- }
90
+ &.btn-hollow {
91
+ border-width: var(--btn-hollow-border-width);
92
+ }
91
93
 
92
94
 
93
- /* TODO button con solo icona o cosa? controllare: completare o eliminare */
94
- &.btn-icon {
95
- display: inline-flex;
96
- flex-flow: row nowrap;
97
- gap: 1rem;
98
- align-items: center;
99
- justify-content: space-between;
100
- padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
101
- text-align: start;
95
+ /* TODO button con solo icona o cosa? controllare: completare o eliminare */
96
+ &.btn-icon {
97
+ display: inline-flex;
98
+ flex-flow: row nowrap;
99
+ gap: 1rem;
100
+ align-items: center;
101
+ justify-content: space-between;
102
+ padding-inline-start: calc(var(--form-control-padding-inline) * 1.5);
103
+ text-align: start;
104
+ }
102
105
  }
106
+
103
107
  }