@unifiedsoftware/styles 1.0.11 → 1.0.13

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 (37) hide show
  1. package/css/{theme-default.css → fci.css} +193 -171
  2. package/css/fci.min.css +1 -0
  3. package/css/styles.css +85 -10
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_button.scss +1 -0
  7. package/scss/components/_index.scss +1 -0
  8. package/scss/components/_input.scss +10 -0
  9. package/scss/components/_popover.scss +26 -0
  10. package/scss/components/_scroll-area.scss +28 -10
  11. package/scss/components/_switch.scss +39 -0
  12. package/scss/themes/{default → fci}/_tokens.scss +1 -1
  13. package/scss/themes/fci/components/_badge.scss +24 -0
  14. package/scss/themes/fci/components/_button.scss +156 -0
  15. package/scss/themes/fci/components/_card.scss +21 -0
  16. package/scss/themes/fci/components/_chip.scss +127 -0
  17. package/scss/themes/fci/components/_drawer.scss +8 -0
  18. package/scss/themes/fci/components/_icon.scss +8 -0
  19. package/scss/themes/{default → fci}/components/_index.scss +1 -0
  20. package/scss/themes/fci/components/_input.scss +25 -0
  21. package/scss/themes/{default → fci}/components/_list.scss +24 -20
  22. package/scss/themes/{default → fci}/components/_menu.scss +26 -20
  23. package/scss/themes/fci/components/_switch.scss +19 -0
  24. package/scss/themes/fci/components/_tabs.scss +24 -0
  25. package/scss/themes/fci/components/_toolbar.scss +29 -0
  26. package/scss/themes/{default-kendo.scss → kendo-fci/_index.scss} +1 -1
  27. package/css/theme-default.min.css +0 -1
  28. package/scss/themes/default/components/_badge.scss +0 -21
  29. package/scss/themes/default/components/_button.scss +0 -191
  30. package/scss/themes/default/components/_card.scss +0 -20
  31. package/scss/themes/default/components/_chip.scss +0 -165
  32. package/scss/themes/default/components/_drawer.scss +0 -6
  33. package/scss/themes/default/components/_icon.scss +0 -6
  34. package/scss/themes/default/components/_input.scss +0 -21
  35. package/scss/themes/default/components/_tabs.scss +0 -21
  36. package/scss/themes/default/components/_toolbar.scss +0 -27
  37. /package/scss/themes/{default → fci}/_index.scss +0 -0
@@ -0,0 +1,156 @@
1
+ @use '../../../variables' as *;
2
+ @use '../../../mixins/button' as *;
3
+
4
+ $colors-map: (
5
+ primary: var(--#{$prefix}primary-color),
6
+ secondary: var(--#{$prefix}secondary-color),
7
+ success: var(--#{$prefix}success-color),
8
+ info: var(--#{$prefix}info-color),
9
+ warning: var(--#{$prefix}warning-color),
10
+ danger: var(--#{$prefix}danger-color),
11
+ );
12
+
13
+ .#{$prefix}theme-fci {
14
+ .#{$prefix}button {
15
+ --#{$prefix}button-font-weight: 500;
16
+ --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
17
+
18
+ & > .#{$prefix}overlay {
19
+ --#{$prefix}overlay-color: inherit;
20
+ --#{$prefix}overlay-opacity: 0;
21
+ --#{$prefix}_hover-overlay-opacity: 0;
22
+ --#{$prefix}_hover-overlay-opacity: 0.12;
23
+ --#{$prefix}_active-overlay-opacity: 0.24;
24
+ }
25
+
26
+ & > .#{$prefix}outline {
27
+ --#{$prefix}outline-border-width: 1px;
28
+ --#{$prefix}outline-border-color: transparent;
29
+ }
30
+
31
+ &--xs {
32
+ --#{$prefix}button-height: 20px;
33
+ --#{$prefix}button-padding-y: 0;
34
+ --#{$prefix}button-padding-x: 0.5rem;
35
+ --#{$prefix}button-font-size: 0.625rem;
36
+ --#{$prefix}button-border-radius: 4px;
37
+ --#{$prefix}button-gap: 0.25rem;
38
+
39
+ .#{$prefix}icon {
40
+ --#{$prefix}icon-font-size: 0.75rem;
41
+ }
42
+ }
43
+
44
+ &--sm {
45
+ --#{$prefix}button-height: 28px;
46
+ --#{$prefix}button-padding-y: 0;
47
+ --#{$prefix}button-padding-x: 0.75rem;
48
+ --#{$prefix}button-font-size: 0.75rem;
49
+ --#{$prefix}button-border-radius: 4px;
50
+ --#{$prefix}button-gap: 0.375rem;
51
+
52
+ .#{$prefix}icon {
53
+ --#{$prefix}icon-font-size: 1rem;
54
+ }
55
+ }
56
+
57
+ &--md {
58
+ --#{$prefix}button-height: 36px;
59
+ --#{$prefix}button-padding-y: 0;
60
+ --#{$prefix}button-padding-x: 1rem;
61
+ --#{$prefix}button-font-size: 0.875rem;
62
+ --#{$prefix}button-border-radius: 4px;
63
+ --#{$prefix}button-gap: 0.5rem;
64
+
65
+ .#{$prefix}icon {
66
+ --#{$prefix}icon-font-size: 1.125rem;
67
+ }
68
+ }
69
+
70
+ &--lg {
71
+ --#{$prefix}button-height: 44px;
72
+ --#{$prefix}button-padding-y: 0;
73
+ --#{$prefix}button-padding-x: 1.25rem;
74
+ --#{$prefix}button-font-size: 1rem;
75
+ --#{$prefix}button-border-radius: 4px;
76
+ --#{$prefix}button-gap: 0.625rem;
77
+
78
+ .#{$prefix}icon {
79
+ --#{$prefix}icon-font-size: 1.25rem;
80
+ }
81
+ }
82
+
83
+ &--xl {
84
+ --#{$prefix}button-height: 52px;
85
+ --#{$prefix}button-padding-y: 0;
86
+ --#{$prefix}button-padding-x: 1.5rem;
87
+ --#{$prefix}button-font-size: 1rem;
88
+ --#{$prefix}button-border-radius: 4px;
89
+ --#{$prefix}button-gap: 0.75rem;
90
+
91
+ .#{$prefix}icon {
92
+ --#{$prefix}icon-font-size: 1.5rem;
93
+ }
94
+ }
95
+
96
+ &--filled {
97
+ --#{$prefix}button-border-width: 1px;
98
+ --#{$prefix}button-border-color: transparent;
99
+ --#{$prefix}button-color: var(--#{$prefix}white-color);
100
+
101
+ .#{$prefix}chip {
102
+ --#{$prefix}chip-background: var(--#{$prefix}white-color);
103
+ }
104
+ }
105
+
106
+ &--outlined {
107
+ & > .#{$prefix}outline {
108
+ --#{$prefix}outline-border-color: currentColor;
109
+ }
110
+ }
111
+
112
+ &--flat {
113
+ & > .#{$prefix}overlay {
114
+ --#{$prefix}overlay-opacity: 0.08;
115
+ --#{$prefix}_hover-overlay-opacity: 0.12;
116
+ --#{$prefix}_active-overlay-opacity: 0.24;
117
+ }
118
+ }
119
+ }
120
+
121
+ @each $key, $value in $colors-map {
122
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
123
+ --#{$prefix}button-background: #{$value};
124
+ }
125
+
126
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
127
+ --#{$prefix}button-color: #{$value};
128
+ }
129
+
130
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
131
+ --#{$prefix}button-color: #{$value};
132
+ }
133
+
134
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
135
+ --#{$prefix}button-color: #{$value};
136
+ }
137
+
138
+ @if $key == 'secondary' {
139
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
140
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
141
+ }
142
+
143
+ .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
144
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
145
+ }
146
+
147
+ .#{$prefix}button--flat.#{$prefix}button--#{$key} {
148
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
149
+ }
150
+
151
+ .#{$prefix}button--text.#{$prefix}button--#{$key} {
152
+ --#{$prefix}button-color: var(--#{$prefix}black-color);
153
+ }
154
+ }
155
+ }
156
+ }
@@ -0,0 +1,21 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}card {
5
+ --#{$prefix}card-border-width: 1px;
6
+ --#{$prefix}card-border-style: solid;
7
+ --#{$prefix}card-border-color: rgba(9, 30, 66, 0.14);
8
+ --#{$prefix}card-border-radius: 8px;
9
+ }
10
+ .#{$prefix}card-header {
11
+ --#{$prefix}card-header-padding-y: 1rem;
12
+ --#{$prefix}card-header-padding-x: 1rem;
13
+ --#{$prefix}card-header-gap: 1rem;
14
+ }
15
+
16
+ .#{$prefix}card-header__title {
17
+ --#{$prefix}card-header-title-font-size: 0.75rem;
18
+ --#{$prefix}card-header-title-font-weight: 600;
19
+ --#{$prefix}card-header-title-line-height: 24px;
20
+ }
21
+ }
@@ -0,0 +1,127 @@
1
+ @use '../../../variables' as *;
2
+ @use '../../../mixins/chip' as *;
3
+ @use '../../../mixins/overlay' as *;
4
+
5
+ $colors-map: (
6
+ primary: var(--#{$prefix}primary-color),
7
+ secondary: var(--#{$prefix}secondary-color),
8
+ success: var(--#{$prefix}success-color),
9
+ info: var(--#{$prefix}info-color),
10
+ warning: var(--#{$prefix}warning-color),
11
+ danger: var(--#{$prefix}danger-color),
12
+ );
13
+
14
+ .#{$prefix}theme-fci {
15
+ .#{$prefix}chip {
16
+ --#{$prefix}chip-padding-y: 0.125rem;
17
+ --#{$prefix}chip-padding-x: 0.5rem;
18
+ --#{$prefix}chip-font-size: 0.75rem;
19
+ --#{$prefix}chip-font-weight: 700;
20
+ --#{$prefix}chip-border-radius: 9999px;
21
+
22
+ & > .#{$prefix}overlay {
23
+ --#{$prefix}overlay-color: inherit;
24
+ --#{$prefix}overlay-opacity: 0;
25
+ }
26
+
27
+ & > .#{$prefix}outline {
28
+ --#{$prefix}outline-border-width: 1px;
29
+ --#{$prefix}outline-border-color: transparent;
30
+ }
31
+
32
+ &--xs {
33
+ --#{$prefix}chip-height: 28px;
34
+ --#{$prefix}chip-padding-y: 0;
35
+ --#{$prefix}chip-padding-x: 0.5rem;
36
+ --#{$prefix}chip-font-size: 0.75rem;
37
+ --#{$prefix}chip-border-radius: 9999px;
38
+ --#{$prefix}chip-gap: 0.375rem;
39
+ --#{$prefix}chip-icon-font-size: 0.75rem;
40
+
41
+ .#{$prefix}icon {
42
+ --#{$prefix}icon-font-size: 0.75rem;
43
+ }
44
+ }
45
+
46
+ &--sm {
47
+ --#{$prefix}chip-height: 32px;
48
+ --#{$prefix}chip-padding-y: 0;
49
+ --#{$prefix}chip-padding-x: 0.75rem;
50
+ --#{$prefix}chip-font-size: 14px;
51
+ --#{$prefix}chip-gap: 0.375rem;
52
+ --#{$prefix}chip-icon-font-size: 0.875rem;
53
+
54
+ .#{$prefix}icon {
55
+ --#{$prefix}icon-font-size: 0.875rem;
56
+ }
57
+ }
58
+
59
+ &--md {
60
+ --#{$prefix}chip-height: 40px;
61
+ --#{$prefix}chip-padding-y: 0;
62
+ --#{$prefix}chip-padding-x: 1rem;
63
+ --#{$prefix}chip-font-size: 14px;
64
+ --#{$prefix}chip-gap: 0.5rem;
65
+
66
+ .#{$prefix}icon {
67
+ --#{$prefix}icon-font-size: 1rem;
68
+ }
69
+ }
70
+
71
+ &--lg {
72
+ --#{$prefix}chip-height: 48px;
73
+ --#{$prefix}chip-padding-y: 0;
74
+ --#{$prefix}chip-padding-x: 1.5rem;
75
+ --#{$prefix}chip-font-size: 1rem;
76
+ --#{$prefix}chip-gap: 0.5rem;
77
+
78
+ .#{$prefix}icon {
79
+ --#{$prefix}icon-font-size: 1.125rem;
80
+ }
81
+ }
82
+
83
+ &--xl {
84
+ --#{$prefix}chip-height: 48px;
85
+ --#{$prefix}chip-padding-y: 0;
86
+ --#{$prefix}chip-padding-x: 1.5rem;
87
+ --#{$prefix}chip-font-size: 1rem;
88
+ --#{$prefix}chip-gap: 0.5rem;
89
+
90
+ .#{$prefix}icon {
91
+ --#{$prefix}icon-font-size: 1.25rem;
92
+ }
93
+ }
94
+
95
+ &--filled {
96
+ --#{$prefix}chip-border-width: 1px;
97
+ --#{$prefix}chip-border-color: transparent;
98
+ --#{$prefix}chip-color: var(--#{$prefix}white-color);
99
+ }
100
+
101
+ &--outlined {
102
+ & > .#{$prefix}outline {
103
+ --#{$prefix}outline-border-color: currentColor;
104
+ }
105
+ }
106
+ }
107
+
108
+ @each $key, $value in $colors-map {
109
+ .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
110
+ --#{$prefix}chip-background: #{$value};
111
+ }
112
+
113
+ @if $key == 'secondary' {
114
+ .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
115
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
116
+ }
117
+ }
118
+
119
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
120
+ --#{$prefix}chip-color: #{$value};
121
+ }
122
+
123
+ .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
124
+ --#{$prefix}chip-color: #{$value};
125
+ }
126
+ }
127
+ }
@@ -0,0 +1,8 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}drawer {
5
+ --#{$prefix}drawer-width: 256px;
6
+ --#{$prefix}drawer-background: #fff;
7
+ }
8
+ }
@@ -0,0 +1,8 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}icon {
5
+ --#{$prefix}icon-font-size: 1.5rem;
6
+ --#{$prefix}icon-color: inherit;
7
+ }
8
+ }
@@ -9,6 +9,7 @@
9
9
  @use 'drawer';
10
10
 
11
11
  @use 'input';
12
+ @use 'switch';
12
13
 
13
14
  @use 'list';
14
15
  @use 'menu';
@@ -0,0 +1,25 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}input {
5
+ --#{$prefix}input-padding-y: 0rem;
6
+ --#{$prefix}input-padding-x: 1rem;
7
+ --#{$prefix}input-height: 36px;
8
+ --#{$prefix}input-font-size: 0.75rem;
9
+ --#{$prefix}input-font-family: var(--#{$prefix}font-sans);
10
+ --#{$prefix}input-line-height: 24px;
11
+ --#{$prefix}input-border-radius: 0.25rem;
12
+ --#{$prefix}input-gap: 0.5rem;
13
+ --#{$prefix}input-icon-size: 1.125rem;
14
+
15
+ & > .#{$prefix}outline {
16
+ --#{$prefix}outline-border-width: 1px;
17
+ --#{$prefix}outline-border-color: currentColor;
18
+ --#{$prefix}outline-opacity: 0.12;
19
+ --#{$prefix}outline-hover-opacity: 0.24;
20
+ --#{$prefix}outline-focus-border-width: 2px;
21
+ --#{$prefix}outline-focus-border-color: var(--#{$prefix}primary-color);
22
+ --#{$prefix}outline-focus-opacity: 1;
23
+ }
24
+ }
25
+ }
@@ -1,19 +1,21 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
- .#{$prefix}list {
4
- --#{$prefix}list-padding-y: 0;
5
- --#{$prefix}list-padding-x: 0;
6
- --#{$prefix}list-color: #343a40;
7
- --#{$prefix}list-background: #fff;
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}list {
5
+ --#{$prefix}list-padding-y: 0px;
6
+ --#{$prefix}list-padding-x: 0px;
7
+ --#{$prefix}list-color: #343a40;
8
+ --#{$prefix}list-background: #fff;
9
+ }
8
10
 
9
- &-item {
11
+ .#{$prefix}list-item {
10
12
  --#{$prefix}list-item-height: 40px;
11
- --#{$prefix}list-item-padding-y: 0;
13
+ --#{$prefix}list-item-padding-y: 0px;
12
14
  --#{$prefix}list-item-padding-x: 1rem;
13
15
  --#{$prefix}list-item-padding-level: 1.25rem;
14
16
  --#{$prefix}list-item-font-size: 12px;
15
17
  --#{$prefix}list-item-font-weight: 500;
16
- --#{$prefix}list-item-border-radius: 0;
18
+ --#{$prefix}list-item-border-radius: 0px;
17
19
  --#{$prefix}list-item-gap: 1rem;
18
20
 
19
21
  --#{$prefix}list-item-title-font-size: 12px;
@@ -30,24 +32,24 @@
30
32
  --#{$prefix}_active-overlay-opacity: 0.08;
31
33
  }
32
34
 
33
- & .#{$prefix}icon {
35
+ .#{$prefix}icon {
34
36
  --#{$prefix}icon-font-size: 16px;
35
37
  --#{$prefix}icon-color: var(--#{$prefix}primary-color);
36
38
  }
37
39
 
38
40
  &--selected {
39
41
  --#{$prefix}list-item-color: var(--#{$prefix}primary-color);
40
- }
41
42
 
42
- &--selected > .#{$prefix}overlay {
43
- --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
44
- --#{$prefix}overlay-opacity: 0.08;
45
- --#{$prefix}_hover-overlay-opacity: 0.12;
46
- --#{$prefix}_active-overlay-opacity: 0.16;
43
+ & > .#{$prefix}overlay {
44
+ --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
45
+ --#{$prefix}overlay-opacity: 0.08;
46
+ --#{$prefix}_hover-overlay-opacity: 0.12;
47
+ --#{$prefix}_active-overlay-opacity: 0.16;
48
+ }
47
49
  }
48
50
  }
49
51
 
50
- &-subheader {
52
+ .#{$prefix}list-subheader {
51
53
  --#{$prefix}list-subheader-height: 40px;
52
54
  --#{$prefix}list-subheader-padding-y: 0;
53
55
  --#{$prefix}list-subheader-padding-x: 1rem;
@@ -60,9 +62,11 @@
60
62
  --#{$prefix}list-subheader-border-color: #dee2e6;
61
63
  }
62
64
 
63
- &-group > &-item--selected > .#{$prefix}overlay {
64
- --#{$prefix}overlay-opacity: 0;
65
- --#{$prefix}_hover-overlay-opacity: 0;
66
- --#{$prefix}_active-overlay-opacity: 0;
65
+ .#{$prefix}list-group > .#{$prefix}list-item--selected {
66
+ & > .#{$prefix}overlay {
67
+ --#{$prefix}overlay-opacity: 0;
68
+ --#{$prefix}_hover-overlay-opacity: 0;
69
+ --#{$prefix}_active-overlay-opacity: 0;
70
+ }
67
71
  }
68
72
  }
@@ -1,12 +1,14 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
- .#{$prefix}menu {
4
- --#{$prefix}menu-padding-y: 0;
5
- --#{$prefix}menu-padding-x: 0;
6
- --#{$prefix}menu-color: #343a40;
7
- --#{$prefix}menu-background: #fff;
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}menu {
5
+ --#{$prefix}menu-padding-y: 0;
6
+ --#{$prefix}menu-padding-x: 0;
7
+ --#{$prefix}menu-color: #343a40;
8
+ --#{$prefix}menu-background: #fff;
9
+ }
8
10
 
9
- &-item {
11
+ .#{$prefix}menu-item {
10
12
  --#{$prefix}menu-item-height: 40px;
11
13
  --#{$prefix}menu-item-padding-y: 0;
12
14
  --#{$prefix}menu-item-padding-x: 1rem;
@@ -23,24 +25,26 @@
23
25
  --#{$prefix}_hover-overlay-opacity: 0.08;
24
26
  }
25
27
 
26
- &__icon .#{$prefix}icon {
27
- --#{$prefix}icon-font-size: 16px;
28
- --#{$prefix}icon-color: var(--#{$prefix}primary-color);
28
+ &__icon {
29
+ .#{$prefix}icon {
30
+ --#{$prefix}icon-font-size: 16px;
31
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
32
+ }
29
33
  }
30
34
 
31
35
  &--selected {
32
36
  --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
33
- }
34
37
 
35
- &--selected > .#{$prefix}overlay {
36
- --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
37
- --#{$prefix}overlay-opacity: 0.08;
38
- --#{$prefix}_hover-overlay-opacity: 0.08;
39
- --#{$prefix}_active-overlay-opacity: 0.08;
38
+ > .#{$prefix}overlay {
39
+ --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
40
+ --#{$prefix}overlay-opacity: 0.08;
41
+ --#{$prefix}_hover-overlay-opacity: 0.08;
42
+ --#{$prefix}_active-overlay-opacity: 0.08;
43
+ }
40
44
  }
41
45
  }
42
46
 
43
- &-group {
47
+ .#{$prefix}menu-group {
44
48
  --#{$prefix}menu-group-height: 40px;
45
49
  --#{$prefix}menu-group-padding-y: 0;
46
50
  --#{$prefix}menu-group-padding-x: 1rem;
@@ -53,9 +57,11 @@
53
57
  --#{$prefix}menu-group-border-color: #dee2e6;
54
58
  }
55
59
 
56
- &-submenu > &-item--selected > .#{$prefix}overlay {
57
- --#{$prefix}overlay-opacity: 0;
58
- --#{$prefix}_hover-overlay-opacity: 0;
59
- --#{$prefix}_active-overlay-opacity: 0;
60
+ .#{$prefix}menu-submenu > .#{$prefix}menu-item--selected {
61
+ & > .#{$prefix}overlay {
62
+ --#{$prefix}overlay-opacity: 0;
63
+ --#{$prefix}_hover-overlay-opacity: 0;
64
+ --#{$prefix}_active-overlay-opacity: 0;
65
+ }
60
66
  }
61
67
  }
@@ -0,0 +1,19 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}switch {
5
+ --#{$prefix}switch-width: 2.5rem;
6
+ --#{$prefix}switch-padding-y: 0.25rem;
7
+ --#{$prefix}switch-padding-x: 0.25rem;
8
+ --#{$prefix}switch-border-radius: 9999px;
9
+ --#{$prefix}switch-color: rgba(0, 0, 0, 0.2);
10
+ --#{$prefix}switch-thumb-width: 1rem;
11
+ --#{$prefix}switch-thumb-height: 1rem;
12
+ --#{$prefix}switch-thumb-border-radius: 9999px;
13
+ --#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);
14
+ }
15
+
16
+ .#{$prefix}switch--checked {
17
+ --#{$prefix}switch-color: var(--#{$prefix}primary-color);
18
+ }
19
+ }
@@ -0,0 +1,24 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}tab {
5
+ --#{$prefix}tab-color: var(--#{$prefix}black-color);
6
+ --#{$prefix}tab-font-size: 0.8125rem;
7
+ --#{$prefix}tab-font-weight: 500;
8
+
9
+ --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-color);
10
+ --#{$prefix}tab-indicator-height: 3px;
11
+ --#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
12
+
13
+ & > .#{$prefix}overlay {
14
+ --#{$prefix}overlay-opacity: 0;
15
+ --#{$prefix}overlay-color: inherit;
16
+ --#{$prefix}_hover-overlay-opacity: 0.08;
17
+ --#{$prefix}_active-overlay-opacity: 0.12;
18
+ }
19
+
20
+ &--selected {
21
+ --#{$prefix}tab-color: var(--#{$prefix}primary-color);
22
+ }
23
+ }
24
+ }
@@ -0,0 +1,29 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}toolbar {
5
+ --#{$prefix}toolbar-background: var(--#{$prefix}white-color);
6
+
7
+ --#{$prefix}toolbar-title-font-size: 1rem;
8
+ --#{$prefix}toolbar-title-font-weight: 600;
9
+
10
+ /* Outline */
11
+ --#{$prefix}outline-border-width: 1px;
12
+ --#{$prefix}outline-border-color: #ddd;
13
+
14
+ &--sm {
15
+ --#{$prefix}toolbar-padding-y: 0.25rem;
16
+ --#{$prefix}toolbar-padding-x: 1rem;
17
+ }
18
+
19
+ &--md {
20
+ --#{$prefix}toolbar-padding-y: 0.5rem;
21
+ --#{$prefix}toolbar-padding-x: 1rem;
22
+ }
23
+
24
+ &--lg {
25
+ --#{$prefix}toolbar-padding-y: 0.75rem;
26
+ --#{$prefix}toolbar-padding-x: 1rem;
27
+ }
28
+ }
29
+ }
@@ -1,4 +1,4 @@
1
- @use '../variables' as *;
1
+ @use '../../variables' as *;
2
2
 
3
3
  .k-popup {
4
4
  margin-top: 0.25rem;
@@ -1 +0,0 @@
1
- .us-toolbar{--us-toolbar-background: var(--us-white-color);--us-toolbar-title-font-size: 1.125rem;--us-toolbar-title-font-weight: 600;--us-outline-border-width: 1px;--us-outline-border-color: #ddd}.us-toolbar .us-toolbar--sm{--us-toolbar-padding-y: 0.25rem;--us-toolbar-padding-x: 1rem}.us-toolbar--md{--us-toolbar-padding-y: 0.5rem;--us-toolbar-padding-x: 1rem}.us-toolbar--lg{--us-toolbar-padding-y: 0.75rem;--us-toolbar-padding-x: 1rem}.us-icon{--us-icon-font-size: 1.5rem;--us-icon-color: inherit}.us-badge{--us-badge-padding-y: 0.125rem;--us-badge-padding-x: 0.325rem;--us-badge-font-size: 0.75rem;--us-badge-font-weight: 700;--us-badge-border-radius: 9999px;--us-badge-border-width: 2px;--us-badge-border-color: var(--us-white-color);--us-badge-color: var(--us-white-color);--us-badge-background: var(--us-primary-color);--us-overlay-color: inherit;--us-overlay-opacity: 0.08;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-chip{--us-chip-padding-y: 0.125rem;--us-chip-padding-x: 0.5rem;--us-chip-font-size: 0.75rem;--us-chip-font-weight: 700;--us-chip-border-radius: 9999px;--us-chip-color: var(--us-primary-color);--us-chip-background: transparent;--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-outline-border-width: 1px;--us-outline-border-color: transparent}.us-chip>.us-overlay{--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: initial;--us-_hover-overlay-opacity: initial;--us-_active-overlay-color: initial;--us-_active-overlay-opacity: initial}.us-chip--xs{--us-chip-height: 28px;--us-chip-padding-y: 0;--us-chip-padding-x: 0.5rem;--us-chip-font-size: 0.75rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.375rem}.us-chip--xs .us-icon{--us-icon-font-size: 0.75rem}.us-chip--sm{--us-chip-height: 32px;--us-chip-padding-y: 0;--us-chip-padding-x: 0.75rem;--us-chip-font-size: 14px;--us-chip-border-radius: 9999px;--us-chip-gap: 0.375rem}.us-chip--sm .us-icon{--us-icon-font-size: 0.875rem}.us-chip--md{--us-chip-height: 40px;--us-chip-padding-y: 0;--us-chip-padding-x: 1rem;--us-chip-font-size: 14px;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--md .us-icon{--us-icon-font-size: 1rem}.us-chip--lg{--us-chip-height: 48px;--us-chip-padding-y: 0;--us-chip-padding-x: 1.5rem;--us-chip-font-size: 1rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--lg .us-icon{--us-icon-font-size: 1.125rem}.us-chip--xl{--us-chip-height: 48px;--us-chip-padding-y: 0;--us-chip-padding-x: 1.5rem;--us-chip-font-size: 1rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--xl .us-icon{--us-icon-font-size: 1.25rem}.us-chip--filled{--us-chip-border-width: 1px;--us-chip-border-color: transparent;--us-chip-color: var(--us-white-color)}.us-chip--filled.us-chip--primary{--us-chip-background: var(--us-primary-color)}.us-chip--filled.us-chip--secondary{--us-chip-color: var(--us-black-color);--us-chip-background: var(--us-secondary-color)}.us-chip--filled.us-chip--success{--us-chip-background: var(--us-success-color)}.us-chip--filled.us-chip--info{--us-chip-background: var(--us-info-color)}.us-chip--filled.us-chip--warning{--us-chip-background: var(--us-warning-color)}.us-chip--filled.us-chip--danger{--us-chip-background: var(--us-danger-color)}.us-chip--outlined{--us-outline-border-color: currentColor}.us-chip--outlined.us-chip--primary{--us-chip-color: var(--us-primary-color)}.us-chip--outlined.us-chip--secondary{--us-chip-color: var(--us-black-color)}.us-chip--outlined.us-chip--success{--us-chip-color: var(--us-success-color)}.us-chip--outlined.us-chip--info{--us-chip-color: var(--us-info-color)}.us-chip--outlined.us-chip--warning{--us-chip-color: var(--us-warning-color)}.us-chip--outlined.us-chip--danger{--us-chip-color: var(--us-danger-color)}.us-chip--text.us-chip--primary{--us-chip-color: var(--us-primary-color)}.us-chip--text.us-chip--secondary{--us-chip-color: var(--us-black-color)}.us-chip--text.us-chip--success{--us-button-color: var(--us-success-color)}.us-chip--text.us-chip--info{--us-chip-color: var(--us-info-color)}.us-chip--text.us-chip--warning{--us-chip-color: var(--us-warning-color)}.us-chip--text.us-chip--danger{--us-chip-color: var(--us-danger-color)}.us-button{--us-button-font-weight: 500;--us-button-font-family: var(--us-font-sans);--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_hover-overlay-opacity: 0.12;--us-_active-overlay-opacity: 0.24;--us-outline-border-width: 1px;--us-outline-border-color: transparent}.us-button--xs{--us-button-height: 20px;--us-button-padding-y: 0;--us-button-padding-x: 0.5rem;--us-button-font-size: 0.625rem;--us-button-border-radius: 4px;--us-button-gap: 0.25rem}.us-button--xs .us-icon{--us-icon-font-size: 0.75rem}.us-button--sm{--us-button-height: 28px;--us-button-padding-y: 0;--us-button-padding-x: 0.75rem;--us-button-font-size: 0.75rem;--us-button-border-radius: 4px;--us-button-gap: 0.375rem}.us-button--sm .us-icon{--us-icon-font-size: 1rem}.us-button--md{--us-button-height: 36px;--us-button-padding-y: 0;--us-button-padding-x: 1rem;--us-button-font-size: 0.875rem;--us-button-border-radius: 4px;--us-button-gap: 0.5rem}.us-button--md .us-icon{--us-icon-font-size: 1.125rem}.us-button--lg{--us-button-height: 44px;--us-button-padding-y: 0;--us-button-padding-x: 1.25rem;--us-button-font-size: 1rem;--us-button-border-radius: 4px;--us-button-gap: 0.625rem}.us-button--lg .us-icon{--us-icon-font-size: 1.25rem}.us-button--xl{--us-button-height: 52px;--us-button-padding-y: 0;--us-button-padding-x: 1.5rem;--us-button-font-size: 1rem;--us-button-border-radius: 4px;--us-button-gap: 0.75rem}.us-button--xl .us-icon{--us-icon-font-size: 1.5rem}.us-button--filled{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-color: var(--us-white-color)}.us-button--filled .us-chip{--us-chip-background: var(--us-white-color)}.us-button--filled.us-button--primary{--us-button-background: var(--us-primary-color)}.us-button--filled.us-button--secondary{--us-button-color: var(--us-black-color);--us-button-background: var(--us-secondary-color)}.us-button--filled.us-button--success{--us-button-background: var(--us-success-color)}.us-button--filled.us-button--info{--us-button-background: var(--us-info-color)}.us-button--filled.us-button--warning{--us-button-background: var(--us-warning-color)}.us-button--filled.us-button--danger{--us-button-background: var(--us-danger-color)}.us-button--outlined{--us-outline-border-color: currentColor}.us-button--outlined.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--outlined.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--outlined.us-button--success{--us-button-color: var(--us-success-color)}.us-button--outlined.us-button--info{--us-button-color: var(--us-info-color)}.us-button--outlined.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--outlined.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--flat{--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0.12;--us-_active-overlay-opacity: 0.24}.us-button--flat.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--flat.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--flat.us-button--success{--us-button-color: var(--us-success-color)}.us-button--flat.us-button--info{--us-button-color: var(--us-info-color)}.us-button--flat.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--flat.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--text.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--text.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--text.us-button--success{--us-button-color: var(--us-success-color)}.us-button--text.us-button--info{--us-button-color: var(--us-info-color)}.us-button--text.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--text.us-button--danger{--us-button-color: var(--us-danger-color)}.us-drawer{--us-drawer-width: 256px;--us-drawer-background: #fff}.us-input{--us-input-padding-y: 0.5rem;--us-input-padding-x: 1rem;--us-input-font-size: 0.75rem;--us-input-line-height: 24px;--us-input-border-radius: 0.25rem;--us-input-gap: 0.5rem;--us-input-icon-size: 1.125rem}.us-input>.us-outline{--us-outline-border-width: 1px;--us-outline-border-color: currentColor;--us-outline-opacity: 0.12;--us-outline-hover-opacity: 0.24;--us-outline-focus-border-width: 2px;--us-outline-focus-border-color: var(--us-primary-color);--us-outline-focus-opacity: 1}.us-list{--us-list-padding-y: 0;--us-list-padding-x: 0;--us-list-color: #343a40;--us-list-background: #fff}.us-list-item{--us-list-item-height: 40px;--us-list-item-padding-y: 0;--us-list-item-padding-x: 1rem;--us-list-item-padding-level: 1.25rem;--us-list-item-font-size: 12px;--us-list-item-font-weight: 500;--us-list-item-border-radius: 0;--us-list-item-gap: 1rem;--us-list-item-title-font-size: 12px;--us-list-item-title-font-weight: 500;--us-list-item-subtitle-font-size: 12px;--us-list-item-subtitle-font-weight: 400}.us-list-item>.us-overlay{--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.04;--us-_active-overlay-opacity: 0.08}.us-list-item .us-icon{--us-icon-font-size: 16px;--us-icon-color: var(--us-primary-color)}.us-list-item--selected{--us-list-item-color: var(--us-primary-color)}.us-list-item--selected>.us-overlay{--us-overlay-color: var(--us-primary-color);--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0.12;--us-_active-overlay-opacity: 0.16}.us-list-subheader{--us-list-subheader-height: 40px;--us-list-subheader-padding-y: 0;--us-list-subheader-padding-x: 1rem;--us-list-subheader-padding-level: 2rem;--us-list-subheader-font-size: 12px;--us-list-subheader-font-weight: 700;--us-list-subheader-border-radius: 0;--us-list-subheader-gap: 1rem;--us-list-subheader-border-width: 1px;--us-list-subheader-border-color: #dee2e6}.us-list-group>.us-list-item--selected>.us-overlay{--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-menu{--us-menu-padding-y: 0;--us-menu-padding-x: 0;--us-menu-color: #343a40;--us-menu-background: #fff}.us-menu-item{--us-menu-item-height: 40px;--us-menu-item-padding-y: 0;--us-menu-item-padding-x: 1rem;--us-menu-item-padding-level: 2rem;--us-menu-item-font-size: 12px;--us-menu-item-font-weight: 500;--us-menu-item-border-radius: 0;--us-menu-item-gap: 1rem}.us-menu-item>.us-overlay{--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08}.us-menu-item__icon .us-icon{--us-icon-font-size: 16px;--us-icon-color: var(--us-primary-color)}.us-menu-item--selected{--us-menu-item-color: var(--us-primary-color)}.us-menu-item--selected>.us-overlay{--us-overlay-color: var(--us-primary-color);--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0.08}.us-menu-group{--us-menu-group-height: 40px;--us-menu-group-padding-y: 0;--us-menu-group-padding-x: 1rem;--us-menu-group-padding-level: 2rem;--us-menu-group-font-size: 12px;--us-menu-group-font-weight: 700;--us-menu-group-border-radius: 0;--us-menu-group-gap: 1rem;--us-menu-group-border-width: 1px;--us-menu-group-border-color: #dee2e6}.us-menu-submenu>.us-menu-item--selected>.us-overlay{--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-tab{--us-tab-color: var(--us-black-color);--us-tab-font-size: 0.8125rem;--us-tab-font-weight: 500;--us-tab-indicator-color: var(--us-primary-color);--us-tab-indicator-height: 3px;--us-tab-indicator-border-radius: 3px 3px 0px 0px;--us-overlay-opacity: 0;--us-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0.12}.us-tab--selected{--us-tab-color: var(--us-primary-color)}.us-card{--us-card-border-width: 1px;--us-card-border-style: solid;--us-card-border-color: rgba(9, 30, 66, 0.14);--us-card-border-radius: 8px}.us-card-header{--us-card-header-padding-y: 1rem;--us-card-header-padding-x: 1rem;--us-card-header-gap: 1rem}.us-card-header__title{--us-card-header-title-font-size: 0.75rem;--us-card-header-title-font-weight: 600;--us-card-header-title-line-height: 24px}:root{--us-primary-color: #990000;--us-secondary-color: #dde4eb;--us-success-color: #e1ae30;--us-info-color: #8862e0;--us-warning-color: #ffaf00;--us-danger-color: #ff0017;--us-black-color: #000;--us-white-color: #fff;--us-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}
@@ -1,21 +0,0 @@
1
- @use '../../../variables' as *;
2
-
3
- .#{$prefix}badge {
4
- --#{$prefix}badge-padding-y: 0.125rem;
5
- --#{$prefix}badge-padding-x: 0.325rem;
6
- --#{$prefix}badge-font-size: 0.75rem;
7
- --#{$prefix}badge-font-weight: 700;
8
- --#{$prefix}badge-border-radius: 9999px;
9
- --#{$prefix}badge-border-width: 2px;
10
- --#{$prefix}badge-border-color: var(--#{$prefix}white-color);
11
- --#{$prefix}badge-color: var(--#{$prefix}white-color);
12
- --#{$prefix}badge-background: var(--#{$prefix}primary-color);
13
-
14
- /* Overlay */
15
- --#{$prefix}overlay-color: inherit;
16
- --#{$prefix}overlay-opacity: 0.08;
17
- --#{$prefix}_hover-overlay-color: inherit;
18
- --#{$prefix}_hover-overlay-opacity: 0.08;
19
- --#{$prefix}_active-overlay-color: inherit;
20
- --#{$prefix}_active-overlay-opacity: 0.12;
21
- }