Difference between revisions of "Template:SMMU-China/CSS notebook"
| (6 intermediate revisions by 2 users not shown) | |||
| Line 6: | Line 6: | ||
*/ | */ | ||
.collapse-init summary + * { | .collapse-init summary + * { | ||
| − | + | transition: all 0.25s ease-in-out; | |
| − | + | overflow: hidden; | |
} | } | ||
| Line 16: | Line 16: | ||
*/ | */ | ||
.collapse-init :not(.panel-active) summary + * { | .collapse-init :not(.panel-active) summary + * { | ||
| − | + | height: 0; | |
| − | + | opacity: 0; | |
| − | + | -webkit-transform: scale(0.9); | |
| − | + | transform: scale(0.9); | |
| − | + | -webkit-transform-origin: bottom center; | |
| − | + | transform-origin: bottom center; | |
} | } | ||
.collapse-init summary { | .collapse-init summary { | ||
| − | + | list-style: none; | |
} | } | ||
.collapse-init summary::-webkit-details-marker { | .collapse-init summary::-webkit-details-marker { | ||
| − | + | display: none; | |
} | } | ||
.collapse-init summary::before { | .collapse-init summary::before { | ||
| − | + | display: none; | |
} | } | ||
.collapse-init summary { | .collapse-init summary { | ||
| − | + | cursor: pointer; | |
} | } | ||
| Line 43: | Line 43: | ||
*/ | */ | ||
.details-styling { | .details-styling { | ||
| − | + | padding: 1em; | |
} | } | ||
::-moz-selection { | ::-moz-selection { | ||
| − | + | background: #fbcb6a; | |
| − | + | color: #4d4433; | |
} | } | ||
::selection { | ::selection { | ||
| − | + | background: #fbcb6a; | |
| − | + | color: #4d4433; | |
} | } | ||
[type=checkbox] { | [type=checkbox] { | ||
| − | + | opacity: 0; | |
| − | + | position: absolute; | |
| − | + | width: 0; | |
| − | + | height: 0; | |
} | } | ||
[type=checkbox] + label { | [type=checkbox] + label { | ||
| − | + | background: #ffe9ec; | |
| − | + | border-left: 4px solid #b63b4d; | |
| − | + | cursor: pointer; | |
| − | + | display: block; | |
| − | + | font-size: 1rem; | |
| − | + | font-weight: 700; | |
| − | + | text-align: left; | |
| − | + | transition: 0.1s; | |
| − | + | padding: 0.75em 1em; | |
} | } | ||
[type=checkbox] + label::before { | [type=checkbox] + label::before { | ||
| − | + | border: 2px solid; | |
| − | + | border-radius: 2px; | |
| − | + | color: #b63b4d; | |
| − | + | content: ''; | |
| − | + | display: inline-block; | |
| − | + | margin-right: 0.75ch; | |
| − | + | transition: 0.1s; | |
| − | + | width: 1ch; | |
| − | + | height: 1ch; | |
| − | + | vertical-align: baseline; | |
} | } | ||
[type=checkbox]:focus + label { | [type=checkbox]:focus + label { | ||
| − | + | outline: 2px solid #b63b4d; | |
} | } | ||
[type=checkbox]:checked + label::before { | [type=checkbox]:checked + label::before { | ||
| − | + | background: currentColor; | |
| − | + | box-shadow: inset 0 0 0 2px #fff; | |
} | } | ||
.container { | .container { | ||
| − | + | box-shadow: 0.2em 1em 2em -1em #d6d1e0; | |
| − | + | margin: 2.4em 0; | |
} | } | ||
details { | details { | ||
| − | + | background: #fff; | |
| − | + | border: 1px solid #d6d1e0; | |
| − | + | border-bottom: 0; | |
| − | + | list-style: none; | |
} | } | ||
details:first-child { | details:first-child { | ||
| − | + | border-radius: 6px 6px 0 0; | |
} | } | ||
details:last-child { | details:last-child { | ||
| − | + | border-bottom: 1px solid #d6d1e0; | |
| − | + | border-radius: 0 0 6px 6px; | |
} | } | ||
summary { | summary { | ||
| − | + | display: block; | |
| − | + | font-size:25px; | |
| − | + | transition: 0.2s; | |
| − | + | font-weight: 700; | |
| + | padding: 1em; | ||
} | } | ||
summary:focus { | summary:focus { | ||
| − | + | outline: 2px solid #b63b4d; | |
} | } | ||
.collapse-init summary::after { | .collapse-init summary::after { | ||
| − | + | border-right: 2px solid; | |
| − | + | border-bottom: 2px solid; | |
| − | + | content: ''; | |
| − | + | float: right; | |
| − | + | width: 0.5em; | |
| − | + | height: auto; | |
| − | + | margin-top: 0.25em; | |
| − | + | -webkit-transform: rotate(45deg); | |
| − | + | transform: rotate(45deg); | |
| − | + | transition: inherit; | |
} | } | ||
[open] summary { | [open] summary { | ||
| − | + | background: #b63b4d; | |
| − | + | color: #f8f5fe; | |
} | } | ||
[open] summary::after { | [open] summary::after { | ||
| − | + | margin-top: 0.5em; | |
| − | + | -webkit-transform: rotate(225deg); | |
| − | + | transform: rotate(225deg); | |
} | } | ||
Latest revision as of 02:00, 20 October 2019
/*
Please wrap your collapsible content in a single element or so help me Must add a transition or it breaks because that's the whole purpose of this Only one transition-duration works (see explanation on line #141 in JS) You can add more to an inner wrapper (.details-styling)
- /
.collapse-init summary + * {
transition: all 0.25s ease-in-out; overflow: hidden;
}
/*
Closed state. Any CSS transitions work here The JS has a height calculation to make sliding opened/closed easier, but it's not necessary Remove the height prop for a simple toggle on/off (after all that work I did for you?)
- /
.collapse-init :not(.panel-active) summary + * {
height: 0; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.collapse-init summary {
list-style: none;
} .collapse-init summary::-webkit-details-marker {
display: none;
} .collapse-init summary::before {
display: none;
} .collapse-init summary {
cursor: pointer;
}
/*
This element exists so .details-wrapper has no extra margin/padding that can screw with the smooth height collapse You can style .details-wrapper decoratively but avoid anything that modifies the box and add it to .details-styling instead Otherwise, this element is totally optional. Remove if you hate divitis
- /
.details-styling {
padding: 1em;
}
- -moz-selection {
background: #fbcb6a; color: #4d4433;
}
- selection {
background: #fbcb6a; color: #4d4433;
}
[type=checkbox] {
opacity: 0; position: absolute; width: 0; height: 0;
} [type=checkbox] + label {
background: #ffe9ec; border-left: 4px solid #b63b4d; cursor: pointer; display: block; font-size: 1rem; font-weight: 700; text-align: left; transition: 0.1s; padding: 0.75em 1em;
} [type=checkbox] + label::before {
border: 2px solid; border-radius: 2px; color: #b63b4d; content: ; display: inline-block; margin-right: 0.75ch; transition: 0.1s; width: 1ch; height: 1ch; vertical-align: baseline;
} [type=checkbox]:focus + label {
outline: 2px solid #b63b4d;
} [type=checkbox]:checked + label::before {
background: currentColor; box-shadow: inset 0 0 0 2px #fff;
}
.container {
box-shadow: 0.2em 1em 2em -1em #d6d1e0; margin: 2.4em 0;
}
details {
background: #fff; border: 1px solid #d6d1e0; border-bottom: 0; list-style: none;
} details:first-child {
border-radius: 6px 6px 0 0;
} details:last-child {
border-bottom: 1px solid #d6d1e0; border-radius: 0 0 6px 6px;
}
summary {
display: block; font-size:25px; transition: 0.2s; font-weight: 700; padding: 1em;
} summary:focus {
outline: 2px solid #b63b4d;
} .collapse-init summary::after {
border-right: 2px solid; border-bottom: 2px solid; content: ; float: right; width: 0.5em; height: auto; margin-top: 0.25em; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: inherit;
} [open] summary {
background: #b63b4d; color: #f8f5fe;
} [open] summary::after {
margin-top: 0.5em; -webkit-transform: rotate(225deg); transform: rotate(225deg);
}