Fondation - Référence Sass hors toile
Variables
Vous pouvez modifier les styles des composants à l'aide des variables SASS suivantes, comme indiqué dans le tableau -
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $offcanvas-size Il spécifie la largeur du menu hors canevas. |
Nombre | 250px |
| 2 | $offcanvas-background Il affiche la couleur d'arrière-plan d'un menu hors canevas. |
Couleur | $ gris clair |
| 3 | $offcanvas-zindex Il spécifie le Z-index d'un menu hors canevas. |
Nombre | -1 |
| 4 | $offcanvas-transition-length Il affiche la durée de l'animation dans un menu hors canevas. |
Nombre | 0,5 s |
| 5 | $offcanvas-transition-timing Il spécifie la fonction de synchronisation du menu hors canevas de l'animation. |
Mot-clé | facilité |
| 6 | $offcanvas-fixed-reveal Si cela est vrai, un hors canevas révélé peut fixer la position du hors canevas révélé en le définissant sur vrai. |
vrai | |
| sept | $offcanvas-exit-background Il affiche la couleur d'arrière-plan de la superposition du menu hors canevas. |
Couleur | rgba ($ blanc, 0,25) |
| 8 | $maincontent-class Il utilise la classe CSS pour la zone de contenu principale. |
"contenu hors canevas" | |
| 9 | $maincontent-shadow Il affiche l'ombre de la boîte pour la zone de contenu principale. |
Ombre | 0 0 10px rgba ($ noir, 0,5) |
| dix | $titlebar-background Il affiche la couleur d'arrière-plan d'une barre de titre. |
Couleur | $ noir |
| 11 | $titlebar-color Il définit la couleur du texte pour le texte à l'intérieur d'une barre de titre. |
Couleur | $ blanc |
| 12 | $titlebar-padding Il définit le remplissage à l'intérieur d'une barre de titre. |
Longueur | 0,5rem |
| 13 | $titlebar-text-font-weight Il spécifie le poids de la police du texte. |
Poids | audacieux |
| 14 | $titlebar-icon-color Il définit la couleur de l'icône de la barre de titre du menu. |
Couleur | $ blanc |
| 15 | $titlebar-icon-color-hover Il définit la couleur de l'icône de la barre de titre du menu au survol. |
Couleur | $ gris moyen |
| 16 | $titlebar-icon-spacing Il spécifie l'espacement entre l'icône de menu et le texte à l'intérieur d'une barre de titre. |
Longueur | 0,25rem |
Mixins
Vous pouvez utiliser les mixins pour créer la structure de classe CSS pour vos composants comme décrit ci-dessous.
hors-toile-basiques
Il ajoute des styles pour hors toile et les styles peuvent être inclus à l'aide du mixin suivant -
@include off-canvas-basics;base hors toile
Il spécifie les styles de base pour le menu hors canevas et vous pouvez inclure des styles à l'aide du mixin suivant -
@include off-canvas-base;hors-toile-révéler
Il spécifie les styles qui révèlent le menu hors canevas.
@include off-canvas-reveal($position);Il peut être spécifié comme défini dans le tableau suivant -
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $position Il définit la position du menu hors canevas. |
Mot-clé | la gauche |