ui: Icon related fixups (#13183)

* ui: Use new icon-size and icon-color for popover-menus

* Remove the default currentColor plus add some more defaults

* Undo transparency overwrites now we don't need them

* Fixup discochain icons

* Undo a default icon rule for vert align

* Fixup expanded icon for meatball popovers

* Fixup intention permission labels/badges/icons

* Remove different res icon

* Remove icon resolutions
This commit is contained in:
John Cowen 2022-05-25 14:28:42 +01:00 committed by GitHub
parent 90d1300480
commit af460dcd97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
621 changed files with 1115 additions and 4651 deletions

3
.changelog/13183.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Re-instate '...' icon for row actions
```

View File

@ -8,7 +8,6 @@
} }
%crumbs::before { %crumbs::before {
text-decoration: none; text-decoration: none;
background-color: var(--transparent);
} }
%breadcrumb-milestone::before { %breadcrumb-milestone::before {
@extend %with-chevron-left-mask, %as-pseudo; @extend %with-chevron-left-mask, %as-pseudo;

View File

@ -118,11 +118,8 @@
flex-wrap: wrap; flex-wrap: wrap;
list-style-type: none; list-style-type: none;
} }
%resolver-card ol li:not(:last-child)::after { %resolver-card ol {
display: inline-block; @extend %csv-list;
content: ',';
margin-right: 0.2em;
margin-left: -0.3em;
} }
/**/ /**/
%with-chain-outlet { %with-chain-outlet {

View File

@ -16,9 +16,7 @@
<dd> <dd>
<ol> <ol>
{{#each @item.Failover.Targets as |item|}} {{#each @item.Failover.Targets as |item|}}
<li> <li><span>{{item}}</span></li>
<span>{{item}}</span>
</li>
{{/each}} {{/each}}
</ol> </ol>
</dd> </dd>

View File

@ -91,13 +91,16 @@
} }
%resolver-card dt { %resolver-card dt {
font-size: 0; font-size: 0;
background-size: 80% 80%;
} }
%resolver-card dl.failover dt { %resolver-card dt::before {
@extend %with-cloud-cross-icon; content: '';
--icon-size: icon-999;
} }
%resolver-card dl.redirect dt { %resolver-card dl.failover dt::before {
@extend %with-redirect-icon; --icon-name: icon-cloud-cross;
}
%resolver-card dl.redirect dt::before {
--icon-name: icon-redirect;
} }
/**/ /**/
%with-chain-outlet::before { %with-chain-outlet::before {

View File

@ -14,5 +14,4 @@
content: var(--csv-list-separator); content: var(--csv-list-separator);
vertical-align: initial; vertical-align: initial;
margin-right: 0.3em; margin-right: 0.3em;
background-color: var(--transparent);
} }

View File

@ -3,6 +3,10 @@
@extend %main-nav-vertical-hoisted; @extend %main-nav-vertical-hoisted;
left: 100px; left: 100px;
} }
nav .dcs li.is-primary span,
nav .dcs li.is-local span {
@extend %menu-panel-badge;
}
nav li.partitions, nav li.partitions,
nav li.nspaces { nav li.nspaces {
@extend %main-nav-vertical-popover-menu; @extend %main-nav-vertical-popover-menu;

View File

@ -47,7 +47,6 @@
display: block; display: block;
margin-top: -0.5rem; margin-top: -0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-color: var(--transparent);
} }
%main-nav-vertical-popover-menu-trigger { %main-nav-vertical-popover-menu-trigger {
border: var(--decor-border-100); border: var(--decor-border-100);

View File

@ -11,9 +11,6 @@
%menu-panel { %menu-panel {
@extend %panel; @extend %panel;
} }
%menu-panel-item span {
@extend %menu-panel-badge;
}
%menu-panel [role='separator'] { %menu-panel [role='separator'] {
@extend %panel-separator; @extend %panel-separator;
@extend %menu-panel-separator; @extend %menu-panel-separator;

View File

@ -21,10 +21,10 @@
font-size: 0; font-size: 0;
} }
%more-popover-menu-trigger > *::after { %more-popover-menu-trigger > *::after {
@extend %with-more-horizontal-mask, %as-pseudo; --icon-name: icon-more-horizontal;
background-color: rgb(var(--tone-gray-900)); --icon-color: rgb(var(--tone-gray-900));
width: 16px; --icon-size: icon-300;
height: 16px; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;

View File

@ -10,9 +10,7 @@ span.policy-node-identity,
} }
span.policy-service-identity::before, span.policy-service-identity::before,
span.policy-node-identity::before { span.policy-node-identity::before {
width: auto; vertical-align: unset;
align-self: start;
font-size: inherit;
} }
span.policy-node-identity::before { span.policy-node-identity::before {
content: 'Node Identity: '; content: 'Node Identity: ';

View File

@ -17,7 +17,6 @@
display: inline; display: inline;
visibility: visible; visibility: visible;
content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'; content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
background-color: var(--transparent);
} }
%secret-button input:checked ~ em::before { %secret-button input:checked ~ em::before {
display: none; display: none;

View File

@ -45,7 +45,6 @@
&::before { &::before {
border-color: var(--transparent); border-color: var(--transparent);
border-style: solid; border-style: solid;
background-color: var(--transparent);
} }
} }
@ -53,27 +52,23 @@
&::before { &::before {
border-width: var(--size) var(--size) 0; border-width: var(--size) var(--size) 0;
border-top-color: initial; border-top-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-bottom { %tooltip-tail-bottom {
&::before { &::before {
border-width: 0 var(--size) var(--size); border-width: 0 var(--size) var(--size);
border-bottom-color: initial; border-bottom-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-left { %tooltip-tail-left {
&::before { &::before {
border-width: var(--size) 0 var(--size) var(--size); border-width: var(--size) 0 var(--size) var(--size);
border-left-color: initial; border-left-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-right { %tooltip-tail-right {
&::before { &::before {
border-width: var(--size) var(--size) var(--size) 0; border-width: var(--size) var(--size) var(--size) 0;
border-right-color: initial; border-right-color: initial;
background-color: var(--transparent);
} }
} }

View File

@ -1,19 +1,24 @@
*::before, *::after { *::before, *::after {
display: inline-block; display: inline-block;
animation-play-state: paused;
animation-fill-mode: forwards;
animation-iteration-count: var(--icon-resolution, 1);
vertical-align: text-top; vertical-align: text-top;
background-repeat: no-repeat;
background-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
} }
*::before { *::before {
animation-name: var(--icon-name-start, var(--icon-name)), animation-name: var(--icon-name-start, var(--icon-name)),
var(--icon-size-start, var(--icon-size, icon-000)); var(--icon-size-start, var(--icon-size, icon-000));
background-color: var(--icon-color-start, var(--icon-color, currentColor)); background-color: var(--icon-color-start, var(--icon-color));
} }
*::after { *::after {
animation-name: var(--icon-name-end, var(--icon-name)), animation-name: var(--icon-name-end, var(--icon-name)),
var(--icon-size-end, var(--icon-size, icon-000)); var(--icon-size-end, var(--icon-size, icon-000));
background-color: var(--icon-color-end, var(--icon-color, currentColor)); background-color: var(--icon-color-end, var(--icon-color));
} }
[style*='--icon-color-start']::before { [style*='--icon-color-start']::before {
@ -87,3 +92,9 @@
height: 1.750rem; /* 28px */ height: 1.750rem; /* 28px */
} }
} }
@keyframes icon-999 {
100% {
width: 100%;
height: 100%;
}
}

View File

@ -1,15 +1,9 @@
@keyframes icon-activity { @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% { 100% {
background-color: var(--icon-color, var(--color-activity-500, currentColor));
-webkit-mask-image: var(--icon-activity-16); -webkit-mask-image: var(--icon-activity-16);
mask-image: var(--icon-activity-16); mask-image: var(--icon-activity-16);
background-color: var(--icon-color, var(--color-activity-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-circle-fill { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
-webkit-mask-image: var(--icon-alert-circle-fill-16); -webkit-mask-image: var(--icon-alert-circle-fill-16);
mask-image: var(--icon-alert-circle-fill-16); mask-image: var(--icon-alert-circle-fill-16);
background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-circle-outline { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
-webkit-mask-image: var(--icon-alert-circle-16); -webkit-mask-image: var(--icon-alert-circle-16);
mask-image: var(--icon-alert-circle-16); mask-image: var(--icon-alert-circle-16);
background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-circle { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
-webkit-mask-image: var(--icon-alert-circle-16); -webkit-mask-image: var(--icon-alert-circle-16);
mask-image: var(--icon-alert-circle-16); mask-image: var(--icon-alert-circle-16);
background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-octagon-fill { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
-webkit-mask-image: var(--icon-alert-octagon-fill-16); -webkit-mask-image: var(--icon-alert-octagon-fill-16);
mask-image: var(--icon-alert-octagon-fill-16); mask-image: var(--icon-alert-octagon-fill-16);
background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-octagon { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
-webkit-mask-image: var(--icon-alert-octagon-16); -webkit-mask-image: var(--icon-alert-octagon-16);
mask-image: var(--icon-alert-octagon-16); mask-image: var(--icon-alert-octagon-16);
background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-triangle-fill { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
-webkit-mask-image: var(--icon-alert-triangle-fill-16); -webkit-mask-image: var(--icon-alert-triangle-fill-16);
mask-image: var(--icon-alert-triangle-fill-16); mask-image: var(--icon-alert-triangle-fill-16);
background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alert-triangle { @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% { 100% {
background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
-webkit-mask-image: var(--icon-alert-triangle-16); -webkit-mask-image: var(--icon-alert-triangle-16);
mask-image: var(--icon-alert-triangle-16); mask-image: var(--icon-alert-triangle-16);
background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-alibaba-color { @keyframes icon-alibaba-color {
50% {
background-image: var(--icon-alibaba-color-24);
}
100% { 100% {
background-image: var(--icon-alibaba-color-16); background-image: var(--icon-alibaba-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-alibaba { @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% { 100% {
background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
-webkit-mask-image: var(--icon-alibaba-color-16); -webkit-mask-image: var(--icon-alibaba-color-16);
mask-image: var(--icon-alibaba-color-16); mask-image: var(--icon-alibaba-color-16);
background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-align-center { @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% { 100% {
background-color: var(--icon-color, var(--color-align-center-500, currentColor));
-webkit-mask-image: var(--icon-align-center-16); -webkit-mask-image: var(--icon-align-center-16);
mask-image: var(--icon-align-center-16); mask-image: var(--icon-align-center-16);
background-color: var(--icon-color, var(--color-align-center-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-align-justify { @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% { 100% {
background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
-webkit-mask-image: var(--icon-align-justify-16); -webkit-mask-image: var(--icon-align-justify-16);
mask-image: var(--icon-align-justify-16); mask-image: var(--icon-align-justify-16);
background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-align-left { @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% { 100% {
background-color: var(--icon-color, var(--color-align-left-500, currentColor));
-webkit-mask-image: var(--icon-align-left-16); -webkit-mask-image: var(--icon-align-left-16);
mask-image: var(--icon-align-left-16); mask-image: var(--icon-align-left-16);
background-color: var(--icon-color, var(--color-align-left-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-align-right { @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% { 100% {
background-color: var(--icon-color, var(--color-align-right-500, currentColor));
-webkit-mask-image: var(--icon-align-right-16); -webkit-mask-image: var(--icon-align-right-16);
mask-image: var(--icon-align-right-16); mask-image: var(--icon-align-right-16);
background-color: var(--icon-color, var(--color-align-right-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-amazon-eks-color { @keyframes icon-amazon-eks-color {
50% {
background-image: var(--icon-amazon-eks-color-24);
}
100% { 100% {
background-image: var(--icon-amazon-eks-color-16); background-image: var(--icon-amazon-eks-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-amazon-eks { @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% { 100% {
background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
-webkit-mask-image: var(--icon-amazon-eks-color-16); -webkit-mask-image: var(--icon-amazon-eks-color-16);
mask-image: var(--icon-amazon-eks-color-16); mask-image: var(--icon-amazon-eks-color-16);
background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-apple-color { @keyframes icon-apple-color {
50% {
background-image: var(--icon-apple-color-24);
}
100% { 100% {
background-image: var(--icon-apple-color-16); background-image: var(--icon-apple-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-apple { @keyframes icon-apple {
50% {
background-color: var(--icon-color, var(--color-apple-500, currentColor));
-webkit-mask-image: var(--icon-apple-color-24);
mask-image: var(--icon-apple-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-apple-500, currentColor));
-webkit-mask-image: var(--icon-apple-color-16); -webkit-mask-image: var(--icon-apple-color-16);
mask-image: var(--icon-apple-color-16); mask-image: var(--icon-apple-color-16);
background-color: var(--icon-color, var(--color-apple-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-archive { @keyframes icon-archive {
50% {
background-color: var(--icon-color, var(--color-archive-500, currentColor));
-webkit-mask-image: var(--icon-archive-24);
mask-image: var(--icon-archive-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-archive-500, currentColor));
-webkit-mask-image: var(--icon-archive-16); -webkit-mask-image: var(--icon-archive-16);
mask-image: var(--icon-archive-16); mask-image: var(--icon-archive-16);
background-color: var(--icon-color, var(--color-archive-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-down-circle { @keyframes icon-arrow-down-circle {
50% {
background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-circle-24);
mask-image: var(--icon-arrow-down-circle-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-circle-16); -webkit-mask-image: var(--icon-arrow-down-circle-16);
mask-image: var(--icon-arrow-down-circle-16); mask-image: var(--icon-arrow-down-circle-16);
background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-down-left { @keyframes icon-arrow-down-left {
50% {
background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-left-24);
mask-image: var(--icon-arrow-down-left-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-left-16); -webkit-mask-image: var(--icon-arrow-down-left-16);
mask-image: var(--icon-arrow-down-left-16); mask-image: var(--icon-arrow-down-left-16);
background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-down-right { @keyframes icon-arrow-down-right {
50% {
background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-right-24);
mask-image: var(--icon-arrow-down-right-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-right-16); -webkit-mask-image: var(--icon-arrow-down-right-16);
mask-image: var(--icon-arrow-down-right-16); mask-image: var(--icon-arrow-down-right-16);
background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-down { @keyframes icon-arrow-down {
50% {
background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-24);
mask-image: var(--icon-arrow-down-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
-webkit-mask-image: var(--icon-arrow-down-16); -webkit-mask-image: var(--icon-arrow-down-16);
mask-image: var(--icon-arrow-down-16); mask-image: var(--icon-arrow-down-16);
background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-left-circle { @keyframes icon-arrow-left-circle {
50% {
background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-left-circle-24);
mask-image: var(--icon-arrow-left-circle-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-left-circle-16); -webkit-mask-image: var(--icon-arrow-left-circle-16);
mask-image: var(--icon-arrow-left-circle-16); mask-image: var(--icon-arrow-left-circle-16);
background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-left { @keyframes icon-arrow-left {
50% {
background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-left-24);
mask-image: var(--icon-arrow-left-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-left-16); -webkit-mask-image: var(--icon-arrow-left-16);
mask-image: var(--icon-arrow-left-16); mask-image: var(--icon-arrow-left-16);
background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-right-circle { @keyframes icon-arrow-right-circle {
50% {
background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-right-circle-24);
mask-image: var(--icon-arrow-right-circle-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-right-circle-16); -webkit-mask-image: var(--icon-arrow-right-circle-16);
mask-image: var(--icon-arrow-right-circle-16); mask-image: var(--icon-arrow-right-circle-16);
background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-right { @keyframes icon-arrow-right {
50% {
background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-right-24);
mask-image: var(--icon-arrow-right-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-right-16); -webkit-mask-image: var(--icon-arrow-right-16);
mask-image: var(--icon-arrow-right-16); mask-image: var(--icon-arrow-right-16);
background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-up-circle { @keyframes icon-arrow-up-circle {
50% {
background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-circle-24);
mask-image: var(--icon-arrow-up-circle-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-circle-16); -webkit-mask-image: var(--icon-arrow-up-circle-16);
mask-image: var(--icon-arrow-up-circle-16); mask-image: var(--icon-arrow-up-circle-16);
background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-up-left { @keyframes icon-arrow-up-left {
50% {
background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-left-24);
mask-image: var(--icon-arrow-up-left-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-left-16); -webkit-mask-image: var(--icon-arrow-up-left-16);
mask-image: var(--icon-arrow-up-left-16); mask-image: var(--icon-arrow-up-left-16);
background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-up-right { @keyframes icon-arrow-up-right {
50% {
background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-right-24);
mask-image: var(--icon-arrow-up-right-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-right-16); -webkit-mask-image: var(--icon-arrow-up-right-16);
mask-image: var(--icon-arrow-up-right-16); mask-image: var(--icon-arrow-up-right-16);
background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-arrow-up { @keyframes icon-arrow-up {
50% {
background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-24);
mask-image: var(--icon-arrow-up-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
-webkit-mask-image: var(--icon-arrow-up-16); -webkit-mask-image: var(--icon-arrow-up-16);
mask-image: var(--icon-arrow-up-16); mask-image: var(--icon-arrow-up-16);
background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-at-sign { @keyframes icon-at-sign {
50% {
background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
-webkit-mask-image: var(--icon-at-sign-24);
mask-image: var(--icon-at-sign-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
-webkit-mask-image: var(--icon-at-sign-16); -webkit-mask-image: var(--icon-at-sign-16);
mask-image: var(--icon-at-sign-16); mask-image: var(--icon-at-sign-16);
background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-auth0-color { @keyframes icon-auth0-color {
50% {
background-image: var(--icon-auth0-color-24);
}
100% { 100% {
background-image: var(--icon-auth0-color-16); background-image: var(--icon-auth0-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-auth0 { @keyframes icon-auth0 {
50% {
background-color: var(--icon-color, var(--color-auth0-500, currentColor));
-webkit-mask-image: var(--icon-auth0-color-24);
mask-image: var(--icon-auth0-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-auth0-500, currentColor));
-webkit-mask-image: var(--icon-auth0-color-16); -webkit-mask-image: var(--icon-auth0-color-16);
mask-image: var(--icon-auth0-color-16); mask-image: var(--icon-auth0-color-16);
background-color: var(--icon-color, var(--color-auth0-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-auto-apply { @keyframes icon-auto-apply {
50% {
background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
-webkit-mask-image: var(--icon-auto-apply-24);
mask-image: var(--icon-auto-apply-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
-webkit-mask-image: var(--icon-auto-apply-16); -webkit-mask-image: var(--icon-auto-apply-16);
mask-image: var(--icon-auto-apply-16); mask-image: var(--icon-auto-apply-16);
background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-award { @keyframes icon-award {
50% {
background-color: var(--icon-color, var(--color-award-500, currentColor));
-webkit-mask-image: var(--icon-award-24);
mask-image: var(--icon-award-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-award-500, currentColor));
-webkit-mask-image: var(--icon-award-16); -webkit-mask-image: var(--icon-award-16);
mask-image: var(--icon-award-16); mask-image: var(--icon-award-16);
background-color: var(--icon-color, var(--color-award-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-aws-color { @keyframes icon-aws-color {
50% {
background-image: var(--icon-aws-color-24);
}
100% { 100% {
background-image: var(--icon-aws-color-16); background-image: var(--icon-aws-color-16);
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-aws-ec2-color { @keyframes icon-aws-ec2-color {
50% {
background-image: var(--icon-aws-ec2-color-24);
}
100% { 100% {
background-image: var(--icon-aws-ec2-color-16); background-image: var(--icon-aws-ec2-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-aws-ec2 { @keyframes icon-aws-ec2 {
50% {
background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
-webkit-mask-image: var(--icon-aws-ec2-color-24);
mask-image: var(--icon-aws-ec2-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
-webkit-mask-image: var(--icon-aws-ec2-color-16); -webkit-mask-image: var(--icon-aws-ec2-color-16);
mask-image: var(--icon-aws-ec2-color-16); mask-image: var(--icon-aws-ec2-color-16);
background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-aws { @keyframes icon-aws {
50% {
background-color: var(--icon-color, var(--color-aws-500, currentColor));
-webkit-mask-image: var(--icon-aws-color-24);
mask-image: var(--icon-aws-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-aws-500, currentColor));
-webkit-mask-image: var(--icon-aws-color-16); -webkit-mask-image: var(--icon-aws-color-16);
mask-image: var(--icon-aws-color-16); mask-image: var(--icon-aws-color-16);
background-color: var(--icon-color, var(--color-aws-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-azure-color { @keyframes icon-azure-color {
50% {
background-image: var(--icon-azure-color-24);
}
100% { 100% {
background-image: var(--icon-azure-color-16); background-image: var(--icon-azure-color-16);
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-azure-devops-color { @keyframes icon-azure-devops-color {
50% {
background-image: var(--icon-azure-devops-color-24);
}
100% { 100% {
background-image: var(--icon-azure-devops-color-16); background-image: var(--icon-azure-devops-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-azure-devops { @keyframes icon-azure-devops {
50% {
background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
-webkit-mask-image: var(--icon-azure-devops-color-24);
mask-image: var(--icon-azure-devops-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
-webkit-mask-image: var(--icon-azure-devops-color-16); -webkit-mask-image: var(--icon-azure-devops-color-16);
mask-image: var(--icon-azure-devops-color-16); mask-image: var(--icon-azure-devops-color-16);
background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-azure { @keyframes icon-azure {
50% {
background-color: var(--icon-color, var(--color-azure-500, currentColor));
-webkit-mask-image: var(--icon-azure-color-24);
mask-image: var(--icon-azure-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-azure-500, currentColor));
-webkit-mask-image: var(--icon-azure-color-16); -webkit-mask-image: var(--icon-azure-color-16);
mask-image: var(--icon-azure-color-16); mask-image: var(--icon-azure-color-16);
background-color: var(--icon-color, var(--color-azure-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bank-vault { @keyframes icon-bank-vault {
50% {
background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
-webkit-mask-image: var(--icon-bank-vault-24);
mask-image: var(--icon-bank-vault-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
-webkit-mask-image: var(--icon-bank-vault-16); -webkit-mask-image: var(--icon-bank-vault-16);
mask-image: var(--icon-bank-vault-16); mask-image: var(--icon-bank-vault-16);
background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bar-chart-alt { @keyframes icon-bar-chart-alt {
50% {
background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
-webkit-mask-image: var(--icon-bar-chart-alt-24);
mask-image: var(--icon-bar-chart-alt-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
-webkit-mask-image: var(--icon-bar-chart-alt-16); -webkit-mask-image: var(--icon-bar-chart-alt-16);
mask-image: var(--icon-bar-chart-alt-16); mask-image: var(--icon-bar-chart-alt-16);
background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bar-chart { @keyframes icon-bar-chart {
50% {
background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
-webkit-mask-image: var(--icon-bar-chart-24);
mask-image: var(--icon-bar-chart-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
-webkit-mask-image: var(--icon-bar-chart-16); -webkit-mask-image: var(--icon-bar-chart-16);
mask-image: var(--icon-bar-chart-16); mask-image: var(--icon-bar-chart-16);
background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-battery-charging { @keyframes icon-battery-charging {
50% {
background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
-webkit-mask-image: var(--icon-battery-charging-24);
mask-image: var(--icon-battery-charging-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
-webkit-mask-image: var(--icon-battery-charging-16); -webkit-mask-image: var(--icon-battery-charging-16);
mask-image: var(--icon-battery-charging-16); mask-image: var(--icon-battery-charging-16);
background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-battery { @keyframes icon-battery {
50% {
background-color: var(--icon-color, var(--color-battery-500, currentColor));
-webkit-mask-image: var(--icon-battery-24);
mask-image: var(--icon-battery-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-battery-500, currentColor));
-webkit-mask-image: var(--icon-battery-16); -webkit-mask-image: var(--icon-battery-16);
mask-image: var(--icon-battery-16); mask-image: var(--icon-battery-16);
background-color: var(--icon-color, var(--color-battery-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-beaker { @keyframes icon-beaker {
50% {
background-color: var(--icon-color, var(--color-beaker-500, currentColor));
-webkit-mask-image: var(--icon-beaker-24);
mask-image: var(--icon-beaker-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-beaker-500, currentColor));
-webkit-mask-image: var(--icon-beaker-16); -webkit-mask-image: var(--icon-beaker-16);
mask-image: var(--icon-beaker-16); mask-image: var(--icon-beaker-16);
background-color: var(--icon-color, var(--color-beaker-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bell-active-fill { @keyframes icon-bell-active-fill {
50% {
background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
-webkit-mask-image: var(--icon-bell-active-fill-24);
mask-image: var(--icon-bell-active-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
-webkit-mask-image: var(--icon-bell-active-fill-16); -webkit-mask-image: var(--icon-bell-active-fill-16);
mask-image: var(--icon-bell-active-fill-16); mask-image: var(--icon-bell-active-fill-16);
background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bell-active { @keyframes icon-bell-active {
50% {
background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
-webkit-mask-image: var(--icon-bell-active-24);
mask-image: var(--icon-bell-active-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
-webkit-mask-image: var(--icon-bell-active-16); -webkit-mask-image: var(--icon-bell-active-16);
mask-image: var(--icon-bell-active-16); mask-image: var(--icon-bell-active-16);
background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bell-off { @keyframes icon-bell-off {
50% {
background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
-webkit-mask-image: var(--icon-bell-off-24);
mask-image: var(--icon-bell-off-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
-webkit-mask-image: var(--icon-bell-off-16); -webkit-mask-image: var(--icon-bell-off-16);
mask-image: var(--icon-bell-off-16); mask-image: var(--icon-bell-off-16);
background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bell { @keyframes icon-bell {
50% {
background-color: var(--icon-color, var(--color-bell-500, currentColor));
-webkit-mask-image: var(--icon-bell-24);
mask-image: var(--icon-bell-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bell-500, currentColor));
-webkit-mask-image: var(--icon-bell-16); -webkit-mask-image: var(--icon-bell-16);
mask-image: var(--icon-bell-16); mask-image: var(--icon-bell-16);
background-color: var(--icon-color, var(--color-bell-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-bitbucket-color { @keyframes icon-bitbucket-color {
50% {
background-image: var(--icon-bitbucket-color-24);
}
100% { 100% {
background-image: var(--icon-bitbucket-color-16); background-image: var(--icon-bitbucket-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bitbucket { @keyframes icon-bitbucket {
50% {
background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
-webkit-mask-image: var(--icon-bitbucket-color-24);
mask-image: var(--icon-bitbucket-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
-webkit-mask-image: var(--icon-bitbucket-color-16); -webkit-mask-image: var(--icon-bitbucket-color-16);
mask-image: var(--icon-bitbucket-color-16); mask-image: var(--icon-bitbucket-color-16);
background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bolt { @keyframes icon-bolt {
50% {
background-color: var(--icon-color, var(--color-bolt-500, currentColor));
-webkit-mask-image: var(--icon-zap-24);
mask-image: var(--icon-zap-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bolt-500, currentColor));
-webkit-mask-image: var(--icon-zap-16); -webkit-mask-image: var(--icon-zap-16);
mask-image: var(--icon-zap-16); mask-image: var(--icon-zap-16);
background-color: var(--icon-color, var(--color-bolt-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark-add-fill { @keyframes icon-bookmark-add-fill {
50% {
background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-add-fill-24);
mask-image: var(--icon-bookmark-add-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-add-fill-16); -webkit-mask-image: var(--icon-bookmark-add-fill-16);
mask-image: var(--icon-bookmark-add-fill-16); mask-image: var(--icon-bookmark-add-fill-16);
background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark-add { @keyframes icon-bookmark-add {
50% {
background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-add-24);
mask-image: var(--icon-bookmark-add-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-add-16); -webkit-mask-image: var(--icon-bookmark-add-16);
mask-image: var(--icon-bookmark-add-16); mask-image: var(--icon-bookmark-add-16);
background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark-fill { @keyframes icon-bookmark-fill {
50% {
background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-fill-24);
mask-image: var(--icon-bookmark-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-fill-16); -webkit-mask-image: var(--icon-bookmark-fill-16);
mask-image: var(--icon-bookmark-fill-16); mask-image: var(--icon-bookmark-fill-16);
background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark-remove-fill { @keyframes icon-bookmark-remove-fill {
50% {
background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-remove-fill-24);
mask-image: var(--icon-bookmark-remove-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-remove-fill-16); -webkit-mask-image: var(--icon-bookmark-remove-fill-16);
mask-image: var(--icon-bookmark-remove-fill-16); mask-image: var(--icon-bookmark-remove-fill-16);
background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark-remove { @keyframes icon-bookmark-remove {
50% {
background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-remove-24);
mask-image: var(--icon-bookmark-remove-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-remove-16); -webkit-mask-image: var(--icon-bookmark-remove-16);
mask-image: var(--icon-bookmark-remove-16); mask-image: var(--icon-bookmark-remove-16);
background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bookmark { @keyframes icon-bookmark {
50% {
background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-24);
mask-image: var(--icon-bookmark-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
-webkit-mask-image: var(--icon-bookmark-16); -webkit-mask-image: var(--icon-bookmark-16);
mask-image: var(--icon-bookmark-16); mask-image: var(--icon-bookmark-16);
background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bottom { @keyframes icon-bottom {
50% {
background-color: var(--icon-color, var(--color-bottom-500, currentColor));
-webkit-mask-image: var(--icon-bottom-24);
mask-image: var(--icon-bottom-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bottom-500, currentColor));
-webkit-mask-image: var(--icon-bottom-16); -webkit-mask-image: var(--icon-bottom-16);
mask-image: var(--icon-bottom-16); mask-image: var(--icon-bottom-16);
background-color: var(--icon-color, var(--color-bottom-500, currentColor));
} }
} }

View File

@ -1,8 +1,4 @@
@keyframes icon-boundary-color { @keyframes icon-boundary-color {
50% {
background-image: var(--icon-boundary-color-24);
}
100% { 100% {
background-image: var(--icon-boundary-color-16); background-image: var(--icon-boundary-color-16);
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-boundary { @keyframes icon-boundary {
50% {
background-color: var(--icon-color, var(--color-boundary-500, currentColor));
-webkit-mask-image: var(--icon-boundary-color-24);
mask-image: var(--icon-boundary-color-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-boundary-500, currentColor));
-webkit-mask-image: var(--icon-boundary-color-16); -webkit-mask-image: var(--icon-boundary-color-16);
mask-image: var(--icon-boundary-color-16); mask-image: var(--icon-boundary-color-16);
background-color: var(--icon-color, var(--color-boundary-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-box-check-fill { @keyframes icon-box-check-fill {
50% {
background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
-webkit-mask-image: var(--icon-check-square-fill-24);
mask-image: var(--icon-check-square-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
-webkit-mask-image: var(--icon-check-square-fill-16); -webkit-mask-image: var(--icon-check-square-fill-16);
mask-image: var(--icon-check-square-fill-16); mask-image: var(--icon-check-square-fill-16);
background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-box-outline { @keyframes icon-box-outline {
50% {
background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
-webkit-mask-image: var(--icon-square-24);
mask-image: var(--icon-square-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
-webkit-mask-image: var(--icon-square-16); -webkit-mask-image: var(--icon-square-16);
mask-image: var(--icon-square-16); mask-image: var(--icon-square-16);
background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-box { @keyframes icon-box {
50% {
background-color: var(--icon-color, var(--color-box-500, currentColor));
-webkit-mask-image: var(--icon-box-24);
mask-image: var(--icon-box-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-box-500, currentColor));
-webkit-mask-image: var(--icon-box-16); -webkit-mask-image: var(--icon-box-16);
mask-image: var(--icon-box-16); mask-image: var(--icon-box-16);
background-color: var(--icon-color, var(--color-box-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-briefcase { @keyframes icon-briefcase {
50% {
background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
-webkit-mask-image: var(--icon-briefcase-24);
mask-image: var(--icon-briefcase-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
-webkit-mask-image: var(--icon-briefcase-16); -webkit-mask-image: var(--icon-briefcase-16);
mask-image: var(--icon-briefcase-16); mask-image: var(--icon-briefcase-16);
background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-broadcast { @keyframes icon-broadcast {
50% {
background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
-webkit-mask-image: var(--icon-radio-24);
mask-image: var(--icon-radio-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
-webkit-mask-image: var(--icon-radio-16); -webkit-mask-image: var(--icon-radio-16);
mask-image: var(--icon-radio-16); mask-image: var(--icon-radio-16);
background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bug { @keyframes icon-bug {
50% {
background-color: var(--icon-color, var(--color-bug-500, currentColor));
-webkit-mask-image: var(--icon-bug-24);
mask-image: var(--icon-bug-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bug-500, currentColor));
-webkit-mask-image: var(--icon-bug-16); -webkit-mask-image: var(--icon-bug-16);
mask-image: var(--icon-bug-16); mask-image: var(--icon-bug-16);
background-color: var(--icon-color, var(--color-bug-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-build { @keyframes icon-build {
50% {
background-color: var(--icon-color, var(--color-build-500, currentColor));
-webkit-mask-image: var(--icon-build-24);
mask-image: var(--icon-build-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-build-500, currentColor));
-webkit-mask-image: var(--icon-build-16); -webkit-mask-image: var(--icon-build-16);
mask-image: var(--icon-build-16); mask-image: var(--icon-build-16);
background-color: var(--icon-color, var(--color-build-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-bulb { @keyframes icon-bulb {
50% {
background-color: var(--icon-color, var(--color-bulb-500, currentColor));
-webkit-mask-image: var(--icon-bulb-24);
mask-image: var(--icon-bulb-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-bulb-500, currentColor));
-webkit-mask-image: var(--icon-bulb-16); -webkit-mask-image: var(--icon-bulb-16);
mask-image: var(--icon-bulb-16); mask-image: var(--icon-bulb-16);
background-color: var(--icon-color, var(--color-bulb-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-calendar { @keyframes icon-calendar {
50% {
background-color: var(--icon-color, var(--color-calendar-500, currentColor));
-webkit-mask-image: var(--icon-calendar-24);
mask-image: var(--icon-calendar-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-calendar-500, currentColor));
-webkit-mask-image: var(--icon-calendar-16); -webkit-mask-image: var(--icon-calendar-16);
mask-image: var(--icon-calendar-16); mask-image: var(--icon-calendar-16);
background-color: var(--icon-color, var(--color-calendar-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-camera-off { @keyframes icon-camera-off {
50% {
background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
-webkit-mask-image: var(--icon-camera-off-24);
mask-image: var(--icon-camera-off-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
-webkit-mask-image: var(--icon-camera-off-16); -webkit-mask-image: var(--icon-camera-off-16);
mask-image: var(--icon-camera-off-16); mask-image: var(--icon-camera-off-16);
background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-camera { @keyframes icon-camera {
50% {
background-color: var(--icon-color, var(--color-camera-500, currentColor));
-webkit-mask-image: var(--icon-camera-24);
mask-image: var(--icon-camera-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-camera-500, currentColor));
-webkit-mask-image: var(--icon-camera-16); -webkit-mask-image: var(--icon-camera-16);
mask-image: var(--icon-camera-16); mask-image: var(--icon-camera-16);
background-color: var(--icon-color, var(--color-camera-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cancel-circle-fill { @keyframes icon-cancel-circle-fill {
50% {
background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
-webkit-mask-image: var(--icon-x-circle-fill-24);
mask-image: var(--icon-x-circle-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
-webkit-mask-image: var(--icon-x-circle-fill-16); -webkit-mask-image: var(--icon-x-circle-fill-16);
mask-image: var(--icon-x-circle-fill-16); mask-image: var(--icon-x-circle-fill-16);
background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cancel-circle-outline { @keyframes icon-cancel-circle-outline {
50% {
background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
-webkit-mask-image: var(--icon-x-circle-24);
mask-image: var(--icon-x-circle-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
-webkit-mask-image: var(--icon-x-circle-16); -webkit-mask-image: var(--icon-x-circle-16);
mask-image: var(--icon-x-circle-16); mask-image: var(--icon-x-circle-16);
background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cancel-plain { @keyframes icon-cancel-plain {
50% {
background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
-webkit-mask-image: var(--icon-x-24);
mask-image: var(--icon-x-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
-webkit-mask-image: var(--icon-x-16); -webkit-mask-image: var(--icon-x-16);
mask-image: var(--icon-x-16); mask-image: var(--icon-x-16);
background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cancel-square-fill { @keyframes icon-cancel-square-fill {
50% {
background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
-webkit-mask-image: var(--icon-x-square-fill-24);
mask-image: var(--icon-x-square-fill-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
-webkit-mask-image: var(--icon-x-square-fill-16); -webkit-mask-image: var(--icon-x-square-fill-16);
mask-image: var(--icon-x-square-fill-16); mask-image: var(--icon-x-square-fill-16);
background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cancel-square-outline { @keyframes icon-cancel-square-outline {
50% {
background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
-webkit-mask-image: var(--icon-x-square-24);
mask-image: var(--icon-x-square-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
-webkit-mask-image: var(--icon-x-square-16); -webkit-mask-image: var(--icon-x-square-16);
mask-image: var(--icon-x-square-16); mask-image: var(--icon-x-square-16);
background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-caret-down { @keyframes icon-caret-down {
50% {
background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
-webkit-mask-image: var(--icon-caret-24);
mask-image: var(--icon-caret-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
-webkit-mask-image: var(--icon-caret-16); -webkit-mask-image: var(--icon-caret-16);
mask-image: var(--icon-caret-16); mask-image: var(--icon-caret-16);
background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-caret-up { @keyframes icon-caret-up {
50% {
background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
-webkit-mask-image: var(--icon-chevron-up-24);
mask-image: var(--icon-chevron-up-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
-webkit-mask-image: var(--icon-chevron-up-16); -webkit-mask-image: var(--icon-chevron-up-16);
mask-image: var(--icon-chevron-up-16); mask-image: var(--icon-chevron-up-16);
background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-caret { @keyframes icon-caret {
50% {
background-color: var(--icon-color, var(--color-caret-500, currentColor));
-webkit-mask-image: var(--icon-caret-24);
mask-image: var(--icon-caret-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-caret-500, currentColor));
-webkit-mask-image: var(--icon-caret-16); -webkit-mask-image: var(--icon-caret-16);
mask-image: var(--icon-caret-16); mask-image: var(--icon-caret-16);
background-color: var(--icon-color, var(--color-caret-500, currentColor));
} }
} }

View File

@ -1,15 +1,9 @@
@keyframes icon-cast { @keyframes icon-cast {
50% {
background-color: var(--icon-color, var(--color-cast-500, currentColor));
-webkit-mask-image: var(--icon-cast-24);
mask-image: var(--icon-cast-24);
}
100% { 100% {
background-color: var(--icon-color, var(--color-cast-500, currentColor));
-webkit-mask-image: var(--icon-cast-16); -webkit-mask-image: var(--icon-cast-16);
mask-image: var(--icon-cast-16); mask-image: var(--icon-cast-16);
background-color: var(--icon-color, var(--color-cast-500, currentColor));
} }
} }

Some files were not shown because too many files have changed in this diff Show More