consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move menu and navigation styles to their own files

Browse Source 
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
2023-01-27 20:48:22 +01:00
parent 3e8c4c4e61
commit d0fcc9022f
4 changed files with 155 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
app/assets/stylesheets/layout.scss
View File

@@ -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
View 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
View 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%;
}
}

2
app/components/layout/account_menu_component.html.erb
View File

@@ -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) %>