joomla-projects · sahidhossen · Sep 3, 2019 · Sep 3, 2019 · Sep 3, 2019 · Sep 3, 2019
diff --git a/.gitignore b/.gitignore
@@ -7,7 +7,10 @@
 .idea
 .vscode
 .log
+index*.html
 
 node_modules/
 bower_components/
 !dist/
+/docs/_media/
+/dist/
diff --git 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
@@ -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;
-      box-shadow: 0px 0px 0px 2px #198df8;
+      box-shadow: 0 0 0 2px #198df8;
-      box-shadow: 0px 0px 0px 2px #198df8;
+      box-shadow: 0 0 0 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
diff --git 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; }