@unifiedsoftware/styles 1.0.11 → 1.0.12

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 (39) 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/fci/components/_list.scss +70 -0
  22. package/scss/themes/fci/components/_menu.scss +63 -0
  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/_list.scss +0 -68
  36. package/scss/themes/default/components/_menu.scss +0 -61
  37. package/scss/themes/default/components/_tabs.scss +0 -21
  38. package/scss/themes/default/components/_toolbar.scss +0 -27
  39. /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
+ }
@@ -0,0 +1,70 @@
1
+ @use '../../../variables' as *;
2
+
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
+
10
+ &-item {
11
+ --#{$prefix}list-item-height: 40px;
12
+ --#{$prefix}list-item-padding-y: 0px;
13
+ --#{$prefix}list-item-padding-x: 1rem;
14
+ --#{$prefix}list-item-padding-level: 1.25rem;
15
+ --#{$prefix}list-item-font-size: 12px;
16
+ --#{$prefix}list-item-font-weight: 500;
17
+ --#{$prefix}list-item-border-radius: 0px;
18
+ --#{$prefix}list-item-gap: 1rem;
19
+
20
+ --#{$prefix}list-item-title-font-size: 12px;
21
+ --#{$prefix}list-item-title-font-weight: 500;
22
+
23
+ --#{$prefix}list-item-subtitle-font-size: 12px;
24
+ --#{$prefix}list-item-subtitle-font-weight: 400;
25
+
26
+ & > .#{$prefix}overlay {
27
+ --#{$prefix}overlay-color: inherit;
28
+ --#{$prefix}overlay-opacity: 0;
29
+ --#{$prefix}_hover-overlay-color: inherit;
30
+ --#{$prefix}_hover-overlay-opacity: 0.04;
31
+ --#{$prefix}_active-overlay-opacity: 0.08;
32
+ }
33
+
34
+ & .#{$prefix}icon {
35
+ --#{$prefix}icon-font-size: 16px;
36
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
37
+ }
38
+
39
+ &--selected {
40
+ --#{$prefix}list-item-color: var(--#{$prefix}primary-color);
41
+ }
42
+
43
+ &--selected > .#{$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
+ }
49
+ }
50
+
51
+ &-subheader {
52
+ --#{$prefix}list-subheader-height: 40px;
53
+ --#{$prefix}list-subheader-padding-y: 0;
54
+ --#{$prefix}list-subheader-padding-x: 1rem;
55
+ --#{$prefix}list-subheader-padding-level: 2rem;
56
+ --#{$prefix}list-subheader-font-size: 12px;
57
+ --#{$prefix}list-subheader-font-weight: 700;
58
+ --#{$prefix}list-subheader-border-radius: 0;
59
+ --#{$prefix}list-subheader-gap: 1rem;
60
+ --#{$prefix}list-subheader-border-width: 1px;
61
+ --#{$prefix}list-subheader-border-color: #dee2e6;
62
+ }
63
+
64
+ &-group > &-item--selected > .#{$prefix}overlay {
65
+ --#{$prefix}overlay-opacity: 0;
66
+ --#{$prefix}_hover-overlay-opacity: 0;
67
+ --#{$prefix}_active-overlay-opacity: 0;
68
+ }
69
+ }
70
+ }
@@ -0,0 +1,63 @@
1
+ @use '../../../variables' as *;
2
+
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
+
10
+ &-item {
11
+ --#{$prefix}menu-item-height: 40px;
12
+ --#{$prefix}menu-item-padding-y: 0;
13
+ --#{$prefix}menu-item-padding-x: 1rem;
14
+ --#{$prefix}menu-item-padding-level: 2rem;
15
+ --#{$prefix}menu-item-font-size: 12px;
16
+ --#{$prefix}menu-item-font-weight: 500;
17
+ --#{$prefix}menu-item-border-radius: 0;
18
+ --#{$prefix}menu-item-gap: 1rem;
19
+
20
+ & > .#{$prefix}overlay {
21
+ --#{$prefix}overlay-color: inherit;
22
+ --#{$prefix}overlay-opacity: 0;
23
+ --#{$prefix}_hover-overlay-color: inherit;
24
+ --#{$prefix}_hover-overlay-opacity: 0.08;
25
+ }
26
+
27
+ &__icon .#{$prefix}icon {
28
+ --#{$prefix}icon-font-size: 16px;
29
+ --#{$prefix}icon-color: var(--#{$prefix}primary-color);
30
+ }
31
+
32
+ &--selected {
33
+ --#{$prefix}menu-item-color: var(--#{$prefix}primary-color);
34
+ }
35
+
36
+ &--selected > .#{$prefix}overlay {
37
+ --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
38
+ --#{$prefix}overlay-opacity: 0.08;
39
+ --#{$prefix}_hover-overlay-opacity: 0.08;
40
+ --#{$prefix}_active-overlay-opacity: 0.08;
41
+ }
42
+ }
43
+
44
+ &-group {
45
+ --#{$prefix}menu-group-height: 40px;
46
+ --#{$prefix}menu-group-padding-y: 0;
47
+ --#{$prefix}menu-group-padding-x: 1rem;
48
+ --#{$prefix}menu-group-padding-level: 2rem;
49
+ --#{$prefix}menu-group-font-size: 12px;
50
+ --#{$prefix}menu-group-font-weight: 700;
51
+ --#{$prefix}menu-group-border-radius: 0;
52
+ --#{$prefix}menu-group-gap: 1rem;
53
+ --#{$prefix}menu-group-border-width: 1px;
54
+ --#{$prefix}menu-group-border-color: #dee2e6;
55
+ }
56
+
57
+ &-submenu > &-item--selected > .#{$prefix}overlay {
58
+ --#{$prefix}overlay-opacity: 0;
59
+ --#{$prefix}_hover-overlay-opacity: 0;
60
+ --#{$prefix}_active-overlay-opacity: 0;
61
+ }
62
+ }
63
+ }
@@ -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
- }