42 lines
831 B
SCSS
42 lines
831 B
SCSS
|
@use 'sass:selector';
|
||
|
|
@use '../selector-ext';
|
||
|
|
@use '../shadow-dom';
|
||
|
|
|
||
|
|
:host,
|
||
|
|
:host(:not(.hidden)[outlined]),
|
||
|
|
:host .my-class,
|
||
|
|
gm-fab {
|
||
|
|
@include shadow-dom.host-aware(selector.append(&, '[lowered]')) {
|
||
|
|
color: blue;
|
||
|
|
|
||
|
|
@include shadow-dom.host-aware(selector.append(&, ':hover')) {
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include shadow-dom.host-aware(selector.append(&, ':focus'), &) {
|
||
|
|
border-color: green;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Test replacement for deprecated shadow-dom.host-aware() */
|
||
|
|
:host,
|
||
|
|
:host(:not(.hidden)[outlined]),
|
||
|
|
:host .my-class,
|
||
|
|
gm-fab {
|
||
|
|
@include selector-ext.append-strict(&, '[lowered]') {
|
||
|
|
color: blue;
|
||
|
|
|
||
|
|
@include selector-ext.append-strict(&, ':hover') {
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@at-root {
|
||
|
|
#{selector-ext.append-strict(&, ':focus')},
|
||
|
|
& {
|
||
|
|
border-color: green;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|