@unifiedsoftware/styles 1.1.2 → 1.1.3

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 (23) hide show
  1. package/css/fci.css +8 -2
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +101 -323
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +117 -0
  7. package/scss/components/_badge.scss +0 -4
  8. package/scss/components/_button.scss +0 -5
  9. package/scss/components/_card.scss +0 -3
  10. package/scss/components/_checkbox.scss +8 -0
  11. package/scss/components/_chip.scss +4 -4
  12. package/scss/components/_input.scss +0 -5
  13. package/scss/components/_list.scss +0 -3
  14. package/scss/components/_menu.scss +0 -5
  15. package/scss/components/_radio.scss +8 -0
  16. package/scss/components/_swipe.scss +0 -1
  17. package/scss/components/_switch.scss +8 -1
  18. package/scss/components/_tabs.scss +0 -3
  19. package/scss/components/_toolbar.scss +0 -5
  20. package/scss/mixins/_outline.scss +53 -53
  21. package/scss/mixins/_overlay.scss +58 -41
  22. package/scss/themes/fci/components/_button.scss +8 -0
  23. package/scss/themes/fci/components/_input.scss +0 -2
package/scss/mixins/_outline.scss CHANGED
@@ -1,63 +1,63 @@
1
1
  @use '../variables' as *;
2
2
 
3
3
  @mixin outline {
4
- & > .#{$prefix}outline {
5
- position: absolute;
6
- inset: 0px;
7
- border-radius: inherit;
8
- overflow: hidden;
9
- border-width: var(--#{$prefix}outline-border-width);
10
- border-style: solid;
11
- border-color: var(--#{$prefix}outline-border-color);
12
- opacity: var(--#{$prefix}outline-opacity);
13
- pointer-events: none;
14
- }
4
+ // & > .#{$prefix}outline {
5
+ // position: absolute;
6
+ // inset: 0px;
7
+ // border-radius: inherit;
8
+ // overflow: hidden;
9
+ // border-width: var(--#{$prefix}outline-border-width);
10
+ // border-style: solid;
11
+ // border-color: var(--#{$prefix}outline-border-color);
12
+ // opacity: var(--#{$prefix}outline-opacity);
13
+ // pointer-events: none;
14
+ // }
15
15
 
16
- &:hover > .#{$prefix}outline {
17
- border-width: var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width));
18
- border-color: var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color));
19
- opacity: var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity));
20
- }
16
+ // &:hover > .#{$prefix}outline {
17
+ // border-width: var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width));
18
+ // border-color: var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color));
19
+ // opacity: var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity));
20
+ // }
21
21
 
22
- &:active > .#{$prefix}outline {
23
- border-width: var(
24
- --#{$prefix}outline-active-border-width,
25
- var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
26
- );
27
- border-color: var(
28
- --#{$prefix}outline-active-border-color,
29
- var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
30
- );
31
- opacity: var(
32
- --#{$prefix}outline-active-opacity,
33
- var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
34
- );
35
- }
22
+ // &:active > .#{$prefix}outline {
23
+ // border-width: var(
24
+ // --#{$prefix}outline-active-border-width,
25
+ // var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
26
+ // );
27
+ // border-color: var(
28
+ // --#{$prefix}outline-active-border-color,
29
+ // var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
30
+ // );
31
+ // opacity: var(
32
+ // --#{$prefix}outline-active-opacity,
33
+ // var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
34
+ // );
35
+ // }
36
36
 
37
- &--focus > .#{$prefix}outline,
38
- &--focus:hover > .#{$prefix}outline,
39
- &:focus > .#{$prefix}outline {
40
- border-width: var(
41
- --#{$prefix}outline-focus-border-width,
42
- var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
43
- );
44
- border-color: var(
45
- --#{$prefix}outline-focus-border-color,
46
- var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
47
- );
48
- opacity: var(
49
- --#{$prefix}outline-focus-opacity,
50
- var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
51
- );
52
- }
37
+ // &--focus > .#{$prefix}outline,
38
+ // &--focus:hover > .#{$prefix}outline,
39
+ // &:focus > .#{$prefix}outline {
40
+ // border-width: var(
41
+ // --#{$prefix}outline-focus-border-width,
42
+ // var(--#{$prefix}outline-hover-border-width, var(--#{$prefix}outline-border-width))
43
+ // );
44
+ // border-color: var(
45
+ // --#{$prefix}outline-focus-border-color,
46
+ // var(--#{$prefix}outline-hover-border-color, var(--#{$prefix}outline-border-color))
47
+ // );
48
+ // opacity: var(
49
+ // --#{$prefix}outline-focus-opacity,
50
+ // var(--#{$prefix}outline-hover-opacity, var(--#{$prefix}outline-opacity))
51
+ // );
52
+ // }
53
53
  }
54
54
 
55
55
  @mixin outline-b {
56
- & > .#{$prefix}outline-b {
57
- position: absolute;
58
- inset: 0px;
59
- border-radius: inherit;
60
- overflow: hidden;
61
- border-bottom: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
62
- }
56
+ // & > .#{$prefix}outline-b {
57
+ // position: absolute;
58
+ // inset: 0px;
59
+ // border-radius: inherit;
60
+ // overflow: hidden;
61
+ // border-bottom: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
62
+ // }
63
63
  }
package/scss/mixins/_overlay.scss CHANGED
@@ -1,50 +1,67 @@
1
1
  @use '../variables' as *;
2
2
 
3
3
  @mixin overlay() {
4
- & > .#{$prefix}overlay {
5
- position: absolute;
6
- inset: 0px;
7
- border-radius: inherit;
8
- overflow: hidden;
9
- color: var(--#{$prefix}overlay-color);
10
- opacity: var(--#{$prefix}overlay-opacity);
11
- z-index: -1;
12
- pointer-events: none;
13
- background-color: currentColor;
14
- transition:
15
- background-color,
16
- opacity,
17
- 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
18
- }
4
+ // & > .#{$prefix}overlay {
5
+ // position: absolute;
6
+ // inset: 0px;
7
+ // border-radius: inherit;
8
+ // overflow: hidden;
9
+ // color: var(--#{$prefix}overlay-color);
10
+ // opacity: var(--#{$prefix}overlay-opacity);
11
+ // z-index: -1;
12
+ // pointer-events: none;
13
+ // background-color: currentColor;
14
+ // transition:
15
+ // background-color,
16
+ // opacity,
17
+ // 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
18
+ // }
19
19
 
20
- &:hover > .#{$prefix}overlay {
21
- color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
22
- opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
23
- }
20
+ // &:hover > .#{$prefix}overlay {
21
+ // color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
22
+ // opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
23
+ // }
24
24
 
25
- &:active > .#{$prefix}overlay {
26
- color: var(
27
- --#{$prefix}_active-overlay-color,
28
- var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
29
- );
30
- opacity: var(
31
- --#{$prefix}_active-overlay-opacity,
32
- var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
33
- );
34
- }
25
+ // &:active > .#{$prefix}overlay {
26
+ // color: var(
27
+ // --#{$prefix}_active-overlay-color,
28
+ // var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
29
+ // );
30
+ // opacity: var(
31
+ // --#{$prefix}_active-overlay-opacity,
32
+ // var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
33
+ // );
34
+ // }
35
35
 
36
- &--focus > .#{$prefix}overlay,
37
- &--focus:hover > .#{$prefix}overlay,
38
- &:focus > .#{$prefix}overlay {
39
- color: var(
40
- --#{$prefix}_focus-overlay-color,
41
- var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
42
- );
43
- opacity: var(
44
- --#{$prefix}_focus-overlay-opacity,
45
- var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
46
- );
47
- }
36
+ // &--focus > .#{$prefix}overlay,
37
+ // &:focus > .#{$prefix}overlay {
38
+ // color: var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color));
39
+ // opacity: var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity));
40
+ // }
41
+
42
+ // &--focus:hover > .#{$prefix}overlay,
43
+ // &:focus:hover > .#{$prefix}overlay {
44
+ // color: var(
45
+ // --#{$prefix}_focus-hover-overlay-color,
46
+ // var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
47
+ // );
48
+ // opacity: var(
49
+ // --#{$prefix}_focus-hover-overlay-opacity,
50
+ // var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
51
+ // );
52
+ // }
53
+
54
+ // &--focus:active > .#{$prefix}overlay,
55
+ // &:focus:active > .#{$prefix}overlay {
56
+ // color: var(
57
+ // --#{$prefix}_focus-active-overlay-color,
58
+ // var(--#{$prefix}_focus-overlay-color, var(--#{$prefix}overlay-color))
59
+ // );
60
+ // opacity: var(
61
+ // --#{$prefix}_focus-active-overlay-opacity,
62
+ // var(--#{$prefix}_focus-overlay-opacity, var(--#{$prefix}overlay-opacity))
63
+ // );
64
+ // }
48
65
  }
49
66
 
50
67
  @mixin outline-styles(
package/scss/themes/fci/components/_button.scss CHANGED
@@ -93,6 +93,8 @@ $colors-map: (
93
93
  --#{$prefix}overlay-opacity: 0;
94
94
  --#{$prefix}_hover-overlay-opacity: 0.12;
95
95
  --#{$prefix}_active-overlay-opacity: 0.24;
96
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
97
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
96
98
  }
97
99
 
98
100
  & > .#{$prefix}outline {
@@ -111,6 +113,8 @@ $colors-map: (
111
113
  --#{$prefix}overlay-opacity: 0;
112
114
  --#{$prefix}_hover-overlay-opacity: 0.12;
113
115
  --#{$prefix}_active-overlay-opacity: 0.24;
116
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
117
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
114
118
  }
115
119
 
116
120
  & > .#{$prefix}outline {
@@ -125,6 +129,8 @@ $colors-map: (
125
129
  --#{$prefix}overlay-opacity: 0.08;
126
130
  --#{$prefix}_hover-overlay-opacity: 0.12;
127
131
  --#{$prefix}_active-overlay-opacity: 0.24;
132
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
133
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
128
134
  }
129
135
 
130
136
  & > .#{$prefix}outline {
@@ -139,6 +145,8 @@ $colors-map: (
139
145
  --#{$prefix}overlay-opacity: 0;
140
146
  --#{$prefix}_hover-overlay-opacity: 0.12;
141
147
  --#{$prefix}_active-overlay-opacity: 0.24;
148
+ --#{$prefix}_focus-hover-overlay-opacity: 0.12;
149
+ --#{$prefix}_focus-active-overlay-opacity: 0.24;
142
150
  }
143
151
 
144
152
  & > .#{$prefix}outline {
package/scss/themes/fci/components/_input.scss CHANGED
@@ -149,7 +149,6 @@
149
149
  --#{$prefix}overlay-color: inherit;
150
150
  --#{$prefix}overlay-opacity: 0.08;
151
151
  --#{$prefix}_hover-overlay-opacity: 0.12;
152
- --#{$prefix}_active-overlay-opacity: 0.24;
153
152
  }
154
153
 
155
154
  & > .#{$prefix}outline {
@@ -167,7 +166,6 @@
167
166
  --#{$prefix}overlay-color: #fff;
168
167
  --#{$prefix}overlay-opacity: 0.12;
169
168
  --#{$prefix}_hover-overlay-opacity: 0.16;
170
- --#{$prefix}_active-overlay-opacity: 0.24;
171
169
  }
172
170
 
173
171
  & > .#{$prefix}outline {