mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-10-29 09:42:25 +00:00
UI: Increase base font size (#23994)
* 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
3
changelog/23994.txt
Normal file
3
changelog/23994.txt
Normal 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
|
||||
```
|
||||
@@ -11,7 +11,7 @@
|
||||
{{#each (filter-by "category" category this.mountTypes) as |type|}}
|
||||
<SelectableCard
|
||||
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}}
|
||||
@disabled={{if type.requiredFeature (not (has-feature type.requiredFeature)) false}}
|
||||
data-test-mount-type={{type.type}}
|
||||
|
||||
@@ -46,12 +46,12 @@
|
||||
id="fileUploadToggle"
|
||||
@type="checkbox"
|
||||
name="fileUploadToggle"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
@checked={{this.showFileUpload}}
|
||||
{{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
|
||||
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>
|
||||
{{else}}
|
||||
{{! EDITING - no file upload toggle}}
|
||||
|
||||
@@ -32,8 +32,6 @@
|
||||
<div>
|
||||
<Toggle
|
||||
@name={{concat @attr.name "-validation-toggle"}}
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.showTestValue}}
|
||||
@onChange={{this.toggleTestValue}}
|
||||
>
|
||||
|
||||
@@ -8,16 +8,16 @@
|
||||
grid-row: 1/1;
|
||||
}
|
||||
@mixin stacked-content {
|
||||
margin-bottom: $spacing-l;
|
||||
margin-bottom: $spacing-24;
|
||||
}
|
||||
|
||||
.action-block {
|
||||
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
|
||||
grid-template-columns: 2fr 1fr;
|
||||
display: grid;
|
||||
padding: $spacing-m $spacing-l;
|
||||
padding: $spacing-16 $spacing-24;
|
||||
line-height: inherit;
|
||||
grid-gap: $spacing-m;
|
||||
grid-gap: $spacing-16;
|
||||
|
||||
@include until($mobile) {
|
||||
@include stacked-grid();
|
||||
@@ -52,7 +52,7 @@
|
||||
.replication-actions-grid-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: $spacing-m 0;
|
||||
margin: $spacing-16 0;
|
||||
@include until($mobile) {
|
||||
display: block;
|
||||
}
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
.replication-actions-grid-item {
|
||||
flex-basis: 50%;
|
||||
padding: $spacing-s;
|
||||
padding: $spacing-12;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -25,14 +25,14 @@
|
||||
}
|
||||
|
||||
.toolbar-namespace-picker {
|
||||
padding: 0 $spacing-s;
|
||||
padding: 0 $spacing-12;
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin-right: $spacing-s;
|
||||
margin-right: $spacing-12;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ $dark-gray: #535f73;
|
||||
}
|
||||
}
|
||||
.calendar-title {
|
||||
padding: $size-10 $size-8;
|
||||
padding: $spacing-10 $spacing-12;
|
||||
}
|
||||
|
||||
.select-year {
|
||||
@@ -88,7 +88,7 @@ $dark-gray: #535f73;
|
||||
background-color: $ui-gray-700;
|
||||
color: $white;
|
||||
font-size: $size-8;
|
||||
padding: $size-9;
|
||||
padding: $spacing-10;
|
||||
border-radius: $radius-large;
|
||||
width: 141px;
|
||||
}
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
padding: 0 1.5rem;
|
||||
|
||||
> div {
|
||||
margin-top: $spacing-l;
|
||||
margin-top: $spacing-24;
|
||||
&:last-of-type {
|
||||
margin-bottom: $spacing-l;
|
||||
margin-bottom: $spacing-24;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
* {
|
||||
margin-left: $size-8;
|
||||
margin-left: $spacing-12;
|
||||
}
|
||||
|
||||
.confirm-action-text:not(.is-block) {
|
||||
@@ -90,7 +90,7 @@
|
||||
|
||||
@include until($mobile) {
|
||||
display: block;
|
||||
margin-bottom: $size-8;
|
||||
margin-bottom: $spacing-12;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -119,21 +119,21 @@
|
||||
|
||||
p {
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-left: $spacing-l;
|
||||
padding-left: $spacing-xxs;
|
||||
margin-left: $spacing-24;
|
||||
padding-left: $spacing-4;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.confirm-action-options {
|
||||
border-top: $light-border;
|
||||
display: flex;
|
||||
padding: $spacing-xxs;
|
||||
padding: $spacing-4;
|
||||
|
||||
.link {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
padding: $spacing-xs;
|
||||
padding: $spacing-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,31 +24,31 @@ $console-close-height: 35px;
|
||||
color: $white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
justify-content: flex-end;
|
||||
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;
|
||||
|
||||
pre,
|
||||
p {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 14px;
|
||||
font-size: $size-7;
|
||||
min-height: 2rem;
|
||||
padding: 0;
|
||||
|
||||
&:not(.console-ui-command):not(.CodeMirror-line) {
|
||||
padding-left: $size-4;
|
||||
padding-left: $spacing-20;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-hashi.CodeMirror {
|
||||
background-color: rgba($black, 0.5) !important;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-left: $size-4;
|
||||
padding: $size-8 $size-4;
|
||||
margin-left: $spacing-20;
|
||||
padding: $spacing-12 $spacing-20;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,11 +64,11 @@ $console-close-height: 35px;
|
||||
color: $white;
|
||||
flex: 1 1 auto;
|
||||
font-family: $family-monospace;
|
||||
font-size: 16px;
|
||||
font-size: $size-6;
|
||||
font-weight: $font-weight-bold;
|
||||
outline: none;
|
||||
padding: $size-10;
|
||||
margin-right: $spacing-xs;
|
||||
padding: $spacing-8;
|
||||
margin-right: $spacing-8;
|
||||
transition: background-color $speed;
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@ $console-close-height: 35px;
|
||||
.console-ui-output {
|
||||
transition: background-color $speed ease-in-out;
|
||||
will-change: background-color;
|
||||
padding-right: $size-2;
|
||||
padding-right: $spacing-36;
|
||||
position: relative;
|
||||
background-color: rgba(#000, 0);
|
||||
&:hover {
|
||||
@@ -89,7 +89,7 @@ $console-close-height: 35px;
|
||||
}
|
||||
|
||||
.console-ui-alert {
|
||||
margin-left: calc(#{$size-4} - 0.33rem);
|
||||
margin-left: calc(#{$spacing-20} - 0.33rem);
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
@@ -132,13 +132,13 @@ $console-close-height: 35px;
|
||||
|
||||
.console-close-button {
|
||||
position: sticky;
|
||||
top: $spacing-xs;
|
||||
top: $spacing-8;
|
||||
height: $console-close-height;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 210;
|
||||
|
||||
button {
|
||||
margin-right: $spacing-xs;
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
.control-group-header {
|
||||
box-shadow: 0 0 1px currentColor;
|
||||
padding: $size-9 $size-6;
|
||||
padding: $spacing-10 $spacing-14;
|
||||
background: $grey-lightest;
|
||||
color: $grey-dark;
|
||||
position: relative;
|
||||
@@ -32,5 +32,5 @@
|
||||
}
|
||||
|
||||
.control-group .authorizations {
|
||||
margin-top: $size-9;
|
||||
margin-top: $spacing-10;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
background: $ui-gray-010;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $spacing-xxl $spacing-s;
|
||||
padding: $spacing-48 $spacing-12;
|
||||
box-shadow: 0 -2px 0 -1px $ui-gray-300;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
background: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $spacing-xxl 0;
|
||||
padding: $spacing-48 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -32,21 +32,21 @@
|
||||
font-size: $size-4;
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
.empty-state-subTitle {
|
||||
font-size: $size-7;
|
||||
margin-top: -10px;
|
||||
padding-bottom: $spacing-s;
|
||||
padding-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.empty-state-message.has-border-bottom-light {
|
||||
padding-bottom: $spacing-s;
|
||||
padding-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.empty-state-actions {
|
||||
margin-top: $spacing-xs;
|
||||
margin-top: $spacing-8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -60,13 +60,13 @@
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-left: $spacing-s;
|
||||
margin-right: $spacing-s;
|
||||
margin-left: $spacing-12;
|
||||
margin-right: $spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state-icon > .hs-icon,
|
||||
.empty-state-icon > .flight-icon {
|
||||
float: left;
|
||||
margin-right: $spacing-xs;
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
.env-banner {
|
||||
align-self: center;
|
||||
border-radius: $size-1;
|
||||
border-radius: 3rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$blue,
|
||||
@@ -23,7 +23,7 @@
|
||||
.notification {
|
||||
background-color: transparent;
|
||||
line-height: 1.66;
|
||||
padding: 0 $spacing-s;
|
||||
padding: 0 $spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,15 +11,15 @@
|
||||
|
||||
.access-information {
|
||||
display: flex;
|
||||
padding: $size-8 0px;
|
||||
padding: $spacing-12 0px;
|
||||
font-size: $size-8;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: $radius;
|
||||
padding: $size-8;
|
||||
margin: $size-8 0;
|
||||
padding: $spacing-12;
|
||||
margin: $spacing-12 0;
|
||||
|
||||
&.is-active {
|
||||
box-shadow: 0 0 0 1px $grey-light;
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
.feature-box label {
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-left: $size-10;
|
||||
padding-left: $spacing-8;
|
||||
|
||||
&::before {
|
||||
top: 3px;
|
||||
@@ -48,8 +48,8 @@
|
||||
font-size: $size-8;
|
||||
color: $grey;
|
||||
line-height: 1.5;
|
||||
margin-left: $size-3;
|
||||
margin-top: $size-10;
|
||||
margin-left: $spacing-24;
|
||||
margin-top: $spacing-8;
|
||||
|
||||
li::before {
|
||||
// bullet
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
.global-flash {
|
||||
bottom: 0;
|
||||
left: $spacing-s;
|
||||
left: $spacing-12;
|
||||
margin: 10px;
|
||||
max-width: $drawer-width;
|
||||
position: fixed;
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
.flight-icon {
|
||||
&.flight-icon-display-inline {
|
||||
vertical-align: middle;
|
||||
margin-left: $spacing-xxs;
|
||||
margin-right: $spacing-xxs;
|
||||
margin-left: $spacing-4;
|
||||
margin-right: $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
&.thead {
|
||||
box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
|
||||
margin: 0;
|
||||
padding: 0 $size-6 0 0;
|
||||
padding: 0 $spacing-14 0 0;
|
||||
|
||||
.column {
|
||||
padding: 0.5rem 0.75rem;
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
.column {
|
||||
align-self: center;
|
||||
padding: $spacing-m;
|
||||
padding: $spacing-16;
|
||||
|
||||
&.info-table-row-edit {
|
||||
padding-bottom: 0.3rem;
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.hs-icon {
|
||||
margin-right: $size-11;
|
||||
margin-right: $spacing-4;
|
||||
}
|
||||
|
||||
.icon-true {
|
||||
@@ -73,7 +73,7 @@
|
||||
padding-left: 0;
|
||||
|
||||
@include until($mobile) {
|
||||
padding: $size-8 0 0;
|
||||
padding: $spacing-12 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
padding-right: 0;
|
||||
|
||||
@include until($mobile) {
|
||||
padding: 0 0 $size-8;
|
||||
padding: 0 0 $spacing-12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,5 +10,5 @@
|
||||
padding: 0;
|
||||
}
|
||||
.kmip-role-allowed-operations .field {
|
||||
margin-bottom: $spacing-xxs;
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.secondaries-table {
|
||||
margin-bottom: $spacing-s;
|
||||
margin-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
||||
@@ -41,10 +41,10 @@ a.list-item-row,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
margin-left: #{-$size-9} !important;
|
||||
margin-right: #{-$size-9} !important;
|
||||
padding-left: $size-9;
|
||||
padding-right: $size-9;
|
||||
margin-left: #{-$spacing-10} !important;
|
||||
margin-right: #{-$spacing-10} !important;
|
||||
padding-left: $spacing-10;
|
||||
padding-right: $spacing-10;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow,
|
||||
$box-shadow-middle;
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
}
|
||||
|
||||
.has-label .masked-input {
|
||||
padding-top: $spacing-s;
|
||||
padding-top: $spacing-12;
|
||||
}
|
||||
|
||||
.has-padding {
|
||||
padding: $size-10 $size-8;
|
||||
padding: $spacing-8 $spacing-12;
|
||||
}
|
||||
|
||||
// we want to style the boxes the same everywhere so they
|
||||
@@ -44,12 +44,12 @@
|
||||
font-size: 1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: $spacing-s;
|
||||
padding-left: $spacing-12;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button.masked-input-toggle {
|
||||
min-width: $spacing-xl;
|
||||
min-width: $spacing-36;
|
||||
border-left: 0;
|
||||
color: $grey;
|
||||
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
|
||||
@@ -64,7 +64,7 @@
|
||||
background: transparent;
|
||||
height: auto;
|
||||
line-height: 1rem;
|
||||
min-width: $spacing-l;
|
||||
min-width: $spacing-24;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: $grey-light;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
position: relative;
|
||||
color: var(--token-color-palette-neutral-300);
|
||||
display: flex;
|
||||
padding: $spacing-xxs $spacing-xs;
|
||||
padding: $spacing-4 $spacing-8;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
flex: 1 1 auto;
|
||||
height: 2rem;
|
||||
justify-content: space-between;
|
||||
margin-right: $spacing-xxs;
|
||||
margin-right: $spacing-4;
|
||||
}
|
||||
|
||||
.namespace-picker-content {
|
||||
@@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.namespace-header-bar {
|
||||
padding: $size-11 $size-9;
|
||||
padding: $spacing-4 $spacing-10;
|
||||
border-bottom: 1px solid rgba($black, 0.1);
|
||||
font-weight: $font-weight-semibold;
|
||||
min-height: 32px;
|
||||
@@ -72,12 +72,12 @@
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
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 {
|
||||
margin-top: $size-8;
|
||||
margin-right: -$size-10;
|
||||
margin-top: $spacing-12;
|
||||
margin-right: -$spacing-8;
|
||||
|
||||
svg {
|
||||
margin-top: 2px;
|
||||
@@ -86,7 +86,7 @@
|
||||
}
|
||||
|
||||
.leaf-panel {
|
||||
padding: $size-11 $size-9;
|
||||
padding: $spacing-4 $spacing-10;
|
||||
transition: transform ease-in-out 250ms;
|
||||
will-change: transform;
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
|
||||
.namespace-reminder {
|
||||
color: $grey;
|
||||
margin: 0 0 $size-6 0;
|
||||
margin: 0 0 $spacing-14 0;
|
||||
}
|
||||
|
||||
.console-reminder p.namespace-reminder {
|
||||
color: $grey;
|
||||
font-family: $family-monospace;
|
||||
font-size: $size-8;
|
||||
margin: $spacing-xxs 0 0;
|
||||
margin: $spacing-4 0 0;
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
*/
|
||||
|
||||
.overview-card {
|
||||
padding: $spacing-l;
|
||||
padding: $spacing-24;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
*/
|
||||
|
||||
.page-header {
|
||||
padding-bottom: $size-10;
|
||||
padding-top: $size-4;
|
||||
padding-bottom: $spacing-4;
|
||||
padding-top: $spacing-20;
|
||||
|
||||
.level {
|
||||
align-items: flex-end;
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: $size-2;
|
||||
margin-top: $spacing-36;
|
||||
}
|
||||
|
||||
.title-with-icon {
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb + .level .title {
|
||||
margin-top: $size-4;
|
||||
margin-top: $spacing-20;
|
||||
}
|
||||
.title .icon {
|
||||
height: auto;
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: $size-11 0;
|
||||
padding: $spacing-4 0;
|
||||
}
|
||||
|
||||
button.link,
|
||||
@@ -42,7 +42,7 @@
|
||||
height: auto;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $size-9 $size-8;
|
||||
padding: $spacing-10 $spacing-12;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
@@ -95,12 +95,12 @@
|
||||
font-weight: $font-weight-normal;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
padding: $size-10 $size-8 0;
|
||||
padding: $spacing-8 $spacing-12 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: $size-10 $size-8;
|
||||
padding: $spacing-8 $spacing-12;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
.popup-menu-content p {
|
||||
box-shadow: none;
|
||||
padding-top: $size-10;
|
||||
padding-top: $spacing-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
|
||||
.radio-card-selector {
|
||||
display: flex;
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
.radio-card {
|
||||
box-shadow: $box-shadow-low;
|
||||
flex: 1 1 25%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: $spacing-xs $spacing-m;
|
||||
margin: $spacing-8 $spacing-16;
|
||||
border: $base-border;
|
||||
border-radius: $radius;
|
||||
transition: all ease-in-out $speed;
|
||||
@@ -67,19 +67,19 @@
|
||||
.radio-card-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: $spacing-m;
|
||||
padding: $spacing-16;
|
||||
}
|
||||
.radio-card-icon {
|
||||
color: $ui-gray-300;
|
||||
}
|
||||
.radio-card-message {
|
||||
margin: $spacing-xxs;
|
||||
margin: $spacing-4;
|
||||
}
|
||||
|
||||
.radio-card-message-title {
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $size-7;
|
||||
margin-bottom: $spacing-xxs;
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
.radio-card-message-body {
|
||||
line-height: 1.2;
|
||||
@@ -91,7 +91,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: $ui-gray-050;
|
||||
padding: $spacing-xs;
|
||||
padding: $spacing-8;
|
||||
}
|
||||
|
||||
.is-selected {
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.raft-join .box.is-fullwidth {
|
||||
padding-top: $spacing-s;
|
||||
padding-bottom: $spacing-s;
|
||||
padding-top: $spacing-12;
|
||||
padding-bottom: $spacing-12;
|
||||
}
|
||||
.raft-join-unseal {
|
||||
color: $orange;
|
||||
|
||||
@@ -29,5 +29,5 @@
|
||||
}
|
||||
}
|
||||
.regex-group-value {
|
||||
margin-right: $spacing-m;
|
||||
margin-right: $spacing-16;
|
||||
}
|
||||
|
||||
@@ -23,16 +23,16 @@
|
||||
}
|
||||
|
||||
.title.is-6 {
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
.reindexing-alert,
|
||||
.syncing-alert {
|
||||
margin-top: $spacing-xl;
|
||||
margin-top: $spacing-36;
|
||||
}
|
||||
|
||||
.selectable-card-container {
|
||||
margin-top: $spacing-xl;
|
||||
margin-top: $spacing-36;
|
||||
display: grid;
|
||||
|
||||
&.primary,
|
||||
@@ -47,15 +47,15 @@
|
||||
|
||||
&.secondary {
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
grid-gap: $spacing-xl;
|
||||
grid-gap: $spacing-36;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: grid;
|
||||
grid-gap: $spacing-s;
|
||||
grid-gap: $spacing-12;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 0.2fr 0.2fr 0.2fr;
|
||||
padding: $spacing-l;
|
||||
padding: $spacing-24;
|
||||
line-height: 1.5;
|
||||
|
||||
&.summary {
|
||||
@@ -120,11 +120,11 @@
|
||||
}
|
||||
|
||||
&.summary {
|
||||
margin-bottom: $spacing-xl;
|
||||
margin-bottom: $spacing-36;
|
||||
}
|
||||
}
|
||||
.summary-state {
|
||||
padding-bottom: $spacing-xl;
|
||||
padding-bottom: $spacing-36;
|
||||
border-bottom: 1px solid rgba($grey-dark, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
flex-shrink: 1;
|
||||
|
||||
.title {
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
margin-bottom: $spacing-m;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.float-right {
|
||||
margin: $spacing-s 0 $spacing-l 0;
|
||||
margin: $spacing-12 0 $spacing-24 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,12 +44,12 @@
|
||||
|
||||
&::after {
|
||||
background: $white;
|
||||
bottom: $spacing-xxs;
|
||||
bottom: $spacing-4;
|
||||
content: '';
|
||||
left: $spacing-xxs + $spacing-l;
|
||||
left: $spacing-4 + $spacing-24;
|
||||
position: absolute;
|
||||
right: $spacing-xxs;
|
||||
top: $spacing-xxs;
|
||||
right: $spacing-4;
|
||||
top: $spacing-4;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
@@ -57,16 +57,16 @@
|
||||
.ember-power-select-search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: $spacing-xxs $spacing-s;
|
||||
padding-left: $spacing-xxs + $spacing-l;
|
||||
padding: $spacing-4 $spacing-12;
|
||||
padding-left: $spacing-4 + $spacing-24;
|
||||
}
|
||||
|
||||
div > .ember-power-select-options {
|
||||
background: $white;
|
||||
border: $base-border;
|
||||
box-shadow: $box-shadow-middle;
|
||||
margin: -4px $spacing-xs 0;
|
||||
padding: $spacing-xxs 0;
|
||||
margin: -4px $spacing-8 0;
|
||||
padding: $spacing-4 0;
|
||||
|
||||
.ember-power-select-option,
|
||||
.ember-power-select-option[aria-current='true'] {
|
||||
@@ -97,7 +97,7 @@ div > .ember-power-select-options {
|
||||
.search-select-list-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: $spacing-xxs;
|
||||
padding: $spacing-4;
|
||||
justify-content: space-between;
|
||||
border-bottom: $light-border;
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
&.small-card {
|
||||
width: 7rem;
|
||||
width: 6.5rem;
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
.shamir-progress {
|
||||
.shamir-progress-progress {
|
||||
display: inline-block;
|
||||
margin-top: $size-10;
|
||||
margin-right: $size-8;
|
||||
margin-top: $spacing-8;
|
||||
margin-right: $spacing-12;
|
||||
}
|
||||
.progress {
|
||||
box-shadow: 0 0 0 4px $ui-gray-050;
|
||||
margin-top: $size-10;
|
||||
margin-top: $spacing-8;
|
||||
min-width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
text-transform: unset;
|
||||
}
|
||||
.token-alert {
|
||||
padding: $spacing-xs;
|
||||
padding: $spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-action-message p {
|
||||
padding-top: $size-10;
|
||||
padding-top: $spacing-4;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
*/
|
||||
|
||||
.splash-page-logo {
|
||||
padding: $spacing-xs $spacing-s $spacing-xs $spacing-l;
|
||||
padding: $spacing-8 $spacing-12 $spacing-8 $spacing-24;
|
||||
|
||||
@include from($mobile) {
|
||||
padding-left: $spacing-xs;
|
||||
padding-left: $spacing-8;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -16,15 +16,15 @@
|
||||
width: 72px;
|
||||
|
||||
@include from($mobile) {
|
||||
margin-left: $spacing-xs;
|
||||
margin-left: $spacing-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.splash-page-container {
|
||||
margin: $size-2 0;
|
||||
margin: $spacing-36 0;
|
||||
}
|
||||
|
||||
.splash-page-header {
|
||||
padding: $size-6 0;
|
||||
padding: $spacing-14 0;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
.stat-label {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-bottom: $spacing-xxs;
|
||||
margin-bottom: $spacing-4;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
@@ -26,7 +26,7 @@
|
||||
.stat-value {
|
||||
font-size: $size-3;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-s;
|
||||
margin-top: $spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
.stat-value {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-s;
|
||||
margin-top: $spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
.stat-value {
|
||||
font-size: $size-3;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-xxs;
|
||||
margin-top: $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
.stat-value {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-xxs;
|
||||
margin-top: $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $grey;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $size-6 $size-8 $size-8;
|
||||
padding: $spacing-14 $spacing-12 $spacing-12;
|
||||
text-decoration: none;
|
||||
transition: background-color $speed, border-color $speed;
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
&::before,
|
||||
&::after {
|
||||
right: auto;
|
||||
left: $spacing-s;
|
||||
left: $spacing-12;
|
||||
}
|
||||
}
|
||||
.ember-basic-dropdown-content--right.tool-tip {
|
||||
|
||||
@@ -21,41 +21,41 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: $spacing-xxs;
|
||||
width: $spacing-4;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
min-width: 190px;
|
||||
min-width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
padding: $spacing-xs;
|
||||
padding: $spacing-8;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.toolbar-scroller {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 44px;
|
||||
height: 3rem;
|
||||
justify-content: space-between;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
|
||||
@include from($mobile) {
|
||||
padding: 0 $spacing-xxs;
|
||||
padding: 0 $spacing-4;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
border-bottom: $base-border;
|
||||
height: $spacing-xxs;
|
||||
height: $spacing-4;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $ui-gray-300;
|
||||
border-radius: $spacing-xxs;
|
||||
border-radius: $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
.toolbar-filters + .toolbar-actions {
|
||||
@include until($mobile) {
|
||||
border-left: $base-border;
|
||||
margin-left: $spacing-xs;
|
||||
padding-left: $spacing-xs;
|
||||
margin-left: $spacing-8;
|
||||
padding-left: $spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
|
||||
&.popup-menu-trigger {
|
||||
height: 2.5rem;
|
||||
padding: $size-10 $size-8;
|
||||
padding: $spacing-8 $spacing-12;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@@ -133,6 +133,6 @@ a.disabled.toolbar-link {
|
||||
.toolbar-separator {
|
||||
border-right: $light-border;
|
||||
height: 32px;
|
||||
margin: 0 $spacing-xs;
|
||||
margin: 0 $spacing-8;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -15,5 +15,5 @@
|
||||
font-family: $family-monospace;
|
||||
}
|
||||
.transform-decode-formats:not(:last-child) {
|
||||
margin-bottom: $spacing-s;
|
||||
margin-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
grid-template-rows: 1fr;
|
||||
align-content: start;
|
||||
grid-gap: 2rem;
|
||||
margin-top: $spacing-l;
|
||||
margin-top: $spacing-24;
|
||||
}
|
||||
|
||||
.transit-card {
|
||||
@@ -17,7 +17,7 @@
|
||||
box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
|
||||
display: grid;
|
||||
grid-template-columns: 0.45fr 2fr;
|
||||
padding: $spacing-m;
|
||||
padding: $spacing-16;
|
||||
border: none;
|
||||
|
||||
.transit-icon {
|
||||
@@ -33,7 +33,7 @@
|
||||
.title {
|
||||
color: $grey;
|
||||
font-size: $size-7;
|
||||
margin-bottom: $spacing-xxs;
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
.ui-wizard {
|
||||
z-index: 300;
|
||||
padding: $size-5;
|
||||
padding: $spacing-18;
|
||||
width: $drawer-width;
|
||||
background: $white;
|
||||
box-shadow: $box-shadow, $box-shadow-highest;
|
||||
@@ -56,20 +56,20 @@
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
margin-top: $size-5;
|
||||
margin-top: $spacing-18;
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: $ui-gray-050;
|
||||
margin: $size-8 0;
|
||||
margin: $spacing-12 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
border-bottom: $light-border;
|
||||
padding: 0 $size-4 $size-8 0;
|
||||
margin: $size-4 0;
|
||||
padding: 0 $spacing-20 $spacing-12 0;
|
||||
margin: $spacing-20 0;
|
||||
position: relative;
|
||||
|
||||
@include until($mobile) {
|
||||
@@ -93,7 +93,7 @@
|
||||
box-shadow: $box-shadow-middle;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding-bottom: $size-11;
|
||||
padding-bottom: $spacing-4;
|
||||
position: fixed;
|
||||
right: $size-8;
|
||||
top: calc(#{4rem} + #{$size-8});
|
||||
@@ -113,7 +113,7 @@
|
||||
|
||||
.wizard-header {
|
||||
border-bottom: 0;
|
||||
margin: 0 0 $size-10;
|
||||
margin: 0 0 $spacing-8;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -131,8 +131,8 @@
|
||||
.wizard-divider-box {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
margin: $size-8 0 0;
|
||||
padding: 0 $size-8;
|
||||
margin: $spacing-12 0 0;
|
||||
padding: 0 $spacing-12;
|
||||
border-top: solid 1px $white;
|
||||
border-image: linear-gradient(to right, $grey-dark, $grey) 1;
|
||||
border-width: 1px 0 0;
|
||||
@@ -143,21 +143,21 @@
|
||||
}
|
||||
|
||||
.wizard-section:last-of-type {
|
||||
margin-bottom: $size-5;
|
||||
margin-bottom: $spacing-18;
|
||||
}
|
||||
|
||||
.wizard-section button:not(:last-of-type) {
|
||||
margin-bottom: $size-10;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
.wizard-details {
|
||||
padding-top: $size-4;
|
||||
margin-top: $size-4;
|
||||
padding-top: $spacing-20;
|
||||
margin-top: $spacing-20;
|
||||
border-top: 1px solid $grey-light;
|
||||
}
|
||||
|
||||
.wizard-instructions {
|
||||
margin: $size-4 0;
|
||||
margin: $spacing-20 0;
|
||||
}
|
||||
|
||||
.selection-summary {
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $spacing-s;
|
||||
padding: $spacing-12;
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
@@ -41,7 +41,6 @@
|
||||
@import './core/message';
|
||||
@import './core/progress';
|
||||
@import './core/select';
|
||||
@import './core/switch';
|
||||
@import './core/tag';
|
||||
@import './core/title';
|
||||
@import './core/toggle';
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
|
||||
color: $ui-gray-900;
|
||||
display: block;
|
||||
padding: $size-5;
|
||||
padding: $spacing-18;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -35,6 +35,6 @@
|
||||
&.has-container {
|
||||
box-shadow: 0 4px 4px rgba($black, 0.25);
|
||||
border: $base-border;
|
||||
padding: $spacing-l;
|
||||
padding: $spacing-24;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
&.is-compact {
|
||||
height: 2rem;
|
||||
padding: $size-11 $size-8;
|
||||
padding: $spacing-4 $spacing-12;
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
@@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
&.is-icon {
|
||||
padding: 0.25rem $size-3;
|
||||
padding: 0.25rem $spacing-24;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
@@ -255,8 +255,8 @@
|
||||
.hs-icon {
|
||||
&,
|
||||
&:first-child:last-child {
|
||||
margin-left: $spacing-xxs;
|
||||
margin-right: -$spacing-xxs;
|
||||
margin-left: $spacing-4;
|
||||
margin-right: -$spacing-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -264,7 +264,7 @@
|
||||
|
||||
.button.icon {
|
||||
box-sizing: border-box;
|
||||
padding: 0 $size-11;
|
||||
padding: 0 $spacing-4;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&,
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
.chart-wrapper {
|
||||
border: $light-border;
|
||||
border-radius: $radius-large;
|
||||
padding: $spacing-s $spacing-l;
|
||||
margin-bottom: $spacing-m;
|
||||
padding: $spacing-12 $spacing-24;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
// GRID LAYOUT //
|
||||
@@ -97,8 +97,8 @@
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 5;
|
||||
padding-bottom: $spacing-xl;
|
||||
margin-bottom: $spacing-s;
|
||||
padding-bottom: $spacing-36;
|
||||
margin-bottom: $spacing-12;
|
||||
box-shadow: inset 0 -1px 0 $ui-gray-200;
|
||||
|
||||
> h2 {
|
||||
@@ -114,8 +114,8 @@
|
||||
grid-column-end: 8;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 5;
|
||||
padding-bottom: $spacing-xl;
|
||||
margin-bottom: $spacing-s;
|
||||
padding-bottom: $spacing-36;
|
||||
margin-bottom: $spacing-12;
|
||||
box-shadow: inset 0 -1px 0 $ui-gray-200;
|
||||
|
||||
> h2 {
|
||||
@@ -196,29 +196,29 @@
|
||||
h2.chart-title {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $size-5;
|
||||
line-height: $spacing-l;
|
||||
margin-bottom: $spacing-xxs;
|
||||
line-height: $spacing-24;
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
p.chart-description {
|
||||
color: $ui-gray-700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
p.chart-subtext {
|
||||
color: $ui-gray-500;
|
||||
font-size: $size-8;
|
||||
line-height: 16px;
|
||||
margin-top: $spacing-xs;
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
h3.data-details {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $size-8;
|
||||
line-height: 14px;
|
||||
margin-bottom: $spacing-xs;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
p.data-details {
|
||||
@@ -245,8 +245,8 @@ p.data-details {
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
padding-left: $spacing-xs;
|
||||
padding-right: $spacing-xl;
|
||||
padding-left: $spacing-8;
|
||||
padding-right: $spacing-36;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@@ -269,7 +269,7 @@ p.data-details {
|
||||
width: fit-content;
|
||||
}
|
||||
.horizontal-chart {
|
||||
padding: $spacing-s;
|
||||
padding: $spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -324,16 +324,16 @@ p.data-details {
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
margin-left: $spacing-xxl;
|
||||
margin-right: $spacing-xxl;
|
||||
margin-left: $spacing-48;
|
||||
margin-right: $spacing-48;
|
||||
}
|
||||
.chart-container-right {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 4;
|
||||
margin-left: $spacing-xxl;
|
||||
margin-right: $spacing-xxl;
|
||||
margin-left: $spacing-48;
|
||||
margin-right: $spacing-48;
|
||||
}
|
||||
|
||||
.legend-center {
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
|
||||
// b-checkbox styling
|
||||
.b-checkbox {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
|
||||
// Columns (plural)
|
||||
.columns {
|
||||
margin-left: -$size-9;
|
||||
margin-right: -$size-9;
|
||||
margin-top: -$size-9;
|
||||
margin-left: -$spacing-10;
|
||||
margin-right: -$spacing-10;
|
||||
margin-top: -$spacing-10;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -$size-9;
|
||||
margin-bottom: -$spacing-10;
|
||||
}
|
||||
|
||||
&.is-centered {
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
&.is-gapless:not(:last-child) {
|
||||
margin-bottom: $size-4;
|
||||
margin-bottom: $spacing-20;
|
||||
}
|
||||
|
||||
&.is-gapless:last-child {
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 $size-4;
|
||||
padding: 0 $spacing-20;
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
|
||||
@@ -80,7 +80,7 @@ object {
|
||||
|
||||
html {
|
||||
background-color: $white;
|
||||
font-size: 14px;
|
||||
font-size: $base-font-size; // 16px
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-width: 300px;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
&: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
|
||||
@@ -110,7 +110,7 @@ fieldset.form-fieldset {
|
||||
flex-shrink: 1;
|
||||
|
||||
> .field:not(:last-child) {
|
||||
margin-right: $size-9;
|
||||
margin-right: $spacing-10;
|
||||
}
|
||||
.field:not(.is-narrow) {
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
@extend .is-transparent;
|
||||
color: $grey;
|
||||
position: absolute;
|
||||
right: $spacing-xs;
|
||||
right: $spacing-8;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
.footer {
|
||||
background-color: transparent;
|
||||
border-top: $base-border;
|
||||
padding: $size-3 1.5rem;
|
||||
padding: $spacing-24 $spacing-20;
|
||||
margin-top: auto;
|
||||
|
||||
span:not(:first-child) {
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
padding-bottom: calc(0.375em - 1px);
|
||||
padding-left: $size-8;
|
||||
padding-right: $size-8;
|
||||
padding-left: $spacing-12;
|
||||
padding-right: $spacing-12;
|
||||
padding-top: calc(0.375em - 1px);
|
||||
width: 100%;
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
|
||||
// custom input
|
||||
.input-hint {
|
||||
padding: 0 $size-9;
|
||||
padding: 0 $spacing-10;
|
||||
font-size: $size-8;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
font-weight: $font-weight-bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xxs;
|
||||
gap: $spacing-4;
|
||||
width: min-content;
|
||||
min-width: 100%;
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.level.is-mobile .level-item:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-right: $size-9;
|
||||
margin-right: $spacing-10;
|
||||
}
|
||||
|
||||
.level.is-mobile .level-item:not(.is-narrow) {
|
||||
@@ -92,6 +92,6 @@
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.level-item:not(:last-child) {
|
||||
margin-bottom: $size-9;
|
||||
margin-bottom: $spacing-10;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
.list-header {
|
||||
margin: $size-9 $size-9 0;
|
||||
margin: $spacing-10 $spacing-10 0;
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
@@ -26,5 +26,5 @@
|
||||
|
||||
ul.bullet {
|
||||
list-style: disc;
|
||||
padding-left: $spacing-m;
|
||||
padding-left: $spacing-16;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
.menu a {
|
||||
display: block;
|
||||
padding: $size-10 $size-9;
|
||||
padding: $spacing-8 $spacing-10;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,17 +11,17 @@
|
||||
.message {
|
||||
background: $blue-010;
|
||||
border: 1px solid $blue-100;
|
||||
margin-bottom: $spacing-s;
|
||||
padding: $spacing-s $spacing-m $spacing-m $spacing-s;
|
||||
margin-bottom: $spacing-12;
|
||||
padding: $spacing-12 $spacing-16 $spacing-16 $spacing-12;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $size-4;
|
||||
margin-bottom: $spacing-20;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
color: $blue;
|
||||
margin-right: $spacing-xs;
|
||||
margin-right: $spacing-8;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
@@ -34,7 +34,7 @@
|
||||
.message-body {
|
||||
border: 0;
|
||||
padding: 1em 1.25em;
|
||||
margin-top: $spacing-xxs;
|
||||
margin-top: $spacing-4;
|
||||
}
|
||||
|
||||
// message types, see message-types.js
|
||||
|
||||
@@ -21,8 +21,8 @@ select {
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding-bottom: calc(0.375em - 1px);
|
||||
padding-left: $size-8;
|
||||
padding-right: $size-8;
|
||||
padding-left: $spacing-10;
|
||||
padding-right: $spacing-10;
|
||||
padding-top: calc(0.375em - 1px);
|
||||
text-rendering: auto !important;
|
||||
|
||||
@@ -44,7 +44,7 @@ select {
|
||||
}
|
||||
|
||||
.select select:not([multiple]) {
|
||||
padding-right: $size-2;
|
||||
padding-right: $spacing-36;
|
||||
}
|
||||
|
||||
.select select[disabled] {
|
||||
@@ -76,7 +76,7 @@ select {
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: $spacing-xs;
|
||||
right: $spacing-8;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -16,8 +16,8 @@
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
margin-right: $size-10;
|
||||
padding: 0 $size-10;
|
||||
margin-right: $spacing-8;
|
||||
padding: 0 $spacing-8;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
&.has-extra-padding {
|
||||
padding: $size-11 $spacing-xxs;
|
||||
padding: $spacing-4 $spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
}
|
||||
|
||||
.form-section .title {
|
||||
margin-bottom: $spacing-s;
|
||||
margin-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.is-subtitle-gray {
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
&.is-small {
|
||||
+ label {
|
||||
font-size: $size-7;
|
||||
padding-left: $size-8 * 2.5;
|
||||
padding-left: $spacing-32;
|
||||
margin: 0 0.25rem;
|
||||
&::before {
|
||||
top: calc($size-8 / 5);
|
||||
@@ -79,9 +79,9 @@
|
||||
width: $size-8 * 2;
|
||||
}
|
||||
&::after {
|
||||
width: $size-8 * 0.8;
|
||||
height: $size-8 * 0.8;
|
||||
transform: translateX(0.15rem);
|
||||
width: $size-8 * 0.9;
|
||||
height: $size-8 * 0.9;
|
||||
transform: translateX(0.05rem);
|
||||
left: 0;
|
||||
top: calc($size-8 / 4);
|
||||
}
|
||||
@@ -91,11 +91,6 @@
|
||||
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
|
||||
}
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
width: 4.5rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
}
|
||||
.toggle[type='checkbox'].is-small + label::after {
|
||||
will-change: left;
|
||||
|
||||
@@ -21,11 +21,11 @@
|
||||
}
|
||||
|
||||
.has-gap-m {
|
||||
gap: $spacing-m;
|
||||
gap: $spacing-16;
|
||||
}
|
||||
|
||||
.has-gap-l {
|
||||
gap: $spacing-l;
|
||||
gap: $spacing-24;
|
||||
}
|
||||
|
||||
// Alignment of the items
|
||||
@@ -66,7 +66,7 @@
|
||||
justify-content: flex-start;
|
||||
|
||||
&.has-gap {
|
||||
gap: $spacing-m;
|
||||
gap: $spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,11 +118,11 @@
|
||||
}
|
||||
|
||||
&.row-gap-8 {
|
||||
row-gap: $spacing-xs;
|
||||
row-gap: $spacing-8;
|
||||
}
|
||||
|
||||
&.column-gap-16 {
|
||||
column-gap: $spacing-m;
|
||||
column-gap: $spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
.is-hint {
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
padding: $size-8 0;
|
||||
padding: $spacing-12 0;
|
||||
}
|
||||
|
||||
.is-optional {
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
.top-xxs {
|
||||
top: $spacing-xxs;
|
||||
top: $spacing-4;
|
||||
}
|
||||
|
||||
// visibility
|
||||
|
||||
@@ -3,86 +3,82 @@
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
/* 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.
|
||||
*/
|
||||
/* Helpers that define margin and padding in pixels */
|
||||
|
||||
.is-paddingless {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.has-short-padding {
|
||||
padding: $size-11 $size-5;
|
||||
padding: $spacing-4 $spacing-18;
|
||||
}
|
||||
|
||||
.has-tall-padding {
|
||||
padding: $size-2;
|
||||
padding: $spacing-36;
|
||||
}
|
||||
|
||||
.has-side-padding-s {
|
||||
padding-left: $spacing-s;
|
||||
padding-right: $spacing-s;
|
||||
padding-left: $spacing-12;
|
||||
padding-right: $spacing-12;
|
||||
}
|
||||
|
||||
.has-padding-s {
|
||||
padding: $spacing-s;
|
||||
padding: $spacing-12;
|
||||
}
|
||||
|
||||
.has-padding-xxs {
|
||||
padding: $spacing-xxs;
|
||||
padding: $spacing-4;
|
||||
}
|
||||
|
||||
.has-padding-m {
|
||||
padding: $spacing-m;
|
||||
padding: $spacing-16;
|
||||
}
|
||||
.has-padding-l {
|
||||
padding: $spacing-l;
|
||||
padding: $spacing-24;
|
||||
}
|
||||
|
||||
.has-padding-l {
|
||||
padding: $spacing-l;
|
||||
padding: $spacing-24;
|
||||
}
|
||||
|
||||
.has-bottom-padding-s {
|
||||
padding-bottom: $spacing-s;
|
||||
padding-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.has-bottom-padding-m {
|
||||
padding-bottom: $spacing-m;
|
||||
padding-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
.has-bottom-padding-l {
|
||||
padding-bottom: $spacing-l;
|
||||
padding-bottom: $spacing-24;
|
||||
}
|
||||
|
||||
.has-top-padding-s {
|
||||
padding-top: $spacing-s;
|
||||
padding-top: $spacing-12;
|
||||
}
|
||||
|
||||
.has-top-padding-m {
|
||||
padding-top: $spacing-m;
|
||||
padding-top: $spacing-16;
|
||||
}
|
||||
|
||||
.has-top-padding-l {
|
||||
padding-top: $spacing-l;
|
||||
padding-top: $spacing-24;
|
||||
}
|
||||
|
||||
.has-left-padding-xs {
|
||||
padding-left: $spacing-xs;
|
||||
padding-left: $spacing-8;
|
||||
}
|
||||
|
||||
.has-left-padding-s {
|
||||
padding-left: $spacing-s;
|
||||
padding-left: $spacing-12;
|
||||
}
|
||||
|
||||
.has-left-padding-l {
|
||||
padding-left: $spacing-l;
|
||||
padding-left: $spacing-24;
|
||||
}
|
||||
|
||||
.has-top-padding-xxl {
|
||||
padding-top: $spacing-xxl;
|
||||
padding-top: $spacing-48;
|
||||
}
|
||||
|
||||
// All Margin helpers
|
||||
@@ -91,118 +87,118 @@
|
||||
}
|
||||
|
||||
.has-top-bottom-margin {
|
||||
margin: $size-5 0rem;
|
||||
margin: $spacing-18 0rem;
|
||||
}
|
||||
|
||||
.has-top-bottom-margin-xxs {
|
||||
margin: $spacing-xxs 0;
|
||||
margin: $spacing-4 0;
|
||||
}
|
||||
|
||||
.has-top-bottom-margin-negative-m {
|
||||
margin-top: -$spacing-m;
|
||||
margin-bottom: -$spacing-m;
|
||||
margin-top: -$spacing-16;
|
||||
margin-bottom: -$spacing-16;
|
||||
}
|
||||
|
||||
.has-top-margin-negative-xxl {
|
||||
margin-top: -$spacing-xxl;
|
||||
margin-top: -$spacing-48;
|
||||
}
|
||||
|
||||
.has-right-margin-xxs {
|
||||
margin-right: $spacing-xxs;
|
||||
margin-right: $spacing-4;
|
||||
}
|
||||
|
||||
.has-left-margin-xxs {
|
||||
margin-left: $spacing-xxs;
|
||||
margin-left: $spacing-4;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xxs {
|
||||
margin-bottom: $spacing-xxs !important;
|
||||
margin-bottom: $spacing-4 !important;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xs {
|
||||
margin-bottom: $spacing-xs !important;
|
||||
margin-bottom: $spacing-8 !important;
|
||||
}
|
||||
|
||||
.has-bottom-margin-s {
|
||||
margin-bottom: $spacing-s;
|
||||
margin-bottom: $spacing-12;
|
||||
}
|
||||
|
||||
.has-bottom-margin-m {
|
||||
margin-bottom: $spacing-m;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
.has-bottom-margin-l {
|
||||
margin-bottom: $spacing-l;
|
||||
margin-bottom: $spacing-24;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xl {
|
||||
margin-bottom: $spacing-xl;
|
||||
margin-bottom: $spacing-36;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xxl {
|
||||
margin-bottom: $spacing-xxl;
|
||||
margin-bottom: $spacing-48;
|
||||
}
|
||||
|
||||
.has-top-margin-xxs {
|
||||
margin-top: $spacing-xxs;
|
||||
margin-top: $spacing-4;
|
||||
}
|
||||
|
||||
.has-top-margin-s {
|
||||
margin-top: $spacing-s;
|
||||
margin-top: $spacing-12;
|
||||
}
|
||||
|
||||
.has-top-margin-xs {
|
||||
margin-top: $spacing-xs;
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
.has-top-margin-m {
|
||||
margin-top: $spacing-m;
|
||||
margin-top: $spacing-16;
|
||||
}
|
||||
|
||||
.has-top-margin-l {
|
||||
margin-top: $spacing-l;
|
||||
margin-top: $spacing-24;
|
||||
}
|
||||
|
||||
.has-top-margin-xl {
|
||||
margin-top: $spacing-xl;
|
||||
margin-top: $spacing-36;
|
||||
}
|
||||
|
||||
.has-top-margin-xxl {
|
||||
margin-top: $spacing-xxl;
|
||||
margin-top: $spacing-48;
|
||||
}
|
||||
|
||||
.has-top-margin-negative-s {
|
||||
margin-top: (-1 * $spacing-s);
|
||||
margin-top: (-1 * $spacing-12);
|
||||
}
|
||||
|
||||
.has-left-margin-xxs {
|
||||
margin-left: $spacing-xxs;
|
||||
margin-left: $spacing-4;
|
||||
}
|
||||
|
||||
.has-left-margin-xs {
|
||||
margin-left: $spacing-xs;
|
||||
margin-left: $spacing-8;
|
||||
}
|
||||
|
||||
.has-left-margin-s {
|
||||
margin-left: $spacing-s;
|
||||
margin-left: $spacing-12;
|
||||
}
|
||||
|
||||
.has-left-margin-m {
|
||||
margin-left: $spacing-m;
|
||||
margin-left: $spacing-16;
|
||||
}
|
||||
|
||||
.has-left-margin-l {
|
||||
margin-left: $spacing-l;
|
||||
margin-left: $spacing-24;
|
||||
}
|
||||
|
||||
.has-left-margin-xl {
|
||||
margin-left: $spacing-xl;
|
||||
margin-left: $spacing-36;
|
||||
}
|
||||
|
||||
.has-right-margin-m {
|
||||
margin-right: $spacing-m;
|
||||
margin-right: $spacing-16;
|
||||
}
|
||||
|
||||
.has-right-margin-l {
|
||||
margin-right: $spacing-l;
|
||||
margin-right: $spacing-24;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
* 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
|
||||
.is-size-4 {
|
||||
|
||||
@@ -3,27 +3,36 @@
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
/* General sizing in rem values used largely for text sizing.*/
|
||||
$size-1: 3rem; // 48px, same as $spacing-xxl
|
||||
$base-font-size: 16px;
|
||||
|
||||
/*
|
||||
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-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-6: 1rem; // 16px same as $spacing-m
|
||||
$size-6: 1rem; // 16px
|
||||
$size-7: calc(13 / 14) + 0rem; // ~.929rem ~15px
|
||||
$size-8: calc(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
|
||||
$size-9: 0.75rem; // 12px
|
||||
$size-10: 0.5rem; // 8px
|
||||
$size-11: 0.25rem; // 4px
|
||||
|
||||
/* 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;
|
||||
$spacing-4: 4px;
|
||||
$spacing-8: 8px;
|
||||
$spacing-10: 10px;
|
||||
$spacing-12: 12px;
|
||||
$spacing-14: 14px;
|
||||
$spacing-16: 16px;
|
||||
$spacing-18: 18px;
|
||||
$spacing-20: 20px;
|
||||
$spacing-24: 24px;
|
||||
$spacing-32: 32px;
|
||||
$spacing-36: 36px;
|
||||
$spacing-48: 48px;
|
||||
|
||||
/* Border radius */
|
||||
$radius: 2px;
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
type="checkbox"
|
||||
id="enabled"
|
||||
name="enabled"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
disabled={{@model.reportingEnabled}}
|
||||
checked={{eq @model.enabled "On"}}
|
||||
{{on "change" this.toggleEnabled}}
|
||||
/>
|
||||
<label for="enabled">
|
||||
<label for="enabled" class="has-text-weight-bold is-size-8">
|
||||
Data collection is
|
||||
{{lowercase @model.enabled}}
|
||||
</label>
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
{{#if this.formattedStartDate}}
|
||||
<p class="is-size-6" data-test-date-display>{{this.formattedStartDate}}</p>
|
||||
<Hds::Button
|
||||
class="has-left-margin-xs"
|
||||
@text="Edit"
|
||||
@color="tertiary"
|
||||
@icon="edit"
|
||||
|
||||
@@ -215,8 +215,6 @@
|
||||
<div class="field">
|
||||
<Toggle
|
||||
@name="show-{{attr.name}}"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@onChange={{fn this.updateShowPassword (not this.showPasswordField)}}
|
||||
@checked={{this.showPasswordField}}
|
||||
data-test-toggle={{attr.name}}
|
||||
|
||||
@@ -21,11 +21,11 @@
|
||||
id={{concat "useText-" this.elementId}}
|
||||
type="checkbox"
|
||||
name={{concat "useText-" this.elementId}}
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
checked={{this.key.enterAsText}}
|
||||
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
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -9,8 +9,6 @@
|
||||
<ToolbarFilters>
|
||||
<Toggle
|
||||
@name="json"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@disabled={{and (eq @mode "show") @secretDataIsAdvanced}}
|
||||
@checked={{@showAdvancedMode}}
|
||||
@onChange={{action @editActions.toggleAdvanced}}
|
||||
|
||||
@@ -68,10 +68,10 @@
|
||||
id="prehashed"
|
||||
@type="checkbox"
|
||||
name="prehashed"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
@checked={{@prehashed}}
|
||||
/>
|
||||
<label for="prehashed">Prehashed</label>
|
||||
<label for="prehashed" class="has-text-weight-bold is-size-8">Prehashed</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -91,10 +91,10 @@
|
||||
id="prehashed"
|
||||
@type="checkbox"
|
||||
name="prehashed"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
@checked={{@prehashed}}
|
||||
/>
|
||||
<label for="prehashed">Prehashed</label>
|
||||
<label for="prehashed" class="has-text-weight-bold is-size-8">Prehashed</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
@@ -139,8 +139,6 @@
|
||||
{{! Togglable Text Input }}
|
||||
<Toggle
|
||||
@name="show-{{@attr.name}}"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@onChange={{this.toggleShow}}
|
||||
@checked={{this.showInput}}
|
||||
data-test-toggle={{@attr.name}}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
{{#unless @uploadOnly}}
|
||||
<div class="level is-mobile">
|
||||
<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"}}
|
||||
{{#if @helpText}}
|
||||
<InfoTooltip>
|
||||
@@ -22,12 +22,12 @@
|
||||
<Input
|
||||
data-test-text-toggle
|
||||
id="use-text-{{this.elementId}}"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
@type="checkbox"
|
||||
@checked={{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
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@type="checkbox"
|
||||
@checked={{this.checked}}
|
||||
{{on "change" this.handleChange}}
|
||||
class={{this.inputClasses}}
|
||||
class="toggle is-success is-small"
|
||||
disabled={{this.disabled}}
|
||||
data-test-toggle-input={{this.name}}
|
||||
...attributes
|
||||
|
||||
@@ -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 {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 {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';
|
||||
@@ -40,13 +38,6 @@ export default class ToggleComponent extends Component {
|
||||
get safeId() {
|
||||
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
|
||||
handleChange(e) {
|
||||
|
||||
@@ -69,8 +69,6 @@
|
||||
{{else}}
|
||||
<Toggle
|
||||
@name={{this.label}}
|
||||
@status="success"
|
||||
@size="small"
|
||||
@onChange={{action "toggleEnabled"}}
|
||||
@checked={{this.enableTTL}}
|
||||
@hideLabel={{true}}
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
data-test-input="operationNone"
|
||||
id="operationNone"
|
||||
type="checkbox"
|
||||
class="switch is-rounded is-success is-small"
|
||||
class="toggle is-success is-small"
|
||||
checked={{not this.model.operationNone}}
|
||||
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
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -72,8 +72,6 @@
|
||||
|
||||
<div class="has-top-margin-l has-bottom-margin-l">
|
||||
<Toggle
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.clusterRoleBinding}}
|
||||
@onChange={{(toggle-action "clusterRoleBinding" this)}}
|
||||
data-test-kubernetes-clusterRoleBinding
|
||||
|
||||
@@ -15,13 +15,7 @@
|
||||
|
||||
<:toolbarFilters>
|
||||
{{#unless this.emptyState}}
|
||||
<Toggle
|
||||
@name="json"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.showJsonView}}
|
||||
@onChange={{fn (mut this.showJsonView)}}
|
||||
>
|
||||
<Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
|
||||
<span class="has-text-grey">JSON</span>
|
||||
</Toggle>
|
||||
{{/unless}}
|
||||
|
||||
@@ -5,13 +5,7 @@
|
||||
|
||||
<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create New Version">
|
||||
<:toolbarFilters>
|
||||
<Toggle
|
||||
@name="json"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.showJsonView}}
|
||||
@onChange={{fn (mut this.showJsonView)}}
|
||||
>
|
||||
<Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
|
||||
<span class="has-text-grey">JSON</span>
|
||||
</Toggle>
|
||||
</:toolbarFilters>
|
||||
@@ -53,8 +47,6 @@
|
||||
<div class="has-top-margin-m">
|
||||
<Toggle
|
||||
@name="Show diff"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@onChange={{fn (mut this.showDiff)}}
|
||||
@checked={{this.showDiff}}
|
||||
@disabled={{not this.diffDelta}}
|
||||
|
||||
@@ -5,13 +5,7 @@
|
||||
|
||||
<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create Secret">
|
||||
<:toolbarFilters>
|
||||
<Toggle
|
||||
@name="json"
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.showJsonView}}
|
||||
@onChange={{fn (mut this.showJsonView)}}
|
||||
>
|
||||
<Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
|
||||
<span class="has-text-grey">JSON</span>
|
||||
</Toggle>
|
||||
</:toolbarFilters>
|
||||
|
||||
@@ -23,8 +23,6 @@
|
||||
/>
|
||||
<Toggle
|
||||
@name={{concat attr.name "-toggle"}}
|
||||
@status="success"
|
||||
@size="small"
|
||||
@checked={{this.showDefaultIssuer}}
|
||||
@onChange={{this.toggleShowDefaultIssuer}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user