first commit

2026-03-20 22:16:20 +01:00
commit 42a4ba3e9a
136 changed files with 10141 additions and 0 deletions
--- a/assets/scss/components/_form-container.scss
+++ b/assets/scss/components/_form-container.scss
@@ -0,0 +1,119 @@
+@use "../core/variables" as *;
+@use "../core/mixins" as *;
+
+// =============================================================
+// Formulaires
+// =============================================================
+// Convention retenue :
+//   - .form-container est un bloc métier-agnostique réutilisable
+//   - les utilitaires de layout vivent dans utilities/_inline.scss
+
+.form-container {
+    max-width: $layout-content-max-width;
+    margin: 0 auto;
+
+    &__panel {
+        background: $color-bg-white;
+        border: 1px solid $color-border;
+        border-radius: $radius-md;
+        padding: $spacing-lg;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+    }
+
+    &__header {
+        margin-bottom: $spacing-lg;
+    }
+
+    &__title {
+        margin: 0;
+    }
+
+    &__intro {
+        margin: $spacing-sm 0 0;
+        color: $color-text-muted;
+    }
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-md;
+    }
+
+    &__field {
+        margin: 0;
+    }
+
+    &__field--editor {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-xs;
+    }
+
+    &__label {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-xs;
+        font-weight: $font-weight-regular;
+    }
+
+    &__hint {
+        margin: $spacing-xs 0 0;
+        font-size: $font-size-sm;
+        color: $color-text-muted;
+    }
+
+    &__input,
+    &__select,
+    &__textarea {
+        width: 100%;
+        padding: $spacing-sm $spacing-md;
+        border: 1px solid $color-border;
+        border-radius: $radius-md;
+        background: $color-bg-white;
+        font: inherit;
+        font-weight: $font-weight-regular;
+        line-height: $line-height-base;
+
+        @include interactive-transition;
+
+        &:focus-visible {
+            @include focus-ring;
+        }
+    }
+
+    &__select {
+        cursor: pointer;
+    }
+
+    &__textarea {
+        min-height: 14rem;
+        resize: vertical;
+    }
+
+    &__actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $spacing-sm;
+        align-items: center;
+        margin-top: $spacing-sm;
+    }
+
+    &__action {
+        flex: 1;
+    }
+
+    &__footer {
+        margin-top: $spacing-lg;
+        color: $color-text-muted;
+    }
+
+    &__input--disabled {
+        background: $color-bg-light;
+        color: $color-text-muted;
+    }
+}
+
+.form-container--narrow {
+    max-width: 420px;
+    margin: $spacing-xl auto;
+}