feat(xlp-select-file): add background mode

davidenke · Oct 23, 2024 · c7544e0 · c7544e0
1 parent c62d4e7
commit c7544e0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/select-file/select-file.component.css b/src/components/select-file/select-file.component.css
@@ -10,8 +10,21 @@
   user-select: none;
 }
 
+:host([background]) {
+  background-color: color-mix(in srgb, #f4f4f4, transparent 15%);
+  pointer-events: none;
+  opacity: 0;
+}
+
+:host([background][dragged-over]) {
+  opacity: 1;
+}
+
 slot {
+  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 20px;
 
   flex-flow: row nowrap;
@@ -26,8 +39,15 @@ slot {
   --xlp-icon-size: 100px;
   font-variation-settings: 'wght' 150;
 
-  :host([dragged-over]) & {
+  :host(:not([background])[dragged-over]) & {
     border-color: #f4f4f4;
     color: #f4f4f4;
   }
+
+  :host([background]) & {
+    position: absolute;
+    inset: 10px;
+    color: #333;
+    border-color: #000;
+  }
 }
diff --git a/src/components/select-file/select-file.component.ts b/src/components/select-file/select-file.component.ts
@@ -11,6 +11,9 @@ export class SelectFile extends LitElement {
 
   #listeners: (() => void)[] = [];
 
+  @property({ type: Boolean, reflect: true })
+  background = false;
+
   @property({ type: Boolean, reflect: true, attribute: 'dragged-over' })
   draggedOver = false;