open-vault/ui/app/styles/components/transit-card.scss
Noelle Daley e11567be82
Ui/transit modal (#8575)
* wip -- add modal component using ember-wormhole, add static content but still need to enable onClose

* add onClose to modal

* WIP

* add copy and close button

* add copy and close button

* and copy and close button to modal

* use modal on each key action page

* make text copied text more generic

* update datakey textareas to codemirror

* only show user input on encrypt and decrypt

* only show user input on all key actions

* separate copy ciphertext, plaintext, and close button on datakey modal

* style ciphertext and plaintext as code

* only show separate copy buttons on datakey modal if both outputs are shown

* update modal styling

* style modal

* add descriptions to each key action

* remove conditional from hmac modal since we only ever show hmac output

* add modal for export key action

* make output scroll horizontally with copy button next to it

* make output scroll horizontally with copy button next to it

* escape & in copy and close button, format text output so it scrolls horizontally

* fix formatting of key action descriptions

* Ui/add transit modal tests (#8523)

* Fix tests for updated transit with modals workflow

* WIP // remove box shadow from key actions descriptions

* WIP // flash messages on successful action match mocks

* WIP // remove ciphertext view after datakey created

* WIP // make flash messages when copy & closing less generic, and match copy flash message

* WIP // Optionally show close button on modal, with tests

* remove unused deps from modal test

* WIP // Fix verify modal styling and content

* Add modal for sign action

* Fix output of non-wrapped export key

* Fix output of non-wrapped export key

* Add description to JSDOCS about modal component

* Add help text about plaintext encoded in base64

* add flash msgs for datakey and export

* flash success msg when closing modal on export page

* clarify sign success msg

* address PR feedback

* add indentation for export key json

* Fix modal tests pt 2

* Remove decode after decrypt in transit tests

Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>
2020-03-16 16:48:11 -06:00

43 lines
784 B
SCSS

.transit-card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 0.2fr));
grid-template-rows: 1fr;
align-content: start;
grid-gap: 2rem;
margin-top: $spacing-l;
}
.transit-card {
border-radius: $radius;
box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
display: grid;
grid-template-columns: 0.45fr 2fr;
padding: $spacing-m;
border: none;
.transit-icon {
justify-self: center;
}
.transit-action-description {
font-family: $family-sans;
font-size: $size-8;
color: $grey;
}
.title {
color: $grey;
font-size: $size-7;
margin-bottom: $spacing-xxs;
}
&:hover {
box-shadow: 0 0 0 1px $blue-500, $box-shadow-middle;
background: $blue-010;
.title {
color: initial;
}
}
}