Widget:TestTabs: Unterschied zwischen den Versionen

keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<style>
<style>
.brizzle {
details div {
background-color: linen;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 1.5em;
}
 
details div > * + * {
    margin-top: 1.5em;
}
 
details + details {
    margin-top: .5rem;
}
 
summary {
    list-style: none;
}
 
summary::-webkit-details-marker {
    display: none;
}
 
summary {
    border: 2px solid #000;
    padding: .75em 1em;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.75rem + .75rem + .75rem);
}
 
summary:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .75rem;
    content: "↓";
    width: 1.75rem;
    height: 1.75rem;
    background-color: #000;
    color: #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
 
details[open] summary {
    background-color: #eee;
}
 
details[open] summary:before {
    content: "↑";
}
 
summary:hover {
    background-color: #eee;
}
}
</style>
</style>
<details open class="brizzle">
<details open>
         <summary class="drizzle">
         <summary>
             How do you create an accordion?
             How do you create an accordion?
         </summary>
         </summary>