mirror of https://github.com/status-im/consul.git
ui: Native CSS Icon Composition (#12461)
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
This commit is contained in:
John Cowen
GitHub
parent
ee0e8bf500
commit
5ab7e48862
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: Move icons away from depending on a CSS preprocessor
|
||||
```
|
||||
|
|
@ -108,5 +108,5 @@
|
|||
%composite-row-header .policy-management dd::before,
|
||||
%composite-row-detail .policy-management::before {
|
||||
@extend %with-star-fill-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-brand-600));
|
||||
--icon-color: rgb(var(--tone-brand-600));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
%copy-button {
|
||||
color: rgb(var(--tone-blue-500));
|
||||
background-color: var(--transparent);
|
||||
--icon-color: var(--transparent);
|
||||
}
|
||||
%copy-button::before {
|
||||
@extend %with-copy-action-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-gray-500));
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
%copy-button::after {
|
||||
background-color: rgb(var(--tone-gray-050));
|
||||
--icon-color: rgb(var(--tone-gray-050));
|
||||
}
|
||||
%copy-button:hover:not(:disabled):not(:active),
|
||||
%copy-button:focus {
|
||||
color: rgb(var(--tone-blue-500));
|
||||
background-color: rgb(var(--tone-gray-050));
|
||||
--icon-color: rgb(var(--tone-gray-050));
|
||||
}
|
||||
%copy-button:hover::before {
|
||||
background-color: rgb(var(--tone-blue-500));
|
||||
--icon-color: rgb(var(--tone-blue-500));
|
||||
}
|
||||
%copy-button:active {
|
||||
background-color: rgb(var(--tone-gray-200));
|
||||
--icon-color: rgb(var(--tone-gray-200));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,5 +12,6 @@
|
|||
%csv:not(:last-child)::after {
|
||||
display: inline;
|
||||
content: var(--csv-list-separator);
|
||||
vertical-align: initial;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@
|
|||
border: none;
|
||||
}
|
||||
&_label::after {
|
||||
@extend %as-pseudo;
|
||||
visibility: visible;
|
||||
--icon-name: icon-search;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -32,9 +34,6 @@
|
|||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
&_label::after {
|
||||
@extend %with-search-mask;
|
||||
}
|
||||
.popover-menu {
|
||||
background-color: rgb(var(--tone-gray-050));
|
||||
color: rgb(var(--tone-gray-800));
|
||||
|
|
|
|||
|
|
@ -6,27 +6,22 @@
|
|||
color: inherit;
|
||||
}
|
||||
%main-nav-horizontal-popover-menu-trigger::after {
|
||||
@extend %with-chevron-down-mask, %as-pseudo;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
--icon-name: icon-chevron-down;
|
||||
content: '';
|
||||
}
|
||||
%main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
|
||||
@extend %with-chevron-up-mask;
|
||||
transform: scaleY(-100%);
|
||||
}
|
||||
/**/
|
||||
/* reduced size hamburger menu */
|
||||
|
||||
%main-nav-horizontal-toggle {
|
||||
display: none;
|
||||
}
|
||||
%main-nav-horizontal-toggle-button::before {
|
||||
@extend %with-menu-mask, %as-pseudo;
|
||||
font-size: 1.2em;
|
||||
--icon-name: icon-menu;
|
||||
--icon-color: rgb(var(--tone-gray-800));
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
}
|
||||
%main-nav-horizontal-toggle-button::before {
|
||||
background-color: rgb(var(--tone-gray-800));
|
||||
}
|
||||
%main-nav-horizontal-action,
|
||||
%main-nav-horizontal-action-intent,
|
||||
%main-nav-horizontal-action-active {
|
||||
|
|
|
|||
|
|
@ -61,9 +61,8 @@
|
|||
%modal-window > header {
|
||||
position: relative;
|
||||
}
|
||||
%modal-window > header [data-a11y-dialog-hide] {
|
||||
%modal-window > header button {
|
||||
float: right;
|
||||
text-indent: -9000px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -3px;
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
%modal-window > header [data-a11y-dialog-hide] {
|
||||
@extend %with-cancel-plain-icon;
|
||||
%modal-window > header button {
|
||||
cursor: pointer;
|
||||
border: var(--decor-border-100);
|
||||
/*%frame-gray-050??*/
|
||||
|
|
@ -56,3 +55,8 @@
|
|||
border-color: rgb(var(--tone-gray-300));
|
||||
border-radius: var(--decor-radius-100);
|
||||
}
|
||||
%modal-window > header button::before {
|
||||
@extend %with-cancel-plain-icon, %as-pseudo;
|
||||
margin-left: -7px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ as |chart|}}
|
|||
</StateChart>
|
||||
|
||||
<State @matches="loading">
|
||||
<Progress />
|
||||
<Progress aria-label="Loading" />
|
||||
</State>
|
||||
|
||||
<State @matches="loaded">
|
||||
|
|
|
|||
|
|
@ -20,3 +20,15 @@ span.policy-node-identity::before {
|
|||
span.policy-service-identity::before {
|
||||
content: 'Service Identity: ';
|
||||
}
|
||||
%pill.leader::before {
|
||||
@extend %with-star-outline-mask, %as-pseudo;
|
||||
}
|
||||
%pill.jwt::before {
|
||||
@extend %with-logo-jwt-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.oidc::before {
|
||||
@extend %with-logo-oidc-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.kubernetes::before {
|
||||
@extend %with-logo-kubernetes-color-icon, %as-pseudo;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@
|
|||
}
|
||||
%pill::before {
|
||||
margin-right: 4px;
|
||||
width: 0.75rem !important; /* 12px */
|
||||
height: 0.75rem !important; /* 12px */
|
||||
}
|
||||
%pill-200 {
|
||||
@extend %pill;
|
||||
padding: 0 8px;
|
||||
--icon-size: icon-200;
|
||||
}
|
||||
%pill-500 {
|
||||
@extend %pill;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
# Progress
|
||||
|
||||
Simple Progress component in lieu of a reliable/styleable cross browser
|
||||
`<progress />`.
|
||||
`<progress />`. Please consider making use of `aria-label` or `aria-labelled-by`.
|
||||
|
||||
```hbs preview-template
|
||||
<Progress />
|
||||
<Progress
|
||||
aria-label="Loading"
|
||||
/>
|
||||
```
|
||||
|
||||
The animated icon also automatically supports a `prefers-reduced-motion` class/setting. The example below uses a local class just for illustration purposes in these docs. You do not need to add this class anywhere, please use the above class-less example instead.
|
||||
|
||||
```hbs preview-template
|
||||
<Progress
|
||||
class={{class-map
|
||||
'prefers-reduced-motion'
|
||||
}}
|
||||
aria-label="Loading"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div
|
||||
class="progress indeterminate"
|
||||
role="progressbar"
|
||||
...attributes
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,3 @@
|
|||
%progress-native::-webkit-progress-value {
|
||||
display: none;
|
||||
}
|
||||
%progress-indeterminate {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
%progress-indeterminate {
|
||||
@extend %loading-svg-prop;
|
||||
background-image: var(--loading-svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--icon-size: icon-700; /* 24px */
|
||||
--icon-name: var(--icon-loading);
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
%progress-indeterminate::before {
|
||||
content: '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,14 @@
|
|||
%secret-button span {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
%secret-button em {
|
||||
margin-left: 22px;
|
||||
}
|
||||
%secret-button span::before {
|
||||
@extend %with-visibility-show-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-gray-500));
|
||||
visibility: visible;
|
||||
}
|
||||
%secret-button input:checked + span::before {
|
||||
@extend %with-visibility-hide-mask;
|
||||
|
|
|
|||
|
|
@ -56,23 +56,23 @@
|
|||
.partition dt::before,
|
||||
.nspace dt::before,
|
||||
.health dt::before {
|
||||
background-color: rgb(var(--tone-gray-500));
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
.passing::before {
|
||||
@extend %with-check-circle-fill-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-green-500));
|
||||
--icon-color: rgb(var(--tone-green-500));
|
||||
}
|
||||
.warning::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-orange-500));
|
||||
--icon-color: rgb(var(--tone-orange-500));
|
||||
}
|
||||
.critical::before {
|
||||
@extend %with-cancel-square-fill-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-red-500));
|
||||
--icon-color: rgb(var(--tone-red-500));
|
||||
}
|
||||
.empty::before {
|
||||
@extend %with-minus-square-fill-mask, %as-pseudo;
|
||||
color: rgb(var(--tone-gray-500));
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
}
|
||||
.details {
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
span::before {
|
||||
margin-right: 0px;
|
||||
@extend %with-union-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-gray-500));
|
||||
--icon-color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
dl:first-child {
|
||||
grid-area: partition;
|
||||
|
|
|
|||
|
|
@ -21,16 +21,16 @@
|
|||
&.deny > button::before,
|
||||
&.deny .tippy-arrow::after {
|
||||
@extend %with-cancel-square-fill-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-red-500));
|
||||
--icon-color: rgb(var(--tone-red-500));
|
||||
}
|
||||
&.l7 > button::before,
|
||||
&.l7 .tippy-arrow::after {
|
||||
@extend %with-layers-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-gray-300));
|
||||
--icon-color: rgb(var(--tone-gray-300));
|
||||
}
|
||||
&.not-defined > button::before,
|
||||
&.not-defined .tippy-arrow::after {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
color: rgb(var(--tone-yellow-500));
|
||||
--icon-color: rgb(var(--tone-yellow-500));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,5 +14,7 @@
|
|||
}
|
||||
|
||||
span.topology-metrics-status-loader::after {
|
||||
@extend %with-loading-icon, %as-pseudo;
|
||||
--icon-name: var(--icon-loading);
|
||||
content: '';
|
||||
margin-left: 0.5rem; /* 8px */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,14 @@ export default modifier(function($element, [returns], hash) {
|
|||
if (prop.charAt(prop.length - 1) === '-') {
|
||||
prop = prop.substr(0, prop.length - 1);
|
||||
}
|
||||
if(hash.group) {
|
||||
if (typeof obj[prop] === 'undefined') {
|
||||
obj[prop] = {};
|
||||
}
|
||||
obj[prop][key] = value;
|
||||
} else {
|
||||
obj[key] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
returns(obj);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,87 @@
|
|||
# Iconography
|
||||
|
||||
All our iconography uses native CSS properties for adding iconography from The
|
||||
Outside. You can also add icons using the same properties within `style=""`
|
||||
attributes, but you should think twice before adding decorative content into
|
||||
HTML and only do so if you have a good reason/have tried everything else.
|
||||
|
||||
Available icons properties are:
|
||||
|
||||
- `--icon-name`: See below for available names
|
||||
- `--icon-color`: By default our icons are set to be monochrome, using
|
||||
`--icon-color` will color the icon, you can also use `currentColor`
|
||||
- `--icon-size`: Set the size of the icon, see below for available values. Our
|
||||
values use a `icon-000` naming scheme similar to all our ther naming scales (and
|
||||
`font-weight`). We default this to `icon-300` i.e. `1rem`/`16px` and `icon-000`
|
||||
means 'use the font-size'
|
||||
- `--icon-resolution`: Set the resolution of the icon. Currently you can set
|
||||
either `1` or `.5` here `resolution` happens to mean the thickness of the lines
|
||||
used in the icon. 1 equals thicker lines and should be used at sizes lower than
|
||||
`icon-500`. `.5` equals thinner lines and should be used at sizes larger than
|
||||
`icon-500`.
|
||||
|
||||
All of the above properties can be suffixed with `-start` or `-end`, these are
|
||||
mainly used for specifying icons using `style=""` attributes. Here `start` and
|
||||
`end` refer to either the `::before` or `::after` pseudo element to use to
|
||||
display the icon. If you are not using the `style=""` attribute (which you
|
||||
probably aren't) consider just using normal `::before` and `::after` CSS
|
||||
selectors.
|
||||
|
||||
```css
|
||||
.selector::before {
|
||||
--icon-name: icon-aws-color;
|
||||
content: '';
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.selector::after {
|
||||
--icon-name: icon-aws;
|
||||
--icon-color: rgb(var(---white));
|
||||
content: '';
|
||||
}
|
||||
```
|
||||
|
||||
If you cannot use CSS or have a good reason to do so, you can very easily add
|
||||
icons in HTML using these CSS properties.
|
||||
|
||||
```hbs preview-template
|
||||
<h2
|
||||
style={{style-map
|
||||
(array '--icon-name-start' 'icon-consul')
|
||||
(array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
|
||||
(array '--icon-name-end' 'icon-vault')
|
||||
(array '--icon-color-end' 'var(--color-vault-500)')
|
||||
}}
|
||||
>
|
||||
Header Name
|
||||
</h2>
|
||||
```
|
||||
|
||||
It's probably worth noting that we could make an icon component using the
|
||||
following. Under different circumstances this would give us an option that works
|
||||
"For Everyone, Everywhere" (in Every Framework as it's just native CSS).
|
||||
|
||||
```hbs
|
||||
<span
|
||||
class={{class-map
|
||||
'visually-hidden'
|
||||
}}
|
||||
style={{style-map
|
||||
(array '--icon-name-start' @name)
|
||||
(array '--icon-color' @color)
|
||||
(array '--icon-size' @size)
|
||||
}}
|
||||
...attributes
|
||||
>{{yield}}</span>
|
||||
|
||||
|
||||
<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
|
||||
```
|
||||
|
||||
|
||||
## Deprecated
|
||||
|
||||
Please prefer our Constructable `%placeholder` styles over singular CSS
|
||||
properties. If you need to drop back, to something not covered there then you
|
||||
can also use CSS properties directly.
|
||||
|
|
@ -9,12 +91,6 @@ All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
|
|||
the `%as-pseudo` placeholder to tell CSS that we are using the background on a
|
||||
pseudo element:
|
||||
|
||||
```css
|
||||
.selector::before {
|
||||
@extend %with-alert-circle-fill-mask, %as-pseudo;
|
||||
}
|
||||
```
|
||||
|
||||
If you are not using a pseudo element for whatever reason, then you do not need
|
||||
to use `%as-pseudo`.
|
||||
|
||||
|
|
@ -39,36 +115,61 @@ use `-mask`, use `-icon` instead:
|
|||
}
|
||||
```
|
||||
|
||||
## Structure Icons + Consul Specific Icons
|
||||
|
||||
```hbs preview-template
|
||||
<ul>
|
||||
{{#each (icons-debug 'structure') as |prop|}}
|
||||
<figure>
|
||||
<select
|
||||
onchange={{action (mut this.type) value="target.value"}}
|
||||
>
|
||||
<option>colored</option>
|
||||
<option>monochrome</option>
|
||||
</select>
|
||||
<select
|
||||
onchange={{action (mut this.theme) value="target.value"}}
|
||||
>
|
||||
<option>light</option>
|
||||
<option>dark</option>
|
||||
</select>
|
||||
<input
|
||||
oninput={{action (mut this.size) value="target.value"}}
|
||||
type="range" min="100" max="900" step="100"
|
||||
/>
|
||||
{{this.size}}
|
||||
</figure>
|
||||
<ul
|
||||
{{css-props (set this 'icons')
|
||||
prefix='icon-'
|
||||
}}
|
||||
class={{class-map
|
||||
(concat 'theme-' (or this.theme 'light'))
|
||||
}}
|
||||
style={{style-map
|
||||
(array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
|
||||
(array '--icon-size' (concat 'icon-' (or this.size '500')))
|
||||
(array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
|
||||
}}
|
||||
>
|
||||
{{#each-in this.icons as |prop value|}}
|
||||
{{#if (and
|
||||
(not (contains prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
|
||||
(not (string-includes prop '-24'))
|
||||
)
|
||||
}}
|
||||
{{#let
|
||||
(string-replace (string-replace prop '-16' '') '--' '')
|
||||
as |name|}}
|
||||
<li>
|
||||
<figure
|
||||
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
|
||||
class={{concat 'debug-' prop.placeholder '-before'}}
|
||||
{{with-copyable (concat '--icon-name: ' name ';content: "";')}}
|
||||
style={{style-map
|
||||
(array '--icon-name-start' name)
|
||||
}}
|
||||
>
|
||||
<figcaption>{{prop.name}}</figcaption>
|
||||
<figcaption>{{name}}</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/let}}
|
||||
{{/if}}
|
||||
{{/each-in}}
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Flight Icons
|
||||
|
||||
```hbs preview-template
|
||||
<ul>
|
||||
{{#each (icons-debug 'flight') as |prop|}}
|
||||
<li>
|
||||
<figure
|
||||
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
|
||||
class={{concat 'debug-' prop.placeholder '-before'}}
|
||||
>
|
||||
<figcaption>{{prop.name}}</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
*::before, *::after {
|
||||
display: inline-block;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: var(--icon-resolution, 1);
|
||||
vertical-align: text-top;
|
||||
}
|
||||
*::before {
|
||||
animation-name: var(--icon-name-start, var(--icon-name)),
|
||||
var(--icon-size-start, var(--icon-size, icon-000));
|
||||
background-color: var(--icon-color-start, var(--icon-color));
|
||||
}
|
||||
*::after {
|
||||
animation-name: var(--icon-name-end, var(--icon-name)),
|
||||
var(--icon-size-end, var(--icon-size, icon-000));
|
||||
background-color: var(--icon-color-end, var(--icon-color));
|
||||
}
|
||||
|
||||
[style*='--icon-color-start']::before {
|
||||
color: var(--icon-color-start);
|
||||
}
|
||||
[style*='--icon-color-end']::after {
|
||||
color: var(--icon-color-end);
|
||||
}
|
||||
[style*='--icon-name-start']::before,
|
||||
[style*='--icon-name-end']::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
@keyframes icon-000 {
|
||||
100% {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
}
|
||||
}
|
||||
@keyframes icon-100 {
|
||||
100% {
|
||||
width: 0.625rem; /* 10px */
|
||||
height: 0.625rem; /* 10px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-200 {
|
||||
100% {
|
||||
width: 0.75rem; /* 12px */
|
||||
height: 0.75rem; /* 12px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-300 {
|
||||
100% {
|
||||
width: 1rem; /* 16px */
|
||||
height: 1rem; /* 16px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-400 {
|
||||
100% {
|
||||
width: 1.125rem; /* 18px */
|
||||
height: 1.125rem; /* 18px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-500 {
|
||||
100% {
|
||||
width: 1.250rem; /* 20px */
|
||||
height: 1.250rem; /* 20px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-600 {
|
||||
100% {
|
||||
width: 1.375rem; /* 22px */
|
||||
height: 1.375rem; /* 22px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-700 {
|
||||
100% {
|
||||
width: 1.500rem; /* 24px */
|
||||
height: 1.500rem; /* 24px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-800 {
|
||||
100% {
|
||||
width: 1.625rem; /* 26px */
|
||||
height: 1.625rem; /* 26px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-900 {
|
||||
100% {
|
||||
width: 1.750rem; /* 28px */
|
||||
height: 1.750rem; /* 28px */
|
||||
}
|
||||
}
|
||||
|
|
@ -6,17 +6,6 @@
|
|||
--theme-dark-none: initial;
|
||||
--theme-light-none: ;
|
||||
}
|
||||
%with-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
%with-mask {
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: currentColor;
|
||||
}
|
||||
%with-glyph-icon {
|
||||
font-weight: var(--typo-weight-normal);
|
||||
background-color: rgb(var(--tone-gray-100));
|
||||
|
|
@ -24,13 +13,7 @@
|
|||
padding: 0 4px;
|
||||
}
|
||||
%as-pseudo {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
visibility: visible;
|
||||
background-size: contain;
|
||||
width: 1rem; /* 16px */
|
||||
height: 1rem; /* 16px */
|
||||
vertical-align: text-top;
|
||||
}
|
||||
%led-icon {
|
||||
position: relative;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-activity {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-activity-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-activity-24);
|
||||
mask-image: var(--icon-activity-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-activity-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-activity-16);
|
||||
mask-image: var(--icon-activity-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-activity-icon {
|
||||
--icon-name: icon-activity;
|
||||
content: '';
|
||||
}
|
||||
%with-activity-mask {
|
||||
--icon-name: icon-activity;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-activity-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-activity-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-circle-fill {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-fill-24);
|
||||
mask-image: var(--icon-alert-circle-fill-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-fill-16);
|
||||
mask-image: var(--icon-alert-circle-fill-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-circle-fill-icon {
|
||||
--icon-name: icon-alert-circle-fill;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-circle-fill-mask {
|
||||
--icon-name: icon-alert-circle-fill;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 6a1 1 0 100 2h.007a1 1 0 100-2H8z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import '../alert-circle/property-16';
|
||||
@import '../alert-circle/property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-circle-outline {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-24);
|
||||
mask-image: var(--icon-alert-circle-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-16);
|
||||
mask-image: var(--icon-alert-circle-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-circle-outline-icon {
|
||||
--icon-name: icon-alert-circle-outline;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-circle-outline-mask {
|
||||
--icon-name: icon-alert-circle-outline;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-circle {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-24);
|
||||
mask-image: var(--icon-alert-circle-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-circle-16);
|
||||
mask-image: var(--icon-alert-circle-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-circle-icon {
|
||||
--icon-name: icon-alert-circle;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-circle-mask {
|
||||
--icon-name: icon-alert-circle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zM8 10a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-octagon-fill {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-octagon-fill-24);
|
||||
mask-image: var(--icon-alert-octagon-fill-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-octagon-fill-16);
|
||||
mask-image: var(--icon-alert-octagon-fill-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-octagon-fill-icon {
|
||||
--icon-name: icon-alert-octagon-fill;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-octagon-fill-mask {
|
||||
--icon-name: icon-alert-octagon-fill;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-octagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-octagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.585 1c-.73 0-1.429.29-1.945.805L1.805 6.64A2.75 2.75 0 001 8.585v6.83c0 .73.29 1.429.805 1.945l4.835 4.835A2.75 2.75 0 008.585 23h6.83c.73 0 1.429-.29 1.945-.805l4.835-4.835A2.75 2.75 0 0023 15.415v-6.83c0-.73-.29-1.429-.805-1.945L17.36 1.805A2.75 2.75 0 0015.415 1h-6.83zm2.665 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-octagon {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-octagon-24);
|
||||
mask-image: var(--icon-alert-octagon-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-octagon-16);
|
||||
mask-image: var(--icon-alert-octagon-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-octagon-icon {
|
||||
--icon-name: icon-alert-octagon;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-octagon-mask {
|
||||
--icon-name: icon-alert-octagon;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-octagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zm1.945.695c-.332 0-.65.132-.884.366L1.866 4.943a1.25 1.25 0 00-.366.884v4.346c0 .332.132.65.366.884l3.077 3.077c.234.234.552.366.884.366h4.346c.332 0 .65-.132.884-.366l3.077-3.077a1.25 1.25 0 00.366-.884V5.827c0-.332-.132-.65-.366-.884l-3.077-3.077a1.25 1.25 0 00-.884-.366H5.827z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-octagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-triangle-fill {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-triangle-fill-24);
|
||||
mask-image: var(--icon-alert-triangle-fill-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-triangle-fill-16);
|
||||
mask-image: var(--icon-alert-triangle-fill-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-triangle-fill-icon {
|
||||
--icon-name: icon-alert-triangle-fill;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-triangle-fill-mask {
|
||||
--icon-name: icon-alert-triangle-fill;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-triangle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a2.143 2.143 0 00-1.827 1.024l-5.88 9.768a2.125 2.125 0 00.762 2.915c.322.188.687.289 1.06.293h11.77a2.143 2.143 0 001.834-1.074 2.126 2.126 0 00-.006-2.124L9.829 2.028A2.149 2.149 0 008 1zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-triangle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99L1.363 17.81l-.006.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alert-triangle {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-triangle-24);
|
||||
mask-image: var(--icon-alert-triangle-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alert-triangle-16);
|
||||
mask-image: var(--icon-alert-triangle-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alert-triangle-icon {
|
||||
--icon-name: icon-alert-triangle;
|
||||
content: '';
|
||||
}
|
||||
%with-alert-triangle-mask {
|
||||
--icon-name: icon-alert-triangle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-triangle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 5.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M6.953 1.273a2.143 2.143 0 012.874.751l.002.004 5.884 9.774a2.126 2.126 0 01-.768 2.905c-.322.188-.687.289-1.06.293H2.115a2.143 2.143 0 01-1.833-1.074 2.125 2.125 0 01.006-2.124l.006-.01 5.878-9.764.002-.004c.191-.313.46-.571.78-.75zm.502 1.53l-.001.002-5.872 9.754a.626.626 0 00.231.853.644.644 0 00.314.088h11.746a.643.643 0 00.544-.32.626.626 0 000-.62l-5.87-9.755-.002-.001A.635.635 0 008 2.5a.643.643 0 00-.545.304z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alert-triangle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 8.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@keyframes icon-alibaba-color {
|
||||
50% {
|
||||
background-image: var(--icon-alibaba-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-alibaba-color-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alibaba-color-icon {
|
||||
--icon-name: icon-alibaba-color;
|
||||
content: '';
|
||||
}
|
||||
%with-alibaba-color-mask {
|
||||
--icon-name: icon-alibaba-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23ED6B1E"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23ED6B1E"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import '../alibaba-color/property-16';
|
||||
@import '../alibaba-color/property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-alibaba {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alibaba-color-24);
|
||||
mask-image: var(--icon-alibaba-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-alibaba-color-16);
|
||||
mask-image: var(--icon-alibaba-color-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-alibaba-icon {
|
||||
--icon-name: icon-alibaba;
|
||||
content: '';
|
||||
}
|
||||
%with-alibaba-mask {
|
||||
--icon-name: icon-alibaba;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-align-center {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-center-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-center-24);
|
||||
mask-image: var(--icon-align-center-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-center-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-center-16);
|
||||
mask-image: var(--icon-align-center-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-align-center-icon {
|
||||
--icon-name: icon-align-center;
|
||||
content: '';
|
||||
}
|
||||
%with-align-center-mask {
|
||||
--icon-name: icon-align-center;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-center-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM3.75 6a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM3.75 12a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-center-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM5.75 9a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM5.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-align-justify {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-justify-24);
|
||||
mask-image: var(--icon-align-justify-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-justify-16);
|
||||
mask-image: var(--icon-align-justify-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-align-justify-icon {
|
||||
--icon-name: icon-align-justify;
|
||||
content: '';
|
||||
}
|
||||
%with-align-justify-mask {
|
||||
--icon-name: icon-align-justify;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-justify-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-justify-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-align-left {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-left-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-left-24);
|
||||
mask-image: var(--icon-align-left-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-left-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-left-16);
|
||||
mask-image: var(--icon-align-left-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-align-left-icon {
|
||||
--icon-name: icon-align-left;
|
||||
content: '';
|
||||
}
|
||||
%with-align-left-mask {
|
||||
--icon-name: icon-align-left;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-align-right {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-right-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-right-24);
|
||||
mask-image: var(--icon-align-right-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-align-right-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-align-right-16);
|
||||
mask-image: var(--icon-align-right-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-align-right-icon {
|
||||
--icon-name: icon-align-right;
|
||||
content: '';
|
||||
}
|
||||
%with-align-right-mask {
|
||||
--icon-name: icon-align-right;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM4.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM4.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-align-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM6.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75z"/></g></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import './property-16';
|
||||
@import './property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@keyframes icon-amazon-eks-color {
|
||||
50% {
|
||||
background-image: var(--icon-amazon-eks-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-amazon-eks-color-16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
%with-amazon-eks-color-icon {
|
||||
--icon-name: icon-amazon-eks-color;
|
||||
content: '';
|
||||
}
|
||||
%with-amazon-eks-color-mask {
|
||||
--icon-name: icon-amazon-eks-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-amazon-eks-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23amazon-eks-color-16__paint0_linear_879_141)" fill-rule="evenodd" d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.169-2.195H8.963L7.278 7.146V5.447h-.897v4.701z" clip-rule="evenodd"/><path fill="url(%23amazon-eks-color-16__paint1_linear_879_141)" d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path fill="url(%23amazon-eks-color-16__paint2_linear_879_141)" d="M11.273 10.288l-3.185 1.81a.178.178 0 01-.176 0l-3.63-2.062a.173.173 0 01-.088-.15V5.762c0-.062.034-.119.088-.15l3.186-1.81a.172.172 0 00.088-.15V.424a.176.176 0 00-.264-.15L1.088 3.798a.173.173 0 00-.088.15V11.7c0 .061.033.118.088.15l6.824 3.876c.054.03.122.03.176 0l6.204-3.524a.172.172 0 000-.3l-2.843-1.615a.178.178 0 00-.176 0z"/><defs><linearGradient id="amazon-eks-color-16__paint0_linear_879_141" x1="10.691" x2="8.521" y1="9.879" y2="4.634" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint1_linear_879_141" x1="15.693" x2="9.546" y1="10.544" y2="-.213" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint2_linear_879_141" x1="9.433" x2="2.732" y1="14.904" y2="2.88" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--icon-amazon-eks-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23amazon-eks-color-24__paint0_linear_879_136)" d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.105 3.465h-1.183l-2.883-3.233v3.233h-.924V8.473z"/><path fill="url(%23amazon-eks-color-24__paint1_linear_879_136)" d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path fill="url(%23amazon-eks-color-24__paint2_linear_879_136)" d="M16.676 15.322l-4.55 2.626a.25.25 0 01-.252 0L6.69 14.955a.252.252 0 01-.126-.217V8.75c0-.09.048-.172.126-.217l4.55-2.627a.25.25 0 00.126-.217V1a.251.251 0 00-.377-.217L2.125 5.9A.251.251 0 002 6.117v11.255c0 .09.048.172.125.217l9.75 5.627a.25.25 0 00.25 0l8.863-5.115a.251.251 0 000-.435l-4.06-2.344a.25.25 0 00-.252 0z"/><defs><linearGradient id="amazon-eks-color-24__paint0_linear_879_136" x1="15.383" x2="12.246" y1="14.57" y2="7.514" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint1_linear_879_136" x1="22.99" x2="13.995" y1="15.694" y2=".202" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint2_linear_879_136" x1="14.046" x2="4.239" y1="22.021" y2="4.702" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
@import '../amazon-eks-color/property-16';
|
||||
@import '../amazon-eks-color/property-24';
|
||||
@import './keyframes';
|
||||
@import './placeholders';
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@keyframes icon-amazon-eks {
|
||||
50% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-amazon-eks-color-24);
|
||||
mask-image: var(--icon-amazon-eks-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-amazon-eks-color-16);
|
||||
mask-image: var(--icon-amazon-eks-color-16);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue