Skip to content

Add list element feature [Fixes #772] #1720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 2, 2018
Merged

Add list element feature [Fixes #772] #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
03feac5
Add list element feature
danieldaeschle Mar 12, 2018
4a216bc
Move list from elements to components
danieldaeschle Mar 12, 2018
e1c0217
Remove list.sass from elements
danieldaeschle Mar 12, 2018
7d7e4e4
Add is-active to list, Move list-item out of list, Change some things
danieldaeschle Mar 13, 2018
ea389a9
Change display: flex to block
danieldaeschle Mar 13, 2018
d3c4c1f
Change padding and border to shadow
danieldaeschle Mar 14, 2018
d078aef
Change variable names and padding
danieldaeschle Mar 15, 2018
7d1f782
Fix undefined variable bug
danieldaeschle Mar 15, 2018
703057e
Change reference variable to local variable
danieldaeschle Mar 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions sass/components/_all.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
Expand Down
27 changes: 27 additions & 0 deletions sass/components/list.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-radius: $radius !default

$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default

.list
background-color: $list-background-color
box-shadow: $list-shadow
border-radius: $list-radius
&.is-hoverable > .list-item:hover:not(.is-active)
background-color: $list-item-hover-background-color
cursor: pointer

.list-item
color: $list-item-color
display: block
padding: 0.5em 1em
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
&:not(:last-child)
border-bottom: $list-item-border