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

82 lines
1.6 KiB
SCSS
Raw Normal View History

Add UI copyright headers files (#16614) * Add copyright headers to UI files * Ensure copywrite file ignores external libs
2023-03-14 13:18:55 +00:00
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
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: Update Consul UI colors to use HDS colors (#16111) * update red color variables to hds * change background red to be one step lighter * map oranges * map greens * map blues * map greys * delete themes, colours: lemon, magenta, strawberry, and vault color aliases * add unmapped rainbow colours * replace white and transparent vars, remove unused semantic vars and frame placeholders * small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour * add unmapped grays, remove dark theme, manually set nav bar to use dark colours * map consul pink colour * map yellows * add unmapped oranges, delete light theme * remove readme, base variables, clean up dangling colours * Start working on the nav disclosure menus * Update main-nav-horizontal dropdowns * Format template * Update box-shadow tokens * Replace --tone- usage with tokens * Update nav disabled state and panel border colour * Replace rgb usage on tile * Fix permissions modal overlay * More fixes * Replace orange-500 with amber-200 * Update badge colors * Update vertical sidebar colors * Remove top border on consul peer list ul --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>
2023-02-27 16:30:12 +00:00
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-faint);
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;
}