vault/ui/app/styles/components/masked-input.scss
claire bontempo 43258c28fa
UI: HDS adoption replace <Modal> (#23382)
* UI: Part 1 - hds adoption replace <Modal> (#23363)

* replace policy-form modal

* replace clients/attribution modal

* clients/config modal

* scope form odal

* remove button type

* include toolbar to match other example templates

* rotate credentials modal

* add toolbar button class for hds buttons

* transformation-edit modal

* add back test selector

* add route arg to button!

* update link status

* fix link-status tests

* remove prevent default

* update db tests

* update tests

* use page alert for hcp link status banner

* fix scopy button selector

* fix sidebar test

* change to neutral banner

* UI: Part 2 - hds adoption replace <Modal>  (#23398)

* upgrade HDS library (adds support for snippet containers

* cleanup flight icons

* replace transit key action modals

* re-add deps as devDeps

* remove line

* address transit tests

* UI: Part 3 - hds adoption replace <Modal> (#23415)

* cleanup css

* cleanup extra type attr

* masked input download modal

* use Hds::Button in  download button"

* fix size of modal

* tiny icon fix

* refactor download button to always render download icon

* update tests

* UI: Part 3.5 - hds adoption replace <Modal> (#23448)

* replication-promote modal

* replication component modals

* replication add secondary modal

* move update text for diff

* UI: Part 4 - hds adoption replace <Modal>  (#23451)

* k8 configure modal

* kv delete modal

* ldap modals

* pki modals

* add trash icon

* move deps

* UI: Part 5 - hds adoption replace <Modal> (#23471)

* replace confirmation modals
---------

* UI: Part 6 - hds adoption replace <Modal>  (#23484)

* search select with modal

* policy search select modal

* replace date dropdown for client dashboard

* change padding to top

* update policy example args

* lolllll test typo wow

* update dropdown tests

* shamir flow modals!

* add one more container

* update test selectors

* UI: Final hds adoption replace <Modal> cleanup PR (#23522)

* search select with modal

* policy search select modal

* replace date dropdown for client dashboard

* change padding to top

* update policy example args

* lolllll test typo wow

* update dropdown tests

* shamir flow modals!

* add one more container

* update test selectors

* remove wormhole and modal component

* fix selectors

* uninstall wormhole

* remove shamir-modal-flow class

* fix confirm modal test

* fix pki and kv test

* fix toolbar selector kv

* client and download button test

* fix-confirmation-modal-padding

* fix replication modal tests so relevant modal opens (#23540)

* more confirmation modal tests

* adds changelog
2023-10-06 22:06:36 +00:00

93 lines
1.6 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.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-sans;
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 {
min-width: $spacing-xl;
border-left: 0;
color: $grey;
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
}
.button.masked-input-toggle {
border-radius: 0 $radius $radius 0;
}
.display-only {
.button.masked-input-toggle {
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,
&: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);
}