github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/components/overlay/square-tail.scss

56 lines
1.3 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.
[COMPLIANCE] License changes (#18443) * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Updating the license from MPL to Business Source License Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at <Blog URL>, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl. * add missing license headers * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
2023-08-11 13:12:13 +00:00
* SPDX-License-Identifier: BUSL-1.1
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
*/
ui: Fixup prettier for scss files and run (#10296) * ui: Ensure prettier makes all our scss files pretty * Run prettier on all our scss files
2021-05-27 12:23:54 +00:00
[data-theme~='square-tail'] {
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
.tippy-arrow {
--size: 18px;
left: calc(0px - (var(--size) / 2)) !important;
}
.tippy-arrow::before {
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-primary);
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
width: calc(1px + var(--size));
height: calc(1px + var(--size));
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
border: var(--decor-border-100);
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
border-color: var(--token-color-palette-neutral-300);
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
}
// potential icon
.tippy-arrow::after {
position: absolute;
left: 1px;
}
ui: Fixup prettier for scss files and run (#10296) * ui: Ensure prettier makes all our scss files pretty * Run prettier on all our scss files
2021-05-27 12:23:54 +00:00
&[data-placement^='top'] {
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
& {
bottom: -10px;
}
.informed-action {
border-bottom-left-radius: 0 !important;
}
.tippy-arrow::before {
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
border-bottom-left-radius: var(--decor-radius-200);
border-bottom-right-radius: var(--decor-radius-200);
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
border-top: 0 !important;
}
.tippy-arrow::after {
bottom: calc(0px - var(--size));
}
}
ui: Fixup prettier for scss files and run (#10296) * ui: Ensure prettier makes all our scss files pretty * Run prettier on all our scss files
2021-05-27 12:23:54 +00:00
&[data-placement^='bottom'] {
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
& {
top: -10px;
}
.informed-action {
border-top-left-radius: 0 !important;
}
.tippy-arrow::before {
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
border-top-left-radius: var(--decor-radius-200);
border-top-right-radius: var(--decor-radius-200);
ui: New overlays (#9305) Replaces ember-popover with tippy.js based overlay modifier.
2020-12-02 09:43:34 +00:00
border-bottom: 0 !important;
}
.tippy-arrow::after {
top: calc(0px - var(--size));
}
}
}