Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity
Files
f2a73f2c737653e63b65f6aca6a2a018eeab6578
Forge-Engine/styles/bulma/sass/grid/columns.sass
T
williamandClaude Sonnet 5 f2a73f2c73 Refonte design system — Phase A : Bulma auto-hébergé compilé via Sass 
Met en place les fondations du template Bulma décrit dans
regles/FORGE_ENGINE_TEMPLATE_BULMA.md : palette orange/ambre Forge
(--accent:#ff5f2e/--accent-2:#ffb020), typographie, rayons — appliqués
en recompilant Bulma lui-même plutôt qu'en le surchargeant après coup en
CSS, pour recolorer automatiquement ses composants internes (tags,
notifications, dropdowns...) sans avoir à les surcharger un par un.

- Bulma 0.9.4 vendoré en local (styles/bulma/, source Sass classique
  $variable + @import) — PAS 1.0.2 (la version jusqu'ici en CDN) : 1.0.2
  utilise le nouveau système de modules @use/@forward, que libsass (choisi
  pour rester 100% Python, sans Node/npm) ne sait pas compiler (testé :
  il ignore silencieusement le @use au lieu de le traiter). 0.9.4 est la
  dernière version compatible avec libsass et couvre à l'identique tous
  les composants utilisés ici (boutons, tableaux, onglets, modales,
  formulaires, navbar).
- requirements.txt : +libsass (pip pur, aucun binaire/Node.js).
- styles/forge-theme.scss (nouveau, point d'entrée) : variables Sass
  Bulma ($primary, $radius...) posées avant l'import, tokens Forge exposés
  en :root (--forge-bg, --accent, --gradient, --status-*...) avec des
  alias vers les noms de variables déjà utilisés par tout le CSS custom
  existant (--bg/--panel/--border/--text/--danger...) — pas besoin de
  renommer les ~600 lignes de règles déjà écrites, seules leurs VALEURS
  changent.
- styles/forge-custom.scss : ancien static/style.css, structurellement
  inchangé — seuls les hex/rgba en dur qui échappaient aux variables
  (ancien accent bleu #5b8cff, danger #e2685f, couleurs de types de
  nœuds du graphe de logique, fond du QR code recovery...) sont
  remplacés par les tokens de la charte.
- build_css.py (nouveau) : compile styles/forge-theme.scss en
  static/style.css via libsass — un seul fichier, un seul <link>
  inchangé dans les templates, à relancer manuellement après toute
  modification sous styles/.
- base.html/play.html : suppression du <link> CDN Bulma (auto-hébergé
  désormais), ajout d'un favicon (absent jusqu'ici) et du vrai logo Forge
  dans la navbar (assets/*.svg copiés dans static/branding/, seul dossier
  réellement servi par Flask).

197 tests toujours verts (aucune assertion sur des valeurs CSS).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-29 08:01:32 +02:00

514 lines
14 KiB
Sass
Raw Blame History

@import "../utilities/mixins"
$column-gap: 0.75rem !default
.column
display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
padding: $column-gap
.columns.is-mobile > &.is-narrow
flex: none
width: unset
.columns.is-mobile > &.is-full
flex: none
width: 100%
.columns.is-mobile > &.is-three-quarters
flex: none
width: 75%
.columns.is-mobile > &.is-two-thirds
flex: none
width: 66.6666%
.columns.is-mobile > &.is-half
flex: none
width: 50%
.columns.is-mobile > &.is-one-third
flex: none
width: 33.3333%
.columns.is-mobile > &.is-one-quarter
flex: none
width: 25%
.columns.is-mobile > &.is-one-fifth
flex: none
width: 20%
.columns.is-mobile > &.is-two-fifths
flex: none
width: 40%
.columns.is-mobile > &.is-three-fifths
flex: none
width: 60%
.columns.is-mobile > &.is-four-fifths
flex: none
width: 80%
.columns.is-mobile > &.is-offset-three-quarters
+ltr-property("margin", 75%, false)
.columns.is-mobile > &.is-offset-two-thirds
+ltr-property("margin", 66.6666%, false)
.columns.is-mobile > &.is-offset-half
+ltr-property("margin", 50%, false)
.columns.is-mobile > &.is-offset-one-third
+ltr-property("margin", 33.3333%, false)
.columns.is-mobile > &.is-offset-one-quarter
+ltr-property("margin", 25%, false)
.columns.is-mobile > &.is-offset-one-fifth
+ltr-property("margin", 20%, false)
.columns.is-mobile > &.is-offset-two-fifths
+ltr-property("margin", 40%, false)
.columns.is-mobile > &.is-offset-three-fifths
+ltr-property("margin", 60%, false)
.columns.is-mobile > &.is-offset-four-fifths
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage(divide($i, 12))
.columns.is-mobile > &.is-offset-#{$i}
+ltr-property("margin", percentage(divide($i, 12)), false)
+mobile
&.is-narrow-mobile
flex: none
width: unset
&.is-full-mobile
flex: none
width: 100%
&.is-three-quarters-mobile
flex: none
width: 75%
&.is-two-thirds-mobile
flex: none
width: 66.6666%
&.is-half-mobile
flex: none
width: 50%
&.is-one-third-mobile
flex: none
width: 33.3333%
&.is-one-quarter-mobile
flex: none
width: 25%
&.is-one-fifth-mobile
flex: none
width: 20%
&.is-two-fifths-mobile
flex: none
width: 40%
&.is-three-fifths-mobile
flex: none
width: 60%
&.is-four-fifths-mobile
flex: none
width: 80%
&.is-offset-three-quarters-mobile
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-mobile
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-mobile
+ltr-property("margin", 50%, false)
&.is-offset-one-third-mobile
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-mobile
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-mobile
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-mobile
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-mobile
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-mobile
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-mobile
+ltr-property("margin", percentage(divide($i, 12)), false)
+tablet
&.is-narrow,
&.is-narrow-tablet
flex: none
width: unset
&.is-full,
&.is-full-tablet
flex: none
width: 100%
&.is-three-quarters,
&.is-three-quarters-tablet
flex: none
width: 75%
&.is-two-thirds,
&.is-two-thirds-tablet
flex: none
width: 66.6666%
&.is-half,
&.is-half-tablet
flex: none
width: 50%
&.is-one-third,
&.is-one-third-tablet
flex: none
width: 33.3333%
&.is-one-quarter,
&.is-one-quarter-tablet
flex: none
width: 25%
&.is-one-fifth,
&.is-one-fifth-tablet
flex: none
width: 20%
&.is-two-fifths,
&.is-two-fifths-tablet
flex: none
width: 40%
&.is-three-fifths,
&.is-three-fifths-tablet
flex: none
width: 60%
&.is-four-fifths,
&.is-four-fifths-tablet
flex: none
width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
+ltr-property("margin", 66.6666%, false)
&.is-offset-half,
&.is-offset-half-tablet
+ltr-property("margin", 50%, false)
&.is-offset-one-third,
&.is-offset-one-third-tablet
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
+ltr-property("margin", percentage(divide($i, 12)), false)
+touch
&.is-narrow-touch
flex: none
width: unset
&.is-full-touch
flex: none
width: 100%
&.is-three-quarters-touch
flex: none
width: 75%
&.is-two-thirds-touch
flex: none
width: 66.6666%
&.is-half-touch
flex: none
width: 50%
&.is-one-third-touch
flex: none
width: 33.3333%
&.is-one-quarter-touch
flex: none
width: 25%
&.is-one-fifth-touch
flex: none
width: 20%
&.is-two-fifths-touch
flex: none
width: 40%
&.is-three-fifths-touch
flex: none
width: 60%
&.is-four-fifths-touch
flex: none
width: 80%
&.is-offset-three-quarters-touch
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-touch
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-touch
+ltr-property("margin", 50%, false)
&.is-offset-one-third-touch
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-touch
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-touch
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-touch
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-touch
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-touch
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-touch
+ltr-property("margin", percentage(divide($i, 12)), false)
+desktop
&.is-narrow-desktop
flex: none
width: unset
&.is-full-desktop
flex: none
width: 100%
&.is-three-quarters-desktop
flex: none
width: 75%
&.is-two-thirds-desktop
flex: none
width: 66.6666%
&.is-half-desktop
flex: none
width: 50%
&.is-one-third-desktop
flex: none
width: 33.3333%
&.is-one-quarter-desktop
flex: none
width: 25%
&.is-one-fifth-desktop
flex: none
width: 20%
&.is-two-fifths-desktop
flex: none
width: 40%
&.is-three-fifths-desktop
flex: none
width: 60%
&.is-four-fifths-desktop
flex: none
width: 80%
&.is-offset-three-quarters-desktop
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-desktop
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-desktop
+ltr-property("margin", 50%, false)
&.is-offset-one-third-desktop
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-desktop
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-desktop
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-desktop
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-desktop
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-desktop
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-desktop
+ltr-property("margin", percentage(divide($i, 12)), false)
+widescreen
&.is-narrow-widescreen
flex: none
width: unset
&.is-full-widescreen
flex: none
width: 100%
&.is-three-quarters-widescreen
flex: none
width: 75%
&.is-two-thirds-widescreen
flex: none
width: 66.6666%
&.is-half-widescreen
flex: none
width: 50%
&.is-one-third-widescreen
flex: none
width: 33.3333%
&.is-one-quarter-widescreen
flex: none
width: 25%
&.is-one-fifth-widescreen
flex: none
width: 20%
&.is-two-fifths-widescreen
flex: none
width: 40%
&.is-three-fifths-widescreen
flex: none
width: 60%
&.is-four-fifths-widescreen
flex: none
width: 80%
&.is-offset-three-quarters-widescreen
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-widescreen
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-widescreen
+ltr-property("margin", 50%, false)
&.is-offset-one-third-widescreen
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-widescreen
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-widescreen
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-widescreen
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-widescreen
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-widescreen
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-widescreen
+ltr-property("margin", percentage(divide($i, 12)), false)
+fullhd
&.is-narrow-fullhd
flex: none
width: unset
&.is-full-fullhd
flex: none
width: 100%
&.is-three-quarters-fullhd
flex: none
width: 75%
&.is-two-thirds-fullhd
flex: none
width: 66.6666%
&.is-half-fullhd
flex: none
width: 50%
&.is-one-third-fullhd
flex: none
width: 33.3333%
&.is-one-quarter-fullhd
flex: none
width: 25%
&.is-one-fifth-fullhd
flex: none
width: 20%
&.is-two-fifths-fullhd
flex: none
width: 40%
&.is-three-fifths-fullhd
flex: none
width: 60%
&.is-four-fifths-fullhd
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
+ltr-property("margin", 75%, false)
&.is-offset-two-thirds-fullhd
+ltr-property("margin", 66.6666%, false)
&.is-offset-half-fullhd
+ltr-property("margin", 50%, false)
&.is-offset-one-third-fullhd
+ltr-property("margin", 33.3333%, false)
&.is-offset-one-quarter-fullhd
+ltr-property("margin", 25%, false)
&.is-offset-one-fifth-fullhd
+ltr-property("margin", 20%, false)
&.is-offset-two-fifths-fullhd
+ltr-property("margin", 40%, false)
&.is-offset-three-fifths-fullhd
+ltr-property("margin", 60%, false)
&.is-offset-four-fifths-fullhd
+ltr-property("margin", 80%, false)
@for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage(divide($i, 12))
&.is-offset-#{$i}-fullhd
+ltr-property("margin", percentage(divide($i, 12)), false)
.columns
+ltr-property("margin", (-$column-gap), false)
+ltr-property("margin", (-$column-gap))
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
&:not(:last-child)
margin-bottom: calc(1.5rem - #{$column-gap})
// Modifiers
&.is-centered
justify-content: center
&.is-gapless
+ltr-property("margin", 0, false)
+ltr-property("margin", 0)
margin-top: 0
& > .column
margin: 0
padding: 0 !important
&:not(:last-child)
margin-bottom: 1.5rem
&:last-child
margin-bottom: 0
&.is-mobile
display: flex
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
// Responsiveness
+tablet
&:not(.is-desktop)
display: flex
+desktop
// Modifiers
&.is-desktop
display: flex
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
+ltr-property("margin", calc(-1 * var(--columnGap)))
> .column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8
&.is-#{$i}
--columnGap: #{$i * 0.25rem}
+mobile
&.is-#{$i}-mobile
--columnGap: #{$i * 0.25rem}
+tablet
&.is-#{$i}-tablet
--columnGap: #{$i * 0.25rem}
+tablet-only
&.is-#{$i}-tablet-only
--columnGap: #{$i * 0.25rem}
+touch
&.is-#{$i}-touch
--columnGap: #{$i * 0.25rem}
+desktop
&.is-#{$i}-desktop
--columnGap: #{$i * 0.25rem}
+desktop-only
&.is-#{$i}-desktop-only
--columnGap: #{$i * 0.25rem}
+widescreen
&.is-#{$i}-widescreen
--columnGap: #{$i * 0.25rem}
+widescreen-only
&.is-#{$i}-widescreen-only
--columnGap: #{$i * 0.25rem}
+fullhd
&.is-#{$i}-fullhd
--columnGap: #{$i * 0.25rem}
Reference in New Issue View Git Blame Copy Permalink