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.

Ko páhinape

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

<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>

Ñemboheko: Oñemoĩvo .text-opacity-*mbaꞌeporã ha CSS mbaꞌekuaarã jehaipyre purupyrãme g̃uarã, .text-black-50ha .text-white-50ojeheja rei v5.1.0 guive. Ojepe'áta hikuái v6.0.0-pe.

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.

Opacidad rehegua

Oñemoĩve v5.1.0-pe

v5.1.0 guive, ojejapo umi purupyrã jehaipyre saꞌi rehegua Sass ndive ojeporúvo CSS mbaꞌekuaarã. Kóva oheja oñemoambue sa’y tiempo real-pe oñemboheko’ỹre ha oñemoambuévo transparencia alfa dinámica.

Mba’éichapa omba’apo

Ñapensamína ñande .text-primaryutilidad por defecto rehe.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Jaipuru peteĩ versión RGB ñande --bs-primary(oguerekóva valor 13, 110, 253) CSS variable ha ñamoĩ peteĩ mokõiha CSS variable, --bs-text-opacity, alfa transparencia-pe g̃uarã (oguerekóva peteĩ valor por defecto 1aguyje peteĩ CSS variable local-pe). Upéva he’ise oimeraẽ jave reiporúva .text-primaryko’áĝa, nde colorvalor oñekomputava’ekue ha’e rgba(13, 110, 253, 1). Pe variable CSS local peteĩteĩva .text-*mbo’esyry ryepýpe omboyke umi mba’e’oka herencia rehegua upéicha umi instancia anidado umi utilidad rehegua ndoguerekói ijeheguiete peteĩ transparencia alfa oñemoambuéva.

Tembiecharã

Emoambue hag̃ua upe opacidad, embogue --bs-text-opacityumi estilo personalizado térã estilo en línea rupive.

Kóva ha’e jehaipyre ypykue ñepyrũrã

Kóva ha’e 50% opacidad jehaipyre primaria

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Térã, eiporavo oimeraẽva umi .text-opacityutilidad apytégui:

Kóva ha’e jehaipyre ypykue ñepyrũrã

Kóva ha’e 75% opacidad jehaipyre primaria

Kóva ha’e 50% opacidad jehaipyre primaria

Kóva ha’e 25% opacidad jehaipyre primaria

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

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
);

Umi sa’y RGB ojejapo peteĩ mapa Sass añóntegui:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Ha umi opacidad color rehegua omopuꞌa upéva ári imápa imbaꞌeteéva reheve ojeporúva API utilidad rehegua:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

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,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),