open-vault/ui/app/styles/components/masked-input.scss
Angel Garbarino 8f5d62139c
KV 2 Toolbar delete redesign (#11530)
* initial setup, modify toolbar header

* footer buttons setup

* setup first delete version delete method

* clean up

* handle destory all versions

* handle undelete

* conditional for modal and undelete

* remove delete from version area

* modelForData in permissions

* setup for soft delete and modify adpater to allow DELETE in additon to POST

* dropdown for soft delete

* stuck

* handle all soft deletes

* conditional for destroy all versions

* remove old functionality from secret-version-menu

* glimmerize secret-version-menu

* Updated secret version menu and version history

* Updated icons and columns in version history

* create new component

* clean up

* glimmerize secret delete menu

* fix undelete

* Fixed radio labels in version delete menu

* handle v1 delete

* refining

* handle errors with flash messages

* add changelog

* fix test

* add to test

* amend test

* address PR comments

* whoopies

* add urlEncoding

Co-authored-by: Arnav Palnitkar <arnav@hashicorp.com>
2021-05-19 10:43:55 -06:00

95 lines
1.7 KiB
SCSS

.masked-font {
color: $ui-gray-300;
}
.masked-input {
display: flex;
align-items: center;
}
.has-label .masked-input {
padding-top: $spacing-s;
}
.has-padding {
padding: $size-10 $size-8;
}
// we want to style the boxes the same everywhere so they
// need to be the same font and small
.masked-input.masked .masked-value {
font-size: 9px;
font-family: $family-primary;
line-height: 2.5;
}
.masked-input.display-only .masked-value {
order: 1;
}
// aligns the boxes on the input page
.masked-input.masked:not(.display-only) .masked-value {
line-height: 3;
border-radius: $radius 0 0 $radius;
}
//override bulma's pre styling
.masked-input .display-only {
line-height: 1.5;
font-size: 1rem;
padding-top: 0;
padding-bottom: 0;
padding-left: $spacing-s;
background-color: transparent;
}
.button.masked-input-toggle,
.button.copy-button {
min-width: $spacing-xl;
border-left: 0;
color: $grey;
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
}
.button.copy-button {
border-radius: 0;
}
.button.masked-input-toggle {
border-radius: 0 $radius $radius 0;
}
.display-only {
.button.masked-input-toggle,
.button.copy-button {
background: transparent;
height: auto;
line-height: 1rem;
min-width: $spacing-l;
border: 0;
box-shadow: none;
color: $grey-light;
padding-left: 0;
padding-right: 0;
&:active,
&.is-active,
&:focus,
&.is-focused,
&:hover,
&:focus:not(:active) {
color: $blue;
border: 0;
box-shadow: none;
}
}
}
.masked-input.masked .masked-value {
color: $grey-light;
}
.masked-input .input:focus + .masked-input-toggle {
background: rgba($white, 0.95);
}