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/components/menu-panel/index.scss

48 lines
1.0 KiB
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
@import './skin';
@import './layout';
ui: Transition App Chrome to use new Disclosure Menus (#12334) * Add %panel CSS component * Deprecate old menu-panel component * Various smallish tweaks to disclosure-menu * Move all menus in the app chrome to use new DisclosureMenu * Follow up CSS to move all app chrome menus to new components * Don't prevent default any events from anchors * Add a tick to click steps
2022-02-21 12:22:59 +00:00
@import './deprecated';
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
ui: Colocate remaining CSS components to the app/components folder (#10328)
2021-06-23 08:19:35 +00:00
.menu-panel {
@extend %menu-panel;
}
ui: Transition App Chrome to use new Disclosure Menus (#12334) * Add %panel CSS component * Deprecate old menu-panel component * Various smallish tweaks to disclosure-menu * Move all menus in the app chrome to use new DisclosureMenu * Follow up CSS to move all app chrome menus to new components * Don't prevent default any events from anchors * Add a tick to click steps
2022-02-21 12:22:59 +00:00
.menu-panel-deprecated {
@extend %menu-panel-deprecated;
}
%menu-panel {
@extend %panel;
}
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 [role='separator'] {
ui: Transition App Chrome to use new Disclosure Menus (#12334) * Add %panel CSS component * Deprecate old menu-panel component * Various smallish tweaks to disclosure-menu * Move all menus in the app chrome to use new DisclosureMenu * Follow up CSS to move all app chrome menus to new components * Don't prevent default any events from anchors * Add a tick to click steps
2022-02-21 12:22:59 +00:00
@extend %panel-separator;
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
@extend %menu-panel-separator;
}
%menu-panel > div {
@extend %menu-panel-header;
}
ui: Transition App Chrome to use new Disclosure Menus (#12334) * Add %panel CSS component * Deprecate old menu-panel component * Various smallish tweaks to disclosure-menu * Move all menus in the app chrome to use new DisclosureMenu * Follow up CSS to move all app chrome menus to new components * Don't prevent default any events from anchors * Add a tick to click steps
2022-02-21 12:22:59 +00:00
%menu-panel > ul {
@extend %menu-panel-body;
}
%menu-panel-body > li {
@extend %menu-panel-item;
}
%menu-panel-body > [role='treeitem'],
%menu-panel-body > li > [role='menuitem'],
%menu-panel-body > li > [role='option'] {
@extend %menu-panel-button;
}
%menu-panel-button + * {
@extend %menu-panel-confirmation;
}
%menu-panel-item[aria-selected] > *,
%menu-panel-item[aria-checked] > *,
%menu-panel-item[aria-current] > *,
%menu-panel-item.is-active > * {
@extend %menu-panel-button-selected;
}
%menu-panel-button {
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
@extend %internal-button;
}
ui: Transition App Chrome to use new Disclosure Menus (#12334) * Add %panel CSS component * Deprecate old menu-panel component * Various smallish tweaks to disclosure-menu * Move all menus in the app chrome to use new DisclosureMenu * Follow up CSS to move all app chrome menus to new components * Don't prevent default any events from anchors * Add a tick to click steps
2022-02-21 12:22:59 +00:00
/* first-child is highly likely to be the button/or anchor*/
%menu-panel-item.dangerous > *:first-child {
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
@extend %internal-button-dangerous;
}