consul/ui/packages/consul-ui/app/styles/icons.scss

72 lines
1.6 KiB
SCSS

%with-vault-100 {
@extend %with-vault-16-mask, %as-pseudo;
color: rgb(var(--tone-vault-500));
}
%with-vault-300 {
@extend %with-vault-16-mask, %as-pseudo;
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;
}