Skip to content

Commit

Permalink
fix(select): bigger height for underline on focus (#5510)
Browse files Browse the repository at this point in the history
* On focus the underline height should be as twice as big as the normal height. This is similar to the input component of Angular Material.
* Replaces the `aria-disabled` attribute selectors with the `mat-select-disabled` class.

Fixes #5499
  • Loading branch information
devversion authored and jelbourn committed Jul 14, 2017
1 parent e21b64c commit 78f0cec
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions src/lib/select/select.scss
Expand Up @@ -10,6 +10,7 @@ $mat-select-trigger-min-width: 112px !default;
$mat-select-arrow-size: 5px !default;
$mat-select-arrow-margin: 4px !default;
$mat-select-panel-max-height: 256px !default;
$mat-select-trigger-underline-height: 1px !default;

.mat-select {
display: inline-block;
Expand All @@ -25,7 +26,7 @@ $mat-select-panel-max-height: 256px !default;
position: relative;
box-sizing: border-box;

[aria-disabled='true'] & {
.mat-select-disabled & {
@include user-select(none);
cursor: default;
}
Expand All @@ -36,9 +37,13 @@ $mat-select-panel-max-height: 256px !default;
bottom: 0;
left: 0;
right: 0;
height: 1px;
height: $mat-select-trigger-underline-height;

[aria-disabled='true'] & {
.mat-select:focus & {
height: $mat-select-trigger-underline-height * 2;
}

.mat-select-disabled & {
@include mat-control-disabled-underline();
background-color: transparent;
background-position: 0 bottom;
Expand Down

0 comments on commit 78f0cec

Please sign in to comment.