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;
|
||||
text-align: center;
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
@include breakpoint(large){
|
||||
@include xy-cell(shrink);
|
||||
@include flex-align(left, middle);
|
||||
text-align: unset;
|
||||
|
@ -21,6 +21,7 @@
|
|||
@include xy-cell(12);
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
padding-bottom: $global-padding*2;
|
||||
a, button {
|
||||
color: $black;
|
||||
&:hover {
|
||||
|
@ -30,17 +31,43 @@
|
|||
menu {
|
||||
margin: 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 flex;
|
||||
@include flex-align(right, middle);
|
||||
padding-bottom: 0;//$global-padding;
|
||||
menu {
|
||||
margin: 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
|
||||
|
||||
//.menu {
|
||||
// background-color: rgba(100,250,100,1);
|
||||
// li {
|
||||
// background-color: rgba(250,250,100,1);
|
||||
// padding: 0.7rem 1rem;
|
||||
// a {
|
||||
// background-color: rgba(250,100,250,1);
|
||||
@include breakpoint(small){
|
||||
// .dropdown.menu {
|
||||
// li,.button {
|
||||
// min-width: unset;
|
||||
// margin:0;
|
||||
// padding:0;
|
||||
// }
|
||||
// .button {
|
||||
// background-color:$input-background;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
.dropdown.menu {
|
||||
li,.button {
|
||||
min-width: unset;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.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){
|
||||
}
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
@include breakpoint(large){
|
||||
@include xy-cell(shrink);
|
||||
@include flex-align(left, middle);
|
||||
text-align: unset;
|
||||
|
@ -21,6 +21,7 @@
|
|||
@include xy-cell(12);
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
padding-bottom: $global-padding*2;
|
||||
a, button {
|
||||
color: $black;
|
||||
&:hover {
|
||||
|
@ -30,17 +31,43 @@
|
|||
menu {
|
||||
margin: 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 flex;
|
||||
@include flex-align(right, middle);
|
||||
padding-bottom: 0;//$global-padding;
|
||||
menu {
|
||||
margin: 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
|
||||
|
||||
//.menu {
|
||||
// background-color: rgba(100,250,100,1);
|
||||
// li {
|
||||
// background-color: rgba(250,250,100,1);
|
||||
// padding: 0.7rem 1rem;
|
||||
// a {
|
||||
// background-color: rgba(250,100,250,1);
|
||||
@include breakpoint(small){
|
||||
// .dropdown.menu {
|
||||
// li,.button {
|
||||
// min-width: unset;
|
||||
// margin:0;
|
||||
// padding:0;
|
||||
// }
|
||||
// .button {
|
||||
// background-color:$input-background;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
.dropdown.menu {
|
||||
li,.button {
|
||||
min-width: unset;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.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){
|
||||
}
|
||||
|
||||
.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