app/styles/_topnav.scss
/* Topnav */
.main-header {
max-height: 1000px !important;
background: white;
position: fixed !important;
width: 100%;
top: 0;
left: 0;
border-bottom: 1px solid $search-grey-border;
> .topnav {
background: white;
height: 46px;
//width: 85%;
padding: 0;
}
}
.universal-topnav-container {
width: 100%;
height: 46px;
overflow: visible;
display: table;
.universal-topnav-item {
display: table-cell;
padding: 0;
margin: 0;
vertical-align: top;
}
> a {
position: absolute;
top:0;
float: left;
margin-top: 5.5px;
display: inline-block;
vertical-align: top;
img {
height: 34px;
}
}
}
.list-of-views {
width: 50%;
text-align: left;
> ul {
width: 100%;
padding: 0;
margin: 0;
padding-left: 0 !important;
}
li {
padding: 0;
margin: 0;
display: inline-block;
&:first-child a {
padding-left: 0 !important;
}
&:last-child a {
padding-right: 0 !important;
}
a {
display: inline-block;
padding: 10px 15px 9px 15px;
@media (min-width: 768px) and (max-width: 991px) {
padding: 10px 6px 9px 2px !important;
}
line-height: 20px;
transition: all 0s ease-in-out;
color: rgb(102, 117, 127);
&:hover, &.active-view-nav {
color: #55acee;
transition: all 0s ease-in-out;
border-bottom: 4px solid #55acee;
background: none;
span.fa {
color: #55acee;
}
}
span.fa {
margin-right: 5px;
@media (min-width: 768px) and (max-width: 991px) {
margin-right:1px;
}
font-size: 20px;
position: relative;
top: 3px;
color: rgb(102, 117, 127);
}
span.nav-item-title {
font-size: 13px;
margin-left: 3px;
}
}
}
img.hidden-logo {
margin-right: 15px;
}
}
.topnav-user-actions {
width: 50%;
text-align: right;
> * {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
> img {
float: left;
margin-left: 0;
height: 34px;
margin-top: 5.5px;
}
}
.global-search-container {
padding-top: 7px;
position: relative;
display: inline-block;
#global-search-input {
color: #292f33;
background-color: #f5f8fa;
border: 1px solid #e1e8ed;
border-radius: 21px;
width: auto;
padding: 8px 10px;
font-size: 12px;
width: 218px;
&:focus {
color: #292f33;
text-shadow: none;
background-color: #fff;
box-shadow: none;
opacity: 1;
outline: none;
}
}
ul.suggestions {
position: absolute;
left: -1px;
top: 46px;;
width: 100%;
z-index: 101;
margin: 0;
padding: 0;
li {
background-color: rgba(85,172,238,0.9);
color: white;
display: block;
padding: 8px;
border: none;
text-align: left;
&:hover {
background-color: white;
color: rgba(85,172,238,1);
cursor: pointer;
}
&:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
li.active {
background-color: white;
color: rgba(85,172,238,1);
cursor: pointer;
}
}
.fa.fa-search {
position: absolute;
top: 16px;
right: 10px;
font-size: 13px;
color: #66757f;
}
@media (min-width: 768px) and (max-width: 991px) {
#global-search-input {
width: 160px;
}
}
}
@media (min-width: 0px) and (max-width: 767px) {
.topnav-user-actions { width: 0%;}
.topnav-user-actions .signin-twitter.isNotLoggedIn {
display: none;
}
.topnav-user-actions .signin-twitter {
position: absolute;
right: 139px;
top: 94px;
display: none;
}
}
@media (min-width: 0px) and (max-width: 453px) {
.topnav-user-actions .signin-twitter {
position: absolute;
right: 150px;
top: 141px;
}
}
.signin-twitter {
overflow: visible;
line-height: 20px;
color: white;
#home-view-user-avatar {
margin-top: 7px;
border-radius: 5px;
height: 32px;
width: 32px;
&:hover {
cursor: pointer;
}
}
.initial-userinfo {
span {
display: inline-block;
font-size: 14px;
padding: 17px;
color: white;
}
span.avatar-container {
padding: 5px 0;
}
img {
height: 40px;
display: inline-block;
border-radius: 20px;
vertical-align: middle;
}
}
.signin {
span {
display: inline-block;
color: white;
button {
height: 32px;
margin-top: 7px;
padding: 6px 12px !important;
color: white;
border: none;
font-size: 13px;
i {
margin-right: 5px;
}
}
}
}
.twitter-session {
position: relative;
}
.hidden-user-info {
position: absolute;
right: 0;
min-width: 164px;
background-color: white;
border: 1px solid #e1e8ed;
border-radius: 5px;
margin-top: 9px;
li {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 5px 0px;
border-bottom: 1px solid #e1e8ed;
&:last-child {
border: none;
}
}
.full-name {
font-size: 13px;
font-weight: bold;
color: #292f33;
}
.metadata {
font-size: 11px;
color: #8899a6;
}
a {
text-align: left;
font-size: 12px;
color: #66757f;
display: block;
padding: 5px 20px;
min-height: 32px;
&:hover {
background-color: #505050;
color: white;
span {
color: white;
}
}
}
}
.hidden-user-info::after {
content: " ";
position: absolute;
display: inline-block;
margin-left: -1px;
top: -8px;
right: 12px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #fff;
border-bottom-color: rgba(255,255,255,0.98);
}
.hidden-user-info::before {
content: " ";
position: absolute;
display: inline-block;
border-bottom: 10px solid #8899a6;
border-bottom-color: rgba(0,0,0,0.1);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: auto;
right: 11px;
top: -9px;
width: auto;
}
}
.global-tweet-button-container {
padding: 0;
#global-new-tweet-button {
height: 32px;
margin-top: 7px;
color:white;
span.fa {
font-size: 14px;
}
span.text {
font-size: 13px;
margin-left: 3px;
}
}
}
/* Mobile nav */
.hidden-mobile-nav {
text-align: center;
min-height: 37px;
#sign-in-button {
position: absolute;
top: 0;
right: 11px;
button {
height: 32px;
margin-top: 7px;
padding: 6px 12px !important;
background-color: #55acee;
color: white;
border: none;
font-size: 13px;
}
}
}
.mobile-nav-toggle-button-container {
position: absolute;
top: 35px;
right: 30px;
}
.left-logo-and-brand {
float: left;
}
.hidden-items {
display: none;
> div {
text-align: right;
}
.list-of-views {
width: 100%;
li a {
padding: 15px 10px 10px 10px;
}
}
.signin-status-container {
margin-right: 11px;
}
.signin-twitter {
display: inline-block;
vertical-align: top;
#home-view-user-avatar {
margin-top: 11px;
}
}
.global-tweet-button-container {
margin: 0;
text-align: right;
padding: 10px 0;
display: inline-block;
vertical-align: top;
#global-new-tweet-button {
margin-top: 1px;
margin-right: -13px;
}
}
}
/* Toggle button */
// Custom for this page
.hided {
position: absolute;
top: 33px;
right: 41px;
#main-nav-button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
// Generating the button
$nav-toggle-button-color: #55acee;
.hided {
margin-right: 5px;
text-align: right;
margin-bottom: 7px;
margin-top: -20px;
}
.hided.hided-sivukartta {
margin-top: -5px;
}
#pull {
padding: 10px 4px 17px 4px;
//background: white;
}
$button-size : 24px;
$transition: 0s;
.lines-button {
background-color: transparent;
border: none;
&:focus {
outline: 0;
}
display: inline-block;
padding: 0 $button-size/4;
transition: 0s;
cursor: pointer;
user-select: none;
border-radius: $button-size/7;
// &:hover {
// opacity: 1;
// }
// &:active {
// transition: 0;
// color: white;
// background: white;
// }
}
@mixin line {
display: inline-block;
width: $button-size;
height: $button-size/7;
background: $nav-toggle-button-color;
border-radius: $button-size/14;
transition: $transition;
-webkit-transition: $transition;
-ms-transition: $transition;
}
.lines {
//create middle line
@include line;
position: relative;
/*create the upper and lower lines as pseudo-elements of the middle line*/
&:before, &:after {
@include line;
position: absolute;
left:0;
content: '';
transform-origin: $button-size/14 center;
-ms-transform-origin: $button-size/14 center;
-webkit-transform-origin: $button-size/14 center;
}
&:before { top: $button-size/4; }
&:after { top: -$button-size/4; }
}
.lines-button:hover {
// opacity: 1;
// .lines {
// &:before { top: $button-size/3.5; }
// &:after { top: -$button-size/3.5; }
// }
}
/* Transform into X */
.lines-button.x.close .lines{
/*hide the middle line*/
background: transparent;
/*overlay the lines by setting both their top values to 0*/
&:before, &:after{
transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
top:0;
width: $button-size;
}
// rotate the lines to form the x shape
&:before{
transform: rotate3d(0,0,1,45deg);
-webkit-transform: rotate3d(0,0,1,45deg);
-ms-transform: rotate3d(0,0,1,45deg);
}
&:after{
transform: rotate3d(0,0,1,-45deg);
-webkit-transform: rotate3d(0,0,1,-45deg);
-ms-transform: rotate3d(0,0,1,-45deg);
}
}
div#signupModal > div.modal-dialog > div.modal-content {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
div#myModal > div.modal-dialog > div.modal-content {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
width: 110%;
}
div#myModal > div.modal-dialog > div.modal-content > form > div.modal-footer {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
img#loklak-signup-icon {
display:block;
margin-left:auto;
margin-right:auto;
}
#close{
display:inline-block;
margin-left:-2%;
text-align: center;
width:30px;
height:29px;
position: absolute;
}
input.fa.fa-twitter.btn.btn-default {
background-color: #55ACEE;
border-color: #55ACEE;
color: white;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
.main-header {
> .topnav {
height: auto;
overflow: visible;
}
}
}
@media screen and (min-width: 0px) and (max-width: 377px) {
.hidden-mobile-nav {
text-align: left;
}
.global-search-container {
padding-top: 8px;
margin-left: 50px;
#global-search-input {
color: #292f33;
background-color: #f5f8fa;
border: 1px solid #e1e8ed;
border-radius: 13px;
width: auto;
padding: 8px;
width: 100px;
&:focus {
color: #292f33;
text-shadow: none;
background-color: #fff;
box-shadow: none;
opacity: 1;
outline: none;
}
}
}
}