1
0
Fork 0
mirror of synced 2024-06-29 19:50:26 +12:00
appwrite/public/styles/comps/header.less
2020-02-10 19:04:57 +02:00

116 lines
1.8 KiB
Plaintext

header {
position: fixed;
top: 0;
width: ~"calc(100% - 130px)";
height: 40px;
line-height: 40px;
padding: 15px 30px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .25);
margin: 0 -30px;
z-index: 2;
font-size: 14px;
.logo {
height: 26px;
margin: 7px 0;
display: block;
&:hover {
border-bottom: none;
}
img {
display: block;
}
}
.project {
font-size: 15px;
color: #1b3445;
display: inline-block;
line-height: 40px;
height: 40px;
}
.account {
.func-margin-start(25px);
&:hover {
border-bottom: none;
}
}
.avatar {
height: 40px;
width: 40px;
}
.notifications {
position: relative;
font-size: 20px;
&:after {
position: absolute;
content: "";
display: block;
background: var(--config-color-danger);
width: 8px;
height: 8px;
border-radius: 50%;
top: 3px;
.func-end(3px);
}
}
nav {
box-shadow: 0 0 4px rgba(0, 0, 0, .25);
background: #1b3445;
color: #788c99;
position: fixed;
height: 100%;
width: 70px;
top: 0;
.func-start(0);
.icon {
display: block;
border: none;
margin: 18px 10px 50px 10px;
img {
display: block;
}
&:hover {
border-bottom: none;
svg g {
fill: var(--config-color-focus)
}
}
}
.links a {
padding: 0;
border: none;
display: block;
text-align: center;
color: #788c99;
font-size: 12px;
margin-bottom: 30px;
.icon {
margin: 0 10px;
height: 24px;
font-size: 20px;
line-height: 24px;
}
&:hover {
border-bottom: none;
color: var(--config-color-focus);
}
}
}
}