storj/web/satellite/src/components/navigation/navigationArea.scss
Yehor Butko f4430f9063
Satellite frontned empty states (#1682)
* V3-1421 Empty State Pages in no Project Case
2019-04-05 18:08:14 +03:00

139 lines
2.3 KiB
SCSS

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
.navigation-area {
position: relative;
min-width: 280px;
max-width: 280px;
height: 100vh;
left: 0;
background-color: #fff;
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
&__logo {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
margin-bottom: 50px;
margin-left: 60px;
&__img {
width: 54px;
height: 60px;
}
&__text {
margin-left: 12px;
width: 69px;
height: 16px;
}
}
&__satellite {
text-align: center;
margin-bottom: 100px;
&__span_title {
color: #354049;
opacity: 0.41;
font-family: 'font_regular';
line-height: 21px;
font-size: 16px;
}
&__span_name {
color: #354049;
font-family: 'font_medium';
line-height: 21px;
font-size: 16px;
margin-left: 5px;
}
}
&__item-container {
height: 70px;
padding-left: 60px;
border-left: 3px solid transparent;
display: flex;
justify-content: flex-start;
align-items: center;
&.router-link-active,
&:hover {
border-left: 3px solid #2683FF;
.svg path:not(.white) {
fill: #2683FF !important;
}
}
&__link-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
h1 {
font-family: 'font_medium';
font-size: 16px;
line-height: 23px;
color: #354049;
margin-left: 15px;
}
&__add-button {
margin-left: 40px;
background-color: transparent;
&:hover {
svg {
border-radius: 50px;
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
}
}
}
}
}
}
a {
text-decoration: none;
outline: none;
}
.disabled {
pointer-events:none;
opacity:0.6;
}
@media screen and (max-width: 1024px) {
.navigation-area {
width: 80px;
max-width: 80px;
min-width: 80px;
&__logo {
margin-left: 20px;
}
&__logo__text {
display: none;
}
&__item-container {
padding-left: 26px;
&__link-container {
h1 {
display: none;
}
&__add-button {
display: none;
}
}
}
}
}