mirror of
https://github.com/penpot/penpot.git
synced 2026-04-25 11:18:36 +00:00
♻️ Fix linter errors under legacy resources scss (#9035)
This commit is contained in:
Xaviju
GitHub
parent
876b8d645d
commit
e9105f3670
@ -199,6 +199,7 @@ Remember that nesting selector increases specificity, and it's usually not neede
|
||||
fill: var(--icon-color);
|
||||
}
|
||||
```
|
||||
|
||||
Note: Thanks to CSS Modules, identical class names defined in different files are scoped locally and do not cause naming collisions.
|
||||
|
||||
### Use CSS logical properties
|
||||
@ -228,17 +229,21 @@ Note: Although `width` and `height` are physical properties, their use is allowe
|
||||
Avoid hardcoded values like `px`, `rem`, or raw SASS variables `($s-*)`. Use semantic, named variables provided by the Design System to ensure consistency and scalability.
|
||||
|
||||
#### Spacing (margins, paddings, gaps...)
|
||||
|
||||
Use variables from `frontend/src/app/main/ui/ds/spacing.scss`. These are predefined and approved by the design team — **do not add or modify values without design approval**.
|
||||
|
||||
#### Fixed dimensions
|
||||
|
||||
For fixed dimensions (e.g., modals' widths) defined by design and not layout-driven, use or define variables in `frontend/src/app/main/ui/ds/_sizes.scss`. To use them:
|
||||
|
||||
```scss
|
||||
@use "ds/_sizes.scss" as *;
|
||||
```
|
||||
|
||||
Note: Since these values haven't been semantically defined yet, we’re temporarily using SASS variables instead of named CSS custom properties.
|
||||
|
||||
#### Border Widths
|
||||
|
||||
Use border thickness variables from `frontend/src/app/main/ui/ds/_borders.scss`. To import:
|
||||
|
||||
```scss
|
||||
@ -308,11 +313,12 @@ When applying typography in SCSS, use the proper mixin from the Design System.
|
||||
|
||||
```scss
|
||||
.class {
|
||||
@include headlineLargeTypography;
|
||||
@include headline-large-typography;
|
||||
}
|
||||
```
|
||||
|
||||
✅ **DO: Use the DS mixin**
|
||||
|
||||
```scss
|
||||
@use "ds/typography.scss" as t;
|
||||
|
||||
@ -320,10 +326,10 @@ When applying typography in SCSS, use the proper mixin from the Design System.
|
||||
@include t.use-typography("body-small");
|
||||
}
|
||||
```
|
||||
|
||||
You can find the full list of available typography tokens in [Storybook](https://design.penpot.app/storybook/?path=/docs/foundations-typography--docs).
|
||||
If the design you are implementing doesn't match any of them, ask a designer.
|
||||
|
||||
|
||||
### Use custom properties within components
|
||||
|
||||
Reduce the need for one-off SASS variables by leveraging [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) in your component styles. This keeps component theming flexible and composable.
|
||||
@ -664,7 +670,6 @@ We use three **levels of tokens**:
|
||||
|
||||
We can leverage component tokens to easily implement variants as explained [here](/technical-guide/developer/ui/#use-custom-properties-within-components).
|
||||
|
||||
|
||||
### Using icons and SVG assets
|
||||
|
||||
Please refer to the Storybook [documentation for icons](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-icon--docs) and other [SVG assets](https://hourly.penpot.dev/storybook/?path=/docs/foundations-assets-rawsvg--docs) (logos, illustrations, etc.).
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"fmt:scss": "prettier -c resources/styles -c src/**/*.scss -w",
|
||||
"lint:clj": "clj-kondo --parallel --lint ../common/src src/",
|
||||
"lint:js": "exit 0",
|
||||
"lint:scss": "pnpx stylelint 'src/**/*.scss'",
|
||||
"lint:scss": "pnpx stylelint '{src,resources}/**/*.scss'",
|
||||
"build:test": "clojure -M:dev:shadow-cljs compile test",
|
||||
"test": "pnpm run build:wasm && pnpm run build:test && node target/tests/test.js",
|
||||
"test:storybook": "vitest run --project=storybook",
|
||||
|
||||
@ -30,6 +30,7 @@ body {
|
||||
|
||||
&.cursor-drag-scrub {
|
||||
cursor: ew-resize !important;
|
||||
|
||||
* {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
@ -120,16 +121,15 @@ hr {
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
@ -139,15 +139,12 @@ select {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs14;
|
||||
margin-bottom: $size-4;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[draggable] {
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/* Required to make elements draggable in old WebKit */
|
||||
-khtml-user-drag: element;
|
||||
-webkit-user-drag: element;
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #316dca;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
@ -99,7 +99,7 @@
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #adbac7;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
@ -83,7 +83,7 @@
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #005cc5;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
@ -100,7 +100,7 @@
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #24292e;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
|
||||
@ -7,13 +7,11 @@
|
||||
*/
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -23,79 +21,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
.fade-in {
|
||||
animation-name: fade-in;
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@keyframes loaderColor {
|
||||
0% {
|
||||
fill: #513b56;
|
||||
}
|
||||
|
||||
33% {
|
||||
fill: #348aa7;
|
||||
}
|
||||
|
||||
66% {
|
||||
fill: #5dd39e;
|
||||
}
|
||||
|
||||
100% {
|
||||
fill: #513b56;
|
||||
}
|
||||
}
|
||||
|
||||
//pencil loader animation
|
||||
@keyframes linePencil {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-150px);
|
||||
}
|
||||
.fade-in-down {
|
||||
animation-name: fade-in-down;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
$style-name,
|
||||
$file,
|
||||
$unicode-range,
|
||||
$weight: unquote("normal"),
|
||||
$weight: string.unquote("normal"),
|
||||
$style: string.unquote("normal")
|
||||
) {
|
||||
$filepath: "../fonts/" + $file;
|
||||
@ -22,6 +22,7 @@
|
||||
url($filepath + ".ttf") format("truetype");
|
||||
font-weight: string.unquote($weight);
|
||||
font-style: string.unquote($style);
|
||||
|
||||
@if $unicode-range {
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
@use "sass:meta";
|
||||
|
||||
:root {
|
||||
@include meta.load-css("./_hljs-dark-theme.scss");
|
||||
@include meta.load-css("./_hljs-dark-theme");
|
||||
}
|
||||
|
||||
.light {
|
||||
@include meta.load-css("./_hljs-light-theme.scss");
|
||||
@include meta.load-css("./_hljs-light-theme");
|
||||
}
|
||||
|
||||
@ -11,12 +11,13 @@ License: none (public domain)
|
||||
div {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// #Reset & Basics (Inspired by E. Meyers)
|
||||
//==================================================
|
||||
// ==================================================
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
@ -100,7 +101,9 @@ var,
|
||||
video {
|
||||
border: 0;
|
||||
font: inherit;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
font-size: 100%;
|
||||
|
||||
// TODO: Changing line-height to 1 (as it should be) makes the visual tests
|
||||
// fail with a max pixel diff ratio of 0.005.
|
||||
// We should tackle this later.
|
||||
@ -124,6 +127,7 @@ nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
@ -138,10 +142,10 @@ q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
blockquote::before,
|
||||
blockquote::after,
|
||||
q::before,
|
||||
q::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
@ -151,5 +155,5 @@ table {
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
@ -5,16 +5,6 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@mixin animation($delay, $duration, $animation) {
|
||||
-webkit-animation-delay: $delay;
|
||||
-webkit-animation-duration: $duration;
|
||||
-webkit-animation-name: $animation;
|
||||
-webkit-animation-fill-mode: both;
|
||||
|
||||
-moz-animation-delay: $delay;
|
||||
-moz-animation-duration: $duration;
|
||||
-moz-animation-name: $animation;
|
||||
-moz-animation-fill-mode: both;
|
||||
|
||||
animation-delay: $delay;
|
||||
animation-duration: $duration;
|
||||
animation-name: $animation;
|
||||
|
||||
@ -14,9 +14,10 @@
|
||||
// SCROLLBAR
|
||||
%new-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(170, 181, 186, 0.3) transparent;
|
||||
scrollbar-color: rgb(170 181 186 / 0.3) transparent;
|
||||
|
||||
&:hover {
|
||||
scrollbar-color: rgba(170, 181, 186, 0.7) transparent;
|
||||
scrollbar-color: rgb(170 181 186 / 0.7) transparent;
|
||||
}
|
||||
|
||||
// These rules do not apply in chrome - 121 or higher
|
||||
@ -27,18 +28,20 @@
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(170, 181, 186, 0.3);
|
||||
background-color: rgb(170 181 186 / 0.3);
|
||||
background-clip: content-box;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $br-8;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(170, 181, 186, 0.7);
|
||||
background-color: rgb(170 181 186 / 0.7);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -48,48 +51,53 @@
|
||||
color: var(--text-editor-selection-foreground-color);
|
||||
}
|
||||
|
||||
::placeholder,
|
||||
::-webkit-input-placeholder {
|
||||
@include bodySmallTypography;
|
||||
::placeholder {
|
||||
@include body-small-typography;
|
||||
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
%button-primary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
@include headline-small-typography;
|
||||
|
||||
background-color: var(--button-primary-background-color-rest);
|
||||
border: $s-1 solid var(--button-primary-border-color-rest);
|
||||
color: var(--button-primary-foreground-color-rest);
|
||||
border-radius: $br-8;
|
||||
min-height: $s-32;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-primary-foreground-color-rest);
|
||||
}
|
||||
@include focusPrimary;
|
||||
|
||||
@include focus-primary;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-primary-background-color-hover);
|
||||
border: $s-1 solid var(--button-primary-border-color-hover);
|
||||
color: var(--button-primary-foreground-color-hover);
|
||||
text-decoration: none;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-primary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-primary-background-color-active);
|
||||
border: $s-1 solid var(--button-primary-border-color-active);
|
||||
color: var(--button-primary-foreground-color-active);
|
||||
outline: none;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-primary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.disabled),
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
@ -101,37 +109,42 @@
|
||||
}
|
||||
|
||||
%button-secondary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
border: $s-1 solid var(--button-secondary-border-color-rest);
|
||||
color: var(--button-secondary-foreground-color-rest);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-rest);
|
||||
}
|
||||
@include focusSecondary;
|
||||
|
||||
@include focus-secondary;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-secondary-background-color-hover);
|
||||
border: $s-1 solid var(--button-secondary-border-color-hover);
|
||||
color: var(--button-secondary-foreground-color-hover);
|
||||
text-decoration: none;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
background-color: var(--button-secondary-background-color-active);
|
||||
border: $s-1 solid var(--button-secondary-border-color-active);
|
||||
color: var(--button-secondary-foreground-color-active);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.disabled),
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
@ -143,36 +156,41 @@
|
||||
}
|
||||
|
||||
%button-tertiary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
|
||||
--button-tertiary-border-width: #{$s-2};
|
||||
|
||||
border-radius: $br-8;
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
background-color: transparent;
|
||||
border: var(--button-tertiary-border-width) solid transparent;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
@include focusTertiary;
|
||||
|
||||
@include focus-tertiary;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-tertiary-background-color-hover);
|
||||
color: var(--button-tertiary-foreground-color-hover);
|
||||
border-color: var(--button-secondary-border-color-hover);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
border-color: transparent;
|
||||
background-color: var(--button-tertiary-background-color-active);
|
||||
color: var(--button-tertiary-foreground-color-active);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
@ -184,8 +202,7 @@
|
||||
cursor: unset;
|
||||
pointer-events: none;
|
||||
|
||||
svg,
|
||||
span svg {
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
}
|
||||
@ -196,54 +213,61 @@
|
||||
border-color: var(--button-icon-border-color-selected);
|
||||
background-color: var(--button-icon-background-color-selected);
|
||||
color: var(--button-icon-foreground-color-selected);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-icon-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.button-radio {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
|
||||
border-radius: $br-8;
|
||||
color: var(--button-radio-foreground-color-rest);
|
||||
border-color: $s-1 solid var(--button-radio-background-color-rest);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-radio-foreground-color-rest);
|
||||
}
|
||||
@include focusRadio;
|
||||
|
||||
@include focus-radio;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
color: var(--button-radio-foreground-color-hover);
|
||||
border: $s-1 solid transparent;
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-radio-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
border: $s-1 solid transparent;
|
||||
background-color: var(--button-radio-background-color-active);
|
||||
color: var(--button-radio-foreground-color-active);
|
||||
svg,
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--button-radio-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
|
||||
background-color: var(--button-warning-background-color-rest);
|
||||
border: $s-1 solid var(--button-warning-border-color-rest);
|
||||
color: var(--button-warning-foreground-color-rest);
|
||||
}
|
||||
|
||||
%button-disabled {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
|
||||
background-color: var(--button-background-color-disabled);
|
||||
border: $s-1 solid var(--button-border-color-disabled);
|
||||
color: var(--button-foreground-color-disabled);
|
||||
@ -251,14 +275,16 @@
|
||||
}
|
||||
|
||||
%button-tag {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include button-style;
|
||||
@include flex-center;
|
||||
@include focus;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
@ -266,7 +292,8 @@
|
||||
}
|
||||
|
||||
%button-icon {
|
||||
@include flexCenter;
|
||||
@include flex-center;
|
||||
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
color: transparent;
|
||||
@ -276,19 +303,22 @@
|
||||
|
||||
%button-icon-small {
|
||||
@extend %button-icon;
|
||||
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke-width: 1.33px;
|
||||
}
|
||||
|
||||
.button-constraint {
|
||||
@include buttonStyle;
|
||||
@include button-style;
|
||||
|
||||
width: $s-32;
|
||||
height: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-constraint-background-color-rest);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
outline: $s-4 solid var(--button-constraint-border-color-hover);
|
||||
background-color: var(--button-constraint-background-color-hover);
|
||||
@ -297,8 +327,9 @@
|
||||
|
||||
// INPUTS
|
||||
%input-base {
|
||||
@include removeInputStyle;
|
||||
@include textEllipsis;
|
||||
@include remove-input-style;
|
||||
@include text-ellipsis;
|
||||
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
@ -306,6 +337,7 @@
|
||||
padding: 0 0 0 $s-6;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
@ -313,23 +345,30 @@
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@include flexCenter;
|
||||
@include flex-center;
|
||||
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include headlineSmallTypography;
|
||||
@include flexCenter;
|
||||
%input-label {
|
||||
@include headline-small-typography;
|
||||
@include flex-center;
|
||||
|
||||
width: $s-20;
|
||||
padding-left: $s-8;
|
||||
height: $s-32;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@extend %input-label;
|
||||
}
|
||||
|
||||
%input-element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -338,17 +377,22 @@
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
color: var(--input-foreground-color);
|
||||
|
||||
&:not(:focus-within) {
|
||||
cursor: ew-resize;
|
||||
|
||||
input {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
span,
|
||||
label {
|
||||
@extend .input-label;
|
||||
@extend %input-label;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--input-foreground-color);
|
||||
}
|
||||
}
|
||||
@ -361,43 +405,55 @@
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
@include focusInput;
|
||||
@include focus-input;
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-hover);
|
||||
background-color: var(--input-background-color-hover);
|
||||
|
||||
span {
|
||||
color: var(--input-foreground-color-hover);
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--input-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
|
||||
span {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
background-color: var(--input-background-color-focus);
|
||||
|
||||
span {
|
||||
color: var(--input-foreground-color-focus);
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--input-foreground-color-focus);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
background-color: var(--input-background-color-focus);
|
||||
|
||||
span {
|
||||
color: var(--input-foreground-color-focus);
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--input-foreground-color-focus);
|
||||
}
|
||||
@ -406,12 +462,15 @@
|
||||
}
|
||||
|
||||
%input-element-label {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
@extend %input-base;
|
||||
|
||||
padding-left: $s-8;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -424,10 +483,13 @@
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -449,18 +511,21 @@
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border: $s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
|
||||
input {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: var(--input-foreground-color-disabled);
|
||||
}
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
%checkbox-icon {
|
||||
@include flexCenter;
|
||||
@include flex-center;
|
||||
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
min-width: $s-16;
|
||||
@ -468,15 +533,18 @@
|
||||
background-color: var(--input-checkbox-background-color-rest);
|
||||
border: $s-1 solid var(--input-checkbox-border-color-rest);
|
||||
border-radius: $br-4;
|
||||
|
||||
svg {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
display: none;
|
||||
stroke: var(--input-checkbox-inactive-foreground-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--input-checkbox-border-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--input-checkbox-border-color-focus);
|
||||
}
|
||||
@ -484,8 +552,10 @@
|
||||
&:global(.checked) {
|
||||
border-color: var(--input-checkbox-border-color-active);
|
||||
background-color: var(--input-checkbox-background-color-active);
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--input-checkbox-foreground-color-active);
|
||||
}
|
||||
}
|
||||
@ -493,8 +563,10 @@
|
||||
&:global(.intermediate) {
|
||||
background-color: var(--input-checkbox-background-color-intermediate);
|
||||
border-color: var(--input-checkbox-border-color-intermediate);
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--input-checkbox-foreground-color-intermediate);
|
||||
}
|
||||
}
|
||||
@ -502,6 +574,7 @@
|
||||
&:global(.unchecked) {
|
||||
background-color: var(--input-checkbox-background-color-rest);
|
||||
border: $s-1 solid var(--input-checkbox-background-color-rest);
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
@ -511,19 +584,24 @@
|
||||
%input-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-6;
|
||||
cursor: pointer;
|
||||
color: var(--input-checkbox-text-foreground-color);
|
||||
|
||||
span {
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
border-color: var(--input-checkbox-border-color-hover);
|
||||
@ -542,8 +620,10 @@
|
||||
%input-with-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@ -553,7 +633,8 @@
|
||||
|
||||
input {
|
||||
@extend %input-base;
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
@ -561,15 +642,18 @@
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
|
||||
&:focus-within,
|
||||
&:active {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.disabled) {
|
||||
@extend %disabled-input;
|
||||
}
|
||||
@ -581,9 +665,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
//MODALS
|
||||
// MODALS
|
||||
%modal-background {
|
||||
@include menuShadow;
|
||||
@include menu-shadow;
|
||||
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -595,7 +680,8 @@
|
||||
}
|
||||
|
||||
%modal-overlay-base {
|
||||
@include flexCenter;
|
||||
@include flex-center;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -619,18 +705,21 @@
|
||||
|
||||
%modal-close-btn-base {
|
||||
@extend %button-tertiary;
|
||||
|
||||
position: absolute;
|
||||
top: $s-8;
|
||||
right: $s-6;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-hint-base {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
border-top: $s-1 solid var(--modal-hint-border-color);
|
||||
border-bottom: $s-1 solid var(--modal-hint-border-color);
|
||||
@ -644,7 +733,8 @@
|
||||
|
||||
%modal-cancel-btn {
|
||||
@extend %button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
@include uppercase-title-typography;
|
||||
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@ -653,7 +743,8 @@
|
||||
|
||||
%modal-accept-btn {
|
||||
@extend %button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
@include uppercase-title-typography;
|
||||
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@ -662,7 +753,8 @@
|
||||
|
||||
%modal-danger-btn {
|
||||
@extend %button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
@include uppercase-title-typography;
|
||||
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@ -677,7 +769,8 @@
|
||||
// FIXME: This is used multiple times accross the app. We should design this in
|
||||
// the DS and create a proper component for it.
|
||||
%asset-element {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
@ -685,6 +778,7 @@
|
||||
padding: $s-8 $s-12;
|
||||
background-color: var(--assets-item-background-color);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
@ -692,14 +786,16 @@
|
||||
}
|
||||
|
||||
%shortcut-base {
|
||||
@include flexCenter;
|
||||
@include flex-center;
|
||||
|
||||
gap: $s-2;
|
||||
color: var(--menu-shortcut-foreground-color);
|
||||
}
|
||||
|
||||
%shortcut-key-base {
|
||||
@include bodySmallTypography;
|
||||
@include flexCenter;
|
||||
@include body-small-typography;
|
||||
@include flex-center;
|
||||
|
||||
height: $s-20;
|
||||
padding: $s-2 $s-6;
|
||||
border-radius: $br-6;
|
||||
@ -707,7 +803,8 @@
|
||||
}
|
||||
|
||||
%mixed-bar {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
@ -736,6 +833,7 @@
|
||||
border-radius: $br-circle;
|
||||
transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
|
||||
z-index: $z-index-1;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: var(--colorpicker-details-color-selected);
|
||||
@ -747,14 +845,19 @@
|
||||
margin-left: 0;
|
||||
color: var(--entry-foreground-color-hover);
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button-tertiary;
|
||||
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
display: flex;
|
||||
@ -768,9 +871,11 @@
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: $s-4;
|
||||
height: $s-32;
|
||||
|
||||
:global(.attr-label) {
|
||||
@include bodySmallTypography;
|
||||
@include twoLineTextEllipsis;
|
||||
@include body-small-typography;
|
||||
@include two-line-text-ellipsis;
|
||||
|
||||
width: $s-92;
|
||||
margin: auto 0;
|
||||
color: var(--entry-foreground-color);
|
||||
@ -781,17 +886,20 @@
|
||||
grid-area: content;
|
||||
display: flex;
|
||||
color: var(--entry-foreground-color-hover);
|
||||
@include bodySmallTypography;
|
||||
|
||||
@include body-small-typography;
|
||||
}
|
||||
}
|
||||
|
||||
%copy-button-children {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: fit-content;
|
||||
|
||||
&:hover {
|
||||
div {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
@ -801,8 +909,9 @@
|
||||
|
||||
// SELECTS AND DROPDOWNS
|
||||
%menu-dropdown {
|
||||
@include menuShadow;
|
||||
@include flexColumn;
|
||||
@include menu-shadow;
|
||||
@include flex-column;
|
||||
|
||||
position: absolute;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
@ -814,7 +923,8 @@
|
||||
}
|
||||
|
||||
%menu-item-base {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -823,13 +933,15 @@
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
%dropdown-element-base {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
@ -840,24 +952,29 @@
|
||||
color: var(--menu-foreground-color-rest);
|
||||
|
||||
span {
|
||||
@include flexCenter;
|
||||
@include textEllipsis;
|
||||
@include flex-center;
|
||||
@include text-ellipsis;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
color: var(--menu-foreground-color);
|
||||
span svg {
|
||||
|
||||
svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%dropdown-wrapper {
|
||||
@include menuShadow;
|
||||
@include menu-shadow;
|
||||
|
||||
position: absolute;
|
||||
top: $s-32;
|
||||
left: 0;
|
||||
@ -868,15 +985,15 @@
|
||||
margin-top: $s-1;
|
||||
border-radius: $br-8;
|
||||
z-index: $z-index-4;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
background-color: var(--menu-background-color);
|
||||
color: var(--menu-foreground-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
}
|
||||
|
||||
%select-wrapper {
|
||||
@include bodySmallTypography;
|
||||
@include body-small-typography;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -11,53 +11,47 @@
|
||||
// Dark background
|
||||
--db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; // used on overlay dark mode
|
||||
|
||||
//Dark foreground
|
||||
// Dark foreground
|
||||
--df-secondary: #8f9da3; // Used on button disabled background dark mode, grid metadata and some svg
|
||||
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // Used on button disabled foreground dark mode
|
||||
|
||||
//Dark accent
|
||||
// Dark accent
|
||||
--da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)}; // selection rect dark mode
|
||||
--da-tertiary-70: #{color.change(#00d1b8, $alpha: 0.7)}; // selection rect background dark mode
|
||||
|
||||
// LIGHT
|
||||
// Light background
|
||||
--lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; // overlay color light mode
|
||||
--lb-primary-60: #{color.change(#fff, $alpha: 0.6)}; // overlay color light mode
|
||||
--lb-quaternary: #eef0f2; // background disabled token
|
||||
|
||||
//Light foreground
|
||||
// Light foreground
|
||||
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)}; // foreground disabled token
|
||||
|
||||
//Light accent
|
||||
// Light accent
|
||||
--la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)}; // selection rect light mode
|
||||
--la-tertiary-70: #{color.change(#8c33eb, $alpha: 0.7)}; // selection rect background light mode
|
||||
|
||||
// STATUS COLOR
|
||||
--status-color-success-200: #a7e8d9; // Used on Register confirmation text
|
||||
--status-color-success-500: #2d9f8f; // Used on accept icon, and status widget
|
||||
|
||||
--status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements
|
||||
|
||||
--status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget
|
||||
|
||||
--status-color-info-500: #0e9be9; // used on pixel grid and status widget
|
||||
|
||||
// APP COLORS
|
||||
--app-white: #ffffff; // Used in several places
|
||||
--app-white: #fff; // Used in several places
|
||||
--app-black: #000; // Used on interactions, measurements and editor files
|
||||
|
||||
// SOCIAL LOGIN BUTTONS
|
||||
--google-login-background: #4285f4;
|
||||
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
|
||||
--google-login-foreground: var(--app-white);
|
||||
|
||||
--github-login-background: #4c4c4c;
|
||||
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
|
||||
--github-login-foreground: var(--app-white);
|
||||
|
||||
--oidc-login-background: #b3b3b3;
|
||||
--oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
|
||||
--oidc-login-foreground: var(--app-white);
|
||||
|
||||
--gitlab-login-background: #fc6d26;
|
||||
--gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
|
||||
--gitlab-login-foreground: var(--app-white);
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
.btn-secondary {
|
||||
flex-shrink: 0;
|
||||
height: $s-32;
|
||||
|
||||
svg {
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@ -57,6 +58,7 @@
|
||||
height: $s-40;
|
||||
padding: $s-4 $s-24;
|
||||
font-weight: $fw400;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-background-secondary);
|
||||
text-decoration: none;
|
||||
@ -124,10 +126,12 @@
|
||||
font-size: $s-16;
|
||||
color: var(--color-foreground-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: var(--color-foreground-primary);
|
||||
@ -139,6 +143,7 @@
|
||||
|
||||
.btn-primary {
|
||||
@extend %button-primary;
|
||||
|
||||
text-transform: uppercase;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
@ -146,6 +151,7 @@
|
||||
|
||||
.btn-secondary {
|
||||
@extend %button-secondary;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-12;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
//#################################################
|
||||
// #################################################
|
||||
// MAIN STYLES
|
||||
//#################################################
|
||||
// #################################################
|
||||
|
||||
@forward "./fonts.scss";
|
||||
@forward "./spacing.scss";
|
||||
@forward "./borders.scss";
|
||||
@forward "./opacity.scss";
|
||||
@forward "./shadows.scss";
|
||||
@forward "./z-index.scss";
|
||||
@forward "./mixins.scss";
|
||||
@forward "./focus.scss";
|
||||
@forward "./animations.scss";
|
||||
@forward "./basic-rules.scss";
|
||||
@forward "./fonts";
|
||||
@forward "./spacing";
|
||||
@forward "./borders";
|
||||
@forward "./opacity";
|
||||
@forward "./shadows";
|
||||
@forward "./z-index";
|
||||
@forward "./mixins";
|
||||
@forward "./focus";
|
||||
@forward "./animations";
|
||||
@forward "./basic-rules";
|
||||
|
||||
@ -6,44 +6,46 @@
|
||||
|
||||
@use "./spacing.scss" as *;
|
||||
|
||||
@mixin focusType($type) {
|
||||
$realType: "";
|
||||
@mixin focus-type($type) {
|
||||
$real-type: "";
|
||||
|
||||
@if $type {
|
||||
$realType: $type + "-";
|
||||
$real-type: $type + "-";
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
background-color: var(--button-#{$realType}background-color-focus);
|
||||
border: $s-1 solid var(--button-#{$realType}border-color-focus);
|
||||
color: var(--button-#{$realType}foreground-color-focus);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-#{$realType}foreground-color-focus);
|
||||
background-color: var(--button-#{$real-type}background-color-focus);
|
||||
border: $s-1 solid var(--button-#{$real-type}border-color-focus);
|
||||
color: var(--button-#{$real-type}foreground-color-focus);
|
||||
|
||||
svg {
|
||||
stroke: var(--button-#{$real-type}foreground-color-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focusPrimary {
|
||||
@include focusType(primary);
|
||||
@mixin focus-primary {
|
||||
@include focus-type(primary);
|
||||
}
|
||||
|
||||
@mixin focusSecondary {
|
||||
@include focusType(secondary);
|
||||
@mixin focus-secondary {
|
||||
@include focus-type(secondary);
|
||||
}
|
||||
|
||||
@mixin focusTertiary {
|
||||
@include focusType(tertiary);
|
||||
@mixin focus-tertiary {
|
||||
@include focus-type(tertiary);
|
||||
}
|
||||
|
||||
@mixin focusRadio {
|
||||
@include focusType(radio);
|
||||
@mixin focus-radio {
|
||||
@include focus-type(radio);
|
||||
}
|
||||
|
||||
@mixin focus {
|
||||
@include focusType(null);
|
||||
@include focus-type(null);
|
||||
}
|
||||
|
||||
@mixin focusInput {
|
||||
@mixin focus-input {
|
||||
&:focus-within {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
|
||||
// Typography scale
|
||||
$fs-base: 16;
|
||||
|
||||
$fs-10: math.div(10, $fs-base) + rem;
|
||||
$fs-11: 0.688rem;
|
||||
$fs-12: math.div(12, $fs-base) + rem;
|
||||
|
||||
@ -7,37 +7,37 @@
|
||||
@use "./fonts.scss" as *;
|
||||
@use "./spacing.scss" as *;
|
||||
|
||||
@mixin flexCenter {
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin flexColumn($gap: $s-4) {
|
||||
@mixin flex-column($gap: $s-4) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$gap};
|
||||
}
|
||||
|
||||
@mixin flexRow {
|
||||
@mixin flex-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
}
|
||||
|
||||
@mixin buttonStyle {
|
||||
@mixin button-style {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin removeInputStyle {
|
||||
@mixin remove-input-style {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@mixin uppercaseTitleTipography {
|
||||
@mixin uppercase-title-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-11;
|
||||
font-weight: $fw500;
|
||||
@ -45,28 +45,28 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin bigTitleTipography {
|
||||
@mixin big-title-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-24;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin medTitleTipography {
|
||||
@mixin med-title-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-20;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin smallTitleTipography {
|
||||
@mixin small-title-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin headlineLargeTypography {
|
||||
@mixin headline-large-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-18;
|
||||
line-height: 1.2;
|
||||
@ -74,7 +74,7 @@
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
@mixin headlineMediumTypography {
|
||||
@mixin headline-medium-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-16;
|
||||
line-height: 1.4;
|
||||
@ -82,7 +82,7 @@
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
@mixin headlineSmallTypography {
|
||||
@mixin headline-small-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-12;
|
||||
line-height: 1.2;
|
||||
@ -90,35 +90,35 @@
|
||||
font-weight: $fw500;
|
||||
}
|
||||
|
||||
@mixin bodyLargeTypography {
|
||||
@mixin body-large-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-16;
|
||||
line-height: 1.5;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
@mixin bodyMediumTypography {
|
||||
@mixin body-medium-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-14;
|
||||
line-height: 1.4;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
@mixin bodySmallTypography {
|
||||
@mixin body-small-typography {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-size: $fs-12;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@mixin codeTypography {
|
||||
@mixin code-typography {
|
||||
font-family: "robotomono", monospace;
|
||||
font-size: $fs-12;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin textEllipsis {
|
||||
@mixin text-ellipsis {
|
||||
display: block;
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
@ -126,7 +126,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin twoLineTextEllipsis {
|
||||
@mixin two-line-text-ellipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -135,8 +135,8 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@mixin inspectValue {
|
||||
@include bodySmallTypography;
|
||||
@mixin inspect-value {
|
||||
@include body-small-typography;
|
||||
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
@ -146,7 +146,7 @@
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
|
||||
@mixin copyWrapperBase {
|
||||
@mixin copy-wrapper-base {
|
||||
position: relative;
|
||||
min-height: $s-32;
|
||||
width: $s-144;
|
||||
@ -155,7 +155,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@mixin hiddenElement {
|
||||
@mixin hidden-element {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -6,10 +6,6 @@
|
||||
|
||||
@use "./spacing.scss" as *;
|
||||
|
||||
@mixin menuShadow {
|
||||
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
|
||||
}
|
||||
|
||||
@mixin alertShadow {
|
||||
box-shadow: 0px $s-4 $s-4 var(--menu-shadow-color);
|
||||
@mixin menu-shadow {
|
||||
box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
|
||||
}
|
||||
|
||||
@ -4,5 +4,5 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@forward "./themes/default-theme.scss";
|
||||
@forward "./themes/light-theme.scss";
|
||||
@forward "./themes/default-theme";
|
||||
@forward "./themes/light-theme";
|
||||
|
||||
@ -10,6 +10,5 @@
|
||||
--color-background-disabled: var(--df-secondary);
|
||||
--color-foreground-disabled: var(--df-secondary-40);
|
||||
--color-accent-tertiary-muted: var(--da-tertiary-10); // selection rect
|
||||
|
||||
--overlay-color: var(--db-primary-60);
|
||||
}
|
||||
|
||||
@ -10,6 +10,5 @@
|
||||
--color-background-disabled: var(--lb-quaternary);
|
||||
--color-foreground-disabled: var(--lf-secondary-40);
|
||||
--color-accent-tertiary-muted: var(--la-tertiary-10);
|
||||
|
||||
--overlay-color: var(--lb-primary-60);
|
||||
}
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
// debugging.
|
||||
|
||||
body {
|
||||
color: yellow;
|
||||
color: rgb(255 255 0);
|
||||
}
|
||||
|
||||
.deprecated-icon {
|
||||
fill: red !important;
|
||||
fill: rgb(255 0 0) !important;
|
||||
}
|
||||
|
||||
@ -4,29 +4,28 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
//#################################################
|
||||
// #################################################
|
||||
// MAIN STYLES
|
||||
//#################################################
|
||||
// #################################################
|
||||
|
||||
@forward "common/dependencies/reset";
|
||||
@forward "common/refactor/color-defs.scss";
|
||||
@forward "common/refactor/color-defs";
|
||||
@forward "common/dependencies/fonts";
|
||||
@forward "common/dependencies/animations";
|
||||
@forward "common/dependencies/highlight.scss";
|
||||
@forward "common/dependencies/storybook.scss";
|
||||
@forward "common/dependencies/highlight";
|
||||
@forward "common/dependencies/storybook";
|
||||
@forward "common/refactor/themes";
|
||||
@forward "common/refactor/design-tokens";
|
||||
|
||||
@forward "common/refactor/themes.scss";
|
||||
@forward "common/refactor/design-tokens.scss";
|
||||
|
||||
//#################################################
|
||||
// #################################################
|
||||
// Layouts
|
||||
//#################################################
|
||||
// #################################################
|
||||
|
||||
@forward "common/base";
|
||||
|
||||
//#################################################
|
||||
// #################################################
|
||||
// Commons
|
||||
//#################################################
|
||||
// #################################################
|
||||
|
||||
// TODO: remove this stylesheet once the new text editor is in place
|
||||
// https: //tree.taiga.io/project/penpot/us/8165
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.rich-text {
|
||||
color: var(--app-black);
|
||||
height: 100%;
|
||||
font-family: sourcesanspro;
|
||||
font-family: sans-serif, "sourcesanspro";
|
||||
|
||||
div {
|
||||
line-height: inherit;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
@ -57,7 +57,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
|
||||
@ -33,19 +33,19 @@
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
@include deprecated.big-title-typography;
|
||||
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.auth-tagline {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--title-foreground-color);
|
||||
@ -65,7 +65,7 @@
|
||||
.login-button,
|
||||
.login-ldap-button {
|
||||
@extend %button-primary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
.go-back-link {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
}
|
||||
@ -105,7 +105,7 @@
|
||||
.account-text,
|
||||
.recovery-text,
|
||||
.demo-account-text {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
text-align: right;
|
||||
color: var(--title-foreground-color);
|
||||
@ -116,7 +116,7 @@
|
||||
.recovery-link,
|
||||
.forgot-pass-link,
|
||||
.demo-account-link {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
@ -138,14 +138,14 @@
|
||||
.register-btn,
|
||||
.recover-btn {
|
||||
@extend %button-primary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.notification-text-email {
|
||||
@include deprecated.medTitleTipography;
|
||||
@include deprecated.med-title-typography;
|
||||
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
.auth-title {
|
||||
@include deprecated.medTitleTipography;
|
||||
@include deprecated.med-title-typography;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,13 +44,13 @@
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.notification-text-email {
|
||||
@include deprecated.medTitleTipography;
|
||||
@include deprecated.med-title-typography;
|
||||
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.terms-register {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
gap: deprecated.$s-4;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-error);
|
||||
}
|
||||
@ -40,11 +40,11 @@
|
||||
}
|
||||
|
||||
.location-text {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
}
|
||||
|
||||
.author {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -56,13 +56,13 @@
|
||||
}
|
||||
|
||||
.author-fullname {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
color: var(--comment-title-color);
|
||||
}
|
||||
|
||||
.author-timeago {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
color: var(--comment-subtitle-color);
|
||||
}
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
.cover {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -131,7 +131,7 @@
|
||||
}
|
||||
|
||||
.item {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
overflow-wrap: break-word;
|
||||
@ -140,7 +140,7 @@
|
||||
}
|
||||
|
||||
.replies {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
gap: deprecated.$s-8;
|
||||
@ -245,7 +245,7 @@
|
||||
}
|
||||
|
||||
.floating-thread-header-left {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -272,11 +272,11 @@
|
||||
flex-direction: column;
|
||||
gap: deprecated.$s-8;
|
||||
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-24;
|
||||
@ -381,7 +381,7 @@
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
background: var(--input-background-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
@ -79,8 +79,8 @@
|
||||
}
|
||||
|
||||
.color-text {
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.two-line-text-ellipsis;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
width: deprecated.$s-80;
|
||||
text-align: center;
|
||||
@ -89,15 +89,15 @@
|
||||
color: var(--palette-text-color);
|
||||
|
||||
&.small-text {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
max-height: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.big-text {
|
||||
@include deprecated.inspectValue;
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
@include deprecated.inspect-value;
|
||||
@include deprecated.two-line-text-ellipsis;
|
||||
|
||||
line-height: 1;
|
||||
color: var(--palette-text-color);
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
@include deprecated.menuShadow;
|
||||
@include deprecated.menu-shadow;
|
||||
|
||||
position: absolute;
|
||||
top: deprecated.$s-12;
|
||||
@ -50,7 +50,7 @@
|
||||
display: flex;
|
||||
|
||||
.context-menu-action {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.copy-button {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
width: 100%;
|
||||
height: deprecated.$s-32;
|
||||
@ -17,7 +17,7 @@
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon-btn {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-28;
|
||||
@ -56,8 +56,8 @@
|
||||
}
|
||||
|
||||
.copy-wrapper {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.copyWrapperBase;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.copy-wrapper-base;
|
||||
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
@ -65,7 +65,7 @@
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
|
||||
.icon-btn {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -334,7 +334,7 @@
|
||||
overflow-y: hidden;
|
||||
|
||||
.inside-input {
|
||||
@include deprecated.removeInputStyle;
|
||||
@include deprecated.remove-input-style;
|
||||
@include t.use-typography("body-small");
|
||||
@include text-ellipsis;
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// PROGRESS WIDGET
|
||||
.progress-widget {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.progress {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
@ -81,8 +81,8 @@
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: inline;
|
||||
text-align: left;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.progress-close-button {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
padding: 0;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.radio-btn-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
@ -18,9 +18,9 @@
|
||||
.radio-icon {
|
||||
--radio-icon-border-color: var(--radio-btn-border-color);
|
||||
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.focusRadio;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.focus-radio;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
flex-grow: 1;
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
.title-name {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--radio-btn-foreground-color);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
--text-color: var(--menu-foreground-color);
|
||||
|
||||
@extend %new-scrollbar;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
margin-inline-end: var(--sp-xxs);
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
.current-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
@ -100,7 +100,7 @@
|
||||
@extend %dropdown-element-base;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
@ -144,5 +144,5 @@
|
||||
}
|
||||
|
||||
.current-label {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@ -79,8 +79,8 @@
|
||||
}
|
||||
|
||||
.collapse-sidebar {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.button-style;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
@ -89,7 +89,7 @@
|
||||
border-radius: deprecated.$br-5;
|
||||
|
||||
svg {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
|
||||
.icon-text-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -35,21 +35,21 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
}
|
||||
|
||||
.modal-item-element {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
}
|
||||
|
||||
.modal-component-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.modal-component-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -61,7 +61,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -31,14 +31,14 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend %input-with-label;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard-comments-section {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: relative;
|
||||
border-radius: deprecated.$br-8;
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@include deprecated.menuShadow;
|
||||
@include deprecated.menu-shadow;
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
20
frontend/src/app/main/ui/dashboard/import.scss
vendored
20
frontend/src/app/main/ui/dashboard/import.scss
vendored
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden auto;
|
||||
@ -62,7 +62,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
@ -72,10 +72,10 @@
|
||||
display: flex;
|
||||
|
||||
.file-name {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-16;
|
||||
@ -93,13 +93,13 @@
|
||||
|
||||
.file-name-edit {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -107,7 +107,7 @@
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.edit-entry-buttons {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
button {
|
||||
@extend %button-tertiary;
|
||||
@ -153,7 +153,7 @@
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.linked-library-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
|
||||
.current-team {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
.team-text {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
width: auto;
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
// This icon still use the old svg
|
||||
.penpot-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
svg {
|
||||
fill: var(--icon-foreground);
|
||||
@ -125,7 +125,7 @@
|
||||
}
|
||||
|
||||
.team-picture {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
border-radius: 50%;
|
||||
height: var(--sp-xxl);
|
||||
@ -140,8 +140,8 @@
|
||||
}
|
||||
|
||||
.switch-options {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
max-width: var(--sp-xxl);
|
||||
min-width: deprecated.$s-28;
|
||||
@ -199,7 +199,7 @@
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: var(--sp-xxl);
|
||||
height: var(--sp-xxl);
|
||||
@ -301,7 +301,7 @@
|
||||
}
|
||||
|
||||
.element-title {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
width: deprecated.$s-256;
|
||||
color: var(--color-foreground-primary);
|
||||
@ -366,8 +366,8 @@
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -401,7 +401,7 @@
|
||||
}
|
||||
|
||||
.profile {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -412,7 +412,7 @@
|
||||
|
||||
.profile-fullname {
|
||||
@include t.use-typography("title-small");
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
align-self: center;
|
||||
max-width: var(--sp-l) 0;
|
||||
@ -454,7 +454,7 @@
|
||||
}
|
||||
|
||||
.profile-dropdown-item .open-arrow {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
}
|
||||
|
||||
.profile-dropdown-item .open-arrow svg {
|
||||
@ -504,7 +504,7 @@
|
||||
|
||||
.menu-version {
|
||||
@include t.use-typography("code-font");
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-inline-start: var(--sp-s);
|
||||
@ -545,7 +545,7 @@
|
||||
}
|
||||
|
||||
.upgrade-plan-section {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -638,7 +638,7 @@
|
||||
}
|
||||
|
||||
.current-org {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
text-transform: none;
|
||||
display: grid;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.cta-top-section {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: grid;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -44,7 +44,7 @@
|
||||
}
|
||||
|
||||
.icon-dropdown {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: var(--sp-l);
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
.cta-bottom-section .content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
display: inline-block;
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
.cta-link {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
align-self: end;
|
||||
margin-inline-start: var(--sp-xs);
|
||||
@ -147,7 +147,7 @@
|
||||
}
|
||||
|
||||
.manage-subscription-link {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-accent-tertiary);
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -38,13 +38,13 @@
|
||||
|
||||
.group-name-input {
|
||||
@extend %input-element-label;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-8;
|
||||
|
||||
label {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
@ -53,7 +53,7 @@
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
@include deprecated.big-title-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
color: var(--color-foreground-primary);
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
svg {
|
||||
width: var(--cell-size);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// PROGRESS WIDGET
|
||||
.export-progress-widget {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
.export-progress-title {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.progress {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
@ -81,8 +81,8 @@
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: inline;
|
||||
text-align: left;
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.progress-close-button {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
padding: 0;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -140,12 +140,12 @@
|
||||
|
||||
.modal-content,
|
||||
.no-selection {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
|
||||
.modal-link {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -153,15 +153,15 @@
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -174,7 +174,7 @@
|
||||
}
|
||||
|
||||
.selection-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -203,21 +203,21 @@
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
|
||||
.selection-row {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
@ -229,7 +229,7 @@
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -241,8 +241,8 @@
|
||||
}
|
||||
|
||||
.selection-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
@ -250,8 +250,8 @@
|
||||
}
|
||||
|
||||
.selection-scale {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
@ -259,8 +259,8 @@
|
||||
}
|
||||
|
||||
.selection-extension {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
@ -269,7 +269,7 @@
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
@ -306,7 +306,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -321,7 +321,7 @@
|
||||
align-items: flex-start;
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -333,16 +333,16 @@
|
||||
}
|
||||
|
||||
.option-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-large-typography;
|
||||
}
|
||||
|
||||
.file-entry {
|
||||
.file-name {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
@ -355,8 +355,8 @@
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -36,12 +36,12 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
|
||||
.modal-link {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@ -49,15 +49,15 @@
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
.selection-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -99,21 +99,21 @@
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
|
||||
.selection-row {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
@ -125,7 +125,7 @@
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -137,8 +137,8 @@
|
||||
}
|
||||
|
||||
.selection-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
@ -146,8 +146,8 @@
|
||||
}
|
||||
|
||||
.selection-scale {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
@ -155,8 +155,8 @@
|
||||
}
|
||||
|
||||
.selection-extension {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
@ -165,7 +165,7 @@
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
@ -202,7 +202,7 @@
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
@ -217,7 +217,7 @@
|
||||
align-items: flex-start;
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
padding: 0.25rem 0;
|
||||
@ -230,16 +230,16 @@
|
||||
}
|
||||
|
||||
.option-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-large-typography;
|
||||
}
|
||||
|
||||
.file-entry {
|
||||
.file-name {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
@ -252,8 +252,8 @@
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-large-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.attributes-block {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
}
|
||||
|
||||
.title-spacing-annotation {
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.annotation-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--entry-foreground-color);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
.download-button {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.code-block {
|
||||
@include deprecated.codeTypography;
|
||||
@include deprecated.code-typography;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -95,7 +95,7 @@
|
||||
}
|
||||
|
||||
.code-lang-select {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
width: deprecated.$s-72;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
@ -104,7 +104,7 @@
|
||||
}
|
||||
|
||||
.code-lang-option {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
width: deprecated.$s-72;
|
||||
height: deprecated.$s-32;
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -129,7 +129,7 @@
|
||||
stroke: var(--title-foreground-color);
|
||||
|
||||
.collapsabled-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
@ -36,13 +36,13 @@
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
margin-bottom: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.multiple-exports {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
grid-column: 1 / span 9;
|
||||
}
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
}
|
||||
|
||||
.element-group {
|
||||
@ -102,14 +102,14 @@
|
||||
|
||||
.suffix-input {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
|
||||
@ -56,8 +56,8 @@
|
||||
}
|
||||
|
||||
.layer-title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
block-size: $sz-32;
|
||||
padding: var(--sp-s) 0;
|
||||
@ -70,8 +70,8 @@
|
||||
}
|
||||
|
||||
.layer-subtitle {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.badge-notification {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
--badge-notification-bg-color: var(--alert-background-color-default);
|
||||
--badge-notification-fg-color: var(--alert-text-foreground-color-default);
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.small {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
min-height: deprecated.$s-20;
|
||||
border-radius: deprecated.$br-6;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
}
|
||||
|
||||
.context-text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
align-self: center;
|
||||
color: var(--context-notification-fg-color);
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
.link,
|
||||
.contain-html .context-text a {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
align-self: center;
|
||||
display: inline;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
// STEP CONTAINER
|
||||
.paginator {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
height: deprecated.$s-20;
|
||||
text-align: right;
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
.radio-btns label,
|
||||
.select-class span {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
}
|
||||
|
||||
// STEP 1
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
@include deprecated.big-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
min-height: deprecated.$s-32;
|
||||
@ -70,7 +70,7 @@
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin: 0;
|
||||
@ -78,7 +78,7 @@
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
.input-spacing input {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
}
|
||||
|
||||
// STEP-4
|
||||
|
||||
@ -236,7 +236,7 @@
|
||||
[:div {:class (stl/css-case
|
||||
:modal-overlay true)}
|
||||
|
||||
[:div.animated.fadeIn {:class (stl/css :modal-container)}
|
||||
[:div.animated.fade-in {:class (stl/css :modal-container)}
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding-v2.welcome.title")]
|
||||
[:div {:class (stl/css :modal-sections)}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
position: absolute;
|
||||
top: deprecated.$s-40;
|
||||
@ -54,13 +54,13 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
@include deprecated.big-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.medTitleTipography;
|
||||
@include deprecated.med-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -70,34 +70,34 @@
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.team-features {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
@ -150,7 +150,7 @@
|
||||
|
||||
.first-block,
|
||||
.second-block {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
@ -165,8 +165,8 @@
|
||||
@extend %input-element-label;
|
||||
|
||||
label {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
@ -175,7 +175,7 @@
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
@ -201,7 +201,7 @@
|
||||
}
|
||||
|
||||
.role-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
margin-block-end: deprecated.$s-8;
|
||||
color: var(--modal-title-foreground-color);
|
||||
@ -213,7 +213,7 @@
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: right;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
(let [slide* (mf/use-state :start)
|
||||
slide (deref slide*)
|
||||
|
||||
klass* (mf/use-state "fadeInDown")
|
||||
klass* (mf/use-state "fade-in-down")
|
||||
klass (deref klass*)
|
||||
|
||||
navigate
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
(mf/with-effect [slide]
|
||||
(when (not= :start slide)
|
||||
(reset! klass* "fadeIn"))
|
||||
(reset! klass* "fade-in"))
|
||||
(let [sem (tm/schedule 300 #(reset! klass* nil))]
|
||||
(fn []
|
||||
(reset! klass* nil)
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -68,20 +68,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-96;
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineLargeTypography;
|
||||
@include deprecated.headline-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -72,20 +72,20 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
list-style: disc;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -31,19 +31,19 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -31,19 +31,19 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.fields-row {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -69,12 +69,12 @@
|
||||
}
|
||||
|
||||
.element-title {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.text-ellipsis;
|
||||
@include deprecated.body-medium-typography;
|
||||
}
|
||||
|
||||
.back-to-dashboard {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
|
||||
.cta-button {
|
||||
@include t.use-typography("body-medium");
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
align-items: center;
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
@ -202,13 +202,13 @@
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
text-transform: none;
|
||||
color: var(--title-foreground-color-hover);
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--empty-message-foreground-color);
|
||||
display: grid;
|
||||
@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
.thumbnails-close {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 1;
|
||||
@ -81,7 +81,7 @@
|
||||
.viewer-go-prev,
|
||||
.viewer-go-next {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: absolute;
|
||||
right: deprecated.$s-8;
|
||||
@ -128,7 +128,7 @@
|
||||
|
||||
.reset-button {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
@ -144,8 +144,8 @@
|
||||
}
|
||||
|
||||
.counter {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
width: deprecated.$s-64;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// COMMENT DROPDOWN ON HEADER
|
||||
.view-options {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
.icon,
|
||||
.icon-dropdown {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-16;
|
||||
@ -64,7 +64,7 @@
|
||||
@extend %dropdown-element-base;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
@ -45,39 +45,39 @@
|
||||
}
|
||||
|
||||
.sitemap-zone {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.sitemap-text {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.breadcrumb-text {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
max-width: 12vw; // This is a fallback
|
||||
max-width: 12cqw; // This is a unit refered to container
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
@ -107,7 +107,7 @@
|
||||
@extend %dropdown-element-base;
|
||||
|
||||
.icon-check {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-16;
|
||||
@ -125,8 +125,8 @@
|
||||
}
|
||||
|
||||
.current-frame {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--title-foreground-color-hover);
|
||||
@ -138,7 +138,7 @@
|
||||
}
|
||||
|
||||
.frame-name {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
max-width: 17vw; // This is a fallback
|
||||
max-width: 17cqw; // This is a unit refered to container
|
||||
@ -146,14 +146,14 @@
|
||||
|
||||
// SECTION BUTTONS
|
||||
.mode-zone {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mode-zone-btn {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
@ -170,7 +170,7 @@
|
||||
|
||||
// OPTION AREA
|
||||
.options-zone {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
@ -187,7 +187,7 @@
|
||||
|
||||
.fullscreen-btn {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
@ -209,7 +209,7 @@
|
||||
|
||||
.edit-btn {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
@ -223,7 +223,7 @@
|
||||
|
||||
.go-log-btn {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
padding: 0 deprecated.$s-8;
|
||||
@ -233,15 +233,15 @@
|
||||
|
||||
// ZOOM WIDGET
|
||||
.zoom-widget {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-28;
|
||||
min-width: deprecated.$s-64;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--button-tertiary-foreground-color-rest);
|
||||
}
|
||||
@ -286,7 +286,7 @@
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.zoom-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-32;
|
||||
@ -306,7 +306,7 @@
|
||||
}
|
||||
|
||||
.zoom-text {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
min-width: deprecated.$s-64;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.inspect-svg-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.view-options {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -49,7 +49,7 @@
|
||||
min-height: deprecated.$s-32;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-16;
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
.icon,
|
||||
.icon-dropdown {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -31,8 +31,8 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
max-height: deprecated.$s-400;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.share-link-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -36,20 +36,20 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.share-link-section {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.hint-wrapper {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
}
|
||||
|
||||
.hint {
|
||||
@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
.custon-input-wrapper {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
.input-text {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--input-foreground-color-active);
|
||||
padding-left: deprecated.$s-8;
|
||||
@ -83,7 +83,7 @@
|
||||
|
||||
.copy-button {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
gap: deprecated.$s-8;
|
||||
height: deprecated.$s-32;
|
||||
@ -97,14 +97,14 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@ -122,14 +122,14 @@
|
||||
}
|
||||
|
||||
.permissions-section {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.manage-permissions {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
color: var(--menu-foreground-color-rest);
|
||||
height: deprecated.$s-32;
|
||||
@ -139,7 +139,7 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
margin-right: deprecated.$s-6;
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
}
|
||||
|
||||
.select-all-row {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
justify-content: space-between;
|
||||
height: deprecated.$s-32;
|
||||
@ -207,7 +207,7 @@
|
||||
|
||||
.count-pages,
|
||||
.current-tag {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
@ -33,13 +33,13 @@
|
||||
}
|
||||
|
||||
.counter {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
width: deprecated.$s-60;
|
||||
}
|
||||
@ -77,7 +77,7 @@
|
||||
.right-scroll-handler,
|
||||
.left-scroll-handler {
|
||||
@extend %button-tertiary;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.thumbnail-item {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
.thumbnail-preview {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-132;
|
||||
min-height: deprecated.$s-132;
|
||||
@ -153,8 +153,8 @@
|
||||
}
|
||||
|
||||
.thumbnail-info {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
text-align: center;
|
||||
color: var(--viewer-thumbnails-control-foreground-color);
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@ -124,14 +124,14 @@
|
||||
height: 100%;
|
||||
|
||||
&.no-text {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-empty {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--palette-text-color);
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
width: 100%;
|
||||
|
||||
.library-name {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--context-menu-foreground-color);
|
||||
display: grid;
|
||||
@ -47,7 +47,7 @@
|
||||
max-width: deprecated.$s-400;
|
||||
|
||||
.lib-name {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
max-width: deprecated.$s-380;
|
||||
}
|
||||
@ -60,11 +60,11 @@
|
||||
.icon-wrapper {
|
||||
margin-left: deprecated.$s-4;
|
||||
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
svg {
|
||||
@extend %button-icon-small;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
@ -85,10 +85,10 @@
|
||||
color: var(--context-menu-foreground-color-selected);
|
||||
|
||||
.icon-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
svg {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--context-menu-foreground-color-selected);
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.color-values {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
margin-top: deprecated.$s-8;
|
||||
|
||||
@ -16,11 +16,11 @@
|
||||
}
|
||||
|
||||
.colors-row {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
.input-wrapper {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
width: deprecated.$s-84;
|
||||
display: flex;
|
||||
@ -29,11 +29,11 @@
|
||||
}
|
||||
|
||||
.hex-alpha-wrapper {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
.input-wrapper {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
width: deprecated.$s-84;
|
||||
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
|
||||
.offset-input-wrapper {
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
width: deprecated.$s-92;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.hue-wheel-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
.handlers-wrapper {
|
||||
@include deprecated.flexRow;
|
||||
@include deprecated.flex-row;
|
||||
|
||||
height: deprecated.$s-200;
|
||||
width: deprecated.$s-52;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.hsva-selector {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
padding: deprecated.$s-4;
|
||||
row-gap: deprecated.$s-8;
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
.hsva-selector-label {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.mode-dropdown-wrapper {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
@extend %asset-element;
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -78,7 +78,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -91,7 +91,7 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.context-list,
|
||||
.workspace-context-submenu {
|
||||
@include deprecated.menuShadow;
|
||||
@include deprecated.menu-shadow;
|
||||
|
||||
display: grid;
|
||||
width: deprecated.$s-240;
|
||||
@ -46,20 +46,20 @@
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
gap: deprecated.$s-2;
|
||||
color: var(--menu-shortcut-foreground-color);
|
||||
|
||||
.shortcut-key {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.body-small-typography;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-20;
|
||||
padding: deprecated.$s-2 deprecated.$s-6;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-32;
|
||||
height: deprecated.$s-32;
|
||||
@ -38,8 +38,8 @@
|
||||
|
||||
.project-name,
|
||||
.file-name {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.uppercase-title-typography;
|
||||
@include deprecated.text-ellipsis;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: 100%;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@include deprecated.smallTitleTipography;
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
text-transform: none;
|
||||
color: var(--title-foreground-color-hover);
|
||||
@ -59,11 +59,11 @@
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.textEllipsis;
|
||||
@include deprecated.text-ellipsis;
|
||||
}
|
||||
|
||||
.file-name-input {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
.shared-badge {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-32;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
@ -31,18 +31,18 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend %input-with-label;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
label {
|
||||
text-transform: none;
|
||||
@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.palette-item {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
opacity: deprecated.$op-10;
|
||||
@ -127,8 +127,8 @@
|
||||
}
|
||||
|
||||
.handler {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.button-style;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-12;
|
||||
height: 100%;
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
@include deprecated.headline-medium-typography;
|
||||
|
||||
margin-block-end: deprecated.$s-32;
|
||||
color: var(--modal-title-foreground-color);
|
||||
@ -86,7 +86,7 @@
|
||||
|
||||
.primary-button {
|
||||
@extend %button-primary;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
padding: deprecated.$s-0 deprecated.$s-16;
|
||||
}
|
||||
@ -98,13 +98,13 @@
|
||||
|
||||
.cancel-button {
|
||||
@extend %button-secondary;
|
||||
@include deprecated.headlineSmallTypography;
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
padding: deprecated.$s-0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-20;
|
||||
padding: 0 0 0 deprecated.$s-8;
|
||||
@ -163,13 +163,13 @@
|
||||
}
|
||||
|
||||
.plugin-title {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
@include deprecated.body-medium-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.plugin-summary {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -202,7 +202,7 @@
|
||||
}
|
||||
|
||||
.plugins-empty-text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -212,7 +212,7 @@ div.input-error {
|
||||
}
|
||||
|
||||
.info {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-top: deprecated.$s-4;
|
||||
|
||||
@ -262,14 +262,14 @@ div.input-error {
|
||||
}
|
||||
|
||||
.permissions-list-text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.permissions-disclaimer {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
padding: deprecated.$s-16;
|
||||
background: var(--color-background-quaternary);
|
||||
@ -283,7 +283,7 @@ div.input-error {
|
||||
}
|
||||
|
||||
.discover {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-top: deprecated.$s-24;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.zoom-widget {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.button-style;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -39,7 +39,7 @@
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
height: 100%;
|
||||
padding: deprecated.$s-8 0;
|
||||
@ -79,7 +79,7 @@
|
||||
}
|
||||
|
||||
.zoom-text {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
min-width: deprecated.$s-48;
|
||||
@ -181,14 +181,14 @@
|
||||
}
|
||||
|
||||
.persistence-status-widget {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.flex-center;
|
||||
|
||||
width: deprecated.$s-24;
|
||||
height: deprecated.$s-24;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user