3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 08:58:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

redesing dashboard main-bar

Browse source
This commit is contained in:
Juan de la Cruz 2020-03-05 19:18:11 +01:00 • committed by Andrey Antukh
parent 1ce46a0ef8
commit 7d7cd1d3d6
3 changed files with 64 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/resources/styles/common/framework.scss
View file

@ -131,6 +131,22 @@
}
}
.btn-dashboard {
@extend %btn;
background-color: $color-white;
border: 1px solid $color-black;
color: $color-black;
font-size: $fs12;
font-weight: normal;
padding: $x-small $small;
&:hover {
background-color: $color-primary;
border-color: $color-primary;
color: $color-black;
}
}
input[type=button][disabled],
.btn-disabled {
opacity: .5;

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

@ -7,24 +7,31 @@
.main-bar {
align-items: center;
background-color: $color-gray-50;
background-color: $color-white;
border-bottom: 1px solid $color-gray-10;
display: flex;
height: 40px;
padding: $x-small $medium;
padding: $x-small $small;
position: relative;
z-index: 10;
.main-logo {
border-right: 1px solid $color-gray-10;
padding-right: $small;
padding-top: $x-small;
svg {
fill: $color-gray-20;
fill: $color-black;
height: 30px;
width: 100px;
width: 30px;
}
}
.btn-dashboard {
margin-left: auto;
}
}
.main-nav {
@ -59,16 +66,27 @@
}
.dashboard-title {
color: $color-black;
font-size: $fs15;
font-weight: normal;
margin: 0 $x-big;
}
.user-zone {
align-items: center;
border-right: 1px solid $color-gray-10;
cursor: pointer;
display: flex;
margin-left: auto;
padding: 0 $x-small 0 $small;
position: relative;
width: 180px;
span {
color: $color-gray-20;
@include text-ellipsis;
color: $color-black;
margin: $small;
font-size: $fs12;
}
img {
@ -79,9 +97,8 @@
}
.dropdown {
background-color: $color-white;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid $color-gray-10;
min-width: 150px;
padding: 0 $small;
position: absolute;
@ -96,23 +113,23 @@
padding: $small 0;
svg {
fill: $color-gray-40;
fill: $color-gray-20;
height: 12px;
width: 12px;
}
span {
color: $color-gray-40;
color: $color-white;
}
&:hover {
span {
color: $color-gray-60;
color: $color-primary;
}
svg {
fill: $color-gray-60;
fill: $color-primary;
}
}