diff options
| -rw-r--r-- | ext/bg/css/settings.css | 30 | ||||
| -rw-r--r-- | ext/bg/settings.html | 3 |
2 files changed, 32 insertions, 1 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; + } +} diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 4db0a9b0..1406826b 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -105,7 +105,8 @@ <div class="input-group-addon condition-prefix"></div> <div class="input-group-btn"><select class="form-control btn btn-default condition-type"><optgroup label="Type"></optgroup></select></div> <div class="input-group-btn"><select class="form-control btn btn-default condition-operator"><optgroup label="Operator"></optgroup></select></div> - <input type="text" class="form-control" /> + <div class="condition-line-break"></div> + <div class="condition-input"><input type="text" class="form-control" /></div> <div class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div> </div></template> <template id="condition-group-separator-template"><div class="input-group"> |