feat(ui)!: scope all payload css to payload-default layer (#8545)
All payload css is now encapsulated inside CSS layers under `@layer
payload-default`
Any custom css will now have the highest possible specificity.
We have also provided a new layer `@layer payload` if you want to use
layers and ensure that your styles are applied after payload.
To override existing styles in a way that the existing rules of
specificity would be respected you can use the default layer like so
```css
@layer payload-default {
// my styles within the payload specificity
}
```
This commit is contained in:
Paul
@@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
|
|||||||
If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
|
If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
|
||||||
</Banner>
|
</Banner>
|
||||||
|
|
||||||
|
### Specificity rules
|
||||||
|
|
||||||
|
All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.
|
||||||
|
|
||||||
|
We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.
|
||||||
|
|
||||||
|
To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
|
||||||
|
```css
|
||||||
|
@layer payload-default {
|
||||||
|
// my styles within the payload specificity
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Re-using Payload SCSS variables and utilities
|
## Re-using Payload SCSS variables and utilities
|
||||||
|
|
||||||
You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
|
You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
|
||||||
|
|||||||
@@ -1,203 +1,207 @@
|
|||||||
|
@layer payload-default, payload;
|
||||||
|
|
||||||
@import 'styles';
|
@import 'styles';
|
||||||
@import './toasts.scss';
|
@import './toasts.scss';
|
||||||
@import './colors.scss';
|
@import './colors.scss';
|
||||||
|
|
||||||
:root {
|
@layer payload-default {
|
||||||
--base-px: 20;
|
:root {
|
||||||
--base-body-size: 13;
|
--base-px: 20;
|
||||||
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
--base-body-size: 13;
|
||||||
|
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
||||||
|
|
||||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||||
--scrollbar-width: 17px;
|
--scrollbar-width: 17px;
|
||||||
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
|
||||||
--theme-input-bg: var(--theme-elevation-0);
|
|
||||||
--theme-text: var(--theme-elevation-800);
|
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
|
||||||
--theme-baseline: #{$baseline-px};
|
|
||||||
--theme-baseline-body-size: #{$baseline-body-size};
|
|
||||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
||||||
sans-serif;
|
|
||||||
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
|
||||||
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
|
||||||
|
|
||||||
--style-radius-s: #{$style-radius-s};
|
|
||||||
--style-radius-m: #{$style-radius-m};
|
|
||||||
--style-radius-l: #{$style-radius-l};
|
|
||||||
|
|
||||||
--z-popup: 10;
|
|
||||||
--z-nav: 20;
|
|
||||||
--z-modal: 30;
|
|
||||||
--z-status: 40;
|
|
||||||
|
|
||||||
--accessibility-outline: 2px solid var(--theme-text);
|
|
||||||
--accessibility-outline-offset: 2px;
|
|
||||||
|
|
||||||
--gutter-h: #{base(3)};
|
|
||||||
--spacing-view-bottom: var(--gutter-h);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.8);
|
|
||||||
--app-header-height: calc(var(--base) * 2.8);
|
|
||||||
--nav-width: 275px;
|
|
||||||
--nav-trans-time: 150ms;
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
--gutter-h: #{base(2)};
|
|
||||||
--app-header-height: calc(var(--base) * 2.4);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
--gutter-h: #{base(0.8)};
|
|
||||||
--spacing-view-bottom: calc(var(--base) * 2);
|
|
||||||
--nav-width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// GLOBAL STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
@extend %body;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
|
|
||||||
&[data-theme='dark'] {
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
--theme-text: var(--theme-elevation-1000);
|
--theme-input-bg: var(--theme-elevation-0);
|
||||||
--theme-input-bg: var(--theme-elevation-50);
|
--theme-text: var(--theme-elevation-800);
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||||
color-scheme: dark;
|
--theme-baseline: #{$baseline-px};
|
||||||
|
--theme-baseline-body-size: #{$baseline-body-size};
|
||||||
|
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||||
|
sans-serif;
|
||||||
|
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
||||||
|
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||||
|
|
||||||
::selection {
|
--style-radius-s: #{$style-radius-s};
|
||||||
color: var(--color-base-1000);
|
--style-radius-m: #{$style-radius-m};
|
||||||
|
--style-radius-l: #{$style-radius-l};
|
||||||
|
|
||||||
|
--z-popup: 10;
|
||||||
|
--z-nav: 20;
|
||||||
|
--z-modal: 30;
|
||||||
|
--z-status: 40;
|
||||||
|
|
||||||
|
--accessibility-outline: 2px solid var(--theme-text);
|
||||||
|
--accessibility-outline-offset: 2px;
|
||||||
|
|
||||||
|
--gutter-h: #{base(3)};
|
||||||
|
--spacing-view-bottom: var(--gutter-h);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.8);
|
||||||
|
--app-header-height: calc(var(--base) * 2.8);
|
||||||
|
--nav-width: 275px;
|
||||||
|
--nav-trans-time: 150ms;
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
--gutter-h: #{base(2)};
|
||||||
|
--app-header-height: calc(var(--base) * 2.4);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
@include small-break {
|
||||||
color: var(--color-base-1000);
|
--gutter-h: #{base(0.8)};
|
||||||
|
--spacing-view-bottom: calc(var(--base) * 2);
|
||||||
|
--nav-width: 100vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mid-break {
|
/////////////////////////////
|
||||||
font-size: 12px;
|
// GLOBAL STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html {
|
||||||
body,
|
@extend %body;
|
||||||
#app {
|
background: var(--theme-bg);
|
||||||
height: 100%;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
&[data-theme='dark'] {
|
||||||
font-family: var(--font-body);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
font-weight: 400;
|
--theme-text: var(--theme-elevation-1000);
|
||||||
color: var(--theme-text);
|
--theme-input-bg: var(--theme-elevation-50);
|
||||||
margin: 0;
|
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||||
// this is for the nav to be able to push the document over
|
color-scheme: dark;
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
@include mid-break {
|
||||||
max-width: 100%;
|
font-size: 12px;
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@extend %h1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@extend %h2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
@extend %h3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
@extend %h4;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
@extend %h5;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
@extend %h6;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: $baseline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus-visible {
|
|
||||||
outline: var(--accessibility-outline);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: currentColor;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
&:not(:focus-visible) {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
html,
|
||||||
opacity: 0.7;
|
body,
|
||||||
outline: none;
|
#app {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
body {
|
||||||
vertical-align: middle;
|
font-family: var(--font-body);
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: var(--theme-text);
|
||||||
|
margin: 0;
|
||||||
|
// this is for the nav to be able to push the document over
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
dialog {
|
::selection {
|
||||||
width: 100%;
|
background: var(--color-success-250);
|
||||||
border: 0;
|
color: var(--theme-base-800);
|
||||||
padding: 0;
|
}
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload__modal-item {
|
::-moz-selection {
|
||||||
min-height: 100%;
|
background: var(--color-success-250);
|
||||||
background: transparent;
|
color: var(--theme-base-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payload__modal-container--enterDone {
|
img {
|
||||||
overflow: auto;
|
max-width: 100%;
|
||||||
}
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.payload__modal-item--enter,
|
h1 {
|
||||||
.payload__modal-item--enterDone {
|
@extend %h1;
|
||||||
z-index: var(--z-modal);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// @import '~payload-user-css'; TODO: re-enable this
|
h2 {
|
||||||
|
@extend %h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %h6;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: $baseline;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: var(--accessibility-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
&:not(:focus-visible) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item {
|
||||||
|
min-height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-container--enterDone {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item--enter,
|
||||||
|
.payload__modal-item--enterDone {
|
||||||
|
z-index: var(--z-modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
// @import '~payload-user-css'; TODO: re-enable this
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,269 +1,271 @@
|
|||||||
:root {
|
@layer payload-default {
|
||||||
--color-base-0: rgb(255, 255, 255);
|
:root {
|
||||||
--color-base-50: rgb(245, 245, 245);
|
--color-base-0: rgb(255, 255, 255);
|
||||||
--color-base-100: rgb(235, 235, 235);
|
--color-base-50: rgb(245, 245, 245);
|
||||||
--color-base-150: rgb(221, 221, 221);
|
--color-base-100: rgb(235, 235, 235);
|
||||||
--color-base-200: rgb(208, 208, 208);
|
--color-base-150: rgb(221, 221, 221);
|
||||||
--color-base-250: rgb(195, 195, 195);
|
--color-base-200: rgb(208, 208, 208);
|
||||||
--color-base-300: rgb(181, 181, 181);
|
--color-base-250: rgb(195, 195, 195);
|
||||||
--color-base-350: rgb(168, 168, 168);
|
--color-base-300: rgb(181, 181, 181);
|
||||||
--color-base-400: rgb(154, 154, 154);
|
--color-base-350: rgb(168, 168, 168);
|
||||||
--color-base-450: rgb(141, 141, 141);
|
--color-base-400: rgb(154, 154, 154);
|
||||||
--color-base-500: rgb(128, 128, 128);
|
--color-base-450: rgb(141, 141, 141);
|
||||||
--color-base-550: rgb(114, 114, 114);
|
--color-base-500: rgb(128, 128, 128);
|
||||||
--color-base-600: rgb(101, 101, 101);
|
--color-base-550: rgb(114, 114, 114);
|
||||||
--color-base-650: rgb(87, 87, 87);
|
--color-base-600: rgb(101, 101, 101);
|
||||||
--color-base-700: rgb(74, 74, 74);
|
--color-base-650: rgb(87, 87, 87);
|
||||||
--color-base-750: rgb(60, 60, 60);
|
--color-base-700: rgb(74, 74, 74);
|
||||||
--color-base-800: rgb(47, 47, 47);
|
--color-base-750: rgb(60, 60, 60);
|
||||||
--color-base-850: rgb(34, 34, 34);
|
--color-base-800: rgb(47, 47, 47);
|
||||||
--color-base-900: rgb(20, 20, 20);
|
--color-base-850: rgb(34, 34, 34);
|
||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-900: rgb(20, 20, 20);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(237, 245, 249);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(218, 237, 248);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(188, 225, 248);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(156, 216, 253);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(125, 204, 248);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(97, 190, 241);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(65, 178, 236);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(36, 164, 223);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(18, 148, 204);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(21, 135, 186);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(12, 121, 168);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(11, 110, 153);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(11, 97, 135);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(17, 88, 121);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(17, 76, 105);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(18, 66, 90);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(18, 56, 76);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(19, 44, 58);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(22, 33, 39);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-error-50: rgb(250, 241, 240);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-error-100: rgb(252, 229, 227);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-error-150: rgb(247, 208, 204);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-error-200: rgb(254, 193, 188);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-error-250: rgb(253, 177, 170);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-error-300: rgb(253, 154, 146);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-error-350: rgb(253, 131, 123);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-error-400: rgb(246, 109, 103);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-error-450: rgb(234, 90, 86);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-error-500: rgb(218, 75, 72);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-error-550: rgb(200, 62, 61);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-error-600: rgb(182, 54, 54);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-error-650: rgb(161, 47, 47);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-error-700: rgb(144, 44, 43);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-error-750: rgb(123, 41, 39);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-error-800: rgb(105, 39, 37);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-error-850: rgb(86, 36, 33);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-error-900: rgb(64, 32, 29);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-error-950: rgb(44, 26, 24);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-warning-50: rgb(249, 242, 237);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-warning-100: rgb(248, 232, 219);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-warning-150: rgb(243, 212, 186);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-warning-200: rgb(243, 200, 162);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-warning-250: rgb(240, 185, 136);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-warning-300: rgb(238, 166, 98);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-warning-350: rgb(234, 148, 58);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-warning-400: rgb(223, 132, 17);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-warning-450: rgb(204, 120, 15);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-warning-500: rgb(185, 108, 13);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-warning-550: rgb(167, 97, 10);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-warning-600: rgb(150, 87, 11);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-warning-650: rgb(134, 78, 11);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-warning-700: rgb(120, 70, 13);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-warning-750: rgb(105, 61, 13);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-warning-800: rgb(90, 55, 19);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-warning-850: rgb(73, 47, 21);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-warning-900: rgb(56, 38, 20);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-warning-950: rgb(38, 29, 21);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(237, 245, 249);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(218, 237, 248);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(188, 225, 248);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(156, 216, 253);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(125, 204, 248);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(97, 190, 241);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(65, 178, 236);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(36, 164, 223);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(18, 148, 204);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(21, 135, 186);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(12, 121, 168);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(11, 110, 153);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(11, 97, 135);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(17, 88, 121);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(17, 76, 105);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(18, 66, 90);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(18, 56, 76);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(19, 44, 58);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(22, 33, 39);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-50);
|
--theme-success-50: var(--color-success-50);
|
||||||
--theme-success-100: var(--color-success-100);
|
--theme-success-100: var(--color-success-100);
|
||||||
--theme-success-150: var(--color-success-150);
|
--theme-success-150: var(--color-success-150);
|
||||||
--theme-success-200: var(--color-success-200);
|
--theme-success-200: var(--color-success-200);
|
||||||
--theme-success-250: var(--color-success-250);
|
--theme-success-250: var(--color-success-250);
|
||||||
--theme-success-300: var(--color-success-300);
|
--theme-success-300: var(--color-success-300);
|
||||||
--theme-success-350: var(--color-success-350);
|
--theme-success-350: var(--color-success-350);
|
||||||
--theme-success-400: var(--color-success-400);
|
--theme-success-400: var(--color-success-400);
|
||||||
--theme-success-450: var(--color-success-450);
|
--theme-success-450: var(--color-success-450);
|
||||||
--theme-success-500: var(--color-success-500);
|
--theme-success-500: var(--color-success-500);
|
||||||
--theme-success-550: var(--color-success-550);
|
--theme-success-550: var(--color-success-550);
|
||||||
--theme-success-600: var(--color-success-600);
|
--theme-success-600: var(--color-success-600);
|
||||||
--theme-success-650: var(--color-success-650);
|
--theme-success-650: var(--color-success-650);
|
||||||
--theme-success-700: var(--color-success-700);
|
--theme-success-700: var(--color-success-700);
|
||||||
--theme-success-750: var(--color-success-750);
|
--theme-success-750: var(--color-success-750);
|
||||||
--theme-success-800: var(--color-success-800);
|
--theme-success-800: var(--color-success-800);
|
||||||
--theme-success-850: var(--color-success-850);
|
--theme-success-850: var(--color-success-850);
|
||||||
--theme-success-900: var(--color-success-900);
|
--theme-success-900: var(--color-success-900);
|
||||||
--theme-success-950: var(--color-success-950);
|
--theme-success-950: var(--color-success-950);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-50);
|
--theme-warning-50: var(--color-warning-50);
|
||||||
--theme-warning-100: var(--color-warning-100);
|
--theme-warning-100: var(--color-warning-100);
|
||||||
--theme-warning-150: var(--color-warning-150);
|
--theme-warning-150: var(--color-warning-150);
|
||||||
--theme-warning-200: var(--color-warning-200);
|
--theme-warning-200: var(--color-warning-200);
|
||||||
--theme-warning-250: var(--color-warning-250);
|
--theme-warning-250: var(--color-warning-250);
|
||||||
--theme-warning-300: var(--color-warning-300);
|
--theme-warning-300: var(--color-warning-300);
|
||||||
--theme-warning-350: var(--color-warning-350);
|
--theme-warning-350: var(--color-warning-350);
|
||||||
--theme-warning-400: var(--color-warning-400);
|
--theme-warning-400: var(--color-warning-400);
|
||||||
--theme-warning-450: var(--color-warning-450);
|
--theme-warning-450: var(--color-warning-450);
|
||||||
--theme-warning-500: var(--color-warning-500);
|
--theme-warning-500: var(--color-warning-500);
|
||||||
--theme-warning-550: var(--color-warning-550);
|
--theme-warning-550: var(--color-warning-550);
|
||||||
--theme-warning-600: var(--color-warning-600);
|
--theme-warning-600: var(--color-warning-600);
|
||||||
--theme-warning-650: var(--color-warning-650);
|
--theme-warning-650: var(--color-warning-650);
|
||||||
--theme-warning-700: var(--color-warning-700);
|
--theme-warning-700: var(--color-warning-700);
|
||||||
--theme-warning-750: var(--color-warning-750);
|
--theme-warning-750: var(--color-warning-750);
|
||||||
--theme-warning-800: var(--color-warning-800);
|
--theme-warning-800: var(--color-warning-800);
|
||||||
--theme-warning-850: var(--color-warning-850);
|
--theme-warning-850: var(--color-warning-850);
|
||||||
--theme-warning-900: var(--color-warning-900);
|
--theme-warning-900: var(--color-warning-900);
|
||||||
--theme-warning-950: var(--color-warning-950);
|
--theme-warning-950: var(--color-warning-950);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-50);
|
--theme-error-50: var(--color-error-50);
|
||||||
--theme-error-100: var(--color-error-100);
|
--theme-error-100: var(--color-error-100);
|
||||||
--theme-error-150: var(--color-error-150);
|
--theme-error-150: var(--color-error-150);
|
||||||
--theme-error-200: var(--color-error-200);
|
--theme-error-200: var(--color-error-200);
|
||||||
--theme-error-250: var(--color-error-250);
|
--theme-error-250: var(--color-error-250);
|
||||||
--theme-error-300: var(--color-error-300);
|
--theme-error-300: var(--color-error-300);
|
||||||
--theme-error-350: var(--color-error-350);
|
--theme-error-350: var(--color-error-350);
|
||||||
--theme-error-400: var(--color-error-400);
|
--theme-error-400: var(--color-error-400);
|
||||||
--theme-error-450: var(--color-error-450);
|
--theme-error-450: var(--color-error-450);
|
||||||
--theme-error-500: var(--color-error-500);
|
--theme-error-500: var(--color-error-500);
|
||||||
--theme-error-550: var(--color-error-550);
|
--theme-error-550: var(--color-error-550);
|
||||||
--theme-error-600: var(--color-error-600);
|
--theme-error-600: var(--color-error-600);
|
||||||
--theme-error-650: var(--color-error-650);
|
--theme-error-650: var(--color-error-650);
|
||||||
--theme-error-700: var(--color-error-700);
|
--theme-error-700: var(--color-error-700);
|
||||||
--theme-error-750: var(--color-error-750);
|
--theme-error-750: var(--color-error-750);
|
||||||
--theme-error-800: var(--color-error-800);
|
--theme-error-800: var(--color-error-800);
|
||||||
--theme-error-850: var(--color-error-850);
|
--theme-error-850: var(--color-error-850);
|
||||||
--theme-error-900: var(--color-error-900);
|
--theme-error-900: var(--color-error-900);
|
||||||
--theme-error-950: var(--color-error-950);
|
--theme-error-950: var(--color-error-950);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-0);
|
--theme-elevation-0: var(--color-base-0);
|
||||||
--theme-elevation-50: var(--color-base-50);
|
--theme-elevation-50: var(--color-base-50);
|
||||||
--theme-elevation-100: var(--color-base-100);
|
--theme-elevation-100: var(--color-base-100);
|
||||||
--theme-elevation-150: var(--color-base-150);
|
--theme-elevation-150: var(--color-base-150);
|
||||||
--theme-elevation-200: var(--color-base-200);
|
--theme-elevation-200: var(--color-base-200);
|
||||||
--theme-elevation-250: var(--color-base-250);
|
--theme-elevation-250: var(--color-base-250);
|
||||||
--theme-elevation-300: var(--color-base-300);
|
--theme-elevation-300: var(--color-base-300);
|
||||||
--theme-elevation-350: var(--color-base-350);
|
--theme-elevation-350: var(--color-base-350);
|
||||||
--theme-elevation-400: var(--color-base-400);
|
--theme-elevation-400: var(--color-base-400);
|
||||||
--theme-elevation-450: var(--color-base-450);
|
--theme-elevation-450: var(--color-base-450);
|
||||||
--theme-elevation-500: var(--color-base-500);
|
--theme-elevation-500: var(--color-base-500);
|
||||||
--theme-elevation-550: var(--color-base-550);
|
--theme-elevation-550: var(--color-base-550);
|
||||||
--theme-elevation-600: var(--color-base-600);
|
--theme-elevation-600: var(--color-base-600);
|
||||||
--theme-elevation-650: var(--color-base-650);
|
--theme-elevation-650: var(--color-base-650);
|
||||||
--theme-elevation-700: var(--color-base-700);
|
--theme-elevation-700: var(--color-base-700);
|
||||||
--theme-elevation-750: var(--color-base-750);
|
--theme-elevation-750: var(--color-base-750);
|
||||||
--theme-elevation-800: var(--color-base-800);
|
--theme-elevation-800: var(--color-base-800);
|
||||||
--theme-elevation-850: var(--color-base-850);
|
--theme-elevation-850: var(--color-base-850);
|
||||||
--theme-elevation-900: var(--color-base-900);
|
--theme-elevation-900: var(--color-base-900);
|
||||||
--theme-elevation-950: var(--color-base-950);
|
--theme-elevation-950: var(--color-base-950);
|
||||||
--theme-elevation-1000: var(--color-base-1000);
|
--theme-elevation-1000: var(--color-base-1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-900);
|
--theme-elevation-0: var(--color-base-900);
|
||||||
--theme-elevation-50: var(--color-base-850);
|
--theme-elevation-50: var(--color-base-850);
|
||||||
--theme-elevation-100: var(--color-base-800);
|
--theme-elevation-100: var(--color-base-800);
|
||||||
--theme-elevation-150: var(--color-base-750);
|
--theme-elevation-150: var(--color-base-750);
|
||||||
--theme-elevation-200: var(--color-base-700);
|
--theme-elevation-200: var(--color-base-700);
|
||||||
--theme-elevation-250: var(--color-base-650);
|
--theme-elevation-250: var(--color-base-650);
|
||||||
--theme-elevation-300: var(--color-base-600);
|
--theme-elevation-300: var(--color-base-600);
|
||||||
--theme-elevation-350: var(--color-base-550);
|
--theme-elevation-350: var(--color-base-550);
|
||||||
--theme-elevation-400: var(--color-base-450);
|
--theme-elevation-400: var(--color-base-450);
|
||||||
--theme-elevation-450: var(--color-base-400);
|
--theme-elevation-450: var(--color-base-400);
|
||||||
--theme-elevation-550: var(--color-base-350);
|
--theme-elevation-550: var(--color-base-350);
|
||||||
--theme-elevation-600: var(--color-base-300);
|
--theme-elevation-600: var(--color-base-300);
|
||||||
--theme-elevation-650: var(--color-base-250);
|
--theme-elevation-650: var(--color-base-250);
|
||||||
--theme-elevation-700: var(--color-base-200);
|
--theme-elevation-700: var(--color-base-200);
|
||||||
--theme-elevation-750: var(--color-base-150);
|
--theme-elevation-750: var(--color-base-150);
|
||||||
--theme-elevation-800: var(--color-base-100);
|
--theme-elevation-800: var(--color-base-100);
|
||||||
--theme-elevation-850: var(--color-base-50);
|
--theme-elevation-850: var(--color-base-50);
|
||||||
--theme-elevation-900: var(--color-base-0);
|
--theme-elevation-900: var(--color-base-0);
|
||||||
--theme-elevation-950: var(--color-base-0);
|
--theme-elevation-950: var(--color-base-0);
|
||||||
--theme-elevation-1000: var(--color-base-0);
|
--theme-elevation-1000: var(--color-base-0);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-950);
|
--theme-success-50: var(--color-success-950);
|
||||||
--theme-success-100: var(--color-success-900);
|
--theme-success-100: var(--color-success-900);
|
||||||
--theme-success-150: var(--color-success-850);
|
--theme-success-150: var(--color-success-850);
|
||||||
--theme-success-200: var(--color-success-800);
|
--theme-success-200: var(--color-success-800);
|
||||||
--theme-success-250: var(--color-success-750);
|
--theme-success-250: var(--color-success-750);
|
||||||
--theme-success-300: var(--color-success-700);
|
--theme-success-300: var(--color-success-700);
|
||||||
--theme-success-350: var(--color-success-650);
|
--theme-success-350: var(--color-success-650);
|
||||||
--theme-success-400: var(--color-success-600);
|
--theme-success-400: var(--color-success-600);
|
||||||
--theme-success-450: var(--color-success-550);
|
--theme-success-450: var(--color-success-550);
|
||||||
--theme-success-550: var(--color-success-450);
|
--theme-success-550: var(--color-success-450);
|
||||||
--theme-success-600: var(--color-success-400);
|
--theme-success-600: var(--color-success-400);
|
||||||
--theme-success-650: var(--color-success-350);
|
--theme-success-650: var(--color-success-350);
|
||||||
--theme-success-700: var(--color-success-300);
|
--theme-success-700: var(--color-success-300);
|
||||||
--theme-success-750: var(--color-success-250);
|
--theme-success-750: var(--color-success-250);
|
||||||
--theme-success-800: var(--color-success-200);
|
--theme-success-800: var(--color-success-200);
|
||||||
--theme-success-850: var(--color-success-150);
|
--theme-success-850: var(--color-success-150);
|
||||||
--theme-success-900: var(--color-success-100);
|
--theme-success-900: var(--color-success-100);
|
||||||
--theme-success-950: var(--color-success-50);
|
--theme-success-950: var(--color-success-50);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-950);
|
--theme-warning-50: var(--color-warning-950);
|
||||||
--theme-warning-100: var(--color-warning-900);
|
--theme-warning-100: var(--color-warning-900);
|
||||||
--theme-warning-150: var(--color-warning-850);
|
--theme-warning-150: var(--color-warning-850);
|
||||||
--theme-warning-200: var(--color-warning-800);
|
--theme-warning-200: var(--color-warning-800);
|
||||||
--theme-warning-250: var(--color-warning-750);
|
--theme-warning-250: var(--color-warning-750);
|
||||||
--theme-warning-300: var(--color-warning-700);
|
--theme-warning-300: var(--color-warning-700);
|
||||||
--theme-warning-350: var(--color-warning-650);
|
--theme-warning-350: var(--color-warning-650);
|
||||||
--theme-warning-400: var(--color-warning-600);
|
--theme-warning-400: var(--color-warning-600);
|
||||||
--theme-warning-450: var(--color-warning-550);
|
--theme-warning-450: var(--color-warning-550);
|
||||||
--theme-warning-550: var(--color-warning-450);
|
--theme-warning-550: var(--color-warning-450);
|
||||||
--theme-warning-600: var(--color-warning-400);
|
--theme-warning-600: var(--color-warning-400);
|
||||||
--theme-warning-650: var(--color-warning-350);
|
--theme-warning-650: var(--color-warning-350);
|
||||||
--theme-warning-700: var(--color-warning-300);
|
--theme-warning-700: var(--color-warning-300);
|
||||||
--theme-warning-750: var(--color-warning-250);
|
--theme-warning-750: var(--color-warning-250);
|
||||||
--theme-warning-800: var(--color-warning-200);
|
--theme-warning-800: var(--color-warning-200);
|
||||||
--theme-warning-850: var(--color-warning-150);
|
--theme-warning-850: var(--color-warning-150);
|
||||||
--theme-warning-900: var(--color-warning-100);
|
--theme-warning-900: var(--color-warning-100);
|
||||||
--theme-warning-950: var(--color-warning-50);
|
--theme-warning-950: var(--color-warning-50);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-950);
|
--theme-error-50: var(--color-error-950);
|
||||||
--theme-error-100: var(--color-error-900);
|
--theme-error-100: var(--color-error-900);
|
||||||
--theme-error-150: var(--color-error-850);
|
--theme-error-150: var(--color-error-850);
|
||||||
--theme-error-200: var(--color-error-800);
|
--theme-error-200: var(--color-error-800);
|
||||||
--theme-error-250: var(--color-error-750);
|
--theme-error-250: var(--color-error-750);
|
||||||
--theme-error-300: var(--color-error-700);
|
--theme-error-300: var(--color-error-700);
|
||||||
--theme-error-350: var(--color-error-650);
|
--theme-error-350: var(--color-error-650);
|
||||||
--theme-error-400: var(--color-error-600);
|
--theme-error-400: var(--color-error-600);
|
||||||
--theme-error-450: var(--color-error-550);
|
--theme-error-450: var(--color-error-550);
|
||||||
--theme-error-550: var(--color-error-450);
|
--theme-error-550: var(--color-error-450);
|
||||||
--theme-error-600: var(--color-error-400);
|
--theme-error-600: var(--color-error-400);
|
||||||
--theme-error-650: var(--color-error-350);
|
--theme-error-650: var(--color-error-350);
|
||||||
--theme-error-700: var(--color-error-300);
|
--theme-error-700: var(--color-error-300);
|
||||||
--theme-error-750: var(--color-error-250);
|
--theme-error-750: var(--color-error-250);
|
||||||
--theme-error-800: var(--color-error-200);
|
--theme-error-800: var(--color-error-200);
|
||||||
--theme-error-850: var(--color-error-150);
|
--theme-error-850: var(--color-error-150);
|
||||||
--theme-error-900: var(--color-error-100);
|
--theme-error-900: var(--color-error-100);
|
||||||
--theme-error-950: var(--color-error-50);
|
--theme-error-950: var(--color-error-50);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
%btn-reset {
|
@layer payload-default {
|
||||||
border: 0;
|
%btn-reset {
|
||||||
background: none;
|
border: 0;
|
||||||
box-shadow: none;
|
background: none;
|
||||||
border-radius: 0;
|
box-shadow: none;
|
||||||
padding: 0;
|
border-radius: 0;
|
||||||
color: currentColor;
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btn-reset {
|
@mixin btn-reset {
|
||||||
|
|||||||
@@ -1,59 +1,61 @@
|
|||||||
@import 'vars';
|
@import 'vars';
|
||||||
@import 'queries';
|
@import 'queries';
|
||||||
|
|
||||||
.Toastify {
|
@layer payload-default {
|
||||||
.Toastify__toast-container {
|
.Toastify {
|
||||||
left: base(5);
|
|
||||||
transform: none;
|
|
||||||
right: base(5);
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast {
|
|
||||||
padding: base(0.5);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button {
|
|
||||||
align-self: center;
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
background: var(--color-success-500);
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--error {
|
|
||||||
background: var(--theme-error-500);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--light {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
.Toastify__toast-container {
|
.Toastify__toast-container {
|
||||||
left: $baseline;
|
left: base(5);
|
||||||
right: $baseline;
|
transform: none;
|
||||||
|
right: base(5);
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast {
|
||||||
|
padding: base(0.5);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button {
|
||||||
|
align-self: center;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
background: var(--color-success-500);
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--error {
|
||||||
|
background: var(--theme-error-500);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--light {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
.Toastify__toast-container {
|
||||||
|
left: $baseline;
|
||||||
|
right: $baseline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,140 +1,142 @@
|
|||||||
@import './styles.scss';
|
@import './styles.scss';
|
||||||
|
|
||||||
.payload-toast-container {
|
@layer payload-default {
|
||||||
padding: 0;
|
.payload-toast-container {
|
||||||
margin: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.payload-toast-close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
order: 3;
|
order: 3;
|
||||||
left: unset;
|
left: unset;
|
||||||
inset-inline-end: base(0.8);
|
inset-inline-end: base(0.8);
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: var(--theme-elevation-600);
|
color: var(--theme-elevation-600);
|
||||||
background: unset;
|
background: unset;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: base(0.8);
|
width: base(0.8);
|
||||||
height: base(0.8);
|
height: base(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--theme-elevation-250);
|
color: var(--theme-elevation-250);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir='RTL'] & {
|
[dir='RTL'] & {
|
||||||
right: unset;
|
right: unset;
|
||||||
left: 0.5rem;
|
left: 0.5rem;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-title {
|
|
||||||
line-height: base(1);
|
|
||||||
margin-right: base(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload-toast-item {
|
|
||||||
padding: base(0.8);
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--theme-border-color);
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
box-shadow:
|
|
||||||
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
|
||||||
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
|
||||||
|
|
||||||
.toast-content {
|
|
||||||
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-front='false'] {
|
|
||||||
.toast-content {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-expanded='true'] {
|
.toast-title {
|
||||||
.toast-content {
|
line-height: base(1);
|
||||||
opacity: 1;
|
margin-right: base(1);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-icon {
|
.payload-toast-item {
|
||||||
width: base(0.8);
|
padding: base(0.8);
|
||||||
height: base(0.8);
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-warning {
|
|
||||||
color: var(--theme-warning-800);
|
|
||||||
border-color: var(--theme-warning-250);
|
|
||||||
background-color: var(--theme-warning-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-warning-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-warning-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-error {
|
|
||||||
color: var(--theme-error-800);
|
|
||||||
border-color: var(--theme-error-250);
|
|
||||||
background-color: var(--theme-error-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-error-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-error-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-success {
|
|
||||||
color: var(--theme-success-800);
|
|
||||||
border-color: var(--theme-success-250);
|
|
||||||
background-color: var(--theme-success-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-success-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-success-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-info {
|
|
||||||
color: var(--theme-elevation-800);
|
color: var(--theme-elevation-800);
|
||||||
border-color: var(--theme-elevation-250);
|
font-style: normal;
|
||||||
background-color: var(--theme-elevation-100);
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--theme-border-color);
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
box-shadow:
|
||||||
|
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
||||||
|
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.toast-content {
|
||||||
color: var(--theme-elevation-600);
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&[data-front='false'] {
|
||||||
color: var(--theme-elevation-250);
|
.toast-content {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-expanded='true'] {
|
||||||
|
.toast-content {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-icon {
|
||||||
|
width: base(0.8);
|
||||||
|
height: base(0.8);
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-warning {
|
||||||
|
color: var(--theme-warning-800);
|
||||||
|
border-color: var(--theme-warning-250);
|
||||||
|
background-color: var(--theme-warning-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-warning-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-warning-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-error {
|
||||||
|
color: var(--theme-error-800);
|
||||||
|
border-color: var(--theme-error-250);
|
||||||
|
background-color: var(--theme-error-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-error-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-success {
|
||||||
|
color: var(--theme-success-800);
|
||||||
|
border-color: var(--theme-success-250);
|
||||||
|
background-color: var(--theme-success-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-success-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-success-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-info {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
border-color: var(--theme-elevation-250);
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-250);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,106 +4,107 @@
|
|||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
// HEADINGS
|
// HEADINGS
|
||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
|
@layer payload-default {
|
||||||
%h1,
|
%h1,
|
||||||
%h2,
|
%h2,
|
||||||
%h3,
|
%h3,
|
||||||
%h4,
|
%h4,
|
||||||
%h5,
|
%h5,
|
||||||
%h6 {
|
%h6 {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
|
||||||
|
|
||||||
%h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: base(1.6);
|
|
||||||
line-height: base(1.8);
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
font-size: base(1.25);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h2 {
|
%h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1.3);
|
font-size: base(1.6);
|
||||||
line-height: base(1.6);
|
line-height: base(1.8);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.85);
|
letter-spacing: -0.5px;
|
||||||
|
font-size: base(1.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h3 {
|
%h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1);
|
font-size: base(1.3);
|
||||||
line-height: base(1.2);
|
line-height: base(1.6);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.65);
|
font-size: base(0.85);
|
||||||
line-height: 1.25;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h4 {
|
%h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.8);
|
font-size: base(1);
|
||||||
line-height: base(1);
|
line-height: base(1.2);
|
||||||
letter-spacing: -0.375px;
|
|
||||||
}
|
|
||||||
|
|
||||||
%h5 {
|
@include small-break {
|
||||||
margin: 0;
|
font-size: base(0.65);
|
||||||
font-size: base(0.65);
|
line-height: 1.25;
|
||||||
line-height: base(0.8);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%h6 {
|
%h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.6);
|
font-size: base(0.8);
|
||||||
line-height: base(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
%small {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// TYPE STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
%large-body {
|
|
||||||
font-size: base(0.6);
|
|
||||||
line-height: base(1);
|
|
||||||
letter-spacing: base(0.02);
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
font-size: base(0.7);
|
|
||||||
line-height: base(1);
|
line-height: base(1);
|
||||||
|
letter-spacing: -0.375px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-break {
|
%h5 {
|
||||||
font-size: base(0.55);
|
margin: 0;
|
||||||
line-height: base(0.75);
|
font-size: base(0.65);
|
||||||
}
|
line-height: base(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
%body {
|
%h6 {
|
||||||
font-size: $baseline-body-size;
|
margin: 0;
|
||||||
line-height: $baseline-px;
|
font-size: base(0.6);
|
||||||
font-weight: normal;
|
line-height: base(0.8);
|
||||||
font-family: var(--font-body);
|
}
|
||||||
}
|
|
||||||
|
%small {
|
||||||
%code {
|
margin: 0;
|
||||||
font-size: base(0.4);
|
font-size: 12px;
|
||||||
color: var(--theme-elevation-400);
|
line-height: 20px;
|
||||||
|
}
|
||||||
span {
|
|
||||||
color: var(--theme-elevation-800);
|
/////////////////////////////
|
||||||
|
// TYPE STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
%large-body {
|
||||||
|
font-size: base(0.6);
|
||||||
|
line-height: base(1);
|
||||||
|
letter-spacing: base(0.02);
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
font-size: base(0.7);
|
||||||
|
line-height: base(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
font-size: base(0.55);
|
||||||
|
line-height: base(0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%body {
|
||||||
|
font-size: $baseline-body-size;
|
||||||
|
line-height: $baseline-px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
%code {
|
||||||
|
font-size: base(0.4);
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,123 +1,125 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.query-inspector {
|
@layer payload-default {
|
||||||
--string-color: #11b102;
|
.query-inspector {
|
||||||
--number-color: #62c3f3;
|
--string-color: #11b102;
|
||||||
display: flex;
|
--number-color: #62c3f3;
|
||||||
gap: calc(var(--base) * 2);
|
display: flex;
|
||||||
align-items: flex-start;
|
gap: calc(var(--base) * 2);
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: calc(var(--base) * 1);
|
padding-left: calc(var(--base) * 1);
|
||||||
}
|
|
||||||
|
|
||||||
&--fullscreen {
|
|
||||||
padding-left: 0;
|
|
||||||
.query-inspector__configuration {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__configuration {
|
&--fullscreen {
|
||||||
margin-top: calc(var(--base) * 2);
|
padding-left: 0;
|
||||||
width: 60%;
|
.query-inspector__configuration {
|
||||||
position: sticky;
|
display: none;
|
||||||
top: var(--base);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__api-url {
|
&__configuration {
|
||||||
margin-bottom: calc(var(--base) * 1.5);
|
margin-top: calc(var(--base) * 2);
|
||||||
|
width: 60%;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
&__api-url {
|
||||||
display: block;
|
margin-bottom: calc(var(--base) * 1.5);
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
a {
|
||||||
&:focus-visible {
|
display: block;
|
||||||
text-decoration: underline;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-visible {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__form-fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__filter-query-checkboxes {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__results-wrapper {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
width: 100%;
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggle-fullscreen-button-container {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggle-fullscreen-button {
|
||||||
|
position: absolute;
|
||||||
|
right: calc(var(--base) * 0.5);
|
||||||
|
top: calc(var(--base) * 0.5);
|
||||||
|
padding: calc(var(--base) * 0.25);
|
||||||
|
background-color: var(--theme-elevation-0);
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-700);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__results {
|
||||||
|
padding-top: calc(var(--base) * 0.5);
|
||||||
|
padding-left: calc(var(--base) * 0.5);
|
||||||
|
padding-bottom: calc(var(--base) * 0.5);
|
||||||
|
background-color: var(--theme-elevation-50);
|
||||||
|
overflow: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
.query-inspector__configuration {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
padding-inline-end: var(--gutter-h);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__form-fields {
|
html[data-theme='light'] {
|
||||||
display: flex;
|
.query-inspector {
|
||||||
flex-direction: column;
|
--number-color: #2e9cd3;
|
||||||
gap: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
color: var(--theme-elevation-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__filter-query-checkboxes {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__results-wrapper {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
width: 100%;
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toggle-fullscreen-button-container {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toggle-fullscreen-button {
|
|
||||||
position: absolute;
|
|
||||||
right: calc(var(--base) * 0.5);
|
|
||||||
top: calc(var(--base) * 0.5);
|
|
||||||
padding: calc(var(--base) * 0.25);
|
|
||||||
background-color: var(--theme-elevation-0);
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: var(--theme-elevation-300);
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-elevation-700);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__results {
|
|
||||||
padding-top: calc(var(--base) * 0.5);
|
|
||||||
padding-left: calc(var(--base) * 0.5);
|
|
||||||
padding-bottom: calc(var(--base) * 0.5);
|
|
||||||
background-color: var(--theme-elevation-50);
|
|
||||||
overflow: auto;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
flex-direction: column;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
.query-inspector__configuration {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
padding-inline-end: var(--gutter-h);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='light'] {
|
|
||||||
.query-inspector {
|
|
||||||
--number-color: #2e9cd3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,46 +1,48 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.payload-settings {
|
@layer payload-default {
|
||||||
position: relative;
|
.payload-settings {
|
||||||
margin-bottom: calc(var(--base) * 2);
|
position: relative;
|
||||||
|
margin-bottom: calc(var(--base) * 2);
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: var(--theme-elevation-100);
|
background: var(--theme-elevation-100);
|
||||||
width: calc(100% + calc(var(--base) * 5));
|
width: calc(100% + calc(var(--base) * 5));
|
||||||
left: calc(var(--gutter-h) * -1);
|
left: calc(var(--gutter-h) * -1);
|
||||||
top: 0;
|
top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
bottom: 0;
|
|
||||||
top: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
margin-top: calc(var(--base) * 3);
|
|
||||||
padding-top: calc(var(--base) * 3);
|
|
||||||
padding-bottom: calc(var(--base) * 3);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--base);
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
margin-bottom: var(--base);
|
|
||||||
padding-top: calc(var(--base) * 2);
|
|
||||||
margin-top: calc(var(--base) * 2);
|
|
||||||
padding-bottom: calc(var(--base) * 2);
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: none;
|
||||||
|
bottom: 0;
|
||||||
|
top: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-top: calc(var(--base) * 3);
|
||||||
|
padding-top: calc(var(--base) * 3);
|
||||||
|
padding-bottom: calc(var(--base) * 3);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--base);
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
margin-bottom: var(--base);
|
||||||
|
padding-top: calc(var(--base) * 2);
|
||||||
|
margin-top: calc(var(--base) * 2);
|
||||||
|
padding-bottom: calc(var(--base) * 2);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,21 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.create-first-user {
|
@layer payload-default {
|
||||||
display: flex;
|
.create-first-user {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
gap: base(0.4);
|
flex-direction: column;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
> form > .field-type {
|
> form > .field-type {
|
||||||
margin-bottom: var(--base);
|
margin-bottom: var(--base);
|
||||||
|
|
||||||
& .form-submit {
|
& .form-submit {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.emailAndUsername {
|
.emailAndUsername {
|
||||||
margin-bottom: var(--base);
|
margin-bottom: var(--base);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,67 +1,69 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.dashboard {
|
@layer payload-default {
|
||||||
width: 100%;
|
.dashboard {
|
||||||
--gap: var(--base);
|
width: 100%;
|
||||||
--cols: 5;
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
padding-bottom: var(--spacing-view-bottom);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__card-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
gap: var(--gap);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(var(--cols), 1fr);
|
|
||||||
|
|
||||||
.card {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__locked.locked {
|
|
||||||
align-items: unset;
|
|
||||||
justify-content: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include large-break {
|
|
||||||
--cols: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
--gap: var(--base);
|
--gap: var(--base);
|
||||||
--cols: 2;
|
--cols: 5;
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
--cols: 2;
|
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
|
padding-bottom: var(--spacing-view-bottom);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
gap: var(--base);
|
gap: var(--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&__card-list {
|
&__card-list {
|
||||||
gap: base(0.4);
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
gap: var(--gap);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(var(--cols), 1fr);
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__locked.locked {
|
||||||
|
align-items: unset;
|
||||||
|
justify-content: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include large-break {
|
||||||
|
--cols: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
--gap: var(--base);
|
||||||
|
--cols: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
--cols: 2;
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__card-list {
|
||||||
|
gap: base(0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include extra-small-break {
|
||||||
|
--cols: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include extra-small-break {
|
|
||||||
--cols: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,76 +1,78 @@
|
|||||||
@import '../../../../scss/styles.scss';
|
@import '../../../../scss/styles.scss';
|
||||||
|
|
||||||
.auth-fields {
|
@layer payload-default {
|
||||||
padding: calc(var(--base) * 2);
|
.auth-fields {
|
||||||
background: var(--theme-elevation-50);
|
padding: calc(var(--base) * 2);
|
||||||
display: flex;
|
background: var(--theme-elevation-50);
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--base);
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__changing-password {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--base);
|
gap: var(--base);
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
&__controls {
|
||||||
margin: 0;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
&__api-key-label {
|
flex-wrap: wrap;
|
||||||
position: relative;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
padding: var(--base);
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
|
|
||||||
&__changing-password {
|
&__changing-password {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__api-key-label {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
padding: var(--base);
|
||||||
gap: calc(var(--base) / 2);
|
gap: calc(var(--base) / 2);
|
||||||
|
|
||||||
|
&__changing-password {
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.field-type.api-key {
|
.field-type.api-key {
|
||||||
margin-bottom: var(--base);
|
margin-bottom: var(--base);
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@include formInput;
|
@include formInput;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes highlight {
|
||||||
|
0% {
|
||||||
|
background: var(--theme-success-250);
|
||||||
|
border: 1px solid var(--theme-success-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
border: 1px solid var(--theme-elevation-250);
|
||||||
|
color: var(--theme-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
border: 1px solid var(--theme-elevation-250);
|
||||||
|
color: var(--theme-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background: var(--theme-elevation-200);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
animation: highlight 10s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes highlight {
|
|
||||||
0% {
|
|
||||||
background: var(--theme-success-250);
|
|
||||||
border: 1px solid var(--theme-success-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
border: 1px solid var(--theme-elevation-250);
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
border: 1px solid var(--theme-elevation-250);
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background: var(--theme-elevation-200);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
color: var(--theme-elevation-400);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
animation: highlight 10s;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,21 +1,23 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.collection-edit {
|
@layer payload-default {
|
||||||
width: 100%;
|
.collection-edit {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&__form {
|
&__form {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__auth {
|
|
||||||
margin-bottom: base(1.6);
|
|
||||||
border-radius: var(--style-radius-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
&__auth {
|
&__auth {
|
||||||
margin-top: 0;
|
margin-bottom: base(1.6);
|
||||||
margin-bottom: var(--base);
|
border-radius: var(--style-radius-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
&__auth {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--base);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,177 +1,179 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.collection-list {
|
@layer payload-default {
|
||||||
width: 100%;
|
.collection-list {
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
padding-bottom: var(--spacing-view-bottom);
|
|
||||||
|
|
||||||
& > *:not(:last-child) {
|
|
||||||
margin-bottom: var(--base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-header {
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--withoutPopup,
|
|
||||||
.btn--withPopup {
|
|
||||||
position: relative;
|
|
||||||
margin: 0 0 base(0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sub-header {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
[class^='cell'] > p,
|
|
||||||
[class^='cell'] > span,
|
|
||||||
[class^='cell'] > a {
|
|
||||||
line-clamp: 4;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 4;
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#heading-_select,
|
|
||||||
.cell-_select {
|
|
||||||
display: flex;
|
|
||||||
min-width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__no-results {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: var(--base);
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__page-controls {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__page-info {
|
|
||||||
[dir='ltr'] & {
|
|
||||||
margin-right: base(1);
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: base(1);
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__list-selection {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 10;
|
|
||||||
padding: base(0.8) 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--theme-bg);
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin: 0 0 0 base(0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 base(0.4);
|
|
||||||
border-radius: $style-radius-s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__list-selection-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: base(0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__shimmer {
|
|
||||||
margin-top: base(1.75);
|
|
||||||
width: 100%;
|
|
||||||
> div {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
margin-top: base(0.25);
|
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
padding-top: 0;
|
padding-bottom: var(--spacing-view-bottom);
|
||||||
padding-bottom: 0;
|
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-bottom: var(--base);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
.list-header {
|
||||||
gap: base(0.5);
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--withoutPopup,
|
||||||
|
.btn--withPopup {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 0 base(0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__sub-header {
|
&__sub-header {
|
||||||
margin-top: 0;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__search-input {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// on mobile, extend the table all the way to the viewport edges
|
|
||||||
// this is to visually indicate overflowing content
|
|
||||||
.table {
|
.table {
|
||||||
display: flex;
|
table {
|
||||||
width: calc(100% + calc(var(--gutter-h) * 2));
|
width: 100%;
|
||||||
max-width: unset;
|
overflow: auto;
|
||||||
left: calc(var(--gutter-h) * -1);
|
|
||||||
position: relative;
|
|
||||||
padding-left: var(--gutter-h);
|
|
||||||
|
|
||||||
&::after {
|
[class^='cell'] > p,
|
||||||
content: '';
|
[class^='cell'] > span,
|
||||||
height: 1px;
|
[class^='cell'] > a {
|
||||||
padding-right: var(--gutter-h);
|
line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#heading-_select,
|
||||||
|
.cell-_select {
|
||||||
|
display: flex;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__no-results {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--base);
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__page-controls {
|
&__page-controls {
|
||||||
flex-wrap: wrap;
|
width: 100%;
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
&__page-info {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.paginator {
|
.paginator {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__page-info {
|
||||||
|
[dir='ltr'] & {
|
||||||
|
margin-right: base(1);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-left: base(1);
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list-selection {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
padding: base(0.8) 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: $baseline;
|
background-color: var(--theme-bg);
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0 0 0 base(0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 base(0.4);
|
||||||
|
border-radius: $style-radius-s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list-selection-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: base(0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__shimmer {
|
||||||
|
margin-top: base(1.75);
|
||||||
|
width: 100%;
|
||||||
|
> div {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
margin-top: base(0.25);
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
gap: base(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sub-header {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__search-input {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// on mobile, extend the table all the way to the viewport edges
|
||||||
|
// this is to visually indicate overflowing content
|
||||||
|
.table {
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% + calc(var(--gutter-h) * 2));
|
||||||
|
max-width: unset;
|
||||||
|
left: calc(var(--gutter-h) * -1);
|
||||||
|
position: relative;
|
||||||
|
padding-left: var(--gutter-h);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
height: 1px;
|
||||||
|
padding-right: var(--gutter-h);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__page-controls {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__page-info {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: $baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
margin-bottom: base(2.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
margin-bottom: base(2.4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
.live-preview-iframe {
|
@layer payload-default {
|
||||||
background-color: white;
|
.live-preview-iframe {
|
||||||
border: 0;
|
background-color: white;
|
||||||
width: 100%;
|
border: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
transform-origin: top left;
|
height: 100%;
|
||||||
|
transform-origin: top left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +1,43 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.live-preview-window {
|
@layer payload-default {
|
||||||
background-color: var(--theme-bg);
|
.live-preview-window {
|
||||||
width: 60%;
|
background-color: var(--theme-bg);
|
||||||
flex-shrink: 0;
|
width: 60%;
|
||||||
flex-grow: 0;
|
flex-shrink: 0;
|
||||||
position: sticky;
|
flex-grow: 0;
|
||||||
top: var(--doc-controls-height);
|
position: sticky;
|
||||||
height: calc(100vh - var(--doc-controls-height));
|
top: var(--doc-controls-height);
|
||||||
overflow: hidden;
|
height: calc(100vh - var(--doc-controls-height));
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--has-breakpoint {
|
|
||||||
.live-preview-iframe {
|
|
||||||
border: 1px solid var(--theme-elevation-100);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-preview-window {
|
&__main {
|
||||||
&__main {
|
flex-grow: 1;
|
||||||
padding: var(--base);
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--has-breakpoint {
|
||||||
|
.live-preview-iframe {
|
||||||
|
border: 1px solid var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-preview-window {
|
||||||
|
&__main {
|
||||||
|
padding: var(--base);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
@include mid-break {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,59 +1,61 @@
|
|||||||
@import '../../../../scss/styles.scss';
|
@import '../../../../scss/styles.scss';
|
||||||
|
|
||||||
.live-preview-toolbar-controls {
|
@layer payload-default {
|
||||||
display: flex;
|
.live-preview-toolbar-controls {
|
||||||
align-items: center;
|
display: flex;
|
||||||
gap: calc(var(--base) / 3);
|
align-items: center;
|
||||||
|
gap: calc(var(--base) / 3);
|
||||||
|
|
||||||
&__breakpoint {
|
&__breakpoint {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: var(--base);
|
height: var(--base);
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__device-size {
|
&__device-size {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
&__size {
|
|
||||||
width: 50px;
|
|
||||||
height: var(--base);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid var(--theme-elevation-200);
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
border-radius: 2px;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__zoom {
|
|
||||||
width: 55px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
height: var(--base);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__external {
|
&__size {
|
||||||
flex-shrink: 0;
|
width: 50px;
|
||||||
display: flex;
|
height: var(--base);
|
||||||
width: var(--base);
|
display: flex;
|
||||||
height: var(--base);
|
align-items: center;
|
||||||
align-items: center;
|
border: 1px solid var(--theme-elevation-200);
|
||||||
justify-content: center;
|
background: var(--theme-elevation-100);
|
||||||
padding: 6px 0;
|
border-radius: 2px;
|
||||||
}
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
.popup-button {
|
&__zoom {
|
||||||
display: flex;
|
width: 55px;
|
||||||
align-items: center;
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
height: var(--base);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__external {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
width: var(--base);
|
||||||
|
height: var(--base);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
.toolbar-input {
|
@layer payload-default {
|
||||||
width: 50px;
|
.toolbar-input {
|
||||||
height: var(--base);
|
width: 50px;
|
||||||
display: flex;
|
height: var(--base);
|
||||||
align-items: center;
|
display: flex;
|
||||||
border: 1px solid var(--theme-elevation-200);
|
align-items: center;
|
||||||
background: var(--theme-elevation-100);
|
border: 1px solid var(--theme-elevation-200);
|
||||||
border-radius: 2px;
|
background: var(--theme-elevation-100);
|
||||||
font-size: small;
|
border-radius: 2px;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,41 +1,43 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.live-preview-toolbar {
|
@layer payload-default {
|
||||||
display: flex;
|
.live-preview-toolbar {
|
||||||
background-color: var(--theme-bg);
|
display: flex;
|
||||||
color: var(--theme-text);
|
background-color: var(--theme-bg);
|
||||||
height: calc(var(--base) * 1.75);
|
color: var(--theme-text);
|
||||||
align-items: center;
|
height: calc(var(--base) * 1.75);
|
||||||
flex-shrink: 0;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
&--static {
|
&--static {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-bottom: 1px solid var(--theme-elevation-100);
|
border-bottom: 1px solid var(--theme-elevation-100);
|
||||||
}
|
|
||||||
|
|
||||||
&--draggable {
|
|
||||||
@include shadow-lg;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__drag-handle {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
cursor: grab;
|
|
||||||
|
|
||||||
.icon--drag-handle .fill {
|
|
||||||
fill: var(--theme-elevation-300);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&--draggable {
|
||||||
cursor: grabbing;
|
@include shadow-lg;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__drag-handle {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
cursor: grab;
|
||||||
|
|
||||||
|
.icon--drag-handle .fill {
|
||||||
|
fill: var(--theme-elevation-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
.toolbar-area {
|
@layer payload-default {
|
||||||
width: 100%;
|
.toolbar-area {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,66 +1,68 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.live-preview {
|
@layer payload-default {
|
||||||
width: 100%;
|
.live-preview {
|
||||||
display: flex;
|
width: 100%;
|
||||||
--gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
|
|
||||||
|
|
||||||
[dir='rtl'] & {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--popup-open {
|
|
||||||
.live-preview {
|
|
||||||
&__edit {
|
|
||||||
padding-right: var(--gutter-h);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
width: 40%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
--gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
[dir='rtl'] & {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
&--popup-open {
|
&--popup-open {
|
||||||
width: 100%;
|
.live-preview {
|
||||||
}
|
&__edit {
|
||||||
|
padding-right: var(--gutter-h);
|
||||||
&::after {
|
}
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: calc(var(--base) * 2);
|
|
||||||
height: 100%;
|
|
||||||
background: var(--gradient);
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
min-height: initial;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__form {
|
&__main {
|
||||||
display: block;
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&--popup-open {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: calc(var(--base) * 2);
|
||||||
|
height: 100%;
|
||||||
|
background: var(--gradient);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&__main {
|
||||||
|
min-height: initial;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] {
|
||||||
|
.live-preview {
|
||||||
|
--gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
|
||||||
.live-preview {
|
|
||||||
--gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
.login__form {
|
@layer payload-default {
|
||||||
&__inputWrap {
|
.login__form {
|
||||||
display: flex;
|
&__inputWrap {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
gap: var(--base);
|
flex-direction: column;
|
||||||
margin-bottom: calc(var(--base) / 4);
|
gap: var(--base);
|
||||||
|
margin-bottom: calc(var(--base) / 4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
.login {
|
@layer payload-default {
|
||||||
&__brand {
|
.login {
|
||||||
display: flex;
|
&__brand {
|
||||||
justify-content: center;
|
display: flex;
|
||||||
width: 100%;
|
justify-content: center;
|
||||||
margin-bottom: calc(var(--base) * 2);
|
width: 100%;
|
||||||
|
margin-bottom: calc(var(--base) * 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,25 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.logout {
|
@layer payload-default {
|
||||||
display: flex;
|
.logout {
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
gap: base(0.8);
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
|
||||||
max-width: base(36);
|
|
||||||
|
|
||||||
& > * {
|
&__wrap {
|
||||||
margin: 0;
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: base(0.8);
|
||||||
|
width: 100%;
|
||||||
|
max-width: base(36);
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,55 +1,57 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.not-found {
|
@layer payload-default {
|
||||||
margin-top: var(--base);
|
.not-found {
|
||||||
display: flex;
|
margin-top: var(--base);
|
||||||
|
|
||||||
& > * {
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: base(0.8);
|
|
||||||
max-width: base(36);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
& > * {
|
||||||
display: flex;
|
&:first-child {
|
||||||
flex-direction: column;
|
margin-top: 0;
|
||||||
gap: base(0.4);
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> * {
|
&__wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: base(0.8);
|
||||||
|
max-width: base(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--margin-top-large {
|
|
||||||
margin-top: calc(var(--base) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include large-break {
|
|
||||||
&--margin-top-large {
|
&--margin-top-large {
|
||||||
margin-top: var(--base);
|
margin-top: calc(var(--base) * 2);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
@include large-break {
|
||||||
margin-top: calc(var(--base) / 2);
|
&--margin-top-large {
|
||||||
|
margin-top: var(--base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&--margin-top-large {
|
@include small-break {
|
||||||
margin-top: calc(var(--base) / 2);
|
margin-top: calc(var(--base) / 2);
|
||||||
|
|
||||||
|
&--margin-top-large {
|
||||||
|
margin-top: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,31 +1,33 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.reset-password {
|
@layer payload-default {
|
||||||
&__wrap {
|
.reset-password {
|
||||||
z-index: 1;
|
&__wrap {
|
||||||
position: relative;
|
z-index: 1;
|
||||||
display: flex;
|
position: relative;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
align-items: flex-start;
|
flex-direction: column;
|
||||||
gap: base(0.8);
|
align-items: flex-start;
|
||||||
max-width: base(36);
|
gap: base(0.8);
|
||||||
|
max-width: base(36);
|
||||||
|
|
||||||
& > form {
|
& > form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
& > .inputWrap {
|
& > .inputWrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: base(0.8);
|
gap: base(0.8);
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& > .btn {
|
& > .btn {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,36 +1,38 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.unauthorized {
|
@layer payload-default {
|
||||||
margin-top: var(--base);
|
.unauthorized {
|
||||||
|
margin-top: var(--base);
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
&__button {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--margin-top-large {
|
|
||||||
margin-top: calc(var(--base) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include large-break {
|
|
||||||
&--margin-top-large {
|
|
||||||
margin-top: var(--base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
margin-top: calc(var(--base) / 2);
|
|
||||||
|
|
||||||
&--margin-top-large {
|
&--margin-top-large {
|
||||||
|
margin-top: calc(var(--base) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include large-break {
|
||||||
|
&--margin-top-large {
|
||||||
|
margin-top: var(--base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
margin-top: calc(var(--base) / 2);
|
margin-top: calc(var(--base) / 2);
|
||||||
|
|
||||||
|
&--margin-top-large {
|
||||||
|
margin-top: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
.verify {
|
@layer payload-default {
|
||||||
display: flex;
|
.verify {
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
&__brand {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
margin-bottom: calc(var(--base) * 2);
|
flex-wrap: wrap;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
&__brand {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: calc(var(--base) * 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,70 +1,72 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.view-version {
|
@layer payload-default {
|
||||||
width: 100%;
|
.view-version {
|
||||||
padding-bottom: var(--spacing-view-bottom);
|
width: 100%;
|
||||||
|
padding-bottom: var(--spacing-view-bottom);
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
padding-top: calc(var(--base) * 1.5);
|
padding-top: calc(var(--base) * 1.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--base);
|
gap: var(--base);
|
||||||
}
|
|
||||||
|
|
||||||
&__header-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: calc(var(--base) / 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__created-at {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--theme-elevation-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--base);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__restore {
|
|
||||||
margin: 0 0 0 var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
&__intro,
|
|
||||||
&__header {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__controls {
|
&__header-wrap {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: calc(var(--base) / 4);
|
gap: calc(var(--base) / 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__restore {
|
&__header {
|
||||||
margin: calc(var(--base) * 0.5) 0 0 0;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
|
|
||||||
@include small-break {
|
h2 {
|
||||||
&__wrap {
|
margin: 0;
|
||||||
padding-top: calc(var(--base) / 2);
|
}
|
||||||
gap: calc(var(--base) / 2);
|
}
|
||||||
|
|
||||||
|
&__created-at {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--theme-elevation-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__restore {
|
||||||
|
margin: 0 0 0 var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
&__intro,
|
||||||
|
&__header {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: calc(var(--base) / 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__restore {
|
||||||
|
margin: calc(var(--base) * 0.5) 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
&__wrap {
|
||||||
|
padding-top: calc(var(--base) / 2);
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
.field-diff-label {
|
@layer payload-default {
|
||||||
margin-bottom: calc(var(--base) * 0.25);
|
.field-diff-label {
|
||||||
font-weight: 600;
|
margin-bottom: calc(var(--base) * 0.25);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,36 @@
|
|||||||
.iterable-diff {
|
@layer payload-default {
|
||||||
margin-bottom: calc(var(--base) * 2);
|
.iterable-diff {
|
||||||
|
margin-bottom: calc(var(--base) * 2);
|
||||||
|
|
||||||
&__locale-label {
|
&__locale-label {
|
||||||
background: var(--theme-elevation-100);
|
background: var(--theme-elevation-100);
|
||||||
padding: calc(var(--base) * 0.25);
|
padding: calc(var(--base) * 0.25);
|
||||||
// border-radius: $style-radius-m;
|
// border-radius: $style-radius-m;
|
||||||
[dir='ltr'] & {
|
[dir='ltr'] & {
|
||||||
margin-right: calc(var(--base) * 0.25);
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-left: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
margin: calc(var(--base) * 0.5);
|
margin: calc(var(--base) * 0.5);
|
||||||
[dir='ltr'] & {
|
[dir='ltr'] & {
|
||||||
padding-left: calc(var(--base) * 0.5);
|
padding-left: calc(var(--base) * 0.5);
|
||||||
// border-left: $style-stroke-width-s solid var(--theme-elevation-150);
|
// border-left: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
padding-right: calc(var(--base) * 0.5);
|
||||||
|
// border-right: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[dir='rtl'] & {
|
|
||||||
padding-right: calc(var(--base) * 0.5);
|
|
||||||
// border-right: $style-stroke-width-s solid var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__no-rows {
|
&__no-rows {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background-color: var(--theme-elevation-50);
|
background-color: var(--theme-elevation-50);
|
||||||
// padding: base(0.125) calc(var(--base) * 0.5);
|
// padding: base(0.125) calc(var(--base) * 0.5);
|
||||||
// margin: base(0.125) 0;
|
// margin: base(0.125) 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
.nested-diff {
|
@layer payload-default {
|
||||||
&__wrap--gutter {
|
.nested-diff {
|
||||||
[dir='ltr'] & {
|
&__wrap--gutter {
|
||||||
padding-left: calc(var(--base) * 0.25);
|
[dir='ltr'] & {
|
||||||
// border-left: $style-stroke-width-s solid var(--theme-elevation-150);
|
padding-left: calc(var(--base) * 0.25);
|
||||||
}
|
// border-left: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
[dir='rtl'] & {
|
}
|
||||||
padding-right: calc(var(--base) * 0.25);
|
[dir='rtl'] & {
|
||||||
// border-right: $style-stroke-width-s solid var(--theme-elevation-150);
|
padding-right: calc(var(--base) * 0.25);
|
||||||
|
// border-right: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
.relationship-diff {
|
@layer payload-default {
|
||||||
&__locale-label {
|
.relationship-diff {
|
||||||
[dir='ltr'] & {
|
&__locale-label {
|
||||||
margin-right: calc(var(--base) * 0.25);
|
[dir='ltr'] & {
|
||||||
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-left: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
padding: calc(var(--base) * 0.25);
|
||||||
|
// border-radius: $style-radius-m;
|
||||||
}
|
}
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
padding: calc(var(--base) * 0.25);
|
|
||||||
// border-radius: $style-radius-m;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
.select-diff {
|
@layer payload-default {
|
||||||
&__locale-label {
|
.select-diff {
|
||||||
[dir='ltr'] & {
|
&__locale-label {
|
||||||
margin-right: calc(var(--base) * 0.25);
|
[dir='ltr'] & {
|
||||||
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-left: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
padding: calc(var(--base) * 0.25);
|
||||||
|
// border-radius: $style-radius-m;
|
||||||
}
|
}
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
padding: calc(var(--base) * 0.25);
|
|
||||||
// border-radius: $style-radius-m;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
.text-diff {
|
@layer payload-default {
|
||||||
&__locale-label {
|
.text-diff {
|
||||||
[dir='ltr'] & {
|
&__locale-label {
|
||||||
margin-right: calc(var(--base) * 0.25);
|
[dir='ltr'] & {
|
||||||
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-left: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
padding: calc(var(--base) * 0.25);
|
||||||
|
// border-radius: $style-radius-m;
|
||||||
}
|
}
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
padding: calc(var(--base) * 0.25);
|
|
||||||
// border-radius: $style-radius-m;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.render-field-diffs {
|
@layer payload-default {
|
||||||
display: flex;
|
.render-field-diffs {
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--base);
|
|
||||||
|
|
||||||
&__field {
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--base);
|
gap: var(--base);
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
&__field {
|
||||||
gap: calc(var(--base) / 2);
|
overflow-wrap: anywhere;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,77 +1,79 @@
|
|||||||
@import '../../.././scss/styles.scss';
|
@import '../../.././scss/styles.scss';
|
||||||
|
|
||||||
.restore-version {
|
@layer payload-default {
|
||||||
cursor: pointer;
|
.restore-version {
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.popup-button {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__chevron {
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.stroke {
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
border-top-right-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
margin-right: 2px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-radius: 0;
|
|
||||||
outline-offset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__modal {
|
|
||||||
@include blur-bg;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&__toggle {
|
.popup-button {
|
||||||
@extend %btn-reset;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
&__chevron {
|
||||||
z-index: 1;
|
background-color: var(--theme-elevation-150);
|
||||||
position: relative;
|
border-top-left-radius: 0;
|
||||||
display: flex;
|
border-bottom-left-radius: 0;
|
||||||
flex-direction: column;
|
cursor: pointer;
|
||||||
gap: base(0.8);
|
|
||||||
padding: base(2);
|
|
||||||
max-width: base(36);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
.stroke {
|
||||||
display: flex;
|
stroke-width: 1px;
|
||||||
flex-direction: column;
|
}
|
||||||
gap: base(0.4);
|
|
||||||
|
|
||||||
> * {
|
&:hover {
|
||||||
margin: 0;
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
&__button {
|
||||||
display: flex;
|
border-top-right-radius: 0px;
|
||||||
gap: base(0.4);
|
border-bottom-right-radius: 0px;
|
||||||
|
margin-right: 2px;
|
||||||
|
|
||||||
.btn {
|
&:focus {
|
||||||
margin: 0;
|
border-radius: 0;
|
||||||
|
outline-offset: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modal {
|
||||||
|
@include blur-bg;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&__toggle {
|
||||||
|
@extend %btn-reset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: base(0.8);
|
||||||
|
padding: base(2);
|
||||||
|
max-width: base(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
.compare-version {
|
@layer payload-default {
|
||||||
&__error-loading {
|
.compare-version {
|
||||||
border: 1px solid var(--theme-error-500);
|
&__error-loading {
|
||||||
min-height: calc(var(--base) * 2);
|
border: 1px solid var(--theme-error-500);
|
||||||
padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
|
min-height: calc(var(--base) * 2);
|
||||||
background-color: var(--theme-error-100);
|
padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
|
||||||
color: var(--theme-elevation-0);
|
background-color: var(--theme-error-100);
|
||||||
}
|
color: var(--theme-elevation-0);
|
||||||
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
margin-bottom: calc(var(--base) * 0.25);
|
margin-bottom: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
.select-version-locales {
|
@layer payload-default {
|
||||||
flex-grow: 1;
|
.select-version-locales {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
margin-bottom: calc(var(--base) * 0.25);
|
margin-bottom: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,108 +1,110 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.versions {
|
@layer payload-default {
|
||||||
width: 100%;
|
.versions {
|
||||||
margin-bottom: calc(var(--base) * 2);
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: var(--spacing-view-bottom);
|
|
||||||
margin-top: calc(var(--base) * 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
margin-bottom: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__no-versions {
|
|
||||||
margin-top: calc(var(--base) * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__parent-doc {
|
|
||||||
.banner__content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__parent-doc-pills {
|
|
||||||
[dir='ltr'] & {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__page-controls {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
margin-bottom: calc(var(--base) * 2);
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__page-info {
|
|
||||||
[dir='ltr'] & {
|
|
||||||
margin-right: var(--base);
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[dir='rtl'] & {
|
|
||||||
margin-left: var(--base);
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
&__wrap {
|
&__wrap {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
margin-top: 0;
|
padding-bottom: var(--spacing-view-bottom);
|
||||||
|
margin-top: calc(var(--base) * 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
// on mobile, extend the table all the way to the viewport edges
|
&__header {
|
||||||
// this is to visually indicate overflowing content
|
margin-bottom: var(--base);
|
||||||
.table {
|
}
|
||||||
display: flex;
|
|
||||||
width: calc(100% + calc(var(--gutter-h) * 2));
|
|
||||||
max-width: unset;
|
|
||||||
left: calc(var(--gutter-h) * -1);
|
|
||||||
position: relative;
|
|
||||||
padding-left: var(--gutter-h);
|
|
||||||
|
|
||||||
&::after {
|
&__no-versions {
|
||||||
content: '';
|
margin-top: calc(var(--base) * 1.5);
|
||||||
height: 1px;
|
}
|
||||||
padding-right: var(--gutter-h);
|
|
||||||
|
&__parent-doc {
|
||||||
|
.banner__content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__parent-doc-pills {
|
||||||
|
[dir='ltr'] & {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__page-controls {
|
&__page-controls {
|
||||||
flex-wrap: wrap;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__page-info {
|
&__page-info {
|
||||||
[dir='ltr'] & {
|
[dir='ltr'] & {
|
||||||
margin-left: 0;
|
margin-right: var(--base);
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir='rtl'] & {
|
[dir='rtl'] & {
|
||||||
margin-right: 0;
|
margin-left: var(--base);
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.paginator {
|
@include mid-break {
|
||||||
width: 100%;
|
&__wrap {
|
||||||
margin-bottom: var(--base);
|
padding-top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// on mobile, extend the table all the way to the viewport edges
|
||||||
|
// this is to visually indicate overflowing content
|
||||||
|
.table {
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% + calc(var(--gutter-h) * 2));
|
||||||
|
max-width: unset;
|
||||||
|
left: calc(var(--gutter-h) * -1);
|
||||||
|
position: relative;
|
||||||
|
padding-left: var(--gutter-h);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
height: 1px;
|
||||||
|
padding-right: var(--gutter-h);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__page-controls {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__page-info {
|
||||||
|
[dir='ltr'] & {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir='rtl'] & {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: var(--base);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
.plugin-seo__field {
|
@layer payload-default {
|
||||||
.field-label {
|
.plugin-seo__field {
|
||||||
display: inline !important;
|
.field-label {
|
||||||
|
display: inline !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,162 +1,164 @@
|
|||||||
@import '../../../../scss/styles';
|
@import '../../../../scss/styles';
|
||||||
|
|
||||||
.ContentEditable__root > div:has(.lexical-block) {
|
@layer payload-default {
|
||||||
// Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
|
.ContentEditable__root > div:has(.lexical-block) {
|
||||||
z-index: 1;
|
// Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
|
||||||
}
|
z-index: 1;
|
||||||
|
|
||||||
.lexical-block {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
@extend %body;
|
|
||||||
|
|
||||||
&__row {
|
|
||||||
.collapsible__toggle-wrap {
|
|
||||||
padding-inline-start: base(0.4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
margin-block: base(0.4);
|
.lexical-block {
|
||||||
|
|
||||||
&__header {
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__heading-with-error {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--base) * 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--has-no-error {
|
|
||||||
> .array-field__header .array-field__heading-with-error {
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--has-error {
|
|
||||||
> .array-field__header {
|
|
||||||
color: var(--theme-error-500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error-pill {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header-actions {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header-action {
|
|
||||||
@extend %btn-reset;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: calc(var(--base) * 0.5);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus-visible {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsible {
|
|
||||||
&__header-wrap {
|
|
||||||
// Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
|
|
||||||
right: calc(var(--base) * 1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__removeButton.btn {
|
|
||||||
margin: 0;
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block-header {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block-header * {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block-header,
|
|
||||||
&__block-header > div {
|
|
||||||
display: flex;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
gap: calc(var(--base) * 0.375);
|
|
||||||
justify-content: flex-start;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block-number {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block-pill {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: block;
|
|
||||||
line-height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__rows {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: calc(var(--base) / 2);
|
gap: calc(var(--base) / 2);
|
||||||
|
@extend %body;
|
||||||
|
|
||||||
|
&__row {
|
||||||
|
.collapsible__toggle-wrap {
|
||||||
|
padding-inline-start: base(0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-block: base(0.4);
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__heading-with-error {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(var(--base) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--has-no-error {
|
||||||
|
> .array-field__header .array-field__heading-with-error {
|
||||||
|
color: var(--theme-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--has-error {
|
||||||
|
> .array-field__header {
|
||||||
|
color: var(--theme-error-500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__error-pill {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-actions {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-action {
|
||||||
|
@extend %btn-reset;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: calc(var(--base) * 0.5);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-visible {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible {
|
||||||
|
&__header-wrap {
|
||||||
|
// Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
|
||||||
|
right: calc(var(--base) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__removeButton.btn {
|
||||||
|
margin: 0;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block-header {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block-header * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block-header,
|
||||||
|
&__block-header > div {
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
gap: calc(var(--base) * 0.375);
|
||||||
|
justify-content: flex-start;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block-number {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block-pill {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
line-height: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__rows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__drawer-toggler {
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
align-self: flex-start;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__drawer-toggler {
|
html[data-theme='light'] {
|
||||||
background-color: transparent;
|
.blocks-field--has-error {
|
||||||
margin: 0;
|
.section-title__input,
|
||||||
padding: 0;
|
.blocks-field__heading-with-error {
|
||||||
border: none;
|
color: var(--theme-error-750);
|
||||||
align-self: flex-start;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
html[data-theme='dark'] {
|
||||||
color: var(--theme-elevation-400);
|
.blocks-field--has-error {
|
||||||
margin: 0;
|
.section-title__input,
|
||||||
|
.blocks-field__heading-with-error {
|
||||||
&:hover {
|
color: var(--theme-error-500);
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='light'] {
|
|
||||||
.blocks-field--has-error {
|
|
||||||
.section-title__input,
|
|
||||||
.blocks-field__heading-with-error {
|
|
||||||
color: var(--theme-error-750);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
|
||||||
.blocks-field--has-error {
|
|
||||||
.section-title__input,
|
|
||||||
.blocks-field__heading-with-error {
|
|
||||||
color: var(--theme-error-500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,88 +1,90 @@
|
|||||||
@import '../../../../scss/styles';
|
@import '../../../../scss/styles';
|
||||||
|
|
||||||
.inline-block-container {
|
@layer payload-default {
|
||||||
display: inline-block;
|
.inline-block-container {
|
||||||
}
|
display: inline-block;
|
||||||
|
|
||||||
.inline-block {
|
|
||||||
@extend %body;
|
|
||||||
@include shadow-sm;
|
|
||||||
padding: base(0.1);
|
|
||||||
padding-inline-start: base(0.4);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
outline: 1px solid var(--theme-elevation-100);
|
|
||||||
border-radius: $style-radius-s;
|
|
||||||
max-width: calc(var(--base) * 15);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
margin-right: base(0.2);
|
|
||||||
margin-left: base(0.2);
|
|
||||||
|
|
||||||
&::selection {
|
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
.inline-block {
|
||||||
outline: 1px solid var(--theme-elevation-150);
|
@extend %body;
|
||||||
}
|
@include shadow-sm;
|
||||||
|
padding: base(0.1);
|
||||||
&__wrap {
|
padding-inline-start: base(0.4);
|
||||||
flex-grow: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--selected {
|
|
||||||
background: var(--theme-success-100);
|
|
||||||
outline: 1px solid var(--theme-success-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__editButton.btn {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__editButton {
|
|
||||||
&:disabled {
|
|
||||||
color: var(--theme-elevation-300);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
background: var(--theme-input-bg);
|
||||||
margin-left: base(0.4);
|
outline: 1px solid var(--theme-elevation-100);
|
||||||
|
border-radius: $style-radius-s;
|
||||||
|
max-width: calc(var(--base) * 15);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
margin-right: base(0.2);
|
||||||
|
margin-left: base(0.2);
|
||||||
|
|
||||||
& > .btn {
|
&::selection {
|
||||||
width: base(1);
|
background: transparent;
|
||||||
height: base(1);
|
}
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:hover {
|
||||||
background: var(--theme-elevation-100);
|
outline: 1px solid var(--theme-elevation-150);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
&__wrap {
|
||||||
height: 100%;
|
flex-grow: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
background: var(--theme-success-100);
|
||||||
|
outline: 1px solid var(--theme-success-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__editButton.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__editButton {
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
&__actions {
|
||||||
width: 16px;
|
display: flex;
|
||||||
height: 16px;
|
align-items: center;
|
||||||
}
|
flex-shrink: 0;
|
||||||
}
|
margin-left: base(0.4);
|
||||||
|
|
||||||
&__removeButton.btn {
|
& > .btn {
|
||||||
margin: 0;
|
width: base(1);
|
||||||
|
height: base(1);
|
||||||
|
|
||||||
line {
|
&:not(:disabled):hover {
|
||||||
stroke-width: base(0.2);
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&__removeButton.btn {
|
||||||
color: var(--theme-elevation-300);
|
margin: 0;
|
||||||
pointer-events: none;
|
|
||||||
|
line {
|
||||||
|
stroke-width: base(0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,51 +1,53 @@
|
|||||||
@import '../../../../../scss/styles';
|
@import '../../../../../scss/styles';
|
||||||
|
|
||||||
.test-recorder-output {
|
@layer payload-default {
|
||||||
margin: 20px auto 20px auto;
|
.test-recorder-output {
|
||||||
width: 100%;
|
margin: 20px auto 20px auto;
|
||||||
}
|
width: 100%;
|
||||||
.test-recorder-toolbar {
|
}
|
||||||
display: flex;
|
.test-recorder-toolbar {
|
||||||
}
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.test-recorder-button {
|
.test-recorder-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
padding: 6px 6px;
|
padding: 6px 6px;
|
||||||
border-radius: $style-radius-m;
|
border-radius: $style-radius-m;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
|
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
color: white;
|
color: white;
|
||||||
transition: box-shadow 50ms ease-out;
|
transition: box-shadow 50ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-recorder-button:active {
|
.test-recorder-button:active {
|
||||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
|
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-recorder-button + .test-recorder-button {
|
.test-recorder-button + .test-recorder-button {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-recorder-button::after {
|
.test-recorder-button::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
bottom: 8px;
|
bottom: 8px;
|
||||||
left: 8px;
|
left: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
#test-recorder-button {
|
#test-recorder-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#test-recorder-button-snapshot {
|
#test-recorder-button-snapshot {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,78 +1,80 @@
|
|||||||
.tree-view-output {
|
@layer payload-default {
|
||||||
display: block;
|
.tree-view-output {
|
||||||
background: #222;
|
display: block;
|
||||||
color: #fff;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 1px auto 10px auto;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
|
|
||||||
pre {
|
|
||||||
line-height: 1.1;
|
|
||||||
background: #222;
|
background: #222;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-treetype-button {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
top: 10px;
|
margin: 1px auto 10px auto;
|
||||||
right: 85px;
|
position: relative;
|
||||||
position: absolute;
|
|
||||||
background: none;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-timetravel-button {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
top: 10px;
|
|
||||||
right: 15px;
|
|
||||||
position: absolute;
|
|
||||||
background: none;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-timetravel-panel {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 0 10px;
|
border-bottom-left-radius: 10px;
|
||||||
margin: auto;
|
border-bottom-right-radius: 10px;
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&-button {
|
pre {
|
||||||
padding: 0;
|
line-height: 1.1;
|
||||||
border: 0;
|
background: #222;
|
||||||
background: none;
|
|
||||||
flex: 1;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-treetype-button {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
top: 10px;
|
||||||
|
right: 85px;
|
||||||
|
position: absolute;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-slider {
|
.debug-timetravel-button {
|
||||||
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex: 8;
|
font-size: 12px;
|
||||||
|
top: 10px;
|
||||||
|
right: 15px;
|
||||||
|
position: absolute;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-timetravel-panel {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 0 10px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
flex: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
padding: 0;
|
||||||
|
flex: 8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,73 +1,75 @@
|
|||||||
@import '../../../../../scss/styles';
|
@import '../../../../../scss/styles';
|
||||||
|
|
||||||
.table-cell-action-button-container {
|
@layer payload-default {
|
||||||
position: absolute;
|
.table-cell-action-button-container {
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 0;
|
top: 0;
|
||||||
will-change: transform;
|
left: 0;
|
||||||
}
|
will-change: transform;
|
||||||
|
|
||||||
.table-cell-action-button {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
border: 0;
|
|
||||||
padding: 2px;
|
|
||||||
position: relative;
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-300);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='light'] {
|
.table-cell-action-button {
|
||||||
.table-action-menu-dropdown {
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
|
||||||
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-action-menu-dropdown {
|
|
||||||
z-index: 100;
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
min-width: 160px;
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
min-height: 40px;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
|
||||||
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
|
||||||
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: none;
|
|
||||||
height: 1px;
|
|
||||||
background-color: var(--theme-elevation-200);
|
background-color: var(--theme-elevation-200);
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
padding: 8px;
|
|
||||||
color: var(--theme-elevation-900);
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-shrink: 0;
|
|
||||||
justify-content: space-between;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 30px;
|
padding: 2px;
|
||||||
width: 100%;
|
position: relative;
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--theme-elevation-100);
|
background-color: var(--theme-elevation-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='light'] {
|
||||||
|
.table-action-menu-dropdown {
|
||||||
|
box-shadow:
|
||||||
|
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
||||||
|
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-action-menu-dropdown {
|
||||||
|
z-index: 100;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
min-width: 160px;
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
min-height: 40px;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow:
|
||||||
|
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
||||||
|
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
||||||
|
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 8px;
|
||||||
|
color: var(--theme-elevation-900);
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 0;
|
||||||
|
height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,182 +1,184 @@
|
|||||||
@import '../../../../../scss/styles';
|
@import '../../../../../scss/styles';
|
||||||
|
|
||||||
.LexicalEditorTheme {
|
@layer payload-default {
|
||||||
&__table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
max-width: 100%;
|
|
||||||
border-spacing: 0;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: scroll;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: fit-content;
|
|
||||||
margin: 0 25px 30px 0;
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: rgba(172, 206, 247);
|
|
||||||
}
|
|
||||||
|
|
||||||
br::selection {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableRowStriping tr:nth-child(even) {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableSelected {
|
|
||||||
outline: 2px solid rgb(60, 132, 244);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCell {
|
|
||||||
border: 1px solid var(--theme-elevation-200);
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: start;
|
|
||||||
padding: 6px 8px;
|
|
||||||
position: relative;
|
|
||||||
cursor: default;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellSortedIndicator {
|
|
||||||
display: block;
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background-color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellResizer {
|
|
||||||
position: absolute;
|
|
||||||
right: -4px;
|
|
||||||
height: 100%;
|
|
||||||
width: 8px;
|
|
||||||
cursor: ew-resize;
|
|
||||||
z-index: 10;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellHeader {
|
|
||||||
background-color: #f2f3f5;
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellSelected {
|
|
||||||
background-color: #c9dbf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellPrimarySelected {
|
|
||||||
border: 2px solid rgb(60, 132, 244);
|
|
||||||
display: block;
|
|
||||||
height: calc(100% - 2px);
|
|
||||||
position: absolute;
|
|
||||||
width: calc(100% - 2px);
|
|
||||||
left: -1px;
|
|
||||||
top: -1px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellEditing {
|
|
||||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableAddColumns {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableAddColumns,
|
|
||||||
&__tableAddRows {
|
|
||||||
position: absolute;
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
animation: table-controls 0.2s ease;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 24px;
|
|
||||||
min-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableAddColumns:after,
|
|
||||||
&__tableAddRows:after {
|
|
||||||
background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
display: block;
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableAddColumns:hover,
|
|
||||||
&__tableAddRows:hover {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableAddRows {
|
|
||||||
width: calc(100% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes table-controls {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellResizeRuler {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
background-color: rgb(60, 132, 244);
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellActionButtonContainer {
|
|
||||||
display: block;
|
|
||||||
right: 5px;
|
|
||||||
top: 6px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 4;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellActionButton {
|
|
||||||
background-color: #eee;
|
|
||||||
display: block;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 20px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
color: #222;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tableCellActionButton:hover {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
|
||||||
.LexicalEditorTheme {
|
.LexicalEditorTheme {
|
||||||
|
&__table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
max-width: 100%;
|
||||||
|
border-spacing: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: scroll;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 25px 30px 0;
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: rgba(172, 206, 247);
|
||||||
|
}
|
||||||
|
|
||||||
|
br::selection {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableRowStriping tr:nth-child(even) {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableSelected {
|
||||||
|
outline: 2px solid rgb(60, 132, 244);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCell {
|
||||||
|
border: 1px solid var(--theme-elevation-200);
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: start;
|
||||||
|
padding: 6px 8px;
|
||||||
|
position: relative;
|
||||||
|
cursor: default;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellSortedIndicator {
|
||||||
|
display: block;
|
||||||
|
opacity: 0.5;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellResizer {
|
||||||
|
position: absolute;
|
||||||
|
right: -4px;
|
||||||
|
height: 100%;
|
||||||
|
width: 8px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
z-index: 10;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&__tableCellHeader {
|
&__tableCellHeader {
|
||||||
background-color: var(--theme-elevation-50);
|
background-color: #f2f3f5;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellSelected {
|
||||||
|
background-color: #c9dbf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellPrimarySelected {
|
||||||
|
border: 2px solid rgb(60, 132, 244);
|
||||||
|
display: block;
|
||||||
|
height: calc(100% - 2px);
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 2px);
|
||||||
|
left: -1px;
|
||||||
|
top: -1px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellEditing {
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableAddColumns {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableAddColumns,
|
||||||
|
&__tableAddRows {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
animation: table-controls 0.2s ease;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 24px;
|
||||||
|
min-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__tableAddColumns:after,
|
&__tableAddColumns:after,
|
||||||
&__tableAddRows:after {
|
&__tableAddRows:after {
|
||||||
background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
|
background-image: url(../../../../../lexical/ui/icons/Add/index.svg);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: block;
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableAddColumns:hover,
|
||||||
|
&__tableAddRows:hover {
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableAddRows {
|
||||||
|
width: calc(100% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes table-controls {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellResizeRuler {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
background-color: rgb(60, 132, 244);
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellActionButtonContainer {
|
||||||
|
display: block;
|
||||||
|
right: 5px;
|
||||||
|
top: 6px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellActionButton {
|
||||||
|
background-color: #eee;
|
||||||
|
display: block;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: #222;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableCellActionButton:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] {
|
||||||
|
.LexicalEditorTheme {
|
||||||
|
&__tableCellHeader {
|
||||||
|
background-color: var(--theme-elevation-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tableAddColumns:after,
|
||||||
|
&__tableAddRows:after {
|
||||||
|
background-image: url(../../../../../lexical/ui/icons/Add/light.svg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,20 +1,22 @@
|
|||||||
@import '../../../../scss/styles';
|
@import '../../../../scss/styles';
|
||||||
|
|
||||||
.LexicalEditorTheme__hr {
|
@layer payload-default {
|
||||||
padding: 2px 2px;
|
.LexicalEditorTheme__hr {
|
||||||
border: none;
|
padding: 2px 2px;
|
||||||
margin: 1rem 0;
|
border: none;
|
||||||
cursor: pointer;
|
margin: 1rem 0;
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.LexicalEditorTheme__hr:after {
|
.LexicalEditorTheme__hr:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: var(--theme-elevation-250);
|
background-color: var(--theme-elevation-250);
|
||||||
}
|
}
|
||||||
|
|
||||||
.LexicalEditorTheme__hr.selected {
|
.LexicalEditorTheme__hr.selected {
|
||||||
outline: 2px solid var(--theme-success-250);
|
outline: 2px solid var(--theme-success-250);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,86 +1,88 @@
|
|||||||
@import '../../../../../scss/styles.scss';
|
@import '../../../../../scss/styles.scss';
|
||||||
|
|
||||||
.link-editor {
|
@layer payload-default {
|
||||||
z-index: 1;
|
.link-editor {
|
||||||
display: flex;
|
z-index: 1;
|
||||||
align-items: center;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
padding: 4px 4px 4px 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
will-change: transform;
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
|
||||||
0px 4px 16px 0px rgba(0, 0, 0, 0.1),
|
|
||||||
0px -4px 16px 0px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.link-input {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
background: var(--theme-input-bg);
|
||||||
flex-wrap: nowrap;
|
padding: 4px 4px 4px 12px;
|
||||||
min-height: 28px;
|
vertical-align: middle;
|
||||||
box-sizing: border-box;
|
position: absolute;
|
||||||
@extend %body;
|
top: 0;
|
||||||
border: 0;
|
left: 0;
|
||||||
outline: 0;
|
opacity: 0;
|
||||||
position: relative;
|
border-radius: $style-radius-m;
|
||||||
font-family: var(--font-body);
|
transition: opacity 0.2s;
|
||||||
|
will-change: transform;
|
||||||
|
box-shadow:
|
||||||
|
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
||||||
|
0px 4px 16px 0px rgba(0, 0, 0, 0.1),
|
||||||
|
0px -4px 16px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
&__label-pure {
|
.link-input {
|
||||||
color: var(--theme-elevation-1000);
|
display: flex;
|
||||||
margin-right: 15px;
|
align-items: center;
|
||||||
display: block;
|
flex-direction: row;
|
||||||
white-space: nowrap;
|
flex-wrap: nowrap;
|
||||||
overflow: hidden;
|
min-height: 28px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@extend %body;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
position: relative;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
|
||||||
|
&__label-pure {
|
||||||
|
color: var(--theme-elevation-1000);
|
||||||
|
margin-right: 15px;
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: underline;
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: base(0.4);
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: var(--theme-success-750);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-success-850);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
button {
|
||||||
text-decoration: underline;
|
all: unset;
|
||||||
display: block;
|
display: flex;
|
||||||
white-space: nowrap;
|
align-items: center;
|
||||||
overflow: hidden;
|
justify-content: center;
|
||||||
margin-right: base(0.4);
|
background-size: 16px;
|
||||||
text-overflow: ellipsis;
|
background-position: center;
|
||||||
color: var(--theme-success-750);
|
background-repeat: no-repeat;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
|
||||||
&:hover {
|
&:hover:not([disabled]) {
|
||||||
color: var(--theme-success-850);
|
color: var(--theme-elevation-800);
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
html[data-theme='light'] {
|
||||||
all: unset;
|
.link-editor {
|
||||||
display: flex;
|
box-shadow:
|
||||||
align-items: center;
|
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
||||||
justify-content: center;
|
0px 4px 8px 0px rgba(0, 0, 0, 0.05),
|
||||||
background-size: 16px;
|
0px -4px 16px 0px rgba(0, 0, 0, 0.05);
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--theme-elevation-600);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
|
|
||||||
&:hover:not([disabled]) {
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='light'] {
|
|
||||||
.link-editor {
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
|
||||||
0px 4px 8px 0px rgba(0, 0, 0, 0.05),
|
|
||||||
0px -4px 16px 0px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,94 +1,96 @@
|
|||||||
@import '../../../../scss/styles.scss';
|
@import '../../../../scss/styles.scss';
|
||||||
|
|
||||||
.lexical-relationship {
|
@layer payload-default {
|
||||||
@extend %body;
|
.lexical-relationship {
|
||||||
@include shadow-sm;
|
@extend %body;
|
||||||
padding: calc(var(--base) * 0.75);
|
@include shadow-sm;
|
||||||
display: flex;
|
padding: calc(var(--base) * 0.75);
|
||||||
align-items: center;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
border: 1px solid var(--theme-elevation-100);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
max-width: calc(var(--base) * 15);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
margin-block: base(0.5);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
margin-bottom: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label,
|
|
||||||
&__title {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--selected {
|
|
||||||
box-shadow: $focus-box-shadow;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__doc-drawer-toggler {
|
|
||||||
text-decoration: underline;
|
|
||||||
pointer-events: all;
|
|
||||||
line-height: inherit;
|
|
||||||
& > * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__swapButton.btn {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__doc-drawer-toggler,
|
|
||||||
&__swapButton {
|
|
||||||
&:disabled {
|
|
||||||
color: var(--theme-elevation-300);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
background: var(--theme-input-bg);
|
||||||
margin-left: calc(var(--base) * 0.5);
|
border: 1px solid var(--theme-elevation-100);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
max-width: calc(var(--base) * 15);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
margin-block: base(0.5);
|
||||||
|
|
||||||
& > *:not(:last-child) {
|
&:hover {
|
||||||
margin-right: calc(var(--base) * 0.25);
|
border: 1px solid var(--theme-elevation-150);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__removeButton.btn {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
line {
|
|
||||||
stroke-width: $style-stroke-width-m;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&__label {
|
||||||
color: var(--theme-elevation-300);
|
margin-bottom: calc(var(--base) * 0.25);
|
||||||
pointer-events: none;
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label,
|
||||||
|
&__title {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__doc-drawer-toggler {
|
||||||
|
text-decoration: underline;
|
||||||
|
pointer-events: all;
|
||||||
|
line-height: inherit;
|
||||||
|
& > * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__swapButton.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__doc-drawer-toggler,
|
||||||
|
&__swapButton {
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: calc(var(--base) * 0.5);
|
||||||
|
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__removeButton.btn {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
line {
|
||||||
|
stroke-width: $style-stroke-width-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,108 +1,110 @@
|
|||||||
@import '../../../../../scss/styles';
|
@import '../../../../../scss/styles';
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
@layer payload-default {
|
||||||
.fixed-toolbar {
|
html[data-theme='dark'] {
|
||||||
&__dropdown-items {
|
.fixed-toolbar {
|
||||||
background: var(--theme-elevation-0);
|
&__dropdown-items {
|
||||||
transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1);
|
background: var(--theme-elevation-0);
|
||||||
|
transition: background 0.2s cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
|
||||||
.toolbar-popup__dropdown-item {
|
.toolbar-popup__dropdown-item {
|
||||||
color: var(--theme-elevation-900);
|
color: var(--theme-elevation-900);
|
||||||
|
|
||||||
&:hover:not([disabled]),
|
&:hover:not([disabled]),
|
||||||
&.active {
|
&.active {
|
||||||
background: var(--theme-elevation-100);
|
background: var(--theme-elevation-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: var(--theme-elevation-600);
|
color: var(--theme-elevation-600);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-popup {
|
.toolbar-popup {
|
||||||
&__dropdown {
|
&__dropdown {
|
||||||
transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
|
transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
|
||||||
&:hover:not([disabled]) {
|
&:hover:not([disabled]) {
|
||||||
background: var(--theme-elevation-100);
|
background: var(--theme-elevation-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-caret:after {
|
&-caret:after {
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-label {
|
&-label {
|
||||||
color: var(--theme-elevation-750);
|
color: var(--theme-elevation-750);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-toolbar.fixed-toolbar--hide {
|
.fixed-toolbar.fixed-toolbar--hide {
|
||||||
visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
|
visibility: hidden; // Still needs to take up space so content does not jump, thus we cannot use display: none
|
||||||
// make sure you cant interact with it
|
// make sure you cant interact with it
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-toolbar {
|
.fixed-toolbar {
|
||||||
@include blur-bg(var(--theme-elevation-0));
|
@include blur-bg(var(--theme-elevation-0));
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
padding: calc(var(--base) / 4);
|
|
||||||
vertical-align: middle;
|
|
||||||
position: sticky;
|
|
||||||
z-index: 2;
|
|
||||||
top: var(--doc-controls-height);
|
|
||||||
border: $style-stroke-width-s solid var(--theme-elevation-150);
|
|
||||||
// Make it so border itself is round too and not cut off at the corners
|
|
||||||
border-collapse: unset;
|
|
||||||
transform: translateY(1px); // aligns with top bar pixel line when stuck
|
|
||||||
|
|
||||||
&__group {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2px;
|
padding: calc(var(--base) / 4);
|
||||||
z-index: 1;
|
vertical-align: middle;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 2;
|
||||||
|
top: var(--doc-controls-height);
|
||||||
|
border: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
|
// Make it so border itself is round too and not cut off at the corners
|
||||||
|
border-collapse: unset;
|
||||||
|
transform: translateY(1px); // aligns with top bar pixel line when stuck
|
||||||
|
|
||||||
.icon {
|
&__group {
|
||||||
min-width: 20px;
|
display: flex;
|
||||||
height: 20px;
|
flex-wrap: wrap;
|
||||||
color: var(--theme-elevation-600);
|
align-items: center;
|
||||||
}
|
gap: 2px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
.divider {
|
.icon {
|
||||||
width: 1px;
|
min-width: 20px;
|
||||||
height: 15px;
|
height: 20px;
|
||||||
background-color: var(--theme-elevation-100);
|
color: var(--theme-elevation-600);
|
||||||
margin: 0 6.25px 0 4.25px; // substract 2px from the gap
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .editor-container {
|
.divider {
|
||||||
> .editor-scroller > .editor {
|
width: 1px;
|
||||||
> .ContentEditable__root {
|
height: 15px;
|
||||||
padding-top: calc(var(--base) * 1.25);
|
background-color: var(--theme-elevation-100);
|
||||||
|
margin: 0 6.25px 0 4.25px; // substract 2px from the gap
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .editor-scroller > .editor > div > .editor-placeholder {
|
|
||||||
top: calc(var(--base) * 1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rich-text-lexical--show-gutter {
|
|
||||||
.fixed-toolbar {
|
|
||||||
+ .editor-container {
|
+ .editor-container {
|
||||||
> .editor-scroller > .editor {
|
> .editor-scroller > .editor {
|
||||||
> .ContentEditable__root::before {
|
> .ContentEditable__root {
|
||||||
top: calc(var(--base) * 1.25) !important;
|
padding-top: calc(var(--base) * 1.25);
|
||||||
height: calc(100% - calc(var(--base) * 1.25) - 8px) !important;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .editor-scroller > .editor > div > .editor-placeholder {
|
||||||
|
top: calc(var(--base) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-text-lexical--show-gutter {
|
||||||
|
.fixed-toolbar {
|
||||||
|
+ .editor-container {
|
||||||
|
> .editor-scroller > .editor {
|
||||||
|
> .ContentEditable__root::before {
|
||||||
|
top: calc(var(--base) * 1.25) !important;
|
||||||
|
height: calc(100% - calc(var(--base) * 1.25) - 8px) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,56 +1,58 @@
|
|||||||
@import '../../../../../scss/styles';
|
@import '../../../../../scss/styles';
|
||||||
|
|
||||||
.inline-toolbar-popup {
|
@layer payload-default {
|
||||||
display: flex;
|
.inline-toolbar-popup {
|
||||||
align-items: center;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
padding: base(0.2);
|
|
||||||
vertical-align: middle;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
opacity: 0;
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
will-change: transform;
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
|
||||||
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
|
||||||
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.caret {
|
|
||||||
z-index: 93;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% - 24px);
|
|
||||||
border: base(0.4) solid transparent;
|
|
||||||
pointer-events: none;
|
|
||||||
border-top-color: var(--theme-input-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__group {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2px;
|
background: var(--theme-input-bg);
|
||||||
|
padding: base(0.2);
|
||||||
.icon {
|
vertical-align: middle;
|
||||||
min-width: 20px;
|
position: absolute;
|
||||||
height: 20px;
|
top: 0;
|
||||||
color: var(--theme-elevation-600);
|
left: 0;
|
||||||
}
|
z-index: 2;
|
||||||
|
opacity: 0;
|
||||||
.divider {
|
border-radius: $style-radius-m;
|
||||||
width: 1px;
|
transition: opacity 0.2s;
|
||||||
height: 15px;
|
will-change: transform;
|
||||||
background-color: var(--theme-border-color);
|
|
||||||
margin: 0 6.25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
html[data-theme='light'] {
|
|
||||||
.inline-toolbar-popup {
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
||||||
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
||||||
|
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.caret {
|
||||||
|
z-index: 93;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% - 24px);
|
||||||
|
border: base(0.4) solid transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
border-top-color: var(--theme-input-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 15px;
|
||||||
|
background-color: var(--theme-border-color);
|
||||||
|
margin: 0 6.25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html[data-theme='light'] {
|
||||||
|
.inline-toolbar-popup {
|
||||||
|
box-shadow:
|
||||||
|
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
||||||
|
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,150 +1,152 @@
|
|||||||
@import '../../../../scss/styles';
|
@import '../../../../scss/styles';
|
||||||
|
|
||||||
.lexical-upload {
|
@layer payload-default {
|
||||||
@extend %body;
|
.lexical-upload {
|
||||||
@include shadow-sm;
|
@extend %body;
|
||||||
max-width: calc(var(--base) * 15);
|
@include shadow-sm;
|
||||||
display: flex;
|
max-width: calc(var(--base) * 15);
|
||||||
align-items: center;
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
border: 1px solid var(--theme-elevation-100);
|
|
||||||
position: relative;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
margin-block: base(0.5);
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__card {
|
|
||||||
@include soft-shadow-bottom;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
width: 100%;
|
background: var(--theme-input-bg);
|
||||||
}
|
border-radius: $style-radius-m;
|
||||||
|
border: 1px solid var(--theme-elevation-100);
|
||||||
&__topRow {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__thumbnail {
|
|
||||||
width: calc(var(--base) * 3.25);
|
|
||||||
height: auto;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
font-family: var(--font-body);
|
||||||
flex-shrink: 0;
|
margin-block: base(0.5);
|
||||||
border-top-left-radius: $style-radius-m;
|
|
||||||
|
|
||||||
img,
|
.btn {
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
object-fit: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--theme-elevation-800);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__topRowRightPanel {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: calc(var(--base) * 0.75);
|
|
||||||
justify-content: space-between;
|
|
||||||
max-width: calc(100% - #{calc(var(--base) * 3.25)});
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-left: calc(var(--base) * 0.5);
|
|
||||||
|
|
||||||
.lexical-upload__doc-drawer-toggler {
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > *:not(:last-child) {
|
|
||||||
margin-right: calc(var(--base) * 0.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__removeButton {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
line {
|
|
||||||
stroke-width: $style-stroke-width-m;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
color: var(--theme-elevation-300);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__upload-drawer-toggler {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
outline: none;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__doc-drawer-toggler {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__doc-drawer-toggler,
|
|
||||||
&__list-drawer-toggler,
|
|
||||||
&__upload-drawer-toggler {
|
|
||||||
& > * {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:hover {
|
||||||
color: var(--theme-elevation-300);
|
border: 1px solid var(--theme-elevation-150);
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__collectionLabel {
|
&__card {
|
||||||
overflow: hidden;
|
@include soft-shadow-bottom;
|
||||||
text-overflow: ellipsis;
|
display: flex;
|
||||||
white-space: nowrap;
|
flex-direction: column;
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&__bottomRow {
|
&__topRow {
|
||||||
padding: calc(var(--base) * 0.5);
|
display: flex;
|
||||||
border-top: 1px solid var(--theme-elevation-100);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
&__thumbnail {
|
||||||
white-space: nowrap;
|
width: calc(var(--base) * 3.25);
|
||||||
text-overflow: ellipsis;
|
height: auto;
|
||||||
overflow: hidden;
|
position: relative;
|
||||||
}
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-top-left-radius: $style-radius-m;
|
||||||
|
|
||||||
&__wrap {
|
img,
|
||||||
padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base);
|
svg {
|
||||||
text-align: left;
|
position: absolute;
|
||||||
overflow: hidden;
|
object-fit: cover;
|
||||||
text-overflow: ellipsis;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
background-color: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&--selected {
|
|
||||||
box-shadow: $focus-box-shadow;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
&__topRowRightPanel {
|
&__topRowRightPanel {
|
||||||
padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5);
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: calc(var(--base) * 0.75);
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: calc(100% - #{calc(var(--base) * 3.25)});
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: calc(var(--base) * 0.5);
|
||||||
|
|
||||||
|
.lexical-upload__doc-drawer-toggler {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-right: calc(var(--base) * 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__removeButton {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
line {
|
||||||
|
stroke-width: $style-stroke-width-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__upload-drawer-toggler {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
outline: none;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__doc-drawer-toggler {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__doc-drawer-toggler,
|
||||||
|
&__list-drawer-toggler,
|
||||||
|
&__upload-drawer-toggler {
|
||||||
|
& > * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: var(--theme-elevation-300);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collectionLabel {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottomRow {
|
||||||
|
padding: calc(var(--base) * 0.5);
|
||||||
|
border-top: 1px solid var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
padding: calc(var(--base) * 0.5) calc(var(--base) * 0.5) calc(var(--base) * 0.5) var(--base);
|
||||||
|
text-align: left;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
&__topRowRightPanel {
|
||||||
|
padding: calc(var(--base) * 0.75) calc(var(--base) * 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,30 +1,32 @@
|
|||||||
@import '../scss/styles.scss';
|
@import '../scss/styles.scss';
|
||||||
|
|
||||||
.rich-text-lexical {
|
@layer payload-default {
|
||||||
& > .field-error.tooltip {
|
.rich-text-lexical {
|
||||||
right: auto;
|
& > .field-error.tooltip {
|
||||||
position: static;
|
right: auto;
|
||||||
margin-bottom: 0.2em;
|
position: static;
|
||||||
max-width: fit-content;
|
margin-bottom: 0.2em;
|
||||||
}
|
max-width: fit-content;
|
||||||
|
|
||||||
.errorBoundary {
|
|
||||||
pre {
|
|
||||||
text-wrap: unset;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__wrap {
|
.errorBoundary {
|
||||||
width: 100%;
|
pre {
|
||||||
position: relative;
|
text-wrap: unset;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&--read-only {
|
&__wrap {
|
||||||
.editor-container {
|
width: 100%;
|
||||||
.editor {
|
position: relative;
|
||||||
background: var(--theme-elevation-200);
|
}
|
||||||
color: var(--theme-elevation-450);
|
|
||||||
padding: calc(var(--base) * 0.5);
|
&--read-only {
|
||||||
|
.editor-container {
|
||||||
|
.editor {
|
||||||
|
background: var(--theme-elevation-200);
|
||||||
|
color: var(--theme-elevation-450);
|
||||||
|
padding: calc(var(--base) * 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,63 +1,65 @@
|
|||||||
@import '../scss/styles';
|
@import '../scss/styles';
|
||||||
|
|
||||||
.rich-text-lexical {
|
@layer payload-default {
|
||||||
.editor {
|
.rich-text-lexical {
|
||||||
position: relative;
|
.editor {
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
.editor-container {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
font-family: var(--font-serif);
|
|
||||||
font-size: base(0.8);
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-family: var(--font-body);
|
|
||||||
line-height: 1.125;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--show-gutter {
|
.editor-container {
|
||||||
> .rich-text-lexical__wrap
|
position: relative;
|
||||||
|
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: base(0.8);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
line-height: 1.125;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--show-gutter {
|
||||||
|
> .rich-text-lexical__wrap
|
||||||
|
> .editor-container
|
||||||
|
> .editor-scroller
|
||||||
|
> .editor
|
||||||
|
> div
|
||||||
|
> .editor-placeholder {
|
||||||
|
left: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(&--show-gutter)
|
||||||
|
> .rich-text-lexical__wrap
|
||||||
> .editor-container
|
> .editor-container
|
||||||
> .editor-scroller
|
> .editor-scroller
|
||||||
> .editor
|
> .editor
|
||||||
> div
|
> div
|
||||||
> .editor-placeholder {
|
> .editor-placeholder {
|
||||||
left: 3rem;
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
font-size: base(0.8);
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--theme-elevation-500);
|
||||||
|
/* Prevent text selection */
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
|
||||||
|
/* Make it behave more like a background element (no interaction) */
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(&--show-gutter)
|
|
||||||
> .rich-text-lexical__wrap
|
|
||||||
> .editor-container
|
|
||||||
> .editor-scroller
|
|
||||||
> .editor
|
|
||||||
> div
|
|
||||||
> .editor-placeholder {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
font-size: base(0.8);
|
|
||||||
line-height: 1.5;
|
|
||||||
color: var(--theme-elevation-500);
|
|
||||||
/* Prevent text selection */
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
|
|
||||||
/* Make it behave more like a background element (no interaction) */
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,67 +1,69 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.slash-menu-popup {
|
@layer payload-default {
|
||||||
background: var(--theme-input-bg);
|
|
||||||
width: 200px;
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
list-style: none;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
z-index: 10;
|
|
||||||
position: absolute;
|
|
||||||
box-shadow:
|
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
|
||||||
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
|
||||||
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&__group {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__group-title {
|
|
||||||
padding-left: 10px;
|
|
||||||
color: var(--theme-elevation-600);
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
all: unset;
|
|
||||||
padding-left: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--theme-elevation-900);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&--selected {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
margin-left: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: var(--theme-elevation-500);
|
|
||||||
min-width: fit-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='light'] {
|
|
||||||
.slash-menu-popup {
|
.slash-menu-popup {
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
width: 200px;
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
list-style: none;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
|
||||||
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
|
||||||
|
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&__group {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__group-title {
|
||||||
|
padding-left: 10px;
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
all: unset;
|
||||||
|
padding-left: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--theme-elevation-900);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
margin-left: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: var(--theme-elevation-500);
|
||||||
|
min-width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='light'] {
|
||||||
|
.slash-menu-popup {
|
||||||
|
box-shadow:
|
||||||
|
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
|
||||||
|
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,33 +1,35 @@
|
|||||||
@import '../../../../scss/styles.scss';
|
@import '../../../../scss/styles.scss';
|
||||||
|
|
||||||
.add-block-menu {
|
@layer payload-default {
|
||||||
all: unset; // reset all default button styles
|
.add-block-menu {
|
||||||
border-radius: $style-radius-m;
|
all: unset; // reset all default button styles
|
||||||
padding: 0;
|
border-radius: $style-radius-m;
|
||||||
cursor: pointer;
|
padding: 0;
|
||||||
opacity: 0;
|
cursor: pointer;
|
||||||
position: absolute;
|
opacity: 0;
|
||||||
left: 0;
|
position: absolute;
|
||||||
top: 0;
|
left: 0;
|
||||||
will-change: transform;
|
top: 0;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--theme-elevation-100);
|
background-color: var(--theme-elevation-100);
|
||||||
.icon {
|
.icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 18px;
|
|
||||||
height: 24px;
|
|
||||||
opacity: 0.3;
|
|
||||||
background-image: url(../../../ui/icons/Add/index.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='dark'] & {
|
|
||||||
.icon {
|
.icon {
|
||||||
background-image: url(../../../ui/icons/Add/light.svg);
|
width: 18px;
|
||||||
|
height: 24px;
|
||||||
|
opacity: 0.3;
|
||||||
|
background-image: url(../../../ui/icons/Add/index.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] & {
|
||||||
|
.icon {
|
||||||
|
background-image: url(../../../ui/icons/Add/light.svg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,76 +1,78 @@
|
|||||||
@import '../../../../scss/styles.scss';
|
@import '../../../../scss/styles.scss';
|
||||||
|
|
||||||
.draggable-block-menu {
|
@layer payload-default {
|
||||||
border-radius: $style-radius-m;
|
.draggable-block-menu {
|
||||||
padding: 0;
|
border-radius: $style-radius-m;
|
||||||
cursor: grab;
|
padding: 0;
|
||||||
opacity: 0;
|
cursor: grab;
|
||||||
position: absolute;
|
opacity: 0;
|
||||||
left: 0;
|
position: absolute;
|
||||||
top: 0;
|
left: 0;
|
||||||
will-change: transform;
|
top: 0;
|
||||||
background-color: var(--theme-bg);
|
will-change: transform;
|
||||||
|
background-color: var(--theme-bg);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
.icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
.icon {
|
.icon {
|
||||||
opacity: 1;
|
width: 18px;
|
||||||
|
height: 24px;
|
||||||
|
opacity: 0.3;
|
||||||
|
background-image: url(../../../ui/icons/DraggableBlock/index.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] & {
|
||||||
|
.icon {
|
||||||
|
background-image: url(../../../ui/icons/DraggableBlock/light.svg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.rich-text-lexical--show-gutter
|
||||||
width: 18px;
|
> .rich-text-lexical__wrap
|
||||||
height: 24px;
|
> .editor-container
|
||||||
opacity: 0.3;
|
> .editor-scroller
|
||||||
background-image: url(../../../ui/icons/DraggableBlock/index.svg);
|
> .editor {
|
||||||
}
|
> .draggable-block-target-line {
|
||||||
|
left: 3rem;
|
||||||
html[data-theme='dark'] & {
|
|
||||||
.icon {
|
|
||||||
background-image: url(../../../ui/icons/DraggableBlock/light.svg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.rich-text-lexical--show-gutter
|
|
||||||
> .rich-text-lexical__wrap
|
|
||||||
> .editor-container
|
|
||||||
> .editor-scroller
|
|
||||||
> .editor {
|
|
||||||
> .draggable-block-target-line {
|
|
||||||
left: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-block-target-line {
|
|
||||||
pointer-events: none;
|
|
||||||
background: var(--theme-success-400);
|
|
||||||
border-radius: 1px;
|
|
||||||
height: base(0.2);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
opacity: 0;
|
|
||||||
will-change: transform;
|
|
||||||
transition: transform 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
|
|
||||||
@-moz-document url-prefix() {
|
|
||||||
.draggable-block-target-line {
|
.draggable-block-target-line {
|
||||||
transition: none;
|
pointer-events: none;
|
||||||
|
background: var(--theme-success-400);
|
||||||
|
border-radius: 1px;
|
||||||
|
height: base(0.2);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
will-change: transform;
|
||||||
|
transition: transform 0.1s;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.rich-text-lexical {
|
/* This targets Firefox 57+. The transition looks ugly on firefox, thus we disable it here */
|
||||||
.ContentEditable__root > * {
|
@-moz-document url-prefix() {
|
||||||
will-change: margin-top, margin-bottom;
|
.draggable-block-target-line {
|
||||||
transition:
|
transition: none;
|
||||||
margin-top 0.08s,
|
}
|
||||||
margin-bottom 0.08s;
|
}
|
||||||
|
|
||||||
|
.rich-text-lexical {
|
||||||
|
.ContentEditable__root > * {
|
||||||
|
will-change: margin-top, margin-bottom;
|
||||||
|
transition:
|
||||||
|
margin-top 0.08s,
|
||||||
|
margin-bottom 0.08s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,392 +1,394 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.LexicalEditorTheme {
|
@layer payload-default {
|
||||||
&__ltr {
|
.LexicalEditorTheme {
|
||||||
text-align: left;
|
&__ltr {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__rtl {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__paragraph {
|
||||||
|
font-size: base(0.8);
|
||||||
|
margin-bottom: 0.55em;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
|
||||||
|
.ContentEditable__root {
|
||||||
|
font-size: base(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__quote {
|
||||||
|
font-size: base(0.8);
|
||||||
|
margin-block: base(0.8);
|
||||||
|
margin-inline: base(0.2);
|
||||||
|
border-inline-start-color: var(--theme-elevation-150);
|
||||||
|
border-inline-start-width: base(0.2);
|
||||||
|
border-inline-start-style: solid;
|
||||||
|
padding-inline-start: base(0.6);
|
||||||
|
padding-block: base(0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h1 {
|
||||||
|
font-size: base(1.4);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.5em 0.4em;
|
||||||
|
line-height: base(1.2);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h2 {
|
||||||
|
font-size: base(1.25);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.55em 0.4em;
|
||||||
|
line-height: base(1.2);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h3 {
|
||||||
|
font-size: base(1.1);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.6em 0.4em;
|
||||||
|
line-height: base(1.3);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h4 {
|
||||||
|
font-size: base(1);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.65em 0.4em;
|
||||||
|
line-height: base(1.4);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h5 {
|
||||||
|
font-size: base(0.9);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.7em 0.4em;
|
||||||
|
line-height: base(1.5);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__h6 {
|
||||||
|
font-size: base(0.8);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-block: 0.75em 0.4em;
|
||||||
|
line-height: base(1.5);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indent {
|
||||||
|
--lexical-indent-base-value: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textBold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textItalic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textUnderline {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textStrikethrough {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textUnderlineStrikethrough {
|
||||||
|
text-decoration: underline line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textSubscript {
|
||||||
|
font-size: 0.8em;
|
||||||
|
vertical-align: sub !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textSuperscript {
|
||||||
|
font-size: 0.8em;
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__textCode {
|
||||||
|
background-color: var(--theme-elevation-50);
|
||||||
|
border: 1px solid var(--theme-elevation-150);
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
padding: base(0.1) base(0.2);
|
||||||
|
font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||||
|
font-size: 0.875em;
|
||||||
|
border-radius: var(--style-radius-s);
|
||||||
|
box-decoration-break: clone;
|
||||||
|
-webkit-box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hashtag {
|
||||||
|
background-color: rgba(88, 144, 255, 0.15);
|
||||||
|
border-bottom: 1px solid rgba(88, 144, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ContentEditable__root &__link {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
color: var(--theme-success-750);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__code {
|
||||||
|
/*background-color: rgb(240, 242, 245);*/
|
||||||
|
font-family: Menlo, Consolas, Monaco, monospace;
|
||||||
|
display: block;
|
||||||
|
padding: 8px 8px 8px 52px;
|
||||||
|
line-height: 1.53;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 8px 0;
|
||||||
|
tab-size: 2;
|
||||||
|
/* white-space: pre; */
|
||||||
|
overflow-x: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__code:before {
|
||||||
|
content: attr(data-gutter);
|
||||||
|
position: absolute;
|
||||||
|
/*background-color: #eee;*/
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
padding: 8px;
|
||||||
|
color: #777;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
text-align: right;
|
||||||
|
min-width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__characterLimit {
|
||||||
|
display: inline;
|
||||||
|
background-color: #ffbbbb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ol1 {
|
||||||
|
padding: 0;
|
||||||
|
list-style-position: outside;
|
||||||
|
margin: base(0.4) 0 base(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ol2 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: upper-alpha;
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ol3 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: lower-alpha;
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ol4 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: upper-roman;
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ol5 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: base(0.4) 0 base(0.8);
|
||||||
|
list-style-position: outside;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ul ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItem {
|
||||||
|
font-size: base(0.8);
|
||||||
|
margin: 0 0 0.4em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItem[dir='rtl'] {
|
||||||
|
margin: 0 40px 0.4em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemChecked,
|
||||||
|
&__listItemUnchecked {
|
||||||
|
position: relative;
|
||||||
|
// Instead of having margin-left: 40px like other list-items or indented paragraphs,
|
||||||
|
// we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
|
||||||
|
// calculation in `CheckListPlugin` matches the checkbox
|
||||||
|
margin-left: 15px;
|
||||||
|
padding-left: 25px;
|
||||||
|
list-style-type: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// See comment above for why we need this
|
||||||
|
&__listItemUnchecked[dir='rtl'],
|
||||||
|
&__listItemChecked[dir='rtl'] {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 25px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemChecked {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemUnchecked:before,
|
||||||
|
&__listItemChecked:before {
|
||||||
|
content: '';
|
||||||
|
width: base(0.8);
|
||||||
|
height: base(0.8);
|
||||||
|
top: base(0.1);
|
||||||
|
left: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
background-size: cover;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemUnchecked[dir='rtl']:before,
|
||||||
|
&__listItemChecked[dir='rtl']:before {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemUnchecked:focus:before,
|
||||||
|
&__listItemChecked:focus:before {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 3px 3px var(--theme-success-400);
|
||||||
|
border: 1px solid var(--theme-elevation-250);
|
||||||
|
border-radius: var(--style-radius-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemUnchecked:before {
|
||||||
|
border: 1px solid var(--theme-elevation-250);
|
||||||
|
border-radius: $style-radius-s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemChecked:before {
|
||||||
|
border: 1px solid var(--theme-elevation-500);
|
||||||
|
border-radius: $style-radius-s;
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__listItemChecked:after {
|
||||||
|
content: '';
|
||||||
|
cursor: pointer;
|
||||||
|
border-color: var(--theme-text);
|
||||||
|
border-style: solid;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
top: 6px;
|
||||||
|
width: 3px;
|
||||||
|
left: 7px;
|
||||||
|
right: 7px;
|
||||||
|
height: 6px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nestedListItem {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nestedListItem:before,
|
||||||
|
&__nestedListItem:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenComment {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenPunctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenProperty {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenSelector {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenOperator {
|
||||||
|
color: #9a6e3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenAttr {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenVariable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tokenFunction {
|
||||||
|
color: #dd4a68;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mark {
|
||||||
|
background: rgba(255, 212, 0, 0.14);
|
||||||
|
border-bottom: 2px solid rgba(255, 212, 0, 0.3);
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__markOverlap {
|
||||||
|
background: rgba(255, 212, 0, 0.3);
|
||||||
|
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mark.selected {
|
||||||
|
background: rgba(255, 212, 0, 0.5);
|
||||||
|
border-bottom: 2px solid rgba(255, 212, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__markOverlap.selected {
|
||||||
|
background: rgba(255, 212, 0, 0.7);
|
||||||
|
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__embedBlock {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__embedBlockFocus {
|
||||||
|
outline: 2px solid rgb(60, 132, 244);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ContentEditable__root {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__rtl {
|
html[data-theme='dark'] {
|
||||||
text-align: right;
|
.LexicalEditorTheme__textCode {
|
||||||
}
|
color: var(--theme-warning-600);
|
||||||
|
|
||||||
&__paragraph {
|
|
||||||
font-size: base(0.8);
|
|
||||||
margin-bottom: 0.55em;
|
|
||||||
position: relative;
|
|
||||||
line-height: 1.5;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
// No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
|
|
||||||
.ContentEditable__root {
|
|
||||||
font-size: base(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__quote {
|
|
||||||
font-size: base(0.8);
|
|
||||||
margin-block: base(0.8);
|
|
||||||
margin-inline: base(0.2);
|
|
||||||
border-inline-start-color: var(--theme-elevation-150);
|
|
||||||
border-inline-start-width: base(0.2);
|
|
||||||
border-inline-start-style: solid;
|
|
||||||
padding-inline-start: base(0.6);
|
|
||||||
padding-block: base(0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h1 {
|
|
||||||
font-size: base(1.4);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.5em 0.4em;
|
|
||||||
line-height: base(1.2);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h2 {
|
|
||||||
font-size: base(1.25);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.55em 0.4em;
|
|
||||||
line-height: base(1.2);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h3 {
|
|
||||||
font-size: base(1.1);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.6em 0.4em;
|
|
||||||
line-height: base(1.3);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h4 {
|
|
||||||
font-size: base(1);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.65em 0.4em;
|
|
||||||
line-height: base(1.4);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h5 {
|
|
||||||
font-size: base(0.9);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.7em 0.4em;
|
|
||||||
line-height: base(1.5);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__h6 {
|
|
||||||
font-size: base(0.8);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block: 0.75em 0.4em;
|
|
||||||
line-height: base(1.5);
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indent {
|
|
||||||
--lexical-indent-base-value: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textBold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textItalic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textUnderline {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textStrikethrough {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textUnderlineStrikethrough {
|
|
||||||
text-decoration: underline line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textSubscript {
|
|
||||||
font-size: 0.8em;
|
|
||||||
vertical-align: sub !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textSuperscript {
|
|
||||||
font-size: 0.8em;
|
|
||||||
vertical-align: super;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__textCode {
|
|
||||||
background-color: var(--theme-elevation-50);
|
|
||||||
border: 1px solid var(--theme-elevation-150);
|
|
||||||
color: var(--theme-error-600);
|
|
||||||
padding: base(0.1) base(0.2);
|
|
||||||
font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
|
||||||
font-size: 0.875em;
|
|
||||||
border-radius: var(--style-radius-s);
|
|
||||||
box-decoration-break: clone;
|
|
||||||
-webkit-box-decoration-break: clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hashtag {
|
|
||||||
background-color: rgba(88, 144, 255, 0.15);
|
|
||||||
border-bottom: 1px solid rgba(88, 144, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ContentEditable__root &__link {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
color: var(--theme-success-750);
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__code {
|
|
||||||
/*background-color: rgb(240, 242, 245);*/
|
|
||||||
font-family: Menlo, Consolas, Monaco, monospace;
|
|
||||||
display: block;
|
|
||||||
padding: 8px 8px 8px 52px;
|
|
||||||
line-height: 1.53;
|
|
||||||
font-size: 13px;
|
|
||||||
margin: 8px 0;
|
|
||||||
tab-size: 2;
|
|
||||||
/* white-space: pre; */
|
|
||||||
overflow-x: auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__code:before {
|
|
||||||
content: attr(data-gutter);
|
|
||||||
position: absolute;
|
|
||||||
/*background-color: #eee;*/
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-right: 1px solid #ccc;
|
|
||||||
padding: 8px;
|
|
||||||
color: #777;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
text-align: right;
|
|
||||||
min-width: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__characterLimit {
|
|
||||||
display: inline;
|
|
||||||
background-color: #ffbbbb !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ol1 {
|
|
||||||
padding: 0;
|
|
||||||
list-style-position: outside;
|
|
||||||
margin: base(0.4) 0 base(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ol2 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: upper-alpha;
|
|
||||||
list-style-position: outside;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ol3 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: lower-alpha;
|
|
||||||
list-style-position: outside;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ol4 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: upper-roman;
|
|
||||||
list-style-position: outside;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ol5 {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: lower-roman;
|
|
||||||
list-style-position: outside;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ul {
|
|
||||||
padding: 0;
|
|
||||||
margin: base(0.4) 0 base(0.8);
|
|
||||||
list-style-position: outside;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__ul ul {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItem {
|
|
||||||
font-size: base(0.8);
|
|
||||||
margin: 0 0 0.4em 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItem[dir='rtl'] {
|
|
||||||
margin: 0 40px 0.4em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemChecked,
|
|
||||||
&__listItemUnchecked {
|
|
||||||
position: relative;
|
|
||||||
// Instead of having margin-left: 40px like other list-items or indented paragraphs,
|
|
||||||
// we use padding-left: 25px + margin-left: 15px = 40px, so that the click position
|
|
||||||
// calculation in `CheckListPlugin` matches the checkbox
|
|
||||||
margin-left: 15px;
|
|
||||||
padding-left: 25px;
|
|
||||||
list-style-type: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// See comment above for why we need this
|
|
||||||
&__listItemUnchecked[dir='rtl'],
|
|
||||||
&__listItemChecked[dir='rtl'] {
|
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 25px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemChecked {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemUnchecked:before,
|
|
||||||
&__listItemChecked:before {
|
|
||||||
content: '';
|
|
||||||
width: base(0.8);
|
|
||||||
height: base(0.8);
|
|
||||||
top: base(0.1);
|
|
||||||
left: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
background-size: cover;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemUnchecked[dir='rtl']:before,
|
|
||||||
&__listItemChecked[dir='rtl']:before {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemUnchecked:focus:before,
|
|
||||||
&__listItemChecked:focus:before {
|
|
||||||
outline: 0;
|
|
||||||
box-shadow: 0 0 3px 3px var(--theme-success-400);
|
|
||||||
border: 1px solid var(--theme-elevation-250);
|
|
||||||
border-radius: var(--style-radius-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemUnchecked:before {
|
|
||||||
border: 1px solid var(--theme-elevation-250);
|
|
||||||
border-radius: $style-radius-s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemChecked:before {
|
|
||||||
border: 1px solid var(--theme-elevation-500);
|
|
||||||
border-radius: $style-radius-s;
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__listItemChecked:after {
|
|
||||||
content: '';
|
|
||||||
cursor: pointer;
|
|
||||||
border-color: var(--theme-text);
|
|
||||||
border-style: solid;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 6px;
|
|
||||||
width: 3px;
|
|
||||||
left: 7px;
|
|
||||||
right: 7px;
|
|
||||||
height: 6px;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__nestedListItem {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__nestedListItem:before,
|
|
||||||
&__nestedListItem:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenComment {
|
|
||||||
color: slategray;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenPunctuation {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenProperty {
|
|
||||||
color: #905;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenSelector {
|
|
||||||
color: #690;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenOperator {
|
|
||||||
color: #9a6e3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenAttr {
|
|
||||||
color: #07a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenVariable {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tokenFunction {
|
|
||||||
color: #dd4a68;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mark {
|
|
||||||
background: rgba(255, 212, 0, 0.14);
|
|
||||||
border-bottom: 2px solid rgba(255, 212, 0, 0.3);
|
|
||||||
padding-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__markOverlap {
|
|
||||||
background: rgba(255, 212, 0, 0.3);
|
|
||||||
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mark.selected {
|
|
||||||
background: rgba(255, 212, 0, 0.5);
|
|
||||||
border-bottom: 2px solid rgba(255, 212, 0, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__markOverlap.selected {
|
|
||||||
background: rgba(255, 212, 0, 0.7);
|
|
||||||
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__embedBlock {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__embedBlockFocus {
|
|
||||||
outline: 2px solid rgb(60, 132, 244);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ContentEditable__root {
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
|
||||||
.LexicalEditorTheme__textCode {
|
|
||||||
color: var(--theme-warning-600);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -3,89 +3,91 @@
|
|||||||
$lexical-contenteditable-top-padding: 8px;
|
$lexical-contenteditable-top-padding: 8px;
|
||||||
$lexical-contenteditable-bottom-padding: 8px;
|
$lexical-contenteditable-bottom-padding: 8px;
|
||||||
|
|
||||||
.ContentEditable__root {
|
@layer payload-default {
|
||||||
border: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
tab-size: 1;
|
|
||||||
outline: 0;
|
|
||||||
padding-top: $lexical-contenteditable-top-padding;
|
|
||||||
padding-bottom: $lexical-contenteditable-bottom-padding;
|
|
||||||
//min-height: base(10);
|
|
||||||
|
|
||||||
&:focus-visible {
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
transition: transform 0.2s ease-in-out;
|
|
||||||
// will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.ContentEditable__root {
|
.ContentEditable__root {
|
||||||
padding-left: 0;
|
border: 0;
|
||||||
padding-right: 0;
|
font-size: 15px;
|
||||||
}
|
display: block;
|
||||||
}
|
position: relative;
|
||||||
|
tab-size: 1;
|
||||||
|
outline: 0;
|
||||||
|
padding-top: $lexical-contenteditable-top-padding;
|
||||||
|
padding-bottom: $lexical-contenteditable-bottom-padding;
|
||||||
|
//min-height: base(10);
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
&:focus-visible {
|
||||||
.rich-text-lexical--show-gutter
|
outline: none !important;
|
||||||
> .rich-text-lexical__wrap
|
|
||||||
> .editor-container
|
|
||||||
> .editor-scroller
|
|
||||||
> .editor {
|
|
||||||
> .ContentEditable__root {
|
|
||||||
padding-left: 3rem;
|
|
||||||
}
|
}
|
||||||
> .ContentEditable__root::before {
|
|
||||||
content: ' ';
|
& > * {
|
||||||
position: absolute;
|
transition: transform 0.2s ease-in-out;
|
||||||
top: $lexical-contenteditable-top-padding;
|
// will-change: transform; // breaks cursor rendering for empty paragraph blocks in safari, and creates other issues
|
||||||
left: 0;
|
|
||||||
height: calc(
|
|
||||||
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
|
|
||||||
);
|
|
||||||
border-left: 1px solid var(--theme-elevation-100);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='light'] {
|
@media (max-width: 768px) {
|
||||||
.rich-text-lexical.rich-text-lexical--show-gutter {
|
.ContentEditable__root {
|
||||||
&.error:not(:hover) {
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
.rich-text-lexical--show-gutter
|
||||||
> .rich-text-lexical__wrap
|
> .rich-text-lexical__wrap
|
||||||
> .editor-container
|
> .editor-container
|
||||||
> .editor-scroller
|
> .editor-scroller
|
||||||
> .editor
|
> .editor {
|
||||||
> .ContentEditable__root::before {
|
> .ContentEditable__root {
|
||||||
border-left: 2px solid var(--theme-error-400);
|
padding-left: 3rem;
|
||||||
|
}
|
||||||
|
> .ContentEditable__root::before {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
top: $lexical-contenteditable-top-padding;
|
||||||
|
left: 0;
|
||||||
|
height: calc(
|
||||||
|
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
|
||||||
|
);
|
||||||
|
border-left: 1px solid var(--theme-elevation-100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.error:hover {
|
html[data-theme='light'] {
|
||||||
> .rich-text-lexical__wrap
|
.rich-text-lexical.rich-text-lexical--show-gutter {
|
||||||
> .editor-container
|
&.error:not(:hover) {
|
||||||
> .editor-scroller
|
> .rich-text-lexical__wrap
|
||||||
> .editor
|
> .editor-container
|
||||||
> .ContentEditable__root::before {
|
> .editor-scroller
|
||||||
border-left: 2px solid var(--theme-error-500);
|
> .editor
|
||||||
}
|
> .ContentEditable__root::before {
|
||||||
}
|
border-left: 2px solid var(--theme-error-400);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
&.error:hover {
|
||||||
.rich-text-lexical.rich-text-lexical--show-gutter {
|
> .rich-text-lexical__wrap
|
||||||
&.error {
|
> .editor-container
|
||||||
> .rich-text-lexical__wrap
|
> .editor-scroller
|
||||||
> .editor-container
|
> .editor
|
||||||
> .editor-scroller
|
> .ContentEditable__root::before {
|
||||||
> .editor
|
border-left: 2px solid var(--theme-error-500);
|
||||||
> .ContentEditable__root::before {
|
}
|
||||||
border-left: 2px solid var(--theme-error-500);
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='dark'] {
|
||||||
|
.rich-text-lexical.rich-text-lexical--show-gutter {
|
||||||
|
&.error {
|
||||||
|
> .rich-text-lexical__wrap
|
||||||
|
> .editor-container
|
||||||
|
> .editor-scroller
|
||||||
|
> .editor
|
||||||
|
> .ContentEditable__root::before {
|
||||||
|
border-left: 2px solid var(--theme-error-500);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,202 +2,204 @@
|
|||||||
@import './toasts.scss';
|
@import './toasts.scss';
|
||||||
@import './colors.scss';
|
@import './colors.scss';
|
||||||
|
|
||||||
:root {
|
@layer payload-default {
|
||||||
--base-px: 20;
|
:root {
|
||||||
--base-body-size: 13;
|
--base-px: 20;
|
||||||
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
--base-body-size: 13;
|
||||||
|
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
||||||
|
|
||||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||||
--scrollbar-width: 17px;
|
--scrollbar-width: 17px;
|
||||||
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
|
||||||
--theme-input-bg: var(--theme-elevation-0);
|
|
||||||
--theme-text: var(--theme-elevation-800);
|
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
|
||||||
--theme-baseline: #{$baseline-px};
|
|
||||||
--theme-baseline-body-size: #{$baseline-body-size};
|
|
||||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
||||||
sans-serif;
|
|
||||||
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
|
||||||
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
|
||||||
|
|
||||||
--style-radius-s: #{$style-radius-s};
|
|
||||||
--style-radius-m: #{$style-radius-m};
|
|
||||||
--style-radius-l: #{$style-radius-l};
|
|
||||||
|
|
||||||
--z-popup: 10;
|
|
||||||
--z-nav: 20;
|
|
||||||
--z-modal: 30;
|
|
||||||
--z-status: 40;
|
|
||||||
|
|
||||||
--accessibility-outline: 2px solid var(--theme-text);
|
|
||||||
--accessibility-outline-offset: 2px;
|
|
||||||
|
|
||||||
--gutter-h: #{base(3)};
|
|
||||||
--spacing-view-bottom: var(--gutter-h);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.8);
|
|
||||||
--app-header-height: calc(var(--base) * 2.8);
|
|
||||||
--nav-width: 275px;
|
|
||||||
--nav-trans-time: 150ms;
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
--gutter-h: #{base(2)};
|
|
||||||
--app-header-height: calc(var(--base) * 2.4);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
--gutter-h: #{base(0.8)};
|
|
||||||
--spacing-view-bottom: calc(var(--base) * 2);
|
|
||||||
--nav-width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// GLOBAL STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
@extend %body;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
|
|
||||||
&[data-theme='dark'] {
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
--theme-text: var(--theme-elevation-1000);
|
--theme-input-bg: var(--theme-elevation-0);
|
||||||
--theme-input-bg: var(--theme-elevation-50);
|
--theme-text: var(--theme-elevation-800);
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||||
color-scheme: dark;
|
--theme-baseline: #{$baseline-px};
|
||||||
|
--theme-baseline-body-size: #{$baseline-body-size};
|
||||||
|
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||||
|
sans-serif;
|
||||||
|
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
||||||
|
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||||
|
|
||||||
::selection {
|
--style-radius-s: #{$style-radius-s};
|
||||||
color: var(--color-base-1000);
|
--style-radius-m: #{$style-radius-m};
|
||||||
|
--style-radius-l: #{$style-radius-l};
|
||||||
|
|
||||||
|
--z-popup: 10;
|
||||||
|
--z-nav: 20;
|
||||||
|
--z-modal: 30;
|
||||||
|
--z-status: 40;
|
||||||
|
|
||||||
|
--accessibility-outline: 2px solid var(--theme-text);
|
||||||
|
--accessibility-outline-offset: 2px;
|
||||||
|
|
||||||
|
--gutter-h: #{base(3)};
|
||||||
|
--spacing-view-bottom: var(--gutter-h);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.8);
|
||||||
|
--app-header-height: calc(var(--base) * 2.8);
|
||||||
|
--nav-width: 275px;
|
||||||
|
--nav-trans-time: 150ms;
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
--gutter-h: #{base(2)};
|
||||||
|
--app-header-height: calc(var(--base) * 2.4);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
@include small-break {
|
||||||
color: var(--color-base-1000);
|
--gutter-h: #{base(0.8)};
|
||||||
|
--spacing-view-bottom: calc(var(--base) * 2);
|
||||||
|
--nav-width: 100vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mid-break {
|
/////////////////////////////
|
||||||
font-size: 12px;
|
// GLOBAL STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html {
|
||||||
body,
|
@extend %body;
|
||||||
#app {
|
background: var(--theme-bg);
|
||||||
height: 100%;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
&[data-theme='dark'] {
|
||||||
font-family: var(--font-body);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
font-weight: 400;
|
--theme-text: var(--theme-elevation-1000);
|
||||||
color: var(--theme-text);
|
--theme-input-bg: var(--theme-elevation-50);
|
||||||
margin: 0;
|
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||||
// this is for the nav to be able to push the document over
|
color-scheme: dark;
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
@include mid-break {
|
||||||
max-width: 100%;
|
font-size: 12px;
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@extend %h1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@extend %h2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
@extend %h3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
@extend %h4;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
@extend %h5;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
@extend %h6;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: $baseline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus-visible {
|
|
||||||
outline: var(--accessibility-outline);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: currentColor;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
&:not(:focus-visible) {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
html,
|
||||||
opacity: 0.7;
|
body,
|
||||||
outline: none;
|
#app {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
body {
|
||||||
vertical-align: middle;
|
font-family: var(--font-body);
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: var(--theme-text);
|
||||||
|
margin: 0;
|
||||||
|
// this is for the nav to be able to push the document over
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
dialog {
|
::selection {
|
||||||
width: 100%;
|
background: var(--color-success-250);
|
||||||
border: 0;
|
color: var(--theme-base-800);
|
||||||
padding: 0;
|
}
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload__modal-item {
|
::-moz-selection {
|
||||||
min-height: 100%;
|
background: var(--color-success-250);
|
||||||
background: transparent;
|
color: var(--theme-base-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payload__modal-container--enterDone {
|
img {
|
||||||
overflow: auto;
|
max-width: 100%;
|
||||||
}
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.payload__modal-item--enter,
|
h1 {
|
||||||
.payload__modal-item--enterDone {
|
@extend %h1;
|
||||||
z-index: var(--z-modal);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// @import '~payload-user-css'; TODO: re-enable this
|
h2 {
|
||||||
|
@extend %h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %h6;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: $baseline;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: var(--accessibility-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
&:not(:focus-visible) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item {
|
||||||
|
min-height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-container--enterDone {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item--enter,
|
||||||
|
.payload__modal-item--enterDone {
|
||||||
|
z-index: var(--z-modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
// @import '~payload-user-css'; TODO: re-enable this
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,269 +1,271 @@
|
|||||||
:root {
|
@layer payload-default {
|
||||||
--color-base-0: rgb(255, 255, 255);
|
:root {
|
||||||
--color-base-50: rgb(245, 245, 245);
|
--color-base-0: rgb(255, 255, 255);
|
||||||
--color-base-100: rgb(235, 235, 235);
|
--color-base-50: rgb(245, 245, 245);
|
||||||
--color-base-150: rgb(221, 221, 221);
|
--color-base-100: rgb(235, 235, 235);
|
||||||
--color-base-200: rgb(208, 208, 208);
|
--color-base-150: rgb(221, 221, 221);
|
||||||
--color-base-250: rgb(195, 195, 195);
|
--color-base-200: rgb(208, 208, 208);
|
||||||
--color-base-300: rgb(181, 181, 181);
|
--color-base-250: rgb(195, 195, 195);
|
||||||
--color-base-350: rgb(168, 168, 168);
|
--color-base-300: rgb(181, 181, 181);
|
||||||
--color-base-400: rgb(154, 154, 154);
|
--color-base-350: rgb(168, 168, 168);
|
||||||
--color-base-450: rgb(141, 141, 141);
|
--color-base-400: rgb(154, 154, 154);
|
||||||
--color-base-500: rgb(128, 128, 128);
|
--color-base-450: rgb(141, 141, 141);
|
||||||
--color-base-550: rgb(114, 114, 114);
|
--color-base-500: rgb(128, 128, 128);
|
||||||
--color-base-600: rgb(101, 101, 101);
|
--color-base-550: rgb(114, 114, 114);
|
||||||
--color-base-650: rgb(87, 87, 87);
|
--color-base-600: rgb(101, 101, 101);
|
||||||
--color-base-700: rgb(74, 74, 74);
|
--color-base-650: rgb(87, 87, 87);
|
||||||
--color-base-750: rgb(60, 60, 60);
|
--color-base-700: rgb(74, 74, 74);
|
||||||
--color-base-800: rgb(47, 47, 47);
|
--color-base-750: rgb(60, 60, 60);
|
||||||
--color-base-850: rgb(34, 34, 34);
|
--color-base-800: rgb(47, 47, 47);
|
||||||
--color-base-900: rgb(20, 20, 20);
|
--color-base-850: rgb(34, 34, 34);
|
||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-900: rgb(20, 20, 20);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(237, 245, 249);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(218, 237, 248);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(188, 225, 248);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(156, 216, 253);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(125, 204, 248);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(97, 190, 241);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(65, 178, 236);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(36, 164, 223);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(18, 148, 204);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(21, 135, 186);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(12, 121, 168);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(11, 110, 153);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(11, 97, 135);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(17, 88, 121);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(17, 76, 105);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(18, 66, 90);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(18, 56, 76);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(19, 44, 58);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(22, 33, 39);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-error-50: rgb(250, 241, 240);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-error-100: rgb(252, 229, 227);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-error-150: rgb(247, 208, 204);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-error-200: rgb(254, 193, 188);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-error-250: rgb(253, 177, 170);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-error-300: rgb(253, 154, 146);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-error-350: rgb(253, 131, 123);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-error-400: rgb(246, 109, 103);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-error-450: rgb(234, 90, 86);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-error-500: rgb(218, 75, 72);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-error-550: rgb(200, 62, 61);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-error-600: rgb(182, 54, 54);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-error-650: rgb(161, 47, 47);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-error-700: rgb(144, 44, 43);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-error-750: rgb(123, 41, 39);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-error-800: rgb(105, 39, 37);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-error-850: rgb(86, 36, 33);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-error-900: rgb(64, 32, 29);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-error-950: rgb(44, 26, 24);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-warning-50: rgb(249, 242, 237);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-warning-100: rgb(248, 232, 219);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-warning-150: rgb(243, 212, 186);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-warning-200: rgb(243, 200, 162);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-warning-250: rgb(240, 185, 136);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-warning-300: rgb(238, 166, 98);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-warning-350: rgb(234, 148, 58);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-warning-400: rgb(223, 132, 17);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-warning-450: rgb(204, 120, 15);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-warning-500: rgb(185, 108, 13);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-warning-550: rgb(167, 97, 10);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-warning-600: rgb(150, 87, 11);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-warning-650: rgb(134, 78, 11);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-warning-700: rgb(120, 70, 13);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-warning-750: rgb(105, 61, 13);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-warning-800: rgb(90, 55, 19);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-warning-850: rgb(73, 47, 21);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-warning-900: rgb(56, 38, 20);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-warning-950: rgb(38, 29, 21);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(237, 245, 249);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(218, 237, 248);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(188, 225, 248);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(156, 216, 253);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(125, 204, 248);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(97, 190, 241);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(65, 178, 236);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(36, 164, 223);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(18, 148, 204);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(21, 135, 186);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(12, 121, 168);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(11, 110, 153);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(11, 97, 135);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(17, 88, 121);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(17, 76, 105);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(18, 66, 90);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(18, 56, 76);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(19, 44, 58);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(22, 33, 39);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-50);
|
--theme-success-50: var(--color-success-50);
|
||||||
--theme-success-100: var(--color-success-100);
|
--theme-success-100: var(--color-success-100);
|
||||||
--theme-success-150: var(--color-success-150);
|
--theme-success-150: var(--color-success-150);
|
||||||
--theme-success-200: var(--color-success-200);
|
--theme-success-200: var(--color-success-200);
|
||||||
--theme-success-250: var(--color-success-250);
|
--theme-success-250: var(--color-success-250);
|
||||||
--theme-success-300: var(--color-success-300);
|
--theme-success-300: var(--color-success-300);
|
||||||
--theme-success-350: var(--color-success-350);
|
--theme-success-350: var(--color-success-350);
|
||||||
--theme-success-400: var(--color-success-400);
|
--theme-success-400: var(--color-success-400);
|
||||||
--theme-success-450: var(--color-success-450);
|
--theme-success-450: var(--color-success-450);
|
||||||
--theme-success-500: var(--color-success-500);
|
--theme-success-500: var(--color-success-500);
|
||||||
--theme-success-550: var(--color-success-550);
|
--theme-success-550: var(--color-success-550);
|
||||||
--theme-success-600: var(--color-success-600);
|
--theme-success-600: var(--color-success-600);
|
||||||
--theme-success-650: var(--color-success-650);
|
--theme-success-650: var(--color-success-650);
|
||||||
--theme-success-700: var(--color-success-700);
|
--theme-success-700: var(--color-success-700);
|
||||||
--theme-success-750: var(--color-success-750);
|
--theme-success-750: var(--color-success-750);
|
||||||
--theme-success-800: var(--color-success-800);
|
--theme-success-800: var(--color-success-800);
|
||||||
--theme-success-850: var(--color-success-850);
|
--theme-success-850: var(--color-success-850);
|
||||||
--theme-success-900: var(--color-success-900);
|
--theme-success-900: var(--color-success-900);
|
||||||
--theme-success-950: var(--color-success-950);
|
--theme-success-950: var(--color-success-950);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-50);
|
--theme-warning-50: var(--color-warning-50);
|
||||||
--theme-warning-100: var(--color-warning-100);
|
--theme-warning-100: var(--color-warning-100);
|
||||||
--theme-warning-150: var(--color-warning-150);
|
--theme-warning-150: var(--color-warning-150);
|
||||||
--theme-warning-200: var(--color-warning-200);
|
--theme-warning-200: var(--color-warning-200);
|
||||||
--theme-warning-250: var(--color-warning-250);
|
--theme-warning-250: var(--color-warning-250);
|
||||||
--theme-warning-300: var(--color-warning-300);
|
--theme-warning-300: var(--color-warning-300);
|
||||||
--theme-warning-350: var(--color-warning-350);
|
--theme-warning-350: var(--color-warning-350);
|
||||||
--theme-warning-400: var(--color-warning-400);
|
--theme-warning-400: var(--color-warning-400);
|
||||||
--theme-warning-450: var(--color-warning-450);
|
--theme-warning-450: var(--color-warning-450);
|
||||||
--theme-warning-500: var(--color-warning-500);
|
--theme-warning-500: var(--color-warning-500);
|
||||||
--theme-warning-550: var(--color-warning-550);
|
--theme-warning-550: var(--color-warning-550);
|
||||||
--theme-warning-600: var(--color-warning-600);
|
--theme-warning-600: var(--color-warning-600);
|
||||||
--theme-warning-650: var(--color-warning-650);
|
--theme-warning-650: var(--color-warning-650);
|
||||||
--theme-warning-700: var(--color-warning-700);
|
--theme-warning-700: var(--color-warning-700);
|
||||||
--theme-warning-750: var(--color-warning-750);
|
--theme-warning-750: var(--color-warning-750);
|
||||||
--theme-warning-800: var(--color-warning-800);
|
--theme-warning-800: var(--color-warning-800);
|
||||||
--theme-warning-850: var(--color-warning-850);
|
--theme-warning-850: var(--color-warning-850);
|
||||||
--theme-warning-900: var(--color-warning-900);
|
--theme-warning-900: var(--color-warning-900);
|
||||||
--theme-warning-950: var(--color-warning-950);
|
--theme-warning-950: var(--color-warning-950);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-50);
|
--theme-error-50: var(--color-error-50);
|
||||||
--theme-error-100: var(--color-error-100);
|
--theme-error-100: var(--color-error-100);
|
||||||
--theme-error-150: var(--color-error-150);
|
--theme-error-150: var(--color-error-150);
|
||||||
--theme-error-200: var(--color-error-200);
|
--theme-error-200: var(--color-error-200);
|
||||||
--theme-error-250: var(--color-error-250);
|
--theme-error-250: var(--color-error-250);
|
||||||
--theme-error-300: var(--color-error-300);
|
--theme-error-300: var(--color-error-300);
|
||||||
--theme-error-350: var(--color-error-350);
|
--theme-error-350: var(--color-error-350);
|
||||||
--theme-error-400: var(--color-error-400);
|
--theme-error-400: var(--color-error-400);
|
||||||
--theme-error-450: var(--color-error-450);
|
--theme-error-450: var(--color-error-450);
|
||||||
--theme-error-500: var(--color-error-500);
|
--theme-error-500: var(--color-error-500);
|
||||||
--theme-error-550: var(--color-error-550);
|
--theme-error-550: var(--color-error-550);
|
||||||
--theme-error-600: var(--color-error-600);
|
--theme-error-600: var(--color-error-600);
|
||||||
--theme-error-650: var(--color-error-650);
|
--theme-error-650: var(--color-error-650);
|
||||||
--theme-error-700: var(--color-error-700);
|
--theme-error-700: var(--color-error-700);
|
||||||
--theme-error-750: var(--color-error-750);
|
--theme-error-750: var(--color-error-750);
|
||||||
--theme-error-800: var(--color-error-800);
|
--theme-error-800: var(--color-error-800);
|
||||||
--theme-error-850: var(--color-error-850);
|
--theme-error-850: var(--color-error-850);
|
||||||
--theme-error-900: var(--color-error-900);
|
--theme-error-900: var(--color-error-900);
|
||||||
--theme-error-950: var(--color-error-950);
|
--theme-error-950: var(--color-error-950);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-0);
|
--theme-elevation-0: var(--color-base-0);
|
||||||
--theme-elevation-50: var(--color-base-50);
|
--theme-elevation-50: var(--color-base-50);
|
||||||
--theme-elevation-100: var(--color-base-100);
|
--theme-elevation-100: var(--color-base-100);
|
||||||
--theme-elevation-150: var(--color-base-150);
|
--theme-elevation-150: var(--color-base-150);
|
||||||
--theme-elevation-200: var(--color-base-200);
|
--theme-elevation-200: var(--color-base-200);
|
||||||
--theme-elevation-250: var(--color-base-250);
|
--theme-elevation-250: var(--color-base-250);
|
||||||
--theme-elevation-300: var(--color-base-300);
|
--theme-elevation-300: var(--color-base-300);
|
||||||
--theme-elevation-350: var(--color-base-350);
|
--theme-elevation-350: var(--color-base-350);
|
||||||
--theme-elevation-400: var(--color-base-400);
|
--theme-elevation-400: var(--color-base-400);
|
||||||
--theme-elevation-450: var(--color-base-450);
|
--theme-elevation-450: var(--color-base-450);
|
||||||
--theme-elevation-500: var(--color-base-500);
|
--theme-elevation-500: var(--color-base-500);
|
||||||
--theme-elevation-550: var(--color-base-550);
|
--theme-elevation-550: var(--color-base-550);
|
||||||
--theme-elevation-600: var(--color-base-600);
|
--theme-elevation-600: var(--color-base-600);
|
||||||
--theme-elevation-650: var(--color-base-650);
|
--theme-elevation-650: var(--color-base-650);
|
||||||
--theme-elevation-700: var(--color-base-700);
|
--theme-elevation-700: var(--color-base-700);
|
||||||
--theme-elevation-750: var(--color-base-750);
|
--theme-elevation-750: var(--color-base-750);
|
||||||
--theme-elevation-800: var(--color-base-800);
|
--theme-elevation-800: var(--color-base-800);
|
||||||
--theme-elevation-850: var(--color-base-850);
|
--theme-elevation-850: var(--color-base-850);
|
||||||
--theme-elevation-900: var(--color-base-900);
|
--theme-elevation-900: var(--color-base-900);
|
||||||
--theme-elevation-950: var(--color-base-950);
|
--theme-elevation-950: var(--color-base-950);
|
||||||
--theme-elevation-1000: var(--color-base-1000);
|
--theme-elevation-1000: var(--color-base-1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-900);
|
--theme-elevation-0: var(--color-base-900);
|
||||||
--theme-elevation-50: var(--color-base-850);
|
--theme-elevation-50: var(--color-base-850);
|
||||||
--theme-elevation-100: var(--color-base-800);
|
--theme-elevation-100: var(--color-base-800);
|
||||||
--theme-elevation-150: var(--color-base-750);
|
--theme-elevation-150: var(--color-base-750);
|
||||||
--theme-elevation-200: var(--color-base-700);
|
--theme-elevation-200: var(--color-base-700);
|
||||||
--theme-elevation-250: var(--color-base-650);
|
--theme-elevation-250: var(--color-base-650);
|
||||||
--theme-elevation-300: var(--color-base-600);
|
--theme-elevation-300: var(--color-base-600);
|
||||||
--theme-elevation-350: var(--color-base-550);
|
--theme-elevation-350: var(--color-base-550);
|
||||||
--theme-elevation-400: var(--color-base-450);
|
--theme-elevation-400: var(--color-base-450);
|
||||||
--theme-elevation-450: var(--color-base-400);
|
--theme-elevation-450: var(--color-base-400);
|
||||||
--theme-elevation-550: var(--color-base-350);
|
--theme-elevation-550: var(--color-base-350);
|
||||||
--theme-elevation-600: var(--color-base-300);
|
--theme-elevation-600: var(--color-base-300);
|
||||||
--theme-elevation-650: var(--color-base-250);
|
--theme-elevation-650: var(--color-base-250);
|
||||||
--theme-elevation-700: var(--color-base-200);
|
--theme-elevation-700: var(--color-base-200);
|
||||||
--theme-elevation-750: var(--color-base-150);
|
--theme-elevation-750: var(--color-base-150);
|
||||||
--theme-elevation-800: var(--color-base-100);
|
--theme-elevation-800: var(--color-base-100);
|
||||||
--theme-elevation-850: var(--color-base-50);
|
--theme-elevation-850: var(--color-base-50);
|
||||||
--theme-elevation-900: var(--color-base-0);
|
--theme-elevation-900: var(--color-base-0);
|
||||||
--theme-elevation-950: var(--color-base-0);
|
--theme-elevation-950: var(--color-base-0);
|
||||||
--theme-elevation-1000: var(--color-base-0);
|
--theme-elevation-1000: var(--color-base-0);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-950);
|
--theme-success-50: var(--color-success-950);
|
||||||
--theme-success-100: var(--color-success-900);
|
--theme-success-100: var(--color-success-900);
|
||||||
--theme-success-150: var(--color-success-850);
|
--theme-success-150: var(--color-success-850);
|
||||||
--theme-success-200: var(--color-success-800);
|
--theme-success-200: var(--color-success-800);
|
||||||
--theme-success-250: var(--color-success-750);
|
--theme-success-250: var(--color-success-750);
|
||||||
--theme-success-300: var(--color-success-700);
|
--theme-success-300: var(--color-success-700);
|
||||||
--theme-success-350: var(--color-success-650);
|
--theme-success-350: var(--color-success-650);
|
||||||
--theme-success-400: var(--color-success-600);
|
--theme-success-400: var(--color-success-600);
|
||||||
--theme-success-450: var(--color-success-550);
|
--theme-success-450: var(--color-success-550);
|
||||||
--theme-success-550: var(--color-success-450);
|
--theme-success-550: var(--color-success-450);
|
||||||
--theme-success-600: var(--color-success-400);
|
--theme-success-600: var(--color-success-400);
|
||||||
--theme-success-650: var(--color-success-350);
|
--theme-success-650: var(--color-success-350);
|
||||||
--theme-success-700: var(--color-success-300);
|
--theme-success-700: var(--color-success-300);
|
||||||
--theme-success-750: var(--color-success-250);
|
--theme-success-750: var(--color-success-250);
|
||||||
--theme-success-800: var(--color-success-200);
|
--theme-success-800: var(--color-success-200);
|
||||||
--theme-success-850: var(--color-success-150);
|
--theme-success-850: var(--color-success-150);
|
||||||
--theme-success-900: var(--color-success-100);
|
--theme-success-900: var(--color-success-100);
|
||||||
--theme-success-950: var(--color-success-50);
|
--theme-success-950: var(--color-success-50);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-950);
|
--theme-warning-50: var(--color-warning-950);
|
||||||
--theme-warning-100: var(--color-warning-900);
|
--theme-warning-100: var(--color-warning-900);
|
||||||
--theme-warning-150: var(--color-warning-850);
|
--theme-warning-150: var(--color-warning-850);
|
||||||
--theme-warning-200: var(--color-warning-800);
|
--theme-warning-200: var(--color-warning-800);
|
||||||
--theme-warning-250: var(--color-warning-750);
|
--theme-warning-250: var(--color-warning-750);
|
||||||
--theme-warning-300: var(--color-warning-700);
|
--theme-warning-300: var(--color-warning-700);
|
||||||
--theme-warning-350: var(--color-warning-650);
|
--theme-warning-350: var(--color-warning-650);
|
||||||
--theme-warning-400: var(--color-warning-600);
|
--theme-warning-400: var(--color-warning-600);
|
||||||
--theme-warning-450: var(--color-warning-550);
|
--theme-warning-450: var(--color-warning-550);
|
||||||
--theme-warning-550: var(--color-warning-450);
|
--theme-warning-550: var(--color-warning-450);
|
||||||
--theme-warning-600: var(--color-warning-400);
|
--theme-warning-600: var(--color-warning-400);
|
||||||
--theme-warning-650: var(--color-warning-350);
|
--theme-warning-650: var(--color-warning-350);
|
||||||
--theme-warning-700: var(--color-warning-300);
|
--theme-warning-700: var(--color-warning-300);
|
||||||
--theme-warning-750: var(--color-warning-250);
|
--theme-warning-750: var(--color-warning-250);
|
||||||
--theme-warning-800: var(--color-warning-200);
|
--theme-warning-800: var(--color-warning-200);
|
||||||
--theme-warning-850: var(--color-warning-150);
|
--theme-warning-850: var(--color-warning-150);
|
||||||
--theme-warning-900: var(--color-warning-100);
|
--theme-warning-900: var(--color-warning-100);
|
||||||
--theme-warning-950: var(--color-warning-50);
|
--theme-warning-950: var(--color-warning-50);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-950);
|
--theme-error-50: var(--color-error-950);
|
||||||
--theme-error-100: var(--color-error-900);
|
--theme-error-100: var(--color-error-900);
|
||||||
--theme-error-150: var(--color-error-850);
|
--theme-error-150: var(--color-error-850);
|
||||||
--theme-error-200: var(--color-error-800);
|
--theme-error-200: var(--color-error-800);
|
||||||
--theme-error-250: var(--color-error-750);
|
--theme-error-250: var(--color-error-750);
|
||||||
--theme-error-300: var(--color-error-700);
|
--theme-error-300: var(--color-error-700);
|
||||||
--theme-error-350: var(--color-error-650);
|
--theme-error-350: var(--color-error-650);
|
||||||
--theme-error-400: var(--color-error-600);
|
--theme-error-400: var(--color-error-600);
|
||||||
--theme-error-450: var(--color-error-550);
|
--theme-error-450: var(--color-error-550);
|
||||||
--theme-error-550: var(--color-error-450);
|
--theme-error-550: var(--color-error-450);
|
||||||
--theme-error-600: var(--color-error-400);
|
--theme-error-600: var(--color-error-400);
|
||||||
--theme-error-650: var(--color-error-350);
|
--theme-error-650: var(--color-error-350);
|
||||||
--theme-error-700: var(--color-error-300);
|
--theme-error-700: var(--color-error-300);
|
||||||
--theme-error-750: var(--color-error-250);
|
--theme-error-750: var(--color-error-250);
|
||||||
--theme-error-800: var(--color-error-200);
|
--theme-error-800: var(--color-error-200);
|
||||||
--theme-error-850: var(--color-error-150);
|
--theme-error-850: var(--color-error-150);
|
||||||
--theme-error-900: var(--color-error-100);
|
--theme-error-900: var(--color-error-100);
|
||||||
--theme-error-950: var(--color-error-50);
|
--theme-error-950: var(--color-error-50);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
%btn-reset {
|
@layer payload-default {
|
||||||
border: 0;
|
%btn-reset {
|
||||||
background: none;
|
border: 0;
|
||||||
box-shadow: none;
|
background: none;
|
||||||
border-radius: 0;
|
box-shadow: none;
|
||||||
padding: 0;
|
border-radius: 0;
|
||||||
color: currentColor;
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btn-reset {
|
@mixin btn-reset {
|
||||||
|
|||||||
@@ -1,59 +1,60 @@
|
|||||||
@import 'vars';
|
@import 'vars';
|
||||||
@import 'queries';
|
@import 'queries';
|
||||||
|
@layer payload-default {
|
||||||
.Toastify {
|
.Toastify {
|
||||||
.Toastify__toast-container {
|
|
||||||
left: base(5);
|
|
||||||
transform: none;
|
|
||||||
right: base(5);
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast {
|
|
||||||
padding: base(0.5);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button {
|
|
||||||
align-self: center;
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
background: var(--color-success-500);
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--error {
|
|
||||||
background: var(--theme-error-500);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--light {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
.Toastify__toast-container {
|
.Toastify__toast-container {
|
||||||
left: $baseline;
|
left: base(5);
|
||||||
right: $baseline;
|
transform: none;
|
||||||
|
right: base(5);
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast {
|
||||||
|
padding: base(0.5);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button {
|
||||||
|
align-self: center;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
background: var(--color-success-500);
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--error {
|
||||||
|
background: var(--theme-error-500);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--light {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
.Toastify__toast-container {
|
||||||
|
left: $baseline;
|
||||||
|
right: $baseline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,140 +1,142 @@
|
|||||||
@import './styles.scss';
|
@import './styles.scss';
|
||||||
|
|
||||||
.payload-toast-container {
|
@layer payload-default {
|
||||||
padding: 0;
|
.payload-toast-container {
|
||||||
margin: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.payload-toast-close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
order: 3;
|
order: 3;
|
||||||
left: unset;
|
left: unset;
|
||||||
inset-inline-end: base(0.8);
|
inset-inline-end: base(0.8);
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: var(--theme-elevation-600);
|
color: var(--theme-elevation-600);
|
||||||
background: unset;
|
background: unset;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: base(0.8);
|
width: base(0.8);
|
||||||
height: base(0.8);
|
height: base(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--theme-elevation-250);
|
color: var(--theme-elevation-250);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir='RTL'] & {
|
[dir='RTL'] & {
|
||||||
right: unset;
|
right: unset;
|
||||||
left: 0.5rem;
|
left: 0.5rem;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-title {
|
|
||||||
line-height: base(1);
|
|
||||||
margin-right: base(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload-toast-item {
|
|
||||||
padding: base(0.8);
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--theme-border-color);
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
box-shadow:
|
|
||||||
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
|
||||||
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
|
||||||
|
|
||||||
.toast-content {
|
|
||||||
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-front='false'] {
|
|
||||||
.toast-content {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-expanded='true'] {
|
.toast-title {
|
||||||
.toast-content {
|
line-height: base(1);
|
||||||
opacity: 1;
|
margin-right: base(1);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-icon {
|
.payload-toast-item {
|
||||||
width: base(0.8);
|
padding: base(0.8);
|
||||||
height: base(0.8);
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-warning {
|
|
||||||
color: var(--theme-warning-800);
|
|
||||||
border-color: var(--theme-warning-250);
|
|
||||||
background-color: var(--theme-warning-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-warning-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-warning-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-error {
|
|
||||||
color: var(--theme-error-800);
|
|
||||||
border-color: var(--theme-error-250);
|
|
||||||
background-color: var(--theme-error-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-error-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-error-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-success {
|
|
||||||
color: var(--theme-success-800);
|
|
||||||
border-color: var(--theme-success-250);
|
|
||||||
background-color: var(--theme-success-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-success-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-success-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-info {
|
|
||||||
color: var(--theme-elevation-800);
|
color: var(--theme-elevation-800);
|
||||||
border-color: var(--theme-elevation-250);
|
font-style: normal;
|
||||||
background-color: var(--theme-elevation-100);
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--theme-border-color);
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
box-shadow:
|
||||||
|
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
||||||
|
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.toast-content {
|
||||||
color: var(--theme-elevation-600);
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&[data-front='false'] {
|
||||||
color: var(--theme-elevation-250);
|
.toast-content {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-expanded='true'] {
|
||||||
|
.toast-content {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-icon {
|
||||||
|
width: base(0.8);
|
||||||
|
height: base(0.8);
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-warning {
|
||||||
|
color: var(--theme-warning-800);
|
||||||
|
border-color: var(--theme-warning-250);
|
||||||
|
background-color: var(--theme-warning-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-warning-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-warning-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-error {
|
||||||
|
color: var(--theme-error-800);
|
||||||
|
border-color: var(--theme-error-250);
|
||||||
|
background-color: var(--theme-error-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-error-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-success {
|
||||||
|
color: var(--theme-success-800);
|
||||||
|
border-color: var(--theme-success-250);
|
||||||
|
background-color: var(--theme-success-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-success-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-success-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-info {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
border-color: var(--theme-elevation-250);
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-250);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,106 +4,107 @@
|
|||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
// HEADINGS
|
// HEADINGS
|
||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
|
@layer payload-default {
|
||||||
%h1,
|
%h1,
|
||||||
%h2,
|
%h2,
|
||||||
%h3,
|
%h3,
|
||||||
%h4,
|
%h4,
|
||||||
%h5,
|
%h5,
|
||||||
%h6 {
|
%h6 {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
|
||||||
|
|
||||||
%h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: base(1.6);
|
|
||||||
line-height: base(1.8);
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
font-size: base(1.25);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h2 {
|
%h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1.3);
|
font-size: base(1.6);
|
||||||
line-height: base(1.6);
|
line-height: base(1.8);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.85);
|
letter-spacing: -0.5px;
|
||||||
|
font-size: base(1.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h3 {
|
%h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1);
|
font-size: base(1.3);
|
||||||
line-height: base(1.2);
|
line-height: base(1.6);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.65);
|
font-size: base(0.85);
|
||||||
line-height: 1.25;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h4 {
|
%h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.8);
|
font-size: base(1);
|
||||||
line-height: base(1);
|
line-height: base(1.2);
|
||||||
letter-spacing: -0.375px;
|
|
||||||
}
|
|
||||||
|
|
||||||
%h5 {
|
@include small-break {
|
||||||
margin: 0;
|
font-size: base(0.65);
|
||||||
font-size: base(0.65);
|
line-height: 1.25;
|
||||||
line-height: base(0.8);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%h6 {
|
%h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.6);
|
font-size: base(0.8);
|
||||||
line-height: base(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
%small {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// TYPE STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
%large-body {
|
|
||||||
font-size: base(0.6);
|
|
||||||
line-height: base(1);
|
|
||||||
letter-spacing: base(0.02);
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
font-size: base(0.7);
|
|
||||||
line-height: base(1);
|
line-height: base(1);
|
||||||
|
letter-spacing: -0.375px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-break {
|
%h5 {
|
||||||
font-size: base(0.55);
|
margin: 0;
|
||||||
line-height: base(0.75);
|
font-size: base(0.65);
|
||||||
}
|
line-height: base(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
%body {
|
%h6 {
|
||||||
font-size: $baseline-body-size;
|
margin: 0;
|
||||||
line-height: $baseline-px;
|
font-size: base(0.6);
|
||||||
font-weight: normal;
|
line-height: base(0.8);
|
||||||
font-family: var(--font-body);
|
}
|
||||||
}
|
|
||||||
|
%small {
|
||||||
%code {
|
margin: 0;
|
||||||
font-size: base(0.4);
|
font-size: 12px;
|
||||||
color: var(--theme-elevation-400);
|
line-height: 20px;
|
||||||
|
}
|
||||||
span {
|
|
||||||
color: var(--theme-elevation-800);
|
/////////////////////////////
|
||||||
|
// TYPE STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
%large-body {
|
||||||
|
font-size: base(0.6);
|
||||||
|
line-height: base(1);
|
||||||
|
letter-spacing: base(0.02);
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
font-size: base(0.7);
|
||||||
|
line-height: base(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
font-size: base(0.55);
|
||||||
|
line-height: base(0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%body {
|
||||||
|
font-size: $baseline-body-size;
|
||||||
|
line-height: $baseline-px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
%code {
|
||||||
|
font-size: base(0.4);
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,16 @@
|
|||||||
@import '../scss/styles.scss';
|
@import '../scss/styles.scss';
|
||||||
|
@layer payload-default {
|
||||||
|
.rich-text__button {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.rich-text__button {
|
svg {
|
||||||
position: relative;
|
width: base(0.75);
|
||||||
cursor: pointer;
|
height: base(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
&--disabled {
|
||||||
width: base(0.75);
|
opacity: 0.4;
|
||||||
height: base(0.75);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,18 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.icon--indent-left {
|
@layer payload-default {
|
||||||
height: $baseline;
|
.icon--indent-left {
|
||||||
width: $baseline;
|
height: $baseline;
|
||||||
|
width: $baseline;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: var(--theme-elevation-800);
|
stroke: var(--theme-elevation-800);
|
||||||
stroke-width: $style-stroke-width-m;
|
stroke-width: $style-stroke-width-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
fill: var(--theme-elevation-800);
|
fill: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,18 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.icon--indent-right {
|
@layer payload-default {
|
||||||
height: $baseline;
|
.icon--indent-right {
|
||||||
width: $baseline;
|
height: $baseline;
|
||||||
|
width: $baseline;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: var(--theme-elevation-800);
|
stroke: var(--theme-elevation-800);
|
||||||
stroke-width: $style-stroke-width-m;
|
stroke-width: $style-stroke-width-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
fill: var(--theme-elevation-800);
|
fill: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.icon--link {
|
@layer payload-default {
|
||||||
width: $baseline;
|
.icon--link {
|
||||||
height: $baseline;
|
width: $baseline;
|
||||||
|
height: $baseline;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke: var(--theme-elevation-800);
|
stroke: var(--theme-elevation-800);
|
||||||
stroke-width: $style-stroke-width;
|
stroke-width: $style-stroke-width;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.icon--relationship {
|
@layer payload-default {
|
||||||
height: $baseline;
|
.icon--relationship {
|
||||||
width: $baseline;
|
height: $baseline;
|
||||||
|
width: $baseline;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: var(--theme-elevation-800);
|
stroke: var(--theme-elevation-800);
|
||||||
stroke-width: $style-stroke-width-m;
|
stroke-width: $style-stroke-width-m;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.icon--upload {
|
@layer payload-default {
|
||||||
height: $baseline;
|
.icon--upload {
|
||||||
width: $baseline;
|
height: $baseline;
|
||||||
|
width: $baseline;
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
fill: var(--theme-elevation-800);
|
fill: var(--theme-elevation-800);
|
||||||
stroke: none;
|
stroke: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,212 +1,213 @@
|
|||||||
@import '../scss/styles.scss';
|
@import '../scss/styles.scss';
|
||||||
|
@layer payload-default {
|
||||||
.rich-text {
|
.rich-text {
|
||||||
margin-bottom: base(2);
|
margin-bottom: base(2);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
isolation: isolate;
|
|
||||||
|
|
||||||
&__toolbar {
|
|
||||||
@include blur-bg(var(--theme-elevation-0));
|
|
||||||
margin-bottom: $baseline;
|
|
||||||
border: $style-stroke-width-s solid var(--theme-elevation-150);
|
|
||||||
position: sticky;
|
|
||||||
z-index: 1;
|
|
||||||
top: var(--doc-controls-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toolbar-wrap {
|
|
||||||
padding: base(0.25);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
isolation: isolate;
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: ' ';
|
|
||||||
opacity: 0.8;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 1px);
|
|
||||||
background: linear-gradient(var(--theme-elevation-0), transparent);
|
|
||||||
display: block;
|
|
||||||
left: -1px;
|
|
||||||
right: -1px;
|
|
||||||
height: base(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__editor {
|
|
||||||
font-family: var(--font-serif);
|
|
||||||
font-size: base(0.8);
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
*[data-slate-node='element'] {
|
|
||||||
margin-top: 0.75em;
|
|
||||||
position: relative;
|
|
||||||
line-height: 1.5;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1[data-slate-node='element'] {
|
|
||||||
font-size: base(1.4);
|
|
||||||
margin-block: 0.5em 0.4em;
|
|
||||||
line-height: base(1.2);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2[data-slate-node='element'] {
|
|
||||||
font-size: base(1.25);
|
|
||||||
margin-block: 0.55em 0.4em;
|
|
||||||
line-height: base(1.2);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3[data-slate-node='element'] {
|
|
||||||
font-size: base(1.1);
|
|
||||||
margin-block: 0.6em 0.4em;
|
|
||||||
line-height: base(1.3);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4[data-slate-node='element'] {
|
|
||||||
font-size: base(1);
|
|
||||||
margin-block: 0.65em 0.4em;
|
|
||||||
line-height: base(1.4);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5[data-slate-node='element'] {
|
|
||||||
font-size: base(0.9);
|
|
||||||
margin-block: 0.7em 0.4em;
|
|
||||||
line-height: base(1.5);
|
|
||||||
letter-spacing: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6[data-slate-node='element'] {
|
|
||||||
font-size: base(0.8);
|
|
||||||
margin-block: 0.75em 0.4em;
|
|
||||||
line-height: base(1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--gutter {
|
|
||||||
.rich-text__editor {
|
|
||||||
padding-left: $baseline;
|
|
||||||
border-left: 1px solid var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
min-height: base(10);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrap {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--read-only {
|
|
||||||
.rich-text__editor {
|
|
||||||
background: var(--theme-elevation-200);
|
|
||||||
color: var(--theme-elevation-450);
|
|
||||||
padding: base(0.5);
|
|
||||||
|
|
||||||
.popup button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rich-text__toolbar {
|
|
||||||
pointer-events: none;
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
opacity: 0.85;
|
|
||||||
z-index: 2;
|
|
||||||
backdrop-filter: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
@extend %btn-reset;
|
|
||||||
padding: base(0.25);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
@include color-svg(var(--theme-elevation-800));
|
|
||||||
width: base(0.75);
|
|
||||||
height: base(0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button--active,
|
|
||||||
&__button--active:hover {
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__drawerIsOpen {
|
|
||||||
top: base(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
&__toolbar {
|
&__toolbar {
|
||||||
top: base(3);
|
@include blur-bg(var(--theme-elevation-0));
|
||||||
|
margin-bottom: $baseline;
|
||||||
|
border: $style-stroke-width-s solid var(--theme-elevation-150);
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
top: var(--doc-controls-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toolbar-wrap {
|
||||||
|
padding: base(0.25);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
opacity: 0.8;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 1px);
|
||||||
|
background: linear-gradient(var(--theme-elevation-0), transparent);
|
||||||
|
display: block;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
height: base(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__editor {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: base(0.8);
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
*[data-slate-node='element'] {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1[data-slate-node='element'] {
|
||||||
|
font-size: base(1.4);
|
||||||
|
margin-block: 0.5em 0.4em;
|
||||||
|
line-height: base(1.2);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2[data-slate-node='element'] {
|
||||||
|
font-size: base(1.25);
|
||||||
|
margin-block: 0.55em 0.4em;
|
||||||
|
line-height: base(1.2);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3[data-slate-node='element'] {
|
||||||
|
font-size: base(1.1);
|
||||||
|
margin-block: 0.6em 0.4em;
|
||||||
|
line-height: base(1.3);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4[data-slate-node='element'] {
|
||||||
|
font-size: base(1);
|
||||||
|
margin-block: 0.65em 0.4em;
|
||||||
|
line-height: base(1.4);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5[data-slate-node='element'] {
|
||||||
|
font-size: base(0.9);
|
||||||
|
margin-block: 0.7em 0.4em;
|
||||||
|
line-height: base(1.5);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6[data-slate-node='element'] {
|
||||||
|
font-size: base(0.8);
|
||||||
|
margin-block: 0.75em 0.4em;
|
||||||
|
line-height: base(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--gutter {
|
||||||
|
.rich-text__editor {
|
||||||
|
padding-left: $baseline;
|
||||||
|
border-left: 1px solid var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
min-height: base(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--read-only {
|
||||||
|
.rich-text__editor {
|
||||||
|
background: var(--theme-elevation-200);
|
||||||
|
color: var(--theme-elevation-450);
|
||||||
|
padding: base(0.5);
|
||||||
|
|
||||||
|
.popup button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-text__toolbar {
|
||||||
|
pointer-events: none;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
opacity: 0.85;
|
||||||
|
z-index: 2;
|
||||||
|
backdrop-filter: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
@extend %btn-reset;
|
||||||
|
padding: base(0.25);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
@include color-svg(var(--theme-elevation-800));
|
||||||
|
width: base(0.75);
|
||||||
|
height: base(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button--active,
|
||||||
|
&__button--active:hover {
|
||||||
|
background-color: var(--theme-elevation-150);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__drawerIsOpen {
|
&__drawerIsOpen {
|
||||||
top: base(1);
|
top: base(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
&__toolbar {
|
||||||
|
top: base(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__drawerIsOpen {
|
||||||
|
top: base(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
[data-slate-node='element'] {
|
[data-slate-node='element'] {
|
||||||
margin-bottom: base(0.25);
|
margin-bottom: base(0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='light'] {
|
html[data-theme='light'] {
|
||||||
.rich-text {
|
.rich-text {
|
||||||
&.error {
|
&.error {
|
||||||
.rich-text__editor,
|
.rich-text__editor,
|
||||||
.rich-text__toolbar {
|
.rich-text__toolbar {
|
||||||
@include lightInputError;
|
@include lightInputError;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
.rich-text {
|
.rich-text {
|
||||||
&.error {
|
&.error {
|
||||||
.rich-text__editor,
|
.rich-text__editor,
|
||||||
.rich-text__toolbar {
|
.rich-text__toolbar {
|
||||||
@include darkInputError;
|
@include darkInputError;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,203 +1,204 @@
|
|||||||
@import 'styles';
|
@import 'styles';
|
||||||
@import './toasts.scss';
|
@import './toasts.scss';
|
||||||
@import './colors.scss';
|
@import './colors.scss';
|
||||||
|
@layer payload-default {
|
||||||
|
:root {
|
||||||
|
--base-px: 20;
|
||||||
|
--base-body-size: 13;
|
||||||
|
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
||||||
|
|
||||||
:root {
|
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||||
--base-px: 20;
|
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||||
--base-body-size: 13;
|
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||||
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||||
|
--scrollbar-width: 17px;
|
||||||
|
|
||||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
|
||||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
|
||||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
|
||||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
|
||||||
--scrollbar-width: 17px;
|
|
||||||
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
|
||||||
--theme-input-bg: var(--theme-elevation-0);
|
|
||||||
--theme-text: var(--theme-elevation-800);
|
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.5);
|
|
||||||
--theme-baseline: #{$baseline-px};
|
|
||||||
--theme-baseline-body-size: #{$baseline-body-size};
|
|
||||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
||||||
sans-serif;
|
|
||||||
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
|
||||||
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
|
||||||
|
|
||||||
--style-radius-s: #{$style-radius-s};
|
|
||||||
--style-radius-m: #{$style-radius-m};
|
|
||||||
--style-radius-l: #{$style-radius-l};
|
|
||||||
|
|
||||||
--z-popup: 10;
|
|
||||||
--z-nav: 20;
|
|
||||||
--z-modal: 30;
|
|
||||||
--z-status: 40;
|
|
||||||
|
|
||||||
--accessibility-outline: 2px solid var(--theme-text);
|
|
||||||
--accessibility-outline-offset: 2px;
|
|
||||||
|
|
||||||
--gutter-h: #{base(3)};
|
|
||||||
--spacing-view-bottom: var(--gutter-h);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.8);
|
|
||||||
--app-header-height: calc(var(--base) * 2.8);
|
|
||||||
--nav-width: 275px;
|
|
||||||
--nav-trans-time: 150ms;
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
--gutter-h: #{base(2)};
|
|
||||||
--app-header-height: calc(var(--base) * 2.4);
|
|
||||||
--doc-controls-height: calc(var(--base) * 2.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
--gutter-h: #{base(0.8)};
|
|
||||||
--spacing-view-bottom: calc(var(--base) * 2);
|
|
||||||
--nav-width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// GLOBAL STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
@extend %body;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
|
|
||||||
&[data-theme='dark'] {
|
|
||||||
--theme-bg: var(--theme-elevation-0);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
--theme-text: var(--theme-elevation-1000);
|
--theme-input-bg: var(--theme-elevation-0);
|
||||||
--theme-input-bg: var(--theme-elevation-50);
|
--theme-text: var(--theme-elevation-800);
|
||||||
--theme-overlay: rgba(5, 5, 5, 0.75);
|
--theme-overlay: rgba(5, 5, 5, 0.5);
|
||||||
color-scheme: dark;
|
--theme-baseline: #{$baseline-px};
|
||||||
|
--theme-baseline-body-size: #{$baseline-body-size};
|
||||||
|
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||||
|
sans-serif;
|
||||||
|
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
||||||
|
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
|
||||||
|
|
||||||
::selection {
|
--style-radius-s: #{$style-radius-s};
|
||||||
color: var(--color-base-1000);
|
--style-radius-m: #{$style-radius-m};
|
||||||
|
--style-radius-l: #{$style-radius-l};
|
||||||
|
|
||||||
|
--z-popup: 10;
|
||||||
|
--z-nav: 20;
|
||||||
|
--z-modal: 30;
|
||||||
|
--z-status: 40;
|
||||||
|
|
||||||
|
--accessibility-outline: 2px solid var(--theme-text);
|
||||||
|
--accessibility-outline-offset: 2px;
|
||||||
|
|
||||||
|
--gutter-h: #{base(3)};
|
||||||
|
--spacing-view-bottom: var(--gutter-h);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.8);
|
||||||
|
--app-header-height: calc(var(--base) * 2.8);
|
||||||
|
--nav-width: 275px;
|
||||||
|
--nav-trans-time: 150ms;
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
--gutter-h: #{base(2)};
|
||||||
|
--app-header-height: calc(var(--base) * 2.4);
|
||||||
|
--doc-controls-height: calc(var(--base) * 2.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
@include small-break {
|
||||||
color: var(--color-base-1000);
|
--gutter-h: #{base(0.8)};
|
||||||
|
--spacing-view-bottom: calc(var(--base) * 2);
|
||||||
|
--nav-width: 100vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mid-break {
|
/////////////////////////////
|
||||||
font-size: 12px;
|
// GLOBAL STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
html {
|
||||||
body,
|
@extend %body;
|
||||||
#app {
|
background: var(--theme-bg);
|
||||||
height: 100%;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
&[data-theme='dark'] {
|
||||||
font-family: var(--font-body);
|
--theme-bg: var(--theme-elevation-0);
|
||||||
font-weight: 400;
|
--theme-text: var(--theme-elevation-1000);
|
||||||
color: var(--theme-text);
|
--theme-input-bg: var(--theme-elevation-50);
|
||||||
margin: 0;
|
--theme-overlay: rgba(5, 5, 5, 0.75);
|
||||||
// this is for the nav to be able to push the document over
|
color-scheme: dark;
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background: var(--color-success-250);
|
color: var(--color-base-1000);
|
||||||
color: var(--theme-base-800);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
@include mid-break {
|
||||||
max-width: 100%;
|
font-size: 12px;
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@extend %h1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@extend %h2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
@extend %h3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
@extend %h4;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
@extend %h5;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
@extend %h6;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: $baseline;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus-visible {
|
|
||||||
outline: var(--accessibility-outline);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: currentColor;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
&:not(:focus-visible) {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
html,
|
||||||
opacity: 0.7;
|
body,
|
||||||
outline: none;
|
#app {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
body {
|
||||||
vertical-align: middle;
|
font-family: var(--font-body);
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: var(--theme-text);
|
||||||
|
margin: 0;
|
||||||
|
// this is for the nav to be able to push the document over
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
dialog {
|
::selection {
|
||||||
width: 100%;
|
background: var(--color-success-250);
|
||||||
border: 0;
|
color: var(--theme-base-800);
|
||||||
padding: 0;
|
}
|
||||||
color: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload__modal-item {
|
::-moz-selection {
|
||||||
min-height: 100%;
|
background: var(--color-success-250);
|
||||||
background: transparent;
|
color: var(--theme-base-800);
|
||||||
}
|
}
|
||||||
|
|
||||||
.payload__modal-container--enterDone {
|
img {
|
||||||
overflow: auto;
|
max-width: 100%;
|
||||||
}
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.payload__modal-item--enter,
|
h1 {
|
||||||
.payload__modal-item--enterDone {
|
@extend %h1;
|
||||||
z-index: var(--z-modal);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// @import '~payload-user-css'; TODO: re-enable this
|
h2 {
|
||||||
|
@extend %h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %h6;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: $baseline;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: var(--accessibility-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
&:not(:focus-visible) {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item {
|
||||||
|
min-height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-container--enterDone {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payload__modal-item--enter,
|
||||||
|
.payload__modal-item--enterDone {
|
||||||
|
z-index: var(--z-modal);
|
||||||
|
}
|
||||||
|
|
||||||
|
// @import '~payload-user-css'; TODO: re-enable this
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,269 +1,271 @@
|
|||||||
:root {
|
@layer payload-default {
|
||||||
--color-base-0: rgb(255, 255, 255);
|
:root {
|
||||||
--color-base-50: rgb(245, 245, 245);
|
--color-base-0: rgb(255, 255, 255);
|
||||||
--color-base-100: rgb(235, 235, 235);
|
--color-base-50: rgb(245, 245, 245);
|
||||||
--color-base-150: rgb(221, 221, 221);
|
--color-base-100: rgb(235, 235, 235);
|
||||||
--color-base-200: rgb(208, 208, 208);
|
--color-base-150: rgb(221, 221, 221);
|
||||||
--color-base-250: rgb(195, 195, 195);
|
--color-base-200: rgb(208, 208, 208);
|
||||||
--color-base-300: rgb(181, 181, 181);
|
--color-base-250: rgb(195, 195, 195);
|
||||||
--color-base-350: rgb(168, 168, 168);
|
--color-base-300: rgb(181, 181, 181);
|
||||||
--color-base-400: rgb(154, 154, 154);
|
--color-base-350: rgb(168, 168, 168);
|
||||||
--color-base-450: rgb(141, 141, 141);
|
--color-base-400: rgb(154, 154, 154);
|
||||||
--color-base-500: rgb(128, 128, 128);
|
--color-base-450: rgb(141, 141, 141);
|
||||||
--color-base-550: rgb(114, 114, 114);
|
--color-base-500: rgb(128, 128, 128);
|
||||||
--color-base-600: rgb(101, 101, 101);
|
--color-base-550: rgb(114, 114, 114);
|
||||||
--color-base-650: rgb(87, 87, 87);
|
--color-base-600: rgb(101, 101, 101);
|
||||||
--color-base-700: rgb(74, 74, 74);
|
--color-base-650: rgb(87, 87, 87);
|
||||||
--color-base-750: rgb(60, 60, 60);
|
--color-base-700: rgb(74, 74, 74);
|
||||||
--color-base-800: rgb(47, 47, 47);
|
--color-base-750: rgb(60, 60, 60);
|
||||||
--color-base-850: rgb(34, 34, 34);
|
--color-base-800: rgb(47, 47, 47);
|
||||||
--color-base-900: rgb(20, 20, 20);
|
--color-base-850: rgb(34, 34, 34);
|
||||||
--color-base-950: rgb(7, 7, 7);
|
--color-base-900: rgb(20, 20, 20);
|
||||||
--color-base-1000: rgb(0, 0, 0);
|
--color-base-950: rgb(7, 7, 7);
|
||||||
|
--color-base-1000: rgb(0, 0, 0);
|
||||||
|
|
||||||
--color-success-50: rgb(237, 245, 249);
|
--color-success-50: rgb(237, 245, 249);
|
||||||
--color-success-100: rgb(218, 237, 248);
|
--color-success-100: rgb(218, 237, 248);
|
||||||
--color-success-150: rgb(188, 225, 248);
|
--color-success-150: rgb(188, 225, 248);
|
||||||
--color-success-200: rgb(156, 216, 253);
|
--color-success-200: rgb(156, 216, 253);
|
||||||
--color-success-250: rgb(125, 204, 248);
|
--color-success-250: rgb(125, 204, 248);
|
||||||
--color-success-300: rgb(97, 190, 241);
|
--color-success-300: rgb(97, 190, 241);
|
||||||
--color-success-350: rgb(65, 178, 236);
|
--color-success-350: rgb(65, 178, 236);
|
||||||
--color-success-400: rgb(36, 164, 223);
|
--color-success-400: rgb(36, 164, 223);
|
||||||
--color-success-450: rgb(18, 148, 204);
|
--color-success-450: rgb(18, 148, 204);
|
||||||
--color-success-500: rgb(21, 135, 186);
|
--color-success-500: rgb(21, 135, 186);
|
||||||
--color-success-550: rgb(12, 121, 168);
|
--color-success-550: rgb(12, 121, 168);
|
||||||
--color-success-600: rgb(11, 110, 153);
|
--color-success-600: rgb(11, 110, 153);
|
||||||
--color-success-650: rgb(11, 97, 135);
|
--color-success-650: rgb(11, 97, 135);
|
||||||
--color-success-700: rgb(17, 88, 121);
|
--color-success-700: rgb(17, 88, 121);
|
||||||
--color-success-750: rgb(17, 76, 105);
|
--color-success-750: rgb(17, 76, 105);
|
||||||
--color-success-800: rgb(18, 66, 90);
|
--color-success-800: rgb(18, 66, 90);
|
||||||
--color-success-850: rgb(18, 56, 76);
|
--color-success-850: rgb(18, 56, 76);
|
||||||
--color-success-900: rgb(19, 44, 58);
|
--color-success-900: rgb(19, 44, 58);
|
||||||
--color-success-950: rgb(22, 33, 39);
|
--color-success-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--color-error-50: rgb(250, 241, 240);
|
--color-error-50: rgb(250, 241, 240);
|
||||||
--color-error-100: rgb(252, 229, 227);
|
--color-error-100: rgb(252, 229, 227);
|
||||||
--color-error-150: rgb(247, 208, 204);
|
--color-error-150: rgb(247, 208, 204);
|
||||||
--color-error-200: rgb(254, 193, 188);
|
--color-error-200: rgb(254, 193, 188);
|
||||||
--color-error-250: rgb(253, 177, 170);
|
--color-error-250: rgb(253, 177, 170);
|
||||||
--color-error-300: rgb(253, 154, 146);
|
--color-error-300: rgb(253, 154, 146);
|
||||||
--color-error-350: rgb(253, 131, 123);
|
--color-error-350: rgb(253, 131, 123);
|
||||||
--color-error-400: rgb(246, 109, 103);
|
--color-error-400: rgb(246, 109, 103);
|
||||||
--color-error-450: rgb(234, 90, 86);
|
--color-error-450: rgb(234, 90, 86);
|
||||||
--color-error-500: rgb(218, 75, 72);
|
--color-error-500: rgb(218, 75, 72);
|
||||||
--color-error-550: rgb(200, 62, 61);
|
--color-error-550: rgb(200, 62, 61);
|
||||||
--color-error-600: rgb(182, 54, 54);
|
--color-error-600: rgb(182, 54, 54);
|
||||||
--color-error-650: rgb(161, 47, 47);
|
--color-error-650: rgb(161, 47, 47);
|
||||||
--color-error-700: rgb(144, 44, 43);
|
--color-error-700: rgb(144, 44, 43);
|
||||||
--color-error-750: rgb(123, 41, 39);
|
--color-error-750: rgb(123, 41, 39);
|
||||||
--color-error-800: rgb(105, 39, 37);
|
--color-error-800: rgb(105, 39, 37);
|
||||||
--color-error-850: rgb(86, 36, 33);
|
--color-error-850: rgb(86, 36, 33);
|
||||||
--color-error-900: rgb(64, 32, 29);
|
--color-error-900: rgb(64, 32, 29);
|
||||||
--color-error-950: rgb(44, 26, 24);
|
--color-error-950: rgb(44, 26, 24);
|
||||||
|
|
||||||
--color-warning-50: rgb(249, 242, 237);
|
--color-warning-50: rgb(249, 242, 237);
|
||||||
--color-warning-100: rgb(248, 232, 219);
|
--color-warning-100: rgb(248, 232, 219);
|
||||||
--color-warning-150: rgb(243, 212, 186);
|
--color-warning-150: rgb(243, 212, 186);
|
||||||
--color-warning-200: rgb(243, 200, 162);
|
--color-warning-200: rgb(243, 200, 162);
|
||||||
--color-warning-250: rgb(240, 185, 136);
|
--color-warning-250: rgb(240, 185, 136);
|
||||||
--color-warning-300: rgb(238, 166, 98);
|
--color-warning-300: rgb(238, 166, 98);
|
||||||
--color-warning-350: rgb(234, 148, 58);
|
--color-warning-350: rgb(234, 148, 58);
|
||||||
--color-warning-400: rgb(223, 132, 17);
|
--color-warning-400: rgb(223, 132, 17);
|
||||||
--color-warning-450: rgb(204, 120, 15);
|
--color-warning-450: rgb(204, 120, 15);
|
||||||
--color-warning-500: rgb(185, 108, 13);
|
--color-warning-500: rgb(185, 108, 13);
|
||||||
--color-warning-550: rgb(167, 97, 10);
|
--color-warning-550: rgb(167, 97, 10);
|
||||||
--color-warning-600: rgb(150, 87, 11);
|
--color-warning-600: rgb(150, 87, 11);
|
||||||
--color-warning-650: rgb(134, 78, 11);
|
--color-warning-650: rgb(134, 78, 11);
|
||||||
--color-warning-700: rgb(120, 70, 13);
|
--color-warning-700: rgb(120, 70, 13);
|
||||||
--color-warning-750: rgb(105, 61, 13);
|
--color-warning-750: rgb(105, 61, 13);
|
||||||
--color-warning-800: rgb(90, 55, 19);
|
--color-warning-800: rgb(90, 55, 19);
|
||||||
--color-warning-850: rgb(73, 47, 21);
|
--color-warning-850: rgb(73, 47, 21);
|
||||||
--color-warning-900: rgb(56, 38, 20);
|
--color-warning-900: rgb(56, 38, 20);
|
||||||
--color-warning-950: rgb(38, 29, 21);
|
--color-warning-950: rgb(38, 29, 21);
|
||||||
|
|
||||||
--color-blue-50: rgb(237, 245, 249);
|
--color-blue-50: rgb(237, 245, 249);
|
||||||
--color-blue-100: rgb(218, 237, 248);
|
--color-blue-100: rgb(218, 237, 248);
|
||||||
--color-blue-150: rgb(188, 225, 248);
|
--color-blue-150: rgb(188, 225, 248);
|
||||||
--color-blue-200: rgb(156, 216, 253);
|
--color-blue-200: rgb(156, 216, 253);
|
||||||
--color-blue-250: rgb(125, 204, 248);
|
--color-blue-250: rgb(125, 204, 248);
|
||||||
--color-blue-300: rgb(97, 190, 241);
|
--color-blue-300: rgb(97, 190, 241);
|
||||||
--color-blue-350: rgb(65, 178, 236);
|
--color-blue-350: rgb(65, 178, 236);
|
||||||
--color-blue-400: rgb(36, 164, 223);
|
--color-blue-400: rgb(36, 164, 223);
|
||||||
--color-blue-450: rgb(18, 148, 204);
|
--color-blue-450: rgb(18, 148, 204);
|
||||||
--color-blue-500: rgb(21, 135, 186);
|
--color-blue-500: rgb(21, 135, 186);
|
||||||
--color-blue-550: rgb(12, 121, 168);
|
--color-blue-550: rgb(12, 121, 168);
|
||||||
--color-blue-600: rgb(11, 110, 153);
|
--color-blue-600: rgb(11, 110, 153);
|
||||||
--color-blue-650: rgb(11, 97, 135);
|
--color-blue-650: rgb(11, 97, 135);
|
||||||
--color-blue-700: rgb(17, 88, 121);
|
--color-blue-700: rgb(17, 88, 121);
|
||||||
--color-blue-750: rgb(17, 76, 105);
|
--color-blue-750: rgb(17, 76, 105);
|
||||||
--color-blue-800: rgb(18, 66, 90);
|
--color-blue-800: rgb(18, 66, 90);
|
||||||
--color-blue-850: rgb(18, 56, 76);
|
--color-blue-850: rgb(18, 56, 76);
|
||||||
--color-blue-900: rgb(19, 44, 58);
|
--color-blue-900: rgb(19, 44, 58);
|
||||||
--color-blue-950: rgb(22, 33, 39);
|
--color-blue-950: rgb(22, 33, 39);
|
||||||
|
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-50);
|
--theme-success-50: var(--color-success-50);
|
||||||
--theme-success-100: var(--color-success-100);
|
--theme-success-100: var(--color-success-100);
|
||||||
--theme-success-150: var(--color-success-150);
|
--theme-success-150: var(--color-success-150);
|
||||||
--theme-success-200: var(--color-success-200);
|
--theme-success-200: var(--color-success-200);
|
||||||
--theme-success-250: var(--color-success-250);
|
--theme-success-250: var(--color-success-250);
|
||||||
--theme-success-300: var(--color-success-300);
|
--theme-success-300: var(--color-success-300);
|
||||||
--theme-success-350: var(--color-success-350);
|
--theme-success-350: var(--color-success-350);
|
||||||
--theme-success-400: var(--color-success-400);
|
--theme-success-400: var(--color-success-400);
|
||||||
--theme-success-450: var(--color-success-450);
|
--theme-success-450: var(--color-success-450);
|
||||||
--theme-success-500: var(--color-success-500);
|
--theme-success-500: var(--color-success-500);
|
||||||
--theme-success-550: var(--color-success-550);
|
--theme-success-550: var(--color-success-550);
|
||||||
--theme-success-600: var(--color-success-600);
|
--theme-success-600: var(--color-success-600);
|
||||||
--theme-success-650: var(--color-success-650);
|
--theme-success-650: var(--color-success-650);
|
||||||
--theme-success-700: var(--color-success-700);
|
--theme-success-700: var(--color-success-700);
|
||||||
--theme-success-750: var(--color-success-750);
|
--theme-success-750: var(--color-success-750);
|
||||||
--theme-success-800: var(--color-success-800);
|
--theme-success-800: var(--color-success-800);
|
||||||
--theme-success-850: var(--color-success-850);
|
--theme-success-850: var(--color-success-850);
|
||||||
--theme-success-900: var(--color-success-900);
|
--theme-success-900: var(--color-success-900);
|
||||||
--theme-success-950: var(--color-success-950);
|
--theme-success-950: var(--color-success-950);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-50);
|
--theme-warning-50: var(--color-warning-50);
|
||||||
--theme-warning-100: var(--color-warning-100);
|
--theme-warning-100: var(--color-warning-100);
|
||||||
--theme-warning-150: var(--color-warning-150);
|
--theme-warning-150: var(--color-warning-150);
|
||||||
--theme-warning-200: var(--color-warning-200);
|
--theme-warning-200: var(--color-warning-200);
|
||||||
--theme-warning-250: var(--color-warning-250);
|
--theme-warning-250: var(--color-warning-250);
|
||||||
--theme-warning-300: var(--color-warning-300);
|
--theme-warning-300: var(--color-warning-300);
|
||||||
--theme-warning-350: var(--color-warning-350);
|
--theme-warning-350: var(--color-warning-350);
|
||||||
--theme-warning-400: var(--color-warning-400);
|
--theme-warning-400: var(--color-warning-400);
|
||||||
--theme-warning-450: var(--color-warning-450);
|
--theme-warning-450: var(--color-warning-450);
|
||||||
--theme-warning-500: var(--color-warning-500);
|
--theme-warning-500: var(--color-warning-500);
|
||||||
--theme-warning-550: var(--color-warning-550);
|
--theme-warning-550: var(--color-warning-550);
|
||||||
--theme-warning-600: var(--color-warning-600);
|
--theme-warning-600: var(--color-warning-600);
|
||||||
--theme-warning-650: var(--color-warning-650);
|
--theme-warning-650: var(--color-warning-650);
|
||||||
--theme-warning-700: var(--color-warning-700);
|
--theme-warning-700: var(--color-warning-700);
|
||||||
--theme-warning-750: var(--color-warning-750);
|
--theme-warning-750: var(--color-warning-750);
|
||||||
--theme-warning-800: var(--color-warning-800);
|
--theme-warning-800: var(--color-warning-800);
|
||||||
--theme-warning-850: var(--color-warning-850);
|
--theme-warning-850: var(--color-warning-850);
|
||||||
--theme-warning-900: var(--color-warning-900);
|
--theme-warning-900: var(--color-warning-900);
|
||||||
--theme-warning-950: var(--color-warning-950);
|
--theme-warning-950: var(--color-warning-950);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-50);
|
--theme-error-50: var(--color-error-50);
|
||||||
--theme-error-100: var(--color-error-100);
|
--theme-error-100: var(--color-error-100);
|
||||||
--theme-error-150: var(--color-error-150);
|
--theme-error-150: var(--color-error-150);
|
||||||
--theme-error-200: var(--color-error-200);
|
--theme-error-200: var(--color-error-200);
|
||||||
--theme-error-250: var(--color-error-250);
|
--theme-error-250: var(--color-error-250);
|
||||||
--theme-error-300: var(--color-error-300);
|
--theme-error-300: var(--color-error-300);
|
||||||
--theme-error-350: var(--color-error-350);
|
--theme-error-350: var(--color-error-350);
|
||||||
--theme-error-400: var(--color-error-400);
|
--theme-error-400: var(--color-error-400);
|
||||||
--theme-error-450: var(--color-error-450);
|
--theme-error-450: var(--color-error-450);
|
||||||
--theme-error-500: var(--color-error-500);
|
--theme-error-500: var(--color-error-500);
|
||||||
--theme-error-550: var(--color-error-550);
|
--theme-error-550: var(--color-error-550);
|
||||||
--theme-error-600: var(--color-error-600);
|
--theme-error-600: var(--color-error-600);
|
||||||
--theme-error-650: var(--color-error-650);
|
--theme-error-650: var(--color-error-650);
|
||||||
--theme-error-700: var(--color-error-700);
|
--theme-error-700: var(--color-error-700);
|
||||||
--theme-error-750: var(--color-error-750);
|
--theme-error-750: var(--color-error-750);
|
||||||
--theme-error-800: var(--color-error-800);
|
--theme-error-800: var(--color-error-800);
|
||||||
--theme-error-850: var(--color-error-850);
|
--theme-error-850: var(--color-error-850);
|
||||||
--theme-error-900: var(--color-error-900);
|
--theme-error-900: var(--color-error-900);
|
||||||
--theme-error-950: var(--color-error-950);
|
--theme-error-950: var(--color-error-950);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-0);
|
--theme-elevation-0: var(--color-base-0);
|
||||||
--theme-elevation-50: var(--color-base-50);
|
--theme-elevation-50: var(--color-base-50);
|
||||||
--theme-elevation-100: var(--color-base-100);
|
--theme-elevation-100: var(--color-base-100);
|
||||||
--theme-elevation-150: var(--color-base-150);
|
--theme-elevation-150: var(--color-base-150);
|
||||||
--theme-elevation-200: var(--color-base-200);
|
--theme-elevation-200: var(--color-base-200);
|
||||||
--theme-elevation-250: var(--color-base-250);
|
--theme-elevation-250: var(--color-base-250);
|
||||||
--theme-elevation-300: var(--color-base-300);
|
--theme-elevation-300: var(--color-base-300);
|
||||||
--theme-elevation-350: var(--color-base-350);
|
--theme-elevation-350: var(--color-base-350);
|
||||||
--theme-elevation-400: var(--color-base-400);
|
--theme-elevation-400: var(--color-base-400);
|
||||||
--theme-elevation-450: var(--color-base-450);
|
--theme-elevation-450: var(--color-base-450);
|
||||||
--theme-elevation-500: var(--color-base-500);
|
--theme-elevation-500: var(--color-base-500);
|
||||||
--theme-elevation-550: var(--color-base-550);
|
--theme-elevation-550: var(--color-base-550);
|
||||||
--theme-elevation-600: var(--color-base-600);
|
--theme-elevation-600: var(--color-base-600);
|
||||||
--theme-elevation-650: var(--color-base-650);
|
--theme-elevation-650: var(--color-base-650);
|
||||||
--theme-elevation-700: var(--color-base-700);
|
--theme-elevation-700: var(--color-base-700);
|
||||||
--theme-elevation-750: var(--color-base-750);
|
--theme-elevation-750: var(--color-base-750);
|
||||||
--theme-elevation-800: var(--color-base-800);
|
--theme-elevation-800: var(--color-base-800);
|
||||||
--theme-elevation-850: var(--color-base-850);
|
--theme-elevation-850: var(--color-base-850);
|
||||||
--theme-elevation-900: var(--color-base-900);
|
--theme-elevation-900: var(--color-base-900);
|
||||||
--theme-elevation-950: var(--color-base-950);
|
--theme-elevation-950: var(--color-base-950);
|
||||||
--theme-elevation-1000: var(--color-base-1000);
|
--theme-elevation-1000: var(--color-base-1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme='dark'] {
|
html[data-theme='dark'] {
|
||||||
--theme-border-color: var(--theme-elevation-150);
|
--theme-border-color: var(--theme-elevation-150);
|
||||||
|
|
||||||
--theme-elevation-0: var(--color-base-900);
|
--theme-elevation-0: var(--color-base-900);
|
||||||
--theme-elevation-50: var(--color-base-850);
|
--theme-elevation-50: var(--color-base-850);
|
||||||
--theme-elevation-100: var(--color-base-800);
|
--theme-elevation-100: var(--color-base-800);
|
||||||
--theme-elevation-150: var(--color-base-750);
|
--theme-elevation-150: var(--color-base-750);
|
||||||
--theme-elevation-200: var(--color-base-700);
|
--theme-elevation-200: var(--color-base-700);
|
||||||
--theme-elevation-250: var(--color-base-650);
|
--theme-elevation-250: var(--color-base-650);
|
||||||
--theme-elevation-300: var(--color-base-600);
|
--theme-elevation-300: var(--color-base-600);
|
||||||
--theme-elevation-350: var(--color-base-550);
|
--theme-elevation-350: var(--color-base-550);
|
||||||
--theme-elevation-400: var(--color-base-450);
|
--theme-elevation-400: var(--color-base-450);
|
||||||
--theme-elevation-450: var(--color-base-400);
|
--theme-elevation-450: var(--color-base-400);
|
||||||
--theme-elevation-550: var(--color-base-350);
|
--theme-elevation-550: var(--color-base-350);
|
||||||
--theme-elevation-600: var(--color-base-300);
|
--theme-elevation-600: var(--color-base-300);
|
||||||
--theme-elevation-650: var(--color-base-250);
|
--theme-elevation-650: var(--color-base-250);
|
||||||
--theme-elevation-700: var(--color-base-200);
|
--theme-elevation-700: var(--color-base-200);
|
||||||
--theme-elevation-750: var(--color-base-150);
|
--theme-elevation-750: var(--color-base-150);
|
||||||
--theme-elevation-800: var(--color-base-100);
|
--theme-elevation-800: var(--color-base-100);
|
||||||
--theme-elevation-850: var(--color-base-50);
|
--theme-elevation-850: var(--color-base-50);
|
||||||
--theme-elevation-900: var(--color-base-0);
|
--theme-elevation-900: var(--color-base-0);
|
||||||
--theme-elevation-950: var(--color-base-0);
|
--theme-elevation-950: var(--color-base-0);
|
||||||
--theme-elevation-1000: var(--color-base-0);
|
--theme-elevation-1000: var(--color-base-0);
|
||||||
|
|
||||||
--theme-success-50: var(--color-success-950);
|
--theme-success-50: var(--color-success-950);
|
||||||
--theme-success-100: var(--color-success-900);
|
--theme-success-100: var(--color-success-900);
|
||||||
--theme-success-150: var(--color-success-850);
|
--theme-success-150: var(--color-success-850);
|
||||||
--theme-success-200: var(--color-success-800);
|
--theme-success-200: var(--color-success-800);
|
||||||
--theme-success-250: var(--color-success-750);
|
--theme-success-250: var(--color-success-750);
|
||||||
--theme-success-300: var(--color-success-700);
|
--theme-success-300: var(--color-success-700);
|
||||||
--theme-success-350: var(--color-success-650);
|
--theme-success-350: var(--color-success-650);
|
||||||
--theme-success-400: var(--color-success-600);
|
--theme-success-400: var(--color-success-600);
|
||||||
--theme-success-450: var(--color-success-550);
|
--theme-success-450: var(--color-success-550);
|
||||||
--theme-success-550: var(--color-success-450);
|
--theme-success-550: var(--color-success-450);
|
||||||
--theme-success-600: var(--color-success-400);
|
--theme-success-600: var(--color-success-400);
|
||||||
--theme-success-650: var(--color-success-350);
|
--theme-success-650: var(--color-success-350);
|
||||||
--theme-success-700: var(--color-success-300);
|
--theme-success-700: var(--color-success-300);
|
||||||
--theme-success-750: var(--color-success-250);
|
--theme-success-750: var(--color-success-250);
|
||||||
--theme-success-800: var(--color-success-200);
|
--theme-success-800: var(--color-success-200);
|
||||||
--theme-success-850: var(--color-success-150);
|
--theme-success-850: var(--color-success-150);
|
||||||
--theme-success-900: var(--color-success-100);
|
--theme-success-900: var(--color-success-100);
|
||||||
--theme-success-950: var(--color-success-50);
|
--theme-success-950: var(--color-success-50);
|
||||||
|
|
||||||
--theme-warning-50: var(--color-warning-950);
|
--theme-warning-50: var(--color-warning-950);
|
||||||
--theme-warning-100: var(--color-warning-900);
|
--theme-warning-100: var(--color-warning-900);
|
||||||
--theme-warning-150: var(--color-warning-850);
|
--theme-warning-150: var(--color-warning-850);
|
||||||
--theme-warning-200: var(--color-warning-800);
|
--theme-warning-200: var(--color-warning-800);
|
||||||
--theme-warning-250: var(--color-warning-750);
|
--theme-warning-250: var(--color-warning-750);
|
||||||
--theme-warning-300: var(--color-warning-700);
|
--theme-warning-300: var(--color-warning-700);
|
||||||
--theme-warning-350: var(--color-warning-650);
|
--theme-warning-350: var(--color-warning-650);
|
||||||
--theme-warning-400: var(--color-warning-600);
|
--theme-warning-400: var(--color-warning-600);
|
||||||
--theme-warning-450: var(--color-warning-550);
|
--theme-warning-450: var(--color-warning-550);
|
||||||
--theme-warning-550: var(--color-warning-450);
|
--theme-warning-550: var(--color-warning-450);
|
||||||
--theme-warning-600: var(--color-warning-400);
|
--theme-warning-600: var(--color-warning-400);
|
||||||
--theme-warning-650: var(--color-warning-350);
|
--theme-warning-650: var(--color-warning-350);
|
||||||
--theme-warning-700: var(--color-warning-300);
|
--theme-warning-700: var(--color-warning-300);
|
||||||
--theme-warning-750: var(--color-warning-250);
|
--theme-warning-750: var(--color-warning-250);
|
||||||
--theme-warning-800: var(--color-warning-200);
|
--theme-warning-800: var(--color-warning-200);
|
||||||
--theme-warning-850: var(--color-warning-150);
|
--theme-warning-850: var(--color-warning-150);
|
||||||
--theme-warning-900: var(--color-warning-100);
|
--theme-warning-900: var(--color-warning-100);
|
||||||
--theme-warning-950: var(--color-warning-50);
|
--theme-warning-950: var(--color-warning-50);
|
||||||
|
|
||||||
--theme-error-50: var(--color-error-950);
|
--theme-error-50: var(--color-error-950);
|
||||||
--theme-error-100: var(--color-error-900);
|
--theme-error-100: var(--color-error-900);
|
||||||
--theme-error-150: var(--color-error-850);
|
--theme-error-150: var(--color-error-850);
|
||||||
--theme-error-200: var(--color-error-800);
|
--theme-error-200: var(--color-error-800);
|
||||||
--theme-error-250: var(--color-error-750);
|
--theme-error-250: var(--color-error-750);
|
||||||
--theme-error-300: var(--color-error-700);
|
--theme-error-300: var(--color-error-700);
|
||||||
--theme-error-350: var(--color-error-650);
|
--theme-error-350: var(--color-error-650);
|
||||||
--theme-error-400: var(--color-error-600);
|
--theme-error-400: var(--color-error-600);
|
||||||
--theme-error-450: var(--color-error-550);
|
--theme-error-450: var(--color-error-550);
|
||||||
--theme-error-550: var(--color-error-450);
|
--theme-error-550: var(--color-error-450);
|
||||||
--theme-error-600: var(--color-error-400);
|
--theme-error-600: var(--color-error-400);
|
||||||
--theme-error-650: var(--color-error-350);
|
--theme-error-650: var(--color-error-350);
|
||||||
--theme-error-700: var(--color-error-300);
|
--theme-error-700: var(--color-error-300);
|
||||||
--theme-error-750: var(--color-error-250);
|
--theme-error-750: var(--color-error-250);
|
||||||
--theme-error-800: var(--color-error-200);
|
--theme-error-800: var(--color-error-200);
|
||||||
--theme-error-850: var(--color-error-150);
|
--theme-error-850: var(--color-error-150);
|
||||||
--theme-error-900: var(--color-error-100);
|
--theme-error-900: var(--color-error-100);
|
||||||
--theme-error-950: var(--color-error-50);
|
--theme-error-950: var(--color-error-50);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
%btn-reset {
|
@layer payload-default {
|
||||||
border: 0;
|
%btn-reset {
|
||||||
background: none;
|
border: 0;
|
||||||
box-shadow: none;
|
background: none;
|
||||||
border-radius: 0;
|
box-shadow: none;
|
||||||
padding: 0;
|
border-radius: 0;
|
||||||
color: currentColor;
|
padding: 0;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btn-reset {
|
@mixin btn-reset {
|
||||||
|
|||||||
@@ -1,59 +1,60 @@
|
|||||||
@import 'vars';
|
@import 'vars';
|
||||||
@import 'queries';
|
@import 'queries';
|
||||||
|
@layer payload-default {
|
||||||
.Toastify {
|
.Toastify {
|
||||||
.Toastify__toast-container {
|
|
||||||
left: base(5);
|
|
||||||
transform: none;
|
|
||||||
right: base(5);
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast {
|
|
||||||
padding: base(0.5);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button {
|
|
||||||
align-self: center;
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
background: var(--color-success-500);
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--success {
|
|
||||||
color: var(--color-success-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__toast--error {
|
|
||||||
background: var(--theme-error-500);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.Toastify__progress-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toastify__close-button--light {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
.Toastify__toast-container {
|
.Toastify__toast-container {
|
||||||
left: $baseline;
|
left: base(5);
|
||||||
right: $baseline;
|
transform: none;
|
||||||
|
right: base(5);
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast {
|
||||||
|
padding: base(0.5);
|
||||||
|
border-radius: $style-radius-m;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button {
|
||||||
|
align-self: center;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
background: var(--color-success-500);
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--success {
|
||||||
|
color: var(--color-success-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast--error {
|
||||||
|
background: var(--theme-error-500);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__close-button--light {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
.Toastify__toast-container {
|
||||||
|
left: $baseline;
|
||||||
|
right: $baseline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,140 +1,141 @@
|
|||||||
@import './styles.scss';
|
@import './styles.scss';
|
||||||
|
@layer payload-default {
|
||||||
|
.payload-toast-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.payload-toast-container {
|
.payload-toast-close-button {
|
||||||
padding: 0;
|
position: absolute;
|
||||||
margin: 0;
|
order: 3;
|
||||||
|
left: unset;
|
||||||
|
inset-inline-end: base(0.8);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
background: unset;
|
||||||
|
border: none;
|
||||||
|
|
||||||
.payload-toast-close-button {
|
svg {
|
||||||
position: absolute;
|
width: base(0.8);
|
||||||
order: 3;
|
height: base(0.8);
|
||||||
left: unset;
|
}
|
||||||
inset-inline-end: base(0.8);
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: var(--theme-elevation-600);
|
|
||||||
background: unset;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
svg {
|
&:hover {
|
||||||
width: base(0.8);
|
color: var(--theme-elevation-250);
|
||||||
height: base(0.8);
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
[dir='RTL'] & {
|
||||||
color: var(--theme-elevation-250);
|
right: unset;
|
||||||
background: none;
|
left: 0.5rem;
|
||||||
}
|
|
||||||
|
|
||||||
[dir='RTL'] & {
|
|
||||||
right: unset;
|
|
||||||
left: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-title {
|
|
||||||
line-height: base(1);
|
|
||||||
margin-right: base(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.payload-toast-item {
|
|
||||||
padding: base(0.8);
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--theme-border-color);
|
|
||||||
background: var(--theme-input-bg);
|
|
||||||
box-shadow:
|
|
||||||
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
|
||||||
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
|
||||||
|
|
||||||
.toast-content {
|
|
||||||
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-front='false'] {
|
|
||||||
.toast-content {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-expanded='true'] {
|
.toast-title {
|
||||||
.toast-content {
|
line-height: base(1);
|
||||||
opacity: 1;
|
margin-right: base(1);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-icon {
|
.payload-toast-item {
|
||||||
width: base(0.8);
|
padding: base(0.8);
|
||||||
height: base(0.8);
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-warning {
|
|
||||||
color: var(--theme-warning-800);
|
|
||||||
border-color: var(--theme-warning-250);
|
|
||||||
background-color: var(--theme-warning-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-warning-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-warning-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-error {
|
|
||||||
color: var(--theme-error-800);
|
|
||||||
border-color: var(--theme-error-250);
|
|
||||||
background-color: var(--theme-error-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-error-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-error-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-success {
|
|
||||||
color: var(--theme-success-800);
|
|
||||||
border-color: var(--theme-success-250);
|
|
||||||
background-color: var(--theme-success-100);
|
|
||||||
|
|
||||||
.payload-toast-close-button {
|
|
||||||
color: var(--theme-success-600);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--theme-success-250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toast-info {
|
|
||||||
color: var(--theme-elevation-800);
|
color: var(--theme-elevation-800);
|
||||||
border-color: var(--theme-elevation-250);
|
font-style: normal;
|
||||||
background-color: var(--theme-elevation-100);
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--theme-border-color);
|
||||||
|
background: var(--theme-input-bg);
|
||||||
|
box-shadow:
|
||||||
|
0px 10px 4px -8px rgba(0, 2, 4, 0.02),
|
||||||
|
0px 2px 3px 0px rgba(0, 2, 4, 0.05);
|
||||||
|
|
||||||
.payload-toast-close-button {
|
.toast-content {
|
||||||
color: var(--theme-elevation-600);
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&[data-front='false'] {
|
||||||
color: var(--theme-elevation-250);
|
.toast-content {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-expanded='true'] {
|
||||||
|
.toast-content {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-icon {
|
||||||
|
width: base(0.8);
|
||||||
|
height: base(0.8);
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-warning {
|
||||||
|
color: var(--theme-warning-800);
|
||||||
|
border-color: var(--theme-warning-250);
|
||||||
|
background-color: var(--theme-warning-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-warning-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-warning-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-error {
|
||||||
|
color: var(--theme-error-800);
|
||||||
|
border-color: var(--theme-error-250);
|
||||||
|
background-color: var(--theme-error-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-error-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-success {
|
||||||
|
color: var(--theme-success-800);
|
||||||
|
border-color: var(--theme-success-250);
|
||||||
|
background-color: var(--theme-success-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-success-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-success-250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toast-info {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
border-color: var(--theme-elevation-250);
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
|
||||||
|
.payload-toast-close-button {
|
||||||
|
color: var(--theme-elevation-600);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--theme-elevation-250);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,106 +4,107 @@
|
|||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
// HEADINGS
|
// HEADINGS
|
||||||
/////////////////////////////
|
/////////////////////////////
|
||||||
|
@layer payload-default {
|
||||||
%h1,
|
%h1,
|
||||||
%h2,
|
%h2,
|
||||||
%h3,
|
%h3,
|
||||||
%h4,
|
%h4,
|
||||||
%h5,
|
%h5,
|
||||||
%h6 {
|
%h6 {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
|
||||||
|
|
||||||
%h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: base(1.6);
|
|
||||||
line-height: base(1.8);
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
font-size: base(1.25);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h2 {
|
%h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1.3);
|
font-size: base(1.6);
|
||||||
line-height: base(1.6);
|
line-height: base(1.8);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.85);
|
letter-spacing: -0.5px;
|
||||||
|
font-size: base(1.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h3 {
|
%h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(1);
|
font-size: base(1.3);
|
||||||
line-height: base(1.2);
|
line-height: base(1.6);
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
font-size: base(0.65);
|
font-size: base(0.85);
|
||||||
line-height: 1.25;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
%h4 {
|
%h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.8);
|
font-size: base(1);
|
||||||
line-height: base(1);
|
line-height: base(1.2);
|
||||||
letter-spacing: -0.375px;
|
|
||||||
}
|
|
||||||
|
|
||||||
%h5 {
|
@include small-break {
|
||||||
margin: 0;
|
font-size: base(0.65);
|
||||||
font-size: base(0.65);
|
line-height: 1.25;
|
||||||
line-height: base(0.8);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
%h6 {
|
%h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: base(0.6);
|
font-size: base(0.8);
|
||||||
line-height: base(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
%small {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/////////////////////////////
|
|
||||||
// TYPE STYLES
|
|
||||||
/////////////////////////////
|
|
||||||
|
|
||||||
%large-body {
|
|
||||||
font-size: base(0.6);
|
|
||||||
line-height: base(1);
|
|
||||||
letter-spacing: base(0.02);
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
font-size: base(0.7);
|
|
||||||
line-height: base(1);
|
line-height: base(1);
|
||||||
|
letter-spacing: -0.375px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-break {
|
%h5 {
|
||||||
font-size: base(0.55);
|
margin: 0;
|
||||||
line-height: base(0.75);
|
font-size: base(0.65);
|
||||||
}
|
line-height: base(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
%body {
|
%h6 {
|
||||||
font-size: $baseline-body-size;
|
margin: 0;
|
||||||
line-height: $baseline-px;
|
font-size: base(0.6);
|
||||||
font-weight: normal;
|
line-height: base(0.8);
|
||||||
font-family: var(--font-body);
|
}
|
||||||
}
|
|
||||||
|
%small {
|
||||||
%code {
|
margin: 0;
|
||||||
font-size: base(0.4);
|
font-size: 12px;
|
||||||
color: var(--theme-elevation-400);
|
line-height: 20px;
|
||||||
|
}
|
||||||
span {
|
|
||||||
color: var(--theme-elevation-800);
|
/////////////////////////////
|
||||||
|
// TYPE STYLES
|
||||||
|
/////////////////////////////
|
||||||
|
|
||||||
|
%large-body {
|
||||||
|
font-size: base(0.6);
|
||||||
|
line-height: base(1);
|
||||||
|
letter-spacing: base(0.02);
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
font-size: base(0.7);
|
||||||
|
line-height: base(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
font-size: base(0.55);
|
||||||
|
line-height: base(0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%body {
|
||||||
|
font-size: $baseline-body-size;
|
||||||
|
line-height: $baseline-px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
%code {
|
||||||
|
font-size: base(0.4);
|
||||||
|
color: var(--theme-elevation-400);
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +1,44 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.relationship-add-new {
|
@layer payload-default {
|
||||||
display: flex;
|
.relationship-add-new {
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.popup__trigger-wrap {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__add-button:not(.relationship-add-new__add-button--unstyled),
|
.popup__trigger-wrap {
|
||||||
&__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
|
display: flex;
|
||||||
@include formInput;
|
align-items: stretch;
|
||||||
margin: 0;
|
height: 100%;
|
||||||
border-top-left-radius: 0;
|
}
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: -1px;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 base(0.5);
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__add-button {
|
&__add-button:not(.relationship-add-new__add-button--unstyled),
|
||||||
margin: 0;
|
&__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
|
||||||
border-top-left-radius: 0;
|
@include formInput;
|
||||||
border-bottom-left-radius: 0;
|
margin: 0;
|
||||||
position: relative;
|
border-top-left-radius: 0;
|
||||||
height: 100%;
|
border-bottom-left-radius: 0;
|
||||||
margin-left: -1px;
|
position: relative;
|
||||||
display: flex;
|
height: 100%;
|
||||||
padding: 0 base(0.5);
|
margin-left: -1px;
|
||||||
align-items: center;
|
display: flex;
|
||||||
display: flex;
|
padding: 0 base(0.5);
|
||||||
cursor: pointer;
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__add-button {
|
||||||
|
margin: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: -1px;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 base(0.5);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,194 +1,196 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.app-header {
|
@layer payload-default {
|
||||||
position: relative;
|
.app-header {
|
||||||
width: 100%;
|
|
||||||
height: var(--app-header-height);
|
|
||||||
z-index: var(--z-modal);
|
|
||||||
|
|
||||||
&__mobile-nav-toggler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// place the localizer outside the `overflow: hidden` container so that the popup is visible
|
|
||||||
// this means we need to use a placeholder div so that the space is retained in the DOM
|
|
||||||
[dir='rtl'] &__localizer {
|
|
||||||
right: unset;
|
|
||||||
left: base(4.5);
|
|
||||||
}
|
|
||||||
&__localizer.localizer {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: base(4.5);
|
|
||||||
transform: translate3d(0, -50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__localizer-spacing {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bg {
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--show-bg {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 var(--gutter-h);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
height: var(--app-header-height);
|
||||||
|
z-index: var(--z-modal);
|
||||||
|
|
||||||
&__account {
|
&__mobile-nav-toggler {
|
||||||
position: relative;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
// place the localizer outside the `overflow: hidden` container so that the popup is visible
|
||||||
|
// this means we need to use a placeholder div so that the space is retained in the DOM
|
||||||
|
[dir='rtl'] &__localizer {
|
||||||
|
right: unset;
|
||||||
|
left: base(4.5);
|
||||||
|
}
|
||||||
|
&__localizer.localizer {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: base(4.5);
|
||||||
|
transform: translate3d(0, -50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__localizer-spacing {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bg {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--show-bg {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use a pseudo element for the accessability so that it doesn't take up DOM space
|
&__content {
|
||||||
// Also because the parent element has `overflow: hidden` which would clip an outline
|
display: flex;
|
||||||
&:focus-visible {
|
align-items: center;
|
||||||
outline: none;
|
height: 100%;
|
||||||
|
padding: 0 var(--gutter-h);
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
&__wrapper {
|
||||||
content: '';
|
display: flex;
|
||||||
border: var(--accessibility-outline);
|
gap: calc(var(--base) / 2);
|
||||||
position: absolute;
|
align-items: center;
|
||||||
top: 0;
|
height: 100%;
|
||||||
right: 0;
|
flex-grow: 1;
|
||||||
bottom: 0;
|
justify-content: space-between;
|
||||||
left: 0;
|
width: 100%;
|
||||||
pointer-events: none;
|
}
|
||||||
|
|
||||||
|
&__account {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:focus:not(:focus-visible) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use a pseudo element for the accessability so that it doesn't take up DOM space
|
||||||
|
// Also because the parent element has `overflow: hidden` which would clip an outline
|
||||||
|
&:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
border: var(--accessibility-outline);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__controls-wrapper {
|
&__controls-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
&__step-nav-wrapper {
|
|
||||||
flex-grow: 0;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions-wrapper {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
margin-right: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__gradient-placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: var(--base);
|
|
||||||
height: var(--base);
|
|
||||||
background: linear-gradient(to right, transparent, var(--theme-bg));
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
flex-shrink: 0;
|
|
||||||
max-width: 600px;
|
|
||||||
overflow: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__last-action {
|
|
||||||
margin-right: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include large-break {
|
|
||||||
&__actions {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
&__gradient-placeholder {
|
|
||||||
right: var(--base);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__actions {
|
&__step-nav-wrapper {
|
||||||
max-width: 300px;
|
flex-grow: 0;
|
||||||
margin-right: var(--base);
|
overflow: auto;
|
||||||
}
|
display: flex;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
@include small-break {
|
&::-webkit-scrollbar {
|
||||||
&__localizer.localizer {
|
|
||||||
right: base(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--nav-open {
|
|
||||||
.app-header__localizer {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__mobile-nav-toggler {
|
&__actions-wrapper {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
&.nav-toggler--is-open {
|
margin-right: var(--base);
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__step-header {
|
|
||||||
// TODO: overflow the step header instead of hide it
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__gradient-placeholder {
|
&__gradient-placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
width: var(--base);
|
||||||
|
height: var(--base);
|
||||||
|
background: linear-gradient(to right, transparent, var(--theme-bg));
|
||||||
}
|
}
|
||||||
|
|
||||||
&__actions {
|
&__actions {
|
||||||
max-width: 150px;
|
display: flex;
|
||||||
margin-right: 0;
|
align-items: center;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
flex-shrink: 0;
|
||||||
|
max-width: 600px;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__last-action {
|
||||||
|
margin-right: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include large-break {
|
||||||
|
&__actions {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
&__gradient-placeholder {
|
||||||
|
right: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
max-width: 300px;
|
||||||
|
margin-right: var(--base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
&__localizer.localizer {
|
||||||
|
right: base(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--nav-open {
|
||||||
|
.app-header__localizer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mobile-nav-toggler {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.nav-toggler--is-open {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__step-header {
|
||||||
|
// TODO: overflow the step header instead of hide it
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__gradient-placeholder {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
max-width: 150px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,34 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.array-actions {
|
@layer payload-default {
|
||||||
&__button {
|
.array-actions {
|
||||||
@extend %btn-reset;
|
&__button {
|
||||||
cursor: pointer;
|
@extend %btn-reset;
|
||||||
border-radius: 100px;
|
cursor: pointer;
|
||||||
|
border-radius: 100px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--theme-elevation-0);
|
background: var(--theme-elevation-0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
&__actions {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__action {
|
&__action {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: calc(var(--base) / 2);
|
gap: calc(var(--base) / 2);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.autosave {
|
@layer payload-default {
|
||||||
white-space: nowrap;
|
.autosave {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +1,73 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.banner {
|
@layer payload-default {
|
||||||
font-size: 1rem;
|
.banner {
|
||||||
line-height: base(1);
|
font-size: 1rem;
|
||||||
border: 0;
|
line-height: base(1);
|
||||||
vertical-align: middle;
|
border: 0;
|
||||||
background: var(--theme-elevation-100);
|
vertical-align: middle;
|
||||||
color: var(--theme-elevation-800);
|
background: var(--theme-elevation-100);
|
||||||
border-radius: $style-radius-m;
|
color: var(--theme-elevation-800);
|
||||||
padding: base(0.5);
|
border-radius: $style-radius-m;
|
||||||
margin-bottom: $baseline;
|
padding: base(0.5);
|
||||||
|
margin-bottom: $baseline;
|
||||||
|
|
||||||
&--has-action {
|
&--has-action {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
|
||||||
&--has-icon {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--type-default {
|
|
||||||
&.button--has-action {
|
|
||||||
&:hover {
|
|
||||||
background: var(--theme-elevation-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background: var(--theme-elevation-950);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--type-error {
|
|
||||||
background: var(--theme-error-100);
|
|
||||||
color: var(--theme-error-600);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
@include color-svg(var(--theme-error-600));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.button--has-action {
|
&--has-icon {
|
||||||
&:hover {
|
display: flex;
|
||||||
background: var(--theme-error-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
svg {
|
||||||
background: var(--theme-error-300);
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--type-success {
|
&--type-default {
|
||||||
background: var(--theme-success-100);
|
&.button--has-action {
|
||||||
color: var(--theme-success-600);
|
&:hover {
|
||||||
|
background: var(--theme-elevation-900);
|
||||||
|
}
|
||||||
|
|
||||||
&.button--has-action {
|
&:active {
|
||||||
&:hover {
|
background: var(--theme-elevation-950);
|
||||||
background: var(--theme-success-200);
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--type-error {
|
||||||
|
background: var(--theme-error-100);
|
||||||
|
color: var(--theme-error-600);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
@include color-svg(var(--theme-error-600));
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&.button--has-action {
|
||||||
background: var(--theme-success-200);
|
&:hover {
|
||||||
|
background: var(--theme-error-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: var(--theme-error-300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--type-success {
|
||||||
|
background: var(--theme-success-100);
|
||||||
|
color: var(--theme-success-600);
|
||||||
|
|
||||||
|
&.button--has-action {
|
||||||
|
&:hover {
|
||||||
|
background: var(--theme-success-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: var(--theme-success-200);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,59 +1,61 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.bulk-upload--actions-bar {
|
@layer payload-default {
|
||||||
display: flex;
|
.bulk-upload--actions-bar {
|
||||||
padding-inline: var(--gutter-h);
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid var(--theme-border-color);
|
|
||||||
position: sticky;
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
background-color: var(--theme-bg);
|
|
||||||
height: var(--doc-controls-height);
|
|
||||||
|
|
||||||
&__navigation {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--base);
|
padding-inline: var(--gutter-h);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
border-bottom: 1px solid var(--theme-border-color);
|
||||||
}
|
position: sticky;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--theme-bg);
|
||||||
|
height: var(--doc-controls-height);
|
||||||
|
|
||||||
&__locationText {
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
width: calc(var(--base) * 1.2);
|
|
||||||
height: calc(var(--base) * 1.2);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--base);
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
&__navigation {
|
&__navigation {
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
&__saveButtons {
|
|
||||||
display: none;
|
&__locationText {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
width: calc(var(--base) * 1.2);
|
||||||
|
height: calc(var(--base) * 1.2);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
&__navigation {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&__saveButtons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,28 +1,30 @@
|
|||||||
.bulk-upload--add-files {
|
@layer payload-default {
|
||||||
height: 100%;
|
.bulk-upload--add-files {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&__dropArea {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: calc(var(--base) * 2) var(--gutter-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropzone {
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--base);
|
flex-direction: column;
|
||||||
background-color: var(--theme-elevation-50);
|
|
||||||
|
|
||||||
p {
|
&__dropArea {
|
||||||
|
height: 100%;
|
||||||
|
padding: calc(var(--base) * 2) var(--gutter-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
background-color: var(--theme-elevation-50);
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dragAndDropText {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
text-transform: lowercase;
|
||||||
|
align-self: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__dragAndDropText {
|
|
||||||
margin: 0;
|
|
||||||
text-transform: lowercase;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,25 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.bulk-upload--file-manager {
|
@layer payload-default {
|
||||||
display: flex;
|
.bulk-upload--file-manager {
|
||||||
height: 100%;
|
display: flex;
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&__editView {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-height: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
|
|
||||||
&__editView {
|
&__editView {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
|
||||||
|
&__editView {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,27 +1,29 @@
|
|||||||
.drawer-close-button {
|
@layer payload-default {
|
||||||
--size: calc(var(--base) * 1.2);
|
.drawer-close-button {
|
||||||
border: 0;
|
--size: calc(var(--base) * 1.2);
|
||||||
background-color: transparent;
|
border: 0;
|
||||||
padding: 0;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
padding: 0;
|
||||||
overflow: hidden;
|
cursor: pointer;
|
||||||
direction: ltr;
|
overflow: hidden;
|
||||||
display: flex;
|
direction: ltr;
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
width: var(--size);
|
justify-content: center;
|
||||||
height: var(--size);
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
margin: calc(-1 * var(--size));
|
margin: calc(-1 * var(--size));
|
||||||
width: calc(var(--size) * 2);
|
width: calc(var(--size) * 2);
|
||||||
height: calc(var(--size) * 2);
|
height: calc(var(--size) * 2);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.stroke {
|
.stroke {
|
||||||
stroke-width: 1px;
|
stroke-width: 1px;
|
||||||
vector-effect: non-scaling-stroke;
|
vector-effect: non-scaling-stroke;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.collection-edit {
|
@layer payload-default {
|
||||||
width: 100%;
|
.collection-edit {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&__form {
|
&__form {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,277 +1,279 @@
|
|||||||
@import '../../../scss/styles.scss';
|
@import '../../../scss/styles.scss';
|
||||||
|
|
||||||
.file-selections {
|
@layer payload-default {
|
||||||
--file-gutter-h: calc(var(--gutter-h) / 4);
|
.file-selections {
|
||||||
border-right: 1px solid var(--theme-border-color);
|
--file-gutter-h: calc(var(--gutter-h) / 4);
|
||||||
padding: 0;
|
border-right: 1px solid var(--theme-border-color);
|
||||||
display: flex;
|
padding: 0;
|
||||||
flex-direction: column;
|
|
||||||
width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 100%;
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
margin-top: var(--base);
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__headerTopRow {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: var(--base);
|
|
||||||
width: 100%;
|
|
||||||
padding-block: var(--base);
|
|
||||||
padding-inline: var(--file-gutter-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header__text {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 300px;
|
||||||
.error-pill {
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__filesContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: calc(var(--base) / 4);
|
|
||||||
margin-top: calc(var(--base) / 2);
|
|
||||||
width: 100%;
|
|
||||||
padding-inline: var(--file-gutter-h);
|
|
||||||
|
|
||||||
.shimmer-effect {
|
|
||||||
border-radius: var(--style-radius-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileRowContainer {
|
|
||||||
--rowPadding: calc(var(--base) / 4);
|
|
||||||
position: relative;
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: calc(var(--base) / 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileRow {
|
|
||||||
@include btn-reset;
|
|
||||||
display: flex;
|
|
||||||
padding: var(--rowPadding);
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--base) / 2);
|
|
||||||
border-radius: var(--style-radius-m);
|
|
||||||
max-width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail {
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
flex-shrink: 0;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: var(--style-radius-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileDetails {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileRowContainer--active {
|
|
||||||
.file-selections__fileRow {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-selections__remove {
|
|
||||||
.icon--x {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileRowContainer--error {
|
|
||||||
.file-selections__fileRow {
|
|
||||||
background-color: var(--theme-error-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.file-selections__fileRowContainer--active .file-selections__fileRow,
|
|
||||||
.file-selections__fileRow:hover {
|
|
||||||
background-color: var(--theme-error-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-selections__remove--overlay:hover {
|
|
||||||
background-color: var(--theme-error-50);
|
|
||||||
|
|
||||||
.icon--x {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__errorCount {
|
|
||||||
margin-left: auto;
|
|
||||||
position: absolute;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileName {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileSize {
|
|
||||||
font-size: calc(var(--base) / 2);
|
|
||||||
color: var(--theme-elvation-400);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__remove {
|
|
||||||
@include btn-reset;
|
|
||||||
margin: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
.icon--x {
|
|
||||||
opacity: 0.75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__remove--underlay {
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__remove--overlay {
|
|
||||||
position: absolute;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
top: 50%;
|
|
||||||
bottom: 50%;
|
|
||||||
right: var(--rowPadding);
|
|
||||||
height: 20px;
|
|
||||||
border-radius: var(--style-radius-m);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--base);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toggler {
|
|
||||||
display: none;
|
|
||||||
margin: 0;
|
|
||||||
padding-block: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header__mobileDocActions {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__animateWrapper {
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
max-height: 100%;
|
||||||
|
|
||||||
&__mobileBlur {
|
|
||||||
@include blur-bg;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__showingFiles {
|
|
||||||
.file-selections__mobileBlur {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
--file-gutter-h: var(--gutter-h);
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
width: 100%;
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&__showingFiles {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__filesContainer {
|
|
||||||
@include blur-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fileRowContainer {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
margin-top: 0;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
margin-top: var(--base);
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--theme-bg);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__headerTopRow {
|
&__headerTopRow {
|
||||||
border-top: 1px solid var(--theme-border-color);
|
display: flex;
|
||||||
padding-block: calc(var(--base) * 0.8);
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--base);
|
||||||
|
width: 100%;
|
||||||
|
padding-block: var(--base);
|
||||||
|
padding-inline: var(--file-gutter-h);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header__mobileDocActions {
|
&__header__text {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
padding-block: calc(var(--base) * 0.8);
|
|
||||||
padding-inline: var(--file-gutter-h);
|
|
||||||
border-top: 1px solid var(--theme-border-color);
|
|
||||||
|
|
||||||
> div {
|
.error-pill {
|
||||||
display: flex;
|
align-self: flex-start;
|
||||||
justify-content: flex-end;
|
}
|
||||||
width: 100%;
|
}
|
||||||
button {
|
|
||||||
flex: 0.5;
|
&__filesContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: calc(var(--base) / 4);
|
||||||
|
margin-top: calc(var(--base) / 2);
|
||||||
|
width: 100%;
|
||||||
|
padding-inline: var(--file-gutter-h);
|
||||||
|
|
||||||
|
.shimmer-effect {
|
||||||
|
border-radius: var(--style-radius-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileRowContainer {
|
||||||
|
--rowPadding: calc(var(--base) / 4);
|
||||||
|
position: relative;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: calc(var(--base) / 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileRow {
|
||||||
|
@include btn-reset;
|
||||||
|
display: flex;
|
||||||
|
padding: var(--rowPadding);
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(var(--base) / 2);
|
||||||
|
border-radius: var(--style-radius-m);
|
||||||
|
max-width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--style-radius-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileDetails {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileRowContainer--active {
|
||||||
|
.file-selections__fileRow {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-selections__remove {
|
||||||
|
.icon--x {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__toggler {
|
&__fileRowContainer--error {
|
||||||
padding-right: 0;
|
.file-selections__fileRow {
|
||||||
display: block;
|
background-color: var(--theme-error-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.file-selections__fileRowContainer--active .file-selections__fileRow,
|
||||||
|
.file-selections__fileRow:hover {
|
||||||
|
background-color: var(--theme-error-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-selections__remove--overlay:hover {
|
||||||
|
background-color: var(--theme-error-50);
|
||||||
|
|
||||||
|
.icon--x {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
&__errorCount {
|
||||||
|
margin-left: auto;
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileName {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileSize {
|
||||||
|
font-size: calc(var(--base) / 2);
|
||||||
|
color: var(--theme-elvation-400);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__remove {
|
||||||
|
@include btn-reset;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
.icon--x {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__remove--underlay {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__remove--overlay {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
top: 50%;
|
||||||
|
bottom: 50%;
|
||||||
|
right: var(--rowPadding);
|
||||||
|
height: 20px;
|
||||||
|
border-radius: var(--style-radius-m);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggler {
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
padding-block: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__mobileDocActions {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__animateWrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mobileBlur {
|
||||||
|
@include blur-bg;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 100ms cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__showingFiles {
|
||||||
|
.file-selections__mobileBlur {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mid-break {
|
||||||
|
--file-gutter-h: var(--gutter-h);
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
width: 100%;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&__showingFiles {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__filesContainer {
|
||||||
|
@include blur-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fileRowContainer {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__headerTopRow {
|
||||||
|
border-top: 1px solid var(--theme-border-color);
|
||||||
|
padding-block: calc(var(--base) * 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__mobileDocActions {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding-block: calc(var(--base) * 0.8);
|
||||||
|
padding-inline: var(--file-gutter-h);
|
||||||
|
border-top: 1px solid var(--theme-border-color);
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
button {
|
||||||
|
flex: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggler {
|
||||||
|
padding-right: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
.bulk-upload--drawer-header {
|
@layer payload-default {
|
||||||
display: flex;
|
.bulk-upload--drawer-header {
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
padding: calc(var(--base) * 2.5) var(--gutter-h);
|
align-items: center;
|
||||||
height: 48px;
|
padding: calc(var(--base) * 2.5) var(--gutter-h);
|
||||||
border-bottom: 1px solid var(--theme-border-color);
|
height: 48px;
|
||||||
|
border-bottom: 1px solid var(--theme-border-color);
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,277 +1,279 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
a.btn {
|
@layer payload-default {
|
||||||
display: inline-block;
|
a.btn {
|
||||||
}
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--withPopup {
|
||||||
|
margin-block: 24px;
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn--withPopup {
|
|
||||||
margin-block: 24px;
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 0;
|
// colors
|
||||||
}
|
&--style-primary {
|
||||||
}
|
--color: var(--theme-elevation-0);
|
||||||
|
--bg-color: var(--theme-elevation-800);
|
||||||
|
--box-shadow: none;
|
||||||
|
--hover-bg: var(--theme-elevation-600);
|
||||||
|
--hover-color: var(--color);
|
||||||
|
|
||||||
.btn {
|
&.btn--disabled {
|
||||||
// colors
|
--bg-color: var(--theme-elevation-200);
|
||||||
&--style-primary {
|
--color: var(--theme-elevation-800);
|
||||||
--color: var(--theme-elevation-0);
|
--hover-bg: var(--bg-color);
|
||||||
--bg-color: var(--theme-elevation-800);
|
--hover-color: var(--color);
|
||||||
--box-shadow: none;
|
}
|
||||||
--hover-bg: var(--theme-elevation-600);
|
}
|
||||||
--hover-color: var(--color);
|
|
||||||
|
|
||||||
&.btn--disabled {
|
&--style-secondary {
|
||||||
--bg-color: var(--theme-elevation-200);
|
--color: var(--theme-text);
|
||||||
|
--bg-color: transparent;
|
||||||
|
--box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
|
||||||
|
--hover-color: var(--theme-elevation-600);
|
||||||
|
--hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
|
||||||
|
|
||||||
|
&.btn--disabled {
|
||||||
|
--color: var(--theme-elevation-200);
|
||||||
|
--box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
|
||||||
|
--hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
|
||||||
|
--hover-color: var(--color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--style-pill {
|
||||||
|
--bg-color: var(--theme-elevation-150);
|
||||||
--color: var(--theme-elevation-800);
|
--color: var(--theme-elevation-800);
|
||||||
--hover-bg: var(--bg-color);
|
|
||||||
--hover-color: var(--color);
|
--hover-color: var(--color);
|
||||||
|
--hover-bg: var(--theme-elevation-100);
|
||||||
|
|
||||||
|
&.btn--disabled {
|
||||||
|
--color: var(--theme-elevation-600);
|
||||||
|
--hover-bg: var(--bg-color);
|
||||||
|
--hover-color: var(--color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--style-secondary {
|
.btn--withPopup {
|
||||||
--color: var(--theme-text);
|
.popup-button {
|
||||||
--bg-color: transparent;
|
color: var(--color, inherit);
|
||||||
--box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
|
background-color: var(--bg-color);
|
||||||
--hover-color: var(--theme-elevation-600);
|
box-shadow: var(--box-shadow);
|
||||||
--hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
|
border-radius: $style-radius-m;
|
||||||
|
border-left: 1px solid var(--theme-bg);
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&.btn--disabled {
|
&:hover,
|
||||||
--color: var(--theme-elevation-200);
|
&:focus-visible,
|
||||||
--box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
|
&:focus,
|
||||||
--hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
|
&:active {
|
||||||
--hover-color: var(--color);
|
background-color: var(--hover-bg);
|
||||||
|
color: var(--hover-color);
|
||||||
|
box-shadow: var(--hover-box-shadow);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--style-pill {
|
.btn,
|
||||||
--bg-color: var(--theme-elevation-150);
|
.btn--withPopup .btn {
|
||||||
--color: var(--theme-elevation-800);
|
|
||||||
--hover-color: var(--color);
|
|
||||||
--hover-bg: var(--theme-elevation-100);
|
|
||||||
|
|
||||||
&.btn--disabled {
|
|
||||||
--color: var(--theme-elevation-600);
|
|
||||||
--hover-bg: var(--bg-color);
|
|
||||||
--hover-color: var(--color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--withPopup {
|
|
||||||
.popup-button {
|
|
||||||
color: var(--color, inherit);
|
|
||||||
background-color: var(--bg-color);
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
border-radius: $style-radius-m;
|
|
||||||
border-left: 1px solid var(--theme-bg);
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--hover-bg);
|
|
||||||
color: var(--hover-color);
|
color: var(--hover-color);
|
||||||
box-shadow: var(--hover-box-shadow);
|
box-shadow: var(--hover-box-shadow);
|
||||||
|
background-color: var(--hover-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.btn,
|
.btn--disabled,
|
||||||
.btn--withPopup .btn {
|
.btn--disabled .btn {
|
||||||
&:hover,
|
cursor: not-allowed;
|
||||||
&:focus-visible,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: var(--hover-color);
|
|
||||||
box-shadow: var(--hover-box-shadow);
|
|
||||||
background-color: var(--hover-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--disabled,
|
|
||||||
.btn--disabled .btn {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border-radius: $style-radius-s;
|
|
||||||
font-size: var(--base-body-size);
|
|
||||||
margin-block: base(1.2);
|
|
||||||
line-height: base(1.2);
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: normal;
|
|
||||||
text-decoration: none;
|
|
||||||
transition-property: border, color, box-shadow, background;
|
|
||||||
transition-duration: 100ms;
|
|
||||||
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
|
||||||
|
|
||||||
color: var(--color, inherit);
|
|
||||||
background-color: var(--bg-color, transparent);
|
|
||||||
box-shadow: var(--box-shadow, none);
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
@include color-svg(var(--color, currentColor));
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
.btn {
|
||||||
display: flex;
|
border-radius: $style-radius-s;
|
||||||
align-items: center;
|
font-size: var(--base-body-size);
|
||||||
justify-content: center;
|
margin-block: base(1.2);
|
||||||
}
|
line-height: base(1.2);
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
transition-property: border, color, box-shadow, background;
|
||||||
|
transition-duration: 100ms;
|
||||||
|
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
|
||||||
&__icon {
|
color: var(--color, inherit);
|
||||||
width: base(1.2);
|
background-color: var(--bg-color, transparent);
|
||||||
height: base(1.2);
|
box-shadow: var(--box-shadow, none);
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 100%;
|
|
||||||
padding: base(0.1);
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
@include color-svg(var(--color, currentColor));
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--size-small {
|
&__content {
|
||||||
padding: base(0.2);
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--withPopup {
|
&__icon {
|
||||||
display: flex;
|
width: base(1.2);
|
||||||
}
|
height: base(1.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 100%;
|
||||||
|
padding: base(0.1);
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
&--has-tooltip {
|
.icon {
|
||||||
position: relative;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&--icon-style-without-border {
|
&.btn--size-small {
|
||||||
.btn__icon {
|
padding: base(0.2);
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--icon-style-none {
|
|
||||||
.btn__icon {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--size-small {
|
|
||||||
padding: 0 base(0.4);
|
|
||||||
|
|
||||||
&.btn--icon-position-left {
|
|
||||||
padding-inline-start: base(0.1);
|
|
||||||
padding-inline-end: base(0.4);
|
|
||||||
|
|
||||||
.btn__content {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--icon-position-right {
|
&--withPopup {
|
||||||
padding-inline-start: base(0.4);
|
display: flex;
|
||||||
padding-inline-end: base(0.1);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--size-medium {
|
&--has-tooltip {
|
||||||
padding: base(0.2) base(0.6);
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
&.btn--icon-position-left {
|
&--icon-style-without-border {
|
||||||
padding-inline-start: base(0.4);
|
.btn__icon {
|
||||||
padding-inline-end: base(0.6);
|
border: none;
|
||||||
|
|
||||||
.btn__content {
|
|
||||||
gap: base(0.2);
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--icon-position-right {
|
&--icon-style-none {
|
||||||
padding-inline-start: base(0.6);
|
.btn__icon {
|
||||||
padding-inline-end: base(0.4);
|
border: none;
|
||||||
|
|
||||||
.btn__content {
|
|
||||||
gap: base(0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--size-large {
|
|
||||||
padding: base(0.4) base(0.8);
|
|
||||||
|
|
||||||
&.btn--icon-position-left {
|
|
||||||
padding-inline-start: base(0.6);
|
|
||||||
padding-inline-end: base(0.8);
|
|
||||||
|
|
||||||
.btn__content {
|
|
||||||
gap: base(0.4);
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--icon-position-right {
|
&--size-small {
|
||||||
padding-inline-start: base(0.8);
|
padding: 0 base(0.4);
|
||||||
padding-inline-end: base(0.6);
|
|
||||||
|
&.btn--icon-position-left {
|
||||||
|
padding-inline-start: base(0.1);
|
||||||
|
padding-inline-end: base(0.4);
|
||||||
|
|
||||||
|
.btn__content {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn--icon-position-right {
|
||||||
|
padding-inline-start: base(0.4);
|
||||||
|
padding-inline-end: base(0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--size-medium {
|
||||||
|
padding: base(0.2) base(0.6);
|
||||||
|
|
||||||
|
&.btn--icon-position-left {
|
||||||
|
padding-inline-start: base(0.4);
|
||||||
|
padding-inline-end: base(0.6);
|
||||||
|
|
||||||
|
.btn__content {
|
||||||
|
gap: base(0.2);
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn--icon-position-right {
|
||||||
|
padding-inline-start: base(0.6);
|
||||||
|
padding-inline-end: base(0.4);
|
||||||
|
|
||||||
|
.btn__content {
|
||||||
|
gap: base(0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--size-large {
|
||||||
|
padding: base(0.4) base(0.8);
|
||||||
|
|
||||||
|
&.btn--icon-position-left {
|
||||||
|
padding-inline-start: base(0.6);
|
||||||
|
padding-inline-end: base(0.8);
|
||||||
|
|
||||||
|
.btn__content {
|
||||||
|
gap: base(0.4);
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn--icon-position-right {
|
||||||
|
padding-inline-start: base(0.8);
|
||||||
|
padding-inline-end: base(0.6);
|
||||||
|
|
||||||
|
.btn__content {
|
||||||
|
gap: base(0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--withPopup .btn {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--style-icon-label,
|
||||||
|
&--style-icon-label.btn--icon-position-left,
|
||||||
|
&--style-icon-label.btn--icon-position-right {
|
||||||
|
padding: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
.btn__content {
|
.btn__content {
|
||||||
gap: base(0.4);
|
gap: base(0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--withPopup .btn {
|
&--style-none {
|
||||||
border-top-right-radius: 0;
|
padding: 0;
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--style-icon-label,
|
|
||||||
&--style-icon-label.btn--icon-position-left,
|
|
||||||
&--style-icon-label.btn--icon-position-right {
|
|
||||||
padding: 0;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
.btn__content {
|
|
||||||
gap: base(0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--style-none {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
|
||||||
.btn__icon {
|
|
||||||
@include color-svg(var(--theme-elevation-800));
|
|
||||||
background: var(--theme-elevation-150);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
outline: none;
|
&:focus:not(:focus-visible) {
|
||||||
}
|
.btn__icon {
|
||||||
|
@include color-svg(var(--theme-elevation-800));
|
||||||
|
background: var(--theme-elevation-150);
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
outline: none;
|
||||||
.btn__icon {
|
|
||||||
@include color-svg(var(--theme-elevation-0));
|
|
||||||
background: var(--theme-elevation-700);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-visible {
|
&:active {
|
||||||
outline: var(--accessibility-outline);
|
.btn__icon {
|
||||||
outline-offset: var(--accessibility-outline-offset);
|
@include color-svg(var(--theme-elevation-0));
|
||||||
}
|
background: var(--theme-elevation-700);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.btn--disabled {
|
&:focus-visible {
|
||||||
cursor: not-allowed;
|
outline: var(--accessibility-outline);
|
||||||
|
outline-offset: var(--accessibility-outline-offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,71 +1,73 @@
|
|||||||
@import '../../scss/styles';
|
@import '../../scss/styles';
|
||||||
|
|
||||||
.card {
|
@layer payload-default {
|
||||||
background: var(--theme-elevation-50);
|
.card {
|
||||||
padding: base(0.8);
|
background: var(--theme-elevation-50);
|
||||||
width: 100%;
|
padding: base(0.8);
|
||||||
min-height: base(4);
|
|
||||||
position: relative;
|
|
||||||
border-radius: var(--style-radius-m);
|
|
||||||
border: 1px solid var(--theme-border-color);
|
|
||||||
transition-property: border, box-shadow, background;
|
|
||||||
transition-duration: 100ms;
|
|
||||||
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-self: start;
|
|
||||||
gap: base(0.8);
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
@extend %h5;
|
|
||||||
letter-spacing: 0;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: base(0.8);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: base(0.1) 0;
|
min-height: base(4);
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
border-radius: var(--style-radius-m);
|
||||||
display: inline-flex;
|
border: 1px solid var(--theme-border-color);
|
||||||
.btn {
|
transition-property: border, box-shadow, background;
|
||||||
margin: 0;
|
transition-duration: 100ms;
|
||||||
flex-shrink: 0;
|
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-self: start;
|
||||||
|
gap: base(0.8);
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
@extend %h5;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: base(0.8);
|
||||||
|
width: 100%;
|
||||||
|
margin: base(0.1) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn__icon {
|
&__actions {
|
||||||
border: 1px solid var(--theme-border-color);
|
position: relative;
|
||||||
transition-property: border, box-shadow, color, background;
|
z-index: 2;
|
||||||
transition-duration: 100ms;
|
display: inline-flex;
|
||||||
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.btn__icon {
|
||||||
border: 1px solid var(--theme-elevation-500);
|
border: 1px solid var(--theme-border-color);
|
||||||
background-color: var(--theme-elevation-0);
|
transition-property: border, box-shadow, color, background;
|
||||||
color: currentColor;
|
transition-duration: 100ms;
|
||||||
@include shadow-sm;
|
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid var(--theme-elevation-500);
|
||||||
|
background-color: var(--theme-elevation-0);
|
||||||
|
color: currentColor;
|
||||||
|
@include shadow-sm;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&--has-onclick {
|
&--has-onclick {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--theme-elevation-50);
|
background: var(--theme-elevation-50);
|
||||||
border: 1px solid var(--theme-elevation-250);
|
border: 1px solid var(--theme-elevation-250);
|
||||||
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__click {
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__click {
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,21 +1,23 @@
|
|||||||
@import '../../scss/styles';
|
@import '../../scss/styles';
|
||||||
|
|
||||||
.code-editor {
|
@layer payload-default {
|
||||||
direction: ltr;
|
.code-editor {
|
||||||
@include formInput;
|
direction: ltr;
|
||||||
height: auto;
|
@include formInput;
|
||||||
padding: 0;
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
.monaco-editor {
|
.monaco-editor {
|
||||||
.view-overlays .current-line {
|
|
||||||
max-width: calc(100% - 14px);
|
|
||||||
border-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-within {
|
|
||||||
.view-overlays .current-line {
|
.view-overlays .current-line {
|
||||||
border-right: 0;
|
max-width: calc(100% - 14px);
|
||||||
border-width: 1px;
|
border-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
.view-overlays .current-line {
|
||||||
|
border-right: 0;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,158 +1,160 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.collapsible {
|
@layer payload-default {
|
||||||
--toggle-pad-h: #{base(0.75)};
|
.collapsible {
|
||||||
--toggle-pad-v: #{base(0.6)};
|
--toggle-pad-h: #{base(0.75)};
|
||||||
|
--toggle-pad-v: #{base(0.6)};
|
||||||
|
|
||||||
border-radius: $style-radius-m;
|
border-radius: $style-radius-m;
|
||||||
|
|
||||||
&__toggle-wrap {
|
&__toggle-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: base(0.4) base(0.4) base(0.4) base(0.8);
|
padding: base(0.4) base(0.4) base(0.4) base(0.8);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: var(--theme-elevation-50);
|
background: var(--theme-elevation-50);
|
||||||
line-height: base(1.2);
|
line-height: base(1.2);
|
||||||
gap: base(0.2);
|
gap: base(0.2);
|
||||||
border-top-right-radius: $style-radius-m;
|
border-top-right-radius: $style-radius-m;
|
||||||
border-top-left-radius: $style-radius-m;
|
border-top-left-radius: $style-radius-m;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(.collapsible__drag) {
|
|
||||||
padding-inline-start: base(0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__drag {
|
|
||||||
display: flex;
|
|
||||||
opacity: 0.5;
|
|
||||||
top: var(--toggle-pad-v);
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
padding: base(0.1);
|
|
||||||
|
|
||||||
icon {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toggle {
|
|
||||||
@extend %btn-reset;
|
|
||||||
@extend %body;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
border-top-right-radius: $style-radius-m;
|
|
||||||
border-top-left-radius: $style-radius-m;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--style-default {
|
|
||||||
border: 1px solid var(--theme-elevation-200);
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--theme-elevation-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .collapsible__toggle-wrap {
|
|
||||||
.row-label {
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--style-error {
|
|
||||||
border: 1px solid var(--theme-error-400);
|
|
||||||
> .collapsible__toggle-wrap {
|
|
||||||
background-color: var(--theme-error-100);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--theme-error-150);
|
background: var(--theme-elevation-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-label {
|
&:has(.collapsible__drag) {
|
||||||
color: var(--theme-error-950);
|
padding-inline-start: base(0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__header-wrap {
|
&__drag {
|
||||||
top: 0;
|
display: flex;
|
||||||
right: base(3);
|
opacity: 0.5;
|
||||||
bottom: 0;
|
top: var(--toggle-pad-v);
|
||||||
left: 0;
|
width: base(1.2);
|
||||||
pointer-events: none;
|
height: base(1.2);
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header-wrap--has-drag-handle {
|
|
||||||
left: base(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--collapsed {
|
|
||||||
.collapsible__toggle-wrap {
|
|
||||||
border-bottom-right-radius: $style-radius-m;
|
|
||||||
border-bottom-left-radius: $style-radius-m;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions-wrap {
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
gap: base(0.2);
|
|
||||||
margin-inline-end: base(0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
pointer-events: all;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: base(1.2);
|
|
||||||
height: base(1.2);
|
|
||||||
|
|
||||||
&.icon {
|
|
||||||
padding: base(0.1);
|
padding: base(0.1);
|
||||||
|
|
||||||
|
icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__indicator {
|
&__toggle {
|
||||||
display: flex;
|
@extend %btn-reset;
|
||||||
align-items: center;
|
@extend %body;
|
||||||
justify-content: center;
|
text-align: left;
|
||||||
width: base(1.2);
|
cursor: pointer;
|
||||||
height: base(1.2);
|
border-top-right-radius: $style-radius-m;
|
||||||
|
border-top-left-radius: $style-radius-m;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
&.icon {
|
span {
|
||||||
padding: base(0.1);
|
user-select: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
&--style-default {
|
||||||
background-color: var(--theme-elevation-0);
|
border: 1px solid var(--theme-elevation-200);
|
||||||
border-bottom-left-radius: $style-radius-m;
|
&:hover {
|
||||||
border-bottom-right-radius: $style-radius-m;
|
border: 1px solid var(--theme-elevation-300);
|
||||||
padding: var(--base);
|
}
|
||||||
}
|
|
||||||
|
> .collapsible__toggle-wrap {
|
||||||
|
.row-label {
|
||||||
|
color: var(--theme-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--style-error {
|
||||||
|
border: 1px solid var(--theme-error-400);
|
||||||
|
> .collapsible__toggle-wrap {
|
||||||
|
background-color: var(--theme-error-100);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--theme-error-150);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-label {
|
||||||
|
color: var(--theme-error-950);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-wrap {
|
||||||
|
top: 0;
|
||||||
|
right: base(3);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header-wrap--has-drag-handle {
|
||||||
|
left: base(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--collapsed {
|
||||||
|
.collapsible__toggle-wrap {
|
||||||
|
border-bottom-right-radius: $style-radius-m;
|
||||||
|
border-bottom-left-radius: $style-radius-m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions-wrap {
|
||||||
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
gap: base(0.2);
|
||||||
|
margin-inline-end: base(0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
pointer-events: all;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
|
||||||
|
&.icon {
|
||||||
|
padding: base(0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: base(1.2);
|
||||||
|
height: base(1.2);
|
||||||
|
|
||||||
|
&.icon {
|
||||||
|
padding: base(0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
&__content {
|
&__content {
|
||||||
padding: var(--gutter-h);
|
background-color: var(--theme-elevation-0);
|
||||||
|
border-bottom-left-radius: $style-radius-m;
|
||||||
|
border-bottom-right-radius: $style-radius-m;
|
||||||
|
padding: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
&__content {
|
||||||
|
padding: var(--gutter-h);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,46 +1,48 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.column-selector {
|
@layer payload-default {
|
||||||
display: flex;
|
.column-selector {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
background: var(--theme-elevation-50);
|
flex-wrap: wrap;
|
||||||
padding: base(1) base(1) base(0.5);
|
background: var(--theme-elevation-50);
|
||||||
|
padding: base(1) base(1) base(0.5);
|
||||||
|
|
||||||
&__column {
|
&__column {
|
||||||
margin-right: base(0.5);
|
margin-right: base(0.5);
|
||||||
margin-bottom: base(0.5);
|
margin-bottom: base(0.5);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: 0 0 0 1px var(--theme-elevation-150);
|
box-shadow: 0 0 0 1px var(--theme-elevation-150);
|
||||||
|
|
||||||
&.column-selector__column {
|
&.column-selector__column {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--theme-elevation-100);
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.column-selector__column--active {
|
&.column-selector__column--active {
|
||||||
background-color: var(--theme-elevation-0);
|
|
||||||
box-shadow:
|
|
||||||
0 0px 1px 1px var(--theme-elevation-150),
|
|
||||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--theme-elevation-0);
|
background-color: var(--theme-elevation-0);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0px 1px 1px var(--theme-elevation-250),
|
0 0px 1px 1px var(--theme-elevation-150),
|
||||||
0 3px 4px -1px rgba(0, 0, 0, 0.1);
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--theme-elevation-0);
|
||||||
|
box-shadow:
|
||||||
|
0 0px 1px 1px var(--theme-elevation-250),
|
||||||
|
0 3px 4px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: delete this once all icons have been migrated to viewbox edge-to-edge
|
// TODO: delete this once all icons have been migrated to viewbox edge-to-edge
|
||||||
.pill__icon {
|
.pill__icon {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include small-break {
|
@include small-break {
|
||||||
padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
|
padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,28 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.copy-to-clipboard {
|
@layer payload-default {
|
||||||
@extend %btn-reset;
|
.copy-to-clipboard {
|
||||||
position: relative;
|
@extend %btn-reset;
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
vertical-align: middle;
|
cursor: pointer;
|
||||||
border-radius: 100%;
|
vertical-align: middle;
|
||||||
|
border-radius: 100%;
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: var(--accessibility-outline);
|
outline: var(--accessibility-outline);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,386 +2,388 @@
|
|||||||
|
|
||||||
$cal-icon-width: 18px;
|
$cal-icon-width: 18px;
|
||||||
|
|
||||||
[dir='rtl'] {
|
@layer payload-default {
|
||||||
.date-time-picker {
|
[dir='rtl'] {
|
||||||
.react-datepicker__input-container input {
|
.date-time-picker {
|
||||||
padding-right: base(3.4);
|
.react-datepicker__input-container input {
|
||||||
|
padding-right: base(3.4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.date-time-picker {
|
.date-time-picker {
|
||||||
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
|
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
|
||||||
.react-datepicker__time-container {
|
.react-datepicker__time-container {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon-wrap {
|
&__icon-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon--calendar,
|
.icon--calendar,
|
||||||
&__clear-button {
|
&__clear-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon--calendar,
|
.icon--calendar,
|
||||||
.icon--x {
|
.icon--x {
|
||||||
@include color-svg(var(--theme-elevation-800));
|
@include color-svg(var(--theme-elevation-800));
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__clear-button {
|
&__clear-button {
|
||||||
top: base(0.5);
|
top: base(0.5);
|
||||||
right: base(2);
|
right: base(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon--calendar {
|
.icon--calendar {
|
||||||
top: base(0.625);
|
top: base(0.625);
|
||||||
right: base(0.75);
|
right: base(0.75);
|
||||||
width: $cal-icon-width;
|
width: $cal-icon-width;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon--x {
|
.icon--x {
|
||||||
width: base(1);
|
width: base(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__clear-button {
|
&__clear-button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__appearance--timeOnly {
|
&__appearance--timeOnly {
|
||||||
.react-datepicker {
|
.react-datepicker {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&__month-container,
|
&__month-container,
|
||||||
&__navigation--previous,
|
&__navigation--previous,
|
||||||
&__navigation--next {
|
&__navigation--next {
|
||||||
display: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-popper,
|
&-popper,
|
||||||
&__time-container,
|
&__time-container,
|
||||||
&__time-box {
|
&__time-box {
|
||||||
width: base(6);
|
width: base(6);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__time-container {
|
&__time-container {
|
||||||
.react-datepicker__time {
|
.react-datepicker__time {
|
||||||
.react-datepicker__time-box {
|
.react-datepicker__time-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker-wrapper {
|
.react-datepicker-wrapper {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-datepicker-wrapper,
|
.react-datepicker-wrapper,
|
||||||
.react-datepicker__input-container {
|
.react-datepicker__input-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-datepicker__input-container input {
|
|
||||||
@include formInput;
|
|
||||||
padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
|
|
||||||
}
|
|
||||||
|
|
||||||
&--has-error {
|
|
||||||
.react-datepicker__input-container input {
|
.react-datepicker__input-container input {
|
||||||
background-color: var(--theme-error-200);
|
@include formInput;
|
||||||
|
padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker {
|
&--has-error {
|
||||||
@include shadow-lg;
|
.react-datepicker__input-container input {
|
||||||
border: 1px solid var(--theme-elevation-100);
|
background-color: var(--theme-error-200);
|
||||||
background: var(--theme-input-bg);
|
}
|
||||||
display: inline-flex;
|
}
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 100;
|
|
||||||
border-radius: 0;
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
|
|
||||||
&__header {
|
.react-datepicker {
|
||||||
padding-top: 0;
|
@include shadow-lg;
|
||||||
text-transform: none;
|
border: 1px solid var(--theme-elevation-100);
|
||||||
text-align: center;
|
background: var(--theme-input-bg);
|
||||||
|
display: inline-flex;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 100;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
color: var(--theme-elevation-800);
|
||||||
background-color: var(--theme-input-bg);
|
|
||||||
|
|
||||||
&--time {
|
&__header {
|
||||||
|
padding-top: 0;
|
||||||
|
text-transform: none;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background-color: var(--theme-input-bg);
|
||||||
|
|
||||||
|
&--time {
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid var(--theme-elevation-150);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navigation {
|
||||||
|
background: none;
|
||||||
|
line-height: 1.7rem;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0.45rem solid transparent;
|
||||||
|
z-index: 1;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
text-indent: -999em;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 15px;
|
||||||
|
|
||||||
|
&--next {
|
||||||
|
border-left-color: var(--theme-elevation-400);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-left-color: var(--theme-elevation-500);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--previous {
|
||||||
|
border-right-color: var(--theme-elevation-400);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-right-color: var(--theme-elevation-500);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current-month,
|
||||||
|
&__header,
|
||||||
|
&-year-header,
|
||||||
|
&__day-name,
|
||||||
|
&__day,
|
||||||
|
&__time-name,
|
||||||
|
&-time__header {
|
||||||
|
color: var(--theme-elevation-1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current-month {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header__dropdown,
|
||||||
|
&-year-header {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
border-bottom: 1px solid var(--theme-elevation-150);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__navigation {
|
|
||||||
background: none;
|
|
||||||
line-height: 1.7rem;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
width: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0.45rem solid transparent;
|
|
||||||
z-index: 1;
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
text-indent: -999em;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 15px;
|
|
||||||
|
|
||||||
&--next {
|
|
||||||
border-left-color: var(--theme-elevation-400);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-left-color: var(--theme-elevation-500);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--previous {
|
|
||||||
border-right-color: var(--theme-elevation-400);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-right-color: var(--theme-elevation-500);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__current-month,
|
|
||||||
&__header,
|
|
||||||
&-year-header,
|
|
||||||
&__day-name,
|
|
||||||
&__day,
|
|
||||||
&__time-name,
|
|
||||||
&-time__header {
|
|
||||||
color: var(--theme-elevation-1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__current-month {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header__dropdown,
|
|
||||||
&-year-header {
|
|
||||||
padding: 10px 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__month-container {
|
|
||||||
border-right: 1px solid var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time,
|
|
||||||
&__time-container,
|
|
||||||
.react-datepicker__time-container .react-datepicker__time {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time-container {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__month-text {
|
|
||||||
padding: base(0.3);
|
|
||||||
margin: base(0.15);
|
|
||||||
font-size: base(0.55);
|
|
||||||
&:hover {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__month-select,
|
|
||||||
&__year-select {
|
|
||||||
min-width: 70px;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
option {
|
|
||||||
background-color: var(--theme-elevation-50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__day-names {
|
|
||||||
background-color: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__day {
|
|
||||||
box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
|
|
||||||
font-size: base(0.55);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
background: var(--theme-elevation-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--selected {
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--keyboard-selected {
|
|
||||||
color: var(--theme-elevation-0);
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
box-shadow:
|
|
||||||
inset 0px 0px 0px 1px var(--theme-elevation-800),
|
|
||||||
0px 0px 0px 1px var(--theme-elevation-800);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--today {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__day,
|
|
||||||
&__day-name {
|
|
||||||
width: base(1.5);
|
|
||||||
margin: base(0.15);
|
|
||||||
line-height: base(1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker-popper {
|
|
||||||
z-index: 10;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__time-container
|
|
||||||
.react-datepicker__time
|
|
||||||
.react-datepicker__time-box
|
|
||||||
ul.react-datepicker__time-list {
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__day--keyboard-selected,
|
|
||||||
.react-datepicker__month-text--keyboard-selected,
|
|
||||||
.react-datepicker__time-container
|
|
||||||
.react-datepicker__time
|
|
||||||
.react-datepicker__time-box
|
|
||||||
ul.react-datepicker__time-list
|
|
||||||
li.react-datepicker__time-list-item--selected {
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__time-container
|
|
||||||
.react-datepicker__time
|
|
||||||
.react-datepicker__time-box
|
|
||||||
ul.react-datepicker__time-list
|
|
||||||
li.react-datepicker__time-list-item--selected,
|
|
||||||
.react-datepicker__day--selected,
|
|
||||||
.react-datepicker__day--in-selecting-range,
|
|
||||||
.react-datepicker__day--in-range,
|
|
||||||
.react-datepicker__month-text--selected,
|
|
||||||
.react-datepicker__month-text--in-selecting-range,
|
|
||||||
.react-datepicker__month-text--in-range {
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: var(--theme-elevation-150);
|
|
||||||
color: var(--theme-elevation-800);
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__time-container
|
|
||||||
.react-datepicker__time
|
|
||||||
.react-datepicker__time-box
|
|
||||||
ul.react-datepicker__time-list
|
|
||||||
li.react-datepicker__time-list-item:hover {
|
|
||||||
background: var(--theme-elevation-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__day:hover,
|
|
||||||
.react-datepicker__month-text:hover {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__navigation--next--with-time:not(
|
|
||||||
.react-datepicker__navigation--next--with-today-button
|
|
||||||
) {
|
|
||||||
right: 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__time-container
|
|
||||||
.react-datepicker__time
|
|
||||||
.react-datepicker__time-box
|
|
||||||
ul.react-datepicker__time-list
|
|
||||||
li.react-datepicker__time-list-item {
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: base(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__appearance--dayOnly,
|
|
||||||
&__appearance--monthOnly {
|
|
||||||
.react-datepicker {
|
|
||||||
&__month-container {
|
&__month-container {
|
||||||
border-right: none;
|
border-right: 1px solid var(--theme-elevation-150);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include small-break {
|
&__time,
|
||||||
.react-datepicker {
|
&__time-container,
|
||||||
flex-direction: column;
|
.react-datepicker__time-container .react-datepicker__time {
|
||||||
}
|
background: none;
|
||||||
.react-datepicker__month-container {
|
}
|
||||||
border-right: 0;
|
|
||||||
}
|
&__time-container {
|
||||||
.react-datepicker__time-container {
|
border-left: none;
|
||||||
width: auto;
|
}
|
||||||
}
|
|
||||||
.react-datepicker__header--time {
|
&__month-text {
|
||||||
background-color: var(--theme-elevation-100);
|
padding: base(0.3);
|
||||||
padding: 8px 0;
|
margin: base(0.15);
|
||||||
border-bottom: none;
|
font-size: base(0.55);
|
||||||
}
|
&:hover {
|
||||||
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
|
background: var(--theme-elevation-100);
|
||||||
height: 120px;
|
}
|
||||||
width: unset;
|
}
|
||||||
> ul {
|
|
||||||
height: 120px;
|
&__month-select,
|
||||||
|
&__year-select {
|
||||||
|
min-width: 70px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
option {
|
||||||
|
background-color: var(--theme-elevation-50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__day-names {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__day {
|
||||||
|
box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
|
||||||
|
font-size: base(0.55);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
background: var(--theme-elevation-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
&--selected {
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--theme-elevation-150);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--keyboard-selected {
|
||||||
|
color: var(--theme-elevation-0);
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--theme-elevation-150);
|
||||||
|
box-shadow:
|
||||||
|
inset 0px 0px 0px 1px var(--theme-elevation-800),
|
||||||
|
0px 0px 0px 1px var(--theme-elevation-800);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--today {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__day,
|
||||||
|
&__day-name {
|
||||||
|
width: base(1.5);
|
||||||
|
margin: base(0.15);
|
||||||
|
line-height: base(1.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper {
|
||||||
|
z-index: 10;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-container
|
||||||
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box
|
||||||
|
ul.react-datepicker__time-list {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day--keyboard-selected,
|
||||||
|
.react-datepicker__month-text--keyboard-selected,
|
||||||
|
.react-datepicker__time-container
|
||||||
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box
|
||||||
|
ul.react-datepicker__time-list
|
||||||
|
li.react-datepicker__time-list-item--selected {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: var(--theme-elevation-150);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-container
|
||||||
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box
|
||||||
|
ul.react-datepicker__time-list
|
||||||
|
li.react-datepicker__time-list-item--selected,
|
||||||
|
.react-datepicker__day--selected,
|
||||||
|
.react-datepicker__day--in-selecting-range,
|
||||||
|
.react-datepicker__day--in-range,
|
||||||
|
.react-datepicker__month-text--selected,
|
||||||
|
.react-datepicker__month-text--in-selecting-range,
|
||||||
|
.react-datepicker__month-text--in-range {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: var(--theme-elevation-150);
|
||||||
|
color: var(--theme-elevation-800);
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-container
|
||||||
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box
|
||||||
|
ul.react-datepicker__time-list
|
||||||
|
li.react-datepicker__time-list-item:hover {
|
||||||
|
background: var(--theme-elevation-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__day:hover,
|
||||||
|
.react-datepicker__month-text:hover {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.react-datepicker__navigation--next--with-time:not(
|
.react-datepicker__navigation--next--with-time:not(
|
||||||
.react-datepicker__navigation--next--with-today-button
|
.react-datepicker__navigation--next--with-today-button
|
||||||
) {
|
) {
|
||||||
right: 0px;
|
right: 130px;
|
||||||
}
|
}
|
||||||
&__input-wrapper {
|
|
||||||
.icon {
|
.react-datepicker__time-container
|
||||||
top: calc(50% - #{base(0.25)});
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box
|
||||||
|
ul.react-datepicker__time-list
|
||||||
|
li.react-datepicker__time-list-item {
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: base(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__appearance--dayOnly,
|
||||||
|
&__appearance--monthOnly {
|
||||||
|
.react-datepicker {
|
||||||
|
&__month-container {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include small-break {
|
||||||
|
.react-datepicker {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.react-datepicker__month-container {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
.react-datepicker__time-container {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.react-datepicker__header--time {
|
||||||
|
background-color: var(--theme-elevation-100);
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
|
||||||
|
height: 120px;
|
||||||
|
width: unset;
|
||||||
|
> ul {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.react-datepicker__navigation--next--with-time:not(
|
||||||
|
.react-datepicker__navigation--next--with-today-button
|
||||||
|
) {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
&__input-wrapper {
|
||||||
|
.icon {
|
||||||
|
top: calc(50% - #{base(0.25)});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +1,44 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.delete-document {
|
@layer payload-default {
|
||||||
@include blur-bg;
|
.delete-document {
|
||||||
display: flex;
|
@include blur-bg;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&__toggle {
|
|
||||||
@extend %btn-reset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: base(0.8);
|
justify-content: center;
|
||||||
padding: base(2);
|
height: 100%;
|
||||||
max-width: base(36);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
&__toggle {
|
||||||
display: flex;
|
@extend %btn-reset;
|
||||||
flex-direction: column;
|
|
||||||
gap: base(0.4);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
&__wrapper {
|
||||||
display: flex;
|
z-index: 1;
|
||||||
gap: base(0.4);
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: base(0.8);
|
||||||
|
padding: base(2);
|
||||||
|
max-width: base(36);
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
&__content {
|
||||||
margin: 0;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,38 +1,40 @@
|
|||||||
@import '../../scss/styles.scss';
|
@import '../../scss/styles.scss';
|
||||||
|
|
||||||
.delete-documents {
|
@layer payload-default {
|
||||||
@include blur-bg;
|
.delete-documents {
|
||||||
display: flex;
|
@include blur-bg;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: base(0.8);
|
justify-content: center;
|
||||||
padding: base(2);
|
height: 100%;
|
||||||
max-width: base(36);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
&__wrapper {
|
||||||
display: flex;
|
z-index: 1;
|
||||||
flex-direction: column;
|
position: relative;
|
||||||
gap: base(0.4);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
> * {
|
gap: base(0.8);
|
||||||
margin: 0;
|
padding: base(2);
|
||||||
|
max-width: base(36);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
&__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: base(0.4);
|
flex-direction: column;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
.btn {
|
> * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__controls {
|
||||||
|
display: flex;
|
||||||
|
gap: base(0.4);
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user