Umi sa’ykuéra
Ombohasa significado rupive colorpeteĩ puñado de clases de utilidad de color reheve. Oike pytyvõ estilo enlace estado hover ndive, avei.
Umi sa’ykuéra
Embojegua jehaipyre umi utilidad color rehegua reheve. Embojeguaséramo umi enlace, ikatu eipuru umi .link-*mbo’esyry pytyvõhára oguerekóva :hoverha :focushe’íva.
.jehaipyre-primaria rehegua
.jehaipyre-mokõiha
.jehaipyre-jehupytyrã
.texto-peligro rehegua
.jehaipyre-ñemomarandu
.jehaipyre-marandu rehegua
.jehaipyre-hesape
.jehaipyre-pytũ
.jehaipyre-tete rehegua
.jehaipyre oñembogueva’ekue
.jehaipyre-morotĩ
.jehaipyre-morotĩ-50
.jehaipyre-morotĩ-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Ombohasávo he’iséva umi tecnología oipytyvõvape
Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hiddenmboꞌepy ndive.
Especificidad rehegua
Sapyꞌante ndaikatúi ojeporu umi clase contextual rehegua oguerekógui especificidad ambue selector rehegua. Oĩ káso, peteĩ tembiaporã suficiente haꞌehína embojere ne elemento contenido peteĩ <div>térã hetave elemento semántico-pe pe clase reipotáva ndive.
Sass rehegua
Oĩve ko’ã Sass rembiaporã, ehechamína emoñe’ẽ hag̃ua ore mba’ekuaarã CSS jeporupyre oikeva’ekue rehegua (oñehenóiva CSS mba’ekuaarã) sa’ykuéra ha hetave mba’épe g̃uarã.
Variables rehegua
Hetave colorutilidad oñegenera ñande tema color-kuéra rupive, oñeasigna jeýva ñande variable paleta de colores genérico-gui.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Ojeguereko avei umi saꞌi escala gris rehegua, ha katu ojepuru peteĩ subconjunto añoite ojejapo hag̃ua oimeraẽva utilidad.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Mapa rehegua
Upéi oñemoĩ umi tema saꞌi peteĩ Sass mapa-pe ikatu hag̃uáicha jajapo bucle hesekuéra jajapo hag̃ua ñande utilidad, componente modificador ha hetave mbaꞌe.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Umi colores escala de grises ojeguereko avei peteĩ mapa Sass ramo. Ko mapa ndojeporúi ojejapo hag̃ua mba’eveichagua utilidad.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
API de Utilidades rehegua
Umi utilidad color rehegua ojedeclara ñande utilidad API-pe ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),