From 4ba09bc5cf9dd0926c72426169b55601caf254dd Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Fri, 8 May 2020 23:56:59 +0300 Subject: [PATCH] Fixed #306 - Add link button --- public/themes/luna-amber/theme.css | 22 +++++++++++++++++++++ public/themes/luna-green/theme.css | 22 +++++++++++++++++++++ public/themes/luna-pink/theme.css | 22 +++++++++++++++++++++ public/themes/nova-colored/theme.css | 22 +++++++++++++++++++++ public/themes/nova-dark/theme.css | 22 +++++++++++++++++++++ public/themes/nova-light/theme.css | 22 +++++++++++++++++++++ public/themes/nova-vue/theme.css | 22 +++++++++++++++++++++ public/themes/rhea/theme.css | 22 +++++++++++++++++++++ public/themes/saga-blue/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-cyan/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-deeppurple/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-green/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-indigo/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-orange/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-purple/theme.css | 26 +++++++++++++++++++++++-- public/themes/saga-teal/theme.css | 26 +++++++++++++++++++++++-- public/themes/vela-blue/theme.css | 22 +++++++++++++++++++++ public/themes/vela-cyan/theme.css | 22 +++++++++++++++++++++ public/themes/vela-deeppurple/theme.css | 22 +++++++++++++++++++++ public/themes/vela-green/theme.css | 22 +++++++++++++++++++++ public/themes/vela-indigo/theme.css | 22 +++++++++++++++++++++ public/themes/vela-orange/theme.css | 22 +++++++++++++++++++++ public/themes/vela-purple/theme.css | 22 +++++++++++++++++++++ public/themes/vela-teal/theme.css | 22 +++++++++++++++++++++ src/views/button/ButtonDemo.vue | 1 + src/views/button/ButtonDoc.vue | 9 ++++++++- 26 files changed, 553 insertions(+), 17 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 983fec4d3..772421a20 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #FFB300; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #FFB300; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #ffe8b3; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #FFB300; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #FFB300; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index d7861eb5a..35bfed36c 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #1ea04c; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #1ea04c; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #88e9aa; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #1ea04c; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #1ea04c; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index d0f8118a5..f528675a2 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #cc285c; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #cc285c; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #f1b6c8; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #cc285c; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #cc285c; diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css index a2ea2e9b3..bd5cfd878 100644 --- a/public/themes/nova-colored/theme.css +++ b/public/themes/nova-colored/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #005b9f; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #005b9f; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #8dcdff; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #005b9f; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css index 239ef451d..9676ee261 100644 --- a/public/themes/nova-dark/theme.css +++ b/public/themes/nova-dark/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #005b9f; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #005b9f; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #8dcdff; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #005b9f; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css index 2e1d65007..2c09812b6 100644 --- a/public/themes/nova-light/theme.css +++ b/public/themes/nova-light/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #005b9f; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #005b9f; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #8dcdff; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #005b9f; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index a6bcd6925..4c63928cd 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -1224,6 +1224,28 @@ border-color: #a90000; } +.p-button.p-button-link { + color: #246749; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #246749; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #c2e9d8; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #246749; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index d988134b3..41e5f6b9b 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1224,6 +1224,28 @@ border-color: #B73737; } +.p-button.p-button-link { + color: #617c8a; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #617c8a; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #e4e9ec; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #617c8a; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #7B95A3; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 1c7d46d5a..b9679dde3 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #2196F3; + color: #1976D2; background: #ffffff; border: 1px solid #2196F3; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #1E88E5; + color: #1976D2; border-color: #1E88E5; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #1976D2; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #1976D2; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #BBDEFB; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #1976D2; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css index a2aa528ab..b0341c550 100644 --- a/public/themes/saga-cyan/theme.css +++ b/public/themes/saga-cyan/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #00ACC1; + color: #00838F; background: #ffffff; border: 1px solid #00ACC1; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #0097A7; + color: #00838F; border-color: #0097A7; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #00838F; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #00838F; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #B2EBF2; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #00838F; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css index 55e8179c6..8e4513f86 100644 --- a/public/themes/saga-deeppurple/theme.css +++ b/public/themes/saga-deeppurple/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #673AB7; + color: #512DA8; background: #ffffff; border: 1px solid #673AB7; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #5E35B1; + color: #512DA8; border-color: #5E35B1; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #512DA8; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #512DA8; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #D1C4E9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #512DA8; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 472bb712e..ea0b7b752 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #4CAF50; + color: #388E3C; background: #ffffff; border: 1px solid #4CAF50; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #43A047; + color: #388E3C; border-color: #43A047; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #388E3C; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #388E3C; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #C8E6C9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #388E3C; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css index f0407cb45..38977f0c0 100644 --- a/public/themes/saga-indigo/theme.css +++ b/public/themes/saga-indigo/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #3F51B5; + color: #303F9F; background: #ffffff; border: 1px solid #3F51B5; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #3949AB; + color: #303F9F; border-color: #3949AB; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #303F9F; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #303F9F; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #C5CAE9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #303F9F; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 33ac0a927..b550a2fa5 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #FFC107; + color: #FFA000; background: #ffffff; border: 1px solid #FFC107; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #FFB300; + color: #FFA000; border-color: #FFB300; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #FFA000; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #FFA000; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #FFECB3; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #FFA000; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index a3d8c4c4c..cbbeb64ec 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #9C27B0; + color: #7B1FA2; background: #ffffff; border: 1px solid #9C27B0; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #8E24AA; + color: #7B1FA2; border-color: #8E24AA; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #7B1FA2; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #7B1FA2; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #E1BEE7; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #7B1FA2; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css index 22401faf2..903819138 100644 --- a/public/themes/saga-teal/theme.css +++ b/public/themes/saga-teal/theme.css @@ -1130,13 +1130,13 @@ } .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button { - color: #009688; + color: #00796B; background: #ffffff; border: 1px solid #009688; } .p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover { background: #e9ecef; - color: #00897B; + color: #00796B; border-color: #00897B; } .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus { @@ -1224,6 +1224,28 @@ border-color: #B71C1C; } +.p-button.p-button-link { + color: #00796B; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #00796B; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #B2DFDB; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #00796B; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 8129918da..e32bda37b 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #64B5F6; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #64B5F6; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #BBDEFB; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #64B5F6; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css index 21a478b5b..52bed1c15 100644 --- a/public/themes/vela-cyan/theme.css +++ b/public/themes/vela-cyan/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #4DD0E1; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #4DD0E1; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #B2EBF2; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #4DD0E1; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css index 4f548adf2..678ecff6a 100644 --- a/public/themes/vela-deeppurple/theme.css +++ b/public/themes/vela-deeppurple/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #9575CD; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #9575CD; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #D1C4E9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #9575CD; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 41628ad00..105394872 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #81C784; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #81C784; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #C8E6C9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #81C784; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css index dd794c34d..df3b96110 100644 --- a/public/themes/vela-indigo/theme.css +++ b/public/themes/vela-indigo/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #7986CB; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #7986CB; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #C5CAE9; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #7986CB; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index ede670b40..ccf466795 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #FFD54F; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #FFD54F; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #FFECB3; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #FFD54F; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 8b0571c5a..7815b7a30 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #BA68C8; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #BA68C8; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #E1BEE7; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #BA68C8; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css index 41fa6d319..5e4a3485d 100644 --- a/public/themes/vela-teal/theme.css +++ b/public/themes/vela-teal/theme.css @@ -1224,6 +1224,28 @@ border-color: #F44336; } +.p-button.p-button-link { + color: #4DB6AC; + background: transparent; + border: transparent; +} +.p-button.p-button-link:enabled:hover { + background: transparent; + color: #4DB6AC; + border-color: transparent; +} +.p-button.p-button-link:enabled:hover .p-button-text { + text-decoration: underline; +} +.p-button.p-button-link:enabled:focus { + box-shadow: 0 0 0 0.2em #B2DFDB; +} +.p-button.p-button-link:enabled:active { + background: transparent; + color: #4DB6AC; + border-color: transparent; +} + .p-carousel .p-carousel-content .p-carousel-prev, .p-carousel .p-carousel-content .p-carousel-next { background: #ffffff; diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue index ac5763645..f4b19e9d6 100755 --- a/src/views/button/ButtonDemo.vue +++ b/src/views/button/ButtonDemo.vue @@ -22,6 +22,7 @@