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
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:
parent
de3bb2a274
commit
b5b495d478
5 changed files with 38 additions and 38 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue