ui-theme-igc-effect 1.5.4 → 1.5.6

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 (21) hide show
  1. package/dist/themes/igcEffect/Theme.css +32 -32
  2. package/dist/themes/igcEffect/_color/Theme_color_igcEffectCustom.css +42 -42
  3. package/dist/themes/igcEffect/_color/Theme_color_igcEffectDark.css +112 -112
  4. package/dist/themes/igcEffect/_color/Theme_color_igcEffectDefault.css +110 -110
  5. package/dist/themes/igcEffect/_component/Theme_component_igcEffectButton.css +15 -15
  6. package/dist/themes/igcEffect/_component/Theme_component_igcEffectCheckbox.css +117 -111
  7. package/dist/themes/igcEffect/_component/Theme_component_igcEffectCommon.css +28 -28
  8. package/dist/themes/igcEffect/_component/Theme_component_igcEffectDatePicker.css +3 -3
  9. package/dist/themes/igcEffect/_component/Theme_component_igcEffectRadio.css +66 -60
  10. package/dist/themes/igcEffect/_component/Theme_component_igcEffectRctable.css +55 -55
  11. package/dist/themes/igcEffect/_component/Theme_component_igcEffectSelect.css +197 -196
  12. package/dist/themes/igcEffect/_component/Theme_component_igcEffectSwitch.css +44 -44
  13. package/dist/themes/igcEffect/_component/Theme_component_igcEffectTabs.css +25 -25
  14. package/dist/themes/igcEffect/_component/Theme_component_igcEffectTextField.css +44 -44
  15. package/dist/themes/igcEffect/_component/Theme_component_igcEffectTooltip.css +5 -5
  16. package/dist/themes/igcEffect/_control/Theme_control_igcEffect.css +19 -19
  17. package/dist/themes/igcEffect/_font/Theme_font_igcEffect.css +107 -107
  18. package/dist/themes/igcEffect/_shadow/Theme_shadow_igcEffect.css +8 -8
  19. package/dist/themes/igcEffect/_size/Theme_size_igcEffect.css +27 -27
  20. package/dist/themes/igcEffect/_space/Theme_space_igcEffect.css +14 -14
  21. package/package.json +36 -36
package/dist/themes/igcEffect/_component/Theme_component_igcEffectCheckbox.css CHANGED
@@ -1,111 +1,117 @@
1
- .Theme_control_igcEffect.Theme:not(:has(.Theme_control_gpnDefault)) {
2
- & .Checkbox.Checkbox_view_primary {
3
- --control-radius: 2px;
4
-
5
- --color-primary: var(--color-gray-300);
6
- --color-shadow: none;
7
-
8
- & input.Checkbox-Input {
9
- padding: var(--space-3xs);
10
-
11
- border-color: var(--color-primary);
12
- background-color: var(--color-control-typo-primary);
13
-
14
- &.MixFocus {
15
- --mix-focus-color-one: transparent;
16
- --mix-focus-color-two: transparent;
17
- --mix-focus-animation: none;
18
- }
19
-
20
- &:hover,
21
- &:focus,
22
- &:active {
23
- box-shadow: 0px 0px 0px 4px var(--color-shadow);
24
- }
25
-
26
- &:checked {
27
- background-color: var(--color-primary);
28
-
29
- &::before,
30
- &::after {
31
- opacity: 1;
32
- }
33
- }
34
-
35
- &::before {
36
- top: 0;
37
- left: 0;
38
- height: var(--checkbox-size);
39
- width: var(--checkbox-size);
40
- border: none;
41
- border-radius: 2px;
42
- opacity: 0;
43
- transform: translate(-1px, -1px) scale(0.8);
44
- transform-origin: center center;
45
- background-color: var(--color-control-typo-primary);
46
- transition: none;
47
- }
48
-
49
- &::after {
50
- top: 0;
51
- left: 0;
52
- content: '';
53
- height: var(--checkbox-size);
54
- width: var(--checkbox-size);
55
- position: absolute;
56
- border-radius: 2px;
57
- opacity: 0;
58
- transform: translate(-1px, -1px) scale(0.6);
59
- transform-origin: center center;
60
- background-color: var(--color-primary);
61
- transition: none;
62
- }
63
- }
64
-
65
- &.Checkbox_intermediate {
66
- & input.Checkbox-Input {
67
- background-color: var(--color-primary);
68
-
69
- &::after {
70
- border-radius: 0;
71
- background-color: var(--color-control-typo-primary);
72
- opacity: 1;
73
- transform: translate(-1px, -1px) scaleY(0.08) scaleX(0.65);
74
- transform-origin: center center;
75
- }
76
-
77
- &::before {
78
- display: none;
79
- }
80
- }
81
- }
82
-
83
- &.Checkbox_disabled {
84
- &:not(.Checkbox_intermediate) .Checkbox-Input:not(:checked) {
85
- background-color: var(--color-gray-100);
86
- --color-primary: var(--color-gray-200);
87
- }
88
-
89
- & .Checkbox-Input:checked,
90
- &.Checkbox_intermediate .Checkbox-Input {
91
- opacity: 0.45;
92
- }
93
- }
94
-
95
- & .Checkbox-Input:checked,
96
- &.Checkbox_intermediate {
97
- --color-primary: var(--color-blue-ui);
98
- --color-shadow: none;
99
- }
100
-
101
- & .Checkbox-Input:hover {
102
- --color-primary: var(--color-blue-ui);
103
- --color-shadow: var(--color-royal-blue);
104
- }
105
-
106
- & .Checkbox-Input:active {
107
- --color-primary: var(--color-blue-ui-pressed);
108
- --color-shadow: var(--color-royal-blue-200);
109
- }
110
- }
111
- }
1
+ .Theme_control_igcEffect.Theme:not(:has(.Theme_control_gpnDefault)) {
2
+ & .Checkbox.Checkbox_view_primary {
3
+ --control-radius: 2px;
4
+
5
+ --color-primary: var(--color-gray-300);
6
+ --color-shadow: none;
7
+
8
+ & input.Checkbox-Input {
9
+ margin-left: var(--space-3xs);
10
+ margin-right: var(--space-3xs);
11
+
12
+ border-color: var(--color-primary);
13
+ background-color: var(--color-control-typo-primary);
14
+
15
+ &.MixFocus {
16
+ --mix-focus-color-one: transparent;
17
+ --mix-focus-color-two: transparent;
18
+ --mix-focus-animation: none;
19
+ }
20
+
21
+ &:hover,
22
+ &:focus,
23
+ &:active {
24
+ box-shadow: 0px 0px 0px 4px var(--color-shadow);
25
+ }
26
+
27
+ &:checked {
28
+ background-color: var(--color-primary);
29
+
30
+ &::before,
31
+ &::after {
32
+ opacity: 1;
33
+ }
34
+ }
35
+
36
+ &::before {
37
+ top: 0;
38
+ left: 0;
39
+ height: var(--checkbox-size);
40
+ width: var(--checkbox-size);
41
+ border: none;
42
+ border-radius: 2px;
43
+ opacity: 0;
44
+ transform: translate(-1px, -1px) scale(0.8);
45
+ transform-origin: center center;
46
+ background-color: var(--color-control-typo-primary);
47
+ transition: none;
48
+ }
49
+
50
+ &::after {
51
+ top: 0;
52
+ left: 0;
53
+ content: '';
54
+ height: var(--checkbox-size);
55
+ width: var(--checkbox-size);
56
+ position: absolute;
57
+ border-radius: 2px;
58
+ opacity: 0;
59
+ transform: translate(-1px, -1px) scale(0.6);
60
+ transform-origin: center center;
61
+ background-color: var(--color-primary);
62
+ transition: none;
63
+ }
64
+ }
65
+
66
+ &.Checkbox_intermediate {
67
+ & input.Checkbox-Input {
68
+ background-color: var(--color-primary);
69
+
70
+ &::after {
71
+ border-radius: 0;
72
+ background-color: var(--color-control-typo-primary);
73
+ opacity: 1;
74
+ transform: translate(-1px, -1px) scaleY(0.08) scaleX(0.65);
75
+ transform-origin: center center;
76
+ }
77
+
78
+ &::before {
79
+ display: none;
80
+ }
81
+ }
82
+ }
83
+
84
+ &.Checkbox_disabled {
85
+ &:not(.Checkbox_intermediate) .Checkbox-Input:not(:checked) {
86
+ background-color: var(--color-gray-100);
87
+ --color-primary: var(--color-gray-200);
88
+ }
89
+
90
+ & .Checkbox-Input:checked,
91
+ &.Checkbox_intermediate .Checkbox-Input {
92
+ opacity: 0.45;
93
+ }
94
+ }
95
+
96
+ & .Checkbox-Input:checked,
97
+ &.Checkbox_intermediate {
98
+ --color-primary: var(--color-blue-ui);
99
+ --color-shadow: none;
100
+ }
101
+
102
+ & .Checkbox-Input:hover {
103
+ --color-primary: var(--color-blue-ui);
104
+ --color-shadow: var(--color-royal-blue);
105
+ }
106
+
107
+ & .Checkbox-Input:active {
108
+ --color-primary: var(--color-blue-ui-pressed);
109
+ --color-shadow: var(--color-royal-blue-200);
110
+ }
111
+ }
112
+
113
+ & .Checkbox_size_l,
114
+ & .Checkbox_size_m {
115
+ --checkbox-font-size: var(--control-text-size-s);
116
+ }
117
+ }
package/dist/themes/igcEffect/_component/Theme_component_igcEffectCommon.css CHANGED
@@ -1,28 +1,28 @@
1
- * {
2
- margin: 0;
3
- padding: 0;
4
- box-sizing: border-box;
5
- font-weight: 500;
6
- }
7
-
8
- .Theme_control_igcEffect {
9
- --font-weight-placeholder: 400;
10
- }
11
-
12
- .Theme_control_igcEffect .MixFocus:not(.MixFocus_before):focus,
13
- .Theme_control_igcEffect .MixFocus:not(.MixFocus_before):focus:hover {
14
- box-shadow: none;
15
- }
16
-
17
- .Theme_control_igcEffect *::-webkit-scrollbar-track {
18
- background: var(--color-gray-100);
19
- }
20
-
21
- .Theme_control_igcEffect *::-webkit-scrollbar-thumb {
22
- background: var(--color-gray-200);
23
- cursor: pointer;
24
- }
25
-
26
- .Theme_control_igcEffect *::-webkit-scrollbar-thumb:hover {
27
- background: var(--color-gray-200);
28
- }
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ font-weight: 500;
6
+ }
7
+
8
+ .Theme_control_igcEffect {
9
+ --font-weight-placeholder: 400;
10
+ }
11
+
12
+ .Theme_control_igcEffect .MixFocus:not(.MixFocus_before):focus,
13
+ .Theme_control_igcEffect .MixFocus:not(.MixFocus_before):focus:hover {
14
+ box-shadow: none;
15
+ }
16
+
17
+ .Theme_control_igcEffect *::-webkit-scrollbar-track {
18
+ background: var(--color-gray-100);
19
+ }
20
+
21
+ .Theme_control_igcEffect *::-webkit-scrollbar-thumb {
22
+ background: var(--color-gray-200);
23
+ cursor: pointer;
24
+ }
25
+
26
+ .Theme_control_igcEffect *::-webkit-scrollbar-thumb:hover {
27
+ background: var(--color-gray-200);
28
+ }
package/dist/themes/igcEffect/_component/Theme_component_igcEffectDatePicker.css CHANGED
@@ -1,3 +1,3 @@
1
- .Theme_control_igcEffect.DatePickerDropdown {
2
- --color-control-typo-disable: rgba(26, 27, 38, 0.3);
3
- }
1
+ .Theme_control_igcEffect.DatePickerDropdown {
2
+ --color-control-typo-disable: rgba(26, 27, 38, 0.3);
3
+ }
package/dist/themes/igcEffect/_component/Theme_component_igcEffectRadio.css CHANGED
@@ -1,60 +1,66 @@
1
- .Theme_control_igcEffect {
2
- & .Radio.Radio_view_primary {
3
- --radio-size: var(--control-box-size-l);
4
- --radio-offset: var(--space-xs);
5
-
6
- --color-primary: var(--color-gray-300);
7
- --color-shadow: none;
8
-
9
- & input.Radio-Input {
10
- padding: var(--space-3xs);
11
-
12
- border-color: var(--color-primary);
13
- background-color: var(--color-control-typo-primary);
14
-
15
- &.MixFocus {
16
- --mix-focus-color-one: transparent;
17
- --mix-focus-color-two: transparent;
18
- --mix-focus-animation: none;
19
- }
20
-
21
- &:hover,
22
- &:focus,
23
- &:active {
24
- box-shadow: 0px 0px 0px 4px var(--color-shadow);
25
- }
26
-
27
- &:checked::before {
28
- transform: scale(0.5);
29
- background-color: var(--color-primary);
30
- }
31
- }
32
-
33
- &.Radio_disabled {
34
- & input.Radio-Input:not(:checked) {
35
- background-color: var(--color-gray-100);
36
- }
37
-
38
- & .Radio-Input:checked {
39
- opacity: 0.45;
40
- }
41
-
42
- --color-primary: var(--color-gray-200);
43
- }
44
-
45
- & .Radio-Input:checked {
46
- --color-primary: var(--color-blue-ui);
47
- --color-shadow: none;
48
- }
49
-
50
- & .Radio-Input:hover {
51
- --color-primary: var(--color-blue-ui);
52
- --color-shadow: var(--color-royal-blue);
53
- }
54
-
55
- & .Radio-Input:active {
56
- --color-primary: var(--color-blue-ui-pressed);
57
- --color-shadow: var(--color-royal-blue-200);
58
- }
59
- }
60
- }
1
+ .Theme_control_igcEffect {
2
+ & .Radio.Radio_view_primary {
3
+ --radio-size: var(--control-box-size-l);
4
+ --radio-offset: var(--space-xs);
5
+
6
+ --color-primary: var(--color-gray-300);
7
+ --color-shadow: none;
8
+
9
+ & input.Radio-Input {
10
+ margin-left: var(--space-3xs);
11
+ margin-right: var(--space-3xs);
12
+
13
+ border-color: var(--color-primary);
14
+ background-color: var(--color-control-typo-primary);
15
+
16
+ &.MixFocus {
17
+ --mix-focus-color-one: transparent;
18
+ --mix-focus-color-two: transparent;
19
+ --mix-focus-animation: none;
20
+ }
21
+
22
+ &:hover,
23
+ &:focus,
24
+ &:active {
25
+ box-shadow: 0px 0px 0px 4px var(--color-shadow);
26
+ }
27
+
28
+ &:checked::before {
29
+ transform: scale(0.5);
30
+ background-color: var(--color-primary);
31
+ }
32
+ }
33
+
34
+ &.Radio_disabled {
35
+ & input.Radio-Input:not(:checked) {
36
+ background-color: var(--color-gray-100);
37
+ }
38
+
39
+ & .Radio-Input:checked {
40
+ opacity: 0.45;
41
+ }
42
+
43
+ --color-primary: var(--color-gray-200);
44
+ }
45
+
46
+ & .Radio-Input:checked {
47
+ --color-primary: var(--color-blue-ui);
48
+ --color-shadow: none;
49
+ }
50
+
51
+ & .Radio-Input:hover {
52
+ --color-primary: var(--color-blue-ui);
53
+ --color-shadow: var(--color-royal-blue);
54
+ }
55
+
56
+ & .Radio-Input:active {
57
+ --color-primary: var(--color-blue-ui-pressed);
58
+ --color-shadow: var(--color-royal-blue-200);
59
+ }
60
+ }
61
+
62
+ & .Radio_size_l,
63
+ & .Radio_size_m {
64
+ --radio-font-size: var(--control-text-size-s);
65
+ }
66
+ }
package/dist/themes/igcEffect/_component/Theme_component_igcEffectRctable.css CHANGED
@@ -1,55 +1,55 @@
1
- .Theme_control_igcEffect .rcta--RcTable-cell {
2
- font-weight: 500;
3
- padding: 8px;
4
- }
5
-
6
- .Theme_control_igcEffect .rcta--RcTable-thead .rcta--RcTable-cell {
7
- padding: 4px 8px;
8
- }
9
-
10
- .Theme_control_igcEffect .rcta--RcTable thead > tr:last-child > * {
11
- border-bottom: 0px;
12
- }
13
-
14
- .Theme_control_igcEffect
15
- .rcta--RcTable
16
- tbody
17
- > tr:not(.rcta--RcTable-placeholder):hover {
18
- background-color: var(--color-bg-default);
19
- }
20
-
21
- .Theme_control_igcEffect
22
- .rcta--RcTable
23
- tbody
24
- > tr:not(.rcta--RcTable-placeholder):hover
25
- .rcta--RcTable-cell-fix-left:before,
26
- .Theme_control_igcEffect
27
- .rcta--RcTable
28
- tbody
29
- > tr:not(.rcta--RcTable-placeholder):hover
30
- .rcta--RcTable-cell-fix-right:before {
31
- background-color: var(--color-bg-default);
32
- }
33
-
34
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar {
35
- width: 16px;
36
- }
37
-
38
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-track {
39
- background: var(--color-gray-100);
40
- border-left: 8px var(--color-bg-default) solid;
41
- }
42
-
43
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb {
44
- background: var(--color-gray-200);
45
- border-left: 8px var(--color-bg-default) solid;
46
- }
47
-
48
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb:hover {
49
- background-color: var(--color-gray-200);
50
- }
51
-
52
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb:horizontal,
53
- .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-track:horizontal {
54
- border-left: none;
55
- }
1
+ .Theme_control_igcEffect .rcta--RcTable-cell {
2
+ font-weight: 500;
3
+ padding: 8px;
4
+ }
5
+
6
+ .Theme_control_igcEffect .rcta--RcTable-thead .rcta--RcTable-cell {
7
+ padding: 4px 8px;
8
+ }
9
+
10
+ .Theme_control_igcEffect .rcta--RcTable thead > tr:last-child > * {
11
+ border-bottom: 0px;
12
+ }
13
+
14
+ .Theme_control_igcEffect
15
+ .rcta--RcTable
16
+ tbody
17
+ > tr:not(.rcta--RcTable-placeholder):hover {
18
+ background-color: var(--color-bg-default);
19
+ }
20
+
21
+ .Theme_control_igcEffect
22
+ .rcta--RcTable
23
+ tbody
24
+ > tr:not(.rcta--RcTable-placeholder):hover
25
+ .rcta--RcTable-cell-fix-left:before,
26
+ .Theme_control_igcEffect
27
+ .rcta--RcTable
28
+ tbody
29
+ > tr:not(.rcta--RcTable-placeholder):hover
30
+ .rcta--RcTable-cell-fix-right:before {
31
+ background-color: var(--color-bg-default);
32
+ }
33
+
34
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar {
35
+ width: 16px;
36
+ }
37
+
38
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-track {
39
+ background: var(--color-gray-100);
40
+ border-left: 8px var(--color-bg-default) solid;
41
+ }
42
+
43
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb {
44
+ background: var(--color-gray-200);
45
+ border-left: 8px var(--color-bg-default) solid;
46
+ }
47
+
48
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb:hover {
49
+ background-color: var(--color-gray-200);
50
+ }
51
+
52
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-thumb:horizontal,
53
+ .Theme_control_igcEffect .rcta--RcTable *::-webkit-scrollbar-track:horizontal {
54
+ border-left: none;
55
+ }