status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: CSS Components Migration (#5913) 

Migrate roughly half of the base components into base
Adds a target for easily formatting CSS

Further CSS amends/migration (#5921)

1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
This commit is contained in:
John Cowen 2019-06-14 18:27:37 +01:00 committed by John Cowen
parent 2b30667fc7
commit 06b6aff8d0
70 changed files with 719 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui-v2/app/styles/base/color/frame-placeholders.scss
View File

@ -83,12 +83,24 @@
background-color: $yellow-050;
border-color: $color-warning;
}
%frame-yellow-800 {
@extend %frame-border-000;
background-color: $yellow-500;
border-color: $yellow-800;
color: $white;
}
%frame-green-500 {
@extend %frame-border-000;
background-color: $green-050;
border-color: $green-500;
color: $green-500;
}
%frame-green-800 {
@extend %frame-border-000;
background-color: $green-500;
border-color: $green-800;
color: $white;
}
%frame-blue-500 {
@extend %frame-border-000;
background-color: $blue-050;
@ -143,6 +155,12 @@
border-color: $red-800;
color: $white;
}
%frame-red-800 {
@extend %frame-border-000;
background-color: $red-500;
border-color: $red-800;
color: $white;
}
%frame-red-900 {
@extend %frame-border-000;
background-color: $red-700;
@ -155,3 +173,69 @@
border-color: $magenta-600;
color: $magenta-600;
}
%frame-magenta-800 {
@extend %frame-border-000;
background-color: $magenta-500;
border-color: $magenta-800;
color: $white;
}
%frame-steel-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $steel-600;
color: $steel-600;
}
%frame-steel-800 {
@extend %frame-border-000;
background-color: $steel-500;
border-color: $steel-800;
color: $white;
}
%frame-cobalt-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $cobalt-600;
color: $cobalt-600;
}
%frame-cobalt-800 {
@extend %frame-border-000;
background-color: $cobalt-500;
border-color: $cobalt-800;
color: $white;
}
%frame-indigo-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $indigo-600;
color: $indigo-600;
}
%frame-indigo-800 {
@extend %frame-border-000;
background-color: $indigo-500;
border-color: $indigo-800;
color: $white;
}
%frame-teal-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $teal-600;
color: $teal-600;
}
%frame-teal-800 {
@extend %frame-border-000;
background-color: $teal-500;
border-color: $teal-800;
color: $white;
}
%frame-cyan-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $cyan-600;
color: $cyan-600;
}
%frame-cyan-800 {
@extend %frame-border-000;
background-color: $cyan-500;
border-color: $cyan-800;
color: $white;
}

7
ui-v2/app/styles/base/components/action-group/index.scss Normal file
View File

@ -0,0 +1,7 @@
@import '../toggle-button/index';
@import './skin';
@import './layout';
%action-group label:first-of-type {
@extend %toggle-button;
}

46
ui-v2/app/styles/components/action-group/layout.scss → ui-v2/app/styles/base/components/action-group/layout.scss
View File

@ -1,20 +1,11 @@
%action-group label span {
display: none;
}
%action-group-action {
width: 170px;
padding: 10px 10px;
text-align: left;
}
%action-group li > * {
@extend %action-group-action;
}
%action-group {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
position: absolute;
top: 8px;
right: 15px;
}
%action-group label span {
display: none;
}
%action-group label {
display: block;
@ -26,29 +17,47 @@
z-index: -1;
top: 0;
}
%action-group-action {
width: 170px;
padding: 10px 10px;
text-align: left;
}
/* this is actually the group */
%action-group ul {
position: absolute;
right: 0px;
padding: 1px;
}
%action-group li > * {
@extend %action-group-action;
}
%action-group ul::before {
position: absolute;
right: 9px;
content: '';
display: block;
width: 10px;
height: 10px;
}
%action-group ul:not(.left) {
right: 0px;
}
%action-group ul:not(.left)::before {
right: 9px;
}
%action-group ul.left {
left: 0px;
}
%action-group ul.left::before {
left: 9px;
}
%action-group ul:not(.above) {
top: 35px;
top: 23px;
}
%action-group ul:not(.above)::before {
top: -6px;
transform: rotate(45deg);
}
%action-group ul.above {
bottom: 35px;
bottom: 23px;
}
%action-group ul.above::before {
bottom: -6px;
@ -67,6 +76,7 @@
%action-group input[type='radio']:checked ~ .with-confirmation > ul {
display: block;
}
/*TODO: If anything this is %toggle-button*/
%action-group input[type='radio']:checked ~ label[for='actions_close'] {
z-index: 1;
}

11
ui-v2/app/styles/components/action-group/skin.scss → ui-v2/app/styles/base/components/action-group/skin.scss
View File

@ -1,6 +1,3 @@
%action-group label:first-of-type {
@extend %toggle-button;
}
%action-group input[type='radio']:checked + label:first-of-type {
/* frame-gray */
background-color: $gray-050;
@ -10,12 +7,13 @@
cursor: pointer;
}
%action-group label:first-of-type::after {
@extend %with-more-horizontal-icon, %as-pseudo;
@extend %with-more-horizontal-icon;
@extend %as-pseudo;
opacity: 0.7;
}
%action-group ul {
border: $decor-border-100;
border-radius: $radius-small;
border-radius: $decor-radius-100;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
}
%action-group ul::before {
@ -36,3 +34,6 @@
%action-group ul::before {
background-color: $white;
}
%action-group li {
list-style-type: none;
}

29
ui-v2/app/styles/base/components/anchors/index.scss Normal file
View File

@ -0,0 +1,29 @@
%anchor-decoration,
%anchor-decoration-active {
text-decoration: none;
}
%anchor-decoration-intent {
text-decoration: underline;
}
%anchor,
%anchor-intent,
%anchor-active {
color: $color-action;
}
%anchor-decoration:hover,
%anchor-decoration:focus {
@extend %anchor-decoration-intent;
}
%anchor-decoration:active {
@extend %anchor-decoration-active;
}
%anchor {
@extend %anchor-decoration;
}
%anchor:hover,
%anchor:focus {
@extend %anchor-intent;
}
%anchor:active {
@extend %anchor-active;
}

8
ui-v2/app/styles/base/components/breadcrumbs/index.scss Normal file
View File

@ -0,0 +1,8 @@
@import './skin';
@import './layout';
%breadcrumbs li > * {
@extend %breadcrumb;
}
%breadcrumbs strong {
@extend %breadcrumb-selected;
}

11
ui-v2/app/styles/base/components/breadcrumbs/layout.scss Normal file
View File

@ -0,0 +1,11 @@
%breadcrumbs {
display: inline-flex;
}
%breadcrumbs li > * {
display: inline-flex;
align-items: center;
}
%breadcrumbs li > *::before,
%breadcrumbs li {
margin-right: 0.5em;
}

21
ui-v2/app/styles/base/components/breadcrumbs/skin.scss Normal file
View File

@ -0,0 +1,21 @@
%breadcrumbs li {
list-style-type: none;
}
%breadcrumb::before {
content: '❮';
line-height: 1;
font-size: 0.7em;
margin-top: 0.1em;
}
%breadcrumb {
color: $color-action;
}
%breadcrumb-selected {
color: $gray-400;
}
%breadcrumb::before {
color: rgba($color-action, 0.5);
}
%breadcrumb-selected::before {
color: $gray-300;
}

0
ui-v2/app/styles/components/action-group/index.scss → ui-v2/app/styles/base/components/buttons/index.scss
View File

2
ui-v2/app/styles/components/buttons/layout.scss → ui-v2/app/styles/base/components/buttons/layout.scss
View File

@ -32,7 +32,7 @@
margin-right: 8px;
}
%button-compact {
// @extend %button;
/* @extend %button;*/
padding-left: calc(1.6em - 1px) !important;
padding-right: calc(1.6em - 1px) !important;
padding-top: calc(0.35em - 1px) !important;

12
ui-v2/app/styles/components/buttons/skin.scss → ui-v2/app/styles/base/components/buttons/skin.scss
View File

@ -9,9 +9,17 @@
box-shadow: none;
}
%copy-button {
@extend %button, %with-clipboard;
@extend %button;
min-height: 17px;
}
%copy-button::before {
@extend %with-copy-action-icon;
@extend %as-pseudo;
width: 16px;
height: 16px;
position: absolute;
left: 12px;
}
%copy-button:not(:empty) {
padding-left: 38px !important;
}
@ -20,7 +28,7 @@
%dangerous-button {
@extend %button;
border-width: 1px;
border-radius: $radius-small;
border-radius: $decor-radius-100;
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
}
/* color */

0
ui-v2/app/styles/components/breadcrumbs/index.scss → ui-v2/app/styles/base/components/notice/index.scss
View File

1
ui-v2/app/styles/components/notice/layout.scss → ui-v2/app/styles/base/components/notice/layout.scss
View File

@ -2,7 +2,6 @@
position: relative;
padding: 1em;
padding-left: 45px;
margin-bottom: 1em;
}
%notice::before {
position: absolute;

12
ui-v2/app/styles/components/notice/skin.scss → ui-v2/app/styles/base/components/notice/skin.scss
View File

@ -1,5 +1,5 @@
%notice {
border-radius: $radius-small;
border-radius: $decor-radius-100;
border-width: 1px;
}
%notice-success,
@ -10,19 +10,19 @@
@extend %notice;
}
%notice-success {
@extend %frame-green-500, %with-passing;
@extend %frame-green-500;
}
%notice-info {
@extend %frame-blue-500, %with-passing; /* needs a better info button*/
@extend %frame-blue-500;
}
%notice-highlight {
@extend %frame-gray-800, %with-star;
@extend %frame-gray-800;
}
%notice-warning {
@extend %frame-yellow-500, %with-warning;
@extend %frame-yellow-500;
}
%notice-error {
@extend %frame-red-500, %with-critical;
@extend %frame-red-500;
}
%notice-highlight::before {
/* %with-star, bigger */

0
ui-v2/app/styles/components/buttons/index.scss → ui-v2/app/styles/base/components/pill/index.scss
View File

11
ui-v2/app/styles/base/components/pill/layout.scss Normal file
View File

@ -0,0 +1,11 @@
%pill {
display: inline-flex;
align-items: center;
padding: 1px 5px;
position: relative;
}
%pill button {
padding: 0;
height: 10px;
margin-right: 3px;
}

14
ui-v2/app/styles/base/components/pill/skin.scss Normal file
View File

@ -0,0 +1,14 @@
%pill {
border-radius: $decor-radius-100;
}
%pill button {
background-color: $transparent;
/* font-size: 0; */
cursor: pointer;
}
%pill button::before {
@extend %with-cancel-plain-icon;
@extend %as-pseudo;
width: 10px;
height: 10px;
}

0
ui-v2/app/styles/components/notice/index.scss → ui-v2/app/styles/base/components/table/index.scss
View File

48
ui-v2/app/styles/base/components/table/layout.scss Normal file
View File

@ -0,0 +1,48 @@
%table {
width: 100%;
border-collapse: collapse;
}
%table-flex tr {
display: flex;
}
%table-flex tr > * {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
}
%table caption,
%table thead th {
text-align: left;
}
%table-actions {
width: 60px !important;
}
%table th.actions input {
display: none;
}
%table th.actions {
text-align: right;
}
%table td a {
display: block;
}
%table td:not(.actions),
%table td:not(.actions) > * {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
%table td {
height: 50px;
}
%table caption {
margin-bottom: 0.8em;
}
%table th {
padding-bottom: 0.6em;
}
%table th:not(.actions),
%table td:not(.actions),
%table td a {
padding-right: 0.9em;
}

24
ui-v2/app/styles/base/components/table/skin.scss Normal file
View File

@ -0,0 +1,24 @@
%table th,
%table td {
border-bottom: $decor-border-100;
}
%table th {
border-color: $gray-300;
}
%table td {
border-color: $gray-200;
color: $gray-500;
}
%table th,
%table td strong {
color: $gray-600;
}
/* TODO: Add to native selector `tbody th` - will involve moving all
* current th's to `thead th` and changing the templates
*/
%tbody-th {
color: $gray-900;
}
%table td:first-child {
@extend %tbody-th;
}

26
ui-v2/app/styles/base/components/tabs/index.scss Normal file
View File

@ -0,0 +1,26 @@
@import './skin';
@import './layout';
%tab-nav li a {
@extend %tab-button;
}
%tab-nav li:not(.selected) a:hover,
%tab-nav li:not(.selected) a:focus {
@extend %tab-button-intent;
}
%tab-nav li:not(.selected) a:active {
@extend %tab-button-active;
}
/* TODO: need to add an empty class here */
%tab-nav .selected a {
@extend %tab-button-selected;
}
%display-state,
%display-state + * {
display: none;
}
%display-state:checked + * {
display: block;
}
%tab-section > input[type='radio'] {
@extend %display-state;
}

18
ui-v2/app/styles/base/components/tabs/layout.scss Normal file
View File

@ -0,0 +1,18 @@
%tab-nav {
clear: both;
}
%tab-nav ul {
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
}
%tab-button {
padding-left: 16px;
padding-right: 16px;
}
%tab-button {
display: inline-block;
padding-top: 13px;
padding-bottom: 13px;
}

18
ui-v2/app/styles/components/tabs/skin.scss → ui-v2/app/styles/base/components/tabs/skin.scss
View File

@ -7,26 +7,26 @@
/* %frame-gray-something */
border-color: $gray-200;
}
%tab-nav ul {
list-style-type: none;
}
%tab-nav label {
cursor: pointer;
}
%tab-nav a {
%tab-button {
white-space: nowrap;
text-decoration: none;
}
%tab-nav a {
%tab-button {
border-bottom: $decor-border-200;
}
%tab-nav a {
%tab-button {
border-color: $color-transparent;
color: $gray-500;
}
%tab-nav li:not(.selected) a:hover,
%tab-nav li:not(.selected) a:focus,
%tab-nav li:not(.selected) a:active {
%tab-button-intent,
%tab-button-active {
/* %frame-gray-something */
border-color: $color-transparent;
background-color: $gray-100;
}
%tab-nav .selected a {
@extend %frame-magenta-300;
}

0
ui-v2/app/styles/components/pill/index.scss → ui-v2/app/styles/base/components/toggle-button/index.scss
View File

9
ui-v2/app/styles/base/components/toggle-button/layout.scss Normal file
View File

@ -0,0 +1,9 @@
/* TODO: This should be merged with ghost-button*/
%toggle-button {
min-width: 30px;
min-height: 30px;
/* center */
display: inline-flex;
align-items: center;
justify-content: center;
}

12
ui-v2/app/styles/components/toggle-button/skin.scss → ui-v2/app/styles/base/components/toggle-button/skin.scss
View File

@ -1,11 +1,17 @@
%toggle-button {
border-radius: $radius-small;
border-radius: $decor-radius-100;
cursor: pointer;
}
%toggle-button-intent {
background-color: $gray-050;
}
%toggle-button-active {
background-color: $gray-100;
}
%toggle-button:hover,
%toggle-button:focus {
background-color: $gray-050;
@extend %toggle-button-intent;
}
%toggle-button:active {
background-color: $gray-100;
@extend %toggle-button-active;
}

32
ui-v2/app/styles/base/components/tooltip/index.scss Normal file
View File

@ -0,0 +1,32 @@
@import './skin';
@import './layout';
%with-pseudo-tooltip,
%with-tooltip {
@extend %tooltip;
}
%with-pseudo-tooltip::before,
%with-tooltip [role='tooltip'] {
@extend %tooltip-bubble;
}
%with-pseudo-tooltip::after,
%with-tooltip [role='tooltip']::after {
@extend %tooltip-tail;
}
%with-pseudo-tooltip::after,
%with-pseudo-tooltip::before,
%with-tooltip [role='tooltip']::after,
%with-tooltip [role='tooltip'] {
@extend %blink-in-fade-out;
}
%with-pseudo-tooltip:hover::after,
%with-pseudo-tooltip:hover::before,
%with-pseudo-tooltip:focus::after,
%with-pseudo-tooltip:focus::before,
%with-tooltip:hover [role='tooltip']::after,
%with-tooltip:hover [role='tooltip'],
%with-tooltip:focus [role='tooltip']::after,
%with-tooltip:focus [role='tooltip'] {
@extend %blink-in-fade-out-active;
}

48
ui-v2/app/styles/base/components/tooltip/layout.scss Normal file
View File

@ -0,0 +1,48 @@
%tooltip {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: text-top;
}
%tooltip-bubble,
%tooltip-tail {
position: absolute;
z-index: 1;
}
%tooltip-bubble {
padding: 12px;
white-space: nowrap;
content: attr(data-tooltip);
text-indent: 0;
/* TODO: should this be hardcoded here ? */
font-size: 14px;
/* structure */
min-width: 192px;
}
%tooltip-bubble {
/* TODO: structure says left aligned, check this is correct */
text-align: center;
}
%tooltip-tail {
content: '';
transform: scale(1, 0.5);
width: 0;
height: 0;
}
/* TODO: positioning */
%tooltip-bubble {
bottom: calc(100% + 5px);
}
%tooltip-tail {
left: 50%;
margin-left: -9px;
bottom: -13px;
}
/* TODO: Try and use the same vertical positioning all tooltips */
/* this is only for pseudo tooltips be want to avoid */
/* specifiying pseudo in this file */
%tooltip::after {
bottom: calc(100% - 7px);
}

19
ui-v2/app/styles/base/components/tooltip/skin.scss Normal file
View File

@ -0,0 +1,19 @@
%tooltip-bubble,
%tooltip-tail {
color: $white;
background-color: $gray-500;
}
%tooltip-tail {
background-color: transparent !important;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 18px solid $gray-500;
}
%tooltip-bubble {
font-weight: normal;
border-radius: $decor-radius-200;
/* this isn't quite like the values in structure */
/* but this looks closer visually */
/* TODO: try and get this closer to structure */
box-shadow: 0 2px 5px 0 rgba($black, 0.31);
}

174
ui-v2/app/styles/base/icons/base-variables.scss
View File

@ -1,99 +1,101 @@
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23373a42"/></svg>');
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23000"/></svg>');
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 16.9l-4.6-4.6 4.6-4.6-1.4-1.4-6 6 6 6 1.4-1.4z" fill="%23000"/></svg>');
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.3 7.7l4.6 4.6-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z" fill="%23000"/></svg>');
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 16l4.6-4.6 4.6 4.6 1.4-1.4-6-6-6 6L7.4 16z" fill="%23000"/></svg>');
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 16.9l-4.6-4.6 4.6-4.6-1.4-1.4-6 6 6 6 1.4-1.4z" fill="%23000"/></svg>');
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.3 7.7l4.6 4.6-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z" fill="%23000"/></svg>');
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 16l4.6-4.6 4.6 4.6 1.4-1.4-6-6-6 6L7.4 16z" fill="%23000"/></svg>');
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" fill="%23000"/></svg>');
$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
$code-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" fill="%23000"/></svg>');
$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
$code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.796v3.058h3.058l8.153-8.154-3.057-3.057L5 15.796zm1.02 0h1.018v1.02h1.02v1.018H6.02v-2.038zm12.536-7.44L17.23 9.68l-3.058-3.057 1.325-1.326a1.015 1.015 0 0 1 1.436-.001h.002l1.62 1.622c.397.397.397 1.04 0 1.437z" fill="%23000"/></svg>');
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
$docs-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 11H20v9.5c0 .786-.714 1.5-1.5 1.5h-14c-.786 0-1.5-.714-1.5-1.5v-17C3 2.714 3.714 2 4.5 2H13v1.5H4.5v17h14V11zM7 17.714h9v-1.428H7v1.428zm0-2.857h9V13.43H7v1.428zM7 12h9v-1.429H7V12zm0-4.286V6.286h5v1.428H7zM17 2.5V1h6v6h-1.5V3.429L18 7l-1-1 3.5-3.5H17z" fill="%23000"/></svg>');
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.796v3.058h3.058l8.153-8.154-3.057-3.057L5 15.796zm1.02 0h1.018v1.02h1.02v1.018H6.02v-2.038zm12.536-7.44L17.23 9.68l-3.058-3.057 1.325-1.326a1.015 1.015 0 0 1 1.436-.001h.002l1.62 1.622c.397.397.397 1.04 0 1.437z" fill="%23000"/></svg>');
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
$flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.398 8.04c-.792 0-1.44-.66-1.44-1.44 0-.78.66-1.44 1.44-1.44.78 0 1.44.66 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.44 10.56c0 .792-.66 1.44-1.44 1.44-.78 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44m.96-12c0-1.332-1.068-2.4-2.4-2.4a2.391 2.391 0 0 0-1.2 4.464v7.872A2.39 2.39 0 0 0 7.398 21a2.39 2.39 0 0 0 1.2-4.464V8.664a2.386 2.386 0 0 0 1.2-2.064m7.2 13.44c-.792 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.2-3.504V9c-.036-.936-.408-1.764-1.128-2.472S15.534 5.436 14.598 5.4h-1.2V3l-3.6 3.6 3.6 3.6V7.8h1.2c.324.024.576.132.828.372s.36.504.372.828v7.536a2.392 2.392 0 0 0 1.2 4.464 2.39 2.39 0 0 0 1.2-4.464" fill="%23000"/></svg>');
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
$flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.398 8.04c-.792 0-1.44-.66-1.44-1.44 0-.78.66-1.44 1.44-1.44.78 0 1.44.66 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.44 10.56c0 .792-.66 1.44-1.44 1.44-.78 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44m.96-12c0-1.332-1.068-2.4-2.4-2.4a2.391 2.391 0 0 0-1.2 4.464v7.872A2.39 2.39 0 0 0 7.398 21a2.39 2.39 0 0 0 1.2-4.464V8.664a2.386 2.386 0 0 0 1.2-2.064m7.2 13.44c-.792 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.2-3.504V9c-.036-.936-.408-1.764-1.128-2.472S15.534 5.436 14.598 5.4h-1.2V3l-3.6 3.6 3.6 3.6V7.8h1.2c.324.024.576.132.828.372s.36.504.372.828v7.536a2.392 2.392 0 0 0 1.2 4.464 2.39 2.39 0 0 0 1.2-4.464" fill="%23000"/></svg>');
$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.074 10.015l-2.295 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.626-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.626.611.938 1.357.938 2.24 0 .882-.309 1.632-.926 2.25m-9.437 4.83l-.204.21a6.818 6.818 0 0 1-.237.238 2.62 2.62 0 0 1-.209.166.884.884 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586 2.482 2.482 0 0 1 .401-.448l.21-.204A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807m8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.62 2.62 0 0 1 .209-.166.884.884 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586 2.482 2.482 0 0 1-.401.448l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74" fill="%23000"/></svg>');
$learn-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.409 5.273l8.915 3.958c.46.204.676.681.676 1.108 0 .427-.216.904-.676 1.108l-3.111 1.381v3.767c0 .145-.05.279-.134.385-.157.35-.434.633-.743.858-.377.274-.855.502-1.39.684-1.073.365-2.462.578-3.963.578-1.5 0-2.89-.213-3.962-.578-.536-.182-1.014-.41-1.39-.684-.31-.225-.586-.509-.744-.858a.618.618 0 0 1-.133-.385v-2.824l.029-.945L5.5 12.5c-.38.525-.897 1.436-1.023 2.536a1.122 1.122 0 0 1 .007 1.912c.015.187.01.38-.007.566a3.863 3.863 0 0 1-.032.247h.028c0 .004.003.028.016.074.015.052.04.119.077.196.074.156.186.333.327.497.3.35.628.533.9.533L5.014 20c-.346 0-.726-.252-1.14-.756-.583.504-1.04.756-1.374.756l-.404-.987c.37 0 .703-.266.938-.812.112-.26.181-.546.207-.806a1.625 1.625 0 0 0-.017-.496 1.122 1.122 0 0 1 .329-1.976c.134-1.173.522-2.041.942-2.668l-1.819-.808C2.216 11.243 2 10.766 2 10.34c0-.427.216-.904.676-1.108l8.915-3.958c.262-.116.556-.116.818 0zm-.432 3.745l-5.52 2.749L12 14.227l8.758-3.888L12 6.45l-8.758 3.89 2.11.937L11 8.5l.977.518zm4.994 4.362l-4.562 2.025a1.002 1.002 0 0 1-.818 0L7.01 13.371l-.013.429v2.6a.553.553 0 0 1 .008.027c.022.079.107.224.358.407.244.178.6.356 1.059.512.917.313 2.167.512 3.562.512s2.645-.2 3.563-.512c.46-.156.814-.334 1.058-.512.251-.183.336-.328.358-.407a.553.553 0 0 1 .009-.027v-3.02zM17 2.5V1h6v6h-1.5V3.429L18.25 6.75 17 6l3.5-3.5H17z" fill="%23000"/></svg>');
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.074 10.015l-2.295 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.626-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.626.611.938 1.357.938 2.24 0 .882-.309 1.632-.926 2.25m-9.437 4.83l-.204.21a6.818 6.818 0 0 1-.237.238 2.62 2.62 0 0 1-.209.166.884.884 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586 2.482 2.482 0 0 1 .401-.448l.21-.204A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807m8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.62 2.62 0 0 1 .209-.166.884.884 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586 2.482 2.482 0 0 1-.401.448l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74" fill="%23000"/></svg>');
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-3.876 5.767H9.473l2.319 3.938 2.332-3.938zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" fill="%23000"/></svg>');
$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 21.78L4.22 5 3 6.22l2.04 2.04C4.42 8.6 4 9.25 4 10v10c0 1.1.9 2 2 2h12c.23 0 .45-.05.66-.12L19.78 23 21 21.78zM8.9 6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H9.66L20 18.34V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5-2.56 0-4.64 1.93-4.94 4.4L8.9 7.24V6z" fill="%23000"/></svg>');
$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-3.876-6.233H9.473l2.319 3.938 2.332-3.938z" fill="%23000"/></svg>');
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-3.876 5.767H9.473l2.319 3.938 2.332-3.938zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" fill="%23000"/></svg>');
$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 21.78L4.22 5 3 6.22l2.04 2.04C4.42 8.6 4 9.25 4 10v10c0 1.1.9 2 2 2h12c.23 0 .45-.05.66-.12L19.78 23 21 21.78zM8.9 6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H9.66L20 18.34V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5-2.56 0-4.64 1.93-4.94 4.4L8.9 7.24V6z" fill="%23000"/></svg>');
$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-3.876-6.233H9.473l2.319 3.938 2.332-3.938z" fill="%23000"/></svg>');
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
$minus-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" d="M0 0h9v1.5H0z"/></svg>');
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill="%23000"/></svg>');
$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill="%23000"/></svg>');
$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
$run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M6.5 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm11-3a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-4 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" id="a"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="%23000"/></svg>');
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="%23000"/></svg>');
$star-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M5 7.196L7.575 8.75l-.683-2.93 2.275-1.97-2.996-.254L5 .833 3.83 3.596.832 3.85l2.275 1.97-.683 2.93z"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6z" fill="%23000"/></svg>');
$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9z" fill="%23000"/></svg>');
$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6z" fill="%23000"/></svg>');
$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9z" fill="%23000"/></svg>');
$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M19 11.75V8l-7-4-7 4v8l7 4 7-4v-4.25zm-1 .571l-2 1.143V9.5L12 7 8 9.5v3.964l-2-1.143V8.5l6-3.25 6 3.25v3.821zM12 2l9 5v10l-9 5-9-5V7l9-5zm0 6.25L15 10v4l-3 1.75L9 14v-4l3-1.75zM12 17l6-3.75v2.25l-6 3.25-6-3.25v-2.25L12 17z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2L5 8v8l7 4 7-4V8l-7-4zm.001 1L18 8.5v7L12.001 19 6 15.5v-7L12.001 5z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7h2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h2v12h8V7zm3-1H5V4h3.5l1-1h5l1 1H19v2zm-9 11.188V7h1v10.188h-1zm3 0V7h1v10.188h-1z" fill="%23000"/></svg>');
$tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" fill="%23000"/></svg>');
$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="%23000"/></svg>');
$upload-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="%23000"/></svg>');
$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23000"/></svg>');
$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-team-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7a2.5 2.5 0 0 0 0 5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" fill="%23000"/></svg>');
$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="%23000"/></svg>');
$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="%23000"/></svg>');
$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M19 11.75V8l-7-4-7 4v8l7 4 7-4v-4.25zm-1 .571l-2 1.143V9.5L12 7 8 9.5v3.964l-2-1.143V8.5l6-3.25 6 3.25v3.821zM12 2l9 5v10l-9 5-9-5V7l9-5zm0 6.25L15 10v4l-3 1.75L9 14v-4l3-1.75zM12 17l6-3.75v2.25l-6 3.25-6-3.25v-2.25L12 17z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2L5 8v8l7 4 7-4V8l-7-4zm.001 1L18 8.5v7L12.001 19 6 15.5v-7L12.001 5z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7h2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h2v12h8V7zm3-1H5V4h3.5l1-1h5l1 1H19v2zm-9 11.188V7h1v10.188h-1zm3 0V7h1v10.188h-1z" fill="%23000"/></svg>');
$tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" fill="%23000"/></svg>');
$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="%23000"/></svg>');
$upload-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="%23000"/></svg>');
$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23000"/></svg>');
$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-team-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7a2.5 2.5 0 0 0 0 5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" fill="%23000"/></svg>');
$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="%23000"/></svg>');
$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="%23000"/></svg>');

10
ui-v2/app/styles/base/icons/icon-placeholders.scss
View File

@ -153,6 +153,11 @@
background-image: $disabled-svg;
}
%with-docs-icon {
@extend %with-icon;
background-image: $docs-svg;
}
%with-download-icon {
@extend %with-icon;
background-image: $download-svg;
@ -263,6 +268,11 @@
background-image: $kubernetes-logo-color-svg;
}
%with-learn-icon {
@extend %with-icon;
background-image: $learn-svg;
}
%with-link-icon {
@extend %with-icon;
background-image: $link-svg;

51
ui-v2/app/styles/base/typography/base-placeholders.scss Normal file
View File

@ -0,0 +1,51 @@
%typo-body {
font-size: $typo-size-600;
font-family: $typo-family-sans;
line-height: $typo-lead-700;
}
%typo-header {
line-height: $typo-lead-200;
}
%h1,
%h2,
%h3,
%h4,
%h5,
%h6 {
@extend %typo-header;
}
%h1 {
font-weight: $typo-weight-bold;
}
%h2,
%h3 {
font-weight: $typo-weight-semibold;
}
%h1 {
font-size: $typo-size-100;
}
%h2 {
font-size: $typo-size-200;
}
%h3 {
font-size: $typo-size-300;
}
%typo-p {
line-height: inherit;
font-size: inherit;
}
%p,
%p1,
%p2,
%p3 {
@extend %typo-p;
}
%p1 {
font-size: $typo-size-600;
}
%p2 {
font-size: $typo-size-700;
}
%p3 {
font-size: $typo-size-800;
}

2
ui-v2/app/styles/base/typography/base-variables.scss
View File

@ -16,7 +16,7 @@ $typo-weight-medium: 500;
$typo-weight-semibold: 600;
$typo-weight-bold: 700;
$typo-lead-000: 0;
$type-lead-050: 1;
$typo-lead-050: 1;
$typo-lead-100: 1.2;
$typo-lead-200: 1.25;
$typo-lead-300: 1.28;

1
ui-v2/app/styles/base/typography/index.scss
View File

@ -1,2 +1,3 @@
@import './base-variables';
@import './semantic-variables';
@import './base-placeholders';

14
ui-v2/app/styles/components/action-group.scss
View File

@ -1,4 +1,16 @@
@import './action-group/index';
@import '../base/components/action-group/index';
.action-group {
@extend %action-group;
}
/* This needs to go into table */
%action-group {
position: absolute;
top: 8px;
right: 15px;
}
%action-group ul.above {
bottom: 35px;
}
%action-group ul:not(.above) {
top: 35px;
}

3
ui-v2/app/styles/components/anchors.scss
View File

@ -1,4 +1,5 @@
@import './anchors/index';
@import '../base/components/anchors/index';
// TODO: This should go, its for links in tables/action-groups
%main-content a {
color: $gray-900;
}

10
ui-v2/app/styles/components/anchors/index.scss
View File

@ -1,10 +0,0 @@
%anchor:hover,
%anchor:focus {
text-decoration: underline;
}
%anchor,
%anchor:hover,
%anchor:focus,
%anchor:active {
color: $color-action;
}

6
ui-v2/app/styles/components/app-view.scss
View File

@ -1,6 +1,6 @@
@import './app-view/index';
@import './filter-bar/index';
@import './buttons/index';
@import '../base/components/buttons/index';
main {
@extend %app-view;
}
@ -18,9 +18,7 @@ main {
// TODO: This should be its own component
%app-view h1 span[data-tooltip] {
@extend %with-external-source-icon;
// TODO: Look to remove this, right now its needed but this
// should automaticaly vertically center
margin-top: 20px;
margin-top: 13px;
}
%app-view h1 span.kind-proxy {
@extend %frame-gray-900;

6
ui-v2/app/styles/components/breadcrumbs.scss
View File

@ -1,4 +1,8 @@
@import './breadcrumbs/index';
@import '../base/components/breadcrumbs/index';
main header nav:first-child {
position: absolute;
top: -38px;
}
main header nav:first-child ol {
@extend %breadcrumbs;
}

10
ui-v2/app/styles/components/breadcrumbs/layout.scss
View File

@ -1,10 +0,0 @@
%breadcrumbs {
position: absolute;
top: -38px; // %app-view:margin-top - 15px;
}
%breadcrumbs ol {
display: flex;
}
%breadcrumbs li {
margin-right: 5px;
}

18
ui-v2/app/styles/components/breadcrumbs/skin.scss
View File

@ -1,18 +0,0 @@
%breadcrumbs li > * {
@extend %with-chevron;
}
%breadcrumbs li > strong::before {
color: $gray-300;
}
%breadcrumbs li > a::before {
color: rgba($color-action, 0.5);
}
%breadcrumbs ol {
list-style-type: none;
}
%breadcrumbs a {
color: $color-action;
}
%breadcrumbs strong {
color: $gray-400;
}

5
ui-v2/app/styles/components/buttons.scss
View File

@ -1,4 +1,7 @@
@import './buttons/index';
@import '../base/components/buttons/index';
%copy-button {
@extend %with-clipboard;
}
button[type='submit'],
a.type-create {
@extend %primary-button;

3
ui-v2/app/styles/components/index.scss
View File

@ -2,7 +2,6 @@
@import './anchors';
@import './progress';
@import './buttons';
@import './toggle-button';
@import './secret-button';
@import './tabs';
@import './pill';
@ -31,4 +30,4 @@
@import './feedback-dialog';
@import './modal-dialog';
@import './notice';
@import './with-tooltip';
@import './tooltip';

22
ui-v2/app/styles/components/notice.scss
View File

@ -1,4 +1,24 @@
@import './notice/index';
@import '../base/components/notice/index';
%notice {
margin-bottom: 1em;
}
/* These need replacing with new icons */
%notice-success {
@extend %with-passing;
}
%notice-info {
@extend %with-passing; /* needs a better info button*/
}
%notice-highlight {
@extend %with-star;
}
%notice-warning {
@extend %with-warning;
}
%notice-error {
@extend %with-critical;
}
/**/
.notice.warning {
@extend %notice-warning;
}

2
ui-v2/app/styles/components/pill.scss
View File

@ -1,4 +1,4 @@
@import './pill/index';
@import '../base/components/pill/index';
td strong,
%tag-list span {
@extend %pill;

8
ui-v2/app/styles/components/pill/layout.scss
View File

@ -1,8 +0,0 @@
%pill {
display: inline-block;
padding: 1px 5px;
}
%pill button {
padding: 0;
margin-right: 3px;
}

13
ui-v2/app/styles/components/pill/skin.scss
View File

@ -1,13 +0,0 @@
%pill {
border-radius: $radius-small;
}
%pill button {
background-color: transparent;
font-size: 0;
cursor: pointer;
}
%pill button::before {
@extend %with-cancel-plain-icon, %as-pseudo;
width: 10px;
height: 10px;
}

28
ui-v2/app/styles/components/table.scss
View File

@ -1,5 +1,8 @@
@import './icons/index';
@import './table/index';
@import '../base/components/table/index';
table {
@extend %table, %table-flex;
}
html.template-service.template-list td:first-child a span,
html.template-node.template-show #services td:first-child a span,
@ -29,33 +32,20 @@ table:not(.sessions) td:first-child {
th {
overflow: visible;
}
th span {
@extend %tooltip;
margin-left: 2px;
vertical-align: text-top;
}
th span::after {
@extend %with-info-circle-outline-icon, %as-pseudo;
opacity: 0.6;
}
th span em::after {
@extend %tooltip-tail;
@extend %blink-in-fade-out;
top: auto !important;
bottom: -13px;
th span {
@extend %with-tooltip;
margin-left: 2px;
}
th span em {
@extend %tooltip-bubble;
@extend %blink-in-fade-out;
width: 250px;
font-style: normal;
white-space: normal !important;
}
th span:hover em::after,
th span:hover em {
@extend %blink-in-fade-out-active;
}
/* ideally these would be in route css files, but left here as they */
/* accomplish the same thing (hide non-essential columns for tables) */
@media #{$--lt-medium-table} {
@ -68,6 +58,10 @@ th span:hover em {
}
}
@media #{$--lt-wide-table} {
/* hide actions on narrow screens, you can always click in do everything from there */
tr > .actions {
display: none;
}
html.template-intention.template-list tr > :nth-last-child(2) {
display: none;
}

2
ui-v2/app/styles/components/table/index.scss
View File

@ -1,2 +0,0 @@
@import './skin';
@import './layout';

48
ui-v2/app/styles/components/table/layout.scss
View File

@ -1,48 +0,0 @@
table {
width: 100%;
}
%table-actions {
width: 60px !important;
}
th.actions input {
display: none;
}
th.actions {
text-align: right;
}
table tr {
display: flex;
}
table td {
display: inline-flex;
align-items: center;
height: 50px;
}
table td a {
display: block;
}
table caption {
text-align: left;
margin-bottom: 0.8em;
}
table th {
padding-bottom: 0.6em;
}
table th:not(.actions),
table td:not(.actions),
table td a {
padding-right: 0.9em;
}
th,
td:not(.actions),
td:not(.actions) a {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* hide actions on narrow screens, you can always click in do everything from there */
@media #{$--lt-wide-table} {
tr > .actions {
display: none;
}
}

23
ui-v2/app/styles/components/table/skin.scss
View File

@ -1,23 +0,0 @@
th,
td {
border-bottom: $decor-border-100;
}
th {
border-color: $gray-300;
}
td {
border-color: $gray-200;
color: $gray-500;
}
th,
td strong {
color: $gray-600;
}
// TODO: Add to native selector `tbody th` - will involve moving all
// current th's to `thead th` and changing the templates
%tbody-th {
color: $gray-900;
}
td:first-child {
@extend %tbody-th;
}

7
ui-v2/app/styles/components/tabs.scss
View File

@ -1,7 +1,12 @@
@import './tabs/index';
@import '../base/components/tabs/index';
.tab-nav {
@extend %tab-nav;
}
.tab-section {
@extend %tab-section;
/* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
margin-top: 0 !important;
}
%tab-button-selected {
@extend %frame-magenta-300;
}

2
ui-v2/app/styles/components/tabs/index.scss
View File

@ -1,2 +0,0 @@
@import './skin';
@import './layout';

34
ui-v2/app/styles/components/tabs/layout.scss
View File

@ -1,34 +0,0 @@
%tab-section {
/* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
margin-top: 0 !important;
}
%tab-nav {
clear: both;
}
@media #{$--horizontal-tabs} {
%tab-nav ul {
display: flex;
align-items: center;
}
%tab-nav a {
padding-left: 16px;
padding-right: 16px;
}
}
@media #{$--lt-horizontal-tabs} {
%tab-nav li {
width: 100%;
}
}
%tab-nav a {
display: block;
padding-top: 13px;
padding-bottom: 13px;
}
%tab-section > input[type='radio'],
%tab-section > input[type='radio'] + * {
display: none;
}
%tab-section > input[type='radio']:checked + * {
display: block;
}

3
ui-v2/app/styles/components/tabular-details/layout.scss
View File

@ -12,6 +12,9 @@
position: absolute;
top: 8px;
}
%tabular-details-toggle-button span {
display: none;
}
%tabular-details td > label {
@extend %tabular-details-toggle-button;
right: 2px;

1
ui-v2/app/styles/components/toggle-button.scss
View File

@ -1 +0,0 @@
@import './toggle-button/index';

2
ui-v2/app/styles/components/toggle-button/index.scss
View File

@ -1,2 +0,0 @@
@import './skin.scss';
@import './layout.scss';

11
ui-v2/app/styles/components/toggle-button/layout.scss
View File

@ -1,11 +0,0 @@
%toggle-button {
width: 30px;
height: 30px;
/* center */
display: flex;
align-items: center;
justify-content: center;
}
%toggle-button span {
display: none;
}

12
ui-v2/app/styles/components/tooltip.scss Normal file
View File

@ -0,0 +1,12 @@
@import '../base/components/tooltip/index';
%app-view h1 span[data-tooltip] {
@extend %with-pseudo-tooltip;
text-indent: -9000px;
font-size: 0;
}
/* override structure min-width for the moment */
/* TODO: Clarify whether these should actually use */
/* the min-width from structure */
%tooltip-bubble {
min-width: 0;
}

4
ui-v2/app/styles/components/with-tooltip.scss
View File

@ -1,4 +0,0 @@
@import './with-tooltip/index';
%app-view h1 span[data-tooltip] {
@extend %with-pseudo-tooltip;
}

27
ui-v2/app/styles/components/with-tooltip/index.scss
View File

@ -1,27 +0,0 @@
@import './skin';
@import './layout';
%with-pseudo-tooltip {
@extend %tooltip;
}
%with-pseudo-tooltip::before {
@extend %tooltip-bubble;
}
%with-pseudo-tooltip::after {
@extend %tooltip-tail;
}
%with-pseudo-tooltip {
text-indent: -9000px;
font-size: 0;
top: -7px;
}
%with-pseudo-tooltip::after,
%with-pseudo-tooltip::before {
@extend %blink-in-fade-out;
}
%with-pseudo-tooltip:hover::after,
%with-pseudo-tooltip:hover::before,
%with-pseudo-tooltip:focus::after,
%with-pseudo-tooltip:focus::before {
@extend %blink-in-fade-out-active;
}

35
ui-v2/app/styles/components/with-tooltip/layout.scss
View File

@ -1,35 +0,0 @@
%tooltip {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: text-top;
}
%tooltip-bubble,
%tooltip-tail {
position: absolute;
z-index: 1;
}
%tooltip-bubble {
padding: 10px;
bottom: calc(100% + 5px);
text-align: center;
white-space: nowrap;
content: attr(data-tooltip);
// incase you are using text-indent to hide the
// text of the element %with-tooltip
text-indent: 0;
}
%tooltip-tail {
content: '';
left: 50%;
margin-left: -10px;
top: -10px;
transform: scale(1, 0.5);
width: 0;
height: 0;
background-color: transparent !important;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 18px solid $gray-800;
}

9
ui-v2/app/styles/components/with-tooltip/skin.scss
View File

@ -1,9 +0,0 @@
%tooltip-bubble,
%tooltip-tail {
color: $white;
background-color: $gray-800;
}
%tooltip-bubble {
border-radius: $decor-radius-200;
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
}

2
ui-v2/app/templates/components/token-list.hbs
View File

@ -22,7 +22,7 @@
{{if item.Local 'local' 'global'}}
</td>
<td>
{{item.Description}}
<p>{{item.Description}}</p>
</td>
{{/block-slot}}
{{/tabular-collection}}

2
ui-v2/app/templates/dc/acls/policies/index.hbs
View File

@ -43,7 +43,7 @@
{{join ', ' (policy/datacenters item)}}
</td>
<td data-test-description>
{{item.Description}}
<p>{{item.Description}}</p>
</td>
{{/block-slot}}
{{#block-slot 'actions' as |index change checked|}}

2
ui-v2/app/templates/dc/acls/roles/index.hbs
View File

@ -40,7 +40,7 @@
<a href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a>
</td>
<td data-test-description>
{{item.Description}}
<p>{{item.Description}}</p>
</td>
<td>
{{#each item.Policies as |item|}}

4
ui-v2/app/templates/dc/acls/tokens/index.hbs
View File

@ -48,11 +48,11 @@
{{if item.Local 'local' 'global' }}
</td>
<td data-test-description>
{{default item.Description item.Name}}
<p>{{default item.Description item.Name}}</p>
</td>
<td colspan={{if (not-eq item.AccessorID token.AccessorID) '2' }}>
{{#if (token/is-legacy item) }}
Legacy tokens have embedded rules.
<p>Legacy tokens have embedded rules.</p>
{{ else }}
{{#each (append item.Policies item.Roles) as |item|}}
<strong data-test-policy class={{policy/typeof item}}>{{item.Name}}</strong>

3
ui-v2/app/templates/dc/services/index.hbs
View File

@ -23,7 +23,8 @@
}}
{{#block-slot 'header'}}
<th style={{remainingWidth}}>Service</th>
<th style={{totalWidth}}>Health Checks<span><em>The number of health checks for the service on all nodes</em></span></th>
<th>Type</th>
<th style={{totalWidth}}>Health Checks<span><em role="tooltip">The number of health checks for the service on all nodes</em></span></th>
<th style={{remainingWidth}}>Tags</th>
{{/block-slot}}
{{#block-slot 'row'}}

1
ui-v2/package.json
View File

@ -14,6 +14,7 @@
"lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests",
"lint:js": "eslint -c .eslintrc.js --fix ./*.js ./.*.js app config lib server tests",
"format:js": "prettier --write \"{app,config,lib,server,tests}/**/*.js\" ./*.js ./.*.js",
"format:css": "prettier --write \"app/styles/**/*.*\"",
"start": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
"start:api": "api-double --dir ./node_modules/@hashicorp/consul-api-double",
"test": "ember test --test-port=${EMBER_TEST_PORT:-7357}",