fixed #1584

primefaces · Dec 13, 2016 · 7315f9e · 7315f9e
1 parent 7b8cb6a
commit 7315f9e
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 50 deletions.
diff --git a/components/button/button.css b/components/button/button.css
@@ -102,4 +102,85 @@ button.ui-button::-moz-focus-inner {
     .ui-fluid .ui-buttonset.ui-buttonset-6 .ui-button {
         width: 100%;
     }
+}
+
+/* Severity Buttons */
+/* Secondary */
+.ui-button.ui-button-secondary.ui-state-default {
+    background-color: #ffffff;
+    border-color: #cccccc;
+    color: #373a3c;
+}
+
+.ui-button.ui-button-secondary.ui-state-hover,
+.ui-button.ui-button-secondary.ui-state-focus {
+    background-color: #f2f2f2;
+}
+
+.ui-button.ui-button-secondary.ui-state-active {
+    background-color: #e6e6e6;
+}
+
+/* Success */
+.ui-button.ui-button-success.ui-state-default {
+    background-color: #5cb85c;
+    border-color: #5cb85c;
+    color: #ffffff;
+}
+
+.ui-button.ui-button-success.ui-state-hover,
+.ui-button.ui-button-success.ui-state-focus {
+    background-color: #4cae4c;
+}
+
+.ui-button.ui-button-success.ui-state-active {
+    background-color: #449d44;
+}
+
+/* Info */
+.ui-button.ui-button-info.ui-state-default {
+    background-color: #5bc0de;
+    border-color: #5bc0de;
+    color: #ffffff;
+}
+
+.ui-button.ui-button-info.ui-state-hover,
+.ui-button.ui-button-info.ui-state-focus {
+    background-color: #46b8da;
+}
+
+.ui-button.ui-button-info.ui-state-active {
+    background-color: #31b0d5;
+}
+
+/* Warning */
+.ui-button.ui-button-warning.ui-state-default {
+    background-color: #f0ad4e;
+    border-color: #f0ad4e;
+    color: #ffffff;
+}
+
+.ui-button.ui-button-warning.ui-state-hover,
+.ui-button.ui-button-warning.ui-state-focus {
+    background-color: #eea236;
+}
+
+.ui-button.ui-button-warning.ui-state-active {
+    background-color: #ec971f;
+}
+
+/* Danger */
+.ui-button.ui-button-danger.ui-state-default {
+    background-color: #d9534f;
+    border-color: #d9534f;
+    color: #ffffff;
+}
+
+.ui-button.ui-button-danger.ui-state-hover,
+.ui-button.ui-button-danger.ui-state-focus {
+    background-color: #d43f3a;
+}
+
+.ui-button.ui-button-danger.ui-state-active {
+    background-color: #c9302c;
 }
diff --git a/resources/themes/bootstrap/theme.css b/resources/themes/bootstrap/theme.css
@@ -116,56 +116,6 @@ body .ui-button {
     -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
-  body .ui-button.ui-button-secondary {
-    background-color: #ffffff;
-    border-color: #cccccc;
-    color: #373a3c; }
-    body .ui-button.ui-button-secondary.ui-state-hover {
-      background-color: #f2f2f2; }
-    body .ui-button.ui-button-secondary.ui-state-focus {
-      background-color: #f2f2f2; }
-    body .ui-button.ui-button-secondary.ui-state-active {
-      background-color: #e6e6e6; }
-  body .ui-button.ui-button-success {
-    background-color: #5cb85c;
-    border-color: #5cb85c;
-    color: #ffffff; }
-    body .ui-button.ui-button-success.ui-state-hover {
-      background-color: #4cae4c; }
-    body .ui-button.ui-button-success.ui-state-focus {
-      background-color: #4cae4c; }
-    body .ui-button.ui-button-success.ui-state-active {
-      background-color: #449d44; }
-  body .ui-button.ui-button-info {
-    background-color: #5bc0de;
-    border-color: #5bc0de;
-    color: #ffffff; }
-    body .ui-button.ui-button-info.ui-state-hover {
-      background-color: #46b8da; }
-    body .ui-button.ui-button-info.ui-state-focus {
-      background-color: #46b8da; }
-    body .ui-button.ui-button-info.ui-state-active {
-      background-color: #31b0d5; }
-  body .ui-button.ui-button-warning {
-    background-color: #f0ad4e;
-    border-color: #f0ad4e;
-    color: #ffffff; }
-    body .ui-button.ui-button-warning.ui-state-hover {
-      background-color: #eea236; }
-    body .ui-button.ui-button-warning.ui-state-focus {
-      background-color: #eea236; }
-    body .ui-button.ui-button-warning.ui-state-active {
-      background-color: #ec971f; }
-  body .ui-button.ui-button-danger {
-    background-color: #d9534f;
-    border-color: #d9534f;
-    color: #ffffff; }
-    body .ui-button.ui-button-danger.ui-state-hover {
-      background-color: #d43f3a; }
-    body .ui-button.ui-button-danger.ui-state-focus {
-      background-color: #d43f3a; }
-    body .ui-button.ui-button-danger.ui-state-active {
-      background-color: #c9302c; }
   body .ui-button.raised-btn {
     -moz-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
     -webkit-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);

diff --git a/showcase/demo/button/buttondemo.html b/showcase/demo/button/buttondemo.html
@@ -16,6 +16,20 @@
 
     <button pButton type="text" (click)="count()" icon="fa-check" [disabled]="true" label="Disabled"></button>
 
+    <h3>Severity Buttons</h3>
+
+    <button pButton type="text" (click)="count()" label="Primary"></button>
+
+    <button pButton type="text" (click)="count()" label="Secondary" class="ui-button-secondary"></button>
+
+    <button pButton type="text" (click)="count()" label="Success" class="ui-button-success"></button>
+
+    <button pButton type="text" (click)="count()" label="Info"  class="ui-button-info"></button>
+
+    <button pButton type="text" (click)="count()" label="Warning"  class="ui-button-warning"></button>
+
+    <button pButton type="text" (click)="count()" label="Danger"  class="ui-button-danger"></button>
+
     <br /><br />
     Number of clicks: {{clicks}}
 </div>