46193ab5fe
The primary license of the project is changing to: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later with some specific files to be licensed under the one of two licenses: CC0-1.0 LGPL-3.0-or-later This commit is one of the many steps to relicense the entire codebase. Documentation granting permission for this relicensing (from all past contributors who hold copyrights) is on file with Software Freedom Conservancy, Inc.
160 lines
3 KiB
SCSS
160 lines
3 KiB
SCSS
/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
|
|
@import 'mixins';
|
|
@import 'components/side_nav_dimensions';
|
|
|
|
$sideNav-spacing: 8px 15px;
|
|
|
|
|
|
.sideNav {
|
|
background: $charcoal;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
position: fixed;
|
|
@include box-shadow(0 0 10px 0 rgba(black, 0.5));
|
|
overflow-x: hidden;
|
|
width: $sideNav-closed-width;
|
|
@include transition(width 0.2s ease-out);
|
|
}
|
|
.sideNav * {
|
|
@include no-select;
|
|
}
|
|
.sideNav-commitchangeLogo {
|
|
white-space: nowrap;
|
|
padding: 9px 14px;
|
|
display: block;
|
|
@include logo(18px, white, true, true);
|
|
@include opacity(1);
|
|
@include transition(opacity 0.2s ease-out);
|
|
}
|
|
.sideNav-commitchangeLogo img {
|
|
max-width: none;
|
|
}
|
|
.sideNav-commitchangeLogo:hover {
|
|
@include opacity(0.8);
|
|
}
|
|
.sideNav-commitchangeLogo .commitchangeLogo-text {
|
|
margin-left: 15px;
|
|
}
|
|
.sideNav-section {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid rgba(white, 0.15);
|
|
}
|
|
.sideNav-link {
|
|
position: relative;
|
|
color: white;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
display: table;
|
|
table-layout: fixed;
|
|
@include transform(translateZ(0));
|
|
@include transition(color 0.2s ease-out);
|
|
}
|
|
.sideNav-link:hover {
|
|
color: $logo-blue;
|
|
}
|
|
.sideNav-icon {
|
|
display: table-cell;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
padding: $sideNav-spacing;
|
|
}
|
|
.sideNav-text {
|
|
@include ellipsis;
|
|
max-width: 165px;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 62px;
|
|
height: 100%;
|
|
@include transform(translateZ(0));
|
|
@include opacity(0);
|
|
@include transition(opacity 0.2s ease-out);
|
|
}
|
|
.sideNav-profile {
|
|
width: 27px;
|
|
@include border-radius(50%);
|
|
margin: $sideNav-spacing;
|
|
display: table-cell;
|
|
}
|
|
.sideNav-scrim {
|
|
@include transition(opacity 0.2s ease-out);
|
|
@include opacity(0);
|
|
visibility: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
background-color: rgba(black, 0.6);
|
|
}
|
|
.sideNav-scrim.is-showing {
|
|
visibility: visible;
|
|
@include opacity(1);
|
|
}
|
|
.sideNav-toggle {
|
|
@include transition(all 0.2s ease-out);
|
|
position: fixed;
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(black, 0.6);
|
|
@include box-shadow(0 0 5px 0 rgba(black, 0.2));
|
|
font-size: 20px;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
.sideNav-toggle i {
|
|
@include no-select;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
.sideNav-toggle .fa-times {
|
|
display: none;
|
|
}
|
|
.sideNav-toggle.is-togglingOpen{
|
|
background: $trans;
|
|
@include box-shadow(none);
|
|
.fa-times {
|
|
display: table-cell;
|
|
}
|
|
.fa-bars {
|
|
display: none;
|
|
}
|
|
}
|
|
@mixin open_side_nav {
|
|
width: $sideNav-opened-width;
|
|
.sideNav-text {
|
|
@include opacity(1);
|
|
}
|
|
}
|
|
@mixin close_side_nav {
|
|
width: 0;
|
|
padding-top: 34px;
|
|
}
|
|
.sideNav.is-open,
|
|
.sideNav.is-hamburgerStyle.is-open {
|
|
@include open_side_nav;
|
|
}
|
|
.sideNav.is-hamburgerStyle {
|
|
@include close_side_nav;
|
|
}
|
|
.sideNav-toggle.is-hamburgerStyle {
|
|
display: table;
|
|
}
|
|
@media screen and (min-width: 701px) {
|
|
.sideNav:hover {
|
|
@include open_side_nav;
|
|
}
|
|
}
|
|
@media screen and (max-width: 700px) {
|
|
.sideNav {
|
|
@include close_side_nav;
|
|
}
|
|
.sideNav-toggle {
|
|
display: table;
|
|
}
|
|
}
|