diff --git a/.gitignore b/.gitignore index 99e6fce0..839334f8 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,10 @@ .idea .vscode .log +index*.html node_modules/ bower_components/ !dist/ +/docs/_media/ +/dist/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 4a14440b..e2c3830f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -13,6 +13,7 @@ module.exports = (grunt) => { grunt.loadNpmTasks('grunt-contrib-uglify-es'); grunt.loadNpmTasks('grunt-shell'); grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-watch'); const fs = require('fs'); const deleteFolderRecursive = (path) => { @@ -317,4 +318,13 @@ module.exports = (grunt) => { // Create the polyfills grunt.task.run('polyfillsDist'); }); + + grunt.initConfig({ + watch: { + src: { + files: ['src/**/*.js', 'src/scss/**/*.scss'], + tasks: ['compile'], + } + }, + }); }; diff --git a/dist/css/joomla-accordion.css b/dist/css/joomla-accordion.css new file mode 100644 index 00000000..269cc614 --- /dev/null +++ b/dist/css/joomla-accordion.css @@ -0,0 +1,107 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + +/* Style the accordion panel. Note: hidden by default */ +joomla-accordion > .accordion-item { + padding: 0 18px; + background-color: white; + display: none; + overflow: hidden; } + +joomla-accordion > .joomla-accordion-title.active ~ section.show { + display: block; } + +joomla-accordion { + display: block; + margin-top: 1px; } + joomla-accordion > .joomla-accordion-title { + font-size: 1rem; + line-height: 1.614rem; + font-weight: 400; + color: var(--secondary-color); + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); + margin: -1px 0 0; + padding: 0.643rem 1.143rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: 300ms; } + joomla-accordion > .joomla-accordion-title:hover { + background: var(--button-background); } + joomla-accordion > .joomla-accordion-title.active { + color: var(--color); + border-bottom-color: transparent; } + joomla-accordion > .joomla-accordion-title > span { + height: 12px; + width: 12px; + background-size: contain; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E"); + display: inline-block; + background-position: center center; + background-repeat: no-repeat; + transition: 300ms; } + joomla-accordion > .joomla-accordion-title.active > span { + transform: rotate(180deg); } + joomla-accordion > .joomla-accordion-title:focus { + outline: 1px solid var(--link-color); } + joomla-accordion[state="closed"] { + display: none; } + joomla-accordion[state="open"] { + display: block; } + joomla-accordion[state="open"] .accordion-panel-body { + border-bottom: 1px solid #ccd3d7; } + joomla-accordion.accordion > div:first-child { + border-top: 1px solid #ccd3d7; } + joomla-accordion.accordion.disabled { + pointer-events: none; + opacity: 0.5; + color: #6c757d; } + joomla-accordion.accordion.disabled a { + color: #6c757d; } + joomla-accordion.accordion .accordion-panel-title { + border-bottom: 1px solid #ccd3d7; + text-decoration: none; + padding: 10px 15px; + display: flex; + align-items: center; + justify-content: space-between; + transition: .3s; + color: var(--secondary-color); } + joomla-accordion.accordion .accordion-panel-title .accordion-arrow { + pointer-events: none; + font-size: 50%; + margin-left: 5px; + transition: .3s; + transform: rotate(0deg); } + joomla-accordion.accordion .accordion-panel-title[aria-expanded="true"] { + color: var(--color); } + joomla-accordion.accordion .accordion-panel-title[aria-expanded="true"] .accordion-arrow { + transform: rotate(180deg); } + joomla-accordion.accordion .accordion-panel-title:hover { + background-color: #edf4fa; } + joomla-accordion.accordion .accordion-panel-title:focus { + box-shadow: 0px 0px 0px 2px #198df8; + outline: none; } + joomla-accordion.accordion .accordion-panel-body { + padding: 15px; } diff --git a/dist/css/joomla-accordion.min.css b/dist/css/joomla-accordion.min.css new file mode 100644 index 00000000..42a18e06 --- /dev/null +++ b/dist/css/joomla-accordion.min.css @@ -0,0 +1 @@ +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-accordion>.accordion-item{padding:0 18px;background-color:#fff;display:none;overflow:hidden}joomla-accordion>.joomla-accordion-title.active~section.show{display:block}joomla-accordion{display:block;margin-top:1px}joomla-accordion>.joomla-accordion-title{font-size:1rem;line-height:1.614rem;font-weight:400;color:var(--secondary-color);border-top:1px solid var(--background);border-bottom:1px solid var(--background);margin:-1px 0 0;padding:.643rem 1.143rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:.3s}joomla-accordion>.joomla-accordion-title:hover{background:var(--button-background)}joomla-accordion>.joomla-accordion-title.active{color:var(--color);border-bottom-color:transparent}joomla-accordion>.joomla-accordion-title>span{height:12px;width:12px;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E");display:inline-block;background-position:center center;background-repeat:no-repeat;transition:.3s}joomla-accordion>.joomla-accordion-title.active>span{transform:rotate(180deg)}joomla-accordion>.joomla-accordion-title:focus{outline:1px solid var(--link-color)}joomla-accordion[state=closed]{display:none}joomla-accordion[state=open]{display:block}joomla-accordion[state=open] .accordion-panel-body{border-bottom:1px solid #ccd3d7}joomla-accordion.accordion>div:first-child{border-top:1px solid #ccd3d7}joomla-accordion.accordion.disabled{pointer-events:none;opacity:.5;color:#6c757d}joomla-accordion.accordion.disabled a{color:#6c757d}joomla-accordion.accordion .accordion-panel-title{border-bottom:1px solid #ccd3d7;text-decoration:none;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;transition:.3s;color:var(--secondary-color)}joomla-accordion.accordion .accordion-panel-title .accordion-arrow{pointer-events:none;font-size:50%;margin-left:5px;transition:.3s;transform:rotate(0)}joomla-accordion.accordion .accordion-panel-title[aria-expanded=true]{color:var(--color)}joomla-accordion.accordion .accordion-panel-title[aria-expanded=true] .accordion-arrow{transform:rotate(180deg)}joomla-accordion.accordion .accordion-panel-title:hover{background-color:#edf4fa}joomla-accordion.accordion .accordion-panel-title:focus{box-shadow:0 0 0 2px #198df8;outline:0}joomla-accordion.accordion .accordion-panel-body{padding:15px} \ No newline at end of file diff --git a/dist/css/joomla-alert.css b/dist/css/joomla-alert.css index b1faaf39..ea05eee3 100644 --- a/dist/css/joomla-alert.css +++ b/dist/css/joomla-alert.css @@ -1,87 +1,177 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-alert { display: block; min-width: 250px; - padding: 0.5rem 1.25rem; - margin-bottom: 1rem; + padding: 1.143rem 1.500rem; + margin-bottom: 1.143rem; border: 1px solid transparent; opacity: 0; - border-radius: 0.25rem; - transition: opacity 0.15s linear; } + border-radius: 3px; + transition: 300ms; + box-shadow: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31); + color: var(--color); + position: relative; + line-height: 1.643rem; } + joomla-alert a { + color: var(--primary-color); } @media screen and (prefers-reduced-motion: reduce) { joomla-alert { transition: none; } } + joomla-alert[type='danger'] { + background-color: var(--danger-color); + color: var(--inverse-color); } + joomla-alert[type='warning'] { + background-color: var(--warning-color); } + joomla-alert[type='success'] { + background-color: var(--success-color); + color: var(--inverse-color); } joomla-alert.joomla-alert--show { - display: block; + display: flex; opacity: 1; } - joomla-alert .joomla-alert--close, joomla-alert .joomla-alert-button--close { + joomla-alert .joomla-alert--collapse-container, + joomla-alert .joomla-alert-content { + flex-grow: 1; } + joomla-alert .joomla-alert--icon { + padding-right: 1.357rem; + margin-top: 0.286rem; } + joomla-alert .joomla-alert--collapse-header { + display: flex; position: relative; - top: -0.5rem; - right: -1.25rem; - padding: .2rem 1rem; - color: inherit; } - joomla-alert .joomla-alert--close { - font-size: 1.5rem; - font-weight: 700; - line-height: 1; - text-shadow: 0 1px 0 #fff; } - joomla-alert .joomla-alert--close, joomla-alert .joomla-alert-button--close { - float: right; - color: #000; - background: transparent; - border: 0; - opacity: .5; } - joomla-alert .joomla-alert--close:hover, joomla-alert .joomla-alert--close:focus, joomla-alert .joomla-alert-button--close:hover, joomla-alert .joomla-alert-button--close:focus { - color: #000; - text-decoration: none; + justify-content: space-between; } + joomla-alert .joomla-alert--collapse-header[area-expanded='true'] { + margin-bottom: 0.786rem; } + joomla-alert .joomla-alert--collapse-header .joomla-alert--collapse-icon { + width: 14px; + height: 14px; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M5.293 6.697L.7 2.104a.99.99 0 0 1 1.4-1.4l3.9 3.9 3.9-3.9a.99.99 0 1 1 1.4 1.4L6.707 6.697a1 1 0 0 1-1.414 0z' fill='%23FFF'/%3E%3Cpath d='M-1-4h14v14H-1z'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + text-indent: 9999px; + display: inline-block; + border: none; + background-color: transparent; cursor: pointer; - opacity: .75; } - joomla-alert button.joomla-alert-button--close { - padding-top: .75rem; - font-size: 100%; - line-height: 1.15; + overflow: hidden; } + joomla-alert[type="info"] .joomla-alert--collapse-header .joomla-alert--collapse-icon { + background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E"); } + joomla-alert .joomla-alert--collapse { + display: none; } + joomla-alert .joomla-alert--collapse.show { + display: block; } + joomla-alert .joomla-alert--close { + position: absolute; + width: 14px; + height: 14px; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23FFF' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + text-indent: 9999px; + display: inline-block; + border: none; + background-color: transparent; + right: 1.500rem; + top: 1.286rem; cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; } + overflow: hidden; } + joomla-alert .joomla-alert--close span { + display: none; } + joomla-alert[type='info'] .joomla-alert--close { + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E"); } + joomla-alert[dismiss='false'] .joomla-alert--close { + display: none; } + joomla-alert[collapse='true'][dismiss='true'] .joomla-alert--collapse-header { + padding-right: 1.5rem; } + joomla-alert .joomla-alert-button-group { + padding-top: 1.214rem; } + joomla-alert .joomla-alert-button-group a, + joomla-alert button { + padding: 0 0.857rem; + line-height: 1.643rem; + border: none; + background: rgba(0, 0, 0, 0.07); + border-radius: 3px; + display: inline-block; + cursor: pointer; + transition: 300ms; + color: inherit; } + joomla-alert .joomla-alert-button-group a, + joomla-alert .joomla-alert-button-group button { + margin-right: 4px; } + joomla-alert .joomla-alert-button-group a:hover, + joomla-alert .joomla-alert-button-group button:hover { + background: rgba(0, 0, 0, 0.13); } + joomla-alert .joomla-alert-link-group { + padding-top: 0.714rem; } + joomla-alert .joomla-alert-link-group a { + margin-right: 8px; + display: inline-block; + position: relative; + padding-right: 12px; } + joomla-alert .joomla-alert-link-group a::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + margin-top: -2px; + height: 4px; + width: 4px; + border-radius: 50%; + background: var(--primary-color); } + joomla-alert .joomla-alert-link-group a:last-child { + margin-right: 0; + padding-right: 0; } + joomla-alert .joomla-alert-link-group a:last-child::after { + display: none; } -joomla-alert[type="success"] { - color: #234423; - background-color: #d9e6d9; - border-color: #cadcca; } - joomla-alert[type="success"] hr { - border-top-color: #bbd2bb; } - joomla-alert[type="success"] .alert-link { - color: #122212; } +html[dir=rtl] joomla-alert .joomla-alert--icon { + padding-right: 0; + padding-left: 1.357rem; } -joomla-alert[type="info"] { - color: #0c5460; - background-color: #d1ecf1; - border-color: #bee5eb; } - joomla-alert[type="info"] hr { - border-top-color: #abdde5; } - joomla-alert[type="info"] .alert-link { - color: #062c33; } +html[dir=rtl] joomla-alert .joomla-alert--close { + right: auto; + left: 1.5000rem; } -joomla-alert[type="warning"] { - color: #7d5a29; - background-color: #fcefdc; - border-color: #fbe8cd; } - joomla-alert[type="warning"] hr { - border-top-color: #f9ddb5; } - joomla-alert[type="warning"] .alert-link { - color: #573e1c; } +html[dir=rtl] joomla-alert[collapse='true'][dismiss='true'] .joomla-alert--collapse-header { + padding-right: 0; + padding-left: 1.5rem; } -joomla-alert[type="danger"] { - color: #712b29; - background-color: #f7dddc; - border-color: #f4cfce; } - joomla-alert[type="danger"] hr { - border-top-color: #efbbb9; } - joomla-alert[type="danger"] .alert-link { - color: #4c1d1b; } +html[dir=rtl] joomla-alert .joomla-alert-button-group a, +html[dir=rtl] joomla-alert .joomla-alert-button-group button { + margin-right: 0; + margin-left: 4px; } + html[dir=rtl] joomla-alert .joomla-alert-button-group a:hover, + html[dir=rtl] joomla-alert .joomla-alert-button-group button:hover { + background: rgba(0, 0, 0, 0.13); } -html[dir=rtl] joomla-alert .joomla-alert--close, -html[dir=rtl] joomla-alert .joomla-alert-button--close { - right: auto; - left: -1.25rem; - float: left; } +html[dir=rtl] joomla-alert .joomla-alert-link-group a { + margin-right: 0; + padding-right: 0; + margin-left: 8px; + padding-left: 12px; } + html[dir=rtl] joomla-alert .joomla-alert-link-group a::after { + right: auto; + left: 0; } + html[dir=rtl] joomla-alert .joomla-alert-link-group a:last-child { + margin-left: 0; + padding-left: 0; } diff --git a/dist/css/joomla-alert.min.css b/dist/css/joomla-alert.min.css index fef39682..d2422a35 100644 --- a/dist/css/joomla-alert.min.css +++ b/dist/css/joomla-alert.min.css @@ -1 +1 @@ -joomla-alert{display:block;min-width:250px;padding:.5rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;opacity:0;border-radius:.25rem;transition:opacity .15s linear}@media screen and (prefers-reduced-motion:reduce){joomla-alert{transition:none}}joomla-alert.joomla-alert--show{display:block;opacity:1}joomla-alert .joomla-alert--close,joomla-alert .joomla-alert-button--close{position:relative;top:-.5rem;right:-1.25rem;padding:.2rem 1rem;color:inherit}joomla-alert .joomla-alert--close{font-size:1.5rem;font-weight:700;line-height:1;text-shadow:0 1px 0 #fff}joomla-alert .joomla-alert--close,joomla-alert .joomla-alert-button--close{float:right;color:#000;background:0 0;border:0;opacity:.5}joomla-alert .joomla-alert--close:focus,joomla-alert .joomla-alert--close:hover,joomla-alert .joomla-alert-button--close:focus,joomla-alert .joomla-alert-button--close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75}joomla-alert button.joomla-alert-button--close{padding-top:.75rem;font-size:100%;line-height:1.15;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}joomla-alert[type=success]{color:#234423;background-color:#d9e6d9;border-color:#cadcca}joomla-alert[type=success] hr{border-top-color:#bbd2bb}joomla-alert[type=success] .alert-link{color:#122212}joomla-alert[type=info]{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}joomla-alert[type=info] hr{border-top-color:#abdde5}joomla-alert[type=info] .alert-link{color:#062c33}joomla-alert[type=warning]{color:#7d5a29;background-color:#fcefdc;border-color:#fbe8cd}joomla-alert[type=warning] hr{border-top-color:#f9ddb5}joomla-alert[type=warning] .alert-link{color:#573e1c}joomla-alert[type=danger]{color:#712b29;background-color:#f7dddc;border-color:#f4cfce}joomla-alert[type=danger] hr{border-top-color:#efbbb9}joomla-alert[type=danger] .alert-link{color:#4c1d1b}html[dir=rtl] joomla-alert .joomla-alert--close,html[dir=rtl] joomla-alert .joomla-alert-button--close{right:auto;left:-1.25rem;float:left} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-alert{display:block;min-width:250px;padding:1.143rem 1.5rem;margin-bottom:1.143rem;border:1px solid transparent;opacity:0;border-radius:3px;transition:.3s;box-shadow:0 8px 16px -4px rgba(9,30,66,.25),0 0 1px 0 rgba(9,30,66,.31);color:var(--color);position:relative;line-height:1.643rem}joomla-alert a{color:var(--primary-color)}@media screen and (prefers-reduced-motion:reduce){joomla-alert{transition:none}}joomla-alert[type=danger]{background-color:var(--danger-color);color:var(--inverse-color)}joomla-alert[type=warning]{background-color:var(--warning-color)}joomla-alert[type=success]{background-color:var(--success-color);color:var(--inverse-color)}joomla-alert.joomla-alert--show{display:flex;opacity:1}joomla-alert .joomla-alert--collapse-container,joomla-alert .joomla-alert-content{flex-grow:1}joomla-alert .joomla-alert--icon{padding-right:1.357rem;margin-top:.286rem}joomla-alert .joomla-alert--collapse-header{display:flex;position:relative;justify-content:space-between}joomla-alert .joomla-alert--collapse-header[area-expanded=true]{margin-bottom:.786rem}joomla-alert .joomla-alert--collapse-header .joomla-alert--collapse-icon{width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M5.293 6.697L.7 2.104a.99.99 0 0 1 1.4-1.4l3.9 3.9 3.9-3.9a.99.99 0 1 1 1.4 1.4L6.707 6.697a1 1 0 0 1-1.414 0z' fill='%23FFF'/%3E%3Cpath d='M-1-4h14v14H-1z'/%3E%3C/g%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat;text-indent:9999px;display:inline-block;border:none;background-color:transparent;cursor:pointer;overflow:hidden}joomla-alert[type=info] .joomla-alert--collapse-header .joomla-alert--collapse-icon{background-image:url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E")}joomla-alert .joomla-alert--collapse{display:none}joomla-alert .joomla-alert--collapse.show{display:block}joomla-alert .joomla-alert--close{position:absolute;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23FFF' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat;text-indent:9999px;display:inline-block;border:none;background-color:transparent;right:1.5rem;top:1.286rem;cursor:pointer;overflow:hidden}joomla-alert .joomla-alert--close span{display:none}joomla-alert[type=info] .joomla-alert--close{background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E")}joomla-alert[dismiss=false] .joomla-alert--close{display:none}joomla-alert[collapse=true][dismiss=true] .joomla-alert--collapse-header{padding-right:1.5rem}joomla-alert .joomla-alert-button-group{padding-top:1.214rem}joomla-alert .joomla-alert-button-group a,joomla-alert button{padding:0 .857rem;line-height:1.643rem;border:none;background:rgba(0,0,0,.07);border-radius:3px;display:inline-block;cursor:pointer;transition:.3s;color:inherit}joomla-alert .joomla-alert-button-group a,joomla-alert .joomla-alert-button-group button{margin-right:4px}joomla-alert .joomla-alert-button-group a:hover,joomla-alert .joomla-alert-button-group button:hover{background:rgba(0,0,0,.13)}joomla-alert .joomla-alert-link-group{padding-top:.714rem}joomla-alert .joomla-alert-link-group a{margin-right:8px;display:inline-block;position:relative;padding-right:12px}joomla-alert .joomla-alert-link-group a::after{content:'';position:absolute;right:0;top:50%;margin-top:-2px;height:4px;width:4px;border-radius:50%;background:var(--primary-color)}joomla-alert .joomla-alert-link-group a:last-child{margin-right:0;padding-right:0}joomla-alert .joomla-alert-link-group a:last-child::after{display:none}html[dir=rtl] joomla-alert .joomla-alert--icon{padding-right:0;padding-left:1.357rem}html[dir=rtl] joomla-alert .joomla-alert--close{right:auto;left:1.5rem}html[dir=rtl] joomla-alert[collapse=true][dismiss=true] .joomla-alert--collapse-header{padding-right:0;padding-left:1.5rem}html[dir=rtl] joomla-alert .joomla-alert-button-group a,html[dir=rtl] joomla-alert .joomla-alert-button-group button{margin-right:0;margin-left:4px}html[dir=rtl] joomla-alert .joomla-alert-button-group a:hover,html[dir=rtl] joomla-alert .joomla-alert-button-group button:hover{background:rgba(0,0,0,.13)}html[dir=rtl] joomla-alert .joomla-alert-link-group a{margin-right:0;padding-right:0;margin-left:8px;padding-left:12px}html[dir=rtl] joomla-alert .joomla-alert-link-group a::after{right:auto;left:0}html[dir=rtl] joomla-alert .joomla-alert-link-group a:last-child{margin-left:0;padding-left:0} \ No newline at end of file diff --git a/dist/css/joomla-callout.css b/dist/css/joomla-callout.css new file mode 100644 index 00000000..4d96f180 --- /dev/null +++ b/dist/css/joomla-callout.css @@ -0,0 +1,99 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + +joomla-callout { + background-color: var(--inverse-color); + box-shadow: 0 1.2px 3.6px -1px rgba(29, 36, 39, 0.1), 0 6.4px 14.4px -3px rgba(29, 36, 39, 0.15); + display: none; + position: fixed; + padding: 1.6rem 1.8rem .8rem 1.8rem; + border-radius: 3px; + min-height: 50px; + width: 300px; + z-index: 999999999; } + joomla-callout[position="top"]::before { + bottom: -20px; + top: auto; + transform: rotate(-90deg); + right: 0; + left: 0; } + joomla-callout[position="bottom"]::before { + top: -20px; + transform: rotate(90deg); + right: 0; + left: 0; + bottom: auto; } + joomla-callout[position="left"]::before { + transform: rotate(180deg); + right: -20px; + left: auto; } + +joomla-callout[expanded] { + display: block; } + +joomla-callout::before { + content: ""; + width: 0px; + height: 0px; + border: .7rem solid transparent; + position: absolute; + left: -20px; + border-right: 0.7rem solid var(--white); + top: 0; + margin: auto; + bottom: 0; } + +.callout-title { + font-size: 1.143rem; + color: var(--primary-text-color); + margin-bottom: .8rem; } + +.callout-content { + font-size: 1rem; + line-height: 1.61; + color: var(--secondary-text-color); } + +.callout-link { + display: inline-block; + font-size: 1rem; + font-weight: 500; + line-height: 1.61; + color: var(--primary-color); + text-decoration: none; + margin-top: .65rem; } + +.callout-footer { + border-top: 1px solid rgba(29, 36, 39, 0.15); + margin-top: .2rem; } + +.joomla-callout--close { + border: 0; + color: #605e5c; + padding: 0; + position: absolute; + top: 5px; + right: 10px; + font-size: 1.4rem; + line-height: 1; + cursor: pointer; } + .joomla-callout--close:focus { + outline: none; } diff --git a/dist/css/joomla-callout.min.css b/dist/css/joomla-callout.min.css new file mode 100644 index 00000000..32858e12 --- /dev/null +++ b/dist/css/joomla-callout.min.css @@ -0,0 +1 @@ +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-callout{background-color:var(--inverse-color);box-shadow:0 1.2px 3.6px -1px rgba(29,36,39,.1),0 6.4px 14.4px -3px rgba(29,36,39,.15);display:none;position:fixed;padding:1.6rem 1.8rem .8rem 1.8rem;border-radius:3px;min-height:50px;width:300px;z-index:999999999}joomla-callout[position=top]::before{bottom:-20px;top:auto;transform:rotate(-90deg);right:0;left:0}joomla-callout[position=bottom]::before{top:-20px;transform:rotate(90deg);right:0;left:0;bottom:auto}joomla-callout[position=left]::before{transform:rotate(180deg);right:-20px;left:auto}joomla-callout[expanded]{display:block}joomla-callout::before{content:"";width:0;height:0;border:.7rem solid transparent;position:absolute;left:-20px;border-right:.7rem solid var(--white);top:0;margin:auto;bottom:0}.callout-title{font-size:1.143rem;color:var(--primary-text-color);margin-bottom:.8rem}.callout-content{font-size:1rem;line-height:1.61;color:var(--secondary-text-color)}.callout-link{display:inline-block;font-size:1rem;font-weight:500;line-height:1.61;color:var(--primary-color);text-decoration:none;margin-top:.65rem}.callout-footer{border-top:1px solid rgba(29,36,39,.15);margin-top:.2rem}.joomla-callout--close{border:0;color:#605e5c;padding:0;position:absolute;top:5px;right:10px;font-size:1.4rem;line-height:1;cursor:pointer}.joomla-callout--close:focus{outline:0} \ No newline at end of file diff --git a/dist/css/joomla-collapse.css b/dist/css/joomla-collapse.css index 9d753404..ce381a90 100644 --- a/dist/css/joomla-collapse.css +++ b/dist/css/joomla-collapse.css @@ -1,5 +1,67 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-collapse[state="closed"] { display: none; } joomla-collapse[state="open"] { display: block; } + joomla-collapse[state="open"] .accordion-panel-body { + border-bottom: 1px solid #ccd3d7; } + +.accordion > div:first-child { + border-top: 1px solid #ccd3d7; } + +.accordion.disabled { + pointer-events: none; + opacity: 0.5; + color: #6c757d; } + .accordion.disabled a { + color: #6c757d; } + +.accordion-panel-title { + border-bottom: 1px solid #ccd3d7; + text-decoration: none; + padding: 10px 15px; + display: flex; + align-items: center; + justify-content: space-between; + transition: .3s; + color: var(--secondary-color); } + .accordion-panel-title .accordion-arrow { + pointer-events: none; + font-size: 50%; + margin-left: 5px; + transition: .3s; + transform: rotate(0deg); } + .accordion-panel-title[aria-expanded="true"] { + color: var(--color); } + .accordion-panel-title[aria-expanded="true"] .accordion-arrow { + transform: rotate(180deg); } + .accordion-panel-title:hover { + background-color: #edf4fa; } + .accordion-panel-title:focus { + box-shadow: 0px 0px 0px 2px #198df8; + outline: none; } + +.accordion-panel-body { + padding: 15px; } diff --git a/dist/css/joomla-collapse.min.css b/dist/css/joomla-collapse.min.css index 565570c6..5bdafe42 100644 --- a/dist/css/joomla-collapse.min.css +++ b/dist/css/joomla-collapse.min.css @@ -1 +1 @@ -joomla-collapse[state=closed]{display:none}joomla-collapse[state=open]{display:block} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-collapse[state=closed]{display:none}joomla-collapse[state=open]{display:block}joomla-collapse[state=open] .accordion-panel-body{border-bottom:1px solid #ccd3d7}.accordion>div:first-child{border-top:1px solid #ccd3d7}.accordion.disabled{pointer-events:none;opacity:.5;color:#6c757d}.accordion.disabled a{color:#6c757d}.accordion-panel-title{border-bottom:1px solid #ccd3d7;text-decoration:none;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;transition:.3s;color:var(--secondary-color)}.accordion-panel-title .accordion-arrow{pointer-events:none;font-size:50%;margin-left:5px;transition:.3s;transform:rotate(0)}.accordion-panel-title[aria-expanded=true]{color:var(--color)}.accordion-panel-title[aria-expanded=true] .accordion-arrow{transform:rotate(180deg)}.accordion-panel-title:hover{background-color:#edf4fa}.accordion-panel-title:focus{box-shadow:0 0 0 2px #198df8;outline:0}.accordion-panel-body{padding:15px} \ No newline at end of file diff --git a/dist/css/joomla-dropdown.css b/dist/css/joomla-dropdown.css index febe175a..4ba1314c 100644 --- a/dist/css/joomla-dropdown.css +++ b/dist/css/joomla-dropdown.css @@ -1,41 +1,150 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-dropdown { position: absolute; - top: 30px; - left: 0; - z-index: 1000; + top: 100%; + z-index: 9999; display: none; - box-sizing: border-box; - min-width: 10rem; - margin-top: .5rem; + min-width: 16.071rem; + margin-top: 0.214rem; font-size: 1rem; text-align: left; list-style: none; - background-color: #fff; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); } + background-color: #ffffff; + box-shadow: 0 30px 60px -10px rgba(0, 28, 73, 0.15); + border-radius: 3px; } + joomla-dropdown.j-dropdown-sm { + line-height: 1; } + joomla-dropdown ul { + list-style: none; } + joomla-dropdown li { + position: relative; } + joomla-dropdown li ul { + position: absolute; + left: 100%; + top: 0; + background-color: #ffffff; + border: 1px solid #eaeef5; + box-shadow: 0 30px 60px -10px rgba(0, 28, 73, 0.15); + min-width: 16.071rem; + padding: 0; + list-style: none; + opacity: 0; + visibility: hidden; + transition: 300ms; } + joomla-dropdown li.left ul { + left: auto; + right: 100%; } + joomla-dropdown li[open] > ul { + visibility: visible; + opacity: 1; } + joomla-dropdown li.has-submenu > a { + position: relative; } + joomla-dropdown li.has-submenu > a::after { + content: ''; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + height: 12px; + width: 12px; + background-size: contain; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E"); + display: inline-block; + background-position: center center; + background-repeat: no-repeat; + transition: 300ms; } + joomla-dropdown li.has-submenu[open] > a::after { + transform: translateY(-50%) rotate(-90deg); } + joomla-dropdown li.has-submenu.left > a { + padding-left: 30px; } + joomla-dropdown li.has-submenu.left > a::after { + right: auto; + left: 10px; } + joomla-dropdown li.has-submenu[open].left > a::after { + transform: translateY(-50%) rotate(90deg); } + joomla-dropdown li:last-child .dropdown-item { + border-bottom: 0; } joomla-dropdown[expanded] { display: block; } joomla-dropdown .dropdown-item { display: block; - padding: 0.5rem 0.75rem; + padding: 0.571rem 1.143rem; clear: both; - font-weight: 400; - color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; - border: 0; } - joomla-dropdown .dropdown-item:hover, joomla-dropdown .dropdown-item:focus { - color: #fff; - text-decoration: none; - cursor: pointer; - background: #495057; } + border: 0; + text-decoration: none; + border-bottom: 1px solid var(--bg-color); + cursor: pointer; + color: var(--text-color); + transition: 300ms; + min-width: 100%; } + joomla-dropdown .dropdown-item:not([href]):not([tabindex]):hover, joomla-dropdown .dropdown-item:hover { + color: var(--primary-color); + background-color: var(--primary-lighter-color); } + joomla-dropdown .dropdown-item:not([href]):not([tabindex]):hover .menu-item-title, joomla-dropdown .dropdown-item:hover .menu-item-title { + color: var(--primary-color); } + joomla-dropdown .dropdown-item:active { + background: #ffffff; } + joomla-dropdown .dropdown-item:focus { + outline: 2px solid var(--primary-color); + background: #ffffff; } + joomla-dropdown .dropdown-item > p { + padding-left: 1.143rem; + padding-right: 1.143rem; } + joomla-dropdown .dropdown-item > p:first-child { + margin-top: 1.143rem; } + joomla-dropdown .dropdown-item > p:last-child { + margin-bottom: 1.143rem; } + joomla-dropdown .dropdown-item[position="right"] { + right: 0; } + joomla-dropdown .dropdown-item[position="left"] { + left: 0; } + joomla-dropdown .dropdown-item .menu-item-title { + color: var(--secondary-text-color); + font-weight: 500; } + joomla-dropdown .dropdown-item .text-mute { + color: var(--icon-color); + font-size: 12px; } + joomla-dropdown[position="right"] { + right: 0; } + joomla-dropdown[position="left"] { + left: 0; } + joomla-dropdown[position="right"] { + right: 0; } + joomla-dropdown[position="left"] { + left: 0; } .joomla-dropdown-container { position: relative; display: inline-flex; vertical-align: middle; } +.j-has-dropdown span { + margin-left: .5rem; } + html[dir=rtl] joomla-dropdown { right: 0; left: auto; } diff --git a/dist/css/joomla-dropdown.min.css b/dist/css/joomla-dropdown.min.css index 9b8eb710..7f859730 100644 --- a/dist/css/joomla-dropdown.min.css +++ b/dist/css/joomla-dropdown.min.css @@ -1 +1 @@ -joomla-dropdown{position:absolute;top:30px;left:0;z-index:1000;display:none;box-sizing:border-box;min-width:10rem;margin-top:.5rem;font-size:1rem;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15)}joomla-dropdown[expanded]{display:block}joomla-dropdown .dropdown-item{display:block;padding:.5rem .75rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}joomla-dropdown .dropdown-item:focus,joomla-dropdown .dropdown-item:hover{color:#fff;text-decoration:none;cursor:pointer;background:#495057}.joomla-dropdown-container{position:relative;display:inline-flex;vertical-align:middle}html[dir=rtl] joomla-dropdown{right:0;left:auto} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-dropdown{position:absolute;top:100%;z-index:9999;display:none;min-width:16.071rem;margin-top:.214rem;font-size:1rem;text-align:left;list-style:none;background-color:#fff;box-shadow:0 30px 60px -10px rgba(0,28,73,.15);border-radius:3px}joomla-dropdown.j-dropdown-sm{line-height:1}joomla-dropdown ul{list-style:none}joomla-dropdown li{position:relative}joomla-dropdown li ul{position:absolute;left:100%;top:0;background-color:#fff;border:1px solid #eaeef5;box-shadow:0 30px 60px -10px rgba(0,28,73,.15);min-width:16.071rem;padding:0;list-style:none;opacity:0;visibility:hidden;transition:.3s}joomla-dropdown li.left ul{left:auto;right:100%}joomla-dropdown li[open]>ul{visibility:visible;opacity:1}joomla-dropdown li.has-submenu>a{position:relative}joomla-dropdown li.has-submenu>a::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);height:12px;width:12px;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.707 6.283a1 1 0 0 1-1.414 0L.7 1.69A.99.99 0 0 1 2.1.29L6 4.19 9.9.29a.99.99 0 0 1 1.4 1.4L6.707 6.283z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3C/svg%3E");display:inline-block;background-position:center center;background-repeat:no-repeat;transition:.3s}joomla-dropdown li.has-submenu[open]>a::after{transform:translateY(-50%) rotate(-90deg)}joomla-dropdown li.has-submenu.left>a{padding-left:30px}joomla-dropdown li.has-submenu.left>a::after{right:auto;left:10px}joomla-dropdown li.has-submenu[open].left>a::after{transform:translateY(-50%) rotate(90deg)}joomla-dropdown li:last-child .dropdown-item{border-bottom:0}joomla-dropdown[expanded]{display:block}joomla-dropdown .dropdown-item{display:block;padding:.571rem 1.143rem;clear:both;text-align:inherit;white-space:nowrap;background-color:transparent;border:0;text-decoration:none;border-bottom:1px solid var(--bg-color);cursor:pointer;color:var(--text-color);transition:.3s;min-width:100%}joomla-dropdown .dropdown-item:hover,joomla-dropdown .dropdown-item:not([href]):not([tabindex]):hover{color:var(--primary-color);background-color:var(--primary-lighter-color)}joomla-dropdown .dropdown-item:hover .menu-item-title,joomla-dropdown .dropdown-item:not([href]):not([tabindex]):hover .menu-item-title{color:var(--primary-color)}joomla-dropdown .dropdown-item:active{background:#fff}joomla-dropdown .dropdown-item:focus{outline:2px solid var(--primary-color);background:#fff}joomla-dropdown .dropdown-item>p{padding-left:1.143rem;padding-right:1.143rem}joomla-dropdown .dropdown-item>p:first-child{margin-top:1.143rem}joomla-dropdown .dropdown-item>p:last-child{margin-bottom:1.143rem}joomla-dropdown .dropdown-item[position=right]{right:0}joomla-dropdown .dropdown-item[position=left]{left:0}joomla-dropdown .dropdown-item .menu-item-title{color:var(--secondary-text-color);font-weight:500}joomla-dropdown .dropdown-item .text-mute{color:var(--icon-color);font-size:12px}joomla-dropdown[position=right]{right:0}joomla-dropdown[position=left]{left:0}joomla-dropdown[position=right]{right:0}joomla-dropdown[position=left]{left:0}.joomla-dropdown-container{position:relative;display:inline-flex;vertical-align:middle}.j-has-dropdown span{margin-left:.5rem}html[dir=rtl] joomla-dropdown{right:0;left:auto} \ No newline at end of file diff --git a/dist/css/joomla-flextable.css b/dist/css/joomla-flextable.css new file mode 100644 index 00000000..90d7a03e --- /dev/null +++ b/dist/css/joomla-flextable.css @@ -0,0 +1,66 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + +.flextable { + z-index: 10; } + .flextable .flextable-item { + border-radius: 3px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); + background-color: #ffffff; + padding: 10px; + margin-bottom: 10px; } + .flextable .flextable-main-parent { + position: relative; } + .flextable .flextable-main-parent:before { + content: ""; + position: absolute; + top: 0; + bottom: 20px; + left: 20px; + width: 1px; + background-color: #ccd3d7; + z-index: -1; } + .flextable .flextable-main-parent > .flextable-child { + padding-left: 40px; } + .flextable .flextable-main-parent > .flextable-child .flextable-item { + position: relative; + padding: 7px 10px; } + .flextable .flextable-main-parent > .flextable-child .flextable-item:after { + content: ""; + position: absolute; + bottom: 20px; + left: -20px; + width: 40px; + background-color: #ccd3d7; + z-index: -1; + height: 1px; } + .flextable .flextable-main-parent .flextable-child-parent > .flextable-child { + padding-left: 40px; } + .flextable .flextable-main-parent .flextable-child-parent > .flextable-child .flextable-item:before { + content: ""; + position: absolute; + bottom: 20px; + left: -20px; + background-color: #ccd3d7; + z-index: -1; + top: -30px; + width: 1px; } diff --git a/dist/css/joomla-flextable.min.css b/dist/css/joomla-flextable.min.css new file mode 100644 index 00000000..5747ec9a --- /dev/null +++ b/dist/css/joomla-flextable.min.css @@ -0,0 +1 @@ +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}.flextable{z-index:10}.flextable .flextable-item{border-radius:3px;box-shadow:0 1px 1px 0 rgba(0,0,0,.15);background-color:#fff;padding:10px;margin-bottom:10px}.flextable .flextable-main-parent{position:relative}.flextable .flextable-main-parent:before{content:"";position:absolute;top:0;bottom:20px;left:20px;width:1px;background-color:#ccd3d7;z-index:-1}.flextable .flextable-main-parent>.flextable-child{padding-left:40px}.flextable .flextable-main-parent>.flextable-child .flextable-item{position:relative;padding:7px 10px}.flextable .flextable-main-parent>.flextable-child .flextable-item:after{content:"";position:absolute;bottom:20px;left:-20px;width:40px;background-color:#ccd3d7;z-index:-1;height:1px}.flextable .flextable-main-parent .flextable-child-parent>.flextable-child{padding-left:40px}.flextable .flextable-main-parent .flextable-child-parent>.flextable-child .flextable-item:before{content:"";position:absolute;bottom:20px;left:-20px;background-color:#ccd3d7;z-index:-1;top:-30px;width:1px} \ No newline at end of file diff --git a/dist/css/joomla-modal.css b/dist/css/joomla-modal.css index 20ad35b1..85a6adf8 100644 --- a/dist/css/joomla-modal.css +++ b/dist/css/joomla-modal.css @@ -1,90 +1,93 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-modal { position: fixed; + display: flex; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; box-sizing: inherit; - display: none; - max-width: 500px; + opacity: 0; + visibility: hidden; + width: 100%; + height: 100%; margin: 10px auto; - overflow: hidden; border-radius: 5px; - outline: 0; } - joomla-modal.jviewport-width10 { - width: 10vw; - margin-left: -5vw; } - joomla-modal.jviewport-width20 { - width: 20vw; - margin-left: -10vw; } - joomla-modal.jviewport-width30 { - width: 30vw; - margin-left: -15vw; } - joomla-modal.jviewport-width40 { - width: 40vw; - margin-left: -20vw; } - joomla-modal.jviewport-width50 { - width: 50vw; - margin-left: -25vw; } - joomla-modal.jviewport-width60 { - width: 60vw; - margin-left: -30vw; } - joomla-modal.jviewport-width70 { - width: 70vw; - margin-left: -35vw; } - joomla-modal.jviewport-width80 { - width: 80vw; - margin-left: -40vw; } - joomla-modal.jviewport-width90 { - width: 90vw; - margin-left: -45vw; } - joomla-modal.jviewport-width100 { - width: 100vw; - margin-left: -50vw; } + outline: 0; + align-items: center; + justify-content: center; } + joomla-modal, + joomla-modal * { + box-sizing: border-box; } joomla-modal.show { - display: block; } + opacity: 1; + visibility: visible; } + joomla-modal.fade { + opacity: 0; + transition: .3s; } + joomla-modal.fade.show { + opacity: 1; } joomla-modal .joomla-modal-dialog { position: relative; - display: flex; - flex-direction: column; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: .3rem; - outline: 0; } - joomla-modal .joomla-modal-dialog.fade { - opacity: 0; - transition: opacity .15s linear; } - joomla-modal .joomla-modal-dialog.fade.show { - opacity: 1; } + border-radius: 3px; + outline: 0; + width: 100%; + max-width: 600px; + max-height: 90%; + overflow-x: hidden; + overflow-y: auto; } joomla-modal .joomla-modal-dialog header { display: flex; align-items: center; justify-content: space-between; - padding: 15px; - border-bottom: 1px solid #e9ecef; } + padding: 1.714rem 1.714rem 0.929rem 1.714rem; } + joomla-modal .joomla-modal-dialog header h5 { + margin: 0; + font-size: 1.714rem; + line-height: 1.3rem; } joomla-modal .joomla-modal-dialog header button { - float: right; - padding: 0; - font-size: 1.5rem; - font-weight: 700; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; + width: 14px; + height: 14px; + background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + text-indent: 9999px; + display: inline-block; + border: none; + background-color: transparent; cursor: pointer; - background: 0 0; - border: 0; - opacity: .5; - -webkit-appearance: none; } - joomla-modal .joomla-modal-dialog header h5 { - margin-bottom: 0; - font-size: 1.25rem; - line-height: 1.5; } + transition: 300ms; } + joomla-modal .joomla-modal-dialog header button:hover { + filter: contrast(0); } joomla-modal .joomla-modal-dialog section { position: relative; flex: 1 1 auto; - padding: 15px; } + padding: 0 1.714rem; } joomla-modal .joomla-modal-dialog section.jviewport-height10 { height: 10vh; } joomla-modal .joomla-modal-dialog section.jviewport-height20 { @@ -115,13 +118,53 @@ joomla-modal { align-items: center; -ms-flex-pack: end; justify-content: flex-end; - padding: 15px; - border-top: 1px solid #e9ecef; } + padding: 0.929rem 1.714rem 1.714rem 1.714rem; } + joomla-modal .joomla-modal-dialog footer .modal-footer-left-text { + flex-grow: 1; + text-align: left; + color: var(--secondary-color); } joomla-modal .joomla-modal-dialog footer .btn { margin-left: 10px; } + joomla-modal.bordered header { + border-bottom: 2px solid #ecedf0; + padding-bottom: 1.714rem; } + joomla-modal.bordered footer { + border-top: 2px solid #ecedf0; + padding-top: 1.714rem; } + joomla-modal.bordered .joomla-modal-dialog section { + padding-top: 1.143rem; + padding-bottom: 1.143rem; } + joomla-modal.scrollable .joomla-modal-dialog section { + max-height: 320px; + overflow: auto; } + joomla-modal.jviewport-width10 .joomla-modal-dialog { + max-width: 10vw; } + joomla-modal.jviewport-width20 .joomla-modal-dialog { + max-width: 20vw; } + joomla-modal.jviewport-width30 .joomla-modal-dialog { + max-width: 30vw; } + joomla-modal.jviewport-width40 .joomla-modal-dialog { + max-width: 40vw; } + joomla-modal.jviewport-width50 .joomla-modal-dialog { + max-width: 50vw; } + joomla-modal.jviewport-width60 .joomla-modal-dialog { + max-width: 60vw; } + joomla-modal.jviewport-width70 .joomla-modal-dialog { + max-width: 70vw; } + joomla-modal.jviewport-width80 .joomla-modal-dialog { + max-width: 80vw; } + joomla-modal.jviewport-width90 .joomla-modal-dialog { + max-width: 90vw; } + joomla-modal.jviewport-width100 .joomla-modal-dialog { + max-width: 100vw; } .modal-backdrop.show { - opacity: .5; } + opacity: 1; } + .modal-backdrop.show.fade { + opacity: 0; + transition: .3s; } + .modal-backdrop.show.fade.show { + opacity: 1; } .modal-backdrop { position: fixed; @@ -130,4 +173,4 @@ joomla-modal { bottom: 0; left: 0; z-index: 1040; - background-color: #000; } + background-color: var(--overlay); } diff --git a/dist/css/joomla-modal.min.css b/dist/css/joomla-modal.min.css index a6b6b3db..ad4d646f 100644 --- a/dist/css/joomla-modal.min.css +++ b/dist/css/joomla-modal.min.css @@ -1 +1 @@ -joomla-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;box-sizing:inherit;display:none;max-width:500px;margin:10px auto;overflow:hidden;border-radius:5px;outline:0}joomla-modal.jviewport-width10{width:10vw;margin-left:-5vw}joomla-modal.jviewport-width20{width:20vw;margin-left:-10vw}joomla-modal.jviewport-width30{width:30vw;margin-left:-15vw}joomla-modal.jviewport-width40{width:40vw;margin-left:-20vw}joomla-modal.jviewport-width50{width:50vw;margin-left:-25vw}joomla-modal.jviewport-width60{width:60vw;margin-left:-30vw}joomla-modal.jviewport-width70{width:70vw;margin-left:-35vw}joomla-modal.jviewport-width80{width:80vw;margin-left:-40vw}joomla-modal.jviewport-width90{width:90vw;margin-left:-45vw}joomla-modal.jviewport-width100{width:100vw;margin-left:-50vw}joomla-modal.show{display:block}joomla-modal .joomla-modal-dialog{position:relative;display:flex;flex-direction:column;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}joomla-modal .joomla-modal-dialog.fade{opacity:0;transition:opacity .15s linear}joomla-modal .joomla-modal-dialog.fade.show{opacity:1}joomla-modal .joomla-modal-dialog header{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid #e9ecef}joomla-modal .joomla-modal-dialog header button{float:right;padding:0;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;cursor:pointer;background:0 0;border:0;opacity:.5;-webkit-appearance:none}joomla-modal .joomla-modal-dialog header h5{margin-bottom:0;font-size:1.25rem;line-height:1.5}joomla-modal .joomla-modal-dialog section{position:relative;flex:1 1 auto;padding:15px}joomla-modal .joomla-modal-dialog section.jviewport-height10{height:10vh}joomla-modal .joomla-modal-dialog section.jviewport-height20{height:20vh}joomla-modal .joomla-modal-dialog section.jviewport-height30{height:30vh}joomla-modal .joomla-modal-dialog section.jviewport-height40{height:40vh}joomla-modal .joomla-modal-dialog section.jviewport-height50{height:50vh}joomla-modal .joomla-modal-dialog section.jviewport-height60{height:60vh}joomla-modal .joomla-modal-dialog section.jviewport-height70{height:70vh}joomla-modal .joomla-modal-dialog section.jviewport-height80{height:80vh}joomla-modal .joomla-modal-dialog section.jviewport-height90{height:90vh}joomla-modal .joomla-modal-dialog section.jviewport-height100{height:100vh}joomla-modal .joomla-modal-dialog section[class*=jviewport-height],joomla-modal .joomla-modal-dialog section[class^=jviewport-height]{max-height:none}joomla-modal .joomla-modal-dialog footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:15px;border-top:1px solid #e9ecef}joomla-modal .joomla-modal-dialog footer .btn{margin-left:10px}.modal-backdrop.show{opacity:.5}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-modal{position:fixed;display:flex;top:0;right:0;bottom:0;left:0;z-index:1050;box-sizing:inherit;opacity:0;visibility:hidden;width:100%;height:100%;margin:10px auto;border-radius:5px;outline:0;align-items:center;justify-content:center}joomla-modal,joomla-modal *{box-sizing:border-box}joomla-modal.show{opacity:1;visibility:visible}joomla-modal.fade{opacity:0;transition:.3s}joomla-modal.fade.show{opacity:1}joomla-modal .joomla-modal-dialog{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0;width:100%;max-width:600px;max-height:90%;overflow-x:hidden;overflow-y:auto}joomla-modal .joomla-modal-dialog header{display:flex;align-items:center;justify-content:space-between;padding:1.714rem 1.714rem .929rem 1.714rem}joomla-modal .joomla-modal-dialog header h5{margin:0;font-size:1.714rem;line-height:1.3rem}joomla-modal .joomla-modal-dialog header button{width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L7 5.585 12.293.293a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L8.415 7l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L7 8.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L5.585 7 .293 1.707A1 1 0 0 1 .21.387z' fill='%23C1C7D0' fill-rule='nonzero'/%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3C/g%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat;text-indent:9999px;display:inline-block;border:none;background-color:transparent;cursor:pointer;transition:.3s}joomla-modal .joomla-modal-dialog header button:hover{filter:contrast(0)}joomla-modal .joomla-modal-dialog section{position:relative;flex:1 1 auto;padding:0 1.714rem}joomla-modal .joomla-modal-dialog section.jviewport-height10{height:10vh}joomla-modal .joomla-modal-dialog section.jviewport-height20{height:20vh}joomla-modal .joomla-modal-dialog section.jviewport-height30{height:30vh}joomla-modal .joomla-modal-dialog section.jviewport-height40{height:40vh}joomla-modal .joomla-modal-dialog section.jviewport-height50{height:50vh}joomla-modal .joomla-modal-dialog section.jviewport-height60{height:60vh}joomla-modal .joomla-modal-dialog section.jviewport-height70{height:70vh}joomla-modal .joomla-modal-dialog section.jviewport-height80{height:80vh}joomla-modal .joomla-modal-dialog section.jviewport-height90{height:90vh}joomla-modal .joomla-modal-dialog section.jviewport-height100{height:100vh}joomla-modal .joomla-modal-dialog section[class*=jviewport-height],joomla-modal .joomla-modal-dialog section[class^=jviewport-height]{max-height:none}joomla-modal .joomla-modal-dialog footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:.929rem 1.714rem 1.714rem 1.714rem}joomla-modal .joomla-modal-dialog footer .modal-footer-left-text{flex-grow:1;text-align:left;color:var(--secondary-color)}joomla-modal .joomla-modal-dialog footer .btn{margin-left:10px}joomla-modal.bordered header{border-bottom:2px solid #ecedf0;padding-bottom:1.714rem}joomla-modal.bordered footer{border-top:2px solid #ecedf0;padding-top:1.714rem}joomla-modal.bordered .joomla-modal-dialog section{padding-top:1.143rem;padding-bottom:1.143rem}joomla-modal.scrollable .joomla-modal-dialog section{max-height:320px;overflow:auto}joomla-modal.jviewport-width10 .joomla-modal-dialog{max-width:10vw}joomla-modal.jviewport-width20 .joomla-modal-dialog{max-width:20vw}joomla-modal.jviewport-width30 .joomla-modal-dialog{max-width:30vw}joomla-modal.jviewport-width40 .joomla-modal-dialog{max-width:40vw}joomla-modal.jviewport-width50 .joomla-modal-dialog{max-width:50vw}joomla-modal.jviewport-width60 .joomla-modal-dialog{max-width:60vw}joomla-modal.jviewport-width70 .joomla-modal-dialog{max-width:70vw}joomla-modal.jviewport-width80 .joomla-modal-dialog{max-width:80vw}joomla-modal.jviewport-width90 .joomla-modal-dialog{max-width:90vw}joomla-modal.jviewport-width100 .joomla-modal-dialog{max-width:100vw}.modal-backdrop.show{opacity:1}.modal-backdrop.show.fade{opacity:0;transition:.3s}.modal-backdrop.show.fade.show{opacity:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:var(--overlay)} \ No newline at end of file diff --git a/dist/css/joomla-panels.css b/dist/css/joomla-panels.css index 1c51dfdd..5a512d59 100644 --- a/dist/css/joomla-panels.css +++ b/dist/css/joomla-panels.css @@ -1,3 +1,25 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-panels { display: flex; flex-direction: column; } diff --git a/dist/css/joomla-panels.min.css b/dist/css/joomla-panels.min.css index 31ac33fb..56e6a566 100644 --- a/dist/css/joomla-panels.min.css +++ b/dist/css/joomla-panels.min.css @@ -1 +1 @@ -joomla-panels{display:flex;flex-direction:column}joomla-panels>ul{display:flex;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;list-style:outside none none;background-color:#3073bb}joomla-panels>ul[role=tablist]{padding:0;margin:0}joomla-panels a[role=tab]{position:relative;display:block;padding:.75rem 1rem .85rem;color:#fff;text-decoration:none}joomla-panels a[role=tab][active]{background-color:rgba(0,0,0,.2)}joomla-panels a[role=tab][active]::after{position:absolute;right:0;bottom:-1px;left:0;height:5px;content:"";background-color:rgba(0,0,0,.2);opacity:.8}joomla-panels>section{display:none;padding:15px 0;background-color:#fefefe}joomla-panels>section[active]{display:block}joomla-panels[orientation=vertical]{flex-direction:row;align-items:flex-start}joomla-panels[orientation=vertical]>ul{flex-direction:column;min-width:30%;height:auto;overflow:hidden}joomla-panels[orientation=vertical] li:last-of-type a{border-bottom:0}joomla-panels[orientation=vertical] a{position:relative;display:block;padding:.75rem 1rem .85rem;color:#fff;text-decoration:none}joomla-panels[orientation=vertical] a[active]{background-color:#fff;background-image:none;border-right:0 none;border-left:0 none;box-shadow:none}joomla-panels[orientation=vertical] a[active]::after{top:0;bottom:0;left:-1px;width:5px;height:auto}joomla-panels[orientation=vertical]>section{padding:15px 0;border:0 none;box-shadow:none}joomla-panels[view=accordion]>ul{flex-direction:column;white-space:normal}joomla-panels[view=accordion] section{display:none;padding:15px 0}joomla-panels[view=accordion] section[active]{display:block}joomla-panels[view=accordion] [active]{background-color:#fff}joomla-panels[view=accordion] a[role=tab][active]::after{top:0;left:0;width:5px;height:100%}joomla-panels[type=primary] a[role=tab][active]::after{background-color:#006898}joomla-panels[type=secondary] a[role=tab][active]::after{background-color:#6c757d}joomla-panels[type=success] a[role=tab][active]::after{background-color:#438243}joomla-panels[type=info] a[role=tab][active]::after{background-color:#17a2b8}joomla-panels[type=warning] a[role=tab][active]::after{background-color:#f0ad4e}joomla-panels[type=danger] a[role=tab][active]::after{background-color:#d9534f}joomla-panels[type=light] a[role=tab][active]::after{background-color:#f8f9fa}joomla-panels[type=dark] a[role=tab][active]::after{background-color:#343a40} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-panels{display:flex;flex-direction:column}joomla-panels>ul{display:flex;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;list-style:outside none none;background-color:#3073bb}joomla-panels>ul[role=tablist]{padding:0;margin:0}joomla-panels a[role=tab]{position:relative;display:block;padding:.75rem 1rem .85rem;color:#fff;text-decoration:none}joomla-panels a[role=tab][active]{background-color:rgba(0,0,0,.2)}joomla-panels a[role=tab][active]::after{position:absolute;right:0;bottom:-1px;left:0;height:5px;content:"";background-color:rgba(0,0,0,.2);opacity:.8}joomla-panels>section{display:none;padding:15px 0;background-color:#fefefe}joomla-panels>section[active]{display:block}joomla-panels[orientation=vertical]{flex-direction:row;align-items:flex-start}joomla-panels[orientation=vertical]>ul{flex-direction:column;min-width:30%;height:auto;overflow:hidden}joomla-panels[orientation=vertical] li:last-of-type a{border-bottom:0}joomla-panels[orientation=vertical] a{position:relative;display:block;padding:.75rem 1rem .85rem;color:#fff;text-decoration:none}joomla-panels[orientation=vertical] a[active]{background-color:#fff;background-image:none;border-right:0 none;border-left:0 none;box-shadow:none}joomla-panels[orientation=vertical] a[active]::after{top:0;bottom:0;left:-1px;width:5px;height:auto}joomla-panels[orientation=vertical]>section{padding:15px 0;border:0 none;box-shadow:none}joomla-panels[view=accordion]>ul{flex-direction:column;white-space:normal}joomla-panels[view=accordion] section{display:none;padding:15px 0}joomla-panels[view=accordion] section[active]{display:block}joomla-panels[view=accordion] [active]{background-color:#fff}joomla-panels[view=accordion] a[role=tab][active]::after{top:0;left:0;width:5px;height:100%}joomla-panels[type=primary] a[role=tab][active]::after{background-color:#006898}joomla-panels[type=secondary] a[role=tab][active]::after{background-color:#6c757d}joomla-panels[type=success] a[role=tab][active]::after{background-color:#438243}joomla-panels[type=info] a[role=tab][active]::after{background-color:#17a2b8}joomla-panels[type=warning] a[role=tab][active]::after{background-color:#f0ad4e}joomla-panels[type=danger] a[role=tab][active]::after{background-color:#d9534f}joomla-panels[type=light] a[role=tab][active]::after{background-color:#f8f9fa}joomla-panels[type=dark] a[role=tab][active]::after{background-color:#343a40} \ No newline at end of file diff --git a/dist/css/joomla-tab.css b/dist/css/joomla-tab.css index 75ffd5f1..dd755ae1 100644 --- a/dist/css/joomla-tab.css +++ b/dist/css/joomla-tab.css @@ -1,58 +1,103 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-tab { display: flex; flex-direction: column; } joomla-tab > ul { display: flex; - background-color: #f5f5f5; - border-color: #ccc #ccc currentcolor; - border-image: none; - border-radius: .25rem .25rem 0 0; - border-style: solid solid none; - border-width: 1px 1px 0; - box-shadow: 0 1px #fff inset, 0 2px 3px -3px rgba(0, 0, 0, 0.15), 0 -4px 0 rgba(0, 0, 0, 0.05) inset, 0 0 3px rgba(0, 0, 0, 0.04); margin: 0; padding: 0; - list-style: outside none none; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; } + list-style: none; + white-space: nowrap; + position: relative; + z-index: 1; } joomla-tab a[role=tab] { display: block; - color: #0d1321; + color: var(--secondary-color); padding: .75em 1em; position: relative; - box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05); text-decoration: none; } joomla-tab a[role=tab][active] { - background-color: rgba(0, 0, 0, 0.03); - background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%); - border-left: 0 none; - border-right: 0 none; - border-top-left-radius: 0; - border-top-right-radius: 0; - box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset; } + color: var(--color); } -joomla-tab a[role=tab][active]:after { - background-color: #006898; +joomla-tab a[role=tab]:after { + background-color: var(--primary-gradient-color); bottom: -1px; content: ""; - height: 5px; + height: 4px; left: 0; - opacity: .8; position: absolute; - right: 0; } + right: 0; + opacity: 0; + visibility: hidden; + transition: .35s; + border-top-left-radius: 2px; + border-top-right-radius: 2px; } + +joomla-tab a[role=tab][active]:hover:after { + background-color: var(--primary-gradient-color); } + +joomla-tab a[role=tab]:hover:after, +joomla-tab a[role=tab][active]:after { + opacity: 1; + visibility: visible; } + +joomla-tab a[role=tab]:hover { + color: var(--color); } + +joomla-tab a[role=tab]:hover:after { + background-color: var(--secondary-icon-color); } + +joomla-tab a[role=tab]:focus { + outline: none; } + +joomla-tab a[role=tab]:focus { + outline: var(--primary-color) solid 2px; } + joomla-tab a[role=tab]:focus::after { + opacity: 0; + visibility: hidden; } + +joomla-tab a[disabled=true]:hover, +joomla-tab a[disabled=true] { + color: var(--secondary-icon-color); } + joomla-tab a[disabled=true]:hover::before, joomla-tab a[disabled=true]:hover::after, + joomla-tab a[disabled=true]::before, + joomla-tab a[disabled=true]::after { + display: none; } + joomla-tab a[disabled=true]:hover:active, + joomla-tab a[disabled=true]:active { + outline: none; } joomla-tab > section { position: relative; display: none; - background-color: #fefefe; - border: 1px solid #ccc; - border-radius: 0 0 .25rem .25rem; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.04); - padding: 15px; } + padding: 15px; + border-radius: 3px; + box-shadow: 0 1px 1px 0 rgba(94, 114, 124, 0.05), 0 1px 0 0 rgba(94, 114, 124, 0.03); + border: solid 1px var(--secondary-icon-color); } joomla-tab > section[active] { display: block; } @@ -65,47 +110,47 @@ joomla-tab[orientation=vertical] > ul { flex-direction: column; min-width: 30%; height: auto; - border: 1px solid #ccc; - border-radius: .25rem; - box-shadow: none; - overflow: hidden; } + border-left: 1px solid var(--secondary-icon-color); } -joomla-tab[orientation=vertical] li:last-of-type a { - border-bottom: 0; } +joomla-tab[orientation=vertical] a[disabled=true]:hover, +joomla-tab[orientation=vertical] a[disabled=true] { + color: var(--secondary-icon-color); } joomla-tab[orientation=vertical] a { display: block; - color: #0d1321; - padding: .75em 1em; + color: var(--secondary-color); + padding: .45rem 1rem; position: relative; - border-bottom: 1px solid #ddd; + border-top: 1px solid var(--background); box-shadow: none; text-decoration: none; } +joomla-tab[orientation=vertical] a[role=tab]:after { + right: auto; + border-radius: 0; } + +joomla-tab[orientation=vertical] a:hover { + color: var(--secondary-color); } + joomla-tab[orientation=vertical] a[active] { - border-left: 0 none; - border-right: 0 none; - background-color: #fff; - background-image: none; - box-shadow: none; } + box-shadow: 0 4px 8px -3px rgba(29, 36, 39, 0.2); + color: var(--color); + font-weight: 500; } + +joomla-tab[orientation=vertical] a[role=tab]:active { + outline: none; } joomla-tab[orientation=vertical] a[active]:after { - left: -1px; - width: 5px; + left: 0; + width: 3px; height: auto; top: 0; bottom: 0; } -joomla-tab[orientation=vertical] > section { - border: 0 none; - box-shadow: none; - padding: 15px; } - joomla-tab[view=accordion] > ul { flex-direction: column; - border-radius: .25rem; - white-space: normal; - box-shadow: 0 1px #fff inset, 0 0 3px rgba(0, 0, 0, 0.04); } + border-radius: 0; + white-space: normal; } joomla-tab[view=accordion] section { display: none; @@ -113,16 +158,29 @@ joomla-tab[view=accordion] section { joomla-tab[view=accordion] section[active] { display: block; - border-bottom: 1px solid #ddd; } - -joomla-tab[view=accordion] [active] { - background-color: #fff; } + border-bottom: 1px solid var(--background); } joomla-tab[view=accordion] a[role=tab] { - border-bottom: 1px solid #ddd; } + border-bottom: 1px solid var(--background); } joomla-tab[view=accordion] a[role=tab][active]:after { - width: 5px; - height: 100%; + display: none; } + +joomla-tab[view=accordion] a[role=tab][active]::before { + content: ""; + background-color: var(--primary-color); + width: 3px; + position: absolute; top: 0; - left: 0; } + left: 0; + bottom: -1px; } + +html[dir=rtl] joomla-tab[orientation=vertical] a[role=tab][active]::after, +body[dir=rtl] joomla-tab[orientation=vertical] a[role=tab][active]::after { + left: auto; + right: 0; } + +html[dir=rtl] joomla-tab[orientation=vertical] > ul, +body[dir=rtl] joomla-tab[orientation=vertical] > ul { + border-left: 0; + border-right: 1px solid var(--secondary-icon-color); } diff --git a/dist/css/joomla-tab.min.css b/dist/css/joomla-tab.min.css index 4d2585e4..893d8102 100644 --- a/dist/css/joomla-tab.min.css +++ b/dist/css/joomla-tab.min.css @@ -1 +1 @@ -joomla-tab{display:flex;flex-direction:column}joomla-tab>ul{display:flex;background-color:#f5f5f5;border-color:#ccc #ccc currentcolor;border-image:none;border-radius:.25rem .25rem 0 0;border-style:solid solid none;border-width:1px 1px 0;box-shadow:0 1px #fff inset,0 2px 3px -3px rgba(0,0,0,.15),0 -4px 0 rgba(0,0,0,.05) inset,0 0 3px rgba(0,0,0,.04);margin:0;padding:0;list-style:outside none none;overflow-x:auto;overflow-y:hidden;white-space:nowrap}joomla-tab a[role=tab]{display:block;color:#0d1321;padding:.75em 1em;position:relative;box-shadow:1px 0 0 rgba(0,0,0,.05);text-decoration:none}joomla-tab a[role=tab][active]{background-color:rgba(0,0,0,.03);background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.05) 100%);border-left:0 none;border-right:0 none;border-top-left-radius:0;border-top-right-radius:0;box-shadow:2px 0 1px -1px rgba(0,0,0,.08) inset,-2px 0 1px -1px rgba(0,0,0,.08) inset,0 1px 0 rgba(0,0,0,.02) inset}joomla-tab a[role=tab][active]:after{background-color:#006898;bottom:-1px;content:"";height:5px;left:0;opacity:.8;position:absolute;right:0}joomla-tab>section{position:relative;display:none;background-color:#fefefe;border:1px solid #ccc;border-radius:0 0 .25rem .25rem;box-shadow:0 0 3px rgba(0,0,0,.04);padding:15px}joomla-tab>section[active]{display:block}joomla-tab[orientation=vertical]{flex-direction:row;align-items:flex-start}joomla-tab[orientation=vertical]>ul{flex-direction:column;min-width:30%;height:auto;border:1px solid #ccc;border-radius:.25rem;box-shadow:none;overflow:hidden}joomla-tab[orientation=vertical] li:last-of-type a{border-bottom:0}joomla-tab[orientation=vertical] a{display:block;color:#0d1321;padding:.75em 1em;position:relative;border-bottom:1px solid #ddd;box-shadow:none;text-decoration:none}joomla-tab[orientation=vertical] a[active]{border-left:0 none;border-right:0 none;background-color:#fff;background-image:none;box-shadow:none}joomla-tab[orientation=vertical] a[active]:after{left:-1px;width:5px;height:auto;top:0;bottom:0}joomla-tab[orientation=vertical]>section{border:0 none;box-shadow:none;padding:15px}joomla-tab[view=accordion]>ul{flex-direction:column;border-radius:.25rem;white-space:normal;box-shadow:0 1px #fff inset,0 0 3px rgba(0,0,0,.04)}joomla-tab[view=accordion] section{display:none;padding:15px}joomla-tab[view=accordion] section[active]{display:block;border-bottom:1px solid #ddd}joomla-tab[view=accordion] [active]{background-color:#fff}joomla-tab[view=accordion] a[role=tab]{border-bottom:1px solid #ddd}joomla-tab[view=accordion] a[role=tab][active]:after{width:5px;height:100%;top:0;left:0} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-tab{display:flex;flex-direction:column}joomla-tab>ul{display:flex;margin:0;padding:0;list-style:none;white-space:nowrap;position:relative;z-index:1}joomla-tab a[role=tab]{display:block;color:var(--secondary-color);padding:.75em 1em;position:relative;text-decoration:none}joomla-tab a[role=tab][active]{color:var(--color)}joomla-tab a[role=tab]:after{background-color:var(--primary-gradient-color);bottom:-1px;content:"";height:4px;left:0;position:absolute;right:0;opacity:0;visibility:hidden;transition:.35s;border-top-left-radius:2px;border-top-right-radius:2px}joomla-tab a[role=tab][active]:hover:after{background-color:var(--primary-gradient-color)}joomla-tab a[role=tab]:hover:after,joomla-tab a[role=tab][active]:after{opacity:1;visibility:visible}joomla-tab a[role=tab]:hover{color:var(--color)}joomla-tab a[role=tab]:hover:after{background-color:var(--secondary-icon-color)}joomla-tab a[role=tab]:focus{outline:0}joomla-tab a[role=tab]:focus{outline:var(--primary-color) solid 2px}joomla-tab a[role=tab]:focus::after{opacity:0;visibility:hidden}joomla-tab a[disabled=true],joomla-tab a[disabled=true]:hover{color:var(--secondary-icon-color)}joomla-tab a[disabled=true]::after,joomla-tab a[disabled=true]::before,joomla-tab a[disabled=true]:hover::after,joomla-tab a[disabled=true]:hover::before{display:none}joomla-tab a[disabled=true]:active,joomla-tab a[disabled=true]:hover:active{outline:0}joomla-tab>section{position:relative;display:none;padding:15px;border-radius:3px;box-shadow:0 1px 1px 0 rgba(94,114,124,.05),0 1px 0 0 rgba(94,114,124,.03);border:solid 1px var(--secondary-icon-color)}joomla-tab>section[active]{display:block}joomla-tab[orientation=vertical]{flex-direction:row;align-items:flex-start}joomla-tab[orientation=vertical]>ul{flex-direction:column;min-width:30%;height:auto;border-left:1px solid var(--secondary-icon-color)}joomla-tab[orientation=vertical] a[disabled=true],joomla-tab[orientation=vertical] a[disabled=true]:hover{color:var(--secondary-icon-color)}joomla-tab[orientation=vertical] a{display:block;color:var(--secondary-color);padding:.45rem 1rem;position:relative;border-top:1px solid var(--background);box-shadow:none;text-decoration:none}joomla-tab[orientation=vertical] a[role=tab]:after{right:auto;border-radius:0}joomla-tab[orientation=vertical] a:hover{color:var(--secondary-color)}joomla-tab[orientation=vertical] a[active]{box-shadow:0 4px 8px -3px rgba(29,36,39,.2);color:var(--color);font-weight:500}joomla-tab[orientation=vertical] a[role=tab]:active{outline:0}joomla-tab[orientation=vertical] a[active]:after{left:0;width:3px;height:auto;top:0;bottom:0}joomla-tab[view=accordion]>ul{flex-direction:column;border-radius:0;white-space:normal}joomla-tab[view=accordion] section{display:none;padding:15px}joomla-tab[view=accordion] section[active]{display:block;border-bottom:1px solid var(--background)}joomla-tab[view=accordion] a[role=tab]{border-bottom:1px solid var(--background)}joomla-tab[view=accordion] a[role=tab][active]:after{display:none}joomla-tab[view=accordion] a[role=tab][active]::before{content:"";background-color:var(--primary-color);width:3px;position:absolute;top:0;left:0;bottom:-1px}body[dir=rtl] joomla-tab[orientation=vertical] a[role=tab][active]::after,html[dir=rtl] joomla-tab[orientation=vertical] a[role=tab][active]::after{left:auto;right:0}body[dir=rtl] joomla-tab[orientation=vertical]>ul,html[dir=rtl] joomla-tab[orientation=vertical]>ul{border-left:0;border-right:1px solid var(--secondary-icon-color)} \ No newline at end of file diff --git a/dist/css/joomla-tip.css b/dist/css/joomla-tip.css index 28cd19e2..b3ce8ec0 100644 --- a/dist/css/joomla-tip.css +++ b/dist/css/joomla-tip.css @@ -1,6 +1,39 @@ +:root { + --background: #f4f7fc; + --inverse-background: #1d2427; + --color: #252732; + --white: #ffffff; + --color-rgb: 37, 39, 50; + --inverse-color: #ffffff; + --secondary-color: #5e727c; + --icon-color: #808f94; + --secondary-icon-color: #bdc5c8; + --button-background: #e5f2ff; + --cancel-button-background: #f0f3f8; + --disabled-button-background: #eaeaea; + --link-color: #0184ff; + --link-color-light-rgb: 229, 242, 255; + --primary-color: #0184ff; + --primary-gradient-color: #198df8; + --success-color: #7ac143; + --warning-color: #f9a541; + --danger-color: #f44321; + --overlay: rgba(23, 23, 23, 0.5); } + joomla-tip { position: relative; display: inline-block; } + joomla-tip[mode=light] .toggletip-bubble { + background: #fff; + color: #222; } + joomla-tip[mode=light] .toggletip-bubble.top::after { + border-color: #fff transparent transparent; } + joomla-tip[mode=light] .toggletip-bubble.left::after { + border-color: transparent transparent transparent #fff; } + joomla-tip[mode=light] .toggletip-bubble.right::after { + border-color: transparent #fff transparent transparent; } + joomla-tip[mode=light] .toggletip-bubble.bottom::after { + border-color: transparent transparent #fff; } joomla-tip button { width: 1.6rem; height: 1.6rem; diff --git a/dist/css/joomla-tip.min.css b/dist/css/joomla-tip.min.css index c51b339a..9838f08f 100644 --- a/dist/css/joomla-tip.min.css +++ b/dist/css/joomla-tip.min.css @@ -1 +1 @@ -joomla-tip{position:relative;display:inline-block}joomla-tip button{width:1.6rem;height:1.6rem;font-family:serif;font-size:1.4rem;font-weight:700;line-height:1.4rem;color:#fff;background:#1c3d5c;border:0;border-radius:50%}joomla-tip .toggletip-bubble{position:absolute;z-index:1040;display:inline-block;width:14rem;padding:.5rem .8rem;font-size:.9rem;line-height:1.2rem;color:#fff;background:#222;border-radius:.25rem;box-shadow:0 0 5px rgba(0,0,0,.4);transition:all ease-in;animation-duration:.3s}joomla-tip .toggletip-bubble::after{position:absolute;top:.6rem;right:100%;width:0;height:0;content:"";border-style:solid}joomla-tip .toggletip-bubble.top{bottom:100%;left:50%;margin-bottom:.6rem;transform:translate(-50%,0);animation-name:toggletip-fadeInTop}joomla-tip .toggletip-bubble.top::after{top:100%;bottom:auto;left:50%;border-color:#222 transparent transparent;border-width:6px 6px 0;transform:translateX(-50%)}joomla-tip .toggletip-bubble.left{top:50%;right:100%;margin-right:.6rem;transform:translate(0,-50%);animation-name:toggletip-fadeInLeft}joomla-tip .toggletip-bubble.left::after{top:50%;bottom:auto;left:100%;border-color:transparent transparent transparent #222;border-width:6px 0 6px 6px;transform:translateY(-50%)}joomla-tip .toggletip-bubble.right{top:50%;left:100%;margin-left:.6rem;transform:translate(0,-50%);animation-name:toggletip-fadeInRight}joomla-tip .toggletip-bubble.right::after{top:50%;right:100%;bottom:auto;border-color:transparent #222 transparent transparent;border-width:6px 6px 6px 0;transform:translateY(-50%)}joomla-tip .toggletip-bubble.bottom{top:100%;left:50%;margin-top:.6rem;transform:translate(-50%,0);animation-name:toggletip-fadeInBottom}joomla-tip .toggletip-bubble.bottom::after{top:-6px;left:50%;border-color:transparent transparent #222;border-width:0 6px 6px;transform:translateX(-50%)}@keyframes toggletip-fadeInRight{from{opacity:0;transform:translate(-10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}@keyframes toggletip-fadeInLeft{from{opacity:0;transform:translate(10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}@keyframes toggletip-fadeInTop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes toggletip-fadeInBottom{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} \ No newline at end of file +:root{--background:#f4f7fc;--inverse-background:#1d2427;--color:#252732;--white:#ffffff;--color-rgb:37,39,50;--inverse-color:#ffffff;--secondary-color:#5e727c;--icon-color:#808f94;--secondary-icon-color:#bdc5c8;--button-background:#e5f2ff;--cancel-button-background:#f0f3f8;--disabled-button-background:#eaeaea;--link-color:#0184ff;--link-color-light-rgb:229,242,255;--primary-color:#0184ff;--primary-gradient-color:#198df8;--success-color:#7ac143;--warning-color:#f9a541;--danger-color:#f44321;--overlay:rgba(23, 23, 23, 0.5)}joomla-tip{position:relative;display:inline-block}joomla-tip[mode=light] .toggletip-bubble{background:#fff;color:#222}joomla-tip[mode=light] .toggletip-bubble.top::after{border-color:#fff transparent transparent}joomla-tip[mode=light] .toggletip-bubble.left::after{border-color:transparent transparent transparent #fff}joomla-tip[mode=light] .toggletip-bubble.right::after{border-color:transparent #fff transparent transparent}joomla-tip[mode=light] .toggletip-bubble.bottom::after{border-color:transparent transparent #fff}joomla-tip button{width:1.6rem;height:1.6rem;font-family:serif;font-size:1.4rem;font-weight:700;line-height:1.4rem;color:#fff;background:#1c3d5c;border:0;border-radius:50%}joomla-tip .toggletip-bubble{position:absolute;z-index:1040;display:inline-block;width:14rem;padding:.5rem .8rem;font-size:.9rem;line-height:1.2rem;color:#fff;background:#222;border-radius:.25rem;box-shadow:0 0 5px rgba(0,0,0,.4);transition:all ease-in;animation-duration:.3s}joomla-tip .toggletip-bubble::after{position:absolute;top:.6rem;right:100%;width:0;height:0;content:"";border-style:solid}joomla-tip .toggletip-bubble.top{bottom:100%;left:50%;margin-bottom:.6rem;transform:translate(-50%,0);animation-name:toggletip-fadeInTop}joomla-tip .toggletip-bubble.top::after{top:100%;bottom:auto;left:50%;border-color:#222 transparent transparent;border-width:6px 6px 0;transform:translateX(-50%)}joomla-tip .toggletip-bubble.left{top:50%;right:100%;margin-right:.6rem;transform:translate(0,-50%);animation-name:toggletip-fadeInLeft}joomla-tip .toggletip-bubble.left::after{top:50%;bottom:auto;left:100%;border-color:transparent transparent transparent #222;border-width:6px 0 6px 6px;transform:translateY(-50%)}joomla-tip .toggletip-bubble.right{top:50%;left:100%;margin-left:.6rem;transform:translate(0,-50%);animation-name:toggletip-fadeInRight}joomla-tip .toggletip-bubble.right::after{top:50%;right:100%;bottom:auto;border-color:transparent #222 transparent transparent;border-width:6px 6px 6px 0;transform:translateY(-50%)}joomla-tip .toggletip-bubble.bottom{top:100%;left:50%;margin-top:.6rem;transform:translate(-50%,0);animation-name:toggletip-fadeInBottom}joomla-tip .toggletip-bubble.bottom::after{top:-6px;left:50%;border-color:transparent transparent #222;border-width:0 6px 6px;transform:translateX(-50%)}@keyframes toggletip-fadeInRight{from{opacity:0;transform:translate(-10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}@keyframes toggletip-fadeInLeft{from{opacity:0;transform:translate(10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}@keyframes toggletip-fadeInTop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes toggletip-fadeInBottom{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} \ No newline at end of file diff --git a/dist/js/joomla-alert-es5.js b/dist/js/joomla-alert-es5.js index ff043972..e50777cb 100644 --- a/dist/js/joomla-alert-es5.js +++ b/dist/js/joomla-alert-es5.js @@ -173,13 +173,18 @@ function _getPrototypeOf(o) { value: function connectedCallback() { this.classList.add('joomla-alert--show'); // Default to info - if (!this.type || ['info', 'warning', 'danger', 'success'].indexOf(this.type) === -1) { + if (!this.type || ['info', 'warning', 'danger', 'success', 'default'].indexOf(this.type) === -1) { this.setAttribute('type', 'info'); } // Default to alert if (!this.role || ['alert', 'alertdialog'].indexOf(this.role) === -1) { this.setAttribute('role', 'alert'); + } // Check if its collapsable + + + if (this.hasAttribute('collapse') && this.getAttribute('collapse') !== '' && this.getAttribute('collapse') !== 'false' && !this.querySelector('.joomla-alert--collapse-header') && this.querySelector('.joomla-alert--collapse')) { + this.appendCollapseContainer(); } // Append button @@ -213,7 +218,7 @@ function _getPrototypeOf(o) { value: function attributeChangedCallback(attr, oldValue, newValue) { switch (attr) { case 'type': - if (!newValue || newValue && ['info', 'warning', 'danger', 'success'].indexOf(newValue) === -1) { + if (!newValue || newValue && ['info', 'warning', 'danger', 'success', 'default'].indexOf(newValue) === -1) { this.type = 'info'; } @@ -226,6 +231,15 @@ function _getPrototypeOf(o) { break; + case 'collapse': + if (!newValue || newValue === 'true') { + this.appendCollapseContainer(); + } else { + this.removeCollapseContainer(); + } + + break; + case 'dismiss': case 'acknowledge': if (!newValue || newValue === 'true') { @@ -297,7 +311,7 @@ function _getPrototypeOf(o) { if (this.hasAttribute('dismiss')) { closeButton.classList.add('joomla-alert--close'); - closeButton.innerHTML = ''; + closeButton.innerHTML = ''; closeButton.setAttribute('aria-label', this.getText('JCLOSE', 'Close')); } else { closeButton.classList.add('joomla-alert-button--close'); @@ -359,14 +373,65 @@ function _getPrototypeOf(o) { }, { key: "removeCloseButton", value: function removeCloseButton() { - var button = this.querySelector('button'); + var button = this.querySelector('button.joomla-alert-button--close'); + + if (button === null) { + button = this.querySelector('button.joomla-alert--close'); + } if (button) { button.removeEventListener('click', this); button.parentNode.removeChild(button); } } + }, { + key: "appendCollapseContainer", + value: function appendCollapseContainer() { + if (this.querySelector('.joomla-alert--collapse') === null || this.querySelector('.joomla-alert--collapse-header') !== null) { + return; + } + + var collapseBox = this.querySelector('.joomla-alert--collapse'); + var collapseContainer = document.createElement('div'); + collapseContainer.classList.add('joomla-alert--collapse-container'); + collapseBox.parentNode.insertBefore(collapseContainer, collapseBox); + collapseContainer.append(this.querySelector('.joomla-alert--collapse')); + var collapseHeader = document.createElement('div'); + collapseHeader.classList.add('joomla-alert--collapse-header'); + collapseHeader.setAttribute('area-expanded', 'false'); + var collapseHeaderTitle = this.getAttribute('collapse-title') === null ? this.getAttribute('type') : this.getAttribute('collapse-title'); + collapseHeader.innerHTML = collapseHeaderTitle; + var chevronIcon = document.createElement('button'); + chevronIcon.classList.add('joomla-alert--collapse-icon'); + chevronIcon.innerHTML = '^'; + collapseHeader.append(chevronIcon); + collapseContainer.prepend(collapseHeader); + chevronIcon.addEventListener('click', function () { + if (collapseBox.classList.contains('show')) { + collapseBox.classList.remove('show'); + collapseHeader.setAttribute('area-expanded', 'false'); + } else { + collapseBox.classList.add('show'); + collapseHeader.setAttribute('area-expanded', 'true'); + } + }); + } + }, { + key: "removeCollapseContainer", + value: function removeCollapseContainer() { + if (this.querySelector('.joomla-alert--collapse-container') === null) { + return; + } + + var collapseContainer = this.querySelector('.joomla-alert--collapse-container'); + var collapseBox = collapseContainer.querySelector('.joomla-alert--collapse'); + collapseContainer.removeChild(collapseContainer.querySelector('.joomla-alert--collapse-header')); + collapseContainer.parentNode.insertBefore(collapseBox, collapseContainer); + this.removeChild(collapseContainer); + collapseBox.classList.remove('joomla-alert--collapse'); + } /* Method to get the translated text */ + // eslint-disable-next-line class-methods-use-this }, { key: "getText", @@ -417,7 +482,7 @@ function _getPrototypeOf(o) { /* Attributes to monitor */ get: function get() { - return ['type', 'role', 'dismiss', 'acknowledge', 'href']; + return ['type', 'role', 'dismiss', 'acknowledge', 'href', 'collapse']; } }]); diff --git a/dist/js/joomla-alert-es5.min.js b/dist/js/joomla-alert-es5.min.js index 1d2d1183..9c39fbc2 100644 --- a/dist/js/joomla-alert-es5.min.js +++ b/dist/js/joomla-alert-es5.min.js @@ -1 +1 @@ -!function(){return function t(e,o,n){function r(s,u){if(!o[s]){if(!e[s]){var a="function"==typeof require&&require;if(!u&&a)return a(s,!0);if(i)return i(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var c=o[s]={exports:{}};e[s][0].call(c.exports,function(t){return r(e[s][1][t]||t)},c,c.exports,t,e,o,n)}return o[s].exports}for(var i="function"==typeof require&&require,s=0;s0&&void 0!==arguments[0]?arguments[0]:null;this.dispatchCustomEvent("joomla.alert.close"),this.addEventListener("transitionend",function(){t.dispatchCustomEvent("joomla.alert.closed"),e?e.parentNode.removeChild(e):t.remove()},!1),this.classList.remove("joomla-alert--show")}},{key:"dispatchCustomEvent",value:function(t){var e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}},{key:"appendCloseButton",value:function(){if(!this.querySelector("button.joomla-alert--close")&&!this.querySelector("button.joomla-alert-button--close")){var t=this,e=document.createElement("button");this.hasAttribute("dismiss")?(e.classList.add("joomla-alert--close"),e.innerHTML='',e.setAttribute("aria-label",this.getText("JCLOSE","Close"))):(e.classList.add("joomla-alert-button--close"),this.hasAttribute("acknowledge")?e.innerHTML=this.getText("JOK","ok"):e.innerHTML=this.getText("JOPEN","Open")),this.firstChild?this.insertBefore(e,this.firstChild):this.appendChild(e),e&&(this.href?e.addEventListener("click",function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),window.location.href=t.href,t.close()}):e.addEventListener("click",function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.getAttribute("data-callback")?(window[t.getAttribute("data-callback")](),t.close()):t.close()}))}}},{key:"autoDismiss",value:function(){var t=this;setTimeout(function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.hasAttribute("data-callback")?window[t.getAttribute("data-callback")]():t.close(t)},parseInt(t.getAttribute("auto-dismiss"),10)?t.getAttribute("auto-dismiss"):3e3)}},{key:"removeCloseButton",value:function(){var t=this.querySelector("button");t&&(t.removeEventListener("click",this),t.parentNode.removeChild(t))}},{key:"getText",value:function(t,e){return window.Joomla&&Joomla.JText&&Joomla.JText._&&"function"==typeof Joomla.JText._&&Joomla.JText._(t)?Joomla.JText._(t):e}},{key:"type",get:function(){return this.getAttribute("type")},set:function(t){return this.setAttribute("type",t)}},{key:"role",get:function(){return this.getAttribute("role")},set:function(t){return this.setAttribute("role",t)}},{key:"dismiss",get:function(){return this.getAttribute("dismiss")}},{key:"autodismiss",get:function(){return this.getAttribute("auto-dismiss")}},{key:"acknowledge",get:function(){return this.getAttribute("acknowledge")}},{key:"href",get:function(){return this.getAttribute("href")}}])&&i(o.prototype,n),r&&i(o,r),e}(),customElements.define("joomla-alert",f)},{}]},{},[1]); \ No newline at end of file +!function(){return function t(e,o,r){function n(s,a){if(!o[s]){if(!e[s]){var l="function"==typeof require&&require;if(!a&&l)return l(s,!0);if(i)return i(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var c=o[s]={exports:{}};e[s][0].call(c.exports,function(t){return n(e[s][1][t]||t)},c,c.exports,t,e,o,r)}return o[s].exports}for(var i="function"==typeof require&&require,s=0;s0&&void 0!==arguments[0]?arguments[0]:null;this.dispatchCustomEvent("joomla.alert.close"),this.addEventListener("transitionend",function(){t.dispatchCustomEvent("joomla.alert.closed"),e?e.parentNode.removeChild(e):t.remove()},!1),this.classList.remove("joomla-alert--show")}},{key:"dispatchCustomEvent",value:function(t){var e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}},{key:"appendCloseButton",value:function(){if(!this.querySelector("button.joomla-alert--close")&&!this.querySelector("button.joomla-alert-button--close")){var t=this,e=document.createElement("button");this.hasAttribute("dismiss")?(e.classList.add("joomla-alert--close"),e.innerHTML='',e.setAttribute("aria-label",this.getText("JCLOSE","Close"))):(e.classList.add("joomla-alert-button--close"),this.hasAttribute("acknowledge")?e.innerHTML=this.getText("JOK","ok"):e.innerHTML=this.getText("JOPEN","Open")),this.firstChild?this.insertBefore(e,this.firstChild):this.appendChild(e),e&&(this.href?e.addEventListener("click",function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),window.location.href=t.href,t.close()}):e.addEventListener("click",function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.getAttribute("data-callback")?(window[t.getAttribute("data-callback")](),t.close()):t.close()}))}}},{key:"autoDismiss",value:function(){var t=this;setTimeout(function(){t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.hasAttribute("data-callback")?window[t.getAttribute("data-callback")]():t.close(t)},parseInt(t.getAttribute("auto-dismiss"),10)?t.getAttribute("auto-dismiss"):3e3)}},{key:"removeCloseButton",value:function(){var t=this.querySelector("button.joomla-alert-button--close");null===t&&(t=this.querySelector("button.joomla-alert--close")),t&&(t.removeEventListener("click",this),t.parentNode.removeChild(t))}},{key:"appendCollapseContainer",value:function(){if(null!==this.querySelector(".joomla-alert--collapse")&&null===this.querySelector(".joomla-alert--collapse-header")){var t=this.querySelector(".joomla-alert--collapse"),e=document.createElement("div");e.classList.add("joomla-alert--collapse-container"),t.parentNode.insertBefore(e,t),e.append(this.querySelector(".joomla-alert--collapse"));var o=document.createElement("div");o.classList.add("joomla-alert--collapse-header"),o.setAttribute("area-expanded","false");var r=null===this.getAttribute("collapse-title")?this.getAttribute("type"):this.getAttribute("collapse-title");o.innerHTML=r;var n=document.createElement("button");n.classList.add("joomla-alert--collapse-icon"),n.innerHTML="^",o.append(n),e.prepend(o),n.addEventListener("click",function(){t.classList.contains("show")?(t.classList.remove("show"),o.setAttribute("area-expanded","false")):(t.classList.add("show"),o.setAttribute("area-expanded","true"))})}}},{key:"removeCollapseContainer",value:function(){if(null!==this.querySelector(".joomla-alert--collapse-container")){var t=this.querySelector(".joomla-alert--collapse-container"),e=t.querySelector(".joomla-alert--collapse");t.removeChild(t.querySelector(".joomla-alert--collapse-header")),t.parentNode.insertBefore(e,t),this.removeChild(t),e.classList.remove("joomla-alert--collapse")}}},{key:"getText",value:function(t,e){return window.Joomla&&Joomla.JText&&Joomla.JText._&&"function"==typeof Joomla.JText._&&Joomla.JText._(t)?Joomla.JText._(t):e}},{key:"type",get:function(){return this.getAttribute("type")},set:function(t){return this.setAttribute("type",t)}},{key:"role",get:function(){return this.getAttribute("role")},set:function(t){return this.setAttribute("role",t)}},{key:"dismiss",get:function(){return this.getAttribute("dismiss")}},{key:"autodismiss",get:function(){return this.getAttribute("auto-dismiss")}},{key:"acknowledge",get:function(){return this.getAttribute("acknowledge")}},{key:"href",get:function(){return this.getAttribute("href")}}])&&i(o.prototype,r),n&&i(o,n),e}(),customElements.define("joomla-alert",h)},{}]},{},[1]); \ No newline at end of file diff --git a/dist/js/joomla-alert.js b/dist/js/joomla-alert.js index 09840b08..4c36e445 100644 --- a/dist/js/joomla-alert.js +++ b/dist/js/joomla-alert.js @@ -1,7 +1,7 @@ (() => { class JoomlaAlertElement extends HTMLElement { /* Attributes to monitor */ - static get observedAttributes() { return ['type', 'role', 'dismiss', 'acknowledge', 'href']; } + static get observedAttributes() { return ['type', 'role', 'dismiss', 'acknowledge', 'href', 'collapse']; } get type() { return this.getAttribute('type'); } @@ -24,16 +24,21 @@ this.classList.add('joomla-alert--show'); // Default to info - if (!this.type || ['info', 'warning', 'danger', 'success'].indexOf(this.type) === -1) { + if (!this.type || ['info', 'warning', 'danger', 'success', 'default'].indexOf(this.type) === -1) { this.setAttribute('type', 'info'); } // Default to alert if (!this.role || ['alert', 'alertdialog'].indexOf(this.role) === -1) { this.setAttribute('role', 'alert'); } + // Check if its collapsable + if (this.hasAttribute('collapse') && this.getAttribute('collapse') !== '' && this.getAttribute('collapse') !== 'false' + && !this.querySelector('.joomla-alert--collapse-header') && this.querySelector('.joomla-alert--collapse')) { + this.appendCollapseContainer(); + } // Append button if ((this.hasAttribute('dismiss') || this.hasAttribute('acknowledge')) || ((this.hasAttribute('href') && this.getAttribute('href') !== '') - && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) { + && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) { this.appendCloseButton(); } @@ -59,7 +64,7 @@ attributeChangedCallback(attr, oldValue, newValue) { switch (attr) { case 'type': - if (!newValue || (newValue && ['info', 'warning', 'danger', 'success'].indexOf(newValue) === -1)) { + if (!newValue || (newValue && ['info', 'warning', 'danger', 'success', 'default'].indexOf(newValue) === -1)) { this.type = 'info'; } break; @@ -68,6 +73,13 @@ this.role = 'alert'; } break; + case 'collapse': + if (!newValue || newValue === 'true') { + this.appendCollapseContainer(); + } else { + this.removeCollapseContainer(); + } + break; case 'dismiss': case 'acknowledge': if (!newValue || newValue === 'true') { @@ -97,7 +109,7 @@ this.addEventListener('transitionend', () => { this.dispatchCustomEvent('joomla.alert.closed'); if (element) { - element.parentNode.removeChild(element) + element.parentNode.removeChild(element); } else { this.remove(); } @@ -118,13 +130,12 @@ if (this.querySelector('button.joomla-alert--close') || this.querySelector('button.joomla-alert-button--close')) { return; } - const self = this; const closeButton = document.createElement('button'); if (this.hasAttribute('dismiss')) { closeButton.classList.add('joomla-alert--close'); - closeButton.innerHTML = ''; + closeButton.innerHTML = ''; closeButton.setAttribute('aria-label', this.getText('JCLOSE', 'Close')); } else { closeButton.classList.add('joomla-alert-button--close'); @@ -178,14 +189,66 @@ /* Method to remove the close button */ removeCloseButton() { - const button = this.querySelector('button'); + let button = this.querySelector('button.joomla-alert-button--close'); + if (button === null) { + button = this.querySelector('button.joomla-alert--close'); + } if (button) { button.removeEventListener('click', this); - button.parentNode.removeChild(button) + button.parentNode.removeChild(button); + } + } + + appendCollapseContainer() { + if (this.querySelector('.joomla-alert--collapse') === null || this.querySelector('.joomla-alert--collapse-header') !== null) { + return; + } + const collapseBox = this.querySelector('.joomla-alert--collapse'); + + const collapseContainer = document.createElement('div'); + collapseContainer.classList.add('joomla-alert--collapse-container'); + collapseBox.parentNode.insertBefore(collapseContainer, collapseBox); + collapseContainer.append(this.querySelector('.joomla-alert--collapse')); + + + const collapseHeader = document.createElement('div'); + collapseHeader.classList.add('joomla-alert--collapse-header'); + collapseHeader.setAttribute('area-expanded', 'false'); + + const collapseHeaderTitle = this.getAttribute('collapse-title') === null ? this.getAttribute('type') : this.getAttribute('collapse-title'); + collapseHeader.innerHTML = collapseHeaderTitle; + + const chevronIcon = document.createElement('button'); + chevronIcon.classList.add('joomla-alert--collapse-icon'); + chevronIcon.innerHTML = '^'; + collapseHeader.append(chevronIcon); + collapseContainer.prepend(collapseHeader); + + chevronIcon.addEventListener('click', () => { + if (collapseBox.classList.contains('show')) { + collapseBox.classList.remove('show'); + collapseHeader.setAttribute('area-expanded', 'false'); + } else { + collapseBox.classList.add('show'); + collapseHeader.setAttribute('area-expanded', 'true'); + } + }); + } + + removeCollapseContainer() { + if (this.querySelector('.joomla-alert--collapse-container') === null) { + return; } + const collapseContainer = this.querySelector('.joomla-alert--collapse-container'); + const collapseBox = collapseContainer.querySelector('.joomla-alert--collapse'); + collapseContainer.removeChild(collapseContainer.querySelector('.joomla-alert--collapse-header')); + collapseContainer.parentNode.insertBefore(collapseBox, collapseContainer); + this.removeChild(collapseContainer); + collapseBox.classList.remove('joomla-alert--collapse'); } /* Method to get the translated text */ + // eslint-disable-next-line class-methods-use-this getText(str, fallback) { // TODO: Remove coupling to Joomla CMS Core JS here /* eslint-disable-next-line no-undef */ diff --git a/dist/js/joomla-alert.min.js b/dist/js/joomla-alert.min.js index cee69a99..d40f5c65 100644 --- a/dist/js/joomla-alert.min.js +++ b/dist/js/joomla-alert.min.js @@ -1 +1 @@ -(()=>{customElements.define("joomla-alert",class extends HTMLElement{static get observedAttributes(){return["type","role","dismiss","acknowledge","href"]}get type(){return this.getAttribute("type")}set type(t){return this.setAttribute("type",t)}get role(){return this.getAttribute("role")}set role(t){return this.setAttribute("role",t)}get dismiss(){return this.getAttribute("dismiss")}get autodismiss(){return this.getAttribute("auto-dismiss")}get acknowledge(){return this.getAttribute("acknowledge")}get href(){return this.getAttribute("href")}connectedCallback(){this.classList.add("joomla-alert--show"),this.type&&-1!==["info","warning","danger","success"].indexOf(this.type)||this.setAttribute("type","info"),this.role&&-1!==["alert","alertdialog"].indexOf(this.role)||this.setAttribute("role","alert"),(this.hasAttribute("dismiss")||this.hasAttribute("acknowledge")||this.hasAttribute("href")&&""!==this.getAttribute("href")&&!this.querySelector("button.joomla-alert--close")&&!this.querySelector("button.joomla-alert-button--close"))&&this.appendCloseButton(),this.hasAttribute("auto-dismiss")&&this.autoDismiss(),this.dispatchCustomEvent("joomla.alert.show")}disconnectedCallback(){this.removeEventListener("joomla.alert.show",this),this.removeEventListener("joomla.alert.close",this),this.removeEventListener("joomla.alert.closed",this),this.firstChild.tagName&&"button"===this.firstChild.tagName.toLowerCase()&&this.firstChild.removeEventListener("click",this)}attributeChangedCallback(t,e,s){switch(t){case"type":(!s||s&&-1===["info","warning","danger","success"].indexOf(s))&&(this.type="info");break;case"role":(!s||s&&-1===["alert","alertdialog"].indexOf(s))&&(this.role="alert");break;case"dismiss":case"acknowledge":s&&"true"!==s?this.removeCloseButton():this.appendCloseButton();break;case"auto-dismiss":this.autoDismiss();break;case"href":s&&""!==s?this.querySelector("button.joomla-alert-button--close")||this.appendCloseButton():this.removeCloseButton()}}close(t=null){this.dispatchCustomEvent("joomla.alert.close"),this.addEventListener("transitionend",()=>{this.dispatchCustomEvent("joomla.alert.closed"),t?t.parentNode.removeChild(t):this.remove()},!1),this.classList.remove("joomla-alert--show")}dispatchCustomEvent(t){const e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}appendCloseButton(){if(this.querySelector("button.joomla-alert--close")||this.querySelector("button.joomla-alert-button--close"))return;const t=this,e=document.createElement("button");this.hasAttribute("dismiss")?(e.classList.add("joomla-alert--close"),e.innerHTML='',e.setAttribute("aria-label",this.getText("JCLOSE","Close"))):(e.classList.add("joomla-alert-button--close"),this.hasAttribute("acknowledge")?e.innerHTML=this.getText("JOK","ok"):e.innerHTML=this.getText("JOPEN","Open")),this.firstChild?this.insertBefore(e,this.firstChild):this.appendChild(e),e&&(this.href?e.addEventListener("click",()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),window.location.href=t.href,t.close()}):e.addEventListener("click",()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.getAttribute("data-callback")?(window[t.getAttribute("data-callback")](),t.close()):t.close()}))}autoDismiss(){const t=this;setTimeout(()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.hasAttribute("data-callback")?window[t.getAttribute("data-callback")]():t.close(t)},parseInt(t.getAttribute("auto-dismiss"),10)?t.getAttribute("auto-dismiss"):3e3)}removeCloseButton(){const t=this.querySelector("button");t&&(t.removeEventListener("click",this),t.parentNode.removeChild(t))}getText(t,e){return window.Joomla&&Joomla.JText&&Joomla.JText._&&"function"==typeof Joomla.JText._&&Joomla.JText._(t)?Joomla.JText._(t):e}})})(); \ No newline at end of file +(()=>{customElements.define("joomla-alert",class extends HTMLElement{static get observedAttributes(){return["type","role","dismiss","acknowledge","href","collapse"]}get type(){return this.getAttribute("type")}set type(t){return this.setAttribute("type",t)}get role(){return this.getAttribute("role")}set role(t){return this.setAttribute("role",t)}get dismiss(){return this.getAttribute("dismiss")}get autodismiss(){return this.getAttribute("auto-dismiss")}get acknowledge(){return this.getAttribute("acknowledge")}get href(){return this.getAttribute("href")}connectedCallback(){this.classList.add("joomla-alert--show"),this.type&&-1!==["info","warning","danger","success","default"].indexOf(this.type)||this.setAttribute("type","info"),this.role&&-1!==["alert","alertdialog"].indexOf(this.role)||this.setAttribute("role","alert"),this.hasAttribute("collapse")&&""!==this.getAttribute("collapse")&&"false"!==this.getAttribute("collapse")&&!this.querySelector(".joomla-alert--collapse-header")&&this.querySelector(".joomla-alert--collapse")&&this.appendCollapseContainer(),(this.hasAttribute("dismiss")||this.hasAttribute("acknowledge")||this.hasAttribute("href")&&""!==this.getAttribute("href")&&!this.querySelector("button.joomla-alert--close")&&!this.querySelector("button.joomla-alert-button--close"))&&this.appendCloseButton(),this.hasAttribute("auto-dismiss")&&this.autoDismiss(),this.dispatchCustomEvent("joomla.alert.show")}disconnectedCallback(){this.removeEventListener("joomla.alert.show",this),this.removeEventListener("joomla.alert.close",this),this.removeEventListener("joomla.alert.closed",this),this.firstChild.tagName&&"button"===this.firstChild.tagName.toLowerCase()&&this.firstChild.removeEventListener("click",this)}attributeChangedCallback(t,e,s){switch(t){case"type":(!s||s&&-1===["info","warning","danger","success","default"].indexOf(s))&&(this.type="info");break;case"role":(!s||s&&-1===["alert","alertdialog"].indexOf(s))&&(this.role="alert");break;case"collapse":s&&"true"!==s?this.removeCollapseContainer():this.appendCollapseContainer();break;case"dismiss":case"acknowledge":s&&"true"!==s?this.removeCloseButton():this.appendCloseButton();break;case"auto-dismiss":this.autoDismiss();break;case"href":s&&""!==s?this.querySelector("button.joomla-alert-button--close")||this.appendCloseButton():this.removeCloseButton()}}close(t=null){this.dispatchCustomEvent("joomla.alert.close"),this.addEventListener("transitionend",()=>{this.dispatchCustomEvent("joomla.alert.closed"),t?t.parentNode.removeChild(t):this.remove()},!1),this.classList.remove("joomla-alert--show")}dispatchCustomEvent(t){const e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}appendCloseButton(){if(this.querySelector("button.joomla-alert--close")||this.querySelector("button.joomla-alert-button--close"))return;const t=this,e=document.createElement("button");this.hasAttribute("dismiss")?(e.classList.add("joomla-alert--close"),e.innerHTML='',e.setAttribute("aria-label",this.getText("JCLOSE","Close"))):(e.classList.add("joomla-alert-button--close"),this.hasAttribute("acknowledge")?e.innerHTML=this.getText("JOK","ok"):e.innerHTML=this.getText("JOPEN","Open")),this.firstChild?this.insertBefore(e,this.firstChild):this.appendChild(e),e&&(this.href?e.addEventListener("click",()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),window.location.href=t.href,t.close()}):e.addEventListener("click",()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.getAttribute("data-callback")?(window[t.getAttribute("data-callback")](),t.close()):t.close()}))}autoDismiss(){const t=this;setTimeout(()=>{t.dispatchCustomEvent("joomla.alert.buttonClicked"),t.hasAttribute("data-callback")?window[t.getAttribute("data-callback")]():t.close(t)},parseInt(t.getAttribute("auto-dismiss"),10)?t.getAttribute("auto-dismiss"):3e3)}removeCloseButton(){let t=this.querySelector("button.joomla-alert-button--close");null===t&&(t=this.querySelector("button.joomla-alert--close")),t&&(t.removeEventListener("click",this),t.parentNode.removeChild(t))}appendCollapseContainer(){if(null===this.querySelector(".joomla-alert--collapse")||null!==this.querySelector(".joomla-alert--collapse-header"))return;const t=this.querySelector(".joomla-alert--collapse"),e=document.createElement("div");e.classList.add("joomla-alert--collapse-container"),t.parentNode.insertBefore(e,t),e.append(this.querySelector(".joomla-alert--collapse"));const s=document.createElement("div");s.classList.add("joomla-alert--collapse-header"),s.setAttribute("area-expanded","false");const o=null===this.getAttribute("collapse-title")?this.getAttribute("type"):this.getAttribute("collapse-title");s.innerHTML=o;const l=document.createElement("button");l.classList.add("joomla-alert--collapse-icon"),l.innerHTML="^",s.append(l),e.prepend(s),l.addEventListener("click",()=>{t.classList.contains("show")?(t.classList.remove("show"),s.setAttribute("area-expanded","false")):(t.classList.add("show"),s.setAttribute("area-expanded","true"))})}removeCollapseContainer(){if(null===this.querySelector(".joomla-alert--collapse-container"))return;const t=this.querySelector(".joomla-alert--collapse-container"),e=t.querySelector(".joomla-alert--collapse");t.removeChild(t.querySelector(".joomla-alert--collapse-header")),t.parentNode.insertBefore(e,t),this.removeChild(t),e.classList.remove("joomla-alert--collapse")}getText(t,e){return window.Joomla&&Joomla.JText&&Joomla.JText._&&"function"==typeof Joomla.JText._&&Joomla.JText._(t)?Joomla.JText._(t):e}})})(); \ No newline at end of file diff --git a/dist/js/joomla-collapse-es5.js b/dist/js/joomla-collapse-es5.js deleted file mode 100644 index e6760b28..00000000 --- a/dist/js/joomla-collapse-es5.js +++ /dev/null @@ -1,258 +0,0 @@ -(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i { - customElements.define('joomla-collapse', class extends HTMLElement { - static get observedAttributes() { - return ['state']; - } - - get state() { return this.getAttribute('state'); } - - set state(value) { return this.setAttribute('state', value); } - - connectedCallback() { - const self = this; - // id is required - if (!this.id) return; - - const linked = [].slice.call(document.querySelectorAll(`[href="#${this.id}"],[data-target="#${this.id}"]`)); - - linked.forEach((element) => { - if (!self.state || (self.state && self.state === 'closed')) { - self.state = 'closed'; - element.setAttribute('aria-expanded', 'false'); - element.setAttribute('aria-controls', self.id); - } else { - element.setAttribute('aria-expanded', 'true'); - element.setAttribute('aria-controls', self.id); - } - - element.addEventListener('click', (event) => { - let colId = ''; - if (!event.target.hasAttribute('data-target')) colId = event.target.getAttribute('href').replace('#', ''); - if (!event.target.hasAttribute('href')) colId = event.target.getAttribute('data-target').replace('#', ''); - event.preventDefault(); - event.stopPropagation(); - document.getElementById(colId).toggle(); - }); - }); - } - - disconnectedCallback() { - let linked = document.querySelector(`[href="#${this.id}"]`); - if (!linked) linked = document.querySelector(`[data-target="#${this.id}"]`); - if (linked) { - linked.removeEventListener('click', this); - } - } - - attributeChangedCallback(attr, oldValue, newValue) { - const linked = document.querySelector(`[href="#${this.id}"]`); - switch (attr) { - case 'state': - if (newValue === 'closed') { - linked.setAttribute('aria-expanded', 'false'); - } else if (newValue === 'open') { - linked.setAttribute('aria-expanded', 'true'); - } - break; - default: - break; - } - } - - toggle() { - let linked = document.querySelector(`[href="#${this.id}"]`); - if (!linked) linked = document.querySelector(`[data-target="#${this.id}"]`); - if (this.state === 'closed') { - this.state = 'open'; - linked.setAttribute('aria-expanded', 'true'); - } else { - this.state = 'closed'; - linked.setAttribute('aria-expanded', 'false'); - } - } - }); -})(); diff --git a/dist/js/joomla-collapse.min.js b/dist/js/joomla-collapse.min.js deleted file mode 100644 index 91538717..00000000 --- a/dist/js/joomla-collapse.min.js +++ /dev/null @@ -1 +0,0 @@ -customElements.define("joomla-collapse",class extends HTMLElement{static get observedAttributes(){return["state"]}get state(){return this.getAttribute("state")}set state(t){return this.setAttribute("state",t)}connectedCallback(){const t=this;this.id&&[].slice.call(document.querySelectorAll(`[href="#${this.id}"],[data-target="#${this.id}"]`)).forEach(e=>{!t.state||t.state&&"closed"===t.state?(t.state="closed",e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",t.id)):(e.setAttribute("aria-expanded","true"),e.setAttribute("aria-controls",t.id)),e.addEventListener("click",t=>{let e="";t.target.hasAttribute("data-target")||(e=t.target.getAttribute("href").replace("#","")),t.target.hasAttribute("href")||(e=t.target.getAttribute("data-target").replace("#","")),t.preventDefault(),t.stopPropagation(),document.getElementById(e).toggle()})})}disconnectedCallback(){let t=document.querySelector(`[href="#${this.id}"]`);t||(t=document.querySelector(`[data-target="#${this.id}"]`)),t&&t.removeEventListener("click",this)}attributeChangedCallback(t,e,a){const r=document.querySelector(`[href="#${this.id}"]`);switch(t){case"state":"closed"===a?r.setAttribute("aria-expanded","false"):"open"===a&&r.setAttribute("aria-expanded","true")}}toggle(){let t=document.querySelector(`[href="#${this.id}"]`);t||(t=document.querySelector(`[data-target="#${this.id}"]`)),"closed"===this.state?(this.state="open",t.setAttribute("aria-expanded","true")):(this.state="closed",t.setAttribute("aria-expanded","false"))}}); \ No newline at end of file diff --git a/dist/js/joomla-dropdown-es5.js b/dist/js/joomla-dropdown-es5.js index 0f92cc46..d09c82ed 100644 --- a/dist/js/joomla-dropdown-es5.js +++ b/dist/js/joomla-dropdown-es5.js @@ -153,6 +153,8 @@ function _getPrototypeOf(o) { }; return _getPrototypeOf(o); } +/* eslint-disable no-cond-assign */ + (function () { var JoomlaDropdownElement = @@ -161,55 +163,199 @@ function _getPrototypeOf(o) { _inherits(JoomlaDropdownElement, _HTMLElement); function JoomlaDropdownElement() { + var _this; + _classCallCheck(this, JoomlaDropdownElement); - return _possibleConstructorReturn(this, _getPrototypeOf(JoomlaDropdownElement).apply(this, arguments)); + _this = _possibleConstructorReturn(this, _getPrototypeOf(JoomlaDropdownElement).call(this)); + _this.position = 'right'; + _this.checkSubmenu = _this.checkSubmenu.bind(_assertThisInitialized(_this)); + _this.clickOutside = _this.clickOutside.bind(_assertThisInitialized(_this)); + _this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this)); + return _this; } + /* Attributes to monitor */ + _createClass(JoomlaDropdownElement, [{ key: "connectedCallback", value: function connectedCallback() { - var _this = this; + var _this2 = this; this.setAttribute('aria-labelledby', this["for"].substring(1)); - var button = document.querySelector(this["for"]); + this.button = document.querySelector("[data-target=".concat(this["for"], "]")); var innerLinks = this.querySelectorAll('a'); - if (!button.id) { + if (!this.button.hasAttribute('data-target')) { return; - } // var children = [].slice.call( menu[getElementsByTagName]('*')); - // this.classList.add('dropdown'); + } + + this.position = this.getAttribute('position') ? this.getAttribute('position') : this.position; // set the position for submenu items + + innerLinks.forEach(function (link) { + if (link.parentElement.classList.contains('has-submenu')) { + link.parentElement.classList.add(_this2.position); + } + }); + this.button.setAttribute('aria-haspopup', true); + this.button.setAttribute('aria-expanded', false); + this.button.addEventListener('click', this.toggleMenu, true); + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + this.button.removeEventListener('click', this.toggleMenu, true); + } + /** + * Hide or Show menu when click on target element + * @param {Object} event + */ + }, { + key: "toggleMenu", + value: function toggleMenu(event) { + var _this3 = this; - button.setAttribute('aria-haspopup', true); - button.setAttribute('aria-expanded', false); - button.addEventListener('click', function (event) { - if (_this.hasAttribute('expanded')) { - _this.removeAttribute('expanded'); + if (event.target.tagName === 'A') { + event.preventDefault(); + } - event.target.setAttribute('aria-expanded', false); - } else { - _this.setAttribute('expanded', ''); + if (this.hasAttribute('expanded')) { + this.removeAttribute('expanded'); + event.target.setAttribute('aria-expanded', false); + } else { + this.setAttribute('expanded', ''); + event.target.setAttribute('aria-expanded', true); + } - event.target.setAttribute('aria-expanded', true); + this.setPosition(); + document.addEventListener('click', this.clickOutside, true); + var innerLinks = this.querySelectorAll('a'); + innerLinks.forEach(function (innerLink) { + innerLink.addEventListener('click', _this3.checkSubmenu, true); + }); // toggle dropdown onhover + + var lists = this.querySelectorAll('li.has-submenu'); + lists.forEach(function (list) { + if (list.getAttribute('data-action') !== 'click' && document.body.getBoundingClientRect().width > 1024) { + list.addEventListener('mouseenter', _this3.showSubmenu, true); + list.addEventListener('mouseleave', _this3.hideSubmenu, true); } + }); + } + /** + * Show sub-menu when trigger on parent link + * @param {Object} event + */ + + }, { + key: "showSubmenu", + value: function showSubmenu(event) { + event.preventDefault(); + + if (document.body.getBoundingClientRect().width > 1024) { + if (event.target.classList.contains('has-submenu')) { + event.target.toggleAttribute('open'); + } + } + } + /** + * Hide sub-menu + * @param {Obejct} event + */ - document.addEventListener('click', function (evt) { - if (evt.target !== button) { - if (!_this.findAncestor(evt.target, 'joomla-dropdown')) { - _this.close(); - } + }, { + key: "hideSubmenu", + value: function hideSubmenu(event) { + event.preventDefault(); + + if (document.body.getBoundingClientRect().width > 1024) { + if (event.target.classList.contains('has-submenu') && event.target.hasAttribute('open')) { + event.target.toggleAttribute('open'); + } + } + } + /** + * Check if click outside of dropdown + * If click outside then close dropdown + * @param {Object} event + */ + + }, { + key: "clickOutside", + value: function clickOutside(event) { + if (this.button.contains(event.target) === false && event.target !== this.button) { + if (!this.findAncestor(event.target, 'joomla-dropdown')) { + this.close(); + } + } + } + /** + * Check if dropdown has sub-menu + * @param {Object} event + */ + + }, { + key: "checkSubmenu", + value: function checkSubmenu(event) { + // check for drop-down items + var hasSubmenu = event.target.parentElement.classList.contains('has-submenu'); + var clickable = event.target.parentElement.getAttribute('data-action') === 'click'; + + if (hasSubmenu && (clickable || document.body.getBoundingClientRect().width <= 1024)) { + var allDropdowns = this.querySelectorAll('.has-submenu'); + allDropdowns.forEach(function (dropdown) { + if (dropdown.hasAttribute('open') && dropdown !== event.target.parentElement) { + dropdown.toggleAttribute('open'); } }); - innerLinks.forEach(function (innerLink) { - innerLink.addEventListener('click', function () { - _this.close(); - }); - }); - }); + event.target.parentElement.toggleAttribute('open'); + } else { + this.close(); + } + } + /** + * Check if the attribute changed + * If position change then update the position + * @param {String} attr + * @param {String} oldValue + * @param {String} newValue + */ + + }, { + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldValue, newValue) { + switch (attr) { + case 'position': + if (!newValue || newValue === '') { + this.position = newValue; + this.setPosition(); + } + + break; + + default: + break; + } } - /*eslint-disable */ + /** + * Check dropdown position only for left and right + * If current position not satisfied then move it to oposite + */ + }, { + key: "setPosition", + value: function setPosition() { + var dropdownRect = this.getBoundingClientRect(); + var button = document.querySelector("[data-target=".concat(this["for"], "]")); + var buttonRect = button.getBoundingClientRect(); + + if (this.position === 'left' && dropdownRect.width + buttonRect.width > dropdownRect.right) { + this.setAttribute('position', 'left'); + } else if (this.position === 'right' && buttonRect.right + dropdownRect.width > window.innerWidth) { + this.setAttribute('position', 'right'); + } + } /* Method to dispatch events */ }, { @@ -220,36 +366,37 @@ function _getPrototypeOf(o) { this.dispatchEvent(OriginalCustomEvent); this.removeEventListener(eventName, this); } - }, { - key: "adoptedCallback", - value: function adoptedCallback(oldDocument, newDocument) {} - }, { - key: "attributeChangedCallback", - value: function attributeChangedCallback(attr, oldValue, newValue) { - switch (attr) {} - } - /* eslint-enable */ + /** + * Close the dropdown + */ }, { key: "close", value: function close() { - var button = document.querySelector("#".concat(this.getAttribute('aria-labelledby'))); + // removing 'open' attribute of dropdown items + var dropdownItems = document.querySelectorAll('.has-submenu'); + dropdownItems.forEach(function (item) { + if (item.hasAttribute('open')) { + item.toggleAttribute('open'); + } + }); + var button = document.querySelector("[data-target=".concat(this.getAttribute('aria-labelledby'), "]")); this.removeAttribute('expanded'); - button.setAttribute('aria-expanded', false); - } - /* eslint-disable */ + if (button) button.setAttribute('aria-expanded', false); // remove unnecessary events when dropdown closed + window.removeEventListener('click', this.checkSubmenu, true); + document.removeEventListener('click', this.clickOutside, true); + } }, { key: "findAncestor", value: function findAncestor(el, tagName) { + // eslint-disable-next-line no-param-reassign while ((el = el.parentElement) && el.nodeName.toLowerCase() !== tagName) { ; } return el; } - /* eslint-enable */ - }, { key: "for", get: function get() { @@ -260,10 +407,8 @@ function _getPrototypeOf(o) { } }], [{ key: "observedAttributes", - - /* Attributes to monitor */ get: function get() { - return ['for']; + return ['for', 'position']; } }]); diff --git a/dist/js/joomla-dropdown-es5.min.js b/dist/js/joomla-dropdown-es5.min.js deleted file mode 100644 index cc93afae..00000000 --- a/dist/js/joomla-dropdown-es5.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(){return function t(e,n,r){function o(i,c){if(!n[i]){if(!e[i]){var a="function"==typeof require&&require;if(!c&&a)return a(i,!0);if(u)return u(i,!0);var f=new Error("Cannot find module '"+i+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[i]={exports:{}};e[i][0].call(l.exports,function(t){return o(e[i][1][t]||t)},l,l.exports,t,e,n,r)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i { - class JoomlaDropdownElement extends HTMLElement { - /* Attributes to monitor */ - static get observedAttributes() { - return ['for']; - } - - get for() { return this.getAttribute('for'); } - - set for(value) { return this.setAttribute('for', value); } - - connectedCallback() { - this.setAttribute('aria-labelledby', this.for.substring(1)); - const button = document.querySelector(this.for); - const innerLinks = this.querySelectorAll('a'); - - if (!button.id) { - return; - } - // var children = [].slice.call( menu[getElementsByTagName]('*')); - // this.classList.add('dropdown'); - - button.setAttribute('aria-haspopup', true); - button.setAttribute('aria-expanded', false); - - button.addEventListener('click', (event) => { - if (this.hasAttribute('expanded')) { - this.removeAttribute('expanded'); - event.target.setAttribute('aria-expanded', false); - } else { - this.setAttribute('expanded', ''); - event.target.setAttribute('aria-expanded', true); - } - - document.addEventListener('click', (evt) => { - if (evt.target !== button) { - if (!this.findAncestor(evt.target, 'joomla-dropdown')) { - this.close(); - } - } - }); - - innerLinks.forEach((innerLink) => { - innerLink.addEventListener('click', () => { - this.close(); - }); - }); - }); - } - - /*eslint-disable */ - /* Method to dispatch events */ - dispatchCustomEvent(eventName) { - const OriginalCustomEvent = new CustomEvent(eventName); - OriginalCustomEvent.relatedTarget = this; - this.dispatchEvent(OriginalCustomEvent); - this.removeEventListener(eventName, this); - } - - adoptedCallback(oldDocument, newDocument) { } - - - attributeChangedCallback(attr, oldValue, newValue) { - switch (attr) { - // case 'name': - // console.log(newValue); - // break; - } - } - /* eslint-enable */ - - close() { - const button = document.querySelector(`#${this.getAttribute('aria-labelledby')}`); - this.removeAttribute('expanded'); - button.setAttribute('aria-expanded', false); - } - - /* eslint-disable */ - findAncestor(el, tagName) { - while ((el = el.parentElement) && el.nodeName.toLowerCase() !== tagName); - return el; - } - /* eslint-enable */ - } - - customElements.define('joomla-dropdown', JoomlaDropdownElement); -})(); diff --git a/dist/js/joomla-dropdown.min.js b/dist/js/joomla-dropdown.min.js deleted file mode 100644 index 265045fe..00000000 --- a/dist/js/joomla-dropdown.min.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{customElements.define("joomla-dropdown",class extends HTMLElement{static get observedAttributes(){return["for"]}get for(){return this.getAttribute("for")}set for(t){return this.setAttribute("for",t)}connectedCallback(){this.setAttribute("aria-labelledby",this.for.substring(1));const t=document.querySelector(this.for),e=this.querySelectorAll("a");t.id&&(t.setAttribute("aria-haspopup",!0),t.setAttribute("aria-expanded",!1),t.addEventListener("click",r=>{this.hasAttribute("expanded")?(this.removeAttribute("expanded"),r.target.setAttribute("aria-expanded",!1)):(this.setAttribute("expanded",""),r.target.setAttribute("aria-expanded",!0)),document.addEventListener("click",e=>{e.target!==t&&(this.findAncestor(e.target,"joomla-dropdown")||this.close())}),e.forEach(t=>{t.addEventListener("click",()=>{this.close()})})}))}dispatchCustomEvent(t){const e=new CustomEvent(t);e.relatedTarget=this,this.dispatchEvent(e),this.removeEventListener(t,this)}adoptedCallback(t,e){}attributeChangedCallback(t,e,r){}close(){const t=document.querySelector(`#${this.getAttribute("aria-labelledby")}`);this.removeAttribute("expanded"),t.setAttribute("aria-expanded",!1)}findAncestor(t,e){for(;(t=t.parentElement)&&t.nodeName.toLowerCase()!==e;);return t}})})(); \ No newline at end of file diff --git a/dist/js/joomla-modal-es5.js b/dist/js/joomla-modal-es5.js deleted file mode 100644 index 27df1c8c..00000000 --- a/dist/js/joomla-modal-es5.js +++ /dev/null @@ -1,414 +0,0 @@ -(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i maxModalBodyHeight) { - this.container.style.maxHeight = maxModalBodyHeight; - this.container.style.overflowY = 'auto'; - this.iframeEl.style.maxHeight = maxModalBodyHeight - modalBodyPadding; - } - } else if (modalHeight > maxModalHeight) { - this.container.style.maxHeight = maxModalBodyHeight; - this.container.style.overflowY = 'auto'; - } - } - /* eslint-disable */ - - }, { - key: "findAncestorByClass", - value: function findAncestorByClass(el, className) { - while ((el = el.parentElement) && !el.classList.contains(className)) { - ; - } - - return el; - } - /* eslint-enable */ - - }], [{ - key: "observedAttributes", - get: function get() { - return ['width', 'height', 'innerWidth', 'innerHeight', 'iframe']; - } - }]); - - return _class; - }(_wrapNativeSuper(HTMLElement))); -})(); - -},{}]},{},[1]); diff --git a/dist/js/joomla-modal-es5.min.js b/dist/js/joomla-modal-es5.min.js deleted file mode 100644 index 10653e9e..00000000 --- a/dist/js/joomla-modal-es5.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(){return function e(t,i,r){function n(s,a){if(!i[s]){if(!t[s]){var l="function"==typeof require&&require;if(!a&&l)return l(s,!0);if(o)return o(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var u=i[s]={exports:{}};t[s][0].call(u.exports,function(e){return n(t[s][1][e]||e)},u,u.exports,e,t,i,r)}return i[s].exports}for(var o="function"==typeof require&&require,s=0;s