@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/list.scss CHANGED
@@ -1,61 +1,63 @@
1
- .list {
2
- --list-padding: 0rem;
3
- --list-border-width: var(--border-width);
4
- --list-border-color: var(--border-color);
5
- --list-item-padding: 0.75rem 1rem;
6
- --list-item-transition-duration: var(--transition-duration, 0.2s);
7
- --list-item-transition-easing: var(--transition-easing, ease-out);
8
-
9
- border: var(--list-border-width) solid var(--list-border-color);
10
- padding: var(--list-padding);
11
- list-style-type: none;
12
-
13
- .list-item {
14
- background-color: var(--list-item-bg-color, var(--bg-surface));
15
- color: var(--text-color);
16
- min-height: 1px;
17
- padding: var(--list-item-padding);
18
- display: flex;
19
- align-items: center;
20
- gap: var(--spacer-2);
21
-
22
- transition:
23
- color var(--list-item-transition-duration) var(--list-item-transition-easing),
24
- background-color var(--list-item-transition-duration) var(--list-item-transition-easing),
25
- box-shadow var(--list-item-transition-duration) var(--list-item-transition-easing),
26
- border-color var(--list-item-transition-duration) var(--list-item-transition-easing);
27
-
28
- &.is-active,
29
- &.has-hover:hover {
30
- cursor: pointer;
31
- color: var(--primary);
32
- fill: var(--primary);
33
- text-decoration: none;
34
- }
35
-
36
- .list-item-text {
37
- flex: 1;
1
+ @layer components {
2
+ .list {
3
+ --list-padding: 0rem;
4
+ --list-border-width: var(--border-width);
5
+ --list-border-color: var(--border-color);
6
+ --list-item-padding: 0.75rem 1rem;
7
+ --list-item-transition-duration: var(--transition-duration, 0.2s);
8
+ --list-item-transition-easing: var(--transition-easing, ease-out);
9
+
10
+ border: var(--list-border-width) solid var(--list-border-color);
11
+ padding: var(--list-padding);
12
+ list-style-type: none;
13
+
14
+ .list-item {
15
+ background-color: var(--list-item-bg-color, var(--bg-surface));
16
+ color: var(--text-color);
17
+ min-height: 1px;
18
+ padding: var(--list-item-padding);
38
19
  display: flex;
39
- flex-direction: column;
40
- }
41
-
42
- a {
43
- color: inherit;
20
+ align-items: center;
21
+ gap: var(--spacer-2);
22
+
23
+ transition:
24
+ color var(--list-item-transition-duration) var(--list-item-transition-easing),
25
+ background-color var(--list-item-transition-duration) var(--list-item-transition-easing),
26
+ box-shadow var(--list-item-transition-duration) var(--list-item-transition-easing),
27
+ border-color var(--list-item-transition-duration) var(--list-item-transition-easing);
28
+
29
+ &.is-active,
30
+ &.has-hover:hover {
31
+ cursor: pointer;
32
+ color: var(--primary);
33
+ fill: var(--primary);
34
+ text-decoration: none;
35
+ }
36
+
37
+ .list-item-text {
38
+ flex: 1;
39
+ display: flex;
40
+ flex-direction: column;
41
+ }
42
+
43
+ a {
44
+ color: inherit;
45
+ }
46
+
47
+ &:first-child {
48
+ border-top-left-radius: inherit;
49
+ border-top-right-radius: inherit;
50
+ }
51
+
52
+ &:last-child {
53
+ border-bottom-right-radius: inherit;
54
+ border-bottom-left-radius: inherit;
55
+ }
44
56
  }
45
57
 
46
- &:first-child {
47
- border-top-left-radius: inherit;
48
- border-top-right-radius: inherit;
58
+ &.list-flush {
59
+ border: 0;
60
+ border-radius: inherit;
49
61
  }
50
-
51
- &:last-child {
52
- border-bottom-right-radius: inherit;
53
- border-bottom-left-radius: inherit;
54
- }
55
- }
56
-
57
- &.list-flush {
58
- border: 0;
59
- border-radius: inherit;
60
62
  }
61
63
  }
package/scss/components/navbar.scss CHANGED
@@ -1,32 +1,34 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss';
3
3
 
4
- .navbar {
5
- --navbar-bg-color: var(--bg-surface);
6
- --navbar-text-color: var(--text-color);
4
+ @layer components {
5
+ .navbar {
6
+ --navbar-bg-color: var(--bg-surface);
7
+ --navbar-text-color: var(--text-color);
7
8
 
8
- color: var(--navbar-text-color);
9
- padding-top: 0.6rem;
10
- padding-bottom: 0.6rem;
11
- background-color: var(--navbar-bg-color);
12
- min-height: 60px;
13
- display: flex;
14
- align-items: center;
9
+ color: var(--navbar-text-color);
10
+ padding-top: 0.6rem;
11
+ padding-bottom: 0.6rem;
12
+ background-color: var(--navbar-bg-color);
13
+ min-height: 60px;
14
+ display: flex;
15
+ align-items: center;
15
16
 
16
- a {
17
- --link-text-color: var(--navbar-text-color);
17
+ a {
18
+ --link-text-color: var(--navbar-text-color);
19
+ }
18
20
  }
19
- }
20
21
 
21
- .navbar .logo:hover {
22
- text-decoration: none;
23
- color: var(--primary-hover);
24
- }
22
+ .navbar .logo:hover {
23
+ text-decoration: none;
24
+ color: var(--primary-hover);
25
+ }
25
26
 
26
- /** @deprecated - use bg-color instead */
27
- @each $name, $value in map.get(theme.$theme, colors) {
28
- .navbar-#{$name} {
29
- --navbar-bg-color: var(--#{$name});
30
- --navbar-text-color: var(--on-#{$name});
27
+ /** @deprecated - use bg-color instead */
28
+ @each $name, $value in map.get(theme.$theme, colors) {
29
+ .navbar-#{$name} {
30
+ --navbar-bg-color: var(--#{$name});
31
+ --navbar-text-color: var(--on-#{$name});
32
+ }
31
33
  }
32
34
  }
package/scss/components/overlay.scss CHANGED
@@ -1,9 +1,11 @@
1
- .overlay {
2
- --overlay-highlight: rgba(var(--gray-800-rgb), 0.4);
1
+ @layer components {
2
+ .overlay {
3
+ --overlay-highlight: rgba(var(--gray-800-rgb), 0.4);
3
4
 
4
- background: var(--overlay-highlight);
5
- position: fixed;
6
- inset: 0;
7
- z-index: 1040;
8
- display: none;
5
+ background: var(--overlay-highlight);
6
+ position: fixed;
7
+ inset: 0;
8
+ z-index: 1040;
9
+ display: none;
10
+ }
9
11
  }
package/scss/components/table.scss CHANGED
@@ -1,40 +1,42 @@
1
- .table {
2
- --table-color-type: initial;
3
- --table-bg-type: initial;
4
- --table-color-state: initial;
5
- --table-bg-state: initial;
6
- --table-color: var(--text-color);
7
- --table-accent-bg: transparent;
8
- --table-striped-color: var(--text-color);
9
- --table-striped-bg: rgba(var(--text-color-rgb), 0.05); // TODO
10
- --table-active-color: var(--text-color);
11
- --table-active-bg: rgba(var(--text-color-rgb), 0.1); // TODO
12
- --table-hover-color: var(--text-color);
13
- --table-hover-bg: rgba(var(--text-color-rgb), 0.075); // TODO
1
+ @layer components {
2
+ .table {
3
+ --table-color-type: initial;
4
+ --table-bg-type: initial;
5
+ --table-color-state: initial;
6
+ --table-bg-state: initial;
7
+ --table-color: var(--text-color);
8
+ --table-accent-bg: transparent;
9
+ --table-striped-color: var(--text-color);
10
+ --table-striped-bg: rgba(var(--text-color-rgb), 0.05); // TODO
11
+ --table-active-color: var(--text-color);
12
+ --table-active-bg: rgba(var(--text-color-rgb), 0.1); // TODO
13
+ --table-hover-color: var(--text-color);
14
+ --table-hover-bg: rgba(var(--text-color-rgb), 0.075); // TODO
14
15
 
15
- width: 100%;
16
- margin-bottom: 1rem;
17
- vertical-align: top;
18
- border-color: var(--table-border-color, --border-color);
16
+ width: 100%;
17
+ margin-bottom: 1rem;
18
+ vertical-align: top;
19
+ border-color: var(--table-border-color, --border-color);
19
20
 
20
- & > thead {
21
- vertical-align: bottom;
22
- }
21
+ & > thead {
22
+ vertical-align: bottom;
23
+ }
23
24
 
24
- & > :not(caption) > * > * {
25
- padding: 0.5rem 0.5rem;
26
- color: var(--table-color-state, var(--table-color-type, var(--table-color)));
27
- background-color: var(--table-bg, var(--bg-surface));
28
- border-bottom-width: var(--table-border-width, var(--border-width));
29
- box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
30
- }
25
+ & > :not(caption) > * > * {
26
+ padding: 0.5rem 0.5rem;
27
+ color: var(--table-color-state, var(--table-color-type, var(--table-color)));
28
+ background-color: var(--table-bg, var(--bg-surface));
29
+ border-bottom-width: var(--table-border-width, var(--border-width));
30
+ box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
31
+ }
31
32
 
32
- & > tbody {
33
- vertical-align: inherit;
34
- }
33
+ & > tbody {
34
+ vertical-align: inherit;
35
+ }
35
36
 
36
- .table-striped > tbody > tr:nth-of-type(odd) > * {
37
- --table-color-type: var(--table-striped-color);
38
- --table-bg-type: var(--table-striped-bg);
37
+ .table-striped > tbody > tr:nth-of-type(odd) > * {
38
+ --table-color-type: var(--table-striped-color);
39
+ --table-bg-type: var(--table-striped-bg);
40
+ }
39
41
  }
40
42
  }
package/scss/components/tabs.scss CHANGED
@@ -1,70 +1,72 @@
1
- .tabs {
2
- display: flex;
3
- cursor: pointer;
4
- -webkit-tap-highlight-color: transparent;
5
- overflow-x: auto;
6
- overflow-y: visible;
1
+ @layer components {
2
+ .tabs {
3
+ display: flex;
4
+ cursor: pointer;
5
+ -webkit-tap-highlight-color: transparent;
6
+ overflow-x: auto;
7
+ overflow-y: visible;
7
8
 
8
- .tab {
9
- --tab-transition-duration: var(--transition-duration, 0.2s);
9
+ .tab {
10
+ --tab-transition-duration: var(--transition-duration, 0.2s);
10
11
 
11
- border: none;
12
- color: var(--text-color);
13
- background-color: var(--tab-bg-color, var(--bg-surface));
14
- text-align: center;
12
+ border: none;
13
+ color: var(--text-color);
14
+ background-color: var(--tab-bg-color, var(--bg-surface));
15
+ text-align: center;
15
16
 
16
- padding: 16px 20px;
17
- border-bottom: 3px solid var(--tab-border-color, var(--border-color));
18
- flex: 1 0 auto;
17
+ padding: 16px 20px;
18
+ border-bottom: 3px solid var(--tab-border-color, var(--border-color));
19
+ flex: 1 0 auto;
19
20
 
20
- transition:
21
- color var(--tab-transition-duration) ease,
22
- background-color var(--tab-transition-duration) ease,
23
- box-shadow var(--tab-transition-duration) ease,
24
- border-color var(--tab-transition-duration) ease;
21
+ transition:
22
+ color var(--tab-transition-duration) ease,
23
+ background-color var(--tab-transition-duration) ease,
24
+ box-shadow var(--tab-transition-duration) ease,
25
+ border-color var(--tab-transition-duration) ease;
25
26
 
26
- &.active {
27
- color: var(--primary);
28
- border-bottom: 3px solid var(--primary);
29
- }
27
+ &.active {
28
+ color: var(--primary);
29
+ border-bottom: 3px solid var(--primary);
30
+ }
30
31
 
31
- &:focus {
32
- outline: 3px solid var(--primary-light);
33
- outline-offset: -3px;
34
- color: var(--primary);
35
- z-index: 10;
36
- }
32
+ &:focus {
33
+ outline: 3px solid var(--primary-light);
34
+ outline-offset: -3px;
35
+ color: var(--primary);
36
+ z-index: 10;
37
+ }
37
38
 
38
- &:hover {
39
- cursor: pointer;
40
- color: var(--primary);
41
- }
39
+ &:hover {
40
+ cursor: pointer;
41
+ color: var(--primary);
42
+ }
42
43
 
43
- &.disabled {
44
- color: var(--tab-disabled-text-color, var(--disabled-text-color));
45
- background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
44
+ &.disabled {
45
+ color: var(--tab-disabled-text-color, var(--disabled-text-color));
46
+ background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
46
47
 
47
- outline: 0;
48
- &:hover {
49
- cursor: not-allowed;
48
+ outline: 0;
49
+ &:hover {
50
+ cursor: not-allowed;
51
+ }
50
52
  }
51
53
  }
52
54
  }
53
- }
54
55
 
55
- .tab-content {
56
- --tab-content-transition-duration: var(--transition-duration, 0.2s);
56
+ .tab-content {
57
+ --tab-content-transition-duration: var(--transition-duration, 0.2s);
57
58
 
58
- display: none;
59
- padding: 20px;
60
- background-color: var(--tab-content-bg-color, var(--bg-surface));
59
+ display: none;
60
+ padding: 20px;
61
+ background-color: var(--tab-content-bg-color, var(--bg-surface));
61
62
 
62
- transition:
63
- color var(--tab-content-transition-duration),
64
- background-color var(--tab-content-transition-duration),
65
- border-color var(--tab-content-transition-duration);
63
+ transition:
64
+ color var(--tab-content-transition-duration),
65
+ background-color var(--tab-content-transition-duration),
66
+ border-color var(--tab-content-transition-duration);
66
67
 
67
- &.active {
68
- display: block;
68
+ &.active {
69
+ display: block;
70
+ }
69
71
  }
70
72
  }
package/scss/components/toast.scss CHANGED
@@ -1,24 +1,26 @@
1
1
  @use 'sass:map';
2
2
  @use '../theme.scss';
3
3
 
4
- @each $name, $value in map.get(theme.$theme, colors) {
5
- .toast-#{$name} {
6
- --toast-on-color: var(--on-#{$name});
7
- --toast-color: var(--#{$name});
4
+ @layer components {
5
+ @each $name, $value in map.get(theme.$theme, colors) {
6
+ .toast-#{$name} {
7
+ --toast-on-color: var(--on-#{$name});
8
+ --toast-color: var(--#{$name});
9
+ }
8
10
  }
9
- }
10
11
 
11
- .toast {
12
- --toast-padding-y: 0.4rem;
13
- --toast-padding-x: 0.9rem;
12
+ .toast {
13
+ --toast-padding-y: 0.4rem;
14
+ --toast-padding-x: 0.9rem;
14
15
 
15
- background-color: var(--toast-color);
16
- border-color: transparent;
17
- color: var(--toast-on-color, var(--text-color));
18
- box-shadow: var(--shadow);
19
- padding: var(--toast-padding-y) var(--toast-padding-x);
20
- border-radius: var(--border-radius);
21
- display: flex;
22
- align-items: center;
23
- width: 100%;
16
+ background-color: var(--toast-color);
17
+ border-color: transparent;
18
+ color: var(--toast-on-color, var(--text-color));
19
+ box-shadow: var(--shadow);
20
+ padding: var(--toast-padding-y) var(--toast-padding-x);
21
+ border-radius: var(--border-radius);
22
+ display: flex;
23
+ align-items: center;
24
+ width: 100%;
25
+ }
24
26
  }
package/scss/components/tooltip.scss CHANGED
@@ -1,58 +1,60 @@
1
- .tooltip {
2
- background: #222;
3
- color: #fff;
4
- padding: 4px 8px;
5
- border-radius: 6px;
6
- font-size: 0.75rem;
7
- white-space: nowrap;
8
- z-index: 1000;
9
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
10
- pointer-events: none;
11
- position: absolute;
12
- }
1
+ @layer components {
2
+ .tooltip {
3
+ background: #222;
4
+ color: #fff;
5
+ padding: 4px 8px;
6
+ border-radius: 6px;
7
+ font-size: 0.75rem;
8
+ white-space: nowrap;
9
+ z-index: 1000;
10
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
11
+ pointer-events: none;
12
+ position: absolute;
13
+ }
13
14
 
14
- .tooltip-arrow {
15
- width: 0;
16
- height: 0;
17
- position: absolute;
18
- }
15
+ .tooltip-arrow {
16
+ width: 0;
17
+ height: 0;
18
+ position: absolute;
19
+ }
19
20
 
20
- .tooltip-arrow.top {
21
- bottom: -6px;
22
- left: 50%;
23
- transform: translateX(-50%);
24
- border-left: 6px solid transparent;
25
- border-right: 6px solid transparent;
26
- border-top: 6px solid #222;
27
- border-bottom: 0;
28
- }
21
+ .tooltip-arrow.top {
22
+ bottom: -6px;
23
+ left: 50%;
24
+ transform: translateX(-50%);
25
+ border-left: 6px solid transparent;
26
+ border-right: 6px solid transparent;
27
+ border-top: 6px solid #222;
28
+ border-bottom: 0;
29
+ }
29
30
 
30
- .tooltip-arrow.bottom {
31
- top: -6px;
32
- left: 50%;
33
- transform: translateX(-50%);
34
- border-left: 6px solid transparent;
35
- border-right: 6px solid transparent;
36
- border-bottom: 6px solid #222;
37
- border-top: 0;
38
- }
31
+ .tooltip-arrow.bottom {
32
+ top: -6px;
33
+ left: 50%;
34
+ transform: translateX(-50%);
35
+ border-left: 6px solid transparent;
36
+ border-right: 6px solid transparent;
37
+ border-bottom: 6px solid #222;
38
+ border-top: 0;
39
+ }
39
40
 
40
- .tooltip-arrow.left {
41
- right: -6px;
42
- top: 50%;
43
- transform: translateY(-50%);
44
- border-top: 6px solid transparent;
45
- border-bottom: 6px solid transparent;
46
- border-left: 6px solid #222;
47
- border-right: 0;
48
- }
41
+ .tooltip-arrow.left {
42
+ right: -6px;
43
+ top: 50%;
44
+ transform: translateY(-50%);
45
+ border-top: 6px solid transparent;
46
+ border-bottom: 6px solid transparent;
47
+ border-left: 6px solid #222;
48
+ border-right: 0;
49
+ }
49
50
 
50
- .tooltip-arrow.right {
51
- left: -6px;
52
- top: 50%;
53
- transform: translateY(-50%);
54
- border-top: 6px solid transparent;
55
- border-bottom: 6px solid transparent;
56
- border-right: 6px solid #222;
57
- border-left: 0;
51
+ .tooltip-arrow.right {
52
+ left: -6px;
53
+ top: 50%;
54
+ transform: translateY(-50%);
55
+ border-top: 6px solid transparent;
56
+ border-bottom: 6px solid transparent;
57
+ border-right: 6px solid #222;
58
+ border-left: 0;
59
+ }
58
60
  }