Responsive design improvements, new breakpoints variables

Eugene Bannykh · Eugene Bannykh · commit 8b7f90085d9c · 2016-11-23T15:07:06.000+02:00
diff --git a/css/app.css b/css/app.css
diff --git a/js/app.js b/js/app.js
@@ -11,7 +11,7 @@ $(function() {
 	$('.version-switcher').clone().addClass('version-switcher-mobile').appendTo('.nav-main-mobile');
 
 	// Responsive item expand/collapse
-	$('.nav-main-mobile a').each(function () {
+	$('.nav-main a').each(function () {
 		var $this = $(this);
 		var $children = $this.closest('li').find('ul');
 
diff --git a/scss/_reset.scss b/scss/_reset.scss
@@ -1,31 +1,39 @@
 
 .clearfix {
-    *zoom: 1
+  *zoom: 1
 }
 .clearfix:before,
 .clearfix:after {
-    display: table;
-    content: "";
-    line-height: 0
+  display: table;
+  content: "";
+  line-height: 0
 }
 .clearfix:after {
-    clear: both
+  clear: both
 }
 .hide-text {
-    font: 0/0 a;
-    color: transparent;
-    text-shadow: none;
-    background-color: transparent;
-    border: 0
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0
 }
 .input-block-level {
-    display: block;
-    width: 100%;
-    min-height: 30px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box
+  display: block;
+  width: 100%;
+  min-height: 30px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
+
+
+
+*, *:before, *:after {
+  box-sizing: border-box;
 }
+
+
 article,
 aside,
 details,
@@ -49,25 +57,25 @@ audio:not([controls]) {
     display: none
 }
 html {
-    font-size: 100%;
-    -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%
 }
 a:focus {
-    outline: thin dotted #333;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px
 }
 a:hover,
 a:active {
-    outline: 0
+  outline: 0
 }
 sub,
 sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline
 }
 sup {
     top: -0.5em
@@ -122,19 +130,13 @@ input[type="radio"],
 input[type="checkbox"] {
     cursor: pointer
 }
-input[type="search"] {
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    -webkit-appearance: textfield
-}
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none
+  -webkit-appearance: none
 }
 textarea {
-    overflow: auto;
-    vertical-align: top
+  overflow: auto;
+  vertical-align: top
 }
 
 /* allow images/media to gracefully resize according to their enclosing tag */
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1,8 +1,15 @@
 $body-font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
 
 
+
+
 $header-height: 56px;
 
+// Breakpoints
+$small-screen: 'max-width: 768px';
+$medium-screen: 'max-width: 1023px';
+$large-screen: 'min-width: 1500px';
+
 
 // Colors
 $brand-color: #F26322;
diff --git a/scss/partials/_footer.scss b/scss/partials/_footer.scss
@@ -33,7 +33,7 @@
   }
 
 
-  @media (max-width:767px) {
+  @media ( $small-screen ) {
 
     margin: 0;
     padding: 10px 0;
diff --git a/scss/partials/_home.scss b/scss/partials/_home.scss
@@ -7,6 +7,9 @@
 
   .search-form {
     margin-top: 20px;
+    .input-group {
+      width: 100%;
+    }
   }
 
 }
@@ -39,7 +42,7 @@
     padding: 0;
   }
 
-  @media (max-width:767px) {
+  @media ( $small-screen ) {
 
     .feature {
       width: 100%;
diff --git a/scss/partials/_layout.scss b/scss/partials/_layout.scss
@@ -28,9 +28,6 @@ html,body {
 }
 
 
-
-
-
 .container:before, .container:after {
   display: table;
   content: "";
@@ -42,21 +39,6 @@ html,body {
 
 
 
-
-
-/*
-.main-container {
-   padding-top: 105px;
-   background: #fff
-}
-
-#gl-wrapper {
-   width: 100%;
-   position: relative;
-   z-index: 50;
-}
-*/
-
 .full-width-content {
   width: 90%;
 }
@@ -76,9 +58,7 @@ html,body {
 
 
 // for large screens, make more whitespace on sides
-@media (min-width: 1500px){
-
-
+@media ($large-screen){
 
   .container {
     padding-left: 66px;
@@ -90,7 +70,7 @@ html,body {
 }
 
 // For smaller screens, remove toc from left column and show in-page-toc
-@media ( max-width: 1024px ) {
+@media ( $medium-screen) {
 
   .content-wrap {
     margin-right: 0;
@@ -104,65 +84,36 @@ html,body {
     padding: 0;
   }
 
-}
-
-
 
+     .pane-content .container {
+        padding: 0;
+     }
 
-@media (max-width:767px) {
+     .container, .page-intro .container, .home-section .container {
+        padding: 0 20px;
+     }
 
+    .main-container {
+      width: 100%;
+      overflow-x: auto;
+    }
 
+    .content {
+      float: none;
+      width: auto;
+      padding: 10px 20px;
+    }
 
-   .pane-content .container {
+    .content .content-wrap {
       padding: 0;
-   }
-
-   .container, .page-intro .container, .home-section .container {
-      padding: 0 20px;
-   }
-
-  .main-container {
-    width: 100%;
-    overflow-x: auto;
-  }
-
-  .content {
-    float: none;
-    width: auto;
-    padding: 10px 20px;
-  }
-
-  .content .content-wrap {
-    padding: 0;
-  }
+    }
 
 
 
-
-
-
-
-   #searchResultsBox {
-      left: 0;
-      top:0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      overflow-x: hidden;
-   }
-
-   #searchResultsBox .gsc-control-wrapper-cse {
-      width: 100%;
-      height: 100%;
-   }
-
-   .searchResultsBack {
-      background: #fff;
-      opacity: 1;
-   }
 }
 
 
+
 .affix {
   position: fixed;
 }
diff --git a/scss/partials/_nav-main.scss b/scss/partials/_nav-main.scss
@@ -74,6 +74,7 @@
   }
   li.has-children > a{
     border-bottom: none;
+    cursor: default;
   }
   a, a:visited {
     color: $body-font-color;
@@ -188,7 +189,7 @@ body.offcanvas-active {
   overflow: hidden;
 }
 
-@media (max-width:1023px) {
+@media ( $medium-screen ) {
 
   .nav-main {
     position: fixed;
diff --git a/scss/partials/_page-info.scss b/scss/partials/_page-info.scss
@@ -49,7 +49,7 @@
 }
 
 
-@media (max-width:1023px) {
+@media ( $medium-screen ) {
   .page-info {
     border-top: 1px solid $light-gray-color;
     margin: 20px 0 0 0;
@@ -58,6 +58,5 @@
     padding: 15px 0 0 0;
     font-size: 14px;
   }
-
-
+  
 }
diff --git a/scss/partials/_search.scss b/scss/partials/_search.scss
@@ -32,11 +32,10 @@
     font-size: 16px;
   }
 
-  @media (max-width:767px) {
+  @media ( $small-screen ) {
     .input-group-btn {
       display: none;
     }
-
   }
 
 }
diff --git a/scss/partials/_sidebar.scss b/scss/partials/_sidebar.scss
@@ -127,7 +127,7 @@
 }
 
 
-@media (max-width:1023px) {
+@media ( $medium-screen ) {
 
   .sidebar {
     width: 100%;
diff --git a/scss/partials/_site-header.scss b/scss/partials/_site-header.scss
@@ -91,7 +91,7 @@
     }
   }
 
-  @media (max-width:1023px) {
+  @media ( $medium-screen ) {
 
     #global-nav {
       border-bottom: 1px solid $beige-color;
@@ -112,9 +112,6 @@
       right: $header-height;
     }
 
-
-
-
-  }
+  } // medium-screen
 
 }
diff --git a/scss/partials/_toc.scss b/scss/partials/_toc.scss
@@ -54,7 +54,7 @@
   }
 
 
-  @media (max-width:1023px) {
+  @media ( $medium-screen ) {
     display: none;
   }
 
diff --git a/scss/partials/_typography.scss b/scss/partials/_typography.scss
diff --git a/scss/partials/_version-switcher.scss b/scss/partials/_version-switcher.scss

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`}`
`34`	`34`
`35`	`35`
`36`		`- @media (max-width:767px) {`
	`36`	`+ @media ( $small-screen ) {`
`37`	`37`
`38`	`38`	`margin: 0;`
`39`	`39`	`padding: 10px 0;`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@`
`7`	`7`
`8`	`8`	`.search-form {`
`9`	`9`	`margin-top: 20px;`
	`10`	`+ .input-group {`
	`11`	`+ width: 100%;`
	`12`	`+ }`
`10`	`13`	`}`
`11`	`14`
`12`	`15`	`}`
`@@ -39,7 +42,7 @@`
`39`	`42`	`padding: 0;`
`40`	`43`	`}`
`41`	`44`
`42`		`- @media (max-width:767px) {`
	`45`	`+ @media ( $small-screen ) {`
`43`	`46`
`44`	`47`	`.feature {`
`45`	`48`	`width: 100%;`
Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@`
`74`	`74`	`}`
`75`	`75`	`li.has-children > a{`
`76`	`76`	`border-bottom: none;`
	`77`	`+ cursor: default;`
`77`	`78`	`}`
`78`	`79`	`a, a:visited {`
`79`	`80`	`color: $body-font-color;`
`@@ -188,7 +189,7 @@ body.offcanvas-active {`
`188`	`189`	`overflow: hidden;`
`189`	`190`	`}`
`190`	`191`
`191`		`-@media (max-width:1023px) {`
	`192`	`+@media ( $medium-screen ) {`
`192`	`193`
`193`	`194`	`.nav-main {`
`194`	`195`	`position: fixed;`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`
`52`		`-@media (max-width:1023px) {`
	`52`	`+@media ( $medium-screen ) {`
`53`	`53`	`.page-info {`
`54`	`54`	`border-top: 1px solid $light-gray-color;`
`55`	`55`	`margin: 20px 0 0 0;`
`@@ -58,6 +58,5 @@`
`58`	`58`	`padding: 15px 0 0 0;`
`59`	`59`	`font-size: 14px;`
`60`	`60`	`}`
`61`		`-`
`62`		`-`
	`61`	`+`
`63`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,11 +32,10 @@`
`32`	`32`	`font-size: 16px;`
`33`	`33`	`}`
`34`	`34`
`35`		`- @media (max-width:767px) {`
	`35`	`+ @media ( $small-screen ) {`
`36`	`36`	`.input-group-btn {`
`37`	`37`	`display: none;`
`38`	`38`	`}`
`39`		`-`
`40`	`39`	`}`
`41`	`40`
`42`	`41`	`}`