fixing hover/active states of colored buttons

Former-commit-id: 69a049f9ca
Former-commit-id: 998854ea04

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-35b91725e2705e3e9d121159d94f3b3f9a1083de
+02c021c6ec336d0e1d528d65fd9ce1ee17daf92b

build/packaged/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-2a577cba9601d7d539c08f2f47956b7ce432ba22
+bd92fcca9da362ee4941fc0f3dddfc2acbd1fdd8

build/uncompressed/elements/button.css

@@ -75,6 +75,11 @@
 .ui.buttons .button.active,
 .ui.button.active {
   background-color: #E6E6E6;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
   -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
   -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
   box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
@@ -230,7 +235,7 @@
 .ui.buttons.black .button:active,
 .ui.button.black.down,
 .ui.button.black:active {
-  background-color: #888888;
+  background-color: #666666;
   color: #FFFFFF;
 }
 /*--- Green ---*/
@@ -250,7 +255,7 @@
 .ui.buttons.green .button:active,
 .ui.button.green.down,
 .ui.button.green:active {
-  background-color: #89B84C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 /*--- Red ---*/
@@ -270,7 +275,7 @@
 .ui.buttons.red .button:active,
 .ui.button.red.down,
 .ui.button.red:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 /*--- Blue ---*/
@@ -290,7 +295,7 @@
 .ui.buttons.blue .button:active,
 .ui.button.blue.down,
 .ui.button.blue:active {
-  background-color: #1AB8F3;
+  background-color: #0AA5DF;
   color: #FFFFFF;
 }
 /*--- Purple ---*/
@@ -310,7 +315,7 @@
 .ui.buttons.purple .button:active,
 .ui.button.purple.down,
 .ui.button.purple:active {
-  background-color: #3E3773;
+  background-color: #2E2860;
   color: #FFFFFF;
 }
 /*--- Teal ---*/
@@ -330,7 +335,7 @@
 .ui.buttons.teal .button:active,
 .ui.button.teal.down,
 .ui.button.teal:active {
-  background-color: #009A93;
+  background-color: #00847E;
   color: #FFFFFF;
 }
 /*---------------
@@ -345,14 +350,14 @@
 .ui.buttons.positive .button:hover,
 .ui.button.positive.hover,
 .ui.button.positive:hover {
-  background-color: #7DDC5C;
+  background-color: #89B84C;
   color: #FFFFFF;
 }
 .ui.buttons.positive .button.down,
 .ui.buttons.positive .button:active,
 .ui.button.positive.down,
 .ui.button.positive:active {
-  background-color: #7DDC5C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 /*---------------
@@ -374,7 +379,7 @@
 .ui.buttons.negative .button:active,
 .ui.button.negative.down,
 .ui.button.negative:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 /*-------------------

build/uncompressed/elements/icons.css

@@ -536,6 +536,11 @@ i.icon.zoom.out:before {
 /*--------------
    Spacing Fix
 ---------------*/
+/* stars are usually consecutive */
+i.icon.star {
+  width: auto;
+  margin: 0em;
+}
 i.icon.left,
 i.icon.left,
 i.icon.left {

node/src/documents/views/comment.html

@@ -116,7 +116,12 @@ type   : 'UI View'
           <a class="author">Dog Doggington</a>
           <div class="metadata">
             <div class="date data">2 days ago</div>
-            <div class="stars data">5 stars</div>
+            <div class="stars data">
+              <i class="icon star"></i>
+              <i class="icon star"></i>
+              <i class="icon star"></i>
+              <i class="icon half star"></i>
+            </div>
           </div>
           <div class="text">
             I think this is a great idea and i am voting on it

node/src/files/components/semantic/elements/button.css

@@ -75,6 +75,11 @@
 .ui.buttons .button.active,
 .ui.button.active {
   background-color: #E6E6E6;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
   -webkit-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
   -moz-box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
   box-shadow: 0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset;
@@ -230,7 +235,7 @@
 .ui.buttons.black .button:active,
 .ui.button.black.down,
 .ui.button.black:active {
-  background-color: #888888;
+  background-color: #666666;
   color: #FFFFFF;
 }
 /*--- Green ---*/
@@ -250,7 +255,7 @@
 .ui.buttons.green .button:active,
 .ui.button.green.down,
 .ui.button.green:active {
-  background-color: #89B84C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 /*--- Red ---*/
@@ -270,7 +275,7 @@
 .ui.buttons.red .button:active,
 .ui.button.red.down,
 .ui.button.red:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 /*--- Blue ---*/
@@ -290,7 +295,7 @@
 .ui.buttons.blue .button:active,
 .ui.button.blue.down,
 .ui.button.blue:active {
-  background-color: #1AB8F3;
+  background-color: #0AA5DF;
   color: #FFFFFF;
 }
 /*--- Purple ---*/
@@ -310,7 +315,7 @@
 .ui.buttons.purple .button:active,
 .ui.button.purple.down,
 .ui.button.purple:active {
-  background-color: #3E3773;
+  background-color: #2E2860;
   color: #FFFFFF;
 }
 /*--- Teal ---*/
@@ -330,7 +335,7 @@
 .ui.buttons.teal .button:active,
 .ui.button.teal.down,
 .ui.button.teal:active {
-  background-color: #009A93;
+  background-color: #00847E;
   color: #FFFFFF;
 }
 /*---------------
@@ -345,14 +350,14 @@
 .ui.buttons.positive .button:hover,
 .ui.button.positive.hover,
 .ui.button.positive:hover {
-  background-color: #7DDC5C;
+  background-color: #89B84C;
   color: #FFFFFF;
 }
 .ui.buttons.positive .button.down,
 .ui.buttons.positive .button:active,
 .ui.button.positive.down,
 .ui.button.positive:active {
-  background-color: #7DDC5C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 /*---------------
@@ -374,7 +379,7 @@
 .ui.buttons.negative .button:active,
 .ui.button.negative.down,
 .ui.button.negative:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 /*-------------------

node/src/files/components/semantic/elements/icons.css

@@ -536,6 +536,11 @@ i.icon.zoom.out:before {
 /*--------------
    Spacing Fix
 ---------------*/
+/* stars are usually consecutive */
+i.icon.star {
+  width: auto;
+  margin: 0em;
+}
 i.icon.left,
 i.icon.left,
 i.icon.left {

src/elements/button.less

@@ -128,6 +128,13 @@
 .ui.buttons .button.active,
 .ui.button.active {
   background-color: #E6E6E6;
+  
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15)));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
+
   -webkit-box-shadow:
     0em 0.125em 0.125em 0em rgba(0, 0, 0, 0.15) inset
   ;
@@ -311,7 +318,7 @@
 .ui.buttons.black .button:active,
 .ui.button.black.down,
 .ui.button.black:active {
-  background-color: #888888;
+  background-color: #666666;
   color: #FFFFFF;
 }
 
@@ -332,7 +339,7 @@
 .ui.buttons.green .button:active,
 .ui.button.green.down,
 .ui.button.green:active {
-  background-color: #89B84C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 
@@ -353,7 +360,7 @@
 .ui.buttons.red .button:active,
 .ui.button.red.down,
 .ui.button.red:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 
@@ -374,7 +381,7 @@
 .ui.buttons.blue .button:active,
 .ui.button.blue.down,
 .ui.button.blue:active {
-  background-color: #1AB8F3;
+  background-color: #0AA5DF;
   color: #FFFFFF;
 }
 
@@ -395,7 +402,7 @@
 .ui.buttons.purple .button:active,
 .ui.button.purple.down,
 .ui.button.purple:active {
-  background-color: #3E3773;
+  background-color: #2E2860;
   color: #FFFFFF;
 }
 
@@ -416,7 +423,7 @@
 .ui.buttons.teal .button:active,
 .ui.button.teal.down,
 .ui.button.teal:active {
-  background-color: #009A93;
+  background-color: #00847E;
   color: #FFFFFF;
 }
 
@@ -433,14 +440,14 @@
 .ui.buttons.positive .button:hover,
 .ui.button.positive.hover,
 .ui.button.positive:hover {
-  background-color: #7DDC5C;
+  background-color: #89B84C;
   color: #FFFFFF;
 }
 .ui.buttons.positive .button.down,
 .ui.buttons.positive .button:active,
 .ui.button.positive.down,
 .ui.button.positive:active {
-  background-color: #7DDC5C;
+  background-color: #7AAA3D;
   color: #FFFFFF;
 }
 
@@ -448,7 +455,6 @@
 /*---------------
      Negative
 ----------------*/
-
 .ui.buttons.negative .button,
 .ui.button.negative {
   background-color: #EF4D6D;
@@ -465,7 +471,7 @@
 .ui.buttons.negative .button:active,
 .ui.button.negative.down,
 .ui.button.negative:active {
-  background-color: #DE3859;
+  background-color: #CD2D4D;
   color: #FFFFFF;
 }
 

src/elements/icons.less

@@ -200,6 +200,12 @@ i.icon.zoom.out:before { content: '\e751'; } /* '' */
    Spacing Fix
 ---------------*/
 
+/* stars are usually consecutive */
+i.icon.star {
+  width: auto;
+  margin: 0em;
+}
+
 i.icon.left,
 i.icon.left,
 i.icon.left {