%PDF-
%PDF-
Mini Shell
Mini Shell
//----------------------------------------------------
// SIDHUVUD
//----------------------------------------------------
#header { position:fixed; top:0; left:0; width:100%; float:left; background:$darkBlue; z-index:9999; box-shadow:none; transition:all .3s;
&.scrolled { box-shadow:0px 0px 5px rgba(0,0,0,.3);
#logotype { width:100px; }
#main_navigation { margin-left:120px;
ul {
li {
a { padding:16px 9px 14px; font-size:14px; }
.sub-menu { top:49px; padding:10px 6.7%!important; box-shadow:0px 0px 5px rgba(0,0,0,.3);
li {
a { padding:4px 15px!important; }
&.current-menu-item {
&:before { display:none!important; }
}
}
}
}
}
}
#login_tgl { padding:9px 20px; }
#tglTopSearch { padding:13px 16px; }
#user_nav {
ul {
li {
a, #toggleUserNav { padding:9px 20px; }
}
}
}
#google_translate_element { margin:11px 17px 0 0; }
#breadcrumbs { padding:5px 0 5px 7.7%; }
}
.header_top { width:100%; float:left; padding:0 1%; }
#logotype { float:left; width:160px; position:absolute; top:5px; left:1%; z-index:100; transition:width .3s;
.logo-img { width:100%; height:auto; }
}
#google_translate_element { display:block; float:right; margin:22px 50px 0 0; transition:margin .3s; }
#toggle_navigation { display:none; height:68px; width:68px; float:right; position:relative; transform:rotate(0deg); transition:.5s ease-in-out; cursor:pointer;
span { display:block; position:absolute; height:2px; width:100%; max-width:35px; background:#fff; left:15px; opacity:1; transform:rotate(0deg); transition:.15s ease-in-out;
&:nth-child(1) { top:22px; }
&:nth-child(2), &:nth-child(3) { top:32px; }
&:nth-child(4) { top:42px; }
}
&.open {
span {
&:nth-child(1) { top:32px; width:0; left:15px; }
&:nth-child(2) { transform:rotate(45deg); }
&:nth-child(3) { transform:rotate(-45deg); }
&:nth-child(4) { top:32px; width:0; left:15px; }
}
}
}
#main_navigation { float:left; margin-left:200px; transition:all .3s;
ul { display:block; float:left; margin:0; padding:0;
li { display:block; float:left; margin:0; list-style:none; padding:0; position:relative;
.grow { display:none; }
&:before { content:''; display:block; position:absolute; top:-80px; left:calc(50% - 40px); width:80px; height:80px; border-radius:50%; background:lighten($lightBlue, 40%); transition:top .3s; }
a { display:block; float:left; color:#fff; padding:30px 16px 16px; font-weight:700; transition:all .3s;
&:hover { text-decoration:none; color:lighten($lightBlue, 40%); }
}
&.current-menu-item, &.current-menu-ancestor {
&:before { top:-65px; background:#fff; }
}
&:hover {
&:before { top:-65px; }
}
.sub-menu { display:none; position:fixed; top:68px; left:0; width:100%; background:$lightMoodyBlue; padding:10px 11%!important; z-index:1; overflow:hidden; box-shadow:none; transition:all .3s;
li {
&:before { display:none!important; }
a { color:#fff; padding:8px 20px!important; font-size:14px; transition:padding .3s; }
.sub-menu { display:none!important; }
}
}
&:hover {
.sub-menu { display:block; }
}
}
}
}
#login_tgl { float:right; background:transparent; border:0; color:#fff; padding:19px 20px; transition:all .3s;
i { display:block; float:left; width:30px; height:30px; text-align:center; border:1px solid #fff; border-radius:50%; padding-top:6px; margin-right:10px; background:transparent; transition:background .3s;}
span { display:block; float:left; padding-top:6px; transition:color .3s; }
&:hover {
i { background:lighten($darkBlue, 10%); }
span { color:lighten($lightBlue, 45%); }
}
}
}
.loggin_holder { display:none; width:100%; float:left; padding:20px 1% 20px 234px; background:$lightBlue;
#loginform { display:block; float:left; width:100%;
.login-username, .login-password { display:block; float:left; width:33%; padding-right:10px; margin:0;
label { display:block; float:left; width:100%; color:#fff; font-size:12px; text-transform:uppercase; line-height:20px; }
input { display:block; float:left; width:100%; font-size:14px; padding:12px 20px; background:lighten($lightBlue, 10%); color:#fff; border:0; border-bottom:3px solid lighten($lightBlue, 10%); transition:border .3s;
&.error { border-bottom:3px solid lighten($darkBlue, 15%); }
&:focus { outline:none!important; }
}
}
.login-remember { display:block; float:left; color:#fff; margin:28px 20px 0 20px;
label { font-size:14px;
&:hover { cursor:pointer; }
input { display:block; float:left; margin:9px 9px 0 0;
&:hover { cursor:pointer; }
}
}
}
.login-submit { display:block; float:left; margin:20px 0 0 20px;
.button { background:darken($lightBlue, 10%); color:#fff; border:0; padding:12px 40px; font-size:14px; transition:background .3s;
&:hover { cursor:pointer; background:darken($lightBlue, 13%); }
}
}
}
.not_registered { width:33%; float:left; font-size:12px; color:#fff; margin-top:5px; padding-right:30px;
a { color:#e2e2e2; transition:color .3s;
&:hover { color:#fff; }
}
}
.forgot_pw { width:33%; float:left; font-size:12px; color:#fff; margin-top:5px; padding-right:30px;
a { color:#e2e2e2; transition:color .3s;
&:hover { color:#fff; }
}
}
}
.top_search_holder { display:none; width:100%; float:left; padding:20px 1% 20px 234px; background:$lightBlue;
#searchform { display:block; float:left; width:100%;
input { display:block; width:75%; border:0; padding:12px 20px; float:left; background:lighten($lightBlue, 10%); color:#fff; margin-right:20px; border-bottom:3px solid lighten($lightBlue, 10%); transition:border .3s;
&::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder { color:#fff; }
&.error { border-bottom:3px solid darken($lightBlue, 10%); }
&:focus { outline:none!important; }
}
button { display:block; float:left; margin:0 0 0 20px; background:darken($lightBlue, 10%); color:#fff; border:0; padding:13px 40px; font-size:14px; transition:background .3s;
&:hover { cursor:pointer; background:darken($lightBlue, 13%); }
}
}
}
#user_nav { float:right;
ul { display:block; float:left; margin:0; padding:0; list-style:none;
li { display:block; float:left; margin:0; padding:0; list-style:none; position:relative;
&.dash_link { background:darken($darkBlue, 2%); }
a, #toggleUserNav { display:block; float:left; color:#fff; background:transparent; padding:19px 20px; font-size:14px; transition:all .3s;
i { display:block; float:left; width:30px; height:30px; text-align:center; border:1px solid #fff; border-radius:50%; padding-top:6px; margin-right:10px; background:transparent; transition:background .3s; }
span { display:block; float:left; padding-top:4px; }
&:hover { cursor:pointer; color:lighten($lightBlue, 45%);
i { background:lighten($darkBlue, 10%); }
}
}
.sub-menu { display:none; position:absolute; width:200px; top:100%; right:0; background:darken($lightMoodyBlue, 20%); padding:5px 0 10px;
&.open { display:block; }
li { width:100%;
a { width:100%; padding:8px 20px; }
&:nth-child(1) {
i { text-indent:2px; }
}
&:nth-child(3) {
i { text-indent:2px; }
}
}
}
}
}
}
.top_search { float:right;
#tglTopSearch { display:block; float:left; padding:22.5px 26px; font-size:20px; color:#fff; background:$Turquoise; transition:all .3s;
&:hover { background:darken($Turquoise, 5%); }
}
}
Zerion Mini Shell 1.0