disable: comment out em/rem unit options, keep only px and mm for print
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 20s

Margins: px + mm only. Font sizes: px only.
em/rem buttons are commented out, not deleted, for potential future use.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 14:16:54 +01:00
parent de3bb2a274
commit b5b495d478
5 changed files with 38 additions and 38 deletions

View file

@ -60,7 +60,7 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: fontSize.unit === 'em' }" :class="{ active: fontSize.unit === 'em' }"
:disabled="inheritanceLocked" :disabled="inheritanceLocked"
@ -75,7 +75,7 @@
@click="updateFontSizeUnit('rem')" @click="updateFontSizeUnit('rem')"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>

View file

@ -50,14 +50,14 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.top.unit === 'rem' }" :class="{ active: margins.top.unit === 'rem' }"
:disabled="inheritanceLocked" :disabled="inheritanceLocked"
@click="margins.top.unit = 'rem'" @click="margins.top.unit = 'rem'"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -91,14 +91,14 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.bottom.unit === 'rem' }" :class="{ active: margins.bottom.unit === 'rem' }"
:disabled="inheritanceLocked" :disabled="inheritanceLocked"
@click="margins.bottom.unit = 'rem'" @click="margins.bottom.unit = 'rem'"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -132,14 +132,14 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.left.unit === 'rem' }" :class="{ active: margins.left.unit === 'rem' }"
:disabled="inheritanceLocked" :disabled="inheritanceLocked"
@click="margins.left.unit = 'rem'" @click="margins.left.unit = 'rem'"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -173,14 +173,14 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.right.unit === 'rem' }" :class="{ active: margins.right.unit === 'rem' }"
:disabled="inheritanceLocked" :disabled="inheritanceLocked"
@click="margins.right.unit = 'rem'" @click="margins.right.unit = 'rem'"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>

View file

@ -77,13 +77,13 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.top.unit === 'rem' }" :class="{ active: margins.top.unit === 'rem' }"
@click="updateMarginUnit('top', 'rem')" @click="updateMarginUnit('top', 'rem')"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -118,13 +118,13 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.bottom.unit === 'rem' }" :class="{ active: margins.bottom.unit === 'rem' }"
@click="updateMarginUnit('bottom', 'rem')" @click="updateMarginUnit('bottom', 'rem')"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -159,13 +159,13 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.left.unit === 'rem' }" :class="{ active: margins.left.unit === 'rem' }"
@click="updateMarginUnit('left', 'rem')" @click="updateMarginUnit('left', 'rem')"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>
@ -200,13 +200,13 @@
> >
px px
</button> </button>
<button <!-- <button
type="button" type="button"
:class="{ active: margins.right.unit === 'rem' }" :class="{ active: margins.right.unit === 'rem' }"
@click="updateMarginUnit('right', 'rem')" @click="updateMarginUnit('right', 'rem')"
> >
rem rem
</button> </button> -->
</div> </div>
</div> </div>
</div> </div>

View file

@ -38,7 +38,7 @@
<label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label> <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<InputWithUnit <InputWithUnit
v-model="fontSize" v-model="fontSize"
:units="['px', 'em', 'rem']" :units="['px']"
:min="8" :min="8"
:max="72" :max="72"
showRange showRange
@ -129,11 +129,11 @@
:class="{ active: marginOuterDetailed.top.unit === 'px' }" :class="{ active: marginOuterDetailed.top.unit === 'px' }"
@click="updateMarginOuterUnit('px')" @click="updateMarginOuterUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginOuterDetailed.top.unit === 'rem' }" :class="{ active: marginOuterDetailed.top.unit === 'rem' }"
@click="updateMarginOuterUnit('rem')" @click="updateMarginOuterUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -159,11 +159,11 @@
:class="{ active: marginOuterDetailed.bottom.unit === 'px' }" :class="{ active: marginOuterDetailed.bottom.unit === 'px' }"
@click="updateMarginOuterUnit('px')" @click="updateMarginOuterUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginOuterDetailed.bottom.unit === 'rem' }" :class="{ active: marginOuterDetailed.bottom.unit === 'rem' }"
@click="updateMarginOuterUnit('rem')" @click="updateMarginOuterUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -189,11 +189,11 @@
:class="{ active: marginOuterDetailed.left.unit === 'px' }" :class="{ active: marginOuterDetailed.left.unit === 'px' }"
@click="updateMarginOuterUnit('px')" @click="updateMarginOuterUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginOuterDetailed.left.unit === 'rem' }" :class="{ active: marginOuterDetailed.left.unit === 'rem' }"
@click="updateMarginOuterUnit('rem')" @click="updateMarginOuterUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -219,11 +219,11 @@
:class="{ active: marginOuterDetailed.right.unit === 'px' }" :class="{ active: marginOuterDetailed.right.unit === 'px' }"
@click="updateMarginOuterUnit('px')" @click="updateMarginOuterUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginOuterDetailed.right.unit === 'rem' }" :class="{ active: marginOuterDetailed.right.unit === 'rem' }"
@click="updateMarginOuterUnit('rem')" @click="updateMarginOuterUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -266,11 +266,11 @@
:class="{ active: marginInnerDetailed.top.unit === 'px' }" :class="{ active: marginInnerDetailed.top.unit === 'px' }"
@click="updateMarginInnerUnit('px')" @click="updateMarginInnerUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginInnerDetailed.top.unit === 'rem' }" :class="{ active: marginInnerDetailed.top.unit === 'rem' }"
@click="updateMarginInnerUnit('rem')" @click="updateMarginInnerUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -296,11 +296,11 @@
:class="{ active: marginInnerDetailed.bottom.unit === 'px' }" :class="{ active: marginInnerDetailed.bottom.unit === 'px' }"
@click="updateMarginInnerUnit('px')" @click="updateMarginInnerUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginInnerDetailed.bottom.unit === 'rem' }" :class="{ active: marginInnerDetailed.bottom.unit === 'rem' }"
@click="updateMarginInnerUnit('rem')" @click="updateMarginInnerUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -326,11 +326,11 @@
:class="{ active: marginInnerDetailed.left.unit === 'px' }" :class="{ active: marginInnerDetailed.left.unit === 'px' }"
@click="updateMarginInnerUnit('px')" @click="updateMarginInnerUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginInnerDetailed.left.unit === 'rem' }" :class="{ active: marginInnerDetailed.left.unit === 'rem' }"
@click="updateMarginInnerUnit('rem')" @click="updateMarginInnerUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -356,11 +356,11 @@
:class="{ active: marginInnerDetailed.right.unit === 'px' }" :class="{ active: marginInnerDetailed.right.unit === 'px' }"
@click="updateMarginInnerUnit('px')" @click="updateMarginInnerUnit('px')"
>px</button> >px</button>
<button <!-- <button
type="button" type="button"
:class="{ active: marginInnerDetailed.right.unit === 'rem' }" :class="{ active: marginInnerDetailed.right.unit === 'rem' }"
@click="updateMarginInnerUnit('rem')" @click="updateMarginInnerUnit('rem')"
>rem</button> >rem</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -675,7 +675,7 @@ const syncFromStore = () => {
const fontWeight = extractValue('p', 'font-weight'); const fontWeight = extractValue('p', 'font-weight');
if (fontWeight) weight.value = fontWeight; if (fontWeight) weight.value = fontWeight;
const fontSizeVal = extractNumericValue('p', 'font-size', ['px', 'em', 'rem']); const fontSizeVal = extractNumericValue('p', 'font-size', ['px']); // ['px', 'em', 'rem']
if (fontSizeVal) fontSize.value = fontSizeVal; if (fontSizeVal) fontSize.value = fontSizeVal;
// Margins // Margins

View file

@ -18,7 +18,7 @@ export function useCssSync() {
* Extract a numeric CSS value with unit * Extract a numeric CSS value with unit
* Returns { value: number, unit: string } or null * Returns { value: number, unit: string } or null
*/ */
const extractNumericValue = (selector, property, allowedUnits = ['px', 'em', 'rem', 'mm']) => { const extractNumericValue = (selector, property, allowedUnits = ['px', 'mm']) => { // ['px', 'em', 'rem', 'mm']
const block = store.extractBlock(selector); const block = store.extractBlock(selector);
if (!block) return null; if (!block) return null;
@ -38,7 +38,7 @@ export function useCssSync() {
* Extract margin/padding shorthand (handles 1 or 4 values) * Extract margin/padding shorthand (handles 1 or 4 values)
* Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } } * Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } }
*/ */
const extractSpacing = (selector, property, allowedUnits = ['mm', 'px', 'rem']) => { const extractSpacing = (selector, property, allowedUnits = ['mm', 'px']) => { // ['mm', 'px', 'rem']
const block = store.extractBlock(selector); const block = store.extractBlock(selector);
if (!block) return null; if (!block) return null;