Commits

Nate Arnold committed 765825d

Add mobile dashboard header

Comments (0)

Files changed (10)

less/helpers/_mixins.less

     background: -o-linear-gradient(left,  #000000 0%, @COLOR_BLUE 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(left,  #000000 0%, @COLOR_BLUE 100%); /* IE10+ */
     background: linear-gradient(to right,  #000000 0%, @COLOR_BLUE 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='@COLOR_BLUE',GradientType=1 ); /* IE6-9 */
 }
 
 

less/modules/brandingLogo/_brandingLogo_screen.less

 
 .brandingLogo {
     display: block;
-    max-width: 200px;
-    height: auto;
-    margin: 20px auto;
+    width: 200px;
+    margin: 10px auto;
 }
 
 .brandingLogo_alt {

less/modules/btn/_btn_screen.less

  ----------------------------------------------------------------------- */
 
 .btn {
-    display: block;
+    display: inline-block;
     margin: 0;
     padding: 6px 18px;
     background-color: @COLOR_ORANGE;
 
 .btn:active { opacity: 1; }
 
+.btn-hiddenText {
+    position: absolute;
+    left: -100%;
+}
+
 .btn_alt {
     background-color: transparent;
     color: @COLOR_BLUE;
     margin-top: 24px;
 }
 
-.btn-hidden {
-    position: absolute;
-    left: -100%;
+.btn_narrow {
+    padding: 6px 3px;
+}
+
+.btn_block {
+    display: block;
 }

less/modules/mobileGrid/_mobileGrid_screen.less

+
+/* ---------------------------------------------------------------------
+ 12 Column mobileGrid
+ ----------------------------------------------------------------------- */
+
+// Clear Floats
+.mobileGrid {
+    .mixin-clearfix();
+}
+
+.mobileGrid-col { float: left; }
+.mobileGrid-col + .mobileGrid-col { margin-left: 2.127663%; }
+
+.mobileGrid-col_1of12 { width: 6.382989%; }
+.mobileGrid-col_2of12 { width: 14.893641%; }
+.mobileGrid-col_3of12 { width: 23.404293%; }
+.mobileGrid-col_4of12 { width: 31.914945%; }
+.mobileGrid-col_5of12 { width: 40.425597%; }
+.mobileGrid-col_6of12 { width: 48.936249%; }
+.mobileGrid-col_7of12 { width: 57.446901%; }
+.mobileGrid-col_8of12 { width: 65.957553%; }
+.mobileGrid-col_9of12 { width: 74.468205%; }
+.mobileGrid-col_10of12 { width: 82.978857%; }
+.mobileGrid-col_11of12 { width: 91.489509%; }
+.mobileGrid-col_12of12 { width: 100%; }

less/modules/pullNav/_pullNav_screen.less

  Pull Nav
  ----------------------------------------------------------------------- */
 
-// .footerNav {
-//     float: none;
-// }
+.pullNav_mobile {
+    float: right;
+}
   background: linear-gradient(to right, #000000 0%, #095288 100%);
   /* W3C */
 
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='@COLOR_BLUE', GradientType=1);
-  /* IE6-9 */
-
 }
 .mixin-clearfix:before,
 .mixin-clearfix:after {
  ----------------------------------------------------------------------- */
 .brandingLogo {
   display: block;
-  max-width: 200px;
-  height: auto;
-  margin: 20px auto;
+  width: 200px;
+  margin: 10px auto;
 }
 .brandingLogo_alt {
   margin: 10px auto;
  Buttons
  ----------------------------------------------------------------------- */
 .btn {
-  display: block;
+  display: inline-block;
   margin: 0;
   padding: 6px 18px;
   background-color: #f57e27;
 .btn:active {
   opacity: 1;
 }
+.btn-hiddenText {
+  position: absolute;
+  left: -100%;
+}
 .btn_alt {
   background-color: transparent;
   color: #095288;
 .btn_baseline {
   margin-top: 24px;
 }
-.btn-hidden {
-  position: absolute;
-  left: -100%;
+.btn_narrow {
+  padding: 6px 3px;
+}
+.btn_block {
+  display: block;
 }
 /* ---------------------------------------------------------------------
  Circles
   padding-left: 30px;
 }
 /* ---------------------------------------------------------------------
+ 12 Column mobileGrid
+ ----------------------------------------------------------------------- */
+.mobileGrid:before,
+.mobileGrid:after {
+  content: " ";
+  display: table;
+}
+.mobileGrid:after {
+  clear: both;
+}
+.mobileGrid-col {
+  float: left;
+}
+.mobileGrid-col + .mobileGrid-col {
+  margin-left: 2.127663%;
+}
+.mobileGrid-col_1of12 {
+  width: 6.382989%;
+}
+.mobileGrid-col_2of12 {
+  width: 14.893641%;
+}
+.mobileGrid-col_3of12 {
+  width: 23.404293%;
+}
+.mobileGrid-col_4of12 {
+  width: 31.914945%;
+}
+.mobileGrid-col_5of12 {
+  width: 40.425597%;
+}
+.mobileGrid-col_6of12 {
+  width: 48.936249%;
+}
+.mobileGrid-col_7of12 {
+  width: 57.446901%;
+}
+.mobileGrid-col_8of12 {
+  width: 65.957553%;
+}
+.mobileGrid-col_9of12 {
+  width: 74.468205%;
+}
+.mobileGrid-col_10of12 {
+  width: 82.978857%;
+}
+.mobileGrid-col_11of12 {
+  width: 91.489509%;
+}
+.mobileGrid-col_12of12 {
+  width: 100%;
+}
+/* ---------------------------------------------------------------------
  Pull Nav
  ----------------------------------------------------------------------- */
+.pullNav_mobile {
+  float: right;
+}
 /* ---------------------------------------------------------------------------
  stackList -- Lays out horizontally on desktop but stacks vertically on mobile
  ----------------------------------------------------------------------------- */
 @import "modules/input/_input_screen";
 @import "modules/label/_label_screen";
 @import "modules/link/_link_screen";
+@import "modules/mobileGrid/_mobileGrid_screen";
 @import "modules/pullNav/_pullNav_screen";
 @import "modules/stackList/_stackList_screen";
 

public/Assets/styles/screen.css

   background: -webkit-gradient(linear, left top, right top, from(#000000), to(#095288));
   background: linear-gradient(to right, #000000 0%, #095288 100%);
   /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='@COLOR_BLUE', GradientType=1);
-  /* IE6-9 */
 }
 
 .mixin-clearfix:before,
 
 .brandingLogo {
   display: block;
-  max-width: 200px;
-  height: auto;
-  margin: 20px auto;
+  width: 200px;
+  margin: 10px auto;
 }
 
 .brandingLogo_alt {
  ----------------------------------------------------------------------- */
 
 .btn {
-  display: block;
+  display: inline-block;
   margin: 0;
   padding: 6px 18px;
   background-color: #f57e27;
   opacity: 1;
 }
 
+.btn-hiddenText {
+  position: absolute;
+  left: -100%;
+}
+
 .btn_alt {
   background-color: transparent;
   color: #095288;
   margin-top: 24px;
 }
 
-.btn-hidden {
-  position: absolute;
-  left: -100%;
+.btn_narrow {
+  padding: 6px 3px;
+}
+
+.btn_block {
+  display: block;
 }
 
 /* ---------------------------------------------------------------------
 }
 
 /* ---------------------------------------------------------------------
+ 12 Column mobileGrid
+ ----------------------------------------------------------------------- */
+
+.mobileGrid:before,
+.mobileGrid:after {
+  content: " ";
+  display: table;
+}
+
+.mobileGrid:after {
+  clear: both;
+}
+
+.mobileGrid-col {
+  float: left;
+}
+
+.mobileGrid-col + .mobileGrid-col {
+  margin-left: 2.127663%;
+}
+
+.mobileGrid-col_1of12 {
+  width: 6.382989%;
+}
+
+.mobileGrid-col_2of12 {
+  width: 14.893641%;
+}
+
+.mobileGrid-col_3of12 {
+  width: 23.404293%;
+}
+
+.mobileGrid-col_4of12 {
+  width: 31.914945%;
+}
+
+.mobileGrid-col_5of12 {
+  width: 40.425597%;
+}
+
+.mobileGrid-col_6of12 {
+  width: 48.936249%;
+}
+
+.mobileGrid-col_7of12 {
+  width: 57.446901%;
+}
+
+.mobileGrid-col_8of12 {
+  width: 65.957553%;
+}
+
+.mobileGrid-col_9of12 {
+  width: 74.468205%;
+}
+
+.mobileGrid-col_10of12 {
+  width: 82.978857%;
+}
+
+.mobileGrid-col_11of12 {
+  width: 91.489509%;
+}
+
+.mobileGrid-col_12of12 {
+  width: 100%;
+}
+
+/* ---------------------------------------------------------------------
  Pull Nav
  ----------------------------------------------------------------------- */
 
+.pullNav_mobile {
+  float: right;
+}
+
 /* ---------------------------------------------------------------------------
  stackList -- Lays out horizontally on desktop but stacks vertically on mobile
  ----------------------------------------------------------------------------- */

public/dashboard.html

             <div class="header-section">
                 <div class="container">
                     <!-- MOBILE MENU -->
-                    <div class="grid isVisibleSmall">
-                        <div class="grid-col grid-col_2of12">
-                            <a class="btn btn_alt">
+                    <div class="mobileGrid isVisibleSmall">
+                        <div class="mobileGrid-col mobileGrid-col_3of12">
+                            <a class="btn btn_alt btn_narrow">
                                 <i class="fa fa-reorder fa-lg"></i>
                             </a>
                         </div>
-                        <div class="grid-col grid-col_8of12">
+                        <div class="mobileGrid-col mobileGrid-col_6of12">
                             <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
                         </div>
-                        <div class="grid-col grid-col_2of12">
-                            <div class="pullNav">
-                                <a class="btn btn_alt" href="#">
-                                    <span class="btn-hidden">Languages</span>
+                        <div class="mobileGrid-col mobileGrid-col_3of12">
+                            <div class="pullNav pullNav_mobile">
+                                <a class="btn btn_alt btn_narrow" href="#">
+                                    <span class="btn-hiddenText">Languages</span>
                                     <i class="fa fa-globe fa-lg"></i>
                                     <i class="fa fa-caret-down fa-lg"></i>
                                 </a>
                                     <li>
                                         <a class="btn btn_alt" href="#">
                                             <i class="fa fa-user fa-lg"></i>
-                                            <span class="btn-hidden">Account</span>
+                                            <span class="btn-hiddenText">Account</span>
                                         </a>
                                     </li>
                                     <li>
                                         <a class="btn btn_alt" href="#">
                                             <i class="fa fa-question-circle fa-lg"></i>
-                                            <span class="btn-hidden">Help</span>
+                                            <span class="btn-hiddenText">Help</span>
                                         </a>
                                     </li>
                                     <li>
                                     </li>
                                     <li>
                                         <a class="btn btn_alt" href="#">
-                                            <span class="btn-hidden">Languages</span>
+                                            <span class="btn-hiddenText">Languages</span>
                                             <i class="fa fa-globe fa-lg"></i>
                                             <i class="fa fa-caret-down fa-lg"></i>
                                         </a>

public/index.html

                                     </li>
                                     <li>
                                         <a class="btn btn_alt" href="#">
-                                            <span class="btn-hidden">Languages</span>
+                                            <span class="btn-hiddenText">Languages</span>
                                             <i class="fa fa-globe fa-lg"></i>
                                             <i class="fa fa-caret-down fa-lg"></i>
                                         </a>
                                         <a class="label label_sm isHiddenSmall" href="#">Forgot Password?</a>
                                     </li>
                                     <li>
-                                        <a class="btn btn_baseline" href="dashboard.html">Login</a>
+                                        <a class="btn btn_baseline btn_block" href="dashboard.html">Login</a>
                                     </li>
                                     <li class="isVisibleSmall">
-                                        <a class="btn" href="#">Sign Up</a>
+                                        <a class="btn btn_block" href="#">Sign Up</a>
                                         <a class="label label_sm" href="#">Forgot Password?</a>
                                     </li>
                                 </ul>