mirror of
https://github.com/penpot/penpot.git
synced 2026-04-25 11:18:36 +00:00
💄 Use deprecated prefix for deprecated scss vars and mixins (#7375)
This commit is contained in:
Belén Albeza
GitHub
parent
378be9473d
commit
a5e4de97e3
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -19,11 +19,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodyLargeTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@ -55,7 +55,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.cursor-grabbing {
|
||||
cursor: grabbing;
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-error);
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
color: var(--comment-subtitle-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-6;
|
||||
gap: deprecated.$s-6;
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
@ -39,14 +39,14 @@
|
||||
}
|
||||
|
||||
.location-text {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
|
||||
.author {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.author-identity {
|
||||
@ -54,56 +54,56 @@
|
||||
}
|
||||
|
||||
.author-fullname {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
color: var(--comment-title-color);
|
||||
}
|
||||
|
||||
.author-timeago {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
color: var(--comment-subtitle-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-circle;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.avatar-read {
|
||||
border: $s-2 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-2 solid var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.avatar-unread {
|
||||
border: $s-2 solid var(--color-accent-primary);
|
||||
border: deprecated.$s-2 solid var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.avatar-solved {
|
||||
border: $s-2 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-2 solid var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.avatar-mask {
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -116,17 +116,17 @@
|
||||
}
|
||||
|
||||
.cover {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
padding: $s-20;
|
||||
border-bottom: $s-1 solid var(--color-background-quaternary);
|
||||
gap: deprecated.$s-8;
|
||||
padding: deprecated.$s-20;
|
||||
border-bottom: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.item {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-primary);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
@ -135,9 +135,9 @@
|
||||
}
|
||||
|
||||
.replies {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.replies-total {
|
||||
@ -148,12 +148,12 @@
|
||||
}
|
||||
|
||||
.floating-preview-wrapper {
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
transform: translate(calc(-1 * $s-16), calc(-1 * $s-16));
|
||||
transform: translate(calc(-1 * deprecated.$s-16), calc(-1 * deprecated.$s-16));
|
||||
}
|
||||
|
||||
.floating-preview-bubble {
|
||||
@ -164,7 +164,7 @@
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: $s-12;
|
||||
column-gap: deprecated.$s-12;
|
||||
|
||||
--translate-x: 0%;
|
||||
--translate-y: 0%;
|
||||
@ -184,31 +184,31 @@
|
||||
.floating-thread-draft-inner-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
width: $s-284;
|
||||
padding: $s-8 $s-12 $s-8 $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
width: deprecated.$s-284;
|
||||
padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12;
|
||||
pointer-events: auto;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
background-color: var(--comment-modal-background-color);
|
||||
max-height: var(--comment-height);
|
||||
}
|
||||
|
||||
.floating-preview-displacement {
|
||||
margin-left: calc(-1 * ($s-12 + $s-2));
|
||||
margin-top: calc(-1 * ($s-8 + $s-2));
|
||||
margin-left: calc(-1 * (deprecated.$s-12 + deprecated.$s-2));
|
||||
margin-top: calc(-1 * (deprecated.$s-8 + deprecated.$s-2));
|
||||
}
|
||||
|
||||
.floating-thread-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
width: $s-284;
|
||||
padding: $s-8 $s-12 $s-8 $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
width: deprecated.$s-284;
|
||||
padding: deprecated.$s-8 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12;
|
||||
pointer-events: auto;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
background-color: var(--comment-modal-background-color);
|
||||
max-height: var(--comment-height);
|
||||
|
||||
@ -228,11 +228,11 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.floating-thread-header-left {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -244,9 +244,9 @@
|
||||
.floating-thread-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-16;
|
||||
padding-bottom: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.floating-thread-item-wrapper {
|
||||
@ -256,15 +256,15 @@
|
||||
.floating-thread-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
@include bodySmallTypography;
|
||||
gap: deprecated.$s-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
@include flexCenter;
|
||||
width: $s-16;
|
||||
height: $s-24;
|
||||
margin-right: $s-8;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-24;
|
||||
margin-right: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@ -275,8 +275,8 @@
|
||||
@extend .dropdown-wrapper;
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
max-width: $s-200;
|
||||
right: $s-32;
|
||||
max-width: deprecated.$s-200;
|
||||
right: deprecated.$s-32;
|
||||
top: 0;
|
||||
left: unset;
|
||||
}
|
||||
@ -288,16 +288,16 @@
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
max-height: calc(var(--comment-height) - $s-132);
|
||||
gap: deprecated.$s-8;
|
||||
max-height: calc(var(--comment-height) - deprecated.$s-132);
|
||||
}
|
||||
|
||||
.form-buttons-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
justify-content: flex-end;
|
||||
gap: $s-8;
|
||||
margin-top: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.open-mentions-button {
|
||||
@ -310,17 +310,17 @@
|
||||
|
||||
.comments-mentions-choice {
|
||||
background: var(--color-background-tertiary);
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: calc(-1 * $s-2);
|
||||
margin-top: $s-8;
|
||||
left: calc(-1 * deprecated.$s-2);
|
||||
margin-top: deprecated.$s-8;
|
||||
overflow: hidden;
|
||||
padding: $s-2;
|
||||
padding: deprecated.$s-2;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% + $s-4);
|
||||
width: calc(100% + deprecated.$s-4);
|
||||
}
|
||||
|
||||
.comments-mentions-entry {
|
||||
@ -329,12 +329,12 @@
|
||||
grid-template-areas:
|
||||
"avatar name"
|
||||
"avatar email";
|
||||
grid-template-columns: $s-32 1fr;
|
||||
column-gap: $s-8;
|
||||
margin: $s-4 $s-8;
|
||||
padding: 0 $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid transparent;
|
||||
grid-template-columns: deprecated.$s-32 1fr;
|
||||
column-gap: deprecated.$s-8;
|
||||
margin: deprecated.$s-4 deprecated.$s-8;
|
||||
padding: 0 deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-quaternary);
|
||||
@ -347,13 +347,13 @@
|
||||
|
||||
.comments-mentions-name {
|
||||
grid-area: name;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.comments-mentions-email {
|
||||
grid-area: email;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -364,23 +364,23 @@
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
white-space: pre-line;
|
||||
background: var(--input-background-color);
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
color: var(--input-foreground-color);
|
||||
height: $s-36;
|
||||
max-width: $s-260;
|
||||
height: deprecated.$s-36;
|
||||
max-width: deprecated.$s-260;
|
||||
overflow-y: auto;
|
||||
padding: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -402,7 +402,7 @@
|
||||
}
|
||||
|
||||
.comments-mentions-empty {
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--color-foreground-secondary);
|
||||
padding: $s-6 $s-8;
|
||||
padding: deprecated.$s-6 deprecated.$s-8;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.button {
|
||||
appearance: none;
|
||||
|
||||
@ -4,38 +4,38 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.color-bullet {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: var(--bullet-size, $s-24);
|
||||
height: var(--bullet-size, $s-24);
|
||||
min-width: var(--bullet-size, $s-24);
|
||||
min-height: var(--bullet-size, $s-24);
|
||||
border: $s-2 solid var(--color-bullet-border-color);
|
||||
border-radius: $br-circle;
|
||||
width: var(--bullet-size, deprecated.$s-24);
|
||||
height: var(--bullet-size, deprecated.$s-24);
|
||||
min-width: var(--bullet-size, deprecated.$s-24);
|
||||
min-height: var(--bullet-size, deprecated.$s-24);
|
||||
border: deprecated.$s-2 solid var(--color-bullet-border-color);
|
||||
border-radius: deprecated.$br-circle;
|
||||
&.grid-area {
|
||||
grid-area: color;
|
||||
}
|
||||
&.mini {
|
||||
width: var(--bullet-size, $s-16);
|
||||
height: var(--bullet-size, $s-16);
|
||||
min-width: var(--bullet-size, $s-16);
|
||||
min-height: var(--bullet-size, $s-16);
|
||||
width: var(--bullet-size, deprecated.$s-16);
|
||||
height: var(--bullet-size, deprecated.$s-16);
|
||||
min-width: var(--bullet-size, deprecated.$s-16);
|
||||
min-height: var(--bullet-size, deprecated.$s-16);
|
||||
margin-top: 0;
|
||||
border: 1px solid var(--color-bullet-border-color);
|
||||
}
|
||||
|
||||
&.is-not-library-color {
|
||||
overflow: hidden;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
&.mini {
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
}
|
||||
}
|
||||
&.is-gradient {
|
||||
@ -65,27 +65,27 @@
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
&:hover:not(.read-only) {
|
||||
border: $s-2 solid var(--color-bullet-border-color-selected);
|
||||
border: deprecated.$s-2 solid var(--color-bullet-border-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
@include twoLineTextEllipsis;
|
||||
@include bodySmallTypography;
|
||||
width: $s-80;
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: deprecated.$s-80;
|
||||
text-align: center;
|
||||
margin-top: $s-2;
|
||||
max-height: $s-28;
|
||||
margin-top: deprecated.$s-2;
|
||||
max-height: deprecated.$s-28;
|
||||
color: var(--palette-text-color);
|
||||
&.small-text {
|
||||
@include textEllipsis;
|
||||
max-height: $s-16;
|
||||
@include deprecated.textEllipsis;
|
||||
max-height: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.big-text {
|
||||
@include inspectValue;
|
||||
@include twoLineTextEllipsis;
|
||||
@include deprecated.inspectValue;
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
line-height: 1;
|
||||
color: var(--palette-text-color);
|
||||
text-align: center;
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.context-menu {
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
opacity: $op-0;
|
||||
z-index: $z-index-4;
|
||||
opacity: deprecated.$op-0;
|
||||
z-index: deprecated.$z-index-4;
|
||||
|
||||
&.is-open {
|
||||
position: relative;
|
||||
display: block;
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -24,39 +24,39 @@
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
@include menuShadow;
|
||||
@include deprecated.menuShadow;
|
||||
position: absolute;
|
||||
top: $s-12;
|
||||
left: calc(-1 * $s-6);
|
||||
max-height: $s-480;
|
||||
min-width: $s-96;
|
||||
margin: $s-0;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
top: deprecated.$s-12;
|
||||
left: calc(-1 * deprecated.$s-6);
|
||||
max-height: deprecated.$s-480;
|
||||
min-width: deprecated.$s-96;
|
||||
margin: deprecated.$s-0;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--panel-border-color);
|
||||
background-color: var(--menu-background-color);
|
||||
overflow: auto;
|
||||
|
||||
& .separator {
|
||||
border-top: solid $s-1 var(--color-background-quaternary);
|
||||
border-top: solid deprecated.$s-1 var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
&.min-width {
|
||||
min-width: $s-192;
|
||||
min-width: deprecated.$s-192;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
|
||||
.context-menu-action {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
white-space: nowrap;
|
||||
color: var(--menu-foreground-color);
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
&.submenu-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: $fw700;
|
||||
font-weight: deprecated.$fw700;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@ -141,7 +141,7 @@
|
||||
|
||||
.selected-icon {
|
||||
@extend .button-tag;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
@ -153,12 +153,12 @@
|
||||
}
|
||||
|
||||
.is-selected .context-menu-action {
|
||||
padding-left: $s-28;
|
||||
padding-left: deprecated.$s-28;
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: $s-12;
|
||||
font-weight: $fw700;
|
||||
background-size: deprecated.$s-12;
|
||||
font-weight: deprecated.$fw700;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,21 +4,21 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.copy-button {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
width: 100%;
|
||||
height: $s-32;
|
||||
border: $s-1 solid transparent;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
.icon-btn {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
min-width: $s-28;
|
||||
width: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -28,7 +28,7 @@
|
||||
&:hover {
|
||||
background-color: var(--color-background-tertiary);
|
||||
color: var(--color-foreground-primary);
|
||||
border: $s-1 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-1 solid var(--color-background-tertiary);
|
||||
.icon-btn {
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
@ -38,7 +38,7 @@
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--button-tertiary-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus);
|
||||
background-color: transparent;
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
.icon-btn svg {
|
||||
@ -48,19 +48,19 @@
|
||||
}
|
||||
|
||||
.copy-wrapper {
|
||||
@include buttonStyle;
|
||||
@include copyWrapperBase;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.copyWrapperBase;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
text-align: left;
|
||||
border: $s-1 solid transparent;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
.icon-btn {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--button-tertiary-foreground-color-focus);
|
||||
@ -70,7 +70,7 @@
|
||||
&:hover {
|
||||
background-color: var(--button-tertiary-background-color-focus);
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
border: $s-1 solid var(--button-tertiary-background-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-tertiary-background-color-focus);
|
||||
.icon-btn svg {
|
||||
display: flex;
|
||||
}
|
||||
@ -79,7 +79,7 @@
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--button-tertiary-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus);
|
||||
background-color: transparent;
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
}
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.editable-label-input {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-4;
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
padding-left: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-4;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
@ -29,8 +29,8 @@
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
width: deprecated.$s-12;
|
||||
stroke: var(--icon-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.editable-select {
|
||||
@extend .asset-element;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
cursor: pointer;
|
||||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
@ -29,10 +29,10 @@
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
max-height: $s-320;
|
||||
max-height: deprecated.$s-320;
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
visibility: hidden;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// INPUT
|
||||
.input-wrapper {
|
||||
@ -15,33 +15,33 @@
|
||||
position: relative;
|
||||
&.valid {
|
||||
input {
|
||||
border: $s-1 solid var(--input-border-color-success);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-success);
|
||||
@extend .disabled-input;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-success);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.invalid {
|
||||
input {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
@extend .disabled-input;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.valid .help-icon,
|
||||
&.invalid .help-icon {
|
||||
right: $s-40;
|
||||
right: deprecated.$s-40;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-label-form {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-8;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
@ -57,12 +57,12 @@
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $s-8;
|
||||
padding: 0 deprecated.$s-8;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
@ -82,27 +82,27 @@
|
||||
|
||||
.input-and-icon {
|
||||
position: relative;
|
||||
width: var(--input-width, calc(100% - $s-1));
|
||||
width: var(--input-width, calc(100% - deprecated.$s-1));
|
||||
min-width: var(--input-min-width);
|
||||
height: var(--input-height, $s-32);
|
||||
height: var(--input-height, deprecated.$s-32);
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: $s-16;
|
||||
top: calc(50% - $s-8);
|
||||
right: deprecated.$s-16;
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid-icon {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
background: var(--input-border-color-error);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
@ -110,28 +110,28 @@
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: var(--input-icon-padding);
|
||||
top: calc(50% - $s-8);
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
svg {
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
stroke: var(--input-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.valid-icon {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
background: var(--input-border-color-success);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: $s-16;
|
||||
top: calc(50% - $s-8);
|
||||
right: deprecated.$s-16;
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
svg {
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
fill: var(--input-border-color-success);
|
||||
stroke: var(--input-background-color);
|
||||
}
|
||||
@ -140,25 +140,25 @@
|
||||
.error {
|
||||
color: var(--input-border-color-error);
|
||||
width: 100%;
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
.hint {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: 99%;
|
||||
margin-block-start: $s-8;
|
||||
margin-block-start: deprecated.$s-8;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@extend .input-checkbox;
|
||||
.checkbox-label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
gap: $s-6;
|
||||
min-height: $s-32;
|
||||
gap: deprecated.$s-6;
|
||||
min-height: deprecated.$s-32;
|
||||
cursor: pointer;
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@ -181,23 +181,23 @@
|
||||
// SELECT
|
||||
.custom-select {
|
||||
@extend .select-wrapper;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
.input-container {
|
||||
@include flexRow;
|
||||
height: $s-32;
|
||||
@include deprecated.flexRow;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
.main-content {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
|
||||
.label {
|
||||
color: var(--input-foreground-color);
|
||||
@ -211,9 +211,9 @@
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-24;
|
||||
pointer-events: none;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -224,40 +224,40 @@
|
||||
|
||||
&.disabled {
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border: $s-1 solid var(--input-border-color-disabled);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
}
|
||||
&.focus {
|
||||
outline: none;
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@extend .menu-dropdown;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
height: auto;
|
||||
width: calc(100% - 1px);
|
||||
padding: 0 $s-12;
|
||||
padding: 0 deprecated.$s-12;
|
||||
margin: 0;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
z-index: $z-index-10;
|
||||
z-index: deprecated.$z-index-10;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
option {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
appearance: none;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -267,7 +267,7 @@
|
||||
@extend .button-primary;
|
||||
&:disabled {
|
||||
@extend .button-disabled;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
|
||||
@ -276,33 +276,33 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-height: $s-40;
|
||||
max-height: $s-180;
|
||||
min-height: deprecated.$s-40;
|
||||
max-height: deprecated.$s-180;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
.inside-input {
|
||||
@include removeInputStyle;
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.removeInputStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
width: 100%;
|
||||
max-width: calc(100% - $s-1);
|
||||
min-height: $s-32;
|
||||
max-width: calc(100% - deprecated.$s-1);
|
||||
min-height: deprecated.$s-32;
|
||||
padding-top: 0;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
}
|
||||
&.invalid {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -312,31 +312,31 @@
|
||||
.selected-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $s-4;
|
||||
max-height: $s-136;
|
||||
padding: $s-4 0;
|
||||
gap: deprecated.$s-4;
|
||||
max-height: deprecated.$s-136;
|
||||
padding: deprecated.$s-4 0;
|
||||
overflow-y: scroll;
|
||||
.selected-item {
|
||||
.around {
|
||||
@include flexRow;
|
||||
height: $s-24;
|
||||
@include deprecated.flexRow;
|
||||
height: deprecated.$s-24;
|
||||
width: fit-content;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-6;
|
||||
padding-left: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
background-color: var(--pill-background-color);
|
||||
border: $s-1 solid var(--pill-background-color);
|
||||
border: deprecated.$s-1 solid var(--pill-background-color);
|
||||
box-sizing: border-box;
|
||||
.text {
|
||||
@include bodySmallTypography;
|
||||
padding-right: $s-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
padding-right: deprecated.$s-8;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -360,31 +360,31 @@
|
||||
.custom-radio {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
@include bodySmallTypography;
|
||||
@include flexRow;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
align-items: flex-start;
|
||||
gap: $s-8;
|
||||
min-height: $s-32;
|
||||
gap: deprecated.$s-8;
|
||||
min-height: deprecated.$s-32;
|
||||
height: fit-content;
|
||||
border-radius: $br-8;
|
||||
padding: $s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
padding: deprecated.$s-8;
|
||||
color: var(--input-foreground-color-rest);
|
||||
border: $s-1 solid transparent;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.radio-dot {
|
||||
height: $s-8;
|
||||
width: $s-8;
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-8;
|
||||
width: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background-color: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
@ -395,16 +395,16 @@
|
||||
|
||||
.radio-icon {
|
||||
@extend .checkbox-icon;
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
}
|
||||
|
||||
.radio-label-image {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 0px;
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
cursor: pointer;
|
||||
@ -414,28 +414,28 @@
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
.image-text {
|
||||
color: var(--input-foreground-color-rest);
|
||||
display: grid;
|
||||
align-self: center;
|
||||
margin-bottom: $s-16;
|
||||
padding-inline: $s-8;
|
||||
margin-bottom: deprecated.$s-16;
|
||||
padding-inline: deprecated.$s-8;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.image-inside {
|
||||
margin: $s-16;
|
||||
margin: deprecated.$s-16;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.icon-inside {
|
||||
margin: $s-16;
|
||||
@include flexCenter;
|
||||
margin: deprecated.$s-16;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
@ -447,10 +447,10 @@
|
||||
//TEXTAREA
|
||||
|
||||
.textarea-label {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
|
||||
@ -4,27 +4,27 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.radio-btn-wrapper {
|
||||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
background-color: var(--input-background-color);
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
--radio-icon-border-color: var(--radio-btn-border-color);
|
||||
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusRadio;
|
||||
height: $s-32;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.focusRadio;
|
||||
height: deprecated.$s-32;
|
||||
flex-grow: 1;
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
box-sizing: border-box;
|
||||
border: $br-2 solid var(--radio-icon-border-color);
|
||||
border: deprecated.$br-2 solid var(--radio-icon-border-color);
|
||||
|
||||
input {
|
||||
display: none;
|
||||
@ -34,7 +34,7 @@
|
||||
stroke: var(--radio-btn-foreground-color);
|
||||
}
|
||||
.title-name {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--radio-btn-foreground-color);
|
||||
}
|
||||
&:hover {
|
||||
@ -59,7 +59,7 @@
|
||||
.disabled {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
border: $s-2 solid transparent;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
@ -68,7 +68,7 @@
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: $s-2 solid transparent;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
||||
@ -4,33 +4,33 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
gap: deprecated.$s-2;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--search-bar-background-color);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: $s-8;
|
||||
flex: 0 0 $s-16;
|
||||
margin-left: deprecated.$s-8;
|
||||
flex: 0 0 deprecated.$s-16;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border: $s-1 solid var(--search-bar-input-border-color);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-1 solid var(--search-bar-input-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--search-bar-input-background-color);
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-hover);
|
||||
background-color: var(--input-background-color-hover);
|
||||
.search-input {
|
||||
background-color: var(--input-background-color-hover);
|
||||
@ -40,7 +40,7 @@
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-active);
|
||||
color: var(--input-foreground-color-active);
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
.search-input {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
@ -50,12 +50,12 @@
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 $s-8 0 $s-4;
|
||||
margin: 0 deprecated.$s-8 0 deprecated.$s-4;
|
||||
border: 0;
|
||||
background-color: var(--input-background-color);
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
@ -63,12 +63,12 @@
|
||||
|
||||
.clear-icon {
|
||||
@extend .button-tag;
|
||||
flex: 0 0 $s-32;
|
||||
flex: 0 0 deprecated.$s-32;
|
||||
height: 100%;
|
||||
color: var(--color-icon-default);
|
||||
}
|
||||
|
||||
.search-box.has-children .search-input-wrapper {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.custom-select {
|
||||
--border-color: var(--menu-background-color);
|
||||
@ -12,18 +12,18 @@
|
||||
--icon-color: var(--icon-foreground);
|
||||
--text-color: var(--menu-foreground-color);
|
||||
@extend .new-scrollbar;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--bg-color);
|
||||
border: $s-1 solid var(--border-color);
|
||||
border: deprecated.$s-1 solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
margin-inline-end: var(--sp-xxs);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -63,9 +63,9 @@
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -76,23 +76,23 @@
|
||||
@extend .dropdown-wrapper;
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-block-start: $s-1 solid var(--dropdown-separator-color);
|
||||
height: deprecated.$s-12;
|
||||
border-block-start: deprecated.$s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown[data-direction="up"] {
|
||||
bottom: $s-32;
|
||||
bottom: deprecated.$s-32;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.checked-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
padding-right: $s-4;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
visibility: hidden;
|
||||
@ -126,5 +126,5 @@
|
||||
}
|
||||
|
||||
.current-label {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.tab-container {
|
||||
display: grid;
|
||||
grid-template-rows: $s-32 1fr;
|
||||
grid-template-rows: deprecated.$s-32 1fr;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: $s-2;
|
||||
border-radius: $br-8;
|
||||
gap: deprecated.$s-2;
|
||||
border-radius: deprecated.$br-8;
|
||||
background: var(--tabs-background-color);
|
||||
cursor: pointer;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -31,15 +31,15 @@
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 $s-8;
|
||||
padding: 0 deprecated.$s-8;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: transparent;
|
||||
color: var(--tab-foreground-color);
|
||||
border: $s-2 solid var(--tab-border-color);
|
||||
border: deprecated.$s-2 solid var(--tab-border-color);
|
||||
min-width: 0;
|
||||
|
||||
svg {
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
@include headlineSmallTypography;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -76,18 +76,18 @@
|
||||
}
|
||||
|
||||
.collapse-sidebar {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
min-width: $s-24;
|
||||
padding: 0 $s-6;
|
||||
border-radius: $br-5;
|
||||
width: deprecated.$s-24;
|
||||
min-width: deprecated.$s-24;
|
||||
padding: 0 deprecated.$s-6;
|
||||
border-radius: deprecated.$br-5;
|
||||
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(180deg);
|
||||
fill: none;
|
||||
@ -103,7 +103,7 @@
|
||||
&.collapsed {
|
||||
svg {
|
||||
transform: rotate(0deg);
|
||||
padding: 0 0 0 $s-6;
|
||||
padding: 0 0 0 deprecated.$s-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -118,6 +118,6 @@
|
||||
//Firefox doesn't respect scrollbar-gutter
|
||||
@supports (-moz-appearance: none) {
|
||||
.tab-container-content {
|
||||
padding-right: $s-8;
|
||||
padding-right: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
--arrow-icon-color: var(--icon-foreground);
|
||||
--title-color: var(--title-foreground-color);
|
||||
}
|
||||
@ -26,7 +26,7 @@
|
||||
justify-content: flex-start;
|
||||
grid-auto-flow: column;
|
||||
height: 100%;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -37,13 +37,13 @@
|
||||
|
||||
.title-only {
|
||||
@include t.use-typography("headline-small");
|
||||
--title-bar-title-margin: #{$s-8};
|
||||
--title-bar-title-margin: #{deprecated.$s-8};
|
||||
color: var(--title-color);
|
||||
margin-inline-start: var(--title-bar-title-margin);
|
||||
}
|
||||
|
||||
.title-only-icon-gap {
|
||||
--title-bar-title-margin: #{$s-12};
|
||||
--title-bar-title-margin: #{deprecated.$s-12};
|
||||
}
|
||||
|
||||
.inspect-title {
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.icon-text-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
@ -77,8 +77,8 @@
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
&:hover {
|
||||
--arrow-icon-color: var(--icon-foreground-hover);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -18,11 +18,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -31,25 +31,25 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodyLargeTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-item-element {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
}
|
||||
|
||||
.modal-component-icon {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--color);
|
||||
}
|
||||
}
|
||||
.modal-component-name {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@ -70,6 +70,6 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -4,23 +4,23 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard {
|
||||
@extend .new-scrollbar;
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
grid-template-rows: $s-52 1fr;
|
||||
grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
|
||||
grid-template-rows: deprecated.$s-52 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: grid;
|
||||
grid-template-rows: $s-64 1fr;
|
||||
grid-template-rows: deprecated.$s-64 1fr;
|
||||
position: relative;
|
||||
grid-row: 1 / span 2;
|
||||
padding: $s-16 $s-16 0 0;
|
||||
padding: deprecated.$s-16 deprecated.$s-16 0 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -15,11 +15,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -28,13 +28,13 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend .input-with-label;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
||||
@ -4,28 +4,28 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
|
||||
$thumbnail-default-width: $s-252; // Default width
|
||||
$thumbnail-default-height: $s-168; // Default width
|
||||
$thumbnail-default-width: deprecated.$s-252; // Default width
|
||||
$thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
|
||||
.dashboard-grid {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0 $s-16;
|
||||
padding: 0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: calc($s-12 + var(--th-width, #{$thumbnail-default-width}));
|
||||
grid-auto-columns: calc(deprecated.$s-12 + var(--th-width, #{$thumbnail-default-width}));
|
||||
width: 100%;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
@ -33,23 +33,23 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: $s-12 0;
|
||||
margin: deprecated.$s-12 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
a,
|
||||
button {
|
||||
width: 100%;
|
||||
font-weight: $fw400;
|
||||
font-weight: deprecated.$fw400;
|
||||
}
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0 $s-6;
|
||||
padding: 0 deprecated.$s-6;
|
||||
}
|
||||
|
||||
.grid-item-th {
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
text-align: initial;
|
||||
width: var(--th-width, #{$thumbnail-default-width});
|
||||
height: var(--th-height, #{$thumbnail-default-height});
|
||||
@ -62,22 +62,22 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
}
|
||||
|
||||
&.dragged {
|
||||
border-radius: $br-4;
|
||||
outline: $br-4 solid var(--color-accent-primary);
|
||||
border-radius: deprecated.$br-4;
|
||||
outline: deprecated.$br-4 solid var(--color-accent-primary);
|
||||
text-align: initial;
|
||||
width: calc(var(--th-width) + $s-12);
|
||||
width: calc(var(--th-width) + deprecated.$s-12);
|
||||
height: var(--th-height, #{$thumbnail-default-height});
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid var(--color-accent-tertiary);
|
||||
border-radius: deprecated.$br-4;
|
||||
border: deprecated.$s-2 solid var(--color-accent-tertiary);
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
@ -94,28 +94,28 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
.item-info {
|
||||
display: grid;
|
||||
padding: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
|
||||
h3 {
|
||||
border: $s-1 solid transparent;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-16;
|
||||
font-weight: $fw400;
|
||||
height: $s-28;
|
||||
font-size: deprecated.$fs-16;
|
||||
font-weight: deprecated.$fw400;
|
||||
height: deprecated.$s-28;
|
||||
line-height: 1.92;
|
||||
max-width: $s-260;
|
||||
max-width: deprecated.$s-260;
|
||||
overflow: hidden;
|
||||
padding-right: $s-8;
|
||||
padding-right: deprecated.$s-8;
|
||||
padding: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
@media #{$bp-max-1366} {
|
||||
max-width: $s-232;
|
||||
max-width: deprecated.$s-232;
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,12 +125,12 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
max-width: $s-260;
|
||||
max-width: deprecated.$s-260;
|
||||
&::first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@media #{$bp-max-1366} {
|
||||
max-width: $s-232;
|
||||
max-width: deprecated.$s-232;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -138,12 +138,12 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
.item-badge {
|
||||
background-color: var(--color-accent-primary);
|
||||
border: none;
|
||||
border-radius: $br-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
position: absolute;
|
||||
top: $s-12;
|
||||
right: $s-12;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
top: deprecated.$s-12;
|
||||
right: deprecated.$s-12;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -151,38 +151,38 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
svg {
|
||||
stroke: var(--color-background-secondary);
|
||||
fill: none;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
&.add-file {
|
||||
border: $s-1 dashed var(--color-foreground-secondary);
|
||||
border: deprecated.$s-1 dashed var(--color-foreground-secondary);
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
|
||||
span {
|
||||
color: var(--color-background-primary);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-foreground-primary);
|
||||
border: $s-2 solid var(--color-accent-tertiary);
|
||||
border: deprecated.$s-2 solid var(--color-accent-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drag-counter {
|
||||
position: absolute;
|
||||
top: $s-4;
|
||||
left: $s-4;
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
top: deprecated.$s-4;
|
||||
left: deprecated.$s-4;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
background-color: var(--color-accent-tertiary);
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
color: var(--color-background-secondary);
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -191,8 +191,8 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
.project-th {
|
||||
background-color: transparent;
|
||||
border-radius: $br-8;
|
||||
padding-top: $s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
padding-top: deprecated.$s-6;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -208,7 +208,7 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
.selected {
|
||||
.grid-item-th {
|
||||
outline: $s-4 solid var(--color-accent-tertiary);
|
||||
outline: deprecated.$s-4 solid var(--color-accent-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -219,8 +219,8 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
right: $s-6;
|
||||
width: $s-32;
|
||||
right: deprecated.$s-6;
|
||||
width: deprecated.$s-32;
|
||||
|
||||
span {
|
||||
color: var(--color-background-secondary);
|
||||
@ -230,7 +230,7 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
.project-th-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: $s-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -238,10 +238,10 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
justify-content: center;
|
||||
margin-right: 0;
|
||||
margin-top: $s-20;
|
||||
margin-top: deprecated.$s-20;
|
||||
width: 100%;
|
||||
--menu-icon-color: var(--button-tertiary-foreground-color-rest);
|
||||
|
||||
@ -255,8 +255,8 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
stroke: var(--menu-icon-color);
|
||||
fill: none;
|
||||
margin-right: 0;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.project-th-actions.force-display {
|
||||
@ -264,7 +264,7 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
}
|
||||
|
||||
.grid-item-th {
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@ -282,11 +282,11 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
// LIBRARY VIEW
|
||||
.library {
|
||||
height: $s-580;
|
||||
height: deprecated.$s-580;
|
||||
}
|
||||
|
||||
.grid-item.project-th.library {
|
||||
height: $s-612;
|
||||
height: deprecated.$s-612;
|
||||
}
|
||||
|
||||
.grid-item-th.library {
|
||||
@ -294,21 +294,21 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
flex-direction: column;
|
||||
height: 90%;
|
||||
justify-content: flex-start;
|
||||
max-height: $s-580;
|
||||
padding: $s-32;
|
||||
max-height: deprecated.$s-580;
|
||||
padding: deprecated.$s-32;
|
||||
|
||||
.asset-section {
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
display: flex;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
text-transform: uppercase;
|
||||
|
||||
.num-assets {
|
||||
@ -318,18 +318,18 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
.asset-list-item {
|
||||
align-items: center;
|
||||
border-radius: $br-4;
|
||||
border: $s-1 solid transparent;
|
||||
border-radius: deprecated.$br-4;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
color: var(--color-foreground-primary);
|
||||
display: flex;
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-4;
|
||||
padding: $s-2;
|
||||
font-size: deprecated.$fs-12;
|
||||
margin-top: deprecated.$s-4;
|
||||
padding: deprecated.$s-2;
|
||||
position: relative;
|
||||
|
||||
.name-block {
|
||||
color: var(--color-foreground-secondary);
|
||||
width: calc(100% - $s-24 - $s-8);
|
||||
width: calc(100% - deprecated.$s-24 - deprecated.$s-8);
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@ -341,11 +341,11 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
svg {
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
margin-right: $s-8;
|
||||
width: $s-24;
|
||||
border-radius: deprecated.$br-4;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
height: deprecated.$s-24;
|
||||
margin-right: deprecated.$s-8;
|
||||
width: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.color-name {
|
||||
@ -354,14 +354,14 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
|
||||
.color-value {
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-left: $s-4;
|
||||
margin-left: deprecated.$s-4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.typography-sample {
|
||||
height: $s-20;
|
||||
margin-right: $s-4;
|
||||
width: $s-20;
|
||||
height: deprecated.$s-20;
|
||||
margin-right: deprecated.$s-4;
|
||||
width: deprecated.$s-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -369,7 +369,7 @@ $thumbnail-default-height: $s-168; // Default width
|
||||
.color-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.grid-loader {
|
||||
|
||||
50
frontend/src/app/main/ui/dashboard/import.scss
vendored
50
frontend/src/app/main/ui/dashboard/import.scss
vendored
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -17,11 +17,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -30,14 +30,14 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-16;
|
||||
margin-bottom: $s-24;
|
||||
gap: deprecated.$s-16;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -66,11 +66,11 @@
|
||||
.file-entry {
|
||||
display: flex;
|
||||
.file-name {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
.file-icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -81,19 +81,19 @@
|
||||
}
|
||||
.file-name-edit {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.file-name-label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
flex-grow: 1;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -101,11 +101,11 @@
|
||||
}
|
||||
}
|
||||
.edit-entry-buttons {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
width: $s-28;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-32;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -117,19 +117,19 @@
|
||||
.progress-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.linked-library {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
.linked-library-tag {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -15,11 +15,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -28,20 +28,20 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.team-form {
|
||||
min-width: $s-400;
|
||||
min-width: deprecated.$s-400;
|
||||
}
|
||||
|
||||
.group-name-input {
|
||||
@extend .input-element-label;
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
@ -49,7 +49,7 @@
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -18,11 +18,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -31,12 +31,12 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.element-list {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// PROGRESS WIDGET
|
||||
.export-progress-widget {
|
||||
@include flexCenter;
|
||||
width: $s-28;
|
||||
height: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
}
|
||||
|
||||
// PROGRESS MODAL
|
||||
@ -20,19 +20,19 @@
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-default);
|
||||
--export-modal-border-color: var(--alert-border-color-default);
|
||||
position: absolute;
|
||||
right: $s-16;
|
||||
top: $s-48;
|
||||
right: deprecated.$s-16;
|
||||
top: deprecated.$s-48;
|
||||
display: grid;
|
||||
grid-template-columns: $s-24 1fr $s-24;
|
||||
grid-template-columns: deprecated.$s-24 1fr deprecated.$s-24;
|
||||
grid-template-areas:
|
||||
"icon text close"
|
||||
"bar bar bar";
|
||||
gap: $s-4 $s-8;
|
||||
padding-block-start: $s-8;
|
||||
gap: deprecated.$s-4 deprecated.$s-8;
|
||||
padding-block-start: deprecated.$s-8;
|
||||
background-color: var(--export-modal-bg-color);
|
||||
border: $s-1 solid var(--export-modal-border-color);
|
||||
border-radius: $br-8;
|
||||
z-index: $z-index-modal;
|
||||
border: deprecated.$s-1 solid var(--export-modal-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
z-index: deprecated.$z-index-modal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -42,23 +42,23 @@
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-error);
|
||||
--export-modal-border-color: var(--alert-border-color-error);
|
||||
grid-template-areas: "icon text close";
|
||||
gap: $s-8;
|
||||
padding-block: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
padding-block: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
margin-inline-start: $s-8;
|
||||
margin-inline-start: deprecated.$s-8;
|
||||
stroke: var(--export-modal-icon-color);
|
||||
}
|
||||
|
||||
.export-progress-title {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
grid-area: text;
|
||||
align-self: center;
|
||||
padding: 0;
|
||||
@ -67,16 +67,16 @@
|
||||
}
|
||||
|
||||
.progress {
|
||||
@include bodyMediumTypography;
|
||||
padding-left: $s-8;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
@include buttonStyle;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: inline;
|
||||
text-align: left;
|
||||
color: var(--modal-link-foreground-color);
|
||||
@ -85,9 +85,9 @@
|
||||
}
|
||||
|
||||
.progress-close-button {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
padding: 0;
|
||||
margin-inline-end: $s-8;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@ -110,15 +110,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
max-height: calc(10 * $s-80);
|
||||
max-height: calc(10 * deprecated.$s-80);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -128,32 +128,32 @@
|
||||
|
||||
.modal-content,
|
||||
.no-selection {
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
.modal-link {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--modal-link-foreground-color);
|
||||
}
|
||||
.selection-header {
|
||||
@include flexRow;
|
||||
height: $s-32;
|
||||
margin-bottom: $s-4;
|
||||
@include deprecated.flexRow;
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
.selection-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
@extend .input-checkbox;
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
margin-left: $s-16;
|
||||
margin-left: deprecated.$s-16;
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
}
|
||||
}
|
||||
.selection-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
@ -177,67 +177,67 @@
|
||||
}
|
||||
}
|
||||
.selection-list {
|
||||
@include flexColumn;
|
||||
max-height: $s-400;
|
||||
@include deprecated.flexColumn;
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-12;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
.selection-row {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: $s-40;
|
||||
border-radius: $br-8;
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
.selection-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
gap: $s-8;
|
||||
padding: 0 $s-16;
|
||||
gap: deprecated.$s-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
.checkobox-tick {
|
||||
@extend .checkbox-icon;
|
||||
}
|
||||
}
|
||||
.selection-name {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: start;
|
||||
}
|
||||
.selection-scale {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
min-width: $s-108;
|
||||
padding: $s-12;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
.selection-extension {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
min-width: $s-72;
|
||||
padding: $s-12;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
.image-wrapper {
|
||||
@include flexCenter;
|
||||
min-height: $s-32;
|
||||
min-width: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
background-color: var(--app-white);
|
||||
border-radius: $br-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
margin: auto 0;
|
||||
img,
|
||||
svg {
|
||||
object-fit: contain;
|
||||
max-height: $s-40;
|
||||
max-height: deprecated.$s-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -260,7 +260,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -271,27 +271,27 @@
|
||||
label {
|
||||
align-items: flex-start;
|
||||
.modal-subtitle {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-top: $s-8;
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
|
||||
.option-content {
|
||||
@include flexColumn;
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
}
|
||||
|
||||
.file-entry {
|
||||
.file-name {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
.file-icon {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -299,8 +299,8 @@
|
||||
}
|
||||
}
|
||||
.file-name-label {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
}
|
||||
&.loading {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// EXPORT MODAL
|
||||
.modal-overlay {
|
||||
@ -16,15 +16,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
max-height: calc(10 * $s-80);
|
||||
max-height: calc(10 * deprecated.$s-80);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -33,32 +33,32 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
.modal-link {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--modal-link-foreground-color);
|
||||
}
|
||||
.selection-header {
|
||||
@include flexRow;
|
||||
height: $s-32;
|
||||
margin-bottom: $s-4;
|
||||
@include deprecated.flexRow;
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
.selection-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
@extend .input-checkbox;
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
margin-left: $s-16;
|
||||
margin-left: deprecated.$s-16;
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
}
|
||||
}
|
||||
.selection-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
@ -82,67 +82,67 @@
|
||||
}
|
||||
}
|
||||
.selection-list {
|
||||
@include flexColumn;
|
||||
max-height: $s-400;
|
||||
@include deprecated.flexColumn;
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-12;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
.selection-row {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: $s-40;
|
||||
border-radius: $br-8;
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
.selection-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
gap: $s-8;
|
||||
padding: 0 $s-16;
|
||||
gap: deprecated.$s-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
.checkobox-tick {
|
||||
@extend .checkbox-icon;
|
||||
}
|
||||
}
|
||||
.selection-name {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: start;
|
||||
}
|
||||
.selection-scale {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
min-width: $s-108;
|
||||
padding: $s-12;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
.selection-extension {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
min-width: $s-72;
|
||||
padding: $s-12;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
.image-wrapper {
|
||||
@include flexCenter;
|
||||
min-height: $s-32;
|
||||
min-width: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
background-color: var(--app-white);
|
||||
border-radius: $br-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
margin: auto 0;
|
||||
img,
|
||||
svg {
|
||||
object-fit: contain;
|
||||
max-height: $s-40;
|
||||
max-height: deprecated.$s-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -165,7 +165,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -176,29 +176,29 @@
|
||||
label {
|
||||
align-items: flex-start;
|
||||
.modal-subtitle {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-top: $s-8;
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
|
||||
.option-content {
|
||||
@include flexColumn;
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
}
|
||||
|
||||
.file-entry {
|
||||
.file-name {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
|
||||
.file-icon {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -206,8 +206,8 @@
|
||||
}
|
||||
}
|
||||
.file-name-label {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
}
|
||||
&.loading {
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-annotation {
|
||||
@ -15,10 +15,10 @@
|
||||
}
|
||||
|
||||
.annotation-content {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--entry-foreground-color);
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-blur {
|
||||
@ -23,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,67 +4,67 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-image-as-color-row {
|
||||
max-width: $s-240;
|
||||
max-width: deprecated.$s-240;
|
||||
}
|
||||
|
||||
.attributes-color-row {
|
||||
display: grid;
|
||||
grid-template-columns: $s-16 $s-72 $s-144;
|
||||
gap: $s-4;
|
||||
grid-template-columns: deprecated.$s-16 deprecated.$s-72 deprecated.$s-144;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.bullet-wrapper {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.format-wrapper {
|
||||
width: $s-72;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-72;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.image-format {
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 0;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8 0;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
|
||||
.select-format-wrapper {
|
||||
width: 100%;
|
||||
padding: $s-8 $s-2;
|
||||
padding: deprecated.$s-8 deprecated.$s-2;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
|
||||
.format-info {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: $s-2;
|
||||
font-size: $fs-12;
|
||||
padding-left: deprecated.$s-2;
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
}
|
||||
|
||||
.color-row-copy-btn {
|
||||
max-width: $s-144;
|
||||
max-width: deprecated.$s-144;
|
||||
}
|
||||
|
||||
.color-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
flex-grow: 1;
|
||||
max-width: $s-144;
|
||||
max-width: deprecated.$s-144;
|
||||
button {
|
||||
visibility: hidden;
|
||||
min-width: $s-28;
|
||||
min-width: deprecated.$s-28;
|
||||
}
|
||||
&:hover button {
|
||||
visibility: visible;
|
||||
@ -72,32 +72,32 @@
|
||||
}
|
||||
|
||||
.one-line {
|
||||
max-height: $s-32;
|
||||
max-height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.two-line {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.color-name-wrapper {
|
||||
@include bodySmallTypography;
|
||||
@include flexColumn;
|
||||
padding: $s-8 $s-4 $s-8 $s-8;
|
||||
height: $s-32;
|
||||
max-width: $s-80;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
padding: deprecated.$s-8 deprecated.$s-4 deprecated.$s-8 deprecated.$s-8;
|
||||
height: deprecated.$s-32;
|
||||
max-width: deprecated.$s-80;
|
||||
}
|
||||
|
||||
.opacity-info {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--menu-foreground-color);
|
||||
padding: $s-8 0;
|
||||
padding: deprecated.$s-8 0;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-28;
|
||||
grid-template-columns: 1fr deprecated.$s-28;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
@ -107,14 +107,14 @@
|
||||
.name-opacity {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
line-height: $s-16;
|
||||
line-height: deprecated.$s-16;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.color-value-wrapper {
|
||||
@include textEllipsis;
|
||||
@include inspectValue;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.inspectValue;
|
||||
text-transform: uppercase;
|
||||
&.gradient-name {
|
||||
text-transform: none;
|
||||
@ -122,14 +122,14 @@
|
||||
}
|
||||
|
||||
.opacity-info {
|
||||
@include inspectValue;
|
||||
@include deprecated.inspectValue;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
min-height: $s-16;
|
||||
padding-right: $s-8;
|
||||
min-height: deprecated.$s-16;
|
||||
padding-right: deprecated.$s-8;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
.color-name-library {
|
||||
@include inspectValue;
|
||||
@include deprecated.inspectValue;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
word-break: break-word;
|
||||
}
|
||||
@ -148,22 +148,22 @@
|
||||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin-top: $s-4;
|
||||
margin-top: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
background-color: var(--menu-background-color);
|
||||
position: relative;
|
||||
@include flexCenter;
|
||||
width: $s-240;
|
||||
height: $s-160;
|
||||
max-height: $s-160;
|
||||
max-width: $s-248;
|
||||
margin: $s-8 0;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-240;
|
||||
height: deprecated.$s-160;
|
||||
max-height: deprecated.$s-160;
|
||||
max-width: deprecated.$s-248;
|
||||
margin: deprecated.$s-8 0;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-fill {
|
||||
@ -16,5 +16,5 @@
|
||||
|
||||
.attributes-content {
|
||||
display: grid;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-geometry {
|
||||
@ -23,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-layout {
|
||||
@ -23,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-layout-element {
|
||||
@ -23,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-shadow {
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-stroke {
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.attributes-stroke-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.stroke-row {
|
||||
@ -28,5 +28,5 @@
|
||||
|
||||
.attributes-content {
|
||||
display: grid;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-svg {
|
||||
@ -23,12 +23,12 @@
|
||||
}
|
||||
|
||||
.attributes-subtitle {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
span {
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-text {
|
||||
@ -15,13 +15,13 @@
|
||||
}
|
||||
|
||||
.attributes-content {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.text-row {
|
||||
@extend .attr-row;
|
||||
height: unset;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
:global(.attr-value) {
|
||||
align-items: center;
|
||||
}
|
||||
@ -32,20 +32,20 @@
|
||||
}
|
||||
|
||||
.attributes-content-row {
|
||||
max-width: $s-240;
|
||||
min-height: calc($s-2 + $s-32);
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: $s-4;
|
||||
max-width: deprecated.$s-240;
|
||||
min-height: calc(deprecated.$s-2 + deprecated.$s-32);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: deprecated.$s-4;
|
||||
.content {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: 100%;
|
||||
padding: $s-4 0;
|
||||
padding: deprecated.$s-4 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-1 solid var(--color-background-tertiary);
|
||||
background-color: var(--menu-background-color);
|
||||
.content {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-variant {
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-spacing-visibility {
|
||||
@ -23,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-width: $s-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@ -4,42 +4,42 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.element-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - #{$s-160}); // TODO: Fix this hardcoded value
|
||||
height: calc(100vh - #{deprecated.$s-160}); // TODO: Fix this hardcoded value
|
||||
overflow: hidden;
|
||||
padding-bottom: $s-16;
|
||||
padding-bottom: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.viewer-code-block {
|
||||
height: calc(100vh - #{$s-108}); // TODO: Fix this hardcoded value
|
||||
height: calc(100vh - #{deprecated.$s-108}); // TODO: Fix this hardcoded value
|
||||
}
|
||||
|
||||
.download-button {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin: $s-8 0;
|
||||
margin: deprecated.$s-8 0;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
@include codeTypography;
|
||||
@include deprecated.codeTypography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: 0 $s-4 $s-8 0;
|
||||
padding: 0 deprecated.$s-4 deprecated.$s-8 0;
|
||||
|
||||
pre {
|
||||
border-radius: $br-8;
|
||||
padding: $s-16;
|
||||
border-radius: deprecated.$br-8;
|
||||
padding: deprecated.$s-16;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
@ -56,13 +56,13 @@
|
||||
|
||||
.code-row-lang {
|
||||
display: grid;
|
||||
grid-template-columns: $s-12 1fr $s-60;
|
||||
gap: $s-4;
|
||||
grid-template-columns: deprecated.$s-12 1fr deprecated.$s-60;
|
||||
gap: deprecated.$s-4;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -70,15 +70,15 @@
|
||||
.action-btns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.expand-button,
|
||||
.css-copy-btn,
|
||||
.html-copy-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -86,20 +86,20 @@
|
||||
}
|
||||
|
||||
.code-lang-options {
|
||||
max-width: $s-108;
|
||||
max-width: deprecated.$s-108;
|
||||
}
|
||||
.code-lang-select {
|
||||
@include uppercaseTitleTipography;
|
||||
width: $s-72;
|
||||
border: $s-1 solid transparent;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
width: deprecated.$s-72;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
background-color: transparent;
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
.code-lang-option {
|
||||
@include uppercaseTitleTipography;
|
||||
width: $s-72;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
width: deprecated.$s-72;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
color: var(--menu-foreground-color-disabled);
|
||||
}
|
||||
|
||||
@ -107,20 +107,20 @@
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: $s-8;
|
||||
padding-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
color: var(--title-foreground-color);
|
||||
stroke: var(--title-foreground-color);
|
||||
.collapsabled-icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.element-set {
|
||||
padding-bottom: $s-16;
|
||||
padding-bottom: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -18,14 +18,14 @@
|
||||
.title-spacing-export-viewer {
|
||||
margin: 0;
|
||||
color: var(--entry-foreground-color-hover);
|
||||
margin-inline-start: calc(-1 * $s-8);
|
||||
width: calc(100% + $s-8);
|
||||
margin-inline-start: calc(-1 * deprecated.$s-8);
|
||||
width: calc(100% + deprecated.$s-8);
|
||||
}
|
||||
|
||||
.add-export {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -33,12 +33,12 @@
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
@include flexColumn;
|
||||
margin-bottom: $s-4;
|
||||
@include deprecated.flexColumn;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.multiple-exports {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
grid-column: 1 / span 9;
|
||||
}
|
||||
|
||||
@ -47,17 +47,17 @@
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
}
|
||||
|
||||
.element-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
column-gap: $s-4;
|
||||
column-gap: deprecated.$s-4;
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
@ -75,8 +75,8 @@
|
||||
padding: 0;
|
||||
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
width: $s-80;
|
||||
bottom: deprecated.$s-36;
|
||||
width: deprecated.$s-80;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
@ -85,21 +85,21 @@
|
||||
grid-column: span 2;
|
||||
padding: 0;
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
bottom: deprecated.$s-36;
|
||||
top: unset;
|
||||
width: $s-80;
|
||||
width: deprecated.$s-80;
|
||||
}
|
||||
}
|
||||
|
||||
.suffix-input {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/typography.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.settings-bar-right {
|
||||
min-width: $s-252;
|
||||
min-width: deprecated.$s-252;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
@ -18,28 +18,28 @@
|
||||
overflow: hidden;
|
||||
|
||||
&.viewer-code {
|
||||
height: calc(100vh - $s-48);
|
||||
height: calc(100vh - deprecated.$s-48);
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-code {
|
||||
padding-inline-start: $s-8;
|
||||
padding-inline-start: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.tool-windows {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
padding-left: var(--sp-m);
|
||||
}
|
||||
|
||||
.shape-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.shape-info-subtitle {
|
||||
@ -49,16 +49,16 @@
|
||||
|
||||
.layers-icon,
|
||||
.shape-icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
--icon-stroke-color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.layer-title {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
height: $s-32;
|
||||
padding: $s-8 0;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -68,8 +68,8 @@
|
||||
}
|
||||
|
||||
.layer-subtitle {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
}
|
||||
|
||||
@ -77,17 +77,17 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-40;
|
||||
padding-top: $s-24;
|
||||
gap: deprecated.$s-40;
|
||||
padding-top: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.code-info,
|
||||
.help-info {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: $s-12;
|
||||
margin-right: $s-8;
|
||||
gap: deprecated.$s-12;
|
||||
margin-right: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
@ -95,17 +95,17 @@
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
text-align: center;
|
||||
width: $s-200;
|
||||
width: deprecated.$s-200;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
.more-info-btn {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
padding: $s-8 $s-24;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8 deprecated.$s-24;
|
||||
}
|
||||
|
||||
.inspect-tab-switcher {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
:global(:root) {
|
||||
--s-4: 0.25rem;
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.badge-notification {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
--badge-notification-bg-color: var(--alert-background-color-default);
|
||||
--badge-notification-fg-color: var(--alert-text-foreground-color-default);
|
||||
--badge-notification-border-color: var(--alert-border-color-default);
|
||||
@ -15,22 +15,22 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
height: fit-content;
|
||||
min-width: $s-80;
|
||||
min-width: deprecated.$s-80;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: $s-1 solid var(--badge-notification-border-color);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-1 solid var(--badge-notification-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--badge-notification-bg-color);
|
||||
color: var(--badge-notification-fg-color);
|
||||
}
|
||||
|
||||
.small {
|
||||
@include bodySmallTypography;
|
||||
min-height: $s-20;
|
||||
border-radius: $br-6;
|
||||
@include deprecated.bodySmallTypography;
|
||||
min-height: deprecated.$s-20;
|
||||
border-radius: deprecated.$br-6;
|
||||
}
|
||||
|
||||
.warning {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.context-notification {
|
||||
--context-notification-bg-color: var(--alert-background-color-default);
|
||||
@ -13,14 +13,14 @@
|
||||
--context-notification-border-color: var(--alert-border-color-default);
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: $s-16 1fr;
|
||||
gap: $s-8;
|
||||
min-height: $s-32;
|
||||
grid-template-columns: deprecated.$s-16 1fr;
|
||||
gap: deprecated.$s-8;
|
||||
min-height: deprecated.$s-32;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
border: $s-1 solid var(--context-notification-border-color);
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-8;
|
||||
border: deprecated.$s-1 solid var(--context-notification-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--context-notification-bg-color);
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
.context-text {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
align-self: center;
|
||||
color: var(--context-notification-fg-color);
|
||||
margin: auto 0;
|
||||
@ -78,11 +78,11 @@
|
||||
|
||||
.link,
|
||||
.contain-html .context-text a {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
align-self: center;
|
||||
display: inline;
|
||||
text-align: left;
|
||||
height: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
margin: 0;
|
||||
color: var(--modal-link-foreground-color);
|
||||
}
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.new-inline {
|
||||
position: absolute;
|
||||
top: $s-72;
|
||||
top: deprecated.$s-72;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: $s-48;
|
||||
min-width: $s-640;
|
||||
min-height: deprecated.$s-48;
|
||||
min-width: deprecated.$s-640;
|
||||
width: fit-content;
|
||||
max-width: $s-960;
|
||||
z-index: $z-index-modal;
|
||||
max-width: deprecated.$s-960;
|
||||
z-index: deprecated.$z-index-modal;
|
||||
}
|
||||
|
||||
.link {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -15,49 +15,49 @@
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: $s-32;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-100;
|
||||
padding-block-end: $s-72;
|
||||
gap: deprecated.$s-32;
|
||||
padding-inline: deprecated.$s-100;
|
||||
padding-block-start: deprecated.$s-100;
|
||||
padding-block-end: deprecated.$s-72;
|
||||
margin: 0;
|
||||
width: $s-960;
|
||||
height: $s-632;
|
||||
max-width: $s-960;
|
||||
max-height: $s-632;
|
||||
width: deprecated.$s-960;
|
||||
height: deprecated.$s-632;
|
||||
max-width: deprecated.$s-960;
|
||||
max-height: deprecated.$s-632;
|
||||
}
|
||||
|
||||
.modal-left {
|
||||
width: $s-172;
|
||||
margin-block-end: $s-64;
|
||||
width: deprecated.$s-172;
|
||||
margin-block-end: deprecated.$s-64;
|
||||
img {
|
||||
width: $s-172;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-172;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-40 auto auto auto auto $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: deprecated.$s-40 auto auto auto auto deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.newsletter-options {
|
||||
display: grid;
|
||||
gap: $s-16;
|
||||
margin-inline-start: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
margin-inline-start: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-link-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -4,34 +4,34 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
max-width: $s-960;
|
||||
max-width: deprecated.$s-960;
|
||||
max-height: fit-content;
|
||||
width: fit-content;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-40;
|
||||
padding-block-end: $s-72;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
padding-inline: deprecated.$s-100;
|
||||
padding-block-start: deprecated.$s-40;
|
||||
padding-block-end: deprecated.$s-72;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
// STEP CONTAINER
|
||||
.paginator {
|
||||
@include smallTitleTipography;
|
||||
height: $s-20;
|
||||
@include deprecated.smallTitleTipography;
|
||||
height: deprecated.$s-20;
|
||||
text-align: right;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -49,33 +49,33 @@
|
||||
|
||||
.radio-btns label,
|
||||
.select-class span {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
}
|
||||
|
||||
// STEP 1
|
||||
|
||||
.header-image {
|
||||
height: $s-60;
|
||||
height: deprecated.$s-60;
|
||||
width: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
@ -85,60 +85,60 @@
|
||||
.step-2,
|
||||
.step-3,
|
||||
.step-5 {
|
||||
max-width: $s-540;
|
||||
width: $s-540;
|
||||
max-width: deprecated.$s-540;
|
||||
width: deprecated.$s-540;
|
||||
}
|
||||
.step-2 {
|
||||
grid-template-rows: $s-20 auto auto $s-32;
|
||||
grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
|
||||
}
|
||||
|
||||
.modal-question {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-16 $s-32;
|
||||
gap: $s-16;
|
||||
grid-template-rows: deprecated.$s-16 deprecated.$s-32;
|
||||
gap: deprecated.$s-16;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.question-centered {
|
||||
width: $s-424;
|
||||
grid-template-rows: auto $s-32;
|
||||
width: deprecated.$s-424;
|
||||
grid-template-rows: auto deprecated.$s-32;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.radio-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
// STEP-3
|
||||
.step-3 {
|
||||
grid-template-rows: $s-20 auto auto auto auto $s-32;
|
||||
grid-template-rows: deprecated.$s-20 auto auto auto auto deprecated.$s-32;
|
||||
}
|
||||
|
||||
.image-radio {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: $s-92 $s-92 $s-92;
|
||||
row-gap: $s-16;
|
||||
column-gap: $s-24;
|
||||
grid-template-columns: deprecated.$s-92 deprecated.$s-92 deprecated.$s-92;
|
||||
row-gap: deprecated.$s-16;
|
||||
column-gap: deprecated.$s-24;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-spacing {
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin-block-end: $s-8;
|
||||
margin-block-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.input-spacing input {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
}
|
||||
|
||||
// STEP-4
|
||||
|
||||
.step-4 {
|
||||
grid-template-rows: $s-20 auto auto $s-32;
|
||||
row-gap: $s-16;
|
||||
grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
|
||||
row-gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,35 +12,35 @@
|
||||
|
||||
.modal-container {
|
||||
position: relative;
|
||||
width: $s-908;
|
||||
max-height: $s-800;
|
||||
width: deprecated.$s-908;
|
||||
max-height: deprecated.$s-800;
|
||||
height: 100%;
|
||||
padding-inline: $s-100;
|
||||
padding-block-start: $s-40;
|
||||
padding-block-end: $s-40;
|
||||
border-radius: $br-8;
|
||||
padding-inline: deprecated.$s-100;
|
||||
padding-block-start: deprecated.$s-40;
|
||||
padding-block-end: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-sections {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-32 1fr;
|
||||
gap: $s-24;
|
||||
grid-template-columns: 1fr deprecated.$s-32 1fr;
|
||||
gap: deprecated.$s-24;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
position: absolute;
|
||||
top: $s-40;
|
||||
right: $s-100;
|
||||
padding: $s-4;
|
||||
border-radius: $br-6;
|
||||
top: deprecated.$s-40;
|
||||
right: deprecated.$s-100;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-6;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -48,54 +48,54 @@
|
||||
.modal-left {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: $s-32 auto auto 1fr;
|
||||
gap: $s-16;
|
||||
grid-template-rows: deprecated.$s-32 auto auto 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include medTitleTipography;
|
||||
@include deprecated.medTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.invite-subtitle {
|
||||
padding-top: $s-16;
|
||||
padding-top: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.team-features {
|
||||
@include flexColumn;
|
||||
gap: $s-16;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include flexRow;
|
||||
gap: $s-16;
|
||||
@include deprecated.flexRow;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-circle;
|
||||
border: $s-1 solid var(--color-accent-primary);
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-circle;
|
||||
border: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--color-accent-primary);
|
||||
@ -117,9 +117,9 @@
|
||||
|
||||
// SEPARATOR
|
||||
.separator {
|
||||
width: $s-8;
|
||||
width: deprecated.$s-8;
|
||||
height: 100%;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
opacity: 42%;
|
||||
background-color: var(--modal-separator-backogrund-color);
|
||||
}
|
||||
@ -129,7 +129,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -140,21 +140,21 @@
|
||||
|
||||
.first-block,
|
||||
.second-block {
|
||||
@include flexColumn;
|
||||
gap: $s-16;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.team-name-input {
|
||||
@extend .input-element-label;
|
||||
label {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
@ -162,8 +162,8 @@
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include bodySmallTypography;
|
||||
margin-top: $s-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -174,21 +174,21 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: $s-16;
|
||||
max-height: $s-512;
|
||||
gap: deprecated.$s-16;
|
||||
max-height: deprecated.$s-512;
|
||||
}
|
||||
|
||||
.modal-form-invitations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr auto auto;
|
||||
margin-block-end: $s-72;
|
||||
gap: $s-8;
|
||||
margin-block-end: deprecated.$s-72;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.role-title {
|
||||
@include uppercaseTitleTipography;
|
||||
margin-block-end: $s-8;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
margin-block-end: deprecated.$s-8;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.step-dots {
|
||||
display: grid;
|
||||
grid-template-columns: none;
|
||||
grid-auto-flow: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
@ -20,9 +20,9 @@
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-12;
|
||||
width: deprecated.$s-12;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background-color: var(--modal-navigator-foreground-color-rest);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,76 +12,76 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -92,7 +92,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,55 +12,55 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -73,7 +73,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,55 +12,55 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-480;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-480;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -73,7 +73,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,24 +12,24 @@
|
||||
|
||||
.modal-container {
|
||||
display: grid;
|
||||
grid-template-columns: $s-324 1fr;
|
||||
height: $s-500;
|
||||
width: $s-888;
|
||||
border-radius: $br-8;
|
||||
grid-template-columns: deprecated.$s-324 1fr;
|
||||
height: deprecated.$s-500;
|
||||
width: deprecated.$s-888;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.start-image {
|
||||
width: $s-324;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
width: deprecated.$s-324;
|
||||
border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: $s-40;
|
||||
padding: deprecated.$s-40;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr $s-32;
|
||||
gap: $s-24;
|
||||
grid-template-rows: auto 1fr deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--button-primary-background-color-rest);
|
||||
@ -38,54 +38,54 @@
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
width: $s-96;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
background-color: var(--communication-tag-background-color);
|
||||
color: var(--communication-tag-foreground-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineLargeTypography;
|
||||
@include deprecated.headlineLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.features-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
width: $s-440;
|
||||
gap: deprecated.$s-16;
|
||||
width: deprecated.$s-440;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
.next-btn {
|
||||
@extend .button-primary;
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
justify-self: flex-end;
|
||||
grid-area: button;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,15 +12,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
min-width: deprecated.$s-408;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -29,18 +29,18 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
gap: $s-24;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
gap: deprecated.$s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,15 +12,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
min-width: deprecated.$s-408;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -29,18 +29,18 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
gap: $s-24;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
gap: deprecated.$s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,15 +12,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
width: $s-368;
|
||||
width: deprecated.$s-368;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -29,10 +29,10 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
@include bodySmallTypography;
|
||||
gap: $s-24;
|
||||
max-height: $s-400;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
gap: deprecated.$s-24;
|
||||
max-height: deprecated.$s-400;
|
||||
overflow: hidden auto;
|
||||
|
||||
form {
|
||||
@ -56,19 +56,19 @@
|
||||
.link-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend .button-secondary;
|
||||
height: $s-40;
|
||||
height: deprecated.$s-40;
|
||||
text-transform: uppercase;
|
||||
font-size: $fs-11;
|
||||
font-size: deprecated.$fs-11;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.share-modal {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $s-52;
|
||||
right: $s-12;
|
||||
left: calc(100vw - $s-512);
|
||||
z-index: $z-index-modal;
|
||||
top: deprecated.$s-52;
|
||||
right: deprecated.$s-12;
|
||||
left: calc(100vw - deprecated.$s-512);
|
||||
z-index: deprecated.$z-index-modal;
|
||||
}
|
||||
|
||||
.share-link-dialog {
|
||||
@ -21,11 +21,11 @@
|
||||
}
|
||||
|
||||
.share-link-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.share-link-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -34,18 +34,18 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.share-link-section {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.hint-wrapper {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
}
|
||||
|
||||
.hint {
|
||||
@ -54,32 +54,32 @@
|
||||
}
|
||||
|
||||
.custon-input-wrapper {
|
||||
@include flexRow;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@include deprecated.flexRow;
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
.input-text {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--input-foreground-color-active);
|
||||
padding-left: $s-8;
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@extend .button-secondary;
|
||||
@include flexRow;
|
||||
gap: $s-8;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
@include deprecated.flexRow;
|
||||
gap: deprecated.$s-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground-hover);
|
||||
@ -87,13 +87,13 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -110,23 +110,23 @@
|
||||
}
|
||||
|
||||
.permissions-section {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.manage-permissions {
|
||||
@include buttonStyle;
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
margin-right: $s-6;
|
||||
@include deprecated.flexCenter;
|
||||
margin-right: deprecated.$s-6;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -144,7 +144,7 @@
|
||||
}
|
||||
|
||||
.view-mode {
|
||||
max-height: $s-216;
|
||||
max-height: deprecated.$s-216;
|
||||
overflow: hidden auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
@ -154,8 +154,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: $s-136;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-136;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.items {
|
||||
@ -163,10 +163,10 @@
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
.select-all-row {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
border-bottom: $s-1 solid var(--input-border-color-disabled);
|
||||
height: deprecated.$s-32;
|
||||
border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled);
|
||||
}
|
||||
.select-all-label {
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -174,7 +174,7 @@
|
||||
.pages-selection {
|
||||
margin: 0;
|
||||
li {
|
||||
border-bottom: $s-1 solid var(--input-border-color-disabled);
|
||||
border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled);
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
@ -182,17 +182,17 @@
|
||||
}
|
||||
.count-pages,
|
||||
.current-tag {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
padding: 0;
|
||||
span.checked {
|
||||
background-color: var(--input-checkbox-background-color-active);
|
||||
border: $s-1 solid var(--input-checkbox-background-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-checkbox-background-color-active);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--input-checkbox-foreground-color-active);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.workspace {
|
||||
@extend .new-scrollbar;
|
||||
@ -33,18 +33,18 @@
|
||||
|
||||
.history-debug-overlay {
|
||||
bottom: 0;
|
||||
max-height: $s-500;
|
||||
width: $s-500;
|
||||
max-height: deprecated.$s-500;
|
||||
width: deprecated.$s-500;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
z-index: $z-index-modal;
|
||||
z-index: deprecated.$z-index-modal;
|
||||
}
|
||||
|
||||
.workspace-viewport {
|
||||
overflow: hidden;
|
||||
transition: none;
|
||||
display: grid;
|
||||
grid-template-rows: $s-20 1fr;
|
||||
grid-template-columns: $s-20 1fr;
|
||||
grid-template-rows: deprecated.$s-20 1fr;
|
||||
grid-template-columns: deprecated.$s-20 1fr;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.color-palette {
|
||||
height: 100%;
|
||||
@ -13,13 +13,13 @@
|
||||
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
z-index: $z-index-5;
|
||||
z-index: deprecated.$z-index-5;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -27,11 +27,11 @@
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
bottom: 0;
|
||||
left: calc(-1 * $s-80);
|
||||
left: calc(-1 * deprecated.$s-80);
|
||||
height: 100%;
|
||||
width: $s-80;
|
||||
width: deprecated.$s-80;
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
.left-arrow {
|
||||
&::after {
|
||||
left: $s-24;
|
||||
left: deprecated.$s-24;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--palette-button-shadow-initial) 0%,
|
||||
@ -82,7 +82,7 @@
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--color-cell-width);
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.color-cell {
|
||||
@ -98,12 +98,12 @@
|
||||
height: 100%;
|
||||
|
||||
&.no-text {
|
||||
@include flexCenter;
|
||||
width: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-empty {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.palette-menu {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
bottom: var(--height);
|
||||
max-width: $s-480;
|
||||
padding: $s-4;
|
||||
margin: 0 0 $s-4 0;
|
||||
z-index: $z-index-4;
|
||||
border-radius: $br-10;
|
||||
max-width: deprecated.$s-480;
|
||||
padding: deprecated.$s-4;
|
||||
margin: 0 0 deprecated.$s-4 0;
|
||||
z-index: deprecated.$z-index-4;
|
||||
border-radius: deprecated.$br-10;
|
||||
background-color: var(--context-menu-background-color);
|
||||
|
||||
.palette-library,
|
||||
@ -24,36 +24,36 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
margin-bottom: $s-4;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.option-wrapper {
|
||||
width: 100%;
|
||||
.library-name {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--context-menu-foreground-color);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-24;
|
||||
grid-template-columns: 1fr deprecated.$s-24;
|
||||
.lib-name-wrapper {
|
||||
display: flex;
|
||||
max-width: $s-400;
|
||||
max-width: deprecated.$s-400;
|
||||
.lib-name {
|
||||
@include textEllipsis;
|
||||
max-width: $s-380;
|
||||
@include deprecated.textEllipsis;
|
||||
max-width: deprecated.$s-380;
|
||||
}
|
||||
.lib-num {
|
||||
margin-left: $s-4;
|
||||
margin-left: deprecated.$s-4;
|
||||
}
|
||||
}
|
||||
.icon-wrapper {
|
||||
margin-left: $s-4;
|
||||
@include flexCenter;
|
||||
margin-left: deprecated.$s-4;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -61,8 +61,8 @@
|
||||
.color-sample {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $s-8;
|
||||
margin-top: $s-4;
|
||||
gap: deprecated.$s-8;
|
||||
margin-top: deprecated.$s-4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,9 +71,9 @@
|
||||
.option-wrapper .library-name {
|
||||
color: var(--context-menu-foreground-color-selected);
|
||||
.icon-wrapper {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--context-menu-foreground-color-selected);
|
||||
}
|
||||
|
||||
@ -4,36 +4,36 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.color-values {
|
||||
@include flexColumn;
|
||||
margin-top: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
margin-top: deprecated.$s-8;
|
||||
|
||||
&.disable-opacity {
|
||||
grid-template-columns: 3.5rem repeat(3, 1fr);
|
||||
}
|
||||
.colors-row {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
.input-wrapper {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-84;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: deprecated.$s-84;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
.hex-alpha-wrapper {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
.input-wrapper {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-84;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: deprecated.$s-84;
|
||||
&.hex {
|
||||
width: $s-172;
|
||||
width: deprecated.$s-172;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.gradient-panel {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
display: grid;
|
||||
gap: $s-4;
|
||||
grid-template-rows: $s-56 $s-32 1fr;
|
||||
gap: deprecated.$s-4;
|
||||
grid-template-rows: deprecated.$s-56 deprecated.$s-32 1fr;
|
||||
}
|
||||
|
||||
.gradient-preview {
|
||||
@ -24,18 +24,18 @@
|
||||
|
||||
.gradient-background {
|
||||
width: 100%;
|
||||
height: $s-20;
|
||||
border-radius: $br-4;
|
||||
height: deprecated.$s-20;
|
||||
border-radius: deprecated.$br-4;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gradient-preview-stop-wrapper {
|
||||
position: absolute;
|
||||
width: calc(100% - $s-24 - $s-4);
|
||||
width: calc(100% - deprecated.$s-24 - deprecated.$s-4);
|
||||
height: 100%;
|
||||
left: $s-2;
|
||||
top: calc(-1 * $s-4);
|
||||
left: deprecated.$s-2;
|
||||
top: calc(-1 * deprecated.$s-4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -43,31 +43,31 @@
|
||||
background-color: var(--color-foreground-primary);
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=");
|
||||
background-position: left center;
|
||||
background-size: $s-8;
|
||||
border-radius: $br-6;
|
||||
border: $s-2 solid var(--color-foreground-primary);
|
||||
box-shadow: 0px 0px $s-4 0px var(--menu-shadow-color);
|
||||
height: calc($s-24 - $s-2);
|
||||
background-size: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-6;
|
||||
border: deprecated.$s-2 solid var(--color-foreground-primary);
|
||||
box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color);
|
||||
height: calc(deprecated.$s-24 - deprecated.$s-2);
|
||||
left: var(--position);
|
||||
overflow: hidden;
|
||||
pointer-events: initial;
|
||||
position: absolute;
|
||||
width: calc($s-24 - $s-2);
|
||||
width: calc(deprecated.$s-24 - deprecated.$s-2);
|
||||
|
||||
&.is-selected,
|
||||
&:hover {
|
||||
outline: $s-2 solid var(--color-accent-primary);
|
||||
outline: deprecated.$s-2 solid var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
.gradient-preview-stop-decoration {
|
||||
background: var(--color-foreground-primary);
|
||||
border-radius: 100%;
|
||||
bottom: $s-32;
|
||||
box-shadow: 0px 0px $s-4 0px var(--menu-shadow-color);
|
||||
height: $s-4;
|
||||
left: calc(var(--position) + $s-8);
|
||||
bottom: deprecated.$s-32;
|
||||
box-shadow: 0px 0px deprecated.$s-4 0px var(--menu-shadow-color);
|
||||
height: deprecated.$s-4;
|
||||
left: calc(var(--position) + deprecated.$s-8);
|
||||
position: absolute;
|
||||
width: $s-4;
|
||||
width: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.gradient-preview-stop-color {
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
.gradient-options-select {
|
||||
width: $s-140;
|
||||
width: deprecated.$s-140;
|
||||
}
|
||||
|
||||
.rotate-icon {
|
||||
@ -107,8 +107,8 @@
|
||||
.gradient-stops-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
max-height: $s-180;
|
||||
gap: deprecated.$s-4;
|
||||
max-height: deprecated.$s-180;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0 0 var(--sp-s) var(--sp-m);
|
||||
@ -116,10 +116,10 @@
|
||||
|
||||
.gradient-stops-entry {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
padding: $s-2;
|
||||
border-radius: $br-12;
|
||||
border: $s-1 solid transparent;
|
||||
gap: deprecated.$s-4;
|
||||
padding: deprecated.$s-2;
|
||||
border-radius: deprecated.$br-12;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
|
||||
position: relative;
|
||||
|
||||
@ -142,13 +142,13 @@
|
||||
|
||||
.offset-input-wrapper {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-92;
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: deprecated.$s-92;
|
||||
}
|
||||
|
||||
.gradient-separator {
|
||||
border-color: var(--color-background-quaternary);
|
||||
border-width: $s-3;
|
||||
border-width: deprecated.$s-3;
|
||||
margin-left: calc(var(--sp-m) / 2);
|
||||
position: relative;
|
||||
width: calc(100% - var(--sp-m));
|
||||
@ -157,10 +157,10 @@
|
||||
.gradient-preview-stop-preview {
|
||||
background: var(--color-foreground-primary);
|
||||
border-radius: 50%;
|
||||
height: $s-4;
|
||||
left: calc(var(--preview-position, 0%) - $s-2);
|
||||
height: deprecated.$s-4;
|
||||
left: calc(var(--preview-position, 0%) - deprecated.$s-2);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: calc(50% - $s-2);
|
||||
width: $s-4;
|
||||
top: calc(50% - deprecated.$s-2);
|
||||
width: deprecated.$s-4;
|
||||
}
|
||||
|
||||
@ -4,41 +4,41 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.harmony-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
margin-top: $s-12;
|
||||
margin-bottom: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
margin-top: deprecated.$s-12;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.hue-wheel-wrapper {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hue-wheel {
|
||||
width: $s-196;
|
||||
height: $s-196;
|
||||
width: deprecated.$s-196;
|
||||
height: deprecated.$s-196;
|
||||
}
|
||||
|
||||
.handler {
|
||||
@extend .colorpicker-handler;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
border: $s-2 solid var(--colorpicker-handlers-color);
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
border: deprecated.$s-2 solid var(--colorpicker-handlers-color);
|
||||
}
|
||||
|
||||
.handler.complement {
|
||||
background-color: var(--colorpicker-handlers-color);
|
||||
border: $s-2 solid var(--colorpicker-handlers-color);
|
||||
border: deprecated.$s-2 solid var(--colorpicker-handlers-color);
|
||||
}
|
||||
|
||||
.handlers-wrapper {
|
||||
@include flexRow;
|
||||
height: $s-200;
|
||||
width: $s-52;
|
||||
@include deprecated.flexRow;
|
||||
height: deprecated.$s-200;
|
||||
width: deprecated.$s-52;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.hsva-selector {
|
||||
@include flexColumn;
|
||||
padding: $s-4;
|
||||
grid-row-gap: $s-8;
|
||||
margin-bottom: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
padding: deprecated.$s-4;
|
||||
grid-row-gap: deprecated.$s-8;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.hsva-row {
|
||||
@ -19,13 +19,13 @@
|
||||
}
|
||||
|
||||
.hsva-selector-label {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.hsva-bar {
|
||||
width: $s-228;
|
||||
width: deprecated.$s-228;
|
||||
}
|
||||
|
||||
@ -4,29 +4,29 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.libraries {
|
||||
margin-top: $s-8;
|
||||
margin-top: deprecated.$s-8;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected-colors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
margin-top: $s-8;
|
||||
max-height: $s-168;
|
||||
margin-top: deprecated.$s-8;
|
||||
max-height: deprecated.$s-168;
|
||||
}
|
||||
|
||||
.add-color-btn,
|
||||
.palette-btn {
|
||||
@extend .button-secondary;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-circle;
|
||||
padding: 0;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.value-saturation-selector {
|
||||
background-color: rgba(var(--hue-rgb));
|
||||
position: relative;
|
||||
height: $s-140;
|
||||
height: deprecated.$s-140;
|
||||
width: 100%;
|
||||
margin-top: $s-12;
|
||||
margin-bottom: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
margin-bottom: deprecated.$s-12;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
@ -34,15 +34,15 @@
|
||||
|
||||
.handler {
|
||||
@extend .colorpicker-handler;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
border: $s-2 solid var(--colorpicker-handlers-color);
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
border: deprecated.$s-2 solid var(--colorpicker-handlers-color);
|
||||
}
|
||||
|
||||
.shade-selector {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
height: $s-52;
|
||||
gap: deprecated.$s-4;
|
||||
height: deprecated.$s-52;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.slider-selector {
|
||||
--gradient-direction: 90deg;
|
||||
@ -16,10 +16,10 @@
|
||||
}
|
||||
position: relative;
|
||||
align-self: center;
|
||||
height: $s-24;
|
||||
height: deprecated.$s-24;
|
||||
inline-size: 100%;
|
||||
border: $s-2 solid var(--colorpicker-details-color);
|
||||
border-radius: $br-6;
|
||||
border: deprecated.$s-2 solid var(--colorpicker-details-color);
|
||||
border-radius: deprecated.$br-6;
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
rgba(var(--color), 0) 0%,
|
||||
@ -28,8 +28,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
&.vertical {
|
||||
width: $s-24;
|
||||
height: $s-200;
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-200;
|
||||
}
|
||||
|
||||
&.hue {
|
||||
@ -60,7 +60,7 @@
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: $br-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
@ -78,24 +78,24 @@
|
||||
.handler {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: calc($s-8 + $s-2);
|
||||
height: calc($s-24 + $s-1);
|
||||
border-radius: $br-4;
|
||||
z-index: $z-index-1;
|
||||
width: calc(deprecated.$s-8 + deprecated.$s-2);
|
||||
height: calc(deprecated.$s-24 + deprecated.$s-1);
|
||||
border-radius: deprecated.$br-4;
|
||||
z-index: deprecated.$z-index-1;
|
||||
transform: translate(-4px, -3px);
|
||||
background-color: var(--colorpicker-handlers-color);
|
||||
}
|
||||
|
||||
&.vertical .handler {
|
||||
height: calc($s-8 + $s-2);
|
||||
width: calc($s-24 + $s-1);
|
||||
height: calc(deprecated.$s-8 + deprecated.$s-2);
|
||||
width: calc(deprecated.$s-24 + deprecated.$s-1);
|
||||
transform: translate(-12px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-wrapper {
|
||||
background-color: var(--colorpicker-background-color);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.slider-selector.hue {
|
||||
|
||||
@ -4,30 +4,30 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.comments-section {
|
||||
position: relative;
|
||||
background-color: var(--panel-background-color);
|
||||
display: grid;
|
||||
grid-template-rows: $s-40 $s-48 1fr;
|
||||
grid-template-rows: deprecated.$s-40 deprecated.$s-48 1fr;
|
||||
}
|
||||
|
||||
.from-viewer {
|
||||
padding: 0 $s-8;
|
||||
padding: 0 deprecated.$s-8;
|
||||
}
|
||||
|
||||
.comments-section-title {
|
||||
@include flexCenter;
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 $s-8 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--panel-title-background-color);
|
||||
span {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
@ -35,20 +35,20 @@
|
||||
|
||||
.viewer-title {
|
||||
margin: 0;
|
||||
margin-block-start: $s-8;
|
||||
margin-block-start: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.mode-dropdown-wrapper {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
@extend .asset-element;
|
||||
background-color: var(--color-background-tertiary);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: $s-256;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
margin: $s-16 auto 0 auto;
|
||||
max-width: deprecated.$s-256;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: deprecated.$s-16 auto 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
@ -61,9 +61,9 @@
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
@ -73,30 +73,30 @@
|
||||
|
||||
.comment-mode-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
top: $s-92;
|
||||
left: $s-12;
|
||||
max-width: $s-256;
|
||||
top: deprecated.$s-92;
|
||||
left: deprecated.$s-12;
|
||||
max-width: deprecated.$s-256;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.viewer-dropdown {
|
||||
left: $s-8;
|
||||
left: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@extend .dropdown-element-base;
|
||||
justify-content: space-between;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
&:hover {
|
||||
.icon svg {
|
||||
@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.comments-section-content {
|
||||
@ -128,29 +128,29 @@
|
||||
}
|
||||
|
||||
.thread-group-placeholder {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: $s-36;
|
||||
margin-top: deprecated.$s-36;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
@include flexCenter;
|
||||
height: $s-48;
|
||||
width: $s-48;
|
||||
border-radius: $br-circle;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-48;
|
||||
width: deprecated.$s-48;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background-color: var(--empty-message-background-color);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
stroke: var(--empty-message-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
text-align: center;
|
||||
width: $s-184;
|
||||
width: deprecated.$s-184;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
@ -4,23 +4,23 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.workspace-context-menu {
|
||||
position: absolute;
|
||||
top: $s-40;
|
||||
left: $s-736;
|
||||
z-index: $z-index-4;
|
||||
top: deprecated.$s-40;
|
||||
left: deprecated.$s-736;
|
||||
z-index: deprecated.$z-index-4;
|
||||
}
|
||||
|
||||
.context-list,
|
||||
.workspace-context-submenu {
|
||||
@include menuShadow;
|
||||
@include deprecated.menuShadow;
|
||||
display: grid;
|
||||
width: $s-240;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
width: deprecated.$s-240;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--panel-border-color);
|
||||
background-color: var(--menu-background-color);
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
@ -31,33 +31,33 @@
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.shortcut {
|
||||
@include flexCenter;
|
||||
gap: $s-2;
|
||||
@include deprecated.flexCenter;
|
||||
gap: deprecated.$s-2;
|
||||
color: var(--menu-shortcut-foreground-color);
|
||||
.shortcut-key {
|
||||
@include bodySmallTypography;
|
||||
@include flexCenter;
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
border-radius: $br-6;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-20;
|
||||
padding: deprecated.$s-2 deprecated.$s-6;
|
||||
border-radius: deprecated.$br-6;
|
||||
background-color: var(--menu-shortcut-background-color);
|
||||
}
|
||||
}
|
||||
@ -86,15 +86,15 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-28;
|
||||
padding: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
}
|
||||
|
||||
span.title {
|
||||
margin-left: $s-6;
|
||||
margin-left: deprecated.$s-6;
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
.shape-icon {
|
||||
margin-left: $s-2;
|
||||
margin-left: deprecated.$s-2;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--menu-foreground-color);
|
||||
|
||||
@ -4,24 +4,24 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.workspace-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $s-12 $s-12 $s-8 $s-12;
|
||||
min-height: $s-52;
|
||||
padding: deprecated.$s-12 deprecated.$s-12 deprecated.$s-8 deprecated.$s-12;
|
||||
min-height: deprecated.$s-52;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
@include flexCenter;
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin-right: $s-4;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin-right: deprecated.$s-4;
|
||||
svg {
|
||||
min-height: $s-32;
|
||||
width: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
fill: var(--icon-foreground-hover);
|
||||
}
|
||||
}
|
||||
@ -29,24 +29,24 @@
|
||||
.project-tree {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
max-width: calc(100% - $s-64);
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
max-width: calc(100% - deprecated.$s-64);
|
||||
}
|
||||
|
||||
.project-name,
|
||||
.file-name {
|
||||
@include uppercaseTitleTipography;
|
||||
@include textEllipsis;
|
||||
height: $s-16;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.textEllipsis;
|
||||
height: deprecated.$s-16;
|
||||
width: 100%;
|
||||
padding-bottom: $s-2;
|
||||
padding-bottom: deprecated.$s-2;
|
||||
color: var(--title-foreground-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
text-transform: none;
|
||||
color: var(--title-foreground-color-hover);
|
||||
align-items: center;
|
||||
@ -55,20 +55,20 @@
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
|
||||
.file-name-input {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
background-color: var(--input-background-color);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--input-foreground-color);
|
||||
z-index: $z-index-20;
|
||||
z-index: deprecated.$z-index-20;
|
||||
white-space: break-spaces;
|
||||
&:focus {
|
||||
outline: none;
|
||||
@ -76,23 +76,23 @@
|
||||
}
|
||||
|
||||
.shared-badge {
|
||||
@include flexCenter;
|
||||
width: $s-16;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-32;
|
||||
margin-right: deprecated.$s-4;
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-rest);
|
||||
fill: none;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.status-notification {
|
||||
width: $s-6;
|
||||
height: $s-6;
|
||||
width: deprecated.$s-6;
|
||||
height: deprecated.$s-6;
|
||||
border-radius: 50%;
|
||||
margin-right: $s-4;
|
||||
margin-right: deprecated.$s-4;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--status-widget-background-color-pending);
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// Library modal
|
||||
.modal-overlay {
|
||||
@ -15,10 +15,10 @@
|
||||
@extend .modal-container-base;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: $s-520;
|
||||
max-height: $s-520;
|
||||
width: $s-712;
|
||||
max-width: $s-712;
|
||||
height: deprecated.$s-520;
|
||||
max-height: deprecated.$s-520;
|
||||
width: deprecated.$s-712;
|
||||
max-width: deprecated.$s-712;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@ -31,8 +31,8 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-block-end: $s-16;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
margin-block-end: deprecated.$s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
.updates-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $s-32;
|
||||
max-height: $s-400;
|
||||
padding-block-start: $s-16;
|
||||
gap: deprecated.$s-32;
|
||||
max-height: deprecated.$s-400;
|
||||
padding-block-start: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.lib-section,
|
||||
@ -51,7 +51,7 @@
|
||||
.shared-section {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.shared-section {
|
||||
@ -59,22 +59,22 @@
|
||||
}
|
||||
|
||||
.title-spacing-lib {
|
||||
margin: 0 0 0 calc(-1 * $s-8);
|
||||
margin: 0 0 0 calc(-1 * deprecated.$s-8);
|
||||
}
|
||||
|
||||
.section-list,
|
||||
.section-list-shared {
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
gap: $s-8;
|
||||
max-height: $s-320;
|
||||
gap: deprecated.$s-8;
|
||||
max-height: deprecated.$s-320;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
@ -84,12 +84,12 @@
|
||||
.item-publish,
|
||||
.item-unpublish {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
min-width: $s-92;
|
||||
padding: $s-8 $s-24;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-92;
|
||||
padding: deprecated.$s-8 deprecated.$s-24;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.item-unpublish {
|
||||
@ -99,11 +99,11 @@
|
||||
.item-button,
|
||||
.item-button-shared {
|
||||
@extend .button-secondary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
margin-inline-start: $s-2;
|
||||
margin-inline-end: $s-8;
|
||||
padding: $s-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
margin-inline-start: deprecated.$s-2;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
padding: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.detach-icon,
|
||||
@ -113,19 +113,19 @@
|
||||
}
|
||||
|
||||
.section-list-shared {
|
||||
max-height: $s-272;
|
||||
max-height: deprecated.$s-272;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@include headlineSmallTypography;
|
||||
margin-block-end: $s-12;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
margin-block-end: deprecated.$s-12;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@include flexCenter;
|
||||
width: $s-20;
|
||||
padding: 0 0 0 $s-8;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-20;
|
||||
padding: 0 0 0 deprecated.$s-8;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -135,30 +135,30 @@
|
||||
|
||||
// empty state
|
||||
.section-list-empty {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-items: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
margin-block: $s-16;
|
||||
margin-block: deprecated.$s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
@include flexCenter;
|
||||
width: $s-48;
|
||||
height: $s-48;
|
||||
border-radius: $br-circle;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-48;
|
||||
height: deprecated.$s-48;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background-color: var(--pill-background-color);
|
||||
}
|
||||
|
||||
.library-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
}
|
||||
|
||||
// Update library tab
|
||||
@ -166,8 +166,8 @@
|
||||
@extend .link;
|
||||
direction: rtl;
|
||||
grid-column: span 3;
|
||||
margin-block-start: $s-8;
|
||||
margin-inline-start: $s-8;
|
||||
margin-block-start: deprecated.$s-8;
|
||||
margin-inline-start: deprecated.$s-8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -178,60 +178,60 @@
|
||||
.libraries-updates {
|
||||
display: grid;
|
||||
grid-column: span 3;
|
||||
grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
|
||||
gap: $s-24;
|
||||
margin-block-start: $s-16;
|
||||
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-160, 1fr));
|
||||
gap: deprecated.$s-24;
|
||||
margin-block-start: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.libraries-updates-column {
|
||||
display: grid;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.libraries-updates-item {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
color: var(--library-content-foreground-color);
|
||||
}
|
||||
|
||||
.component-svg {
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
min-height: $s-24;
|
||||
min-width: $s-24;
|
||||
border-radius: deprecated.$br-4;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
min-height: deprecated.$s-24;
|
||||
min-width: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.name-block {
|
||||
color: var(--library-content-foreground-color);
|
||||
width: $s-168;
|
||||
width: deprecated.$s-168;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
padding-inline-start: calc($s-24 + #{$s-8});
|
||||
padding-inline-start: calc(deprecated.$s-24 + #{deprecated.$s-8});
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
margin: 0;
|
||||
max-width: $s-244;
|
||||
max-width: deprecated.$s-244;
|
||||
color: var(--library-name-foreground-color);
|
||||
}
|
||||
|
||||
.item-update {
|
||||
@extend .button-primary;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
min-width: $s-92;
|
||||
padding: $s-8 $s-24;
|
||||
margin-inline-end: $s-2;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-92;
|
||||
padding: deprecated.$s-8 deprecated.$s-24;
|
||||
margin-inline-end: deprecated.$s-2;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
&:disabled {
|
||||
@extend .button-disabled;
|
||||
@ -239,7 +239,7 @@
|
||||
}
|
||||
|
||||
.item-contents {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--library-content-foreground-color);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -251,33 +251,33 @@
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: "·";
|
||||
margin-inline: $s-4;
|
||||
margin-inline: deprecated.$s-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Component v2 update
|
||||
.modal-v2-info {
|
||||
width: $s-664;
|
||||
width: deprecated.$s-664;
|
||||
height: fit-content;
|
||||
max-height: fit-content;
|
||||
}
|
||||
|
||||
.modal-v2-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
margin-top: $s-32;
|
||||
gap: $s-24;
|
||||
margin-top: deprecated.$s-32;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: $s-20;
|
||||
column-gap: deprecated.$s-20;
|
||||
grid-template:
|
||||
"icon title"
|
||||
"icon content";
|
||||
@ -285,30 +285,30 @@
|
||||
|
||||
.info-icon {
|
||||
grid-area: icon;
|
||||
width: $s-52;
|
||||
height: $s-52;
|
||||
margin-top: $s-8;
|
||||
border-radius: $br-circle;
|
||||
width: deprecated.$s-52;
|
||||
height: deprecated.$s-52;
|
||||
margin-top: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background: var(--color-background-quaternary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
fill: var(--icon-foreground-active);
|
||||
}
|
||||
}
|
||||
|
||||
.info-block-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
grid-area: title;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.info-block-content {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
grid-area: content;
|
||||
color: var(--library-content-foreground-color);
|
||||
}
|
||||
@ -316,27 +316,27 @@
|
||||
.info-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-block-start: $s-24;
|
||||
margin-inline-end: $s-8;
|
||||
margin-block-start: deprecated.$s-24;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@extend .button-primary;
|
||||
@include headlineSmallTypography;
|
||||
padding: $s-0 $s-16;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
padding: deprecated.$s-0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.sample-libraries-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-12;
|
||||
margin: $s-32;
|
||||
font-size: deprecated.$fs-12;
|
||||
margin: deprecated.$s-32;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.sample-libraries-link {
|
||||
color: var(--color-accent-primary);
|
||||
font-weight: $fw400;
|
||||
font-weight: deprecated.$fw400;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -345,7 +345,7 @@
|
||||
.sample-libraries-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
width: 100%;
|
||||
align-items: start;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -356,16 +356,16 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: $s-8;
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.sample-library-item-name {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: $s-232;
|
||||
max-width: deprecated.$s-232;
|
||||
}
|
||||
|
||||
.sample-library-add {
|
||||
@ -377,11 +377,11 @@
|
||||
}
|
||||
|
||||
.sample-library-button {
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-32;
|
||||
width: $s-80;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-80;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.menu {
|
||||
@extend .menu-dropdown;
|
||||
top: $s-48;
|
||||
left: calc(var(--width, $s-256) - $s-16);
|
||||
width: $s-192;
|
||||
top: deprecated.$s-48;
|
||||
left: calc(var(--width, deprecated.$s-256) - deprecated.$s-16);
|
||||
width: deprecated.$s-192;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
.open-arrow {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@ -43,12 +43,12 @@
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
height: $s-4;
|
||||
left: calc(-1 * $s-4);
|
||||
margin-top: $s-8;
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
height: deprecated.$s-4;
|
||||
left: calc(-1 * deprecated.$s-4);
|
||||
margin-top: deprecated.$s-8;
|
||||
position: relative;
|
||||
width: calc(100% + $s-8);
|
||||
width: calc(100% + deprecated.$s-8);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
@ -61,9 +61,9 @@
|
||||
|
||||
.sub-menu {
|
||||
@extend .menu-dropdown;
|
||||
left: calc(var(--width, $s-256) + $s-180);
|
||||
width: $s-192;
|
||||
min-width: calc($s-272 - $s-2);
|
||||
left: calc(var(--width, deprecated.$s-256) + deprecated.$s-180);
|
||||
width: deprecated.$s-192;
|
||||
min-width: calc(deprecated.$s-272 - deprecated.$s-2);
|
||||
width: 110%;
|
||||
|
||||
.submenu-item {
|
||||
@ -89,34 +89,34 @@
|
||||
}
|
||||
|
||||
&.file {
|
||||
top: $s-48;
|
||||
top: deprecated.$s-48;
|
||||
}
|
||||
|
||||
&.edit {
|
||||
top: $s-76;
|
||||
top: deprecated.$s-76;
|
||||
}
|
||||
|
||||
&.view {
|
||||
top: $s-116;
|
||||
top: deprecated.$s-116;
|
||||
}
|
||||
|
||||
&.preferences {
|
||||
top: $s-148;
|
||||
top: deprecated.$s-148;
|
||||
}
|
||||
|
||||
&.plugins {
|
||||
top: $s-180;
|
||||
max-height: calc(100vh - $s-180);
|
||||
top: deprecated.$s-180;
|
||||
max-height: calc(100vh - deprecated.$s-180);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&.help-info {
|
||||
top: $s-232;
|
||||
top: deprecated.$s-232;
|
||||
}
|
||||
|
||||
&.help-info-old {
|
||||
top: $s-192;
|
||||
top: deprecated.$s-192;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -12,15 +12,15 @@
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
min-width: deprecated.$s-408;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
.modal-close-btn {
|
||||
@ -28,22 +28,22 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include bodyLargeTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-24;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend .input-with-label;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
label {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-msg {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
@use "ds/z-index.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.palette-wrapper {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: $s-4;
|
||||
padding-bottom: deprecated.$s-4;
|
||||
|
||||
/** Aligns AI Chat button **/
|
||||
display: flex;
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.palettes {
|
||||
z-index: $z-index-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
position: relative;
|
||||
right: 0;
|
||||
grid-area: color-palette;
|
||||
@ -33,15 +33,15 @@
|
||||
grid-template-areas:
|
||||
"resize resize resize"
|
||||
"buttons actions palette";
|
||||
grid-template-rows: $s-8 1fr;
|
||||
grid-template-columns: $s-32 auto 1fr;
|
||||
max-height: $s-80;
|
||||
grid-template-rows: deprecated.$s-8 1fr;
|
||||
grid-template-columns: deprecated.$s-32 auto 1fr;
|
||||
max-height: deprecated.$s-80;
|
||||
height: var(--height);
|
||||
width: fit-content;
|
||||
padding: $s-0 $s-0 $s-8 $s-8;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-0 deprecated.$s-0 deprecated.$s-8 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--palette-background-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
border: deprecated.$s-2 solid var(--panel-border-color);
|
||||
transition:
|
||||
right 0.3s,
|
||||
opacity 0.2s,
|
||||
@ -52,36 +52,36 @@
|
||||
|
||||
.resize-area {
|
||||
grid-area: resize;
|
||||
height: $s-8;
|
||||
z-index: $z-index-4;
|
||||
width: calc(100% - $s-8);
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-8;
|
||||
z-index: deprecated.$z-index-4;
|
||||
width: calc(100% - deprecated.$s-8);
|
||||
border-radius: deprecated.$br-circle;
|
||||
cursor: ns-resize;
|
||||
background-color: var(--palette-background-color);
|
||||
}
|
||||
.palette-btn-list {
|
||||
grid-area: buttons;
|
||||
background-color: var(--palette-background-color);
|
||||
height: calc(var(--height) - $s-16);
|
||||
width: $s-32;
|
||||
margin: $s-0;
|
||||
height: calc(var(--height) - deprecated.$s-16);
|
||||
width: deprecated.$s-32;
|
||||
margin: deprecated.$s-0;
|
||||
list-style: none;
|
||||
z-index: $z-index-2;
|
||||
gap: $s-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
gap: deprecated.$s-2;
|
||||
&.mid-palette,
|
||||
&.small-palette {
|
||||
display: flex;
|
||||
}
|
||||
.palette-item {
|
||||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
opacity: $op-10;
|
||||
@include deprecated.flexCenter;
|
||||
border-radius: deprecated.$br-8;
|
||||
opacity: deprecated.$op-10;
|
||||
transition: opacity 1s ease;
|
||||
.palette-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-clip: padding-box;
|
||||
padding: 0;
|
||||
svg {
|
||||
@ -98,13 +98,13 @@
|
||||
.palette-actions {
|
||||
@extend .button-tertiary;
|
||||
grid-area: actions;
|
||||
height: calc(var(--height) - $s-16);
|
||||
width: $s-32;
|
||||
height: calc(var(--height) - deprecated.$s-16);
|
||||
width: deprecated.$s-32;
|
||||
padding: 0;
|
||||
margin-left: $s-4;
|
||||
border-radius: $br-8;
|
||||
margin-left: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--palette-background-color);
|
||||
z-index: $z-index-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -118,41 +118,41 @@
|
||||
}
|
||||
|
||||
.handler {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
width: $s-12;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-12;
|
||||
height: 100%;
|
||||
.handler-btn {
|
||||
width: $s-4;
|
||||
width: deprecated.$s-4;
|
||||
height: 100%;
|
||||
max-height: $s-40;
|
||||
margin: $s-8 $s-4;
|
||||
max-height: deprecated.$s-40;
|
||||
margin: deprecated.$s-8 deprecated.$s-4;
|
||||
padding: 0;
|
||||
border-radius: $s-4;
|
||||
border-radius: deprecated.$s-4;
|
||||
background-color: var(--palette-handler-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mid-palette,
|
||||
.small-palette {
|
||||
grid-template-columns: $s-64 auto 1fr;
|
||||
grid-template-columns: deprecated.$s-64 auto 1fr;
|
||||
}
|
||||
|
||||
.hidden-bts {
|
||||
right: $s-2;
|
||||
z-index: $z-index-1;
|
||||
right: deprecated.$s-2;
|
||||
z-index: deprecated.$z-index-1;
|
||||
width: 22px;
|
||||
grid-template-columns: $s-8 auto 1fr;
|
||||
grid-template-columns: deprecated.$s-8 auto 1fr;
|
||||
padding: 0;
|
||||
border-inline-start: 0;
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
.palette-btn-list {
|
||||
opacity: $op-0;
|
||||
opacity: deprecated.$op-0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
.palette-item {
|
||||
opacity: $op-0;
|
||||
opacity: deprecated.$op-0;
|
||||
visibility: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
@ -171,7 +171,7 @@
|
||||
z-index: 0;
|
||||
}
|
||||
.handler {
|
||||
padding-bottom: $s-8;
|
||||
padding-bottom: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
@extend .button-secondary;
|
||||
inline-size: $sz-40;
|
||||
block-size: $sz-40;
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
border: none;
|
||||
&.selected {
|
||||
@extend .button-icon-selected;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@ -17,18 +17,18 @@
|
||||
max-height: initial;
|
||||
|
||||
&.plugin-permissions {
|
||||
width: $s-412;
|
||||
max-width: $s-412;
|
||||
width: deprecated.$s-412;
|
||||
max-width: deprecated.$s-412;
|
||||
}
|
||||
|
||||
&.plugin-management {
|
||||
width: $s-472;
|
||||
max-width: $s-472;
|
||||
width: deprecated.$s-472;
|
||||
max-width: deprecated.$s-472;
|
||||
}
|
||||
|
||||
&.plugin-try-out {
|
||||
width: $s-452;
|
||||
max-width: $s-452;
|
||||
width: deprecated.$s-452;
|
||||
max-width: deprecated.$s-452;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -50,11 +50,11 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-block-end: $s-32;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
margin-block-end: deprecated.$s-32;
|
||||
color: var(--modal-title-foreground-color);
|
||||
display: flex;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@ -62,29 +62,29 @@
|
||||
flex-direction: column;
|
||||
|
||||
.plugin-permissions & {
|
||||
gap: $s-20;
|
||||
gap: deprecated.$s-20;
|
||||
}
|
||||
|
||||
.plugin-management & {
|
||||
height: $s-380;
|
||||
max-height: $s-380;
|
||||
height: deprecated.$s-380;
|
||||
max-height: deprecated.$s-380;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.modal-paragraph {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@extend .button-primary;
|
||||
@include headlineSmallTypography;
|
||||
padding: $s-0 $s-16;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
padding: deprecated.$s-0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.button-expand {
|
||||
@ -94,14 +94,14 @@
|
||||
|
||||
.cancel-button {
|
||||
@extend .button-secondary;
|
||||
@include headlineSmallTypography;
|
||||
padding: $s-0 $s-16;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
padding: deprecated.$s-0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@include flexCenter;
|
||||
width: $s-20;
|
||||
padding: 0 0 0 $s-8;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-20;
|
||||
padding: 0 0 0 deprecated.$s-8;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -111,58 +111,58 @@
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.open-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: $s-68;
|
||||
min-width: $s-68;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-68;
|
||||
min-width: deprecated.$s-68;
|
||||
height: deprecated.$s-32;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.plugins-list {
|
||||
padding-top: $s-20;
|
||||
padding-top: deprecated.$s-20;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.plugins-list-element {
|
||||
display: flex;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.plugin-icon {
|
||||
min-width: $s-32;
|
||||
min-height: $s-32;
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
background: var(--button-secondary-background-color-rest);
|
||||
padding: $s-2;
|
||||
border-radius: $s-4;
|
||||
padding: deprecated.$s-2;
|
||||
border-radius: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plugin-title {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.plugin-summary {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -170,15 +170,15 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-20;
|
||||
gap: deprecated.$s-20;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: $s-36 0;
|
||||
padding: deprecated.$s-36 0;
|
||||
}
|
||||
|
||||
.plugins-empty-logo {
|
||||
width: $s-44;
|
||||
height: $s-44;
|
||||
width: deprecated.$s-44;
|
||||
height: deprecated.$s-44;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -186,25 +186,25 @@
|
||||
background: var(--color-background-tertiary);
|
||||
|
||||
svg {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.plugins-empty-text {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
div.input-error {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
|
||||
.info {
|
||||
@include bodySmallTypography;
|
||||
margin-top: $s-4;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-top: deprecated.$s-4;
|
||||
|
||||
&.error {
|
||||
color: var(--input-border-color-error);
|
||||
@ -217,15 +217,15 @@ div.input-error {
|
||||
|
||||
.plugins-link {
|
||||
color: var(--color-accent-primary);
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
|
||||
svg {
|
||||
margin-top: calc(-1 * $s-2);
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
margin-top: calc(-1 * deprecated.$s-2);
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
stroke: var(--color-accent-primary);
|
||||
fill: none;
|
||||
}
|
||||
@ -237,46 +237,46 @@ div.input-error {
|
||||
.permissions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.permissions-list-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 1fr;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-24;
|
||||
stroke: var(--color-accent-primary);
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.permissions-list-text {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin: 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.permissions-disclaimer {
|
||||
@include bodySmallTypography;
|
||||
padding: $s-16;
|
||||
@include deprecated.bodySmallTypography;
|
||||
padding: deprecated.$s-16;
|
||||
background: var(--color-background-quaternary);
|
||||
color: var(--color-foreground-primary);
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.discover {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-top: $s-24;
|
||||
margin-top: deprecated.$s-24;
|
||||
|
||||
a {
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.active-users,
|
||||
.active-users-opened {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0 $s-4;
|
||||
border-radius: $br-8;
|
||||
padding: 0 deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
.active-users-list {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@ -26,8 +26,8 @@
|
||||
@extend .user-icon;
|
||||
background-color: var(--user-count-background-color);
|
||||
color: var(--user-count-foreground-color);
|
||||
z-index: $z-index-2;
|
||||
border: $s-2 solid var(--user-count-foreground-color);
|
||||
z-index: deprecated.$z-index-2;
|
||||
border: deprecated.$s-2 solid var(--user-count-foreground-color);
|
||||
}
|
||||
.session-icon {
|
||||
@extend .user-icon;
|
||||
@ -37,14 +37,14 @@
|
||||
|
||||
.active-users-opened {
|
||||
position: absolute;
|
||||
right: calc(-1 * $s-2);
|
||||
top: calc(-1 * $s-2);
|
||||
padding: $s-8;
|
||||
margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
|
||||
right: calc(-1 * deprecated.$s-2);
|
||||
top: calc(-1 * deprecated.$s-2);
|
||||
padding: deprecated.$s-8;
|
||||
margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0;
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-4;
|
||||
z-index: deprecated.$z-index-4;
|
||||
.active-users-list {
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
.users-num,
|
||||
.session-icon {
|
||||
margin-left: 0;
|
||||
|
||||
@ -4,23 +4,23 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.workspace-header-right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: $s-256;
|
||||
padding: $s-8;
|
||||
gap: $s-8;
|
||||
min-width: deprecated.$s-256;
|
||||
padding: deprecated.$s-8;
|
||||
gap: deprecated.$s-8;
|
||||
background-color: var(--panel-background-color);
|
||||
}
|
||||
|
||||
.users-section {
|
||||
position: relative;
|
||||
min-width: $s-32;
|
||||
max-width: $s-72;
|
||||
padding: $s-4 $s-6;
|
||||
min-width: deprecated.$s-32;
|
||||
max-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-4 deprecated.$s-6;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@ -28,19 +28,19 @@
|
||||
}
|
||||
|
||||
.zoom-widget {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $s-28;
|
||||
max-width: $s-48;
|
||||
width: $s-48;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-28;
|
||||
max-width: deprecated.$s-48;
|
||||
width: deprecated.$s-48;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
height: 100%;
|
||||
padding: $s-8 0;
|
||||
padding: deprecated.$s-8 0;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
@ -59,15 +59,15 @@
|
||||
|
||||
.dropdown {
|
||||
@extend .menu-dropdown;
|
||||
right: $s-2;
|
||||
top: calc($s-2 + $s-48);
|
||||
width: $s-272;
|
||||
right: deprecated.$s-2;
|
||||
top: calc(deprecated.$s-2 + deprecated.$s-48);
|
||||
width: deprecated.$s-272;
|
||||
}
|
||||
|
||||
.basic-zoom-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $s-6;
|
||||
padding: deprecated.$s-6;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
@ -76,19 +76,19 @@
|
||||
}
|
||||
|
||||
.zoom-text {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
min-width: $s-48;
|
||||
min-width: deprecated.$s-48;
|
||||
padding: 0;
|
||||
margin: 0 $s-2;
|
||||
margin: 0 deprecated.$s-2;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
@extend .button-tertiary;
|
||||
color: var(--button-tertiary-foreground-color-hover);
|
||||
height: $s-28;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-28;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.zoom-option {
|
||||
@ -115,17 +115,17 @@
|
||||
|
||||
.comments-btn {
|
||||
@extend .button-tertiary;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: 0;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -144,17 +144,17 @@
|
||||
|
||||
.history-button {
|
||||
@extend .button-tertiary;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: 0;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -172,17 +172,17 @@
|
||||
}
|
||||
|
||||
.persistence-status-widget {
|
||||
@include flexCenter;
|
||||
width: $s-28;
|
||||
height: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-24;
|
||||
margin: 0;
|
||||
border-radius: $br-circle;
|
||||
border-radius: deprecated.$br-circle;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@ -214,16 +214,16 @@
|
||||
.share-btn,
|
||||
.viewer-btn {
|
||||
@extend .button-tertiary;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: 0;
|
||||
width: $s-28;
|
||||
height: $s-28;
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
$width-settings-bar: $sz-318;
|
||||
$width-settings-bar-max: $sz-500;
|
||||
@ -15,7 +15,7 @@ $width-settings-bar-max: $sz-500;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"content resize";
|
||||
grid-template-rows: $s-52 1fr;
|
||||
grid-template-rows: deprecated.$s-52 1fr;
|
||||
grid-template-columns: 1fr 0;
|
||||
position: relative;
|
||||
grid-area: left-sidebar;
|
||||
@ -25,7 +25,7 @@ $width-settings-bar-max: $sz-500;
|
||||
background-color: var(--panel-background-color);
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
|
||||
.resize-area {
|
||||
grid-area: resize;
|
||||
@ -33,7 +33,7 @@ $width-settings-bar-max: $sz-500;
|
||||
}
|
||||
|
||||
.layers-tab {
|
||||
padding-top: $s-4;
|
||||
padding-top: deprecated.$s-4;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@ -43,21 +43,21 @@ $width-settings-bar-max: $sz-500;
|
||||
|
||||
.settings-bar-content {
|
||||
grid-area: content;
|
||||
right: calc(-1 * $s-8);
|
||||
right: calc(-1 * deprecated.$s-8);
|
||||
}
|
||||
|
||||
.resize-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: unset;
|
||||
z-index: $z-index-4;
|
||||
width: $s-8;
|
||||
z-index: deprecated.$z-index-4;
|
||||
width: deprecated.$s-8;
|
||||
cursor: ew-resize;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-spacing {
|
||||
margin-inline: $s-12;
|
||||
margin-inline: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.right-settings-bar {
|
||||
@ -67,7 +67,7 @@ $width-settings-bar-max: $sz-500;
|
||||
height: 100vh;
|
||||
width: $width-settings-bar;
|
||||
background-color: var(--panel-background-color);
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
&.not-expand {
|
||||
max-width: $width-settings-bar;
|
||||
}
|
||||
@ -80,7 +80,7 @@ $width-settings-bar-max: $sz-500;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 100%;
|
||||
|
||||
height: calc(100vh - $s-52);
|
||||
height: calc(100vh - deprecated.$s-52);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -90,13 +90,13 @@ $width-settings-bar-max: $sz-500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: $s-3 0 $s-1 0;
|
||||
height: $s-6;
|
||||
padding: deprecated.$s-3 0 deprecated.$s-1 0;
|
||||
height: deprecated.$s-6;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.resize-handle-horiz {
|
||||
border-bottom: $s-2 solid var(--resize-area-border-color);
|
||||
border-bottom: deprecated.$s-2 solid var(--resize-area-border-color);
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
@ -107,11 +107,11 @@ $width-settings-bar-max: $sz-500;
|
||||
|
||||
.collapse-sidebar-button {
|
||||
--collapse-icon-color: var(--color-foreground-secondary);
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
border-radius: $br-5;
|
||||
width: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-5;
|
||||
color: var(--collapse-icon-color);
|
||||
transform: rotate(180deg);
|
||||
&:hover {
|
||||
@ -122,5 +122,5 @@ $width-settings-bar-max: $sz-500;
|
||||
.versions-tab {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - $s-88);
|
||||
height: calc(100vh - deprecated.$s-88);
|
||||
}
|
||||
|
||||
@ -4,69 +4,69 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.assets-bar {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-auto-rows: max-content;
|
||||
// TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height
|
||||
height: calc(100vh - $s-92);
|
||||
height: calc(100vh - deprecated.$s-92);
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: auto;
|
||||
padding-top: $s-8;
|
||||
padding-top: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.libraries-button {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
gap: deprecated.$s-2;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $s-8;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$s-8;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-secondary-background-color-hover);
|
||||
color: var(--button-secondary-foreground-color-hover);
|
||||
border: $s-1 solid var(--button-secondary-border-color-hover);
|
||||
border: deprecated.$s-1 solid var(--button-secondary-border-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--button-secondary-background-color-focus);
|
||||
color: var(--button-secondary-foreground-color-focus);
|
||||
border: $s-1 solid var(--button-secondary-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-secondary-border-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.add-library-button {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
gap: $s-2;
|
||||
height: $s-32;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
gap: deprecated.$s-2;
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $s-8;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.section-button {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
margin: 0;
|
||||
border: $s-1 solid var(--input-border-color-rest);
|
||||
border-radius: $br-8 $br-2 $br-2 $br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-rest);
|
||||
border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
|
||||
background-color: var(--input-background-color-rest);
|
||||
|
||||
svg {
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
outline: 0;
|
||||
background-color: var(--input-background-color-focus);
|
||||
color: var(--input-foreground-color-focus);
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-hover);
|
||||
background-color: var(--input-background-color-hover);
|
||||
|
||||
svg {
|
||||
@ -86,7 +86,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
outline: 0;
|
||||
background-color: var(--input-background-color-focus);
|
||||
color: var(--input-foreground-color-focus);
|
||||
@ -103,37 +103,37 @@
|
||||
}
|
||||
|
||||
.sections-container {
|
||||
@include menuShadow;
|
||||
@include flexColumn;
|
||||
@include deprecated.menuShadow;
|
||||
@include deprecated.flexColumn;
|
||||
position: absolute;
|
||||
top: $s-84;
|
||||
left: $s-12;
|
||||
width: $s-192;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
top: deprecated.$s-84;
|
||||
left: deprecated.$s-12;
|
||||
width: deprecated.$s-192;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.section-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
}
|
||||
|
||||
.assets-header {
|
||||
padding: 0 0 $s-24 $s-12;
|
||||
padding: 0 0 deprecated.$s-24 deprecated.$s-12;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// TODO: we should be using subgrid in the common "assets component" to avoid
|
||||
// using this SCSS variable here (we cannot use a CSS var in this CSS module because
|
||||
// the elements are not part of the same cascade).
|
||||
$assets-button-width: $s-28;
|
||||
$assets-button-width: deprecated.$s-28;
|
||||
|
||||
.colors-group {
|
||||
margin-top: $s-4;
|
||||
margin-top: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.asset-list {
|
||||
padding: 0 0 0 $s-4;
|
||||
padding: 0 0 0 deprecated.$s-4;
|
||||
}
|
||||
|
||||
.asset-list-item {
|
||||
@ -24,24 +24,24 @@ $assets-button-width: $s-28;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr #{$assets-button-width};
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
padding-inline-end: 0;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br-8;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
border: $s-1 solid var(--assets-item-border-color);
|
||||
border: deprecated.$s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
input.element-name {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.removeInputStyle;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
color: var(--layer-row-foreground-color);
|
||||
@ -53,41 +53,41 @@ $assets-button-width: $s-28;
|
||||
}
|
||||
|
||||
.bullet-block {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-inline-end: $s-4;
|
||||
margin-inline-end: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.name-block {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
margin: 0;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
|
||||
.default-name {
|
||||
margin-inline-start: $s-4;
|
||||
margin-inline-start: deprecated.$s-4;
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
}
|
||||
|
||||
.default-name-with-color {
|
||||
margin-left: $s-6;
|
||||
margin-left: deprecated.$s-6;
|
||||
}
|
||||
|
||||
.element-name {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.grid-placeholder {
|
||||
height: $s-2;
|
||||
margin-bottom: $s-2;
|
||||
height: deprecated.$s-2;
|
||||
margin-bottom: deprecated.$s-2;
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.drop-space {
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.dragging {
|
||||
@ -96,7 +96,7 @@ $assets-button-width: $s-28;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
background-color: var(--assets-item-background-color-drag);
|
||||
border: $s-2 solid var(--assets-item-border-color-drag);
|
||||
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.title-name {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.title-tokens {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@ -24,12 +24,12 @@
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
@include flexCenter;
|
||||
padding-right: $s-2;
|
||||
@include deprecated.flexCenter;
|
||||
padding-right: deprecated.$s-2;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
@ -38,37 +38,37 @@
|
||||
.section-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 $s-2;
|
||||
margin: 0 deprecated.$s-2;
|
||||
}
|
||||
|
||||
.num-assets {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
padding-left: $s-8;
|
||||
padding-left: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.title-spacing {
|
||||
padding-block-start: $s-4;
|
||||
padding-block-start: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.asset-section.opened {
|
||||
margin-bottom: $s-12;
|
||||
margin-bottom: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.drag-counter {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc($s-24 - $s-2);
|
||||
height: calc(deprecated.$s-24 - deprecated.$s-2);
|
||||
background-color: var(--assets-item-name-background-color);
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: $s-4;
|
||||
padding-inline: $s-4;
|
||||
margin: deprecated.$s-4;
|
||||
padding-inline: deprecated.$s-4;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@ -4,59 +4,59 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.drop-space {
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.drop-space-small {
|
||||
height: $s-2;
|
||||
height: deprecated.$s-2;
|
||||
}
|
||||
|
||||
.asset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax($s-96, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-96, 1fr));
|
||||
max-width: 100%;
|
||||
gap: $s-4;
|
||||
margin-inline: $s-8;
|
||||
gap: deprecated.$s-4;
|
||||
margin-inline: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-component-background-color);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.variant-mark {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: $s-4;
|
||||
bottom: $s-4;
|
||||
height: calc($s-24 - $s-2);
|
||||
width: calc(100% - 2 * $s-4);
|
||||
padding: $s-2 $s-6;
|
||||
column-gap: $s-4;
|
||||
border-radius: $br-4;
|
||||
left: deprecated.$s-4;
|
||||
bottom: deprecated.$s-4;
|
||||
height: calc(deprecated.$s-24 - deprecated.$s-2);
|
||||
width: calc(100% - 2 * deprecated.$s-4);
|
||||
padding: deprecated.$s-2 deprecated.$s-6;
|
||||
column-gap: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
background-color: var(--assets-item-name-background-color);
|
||||
border: $s-1 solid transparent;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
|
||||
input {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.removeInputStyle;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
&.editing {
|
||||
border-color: var(--input-border-color-focus);
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--input-background-color);
|
||||
@ -83,18 +83,18 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: $s-2 solid var(--assets-item-border-color);
|
||||
border: deprecated.$s-2 solid var(--assets-item-border-color);
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: $z-index-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: $s-4 solid var(--assets-component-second-border-selected);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-4 solid var(--assets-component-second-border-selected);
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
.component-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
@ -115,9 +115,9 @@
|
||||
|
||||
.grid-placeholder {
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color-drag);
|
||||
border: $s-2 solid var(--assets-item-border-color-drag);
|
||||
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
|
||||
}
|
||||
|
||||
.enum-item {
|
||||
@ -125,17 +125,17 @@
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
column-gap: $s-8;
|
||||
height: $s-44;
|
||||
padding-right: $s-4;
|
||||
padding: $s-1;
|
||||
border: $s-1 solid transparent;
|
||||
border-radius: $br-8;
|
||||
column-gap: deprecated.$s-8;
|
||||
height: deprecated.$s-44;
|
||||
padding-right: deprecated.$s-4;
|
||||
padding: deprecated.$s-1;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $s-4;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -155,58 +155,58 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: $s-1 solid var(--assets-item-border-color);
|
||||
border: deprecated.$s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.enum-item-with-mark {
|
||||
grid-template-columns: auto 1fr $s-24;
|
||||
padding-right: $s-4;
|
||||
grid-template-columns: auto 1fr deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
order: 2;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
|
||||
input {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
height: $s-32;
|
||||
padding: $s-4;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.removeInputStyle;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-4;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-inline-end: $s-4;
|
||||
padding-inline-end: deprecated.$s-4;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
column-gap: $s-8;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
column-gap: deprecated.$s-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.asset-list-thumbnail {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
flex-shrink: 0;
|
||||
padding: $s-2;
|
||||
height: $s-40;
|
||||
width: $s-40;
|
||||
border-radius: $br-6;
|
||||
padding: deprecated.$s-2;
|
||||
height: deprecated.$s-40;
|
||||
width: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-6;
|
||||
background-color: var(--assets-component-background-color);
|
||||
}
|
||||
|
||||
.grid-placeholder {
|
||||
height: $s-2;
|
||||
height: deprecated.$s-2;
|
||||
width: 100%;
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
@ -222,21 +222,21 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
background-color: var(--assets-item-background-color-drag);
|
||||
border: $s-2 solid var(--assets-item-border-color-drag);
|
||||
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
|
||||
}
|
||||
|
||||
.variant-mark-cell {
|
||||
position: absolute;
|
||||
right: $s-2;
|
||||
top: $s-2;
|
||||
right: deprecated.$s-2;
|
||||
top: deprecated.$s-2;
|
||||
}
|
||||
|
||||
.component-icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
order: 3;
|
||||
color: var(--color-accent-secondary);
|
||||
}
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
.tool-window {
|
||||
padding: 0 0 $s-24 $s-12;
|
||||
padding: 0 0 deprecated.$s-24 deprecated.$s-12;
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -28,23 +28,23 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: $s-32;
|
||||
padding-left: calc($s-12 + $s-2);
|
||||
height: deprecated.$s-32;
|
||||
padding-left: calc(deprecated.$s-12 + deprecated.$s-2);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.special-title {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
color: var(--title-foreground-color-hover);
|
||||
margin-left: $s-2;
|
||||
margin-left: deprecated.$s-2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
border-radius: deprecated.$br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -56,32 +56,32 @@
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.asset-title {
|
||||
margin-left: $s-28;
|
||||
margin-left: deprecated.$s-28;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.no-found-icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
background-color: var(--not-found-background-color);
|
||||
border-radius: $br-circle;
|
||||
height: $s-48;
|
||||
width: $s-48;
|
||||
border-radius: deprecated.$br-circle;
|
||||
height: deprecated.$s-48;
|
||||
width: deprecated.$s-48;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
stroke: var(--not-found-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.no-found-text {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--not-found-foreground-color);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.group-title-wrapper {
|
||||
width: 100%;
|
||||
@ -29,18 +29,18 @@
|
||||
}
|
||||
|
||||
.group-title {
|
||||
padding-left: $s-4;
|
||||
padding-left: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.pre-path {
|
||||
margin-left: $s-2;
|
||||
margin-left: deprecated.$s-2;
|
||||
text-transform: initial;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.path {
|
||||
@include textEllipsis;
|
||||
margin-left: $s-2;
|
||||
@include deprecated.textEllipsis;
|
||||
margin-left: deprecated.$s-2;
|
||||
text-transform: initial;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
@ -54,11 +54,11 @@
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -67,14 +67,14 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend .input-with-label;
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.assets-list {
|
||||
padding: 0 0 0 $s-4;
|
||||
padding: 0 0 0 deprecated.$s-4;
|
||||
}
|
||||
|
||||
.drop-space {
|
||||
height: $s-12;
|
||||
height: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.grid-placeholder {
|
||||
height: $s-2;
|
||||
height: deprecated.$s-2;
|
||||
width: 100%;
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
@ -24,8 +24,8 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br-8;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: $s-2 solid var(--assets-item-border-color-drag);
|
||||
border-radius: $s-8;
|
||||
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
|
||||
border-radius: deprecated.$s-8;
|
||||
background-color: var(--assets-item-background-color-drag);
|
||||
}
|
||||
|
||||
@ -4,35 +4,35 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.collapsed-sidebar {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: absolute;
|
||||
top: $s-48;
|
||||
top: deprecated.$s-48;
|
||||
left: 0;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
background: var(--color-background-primary);
|
||||
margin-inline-start: var(--sp-m);
|
||||
}
|
||||
.collapsed-title {
|
||||
@include flexCenter;
|
||||
height: $s-36;
|
||||
width: $s-24;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-36;
|
||||
width: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-8;
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
.collapsed-button {
|
||||
@include buttonStyle;
|
||||
height: $s-24;
|
||||
width: $s-16;
|
||||
@include deprecated.buttonStyle;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-16;
|
||||
padding: 0;
|
||||
border-radius: $br-5;
|
||||
border-radius: deprecated.$br-5;
|
||||
svg {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
@ -4,29 +4,29 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.shape-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--panel-background-color);
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.shape-info-title {
|
||||
@include flexCenter;
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 $s-8 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--panel-title-background-color);
|
||||
|
||||
span {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
@ -35,11 +35,11 @@
|
||||
.close-button {
|
||||
@extend .button-tertiary;
|
||||
position: absolute;
|
||||
right: $s-2;
|
||||
top: $s-2;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: $br-6;
|
||||
right: deprecated.$s-2;
|
||||
top: deprecated.$s-2;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
border-radius: deprecated.$br-6;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -47,19 +47,19 @@
|
||||
}
|
||||
|
||||
.attrs-container {
|
||||
padding: $s-16 $s-8;
|
||||
padding: deprecated.$s-16 deprecated.$s-8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shape-title {
|
||||
font-size: $fs-14;
|
||||
padding-bottom: $s-4;
|
||||
font-size: deprecated.$fs-14;
|
||||
padding-bottom: deprecated.$s-4;
|
||||
background: var(--color-background-quaternary);
|
||||
color: var(--color-foreground-primary);
|
||||
padding: $s-8;
|
||||
border-radius: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
.shape-name {
|
||||
flex: 1;
|
||||
@ -68,7 +68,7 @@
|
||||
.attrs-container-attr {
|
||||
display: grid;
|
||||
grid-template-columns: 25% auto;
|
||||
padding: $s-4 0;
|
||||
padding: deprecated.$s-4 0;
|
||||
|
||||
&.vertical-layout {
|
||||
grid-template-columns: auto;
|
||||
@ -90,12 +90,12 @@
|
||||
.shape-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.point-list {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.cell-container {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.history-toolbox {
|
||||
display: flex;
|
||||
@ -13,59 +13,59 @@
|
||||
}
|
||||
|
||||
.history-toolbox-title {
|
||||
@include flexCenter;
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
position: relative;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 $s-8 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin: deprecated.$s-8 deprecated.$s-8 0 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--panel-title-background-color);
|
||||
|
||||
span {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.history-entry-empty {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
padding: $s-28 $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
padding: deprecated.$s-28 deprecated.$s-16;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-entry-empty-icon {
|
||||
@extend .empty-icon;
|
||||
svg {
|
||||
margin-left: calc(-1 * $s-2);
|
||||
margin-left: calc(-1 * deprecated.$s-2);
|
||||
}
|
||||
}
|
||||
|
||||
.history-entry-empty-msg {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--empty-message-foreground-color);
|
||||
}
|
||||
|
||||
.history-entries {
|
||||
height: calc(100vh - $s-100);
|
||||
padding: $s-12;
|
||||
height: calc(100vh - deprecated.$s-100);
|
||||
padding: deprecated.$s-12;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: $s-32;
|
||||
margin: $s-4;
|
||||
padding: $s-4 $s-8;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $s-8;
|
||||
min-height: deprecated.$s-32;
|
||||
margin: deprecated.$s-4;
|
||||
padding: deprecated.$s-4 deprecated.$s-8;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
border-radius: deprecated.$s-8;
|
||||
background-color: var(--entry-background-color);
|
||||
cursor: pointer;
|
||||
transition: border 0.2s;
|
||||
@ -80,11 +80,11 @@
|
||||
}
|
||||
}
|
||||
.history-entry-summary-text {
|
||||
margin: 0 $s-8;
|
||||
margin: 0 deprecated.$s-8;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
.history-entry-summary-button {
|
||||
opacity: $op-0;
|
||||
opacity: deprecated.$op-0;
|
||||
margin-left: auto;
|
||||
&.button-opened {
|
||||
svg {
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
.history-entry-detail {
|
||||
display: block;
|
||||
padding-top: $s-16;
|
||||
padding-top: deprecated.$s-16;
|
||||
color: var(--modal-text-foreground-color);
|
||||
.history-entry-details-list {
|
||||
margin: 0;
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
}
|
||||
.history-entry-summary-button {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
&.button-opened {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
|
||||
@ -4,32 +4,34 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.layer-row {
|
||||
--layer-indentation-size: calc(#{$s-4} * 6);
|
||||
--layer-indentation-size: calc(#{deprecated.$s-4} * 6);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--layer-row-background-color);
|
||||
border: $s-2 solid transparent;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
|
||||
&.highlight,
|
||||
&:hover {
|
||||
--context-hover-color: var(--layer-row-foreground-color-hover);
|
||||
--context-hover-opacity: $op-10;
|
||||
--context-hover-opacity: deprecated.$op-10;
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
color: var(--layer-row-foreground-color-hover);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-hover);
|
||||
&.hidden {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-selected);
|
||||
}
|
||||
|
||||
&.selected.highlight,
|
||||
@ -39,23 +41,25 @@
|
||||
|
||||
.parent-selected & {
|
||||
background-color: var(--layer-child-row-background-color);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-child-row-background-color);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-child-row-background-color);
|
||||
}
|
||||
|
||||
.parent-selected &.highlight,
|
||||
.parent-selected &:hover {
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-hover);
|
||||
}
|
||||
|
||||
&.dnd-over-bot {
|
||||
border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
|
||||
border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
&.dnd-over-top {
|
||||
border-top: $s-2 solid var(--layer-row-foreground-color-hover);
|
||||
border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
&.dnd-over {
|
||||
border: $s-2 solid var(--layer-row-foreground-color-hover);
|
||||
border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +67,8 @@
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-selected);
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
color: var(--layer-row-component-foreground-color);
|
||||
@ -78,13 +83,13 @@
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
column-gap: $s-4;
|
||||
height: $s-32;
|
||||
column-gap: deprecated.$s-4;
|
||||
height: deprecated.$s-32;
|
||||
width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
|
||||
cursor: pointer;
|
||||
|
||||
&.filtered {
|
||||
width: calc(100% - $s-12);
|
||||
width: calc(100% - deprecated.$s-12);
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,14 +114,14 @@
|
||||
}
|
||||
|
||||
.icon-shape {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
position: relative;
|
||||
justify-self: flex-end;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding-inline-start: $s-4;
|
||||
width: deprecated.$s-24;
|
||||
padding-inline-start: deprecated.$s-4;
|
||||
color: var(--icon-foreground);
|
||||
.layer-row.selected & {
|
||||
color: var(--layer-row-foreground-color-selected);
|
||||
@ -128,11 +133,11 @@
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.layer-row.hidden & {
|
||||
opacity: $op-7;
|
||||
opacity: deprecated.$op-7;
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
@ -142,20 +147,20 @@
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background-color: var(--layer-row-foreground-color);
|
||||
opacity: $op-4;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
border-radius: $br-2;
|
||||
opacity: deprecated.$op-4;
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
border-radius: deprecated.$br-2;
|
||||
|
||||
.layer-row.hidden & {
|
||||
opacity: $op-1;
|
||||
opacity: deprecated.$op-1;
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
background-color: var(--layer-row-component-foreground-color);
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: $op-4;
|
||||
opacity: deprecated.$op-4;
|
||||
background-color: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
.layer-row.selected & {
|
||||
@ -164,20 +169,20 @@
|
||||
}
|
||||
|
||||
.toggle-content {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
padding-inline-start: $s-8;
|
||||
width: deprecated.$s-24;
|
||||
padding-inline-start: deprecated.$s-8;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
.layer-row.hidden & {
|
||||
opacity: $op-7;
|
||||
opacity: deprecated.$op-7;
|
||||
}
|
||||
.layer-row.selected & {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
@ -187,7 +192,7 @@
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
@ -202,10 +207,10 @@
|
||||
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-24;
|
||||
width: deprecated.$s-24;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
@ -214,7 +219,7 @@
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
.layer-row.hidden & {
|
||||
opacity: $op-7;
|
||||
opacity: deprecated.$op-7;
|
||||
}
|
||||
.type-comp & {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
@ -223,22 +228,22 @@
|
||||
|
||||
.element-actions.selected & {
|
||||
display: flex;
|
||||
opacity: $op-0;
|
||||
opacity: deprecated.$op-0;
|
||||
|
||||
&.selected {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-row:hover .element-actions.selected & {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
}
|
||||
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
display: flex;
|
||||
svg {
|
||||
opacity: $op-10;
|
||||
opacity: deprecated.$op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
@ -252,15 +257,15 @@
|
||||
|
||||
:global(.sticky) {
|
||||
position: sticky;
|
||||
top: $s-0;
|
||||
z-index: $z-index-4;
|
||||
top: deprecated.$s-0;
|
||||
z-index: deprecated.$z-index-4;
|
||||
}
|
||||
|
||||
.tab-indentation {
|
||||
display: block;
|
||||
height: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
min-width: calc(var(--depth) * var(--layer-indentation-size));
|
||||
}
|
||||
.filtered {
|
||||
min-width: $s-12;
|
||||
min-width: deprecated.$s-12;
|
||||
}
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.element-name {
|
||||
--element-name-color: var(--context-hover-color, var(--layer-row-foreground-color));
|
||||
--element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color));
|
||||
--element-name-opacity: var(--context-hover-opacity, $op-7);
|
||||
--element-name-opacity: var(--context-hover-opacity, deprecated.$op-7);
|
||||
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--element-name-color);
|
||||
|
||||
@ -42,21 +42,21 @@
|
||||
--element-name-input-border-color: var(--input-border-color-focus);
|
||||
--element-name-input-color: var(--layer-row-foreground-color);
|
||||
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.removeInputStyle;
|
||||
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
max-inline-size: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
padding-inline-start: $s-6;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--element-name-input-border-color);
|
||||
padding-inline-start: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--element-name-input-border-color);
|
||||
color: var(--element-name-input-color);
|
||||
|
||||
&.selected {
|
||||
min-inline-size: $s-100;
|
||||
min-inline-size: deprecated.$s-100;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,36 +4,36 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.tool-window-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin: $s-8 0 $s-4 $s-8;
|
||||
padding-right: $s-12;
|
||||
height: deprecated.$s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
margin: deprecated.$s-8 0 deprecated.$s-4 deprecated.$s-8;
|
||||
padding-right: deprecated.$s-12;
|
||||
|
||||
&.search {
|
||||
padding: 0 $s-12 0 $s-8;
|
||||
gap: $s-4;
|
||||
padding: 0 deprecated.$s-12 0 deprecated.$s-8;
|
||||
gap: deprecated.$s-4;
|
||||
.filter-button {
|
||||
@include flexCenter;
|
||||
@include buttonStyle;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
margin: 0;
|
||||
border: $s-1 solid var(--color-background-tertiary);
|
||||
border-radius: $br-8 $br-2 $br-2 $br-8;
|
||||
border: deprecated.$s-1 solid var(--color-background-tertiary);
|
||||
border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
|
||||
background-color: var(--color-background-tertiary);
|
||||
svg {
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
&:focus {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
outline: 0;
|
||||
background-color: var(--input-background-color-active);
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-hover);
|
||||
background-color: var(--input-background-color-hover);
|
||||
svg {
|
||||
background-color: var(--input-background-color-hover);
|
||||
@ -57,17 +57,17 @@
|
||||
}
|
||||
|
||||
.page-name {
|
||||
@include uppercaseTitleTipography;
|
||||
padding: 0 $s-12;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
padding: 0 deprecated.$s-12;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.icon-search {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
padding: 0;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.focus-title {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
@ -85,10 +85,10 @@
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0 deprecated.$s-4 0 deprecated.$s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -97,30 +97,30 @@
|
||||
}
|
||||
|
||||
.focus-name {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
padding-left: $s-4;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
padding-left: deprecated.$s-4;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.focus-mode-tag-wrapper {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
margin-right: $s-12;
|
||||
margin-right: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.active-filters {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 $s-12;
|
||||
margin: 0 deprecated.$s-12;
|
||||
}
|
||||
|
||||
.layer-filter {
|
||||
@extend .button-tag;
|
||||
gap: $s-6;
|
||||
height: $s-24;
|
||||
margin: $s-2 0;
|
||||
border-radius: $br-6;
|
||||
gap: deprecated.$s-6;
|
||||
height: deprecated.$s-24;
|
||||
margin: deprecated.$s-2 0;
|
||||
border-radius: deprecated.$br-6;
|
||||
background-color: var(--pill-background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -131,8 +131,8 @@
|
||||
}
|
||||
|
||||
.layer-filter-name {
|
||||
@include flexCenter;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
||||
@ -143,26 +143,26 @@
|
||||
.filters-container {
|
||||
@extend .menu-dropdown;
|
||||
position: absolute;
|
||||
left: $s-20;
|
||||
width: $s-192;
|
||||
left: deprecated.$s-20;
|
||||
width: deprecated.$s-192;
|
||||
.filter-menu-item {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-6;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.filter-menu-item-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
.filter-menu-item-icon {
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
.filter-menu-item-name {
|
||||
padding-top: $s-2;
|
||||
padding-top: deprecated.$s-2;
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
@ -203,7 +203,7 @@
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
--calculated-height: calc(#{$s-136} + var(--height, #{$s-200}));
|
||||
--calculated-height: calc(#{deprecated.$s-136} + var(--height, #{deprecated.$s-200}));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--calculated-height));
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.tool-window {
|
||||
position: relative;
|
||||
@ -15,23 +15,23 @@
|
||||
}
|
||||
|
||||
.tab-spacing {
|
||||
margin-right: $s-12;
|
||||
margin-right: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.content-class {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: calc(100vh - $s-96);
|
||||
height: calc(100vh - deprecated.$s-96);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.element-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
width: 100%;
|
||||
height: calc(100vh - $sz-88);
|
||||
padding-top: $s-8;
|
||||
padding-top: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.read-only {
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.advanced-options-wrapper {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.presets {
|
||||
display: grid;
|
||||
@ -19,12 +19,12 @@
|
||||
position: relative;
|
||||
grid-column: span 6;
|
||||
display: flex;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.collapsed-icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.select-name {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@ -55,14 +55,14 @@
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
margin-top: $s-2;
|
||||
margin-top: deprecated.$s-2;
|
||||
max-height: 70vh;
|
||||
width: $s-252;
|
||||
width: deprecated.$s-252;
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
.name-wrapper {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
flex-grow: 1;
|
||||
.preset-name {
|
||||
color: var(--menu-foreground-color-rest);
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.align-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
column-gap: var(--sp-xs);
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
.align-group-horizontal,
|
||||
.align-group-vertical {
|
||||
@ -30,10 +30,10 @@
|
||||
|
||||
.align-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user