first commit

2026-03-16 01:47:07 +01:00
commit 8f7e61bda0
185 changed files with 27731 additions and 0 deletions
--- a/assets/scss/components/_forms.scss
+++ b/assets/scss/components/_forms.scss
@@ -0,0 +1,200 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+@use "sass:color";
+
+// =============================================================
+// Formulaires
+// =============================================================
+// Convention retenue :
+//   - .form-container est un vrai bloc BEM réutilisable
+//   - .btn et .badge sont aussi des blocs composants
+//   - .u-inline-form et .u-inline-actions sont des utilitaires
+//     de mise en page ponctuelle, volontairement préfixés en u-
+
+.form-container {
+    max-width: 720px;
+    margin: 0 auto;
+
+    &__panel {
+        background: $color-bg-white;
+        border: 1px solid $color-border;
+        border-radius: $border-radius;
+        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;
+    }
+
+    &__label {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-xs;
+        font-weight: 600;
+    }
+
+    &__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: $border-radius;
+        background: $color-bg-white;
+        font: inherit;
+
+        &:focus {
+            outline: none;
+            border-color: $color-primary;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
+        }
+    }
+
+    &__textarea {
+        min-height: 14rem;
+        resize: vertical;
+    }
+
+    &__actions {
+        display: flex;
+        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;
+}
+
+// Utilitaires de mise en page
+.u-inline-form {
+    display: inline;
+}
+
+.u-inline-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $spacing-xs;
+}
+
+// =============================================================
+// Barre de recherche (.search-bar)
+// =============================================================
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    margin-bottom: $spacing-lg;
+}
+
+.search-bar__input {
+    flex: 1;
+    padding: $spacing-sm $spacing-md;
+    border: 1px solid $color-border;
+    border-radius: $border-radius;
+    font-size: $font-size-base;
+    font-family: $font-family-base;
+
+    &:focus {
+        outline: none;
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
+    }
+}
+
+.search-bar__btn {
+    padding: $spacing-sm $spacing-md;
+    background: $color-primary;
+    color: #fff;
+    border: none;
+    border-radius: $border-radius;
+    font-size: $font-size-base;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+        background: color.scale($color-primary, $lightness: -16%);
+    }
+}
+
+.search-bar__reset {
+    color: $color-text-muted;
+    text-decoration: none;
+    font-size: $font-size-sm;
+    padding: $spacing-xs;
+    line-height: 1;
+
+    &:hover {
+        color: $color-danger;
+    }
+}
+
+.search-bar__info {
+    margin: (-$spacing-sm) 0 $spacing-md;
+    font-size: $font-size-sm;
+    color: $color-text-muted;
+}
+
+@include mobile {
+    .search-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-bar__btn {
+        width: 100%;
+    }
+
+    .form-container__panel {
+        padding: $spacing-md;
+    }
+
+    .form-container__actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}