Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 08:51:32 -05:00
Code Issues Activity

fix sitemap sidebar css

Browse source
This commit is contained in:
Juan de la Cruz 2019-12-17 13:23:53 +01:00
parent 954b07f924
commit 5c17c9b98d
3 changed files with 35 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/dependencies/uxbox-light.scss
View file

@ -21,7 +21,7 @@ $ui-flavour: $color-gray;
// Background colors
$primary-ui-bg: $color-gray-50;
$secondary-ui-bg: $color-gray-60;
$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
$dark-ui-bg: $color-gray-40;
// Border color
$intense-ui-border: $color-gray-40;

22
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -124,8 +124,6 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: flex;
padding: $x-small $small;
transition: none;
@ -207,29 +205,21 @@
}
&.selected {
background-color: $main-ui-color;
.selected {
svg {
fill: $soft-ui-icons;
}
}
.element-icon {
svg {
fill: $soft-ui-icons;
fill: $main-ui-color;
}
}
span {
color: $intense-ui-text;
color: $main-ui-color;
}
&:hover {
background-color: $main-ui-color;
.element-icon {
svg {
@ -252,18 +242,18 @@
}
&:hover {
border-color: $main-ui-color;
background-color: $main-ui-color;
.element-icon {
svg {
fill: $main-ui-color;
fill: $soft-ui-icons;
}
}
span {
color: $main-ui-color;
color: $intense-ui-text;
}
}

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

@ -85,13 +85,14 @@
a {
svg {
fill: $medium-ui-icons;
fill: $soft-ui-icons;
height: 15px;
margin-left: $x-small;
opacity: .6;
width: 15px;
&:hover {
fill: $intense-ui-icons;
opacity: 1;
}
}
@ -101,6 +102,28 @@
}
&:hover {
background-color: $main-ui-color;
.page-icon {
svg {
fill: $soft-ui-icons;
}
span {
color: $intense-ui-text;
}
}
.page-actions {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
&.selected {
.page-icon {
@ -116,46 +139,22 @@
}
&.selected {
&:hover {
.page-icon {
svg {
fill: $soft-ui-icons;
}
}
span {
color: $soft-ui-text;
}
}
.selected {
a {
svg {
fill: $soft-ui-icons;
opacity: .6;
&:hover {
fill: $soft-ui-icons;
opacity: 1;
}
}
color: $intense-ui-text;
}
}
}
&:hover {
.page-actions {
display: flex;
@include animation(0s,.3s,fadeIn);
}
}
.element-list-body {
align-items: center;
@ -178,107 +177,9 @@
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: $intense-ui-icons;
}
}
span {
color: $intense-ui-text;
}
}
.selected {
svg {
fill: $intense-ui-icons;
}
}
&:hover {
border-color: $main-ui-color;
.element-icon {
svg {
fill: $intense-ui-icons;
}
}
}
&.dragging {
// TODO: revisit this
background-color: #eee;
background-color: $dark-ui-bg;
}
}
}