mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 10:37:17 +02:00
✨ Remove unused css var colors
This commit is contained in:
Belén Albeza
parent
595f153d85
commit
540875c41e
6 changed files with 4 additions and 826 deletions
|
|
@ -248,7 +248,7 @@ h4 {
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-top: solid 1px $color-gray-60;
|
border-top: solid 1px var(--db-primary);
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,6 @@
|
||||||
//
|
//
|
||||||
// Copyright (c) KALEIDOS INC
|
// Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
// New UI colors
|
|
||||||
$db-primary: #18181a;
|
|
||||||
$db-secondary: #000000;
|
|
||||||
$db-tertiary: #212426;
|
|
||||||
$db-quaternary: #2e3434;
|
|
||||||
|
|
||||||
$df-primary: #ffffff;
|
|
||||||
$df-secondary: #8f9da3;
|
|
||||||
|
|
||||||
$da-primary: #7efff5;
|
|
||||||
$da-primary-muted: rgba(126, 255, 245, 0.3);
|
|
||||||
$da-secondary: #bb97d8;
|
|
||||||
$da-tertiary: #00d1b8;
|
|
||||||
|
|
||||||
$d-shadow: rgba(0, 0, 0, 0.6);
|
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
$color-white: #ffffff;
|
$color-white: #ffffff;
|
||||||
$color-black: #000000;
|
$color-black: #000000;
|
||||||
|
|
@ -74,16 +58,3 @@ $color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #
|
||||||
|
|
||||||
// bg transparent
|
// bg transparent
|
||||||
$color-dark-bg: rgba(0, 0, 0, 0.4);
|
$color-dark-bg: rgba(0, 0, 0, 0.4);
|
||||||
|
|
||||||
// Transform scss variables into css variables to use them onto cljs files
|
|
||||||
:root {
|
|
||||||
// Secondary colors;
|
|
||||||
|
|
||||||
--color-info: #{$color-info};
|
|
||||||
--color-canvas: #e8e9ea;
|
|
||||||
|
|
||||||
// Gray scale;
|
|
||||||
|
|
||||||
--color-gray-20: #{$color-gray-20};
|
|
||||||
--color-gray-60: #{$color-gray-60};
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -49,38 +49,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
@extend %btn;
|
|
||||||
background: $color-white;
|
|
||||||
border: 1px solid $color-gray-20;
|
|
||||||
color: $color-black;
|
|
||||||
&:hover {
|
|
||||||
background: $color-primary;
|
|
||||||
border-color: $color-primary;
|
|
||||||
color: $color-black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
@extend %btn;
|
|
||||||
background: $color-warning;
|
|
||||||
color: $color-white;
|
|
||||||
&:hover {
|
|
||||||
background: $color-warning-dark;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
@extend %btn;
|
|
||||||
background: $color-danger;
|
|
||||||
color: $color-white;
|
|
||||||
&:hover {
|
|
||||||
background: $color-danger-dark;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="button"][disabled],
|
input[type="button"][disabled],
|
||||||
.btn-disabled {
|
.btn-disabled {
|
||||||
background-color: $color-gray-10;
|
background-color: $color-gray-10;
|
||||||
|
|
@ -88,40 +56,6 @@ input[type="button"][disabled],
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Slider dots
|
|
||||||
|
|
||||||
ul.slider-dots {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
li {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid $color-white;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 12px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 6px;
|
|
||||||
width: 12px;
|
|
||||||
|
|
||||||
&.current,
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dots-purple {
|
|
||||||
li {
|
|
||||||
border-color: $color-complete;
|
|
||||||
|
|
||||||
&.current,
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-complete;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Doted list
|
// Doted list
|
||||||
|
|
||||||
.doted-list {
|
.doted-list {
|
||||||
|
|
@ -146,78 +80,6 @@ ul.slider-dots {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tags
|
|
||||||
|
|
||||||
.tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
background-color: $color-gray-20;
|
|
||||||
border-radius: $br3;
|
|
||||||
color: $color-white;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: $fs14;
|
|
||||||
font-weight: $fw700;
|
|
||||||
margin: 0 $size-2 $size-2 0;
|
|
||||||
padding: 4px 8px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-gray-40;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-primary {
|
|
||||||
background-color: $color-primary;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-primary-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-green {
|
|
||||||
background-color: $color-success;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-success-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-purple {
|
|
||||||
background-color: $color-complete;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-complete-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-orange {
|
|
||||||
background-color: $color-warning;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-warning-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tag-red {
|
|
||||||
background-color: $color-danger;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $color-danger-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input elements
|
// Input elements
|
||||||
.input-element {
|
.input-element {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -340,9 +202,7 @@ ul.slider-dots {
|
||||||
|
|
||||||
input,
|
input,
|
||||||
select {
|
select {
|
||||||
background-color: $color-white;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $color-gray-60;
|
|
||||||
font-family: "worksans", sans-serif;
|
font-family: "worksans", sans-serif;
|
||||||
font-size: $fs14;
|
font-size: $fs14;
|
||||||
margin-bottom: $size-4;
|
margin-bottom: $size-4;
|
||||||
|
|
@ -362,319 +222,6 @@ input[type="checkbox"] {
|
||||||
color: $color-danger;
|
color: $color-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Input text
|
|
||||||
|
|
||||||
.input-text {
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid transparent;
|
|
||||||
background-color: $color-white;
|
|
||||||
box-shadow: none;
|
|
||||||
outline: none;
|
|
||||||
padding: $size-2 $size-5 $size-2 $size-2;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@include placeholder {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $color-gray-40;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
@include placeholder {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background-color: $color-success-lighter;
|
|
||||||
border-color: $color-success;
|
|
||||||
color: $color-success-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background-color: $color-danger-lighter;
|
|
||||||
border-color: $color-danger;
|
|
||||||
color: $color-danger-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Element-name
|
|
||||||
|
|
||||||
input.element-name {
|
|
||||||
background-color: $color-white;
|
|
||||||
border: 1px solid $color-gray-40;
|
|
||||||
border-radius: $br3;
|
|
||||||
color: $color-gray-60;
|
|
||||||
font-size: $fs12;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 3px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input select
|
|
||||||
|
|
||||||
.input-select {
|
|
||||||
@extend .input-text;
|
|
||||||
background-image: url("/images/icons/arrow-down-white.svg");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: calc(100% - 4px) 48%;
|
|
||||||
background-size: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
padding: $size-1 $size-5 $size-1 $size-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input radio
|
|
||||||
|
|
||||||
.input-radio,
|
|
||||||
.input-checkbox {
|
|
||||||
align-items: center;
|
|
||||||
color: $color-gray-40;
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-left: 0px;
|
|
||||||
|
|
||||||
label {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: $fs12;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
border: 1px solid $color-gray-30;
|
|
||||||
box-shadow: inset 0 0 0 0 $color-primary;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.column {
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio {
|
|
||||||
label {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-radius: $br99;
|
|
||||||
transition:
|
|
||||||
box-shadow 0.2s linear 0s,
|
|
||||||
color 0.2s linear 0s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"]:checked {
|
|
||||||
& + label {
|
|
||||||
&:before {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-gray-20;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="radio"][disabled] {
|
|
||||||
& + label {
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[type="radio"]:checked + label:before {
|
|
||||||
.input-radio.radio-success & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio.radio-primary & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio.radio-info & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio.radio-warning & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio.radio-danger & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-radio.radio-complete & {
|
|
||||||
box-shadow: inset 0 0 0 5px $color-complete;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input checkbox
|
|
||||||
|
|
||||||
.input-checkbox {
|
|
||||||
input[type="radio"][disabled] {
|
|
||||||
& + label {
|
|
||||||
&:after {
|
|
||||||
background-color: $color-gray-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
transition:
|
|
||||||
border 0.2s linear 0s,
|
|
||||||
color 0.2s linear 0s;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 1.4px;
|
|
||||||
border-radius: $br3;
|
|
||||||
transition:
|
|
||||||
border 0.2s linear 0s,
|
|
||||||
color 0.2s linear 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: absolute;
|
|
||||||
left: 3.2px;
|
|
||||||
top: 0;
|
|
||||||
font-size: $fs12;
|
|
||||||
transition:
|
|
||||||
border 0.2s linear 0s,
|
|
||||||
color 0.2s linear 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
border-radius: $br3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.checkbox-circle {
|
|
||||||
label {
|
|
||||||
&:after {
|
|
||||||
border-radius: $br99;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-radius: $br99;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked {
|
|
||||||
& + label {
|
|
||||||
&:before {
|
|
||||||
border-width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "✓";
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: $fs16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"][disabled] {
|
|
||||||
& + label {
|
|
||||||
opacity: 0.65;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
background-color: #eceff3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"][indeterminate] {
|
|
||||||
& + label {
|
|
||||||
&::after {
|
|
||||||
content: "?";
|
|
||||||
left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
label {
|
|
||||||
margin-right: 35px;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
right: -35px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked {
|
|
||||||
& + label {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "✓";
|
|
||||||
position: absolute;
|
|
||||||
right: -27px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked + label {
|
|
||||||
.input-checkbox.check-success &:before {
|
|
||||||
border-color: $color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-primary &:before {
|
|
||||||
border-color: $color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-complete &:before {
|
|
||||||
border-color: $color-complete;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-warning &:before {
|
|
||||||
border-color: $color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-danger &:before {
|
|
||||||
border-color: $color-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-info &:before {
|
|
||||||
border-color: $color-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-checkbox.check-success &::after,
|
|
||||||
.input-checkbox.check-primary &::after,
|
|
||||||
.input-checkbox.check-complete &::after,
|
|
||||||
.input-checkbox.check-warning &::after,
|
|
||||||
.input-checkbox.check-danger &::after,
|
|
||||||
.input-checkbox.check-info &::after {
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input slidebar
|
// Input slidebar
|
||||||
|
|
||||||
input[type="range"] {
|
input[type="range"] {
|
||||||
|
|
@ -805,334 +352,6 @@ input[type="range"]:focus::-ms-fill-upper {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tooltip
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
background-color: $color-white;
|
|
||||||
border-radius: $br3;
|
|
||||||
color: $color-gray-60;
|
|
||||||
content: attr(alt);
|
|
||||||
font-size: $fs12;
|
|
||||||
font-weight: $fw700;
|
|
||||||
padding: $size-1;
|
|
||||||
position: absolute;
|
|
||||||
left: 130%;
|
|
||||||
text-align: center;
|
|
||||||
top: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 20;
|
|
||||||
@include animation(0.3s, 0.6s, fadeIn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// the default is the `right`
|
|
||||||
&.tooltip-bottom {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
left: 0;
|
|
||||||
top: 130%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-expand {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-bottom-left {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
left: unset;
|
|
||||||
right: 0;
|
|
||||||
top: 130%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-top {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
top: -165%;
|
|
||||||
left: -60%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-right {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
top: 15%;
|
|
||||||
left: 120%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-left {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
left: unset;
|
|
||||||
right: 130%;
|
|
||||||
top: 15%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.tooltip-hover {
|
|
||||||
&:hover {
|
|
||||||
&::after {
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-white;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: $br0;
|
|
||||||
color: $color-gray-60;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
white-space: normal;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Messages
|
|
||||||
|
|
||||||
.banner {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background-color: $color-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background-color: $color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
background-color: $color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
background-color: $color-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
@include animation(0, 0.6s, fadeOutUp);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-white;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
&.bottom-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
margin-top: $size-4;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.inline-actions {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
margin-left: $size-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: $color-info;
|
|
||||||
display: inline;
|
|
||||||
margin: 0;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.35;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $color-black;
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fixed {
|
|
||||||
border-radius: $br3;
|
|
||||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
height: 48px;
|
|
||||||
max-width: 1000px;
|
|
||||||
min-width: 500px;
|
|
||||||
position: fixed;
|
|
||||||
padding-left: 16px;
|
|
||||||
top: 16px;
|
|
||||||
right: 16px;
|
|
||||||
z-index: 40;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding-right: 64px;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-right: $size-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
color: $color-white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: $fs14;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.floating,
|
|
||||||
&.inline {
|
|
||||||
min-height: 40px;
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
padding: $size-2;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
color: $color-black;
|
|
||||||
display: flex;
|
|
||||||
font-size: $fs14;
|
|
||||||
padding: $size-2;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 10px 15px;
|
|
||||||
min-height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
.content {
|
|
||||||
background-color: lighten($color-danger, 30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
.content {
|
|
||||||
background-color: lighten($color-success, 30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
.content {
|
|
||||||
background-color: lighten($color-warning, 30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
.content {
|
|
||||||
background-color: lighten($color-info, 30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.floating {
|
|
||||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18);
|
|
||||||
position: absolute;
|
|
||||||
top: 70px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 40rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
border: 1px solid $color-danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
border: 1px solid $color-success;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
border: 1px solid $color-warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
border: 1px solid $color-info;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.inline {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-bezier {
|
|
||||||
fill: $color-danger;
|
|
||||||
stroke: $color-danger-dark;
|
|
||||||
stroke-width: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
fill: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-inline {
|
.message-inline {
|
||||||
background-color: $color-info;
|
background-color: $color-info;
|
||||||
color: $color-info-darker;
|
color: $color-info-darker;
|
||||||
|
|
@ -1156,15 +375,3 @@ input[type="range"]:focus::-ms-fill-upper {
|
||||||
-khtml-user-drag: element;
|
-khtml-user-drag: element;
|
||||||
-webkit-user-drag: element;
|
-webkit-user-drag: element;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dnd-over > .element-list-body {
|
|
||||||
border: 1px solid white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dnd-over-top {
|
|
||||||
border-top: 1px solid white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dnd-over-bot {
|
|
||||||
border-bottom: 1px solid white !important;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -279,7 +279,7 @@ $height-palette-max: 80px;
|
||||||
.viewport-actions-container {
|
.viewport-actions-container {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
color: var(--color-gray-60);
|
color: var(--db-primary);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
title (unchecked-get props "title")
|
title (unchecked-get props "title")
|
||||||
default (unchecked-get props "default")
|
default (unchecked-get props "default")
|
||||||
nillable? (unchecked-get props "nillable")
|
nillable? (unchecked-get props "nillable")
|
||||||
class (d/nilv (unchecked-get props "className") "input-text")
|
class (d/nilv (unchecked-get props "className") "")
|
||||||
|
|
||||||
min-value (d/parse-double min-value)
|
min-value (d/parse-double min-value)
|
||||||
max-value (d/parse-double max-value)
|
max-value (d/parse-double max-value)
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
:pattern-units "userSpaceOnUse"}
|
:pattern-units "userSpaceOnUse"}
|
||||||
[:path {:d "M 1 0 L 0 0 0 1"
|
[:path {:d "M 1 0 L 0 0 0 1"
|
||||||
:style {:fill "none"
|
:style {:fill "none"
|
||||||
:stroke (if (dbg/enabled? :pixel-grid) "red" "var(--color-info)")
|
:stroke (if (dbg/enabled? :pixel-grid) "red" "var(--status-color-info-500)")
|
||||||
:stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
|
:stroke-opacity (if (dbg/enabled? :pixel-grid) 1 "0.2")
|
||||||
:stroke-width (str (/ 1 zoom))}}]]]
|
:stroke-width (str (/ 1 zoom))}}]]]
|
||||||
[:rect {:x (:x vbox)
|
[:rect {:x (:x vbox)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue