mirror of
https://github.com/penpot/penpot.git
synced 2025-08-04 05:18:24 +02:00
💄 Add new UI at modals
This commit is contained in:
Eva
alonso.torres
parent
59162e4f80
commit
6d64feda36
70 changed files with 4908 additions and 1138 deletions
|
|
@ -66,7 +66,8 @@
|
|||
}
|
||||
}
|
||||
&:global(.disabled),
|
||||
&[disabled] {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
background-color: var(--button-background-color-disabled);
|
||||
border: $s-1 solid var(--button-border-color-disabled);
|
||||
color: var(--button-foreground-color-disabled);
|
||||
|
|
@ -107,7 +108,8 @@
|
|||
}
|
||||
}
|
||||
&:global(.disabled),
|
||||
&[disabled] {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
background-color: var(--button-background-color-disabled);
|
||||
border: $s-1 solid var(--button-border-color-disabled);
|
||||
color: var(--button-foreground-color-disabled);
|
||||
|
|
@ -147,7 +149,8 @@
|
|||
}
|
||||
}
|
||||
&:global(.disabled),
|
||||
&[disabled] {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
color: var(--button-foreground-color-disabled);
|
||||
cursor: unset;
|
||||
pointer-events: none;
|
||||
|
|
@ -202,9 +205,9 @@
|
|||
.button-disabled {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
background-color: var(--button-disabled-background-color-rest);
|
||||
border: $s-1 solid var(--button-disabled-border-color-rest);
|
||||
color: var(--button-disabled-foreground-color-rest);
|
||||
background-color: var(--button-background-color-disabled);
|
||||
border: $s-1 solid var(--button-border-color-disabled);
|
||||
color: var(--button-foreground-color-disabled);
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
|
|
@ -254,7 +257,6 @@
|
|||
}
|
||||
|
||||
// INPUTS
|
||||
|
||||
.input-base {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
|
|
@ -313,9 +315,11 @@
|
|||
input {
|
||||
@extend .input-base;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
color: var(--input-foreground-color);
|
||||
|
|
@ -327,9 +331,48 @@
|
|||
}
|
||||
}
|
||||
|
||||
.input-element-label {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
input {
|
||||
@extend .input-base;
|
||||
padding-left: $s-8;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: $s-32;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--input-background-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
&:hover {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:active {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border: 1px solid var(--input-border-color-disabled);
|
||||
border: $s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
input {
|
||||
pointer-events: none;
|
||||
|
|
@ -348,17 +391,40 @@
|
|||
min-width: $s-16;
|
||||
min-height: $s-16;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--input-background-color);
|
||||
background-color: var(--input-checkbox-background-color-rest);
|
||||
border: $s-1 solid var(--input-checkbox-background-color-rest);
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--input-checkbox-border-color-hover);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--input-checkbox-border-color-focus);
|
||||
}
|
||||
&:global(.checked) {
|
||||
background-color: var(--input-border-color-active);
|
||||
border-color: var(--input-checkbox-border-color-active);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--input-details-color);
|
||||
}
|
||||
}
|
||||
&:global(.intermediate) {
|
||||
background-color: var(--input-checkbox-background-color-intermediate);
|
||||
border-color: var(--input-checkbox-border-color-active);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--input-details-color);
|
||||
}
|
||||
}
|
||||
&:global(.unchecked) {
|
||||
background-color: var(--input-checkbox-background-color-rest);
|
||||
border: $s-1 solid var(--input-checkbox-background-color-rest);
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
|
|
@ -376,6 +442,53 @@
|
|||
input {
|
||||
margin: 0;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
border-color: var(--input-checkbox-border-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
label {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-height: $s-16;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .input-base;
|
||||
@include titleTipography;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
min-height: $s-32;
|
||||
margin-top: $s-8;
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-background-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
&:focus-within,
|
||||
&:active {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
&:global(.disabled) {
|
||||
@extend .disabled-input;
|
||||
}
|
||||
|
||||
&:global(.invalid) {
|
||||
input {
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -392,6 +505,83 @@
|
|||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
.modal-overlay-base {
|
||||
@include flexCenter;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: $z-index-modal;
|
||||
background-color: var(--color-background-subtle);
|
||||
}
|
||||
|
||||
.modal-container-base {
|
||||
position: relative;
|
||||
padding: $s-32;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
min-width: $s-364;
|
||||
min-height: $s-192;
|
||||
max-width: $s-512;
|
||||
max-height: $s-512;
|
||||
}
|
||||
|
||||
.modal-close-btn-base {
|
||||
@extend .button-tertiary;
|
||||
position: absolute;
|
||||
top: $s-8;
|
||||
right: $s-6;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-hint-base {
|
||||
@include titleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
border-top: $s-1 solid var(--modal-hint-border-color);
|
||||
border-bottom: $s-1 solid var(--modal-hint-border-color);
|
||||
}
|
||||
|
||||
.modal-action-btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.modal-cancel-btn {
|
||||
@extend .button-secondary;
|
||||
@include tabTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-accept-btn {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-danger-btn {
|
||||
@extend .button-primary;
|
||||
@include tabTitleTipography;
|
||||
padding: $s-8 $s-24;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
margin: 0;
|
||||
background-color: var(--modal-button-background-color-error);
|
||||
border: $s-1 solid var(--modal-button-background-color-error);
|
||||
color: var(--modal-button-foreground-color-error);
|
||||
}
|
||||
|
||||
// UI ELEMENTS
|
||||
.asset-element {
|
||||
@include titleTipography;
|
||||
|
|
@ -641,3 +831,13 @@
|
|||
background-color: var(--menu-background-color);
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
@include titleTipography;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: normal;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
|
||||
// NOTIFICATION
|
||||
--dark-ok-color: var(--strong-green);
|
||||
--dark-warning-color: #ff9b49;
|
||||
--dark-warning-color: #ff6432;
|
||||
--dark-pending-color: var(--lilac);
|
||||
--dark-error-color: #ff4986;
|
||||
--dark-error-color: #ec1f1f;
|
||||
|
||||
// LIGHT
|
||||
--light-gray-1: #fff;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
.light,
|
||||
.default {
|
||||
// BASE COLORS
|
||||
--canvas-background-color: var(--color-background-primary);
|
||||
--canvas-fill-color: var(--canvas-color);
|
||||
|
||||
|
|
@ -15,7 +16,6 @@
|
|||
--panel-title-background-color: var(--color-background-secondary);
|
||||
|
||||
// BUTTONS
|
||||
|
||||
--button-foreground-hover: var(--color-accent-primary);
|
||||
--button-background-color-focus: var(--color-background-secondary);
|
||||
--button-foreground-color-focus: var(--color-foreground-primary);
|
||||
|
|
@ -88,22 +88,19 @@
|
|||
--constraint-widget-background-color: var(--color-background-tertiary);
|
||||
--constraint-center-area-background-color: var(--color-background-primary);
|
||||
|
||||
// ICONS
|
||||
--icon-foreground: var(--color-foreground-secondary);
|
||||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
|
||||
--link-foreground-color: var(--color-accent-primary);
|
||||
|
||||
// TABS
|
||||
--tab-background-color-hover: var(--color-background-primary);
|
||||
--tab-background-color-selected: var(--color-background-quaternary);
|
||||
--tab-foreground-color: var(--color-foreground-secondary);
|
||||
--tab-foreground-color-hover: var(--color-foreground-primary);
|
||||
--tab-foreground-color-selected: var(--color-accent-primary);
|
||||
|
||||
// SECTION TITLE
|
||||
--title-background-color: var(--color-background-primary);
|
||||
--title-foreground-color: var(--color-foreground-secondary);
|
||||
--title-foreground-color-hover: var(--color-foreground-primary);
|
||||
|
||||
// LAYER ELEMENT
|
||||
--layer-row-background-color: var(--color-background-primary);
|
||||
--layer-row-background-color-hover: var(--color-background-secondary);
|
||||
--layer-row-background-color-selected: var(--color-background-quaternary);
|
||||
|
|
@ -118,9 +115,26 @@
|
|||
--layer-child-row-foreground-color: var(--color-foreground-secondary);
|
||||
--layer-row-component-foreground-color: var(--color-accent-secondary);
|
||||
|
||||
--search-bar-background-color: var(--color-background-primary);
|
||||
--search-bar-input-background-color: var(--color-background-tertiary);
|
||||
--search-bar-input-border-color: var(--color-background-tertiary);
|
||||
// PALETTE & COLOR BULLET
|
||||
--palette-background-color: var(--color-background-primary);
|
||||
--palette-btn-background-color-selected: var(--color-background-secondary);
|
||||
--palette-btn-border-color-selected: var(--color-background-quaternary);
|
||||
--palette-btn-foreground-color-selected: var(--color-accent-primary);
|
||||
--palette-text-color: var(--color-foreground-secondary);
|
||||
--palette-text-color-selected: var(--color-foreground-primary);
|
||||
--palette-text-background-color: var(--color-background-tertiary);
|
||||
--palette-text-background-color-hover: var(--color-background-quaternary);
|
||||
--palette-button-shadow-initial: var(--color-background-primary);
|
||||
--palette-button-shadow-final: transparent;
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
|
||||
// ICONS
|
||||
--icon-foreground: var(--color-foreground-secondary);
|
||||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
|
||||
// INPUTS, SELECTS, DROPDOWNS
|
||||
--input-background-color: var(--color-background-tertiary);
|
||||
|
|
@ -136,7 +150,14 @@
|
|||
--input-background-color-disabled: var(--color-background-primary);
|
||||
--input-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--input-border-color-disabled: var(--color-background-quaternary);
|
||||
--input-border-color-error: var(--error-color);
|
||||
--input-details-color: var(--color-background-primary);
|
||||
--input-checkbox-background-color-rest: var(--color-background-quaternary);
|
||||
--input-checkbox-border-color-active: var(--color-background-quaternary);
|
||||
--input-checkbox-border-color-focus: var(--color-accent-primary);
|
||||
--input-checkbox-border-color: var(--color-background-secondary);
|
||||
--input-checkbox-border-color-hover: var(--color-accent-primary-muted);
|
||||
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
|
||||
|
||||
--menu-background-color: var(--color-background-tertiary);
|
||||
--menu-foreground-color: var(--color-foreground-primary);
|
||||
|
|
@ -156,32 +177,12 @@
|
|||
--menu-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--menu-border-color-disabled: var(--color-background-quaternary);
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
|
||||
--tag-background-color: var(--color-accent-primary);
|
||||
|
||||
--palette-background-color: var(--color-background-primary);
|
||||
--palette-btn-background-color-selected: var(--color-background-secondary);
|
||||
--palette-btn-border-color-selected: var(--color-background-quaternary);
|
||||
--palette-btn-foreground-color-selected: var(--color-accent-primary);
|
||||
--palette-text-color: var(--color-foreground-secondary);
|
||||
--palette-text-color-selected: var(--color-foreground-primary);
|
||||
--palette-text-background-color: var(--color-background-tertiary);
|
||||
--palette-text-background-color-hover: var(--color-background-quaternary);
|
||||
--palette-button-shadow-initial: var(--color-background-primary);
|
||||
--palette-button-shadow-final: transparent;
|
||||
|
||||
--context-menu-background-color: var(--color-background-tertiary);
|
||||
--context-menu-foreground-color: var(--color-foreground-secondary);
|
||||
--context-menu-background-color-selected: var(--color-background-quaternary);
|
||||
--context-menu-foreground-color-selected: var(--color-foreground-primary);
|
||||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
// ASSETS
|
||||
--assets-title-background-color: var(--color-background-primary);
|
||||
--assets-item-background-color: var(--color-background-tertiary);
|
||||
--assets-item-background-color-hover: var(--color-background-quaternary);
|
||||
|
|
@ -220,19 +221,10 @@
|
|||
--empty-message-background-color: var(--color-background-tertiary);
|
||||
--empty-message-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--status-ok-background-color: var(--ok-color);
|
||||
--status-warning-background-color: var(--warning-color);
|
||||
--status-pending-background-color: var(--pending-color);
|
||||
--status-error-background-color: var(--error-color);
|
||||
--status-icon-foreground-color: var(--color-background-primary);
|
||||
|
||||
--user-count-background-color: var(--color-background-secondary);
|
||||
--user-count-foreground-color: var(--color-accent-primary);
|
||||
|
||||
--modal-background-color: var(--color-background-primary);
|
||||
--modal-foreground-color: var(--color-foreground-primary);
|
||||
--modal-foreground-color-secondary: var(--color-foreground-secondary);
|
||||
|
||||
// COLORPICKER
|
||||
--colorpicker-details-color: var(--color-background-quaternary);
|
||||
--colorpicker-details-color-selected: var(--color-accent-primary);
|
||||
--colorpicker-handlers-color: var(--color-foreground-primary);
|
||||
|
|
@ -259,4 +251,43 @@
|
|||
--grid-editor-line-color: var(--color-foreground-tertiary);
|
||||
--grid-editor-plus-btn-foreground: var(--white);
|
||||
--grid-editor-plus-btn-background: var(--color-foreground-tertiary);
|
||||
|
||||
// MODALS
|
||||
--modal-background-color: var(--color-background-primary);
|
||||
--modal-title-foreground-color: var(--color-foreground-primary);
|
||||
--modal-text-foreground-color: var(--color-foreground-secondary);
|
||||
--modal-hint-border-color: var(--color-background-quaternary);
|
||||
--modal-button-background-color-error: var(--error-color);
|
||||
--modal-button-foreground-color-error: var(--color-foreground-primary);
|
||||
--modal-link-foreground-color: var(--color-accent-primary);
|
||||
--modal-border-color: var(--color-background-quaternary);
|
||||
|
||||
// ALERTS & STATUS
|
||||
--alert-background-color-ok: var(--ok-color);
|
||||
--alert-foreground-color-ok: var(--color-background-secondary);
|
||||
--alert-background-color-warning: var(--warning-color);
|
||||
--alert-foreground-color-warning: var(--color-foreground-primary);
|
||||
--alert-background-color-error: var(--error-color);
|
||||
--alert-foreground-color-error: var(--color-foreground-primary);
|
||||
--alert-background-color-neutral: var(--color-background-quaternary);
|
||||
--alert-foreground-color-neutral: var(--color-foreground-secondary);
|
||||
--alert-foreground-color-neutral-active: var(--color-foreground-primary);
|
||||
|
||||
--status-ok-background-color: var(--ok-color);
|
||||
--status-warning-background-color: var(--warning-color);
|
||||
--status-pending-background-color: var(--pending-color);
|
||||
--status-error-background-color: var(--error-color);
|
||||
--status-icon-foreground-color: var(--color-background-primary);
|
||||
|
||||
// INTERFACE ELEMENTS
|
||||
--search-bar-background-color: var(--color-background-primary);
|
||||
--search-bar-input-background-color: var(--color-background-tertiary);
|
||||
--search-bar-input-border-color: var(--color-background-tertiary);
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
|
||||
--tag-background-color: var(--color-accent-primary);
|
||||
|
||||
--link-foreground-color: var(--color-accent-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,24 +7,15 @@
|
|||
@use "sass:math";
|
||||
@import "common/dependencies/mixin";
|
||||
|
||||
// Font sizes
|
||||
$fs10: 0.625rem;
|
||||
$fs-11: 0.688rem;
|
||||
$fs12: 0.75rem;
|
||||
$fs14: 0.875rem;
|
||||
|
||||
// Typography scale
|
||||
$fs-base: 16;
|
||||
|
||||
$fs-9: math.div(9, $fs-base) + rem;
|
||||
$fs-10: math.div(10, $fs-base) + rem;
|
||||
$fs-11: 0.688rem;
|
||||
$fs-12: math.div(12, $fs-base) + rem;
|
||||
$fs-14: math.div(14, $fs-base) + rem;
|
||||
$fs-16: math.div(16, $fs-base) + rem;
|
||||
$fs-19: math.div(19, $fs-base) + rem;
|
||||
$fs-25: math.div(25, $fs-base) + rem;
|
||||
$fs-33: math.div(33, $fs-base) + rem;
|
||||
$fs-44: math.div(44, $fs-base) + rem;
|
||||
$fs-24: math.div(24, $fs-base) + rem;
|
||||
|
||||
// Font weight
|
||||
$fw400: 400; // Regular (CSS value: 'normal')
|
||||
|
|
|
|||
|
|
@ -49,13 +49,20 @@
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin titleBigTipography {
|
||||
@mixin medTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-14;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin bigTitleTipography {
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs-24;
|
||||
font-weight: $fw400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@mixin textEllipsis {
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -7,3 +7,7 @@
|
|||
@mixin menuShadow {
|
||||
box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
|
||||
}
|
||||
|
||||
@mixin alertShadow {
|
||||
box-shadow: 0px $s-4 $s-4 var(--menu-shadow-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,12 +70,17 @@ $s-284: calc(var(--s-4) * 71);
|
|||
$s-300: calc(var(--s-4) * 75);
|
||||
$s-320: calc(var(--s-4) * 80);
|
||||
$s-348: calc(var(--s-4) * 87);
|
||||
$s-356: calc(var(--s-4) * 89);
|
||||
$s-364: calc(var(--s-4) * 91);
|
||||
$s-380: calc(var(--s-4) * 95);
|
||||
$s-400: calc(var(--s-4) * 100);
|
||||
$s-408: calc(var(--s-4) * 102);
|
||||
$s-440: calc(var(--s-4) * 110);
|
||||
$s-480: calc(var(--s-4) * 120);
|
||||
$s-500: calc(var(--s-4) * 125);
|
||||
$s-512: calc(var(--s-4) * 128);
|
||||
$s-520: calc(var(--s-4) * 130);
|
||||
$s-640: calc(var(--s-4) * 160);
|
||||
$s-664: calc(var(--s-4) * 166);
|
||||
$s-712: calc(var(--s-4) * 178);
|
||||
$s-736: calc(var(--s-4) * 184);
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ $z-index-4: 4; // modal
|
|||
$z-index-10: 10;
|
||||
$z-index-20: 20;
|
||||
$z-index-modal: 30; // When refactor finish we can reduce this number,
|
||||
$z-index-alert: 40; // When refactor finish we can reduce this number,
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@
|
|||
|
||||
.slider-selector.opacity {
|
||||
grid-area: "opacity";
|
||||
align-self: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1522,7 +1522,7 @@
|
|||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
row-gap: 1.5rem;
|
||||
.custom-input {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue