add dialogs

alex-oleshkevich · Apr 2, 2024 · b0e1c82 · b0e1c82
1 parent 3220196
commit b0e1c82
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 12 deletions.
diff --git a/assets/css/vesna/accordion.css b/assets/css/vesna/accordion.css
@@ -0,0 +1,41 @@
+:root {
+    --o-accordion-border-width: 0px;
+    --o-accordion-border-color: var(--o-border-color);
+    --o-accordion-padding: 0.75rem;
+    --o-accordion-background: transparent;
+    --o-accordion-radius: var(--o-radius);
+}
+
+details, .accordion {
+    display: block;
+    background: var(--o-accordion-background);
+    cursor: pointer;
+    border-radius: var(--o-accordion-radius);
+    overflow: hidden;
+    border: var(--o-accordion-border-width) solid var(--o-accordion-border-color);
+}
+
+details summary, .accordion-trigger {
+    font-weight: 600;
+    line-height: 1.5rem;
+    padding: var(--o-accordion-padding);
+
+    &:hover {
+        background: var(--o-button-secondary-background-hover);
+    }
+}
+
+details.bordered, .accordion-bordered {
+    --o-accordion-border-width: 1px;
+}
+
+.accordion-stack {
+    --o-accordion-border-width: 1px;
+    border-radius: var(--o-accordion-radius);
+    overflow: auto;
+}
+
+.accordion-stack > *:not(:last-child) {
+    --o-accordion-radius: 0;
+    border-bottom-width: 0;
+}
diff --git a/assets/css/vesna/all.css b/assets/css/vesna/all.css
@@ -1,3 +1,4 @@
+@import "accordion.css";
 @import "alerts.css";
 @import "avatars.css";
 @import "breadcrumbs.css";

diff --git a/assets/css/vesna/close.css b/assets/css/vesna/close.css
@@ -1,8 +1,14 @@
+:root {
+    --o-close-icon: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M16.854 16.1462C16.9005 16.1926 16.9373 16.2478 16.9625 16.3085C16.9876 16.3692 17.0006 16.4342 17.0006 16.4999C17.0006 16.5656 16.9876 16.6307 16.9625 16.6914C16.9373 16.7521 16.9005 16.8072 16.854 16.8537C16.8076 16.9001 16.7524 16.937 16.6917 16.9621C16.631 16.9873 16.566 17.0002 16.5003 17.0002C16.4346 17.0002 16.3695 16.9873 16.3088 16.9621C16.2481 16.937 16.193 16.9001 16.1465 16.8537L12.0003 12.7068L7.85403 16.8537C7.76021 16.9475 7.63296 17.0002 7.50028 17.0002C7.3676 17.0002 7.24035 16.9475 7.14653 16.8537C7.05271 16.7598 7 16.6326 7 16.4999C7 16.3672 7.05271 16.24 7.14653 16.1462L11.2934 11.9999L7.14653 7.85366C7.05271 7.75984 7 7.63259 7 7.49991C7 7.36723 7.05271 7.23998 7.14653 7.14616C7.24035 7.05234 7.3676 6.99963 7.50028 6.99963C7.63296 6.99963 7.76021 7.05234 7.85403 7.14616L12.0003 11.293L16.1465 7.14616C16.2403 7.05234 16.3676 6.99963 16.5003 6.99963C16.633 6.99963 16.7602 7.05234 16.854 7.14616C16.9478 7.23998 17.0006 7.36723 17.0006 7.49991C17.0006 7.63259 16.9478 7.75984 16.854 7.85366L12.7072 11.9999L16.854 16.1462Z' fill='black' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
+    --o-close-icon-inverse: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M12.854 12.1462C12.9005 12.1926 12.9373 12.2478 12.9625 12.3085C12.9876 12.3692 13.0006 12.4342 13.0006 12.4999C13.0006 12.5656 12.9876 12.6307 12.9625 12.6914C12.9373 12.7521 12.9005 12.8072 12.854 12.8537C12.8076 12.9001 12.7524 12.937 12.6917 12.9621C12.631 12.9873 12.566 13.0002 12.5003 13.0002C12.4346 13.0002 12.3695 12.9873 12.3088 12.9621C12.2481 12.937 12.193 12.9001 12.1465 12.8537L8.00028 8.70679L3.85403 12.8537C3.76021 12.9475 3.63296 13.0002 3.50028 13.0002C3.3676 13.0002 3.24035 12.9475 3.14653 12.8537C3.05271 12.7598 3 12.6326 3 12.4999C3 12.3672 3.05271 12.24 3.14653 12.1462L7.2934 7.99991L3.14653 3.85366C3.05271 3.75984 3 3.63259 3 3.49991C3 3.36723 3.05271 3.23998 3.14653 3.14616C3.24035 3.05234 3.3676 2.99963 3.50028 2.99963C3.63296 2.99963 3.76021 3.05234 3.85403 3.14616L8.00028 7.29304L12.1465 3.14616C12.2403 3.05234 12.3676 2.99963 12.5003 2.99963C12.633 2.99963 12.7602 3.05234 12.854 3.14616C12.9478 3.23998 13.0006 3.36723 13.0006 3.49991C13.0006 3.63259 12.9478 3.75984 12.854 3.85366L8.70715 7.99991L12.854 12.1462Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
+    --o-close-padding: 0.625rem;
+}
+
 .btn-close {
     --bg-color: transparent;
     padding: var(--o-close-padding);
-    border-radius: var(--o-radius);
     background: var(--bg-color);
+    color: var(--o-icon-primary);
 
     &:hover {
         --bg-color: var(--o-button-secondary-background-hover);
@@ -17,7 +23,7 @@
     --o-close-icon: var(--o-close-icon-inverse);
 }
 
-.btn-close::before {
+.btn-close:empty::before {
     content: '';
     background-image: var(--o-close-icon);
     background-repeat: no-repeat;

diff --git a/assets/css/vesna/dialogs.css b/assets/css/vesna/dialogs.css
@@ -50,15 +50,10 @@ dialog::backdrop {
     }
 }
 
-.modal-close {
+.modal .btn-close {
     position: absolute;
     right: 0;
     top: 0;
-    padding: 1rem;
-
-    & svg {
-        color: var(--o-icon-primary);
-    }
 }
 
 .modal header, .modal.modal-header {

diff --git a/assets/css/vesna/theme.css b/assets/css/vesna/theme.css
@@ -128,10 +128,6 @@
     --o-text-lime:     var(--o-color-lime-600);
     --o-text-emerald:  var(--o-color-emerald-600);
     --o-text-indigo:   var(--o-color-indigo-600);
-
-    --o-close-icon: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M16.854 16.1462C16.9005 16.1926 16.9373 16.2478 16.9625 16.3085C16.9876 16.3692 17.0006 16.4342 17.0006 16.4999C17.0006 16.5656 16.9876 16.6307 16.9625 16.6914C16.9373 16.7521 16.9005 16.8072 16.854 16.8537C16.8076 16.9001 16.7524 16.937 16.6917 16.9621C16.631 16.9873 16.566 17.0002 16.5003 17.0002C16.4346 17.0002 16.3695 16.9873 16.3088 16.9621C16.2481 16.937 16.193 16.9001 16.1465 16.8537L12.0003 12.7068L7.85403 16.8537C7.76021 16.9475 7.63296 17.0002 7.50028 17.0002C7.3676 17.0002 7.24035 16.9475 7.14653 16.8537C7.05271 16.7598 7 16.6326 7 16.4999C7 16.3672 7.05271 16.24 7.14653 16.1462L11.2934 11.9999L7.14653 7.85366C7.05271 7.75984 7 7.63259 7 7.49991C7 7.36723 7.05271 7.23998 7.14653 7.14616C7.24035 7.05234 7.3676 6.99963 7.50028 6.99963C7.63296 6.99963 7.76021 7.05234 7.85403 7.14616L12.0003 11.293L16.1465 7.14616C16.2403 7.05234 16.3676 6.99963 16.5003 6.99963C16.633 6.99963 16.7602 7.05234 16.854 7.14616C16.9478 7.23998 17.0006 7.36723 17.0006 7.49991C17.0006 7.63259 16.9478 7.75984 16.854 7.85366L12.7072 11.9999L16.854 16.1462Z' fill='black' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
-    --o-close-icon-inverse: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M12.854 12.1462C12.9005 12.1926 12.9373 12.2478 12.9625 12.3085C12.9876 12.3692 13.0006 12.4342 13.0006 12.4999C13.0006 12.5656 12.9876 12.6307 12.9625 12.6914C12.9373 12.7521 12.9005 12.8072 12.854 12.8537C12.8076 12.9001 12.7524 12.937 12.6917 12.9621C12.631 12.9873 12.566 13.0002 12.5003 13.0002C12.4346 13.0002 12.3695 12.9873 12.3088 12.9621C12.2481 12.937 12.193 12.9001 12.1465 12.8537L8.00028 8.70679L3.85403 12.8537C3.76021 12.9475 3.63296 13.0002 3.50028 13.0002C3.3676 13.0002 3.24035 12.9475 3.14653 12.8537C3.05271 12.7598 3 12.6326 3 12.4999C3 12.3672 3.05271 12.24 3.14653 12.1462L7.2934 7.99991L3.14653 3.85366C3.05271 3.75984 3 3.63259 3 3.49991C3 3.36723 3.05271 3.23998 3.14653 3.14616C3.24035 3.05234 3.3676 2.99963 3.50028 2.99963C3.63296 2.99963 3.76021 3.05234 3.85403 3.14616L8.00028 7.29304L12.1465 3.14616C12.2403 3.05234 12.3676 2.99963 12.5003 2.99963C12.633 2.99963 12.7602 3.05234 12.854 3.14616C12.9478 3.23998 13.0006 3.36723 13.0006 3.49991C13.0006 3.63259 12.9478 3.75984 12.854 3.85366L8.70715 7.99991L12.854 12.1462Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
-    --o-close-padding: 0.25rem;
 }
 
 html, body {