open-consul/ui-v2/app/styles/base/components/popover-menu/layout.scss

57 lines
1.1 KiB
SCSS
Raw Normal View History

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
%with-popover-menu {
position: relative;
}
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
%with-popover-menu > [type='checkbox'] {
@extend %popover-menu;
}
%more-popover-menu {
@extend %display-toggle-siblings;
}
%more-popover-menu + label > * {
@extend %toggle-button;
}
%more-popover-menu-panel {
@extend %menu-panel;
width: 192px;
}
%more-popover-menu + label + div {
@extend %more-popover-menu-panel;
}
%more-popover-menu-panel:not(.above) {
top: 38px;
}
%more-popover-menu-panel:not(.left) {
right: 10px;
}
%more-popover-menu-panel li [role='menu'] {
display: none;
}
%more-popover-menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] + [role='menu'] {
display: block;
}
%popover-menu {
@extend %display-toggle-siblings;
}
%popover-menu + label > * {
@extend %toggle-button;
}
%popover-menu-panel {
@extend %menu-panel;
width: 192px;
}
%popover-menu + label + div {
@extend %popover-menu-panel;
}
%popover-menu-panel:not(.above) {
top: 38px;
}
%popover-menu-panel:not(.left) {
right: 10px;
}
%popover-menu-panel li [role='menu'] {
display: none;
}
%popover-menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] + [role='menu'] {
display: block;
}