Add p-button-plain add-on for text button
parent
783883dc33
commit
3bb551eb1e
|
@ -1261,6 +1261,17 @@
|
|||
color: #64B5F6;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #81C784;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #FFD54F;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #BA68C8;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #8dd0ff;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #c298d8;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #007bff;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #883cae;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #FFE082;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #4c4c4c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #3c3c3c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #81D4FA;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #4c4c4c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #3c3c3c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #C5E1A5;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #4c4c4c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #3c3c3c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #F48FB1;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #4c4c4c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #3c3c3c;
|
||||
color: #888888;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #CE93D8;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #9FA8DA;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #673AB7;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #3F51B5;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #673AB7;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #3F51B5;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #673AB7;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1273,6 +1273,17 @@
|
|||
color: #3F51B5;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1249,6 +1249,17 @@
|
|||
color: #007ad9;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #eaeaea;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #d2d2d2;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #007ad9;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #eaeaea;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #d2d2d2;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #41b883;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #eaeaea;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #d2d2d2;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #007ad9;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #eaeaea;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #d2d2d2;
|
||||
color: #848484;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1249,6 +1249,17 @@
|
|||
color: #7B95A3;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #f4f4f4;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dbdbdb;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #2196F3;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #4CAF50;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #FFC107;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #9C27B0;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: #e9ecef;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: #dee2e6;
|
||||
color: #6c757d;
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #64B5F6;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #81C784;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #FFD54F;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -1261,6 +1261,17 @@
|
|||
color: #BA68C8;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button.p-button-text.p-button-plain:enabled:active {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
|
|
|
@ -54,6 +54,7 @@
|
|||
<Button label="Warning" class="p-button-warning p-button-text" />
|
||||
<Button label="Help" class="p-button-help p-button-text" />
|
||||
<Button label="Danger" class="p-button-danger p-button-text" />
|
||||
<Button label="Plain" class="p-button-text p-button-plain" />
|
||||
|
||||
<h5>Raised Text Buttons</h5>
|
||||
<Button label="Primary" class="p-button-raised p-button-text" />
|
||||
|
@ -63,6 +64,7 @@
|
|||
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
|
||||
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
|
||||
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
|
||||
|
||||
<h5>Outlined Buttons</h5>
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
|
@ -74,13 +76,13 @@
|
|||
<Button label="Danger" class="p-button-outlined p-button-danger" />
|
||||
|
||||
<h5>Rounded Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
|
||||
<Button icon="pi pi-check" class="p-button-rounded" />
|
||||
|
||||
<h5>Rounded Text Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
|
||||
|
@ -90,6 +92,7 @@
|
|||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
|
||||
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
|
||||
|
||||
<h5>Rounded and Outlined Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
|
||||
|
|
|
@ -29,15 +29,6 @@ import Button from 'primevue/button';
|
|||
<p>Events are defined with the standard notation.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Submit" @click="handleClick($event)"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Text Buttons</h5>
|
||||
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Submit" class="p-button-text" />
|
||||
<Button icon="pi pi-check" class="p-button-text" />
|
||||
<Button label="Cancel" icon="pi pi-times" class="p-button-text" />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Severity</h5>
|
||||
|
@ -60,6 +51,16 @@ import Button from 'primevue/button';
|
|||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Warning" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Text Buttons</h5>
|
||||
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
|
||||
text buttons ignore severity levels and displayed as a regular text.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Submit" class="p-button-text" />
|
||||
<Button icon="pi pi-check" class="p-button-text" />
|
||||
<Button label="Cancel" icon="pi pi-times" class="p-button-text" />
|
||||
<Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Raised and Rounded Buttons</h5>
|
||||
|
@ -207,114 +208,117 @@ import Button from 'primevue/button';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h5>Basic</h5>
|
||||
<Button label="Submit" />
|
||||
<Button label="Submit" disabled="disabled" />
|
||||
<Button label="Link" class="p-button-link" />
|
||||
>h5<Basic>/h5<
|
||||
>Button label="Submit" /<
|
||||
>Button label="Disabled" disabled="disabled" /<
|
||||
>Button label="Link" class="p-button-link" /<
|
||||
|
||||
<h5>Icons</h5>
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Submit" icon="pi pi-check" />
|
||||
<Button label="Submit" icon="pi pi-check" iconPos="right" />
|
||||
>h5<Icons>/h5<
|
||||
>Button icon="pi pi-check" /<
|
||||
>Button label="Submit" icon="pi pi-check" /<
|
||||
>Button label="Submit" icon="pi pi-check" iconPos="right" /<
|
||||
|
||||
<h5>Severities</h5>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Help" class="p-button-help" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
>h5<Severities>/h5<
|
||||
>Button label="Primary" /<
|
||||
>Button label="Secondary" class="p-button-secondary" /<
|
||||
>Button label="Success" class="p-button-success" /<
|
||||
>Button label="Info" class="p-button-info" /<
|
||||
>Button label="Warning" class="p-button-warning" /<
|
||||
>Button label="Help" class="p-button-help" /<
|
||||
>Button label="Danger" class="p-button-danger" /<
|
||||
|
||||
<h5>Raised Buttons</h5>
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Help" class="p-button-raised p-button-help" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
>h5<Raised Buttons>/h5<
|
||||
>Button label="Primary" class="p-button-raised" /<
|
||||
>Button label="Secondary" class="p-button-raised p-button-secondary" /<
|
||||
>Button label="Success" class="p-button-raised p-button-success" /<
|
||||
>Button label="Info" class="p-button-raised p-button-info" /<
|
||||
>Button label="Warning" class="p-button-raised p-button-warning" /<
|
||||
>Button label="Help" class="p-button-raised p-button-help" /<
|
||||
>Button label="Danger" class="p-button-raised p-button-danger" /<
|
||||
|
||||
<h5>Rounded Buttons</h5>
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Help" class="p-button-rounded p-button-help" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
>h5<Rounded Buttons>/h5<
|
||||
>Button label="Primary" class="p-button-rounded" /<
|
||||
>Button label="Secondary" class="p-button-rounded p-button-secondary" /<
|
||||
>Button label="Success" class="p-button-rounded p-button-success" /<
|
||||
>Button label="Info" class="p-button-rounded p-button-info" /<
|
||||
>Button label="Warning" class="p-button-rounded p-button-warning" /<
|
||||
>Button label="Help" class="p-button-rounded p-button-help" /<
|
||||
>Button label="Danger" class="p-button-rounded p-button-danger" /<
|
||||
|
||||
<h5>Text Buttons</h5>
|
||||
<Button label="Primary" class="p-button-text" />
|
||||
<Button label="Secondary" class="p-button-secondary p-button-text" />
|
||||
<Button label="Success" class="p-button-success p-button-text" />
|
||||
<Button label="Info" class="p-button-info p-button-text" />
|
||||
<Button label="Warning" class="p-button-warning p-button-text" />
|
||||
<Button label="Help" class="p-button-help p-button-text" />
|
||||
<Button label="Danger" class="p-button-danger p-button-text" />
|
||||
>h5<Text Buttons>/h5<
|
||||
>Button label="Primary" class="p-button-text" /<
|
||||
>Button label="Secondary" class="p-button-secondary p-button-text" /<
|
||||
>Button label="Success" class="p-button-success p-button-text" /<
|
||||
>Button label="Info" class="p-button-info p-button-text" /<
|
||||
>Button label="Warning" class="p-button-warning p-button-text" /<
|
||||
>Button label="Help" class="p-button-help p-button-text" /<
|
||||
>Button label="Danger" class="p-button-danger p-button-text" /<
|
||||
>Button label="Plain" class="p-button-text p-button-plain" /<
|
||||
|
||||
<h5>Raised Text Buttons</h5>
|
||||
<Button label="Primary" class="p-button-raised p-button-text" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
|
||||
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
|
||||
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
|
||||
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
|
||||
>h5<Raised Text Buttons>/h5<
|
||||
>Button label="Primary" class="p-button-raised p-button-text" /<
|
||||
>Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /<
|
||||
>Button label="Success" class="p-button-raised p-button-success p-button-text" /<
|
||||
>Button label="Info" class="p-button-raised p-button-info p-button-text" /<
|
||||
>Button label="Warning" class="p-button-raised p-button-warning p-button-text" /<
|
||||
>Button label="Help" class="p-button-raised p-button-help p-button-text" /<
|
||||
>Button label="Danger" class="p-button-raised p-button-danger p-button-text" /<
|
||||
>Button label="Plain" class="p-button-raised p-button-text p-button-plain" /<
|
||||
|
||||
<h5>Outlined Buttons</h5>
|
||||
<Button label="Primary" class="p-button-outlined" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger" />
|
||||
>h5<Outlined Buttons>/h5<
|
||||
>Button label="Primary" class="p-button-outlined" /<
|
||||
>Button label="Secondary" class="p-button-outlined p-button-secondary" /<
|
||||
>Button label="Success" class="p-button-outlined p-button-success" /<
|
||||
>Button label="Info" class="p-button-outlined p-button-info" /<
|
||||
>Button label="Warning" class="p-button-outlined p-button-warning" /<
|
||||
>Button label="Help" class="p-button-outlined p-button-help" /<
|
||||
>Button label="Danger" class="p-button-outlined p-button-danger" /<
|
||||
|
||||
<h5>Rounded Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
|
||||
>h5<Rounded Icon Buttons>/h5<
|
||||
>Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /<
|
||||
>Button icon="pi pi-search" class="p-button-rounded p-button-success" /<
|
||||
>Button icon="pi pi-user" class="p-button-rounded p-button-info" /<
|
||||
>Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /<
|
||||
>Button icon="pi pi-heart" class="p-button-rounded p-button-help" /<
|
||||
>Button icon="pi pi-times" class="p-button-rounded p-button-danger" /<
|
||||
>Button icon="pi pi-check" class="p-button-rounded" /<
|
||||
|
||||
<h5>Rounded Text Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
|
||||
>h5<Rounded Text Icon Buttons>/h5<
|
||||
>Button icon="pi pi-check" class="p-button-rounded p-button-text" /<
|
||||
>Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /<
|
||||
>Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /<
|
||||
>Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /<
|
||||
>Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /<
|
||||
>Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /<
|
||||
>Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /<
|
||||
>Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" /<
|
||||
|
||||
<h5>Rounded and Outlined Icon Buttons</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
|
||||
>h5<Rounded and Outlined Icon Buttons>/h5<
|
||||
>Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /<
|
||||
>Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /<
|
||||
>Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /<
|
||||
>Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /<
|
||||
>Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /<
|
||||
>Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /<
|
||||
>Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /<
|
||||
|
||||
<h5>Badges</h5>
|
||||
<Button type="button" label="Emails" badge="8" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||
>h5<Badges>/h5<
|
||||
>Button type="button" label="Emails" badge="8" /<
|
||||
>Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /<
|
||||
|
||||
<h5>Button Set</h5>
|
||||
<span class="p-buttonset">
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
<Button label="Delete" icon="pi pi-trash" />
|
||||
<Button label="Cancel" icon="pi pi-times" />
|
||||
</span>
|
||||
>h5<Button Set>/h5<
|
||||
>span class="p-buttonset"<
|
||||
>Button label="Save" icon="pi pi-check" /<
|
||||
>Button label="Delete" icon="pi pi-trash" /<
|
||||
>Button label="Cancel" icon="pi pi-times" /<
|
||||
>/span<
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div class="sizes">
|
||||
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
|
||||
<Button label="Normal" icon="pi pi-check" class="p-button" />
|
||||
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
|
||||
</div>
|
||||
>h5<Sizes>/h5<
|
||||
>div class="sizes"<
|
||||
>Button label="Small" icon="pi pi-check" class="p-button-sm" /<
|
||||
>Button label="Normal" icon="pi pi-check" class="p-button" /<
|
||||
>Button label="Large" icon="pi pi-check" class="p-button-lg" /<
|
||||
>/div<
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
Loading…
Reference in New Issue