Umi sa’ykuéra

Umi sa’ykuéra

Emohenda jehaipyre umi utilidad color rehegua reheve. Embojeguaséramo umi enlace, ikatu eipuru umi .link-*mbo’esyry pytyvõhára oguerekóva :hoverha :focushe’íva.

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

Opacidad rehegua

v5.1.0 guive, ojejapo umi purupyrã jehaipyre saꞌi rehegua Sass ndive ojeporúvo CSS mbaꞌekuaarã. Kóva oheja oñemoambue saꞌi tiempo real-pe oñembohekoꞌeỹre ha oñemoambuéramo 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.

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

<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 umi clase contextual ndaikatúi ojeporu ambue selector especificidad rupi. 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
      )
    ),