Fixed #602

primefaces · Nov 5, 2018 · 1640b69 · 1640b69
1 parent 74b42b7
commit 1640b69
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 154 deletions.
diff --git a/public/resources/themes/luna-amber/theme.css b/public/resources/themes/luna-amber/theme.css
@@ -934,10 +934,10 @@ body .p-button {
   background-color: #FFB300;
   border: 1px solid #FFB300;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
@@ -948,7 +948,9 @@ body .p-button {
   body .p-button:enabled:focus {
     outline: 0 none;
     outline-offset: 0px;
-    background-color: #ffbb1a; }
+    -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
+    -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
+    box-shadow: 0 0 0 0.2em #ffe8b3; }
   body .p-button:enabled:active {
     background-color: #FF8F00;
     color: #212121;
@@ -977,10 +979,10 @@ body .p-togglebutton {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s; }
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-togglebutton .p-button-icon-left {
     color: #888888; }
   body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
@@ -1018,10 +1020,10 @@ body .p-selectbutton .p-button {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0; }
@@ -1101,7 +1103,9 @@ body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-but
     color: #333333;
     border-color: #c8c8c8; }
   body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-    background-color: white; }
+    -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
+    -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
+    box-shadow: 0 0 0 0.2em #ffe8b3; }
   body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
     background-color: #a0a0a0;
     color: #333333;
@@ -1115,7 +1119,9 @@ body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
     color: #ffffff;
     border-color: #116fbf; }
   body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-    background-color: #0088f3; }
+    -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+    -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+    box-shadow: 0 0 0 0.2em #8dcdff; }
   body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
     background-color: #005b9f;
     color: #ffffff;
@@ -1129,7 +1135,9 @@ body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button
     color: #ffffff;
     border-color: #107D11; }
   body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-    background-color: #3abb3b; }
+    -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
+    -moz-box-shadow: 0 0 0 0.2em #aae5aa;
+    box-shadow: 0 0 0 0.2em #aae5aa; }
   body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
     background-color: #0C6B0D;
     color: #ffffff;
@@ -1143,7 +1151,9 @@ body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button
     color: #333333;
     border-color: #ED990B; }
   body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-    background-color: #ffc834; }
+    -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
+    -moz-box-shadow: 0 0 0 0.2em #ffeab4;
+    box-shadow: 0 0 0 0.2em #ffeab4; }
   body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
     background-color: #D38B10;
     color: #333333;
@@ -1157,7 +1167,9 @@ body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
     color: #ffffff;
     border-color: #c01120; }
   body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-    background-color: #f25663; }
+    -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
+    -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
+    box-shadow: 0 0 0 0.2em #f9b4ba; }
   body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
     background-color: #a90000;
     color: #ffffff;
@@ -1733,10 +1745,10 @@ body .fc .fc-toolbar .ui-button {
   background-color: #FFB300;
   border: 1px solid #FFB300;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }

diff --git a/public/resources/themes/luna-blue/theme.css b/public/resources/themes/luna-blue/theme.css
@@ -934,10 +934,10 @@ body .p-button {
   background-color: #1f7ed0;
   border: 1px solid #1f7ed0;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
@@ -948,7 +948,9 @@ body .p-button {
   body .p-button:enabled:focus {
     outline: 0 none;
     outline-offset: 0px;
-    background-color: #298bdf; }
+    -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
+    -moz-box-shadow: 0 0 0 0.2em #aed3f3;
+    box-shadow: 0 0 0 0.2em #aed3f3; }
   body .p-button:enabled:active {
     background-color: #1864a6;
     color: #ffffff;
@@ -977,10 +979,10 @@ body .p-togglebutton {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s; }
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-togglebutton .p-button-icon-left {
     color: #888888; }
   body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
@@ -1018,10 +1020,10 @@ body .p-selectbutton .p-button {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0; }
@@ -1101,7 +1103,9 @@ body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-but
     color: #333333;
     border-color: #c8c8c8; }
   body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-    background-color: white; }
+    -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
+    -moz-box-shadow: 0 0 0 0.2em #aed3f3;
+    box-shadow: 0 0 0 0.2em #aed3f3; }
   body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
     background-color: #a0a0a0;
     color: #333333;
@@ -1115,7 +1119,9 @@ body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
     color: #ffffff;
     border-color: #116fbf; }
   body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-    background-color: #0088f3; }
+    -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+    -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+    box-shadow: 0 0 0 0.2em #8dcdff; }
   body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
     background-color: #005b9f;
     color: #ffffff;
@@ -1129,7 +1135,9 @@ body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button
     color: #ffffff;
     border-color: #107D11; }
   body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-    background-color: #3abb3b; }
+    -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
+    -moz-box-shadow: 0 0 0 0.2em #aae5aa;
+    box-shadow: 0 0 0 0.2em #aae5aa; }
   body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
     background-color: #0C6B0D;
     color: #ffffff;
@@ -1143,7 +1151,9 @@ body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button
     color: #333333;
     border-color: #ED990B; }
   body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-    background-color: #ffc834; }
+    -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
+    -moz-box-shadow: 0 0 0 0.2em #ffeab4;
+    box-shadow: 0 0 0 0.2em #ffeab4; }
   body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
     background-color: #D38B10;
     color: #333333;
@@ -1157,7 +1167,9 @@ body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
     color: #ffffff;
     border-color: #c01120; }
   body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-    background-color: #f25663; }
+    -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
+    -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
+    box-shadow: 0 0 0 0.2em #f9b4ba; }
   body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
     background-color: #a90000;
     color: #ffffff;
@@ -1733,10 +1745,10 @@ body .fc .fc-toolbar .ui-button {
   background-color: #1f7ed0;
   border: 1px solid #1f7ed0;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }

diff --git a/public/resources/themes/luna-green/theme.css b/public/resources/themes/luna-green/theme.css
@@ -934,10 +934,10 @@ body .p-button {
   background-color: #1ea04c;
   border: 1px solid #1ea04c;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
@@ -948,7 +948,9 @@ body .p-button {
   body .p-button:enabled:focus {
     outline: 0 none;
     outline-offset: 0px;
-    background-color: #22b556; }
+    -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
+    -moz-box-shadow: 0 0 0 0.2em #88e9aa;
+    box-shadow: 0 0 0 0.2em #88e9aa; }
   body .p-button:enabled:active {
     background-color: #18803c;
     color: #ffffff;
@@ -977,10 +979,10 @@ body .p-togglebutton {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s; }
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s; }
   body .p-togglebutton .p-button-icon-left {
     color: #888888; }
   body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
@@ -1018,10 +1020,10 @@ body .p-selectbutton .p-button {
   background-color: #252525;
   border: 1px solid #252525;
   color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0; }
@@ -1101,7 +1103,9 @@ body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-but
     color: #333333;
     border-color: #c8c8c8; }
   body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-    background-color: white; }
+    -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
+    -moz-box-shadow: 0 0 0 0.2em #88e9aa;
+    box-shadow: 0 0 0 0.2em #88e9aa; }
   body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
     background-color: #a0a0a0;
     color: #333333;
@@ -1115,7 +1119,9 @@ body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
     color: #ffffff;
     border-color: #116fbf; }
   body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-    background-color: #0088f3; }
+    -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+    -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+    box-shadow: 0 0 0 0.2em #8dcdff; }
   body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
     background-color: #005b9f;
     color: #ffffff;
@@ -1129,7 +1135,9 @@ body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button
     color: #ffffff;
     border-color: #107D11; }
   body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-    background-color: #3abb3b; }
+    -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
+    -moz-box-shadow: 0 0 0 0.2em #aae5aa;
+    box-shadow: 0 0 0 0.2em #aae5aa; }
   body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
     background-color: #0C6B0D;
     color: #ffffff;
@@ -1143,7 +1151,9 @@ body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button
     color: #333333;
     border-color: #ED990B; }
   body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-    background-color: #ffc834; }
+    -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
+    -moz-box-shadow: 0 0 0 0.2em #ffeab4;
+    box-shadow: 0 0 0 0.2em #ffeab4; }
   body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
     background-color: #D38B10;
     color: #333333;
@@ -1157,7 +1167,9 @@ body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
     color: #ffffff;
     border-color: #c01120; }
   body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-    background-color: #f25663; }
+    -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
+    -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
+    box-shadow: 0 0 0 0.2em #f9b4ba; }
   body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
     background-color: #a90000;
     color: #ffffff;
@@ -1733,10 +1745,10 @@ body .fc .fc-toolbar .ui-button {
   background-color: #1ea04c;
   border: 1px solid #1ea04c;
   font-size: 14px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }