archive/httpcb
Archived
1
0
Fork 0
Code Releases Activity

scss: adding list-group component.

Browse source
This commit is contained in:
Henrik Hautakoski 2018-09-01 14:47:42 +02:00
parent 124eb1ef16
commit 56a80ef350
3 changed files with 58 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/assets/sass/_variables.scss
View file

@ -127,6 +127,17 @@ $button-gitlab-bg: $gitlab-color;
$button-linkedin-color: white;
$button-linkedin-bg: $linkedin-color;
// ----------------------------------
// List group
// ----------------------------------
$list-group-item-color: $text-color;
$list-group-item-background: transparent;
$list-group-item-border-color: $gray-light;
$list-group-hover-background: $gray-lightest;
$list-group-item-active-background: $brand-color;
// ----------------------------------
// Shadows
// ----------------------------------

1
app/assets/sass/application.scss
View file

@ -34,6 +34,7 @@
@import "components/spacer";
@import "components/pagination";
@import "components/blankslate";
@import "components/list-group";
@import "components/request-list";
@import "components/callback-list";

46
app/assets/sass/components/_list-group.scss Normal file
View file

@ -0,0 +1,46 @@
.list-group {
padding-left: 0; // for <ul>, reset left padding.
margin-bottom: 0; // for <ul>, reset bottom margin.
&-item {
display: block;
padding: .5em 1em;
color: $list-group-item-color;
background-color: $list-group-item-background;
border: 1px solid $list-group-item-border-color;
&-active {
background-color: $list-group-item-active-background;
}
// Remove bottom border for all but last item.
&:not(:last-child) {
border-bottom: 0;
}
}
}
// Links
// ----------------------------------
.list-group-item-link,
a.list-group-item {
color: $list-group-item-color;
cursor: pointer;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:hover,
&:focus {
background: $list-group-hover-background;
}
}