ui: Alias all our Structure Icons to Flight Icons (#12209)

This commit is contained in:
John Cowen 2022-02-02 13:24:47 +00:00 committed by GitHub
parent 57cc86e30a
commit 404523f7ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 6759 additions and 3042 deletions

3
.changelog/12209.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:enhancement
ui: Use @hashicorp/flight icons for all our icons.
```

View File

@ -100,7 +100,6 @@
%sort-button::before { %sort-button::before {
@extend %with-sort-mask, %as-pseudo; @extend %with-sort-mask, %as-pseudo;
position: relative; position: relative;
top: 4px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }

View File

@ -1,3 +1,31 @@
.consul-external-source { .consul-external-source {
@extend %pill-200, %frame-gray-600, %p1; @extend %pill-200, %frame-gray-600, %p1;
} }
.consul-external-source.kubernetes::before {
@extend %with-logo-kubernetes-color-icon, %as-pseudo;
}
.consul-external-source.terraform::before {
@extend %with-logo-terraform-color-icon, %as-pseudo;
}
.consul-external-source.nomad::before {
@extend %with-logo-nomad-color-icon, %as-pseudo;
}
.consul-external-source.consul::before,
.consul-external-source.consul-api-gateway::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
}
.consul-external-source.vault::before {
@extend %with-vault-100;
}
.consul-external-source.aws::before {
@extend %with-aws-100;
}
.consul-external-source.leader::before {
@extend %with-star-outline-mask, %as-pseudo;
}
.consul-external-source.jwt::before {
@extend %with-logo-jwt-color-icon, %as-pseudo;
}
.consul-external-source.oidc::before {
@extend %with-logo-oidc-color-icon, %as-pseudo;
}

View File

@ -1,9 +1,7 @@
%pill-allow::before, %pill-allow::before,
%pill-deny::before, %pill-deny::before,
%pill-l7::before { %pill-l7::before {
@extend %as-pseudo;
margin-right: 5px; margin-right: 5px;
font-size: 0.9em;
} }
%pill-allow, %pill-allow,
%pill-deny, %pill-deny,
@ -24,11 +22,11 @@
@extend %frame-gray-900; @extend %frame-gray-900;
} }
%pill-allow::before { %pill-allow::before {
@extend %with-arrow-right-mask; @extend %with-allow-300;
} }
%pill-deny::before { %pill-deny::before {
@extend %with-deny-color-mask; @extend %with-deny-300;
} }
%pill-l7::before { %pill-l7::before {
@extend %with-layers-mask; @extend %with-l7-300;
} }

View File

@ -1,12 +1,11 @@
.consul-intention-fieldsets { .consul-intention-fieldsets {
.value-allow > :last-child::before { .value-allow > :last-child::before {
@extend %with-arrow-right-mask, %as-pseudo; @extend %with-allow-500;
color: rgb(var(--tone-green-500));
} }
.value-deny > :last-child::before { .value-deny > :last-child::before {
@extend %with-deny-color-icon, %as-pseudo; @extend %with-deny-500;
} }
.value- > :last-child::before { .value- > :last-child::before {
@extend %with-layers-mask, %as-pseudo; @extend %with-l7-500;
} }
} }

View File

@ -20,31 +20,3 @@ span.policy-node-identity::before {
span.policy-service-identity::before { span.policy-service-identity::before {
content: 'Service Identity: '; content: 'Service Identity: ';
} }
%pill.kubernetes::before {
@extend %with-logo-kubernetes-color-icon, %as-pseudo;
}
%pill.terraform::before {
@extend %with-logo-terraform-color-icon, %as-pseudo;
}
%pill.nomad::before {
@extend %with-logo-nomad-color-icon, %as-pseudo;
}
%pill.consul::before,
%pill.consul-api-gateway::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
}
%pill.vault::before {
@extend %with-vault-300;
}
%pill.aws::before {
@extend %with-logo-aws-color-icon, %as-pseudo;
}
%pill.leader::before {
@extend %with-star-outline-mask, %as-pseudo;
}
%pill.jwt::before {
@extend %with-logo-jwt-color-icon, %as-pseudo;
}
%pill.oidc::before {
@extend %with-logo-oidc-color-icon, %as-pseudo;
}

View File

@ -6,7 +6,8 @@
} }
%pill::before { %pill::before {
margin-right: 4px; margin-right: 4px;
font-size: 0.8em; width: 0.75rem !important; /* 12px */
height: 0.75rem !important; /* 12px */
} }
%pill-200 { %pill-200 {
@extend %pill; @extend %pill;

View File

@ -50,7 +50,7 @@
color: rgb(var(--tone-gray-500)); color: rgb(var(--tone-gray-500));
} }
%popover-select .aws button::before { %popover-select .aws button::before {
@extend %with-logo-aws-color-icon, %as-pseudo; @extend %with-aws-300;
} }
%popover-select .kubernetes button::before { %popover-select .kubernetes button::before {
@extend %with-logo-kubernetes-color-icon, %as-pseudo; @extend %with-logo-kubernetes-color-icon, %as-pseudo;

View File

@ -1,3 +1,11 @@
%theme-light {
--theme-dark-none: ;
--theme-light-none: initial;
}
%theme-dark {
--theme-dark-none: initial;
--theme-light-none: ;
}
%with-icon { %with-icon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -20,8 +28,8 @@
content: ''; content: '';
visibility: visible; visibility: visible;
background-size: contain; background-size: contain;
width: 1.2em; width: 1rem; /* 16px */
height: 1.2em; height: 1rem; /* 16px */
vertical-align: text-top; vertical-align: text-top;
} }
%led-icon { %led-icon {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,71 @@
%with-vault-100 {
@extend %with-vault-16-mask, %as-pseudo;
color: rgb(var(--tone-vault-500));
}
%with-vault-300 { %with-vault-300 {
@extend %with-vault-16-mask, %as-pseudo; @extend %with-vault-16-mask, %as-pseudo;
color: rgb(var(--tone-vault-500)); color: rgb(var(--tone-vault-500));
} }
%with-aws-100,
%with-aws-300 {
@extend %aws-color-16-svg-prop;
@extend %with-icon, %as-pseudo;
background-image: var(--theme-dark-none) var(--aws-color-16-svg);
-webkit-mask-image: var(--theme-light-none) var(--aws-color-16-svg);
-webkit-mask-repeat: var(--theme-light-none) no-repeat;
-webkit-mask-position: var(--theme-light-none) center;
mask-image: var(--theme-light-none) var(--aws-color-16-svg);
mask-repeat: var(--theme-light-none) no-repeat;
mask-position: var(--theme-light-none) center;
background-color: var(--theme-light-none) rgb(var(--white));
}
%with-allow-100,
%with-aws-100,
%with-deny-100,
%with-l7-100,
%with-vault-100 {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
%with-allow-500,
%with-deny-500,
%with-l7-500 {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
}
%with-allow-300,
%with-allow-500 {
color: rgb(var(--tone-green-500));
}
%with-deny-300,
%with-deny-500 {
color: rgb(var(--tone-red-500));
}
%with-allow-300,
%with-allow-500,
%with-deny-300,
%with-deny-500,
%with-l7-300,
%with-l7-500 {
@extend %as-pseudo;
}
%with-allow-300 {
@extend %with-arrow-right-16-mask;
}
%with-allow-500 {
@extend %with-arrow-right-24-mask;
}
%with-deny-300 {
@extend %with-skip-16-mask;
}
%with-deny-500 {
@extend %with-skip-24-mask;
}
%with-l7-300 {
@extend %with-layers-16-mask;
}
%with-l7-500 {
@extend %with-layers-24-mask;
}