@unifiedsoftware/styles 1.0.10 → 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 (41) hide show
  1. package/css/{theme-default.css → fci.css} +213 -168
  2. package/css/fci.min.css +1 -0
  3. package/css/styles.css +259 -12
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +18 -0
  7. package/scss/components/_button.scss +1 -0
  8. package/scss/components/_index.scss +4 -0
  9. package/scss/components/_input.scss +78 -0
  10. package/scss/components/_list.scss +15 -0
  11. package/scss/components/_popover.scss +55 -0
  12. package/scss/components/_scroll-area.scss +28 -10
  13. package/scss/components/_switch.scss +39 -0
  14. package/scss/mixins/_outline.scss +42 -1
  15. package/scss/themes/{default → fci}/_tokens.scss +1 -1
  16. package/scss/themes/fci/components/_badge.scss +24 -0
  17. package/scss/themes/fci/components/_button.scss +156 -0
  18. package/scss/themes/fci/components/_card.scss +21 -0
  19. package/scss/themes/fci/components/_chip.scss +127 -0
  20. package/scss/themes/fci/components/_drawer.scss +8 -0
  21. package/scss/themes/fci/components/_icon.scss +8 -0
  22. package/scss/themes/{default → fci}/components/_index.scss +3 -0
  23. package/scss/themes/fci/components/_input.scss +25 -0
  24. package/scss/themes/fci/components/_list.scss +70 -0
  25. package/scss/themes/fci/components/_menu.scss +63 -0
  26. package/scss/themes/fci/components/_switch.scss +19 -0
  27. package/scss/themes/fci/components/_tabs.scss +24 -0
  28. package/scss/themes/fci/components/_toolbar.scss +29 -0
  29. package/scss/themes/{default-kendo.scss → kendo-fci/_index.scss} +1 -1
  30. package/css/theme-default.min.css +0 -1
  31. package/scss/themes/default/components/_badge.scss +0 -21
  32. package/scss/themes/default/components/_button.scss +0 -191
  33. package/scss/themes/default/components/_card.scss +0 -20
  34. package/scss/themes/default/components/_chip.scss +0 -165
  35. package/scss/themes/default/components/_drawer.scss +0 -6
  36. package/scss/themes/default/components/_icon.scss +0 -6
  37. package/scss/themes/default/components/_list.scss +0 -62
  38. package/scss/themes/default/components/_menu.scss +0 -61
  39. package/scss/themes/default/components/_tabs.scss +0 -21
  40. package/scss/themes/default/components/_toolbar.scss +0 -27
  41. /package/scss/themes/{default → fci}/_index.scss +0 -0
@@ -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-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>.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
- }
@@ -1,191 +0,0 @@
1
- @use '../../../variables' as *;
2
- @use '../../../mixins/button' as *;
3
-
4
- .#{$prefix}button {
5
- --#{$prefix}button-font-weight: 500;
6
- --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
7
-
8
- /* Overlay */
9
- --#{$prefix}overlay-color: inherit;
10
- --#{$prefix}overlay-opacity: 0;
11
- --#{$prefix}_hover-overlay-opacity: 0;
12
- --#{$prefix}_hover-overlay-opacity: 0.12;
13
- --#{$prefix}_active-overlay-opacity: 0.24;
14
-
15
- /* Outline */
16
- --#{$prefix}outline-border-width: 1px;
17
- --#{$prefix}outline-border-color: transparent;
18
-
19
- @include button-size(
20
- $name: 'xs',
21
- $height: 20px,
22
- $padding-y: 0,
23
- $padding-x: 0.5rem,
24
- $font-size: 0.625rem,
25
- $border-radius: 4px,
26
- $gap: 0.25rem,
27
- $icon-font-size: 0.75rem
28
- );
29
-
30
- @include button-size(
31
- $name: 'sm',
32
- $height: 28px,
33
- $padding-y: 0,
34
- $padding-x: 0.75rem,
35
- $font-size: 0.75rem,
36
- $border-radius: 4px,
37
- $gap: 0.375rem,
38
- $icon-font-size: 1rem
39
- );
40
-
41
- @include button-size(
42
- $name: 'md',
43
- $height: 36px,
44
- $padding-y: 0,
45
- $padding-x: 1rem,
46
- $font-size: 0.875rem,
47
- $border-radius: 4px,
48
- $gap: 0.5rem,
49
- $icon-font-size: 1.125rem
50
- );
51
-
52
- @include button-size(
53
- $name: 'lg',
54
- $height: 44px,
55
- $padding-y: 0,
56
- $padding-x: 1.25rem,
57
- $font-size: 1rem,
58
- $border-radius: 4px,
59
- $gap: 0.625rem,
60
- $icon-font-size: 1.25rem
61
- );
62
-
63
- @include button-size(
64
- $name: 'xl',
65
- $height: 52px,
66
- $padding-y: 0,
67
- $padding-x: 1.5rem,
68
- $font-size: 1rem,
69
- $border-radius: 4px,
70
- $gap: 0.75rem,
71
- $icon-font-size: 1.5rem
72
- );
73
-
74
- &--filled {
75
- --#{$prefix}button-border-width: 1px;
76
- --#{$prefix}button-border-color: transparent;
77
- --#{$prefix}button-color: var(--#{$prefix}white-color);
78
-
79
- .#{$prefix}chip {
80
- --#{$prefix}chip-background: var(--#{$prefix}white-color);
81
- }
82
- }
83
-
84
- &--filled#{&}--primary {
85
- --#{$prefix}button-background: var(--#{$prefix}primary-color);
86
- }
87
-
88
- &--filled#{&}--secondary {
89
- --#{$prefix}button-color: var(--#{$prefix}black-color);
90
- --#{$prefix}button-background: var(--#{$prefix}secondary-color);
91
- }
92
-
93
- &--filled#{&}--success {
94
- --#{$prefix}button-background: var(--#{$prefix}success-color);
95
- }
96
-
97
- &--filled#{&}--info {
98
- --#{$prefix}button-background: var(--#{$prefix}info-color);
99
- }
100
-
101
- &--filled#{&}--warning {
102
- --#{$prefix}button-background: var(--#{$prefix}warning-color);
103
- }
104
-
105
- &--filled#{&}--danger {
106
- --#{$prefix}button-background: var(--#{$prefix}danger-color);
107
- }
108
-
109
- &--outlined {
110
- /* Outline */
111
- --#{$prefix}outline-border-color: currentColor;
112
- }
113
-
114
- &--outlined#{&}--primary {
115
- --#{$prefix}button-color: var(--#{$prefix}primary-color);
116
- }
117
-
118
- &--outlined#{&}--secondary {
119
- --#{$prefix}button-color: var(--#{$prefix}black-color);
120
- }
121
-
122
- &--outlined#{&}--success {
123
- --#{$prefix}button-color: var(--#{$prefix}success-color);
124
- }
125
-
126
- &--outlined#{&}--info {
127
- --#{$prefix}button-color: var(--#{$prefix}info-color);
128
- }
129
-
130
- &--outlined#{&}--warning {
131
- --#{$prefix}button-color: var(--#{$prefix}warning-color);
132
- }
133
-
134
- &--outlined#{&}--danger {
135
- --#{$prefix}button-color: var(--#{$prefix}danger-color);
136
- }
137
-
138
- &--flat {
139
- --#{$prefix}overlay-opacity: 0.08;
140
- --#{$prefix}_hover-overlay-opacity: 0.12;
141
- --#{$prefix}_active-overlay-opacity: 0.24;
142
- }
143
-
144
- &--flat#{&}--primary {
145
- --#{$prefix}button-color: var(--#{$prefix}primary-color);
146
- }
147
-
148
- &--flat#{&}--secondary {
149
- --#{$prefix}button-color: var(--#{$prefix}black-color);
150
- }
151
-
152
- &--flat#{&}--success {
153
- --#{$prefix}button-color: var(--#{$prefix}success-color);
154
- }
155
-
156
- &--flat#{&}--info {
157
- --#{$prefix}button-color: var(--#{$prefix}info-color);
158
- }
159
-
160
- &--flat#{&}--warning {
161
- --#{$prefix}button-color: var(--#{$prefix}warning-color);
162
- }
163
-
164
- &--flat#{&}--danger {
165
- --#{$prefix}button-color: var(--#{$prefix}danger-color);
166
- }
167
-
168
- &--text#{&}--primary {
169
- --#{$prefix}button-color: var(--#{$prefix}primary-color);
170
- }
171
-
172
- &--text#{&}--secondary {
173
- --#{$prefix}button-color: var(--#{$prefix}black-color);
174
- }
175
-
176
- &--text#{&}--success {
177
- --#{$prefix}button-color: var(--#{$prefix}success-color);
178
- }
179
-
180
- &--text#{&}--info {
181
- --#{$prefix}button-color: var(--#{$prefix}info-color);
182
- }
183
-
184
- &--text#{&}--warning {
185
- --#{$prefix}button-color: var(--#{$prefix}warning-color);
186
- }
187
-
188
- &--text#{&}--danger {
189
- --#{$prefix}button-color: var(--#{$prefix}danger-color);
190
- }
191
- }
@@ -1,20 +0,0 @@
1
- @use '../../../variables' as *;
2
-
3
- .#{$prefix}card {
4
- --#{$prefix}card-border-width: 1px;
5
- --#{$prefix}card-border-style: solid;
6
- --#{$prefix}card-border-color: rgba(9, 30, 66, 0.14);
7
- --#{$prefix}card-border-radius: 8px;
8
-
9
- &-header {
10
- --#{$prefix}card-header-padding-y: 1rem;
11
- --#{$prefix}card-header-padding-x: 1rem;
12
- --#{$prefix}card-header-gap: 1rem;
13
-
14
- &__title {
15
- --#{$prefix}card-header-title-font-size: 0.75rem;
16
- --#{$prefix}card-header-title-font-weight: 600;
17
- --#{$prefix}card-header-title-line-height: 24px;
18
- }
19
- }
20
- }
@@ -1,165 +0,0 @@
1
- @use '../../../variables' as *;
2
- @use '../../../mixins/chip' as *;
3
- @use '../../../mixins/overlay' as *;
4
-
5
- .#{$prefix}chip {
6
- --#{$prefix}chip-padding-y: 0.125rem;
7
- --#{$prefix}chip-padding-x: 0.5rem;
8
- --#{$prefix}chip-font-size: 0.75rem;
9
- --#{$prefix}chip-font-weight: 700;
10
- --#{$prefix}chip-border-radius: 9999px;
11
- --#{$prefix}chip-color: var(--#{$prefix}primary-color);
12
- --#{$prefix}chip-background: transparent;
13
-
14
- /* Overlay */
15
- --#{$prefix}overlay-color: inherit;
16
- --#{$prefix}overlay-opacity: 0;
17
-
18
- @include outline-styles($color: inherit, $opacity: 0);
19
-
20
- /* Outline */
21
- --#{$prefix}outline-border-width: 1px;
22
- --#{$prefix}outline-border-color: transparent;
23
-
24
- @include chip-size(
25
- $name: 'xs',
26
- $height: 28px,
27
- $padding-y: 0,
28
- $padding-x: 0.5rem,
29
- $font-size: 0.75rem,
30
- $border-radius: 9999px,
31
- $gap: 0.375rem,
32
- $icon-font-size: 0.75rem
33
- );
34
-
35
- @include chip-size(
36
- $name: 'sm',
37
- $height: 32px,
38
- $padding-y: 0,
39
- $padding-x: 0.75rem,
40
- $font-size: 14px,
41
- $border-radius: 9999px,
42
- $gap: 0.375rem,
43
- $icon-font-size: 0.875rem
44
- );
45
-
46
- @include chip-size(
47
- $name: 'md',
48
- $height: 40px,
49
- $padding-y: 0,
50
- $padding-x: 1rem,
51
- $font-size: 14px,
52
- $border-radius: 9999px,
53
- $gap: 0.5rem,
54
- $icon-font-size: 1rem
55
- );
56
-
57
- @include chip-size(
58
- $name: 'lg',
59
- $height: 48px,
60
- $padding-y: 0,
61
- $padding-x: 1.5rem,
62
- $font-size: 1rem,
63
- $border-radius: 9999px,
64
- $gap: 0.5rem,
65
- $icon-font-size: 1.125rem
66
- );
67
-
68
- @include chip-size(
69
- $name: 'xl',
70
- $height: 48px,
71
- $padding-y: 0,
72
- $padding-x: 1.5rem,
73
- $font-size: 1rem,
74
- $border-radius: 9999px,
75
- $gap: 0.5rem,
76
- $icon-font-size: 1.25rem
77
- );
78
-
79
- &--filled {
80
- --#{$prefix}chip-border-width: 1px;
81
- --#{$prefix}chip-border-color: transparent;
82
- --#{$prefix}chip-color: var(--#{$prefix}white-color);
83
- }
84
-
85
- &--filled#{&}--primary {
86
- --#{$prefix}chip-background: var(--#{$prefix}primary-color);
87
- }
88
-
89
- &--filled#{&}--secondary {
90
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
91
- --#{$prefix}chip-background: var(--#{$prefix}secondary-color);
92
- }
93
-
94
- &--filled#{&}--success {
95
- --#{$prefix}chip-background: var(--#{$prefix}success-color);
96
- }
97
-
98
- &--filled#{&}--info {
99
- --#{$prefix}chip-background: var(--#{$prefix}info-color);
100
- }
101
-
102
- &--filled#{&}--warning {
103
- --#{$prefix}chip-background: var(--#{$prefix}warning-color);
104
- }
105
-
106
- &--filled#{&}--danger {
107
- --#{$prefix}chip-background: var(--#{$prefix}danger-color);
108
- }
109
-
110
- &--outlined {
111
- /* Outline */
112
- --#{$prefix}outline-border-color: currentColor;
113
- }
114
-
115
- &--outlined#{&}--primary {
116
- --#{$prefix}chip-color: var(--#{$prefix}primary-color);
117
- }
118
-
119
- &--outlined#{&}--secondary {
120
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
121
- }
122
-
123
- &--outlined#{&}--success {
124
- --#{$prefix}chip-color: var(--#{$prefix}success-color);
125
- }
126
-
127
- &--outlined#{&}--info {
128
- --#{$prefix}chip-color: var(--#{$prefix}info-color);
129
- }
130
-
131
- &--outlined#{&}--warning {
132
- --#{$prefix}chip-color: var(--#{$prefix}warning-color);
133
- }
134
-
135
- &--outlined#{&}--danger {
136
- --#{$prefix}chip-color: var(--#{$prefix}danger-color);
137
- }
138
-
139
- // &--text {
140
- // }
141
-
142
- &--text#{&}--primary {
143
- --#{$prefix}chip-color: var(--#{$prefix}primary-color);
144
- }
145
-
146
- &--text#{&}--secondary {
147
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
148
- }
149
-
150
- &--text#{&}--success {
151
- --#{$prefix}button-color: var(--#{$prefix}success-color);
152
- }
153
-
154
- &--text#{&}--info {
155
- --#{$prefix}chip-color: var(--#{$prefix}info-color);
156
- }
157
-
158
- &--text#{&}--warning {
159
- --#{$prefix}chip-color: var(--#{$prefix}warning-color);
160
- }
161
-
162
- &--text#{&}--danger {
163
- --#{$prefix}chip-color: var(--#{$prefix}danger-color);
164
- }
165
- }
@@ -1,6 +0,0 @@
1
- @use '../../../variables' as *;
2
-
3
- .#{$prefix}drawer {
4
- --#{$prefix}drawer-width: 256px;
5
- --#{$prefix}drawer-background: #fff;
6
- }
@@ -1,6 +0,0 @@
1
- @use '../../../variables' as *;
2
-
3
- .#{$prefix}icon {
4
- --#{$prefix}icon-font-size: 1.5rem;
5
- --#{$prefix}icon-color: inherit;
6
- }
@@ -1,62 +0,0 @@
1
- @use '../../../variables' as *;
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;
8
-
9
- &-item {
10
- --#{$prefix}list-item-height: 40px;
11
- --#{$prefix}list-item-padding-y: 0;
12
- --#{$prefix}list-item-padding-x: 1rem;
13
- --#{$prefix}list-item-padding-level: 1.25rem;
14
- --#{$prefix}list-item-font-size: 12px;
15
- --#{$prefix}list-item-font-weight: 500;
16
- --#{$prefix}list-item-border-radius: 0;
17
- --#{$prefix}list-item-gap: 1rem;
18
-
19
- & > .#{$prefix}overlay {
20
- --#{$prefix}overlay-color: inherit;
21
- --#{$prefix}overlay-opacity: 0;
22
- --#{$prefix}_hover-overlay-color: inherit;
23
- --#{$prefix}_hover-overlay-opacity: 0.04;
24
- --#{$prefix}_active-overlay-opacity: 0.08;
25
- }
26
-
27
- & .#{$prefix}icon {
28
- --#{$prefix}icon-font-size: 16px;
29
- --#{$prefix}icon-color: var(--#{$prefix}primary-color);
30
- }
31
-
32
- &--selected {
33
- --#{$prefix}list-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.12;
40
- --#{$prefix}_active-overlay-opacity: 0.16;
41
- }
42
- }
43
-
44
- &-subheader {
45
- --#{$prefix}list-subheader-height: 40px;
46
- --#{$prefix}list-subheader-padding-y: 0;
47
- --#{$prefix}list-subheader-padding-x: 1rem;
48
- --#{$prefix}list-subheader-padding-level: 2rem;
49
- --#{$prefix}list-subheader-font-size: 12px;
50
- --#{$prefix}list-subheader-font-weight: 700;
51
- --#{$prefix}list-subheader-border-radius: 0;
52
- --#{$prefix}list-subheader-gap: 1rem;
53
- --#{$prefix}list-subheader-border-width: 1px;
54
- --#{$prefix}list-subheader-border-color: #dee2e6;
55
- }
56
-
57
- &-group > &-item--selected > .#{$prefix}overlay {
58
- --#{$prefix}overlay-opacity: 0;
59
- --#{$prefix}_hover-overlay-opacity: 0;
60
- --#{$prefix}_active-overlay-opacity: 0;
61
- }
62
- }