1. Nate Arnold
  2. CHAMBERLAIN.myq-responsive

Commits

Nate Arnold  committed 293f3bd

Add dashboard body and header

  • Participants
  • Parent commits 3103bd3
  • Branches master

Comments (0)

Files changed (17)

File less/_dist/base.css

View file
   height: auto;
   margin: 0 auto 15px;
 }
+.appLogo_right {
+  float: right;
+  width: 260px;
+}
 /* ---------------------------------------------------------------------
  Box
  ----------------------------------------------------------------------- */
 .box {
-  margin: 0 0 20px;
+  margin: 0;
   padding: 20px;
   background: #f0f0f0;
 }
+.box + .box {
+  margin: 20px 0 0;
+}
 /* ---------------------------------------------------------------------
  Buttons
  ----------------------------------------------------------------------- */
 .btn:active {
   color: white;
 }
-.btn-hiddenText {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
 .btn_alt:hover,
 .btn_alt:active {
   color: #ffffff;
 }
-.btn_link {
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
+.btn_icon {
   text-transform: none;
-}
-.btn_link:hover,
-.btn_link:active {
-  color: #666666;
-  background-color: transparent;
-  border: 0;
+  padding: 4px 0;
 }
 .btn_narrow {
   padding: 6px;
   clear: both;
 }
 /* ---------------------------------------------------------------------
+ contentWrap
+ ----------------------------------------------------------------------- */
+.contentWrap {
+  margin: 0 0 40px;
+  padding: 40px 0;
+  background: #f0f0f0;
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
   .appLogo_alt {
     margin: 0 auto;
   }
+  .appLogo_high {
+    margin: 5px 0 0;
+  }
   /* ---------------------------------------------------------------------
    appIcon Small
    ----------------------------------------------------------------------- */
 /* -----------------------------------------------------------
  Media Utils
  ---------------------------------------------------------- */
+/* Media dependent helper classes */
 .isHiddenSmall {
   display: none;
 }

File less/_dist/base_prefixed.css

View file
   margin: 0 auto 15px;
 }
 
+.appLogo_right {
+  float: right;
+  width: 260px;
+}
+
 /* ---------------------------------------------------------------------
  Box
  ----------------------------------------------------------------------- */
 
 .box {
-  margin: 0 0 20px;
+  margin: 0;
   padding: 20px;
   background: #f0f0f0;
 }
 
+.box + .box {
+  margin: 20px 0 0;
+}
+
 /* ---------------------------------------------------------------------
  Buttons
  ----------------------------------------------------------------------- */
   color: white;
 }
 
-.btn-hiddenText {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
 .btn_alt:hover,
 .btn_alt:active {
   color: #ffffff;
 }
 
-.btn_link {
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
+.btn_icon {
   text-transform: none;
-}
-
-.btn_link:hover,
-.btn_link:active {
-  color: #666666;
-  background-color: transparent;
-  border: 0;
+  padding: 4px 0;
 }
 
 .btn_narrow {
 }
 
 /* ---------------------------------------------------------------------
+ contentWrap
+ ----------------------------------------------------------------------- */
+
+.contentWrap {
+  margin: 0 0 40px;
+  padding: 40px 0;
+  background: #f0f0f0;
+  -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
     margin: 0 auto;
   }
 
+  .appLogo_high {
+    margin: 5px 0 0;
+  }
+
   /* ---------------------------------------------------------------------
    appIcon Small
    ----------------------------------------------------------------------- */
  Media Utils
  ---------------------------------------------------------- */
 
+/* Media dependent helper classes */
+
 .isHiddenSmall {
   display: none;
 }

File less/_dist/theme_chamberlain.css

View file
   background: #003763;
   border: 1px solid #003763;
 }
-.btn_link {
+.btn_icon {
   color: #003763;
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+.btn_icon:hover,
+.btn_icon:active {
+  color: #666666;
+  background-color: transparent;
+  border: 1px solid transparent;
 }
 /* ---------------------------------------------------------------------
  Circles Chamberlain

File less/_dist/theme_liftmaster.css

View file
   background: #333333;
   border: 1px solid #333333;
 }
-.btn_link {
+.btn_icon {
   color: #333333;
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+.btn_icon:hover,
+.btn_icon:active {
+  color: #666666;
+  background-color: transparent;
+  border: 1px solid transparent;
 }
 /* ---------------------------------------------------------------------
  Circles Liftmaster

File less/helpers/_utils.less

View file
 // Utils
 // ------------------------------------------------------------------
 
-// Media dependent helper classes
+/* Media dependent helper classes */
 
 .isHiddenSmall { display: none; }
 

File less/modules/appLogo/_appLogo_screen.less

View file
     height: auto;
     margin: 0 auto 15px;
 }
+
+.appLogo_right {
+    float: right;
+    width: 260px;
+}

File less/modules/appLogo/_appLogo_small.less

View file
 .appLogo_alt {
     margin: 0 auto;
 }
+
+.appLogo_high {
+    margin: 5px 0 0;
+}

File less/modules/box/_box_screen.less

View file
  ----------------------------------------------------------------------- */
 
 .box {
-    margin: 0 0 20px;
+    margin: 0;
     padding: 20px;
     background: @COLOR_LTGRAY;
 }
+
+.box + .box {
+    margin: 20px 0 0;
+}

File less/modules/btn/_btn_chamberlain.less

View file
     border: 1px solid @COLOR_BLUE;
 }
 
-.btn_link {
+.btn_icon {
     color: @COLOR_BLUE;
+    background-color: transparent;
+    border: 1px solid transparent;
+}
+
+.btn_icon:hover,
+.btn_icon:active {
+    color: @COLOR_GRAY;
+    background-color: transparent;
+    border: 1px solid transparent;
 }

File less/modules/btn/_btn_liftmaster.less

View file
     border: 1px solid @COLOR_BLACK;
 }
 
-.btn_link {
+.btn_icon {
     color: @COLOR_BLACK;
+    background-color: transparent;
+    border: 1px solid transparent;
+}
+
+.btn_icon:hover,
+.btn_icon:active {
+    color: @COLOR_GRAY;
+    background-color: transparent;
+    border: 1px solid transparent;
 }

File less/modules/btn/_btn_screen.less

View file
     color: white;
 }
 
-.btn-hiddenText {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
 .btn_alt:hover,
 .btn_alt:active {
     color: #ffffff;
 }
 
-.btn_link {
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-    border: 0;
+.btn_icon {
     text-transform: none;
-}
-
-.btn_link:hover,
-.btn_link:active {
-    color: @COLOR_GRAY;
-    background-color: transparent;
-    border: 0;
+    padding: 4px 0;
 }
 
 .btn_narrow {

File less/modules/contentWrap/_contentWrap_screen.less

View file
+
+/* ---------------------------------------------------------------------
+ contentWrap
+ ----------------------------------------------------------------------- */
+
+.contentWrap {
+    margin: 0 0 40px;
+    padding: 40px 0;
+    background: @COLOR_LTGRAY;
+    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3);
+}

File less/screen.less

View file
 @import "modules/checkbox/_checkbox_screen";
 @import "modules/circles/_circles_screen";
 @import "modules/container/_container_screen";
+@import "modules/contentWrap/_contentWrap_screen";
 @import "modules/fancySelect/_fancySelect_screen";
 @import "modules/grid/_grid_screen";
 @import "modules/hero/_hero_screen";

File public/Assets/styles/base.css

View file
     margin: 0 auto 15px;
 }
 
+.appLogo_right
+{
+    float: right;
+
+    width: 260px;
+}
+
 /* ---------------------------------------------------------------------
  Box
  ----------------------------------------------------------------------- */
 
 .box
 {
-    margin: 0 0 20px;
+    margin: 0;
     padding: 20px;
 
     background: #f0f0f0;
 }
 
+.box + .box
+{
+    margin: 20px 0 0;
+}
+
 /* ---------------------------------------------------------------------
  Buttons
  ----------------------------------------------------------------------- */
     color: white;
 }
 
-.btn-hiddenText
-{
-    position: absolute;
-
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-
-    border: 0;
-}
-
 .btn_alt:hover,
 .btn_alt:active
 {
     color: #fff;
 }
 
-.btn_link
+.btn_icon
 {
-    margin: 0;
-    padding: 0;
+    padding: 4px 0;
 
     text-transform: none;
-
-    border: 0;
-    background-color: transparent;
-}
-
-.btn_link:hover,
-.btn_link:active
-{
-    color: #666;
-    border: 0;
-    background-color: transparent;
 }
 
 .btn_narrow
 }
 
 /* ---------------------------------------------------------------------
+ contentWrap
+ ----------------------------------------------------------------------- */
+
+.contentWrap
+{
+    margin: 0 0 40px;
+    padding: 40px 0;
+
+    background: #f0f0f0;
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+            box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+}
+
+/* ---------------------------------------------------------------------
  fancySelect
  https://github.com/octopuscreative/FancySelect
  ----------------------------------------------------------------------- */
         margin: 0 auto;
     }
 
+    .appLogo_high
+    {
+        margin: 5px 0 0;
+    }
+
   /* ---------------------------------------------------------------------
    appIcon Small
    ----------------------------------------------------------------------- */
  Media Utils
  ---------------------------------------------------------- */
 
+/* Media dependent helper classes */
+
 .isHiddenSmall
 {
     display: none;

File public/Assets/styles/theme_chamberlain.css

View file
     border: 1px solid #003763;
     background: #003763;
 }
-.btn_link
+.btn_icon
 {
     color: #003763;
+    border: 1px solid transparent;
+    background-color: transparent;
+}
+.btn_icon:hover,
+.btn_icon:active
+{
+    color: #666;
+    border: 1px solid transparent;
+    background-color: transparent;
 }
 /* ---------------------------------------------------------------------
  Circles Chamberlain

File public/Assets/styles/theme_liftmaster.css

View file
     border: 1px solid #333;
     background: #333;
 }
-.btn_link
+.btn_icon
 {
     color: #333;
+    border: 1px solid transparent;
+    background-color: transparent;
+}
+.btn_icon:hover,
+.btn_icon:active
+{
+    color: #666;
+    border: 1px solid transparent;
+    background-color: transparent;
 }
 /* ---------------------------------------------------------------------
  Circles Liftmaster

File public/dashboard.html

View file
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Dashboard - MyQ Chamberlain</title>
+    <title>MyQ Dashboard</title>
     <meta name="description" content="">
 
     <!-- Google Font Import -->
     <!-- Font Awesome Import -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 
-    <!-- Uncomment for development -->
-    <link href="Assets/styles/screen.css" rel="stylesheet" media="screen">
+    <!-- Base Styles -->
+    <link href="Assets/styles/base.css" rel="stylesheet" media="screen">
+
+    <!-- Styles for Chamberlain Theme -->
+    <link href="Assets/styles/theme_chamberlain.css" rel="stylesheet" media="screen">
 
-    <!-- Uncomment for production -->
-    <!-- <link href="Assets/styles/screen.min.css" rel="stylesheet" media="screen"> -->
 </head>
-<body class="pushNav">
-
-    <div class="pushNav-nav">
-        <ul class="vList">
-            <li>
-                <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
-            </li>
-            <li>
-                <a class="btn btn_alt" href="#">
-                    <i class="fa fa-user fa-lg"></i> Account
-                </a>
-            </li>
-            <li>
-                <a class="btn btn_alt" href="#">
-                    <i class="fa fa-question-circle fa-lg"></i> Help
-                </a>
-            </li>
-            <li>
-                <a class="btn btn_alt" href="index.html">Log Out</a>
-            </li>
-        </ul>
-    </div>
+<body>
 
     <header role="banner">
         <div class="header">
 
-            <div class="header-section">
+            <div class="header-crown">
                 <div class="container">
-                    <!-- MOBILE MENU -->
-                    <div class="mobileGrid isVisibleSmall">
-                        <div class="mobileGrid-col mobileGrid-col_3of12">
-                            <a class="btn btn_alt btn_narrow js-togglePushNav">
-                                <i class="fa fa-reorder fa-lg"></i>
-                            </a>
-                        </div>
-                        <div class="mobileGrid-col mobileGrid-col_6of12">
-                            <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
-                        </div>
-                        <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>
-                            </div>
-                        </div>
-                    </div><!-- END .grid -->
-                    <!-- END MOBILE MENU -->
-
-                    <!-- DESKTOP MENU -->
-                    <div class="grid isHiddenSmall">
-                        <div class="grid-col grid-col_4of12">
-                            <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
-                        </div>
-
-                        <div class="grid-col grid-col_8of12">
-                            <div class="pullNav" role="navigation">
-                                <ul class="hList">
-                                    <li>
-                                        <a class="btn btn_alt" href="#">
-                                            <i class="fa fa-user fa-lg"></i>
-                                            <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-hiddenText">Help</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="btn btn_alt" href="index.html">Sign Out</a>
-                                    </li>
-                                    <li>
-                                        <a class="btn btn_alt" 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>
-                                </ul>
-                            </div>
-                        </div>
-                    </div><!-- END .grid -->
-                    <!-- END DESKTOP MENU -->
-
+                    <div class="languageSelect">
+                        <label class="languageSelect-label" for="ctl00$LocaleSelector1$ctl00">Language:</label>
+                        <select name="ctl00$LocaleSelector1$ctl00" class="languageSelect-select">
+                            <option value="de">Deutsch</option>
+                            <option value="en" selected>English</option>
+                            <option value="es">Español</option>
+                            <option value="fr">Français</option>
+                            <option value="nl">Nederlands</option>
+                        </select>
+                    </div>
                 </div>
-            </div><!-- END .header-section -->
+            </div>
 
-            <div class="header-section header-section_gray">
-                <div class="container">
-                    <div class="grid">
-                        <div class="grid-col grid-col_4of12">
-                            <img class="appLogo" src="Assets/images/myq-logo.png" alt="">
+            <div class="container isHiddenSmall">
+                <div class="grid">
+                    <div class="grid-col grid-col_3of12">
+                        <img class="appLogo appLogo_high" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                    </div>
+
+                    <div class="grid-col grid-col_9of12">
+                        <div class="pullNav" role="navigation">
+                            <ul class="stackList">
+                                <li>
+                                    <a class="btn btn_icon" href="#"><i class="fa fa-user fa-2x"></i></a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_icon" href="#"><i class="fa fa-question-circle fa-2x"></i></a>
+                                </li>
+                                <li>
+                                    <a class="btn btn_block" href="index.html">Logout</a>
+                                </li>
+                            </ul>
                         </div>
-                    </div><!-- END .grid -->
-                </div>
-            </div><!-- END .header-section -->
+                    </div>
+                </div><!-- END .grid -->
+            </div><!-- END .isHiddenSmall -->
 
+            <div class="container isVisibleSmall">
+                <div class="grid">
+                    <a class="btn btn_icon btn_left" href="#"><i class="fa fa-reorder fa-2x"></i></a>
+                    <img class="appLogo appLogo_right" src="Assets/images/logo-chamberlain@2x.png" alt="">
+                </div><!-- END .grid -->
+            </div><!-- END .isVisibleSmall -->
 
         </div><!-- END .header -->
     </header>
     <!-- ############################## -->
 
     <main role="main">
-    
-        
+        <div class="contentWrap">
+            <div class="container">
 
+            </div>
+        </div><!-- End .contentWrap -->
+
+        <div class="container">
+            <div class="grid">
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Tips</h2>
+                        <p>
+                            Having trouble getting set up with your MyQ&trade; product? We have compiled a list of common issues and tips to get around them.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                    <div class="box">
+                        <h2 class="hdg">Shop</h2>
+                        <p>
+                            Chamberlain&#174; offers a variety of accessories and other products that help make your life easier by simplifying and securing your garage and home.
+                            <a href="#">View &gt;</a>
+                        </p>
+                    </div>
+                </div>
+                <div class="grid-col grid-col_6of12">
+                    <div class="box">
+                        <h2 class="hdg">Download App</h2>
+                        <p>
+                            Download the MyQ app from the Apple App Store or Google Play Store.
+                        </p>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-apple@2x.png" alt="">
+                        </a>
+                        <a class="appIcon" href="#">
+                            <img class="appIcon-img" src="Assets/images/appIcon-img-google@2x.png" alt="">
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div><!-- End .container -->
     </main>
 
     <!-- ############################## -->
             <div class="container">
                 <div class="grid">
                     <div class="grid-col grid-col_4of12">
-                        <img class="brandingLogo brandingLogo_alt" src="Assets/images/brandingLogo-chamberlain-white@2x.png" alt="">
+                        <img class="appLogo appLogo_alt" src="Assets/images/logo-chamberlain_white@2x.png" alt="">
                         <!-- <small class="contentInfo">&copy; 2014 The Chamberlain Group, Inc.</small> -->
                     </div>
                     <div class="grid-col grid-col_8of12">