add toggle to resize infobox
This commit is contained in:
@@ -45,4 +45,43 @@
|
||||
.infobox_part:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.infobox_toggle {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
// Shrink infobox size when toggle is off
|
||||
.infobox_checkbox ~ .infobox_body {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.infobox_checkbox:checked ~ .infobox_body {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
// Show toggle button as down when infobox is shrunk
|
||||
.infobox_checkbox ~ .infobox_toggle .infobox_label_down {
|
||||
display: block;
|
||||
}
|
||||
.infobox_checkbox ~ .infobox_toggle .infobox_label_up {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show toggle button as up when infobox is expanded
|
||||
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_up {
|
||||
display: block;
|
||||
}
|
||||
.infobox_checkbox:checked ~ .infobox_toggle .infobox_label_down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide main image when toggle is off
|
||||
.infobox_checkbox ~ .infobox_body img.infobox_part {
|
||||
display: none;
|
||||
}
|
||||
.infobox_checkbox:checked ~ .infobox_body img.infobox_part {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user