Commit b1012811 authored by Anne Cavalier's avatar Anne Cavalier

#77 amélioration du module collapse avec le retour du +/– avec des caractères...

#77 amélioration du module collapse avec le retour du +/– avec des caractères qui ont la même chasse. Réajustemnet des autres variables, règles CSS et de la doc en fonction.
parent cacfae4d
......@@ -7,17 +7,17 @@ $border-color-collapse-focus: $link-color !default;
$expandmore__button-padding: 0 1em !default;
$expand-symbol-size: .9em !default;
$expand-symbol-closed: '' !default;
$expand-symbol-open: '' !default;
$expand-symbol-size: .925em !default;
$expand-symbol-closed: '+' !default;
$expand-symbol-open: '\2212' !default;
$expand-symbol-position-v: top !default;
$expand-symbol-position-v-value: .2em !default;
$expand-symbol-position-v-value: .25em !default;
$expand-symbol-position-h: left !default;
$expand-symbol-position-h-value: 0 !default;
$expandmore__to_expand-padding: 0 1.4em !default;
$expandmore__to_expand-padding: 0 1.5em !default;
@import "style-collapse";
......@@ -14,6 +14,9 @@
color: inherit;
border: 0;
padding: $expandmore__button-padding;
width: 100%;
text-align: inherit;
&:focus {
outline: thin dotted;
border-color: $border-color-collapse-focus;
......@@ -39,7 +42,6 @@
content : $expand-symbol-closed;
}
.expandmore__button[aria-expanded=true] .expandmore__symbol:before ,
.expandmore__button[data-expanded=true] .expandmore__symbol:before {
content : $expand-symbol-open;
......
......@@ -21,7 +21,7 @@ Pour que le script fonctionne correctement, le code html doit répondre à deux
1. L’élément déclencheur doit porter la class `js-expandmore` et l’élément à montrer/cacher doit porter la class `js-to_expand`.
2. Ces deux éléments doivent être voisins immédiats dans la source.
Les styles présents dans le module sont les styles minimaux pour le bon fonctionnement du module.
Les styles présents dans le module sont les styles minimaux pour son bon fonctionnement.
Il est possible d’ajouter un bouton pour déplier / replier tous les blocs de la page. Ce bouton doit porter la classe `js-expandmore-all`.
Le texte affiché dans ce bouton se configure dans le fichier javascript.
......@@ -39,14 +39,14 @@ Les variables proposées dans ce module sont :
- `$border-color-collapse-focus` : couleur du symbole, sa valeur par défaut est `$link-color`;
- `$expandmore__button-padding` : padding du bouton, sa valeur par défaut est `0 1em`;
- `$expand-symbol-size` : taille du symbole, sa valeur par défaut est `.9em`;
- `$expand-symbol-closed` : symbole fermé, sa valeur par défaut est `''`;
- `$expand-symbol-open` : symbole ouvert, sa valeur par défaut est `''`;
- `$expand-symbol-size` : taille du symbole, sa valeur par défaut est `.925em`;
- `$expand-symbol-closed` : symbole fermé, sa valeur par défaut est `'+'`;
- `$expand-symbol-open` : symbole ouvert, sa valeur par défaut est `''`;
- `$expand-symbol-position-v` : position verticale du symbole, sa valeur par défaut est `top`;
- `$expand-symbol-position-v-value` : valeur de la position verticale, sa valeur par défaut est `.2em`;
- `$expand-symbol-position-h` : position horizontale du symbole, sa valeur par défaut est `left`;
- `$expand-symbol-position-h-value` : valeur de la position horizontale, sa valeur par défaut est `0`;
- `$expandmore__to_expand-padding` : padding de la zone dépliable, sa valeur par défaut est `0 1.4em`;
- `$expandmore__to_expand-padding` : padding de la zone dépliable, sa valeur par défaut est `0 1.5em`;
Exemple
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment