@oardi/css-utils 0.85.0 → 0.85.1
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.
- package/package.json +1 -1
- package/scss/utilities.scss +30 -20
package/package.json
CHANGED
package/scss/utilities.scss
CHANGED
|
@@ -32,28 +32,9 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
32
32
|
width: 100%;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.bg-opacity-10 {
|
|
36
|
-
--bg-opacity: 0.1;
|
|
37
|
-
--bg-opacity-percentage: 10%;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.bg-opacity-25 {
|
|
41
|
-
--bg-opacity: 0.25;
|
|
42
|
-
--bg-opacity-percentage: 25%;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.bg-opacity-50 {
|
|
46
|
-
--bg-opacity: 0.5;
|
|
47
|
-
--bg-opacity-percentage: 50%;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.bg-opacity-75 {
|
|
51
|
-
--bg-opacity: 0.75;
|
|
52
|
-
--bg-opacity-percentage: 75%;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
35
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
56
36
|
.bg-#{$name} {
|
|
37
|
+
--bg-opacity: 1;
|
|
57
38
|
--bg-opacity-backdrop: var(--#{$name});
|
|
58
39
|
|
|
59
40
|
color: contrast-color(var(--#{$name}));
|
|
@@ -75,6 +56,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
75
56
|
}
|
|
76
57
|
|
|
77
58
|
.bg-white {
|
|
59
|
+
--bg-opacity: 1;
|
|
78
60
|
--bg-opacity-backdrop: var(--white);
|
|
79
61
|
|
|
80
62
|
color: contrast-color(var(--white));
|
|
@@ -83,6 +65,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
83
65
|
}
|
|
84
66
|
|
|
85
67
|
.bg-black {
|
|
68
|
+
--bg-opacity: 1;
|
|
86
69
|
--bg-opacity-backdrop: var(--black);
|
|
87
70
|
|
|
88
71
|
color: contrast-color(var(--black));
|
|
@@ -92,6 +75,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
92
75
|
|
|
93
76
|
@each $name, $value in map.get(theme.$theme, grays) {
|
|
94
77
|
.bg-gray-#{$name} {
|
|
78
|
+
--bg-opacity: 1;
|
|
95
79
|
--bg-opacity-backdrop: var(--gray-#{$name});
|
|
96
80
|
|
|
97
81
|
color: contrast-color(var(--gray-#{$name}));
|
|
@@ -101,6 +85,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
101
85
|
}
|
|
102
86
|
|
|
103
87
|
.bg-body {
|
|
88
|
+
--bg-opacity: 1;
|
|
104
89
|
--bg-opacity-backdrop: var(--bg-body);
|
|
105
90
|
|
|
106
91
|
color: contrast-color(var(--bg-body));
|
|
@@ -109,6 +94,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
109
94
|
}
|
|
110
95
|
|
|
111
96
|
.bg-surface {
|
|
97
|
+
--bg-opacity: 1;
|
|
112
98
|
--bg-opacity-backdrop: var(--bg-surface);
|
|
113
99
|
|
|
114
100
|
color: contrast-color(var(--bg-surface));
|
|
@@ -117,6 +103,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
117
103
|
}
|
|
118
104
|
|
|
119
105
|
.bg-inverse {
|
|
106
|
+
--bg-opacity: 1;
|
|
120
107
|
--bg-opacity-backdrop: var(--bg-inverse);
|
|
121
108
|
|
|
122
109
|
color: contrast-color(var(--bg-inverse));
|
|
@@ -125,6 +112,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
125
112
|
}
|
|
126
113
|
|
|
127
114
|
.bg-surface-hover {
|
|
115
|
+
--bg-opacity: 1;
|
|
128
116
|
--bg-opacity-backdrop: var(--bg-surface-hover);
|
|
129
117
|
|
|
130
118
|
color: contrast-color(var(--bg-surface-hover));
|
|
@@ -133,6 +121,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
133
121
|
}
|
|
134
122
|
|
|
135
123
|
.bg-highlight {
|
|
124
|
+
--bg-opacity: 1;
|
|
136
125
|
--bg-opacity-backdrop: var(--bg-highlight);
|
|
137
126
|
|
|
138
127
|
color: contrast-color(var(--bg-highlight));
|
|
@@ -141,6 +130,7 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
141
130
|
}
|
|
142
131
|
|
|
143
132
|
.bg-active {
|
|
133
|
+
--bg-opacity: 1;
|
|
144
134
|
--bg-opacity-backdrop: var(--bg-active);
|
|
145
135
|
|
|
146
136
|
color: contrast-color(var(--bg-active));
|
|
@@ -148,6 +138,26 @@ $-overflow-wrap-values: normal, break-word, anywhere;
|
|
|
148
138
|
background-color: var(--bg-active);
|
|
149
139
|
}
|
|
150
140
|
|
|
141
|
+
.bg-opacity-10 {
|
|
142
|
+
--bg-opacity: 0.1;
|
|
143
|
+
--bg-opacity-percentage: 10%;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.bg-opacity-25 {
|
|
147
|
+
--bg-opacity: 0.25;
|
|
148
|
+
--bg-opacity-percentage: 25%;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.bg-opacity-50 {
|
|
152
|
+
--bg-opacity: 0.5;
|
|
153
|
+
--bg-opacity-percentage: 50%;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.bg-opacity-75 {
|
|
157
|
+
--bg-opacity: 0.75;
|
|
158
|
+
--bg-opacity-percentage: 75%;
|
|
159
|
+
}
|
|
160
|
+
|
|
151
161
|
.img-responsive {
|
|
152
162
|
width: 100%;
|
|
153
163
|
height: auto;
|