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

23 lines
524 B
SCSS
Raw Normal View History

ui: Add docs for AppView (#10265) * ui: change coloring of secondary navigation elements * Remove top border, this was probably from older designs/iterations * ui: Move app-view styles into components also... 1. Remove dead %app-view-content-error 2. Remove TabNav border overwriting * Bring into line with our 'project standard' class/attributes pattern * Add docs for AppView
2021-05-24 11:32:23 +00:00
%app-view-title > *:first-child {
@extend %h100;
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
}
%app-view-title {
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: var(--decor-border-100);
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
}
ui: Add Optgroups and selectedItems to multiple select dropdown and use (#8476) * ui: Switch selects to use more HTML-like approach for optgroups * Add KV comparator * Use new option/optgroup approach for sort/select * Fix up tests for new order of menu items
2020-08-11 17:02:51 +00:00
%app-view-content form:not(.filter-bar) fieldset {
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: var(--decor-border-200);
UI: Service Instances (#5326) This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators. Various smaller changes: 1. Move healthcheck-status component to healthcheck-output 2. Create a new healthcheck-status component for showing the number of checks plus its icon 3. Create a new healthcheck-info component to group multiple statuses plus a different view if there are no checks 4. Componentize tag-list
2019-02-21 13:10:53 +00:00
}
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
%app-view-header h1 > em {
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
color: rgb(var(--tone-gray-600));
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
}
%app-view-header dd > a {
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
color: rgb(var(--tone-gray-999));
UI: New ACLs (#4789) UI to accompany the new ACLs APIs
2018-10-19 15:17:02 +00:00
}
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
%app-view-content div > dl > dd {
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
color: rgb(var(--tone-gray-400));
UI: Service Instances (#5326) This gives more prominence to 'Service Instances' as opposed to 'Services'. It also begins to surface Connect related 'nouns' such as 'Proxies' and 'Upstreams' and begins to interconnect them giving more visibility to operators. Various smaller changes: 1. Move healthcheck-status component to healthcheck-output 2. Create a new healthcheck-status component for showing the number of checks plus its icon 3. Create a new healthcheck-info component to group multiple statuses plus a different view if there are no checks 4. Componentize tag-list
2019-02-21 13:10:53 +00:00
}
ui: Redesign - Instance Detail Proxy Info tab (#7745) * Fix clickFirstAnchor bug * Create Proxy Info Tab for Instance Detail Page * Create tests for ProxyInfo and update other scenarios with Proxy data * ui: Refactors our app-view/%app-view component (#7752) Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-07 13:57:15 +00:00
%app-view-title,
ui: Add Optgroups and selectedItems to multiple select dropdown and use (#8476) * ui: Switch selects to use more HTML-like approach for optgroups * Add KV comparator * Use new option/optgroup approach for sort/select * Fix up tests for new order of menu items
2020-08-11 17:02:51 +00:00
%app-view-content form:not(.filter-bar) fieldset {
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-color: rgb(var(--tone-gray-200));
UI: New ACLs (#4789) UI to accompany the new ACLs APIs
2018-10-19 15:17:02 +00:00
}