Skip to content

Commit

Permalink
feat: add listbox styles
Browse files Browse the repository at this point in the history
  • Loading branch information
danielmatthew committed Oct 7, 2021
1 parent 8711ab2 commit 72ebb18
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 0 deletions.
1 change: 1 addition & 0 deletions assets/stylesheets/_bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,4 @@
@import "loader";
@import "skip-link";
@import "error";
@import "listbox";
76 changes: 76 additions & 0 deletions assets/stylesheets/_listbox.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
[role="option"] {
display: block;
padding: 12px;
position: relative;
line-height: 1.6;
color: #017d87;
white-space: nowrap;
border-bottom: 1px solid #e9ecef;
}

[role="option"]:last-child {
border-bottom: none;
}

[role="option"] {
display: flex;
align-items: center;
cursor: pointer;
}

[role="option"] > i {
margin-right: 1rem;
}

[role="option"]:hover {
background: #017d87;
color: white;
}

[role="option"].focused {
background: #017d87;
color: white;
}

[role="option"][aria-selected="true"] {
background-color: #017d87;
color: white;
}

.c-fancy-listbox {
position: relative;
display: block;
vertical-align: middle;
}

.c-fancy-listbox__toggle {
position: relative;
display: flex;
padding: 12px;
justify-content: space-between;
align-items: center;
text-align: left;
transition: none;
}

.c-fancy-listbox__toggle.c-fancy-listbox__toggle[aria-expanded="true"] {
background-color: white;
color: #017d87;
transition: none;
}

.c-fancy-listbox__toggle__value {
display: flex;
align-items: center;
}

.c-fancy-listbox__toggle__value > i {
font-size: 24px;
margin-right: 1rem;
}

.c-fancy-listbox__dropdown {
padding: 0;
width: 100%;
font-weight: 600;
}

0 comments on commit 72ebb18

Please sign in to comment.