luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Native CSS Icon Composition (#12461) 

This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
This commit is contained in:
John Cowen 2022-03-15 12:54:14 +00:00 committed by GitHub
parent 1e26c1fe11
commit dfefcabfbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2808 changed files with 22227 additions and 15797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/12461.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Move icons away from depending on a CSS preprocessor
```

2
ui/packages/consul-ui/app/components/composite-row/index.scss
View File

@ -108,5 +108,5 @@
%composite-row-header .policy-management dd::before,
%composite-row-detail .policy-management::before {
@extend %with-star-fill-mask, %as-pseudo;
background-color: rgb(var(--tone-brand-600));
--icon-color: rgb(var(--tone-brand-600));
}

12
ui/packages/consul-ui/app/components/copy-button/skin.scss
View File

@ -1,22 +1,22 @@
%copy-button {
color: rgb(var(--tone-blue-500));
background-color: var(--transparent);
--icon-color: var(--transparent);
}
%copy-button::before {
@extend %with-copy-action-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
--icon-color: rgb(var(--tone-gray-500));
}
%copy-button::after {
background-color: rgb(var(--tone-gray-050));
--icon-color: rgb(var(--tone-gray-050));
}
%copy-button:hover:not(:disabled):not(:active),
%copy-button:focus {
color: rgb(var(--tone-blue-500));
background-color: rgb(var(--tone-gray-050));
--icon-color: rgb(var(--tone-gray-050));
}
%copy-button:hover::before {
background-color: rgb(var(--tone-blue-500));
--icon-color: rgb(var(--tone-blue-500));
}
%copy-button:active {
background-color: rgb(var(--tone-gray-200));
--icon-color: rgb(var(--tone-gray-200));
}

1
ui/packages/consul-ui/app/components/csv-list/index.scss
View File

@ -12,5 +12,6 @@
%csv:not(:last-child)::after {
display: inline;
content: var(--csv-list-separator);
vertical-align: initial;
margin-right: 0.3em;
}

7
ui/packages/consul-ui/app/components/freetext-filter/skin.scss
View File

@ -23,7 +23,9 @@
border: none;
}
&_label::after {
@extend %as-pseudo;
visibility: visible;
--icon-name: icon-search;
content: '';
position: absolute;
top: 50%;
left: 50%;
@ -32,9 +34,6 @@
margin-left: -8px;
margin-top: -8px;
}
&_label::after {
@extend %with-search-mask;
}
.popover-menu {
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-800));

19
ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
View File

@ -6,27 +6,22 @@
color: inherit;
}
%main-nav-horizontal-popover-menu-trigger::after {
@extend %with-chevron-down-mask, %as-pseudo;
width: 16px;
height: 16px;
position: relative;
--icon-name: icon-chevron-down;
content: '';
}
%main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
@extend %with-chevron-up-mask;
transform: scaleY(-100%);
}
/**/
/* reduced size hamburger menu */
%main-nav-horizontal-toggle {
display: none;
}
%main-nav-horizontal-toggle-button::before {
@extend %with-menu-mask, %as-pseudo;
font-size: 1.2em;
--icon-name: icon-menu;
--icon-color: rgb(var(--tone-gray-800));
content: '';
cursor: pointer;
}
%main-nav-horizontal-toggle-button::before {
background-color: rgb(var(--tone-gray-800));
}
%main-nav-horizontal-action,
%main-nav-horizontal-action-intent,
%main-nav-horizontal-action-active {

3
ui/packages/consul-ui/app/components/modal-dialog/layout.scss
View File

@ -61,9 +61,8 @@
%modal-window > header {
position: relative;
}
%modal-window > header [data-a11y-dialog-hide] {
%modal-window > header button {
float: right;
text-indent: -9000px;
width: 24px;
height: 24px;
margin-top: -3px;

8
ui/packages/consul-ui/app/components/modal-dialog/skin.scss
View File

@ -47,8 +47,7 @@
border-width: 1px;
}
%modal-window > header [data-a11y-dialog-hide] {
@extend %with-cancel-plain-icon;
%modal-window > header button {
cursor: pointer;
border: var(--decor-border-100);
/*%frame-gray-050??*/
@ -56,3 +55,8 @@
border-color: rgb(var(--tone-gray-300));
border-radius: var(--decor-radius-100);
}
%modal-window > header button::before {
@extend %with-cancel-plain-icon, %as-pseudo;
margin-left: -7px;
margin-top: -3px;
}

2
ui/packages/consul-ui/app/components/oidc-select/index.hbs
View File

@ -75,7 +75,7 @@ as |chart|}}
</StateChart>
<State @matches="loading">
<Progress />
<Progress aria-label="Loading" />
</State>
<State @matches="loaded">

12
ui/packages/consul-ui/app/components/pill/index.scss
View File

@ -20,3 +20,15 @@ span.policy-node-identity::before {
span.policy-service-identity::before {
content: 'Service Identity: ';
}
%pill.leader::before {
@extend %with-star-outline-mask, %as-pseudo;
}
%pill.jwt::before {
@extend %with-logo-jwt-color-icon, %as-pseudo;
}
%pill.oidc::before {
@extend %with-logo-oidc-color-icon, %as-pseudo;
}
%pill.kubernetes::before {
@extend %with-logo-kubernetes-color-icon, %as-pseudo;
}

3
ui/packages/consul-ui/app/components/pill/layout.scss
View File

@ -6,12 +6,11 @@
}
%pill::before {
margin-right: 4px;
width: 0.75rem !important; /* 12px */
height: 0.75rem !important; /* 12px */
}
%pill-200 {
@extend %pill;
padding: 0 8px;
--icon-size: icon-200;
}
%pill-500 {
@extend %pill;

17
ui/packages/consul-ui/app/components/progress/README.mdx
View File

@ -1,8 +1,21 @@
# Progress
Simple Progress component in lieu of a reliable/styleable cross browser
`<progress />`.
`<progress />`. Please consider making use of `aria-label` or `aria-labelled-by`.
```hbs preview-template
<Progress />
<Progress
aria-label="Loading"
/>
```
The animated icon also automatically supports a `prefers-reduced-motion` class/setting. The example below uses a local class just for illustration purposes in these docs. You do not need to add this class anywhere, please use the above class-less example instead.
```hbs preview-template
<Progress
class={{class-map
'prefers-reduced-motion'
}}
aria-label="Loading"
/>
```

1
ui/packages/consul-ui/app/components/progress/index.hbs
View File

@ -1,4 +1,5 @@
<div
class="progress indeterminate"
role="progressbar"
...attributes
></div>

4
ui/packages/consul-ui/app/components/progress/layout.scss
View File

@ -7,7 +7,3 @@
%progress-native::-webkit-progress-value {
display: none;
}
%progress-indeterminate {
height: 24px;
width: 24px;
}

15
ui/packages/consul-ui/app/components/progress/skin.scss
View File

@ -1,7 +1,12 @@
%progress-indeterminate {
@extend %loading-svg-prop;
background-image: var(--loading-svg);
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
--icon-size: icon-700; /* 24px */
--icon-name: var(--icon-loading);
--icon-color: rgb(var(--tone-gray-500));
}
%progress-indeterminate::before {
content: '';
}

3
ui/packages/consul-ui/app/components/secret-button/index.scss
View File

@ -9,13 +9,14 @@
%secret-button span {
visibility: hidden;
position: absolute;
--icon-color: rgb(var(--tone-gray-500));
}
%secret-button em {
margin-left: 22px;
}
%secret-button span::before {
@extend %with-visibility-show-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
visibility: visible;
}
%secret-button input:checked + span::before {
@extend %with-visibility-hide-mask;

12
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -56,23 +56,23 @@
.partition dt::before,
.nspace dt::before,
.health dt::before {
background-color: rgb(var(--tone-gray-500));
--icon-color: rgb(var(--tone-gray-500));
}
.passing::before {
@extend %with-check-circle-fill-mask, %as-pseudo;
background-color: rgb(var(--tone-green-500));
--icon-color: rgb(var(--tone-green-500));
}
.warning::before {
@extend %with-alert-triangle-mask, %as-pseudo;
background-color: rgb(var(--tone-orange-500));
--icon-color: rgb(var(--tone-orange-500));
}
.critical::before {
@extend %with-cancel-square-fill-mask, %as-pseudo;
background-color: rgb(var(--tone-red-500));
--icon-color: rgb(var(--tone-red-500));
}
.empty::before {
@extend %with-minus-square-fill-mask, %as-pseudo;
color: rgb(var(--tone-gray-500));
--icon-color: rgb(var(--tone-gray-500));
}
}
.details {
@ -96,7 +96,7 @@
span::before {
margin-right: 0px;
@extend %with-union-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-500));
--icon-color: rgb(var(--tone-gray-500));
}
dl:first-child {
grid-area: partition;

6
ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
View File

@ -21,16 +21,16 @@
&.deny > button::before,
&.deny .tippy-arrow::after {
@extend %with-cancel-square-fill-mask, %as-pseudo;
background-color: rgb(var(--tone-red-500));
--icon-color: rgb(var(--tone-red-500));
}
&.l7 > button::before,
&.l7 .tippy-arrow::after {
@extend %with-layers-mask, %as-pseudo;
background-color: rgb(var(--tone-gray-300));
--icon-color: rgb(var(--tone-gray-300));
}
&.not-defined > button::before,
&.not-defined .tippy-arrow::after {
@extend %with-alert-triangle-mask, %as-pseudo;
color: rgb(var(--tone-yellow-500));
--icon-color: rgb(var(--tone-yellow-500));
}
}

4
ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
View File

@ -14,5 +14,7 @@
}
span.topology-metrics-status-loader::after {
@extend %with-loading-icon, %as-pseudo;
--icon-name: var(--icon-loading);
content: '';
margin-left: 0.5rem; /* 8px */
}

10
ui/packages/consul-ui/app/modifiers/css-props.js
View File

@ -29,10 +29,14 @@ export default modifier(function($element, [returns], hash) {
if (prop.charAt(prop.length - 1) === '-') {
prop = prop.substr(0, prop.length - 1);
}
if (typeof obj[prop] === 'undefined') {
obj[prop] = {};
if(hash.group) {
if (typeof obj[prop] === 'undefined') {
obj[prop] = {};
}
obj[prop][key] = value;
} else {
obj[key] = value;
}
obj[prop][key] = value;
}
});
returns(obj);

161
ui/packages/consul-ui/app/styles/base/icons/README.mdx
View File

@ -1,5 +1,87 @@
# Iconography
All our iconography uses native CSS properties for adding iconography from The
Outside. You can also add icons using the same properties within `style=""`
attributes, but you should think twice before adding decorative content into
HTML and only do so if you have a good reason/have tried everything else.
Available icons properties are:
- `--icon-name`: See below for available names
- `--icon-color`: By default our icons are set to be monochrome, using
`--icon-color` will color the icon, you can also use `currentColor`
- `--icon-size`: Set the size of the icon, see below for available values. Our
values use a `icon-000` naming scheme similar to all our ther naming scales (and
`font-weight`). We default this to `icon-300` i.e. `1rem`/`16px` and `icon-000`
means 'use the font-size'
- `--icon-resolution`: Set the resolution of the icon. Currently you can set
either `1` or `.5` here `resolution` happens to mean the thickness of the lines
used in the icon. 1 equals thicker lines and should be used at sizes lower than
`icon-500`. `.5` equals thinner lines and should be used at sizes larger than
`icon-500`.
All of the above properties can be suffixed with `-start` or `-end`, these are
mainly used for specifying icons using `style=""` attributes. Here `start` and
`end` refer to either the `::before` or `::after` pseudo element to use to
display the icon. If you are not using the `style=""` attribute (which you
probably aren't) consider just using normal `::before` and `::after` CSS
selectors.
```css
.selector::before {
--icon-name: icon-aws-color;
content: '';
}
```
```css
.selector::after {
--icon-name: icon-aws;
--icon-color: rgb(var(---white));
content: '';
}
```
If you cannot use CSS or have a good reason to do so, you can very easily add
icons in HTML using these CSS properties.
```hbs preview-template
<h2
style={{style-map
(array '--icon-name-start' 'icon-consul')
(array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
(array '--icon-name-end' 'icon-vault')
(array '--icon-color-end' 'var(--color-vault-500)')
}}
>
Header Name
</h2>
```
It's probably worth noting that we could make an icon component using the
following. Under different circumstances this would give us an option that works
"For Everyone, Everywhere" (in Every Framework as it's just native CSS).
```hbs
<span
class={{class-map
'visually-hidden'
}}
style={{style-map
(array '--icon-name-start' @name)
(array '--icon-color' @color)
(array '--icon-size' @size)
}}
...attributes
>{{yield}}</span>
<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
```
## Deprecated
Please prefer our Constructable `%placeholder` styles over singular CSS
properties. If you need to drop back, to something not covered there then you
can also use CSS properties directly.
@ -9,12 +91,6 @@ All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
the `%as-pseudo` placeholder to tell CSS that we are using the background on a
pseudo element:
```css
.selector::before {
@extend %with-alert-circle-fill-mask, %as-pseudo;
}
```
If you are not using a pseudo element for whatever reason, then you do not need
to use `%as-pseudo`.
@ -39,36 +115,61 @@ use `-mask`, use `-icon` instead:
}
```
## Structure Icons + Consul Specific Icons
```hbs preview-template
<ul>
{{#each (icons-debug 'structure') as |prop|}}
<figure>
<select
onchange={{action (mut this.type) value="target.value"}}
>
<option>colored</option>
<option>monochrome</option>
</select>
<select
onchange={{action (mut this.theme) value="target.value"}}
>
<option>light</option>
<option>dark</option>
</select>
<input
oninput={{action (mut this.size) value="target.value"}}
type="range" min="100" max="900" step="100"
/>
{{this.size}}
</figure>
<ul
{{css-props (set this 'icons')
prefix='icon-'
}}
class={{class-map
(concat 'theme-' (or this.theme 'light'))
}}
style={{style-map
(array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
(array '--icon-size' (concat 'icon-' (or this.size '500')))
(array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
}}
>
{{#each-in this.icons as |prop value|}}
{{#if (and
(not (contains prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
(not (string-includes prop '-24'))
)
}}
{{#let
(string-replace (string-replace prop '-16' '') '--' '')
as |name|}}
<li>
<figure
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
class={{concat 'debug-' prop.placeholder '-before'}}
{{with-copyable (concat '--icon-name: ' name ';content: "";')}}
style={{style-map
(array '--icon-name-start' name)
}}
>
<figcaption>{{prop.name}}</figcaption>
<figcaption>{{name}}</figcaption>
</figure>
</li>
{{/each}}
{{/let}}
{{/if}}
{{/each-in}}
</ul>
```
## Flight Icons
```hbs preview-template
<ul>
{{#each (icons-debug 'flight') as |prop|}}
<li>
<figure
{{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
class={{concat 'debug-' prop.placeholder '-before'}}
>
<figcaption>{{prop.name}}</figcaption>
</figure>
</li>
{{/each}}
</ul>
```

89
ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss Normal file
View File

@ -0,0 +1,89 @@
*::before, *::after {
display: inline-block;
animation-play-state: paused;
animation-fill-mode: forwards;
animation-iteration-count: var(--icon-resolution, 1);
vertical-align: text-top;
}
*::before {
animation-name: var(--icon-name-start, var(--icon-name)),
var(--icon-size-start, var(--icon-size, icon-000));
background-color: var(--icon-color-start, var(--icon-color));
}
*::after {
animation-name: var(--icon-name-end, var(--icon-name)),
var(--icon-size-end, var(--icon-size, icon-000));
background-color: var(--icon-color-end, var(--icon-color));
}
[style*='--icon-color-start']::before {
color: var(--icon-color-start);
}
[style*='--icon-color-end']::after {
color: var(--icon-color-end);
}
[style*='--icon-name-start']::before,
[style*='--icon-name-end']::after {
content: '';
}
@keyframes icon-000 {
100% {
width: 1.2em;
height: 1.2em;
}
}
@keyframes icon-100 {
100% {
width: 0.625rem; /* 10px */
height: 0.625rem; /* 10px */
}
}
@keyframes icon-200 {
100% {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
}
@keyframes icon-300 {
100% {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
}
}
@keyframes icon-400 {
100% {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
}
}
@keyframes icon-500 {
100% {
width: 1.250rem; /* 20px */
height: 1.250rem; /* 20px */
}
}
@keyframes icon-600 {
100% {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
}
}
@keyframes icon-700 {
100% {
width: 1.500rem; /* 24px */
height: 1.500rem; /* 24px */
}
}
@keyframes icon-800 {
100% {
width: 1.625rem; /* 26px */
height: 1.625rem; /* 26px */
}
}
@keyframes icon-900 {
100% {
width: 1.750rem; /* 28px */
height: 1.750rem; /* 28px */
}
}

17
ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
View File

@ -6,17 +6,6 @@
--theme-dark-none: initial;
--theme-light-none: ;
}
%with-icon {
background-repeat: no-repeat;
background-position: center;
}
%with-mask {
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-repeat: no-repeat;
mask-position: center;
background-color: currentColor;
}
%with-glyph-icon {
font-weight: var(--typo-weight-normal);
background-color: rgb(var(--tone-gray-100));
@ -24,13 +13,7 @@
padding: 0 4px;
}
%as-pseudo {
display: inline-block;
content: '';
visibility: visible;
background-size: contain;
width: 1rem; /* 16px */
height: 1rem; /* 16px */
vertical-align: text-top;
}
%led-icon {
position: relative;

4471
ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
View File

File diff suppressed because it is too large Load Diff

11179
ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
View File

File diff suppressed because it is too large Load Diff

6
ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-activity-icon {
--icon-name: icon-activity;
content: '';
}
%with-activity-mask {
--icon-name: icon-activity;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-activity-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-activity-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-circle-fill-icon {
--icon-name: icon-alert-circle-fill;
content: '';
}
%with-alert-circle-fill-mask {
--icon-name: icon-alert-circle-fill;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 6a1 1 0 100 2h.007a1 1 0 100-2H8z" clip-rule="evenodd"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import '../alert-circle/property-16';
@import '../alert-circle/property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-circle-outline-icon {
--icon-name: icon-alert-circle-outline;
content: '';
}
%with-alert-circle-outline-mask {
--icon-name: icon-alert-circle-outline;
content: '';
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-circle-icon {
--icon-name: icon-alert-circle;
content: '';
}
%with-alert-circle-mask {
--icon-name: icon-alert-circle;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zM8 10a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-octagon-fill-icon {
--icon-name: icon-alert-octagon-fill;
content: '';
}
%with-alert-octagon-fill-mask {
--icon-name: icon-alert-octagon-fill;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-octagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-octagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.585 1c-.73 0-1.429.29-1.945.805L1.805 6.64A2.75 2.75 0 001 8.585v6.83c0 .73.29 1.429.805 1.945l4.835 4.835A2.75 2.75 0 008.585 23h6.83c.73 0 1.429-.29 1.945-.805l4.835-4.835A2.75 2.75 0 0023 15.415v-6.83c0-.73-.29-1.429-.805-1.945L17.36 1.805A2.75 2.75 0 0015.415 1h-6.83zm2.665 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-octagon-icon {
--icon-name: icon-alert-octagon;
content: '';
}
%with-alert-octagon-mask {
--icon-name: icon-alert-octagon;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-octagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zm1.945.695c-.332 0-.65.132-.884.366L1.866 4.943a1.25 1.25 0 00-.366.884v4.346c0 .332.132.65.366.884l3.077 3.077c.234.234.552.366.884.366h4.346c.332 0 .65-.132.884-.366l3.077-3.077a1.25 1.25 0 00.366-.884V5.827c0-.332-.132-.65-.366-.884l-3.077-3.077a1.25 1.25 0 00-.884-.366H5.827z" clip-rule="evenodd"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-octagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-triangle-fill-icon {
--icon-name: icon-alert-triangle-fill;
content: '';
}
%with-alert-triangle-fill-mask {
--icon-name: icon-alert-triangle-fill;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-triangle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a2.143 2.143 0 00-1.827 1.024l-5.88 9.768a2.125 2.125 0 00.762 2.915c.322.188.687.289 1.06.293h11.77a2.143 2.143 0 001.834-1.074 2.126 2.126 0 00-.006-2.124L9.829 2.028A2.149 2.149 0 008 1zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd"/></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-triangle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99L1.363 17.81l-.006.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alert-triangle-icon {
--icon-name: icon-alert-triangle;
content: '';
}
%with-alert-triangle-mask {
--icon-name: icon-alert-triangle;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-triangle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 5.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M6.953 1.273a2.143 2.143 0 012.874.751l.002.004 5.884 9.774a2.126 2.126 0 01-.768 2.905c-.322.188-.687.289-1.06.293H2.115a2.143 2.143 0 01-1.833-1.074 2.125 2.125 0 01.006-2.124l.006-.01 5.878-9.764.002-.004c.191-.313.46-.571.78-.75zm.502 1.53l-.001.002-5.872 9.754a.626.626 0 00.231.853.644.644 0 00.314.088h11.746a.643.643 0 00.544-.32.626.626 0 000-.62l-5.87-9.755-.002-.001A.635.635 0 008 2.5a.643.643 0 00-.545.304z" clip-rule="evenodd"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alert-triangle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 8.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

9
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alibaba-color-icon {
--icon-name: icon-alibaba-color;
content: '';
}
%with-alibaba-color-mask {
--icon-name: icon-alibaba-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23ED6B1E"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23ED6B1E"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import '../alibaba-color/property-16';
@import '../alibaba-color/property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-alibaba-icon {
--icon-name: icon-alibaba;
content: '';
}
%with-alibaba-mask {
--icon-name: icon-alibaba;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-align-center-icon {
--icon-name: icon-align-center;
content: '';
}
%with-align-center-mask {
--icon-name: icon-align-center;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-center-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM3.75 6a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM3.75 12a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-center-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM5.75 9a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM5.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-align-justify-icon {
--icon-name: icon-align-justify;
content: '';
}
%with-align-justify-mask {
--icon-name: icon-align-justify;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-justify-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-justify-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-align-left-icon {
--icon-name: icon-align-left;
content: '';
}
%with-align-left-mask {
--icon-name: icon-align-left;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-align-right-icon {
--icon-name: icon-align-right;
content: '';
}
%with-align-right-mask {
--icon-name: icon-align-right;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM4.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM4.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-align-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM6.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75z"/></g></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import './property-16';
@import './property-24';
@import './keyframes';
@import './placeholders';

9
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss Normal file
View File

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

10
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss Normal file
View File

@ -0,0 +1,10 @@
%with-amazon-eks-color-icon {
--icon-name: icon-amazon-eks-color;
content: '';
}
%with-amazon-eks-color-mask {
--icon-name: icon-amazon-eks-color;
content: '';
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-amazon-eks-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23amazon-eks-color-16__paint0_linear_879_141)" fill-rule="evenodd" d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.169-2.195H8.963L7.278 7.146V5.447h-.897v4.701z" clip-rule="evenodd"/><path fill="url(%23amazon-eks-color-16__paint1_linear_879_141)" d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path fill="url(%23amazon-eks-color-16__paint2_linear_879_141)" d="M11.273 10.288l-3.185 1.81a.178.178 0 01-.176 0l-3.63-2.062a.173.173 0 01-.088-.15V5.762c0-.062.034-.119.088-.15l3.186-1.81a.172.172 0 00.088-.15V.424a.176.176 0 00-.264-.15L1.088 3.798a.173.173 0 00-.088.15V11.7c0 .061.033.118.088.15l6.824 3.876c.054.03.122.03.176 0l6.204-3.524a.172.172 0 000-.3l-2.843-1.615a.178.178 0 00-.176 0z"/><defs><linearGradient id="amazon-eks-color-16__paint0_linear_879_141" x1="10.691" x2="8.521" y1="9.879" y2="4.634" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint1_linear_879_141" x1="15.693" x2="9.546" y1="10.544" y2="-.213" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint2_linear_879_141" x1="9.433" x2="2.732" y1="14.904" y2="2.88" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
}

3
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--icon-amazon-eks-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23amazon-eks-color-24__paint0_linear_879_136)" d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.105 3.465h-1.183l-2.883-3.233v3.233h-.924V8.473z"/><path fill="url(%23amazon-eks-color-24__paint1_linear_879_136)" d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path fill="url(%23amazon-eks-color-24__paint2_linear_879_136)" d="M16.676 15.322l-4.55 2.626a.25.25 0 01-.252 0L6.69 14.955a.252.252 0 01-.126-.217V8.75c0-.09.048-.172.126-.217l4.55-2.627a.25.25 0 00.126-.217V1a.251.251 0 00-.377-.217L2.125 5.9A.251.251 0 002 6.117v11.255c0 .09.048.172.125.217l9.75 5.627a.25.25 0 00.25 0l8.863-5.115a.251.251 0 000-.435l-4.06-2.344a.25.25 0 00-.252 0z"/><defs><linearGradient id="amazon-eks-color-24__paint0_linear_879_136" x1="15.383" x2="12.246" y1="14.57" y2="7.514" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint1_linear_879_136" x1="22.99" x2="13.995" y1="15.694" y2=".202" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint2_linear_879_136" x1="14.046" x2="4.239" y1="22.021" y2="4.702" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
}

6
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import '../amazon-eks-color/property-16';
@import '../amazon-eks-color/property-24';
@import './keyframes';
@import './placeholders';

15
ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss Normal file
View File

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

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