Make layout fully responsive using matchMedia('(max-width: 799px)')

This commit is contained in:
the-djmaze 2023-02-23 13:54:32 +01:00
parent 1dbd9bda0c
commit e1833ae032
64 changed files with 239 additions and 434 deletions

View file

@ -5,38 +5,36 @@
// Make the div behave like a button
.btn-group {
margin-right: 3px;
position: relative;
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
}
.btn-group + .btn-group {
margin-left: 3px;
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
.btn-group {
display: inline-block;
}
.btn + .btn,
.btn-group + .btn,
.btn + .btn-group {
margin-left: 3px;
* {
margin-right: 3px;
}
*:last-child {
margin-right: 0;
}
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
.btn-group > * {
border-radius: 0;
position: relative;
margin-right: 0;
}
.btn-group > .btn + .btn {
.btn-group > * + * {
margin-left: -1px;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}