Merge pull request #761 from saharj/newStyle

fehguy · fehguy · commit 6cbc96049205 · 2016-01-19T22:05:39.000-05:00
[less] Refactor Less variables in editor, header, schema-model and se…
diff --git a/app/styles/buttons.less b/app/styles/buttons.less
@@ -15,7 +15,7 @@ button {
 
 
 button.border-only {
-  background: white;
+  background: @white;
 
   &:hover {
     background-color: lighten(@gray-md, 47%);
@@ -24,7 +24,7 @@ button.border-only {
 
   &.red:hover {
     background: @sw-error-header;
-    color: white;
+    color: @white;
   }
 }
 
@@ -34,7 +34,7 @@ button.call {
   display: inline-block;
   border:1px solid @gray-lt;
   background-color: @gray-lt;
-  color: #444;
+  color: @call-button;
   border-radius: 3px;
   appearance: none;
   cursor: pointer;
diff --git a/app/styles/colors.less b/app/styles/colors.less
@@ -1,8 +1,13 @@
 // UI Colors
 @header-bg: #4a4a4a;
 @sw-error-header: #FF081C;
+@sw-success-header: #90C78F;
 @error-text: #FF081C;
 @overlay-text: #F8A81C;
+@main-splitbar: #5E696B;
+@dragover-dash: #138BC4;
+@links: #4183c4;
+@hr-color: #ddd;
 
 
 // Toolbar
@@ -24,6 +29,14 @@
 @gray-lt: #E3E3E3;
 @gray-md: #808080;
 @gray-dk: #333333;
+@gray: #ccc;
+
+// Colors
+@white: white;
+@black: black;
+@silver: silver;
+@red: red;
+@green: green;
 
 // Response Code Colors
 @code-default: #555;
@@ -34,3 +47,55 @@
 
 // Request Response Background Pane
 @pre-bg: #fff7e5;
+
+// Schema Toggle color
+@schema-toggle: rgb(66, 90, 66);
+
+// Security Definitions
+@authentication-button: rgb(195, 252, 195);
+
+// Security
+@security-default: #E5E5E5;
+@security-basic: #A8E8A1;
+@security-apiKey: #A1B2E8;
+@security-oauth2: #F4B487;
+
+// Operation
+@background: #fff;
+@deprecated-background: #C52A5E;
+@table-th: #f7f7f7;
+
+// Intro
+@about-pane: rgba(0, 0, 0, .85);
+
+// Drop Down Menu
+@drop-down-color: rgba(0, 253, 240, 0.81);
+
+// Modal
+@modal-link: rgb(15, 214, 250);
+
+// Tag Colors
+@tag-0: #A60000;
+@tag-1: #0022A6;
+@tag-2: #24A600;
+@tag-3: rgb(255, 223, 0);
+@tag-4: #990A5B;
+@tag-5: #F27D36;
+@tag-6: #32FC34;
+@tag-7: #00FFEC;
+@tag-8: #CD9EED;
+@tag-10: #4FB285;
+@tag-11: #0D77CF;
+@tag-12: #87EA77;
+@tag-13: #EDEDED;
+@tag-14: #F560FF;
+@tag-border: #EBEBEB;
+
+// Try This Operation
+@try-operation-warning: #FFF645;
+
+
+@editor-error: #AA0A0A;
+@external-docs: #337ab7;
+@dirty-msg: #FFFF6E;
+@call-button: #444;
diff --git a/app/styles/components/editor.less b/app/styles/components/editor.less
@@ -1,15 +1,16 @@
 @import "../fonts";
+@import "../colors";
 
 .ace-editor{
   .editor-font;
  	font-size: .8em;
   .editor-error-message {
     padding: .3em;
-    background: #AA0A0A;
-    color: white;
+    background: @editor-error;
+    color: @white;
     max-height: 5.6em;
     pre {
-	font-size: 1em;
+      font-size: 1em;
     }
   }
 
diff --git a/app/styles/components/error-presenter.less b/app/styles/components/error-presenter.less
@@ -6,7 +6,7 @@
   .sw-font;
 
   header {
-    color: white;
+    color: @white;
     cursor: pointer;
     margin: 0;
 
diff --git a/app/styles/components/header.less b/app/styles/components/header.less
@@ -24,15 +24,15 @@ a.logo {
 .status-bar {
   float: right;
   padding: 5px;
-  //TODO: Everything is hardcoded. revisit
+  
   .status {
     text-align: right;
     color: darken(@gray-lt, 25%);
     font-weight: 100;
     font-size: 12px;
 
     &.success {
-      color: #90C78F;
+      color: @sw-success-header;
     }
     &.error {
       color: @sw-error-header;
diff --git a/app/styles/components/intro.less b/app/styles/components/intro.less
@@ -7,7 +7,7 @@
   width: 100%;
   height: 100%;
   z-index: 2011;
-  background: rgba(0, 0, 0, .85);
+  background: @about-pane;
 
   .modal-header {
     position: absolute;
diff --git a/app/styles/components/menu-bar.less b/app/styles/components/menu-bar.less
@@ -13,13 +13,13 @@
     user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
-    color: darken(white, 15%);
+    color: darken(@white, 15%);
     transition: color ease-in 100ms;
   }
 
   &:hover {
     button, a {
-      color: white;
+      color: @white;
     }
   }
 
@@ -50,7 +50,7 @@
         }
 
         &.highlighted {
-          color: rgba(0, 253, 240, 0.81);
+          color: @drop-down-color;
         }
       }
     }
@@ -72,7 +72,7 @@
 
     .dropdown-menu, a, li, button, button:focus {
       background: darken(@header-bg, 10%);
-      color: white;
+      color: @white;
     }
 
     .dropdown-menu {
@@ -94,7 +94,7 @@
 
       &.adjust {
         padding: 0px 15px;
-        border: 1px solid gray;
+        border: 1px solid @gray-md;
         border-radius: 5px;
         margin: 0;
         display: inline-table;
diff --git a/app/styles/components/modal.less b/app/styles/components/modal.less
@@ -6,7 +6,7 @@
   .sw-font;
   border-radius: 3px;
   background: @gray-dk;
-  color: #FFF;
+  color: @white;
 
 
   .modal-title {
@@ -28,7 +28,7 @@
     }
 
     input {
-      color: black;
+      color: @black;
       padding: 0.2em;
       border-radius: 0;
     }
@@ -38,11 +38,11 @@
     }
 
     select {
-      color: #000000; // 1
+      color: @black;
     }
 
     a {
-      color: rgb(15, 214, 250);
+      color: @modal-link;
     }
   }
 
diff --git a/app/styles/components/operation.less b/app/styles/components/operation.less
@@ -5,11 +5,11 @@
 
 .operation-theme(@color) {
   border: 1px solid @color;
-  background-color: #fff;
+  background-color: @background;
 
   .http-method{
     background-color: @color;
-    color: white;
+    color: @white;
   }
   >header {
     background-color: fade(@color, 10%);
@@ -56,10 +56,10 @@ li.operation {
     .deprecated {
       float: left;
       margin: 8px;
-      color: white;
-      background: #C52A5E; // TODO: move to colors.less
+      color: @white;
+      background: @deprecated-background;
       padding: 0px 7px;
-      border: 1px solid white;
+      border: 1px solid @white;
     }
 
     &:hover .focus-editor {
@@ -133,14 +133,14 @@ li.operation {
         >th {
           padding: 0.3em;
           font-weight: 600;
-          background-color: #f7f7f7;
+          background-color: @table-th;
         }
       }
     }
 
     >tbody {
       >tr {
-        border-bottom: 1px solid silver;
+        border-bottom: 1px solid @silver;
         font-size: 16px;
 
         >td {
diff --git a/app/styles/components/path-headers.less b/app/styles/components/path-headers.less
@@ -17,7 +17,7 @@
 
   .external-docs {
     margin-top: 1em;
-    a { color: #337ab7; }
+    a { color: @external-docs; }
   }
 
   h1 {
diff --git a/app/styles/components/path.less b/app/styles/components/path.less
@@ -30,7 +30,7 @@ li.path {
 
         &:hover {
           cursor: pointer;
-          border-bottom: 1px dotted silver;
+          border-bottom: 1px dotted @silver;
 
         }
       }
diff --git a/app/styles/components/preview.less b/app/styles/components/preview.less
@@ -5,7 +5,7 @@
   .sw-font;
 
   .dirty-message {
-    background: #FFFF6E;
+    background: @dirty-msg;
     padding: .3em;
   }
 
@@ -16,7 +16,7 @@
 
       &:hover {
         text-decoration: none;
-        border-bottom: 1px dotted silver;
+        border-bottom: 1px dotted @silver;
       }
     }
 
@@ -52,7 +52,7 @@
         display: inline-block;
         height: 19px;
         width: 22px;
-        color: #808080;
+        color: @gray-md;
         background-image: url("../images/jump-icon.svg");
       }      
     }
diff --git a/app/styles/components/schema-model.less b/app/styles/components/schema-model.less
@@ -8,16 +8,15 @@
   }
 
   a.toggle {
-    // TODO: hardcoded color
-    color: rgb(66, 90, 66);
+    color: @schema-toggle;
     text-decoration: none;
     margin: 0 0.3em;
     padding: 0 0.2em;
     border-radius: 3px;
 
     &:hover {
-      background: rgb(66, 90, 66);
-      color: white;
+      background: @schema-toggle;
+      color: @white;
     }
   }
 }
diff --git a/app/styles/components/security-definitions.less b/app/styles/components/security-definitions.less
@@ -1,3 +1,5 @@
+@import "../colors";
+
 .security-definition-theme(@color) {
   border: 1px solid @color;
   >header {
@@ -8,10 +10,10 @@
 .security-definitions {
   .security-definition {
 
-    .security-definition-theme(#E5E5E5);
-    &.basic  { .security-definition-theme(#A8E8A1); }
-    &.apiKey { .security-definition-theme(#A1B2E8); }
-    &.oauth2 { .security-definition-theme(#F4B487); }
+    .security-definition-theme(@security-default);
+    &.basic  { .security-definition-theme(@security-basic); }
+    &.apiKey { .security-definition-theme(@security-apiKey); }
+    &.oauth2 { .security-definition-theme(@security-oauth2); }
 
     >header, >section { padding: .4em; }
     margin-bottom: 1em;
@@ -23,9 +25,8 @@
     .authentication {
       float: right;
 
-      // TODO: colors
       button {
-        background: rgb(195, 252, 195);
+        background: @authentication-button;
         border: none;
         padding: 0.1em 0.5em
       }
diff --git a/app/styles/components/tags.less b/app/styles/components/tags.less
diff --git a/app/styles/components/try-operation.less b/app/styles/components/try-operation.less
diff --git a/app/styles/main.less b/app/styles/main.less
diff --git a/app/styles/markdown.less b/app/styles/markdown.less

Original file line number	Diff line number	Diff line change
`@@ -13,13 +13,13 @@`
`13`	`13`	`user-select: none;`
`14`	`14`	`-webkit-user-select: none;`
`15`	`15`	`-ms-user-select: none;`
`16`		`- color: darken(white, 15%);`
	`16`	`+ color: darken(@white, 15%);`
`17`	`17`	`transition: color ease-in 100ms;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`&:hover {`
`21`	`21`	`button, a {`
`22`		`- color: white;`
	`22`	`+ color: @white;`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`
`@@ -50,7 +50,7 @@`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`&.highlighted {`
`53`		`- color: rgba(0, 253, 240, 0.81);`
	`53`	`+ color: @drop-down-color;`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`	`}`
`@@ -72,7 +72,7 @@`
`72`	`72`
`73`	`73`	`.dropdown-menu, a, li, button, button:focus {`
`74`	`74`	`background: darken(@header-bg, 10%);`
`75`		`- color: white;`
	`75`	`+ color: @white;`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`.dropdown-menu {`
`@@ -94,7 +94,7 @@`
`94`	`94`
`95`	`95`	`&.adjust {`
`96`	`96`	`padding: 0px 15px;`
`97`		`- border: 1px solid gray;`
	`97`	`+ border: 1px solid @gray-md;`
`98`	`98`	`border-radius: 5px;`
`99`	`99`	`margin: 0;`
`100`	`100`	`display: inline-table;`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`.sw-font;`
`7`	`7`	`border-radius: 3px;`
`8`	`8`	`background: @gray-dk;`
`9`		`- color: #FFF;`
	`9`	`+ color: @white;`
`10`	`10`
`11`	`11`
`12`	`12`	`.modal-title {`
`@@ -28,7 +28,7 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`input {`
`31`		`- color: black;`
	`31`	`+ color: @black;`
`32`	`32`	`padding: 0.2em;`
`33`	`33`	`border-radius: 0;`
`34`	`34`	`}`
`@@ -38,11 +38,11 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`select {`
`41`		`- color: #000000; // 1`
	`41`	`+ color: @black;`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`a {`
`45`		`- color: rgb(15, 214, 250);`
	`45`	`+ color: @modal-link;`
`46`	`46`	`}`
`47`	`47`	`}`
`48`	`48`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`
`18`	`18`	`.external-docs {`
`19`	`19`	`margin-top: 1em;`
`20`		`- a { color: #337ab7; }`
	`20`	`+ a { color: @external-docs; }`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`h1 {`