Move menu and navigation styles to their own files
This way we follow the convention of one stylesheet per component. Note that we depend on Foundation's `menu` class for some of the styles and JavaScript behavior, so we're keeping both the `menu` and `account-menu` classes.
This commit is contained in:
Javi Martín
@@ -577,72 +577,6 @@ body > header,
|
||||
background: none;
|
||||
}
|
||||
|
||||
.menu > li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
line-height: inherit;
|
||||
padding-left: 0;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
font-size: $small-font-size;
|
||||
padding: rem-calc(8) rem-calc(16);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: none;
|
||||
text-align: left;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include brand-color;
|
||||
background: $body-background;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-submenu {
|
||||
|
||||
&.is-active a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
||||
@include breakpoint(small only) {
|
||||
border-bottom: 1px solid $border;
|
||||
margin-bottom: $line-height;
|
||||
margin-top: $line-height / 2;
|
||||
padding-bottom: $line-height;
|
||||
|
||||
.submenu {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dropdown-submenu {
|
||||
@extend %body-colors;
|
||||
margin: 0;
|
||||
margin-top: rem-calc(-12);
|
||||
padding: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.is-submenu-item {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-title {
|
||||
line-height: $line-height;
|
||||
margin-right: 0;
|
||||
@@ -731,96 +665,6 @@ body > header,
|
||||
}
|
||||
}
|
||||
|
||||
.subnavigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include background-with-text-contrast($subnavigation, subnavigation);
|
||||
flex-direction: row;
|
||||
padding-bottom: 0;
|
||||
|
||||
> :first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
@include breakpoint(medium) {
|
||||
display: inline-block;
|
||||
margin-right: rem-calc(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding-bottom: $line-height / 2;
|
||||
padding-top: $line-height / 2;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
width: auto;
|
||||
|
||||
&:hover {
|
||||
@include anchor-color;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@include brand-color;
|
||||
border-bottom: 2px solid;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
padding-top: $line-height / 4;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-field {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.input-group-button {
|
||||
line-height: $line-height * 1.5;
|
||||
padding-bottom: 0;
|
||||
|
||||
button {
|
||||
@include background-with-text-contrast($border);
|
||||
border: 1px solid #ccc;
|
||||
border-left: 0;
|
||||
height: $line-height * 1.5;
|
||||
line-height: $line-height * 1.5;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: $line-height * 1.5 !important;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
|
||||
.is-active {
|
||||
|
||||
65
app/assets/stylesheets/layout/account_menu.scss
Normal file
65
app/assets/stylesheets/layout/account_menu.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.account-menu.menu {
|
||||
|
||||
@include breakpoint(small only) {
|
||||
margin-top: $line-height / 2;
|
||||
|
||||
&,
|
||||
.menu {
|
||||
border-bottom: 1px solid $border;
|
||||
margin-bottom: $line-height;
|
||||
padding-bottom: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.is-dropdown-submenu {
|
||||
@extend %body-colors;
|
||||
margin: 0;
|
||||
margin-top: rem-calc(-12);
|
||||
padding: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.is-submenu-item {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
line-height: inherit;
|
||||
padding-left: 0;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
font-size: $small-font-size;
|
||||
padding: rem-calc(8) rem-calc(16);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: none;
|
||||
text-align: left;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include brand-color;
|
||||
background: $body-background;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-submenu {
|
||||
|
||||
&.is-active a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
89
app/assets/stylesheets/layout/subnavigation.scss
Normal file
89
app/assets/stylesheets/layout/subnavigation.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
.subnavigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include background-with-text-contrast($subnavigation, subnavigation);
|
||||
flex-direction: row;
|
||||
padding-bottom: 0;
|
||||
|
||||
> :first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
@include breakpoint(medium) {
|
||||
display: inline-block;
|
||||
margin-right: rem-calc(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding-bottom: $line-height / 2;
|
||||
padding-top: $line-height / 2;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
width: auto;
|
||||
|
||||
&:hover {
|
||||
@include anchor-color;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@include brand-color;
|
||||
border-bottom: 2px solid;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
padding-top: $line-height / 4;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-field {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.input-group-button {
|
||||
line-height: $line-height * 1.5;
|
||||
padding-bottom: 0;
|
||||
|
||||
button {
|
||||
@include background-with-text-contrast($border);
|
||||
border: 1px solid #ccc;
|
||||
border-left: 0;
|
||||
height: $line-height * 1.5;
|
||||
line-height: $line-height * 1.5;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: $line-height * 1.5 !important;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
<ul class="menu" data-responsive-menu="medium-dropdown">
|
||||
<ul class="account-menu menu" data-responsive-menu="medium-dropdown">
|
||||
<%= render Layout::AdminLoginItemsComponent.new(user) %>
|
||||
<%= render Layout::NotificationItemComponent.new(user) %>
|
||||
<%= render Layout::LoginItemsComponent.new(user) %>
|
||||
|
||||
Reference in New Issue
Block a user