diff --git a/css/components/dropbutton.css b/css/components/dropbutton.css index cf8c40a238a17c84e658b85e0fa62f5f2f8fc4b9..a6d9abc16393f814a384e8079e3f69d2d4389f46 100644 --- a/css/components/dropbutton.css +++ b/css/components/dropbutton.css @@ -1,33 +1,62 @@ -/** + /** * @file * General styles for dropbuttons. */ - -.js .dropbutton-widget { - background-color: white; - border: 1px solid #cccccc; -} -.js .dropbutton-widget:hover { - border-color: #b8b8b8; -} -.dropbutton .dropbutton-action > * { - padding: 0.1em 0.5em; - white-space: nowrap; -} -.dropbutton .secondary-action { - border-top: 1px solid #e8e8e8; -} -.dropbutton-multiple .dropbutton { - border-right: 1px solid #e8e8e8; /* LTR */ -} -[dir="rtl"] .dropbutton-multiple .dropbutton { - border-left: 1px solid #e8e8e8; - border-right: 0 none; -} -.dropbutton-multiple .dropbutton .dropbutton-action > * { - margin-right: 0.25em; /* LTR */ -} -[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * { - margin-left: 0.25em; - margin-right: 0; -} + + .js .dropbutton-widget { + background-color: white; + border: 1px solid #cccccc; + } + + .js .dropbutton-widget:hover { + border-color: #b8b8b8; + } + + .dropbutton .dropbutton-action>* { + padding: 0.1em 0.5em; + white-space: nowrap; + } + + .dropbutton .secondary-action { + border-top: 1px solid #e8e8e8; + } + + .dropbutton-multiple .dropbutton { + border-right: 1px solid #e8e8e8; + /* LTR */ + } + + [dir="rtl"] .dropbutton-multiple .dropbutton { + border-left: 1px solid #e8e8e8; + border-right: 0 none; + } + + .dropbutton-multiple .dropbutton .dropbutton-action>* { + margin-right: 0.25em; + /* LTR */ + } + + [dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action>* { + margin-left: 0.25em; + margin-right: 0; + } + + .js td .dropbutton-multiple { + padding-right: 10em; + margin-right: 2em; + max-width: 100%; + } + + .js td .dropbutton-wrapper { + min-height: 2em; + } + + .js .dropbutton-wrapper, + .js .dropbutton-widget { + display: block; + position: relative; + } + + .js td .dropbutton-widget { + position: absolute; + } \ No newline at end of file diff --git a/css/components/form.css b/css/components/form.css index 1464f0150a2799a6680a6a82fc1ec9b5190a4add..00a40b23b4637cdf476f5b5ec1f2768058477e94 100644 --- a/css/components/form.css +++ b/css/components/form.css @@ -14,3 +14,16 @@ height: 7px; margin: 0 0.3em; } + +.form-row>fieldset, +.form-row>div { + padding-right: 5px; + padding-left: 5px; + flex: 0 0 auto; + width: auto; + max-width: none; +} + +.form-row .form-actions { + align-self: flex-end; +} \ No newline at end of file diff --git a/templates/views/views-exposed-form.html.twig b/templates/views/views-exposed-form.html.twig index 3c679ae58326b5df55b78698003767192e72d4dc..6519490f79f04e652f416394dbbf611420d368f9 100644 --- a/templates/views/views-exposed-form.html.twig +++ b/templates/views/views-exposed-form.html.twig @@ -16,6 +16,6 @@ #} {{ q }} {% endif %} -<div class="form--inline clearfix"> +<div class="form-row"> {{ form }} </div>