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

36 lines
781 B
SCSS
Raw Normal View History

ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
%menu-panel {
border: $decor-border-100;
border-radius: $decor-radius-200;
ui: Create CSS variables for box-shadowing consistency (#7337) * Table - Lowest (on-hover of table items) * Buttons - Middle * Form-elements - Removed, no box-shadowing in input forms mocks. * Menu-panel -High * Modal-dialog - Highest * Stats-card -Middle/High(Active) * Tooltip - Middle * Card - Middle * Expanded-single-select - Middle * Tabular-details - High * Discovery chain - High
2020-02-21 15:17:18 +00:00
box-shadow: $decor-elevation-600;
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%menu-panel {
border-color: $gray-300;
background-color: $white;
}
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
%menu-panel dd {
color: $gray-500;
}
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
%menu-panel > ul > li {
list-style-type: none;
}
ui: New Confirmation Dialogs (#7007) * ui: Change action-group to use new popup-menu component in intentions * ui: Slight amends to aria-menu to prevent scrolling * ui: Begin to use aria-menu/popover-menu for other elements * Use a simpler, hackier method to fix up zIndexing * ui: Implement new confirmation dialogs in other list views (#7080) This includes another amend to the popover-menu in order to allow mutiple confirmations/subpanels in the same popover menu. The functionality added here to allow this is likely to change in the future.
2020-01-22 12:08:29 +00:00
%menu-panel-separator {
text-transform: uppercase;
color: $gray-400;
}
%menu-panel-header + ul,
%menu-panel-separator:not(:first-child) {
border-top: $decor-border-100;
border-color: $gray-300;
}
%menu-panel-header {
background-color: $gray-050;
}
%menu-panel-header::before {
@extend %with-info-circle-fill-color-icon, %as-pseudo;
font-size: 1.1em;
}
%menu-panel .is-active > *::after {
@extend %with-check-plain-mask, %as-pseudo;
ui: Tab Improvements (animations/branding) (#7772) * ui: Adds a tab selection animation to our app tabs 1. Replace all mentions of `magenta` with a themeable CSS property. 2. Add an easy way to inline style DOM nodes 3. Use CSS properties to add tab animation * Fix up rendering test * Avoid DOM noodling as much as possible
2020-05-05 16:31:18 +00:00
background-color: var(--swatch-brand-600, $black);
ui: New Confirmation Dialogs (#7007) * ui: Change action-group to use new popup-menu component in intentions * ui: Slight amends to aria-menu to prevent scrolling * ui: Begin to use aria-menu/popover-menu for other elements * Use a simpler, hackier method to fix up zIndexing * ui: Implement new confirmation dialogs in other list views (#7080) This includes another amend to the popover-menu in order to allow mutiple confirmations/subpanels in the same popover menu. The functionality added here to allow this is likely to change in the future.
2020-01-22 12:08:29 +00:00
}