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

280 lines
4.9 KiB
SCSS
Executable File

@charset "utf-8";
@import "../initial";
.default_site_h1{
@media(min-width: $screen-xs){
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
}
.layout-header {
position: relative;
margin-bottom: 0;
border: none;
border-radius: 0;
z-index: 1;
background: #0268b7;
.container {
@extend .response-container;
}
.header-banner {
overflow: hidden;
position: relative;
z-index: 0;
float: right;
clear: both;
@media(min-width: 769px){
background: #fff;
padding: 1em;
width: 80%!important;
}
}
.header-nav {
background: #0268b7;
padding: 0.5em 1em;
color: #fff;
font-family: $main-font;
#subEmail2::-webkit-input-placeholder { color: #fff; }
& > * {
display: inline-block;
margin-bottom: 0;
font-size: 0.8em;
color: #fff;
}
a {
text-decoration: none;
}
@media (min-width: $screen-sm) {
text-align: right;
}
@media(max-width: $screen-xs){
display: none;
}
}
.navbar-header {
padding: 0;
@media(min-width: 769px){
background: #0268b7;
width: 20%;
position: absolute;
padding-bottom: 10px;
}
@media(max-width: 768px){
padding: 0 1em;
}
.navbar-brand {
height: unset;
margin: 0.5em 0;
padding-top: 0;
padding-bottom: 0;
line-height: 2.125em;
color: $theme-color-main;
font-size: 1.4em;
font-family: $main-font;
width: 100%;
@media (min-width: $screen-sm) {
height: unset;
margin:0.5rem 1rem 0.5rem;
padding-left: 0;
font-size: 1.5em;
display: flex;
align-items: center;
width: 80%;
}
@media (max-width: 480px) {
height:fit-content;
padding: 0 0.5rem;
width: 100%;
}
.site-logo {
width: auto;
float: left;
@media (max-width: 480px) {
padding-bottom: 0.5em!important;
}
}
}
}
}
.navbar-toggle {
padding: 0.875em 0.625em;
border-radius: 0.125em;
border-width: 0.125em;
margin: 1em 0.3em !important;
@media(max-width:768px){
position: absolute;
}
.icon-bar {
background-color:#fff;
}
&.collapsed {
.icon-bar-top {
top: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.icon-bar-middle {
opacity: 1;
}
.icon-bar-bottom {
top: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
// icon bar animation
.icon-bar {
transition: .2s all;
position: relative;
}
.icon-bar-top {
top: 0.375em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.icon-bar-middle {
opacity: 0;
}
.icon-bar-bottom {
top: -0.375em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.headercontainer{
background: #f7f7f7;
}
.s{
margin-top: 35px;
float: right;
background: #a1c7e1;
height: 35px;
border-radius: 10px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
width: 270px;
overflow: hidden;
input, select, textarea{
border: none;
}
}
.s button{
background: #a1c7e1;
padding: 0px;
float: right;
border: none;
font-size: 1.25em;
color: #fff;
width: 37%;
display: block;
line-height: 35px;
text-align: center;
border-left: 1px solid #fff;
}
.leftmenu{
width: 100%;
}
.leftmenu2{
width: 100%;
}
.left_link li{
&:hover{
opacity: 0.7;
}
}
.menubottom{
position:relative;
clear: both;
}
.OpenSidebar-text{
display: block;
padding: 0;
font-size: 22px;
font-weight: 400;
width: 60px;
opacity: 1;
line-height: .9em;
transition: all 0.05s ease-in-out;
color: #989898;
text-transform: uppercase;
}
.OpenSidebar-textLetter{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(
-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(
-90deg);
}
.left_link{
transition: all 0.05s ease-in-out;
width: 40px;
overflow: hidden;
padding: 0;
margin: auto;
margin-top: 100px;
li{
width: 40px;
height: 40px;
display: inline-block;
margin: 6px 0px;
transition: all .3s;
-webkit-transition: all .3s;
}
}
.modules-menu{
.leftmenu2{
.left_link{
display: flex;
width: 100%;
flex-wrap: wrap;
li{
flex:1;
}
}
}
}
form.f{
position: relative;
margin: 15px 60px;
}
form.f input{
width: 100%;
margin: 0px auto;
line-height: 40px;
box-sizing: border-box;
padding-left: 20px;
height: 42px;
border: 1px solid #b2d9f3;
border-radius: 20px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
form.f button{
display: block;
background:url("/assets/search.png") center no-repeat;
position: absolute;
right: 4%;
top: 1px;
width: 40px;
height: 40px;
border: 0;
}