mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
2521 lines
44 KiB
SCSS
2521 lines
44 KiB
SCSS
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
//
|
|
// Copyright (c) KALEIDOS INC
|
|
|
|
.element-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.element-icons {
|
|
background-color: $color-gray-60;
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
display: flex;
|
|
margin: $size-1;
|
|
|
|
li {
|
|
align-items: center;
|
|
border-right: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
padding: $size-2;
|
|
|
|
svg {
|
|
fill: $color-gray-20;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
background-color: $color-primary;
|
|
|
|
svg {
|
|
fill: $color-white;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.inspect {
|
|
& > :first-child {
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
|
|
.element-set {
|
|
border-bottom: 1px solid $color-gray-60;
|
|
color: $color-gray-20;
|
|
padding: $size-2 $size-1;
|
|
|
|
.element-set-title {
|
|
height: 35px;
|
|
color: $color-gray-20;
|
|
display: flex;
|
|
font-size: $fs14;
|
|
padding: $size-1;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.element-list {
|
|
margin-bottom: $size-2;
|
|
|
|
li {
|
|
align-items: center;
|
|
border-bottom: 1px solid $color-gray-60;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: $size-2;
|
|
width: 100%;
|
|
|
|
.list-icon {
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 15px;
|
|
margin-right: $size-1;
|
|
width: 15px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: $color-gray-20;
|
|
font-size: $fs12;
|
|
max-width: 75%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.list-actions {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: none;
|
|
margin-left: auto;
|
|
|
|
a {
|
|
svg {
|
|
fill: $color-gray-60;
|
|
height: 15px;
|
|
margin-left: $size-1;
|
|
width: 15px;
|
|
|
|
&:hover {
|
|
fill: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.list-icon {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
.list-icon {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: $color-primary;
|
|
font-weight: $fw700;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.list-actions {
|
|
display: flex;
|
|
@include animation(0s, 0.3s, fadeIn);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.element-set-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $size-1;
|
|
width: 100%;
|
|
|
|
.input-text {
|
|
background-color: $color-gray-50;
|
|
border: 1px solid transparent;
|
|
border-bottom-color: $color-gray-40;
|
|
color: $color-white;
|
|
font-size: $fs12;
|
|
margin: $size-1;
|
|
min-width: 0;
|
|
padding: $size-1;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
color: lighten($color-gray-10, 8%);
|
|
border-color: $color-primary !important;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-gray-40;
|
|
}
|
|
|
|
&.error {
|
|
border-color: $color-danger;
|
|
}
|
|
|
|
&[disabled] {
|
|
color: $color-gray-30;
|
|
}
|
|
}
|
|
|
|
.input-select {
|
|
/* This padding is so the text won't overlap the arrow*/
|
|
padding-right: 1rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: $color-gray-10;
|
|
|
|
&:focus {
|
|
color: lighten($color-gray-10, 8%);
|
|
border-color: $color-primary;
|
|
}
|
|
|
|
option {
|
|
color: $color-gray-60;
|
|
background: $color-white;
|
|
font-size: $fs12;
|
|
|
|
&:disabled {
|
|
color: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-checkbox {
|
|
label {
|
|
color: $color-gray-20;
|
|
}
|
|
|
|
label::before {
|
|
background-color: transparent;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
label::after {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
input:checked + label::before {
|
|
border-width: 1px;
|
|
}
|
|
|
|
input:checked + label::after {
|
|
font-size: $fs13;
|
|
}
|
|
}
|
|
|
|
.element-set-subtitle {
|
|
color: $color-gray-20;
|
|
font-size: $fs12;
|
|
width: 64px;
|
|
|
|
&.wide {
|
|
min-width: 75px;
|
|
}
|
|
}
|
|
|
|
.lock-size {
|
|
cursor: pointer;
|
|
margin: auto;
|
|
|
|
svg {
|
|
fill: $color-gray-20;
|
|
height: 14px;
|
|
width: 14px;
|
|
|
|
&:hover {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: unset;
|
|
svg {
|
|
fill: $color-gray-40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.save-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.cancel-btn {
|
|
color: $color-danger;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-select {
|
|
border: 1px solid $color-gray-40;
|
|
border-radius: $br3;
|
|
cursor: pointer;
|
|
padding: $size-1 $size-5 $size-1 $size-1;
|
|
position: relative;
|
|
|
|
.dropdown-button {
|
|
position: absolute;
|
|
right: $size-1;
|
|
top: 7px;
|
|
|
|
svg {
|
|
fill: $color-gray-40;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
font-size: $fs12;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-gray-20;
|
|
}
|
|
|
|
&.no-check {
|
|
.custom-select-dropdown {
|
|
width: 100%;
|
|
min-width: unset;
|
|
.check-icon {
|
|
display: none;
|
|
}
|
|
li.checked-element {
|
|
padding-left: 0.5rem;
|
|
&.is-selected {
|
|
background-color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.opened {
|
|
border: 1px solid $color-primary;
|
|
&:hover,
|
|
&:focus {
|
|
outline: none;
|
|
border: 1px solid $color-primary;
|
|
}
|
|
}
|
|
|
|
.custom-select-dropdown {
|
|
background-color: $color-white;
|
|
border-radius: $br3;
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
left: 0;
|
|
max-height: 30rem;
|
|
min-width: 7rem;
|
|
position: absolute;
|
|
overflow-y: auto;
|
|
top: 30px;
|
|
z-index: 12;
|
|
|
|
.presets {
|
|
width: 200px;
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
border-color: $color-gray-20;
|
|
}
|
|
|
|
li {
|
|
color: $color-gray-60;
|
|
cursor: pointer;
|
|
font-size: $fs14;
|
|
display: flex;
|
|
gap: 0 10px;
|
|
justify-content: flex-start;
|
|
padding: $size-2;
|
|
|
|
span {
|
|
color: $color-gray-20;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.check-icon {
|
|
min-width: 25px;
|
|
color: $color-gray-20;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.dropdown-separator:not(:last-child) {
|
|
border-bottom: 1px solid $color-gray-10;
|
|
}
|
|
|
|
&.dropdown-label:not(:first-child) {
|
|
border-top: 1px solid $color-gray-10;
|
|
}
|
|
|
|
&.dropdown-label span {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-primary-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
& li.checked-element {
|
|
padding-left: 0;
|
|
|
|
& span {
|
|
color: $color-black;
|
|
}
|
|
|
|
& svg {
|
|
visibility: hidden;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: none;
|
|
margin: 0.25rem;
|
|
fill: $color-black;
|
|
}
|
|
|
|
&.is-selected {
|
|
& svg {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editable-select {
|
|
border: 1px solid transparent;
|
|
position: relative;
|
|
height: 38px;
|
|
// margin-left: $size-2;
|
|
max-height: 30px;
|
|
position: relative;
|
|
width: 60%;
|
|
|
|
svg {
|
|
fill: $color-gray-10;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
.input-text {
|
|
left: 0;
|
|
position: absolute;
|
|
top: -1px;
|
|
width: 60%;
|
|
}
|
|
|
|
input.input-text {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.input-select {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-bottom: 1px solid $color-gray-40;
|
|
color: transparent;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
option {
|
|
color: $color-gray-60;
|
|
background: $color-white;
|
|
font-size: $fs12;
|
|
|
|
&:disabled {
|
|
color: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-button {
|
|
position: absolute;
|
|
right: 0;
|
|
padding-right: 4px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&.input-option {
|
|
height: 26px;
|
|
border-bottom: 1px solid #64666a;
|
|
width: 100%;
|
|
margin-left: 0.25rem;
|
|
|
|
.input-text {
|
|
border: none;
|
|
margin: 0;
|
|
width: calc(100% - 12px);
|
|
height: 100%;
|
|
top: auto;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.custom-select-dropdown {
|
|
top: unset;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-gray-40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.element-set-content .border-data {
|
|
&[draggable="true"] {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.element-set-content .grid-option-main {
|
|
.editable-select {
|
|
height: 2rem;
|
|
}
|
|
.editable-select svg {
|
|
fill: $color-gray-40;
|
|
}
|
|
.editable-select.input-option .input-text {
|
|
padding: 0;
|
|
padding-top: 0.18rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.input-element {
|
|
width: 55px;
|
|
margin: 0 0.2rem;
|
|
}
|
|
|
|
.input-text {
|
|
padding-left: 0;
|
|
color: $color-white;
|
|
background-color: transparent;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
.element-set-content .component-row {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $fs12;
|
|
color: $color-gray-10;
|
|
|
|
svg {
|
|
fill: $color-gray-20;
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-right: $size-2;
|
|
}
|
|
|
|
.row-actions {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
fill: $color-gray-20;
|
|
height: 12px;
|
|
margin-right: $size-1;
|
|
width: 12px;
|
|
}
|
|
|
|
.context-menu-items {
|
|
right: 0.5rem;
|
|
left: unset;
|
|
top: 0;
|
|
|
|
.context-menu-action {
|
|
overflow-wrap: break-word;
|
|
min-width: 223px;
|
|
white-space: break-spaces;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid-option .custom-select {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.presets {
|
|
&:focus,
|
|
&:focus-within {
|
|
outline: none;
|
|
border: 1px solid $color-primary;
|
|
}
|
|
.custom-select-dropdown {
|
|
width: 237px;
|
|
|
|
li {
|
|
font-size: $fs12;
|
|
|
|
span {
|
|
font-size: $fs12;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.row-flex.align-icons {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.align-icons {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
margin: $size-2 0 $size-2 $size-2;
|
|
padding: 0 $size-1;
|
|
|
|
&:first-child {
|
|
justify-content: flex-start;
|
|
margin-left: 0;
|
|
}
|
|
|
|
span {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 20px;
|
|
justify-content: center;
|
|
margin-right: $size-2;
|
|
position: relative;
|
|
width: 20px;
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
&:hover,
|
|
&.current {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.element-color-picker {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
margin: 0 4px;
|
|
|
|
.color-picker-body {
|
|
height: 100%;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.color-picker-bar {
|
|
height: 165px;
|
|
position: relative;
|
|
width: 15px;
|
|
|
|
.color-bar-select {
|
|
background-color: $color-gray-50;
|
|
height: 3px;
|
|
left: -4px;
|
|
position: absolute;
|
|
width: 23px;
|
|
transition: none;
|
|
top: 30%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.radius-options,
|
|
.padding-options,
|
|
.margin-options {
|
|
align-items: center;
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px;
|
|
width: 64px;
|
|
|
|
.radius-icon,
|
|
.padding-icon,
|
|
.margin-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
cursor: pointer;
|
|
height: 16px;
|
|
fill: $color-gray-30;
|
|
width: 16px;
|
|
}
|
|
|
|
&:hover,
|
|
&.selected {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.orientation-icon {
|
|
margin-left: $size-2;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
cursor: pointer;
|
|
height: 20px;
|
|
fill: $color-gray-40;
|
|
width: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
fill: $color-gray-10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigate-icon {
|
|
background-color: $color-gray-60;
|
|
cursor: pointer;
|
|
margin-left: $size-2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
svg {
|
|
height: 16px;
|
|
fill: $color-gray-30;
|
|
width: 16px;
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
stroke: $color-gray-10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
align-items: center;
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
&:first-child {
|
|
margin-right: $size-2;
|
|
}
|
|
|
|
.icon-before {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 18px;
|
|
position: relative;
|
|
width: 14px;
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-button {
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
|
|
& svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: $color-gray-20;
|
|
}
|
|
|
|
&:hover svg,
|
|
&.is-active svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
.element-set-content .input-row {
|
|
& .element-set-subtitle {
|
|
width: 5.5rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.grid-option,
|
|
.shadow-option {
|
|
margin-bottom: 0.5rem;
|
|
.advanced-options {
|
|
.row-flex {
|
|
justify-content: flex-end;
|
|
}
|
|
.custom-button {
|
|
left: 0;
|
|
position: absolute;
|
|
top: 12px;
|
|
}
|
|
.element-set-actions-button {
|
|
min-width: auto;
|
|
min-height: auto;
|
|
padding-right: 10px;
|
|
svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.element-set-content .custom-select.input-option {
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.element-set-content .grid-option-main,
|
|
.element-set-content .shadow-option-main {
|
|
align-items: center;
|
|
display: flex;
|
|
padding: 0.3rem 0;
|
|
border: 1px solid $color-black;
|
|
border-radius: $br4;
|
|
height: 48px;
|
|
|
|
&:hover {
|
|
background: $color-gray-60;
|
|
|
|
.custom-select,
|
|
.editable-select,
|
|
input {
|
|
background-color: $color-gray-50;
|
|
}
|
|
}
|
|
|
|
& .custom-select {
|
|
min-width: 4.75rem;
|
|
height: 2rem;
|
|
border-color: transparent;
|
|
border-bottom: 1px solid #65666a;
|
|
max-height: 30px;
|
|
|
|
&:hover {
|
|
border: 1px solid $color-gray-40;
|
|
}
|
|
}
|
|
|
|
& .input-element {
|
|
width: 50px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
& .custom-select-dropdown {
|
|
width: 96px;
|
|
}
|
|
|
|
& .input-option {
|
|
margin-left: 0.5rem;
|
|
|
|
& .custom-select-dropdown {
|
|
width: 5rem;
|
|
min-width: 5rem;
|
|
max-height: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid-option-main-actions,
|
|
.shadow-option-main-actions {
|
|
display: flex;
|
|
visibility: hidden;
|
|
|
|
.grid-option:hover &,
|
|
.shadow-option:hover & {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.focus-overlay {
|
|
background: $color-black;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100%);
|
|
opacity: 0.4;
|
|
z-index: 10;
|
|
display: flex;
|
|
}
|
|
|
|
.advanced-options-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.advanced-options {
|
|
border: 1px solid $color-gray-60;
|
|
background-color: $color-gray-50;
|
|
border-radius: $br4;
|
|
padding: 8px;
|
|
position: relative;
|
|
top: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-options {
|
|
cursor: pointer;
|
|
border: 1px solid $color-black;
|
|
background: $color-gray-60;
|
|
border-radius: $br2;
|
|
color: $color-gray-20;
|
|
font-size: $fs11;
|
|
line-height: $lh-145; // Original value was 16px; 16px/11px = 145.454545455% => $lh-145
|
|
flex-grow: 1;
|
|
padding: 0.25rem 0;
|
|
|
|
&:first-child {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
&:not([disabled]):hover {
|
|
background: $color-primary;
|
|
color: $color-black;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.4;
|
|
cursor: auto;
|
|
}
|
|
}
|
|
|
|
.element-set-options-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 3px;
|
|
border: 1px solid $color-black;
|
|
border-radius: $br4;
|
|
|
|
&:hover {
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
&.selected {
|
|
border: 1px solid $color-primary;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
&.open {
|
|
&:hover {
|
|
background: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.interactions-options {
|
|
&.element-set {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.element-set-options-group {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.exports-options,
|
|
.shadow-options {
|
|
.element-set-options-group {
|
|
.delete-icon {
|
|
display: flex;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.input-element {
|
|
width: 100%;
|
|
flex-shrink: initial;
|
|
}
|
|
|
|
.row-grid-2 {
|
|
grid-column-gap: 1em;
|
|
}
|
|
|
|
.color-info {
|
|
input {
|
|
margin-right: 1em;
|
|
width: 74px;
|
|
&:focus {
|
|
border-color: $color-primary !important;
|
|
color: $color-white;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shadow-options .color-row-wrap {
|
|
margin-left: 6px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.element-set-actions-button {
|
|
display: flex;
|
|
min-width: 30px;
|
|
min-height: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: $color-gray-20;
|
|
stroke: $color-gray-20;
|
|
}
|
|
|
|
&.remove {
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
&:hover svg,
|
|
&.active svg {
|
|
fill: $color-primary;
|
|
stroke: $color-primary;
|
|
}
|
|
|
|
&.actions-inside {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.element-set-label {
|
|
font-size: $fs12;
|
|
padding: 0.5rem;
|
|
color: $color-gray-10;
|
|
}
|
|
|
|
.element-set-actions {
|
|
display: flex;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.row-flex-removable:hover .element-set-actions,
|
|
.element-set-options-group:hover .element-set-actions {
|
|
visibility: visible;
|
|
}
|
|
|
|
.layer-actions {
|
|
visibility: visible;
|
|
}
|
|
|
|
.typography-entry {
|
|
margin: 0.5rem 0.3rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.typography-selection-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex: 1;
|
|
height: 100%;
|
|
|
|
&.is-selectable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.typography-sample {
|
|
font-size: $fs17;
|
|
color: $color-white;
|
|
margin: 0 0.5rem;
|
|
|
|
font-family: sourcesanspro;
|
|
font-style: normal;
|
|
font-weight: $fw400;
|
|
}
|
|
|
|
.typography-name {
|
|
flex-grow: 1;
|
|
font-size: $fs11;
|
|
margin-top: 4px;
|
|
max-width: calc(var(--width, 256px) - 100px);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.element-set-actions-button svg {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
|
|
.spacing-options {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.asset-section {
|
|
.typography-entry {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.element-set-content .font-option,
|
|
.element-set-content .size-option {
|
|
margin: 0.5rem 0;
|
|
}
|
|
.element-set-content .variant-option {
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.row-flex input.adv-typography-name {
|
|
font-size: $fs14;
|
|
color: $color-gray-10;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0;
|
|
background-color: #303236;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.size-option .custom-select-dropdown {
|
|
cursor: pointer;
|
|
max-height: 16rem;
|
|
min-width: 6rem;
|
|
left: initial;
|
|
top: 0;
|
|
}
|
|
|
|
.typography-read-only-data {
|
|
font-size: $fs12;
|
|
color: $color-white;
|
|
|
|
.typography-name {
|
|
font-size: $fs14;
|
|
}
|
|
|
|
.row-flex {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.label {
|
|
color: $color-gray-30;
|
|
|
|
&::after {
|
|
content: ":";
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.go-to-lib-button {
|
|
color: $color-white;
|
|
transition: border 0.3s, color 0.3s;
|
|
text-align: center;
|
|
background: $color-gray-50;
|
|
padding: 0.5rem;
|
|
border-radius: $br2;
|
|
cursor: pointer;
|
|
font-size: $fs14;
|
|
margin-top: 1rem;
|
|
|
|
&:hover {
|
|
background: $color-primary;
|
|
color: $color-black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multiple-typography {
|
|
margin: 0.5rem;
|
|
padding: 0.5rem;
|
|
border: 1px dashed $color-gray-30;
|
|
border-radius: $br4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.multiple-typography-text,
|
|
.multiple-typography-button {
|
|
font-size: $fs12;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.multiple-typography-button {
|
|
cursor: pointer;
|
|
svg {
|
|
transition: fill 0.3s;
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: $color-gray-10;
|
|
}
|
|
|
|
&:hover svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.font-selector {
|
|
background: $color-black;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(100%);
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.font-selector-dropdown {
|
|
background: #303236;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.backend-filters {
|
|
padding: $size-2 $size-4;
|
|
// width: 220px;
|
|
top: 40px;
|
|
right: 20px;
|
|
}
|
|
.backend-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $size-2 0;
|
|
cursor: pointer;
|
|
|
|
.checkbox-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: $size-4;
|
|
height: $size-4;
|
|
border: 1px solid $color-gray-30;
|
|
border-radius: $br3;
|
|
|
|
svg {
|
|
width: 8px;
|
|
display: none;
|
|
height: 8px;
|
|
fill: $color-black;
|
|
}
|
|
}
|
|
|
|
.backend-name {
|
|
margin-left: $size-2;
|
|
color: $color-gray-50;
|
|
}
|
|
|
|
&.selected {
|
|
.checkbox-icon {
|
|
svg {
|
|
display: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding: 4px;
|
|
font-size: $fs12;
|
|
background: $color-gray-50;
|
|
border-radius: $br3;
|
|
color: $color-gray-20;
|
|
border: 1px solid $color-gray-30;
|
|
width: 88%;
|
|
margin: 15px 17px;
|
|
}
|
|
|
|
.title {
|
|
font-size: $fs14;
|
|
margin: 9px 17px;
|
|
}
|
|
|
|
.options {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: $size-2;
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: $color-gray-20;
|
|
}
|
|
|
|
&.active {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fonts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
position: relative;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
hr {
|
|
margin-bottom: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.font-item {
|
|
padding-left: $size-5;
|
|
height: $size-6;
|
|
max-height: $size-6;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
color: $color-gray-10;
|
|
|
|
&.selected {
|
|
background-color: $color-black;
|
|
color: $color-primary;
|
|
|
|
.icon svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-primary;
|
|
color: $color-black;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
// border: 1px solid red;
|
|
width: $size-5;
|
|
}
|
|
|
|
.label {
|
|
font-size: $fs12;
|
|
}
|
|
|
|
svg {
|
|
fill: $color-gray-10;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row-flex.align-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.constraints-widget {
|
|
min-width: 72px;
|
|
min-height: 72px;
|
|
position: relative;
|
|
background-color: $color-gray-60;
|
|
flex-grow: 0;
|
|
|
|
.constraints-box {
|
|
width: 28px;
|
|
height: 28px;
|
|
position: absolute;
|
|
top: 22px;
|
|
left: 22px;
|
|
border: 2px solid $color-gray-50;
|
|
}
|
|
|
|
.constraint-button {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&::after {
|
|
content: " ";
|
|
background-color: $color-gray-30;
|
|
}
|
|
|
|
&.active,
|
|
&:hover {
|
|
&::after {
|
|
background-color: $color-primary;
|
|
}
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
width: 28px;
|
|
height: 22px;
|
|
left: calc(50% - 14px);
|
|
|
|
&::after {
|
|
width: 3px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
|
|
&.top {
|
|
top: 0;
|
|
}
|
|
|
|
&.bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
width: 22px;
|
|
height: 28px;
|
|
top: calc(50% - 14px);
|
|
|
|
&::after {
|
|
width: 15px;
|
|
height: 3px;
|
|
}
|
|
}
|
|
|
|
&.left {
|
|
left: 0;
|
|
}
|
|
|
|
&.right {
|
|
right: 0;
|
|
}
|
|
|
|
&.centerv {
|
|
width: 28px;
|
|
height: 28px;
|
|
left: calc(50% - 14px);
|
|
top: calc(50% - 14px);
|
|
|
|
&::after {
|
|
width: 3px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
|
|
&.centerh {
|
|
width: 28px;
|
|
height: 15px;
|
|
left: calc(50% - 14px);
|
|
top: calc(50% - 7px);
|
|
|
|
&::after {
|
|
width: 15px;
|
|
height: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.constraints-form {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
|
|
.input-select {
|
|
font-size: $fs12;
|
|
margin: 0 $size-1 $size-2 $size-1;
|
|
padding: 0 $size-1;
|
|
}
|
|
|
|
svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: $size-4;
|
|
fill: $color-gray-20;
|
|
}
|
|
|
|
.left-right svg {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.top-bottom svg {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.fix-when {
|
|
font-size: $fs12;
|
|
cursor: pointer;
|
|
display: flex;
|
|
|
|
span {
|
|
margin-left: $size-2;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $color-primary;
|
|
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cap-select {
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
border-bottom-color: $color-gray-40;
|
|
color: $color-gray-10;
|
|
cursor: pointer;
|
|
font-size: $fs12;
|
|
margin: $size-1;
|
|
overflow: hidden;
|
|
padding: $size-1;
|
|
padding-right: 20px;
|
|
position: relative;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
& .cap-select-button {
|
|
svg {
|
|
fill: $color-gray-10;
|
|
height: 11px;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 6px;
|
|
width: 11px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-gray-40;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: $color-primary;
|
|
}
|
|
}
|
|
|
|
.cap-select-dropdown {
|
|
right: 5px;
|
|
top: 30px;
|
|
z-index: 12;
|
|
width: 200px;
|
|
height: 320px;
|
|
position: fixed;
|
|
|
|
& li.separator {
|
|
border-top: 1px solid $color-gray-10;
|
|
}
|
|
|
|
& li img {
|
|
width: 16px;
|
|
margin-right: $size-2;
|
|
}
|
|
}
|
|
|
|
.expand-colors {
|
|
cursor: pointer;
|
|
display: flex;
|
|
|
|
.text {
|
|
color: $color-gray-30;
|
|
font-size: $fs12;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: $color-gray-20;
|
|
stroke: $color-gray-20;
|
|
}
|
|
}
|
|
|
|
.selected-colors {
|
|
.color-data {
|
|
margin-bottom: 0;
|
|
padding-bottom: 5px;
|
|
|
|
svg {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.percentil {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.color-data:hover {
|
|
background-color: $color-gray-60;
|
|
|
|
svg {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-menu,
|
|
.layout-item-menu,
|
|
.layout-grid-item-menu {
|
|
font-family: "worksans", sans-serif;
|
|
svg {
|
|
height: 16px;
|
|
width: 16px;
|
|
fill: $color-gray-30;
|
|
}
|
|
.layout-row {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr;
|
|
margin-bottom: 5px;
|
|
.row-title {
|
|
font-size: $fs12;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
font-family: "worksans", sans-serif;
|
|
|
|
&.justify-content,
|
|
&.align-content,
|
|
&.sizing {
|
|
align-items: flex-start;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
&.align-items-grid,
|
|
&.jusfiy-content-grid {
|
|
align-items: flex-start;
|
|
margin-top: 11px;
|
|
}
|
|
}
|
|
.btn-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 185px;
|
|
|
|
&.wrap {
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
&.justify-content,
|
|
&.align-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.direction,
|
|
.wrap-type,
|
|
.align-items-style,
|
|
.align-self-style,
|
|
.justify-content-style,
|
|
.align-content-style,
|
|
.layout-behavior,
|
|
.absolute {
|
|
display: flex;
|
|
border-radius: $br4;
|
|
border: 1px solid $color-gray-60;
|
|
height: 26px;
|
|
margin-right: 5px;
|
|
flex-grow: 1;
|
|
&.horizontal {
|
|
button svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
button {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-right: 1px solid $color-gray-60;
|
|
color: $color-gray-20;
|
|
&.active,
|
|
&:hover {
|
|
color: $color-primary;
|
|
&.dir {
|
|
color: $color-primary;
|
|
}
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
.dir {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-right: 1px solid $color-gray-60;
|
|
padding: 2px;
|
|
&.row-reverse {
|
|
svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
&.column-reverse {
|
|
svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
&.column {
|
|
svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
&.active,
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
.z-index {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 2px;
|
|
margin-top: -4px;
|
|
svg {
|
|
width: 30px;
|
|
}
|
|
}
|
|
|
|
.edit-mode {
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
border: 1px solid $color-gray-60;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin-left: 5px;
|
|
padding: 0 8px;
|
|
text-align: left;
|
|
width: 120px;
|
|
|
|
button {
|
|
color: $color-gray-30;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
gap: 16px;
|
|
|
|
&.active,
|
|
&:hover {
|
|
color: $color-primary;
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.align-grid-items {
|
|
flex-direction: row;
|
|
gap: 0px;
|
|
margin: 7px 0;
|
|
|
|
.align-items-style {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
&.align-grid-content {
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
margin: 7px 0;
|
|
}
|
|
}
|
|
.position-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
width: 100%;
|
|
max-width: 185px;
|
|
height: 26px;
|
|
border-radius: 4px;
|
|
border: 1px solid $color-gray-60;
|
|
.position-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: $color-gray-20;
|
|
border-right: 1px solid $color-gray-60;
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
&.active,
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.no-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 21px;
|
|
width: 17px;
|
|
svg {
|
|
height: 0.7rem;
|
|
width: 0.7rem;
|
|
}
|
|
}
|
|
|
|
.wrap {
|
|
padding: 1px;
|
|
}
|
|
|
|
.gap-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 7px;
|
|
margin-top: 3px;
|
|
margin-bottom: 8px;
|
|
height: 26px;
|
|
max-width: 166px;
|
|
.gap-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 7px;
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
&.rotated {
|
|
transform: rotate(90deg);
|
|
}
|
|
&.activated {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
input {
|
|
font-size: $fs12;
|
|
min-width: 0;
|
|
padding: 0.25rem;
|
|
height: 20px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: $br3;
|
|
|
|
&.lock {
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
&.active {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: $color-primary;
|
|
svg {
|
|
fill: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.padding-row,
|
|
.margin-row {
|
|
display: grid;
|
|
grid-template-columns: auto 30px;
|
|
max-width: 226px;
|
|
.padding-group,
|
|
.margin-item-group {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
height: 26px;
|
|
.padding-item,
|
|
.margin-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 7px;
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
&.rotated {
|
|
transform: rotate(90deg);
|
|
}
|
|
&.activated {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
input {
|
|
font-size: $fs12;
|
|
min-width: 0;
|
|
padding: 0.25rem;
|
|
width: 70px;
|
|
height: 20px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: $br3;
|
|
|
|
&.lock {
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
&.active {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: $color-primary;
|
|
svg {
|
|
fill: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding-icons,
|
|
.margin-item-icons {
|
|
padding: 0;
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
margin-bottom: 8px;
|
|
margin-top: $br3;
|
|
margin-right: 1px;
|
|
height: 30px;
|
|
width: 30px;
|
|
|
|
.padding-icon,
|
|
.margin-item-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 6px;
|
|
flex-grow: 1;
|
|
border-right: 1px solid $color-gray-60;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&.selected {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
fill: $color-gray-30;
|
|
}
|
|
}
|
|
|
|
:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
height: 26px;
|
|
|
|
.input-element {
|
|
margin: 0;
|
|
margin-top: 3px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-container {
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br3;
|
|
margin: 5px 0;
|
|
.layout-entry {
|
|
display: flex;
|
|
align-items: center;
|
|
color: $color-gray-20;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-info {
|
|
font-size: $fs12;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
&::first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.layout-body {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 7px;
|
|
.selects-wrapper {
|
|
width: 100%;
|
|
margin-left: 12px;
|
|
select {
|
|
text-transform: capitalize;
|
|
}
|
|
option {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.orientation-grid {
|
|
background-color: $color-gray-60;
|
|
.button-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
width: 47px;
|
|
height: 47px;
|
|
border: 1px solid $color-gray-30;
|
|
margin: 12px;
|
|
.orientation {
|
|
background: none;
|
|
border: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
svg {
|
|
fill: none;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
&.rotated {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.icon {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
.icon {
|
|
svg {
|
|
fill: $color-gray-20;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.col {
|
|
.button-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
.orientation {
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
&.row {
|
|
.button-wrapper {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
grid-template-columns: 1fr;
|
|
.orientation {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid-columns {
|
|
border: 1px solid $color-gray-60;
|
|
padding: 5px;
|
|
min-height: 38px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
&:not(:first-child) {
|
|
margin-top: 5px;
|
|
}
|
|
.grid-columns-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
min-height: 36px;
|
|
.columns-info {
|
|
flex-grow: 1;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.expand-icon,
|
|
.add-column {
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&.active,
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-column svg {
|
|
height: 12px;
|
|
width: 12px;
|
|
fill: $color-gray-20;
|
|
}
|
|
}
|
|
.columns-info-wrapper {
|
|
.column-info {
|
|
display: grid;
|
|
grid-template-columns: 35px 1fr 1fr auto;
|
|
background-color: $color-gray-60;
|
|
padding: 3px;
|
|
&:not(:first-child) {
|
|
margin-top: 3px;
|
|
}
|
|
.direction-grid-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 5px;
|
|
}
|
|
input {
|
|
background-color: $color-gray-60;
|
|
}
|
|
.grid-column-value,
|
|
.grid-column-unit {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30px;
|
|
&.active,
|
|
&:focus,
|
|
&:focus-within {
|
|
border-bottom: 1px solid $color-primary;
|
|
}
|
|
}
|
|
.grid-column-unit-selector {
|
|
border: none;
|
|
border-bottom: 1px solid $color-gray-30;
|
|
margin: 0.25rem 0;
|
|
height: 23px;
|
|
width: 100%;
|
|
&:hover {
|
|
border-bottom: 1px solid $color-gray-20;
|
|
}
|
|
}
|
|
|
|
.remove-grid-column {
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 40px;
|
|
svg {
|
|
height: 12px;
|
|
width: 12px;
|
|
fill: $color-gray-20;
|
|
}
|
|
&.active,
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.manage-grid-columns {
|
|
margin-left: 60px;
|
|
margin-bottom: 10px;
|
|
.grid-auto,
|
|
.grid-manual {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
.grid-columns-auto,
|
|
.grid-rows-auto {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
input {
|
|
width: 80%;
|
|
}
|
|
}
|
|
}
|
|
.grid-manual {
|
|
.input-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advanced-ops {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: $fs12;
|
|
color: $color-gray-30;
|
|
border: none;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
.icon {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
svg {
|
|
fill: $color-gray-20;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
.advanced-ops-body {
|
|
.input-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
.input-element {
|
|
width: 100%;
|
|
&::after {
|
|
content: attr(alt);
|
|
width: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.component-annotation {
|
|
background-color: $color-gray-60;
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: 2px;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid $color-gray-50;
|
|
font-size: $fs12;
|
|
color: $color-gray-20;
|
|
padding: 0 10px;
|
|
|
|
&.expandeable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 2.5;
|
|
}
|
|
|
|
.expand {
|
|
svg {
|
|
fill: $color-gray-20;
|
|
width: $size-2;
|
|
height: $size-2;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
display: none;
|
|
cursor: pointer;
|
|
svg {
|
|
fill: $color-gray-20;
|
|
width: $size-4;
|
|
height: $size-4;
|
|
margin-left: 15px;
|
|
&.icon-cross {
|
|
width: $size-3;
|
|
height: $size-3;
|
|
}
|
|
}
|
|
|
|
.icon-tick:hover,
|
|
.icon-pencil:hover {
|
|
fill: $color-primary;
|
|
}
|
|
|
|
.icon-cross:hover,
|
|
.icon-trash:hover {
|
|
fill: $color-danger;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.editing {
|
|
border: 1px solid $color-primary;
|
|
.title .icon {
|
|
display: flex;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
|
|
&.creating {
|
|
textarea {
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.counter {
|
|
text-align: right;
|
|
font-size: $fs11;
|
|
color: $color-gray-30;
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
|
|
// Auto growing text
|
|
.grow-wrap {
|
|
// easy way to plop the elements on top of each other and have them both sized based on the tallest one's height
|
|
display: grid;
|
|
|
|
&:after {
|
|
// The space is needed to preventy jumpy behavior
|
|
content: attr(data-replicated-value) " ";
|
|
white-space: pre-wrap;
|
|
visibility: hidden;
|
|
}
|
|
|
|
textarea {
|
|
background-color: $color-gray-60;
|
|
color: $color-white;
|
|
padding: 10px;
|
|
|
|
border: none;
|
|
overflow: hidden;
|
|
outline: none;
|
|
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
|
|
resize: none; /*remove the resize handle on the bottom right*/
|
|
}
|
|
|
|
textarea,
|
|
&:after {
|
|
/* Identical styling required!! */
|
|
font: inherit;
|
|
font-size: $fs14;
|
|
overflow-wrap: anywhere;
|
|
|
|
padding: 10px;
|
|
|
|
/* Place on top of each other */
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
}
|
|
}
|