Files
netslim-blog/assets/scss/components/_rich-text.scss
2026-03-20 22:16:20 +01:00

83 lines
1.7 KiB
SCSS

@use "../core/variables" as *;
@use "../core/mixins" as *;
// =============================================================
// Contenu riche partagé
// =============================================================
// Exception assumée au BEM : le HTML interne est généré par Trumbowyg et
// n'est pas entièrement piloté par les templates Twig. Les sélecteurs
// descendants sont donc réservés à .rich-text et à .trumbowyg-editor.
.rich-text,
.trumbowyg-editor {
word-break: break-word;
overflow-wrap: break-word;
p, ul, ol, blockquote, pre {
margin: 0 0 $spacing-md;
}
ul, ol {
padding-left: 1.25rem;
}
blockquote {
margin-left: 0;
padding-left: $spacing-md;
border-left: 3px solid $color-border;
color: $color-text-muted;
}
img {
max-width: 100%;
height: auto;
border-radius: $radius-md;
margin: $spacing-sm 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: $spacing-md;
}
th, td {
border: 1px solid $color-border;
padding: $spacing-sm;
text-align: left;
}
}
.trumbowyg-box,
.trumbowyg-editor,
.trumbowyg-button-pane {
font: inherit;
font-weight: $font-weight-regular;
}
.trumbowyg-box,
.trumbowyg-editor {
min-height: 300px;
}
.trumbowyg-box {
width: 100%;
box-sizing: border-box;
border-radius: $radius-md;
@include interactive-transition;
&:focus-within {
@include focus-ring;
}
}
.trumbowyg-button-pane button {
@include interactive-transition;
&:focus-visible {
outline: 2px solid $focus-ring-color;
outline-offset: 2px;
}
}