Less to css

Author: austinkelleher

components/app-button/style.less renamed to components/app-button/style.css

@@ -2,26 +2,25 @@
   display: inline-block;
   border-radius: 50px;
   padding: 12px;
-  background-color: @button-bg;
-  color: @button-fg;
-
+  background-color: #2980b9;
+  color: #ffffff;
   transition-property: background-color;
   transition-duration: .3s;
   transition-timing-function: ease-out;
 }
 
 .app-button:hover {
-  background-color: lighten(@button-bg, 10%);
+  background-color: #409ad5;
 }
 
 /* Variants */
 .app-button-secondary {
-  background-color: @button-secondary-bg;
-  color: @button-secondary-fg;
+  background-color: #999999;
+  color: #ffffff;
 }
 
 .app-button-secondary:hover {
-  background-color: lighten(@button-secondary-bg, 10%);
+  background-color: #b3b3b3;
 }
 
 /* Sizes */

components/app-checkbox/style.less renamed to components/app-checkbox/style.css

@@ -1,15 +1,15 @@
 .app-button.app-checkbox {
-  background-color: @button-secondary-bg;
-  color: @button-secondary-fg;
+  background-color: #999999;
+  color: #ffffff;
 }
 
 .app-button.app-checkbox.checked {
-  background-color: @button-bg;
-  color: @button-fg;
+  background-color: #2980b9;
+  color: #ffffff;
 }
 
 .app-checkbox-icon {
-  background-image: url(./images/unchecked.svg);
+  background-image: url(images/unchecked.svg);
   background-size: contain;
   width: 18px;
   height: 18px;
@@ -20,6 +20,6 @@
 }
 
 .app-checkbox.checked .app-checkbox-icon {
-  background-image: url(./images/checked.svg);
+  background-image: url(images/checked.svg);
   opacity: 1.0;
 }

components/app-fetch-data/style.less renamed to components/app-fetch-data/style.css

@@ -1,17 +1,14 @@
-@notification-bg: #2ecc71;
-@notification-border-color: darken(@notification-bg, 20%);
-
 .app-notification {
   opacity: 0;
   transition-property: max-height, opacity;
   transition-duration: .3s;
   transition-timing-function: ease-out;
   max-height: 0px;
   margin-top: 8px;
-  background-color: @notification-bg;
+  background-color: #2ecc71;
   color: white;
   width: 100%;
-  border: 2px solid @notification-border-color;
+  border: 2px solid #1b7943;
   padding-left: 1em;
   padding-right: 1em;
   line-height: 40px;

components/app-notification/style.less renamed to components/app-notification/style.css

@@ -1,4 +1,4 @@
-style.less {
+style {
   .app-notifications {
     position: fixed;
     top: 0px;

components/app-notifications/index.marko

@@ -40,9 +40,9 @@
 }
 
 .number-spinner.positive input {
-  background: rgb(86, 239, 165);
+  background: #56efa5;
 }
 
 .number-spinner.negative input {
-  background: rgb(235, 182, 176);
+  background: #ebb6b0;
 }

components/app-number-spinner/style.css

@@ -51,7 +51,6 @@
   padding-top: 2em;
 }
 
-
 .app-overlay > .app-overlay-container .app-overlay > .app-overlay-container {
   height: 100%;
 }

components/app-overlay/style.less renamed to components/app-overlay/style.css

@@ -5,8 +5,8 @@
 
 .app-progress-bar a.progress-step {
   display: inline-block;
-  background-color: @button-secondary-bg;
-  color: @button-secondary-fg;
+  background-color: #999999;
+  color: #ffffff;
   padding-left: 28px;
   padding-right: 8px;
   height: 2em;
@@ -20,8 +20,8 @@
 }
 
 .app-progress-bar .progress-step.active a.progress-step {
-  background-color: @button-bg;
-  color: @button-fg;
+  background-color: #2980b9;
+  color: #ffffff;
 }
 
 div.progress-step-end {
@@ -41,11 +41,10 @@ svg.progress-step-end {
   height: 100%;
 }
 
-
 polygon.progress-step-end {
-  fill: @button-secondary-bg;
+  fill: #999999;
 }
 
 .app-progress-bar .progress-step.active polygon.progress-step-end {
-  fill: @button-bg;
+  fill: #2980b9;
 }

components/app-progress-bar/style.less

@@ -1,12 +1,9 @@
-.app-sections {
-
-}
 .tableOfContents {
   position: fixed;
   right: 15px;
   top: 15px;
   background-color: #f7f7f9;
-  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
   padding: 1em;
 }
 

components/app-sections/style.less renamed to components/app-sections/style.css

@@ -1,7 +1,3 @@
-.app-tabs .tab {
-
-}
-
 .app-tabs ul.tab-nav {
   padding-left: 0;
   list-style: none;
@@ -14,7 +10,7 @@
 .app-tabs ul.tab-nav > li > a {
   margin-right: 2px;
   line-height: 1.42857143;
-  border: 1px solid @button-secondary-bg;
+  border: 1px solid #999999;
   margin-left: 10px;
   border-radius: 4px 4px 0 0;
   padding-left: 1em;
@@ -23,8 +19,8 @@
   padding-top: 0.5em;
   display: inline-block;
   margin-bottom: -1px;
-  background-color: @button-secondary-bg;
-  color: @button-secondary-fg;
+  background-color: #999999;
+  color: #ffffff;
 }
 
 .app-tabs ul.tab-nav > li:first-child > a {
@@ -39,12 +35,11 @@
 
 .app-tabs .tab-panes {
   clear: both;
-
 }
 
 .app-tabs .tab-pane {
   display: none;
-  border: 1px solid  @button-secondary-bg;
+  border: 1px solid #999999;
   padding: 1em;
 }
 

components/app-tabs/style.less renamed to components/app-tabs/style.css

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "less-import: variables.less",
-    "style.less"
+    "style.css"
   ]
 }

components/playground-app/style.less renamed to components/playground-app/style.css

@@ -1,6 +1,6 @@
 body {
-  font-family: @font-family;
-  color: @font-color;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333333;
   padding: 0;
   margin: 0;
 }
@@ -38,7 +38,7 @@ img {
 textarea,
 input {
   font-size: 14px;
-  font-family: @font-family;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 select {
@@ -69,11 +69,11 @@ h1, h2, h3 {
 
 h1 {
   font-size: 1.5em;
-  color: @dark-color;
+  color: #123851;
+}
 
-  a {
-    color: @dark-color;
-  }
+h1 a {
+  color: #123851;
 }
 
 h2 {
@@ -102,7 +102,7 @@ button {
 }
 
 a {
-  color: @link-color;
+  color: #2980b9;
   text-decoration: none;
 }