Various UI fixes
use .icon-link in various places
This commit is contained in:
@@ -58,6 +58,10 @@
|
||||
|
||||
.block-list__header {
|
||||
@include block-list-header;
|
||||
|
||||
.block-list__header__link {
|
||||
@include icon-link;
|
||||
}
|
||||
}
|
||||
|
||||
.block-list__title {
|
||||
|
@@ -1,4 +1,18 @@
|
||||
@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;
|
||||
@@ -16,6 +30,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-link-large {
|
||||
@include h4;
|
||||
font-weight: normal;
|
||||
|
||||
.icon {
|
||||
@include icon-size(16);
|
||||
margin-right: $gap * 2;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin icon-link-vertical {
|
||||
flex-direction: column;
|
||||
|
||||
@@ -24,19 +48,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
@include icon-link;
|
||||
@include icon-link-color($color-primary);
|
||||
@@ -44,4 +55,8 @@
|
||||
&.icon-link--vertical {
|
||||
@include icon-link-vertical;
|
||||
}
|
||||
|
||||
&.icon-link--large {
|
||||
@include icon-link-large;
|
||||
}
|
||||
}
|
||||
|
@@ -202,11 +202,15 @@ select {
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child .usa-input {
|
||||
margin-top: 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child .usa-input {
|
||||
margin-bottom: 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -216,7 +220,8 @@ select {
|
||||
|
||||
.form-col {
|
||||
.usa-input {
|
||||
margin: 0 ($gap * 4);
|
||||
margin-left: ($gap * 4);
|
||||
margin-right: ($gap * 4);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
@@ -8,44 +8,54 @@
|
||||
@include panel-margin;
|
||||
min-width: 100%;
|
||||
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
@include block-list-header;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
td {
|
||||
@include block-list-item;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
tbody {
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
border-bottom-style: solid;
|
||||
@include block-list-item;
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
border-bottom-style: dashed;
|
||||
border-top: none;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-cell--shrink {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.table-cell--expand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-cell--hide-small {
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-cell--shrink {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.table-cell--expand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-cell--hide-small {
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
@include block-list-header;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
@@ -5,19 +5,8 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.project-list-item__environment__link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
@include icon-color($color-primary);
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@include icon-link;
|
||||
@include icon-link-large;
|
||||
}
|
||||
|
||||
.project-list-item__environment__members {
|
||||
|
Reference in New Issue
Block a user