@bi-digital/css 0.2.23 → 0.3.0

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 (10) hide show
  1. package/dist/components/alert.css +1 -1
  2. package/dist/components/chip.css +1 -1
  3. package/dist/components/filter-group.css +1 -1
  4. package/dist/components/icons.css +45 -0
  5. package/dist/components/input.css +8 -14
  6. package/dist/components/validation-message.css +4 -4
  7. package/dist/components.css +61 -21
  8. package/package.json +5 -4
  9. package/dist/assets/icons/bi-cart.svg +0 -3
  10. package/dist/icons.css +0 -58
package/dist/components/alert.css CHANGED
@@ -29,7 +29,7 @@
29
29
  position: relative;
30
30
  }
31
31
 
32
- .bi-alert > [data-bi-icon="true"] {
32
+ .bi-alert > svg {
33
33
  font-size: var(--bic-alert-icon-size);
34
34
  }
35
35
 
package/dist/components/chip.css CHANGED
@@ -183,7 +183,7 @@
183
183
  --bic-chip-text-color: var(--bi-success-90);
184
184
  }
185
185
 
186
- .bi-chip > [data-bi-icon="true"] {
186
+ .bi-chip > svg {
187
187
  display: inherit;
188
188
  font-size: var(--bic-chip-icon-size);
189
189
  }
package/dist/components/filter-group.css CHANGED
@@ -56,7 +56,7 @@
56
56
  border-radius: var(--bi-radius-small);
57
57
  }
58
58
 
59
- .bi-filter-group > button > [data-bi-icon="true"] {
59
+ .bi-filter-group > button > svg {
60
60
  width: var(--bi-scale-6x);
61
61
  height: var(--bi-scale-6x);
62
62
  font-size: var(--bi-icon-medium);
package/dist/components/icons.css ADDED
@@ -0,0 +1,45 @@
1
+ svg {
2
+ --bic-icon-size: inherit;
3
+ font-size: var(--bic-icon-size);
4
+ display: inline-block;
5
+ }
6
+
7
+ svg[data-size="2xl"] {
8
+ --bic-icon-size: var(--bi-icon-2xl) !important;
9
+ }
10
+
11
+ svg[data-size="xl"] {
12
+ --bic-icon-size: var(--bi-icon-xl) !important;
13
+ }
14
+
15
+ svg[data-size="large"] {
16
+ --bic-icon-size: var(--bi-icon-large) !important;
17
+ }
18
+
19
+ svg[data-size="medium"] {
20
+ --bic-icon-size: var(--bi-icon-medium) !important;
21
+ }
22
+
23
+ svg[data-size="small"] {
24
+ --bic-icon-size: var(--bi-icon-small) !important;
25
+ }
26
+
27
+ svg[data-color="inherit"] {
28
+ color: inherit;
29
+ }
30
+
31
+ svg[data-color="primary"] {
32
+ color: #01417b;
33
+ }
34
+
35
+ svg[data-color="gray"] {
36
+ color: #1c1b1b;
37
+ }
38
+
39
+ svg[data-color="black"] {
40
+ color: var(--bi-basic-key);
41
+ }
42
+
43
+ svg[data-color="white"] {
44
+ color: var(--bi-basic-white);
45
+ }
package/dist/components/input.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --bic-input-color: var(--bi-neutral-95);
23
23
  --bic-input-disabled-color: var(--bi-neutral-50);
24
24
  --bic-input-placeholder-color: var(--bi-neutral-60);
25
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
25
26
  }
26
27
 
27
28
  .bi-input[data-dark="true"] {
@@ -32,6 +33,7 @@
32
33
  --bic-input-color: var(--bi-basic-white);
33
34
  --bic-input-disabled-color: var(--bi-neutral-40);
34
35
  --bic-input-placeholder-color: var(--bi-neutral-30);
36
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
35
37
  }
36
38
 
37
39
  .bi-input {
@@ -141,14 +143,10 @@
141
143
  }
142
144
 
143
145
  .bi-input:-webkit-any(select) {
144
- --_bic-select-diagonal-1: transparent calc(40%);
145
- --_bic-select-diagonal-2: currentcolor calc(40%);
146
- --_bic-select-diagonal-3: currentcolor calc(60%);
147
- --_bic-select-diagonal-4: transparent calc(60%);
148
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
149
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
146
+ background-image: var(--bic-input-select-chevron);
147
+ background-position: calc(100% - .5em);
150
148
  background-repeat: no-repeat;
151
- background-size: .4em .4em;
149
+ background-size: 1.5em;
152
150
  }
153
151
 
154
152
  .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
@@ -156,14 +154,10 @@
156
154
  }
157
155
 
158
156
  .bi-input:is(select) {
159
- --_bic-select-diagonal-1: transparent calc(40%);
160
- --_bic-select-diagonal-2: currentcolor calc(40%);
161
- --_bic-select-diagonal-3: currentcolor calc(60%);
162
- --_bic-select-diagonal-4: transparent calc(60%);
163
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
164
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
157
+ background-image: var(--bic-input-select-chevron);
158
+ background-position: calc(100% - .5em);
165
159
  background-repeat: no-repeat;
166
- background-size: .4em .4em;
160
+ background-size: 1.5em;
167
161
  }
168
162
 
169
163
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
package/dist/components/validation-message.css CHANGED
@@ -15,19 +15,19 @@
15
15
  position: relative;
16
16
  }
17
17
 
18
- .bi-validation-message:has( > [data-bi-icon="true"]):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
18
+ .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
19
19
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
20
20
  }
21
21
 
22
- .bi-validation-message:has( > [data-bi-icon="true"]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
22
+ .bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
23
23
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
24
24
  }
25
25
 
26
- .bi-validation-message:has( > [data-bi-icon="true"]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
26
+ .bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
27
27
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
28
28
  }
29
29
 
30
- .bi-validation-message > [data-bi-icon="true"] {
30
+ .bi-validation-message > svg {
31
31
  font-size: var(--bic-validation-message-icon-size);
32
32
  top: var(--bic-validation-message-padding);
33
33
  left: var(--bic-validation-message-padding);
package/dist/components.css CHANGED
@@ -29,7 +29,7 @@
29
29
  position: relative;
30
30
  }
31
31
 
32
- .bi-alert > [data-bi-icon="true"] {
32
+ .bi-alert > svg {
33
33
  font-size: var(--bic-alert-icon-size);
34
34
  }
35
35
 
@@ -1076,7 +1076,7 @@
1076
1076
  --bic-chip-text-color: var(--bi-success-90);
1077
1077
  }
1078
1078
 
1079
- .bi-chip > [data-bi-icon="true"] {
1079
+ .bi-chip > svg {
1080
1080
  display: inherit;
1081
1081
  font-size: var(--bic-chip-icon-size);
1082
1082
  }
@@ -1789,7 +1789,7 @@ body:has(.bi-dialog:modal) {
1789
1789
  border-radius: var(--bi-radius-small);
1790
1790
  }
1791
1791
 
1792
- .bi-filter-group > button > [data-bi-icon="true"] {
1792
+ .bi-filter-group > button > svg {
1793
1793
  width: var(--bi-scale-6x);
1794
1794
  height: var(--bi-scale-6x);
1795
1795
  font-size: var(--bi-icon-medium);
@@ -2004,6 +2004,52 @@ body:has(.bi-dialog:modal) {
2004
2004
  line-height: 1.5;
2005
2005
  }
2006
2006
 
2007
+ svg {
2008
+ --bic-icon-size: inherit;
2009
+ font-size: var(--bic-icon-size);
2010
+ display: inline-block;
2011
+ }
2012
+
2013
+ svg[data-size="2xl"] {
2014
+ --bic-icon-size: var(--bi-icon-2xl) !important;
2015
+ }
2016
+
2017
+ svg[data-size="xl"] {
2018
+ --bic-icon-size: var(--bi-icon-xl) !important;
2019
+ }
2020
+
2021
+ svg[data-size="large"] {
2022
+ --bic-icon-size: var(--bi-icon-large) !important;
2023
+ }
2024
+
2025
+ svg[data-size="medium"] {
2026
+ --bic-icon-size: var(--bi-icon-medium) !important;
2027
+ }
2028
+
2029
+ svg[data-size="small"] {
2030
+ --bic-icon-size: var(--bi-icon-small) !important;
2031
+ }
2032
+
2033
+ svg[data-color="inherit"] {
2034
+ color: inherit;
2035
+ }
2036
+
2037
+ svg[data-color="primary"] {
2038
+ color: #01417b;
2039
+ }
2040
+
2041
+ svg[data-color="gray"] {
2042
+ color: #1c1b1b;
2043
+ }
2044
+
2045
+ svg[data-color="black"] {
2046
+ color: var(--bi-basic-key);
2047
+ }
2048
+
2049
+ svg[data-color="white"] {
2050
+ color: var(--bi-basic-white);
2051
+ }
2052
+
2007
2053
  :where(.bi-input) {
2008
2054
  margin: 0;
2009
2055
  }
@@ -2028,6 +2074,7 @@ body:has(.bi-dialog:modal) {
2028
2074
  --bic-input-color: var(--bi-neutral-95);
2029
2075
  --bic-input-disabled-color: var(--bi-neutral-50);
2030
2076
  --bic-input-placeholder-color: var(--bi-neutral-60);
2077
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2031
2078
  }
2032
2079
 
2033
2080
  .bi-input[data-dark="true"] {
@@ -2038,6 +2085,7 @@ body:has(.bi-dialog:modal) {
2038
2085
  --bic-input-color: var(--bi-basic-white);
2039
2086
  --bic-input-disabled-color: var(--bi-neutral-40);
2040
2087
  --bic-input-placeholder-color: var(--bi-neutral-30);
2088
+ --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2041
2089
  }
2042
2090
 
2043
2091
  .bi-input {
@@ -2147,14 +2195,10 @@ body:has(.bi-dialog:modal) {
2147
2195
  }
2148
2196
 
2149
2197
  .bi-input:-webkit-any(select) {
2150
- --_bic-select-diagonal-1: transparent calc(40%);
2151
- --_bic-select-diagonal-2: currentcolor calc(40%);
2152
- --_bic-select-diagonal-3: currentcolor calc(60%);
2153
- --_bic-select-diagonal-4: transparent calc(60%);
2154
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
2155
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
2198
+ background-image: var(--bic-input-select-chevron);
2199
+ background-position: calc(100% - .5em);
2156
2200
  background-repeat: no-repeat;
2157
- background-size: .4em .4em;
2201
+ background-size: 1.5em;
2158
2202
  }
2159
2203
 
2160
2204
  .bi-input:is(select):not([readonly], [aria-disabled="true"], :disabled) {
@@ -2162,14 +2206,10 @@ body:has(.bi-dialog:modal) {
2162
2206
  }
2163
2207
 
2164
2208
  .bi-input:is(select) {
2165
- --_bic-select-diagonal-1: transparent calc(40%);
2166
- --_bic-select-diagonal-2: currentcolor calc(40%);
2167
- --_bic-select-diagonal-3: currentcolor calc(60%);
2168
- --_bic-select-diagonal-4: transparent calc(60%);
2169
- background-image: linear-gradient(35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4)), linear-gradient(-35deg, var(--_bic-select-diagonal-1), var(--_bic-select-diagonal-2), var(--_bic-select-diagonal-3), var(--_bic-select-diagonal-4));
2170
- background-position: calc(100% - 1.2em + var(--bi-stroke-thin)), calc(100% - .75em);
2209
+ background-image: var(--bic-input-select-chevron);
2210
+ background-position: calc(100% - .5em);
2171
2211
  background-repeat: no-repeat;
2172
- background-size: .4em .4em;
2212
+ background-size: 1.5em;
2173
2213
  }
2174
2214
 
2175
2215
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
@@ -2968,19 +3008,19 @@ body:has(.bi-dialog:modal) {
2968
3008
  position: relative;
2969
3009
  }
2970
3010
 
2971
- .bi-validation-message:has( > [data-bi-icon="true"]):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3011
+ .bi-validation-message:has( > svg):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2972
3012
  padding-left: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2973
3013
  }
2974
3014
 
2975
- .bi-validation-message:has( > [data-bi-icon="true"]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3015
+ .bi-validation-message:has( > svg):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2976
3016
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2977
3017
  }
2978
3018
 
2979
- .bi-validation-message:has( > [data-bi-icon="true"]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3019
+ .bi-validation-message:has( > svg):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
2980
3020
  padding-right: calc(var(--bic-validation-message-icon-size) + var(--bic-validation-message-padding) * 2);
2981
3021
  }
2982
3022
 
2983
- .bi-validation-message > [data-bi-icon="true"] {
3023
+ .bi-validation-message > svg {
2984
3024
  font-size: var(--bic-validation-message-icon-size);
2985
3025
  top: var(--bic-validation-message-padding);
2986
3026
  left: var(--bic-validation-message-padding);
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.23",
3
+ "version": "0.3.0",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
+ "homepage": "https://designsystem.bi.no/",
6
7
  "license": "ISC",
7
8
  "type": "module",
8
9
  "publishConfig": {
@@ -18,12 +19,12 @@
18
19
  "/dist"
19
20
  ],
20
21
  "devDependencies": {
21
- "browserslist": "^4.24.5",
22
- "glob": "^11.0.1",
22
+ "browserslist": "^4.25.2",
23
+ "glob": "^11.0.3",
23
24
  "lightningcss": "^1.30.1",
24
25
  "modern-normalize": "^3.0.1",
25
26
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.2.23"
27
+ "@bi-digital/tokens": "0.3.0"
27
28
  },
28
29
  "scripts": {
29
30
  "build": "rimraf dist && node config.js",
package/dist/assets/icons/bi-cart.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" viewBox="0 0 25 25">
2
- <path fill-rule="evenodd" d="M9.118 7.32a3.748 3.748 0 0 1 3.745-3.745 3.748 3.748 0 0 1 3.746 3.744h3.245v10.986a3.247 3.247 0 0 1-3.246 3.246h-7.49a3.247 3.247 0 0 1-3.245-3.246V7.319h3.245Zm0 1.5v2.994h1.5V8.819h4.491v2.995h1.5V8.819h1.745v9.486c0 .963-.782 1.746-1.746 1.746h-7.49a1.747 1.747 0 0 1-1.745-1.746V8.819h1.745Zm5.991-1.5h-4.491a2.248 2.248 0 0 1 2.245-2.245 2.248 2.248 0 0 1 2.246 2.244Z" clip-rule="evenodd"/>
3
- </svg>
package/dist/icons.css DELETED
@@ -1,58 +0,0 @@
1
- .bi-icon {
2
- width: 1em;
3
- height: 1em;
4
- font-size: inherit;
5
- background: currentColor;
6
- display: inline-block;
7
- -webkit-mask-position: center;
8
- mask-position: center;
9
- -webkit-mask-size: 100%;
10
- mask-size: 100%;
11
- -webkit-mask-repeat: no-repeat;
12
- mask-repeat: no-repeat;
13
- }
14
-
15
- .bi-icon[data-size="2xl"] {
16
- font-size: 3rem !important;
17
- }
18
-
19
- .bi-icon[data-size="xl"] {
20
- font-size: 2.5rem !important;
21
- }
22
-
23
- .bi-icon[data-size="large"] {
24
- font-size: 2rem !important;
25
- }
26
-
27
- .bi-icon[data-size="medium"] {
28
- font-size: 1.5rem !important;
29
- }
30
-
31
- .bi-icon[data-size="small"] {
32
- font-size: 1.25rem !important;
33
- }
34
-
35
- .bi-icon[data-color="inherit"] {
36
- color: inherit;
37
- }
38
-
39
- .bi-icon[data-color="primary"] {
40
- color: var(--bi-primary-50);
41
- }
42
-
43
- .bi-icon[data-color="gray"] {
44
- color: #1c1b1b;
45
- }
46
-
47
- .bi-icon[data-color="black"] {
48
- color: #000;
49
- }
50
-
51
- .bi-icon[data-color="white"] {
52
- color: #fff;
53
- }
54
-
55
- .bi-icon.bi-icon-cart {
56
- -webkit-mask-image: url("./assets/icons/bi-cart.svg");
57
- mask-image: url("./assets/icons/bi-cart.svg");
58
- }