aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-09-28 13:30:41 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-09-28 16:04:22 -0400
commit9b929ffcd4bf34b784b94137f636a8a483b1f18e (patch)
treea205e19835b981013a37a09986cfc32c72606eba /ext/bg/css
parent4e0fe1d5fb53bdd2e6c1c061127bca4053dec922 (diff)
Add wrapping for usage conditions on small screens
Diffstat (limited to 'ext/bg/css')
-rw-r--r--ext/bg/css/settings.css30
1 files changed, 30 insertions, 0 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 150209e3..12bbe8a8 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -48,6 +48,20 @@
border-color: #f00000;
}
+.condition {
+ display: flex;
+ -flex-wrap: wrap;
+}
+.condition-input {
+ flex: 1 1 auto;
+}
+.condition-line-break {
+ flex: 1 0 100%;
+ display: none;
+}
+.condition>.input-group-btn {
+ width: auto;
+}
.condition>.condition-prefix:after {
content: "IF";
}
@@ -55,6 +69,9 @@
content: "AND";
}
+.input-group .condition-prefix {
+ flex: 0 0 auto;
+}
.input-group .condition-prefix,
.input-group .condition-group-separator-label {
width: 60px;
@@ -122,3 +139,16 @@
margin-top: 15px;
}
}
+
+@media screen and (max-width: 600px) {
+ .condition {
+ flex-wrap: wrap;
+ }
+ .condition-input {
+ order: 2;
+ }
+ .condition-line-break {
+ display: block;
+ order: 1;
+ }
+}