open-vault/ui/app/styles/components/box-radio.scss
Chelsea Shaw 5c64846225
UI: Transform secrets engine with transformations
* Ui/transform enable (#9647)

* Show Transform on engines list if enterprise

* Add box-radio component

* Add is-disabled styling for box-radio and fix tooltip styling when position: above

* Add KMIP and Transform to possible features on has feature helper

* Sidebranch: Transform Secret Engine Initial setup (#9625)

* WIP // list transforms, console.logs and all

* setup LIST transformations ajax request and draft out options-for-backend options

* change from plural to singluar and add transform to secret-edit

* create two transform edit components

* modify transform model with new attrs

* add adapterFor to connect transform adapter to transform-edit-form component

* setup Allowed roles searchSelect component to search over new transform/role adapter and model.

* clean up for PR

* clean up linting errors

* restructure adapter call, now it works.

* remove console

* setup template model for SearchSelect component

* add props to form field and search select for styling

Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>

* Ui/transform language fixes (#9666)

* Update casing and wording on Transform list route. Use generic list item for transformations

* Add back js file for transformation-edit

* Set up transform for tabs

* Ui/create edit transformation fixes (#9668)

* add conditional for masking vs tweak source based on type, and update text for create transformation

* change order

* fix error with stringArray

* setup the edit/delete transformation view

* clean up toolbar links

* setup serializer to change response of mask character from keycode to character

* change styling of label and sub-text size, confirmed with design

* temp fix on templates vs template

* add clickable list item

* add space between template list

* setup styling and structure for the rest of the show transformation.  TODO: turn into components.

* create transform-show-transformation component

* add attachCapabilities to transform model and update transform-transformation-itme list accordingly

* clean up liniting errors

* address pr comments

* remove leftover

* clean up

* Sidebranch: UI transform create and edit clean up (#9778)

* clean up some of the TODOs

* setup edit view with read only attributes for name and template

* setup initial selected for search select component

* fixes

* hide templates form field for now

* set selectLimit for search select component

* hide power select if the select limit is greater than or equal to the selectedOptions length

* clean up failing linting

* address pr comments

* Ui/fix list roles transformation (#9788)

* Update search-select to pass backend to query if exists

* Update role and template adapters

* cleanup

* Fix replace with static string

* Ui/transform cleanup 2 (#9789)

* amend encode/decode commands for now until design gets back with more details

* restrict character count on masking input field

* clean up selectLimit

* show backend instead of transform in cli copy command

* Show KMIP un-selectable if enterprise but no ADP module (#9780)

* New component transform-edit-base

* Duplicate RoleEdit as TransformEditBase and swap in all transform components

* Roll back role-edit changes

* Update to transform edit base

* Remove extraeneous set backend type on transform components

* formatting

* Revert search-select changes

* Update template/templates data on transformation (#9838)

Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com>
2020-08-26 11:31:18 -05:00

69 lines
1.4 KiB
SCSS

.box-radio-container {
display: flex;
flex-wrap: wrap;
}
.title.box-radio-header {
font-size: $size-6;
color: $grey;
margin: $size-7 0 0 0;
}
.box-radio-spacing {
margin: $size-6 $size-3 $size-6 0;
}
.box-radio {
box-sizing: border-box;
flex-basis: 7rem;
width: 7rem;
min-height: 7.5rem;
padding: $size-10 $size-6 $size-10;
flex-direction: column;
justify-content: space-between;
align-items: center;
display: flex;
border-radius: $radius;
box-shadow: $box-shadow;
text-align: center;
color: $grey;
font-weight: $font-weight-semibold;
line-height: 1;
margin: $size-6 $size-3 $size-6 0;
font-size: 12px;
transition: box-shadow ease-in-out $speed;
will-change: box-shadow;
&.is-selected {
box-shadow: 0 0 0 1px $grey-light, $box-shadow-middle;
}
&.is-disabled {
opacity: 0.5;
}
input[type='radio'].radio {
position: absolute;
z-index: 1;
opacity: 0;
}
input[type='radio'].radio + label {
border: 1px solid $grey-light;
border-radius: 50%;
cursor: pointer;
display: block;
margin: 1rem auto 0;
height: 1rem;
width: 1rem;
flex-shrink: 0;
flex-grow: 0;
}
input[type='radio'].radio:checked + label {
background: $blue;
border: 1px solid $blue;
box-shadow: inset 0 0 0 0.15rem $white;
}
input[type='radio'].radio:focus + label {
box-shadow: 0 0 10px 1px rgba($blue, 0.4), inset 0 0 0 0.15rem $white;
}
}