Try out using less for css

hawtio · May 16, 2013 · 1b7ea93 · 1b7ea93
1 parent fc69d1c
commit 1b7ea93
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/hawtio-web/src/main/webapp/css/site-base.css → ...io-web/src/main/webapp/css/site-base.less b/hawtio-web/src/main/webapp/css/site-base.css → ...io-web/src/main/webapp/css/site-base.less
@@ -157,7 +157,7 @@ td {
 
 .expandable {
   padding: 3px;
-} 
+}
 .expandable > .title {
   cursor: pointer;
 }
@@ -540,13 +540,13 @@ li.attr-column {
 
 .RESOLVED:before {
   font-family: FontAwesome;
-  content: "\f0ad"; 
-  font-style: normal; 
+  content: "\f0ad";
+  font-style: normal;
 }
 
-.STARTING:before { 
+.STARTING:before {
   font-family: FontAwesome;
-  content: "\f021"; 
+  content: "\f021";
   font-style: normal;
 }
 
@@ -557,9 +557,9 @@ li.attr-column {
   animation: spin 2s infinite linear;
 }
 
-.STOPPING:before { 
+.STOPPING:before {
   font-family: FontAwesome;
-  content: "\f021";  
+  content: "\f021";
   font-style: normal;
 }
 
@@ -572,13 +572,13 @@ li.attr-column {
 
 .UNINSTALLED:before {
   font-family: FontAwesome;
-  content: "\f014";  
+  content: "\f014";
   font-style: normal;
 }
 
-.INSTALLED:before { 
+.INSTALLED:before {
   font-family: FontAwesome;
-  content: "\f06b";  
+  content: "\f06b";
   font-style: normal;
 }
 
@@ -1310,7 +1310,7 @@ li.stacktrace {
   background: white;
   text-align: right;
   opacity: .8;
-  transition: all 1s ease-in-out;
+  transition: width 1s ease-in-out;
   border-top-left-radius: 4px;
   padding-right: 2em;
   overflow: hidden;

diff --git a/...o-web/src/main/webapp/css/site-narrow.css → ...-web/src/main/webapp/css/site-narrow.less b/...o-web/src/main/webapp/css/site-narrow.css → ...-web/src/main/webapp/css/site-narrow.less
diff --git a/hawtio-web/src/main/webapp/css/site-wide.css → ...io-web/src/main/webapp/css/site-wide.less b/hawtio-web/src/main/webapp/css/site-wide.css → ...io-web/src/main/webapp/css/site-wide.less
diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -32,10 +32,10 @@
   <link rel='stylesheet' href='css/codemirror/themes/xq-dark.css' type='text/css'>
   <link rel='stylesheet' href='css/toastr.css' type='text/css'>
 
-  <link rel='stylesheet' href='css/site-base.css' type='text/css'>
+  <link rel='stylesheet/less' href='css/site-base.less' type='text/css'>
 
-  <link rel='stylesheet' media='screen and (min-width: 980px)' href='css/site-wide.css' type='text/css'>
-  <link rel='stylesheet' media='screen and (max-width: 979px)' href='css/site-narrow.css' type='text/css'>
+  <link rel='stylesheet/less' media='screen and (min-width: 980px)' href='css/site-wide.less' type='text/css'>
+  <link rel='stylesheet/less' media='screen and (max-width: 979px)' href='css/site-narrow.less' type='text/css'>
 
 </head>
 <body ng-controller="Core.AppController">
@@ -191,5 +191,16 @@
 <!-- google maps -->
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
 
+<!-- less -->
+<!-- TODO - enable for development only -->
+<script type="text/javascript">
+  less = {
+    async: false,
+    poll: 1000,
+    dumpLineNumbers: 'comments'
+  };
+</script>
+<script src="lib/less-1.3.3.min.js" type="text/javascript"></script>
+
 </body>
 </html>
diff --git a/hawtio-web/src/main/webapp/lib/less-1.3.3.min.js b/hawtio-web/src/main/webapp/lib/less-1.3.3.min.js