pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

app/assets/sass/components/_request-list.scss: rewritten to extend card component

Browse source
This commit is contained in:
Henrik Hautakoski 2018-09-04 23:48:01 +02:00
parent 1e77c2650d
commit fba2c1fa35
2 changed files with 4 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -217,14 +217,5 @@ $callback-list-arrow-color: $callback-list-border-color;
// Request list
// ----------------------------------
$request-item-color: $text-color;
$request-item-secondary-color: $text-secondary-color;
$request-item-background: transparent;
$request-item-border-color: $gray-light;
$request-item-active-color: $request-item-color;
$request-item-active-background: $gray-lightest;
$request-item-active-border-color: $request-item-border-color;
$request-item-hover-background: $request-item-active-background;
$request-detail-background: lighten($brand-color, 45%);

53
app/assets/sass/components/_request-list.scss
View file

@ -1,39 +1,14 @@
.request-list {
@extend .card-accordion;
&-item {
@extend .card;
// Header Section
// --------------
&-header {
display: block;
padding: .5em 1em;
color: $request-item-active-color;
background-color: $request-item-active-background;
border: 1px solid $request-item-active-border-color;
&:hover,
&:active,
&:focus {
color: $request-item-active-color;
text-decoration: none;
}
&.collapsed {
background-color: $request-item-background;
&:hover {
background-color: $request-item-hover-background;
}
&:hover,
&:active,
&:focus {
color: $request-item-color;
}
}
@extend .card-header, .card-header-link;
&-row {
display: block;
@ -80,10 +55,8 @@
// Detail section
// --------------
&-detail {
@extend .card-body;
background-color: $request-detail-background;
border: 1px solid $request-item-border-color;
padding: 1em;
&-headers {
@extend .table, .table-bordered;
@ -104,23 +77,5 @@
margin-bottom: 1em;
}
}
// Border overrides
// ----------------
// Remove bottom border from header for all but last request-item.
&:not(:last-child) &-header {
border-bottom: 0;
}
// Remove top border from detail element for last request-item.
&:last-child &-detail {
border-top: 0;
}
// Remove bottom border from detail element for all but last request-item.
&:not(:last-child) &-detail {
border-bottom: 0;
}
}
}