top menu nav styles for smaller screens and big screens
This commit is contained in:
parent
c1e1c1437f
commit
577977bfb3
File diff suppressed because one or more lines are too long
|
@ -10,7 +10,7 @@
|
||||||
min-width: 14rem;
|
min-width: 14rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(large){
|
||||||
@include xy-cell(shrink);
|
@include xy-cell(shrink);
|
||||||
@include flex-align(left, middle);
|
@include flex-align(left, middle);
|
||||||
text-align: unset;
|
text-align: unset;
|
||||||
|
@ -21,6 +21,7 @@
|
||||||
@include xy-cell(12);
|
@include xy-cell(12);
|
||||||
@include flex;
|
@include flex;
|
||||||
@include flex-align(center, middle);
|
@include flex-align(center, middle);
|
||||||
|
padding-bottom: $global-padding*2;
|
||||||
a, button {
|
a, button {
|
||||||
color: $black;
|
color: $black;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -30,17 +31,43 @@
|
||||||
menu {
|
menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 0.8rem;
|
.menu {
|
||||||
|
&.dropdown {
|
||||||
|
justify-content:center;
|
||||||
|
li,.button {
|
||||||
|
min-width: unset;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
font-size: $global-font-size*0.9;//$header-menu-font-size;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
background-color:$input-background;
|
||||||
|
}
|
||||||
|
.is-dropdown-submenu {
|
||||||
|
font-size: $dropdown-font-size * 0.95;
|
||||||
|
min-width: 10rem;
|
||||||
|
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(large) {
|
||||||
@include xy-cell(auto);
|
@include xy-cell(auto);
|
||||||
@include flex;
|
@include flex;
|
||||||
@include flex-align(right, middle);
|
@include flex-align(right, middle);
|
||||||
|
padding-bottom: 0;//$global-padding;
|
||||||
menu {
|
menu {
|
||||||
margin: inherit;
|
margin: inherit;
|
||||||
padding: inherit;
|
padding: inherit;
|
||||||
font-size: $global-font-size*1.5;
|
.menu {
|
||||||
|
&.dropdown {
|
||||||
|
justify-content: end;
|
||||||
|
li,.button {
|
||||||
|
font-size: $global-font-size*1.4;//$header-menu-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,29 +1,23 @@
|
||||||
// navigation scss
|
@include breakpoint(small){
|
||||||
|
// .dropdown.menu {
|
||||||
//.menu {
|
// li,.button {
|
||||||
// background-color: rgba(100,250,100,1);
|
// min-width: unset;
|
||||||
// li {
|
// margin:0;
|
||||||
// background-color: rgba(250,250,100,1);
|
// padding:0;
|
||||||
// padding: 0.7rem 1rem;
|
// }
|
||||||
// a {
|
// .button {
|
||||||
// background-color: rgba(250,100,250,1);
|
// background-color:$input-background;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
//}
|
//
|
||||||
|
// .is-dropdown-submenu {
|
||||||
.dropdown.menu {
|
// font-size: $dropdown-font-size * 0.95;
|
||||||
li,.button {
|
// min-width: 10rem;
|
||||||
min-width: unset;
|
// box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
||||||
margin:0;
|
// }
|
||||||
padding:0;
|
}
|
||||||
}
|
@include breakpoint(medium){
|
||||||
.button {
|
}
|
||||||
background-color:$input-background;
|
@include breakpoint(large){
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-dropdown-submenu {
|
|
||||||
font-size: $dropdown-font-size * 0.95;
|
|
||||||
min-width: 10rem;
|
|
||||||
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
|
||||||
}
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
min-width: 14rem;
|
min-width: 14rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(large){
|
||||||
@include xy-cell(shrink);
|
@include xy-cell(shrink);
|
||||||
@include flex-align(left, middle);
|
@include flex-align(left, middle);
|
||||||
text-align: unset;
|
text-align: unset;
|
||||||
|
@ -21,6 +21,7 @@
|
||||||
@include xy-cell(12);
|
@include xy-cell(12);
|
||||||
@include flex;
|
@include flex;
|
||||||
@include flex-align(center, middle);
|
@include flex-align(center, middle);
|
||||||
|
padding-bottom: $global-padding*2;
|
||||||
a, button {
|
a, button {
|
||||||
color: $black;
|
color: $black;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -30,17 +31,43 @@
|
||||||
menu {
|
menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 0.8rem;
|
.menu {
|
||||||
|
&.dropdown {
|
||||||
|
justify-content:center;
|
||||||
|
li,.button {
|
||||||
|
min-width: unset;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
font-size: $global-font-size*0.9;//$header-menu-font-size;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
background-color:$input-background;
|
||||||
|
}
|
||||||
|
.is-dropdown-submenu {
|
||||||
|
font-size: $dropdown-font-size * 0.95;
|
||||||
|
min-width: 10rem;
|
||||||
|
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include breakpoint(medium){
|
@include breakpoint(large) {
|
||||||
@include xy-cell(auto);
|
@include xy-cell(auto);
|
||||||
@include flex;
|
@include flex;
|
||||||
@include flex-align(right, middle);
|
@include flex-align(right, middle);
|
||||||
|
padding-bottom: 0;//$global-padding;
|
||||||
menu {
|
menu {
|
||||||
margin: inherit;
|
margin: inherit;
|
||||||
padding: inherit;
|
padding: inherit;
|
||||||
font-size: $global-font-size*1.5;
|
.menu {
|
||||||
|
&.dropdown {
|
||||||
|
justify-content: end;
|
||||||
|
li,.button {
|
||||||
|
font-size: $global-font-size*1.4;//$header-menu-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,29 +1,23 @@
|
||||||
// navigation scss
|
@include breakpoint(small){
|
||||||
|
// .dropdown.menu {
|
||||||
//.menu {
|
// li,.button {
|
||||||
// background-color: rgba(100,250,100,1);
|
// min-width: unset;
|
||||||
// li {
|
// margin:0;
|
||||||
// background-color: rgba(250,250,100,1);
|
// padding:0;
|
||||||
// padding: 0.7rem 1rem;
|
// }
|
||||||
// a {
|
// .button {
|
||||||
// background-color: rgba(250,100,250,1);
|
// background-color:$input-background;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
//}
|
//
|
||||||
|
// .is-dropdown-submenu {
|
||||||
.dropdown.menu {
|
// font-size: $dropdown-font-size * 0.95;
|
||||||
li,.button {
|
// min-width: 10rem;
|
||||||
min-width: unset;
|
// box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
||||||
margin:0;
|
// }
|
||||||
padding:0;
|
}
|
||||||
}
|
@include breakpoint(medium){
|
||||||
.button {
|
}
|
||||||
background-color:$input-background;
|
@include breakpoint(large){
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-dropdown-submenu {
|
|
||||||
font-size: $dropdown-font-size * 0.95;
|
|
||||||
min-width: 10rem;
|
|
||||||
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue