asiaH1/assets/stylesheets/template/layout/header.scss

294 lines
5.3 KiB
SCSS

@charset "utf-8";
@import "../initial";
.top{
display: none;
@media (max-width:767px){
display: block;
height: 122px;
}
}
.navv{
@media (max-width:767px){
width: 100%;
display:block;
position: fixed;
z-index: 10;
background-color: #fff;
border-bottom: 1px solid #d3c3b6;
}
}
.mobile {
@media (max-width:767px){
width:100%;
position:fixed;
z-index: 15;
top:130px;
left: 0;
}
.navbar-collapse.in {
@media (max-width:767px) {
width: 100%;
height: auto;
transition:.7s !important;
background-color: #313a42;
padding: 0;
visibility: visible;
li {
width: 90%;
padding: 0;
margin-left:-8px !important;
transition:.7s !important;
border-bottom: 2px solid #52616e;
&:last-child{
margin-left:-13px !important;
}
a {
text-align: center !important;
position:relative !important;
left:0 !important;
transition:.7s !important;
}}
}}
.navbar-collapse{
@media (max-width:767px) {
width: 100%;
height: auto;
background-color: #fff;
transition:.7s !important;
ul{
border-top: inherit;
}
li{
width: 100%;
margin-left:600px !important;
transition:.7s !important;
a{
text-align: center !important;
color:#fff;
position:relative !important;
left:-1000px;
transition:.7s !important;
}}
}}
}
.page-home{
.container {
position: relative;
// @extend .response-content;
width: 1000px;
@media (max-width:1020px){
width: 100%;
}
aside[data-pp="0"]
{
position: absolute;
top:-500px;
left: 430px;
line-height: 35px;
@media (max-width:480px){
display: none;
}
}
}
}
.internal-page{
.container{
position: relative;
// @extend .response-content;
width: 1000px;
@media (max-width:1020px){
width: 100%;
}
}
aside[data-pp="0"]
{
position: absolute;
bottom:150px;
right:350px;
line-height: 35px;
width: 30%;
@media (max-width:480px){
display: none;
}
}
}
.layout-header {
position: relative;
margin-bottom: 0;
border: none;
border-radius: 0;
z-index: 1000;
.collapse.navbar-collapse.modules-menu {
border-bottom: 1px solid #d6ccc1;
margin-bottom: 40px;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.mobile-logo{
top:55px;
left: 20px;
display: none;
position: absolute;
img{
max-width:70%;
}
@media (max-width:767px){
display:block;
}
}
.header-nav {
border-bottom: 1px solid #d3c3b6;
width: 100%;
padding: 10px 20px 20px 20px;
color: #999999;
font-size: 0.833em;
margin-right: 60px;
margin-top: -6em;
margin-bottom: 1em;
@media (max-width: 767px) {
padding: 0;
}
& > *:not(p) {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
font-size: 0.8em;
color: #fff;
}
a {
color: #999999;
text-decoration: none;
}
@media (min-width: $screen-sm) {
text-align: right;
}
}
.navbar-header {
padding-bottom: 2em;
.navbar-brand {
color: transparent;
margin: 0;
padding: 0;
.site-logo {
width: 50%;
height: 100%;
float: left;
}
}
}
}
.internal-page {
.layout-header .collapse.navbar-collapse.modules-menu { margin-bottom: 0; }
}
@media (max-width: 767px) {
nav.navbar-expand-lg {
.navbar-toggle {
top: 0.5em;
right: 0;
position: absolute;
margin: 0;
z-index: 2;
.icon-bar {
background-color: lighten($theme-gray, 30%);
}
&.collapsed {
.icon-bar-top {
top: 0;
transform: rotate(0);
}
.icon-bar-middle {
opacity: 1;
}
.icon-bar-bottom {
top: 0;
transform: rotate(0);
}
}
// icon bar animation
.icon-bar {
transition: .2s all;
position: relative;
}
.icon-bar-top {
top: 6px;
transform: rotate(45deg);
}
.icon-bar-middle {
opacity: 0;
}
.icon-bar-bottom {
top: -6px;
transform: rotate(-45deg);
}
}
}
.layout-header .header-nav {
padding: 10px 35px 25px 10px;
margin-bottom: 2em;
margin-top: -5em;
text-align: right;
}
}
.navbar-brand {
height: unset;
}
@media (max-width: 580px) {
.layout-header .container { padding: 0; position: relative; }
.layout-header .header-nav {
position: absolute;
margin: 0;
padding: 0;
top: 0.5em;
right: 0;
& > div {
padding-right: 2em;
}
}
.layout-header .navbar-header .navbar-brand .site-logo {
width: 70%;
}
.layout-header .navbar-header {
padding: 0;
margin-top: 1.5em;
margin-left: 0.5em;
}
nav.navbar-expand-lg .navbar-toggle.collapsed {
top: 10%;
}
nav.navbar-expand-lg .navbar-toggle {
top: 2%;
transition: all 0.5s;
}
.layout-content-box.col-sm-5 {
padding: 0;
.ad-overlay { padding: 0 1em; }
}
.internal-page nav.navbar-expand-lg .navbar-toggle.collapsed {
top: 20%;
}
}