mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-09-06 14:54:57 +00:00
add sass/scratch.scss and associated sass files
This commit is contained in:
299
Resources/public/sass/modules/_navigation.scss
Normal file
299
Resources/public/sass/modules/_navigation.scss
Normal file
@@ -0,0 +1,299 @@
|
||||
.navigation {
|
||||
//$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);
|
||||
//$horizontal-bar-mode: $large-screen;
|
||||
|
||||
background-color: $navigation-background;
|
||||
border-bottom: $navigation-border-bottom;
|
||||
height: $navigation-height;
|
||||
//width: 100%;
|
||||
z-index: 999;
|
||||
|
||||
.logo-container {
|
||||
height: $navigation-height;
|
||||
|
||||
&:before { /* create a full-height inline block pseudo=element */
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
max-width: 89%;
|
||||
max-height: $navigation-height - 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav menu
|
||||
.nav {
|
||||
z-index: 9999999;
|
||||
height: $navigation-height;
|
||||
//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-block;
|
||||
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: $navigation-first-padding-top;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: $navigation-submenu-padding;
|
||||
}
|
||||
|
||||
> a {
|
||||
padding-right: 0.6em;
|
||||
}
|
||||
|
||||
> a:after {
|
||||
@include position(absolute, auto -.4em auto auto);
|
||||
content: $navigation-more-pin;
|
||||
color: $navigation-more-pin-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: $navigation-ul-submenu-padding-left;
|
||||
//@include media($horizontal-bar-mode) {
|
||||
left: -$navigation-submenu-padding;
|
||||
position: absolute;
|
||||
top: $navigation-ul-submenu-top;
|
||||
//}
|
||||
|
||||
.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: $navigation-border-radius;
|
||||
border-top-right-radius: $navigation-border-radius;
|
||||
}
|
||||
|
||||
&:last-child > a {
|
||||
border-bottom-left-radius: $navigation-border-radius;
|
||||
border-bottom-right-radius: $navigation-border-radius;
|
||||
padding-bottom: $navigation-last-padding-bottom;
|
||||
}
|
||||
//}
|
||||
|
||||
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: $navigation-search-padding;
|
||||
position: relative;
|
||||
|
||||
input[type=search] {
|
||||
//background: $navigation-search-background;
|
||||
//border: $navigation-search-border;
|
||||
padding: .6em .55em;
|
||||
padding-right: 3.5em;
|
||||
width: calc(100% - 4.5em);
|
||||
//padding: .6em .8em;
|
||||
//padding: 0 30px 0 10px;
|
||||
font-size: .9em;
|
||||
//color: $navigation-color;
|
||||
//border-radius: $navigation-border-radius * 2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 7px 12px;
|
||||
position: absolute;
|
||||
top: .99em;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
ul li.nav-link2 {
|
||||
position: relative;
|
||||
padding-right: 2em;
|
||||
text-align: left;
|
||||
line-height: $navigation-height;
|
||||
z-index: 9999;
|
||||
float: left;
|
||||
list-style: none;
|
||||
|
||||
& div.li-content {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
|
||||
a.more:after {
|
||||
content: $navigation-more-pin;
|
||||
color: $navigation-more-pin-color;
|
||||
padding-left: 0.4em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
line-height: normal;
|
||||
list-style: none;
|
||||
background-color: #333;
|
||||
padding-right: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
padding-top:0.7em;
|
||||
padding-bottom:0.7em;
|
||||
|
||||
&:first-child {
|
||||
padding-top: $navigation-first-padding-top;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $navigation-first-padding-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
color: $navigation-color;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: $navigation-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "../custom/modules/navigation";
|
||||
Reference in New Issue
Block a user