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

90 lines
1.4 KiB
SCSS
Raw Normal View History

2018-03-20 20:53:11 +08:00
@import "constants";
@import "mixins";
.menu-bar {
background-color: $color-white;
box-shadow: 1px 3px 6px 0 $color-alto;
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: 83px;
2018-04-16 23:05:22 +08:00
z-index: 1001;
.scroll-wrapper {
height: 100%;
padding-top: 16px;
width: 83px;
overflow-x: hidden;
}
2018-03-20 20:53:11 +08:00
ul.nav > li {
2018-12-10 22:42:05 +08:00
& > a,
& > span {
2018-03-28 19:54:01 +08:00
color: $color-silver-chalice;
2018-03-20 20:53:11 +08:00
display: grid;
2018-03-30 15:54:57 +08:00
font-size: $font-size-h6;
2018-03-20 20:53:11 +08:00
margin-left: auto;
margin-right: auto;
padding: 8px 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;
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;
}
2018-03-20 20:53:11 +08:00
}
.dropup {
.dropdown-menu {
bottom: 0;
left: 99%;
margin-bottom: 0;
}
&.open > a {
color: $color-emperor;
}
}
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 {
color: $color-white !important;
}