Produits Entr'ouvert » Intégrations graphiques Publik

alors je dois embarquer la moitié des règles du front

Évidemment il ne faut pas faire ça mais qu'est-ce qui t'y oblige ?

Si la réponse est uniquement "les quelques variables type "$title-font-size" qui sont utilisées, une possibilité là-dessus est simplement de les définir avec des valeurs appropriées dans backoffice.scss.

Si la réponse est uniquement "les quelques variables type "$title-font-size" qui sont utilisées,

En fait j'ai commencé par ça et quand j'ai vu poindre toutes les dépendances j'ai opté pour inclure les modules dans l'ordre du front afin d'avoir rapidement solution à proposer.

une possibilité là-dessus est simplement de les définir avec des valeurs appropriées dans backoffice.scss.

Je pars là dessus afin d'énumérer les variables.

En faisant au plus bête, c'est à dire en re-définissant "appropriées" par "attendues par le compilateur SCSS" ça donne 29 variables et quelques règles.

@import 'encombrants';

// _vars.scss
$very-small-limit: 35em;
$gray-1: #212121;
$gray-6: #E2E2E2;
$cell-entry-border-color: $gray-6;
$mobile-limit: 1023px;
$base-font: 17;
$fz-2: 36em / $base-font;
$title-font-size: $fz-2;
$salmon-dark: #D8522A;
$primary-color: $salmon-dark;
$title-color: $primary-color;
$cancel-button-style: ".gray-button";
$font-color: $gray-1;
$button-color: $font-color;
$button-background: white;
$button-hover-color: $button-color !default;
$widget-padding: 0.74rem 1.5rem;
// ../includes/_general.scss
$border-radius: null !default;
// ../includes/gadjo-extra.scss
$widget-focus-outline: none;
// ../includes/_cells.scss
$cell-entry-border: 1px solid $cell-entry-border-color !default;
$cell-open-foldable-icon: "\f107" !default;  // angle-down
$cell-close-foldable-icon: "\f106" !default;  // angle-up
.gru-content div.cell div.cell-items-pagination {
        padding: 1rem;
        .cell-items-pagination-next {
                float: right;
                margin-right: 0;
        }
}
// ../includes/_layout.scss
$max-mobile-viewport: "max-width: #{$mobile-limit}";
$min-desktop-viewport: "min-width: #{min-desktop-viewport($mobile-limit)}";
// ../includes/_forms.scss
%cancel-button {
        @extend #{$cancel-button-style};
}
.gru-content button.cancel-button,
div.buttons .cancel-button button {
        @extend %cancel-button;
}
$button-hover-background: $button-background !default;
$button-padding: $widget-padding !default;
$button-border: 1px solid transparent !default;
$button-border-radius: $border-radius !default;
$button-focus-outline: $widget-focus-outline !default;

%button {
    --color: #{$button-color};
    --background: #{$button-background};
    --hover-color: #{$button-hover-color};
    --hover-background: #{$button-hover-background};

    background: var(--background);
    text-align: center;
    color: var(--color);
    padding: $button-padding;
    cursor: pointer;
    border: $button-border;
    border-radius: $button-border-radius;
    transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
    margin-right: 1.5em;
    vertical-align: middle;
    box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
    text-decoration: none;
    line-height: normal;

    &[aria-pressed=true], &:hover {
        box-shadow: 0px 0px 5px #777;
        background: var(--hover-background);
        color: var(--hover-color);
    }

    &:disabled {
        box-shadow: none;
        cursor: not-allowed;
        filter: grayscale(100%);
    }

    &:focus {
        @if $button-focus-outline == none {
            outline: 1px dotted $button-background;
        } @else {
            outline: $button-focus-outline;
            outline-offset: $button-focus-outline-offset;
        }
    }
}
// _custom.scss:
.gray-button {
        @extend %button;
        background-color: $gray-6;
        border-color: $gray-6;
        &:hover {
                background-color: $gray-1;
                border-color: $gray-1;
                color: white;
        }
}

@import 'json_cells';

Si la réponse est uniquement "les quelques variables type "$title-font-size" qui sont utilisées,

Je vous laisse placer le curseur pour interpréter ma réponse (ça me dépasse).

En faisant au plus bête

Soyons plus fin :

$cell-close-foldable-icon: "\f106";
$cell-open-foldable-icon: "\f107";
$cell-entry-border: 1px solid #ccc;
$cell-entry-border-color: #ccc;
$mobile-limit: 760px;
$max-mobile-viewport: "max-width: #{$mobile-limit}";
$min-desktop-viewport: "min-width: #{$mobile-limit + 1}";
$title-color: #161c2a;
$title-font-size: 200%;
$very-small-limit: 560px;

.cancel-button {}
.cell-items-pagination {}

@import 'encombrants';
@import 'json_cells';