scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-30 18:17:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Increase base font size (#23994)

Browse Source 
* fix button padding

* rename spacing variables using numerical values

* fix toggle aligment

* remove unused toggle classes

* replace margin and padding with spacing vars

* increase base font size

* remove switch css, use toggle consistently

* remaining margin/padding size vars to spacing pixels

* add deprecated note, rever changes to size vars

* decrease console size

* remove function

* adjust card size for small selectable cards

* fix select to fit to content width

* fix toolbar-scroller height

* add changelog;

* fix checkbox styling
This commit is contained in:
claire bontempo
2023-11-13 13:29:39 -08:00
committed by GitHub
parent a21e58a7c9
commit 7f03393630
91 changed files with 333 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
changelog/23994.txt Normal file
View File

@@ -0,0 +1,3 @@
```release-note:improvement
ui: Increase base font-size from 14px to 16px and update use of rem vs pixels for size variables
```

2
ui/app/components/mount-backend/type-form.hbs
View File

@@ -11,7 +11,7 @@
{{#each (filter-by "category" category this.mountTypes) as |type|}} {{#each (filter-by "category" category this.mountTypes) as |type|}}
<SelectableCard <SelectableCard
id={{type.type}} id={{type.type}}
class="has-top-padding-m has-text-centered small-card" class="has-top-padding-l has-text-centered small-card"
@onClick={{fn @setMountType type.type}} @onClick={{fn @setMountType type.type}}
@disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}} @disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}}
data-test-mount-type={{type.type}} data-test-mount-type={{type.type}}

4
ui/app/components/policy-form.hbs
View File

@@ -46,12 +46,12 @@
id="fileUploadToggle" id="fileUploadToggle"
@type="checkbox" @type="checkbox"
name="fileUploadToggle" name="fileUploadToggle"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
@checked={{this.showFileUpload}} @checked={{this.showFileUpload}}
{{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}} {{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
data-test-policy-edit-toggle data-test-policy-edit-toggle
/> />
<label for="fileUploadToggle">Upload file</label> <label for="fileUploadToggle" class="has-text-weight-bold is-size-8">Upload file</label>
</div> </div>
{{else}} {{else}}
{{! EDITING - no file upload toggle}} {{! EDITING - no file upload toggle}}

2
ui/app/components/regex-validator.hbs
View File

@@ -32,8 +32,6 @@
<div> <div>
<Toggle <Toggle
@name={{concat @attr.name "-validation-toggle"}} @name={{concat @attr.name "-validation-toggle"}}
@status="success"
@size="small"
@checked={{this.showTestValue}} @checked={{this.showTestValue}}
@onChange={{this.toggleTestValue}} @onChange={{this.toggleTestValue}}
> >

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

@@ -8,16 +8,16 @@
grid-row: 1/1; grid-row: 1/1;
} }
@mixin stacked-content { @mixin stacked-content {
margin-bottom: $spacing-l; margin-bottom: $spacing-24;
} }
.action-block { .action-block {
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3); box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
display: grid; display: grid;
padding: $spacing-m $spacing-l; padding: $spacing-16 $spacing-24;
line-height: inherit; line-height: inherit;
grid-gap: $spacing-m; grid-gap: $spacing-16;
@include until($mobile) { @include until($mobile) {
@include stacked-grid(); @include stacked-grid();
@@ -52,7 +52,7 @@
.replication-actions-grid-layout { .replication-actions-grid-layout {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: $spacing-m 0; margin: $spacing-16 0;
@include until($mobile) { @include until($mobile) {
display: block; display: block;
} }
@@ -60,7 +60,7 @@
.replication-actions-grid-item { .replication-actions-grid-item {
flex-basis: 50%; flex-basis: 50%;
padding: $spacing-s; padding: $spacing-12;
display: flex; display: flex;
width: 100%; width: 100%;
} }

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

@@ -25,14 +25,14 @@
} }
.toolbar-namespace-picker { .toolbar-namespace-picker {
padding: 0 $spacing-s; padding: 0 $spacing-12;
.field { .field {
width: 100%; width: 100%;
} }
.field-label { .field-label {
margin-right: $spacing-s; margin-right: $spacing-12;
align-self: center; align-self: center;
} }

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

@@ -18,7 +18,7 @@ $dark-gray: #535f73;
} }
} }
.calendar-title { .calendar-title {
padding: $size-10 $size-8; padding: $spacing-10 $spacing-12;
} }
.select-year { .select-year {
@@ -88,7 +88,7 @@ $dark-gray: #535f73;
background-color: $ui-gray-700; background-color: $ui-gray-700;
color: $white; color: $white;
font-size: $size-8; font-size: $size-8;
padding: $size-9; padding: $spacing-10;
border-radius: $radius-large; border-radius: $radius-large;
width: 141px; width: 141px;
} }

4
ui/app/styles/components/cluster-banners.scss
View File

@@ -10,9 +10,9 @@
padding: 0 1.5rem; padding: 0 1.5rem;
> div { > div {
margin-top: $spacing-l; margin-top: $spacing-24;
&:last-of-type { &:last-of-type {
margin-bottom: $spacing-l; margin-bottom: $spacing-24;
} }
} }
} }

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

@@ -82,7 +82,7 @@
} }
* { * {
margin-left: $size-8; margin-left: $spacing-12;
} }
.confirm-action-text:not(.is-block) { .confirm-action-text:not(.is-block) {
@@ -90,7 +90,7 @@
@include until($mobile) { @include until($mobile) {
display: block; display: block;
margin-bottom: $size-8; margin-bottom: $spacing-12;
text-align: left; text-align: left;
} }
} }
@@ -119,21 +119,21 @@
p { p {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
margin-left: $spacing-l; margin-left: $spacing-24;
padding-left: $spacing-xxs; padding-left: $spacing-4;
padding-top: 0; padding-top: 0;
} }
.confirm-action-options { .confirm-action-options {
border-top: $light-border; border-top: $light-border;
display: flex; display: flex;
padding: $spacing-xxs; padding: $spacing-4;
.link { .link {
flex: 1; flex: 1;
text-align: center; text-align: center;
width: auto; width: auto;
padding: $spacing-xs; padding: $spacing-8;
} }
} }
} }

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

@@ -24,31 +24,31 @@ $console-close-height: 35px;
color: $white; color: $white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 14px; font-size: $size-7;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
justify-content: flex-end; justify-content: flex-end;
min-height: calc(100% - $console-close-height); // account for close button that is sticky positioned min-height: calc(100% - $console-close-height); // account for close button that is sticky positioned
padding: $size-8 $size-8 $size-5; padding: $spacing-12 $spacing-12 $spacing-18;
transition: justify-content $speed ease-in; transition: justify-content $speed ease-in;
pre, pre,
p { p {
background: none; background: none;
color: inherit; color: inherit;
font-size: 14px; font-size: $size-7;
min-height: 2rem; min-height: 2rem;
padding: 0; padding: 0;
&:not(.console-ui-command):not(.CodeMirror-line) { &:not(.console-ui-command):not(.CodeMirror-line) {
padding-left: $size-4; padding-left: $spacing-20;
} }
} }
.cm-s-hashi.CodeMirror { .cm-s-hashi.CodeMirror {
background-color: rgba($black, 0.5) !important; background-color: rgba($black, 0.5) !important;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
margin-left: $size-4; margin-left: $spacing-20;
padding: $size-8 $size-4; padding: $spacing-12 $spacing-20;
} }
} }
@@ -64,11 +64,11 @@ $console-close-height: 35px;
color: $white; color: $white;
flex: 1 1 auto; flex: 1 1 auto;
font-family: $family-monospace; font-family: $family-monospace;
font-size: 16px; font-size: $size-6;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
outline: none; outline: none;
padding: $size-10; padding: $spacing-8;
margin-right: $spacing-xs; margin-right: $spacing-8;
transition: background-color $speed; transition: background-color $speed;
} }
} }
@@ -80,7 +80,7 @@ $console-close-height: 35px;
.console-ui-output { .console-ui-output {
transition: background-color $speed ease-in-out; transition: background-color $speed ease-in-out;
will-change: background-color; will-change: background-color;
padding-right: $size-2; padding-right: $spacing-36;
position: relative; position: relative;
background-color: rgba(#000, 0); background-color: rgba(#000, 0);
&:hover { &:hover {
@@ -89,7 +89,7 @@ $console-close-height: 35px;
} }
.console-ui-alert { .console-ui-alert {
margin-left: calc(#{$size-4} - 0.33rem); margin-left: calc(#{$spacing-20} - 0.33rem);
position: relative; position: relative;
svg { svg {
@@ -132,13 +132,13 @@ $console-close-height: 35px;
.console-close-button { .console-close-button {
position: sticky; position: sticky;
top: $spacing-xs; top: $spacing-8;
height: $console-close-height; height: $console-close-height;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
z-index: 210; z-index: 210;
button { button {
margin-right: $spacing-xs; margin-right: $spacing-8;
} }
} }

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

@@ -17,7 +17,7 @@
} }
.control-group-header { .control-group-header {
box-shadow: 0 0 1px currentColor; box-shadow: 0 0 1px currentColor;
padding: $size-9 $size-6; padding: $spacing-10 $spacing-14;
background: $grey-lightest; background: $grey-lightest;
color: $grey-dark; color: $grey-dark;
position: relative; position: relative;
@@ -32,5 +32,5 @@
} }
.control-group .authorizations { .control-group .authorizations {
margin-top: $size-9; margin-top: $spacing-10;
} }

18
ui/app/styles/components/empty-state-component.scss
View File

@@ -9,7 +9,7 @@
background: $ui-gray-010; background: $ui-gray-010;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $spacing-xxl $spacing-s; padding: $spacing-48 $spacing-12;
box-shadow: 0 -2px 0 -1px $ui-gray-300; box-shadow: 0 -2px 0 -1px $ui-gray-300;
} }
@@ -19,7 +19,7 @@
background: transparent; background: transparent;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $spacing-xxl 0; padding: $spacing-48 0;
box-shadow: none; box-shadow: none;
} }
@@ -32,21 +32,21 @@
font-size: $size-4; font-size: $size-4;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
line-height: 1.2; line-height: 1.2;
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
.empty-state-subTitle { .empty-state-subTitle {
font-size: $size-7; font-size: $size-7;
margin-top: -10px; margin-top: -10px;
padding-bottom: $spacing-s; padding-bottom: $spacing-12;
} }
.empty-state-message.has-border-bottom-light { .empty-state-message.has-border-bottom-light {
padding-bottom: $spacing-s; padding-bottom: $spacing-12;
} }
.empty-state-actions { .empty-state-actions {
margin-top: $spacing-xs; margin-top: $spacing-8;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -60,13 +60,13 @@
} }
> * + * { > * + * {
margin-left: $spacing-s; margin-left: $spacing-12;
margin-right: $spacing-s; margin-right: $spacing-12;
} }
} }
.empty-state-icon > .hs-icon, .empty-state-icon > .hs-icon,
.empty-state-icon > .flight-icon { .empty-state-icon > .flight-icon {
float: left; float: left;
margin-right: $spacing-xs; margin-right: $spacing-8;
} }

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

@@ -5,7 +5,7 @@
.env-banner { .env-banner {
align-self: center; align-self: center;
border-radius: $size-1; border-radius: 3rem;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
$blue, $blue,
@@ -23,7 +23,7 @@
.notification { .notification {
background-color: transparent; background-color: transparent;
line-height: 1.66; line-height: 1.66;
padding: 0 $spacing-s; padding: 0 $spacing-12;
} }
} }

12
ui/app/styles/components/features-selection.scss
View File

@@ -11,15 +11,15 @@
.access-information { .access-information {
display: flex; display: flex;
padding: $size-8 0px; padding: $spacing-12 0px;
font-size: $size-8; font-size: $size-8;
} }
.feature-box { .feature-box {
box-shadow: $box-shadow; box-shadow: $box-shadow;
border-radius: $radius; border-radius: $radius;
padding: $size-8; padding: $spacing-12;
margin: $size-8 0; margin: $spacing-12 0;
&.is-active { &.is-active {
box-shadow: 0 0 0 1px $grey-light; box-shadow: 0 0 0 1px $grey-light;
@@ -33,7 +33,7 @@
.feature-box label { .feature-box label {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
padding-left: $size-10; padding-left: $spacing-8;
&::before { &::before {
top: 3px; top: 3px;
@@ -48,8 +48,8 @@
font-size: $size-8; font-size: $size-8;
color: $grey; color: $grey;
line-height: 1.5; line-height: 1.5;
margin-left: $size-3; margin-left: $spacing-24;
margin-top: $size-10; margin-top: $spacing-8;
li::before { li::before {
// bullet // bullet

2
ui/app/styles/components/global-flash.scss
View File

@@ -5,7 +5,7 @@
.global-flash { .global-flash {
bottom: 0; bottom: 0;
left: $spacing-s; left: $spacing-12;
margin: 10px; margin: 10px;
max-width: $drawer-width; max-width: $drawer-width;
position: fixed; position: fixed;

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

@@ -23,8 +23,8 @@
.flight-icon { .flight-icon {
&.flight-icon-display-inline { &.flight-icon-display-inline {
vertical-align: middle; vertical-align: middle;
margin-left: $spacing-xxs; margin-left: $spacing-4;
margin-right: $spacing-xxs; margin-right: $spacing-4;
} }
} }

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

@@ -18,7 +18,7 @@
&.thead { &.thead {
box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light; box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
margin: 0; margin: 0;
padding: 0 $size-6 0 0; padding: 0 $spacing-14 0 0;
.column { .column {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@@ -27,7 +27,7 @@
.column { .column {
align-self: center; align-self: center;
padding: $spacing-m; padding: $spacing-16;
&.info-table-row-edit { &.info-table-row-edit {
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
@@ -48,7 +48,7 @@
} }
.hs-icon { .hs-icon {
margin-right: $size-11; margin-right: $spacing-4;
} }
.icon-true { .icon-true {
@@ -73,7 +73,7 @@
padding-left: 0; padding-left: 0;
@include until($mobile) { @include until($mobile) {
padding: $size-8 0 0; padding: $spacing-12 0 0;
} }
} }
@@ -81,7 +81,7 @@
padding-right: 0; padding-right: 0;
@include until($mobile) { @include until($mobile) {
padding: 0 0 $size-8; padding: 0 0 $spacing-12;
} }
} }
} }

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

@@ -10,5 +10,5 @@
padding: 0; padding: 0;
} }
.kmip-role-allowed-operations .field { .kmip-role-allowed-operations .field {
margin-bottom: $spacing-xxs; margin-bottom: $spacing-4;
} }

2
ui/app/styles/components/known-secondaries-card.scss
View File

@@ -13,7 +13,7 @@
} }
.secondaries-table { .secondaries-table {
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
} }
.link { .link {

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

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

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

@@ -13,11 +13,11 @@
} }
.has-label .masked-input { .has-label .masked-input {
padding-top: $spacing-s; padding-top: $spacing-12;
} }
.has-padding { .has-padding {
padding: $size-10 $size-8; padding: $spacing-8 $spacing-12;
} }
// we want to style the boxes the same everywhere so they // we want to style the boxes the same everywhere so they
@@ -44,12 +44,12 @@
font-size: 1rem; font-size: 1rem;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
padding-left: $spacing-s; padding-left: $spacing-12;
background-color: transparent; background-color: transparent;
} }
.button.masked-input-toggle { .button.masked-input-toggle {
min-width: $spacing-xl; min-width: $spacing-36;
border-left: 0; border-left: 0;
color: $grey; color: $grey;
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12); box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
@@ -64,7 +64,7 @@
background: transparent; background: transparent;
height: auto; height: auto;
line-height: 1rem; line-height: 1rem;
min-width: $spacing-l; min-width: $spacing-24;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
color: $grey-light; color: $grey-light;

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

@@ -7,7 +7,7 @@
position: relative; position: relative;
color: var(--token-color-palette-neutral-300); color: var(--token-color-palette-neutral-300);
display: flex; display: flex;
padding: $spacing-xxs $spacing-xs; padding: $spacing-4 $spacing-8;
width: 100%; width: 100%;
} }
@@ -22,7 +22,7 @@
flex: 1 1 auto; flex: 1 1 auto;
height: 2rem; height: 2rem;
justify-content: space-between; justify-content: space-between;
margin-right: $spacing-xxs; margin-right: $spacing-4;
} }
.namespace-picker-content { .namespace-picker-content {
@@ -45,7 +45,7 @@
} }
.namespace-header-bar { .namespace-header-bar {
padding: $size-11 $size-9; padding: $spacing-4 $spacing-10;
border-bottom: 1px solid rgba($black, 0.1); border-bottom: 1px solid rgba($black, 0.1);
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
min-height: 32px; min-height: 32px;
@@ -72,12 +72,12 @@
color: $black; color: $black;
text-decoration: none; text-decoration: none;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
padding: $size-10 $size-9 $size-10 0; padding: $spacing-8 $spacing-10 $spacing-8 0;
} }
.namespace-link.is-current { .namespace-link.is-current {
margin-top: $size-8; margin-top: $spacing-12;
margin-right: -$size-10; margin-right: -$spacing-8;
svg { svg {
margin-top: 2px; margin-top: 2px;
@@ -86,7 +86,7 @@
} }
.leaf-panel { .leaf-panel {
padding: $size-11 $size-9; padding: $spacing-4 $spacing-10;
transition: transform ease-in-out 250ms; transition: transform ease-in-out 250ms;
will-change: transform; will-change: transform;
transform: translateX(0); transform: translateX(0);

4
ui/app/styles/components/namespace-reminder.scss
View File

@@ -5,14 +5,14 @@
.namespace-reminder { .namespace-reminder {
color: $grey; color: $grey;
margin: 0 0 $size-6 0; margin: 0 0 $spacing-14 0;
} }
.console-reminder p.namespace-reminder { .console-reminder p.namespace-reminder {
color: $grey; color: $grey;
font-family: $family-monospace; font-family: $family-monospace;
font-size: $size-8; font-size: $size-8;
margin: $spacing-xxs 0 0; margin: $spacing-4 0 0;
opacity: 0.7; opacity: 0.7;
position: absolute; position: absolute;

2
ui/app/styles/components/overview-card.scss
View File

@@ -4,6 +4,6 @@
*/ */
.overview-card { .overview-card {
padding: $spacing-l; padding: $spacing-24;
line-height: initial; line-height: initial;
} }

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

@@ -4,8 +4,8 @@
*/ */
.page-header { .page-header {
padding-bottom: $size-10; padding-bottom: $spacing-4;
padding-top: $size-4; padding-top: $spacing-20;
.level { .level {
align-items: flex-end; align-items: flex-end;
@@ -26,7 +26,7 @@
} }
.title { .title {
margin-top: $size-2; margin-top: $spacing-36;
} }
.title-with-icon { .title-with-icon {
@@ -34,7 +34,7 @@
} }
.breadcrumb + .level .title { .breadcrumb + .level .title {
margin-top: $size-4; margin-top: $spacing-20;
} }
.title .icon { .title .icon {
height: auto; height: auto;

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

@@ -27,7 +27,7 @@
} }
.menu { .menu {
padding: $size-11 0; padding: $spacing-4 0;
} }
button.link, button.link,
@@ -42,7 +42,7 @@
height: auto; height: auto;
font-size: $size-7; font-size: $size-7;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
padding: $size-9 $size-8; padding: $spacing-10 $spacing-12;
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
@@ -95,12 +95,12 @@
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
letter-spacing: 0; letter-spacing: 0;
margin: 0; margin: 0;
padding: $size-10 $size-8 0; padding: $spacing-8 $spacing-12 0;
text-transform: uppercase; text-transform: uppercase;
} }
.menu-content { .menu-content {
padding: $size-10 $size-8; padding: $spacing-8 $spacing-12;
} }
hr { hr {
@@ -111,7 +111,7 @@
.popup-menu-content p { .popup-menu-content p {
box-shadow: none; box-shadow: none;
padding-top: $size-10; padding-top: $spacing-8;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
} }

12
ui/app/styles/components/radio-card.scss
View File

@@ -5,14 +5,14 @@
.radio-card-selector { .radio-card-selector {
display: flex; display: flex;
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
.radio-card { .radio-card {
box-shadow: $box-shadow-low; box-shadow: $box-shadow-low;
flex: 1 1 25%; flex: 1 1 25%;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: $spacing-xs $spacing-m; margin: $spacing-8 $spacing-16;
border: $base-border; border: $base-border;
border-radius: $radius; border-radius: $radius;
transition: all ease-in-out $speed; transition: all ease-in-out $speed;
@@ -67,19 +67,19 @@
.radio-card-row { .radio-card-row {
display: flex; display: flex;
flex: 1; flex: 1;
padding: $spacing-m; padding: $spacing-16;
} }
.radio-card-icon { .radio-card-icon {
color: $ui-gray-300; color: $ui-gray-300;
} }
.radio-card-message { .radio-card-message {
margin: $spacing-xxs; margin: $spacing-4;
} }
.radio-card-message-title { .radio-card-message-title {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
font-size: $size-7; font-size: $size-7;
margin-bottom: $spacing-xxs; margin-bottom: $spacing-4;
} }
.radio-card-message-body { .radio-card-message-body {
line-height: 1.2; line-height: 1.2;
@@ -91,7 +91,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
background: $ui-gray-050; background: $ui-gray-050;
padding: $spacing-xs; padding: $spacing-8;
} }
.is-selected { .is-selected {

4
ui/app/styles/components/raft-join.scss
View File

@@ -7,8 +7,8 @@
margin-bottom: 0; margin-bottom: 0;
} }
.raft-join .box.is-fullwidth { .raft-join .box.is-fullwidth {
padding-top: $spacing-s; padding-top: $spacing-12;
padding-bottom: $spacing-s; padding-bottom: $spacing-12;
} }
.raft-join-unseal { .raft-join-unseal {
color: $orange; color: $orange;

2
ui/app/styles/components/regex-validator.scss
View File

@@ -29,5 +29,5 @@
} }
} }
.regex-group-value { .regex-group-value {
margin-right: $spacing-m; margin-right: $spacing-16;
} }

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

@@ -23,16 +23,16 @@
} }
.title.is-6 { .title.is-6 {
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
.reindexing-alert, .reindexing-alert,
.syncing-alert { .syncing-alert {
margin-top: $spacing-xl; margin-top: $spacing-36;
} }
.selectable-card-container { .selectable-card-container {
margin-top: $spacing-xl; margin-top: $spacing-36;
display: grid; display: grid;
&.primary, &.primary,
@@ -47,15 +47,15 @@
&.secondary { &.secondary {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: $spacing-xl; grid-gap: $spacing-36;
} }
.card-container { .card-container {
display: grid; display: grid;
grid-gap: $spacing-s; grid-gap: $spacing-12;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 0.2fr 0.2fr 0.2fr; grid-template-rows: 0.2fr 0.2fr 0.2fr;
padding: $spacing-l; padding: $spacing-24;
line-height: 1.5; line-height: 1.5;
&.summary { &.summary {
@@ -120,11 +120,11 @@
} }
&.summary { &.summary {
margin-bottom: $spacing-xl; margin-bottom: $spacing-36;
} }
} }
.summary-state { .summary-state {
padding-bottom: $spacing-xl; padding-bottom: $spacing-36;
border-bottom: 1px solid rgba($grey-dark, 0.3); border-bottom: 1px solid rgba($grey-dark, 0.3);
} }

4
ui/app/styles/components/replication-mode-summary.scss
View File

@@ -7,10 +7,10 @@
flex-shrink: 1; flex-shrink: 1;
.title { .title {
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
.detail-tags { .detail-tags {
margin-bottom: $spacing-m; margin-bottom: $spacing-16;
} }
} }

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

@@ -13,7 +13,7 @@
} }
.float-right { .float-right {
margin: $spacing-s 0 $spacing-l 0; margin: $spacing-12 0 $spacing-24 0;
float: right; float: right;
} }
} }

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

@@ -44,12 +44,12 @@
&::after { &::after {
background: $white; background: $white;
bottom: $spacing-xxs; bottom: $spacing-4;
content: ''; content: '';
left: $spacing-xxs + $spacing-l; left: $spacing-4 + $spacing-24;
position: absolute; position: absolute;
right: $spacing-xxs; right: $spacing-4;
top: $spacing-xxs; top: $spacing-4;
z-index: -1; z-index: -1;
} }
} }
@@ -57,16 +57,16 @@
.ember-power-select-search-input { .ember-power-select-search-input {
background: transparent; background: transparent;
border: 0; border: 0;
padding: $spacing-xxs $spacing-s; padding: $spacing-4 $spacing-12;
padding-left: $spacing-xxs + $spacing-l; padding-left: $spacing-4 + $spacing-24;
} }
div > .ember-power-select-options { div > .ember-power-select-options {
background: $white; background: $white;
border: $base-border; border: $base-border;
box-shadow: $box-shadow-middle; box-shadow: $box-shadow-middle;
margin: -4px $spacing-xs 0; margin: -4px $spacing-8 0;
padding: $spacing-xxs 0; padding: $spacing-4 0;
.ember-power-select-option, .ember-power-select-option,
.ember-power-select-option[aria-current='true'] { .ember-power-select-option[aria-current='true'] {
@@ -97,7 +97,7 @@ div > .ember-power-select-options {
.search-select-list-item { .search-select-list-item {
align-items: center; align-items: center;
display: flex; display: flex;
padding: $spacing-xxs; padding: $spacing-4;
justify-content: space-between; justify-content: space-between;
border-bottom: $light-border; border-bottom: $light-border;

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

@@ -17,7 +17,7 @@
} }
&.small-card { &.small-card {
width: 7rem; width: 6.5rem;
min-height: 8rem; min-height: 8rem;
} }
} }

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

@@ -6,12 +6,12 @@
.shamir-progress { .shamir-progress {
.shamir-progress-progress { .shamir-progress-progress {
display: inline-block; display: inline-block;
margin-top: $size-10; margin-top: $spacing-8;
margin-right: $size-8; margin-right: $spacing-12;
} }
.progress { .progress {
box-shadow: 0 0 0 4px $ui-gray-050; box-shadow: 0 0 0 4px $ui-gray-050;
margin-top: $size-10; margin-top: $spacing-8;
min-width: 90px; min-width: 90px;
} }
} }

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

@@ -14,12 +14,12 @@
text-transform: unset; text-transform: unset;
} }
.token-alert { .token-alert {
padding: $spacing-xs; padding: $spacing-8;
} }
} }
.confirm-action-message p { .confirm-action-message p {
padding-top: $size-10; padding-top: $spacing-4;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
color: $black; color: $black;
} }

10
ui/app/styles/components/splash-page.scss
View File

@@ -4,10 +4,10 @@
*/ */
.splash-page-logo { .splash-page-logo {
padding: $spacing-xs $spacing-s $spacing-xs $spacing-l; padding: $spacing-8 $spacing-12 $spacing-8 $spacing-24;
@include from($mobile) { @include from($mobile) {
padding-left: $spacing-xs; padding-left: $spacing-8;
} }
svg { svg {
@@ -16,15 +16,15 @@
width: 72px; width: 72px;
@include from($mobile) { @include from($mobile) {
margin-left: $spacing-xs; margin-left: $spacing-8;
} }
} }
} }
.splash-page-container { .splash-page-container {
margin: $size-2 0; margin: $spacing-36 0;
} }
.splash-page-header { .splash-page-header {
padding: $size-6 0; padding: $spacing-14 0;
} }

10
ui/app/styles/components/stat-text.scss
View File

@@ -14,7 +14,7 @@
.stat-label { .stat-label {
font-size: $size-5; font-size: $size-5;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
margin-bottom: $spacing-xxs; margin-bottom: $spacing-4;
line-height: inherit; line-height: inherit;
} }
.stat-text { .stat-text {
@@ -26,7 +26,7 @@
.stat-value { .stat-value {
font-size: $size-3; font-size: $size-3;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
margin-top: $spacing-s; margin-top: $spacing-12;
} }
} }
@@ -45,7 +45,7 @@
.stat-value { .stat-value {
font-size: $size-5; font-size: $size-5;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
margin-top: $spacing-s; margin-top: $spacing-12;
} }
} }
@@ -64,7 +64,7 @@
.stat-value { .stat-value {
font-size: $size-3; font-size: $size-3;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
margin-top: $spacing-xxs; margin-top: $spacing-4;
} }
} }
@@ -83,7 +83,7 @@
.stat-value { .stat-value {
font-size: $size-5; font-size: $size-5;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
margin-top: $spacing-xxs; margin-top: $spacing-4;
} }
} }

2
ui/app/styles/components/tabs-component.scss
View File

@@ -70,7 +70,7 @@
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: $grey; color: $grey;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
padding: $size-6 $size-8 $size-8; padding: $spacing-14 $spacing-12 $spacing-12;
text-decoration: none; text-decoration: none;
transition: background-color $speed, border-color $speed; transition: background-color $speed, border-color $speed;

2
ui/app/styles/components/tool-tip.scss
View File

@@ -45,7 +45,7 @@
&::before, &::before,
&::after { &::after {
right: auto; right: auto;
left: $spacing-s; left: $spacing-12;
} }
} }
.ember-basic-dropdown-content--right.tool-tip { .ember-basic-dropdown-content--right.tool-tip {

22
ui/app/styles/components/toolbar.scss
View File

@@ -21,41 +21,41 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: $spacing-xxs; width: $spacing-4;
z-index: 2; z-index: 2;
} }
.input, .input,
.select { .select {
min-width: 190px; min-width: max-content;
} }
} }
.toolbar-label { .toolbar-label {
padding: $spacing-xs; padding: $spacing-8;
color: $grey; color: $grey;
} }
.toolbar-scroller { .toolbar-scroller {
align-items: center; align-items: center;
display: flex; display: flex;
height: 44px; height: 3rem;
justify-content: space-between; justify-content: space-between;
overflow-x: auto; overflow-x: auto;
width: 100%; width: 100%;
@include from($mobile) { @include from($mobile) {
padding: 0 $spacing-xxs; padding: 0 $spacing-4;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
border-bottom: $base-border; border-bottom: $base-border;
height: $spacing-xxs; height: $spacing-4;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: $ui-gray-300; background: $ui-gray-300;
border-radius: $spacing-xxs; border-radius: $spacing-4;
} }
} }
@@ -74,8 +74,8 @@
.toolbar-filters + .toolbar-actions { .toolbar-filters + .toolbar-actions {
@include until($mobile) { @include until($mobile) {
border-left: $base-border; border-left: $base-border;
margin-left: $spacing-xs; margin-left: $spacing-8;
padding-left: $spacing-xs; padding-left: $spacing-8;
} }
} }
@@ -105,7 +105,7 @@
&.popup-menu-trigger { &.popup-menu-trigger {
height: 2.5rem; height: 2.5rem;
padding: $size-10 $size-8; padding: $spacing-8 $spacing-12;
} }
&.disabled { &.disabled {
@@ -133,6 +133,6 @@ a.disabled.toolbar-link {
.toolbar-separator { .toolbar-separator {
border-right: $light-border; border-right: $light-border;
height: 32px; height: 32px;
margin: 0 $spacing-xs; margin: 0 $spacing-8;
width: 0; width: 0;
} }

2
ui/app/styles/components/transform-edit.scss
View File

@@ -15,5 +15,5 @@
font-family: $family-monospace; font-family: $family-monospace;
} }
.transform-decode-formats:not(:last-child) { .transform-decode-formats:not(:last-child) {
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
} }

6
ui/app/styles/components/transit-card.scss
View File

@@ -9,7 +9,7 @@
grid-template-rows: 1fr; grid-template-rows: 1fr;
align-content: start; align-content: start;
grid-gap: 2rem; grid-gap: 2rem;
margin-top: $spacing-l; margin-top: $spacing-24;
} }
.transit-card { .transit-card {
@@ -17,7 +17,7 @@
box-shadow: 0 0 0 1px rgba($grey-light, 0.4); box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
display: grid; display: grid;
grid-template-columns: 0.45fr 2fr; grid-template-columns: 0.45fr 2fr;
padding: $spacing-m; padding: $spacing-16;
border: none; border: none;
.transit-icon { .transit-icon {
@@ -33,7 +33,7 @@
.title { .title {
color: $grey; color: $grey;
font-size: $size-7; font-size: $size-7;
margin-bottom: $spacing-xxs; margin-bottom: $spacing-4;
} }
&:hover { &:hover {

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

@@ -32,7 +32,7 @@
.ui-wizard { .ui-wizard {
z-index: 300; z-index: 300;
padding: $size-5; padding: $spacing-18;
width: $drawer-width; width: $drawer-width;
background: $white; background: $white;
box-shadow: $box-shadow, $box-shadow-highest; box-shadow: $box-shadow, $box-shadow-highest;
@@ -56,20 +56,20 @@
} }
.doc-link { .doc-link {
margin-top: $size-5; margin-top: $spacing-18;
display: block; display: block;
} }
pre code { pre code {
background: $ui-gray-050; background: $ui-gray-050;
margin: $size-8 0; margin: $spacing-12 0;
} }
} }
.wizard-header { .wizard-header {
border-bottom: $light-border; border-bottom: $light-border;
padding: 0 $size-4 $size-8 0; padding: 0 $spacing-20 $spacing-12 0;
margin: $size-4 0; margin: $spacing-20 0;
position: relative; position: relative;
@include until($mobile) { @include until($mobile) {
@@ -93,7 +93,7 @@
box-shadow: $box-shadow-middle; box-shadow: $box-shadow-middle;
height: auto; height: auto;
min-height: 0; min-height: 0;
padding-bottom: $size-11; padding-bottom: $spacing-4;
position: fixed; position: fixed;
right: $size-8; right: $size-8;
top: calc(#{4rem} + #{$size-8}); top: calc(#{4rem} + #{$size-8});
@@ -113,7 +113,7 @@
.wizard-header { .wizard-header {
border-bottom: 0; border-bottom: 0;
margin: 0 0 $size-10; margin: 0 0 $spacing-8;
padding-top: 0; padding-top: 0;
} }
@@ -131,8 +131,8 @@
.wizard-divider-box { .wizard-divider-box {
background: none; background: none;
box-shadow: none; box-shadow: none;
margin: $size-8 0 0; margin: $spacing-12 0 0;
padding: 0 $size-8; padding: 0 $spacing-12;
border-top: solid 1px $white; border-top: solid 1px $white;
border-image: linear-gradient(to right, $grey-dark, $grey) 1; border-image: linear-gradient(to right, $grey-dark, $grey) 1;
border-width: 1px 0 0; border-width: 1px 0 0;
@@ -143,21 +143,21 @@
} }
.wizard-section:last-of-type { .wizard-section:last-of-type {
margin-bottom: $size-5; margin-bottom: $spacing-18;
} }
.wizard-section button:not(:last-of-type) { .wizard-section button:not(:last-of-type) {
margin-bottom: $size-10; margin-bottom: $spacing-8;
} }
.wizard-details { .wizard-details {
padding-top: $size-4; padding-top: $spacing-20;
margin-top: $size-4; margin-top: $spacing-20;
border-top: 1px solid $grey-light; border-top: 1px solid $grey-light;
} }
.wizard-instructions { .wizard-instructions {
margin: $size-4 0; margin: $spacing-20 0;
} }
.selection-summary { .selection-summary {

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

@@ -25,7 +25,7 @@
th, th,
td { td {
padding: $spacing-s; padding: $spacing-12;
} }
th { th {

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

@@ -41,7 +41,6 @@
@import './core/message'; @import './core/message';
@import './core/progress'; @import './core/progress';
@import './core/select'; @import './core/select';
@import './core/switch';
@import './core/tag'; @import './core/tag';
@import './core/title'; @import './core/title';
@import './core/toggle'; @import './core/toggle';

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

@@ -9,7 +9,7 @@
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3); box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
color: $ui-gray-900; color: $ui-gray-900;
display: block; display: block;
padding: $size-5; padding: $spacing-18;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -35,6 +35,6 @@
&.has-container { &.has-container {
box-shadow: 0 4px 4px rgba($black, 0.25); box-shadow: 0 4px 4px rgba($black, 0.25);
border: $base-border; border: $base-border;
padding: $spacing-l; padding: $spacing-24;
} }
} }

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

@@ -58,7 +58,7 @@
&.is-compact { &.is-compact {
height: 2rem; height: 2rem;
padding: $size-11 $size-8; padding: $spacing-4 $spacing-12;
} }
&.is-danger { &.is-danger {
@@ -111,7 +111,7 @@
} }
&.is-icon { &.is-icon {
padding: 0.25rem $size-3; padding: 0.25rem $spacing-24;
} }
&.is-loading { &.is-loading {
@@ -255,8 +255,8 @@
.hs-icon { .hs-icon {
&, &,
&:first-child:last-child { &:first-child:last-child {
margin-left: $spacing-xxs; margin-left: $spacing-4;
margin-right: -$spacing-xxs; margin-right: -$spacing-4;
} }
} }
} }
@@ -264,7 +264,7 @@
.button.icon { .button.icon {
box-sizing: border-box; box-sizing: border-box;
padding: 0 $size-11; padding: 0 $spacing-4;
height: 24px; height: 24px;
width: 24px; width: 24px;
&, &,

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

@@ -6,8 +6,8 @@
.chart-wrapper { .chart-wrapper {
border: $light-border; border: $light-border;
border-radius: $radius-large; border-radius: $radius-large;
padding: $spacing-s $spacing-l; padding: $spacing-12 $spacing-24;
margin-bottom: $spacing-m; margin-bottom: $spacing-16;
} }
// GRID LAYOUT // // GRID LAYOUT //
@@ -97,8 +97,8 @@
grid-column-end: 4; grid-column-end: 4;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 5; grid-row-end: 5;
padding-bottom: $spacing-xl; padding-bottom: $spacing-36;
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
box-shadow: inset 0 -1px 0 $ui-gray-200; box-shadow: inset 0 -1px 0 $ui-gray-200;
> h2 { > h2 {
@@ -114,8 +114,8 @@
grid-column-end: 8; grid-column-end: 8;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 5; grid-row-end: 5;
padding-bottom: $spacing-xl; padding-bottom: $spacing-36;
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
box-shadow: inset 0 -1px 0 $ui-gray-200; box-shadow: inset 0 -1px 0 $ui-gray-200;
> h2 { > h2 {
@@ -196,29 +196,29 @@
h2.chart-title { h2.chart-title {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
font-size: $size-5; font-size: $size-5;
line-height: $spacing-l; line-height: $spacing-24;
margin-bottom: $spacing-xxs; margin-bottom: $spacing-4;
} }
p.chart-description { p.chart-description {
color: $ui-gray-700; color: $ui-gray-700;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
p.chart-subtext { p.chart-subtext {
color: $ui-gray-500; color: $ui-gray-500;
font-size: $size-8; font-size: $size-8;
line-height: 16px; line-height: 16px;
margin-top: $spacing-xs; margin-top: $spacing-8;
} }
h3.data-details { h3.data-details {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
font-size: $size-8; font-size: $size-8;
line-height: 14px; line-height: 14px;
margin-bottom: $spacing-xs; margin-bottom: $spacing-8;
} }
p.data-details { p.data-details {
@@ -245,8 +245,8 @@ p.data-details {
} }
.legend-label { .legend-label {
padding-left: $spacing-xs; padding-left: $spacing-8;
padding-right: $spacing-xl; padding-right: $spacing-36;
} }
.chart-tooltip { .chart-tooltip {
@@ -269,7 +269,7 @@ p.data-details {
width: fit-content; width: fit-content;
} }
.horizontal-chart { .horizontal-chart {
padding: $spacing-s; padding: $spacing-12;
} }
} }
@@ -324,16 +324,16 @@ p.data-details {
grid-column-end: 4; grid-column-end: 4;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 3; grid-row-end: 3;
margin-left: $spacing-xxl; margin-left: $spacing-48;
margin-right: $spacing-xxl; margin-right: $spacing-48;
} }
.chart-container-right { .chart-container-right {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 4; grid-column-end: 4;
grid-row-start: 3; grid-row-start: 3;
grid-row-end: 4; grid-row-end: 4;
margin-left: $spacing-xxl; margin-left: $spacing-48;
margin-right: $spacing-xxl; margin-right: $spacing-48;
} }
.legend-center { .legend-center {

1
ui/app/styles/core/checkbox-and-radio.scss
View File

@@ -48,6 +48,7 @@
// b-checkbox styling // b-checkbox styling
.b-checkbox { .b-checkbox {
display: inline;
position: relative; position: relative;
} }

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

@@ -7,12 +7,12 @@
// Columns (plural) // Columns (plural)
.columns { .columns {
margin-left: -$size-9; margin-left: -$spacing-10;
margin-right: -$size-9; margin-right: -$spacing-10;
margin-top: -$size-9; margin-top: -$spacing-10;
&:last-child { &:last-child {
margin-bottom: -$size-9; margin-bottom: -$spacing-10;
} }
&.is-centered { &.is-centered {
@@ -31,7 +31,7 @@
} }
&.is-gapless:not(:last-child) { &.is-gapless:not(:last-child) {
margin-bottom: $size-4; margin-bottom: $spacing-20;
} }
&.is-gapless:last-child { &.is-gapless:last-child {

2
ui/app/styles/core/containers.scss
View File

@@ -21,7 +21,7 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
padding: 0 $size-4; padding: 0 $spacing-20;
> .container { > .container {
display: flex; display: flex;

2
ui/app/styles/core/element-styling.scss
View File

@@ -80,7 +80,7 @@ object {
html { html {
background-color: $white; background-color: $white;
font-size: 14px; font-size: $base-font-size; // 16px
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-width: 300px; min-width: 300px;

4
ui/app/styles/core/field.scss
View File

@@ -13,7 +13,7 @@
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom: $size-4; margin-bottom: $spacing-20;
} }
} }
// must come after field due to overriding the margin-bottom of not last-child // must come after field due to overriding the margin-bottom of not last-child
@@ -110,7 +110,7 @@ fieldset.form-fieldset {
flex-shrink: 1; flex-shrink: 1;
> .field:not(:last-child) { > .field:not(:last-child) {
margin-right: $size-9; margin-right: $spacing-10;
} }
.field:not(.is-narrow) { .field:not(.is-narrow) {
flex-grow: 1; flex-grow: 1;

2
ui/app/styles/core/file.scss
View File

@@ -45,7 +45,7 @@
@extend .is-transparent; @extend .is-transparent;
color: $grey; color: $grey;
position: absolute; position: absolute;
right: $spacing-xs; right: $spacing-8;
} }
.file-icon { .file-icon {

2
ui/app/styles/core/footer.scss
View File

@@ -6,7 +6,7 @@
.footer { .footer {
background-color: transparent; background-color: transparent;
border-top: $base-border; border-top: $base-border;
padding: $size-3 1.5rem; padding: $spacing-24 $spacing-20;
margin-top: auto; margin-top: auto;
span:not(:first-child) { span:not(:first-child) {

6
ui/app/styles/core/inputs.scss
View File

@@ -18,8 +18,8 @@
line-height: 1.5; line-height: 1.5;
max-width: 100%; max-width: 100%;
padding-bottom: calc(0.375em - 1px); padding-bottom: calc(0.375em - 1px);
padding-left: $size-8; padding-left: $spacing-12;
padding-right: $size-8; padding-right: $spacing-12;
padding-top: calc(0.375em - 1px); padding-top: calc(0.375em - 1px);
width: 100%; width: 100%;
@@ -79,7 +79,7 @@
// custom input // custom input
.input-hint { .input-hint {
padding: 0 $size-9; padding: 0 $spacing-10;
font-size: $size-8; font-size: $size-8;
color: $grey; color: $grey;
} }

2
ui/app/styles/core/label.scss
View File

@@ -11,7 +11,7 @@
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-xxs; gap: $spacing-4;
width: min-content; width: min-content;
min-width: 100%; min-width: 100%;

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

@@ -45,7 +45,7 @@
.level.is-mobile .level-item:not(:last-child) { .level.is-mobile .level-item:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
margin-right: $size-9; margin-right: $spacing-10;
} }
.level.is-mobile .level-item:not(.is-narrow) { .level.is-mobile .level-item:not(.is-narrow) {
@@ -92,6 +92,6 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.level-item:not(:last-child) { .level-item:not(:last-child) {
margin-bottom: $size-9; margin-bottom: $spacing-10;
} }
} }

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

@@ -17,7 +17,7 @@
} }
.list-header { .list-header {
margin: $size-9 $size-9 0; margin: $spacing-10 $spacing-10 0;
color: $grey; color: $grey;
font-size: $size-8; font-size: $size-8;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
@@ -26,5 +26,5 @@
ul.bullet { ul.bullet {
list-style: disc; list-style: disc;
padding-left: $spacing-m; padding-left: $spacing-16;
} }

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

@@ -9,7 +9,7 @@
.menu a { .menu a {
display: block; display: block;
padding: $size-10 $size-9; padding: $spacing-8 $spacing-10;
text-decoration: none; text-decoration: none;
} }

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

@@ -11,17 +11,17 @@
.message { .message {
background: $blue-010; background: $blue-010;
border: 1px solid $blue-100; border: 1px solid $blue-100;
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
padding: $spacing-s $spacing-m $spacing-m $spacing-s; padding: $spacing-12 $spacing-16 $spacing-16 $spacing-12;
position: relative; position: relative;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: $size-4; margin-bottom: $spacing-20;
} }
.message-icon { .message-icon {
color: $blue; color: $blue;
margin-right: $spacing-xs; margin-right: $spacing-8;
} }
.message-title { .message-title {
@@ -34,7 +34,7 @@
.message-body { .message-body {
border: 0; border: 0;
padding: 1em 1.25em; padding: 1em 1.25em;
margin-top: $spacing-xxs; margin-top: $spacing-4;
} }
// message types, see message-types.js // message types, see message-types.js

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

@@ -21,8 +21,8 @@ select {
max-width: 100%; max-width: 100%;
outline: none; outline: none;
padding-bottom: calc(0.375em - 1px); padding-bottom: calc(0.375em - 1px);
padding-left: $size-8; padding-left: $spacing-10;
padding-right: $size-8; padding-right: $spacing-10;
padding-top: calc(0.375em - 1px); padding-top: calc(0.375em - 1px);
text-rendering: auto !important; text-rendering: auto !important;
@@ -44,7 +44,7 @@ select {
} }
.select select:not([multiple]) { .select select:not([multiple]) {
padding-right: $size-2; padding-right: $spacing-36;
} }
.select select[disabled] { .select select[disabled] {
@@ -76,7 +76,7 @@ select {
margin: 0; margin: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
right: $spacing-xs; right: $spacing-8;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 24px; width: 24px;

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

@@ -1,152 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
// This file defines the style for switch, with the nested classes: is-small, is-rounded, is-success
.switch[type='checkbox'] {
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;
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;
}
}
}
// 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%;
}
}
}
}
// 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: calc($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: calc($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;
}

6
ui/app/styles/core/tag.scss
View File

@@ -16,8 +16,8 @@
height: auto; height: auto;
justify-content: center; justify-content: center;
line-height: 1.5; line-height: 1.5;
margin-right: $size-10; margin-right: $spacing-8;
padding: 0 $size-10; padding: 0 $spacing-8;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@@ -34,7 +34,7 @@
} }
&.has-extra-padding { &.has-extra-padding {
padding: $size-11 $spacing-xxs; padding: $spacing-4 $spacing-4;
} }
} }

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

@@ -54,7 +54,7 @@
} }
.form-section .title { .form-section .title {
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
} }
.is-subtitle-gray { .is-subtitle-gray {

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

@@ -71,7 +71,7 @@
&.is-small { &.is-small {
+ label { + label {
font-size: $size-7; font-size: $size-7;
padding-left: $size-8 * 2.5; padding-left: $spacing-32;
margin: 0 0.25rem; margin: 0 0.25rem;
&::before { &::before {
top: calc($size-8 / 5); top: calc($size-8 / 5);
@@ -79,9 +79,9 @@
width: $size-8 * 2; width: $size-8 * 2;
} }
&::after { &::after {
width: $size-8 * 0.8; width: $size-8 * 0.9;
height: $size-8 * 0.8; height: $size-8 * 0.9;
transform: translateX(0.15rem); transform: translateX(0.05rem);
left: 0; left: 0;
top: calc($size-8 / 4); top: calc($size-8 / 4);
} }
@@ -91,11 +91,6 @@
transform: translateX(($size-8 * 2) - ($size-8 * 0.94)); transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
} }
} }
&.is-large {
width: 4.5rem;
height: 2.25rem;
}
} }
.toggle[type='checkbox'].is-small + label::after { .toggle[type='checkbox'].is-small + label::after {
will-change: left; will-change: left;

10
ui/app/styles/helper-classes/flexbox-and-grid.scss
View File

@@ -21,11 +21,11 @@
} }
.has-gap-m { .has-gap-m {
gap: $spacing-m; gap: $spacing-16;
} }
.has-gap-l { .has-gap-l {
gap: $spacing-l; gap: $spacing-24;
} }
// Alignment of the items // Alignment of the items
@@ -66,7 +66,7 @@
justify-content: flex-start; justify-content: flex-start;
&.has-gap { &.has-gap {
gap: $spacing-m; gap: $spacing-16;
} }
} }
@@ -118,11 +118,11 @@
} }
&.row-gap-8 { &.row-gap-8 {
row-gap: $spacing-xs; row-gap: $spacing-8;
} }
&.column-gap-16 { &.column-gap-16 {
column-gap: $spacing-m; column-gap: $spacing-16;
} }
} }

2
ui/app/styles/helper-classes/general.scss
View File

@@ -61,7 +61,7 @@
.is-hint { .is-hint {
color: $grey; color: $grey;
font-size: $size-8; font-size: $size-8;
padding: $size-8 0; padding: $spacing-12 0;
} }
.is-optional { .is-optional {

2
ui/app/styles/helper-classes/layout.scss
View File

@@ -42,7 +42,7 @@
} }
.top-xxs { .top-xxs {
top: $spacing-xxs; top: $spacing-4;
} }
// visibility // visibility

104
ui/app/styles/helper-classes/spacing.scss
View File

@@ -3,86 +3,82 @@
* SPDX-License-Identifier: BUSL-1.1 * SPDX-License-Identifier: BUSL-1.1
*/ */
/* Helpers that define anything with the margin or padding. */ /* Helpers that define margin and padding in pixels */
/* Notes
- these helpers are generally defined in px but some (if they use $size-xx) are using rems.
*/
.is-paddingless { .is-paddingless {
padding: 0 !important; padding: 0 !important;
} }
.has-short-padding { .has-short-padding {
padding: $size-11 $size-5; padding: $spacing-4 $spacing-18;
} }
.has-tall-padding { .has-tall-padding {
padding: $size-2; padding: $spacing-36;
} }
.has-side-padding-s { .has-side-padding-s {
padding-left: $spacing-s; padding-left: $spacing-12;
padding-right: $spacing-s; padding-right: $spacing-12;
} }
.has-padding-s { .has-padding-s {
padding: $spacing-s; padding: $spacing-12;
} }
.has-padding-xxs { .has-padding-xxs {
padding: $spacing-xxs; padding: $spacing-4;
} }
.has-padding-m { .has-padding-m {
padding: $spacing-m; padding: $spacing-16;
} }
.has-padding-l { .has-padding-l {
padding: $spacing-l; padding: $spacing-24;
} }
.has-padding-l { .has-padding-l {
padding: $spacing-l; padding: $spacing-24;
} }
.has-bottom-padding-s { .has-bottom-padding-s {
padding-bottom: $spacing-s; padding-bottom: $spacing-12;
} }
.has-bottom-padding-m { .has-bottom-padding-m {
padding-bottom: $spacing-m; padding-bottom: $spacing-16;
} }
.has-bottom-padding-l { .has-bottom-padding-l {
padding-bottom: $spacing-l; padding-bottom: $spacing-24;
} }
.has-top-padding-s { .has-top-padding-s {
padding-top: $spacing-s; padding-top: $spacing-12;
} }
.has-top-padding-m { .has-top-padding-m {
padding-top: $spacing-m; padding-top: $spacing-16;
} }
.has-top-padding-l { .has-top-padding-l {
padding-top: $spacing-l; padding-top: $spacing-24;
} }
.has-left-padding-xs { .has-left-padding-xs {
padding-left: $spacing-xs; padding-left: $spacing-8;
} }
.has-left-padding-s { .has-left-padding-s {
padding-left: $spacing-s; padding-left: $spacing-12;
} }
.has-left-padding-l { .has-left-padding-l {
padding-left: $spacing-l; padding-left: $spacing-24;
} }
.has-top-padding-xxl { .has-top-padding-xxl {
padding-top: $spacing-xxl; padding-top: $spacing-48;
} }
// All Margin helpers // All Margin helpers
@@ -91,118 +87,118 @@
} }
.has-top-bottom-margin { .has-top-bottom-margin {
margin: $size-5 0rem; margin: $spacing-18 0rem;
} }
.has-top-bottom-margin-xxs { .has-top-bottom-margin-xxs {
margin: $spacing-xxs 0; margin: $spacing-4 0;
} }
.has-top-bottom-margin-negative-m { .has-top-bottom-margin-negative-m {
margin-top: -$spacing-m; margin-top: -$spacing-16;
margin-bottom: -$spacing-m; margin-bottom: -$spacing-16;
} }
.has-top-margin-negative-xxl { .has-top-margin-negative-xxl {
margin-top: -$spacing-xxl; margin-top: -$spacing-48;
} }
.has-right-margin-xxs { .has-right-margin-xxs {
margin-right: $spacing-xxs; margin-right: $spacing-4;
} }
.has-left-margin-xxs { .has-left-margin-xxs {
margin-left: $spacing-xxs; margin-left: $spacing-4;
} }
.has-bottom-margin-xxs { .has-bottom-margin-xxs {
margin-bottom: $spacing-xxs !important; margin-bottom: $spacing-4 !important;
} }
.has-bottom-margin-xs { .has-bottom-margin-xs {
margin-bottom: $spacing-xs !important; margin-bottom: $spacing-8 !important;
} }
.has-bottom-margin-s { .has-bottom-margin-s {
margin-bottom: $spacing-s; margin-bottom: $spacing-12;
} }
.has-bottom-margin-m { .has-bottom-margin-m {
margin-bottom: $spacing-m; margin-bottom: $spacing-16;
} }
.has-bottom-margin-l { .has-bottom-margin-l {
margin-bottom: $spacing-l; margin-bottom: $spacing-24;
} }
.has-bottom-margin-xl { .has-bottom-margin-xl {
margin-bottom: $spacing-xl; margin-bottom: $spacing-36;
} }
.has-bottom-margin-xxl { .has-bottom-margin-xxl {
margin-bottom: $spacing-xxl; margin-bottom: $spacing-48;
} }
.has-top-margin-xxs { .has-top-margin-xxs {
margin-top: $spacing-xxs; margin-top: $spacing-4;
} }
.has-top-margin-s { .has-top-margin-s {
margin-top: $spacing-s; margin-top: $spacing-12;
} }
.has-top-margin-xs { .has-top-margin-xs {
margin-top: $spacing-xs; margin-top: $spacing-8;
} }
.has-top-margin-m { .has-top-margin-m {
margin-top: $spacing-m; margin-top: $spacing-16;
} }
.has-top-margin-l { .has-top-margin-l {
margin-top: $spacing-l; margin-top: $spacing-24;
} }
.has-top-margin-xl { .has-top-margin-xl {
margin-top: $spacing-xl; margin-top: $spacing-36;
} }
.has-top-margin-xxl { .has-top-margin-xxl {
margin-top: $spacing-xxl; margin-top: $spacing-48;
} }
.has-top-margin-negative-s { .has-top-margin-negative-s {
margin-top: (-1 * $spacing-s); margin-top: (-1 * $spacing-12);
} }
.has-left-margin-xxs { .has-left-margin-xxs {
margin-left: $spacing-xxs; margin-left: $spacing-4;
} }
.has-left-margin-xs { .has-left-margin-xs {
margin-left: $spacing-xs; margin-left: $spacing-8;
} }
.has-left-margin-s { .has-left-margin-s {
margin-left: $spacing-s; margin-left: $spacing-12;
} }
.has-left-margin-m { .has-left-margin-m {
margin-left: $spacing-m; margin-left: $spacing-16;
} }
.has-left-margin-l { .has-left-margin-l {
margin-left: $spacing-l; margin-left: $spacing-24;
} }
.has-left-margin-xl { .has-left-margin-xl {
margin-left: $spacing-xl; margin-left: $spacing-36;
} }
.has-right-margin-m { .has-right-margin-m {
margin-right: $spacing-m; margin-right: $spacing-16;
} }
.has-right-margin-l { .has-right-margin-l {
margin-right: $spacing-l; margin-right: $spacing-24;
} }

3
ui/app/styles/helper-classes/typography.scss
View File

@@ -3,7 +3,8 @@
* SPDX-License-Identifier: BUSL-1.1 * SPDX-License-Identifier: BUSL-1.1
*/ */
/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration. */ /* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
* Deprecated, please use the HDS text component to style fonts https://helios.hashicorp.design/components/text */
// font size helpers // font size helpers
.is-size-4 { .is-size-4 {

37
ui/app/styles/utils/_size_variables.scss
View File

@@ -3,27 +3,36 @@
* SPDX-License-Identifier: BUSL-1.1 * SPDX-License-Identifier: BUSL-1.1
*/ */
/* General sizing in rem values used largely for text sizing.*/ $base-font-size: 16px;
$size-1: 3rem; // 48px, same as $spacing-xxl
/*
General sizing in rem values
* Deprecated - please use the HDS text component to style fonts https://helios.hashicorp.design/components/text
*/
$size-2: 2.5rem; // 40px $size-2: 2.5rem; // 40px
$size-3: calc(24 / 14) + 0rem; // ~1.714rem ~27px $size-3: calc(24 / 14) + 0rem; // ~1.714rem ~27px
$size-4: 1.5rem; // 24px same as $spacing-l $size-4: 1.5rem; // 24px
$size-5: 1.25rem; // 20px $size-5: 1.25rem; // 20px
$size-6: 1rem; // 16px same as $spacing-m $size-6: 1rem; // 16px
$size-7: calc(13 / 14) + 0rem; // ~.929rem ~15px $size-7: calc(13 / 14) + 0rem; // ~.929rem ~15px
$size-8: calc(12 / 14) + 0rem; // ~.857rem ~13.7px $size-8: calc(12 / 14) + 0rem; // ~.857rem ~13.7px
$size-9: 0.75rem; // 12px same as $spacing-s $size-9: 0.75rem; // 12px
$size-10: 0.5rem; // 8px same as $spacing-xs $size-10: 0.5rem; // 8px
$size-11: 0.25rem; // 4px same as spacing-xxs $size-11: 0.25rem; // 4px
/* Spacing vars in px */ /* Spacing vars in px */
$spacing-xxs: 4px; $spacing-4: 4px;
$spacing-xs: 8px; $spacing-8: 8px;
$spacing-s: 12px; $spacing-10: 10px;
$spacing-m: 16px; $spacing-12: 12px;
$spacing-l: 24px; $spacing-14: 14px;
$spacing-xl: 36px; $spacing-16: 16px;
$spacing-xxl: 48px; $spacing-18: 18px;
$spacing-20: 20px;
$spacing-24: 24px;
$spacing-32: 32px;
$spacing-36: 36px;
$spacing-48: 48px;
/* Border radius */ /* Border radius */
$radius: 2px; $radius: 2px;

4
ui/app/templates/components/clients/config.hbs
View File

@@ -20,12 +20,12 @@
type="checkbox" type="checkbox"
id="enabled" id="enabled"
name="enabled" name="enabled"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
disabled={{@model.reportingEnabled}} disabled={{@model.reportingEnabled}}
checked={{eq @model.enabled "On"}} checked={{eq @model.enabled "On"}}
{{on "change" this.toggleEnabled}} {{on "change" this.toggleEnabled}}
/> />
<label for="enabled"> <label for="enabled" class="has-text-weight-bold is-size-8">
Data collection is Data collection is
{{lowercase @model.enabled}} {{lowercase @model.enabled}}
</label> </label>

1
ui/app/templates/components/clients/dashboard.hbs
View File

@@ -17,6 +17,7 @@
{{#if this.formattedStartDate}} {{#if this.formattedStartDate}}
<p class="is-size-6" data-test-date-display>{{this.formattedStartDate}}</p> <p class="is-size-6" data-test-date-display>{{this.formattedStartDate}}</p>
<Hds::Button <Hds::Button
class="has-left-margin-xs"
@text="Edit" @text="Edit"
@color="tertiary" @color="tertiary"
@icon="edit" @icon="edit"

2
ui/app/templates/components/database-connection.hbs
View File

@@ -215,8 +215,6 @@
<div class="field"> <div class="field">
<Toggle <Toggle
@name="show-{{attr.name}}" @name="show-{{attr.name}}"
@status="success"
@size="small"
@onChange={{fn this.updateShowPassword (not this.showPasswordField)}} @onChange={{fn this.updateShowPassword (not this.showPasswordField)}}
@checked={{this.showPasswordField}} @checked={{this.showPasswordField}}
data-test-toggle={{attr.name}} data-test-toggle={{attr.name}}

4
ui/app/templates/components/pgp-file.hbs
View File

@@ -21,11 +21,11 @@
id={{concat "useText-" this.elementId}} id={{concat "useText-" this.elementId}}
type="checkbox" type="checkbox"
name={{concat "useText-" this.elementId}} name={{concat "useText-" this.elementId}}
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
checked={{this.key.enterAsText}} checked={{this.key.enterAsText}}
onchange={{action (toggle "enterAsText" this.key)}} onchange={{action (toggle "enterAsText" this.key)}}
/> />
<label for={{concat "useText-" this.elementId}}> <label for={{concat "useText-" this.elementId}} class="has-text-weight-bold is-size-8">
Enter as text Enter as text
</label> </label>
</div> </div>

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

@@ -9,8 +9,6 @@
<ToolbarFilters> <ToolbarFilters>
<Toggle <Toggle
@name="json" @name="json"
@status="success"
@size="small"
@disabled={{and (eq @mode "show") @secretDataIsAdvanced}} @disabled={{and (eq @mode "show") @secretDataIsAdvanced}}
@checked={{@showAdvancedMode}} @checked={{@showAdvancedMode}}
@onChange={{action @editActions.toggleAdvanced}} @onChange={{action @editActions.toggleAdvanced}}

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

@@ -68,10 +68,10 @@
id="prehashed" id="prehashed"
@type="checkbox" @type="checkbox"
name="prehashed" name="prehashed"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
@checked={{@prehashed}} @checked={{@prehashed}}
/> />
<label for="prehashed">Prehashed</label> <label for="prehashed" class="has-text-weight-bold is-size-8">Prehashed</label>
</div> </div>
</div> </div>
</div> </div>

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

@@ -91,10 +91,10 @@
id="prehashed" id="prehashed"
@type="checkbox" @type="checkbox"
name="prehashed" name="prehashed"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
@checked={{@prehashed}} @checked={{@prehashed}}
/> />
<label for="prehashed">Prehashed</label> <label for="prehashed" class="has-text-weight-bold is-size-8">Prehashed</label>
</div> </div>
{{/if}} {{/if}}
</div> </div>

2
ui/lib/core/addon/components/form-field.hbs
View File

@@ -139,8 +139,6 @@
{{! Togglable Text Input }} {{! Togglable Text Input }}
<Toggle <Toggle
@name="show-{{@attr.name}}" @name="show-{{@attr.name}}"
@status="success"
@size="small"
@onChange={{this.toggleShow}} @onChange={{this.toggleShow}}
@checked={{this.showInput}} @checked={{this.showInput}}
data-test-toggle={{@attr.name}} data-test-toggle={{@attr.name}}

6
ui/lib/core/addon/components/text-file.hbs
View File

@@ -6,7 +6,7 @@
{{#unless @uploadOnly}} {{#unless @uploadOnly}}
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left"> <div class="level-left">
<label for="input-{{this.elementId}}" class="is-label" data-test-text-file-label> <label for="input-{{this.elementId}}" class="has-text-weight-semibold" data-test-text-file-label>
{{or @label "File"}} {{or @label "File"}}
{{#if @helpText}} {{#if @helpText}}
<InfoTooltip> <InfoTooltip>
@@ -22,12 +22,12 @@
<Input <Input
data-test-text-toggle data-test-text-toggle
id="use-text-{{this.elementId}}" id="use-text-{{this.elementId}}"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
@type="checkbox" @type="checkbox"
@checked={{this.showTextArea}} @checked={{this.showTextArea}}
{{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}} {{on "change" (fn (mut this.showTextArea) (not this.showTextArea))}}
/> />
<label for="use-text-{{this.elementId}}"> <label for="use-text-{{this.elementId}}" class="has-text-weight-bold is-size-8">
Enter as text Enter as text
</label> </label>
</div> </div>

2
ui/lib/core/addon/components/toggle.hbs
View File

@@ -9,7 +9,7 @@
@type="checkbox" @type="checkbox"
@checked={{this.checked}} @checked={{this.checked}}
{{on "change" this.handleChange}} {{on "change" this.handleChange}}
class={{this.inputClasses}} class="toggle is-success is-small"
disabled={{this.disabled}} disabled={{this.disabled}}
data-test-toggle-input={{this.name}} data-test-toggle-input={{this.name}}
...attributes ...attributes

9
ui/lib/core/addon/components/toggle.js
View File

@@ -16,8 +16,6 @@
* @param {string} name - name is passed along to the form field, as well as to generate the ID of the input & "for" value of the label * @param {string} name - name is passed along to the form field, as well as to generate the ID of the input & "for" value of the label
* @param {boolean} [checked=false] - checked status of the input, and must be passed in and mutated from the parent * @param {boolean} [checked=false] - checked status of the input, and must be passed in and mutated from the parent
* @param {boolean} [disabled=false] - disabled makes the switch unclickable * @param {boolean} [disabled=false] - disabled makes the switch unclickable
* @param {string} [size='medium'] - Sizing can be small or medium
* @param {string} [status='normal'] - Status can be normal or success, which makes the switch have a blue background when checked=true
*/ */
import Component from '@glimmer/component'; import Component from '@glimmer/component';
@@ -40,13 +38,6 @@ export default class ToggleComponent extends Component {
get safeId() { get safeId() {
return `toggle-${this.name.replace(/\W/g, '')}`; return `toggle-${this.name.replace(/\W/g, '')}`;
} }
get inputClasses() {
const size = this.args.size || 'normal';
const status = this.args.status || 'normal';
const sizeClass = `is-${size}`;
const statusClass = `is-${status}`;
return `toggle ${statusClass} ${sizeClass}`;
}
@action @action
handleChange(e) { handleChange(e) {

2
ui/lib/core/addon/components/ttl-picker.hbs
View File

@@ -69,8 +69,6 @@
{{else}} {{else}}
<Toggle <Toggle
@name={{this.label}} @name={{this.label}}
@status="success"
@size="small"
@onChange={{action "toggleEnabled"}} @onChange={{action "toggleEnabled"}}
@checked={{this.enableTTL}} @checked={{this.enableTTL}}
@hideLabel={{true}} @hideLabel={{true}}

4
ui/lib/kmip/addon/templates/components/edit-form-kmip-role.hbs
View File

@@ -15,11 +15,11 @@
data-test-input="operationNone" data-test-input="operationNone"
id="operationNone" id="operationNone"
type="checkbox" type="checkbox"
class="switch is-rounded is-success is-small" class="toggle is-success is-small"
checked={{not this.model.operationNone}} checked={{not this.model.operationNone}}
onchange={{action "toggleOperationSpecial" value="target.checked"}} onchange={{action "toggleOperationSpecial" value="target.checked"}}
/> />
<label for="operationNone"> <label for="operationNone" class="has-text-weight-bold is-size-8">
Allow this role to perform KMIP operations Allow this role to perform KMIP operations
</label> </label>
</div> </div>

2
ui/lib/kubernetes/addon/components/page/credentials.hbs
View File

@@ -72,8 +72,6 @@
<div class="has-top-margin-l has-bottom-margin-l"> <div class="has-top-margin-l has-bottom-margin-l">
<Toggle <Toggle
@status="success"
@size="small"
@checked={{this.clusterRoleBinding}} @checked={{this.clusterRoleBinding}}
@onChange={{(toggle-action "clusterRoleBinding" this)}} @onChange={{(toggle-action "clusterRoleBinding" this)}}
data-test-kubernetes-clusterRoleBinding data-test-kubernetes-clusterRoleBinding

8
ui/lib/kv/addon/components/page/secret/details.hbs
View File

@@ -15,13 +15,7 @@
<:toolbarFilters> <:toolbarFilters>
{{#unless this.emptyState}} {{#unless this.emptyState}}
<Toggle <Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
@name="json"
@status="success"
@size="small"
@checked={{this.showJsonView}}
@onChange={{fn (mut this.showJsonView)}}
>
<span class="has-text-grey">JSON</span> <span class="has-text-grey">JSON</span>
</Toggle> </Toggle>
{{/unless}} {{/unless}}

10
ui/lib/kv/addon/components/page/secret/edit.hbs
View File

@@ -5,13 +5,7 @@
<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create New Version"> <KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create New Version">
<:toolbarFilters> <:toolbarFilters>
<Toggle <Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
@name="json"
@status="success"
@size="small"
@checked={{this.showJsonView}}
@onChange={{fn (mut this.showJsonView)}}
>
<span class="has-text-grey">JSON</span> <span class="has-text-grey">JSON</span>
</Toggle> </Toggle>
</:toolbarFilters> </:toolbarFilters>
@@ -53,8 +47,6 @@
<div class="has-top-margin-m"> <div class="has-top-margin-m">
<Toggle <Toggle
@name="Show diff" @name="Show diff"
@status="success"
@size="small"
@onChange={{fn (mut this.showDiff)}} @onChange={{fn (mut this.showDiff)}}
@checked={{this.showDiff}} @checked={{this.showDiff}}
@disabled={{not this.diffDelta}} @disabled={{not this.diffDelta}}

8
ui/lib/kv/addon/components/page/secrets/create.hbs
View File

@@ -5,13 +5,7 @@
<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create Secret"> <KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create Secret">
<:toolbarFilters> <:toolbarFilters>
<Toggle <Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
@name="json"
@status="success"
@size="small"
@checked={{this.showJsonView}}
@onChange={{fn (mut this.showJsonView)}}
>
<span class="has-text-grey">JSON</span> <span class="has-text-grey">JSON</span>
</Toggle> </Toggle>
</:toolbarFilters> </:toolbarFilters>

2
ui/lib/pki/addon/components/pki-role-form.hbs
View File

@@ -23,8 +23,6 @@
/> />
<Toggle <Toggle
@name={{concat attr.name "-toggle"}} @name={{concat attr.name "-toggle"}}
@status="success"
@size="small"
@checked={{this.showDefaultIssuer}} @checked={{this.showDefaultIssuer}}
@onChange={{this.toggleShowDefaultIssuer}} @onChange={{this.toggleShowDefaultIssuer}}
> >