studio-variable/geoproject-app
4
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

checkbox

Browse source
This commit is contained in:
Julie Blanc 2025-12-10 17:02:44 +01:00
parent 46eaf01111
commit cb7a43d564
9 changed files with 130 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

176
public/assets/css/src/_forms.scss
View file

@ -8,18 +8,12 @@ input[type="number"] {
color: var(--color-txt); color: var(--color-txt);
font-size: 1rem; font-size: 1rem;
padding-left: 0.5ch; padding-left: 0.5ch;
// min-width: var(--input-w);
// width: 100%;
// padding: 0 1ch;
&:focus{ &:focus{
border-color: var(--color-interface-400); border-color: var(--color-interface-400);
} }
} }
/// RANGE --------------------------------------------------------------------------------- /// RANGE ---------------------------------------------------------------------------------
input[type="range"]{ input[type="range"]{
@ -76,24 +70,70 @@ input[type=range]::-ms-track{
// Checkbox ===============================================
input[type="checkbox"]{
display: none;
}
input[type="checkbox"] + label{
position: relative;
padding-left: 24px;
}
input[type="checkbox"] + label::before{
content: "✔";
font-size: 11px;
padding-bottom: 3px;
padding-left: 3px;
--size: 11px;
width: var(--size);
height: var(--size);
border-radius: var(--border-radius);
display: block;
background-color: red;
position: absolute;
top: 0px;
border: 1px solid var(--color-interface-400);
background-color: var(--color-interface-100);
color: transparent;
}
input[type="checkbox"]:checked + label::before{
background-color: var(--color-interface-600);
border-color: var(--color-interface-600);
color: var(--color-panel-bg);
}
// GENERAL FIELD  ===========================================
.field--view-only {
opacity: 0.3;
}
.field { .field {
display: flex; display: grid;
grid-template-columns: var(--label-w) 1fr;
label { label {
font-weight: 600; font-weight: 600;
color: var(--color-800); color: var(--color-800);
align-self: center;
} }
.input-with-unit { .input-with-range {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
} }
.unit-toggle { .unit-toggle {
@ -125,14 +165,12 @@ input[type=range]::-ms-track{
} }
.field{ .checkbox-field{
display: grid; display: block;
grid-template-columns: var(--label-w) 1fr; margin: calc(var(--space-xs)*2) 0;
label{
align-self: center;
}
} }
.field-font{ .field-font{
display: grid; display: grid;
grid-template-columns: var(--label-w) 1fr; grid-template-columns: var(--label-w) 1fr;
@ -141,12 +179,12 @@ input[type=range]::-ms-track{
select{ select{
width: 100%; width: 100%;
} }
.field-checkbox{ .checkbox-field{
grid-column: 2; grid-column: 2;
padding-top: var(--space-xs); padding-top: var(--space-xs);
margin: 0;
label{ label{
font-weight: 400; font-weight: 400;
margin-left: 0.75ch;
color: var(--color-txt); color: var(--color-txt);
} }
} }
@ -176,26 +214,18 @@ input[type=range]::-ms-track{
margin-right: 2ch; margin-right: 2ch;
} }
}
.checkbox-field{
margin: calc(var(--space-xs)*2) 0;
grid-template-columns: 3ch 1fr;
input{
justify-self: left;
margin: 0;
}
} }
.field--view-only {
opacity: 0.3;
}
/* Label with CSS tooltip */
// TOOLTIP ===============================================
.label-with-tooltip { .label-with-tooltip {
text-decoration: underline dotted 1px var(--color-200); text-decoration: underline dotted 1px var(--color-200);
text-underline-offset: 2px; text-underline-offset: 2px;
@ -237,7 +267,6 @@ input[type=range]::-ms-track{
// INPUT NUMBER =============================================== // INPUT NUMBER ===============================================
// Masquer les spinners natifs partout
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -252,7 +281,6 @@ input[type="number"] {
.number-input{ .number-input{
position: relative; position: relative;
// padding: 0 1ch!important;
input{ input{
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@ -274,87 +302,11 @@ input[type="number"] {
width: 10px; width: 10px;
height: auto; height: auto;
} }
svg path{ svg path{ fill: var(--color-interface-600); }
fill: var(--color-interface-600);
}
&:hover{ &:hover{
svg path{ svg path{ fill: var(--color-interface-900); }
fill: var(--color-interface-900);
}
} }
} }
.spinner-down{
svg{
// position: relative;
// top: -2px;
}
}
} }
} }
// Composant NumberInput avec boutons personnalisés
// .number-input {
// position: relative;
// display: flex;
// align-items: center;
// width: 100%;
// position: relative;
// input[type="number"] {
// width: 100%;
// box-sizing: border-box;
// }
// .spinner-buttons {
// background-color: red;
// position: absolute;
// right: 1px;
// top: 1px;
// bottom: 1px;
// display: flex;
// flex-direction: column;
// justify-content: center;
// gap: 1px;
// z-index: 10;
// .spinner-btn {
// display: flex;
// align-items: center;
// justify-content: center;
// width: 20px;
// height: 10px;
// padding: 0;
// margin: 0;
// background-color: var(--color-interface-200);
// border: 1px solid var(--color-interface-300);
// border-radius: 2px;
// cursor: pointer;
// transition: background-color 0.15s ease;
// color: var(--color-interface-700);
// line-height: 0;
// svg {
// width: 8px;
// height: 6px;
// display: block;
// }
// &:hover:not(:disabled) {
// background-color: var(--color-interface-300);
// color: var(--color-interface-900);
// }
// &:active:not(:disabled) {
// background-color: var(--color-interface-400);
// }
// &:disabled {
// opacity: 0.3;
// cursor: not-allowed;
// }
// }
// }
// }

74
public/assets/css/style.css
View file

@ -1,3 +1,4 @@
@charset "UTF-8";
@font-face { @font-face {
font-family: "DM Sans"; font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations"); src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
@ -355,14 +356,53 @@ input[type=range]::-ms-track {
border-radius: 2px; border-radius: 2px;
} }
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
position: relative;
padding-left: 24px;
}
input[type=checkbox] + label::before {
content: "✔";
font-size: 11px;
padding-bottom: 3px;
padding-left: 3px;
--size: 11px;
width: var(--size);
height: var(--size);
border-radius: var(--border-radius);
display: block;
background-color: red;
position: absolute;
top: 0px;
border: 1px solid var(--color-interface-400);
background-color: var(--color-interface-100);
color: transparent;
}
input[type=checkbox]:checked + label::before {
background-color: var(--color-interface-600);
border-color: var(--color-interface-600);
color: var(--color-panel-bg);
}
.field--view-only {
opacity: 0.3;
}
.field { .field {
display: flex; display: grid;
grid-template-columns: var(--label-w) 1fr;
} }
.field label { .field label {
font-weight: 600; font-weight: 600;
color: var(--color-800); color: var(--color-800);
align-self: center;
} }
.field .input-with-unit { .field .input-with-range {
display: flex; display: flex;
gap: 0.3rem; gap: 0.3rem;
} }
@ -390,12 +430,9 @@ input[type=range]::-ms-track {
grid-column: 2; grid-column: 2;
} }
.field { .checkbox-field {
display: grid; display: block;
grid-template-columns: var(--label-w) 1fr; margin: calc(var(--space-xs) * 2) 0;
}
.field label {
align-self: center;
} }
.field-font { .field-font {
@ -406,13 +443,13 @@ input[type=range]::-ms-track {
.field-font select { .field-font select {
width: 100%; width: 100%;
} }
.field-font .field-checkbox { .field-font .checkbox-field {
grid-column: 2; grid-column: 2;
padding-top: var(--space-xs); padding-top: var(--space-xs);
margin: 0;
} }
.field-font .field-checkbox label { .field-font .checkbox-field label {
font-weight: 400; font-weight: 400;
margin-left: 0.75ch;
color: var(--color-txt); color: var(--color-txt);
} }
@ -439,20 +476,6 @@ input[type=range]::-ms-track {
margin-right: 2ch; margin-right: 2ch;
} }
.checkbox-field {
margin: calc(var(--space-xs) * 2) 0;
grid-template-columns: 3ch 1fr;
}
.checkbox-field input {
justify-self: left;
margin: 0;
}
.field--view-only {
opacity: 0.3;
}
/* Label with CSS tooltip */
.label-with-tooltip { .label-with-tooltip {
-webkit-text-decoration: underline dotted 1px var(--color-200); -webkit-text-decoration: underline dotted 1px var(--color-200);
text-decoration: underline dotted 1px var(--color-200); text-decoration: underline dotted 1px var(--color-200);
@ -525,6 +548,7 @@ input[type=number] {
.number-input .spinner-buttons button:hover svg path { .number-input .spinner-buttons button:hover svg path {
fill: var(--color-interface-900); fill: var(--color-interface-900);
} }
.settings-section { .settings-section {
margin: var(--space-m) 0; margin: var(--space-m) 0;
} }

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

8
src/components/ElementPopup.vue
View file

@ -24,7 +24,7 @@
<select v-model="fontFamily.value" :disabled="inheritanceLocked"> <select v-model="fontFamily.value" :disabled="inheritanceLocked">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option> <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select> </select>
<div class="field-checkbox"> <div class="checkbox-field">
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" /> <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
<label class="label-with-tooltip" data-css="font-style">Italique</label> <label class="label-with-tooltip" data-css="font-style">Italique</label>
</div> </div>
@ -44,7 +44,7 @@
<div class="settings-subsection"> <div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }"> <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label> <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="fontSize.value" v-model="fontSize.value"
:min="0" :min="0"
@ -130,7 +130,7 @@
<div class="settings-subsection"> <div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }"> <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label> <label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="marginOuter.value" v-model="marginOuter.value"
:min="0" :min="0"
@ -163,7 +163,7 @@
<div class="settings-subsection"> <div class="settings-subsection">
<div class="field" :class="{ 'field--view-only': inheritanceLocked }"> <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label> <label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="paddingInner.value" v-model="paddingInner.value"
:min="0" :min="0"

8
src/components/PagePopup.vue
View file

@ -26,7 +26,7 @@
:class="{ 'field--view-only': inheritanceLocked }" :class="{ 'field--view-only': inheritanceLocked }"
> >
<label class="label-with-tooltip" data-css="margin-top">Haut</label> <label class="label-with-tooltip" data-css="margin-top">Haut</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="margins.top.value" v-model="margins.top.value"
:min="0" :min="0"
@ -67,7 +67,7 @@
:class="{ 'field--view-only': inheritanceLocked }" :class="{ 'field--view-only': inheritanceLocked }"
> >
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label> <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="margins.bottom.value" v-model="margins.bottom.value"
:min="0" :min="0"
@ -108,7 +108,7 @@
:class="{ 'field--view-only': inheritanceLocked }" :class="{ 'field--view-only': inheritanceLocked }"
> >
<label class="label-with-tooltip" data-css="margin-left">Gauche</label> <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="margins.left.value" v-model="margins.left.value"
:min="0" :min="0"
@ -149,7 +149,7 @@
:class="{ 'field--view-only': inheritanceLocked }" :class="{ 'field--view-only': inheritanceLocked }"
> >
<label class="label-with-tooltip" data-css="margin-right">Droite</label> <label class="label-with-tooltip" data-css="margin-right">Droite</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
v-model="margins.right.value" v-model="margins.right.value"
:min="0" :min="0"

8
src/components/editor/PageSettings.vue
View file

@ -57,7 +57,7 @@
<label for="margin-top" class="label-with-tooltip" data-css="margin-top" <label for="margin-top" class="label-with-tooltip" data-css="margin-top"
>Haut</label >Haut</label
> >
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
id="margin-top" id="margin-top"
v-model="margins.top.value" v-model="margins.top.value"
@ -97,7 +97,7 @@
data-css="margin-bottom" data-css="margin-bottom"
>Bas</label >Bas</label
> >
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
id="margin-bottom" id="margin-bottom"
v-model="margins.bottom.value" v-model="margins.bottom.value"
@ -137,7 +137,7 @@
data-css="margin-left" data-css="margin-left"
>Gauche</label >Gauche</label
> >
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
id="margin-left" id="margin-left"
v-model="margins.left.value" v-model="margins.left.value"
@ -177,7 +177,7 @@
data-css="margin-right" data-css="margin-right"
>Droite</label >Droite</label
> >
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
id="margin-right" id="margin-right"
v-model="margins.right.value" v-model="margins.right.value"

2
src/components/editor/TextSettings.vue
View file

@ -16,7 +16,7 @@
<select id="text-font" v-model="font"> <select id="text-font" v-model="font">
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option> <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
</select> </select>
<div class="field-checkbox"> <div class="checkbox-field">
<input id="text-italic" type="checkbox" v-model="italic" /> <input id="text-italic" type="checkbox" v-model="italic" />
<label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label> <label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
</div> </div>

2
src/components/ui/InputWithUnit.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="input-with-unit"> <div class="input-with-range">
<input <input
v-if="showRange" v-if="showRange"
type="range" type="range"

4
src/components/ui/MarginEditor.vue
View file

@ -2,7 +2,7 @@
<div class="margin-editor"> <div class="margin-editor">
<div class="field field-margin-all"> <div class="field field-margin-all">
<label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label> <label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
:id="id" :id="id"
:modelValue="simple.value" :modelValue="simple.value"
@ -30,7 +30,7 @@
<div v-if="expanded" class="subsection collapsed-section"> <div v-if="expanded" class="subsection collapsed-section">
<div v-for="side in sides" :key="side.key" class="field field-margin"> <div v-for="side in sides" :key="side.key" class="field field-margin">
<label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label> <label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
<div class="input-with-unit"> <div class="input-with-range">
<NumberInput <NumberInput
:id="`${id}-${side.key}`" :id="`${id}-${side.key}`"
:modelValue="detailed[side.key].value" :modelValue="detailed[side.key].value"