mirror of
https://github.com/penpot/penpot.git
synced 2025-01-30 19:00:10 -05:00
843 lines
13 KiB
SCSS
843 lines
13 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
|
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
|
|
.element-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
.element-icons {
|
|
background-color: $color-gray-60;
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br-small;
|
|
display: flex;
|
|
margin: $x-small;
|
|
|
|
li {
|
|
align-items: center;
|
|
border-right: 1px solid $color-gray-60;
|
|
border-radius: $br-small;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
padding: $small;
|
|
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.element-set {
|
|
border-bottom: 1px solid $color-gray-60;
|
|
color: $color-gray-20;
|
|
margin: 0 $x-small;
|
|
|
|
.element-set-title {
|
|
color: $color-gray-10;
|
|
display: flex;
|
|
font-size: $fs13;
|
|
padding: $small $x-small;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.element-list {
|
|
margin-bottom: $small;
|
|
|
|
li {
|
|
align-items: center;
|
|
border-bottom: 1px solid $color-gray-60;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: $small;
|
|
width: 100%;
|
|
|
|
.list-icon {
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 15px;
|
|
margin-right: $x-small;
|
|
width: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
span {
|
|
color: $color-gray-20;
|
|
font-size: $fs12;
|
|
max-width: 75%;
|
|
overflow-x: 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: $x-small;
|
|
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: bold;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.list-actions {
|
|
display: flex;
|
|
@include animation(0s,.3s,fadeIn);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.element-set-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: $x-small;
|
|
|
|
.input-text {
|
|
background-color: $color-gray-50;
|
|
border: 1px solid transparent;
|
|
border-bottom-color: $color-gray-40;
|
|
color: $color-gray-10;
|
|
font-size: $fs12;
|
|
margin: $x-small;
|
|
padding: $x-small;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
color: lighten($color-gray-10, 8%);
|
|
border-color: $color-primary !important;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-gray-40;
|
|
}
|
|
|
|
}
|
|
|
|
.input-select {
|
|
color: $color-gray-10;
|
|
|
|
&:focus {
|
|
color: lighten($color-gray-10, 8%);
|
|
}
|
|
|
|
option {
|
|
color: $color-gray-60;
|
|
background: $color-white;
|
|
font-size: $fs12;
|
|
}
|
|
}
|
|
|
|
.element-set-subtitle {
|
|
color: $color-gray-10;
|
|
font-size: $fs11;
|
|
width: 12rem;
|
|
}
|
|
|
|
.lock-size {
|
|
cursor: pointer;
|
|
width: 20%;
|
|
|
|
svg {
|
|
fill: $color-gray-20;
|
|
height: 15px;
|
|
width: 15px;
|
|
|
|
&: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 {
|
|
cursor: pointer;
|
|
border: 1px solid $color-gray-40;
|
|
padding: $x-small $big $x-small $x-small;
|
|
position: relative;
|
|
|
|
.dropdown-button {
|
|
position: absolute;
|
|
right: $x-small;
|
|
top: 7px;
|
|
|
|
svg {
|
|
fill: $color-gray-40;
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
font-size: $fs12;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-gray-20;
|
|
}
|
|
|
|
}
|
|
.custom-select-dropdown {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 12;
|
|
max-height: 30rem;
|
|
min-width: 7rem;
|
|
overflow-y: auto;
|
|
|
|
background-color: $color-white;
|
|
border-radius: $br-small;
|
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
|
|
.presets {
|
|
width: 200px;
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
border-color: $color-gray-20;
|
|
}
|
|
|
|
li {
|
|
color: $color-gray-60;
|
|
cursor: pointer;
|
|
font-size: $fs14;
|
|
display: flex;
|
|
padding: $small;
|
|
|
|
span {
|
|
color: $color-gray-20;
|
|
margin-left: auto;
|
|
}
|
|
|
|
&.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 {
|
|
margin: 0;
|
|
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-right: $small;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.dropdown-button {
|
|
position: absolute;
|
|
right: 0;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
&.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: #b1b2b5;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-gray-40;
|
|
}
|
|
}
|
|
}
|
|
|
|
.element-set-content .grid-option-main {
|
|
.editable-select {
|
|
height: 2rem;
|
|
}
|
|
.editable-select svg {
|
|
fill: $color-gray-40;
|
|
}
|
|
.dropdown-button {
|
|
top: 4px;
|
|
}
|
|
.editable-select.input-option .input-text {
|
|
padding: 0;
|
|
padding-top: 0.18rem;
|
|
}
|
|
|
|
.input-element {
|
|
width: 55px;
|
|
margin: 0 0.2rem;
|
|
}
|
|
|
|
.input-text {
|
|
padding-left: 0;
|
|
color: #b1b2b5;
|
|
background-color: transparent;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
.grid-option .custom-select {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.color-th {
|
|
background-color: $color-gray-10;
|
|
border: 1px solid $color-gray-10;
|
|
border-radius: $br-small;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $color-gray-10;
|
|
flex-shrink: 0;
|
|
height: 20px;
|
|
margin: 5px 4px 0 0;
|
|
width: 20px;
|
|
|
|
&.color-name {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&.palette-th {
|
|
align-items: center;
|
|
border: 1px solid $color-gray-30;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $color-primary;
|
|
svg {
|
|
fill: $color-primary;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.presets {
|
|
.custom-select-dropdown {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.row-flex.align-icons {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.align-icons {
|
|
border: 1px solid $color-gray-60;
|
|
border-radius: $br-small;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
margin-left: $small;
|
|
padding: $small;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
span {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 20px;
|
|
justify-content: center;
|
|
margin-right: $small;
|
|
position: relative;
|
|
width: 20px;
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
|
|
&: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%;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.orientation-icon {
|
|
margin-left: $small;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
cursor: pointer;
|
|
height: 20px;
|
|
stroke: $color-gray-40;
|
|
stroke-width: 30px;
|
|
width: 20px;
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
stroke: $color-gray-10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigate-icon {
|
|
background-color: $color-gray-60;
|
|
cursor: pointer;
|
|
margin-left: $small;
|
|
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: $small;
|
|
}
|
|
|
|
.icon-before {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 18px;
|
|
position: relative;
|
|
width: 18px;
|
|
|
|
svg {
|
|
fill: $color-gray-30;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.grid-option {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.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 {
|
|
align-items: center;
|
|
display: flex;
|
|
padding: 0.3rem 0;
|
|
border: 1px solid $color-black;
|
|
border-radius: 4px;
|
|
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: 56px;
|
|
min-width: 56px;
|
|
max-height: 10rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.grid-option-main-actions {
|
|
display: flex;
|
|
visibility: hidden;
|
|
|
|
.grid-option:hover & {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.focus-overlay {
|
|
background: $color-black;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.element-set-content .advanced-options {
|
|
background-color: #303236;
|
|
border-radius: 4px;
|
|
left: -8px;
|
|
padding: 0.5rem;
|
|
position: relative;
|
|
top: 2px;
|
|
width: calc(100% + 16px);
|
|
}
|
|
|
|
.btn-options {
|
|
cursor: pointer;
|
|
border: 1px solid $color-black;
|
|
background: $color-gray-60;
|
|
border-radius: 2px;
|
|
color: $color-gray-20;
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
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;
|
|
padding: 3px;
|
|
border: 1px solid $color-black;
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
background: #1F1F1F;
|
|
}
|
|
}
|
|
|
|
.exports-options {
|
|
.element-set-options-group {
|
|
justify-content: space-between;
|
|
.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;
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
margin-top: 10px;
|
|
}
|
|
}
|