mirror of
https://github.com/penpot/penpot.git
synced 2026-04-25 11:18:36 +00:00
🔧 Add SCSS linter (stylelint) (#8592)
* 🔧 Add SCSS linter (stylelint) * ✨ Fix default standard scss errors with extends - WIP * ✨ Fix default standard scss errors * ✨ Update and cleanup * ✨ Update and cleanup * ✨ Update and cleanup * 🐛 Fix broken visual regression tests * 📎 Add to CHANGES * ♻️ Remove unused class
This commit is contained in:
Xaviju
GitHub
parent
cd67dc42c4
commit
713ff6190b
@ -21,6 +21,7 @@
|
||||
- Copy token name from contextual menu [Taiga #13568](https://tree.taiga.io/project/penpot/issue/13568)
|
||||
- Add natural sorting on token names [Taiga #13713](https://tree.taiga.io/project/penpot/issue/13713)
|
||||
- Add drag-to-change for numeric inputs in workspace sidebar [Github #2466](https://github.com/penpot/penpot/issues/2466)
|
||||
- Add CSS linter [Taiga #13790](https://tree.taiga.io/project/penpot/us/13790)
|
||||
|
||||
### :bug: Bugs fixed
|
||||
|
||||
@ -48,7 +49,6 @@
|
||||
- Add token name on broken token pill on sidebar [Taiga #13527](https://tree.taiga.io/project/penpot/issue/13527)
|
||||
- Fix tooltip activated when tab change [Taiga #13627](https://tree.taiga.io/project/penpot/issue/13627)
|
||||
|
||||
|
||||
## 2.14.0
|
||||
|
||||
### :boom: Breaking changes & Deprecations
|
||||
@ -116,6 +116,7 @@
|
||||
## 2.13.0
|
||||
|
||||
### :heart: Community contributions (Thank you!)
|
||||
|
||||
- Add 'page' special shapeId to MCP export_shape tool for full-page snapshots [Github #8689](https://github.com/penpot/penpot/issues/8689)
|
||||
|
||||
- Fix mask issues with component swap (by @dfelinto) [Github #7675](https://github.com/penpot/penpot/issues/7675)
|
||||
|
||||
@ -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": "exit 0",
|
||||
"lint:scss": "pnpx stylelint 'src/**/*.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",
|
||||
@ -94,6 +94,7 @@
|
||||
"postcss": "^8.5.4",
|
||||
"postcss-clean": "^1.2.2",
|
||||
"postcss-modules": "^6.0.1",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "3.5.3",
|
||||
"pretty-time": "^1.1.0",
|
||||
"prop-types": "^15.8.1",
|
||||
@ -111,6 +112,10 @@
|
||||
"source-map-support": "^0.5.21",
|
||||
"storybook": "10.1.11",
|
||||
"style-dictionary": "5.0.0-rc.1",
|
||||
"stylelint": "^17.4.0",
|
||||
"stylelint-config-standard-scss": "^17.0.0",
|
||||
"stylelint-scss": "^7.0.0",
|
||||
"stylelint-use-logical-spec": "^5.0.1",
|
||||
"svg-sprite": "^2.0.4",
|
||||
"tdigest": "^0.1.2",
|
||||
"tinycolor2": "^1.6.0",
|
||||
|
||||
573
frontend/pnpm-lock.yaml
generated
573
frontend/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -12,7 +12,7 @@
|
||||
@use "./z-index.scss" as *;
|
||||
|
||||
// SCROLLBAR
|
||||
.new-scrollbar {
|
||||
%new-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(170, 181, 186, 0.3) transparent;
|
||||
&:hover {
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
.button-primary {
|
||||
%button-primary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include headlineSmallTypography;
|
||||
@ -100,7 +100,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
%button-secondary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
@ -142,7 +142,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-tertiary {
|
||||
%button-tertiary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
--button-tertiary-border-width: #{$s-2};
|
||||
@ -191,7 +191,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-selected {
|
||||
%button-icon-selected {
|
||||
outline: none;
|
||||
border-color: var(--button-icon-border-color-selected);
|
||||
background-color: var(--button-icon-background-color-selected);
|
||||
@ -241,7 +241,7 @@
|
||||
color: var(--button-warning-foreground-color-rest);
|
||||
}
|
||||
|
||||
.button-disabled {
|
||||
%button-disabled {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
background-color: var(--button-background-color-disabled);
|
||||
@ -250,7 +250,7 @@
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
.button-tag {
|
||||
%button-tag {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focus;
|
||||
@ -265,7 +265,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
%button-icon {
|
||||
@include flexCenter;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
@ -274,8 +274,8 @@
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.button-icon-small {
|
||||
@extend .button-icon;
|
||||
%button-icon-small {
|
||||
@extend %button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke-width: 1.33px;
|
||||
@ -296,7 +296,7 @@
|
||||
}
|
||||
|
||||
// INPUTS
|
||||
.input-base {
|
||||
%input-base {
|
||||
@include removeInputStyle;
|
||||
@include textEllipsis;
|
||||
height: $s-28;
|
||||
@ -317,7 +317,7 @@
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
}
|
||||
}
|
||||
|
||||
@ -330,7 +330,7 @@
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
.input-element {
|
||||
%input-element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
@ -348,13 +348,13 @@
|
||||
label {
|
||||
@extend .input-label;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
stroke: var(--input-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .input-base;
|
||||
@extend %input-base;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@ -405,13 +405,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-element-label {
|
||||
%input-element-label {
|
||||
@include bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
input {
|
||||
@extend .input-base;
|
||||
@extend %input-base;
|
||||
padding-left: $s-8;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@ -445,7 +445,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
%disabled-input {
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border: $s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
@ -459,7 +459,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
%checkbox-icon {
|
||||
@include flexCenter;
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
@ -485,7 +485,7 @@
|
||||
border-color: var(--input-checkbox-border-color-active);
|
||||
background-color: var(--input-checkbox-background-color-active);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
stroke: var(--input-checkbox-foreground-color-active);
|
||||
}
|
||||
}
|
||||
@ -494,7 +494,7 @@
|
||||
background-color: var(--input-checkbox-background-color-intermediate);
|
||||
border-color: var(--input-checkbox-border-color-intermediate);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
stroke: var(--input-checkbox-foreground-color-intermediate);
|
||||
}
|
||||
}
|
||||
@ -508,7 +508,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
%input-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
label {
|
||||
@ -519,7 +519,7 @@
|
||||
cursor: pointer;
|
||||
color: var(--input-checkbox-text-foreground-color);
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
input {
|
||||
margin: 0;
|
||||
@ -539,7 +539,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-label {
|
||||
%input-with-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
label {
|
||||
@ -552,7 +552,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .input-base;
|
||||
@extend %input-base;
|
||||
@include bodySmallTypography;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
@ -571,7 +571,7 @@
|
||||
}
|
||||
}
|
||||
&:global(.disabled) {
|
||||
@extend .disabled-input;
|
||||
@extend %disabled-input;
|
||||
}
|
||||
|
||||
&:global(.invalid) {
|
||||
@ -582,7 +582,7 @@
|
||||
}
|
||||
|
||||
//MODALS
|
||||
.modal-background {
|
||||
%modal-background {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -594,7 +594,7 @@
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
.modal-overlay-base {
|
||||
%modal-overlay-base {
|
||||
@include flexCenter;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -605,7 +605,7 @@
|
||||
background-color: var(--overlay-color);
|
||||
}
|
||||
|
||||
.modal-container-base {
|
||||
%modal-container-base {
|
||||
position: relative;
|
||||
padding: $s-32;
|
||||
border-radius: $br-8;
|
||||
@ -617,15 +617,15 @@
|
||||
max-height: $s-512;
|
||||
}
|
||||
|
||||
.modal-close-btn-base {
|
||||
@extend .button-tertiary;
|
||||
%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;
|
||||
@extend %button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
@ -636,14 +636,14 @@
|
||||
border-bottom: $s-1 solid var(--modal-hint-border-color);
|
||||
}
|
||||
|
||||
.modal-action-btns {
|
||||
%modal-action-btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.modal-cancel-btn {
|
||||
@extend .button-secondary;
|
||||
%modal-cancel-btn {
|
||||
@extend %button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
@ -651,8 +651,8 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-accept-btn {
|
||||
@extend .button-primary;
|
||||
%modal-accept-btn {
|
||||
@extend %button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
@ -660,8 +660,8 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-danger-btn {
|
||||
@extend .button-primary;
|
||||
%modal-danger-btn {
|
||||
@extend %button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
@ -676,7 +676,7 @@
|
||||
|
||||
// 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 {
|
||||
%asset-element {
|
||||
@include bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -691,13 +691,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-base {
|
||||
%shortcut-base {
|
||||
@include flexCenter;
|
||||
gap: $s-2;
|
||||
color: var(--menu-shortcut-foreground-color);
|
||||
}
|
||||
|
||||
.shortcut-key-base {
|
||||
%shortcut-key-base {
|
||||
@include bodySmallTypography;
|
||||
@include flexCenter;
|
||||
height: $s-20;
|
||||
@ -706,7 +706,7 @@
|
||||
background-color: var(--menu-shortcut-background-color);
|
||||
}
|
||||
|
||||
.mixed-bar {
|
||||
%mixed-bar {
|
||||
@include bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -718,7 +718,7 @@
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
.link {
|
||||
%link {
|
||||
background: unset;
|
||||
border: none;
|
||||
color: var(--link-foreground-color);
|
||||
@ -726,7 +726,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.colorpicker-handler {
|
||||
%colorpicker-handler {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -742,16 +742,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.attr-title {
|
||||
%attr-title {
|
||||
div {
|
||||
margin-left: 0;
|
||||
color: var(--entry-foreground-color-hover);
|
||||
}
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
@extend %button-tertiary;
|
||||
display: none;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -762,7 +762,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.attr-row {
|
||||
%attr-row {
|
||||
display: grid;
|
||||
grid-template-areas: "name content";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
@ -785,7 +785,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button-children {
|
||||
%copy-button-children {
|
||||
@include bodySmallTypography;
|
||||
color: var(--color-foreground-primary);
|
||||
text-align: left;
|
||||
@ -800,7 +800,7 @@
|
||||
}
|
||||
|
||||
// SELECTS AND DROPDOWNS
|
||||
.menu-dropdown {
|
||||
%menu-dropdown {
|
||||
@include menuShadow;
|
||||
@include flexColumn;
|
||||
position: absolute;
|
||||
@ -813,7 +813,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-item-base {
|
||||
%menu-item-base {
|
||||
@include bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -828,7 +828,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-element-base {
|
||||
%dropdown-element-base {
|
||||
@include bodySmallTypography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -843,7 +843,7 @@
|
||||
@include flexCenter;
|
||||
@include textEllipsis;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -856,7 +856,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
%dropdown-wrapper {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
top: $s-32;
|
||||
@ -875,7 +875,7 @@
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
%select-wrapper {
|
||||
@include bodySmallTypography;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -138,14 +138,14 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@extend .button-primary;
|
||||
@extend %button-primary;
|
||||
text-transform: uppercase;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@extend .button-secondary;
|
||||
@extend %button-secondary;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: $fs-12;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@ -24,31 +24,33 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,6 +58,7 @@
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (width <= 992px) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -53,7 +53,7 @@
|
||||
height: auto;
|
||||
justify-self: center;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (width <= 992px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
padding-block-end: 0;
|
||||
display: grid;
|
||||
gap: deprecated.$s-12;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -33,16 +34,19 @@
|
||||
|
||||
.auth-title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.auth-tagline {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
@ -60,8 +64,9 @@
|
||||
|
||||
.login-button,
|
||||
.login-ldap-button {
|
||||
@extend .button-primary;
|
||||
@extend %button-primary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
@ -75,8 +80,9 @@
|
||||
}
|
||||
|
||||
.go-back-link {
|
||||
@extend .button-secondary;
|
||||
@extend %button-secondary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
}
|
||||
|
||||
@ -100,6 +106,7 @@
|
||||
.recovery-text,
|
||||
.demo-account-text {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
text-align: right;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
@ -110,6 +117,7 @@
|
||||
.forgot-pass-link,
|
||||
.demo-account-link {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@ -129,14 +137,16 @@
|
||||
.submit-btn,
|
||||
.register-btn,
|
||||
.recover-btn {
|
||||
@extend .button-primary;
|
||||
@extend %button-primary;
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
height: deprecated.$s-40;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: deprecated.$s-6;
|
||||
@ -144,6 +154,7 @@
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--button-secondary-background-color-rest);
|
||||
color: var(--button-foreground-color-focus);
|
||||
|
||||
span {
|
||||
padding-block-start: deprecated.$s-2;
|
||||
}
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "./common.scss";
|
||||
@use "./common";
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
@use "./common";
|
||||
|
||||
.submit-btn {
|
||||
margin-top: deprecated.$s-16;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
@use "./common";
|
||||
|
||||
.fields-row {
|
||||
margin-bottom: deprecated.$s-8;
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
.notification-text-email {
|
||||
@include deprecated.medTitleTipography;
|
||||
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
margin-inline: deprecated.$s-36;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "./common.scss";
|
||||
@use "./common";
|
||||
|
||||
.accept-terms-and-privacy-wrapper {
|
||||
:global(a) {
|
||||
@ -25,6 +25,7 @@
|
||||
|
||||
.register-success {
|
||||
gap: deprecated.$s-24;
|
||||
|
||||
.auth-title {
|
||||
@include deprecated.medTitleTipography;
|
||||
}
|
||||
@ -35,6 +36,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: deprecated.$s-32;
|
||||
|
||||
svg {
|
||||
width: deprecated.$s-92;
|
||||
height: deprecated.$s-92;
|
||||
@ -43,11 +45,13 @@
|
||||
|
||||
.notification-text {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.notification-text-email {
|
||||
@include deprecated.medTitleTipography;
|
||||
|
||||
font-size: deprecated.$fs-20;
|
||||
color: var(--register-confirmation-color);
|
||||
margin-inline: deprecated.$s-36;
|
||||
@ -55,6 +59,7 @@
|
||||
|
||||
.logo-btn {
|
||||
height: deprecated.$s-40;
|
||||
|
||||
svg {
|
||||
width: deprecated.$s-120;
|
||||
height: deprecated.$s-40;
|
||||
@ -71,6 +76,7 @@
|
||||
|
||||
.terms-register {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
gap: deprecated.$s-4;
|
||||
justify-content: center;
|
||||
@ -84,6 +90,7 @@
|
||||
|
||||
.auth-link {
|
||||
color: var(--link-foreground-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
|
||||
.error-text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--color-foreground-error);
|
||||
}
|
||||
|
||||
@ -44,6 +45,7 @@
|
||||
|
||||
.author {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: deprecated.$s-8;
|
||||
@ -55,11 +57,13 @@
|
||||
|
||||
.author-fullname {
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
color: var(--comment-title-color);
|
||||
}
|
||||
|
||||
.author-timeago {
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
color: var(--comment-subtitle-color);
|
||||
}
|
||||
|
||||
@ -112,11 +116,12 @@
|
||||
}
|
||||
|
||||
.avatar-darken {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.cover {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -127,8 +132,8 @@
|
||||
|
||||
.item {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
white-space: pre-wrap;
|
||||
@ -136,6 +141,7 @@
|
||||
|
||||
.replies {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
@ -143,6 +149,7 @@
|
||||
.replies-total {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.replies-unread {
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
@ -168,15 +175,18 @@
|
||||
|
||||
--translate-x: 0%;
|
||||
--translate-y: 0%;
|
||||
|
||||
transform: translate(var(--translate-x), var(--translate-y));
|
||||
|
||||
&.left {
|
||||
--translate-x: -100%;
|
||||
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&.top {
|
||||
--translate-y: -100%;
|
||||
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
@ -214,10 +224,13 @@
|
||||
|
||||
--translate-x: 0%;
|
||||
--translate-y: 0%;
|
||||
|
||||
transform: translate(var(--translate-x), var(--translate-y));
|
||||
|
||||
&.left {
|
||||
--translate-x: -100%;
|
||||
}
|
||||
|
||||
&.top {
|
||||
--translate-y: -100%;
|
||||
}
|
||||
@ -233,6 +246,7 @@
|
||||
|
||||
.floating-thread-header-left {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -257,22 +271,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: deprecated.$s-8;
|
||||
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-24;
|
||||
margin-right: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@extend .dropdown-wrapper;
|
||||
@extend %dropdown-wrapper;
|
||||
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
max-width: deprecated.$s-200;
|
||||
@ -282,7 +299,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu-option {
|
||||
@extend .dropdown-element-base;
|
||||
@extend %dropdown-element-base;
|
||||
}
|
||||
|
||||
.form {
|
||||
@ -365,7 +382,7 @@
|
||||
|
||||
.comment-input {
|
||||
@include deprecated.bodySmallTypography;
|
||||
white-space: pre-line;
|
||||
|
||||
background: var(--input-background-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
|
||||
@ -12,13 +12,12 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
justify-content: center;
|
||||
min-width: 25px;
|
||||
padding: 0 1rem;
|
||||
transition: all 0.4s;
|
||||
text-decoration: none !important;
|
||||
|
||||
height: 40px;
|
||||
|
||||
svg {
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
|
||||
.code-display {
|
||||
@include t.use-typography("code-font");
|
||||
|
||||
user-select: text;
|
||||
border-radius: $br-8;
|
||||
margin-top: var(--sp-s);
|
||||
|
||||
@ -16,9 +16,11 @@
|
||||
min-height: var(--bullet-size, deprecated.$s-24);
|
||||
border: deprecated.$s-2 solid var(--color-bullet-border-color);
|
||||
border-radius: deprecated.$br-circle;
|
||||
|
||||
&.grid-area {
|
||||
grid-area: color;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
width: var(--bullet-size, deprecated.$s-16);
|
||||
height: var(--bullet-size, deprecated.$s-16);
|
||||
@ -31,24 +33,29 @@
|
||||
&.is-not-library-color {
|
||||
overflow: hidden;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
border-radius: deprecated.$br-4;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-gradient {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
|
||||
.color-bullet-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -59,11 +66,13 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.color-bullet-wrapper > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
|
||||
&:hover:not(.read-only) {
|
||||
border: deprecated.$s-2 solid var(--color-bullet-border-color-selected);
|
||||
}
|
||||
@ -72,13 +81,16 @@
|
||||
.color-text {
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
width: deprecated.$s-80;
|
||||
text-align: center;
|
||||
margin-top: deprecated.$s-2;
|
||||
max-height: deprecated.$s-28;
|
||||
color: var(--palette-text-color);
|
||||
|
||||
&.small-text {
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
max-height: deprecated.$s-16;
|
||||
}
|
||||
}
|
||||
@ -86,6 +98,7 @@
|
||||
.big-text {
|
||||
@include deprecated.inspectValue;
|
||||
@include deprecated.twoLineTextEllipsis;
|
||||
|
||||
line-height: 1;
|
||||
color: var(--palette-text-color);
|
||||
text-align: center;
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
|
||||
.context-menu-items {
|
||||
@include deprecated.menuShadow;
|
||||
|
||||
position: absolute;
|
||||
top: deprecated.$s-12;
|
||||
left: calc(-1 * deprecated.$s-6);
|
||||
@ -50,6 +51,7 @@
|
||||
|
||||
.context-menu-action {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@ -69,7 +71,8 @@
|
||||
margin-left: 0.5rem;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--menu-foreground-color);
|
||||
}
|
||||
}
|
||||
@ -84,7 +87,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
.submenu-icon-back svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--menu-foreground-color);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@ -140,12 +144,14 @@
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
@extend .button-tag;
|
||||
@extend %button-tag;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
height: 100%;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--menu-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
@ -154,7 +160,7 @@
|
||||
|
||||
.is-selected .context-menu-action {
|
||||
padding-left: deprecated.$s-28;
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-image: url("/images/icons/tick.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: deprecated.$s-12;
|
||||
|
||||
@ -8,19 +8,24 @@
|
||||
|
||||
.copy-button {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
width: 100%;
|
||||
height: deprecated.$s-32;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon-btn {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-28;
|
||||
width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -29,18 +34,21 @@
|
||||
background-color: var(--color-background-tertiary);
|
||||
color: var(--color-foreground-primary);
|
||||
border: deprecated.$s-1 solid var(--color-background-tertiary);
|
||||
|
||||
.icon-btn {
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: deprecated.$s-1 solid var(--button-tertiary-border-color-focus);
|
||||
background-color: transparent;
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
|
||||
.icon-btn svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
@ -50,27 +58,34 @@
|
||||
.copy-wrapper {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.copyWrapperBase;
|
||||
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
text-align: left;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
|
||||
.icon-btn {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-28;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--button-tertiary-foreground-color-focus);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-tertiary-background-color-focus);
|
||||
color: var(--button-tertiary-foreground-color-focus);
|
||||
border: deprecated.$s-1 solid var(--button-tertiary-background-color-focus);
|
||||
|
||||
.icon-btn svg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
.editable-label-input {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -23,6 +24,7 @@
|
||||
|
||||
.editable-label-text {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -4,18 +4,17 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// FIXME: we need this import for .asset-element
|
||||
// FIXME: we need this import for %asset-element
|
||||
@use "refactor/basic-rules.scss" as deprecated;
|
||||
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/spacing.scss" as *;
|
||||
|
||||
.editable-select {
|
||||
@extend .asset-element;
|
||||
@extend %asset-element;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: $b-1 solid var(--input-border-color);
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -24,27 +23,34 @@
|
||||
padding: var(--sp-s);
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
.dropdown-button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
@extend %dropdown-wrapper;
|
||||
|
||||
width: fit-content;
|
||||
max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: $sz-12;
|
||||
}
|
||||
|
||||
.dropdown-element {
|
||||
@extend .dropdown-element-base;
|
||||
@extend %dropdown-element-base;
|
||||
|
||||
color: var(--menu-foreground-color-rest);
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
@ -53,8 +59,10 @@
|
||||
.check-icon {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
visibility: hidden;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
@ -62,14 +70,17 @@
|
||||
|
||||
&.is-selected {
|
||||
color: var(--menu-foreground-color);
|
||||
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
color: var(--menu-foreground-color-hover);
|
||||
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
|
||||
@ -9,30 +9,38 @@
|
||||
// INPUT
|
||||
.input-wrapper {
|
||||
--input-icon-padding: var(--sp-l);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&.valid {
|
||||
input {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-success);
|
||||
@extend .disabled-input;
|
||||
|
||||
@extend %disabled-input;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
input {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
@extend .disabled-input;
|
||||
|
||||
@extend %disabled-input;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.valid .help-icon,
|
||||
&.invalid .help-icon {
|
||||
right: deprecated.$s-40;
|
||||
@ -41,6 +49,7 @@
|
||||
|
||||
.input-with-label-form {
|
||||
@include deprecated.flexColumn;
|
||||
|
||||
gap: deprecated.$s-8;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
@ -50,8 +59,10 @@
|
||||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
|
||||
input {
|
||||
@extend .input-element;
|
||||
@extend %input-element;
|
||||
|
||||
color: var(--input-foreground-color-active);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
@ -72,9 +83,9 @@
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
}
|
||||
@ -92,8 +103,10 @@
|
||||
position: absolute;
|
||||
right: deprecated.$s-16;
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--color-foreground-secondary);
|
||||
width: deprecated.$s-16;
|
||||
height: deprecated.$s-16;
|
||||
@ -111,6 +124,7 @@
|
||||
position: absolute;
|
||||
right: var(--input-icon-padding);
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
|
||||
svg {
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
@ -129,6 +143,7 @@
|
||||
position: absolute;
|
||||
right: deprecated.$s-16;
|
||||
top: calc(50% - deprecated.$s-8);
|
||||
|
||||
svg {
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
@ -145,32 +160,39 @@
|
||||
|
||||
.hint {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
width: 99%;
|
||||
margin-block-start: deprecated.$s-8;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
|
||||
.checkbox-label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
gap: deprecated.$s-6;
|
||||
min-height: deprecated.$s-32;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
border-color: var(--input-checkbox-border-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
// Need for terms and conditions links on register checkbox
|
||||
color: var(--link-foreground-color);
|
||||
@ -180,19 +202,24 @@
|
||||
|
||||
// SELECT
|
||||
.custom-select {
|
||||
@extend .select-wrapper;
|
||||
@extend %select-wrapper;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
|
||||
.input-container {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--input-border-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
|
||||
.main-content {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
@ -202,21 +229,26 @@
|
||||
.label {
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-24;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -227,6 +259,7 @@
|
||||
border: deprecated.$s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
}
|
||||
|
||||
&.focus {
|
||||
outline: none;
|
||||
color: var(--input-foreground-color-active);
|
||||
@ -236,8 +269,9 @@
|
||||
}
|
||||
|
||||
select {
|
||||
@extend .menu-dropdown;
|
||||
@extend %menu-dropdown;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -252,8 +286,10 @@
|
||||
z-index: deprecated.$z-index-10;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
option {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
appearance: none;
|
||||
@ -264,9 +300,11 @@
|
||||
|
||||
// SUBMIT-BUTTON
|
||||
.button-submit {
|
||||
@extend .button-primary;
|
||||
@extend %button-primary;
|
||||
|
||||
&:disabled {
|
||||
@extend .button-disabled;
|
||||
@extend %button-disabled;
|
||||
|
||||
min-height: deprecated.$s-32;
|
||||
}
|
||||
}
|
||||
@ -280,35 +318,41 @@
|
||||
max-height: deprecated.$s-180;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
.inside-input {
|
||||
@include deprecated.removeInputStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
width: 100%;
|
||||
max-width: calc(100% - deprecated.$s-1);
|
||||
min-height: deprecated.$s-32;
|
||||
padding-top: 0;
|
||||
height: deprecated.$s-32;
|
||||
padding: deprecated.$s-8;
|
||||
margin: 0;
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selected-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -320,6 +364,7 @@
|
||||
.selected-item {
|
||||
.around {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: fit-content;
|
||||
padding-left: deprecated.$s-6;
|
||||
@ -327,8 +372,10 @@
|
||||
background-color: var(--pill-background-color);
|
||||
border: deprecated.$s-1 solid var(--pill-background-color);
|
||||
box-sizing: border-box;
|
||||
|
||||
.text {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
padding-right: deprecated.$s-8;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
@ -336,18 +383,24 @@
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-24;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
background-color: var(--status-widget-background-color-error);
|
||||
|
||||
.text {
|
||||
color: var(--alert-text-foreground-color-error);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
stroke: var(--alert-text-foreground-color-error);
|
||||
}
|
||||
@ -367,6 +420,7 @@
|
||||
.radio-label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
@include deprecated.flexRow;
|
||||
|
||||
align-items: flex-start;
|
||||
gap: deprecated.$s-8;
|
||||
min-height: deprecated.$s-32;
|
||||
@ -375,6 +429,7 @@
|
||||
padding: deprecated.$s-8;
|
||||
color: var(--input-foreground-color-rest);
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
@ -395,28 +450,33 @@
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
|
||||
border-radius: deprecated.$br-circle;
|
||||
}
|
||||
|
||||
.radio-label-image {
|
||||
@include deprecated.smallTitleTipography;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 0px;
|
||||
grid-template-rows: auto auto 0;
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
border-radius: deprecated.$br-8;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
cursor: pointer;
|
||||
|
||||
&:global(.checked) {
|
||||
border: 1px solid var(--color-accent-primary);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
border: deprecated.$s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
|
||||
.image-text {
|
||||
color: var(--input-foreground-color-rest);
|
||||
display: grid;
|
||||
@ -436,7 +496,9 @@
|
||||
|
||||
.icon-inside {
|
||||
margin: deprecated.$s-16;
|
||||
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
@ -445,10 +507,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
//TEXTAREA
|
||||
// TEXTAREA
|
||||
|
||||
.textarea-label {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: deprecated.$s-8;
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
// PROGRESS WIDGET
|
||||
.progress-widget {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
}
|
||||
@ -19,6 +20,7 @@
|
||||
--export-modal-fg-color: var(--alert-text-foreground-color-default);
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-default);
|
||||
--export-modal-border-color: var(--alert-border-color-default);
|
||||
|
||||
position: absolute;
|
||||
right: deprecated.$s-16;
|
||||
top: deprecated.$s-48;
|
||||
@ -41,13 +43,15 @@
|
||||
--export-modal-fg-color: var(--alert-text-foreground-color-error);
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-error);
|
||||
--export-modal-border-color: var(--alert-border-color-error);
|
||||
|
||||
grid-template-areas: "icon text close";
|
||||
gap: deprecated.$s-8;
|
||||
padding-block: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
margin-inline-start: deprecated.$s-8;
|
||||
@ -56,6 +60,7 @@
|
||||
|
||||
.title {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: deprecated.$s-8;
|
||||
@ -68,6 +73,7 @@
|
||||
|
||||
.progress {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
@ -77,6 +83,7 @@
|
||||
.retry-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: inline;
|
||||
text-align: left;
|
||||
color: var(--modal-link-foreground-color);
|
||||
@ -86,12 +93,14 @@
|
||||
|
||||
.progress-close-button {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
padding: 0;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--export-modal-icon-color);
|
||||
}
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
.radio-btn-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
border-radius: deprecated.$br-8;
|
||||
height: deprecated.$s-32;
|
||||
background-color: var(--input-background-color);
|
||||
@ -20,6 +21,7 @@
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.focusRadio;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
flex-grow: 1;
|
||||
border-radius: deprecated.$s-8;
|
||||
@ -29,14 +31,19 @@
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--radio-btn-foreground-color);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--radio-btn-foreground-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--radio-btn-foreground-color-selected);
|
||||
@ -48,9 +55,11 @@
|
||||
--radio-icon-border-color: var(--radio-btn-border-color-selected);
|
||||
|
||||
background-color: var(--radio-btn-background-color-selected);
|
||||
|
||||
svg {
|
||||
stroke: var(--radio-btn-foreground-color-selected);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
color: var(--radio-btn-foreground-color-selected);
|
||||
}
|
||||
@ -60,18 +69,23 @@
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
color: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
||||
.title-name {
|
||||
color: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
block-size: var(--sp-l);
|
||||
pointer-events: none;
|
||||
visibility: var(--reorder-icon-visibility, hidden);
|
||||
|
||||
--icon-stroke-color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
.search-input-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
border: deprecated.$s-1 solid var(--search-bar-input-border-color);
|
||||
@ -32,6 +33,7 @@
|
||||
&:hover {
|
||||
border: deprecated.$s-1 solid var(--input-border-color-hover);
|
||||
background-color: var(--input-background-color-hover);
|
||||
|
||||
.search-input {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
@ -41,6 +43,7 @@
|
||||
background-color: var(--input-background-color-active);
|
||||
color: var(--input-foreground-color-active);
|
||||
border: deprecated.$s-1 solid var(--input-border-color-focus);
|
||||
|
||||
.search-input {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
@ -56,13 +59,15 @@
|
||||
font-size: deprecated.$fs-12;
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
@extend .button-tag;
|
||||
@extend %button-tag;
|
||||
|
||||
flex: 0 0 deprecated.$s-32;
|
||||
height: 100%;
|
||||
color: var(--color-icon-default);
|
||||
|
||||
@ -11,8 +11,10 @@
|
||||
--bg-color: var(--menu-background-color);
|
||||
--icon-color: var(--icon-foreground);
|
||||
--text-color: var(--menu-foreground-color);
|
||||
@extend .new-scrollbar;
|
||||
|
||||
@extend %new-scrollbar;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -48,15 +50,19 @@
|
||||
--border-color: var(--menu-border-color-disabled);
|
||||
--icon-color: var(--menu-foreground-color-disabled);
|
||||
--text-color: var(--menu-foreground-color-disabled);
|
||||
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
margin-inline-end: var(--sp-xxs);
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-color);
|
||||
}
|
||||
@ -64,16 +70,20 @@
|
||||
|
||||
.current-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
@extend .dropdown-wrapper;
|
||||
@extend %dropdown-wrapper;
|
||||
|
||||
.separator {
|
||||
margin: 0;
|
||||
height: deprecated.$s-12;
|
||||
@ -87,14 +97,18 @@
|
||||
}
|
||||
|
||||
.checked-element {
|
||||
@extend .dropdown-element-base;
|
||||
@extend %dropdown-element-base;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding-right: deprecated.$s-4;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
@ -106,8 +120,10 @@
|
||||
|
||||
.check-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
visibility: hidden;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
@ -115,11 +131,13 @@
|
||||
|
||||
&.is-selected {
|
||||
color: var(--menu-foreground-color);
|
||||
|
||||
.check-icon svg {
|
||||
stroke: var(--menu-foreground-color);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
|
||||
.tab-container-tab-title {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 deprecated.$s-8;
|
||||
@ -43,12 +44,14 @@
|
||||
min-width: 0;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--tab-foreground-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
@include deprecated.headlineSmallTypography;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -78,6 +81,7 @@
|
||||
.collapse-sidebar {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
min-width: deprecated.$s-24;
|
||||
@ -86,6 +90,7 @@
|
||||
|
||||
svg {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
@ -109,13 +114,12 @@
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
//Firefox doesn't respect scrollbar-gutter
|
||||
// Firefox doesn't respect scrollbar-gutter
|
||||
@supports (-moz-appearance: none) {
|
||||
.tab-container-content {
|
||||
padding-right: deprecated.$s-8;
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
min-height: deprecated.$s-32;
|
||||
|
||||
--arrow-icon-color: var(--icon-foreground);
|
||||
--title-color: var(--title-foreground-color);
|
||||
}
|
||||
@ -32,12 +33,15 @@
|
||||
|
||||
.title {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
.title-only {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
--title-bar-title-margin: #{deprecated.$s-8};
|
||||
|
||||
color: var(--title-color);
|
||||
margin-inline-start: var(--title-bar-title-margin);
|
||||
}
|
||||
@ -64,6 +68,7 @@
|
||||
|
||||
.icon-text-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@ -7,14 +7,16 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xxl);
|
||||
@ -22,6 +24,7 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
@ -41,21 +44,24 @@
|
||||
|
||||
.modal-component-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.modal-component-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.modal-scd-msg,
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.dashboard {
|
||||
@extend .new-scrollbar;
|
||||
@extend %new-scrollbar;
|
||||
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-columns: deprecated.$s-40 deprecated.$s-256 1fr;
|
||||
|
||||
@ -7,11 +7,11 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@ -20,35 +20,38 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@extend .input-with-label;
|
||||
@extend %input-with-label;
|
||||
@include deprecated.bodySmallTypography;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
.dashboard-comments-section {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
position: relative;
|
||||
border-radius: deprecated.$br-8;
|
||||
}
|
||||
@ -35,7 +36,8 @@
|
||||
}
|
||||
|
||||
.comments-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
@ -44,6 +46,7 @@
|
||||
|
||||
.comment-button {
|
||||
position: relative;
|
||||
|
||||
.unread {
|
||||
position: absolute;
|
||||
width: deprecated.$s-8;
|
||||
@ -57,12 +60,14 @@
|
||||
}
|
||||
|
||||
.comments-icon-small {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--comment-icon-small-foreground-color);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@include deprecated.menuShadow;
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid transparent;
|
||||
@ -101,6 +106,7 @@
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.mark-all-as-read-button {
|
||||
border-radius: deprecated.$s-8;
|
||||
border: deprecated.$s-1 solid;
|
||||
|
||||
@ -29,9 +29,10 @@
|
||||
|
||||
.deleted-info {
|
||||
display: block;
|
||||
height: fit-content;
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
line-height: 0.8;
|
||||
height: var(--sp-xl);
|
||||
}
|
||||
@ -63,7 +64,6 @@
|
||||
.nav-option {
|
||||
color: var(--color-foreground-secondary);
|
||||
padding: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -100,6 +100,7 @@
|
||||
|
||||
.project-name {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
width: fit-content;
|
||||
margin-inline-end: var(--sp-m);
|
||||
line-height: 0.8;
|
||||
@ -115,7 +116,8 @@
|
||||
|
||||
.add-file-btn,
|
||||
.options-btn {
|
||||
@extend .button-tertiary;
|
||||
@extend %button-tertiary;
|
||||
|
||||
height: var(--sp-xxxl);
|
||||
width: var(--sp-xxxl);
|
||||
margin: 0 var(--sp-s);
|
||||
@ -130,6 +132,7 @@
|
||||
|
||||
.add-icon,
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.dashboard-shared {
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
@ -32,7 +33,8 @@
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@ -37,6 +36,7 @@
|
||||
|
||||
h3 {
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin: var(--sp-xs);
|
||||
}
|
||||
@ -48,6 +48,7 @@
|
||||
|
||||
.installed-fonts-header {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
align-items: center;
|
||||
color: var(--color-foreground-secondary);
|
||||
display: flex;
|
||||
@ -55,7 +56,8 @@
|
||||
padding-left: var(--sp-xxl);
|
||||
|
||||
> .family {
|
||||
@include twoLineTextEllipsis;
|
||||
@include two-line-text-ellipsis;
|
||||
|
||||
min-width: $sz-200;
|
||||
width: $sz-200;
|
||||
}
|
||||
@ -72,8 +74,8 @@
|
||||
|
||||
input {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-color: transparent;
|
||||
border-radius: $br-8;
|
||||
border: $b-1 solid transparent;
|
||||
color: var(--color-foreground-primary);
|
||||
@ -85,6 +87,7 @@
|
||||
&:focus {
|
||||
outline: $b-1 solid var(--color-accent-primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -93,6 +96,7 @@
|
||||
|
||||
.font-item {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
align-items: center;
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-4;
|
||||
@ -106,11 +110,11 @@
|
||||
|
||||
input {
|
||||
@include t.use-typography("body-medium");
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
|
||||
border: $b-1 solid transparent;
|
||||
margin: 0;
|
||||
padding: var(--sp-s);
|
||||
|
||||
background-color: var(--color-background-tertiary);
|
||||
border-radius: $br-8;
|
||||
color: var(--color-foreground-primary);
|
||||
@ -123,21 +127,25 @@
|
||||
}
|
||||
|
||||
> .family {
|
||||
@include twoLineTextEllipsis;
|
||||
@include two-line-text-ellipsis;
|
||||
|
||||
min-width: $sz-200;
|
||||
width: $sz-200;
|
||||
|
||||
&.is-edition {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .filenames {
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
|
||||
min-width: $sz-200;
|
||||
}
|
||||
|
||||
> .variants {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
@ -151,12 +159,14 @@
|
||||
padding: var(--sp-s) var(--sp-m);
|
||||
cursor: pointer;
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $sz-16;
|
||||
width: $sz-16;
|
||||
|
||||
svg {
|
||||
fill: none;
|
||||
width: $sz-12;
|
||||
@ -171,6 +181,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inhert-variant {
|
||||
cursor: default;
|
||||
}
|
||||
@ -178,6 +189,7 @@
|
||||
|
||||
.table-field {
|
||||
color: var(--color-foreground-primary);
|
||||
|
||||
.variant {
|
||||
background-color: var(--color-background-quaternary);
|
||||
border-radius: $br-8;
|
||||
@ -186,7 +198,8 @@
|
||||
|
||||
.filenames {
|
||||
@include t.use-typography("body-small");
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
|
||||
min-width: $sz-400;
|
||||
padding-left: var(--sp-xxxl);
|
||||
}
|
||||
@ -203,6 +216,7 @@
|
||||
margin-left: var(--sp-m);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: $sz-16;
|
||||
height: $sz-16;
|
||||
@ -212,6 +226,7 @@
|
||||
|
||||
&.failure {
|
||||
margin-right: var(--sp-m);
|
||||
|
||||
svg {
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
@ -220,6 +235,7 @@
|
||||
&.close {
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
stroke: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -245,6 +261,7 @@
|
||||
|
||||
.dashboard-fonts-hero {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
padding: var(--sp-xxxl) 0;
|
||||
margin-top: px2rem(80);
|
||||
display: flex;
|
||||
@ -269,6 +286,7 @@
|
||||
|
||||
p {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
@ -299,6 +317,7 @@
|
||||
|
||||
.label {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,15 +8,13 @@
|
||||
|
||||
// TODO: Legacy sass variables. We should remove them in favor of DS tokens.
|
||||
$bp-max-1366: "(max-width: 1366px)";
|
||||
|
||||
$thumbnail-default-width: deprecated.$s-252; // Default width
|
||||
$thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
|
||||
.dashboard-grid {
|
||||
font-size: deprecated.$fs-14;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
padding: 0 deprecated.$s-16;
|
||||
}
|
||||
|
||||
@ -42,6 +40,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
width: 100%;
|
||||
font-weight: deprecated.$fw400;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@ -108,7 +107,6 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
line-height: 1.92;
|
||||
max-width: deprecated.$s-260;
|
||||
overflow: hidden;
|
||||
padding-right: deprecated.$s-8;
|
||||
padding: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -126,9 +124,11 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
max-width: deprecated.$s-260;
|
||||
|
||||
&::first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@media #{$bp-max-1366} {
|
||||
max-width: deprecated.$s-232;
|
||||
}
|
||||
@ -198,9 +198,11 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--color-background-tertiary);
|
||||
|
||||
.project-th-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -243,6 +245,7 @@ $thumbnail-default-height: deprecated.$s-168; // Default width
|
||||
margin-right: 0;
|
||||
margin-top: deprecated.$s-20;
|
||||
width: 100%;
|
||||
|
||||
--menu-icon-color: var(--button-tertiary-foreground-color-rest);
|
||||
|
||||
&:hover,
|
||||
|
||||
72
frontend/src/app/main/ui/dashboard/import.scss
vendored
72
frontend/src/app/main/ui/dashboard/import.scss
vendored
@ -7,11 +7,12 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -22,18 +23,19 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
@ -42,16 +44,18 @@
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,60 +63,81 @@
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.file-entry {
|
||||
display: flex;
|
||||
|
||||
.file-name {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
&.icon-fill svg {
|
||||
fill: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.file-name-edit {
|
||||
@extend .input-element;
|
||||
@extend %input-element;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: deprecated.$s-12;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-entry-buttons {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
button {
|
||||
@extend .button-tertiary;
|
||||
@extend %button-tertiary;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-32;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message,
|
||||
.progress-message {
|
||||
display: flex;
|
||||
@ -126,14 +151,19 @@
|
||||
align-items: center;
|
||||
gap: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.linked-library-tag {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
&.error {
|
||||
svg {
|
||||
stroke: var(--element-foreground-error);
|
||||
@ -147,45 +177,57 @@
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
.file-name {
|
||||
color: var(--element-foreground-warning);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editable {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -34,7 +34,6 @@ input.element-title {
|
||||
.close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
||||
top: deprecated.$s-1;
|
||||
right: calc(-1 * deprecated.$s-8);
|
||||
|
||||
@ -45,6 +44,7 @@ input.element-title {
|
||||
width: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: var(--element-foreground-warning);
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
padding: deprecated.$s-12 0;
|
||||
|
||||
&.libs {
|
||||
background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
|
||||
background-image: url("/images/ph-left.svg"), url("/images/ph-right.svg");
|
||||
background-position:
|
||||
15% bottom,
|
||||
85% top;
|
||||
@ -47,7 +47,6 @@
|
||||
border-radius: deprecated.$br-8;
|
||||
color: var(--color-foreground-primary);
|
||||
cursor: pointer;
|
||||
height: deprecated.$s-160;
|
||||
margin: deprecated.$s-8;
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
width: var(--th-width, #{g.$thumbnail-default-width});
|
||||
@ -113,9 +112,11 @@
|
||||
|
||||
.empty-project-card {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
--color-card-background: var(--color-background-tertiary);
|
||||
--color-card-title: var(--color-foreground-primary);
|
||||
--color-card-subtitle: var(--color-foreground-secondary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -129,6 +130,7 @@
|
||||
--color-card-background: var(--color-accent-primary);
|
||||
--color-card-title: var(--color-background-secondary);
|
||||
--color-card-subtitle: var(--color-background-secondary);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.empty-project-card-title {
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
|
||||
.dashboard-project-row {
|
||||
--actions-opacity: 0;
|
||||
|
||||
margin-block-end: var(--sp-xxl);
|
||||
position: relative;
|
||||
|
||||
@ -84,8 +85,9 @@
|
||||
}
|
||||
|
||||
.project-name {
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--title-foreground-color-hover);
|
||||
cursor: pointer;
|
||||
block-size: $sz-16;
|
||||
@ -102,8 +104,10 @@
|
||||
.info,
|
||||
.recent-files-row-title-info {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
@media (max-width: 760px) {
|
||||
|
||||
@media (width <= 760px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -116,7 +120,8 @@
|
||||
|
||||
.add-file-btn,
|
||||
.options-btn {
|
||||
@extend .button-tertiary;
|
||||
@extend %button-tertiary;
|
||||
|
||||
block-size: $sz-32;
|
||||
inline-size: $sz-32;
|
||||
margin: 0 var(--sp-s);
|
||||
@ -125,7 +130,8 @@
|
||||
|
||||
.add-icon,
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
@ -140,7 +146,9 @@
|
||||
|
||||
.show-more {
|
||||
--show-more-color: var(--button-secondary-foreground-color-rest);
|
||||
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
@ -179,7 +187,7 @@
|
||||
border-radius: $br-4;
|
||||
inline-size: auto;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (width <= 1200px) {
|
||||
display: none;
|
||||
inline-size: 0;
|
||||
}
|
||||
@ -202,18 +210,22 @@
|
||||
.info {
|
||||
flex: 1;
|
||||
font-size: $sz-16;
|
||||
|
||||
span {
|
||||
color: var(--color-foreground-secondary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
padding: var(--sp-s) 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
--close-icon-foreground-color: var(--icon-foreground);
|
||||
|
||||
position: absolute;
|
||||
top: var(--sp-xl);
|
||||
inset-inline-end: var(--sp-xxl);
|
||||
@ -221,13 +233,15 @@
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
--close-icon-foreground-color: var(--button-icon-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--close-icon-foreground-color);
|
||||
}
|
||||
|
||||
@ -244,7 +258,8 @@
|
||||
block-size: var(--sp-xl) 0;
|
||||
overflow: hidden;
|
||||
border-radius: $br-4;
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@media (width <= 1200px) {
|
||||
display: none;
|
||||
inline-size: 0;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "common/refactor/common-dashboard";
|
||||
@use "./placeholder.scss";
|
||||
@use "./placeholder";
|
||||
|
||||
.dashboard-container {
|
||||
flex: 1 0 0;
|
||||
@ -18,6 +18,7 @@
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.dashboard-shared {
|
||||
width: calc(100vw - deprecated.$s-320);
|
||||
margin-right: deprecated.$s-52;
|
||||
@ -41,6 +42,7 @@
|
||||
.text {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
stroke: var(--color-foreground-secondary);
|
||||
width: deprecated.$s-32;
|
||||
|
||||
@ -29,15 +29,14 @@
|
||||
z-index: var(--z-index-dropdown);
|
||||
}
|
||||
|
||||
//SIDEBAR CONTENT COMPONENT
|
||||
// SIDEBAR CONTENT COMPONENT
|
||||
.sidebar-content {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto 1fr;
|
||||
gap: var(--sp-xxl);
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.sidebar-content-nitrate {
|
||||
@ -57,6 +56,7 @@
|
||||
|
||||
.sidebar-section-title {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
padding: 0 var(--sp-s) var(--sp-s) var(--sp-xxl);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -80,6 +80,7 @@
|
||||
|
||||
.current-team {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -99,6 +100,7 @@
|
||||
.team-text {
|
||||
@include deprecated.textEllipsis;
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
width: auto;
|
||||
text-align: left;
|
||||
color: var(--menu-foreground-color-hover);
|
||||
@ -124,13 +126,15 @@
|
||||
|
||||
.team-picture {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
border-radius: 50%;
|
||||
height: var(--sp-xxl);
|
||||
width: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
@ -138,6 +142,7 @@
|
||||
.switch-options {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
max-width: var(--sp-xxl);
|
||||
min-width: deprecated.$s-28;
|
||||
height: 100%;
|
||||
@ -146,26 +151,28 @@
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
// DROPDOWNS
|
||||
|
||||
.teams-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
@extend %menu-dropdown;
|
||||
|
||||
left: 0;
|
||||
top: deprecated.$s-52;
|
||||
height: fit-content;
|
||||
max-height: $sz-480;
|
||||
min-width: deprecated.$s-248;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.team-dropdown-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: var(--sp-xxl) 1fr auto;
|
||||
gap: var(--sp-s);
|
||||
@ -173,7 +180,8 @@
|
||||
}
|
||||
|
||||
.org-dropdown-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: var(--sp-xxxl) 1fr auto;
|
||||
gap: var(--sp-s);
|
||||
@ -192,6 +200,7 @@
|
||||
|
||||
.icon-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: var(--sp-xxl);
|
||||
height: var(--sp-xxl);
|
||||
margin-right: var(--sp-m);
|
||||
@ -200,7 +209,8 @@
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
width: var(--sp-xxl);
|
||||
height: var(--sp-xxl);
|
||||
stroke: var(--sidebar-action-icon-color);
|
||||
@ -212,12 +222,14 @@
|
||||
}
|
||||
|
||||
.tick-icon {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.options-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
@extend %menu-dropdown;
|
||||
|
||||
right: var(--sp-xxs);
|
||||
top: deprecated.$s-52;
|
||||
max-height: $sz-480;
|
||||
@ -228,7 +240,8 @@
|
||||
}
|
||||
|
||||
.team-options-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
|
||||
height: $sz-40;
|
||||
}
|
||||
|
||||
@ -290,6 +303,7 @@
|
||||
|
||||
.element-title {
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
width: deprecated.$s-256;
|
||||
color: var(--color-foreground-primary);
|
||||
font-size: deprecated.$fs-14;
|
||||
@ -305,7 +319,8 @@
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
margin: 0 var(--sp-m);
|
||||
}
|
||||
@ -329,6 +344,7 @@
|
||||
|
||||
.input-text {
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
height: $sz-40;
|
||||
width: 100%;
|
||||
padding: $sz-6 var(--sp-m);
|
||||
@ -353,6 +369,7 @@
|
||||
.search-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: var(--sp-xxl);
|
||||
@ -362,8 +379,10 @@
|
||||
|
||||
.search-icon,
|
||||
.clear-search-btn {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
|
||||
|
||||
stroke: var(--sidebar-search-foreground-color);
|
||||
}
|
||||
|
||||
@ -384,6 +403,7 @@
|
||||
|
||||
.profile {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--sp-s);
|
||||
@ -394,6 +414,7 @@
|
||||
.profile-fullname {
|
||||
@include t.use-typography("title-small");
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
align-self: center;
|
||||
max-width: var(--sp-l) 0;
|
||||
color: var(--profile-foreground-color);
|
||||
@ -406,16 +427,19 @@
|
||||
}
|
||||
|
||||
.profile-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
@extend %menu-dropdown;
|
||||
|
||||
inset-inline-start: var(--sp-s);
|
||||
inset-block-end: px2rem(72); // 72 is the height of the profile button
|
||||
min-width: calc(100% - var(--sp-s));
|
||||
|
||||
// TODO ADD animation fadeInUp
|
||||
}
|
||||
|
||||
.profile-dropdown-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
block-size: $sz-40;
|
||||
margin-block-end: var(--sp-xs);
|
||||
padding: var(--sp-s);
|
||||
@ -435,12 +459,14 @@
|
||||
}
|
||||
|
||||
.profile-dropdown-item .open-arrow svg {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
@extend .menu-dropdown;
|
||||
@extend %menu-dropdown;
|
||||
|
||||
inset-inline-start: calc(deprecated.$s-292 + var(--sp-s));
|
||||
min-width: deprecated.$s-192;
|
||||
}
|
||||
@ -458,8 +484,9 @@
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
block-size: $sz-40;
|
||||
margin-block-end: var(--sp-xs);
|
||||
padding-block: var(--sp-s);
|
||||
@ -479,6 +506,7 @@
|
||||
.menu-version {
|
||||
@include t.use-typography("code-font");
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-inline-start: var(--sp-s);
|
||||
text-transform: uppercase;
|
||||
@ -496,19 +524,22 @@
|
||||
}
|
||||
|
||||
.exit-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.add-org-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
width: var(--sp-l);
|
||||
height: var(--sp-l);
|
||||
stroke: var(--sidebar-action-icon-color);
|
||||
}
|
||||
|
||||
.arrow-up-right-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
width: var(--sp-m);
|
||||
height: var(--sp-m);
|
||||
stroke: var(--sidebar-action-icon-color);
|
||||
@ -516,6 +547,7 @@
|
||||
|
||||
.upgrade-plan-section {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: $b-1 solid var(--color-background-quaternary);
|
||||
@ -528,6 +560,7 @@
|
||||
|
||||
.penpot-free {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
@ -539,6 +572,7 @@
|
||||
|
||||
.power-up {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-accent-tertiary);
|
||||
}
|
||||
|
||||
@ -553,6 +587,7 @@
|
||||
|
||||
.nitrate-selected-org {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
width: 100%;
|
||||
padding-inline-start: var(--sp-s);
|
||||
@ -605,6 +640,7 @@
|
||||
|
||||
.current-org {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
|
||||
.cta-top-section {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
color: var(--color-foreground-secondary);
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -44,12 +45,14 @@
|
||||
|
||||
.icon-dropdown {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: 100%;
|
||||
width: var(--sp-l);
|
||||
}
|
||||
|
||||
.icon-dropdown svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -68,6 +71,7 @@
|
||||
.cta-bottom-section .content {
|
||||
@include t.use-typography("body-medium");
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
@ -88,11 +92,13 @@
|
||||
|
||||
.cta-title {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
margin-block-end: var(--sp-xs);
|
||||
}
|
||||
|
||||
.highlighted .cta-title {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
@ -102,17 +108,20 @@
|
||||
|
||||
.highlighted .cta-text {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.cta-bottom-section .content a {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-accent-tertiary);
|
||||
margin-inline-start: var(--sp-xs);
|
||||
}
|
||||
|
||||
.cta-link {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
align-self: end;
|
||||
margin-inline-start: var(--sp-xs);
|
||||
}
|
||||
@ -127,17 +136,20 @@
|
||||
|
||||
.team-label {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.team-text {
|
||||
@include t.use-typography("title-medium");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.manage-subscription-link {
|
||||
@include deprecated.buttonStyle;
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-accent-tertiary);
|
||||
display: flex;
|
||||
margin-block-start: -8px;
|
||||
@ -161,7 +173,8 @@
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@extend .menu-item-base;
|
||||
@extend %menu-item-base;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -197,6 +210,7 @@
|
||||
|
||||
.cta-message {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
line-height: 1;
|
||||
|
||||
@ -218,11 +232,13 @@
|
||||
|
||||
.nitrate-title {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.nitrate-info {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-block: var(--sp-s) var(--sp-xxl);
|
||||
}
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
|
||||
.block-label {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -82,6 +83,7 @@
|
||||
|
||||
.team-icon {
|
||||
--update-button-opacity: 0;
|
||||
|
||||
position: relative;
|
||||
height: $sz-120;
|
||||
width: $sz-120;
|
||||
@ -162,6 +164,7 @@
|
||||
|
||||
.table-header {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 43% 1fr px2rem(108) var(--sp-m);
|
||||
@ -245,12 +248,13 @@
|
||||
|
||||
.member-name,
|
||||
.member-email {
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
@include t.use-typography("body-large");
|
||||
}
|
||||
|
||||
.member-email {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -262,6 +266,7 @@
|
||||
// ROL INFO
|
||||
.rol-selector {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@ -303,6 +308,7 @@
|
||||
|
||||
.rol-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -311,6 +317,7 @@
|
||||
padding: px2rem(6);
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
@ -337,7 +344,8 @@
|
||||
|
||||
.input-checkbox {
|
||||
// TODO: remove this extended class.
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -363,6 +371,7 @@
|
||||
|
||||
.action-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -371,6 +380,7 @@
|
||||
padding: px2rem(6);
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
@ -399,6 +409,7 @@
|
||||
|
||||
.invitations-actions {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
@ -432,7 +443,8 @@
|
||||
|
||||
.btn-empty-invitations {
|
||||
// TODO: Remove this extend add DS component
|
||||
@extend .button-primary;
|
||||
@extend %button-primary;
|
||||
|
||||
margin-block-start: var(--sp-l);
|
||||
padding-inline: var(--sp-m);
|
||||
}
|
||||
@ -451,8 +463,9 @@
|
||||
}
|
||||
|
||||
.field-email {
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
display: flex;
|
||||
gap: var(--sp-l);
|
||||
align-items: center;
|
||||
@ -499,10 +512,10 @@
|
||||
|
||||
.webhooks-hero {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: var(--sp-xxxl);
|
||||
margin-top: var(--sp-xxxl);
|
||||
margin: 0;
|
||||
padding: var(--sp-xxxl);
|
||||
padding: 0;
|
||||
@ -511,19 +524,22 @@
|
||||
|
||||
.hero-title {
|
||||
@include t.use-typography("title-large");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
margin-bottom: 0;
|
||||
max-width: $sz-512;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
//TODO: Remove this extended class using a DS component
|
||||
@extend .button-primary;
|
||||
// TODO: Remove this extended class using a DS component
|
||||
@extend %button-primary;
|
||||
|
||||
height: $sz-32;
|
||||
max-width: $sz-512;
|
||||
}
|
||||
@ -572,6 +588,7 @@
|
||||
|
||||
.webhook-dropdown-item {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -580,6 +597,7 @@
|
||||
padding: px2rem(6);
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
@ -611,10 +629,7 @@
|
||||
|
||||
// INVITE MEMBERS MODAL
|
||||
.modal-team-container {
|
||||
position: relative;
|
||||
padding: var(--sp-xxxl);
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-primary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
min-width: $sz-364;
|
||||
min-height: $sz-192;
|
||||
@ -643,6 +658,7 @@
|
||||
|
||||
.modal-title {
|
||||
@include t.use-typography("headline-medium");
|
||||
|
||||
height: $sz-32;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -669,12 +685,14 @@
|
||||
|
||||
.invite-team-member-text {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
margin: 0 0 var(--sp-l) 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.role-title {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
margin: 0;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
@ -691,7 +709,7 @@
|
||||
|
||||
.accept-btn {
|
||||
// TODO: remove this extend class creating a modal component
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
}
|
||||
|
||||
// WEBHOOKS MODAL
|
||||
@ -727,16 +745,18 @@
|
||||
|
||||
.modal-title {
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
// TODO remove extended class creating a modal component
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xxl);
|
||||
@ -751,6 +771,7 @@
|
||||
|
||||
.select-title {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -764,28 +785,31 @@
|
||||
|
||||
// TODO: Remove this extended classes creating a modal component
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
|
||||
button {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Remove this extended class using input component
|
||||
.email-input {
|
||||
@include t.use-typography("body-small");
|
||||
@extend .input-base;
|
||||
@extend %input-base;
|
||||
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// FIXME: This does not conform to our CSS Guidelines. Need to unnest and to use
|
||||
// custom properties to handle state changes.
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
label {
|
||||
@ -801,6 +825,7 @@
|
||||
border-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
border-color: var(--color-accent-primary-muted);
|
||||
@ -809,13 +834,17 @@
|
||||
}
|
||||
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,11 +7,11 @@
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@ -20,11 +20,12 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@ -36,12 +37,15 @@
|
||||
}
|
||||
|
||||
.group-name-input {
|
||||
@extend .input-element-label;
|
||||
@extend %input-element-label;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
margin-bottom: deprecated.$s-8;
|
||||
|
||||
label {
|
||||
@include deprecated.flexColumn;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
@ -55,15 +59,17 @@
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,21 +19,23 @@
|
||||
flex-direction: column;
|
||||
height: px2rem(244);
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: px2rem(6);
|
||||
margin-inline-end: px2rem(6);
|
||||
margin-inline: px2rem(6);
|
||||
margin-block-end: px2rem(6);
|
||||
position: absolute;
|
||||
transition: bottom 300ms;
|
||||
width: calc(100% - $sz-12);
|
||||
pointer-events: none;
|
||||
|
||||
&.collapsed {
|
||||
inset-block-end: calc(-1 * px2rem(228));
|
||||
background-color: transparent;
|
||||
transition: bottom 300ms;
|
||||
|
||||
.title-btn {
|
||||
border-end-end-radius: $br-8;
|
||||
border-end-start-radius: $br-8;
|
||||
}
|
||||
|
||||
.content,
|
||||
.content-description {
|
||||
visibility: hidden;
|
||||
@ -66,26 +68,24 @@
|
||||
|
||||
.title-text {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-inline-start: var(--sp-m);
|
||||
margin-inline-end: var(--sp-s);
|
||||
margin-inline: var(--sp-m) var(--sp-s);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.title-icon-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: var(--sp-s);
|
||||
margin-inline: auto var(--sp-s);
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: var(--sp-s);
|
||||
margin-inline: auto var(--sp-s);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@ -127,6 +127,7 @@
|
||||
&:hover {
|
||||
border: $b-2 solid var(--color-background-tertiary);
|
||||
background-color: var(--color-accent-primary);
|
||||
|
||||
.arrow-icon {
|
||||
stroke: var(--color-background-tertiary);
|
||||
}
|
||||
@ -146,9 +147,9 @@
|
||||
|
||||
.content-description {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
margin-block-end: calc(-1 * var(--sp-s));
|
||||
margin-block-start: var(--sp-l);
|
||||
margin-block: var(--sp-l) calc(-1 * var(--sp-s));
|
||||
margin-inline-start: var(--sp-l);
|
||||
visibility: visible;
|
||||
}
|
||||
@ -179,6 +180,7 @@
|
||||
|
||||
.template-card {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
display: inline-block;
|
||||
width: px2rem(256);
|
||||
cursor: pointer;
|
||||
@ -186,12 +188,15 @@
|
||||
padding: 0 var(--sp-xs) var(--sp-s) var(--sp-xs);
|
||||
border-radius: $br-8;
|
||||
border: $b-2 solid transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: var(--color-accent-primary);
|
||||
|
||||
.download-icon {
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
@ -222,6 +227,7 @@
|
||||
|
||||
.card-text {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
@ -249,11 +255,13 @@
|
||||
|
||||
.template-link-title {
|
||||
@include t.use-typography("body-medium");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.template-link-text {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
margin-block-start: var(--sp-s);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.title {
|
||||
@include deprecated.bigTitleTipography;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -28,9 +29,9 @@
|
||||
row-gap: 0.5rem;
|
||||
grid-template-rows: var(--cell-size) 1fr;
|
||||
padding: 0.5rem;
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
svg {
|
||||
|
||||
@ -8,14 +8,16 @@
|
||||
@use "ds/typography.scss" as t;
|
||||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
|
||||
display: grid;
|
||||
gap: var(--sp-xxl);
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
@ -29,38 +31,42 @@
|
||||
|
||||
.modal-title {
|
||||
@include t.use-typography("headline-medium");
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
display: grid;
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.element-list {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
overflow-y: auto;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,6 +78,7 @@
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -12,6 +12,5 @@ $br-6: px2rem(6);
|
||||
$br-8: px2rem(8);
|
||||
$br-12: px2rem(12);
|
||||
$br-circle: 50%;
|
||||
|
||||
$b-1: px2rem(1);
|
||||
$b-2: px2rem(2);
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
@use "sass:math";
|
||||
|
||||
@function px2rem($value) {
|
||||
$remValue: math.div($value, 16) * 1rem;
|
||||
@return $remValue;
|
||||
$rem-value: math.div($value, 16) * 1rem;
|
||||
|
||||
@return $rem-value;
|
||||
}
|
||||
|
||||
@ -11,29 +11,21 @@
|
||||
%base-button {
|
||||
--button-bg-color: initial;
|
||||
--button-fg-color: initial;
|
||||
|
||||
--button-hover-bg-color: initial;
|
||||
--button-hover-fg-color: initial;
|
||||
|
||||
--button-active-bg-color: initial;
|
||||
--button-active-fg-color: initial;
|
||||
|
||||
--button-disabled-bg-color: initial;
|
||||
--button-disabled-fg-color: initial;
|
||||
|
||||
--button-border-color: var(--button-bg-color);
|
||||
|
||||
--button-focus-inner-ring-color: initial;
|
||||
--button-focus-outer-ring-color: initial;
|
||||
|
||||
--button-width: initial;
|
||||
--button-height: #{$sz-32};
|
||||
|
||||
appearance: none;
|
||||
|
||||
width: var(--button-width);
|
||||
height: var(--button-height);
|
||||
|
||||
background: var(--button-bg-color);
|
||||
color: var(--button-fg-color);
|
||||
border: $b-1 solid var(--button-border-color);
|
||||
@ -53,6 +45,7 @@
|
||||
&:focus-visible {
|
||||
outline: var(--button-focus-inner-ring-color) solid #{px2rem(2)};
|
||||
outline-offset: -#{px2rem(3)};
|
||||
|
||||
--button-border-color: var(--button-focus-outer-ring-color);
|
||||
--button-fg-color: var(--button-focus-fg-color);
|
||||
}
|
||||
@ -66,16 +59,12 @@
|
||||
%base-button-primary {
|
||||
--button-bg-color: var(--color-accent-primary);
|
||||
--button-fg-color: var(--color-background-secondary);
|
||||
|
||||
--button-hover-bg-color: var(--color-accent-tertiary);
|
||||
--button-hover-fg-color: var(--color-background-secondary);
|
||||
|
||||
--button-active-bg-color: var(--color-accent-tertiary);
|
||||
--button-active-fg-color: var(--color-background-secondary);
|
||||
|
||||
--button-disabled-bg-color: var(--color-accent-primary-muted);
|
||||
--button-disabled-fg-color: var(--color-background-secondary);
|
||||
|
||||
--button-focus-bg-color: var(--color-accent-primary);
|
||||
--button-focus-fg-color: var(--color-background-secondary);
|
||||
--button-focus-inner-ring-color: var(--color-background-secondary);
|
||||
@ -83,23 +72,19 @@
|
||||
|
||||
&:active,
|
||||
&[aria-pressed="true"] {
|
||||
box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
%base-button-secondary {
|
||||
--button-bg-color: var(--color-background-tertiary);
|
||||
--button-fg-color: var(--color-foreground-secondary);
|
||||
|
||||
--button-hover-bg-color: var(--color-background-tertiary);
|
||||
--button-hover-fg-color: var(--color-accent-primary);
|
||||
|
||||
--button-active-bg-color: var(--color-background-quaternary);
|
||||
--button-active-fg-color: var(--color-accent-primary);
|
||||
|
||||
--button-disabled-bg-color: transparent;
|
||||
--button-disabled-fg-color: var(--color-foreground-secondary);
|
||||
|
||||
--button-focus-bg-color: var(--color-background-tertiary);
|
||||
--button-focus-fg-color: var(--color-foreground-primary);
|
||||
--button-focus-inner-ring-color: var(--color-background-secondary);
|
||||
@ -109,16 +94,12 @@
|
||||
%base-button-ghost {
|
||||
--button-bg-color: transparent;
|
||||
--button-fg-color: var(--color-foreground-secondary);
|
||||
|
||||
--button-hover-bg-color: var(--color-background-tertiary);
|
||||
--button-hover-fg-color: var(--color-accent-primary);
|
||||
|
||||
--button-active-bg-color: var(--color-background-quaternary);
|
||||
--button-active-fg-color: var(--color-accent-primary);
|
||||
|
||||
--button-disabled-bg-color: transparent;
|
||||
--button-disabled-fg-color: var(--color-accent-primary-muted);
|
||||
|
||||
--button-focus-bg-color: transparent;
|
||||
--button-focus-fg-color: var(--color-foreground-secondary);
|
||||
--button-focus-inner-ring-color: transparent;
|
||||
@ -128,16 +109,12 @@
|
||||
%base-button-destructive {
|
||||
--button-bg-color: var(--color-accent-error);
|
||||
--button-fg-color: var(--color-foreground-primary);
|
||||
|
||||
--button-hover-bg-color: var(--color-background-error);
|
||||
--button-hover-fg-color: var(--color-foreground-primary);
|
||||
|
||||
--button-active-bg-color: var(--color-accent-error);
|
||||
--button-active-fg-color: var(--color-foreground-primary);
|
||||
|
||||
--button-disabled-bg-color: var(--color-background-error);
|
||||
--button-disabled-fg-color: var(--color-accent-error);
|
||||
|
||||
--button-focus-bg-color: var(--color-accent-error);
|
||||
--button-focus-fg-color: var(--color-foreground-primary);
|
||||
--button-focus-inner-ring-color: var(--color-background-primary);
|
||||
@ -145,6 +122,6 @@
|
||||
|
||||
&:active,
|
||||
&[aria-pressed="true"] {
|
||||
box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgb(0 0 0 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,10 +9,9 @@
|
||||
|
||||
.button {
|
||||
@extend %base-button;
|
||||
|
||||
@include use-typography("headline-small");
|
||||
padding: 0 var(--sp-m);
|
||||
|
||||
padding: 0 var(--sp-m);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
column-gap: var(--sp-xs);
|
||||
|
||||
@ -37,20 +37,15 @@
|
||||
.icon-button-action {
|
||||
--button-bg-color: transparent;
|
||||
--button-fg-color: var(--color-foreground-secondary);
|
||||
|
||||
--button-hover-bg-color: transparent;
|
||||
--button-hover-fg-color: var(--color-accent-primary);
|
||||
|
||||
--button-active-bg-color: var(--color-background-quaternary);
|
||||
|
||||
--button-disabled-bg-color: transparent;
|
||||
--button-disabled-fg-color: var(--color-accent-primary-muted);
|
||||
|
||||
--button-focus-bg-color: transparent;
|
||||
--button-focus-fg-color: var(--color-accent-primary);
|
||||
--button-focus-inner-ring-color: transparent;
|
||||
--button-focus-outer-ring-color: var(--color-accent-primary);
|
||||
|
||||
--button-width: #{$sz-24};
|
||||
--button-height: #{$sz-24};
|
||||
}
|
||||
|
||||
@ -12,22 +12,17 @@ $mint-700: #426158;
|
||||
$mint-150-60: #7efff599;
|
||||
$mint-250-10: #00d1b81a;
|
||||
$mint-250-70: #00d1b8b3;
|
||||
|
||||
$green-200: #a7e8d9;
|
||||
$green-500: #2d9f8f;
|
||||
$green-950: #0a2927;
|
||||
|
||||
$orange-200: #fedeac;
|
||||
$orange-500: #fe9c07;
|
||||
$orange-950: #3d2501;
|
||||
|
||||
$red-200: #ffcada;
|
||||
$red-400: #c80857;
|
||||
$red-500: #ff3277;
|
||||
$red-950: #500124;
|
||||
|
||||
$pink-400: #ff6fe0;
|
||||
|
||||
$purple-200: #e1d2f5;
|
||||
$purple-400: #bb97d8;
|
||||
$purple-500: #a977d1;
|
||||
@ -36,23 +31,18 @@ $purple-700: #6911d4;
|
||||
$purple-600-10: #8c33eb1a;
|
||||
$purple-600-70: #8c33ebb3;
|
||||
$purple-700-60: #6911d499;
|
||||
|
||||
$aqua-200: #ddf7ff;
|
||||
$aqua-400: #77e1f3;
|
||||
$aqua-600: #59acbb;
|
||||
$aqua-800: #1d4464;
|
||||
|
||||
$violet-300: #a7a9ff;
|
||||
$violet-600: #6c6dad;
|
||||
$violet-700: #484c74;
|
||||
$violet-800: #272941;
|
||||
|
||||
$blue-200: #bae3fd;
|
||||
$blue-500: #0e9be9;
|
||||
$blue-950: #082c49;
|
||||
|
||||
$cobalt-700: #1345aa;
|
||||
|
||||
$black: #000;
|
||||
$gray-950: #18181a;
|
||||
$gray-950-60: #18181a99;
|
||||
@ -63,12 +53,10 @@ $gray-200: #e8eaee;
|
||||
$gray-100: #eef0f2;
|
||||
$gray-50: #f3f4f6;
|
||||
$white: #fff;
|
||||
$white-60: #ffffff99;
|
||||
$white-60: #fff9;
|
||||
$white-90: #ffffffe6;
|
||||
|
||||
$blue-teal-700: #495e74;
|
||||
$grayish-blue-500: #8f9da3;
|
||||
|
||||
$grayish-red: #bfbfbf;
|
||||
|
||||
:global(.light) {
|
||||
@ -83,7 +71,6 @@ $grayish-red: #bfbfbf;
|
||||
--color-accent-action: #{$purple-400};
|
||||
--color-accent-action-hover: #{$purple-500};
|
||||
--color-accent-off: #{$gray-50};
|
||||
|
||||
--color-accent-success: #{$green-500};
|
||||
--color-background-success: #{$green-200};
|
||||
--color-accent-warning: #{$orange-500};
|
||||
@ -97,29 +84,23 @@ $grayish-red: #bfbfbf;
|
||||
--color-accent-default: #{$gray-100};
|
||||
--color-icon-default: #{$blue-teal-700};
|
||||
--color-background-disabled: #{$gray-200};
|
||||
|
||||
--color-background-primary: #{$white};
|
||||
--color-background-secondary: #{$gray-200};
|
||||
--color-background-tertiary: #{$gray-50};
|
||||
--color-background-quaternary: #{$gray-100};
|
||||
|
||||
--color-foreground-primary: #{$black};
|
||||
--color-foreground-secondary: #{$blue-teal-700};
|
||||
|
||||
--color-static-white: #{$white};
|
||||
--color-static-black: #{$black};
|
||||
|
||||
--color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)};
|
||||
--color-shadow-light: #{color.change($black, $alpha: 0.3)};
|
||||
--color-overlay-default: #{$white-60};
|
||||
--color-overlay-onboarding: #{$white-90};
|
||||
--color-canvas: #{$grayish-red};
|
||||
|
||||
--color-token-background: #{$aqua-200};
|
||||
--color-token-border: #{$aqua-400};
|
||||
--color-token-accent: #{$aqua-600};
|
||||
--color-token-foreground: #{$aqua-800};
|
||||
|
||||
--color-badge-premium: #{$orange-500};
|
||||
}
|
||||
|
||||
@ -135,7 +116,6 @@ $grayish-red: #bfbfbf;
|
||||
--color-accent-action: #{$purple-400};
|
||||
--color-accent-action-hover: #{$purple-500};
|
||||
--color-accent-off: #{$gray-50};
|
||||
|
||||
--color-accent-success: #{$green-500};
|
||||
--color-background-success: #{$green-950};
|
||||
--color-accent-warning: #{$orange-500};
|
||||
@ -149,28 +129,22 @@ $grayish-red: #bfbfbf;
|
||||
--color-accent-default: #{$gray-800};
|
||||
--color-icon-default: #{$grayish-blue-500};
|
||||
--color-background-disabled: #{$gray-800};
|
||||
|
||||
--color-background-primary: #{$gray-950};
|
||||
--color-background-secondary: #{$black};
|
||||
--color-background-tertiary: #{$gray-900};
|
||||
--color-background-quaternary: #{$gray-800};
|
||||
|
||||
--color-foreground-primary: #{$white};
|
||||
--color-foreground-secondary: #{$grayish-blue-500};
|
||||
|
||||
--color-static-white: #{$white};
|
||||
--color-static-black: #{$black};
|
||||
|
||||
--color-shadow-dark: #{color.change($black, $alpha: 0.6)};
|
||||
--color-shadow-light: #{color.change($black, $alpha: 0.3)};
|
||||
--color-overlay-default: #{$gray-950-60};
|
||||
--color-overlay-onboarding: #{$gray-950-90};
|
||||
--color-canvas: #{$grayish-red};
|
||||
|
||||
--color-token-background: #{$violet-800};
|
||||
--color-token-border: #{$violet-700};
|
||||
--color-token-accent: #{$violet-600};
|
||||
--color-token-foreground: #{$violet-300};
|
||||
|
||||
--color-badge-premium: #{$orange-200};
|
||||
}
|
||||
|
||||
@ -14,14 +14,11 @@
|
||||
--input-checkbox-border-color-hover: var(--color-accent-primary-muted);
|
||||
--input-checkbox-foreground-color: var(--color-foreground-primary);
|
||||
--input-checkbox-background-color: var(--color-background-quaternary);
|
||||
|
||||
--input-checkbox-border-color-checked: var(--color-background-quaternary);
|
||||
--input-checkbox-foreground-color-checked: var(--color-background-primary);
|
||||
--input-checkbox-background-color-checked: var(--color-accent-primary);
|
||||
|
||||
--input-checkbox-foreground-color-disabled: var(--color-background-primary);
|
||||
--input-checkbox-background-color-disabled: var(--color-foreground-secondary);
|
||||
|
||||
--input-checkbox-text-color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -73,6 +70,7 @@
|
||||
|
||||
.checkbox-text {
|
||||
@include use-typography("body-small");
|
||||
|
||||
padding-inline-start: var(--sp-s);
|
||||
color: var(--input-checkbox-text-color);
|
||||
}
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
}
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
@ -40,7 +41,6 @@
|
||||
height: $sz-32;
|
||||
width: 100%;
|
||||
padding: var(--sp-s);
|
||||
border: none;
|
||||
border-radius: $br-8;
|
||||
outline: $b-1 solid var(--combobox-outline-color);
|
||||
border: $b-1 solid var(--combobox-border-color);
|
||||
@ -68,6 +68,7 @@
|
||||
all: unset;
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
@ -88,6 +89,7 @@
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
|
||||
--combobox-background-color: var(--color-background-primary);
|
||||
--combobox-border-color: var(--color-background-quaternary);
|
||||
--combobox-text-color: var(--color-foreground-secondary);
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
.input-wrapper {
|
||||
--input-padding-size: var(--sp-xs);
|
||||
--opacity-button: 0;
|
||||
|
||||
@include t.use-typography("code-font");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xs);
|
||||
@ -23,9 +25,11 @@
|
||||
&:not(:focus-within) {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--opacity-button: 1;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
--opacity-button: 1;
|
||||
}
|
||||
@ -38,7 +42,9 @@
|
||||
|
||||
.text-icon {
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
inline-size: fit-content;
|
||||
min-inline-size: px2rem(46);
|
||||
padding-inline-start: var(--sp-xs);
|
||||
@ -50,12 +56,16 @@
|
||||
inset-block-start: 0;
|
||||
opacity: var(--opacity-button);
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
--opacity-button: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
--opacity-button: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
}
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
@ -47,7 +48,6 @@
|
||||
block-size: $sz-32;
|
||||
inline-size: 100%;
|
||||
padding: var(--sp-s);
|
||||
border: none;
|
||||
border-radius: $br-8;
|
||||
outline: $b-1 solid var(--select-outline-color);
|
||||
border: $b-1 solid var(--select-border-color);
|
||||
@ -91,6 +91,7 @@
|
||||
|
||||
.header-label {
|
||||
@include use-typography("body-small");
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -14,8 +14,7 @@
|
||||
--options-empty: var(--color-canvas);
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: start;
|
||||
place-items: center start;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--sp-xs);
|
||||
width: 100%;
|
||||
@ -56,6 +55,7 @@
|
||||
|
||||
.option-current {
|
||||
--options-outline-color: var(--color-accent-primary);
|
||||
|
||||
outline: $b-1 solid var(--options-outline-color);
|
||||
}
|
||||
|
||||
|
||||
@ -25,10 +25,9 @@
|
||||
padding-block: var(--sp-xs);
|
||||
margin-block-end: 0;
|
||||
max-block-size: $sz-400;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
z-index: var(--z-index-dropdown);
|
||||
box-shadow: 0px 0px $sz-12 0px var(--color-shadow-dark);
|
||||
box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
|
||||
}
|
||||
|
||||
.left-align {
|
||||
@ -41,13 +40,13 @@
|
||||
|
||||
.option-separator {
|
||||
border: $b-1 solid var(--options-dropdown-border-color);
|
||||
margin-block-start: var(--sp-xs);
|
||||
margin-block-end: var(--sp-xs);
|
||||
margin-block: var(--sp-xs) var(--sp-xs);
|
||||
}
|
||||
|
||||
.group-option,
|
||||
.option-empty {
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-xs);
|
||||
|
||||
@ -12,10 +12,11 @@
|
||||
--token-options-fg-color: var(--color-foreground-primary);
|
||||
--token-options-bg-color: unset;
|
||||
--token-options-empty: var(--color-canvas);
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: start;
|
||||
place-items: center start;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: $sz-6;
|
||||
width: 100%;
|
||||
@ -26,10 +27,10 @@
|
||||
outline-offset: calc(-1 * $b-1);
|
||||
background-color: var(--token-options-bg-color);
|
||||
color: var(--token-options-fg-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&[aria-selected="true"] {
|
||||
--token-options-bg-color: var(--color-background-quaternary);
|
||||
@ -51,11 +52,13 @@
|
||||
|
||||
.option-current {
|
||||
--token-options-outline-color: var(--color-accent-primary);
|
||||
|
||||
outline: $b-1 solid var(--token-options-outline-color);
|
||||
}
|
||||
|
||||
.option-pill {
|
||||
@include use-typography("code-font");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
background-color: var(--color-background-primary);
|
||||
border-radius: $br-6;
|
||||
|
||||
@ -13,10 +13,8 @@
|
||||
|
||||
.switch {
|
||||
--switch-label-foreground-color: var(--color-foreground-primary);
|
||||
|
||||
--switch-track-outline-color: none;
|
||||
--switch-track-shadow: inset 0 1px 2px var(--color-shadow-light);
|
||||
|
||||
--switch-thumb-shadow: 0 1px 2px var(--color-shadow-light);
|
||||
|
||||
display: grid;
|
||||
@ -29,7 +27,6 @@
|
||||
&.off {
|
||||
--switch-track-justify-content: start;
|
||||
--switch-track-background-color: var(--color-foreground-secondary);
|
||||
|
||||
--switch-thumb-width: #{px2rem(14)};
|
||||
--switch-thumb-height: #{px2rem(14)};
|
||||
--switch-thumb-background-color: var(--color-accent-off);
|
||||
@ -39,7 +36,6 @@
|
||||
&.neutral {
|
||||
--switch-track-justify-content: center;
|
||||
--switch-track-background-color: var(--color-accent-tertiary);
|
||||
|
||||
--switch-thumb-width: #{px2rem(14)};
|
||||
--switch-thumb-height: #{px2rem(4)};
|
||||
--switch-thumb-background-color: var(--color-accent-off);
|
||||
@ -49,7 +45,6 @@
|
||||
&.on {
|
||||
--switch-track-justify-content: end;
|
||||
--switch-track-background-color: var(--color-accent-tertiary);
|
||||
|
||||
--switch-thumb-width: #{px2rem(14)};
|
||||
--switch-thumb-height: #{px2rem(14)};
|
||||
--switch-thumb-background-color: var(--color-accent-off);
|
||||
@ -58,24 +53,21 @@
|
||||
|
||||
&[disabled] {
|
||||
pointer-events: none;
|
||||
|
||||
--switch-label-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--switch-track-shadow: none;
|
||||
|
||||
--switch-thumb-shadow: none;
|
||||
}
|
||||
|
||||
&.off[disabled] {
|
||||
--switch-track-background-color: var(--color-background-primary);
|
||||
--switch-track-border-color: var(--color-background-disabled);
|
||||
|
||||
--switch-thumb-background-color: var(--color-background-disabled);
|
||||
}
|
||||
|
||||
&.on[disabled],
|
||||
&.neutral[disabled] {
|
||||
--switch-track-background-color: var(--color-background-disabled);
|
||||
|
||||
--switch-thumb-background-color: var(--color-background-primary);
|
||||
}
|
||||
|
||||
@ -90,6 +82,7 @@
|
||||
|
||||
.switch-label {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--switch-label-foreground-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
--hint-color: var(--color-foreground-secondary);
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--hint-color);
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
align-items: center;
|
||||
position: relative;
|
||||
inline-size: 100%;
|
||||
|
||||
background: var(--input-bg-color);
|
||||
border-radius: $br-8;
|
||||
padding: 0 var(--input-padding-size, var(--sp-s));
|
||||
@ -85,12 +84,10 @@
|
||||
border: none;
|
||||
background: none;
|
||||
inline-size: 100%;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
color: var(--input-fg-color);
|
||||
|
||||
&:focus-visible {
|
||||
@ -107,7 +104,6 @@
|
||||
|
||||
&:is(:autofill, :autofill:hover, :autofill:focus, :autofill:active) {
|
||||
-webkit-text-fill-color: var(--input-fg-color);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
caret-color: var(--input-bg-color);
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
--label-optional-color: var(--color-foreground-secondary);
|
||||
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--label-color);
|
||||
display: flex;
|
||||
gap: var(--sp-xs);
|
||||
|
||||
@ -18,10 +18,10 @@
|
||||
--token-field-outline-color: none;
|
||||
--token-field-height: var(--sp-xxxl);
|
||||
--token-field-margin: unset;
|
||||
|
||||
display: inline-flex;
|
||||
column-gap: var(--sp-xs);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
inline-size: 100%;
|
||||
background: var(--token-field-bg-color);
|
||||
border-radius: $br-8;
|
||||
@ -38,6 +38,7 @@
|
||||
--token-field-outline-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.token-field-wrapper {
|
||||
inline-size: 100%;
|
||||
}
|
||||
@ -48,8 +49,10 @@
|
||||
|
||||
.token-field-disabled {
|
||||
user-select: none;
|
||||
|
||||
--token-field-bg-color: var(--color-background-primary);
|
||||
--token-field-outline-color: var(--color-background-quaternary);
|
||||
|
||||
&:hover {
|
||||
--token-field-bg-color: var(--color-background-primary);
|
||||
--token-field-outline-color: var(--color-background-quaternary);
|
||||
@ -60,8 +63,10 @@
|
||||
--pill-border-color: var(--color-token-border);
|
||||
--pill-bg-color: var(--color-background-tertiary);
|
||||
--pill-fg-color: var(--color-token-foreground);
|
||||
|
||||
@include t.use-typography("code-font");
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
|
||||
display: block;
|
||||
block-size: var(--sp-xxl);
|
||||
inline-size: fit-content;
|
||||
@ -72,24 +77,29 @@
|
||||
border-radius: $br-6;
|
||||
padding-inline: $sz-6;
|
||||
max-inline-size: 100%;
|
||||
|
||||
&:hover {
|
||||
--pill-bg-color: var(--color-token-background);
|
||||
--pill-fg-color: var(--color-foreground-primary);
|
||||
--pill-border-color: var(--color-token-foreground);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
--pill-bg-color: var(--color-token-background);
|
||||
--pill-fg-color: var(--color-foreground-primary);
|
||||
--pill-border-color: var(--color-accent-primary);
|
||||
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pill-disabled {
|
||||
user-select: none;
|
||||
|
||||
--pill-bg-color: none;
|
||||
--pill-fg-color: var(--color-foreground-secondary);
|
||||
--pill-border-color: var(--color-token-border);
|
||||
|
||||
&:hover {
|
||||
--pill-bg-color: none;
|
||||
--pill-fg-color: var(--color-foreground-secondary);
|
||||
@ -101,7 +111,9 @@
|
||||
--pill-bg-color: none;
|
||||
--pill-fg-color: var(--color-foreground-secondary);
|
||||
--pill-border-color: var(--color-token-border);
|
||||
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
--pill-bg-color: none;
|
||||
--pill-fg-color: var(--color-foreground-secondary);
|
||||
@ -127,15 +139,20 @@
|
||||
inset-block-start: 0;
|
||||
opacity: var(--opacity-button);
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
--opacity-button: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--color-background-quaternary);
|
||||
|
||||
--opacity-button: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.invisible-btn-dropdown-open {
|
||||
--opacity-button: 0;
|
||||
}
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
.token-icon {
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@ -27,8 +27,7 @@
|
||||
[{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}]
|
||||
(let [button-props (mf/spread-props props
|
||||
{:class [class (stl/css-case :layer-button true
|
||||
:layer-button--expandable is-expandable
|
||||
:layer-button--expanded expanded)]
|
||||
:layer-button-expanded expanded)]
|
||||
:type "button"
|
||||
:on-click on-toggle-expand
|
||||
:on-context-menu on-context-menu})]
|
||||
|
||||
@ -16,9 +16,7 @@
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
block-size: var(--layer-button-block-size);
|
||||
|
||||
background: var(--layer-button-background);
|
||||
color: var(--layer-button-text);
|
||||
}
|
||||
@ -27,17 +25,15 @@
|
||||
@include use-typography("body-small");
|
||||
|
||||
appearance: none;
|
||||
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.layer-button--expanded {
|
||||
.layer-button-expanded {
|
||||
& .layer-button-name {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@ -10,15 +10,14 @@
|
||||
|
||||
.tabs {
|
||||
--tabs-bg-color: var(--color-background-secondary);
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.padding-wrapper {
|
||||
padding-inline-start: var(--tabs-nav-padding-inline-start, 0);
|
||||
padding-inline-end: var(--tabs-nav-padding-inline-end, 0);
|
||||
padding-block-start: var(--tabs-nav-padding-block-start, 0);
|
||||
padding-block-end: var(--tabs-nav-padding-block-end, 0);
|
||||
padding-inline: var(--tabs-nav-padding-inline-start, 0) var(--tabs-nav-padding-inline-end, 0);
|
||||
padding-block: var(--tabs-nav-padding-block-start, 0) var(--tabs-nav-padding-block-end, 0);
|
||||
}
|
||||
|
||||
// TAB NAV
|
||||
@ -44,6 +43,7 @@
|
||||
grid-auto-flow: column;
|
||||
gap: var(--sp-xxs);
|
||||
width: 100%;
|
||||
|
||||
// Removing margin bottom from default ul
|
||||
margin-block-end: 0;
|
||||
border-radius: $br-8;
|
||||
@ -68,7 +68,6 @@
|
||||
height: $sz-32;
|
||||
border: none;
|
||||
border-radius: $br-8;
|
||||
padding: 0 var(--sp-s);
|
||||
outline: $b-1 solid var(--tabs-item-outline-color);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@ -89,6 +88,7 @@
|
||||
|
||||
.tab-text {
|
||||
@include use-typography("headline-small");
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -102,6 +102,7 @@
|
||||
|
||||
.tab-panel {
|
||||
--tab-panel-outline-color: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
@mixin textEllipsis {
|
||||
@mixin text-ellipsis {
|
||||
display: block;
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
@ -16,7 +16,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin twoLineTextEllipsis {
|
||||
@mixin two-line-text-ellipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -33,6 +33,7 @@
|
||||
/// @param {Length} $border - Inner transparent border size
|
||||
/// @param {Bool} $include-selection - Include ::selection styles
|
||||
/// @param {Bool} $include-placeholder - Include placeholder styles
|
||||
|
||||
@mixin custom-scrollbar(
|
||||
$thumb-color: #aab5ba4d,
|
||||
$thumb-hover-color: #aab5bab3,
|
||||
@ -84,12 +85,7 @@
|
||||
@if $include-placeholder {
|
||||
&::placeholder {
|
||||
@include t.use-typography("body-small");
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
// Legacy webkit
|
||||
&::-webkit-input-placeholder {
|
||||
@include t.use-typography("body-small");
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,10 +22,8 @@
|
||||
border: $b-1 solid var(--notification-border-color);
|
||||
border-radius: $br-8;
|
||||
padding: var(--notification-padding);
|
||||
|
||||
display: flex;
|
||||
gap: var(--sp-s);
|
||||
|
||||
color: var(--notification-fg-color);
|
||||
|
||||
// Targets the potential links included by the creator in the children props.
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
|
||||
min-inline-size: $sz-224;
|
||||
max-inline-size: $sz-480;
|
||||
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset-block-start: var(--toast-inset-block-start-position);
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
|
||||
.is-selected {
|
||||
--border-color: var(--color-accent-primary);
|
||||
|
||||
padding: var(--sp-xxs);
|
||||
}
|
||||
|
||||
|
||||
@ -22,8 +22,7 @@
|
||||
.text-wrapper {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
place-self: center center;
|
||||
max-width: $sz-400;
|
||||
}
|
||||
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
|
||||
.text {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
text-align: center;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
--input-meta-background: var(--color-background-tertiary);
|
||||
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
border-radius: $br-8;
|
||||
background-color: var(--input-meta-background);
|
||||
padding: var(--sp-s);
|
||||
@ -28,6 +29,7 @@
|
||||
|
||||
&:hover {
|
||||
--input-meta-background: var(--color-background-quaternary);
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
}
|
||||
|
||||
.loader {
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
width: var(--icon-width);
|
||||
}
|
||||
|
||||
|
||||
@ -11,19 +11,13 @@
|
||||
.milestone {
|
||||
border: $b-1 solid var(--border-color, transparent);
|
||||
border-radius: $br-8;
|
||||
|
||||
background: var(--color-background-primary);
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"avatar name button"
|
||||
"avatar content button";
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: calc(var(--sp-xxl) + var(--sp-l)) 1fr auto;
|
||||
|
||||
grid-template:
|
||||
"avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l))
|
||||
1fr auto;
|
||||
padding: var(--sp-s) 0;
|
||||
align-items: center;
|
||||
|
||||
column-gap: var(--sp-s);
|
||||
|
||||
&.is-selected,
|
||||
@ -60,6 +54,7 @@
|
||||
|
||||
.date {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
grid-area: content;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
@ -11,19 +11,13 @@
|
||||
.milestone {
|
||||
border: $b-1 solid var(--border-color, transparent);
|
||||
border-radius: $br-8;
|
||||
|
||||
background: var(--color-background-primary);
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"avatar name button"
|
||||
"avatar content button";
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: calc(var(--sp-xxl) + var(--sp-l)) 1fr auto;
|
||||
|
||||
grid-template:
|
||||
"avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l))
|
||||
1fr auto;
|
||||
padding: var(--sp-s) 0;
|
||||
align-items: center;
|
||||
|
||||
column-gap: var(--sp-s);
|
||||
|
||||
&.is-selected,
|
||||
@ -39,12 +33,14 @@
|
||||
|
||||
.name {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
grid-area: name;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.toggle-message {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
@ -95,6 +91,7 @@
|
||||
|
||||
&:hover {
|
||||
color: var(--color-accent-primary);
|
||||
|
||||
--icon-stroke-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
|
||||
.panel-title-text {
|
||||
@include t.use-typography("headline-small");
|
||||
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
color: var(--color-foreground-primary);
|
||||
|
||||
@ -55,6 +55,7 @@ $arrow-side: 12px;
|
||||
"arrow"
|
||||
"content";
|
||||
}
|
||||
|
||||
.tooltip-bottom .tooltip-arrow {
|
||||
justify-self: center;
|
||||
border-radius: var(--sp-xs) 0;
|
||||
@ -111,7 +112,7 @@ $arrow-side: 12px;
|
||||
}
|
||||
|
||||
.tooltip-bottom-right .tooltip-arrow {
|
||||
margin: 0px var(--sp-s);
|
||||
margin: 0 var(--sp-s);
|
||||
transform: rotate(45deg) translateX(var(--sp-s));
|
||||
border-radius: var(--sp-xs) 0;
|
||||
border-block-start: $b-1 solid var(--color-accent-primary-muted);
|
||||
@ -123,6 +124,7 @@ $arrow-side: 12px;
|
||||
"arrow"
|
||||
"content";
|
||||
}
|
||||
|
||||
.tooltip-bottom-left .tooltip-arrow {
|
||||
justify-self: end;
|
||||
margin: 0 var(--sp-s);
|
||||
@ -137,6 +139,7 @@ $arrow-side: 12px;
|
||||
"content"
|
||||
"arrow";
|
||||
}
|
||||
|
||||
.tooltip-top-left .tooltip-arrow {
|
||||
margin: 0 var(--sp-s);
|
||||
justify-self: end;
|
||||
@ -148,6 +151,7 @@ $arrow-side: 12px;
|
||||
|
||||
.tooltip-content {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
background-color: var(--color-background-primary);
|
||||
color: var(--color-foreground-secondary);
|
||||
border-radius: var(--sp-xs);
|
||||
|
||||
@ -8,11 +8,9 @@
|
||||
|
||||
$_font-weight-regular: 400;
|
||||
$_font-weight-medium: 500;
|
||||
|
||||
$_font-lineheight-dense: 1.2;
|
||||
$_font-lineheight-compact: 1.3;
|
||||
$_font-lineheight-normal: 1.4;
|
||||
|
||||
$_fs-12: px2rem(12);
|
||||
$_fs-14: px2rem(14);
|
||||
$_fs-16: px2rem(16);
|
||||
@ -22,7 +20,7 @@ $_fs-24: px2rem(24);
|
||||
$_fs-36: px2rem(36);
|
||||
|
||||
@mixin _font-style-display {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -30,7 +28,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-title-large {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -38,7 +36,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-title-medium {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -46,7 +44,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-title-small {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-dense;
|
||||
@ -54,7 +52,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-headline-large {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -63,7 +61,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-headline-medium {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -72,7 +70,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-headline-small {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-medium;
|
||||
line-height: $_font-lineheight-dense;
|
||||
@ -81,7 +79,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-body-large {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -89,7 +87,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-body-medium {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-normal;
|
||||
@ -97,7 +95,7 @@ $_fs-36: px2rem(36);
|
||||
}
|
||||
|
||||
@mixin _font-style-body-small {
|
||||
font-family: "worksans", "vazirmatn", sans-serif;
|
||||
font-family: worksans, vazirmatn, sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: $_font-weight-regular;
|
||||
line-height: $_font-lineheight-compact;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
@property --solid-color-overlay {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: rgba(0, 0, 0, 0);
|
||||
initial-value: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.swatch {
|
||||
@ -19,13 +19,13 @@
|
||||
--border-radius: #{$br-4};
|
||||
--border-color-active: var(--color-foreground-primary);
|
||||
--border-color-active-inset: var(--color-background-primary);
|
||||
|
||||
--checkerboard-background: repeating-conic-gradient(lightgray 0% 25%, white 0% 50%);
|
||||
--checkerboard-size: 0.5rem 0.5rem;
|
||||
|
||||
border: $b-1 solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
&:focus-visible {
|
||||
--border-color: var(--color-accent-primary);
|
||||
}
|
||||
@ -80,6 +80,7 @@
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--color-accent-primary-muted);
|
||||
|
||||
border-width: $b-2;
|
||||
}
|
||||
}
|
||||
@ -114,7 +115,6 @@
|
||||
/* solid‑colour overlay */
|
||||
/* checkerboard pattern */
|
||||
linear-gradient(var(--solid-color-overlay), var(--solid-color-overlay)), var(--checkerboard-background);
|
||||
|
||||
background-size: cover, var(--checkerboard-size);
|
||||
background-position: center, center;
|
||||
background-repeat: no-repeat, repeat;
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
// PROGRESS WIDGET
|
||||
.export-progress-widget {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
width: deprecated.$s-28;
|
||||
height: deprecated.$s-28;
|
||||
}
|
||||
@ -19,6 +20,7 @@
|
||||
--export-modal-fg-color: var(--alert-text-foreground-color-default);
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-default);
|
||||
--export-modal-border-color: var(--alert-border-color-default);
|
||||
|
||||
position: absolute;
|
||||
right: deprecated.$s-16;
|
||||
top: deprecated.$s-48;
|
||||
@ -41,13 +43,15 @@
|
||||
--export-modal-fg-color: var(--alert-text-foreground-color-error);
|
||||
--export-modal-icon-color: var(--alert-icon-foreground-color-error);
|
||||
--export-modal-border-color: var(--alert-border-color-error);
|
||||
|
||||
grid-template-areas: "icon text close";
|
||||
gap: deprecated.$s-8;
|
||||
padding-block: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
margin-inline-start: deprecated.$s-8;
|
||||
@ -56,6 +60,7 @@
|
||||
|
||||
.export-progress-title {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: deprecated.$s-8;
|
||||
@ -68,6 +73,7 @@
|
||||
|
||||
.progress {
|
||||
@include deprecated.bodyMediumTypography;
|
||||
|
||||
padding-left: deprecated.$s-8;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
@ -77,6 +83,7 @@
|
||||
.retry-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
display: inline;
|
||||
text-align: left;
|
||||
color: var(--modal-link-foreground-color);
|
||||
@ -86,12 +93,14 @@
|
||||
|
||||
.progress-close-button {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
padding: 0;
|
||||
margin-inline-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--export-modal-icon-color);
|
||||
}
|
||||
|
||||
@ -102,14 +111,16 @@
|
||||
|
||||
// EXPORT MODAL
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
|
||||
max-height: calc(10 * deprecated.$s-80);
|
||||
}
|
||||
|
||||
@ -119,75 +130,95 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content,
|
||||
.no-selection {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
|
||||
.modal-link {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--modal-link-foreground-color);
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
margin-left: deprecated.$s-16;
|
||||
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.selection-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.selection-shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&:after {
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
|
||||
background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
@include deprecated.flexColumn;
|
||||
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
|
||||
.selection-row {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
align-items: center;
|
||||
@ -195,45 +226,57 @@
|
||||
height: 10%;
|
||||
gap: deprecated.$s-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
|
||||
.checkobox-tick {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.selection-scale {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.selection-extension {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
background-color: var(--app-white);
|
||||
border-radius: deprecated.$br-6;
|
||||
margin: auto 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
object-fit: contain;
|
||||
@ -245,15 +288,18 @@
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,20 +307,26 @@
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.export-option {
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
label {
|
||||
align-items: flex-start;
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
@ -288,37 +340,46 @@
|
||||
.file-entry {
|
||||
.file-name {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--input-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -8,14 +8,16 @@
|
||||
|
||||
// EXPORT MODAL
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
@extend %modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
@extend %modal-container-base;
|
||||
|
||||
max-height: calc(10 * deprecated.$s-80);
|
||||
}
|
||||
|
||||
@ -25,74 +27,94 @@
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.headlineMediumTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
@extend %modal-close-btn-base;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
margin-bottom: deprecated.$s-24;
|
||||
|
||||
.modal-link {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: var(--modal-link-foreground-color);
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
margin-bottom: deprecated.$s-4;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
margin-left: deprecated.$s-16;
|
||||
|
||||
span {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-title {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.selection-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.selection-shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&:after {
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(to top, rgba(24, 24, 26, 1) 0%, rgba(24, 24, 26, 0) 100%);
|
||||
background: linear-gradient(to top, rgb(24 24 26 / 100%) 0%, rgb(24 24 26 / 0%) 100%);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
@include deprecated.flexColumn;
|
||||
|
||||
max-height: deprecated.$s-400;
|
||||
overflow-y: auto;
|
||||
padding-bottom: deprecated.$s-12;
|
||||
|
||||
.selection-row {
|
||||
@include deprecated.flexRow;
|
||||
|
||||
background-color: var(--entry-background-color);
|
||||
min-height: deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
|
||||
.selection-btn {
|
||||
@include deprecated.buttonStyle;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto 1fr auto auto;
|
||||
align-items: center;
|
||||
@ -100,45 +122,57 @@
|
||||
height: 10%;
|
||||
gap: deprecated.$s-8;
|
||||
padding: 0 deprecated.$s-16;
|
||||
|
||||
.checkbox-wrapper {
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-24;
|
||||
width: deprecated.$s-24;
|
||||
padding: 0;
|
||||
|
||||
.checkobox-tick {
|
||||
@extend .checkbox-icon;
|
||||
@extend %checkbox-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-name {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
flex-grow: 1;
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.selection-scale {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
min-width: deprecated.$s-108;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.selection-extension {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
|
||||
min-width: deprecated.$s-72;
|
||||
padding: deprecated.$s-12;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
min-height: deprecated.$s-32;
|
||||
min-width: deprecated.$s-32;
|
||||
background-color: var(--app-white);
|
||||
border-radius: deprecated.$br-6;
|
||||
margin: auto 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
object-fit: contain;
|
||||
@ -150,15 +184,18 @@
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend .modal-action-btns;
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@extend .modal-cancel-btn;
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
@extend %modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
@extend %modal-danger-btn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -166,21 +203,27 @@
|
||||
.modal-subtitle,
|
||||
.modal-msg {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.export-option {
|
||||
@extend .input-checkbox;
|
||||
@extend %input-checkbox;
|
||||
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
|
||||
label {
|
||||
align-items: flex-start;
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
@ -197,35 +240,43 @@
|
||||
|
||||
.file-icon {
|
||||
@include deprecated.flexCenter;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
@extend %button-icon-small;
|
||||
|
||||
stroke: var(--input-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.file-name-label {
|
||||
@include deprecated.bodyLargeTypography;
|
||||
@include deprecated.textEllipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--modal-text-foreground-color);
|
||||
|
||||
.file-icon svg {
|
||||
stroke: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
@ -11,11 +11,12 @@
|
||||
}
|
||||
|
||||
.title-spacing-annotation {
|
||||
@extend .attr-title;
|
||||
@extend %attr-title;
|
||||
}
|
||||
|
||||
.annotation-content {
|
||||
@include deprecated.bodySmallTypography;
|
||||
|
||||
color: var(--entry-foreground-color);
|
||||
}
|
||||
|
||||
|
||||
@ -15,8 +15,7 @@
|
||||
max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
|
||||
padding-top: var(--sp-s);
|
||||
padding-inline: var(--sp-m);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
scrollbar-gutter: stable;
|
||||
background-color: var(--low-emphasis-background);
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,12 +26,13 @@
|
||||
}
|
||||
|
||||
.blur-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@ -24,7 +23,7 @@
|
||||
}
|
||||
|
||||
.attributes-color-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
}
|
||||
|
||||
.bullet-wrapper {
|
||||
@ -41,6 +40,7 @@
|
||||
|
||||
.image-format {
|
||||
@include use-typography("headline-small");
|
||||
|
||||
block-size: $sz-32;
|
||||
padding: var(--sp-s) 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -56,6 +56,7 @@
|
||||
|
||||
.format-info {
|
||||
@include use-typography("body-small");
|
||||
|
||||
padding-left: var(--sp-xxs);
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
@ -66,10 +67,12 @@
|
||||
gap: var(--sp-xs);
|
||||
flex-grow: 1;
|
||||
max-inline-size: px2rem(144);
|
||||
|
||||
button {
|
||||
visibility: hidden;
|
||||
min-inline-size: px2rem(28);
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -87,6 +90,7 @@
|
||||
|
||||
.color-name-wrapper {
|
||||
@include use-typography("body-small");
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xs);
|
||||
@ -109,7 +113,8 @@
|
||||
|
||||
.color-value-wrapper {
|
||||
@include use-typography("body-small");
|
||||
@include textEllipsis;
|
||||
@include text-ellipsis;
|
||||
|
||||
color: var(--menu-foreground-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -120,6 +125,7 @@
|
||||
|
||||
.opacity-info {
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--menu-foreground-color);
|
||||
text-transform: uppercase;
|
||||
inline-size: 100%;
|
||||
@ -127,7 +133,6 @@
|
||||
|
||||
.second-row {
|
||||
min-block-size: $sz-16;
|
||||
padding-right: var(--sp-s);
|
||||
inline-size: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
@ -136,8 +141,9 @@
|
||||
|
||||
.color-name-library {
|
||||
@include use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-secondary);
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.image-download {
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,12 +26,13 @@
|
||||
}
|
||||
|
||||
.geometry-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,12 +26,13 @@
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,15 +26,15 @@
|
||||
}
|
||||
|
||||
.layout-element-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-inline-size: $sz-28;
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,10 +26,11 @@
|
||||
}
|
||||
|
||||
.shadow-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -31,12 +32,13 @@
|
||||
}
|
||||
|
||||
.stroke-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.attributes-content {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -26,24 +27,28 @@
|
||||
}
|
||||
|
||||
.svg-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.attributes-subtitle {
|
||||
@include use-typography("headline-small");
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
block-size: $sz-32;
|
||||
|
||||
span {
|
||||
block-size: $sz-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -33,16 +34,18 @@
|
||||
}
|
||||
|
||||
.text-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: unset;
|
||||
min-block-size: $sz-36;
|
||||
|
||||
:global(.attr-value) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
@extend %copy-button-children;
|
||||
}
|
||||
|
||||
.attributes-content-row {
|
||||
@ -51,8 +54,10 @@
|
||||
border-radius: $br-8;
|
||||
border: $b-1 solid var(--menu-border-color-disabled);
|
||||
margin-block-start: var(--sp-xs);
|
||||
|
||||
.content {
|
||||
@include use-typography("body-small");
|
||||
|
||||
width: 100%;
|
||||
padding: var(--sp-xs) 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
@ -61,6 +66,7 @@
|
||||
&:hover {
|
||||
border: $b-1 solid var(--color-background-tertiary);
|
||||
background-color: var(--menu-background-color);
|
||||
|
||||
.content {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@ -25,12 +26,14 @@
|
||||
}
|
||||
|
||||
.variant-row {
|
||||
@extend .attr-row;
|
||||
@extend %attr-row;
|
||||
|
||||
block-size: fit-content;
|
||||
min-block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@extend .copy-button-children;
|
||||
word-break: break-word;
|
||||
@extend %copy-button-children;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
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