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/empty-state/skin.scss

48 lines
1.0 KiB
SCSS
Raw Normal View History

ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
%empty-state {
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
color: var(--token-color-foreground-faint);
background-color: var(--token-color-surface-faint);
ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
}
ui: Logout button (#7604) * ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
2020-04-08 17:03:18 +00:00
%empty-state-header {
border-bottom: none;
}
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
%empty-state-header {
@extend %h200;
}
ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
/* Icons */
ui: Logout button (#7604) * ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
2020-04-08 17:03:18 +00:00
%empty-state header::before {
font-size: 2.6em;
position: relative;
top: -3px;
float: left;
margin-right: 10px;
}
%empty-state-anchor::before {
margin-right: 0.5em;
font-size: 0.9em;
}
ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
%empty-state[class*='status-'] header::before {
@extend %as-pseudo;
}
Fixup any psuedo elements that don't need currentColor
2022-04-11 09:05:02 +00:00
%empty-state[class*='status-'] header::before {
ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
@extend %with-alert-circle-outline-mask;
}
%empty-state.status-404 header::before {
@extend %with-help-circle-outline-mask;
}
%empty-state.status-403 header::before {
@extend %with-disabled-mask;
ui: Logout button (#7604) * ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
2020-04-08 17:03:18 +00:00
}
ui: New Empty States (#7940) * ui: CSS and component changes to the <EmptyState /> component * ui: Reset the auth-form component back to its initial state Moving forwards we are going to have the auth-form on the page all the time, even when logged in (for relogging in purposes). This means the auth-form will not always be removed from the DOM when you log in. This sets the form back to its idle state before calling onsubmit * ui: Make a public api for modal-dialog with a single close method * ui : Move cache reset somewhere that makes more sense, + single refresh 1. Centralize cache resetting elsewhere, for now the store makes most sense, although I would prefer the Repository class, so using the store is temporary 2. We only need to refresh on login once, unless we have a differing nspace * ui: Ensure visibilitychange events are cleaned up * ui: Only cache DataSource data if we have any, + only clear the cache * ui: Add the modal login dialog to both unauth and auth views This means we can 'relogin' when already logged in * ui: Add new empty states * ui: CSS Tweaks * Remove marketing grays
2020-05-27 10:23:21 +00:00
%empty-state li[class*='-link'] > *::after {
@extend %as-pseudo;
margin-left: 5px;
}
%empty-state .docs-link > *::after {
@extend %with-docs-mask;
ui: Logout button (#7604) * ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
2020-04-08 17:03:18 +00:00
}
ui: New Empty States (#7940) * ui: CSS and component changes to the <EmptyState /> component * ui: Reset the auth-form component back to its initial state Moving forwards we are going to have the auth-form on the page all the time, even when logged in (for relogging in purposes). This means the auth-form will not always be removed from the DOM when you log in. This sets the form back to its idle state before calling onsubmit * ui: Make a public api for modal-dialog with a single close method * ui : Move cache reset somewhere that makes more sense, + single refresh 1. Centralize cache resetting elsewhere, for now the store makes most sense, although I would prefer the Repository class, so using the store is temporary 2. We only need to refresh on login once, unless we have a differing nspace * ui: Ensure visibilitychange events are cleaned up * ui: Only cache DataSource data if we have any, + only clear the cache * ui: Add the modal login dialog to both unauth and auth views This means we can 'relogin' when already logged in * ui: Add new empty states * ui: CSS Tweaks * Remove marketing grays
2020-05-27 10:23:21 +00:00
%empty-state .back-link > *::after {
@extend %with-chevron-left-mask;
ui: Misc CSS amends, mainly changes to empty-state (#7743) 1. empty-state amends to bring it closer to what is in Structure and optionally support icons. 2. You may have a button that semantically should be a button (it performs and action not a link), but you want it to look like an anchor, this means it shouldn't have an outline when :active. 3. Adds `label.type-password` as a `%form-element` 4. Adds an error state to our `%notice` CSS component
2020-05-01 08:50:13 +00:00
}
ui: New Empty States (#7940) * ui: CSS and component changes to the <EmptyState /> component * ui: Reset the auth-form component back to its initial state Moving forwards we are going to have the auth-form on the page all the time, even when logged in (for relogging in purposes). This means the auth-form will not always be removed from the DOM when you log in. This sets the form back to its idle state before calling onsubmit * ui: Make a public api for modal-dialog with a single close method * ui : Move cache reset somewhere that makes more sense, + single refresh 1. Centralize cache resetting elsewhere, for now the store makes most sense, although I would prefer the Repository class, so using the store is temporary 2. We only need to refresh on login once, unless we have a differing nspace * ui: Ensure visibilitychange events are cleaned up * ui: Only cache DataSource data if we have any, + only clear the cache * ui: Add the modal login dialog to both unauth and auth views This means we can 'relogin' when already logged in * ui: Add new empty states * ui: CSS Tweaks * Remove marketing grays
2020-05-27 10:23:21 +00:00
%empty-state .learn-link > *::after {
@extend %with-learn-mask;
ui: Logout button (#7604) * ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
2020-04-08 17:03:18 +00:00
}