3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-25 11:46:10 +02:00
Code Issues Projects Releases Packages Wiki 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
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 // Background colors
$primary-ui-bg: $color-gray-50; $primary-ui-bg: $color-gray-50;
$secondary-ui-bg: $color-gray-60; $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 // Border color
$intense-ui-border: $color-gray-40; $intense-ui-border: $color-gray-40;

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

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