/
option.scss
88 lines (75 loc) · 2.67 KB
/
option.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@use '../style/menu-common';
@use '../style/vendor-prefixes';
@use '../style/layout-common';
@use '../style/private';
@use '../../../cdk/a11y';
.mat-option {
@include menu-common.item-base();
position: relative;
cursor: pointer;
outline: none;
display: flex;
flex-direction: row;
max-width: 100%;
box-sizing: border-box;
align-items: center;
-webkit-tap-highlight-color: transparent;
&[aria-disabled='true'] {
@include vendor-prefixes.user-select(none);
cursor: default;
}
.mat-optgroup &:not(.mat-option-multiple) {
padding-left: menu-common.$side-padding * 2;
[dir='rtl'] & {
padding-left: menu-common.$side-padding;
padding-right: menu-common.$side-padding * 2;
}
}
@include a11y.high-contrast(active, off) {
$high-contrast-border-width: 1px;
// Add a margin to offset the border that we're adding to active option, in order
// to avoid the options shifting as the user is moving through the list.
margin: 0 $high-contrast-border-width;
&.mat-active {
// We use a border here, rather than an outline, because the outline will be cut off
// by the `overflow: hidden` on the panel wrapping the options, whereas a border
// will push the element inwards. This could be done using `outline-offset: -1px`,
// however the property isn't supported on IE11.
border: solid $high-contrast-border-width currentColor;
margin: 0;
}
// Fade out the option when it is disabled so that it can be distinguished from the enabled
// options. Note that ideally we'd use `color: GreyText` here which is what the browser uses
// for disabled buttons, but we can't because Firefox doesn't recognize it.
&[aria-disabled='true'] {
opacity: 0.5;
}
}
}
// Collapses unwanted whitespace created by newlines in code like the following:
// <mat-option>
// {{value}}
// </mat-option>
.mat-option-text {
display: inline-block;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-option .mat-option-ripple {
@include layout-common.fill;
// Disable pointer events for the ripple container because the container will overlay the
// user content and we don't want to disable mouse events on the user content.
// Pointer events can be safely disabled because the ripple trigger element is the host element.
pointer-events: none;
}
.mat-option-pseudo-checkbox {
$margin: private.private-div(menu-common.$side-padding, 2);
margin-right: $margin;
[dir='rtl'] & {
margin-left: $margin;
margin-right: 0;
}
}