Fixed styles after last packages update (#2694)

* Fixed styles after last packages update

* Returned default styles from style guide

Author: ygrik

src/components/operations/operation-details/ko/runtime/operation-console.html

@@ -391,12 +391,14 @@ <h3>
                 </summary>
 
                 <!-- ko ifnot: operation().request.isFormData() -->
-                <select aria-label="Programming language" id="requestLanguages" class="form-control"
-                    data-bind="value: $component.selectedLanguage">
-                    <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
-                    <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
-                    <!-- /ko -->
-                </select>
+                <div class="form-group">
+                    <select aria-label="Programming language" id="requestLanguages" class="form-control"
+                        data-bind="value: $component.selectedLanguage">
+                        <!-- ko foreach: { data: requestLanguages, as: 'requestLanguage' } -->
+                        <option data-bind="value: requestLanguage.value, text: requestLanguage.text"></option>
+                        <!-- /ko -->
+                    </select>
+                </div>
 
                 <div class="code-snippet">
                     <div class="code-snippet-heading">

src/components/operations/operation-list/ko/runtime/operation-list.html

@@ -19,7 +19,7 @@
 
 <!-- ko ifnot: apiType() === 'websocket' || apiType() === 'graphql'-->
 <div class="form-inline max-w-500">
-    <div class="d-block flex-grow mw-170">
+    <div class="form-group d-block flex-grow mw-170">
         <input type="search" class="form-control form-control-light" aria-label="Search operations"
             placeholder="Search operations" spellcheck="false" data-bind="textInput: pattern" />
         <tag-input params="{ scope: $component.tagScope, onChange: onTagsChange }"></tag-input>

src/themes/website/styles/forms.scss

@@ -5,8 +5,21 @@ form {
     flex-grow: 1;
 }
 
+.form-label {
+    padding: .375rem .75rem;
+}
+
 .form-control {
+    display: block;
+    background-clip: padding-box;
     width: 100%;
+
+    &.form-control-light {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        background-color: transparent;
+    }
 }
 
 .form-inline {
@@ -98,6 +111,72 @@ input[type="range"] {
     }
 }
 
+input[type=search] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @extend .icon-svg-magnifier;
+    background-position: 5px center;
+    background-size: 1em;
+    background-repeat: no-repeat;
+    padding-left: calc(1em + 10px) !important;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: $switch-width;
+    height: $switch-height;
+    margin: 10px;
+
+    input[type=checkbox] {
+        opacity: 0;
+        width: 0;
+        height: 0;
+
+        &:checked + .slider {
+            background: $switch-background-color-on;
+        }
+
+        &:checked + .slider:before {
+            transform: translateX(26px);
+        }
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        border: 1px solid #ffffff;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: $switch-background-color-off;
+        transition: .4s;
+
+        &.round {
+            border-radius: 34px;
+
+            &:before {
+                border-radius: 50%;
+            }
+        }
+
+        &:before {
+            position: absolute;
+            content: "";
+            height: $switch-trigger-size;
+            width: $switch-trigger-size;
+            left: $switch-trigger-gap;
+            bottom: $switch-trigger-gap + 1px;
+            background: #ffffff;
+            forced-color-adjust: none;
+            border: 1px solid #ffffff;
+            transition: .4s;
+        }
+    }
+}
+
 .input-group {
     padding: 0;
     display: flex;
@@ -130,6 +209,10 @@ input[type="range"] {
         background-color: #fff;
         color: #000;
         border: 1px solid #000;
+        padding-top: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 5px;
     }
 
     .dropdown {
@@ -141,31 +224,31 @@ input[type="range"] {
         left: 0;
         right: 0;
     }
+}
 
-    .select-badge {
-        margin: 0 .5em;
-        font-family: $font-family-base;
-        font-size: 13px;
-
-        select {
-            padding: .625em 1em;
-            padding-right: 2.75em;
-            border: solid white 1px;
-            border-radius: .875em;
-            background: #D9D9D9;
-            outline: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-        }
-
-        .arrow {
-            position: absolute;
-            width: 2em;
-            height: 100%;
-            top: 1px;
-            right: 2px;
-            border-left: solid white 1px;
-            pointer-events: none;
-        }
+.select-badge {
+    margin: 0 .5em;
+    font-family: $font-family-base;
+    font-size: 13px;
+
+    select {
+        padding: .625em 1em;
+        padding-right: 2.75em;
+        border: solid white 1px;
+        border-radius: .875em;
+        background: #D9D9D9;
+        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 2em;
+        height: 100%;
+        top: 1px;
+        right: 2px;
+        border-left: solid white 1px;
+        pointer-events: none;
     }
 }

src/themes/website/styles/navs.scss

@@ -29,6 +29,8 @@
 
     &.show {
         display: block;
+        max-height: 500px;
+        overflow-x: auto;
     }
 }
 

src/themes/website/styles/reboot.scss

@@ -3,7 +3,6 @@
 ::before {
     box-sizing: border-box;
     min-width: 0;
-    min-height: 0;
 }
 html {
     font-family: sans-serif;