core

variables

icon-size-map

$icon-size-map: (
  sm: 16px,
  md: 24px,
  lg: 32px
);

Description

$icon-size-map

Used by

z-indexes

$z-indexes: (
  auto: auto,
  under: -1,
  base: 0,
  over: 1,
  focus: 2000,
  menu: 2500,
  menu-focus: 3000,
  nav: 3500,
  nav-focus: 4000,
  consent: 4500,
  consent-focus: 5000,
  modal: 5500,
  modal-focus: 6000,
  modal-footer: 6500,
);

Description

Liste des z-index présent dans le DS

Type

Map

Used by

mixins

aspect-ratio

@mixin aspect-ratio($ratio, $block) { ... }

Description

Force un ratio d'aspect sur le block par l'ajout d'un pseudo-element en before

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ratio

key du ratio attendu selon la map $ratio-scale

String none
$block

détermine si le block est créé et sa taille correspondante

Size or Bool none

respond-from

@mixin respond-from($media: md) { ... }

Description

Set media query styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$media

Layout size ["xs", "sm", "md", "lg", "xl"]

Stringmd

Example

.foo {
  @include respond-from(md) {
  }
}

Used by

respond-to

@mixin respond-to($media: md) { ... }

Description

Set media query styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$media

Layout size ["xs", "sm", "md", "lg", "xl"]

Stringmd

Example

.foo {
  @include respond-to(md) {
  }
}

z-index

@mixin z-index($index-name) { ... }

Description

Mixin de gestion des z-index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$index-name

nom du calque de z-index

String none

Requires

grid-col

@mixin grid-col($size, $columns: $grid-columns) { ... }

Description

Définit la largeur de colonne

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Proportion de la taille de colonne

Number none
$columns

Nombre de colonne dans la grille (Par défaut $grid-columns = 12)

Number$grid-columns

Example

Définit la taille de colonne à 6 sur 12

.foo {
  @include grid-col(6);
}

Used by

grid-col-offset

@mixin grid-col-offset($size, $columns: $grid-columns) { ... }

Description

Définit le décalage de colonne (créé une marge à gauche)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Proportion du décalage de colonne

Number none
$columns

Nombre de colonne dans la grille (Par défaut $grid-columns = 12)

Number$grid-columns

Example

Définit la taille du décalage à 2 colonnes sur 12

.foo {
  @include grid-col-offset(2);
}

Used by

grid

@mixin grid($columns: $grid-settings, $with-container: true, $with-offsets: true) { ... }

Description

Génère les classes de colonne pour la grille ainsi que les offsets (optionnel)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

configuration de la grille

Map$grid-settings
$with-container

si true, définit les containers

Booltrue
$with-offsets

si true, définit les offsets

Booltrue

Example

Génère les colonnes

@include grid-generator();

Requires

all-ns-elements-selector

@mixin all-ns-elements-selector() { ... }

Description

Sélecteur de toutes les éléments avec une classe du design system ainsi que leur noeuds enfants

Parameters

None.

Requires

  • [function] ns

[private] _spacing

@mixin _spacing($property: "margin", $value: 2, $direction) { ... }

Description

Set space property

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$property

propriété à appliquer à l'espacement ["margin", "padding"]

String"margin"
$value

valeur de l'espacement en v ou w. peut être une liste si la direction n'est pas renseignée

Number or List2
$direction

direction de l'espacement ["x", "y", "top", "right", "bottom", "left"]

String none

Example

Set margin-bottom to 24px

.foo {
  @include _spacing("margin", 6v, "bottom");
}

Requires

functions

icon-size

@function icon-size($size: "md") { ... }

Description

Return icon size from map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Icon size from $icon-size-map (Default to "md" = 16px)

String"md"

Example

Set icon size to SM (12px)

.foo {
  width: icons-size(sm);
  height: icons-size(sm);
}

Requires

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Map deep get

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

clés des maps

Arglist none

Returns

Any type —

Valeur attendue

Author

  • Hugo Giraudel

ns

@function ns($name, $notation) { ... }

Description

Préfixage d'un élément css, généralement un nom de classe

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

nom de l'élément

String none
$notation

notation du sélecteur, par défaut un point pour les classes

String none

Used by

ns-group

@function ns-group($name) { ... }

Description

Préfixage d'une classe de groupe

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

nom de l'élément, à mettre au pluriel

String none

Requires

  • [function] ns

ns-attr

@function ns-attr($name, $value) { ... }

Description

Préfixage d'un attribut css

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

nom de l'attribut

String none
$value

valeur de l'attribut

String none

Requires

  • [function] ns

str-to-num

@function str-to-num($value) { ... }

Description

Fonction de transformation d'une string en nombre intégral

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

le nombre en chaîne de caractères

String none

Used by

str-replace

@function str-replace($stack, $needle, $content) { ... }

Description

Remplacement dans une chaine de caractères

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$stack

chaine de caractère où chercher

String none
$needle

élément à chercher

String none
$content

élément de remplacement

String none

Returns

String

la chaîne de caractères transformée

Used by

str-split

@function str-split($string, $separator) { ... }

Description

Découpage d'une chaine de caractères avec un séparateur particulier

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

chaine de caractère à découper

String none
$separator

séparateur

String none

clean-unit

@function clean-unit($value) { ... }

Description

Retourne la valeur numérique sans unité.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

la valeur avec unité

String none

Example

clean-unit(12px);

Used by

px-rem

@function px-rem($px, $root-font-size: $base-font-size-px) { ... }

Description

Return rem from px

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$px

Font size in pixels

String none
$root-font-size

Pixel font size for conversion

String$base-font-size-px

Example

Get 1rem conversion from 16px, using $base-font-size-px

.foo {
  font-size: px-rem(12px);
}

Requires

Used by

z-index

@function z-index($index-name) { ... }

Description

Fonction de gestion des z-index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$index-name

nom du calque de z-index

String none

Requires

Used by

font-weight

@function font-weight($scale: "regular") { ... }

Description

Return font-weight value from font-weight map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scale

Type scale value from $weight-scale (Default to "regular" = 400)

String"regular"

Example

Set font-weight to bold (700)

.foo {
  font-weight: font-weight("bold");
}

space

@function space($value) { ... }

Description

Return space value from type map and convert to rem.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

valeur de l'espacement, permet de convertir cet espacement de v (4px) ou w (8px) en rem

Number none

Example

Set margin-bottom to 24px

.foo {
  margin-bottom: space(6v);
}

Requires

Used by

forms

mixins

disabled-form-field

@mixin disabled-form-field($element: input) { ... }

Description

Mixin pour gérer l'état disabled avec sur un champ input avec un box-shadow

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$element noneStringinput

Example

On ajoute un style disabled sur un élément de type input

.foo {
  @include disabled-form-field(input);
}

disabled-form-choice

@mixin disabled-form-choice() { ... }

Description

Mixin pour gérer l'état disabled sur un label et les pseudo-elements before et after, l'input étant masqué

Parameters

None.

Example

On ajoute un style disabled sur le label et ses pseudo-elements

.foo {
  @include disabled-form-choice();
}

inputs

mixins

placeholder

@mixin placeholder() { ... }

Description

Mixin pour ajouter les préfixes vendor du placeholder

Parameters

None.

Example

.foo {
  @include placeholder {
    @content;
  }
}

legacy

mixins

legacy

@mixin legacy() { ... }

Description

Styles spécifiques pour les plateformes antérieures

Parameters

None.

Example

.foo {
  @include ie-hack() {
  }
}

not-legacy

@mixin not-legacy() { ... }

Description

Styles spécifiques pour les plateformes modernes, excluant les plateformes antérieures

Parameters

None.

Example

.foo {
  @include ie-hack() {
  }
}

radios

mixins

radio-rich

@mixin radio-rich() { ... }

Description

Mixin pour gérer l'affichage des boutons radios riches

Parameters

None.

Requires

  • [function] ns
  • [function] ns

schemes

mixins

[private] _box-shadow-border

@mixin _box-shadow-border($var, $width) { ... }

Description

Rendu des borders en box-shadow en copiant le système de width de border

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$var

custom property correspondant à la combinaison de couleur

Custom-property none
$width

Largeur de box-shadow correspondant au top right bottom left

List none

Used by

[private] _scheme-block-border

@mixin _scheme-block-border($module, $width) { ... }

Description

Création de classe permettant l'ajout de border sur les blocks

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$module

module sur lequel sera appliqué la bordure

String none
$width

Epaisseur de la bordure, fonctionne de manière similaire à la propriété css border-width

List none

Requires

Used by

scheme-body

@mixin scheme-body() { ... }

Description

Couleur de fond blanche par défaut sur le body

Parameters

None.

Requires

scheme-blocks

@mixin scheme-blocks() { ... }

Description

Initialisation des blocs de couleurs

Parameters

None.

Requires

[private] _stylize-component

@mixin _stylize-component($type, $color, $width) { ... }

Description

Stylisation du composant en tant que block de combinaison de couleur

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

le type de combinaison, voir settings blocks

String none
$color

la couleur du type

String none
$width

ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width)

List none

Requires

Used by

component-as-scheme

@mixin component-as-scheme($type, $color, $modifier, $width) { ... }

Description

Component as scheme permet de conférer à un composant le statut de block de combinaison de couleur

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

le type de combinaison, voir settings blocks

String none
$color

la couleur du type

String none
$modifier

est-ce que la couleur est assignée au composant par un modifier

Boolean none
$width

ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width)

List none

Requires

Used by

component-as-scheme-modifiers

@mixin component-as-scheme-modifiers($type, $width) { ... }

Description

Cette mixin permet d'assigner à un composant tous les modifiers d'un type de combinaison

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

le type de combinaison, voir settings blocks

String none
$width

ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width)

List none

Requires

scheme-element-data-uri-svg

@mixin scheme-element-data-uri-svg($set-name, $value, $prop) { ... }

Description

Combinaison de couleur appliquée à un svg intégré en data-uri

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$value

le SVG en data-uri

Object none
$prop

propriété sur laquelle est essignée le svg

String none

Example

@include scheme-element-data-uri-svg(g800, url("data:image/svg+xml;utf8,<svg><path fill="$COLOR" /></svg>"));

Requires

[private] _scheme-element

@mixin _scheme-element($set-name, $transition, $hover, $value, $element) { ... }

Description

Ajout d'une combinaison de couleur sur un élément pour un propriété donnée @@param {String} $prop - propriété affectée

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

objet auqel la transition de couleur est associée

Bool or String none
$hover

si true, un effet de hover est appliqué sur l'élément en correspondance avec la couleur. la valeur override permet de simplement changer la couleur de hover (si un hover a déja été appliqué sur l'élément)

Bool or String none
$value

la valeur appliquée à la propriété. la variable $COLOR est remplacée par la custom property de la combinaison de couleur

String or List none
$element

le sélécteur de l'élément

String none

Requires

Used by

scheme-element-bg-color

@mixin scheme-element-bg-color($set-name, $transition, $hover) { ... }

Description

Ajout d'une couleur de background sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none
$hover

si true, un effet de hover est appliqué sur l'élément en correspondance avec la couleur. la valeur override permet de simplement changer la couleur de hover (si un hover a déja été appliqué sur l'élément)

Bool or String none

Requires

scheme-element-text-color

@mixin scheme-element-text-color($set-name, $transition) { ... }

Description

Ajout d'une couleur de texte sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none

Requires

scheme-element-fill-color

@mixin scheme-element-fill-color($set-name, $transition) { ... }

Description

Ajout d'une couleur de fill sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none

Requires

scheme-element-border-color

@mixin scheme-element-border-color($set-name, $transition, $side, $value) { ... }

Description

Ajout d'une couleur de border sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none
$side

le côté affecté. valeurs: top, right, bottom, left

String none
$value

définition des propriétés de border

List none

Requires

scheme-element-outline-color

@mixin scheme-element-outline-color($set-name, $transition, $value) { ... }

Description

Ajout d'une couleur d'outline sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none
$value

définition des propriétés d'outline

List none

Requires

scheme-element-box-shadow-color

@mixin scheme-element-box-shadow-color($set-name, $transition, $value) { ... }

Description

Ajout d'une couleur de box-shadow sur un élément

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set-name

nom de la combinaison comme défini dans settings/sets

String none
$transition

si true, une transition de couleur est appliquée sur la propriété

Bool or String none
$value

définition des propriétés de box-shadow

List none

Requires

[private] _get-hover-vars

@mixin _get-hover-vars($color, $is-block) { ... }

Description

Définit les couleurs d'hover

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

couleur de l'élément

Color none
$is-block

est-ce que cette définition se fait au niveau d'un block de combinaison ?

Bool none

Requires

Used by

[private] _scheme-element-hover

@mixin _scheme-element-hover() { ... }

Description

Applique le hover sur un élément

Parameters

None.

Used by

[private] _theme-transition

@mixin _theme-transition() { ... }

Description

transition de thème.

Parameters

None.

Used by

define-vars

@mixin define-vars() { ... }

Description

Définition des custom properties de couleur

Parameters

None.

Requires

variables

scheme-blocks

$scheme-blocks: (
  light:(
    white: w bf500,
    grey-100: g100-g800 bf500,
    grey-200: g200 bf500,
    beige: beige bf500
  ),
  dark:(
    grey-800: g800-plain bf300-plain
  ),
  /*soft:(
    brown: b300 b500,
    blue-soft: bs300 bs500,
    blue-dark: bd300 bd500,
    green-light: gl300 gl500,
    green-medium: gm300 gm500,
    green-soft: gs300 gs500,
    green-warm: gw300 gw500,
    orange-dark: od300 od500,
    orange-medium: om300 om500,
    orange-soft: os300 os500,
    purple: p300 p500,
    pink-dark: pd300 pd500,
    pink-light: pl300 pl500,
    pink-soft: ps300 ps500,
    yellow-dark: yd300 yd500,
    yellow-medium: ym300 ym500,
  )*/
) !global;

Description

configuration des blocs de couleur Il y a 4 types de combinaisons de couleur :

  • light : les couleurs claires proches du blanc
  • dark : les couleurs foncées proches du noir
  • soft : les couleurs claires avec une teinte
  • strong : les couleurs foncées avec une teinte (non implémentée à ce stade)

pour chaque bloc, on définit 2 combinaisons de couleurs : la première pour le fond du wrapper la seconde pour les bordures du wrapper

Type

Map

Used by

scheme-elements-transitions

$scheme-elements-transitions: () !global;

Description

map des transitions par élément

Type

Map

Used by

scheme-sets

$scheme-sets: (
  // Bleu France, couleur primaire
  bf500: $blue-france-500 $blue-france-300 $grey-700 $grey-200,
  bf500-plain: $blue-france-500,
  w-bf500: $white $blue-france-500,
  bf300-plain: $blue-france-300,
  bf200-bf300: $blue-france-200 $blue-france-300,
  bf100-g750: $blue-france-100 $grey-750,
  // Transparence
  t-plain: transparent,
  t-w: transparent $white,
  // Échelle des gris
  g800: $grey-800 $white,
  g700: $grey-700 $grey-200,
  g600: $grey-600 $grey-300,
  g500: $grey-500 $grey-400,
  g400: $grey-400 $grey-500,
  g300: $grey-300 $grey-600,
  g200: $grey-200 $grey-700,
  g100: $grey-100 $grey-750,
  w: $white $grey-800,
  beige: $beige $grey-750 $grey-100,
  g800-plain: $grey-800,
  g600-g400: $grey-600 $grey-400,
  g400-t: $grey-400 transparent,
  g100-g800: $grey-100 $grey-800,
  w-g750: $white $grey-750,
  // Focus
  focus:$color-focus $color-focus-dark-mode,
  // Couleurs fonctionnelles
  info:$info $info-dark-mode,
  success:$success $success-dark-mode,
  // warning:$warning $warning-dark-mode, // inutilisé pour le moment
  error:$error $error-dark-mode,
  // Rouge Marianne
  rm300: $red-marianne-300 $grey-700,
  rm500: $red-marianne-500 $red-marianne-300,
  // Couleurs illustratives
  // b300: $brown-300 $grey-700,
  // b500: $brown-500 $brown-300,
  // bs300: $blue-soft-300 $grey-700,
  // bs500: $blue-soft-500 $blue-soft-300,
  // bd300: $blue-dark-300 $grey-700,
  // bd500: $blue-dark-500 $blue-dark-300,
  // gl300: $green-light-300 $grey-700,
  // gl500: $green-light-500 $green-light-300,
  // gm300: $green-medium-300 $grey-700,
  // gm500: $green-medium-500 $green-medium-300,
  // gs300: $green-light-300 $grey-700,
  // gs500: $green-light-500 $green-light-300,
  // gw300: $green-warm-300 $grey-700,
  // gw500: $green-warm-500 $green-warm-300,
  // od300: $orange-dark-300 $grey-700,
  // od500: $orange-dark-500 $orange-dark-300,
  // om300: $orange-dark-300 $grey-700,
  // om500: $orange-medium-500 $orange-medium-500,
  // os300: $orange-soft-300 $grey-700,
  // os500: $orange-soft-500 $orange-soft-300,
  // p300: $purple-300 $grey-700,
  // p500: $purple-500 $purple-300,
  // pd300: $pink-dark-300 $grey-700,
  // pd500: $pink-dark-500 $pink-dark-300,
  // pl300: $pink-light-300 $grey-700,
  // pl500: $pink-light-500 $pink-light-300,
  // ps300: $pink-soft-300 $grey-700,
  // ps500: $pink-soft-500 $pink-soft-300,
  // yd300: $yellow-dark-300 $grey-700,
  // yd500: $yellow-dark-500 $yellow-dark-300,
  // ym300: $yellow-medium-300 $grey-700,
  // ym500: $yellow-medium-500 $yellow-medium-300,
  // Ombre du scroll des tableaux. basé sur la couleur $grey-800 pour
  scroll-shadow: rgba(red($grey-800), green($grey-800), blue($grey-800), 0.16) rgba(red($grey-800), green($grey-800), blue($grey-800), 1),
  /// couleur de l'overlay. basé sur le set couleur g-500 (grey-500 grey-400) et gère les opacité
  overlay: rgba(red($grey-500), green($grey-500), blue($grey-500), 0.32) rgba(red($grey-400), green($grey-400), blue($grey-400), 0.32),
) !global;

Description

Configuration des blocs de couleur Il y a 4 types de combinaisons de couleur :

  • light : les couleurs claires proches du blanc
  • dark : les couleurs foncées proches du noir
  • soft : les couleurs claires avec une teinte
  • strong : les couleurs foncées avec une teinte (non implémentée à ce stade)

pour chaque combinaison de couuleur, on définit pour chaque type une couleur Si un type n'est pas défini, la couleur de type light (la première) remplace

Type

Map

Used by

functions

[private] _replace_color

@function _replace_color($value, $hex, $url-encode) { ... }

Description

Remplacement de la variable $COLOR par la couleur attendu

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

chaine de caractère dans laquelle remplacer la variable

String none
$hex

couleur de remplacement

Color none
$url-encode

si true, la couleur est url-encodé

Boolean none

Returns

String

retourne la variable avec la couleur intégrée

Requires

Used by

[private] _scheme-set-color

@function _scheme-set-color($set, $type) { ... }

Description

Obtenir une couleur dans un set

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set

combinaison de couleur

String none
$type

type de combinaison (light, dark, soft, strong)

String none

Returns

String

Retourne la couleur correspondant au $type dans un set de couleur définit dans settings/sets

Requires

Used by

[private] _get-scheme

@function _get-scheme($type, $name, $index) { ... }

Description

Obtenir la configuration d'un block de combinaison

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

type de combinaison (light, dark, soft, strong)

String none
$name

nom de la variation de bloc

String none
$index

si un index est définit, retourne l'élément à l'index dans la variation, sinon retourne l'ensemble de la variation (liste)

Int none

Returns

String

Retourne la configuration d'un bloc comme définit dans settings/blocks

Requires

Used by

[private] _overlay-color

@function _overlay-color($color, $factor) { ... }

Description

Obtenir la couleur d'hover

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

couleur de base

Color none
$factor

mutliplicateur permettant d'amplifier l'effet

Number none

Returns

Color

Retourne la couleur modifiée pour le hover avec une transparence de 0.5

Used by

toggles

mixins

disabled-toggle-choice

@mixin disabled-toggle-choice() { ... }

Description

Mixin pour gérer les styles quand le toggle est inactif, au niveau de l'input, du label et de ses pseudos elements before et after

Parameters

None.

Example

On ajoute un style disabled sur l’input, le label et ses pseudo-elements

.foo {
  @include disabled-toggle-choice();
}