scinote-web/app/assets/stylesheets/themes/menu_bar.scss

111 lines
1.7 KiB
SCSS
Raw Normal View History

2018-03-20 20:53:11 +08:00
@import "constants";
@import "mixins";
:root {
--menu-bar-width: 83px;
}
2018-03-20 20:53:11 +08:00
.menu-bar {
background-color: $color-white;
2020-01-07 23:13:34 +08:00
box-shadow: $flyout-shadow;
2018-03-20 20:53:11 +08:00
height: 100%;
left: 0;
2018-11-27 01:47:21 +08:00
padding-bottom: 50px;
2018-03-20 20:53:11 +08:00
position: fixed;
width: var(--menu-bar-width);
2018-04-16 23:05:22 +08:00
z-index: 1001;
.scroll-wrapper {
height: 100%;
padding-top: 16px;
width: var(--menu-bar-width);
overflow-x: hidden;
}
2018-03-20 20:53:11 +08:00
ul.nav > li {
2018-12-10 22:42:05 +08:00
& > a,
& > span {
2019-12-04 22:51:26 +08:00
@include font-small;
color: $color-volcano;
2018-03-20 20:53:11 +08:00
display: grid;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
2018-03-20 20:53:11 +08:00
text-align: center;
2018-05-28 16:42:07 +08:00
word-break: normal;
2018-03-20 20:53:11 +08:00
.fas {
font-size: 18px;
padding-bottom: 5px;
2018-03-20 20:53:11 +08:00
}
}
&.active {
2018-05-14 18:08:45 +08:00
@include box-shadow(-4px 0 0 $brand-primary);
2018-03-20 20:53:11 +08:00
background-color: $color-gainsboro;
2018-05-12 00:02:17 +08:00
margin-left: 4px;
2018-03-20 20:53:11 +08:00
& > a {
color: $color-emperor;
}
}
2018-12-10 22:42:05 +08:00
&.disabled {
box-shadow: none;
cursor: not-allowed;
opacity: .65;
}
2018-03-20 20:53:11 +08:00
}
ul.nav-bottom {
bottom: 0;
padding-bottom: 16px;
position: fixed;
width: inherit;
2019-07-12 17:15:34 +08:00
.academy-color {
color: $brand-academy-dark;
2019-07-12 17:15:34 +08:00
}
2018-03-20 20:53:11 +08:00
}
.dropup {
.dropdown-menu {
bottom: 0;
left: 99%;
margin-bottom: 0;
2020-03-17 22:44:57 +08:00
& > li > a {
padding: 8px 20px;
}
}
&.open > a {
color: $color-emperor;
}
.about-scinote {
font-size: 12px;
.core-version {
color: $color-silver-chalice;
}
}
}
2020-03-17 22:44:57 +08:00
#support-link {
color: $brand-primary;
}
2018-03-20 20:53:11 +08:00
}
@media(max-height:510px) {
2018-05-28 17:53:49 +08:00
.menu-bar .nav-bottom {
2018-03-20 20:53:11 +08:00
position: relative;
width: auto;
}
}
.all-teams-navigation-link {
2020-01-24 20:22:04 +08:00
color: $brand-primary !important;
}