luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-consul/ui/packages/consul-ui/app/components/badge/index.scss

77 lines
1.5 KiB
SCSS
Raw Normal View History

ui: %horizontal-kv-list CSS component (and related) (#10285) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge
2021-06-21 10:40:14 +00:00
%badge {
@extend %horizontal-kv-list;
padding-left: 8px;
padding-right: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
%badge,
%badge + dd {
@extend %pill;
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
background-color: rgb(var(--tone-gray-100));
color: rgb(var(--tone-gray-500));
ui: %horizontal-kv-list CSS component (and related) (#10285) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge
2021-06-21 10:40:14 +00:00
}
%badge::after,
%badge-reversed::after,
%badge-reversed::before {
display: inline;
}
%badge::after {
content: var(--horizontal-kv-list-key-separator);
}
%badge-reversed::after {
content: var(--horizontal-kv-list-key-wrapper-end);
}
%badge-reversed::before {
content: var(--horizontal-kv-list-key-wrapper-start);
margin-right: 0;
font-size: inherit;
}
%badge-radius-reset + dd {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
%badge + dd {
padding-right: 8px;
margin-left: 0 !important;
}
%badge-reversed {
margin-left: 0;
padding-left: 0;
}
%badge-reversed + dd {
padding-left: 8px;
margin-left: 0 !important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
%badge-with-icon::after {
display: none;
}
%badge-with-icon {
position: absolute;
max-width: 0;
padding-left: 28px;
}
%badge-with-icon::before {
position: absolute;
left: 8px;
}
%badge-with-icon-reversed::before {
left: 0px;
font-size: 0.8em;
}
%badge-with-icon + dd {
margin-left: 24px !important;
}
%badge-with-icon-reversed {
@extend %horizontal-kv-list-reversed, %badge-reversed;
flex-direction: row;
padding-left: 22px;
padding-right: 0 !important;
z-index: 1;
}
%badge-with-icon-reversed + dd {
margin-right: 18px;
}