mirror of
https://github.com/penpot/penpot.git
synced 2026-05-08 09:38:43 +00:00
💄 Add deprecated namespace and fix import for remaining scss files (#7379)
This commit is contained in:
Belén Albeza
GitHub
parent
a5e4de97e3
commit
49d5987b15
@ -4,17 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.auth-section {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
background: var(--panel-background-color);
|
||||
display: grid;
|
||||
gap: $s-32;
|
||||
gap: deprecated.$s-32;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
height: 100%;
|
||||
padding: $s-32;
|
||||
padding: deprecated.$s-32;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@ -36,13 +36,13 @@
|
||||
|
||||
.logo-container {
|
||||
position: absolute;
|
||||
top: $s-20;
|
||||
left: $s-20;
|
||||
top: deprecated.$s-20;
|
||||
left: deprecated.$s-20;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: $s-120;
|
||||
height: $s-96;
|
||||
margin-block-end: $s-52;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-96;
|
||||
margin-block-end: deprecated.$s-52;
|
||||
}
|
||||
|
||||
.login-illustration {
|
||||
@ -67,18 +67,18 @@
|
||||
grid-column: 4 / 6;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
height: fit-content;
|
||||
max-width: $s-412;
|
||||
padding-block-end: $s-8;
|
||||
max-width: deprecated.$s-412;
|
||||
padding-block-end: deprecated.$s-8;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-btn {
|
||||
svg {
|
||||
width: $s-120;
|
||||
height: $s-40;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-40;
|
||||
fill: var(--main-icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.auth-form-wrapper {
|
||||
width: 100%;
|
||||
padding-block-end: 0;
|
||||
display: grid;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
margin-top: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
width: 100%;
|
||||
padding-block-end: 0;
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@ -32,57 +32,57 @@
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.auth-tagline {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
margin: 0;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
--input-width: 100%;
|
||||
--input-height: #{$s-40};
|
||||
--input-height: #{deprecated.$s-40};
|
||||
--input-min-width: 100%;
|
||||
}
|
||||
|
||||
.buttons-stack {
|
||||
display: grid;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.login-button,
|
||||
.login-ldap-button {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.go-back {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
padding: 0;
|
||||
border-block-start: none;
|
||||
}
|
||||
|
||||
.go-back-link {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-40;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: grid;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.register,
|
||||
@ -91,7 +91,7 @@
|
||||
.demo-account {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
.account-text,
|
||||
.recovery-text,
|
||||
.demo-account-text {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
text-align: right;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
@ -109,7 +109,7 @@
|
||||
.recovery-link,
|
||||
.forgot-pass-link,
|
||||
.demo-account-link {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@ -130,22 +130,22 @@
|
||||
.register-btn,
|
||||
.recover-btn {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
height: $s-40;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-6;
|
||||
gap: deprecated.$s-6;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
color: var(--button-foreground-color-focus);
|
||||
span {
|
||||
padding-block-start: $s-2;
|
||||
padding-block-start: deprecated.$s-2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -156,5 +156,5 @@
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
|
||||
.submit-btn {
|
||||
margin-top: $s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
}
|
||||
|
||||
@ -4,16 +4,16 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
|
||||
.fields-row {
|
||||
margin-bottom: $s-8;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.notification-text-email {
|
||||
@include medTitleTipography;
|
||||
font-size: $fs-20;
|
||||
@include deprecated.medTitleTipography;
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
margin-inline: $s-36;
|
||||
margin-inline: deprecated.$s-36;
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
|
||||
.accept-terms-and-privacy-wrapper {
|
||||
:global(a) {
|
||||
color: var(--color-foreground-secondary);
|
||||
font-weight: $fw700;
|
||||
font-weight: deprecated.$fw700;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,13 +20,13 @@
|
||||
}
|
||||
|
||||
.register-form {
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.register-success {
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
.auth-title {
|
||||
@include medTitleTipography;
|
||||
@include deprecated.medTitleTipography;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,30 +34,30 @@
|
||||
fill: var(--main-icon-foreground);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $s-32;
|
||||
margin-bottom: deprecated.$s-32;
|
||||
svg {
|
||||
width: $s-92;
|
||||
height: $s-92;
|
||||
width: deprecated.$s-92;
|
||||
height: deprecated.$s-92;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.notification-text-email {
|
||||
@include medTitleTipography;
|
||||
font-size: $fs-20;
|
||||
@include deprecated.medTitleTipography;
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
margin-inline: $s-36;
|
||||
margin-inline: deprecated.$s-36;
|
||||
}
|
||||
|
||||
.logo-btn {
|
||||
height: $s-40;
|
||||
height: deprecated.$s-40;
|
||||
svg {
|
||||
width: $s-120;
|
||||
height: $s-40;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-40;
|
||||
fill: var(--main-icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -65,20 +65,20 @@
|
||||
.logo-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: $s-120;
|
||||
margin-block-end: $s-24;
|
||||
width: deprecated.$s-120;
|
||||
margin-block-end: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.terms-register {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.and-text {
|
||||
border-bottom: $s-1 solid transparent;
|
||||
border-bottom: deprecated.$s-1 solid transparent;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
|
||||
@ -4,32 +4,32 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard-comments-section {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: relative;
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
.thread-groups {
|
||||
height: calc(100% - $s-32);
|
||||
max-height: $s-440;
|
||||
height: calc(100% - deprecated.$s-32);
|
||||
max-height: deprecated.$s-440;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.thread-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
}
|
||||
|
||||
.thread-groups-placeholder {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-12;
|
||||
padding: $s-24;
|
||||
font-size: deprecated.$fs-12;
|
||||
padding: deprecated.$s-24;
|
||||
text-align: center;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -37,22 +37,22 @@
|
||||
.comments-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
margin-bottom: $s-24;
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.comment-button {
|
||||
position: relative;
|
||||
.unread {
|
||||
position: absolute;
|
||||
width: $s-8;
|
||||
height: $s-8;
|
||||
border: $s-2 solid var(--color-background-tertiary);
|
||||
width: deprecated.$s-8;
|
||||
height: deprecated.$s-8;
|
||||
border: deprecated.$s-2 solid var(--color-background-tertiary);
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
top: $s-6;
|
||||
right: $s-6;
|
||||
top: deprecated.$s-6;
|
||||
right: deprecated.$s-6;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,18 +62,18 @@
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@include menuShadow;
|
||||
@include deprecated.menuShadow;
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid transparent;
|
||||
bottom: $s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
bottom: deprecated.$s-4;
|
||||
height: 40vh;
|
||||
max-height: $s-480;
|
||||
min-height: $s-200;
|
||||
max-height: deprecated.$s-480;
|
||||
min-height: deprecated.$s-200;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
z-index: $z-index-4;
|
||||
z-index: deprecated.$z-index-4;
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
@ -83,15 +83,15 @@
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
height: $s-40;
|
||||
height: deprecated.$s-40;
|
||||
align-items: center;
|
||||
padding: 0 $s-12;
|
||||
gap: $s-4;
|
||||
padding: 0 deprecated.$s-12;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-11;
|
||||
font-size: deprecated.$fs-11;
|
||||
line-height: 1.28;
|
||||
flex-grow: 1;
|
||||
text-transform: uppercase;
|
||||
@ -102,7 +102,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
&.mark-all-as-read-button {
|
||||
border-radius: $s-8;
|
||||
border: $s-1 solid;
|
||||
border-radius: deprecated.$s-8;
|
||||
border: deprecated.$s-1 solid;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,31 +4,31 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
margin-right: $s-16;
|
||||
margin-right: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
&.dashboard-shared {
|
||||
width: calc(100vw - $s-320);
|
||||
margin-right: $s-52;
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.new-file {
|
||||
margin-inline-end: $s-8;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@ -37,5 +37,5 @@
|
||||
}
|
||||
|
||||
.placeholder-placement {
|
||||
margin: $s-16 $s-32;
|
||||
margin: deprecated.$s-16 deprecated.$s-32;
|
||||
}
|
||||
|
||||
@ -4,35 +4,35 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-fonts {
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: $s-120;
|
||||
padding-left: deprecated.$s-120;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-120;
|
||||
padding-bottom: deprecated.$s-120;
|
||||
|
||||
.btn-primary {
|
||||
font-size: $fs-11;
|
||||
height: $s-32;
|
||||
min-width: $s-100;
|
||||
font-size: deprecated.$fs-11;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-100;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-installed-fonts {
|
||||
max-width: $s-1000;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: $s-24;
|
||||
margin-top: deprecated.$s-24;
|
||||
flex-direction: column;
|
||||
|
||||
h3 {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-secondary);
|
||||
margin: $s-4;
|
||||
margin: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.font-item {
|
||||
@ -44,18 +44,18 @@
|
||||
align-items: center;
|
||||
color: var(--color-foreground-secondary);
|
||||
display: flex;
|
||||
font-size: $fs-12;
|
||||
height: $s-40;
|
||||
padding-left: $s-24;
|
||||
font-size: deprecated.$fs-12;
|
||||
height: deprecated.$s-40;
|
||||
padding-left: deprecated.$s-24;
|
||||
text-transform: uppercase;
|
||||
|
||||
> .family {
|
||||
min-width: $s-200;
|
||||
width: $s-200;
|
||||
min-width: deprecated.$s-200;
|
||||
width: deprecated.$s-200;
|
||||
}
|
||||
|
||||
> .variants {
|
||||
padding-left: $s-12;
|
||||
padding-left: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,17 +67,17 @@
|
||||
input {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-color: transparent;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid transparent;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-14;
|
||||
height: $s-32;
|
||||
font-size: deprecated.$fs-14;
|
||||
height: deprecated.$s-32;
|
||||
margin: 0;
|
||||
padding: 0 $s-8;
|
||||
width: $s-152;
|
||||
padding: 0 deprecated.$s-8;
|
||||
width: deprecated.$s-152;
|
||||
|
||||
&:focus {
|
||||
outline: $s-1 solid var(--color-accent-primary);
|
||||
outline: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
}
|
||||
&::placeholder {
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -88,65 +88,65 @@
|
||||
.font-item {
|
||||
align-items: center;
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
color: var(--color-foreground-secondary);
|
||||
display: flex;
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
justify-content: space-between;
|
||||
margin-top: $s-4;
|
||||
max-width: $s-1000;
|
||||
padding: $s-12 $s-24;
|
||||
margin-top: deprecated.$s-4;
|
||||
max-width: deprecated.$s-1000;
|
||||
padding: deprecated.$s-12 deprecated.$s-24;
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
border: $s-1 solid transparent;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
margin: 0;
|
||||
padding: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
|
||||
&:focus {
|
||||
outline: $s-1 solid var(--color-accent-primary);
|
||||
outline: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> .family {
|
||||
min-width: $s-200;
|
||||
width: $s-200;
|
||||
min-width: deprecated.$s-200;
|
||||
width: deprecated.$s-200;
|
||||
}
|
||||
|
||||
> .filenames {
|
||||
min-width: $s-200;
|
||||
min-width: deprecated.$s-200;
|
||||
}
|
||||
|
||||
> .variants {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
padding-left: $s-16;
|
||||
gap: $s-6;
|
||||
padding-left: deprecated.$s-16;
|
||||
gap: deprecated.$s-6;
|
||||
|
||||
.variant {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $s-8 $s-12;
|
||||
padding: deprecated.$s-8 deprecated.$s-12;
|
||||
cursor: pointer;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
fill: none;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@ -166,37 +166,37 @@
|
||||
color: var(--color-foreground-primary);
|
||||
.variant {
|
||||
background-color: var(--color-background-quaternary);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
}
|
||||
|
||||
.filenames {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: $s-180;
|
||||
min-width: deprecated.$s-180;
|
||||
|
||||
.icon {
|
||||
width: $s-24;
|
||||
width: deprecated.$s-24;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-left: $s-12;
|
||||
margin-left: deprecated.$s-12;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
margin-right: $s-12;
|
||||
margin-right: deprecated.$s-12;
|
||||
svg {
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
@ -214,38 +214,38 @@
|
||||
}
|
||||
|
||||
.dashboard-fonts-upload {
|
||||
max-width: $s-1000;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.upload-button {
|
||||
width: $s-100;
|
||||
width: deprecated.$s-100;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
margin-left: $s-12;
|
||||
margin-left: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-fonts-hero {
|
||||
font-size: $fs-14;
|
||||
padding: $s-32 0;
|
||||
margin-top: $s-80;
|
||||
font-size: deprecated.$fs-14;
|
||||
padding: deprecated.$s-32 0;
|
||||
margin-top: deprecated.$s-80;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-primary {
|
||||
height: $s-40;
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
color: var(--color-background-secondary);
|
||||
width: $s-500;
|
||||
width: deprecated.$s-500;
|
||||
|
||||
h2 {
|
||||
color: var(--color-foreground-primary);
|
||||
@ -253,7 +253,7 @@
|
||||
}
|
||||
p {
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
}
|
||||
}
|
||||
|
||||
@ -264,25 +264,25 @@
|
||||
|
||||
.fonts-placeholder {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--color-background-quaternary);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-160;
|
||||
height: deprecated.$s-160;
|
||||
justify-content: center;
|
||||
margin-top: $s-16;
|
||||
max-width: $s-1000;
|
||||
margin-top: deprecated.$s-16;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
|
||||
.icon svg {
|
||||
stroke: var(--color-foreground-secondary);
|
||||
fill: none;
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,29 +4,29 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.edit-wrapper {
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
display: flex;
|
||||
padding-right: $s-24;
|
||||
padding-right: deprecated.$s-24;
|
||||
position: relative;
|
||||
margin-right: $s-24;
|
||||
margin-right: deprecated.$s-24;
|
||||
}
|
||||
|
||||
input.element-title {
|
||||
background-color: var(--input-background-color-active);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-16;
|
||||
height: $s-32;
|
||||
font-size: deprecated.$fs-16;
|
||||
height: deprecated.$s-32;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: $s-6;
|
||||
padding: deprecated.$s-6;
|
||||
width: 100%;
|
||||
|
||||
&:focus-visible {
|
||||
border: $s-1 solid var(--color-accent-primary);
|
||||
border: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -35,14 +35,14 @@ input.element-title {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
||||
top: $s-1;
|
||||
right: calc(-1 * $s-8);
|
||||
top: deprecated.$s-1;
|
||||
right: calc(-1 * deprecated.$s-8);
|
||||
|
||||
svg {
|
||||
fill: var(--color-foreground-secondary);
|
||||
height: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
&:hover {
|
||||
|
||||
@ -4,21 +4,21 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
margin-right: $s-16;
|
||||
margin-right: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.button {
|
||||
--pin-button-icon-color: var(--button-icon-foreground-color);
|
||||
--pin-button-bg-color: none;
|
||||
--pin-button-border-color: none;
|
||||
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
background: var(--pin-button-bg-color);
|
||||
border: $s-2 solid var(--pin-button-border-color);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-2 solid var(--pin-button-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
cursor: pointer;
|
||||
@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
fill: none;
|
||||
stroke: var(--pin-button-icon-color);
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./grid.scss" as g;
|
||||
@use "ds/typography.scss" as t;
|
||||
|
||||
.grid-empty-placeholder {
|
||||
border-radius: $br-12;
|
||||
border-radius: deprecated.$br-12;
|
||||
display: grid;
|
||||
padding: $s-12 0;
|
||||
padding: deprecated.$s-12 0;
|
||||
|
||||
&.libs {
|
||||
background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
|
||||
@ -20,13 +20,13 @@
|
||||
85% top;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
border: $s-1 solid var(--color-background-quaternary);
|
||||
border-radius: $br-4;
|
||||
border: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
border-radius: deprecated.$br-4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-200;
|
||||
margin: $s-16;
|
||||
padding: $s-48;
|
||||
height: deprecated.$s-200;
|
||||
margin: deprecated.$s-16;
|
||||
padding: deprecated.$s-48;
|
||||
justify-content: center;
|
||||
|
||||
.text {
|
||||
@ -35,32 +35,32 @@
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: $s-360;
|
||||
max-width: deprecated.$s-360;
|
||||
text-align: center;
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-new {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--color-foreground-primary);
|
||||
cursor: pointer;
|
||||
height: $s-160;
|
||||
margin: $s-8;
|
||||
border: $s-2 solid transparent;
|
||||
height: deprecated.$s-160;
|
||||
margin: deprecated.$s-8;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
width: var(--th-width, #{g.$thumbnail-default-width});
|
||||
height: var(--th-height, #{g.$thumbnail-default-height});
|
||||
|
||||
svg {
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
stroke: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-2 solid var(--color-accent-tertiary);
|
||||
border: deprecated.$s-2 solid var(--color-accent-tertiary);
|
||||
background-color: var(--color-background-quaternary);
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
@ -71,9 +71,9 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
|
||||
.placeholder-text {
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -100,15 +100,15 @@
|
||||
}
|
||||
|
||||
.empty-placeholder-libraries {
|
||||
margin: $s-16;
|
||||
margin: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.empty-project-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.empty-project-card {
|
||||
@ -121,8 +121,8 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--color-card-background);
|
||||
border: $s-2 solid var(--color-background-quaternary);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-2 solid var(--color-background-quaternary);
|
||||
border-radius: deprecated.$br-8;
|
||||
padding: var(--sp-m) 0;
|
||||
|
||||
&:hover {
|
||||
@ -132,7 +132,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
.empty-project-card-title {
|
||||
font-weight: $fw500;
|
||||
font-weight: deprecated.$fw500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,39 +4,39 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
width: 100%;
|
||||
margin-right: $s-16;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
margin-right: deprecated.$s-16;
|
||||
border-top: deprecated.$s-1 solid var(--panel-border-color);
|
||||
overflow-y: auto;
|
||||
padding-bottom: $s-32;
|
||||
padding-bottom: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.dashboard-projects {
|
||||
user-select: none;
|
||||
height: calc(100vh - $s-64);
|
||||
height: calc(100vh - deprecated.$s-64);
|
||||
}
|
||||
|
||||
.with-team-hero {
|
||||
height: calc(100vh - $s-280);
|
||||
height: calc(100vh - deprecated.$s-280);
|
||||
}
|
||||
|
||||
.dashboard-shared {
|
||||
width: calc(100vw - $s-320);
|
||||
margin-right: $s-52;
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.dashboard-project-row {
|
||||
--actions-opacity: 0;
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
@ -60,12 +60,12 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
width: 99%;
|
||||
max-height: $s-40;
|
||||
padding: $s-8 $s-8 $s-8 $s-16;
|
||||
margin-top: $s-16;
|
||||
border-radius: $br-4;
|
||||
max-height: deprecated.$s-40;
|
||||
padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
border-radius: deprecated.$br-4;
|
||||
}
|
||||
|
||||
.project-name-wrapper {
|
||||
@ -73,30 +73,30 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: $s-32;
|
||||
margin-left: $s-8;
|
||||
min-height: deprecated.$s-32;
|
||||
margin-left: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include bodyLargeTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
width: fit-content;
|
||||
margin-right: $s-12;
|
||||
margin-right: deprecated.$s-12;
|
||||
line-height: 0.8;
|
||||
color: var(--title-foreground-color-hover);
|
||||
cursor: pointer;
|
||||
height: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.info,
|
||||
.recent-files-row-title-info {
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
color: var(--title-foreground-color);
|
||||
@media (max-width: 760px) {
|
||||
display: none;
|
||||
@ -106,16 +106,16 @@
|
||||
.project-actions {
|
||||
display: flex;
|
||||
opacity: var(--actions-opacity);
|
||||
margin-left: $s-32;
|
||||
margin-left: deprecated.$s-32;
|
||||
}
|
||||
|
||||
.add-file-btn,
|
||||
.options-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
margin: 0 $s-8;
|
||||
padding: $s-8;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
margin: 0 deprecated.$s-8;
|
||||
padding: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.add-icon,
|
||||
@ -126,24 +126,24 @@
|
||||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
padding: 0 $s-4;
|
||||
padding: 0 deprecated.$s-4;
|
||||
}
|
||||
|
||||
.placeholder-placement {
|
||||
margin: $s-16 $s-32;
|
||||
margin: deprecated.$s-16 deprecated.$s-32;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
--show-more-color: var(--button-secondary-foreground-color-rest);
|
||||
@include buttonStyle;
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
position: absolute;
|
||||
top: $s-8;
|
||||
right: $s-52;
|
||||
top: deprecated.$s-8;
|
||||
right: deprecated.$s-52;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
column-gap: $s-12;
|
||||
column-gap: deprecated.$s-12;
|
||||
color: var(--show-more-color);
|
||||
|
||||
&:hover {
|
||||
@ -152,8 +152,8 @@
|
||||
}
|
||||
|
||||
.show-more-icon {
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
fill: none;
|
||||
stroke: var(--show-more-color);
|
||||
}
|
||||
@ -161,16 +161,16 @@
|
||||
// Team hero
|
||||
.team-hero {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: none;
|
||||
display: flex;
|
||||
margin: $s-16;
|
||||
padding: $s-8;
|
||||
margin: deprecated.$s-16;
|
||||
padding: deprecated.$s-8;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
height: $s-200;
|
||||
border-radius: deprecated.$br-4;
|
||||
height: deprecated.$s-200;
|
||||
width: auto;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@ -185,18 +185,18 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
padding: $s-20 $s-20;
|
||||
padding: deprecated.$s-20 deprecated.$s-20;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $fs-24;
|
||||
font-size: deprecated.$fs-24;
|
||||
color: var(--color-foreground-primary);
|
||||
font-weight: $fw400;
|
||||
font-weight: deprecated.$fw400;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
font-size: $fs-16;
|
||||
font-size: deprecated.$fs-16;
|
||||
span {
|
||||
color: var(--color-foreground-secondary);
|
||||
display: block;
|
||||
@ -204,15 +204,15 @@
|
||||
a {
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
padding: $s-8 0;
|
||||
padding: deprecated.$s-8 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
--close-icon-foreground-color: var(--icon-foreground);
|
||||
position: absolute;
|
||||
top: $s-20;
|
||||
right: $s-24;
|
||||
width: $s-24;
|
||||
top: deprecated.$s-20;
|
||||
right: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@ -227,18 +227,18 @@
|
||||
}
|
||||
|
||||
.invite {
|
||||
height: $s-32;
|
||||
width: $s-180;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-180;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $s-200;
|
||||
height: $s-200;
|
||||
width: deprecated.$s-200;
|
||||
height: deprecated.$s-200;
|
||||
overflow: hidden;
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
width: 0;
|
||||
|
||||
@ -4,27 +4,27 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
@use "./placeholder.scss";
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
margin-right: $s-16;
|
||||
margin-right: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
&.dashboard-shared {
|
||||
width: calc(100vw - $s-320);
|
||||
margin-right: $s-52;
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,17 +33,17 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: $s-200;
|
||||
height: deprecated.$s-200;
|
||||
background: transparent;
|
||||
border: $s-1 solid var(--color-background-quaternary);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.text {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
.icon svg {
|
||||
stroke: var(--color-foreground-secondary);
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
.cta-top-section {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: grid;
|
||||
color: var(--color-foreground-secondary);
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.icon-dropdown {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: var(--sp-l);
|
||||
}
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
.cta-bottom-section .content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
color: var(--color-foreground-secondary);
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
.cta-link {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
align-self: end;
|
||||
margin-inline-start: var(--sp-xs);
|
||||
}
|
||||
@ -92,7 +92,7 @@
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
gap: var(--sp-s);
|
||||
max-width: $s-1000;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
}
|
||||
|
||||
.manage-subscription-link {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
@include t.use-typography("body-medium");
|
||||
color: var(--color-accent-tertiary);
|
||||
display: flex;
|
||||
@ -149,8 +149,8 @@
|
||||
.members-cta {
|
||||
height: fit-content;
|
||||
margin-block-start: var(--sp-s);
|
||||
margin-inline-start: $s-52;
|
||||
max-width: $s-220;
|
||||
margin-inline-start: deprecated.$s-52;
|
||||
max-width: deprecated.$s-220;
|
||||
|
||||
.cta-title {
|
||||
line-height: 1.2;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
// Dashboard team settings
|
||||
@ -13,33 +13,33 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
border-top: deprecated.$s-1 solid var(--panel-border-color);
|
||||
overflow-y: auto;
|
||||
padding-inline-start: $s-20;
|
||||
padding-block-start: $s-20;
|
||||
padding-inline-start: deprecated.$s-20;
|
||||
padding-block-start: deprecated.$s-20;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
gap: $s-8;
|
||||
max-width: $s-1000;
|
||||
gap: deprecated.$s-8;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
margin-block-start: $s-16;
|
||||
margin-block-start: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
@include headlineSmallTypography;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
@ -49,14 +49,14 @@
|
||||
|
||||
.block-content {
|
||||
display: grid;
|
||||
grid-template-columns: $s-32 1fr;
|
||||
grid-template-columns: deprecated.$s-32 1fr;
|
||||
align-items: center;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.owner-icon {
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -71,10 +71,10 @@
|
||||
.team-icon {
|
||||
--update-button-opacity: 0;
|
||||
position: relative;
|
||||
height: $s-120;
|
||||
width: $s-120;
|
||||
padding: $s-16;
|
||||
margin-block-end: $s-32;
|
||||
height: deprecated.$s-120;
|
||||
width: deprecated.$s-120;
|
||||
padding: deprecated.$s-16;
|
||||
margin-block-end: deprecated.$s-32;
|
||||
|
||||
&:hover {
|
||||
--update-button-opacity: 1;
|
||||
@ -86,28 +86,28 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-120;
|
||||
}
|
||||
|
||||
.update-overlay {
|
||||
opacity: var(--update-button-opacity);
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: $z-index-modal;
|
||||
border-radius: $br-circle;
|
||||
z-index: deprecated.$z-index-modal;
|
||||
border-radius: deprecated.$br-circle;
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
@extend .button-icon;
|
||||
min-width: $s-24;
|
||||
min-height: $s-24;
|
||||
min-width: deprecated.$s-24;
|
||||
min-height: deprecated.$s-24;
|
||||
stroke: var(--icon-foreground-hover);
|
||||
}
|
||||
|
||||
@ -117,9 +117,9 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-inline-start: $s-20;
|
||||
padding-block-start: $s-20;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
padding-inline-start: deprecated.$s-20;
|
||||
padding-block-start: deprecated.$s-20;
|
||||
border-top: deprecated.$s-1 solid var(--panel-border-color);
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
@ -133,31 +133,31 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: fit-content;
|
||||
max-width: $s-1000;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@include headlineSmallTypography;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 43% 1fr $s-108 $s-12;
|
||||
height: $s-40;
|
||||
grid-template-columns: 43% 1fr deprecated.$s-108 deprecated.$s-12;
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
max-width: $s-1000;
|
||||
padding: 0 $s-16;
|
||||
max-width: deprecated.$s-1000;
|
||||
padding: 0 deprecated.$s-16;
|
||||
user-select: none;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.table-rows {
|
||||
display: grid;
|
||||
grid-auto-rows: $s-64;
|
||||
gap: $s-16;
|
||||
grid-auto-rows: deprecated.$s-64;
|
||||
gap: deprecated.$s-16;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: $s-1000;
|
||||
margin-top: $s-16;
|
||||
max-width: deprecated.$s-1000;
|
||||
margin-top: deprecated.$s-16;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
@ -165,17 +165,17 @@
|
||||
display: grid;
|
||||
grid-template-columns: 43% 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-64;
|
||||
height: deprecated.$s-64;
|
||||
width: 100%;
|
||||
padding: 0 $s-16;
|
||||
border-radius: $br-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--dashboard-list-background-color);
|
||||
color: var(--dashboard-list-foreground-color);
|
||||
}
|
||||
|
||||
.title-field-name {
|
||||
width: 43%;
|
||||
min-width: $s-300;
|
||||
min-width: deprecated.$s-300;
|
||||
}
|
||||
|
||||
.title-field-roles {
|
||||
@ -186,9 +186,9 @@
|
||||
.field-name {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
width: 43%;
|
||||
min-width: $s-300;
|
||||
min-width: deprecated.$s-300;
|
||||
}
|
||||
|
||||
.field-roles {
|
||||
@ -202,9 +202,9 @@
|
||||
|
||||
// MEMBER INFO
|
||||
.member-image {
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-circle;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-circle;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
@ -215,18 +215,18 @@
|
||||
|
||||
.member-name,
|
||||
.member-email {
|
||||
@include textEllipsis;
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
}
|
||||
|
||||
.member-email {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
.you {
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
margin-left: $s-6;
|
||||
margin-left: deprecated.$s-6;
|
||||
}
|
||||
|
||||
// ROL INFO
|
||||
@ -235,14 +235,14 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
min-width: $s-160;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-160;
|
||||
width: fit-content;
|
||||
padding: $s-4 $s-8;
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-4 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
border-color: var(--menu-background-color-hover);
|
||||
background-color: var(--menu-background-color-hover);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
.has-priv {
|
||||
@ -255,9 +255,9 @@
|
||||
|
||||
.roles-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
bottom: calc(-1 * $s-76);
|
||||
bottom: calc(-1 * deprecated.$s-76);
|
||||
width: fit-content;
|
||||
min-width: $s-160;
|
||||
min-width: deprecated.$s-160;
|
||||
}
|
||||
|
||||
.rol-dropdown-item {
|
||||
@ -271,16 +271,16 @@
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
}
|
||||
|
||||
.actions-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
bottom: calc(-1 * $s-32);
|
||||
bottom: calc(-1 * deprecated.$s-32);
|
||||
right: 0;
|
||||
left: unset;
|
||||
width: fit-content;
|
||||
min-width: $s-160;
|
||||
min-width: deprecated.$s-160;
|
||||
}
|
||||
|
||||
.action-dropdown-item {
|
||||
@ -293,9 +293,9 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-inline-start: $s-20;
|
||||
padding-block-start: $s-20;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
padding-inline-start: deprecated.$s-20;
|
||||
padding-block-start: deprecated.$s-20;
|
||||
border-top: deprecated.$s-1 solid var(--panel-border-color);
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
@ -304,12 +304,12 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: fit-content;
|
||||
max-width: $s-1000;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-row-invitations {
|
||||
grid-template-columns: 43% 1fr $s-108 $s-12;
|
||||
grid-template-columns: 43% 1fr deprecated.$s-108 deprecated.$s-12;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -317,19 +317,19 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
height: $s-156;
|
||||
max-width: $s-1000;
|
||||
height: deprecated.$s-156;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
margin-top: $s-16;
|
||||
border: $s-1 solid var(--panel-border-color);
|
||||
border-radius: $br-8;
|
||||
margin-top: deprecated.$s-16;
|
||||
border: deprecated.$s-1 solid var(--panel-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
.btn-empty-invitations {
|
||||
@extend .button-primary;
|
||||
margin-block-start: $s-16;
|
||||
padding-inline: $s-12;
|
||||
margin-block-start: deprecated.$s-16;
|
||||
padding-inline: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.title-field-status {
|
||||
@ -338,15 +338,15 @@
|
||||
}
|
||||
|
||||
.field-email {
|
||||
@include textEllipsis;
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invitations-dropdown {
|
||||
bottom: calc(-1 * $s-112);
|
||||
right: calc(-1 * $s-20);
|
||||
bottom: calc(-1 * deprecated.$s-112);
|
||||
right: calc(-1 * deprecated.$s-20);
|
||||
}
|
||||
|
||||
// WEBHOOKS SECTION
|
||||
@ -354,63 +354,63 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-items: center;
|
||||
gap: $s-24;
|
||||
gap: deprecated.$s-24;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-inline-start: $s-20;
|
||||
padding-block-start: $s-20;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
padding-inline-start: deprecated.$s-20;
|
||||
padding-block-start: deprecated.$s-20;
|
||||
border-top: deprecated.$s-1 solid var(--panel-border-color);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.webhooks-hero-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
margin: $s-80 auto $s-20 auto;
|
||||
gap: $s-24;
|
||||
margin: deprecated.$s-80 auto deprecated.$s-20 auto;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.webhooks-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
height: $s-156;
|
||||
max-width: $s-1000;
|
||||
height: deprecated.$s-156;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
padding: $s-32;
|
||||
border: $s-1 solid var(--panel-border-color);
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-32;
|
||||
border: deprecated.$s-1 solid var(--panel-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
.webhooks-hero {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: $s-32;
|
||||
margin-top: $s-32;
|
||||
gap: deprecated.$s-32;
|
||||
margin-top: deprecated.$s-32;
|
||||
margin: 0;
|
||||
padding: $s-32;
|
||||
padding: deprecated.$s-32;
|
||||
padding: 0;
|
||||
width: $s-468;
|
||||
width: deprecated.$s-468;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--dashboard-list-foreground-color);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-bottom: 0;
|
||||
font-size: $fs-16;
|
||||
max-width: $s-512;
|
||||
font-size: deprecated.$fs-16;
|
||||
max-width: deprecated.$s-512;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
@extend .button-primary;
|
||||
height: $s-32;
|
||||
max-width: $s-512;
|
||||
height: deprecated.$s-32;
|
||||
max-width: deprecated.$s-512;
|
||||
}
|
||||
|
||||
.webhook-table {
|
||||
@ -421,7 +421,7 @@
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@ -430,7 +430,7 @@
|
||||
|
||||
.menu-disabled {
|
||||
color: var(--icon-foreground);
|
||||
width: $s-28;
|
||||
width: deprecated.$s-28;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -438,10 +438,10 @@
|
||||
|
||||
.webhook-actions-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
right: calc(-1 * $s-16);
|
||||
bottom: calc(-1 * $s-40);
|
||||
right: calc(-1 * deprecated.$s-16);
|
||||
bottom: calc(-1 * deprecated.$s-40);
|
||||
width: fit-content;
|
||||
min-width: $s-160;
|
||||
min-width: deprecated.$s-160;
|
||||
}
|
||||
|
||||
.webhook-dropdown-item {
|
||||
@ -461,35 +461,35 @@
|
||||
// INVITE MEMBERS MODAL
|
||||
.modal-team-container {
|
||||
@extend .modal-container-base;
|
||||
@include menuShadow;
|
||||
@include deprecated.menuShadow;
|
||||
position: fixed;
|
||||
top: $s-72;
|
||||
right: $s-12;
|
||||
top: deprecated.$s-72;
|
||||
right: deprecated.$s-12;
|
||||
left: unset;
|
||||
width: $s-400;
|
||||
padding: $s-32;
|
||||
width: deprecated.$s-400;
|
||||
padding: deprecated.$s-32;
|
||||
background-color: var(--modal-background-color);
|
||||
|
||||
&.hero {
|
||||
top: $s-216;
|
||||
right: $s-32;
|
||||
top: deprecated.$s-216;
|
||||
right: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-team-container-workspace {
|
||||
top: $s-40;
|
||||
z-index: $z-index-modal;
|
||||
top: deprecated.$s-40;
|
||||
z-index: deprecated.$z-index-modal;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
height: $s-32;
|
||||
@include deprecated.headlineMediumTypography;
|
||||
height: deprecated.$s-32;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.role-select {
|
||||
@include flexColumn;
|
||||
row-gap: $s-8;
|
||||
@include deprecated.flexColumn;
|
||||
row-gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
@ -499,20 +499,20 @@
|
||||
}
|
||||
|
||||
.invite-team-member-text {
|
||||
@include bodyLargeTypography;
|
||||
margin: 0 0 $s-16 0;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
margin: 0 0 deprecated.$s-16 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.role-title {
|
||||
@include bodyLargeTypography;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.invitation-row {
|
||||
margin-top: $s-8;
|
||||
margin-bottom: $s-24;
|
||||
margin-top: deprecated.$s-8;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@ -535,11 +535,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);
|
||||
}
|
||||
|
||||
@ -548,18 +548,18 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -585,6 +585,6 @@
|
||||
|
||||
.email-input {
|
||||
@extend .input-base;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@ -4,32 +4,32 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard-templates-section {
|
||||
background-color: var(--color-background-tertiary);
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: $br-8;
|
||||
border-bottom-right-radius: $br-8;
|
||||
border-top-right-radius: $br-8;
|
||||
border-bottom-left-radius: deprecated.$br-8;
|
||||
border-bottom-right-radius: deprecated.$br-8;
|
||||
border-top-right-radius: deprecated.$br-8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-244;
|
||||
height: deprecated.$s-244;
|
||||
justify-content: flex-end;
|
||||
margin-left: $s-6;
|
||||
margin-right: $s-6;
|
||||
margin-bottom: $s-6;
|
||||
margin-left: deprecated.$s-6;
|
||||
margin-right: deprecated.$s-6;
|
||||
margin-bottom: deprecated.$s-6;
|
||||
position: absolute;
|
||||
transition: bottom 300ms;
|
||||
width: calc(100% - $s-12);
|
||||
width: calc(100% - deprecated.$s-12);
|
||||
pointer-events: none;
|
||||
&.collapsed {
|
||||
bottom: calc(-1 * $s-228);
|
||||
bottom: calc(-1 * deprecated.$s-228);
|
||||
background-color: transparent;
|
||||
transition: bottom 300ms;
|
||||
.title-btn {
|
||||
border-bottom-right-radius: $br-8;
|
||||
border-bottom-left-radius: $br-8;
|
||||
border-bottom-right-radius: deprecated.$br-8;
|
||||
border-bottom-left-radius: deprecated.$br-8;
|
||||
}
|
||||
.content,
|
||||
.content-description {
|
||||
@ -40,23 +40,23 @@
|
||||
|
||||
.title {
|
||||
pointer-events: all;
|
||||
width: $s-420;
|
||||
top: calc(-1 * $s-40);
|
||||
width: deprecated.$s-420;
|
||||
top: calc(-1 * deprecated.$s-40);
|
||||
text-align: right;
|
||||
height: $s-56;
|
||||
height: deprecated.$s-56;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: $s-56;
|
||||
height: deprecated.$s-56;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: $br-8;
|
||||
border-top-right-radius: $br-8;
|
||||
border-top-left-radius: deprecated.$br-8;
|
||||
border-top-right-radius: deprecated.$br-8;
|
||||
position: relative;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
background-color: var(--color-background-tertiary);
|
||||
width: 100%;
|
||||
}
|
||||
@ -65,18 +65,18 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2;
|
||||
font-size: $fs-16;
|
||||
margin-left: $s-12;
|
||||
margin-right: $s-8;
|
||||
font-size: deprecated.$fs-16;
|
||||
margin-left: deprecated.$s-12;
|
||||
margin-right: deprecated.$s-8;
|
||||
color: var(--color-foreground-primary);
|
||||
font-weight: $fw400;
|
||||
font-weight: deprecated.$fw400;
|
||||
}
|
||||
|
||||
.title-icon-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: auto;
|
||||
margin-right: $s-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -84,12 +84,12 @@
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: auto;
|
||||
margin-right: $s-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.title-icon-text {
|
||||
margin-right: $s-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.title-icon-collapsed {
|
||||
@ -103,12 +103,12 @@
|
||||
|
||||
.move-button {
|
||||
position: absolute;
|
||||
top: $s-96;
|
||||
border: $s-2 solid var(--color-foreground-secondary);
|
||||
top: deprecated.$s-96;
|
||||
border: deprecated.$s-2 solid var(--color-foreground-secondary);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: $s-36;
|
||||
height: $s-36;
|
||||
width: deprecated.$s-36;
|
||||
height: deprecated.$s-36;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
display: flex;
|
||||
@ -117,7 +117,7 @@
|
||||
pointer-events: all;
|
||||
|
||||
&:hover {
|
||||
border: $s-2 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-2 solid var(--color-background-tertiary);
|
||||
background-color: var(--color-accent-primary);
|
||||
.arrow-icon {
|
||||
stroke: var(--color-background-tertiary);
|
||||
@ -127,30 +127,30 @@
|
||||
|
||||
.move-left {
|
||||
left: 0;
|
||||
margin-left: $s-44;
|
||||
margin-left: deprecated.$s-44;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.move-right {
|
||||
right: 0;
|
||||
margin-right: $s-44;
|
||||
margin-right: deprecated.$s-44;
|
||||
}
|
||||
|
||||
.content-description {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-primary);
|
||||
margin-bottom: -8px;
|
||||
margin-top: $s-16;
|
||||
margin-left: $s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
margin-left: deprecated.$s-16;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax($s-276, $s-276));
|
||||
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-276, deprecated.$s-276));
|
||||
grid-auto-flow: column;
|
||||
pointer-events: all;
|
||||
height: $s-228;
|
||||
height: deprecated.$s-228;
|
||||
overflow: scroll hidden;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x mandatory;
|
||||
@ -159,8 +159,8 @@
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: $s-276;
|
||||
margin-top: $s-20;
|
||||
width: deprecated.$s-276;
|
||||
margin-top: deprecated.$s-20;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
background-color: transparent;
|
||||
@ -171,13 +171,13 @@
|
||||
|
||||
.template-card {
|
||||
display: inline-block;
|
||||
width: $s-256;
|
||||
font-size: $fs-16;
|
||||
width: deprecated.$s-256;
|
||||
font-size: deprecated.$fs-16;
|
||||
cursor: pointer;
|
||||
color: var(--color-foreground-primary);
|
||||
padding: 0 $s-4 $s-8 $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid transparent;
|
||||
padding: 0 deprecated.$s-4 deprecated.$s-8 deprecated.$s-4;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
&:hover {
|
||||
border-color: var(--color-accent-primary);
|
||||
.download-icon {
|
||||
@ -191,29 +191,29 @@
|
||||
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: $s-136;
|
||||
margin-bottom: $s-8;
|
||||
border-radius: $br-5;
|
||||
height: deprecated.$s-136;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
}
|
||||
}
|
||||
|
||||
.card-name {
|
||||
padding: 0 $s-6;
|
||||
padding: 0 deprecated.$s-6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $s-24;
|
||||
height: deprecated.$s-24;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-weight: $fw400;
|
||||
font-size: $fs-16;
|
||||
font-weight: deprecated.$fw400;
|
||||
font-size: deprecated.$fs-16;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
@ -227,19 +227,19 @@
|
||||
}
|
||||
|
||||
.template-link {
|
||||
border: $s-2 solid transparent;
|
||||
margin: $s-32;
|
||||
padding: $s-32 0;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
margin: deprecated.$s-32;
|
||||
padding: deprecated.$s-32 0;
|
||||
}
|
||||
|
||||
.template-link-title {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--color-foreground-primary);
|
||||
font-weight: $fw400;
|
||||
font-weight: deprecated.$fw400;
|
||||
}
|
||||
|
||||
.template-link-text {
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-8;
|
||||
font-size: deprecated.$fs-12;
|
||||
margin-top: deprecated.$s-8;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
word-break: break-word;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
svg {
|
||||
width: var(--cell-size);
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.settings-bar-left {
|
||||
background-color: var(--panel-background-color);
|
||||
height: 100%;
|
||||
width: $s-256;
|
||||
width: deprecated.$s-256;
|
||||
}
|
||||
|
||||
.settings-bar-inside {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 100%;
|
||||
height: calc(100% - $s-2);
|
||||
height: calc(100% - deprecated.$s-2);
|
||||
overflow-y: auto;
|
||||
padding-top: $s-8;
|
||||
padding-top: deprecated.$s-8;
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard {
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-rows: $s-48 1fr;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
grid-template-rows: deprecated.$s-48 1fr;
|
||||
grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@ -20,26 +20,26 @@
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
grid-row: 1 / span 2;
|
||||
padding: $s-16 $s-16 0 0;
|
||||
padding: deprecated.$s-16 deprecated.$s-16 0 0;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
margin-right: $s-16;
|
||||
margin-right: deprecated.$s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid var(--color-background-quaternary);
|
||||
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
&.dashboard-shared {
|
||||
width: calc(100vw - $s-320);
|
||||
margin-right: $s-52;
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,24 +54,24 @@
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: $s-800;
|
||||
margin: $s-48 auto $s-32 $s-120;
|
||||
width: deprecated.$s-800;
|
||||
margin: deprecated.$s-48 auto deprecated.$s-32 deprecated.$s-120;
|
||||
display: flex;
|
||||
max-width: $s-368;
|
||||
max-width: deprecated.$s-368;
|
||||
width: 100%;
|
||||
|
||||
&.two-columns {
|
||||
max-width: $s-520;
|
||||
max-width: deprecated.$s-520;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: $s-16;
|
||||
margin-bottom: deprecated.$s-16;
|
||||
}
|
||||
|
||||
form {
|
||||
width: $s-468;
|
||||
width: deprecated.$s-468;
|
||||
|
||||
.custom-input,
|
||||
.custom-select {
|
||||
@ -80,26 +80,26 @@
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-11;
|
||||
margin-bottom: $s-12;
|
||||
margin-left: calc(-1 * $s-4);
|
||||
font-size: deprecated.$fs-11;
|
||||
margin-bottom: deprecated.$s-12;
|
||||
margin-left: calc(-1 * deprecated.$s-4);
|
||||
}
|
||||
input,
|
||||
select {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
border-color: transparent;
|
||||
color: var(--color-foreground-primary);
|
||||
padding: 0 $s-16;
|
||||
padding: 0 deprecated.$s-16;
|
||||
&:focus {
|
||||
outline: $s-1 solid var(--color-accent-primary);
|
||||
outline: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
.help-icon {
|
||||
bottom: $s-12;
|
||||
bottom: deprecated.$s-12;
|
||||
top: auto;
|
||||
svg {
|
||||
fill: var(--color-foreground-secondary);
|
||||
@ -114,30 +114,30 @@
|
||||
}
|
||||
.input-container {
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
border-color: transparent;
|
||||
margin-top: $s-24;
|
||||
margin-top: deprecated.$s-24;
|
||||
.main-content {
|
||||
label {
|
||||
position: absolute;
|
||||
top: calc(-1 * $s-24);
|
||||
top: calc(-1 * deprecated.$s-24);
|
||||
}
|
||||
span {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
border: $s-1 solid var(--color-accent-primary);
|
||||
border: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: $s-8;
|
||||
padding: $s-12 $s-16;
|
||||
border-radius: deprecated.$s-8;
|
||||
padding: deprecated.$s-12 deprecated.$s-16;
|
||||
background-color: var(--color-background-tertiary);
|
||||
color: var(--color-foreground-primary);
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: $s-1 solid var(--color-accent-primary);
|
||||
outline: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -146,7 +146,7 @@
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
.field-title:not(:first-child) {
|
||||
margin-top: $s-64;
|
||||
margin-top: deprecated.$s-64;
|
||||
}
|
||||
|
||||
.field-text {
|
||||
@ -155,7 +155,7 @@
|
||||
button,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
font-size: $fs-11;
|
||||
font-size: deprecated.$fs-11;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-background-tertiary);
|
||||
color: var(--color-foreground-primary);
|
||||
@ -169,41 +169,41 @@
|
||||
}
|
||||
}
|
||||
.links {
|
||||
margin-top: $s-12;
|
||||
margin-top: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: $s-368;
|
||||
max-width: deprecated.$s-368;
|
||||
width: 100%;
|
||||
|
||||
.newsletter-subs {
|
||||
border-bottom: $s-1 solid var(--color-foreground-secondary);
|
||||
border-top: $s-1 solid var(--color-foreground-secondary);
|
||||
padding: $s-32 0;
|
||||
margin-bottom: $s-32;
|
||||
border-bottom: deprecated.$s-1 solid var(--color-foreground-secondary);
|
||||
border-top: deprecated.$s-1 solid var(--color-foreground-secondary);
|
||||
padding: deprecated.$s-32 0;
|
||||
margin-bottom: deprecated.$s-32;
|
||||
|
||||
.newsletter-title {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
color: var(--color-background-primary);
|
||||
font-size: $fs-12;
|
||||
margin-right: calc(-1 * $s-16);
|
||||
margin-bottom: $s-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
margin-right: calc(-1 * deprecated.$s-16);
|
||||
margin-bottom: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
color: var(--color-foreground-secondary);
|
||||
font-size: $fs-12;
|
||||
margin-bottom: $s-8;
|
||||
font-size: deprecated.$fs-12;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.input-checkbox label {
|
||||
@ -215,30 +215,30 @@
|
||||
.avatar-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: $s-120;
|
||||
min-width: $s-120;
|
||||
width: deprecated.$s-120;
|
||||
min-width: deprecated.$s-120;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: $s-120;
|
||||
margin-right: $s-16;
|
||||
width: $s-120;
|
||||
height: deprecated.$s-120;
|
||||
margin-right: deprecated.$s-16;
|
||||
width: deprecated.$s-120;
|
||||
}
|
||||
|
||||
.image-change-field {
|
||||
position: relative;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-120;
|
||||
|
||||
.update-overlay {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-120;
|
||||
border-radius: 50%;
|
||||
font-size: $fs-24;
|
||||
font-size: deprecated.$fs-24;
|
||||
color: var(--color-foreground-primary);
|
||||
line-height: 5;
|
||||
text-align: center;
|
||||
@ -247,8 +247,8 @@
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: $s-120;
|
||||
height: $s-120;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-120;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
@ -267,7 +267,7 @@
|
||||
.options-form,
|
||||
.password-form {
|
||||
h2 {
|
||||
font-size: $fs-14;
|
||||
margin-bottom: $s-20;
|
||||
font-size: deprecated.$fs-14;
|
||||
margin-bottom: deprecated.$s-20;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,36 +4,36 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// ACCESS TOKENS PAGE
|
||||
.dashboard-access-tokens {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
margin: $s-80 auto $s-120 auto;
|
||||
gap: $s-32;
|
||||
width: $s-800;
|
||||
margin: deprecated.$s-80 auto deprecated.$s-120 auto;
|
||||
gap: deprecated.$s-32;
|
||||
width: deprecated.$s-800;
|
||||
}
|
||||
|
||||
// hero
|
||||
.access-tokens-hero {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: $s-32;
|
||||
width: $s-500;
|
||||
font-size: $fs-14;
|
||||
margin: $s-16 auto 0 auto;
|
||||
gap: deprecated.$s-32;
|
||||
width: deprecated.$s-500;
|
||||
font-size: deprecated.$fs-14;
|
||||
margin: deprecated.$s-16 auto 0 auto;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
color: var(--title-foreground-color);
|
||||
margin-bottom: 0;
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
@ -45,12 +45,12 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
height: $s-156;
|
||||
max-width: $s-1000;
|
||||
height: deprecated.$s-156;
|
||||
max-width: deprecated.$s-1000;
|
||||
width: 100%;
|
||||
padding: $s-32;
|
||||
border: $s-1 solid var(--panel-border-color);
|
||||
border-radius: $br-8;
|
||||
padding: deprecated.$s-32;
|
||||
border: deprecated.$s-1 solid var(--panel-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -61,12 +61,12 @@
|
||||
|
||||
.table-rows {
|
||||
display: grid;
|
||||
grid-auto-rows: $s-64;
|
||||
gap: $s-16;
|
||||
grid-auto-rows: deprecated.$s-64;
|
||||
gap: deprecated.$s-16;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: $s-1000;
|
||||
margin-top: $s-16;
|
||||
max-width: deprecated.$s-1000;
|
||||
margin-top: deprecated.$s-16;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
@ -74,33 +74,33 @@
|
||||
display: grid;
|
||||
grid-template-columns: 43% 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-64;
|
||||
height: deprecated.$s-64;
|
||||
width: 100%;
|
||||
padding: 0 $s-16;
|
||||
border-radius: $br-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--dashboard-list-background-color);
|
||||
color: var(--dashboard-list-foreground-color);
|
||||
}
|
||||
|
||||
.field-name {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
display: grid;
|
||||
width: 43%;
|
||||
min-width: $s-300;
|
||||
min-width: deprecated.$s-300;
|
||||
}
|
||||
|
||||
.expiration-date {
|
||||
@include flexCenter;
|
||||
min-width: $s-76;
|
||||
@include deprecated.flexCenter;
|
||||
min-width: deprecated.$s-76;
|
||||
width: fit-content;
|
||||
height: $s-24;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--dashboard-list-text-foreground-color);
|
||||
}
|
||||
|
||||
.expired {
|
||||
@include headlineSmallTypography;
|
||||
padding: 0 $s-6;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
padding: 0 deprecated.$s-6;
|
||||
color: var(--pill-foreground-color);
|
||||
background-color: var(--status-widget-background-color-warning);
|
||||
}
|
||||
@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
}
|
||||
|
||||
// Create access token modal
|
||||
@ -124,15 +124,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);
|
||||
}
|
||||
.modal-close-btn {
|
||||
@ -140,46 +140,46 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include flexColumn;
|
||||
gap: $s-24;
|
||||
@include bodySmallTypography;
|
||||
margin-bottom: $s-24;
|
||||
@include deprecated.flexColumn;
|
||||
gap: deprecated.$s-24;
|
||||
@include deprecated.bodySmallTypography;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.custon-input-wrapper {
|
||||
@include flexRow;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@include deprecated.flexRow;
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
.custom-input-token {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.token-value {
|
||||
@include textEllipsis;
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
@extend .button-secondary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
.clipboard-icon {
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./profile" as *;
|
||||
|
||||
.update-btn {
|
||||
margin-top: $s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
@extend .button-primary;
|
||||
height: $s-36;
|
||||
height: deprecated.$s-36;
|
||||
}
|
||||
|
||||
.notifications-form {
|
||||
width: $s-400;
|
||||
width: deprecated.$s-400;
|
||||
}
|
||||
|
||||
.notifications-page {
|
||||
@ -34,9 +34,9 @@
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $fs-11;
|
||||
font-size: deprecated.$fs-11;
|
||||
color: var(--color-foreground-primary);
|
||||
text-transform: uppercase;
|
||||
margin: $s-12;
|
||||
margin: deprecated.$s-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./profile" as *;
|
||||
|
||||
.update-btn {
|
||||
margin-top: $s-16;
|
||||
margin-top: deprecated.$s-16;
|
||||
@extend .button-primary;
|
||||
height: $s-36;
|
||||
height: deprecated.$s-36;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard-sidebar {
|
||||
grid-column: 1 / span 2;
|
||||
@ -12,9 +12,9 @@
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
padding-block-start: $s-16;
|
||||
border-right: $s-1 solid var(--panel-border-color);
|
||||
z-index: $z-index-1;
|
||||
padding-block-start: deprecated.$s-16;
|
||||
border-right: deprecated.$s-1 solid var(--panel-border-color);
|
||||
z-index: deprecated.$z-index-1;
|
||||
background-color: var(--panel-background-color);
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
.sidebar-separator {
|
||||
border-color: transparent;
|
||||
margin: $s-12 $s-16;
|
||||
margin: deprecated.$s-12 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.sidebar-nav-settings {
|
||||
@ -44,7 +44,7 @@
|
||||
--settings-background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
padding: deprecated.$s-8 deprecated.$s-8 deprecated.$s-8 deprecated.$s-24;
|
||||
color: var(--settings-foreground-color);
|
||||
background-color: var(--settings-background-color);
|
||||
cursor: pointer;
|
||||
@ -63,20 +63,20 @@
|
||||
.feedback-icon {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--settings-foreground-color);
|
||||
margin-right: $s-8;
|
||||
margin-right: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
@include textEllipsis;
|
||||
@include bodyMediumTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
}
|
||||
|
||||
.back-to-dashboard {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $s-12 $s-16;
|
||||
font-size: $fs-14;
|
||||
padding: deprecated.$s-12 deprecated.$s-16;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
@ -87,5 +87,5 @@
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(180deg);
|
||||
margin-right: $s-12;
|
||||
margin-right: deprecated.$s-12;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/spacing.scss" as *;
|
||||
@ -20,10 +20,10 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
max-width: $s-500;
|
||||
max-width: deprecated.$s-500;
|
||||
margin-block-end: var(--sp-xxxl);
|
||||
width: $s-580;
|
||||
margin: $s-92 auto $s-120 auto;
|
||||
width: deprecated.$s-580;
|
||||
margin: deprecated.$s-92 auto deprecated.$s-120 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
border-radius: 6px;
|
||||
border: 1.75px solid var(--color-foreground-primary);
|
||||
stroke-width: 2.25px;
|
||||
padding: $s-1;
|
||||
padding: deprecated.$s-1;
|
||||
|
||||
svg {
|
||||
block-size: var(--sp-m);
|
||||
@ -135,12 +135,12 @@
|
||||
}
|
||||
|
||||
.other-subscriptions {
|
||||
margin-block-start: $s-52;
|
||||
margin-block-start: deprecated.$s-52;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
@include t.use-typography("body-medium");
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
align-items: center;
|
||||
color: var(--color-accent-tertiary);
|
||||
display: flex;
|
||||
@ -173,11 +173,11 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
max-height: initial;
|
||||
min-width: $s-548;
|
||||
min-width: deprecated.$s-548;
|
||||
}
|
||||
|
||||
.modal-dialog.subscription-success {
|
||||
min-width: $s-648;
|
||||
min-width: deprecated.$s-648;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@ -211,7 +211,7 @@
|
||||
.modal-text-medium strong,
|
||||
.text-strikethrough strong,
|
||||
.modal-text-cap strong {
|
||||
font-weight: $fw700;
|
||||
font-weight: deprecated.$fw700;
|
||||
}
|
||||
|
||||
.modal-content,
|
||||
@ -223,11 +223,11 @@
|
||||
|
||||
.modal-success-content {
|
||||
display: flex;
|
||||
gap: $s-40;
|
||||
gap: deprecated.$s-40;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
margin-block-start: $s-40;
|
||||
margin-block-start: deprecated.$s-40;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@ -249,7 +249,7 @@
|
||||
.modal-start {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: $s-220;
|
||||
max-width: deprecated.$s-220;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
@ -276,19 +276,19 @@
|
||||
list-style-position: inside;
|
||||
list-style-type: none;
|
||||
margin-inline-start: var(--sp-xl);
|
||||
max-height: $s-216;
|
||||
max-height: deprecated.$s-216;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
--input-icon-padding: var(--sp-s);
|
||||
width: $s-80;
|
||||
width: deprecated.$s-80;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include t.use-typography("body-small");
|
||||
color: var(--color-foreground-error);
|
||||
margin-block-start: $s-8;
|
||||
margin-block-start: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.editors-wrapper {
|
||||
@ -307,7 +307,7 @@
|
||||
@include t.use-typography("body-small");
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: var(--sp-s);
|
||||
margin-block-start: $s-40;
|
||||
margin-block-start: deprecated.$s-40;
|
||||
padding-block: var(--sp-s);
|
||||
padding-inline: var(--sp-m);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.exception-layout {
|
||||
width: 100%;
|
||||
@ -15,13 +15,13 @@
|
||||
.deco-before,
|
||||
.deco-after {
|
||||
position: absolute;
|
||||
left: calc(50% - $s-40);
|
||||
left: calc(50% - deprecated.$s-40);
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
fill: var(--color-foreground-secondary);
|
||||
height: 1537px;
|
||||
width: $s-80;
|
||||
width: deprecated.$s-80;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
.deco-after2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $s-8;
|
||||
gap: deprecated.$s-8;
|
||||
width: 100%;
|
||||
height: 34vh;
|
||||
position: absolute;
|
||||
@ -57,7 +57,7 @@
|
||||
svg {
|
||||
fill: var(--color-foreground-secondary);
|
||||
height: 1537px;
|
||||
width: $s-80;
|
||||
width: deprecated.$s-80;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -66,7 +66,7 @@
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
padding-bottom: $s-28;
|
||||
padding-bottom: deprecated.$s-28;
|
||||
|
||||
&:first-child {
|
||||
text-align: right;
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
.exception-header {
|
||||
color: var(--color-foreground-secondary);
|
||||
padding: $s-24 $s-32;
|
||||
padding: deprecated.$s-24 deprecated.$s-32;
|
||||
position: fixed;
|
||||
background: none;
|
||||
border: none;
|
||||
@ -87,8 +87,8 @@
|
||||
|
||||
.penpot-logo {
|
||||
fill: var(--color-foreground-primary);
|
||||
width: $s-48;
|
||||
height: $s-48;
|
||||
width: deprecated.$s-48;
|
||||
height: deprecated.$s-48;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
@ -99,18 +99,18 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
margin-left: $s-12;
|
||||
font-size: $fs-14;
|
||||
gap: deprecated.$s-8;
|
||||
margin-left: deprecated.$s-12;
|
||||
font-size: deprecated.$fs-14;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
@extend .button-primary;
|
||||
padding: $s-8 $s-16;
|
||||
font-size: $fs-11;
|
||||
padding: deprecated.$s-8 deprecated.$s-16;
|
||||
font-size: deprecated.$fs-11;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
margin: $s-40 $s-32;
|
||||
margin: deprecated.$s-40 deprecated.$s-32;
|
||||
}
|
||||
|
||||
.exception-content {
|
||||
@ -123,22 +123,22 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-16;
|
||||
gap: deprecated.$s-16;
|
||||
height: 34vh;
|
||||
justify-content: center;
|
||||
margin-top: 33vh;
|
||||
text-align: center;
|
||||
width: $s-640;
|
||||
width: deprecated.$s-640;
|
||||
}
|
||||
}
|
||||
|
||||
.main-message {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.desc-message {
|
||||
@include bigTitleTipography;
|
||||
@include deprecated.bigTitleTipography;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -148,8 +148,8 @@
|
||||
button {
|
||||
@extend .button-primary;
|
||||
text-transform: uppercase;
|
||||
padding: $s-8 $s-16;
|
||||
font-size: $fs-11;
|
||||
padding: deprecated.$s-8 deprecated.$s-16;
|
||||
font-size: deprecated.$fs-11;
|
||||
}
|
||||
}
|
||||
|
||||
@ -169,12 +169,12 @@
|
||||
|
||||
.workspace-left,
|
||||
.workspace-right {
|
||||
padding: $s-12;
|
||||
width: $s-276;
|
||||
padding: deprecated.$s-12;
|
||||
width: deprecated.$s-276;
|
||||
height: 100%;
|
||||
background-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
gap: deprecated.$s-4;
|
||||
|
||||
svg {
|
||||
width: 2rem;
|
||||
@ -183,12 +183,12 @@
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@include smallTitleTipography;
|
||||
@include deprecated.smallTitleTipography;
|
||||
text-transform: none;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
@ -200,7 +200,7 @@
|
||||
height: 100%;
|
||||
|
||||
.dashboard-sidebar {
|
||||
width: $s-300;
|
||||
width: deprecated.$s-300;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -226,11 +226,11 @@
|
||||
.dialog-login {
|
||||
width: 556px;
|
||||
background-color: var(--color-background-primary);
|
||||
border-radius: $s-8;
|
||||
border-radius: deprecated.$s-8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: stretch;
|
||||
padding: $s-36;
|
||||
padding: deprecated.$s-36;
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.modal-close {
|
||||
@ -243,8 +243,8 @@
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-24;
|
||||
fill: var(--modal-text-foreground-color);
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -252,59 +252,59 @@
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: $fs-20;
|
||||
font-size: deprecated.$fs-20;
|
||||
}
|
||||
|
||||
.sign-info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: $s-32;
|
||||
margin-top: deprecated.$s-32;
|
||||
|
||||
button {
|
||||
@extend .button-primary;
|
||||
text-transform: uppercase;
|
||||
padding: $s-8 $s-16;
|
||||
font-size: $fs-11;
|
||||
padding: deprecated.$s-8 deprecated.$s-16;
|
||||
font-size: deprecated.$fs-11;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .button-secondary;
|
||||
text-transform: uppercase;
|
||||
padding: $s-8 $s-16;
|
||||
font-size: $fs-11;
|
||||
margin-right: $s-16;
|
||||
padding: deprecated.$s-8 deprecated.$s-16;
|
||||
font-size: deprecated.$fs-11;
|
||||
margin-right: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.login {
|
||||
gap: 0;
|
||||
padding: 0 $s-36 $s-72 $s-36;
|
||||
padding: 0 deprecated.$s-36 deprecated.$s-72 deprecated.$s-36;
|
||||
|
||||
.logo {
|
||||
margin-bottom: $s-40;
|
||||
margin-bottom: deprecated.$s-40;
|
||||
|
||||
svg {
|
||||
fill: var(--color-foreground-primary);
|
||||
width: $s-120;
|
||||
height: $s-40;
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-40;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: $fs-20;
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--title-foreground-color-hover);
|
||||
margin-bottom: $s-4;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: $fs-14;
|
||||
font-size: deprecated.$fs-14;
|
||||
color: var(--title-foreground-color-hover);
|
||||
margin-bottom: $s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.change-section {
|
||||
@ -317,16 +317,16 @@
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: $s-20 0;
|
||||
border-top: solid $s-1 var(--modal-separator-backogrund-color);
|
||||
margin: deprecated.$s-20 0;
|
||||
border-top: solid deprecated.$s-1 var(--modal-separator-backogrund-color);
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: $s-20 0;
|
||||
margin: deprecated.$s-20 0;
|
||||
}
|
||||
|
||||
form div {
|
||||
margin-bottom: $s-8;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.viewer-layout {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: $s-48 auto;
|
||||
grid-template-rows: deprecated.$s-48 auto;
|
||||
grid-template-columns: 1fr;
|
||||
user-select: none;
|
||||
}
|
||||
@ -18,13 +18,13 @@
|
||||
overflow: hidden;
|
||||
grid-row: 2 / span 1;
|
||||
display: grid;
|
||||
grid-template-rows: $s-252 auto;
|
||||
grid-template-rows: deprecated.$s-252 auto;
|
||||
grid-template-columns: 1fr;
|
||||
background-color: var(--viewer-background-color);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--empty-message-foreground-color);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
.inspect-layout {
|
||||
display: grid;
|
||||
grid-template-rows: $s-48 auto;
|
||||
grid-template-rows: deprecated.$s-48 auto;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100vh;
|
||||
margin-top: 0;
|
||||
@ -46,10 +46,10 @@
|
||||
}
|
||||
|
||||
.thumbnails-close {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
z-index: $z-index-10;
|
||||
z-index: deprecated.$z-index-10;
|
||||
background-color: var(--overlay-color);
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
height: calc(100vh - $s-48);
|
||||
height: calc(100vh - deprecated.$s-48);
|
||||
flex-flow: wrap;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -79,13 +79,13 @@
|
||||
.viewer-go-prev,
|
||||
.viewer-go-next {
|
||||
@extend .button-secondary;
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: absolute;
|
||||
right: $s-8;
|
||||
height: $s-64;
|
||||
width: $s-32;
|
||||
top: calc(50vh - $s-32);
|
||||
z-index: $z-index-2;
|
||||
right: deprecated.$s-8;
|
||||
height: deprecated.$s-64;
|
||||
width: deprecated.$s-32;
|
||||
top: calc(50vh - deprecated.$s-32);
|
||||
z-index: deprecated.$z-index-2;
|
||||
background-color: var(--viewer-controls-background-color);
|
||||
transition: transform 400ms ease 300ms;
|
||||
svg {
|
||||
@ -95,11 +95,11 @@
|
||||
}
|
||||
|
||||
.viewer-go-next.comment-sidebar {
|
||||
right: $s-280;
|
||||
right: deprecated.$s-280;
|
||||
}
|
||||
|
||||
.viewer-go-prev {
|
||||
left: $s-8;
|
||||
left: deprecated.$s-8;
|
||||
right: unset;
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
@ -113,19 +113,19 @@
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: $s-40;
|
||||
padding-right: 0 $s-8 $s-40 $s-8;
|
||||
height: deprecated.$s-40;
|
||||
padding-right: 0 deprecated.$s-8 deprecated.$s-40 deprecated.$s-8;
|
||||
transition: transform 400ms ease 300ms;
|
||||
z-index: $z-index-2;
|
||||
z-index: deprecated.$z-index-2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
@extend .button-secondary;
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
margin-left: $s-8;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
margin-left: deprecated.$s-8;
|
||||
background-color: var(--viewer-controls-background-color);
|
||||
pointer-events: all;
|
||||
svg {
|
||||
@ -135,11 +135,11 @@
|
||||
}
|
||||
|
||||
.counter {
|
||||
@include flexCenter;
|
||||
@include bodySmallTypography;
|
||||
border-radius: $br-8;
|
||||
width: $s-64;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.bodySmallTypography;
|
||||
border-radius: deprecated.$br-8;
|
||||
width: deprecated.$s-64;
|
||||
height: deprecated.$s-32;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
background-color: var(--viewer-controls-background-color);
|
||||
}
|
||||
@ -193,7 +193,7 @@
|
||||
|
||||
/** FULLSCREEN */
|
||||
[data-fullscreen="true"] .viewer-bottom {
|
||||
transform: translateY($s-40);
|
||||
transform: translateY(deprecated.$s-40);
|
||||
}
|
||||
|
||||
[data-force-visible="true"] .viewer-bottom {
|
||||
@ -201,15 +201,15 @@
|
||||
}
|
||||
|
||||
[data-fullscreen="true"] .viewer-go-next {
|
||||
transform: translateX($s-40);
|
||||
transform: translateX(deprecated.$s-40);
|
||||
}
|
||||
|
||||
[data-fullscreen="true"] .viewer-go-prev {
|
||||
transform: translateX(-$s-40);
|
||||
transform: translateX(-#{deprecated.$s-40});
|
||||
}
|
||||
|
||||
[data-fullscreen="true"] .viewer-content {
|
||||
transform: translateY(-$s-48);
|
||||
transform: translateY(-#{deprecated.$s-48});
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@ -4,32 +4,32 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
// COMMENT DROPDOWN ON HEADER
|
||||
.view-options {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: $s-4;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
border-radius: $br-8;
|
||||
gap: deprecated.$s-4;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--input-background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@extend .menu-dropdown;
|
||||
right: $s-2;
|
||||
top: calc($s-2 + $s-48);
|
||||
width: $s-272;
|
||||
padding: $s-6;
|
||||
right: deprecated.$s-2;
|
||||
top: calc(deprecated.$s-2 + deprecated.$s-48);
|
||||
width: deprecated.$s-272;
|
||||
padding: deprecated.$s-6;
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
@ -41,9 +41,9 @@
|
||||
|
||||
.icon,
|
||||
.icon-dropdown {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -57,9 +57,9 @@
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: $s-8;
|
||||
height: deprecated.$s-8;
|
||||
}
|
||||
|
||||
// FLOATING COMMENT
|
||||
@ -90,7 +90,7 @@
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
}
|
||||
|
||||
.threads {
|
||||
@ -103,10 +103,10 @@
|
||||
.comments-sidebar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $s-44;
|
||||
width: $s-276;
|
||||
height: calc(100vh - $s-48);
|
||||
z-index: $z-index-10;
|
||||
top: deprecated.$s-44;
|
||||
width: deprecated.$s-276;
|
||||
height: calc(100vh - deprecated.$s-48);
|
||||
z-index: deprecated.$z-index-10;
|
||||
background-color: var(--panel-background-color);
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.viewer-header {
|
||||
position: absolute;
|
||||
@ -12,12 +12,12 @@
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr $s-92 1fr;
|
||||
grid-template-columns: 1fr deprecated.$s-92 1fr;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $s-48;
|
||||
height: deprecated.$s-48;
|
||||
width: 100vw;
|
||||
padding: $s-8 $s-12;
|
||||
padding: deprecated.$s-8 deprecated.$s-12;
|
||||
transition: transform 400ms ease 300ms;
|
||||
background-color: var(--panel-background-color);
|
||||
}
|
||||
@ -29,7 +29,7 @@
|
||||
justify-content: flex-start;
|
||||
flex-basis: min-content;
|
||||
width: 100%;
|
||||
gap: $s-12;
|
||||
gap: deprecated.$s-12;
|
||||
}
|
||||
|
||||
.home-link {
|
||||
@ -39,43 +39,43 @@
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: $s-28;
|
||||
height: $s-28;
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
fill: var(--icon-foreground-hover);
|
||||
}
|
||||
|
||||
.sitemap-zone {
|
||||
@include flexColumn;
|
||||
@include deprecated.flexColumn;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include uppercaseTitleTipography;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.sitemap-text {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@include bodySmallTypography;
|
||||
@include flexRow;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
color: var(--title-foreground-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.breadcrumb-text {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
max-width: 12vw; // This is a fallback
|
||||
max-width: 12cqw; // This is a unit refered to container
|
||||
}
|
||||
|
||||
.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;
|
||||
transform: rotate(90deg);
|
||||
@ -90,17 +90,17 @@
|
||||
.dropdown-sitemap {
|
||||
@extend .menu-dropdown;
|
||||
left: 0;
|
||||
top: calc($s-2 + $s-48);
|
||||
width: $s-272;
|
||||
padding: $s-6;
|
||||
top: calc(deprecated.$s-2 + deprecated.$s-48);
|
||||
width: deprecated.$s-272;
|
||||
padding: deprecated.$s-6;
|
||||
}
|
||||
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
.icon-check {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -112,8 +112,8 @@
|
||||
}
|
||||
|
||||
.current-frame {
|
||||
@include bodySmallTypography;
|
||||
@include flexRow;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
cursor: pointer;
|
||||
@ -123,22 +123,22 @@
|
||||
}
|
||||
|
||||
.frame-name {
|
||||
@include textEllipsis;
|
||||
@include deprecated.textEllipsis;
|
||||
max-width: 17vw; // This is a fallback
|
||||
max-width: 17cqw; // This is a unit refered to container
|
||||
}
|
||||
|
||||
// SECTION BUTTONS
|
||||
.mode-zone {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mode-zone-btn {
|
||||
@extend .button-tertiary;
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
padding: 0;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@ -151,11 +151,11 @@
|
||||
|
||||
// OPTION AREA
|
||||
.options-zone {
|
||||
@include flexRow;
|
||||
@include deprecated.flexRow;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
gap: $s-8;
|
||||
z-index: $z-index-10;
|
||||
gap: deprecated.$s-8;
|
||||
z-index: deprecated.$z-index-10;
|
||||
}
|
||||
|
||||
.view-options {
|
||||
@ -167,9 +167,9 @@
|
||||
|
||||
.fullscreen-btn {
|
||||
@extend .button-tertiary;
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -178,16 +178,16 @@
|
||||
|
||||
.share-btn {
|
||||
@extend .button-primary;
|
||||
height: $s-32;
|
||||
min-width: $s-72;
|
||||
margin-left: $s-4;
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-72;
|
||||
margin-left: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
@extend .button-tertiary;
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -196,22 +196,22 @@
|
||||
|
||||
.go-log-btn {
|
||||
@extend .button-tertiary;
|
||||
@include bodySmallTypography;
|
||||
height: $s-32;
|
||||
padding: 0 $s-8;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.bodySmallTypography;
|
||||
height: deprecated.$s-32;
|
||||
padding: 0 deprecated.$s-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
// ZOOM WIDGET
|
||||
.zoom-widget {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
height: $s-28;
|
||||
min-width: $s-64;
|
||||
border-radius: $br-8;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
height: deprecated.$s-28;
|
||||
min-width: deprecated.$s-64;
|
||||
border-radius: deprecated.$br-8;
|
||||
.label {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
|
||||
@ -229,15 +229,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;
|
||||
}
|
||||
|
||||
@ -247,13 +247,13 @@
|
||||
|
||||
.zoom-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: $br-8;
|
||||
height: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
border-radius: deprecated.$br-8;
|
||||
.zoom-icon {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: $s-32;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-32;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -267,19 +267,19 @@
|
||||
}
|
||||
|
||||
.zoom-text {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
min-width: $s-64;
|
||||
min-width: deprecated.$s-64;
|
||||
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 {
|
||||
@ -305,13 +305,13 @@
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $s-48;
|
||||
height: deprecated.$s-48;
|
||||
left: 0;
|
||||
top: $s-48;
|
||||
top: deprecated.$s-48;
|
||||
}
|
||||
|
||||
[data-fullscreen="true"] .viewer-header {
|
||||
transform: translateY(-$s-48);
|
||||
transform: translateY(-#{deprecated.$s-48});
|
||||
}
|
||||
|
||||
[data-force-visible="true"] .viewer-header,
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
$width-settings-bar: $s-276;
|
||||
$width-settings-bar-max: $s-500;
|
||||
$width-settings-bar: deprecated.$s-276;
|
||||
$width-settings-bar-max: deprecated.$s-500;
|
||||
|
||||
.inspect-svg-wrapper {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
@ -35,7 +35,7 @@ $width-settings-bar-max: $s-500;
|
||||
width: $width-settings-bar;
|
||||
|
||||
background-color: var(--panel-background-color);
|
||||
border-top: $s-1 solid var(--search-bar-input-border-color);
|
||||
border-top: deprecated.$s-1 solid var(--search-bar-input-border-color);
|
||||
}
|
||||
|
||||
.not-expand {
|
||||
@ -49,8 +49,8 @@ $width-settings-bar-max: $s-500;
|
||||
.resize-area {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: $s-8;
|
||||
width: deprecated.$s-8;
|
||||
height: 100%;
|
||||
z-index: $z-index-10;
|
||||
z-index: deprecated.$z-index-10;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.view-options {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: $s-4;
|
||||
height: $s-32;
|
||||
border-radius: $br-8;
|
||||
gap: deprecated.$s-4;
|
||||
height: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--input-background-color);
|
||||
padding: $s-8;
|
||||
padding: deprecated.$s-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown-title {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
@ -31,21 +31,21 @@
|
||||
|
||||
.dropdown {
|
||||
@extend .menu-dropdown;
|
||||
right: $s-2;
|
||||
top: calc($s-2 + $s-48);
|
||||
width: $s-272;
|
||||
padding: $s-6;
|
||||
max-height: calc(100vh - 3 * ($s-2 + $s-48));
|
||||
right: deprecated.$s-2;
|
||||
top: calc(deprecated.$s-2 + deprecated.$s-48);
|
||||
width: deprecated.$s-272;
|
||||
padding: deprecated.$s-6;
|
||||
max-height: calc(100vh - 3 * (deprecated.$s-2 + deprecated.$s-48));
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
min-height: $s-32;
|
||||
min-height: deprecated.$s-32;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -67,9 +67,9 @@
|
||||
|
||||
.icon,
|
||||
.icon-dropdown {
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
height: 100%;
|
||||
width: $s-16;
|
||||
width: deprecated.$s-16;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.viewer-thumbnails {
|
||||
background-color: var(--viewer-background-color);
|
||||
@ -13,7 +13,7 @@
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: $z-index-10;
|
||||
z-index: deprecated.$z-index-10;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
@ -28,25 +28,25 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
margin: $s-24 $s-24 0 $s-24;
|
||||
height: deprecated.$s-32;
|
||||
margin: deprecated.$s-24 deprecated.$s-24 0 deprecated.$s-24;
|
||||
}
|
||||
|
||||
.counter {
|
||||
@include bodySmallTypography;
|
||||
@include deprecated.bodySmallTypography;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
width: $s-60;
|
||||
@include deprecated.flexRow;
|
||||
width: deprecated.$s-60;
|
||||
}
|
||||
|
||||
.expand-btn,
|
||||
.close-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
.thumbnails-content {
|
||||
display: grid;
|
||||
grid-template-columns: $s-40 auto $s-40;
|
||||
grid-template-columns: deprecated.$s-40 auto deprecated.$s-40;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
@ -73,13 +73,13 @@
|
||||
.right-scroll-handler,
|
||||
.left-scroll-handler {
|
||||
@extend .button-tertiary;
|
||||
@include flexCenter;
|
||||
@include deprecated.flexCenter;
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
width: $s-32;
|
||||
height: $s-60;
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-60;
|
||||
margin: auto 0;
|
||||
z-index: $z-index-10;
|
||||
z-index: deprecated.$z-index-10;
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -112,18 +112,18 @@
|
||||
}
|
||||
|
||||
.thumbnail-item {
|
||||
@include buttonStyle;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $s-16;
|
||||
padding: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
@include flexCenter;
|
||||
width: $s-132;
|
||||
min-height: $s-132;
|
||||
height: $s-132;
|
||||
padding: $s-4;
|
||||
@include deprecated.flexCenter;
|
||||
width: deprecated.$s-132;
|
||||
min-height: deprecated.$s-132;
|
||||
height: deprecated.$s-132;
|
||||
padding: deprecated.$s-4;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
@ -132,21 +132,21 @@
|
||||
|
||||
&.selected {
|
||||
background-color: var(--viewer-thumbnail-background-color-selected);
|
||||
border-radius: $br-8;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--viewer-thumbnail-border-color);
|
||||
border-radius: $br-8;
|
||||
border: deprecated.$s-1 solid var(--viewer-thumbnail-border-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-info {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
text-align: center;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
padding: $s-8 0;
|
||||
padding: deprecated.$s-8 0;
|
||||
width: 100%;
|
||||
max-width: $s-132;
|
||||
max-width: deprecated.$s-132;
|
||||
}
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
$width-settings-bar: 256px;
|
||||
|
||||
.container {
|
||||
background-color: var(--color-background-primary);
|
||||
border-radius: $br-4;
|
||||
border-radius: deprecated.$br-4;
|
||||
bottom: 0px;
|
||||
padding: $s-2 $s-8;
|
||||
padding: deprecated.$s-2 deprecated.$s-8;
|
||||
position: fixed;
|
||||
right: calc(#{$width-settings-bar} + #{$s-24});
|
||||
right: calc(#{$width-settings-bar} + #{deprecated.$s-24});
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: bottom 0.5s;
|
||||
@ -24,10 +24,10 @@ $width-settings-bar: 256px;
|
||||
}
|
||||
|
||||
.container-color-palette-open {
|
||||
bottom: $s-64;
|
||||
bottom: deprecated.$s-64;
|
||||
}
|
||||
|
||||
.coordinate {
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-12;
|
||||
font-size: deprecated.$fs-12;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.debug-panel {
|
||||
display: flex;
|
||||
@ -13,17 +13,17 @@
|
||||
}
|
||||
|
||||
.panel-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);
|
||||
}
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
height: $s-32;
|
||||
height: deprecated.$s-32;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -41,5 +41,5 @@
|
||||
}
|
||||
|
||||
.debug-panel-inner {
|
||||
padding: $s-16 $s-8;
|
||||
padding: deprecated.$s-16 deprecated.$s-8;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.viewport {
|
||||
cursor: none;
|
||||
@ -35,5 +35,5 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: $z-index-1;
|
||||
z-index: deprecated.$z-index-1;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user