Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity
chill-bundles/Resources/assets/scratch-css/stylesheets/sass/modules/_navigation.scss

492 lines
10 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;
}
}
}*/
Reference in New Issue View Git Blame Copy Permalink