Style changes

Author: simondoescode

docs/assets/css/apiDocs.css

@@ -3625,11 +3625,24 @@ body {
           .apiDocs .nav #navInner .version {
             float: none;
             display: block; } }
+        .apiDocs .nav #navInner .version span {
+          display: none; }
+          @media only screen and (min-width: 768px) {
+            .apiDocs .nav #navInner .version span {
+              display: inline-block; } }
         .apiDocs .nav #navInner .version select {
           background: transparent;
           border-radius: 30px;
           color: white;
-          border: 1px solid white; }
+          border: 1px solid white;
+          position: relative;
+          background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
+          background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+          background-size: 5px 5px, 5px 5px, 1px 1.5em;
+          background-repeat: no-repeat;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none; }
           .apiDocs .nav #navInner .version select:focus,
           .apiDocs .nav #navInner .version select :active,
           .apiDocs .nav #navInner .version select :hover {
@@ -3705,6 +3718,11 @@ body {
       display: inline-block;
       background: #FFF;
       border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
+      .apiDocs .wrap .header.-main {
+        background: #9FA8DA;
+        /* fallback for old browsers */
+        background: linear-gradient(to right, #9FA8DA, #5C6BC0);
+        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
       .apiDocs .wrap .header h1 {
         font-size: 3em; }
     .apiDocs .wrap .content {

docs/index.html

@@ -33,16 +33,24 @@ <h1>apiDocs</h1>
 
 
           <div class="version">
-            <span>
-            Version
-          </span>
-            <select class="" name="">
-              <option> 1.0.0</option>
-              <option> 1.0.4</option>
-            </select>
+
+            <form class="" action="#" method="post">
+              <div class="form-group">
+                <span>
+                Version
+              </span>
+                <select class="" name="">
+                  <option> 1.0.0</option>
+                  <option> 1.0.4</option>
+                </select>
+              </div>
+            </form>
+
+
+
 
           </div>
-          
+
           <div class="menu-toggle">
 
             <a class="btnToggle" href="#">
@@ -97,7 +105,7 @@ <h1>apiDocs</h1>
       <div class="wrap">
 
 
-        <div class="header">
+        <div class="header -main">
           <h1>apiDocs</h1>
           <h3>Free to use documentation template</h3> Bacon ipsum dolor amet chuck tongue shank, porchetta brisket swine drumstick pork chop ball tip jerky andouille cow venison beef tenderloin. Corned beef jowl chuck turkey, tail pancetta frankfurter pig t-bone cow porchetta. Pork belly
           strip steak

src/scss/_main.scss

@@ -148,11 +148,36 @@ body {
           display: block;
         }
 
+        span{
+          display: none;
+          @include grid-media($neat-grid-tablet) {
+            display: inline-block;
+          }
+
+        }
+
         select {
           background: transparent;
           border-radius: 30px;
           color: $textLightPrimary;
           border: 1px solid $textLightPrimary;
+          position: relative;
+
+          background-image:
+   linear-gradient(45deg, transparent 50%, gray 50%),
+   linear-gradient(135deg, gray 50%, transparent 50%);
+ background-position:
+   calc(100% - 20px) calc(1em + 2px),
+   calc(100% - 15px) calc(1em + 2px),
+   calc(100% - 2.5em) 0.5em;
+ background-size:
+   5px 5px,
+   5px 5px,
+   1px 1.5em;
+ background-repeat: no-repeat;
+appearance: none;
+
+
 
           &:focus,
           :active,
@@ -258,6 +283,13 @@ body {
       background: #FFF;
       border-bottom: 1px solid $textDarkDivider;
 
+      &.-main{
+        background: #9FA8DA;  /* fallback for old browsers */
+        background: linear-gradient(to right, #9FA8DA, #5C6BC0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+      }
+
+
       h1 {
         font-size: 3em;
       }