Mercurial > hg > thermostat-website-stg

changeset 43:a88a7af50185

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use less file to create css file.
author Jie Kang <jkang@redhat.com>
date Mon, 31 Oct 2016 13:15:06 -0400
parents fb8dc2193ccf
children 0ab645799518
files css/style.css css/style.less
diffstat 2 files changed, 288 insertions(+), 98 deletions(-) [+]
line wrap: on
line diff
--- a/css/style.css	Wed Nov 02 10:51:26 2016 -0400
+++ b/css/style.css	Mon Oct 31 13:15:06 2016 -0400
@@ -1,187 +1,175 @@
+/* colours */
+/* sizes */
 /* logo */
 /**/
 div#logo-box {
-    margin: 1em;
-    margin-top: 4em;
+  margin: 1em;
+  margin-top: 4em;
 }
-
 div#logo-box img {
+  max-width: 50%;
+  height: auto;
+}
+@media (min-width: 992px) {
+  div#logo-box img {
     max-width: 25%;
-    height: auto;
+  }
 }
-
 /* navbar */
 /**/
 .navbar-default {
   background-color: #ffffff;
   border-color: #ffffff;
-  border-bottom-color: rgb(0, 34, 85);
+  border-bottom-color: #002255;
   font-size: 1.2em;
 }
-
 .navbar-default .navbar-nav > li > a {
-  color: rgb(0, 34, 85);
+  color: #002255;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: rgb(240,130,0);
+  color: #f08200;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: rgb(240,130,0);
+  color: #f08200;
   background-color: #ffffff;
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  color: rgb(240,130,0);
+  color: #f08200;
   background-color: #ffffff;
 }
-
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: rgb(240,130,0)
+  border-color: #f08200;
 }
-
 .navbar-c1 {
-    margin-right: 0.1em;
+  margin-right: 0.1em;
 }
-
 /* bs-docs-sidebar */
 /**/
 body {
-    position: relative;
+  position: relative;
 }
-
 .fixed {
-    position: fixed;
+  position: fixed;
 }
-
 /* sidebar */
 .bs-docs-sidebar {
-    padding-left: 5px;
-    padding-right: 10px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+  padding-left: 5px;
+  padding-right: 10px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
-
 /* all links */
-.bs-docs-sidebar .nav>li>a {
-    color: rgb(90,90,90);
-    border-left: 2px solid transparent;
-    padding: 4px 10px;
-    font-size: 1.1em;
-    font-weight: 400;
+.bs-docs-sidebar .nav > li > a {
+  color: #465050;
+  border-left: 2px solid transparent;
+  padding: 4px 10px;
+  font-size: 1.1em;
+  font-weight: 400;
 }
-
 /* nested links */
-.bs-docs-sidebar .nav .nav>li>a {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 30px;
-    font-size: 12px;
+.bs-docs-sidebar .nav .nav > li > a {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 30px;
+  font-size: 12px;
 }
-
 /* active & hover links */
-.bs-docs-sidebar .nav>.active>a, 
-.bs-docs-sidebar .nav>li>a:hover, 
-.bs-docs-sidebar .nav>li>a:focus {
-    color: rgb(0, 34, 85);                 
-    text-decoration: none;          
-    background-color: transparent;  
-    border-left-color: rgb(0, 34, 85); 
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+  color: #002255;
+  text-decoration: none;
+  background-color: transparent;
+  border-left-color: #002255;
 }
 /* all active links */
-.bs-docs-sidebar .nav>.active>a, 
-.bs-docs-sidebar .nav>.active:hover>a,
-.bs-docs-sidebar .nav>.active:focus>a {
-    font-weight: 700;
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
+  font-weight: 700;
 }
 /* nested active links */
-.bs-docs-sidebar .nav .nav>.active>a, 
-.bs-docs-sidebar .nav .nav>.active:hover>a,
-.bs-docs-sidebar .nav .nav>.active:focus>a {
-    font-weight: 500;
+.bs-docs-sidebar .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav > .active:focus > a {
+  font-weight: 500;
 }
-
 /* hide inactive nested list */
 .bs-docs-sidebar .nav ul.nav {
-    display: none;           
+  display: none;
 }
 /* show active nested list */
-.bs-docs-sidebar .nav>.active>ul.nav {
-    display: block;           
+.bs-docs-sidebar .nav > .active > ul.nav {
+  display: block;
 }
-
 .back-to-top {
-    color: rgb(90,90,90);
-    border-left: 2px solid transparent;
-    margin-top: 10px;
-    padding: 4px 10px;
-    font-size: 1em;
-    font-weight: 400;
-    display: block;
+  color: #465050;
+  border-left: 2px solid transparent;
+  margin-top: 10px;
+  padding: 4px 10px;
+  font-size: 1em;
+  font-weight: 400;
+  display: block;
 }
-
 /* button */
 /**/
 .btn-c1 {
-    color: rgb(0, 34, 85);
-}
-.btn-c1:hover, .btn-c1:focus, .btn-c1:active, .btn-c1.active, .open>.dropdown-toggle.btn-c1 {
-    color: rgb(240,130,0);   
-    background: rgb(255,255,255);
+  color: #002255;
 }
-
+.btn-c1:hover,
+.btn-c1:focus,
+.btn-c1:active,
+.btn-c1.active,
+.open > .dropdown-toggle.btn-c1 {
+  color: #f08200;
+  background: #ffffff;
+}
 .btn-xlarge {
-    padding: 0.5em 3em;
-    font-size: 1.4em;
+  padding: 0.5em 3em;
+  font-size: 1.4em;
 }
-
 /* panel */
 /**/
 .panel-default {
-    border-color: rgb(255,255,255);
+  border-color: #ffffff;
 }
-
 .panel-default .panel-heading {
-    background: rgb(255,255,255);
-    border-color: rgb(255,255,255);
+  background: #ffffff;
+  border-color: #ffffff;
 }
-
 h1.panel-title {
-    color: rgb(0, 34, 85);
-    font-size: 2.2em;
+  color: #002255;
+  font-size: 2.2em;
 }
 h2.panel-title {
-    color: rgb(0, 34, 85);
-    font-size: 2em;
+  color: #002255;
+  font-size: 2em;
 }
 .h3-steps {
-    margin-top: 1.5em;
+  margin-top: 1.5em;
 }
-
 /* text */
 /**/
 h1 {
-    color: rgb(0, 34, 85);
+  color: #002255;
 }
-
 h2 {
-    color: rgb(0, 34, 85);
+  color: #002255;
 }
-
 h3 {
-    color: rgb(0, 34, 85);
+  color: #002255;
 }
-
 .h4c {
-    margin-top: 2em;
-    font-size: 1.5em;
-    color: rgb(0, 34, 85);
+  margin-top: 2em;
+  font-size: 1.5em;
+  color: #002255;
 }
-
 .ac {
-    color: rgb(70,70,80);
-}
\ No newline at end of file
+  color: #465050;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/style.less	Mon Oct 31 13:15:06 2016 -0400
@@ -0,0 +1,202 @@
+/* colours */
+@white: rgb(255,255,255);
+@dark-blue: rgb(0,34,85);
+@orange: rgb(240,130,0);
+@grey: rgb(70,80,80);
+
+/* sizes */
+@screen-md-min: 992px;
+
+/* logo */
+/**/
+div#logo-box {
+    margin: 1em;
+    margin-top: 4em;
+}
+
+div#logo-box img {
+    max-width: 50%;
+    height: auto;
+}
+
+@media (min-width: @screen-md-min) {
+    div#logo-box img {
+        max-width: 25%;
+    }
+}
+
+/* navbar */
+/**/
+.navbar-default {
+  background-color: @white;
+  border-color: @white;
+  border-bottom-color: @dark-blue;
+  font-size: 1.2em;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: @dark-blue;
+}
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: @orange;
+}
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: @orange;
+  background-color: @white;
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+  color: @orange;
+  background-color: @white;
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+  border-color: @orange
+}
+
+.navbar-c1 {
+    margin-right: 0.1em;
+}
+
+/* bs-docs-sidebar */
+/**/
+body {
+    position: relative;
+}
+
+.fixed {
+    position: fixed;
+}
+
+/* sidebar */
+.bs-docs-sidebar {
+    padding-left: 5px;
+    padding-right: 10px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+/* all links */
+.bs-docs-sidebar .nav>li>a {
+    color: @grey;
+    border-left: 2px solid transparent;
+    padding: 4px 10px;
+    font-size: 1.1em;
+    font-weight: 400;
+}
+
+/* nested links */
+.bs-docs-sidebar .nav .nav>li>a {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 30px;
+    font-size: 12px;
+}
+
+/* active & hover links */
+.bs-docs-sidebar .nav>.active>a, 
+.bs-docs-sidebar .nav>li>a:hover, 
+.bs-docs-sidebar .nav>li>a:focus {
+    color: @dark-blue;                 
+    text-decoration: none;          
+    background-color: transparent;  
+    border-left-color: @dark-blue; 
+}
+/* all active links */
+.bs-docs-sidebar .nav>.active>a, 
+.bs-docs-sidebar .nav>.active:hover>a,
+.bs-docs-sidebar .nav>.active:focus>a {
+    font-weight: 700;
+}
+/* nested active links */
+.bs-docs-sidebar .nav .nav>.active>a, 
+.bs-docs-sidebar .nav .nav>.active:hover>a,
+.bs-docs-sidebar .nav .nav>.active:focus>a {
+    font-weight: 500;
+}
+
+/* hide inactive nested list */
+.bs-docs-sidebar .nav ul.nav {
+    display: none;           
+}
+/* show active nested list */
+.bs-docs-sidebar .nav>.active>ul.nav {
+    display: block;           
+}
+
+.back-to-top {
+    color: @grey;
+    border-left: 2px solid transparent;
+    margin-top: 10px;
+    padding: 4px 10px;
+    font-size: 1em;
+    font-weight: 400;
+    display: block;
+}
+
+/* button */
+/**/
+.btn-c1 {
+    color: @dark-blue;
+}
+.btn-c1:hover, .btn-c1:focus, .btn-c1:active, .btn-c1.active, .open>.dropdown-toggle.btn-c1 {
+    color: @orange;   
+    background: @white;
+}
+
+.btn-xlarge {
+    padding: 0.5em 3em;
+    font-size: 1.4em;
+}
+
+/* panel */
+/**/
+.panel-default {
+    border-color: @white;
+}
+
+.panel-default .panel-heading {
+    background: @white;
+    border-color: @white;
+}
+
+h1.panel-title {
+    color: @dark-blue;
+    font-size: 2.2em;
+}
+h2.panel-title {
+    color: @dark-blue;
+    font-size: 2em;
+}
+.h3-steps {
+    margin-top: 1.5em;
+}
+
+/* text */
+/**/
+h1 {
+    color: @dark-blue;
+}
+
+h2 {
+    color: @dark-blue;
+}
+
+h3 {
+    color: @dark-blue;
+}
+
+.h4c {
+    margin-top: 2em;
+    font-size: 1.5em;
+    color: @dark-blue;
+}
+
+.ac {
+    color: @grey;
+}
\ No newline at end of file