checkbox
This commit is contained in:
Julie Blanc
parent
46eaf01111
commit
cb7a43d564
9 changed files with 130 additions and 154 deletions
|
|
@ -8,18 +8,12 @@ input[type="number"] {
|
|||
color: var(--color-txt);
|
||||
font-size: 1rem;
|
||||
padding-left: 0.5ch;
|
||||
// min-width: var(--input-w);
|
||||
// width: 100%;
|
||||
// padding: 0 1ch;
|
||||
&:focus{
|
||||
border-color: var(--color-interface-400);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/// 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 {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) 1fr;
|
||||
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: var(--color-800);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.input-with-unit {
|
||||
.input-with-range {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.unit-toggle {
|
||||
|
|
@ -125,14 +165,12 @@ input[type=range]::-ms-track{
|
|||
}
|
||||
|
||||
|
||||
.field{
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) 1fr;
|
||||
label{
|
||||
align-self: center;
|
||||
}
|
||||
.checkbox-field{
|
||||
display: block;
|
||||
margin: calc(var(--space-xs)*2) 0;
|
||||
}
|
||||
|
||||
|
||||
.field-font{
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) 1fr;
|
||||
|
|
@ -141,12 +179,12 @@ input[type=range]::-ms-track{
|
|||
select{
|
||||
width: 100%;
|
||||
}
|
||||
.field-checkbox{
|
||||
.checkbox-field{
|
||||
grid-column: 2;
|
||||
padding-top: var(--space-xs);
|
||||
margin: 0;
|
||||
label{
|
||||
font-weight: 400;
|
||||
margin-left: 0.75ch;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
|
@ -176,26 +214,18 @@ input[type=range]::-ms-track{
|
|||
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 {
|
||||
text-decoration: underline dotted 1px var(--color-200);
|
||||
text-underline-offset: 2px;
|
||||
|
|
@ -237,7 +267,6 @@ input[type=range]::-ms-track{
|
|||
|
||||
// INPUT NUMBER ===============================================
|
||||
|
||||
// Masquer les spinners natifs partout
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -252,7 +281,6 @@ input[type="number"] {
|
|||
|
||||
.number-input{
|
||||
position: relative;
|
||||
// padding: 0 1ch!important;
|
||||
input{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
|
@ -274,87 +302,11 @@ input[type="number"] {
|
|||
width: 10px;
|
||||
height: auto;
|
||||
}
|
||||
svg path{
|
||||
fill: var(--color-interface-600);
|
||||
}
|
||||
svg path{ fill: var(--color-interface-600); }
|
||||
&:hover{
|
||||
svg path{
|
||||
fill: var(--color-interface-900);
|
||||
}
|
||||
svg path{ 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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
|
||||
|
|
@ -355,14 +356,53 @@ input[type=range]::-ms-track {
|
|||
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 {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) 1fr;
|
||||
}
|
||||
.field label {
|
||||
font-weight: 600;
|
||||
color: var(--color-800);
|
||||
align-self: center;
|
||||
}
|
||||
.field .input-with-unit {
|
||||
.field .input-with-range {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
|
@ -390,12 +430,9 @@ input[type=range]::-ms-track {
|
|||
grid-column: 2;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
grid-template-columns: var(--label-w) 1fr;
|
||||
}
|
||||
.field label {
|
||||
align-self: center;
|
||||
.checkbox-field {
|
||||
display: block;
|
||||
margin: calc(var(--space-xs) * 2) 0;
|
||||
}
|
||||
|
||||
.field-font {
|
||||
|
|
@ -406,13 +443,13 @@ input[type=range]::-ms-track {
|
|||
.field-font select {
|
||||
width: 100%;
|
||||
}
|
||||
.field-font .field-checkbox {
|
||||
.field-font .checkbox-field {
|
||||
grid-column: 2;
|
||||
padding-top: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
.field-font .field-checkbox label {
|
||||
.field-font .checkbox-field label {
|
||||
font-weight: 400;
|
||||
margin-left: 0.75ch;
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
|
|
@ -439,20 +476,6 @@ input[type=range]::-ms-track {
|
|||
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 {
|
||||
-webkit-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 {
|
||||
fill: var(--color-interface-900);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin: var(--space-m) 0;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -24,7 +24,7 @@
|
|||
<select v-model="fontFamily.value" :disabled="inheritanceLocked">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
<div class="field-checkbox">
|
||||
<div class="checkbox-field">
|
||||
<input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
|
||||
<label class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="fontSize.value"
|
||||
:min="0"
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="marginOuter.value"
|
||||
:min="0"
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<div class="settings-subsection">
|
||||
<div class="field" :class="{ 'field--view-only': inheritanceLocked }">
|
||||
<label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="paddingInner.value"
|
||||
:min="0"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-top">Haut</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="margins.top.value"
|
||||
:min="0"
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="margins.bottom.value"
|
||||
:min="0"
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-left">Gauche</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="margins.left.value"
|
||||
:min="0"
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
:class="{ 'field--view-only': inheritanceLocked }"
|
||||
>
|
||||
<label class="label-with-tooltip" data-css="margin-right">Droite</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
v-model="margins.right.value"
|
||||
:min="0"
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<label for="margin-top" class="label-with-tooltip" data-css="margin-top"
|
||||
>Haut</label
|
||||
>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
id="margin-top"
|
||||
v-model="margins.top.value"
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
data-css="margin-bottom"
|
||||
>Bas</label
|
||||
>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
id="margin-bottom"
|
||||
v-model="margins.bottom.value"
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
data-css="margin-left"
|
||||
>Gauche</label
|
||||
>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
id="margin-left"
|
||||
v-model="margins.left.value"
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
data-css="margin-right"
|
||||
>Droite</label
|
||||
>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
id="margin-right"
|
||||
v-model="margins.right.value"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<select id="text-font" v-model="font">
|
||||
<option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
|
||||
</select>
|
||||
<div class="field-checkbox">
|
||||
<div class="checkbox-field">
|
||||
<input id="text-italic" type="checkbox" v-model="italic" />
|
||||
<label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<input
|
||||
v-if="showRange"
|
||||
type="range"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="margin-editor">
|
||||
<div class="field field-margin-all">
|
||||
<label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
:id="id"
|
||||
:modelValue="simple.value"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div v-if="expanded" class="subsection collapsed-section">
|
||||
<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>
|
||||
<div class="input-with-unit">
|
||||
<div class="input-with-range">
|
||||
<NumberInput
|
||||
:id="`${id}-${side.key}`"
|
||||
:modelValue="detailed[side.key].value"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue