Halluuwwan

Halluuwwan

Faayidaa halluutiin barruu halluu itti godhi. Yoo hidhannoo halluu itti gochuu barbaadde, .link-*gita gargaaraa kanneen qaban :hoverfi :focusstates fayyadamuu dandeessa.

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

Opaasitii

v5.1.0 irraa eegalee, faayidaan halluu barruu jijjiiramoota CSS fayyadamuun Sass waliin uumamu. Kunis jijjiirama halluu yeroo dhugaa qindeessaa fi jijjiirama iftoomina alfaa daayinamikii malee hayyama.

Akkaataa itti hojjetu

.text-primaryMee faayidaa keenya durtii ilaali .

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

Jijjiiramaa CSS keenyaa --bs-primary(gatii 13, 110, 253) RGB gosa fayyadamnee jijjiiramaa CSS lammaffaa, --bs-text-opacity, iftoomina alfaadhaaf (gatii durtii waliin 1galata jijjiiramaa CSS naannoo) walitti qabsiifna. Kana jechuun yeroo kamiyyuu amma fayyadamtu , gatii .text-primaryshallagame kee . Jijjiiramaan CSS naannoo tokkoon tokkoo gita keessa jiru dhimmoota dhaalaa irraa fagaata kanaaf fakkeenyonni faayilii ofumaan iftoomina alfaa fooyya'e hin qaban.colorrgba(13, 110, 253, 1).text-*

Fakkeenya

Opaasitii sana jijjiiruuf, --bs-text-opacitykaraa akkaataa amala ykn akkaataa sarara keessaa irra darbi.

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

Yookiin, faayidaa kamiyyuu keessaa filadhu .text-opacity:

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

Addaa ta’uu

Yeroo tokko tokko gitaawwan haalata (contextual classes) sababa adda ta'uu filannoo biraatiin hojiirra ooluu hin danda'an. Haala tokko tokko keessatti, furmaanni gahaan qabiyyee qaama keetii qaama <div>hiikaa ykn isaa ol gita barbaadame waliin marsuudha.

Sass jedhama

Dalagaa Sass armaan gadii dabalatee, waa'ee amaloota amala CSS keenya hammataman (aka jijjiiramoota CSS) halluuwwanii fi kkf dubbisuu yaadaa.

Jijjiiramoota

Faayidaaleen baay'een colorhalluuwwan mata duree keenyaatiin kan uumaman yoo ta'u, jijjiiramoota paaletii halluu waliigalaa keenyaa irraa irra deebi'amee ramadama.

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

Halluuwwan halluu diimaas ni jiru, garuu tuuta xiqqaa qofti faayidaa kamiyyuu uumuuf fayyadama.

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

Kaartaa

Halluuwwan mata duree sana booda kaartaa Sass keessa kaa'amu kanaaf isaan irratti loop gochuun faayidaa keenya, fooyyessitoota qaamaa fi kkf maddisiisuu dandeenya.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Halluuwwan halluu diimaa akka kaartaa Sass ttis ni argamu. Kaartaan kun faayidaa kamiyyuu maddisiisuudhaaf hin oolu.

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

Halluuwwan RGB kaartaa Sass adda ta'e irraa uumamu:

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

Akkasumas halluu opacities sana irratti kaartaa mataa isaanii kan utilities API fayyadame waliin ijaaru:

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

Faayidaaleen halluu API faayidaa keenya keessatti labsamu bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.

    "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
      )
    ),