fix norm for vars

IceMaD · Feb 20, 2016 · d1badcd · d1badcd
1 parent ee682b7
commit d1badcd
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 53 deletions.
diff --git a/app/sass/component/flash/_flash-message.scss b/app/sass/component/flash/_flash-message.scss
@@ -1,23 +1,28 @@
+$text-color: $snow-white;
+$info-background-color: $perano-blue;
+$danger-background-color: $blush-pink;
+$warning-background-color: $gold-yellow;
+
 @include component(flash-message) {
 
   display: block;
   padding: 1em;
 
   @include modifier(info) {
 
-    background-color: cornflowerblue;
-    color: white;
+    background-color: $info-background-color;
+    color: $text-color;
   }
 
   @include modifier(warning) {
 
-    background-color: orange;
-    color: white;
+    background-color: $warning-background-color;
+    color: $text-color;
   }
 
   @include modifier(danger) {
 
-    background-color: darkred;
-    color: white;
+    background-color: $danger-background-color;
+    color: $text-color;
   }
 }
diff --git a/app/sass/component/global/_button.scss b/app/sass/component/global/_button.scss
@@ -1,9 +1,12 @@
+$default-background-color: $perano-blue;
+$default-text-color: $snow-white;
+
 @include component(button) {
 
   padding: 0.5em 1.5em;
   text-decoration: none;
-  background-color: $blush-pink;
-  color: white;
+  background-color: $default-background-color;
+  color: $default-text-color;
   cursor: pointer;
   border-radius: 3px;
   display: inline-block;

diff --git a/app/sass/component/global/_message.scss b/app/sass/component/global/_message.scss
@@ -1,3 +1,6 @@
+$error-text-color: $blush-pink;
+$success-text-color: $granny-green;
+
 @include component(message) {
 
   display: flex;
@@ -9,12 +12,12 @@
 
     @include modifier(error) {
 
-      color: $blush-pink;
+      color: $error-text-color;
     }
 
     @include modifier(success) {
 
-      color: $granny-green;
+      color: $success-text-color;
     }
   }
 }
diff --git a/app/sass/component/global/_tooltip.scss b/app/sass/component/global/_tooltip.scss
@@ -1,8 +1,11 @@
+$background-color: $perano-blue;
+$text-color: $snow-white;
+
 @include component(tooltip) {
 
   position: fixed;
-  background-color: $granny-green;
-  color: $snow-white;
+  background-color: $background-color;
+  color: $text-color;
   padding: 0.5em 1.5em;
   border-radius: 3px;
   transform: translateX(-50%);
@@ -18,6 +21,6 @@
     height: 0;
     border-style: solid;
     border-width: 10px 10px 0 10px;
-    border-color: $granny-green transparent transparent transparent;
+    border-color: $background-color transparent transparent transparent;
   }
 }
diff --git a/app/sass/component/team/_team-form.scss b/app/sass/component/team/_team-form.scss
@@ -1,3 +1,9 @@
+$disabled-background-color: $alto-grey;
+$disabled-border-color: darken($disabled-background-color, 15%);
+$submit-text-color: $snow-white;
+$submit-background-color: $granny-green;
+$submit-border-color: darken($submit-background-color, 15%);
+
 @include component(team-form) {
 
   margin: 1em 0;
@@ -8,11 +14,35 @@
     width: 100%;
     padding: 0.5em;
     border: 0;
-    box-shadow: 0 0 0 1px $dusty-grey;
+    box-shadow:
+      shadow-border('top', $disabled-background-color),
+      shadow-border('bottom', $disabled-background-color),
+      shadow-border('left', $disabled-background-color);
+    outline: none;
   }
 
   @include child(submit) {
 
     border: 0;
+    color: $submit-text-color;
+    background-color: $submit-background-color;
+    box-shadow:
+      shadow-border('top', $submit-border-color),
+      shadow-border('right', $submit-border-color),
+      shadow-border('bottom', $submit-border-color);
+    outline: none;
+
+    &:disabled {
+
+      background-color: $disabled-background-color;
+      box-shadow:
+        shadow-border('top', $disabled-background-color),
+        shadow-border('right', $disabled-background-color),
+        shadow-border('bottom', $disabled-background-color);
+    }
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
   }
 }
diff --git a/app/sass/component/team/_team.scss b/app/sass/component/team/_team.scss
@@ -1,7 +1,12 @@
+$border-color: $alto-grey;
+
+$remove-background-color: $blush-pink;
+$remove-text-color: $snow-white;
+
 @include component(team) {
 
-  padding: 0.5em 1.5em;
-  box-shadow: shadow-border("bottom", $dusty-grey);
+  padding: 0.5em 0;
+  box-shadow: shadow-border("bottom", $border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -14,8 +19,8 @@
   @include child(remove) {
 
     border: 0;
-    background-color: $dusty-grey;
-    color: $snow-white;
+    background-color: $remove-background-color;
+    color: $remove-text-color;
     padding: 0.5em;
     line-height: 1em;
     min-width: 2em;

diff --git a/app/sass/component/tree/_node.scss b/app/sass/component/tree/_node.scss
@@ -1,3 +1,23 @@
+$title-background-color: $snow-white;
+$title-border-color: $alto-grey;
+$title-text-color: $text-color;
+
+$winner-background-color: $gold-yellow;
+$won-background-color: $granny-green;
+$lost-background-color: $blush-pink;
+
+@mixin node-title-variant($color) {
+  @include modifier(winner) {
+
+    background-color: lighten($color, 10%);
+
+    @include modifier(highlighted) {
+
+      background-color: darken($color, 20%);
+    }
+  }
+}
+
 @include component(node) {
 
   display: flex;
@@ -39,15 +59,15 @@
   @include child(title) {
 
     position: relative;
-    background-color: $snow-white;
-    border: 1px solid $dusty-grey;
+    background-color: $title-background-color;
+    border: 1px solid $title-border-color;
     font-size: 1em;
     padding: 0.5em;
     margin: 0.5em;
     min-width: 200px;
     max-height: 2em;
     border-radius: 3px;
-    color: $text-color;
+    color: $title-text-color;
     outline: none;
     cursor: pointer;
 
@@ -70,34 +90,8 @@
       }
     }
 
-    @include modifier(winner) {
-
-      background-color: lighten($gold-yellow, 10%);
-
-      @include modifier(highlighted) {
-
-        background-color: darken($gold-yellow, 20%);
-      }
-    }
-
-    @include modifier(won) {
-
-      background-color: lighten($granny-green, 10%);
-
-      @include modifier(highlighted) {
-
-        background-color: darken($granny-green, 20%);
-      }
-    }
-
-    @include modifier(lost) {
-
-      background-color: lighten($blush-pink, 10%);
-
-      @include modifier(highlighted) {
-
-        background-color: darken($blush-pink, 20%);
-      }
-    }
+    @include node-title-variant($winner-background-color);
+    @include node-title-variant($won-background-color);
+    @include node-title-variant($lost-background-color);
   }
 }
diff --git a/app/sass/ext/_variables.scss b/app/sass/ext/_variables.scss
@@ -2,7 +2,9 @@ $snow-white: #fff;
 
 $mine-grey: #222;
 $dusty-grey: #999;
+$alto-grey: #ddd;
 
+$perano-blue: #a1c0ed;
 $gold-yellow : #ffe075;
 $granny-green: #A0E788;
 $blush-pink: #E78894;

diff --git a/app/templates/team-form.html b/app/templates/team-form.html
@@ -1,6 +1,11 @@
-<form (submit)="addTeam()" class="team-form">
-  <input type="text" [(ngModel)]="model" class="team-form_input">
-  <button class="team-form_submit" type="submit">
+<form (submit)="addTeam()"
+      class="team-form">
+  <input type="text"
+         [(ngModel)]="model"
+         class="team-form_input">
+  <button class="team-form_submit"
+          type="submit"
+          [disabled]="!model">
     <i class="material-icons">add</i>
   </button>
 </form>