From 5148237374ce72e4e4199748c222afe0650bc18b Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 28 Nov 2020 16:59:11 +0300 Subject: [PATCH] Implemented Divider Component, Fixes #690 --- exports/divider.d.ts | 1 + exports/divider.js | 2 + public/themes/arya-blue/theme.css | 24 ++ public/themes/arya-green/theme.css | 24 ++ public/themes/arya-orange/theme.css | 24 ++ public/themes/arya-purple/theme.css | 24 ++ public/themes/bootstrap4-dark-blue/theme.css | 24 ++ .../themes/bootstrap4-dark-purple/theme.css | 24 ++ public/themes/bootstrap4-light-blue/theme.css | 24 ++ .../themes/bootstrap4-light-purple/theme.css | 24 ++ public/themes/fluent-light/theme.css | 24 ++ public/themes/luna-amber/theme.css | 24 ++ public/themes/luna-blue/theme.css | 24 ++ public/themes/luna-green/theme.css | 24 ++ public/themes/luna-pink/theme.css | 24 ++ public/themes/md-dark-deeppurple/theme.css | 24 ++ public/themes/md-dark-indigo/theme.css | 24 ++ public/themes/md-light-deeppurple/theme.css | 24 ++ public/themes/md-light-indigo/theme.css | 24 ++ public/themes/mdc-dark-deeppurple/theme.css | 24 ++ public/themes/mdc-dark-indigo/theme.css | 24 ++ public/themes/mdc-light-deeppurple/theme.css | 24 ++ public/themes/mdc-light-indigo/theme.css | 24 ++ public/themes/nova-accent/theme.css | 24 ++ public/themes/nova-alt/theme.css | 24 ++ public/themes/nova-vue/theme.css | 24 ++ public/themes/nova/theme.css | 24 ++ public/themes/rhea/theme.css | 24 ++ public/themes/saga-blue/theme.css | 24 ++ public/themes/saga-green/theme.css | 24 ++ public/themes/saga-orange/theme.css | 24 ++ public/themes/saga-purple/theme.css | 24 ++ public/themes/vela-blue/theme.css | 24 ++ public/themes/vela-green/theme.css | 24 ++ public/themes/vela-orange/theme.css | 24 ++ public/themes/vela-purple/theme.css | 24 ++ src/AppMenu.vue | 3 +- src/assets/styles/app/_menu.scss | 4 +- src/components/divider/Divider.d.ts | 9 + src/components/divider/Divider.vue | 125 +++++++ src/main.js | 2 + src/router/index.js | 5 + src/views/divider/DividerDemo.vue | 162 +++++++++ src/views/divider/DividerDoc.vue | 326 ++++++++++++++++++ 44 files changed, 1453 insertions(+), 2 deletions(-) create mode 100644 exports/divider.d.ts create mode 100644 exports/divider.js create mode 100644 src/components/divider/Divider.d.ts create mode 100644 src/components/divider/Divider.vue create mode 100644 src/views/divider/DividerDemo.vue create mode 100644 src/views/divider/DividerDoc.vue diff --git a/exports/divider.d.ts b/exports/divider.d.ts new file mode 100644 index 000000000..5dcbccab4 --- /dev/null +++ b/exports/divider.d.ts @@ -0,0 +1 @@ +export * from './components/divider/Divider'; \ No newline at end of file diff --git a/exports/divider.js b/exports/divider.js new file mode 100644 index 000000000..7772153b4 --- /dev/null +++ b/exports/divider.js @@ -0,0 +1,2 @@ +'use strict'; +module.exports = require('./components/divider/Divider.vue'); \ No newline at end of file diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 8c524f02d..6fde86e3b 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #383838; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #383838; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index d5bcd27d7..d8a7b3ef0 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #383838; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #383838; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 59d497ff3..8a384c1e4 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #383838; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #383838; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index b42805297..baea2849c 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #383838; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #383838; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index e38ba6fb9..ec6354032 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -4408,6 +4408,30 @@ color: #151515; } +.p-divider .p-divider-content { + background-color: #2a323d; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #3f4b5b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #3f4b5b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Vendor extensions to the designer enhanced bootstrap compatibility */ .p-breadcrumb .p-breadcrumb-chevron { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 3d64f55e6..282a9d4a2 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -4408,6 +4408,30 @@ color: #151515; } +.p-divider .p-divider-content { + background-color: #2a323d; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #3f4b5b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #3f4b5b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Vendor extensions to the designer enhanced bootstrap compatibility */ .p-breadcrumb .p-breadcrumb-chevron { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 6a732af5b..5ac4d230c 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -4408,6 +4408,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Vendor extensions to the designer enhanced bootstrap compatibility */ .p-breadcrumb .p-breadcrumb-chevron { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 77c97c329..8e6777220 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -4408,6 +4408,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Vendor extensions to the designer enhanced bootstrap compatibility */ .p-breadcrumb .p-breadcrumb-chevron { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 68ccca723..378caa0a7 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -4347,6 +4347,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #edebe9; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #edebe9; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-button-label { font-weight: 600; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index f311158a1..bf82de741 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -4359,4 +4359,28 @@ color: #212529; } +.p-divider .p-divider-content { + background-color: #323232; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #4b4b4b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #4b4b4b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 757776ec2..c8ed1a28e 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -4359,4 +4359,28 @@ color: #212529; } +.p-divider .p-divider-content { + background-color: #323232; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #4b4b4b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #4b4b4b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 4513b40af..095370c62 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -4359,4 +4359,28 @@ color: #212529; } +.p-divider .p-divider-content { + background-color: #323232; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #4b4b4b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #4b4b4b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index e2fa4de93..790443978 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -4359,4 +4359,28 @@ color: #212529; } +.p-divider .p-divider-content { + background-color: #323232; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #4b4b4b; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #4b4b4b; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 685d6117f..12990e6de 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -4420,6 +4420,30 @@ color: #212121; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 7e22eef8f..9b33364ac 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -4420,6 +4420,30 @@ color: #212121; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 199c10515..ac8436aff 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -4420,6 +4420,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 4e226d854..72820aaaf 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -4420,6 +4420,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1.25rem 0; + padding: 0 1.25rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1.25rem; + padding: 1.25rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index ef36fff6b..7d244c818 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -4420,6 +4420,30 @@ color: #212121; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 96b027ef3..ddc0bd0a4 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -4420,6 +4420,30 @@ color: #212121; } +.p-divider .p-divider-content { + background-color: #1e1e1e; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(255, 255, 255, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 4c8c59147..4f6cf0126 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -4420,6 +4420,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index a51b9d8d8..e5f4a6f78 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -4420,6 +4420,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px rgba(0, 0, 0, 0.12); +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-accordion .p-accordion-tab { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index f1f9ff9f1..c824ebe53 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -4347,6 +4347,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #c8c8c8; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #c8c8c8; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-panel .p-panel-header .p-panel-header-icon { color: #ffffff; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index d3d4aa757..0baaf4d54 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -4359,6 +4359,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #c8c8c8; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #c8c8c8; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-panel .p-panel-header .p-panel-header-icon { color: #ffffff; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index e901a763f..b82b1fe2b 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -4359,6 +4359,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #c8c8c8; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #c8c8c8; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-panel .p-panel-header .p-panel-header-icon { color: #848484; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 45c09887d..a5c5aa7df 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -4359,6 +4359,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #c8c8c8; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #c8c8c8; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-panel .p-panel-header .p-panel-header-icon { color: #848484; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 2400f3263..f84c189db 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -4347,6 +4347,30 @@ color: #262222; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dadada; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dadada; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + .p-panel .p-panel-header .p-panel-header-icon { color: #ffffff; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 507541581..173bf795c 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -4396,6 +4396,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #2196F3; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 398b5f71b..ac47f5d27 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -4396,6 +4396,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #4CAF50; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 8054f25de..b5ba7ae5a 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -4396,6 +4396,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFC107; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 2d07cae1b..f1b3eeada 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -4396,6 +4396,30 @@ color: #ffffff; } +.p-divider .p-divider-content { + background-color: #ffffff; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #dee2e6; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #dee2e6; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #9C27B0; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 2a1a3aaea..53d8c5fde 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1f2d40; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #304562; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #304562; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 38e1265ac..f5457e06c 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1f2d40; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #304562; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #304562; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 6ecd568e6..cb366e786 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1f2d40; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #304562; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #304562; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 0db839907..29729f60c 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -4396,6 +4396,30 @@ color: #121212; } +.p-divider .p-divider-content { + background-color: #1f2d40; +} +.p-divider.p-divider-horizontal { + margin: 1rem 0; + padding: 0 1rem; +} +.p-divider.p-divider-horizontal:before { + border-top: 1px #304562; +} +.p-divider.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} +.p-divider.p-divider-vertical { + margin: 0 1rem; + padding: 1rem 0; +} +.p-divider.p-divider-vertical:before { + border-left: 1px #304562; +} +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + /* Customizations to the designer theme should be defined here */ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 2987d580f..fadc44ba4 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -12,6 +12,7 @@ Source Code Support Store + Accessibility
Theming
@@ -247,9 +248,9 @@
Misc
- Accessibility Badge BlockUI + Divider New Inplace ProgressBar ProgressSpinner diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss index 891cffc34..55a94b796 100644 --- a/src/assets/styles/app/_menu.scss +++ b/src/assets/styles/app/_menu.scss @@ -35,7 +35,8 @@ a { color: var(--text-color); - display: block; + display: flex; + align-items: center; padding: .5rem; border-radius: 3px; cursor: pointer; @@ -58,6 +59,7 @@ .p-tag { padding-top:.125rem; padding-bottom: .125rem; + margin-left: .5rem; } } diff --git a/src/components/divider/Divider.d.ts b/src/components/divider/Divider.d.ts new file mode 100644 index 000000000..1136d0d88 --- /dev/null +++ b/src/components/divider/Divider.d.ts @@ -0,0 +1,9 @@ +import Vue from 'vue'; + +declare class Divider extends Vue { + align?: string; + layout?: string; + type?: string; +} + +export default Divider; \ No newline at end of file diff --git a/src/components/divider/Divider.vue b/src/components/divider/Divider.vue new file mode 100644 index 000000000..83f6c215b --- /dev/null +++ b/src/components/divider/Divider.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/src/main.js b/src/main.js index cf59b68c2..eb93da322 100644 --- a/src/main.js +++ b/src/main.js @@ -26,6 +26,7 @@ import DataView from './components/dataview/DataView'; import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLayoutOptions'; import DeferredContent from './components/deferredcontent/DeferredContent'; import Dialog from './components/dialog/Dialog'; +import Divider from './components/divider/Divider'; import Dropdown from './components/dropdown/Dropdown'; import Editor from './components/editor/Editor'; import Fieldset from './components/fieldset/Fieldset'; @@ -132,6 +133,7 @@ app.component('DataView', DataView); app.component('DataViewLayoutOptions', DataViewLayoutOptions); app.component('DeferredContent', DeferredContent); app.component('Dialog', Dialog); +app.component('Divider', Divider); app.component('Dropdown', Dropdown); app.component('Editor', Editor); app.component('Fieldset', Fieldset); diff --git a/src/router/index.js b/src/router/index.js index b67c730c1..ca8f28e90 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -302,6 +302,11 @@ const routes = [ name: 'display', component: () => import('../views/display/DisplayDemo.vue') }, + { + path: '/divider', + name: 'divider', + component: () => import('../views/divider/DividerDemo.vue') + }, { path: '/dropdown', name: 'dropdown', diff --git a/src/views/divider/DividerDemo.vue b/src/views/divider/DividerDemo.vue new file mode 100644 index 000000000..7f700e415 --- /dev/null +++ b/src/views/divider/DividerDemo.vue @@ -0,0 +1,162 @@ + + + \ No newline at end of file diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue new file mode 100644 index 000000000..932694445 --- /dev/null +++ b/src/views/divider/DividerDoc.vue @@ -0,0 +1,326 @@ +