mirror of
https://github.com/penpot/penpot.git
synced 2025-02-24 07:46:13 -05:00
💥 removed old scss files
This commit is contained in:
alonso.torres
Andrey Antukh
parent
eeb2f39ada
commit
39836fc821
8 changed files with 0 additions and 1681 deletions
|
|
@ -1,91 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.dashboard-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: $fs14;
|
||||
padding: $small $medium $small $x-big*2;
|
||||
|
||||
.dashboard-images {
|
||||
flex-basis: 70px;
|
||||
}
|
||||
|
||||
.dashboard-info {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 500px;
|
||||
justify-content: space-around;
|
||||
|
||||
.dashboard-projects {
|
||||
font-weight: bold;
|
||||
margin-right: $medium;
|
||||
}
|
||||
|
||||
.sort-by {
|
||||
margin-left: $small;
|
||||
}
|
||||
|
||||
.input-select {
|
||||
background-color: transparent;
|
||||
border-color: $color-gray-60;
|
||||
font-size: $fs14;
|
||||
margin-bottom: 0;
|
||||
margin-left: $medium;
|
||||
padding: 3px 25px 3px 3px;
|
||||
|
||||
option {
|
||||
color: $color-gray-60;
|
||||
background: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-search {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: $small;
|
||||
|
||||
.input-text {
|
||||
background: $color-gray-50;
|
||||
border: 0;
|
||||
color: $color-gray-60;
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.clear-search {
|
||||
align-items: center;
|
||||
background: $color-gray-50;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0 5px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg);
|
||||
width: 15px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.library-gap {
|
||||
padding: $small $medium $small 270px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,419 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.dashboard-grid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs14;
|
||||
height: 100%;
|
||||
padding: $medium;
|
||||
// ACTIVITY BAR PADDING
|
||||
//padding: $medium 250px $medium $medium;
|
||||
|
||||
.dashboard-title {
|
||||
margin: $medium 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.edit {
|
||||
padding: 5px 10px;
|
||||
background: $color-gray-50;
|
||||
border: none;
|
||||
height: 100%;
|
||||
}
|
||||
.close {
|
||||
padding: 5px 10px;
|
||||
background: $color-gray-50;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edition {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 0;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
margin: 0 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-darker;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-grid-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 60vh;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
|
||||
.dashboard-grid-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
align-items: center;
|
||||
border-radius: $br-medium;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 200px;
|
||||
margin: $medium $medium 0 $medium;
|
||||
max-width: 300px;
|
||||
min-width: 260px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 18%;
|
||||
|
||||
&.small-item {
|
||||
max-width: 12%;
|
||||
min-width: 190px;
|
||||
padding: $medium;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-item-icon {
|
||||
width:90px;
|
||||
height:90px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 0;
|
||||
padding: $small;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs16;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
padding-right: $small;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.date {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs12;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.add-project {
|
||||
border: 2px dashed $color-gray-light;
|
||||
box-shadow: inset 0 0 0 transparent;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
background-color: $color-primary-light;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
font-size: $fs24;
|
||||
padding: $small $medium;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-light;
|
||||
border: 2px solid $color-white;
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// PROJECTS, ELEMENTS & ICONS GRID
|
||||
&.project-th {
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 2px solid lighten($color-gray-60, 12%);
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
||||
h3 {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-th-actions {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
left: 0;
|
||||
justify-content: flex-end;
|
||||
padding: $small;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
height: 14px;
|
||||
margin-right: $x-small;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-light;
|
||||
}
|
||||
|
||||
.project-th-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: $small;
|
||||
|
||||
&.delete {
|
||||
margin-right: 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.edit {
|
||||
margin-right: 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// IMAGES SECTION
|
||||
&.images-th {
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-image {
|
||||
|
||||
svg {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 25%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-data {
|
||||
color: $color-gray;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// STYLES FOR LIBRARIES
|
||||
&.library {
|
||||
padding: $medium $medium $medium 250px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-item-th {
|
||||
background-position: center;
|
||||
background-size: auto 80%;
|
||||
background-repeat: no-repeat;
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 70%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.img-th {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MULTISELECT OPTIONS BAR
|
||||
.multiselect-bar {
|
||||
@include animation(0,.5s,fadeInUp);
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
display: flex;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
padding: $medium;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
.multiselect-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 10%;
|
||||
width: 110px;
|
||||
|
||||
span {
|
||||
margin-right: 1.5rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.delete {
|
||||
|
||||
&:hover {
|
||||
|
||||
svg{
|
||||
fill: $color-danger-light;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.move-item {
|
||||
position: relative;
|
||||
|
||||
.move-list {
|
||||
background-color: $color-gray-10;
|
||||
border-radius: $br-small;
|
||||
bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: -30px;
|
||||
max-height: 260px;
|
||||
overflow-y: scroll;
|
||||
padding: $medium;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
|
||||
li {
|
||||
padding-bottom: $medium;
|
||||
|
||||
&.title {
|
||||
color: $color-gray-darker;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.library-bar {
|
||||
background-color: $color-gray-50;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 250px;
|
||||
|
||||
.library-bar-inside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-top: 60px;
|
||||
|
||||
.library-tabs {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 0;
|
||||
padding-top: 12px;
|
||||
|
||||
li {
|
||||
background-color: darken($color-gray-60, 10%);
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: $fs14;
|
||||
padding: .6rem;
|
||||
text-align: center;
|
||||
width: 118px;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $color-gray-50;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.library-elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(95% - 1rem);
|
||||
margin-bottom: 1rem;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
|
||||
span.element-title {
|
||||
color: $color-gray-dark;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input.element-title {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
background: $color-gray-50;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
height: 20px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.element-subtitle {
|
||||
color: $color-gray-light;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.current {
|
||||
background-color: $color-primary;
|
||||
|
||||
span.element-title,
|
||||
.element-subtitle {
|
||||
color: $color-white;
|
||||
}
|
||||
input.element-title {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.main-bar {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: $x-small $medium;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.main-logo {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
margin: 0 0 0 120px;
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
color: $color-gray-10;
|
||||
padding: 1rem;
|
||||
|
||||
&:hover {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.current {
|
||||
|
||||
a {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-zone {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
margin: $small;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
border: 1px solid $color-gray-60;
|
||||
min-width: 150px;
|
||||
padding: 0 $small;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
||||
li {
|
||||
font-size: $fs13;
|
||||
padding: $small 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.layers-tools {
|
||||
border-top: 1px solid $color-gray-20;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
.layers-tools-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
width: 60%;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.disable {
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
cursor: auto;
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.delete-layer {
|
||||
|
||||
svg {
|
||||
|
||||
&:hover {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.layer-up {
|
||||
|
||||
svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.layer-down {
|
||||
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.layer-top {
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
border-left: 6px solid $color-gray-40;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&.dragging-TODO {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&.open {
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
|
||||
.element-list-body {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list-body {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
transition: none;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 13px;
|
||||
margin-right: 8px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.element-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toggle-content {
|
||||
margin-left: auto;
|
||||
width: 12px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
transform: rotate(90deg);
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
svg { transform: rotate(270deg); }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.group {
|
||||
|
||||
&.open {
|
||||
|
||||
.toggle-content {
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.element-name {
|
||||
min-width: 40px;
|
||||
min-height: 16px;
|
||||
display: block;
|
||||
|
||||
color: $color-gray-20;
|
||||
font-size: $fs13;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selected {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.drag-top {
|
||||
border-top: 40px solid $color-gray-60 !important;
|
||||
}
|
||||
|
||||
&.drag-bottom {
|
||||
border-bottom: 40px solid $color-gray-60 !important;
|
||||
}
|
||||
|
||||
&.drag-inside {
|
||||
border: 2px solid $color-primary !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,279 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.sitemap {
|
||||
|
||||
.project-title {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
padding: $x-small;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs14;
|
||||
font-weight: bold;
|
||||
max-width: 80%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.add-page {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list {
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
margin-right: $x-small;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs14;
|
||||
max-width: 75%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
align-items: center;
|
||||
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 {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.page-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-list-body {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
transition: none;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 13px;
|
||||
margin-right: 8px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.element-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toggle-content {
|
||||
margin-left: auto;
|
||||
width: 12px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
transform: rotate(90deg);
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
svg { transform: rotate(270deg); }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.group {
|
||||
|
||||
&.open {
|
||||
|
||||
.toggle-content {
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.element-name {
|
||||
min-width: 40px;
|
||||
min-height: 16px;
|
||||
display: block;
|
||||
|
||||
color: $color-gray-20;
|
||||
font-size: $fs13;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.selected {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
||||
.element-icon {
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
// TODO: revisit this
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.settings-bar {
|
||||
background-color: $color-gray-50;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 230px;
|
||||
z-index: 10;
|
||||
|
||||
&.settings-bar-left {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.settings-bar-inside {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-top: 50px;
|
||||
height: 100%;
|
||||
|
||||
.tool-window {
|
||||
border-bottom: 1px solid $color-gray-20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
.tool-window-bar {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-20;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 2px $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tool-window-icon {
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
.tool-window-close {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $medium;
|
||||
}
|
||||
|
||||
&#layers {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,292 +0,0 @@
|
|||
// 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>
|
||||
|
||||
.workspace-bar {
|
||||
align-items: center;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
padding: $x-small $medium $x-small 65px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.main-icon {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
|
||||
a {
|
||||
height: 35px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.project-tree-btn {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $x-small $x-small $x-small $medium;
|
||||
width: 164px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 20px;
|
||||
margin-right: $small;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-options {
|
||||
display: flex;
|
||||
|
||||
.options-btn {
|
||||
align-items: center;
|
||||
border-right: 4px double $color-gray-60;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.view-mode {
|
||||
background-color: $color-gray-20;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-white;
|
||||
border-color: $color-gray-60;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options-view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: content;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
|
||||
&.zoom-input {
|
||||
width: 85px;
|
||||
padding: 0 25px;
|
||||
position: relative;
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $color-gray-40;
|
||||
cursor: pointer;
|
||||
color: $color-gray-40;
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
font-size: $fs20;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.add-zoom {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.remove-zoom {
|
||||
padding-top: 4px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.add-zoom,
|
||||
.remove-zoom {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options-btn {
|
||||
align-items: center;
|
||||
border-right: 4px double $color-gray-60;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
margin: 0 $small;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
|
||||
a {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray-10;
|
||||
border-color: $color-gray-60;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue