@itcase/ui 1.8.106 → 1.8.107

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 (18) hide show
  1. package/dist/css/components/Button/Button.css +2 -2
  2. package/dist/css/styles/align/align.css +6 -3
  3. package/dist/css/styles/align/align_horizontal-reverse.css +46 -43
  4. package/dist/css/styles/align/align_horizontal.css +42 -39
  5. package/dist/css/styles/align/align_vertical-reverse.css +43 -40
  6. package/dist/css/styles/align/align_vertical.css +41 -38
  7. package/dist/css/styles/border-color/border-color.css +36 -34
  8. package/dist/css/styles/border-color/border-color_active.css +37 -35
  9. package/dist/css/styles/border-color/border-color_active_hover.css +39 -37
  10. package/dist/css/styles/border-color/border-color_focus.css +41 -39
  11. package/dist/css/styles/border-color/border-color_hover.css +43 -41
  12. package/dist/css/styles/bundle.css +547 -506
  13. package/dist/css/styles/fill/fill.css +41 -39
  14. package/dist/css/styles/fill/fill_active.css +39 -37
  15. package/dist/css/styles/fill/fill_active_hover.css +77 -72
  16. package/dist/css/styles/fill/fill_gradient.css +13 -8
  17. package/dist/css/styles/fill/fill_hover.css +60 -58
  18. package/package.json +1 -1
package/dist/css/components/Button/Button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .button {
2
2
  text-decoration: none;
3
- /* background: none; */
3
+ background: none;
4
4
  padding: 0;
5
5
  margin: 0;
6
- /* border-width: solid 0 #fff; */
6
+ border: solid 0 #fff;
7
7
  position: relative;
8
8
  display: flex;
9
9
  justify-content: center;
package/dist/css/styles/align/align.css CHANGED
@@ -1,5 +1,8 @@
1
- .align {
2
- &_center {
3
- margin: 0 auto;
1
+ @each $selector in button, input, textarea {
2
+ .align,
3
+ $(selector).align {
4
+ &_center {
5
+ margin: 0 auto;
6
+ }
4
7
  }
5
8
  }
package/dist/css/styles/align/align_horizontal-reverse.css CHANGED
@@ -3,63 +3,66 @@
3
3
  flex-direction: row-reverse;
4
4
  }
5
5
 
6
- .align {
7
- &_horizontal-reverse {
8
- display: flex;
9
- flex-direction: row-reverse;
10
- @extend %align-horizontal-reverse;
11
- &-top {
12
- &-left {
13
- align-items: flex-start;
14
- @extend %align-horizontal-reverse;
15
- }
16
- &-center {
17
- text-align: center;
18
- justify-content: center;
19
- align-items: flex-start;
20
- @extend %align-horizontal-reverse;
21
- }
22
- &-right {
23
- text-align: right;
24
- justify-content: flex-end;
25
- align-items: flex-start;
26
- @extend %align-horizontal-reverse;
27
- }
28
- }
29
- &-left {
30
- align-items: center;
31
- @extend %align-horizontal-reverse;
32
- }
33
- &-center {
34
- text-align: center;
35
- justify-content: center;
36
- align-items: center;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_horizontal-reverse {
10
+ display: flex;
11
+ flex-direction: row-reverse;
37
12
  @extend %align-horizontal-reverse;
38
- }
39
- &-right {
40
- text-align: right;
41
- justify-content: flex-end;
42
- align-items: center;
43
- @extend %align-horizontal-reverse;
44
- }
45
- &-bottom {
13
+ &-top {
14
+ &-left {
15
+ align-items: flex-start;
16
+ @extend %align-horizontal-reverse;
17
+ }
18
+ &-center {
19
+ text-align: center;
20
+ justify-content: center;
21
+ align-items: flex-start;
22
+ @extend %align-horizontal-reverse;
23
+ }
24
+ &-right {
25
+ text-align: right;
26
+ justify-content: flex-end;
27
+ align-items: flex-start;
28
+ @extend %align-horizontal-reverse;
29
+ }
30
+ }
46
31
  &-left {
47
- flex-direction: row;
48
- align-items: flex-end;
32
+ align-items: center;
49
33
  @extend %align-horizontal-reverse;
50
34
  }
51
35
  &-center {
52
36
  text-align: center;
53
37
  justify-content: center;
54
- align-items: flex-end;
38
+ align-items: center;
55
39
  @extend %align-horizontal-reverse;
56
40
  }
57
41
  &-right {
58
42
  text-align: right;
59
43
  justify-content: flex-end;
60
- align-items: flex-end;
44
+ align-items: center;
61
45
  @extend %align-horizontal-reverse;
62
46
  }
47
+ &-bottom {
48
+ &-left {
49
+ flex-direction: row;
50
+ align-items: flex-end;
51
+ @extend %align-horizontal-reverse;
52
+ }
53
+ &-center {
54
+ text-align: center;
55
+ justify-content: center;
56
+ align-items: flex-end;
57
+ @extend %align-horizontal-reverse;
58
+ }
59
+ &-right {
60
+ text-align: right;
61
+ justify-content: flex-end;
62
+ align-items: flex-end;
63
+ @extend %align-horizontal-reverse;
64
+ }
65
+ }
63
66
  }
64
67
  }
65
68
  }
package/dist/css/styles/align/align_horizontal.css CHANGED
@@ -3,63 +3,66 @@
3
3
  flex-direction: row;
4
4
  }
5
5
 
6
- .align {
7
- &_horizontal {
8
- &_top {
9
- align-items: flex-start;
10
- @extend %align-horizontal;
11
- &-left {
12
- align-items: flex-start;
13
- @extend %align-horizontal;
14
- }
15
- &-center {
16
- text-align: center;
17
- justify-content: center;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_horizontal {
10
+ &_top {
18
11
  align-items: flex-start;
19
12
  @extend %align-horizontal;
13
+ &-left {
14
+ align-items: flex-start;
15
+ @extend %align-horizontal;
16
+ }
17
+ &-center {
18
+ text-align: center;
19
+ justify-content: center;
20
+ align-items: flex-start;
21
+ @extend %align-horizontal;
22
+ }
23
+ &-right {
24
+ text-align: right;
25
+ justify-content: flex-end;
26
+ align-items: flex-start;
27
+ @extend %align-horizontal;
28
+ }
20
29
  }
21
- &-right {
22
- text-align: right;
23
- justify-content: flex-end;
24
- align-items: flex-start;
30
+ &_bottom {
31
+ align-items: flex-end;
25
32
  @extend %align-horizontal;
33
+ &-left {
34
+ align-items: flex-end;
35
+ @extend %align-horizontal;
36
+ }
37
+ &-center {
38
+ text-align: center;
39
+ justify-content: center;
40
+ align-items: flex-end;
41
+ @extend %align-horizontal;
42
+ }
43
+ &-right {
44
+ text-align: right;
45
+ justify-content: flex-end;
46
+ align-items: flex-end;
47
+ @extend %align-horizontal;
48
+ }
26
49
  }
27
- }
28
- &_bottom {
29
- align-items: flex-end;
30
- @extend %align-horizontal;
31
50
  &-left {
32
- align-items: flex-end;
51
+ align-items: center;
33
52
  @extend %align-horizontal;
34
53
  }
35
54
  &-center {
36
55
  text-align: center;
37
56
  justify-content: center;
38
- align-items: flex-end;
57
+ align-items: center;
39
58
  @extend %align-horizontal;
40
59
  }
41
60
  &-right {
42
61
  text-align: right;
43
62
  justify-content: flex-end;
44
- align-items: flex-end;
63
+ align-items: center;
45
64
  @extend %align-horizontal;
46
65
  }
47
66
  }
48
- &-left {
49
- align-items: center;
50
- @extend %align-horizontal;
51
- }
52
- &-center {
53
- text-align: center;
54
- justify-content: center;
55
- align-items: center;
56
- @extend %align-horizontal;
57
- }
58
- &-right {
59
- text-align: right;
60
- justify-content: flex-end;
61
- align-items: center;
62
- @extend %align-horizontal;
63
- }
64
67
  }
65
68
  }
package/dist/css/styles/align/align_vertical-reverse.css CHANGED
@@ -3,58 +3,61 @@
3
3
  flex-direction: column-reverse;
4
4
  }
5
5
 
6
- .align {
7
- &_vertical-reverse {
8
- &-top {
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_vertical-reverse {
10
+ &-top {
11
+ &-left {
12
+ align-items: flex-start;
13
+ @extend %align-horizontal-reverse;
14
+ }
15
+ &-center {
16
+ text-align: center;
17
+ align-items: center;
18
+ @extend %align-horizontal-reverse;
19
+ }
20
+ &-right {
21
+ text-align: right;
22
+ align-items: flex-end;
23
+ @extend %align-horizontal-reverse;
24
+ }
25
+ }
9
26
  &-left {
10
- @extend %align-horizontal-reverse;
27
+ justify-content: center;
11
28
  align-items: flex-start;
29
+ @extend %align-horizontal-reverse;
12
30
  }
13
31
  &-center {
14
- @extend %align-horizontal-reverse;
15
32
  text-align: center;
33
+ justify-content: center;
16
34
  align-items: center;
35
+ @extend %align-horizontal-reverse;
17
36
  }
18
37
  &-right {
19
- @extend %align-horizontal-reverse;
20
38
  text-align: right;
39
+ justify-content: center;
21
40
  align-items: flex-end;
22
- }
23
- }
24
- &-left {
25
- @extend %align-horizontal-reverse;
26
- justify-content: center;
27
- align-items: flex-start;
28
- }
29
- &-center {
30
- @extend %align-horizontal-reverse;
31
- text-align: center;
32
- justify-content: center;
33
- align-items: center;
34
- }
35
- &-right {
36
- @extend %align-horizontal-reverse;
37
- text-align: right;
38
- justify-content: center;
39
- align-items: flex-end;
40
- }
41
- &-bottom {
42
- &-left {
43
41
  @extend %align-horizontal-reverse;
44
- justify-content: flex-end;
45
- align-items: flex-start;
46
42
  }
47
- &-center {
48
- @extend %align-horizontal-reverse;
49
- text-align: center;
50
- justify-content: flex-end;
51
- align-items: center;
52
- }
53
- &-right {
54
- @extend %align-horizontal-reverse;
55
- text-align: right;
56
- justify-content: flex-end;
57
- align-items: flex-end;
43
+ &-bottom {
44
+ &-left {
45
+ justify-content: flex-end;
46
+ align-items: flex-start;
47
+ @extend %align-horizontal-reverse;
48
+ }
49
+ &-center {
50
+ text-align: center;
51
+ justify-content: flex-end;
52
+ align-items: center;
53
+ @extend %align-horizontal-reverse;
54
+ }
55
+ &-right {
56
+ text-align: right;
57
+ justify-content: flex-end;
58
+ align-items: flex-end;
59
+ @extend %align-horizontal-reverse;
60
+ }
58
61
  }
59
62
  }
60
63
  }
package/dist/css/styles/align/align_vertical.css CHANGED
@@ -3,59 +3,62 @@
3
3
  flex-direction: column;
4
4
  }
5
5
 
6
- .align {
7
- &_vertical {
8
- &-top {
9
- &-left {
10
- align-items: flex-start;
11
- @extend %align-vertical;
12
- }
13
- &-center {
14
- text-align: center;
15
- align-items: center;
16
- @extend %align-vertical;
17
- }
18
- &-right {
19
- text-align: right;
20
- align-items: flex-end;
21
- @extend %align-vertical;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_vertical {
10
+ &-top {
11
+ &-left {
12
+ align-items: flex-start;
13
+ @extend %align-vertical;
14
+ }
15
+ &-center {
16
+ text-align: center;
17
+ align-items: center;
18
+ @extend %align-vertical;
19
+ }
20
+ &-right {
21
+ text-align: right;
22
+ align-items: flex-end;
23
+ @extend %align-vertical;
24
+ }
22
25
  }
23
- }
24
- &-left {
25
- justify-content: center;
26
- align-items: flex-start;
27
- @extend %align-vertical;
28
- }
29
- &-center {
30
- text-align: center;
31
- justify-content: center;
32
- align-items: center;
33
- @extend %align-vertical;
34
- }
35
- &-right {
36
- text-align: right;
37
- justify-content: center;
38
- align-items: flex-end;
39
- @extend %align-vertical;
40
- }
41
- &-bottom {
42
26
  &-left {
43
- justify-content: flex-end;
27
+ justify-content: center;
44
28
  align-items: flex-start;
45
29
  @extend %align-vertical;
46
30
  }
47
31
  &-center {
48
32
  text-align: center;
49
- justify-content: flex-end;
33
+ justify-content: center;
50
34
  align-items: center;
51
35
  @extend %align-vertical;
52
36
  }
53
37
  &-right {
54
38
  text-align: right;
55
- justify-content: flex-end;
39
+ justify-content: center;
56
40
  align-items: flex-end;
57
41
  @extend %align-vertical;
58
42
  }
43
+ &-bottom {
44
+ &-left {
45
+ justify-content: flex-end;
46
+ align-items: flex-start;
47
+ @extend %align-vertical;
48
+ }
49
+ &-center {
50
+ text-align: center;
51
+ justify-content: flex-end;
52
+ align-items: center;
53
+ @extend %align-vertical;
54
+ }
55
+ &-right {
56
+ text-align: right;
57
+ justify-content: flex-end;
58
+ align-items: flex-end;
59
+ @extend %align-vertical;
60
+ }
61
+ }
59
62
  }
60
63
  }
61
64
  }
package/dist/css/styles/border-color/border-color.css CHANGED
@@ -1,41 +1,43 @@
1
- .border-color,
2
- button.border-color {
3
- &_none {
4
- border-width: 1px;
5
- border-color: transparent;
6
- border-style: solid;
7
- }
8
- @each $type in accent, primary, secondary, surface, error, warning, success,
9
- danger, info, disabled {
10
- @each $color in primary, secondary, tertiary, quaternary {
11
- &_$(type) {
12
- &-border {
13
- &-$(color) {
14
- border-width: 1px;
15
- border-color: var(--color-$(type)-border-$(color));
16
- border-style: solid;
1
+ @each $selector in button, input, textarea {
2
+ .border-color,
3
+ $(selector).border-color {
4
+ &_none {
5
+ border-width: 1px;
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ }
9
+ @each $type in accent, primary, secondary, surface, error, warning, success,
10
+ danger, info, disabled {
11
+ @each $color in primary, secondary, tertiary, quaternary {
12
+ &_$(type) {
13
+ &-border {
14
+ &-$(color) {
15
+ border-width: 1px;
16
+ border-color: var(--color-$(type)-border-$(color));
17
+ border-style: solid;
18
+ }
17
19
  }
18
20
  }
19
21
  }
20
22
  }
21
- }
22
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
23
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
24
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
25
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
26
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
27
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
28
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
29
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
30
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
31
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
32
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
33
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
34
- sonic-silver {
35
- &_$(palette) {
36
- border-width: 1px;
37
- border-color: var(--color-palette-$(palette));
38
- border-style: solid;
23
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
24
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
25
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
26
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
27
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
28
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
29
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
30
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
31
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
32
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
33
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
34
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
35
+ alto, athens-gray, sonic-silver {
36
+ &_$(palette) {
37
+ border-width: 1px;
38
+ border-color: var(--color-palette-$(palette));
39
+ border-style: solid;
40
+ }
39
41
  }
40
42
  }
41
43
  }
package/dist/css/styles/border-color/border-color_active.css CHANGED
@@ -1,42 +1,44 @@
1
- .border-color,
2
- button.border-color {
3
- &_active {
4
- &_none {
5
- border-width: 1px;
6
- border-color: transparent;
7
- border-style: solid;
8
- }
9
- @each $type in accent, primary, secondary, surface, error, warning, success,
10
- danger, info, disabled {
11
- @each $color in primary, secondary, tertiary, quaternary {
12
- &_$(type) {
13
- &-border {
14
- &-$(color) {
15
- border-width: 1px;
16
- border-color: var(--color-$(type)-border-$(color));
17
- border-style: solid;
1
+ @each $selector in 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
+ }
18
20
  }
19
21
  }
20
22
  }
21
23
  }
22
- }
23
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
24
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
25
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
26
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
27
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
28
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
29
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
30
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
31
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
32
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
33
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
34
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
35
- alto, athens-gray, sonic-silver {
36
- &_$(palette) {
37
- border-width: 1px;
38
- border-color: var(--color-palette-$(palette));
39
- border-style: solid;
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
+ }
40
42
  }
41
43
  }
42
44
  }