Editor, Editors, USER, admin, Bureaucrats, Check users, dev, editor, Interface administrators, lookupuser, oversight, push-subscription-manager, Suppressors, Administrators, translator, widgeteditor
17,894
edits
Changes
no edit summary
background-color: #4CAF50;
background-color: #4CAF50;
color: white;
color: white;
}
/* A C C O R D I O N */
$midnight: #2c3e50;
$clouds: #ecf0f1;
// General
acco {
color: $midnight;
background: $clouds;
padding: 0 1em 1em;
}
acco:h1 {
margin: 0;
line-height: 2;
text-align: center;
}
acco:h2 {
margin: 0 0 .5em;
font-weight: normal;
}
acco:input {
position: absolute;
opacity: 0;
z-index: -1;
}
// Layout
.row {
display:flex;
.col {
flex:1;
&:last-child {
margin-left: 1em;
}
}
}
/* Accordion styles */
.tabs {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
}
.tab {
width: 100%;
color: white;
overflow: hidden;
&-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: $midnight;
font-weight: bold;
cursor: pointer;
/* Icon */
&:hover {
background: darken($midnight, 10%);
}
&::after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
}
&-content {
max-height: 0;
padding: 0 1em;
color: $midnight;
background: white;
transition: all .35s;
}
&-close {
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: $midnight;
cursor: pointer;
&:hover {
background: darken($midnight, 10%);
}
}
}
// :checked
input:checked {
+ .tab-label {
background: darken($midnight, 10%);
&::after {
transform: rotate(90deg);
}
}
~ .tab-content {
max-height: 100vh;
padding: 1em;
}
}
}