mirror of https://github.com/status-im/consul.git
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
GitHub
parent
bfe7f0ad63
commit
a61e5cc08b
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:bug
|
||||
ui: Re-instate '...' icon for row actions
|
||||
```
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
}
|
||||
%crumbs::before {
|
||||
text-decoration: none;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
%breadcrumb-milestone::before {
|
||||
@extend %with-chevron-left-mask, %as-pseudo;
|
||||
|
|
|
|||
|
|
@ -118,11 +118,8 @@
|
|||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
}
|
||||
%resolver-card ol li:not(:last-child)::after {
|
||||
display: inline-block;
|
||||
content: ',';
|
||||
margin-right: 0.2em;
|
||||
margin-left: -0.3em;
|
||||
%resolver-card ol {
|
||||
@extend %csv-list;
|
||||
}
|
||||
/**/
|
||||
%with-chain-outlet {
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@
|
|||
<dd>
|
||||
<ol>
|
||||
{{#each @item.Failover.Targets as |item|}}
|
||||
<li>
|
||||
<span>{{item}}</span>
|
||||
</li>
|
||||
<li><span>{{item}}</span></li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
</dd>
|
||||
|
|
|
|||
|
|
@ -91,13 +91,16 @@
|
|||
}
|
||||
%resolver-card dt {
|
||||
font-size: 0;
|
||||
background-size: 80% 80%;
|
||||
}
|
||||
%resolver-card dl.failover dt {
|
||||
@extend %with-cloud-cross-icon;
|
||||
%resolver-card dt::before {
|
||||
content: '';
|
||||
--icon-size: icon-999;
|
||||
}
|
||||
%resolver-card dl.redirect dt {
|
||||
@extend %with-redirect-icon;
|
||||
%resolver-card dl.failover dt::before {
|
||||
--icon-name: icon-cloud-cross;
|
||||
}
|
||||
%resolver-card dl.redirect dt::before {
|
||||
--icon-name: icon-redirect;
|
||||
}
|
||||
/**/
|
||||
%with-chain-outlet::before {
|
||||
|
|
|
|||
|
|
@ -14,5 +14,4 @@
|
|||
content: var(--csv-list-separator);
|
||||
vertical-align: initial;
|
||||
margin-right: 0.3em;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
@extend %main-nav-vertical-hoisted;
|
||||
left: 100px;
|
||||
}
|
||||
nav .dcs li.is-primary span,
|
||||
nav .dcs li.is-local span {
|
||||
@extend %menu-panel-badge;
|
||||
}
|
||||
nav li.partitions,
|
||||
nav li.nspaces {
|
||||
@extend %main-nav-vertical-popover-menu;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@
|
|||
display: block;
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
%main-nav-vertical-popover-menu-trigger {
|
||||
border: var(--decor-border-100);
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@
|
|||
%menu-panel {
|
||||
@extend %panel;
|
||||
}
|
||||
%menu-panel-item span {
|
||||
@extend %menu-panel-badge;
|
||||
}
|
||||
%menu-panel [role='separator'] {
|
||||
@extend %panel-separator;
|
||||
@extend %menu-panel-separator;
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
font-size: 0;
|
||||
}
|
||||
%more-popover-menu-trigger > *::after {
|
||||
@extend %with-more-horizontal-mask, %as-pseudo;
|
||||
background-color: rgb(var(--tone-gray-900));
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
--icon-name: icon-more-horizontal;
|
||||
--icon-color: rgb(var(--tone-gray-900));
|
||||
--icon-size: icon-300;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ span.policy-node-identity,
|
|||
}
|
||||
span.policy-service-identity::before,
|
||||
span.policy-node-identity::before {
|
||||
width: auto;
|
||||
align-self: start;
|
||||
font-size: inherit;
|
||||
vertical-align: unset;
|
||||
}
|
||||
span.policy-node-identity::before {
|
||||
content: 'Node Identity: ';
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
display: inline;
|
||||
visibility: visible;
|
||||
content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
%secret-button input:checked ~ em::before {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
&::before {
|
||||
border-color: var(--transparent);
|
||||
border-style: solid;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,27 +52,23 @@
|
|||
&::before {
|
||||
border-width: var(--size) var(--size) 0;
|
||||
border-top-color: initial;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
}
|
||||
%tooltip-tail-bottom {
|
||||
&::before {
|
||||
border-width: 0 var(--size) var(--size);
|
||||
border-bottom-color: initial;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
}
|
||||
%tooltip-tail-left {
|
||||
&::before {
|
||||
border-width: var(--size) 0 var(--size) var(--size);
|
||||
border-left-color: initial;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
}
|
||||
%tooltip-tail-right {
|
||||
&::before {
|
||||
border-width: var(--size) var(--size) var(--size) 0;
|
||||
border-right-color: initial;
|
||||
background-color: var(--transparent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
*::before, *::after {
|
||||
display: inline-block;
|
||||
animation-play-state: paused;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: var(--icon-resolution, 1);
|
||||
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 {
|
||||
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, currentColor));
|
||||
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, currentColor));
|
||||
background-color: var(--icon-color-end, var(--icon-color));
|
||||
}
|
||||
|
||||
[style*='--icon-color-start']::before {
|
||||
|
|
@ -87,3 +92,9 @@
|
|||
height: 1.750rem; /* 28px */
|
||||
}
|
||||
}
|
||||
@keyframes icon-999 {
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-activity-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-alibaba-color {
|
||||
50% {
|
||||
background-image: var(--icon-alibaba-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-alibaba-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-align-center-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-align-left-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-align-right-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-amazon-eks-color {
|
||||
50% {
|
||||
background-image: var(--icon-amazon-eks-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-amazon-eks-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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);
|
||||
background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-apple-color {
|
||||
50% {
|
||||
background-image: var(--icon-apple-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-apple-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-apple-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-apple-color-16);
|
||||
mask-image: var(--icon-apple-color-16);
|
||||
background-color: var(--icon-color, var(--color-apple-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-archive-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-archive-16);
|
||||
mask-image: var(--icon-archive-16);
|
||||
background-color: var(--icon-color, var(--color-archive-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-auth0-color {
|
||||
50% {
|
||||
background-image: var(--icon-auth0-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-auth0-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-auth0-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-auth0-color-16);
|
||||
mask-image: var(--icon-auth0-color-16);
|
||||
background-color: var(--icon-color, var(--color-auth0-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-award-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-award-16);
|
||||
mask-image: var(--icon-award-16);
|
||||
background-color: var(--icon-color, var(--color-award-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-aws-color {
|
||||
50% {
|
||||
background-image: var(--icon-aws-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-aws-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-aws-ec2-color {
|
||||
50% {
|
||||
background-image: var(--icon-aws-ec2-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-aws-ec2-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-aws-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-aws-color-16);
|
||||
mask-image: var(--icon-aws-color-16);
|
||||
background-color: var(--icon-color, var(--color-aws-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-azure-color {
|
||||
50% {
|
||||
background-image: var(--icon-azure-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-azure-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-azure-devops-color {
|
||||
50% {
|
||||
background-image: var(--icon-azure-devops-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-azure-devops-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-azure-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-azure-color-16);
|
||||
mask-image: var(--icon-azure-color-16);
|
||||
background-color: var(--icon-color, var(--color-azure-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-battery-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-battery-16);
|
||||
mask-image: var(--icon-battery-16);
|
||||
background-color: var(--icon-color, var(--color-battery-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-beaker-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-beaker-16);
|
||||
mask-image: var(--icon-beaker-16);
|
||||
background-color: var(--icon-color, var(--color-beaker-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bell-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bell-16);
|
||||
mask-image: var(--icon-bell-16);
|
||||
background-color: var(--icon-color, var(--color-bell-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-bitbucket-color {
|
||||
50% {
|
||||
background-image: var(--icon-bitbucket-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-bitbucket-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bitbucket-color-16);
|
||||
mask-image: var(--icon-bitbucket-color-16);
|
||||
background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bolt-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-zap-16);
|
||||
mask-image: var(--icon-zap-16);
|
||||
background-color: var(--icon-color, var(--color-bolt-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bookmark-16);
|
||||
mask-image: var(--icon-bookmark-16);
|
||||
background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bottom-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bottom-16);
|
||||
mask-image: var(--icon-bottom-16);
|
||||
background-color: var(--icon-color, var(--color-bottom-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
@keyframes icon-boundary-color {
|
||||
50% {
|
||||
background-image: var(--icon-boundary-color-24);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: var(--icon-boundary-color-16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-boundary-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-boundary-color-16);
|
||||
mask-image: var(--icon-boundary-color-16);
|
||||
background-color: var(--icon-color, var(--color-boundary-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-square-16);
|
||||
mask-image: var(--icon-square-16);
|
||||
background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-box-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-box-16);
|
||||
mask-image: var(--icon-box-16);
|
||||
background-color: var(--icon-color, var(--color-box-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-briefcase-16);
|
||||
mask-image: var(--icon-briefcase-16);
|
||||
background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-radio-16);
|
||||
mask-image: var(--icon-radio-16);
|
||||
background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bug-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bug-16);
|
||||
mask-image: var(--icon-bug-16);
|
||||
background-color: var(--icon-color, var(--color-bug-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-build-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-build-16);
|
||||
mask-image: var(--icon-build-16);
|
||||
background-color: var(--icon-color, var(--color-build-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-bulb-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-bulb-16);
|
||||
mask-image: var(--icon-bulb-16);
|
||||
background-color: var(--icon-color, var(--color-bulb-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-calendar-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-calendar-16);
|
||||
mask-image: var(--icon-calendar-16);
|
||||
background-color: var(--icon-color, var(--color-calendar-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-camera-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-camera-16);
|
||||
mask-image: var(--icon-camera-16);
|
||||
background-color: var(--icon-color, var(--color-camera-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-x-16);
|
||||
mask-image: var(--icon-x-16);
|
||||
background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-caret-16);
|
||||
mask-image: var(--icon-caret-16);
|
||||
background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
|
||||
-webkit-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));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-caret-500, currentColor));
|
||||
-webkit-mask-image: var(--icon-caret-16);
|
||||
mask-image: var(--icon-caret-16);
|
||||
background-color: var(--icon-color, var(--color-caret-500, currentColor));
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
@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% {
|
||||
|
||||
background-color: var(--icon-color, var(--color-cast-500, currentColor));
|
||||
-webkit-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
Loading…
Reference in New Issue