mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
53373c5e97
git-subtree-dir: Resources/assets/scratch-css git-subtree-split: 7906f505168c132e2b52de3194761cbf51eaac63
492 lines
10 KiB
SCSS
492 lines
10 KiB
SCSS
header.navigation {
|
||
$navigation-padding: 1em;
|
||
$navigation-background: $dark-gray;
|
||
$navigation-color: transparentize(white, 0.3);
|
||
$navigation-color-hover: white;
|
||
$navigation-height: 60px;
|
||
//$navigation-nav-button-background: $base-accent-color;
|
||
//$navigation-nav-button-background-hover: lighten($navigation-background, 10);
|
||
//$navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
|
||
//$navigation-search-background: lighten($navigation-background, 5);
|
||
//$navigation-search-border: 1px solid darken($navigation-background, 5);
|
||
$navigation-active-link-color: transparentize(white, 0.5);
|
||
$navigation-submenu-padding: 1em;
|
||
$navigation-submenu-width: 12em;
|
||
//$horizontal-bar-mode: $large-screen;
|
||
|
||
background-color: $navigation-background;
|
||
border-bottom: 1px solid darken($navigation-background, 10);
|
||
height: $navigation-height;
|
||
//width: 100%;
|
||
z-index: 999;
|
||
|
||
// Nav menu
|
||
|
||
.nav {
|
||
z-index: 9999999;
|
||
//float: none;
|
||
}
|
||
|
||
ul#navigation-menu {
|
||
-webkit-transform-style: preserve-3d; // stop webkit flicker
|
||
clear: both;
|
||
display: none;
|
||
margin: 0 auto;
|
||
overflow: visible;
|
||
padding: 0;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
|
||
|
||
//@include media ($horizontal-bar-mode) {
|
||
display: inline;
|
||
margin: 0;
|
||
padding: 0;
|
||
//}
|
||
}
|
||
|
||
// The nav items
|
||
|
||
ul li.nav-link {
|
||
background: $navigation-background;
|
||
display: block;
|
||
line-height: $navigation-height;
|
||
overflow: hidden;
|
||
padding-right: .8em;
|
||
text-align: right;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
|
||
// @include media ($horizontal-bar-mode) {
|
||
background: transparent;
|
||
display: inline;
|
||
line-height: $navigation-height;
|
||
text-decoration: none;
|
||
width: auto;
|
||
// }
|
||
|
||
a {
|
||
color: $navigation-color;
|
||
display: inline-block;
|
||
font-weight: 400;
|
||
|
||
//@include media ($horizontal-bar-mode) {
|
||
padding-right: 1em;
|
||
//}
|
||
|
||
&:hover {
|
||
color: $navigation-color-hover;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active-nav-item a {
|
||
border-bottom: 1px solid $navigation-active-link-color;
|
||
padding-bottom: 3px;
|
||
}
|
||
|
||
// Sub menus
|
||
|
||
li.more.nav-link {
|
||
padding-right: 0;
|
||
|
||
// @include media($large-screen) {
|
||
padding-right: $navigation-submenu-padding;
|
||
// }
|
||
|
||
> ul > li:first-child a {
|
||
padding-top: 1em;
|
||
}
|
||
|
||
a {
|
||
margin-right: $navigation-submenu-padding;
|
||
}
|
||
|
||
> a {
|
||
padding-right: 0.6em;
|
||
}
|
||
|
||
> a:after {
|
||
@include position(absolute, auto -.4em auto auto);
|
||
content: '\25BE';
|
||
color: $navigation-color;
|
||
}
|
||
}
|
||
|
||
li.more {
|
||
overflow: visible;
|
||
padding-right: 0;
|
||
|
||
a {
|
||
padding-right: .8em;
|
||
}
|
||
|
||
> a {
|
||
padding-right: 1.6em;
|
||
position: relative;
|
||
|
||
//@include media($large-screen) {
|
||
margin-right: $navigation-submenu-padding;
|
||
//}
|
||
|
||
&:after {
|
||
content: '›';
|
||
font-size: 1.2em;
|
||
position: absolute;
|
||
right: $navigation-submenu-padding / 2;
|
||
}
|
||
}
|
||
|
||
&:hover > .submenu {
|
||
display: block;
|
||
}
|
||
|
||
//@include media($horizontal-bar-mode) {
|
||
padding-right: .8em;
|
||
position: relative;
|
||
//}
|
||
}
|
||
|
||
ul.submenu {
|
||
display: none;
|
||
padding-left: 0;
|
||
|
||
//@include media($horizontal-bar-mode) {
|
||
left: -$navigation-submenu-padding;
|
||
position: absolute;
|
||
top: 1.5em;
|
||
//}
|
||
|
||
.submenu {
|
||
//@include media($horizontal-bar-mode) {
|
||
left: $navigation-submenu-width - .2em;
|
||
top: 0;
|
||
//}
|
||
}
|
||
|
||
li {
|
||
display: block;
|
||
padding-right: 0;
|
||
|
||
//@include media($horizontal-bar-mode) {
|
||
line-height: $navigation-height / 1.3;
|
||
|
||
&:first-child > a {
|
||
border-top-left-radius: $base-border-radius;
|
||
border-top-right-radius: $base-border-radius;
|
||
}
|
||
|
||
&:last-child > a {
|
||
border-bottom-left-radius: $base-border-radius;
|
||
border-bottom-right-radius: $base-border-radius;
|
||
padding-bottom: .7em;
|
||
}
|
||
//}
|
||
|
||
a {
|
||
background-color: darken($navigation-background, 3);
|
||
display: inline-block;
|
||
text-align: right;
|
||
width: 100%;
|
||
|
||
//@include media($horizontal-bar-mode) {
|
||
background-color: $navigation-background;
|
||
padding-left: $navigation-submenu-padding;
|
||
text-align: left;
|
||
//width: $navigation-submenu-width;
|
||
//}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Elements on the far right
|
||
|
||
.navigation-search {
|
||
padding: .85em .6em;
|
||
position: relative;
|
||
|
||
input[type=search] {
|
||
//background: $navigation-search-background;
|
||
//border: $navigation-search-border;
|
||
padding: .6em .8em;
|
||
padding-right: 3.5em;
|
||
width: calc(100% - 4.5em);
|
||
//padding: .6em .8em;
|
||
//padding: 0 30px 0 10px;
|
||
font-size: .9em;
|
||
font-style: italic;
|
||
//color: $navigation-color;
|
||
//border-radius: $base-border-radius * 2;
|
||
margin: 0;
|
||
}
|
||
|
||
button {
|
||
padding: 7px 12px;
|
||
position: absolute;
|
||
top: .9em;
|
||
right: 1em;
|
||
}
|
||
}
|
||
}
|
||
/*
|
||
|
||
a.sign-up {
|
||
margin-top: 1.2em;
|
||
float: right;
|
||
@include transition (all 0.2s ease-in-out);
|
||
display: inline;
|
||
background: $navigation-nav-button-background;
|
||
border-radius: $base-border-radius;
|
||
color: white;
|
||
font-size: .8em;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
padding: .4em .5em;
|
||
|
||
@include media($large-screen) {
|
||
padding: .5em 1em;
|
||
}
|
||
|
||
&:hover {
|
||
background: lighten($navigation-nav-button-background, 10);
|
||
}
|
||
}
|
||
|
||
// Search bar
|
||
|
||
.search-bar {
|
||
$search-bar-border-color: $base-border-color;
|
||
$search-bar-border: 1px solid $search-bar-border-color;
|
||
$search-bar-background: lighten($search-bar-border-color, 10);
|
||
|
||
padding: .85em .6em;
|
||
float: left;
|
||
.search-and-submit {
|
||
position: relative;
|
||
|
||
input[type=search] {
|
||
background: $navigation-search-background;
|
||
border: $navigation-search-border;
|
||
padding: .6em .8em;
|
||
font-size: .9em;
|
||
font-style: italic;
|
||
color: $navigation-color;
|
||
border-radius: $base-border-radius * 2;
|
||
margin: 0;
|
||
|
||
@include media($large-screen) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
button[type=submit] {
|
||
@include button(simple, lighten($navigation-search-background, 10));
|
||
position: absolute;
|
||
top: 0.3em;
|
||
right: 0.3em;
|
||
bottom: 0.3em;
|
||
left: auto;
|
||
outline: none;
|
||
padding: 0 15px;
|
||
|
||
img {
|
||
height: 12px;
|
||
opacity: .7;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include media($horizontal-bar-mode) {
|
||
width: 16em;
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
input {
|
||
@include box-sizing(border-box);
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
$base-border-radius: 3px;
|
||
background-color: $navigation-background;
|
||
|
||
.nav {
|
||
background-color: $navigation-background;
|
||
z-index: 9999999;
|
||
}
|
||
|
||
ul#navigation-menu {
|
||
clear: both;
|
||
overflow: visible;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
margin: 0;
|
||
padding: 0;
|
||
padding-left: 1em;
|
||
padding-right: 1em;
|
||
|
||
display: inline;
|
||
}
|
||
|
||
ul li.nav-link {
|
||
background: $navigation-background;
|
||
display: block;
|
||
line-height: $navigation-height;
|
||
overflow: hidden;
|
||
padding-right: .8em;
|
||
text-align: right;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
background: transparent;
|
||
display: inline;
|
||
line-height: $navigation-height;
|
||
text-decoration: none;
|
||
|
||
a {
|
||
color: $navigation-color;
|
||
display: inline-block;
|
||
font-weight: 400;
|
||
padding-right: 1em;
|
||
|
||
&:hover {
|
||
color: $navigation-color-hover;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// Sub menus
|
||
|
||
li.more.nav-link {
|
||
padding-right: 0;
|
||
padding-right: $navigation-submenu-padding;
|
||
|
||
> ul > li:first-child a {
|
||
padding-top: 1em;
|
||
}
|
||
|
||
a {
|
||
margin-right: $navigation-submenu-padding;
|
||
}
|
||
|
||
> a {
|
||
padding-right: 0.6em;
|
||
}
|
||
|
||
> a:after {
|
||
@include position(absolute, auto -.4em auto auto);
|
||
content: '\25BE';
|
||
color: $navigation-color;
|
||
}
|
||
}
|
||
|
||
li.more {
|
||
overflow: visible;
|
||
padding-right: 0;
|
||
|
||
a {
|
||
padding-right: .8em;
|
||
}
|
||
|
||
> a {
|
||
margin-right: $navigation-submenu-padding;
|
||
position: relative;
|
||
|
||
|
||
&:after {
|
||
content: '›';
|
||
font-size: 1.2em;
|
||
position: absolute;
|
||
right: $navigation-submenu-padding / 2;
|
||
}
|
||
}
|
||
|
||
&:hover > .submenu {
|
||
display: block;
|
||
}
|
||
|
||
padding-right: .8em;
|
||
position: relative;
|
||
}
|
||
|
||
ul.submenu {
|
||
display: none;
|
||
padding-left: 0;
|
||
right: 0em;
|
||
//left: -$navigation-submenu-padding;
|
||
position: absolute;
|
||
top: 1.5em;
|
||
//background-color: $navigation-background;
|
||
background-color: #111;
|
||
|
||
li {
|
||
display: block;
|
||
padding-right: 0;
|
||
line-height: $navigation-height / 1.5;
|
||
|
||
&:first-child > a {
|
||
border-top-left-radius: $base-border-radius;
|
||
border-top-right-radius: $base-border-radius;
|
||
}
|
||
|
||
&:last-child > a {
|
||
border-bottom-left-radius: $base-border-radius;
|
||
border-bottom-right-radius: $base-border-radius;
|
||
padding-bottom: .7em;
|
||
}
|
||
|
||
a {
|
||
//margin-left: 2em;
|
||
box-sizing: content-box;
|
||
display: inline-block;
|
||
//max-width: 100%
|
||
width: 100%;
|
||
//background-color: $navigation-background;
|
||
background-color: #111;
|
||
//padding-left: $navigation-submenu-padding;
|
||
text-align: left;
|
||
//width: $navigation-submenu-width;
|
||
}
|
||
|
||
a:hover {
|
||
background-color: #222;
|
||
}
|
||
}
|
||
}
|
||
|
||
.navigation-search {
|
||
padding: .85em .6em;
|
||
position: relative;
|
||
|
||
input[type=search] {
|
||
//background: $navigation-search-background;
|
||
//border: $navigation-search-border;
|
||
padding: .6em .8em;
|
||
padding-right: 3.5em;
|
||
width: calc(100% - 4.5em);
|
||
//padding: .6em .8em;
|
||
//padding: 0 30px 0 10px;
|
||
font-size: .9em;
|
||
font-style: italic;
|
||
//color: $navigation-color;
|
||
//border-radius: $base-border-radius * 2;
|
||
margin: 0;
|
||
}
|
||
|
||
button {
|
||
padding: 7px 12px;
|
||
position: absolute;
|
||
top: .9em;
|
||
right: 1em;
|
||
}
|
||
}
|
||
}*/ |