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

484 lines
7.5 KiB
SCSS
Raw Normal View History

2018-03-12 23:27:35 +08:00
@import 'constants';
@import "mixins";
#main-nav {
box-shadow: 0 3px 6px $color-alto;
2018-03-12 23:27:35 +08:00
margin-bottom: 0;
}
#notifications-dropdown {
margin-left: 15px;
padding-left: 15px;
2018-03-12 23:27:35 +08:00
.fa-bell {
2018-03-30 15:54:57 +08:00
font-size: $font-size-large;
2018-03-12 23:27:35 +08:00
}
#count-notifications {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2018-03-12 23:27:35 +08:00
border-radius: 5px;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: none;
font-size: 11px;
font-weight: bold;
margin-left: 12px;
padding: 1px 6px;
position: relative;
top: -10px;
2018-03-12 23:27:35 +08:00
z-index: 1;
}
}
.navbar {
border-radius: 0;
2018-03-16 22:56:12 +08:00
padding-right: 15px;
2018-03-12 23:27:35 +08:00
}
.navbar-default {
background-color: $color-white;
border-color: $color-alto;
}
.navbar-default .navbar-brand {
& > img {
margin-top: -7px;
max-width: 55px;
max-height: 38px;
}
}
.dropdown-notifications {
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 0;
padding-top: 0;
width: 450px;
word-wrap: break-word;
.notifications-no-recent {
padding-bottom: 10px;
padding-left: 10px;
padding-top: 10px;
}
.notification {
border-bottom: 1px solid $color-alto;
padding-bottom: 10px;
padding-top: 10px;
&:hover {
background-color: $color-concrete;
}
}
.unseen {
2018-03-28 19:54:01 +08:00
border-left: 4px solid $brand-primary;
2018-03-12 23:27:35 +08:00
}
.text-center {
margin-left: 12px;
}
.assignment {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2018-03-12 23:27:35 +08:00
border-radius: 50%;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: block;
2018-03-30 15:54:57 +08:00
font-size: $font-size-h3;
2018-03-12 23:27:35 +08:00
height: 45px;
padding-top: 5px;
width: 45px;
}
.deliver {
2018-03-28 19:54:01 +08:00
background-color: $brand-warning;
2018-03-12 23:27:35 +08:00
border-radius: 50%;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: block;
2018-03-30 15:54:57 +08:00
font-size: $font-size-h3;
2018-03-12 23:27:35 +08:00
height: 45px;
padding-top: 5px;
width: 45px;
}
.system-message {
2018-05-15 23:10:31 +08:00
background-color: $brand-success;
2018-03-12 23:27:35 +08:00
border-radius: 50%;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: block;
2018-03-30 15:54:57 +08:00
font-size: $font-size-h3;
2018-03-12 23:27:35 +08:00
height: 45px;
padding-top: 8px;
width: 45px;
}
.notifications-dropdown-footer {
background-color: $color-gainsboro;
2018-03-12 23:27:35 +08:00
padding: 8px;
text-align: center;
a:hover {
background-color: $color-gainsboro;
}
}
}
2018-03-12 23:27:35 +08:00
.notification {
padding-right: 8px;
word-wrap: break-word;
}
#search-menu {
padding-right: 0;
.nav {
position: relative;
z-index: 1000;
}
}
#search-content {
padding-left: 0;
}
#search-container {
padding-left: 45px;
}
/** Search */
.nav-search {
li.disabled {
2018-03-16 23:38:59 +08:00
opacity: .8;
2018-03-12 23:27:35 +08:00
.badge {
background-color: $color-emperor;
2018-03-16 23:38:59 +08:00
opacity: .8;
2018-03-12 23:27:35 +08:00
}
}
.repositories-team {
padding: 10px 15px;
&.active {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2018-03-12 23:27:35 +08:00
}
}
.repository-search {
padding-left: 15px;
.fas-custom {
fill: $brand-primary;
}
&.active {
.fas-custom {
fill: $color-white !important;
}
}
&.disabled {
.fas-custom {
fill: $color-silver-chalice;
}
}
2018-03-12 23:27:35 +08:00
}
}
.preferences-settings-container {
2018-03-12 23:27:35 +08:00
margin-bottom: 50px;
margin-top: 50px;
h4 {
font-weight: 600;
margin-bottom: 2rem;
}
.col-sm-4 {
padding-left: 5rem;
padding-top: .5rem;
word-break: break-word;
}
.col-sm-2 {
padding-left: 3rem;
padding-top: .7rem;
}
@media (max-width: 768px) {
.col-sm-4 {
margin-bottom: 1rem;
padding-left: 1.8rem;
}
.col-sm-2 {
padding-left: 1.8rem;
}
}
.btn-group {
margin-bottom: 15px;
}
.assignment {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2018-03-12 23:27:35 +08:00
border-radius: 50%;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: block !important;
2018-03-30 15:54:57 +08:00
font-size: $font-size-base;
2018-03-12 23:27:35 +08:00
height: 30px;
margin-right: 15px;
padding: 7px;
padding-bottom: 5px;
padding-top: 5px;
width: 30px;
}
.system-message {
2018-05-15 23:10:31 +08:00
background-color: $brand-success;
2018-03-12 23:27:35 +08:00
border-radius: 50%;
2018-03-28 19:54:01 +08:00
color: $color-concrete;
2018-03-12 23:27:35 +08:00
display: block !important;
2018-03-30 15:54:57 +08:00
font-size: $font-size-base;
2018-03-12 23:27:35 +08:00
height: 30px;
margin-right: 15px;
padding: 8px;
padding-bottom: 5px;
padding-top: 5px;
width: 30px;
}
.img-circle {
margin-right: 15px;
}
}
// Global team switch
#team-switch {
word-wrap: break-word;
.team-name {
margin-left: 17px;
}
2019-04-12 15:17:14 +08:00
.edit_user {
height: calc(100% - 35px);
position: relative;
}
.fa-check-circle {
color: $brand-primary;
2018-05-15 23:10:31 +08:00
margin-left: -2px;
margin-right: 2px;
2018-03-12 23:27:35 +08:00
}
.team-name-item {
border-bottom: 1px solid $color-gainsboro;
2018-03-12 23:27:35 +08:00
padding-bottom: 8px;
padding-top: 5px;
}
2018-04-19 19:26:10 +08:00
li:last-child {
border-bottom: 0;
}
.btn-default:not(.dropdown-toggle) {
2018-04-18 23:06:47 +08:00
margin-left: 15px;
2018-03-12 23:27:35 +08:00
text-align: right;
width: 300px;
}
.btn-group {
margin-top: 8px;
}
.dropdown-menu {
border-radius: 0;
margin-top: 0;
2019-04-12 15:17:14 +08:00
max-height: calc(100vh - 50px);
padding-bottom: 0;
padding-top: 0;
2018-03-12 23:27:35 +08:00
width: 100%;
2019-04-12 15:17:14 +08:00
.team-container {
height: calc(100% - 35px);
position: relative;
}
2018-03-12 23:27:35 +08:00
}
i {
margin-right: 5px;
}
li {
display: block;
text-align: left;
word-wrap: break-word;
2019-04-12 15:17:14 +08:00
&.new-team {
border-top: 1px solid $color-alto;
height: 35px;
line-height: 30px;
a {
line-height: 30px;
padding: 0 20px;
}
}
2018-03-12 23:27:35 +08:00
&:hover {
background-color: $color-concrete;
}
a {
color: $color-emperor;
display: block;
padding: 3px 20px;
text-align: left;
text-decoration: none;
word-wrap: break-word;
}
}
}
#nav-team-switch {
margin-left: 0;
2018-03-12 23:27:35 +08:00
}
.custom-nav-dropdown {
2018-03-28 19:54:01 +08:00
border: 1px solid $color-alto;
2018-03-12 23:27:35 +08:00
padding: 10px 0 10px 30px;
}
2018-03-13 23:33:48 +08:00
// Alert
.alert {
border-radius: 0;
margin-bottom: 0;
opacity: .86;
width: 100%;
&.alert-hidden {
display: none;
}
a#hide-alert {
margin-left: 15px;
}
&.alert-floating {
position: fixed;
top: 50px;
z-index: 1000;
}
}
#content-wrapper {
margin-top: 50px;
2018-03-20 21:30:07 +08:00
margin-left: 83px;
2018-03-13 23:33:48 +08:00
}
2018-04-18 23:06:47 +08:00
#search-bar {
padding-right: 0;
.btn-default[type="submit"] {
height: 34px;
}
2018-04-18 23:06:47 +08:00
}
@media (max-width: 768px) {
#search-bar {
padding: 10px 30px;
}
}
2018-03-13 23:33:48 +08:00
2018-03-12 23:27:35 +08:00
// reset margins on small screens
@media (max-width: 1188px) {
2018-03-16 23:38:59 +08:00
2018-03-12 23:27:35 +08:00
#nav-team-switch {
margin-left: 0;
}
}
// System notiifcations dropdown
#system-notifications-dropdown {
.fa-gift {
font-size: $font-size-large;
}
#count-system-notifications {
background-color: $brand-primary;
border-radius: 5px;
color: $color-concrete;
display: none;
font-size: 11px;
font-weight: bold;
margin-left: 12px;
padding: 1px 6px;
position: relative;
top: -10px;
z-index: 1;
}
}
.dropdown-system-notifications {
margin-bottom: 10px;
max-height: 500px;
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 0;
padding-top: 0;
width: 450px;
word-wrap: break-word;
.system-notifications-no-recent {
padding: 10px;
text-align: center;
}
.system-notifications-dropdown-header {
margin-bottom: 0;
.show-all {
margin-left: 20px;
}
a {
font-size: $font-size-small;
font-weight: $headings-font-weight;
}
}
}
2019-07-12 17:15:34 +08:00
.academy-link.flag {
background: $brand-academy;
border: 16px solid $brand-academy;
border-bottom: 10px solid $color-white;
display: inline-block;
height: 0;
margin: 0 6px 8px;
padding: 12px 0 0;
position: relative;
width: 0;
.icon-container {
align-items: center;
display: flex;
height: 28px;
justify-content: center;
left: -16px;
position: absolute;
top: -16px;
width: 32px;
.fas {
color: $color-white;
font-size: 16px;
}
}
}