status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui/packages/consul-ui/app/styles/components/app-view/skin.scss

32 lines
722 B
SCSS
Raw Normal View History

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-empty {
@extend %frame-gray-500;
}
%app-view-title {
ui: CSS margin/border alterations (#8796) * ui: Reorganize page top margins and borders * Tweak definition table copy-buttons * Make room for intro paragraphs
2020-10-05 14:02:15 +00:00
border-bottom: $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: Re-organize our %h* placeholders (#9584) We've always had this idea of being able to markup up information semantically without thinking about what it should look like, then applying our %h* placeholder styles to control what the information should look like. Back when we originally made our set of %h* placeholders, we tried to follow Structure as much as possible, which defined the largest header (which we thought would have been the h1 style) as a super large 3.5rem. Therefore we made our set of %h* placeholders the same as Structure beginning at a huge 3.5 size. We then re-overwrote those sizes only in Consul specific CSS files thinking that this was due to us existing before Structure did. Lately we saw an extra clue in Structure - the extra large 3.5 header was called 'h0'. This commit moves all our headers to use a zero based scale, and additionally uses our 3 digit scale as opposed to 1 digit (h1 vs h100), similar to our color scales (note we don't use a hypen, which we can alter later if need be), which means we can insert additional h150 etc if need be. Additional we stop styling our headers globally (h1 { @extend %h100; } ). This means there is no reason not to use headers for marking up content depending on what it is rather than what it should look like, and as a consequence means we can be more purposeful in ordering h* tags. Lastly, we use the new scale over the entire codebase and update a couple of places where we were using using header tags due to what the styleing for them looked like rather than what the meaning/order was.
2021-01-26 17:53:45 +00:00
%app-view-title > *:first-child {
@extend %h100;
}
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: 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
border-bottom: $decor-border-200;
}
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 {
color: $gray-600;
}
%app-view-header dd > a {
color: $black;
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 {
color: $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: 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
border-color: $gray-200;
}
// We know that any sibling navs might have a top border
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
// by default. As its squashed up to a %app-view-title, in this
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
// case hide its border to avoid double border
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 ~ nav {
border-top: 0 !important;
UI: New ACLs (#4789) UI to accompany the new ACLs APIs
2018-10-19 15:17:02 +00:00
}