@unifiedsoftware/styles 1.0.8 → 1.0.10

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.
@@ -135,8 +135,35 @@
135
135
  --#{$prefix}button-color: var(--#{$prefix}danger-color);
136
136
  }
137
137
 
138
- // &--text {
139
- // }
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
+ }
140
167
 
141
168
  &--text#{&}--primary {
142
169
  --#{$prefix}button-color: var(--#{$prefix}primary-color);
@@ -0,0 +1,20 @@
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
+ }
@@ -8,5 +8,8 @@
8
8
 
9
9
  @use 'drawer';
10
10
 
11
+ @use 'list';
11
12
  @use 'menu';
12
13
  @use 'tabs';
14
+
15
+ @use 'card';
@@ -0,0 +1,62 @@
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
+ }