ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

ꯕꯦꯖ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯕꯦꯖ-ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯅꯣꯃꯦꯟꯀꯦꯂꯆꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯅꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯁꯦꯌꯔ ꯇꯧꯔꯕꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯀꯌꯥ ꯑꯃꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯃꯗꯥ ꯒ꯭ꯔꯨꯞ ꯇꯧꯏ, ꯃꯗꯨꯗꯤ .btn, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯚꯦꯔꯤꯑꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ ꯒ꯭ꯔꯨꯞ ꯇꯧꯏ, ꯃꯗꯨꯗꯤ .btn-primaryꯅꯠꯔꯒꯥ .btn-success.

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ, ꯑꯩꯈꯣꯌꯅꯥ @eachꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯏꯇꯤꯔꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯥꯁꯀꯤ ꯂꯨꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤꯅꯥ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯒꯤ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡ $theme-colorsꯁꯦꯃꯒꯠꯄꯗꯥ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡ ꯁꯦꯝꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ꯫ ꯅꯍꯥꯛꯅꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯗꯨ ꯂꯨꯄꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫

ꯂꯨꯄꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯕꯦꯖ-ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯣꯗꯇꯥ ꯁꯥꯡꯗꯣꯀꯍꯅꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯂꯨꯄꯁꯤꯡꯒꯤ ꯗꯣꯀꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯌꯥ ꯑꯁꯤ ꯕꯦꯖ-ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯁꯤ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯃꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .btn) ꯌꯥꯑꯣꯏ ꯑꯗꯨꯒꯥ ꯁ꯭ꯇꯥꯏꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .btn-danger) ꯊꯃꯖꯤꯜꯂꯤ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ $theme-colorsꯑꯩꯈꯣꯌꯒꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯃꯤꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯉꯝꯅꯕꯥ ꯃꯦꯄꯇꯒꯤ ꯁꯦꯃꯈꯤꯕꯅꯤ꯫

$theme-colorsꯃꯈꯥꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯃꯦꯞ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯨꯞ ꯇꯧꯗꯨꯅꯥ .alertꯑꯃꯁꯨꯡ .list-groupꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯅꯤ ꯄꯤꯔꯤ꯫

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯁꯥꯁ ꯂꯨꯄꯁꯤꯡ ꯑꯁꯤ ꯃꯆꯨꯒꯤ ꯃꯦꯄꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯊꯃꯗꯦ, ꯅꯠꯔꯒꯥ꯫ ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯅꯍꯥꯛꯅꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯁ ꯃꯦꯄꯀꯤꯗꯃꯛꯇꯥ @eachꯂꯨꯞ ꯑꯃꯥ ꯃꯤꯛꯁ ꯇꯧꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯁꯤ ꯂꯧꯕꯤꯌꯨ꯫$grid-breakpoints

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ $grid-breakpoints, ꯅꯍꯥꯛꯀꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯗꯨ ꯃꯦꯞ ꯑꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯏꯇꯤꯔꯦꯠ ꯇꯧꯔꯤꯕꯥ ꯂꯨꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯅꯤ꯫

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯒ꯭ꯔꯤꯗ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯁꯥꯁ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯁꯦꯃꯒꯠꯄꯥ꯫

ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯗꯣꯞꯇ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯀꯁꯤꯜꯂꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯑꯩꯈꯣꯌ ꯏꯁꯥꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡꯗꯥ ꯀꯁ꯭ꯇꯝ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯁꯥꯡꯗꯣꯀꯈ꯭ꯔꯦ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯑꯥꯎꯇꯁꯤꯡꯒꯨꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯕꯦꯖ ꯑꯃꯁꯨꯡ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯨꯝꯅꯥ ꯁꯦꯃꯒꯠꯂꯤ꯫

<div class="callout">...</div>

ꯅꯍꯥꯛꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯂꯩꯔꯝꯂꯒꯅꯤ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯗꯨ .callout. ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯚꯦꯔꯤꯑꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯏ꯫

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

ꯀꯣꯂꯑꯥꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯗꯨꯒꯨꯝꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯗꯨ ꯁꯨꯞꯅꯇꯒꯤ border-left-color. ꯅꯍꯥꯛꯅꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯜꯂꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯐꯦꯃꯤꯂꯤ ꯑꯗꯨ ꯐꯪꯒꯅꯤ: