Create Modal component

webui/src/common/components/Modal/styles.sass

@@ -0,0 +1,80 @@
+.modal-overlay
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background: rgba(0, 0, 0, 0.5)
+  display: flex
+  align-items: center
+  justify-content: center
+  z-index: 1000
+  padding: 2rem
+  backdrop-filter: blur(4px)
+
+.modal
+  background: var(--bg-alt)
+  border-radius: var(--radius-lg)
+  border: 1px solid var(--border)
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2)
+  width: 100%
+  max-height: 90vh
+  overflow: hidden
+  display: flex
+  flex-direction: column
+  animation: modalIn 0.2s ease-out
+  
+  &--sm
+    max-width: 400px
+  
+  &--md
+    max-width: 500px
+  
+  &--lg
+    max-width: 700px
+  
+  &--xl
+    max-width: 900px
+
+.modal-header
+  display: flex
+  align-items: center
+  justify-content: space-between
+  padding: 1.5rem 1.5rem 0
+  flex-shrink: 0
+
+.modal-title
+  font-size: 1.3rem
+  font-weight: 600
+  color: var(--text)
+  margin: 0
+
+.modal-close
+  margin-left: auto
+
+.modal-content
+  padding: 1.5rem
+  overflow-y: auto
+  flex: 1
+
+@keyframes modalIn
+  from
+    opacity: 0
+    transform: scale(0.95) translateY(-10px)
+  to
+    opacity: 1
+    transform: scale(1) translateY(0)
+
+@media (max-width: 768px)
+  .modal-overlay
+    padding: 1rem
+  
+  .modal
+    max-width: none
+    margin: 0
+    
+  .modal-header
+    padding: 1rem 1rem 0
+    
+  .modal-content
+    padding: 1rem