mirror of
https://github.com/hashicorp/vault.git
synced 2026-05-05 12:26:34 +02:00
runs sass-migrate to fix deprecation warnings (#29910)
This commit is contained in:
Jordan Reimer
GitHub
parent
5a85639928
commit
c4dc26ba7d
@ -3,11 +3,11 @@
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
@import './reset';
|
||||
@import 'ember-basic-dropdown';
|
||||
@import 'ember-power-select';
|
||||
@import './core';
|
||||
@import './docs';
|
||||
@use 'reset';
|
||||
@use 'ember-basic-dropdown';
|
||||
@use 'ember-power-select';
|
||||
@use 'core';
|
||||
@use 'docs';
|
||||
|
||||
@mixin font-face($name) {
|
||||
@font-face {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,7 +12,7 @@
|
||||
grid-row: 1/1;
|
||||
}
|
||||
@mixin stacked-content {
|
||||
margin-bottom: $spacing-24;
|
||||
margin-bottom: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.action-block-width {
|
||||
@ -18,17 +22,17 @@
|
||||
.action-block {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
display: grid;
|
||||
padding: $spacing-16 $spacing-24;
|
||||
padding: size_variables.$spacing-16 size_variables.$spacing-24;
|
||||
line-height: inherit;
|
||||
grid-gap: $spacing-16;
|
||||
grid-gap: size_variables.$spacing-16;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
@include stacked-grid();
|
||||
}
|
||||
}
|
||||
|
||||
.action-block-info {
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
@include stacked-content();
|
||||
}
|
||||
}
|
||||
@ -41,12 +45,12 @@
|
||||
}
|
||||
|
||||
.action-block-title {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
}
|
||||
.action-block-action {
|
||||
text-align: right;
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -55,22 +59,22 @@
|
||||
.replication-actions-grid-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: $spacing-16 0;
|
||||
@include until($mobile) {
|
||||
margin: size_variables.$spacing-16 0;
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.replication-actions-grid-item {
|
||||
flex-basis: 50%;
|
||||
padding: $spacing-12;
|
||||
padding: size_variables.$spacing-12;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.replication-actions-grid-item .action-block {
|
||||
width: 100%;
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/box.scss';
|
||||
@use '../helper-classes/general.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -25,14 +29,14 @@
|
||||
}
|
||||
|
||||
.toolbar-namespace-picker {
|
||||
padding: 0 $spacing-12;
|
||||
padding: 0 size_variables.$spacing-12;
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin-right: $spacing-12;
|
||||
margin-right: size_variables.$spacing-12;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
@use '../utils/color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.autocomplete-input {
|
||||
background: $white !important;
|
||||
border: 1px solid $grey-light;
|
||||
background: color_variables.$white !important;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
width: 99%;
|
||||
@ -17,7 +19,7 @@
|
||||
.autocomplete-input-option {
|
||||
padding: 12px;
|
||||
&:hover {
|
||||
background-color: $grey-lightest;
|
||||
background-color: color_variables.$grey-lightest;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/buttons.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -5,7 +8,7 @@
|
||||
|
||||
.b64-toggle {
|
||||
padding: 0.75rem;
|
||||
font-size: $size-9;
|
||||
font-size: size_variables.$size-9;
|
||||
}
|
||||
.b64-toggle.is-input {
|
||||
box-shadow: none;
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/box.scss';
|
||||
@use '../core/columns.scss';
|
||||
@use '../helper-classes/flexbox-and-grid.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -11,11 +18,11 @@ label.box-label {
|
||||
@extend .box;
|
||||
@extend .is-centered;
|
||||
|
||||
border-color: $grey-light;
|
||||
border-color: color_variables.$grey-light;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-link-shadow;
|
||||
box-shadow: box-shadow_variables.$box-link-shadow;
|
||||
text-decoration: none;
|
||||
transition: box-shadow $speed;
|
||||
transition: box-shadow size_variables.$speed;
|
||||
width: 100%;
|
||||
|
||||
> div:first-child {
|
||||
@ -27,15 +34,15 @@ label.box-label {
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
box-shadow: $box-link-hover-shadow, $box-shadow-middle;
|
||||
box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle;
|
||||
|
||||
.icon {
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $grey-light;
|
||||
color: color_variables.$grey-light;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
@ -43,7 +50,7 @@ label.box-label {
|
||||
}
|
||||
|
||||
input[type='radio'] + label {
|
||||
border: 1px solid $grey-light;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
@ -53,16 +60,16 @@ label.box-label {
|
||||
}
|
||||
|
||||
input[type='radio']:checked + label {
|
||||
background: $blue;
|
||||
border: 1px solid $blue;
|
||||
box-shadow: inset 0 0 0 0.15rem $white;
|
||||
background: color_variables.$blue;
|
||||
border: 1px solid color_variables.$blue;
|
||||
box-shadow: inset 0 0 0 0.15rem color_variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
.box-label-header {
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
|
||||
.is-selected & {
|
||||
color: $grey-darkest;
|
||||
color: color_variables.$grey-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -18,13 +23,13 @@ $dark-gray: #535f73;
|
||||
}
|
||||
}
|
||||
.calendar-title {
|
||||
padding: $spacing-10 $spacing-12;
|
||||
padding: size_variables.$spacing-10 size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.select-year {
|
||||
grid-area: select-year;
|
||||
margin: 10px 24px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: first baseline;
|
||||
@ -36,7 +41,7 @@ $dark-gray: #535f73;
|
||||
|
||||
.border-col {
|
||||
grid-area: border-col;
|
||||
background-color: $ui-gray-200;
|
||||
background-color: color_variables.$ui-gray-200;
|
||||
}
|
||||
|
||||
.calendar-widget-container {
|
||||
@ -46,9 +51,9 @@ $dark-gray: #535f73;
|
||||
'calendar-widget';
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 0.7fr 3fr;
|
||||
box-shadow: $box-shadow, $box-shadow-middle;
|
||||
box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle;
|
||||
background-color: white;
|
||||
border-radius: $radius;
|
||||
border-radius: size_variables.$radius;
|
||||
}
|
||||
|
||||
.calendar-widget-grid {
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
@use 'sass:color';
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.chart-wrapper {
|
||||
border: $light-border;
|
||||
border-radius: $radius-large;
|
||||
padding: $spacing-12 $spacing-24;
|
||||
margin-bottom: $spacing-16;
|
||||
border: box-shadow_variables.$light-border;
|
||||
border-radius: size_variables.$radius-large;
|
||||
padding: size_variables.$spacing-12 size_variables.$spacing-24;
|
||||
margin-bottom: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
// GRID LAYOUT //
|
||||
@ -25,7 +31,7 @@
|
||||
grid-column-start: 1;
|
||||
grid-column-end: span col4-end;
|
||||
grid-row-start: 1;
|
||||
box-shadow: inset 0 -1px 0 $ui-gray-200;
|
||||
box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
|
||||
}
|
||||
|
||||
.has-header-link {
|
||||
@ -38,8 +44,8 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
background-color: darken($ui-gray-050, 5%);
|
||||
border-color: darken($ui-gray-300, 5%);
|
||||
background-color: color.adjust(color_variables.$ui-gray-050, $lightness: -5%);
|
||||
border-color: color.adjust(color_variables.$ui-gray-300, $lightness: -5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,9 +72,9 @@
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 5;
|
||||
padding-bottom: $spacing-36;
|
||||
margin-bottom: $spacing-12;
|
||||
box-shadow: inset 0 -1px 0 $ui-gray-200;
|
||||
padding-bottom: size_variables.$spacing-36;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
|
||||
|
||||
> h2 {
|
||||
padding-left: 18px;
|
||||
@ -83,9 +89,9 @@
|
||||
grid-column-end: 8;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 5;
|
||||
padding-bottom: $spacing-36;
|
||||
margin-bottom: $spacing-12;
|
||||
box-shadow: inset 0 -1px 0 $ui-gray-200;
|
||||
padding-bottom: size_variables.$spacing-36;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
|
||||
|
||||
> h2 {
|
||||
padding-left: 18px;
|
||||
@ -137,8 +143,8 @@
|
||||
.timestamp {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row-start: -1;
|
||||
color: $ui-gray-500;
|
||||
font-size: $size-9;
|
||||
color: color_variables.$ui-gray-500;
|
||||
font-size: size_variables.$size-9;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@ -148,40 +154,40 @@
|
||||
grid-column-end: 6;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
font-size: $size-9;
|
||||
font-size: size_variables.$size-9;
|
||||
}
|
||||
|
||||
// FONT STYLES //
|
||||
|
||||
h2.chart-title {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $size-5;
|
||||
line-height: $spacing-24;
|
||||
margin-bottom: $spacing-4;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
font-size: size_variables.$size-5;
|
||||
line-height: size_variables.$spacing-24;
|
||||
margin-bottom: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
p.chart-description {
|
||||
color: $ui-gray-700;
|
||||
color: color_variables.$ui-gray-700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
p.chart-subtext {
|
||||
color: $ui-gray-500;
|
||||
font-size: $size-8;
|
||||
color: color_variables.$ui-gray-500;
|
||||
font-size: size_variables.$size-8;
|
||||
line-height: 16px;
|
||||
margin-top: $spacing-8;
|
||||
margin-top: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
h3.data-details {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $size-8;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
font-size: size_variables.$size-8;
|
||||
line-height: 14px;
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
p.data-details {
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $size-4;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
font-size: size_variables.$size-4;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,7 +9,7 @@
|
||||
display: flex;
|
||||
align-items: bottom;
|
||||
> * {
|
||||
margin-right: $spacing-8;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
vertical-align: bottom;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -10,9 +12,9 @@
|
||||
padding: 0 1.5rem;
|
||||
|
||||
> div {
|
||||
margin-top: $spacing-24;
|
||||
margin-top: size_variables.$spacing-24;
|
||||
&:last-of-type {
|
||||
margin-bottom: $spacing-24;
|
||||
margin-bottom: size_variables.$spacing-24;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use 'sass:color';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use 'calendar-widget';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -17,10 +22,10 @@ $serf: #dd4e58;
|
||||
$packer: #1ddba3;
|
||||
|
||||
// Our colors
|
||||
$gray: lighten($black, 89%);
|
||||
$red: #ff3d3d;
|
||||
$green: #39b54a;
|
||||
$dark-gray: #535f73;
|
||||
$gray: color.adjust(color_variables.$black, $lightness: 89%);
|
||||
color_variables.$red: #ff3d3d;
|
||||
color_variables.$green: #39b54a;
|
||||
calendar-widget.$dark-gray: #535f73;
|
||||
|
||||
$gutter-grey: #2a2f36;
|
||||
|
||||
@ -28,18 +33,18 @@ $gutter-grey: #2a2f36;
|
||||
background-color: #f9f9fa;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: 0;
|
||||
color: lighten($black, 13%);
|
||||
font-family: $family-monospace;
|
||||
color: color.adjust(color_variables.$black, $lightness: 13%);
|
||||
font-family: font_variables.$family-monospace;
|
||||
font-size: 13px;
|
||||
padding: 7px 8px 9px;
|
||||
}
|
||||
|
||||
.cm-s-hashi-read-only {
|
||||
&.CodeMirror {
|
||||
background-color: $grey-lightest;
|
||||
background-color: color_variables.$grey-lightest;
|
||||
border: none;
|
||||
color: $ui-gray-600;
|
||||
font-family: $family-monospace;
|
||||
color: color_variables.$ui-gray-600;
|
||||
font-family: font_variables.$family-monospace;
|
||||
-webkit-font-smoothing: auto;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@ -49,17 +54,17 @@ $gutter-grey: #2a2f36;
|
||||
color: $packer;
|
||||
}
|
||||
span.cm-property {
|
||||
color: lighten($consul, 20%);
|
||||
color: color.adjust($consul, $lightness: 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-hashi {
|
||||
&.CodeMirror {
|
||||
background-color: $black !important;
|
||||
background-color: color_variables.$black !important;
|
||||
resize: vertical;
|
||||
color: #cfd2d1 !important;
|
||||
border: none;
|
||||
font-family: $family-monospace;
|
||||
font-family: font_variables.$family-monospace;
|
||||
-webkit-font-smoothing: auto;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@ -112,11 +117,11 @@ $gutter-grey: #2a2f36;
|
||||
}
|
||||
|
||||
span.cm-variable {
|
||||
color: lighten($consul, 20%);
|
||||
color: color.adjust($consul, $lightness: 20%);
|
||||
}
|
||||
|
||||
span.cm-variable-2 {
|
||||
color: lighten($consul, 20%);
|
||||
color: color.adjust($consul, $lightness: 20%);
|
||||
}
|
||||
|
||||
span.cm-def {
|
||||
@ -127,7 +132,7 @@ $gutter-grey: #2a2f36;
|
||||
color: $gray;
|
||||
}
|
||||
span.cm-keyword {
|
||||
color: $yellow;
|
||||
color: color_variables.$yellow;
|
||||
}
|
||||
|
||||
span.cm-atom {
|
||||
@ -151,7 +156,7 @@ $gutter-grey: #2a2f36;
|
||||
}
|
||||
|
||||
span.cm-property {
|
||||
color: lighten($consul, 20%);
|
||||
color: color.adjust($consul, $lightness: 20%);
|
||||
}
|
||||
|
||||
span.cm-variable-3 {
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
@use 'sass:color';
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -15,42 +21,42 @@ $console-close-height: 35px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition:
|
||||
min-height $speed $easing,
|
||||
transform $speed ease-in;
|
||||
min-height size_variables.$speed size_variables.$easing,
|
||||
transform size_variables.$speed ease-in;
|
||||
will-change: transform, min-height;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
.console-ui-panel-content {
|
||||
color: $white;
|
||||
color: color_variables.$white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: size_variables.$size-7;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
justify-content: flex-end;
|
||||
min-height: calc(100% - $console-close-height); // account for close button that is sticky positioned
|
||||
padding: $spacing-12 $spacing-12 $spacing-18;
|
||||
transition: justify-content $speed ease-in;
|
||||
padding: size_variables.$spacing-12 size_variables.$spacing-12 size_variables.$spacing-18;
|
||||
transition: justify-content size_variables.$speed ease-in;
|
||||
|
||||
pre,
|
||||
p {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
min-height: 2rem;
|
||||
padding: 0;
|
||||
|
||||
&:not(.console-ui-command):not(.CodeMirror-line) {
|
||||
padding-left: $spacing-20;
|
||||
padding-left: size_variables.$spacing-20;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-hashi.CodeMirror {
|
||||
background-color: rgba($black, 0.5) !important;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-left: $spacing-20;
|
||||
padding: $spacing-12 $spacing-20;
|
||||
background-color: rgba(color_variables.$black, 0.5) !important;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
margin-left: size_variables.$spacing-20;
|
||||
padding: size_variables.$spacing-12 size_variables.$spacing-20;
|
||||
}
|
||||
|
||||
.console-ui-panel-intro {
|
||||
@ -63,19 +69,19 @@ $console-close-height: 35px;
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
background-color: rgba($black, 0.5);
|
||||
background-color: rgba(color_variables.$black, 0.5);
|
||||
border: 1px solid var(--token-color-palette-neutral-500);
|
||||
border-radius: var(--token-side-nav-body-list-item-border-radius);
|
||||
caret-color: $white;
|
||||
color: $white;
|
||||
caret-color: color_variables.$white;
|
||||
color: color_variables.$white;
|
||||
flex: 1 1 auto;
|
||||
font-family: $family-monospace;
|
||||
font-size: $size-6;
|
||||
font-weight: $font-weight-bold;
|
||||
font-family: font_variables.$family-monospace;
|
||||
font-size: size_variables.$size-6;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
outline: none;
|
||||
padding: $spacing-8;
|
||||
margin-right: $spacing-8;
|
||||
transition: background-color $speed;
|
||||
padding: size_variables.$spacing-8;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
transition: background-color size_variables.$speed;
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,9 +90,9 @@ $console-close-height: 35px;
|
||||
}
|
||||
|
||||
.console-ui-output {
|
||||
transition: background-color $speed ease-in-out;
|
||||
transition: background-color size_variables.$speed ease-in-out;
|
||||
will-change: background-color;
|
||||
padding-right: $spacing-36;
|
||||
padding-right: size_variables.$spacing-36;
|
||||
position: relative;
|
||||
background-color: rgba(#000, 0);
|
||||
color: var(--token-color-palette-neutral-400);
|
||||
@ -96,7 +102,7 @@ $console-close-height: 35px;
|
||||
}
|
||||
|
||||
.console-ui-alert {
|
||||
margin-left: calc(#{$spacing-20} - 0.33rem);
|
||||
margin-left: calc(#{size_variables.$spacing-20} - 0.33rem);
|
||||
position: relative;
|
||||
color: var(--token-color-palette-neutral-400);
|
||||
|
||||
@ -109,17 +115,17 @@ $console-close-height: 35px;
|
||||
&.console-ui-alert--error {
|
||||
// HDS tokens are not light enough on the dark background to pass a11y tests.
|
||||
// hex value for --token-color-foreground-critical
|
||||
color: lighten(#e52228, 20%);
|
||||
color: color.adjust(#e52228, $lightness: 20%);
|
||||
}
|
||||
&.console-ui-alert--success {
|
||||
// HDS tokens are not light enough on the dark background to pass a11y tests.
|
||||
// hex value for --token-color-foreground-success
|
||||
color: lighten(#008a22, 20%);
|
||||
color: color.adjust(#008a22, $lightness: 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-open .console-ui-panel {
|
||||
box-shadow: $box-shadow-highest;
|
||||
box-shadow: box-shadow_variables.$box-shadow-highest;
|
||||
min-height: 425px;
|
||||
}
|
||||
|
||||
@ -151,13 +157,13 @@ $console-close-height: 35px;
|
||||
|
||||
.console-close-button {
|
||||
position: sticky;
|
||||
top: $spacing-8;
|
||||
top: size_variables.$spacing-8;
|
||||
height: $console-close-height;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 210;
|
||||
|
||||
button {
|
||||
margin-right: $spacing-8;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/box.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,10 +11,12 @@
|
||||
.control-group,
|
||||
.control-group-success {
|
||||
@extend .box;
|
||||
box-shadow: $box-shadow-middle, 0 0 1px $grey-dark;
|
||||
box-shadow:
|
||||
box-shadow_variables.$box-shadow-middle,
|
||||
0 0 1px color_variables.$grey-dark;
|
||||
}
|
||||
.control-group-success.is-editor {
|
||||
background: $grey-lightest;
|
||||
background: color_variables.$grey-lightest;
|
||||
}
|
||||
|
||||
.control-group a {
|
||||
@ -17,9 +24,9 @@
|
||||
}
|
||||
.control-group-header {
|
||||
box-shadow: 0 0 1px currentColor;
|
||||
padding: $spacing-10 $spacing-14;
|
||||
background: $grey-lightest;
|
||||
color: $grey-dark;
|
||||
padding: size_variables.$spacing-10 size_variables.$spacing-14;
|
||||
background: color_variables.$grey-lightest;
|
||||
color: color_variables.$grey-dark;
|
||||
position: relative;
|
||||
strong {
|
||||
color: currentColor;
|
||||
@ -27,10 +34,10 @@
|
||||
}
|
||||
|
||||
.control-group-header.is-success {
|
||||
color: $green-dark;
|
||||
background: $green-lightest;
|
||||
color: color_variables.$green-dark;
|
||||
background: color_variables.$green-lightest;
|
||||
}
|
||||
|
||||
.control-group .authorizations {
|
||||
margin-top: $spacing-10;
|
||||
margin-top: size_variables.$spacing-10;
|
||||
}
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.doc-link {
|
||||
color: $blue;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: color_variables.$blue;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
&:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -9,8 +13,8 @@
|
||||
background: var(--token-color-surface-faint);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $spacing-48 $spacing-12;
|
||||
box-shadow: 0 -2px 0 -1px $ui-gray-300;
|
||||
padding: size_variables.$spacing-48 size_variables.$spacing-12;
|
||||
box-shadow: 0 -2px 0 -1px color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
.empty-state-transparent {
|
||||
@ -19,7 +23,7 @@
|
||||
background: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $spacing-48 0;
|
||||
padding: size_variables.$spacing-48 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -28,36 +32,36 @@
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
color: $grey;
|
||||
font-size: $size-4;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-4;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.empty-state-subTitle {
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
margin-top: -10px;
|
||||
padding-bottom: $spacing-12;
|
||||
padding-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.empty-state-message.has-border-bottom-light {
|
||||
padding-bottom: $spacing-12;
|
||||
padding-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.empty-state-actions {
|
||||
margin-top: $spacing-8;
|
||||
margin-top: size_variables.$spacing-8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> * + * {
|
||||
margin-left: $spacing-12;
|
||||
margin-right: $spacing-12;
|
||||
margin-left: size_variables.$spacing-12;
|
||||
margin-right: size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state-icon > .hs-icon,
|
||||
.empty-state-icon > .hds-icon {
|
||||
float: left;
|
||||
margin-right: $spacing-8;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,11 +11,11 @@
|
||||
border-radius: 3rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$blue,
|
||||
color_variables.$blue,
|
||||
hsl(271, 100%, 71%)
|
||||
); // only use case for purple in the app. define here instead of utils/color_var
|
||||
animation: env-banner-color-rotate 8s infinite linear alternate;
|
||||
color: $white;
|
||||
color: color_variables.$white;
|
||||
|
||||
.hs-icon {
|
||||
margin: 0;
|
||||
@ -21,7 +24,7 @@
|
||||
.notification {
|
||||
background-color: transparent;
|
||||
line-height: 2;
|
||||
padding: 0 $spacing-12;
|
||||
padding: 0 size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -5,7 +7,7 @@
|
||||
|
||||
.form-section {
|
||||
padding: 1.75rem 0;
|
||||
box-shadow: 0 -1px 0 0 rgba($black, 0.1);
|
||||
box-shadow: 0 -1px 0 0 rgba(color_variables.$black, 0.1);
|
||||
}
|
||||
|
||||
.field:first-child .form-section,
|
||||
@ -19,6 +21,6 @@
|
||||
background-color: black;
|
||||
|
||||
pre {
|
||||
color: $ui-gray-010;
|
||||
color: color_variables.$ui-gray-010;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.global-flash {
|
||||
bottom: $spacing-32;
|
||||
right: $spacing-24;
|
||||
bottom: size_variables.$spacing-32;
|
||||
right: size_variables.$spacing-24;
|
||||
margin: 10px;
|
||||
max-width: 360px;
|
||||
position: fixed;
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,10 +9,10 @@
|
||||
.icon {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
height: $size-4;
|
||||
height: size_variables.$size-4;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
width: $size-4;
|
||||
width: size_variables.$size-4;
|
||||
// override the display if .button.icon to .button's default display: inline-block. See manage namespaces icon button in the namespace picker
|
||||
&.button {
|
||||
display: inline-block;
|
||||
@ -17,14 +20,14 @@
|
||||
}
|
||||
|
||||
.icon-blue {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
|
||||
.hds-icon {
|
||||
&.hds-icon--is-inline {
|
||||
vertical-align: middle;
|
||||
margin-left: $spacing-4;
|
||||
margin-right: $spacing-4;
|
||||
margin-left: size_variables.$spacing-4;
|
||||
margin-right: size_variables.$spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.info-table-row {
|
||||
box-shadow: 0 1px 0 $grey-light;
|
||||
box-shadow: 0 1px 0 color_variables.$grey-light;
|
||||
margin: 0;
|
||||
|
||||
&.has-no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include from($mobile) {
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.thead {
|
||||
box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
|
||||
box-shadow:
|
||||
0 1px 0 color_variables.$grey-light,
|
||||
0 -1px 0 color_variables.$grey-light;
|
||||
margin: 0;
|
||||
padding: 0 $spacing-14 0 0;
|
||||
padding: 0 size_variables.$spacing-14 0 0;
|
||||
|
||||
.column {
|
||||
padding: 0.5rem 0.75rem;
|
||||
@ -27,7 +34,7 @@
|
||||
|
||||
.column {
|
||||
align-self: center;
|
||||
padding: $spacing-16;
|
||||
padding: size_variables.$spacing-16;
|
||||
|
||||
&.info-table-row-edit {
|
||||
padding-bottom: 0.3rem;
|
||||
@ -48,15 +55,15 @@
|
||||
}
|
||||
|
||||
.hs-icon {
|
||||
margin-right: $spacing-4;
|
||||
margin-right: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.icon-true {
|
||||
color: $green-500;
|
||||
color: color_variables.$green-500;
|
||||
}
|
||||
|
||||
.icon-false {
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -65,34 +72,34 @@
|
||||
}
|
||||
|
||||
.info-table-row:not(.is-mobile) .column {
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
|
||||
@include until($mobile) {
|
||||
padding: $spacing-12 0 0;
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
padding: size_variables.$spacing-12 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
@include until($mobile) {
|
||||
padding: 0 0 $spacing-12;
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
padding: 0 0 size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-table-row-header {
|
||||
margin: 0;
|
||||
font-size: $size-8;
|
||||
color: $grey;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: size_variables.$size-8;
|
||||
color: color_variables.$grey;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
display: none;
|
||||
}
|
||||
.info-table-row:not(.is-mobile) .column:last-child {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/box.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -10,8 +13,8 @@
|
||||
@extend .box;
|
||||
flex: 1 1 auto;
|
||||
box-shadow: none;
|
||||
padding: $spacing-4 0;
|
||||
padding: size_variables.$spacing-4 0;
|
||||
}
|
||||
.kmip-role-allowed-operations .field {
|
||||
margin-bottom: $spacing-4;
|
||||
margin-bottom: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,17 +10,17 @@
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/3;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
grid-column: 1/1;
|
||||
grid-row: 1/1;
|
||||
}
|
||||
|
||||
.secondaries-table {
|
||||
margin-bottom: $spacing-12;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../helper-classes/flexbox-and-grid.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/box.scss';
|
||||
@use '../helper-classes/general.scss';
|
||||
@use '../helper-classes/spacing.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -17,9 +25,9 @@
|
||||
.center-inside-row {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $ui-gray-500;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
color: color_variables.$ui-gray-500;
|
||||
}
|
||||
|
||||
.center-display {
|
||||
@ -35,19 +43,25 @@
|
||||
|
||||
a.list-item-row,
|
||||
.linked-block.list-item-row {
|
||||
transition: box-shadow $speed, margin $speed, padding $speed;
|
||||
transition:
|
||||
box-shadow size_variables.$speed,
|
||||
margin size_variables.$speed,
|
||||
padding size_variables.$speed;
|
||||
will-change: box-shadow, margin, padding;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
margin-left: #{-$spacing-10} !important;
|
||||
margin-right: #{-$spacing-10} !important;
|
||||
padding-left: $spacing-10;
|
||||
padding-right: $spacing-10;
|
||||
margin-left: #{-(size_variables.$spacing-10)} !important;
|
||||
margin-right: #{-(size_variables.$spacing-10)} !important;
|
||||
padding-left: size_variables.$spacing-10;
|
||||
padding-right: size_variables.$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;
|
||||
box-shadow:
|
||||
0 2px 0 -1px color_variables.$grey-light,
|
||||
0 -2px 0 -1px color_variables.$grey-light,
|
||||
box-shadow_variables.$box-link-hover-shadow,
|
||||
box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
|
||||
&.no-destination {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.login-form {
|
||||
box-shadow: $box-shadow, $box-shadow-high;
|
||||
box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-high;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -14,18 +18,18 @@ pre.masked-font {
|
||||
}
|
||||
|
||||
.has-label .masked-input {
|
||||
padding-top: $spacing-12;
|
||||
padding-top: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-padding {
|
||||
padding: $spacing-8 $spacing-12;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
// we want to style the boxes the same everywhere so they
|
||||
// need to be the same font and small
|
||||
.masked-input.masked .masked-value {
|
||||
font-size: 9px;
|
||||
font-family: $family-sans;
|
||||
font-family: font_variables.$family-sans;
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
@ -36,7 +40,7 @@ pre.masked-font {
|
||||
// aligns the boxes on the input page
|
||||
.masked-input.masked:not(.display-only) .masked-value {
|
||||
line-height: 3;
|
||||
border-radius: $radius 0 0 $radius;
|
||||
border-radius: size_variables.$radius 0 0 size_variables.$radius;
|
||||
}
|
||||
|
||||
//override bulma's pre styling
|
||||
@ -45,19 +49,19 @@ pre.masked-font {
|
||||
font-size: 1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: $spacing-12;
|
||||
padding-left: size_variables.$spacing-12;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.button.masked-input-toggle {
|
||||
min-width: $spacing-36;
|
||||
min-width: size_variables.$spacing-36;
|
||||
border-left: 0;
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
|
||||
}
|
||||
|
||||
.button.masked-input-toggle {
|
||||
border-radius: 0 $radius $radius 0;
|
||||
border-radius: 0 size_variables.$radius size_variables.$radius 0;
|
||||
}
|
||||
|
||||
.display-only {
|
||||
@ -65,10 +69,10 @@ pre.masked-font {
|
||||
background: transparent;
|
||||
height: auto;
|
||||
line-height: 1rem;
|
||||
min-width: $spacing-24;
|
||||
min-width: size_variables.$spacing-24;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: $grey-light;
|
||||
color: color_variables.$grey-light;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@ -77,7 +81,7 @@ pre.masked-font {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:focus:not(:active) {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -89,5 +93,5 @@ pre.masked-font {
|
||||
}
|
||||
|
||||
.masked-input .input:focus + .masked-input-toggle {
|
||||
background: rgba($white, 0.95);
|
||||
background: rgba(color_variables.$white, 0.95);
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,7 +11,7 @@
|
||||
.namespace-picker {
|
||||
position: relative;
|
||||
color: var(--token-color-palette-neutral-300);
|
||||
padding: $spacing-4 $spacing-8;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-8;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -21,7 +26,7 @@
|
||||
flex: 1 1 auto;
|
||||
height: 2rem;
|
||||
justify-content: space-between;
|
||||
margin-right: $spacing-4;
|
||||
margin-right: size_variables.$spacing-4;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -30,11 +35,11 @@
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
color: var(--token-color-foreground-primary);
|
||||
border-radius: $radius;
|
||||
box-shadow: $box-shadow, $box-shadow-high;
|
||||
border-radius: size_variables.$radius;
|
||||
box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-high;
|
||||
|
||||
&.ember-basic-dropdown-content {
|
||||
background: $white;
|
||||
background: color_variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,17 +51,17 @@
|
||||
}
|
||||
|
||||
.namespace-header-bar {
|
||||
padding: $spacing-4 $spacing-10;
|
||||
border-bottom: 1px solid rgba($black, 0.1);
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-10;
|
||||
border-bottom: 1px solid rgba(color_variables.$black, 0.1);
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.namespace-manage-link {
|
||||
border-top: 1px solid rgba($black, 0.1);
|
||||
border-top: 1px solid rgba(color_variables.$black, 0.1);
|
||||
|
||||
.level-left {
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.level-right {
|
||||
@ -70,15 +75,15 @@
|
||||
}
|
||||
|
||||
.namespace-link {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $spacing-8 $spacing-10 $spacing-8 0;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-10 size_variables.$spacing-8 0;
|
||||
}
|
||||
|
||||
.namespace-link.is-current {
|
||||
margin-top: $spacing-12;
|
||||
margin-right: -$spacing-8;
|
||||
margin-top: size_variables.$spacing-12;
|
||||
margin-right: -(size_variables.$spacing-8);
|
||||
|
||||
svg {
|
||||
margin-top: 2px;
|
||||
@ -87,11 +92,11 @@
|
||||
}
|
||||
|
||||
.leaf-panel {
|
||||
padding: $spacing-4 $spacing-10;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-10;
|
||||
transition: transform ease-in-out 250ms;
|
||||
will-change: transform;
|
||||
transform: translateX(0);
|
||||
background: $white;
|
||||
background: color_variables.$white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -101,7 +106,7 @@
|
||||
}
|
||||
|
||||
.leaf-panel-left {
|
||||
transform: translateX(-$drawer-width);
|
||||
transform: translateX(-(size_variables.$drawer-width));
|
||||
}
|
||||
|
||||
.leaf-panel-adding,
|
||||
@ -115,7 +120,7 @@
|
||||
.animated-list {
|
||||
.leaf-panel-exiting,
|
||||
.leaf-panel-adding {
|
||||
transform: translateX($drawer-width);
|
||||
transform: translateX(size_variables.$drawer-width);
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.namespace-reminder {
|
||||
color: $grey;
|
||||
margin: 0 0 $spacing-14 0;
|
||||
color: color_variables.$grey;
|
||||
margin: 0 0 size_variables.$spacing-14 0;
|
||||
}
|
||||
|
||||
.console-reminder p.namespace-reminder {
|
||||
color: $grey;
|
||||
font-family: $family-monospace;
|
||||
font-size: $size-8;
|
||||
margin: $spacing-4 0 0;
|
||||
color: color_variables.$grey;
|
||||
font-family: font_variables.$family-monospace;
|
||||
font-size: size_variables.$size-8;
|
||||
margin: size_variables.$spacing-4 0 0;
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.overview-card {
|
||||
padding: $spacing-24;
|
||||
padding: size_variables.$spacing-24;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.page-header {
|
||||
padding-bottom: $spacing-4;
|
||||
padding-top: $spacing-20;
|
||||
padding-bottom: size_variables.$spacing-4;
|
||||
padding-top: size_variables.$spacing-20;
|
||||
|
||||
.level {
|
||||
align-items: flex-end;
|
||||
@ -15,18 +18,18 @@
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.level-right {
|
||||
@include from($mobile) {
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: $spacing-16;
|
||||
margin-top: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.title-with-icon {
|
||||
@ -34,7 +37,7 @@
|
||||
}
|
||||
|
||||
.breadcrumb + .level .title {
|
||||
margin-top: $spacing-20;
|
||||
margin-top: size_variables.$spacing-20;
|
||||
}
|
||||
.title .icon {
|
||||
height: auto;
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,19 +11,19 @@
|
||||
// Popup menu no longer exists, but these styles are still used in some places
|
||||
.popup-menu-content,
|
||||
.ember-power-select-options {
|
||||
border-radius: $radius;
|
||||
border-radius: size_variables.$radius;
|
||||
margin: -2px 0 0 0;
|
||||
|
||||
& > .box {
|
||||
border-radius: $radius;
|
||||
box-shadow: $box-shadow, $box-shadow-middle;
|
||||
border-radius: size_variables.$radius;
|
||||
box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
&.is-wide > .box {
|
||||
width: $drawer-width;
|
||||
width: size_variables.$drawer-width;
|
||||
}
|
||||
|
||||
.confirm-action span .button {
|
||||
@ -28,7 +33,7 @@
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: $spacing-4 0;
|
||||
padding: size_variables.$spacing-4 0;
|
||||
}
|
||||
|
||||
button.link,
|
||||
@ -41,9 +46,9 @@
|
||||
border: none;
|
||||
display: block;
|
||||
height: auto;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $spacing-10 $spacing-12;
|
||||
font-size: size_variables.$size-7;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
padding: size_variables.$spacing-10 size_variables.$spacing-12;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
@ -53,13 +58,13 @@
|
||||
// so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
|
||||
.hds-confirm-action-critical {
|
||||
&:hover {
|
||||
background-color: $ui-gray-050;
|
||||
background-color: color_variables.$ui-gray-050;
|
||||
}
|
||||
div,
|
||||
span {
|
||||
margin-left: -$spacing-4;
|
||||
font-size: $size-7;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-left: -(size_variables.$spacing-4);
|
||||
font-size: size_variables.$size-7;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,26 +72,26 @@
|
||||
.ember-power-select-option,
|
||||
.ember-power-select-option[aria-current='true'],
|
||||
a {
|
||||
background-color: $white;
|
||||
color: $grey-darkest;
|
||||
background-color: color_variables.$white;
|
||||
color: color_variables.$grey-darkest;
|
||||
|
||||
&:hover {
|
||||
background-color: $ui-gray-050;
|
||||
color: $ui-gray-900;
|
||||
background-color: color_variables.$ui-gray-050;
|
||||
color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.is-active {
|
||||
background-color: transparent;
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
|
||||
&.is-destroy {
|
||||
color: $red;
|
||||
color: color_variables.$red;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
background-color: color_variables.$red;
|
||||
color: color_variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,29 +110,29 @@
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: $grey-dark;
|
||||
font-size: $size-9;
|
||||
font-weight: $font-weight-normal;
|
||||
color: color_variables.$grey-dark;
|
||||
font-size: size_variables.$size-9;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
padding: $spacing-8 $spacing-12 0;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-12 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
padding: $spacing-8 $spacing-12;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $ui-gray-200;
|
||||
background-color: color_variables.$ui-gray-200;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu-content p {
|
||||
box-shadow: none;
|
||||
padding-top: $spacing-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding-top: size_variables.$spacing-8;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
}
|
||||
|
||||
.popup-menu-content .level-left {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,11 +10,11 @@
|
||||
transform: rotate(-90deg) translateX(-20%);
|
||||
}
|
||||
.radial-progress circle {
|
||||
stroke: rgba($grey-light, 0.5);
|
||||
transition: stroke-dashoffset $speed ease-in;
|
||||
stroke: rgba(color_variables.$grey-light, 0.5);
|
||||
transition: stroke-dashoffset size_variables.$speed ease-in;
|
||||
will-change: stroke-dashoffset;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.radial-progress circle.progress-fill {
|
||||
stroke: $green;
|
||||
stroke: color_variables.$green;
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -5,17 +10,17 @@
|
||||
|
||||
.radio-card-selector {
|
||||
display: flex;
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
.radio-card {
|
||||
box-shadow: $box-shadow-low;
|
||||
box-shadow: box-shadow_variables.$box-shadow-low;
|
||||
flex: 1 1 25%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: $spacing-8 $spacing-16;
|
||||
border: $base-border;
|
||||
border-radius: $radius;
|
||||
transition: all ease-in-out $speed;
|
||||
margin: size_variables.$spacing-8 size_variables.$spacing-16;
|
||||
border: box-shadow_variables.$base-border;
|
||||
border-radius: size_variables.$radius;
|
||||
transition: all ease-in-out size_variables.$speed;
|
||||
max-width: 60%;
|
||||
input[type='radio'] {
|
||||
position: absolute;
|
||||
@ -24,7 +29,7 @@
|
||||
}
|
||||
|
||||
input[type='radio'] + span.dot {
|
||||
border: 1px solid $grey-light;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
@ -35,12 +40,14 @@
|
||||
}
|
||||
|
||||
input[type='radio']:checked + span.dot {
|
||||
background: $blue;
|
||||
border: 1px solid $blue;
|
||||
box-shadow: inset 0 0 0 0.15rem $white;
|
||||
background: color_variables.$blue;
|
||||
border: 1px solid color_variables.$blue;
|
||||
box-shadow: inset 0 0 0 0.15rem color_variables.$white;
|
||||
}
|
||||
input[type='radio']:focus + span.dot {
|
||||
box-shadow: 0 0 10px 1px rgba($blue, 0.4), inset 0 0 0 0.15rem $white;
|
||||
box-shadow:
|
||||
0 0 10px 1px rgba(color_variables.$blue, 0.4),
|
||||
inset 0 0 0 0.15rem color_variables.$white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
@ -67,43 +74,43 @@
|
||||
.radio-card-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: $spacing-16;
|
||||
padding: size_variables.$spacing-16;
|
||||
}
|
||||
.radio-card-icon {
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
.radio-card-message {
|
||||
margin: $spacing-4;
|
||||
margin: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.radio-card-message-title {
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $size-7;
|
||||
margin-bottom: $spacing-4;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
font-size: size_variables.$size-7;
|
||||
margin-bottom: size_variables.$spacing-4;
|
||||
}
|
||||
.radio-card-message-body {
|
||||
line-height: 1.2;
|
||||
color: var(--token-color-foreground-faint);
|
||||
font-size: $size-8;
|
||||
font-size: size_variables.$size-8;
|
||||
}
|
||||
|
||||
.radio-card-radio-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: $ui-gray-050;
|
||||
padding: $spacing-8;
|
||||
background: color_variables.$ui-gray-050;
|
||||
padding: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.is-selected {
|
||||
&.radio-card {
|
||||
border-color: $blue-500;
|
||||
background: $ui-gray-010;
|
||||
box-shadow: $box-shadow-middle;
|
||||
border-color: color_variables.$blue-500;
|
||||
background: color_variables.$ui-gray-010;
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
.radio-card-icon {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
}
|
||||
.radio-card-radio-row {
|
||||
background: $blue-050;
|
||||
background: color_variables.$blue-050;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,11 +10,11 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.raft-join .box.is-fullwidth {
|
||||
padding-top: $spacing-12;
|
||||
padding-bottom: $spacing-12;
|
||||
padding-top: size_variables.$spacing-12;
|
||||
padding-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
.raft-join-unseal {
|
||||
color: $orange;
|
||||
font-size: $size-6;
|
||||
color: color_variables.$orange;
|
||||
font-size: size_variables.$size-6;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -14,12 +18,12 @@
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.regex-group {
|
||||
font-family: $family-monospace;
|
||||
font-size: $size-8;
|
||||
color: $ui-gray-600;
|
||||
font-family: font_variables.$family-monospace;
|
||||
font-size: size_variables.$size-8;
|
||||
color: color_variables.$ui-gray-600;
|
||||
}
|
||||
.regex-group-position {
|
||||
background-color: $ui-gray-200;
|
||||
background-color: color_variables.$ui-gray-200;
|
||||
border-radius: 3px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 4px;
|
||||
@ -29,5 +33,5 @@
|
||||
}
|
||||
}
|
||||
.regex-group-value {
|
||||
margin-right: $spacing-16;
|
||||
margin-right: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -10,29 +15,29 @@
|
||||
line-height: normal;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
|
||||
box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
|
||||
}
|
||||
|
||||
.toolbar-link {
|
||||
color: $blue-500;
|
||||
color: color_variables.$blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-weight: $font-weight-normal;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
}
|
||||
|
||||
.title.is-6 {
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.reindexing-alert,
|
||||
.syncing-alert {
|
||||
margin-top: $spacing-36;
|
||||
margin-top: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.selectable-card-container {
|
||||
margin-top: $spacing-36;
|
||||
margin-top: size_variables.$spacing-36;
|
||||
display: grid;
|
||||
|
||||
&.primary,
|
||||
@ -40,22 +45,22 @@
|
||||
margin: 2rem 0 2rem 0;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
grid-gap: $spacing-36;
|
||||
grid-gap: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: grid;
|
||||
grid-gap: $spacing-12;
|
||||
grid-gap: size_variables.$spacing-12;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 0.2fr 0.2fr 0.2fr;
|
||||
padding: $spacing-24;
|
||||
padding: size_variables.$spacing-24;
|
||||
line-height: 1.5;
|
||||
|
||||
&.summary {
|
||||
@ -66,7 +71,7 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include until(1320px) {
|
||||
@include mixins.until(1320px) {
|
||||
// prevent an issue with the card descriptions wrapping and expanding height
|
||||
min-height: 250px;
|
||||
}
|
||||
@ -120,12 +125,12 @@
|
||||
}
|
||||
|
||||
&.summary {
|
||||
margin-bottom: $spacing-36;
|
||||
margin-bottom: size_variables.$spacing-36;
|
||||
}
|
||||
}
|
||||
.summary-state {
|
||||
padding-bottom: $spacing-36;
|
||||
border-bottom: 1px solid rgba($grey-dark, 0.3);
|
||||
padding-bottom: size_variables.$spacing-36;
|
||||
border-bottom: 1px solid rgba(color_variables.$grey-dark, 0.3);
|
||||
}
|
||||
|
||||
// prevent double lines at the bottom of the dashboard
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -13,7 +15,7 @@
|
||||
}
|
||||
|
||||
.float-right {
|
||||
margin: $spacing-12 0 $spacing-24 0;
|
||||
margin: size_variables.$spacing-12 0 size_variables.$spacing-24 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -15,7 +20,7 @@
|
||||
|
||||
.ember-power-select-trigger {
|
||||
border: 0;
|
||||
border-radius: $radius;
|
||||
border-radius: size_variables.$radius;
|
||||
padding-right: 0;
|
||||
|
||||
&--active {
|
||||
@ -43,13 +48,13 @@
|
||||
z-index: -1;
|
||||
|
||||
&::after {
|
||||
background: $white;
|
||||
bottom: $spacing-4;
|
||||
background: color_variables.$white;
|
||||
bottom: size_variables.$spacing-4;
|
||||
content: '';
|
||||
left: $spacing-4 + $spacing-24;
|
||||
left: size_variables.$spacing-4 + size_variables.$spacing-24;
|
||||
position: absolute;
|
||||
right: $spacing-4;
|
||||
top: $spacing-4;
|
||||
right: size_variables.$spacing-4;
|
||||
top: size_variables.$spacing-4;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
@ -57,16 +62,16 @@
|
||||
.ember-power-select-search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: $spacing-4 $spacing-12;
|
||||
padding-left: $spacing-4 + $spacing-24;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-12;
|
||||
padding-left: size_variables.$spacing-4 + size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
div > .ember-power-select-options {
|
||||
background: $white;
|
||||
border: $base-border;
|
||||
box-shadow: $box-shadow-middle;
|
||||
margin: -4px $spacing-8 0;
|
||||
padding: $spacing-4 0;
|
||||
background: color_variables.$white;
|
||||
border: box-shadow_variables.$base-border;
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
margin: -4px size_variables.$spacing-8 0;
|
||||
padding: size_variables.$spacing-4 0;
|
||||
|
||||
.ember-power-select-option,
|
||||
.ember-power-select-option[aria-current='true'] {
|
||||
@ -76,20 +81,20 @@ div > .ember-power-select-options {
|
||||
}
|
||||
|
||||
.ember-power-select-option[aria-current='true'] {
|
||||
background-color: $ui-gray-050;
|
||||
color: $ui-gray-900;
|
||||
background-color: color_variables.$ui-gray-050;
|
||||
color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
.ember-power-select-option--no-matches-message {
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -97,28 +102,28 @@ div > .ember-power-select-options {
|
||||
.search-select-list-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: $spacing-4;
|
||||
padding: size_variables.$spacing-4;
|
||||
justify-content: space-between;
|
||||
border-bottom: $light-border;
|
||||
border-bottom: box-shadow_variables.$light-border;
|
||||
|
||||
.list-item-text {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.control .button {
|
||||
color: $grey-light;
|
||||
color: color_variables.$grey-light;
|
||||
min-width: auto;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-select-list-key {
|
||||
color: var(--token-color-foreground-faint);
|
||||
font-size: $size-8;
|
||||
font-size: size_variables.$size-8;
|
||||
}
|
||||
|
||||
.ember-power-select-dropdown.ember-basic-dropdown-content {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -23,7 +26,7 @@
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 2rem;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
grid-template-columns: 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,12 +9,12 @@
|
||||
.shamir-progress {
|
||||
.shamir-progress-progress {
|
||||
display: inline-block;
|
||||
margin-top: $spacing-8;
|
||||
margin-right: $spacing-12;
|
||||
margin-top: size_variables.$spacing-8;
|
||||
margin-right: size_variables.$spacing-12;
|
||||
}
|
||||
.progress {
|
||||
box-shadow: 0 0 0 4px $ui-gray-050;
|
||||
margin-top: $spacing-8;
|
||||
box-shadow: 0 0 0 4px color_variables.$ui-gray-050;
|
||||
margin-top: size_variables.$spacing-8;
|
||||
min-width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,19 +12,19 @@
|
||||
|
||||
.popup-menu-content {
|
||||
.menu-label {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
text-transform: unset;
|
||||
}
|
||||
.token-alert {
|
||||
padding: $spacing-8;
|
||||
padding: size_variables.$spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-action-message p {
|
||||
padding-top: $spacing-4;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $black;
|
||||
padding-top: size_variables.$spacing-4;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
color: color_variables.$black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,35 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.splash-page-logo {
|
||||
padding: $spacing-8 $spacing-12 $spacing-8 $spacing-24;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-12 size_variables.$spacing-8
|
||||
size_variables.$spacing-24;
|
||||
|
||||
@include from($mobile) {
|
||||
padding-left: $spacing-8;
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
padding-left: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $white;
|
||||
fill: color_variables.$white;
|
||||
height: 24px;
|
||||
width: 72px;
|
||||
|
||||
@include from($mobile) {
|
||||
margin-left: $spacing-8;
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
margin-left: size_variables.$spacing-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.splash-page-container {
|
||||
margin: $spacing-36 0;
|
||||
margin: size_variables.$spacing-36 0;
|
||||
}
|
||||
|
||||
.splash-page-header {
|
||||
padding: $spacing-14 0;
|
||||
padding: size_variables.$spacing-14 0;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -12,98 +16,98 @@
|
||||
&.l,
|
||||
&.m {
|
||||
.stat-label {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-bottom: $spacing-4;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
margin-bottom: size_variables.$spacing-4;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-700;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-700;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: $size-3;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-12;
|
||||
font-size: size_variables.$size-3;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
margin-top: size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
&.s {
|
||||
.stat-label {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-700;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-700;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-12;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
margin-top: size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
|
||||
&.l-no-subText {
|
||||
.stat-label {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-700;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-700;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: $size-3;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-4;
|
||||
font-size: size_variables.$size-3;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
margin-top: size_variables.$spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
&.m-no-subText {
|
||||
.stat-label {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-700;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-700;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-top: $spacing-4;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
margin-top: size_variables.$spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
&.s-no-subText {
|
||||
.stat-label {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-500;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-500;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-text {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-700;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-700;
|
||||
line-height: inherit;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $ui-gray-800;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
color: color_variables.$ui-gray-800;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -11,7 +15,7 @@
|
||||
|
||||
.tabs {
|
||||
align-items: stretch;
|
||||
box-shadow: inset 0 -1px 0 $grey-light;
|
||||
box-shadow: inset 0 -1px 0 color_variables.$grey-light;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
@ -30,22 +34,22 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
&.active {
|
||||
border-color: $blue;
|
||||
color: $blue;
|
||||
border-color: color_variables.$blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
li {
|
||||
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
|
||||
&.is-active {
|
||||
border-bottom: 2px solid $blue;
|
||||
color: $blue;
|
||||
border-bottom: 2px solid color_variables.$blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
// solves for tabs on auth mounts & secrets engines
|
||||
> a {
|
||||
&.active {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid $blue;
|
||||
border-bottom: 2px solid color_variables.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,8 +61,8 @@
|
||||
}
|
||||
&.active a,
|
||||
&.is-active a {
|
||||
border-color: $blue;
|
||||
color: $blue;
|
||||
border-color: color_variables.$blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
// important for auth tabs in active state, otherwise the border-bottom will not show.
|
||||
@ -68,20 +72,22 @@
|
||||
justify-content: center;
|
||||
vertical-align: top;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $grey;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: $spacing-14 $spacing-12 $spacing-12;
|
||||
color: color_variables.$grey;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12;
|
||||
text-decoration: none;
|
||||
transition: background-color $speed, border-color $speed;
|
||||
transition:
|
||||
background-color size_variables.$speed,
|
||||
border-color size_variables.$speed;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: $grey-light;
|
||||
border-color: color_variables.$grey-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $ui-gray-050;
|
||||
color: $grey-darkest;
|
||||
background-color: color_variables.$ui-gray-050;
|
||||
color: color_variables.$grey-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,34 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.tool-tip {
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
text-transform: none;
|
||||
margin: 8px 0px 0 -4px;
|
||||
border: none;
|
||||
border-radius: $radius-large;
|
||||
border-radius: size_variables.$radius-large;
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
color: $white;
|
||||
color: color_variables.$white;
|
||||
max-width: 200px;
|
||||
background: $black;
|
||||
background: color_variables.$black;
|
||||
padding: 0.5rem;
|
||||
line-height: 1.4;
|
||||
border-radius: $radius-large;
|
||||
border-radius: size_variables.$radius-large;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
@include css-top-arrow(8px, $black, 1px, $black, 20px);
|
||||
@include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, 20px);
|
||||
&.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
|
||||
animation: drop-fade-above 0.15s;
|
||||
}
|
||||
@ -38,7 +42,7 @@
|
||||
animation: drop-fade-below 0.15s reverse;
|
||||
}
|
||||
&.smaller-font {
|
||||
font-size: $size-8;
|
||||
font-size: size_variables.$size-8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +52,7 @@
|
||||
&::before,
|
||||
&::after {
|
||||
right: auto;
|
||||
left: $spacing-12;
|
||||
left: size_variables.$spacing-12;
|
||||
}
|
||||
}
|
||||
.ember-basic-dropdown-content--right.tool-tip {
|
||||
@ -56,19 +60,25 @@
|
||||
}
|
||||
|
||||
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip {
|
||||
@include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
|
||||
@include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
|
||||
}
|
||||
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip {
|
||||
@include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
|
||||
@include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
|
||||
}
|
||||
.ember-basic-dropdown-content--above.tool-tip {
|
||||
@include css-bottom-arrow(8px, $black, 1px, $black);
|
||||
@include mixins.css-bottom-arrow(8px, color_variables.$black, 1px, color_variables.$black);
|
||||
& {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
.ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip {
|
||||
@include css-bottom-arrow(8px, $black, 1px, $black, calc(100% - 20px));
|
||||
@include mixins.css-bottom-arrow(
|
||||
8px,
|
||||
color_variables.$black,
|
||||
1px,
|
||||
color_variables.$black,
|
||||
calc(100% - 20px)
|
||||
);
|
||||
}
|
||||
|
||||
.b-checkbox .tool-tip-trigger {
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/buttons.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,20 +14,24 @@
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: $ui-gray-010;
|
||||
border: 1px solid $ui-gray-100;
|
||||
border-bottom-color: $ui-gray-300;
|
||||
border-top-color: $ui-gray-300;
|
||||
background-color: color_variables.$ui-gray-010;
|
||||
border: 1px solid color_variables.$ui-gray-100;
|
||||
border-bottom-color: color_variables.$ui-gray-300;
|
||||
border-top-color: color_variables.$ui-gray-300;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(to right, $ui-gray-010, rgba($ui-gray-010, 0));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
color_variables.$ui-gray-010,
|
||||
rgba(color_variables.$ui-gray-010, 0)
|
||||
);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: $spacing-4;
|
||||
width: size_variables.$spacing-4;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@ -32,8 +42,8 @@
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
padding: $spacing-8;
|
||||
color: $grey;
|
||||
padding: size_variables.$spacing-8;
|
||||
color: color_variables.$grey;
|
||||
}
|
||||
|
||||
.toolbar-scroller {
|
||||
@ -43,18 +53,18 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
@include from($mobile) {
|
||||
padding: 0 $spacing-4;
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
padding: 0 size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
border-bottom: $base-border;
|
||||
height: $spacing-4;
|
||||
border-bottom: box-shadow_variables.$base-border;
|
||||
height: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $ui-gray-300;
|
||||
border-radius: $spacing-4;
|
||||
background: color_variables.$ui-gray-300;
|
||||
border-radius: size_variables.$spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,15 +81,15 @@
|
||||
}
|
||||
|
||||
.toolbar-filters + .toolbar-actions {
|
||||
@include until($mobile) {
|
||||
border-left: $base-border;
|
||||
margin-left: $spacing-8;
|
||||
padding-left: $spacing-8;
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
border-left: box-shadow_variables.$base-border;
|
||||
margin-left: size_variables.$spacing-8;
|
||||
padding-left: size_variables.$spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
@include from($mobile) {
|
||||
@include mixins.from(size_variables.$mobile) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@ -89,13 +99,13 @@
|
||||
@extend .is-ghost;
|
||||
@extend .has-icon-right;
|
||||
border: 0;
|
||||
color: $black;
|
||||
transition: background-color $speed;
|
||||
color: color_variables.$black;
|
||||
transition: background-color size_variables.$speed;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background-color: $ui-gray-100;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
border: 0;
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -104,7 +114,7 @@
|
||||
|
||||
&.popup-menu-trigger {
|
||||
height: 2.5rem;
|
||||
padding: $spacing-8 $spacing-12;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@ -120,19 +130,19 @@
|
||||
}
|
||||
}
|
||||
a.disabled.toolbar-link {
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
color: color_variables.$black;
|
||||
background-color: color_variables.$white;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background-color: $ui-gray-100;
|
||||
color: $blue;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-separator {
|
||||
border-right: $light-border;
|
||||
border-right: box-shadow_variables.$light-border;
|
||||
height: 32px;
|
||||
margin: 0 $spacing-8;
|
||||
margin: 0 size_variables.$spacing-8;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.copy-text {
|
||||
background: $ui-gray-010;
|
||||
background: color_variables.$ui-gray-010;
|
||||
|
||||
& > code {
|
||||
color: $ui-gray-800;
|
||||
color: color_variables.$ui-gray-800;
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
.transform-pattern-text div:not(:first-child) {
|
||||
font-family: $family-monospace;
|
||||
font-family: font_variables.$family-monospace;
|
||||
}
|
||||
.transform-decode-formats:not(:last-child) {
|
||||
margin-bottom: $spacing-12;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -9,15 +14,15 @@
|
||||
grid-template-rows: 1fr;
|
||||
align-content: start;
|
||||
grid-gap: 2rem;
|
||||
margin-top: $spacing-24;
|
||||
margin-top: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.transit-card {
|
||||
border-radius: $radius;
|
||||
box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
|
||||
border-radius: size_variables.$radius;
|
||||
box-shadow: 0 0 0 1px rgba(color_variables.$grey-light, 0.4);
|
||||
display: grid;
|
||||
grid-template-columns: 0.45fr 2fr;
|
||||
padding: $spacing-16;
|
||||
padding: size_variables.$spacing-16;
|
||||
border: none;
|
||||
|
||||
.transit-icon {
|
||||
@ -25,20 +30,22 @@
|
||||
}
|
||||
|
||||
.transit-action-description {
|
||||
font-family: $family-sans;
|
||||
font-size: $size-8;
|
||||
color: $grey;
|
||||
font-family: font_variables.$family-sans;
|
||||
font-size: size_variables.$size-8;
|
||||
color: color_variables.$grey;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $grey;
|
||||
font-size: $size-7;
|
||||
margin-bottom: $spacing-4;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-7;
|
||||
margin-bottom: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px $blue-500, $box-shadow-middle;
|
||||
background: $blue-010;
|
||||
box-shadow:
|
||||
0 0 0 1px color_variables.$blue-500,
|
||||
box-shadow_variables.$box-shadow-middle;
|
||||
background: color_variables.$blue-010;
|
||||
|
||||
.title {
|
||||
color: initial;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -14,7 +16,7 @@
|
||||
input.has-error,
|
||||
input.has-error:focus,
|
||||
input.has-error:hover {
|
||||
border-color: $red-dark;
|
||||
border-color: color_variables.$red-dark;
|
||||
}
|
||||
|
||||
.ttl-value-error {
|
||||
|
||||
@ -4,110 +4,110 @@
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import './utils/color_variables'; // colors need to come first.
|
||||
@import './utils/box-shadow_variables';
|
||||
@import './utils/font_variables';
|
||||
@import './utils/size_variables';
|
||||
@use 'utils/color_variables'; // colors need to come first.
|
||||
@use 'utils/box-shadow_variables';
|
||||
@use 'utils/font_variables';
|
||||
@use 'utils/size_variables';
|
||||
|
||||
// Element styling
|
||||
@import './core/element-styling';
|
||||
@use 'core/element-styling';
|
||||
|
||||
// Mixins
|
||||
@import './utils/mixins';
|
||||
@import './utils/animations';
|
||||
@use 'utils/mixins';
|
||||
@use 'utils/animations';
|
||||
|
||||
// Open-api styling
|
||||
@import './utils/swagger';
|
||||
@use 'utils/swagger';
|
||||
|
||||
// Core Styles: each file styles a class that is not associated with a component. Ex: box and not box-label.
|
||||
@import './core/box';
|
||||
@import './core/buttons';
|
||||
@import './core/charts';
|
||||
@import './core/charts-lineal';
|
||||
@import './core/checkbox-and-radio';
|
||||
@import './core/columns';
|
||||
@import './core/containers';
|
||||
@import './core/control';
|
||||
@import './core/field';
|
||||
@import './core/file';
|
||||
@import './core/inputs';
|
||||
@import './core/json-diff-patch';
|
||||
@import './core/label';
|
||||
@import './core/level';
|
||||
@import './core/link';
|
||||
@import './core/lists';
|
||||
@import './core/menu';
|
||||
@import './core/message';
|
||||
@import './core/progress';
|
||||
@import './core/select';
|
||||
@import './core/title';
|
||||
@import './core/toggle';
|
||||
@use 'core/box';
|
||||
@use 'core/buttons';
|
||||
@use 'core/charts';
|
||||
@use 'core/charts-lineal';
|
||||
@use 'core/checkbox-and-radio';
|
||||
@use 'core/columns';
|
||||
@use 'core/containers';
|
||||
@use 'core/control';
|
||||
@use 'core/field';
|
||||
@use 'core/file';
|
||||
@use 'core/inputs';
|
||||
@use 'core/json-diff-patch';
|
||||
@use 'core/label';
|
||||
@use 'core/level';
|
||||
@use 'core/link';
|
||||
@use 'core/lists';
|
||||
@use 'core/menu';
|
||||
@use 'core/message';
|
||||
@use 'core/progress';
|
||||
@use 'core/select';
|
||||
@use 'core/title';
|
||||
@use 'core/toggle';
|
||||
|
||||
// Helpers
|
||||
@import './helper-classes/colors';
|
||||
@import './helper-classes/flexbox-and-grid';
|
||||
@import './helper-classes/layout';
|
||||
@import './helper-classes/general';
|
||||
@import './helper-classes/spacing';
|
||||
@import './helper-classes/typography';
|
||||
@use 'helper-classes/colors';
|
||||
@use 'helper-classes/flexbox-and-grid';
|
||||
@use 'helper-classes/layout';
|
||||
@use 'helper-classes/general';
|
||||
@use 'helper-classes/spacing';
|
||||
@use 'helper-classes/typography';
|
||||
|
||||
// Component specific styling
|
||||
@import './components/auth-form';
|
||||
@import './components/autocomplete-input';
|
||||
@import './components/b64-toggle';
|
||||
@import './components/box-label';
|
||||
@import './components/calendar-widget';
|
||||
@import './components/chart-container';
|
||||
@import './components/clients-date-range';
|
||||
@import './components/cluster-banners';
|
||||
@import './components/codemirror';
|
||||
@import './components/console-ui-panel';
|
||||
@import './components/control-group';
|
||||
@import './components/doc-link';
|
||||
@import './components/empty-state-component';
|
||||
@import './components/env-banner';
|
||||
@import './components/form-section';
|
||||
@import './components/global-flash';
|
||||
@import './components/icon';
|
||||
@import './components/init-illustration';
|
||||
@import './components/info-table-row';
|
||||
@import './components/kmip-role-edit';
|
||||
@import './components/known-secondaries-card.scss';
|
||||
@import './components/linked-block';
|
||||
@import './components/list-item-row';
|
||||
@import './components/loader';
|
||||
@import './components/login-form';
|
||||
@import './components/masked-input';
|
||||
@import './components/namespace-picker';
|
||||
@import './components/namespace-reminder';
|
||||
@import './components/navigate-input';
|
||||
@import './components/overview-card';
|
||||
@import './components/page-header-old';
|
||||
@import './components/popup-menu';
|
||||
@import './components/radio-card';
|
||||
@import './components/radial-progress';
|
||||
@import './components/raft-join';
|
||||
@import './components/read-more';
|
||||
@import './components/regex-validator';
|
||||
@import './components/replication-dashboard';
|
||||
@import './components/replication-page';
|
||||
@import './components/replication-summary';
|
||||
@import './components/role-item';
|
||||
@import './components/search-select';
|
||||
@import './components/selectable-card';
|
||||
@import './components/selectable-card-container';
|
||||
@import './components/secrets-engines-card';
|
||||
@import './components/action-block';
|
||||
@import './components/shamir-progress';
|
||||
@import './components/sidebar';
|
||||
@import './components/splash-page';
|
||||
@import './components/stat-text';
|
||||
@import './components/tabs-component';
|
||||
@import './components/text-file';
|
||||
@import './components/toolbar';
|
||||
@import './components/tool-tip';
|
||||
@import './components/transform-edit';
|
||||
@import './components/transit-card';
|
||||
@import './components/ttl-picker';
|
||||
@import './components/unseal-warning';
|
||||
@import './components/vault-loading';
|
||||
@use 'components/auth-form';
|
||||
@use 'components/autocomplete-input';
|
||||
@use 'components/b64-toggle';
|
||||
@use 'components/box-label';
|
||||
@use 'components/calendar-widget';
|
||||
@use 'components/chart-container';
|
||||
@use 'components/clients-date-range';
|
||||
@use 'components/cluster-banners';
|
||||
@use 'components/codemirror';
|
||||
@use 'components/console-ui-panel';
|
||||
@use 'components/control-group';
|
||||
@use 'components/doc-link';
|
||||
@use 'components/empty-state-component';
|
||||
@use 'components/env-banner';
|
||||
@use 'components/form-section';
|
||||
@use 'components/global-flash';
|
||||
@use 'components/icon';
|
||||
@use 'components/init-illustration';
|
||||
@use 'components/info-table-row';
|
||||
@use 'components/kmip-role-edit';
|
||||
@use 'components/known-secondaries-card.scss';
|
||||
@use 'components/linked-block';
|
||||
@use 'components/list-item-row';
|
||||
@use 'components/loader';
|
||||
@use 'components/login-form';
|
||||
@use 'components/masked-input';
|
||||
@use 'components/namespace-picker';
|
||||
@use 'components/namespace-reminder';
|
||||
@use 'components/navigate-input';
|
||||
@use 'components/overview-card';
|
||||
@use 'components/page-header-old';
|
||||
@use 'components/popup-menu';
|
||||
@use 'components/radio-card';
|
||||
@use 'components/radial-progress';
|
||||
@use 'components/raft-join';
|
||||
@use 'components/read-more';
|
||||
@use 'components/regex-validator';
|
||||
@use 'components/replication-dashboard';
|
||||
@use 'components/replication-page';
|
||||
@use 'components/replication-summary';
|
||||
@use 'components/role-item';
|
||||
@use 'components/search-select';
|
||||
@use 'components/selectable-card';
|
||||
@use 'components/selectable-card-container';
|
||||
@use 'components/secrets-engines-card';
|
||||
@use 'components/action-block';
|
||||
@use 'components/shamir-progress';
|
||||
@use 'components/sidebar';
|
||||
@use 'components/splash-page';
|
||||
@use 'components/stat-text';
|
||||
@use 'components/tabs-component';
|
||||
@use 'components/text-file';
|
||||
@use 'components/toolbar';
|
||||
@use 'components/tool-tip';
|
||||
@use 'components/transform-edit';
|
||||
@use 'components/transit-card';
|
||||
@use 'components/ttl-picker';
|
||||
@use 'components/unseal-warning';
|
||||
@use 'components/vault-loading';
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.box {
|
||||
background-color: $white;
|
||||
background-color: color_variables.$white;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
|
||||
color: $ui-gray-900;
|
||||
box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
|
||||
color: color_variables.$ui-gray-900;
|
||||
display: block;
|
||||
padding: $spacing-18;
|
||||
padding: size_variables.$spacing-18;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
@ -29,12 +33,12 @@
|
||||
}
|
||||
|
||||
&.no-top-shadow {
|
||||
box-shadow: inset 0 -1px 0 0 rgba($black, 0.1);
|
||||
box-shadow: inset 0 -1px 0 0 rgba(color_variables.$black, 0.1);
|
||||
}
|
||||
|
||||
&.has-container {
|
||||
box-shadow: 0 4px 4px rgba($black, 0.25);
|
||||
border: $base-border;
|
||||
padding: $spacing-24;
|
||||
box-shadow: 0 4px 4px rgba(color_variables.$black, 0.25);
|
||||
border: box-shadow_variables.$base-border;
|
||||
padding: size_variables.$spacing-24;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
@use 'sass:color';
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -5,22 +11,26 @@
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
background-color: $grey-lightest;
|
||||
border: 1px solid $grey-light;
|
||||
border-radius: $radius;
|
||||
box-shadow: $box-shadow-low;
|
||||
background-color: color_variables.$grey-lightest;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
border-radius: size_variables.$radius;
|
||||
box-shadow: box-shadow_variables.$box-shadow-low;
|
||||
cursor: pointer;
|
||||
color: $ui-gray-800;
|
||||
color: color_variables.$ui-gray-800;
|
||||
display: inline-block;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
min-height: 2.25rem;
|
||||
min-width: 6rem;
|
||||
padding: 0.5625rem 0.9375rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
|
||||
transition:
|
||||
background-color size_variables.$speed,
|
||||
border-color size_variables.$speed,
|
||||
box-shadow size_variables.$speed,
|
||||
color size_variables.$speed;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@ -37,9 +47,9 @@
|
||||
&:active,
|
||||
&.is-active,
|
||||
&:focus {
|
||||
border-color: darken($grey-light, 10%);
|
||||
box-shadow: $button-box-shadow-standard;
|
||||
color: darken($grey-dark, 10%);
|
||||
border-color: color.adjust(color_variables.$grey-light, $lightness: -10%);
|
||||
box-shadow: box-shadow_variables.$button-box-shadow-standard;
|
||||
color: color.adjust(color_variables.$grey-dark, $lightness: -10%);
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
@ -47,8 +57,8 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $white;
|
||||
border-color: $ui-gray-050;
|
||||
background-color: color_variables.$white;
|
||||
border-color: color_variables.$ui-gray-050;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
@ -58,37 +68,37 @@
|
||||
|
||||
&.is-compact {
|
||||
height: 2rem;
|
||||
padding: $spacing-4 $spacing-12;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
background-color: $red-500;
|
||||
border-color: darken($red-500, 2%);
|
||||
color: $white;
|
||||
text-shadow: 0 1px 1px rgba($black, 0.25);
|
||||
background-color: color_variables.$red-500;
|
||||
border-color: color.adjust(color_variables.$red-500, $lightness: -2%);
|
||||
color: color_variables.$white;
|
||||
text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: darken($red-500, 5%);
|
||||
border-color: darken($red-500, 5%);
|
||||
box-shadow: $box-shadow-middle;
|
||||
background-color: color.adjust(color_variables.$red-500, $lightness: -5%);
|
||||
border-color: color.adjust(color_variables.$red-500, $lightness: -5%);
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: darken($red-500, 10%);
|
||||
border-color: darken($red-500, 10%);
|
||||
box-shadow: $box-shadow-middle;
|
||||
background-color: color.adjust(color_variables.$red-500, $lightness: -10%);
|
||||
border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: darken($red-500, 10%);
|
||||
box-shadow: $button-box-shadow-standard;
|
||||
border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
|
||||
box-shadow: box-shadow_variables.$button-box-shadow-standard;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger-outlined {
|
||||
border: 1px solid $red-500;
|
||||
color: $red-500;
|
||||
border: 1px solid color_variables.$red-500;
|
||||
color: color_variables.$red-500;
|
||||
}
|
||||
|
||||
&.is-flat {
|
||||
@ -101,17 +111,17 @@
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $blue-500;
|
||||
background-color: $grey-lightest;
|
||||
color: color_variables.$blue-500;
|
||||
background-color: color_variables.$grey-lightest;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-icon {
|
||||
padding: 0.25rem $spacing-24;
|
||||
padding: 0.25rem size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
@ -119,7 +129,7 @@
|
||||
pointer-events: none;
|
||||
&::after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid $ui-gray-300;
|
||||
border: 2px solid color_variables.$ui-gray-300;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
@ -136,83 +146,83 @@
|
||||
&.is-link {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
box-shadow: none;
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
background-color: $blue;
|
||||
border-color: darken($blue, 2%);
|
||||
color: $white;
|
||||
font-weight: $font-weight-bold;
|
||||
text-shadow: 0 1px 1px rgba($black, 0.25);
|
||||
background-color: color_variables.$blue;
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -2%);
|
||||
color: color_variables.$white;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
|
||||
|
||||
&:disabled {
|
||||
background-color: $ui-gray-700;
|
||||
background-color: color_variables.$ui-gray-700;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: darken($blue, 5%);
|
||||
border-color: darken($blue, 5%);
|
||||
box-shadow: $box-shadow-middle;
|
||||
background-color: color.adjust(color_variables.$blue, $lightness: -5%);
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -5%);
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: darken($blue, 10%);
|
||||
border-color: darken($blue, 10%);
|
||||
box-shadow: $box-shadow-middle;
|
||||
background-color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
box-shadow: box-shadow_variables.$box-shadow-middle;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: darken($blue, 10%);
|
||||
box-shadow: $button-box-shadow-standard;
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
box-shadow: box-shadow_variables.$button-box-shadow-standard;
|
||||
}
|
||||
|
||||
&.is-loading::after {
|
||||
border-color: transparent transparent $white $white;
|
||||
border-color: transparent transparent color_variables.$white color_variables.$white;
|
||||
}
|
||||
|
||||
&.is-underlined {
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid darken($blue, 10%);
|
||||
border-bottom: 2px solid color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
border-radius: unset;
|
||||
color: darken($blue, 10%);
|
||||
color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
// is-primary.is-outlined the only is-outlined buttons are primary.
|
||||
&.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: $blue;
|
||||
color: $blue;
|
||||
border-color: color_variables.$blue;
|
||||
color: color_variables.$blue;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
border-color: darken($blue, 10%);
|
||||
color: $blue;
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: transparent;
|
||||
border-color: darken($blue, 10%);
|
||||
color: darken($blue, 10%);
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
color: color.adjust(color_variables.$blue, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-outlined [disabled] {
|
||||
background-color: transparent;
|
||||
border-color: $ui-gray-700;
|
||||
border-color: color_variables.$ui-gray-700;
|
||||
box-shadow: none;
|
||||
color: $ui-gray-700;
|
||||
color: color_variables.$ui-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +237,7 @@
|
||||
// End of button types
|
||||
|
||||
&.tool-tip-trigger {
|
||||
color: $grey-dark;
|
||||
color: color_variables.$grey-dark;
|
||||
min-width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
@ -246,7 +256,7 @@
|
||||
&,
|
||||
&:first-child:last-child {
|
||||
position: relative;
|
||||
left: -$size-10;
|
||||
left: -(size_variables.$size-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -255,8 +265,8 @@
|
||||
.hs-icon {
|
||||
&,
|
||||
&:first-child:last-child {
|
||||
margin-left: $spacing-4;
|
||||
margin-right: -$spacing-4;
|
||||
margin-left: size_variables.$spacing-4;
|
||||
margin-right: -(size_variables.$spacing-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -264,7 +274,7 @@
|
||||
|
||||
.button.icon {
|
||||
box-sizing: border-box;
|
||||
padding: 0 $spacing-4;
|
||||
padding: 0 size_variables.$spacing-4;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&,
|
||||
@ -281,8 +291,8 @@
|
||||
}
|
||||
|
||||
a.button.disabled {
|
||||
color: $white;
|
||||
background-color: $grey-dark;
|
||||
color: color_variables.$white;
|
||||
background-color: color_variables.$grey-dark;
|
||||
opacity: 0.5;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
@ -305,7 +315,7 @@ a.button.disabled {
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
color: $grey-light;
|
||||
color: color_variables.$grey-light;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@ -313,19 +323,19 @@ a.button.disabled {
|
||||
// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
|
||||
// Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
|
||||
.hds-copy-button {
|
||||
font-weight: $font-weight-semibold; // TODO delete
|
||||
box-shadow: $box-shadow-low; // TODO delete
|
||||
font-weight: font_variables.$font-weight-semibold; // TODO delete
|
||||
box-shadow: box-shadow_variables.$box-shadow-low; // TODO delete
|
||||
|
||||
&.white-icon svg {
|
||||
color: $white;
|
||||
color: color_variables.$white;
|
||||
}
|
||||
|
||||
&.icon-grey-300 svg {
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
&.icon-grey-500 svg {
|
||||
color: $ui-gray-500;
|
||||
color: color_variables.$ui-gray-500;
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
@ -333,30 +343,30 @@ a.button.disabled {
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border: 1px solid $grey-light;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
border-color: var(--token-color-border-strong);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $blue;
|
||||
border-color: darken($blue, 2%);
|
||||
color: $white;
|
||||
font-weight: $font-weight-bold;
|
||||
text-shadow: 0 1px 1px rgba($black, 0.25);
|
||||
background-color: color_variables.$blue;
|
||||
border-color: color.adjust(color_variables.$blue, $lightness: -2%);
|
||||
color: color_variables.$white;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
|
||||
svg {
|
||||
color: $white;
|
||||
color: color_variables.$white;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: $grey-lightest;
|
||||
border: 1px solid $grey-light;
|
||||
background-color: color_variables.$grey-lightest;
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
}
|
||||
|
||||
&.in-dropdown {
|
||||
div {
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
}
|
||||
svg {
|
||||
color: transparent;
|
||||
@ -366,17 +376,17 @@ a.button.disabled {
|
||||
|
||||
// Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
|
||||
.hds-button {
|
||||
font-weight: $font-weight-semibold; // TODO consult design on font weight after button class audit
|
||||
font-weight: font_variables.$font-weight-semibold; // TODO consult design on font weight after button class audit
|
||||
display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet
|
||||
// for toolbar-button must pass arg @color="secondary"
|
||||
&.toolbar-button {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
&:hover:not(.disabled) {
|
||||
background-color: $ui-gray-100;
|
||||
color: $blue;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -16,12 +19,12 @@
|
||||
fill: var(--token-color-palette-blue-300);
|
||||
}
|
||||
.lineal-axis {
|
||||
color: $ui-gray-500;
|
||||
color: color_variables.$ui-gray-500;
|
||||
text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
line {
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
}
|
||||
.lineal-tooltip-position {
|
||||
@ -34,7 +37,7 @@
|
||||
transform: translate(calc(1px * var(--x, 0)), calc(-1px * var(--y, 0)));
|
||||
transform-origin: bottom left;
|
||||
z-index: 100;
|
||||
margin-bottom: $spacing-8;
|
||||
margin-bottom: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
// @colorScale arg for Lineal::VBars is "blue-bar", indices are added by lineal
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -33,21 +37,21 @@
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
padding-left: $spacing-8;
|
||||
padding-right: $spacing-36;
|
||||
padding-left: size_variables.$spacing-8;
|
||||
padding-right: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
background-color: $black;
|
||||
background-color: color_variables.$black;
|
||||
color: white;
|
||||
font-size: $size-9;
|
||||
font-size: size_variables.$size-9;
|
||||
padding: 6px;
|
||||
border-radius: $radius-large;
|
||||
border-radius: size_variables.$radius-large;
|
||||
flex-wrap: nowrap;
|
||||
width: fit-content;
|
||||
|
||||
.bold {
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +64,7 @@
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 9px solid $black;
|
||||
border-top: 9px solid color_variables.$black;
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
bottom: -9px;
|
||||
@ -69,21 +73,21 @@
|
||||
|
||||
.has-grid {
|
||||
g > text {
|
||||
color: $ui-gray-500;
|
||||
font-size: $size-9;
|
||||
color: color_variables.$ui-gray-500;
|
||||
font-size: size_variables.$size-9;
|
||||
}
|
||||
|
||||
g > line {
|
||||
// TODO: mix-blend doesn't work in firefox browser?
|
||||
mix-blend-mode: darken;
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
.tick > text {
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $size-9;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
font-size: size_variables.$size-9;
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,16 +99,16 @@
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
margin-left: $spacing-48;
|
||||
margin-right: $spacing-48;
|
||||
margin-left: size_variables.$spacing-48;
|
||||
margin-right: size_variables.$spacing-48;
|
||||
}
|
||||
.chart-container-right {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 4;
|
||||
margin-left: $spacing-48;
|
||||
margin-right: $spacing-48;
|
||||
margin-left: size_variables.$spacing-48;
|
||||
margin-right: size_variables.$spacing-48;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -28,7 +32,7 @@
|
||||
.radio[disabled],
|
||||
.checkbox input[disabled],
|
||||
.radio input[disabled] {
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -39,8 +43,8 @@
|
||||
|
||||
// one-off checkbox class
|
||||
.checkbox-help-text {
|
||||
color: $ui-gray-700;
|
||||
font-size: $size-7;
|
||||
color: color_variables.$ui-gray-700;
|
||||
font-size: size_variables.$size-7;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
@ -51,9 +55,9 @@
|
||||
}
|
||||
|
||||
.b-checkbox label::before {
|
||||
background-color: $white;
|
||||
background-color: color_variables.$white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $ui-gray-300;
|
||||
border: 1px solid color_variables.$ui-gray-300;
|
||||
content: '';
|
||||
height: 17px;
|
||||
left: 0;
|
||||
@ -64,12 +68,12 @@
|
||||
}
|
||||
|
||||
.b-checkbox input[type='checkbox']:checked + label::before {
|
||||
border-color: $blue;
|
||||
border-color: color_variables.$blue;
|
||||
}
|
||||
|
||||
.b-checkbox input[type='checkbox']:checked + label::after,
|
||||
.b-checkbox input[type='radio']:checked + label::after {
|
||||
font-family: $family-monospace;
|
||||
font-family: font_variables.$family-monospace;
|
||||
/*checkmark from ionicons*/
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 512 512' fill='%231563ff'%3E%3Cpath d='M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z'/%3E%3C/svg%3E");
|
||||
}
|
||||
@ -82,7 +86,7 @@
|
||||
}
|
||||
|
||||
.b-checkbox label::after {
|
||||
color: $ui-gray-800;
|
||||
color: color_variables.$ui-gray-800;
|
||||
font-size: 12px;
|
||||
height: 16px;
|
||||
left: 3px;
|
||||
@ -107,7 +111,7 @@
|
||||
|
||||
.b-checkbox input[type='checkbox']:disabled + label::before,
|
||||
.b-checkbox input[type='radio']:disabled + label::before {
|
||||
background-color: $ui-gray-100;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,12 +9,12 @@
|
||||
|
||||
// Columns (plural)
|
||||
.columns {
|
||||
margin-left: -$spacing-10;
|
||||
margin-right: -$spacing-10;
|
||||
margin-top: -$spacing-10;
|
||||
margin-left: -(size_variables.$spacing-10);
|
||||
margin-right: -(size_variables.$spacing-10);
|
||||
margin-top: -(size_variables.$spacing-10);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -$spacing-10;
|
||||
margin-bottom: -(size_variables.$spacing-10);
|
||||
}
|
||||
|
||||
&.is-centered {
|
||||
@ -31,7 +33,7 @@
|
||||
}
|
||||
|
||||
&.is-gapless:not(:last-child) {
|
||||
margin-bottom: $spacing-20;
|
||||
margin-bottom: size_variables.$spacing-20;
|
||||
}
|
||||
|
||||
&.is-gapless:last-child {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -21,7 +23,7 @@
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 $spacing-20;
|
||||
padding: 0 size_variables.$spacing-20;
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -37,7 +41,7 @@ body,
|
||||
pre:not(.hds-code-block__code),
|
||||
strong,
|
||||
table th {
|
||||
color: $ui-gray-900;
|
||||
color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -80,8 +84,8 @@ object {
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: $white;
|
||||
font-size: $base-font-size; // 16px
|
||||
background-color: color_variables.$white;
|
||||
font-size: size_variables.$base-font-size; // 16px
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-width: 300px;
|
||||
@ -104,7 +108,7 @@ button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $family-sans;
|
||||
font-family: font_variables.$family-sans;
|
||||
}
|
||||
|
||||
code,
|
||||
@ -121,14 +125,14 @@ pre code {
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $size-6;
|
||||
font-size: size_variables.$size-6;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue-500;
|
||||
color: color_variables.$blue-500;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
|
||||
@ -140,19 +144,19 @@ a {
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $ui-gray-900;
|
||||
color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
color: $ui-gray-700;
|
||||
color: color_variables.$ui-gray-700;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $ui-gray-300;
|
||||
background-color: color_variables.$ui-gray-300;
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
@ -190,7 +194,7 @@ label {
|
||||
// <Hds::Dropdown>
|
||||
.hds-dropdown-list-item {
|
||||
> button:disabled {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,12 +11,12 @@
|
||||
.field {
|
||||
// cannot use :read-only selector because tag used for other purposes
|
||||
&.is-readOnly {
|
||||
background-color: $ui-gray-100;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $spacing-20;
|
||||
margin-bottom: size_variables.$spacing-20;
|
||||
}
|
||||
}
|
||||
// must come after field due to overriding the margin-bottom of not last-child
|
||||
@ -47,8 +50,8 @@
|
||||
.checkbox,
|
||||
.input,
|
||||
.select select {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: size_variables.$radius;
|
||||
border-top-left-radius: size_variables.$radius;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@ -56,8 +59,8 @@
|
||||
.checkbox,
|
||||
.input,
|
||||
.select select {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: size_variables.$radius;
|
||||
border-top-right-radius: size_variables.$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -110,7 +113,7 @@ fieldset.form-fieldset {
|
||||
flex-shrink: 1;
|
||||
|
||||
> .field:not(:last-child) {
|
||||
margin-right: $spacing-10;
|
||||
margin-right: size_variables.$spacing-10;
|
||||
}
|
||||
.field:not(.is-narrow) {
|
||||
flex-grow: 1;
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
@use '../core/buttons.scss';
|
||||
@use '../core/inputs.scss';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -11,8 +17,8 @@
|
||||
|
||||
.file-cta {
|
||||
align-items: center;
|
||||
border: $base-border;
|
||||
border-radius: $radius;
|
||||
border: box-shadow_variables.$base-border;
|
||||
border-radius: size_variables.$radius;
|
||||
display: inline-flex;
|
||||
height: 2.25em;
|
||||
justify-content: flex-start;
|
||||
@ -26,7 +32,7 @@
|
||||
white-space: nowrap;
|
||||
|
||||
&.button {
|
||||
height: $size-2; // in older parts of the code (Ex: shamir-modal-flow) this class is not a button. In newer parts of the code it is, and height needs to match the height of a button (2.5rem).
|
||||
height: size_variables.$size-2; // in older parts of the code (Ex: shamir-modal-flow) this class is not a button. In newer parts of the code it is, and height needs to match the height of a button (2.5rem).
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -43,9 +49,9 @@
|
||||
.file-delete-button {
|
||||
@extend .button;
|
||||
@extend .is-transparent;
|
||||
color: $grey;
|
||||
color: color_variables.$grey;
|
||||
position: absolute;
|
||||
right: $spacing-8;
|
||||
right: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@ -77,8 +83,8 @@
|
||||
|
||||
.file-name {
|
||||
@extend .input;
|
||||
border: $base-border;
|
||||
border-radius: $radius;
|
||||
border: box-shadow_variables.$base-border;
|
||||
border-radius: size_variables.$radius;
|
||||
box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,18 +13,18 @@
|
||||
.input,
|
||||
.textarea {
|
||||
align-items: center;
|
||||
border-radius: $radius;
|
||||
border: $base-border;
|
||||
box-shadow: 0 4px 1px rgba($black, 0.06) inset;
|
||||
color: $grey-dark;
|
||||
border-radius: size_variables.$radius;
|
||||
border: box-shadow_variables.$base-border;
|
||||
box-shadow: 0 4px 1px rgba(color_variables.$black, 0.06) inset;
|
||||
color: color_variables.$grey-dark;
|
||||
display: inline-flex;
|
||||
font-size: $size-6;
|
||||
height: $size-2;
|
||||
font-size: size_variables.$size-6;
|
||||
height: size_variables.$size-2;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
padding-bottom: calc(0.375em - 1px);
|
||||
padding-left: $spacing-12;
|
||||
padding-right: $spacing-12;
|
||||
padding-left: size_variables.$spacing-12;
|
||||
padding-right: size_variables.$spacing-12;
|
||||
padding-top: calc(0.375em - 1px);
|
||||
width: 100%;
|
||||
|
||||
@ -28,17 +33,17 @@
|
||||
&.is-active,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
background-color: $white;
|
||||
border-color: $blue-500 !important;
|
||||
background-color: color_variables.$white;
|
||||
border-color: color_variables.$blue-500 !important;
|
||||
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $ui-gray-300;
|
||||
border-color: color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
@include until($desktop) {
|
||||
font-size: $size-6;
|
||||
@include mixins.until(size_variables.$desktop) {
|
||||
font-size: size_variables.$size-6;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
@ -48,13 +53,13 @@
|
||||
|
||||
.input[disabled],
|
||||
.textarea[disabled] {
|
||||
border-color: $grey-light;
|
||||
background-color: $ui-gray-100;
|
||||
color: $ui-gray-500;
|
||||
border-color: color_variables.$grey-light;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
color: color_variables.$ui-gray-500;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-light;
|
||||
border-color: color_variables.$grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,7 +84,7 @@
|
||||
|
||||
// custom input
|
||||
.input-hint {
|
||||
padding: 0 $spacing-10;
|
||||
font-size: $size-8;
|
||||
padding: 0 size_variables.$spacing-10;
|
||||
font-size: size_variables.$size-8;
|
||||
color: var(--token-color-foreground-faint);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -19,7 +21,7 @@
|
||||
}
|
||||
|
||||
.jsondiffpatch-property-name {
|
||||
color: $ui-gray-300;
|
||||
color: color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
.jsondiffpatch-added > .jsondiffpatch-property-name {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,12 +10,12 @@
|
||||
// This file defines the style for .is-label
|
||||
|
||||
.is-label {
|
||||
color: $grey-darkest;
|
||||
color: color_variables.$grey-darkest;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-4;
|
||||
gap: size_variables.$spacing-4;
|
||||
width: min-content;
|
||||
min-width: 100%;
|
||||
|
||||
@ -25,6 +29,6 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $grey-light;
|
||||
border-color: color_variables.$grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -9,11 +12,11 @@
|
||||
}
|
||||
|
||||
.level code {
|
||||
border-radius: $radius;
|
||||
border-radius: size_variables.$radius;
|
||||
}
|
||||
|
||||
.level:not(:last-child) {
|
||||
@include vault-block;
|
||||
@include mixins.vault-block;
|
||||
}
|
||||
|
||||
.level-left,
|
||||
@ -45,7 +48,7 @@
|
||||
|
||||
.level.is-mobile .level-item:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-right: $spacing-10;
|
||||
margin-right: size_variables.$spacing-10;
|
||||
}
|
||||
|
||||
.level.is-mobile .level-item:not(.is-narrow) {
|
||||
@ -92,6 +95,6 @@
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.level-item:not(:last-child) {
|
||||
margin-bottom: $spacing-10;
|
||||
margin-bottom: size_variables.$spacing-10;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,14 +9,14 @@
|
||||
.link {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
user-select: text;
|
||||
|
||||
&[disabled] {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -9,22 +13,22 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
font-size: $size-5;
|
||||
color: $blue-500;
|
||||
font-size: size_variables.$size-5;
|
||||
color: color_variables.$blue-500;
|
||||
content: '|';
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
margin: $spacing-10 $spacing-10 0;
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin: size_variables.$spacing-10 size_variables.$spacing-10 0;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-8;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul.bullet {
|
||||
list-style: disc;
|
||||
padding-left: $spacing-16;
|
||||
padding-left: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.menu {
|
||||
font-size: $size-6;
|
||||
font-size: size_variables.$size-6;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
display: block;
|
||||
padding: $spacing-8 $spacing-10;
|
||||
padding: size_variables.$spacing-8 size_variables.$spacing-10;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -25,10 +29,10 @@
|
||||
.column .menu-list a {
|
||||
border-radius: 0;
|
||||
border-right: 0 solid transparent;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-weight: font_variables.$font-weight-semibold;
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,108 +1,113 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
.alert-title {
|
||||
font-size: $size-5;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: size_variables.$size-5;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: $blue-010;
|
||||
border: 1px solid $blue-100;
|
||||
margin-bottom: $spacing-12;
|
||||
padding: $spacing-12 $spacing-16 $spacing-16 $spacing-12;
|
||||
background: color_variables.$blue-010;
|
||||
border: 1px solid color_variables.$blue-100;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16
|
||||
size_variables.$spacing-12;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $spacing-20;
|
||||
margin-bottom: size_variables.$spacing-20;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
color: $blue;
|
||||
margin-right: $spacing-8;
|
||||
color: color_variables.$blue;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $blue-500;
|
||||
color: color_variables.$blue-500;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
border: 0;
|
||||
padding: 1em 1.25em;
|
||||
margin-top: $spacing-4;
|
||||
margin-top: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
// message types, see message-types.js
|
||||
&.is-danger {
|
||||
background: $red-010;
|
||||
border: 1px solid $red-050;
|
||||
background: color_variables.$red-010;
|
||||
border: 1px solid color_variables.$red-050;
|
||||
|
||||
.message-body {
|
||||
color: $red-700;
|
||||
color: color_variables.$red-700;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
color: $red-500;
|
||||
color: color_variables.$red-500;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $red-700;
|
||||
color: color_variables.$red-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-highlight {
|
||||
background: $yellow-010;
|
||||
border: 1px solid $yellow-100;
|
||||
background: color_variables.$yellow-010;
|
||||
border: 1px solid color_variables.$yellow-100;
|
||||
|
||||
.message-body {
|
||||
color: $ui-gray-900;
|
||||
color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
color: $yellow-500;
|
||||
color: color_variables.$yellow-500;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $orange-700;
|
||||
color: color_variables.$orange-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
background-color: $blue-010;
|
||||
background-color: color_variables.$blue-010;
|
||||
|
||||
.message-body {
|
||||
color: $blue-700;
|
||||
color: color_variables.$blue-700;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
background-color: $blue-500;
|
||||
color: $white;
|
||||
background-color: color_variables.$blue-500;
|
||||
color: color_variables.$white;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $blue-700;
|
||||
color: color_variables.$blue-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
background: $green-010;
|
||||
border: 1px solid $green-100;
|
||||
background: color_variables.$green-010;
|
||||
border: 1px solid color_variables.$green-100;
|
||||
|
||||
.message-body {
|
||||
color: $green-900;
|
||||
color: color_variables.$green-900;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
color: $green-500;
|
||||
color: color_variables.$green-500;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $green-700;
|
||||
color: color_variables.$green-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/box-shadow_variables';
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -5,12 +9,12 @@
|
||||
|
||||
.progress {
|
||||
appearance: none;
|
||||
background: $ui-gray-050;
|
||||
background: color_variables.$ui-gray-050;
|
||||
border: none;
|
||||
box-shadow: inset $box-link-shadow;
|
||||
border-radius: $radius;
|
||||
box-shadow: inset box-shadow_variables.$box-link-shadow;
|
||||
border-radius: size_variables.$radius;
|
||||
display: block;
|
||||
height: $size-6;
|
||||
height: size_variables.$size-6;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
@ -23,7 +27,7 @@
|
||||
width: 30px;
|
||||
}
|
||||
&.is-medium {
|
||||
height: $size-5;
|
||||
height: size_variables.$size-5;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
@ -31,20 +35,20 @@
|
||||
// style the container in chrome
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: #ededed;
|
||||
box-shadow: inset $box-link-shadow;
|
||||
box-shadow: inset box-shadow_variables.$box-link-shadow;
|
||||
}
|
||||
|
||||
// style the bar in chrome
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: #4a4a4a;
|
||||
border-radius: $radius;
|
||||
transition: width 1s $easing;
|
||||
border-radius: size_variables.$radius;
|
||||
transition: width 1s size_variables.$easing;
|
||||
}
|
||||
|
||||
// style the bar in firefox
|
||||
.progress[value]::-moz-progress-bar {
|
||||
border-radius: $radius;
|
||||
transition: width 1s $easing;
|
||||
border-radius: size_variables.$radius;
|
||||
transition: width 1s size_variables.$easing;
|
||||
}
|
||||
|
||||
.progress::-ms-fill {
|
||||
@ -70,17 +74,17 @@
|
||||
}
|
||||
|
||||
.progress.is-success::-webkit-progress-value {
|
||||
background-color: $green-500;
|
||||
background-color: color_variables.$green-500;
|
||||
}
|
||||
|
||||
.progress.is-success::-moz-progress-bar {
|
||||
background-color: $green-500;
|
||||
background-color: color_variables.$green-500;
|
||||
}
|
||||
|
||||
.progress.is-success::-ms-fill {
|
||||
background-color: $green-500;
|
||||
background-color: color_variables.$green-500;
|
||||
}
|
||||
|
||||
.progress.is-success:indeterminate {
|
||||
background-image: linear-gradient(to right, $green-500 30%, #ededed 30%);
|
||||
background-image: linear-gradient(to right, color_variables.$green-500 30%, #ededed 30%);
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,11 +12,11 @@ select {
|
||||
}
|
||||
|
||||
.select select {
|
||||
background-color: $ui-gray-050;
|
||||
box-shadow: 0 3px 1px rgba($black, 0.12);
|
||||
border: 1px solid $grey-light;
|
||||
border-radius: $radius;
|
||||
color: $grey-dark;
|
||||
background-color: color_variables.$ui-gray-050;
|
||||
box-shadow: 0 3px 1px rgba(color_variables.$black, 0.12);
|
||||
border: 1px solid color_variables.$grey-light;
|
||||
border-radius: size_variables.$radius;
|
||||
color: color_variables.$grey-dark;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
@ -20,12 +24,12 @@ select {
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding-bottom: calc(0.375em - 1px);
|
||||
padding-left: $spacing-10;
|
||||
padding-right: $spacing-10;
|
||||
padding-left: size_variables.$spacing-10;
|
||||
padding-right: size_variables.$spacing-10;
|
||||
padding-top: calc(0.375em - 1px);
|
||||
text-rendering: auto !important;
|
||||
|
||||
@include until($desktop) {
|
||||
@include mixins.until(size_variables.$desktop) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@ -37,23 +41,23 @@ select {
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-active {
|
||||
border-color: $blue-500;
|
||||
border-color: color_variables.$blue-500;
|
||||
box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.select select:not([multiple]) {
|
||||
padding-right: $spacing-36;
|
||||
padding-right: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.select select[disabled] {
|
||||
border-color: $grey-light;
|
||||
background-color: $ui-gray-100;
|
||||
color: $ui-gray-500;
|
||||
border-color: color_variables.$grey-light;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
color: color_variables.$ui-gray-500;
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
border-color: $grey-light;
|
||||
border-color: color_variables.$grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,7 +79,7 @@ select {
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: $spacing-8;
|
||||
right: size_variables.$spacing-8;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -14,51 +18,51 @@
|
||||
.title {
|
||||
color: hsl(0, 0%, 21%);
|
||||
font-size: 2rem;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: font_variables.$font-weight-bold;
|
||||
line-height: 1.125;
|
||||
word-break: break-word;
|
||||
|
||||
> a {
|
||||
color: $black;
|
||||
color: color_variables.$black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// title sizes
|
||||
&.is-2 {
|
||||
font-size: $size-2;
|
||||
font-size: size_variables.$size-2;
|
||||
}
|
||||
|
||||
&.is-3 {
|
||||
font-size: $size-3;
|
||||
font-size: size_variables.$size-3;
|
||||
}
|
||||
|
||||
&.is-4 {
|
||||
font-size: $size-4;
|
||||
font-size: size_variables.$size-4;
|
||||
}
|
||||
|
||||
&.is-5 {
|
||||
font-size: $size-5;
|
||||
font-size: size_variables.$size-5;
|
||||
}
|
||||
|
||||
&.is-6 {
|
||||
font-size: $size-6;
|
||||
font-size: size_variables.$size-6;
|
||||
}
|
||||
|
||||
&.is-7 {
|
||||
font-size: $size-7;
|
||||
font-size: size_variables.$size-7;
|
||||
}
|
||||
|
||||
&.is-8 {
|
||||
font-size: $size-8;
|
||||
font-size: size_variables.$size-8;
|
||||
}
|
||||
}
|
||||
|
||||
.form-section .title {
|
||||
margin-bottom: $spacing-12;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.is-subtitle-gray {
|
||||
text-transform: uppercase;
|
||||
font-size: $size-7;
|
||||
color: $ui-gray-500;
|
||||
font-size: size_variables.$size-7;
|
||||
color: color_variables.$ui-gray-500;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -43,7 +46,7 @@
|
||||
height: 1.5rem;
|
||||
border: 0.1rem solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
background: $ui-gray-300;
|
||||
background: color_variables.$ui-gray-300;
|
||||
content: '';
|
||||
}
|
||||
.toggle[type='checkbox'] + label::after {
|
||||
@ -55,12 +58,12 @@
|
||||
height: 1rem;
|
||||
transform: translate3d(0, 0, 0);
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
transition: all 0.25s $easing;
|
||||
background: color_variables.$white;
|
||||
transition: all 0.25s size_variables.$easing;
|
||||
content: '';
|
||||
}
|
||||
.toggle[type='checkbox']:checked + label::before {
|
||||
background: $ui-gray-700;
|
||||
background: color_variables.$ui-gray-700;
|
||||
}
|
||||
.toggle[type='checkbox']:checked + label::after {
|
||||
left: 1.625rem;
|
||||
@ -70,25 +73,25 @@
|
||||
.toggle[type='checkbox'] {
|
||||
&.is-small {
|
||||
+ label {
|
||||
font-size: $size-7;
|
||||
padding-left: $spacing-32;
|
||||
font-size: size_variables.$size-7;
|
||||
padding-left: size_variables.$spacing-32;
|
||||
margin: 0 0.25rem;
|
||||
&::before {
|
||||
top: calc($size-8 / 5);
|
||||
height: $size-8;
|
||||
width: $size-8 * 2;
|
||||
top: calc(size_variables.$size-8 / 5);
|
||||
height: size_variables.$size-8;
|
||||
width: size_variables.$size-8 * 2;
|
||||
}
|
||||
&::after {
|
||||
width: $size-8 * 0.9;
|
||||
height: $size-8 * 0.9;
|
||||
width: size_variables.$size-8 * 0.9;
|
||||
height: size_variables.$size-8 * 0.9;
|
||||
transform: translateX(0.05rem);
|
||||
left: 0;
|
||||
top: calc($size-8 / 4);
|
||||
top: calc(size_variables.$size-8 / 4);
|
||||
}
|
||||
}
|
||||
&:checked + label::after {
|
||||
left: 0;
|
||||
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
|
||||
transform: translateX((size_variables.$size-8 * 2) - (size_variables.$size-8 * 0.94));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -96,10 +99,10 @@
|
||||
will-change: left;
|
||||
}
|
||||
.toggle[type='checkbox']:focus + label {
|
||||
box-shadow: 0 0 1px $blue;
|
||||
box-shadow: 0 0 1px color_variables.$blue;
|
||||
}
|
||||
.toggle[type='checkbox'].is-success:checked + label::before {
|
||||
background: $blue;
|
||||
background: color_variables.$blue;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use 'utils/color_variables';
|
||||
@use 'utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -27,7 +30,7 @@
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
border-bottom: 1px solid $grey-light;
|
||||
border-bottom: 1px solid color_variables.$grey-light;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@ -52,19 +55,19 @@
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacing-16;
|
||||
padding-bottom: $spacing-16;
|
||||
padding-left: size_variables.$spacing-16;
|
||||
padding-bottom: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
background-color: $ui-gray-100;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 1rem;
|
||||
padding: 0.5rem;
|
||||
background: $ui-gray-010;
|
||||
background: color_variables.$ui-gray-010;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -99,12 +102,12 @@
|
||||
}
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid $grey-light;
|
||||
border-bottom: 1px solid color_variables.$grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.docfy-demo {
|
||||
border: 1px solid $grey-lightest;
|
||||
border: 1px solid color_variables.$grey-lightest;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
overflow: scroll;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,23 +9,23 @@
|
||||
|
||||
// background colors
|
||||
.has-background-white-bis {
|
||||
background: $ui-gray-050;
|
||||
background: color_variables.$ui-gray-050;
|
||||
}
|
||||
|
||||
.has-background-gray-100 {
|
||||
background-color: $ui-gray-100;
|
||||
background-color: color_variables.$ui-gray-100;
|
||||
}
|
||||
|
||||
.has-background-gray-200 {
|
||||
background-color: $ui-gray-200;
|
||||
background-color: color_variables.$ui-gray-200;
|
||||
}
|
||||
|
||||
.has-background-gray-300 {
|
||||
background-color: $ui-gray-300;
|
||||
background-color: color_variables.$ui-gray-300;
|
||||
}
|
||||
|
||||
.has-background-gray-900 {
|
||||
background-color: $ui-gray-900;
|
||||
background-color: color_variables.$ui-gray-900;
|
||||
}
|
||||
|
||||
.background-color-black {
|
||||
@ -33,12 +35,12 @@
|
||||
// borders
|
||||
.has-border-top-light {
|
||||
border-radius: 0;
|
||||
border-top: 1px solid $grey-light;
|
||||
border-top: 1px solid color_variables.$grey-light;
|
||||
}
|
||||
|
||||
.has-border-bottom-light {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid $grey-light;
|
||||
border-bottom: 1px solid color_variables.$grey-light;
|
||||
}
|
||||
|
||||
.has-error-border,
|
||||
@ -46,22 +48,22 @@ select.has-error-border,
|
||||
.ttl-picker-form-field-error input,
|
||||
.string-list-form-field-error .field:first-of-type textarea,
|
||||
.hds-form-checkbox.has-error-border {
|
||||
border: 1px solid $red-500;
|
||||
border: 1px solid color_variables.$red-500;
|
||||
}
|
||||
|
||||
.error-border-child-inputs input,
|
||||
.error-border-child-inputs textarea {
|
||||
border: 1px solid $red-500;
|
||||
border: 1px solid color_variables.$red-500;
|
||||
}
|
||||
|
||||
// specifically for the SearchSelect dropdown.
|
||||
.dropdown-has-error-border > div.ember-basic-dropdown-trigger {
|
||||
border: 1px solid $red-500;
|
||||
border: 1px solid color_variables.$red-500;
|
||||
}
|
||||
|
||||
// text color
|
||||
.text-grey-lightest {
|
||||
color: $grey-lightest;
|
||||
color: color_variables.$grey-lightest;
|
||||
}
|
||||
|
||||
.has-text-grey-light {
|
||||
@ -73,23 +75,23 @@ select.has-error-border,
|
||||
}
|
||||
|
||||
.has-text-grey-dark {
|
||||
color: $ui-gray-700 !important;
|
||||
color: color_variables.$ui-gray-700 !important;
|
||||
}
|
||||
|
||||
.has-text-white {
|
||||
color: $white !important;
|
||||
color: color_variables.$white !important;
|
||||
}
|
||||
|
||||
.has-text-black {
|
||||
color: $black !important;
|
||||
color: color_variables.$black !important;
|
||||
}
|
||||
|
||||
.has-text-info {
|
||||
color: $blue-500 !important;
|
||||
color: color_variables.$blue-500 !important;
|
||||
}
|
||||
// same without the !important
|
||||
.has-text-primary {
|
||||
color: $blue-500;
|
||||
color: color_variables.$blue-500;
|
||||
}
|
||||
|
||||
.has-text-success {
|
||||
@ -97,13 +99,13 @@ select.has-error-border,
|
||||
}
|
||||
|
||||
.has-text-highlight {
|
||||
color: $yellow-500;
|
||||
color: color_variables.$yellow-500;
|
||||
}
|
||||
|
||||
.has-text-danger {
|
||||
color: $red-500 !important;
|
||||
color: color_variables.$red-500 !important;
|
||||
}
|
||||
|
||||
.has-text-primary {
|
||||
color: $blue;
|
||||
color: color_variables.$blue;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/mixins';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -23,11 +26,11 @@
|
||||
}
|
||||
|
||||
&.row-gap-8 {
|
||||
row-gap: $spacing-8;
|
||||
row-gap: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
&.column-gap-16 {
|
||||
column-gap: $spacing-16;
|
||||
column-gap: size_variables.$spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,15 +50,15 @@
|
||||
}
|
||||
|
||||
.gap-16 {
|
||||
gap: $spacing-16;
|
||||
gap: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.gap-24 {
|
||||
gap: $spacing-24;
|
||||
gap: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.gap-36 {
|
||||
gap: $spacing-36;
|
||||
gap: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
// Alignment of the items
|
||||
@ -96,7 +99,7 @@
|
||||
justify-content: flex-start;
|
||||
|
||||
&.has-gap {
|
||||
gap: $spacing-16;
|
||||
gap: size_variables.$spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +147,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
.is-flex-row {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
@ -158,7 +161,7 @@
|
||||
.grid-2-columns {
|
||||
grid-template-columns: 2fr 2fr;
|
||||
|
||||
@include until($mobile) {
|
||||
@include mixins.until(size_variables.$mobile) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/color_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -7,7 +10,9 @@
|
||||
|
||||
// box-shadow helpers
|
||||
.has-only-top-shadow {
|
||||
box-shadow: 0 -1px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
|
||||
box-shadow:
|
||||
0 -1px 0 -1px color_variables.$grey-light,
|
||||
0 -2px 0 -1px color_variables.$grey-light;
|
||||
}
|
||||
|
||||
.is-shadowless {
|
||||
@ -15,17 +20,19 @@
|
||||
}
|
||||
|
||||
.is-sideless {
|
||||
box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
|
||||
box-shadow:
|
||||
0 2px 0 -1px color_variables.$grey-light,
|
||||
0 -2px 0 -1px color_variables.$grey-light;
|
||||
}
|
||||
|
||||
// this helper needs to go after is-sideless as they are often used together and is-bottomless needs to override is-sideless (no this is not ideal).
|
||||
.is-bottomless {
|
||||
box-shadow: 0 -1px 0 0 $grey-light;
|
||||
box-shadow: 0 -1px 0 0 color_variables.$grey-light;
|
||||
}
|
||||
|
||||
// border helpers
|
||||
.has-default-border {
|
||||
border: 1px solid $grey !important;
|
||||
border: 1px solid color_variables.$grey !important;
|
||||
}
|
||||
|
||||
.is-borderless {
|
||||
@ -47,7 +54,7 @@
|
||||
|
||||
// other
|
||||
.has-background-transition {
|
||||
transition: background-color ease-out $speed;
|
||||
transition: background-color ease-out size_variables.$speed;
|
||||
}
|
||||
|
||||
.has-current-color-fill {
|
||||
@ -59,14 +66,14 @@
|
||||
|
||||
// large grouped css blocks
|
||||
.is-hint {
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
padding: $spacing-12 0;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-8;
|
||||
padding: size_variables.$spacing-12 0;
|
||||
}
|
||||
|
||||
.is-optional {
|
||||
color: $grey;
|
||||
font-size: $size-8;
|
||||
color: color_variables.$grey;
|
||||
font-size: size_variables.$size-8;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
@ -119,7 +126,7 @@
|
||||
|
||||
// border-radius
|
||||
.border-radius-4 {
|
||||
border-radius: $radius-large;
|
||||
border-radius: size_variables.$radius-large;
|
||||
}
|
||||
|
||||
// border-spacing
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -42,7 +44,7 @@
|
||||
}
|
||||
|
||||
.top-xxs {
|
||||
top: $spacing-4;
|
||||
top: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
// visibility
|
||||
@ -81,7 +83,7 @@
|
||||
}
|
||||
|
||||
.is-medium-width {
|
||||
width: calc($desktop / 2.5);
|
||||
width: calc(size_variables.$desktop / 2.5);
|
||||
}
|
||||
|
||||
.is-medium-height {
|
||||
@ -89,7 +91,7 @@
|
||||
}
|
||||
|
||||
.is-calc-large-height {
|
||||
height: calc($desktop * 0.66);
|
||||
height: calc(size_variables.$desktop * 0.66);
|
||||
}
|
||||
|
||||
// float
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -14,85 +16,85 @@
|
||||
}
|
||||
|
||||
.has-short-padding {
|
||||
padding: $spacing-4 $spacing-18;
|
||||
padding: size_variables.$spacing-4 size_variables.$spacing-18;
|
||||
}
|
||||
|
||||
.has-tall-padding {
|
||||
padding: $spacing-36;
|
||||
padding: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.has-side-padding-8 {
|
||||
padding-left: $spacing-8;
|
||||
padding-right: $spacing-8;
|
||||
padding-left: size_variables.$spacing-8;
|
||||
padding-right: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.has-side-padding-s {
|
||||
padding-left: $spacing-12;
|
||||
padding-right: $spacing-12;
|
||||
padding-left: size_variables.$spacing-12;
|
||||
padding-right: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-padding-s {
|
||||
padding: $spacing-12;
|
||||
padding: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-padding-xxs {
|
||||
padding: $spacing-4;
|
||||
padding: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-padding-m {
|
||||
padding: $spacing-16;
|
||||
padding: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-padding-l {
|
||||
padding: $spacing-24;
|
||||
padding: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-bottom-padding-s {
|
||||
padding-bottom: $spacing-12;
|
||||
padding-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-bottom-padding-m {
|
||||
padding-bottom: $spacing-16;
|
||||
padding-bottom: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-bottom-padding-l {
|
||||
padding-bottom: $spacing-24;
|
||||
padding-bottom: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-top-padding-xs {
|
||||
padding-top: $spacing-8;
|
||||
padding-top: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.top-padding-4 {
|
||||
padding-top: $spacing-4;
|
||||
padding-top: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-top-padding-s {
|
||||
padding-top: $spacing-12;
|
||||
padding-top: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-top-padding-m {
|
||||
padding-top: $spacing-16;
|
||||
padding-top: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-top-padding-l {
|
||||
padding-top: $spacing-24;
|
||||
padding-top: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-left-padding-xs {
|
||||
padding-left: $spacing-8;
|
||||
padding-left: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.has-left-padding-s {
|
||||
padding-left: $spacing-12;
|
||||
padding-left: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-left-padding-l {
|
||||
padding-left: $spacing-24;
|
||||
padding-left: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-top-padding-xxl {
|
||||
padding-top: $spacing-48;
|
||||
padding-top: size_variables.$spacing-48;
|
||||
}
|
||||
|
||||
// All Margin helpers
|
||||
@ -102,135 +104,135 @@
|
||||
|
||||
// spacing-18 is between medium + large
|
||||
.has-top-bottom-margin {
|
||||
margin: $spacing-18 0rem;
|
||||
margin: size_variables.$spacing-18 0rem;
|
||||
}
|
||||
|
||||
.has-top-bottom-margin-xxs {
|
||||
margin: $spacing-4 0;
|
||||
margin: size_variables.$spacing-4 0;
|
||||
}
|
||||
|
||||
// moving towards numerical class names (i.e. -12) and away from s/m/l etc.
|
||||
.has-top-bottom-margin-12 {
|
||||
margin: $spacing-12 0;
|
||||
margin: size_variables.$spacing-12 0;
|
||||
}
|
||||
|
||||
.has-top-margin-negative-m {
|
||||
margin-top: -$spacing-16;
|
||||
margin-top: -(size_variables.$spacing-16);
|
||||
}
|
||||
|
||||
.has-top-bottom-margin-negative-m {
|
||||
margin-top: -$spacing-16;
|
||||
margin-bottom: -$spacing-16;
|
||||
margin-top: -(size_variables.$spacing-16);
|
||||
margin-bottom: -(size_variables.$spacing-16);
|
||||
}
|
||||
|
||||
.has-top-margin-negative-xxl {
|
||||
margin-top: -$spacing-48;
|
||||
margin-top: -(size_variables.$spacing-48);
|
||||
}
|
||||
|
||||
.has-left-margin-xxs {
|
||||
margin-left: $spacing-4;
|
||||
margin-left: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xxs {
|
||||
margin-bottom: $spacing-4 !important;
|
||||
margin-bottom: size_variables.$spacing-4 !important;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xs {
|
||||
margin-bottom: $spacing-8 !important;
|
||||
margin-bottom: size_variables.$spacing-8 !important;
|
||||
}
|
||||
|
||||
.has-bottom-margin-s {
|
||||
margin-bottom: $spacing-12;
|
||||
margin-bottom: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-bottom-margin-m {
|
||||
margin-bottom: $spacing-16;
|
||||
margin-bottom: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-bottom-margin-l {
|
||||
margin-bottom: $spacing-24;
|
||||
margin-bottom: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xl {
|
||||
margin-bottom: $spacing-36;
|
||||
margin-bottom: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.has-bottom-margin-xxl {
|
||||
margin-bottom: $spacing-48;
|
||||
margin-bottom: size_variables.$spacing-48;
|
||||
}
|
||||
|
||||
.has-top-margin-xxs {
|
||||
margin-top: $spacing-4;
|
||||
margin-top: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-top-margin-s {
|
||||
margin-top: $spacing-12;
|
||||
margin-top: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-top-margin-xs {
|
||||
margin-top: $spacing-8;
|
||||
margin-top: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.has-top-margin-m {
|
||||
margin-top: $spacing-16;
|
||||
margin-top: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-top-margin-l {
|
||||
margin-top: $spacing-24;
|
||||
margin-top: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-top-margin-xl {
|
||||
margin-top: $spacing-36;
|
||||
margin-top: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.has-top-margin-xxl {
|
||||
margin-top: $spacing-48;
|
||||
margin-top: size_variables.$spacing-48;
|
||||
}
|
||||
|
||||
.has-top-margin-xxxl {
|
||||
margin-top: $spacing-64;
|
||||
margin-top: size_variables.$spacing-64;
|
||||
}
|
||||
|
||||
.has-top-margin-negative-s {
|
||||
margin-top: (-1 * $spacing-12);
|
||||
margin-top: (-1 * size_variables.$spacing-12);
|
||||
}
|
||||
|
||||
.has-left-margin-xxs {
|
||||
margin-left: $spacing-4;
|
||||
margin-left: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-left-margin-xs {
|
||||
margin-left: $spacing-8;
|
||||
margin-left: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.has-left-margin-s {
|
||||
margin-left: $spacing-12;
|
||||
margin-left: size_variables.$spacing-12;
|
||||
}
|
||||
|
||||
.has-left-margin-m {
|
||||
margin-left: $spacing-16;
|
||||
margin-left: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-left-margin-l {
|
||||
margin-left: $spacing-24;
|
||||
margin-left: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
.has-left-margin-xl {
|
||||
margin-left: $spacing-36;
|
||||
margin-left: size_variables.$spacing-36;
|
||||
}
|
||||
|
||||
.has-right-margin-4 {
|
||||
margin-right: $spacing-4;
|
||||
margin-right: size_variables.$spacing-4;
|
||||
}
|
||||
|
||||
.has-right-margin-8 {
|
||||
margin-right: $spacing-8;
|
||||
margin-right: size_variables.$spacing-8;
|
||||
}
|
||||
|
||||
.has-right-margin-m {
|
||||
margin-right: $spacing-16;
|
||||
margin-right: size_variables.$spacing-16;
|
||||
}
|
||||
|
||||
.has-right-margin-l {
|
||||
margin-right: $spacing-24;
|
||||
margin-right: size_variables.$spacing-24;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use '../utils/font_variables';
|
||||
@use '../utils/size_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -8,45 +11,45 @@
|
||||
|
||||
// font size helpers
|
||||
.is-size-4 {
|
||||
font-size: $size-4 !important;
|
||||
font-size: size_variables.$size-4 !important;
|
||||
}
|
||||
|
||||
.is-size-5 {
|
||||
font-size: $size-5 !important;
|
||||
font-size: size_variables.$size-5 !important;
|
||||
}
|
||||
|
||||
.is-size-6 {
|
||||
font-size: $size-6 !important;
|
||||
font-size: size_variables.$size-6 !important;
|
||||
}
|
||||
|
||||
.is-size-7 {
|
||||
font-size: $size-7 !important;
|
||||
font-size: size_variables.$size-7 !important;
|
||||
}
|
||||
|
||||
.is-size-8 {
|
||||
font-size: $size-8 !important;
|
||||
font-size: size_variables.$size-8 !important;
|
||||
}
|
||||
|
||||
.is-size-9 {
|
||||
font-size: $size-9 !important;
|
||||
font-size: size_variables.$size-9 !important;
|
||||
}
|
||||
|
||||
// Font weight
|
||||
.has-font-weight-normal {
|
||||
font-weight: $font-weight-normal;
|
||||
font-weight: font_variables.$font-weight-normal;
|
||||
}
|
||||
|
||||
.has-text-weight-semibold {
|
||||
font-weight: $font-weight-semibold !important;
|
||||
font-weight: font_variables.$font-weight-semibold !important;
|
||||
}
|
||||
|
||||
.has-text-weight-bold {
|
||||
font-weight: $font-weight-bold !important;
|
||||
font-weight: font_variables.$font-weight-bold !important;
|
||||
}
|
||||
|
||||
// Font family
|
||||
.is-font-mono {
|
||||
font-family: $family-monospace;
|
||||
font-family: font_variables.$family-monospace;
|
||||
}
|
||||
|
||||
.masked-font {
|
||||
@ -93,20 +96,20 @@
|
||||
|
||||
// Text color or styling
|
||||
.is-help {
|
||||
font-size: $size-8;
|
||||
margin-top: $size-11;
|
||||
font-size: size_variables.$size-8;
|
||||
margin-top: size_variables.$size-11;
|
||||
}
|
||||
|
||||
.help {
|
||||
display: block;
|
||||
font-size: 0.85714rem;
|
||||
margin-top: $size-11;
|
||||
margin-top: size_variables.$size-11;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
color: var(--token-color-foreground-faint);
|
||||
margin-bottom: $size-11;
|
||||
font-size: $size-8;
|
||||
margin-bottom: size_variables.$size-11;
|
||||
font-size: size_variables.$size-8;
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@use 'color_variables';
|
||||
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -6,19 +8,27 @@
|
||||
// TODO: lots of inconsistent variation on box-shadow usage. Fix.
|
||||
|
||||
// box
|
||||
$box-shadow: 0 0 0 1px rgba($black, 0.1);
|
||||
$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
|
||||
$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.1), 0 6px 8px -2px rgba($black, 0.05);
|
||||
$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
|
||||
$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
|
||||
$box-shadow: 0 0 0 1px rgba(color_variables.$black, 0.1);
|
||||
$box-shadow-low:
|
||||
0 5px 1px -2px rgba(color_variables.$black, 0.12),
|
||||
0 3px 2px -1px rgba(color_variables.$black, 0);
|
||||
$box-shadow-middle:
|
||||
0 8px 4px -4px rgba(color_variables.$black, 0.1),
|
||||
0 6px 8px -2px rgba(color_variables.$black, 0.05);
|
||||
$box-shadow-high:
|
||||
0 12px 5px -7px rgba(color_variables.$black, 0.08),
|
||||
0 11px 10px -3px rgba(color_variables.$black, 0.1);
|
||||
$box-shadow-highest:
|
||||
0 16px 6px -10px rgba(color_variables.$black, 0.06),
|
||||
0 16px 16px -4px rgba(color_variables.$black, 0.2);
|
||||
|
||||
// box-link
|
||||
$box-link-shadow: 0 0 0 1px $ui-gray-200;
|
||||
$box-link-hover-shadow: 0 0 0 1px $ui-gray-300;
|
||||
$box-link-shadow: 0 0 0 1px color_variables.$ui-gray-200;
|
||||
$box-link-hover-shadow: 0 0 0 1px color_variables.$ui-gray-300;
|
||||
|
||||
// border
|
||||
$base-border: 1px solid $ui-gray-300;
|
||||
$light-border: 1px solid $ui-gray-200;
|
||||
$base-border: 1px solid color_variables.$ui-gray-300;
|
||||
$light-border: 1px solid color_variables.$ui-gray-200;
|
||||
|
||||
// button specific
|
||||
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
|
||||
$button-box-shadow-standard: 0 3px 1px 0 rgba(color_variables.$black, 0.12);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@use 'sass:math';
|
||||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
@ -43,9 +44,9 @@
|
||||
&:before {
|
||||
border-color: rgba($border-color, 0);
|
||||
border-bottom-color: $border-color;
|
||||
border-width: $size + round(1.41421356 * $border-width);
|
||||
border-width: $size + math.round(1.41421356 * $border-width);
|
||||
left: calc(#{$left} + #{$left-offset});
|
||||
margin-left: -($size + round(1.41421356 * $border-width));
|
||||
margin-left: -($size + math.round(1.41421356 * $border-width));
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
|
||||
@ -47,10 +47,13 @@ const appConfig = {
|
||||
sassOptions: {
|
||||
sourceMap: false,
|
||||
onlyIncluded: true,
|
||||
quietDeps: true, // silences deprecation warnings from dependencies
|
||||
precision: 4,
|
||||
includePaths: [
|
||||
'./node_modules/@hashicorp/design-system-components/dist/styles',
|
||||
'./node_modules/@hashicorp/design-system-tokens/dist/products/css',
|
||||
'./node_modules/ember-basic-dropdown/',
|
||||
'./node_modules/ember-power-select/',
|
||||
],
|
||||
},
|
||||
minifyCSS: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user