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
110 lines
1.7 KiB
SCSS
110 lines
1.7 KiB
SCSS
@mixin icon-link-color(
|
|
$color: $color-blue,
|
|
$hover-color: $color-aqua-lightest
|
|
) {
|
|
color: $color;
|
|
|
|
&:hover {
|
|
background-color: $hover-color;
|
|
color: $color;
|
|
}
|
|
|
|
.icon {
|
|
@include icon-color($color);
|
|
}
|
|
}
|
|
|
|
@mixin icon-link {
|
|
@include icon-link-color($color-primary);
|
|
@include h5;
|
|
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: $gap;
|
|
text-decoration: none;
|
|
background: none;
|
|
transition: background-color $hover-transition-time;
|
|
border-radius: $gap / 2;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
@include icon-color($color-primary);
|
|
@include icon-size(16);
|
|
|
|
margin-right: $gap;
|
|
|
|
&--help {
|
|
position: relative;
|
|
bottom: -3px;
|
|
}
|
|
|
|
&--info {
|
|
position: relative;
|
|
bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin icon-link-large {
|
|
@include h4;
|
|
|
|
font-weight: $font-normal;
|
|
}
|
|
|
|
@mixin icon-link-vertical {
|
|
flex-direction: column;
|
|
|
|
.icon {
|
|
margin: 0 $gap $gap;
|
|
}
|
|
}
|
|
|
|
.icon-link {
|
|
@include icon-link;
|
|
@include icon-link-color($color-primary);
|
|
|
|
text-decoration: underline;
|
|
|
|
&--vertical {
|
|
@include icon-link-vertical;
|
|
}
|
|
|
|
&--large {
|
|
@include icon-link-large;
|
|
}
|
|
|
|
&--danger {
|
|
@include icon-link-color($color-red, $color-red-lightest);
|
|
}
|
|
|
|
&--default {
|
|
@include icon-link-color($color-black-light, $color-gray-lightest);
|
|
}
|
|
|
|
&--download {
|
|
@include icon-link-color($color-black);
|
|
font-weight: $font-normal;
|
|
padding-left: 0;
|
|
|
|
.icon {
|
|
@include icon-color($color-green);
|
|
}
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: 0.3;
|
|
text-decoration: none;
|
|
pointer-events: none;
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
background: inherit;
|
|
}
|
|
}
|
|
|
|
&--left {
|
|
padding-left: 0;
|
|
}
|
|
}
|