mirror of
https://github.com/status-im/consul.git
synced 2025-02-12 05:36:55 +00:00
5ab7e48862
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
74 lines
1.3 KiB
SCSS
74 lines
1.3 KiB
SCSS
:root {
|
|
--icon-loading: icon-loading-motion;
|
|
}
|
|
.prefers-reduced-motion {
|
|
--icon-loading: icon-loading;
|
|
}
|
|
@media (prefers-reduced-motion) {
|
|
:root {
|
|
--icon-loading: icon-loading;
|
|
}
|
|
}
|
|
|
|
%theme-light {
|
|
--icon-aws: icon-aws-color;
|
|
--icon-vault: icon-vault;
|
|
--color-vault-500: rgb(var(--black));
|
|
}
|
|
%theme-dark {
|
|
--icon-aws: icon-aws;
|
|
--icon-vault: icon-vault;
|
|
--color-aws-500: rgb(var(--white));
|
|
--color-vault-500: rgb(var(--tone-lemon-500));
|
|
}
|
|
|
|
%with-vault-100,
|
|
%with-vault-300 {
|
|
--icon-name: icon-vault;
|
|
content: '';
|
|
}
|
|
%with-aws-100,
|
|
%with-aws-300 {
|
|
--icon-name: var(--icon-aws);
|
|
content: '';
|
|
}
|
|
%with-allow-100,
|
|
%with-aws-100,
|
|
%with-deny-100,
|
|
%with-l7-100,
|
|
%with-vault-100 {
|
|
--icon-size: icon-200; /* 12px */
|
|
}
|
|
%with-allow-500,
|
|
%with-deny-500,
|
|
%with-l7-500 {
|
|
--icon-size: icon-500; /* 20px */
|
|
}
|
|
%with-allow-300,
|
|
%with-allow-500 {
|
|
--icon-name: icon-arrow-right;
|
|
--icon-color: rgb(var(--tone-green-500));
|
|
}
|
|
%with-deny-300,
|
|
%with-deny-500 {
|
|
--icon-name: icon-skip;
|
|
--icon-color: rgb(var(--tone-red-500));
|
|
}
|
|
%with-l7-300,
|
|
%with-l7-500 {
|
|
--icon-name: icon-layers;
|
|
}
|
|
%with-allow-500,
|
|
%with-deny-500,
|
|
%with-l7-500 {
|
|
--icon-resolution: .5;
|
|
}
|
|
%with-allow-300,
|
|
%with-allow-500,
|
|
%with-deny-300,
|
|
%with-deny-500,
|
|
%with-l7-300,
|
|
%with-l7-500 {
|
|
@extend %as-pseudo;
|
|
}
|