dialog wip

front/sass/_button.scss

@@ -10,6 +10,14 @@
   display: flex;
   align-items: center;
   gap: 4px;
+
+  &.secondary{
+    background: var(--secondary);
+  }
+  &.primary{
+    background: var(--primary);
+  }
+
   &:focus {
     filter: brightness(94%);
   }

front/sass/_dropdown.scss

@@ -1,5 +1,8 @@
 .dropdown {
   position: relative;
+  z-index: 20;
+  overflow: visible;
+
 }
 
 .dropdown-button > div {
@@ -15,7 +18,7 @@
   overflow: visible;
   position: absolute;
   border-radius: 12px;
-  z-index: 9;
+  z-index: 20;
   background: var(--background);
   filter: brightness(97%);
   transition: 600ms;

front/sass/_modal.scss

@@ -0,0 +1,35 @@
+//
+//:modal {
+//  background-color: beige;
+//  border: 2px solid burlywood;
+//  border-radius: 5px;
+//}
+body:has(dialog[open]) {
+  overflow: hidden;
+}
+dialog{
+  margin: 10px auto;
+  background-color: #fff;
+  padding: 34px;
+  border: none;
+  border-radius: 5px;
+  overflow: auto;
+  position: relative;
+
+  .close{
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+
+  .dialog-body{
+    width: fit-content;
+  }
+}
+
+
+
+dialog::backdrop {
+
+  backdrop-filter: blur(3px);
+}

front/sass/_preview.scss

@@ -0,0 +1,28 @@
+.preview-file{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--background);
+  border-radius: 12px;
+  .image{
+
+
+    display: flex;
+
+  }
+
+  .trash-action{
+    display: none;
+  }
+
+  &:hover{
+    filter: brightness(95%);
+    .trash-action{
+      display: block;
+    }
+  }
+}
+
+.sortable-ghost{
+  border: 2px dashed var(--primary);
+}

front/sass/_record-edit.scss

@@ -21,11 +21,17 @@
   align-items: center;
   gap: 10px;
   font-size: 14px;
+  position: relative;
+  z-index: 20;
+  padding: 10px;
+  border-radius: 12px;
+  background: var(--background);
+  filter: brightness(90%);
 }
 
 .editor-field {
   background: var(--background);
-  filter: brightness(98%);
+  filter: brightness(97%);
   padding: 18px;
   border-radius: 12px;
   margin: 6px 0;

front/sass/_table.scss

@@ -34,9 +34,9 @@
         overflow: hidden;
 
 
-        img{
-            width: 48px;
-        }
+        //img{
+        //    width: 48px;
+        //}
 
         .status{
             color:var(--accent);

front/sass/_toolbar.scss

@@ -4,6 +4,7 @@
     gap: 5px;
     justify-content: space-between;
 
+
     input.search{
         border-radius: 12px;
         background: var(--background);

front/sass/app.scss

@@ -151,6 +151,8 @@ $themes: (
 @import "./record-edit";
 @import "./tabs";
 @import "./switch";
+@import "./preview";
+@import "./modal";
 
 body {
     background-color: var(--background);