Remove one DOM level for lint name filter input and controls

Author: GuillaumeGomez

util/gh-pages/index_template.html

@@ -152,13 +152,11 @@ <h1 class="page-header">Clippy Lints <span class="badge">Total number: {{+ count
                 </div> {# #}
             </div> {# #}
             <div class="search-control"> {# #}
-                <div class="input-group"> {# #}
-                    <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
-                    <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
-                    <button id="filter-clear" type="button"> {# #}
-                        Clear {# #}
-                    </button> {# #}
-                </div> {# #}
+                <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
+                <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
+                <button id="filter-clear" type="button"> {# #}
+                    Clear {# #}
+                </button> {# #}
             </div> {# #}
             <div class="btn-group expansion-group"> {# #}
                 <button title="Collapse All" class="btn-default expansion-control" type="button" id="collapse-all"> {# #}

util/gh-pages/style.css

@@ -239,45 +239,45 @@ article:hover .panel-title-name .anchor { display: inline;}
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
+    display: flex;
 }
 
-.input-group {
-    position: relative;
+#filter-label {
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    white-space: nowrap;
     display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 }
-.input-group > :last-child {
+.search-control > :last-child {
     border-left: 0;
 }
-.input-group > :first-child, .btn-group > :first-child {
+.btn-group > :first-child {
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-.input-group > :last-child, .btn-group > :last-child {
+.search-control > :last-child, .btn-group > :last-child {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.input-group .form-control:not(:first-child):not(:last-child) {
+.search-control .form-control:not(:first-child):not(:last-child) {
     border-radius: 0;
 }
 .form-control:focus {
     border-color: #66afe9;
     outline: 0;
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
 }
-.input-group-addon {
-    padding: 6px 12px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 1;
-    text-align: center;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
 .glyphicon.glyphicon-collapse-up::before, .glyphicon.glyphicon-collapse-down::before {
     --background-img-size: 14px;
@@ -340,6 +340,7 @@ article:hover .panel-title-name .anchor { display: inline;}
 @media (min-width: 992px) {
     .search-control {
         margin-top: 0;
+        align-self: flex-start;
     }
     .container {
         width: 970px;