open-consul/ui-v2/app/styles/components/empty-state/skin.scss
John Cowen 9b256d3da6 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-06-03 16:46:50 +00:00

51 lines
1.1 KiB
SCSS

%empty-state {
color: $gray-500;
background-color: $gray-010;
}
%empty-state > ul {
border-color: $gray-300;
}
%empty-state-header {
border-bottom: none;
}
/* Icons */
%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;
}
%empty-state[class*='status-'] header::before {
@extend %as-pseudo;
}
%empty-state.status- header::before {
@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;
}
%empty-state[class*='status-5'] header::before {
@extend %with-alert-circle-outline-mask;
}
%empty-state li[class*='-link'] > *::after {
@extend %as-pseudo;
margin-left: 5px;
}
%empty-state .docs-link > *::after {
@extend %with-docs-mask;
}
%empty-state .back-link > *::after {
@extend %with-chevron-left-mask;
}
%empty-state .learn-link > *::after {
@extend %with-learn-mask;
}