luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Remove the Bulma CSS Framework (#19878) 

* Step one: remove bulma (#19587)

* remove bulma and get app running

* add back in each statments from bulma variables

* remove space

* address pr comments

* add back copyright headedr

* Step two: add back and organize relevant Bulma classes (#19664)

* VAULT-14566 copy/paste bulma css for classes that it defines and we do not.

* add three new helper files and move helpers.scss to a new directory called helper-classes

* rename utils/colors to color_variables

* integrate all bulma sizing into previous utils/spacing doc, address obvious duplicates and rename to spacing_variables.

* small class name issues

* clean up

* comment clean up

* Step three: add Bulma classes to relevant component styles (#19683)

* add in bulma classes used in global-flash component

* add in bulma classes used in the modal component

* remaining bulma classes that can integrate into the vault css

* remove replication-header.scss and replace with helper.

* add bulma tabs classes to tabs component scss file

* remove ui-wizard style

* only do bulma explicit classes for now

* add in breadcrumb styling from bulma

* integrate bulma into css

* remove unecessary tabs bulma styling

* remove non-relevant bulma classes

* remove non relevant bulma css

* Step three cont. Bulma classes to component files (#19691)

* return box-label to as before now that you have those bulma classes

* missing modal bulma classes

* add bulma class to box component

* missed some bulma box classes

* remove scss unecessary

* add in bulma classes to icon component.

* move up icon

* missed modal class

* clean up

* size vars to icon

* Step four: address core directory files (#19719)

* move some basic helpers over to typography helper.

* rename helpers to other

* moveing generic classes to other relevant scss files.

* rename generic to link

* clean up

* clean up

* address core/box

* remove hero because the class is not used anywhere.

* add in level bulma css

* welp forgot a file.

* add in missing bulma classes into core/menu

* UI/step four core files 2 (#19754)

* address issue with input border and box shadow

* remove the is-white class, it was being used very poorly, replaced with exisiting helpers.

* organizing the forms and button core files

* small amount of clean up

* hot mess of colors dealing with just danger for now

* removed moved over bulma classes

* use helper for this one off

* clean up

* wip on the buttons

* fix select select:: after

* clean up select from bulma-classes.

* clean up

* clean up

* small fix

* Cleaning up the last of the core files (welp there's still more) (#19779)

* one missing thing for level core.

* replace no-underline and link-item with helper text-decoration-none

* core/menu double check

* handle core/message

* create and add to bulma classes for core/columns

* add in bulma-classes columns and column... not fun to qa later.

* remove core/notification

* core/progress bar

* revert the hbs changes

* fix over revert

* Core files cont. Focus on core/form (#19794)

* create input and textarea core files, move charts

* remove input and textarea classes from bulma classes

* remove input-hint component file, never a component

* fix the mess that is help-text:

* help and is-help and sub-text are a mess...

* fix switch alignment issues

* deal with file-name

* clean file out of bulma-classes

* create layout helper and move out some remaining button classes

* deal with core/title

* is-marginless move to helper

* helper layout add to core

* clean up

* remove core/tables

* test

* Revert "test"

This reverts commit e695dedfe933d71320cd7eeee33f6b21a8d54b37.

* Core files continued (#19896)

* test

* combine input and textarea

* clean up navbar brannd

* clean up the single instance delete class used on the modal and match with flight icon

* add back autocomplete to component

* create core/file

* alphabetize file css blocks

* core/checkboxes create and address

* combine b-checkboxes classes and remove from core the utils

* address duplicate helper

* Core files continued (#19930)

* clean up helper and remove duplicate class

* more clean up of the other helper

* fix pagination, hot mess

* add radio to checkbox styling

* tag to tags rename singular

* container core file

* finally... changing forms to one element, field

* finally remove bulma-classes

* cleanup

* comment cleanup

* add comment about pagination

* Consolidating our size variables with Bulma's (#19951)

* remove bulma-size variables that are duplicates of our own

* remove unused is-size-xx and duplicate font weights

* remove duplicate class

* ahh this is madness

* remove column-gap var

* remove  duplicate sizing of

* clean up breakpoints

* replace border-radius:2px for var so folks know the common border-radius

* replace header-height with new spacing var

* replace body-size and console-size vars with other sizing vars

* clean up final of size vars

* radius override things blah fixed

* last size var

* add back

* Finish size var clean up (#19970)

* remove size-small, etc.

* fix size-small things

* remove label unused classes

* move out font-family utils

* Update Color Vars (remove bulma color vars and overrides) (#20031)

* remove bulma_variables file

* remove duplicate helper

* replace hardcoded with color vars when appropriate

* broaden font-family utils

* add back box-link-hover-shadow

* welp

* fix pagination coloring

* Small fixes post var and core file work (#20035)

* fix auth-login splash container

* fix some splash page issues

* fix status menu

* fix menu-list regression

* fix regression on button text-decoration

* fix tag regression

* fix regression on select select

* fix regression on field field

* regression on textarea

* button focus state regression

* fix inputs

* fix is-outlined buttons

* Remove bulma switch (#20065)

* remove bulma/switch

* fix disbled style

* Bulma removal: starting the clean up process (#20066)

* remove unused class name

* add todo

* wip shamir-modal-flow usage of file styling

* final fix

* fix message type message-body css

* better match

* fix a.active on popup-menu-content

* VAULT-14625 fix

* blah overrides overrides and oh another override

* fix breadcrumb link

* fixes

* fix readonly state and hover on inputs.scss

* fix button style issue

* fix modal title spacing issue

* clean up

* fix switch

* fix checkbox issue and pr comment

* fix issue with tabs

* pr comment

* Bulma clean up cont. (#20119)

* gotta use rem on page container... it makes a difference, can't switch to px

* missing helper for background color

* fix textarea with icon

* can't seem to replace rem with px ;/

* fix table issues

* clean up columns.scss file

* fix

* fix rem vs px issues

* address some todos

* fix todo on help is-danger

* best effort for sizing var clean up

* reomve duplicate

* clearify

* welp forgot a word

* address sr-only class definition

* move to helper

* replaced single use class with helper and cleaned up flexbox

* move to make more sense

* move around layout and container

* color things

* things

* Cleanup 🧹 (#20196)

* remove carry over classes from bulma

* clean up title.scss

* clean up title is-5 has-top-padding-m and box.scss

* clean up breadcrumbs, buttons, c&r, columns

* clean up core files

* clean up cont looking at component files

* clean up remaining component files

* fix pagination

* pr comments, thank you

* add in merge color helper

* Remove out of scope changes (#20218)

* remove out of scope changes

* fix test

* add changelog

* remove scope creep

* fix scope creep cont

* qa fixes

* Fixes found while QA'ing Secret Engines (#20264)

* fix active tab issue for both secret and auth mounts

* use helper instead of :not last on content margin which causes problems

* fix missing disabled on b-checkbox

* quick fix

* deal with body-size issue

* fix order of other helper

* small fixes from qa

* update comments on the core files and change desktop font size from px back to rem

* missed 16px replaced with 1rem

* address chelseas comments

* fixes that jordan noticed

* remove unstable flexbox test

* test fix

* rename other to general

* address claires qa comments

* add in missing helper must have missed in earlier merge

* fix button

* small small small fix
This commit is contained in:
Angel Garbarino 2023-04-27 14:23:17 -06:00 committed by GitHub
parent 2f63318cea
commit dcff8c2a07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
128 changed files with 3045 additions and 1768 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog/19878.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: Remove the Bulma CSS framework.
```

2
ui/app/components/modal-form/policy-template.hbs
View File

@ -1,5 +1,5 @@
{{#if this.policy.policyType}}
<nav class="tabs">
<nav class="tabs has-bottom-margin-l">
<ul>
<li class={{unless this.showExamplePolicy "active"}}>
<button

10
ui/app/styles/app.scss
View File

@ -18,13 +18,3 @@
// Font comes from npm package: https://www.npmjs.com/package/text-security
// We took the font we wanted and moved it into the ui/fonts folder
@include font-face('text-security-square');
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

4
ui/app/styles/components/action-block.scss
View File

@ -53,7 +53,7 @@
display: flex;
flex-wrap: wrap;
margin: $spacing-m 0;
@include until($tablet) {
@include until($mobile) {
display: block;
}
}
@ -67,7 +67,7 @@
.replication-actions-grid-item .action-block {
width: 100%;
@include until($tablet) {
@include until($mobile) {
height: inherit;
}
}

23
ui/app/styles/components/autocomplete-input.scss Normal file
View File

@ -0,0 +1,23 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.autocomplete-input {
background: $white !important;
border: 1px solid $grey-light;
box-sizing: border-box;
border-radius: 3px;
width: 99%;
padding: 4px 0;
margin-left: 0.5%;
margin-top: -4px;
}
.autocomplete-input-option {
padding: 12px;
&:hover {
background-color: $grey-lightest;
cursor: pointer;
}
}

4
ui/app/styles/components/box-label.scss
View File

@ -10,7 +10,7 @@ label.box-label {
.box-label {
@extend .box;
@extend .is-centered;
@extend .is-gapless;
border-color: $grey-light;
border-radius: 3px;
box-shadow: $box-link-shadow;
@ -63,6 +63,6 @@ label.box-label {
color: $grey;
.is-selected & {
color: $text;
color: $grey-darkest;
}
}

34
ui/app/styles/components/calendar-widget.scss
View File

@ -20,27 +20,6 @@ $dark-gray: #535f73;
.calendar-title {
padding: $size-10 $size-8;
}
.calendar-widget-dropdown {
@extend .button;
@extend .is-ghost;
@extend .has-icon-right;
border: 0;
color: $black;
transition: background-color $speed;
width: 150px;
&:hover {
background-color: $ui-gray-100;
border: 0;
color: $blue;
}
&.is-active {
background-color: $ui-gray-100;
border: 0;
color: $blue;
}
}
.select-year {
grid-area: select-year;
@ -67,18 +46,18 @@ $dark-gray: #535f73;
> button {
&.is-month-list {
background-color: white;
background-color: $white;
color: black;
text-align: center;
border: 1px solid $ui-gray-200;
border-radius: 2px;
border: $light-border;
border-radius: $radius;
}
&.is-current-month {
border: 1px solid $ui-gray-900;
}
&:hover {
background-color: lighten($dark-gray, 30%);
color: white;
color: $white;
text-align: center;
cursor: pointer;
}
@ -104,7 +83,7 @@ $dark-gray: #535f73;
grid-template-rows: 0.7fr 3fr;
box-shadow: $box-shadow, $box-shadow-middle;
background-color: white;
border-radius: 2px;
border-radius: $radius;
}
.calendar-widget-grid {
@ -118,12 +97,13 @@ $dark-gray: #535f73;
// for modal-dialog tooltips
.calendar-tooltip {
background-color: $ui-gray-700;
color: white;
color: $white;
font-size: $size-8;
padding: $size-9;
border-radius: $radius-large;
width: 141px;
}
.ember-modal-dialog {
z-index: 1000;
}

4
ui/app/styles/components/codemirror.scss
View File

@ -36,9 +36,9 @@ $gutter-grey: #2a2f36;
.cm-s-hashi-read-only {
&.CodeMirror {
background-color: $grey-lighter;
background-color: $grey-lightest;
border: none;
color: #626873;
color: $ui-gray-600;
font-family: $family-monospace;
-webkit-font-smoothing: auto;
line-height: 1.4;

16
ui/app/styles/components/confirm.scss
View File

@ -6,7 +6,7 @@
.confirm-wrapper {
position: relative;
overflow: hidden;
border-radius: 2px;
border-radius: $radius;
box-shadow: $box-shadow, $box-shadow-middle;
}
@ -37,16 +37,16 @@
button.link,
a {
background-color: $white;
color: $menu-item-color;
color: $grey-darkest;
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
background-color: $ui-gray-050;
color: $ui-gray-900;
}
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
background-color: $blue-500;
color: $blue;
}
&.is-destroy {
@ -76,7 +76,7 @@
}
.confirm-action > span {
@include from($tablet) {
@include from($mobile) {
align-items: center;
display: flex;
}
@ -88,7 +88,7 @@
.confirm-action-text:not(.is-block) {
text-align: right;
@include until($tablet) {
@include until($mobile) {
display: block;
margin-bottom: $size-8;
text-align: left;

14
ui/app/styles/components/console-ui-panel.scss
View File

@ -11,8 +11,8 @@
min-height: 0;
overflow: scroll;
right: 0;
top: $header-height;
transition: min-height $speed ease-out, transform $speed ease-in;
top: 4rem;
transition: min-height $speed $easing, transform $speed ease-in;
will-change: transform, min-height;
-webkit-overflow-scrolling: touch;
width: 100vw;
@ -37,7 +37,7 @@
color: $white;
display: flex;
flex-direction: column;
font-size: $body-size;
font-size: 14px;
font-weight: $font-weight-semibold;
justify-content: flex-end;
min-height: 100%;
@ -48,19 +48,19 @@
p {
background: none;
color: inherit;
font-size: $body-size;
font-size: 14px;
min-height: 2rem;
padding: 0;
&:not(.console-ui-command):not(.CodeMirror-line) {
padding-left: $console-spacing;
padding-left: $size-4;
}
}
.cm-s-hashi.CodeMirror {
background-color: rgba($black, 0.5) !important;
font-weight: $font-weight-normal;
margin-left: $console-spacing;
margin-left: $size-4;
padding: $size-8 $size-4;
}
}
@ -108,7 +108,7 @@
}
.console-ui-alert {
margin-left: calc(#{$console-spacing} - 0.33rem);
margin-left: calc(#{$size-4} - 0.33rem);
position: relative;
svg {

4
ui/app/styles/components/control-group.scss
View File

@ -9,7 +9,7 @@
box-shadow: $box-shadow-middle, 0 0 1px $grey-dark;
}
.control-group-success.is-editor {
background: $grey-lighter;
background: $grey-lightest;
}
.control-group a {
@ -18,7 +18,7 @@
.control-group-header {
box-shadow: 0 0 1px currentColor;
padding: $size-9 $size-6;
background: $grey-lighter;
background: $grey-lightest;
color: $grey-dark;
position: relative;
strong {

2
ui/app/styles/components/doc-link.scss
View File

@ -4,7 +4,7 @@
*/
.doc-link {
color: $link;
color: $blue;
text-decoration: none;
font-weight: $font-weight-semibold;
&:hover {

8
ui/app/styles/components/env-banner.scss
View File

@ -5,8 +5,12 @@
.env-banner {
align-self: center;
border-radius: 3rem;
background: linear-gradient(135deg, $blue, $purple);
border-radius: $size-1;
background: linear-gradient(
135deg,
$blue,
hsl(271, 100%, 71%)
); // only use case for purple in the app. define here instead of utils/color_var
animation: env-banner-color-rotate 8s infinite linear alternate;
color: $white;
margin-top: -20px;

4
ui/app/styles/components/form-section.scss
View File

@ -6,10 +6,6 @@
.form-section {
padding: 1.75rem 0;
box-shadow: 0 -1px 0 0 rgba($black, 0.1);
> p.has-padding-bottom {
padding-bottom: 1.5rem;
}
}
.field:first-child .form-section,

38
ui/app/styles/components/icon.scss
View File

@ -3,6 +3,31 @@
* SPDX-License-Identifier: MPL-2.0
*/
.icon {
align-items: center;
display: inline-flex;
height: $size-4;
justify-content: center;
vertical-align: middle;
width: $size-4;
// override the display if .button.icon to .button's default display: inline-block. See manage namespaces icon button in the namespace picker
&.button {
display: inline-block;
}
}
.icon-blue {
color: $blue;
}
.flight-icon {
&.flight-icon-display-inline {
vertical-align: middle;
margin-left: $spacing-xxs;
margin-right: $spacing-xxs;
}
}
.hs-icon {
flex: 0 0 auto;
display: inline-flex;
@ -39,6 +64,7 @@
width: 24px;
height: 24px;
}
.hs-icon-xl {
width: 28px;
height: 28px;
@ -48,15 +74,3 @@
width: 32px;
height: 32px;
}
.flight-icon {
&.flight-icon-display-inline {
vertical-align: middle;
margin-left: 4px;
margin-right: 4px;
}
}
.icon-blue {
color: $blue;
}

17
ui/app/styles/components/info-table-row.scss
View File

@ -11,7 +11,7 @@
box-shadow: none;
}
@include from($tablet) {
@include from($mobile) {
display: flex;
}
@ -48,11 +48,13 @@
}
.hs-icon {
margin-right: 0.25rem;
margin-right: $size-11;
}
.icon-true {
color: $green-500;
}
.icon-false {
color: $ui-gray-300;
}
@ -63,14 +65,14 @@
}
.info-table-row:not(.is-mobile) .column {
@include until($tablet) {
@include until($mobile) {
padding: 0;
}
&:first-child {
padding-left: 0;
@include until($tablet) {
@include until($mobile) {
padding: $size-8 0 0;
}
}
@ -78,7 +80,7 @@
&:last-child {
padding-right: 0;
@include until($tablet) {
@include until($mobile) {
padding: 0 0 $size-8;
}
}
@ -86,8 +88,11 @@
.info-table-row-header {
margin: 0;
font-size: $size-8;
color: $grey;
font-weight: $font-weight-semibold;
@include until($tablet) {
@include until($mobile) {
display: none;
}
.info-table-row:not(.is-mobile) .column:last-child {

14
ui/app/styles/components/info-table.scss
View File

@ -1,14 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.info-table {
&.vlt-table td {
padding-top: 0px;
padding-bottom: 0px;
}
.info-table-row {
box-shadow: none;
}
}

10
ui/app/styles/components/input-hint.scss
View File

@ -1,10 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.input-hint {
padding: 0 $size-9;
font-size: $size-8;
color: $grey;
}

5
ui/app/styles/components/kmip-role-edit.scss
View File

@ -3,11 +3,6 @@
* SPDX-License-Identifier: MPL-2.0
*/
.kmip-allowed-operations-header {
@extend .title;
@extend .is-6;
padding-left: $spacing-s;
}
.kmip-role-allowed-operations {
@extend .box;
flex: 1 1 auto;

8
ui/app/styles/components/list-item-row.scss
View File

@ -41,10 +41,10 @@ a.list-item-row,
&:hover,
&:focus,
&:active {
margin-left: #{-$column-gap} !important;
margin-right: #{-$column-gap} !important;
padding-left: $column-gap;
padding-right: $column-gap;
margin-left: #{-$size-9} !important;
margin-right: #{-$size-9} !important;
padding-left: $size-9;
padding-right: $size-9;
position: relative;
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow,
$box-shadow-middle;

125
ui/app/styles/components/list-pagination.scss
View File

@ -3,6 +3,53 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file combines Bulma CSS with our own CSS that previously overrode Bulma. In the future we should adopt the HDS pagination.
.pagination-previous[disabled],
.pagination-next[disabled],
.pagination-link[disabled],
.pagination-ellipsis[disabled] {
cursor: not-allowed;
}
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis,
.tabs {
user-select: none;
}
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
align-items: center;
box-shadow: none;
display: inline-flex;
font-size: $size-6;
justify-content: flex-start;
line-height: 1.5;
margin: $size-11;
padding-bottom: calc(0.5em - 1px);
padding-left: calc(0.75em - 1px);
padding-right: calc(0.75em - 1px);
padding-top: calc(0.5em - 1px);
position: relative;
vertical-align: top;
}
.pagination-link.is-current {
color: $white;
}
.pagination-list {
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1;
}
.list-pagination {
@extend .has-slim-padding;
position: relative;
@ -29,8 +76,21 @@
.pagination {
justify-content: center;
}
.pagination-list {
flex-grow: 0;
flex-wrap: wrap;
li {
list-style: none;
}
}
.pagination,
.pagination-list {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.pagination-ellipsis {
margin: 0;
@ -38,6 +98,7 @@
padding-right: 0;
}
}
.list-pagination .pagination-previous,
.list-pagination .pagination-next {
@extend .button;
@ -45,9 +106,11 @@
@extend .is-outlined;
@extend .is-compact;
background: $white;
border-color: $blue-500;
color: $blue-500;
max-width: 8rem;
@include until($tablet) {
@include until($mobile) {
max-width: 2rem;
padding-left: 0;
padding-right: 0;
@ -55,7 +118,7 @@
.pagination-next-label,
.pagination-previous-label {
@include until($tablet) {
@include until($mobile) {
display: none;
}
}
@ -76,8 +139,62 @@
}
}
.list-pagination .pagination-next {
@include until($tablet) {
.pagination-previous {
order: 1;
}
.pagination-next {
order: 3;
}
.pagination.is-centered {
&.pagination-previous {
order: 1;
}
&.pagination-list {
justify-content: center;
order: 2;
}
&.pagination-next {
order: 3;
}
}
.pagination.is-right {
&.pagination-previous {
order: 1;
}
&.pagination-next {
order: 2;
}
&.pagination-list {
justify-content: flex-end;
order: 3;
}
}
// responsive css
@media screen and (max-width: 768px) {
.pagination {
flex-wrap: wrap;
}
.pagination-previous,
.pagination-next {
flex-grow: 1;
flex-shrink: 1;
}
.pagination-list li {
flex-grow: 1;
flex-shrink: 1;
}
}
.list-pagination .pagination-next {
@include until($mobile) {
order: 3;
}
}

3
ui/app/styles/components/masked-input.scss
View File

@ -24,7 +24,7 @@
// need to be the same font and small
.masked-input.masked .masked-value {
font-size: 9px;
font-family: $family-primary;
font-family: $family-sans;
line-height: 2.5;
}
@ -80,7 +80,6 @@
&:active,
&.is-active,
&:focus,
&.is-focused,
&:hover,
&:focus:not(:active) {
color: $blue;

68
ui/app/styles/components/modal.scss
View File

@ -3,31 +3,67 @@
* SPDX-License-Identifier: MPL-2.0
*/
.modal {
align-items: center;
bottom: 0;
left: 0;
right: 0;
top: 0;
display: none;
justify-content: center;
overflow: hidden;
position: fixed;
z-index: 20;
&.is-active {
display: flex;
}
}
.modal-background {
background: rgba(235, 238, 242, 0.9);
background: $ui-gray-100;
bottom: 0;
left: 0;
opacity: 0.9;
position: absolute;
right: 0;
top: 0;
}
.modal-card {
box-shadow: $box-shadow-highest;
border: 1px solid $grey-light;
display: flex;
flex-direction: column;
max-height: calc(100vh - 70px);
margin-top: 60px;
min-width: calc(100vw * 0.3);
overflow: hidden;
position: relative;
&-head {
border-radius: 0;
background-color: $grey-lightest;
border-bottom: 1px solid $grey-light;
display: flex;
justify-content: flex-start;
padding: 20px;
}
&-foot {
border-radius: 0;
border: 0;
background-color: $white;
padding: 20px;
.button:not(:last-child) {
margin-right: 10px;
}
}
&-title.title {
margin: 0;
flex-grow: 1;
}
.copy-text {
@ -52,6 +88,14 @@
align-items: center;
}
.modal-card-body {
background-color: $white;
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: 20px;
}
pre {
background-color: inherit;
}
@ -66,21 +110,13 @@ pre {
}
}
.modal-confirm-section .is-help {
color: $grey;
margin: $spacing-xxs 0;
strong {
color: inherit;
}
}
.modal-confirm-section {
margin: $spacing-xl 0 $spacing-m;
}
.modal-card-foot-outlined {
background: #f7f8fa;
border-top: 1px solid #bac1cc;
background: $ui-gray-050;
border-top: $base-border;
}
.modal-radio-button {
@ -113,3 +149,13 @@ pre {
padding-left: $spacing-m;
}
}
// responsive css
@media screen and (min-width: 769px), print {
.modal-card,
.modal-content {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 640px;
}
}

2
ui/app/styles/components/namespace-picker.scss
View File

@ -77,11 +77,11 @@
width: $drawer-width;
}
}
.namespace-picker-content .level-left {
max-width: 210px;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}

4
ui/app/styles/components/page-header.scss
View File

@ -15,12 +15,12 @@
flex-grow: 1;
flex-shrink: 1;
@include until($tablet) {
@include until($mobile) {
margin-top: 0.5rem;
}
}
.level-right {
@include from($tablet) {
@include from($mobile) {
justify-content: flex-end;
}
}

16
ui/app/styles/components/popup-menu.scss
View File

@ -5,11 +5,11 @@
.popup-menu-content,
.ember-power-select-options {
border-radius: 2px;
border-radius: $radius;
margin: -2px 0 0 0;
& > .box {
border-radius: 2px;
border-radius: $radius;
box-shadow: $box-shadow, $box-shadow-middle;
padding: 0;
position: relative;
@ -53,17 +53,17 @@
.ember-power-select-option[aria-current='true'],
a {
background-color: $white;
color: $menu-item-color;
color: $grey-darkest;
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
background-color: $ui-gray-050;
color: $ui-gray-900;
}
&.active,
.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
&.is-active {
background-color: transparent;
color: $blue;
}
&.is-destroy {

5
ui/app/styles/components/read-more.scss
View File

@ -11,13 +11,10 @@
.overflow-ellipsis {
box-sizing: border-box;
&.is-closed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.has-font-weight-normal {
font-weight: $font-weight-normal;
}

2
ui/app/styles/components/replication-dashboard.scss
View File

@ -62,7 +62,7 @@
grid-template-rows: 0.2fr 1fr 0.2fr 1fr;
}
&.has-border-danger:hover {
&.has-error-border:hover {
box-shadow: none;
}

10
ui/app/styles/components/replication-header.scss
View File

@ -1,10 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.replication-header {
.tabs-container {
margin-bottom: $spacing-l;
}
}

4
ui/app/styles/components/search-select.scss
View File

@ -76,8 +76,8 @@ div > .ember-power-select-options {
}
.ember-power-select-option[aria-current='true'] {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
background-color: $ui-gray-050;
color: $ui-gray-900;
}
.ember-power-select-option--no-matches-message {

4
ui/app/styles/components/selectable-card.scss
View File

@ -34,7 +34,7 @@
.button {
&:disabled {
border-color: $vault-gray-300;
border-color: $ui-gray-300;
}
}
@ -96,7 +96,7 @@
border-radius: $radius;
}
.selectable-card.has-border-danger {
.selectable-card.has-error-border {
box-shadow: none;
}

2
ui/app/styles/components/shamir-progress.scss
View File

@ -10,7 +10,7 @@
margin-right: $size-8;
}
.progress {
box-shadow: 0 0 0 4px $progress-bar-background-color;
box-shadow: 0 0 0 4px $ui-gray-050;
margin-top: $size-10;
min-width: 90px;
}

14
ui/app/styles/components/sidebar.scss
View File

@ -10,7 +10,7 @@
margin: 0.75rem 0.75rem 0.75rem 0;
padding: 0 0 0 0.75rem;
@include until($tablet) {
@include until($mobile) {
background-color: $white;
bottom: 0;
left: -1.5rem;
@ -26,7 +26,7 @@
}
&.is-active {
@include until($tablet) {
@include until($mobile) {
transform: translateX(0);
}
@ -45,7 +45,7 @@
position: absolute;
top: 0;
@include until($tablet) {
@include until($mobile) {
display: block;
}
@ -59,7 +59,7 @@
padding-top: 5.25rem;
position: relative;
@include until($tablet) {
@include until($mobile) {
padding-top: $size-6;
}
}
@ -67,7 +67,7 @@
.menu-label {
color: $grey-light;
font-weight: $font-weight-bold;
font-size: $size-small;
font-size: $size-8;
line-height: 1;
margin-bottom: $size-8;
padding-left: $size-5;
@ -77,7 +77,7 @@
border-top: $base-border;
padding: $size-9 0;
@include until($tablet) {
@include until($mobile) {
padding-top: $size-4;
}
@ -99,7 +99,7 @@
border-right: 4px solid $blue;
}
}
// TODO will be removed with the navbar work. Reminder to remove the var $fullhd as this is the only use case.
.tag {
@include from($fullhd) {
float: right;

44
ui/app/styles/components/tabs.scss
View File

@ -3,15 +3,26 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the style for .tabs-container, .tabs and .tab
.page-header + .tabs-container {
box-shadow: none;
}
.tabs {
align-items: stretch;
box-shadow: inset 0 -1px 0 $grey-light;
display: flex;
justify-content: space-between;
overflow: hidden;
overflow-x: auto;
user-select: none;
white-space: nowrap;
ul {
border-color: transparent;
align-items: center;
display: flex;
justify-content: flex-start;
min-height: 3rem;
> a {
@ -25,9 +36,23 @@
}
}
li {
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
&.is-active {
border-bottom: 2px solid $blue;
color: $blue;
}
// solves for tabs on secret engines
> a &.active {
border-color: $blue;
color: $blue !important;
border-bottom: 2px solid $blue;
color: $blue;
}
// solves for tabs on auth mounts
> a {
&.active {
color: $blue;
background-color: transparent;
border-bottom: 2px solid $blue;
}
}
}
}
@ -37,19 +62,27 @@
box-shadow: none;
}
&.active a,
&.is-active a,
&.active .tab {
border-color: $blue;
color: $blue;
}
}
// important for auth tabs in active state, otherwise the border-bottom will not show.
a {
align-items: center;
display: flex;
justify-content: center;
vertical-align: top;
}
a,
.tab {
border-bottom: 2px solid transparent;
color: $grey;
font-weight: $font-weight-semibold;
text-decoration: none;
padding: $size-6 $size-8 $size-8;
border-bottom: 2px solid transparent;
text-decoration: none;
transition: background-color $speed, border-color $speed;
&:hover,
@ -59,6 +92,7 @@
&:hover {
background-color: $ui-gray-050;
color: $grey-darkest;
}
}

19
ui/app/styles/components/ui-wizard.scss
View File

@ -3,6 +3,7 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file is not being used. https://github.com/hashicorp/vault/pull/19220
.ui-wizard-container {
display: flex;
flex-direction: column;
@ -23,7 +24,7 @@
padding-right: 324px;
padding-right: calc(324px + env(safe-area-inset-right));
@include until($tablet) {
@include until($mobile) {
padding-right: 0;
padding-bottom: 50vh;
}
@ -38,7 +39,7 @@
position: fixed;
right: $size-8;
bottom: $size-8;
top: calc(#{$header-height} + #{$size-8});
top: calc(#{4rem} + #{$size-8});
overflow: auto;
p {
@ -53,7 +54,7 @@
z-index: 30;
}
@include until($tablet) {
@include until($mobile) {
box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24);
bottom: 0;
left: 0;
@ -79,7 +80,7 @@
margin: $size-4 0;
position: relative;
@include until($tablet) {
@include until($mobile) {
margin-top: 0;
padding-top: 0;
}
@ -103,9 +104,9 @@
padding-bottom: $size-11;
position: fixed;
right: $size-8;
top: calc(#{$header-height} + #{$size-8});
top: calc(#{4rem} + #{$size-8});
@include until($tablet) {
@include until($mobile) {
box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24);
bottom: 0;
left: 0;
@ -141,7 +142,7 @@
margin: $size-8 0 0;
padding: 0 $size-8;
border-top: solid 1px $white;
border-image: linear-gradient(to right, $vault-gray-dark, $vault-gray) 1;
border-image: linear-gradient(to right, $grey-dark, $grey) 1;
border-width: 1px 0 0;
button {
font-size: $size-7;
@ -196,8 +197,8 @@
}
.progress-bar {
background: $progress-bar-background-color;
box-shadow: inset 0 0 0 1px $ui-gray-200;
background: $ui-gray-050;
box-shadow: inset $box-link-shadow;
display: flex;
height: $wizard-progress-bar-height;
position: relative;

7
ui/app/styles/components/vlt-table.scss
View File

@ -18,6 +18,11 @@
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: $spacing-s;
@ -27,6 +32,8 @@
color: $grey-dark;
font-weight: 500;
font-size: $size-8;
text-align: left;
vertical-align: top;
}
tbody th {

70
ui/app/styles/core.scss
View File

@ -3,55 +3,60 @@
* SPDX-License-Identifier: MPL-2.0
*/
// Start with Structure & Bulma variables as a foundation
@import './utils/colors';
@import './utils/spacing';
@import 'bulma/sass/utilities/initial-variables';
// Variables
@import './utils/color_variables'; // colors need to come first.
@import './utils/box-shadow_variables';
@import './utils/font_variables';
@import './utils/size_variables';
// Override variables where appropriate
@import './utils/bulma_variables';
// Element styling
@import './core/element-styling';
// Utils
// Mixins
@import './utils/mixins';
@import './utils/animations';
// Bring in the rest of Bulma
@import 'bulma/bulma';
@import 'bulma/switch';
// Override Bulma details where appropriate
// Core Styles: each file styles a class that is not associated with a component. Ex: box and not box-label.
@import './core/alert-banner';
@import './core/generic';
@import './core/box';
@import './core/breadcrumb';
@import './core/bulma-radio-checkboxes';
@import './core/buttons';
@import './core/footer';
@import './core/forms';
@import './core/charts';
@import './core/helpers';
@import './core/hero';
@import './core/checkbox-and-radio';
@import './core/columns';
@import './core/containers';
@import './core/control';
@import './core/field';
@import './core/file';
@import './core/footer';
@import './core/inputs';
@import './core/label';
@import './core/level';
@import './core/link';
@import './core/lists';
@import './core/menu';
@import './core/message';
@import './core/navbar';
@import './core/notification';
@import './core/progress';
@import './core/select';
@import './core/switch';
@import './core/tables';
@import './core/tags';
@import './core/tag';
@import './core/title';
@import './core/toggle';
// bulma additions
@import './core/layout';
@import './core/lists';
// Helpers
@import './helper-classes/colors';
@import './helper-classes/flexbox-and-grid';
@import './helper-classes/layout';
@import './helper-classes/general';
@import './helper-classes/spacing';
@import './helper-classes/typography';
// Component specific styling
@import './components/auth-buttons';
@import './components/auth-form';
@import './components/autocomplete-input';
@import './components/b64-toggle';
@import './components/box-label';
@import './components/box-radio';
@import './components/calendar-widget';
@ -67,10 +72,9 @@
@import './components/form-section';
@import './components/global-flash';
@import './components/hover-copy-button';
@import './components/icon';
@import './components/init-illustration';
@import './components/info-table';
@import './components/info-table-row';
@import './components/input-hint';
@import './components/kmip-role-edit';
@import './components/known-secondaries-card.scss';
@import './components/license-banners';
@ -93,7 +97,6 @@
@import './components/read-more';
@import './components/regex-validator';
@import './components/replication-dashboard';
@import './components/replication-header';
@import './components/replication-mode-summary';
@import './components/replication-page';
@import './components/replication-primary-card';
@ -101,9 +104,9 @@
@import './components/role-item';
@import './components/search-select';
@import './components/selectable-card';
@import './components/selectable-card-container.scss';
@import './components/selectable-card-container';
// action-block extends selectable-card
@import './components/action-block.scss';
@import './components/action-block';
@import './components/shamir-modal-flow';
@import './components/shamir-progress';
@import './components/sidebar';
@ -115,14 +118,11 @@
@import './components/token-expire-warning';
@import './components/toolbar';
@import './components/tool-tip';
@import './components/transform-edit.scss';
@import './components/transform-edit';
@import './components/transit-card';
@import './components/ttl-picker';
@import './components/unseal-warning';
@import './components/ui-wizard';
// @import './components/ui-wizard'; // remove, see PR https://github.com/hashicorp/vault/pull/19220
@import './components/vault-loading';
@import './components/vlt-radio';
@import './components/vlt-table';
// bulma-free-zone
@import './components/icon';

64
ui/app/styles/core/box.scss
View File

@ -4,43 +4,37 @@
*/
.box {
background-color: $white;
border-radius: 0;
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
color: $ui-gray-900;
display: block;
padding: $size-5;
.title {
&.has-padding-top {
padding-top: $spacing-m;
}
&:not(:last-child) {
margin-bottom: 1.5rem;
}
p {
&.has-padding-bottom {
padding-bottom: $spacing-s;
}
&.is-fullwidth {
padding-left: 0;
padding-right: 0;
}
&.no-padding-top {
padding-top: 0;
}
&.has-slim-padding {
padding: 9px 0;
}
&.no-top-shadow {
box-shadow: inset 0 -1px 0 0 rgba($black, 0.1);
}
&.has-container {
box-shadow: 0 4px 4px rgba($black, 0.25);
border: $base-border;
padding: $spacing-l;
}
}
.box.is-fullwidth {
padding-left: 0;
padding-right: 0;
}
.box.no-padding-bottom {
padding-bottom: 0;
}
.box.no-padding-top {
padding-top: 0;
}
.box.has-slim-padding {
padding: 9px 0;
}
.box.has-glow {
box-shadow: 0 2px 4px 0 rgba($grey-dark, 0.5);
}
.box.is-rounded {
border-radius: 3px;
}
.box.no-top-shadow {
box-shadow: inset 0 -1px 0 0 rgba($black, 0.1);
}
.box.has-container {
box-shadow: 0 4px 4px rgba($black, 0.25);
border: 1px solid #bac1cc;
padding: $spacing-l;
}

26
ui/app/styles/core/breadcrumb.scss
View File

@ -4,24 +4,36 @@
*/
.breadcrumb {
-ms-user-select: text;
-webkit-user-select: text;
display: flex;
user-select: text;
min-height: 1.5rem;
margin: 0;
overflow-x: auto;
white-space: nowrap;
&:not(:last-child) {
margin: 0;
}
.is-sidebar + .column & {
@include until($tablet) {
@include until($mobile) {
margin-left: $size-2;
}
}
ul,
ol {
align-items: center;
display: flex;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
}
li {
align-items: center;
display: flex;
& + li::before {
display: none;
}
@ -31,9 +43,17 @@
margin-left: 0;
}
}
&.is-active a {
color: $grey-darkest;
cursor: default;
pointer-events: none;
}
}
a {
align-items: center;
display: flex;
justify-content: center;
line-height: 1;
padding: 0 $size-11 0 0;
text-decoration: none;

30
ui/app/styles/core/bulma-radio-checkboxes.scss
View File

@ -1,30 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
@import '../sass-svg-uri/svg-uri';
.b-checkbox input[type='checkbox']:checked + label::before {
border-color: $blue;
}
.b-checkbox input[type='checkbox']:checked + label::after,
.b-checkbox input[type='radio']:checked + label::after {
font-family: $family-monospace;
/*checkmark from ionicons*/
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512" fill="#{$blue}"><path d="M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z"/></svg>'
);
}
.b-checkbox.no-label input[type='checkbox'] + label {
position: absolute;
top: 0;
}
.checkbox-help-text {
font-size: $size-7;
color: $ui-gray-700;
padding-left: 28px;
}

341
ui/app/styles/core/buttons.scss
View File

@ -3,39 +3,218 @@
* SPDX-License-Identifier: MPL-2.0
*/
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
.button {
align-items: center;
background-color: $grey-lightest;
border: 1px solid $grey-light;
border-radius: $radius;
box-shadow: $box-shadow-low;
cursor: pointer;
color: $ui-gray-800;
display: inline-block;
font-size: $size-small;
font-size: $size-8;
font-weight: $font-weight-semibold;
height: 2.5rem;
line-height: 1.6;
min-width: 6rem;
padding: $size-10 $size-8;
position: relative;
text-align: center;
text-decoration: none;
transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&.is-icon {
padding: 0.25rem $size-3;
@keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
&:active,
&.is-active,
&:focus,
&.is-focused {
&:focus {
border-color: darken($grey-light, 10%);
box-shadow: $button-box-shadow-standard;
color: darken($grey-dark, 10%);
}
&.is-inverted.is-outlined {
&:focus:not(:active) {
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
}
&:disabled {
background-color: $white;
border-color: $ui-gray-050;
box-shadow: none;
cursor: not-allowed;
opacity: 0.5;
}
// Button types: is-compact, is-danger, is-danger-outlined, is-flat, is-ghost, is-icon, is-loading, is-link, is-outline, is-primary, is-transparent.
&.is-compact {
height: 2rem;
padding: $size-11 $size-8;
}
&.is-danger {
background-color: $red-500;
border-color: darken($red-500, 2%);
color: $white;
text-shadow: 0 1px 1px rgba($black, 0.25);
&:hover:not([disabled]) {
background-color: darken($red-500, 5%);
border-color: darken($red-500, 5%);
box-shadow: $box-shadow-middle;
}
&:active,
&.is-active {
background-color: darken($red-500, 10%);
border-color: darken($red-500, 10%);
box-shadow: $box-shadow-middle;
}
&:focus {
border-color: darken($red-500, 10%);
box-shadow: $button-box-shadow-standard;
}
}
&.is-danger-outlined {
border: 1px solid $red-500;
color: $red-500;
}
&.is-flat {
min-width: auto;
border: none;
box-shadow: none;
}
&.is-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
color: $blue;
text-decoration: none;
&:hover {
color: $blue-500;
background-color: $grey-lightest;
}
}
&.is-icon {
padding: 0.25rem $size-3;
}
&.is-loading {
color: transparent !important;
pointer-events: none;
&::after {
animation: spinAround 500ms infinite linear;
border: 2px solid $ui-gray-300;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: '';
display: block;
height: 1em;
width: 1em;
left: calc(50% - (1em / 2));
top: calc(50% - (1em / 2));
position: absolute !important;
}
}
&.is-link {
background-color: transparent;
border-color: transparent;
color: $blue;
text-decoration: none;
font-weight: $font-weight-semibold;
box-shadow: none;
min-width: 4rem;
}
&.is-primary {
background-color: $blue;
border-color: darken($blue, 2%);
color: $white;
font-weight: $font-weight-bold;
text-shadow: 0 1px 1px rgba($black, 0.25);
&:disabled {
background-color: $ui-gray-700;
border-color: transparent;
box-shadow: none;
}
&:hover:not([disabled]) {
background-color: darken($blue, 5%);
border-color: darken($blue, 5%);
box-shadow: $box-shadow-middle;
}
&:active,
&.is-active {
background-color: darken($blue, 10%);
border-color: darken($blue, 10%);
box-shadow: $box-shadow-middle;
}
&:focus {
border-color: darken($blue, 10%);
box-shadow: $button-box-shadow-standard;
}
&.is-loading::after {
border-color: transparent transparent $white $white;
}
&.is-underlined {
&:active,
&.is-active {
background-color: transparent;
border-bottom: 2px solid darken($blue, 10%);
border-radius: unset;
color: darken($blue, 10%);
}
}
// is-primary.is-outlined the only is-outlined buttons are primary.
&.is-outlined {
background-color: transparent;
border-color: $blue;
color: $blue;
&:hover,
&:focus {
background-color: transparent;
border-color: darken($blue, 10%);
color: $blue;
}
&:active,
&.is-active {
background-color: transparent;
border-color: darken($blue, 10%);
color: darken($blue, 10%);
}
}
&.is-outlined [disabled] {
background-color: transparent;
border-color: $ui-gray-700;
box-shadow: none;
color: $ui-gray-700;
}
}
&.is-transparent {
@ -46,151 +225,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
min-width: auto;
padding: 0;
}
&.is-flat {
min-width: auto;
border: none;
box-shadow: none;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
@if $name == 'primary' {
$color: $blue;
}
$color-invert: nth($pair, 2);
&.is-#{$name} {
border-color: darken($color, 2%);
background-color: $color;
color: $color-invert;
&:hover:not([disabled]),
&.is-hovered {
background-color: darken($color, 5%);
border-color: darken($color, 5%);
box-shadow: $box-shadow-middle;
}
&:active,
&.is-active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
box-shadow: $box-shadow-middle;
}
&:focus,
&.is-focused {
border-color: darken($color, 10%);
box-shadow: $button-box-shadow-standard;
}
&.is-outlined {
border-color: $color;
color: $color;
background-color: transparent;
&.is-important {
border-color: $color;
}
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background-color: transparent;
border-color: darken($color, 10%);
color: $color;
}
&:active,
&.is-active {
background-color: transparent;
border-color: darken($color, 10%);
color: darken($color, 10%);
}
}
&.is-underlined {
&:active,
&.is-active {
background-color: transparent;
border-bottom: 2px solid darken($color, 10%);
border-radius: unset;
color: darken($color, 10%);
}
}
&.is-inverted.is-outlined {
border-color: rgba($color-invert, 0.5);
color: rgba($color-invert, 0.9);
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background-color: transparent;
border-color: $color-invert;
color: $color-invert;
}
&:active,
&.is-active {
background-color: rgba($color-invert, 0.2);
border-color: $color-invert;
color: $color-invert;
box-shadow: none;
}
}
}
}
&.is-primary {
font-weight: $font-weight-bold;
text-shadow: 0 1px 1px rgba($black, 0.25);
}
&.is-link {
color: $link;
text-decoration: none;
font-weight: $font-weight-semibold;
box-shadow: none;
min-width: 4rem;
}
&.is-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
color: $blue;
&:hover {
background-color: $grey-lightest;
}
}
&.is-orange {
background-color: $orange;
border-color: $orange;
color: $white;
&:hover,
&.is-hovered {
background-color: darken($orange, 5%);
border-color: darken($orange, 5%);
}
}
&.is-compact {
height: 2rem;
padding: $size-11 $size-8;
}
.has-text-info & {
font-weight: $font-weight-semibold;
}
&.has-text-danger {
border: 1px solid $red-500;
}
// End of button types
&.tool-tip-trigger {
color: $grey-dark;

18
ui/app/styles/core/charts.scss
View File

@ -57,7 +57,7 @@
grid-column-start: 1;
grid-column-end: span col4-end;
grid-row-start: 1;
box-shadow: inset 0 -1px 0 $vault-gray-200;
box-shadow: inset 0 -1px 0 $ui-gray-200;
}
.has-header-link {
@ -68,9 +68,7 @@
text-align: right;
> button {
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
&:focus {
background-color: transparent;
background-color: darken($ui-gray-050, 5%);
border-color: darken($ui-gray-300, 5%);
@ -101,7 +99,7 @@
grid-row-end: 5;
padding-bottom: $spacing-xl;
margin-bottom: $spacing-s;
box-shadow: inset 0 -1px 0 $vault-gray-200;
box-shadow: inset 0 -1px 0 $ui-gray-200;
> h2 {
padding-left: 18px;
@ -118,7 +116,7 @@
grid-row-end: 5;
padding-bottom: $spacing-xl;
margin-bottom: $spacing-s;
box-shadow: inset 0 -1px 0 $vault-gray-200;
box-shadow: inset 0 -1px 0 $ui-gray-200;
> h2 {
padding-left: 18px;
@ -204,7 +202,7 @@ h2.chart-title {
p.chart-description {
color: $ui-gray-700;
font-size: $body-size;
font-size: 14px;
line-height: 18px;
margin-bottom: $spacing-xs;
}
@ -219,7 +217,7 @@ p.chart-subtext {
h3.data-details {
font-weight: $font-weight-bold;
font-size: $size-8;
line-height: $body-size;
line-height: 14px;
margin-bottom: $spacing-xs;
}
@ -231,7 +229,7 @@ p.data-details {
// MISC STYLES
.light-dot {
background-color: #bfd4ff;
background-color: $blue-100;
height: 10px;
width: 10px;
border-radius: 50%;
@ -239,7 +237,7 @@ p.data-details {
}
.dark-dot {
background-color: #1563ff;
background-color: $blue-500;
height: 10px;
width: 10px;
border-radius: 50%;

124
ui/app/styles/core/checkbox-and-radio.scss Normal file
View File

@ -0,0 +1,124 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for .checkbox, .radio and .b-checkboxes. The prefix "b" comes from Bulma.
@import '../sass-svg-uri/svg-uri';
// checkbox and radio styling
.checkbox,
.radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
}
.checkbox input,
.radio input {
cursor: pointer;
}
.checkbox:hover,
.radio:hover {
color: hsl(0, 0%, 21%);
}
.checkbox[disabled],
.radio[disabled],
.checkbox input[disabled],
.radio input[disabled] {
color: $grey;
cursor: not-allowed;
}
// radio only styling
.radio + .radio {
margin-left: 0.5em;
}
// one-off checkbox class
.checkbox-help-text {
color: $ui-gray-700;
font-size: $size-7;
padding-left: 28px;
}
// b-checkbox styling
.b-checkbox {
position: relative;
}
.b-checkbox label::before {
background-color: $white;
border-radius: 3px;
border: 1px solid $ui-gray-300;
content: '';
height: 17px;
left: 0;
position: absolute;
top: 1px;
transition: background 0.1s ease-in-out;
width: 17px;
}
.b-checkbox input[type='checkbox']:checked + label::before {
border-color: $blue;
}
.b-checkbox input[type='checkbox']:checked + label::after,
.b-checkbox input[type='radio']:checked + label::after {
font-family: $family-monospace;
/*checkmark from ionicons*/
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512" fill="#{$blue}"><path d="M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z"/></svg>'
);
}
.b-checkbox input[type='checkbox'],
.b-checkbox input[type='radio'] {
cursor: pointer;
opacity: 0;
z-index: 1;
}
.b-checkbox label::after {
color: $ui-gray-800;
font-size: 12px;
height: 16px;
left: 3px;
position: absolute;
top: 3px;
width: 16px;
}
.b-checkbox label {
display: inline;
line-height: 1;
margin-left: 0.5rem;
padding-left: 5px;
}
.b-checkbox input[type='checkbox']:focus + label::before,
.b-checkbox input[type='radio']:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.b-checkbox input[type='checkbox']:disabled + label::before,
.b-checkbox input[type='radio']:disabled + label::before {
background-color: $ui-gray-100;
cursor: not-allowed;
}
.b-checkbox input[type='checkbox']:disabled + label,
.b-checkbox input[type='radio']:disabled + label {
opacity: 0.65;
}
.b-checkbox > .sub-text {
padding-left: 2rem;
}

201
ui/app/styles/core/columns.scss Normal file
View File

@ -0,0 +1,201 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for columns and column
// Columns (plural)
.columns {
margin-left: -$size-9;
margin-right: -$size-9;
margin-top: -$size-9;
&:last-child {
margin-bottom: -$size-9;
}
&.is-centered {
justify-content: center;
}
&.is-gapless {
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
&.is-gapless > .column {
margin: 0;
padding: 0 !important;
}
&.is-gapless:not(:last-child) {
margin-bottom: $size-4;
}
&.is-gapless:last-child {
margin-bottom: 0;
}
&.is-mobile {
display: flex;
> .column.is-1 {
flex: none;
width: 8.33333%;
}
> .column.is-3 {
flex: none;
width: 25%;
}
> .column.is-10 {
flex: none;
width: 83.33333%;
}
> .column.is-12 {
flex: none;
width: 100%;
}
}
&.is-multiline {
flex-wrap: wrap;
}
// columnGap does not take vars
&.is-variable.is-1 {
--columnGap: $i * 0.25rem;
}
&.is-variable {
--columnGap: 0.75rem;
margin-left: calc(-1 * var(--columnGap));
margin-right: calc(-1 * var(--columnGap));
}
&.is-variable > .column {
padding-left: var(--columnGap);
padding-right: var(--columnGap);
}
}
// responsive css columns
@media screen and (min-width: 769px), print {
.columns:not(.is-desktop) {
display: flex;
}
.columns.is-variable.is-7-tablet {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-desktop {
display: flex;
}
}
// Column (singular)
.column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: 0.75rem;
&.is-narrow {
flex: none;
width: unset;
}
&.is-1 {
flex: none;
width: 8.33333%;
}
&.is-3 {
flex: none;
width: 25%;
}
&.is-5,
.is-5-tablet {
flex: none;
width: 41.66667%;
}
}
// responsive css column (order matters here because some columns have several of these classes and they need to override in the correct order).
@media screen and (min-width: 769px), print {
.column {
&.is-one-quarter {
flex: none;
width: 25%;
}
&.is-half {
flex: none;
width: 50%;
}
&.is-two-thirds {
flex: none;
width: 66.6666%;
}
&.is-one-third {
flex: none;
width: 33.3333%;
}
&.is-5 {
flex: none;
width: 41.66667%;
}
&.is-6,
&.is-6-tablet {
flex: none;
width: 50%;
}
&.is-9 {
flex: none;
width: 75%;
}
&.is-7,
&.is-7-tablet {
flex: none;
width: 58.33333%;
}
&.is-12 {
flex: none;
width: 100%;
}
&.is-full,
&.is-full-tablet {
flex: none;
width: 100%;
}
}
}
@media screen and (max-width: 768px) {
.column.is-10-mobile {
flex: none;
width: 83.33333%;
}
}
@media screen and (min-width: 1024px) {
.column.is-4-desktop {
flex: none;
width: 33.33333%;
}
}

68
ui/app/styles/core/containers.scss Normal file
View File

@ -0,0 +1,68 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for the larger container elements like page-container, section and container.
.ember-application > .ember-view {
display: flex;
flex-direction: column;
}
.page-container {
min-height: calc(100vh - 4rem);
display: flex;
flex-direction: column;
margin-top: 4rem;
justify-content: flex-end;
}
.section {
display: flex;
flex-grow: 1;
flex-direction: column;
padding: 0 $size-4;
> .container {
display: flex;
flex-grow: 1;
flex-direction: column;
width: 100%;
> .columns {
flex-grow: 1;
}
}
}
.container {
flex-grow: 1;
margin: 0 auto;
position: relative;
width: auto;
}
@media screen and (min-width: 1024px) {
.container {
max-width: 960px;
}
}
@media screen and (max-width: 1215px) {
.container.is-widescreen:not(.is-max-desktop) {
max-width: 1152px;
}
}
@media screen and (min-width: 1216px) {
.container:not(.is-max-desktop) {
max-width: 1152px;
}
}
@media screen and (min-width: 1408px) {
.container:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: 1344px;
}
}

64
ui/app/styles/core/control.scss Normal file
View File

@ -0,0 +1,64 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the style for .control
.control.has-icons-left .icon,
.control.has-icons-right .icon {
height: 2.5rem;
}
.control.has-icons-right .input {
padding-right: 2.25em;
}
.control {
font-size: 1rem;
max-width: 100%;
position: relative;
text-align: left;
// Modifiers
&.has-icons-left,
&.has-icons-right {
.input,
.select select {
padding-left: 2rem;
&:focus,
&:active,
&.is-active {
& ~ .icon {
color: currentColor;
}
}
}
}
&.has-checkbox-right {
label.checkbox {
display: inline-flex;
height: 2.5em;
position: absolute;
top: 0;
right: 0;
justify-content: flex-end;
margin-left: auto;
}
.input,
.select select {
padding-right: 10em;
}
}
&.is-align-end {
display: flex;
align-self: end;
}
}
.control.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}

167
ui/app/styles/core/element-styling.scss Normal file
View File

@ -0,0 +1,167 @@
/* These come from bulma */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
a:hover,
body,
pre,
strong,
table th {
color: $ui-gray-900;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
*:before,
*:after {
box-sizing: inherit;
}
img,
embed,
object {
max-width: 100%;
}
html {
background-color: $white;
font-size: 14px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
}
article,
aside,
figure,
footer,
header,
hgroup,
section {
display: block;
}
body,
button,
input,
select,
textarea {
font-family: $family-sans;
}
code,
pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: inherit;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-smooth: inherit;
}
a strong,
pre code {
color: currentColor;
}
body {
font-size: $size-6;
line-height: 1.5;
}
a {
color: $blue-500;
cursor: pointer;
text-decoration: underline;
&:hover,
&:active,
&:focus {
position: relative;
}
}
a:hover {
color: $ui-gray-900;
}
code {
background-color: transparent;
color: $ui-gray-700;
font-size: 1em;
font-weight: 400;
padding: 0;
}
hr {
background-color: $ui-gray-300;
border: none;
display: block;
height: 1px;
margin: 1rem 0;
}
img {
height: auto;
max-width: 100%;
}
form {
margin: 0;
}
label {
cursor: pointer;
}

141
ui/app/styles/core/field.scss Normal file
View File

@ -0,0 +1,141 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for .field, .field-body, .form-fieldset
.field {
// cannot use :read-only selector because tag used for other purposes
&.is-readOnly {
background-color: $ui-gray-100;
cursor: not-allowed;
}
&:not(:last-child) {
margin-bottom: $size-4;
}
}
// must come after field due to overriding the margin-bottom of not last-child
.field-body .field {
margin-bottom: 0;
}
.field.has-addons {
flex-wrap: wrap;
.control {
.button,
.checkbox,
.input,
.select select {
border-radius: 0;
&:hover {
z-index: 2;
}
&:focus,
&:active,
&.is-active {
z-index: 3;
&:hover {
z-index: 4;
}
}
}
&:first-of-type {
flex-grow: 1;
.button,
.checkbox,
.input,
.select select {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
}
&:last-child {
.button,
.checkbox,
.input,
.select select {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
}
}
& > .label {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
}
fieldset.form-fieldset {
border: none;
}
// field.is-grouped styles
.field.is-grouped {
display: flex;
justify-content: flex-start;
> .control.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
> .control {
flex-shrink: 0;
}
> .control:not(:last-child) {
margin-bottom: 0;
margin-right: 0.75rem;
}
> .control.is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
}
// responsive css
@media screen and (min-width: 769px), print {
.field.is-horizontal {
display: flex;
}
.field-body {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
> .field:not(:last-child) {
margin-right: $size-9;
}
.field:not(.is-narrow) {
flex-grow: 1;
}
}
.field-label {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-right: 1.5rem;
text-align: right;
&.is-normal {
padding-top: 0.375em;
}
&.is-medium {
font-size: 1.25rem;
padding-top: 0.375em;
}
&.is-large {
font-size: 1.5rem;
padding-top: 0.375em;
}
}
}

99
ui/app/styles/core/file.scss Normal file
View File

@ -0,0 +1,99 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for file, file-cta, file-delete-button, file-icon, file-input, file-label, file-name.
.file {
user-select: none;
}
.file-cta {
align-items: center;
border: $base-border;
border-radius: $radius;
display: inline-flex;
height: 2.25em;
justify-content: flex-start;
min-width: auto;
padding-bottom: calc(0.375em -1px);
padding-left: 1em;
padding-right: 1em;
padding-top: calc(0.375em -1px);
position: relative;
vertical-align: top;
white-space: nowrap;
&.button {
height: $size-2; // in older parts of the code (Ex: shamir-modal-flow) this class is not a button. In newer parts of the code it is, and height needs to match the height of a button (2.5rem).
}
&:disabled {
cursor: not-allowed;
}
.icon:first-child:last-child {
display: inline-block;
margin-right: 0.1rem;
vertical-align: middle;
}
}
.file-delete-button {
@extend .button;
@extend .is-transparent;
color: $grey;
position: absolute;
right: $spacing-xs;
}
.file-icon {
align-items: center;
display: flex;
height: 1em;
justify-content: center;
margin-right: 0.5em;
width: 1em;
}
.file-input {
height: 0.01em;
left: 0;
outline: 0;
position: absolute;
top: 0;
width: 0.01em;
visibility: hidden;
}
.file-label {
align-items: stretch;
cursor: pointer;
display: flex;
justify-content: flex-start;
position: relative;
}
.file-name {
@extend .input;
border: $base-border;
border-radius: $radius;
box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
display: block;
font-size: 1em;
line-height: 1.5;
overflow: hidden;
padding-bottom: calc(0.375em - 1px);
padding-left: 1em;
padding-right: 1em;
padding-top: calc(0.375em - 1px);
position: relative;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
&:disabled {
cursor: not-allowed;
}
}

373
ui/app/styles/core/forms.scss
View File

@ -1,373 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
form {
margin: 0;
}
label {
cursor: pointer;
&.is-select-list {
padding: 10px 0px;
&:hover {
color: $blue;
}
}
}
.masked-font {
font-family: obscure, text-security-square;
letter-spacing: 2px;
}
.label {
color: $grey-darker;
text-transform: uppercase;
font-size: $size-small;
}
.is-label,
.b-checkbox .is-label {
color: $grey-darker;
display: inline-block;
font-size: $body-size;
font-weight: $font-weight-bold;
&:not(:last-child) {
margin-bottom: 0.25rem;
}
// Sizes
&.is-small {
font-size: $size-small;
}
&.is-medium {
font-size: $size-medium;
}
&.is-large {
font-size: $size-large;
}
&::before,
&::after {
transform: translateY(0.2em);
}
&::before {
border-color: $grey-light;
}
}
.b-checkbox .is-label {
display: inline;
margin-left: $size-10;
}
.b-checkbox > .sub-text {
padding-left: 2rem;
}
.help {
&.is-danger {
font-weight: $weight-bold;
}
}
.is-help {
font-size: $size-small;
margin-top: 0.25rem;
@each $name, $pair in $colors {
$color: nth($pair, 1);
&.is-#{$name} {
color: $color;
}
}
}
.sub-text {
color: $grey;
margin-bottom: 0.25rem;
font-size: $size-8;
}
.input,
.textarea,
.select select {
border-color: $grey-light;
color: $grey-dark;
padding-left: $size-8;
padding-right: $size-8;
@include until($desktop) {
font-size: 16px;
}
&::placeholder {
opacity: 0.5;
}
}
.input,
.select select,
.control.has-icons-left .icon,
.control.has-icons-right .icon {
height: 2.5rem;
}
.input.variable {
font-family: $family-monospace;
}
.select select[disabled],
.input[disabled],
.textarea[disabled] {
border-color: $grey-light;
background-color: $ui-gray-100;
color: $ui-gray-500;
&:hover {
border-color: $grey-light;
}
}
.control {
max-width: 100%;
// Modifiers
&.has-icons-left,
&.has-icons-right {
.input,
.select select {
padding-left: 2rem;
&:focus,
&.is-focused,
&:active,
&.is-active {
& ~ .icon {
color: currentColor;
}
}
}
}
&.has-checkbox-right {
label.checkbox {
display: inline-flex;
height: 2.5em;
position: absolute;
top: 0;
right: 0;
justify-content: flex-end;
margin-left: auto;
}
.input,
.select select {
padding-right: 10em;
}
}
&.is-align-end {
display: flex;
align-self: end;
}
}
.input,
.textarea {
box-shadow: 0 4px 1px rgba($black, 0.06) inset;
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: findColorInvert($color);
$color-bg: nth($pair, 2);
&.is-#{$name} {
border-color: $color;
background-color: $color-bg;
&.is-inverted {
border-color: rgba($color-invert, 0.3);
background-color: $color-bg;
&::placeholder {
color: rgba($color-invert, 0.3);
}
&:focus,
&.is-focused,
&:active,
&.is-active {
border-color: rgba($color-invert, 1);
background-color: $color-bg;
color: $color-invert;
&::placeholder {
color: rgba($color-invert, 0.7);
}
}
}
}
}
&:focus,
&.is-focused,
&:active,
&.is-active {
background-color: $input-focus-background-color;
}
}
.select select {
background-color: $ui-gray-050;
box-shadow: 0 3px 1px rgba($black, 0.12);
.has-background-grey-lighter & {
background-color: $white;
}
}
.select:not(.is-multiple) {
height: 2.5rem;
}
.select:not(.is-multiple)::after {
content: svg-uri(
'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>'
);
border: 0;
height: 24px;
margin: 0;
right: $spacing-xs;
transform: translateY(-50%);
width: 24px;
}
.field:not(:last-child) {
margin-bottom: 1.5rem;
}
.field-body .field {
margin-bottom: 0;
}
.field {
// cannot use :read-only selector because tag used for other purposes
&.is-readOnly {
background-color: $ui-gray-100;
cursor: not-allowed;
}
}
.field.has-addons {
flex-wrap: wrap;
.control {
.button,
.checkbox,
.input,
.select select {
border-radius: 0;
&:hover,
&.is-hovered {
z-index: 2;
}
&:focus,
&.is-focused,
&:active,
&.is-active {
z-index: 3;
&:hover {
z-index: 4;
}
}
}
&:first-of-type {
flex-grow: 1;
.button,
.checkbox,
.input,
.select select {
border-bottom-left-radius: $input-radius;
border-top-left-radius: $input-radius;
}
}
&:last-child {
.button,
.checkbox,
.input,
.select select {
border-bottom-right-radius: $input-radius;
border-top-right-radius: $input-radius;
}
}
}
& > .label {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
.checkbox {
@include input;
background-color: $grey-lightest;
@each $name, $pair in $colors {
$color: nth($pair, 1);
&.is-#{$name} {
border-color: $color;
}
}
input {
margin-right: 0.5em;
}
}
}
.file-label {
overflow: visible;
}
.file-input {
visibility: hidden;
}
.file-cta {
min-width: auto;
.icon:first-child:last-child {
display: inline-block;
margin-right: 0.1rem;
vertical-align: middle;
}
}
.file-name {
@extend .input;
}
.file-delete-button {
@extend .button;
@extend .is-transparent;
color: $grey;
position: absolute;
right: 8px;
}
fieldset.form-fieldset {
border: none;
}
.has-warning-border {
border: 1px solid $yellow-500;
}
.has-error-border,
select.has-error-border {
border: 1px solid $red-500;
}
.dropdown-has-error-border > div.ember-basic-dropdown-trigger {
border: 1px solid $red-500;
}
.autocomplete-input {
background: $white !important;
border: 1px solid $grey-light;
box-sizing: border-box;
border-radius: 3px;
width: 99%;
padding: 4px 0;
margin-left: 0.5%;
margin-top: -4px;
}
.autocomplete-input-option {
padding: 12px;
&:hover {
background-color: $grey-lightest;
cursor: pointer;
}
}

62
ui/app/styles/core/generic.scss
View File

@ -1,62 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// seriously ? yes. seriously.
a {
text-decoration: underline;
&:hover,
&:active,
&:focus {
position: relative;
}
}
.menu a {
text-decoration: none;
}
code {
padding: 0;
font-size: 1em;
}
.icon {
min-width: 1.5rem;
vertical-align: middle;
}
code,
pre {
font-smooth: inherit;
-webkit-font-smoothing: inherit;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.link {
background: transparent;
border: 0;
color: $blue;
cursor: pointer;
display: inline;
font: inherit;
line-height: normal;
margin: 0;
padding: 0;
font-weight: $font-weight-semibold;
-webkit-user-select: text; /* Chrome all / Safari all */
-moz-user-select: text; /* Firefox all */
-ms-user-select: text; /* IE 10+ */
user-select: text;
&[disabled] {
opacity: 0.5;
cursor: default;
}
}
.link-plain {
text-decoration: none;
}

365
ui/app/styles/core/helpers.scss
View File

@ -1,365 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.is-invisible {
visibility: hidden;
}
.is-underline {
text-decoration: underline;
}
.is-no-underline {
text-decoration: none;
}
.is-sideless {
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
}
.is-bottomless {
box-shadow: 0 -1px 0 0 $grey-light;
}
.has-only-top-shadow {
box-shadow: 0 -1px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
}
.has-bottom-shadow {
box-shadow: $box-shadow !important;
}
.is-borderless {
border: none !important;
}
.is-box-shadowless {
box-shadow: none !important;
}
.is-relative {
position: relative;
}
.is-fullwidth {
width: 100%;
}
.is-in-bottom-right {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 10;
}
.has-background-transition {
transition: background-color $easing $speed;
}
.is-flex-column {
display: flex;
flex-direction: column;
}
.is-flex-row {
display: flex;
flex-direction: row;
}
.is-flex-v-centered {
display: flex;
align-items: center;
align-self: center;
justify-content: center;
}
.is-flex-v-centered-tablet {
@include tablet {
display: flex;
align-items: center;
align-self: center;
justify-content: center;
}
}
.is-flex-center {
display: flex;
align-items: center;
}
.is-flex-align-baseline {
display: flex;
align-items: baseline;
}
.is-flex-1 {
flex-grow: 1;
&.basis-0 {
flex-basis: 0;
}
}
.is-flex-wrap {
flex-flow: row wrap;
}
.is-flex-end {
display: flex !important;
justify-content: flex-end;
}
.is-flex-start {
display: flex !important;
justify-content: flex-start;
&.has-gap {
gap: $spacing-m;
}
}
.is-flex-full {
flex-basis: 100%;
}
.is-no-flex-grow {
flex-grow: 0 !important;
}
.is-flex-half {
flex: 50%;
}
.is-auto-width {
width: auto;
}
.is-min-width-0 {
min-width: 0;
}
.is-flex-between,
.is-grouped-split {
display: flex;
justify-content: space-between !important;
}
/* CSS GRID */
// grid container
.is-grid {
display: grid;
}
.is-grid-3-columns {
grid-template-columns: repeat(3, 1fr);
}
.is-medium-height {
height: $medium-height;
}
// grid items
.is-grid-column-span-3 {
grid-column-end: span 3;
}
/* END OF CSS GRID */
.has-default-border {
border: 1px solid $grey !important;
}
.has-no-pointer {
pointer-events: none;
}
.has-pointer {
cursor: pointer;
}
.has-short-padding {
padding: 0.25rem 1.25rem;
}
.has-tall-padding {
padding: 2.25rem;
}
.has-side-padding-s {
padding-left: $spacing-s;
padding-right: $spacing-s;
}
.has-padding-m {
padding: $spacing-m;
}
.has-bottom-padding-s {
padding-bottom: $spacing-s;
}
.has-padding-xs {
padding: $spacing-xs;
}
.has-padding-xxs {
padding: $spacing-xxs;
}
.has-top-bottom-margin {
margin: 1.25rem 0rem;
}
.has-top-bottom-margin-negative-m {
margin-top: -$spacing-m;
margin-bottom: -$spacing-m;
}
.is-sideless.has-short-padding {
padding: 0.25rem 1.25rem;
}
.has-current-color-fill {
&,
& svg {
fill: currentColor;
}
}
.is-word-break {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.truncate-second-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.is-font-mono {
font-family: $family-monospace;
}
.is-size-8 {
font-size: $size-8 !important;
}
.is-size-9 {
font-size: $size-9 !important;
}
.is-hint {
color: $grey;
font-size: $size-8;
padding: $size-8 0;
}
@each $name, $shade in $shades {
.has-background-#{$name} {
background: $shade !important;
}
}
.has-background-transparent {
background: transparent !important;
}
.has-background-gray-200 {
background-color: $ui-gray-200;
}
.has-background-gray-100 {
background-color: $ui-gray-100;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
.has-background-#{$name} {
background: $color !important;
}
}
.is-optional {
color: $grey;
font-size: $size-8;
text-transform: lowercase;
}
.has-top-padding-xxs {
padding-top: $spacing-xxs;
}
.has-top-padding-s {
padding-top: $spacing-s;
}
.has-top-padding-l {
padding-top: $spacing-l;
}
.has-left-padding-l {
padding-left: $spacing-l;
}
.has-top-padding-xxl {
padding-top: $spacing-xxl;
}
.has-bottom-margin-xs {
margin-bottom: $spacing-xs;
}
.has-bottom-margin-s {
margin-bottom: $spacing-s;
}
.has-bottom-margin-m {
margin-bottom: $spacing-m;
}
.has-bottom-margin-l {
margin-bottom: $spacing-l;
}
.has-bottom-margin-xl {
margin-bottom: $spacing-xl;
}
.has-bottom-margin-xxl {
margin-bottom: $spacing-xxl;
}
.has-top-margin-s {
margin-top: $spacing-s;
}
.has-top-margin-xs {
margin-top: $spacing-xs;
}
.has-top-margin-m {
margin-top: $spacing-m;
}
.has-top-margin-l {
margin-top: $spacing-l;
}
.has-top-margin-xl {
margin-top: $spacing-xl;
}
.has-top-margin-xxl {
margin-top: $spacing-xxl;
}
.has-top-margin-negative-s {
margin-top: (-1 * $spacing-s);
}
.has-left-margin-xxs {
margin-left: $spacing-xxs;
}
.has-left-margin-xs {
margin-left: $spacing-xs;
}
.has-left-margin-s {
margin-left: $spacing-s;
}
.has-left-margin-m {
margin-left: $spacing-m;
}
.has-left-margin-l {
margin-left: $spacing-l;
}
.has-left-margin-xl {
margin-left: $spacing-xl;
}
.has-right-margin-m {
margin-right: $spacing-m;
}
.has-right-margin-l {
margin-right: $spacing-l;
}
.has-border-top-light {
border-radius: 0;
border-top: 1px solid $grey-light;
}
.has-border-bottom-light {
border-radius: 0;
border-bottom: 1px solid $grey-light;
}
.has-border-danger {
border: 1px solid $danger;
}
ul.bullet {
list-style: disc;
padding-left: $spacing-m;
}
.has-text-semibold {
font-weight: $font-weight-semibold;
}
.is-v-centered {
vertical-align: middle;
}
.has-text-grey-400 {
color: $ui-gray-400;
}
.has-text-red {
color: $red;
}
.has-text-green {
color: $green;
}
.has-text-align-center {
text-align: center;
}
// Screen Readers only
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}

12
ui/app/styles/core/hero.scss
View File

@ -1,12 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.hero-body {
padding: 3rem 2rem 1rem;
svg {
margin-bottom: $size-10;
}
}

83
ui/app/styles/core/inputs.scss Normal file
View File

@ -0,0 +1,83 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the styles for .input, .textarea and .input-hint.
.input,
.textarea {
align-items: center;
border-radius: $radius;
border: $base-border;
box-shadow: 0 4px 1px rgba($black, 0.06) inset;
color: $grey-dark;
display: inline-flex;
font-size: $size-6;
height: $size-2;
line-height: 1.5;
max-width: 100%;
padding-bottom: calc(0.375em - 1px);
padding-left: $size-8;
padding-right: $size-8;
padding-top: calc(0.375em - 1px);
width: 100%;
&:focus,
&:active,
&.is-active,
&:focus-visible {
outline: none;
background-color: $white;
border-color: $blue-500 !important;
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
}
&:hover {
border-color: $ui-gray-300;
}
@include until($desktop) {
font-size: $size-6;
}
&::placeholder {
opacity: 0.5;
}
}
.input[disabled],
.textarea[disabled] {
border-color: $grey-light;
background-color: $ui-gray-100;
color: $ui-gray-500;
cursor: not-allowed;
&:hover {
border-color: $grey-light;
}
}
.input[readonly],
.textarea[readonly] {
box-shadow: none;
}
// textarea specific css
.textarea {
min-width: 100%;
padding-bottom: 0.625em;
padding-top: 0.625em;
}
.textarea:not([rows]) {
max-height: 600px;
min-height: 120px;
}
// custom input
.input-hint {
padding: 0 $size-9;
font-size: $size-8;
color: $grey;
}

26
ui/app/styles/core/label.scss Normal file
View File

@ -0,0 +1,26 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the style for .is-label
.is-label {
color: $grey-darkest;
display: inline-block;
font-size: 14px;
font-weight: $font-weight-bold;
&:not(:last-child) {
margin-bottom: 0.25rem;
}
&::before,
&::after {
transform: translateY(0.2em);
}
&::before {
border-color: $grey-light;
}
}

35
ui/app/styles/core/layout.scss
View File

@ -1,35 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.ember-application > .ember-view {
display: flex;
flex-direction: column;
}
.page-container {
min-height: calc(100vh - #{$header-height});
display: flex;
flex-direction: column;
margin-top: $header-height;
justify-content: flex-end;
}
.section {
display: flex;
flex-grow: 1;
flex-direction: column;
padding-top: 0;
padding-bottom: 0;
> .container {
display: flex;
flex-grow: 1;
flex-direction: column;
width: 100%;
> .columns {
flex-grow: 1;
}
}
}

77
ui/app/styles/core/level.scss
View File

@ -3,10 +3,55 @@
* SPDX-License-Identifier: MPL-2.0
*/
.level {
align-items: center;
justify-content: space-between;
}
.level code {
border-radius: $radius;
}
.level:not(:last-child) {
@include vault-block;
}
.level-left,
.level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
.level-right {
align-items: center;
justify-content: flex-end;
}
.level-left {
align-items: center;
justify-content: flex-start;
}
.level.is-mobile,
.level.is-mobile .level-left,
.level.is-mobile .level-right {
display: flex;
}
.level.is-mobile .level-left + .level-right {
margin-top: 0;
}
.level.is-mobile .level-item:not(:last-child) {
margin-bottom: 0;
margin-right: $size-9;
}
.level.is-mobile .level-item:not(.is-narrow) {
flex-grow: 1;
}
.level.has-padded-items {
.level-item {
flex: 0 1 auto;
@ -18,3 +63,35 @@
flex-basis: 25%;
}
}
.level-item {
align-items: center;
display: flex;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
}
// responsive css
@media screen and (min-width: 769px), print {
.level {
display: flex;
}
.level > .level-item:not(.is-narrow) {
flex-grow: 1;
}
.level-left {
display: flex;
}
.level-right {
display: flex;
}
}
@media screen and (max-width: 768px) {
.level-item:not(:last-child) {
margin-bottom: $size-9;
}
}

27
ui/app/styles/core/link.scss Normal file
View File

@ -0,0 +1,27 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.link {
background: transparent;
border: 0;
color: $blue;
cursor: pointer;
display: inline;
font: inherit;
line-height: normal;
margin: 0;
padding: 0;
font-weight: $font-weight-semibold;
user-select: text;
&[disabled] {
opacity: 0.5;
cursor: default;
}
}
// NICE TO HAVE: replace all instances with helper "is-no-underline"
.link-plain {
text-decoration: none;
}

9
ui/app/styles/core/lists.scss
View File

@ -3,12 +3,14 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines styles for list type items, like: .sep, .list-header and ul.bullet.
.sep {
display: inline-flex;
align-items: center;
&:before {
font-size: $size-5;
color: $white-ter;
color: $blue-500;
content: '|';
position: relative;
}
@ -21,3 +23,8 @@
font-weight: $font-weight-semibold;
text-transform: uppercase;
}
ul.bullet {
list-style: disc;
padding-left: $spacing-m;
}

22
ui/app/styles/core/menu.scss
View File

@ -3,6 +3,25 @@
* SPDX-License-Identifier: MPL-2.0
*/
.menu {
font-size: $size-6;
}
.menu a {
display: block;
padding: $size-10 $size-9;
text-decoration: none;
}
.menu-label {
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu-list {
line-height: 1.25;
}
.column .menu-list a {
border-radius: 0;
border-right: 0 solid transparent;
@ -10,7 +29,6 @@
&:hover,
&.is-active {
color: $menu-item-active-color;
background-color: $menu-item-active-background-color;
color: $blue;
}
}

94
ui/app/styles/core/message.scss
View File

@ -10,21 +10,15 @@
padding: $spacing-s $spacing-m $spacing-m $spacing-s;
position: relative;
&:not(:last-child) {
margin-bottom: $size-4;
}
.message-icon {
color: $blue;
margin-right: $spacing-xs;
}
.close-button {
background: transparent;
border: 0;
color: $grey;
cursor: pointer;
position: absolute;
right: $spacing-s;
top: $spacing-m;
}
.message-title {
color: $blue-500;
font-size: 16px;
@ -36,19 +30,31 @@
}
}
.close-button {
background: transparent;
border: 0;
color: $grey;
cursor: pointer;
position: absolute;
right: $spacing-s;
top: $spacing-m;
}
.close-button + .message-title {
padding-right: $spacing-m;
}
.message-body {
border: 0;
padding: 1em 1.25em;
margin-top: $spacing-xxs;
}
.message-body.pre {
white-space: pre-wrap;
}
p {
// was p selector only, but padding was getting overridden by the message-body above
p.message-body {
font-size: $size-8;
border: 0;
padding: 0;
@ -69,10 +75,32 @@
}
}
// message types, see message-types.js
&.is-danger {
background: $red-010;
border: 1px solid $red-050;
.message-body {
color: $red-700;
}
.message-icon {
color: $red-500;
}
.message-title {
color: $red-700;
}
}
&.is-highlight {
background: $yellow-010;
border: 1px solid $yellow-100;
.message-body {
color: $ui-gray-900;
}
.message-icon {
color: $yellow-500;
}
@ -82,10 +110,31 @@
}
}
&.is-info {
background-color: $blue-010;
.message-body {
color: $blue-700;
}
.message-header {
background-color: $blue-500;
color: $white;
}
.message-title {
color: $blue-700;
}
}
&.is-success {
background: $green-010;
border: 1px solid $green-100;
.message-body {
color: $green-900;
}
.message-icon {
color: $green-500;
}
@ -94,19 +143,6 @@
color: $green-700;
}
}
&.is-danger {
background: $red-010;
border: 1px solid $red-050;
.message-icon {
color: $red-500;
}
.message-title {
color: $red-700;
}
}
}
.message-inline {
@ -123,11 +159,11 @@
}
&.has-top {
margin-top: 1rem;
margin-top: $size-6;
}
&.size-small {
font-size: $size-7;
font-size: $size-8;
}
&.padding-top {
@ -143,10 +179,6 @@
}
}
.has-text-highlight {
color: $yellow-500;
}
.message.message-marginless {
margin: 0;
}

29
ui/app/styles/core/navbar.scss
View File

@ -23,7 +23,7 @@
&.connected {
background-color: $ui-gray-800;
color: #c2c5cb;
color: $ui-gray-300;
a {
color: #c2c5cb;
@ -42,25 +42,29 @@
.navbar-actions {
background-color: $black;
display: flex;
height: $header-height;
height: 4rem;
justify-content: flex-start;
padding: $spacing-xs $spacing-s $spacing-xs 0;
}
.navbar-brand {
background: $vault-gray;
align-items: stretch;
background: $grey;
border-radius: 0 $radius-large $radius-large 0;
display: flex;
margin-right: $spacing-s;
min-height: auto;
position: relative;
z-index: 203;
.navbar-item {
align-items: center;
background-color: transparent;
display: flex;
padding: $spacing-xs $spacing-l;
&:hover,
.is-active {
&.is-active {
background-color: transparent;
}
}
@ -68,7 +72,7 @@
.navbar-drawer-toggle {
font-size: $size-6;
color: $vault-gray;
color: $grey;
cursor: pointer;
font-weight: $font-weight-semibold;
margin-left: -$spacing-s;
@ -133,7 +137,7 @@
}
&.is-active {
background-color: $vault-gray-700;
background-color: $ui-gray-800;
color: $white;
}
@ -256,6 +260,7 @@
.nav-user-button .icon {
position: relative;
}
.nav-user-button.may-expire .icon:first-of-type::after {
content: '';
position: absolute;
@ -266,6 +271,7 @@
border-radius: 50%;
background: $yellow;
}
.navbar-drawer-scroll {
overflow: auto;
height: 100%;
@ -278,7 +284,7 @@
left: 0;
position: absolute;
right: 0;
top: $header-height;
top: 4rem;
z-index: 1;
@include from($mobile) {
@ -292,3 +298,12 @@
position: relative;
}
}
// responsive css
@media screen and (min-width: 1024px) {
.navbar-item,
.navbar-link {
align-items: center;
display: flex;
}
}

62
ui/app/styles/core/notification.scss
View File

@ -1,62 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.notification {
padding: $spacing-m $spacing-m $spacing-m $spacing-s;
.title {
font-weight: $weight-bold;
}
&.has-border {
border: 1px solid currentColor;
border-left-width: 10px;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
$color-lightning: max((100% - lightness($color)) - 2%, 0%);
$color-luminance: colorLuminance($color);
$darken-percentage: $color-luminance * 70%;
$desaturate-percentage: $color-luminance * 30%;
&.is-#{$name} {
background-color: lighten($color, $color-lightning);
border-color: $color;
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
.delete {
color: $color;
}
.title {
color: $color-invert;
margin-bottom: 0.5rem;
}
}
}
&.is-warning {
.title,
.delete {
color: $yellow-darkest;
}
border-color: $orange;
color: $yellow-darkest;
}
& > .delete {
&:before,
&:after {
content: none;
}
position: absolute;
background-color: transparent;
border: none;
color: currentColor;
right: 0.5rem;
top: 0.5rem;
height: 1.5rem;
width: 1.5rem;
}
}

61
ui/app/styles/core/progress.scss
View File

@ -4,12 +4,18 @@
*/
.progress {
-webkit-appearance: none;
-moz-appearance: none;
background: $progress-bar-background-color;
box-shadow: inset 0 0 0 1px $ui-gray-200;
appearance: none;
background: $ui-gray-050;
border: none;
box-shadow: inset $box-link-shadow;
border-radius: $radius;
display: block;
height: $size-6;
overflow: hidden;
padding: 0;
margin-bottom: 0;
width: 100%;
&.is-small {
height: 0.5rem;
}
@ -17,23 +23,64 @@
width: 30px;
}
&.is-medium {
height: $size-5;
width: 120px;
}
}
// style the container in chrome
.progress[value]::-webkit-progress-bar {
box-shadow: inset 0 0 0 1px $ui-gray-200;
background-color: #ededed;
box-shadow: inset $box-link-shadow;
}
// style the bar in chrome
.progress[value]::-webkit-progress-value {
background-color: #4a4a4a;
border-radius: $radius;
transition: width 1s ease-out;
transition: width 1s $easing;
}
// style the bar in firefox
.progress[value]::-moz-progress-bar {
border-radius: $radius;
transition: width 1s ease-out;
transition: width 1s $easing;
}
.progress::-ms-fill {
background-color: #4a4a4a;
border: none;
}
// is-success and is-info are the two types of progress bars we have
.progress.is-info::-webkit-progress-value {
background-color: #3e8ed0;
}
.progress.is-info::-moz-progress-bar {
background-color: #3e8ed0;
}
.progress.is-info::-ms-fill {
background-color: #3e8ed0;
}
.progress.is-info:indeterminate {
background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
}
.progress.is-success::-webkit-progress-value {
background-color: $green-500;
}
.progress.is-success::-moz-progress-bar {
background-color: $green-500;
}
.progress.is-success::-ms-fill {
background-color: $green-500;
}
.progress.is-success:indeterminate {
background-image: linear-gradient(to right, $green-500 30%, #ededed 30%);
}

80
ui/app/styles/core/select.scss
View File

@ -3,6 +3,82 @@
* SPDX-License-Identifier: MPL-2.0
*/
.select select {
text-rendering: auto !important;
select {
width: 100%;
appearance: none;
}
.select select {
background-color: $ui-gray-050;
box-shadow: 0 3px 1px rgba($black, 0.12);
border: 1px solid $grey-light;
border-radius: $radius;
color: $grey-dark;
cursor: pointer;
display: block;
font-size: 1em;
height: 2.5rem;
max-width: 100%;
outline: none;
padding-bottom: calc(0.375em - 1px);
padding-left: $size-8;
padding-right: $size-8;
padding-top: calc(0.375em - 1px);
text-rendering: auto !important;
@include until($desktop) {
font-size: 1rem;
}
&::placeholder {
opacity: 0.5;
}
&:active,
&:focus,
&:focus-visible,
&.is-active {
border-color: $blue-500;
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
}
}
.select select:not([multiple]) {
padding-right: $size-2;
}
.select select[disabled] {
border-color: $grey-light;
background-color: $ui-gray-100;
color: $ui-gray-500;
cursor: not-allowed;
user-select: none;
&:hover {
border-color: $grey-light;
}
}
.select {
display: inline-block;
height: 2.5rem;
max-width: 100%;
position: relative;
vertical-align: top;
}
.select::after {
content: svg-uri(
'<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="currentColor"/></svg>'
);
border: 0;
display: block;
height: 24px;
margin: 0;
pointer-events: none;
position: absolute;
right: $spacing-xs;
top: 50%;
transform: translateY(-50%);
width: 24px;
z-index: 4;
}

162
ui/app/styles/core/switch.scss
View File

@ -3,38 +3,150 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the style for switch, with the nested classes: is-small, is-rounded, is-success
.switch[type='checkbox'] {
&.is-small {
+ label {
font-size: $size-8;
font-weight: bold;
padding-left: $size-8 * 2.5;
margin: 0 0.25rem;
&::before {
top: $size-8 / 5;
height: $size-8;
width: $size-8 * 2;
}
&::after {
width: $size-8 * 0.8;
height: $size-8 * 0.8;
transform: translateX(0.15rem);
left: 0;
top: $size-8/ 4;
}
}
&:checked + label::after {
display: inline-block;
outline: 0;
opacity: 0;
position: absolute;
user-select: none;
+ label {
align-items: center;
cursor: pointer;
display: inline-flex;
font-size: $size-6;
justify-content: flex-start;
line-height: 1.5;
padding-left: 3.5rem;
position: relative;
&::before {
position: absolute;
display: block;
top: calc(50% - 1.5rem * 0.5);
left: 0;
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
width: $size-1;
height: $size-4;
border: 0.1rem solid transparent;
border-radius: $radius-large;
background: $ui-gray-300;
content: '';
}
&::after {
background: $white;
border-radius: $radius-large;
content: '';
display: block;
height: $size-6;
left: $size-11;
position: absolute;
top: calc(50% - 1rem * 0.5);
transform: translate3d(0, 0, 0);
transition: all 0.25s ease-out;
width: $size-6;
}
&:checked::after {
left: 1.625rem;
}
}
}
.switch[type='checkbox'].is-small + label::after {
will-change: left;
// is-rounded
.switch[type='checkbox'].is-rounded {
+ label {
&::before {
border-radius: 16px;
}
&::after {
border-radius: 50%;
}
}
&.is-small {
+ label {
&::before {
border-radius: 16px;
}
&::after {
border-radius: 50%;
}
}
}
}
.switch[type='checkbox']:focus + label {
box-shadow: 0 0 1px $blue;
// is-small
.switch[type='checkbox'].is-small {
+ label {
cursor: pointer;
display: inline-block;
font-size: $size-8;
font-weight: bold;
height: 18px;
padding-left: $size-8 * 2.5;
position: relative;
margin: 0 $size-11;
&::before {
border: 0.1rem solid transparent;
border-radius: $radius-large;
background: $ui-gray-300;
display: block;
content: '';
height: $size-8;
position: absolute;
top: $size-8/ 5;
width: $size-8 * 2;
}
&::after {
background: $white;
border-radius: $radius-large;
content: '';
display: block;
height: $size-8 * 0.8;
left: 0;
position: absolute;
top: $size-8/ 4;
transform: translateX(0.15rem);
transition: all 0.25s ease-out;
width: $size-8 * 0.8;
will-change: left;
&:checked {
left: $size-5;
}
}
}
&:checked + label::after {
left: 0;
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
}
}
// is-success
.switch[type='checkbox'].is-success:checked + label::before {
background: $blue;
}
// focus
.switch[type='checkbox']:focus + label {
box-shadow: 0 0 1px $blue;
}
// disabled
.switch[type='checkbox'][disabled] {
cursor: not-allowed;
}
.switch[type='checkbox'][disabled] + label {
opacity: 0.5;
}
.switch[type='checkbox'][disabled] + label:hover {
cursor: not-allowed;
}
// misc.
.field-body .switch[type='checkbox'] + label {
margin-top: 0.375em;
}

44
ui/app/styles/core/tables.scss
View File

@ -1,44 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.table {
thead,
.thead {
box-shadow: 0 1px 0 0 $grey-light, 0 -1px 0 0 $grey-light;
th,
.th {
font-size: $size-8;
color: $grey;
font-weight: $font-weight-semibold;
padding: 1rem 1.5rem 0;
border-width: 0 0 1px 0;
border-color: $grey-light;
}
}
.thead {
box-shadow: 0 -1px 0 0 $grey-light;
}
td,
.td {
font-size: $size-6;
color: $black;
padding: 1rem 1.5rem;
border-width: 0 0 1px 0;
border-color: $grey-light;
border-style: solid;
}
tr:hover {
background: rgba($grey-lighter, 0.4);
}
}
.table tbody tr:last-child td,
.table tbody tr:last-child th {
border-bottom-width: inherit;
}
.table.has-expanded-borders {
border-collapse: inherit;
}

68
ui/app/styles/core/tag.scss Normal file
View File

@ -0,0 +1,68 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the style for .tag
.tag:not(body) {
align-items: center;
background-color: $ui-gray-100;
border-radius: $radius;
color: $grey;
display: inline-flex;
font-size: $size-8;
font-weight: $font-weight-normal;
height: auto;
justify-content: center;
line-height: 1.5;
margin-right: $size-10;
padding: 0 $size-10;
white-space: nowrap;
vertical-align: middle;
code {
color: $grey;
}
.icon {
height: 12px;
margin-left: -0.25em;
margin-right: 0.25em;
min-width: 0;
width: 12px;
}
&.has-extra-padding {
padding: $size-11 $spacing-xxs;
}
}
.tag {
&.is-bold {
font-weight: bold;
}
&.is-light {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
}
&.is-outlined {
background-color: transparent;
border: 1px solid $grey-light;
}
&.is-small {
height: auto;
}
&.is-medium {
font-size: $size-6;
}
&.is-success {
background-color: $green-500;
color: $white;
}
}

43
ui/app/styles/core/tags.scss
View File

@ -1,43 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.tag:not(body) {
background-color: $ui-gray-100;
border-radius: 2px;
color: $grey;
height: auto;
padding: 0 $size-10;
margin-right: 0.5rem;
font-weight: normal;
code {
color: $grey;
}
.icon {
height: 12px;
margin-left: -0.25em;
margin-right: 0.25em;
min-width: 0;
width: 12px;
}
&.has-extra-padding {
padding: $size-11 $spacing-xxs;
}
}
.tag.is-outlined {
background-color: transparent;
border: 1px solid $grey-light;
}
.tag.is-bold {
font-weight: bold;
}
.tag.is-small {
height: auto;
}

36
ui/app/styles/core/title.scss
View File

@ -3,25 +3,49 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file styles the following styles: title, subtitle, form-section.title and title sizes
.title:not(:last-child),
.subtitle:not(:last-child) {
display: block;
margin-bottom: 1rem;
&.has-bottom-margin-xs {
margin-bottom: $spacing-xs;
}
}
.title {
color: hsl(0, 0%, 21%);
font-size: 2rem;
font-weight: $font-weight-bold;
line-height: 1.125;
word-break: break-word;
> a {
color: $black;
text-decoration: none;
}
.has-font-weight-normal {
font-weight: $font-weight-normal;
// title sizes
&.is-2 {
font-size: $size-2;
}
&.is-3 {
font-size: $size-3;
}
&.is-4 {
font-size: $size-4;
}
&.is-5 {
font-size: $size-5;
}
&.is-6 {
font-size: $size-6;
}
&.is-7 {
font-size: $size-7;
}
}

7
ui/app/styles/core/toggle.scss
View File

@ -3,7 +3,8 @@
* SPDX-License-Identifier: MPL-2.0
*/
/* COPIED FROM BULMA/SWITCH */
/* COPIED FROM BULMA SWITCH */
.toggle[type='checkbox'] {
outline: 0;
user-select: none;
@ -54,8 +55,8 @@
height: 1rem;
transform: translate3d(0, 0, 0);
border-radius: 50%;
background: white;
transition: all 0.25s ease-out;
background: $white;
transition: all 0.25s $easing;
content: '';
}
.toggle[type='checkbox']:checked + label::before {

81
ui/app/styles/helper-classes/colors.scss Normal file
View File

@ -0,0 +1,81 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* This helper includes styles referencing background color, border color, and text color. */
// background colors
.has-background-white-bis {
background: $ui-gray-050;
}
.has-background-gray-100 {
background-color: $ui-gray-100;
}
.has-background-gray-200 {
background-color: $ui-gray-200;
}
// borders
.has-border-top-light {
border-radius: 0;
border-top: 1px solid $grey-light;
}
.has-border-bottom-light {
border-radius: 0;
border-bottom: 1px solid $grey-light;
}
.has-error-border,
select.has-error-border {
border: 1px solid $red-500;
}
// specifically for the SearchSelect dropdown.
.dropdown-has-error-border > div.ember-basic-dropdown-trigger {
border: 1px solid $red-500;
}
// text color
.has-text-grey-light {
color: $ui-gray-300 !important;
}
.has-text-grey-400 {
color: $ui-gray-400;
}
.has-text-grey {
color: $ui-gray-500 !important;
}
.has-text-grey-dark {
color: $ui-gray-700 !important;
}
.has-text-white {
color: $white !important;
}
.has-text-black {
color: $black !important;
}
.has-text-info {
color: $blue-500 !important;
}
.has-text-success {
color: $green-500 !important;
}
.has-text-highlight {
color: $yellow-500;
}
.has-text-danger {
color: $red-500 !important;
}

115
ui/app/styles/helper-classes/flexbox-and-grid.scss Normal file
View File

@ -0,0 +1,115 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* Helpers that define anything with the CSS flexbox or CSS grid. */
/* Flexbox helpers */
.is-flex {
display: flex !important;
}
.is-flex-column {
display: flex;
flex-direction: column;
}
.is-flex-row {
display: flex;
flex-direction: row;
}
// Alignment of the items
.is-flex-v-centered {
display: flex;
align-items: center;
align-self: center;
justify-content: center;
}
.is-flex-center {
display: flex;
align-items: center;
}
.is-flex-align-baseline {
display: flex;
align-items: baseline;
}
// Justify-content
.is-centered {
justify-content: center;
}
.is-flex-end {
display: flex !important;
justify-content: flex-end;
}
.is-flex-start {
display: flex !important;
justify-content: flex-start;
&.has-gap {
gap: $spacing-m;
}
}
.is-flex-between,
.is-grouped-split {
display: flex;
justify-content: space-between !important;
}
// Flex basis, grow, stretch and flow
.is-flex-full {
flex-basis: 100%;
}
.is-flex-1 {
flex-grow: 1;
&.basis-0 {
flex-basis: 0;
}
}
.is-no-flex-grow {
flex-grow: 0 !important;
}
.is-flex-wrap {
flex-flow: row wrap;
}
.is-flex-half {
flex: 50%;
}
/* Flex Responsive */
@media screen and (min-width: 769px), print {
.is-flex-v-centered-tablet {
display: flex;
align-items: center;
align-self: center;
justify-content: center;
}
}
/* CSS GRID */
.is-grid {
display: grid;
}
.is-grid-3-columns {
grid-template-columns: repeat(3, 1fr);
}
.is-medium-height {
height: 125px;
}
.is-grid-column-span-3 {
grid-column-end: span 3;
}

100
ui/app/styles/helper-classes/general.scss Normal file
View File

@ -0,0 +1,100 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* This helper includes styles relating to: box-shadow, border, transition, pointer, grouped css in one helper, and screen-reader only.*/
// box-shadow helpers
.has-only-top-shadow {
box-shadow: 0 -1px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
}
.has-bottom-shadow {
box-shadow: $box-shadow !important;
}
.is-shadowless {
box-shadow: none !important;
}
.is-sideless {
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
}
// this helper needs to go after is-sideless as they are often used together and is-bottomless needs to override is-sideless (no this is not ideal).
.is-bottomless {
box-shadow: 0 -1px 0 0 $grey-light;
}
// border helpers
.has-default-border {
border: 1px solid $grey !important;
}
.is-borderless {
border: none !important;
}
// pointer helpers
.has-no-pointer {
pointer-events: none;
}
.has-pointer {
cursor: pointer;
}
// other
.has-background-transition {
transition: background-color ease-out $speed;
}
.has-current-color-fill {
&,
& svg {
fill: currentColor;
}
}
// large grouped css blocks
.is-hint {
color: $grey;
font-size: $size-8;
padding: $size-8 0;
}
.is-optional {
color: $grey;
font-size: $size-8;
text-transform: lowercase;
}
.is-word-break {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.truncate-second-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
// screen reader only
.sr-only {
border: 0;
clip-path: inset(50%);
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
white-space: nowrap;
width: 1px;
}

90
ui/app/styles/helper-classes/layout.scss Normal file
View File

@ -0,0 +1,90 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* This helper includes styles relating to: display, width, height, float, visibility, position, alignment. */
// display
.is-block {
display: block !important;
}
.is-hidden {
display: none !important;
}
.is-inline {
display: inline !important;
}
.is-inline-block {
display: inline-block !important;
}
// position
.is-in-bottom-right {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 10;
}
.is-relative {
position: relative;
}
// visibility
.is-invisible {
visibility: hidden;
}
// width and height
.is-fullwidth {
width: 100%;
}
.is-auto-width {
width: auto;
}
.is-min-width-0 {
min-width: 0;
}
.is-medium-height {
height: 125px;
}
// float
.is-pulled-left {
float: left !important;
}
.is-pulled-right {
float: right !important;
}
// alignment
.is-v-centered {
vertical-align: middle;
}
// responsive css
@media screen and (min-width: 769px), print {
.is-hidden-tablet {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none !important;
}
}
@media screen and (max-width: 1215px) {
.is-widescreen:not(.is-max-desktop) {
max-width: 1152px;
}
}

165
ui/app/styles/helper-classes/spacing.scss Normal file
View File

@ -0,0 +1,165 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* Helpers that define anything with the margin or padding. */
/* Notes
- these helpers are generally defined in px but some (if they use $size-xx) are using rems.
*/
.is-paddingless {
padding: 0 !important;
}
.has-short-padding {
padding: $size-11 $size-5;
}
.has-tall-padding {
padding: $size-2;
}
.has-side-padding-s {
padding-left: $spacing-s;
padding-right: $spacing-s;
}
.has-padding-m {
padding: $spacing-m;
}
.has-bottom-padding-s {
padding-bottom: $spacing-s;
}
.has-top-padding-s {
padding-top: $spacing-s;
}
.has-top-padding-m {
padding-top: $spacing-m;
}
.has-top-padding-l {
padding-top: $spacing-l;
}
.has-left-padding-xs {
padding-left: $spacing-xs;
}
.has-left-padding-s {
padding-left: $spacing-s;
}
.has-left-padding-l {
padding-left: $spacing-l;
}
.has-top-padding-xxl {
padding-top: $spacing-xxl;
}
// All Margin helpers
.is-marginless {
margin: 0 !important;
}
.has-top-bottom-margin {
margin: $size-5 0rem;
}
.has-top-bottom-margin-xxs {
margin: $spacing-xxs 0;
}
.has-top-bottom-margin-negative-m {
margin-top: -$spacing-m;
margin-bottom: -$spacing-m;
}
.has-bottom-margin-xs {
margin-bottom: $spacing-xs !important;
}
.has-bottom-margin-s {
margin-bottom: $spacing-s;
}
.has-bottom-margin-m {
margin-bottom: $spacing-m;
}
.has-bottom-margin-l {
margin-bottom: $spacing-l;
}
.has-bottom-margin-xl {
margin-bottom: $spacing-xl;
}
.has-bottom-margin-xxl {
margin-bottom: $spacing-xxl;
}
.has-top-margin-s {
margin-top: $spacing-s;
}
.has-top-margin-xs {
margin-top: $spacing-xs;
}
.has-top-margin-m {
margin-top: $spacing-m;
}
.has-top-margin-l {
margin-top: $spacing-l;
}
.has-top-margin-xl {
margin-top: $spacing-xl;
}
.has-top-margin-xxl {
margin-top: $spacing-xxl;
}
.has-top-margin-negative-s {
margin-top: (-1 * $spacing-s);
}
.has-left-margin-xxs {
margin-left: $spacing-xxs;
}
.has-left-margin-xs {
margin-left: $spacing-xs;
}
.has-left-margin-s {
margin-left: $spacing-s;
}
.has-left-margin-m {
margin-left: $spacing-m;
}
.has-left-margin-l {
margin-left: $spacing-l;
}
.has-left-margin-xl {
margin-left: $spacing-xl;
}
.has-right-margin-m {
margin-right: $spacing-m;
}
.has-right-margin-l {
margin-right: $spacing-l;
}

102
ui/app/styles/helper-classes/typography.scss Normal file
View File

@ -0,0 +1,102 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration. */
// font size helpers
.is-size-4 {
font-size: $size-4 !important;
}
.is-size-5 {
font-size: $size-5 !important;
}
.is-size-6 {
font-size: $size-6 !important;
}
.is-size-7 {
font-size: $size-7 !important;
}
.is-size-8 {
font-size: $size-8 !important;
}
.is-size-9 {
font-size: $size-9 !important;
}
// Font weight
.has-font-weight-normal {
font-weight: $font-weight-normal;
}
.has-text-weight-semibold {
font-weight: $font-weight-semibold !important;
}
.has-text-weight-bold {
font-weight: $font-weight-bold !important;
}
// Font family
.is-font-mono {
font-family: $family-monospace;
}
.masked-font {
font-family: obscure, text-security-square;
letter-spacing: 2px;
}
// Text decoration
.is-underline {
text-decoration: underline;
}
.is-no-underline {
text-decoration: none;
}
// Text transformations
.is-lowercase {
text-transform: lowercase !important;
}
.is-uppercase {
text-transform: uppercase !important;
}
// Text alignment
.has-text-right {
text-align: right !important;
}
.has-text-centered {
text-align: center !important;
}
// Text color or styling
.is-help {
font-size: $size-8;
margin-top: $size-11;
}
.help {
display: block;
font-size: 0.85714rem;
margin-top: $size-11;
}
.sub-text {
color: $grey;
margin-bottom: $size-11;
font-size: $size-8;
strong {
color: inherit;
}
}

24
ui/app/styles/utils/_box-shadow_variables.scss Normal file
View File

@ -0,0 +1,24 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// TODO: lots of inconsistent variation on box-shadow usage. Fix.
// box
$box-shadow: 0 0 0 1px rgba($black, 0.1);
$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.1), 0 6px 8px -2px rgba($black, 0.05);
$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
// box-link
$box-link-shadow: 0 0 0 1px $ui-gray-200;
$box-link-hover-shadow: 0 0 0 1px $ui-gray-300;
// border
$base-border: 1px solid $ui-gray-300;
$light-border: 1px solid $ui-gray-200;
// button specific
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);

101
ui/app/styles/utils/_bulma_variables.scss
View File

@ -1,101 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// Color overrides
$light: $grey-lightest;
$primary: $grey-dark;
$link: $blue;
$text: $grey-darkest;
$info: $blue;
$success: $green;
$warning: $yellow;
$danger: $red;
$black-bis: $ui-gray-900;
$black-ter: $ui-gray-700;
$grey-darker: $ui-gray-900;
$grey-lighter: $ui-gray-050;
$white-ter: rgba($white, 0.5);
$white-bis: $ui-gray-050;
$code: $grey-dark;
$code-background: transparent;
$border: $grey-light;
$hr-margin: 1rem 0;
$mobile: 769px;
$header-height: 4rem;
//typography
$family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
$family-primary: $family-sans;
$body-size: 14px;
$size-3: (24/14) + 0rem; // ~1.714rem ~27px
$size-4: 1.5rem; // 24px
$size-5: 1.25rem; // 20px
$size-7: (13/14) + 0rem; // ~.929rem ~15px
$size-8: (12/14) + 0rem; // ~.857rem ~13.7px
$size-9: 0.75rem; // 12px
$size-10: 0.5rem; // 8px
$size-11: 0.25rem; // 4px
$console-spacing: 1.5rem; // 24px
$size-small: $size-8;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
//input
$input-background-color: $white;
$input-focus-background-color: $white;
$input-border-color: $grey;
$radius: 2px;
$radius-large: 4px;
//box
$box-radius: 0;
$box-shadow: 0 0 0 1px rgba($black, 0.1);
$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.1), 0 6px 8px -2px rgba($black, 0.05);
$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
$breadcrumb-item-color: $blue;
$breadcrumb-item-separator-color: rgba($blue, 0.5);
$breadcrumb-item-active-color: $black;
$navbar-background-color: transparent;
$menu-item-hover-background-color: $blue;
$menu-item-hover-color: $white;
$progress-bar-background-color: $ui-gray-050;
$base-border: 1px solid $ui-gray-300;
$light-border: 1px solid $ui-gray-200;
//menu
$menu-item-hover-color: $text;
$menu-item-hover-background-color: $grey-lightest;
$menu-item-active-color: $link;
$menu-item-active-background-color: transparent;
$box-link-shadow: 0 0 0 1px $ui-gray-200;
$box-link-hover-shadow: 0 0 0 1px $grey-light;
// Nav
$drawer-width: 300px;
// animations
$speed: 150ms;
$speed-slow: $speed * 2;
// Wizard
$wizard-progress-bar-height: 6px;
$wizard-progress-check-size: 16px;
// Div height
$medium-height: 125px;

23
ui/app/styles/utils/_colors.scss → ui/app/styles/utils/_color_variables.scss
View File

@ -3,23 +3,6 @@
* SPDX-License-Identifier: MPL-2.0
*/
// Colors that will eventually be in Structure package
// Vault Gray
$vault-gray-010: #fdfdfe;
$vault-gray-050: #f7fafc;
$vault-gray-100: #ebeef5;
$vault-gray-200: #d3dbe6;
$vault-gray-300: #b4bdcc;
$vault-gray-400: #949fb0;
$vault-gray-500: #7c8797;
$vault-gray-600: #5a6370;
$vault-gray-700: #3c434d;
$vault-gray-800: #1d2126;
$vault-gray-900: #060708;
$vault-gray: $vault-gray-500;
$vault-gray-dark: $vault-gray-700;
// UI Gray
$ui-gray-010: #fbfbfc;
$ui-gray-050: #f7f8fa;
@ -38,6 +21,12 @@ $grey: $ui-gray-500;
$grey-dark: $ui-gray-700;
$grey-darkest: $ui-gray-900;
// Black
$black: hsl(0, 0%, 4%); // in hex: #0a0a0a
// White
$white: hsl(0, 0%, 100%);
// Blue
$blue-010: #fbfcff;
$blue-050: #f0f5ff;

16
ui/app/styles/utils/_font_variables.scss Normal file
View File

@ -0,0 +1,16 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// Vars relating to font-family or font-weight.
$family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
/* Font weight */
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;

51
ui/app/styles/utils/_size_variables.scss Normal file
View File

@ -0,0 +1,51 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/* General sizing in rem values used largely for text sizing.*/
$size-1: 3rem; // 48px, same as $spacing-xxl
$size-2: 2.5rem; // 40px
$size-3: (24/14) + 0rem; // ~1.714rem ~27px
$size-4: 1.5rem; // 24px same as $spacing-l
$size-5: 1.25rem; // 20px
$size-6: 1rem; // 16px same as $spacing-m
$size-7: (13/14) + 0rem; // ~.929rem ~15px
$size-8: (12/14) + 0rem; // ~.857rem ~13.7px
$size-9: 0.75rem; // 12px same as $spacing-s
$size-10: 0.5rem; // 8px same as $spacing-xs
$size-11: 0.25rem; // 4px same as spacing-xxs
/* Spacing vars in px */
$spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-s: 12px;
$spacing-m: 16px;
$spacing-l: 24px;
$spacing-xl: 36px;
$spacing-xxl: 48px;
/* Border radius */
$radius: 2px;
$radius-large: 4px;
/* Responsiveness */
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$mobile: 769px;
// 960px container + 4rem
$desktop: 960px + (2 * 32px);
// 1344px container + 4rem
$fullhd: 1344px + (2 * 32px);
/* Animations and transitions */
$speed: 150ms;
$speed-slow: $speed * 2;
$easing: ease-out;
/* Nav */
$drawer-width: 300px;
// Wizard
// Not being used: https://github.com/hashicorp/vault/pull/19220
// $wizard-progress-bar-height: 6px;
// $wizard-progress-check-size: 16px;

14
ui/app/styles/utils/_spacing.scss
View File

@ -1,14 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
// Spacing that will eventually be in Structure package
$spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-s: 12px;
$spacing-m: 16px;
$spacing-l: 24px;
$spacing-xl: 36px;
$spacing-xxl: 48px;

14
ui/app/styles/utils/mixins.scss
View File

@ -3,6 +3,8 @@
* SPDX-License-Identifier: MPL-2.0
*/
// This file defines the following mixins: css-arrow, css-top-arrow, css-bottom-arrow, from, until, and vault-block
@mixin css-arrow(
$vertical-direction,
$size,
@ -68,6 +70,18 @@
@include css-arrow('bottom', $size, $color, $border-width, $border-color, $left, $left-offset);
}
@mixin from($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
@mixin until($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
@mixin vault-block {
&:not(:last-child) {
margin-bottom: (5/14) + 0rem;

2
ui/app/templates/components/console/ui-panel.hbs
View File

@ -2,7 +2,7 @@
<Icon @name="x" aria-label="Close console" />
</button>
<div class="console-ui-panel-content">
<div class="content">
<div class="content has-bottom-margin-l">
<p class="has-text-grey is-font-mono">
The Vault Browser CLI provides an easy way to execute the most common CLI commands, such as write, read, delete, and
list.

2
ui/app/templates/components/file-to-array-buffer.hbs
View File

@ -5,7 +5,7 @@
{{this.label}}
{{/if}}
</label>
<div class="file has-name is-fullwidth">
<div class="file is-fullwidth">
<div class="file-label" aria-label="Choose a file">
<input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
<label for="file-input" class="file-cta button">

8
ui/app/templates/components/mfa/mfa-setup-step-two.hbs
View File

@ -38,7 +38,13 @@
</div>
{{/if}}
<div class="is-flex-start has-gap has-top-margin-l">
<button id="restart" type="button" class="button has-text-danger" {{on "click" this.restartSetup}} data-test-restart>
<button
id="restart"
type="button"
class="button is-danger-outlined"
{{on "click" this.restartSetup}}
data-test-restart
>
Restart setup
</button>
<button id="cancel" type="button" {{on "click" this.redirectPreviousPage}} class="button is-primary" data-test-done>

2
ui/app/templates/components/secret-create-or-update.hbs
View File

@ -29,7 +29,7 @@
/>
{{/if}}
{{#if @modelForData.isFolder}}
<p class="help is-danger">
<p class="help has-text-danger">
The secret path may not end in
<code>/</code>
</p>

2
ui/app/templates/components/secret-delete-menu.hbs
View File

@ -119,7 +119,7 @@
<footer class="modal-card-foot modal-card-foot-outlined">
<button
type="button"
class="button has-text-danger"
class="button is-danger-outlined"
{{on "click" (fn this.handleDelete this.deleteType (action (mut this.showDeleteModal) false))}}
disabled={{if this.deleteType false true}}
data-test-modal-delete

2
ui/app/templates/components/secret-edit-metadata.hbs
View File

@ -18,7 +18,7 @@
@modelValidations={{this.modelValidations}}
@mode={{@mode}}
/>
<label class={{if (eq @mode "create") "title has-padding-top is-5" "title has-padding-top is-4"}}>
<label class="title has-top-padding-m is-{{if (eq @mode 'create') '5' '4'}}">
Additional options
</label>
{{/if}}

2
ui/app/templates/components/secret-form-show.hbs
View File

@ -37,7 +37,7 @@
/>
</div>
{{else}}
<div class="table info-table-row-header">
<div class="info-table-row-header">
<div class="info-table-row thead">
<div class="th column is-one-quarter">
Key

2
ui/app/templates/components/selectable-card.hbs
View File

@ -14,7 +14,7 @@
<h3 class="title is-5">{{@cardTitle}}</h3>
<LinkTo
@route={{@actionTo}}
class="has-icon-right is-ghost is-no-underline has-text-semibold"
class="has-icon-right is-ghost is-no-underline has-text-weight-semibold"
@query={{hash itemType=@queryParam}}
data-test-action-text={{@actionText}}
>

2
ui/app/templates/components/tool-unwrap.hbs
View File

@ -8,7 +8,7 @@
{{#if @unwrap_data}}
<div class="box is-sideless is-fullwidth is-marginless">
<nav class="tabs">
<nav class="tabs has-bottom-margin-l">
<ul>
{{! template-lint-configure no-nested-interactive "warn" }}
<li

2
ui/app/templates/components/transit-key-action/datakey.hbs
View File

@ -1,7 +1,7 @@
<form onsubmit={{action @doSubmit (hash param=@param context=@context nonce=@nonce bits=@bits)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="datakey creation" />
<div class="content">
<div class="content has-bottom-margin-l">
<p>Generate a new high-entropy key and value using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<div class="field">

2
ui/app/templates/components/transit-key-action/decrypt.hbs
View File

@ -1,6 +1,6 @@
<form onsubmit={{action @doSubmit (hash ciphertext=@ciphertext context=@context nonce=@nonce)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<div class="content">
<div class="content has-bottom-margin-l">
<p>You can decrypt ciphertext using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<div class="field">

2
ui/app/templates/components/transit-key-action/encrypt.hbs
View File

@ -6,7 +6,7 @@
>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="encryption" />
<div class="content">
<div class="content has-bottom-margin-l">
<p>You can encrypt plaintext data using <code>{{@key.name}}</code> as the encryption key.</p>
</div>
<KeyVersionSelect @key={{@key}} @onVersionChange={{action (mut @key_version)}} @key_version={{@key_version}} />

2
ui/app/templates/components/transit-key-action/hmac.hbs
View File

@ -6,7 +6,7 @@
>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="HMAC creation" />
<div class="content">
<div class="content has-bottom-margin-l">
<p>
Generate the digest of given data using the specified hash algorithm and
<code>{{@key.name}}</code>

4
ui/app/templates/components/transit-key-action/rewrap.hbs
View File

@ -1,7 +1,7 @@
<form onsubmit={{action @doSubmit (hash ciphertext=@ciphertext context=@context nonce=@nonce key_version=@key_version)}}>
<div class="box is-sideless is-fullwidth is-marginless">
<NamespaceReminder @mode="perform" @noun="rewrap" />
<div class="content">
<div class="content has-bottom-margin-l">
<p>
You can rewrap the provided ciphertext using the latest version of
<code>{{@key.name}}</code>
@ -44,7 +44,7 @@
{{/if}}
</div>
<div class="field box is-fullwidth is-bottomless">
<div class="content">
<div class="content has-bottom-margin-l">
<p class="help">
Submitting this form will update the
<code>ciphertext</code>

2
ui/app/templates/components/transit-key-action/verify.hbs
View File

@ -14,7 +14,7 @@
}}
>
<div class="box is-sideless is-fullwidth is-marginless">
<div class="content">
<div class="content has-bottom-margin-l">
<p>Check whether the provided signature is valid for the given data.</p>
</div>
<div class="field">

2
ui/app/templates/vault/cluster/access/mfa/index.hbs
View File

@ -6,7 +6,7 @@
</p.levelLeft>
</PageHeader>
<div class="box is-fullwidth is-sideless is-flex-between is-box-shadowless is-marginless">
<div class="box is-fullwidth is-sideless is-flex-between is-shadowless is-marginless">
<p>
Configure and enforce multi-factor authentication (MFA) for users logging into Vault, for any
<br />

Some files were not shown because too many files have changed in this diff Show More