vault/ui/app/styles/components/popup-menu.scss
Noelle Daley 3763bb64a4
Ui/redesign delete confirmation (#7271)
* add initial Confirm component to secrets list page

* use ember-wormholes to render confirmation message

* use maybe-in-element instead of ember-wormhole

* hide overlay initially

* animate confirm overlay left and right on click

* hide overlay in the DOM to properly set height

* adjust height when showing/hiding confirm-overlay

* disable confirmation buttons until trigger has been rendered

* adjust height of confirm-wrapper instead of confirm

* move Confirm/ to core

* only add style attribute when a height property exists

* fix indentation

* wip - use new Confirm inside status menu

* add Confirm to Storybook

* ensure confirm links have proper styling in Storybook and outside popup-menu

* fix height transition

* disable no-inline-styles

* add test selector

* remove comment

* consolidate Message into Trigger to make Confirm easier to use

* use new Trigger API in status menu

* remove height transition

* fix binding inline style warning

* rename confirmMessage to message

* update Confirm for Storybook

* fix indentation

* do not pass in onCancel from outer template because it is static

* add jsdoc comments to Trigger

* wip - add trigger and confirm to storybook

* fix status menu styling

* fix styling of confirm stories

* use new Confirm on secrets engine list

* use bulma speed variable

* fix indentation

* re-renable eslint no-inline-styles

* showConfirm when rendered trigger matches id

* fix background color on namespace picker

* do not expose onTrigger

* Revert "re-renable eslint no-inline-styles"

This reverts commit c7b2a9097f177a2876afaaec6020f73b07bad3c7.

* rename Confirm Trigger to Message

* add tests

* update JSDocs

* focus trigger after cancelling the confirm message

* update Confirm JSDocs

* differentiate between ConfirmAction and Confirm

* add Message to Storybook

* re-enable eslint import/extensions

* update confirmButtonText to Revoke token

* remove linebreak and extra whitespace

* fix typo

* add loading to empty button

* fix more typos

* only show Message contents when showConfirm is true

* no need to disable the confirm buttons since they only render in the DOM when showConfirm is true

* use Confirm to delete aws roles

* use Confirm to delete pki roles

* use Confirm to delete ssh roles

* add Confirm to entity alias page

* fix confirm button text on Revoke token in status menu

* ensure you can use tab to revoke a token from status menu

* reset the open trigger after the confirm has been confirmed

* use Confirm on identity list pages

* fix Disable engine confirmation text

* use <PopupMenu /> angle brack syntax

* use Confirm on policies list page

* use Confirm for namespaces

* use Confirm for kmip scopes

* use Confirm for deleting kmip roles

* use Confirm for revoking KMIP credentials

* fix Revoke token triggerText
2019-08-27 15:50:53 -07:00

164 lines
2.8 KiB
SCSS

.popup-menu-content,
.ember-power-select-options {
border-radius: 2px;
margin: -2px 0 0 0;
& > .box {
border-radius: 2px;
box-shadow: $box-shadow, $box-shadow-middle;
padding: 0;
position: relative;
width: 200px;
}
&.is-wide > .box {
width: $drawer-width;
}
.confirm-action span .button {
display: block;
margin: 0.25rem auto;
width: 95%;
}
.menu {
padding: $size-11 0;
small code {
margin-left: $spacing-xs;
}
}
button.link,
a,
.ember-power-select-option,
.ember-power-select-option[aria-current='true'],
.menu-item {
background: transparent;
box-shadow: none;
border: none;
display: block;
height: auto;
font-size: $size-7;
font-weight: $font-weight-semibold;
padding: $size-9 $size-8;
text-align: left;
text-decoration: none;
width: 100%;
}
button.link,
.ember-power-select-option,
.ember-power-select-option[aria-current='true'],
a {
background-color: $white;
color: $menu-item-color;
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
}
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
}
&.is-destroy {
color: $red;
&:hover {
background-color: $red;
color: $white;
}
}
&.disabled {
opacity: 0.5;
&:hover {
background: transparent;
cursor: default;
}
}
}
.menu-label {
color: $grey-dark;
font-size: $size-9;
font-weight: $font-weight-normal;
letter-spacing: 0;
margin: 0;
padding: $size-10 $size-8 0;
text-transform: uppercase;
}
.menu-content {
padding: $size-10 $size-8;
}
hr {
background-color: $ui-gray-200;
margin: 0;
}
}
.popup-menu-content p {
box-shadow: none;
padding-top: $size-10;
font-weight: $font-weight-semibold;
}
.popup-menu-content .level-left {
flex-shrink: 1;
}
.list-item-row,
.info-table-row,
.wizard-dismiss-menu {
.popup-menu-trigger {
height: 2.5rem;
min-width: 0;
padding: 0;
width: 2.5rem;
}
}
.status-menu-content {
margin-top: 8px;
.box {
@include until($mobile) {
width: $drawer-width - ($spacing-xs * 2);
}
}
}
.ember-basic-dropdown-content {
background-color: transparent;
&--left.popup-menu {
margin: 0px 0 0 -8px;
}
&--below {
&.ember-basic-dropdown--transitioning-in {
animation: drop-fade-above 0.15s;
}
&.ember-basic-dropdown--transitioning-out {
animation: drop-fade-above 0.15s reverse;
}
}
&--above {
&.ember-basic-dropdown--transitioning-in {
animation: drop-fade-below 0.15s;
}
&.ember-basic-dropdown--transitioning-out {
animation: drop-fade-below 0.15s reverse;
}
}
}