@oardi/css-utils 0.47.1 → 0.49.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 (31) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +24 -19
  3. package/scss/components/breadcrumb.scss +27 -25
  4. package/scss/components/button.scss +146 -140
  5. package/scss/components/card.scss +49 -47
  6. package/scss/components/chip.scss +81 -79
  7. package/scss/components/drawer.scss +30 -28
  8. package/scss/components/expansion-panel.scss +93 -91
  9. package/scss/components/form.scss +156 -155
  10. package/scss/components/icon-button.scss +112 -110
  11. package/scss/components/list.scss +57 -55
  12. package/scss/components/navbar.scss +24 -22
  13. package/scss/components/overlay.scss +9 -7
  14. package/scss/components/table.scss +35 -33
  15. package/scss/components/tabs.scss +54 -52
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +64 -76
  19. package/scss/flex.scss +114 -127
  20. package/scss/gap-responsive.scss +22 -0
  21. package/scss/gap.scss +18 -0
  22. package/scss/grid-responsive.scss +7 -5
  23. package/scss/grid.scss +14 -12
  24. package/scss/index.scss +9 -1
  25. package/scss/reboot.scss +110 -108
  26. package/scss/spacings-responsive.scss +12 -10
  27. package/scss/spacings.scss +33 -28
  28. package/scss/text.scss +69 -39
  29. package/scss/typography.scss +92 -125
  30. package/scss/utilities.scss +207 -205
  31. package/scss/variables.scss +70 -68
package/scss/components/chip.scss CHANGED
@@ -1,98 +1,100 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss';
3
3
 
4
- %chip-base {
5
- --chip-label-font-size: 0.9rem;
6
- --chip-label-padding: 0 7px;
7
- --chip-border-radius: 16px;
8
- --chip-border-width: var(--border-width);
9
- --chip-highlight: var(--highlight);
10
- --chip-transition-duration: var(--transition-duration, 0.2s);
11
-
12
- display: inline-flex;
13
- border-width: var(--chip-border-width);
14
- border-style: solid;
15
- background-color: transparent;
16
- border-color: transparent;
17
- color: var(--text-color);
18
- font-size: var(--chip-label-font-size);
19
-
20
- transition:
21
- color var(--chip-transition-duration) ease,
22
- background-color var(--chip-transition-duration) ease,
23
- box-shadow var(--chip-transition-duration) ease,
24
- border-color var(--chip-transition-duration) ease;
25
-
26
- -webkit-tap-highlight-color: transparent;
27
- touch-action: manipulation; // ios fix
28
-
29
- &:hover {
30
- cursor: pointer;
31
- text-decoration: none;
32
- }
4
+ @layer components {
5
+ %chip-base {
6
+ --chip-label-font-size: 0.9rem;
7
+ --chip-label-padding: 0 7px;
8
+ --chip-border-radius: 16px;
9
+ --chip-border-width: var(--border-width);
10
+ --chip-highlight: var(--highlight);
11
+ --chip-transition-duration: var(--transition-duration, 0.2s);
33
12
 
34
- &.disabled:hover,
35
- .disabled:focus {
36
- cursor: not-allowed;
37
- }
38
- }
13
+ display: inline-flex;
14
+ border-width: var(--chip-border-width);
15
+ border-style: solid;
16
+ background-color: transparent;
17
+ border-color: transparent;
18
+ color: var(--text-color);
19
+ font-size: var(--chip-label-font-size);
20
+
21
+ transition:
22
+ color var(--chip-transition-duration) ease,
23
+ background-color var(--chip-transition-duration) ease,
24
+ box-shadow var(--chip-transition-duration) ease,
25
+ border-color var(--chip-transition-duration) ease;
26
+
27
+ -webkit-tap-highlight-color: transparent;
28
+ touch-action: manipulation; // ios fix
29
+
30
+ &:hover {
31
+ cursor: pointer;
32
+ text-decoration: none;
33
+ }
39
34
 
40
- .chip {
41
- @extend %chip-base;
35
+ &.disabled:hover,
36
+ .disabled:focus {
37
+ cursor: not-allowed;
38
+ }
39
+ }
42
40
 
43
- border-radius: var(--chip-border-radius);
44
- line-height: var(--line-height);
41
+ .chip {
42
+ @extend %chip-base;
45
43
 
46
- &:hover {
47
- background-color: var(--chip-highlight);
48
- border-color: var(--chip-highlight);
49
- }
44
+ border-radius: var(--chip-border-radius);
45
+ line-height: var(--line-height);
50
46
 
51
- &.disabled,
52
- &.disabled:hover {
53
- color: var(--disabled-text-color);
54
- outline: 0;
55
- background-color: var(--disabled-bg-color);
56
- border-color: var(--disabled-border-color);
57
- }
47
+ &:hover {
48
+ background-color: var(--chip-highlight);
49
+ border-color: var(--chip-highlight);
50
+ }
58
51
 
59
- .chip-label {
60
- display: inline-flex;
61
- flex-shrink: 0;
62
- padding: var(--chip-label-padding);
63
- margin: 0;
52
+ &.disabled,
53
+ &.disabled:hover {
54
+ color: var(--disabled-text-color);
55
+ outline: 0;
56
+ background-color: var(--disabled-bg-color);
57
+ border-color: var(--disabled-border-color);
58
+ }
64
59
 
65
- & > * {
60
+ .chip-label {
61
+ display: inline-flex;
62
+ flex-shrink: 0;
63
+ padding: var(--chip-label-padding);
66
64
  margin: 0;
67
- padding: 0;
68
- }
69
- }
70
- }
71
65
 
72
- @each $name, $value in map.get(theme.$theme, colors) {
73
- .chip-#{$name} {
74
- color: var(--on-#{$name});
75
- fill: var(--on-#{$name});
76
- background-color: var(--#{$name});
77
- border-color: var(--#{$name});
78
-
79
- &:hover,
80
- &:active {
81
- background-color: var(--#{$name}-hover);
82
- border-color: var(--#{$name}-hover);
66
+ & > * {
67
+ margin: 0;
68
+ padding: 0;
69
+ }
83
70
  }
84
71
  }
85
72
 
86
- .chip-#{$name}-outline {
87
- color: var(--#{$name});
88
- background-color: transparent;
89
- border-color: var(--#{$name});
90
-
91
- &:hover,
92
- &:active {
73
+ @each $name, $value in map.get(theme.$theme, colors) {
74
+ .chip-#{$name} {
93
75
  color: var(--on-#{$name});
94
- background-color: var(--#{$name}-hover);
95
- border-color: var(--#{$name}-hover);
76
+ fill: var(--on-#{$name});
77
+ background-color: var(--#{$name});
78
+ border-color: var(--#{$name});
79
+
80
+ &:hover,
81
+ &:active {
82
+ background-color: var(--#{$name}-hover);
83
+ border-color: var(--#{$name}-hover);
84
+ }
85
+ }
86
+
87
+ .chip-#{$name}-outline {
88
+ color: var(--#{$name});
89
+ background-color: transparent;
90
+ border-color: var(--#{$name});
91
+
92
+ &:hover,
93
+ &:active {
94
+ color: var(--on-#{$name});
95
+ background-color: var(--#{$name}-hover);
96
+ border-color: var(--#{$name}-hover);
97
+ }
96
98
  }
97
99
  }
98
100
  }
package/scss/components/drawer.scss CHANGED
@@ -1,36 +1,38 @@
1
- .drawer {
2
- --drawer-border-right-color: var(--border-color);
3
- --drawer-bg-color: var(--bg-surface);
1
+ @layer components {
2
+ .drawer {
3
+ --drawer-border-right-color: var(--border-color);
4
+ --drawer-bg-color: var(--bg-surface);
4
5
 
5
- display: flex;
6
- flex-direction: column;
7
- position: fixed;
8
- top: 0;
9
- left: -100%;
10
- height: 100dvh;
11
- width: min(20rem, 100%);
12
- z-index: 1045;
13
- border-right: 1px solid var(--drawer-border-right-color);
14
- justify-content: start;
15
- background-color: var(--drawer-bg-color);
16
- transition: left 250ms ease-out;
17
-
18
- &.open ~ .overlay {
19
- display: block;
20
- }
6
+ display: flex;
7
+ flex-direction: column;
8
+ position: fixed;
9
+ top: 0;
10
+ left: -100%;
11
+ height: 100dvh;
12
+ width: min(20rem, 100%);
13
+ z-index: 1045;
14
+ border-right: 1px solid var(--drawer-border-right-color);
15
+ justify-content: start;
16
+ background-color: var(--drawer-bg-color);
17
+ transition: left 250ms ease-out;
21
18
 
22
- &.open {
23
- left: 0;
24
- }
19
+ &.open ~ .overlay {
20
+ display: block;
21
+ }
25
22
 
26
- .drawer-title-container {
27
- display: flex;
28
- padding: 0.5rem 1rem;
29
- align-items: center;
23
+ &.open {
24
+ left: 0;
25
+ }
30
26
 
31
- .drawer-title {
27
+ .drawer-title-container {
32
28
  display: flex;
33
- flex: 1;
29
+ padding: 0.5rem 1rem;
30
+ align-items: center;
31
+
32
+ .drawer-title {
33
+ display: flex;
34
+ flex: 1;
35
+ }
34
36
  }
35
37
  }
36
38
  }
package/scss/components/expansion-panel.scss CHANGED
@@ -1,112 +1,114 @@
1
- .expansion-panel-container {
2
- display: flex;
3
- flex-direction: column;
4
- gap: var(--spacer-2);
5
-
6
- .expansion-panel {
7
- --expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
8
- --expansion-panel-inner-padding: 1.25rem;
9
- --expansion-panel-border-color: var(--border-color);
10
- --expansion-panel-header-bg-color: var(--bg-surface);
11
- --expansion-panel-transition-duration: var(--transition-duration, 0.2s);
12
- --expansion-panel-transition-easing: var(--transition-easing, ease-out);
13
-
14
- --expansion-panel-focus-outline-width: var(--focus-outline-width);
15
- --expansion-panel-focus-outline-style: var(--focus-outline-style);
16
- --expansion-panel-focus-outline-color: var(--focus-outline-color);
17
-
18
- color: var(--text-color);
19
- border: 1px solid var(--expansion-panel-border-color);
20
- border-radius: var(--border-radius);
21
- background-color: var(--expansion-panel-header-bg-color);
22
-
23
- transition:
24
- color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
25
- background-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
26
- box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
27
- border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
28
-
29
- &:focus {
30
- outline: var(--expansion-panel-focus-outline-width) var(--expansion-panel-focus-outline-style)
31
- var(--expansion-panel-focus-outline-color);
32
- outline-offset: var(--focus-offset);
33
- }
34
-
35
- .expansion-panel-header {
36
- display: flex;
37
- align-items: center;
38
- padding: var(--expansion-panel-header-padding);
39
- border-top-left-radius: var(--border-radius);
40
- border-top-right-radius: var(--border-radius);
41
- position: relative;
42
- -webkit-tap-highlight-color: transparent;
1
+ @layer components {
2
+ .expansion-panel-container {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: var(--spacer-2);
6
+
7
+ .expansion-panel {
8
+ --expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
9
+ --expansion-panel-inner-padding: 1.25rem;
10
+ --expansion-panel-border-color: var(--border-color);
11
+ --expansion-panel-header-bg-color: var(--bg-surface);
12
+ --expansion-panel-transition-duration: var(--transition-duration, 0.2s);
13
+ --expansion-panel-transition-easing: var(--transition-easing, ease-out);
14
+
15
+ --expansion-panel-focus-outline-width: var(--focus-outline-width);
16
+ --expansion-panel-focus-outline-style: var(--focus-outline-style);
17
+ --expansion-panel-focus-outline-color: var(--focus-outline-color);
18
+
19
+ color: var(--text-color);
20
+ border: 1px solid var(--expansion-panel-border-color);
21
+ border-radius: var(--border-radius);
22
+ background-color: var(--expansion-panel-header-bg-color);
43
23
 
44
24
  transition:
45
- color var(--expansion-panel-transition-duration) ease,
46
- background-color var(--expansion-panel-transition-duration) ease,
47
- box-shadow var(--expansion-panel-transition-duration) ease,
48
- border-color var(--expansion-panel-transition-duration) ease;
49
-
50
- &::after {
51
- content: '+';
52
- position: absolute;
53
- right: 16px;
54
- width: 32px;
55
- height: 32px;
25
+ color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
26
+ background-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
27
+ box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
28
+ border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
29
+
30
+ &:focus {
31
+ outline: var(--expansion-panel-focus-outline-width) var(--expansion-panel-focus-outline-style)
32
+ var(--expansion-panel-focus-outline-color);
33
+ outline-offset: var(--focus-offset);
34
+ }
35
+
36
+ .expansion-panel-header {
56
37
  display: flex;
57
38
  align-items: center;
58
- justify-content: center;
59
- font-size: 1.75rem;
60
- transition: transform 0.5s;
61
- }
39
+ padding: var(--expansion-panel-header-padding);
40
+ border-top-left-radius: var(--border-radius);
41
+ border-top-right-radius: var(--border-radius);
42
+ position: relative;
43
+ -webkit-tap-highlight-color: transparent;
44
+
45
+ transition:
46
+ color var(--expansion-panel-transition-duration) ease,
47
+ background-color var(--expansion-panel-transition-duration) ease,
48
+ box-shadow var(--expansion-panel-transition-duration) ease,
49
+ border-color var(--expansion-panel-transition-duration) ease;
50
+
51
+ &::after {
52
+ content: '+';
53
+ position: absolute;
54
+ right: 16px;
55
+ width: 32px;
56
+ height: 32px;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ font-size: 1.75rem;
61
+ transition: transform 0.5s;
62
+ }
62
63
 
63
- &:hover {
64
- cursor: pointer;
65
- color: var(--primary) !important;
66
- }
64
+ &:hover {
65
+ cursor: pointer;
66
+ color: var(--primary);
67
+ }
67
68
 
68
- &:focus {
69
- outline: 0;
69
+ &:focus {
70
+ outline: 0;
71
+ }
70
72
  }
71
- }
72
73
 
73
- .expansion-panel-content {
74
- --expansion-panel-content-bg-color: var(--bg-surface);
74
+ .expansion-panel-content {
75
+ --expansion-panel-content-bg-color: var(--bg-surface);
75
76
 
76
- background-color: var(--expansion-panel-content-bg-color);
77
- border-bottom-left-radius: var(--border-radius);
78
- border-bottom-right-radius: var(--border-radius);
77
+ background-color: var(--expansion-panel-content-bg-color);
78
+ border-bottom-left-radius: var(--border-radius);
79
+ border-bottom-right-radius: var(--border-radius);
79
80
 
80
- max-height: 0;
81
- overflow: hidden;
82
- transition: max-height 0.25s ease-out;
81
+ max-height: 0;
82
+ overflow: hidden;
83
+ transition: max-height 0.25s ease-out;
83
84
 
84
- .expansion-panel-inner {
85
- padding: var(--expansion-panel-inner-padding);
86
- transition: transform 0.25s linear;
87
- transform: translateY(-10px);
85
+ .expansion-panel-inner {
86
+ padding: var(--expansion-panel-inner-padding);
87
+ transition: transform 0.25s linear;
88
+ transform: translateY(-10px);
89
+ }
88
90
  }
89
- }
90
91
 
91
- &.active {
92
- .expansion-panel-header::after {
93
- content: '-';
94
- }
92
+ &.active {
93
+ .expansion-panel-header::after {
94
+ content: '-';
95
+ }
95
96
 
96
- .expansion-panel-content {
97
- max-height: 500px;
98
- opacity: 1;
97
+ .expansion-panel-content {
98
+ max-height: 500px;
99
+ opacity: 1;
99
100
 
100
- .expansion-panel-inner {
101
- transform: translateY(0);
101
+ .expansion-panel-inner {
102
+ transform: translateY(0);
103
+ }
102
104
  }
103
105
  }
104
- }
105
106
 
106
- &:not(.active) {
107
- .expansion-panel-header {
108
- border-bottom-left-radius: var(--border-radius);
109
- border-bottom-right-radius: var(--border-radius);
107
+ &:not(.active) {
108
+ .expansion-panel-header {
109
+ border-bottom-left-radius: var(--border-radius);
110
+ border-bottom-right-radius: var(--border-radius);
111
+ }
110
112
  }
111
113
  }
112
114
  }