From f5b8c4ccb90b1d0f53a52310125981daed81eaed Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Sat, 9 May 2020 17:26:33 +0300 Subject: [PATCH] Fixed #309 - Top and Bottom icon positioning for button --- public/themes/luna-amber/theme.css | 6 ++++++ public/themes/luna-green/theme.css | 6 ++++++ public/themes/luna-pink/theme.css | 6 ++++++ public/themes/nova-colored/theme.css | 6 ++++++ public/themes/nova-dark/theme.css | 6 ++++++ public/themes/nova-light/theme.css | 6 ++++++ public/themes/nova-vue/theme.css | 6 ++++++ public/themes/rhea/theme.css | 6 ++++++ public/themes/saga-blue/theme.css | 6 ++++++ public/themes/saga-cyan/theme.css | 6 ++++++ public/themes/saga-deeppurple/theme.css | 6 ++++++ public/themes/saga-green/theme.css | 6 ++++++ public/themes/saga-indigo/theme.css | 6 ++++++ public/themes/saga-orange/theme.css | 6 ++++++ public/themes/saga-purple/theme.css | 6 ++++++ public/themes/saga-teal/theme.css | 6 ++++++ public/themes/vela-blue/theme.css | 6 ++++++ public/themes/vela-cyan/theme.css | 6 ++++++ public/themes/vela-deeppurple/theme.css | 6 ++++++ public/themes/vela-green/theme.css | 6 ++++++ public/themes/vela-indigo/theme.css | 6 ++++++ public/themes/vela-orange/theme.css | 6 ++++++ public/themes/vela-purple/theme.css | 6 ++++++ public/themes/vela-teal/theme.css | 6 ++++++ src/components/button/Button.css | 8 ++++++++ src/components/button/Button.vue | 5 ++++- src/views/button/ButtonDemo.vue | 8 ++++++-- src/views/button/ButtonDoc.vue | 14 +++++++++----- 28 files changed, 171 insertions(+), 8 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index daeea6503..df172ac7f 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 8b7d1cef3..795fbd479 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 1ba5ee72d..e95fe452c 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css index 754f13b53..3756374ad 100644 --- a/public/themes/nova-colored/theme.css +++ b/public/themes/nova-colored/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css index c0e07060a..ff9d290eb 100644 --- a/public/themes/nova-dark/theme.css +++ b/public/themes/nova-dark/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css index 569a6d3fb..897147a88 100644 --- a/public/themes/nova-light/theme.css +++ b/public/themes/nova-light/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index a464a4279..4a49cddb5 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 37da18131..c15047ed6 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 263bba4d1..1053bceb5 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css index 340eab4df..309d666a5 100644 --- a/public/themes/saga-cyan/theme.css +++ b/public/themes/saga-cyan/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css index fdd4fb108..6e85e7037 100644 --- a/public/themes/saga-deeppurple/theme.css +++ b/public/themes/saga-deeppurple/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index ca500565c..663785d70 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css index 0d6abc7b7..208a430b3 100644 --- a/public/themes/saga-indigo/theme.css +++ b/public/themes/saga-indigo/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 971ba4ddf..c0df4643b 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 96ba5a2f0..a89e9ccf1 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css index e017e3ab5..26beb72a7 100644 --- a/public/themes/saga-teal/theme.css +++ b/public/themes/saga-teal/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 5cad20141..3ac6c6bf1 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css index 683ab5515..394e5f86e 100644 --- a/public/themes/vela-cyan/theme.css +++ b/public/themes/vela-cyan/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css index 9df58ff24..eeba6c582 100644 --- a/public/themes/vela-deeppurple/theme.css +++ b/public/themes/vela-deeppurple/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 50ed122da..4fffe9efc 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css index b337d2c19..18a0f61e4 100644 --- a/public/themes/vela-indigo/theme.css +++ b/public/themes/vela-indigo/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index a576b4cb7..ff5d28ebb 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index ce547b583..243c1421b 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css index 86706ce3b..dd7ba26b0 100644 --- a/public/themes/vela-teal/theme.css +++ b/public/themes/vela-teal/theme.css @@ -1056,6 +1056,12 @@ .p-button .p-button-icon-right { margin-left: 0.5rem; } +.p-button .p-button-icon-bottom { + margin-top: 0.5rem; +} +.p-button .p-button-icon-top { + margin-bottom: 0.5rem; +} .p-button .p-badge { margin-left: 0.5rem; } diff --git a/src/components/button/Button.css b/src/components/button/Button.css index 0e09c8477..25057f1e3 100755 --- a/src/components/button/Button.css +++ b/src/components/button/Button.css @@ -29,6 +29,14 @@ flex: 0 0 auto; } +.p-button-vertical { + flex-direction: column; +} + +.p-button-icon-bottom { + order: 2; +} + .p-buttonset .p-button { margin: 0; } diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue index 817b4f5d5..b935e9d33 100755 --- a/src/components/button/Button.vue +++ b/src/components/button/Button.vue @@ -32,6 +32,7 @@ export default { return { 'p-button p-component': true, 'p-button-icon-only': this.icon && !this.label, + 'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label, 'p-disabled': this.disabled } }, @@ -41,7 +42,9 @@ export default { 'p-button-icon', { 'p-button-icon-left': this.iconPos === 'left' && this.label, - 'p-button-icon-right': this.iconPos === 'right' && this.label + 'p-button-icon-right': this.iconPos === 'right' && this.label, + 'p-button-icon-top': this.iconPos === 'top' && this.label, + 'p-button-icon-bottom': this.iconPos === 'bottom' && this.label } ] } diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue index ee7279288..e3d0b812f 100755 --- a/src/views/button/ButtonDemo.vue +++ b/src/views/button/ButtonDemo.vue @@ -10,10 +10,14 @@

Basic