mirror of
https://github.com/penpot/penpot.git
synced 2025-04-12 23:11:23 -05: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 {
|
||||
border-top: solid 1px $color-gray-60;
|
||||
border-top: solid 1px var(--db-primary);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -4,22 +4,6 @@
|
|||
//
|
||||
// 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
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
|
|
@ -74,16 +58,3 @@ $color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #
|
|||
|
||||
// bg transparent
|
||||
$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],
|
||||
.btn-disabled {
|
||||
background-color: $color-gray-10;
|
||||
|
|
@ -88,40 +56,6 @@ input[type="button"][disabled],
|
|||
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 {
|
||||
|
|
@ -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-element {
|
||||
display: flex;
|
||||
|
|
@ -340,9 +202,7 @@ ul.slider-dots {
|
|||
|
||||
input,
|
||||
select {
|
||||
background-color: $color-white;
|
||||
box-sizing: border-box;
|
||||
color: $color-gray-60;
|
||||
font-family: "worksans", sans-serif;
|
||||
font-size: $fs14;
|
||||
margin-bottom: $size-4;
|
||||
|
|
@ -362,319 +222,6 @@ input[type="checkbox"] {
|
|||
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[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 {
|
||||
background-color: $color-info;
|
||||
color: $color-info-darker;
|
||||
|
|
@ -1156,15 +375,3 @@ input[type="range"]:focus::-ms-fill-upper {
|
|||
-khtml-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 {
|
||||
padding-left: 1rem;
|
||||
gap: 12px;
|
||||
color: var(--color-gray-60);
|
||||
color: var(--db-primary);
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
title (unchecked-get props "title")
|
||||
default (unchecked-get props "default")
|
||||
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)
|
||||
max-value (d/parse-double max-value)
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
:pattern-units "userSpaceOnUse"}
|
||||
[:path {:d "M 1 0 L 0 0 0 1"
|
||||
: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-width (str (/ 1 zoom))}}]]]
|
||||
[:rect {:x (:x vbox)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue