@itcase/ui 1.8.133 → 1.8.135

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 (25) hide show
  1. package/dist/cjs/components/Modal.js +2 -2
  2. package/dist/components/Modal.js +2 -2
  3. package/dist/css/components/Checkbox/Checkbox.css +137 -310
  4. package/dist/css/components/Icon/Icon.css +76 -139
  5. package/dist/css/components/Modal/Modal.css +34 -17
  6. package/dist/css/components/Radio/Radio.css +141 -312
  7. package/dist/css/styles/blur/blur.css +3 -3
  8. package/dist/css/styles/border-color/border-color.css +76 -0
  9. package/dist/css/styles/bundle.css +230 -602
  10. package/dist/css/styles/fill/fill.css +136 -36
  11. package/dist/css/styles/text-color/text-color.css +43 -0
  12. package/dist/css/styles/text-gradient/text-gradient.css +1 -2
  13. package/dist/types/components/Accordion/Accordion.interface.d.ts +1 -1
  14. package/package.json +2 -2
  15. package/dist/css/styles/border-color/border-color_active.css +0 -45
  16. package/dist/css/styles/border-color/border-color_active_hover.css +0 -49
  17. package/dist/css/styles/border-color/border-color_focus.css +0 -51
  18. package/dist/css/styles/border-color/border-color_hover.css +0 -63
  19. package/dist/css/styles/fill/fill_active.css +0 -50
  20. package/dist/css/styles/fill/fill_active_hover.css +0 -119
  21. package/dist/css/styles/fill/fill_hover.css +0 -89
  22. package/dist/css/styles/text-color/text-color_active.css +0 -38
  23. package/dist/css/styles/text-color/text-color_active_hover.css +0 -45
  24. package/dist/css/styles/text-color/text-color_disabled.css +0 -13
  25. package/dist/css/styles/text-color/text-color_hover.css +0 -28
package/dist/css/styles/fill/fill.css CHANGED
@@ -1,53 +1,153 @@
1
- @each $selector in div, button, input, textarea {
2
- .fill,
3
- $(selector).fill {
4
- &_none {
5
- background-color: transparent;
6
- }
7
- @each $type in accent, primary, secondary, surface, error, warning, success,
8
- danger, info, disabled {
9
- @each $color in primary, secondary, tertiary, quaternary {
10
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
11
- &_$(type) {
12
- &-item {
13
- &-$(color) {
1
+ .fill,
2
+ div.fill,
3
+ button.fill,
4
+ input.fill,
5
+ textarea.fill {
6
+ &_active_none,
7
+ &_active_hover_none,
8
+ &_hover_none,
9
+ &_none {
10
+ background-color: transparent;
11
+ }
12
+ @each $type in accent, primary, secondary, surface, error, warning, success,
13
+ danger, info, disabled {
14
+ @each $color in primary, secondary, tertiary, quaternary {
15
+ &_active_hover_$(type) {
16
+ &-item {
17
+ &-$(color) {
18
+ &:hover {
14
19
  background: var(--color-$(type)-item-$(color));
15
- /* &$(alpha) {
16
- background: var(--color-$(type)-item-$(color)-$(alpha));
17
- } */
20
+ }
21
+
22
+ &-hover {
23
+ &:hover {
24
+ background: var(--color-$(type)-item-$(color)-hover);
25
+ }
26
+ &-active {
27
+ &:hover {
28
+ background: var(--color-$(type)-item-$(color)-active-hover);
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ &-$(color) {
35
+ &:hover {
36
+ background: var(--color-$(type)-fill-$(color));
37
+ }
38
+ &-hover {
39
+ &:hover {
40
+ background: var(--color-$(type)-fill-$(color)-hover);
41
+ }
42
+ &-active {
43
+ &:hover {
44
+ background: var(--color-$(type)-fill-$(color)-active-hover);
45
+ }
46
+ }
47
+ }
48
+ &-active {
49
+ &:hover {
50
+ background: var(--color-$(type)-fill-$(color)-active);
18
51
  }
19
52
  }
53
+ }
54
+ &-hover {
55
+ &-$(color) {
56
+ &:hover {
57
+ background: var(--color-$(type)-fill-hover-$(color));
58
+ }
59
+ }
60
+ }
61
+ }
62
+ &_hover_$(type) {
63
+ &-item {
20
64
  &-$(color) {
65
+ &:hover {
66
+ background: var(--color-$(type)-item-$(color));
67
+ }
68
+ &-hover {
69
+ &:hover {
70
+ background: var(--color-$(type)-item-$(color)-hover);
71
+ }
72
+ }
73
+ }
74
+ }
75
+ &-$(color) {
76
+ &:hover {
21
77
  background: var(--color-$(type)-fill-$(color));
22
- /* &$(alpha) {
23
- background: var(--color-$(type)-$(color)-$(alpha));
24
- } */
78
+ }
79
+ &-hover {
80
+ &:hover {
81
+ background: var(--color-$(type)-fill-$(color)-hover);
82
+ }
83
+ }
84
+ }
85
+ &-hover {
86
+ &-$(color) {
87
+ &:hover {
88
+ background: var(--color-$(type)-fill-hover-$(color));
89
+ }
25
90
  }
26
91
  }
27
- /* } */
92
+ }
93
+ &_active_$(type),
94
+ &_$(type) {
95
+ &-item {
96
+ &-$(color) {
97
+ background: var(--color-$(type)-item-$(color));
98
+ }
99
+ }
100
+ &-$(color) {
101
+ background: var(--color-$(type)-fill-$(color));
102
+ }
28
103
  }
29
104
  }
30
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
31
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
32
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
33
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
34
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
35
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
36
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
37
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
38
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
39
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
40
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
41
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
42
- alto, athens-gray, sonic-silver {
43
- &_$(palette) {
105
+ }
106
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
107
+ pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
108
+ apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
109
+ pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
110
+ pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
111
+ beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
112
+ pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
113
+ deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
114
+ delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
115
+ pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
116
+ dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
117
+ stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
118
+ sonic-silver {
119
+ &_active_hover_$(palette) {
120
+ &:hover {
44
121
  background: var(--color-palette-$(palette));
45
- &-item {
46
- &_$(palette) {
122
+ }
123
+ &-item {
124
+ &_$(palette) {
125
+ &:hover {
126
+ background: var(--color-palette-$(palette));
127
+ }
128
+ }
129
+ }
130
+ }
131
+ &_hover_$(palette) {
132
+ &:hover {
133
+ background: var(--color-palette-$(palette));
134
+ }
135
+ &-item {
136
+ &_$(palette) {
137
+ &:hover {
47
138
  background: var(--color-palette-$(palette));
48
139
  }
49
140
  }
50
141
  }
51
142
  }
143
+ &_active_$(palette),
144
+ &_$(palette) {
145
+ background: var(--color-palette-$(palette));
146
+ &-item {
147
+ &_$(palette) {
148
+ background: var(--color-palette-$(palette));
149
+ }
150
+ }
151
+ }
52
152
  }
53
153
  }
package/dist/css/styles/text-color/text-color.css CHANGED
@@ -1,11 +1,38 @@
1
1
  .text {
2
2
  &&-color {
3
+ &_active_none,
4
+ &_active_hover_none,
5
+ &_hover_none,
3
6
  &_none {
4
7
  color: transparent;
5
8
  }
6
9
  @each $type in accent, primary, secondary, surface, error, warning, success,
7
10
  danger, info, disabled {
8
11
  @each $color in primary, secondary, tertiary, quaternary {
12
+ &_active_hover_$(type) {
13
+ &-text {
14
+ &-$(color) {
15
+ &:hover {
16
+ color: var(--color-$(type)-text-$(color));
17
+ }
18
+ }
19
+ }
20
+ }
21
+ &_hover_$(type) {
22
+ &-text {
23
+ &-$(color) {
24
+ &:hover {
25
+ color: var(--color-$(type)-text-$(color));
26
+ }
27
+ &-hover {
28
+ &:hover {
29
+ color: var(--color-$(type)-text-$(color)-hover);
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ &_active_$(type),
9
36
  &_$(type) {
10
37
  &-text {
11
38
  &-$(color) {
@@ -28,6 +55,22 @@
28
55
  alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
29
56
  gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
30
57
  alto, athens-gray, sonic-silver {
58
+ &_active_hover_$(palette) {
59
+ &:hover {
60
+ color: var(--color-palette-$(palette));
61
+ }
62
+ }
63
+ &_hover_$(palette) {
64
+ &:hover {
65
+ color: var(--color-palette-$(palette));
66
+ }
67
+ &-hover {
68
+ &:hover {
69
+ color: var(--color-palette-$(palette)-hover);
70
+ }
71
+ }
72
+ }
73
+ &_active_$(palette),
31
74
  &_$(palette) {
32
75
  color: var(--color-palette-$(palette));
33
76
  }
package/dist/css/styles/text-gradient/text-gradient.css CHANGED
@@ -4,8 +4,7 @@
4
4
  }
5
5
  @each $type in accent, primary, secondary, tertiary, surface, success, error {
6
6
  &_$(type) {
7
- @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
8
- hover {
7
+ @each $color in primary, secondary, tertiary, quaternary {
9
8
  &-$(color) {
10
9
  @each $direction in left, top, right, bottom {
11
10
  &-$(direction) {
package/dist/types/components/Accordion/Accordion.interface.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, FillProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, DirectionProps, FillHoverProps, HeightProps, ItemColorProps, TextWeightProps, WidthProps } from '@itcase/types';
2
+ import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, FillHoverProps, FillProps, HeightProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
3
3
  import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
4
4
  type AccordionProps = {};
5
5
  type AccordionItemEventData = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.133",
3
+ "version": "1.8.135",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -79,7 +79,7 @@
79
79
  "prepack": "npm run build",
80
80
  "semantic-release": "semantic-release",
81
81
  "typecheck": "tsc --noEmit",
82
- "storybook": "rm -rf node_modules/.cache/ && storybook dev -p 6006",
82
+ "storybook": "rm -rf node_modules/.cache/ && storybook dev -p 6006 --disable-telemetry",
83
83
  "build-storybook": "storybook build"
84
84
  },
85
85
  "files": [
package/dist/css/styles/border-color/border-color_active.css DELETED
@@ -1,45 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .border-color,
3
- $(selector).border-color {
4
- &_active {
5
- &_none {
6
- border-width: 1px;
7
- border-color: transparent;
8
- border-style: solid;
9
- }
10
- @each $type in accent, primary, secondary, surface, error, warning,
11
- success, danger, info, disabled {
12
- @each $color in primary, secondary, tertiary, quaternary {
13
- &_$(type) {
14
- &-border {
15
- &-$(color) {
16
- border-width: 1px;
17
- border-color: var(--color-$(type)-border-$(color));
18
- border-style: solid;
19
- }
20
- }
21
- }
22
- }
23
- }
24
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
25
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
26
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
27
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
28
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
29
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
30
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
31
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
32
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
33
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
34
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
35
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
36
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
37
- &_$(palette) {
38
- border-width: 1px;
39
- border-color: var(--color-palette-$(palette));
40
- border-style: solid;
41
- }
42
- }
43
- }
44
- }
45
- }
package/dist/css/styles/border-color/border-color_active_hover.css DELETED
@@ -1,49 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .border-color,
3
- $(selector).border-color {
4
- &_active {
5
- &_none {
6
- border-width: 1px;
7
- border-color: transparent;
8
- border-style: solid;
9
- }
10
- @each $type in accent, primary, secondary, surface, error, warning,
11
- success, danger, info, disabled {
12
- @each $color in primary, secondary, tertiary, quaternary {
13
- &_$(type) {
14
- &-border {
15
- &-$(color) {
16
- &:hover {
17
- border-width: 1px;
18
- border-color: var(--color-$(type)-border-$(color));
19
- border-style: solid;
20
- }
21
- }
22
- }
23
- }
24
- }
25
- }
26
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
27
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
28
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
29
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
30
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
31
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
32
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
33
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
34
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
35
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
36
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
37
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
38
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
39
- &_$(palette) {
40
- &:hover {
41
- border-width: 1px;
42
- border-color: var(--color-palette-$(palette));
43
- border-style: solid;
44
- }
45
- }
46
- }
47
- }
48
- }
49
- }
package/dist/css/styles/border-color/border-color_focus.css DELETED
@@ -1,51 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .border-color,
3
- $(selector).border-color {
4
- &_focus {
5
- &_none {
6
- border-width: 1px;
7
- border-color: transparent;
8
- border-style: solid;
9
- }
10
- @each $type in accent, primary, secondary, surface, error, warning,
11
- success, danger, info, disabled {
12
- @each $color in primary, secondary, tertiary, quaternary {
13
- &_$(type) {
14
- &-border {
15
- &-$(color) {
16
- &:focus {
17
- border-width: 1px;
18
- border-color: var(--color-$(type)-border-$(color)) !important;
19
- border-style: solid;
20
- outline: 0;
21
- }
22
- }
23
- }
24
- }
25
- }
26
- }
27
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
28
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
29
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
30
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
31
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
32
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
33
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
34
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
35
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
36
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
37
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
38
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
39
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
40
- &_$(palette) {
41
- &:focus {
42
- border-width: 1px;
43
- border-color: var(--color-palette-$(palette)) !important;
44
- border-style: solid;
45
- outline: 0;
46
- }
47
- }
48
- }
49
- }
50
- }
51
- }
package/dist/css/styles/border-color/border-color_hover.css DELETED
@@ -1,63 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .border-color,
3
- $(selector).border-color {
4
- &_hover {
5
- &_none {
6
- border-width: 1px;
7
- border-color: transparent;
8
- border-style: solid;
9
- }
10
- @each $type in accent, primary, secondary, surface, error, warning,
11
- success, danger, info, disabled {
12
- @each $color in primary, secondary, tertiary, quaternary {
13
- &_$(type) {
14
- &-border {
15
- &-$(color) {
16
- &:hover {
17
- border-width: 1px;
18
- border-color: var(--color-$(type)-border-$(color));
19
- border-style: solid;
20
- }
21
- &-hover {
22
- &:hover {
23
- border-width: 1px;
24
- border-color: var(--color-$(type)-border-$(color));
25
- border-style: solid;
26
- }
27
- }
28
- }
29
- }
30
- }
31
- }
32
- }
33
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
34
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
35
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
36
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
37
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
38
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
39
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
40
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
41
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
42
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
43
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
44
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
45
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
46
- &_$(palette) {
47
- &:hover {
48
- border-width: 1px;
49
- border-color: var(--color-palette-$(palette));
50
- border-style: solid;
51
- }
52
- &-hover {
53
- &:hover {
54
- border-width: 1px;
55
- border-color: var(--color-palette-$(palette));
56
- border-style: solid;
57
- }
58
- }
59
- }
60
- }
61
- }
62
- }
63
- }
package/dist/css/styles/fill/fill_active.css DELETED
@@ -1,50 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .fill,
3
- $(selector).fill {
4
- &_active {
5
- &_none {
6
- background-color: transparent;
7
- }
8
- @each $type in accent, primary, secondary, surface, error, warning,
9
- success, danger, info, disabled {
10
- @each $color in primary, secondary, tertiary, quaternary {
11
- &_$(type) {
12
- &-item {
13
- &-$(color) {
14
- background: var(--color-$(type)-item-$(color));
15
- }
16
- }
17
- &-$(color) {
18
- background: var(--color-$(type)-fill-$(color));
19
- }
20
- &-$(color)-active {
21
- background: var(--color-$(type)-fill-active-$(color));
22
- }
23
- }
24
- }
25
- }
26
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
27
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
28
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
29
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
30
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
31
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
32
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
33
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
34
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
35
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
36
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
37
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
38
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
39
- &_$(palette) {
40
- background: var(--color-palette-$(palette));
41
- &-item {
42
- &_$(palette) {
43
- background: var(--color-palette-$(palette));
44
- }
45
- }
46
- }
47
- }
48
- }
49
- }
50
- }
package/dist/css/styles/fill/fill_active_hover.css DELETED
@@ -1,119 +0,0 @@
1
- @each $selector in div, button, input, textarea {
2
- .fill,
3
- $(selector).fill {
4
- &_active {
5
- &_hover {
6
- &_none {
7
- background-color: transparent;
8
- }
9
- @each $type in accent, primary, secondary, surface, error, warning,
10
- success, danger, info, disabled {
11
- @each $color in primary, secondary, tertiary, quaternary {
12
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
13
- &_$(type) {
14
- &-item {
15
- &-$(color) {
16
- &:hover {
17
- background: var(--color-$(type)-item-$(color));
18
- }
19
-
20
- /* &$(alpha) {
21
- &:hover {
22
- background: var(--color-$(type)-item-$(color)-$(alpha));
23
- }
24
- } */
25
- &-hover {
26
- &:hover {
27
- background: var(--color-$(type)-item-$(color)-hover);
28
- }
29
-
30
- /* &$(alpha) {
31
- &:hover {
32
- background: var(
33
- --color-$(type)-item-$(color)-$(alpha)-hover
34
- );
35
- }
36
- } */
37
- &-active {
38
- &:hover {
39
- background: var(
40
- --color-$(type)-item-$(color)-active-hover
41
- );
42
- }
43
-
44
- /* &$(alpha) {
45
- &:hover {
46
- background: var(
47
- --color-$(type)-item-$(color)-$(alpha)-active-hover
48
- );
49
- }
50
- } */
51
- }
52
- }
53
- }
54
- }
55
- &-$(color) {
56
- &:hover {
57
- background: var(--color-$(type)-fill-$(color));
58
- }
59
- &-hover {
60
- &:hover {
61
- background: var(--color-$(type)-fill-$(color)-hover);
62
- }
63
- &-active {
64
- &:hover {
65
- background: var(
66
- --color-$(type)-fill-$(color)-active-hover
67
- );
68
- }
69
- }
70
- }
71
- &-active {
72
- &:hover {
73
- background: var(--color-$(type)-fill-$(color)-active);
74
- }
75
- }
76
- }
77
- &-hover {
78
- &-$(color) {
79
- &:hover {
80
- background: var(--color-$(type)-fill-hover-$(color));
81
- }
82
- }
83
- }
84
- }
85
-
86
- /* } */
87
- }
88
- }
89
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
90
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
91
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
92
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
93
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
94
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
95
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
96
- dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
97
- midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
98
- indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
99
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
100
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
101
- walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
102
- athens-gray, sonic-silver {
103
- &_$(palette) {
104
- &:hover {
105
- background: var(--color-palette-$(palette));
106
- }
107
- &-item {
108
- &_$(palette) {
109
- &:hover {
110
- background: var(--color-palette-$(palette));
111
- }
112
- }
113
- }
114
- }
115
- }
116
- }
117
- }
118
- }
119
- }