5f99ceee5f
accordion_table.scss refactor audit_log.scss refactor budget_chart.scss refactor delete checklist.scss dod_login_notice.scss refactor empty_state.scss refactor footer.scss refactor forms.scss refactor global_navigation.scss refactor delete member_edit.scss modal.scss refactor refactor portfolio_layout delete search_bar.scss selector.scss refactor sticky_cta.scss refactor refactor topbar.scss refactor accordions.scss refactor action_group.scss refactor block_list.scss refactor card.scss refactor icon css refactor inputs.scss refactor labels.scss refactor panel.scss sidename.scss tables.scss refactor uploader.scss application list and edit refactor home.scss refactor login.scss styles reports.scss refactor task_order.scss refactor
173 lines
2.5 KiB
SCSS
173 lines
2.5 KiB
SCSS
@mixin block-list {
|
|
@include panel-margin;
|
|
@include shadow-panel;
|
|
|
|
padding: 0;
|
|
|
|
ul,
|
|
dl {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@mixin block-list-header {
|
|
@include panel-base;
|
|
@include panel-theme-default;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
background-color: $color-gray-lightest;
|
|
padding: $gap (3 * $gap);
|
|
color: $color-gray;
|
|
|
|
.icon-tooltip {
|
|
margin: -$gap;
|
|
}
|
|
|
|
&--grow {
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin block-list__title {
|
|
@include h4;
|
|
|
|
margin: 0;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
@mixin block-list__description {
|
|
margin-top: $gap * 2;
|
|
}
|
|
|
|
@mixin block-list__footer {
|
|
@include panel-base;
|
|
@include panel-theme-default;
|
|
|
|
padding: $gap * 2;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
|
|
.icon-link {
|
|
&:first-child {
|
|
margin-right: -$gap;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin block-list-item {
|
|
@include panel-base;
|
|
|
|
margin: 0;
|
|
padding: $gap * 2;
|
|
border-top: 0;
|
|
border-bottom: 1px solid $color-gray-lightest;
|
|
|
|
@at-root li#{&} {
|
|
&:last-child {
|
|
border-bottom-style: solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin block-list-selectable-label {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&::before {
|
|
flex-shrink: 0;
|
|
margin-right: 0;
|
|
margin-left: $gap * 2;
|
|
}
|
|
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
.block-list {
|
|
@include block-list;
|
|
|
|
.icon-link {
|
|
margin: (-$gap) 0;
|
|
}
|
|
|
|
.icon-link,
|
|
.label {
|
|
&:first-child {
|
|
margin-left: -$gap;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: -$gap;
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
@include block-list-header;
|
|
}
|
|
|
|
&__title {
|
|
@include block-list__title;
|
|
}
|
|
|
|
&__description {
|
|
@include block-list__description;
|
|
}
|
|
|
|
&__item {
|
|
@include block-list-item;
|
|
|
|
&--selectable {
|
|
> div {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
|
|
@include ie-only {
|
|
width: 100%;
|
|
}
|
|
|
|
> label {
|
|
@include block-list-selectable-label;
|
|
}
|
|
}
|
|
|
|
> label {
|
|
@include block-list-selectable-label;
|
|
}
|
|
|
|
input:checked {
|
|
+ label {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
@include ie-only {
|
|
dl {
|
|
width: 100%;
|
|
padding-left: $gap * 4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
@include block-list__footer;
|
|
|
|
border-top: 0;
|
|
}
|
|
}
|