FeedBunch-app/app/assets/stylesheets/partials/_navbar.scss
body.navbar-visible{
padding-top: 50px;
}
.navbar {
box-shadow: 0 1px 10px silver;
.navbar-header {
.navbar-brand {
font-family: Ubuntu;
font-size: 20px;
img {
margin-top: -5px;
}
}
}
button {
margin: {
top: 5px;
bottom: 5px;
}
}
button#toggle-sidebar-hidden {
padding: {
left: 7px;
right: 8px;
}
}
.navbar-toggle-left {
margin-left: 15px;
padding: {
left: 14px;
right: 14px;
}
}
@media (max-width: $screen-sm-min) {
/* Larger font in navbar at smartphone resolutions, menu has almost the whole screen width */
.nav li a {
font-family: OpenSans;
font-size: 16px;
}
a:active {
background-color: #E7E7E7 !important;
}
.navbar-collapse a{
text-align: left;
}
/* Limit user name width in the navbar at different resolutions */
#user-dropdown {
max-width: 100%;
#user-name {
display: inline-block;
max-width: 90%;
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
/* Smaller font in navbar at tablet resolutions, to avoid navbar occupying two lines */
.nav li a {
font-family: OpenSans;
font-size: 14px;
}
/* Limit user name width in the navbar at different resolutions */
#user-dropdown {
max-width: 130px;
#user-name {
display: none;
}
}
}
@media (min-width: $screen-md-min) {
/* Larger font in navbar at larger resolutions, for better usability */
.nav li a {
font-family: OpenSans;
font-size: 16px;
}
#user-dropdown {
max-width: 300px;
#user-name {
display: inline-block;
max-width: 200px;
}
}
}
.dropdown-menu {
font-size: 16px;
}
#user-dropdown {
#user-management {
padding-bottom: 14px;
#user-name {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
}
}
/* Truncate very long folder names in the dropdown */
#folder-management-dropdown {
@media (max-width: $screen-sm-min) {
#folder-dropdown-content {
max-width: 100%;
}
}
@media (min-width: $screen-sm-min) {
#folder-dropdown-content {
max-width: 180px;
}
}
#folder-dropdown-content {
.dropdown-folder-title {
max-width: 100%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
}
}
/* Better colors etc for the app menu in smartphone screens */
@media (max-width: $screen-sm-min) {
.navbar-collapse {
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
background-image: linear-gradient(to bottom, #FFFFFF 0px, #F8F8F8 100%);
overflow-x: hidden;
.dropdown-menu {
background-color: #F2F2F2 !important;
.divider {
background-color: #B5B5B5;
}
}
}
}
}