first commit
This commit is contained in:
julien
24
assets/scss/components/_alerts.scss
Normal file
24
assets/scss/components/_alerts.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// =============================================================
|
||||
// Alertes / messages flash
|
||||
// =============================================================
|
||||
|
||||
.alert {
|
||||
padding: $spacing-md;
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: $spacing-md;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&--danger {
|
||||
background: $color-danger-bg;
|
||||
border-color: $color-danger-border;
|
||||
color: $color-danger-text;
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: $color-success-bg;
|
||||
border-color: $color-success-border;
|
||||
color: $color-success-text;
|
||||
}
|
||||
}
|
||||
38
assets/scss/components/_badges.scss
Normal file
38
assets/scss/components/_badges.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// =============================================================
|
||||
// Badges — bloc composant .badge pour rôles utilisateur et catégories
|
||||
// =============================================================
|
||||
|
||||
.badge {
|
||||
padding: 0.2rem $spacing-sm;
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-xs;
|
||||
|
||||
&--admin {
|
||||
color: $color-warning-text;
|
||||
background: $color-warning-bg;
|
||||
}
|
||||
|
||||
&--editor {
|
||||
color: $color-info-text;
|
||||
background: $color-info-bg;
|
||||
}
|
||||
|
||||
&--user {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
// Badge catégorie — affiché sur les cartes d'articles et les pages de détail
|
||||
// Cliquable : redirige vers la liste filtrée par catégorie
|
||||
&--category {
|
||||
color: $color-primary;
|
||||
background: $color-primary-bg;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
assets/scss/components/_buttons.scss
Normal file
57
assets/scss/components/_buttons.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// =============================================================
|
||||
// Boutons — bloc composant .btn
|
||||
// =============================================================
|
||||
|
||||
.btn {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border-radius: $border-radius;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: $color-primary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
background: $color-text-muted;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background: $color-danger;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Modificateur taille — boutons principaux dans les formulaires centrés
|
||||
.btn--lg {
|
||||
padding: 0.75rem $spacing-lg;
|
||||
}
|
||||
|
||||
// Modificateur largeur — occupe toute la largeur de son conteneur
|
||||
.btn--full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Variante autonome du bloc bouton : lien d'action textuel
|
||||
// Utilisé sans la classe .btn (pas un modificateur BEM)
|
||||
.btn-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $color-primary;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
182
assets/scss/components/_card.scss
Normal file
182
assets/scss/components/_card.scss
Normal file
@@ -0,0 +1,182 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/mixins" as *;
|
||||
|
||||
// =============================================================
|
||||
// Composant carte — générique
|
||||
// =============================================================
|
||||
// Définit deux blocs BEM :
|
||||
// .card-list — conteneur de liste de cartes
|
||||
// .card — carte individuelle (vignette + contenu)
|
||||
// Aucune référence au domaine métier : les contenus spécifiques
|
||||
// (extrait d'article, prix produit…) sont surchargés dans les
|
||||
// fichiers de page (pages/_home.scss, pages/_shop.scss…).
|
||||
|
||||
// Conteneur de liste de cartes
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
// Modificateur : fond grisé encadrant les cartes (ex: page d'accueil)
|
||||
// Rend les box-shadow perceptibles en créant un contraste avec le fond blanc des cartes
|
||||
.card-list--contained {
|
||||
background: $color-bg-light;
|
||||
padding: $spacing-md;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Carte : vignette à gauche, corps à droite
|
||||
// La vignette est toujours présente (image ou initiales)
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-lg;
|
||||
padding: $spacing-lg;
|
||||
background: $color-bg-white;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 4px $color-card-shadow;
|
||||
}
|
||||
|
||||
// Lien englobant la vignette — pas de décoration, tabindex=-1 pour
|
||||
// éviter la double tabulation (le titre est déjà un lien cliquable)
|
||||
.card__thumb-link {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Vignette image
|
||||
.card__thumb {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Vignette initiales (affiché quand l'entité n'a pas d'image)
|
||||
// Mêmes dimensions que .card__thumb pour un alignement cohérent
|
||||
.card__initials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: $border-radius;
|
||||
background: $color-bg-initials;
|
||||
color: $color-text-muted;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Wrapper externe : prend la place à droite de la vignette
|
||||
// Organisé en flex colonne pour empiler .card__body et .card__actions
|
||||
.card__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// Partie textuelle de la carte
|
||||
// max-height contraint le titre + métadonnées + aperçu à la hauteur de la vignette.
|
||||
// overflow:hidden clip l'aperçu si le contenu dépasse — .card__actions est en dehors
|
||||
// de ce conteneur et reste donc toujours visible.
|
||||
.card__body {
|
||||
max-height: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Titre de la carte
|
||||
.card__title {
|
||||
margin: 0 0 0.4rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// Lien du titre — élément BEM dédié plutôt qu'un sélecteur descendant sur <a>
|
||||
.card__title-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Métadonnées (date, auteur, prix…)
|
||||
.card__meta {
|
||||
margin-bottom: $spacing-sm;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
// Texte court de présentation — clipé par overflow:hidden du parent .card__body.
|
||||
// word-break empêche le débordement de mots longs ou d'URLs sans espace.
|
||||
.card__excerpt {
|
||||
margin: $spacing-sm 0;
|
||||
color: $color-text;
|
||||
line-height: $line-height-base;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
// Styles pour le HTML formaté retourné par post_excerpt()
|
||||
// Les listes à puces/numérotées sont compactées pour rester dans l'aperçu
|
||||
ul,
|
||||
ol {
|
||||
margin: $spacing-xs 0 0 $spacing-sm;
|
||||
padding-left: $spacing-sm;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
// Zone d'actions (liens, boutons) — aspect défini dans le fichier de page
|
||||
.card__actions {
|
||||
margin-top: $spacing-sm;
|
||||
}
|
||||
|
||||
// Adaptation mobile : vignette au-dessus du corps, pleine largeur
|
||||
// max-height est annulé sur .card__body — en disposition colonne l'aperçu
|
||||
// peut s'étendre librement sous la vignette.
|
||||
@include mobile {
|
||||
.card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card__thumb-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card__thumb,
|
||||
.card__initials {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
// En mobile (disposition colonne), le corps s'étend librement
|
||||
.card__body {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Titre légèrement réduit pour éviter qu'il soit trop imposant sur petit écran
|
||||
.card__title {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
200
assets/scss/components/_forms.scss
Normal file
200
assets/scss/components/_forms.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
39
assets/scss/components/_post.scss
Normal file
39
assets/scss/components/_post.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// =============================================================
|
||||
// Composant article — page de détail
|
||||
// =============================================================
|
||||
// Styles spécifiques à l'affichage d'un article en pleine page.
|
||||
// Les styles de la carte article en liste sont dans _card.scss.
|
||||
|
||||
// Bloc article — page de détail
|
||||
.post {
|
||||
padding: $spacing-md 0;
|
||||
|
||||
// Métadonnées (date, auteur) — même apparence que .card__meta
|
||||
&__meta {
|
||||
margin-bottom: $spacing-sm;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
// Mention de mise à jour
|
||||
&__updated {
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Contenu HTML de l'article (généré par Trumbowyg, sanitisé par HTMLPurifier)
|
||||
// word-break empêche le débordement d'URLs ou de mots longs sans espace sur mobile
|
||||
.post__content {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
// Images insérées dans le contenu via Trumbowyg — sélecteur descendant sur <img>
|
||||
// accepté ici car le contenu est généré par un éditeur WYSIWYG et non par des templates
|
||||
.post__content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: $border-radius;
|
||||
margin: $spacing-sm 0;
|
||||
}
|
||||
39
assets/scss/components/_upload.scss
Normal file
39
assets/scss/components/_upload.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// =============================================================
|
||||
// Bloc upload — aperçu et actions sur les médias uploadés
|
||||
// =============================================================
|
||||
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.upload__thumb-link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.upload__thumb {
|
||||
display: block;
|
||||
width: 96px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
border-radius: $border-radius-sm;
|
||||
border: 1px solid $color-border;
|
||||
background: $color-bg-light;
|
||||
}
|
||||
|
||||
.upload__url {
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.upload__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-xs;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user