(css) Improve styling of autocomplete.scss

This commit is contained in:
Francis Lachapelle
2018-11-06 10:34:15 -05:00
parent c52a45e072
commit 506daaf473
@@ -1,14 +1,14 @@
@import "extends";
/**
* Format suggestions on three lines, in dense mode
*
* From angular-material/src/components/list/list.scss
*/
//
// Format suggestions on three lines, in dense mode
//
// From angular-material/src/components/list/list.scss
//
$dense-baseline-grid: $baseline-grid / 2 !default;
$list-h3-margin: 0 0 0px 0 !default;
$list-h3-margin: 0 0 0 0 !default;
$list-h4-margin: 3px 0 1px 0 !default;
$list-h4-font-weight: 400 !default;
$list-header-line-height: 1.2em !default;
@@ -16,25 +16,25 @@ $list-p-margin: 0 0 0 0 !default;
$list-p-line-height: 1.6em !default;
$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
$list-item-dense-header-font-size: round($subhead-font-size-base * .8) !default;
$list-item-dense-font-size: round($body-font-size-base * .85) !default;
$list-item-dense-line-height: 1.05 !default;
.md-autocomplete-suggestions.md-3-line {
li {
line-height: $list-item-dense-line-height;
height: $list-item-dense-three-line-height;
min-height: $list-item-dense-three-line-height;
@include ie11-min-height-flexbug($list-item-dense-three-line-height);
height: $list-item-dense-three-line-height;
line-height: $list-item-dense-line-height;
min-height: $list-item-dense-three-line-height;
display: flex;
flex: 1 1 auto;
align-items: center;
.md-list-item-text {
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
}
h3,
@@ -43,32 +43,35 @@ $list-item-dense-line-height: 1.05 !default;
line-height: $list-item-dense-line-height;
font-size: $list-item-dense-font-size;
}
h3 {
font-size: $list-item-dense-header-font-size;
}
h3 {
font-weight: 400;
letter-spacing: 0.010em;
letter-spacing: .010em;
line-height: $list-header-line-height;
margin: $list-h3-margin;
line-height: $list-header-line-height;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
h4 {
letter-spacing: 0.010em;
margin: $list-h4-margin;
font-weight: $list-h4-font-weight;
letter-spacing: .010em;
line-height: $list-header-line-height;
margin: $list-h4-margin;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
p {
font-weight: 500;
letter-spacing: 0.010em;
margin: $list-p-margin;
letter-spacing: .010em;
line-height: $list-p-line-height;
margin: $list-p-margin;
}
}
}