iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): merge style rules in `_details.scss` (#40704) 

This commit cleans up the styles in `_details.scss` by merging
together blocks that target the same elements.

It also changes the `summary` selector to `details > summary`, but that
should not make any difference in practice, since `<summary>` elements
always appear as direct childs of `<details>`.

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:49:01 +02:00 committed by Alex Rickabaugh
parent 7d45667873
commit 59c9825be7
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
aio/src/styles/2-modules/_details.scss
View File

@ -2,44 +2,44 @@
* General styling to make detail/summary tags look a bit more material * 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: * To get the best out of it you should structure your usage like this:
* *
* ``` * ```html
* <details> * <details>
* <summary>Some title</summary> * <summary>Some title</summary>
* <div class="details-content"> * <div class="details-content">
* Some content * Some content
* </div> * </div>
* </details> * </details>
* * ```
*/ */
summary {
cursor: pointer;
@include font-size(16);
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 { details {
box-shadow: 0 1px 4px 0 rgba($black, 0.37); box-shadow: 0 1px 4px 0 rgba($black, 0.37);
> summary {
cursor: pointer;
@include font-size(16);
position: relative;
padding: 16px 24px;
color: $black;
height: 16px;
display: block; // Remove the built in details marker in FF
overflow: hidden;
&::-webkit-details-marker {
display: none; // Remove the built in details marker in webkit
}
// Rotate the icon
i.material-icons.expand {
@include rotate(0deg);
@at-root #{selector-replace(&, 'details', 'details[open]')} {
@include rotate(180deg);
}
}
}
.detail-contents { .detail-contents {
padding: 16px 24px; padding: 16px 24px;
} }
// Rotate the icon
summary i.material-icons.expand {
@include rotate(0deg);
}
&[open] > summary i.material-icons.expand {
@include rotate(180deg);
}
} }