Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

fix site map css

Browse source
This commit is contained in:
Juan de la Cruz 2019-12-17 11:52:04 +01:00
parent 07e2fb977c
commit 954b07f924
2 changed files with 304 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

279
frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss Normal file
View file

@ -0,0 +1,279 @@
// 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 $soft-ui-border;
display: flex;
padding: $x-small;
width: 100%;
span {
color: $intense-ui-text;
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: $soft-ui-icons;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
display: flex;
justify-content: center;
margin-left: auto;
padding: $x-small;
svg {
fill: $intense-ui-icons;
height: 16px;
width: 16px;
}
&:hover {
background-color: $dark-ui-bg;
border-color: $soft-ui-border;
}
}
}
.element-list {
li {
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
.page-icon {
svg {
fill: $medium-ui-icons;
height: 15px;
margin-right: $x-small;
width: 15px;
}
}
span {
color: $medium-ui-text;
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: $soft-ui-icons;
height: 15px;
margin-left: $x-small;
width: 15px;
&:hover {
fill: $intense-ui-icons;
}
}
}
}
&:hover {
.page-icon {
svg {
fill: $main-ui-color;
}
}
span {
color: $main-ui-color;
}
}
&.selected {
.page-icon {
svg {
fill: $main-ui-color;
}
}
span {
color: $main-ui-color;
font-weight: bold;
}
}
}
&:hover {
.page-actions {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
display: flex;
padding: $small;
transition: none;
width: 100%;
svg {
fill: $soft-ui-icons;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 62px;
}
.element-icon {
svg {
fill: $medium-ui-icons;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $intense-ui-icons;
transform: rotate(90deg);
width: 10px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $medium-ui-icons;
}
}
}
&.group {
&.open {
.toggle-content {
flex-shrink: 0;
svg {
transform: rotate(270deg);
}
}
}
}
span.element-name {
min-width: 40px;
min-height: 16px;
display: block;
color: $medium-ui-text;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.selected {
.element-icon {
svg {
fill: $main-ui-color;
}
}
span {
color: $main-ui-color;
}
}
.selected {
svg {
fill: $intense-ui-icons;
}
}
&:hover {
border-color: $main-ui-color;
.element-icon {
svg {
fill: $intense-ui-icons;
}
}
span {
color: $intense-ui-text;
}
}
&.dragging {
// TODO: revisit this
background-color: #eee;
}
}
}
}

43
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -9,14 +9,13 @@
.project-title {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
display: flex;
padding: $x-small;
width: 100%;
span {
color: $intense-ui-text;
font-size: $fs14;
font-size: $fs13;
font-weight: bold;
max-width: 80%;
overflow-x: hidden;
@ -62,16 +61,16 @@
svg {
fill: $medium-ui-icons;
height: 15px;
margin-right: $x-small;
width: 15px;
height: 13px;
margin-right: $small;
width: 13px;
}
}
span {
color: $medium-ui-text;
font-size: $fs14;
font-size: $fs13;
max-width: 75%;
overflow-x: hidden;
text-overflow: ellipsis;
@ -86,7 +85,7 @@
a {
svg {
fill: $soft-ui-icons;
fill: $medium-ui-icons;
height: 15px;
margin-left: $x-small;
width: 15px;
@ -122,18 +121,31 @@
.page-icon {
svg {
fill: $main-ui-color;
fill: $soft-ui-icons;
}
}
span {
color: $main-ui-color;
font-weight: bold;
color: $soft-ui-text;
}
}
.selected {
a {
svg {
fill: $soft-ui-icons;
opacity: .6;
&:hover {
fill: $soft-ui-icons;
opacity: 1;
}
}
}
}
}
&:hover {
@ -147,9 +159,8 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
display: flex;
padding: $small;
padding: $x-small $small;
transition: none;
width: 100%;
@ -233,13 +244,13 @@
.element-icon {
svg {
fill: $main-ui-color;
fill: $intense-ui-icons;
}
}
span {
color: $main-ui-color;
color: $intense-ui-text;
}
}
@ -263,10 +274,6 @@
}
span {
color: $intense-ui-text;
}
}
&.dragging {