Commit Graph

6 Commits

Author SHA1 Message Date
Kenia 6275e13f93 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-05-12 17:14:09 +00:00
John Cowen 7b3c2ceac9 ui: Add new Help menu with links to docs, learn and GH (#7310) 2020-05-12 17:14:03 +00:00
John Cowen 5a52c361e5
ui: Fix for differences between uncompiled and compiled CSS (#7233)
We noticed that this relative positioning is not even applied when the CSS is
compiled/compressed. When looking via Web Inspector this style/selector
doesn't even appear even though it is in the CSS source.

This !important reduces the amount of selectors for this style rule,
which fixes the error, so potentially this isn't a specificity thing.
2020-02-06 20:13:13 +00:00
John Cowen 03f8bbb8a5
ui: Fix positioning of active icon in the selected menu item (#7148) 2020-01-28 14:42:20 +00:00
John Cowen 72ff1f0607
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
John Cowen eb7b69cc24 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-12-18 12:26:43 +00:00