ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ
ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯈꯨꯠꯂꯥꯌ ꯑꯃꯅꯤ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯠ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯥꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯏꯃꯨꯡꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯈꯪꯗ꯭ꯔꯕꯗꯤ, ꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯁꯥꯁ ꯗꯣꯀꯁꯤꯡꯗꯥ ꯄꯥꯕꯤꯌꯨ꯫
ꯃꯦꯞ ꯑꯗꯨꯗꯥ $utilitiesꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ $utilitiesꯃꯦꯞ ꯑꯗꯨꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯦꯞ ꯑꯗꯨꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯀꯤ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯌꯥꯎꯏ:
| ꯑꯄꯥꯝꯕ ꯈꯟꯅꯕ | ꯃꯈꯜ | ꯋꯥꯔꯣꯜ |
|---|---|---|
property |
ꯃꯊꯧ ꯇꯥꯕ | ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯃꯃꯤꯡ, ꯃꯁꯤ ꯁ꯭ꯠꯔꯤꯡ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄꯦꯗꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯃꯥꯔꯖꯤꯟ)꯫ |
values |
ꯃꯊꯧ ꯇꯥꯕ | ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ, ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯚꯦꯜꯌꯨ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯃꯦꯞ ꯑꯃꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ nullꯃꯦꯞ ꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯃꯁꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯗꯦ꯫ |
class |
ꯈꯟꯕ ꯌꯥꯕ | ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯣꯏꯍꯅꯕꯥ ꯄꯥꯃꯗ꯭ꯔꯕꯗꯤ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯜ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯤ ꯑꯗꯨ ꯄꯤꯗ꯭ꯔꯕꯗꯤ classꯑꯃꯁꯨꯡ propertyꯀꯤ ꯑꯁꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤ ꯑꯦꯔꯦ ꯑꯃꯅꯤ, ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯑꯁꯤ propertyꯑꯦꯔꯦ ꯑꯗꯨꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯣꯏꯒꯅꯤ꯫ |
state |
ꯈꯟꯕ ꯌꯥꯕ | ꯌꯨꯇꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛꯇꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ :hoverꯅꯠꯠꯔꯒꯥ ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯒꯗꯕꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ꯫ :focusꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ |
responsive |
ꯈꯟꯕ ꯌꯥꯕ | ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ falseꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
rfs |
ꯈꯟꯕ ꯌꯥꯕ | ꯐ꯭ꯂꯨꯏꯗ ꯔꯤꯁ꯭ꯀꯦꯂꯤꯡ ꯇꯧꯕꯥ ꯉꯃꯍꯟꯅꯕꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ ꯃꯁꯤꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯪꯅꯕꯒꯤꯗꯃꯛ ꯑꯥꯔ.ꯑꯦꯐ.ꯑꯦꯁ.ꯀꯤ ꯄꯦꯖꯗꯥ ꯌꯦꯡꯕꯤꯌꯨ꯫ falseꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
print |
ꯈꯟꯕ ꯌꯥꯕ | ꯄ꯭ꯔꯤꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ falseꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
rtl |
ꯈꯟꯕ ꯌꯥꯕ | ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯁꯤ RTLꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯄꯥ ꯕꯨꯂꯦꯇꯤꯟ꯫ trueꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫ |
ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯟꯗꯣꯛꯅꯥ ꯇꯥꯀꯈꯤ꯫
ꯌꯨꯇꯤꯂꯤꯇꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯄꯨꯝꯅꯃꯛ $utilitiesꯑꯩꯈꯣꯌꯒꯤ _utilities.scssꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯀꯥꯡꯂꯨꯞ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯎꯕꯥ ꯐꯪꯏ:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯑꯥꯎꯠꯄꯨꯠ ꯇꯧꯔꯤ:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
ꯀꯁ꯭ꯇꯝ ꯀ꯭ꯂꯥꯁ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ꯫
classꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSSꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁ ꯄ꯭ꯔꯤꯐꯤꯛꯁ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ :
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ꯑꯥꯎꯠꯄꯨꯠ: ꯱.
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
ꯔꯥꯖ꯭ꯌꯁꯤꯡꯅꯥ ꯑꯦꯟ.ꯗꯤ.ꯑꯦ
stateꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ :hoverꯑꯃꯁꯨꯡ :focus. ꯔꯥꯖ꯭ꯌꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯄꯤꯕꯥ ꯃꯇꯃꯗꯥ, ꯑꯗꯨꯒꯨꯝꯕꯥ ꯁ꯭ꯌꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯀ꯭ꯂꯥꯁꯅꯦꯃꯁꯤꯡ ꯁꯦꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯍꯣꯚꯔꯗꯥ ꯑꯣꯄꯦꯁꯤꯇꯤ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ, ꯍꯥꯄꯆꯤꯜꯂꯨ state: hoverꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ .opacity-hover:hoverꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSS ꯑꯗꯨꯗꯥ ꯐꯪꯒꯅꯤ꯫
ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯔꯥ? ꯁ꯭ꯄꯦꯁ-ꯁꯦꯄꯥꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ: state: hover focus.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ꯑꯥꯎꯠꯄꯨꯠ: ꯱.
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫
ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) responsiveꯁꯦꯃꯒꯠꯅꯕꯥ ꯕꯨꯂꯦꯟ ꯍꯥꯄꯆꯤꯜꯂꯨ ..opacity-md-25
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ꯑꯥꯎꯠꯄꯨꯠ: ꯱.
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
ꯍꯣꯡꯂꯛꯂꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫
ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯇꯧꯕꯥ ꯌꯥꯏ:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫
printꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯅꯥ ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ@media print { ... } ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯁꯦꯃꯒꯅꯤ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯈꯛꯇꯃꯛ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ꯑꯥꯎꯠꯄꯨꯠ: ꯱.
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
ꯃꯔꯨꯑꯣꯏꯕꯥ꯫
ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛꯇꯥ !importantꯃꯈꯣꯌꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯌꯥꯑꯣꯍꯜꯂꯤ꯫ $enable-important-utilitiesꯅꯍꯥꯛꯅꯥ ꯁꯦꯇꯤꯡ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ true) ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫
ꯍꯧꯖꯤꯛꯇꯤ ꯅꯍꯥꯛꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯉꯂꯦ, ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫
$utilitiesꯑꯅꯧꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯃꯦꯄꯇꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ map-merge. ꯑꯩꯈꯣꯌꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ _utilities.scssꯑꯍꯥꯅꯕꯗꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ map-mergeꯅꯍꯥꯛꯀꯤ ꯑꯍꯦꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯐꯃꯁꯤꯗꯥ cursorꯚꯦꯜꯌꯨ ꯑꯍꯨꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯥ ꯀꯔꯝꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯄꯤꯔꯤ꯫
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫
ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯥ $utilitiesꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯃꯦꯄꯇꯥ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ ꯏꯅꯤꯁꯤꯑꯦꯜ ꯑꯃꯗꯒꯤ ꯍꯧꯒꯠꯂꯨ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯔꯝꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯥꯀꯄꯤꯌꯨ꯫ ꯃꯐꯝ ꯑꯗꯨꯗꯒꯤ, ꯌꯨꯇꯤꯂꯤꯇꯤꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯛꯁꯦꯁ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯦꯞ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ꯫map-getmap-mergewidthmap-merge"width"map-get
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫
ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯗꯕꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, borderꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯍꯟꯅꯕꯥ:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
ꯃꯁꯤꯅꯥ ꯍꯧꯖꯤꯛ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ .borderꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ ꯁꯦꯃꯒꯅꯤ꯫ .border-0ꯅꯍꯥꯛꯅꯥ ꯁꯦꯝꯕꯥ CSS ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯑꯣꯏꯒꯅꯤ:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯍꯣꯡꯗꯣꯀꯄꯥ꯫
v4 ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯥꯡꯈꯤꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯃꯤꯡ ꯀꯅꯚꯦꯟꯁꯟ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯈꯤꯕꯥ? ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯑꯄꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯒꯤ ꯔꯤꯖꯜꯇ ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ class—ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .ms-*ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯃꯃꯤꯡ ꯑꯔꯤꯕꯥ ꯑꯣꯏꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ .ml-*:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯥ꯫
ꯒ꯭ꯔꯨꯞ ꯀꯤ ꯑꯗꯨ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯃꯍꯦꯛꯇꯕꯨ nullꯂꯧꯊꯣꯀꯎ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯒꯤ widthꯌꯨꯇꯤꯂꯤꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯂꯧꯊꯣꯛꯅꯕꯥ, ꯑꯃꯥ ꯁꯦꯝꯃꯨ $utilities map-mergeꯑꯃꯁꯨꯡ "width": nullꯃꯅꯨꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯂꯧꯊꯣꯀꯄꯥ꯫
ꯑꯦꯖ ꯀꯦꯁ ꯈꯔꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯇꯧꯕꯗꯥ ꯑꯋꯥꯕꯥ ꯑꯣꯏꯍꯜꯂꯤ , ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯔꯕꯤꯛꯇꯥ ꯂꯥꯏꯟ ꯕ꯭ꯔꯦꯀꯁꯤꯡ꯫ rtlꯑꯁꯨꯝꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯟ ꯑꯁꯤ ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ false.
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
ꯑꯥꯎꯠꯄꯨꯠ: ꯱.
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
ꯃꯁꯤꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯑꯥꯎꯠꯄꯨꯠ ꯇꯧꯗꯦ, ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀꯟꯠꯔꯣꯜ removeꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤ .