18b6d580c5
Based on the review here: https://github.com/angular/angular/pull/24976#issuecomment-415535125 PR Close #24976
46 lines
884 B
SCSS
46 lines
884 B
SCSS
/*
|
|
* General styling to make detail/summary tags look a bit more material
|
|
* To get the best out of it you should structure your usage like this:
|
|
*
|
|
* ```
|
|
* <details>
|
|
* <summary>Some title</summary>
|
|
* <div class="details-content">
|
|
* Some content
|
|
* </div>
|
|
* </details>
|
|
*
|
|
*/
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
position: relative;
|
|
padding: 16px 24px;
|
|
color: $black;
|
|
height: 16px;
|
|
display: block; // Remove the built in details marker in FF
|
|
|
|
&::-webkit-details-marker {
|
|
display: none; // Remove the built in details marker in webkit
|
|
}
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
details {
|
|
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
|
|
|
.detail-contents {
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
// Rotate the icon
|
|
summary i.material-icons.expand {
|
|
@include rotate(0deg);
|
|
}
|
|
&[open] > summary i.material-icons.expand {
|
|
@include rotate(180deg);
|
|
}
|
|
}
|