Skip to content

Commit ee67b56

Browse files
Spiderpig86Spiderpig86
committed
✨ feat(vertical-align.scss): Add vertical-align util classes
1 parent 6997266 commit ee67b56

11 files changed

Lines changed: 275 additions & 3 deletions

‎dist/cirrus-all.css‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21793,6 +21793,198 @@ ul .divider::after {
2179321793
transition-duration: 1000ms !important;
2179421794
}
2179521795
}
21796+
.u-align-baseline {
21797+
vertical-align: baseline !important;
21798+
}
21799+
21800+
.u-align-top {
21801+
vertical-align: top !important;
21802+
}
21803+
21804+
.u-align-middle {
21805+
vertical-align: middle !important;
21806+
}
21807+
21808+
.u-align-bottom {
21809+
vertical-align: bottom !important;
21810+
}
21811+
21812+
.u-align-text-top {
21813+
vertical-align: text-top !important;
21814+
}
21815+
21816+
.u-align-text-bottom {
21817+
vertical-align: text-bottom !important;
21818+
}
21819+
21820+
.u-align-sub {
21821+
vertical-align: sub !important;
21822+
}
21823+
21824+
.u-align-super {
21825+
vertical-align: super !important;
21826+
}
21827+
21828+
@media screen and (min-width: 640px) {
21829+
.u-align-baseline-sm {
21830+
vertical-align: baseline !important;
21831+
}
21832+
}
21833+
@media screen and (min-width: 640px) {
21834+
.u-align-top-sm {
21835+
vertical-align: top !important;
21836+
}
21837+
}
21838+
@media screen and (min-width: 640px) {
21839+
.u-align-middle-sm {
21840+
vertical-align: middle !important;
21841+
}
21842+
}
21843+
@media screen and (min-width: 640px) {
21844+
.u-align-bottom-sm {
21845+
vertical-align: bottom !important;
21846+
}
21847+
}
21848+
@media screen and (min-width: 640px) {
21849+
.u-align-text-top-sm {
21850+
vertical-align: text-top !important;
21851+
}
21852+
}
21853+
@media screen and (min-width: 640px) {
21854+
.u-align-text-bottom-sm {
21855+
vertical-align: text-bottom !important;
21856+
}
21857+
}
21858+
@media screen and (min-width: 640px) {
21859+
.u-align-sub-sm {
21860+
vertical-align: sub !important;
21861+
}
21862+
}
21863+
@media screen and (min-width: 640px) {
21864+
.u-align-super-sm {
21865+
vertical-align: super !important;
21866+
}
21867+
}
21868+
@media screen and (min-width: 768px) {
21869+
.u-align-baseline-md {
21870+
vertical-align: baseline !important;
21871+
}
21872+
}
21873+
@media screen and (min-width: 768px) {
21874+
.u-align-top-md {
21875+
vertical-align: top !important;
21876+
}
21877+
}
21878+
@media screen and (min-width: 768px) {
21879+
.u-align-middle-md {
21880+
vertical-align: middle !important;
21881+
}
21882+
}
21883+
@media screen and (min-width: 768px) {
21884+
.u-align-bottom-md {
21885+
vertical-align: bottom !important;
21886+
}
21887+
}
21888+
@media screen and (min-width: 768px) {
21889+
.u-align-text-top-md {
21890+
vertical-align: text-top !important;
21891+
}
21892+
}
21893+
@media screen and (min-width: 768px) {
21894+
.u-align-text-bottom-md {
21895+
vertical-align: text-bottom !important;
21896+
}
21897+
}
21898+
@media screen and (min-width: 768px) {
21899+
.u-align-sub-md {
21900+
vertical-align: sub !important;
21901+
}
21902+
}
21903+
@media screen and (min-width: 768px) {
21904+
.u-align-super-md {
21905+
vertical-align: super !important;
21906+
}
21907+
}
21908+
@media screen and (min-width: 1024px) {
21909+
.u-align-baseline-lg {
21910+
vertical-align: baseline !important;
21911+
}
21912+
}
21913+
@media screen and (min-width: 1024px) {
21914+
.u-align-top-lg {
21915+
vertical-align: top !important;
21916+
}
21917+
}
21918+
@media screen and (min-width: 1024px) {
21919+
.u-align-middle-lg {
21920+
vertical-align: middle !important;
21921+
}
21922+
}
21923+
@media screen and (min-width: 1024px) {
21924+
.u-align-bottom-lg {
21925+
vertical-align: bottom !important;
21926+
}
21927+
}
21928+
@media screen and (min-width: 1024px) {
21929+
.u-align-text-top-lg {
21930+
vertical-align: text-top !important;
21931+
}
21932+
}
21933+
@media screen and (min-width: 1024px) {
21934+
.u-align-text-bottom-lg {
21935+
vertical-align: text-bottom !important;
21936+
}
21937+
}
21938+
@media screen and (min-width: 1024px) {
21939+
.u-align-sub-lg {
21940+
vertical-align: sub !important;
21941+
}
21942+
}
21943+
@media screen and (min-width: 1024px) {
21944+
.u-align-super-lg {
21945+
vertical-align: super !important;
21946+
}
21947+
}
21948+
@media screen and (min-width: 1280px) {
21949+
.u-align-baseline-xl {
21950+
vertical-align: baseline !important;
21951+
}
21952+
}
21953+
@media screen and (min-width: 1280px) {
21954+
.u-align-top-xl {
21955+
vertical-align: top !important;
21956+
}
21957+
}
21958+
@media screen and (min-width: 1280px) {
21959+
.u-align-middle-xl {
21960+
vertical-align: middle !important;
21961+
}
21962+
}
21963+
@media screen and (min-width: 1280px) {
21964+
.u-align-bottom-xl {
21965+
vertical-align: bottom !important;
21966+
}
21967+
}
21968+
@media screen and (min-width: 1280px) {
21969+
.u-align-text-top-xl {
21970+
vertical-align: text-top !important;
21971+
}
21972+
}
21973+
@media screen and (min-width: 1280px) {
21974+
.u-align-text-bottom-xl {
21975+
vertical-align: text-bottom !important;
21976+
}
21977+
}
21978+
@media screen and (min-width: 1280px) {
21979+
.u-align-sub-xl {
21980+
vertical-align: sub !important;
21981+
}
21982+
}
21983+
@media screen and (min-width: 1280px) {
21984+
.u-align-super-xl {
21985+
vertical-align: super !important;
21986+
}
21987+
}
2179621988
.u-z-n1 {
2179721989
z-index: -1 !important;
2179821990
}

‎dist/cirrus-all.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cirrus-core.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16768,6 +16768,38 @@ ul .divider::after {
1676816768
transition-duration: 1000ms !important;
1676916769
}
1677016770

16771+
.u-align-baseline {
16772+
vertical-align: baseline !important;
16773+
}
16774+
16775+
.u-align-top {
16776+
vertical-align: top !important;
16777+
}
16778+
16779+
.u-align-middle {
16780+
vertical-align: middle !important;
16781+
}
16782+
16783+
.u-align-bottom {
16784+
vertical-align: bottom !important;
16785+
}
16786+
16787+
.u-align-text-top {
16788+
vertical-align: text-top !important;
16789+
}
16790+
16791+
.u-align-text-bottom {
16792+
vertical-align: text-bottom !important;
16793+
}
16794+
16795+
.u-align-sub {
16796+
vertical-align: sub !important;
16797+
}
16798+
16799+
.u-align-super {
16800+
vertical-align: super !important;
16801+
}
16802+
1677116803
.u-z-n1 {
1677216804
z-index: -1 !important;
1677316805
}

‎dist/cirrus-core.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cirrus.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16769,6 +16769,38 @@ ul .divider::after {
1676916769
transition-duration: 1000ms !important;
1677016770
}
1677116771

16772+
.u-align-baseline {
16773+
vertical-align: baseline !important;
16774+
}
16775+
16776+
.u-align-top {
16777+
vertical-align: top !important;
16778+
}
16779+
16780+
.u-align-middle {
16781+
vertical-align: middle !important;
16782+
}
16783+
16784+
.u-align-bottom {
16785+
vertical-align: bottom !important;
16786+
}
16787+
16788+
.u-align-text-top {
16789+
vertical-align: text-top !important;
16790+
}
16791+
16792+
.u-align-text-bottom {
16793+
vertical-align: text-bottom !important;
16794+
}
16795+
16796+
.u-align-sub {
16797+
vertical-align: sub !important;
16798+
}
16799+
16800+
.u-align-super {
16801+
vertical-align: super !important;
16802+
}
16803+
1677216804
.u-z-n1 {
1677316805
z-index: -1 !important;
1677416806
}

‎dist/cirrus.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/cirrus-all.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
TRANSITION-DURATION: true,
3232
LINE-HEIGHT: true,
3333
BORDER-WIDTH: true,
34+
VERTICAL-ALIGN: true,
3435
),
3536
),
3637
);

‎src/internal/_config.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ $default-config: (
6161
flags.$LETTER-SPACING: false,
6262
flags.$LINE-HEIGHT: false,
6363
flags.$BORDER-WIDTH: false,
64+
flags.$VERTICAL-ALIGN: false,
6465
),
6566
// Extend all existing styles here
6667
extend:
@@ -812,6 +813,7 @@ $default-config: (
812813
1000: 1000ms,
813814
),
814815
),
816+
vertical-align: (functions.to-property-map((baseline, top, middle, bottom, text-top, text-bottom, sub, super))),
815817
widths:
816818
functions.map-multi-merge(
817819
(
@@ -907,6 +909,7 @@ $round: functions.get-with-extend($all-config, round);
907909
$shadows: functions.get-with-extend($all-config, shadows);
908910
$spacing-system: functions.get-with-extend($all-config, sizing-system);
909911
$transition-durations: functions.get-with-extend($all-config, transitions, durations);
912+
$vertical-alignments: functions.get-with-extend($all-config, vertical-align);
910913
$z-indexes: functions.get-with-extend($all-config, z-index);
911914

912915
/*

‎src/internal/_flags.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,4 @@ $BLUR: 'BLUR';
6262
$TRANSITION-DURATION: 'TRANSITION-DURATION';
6363
$LINE-HEIGHT: 'LINE-HEIGHT';
6464
$BORDER-WIDTH: 'BORDER-WIDTH';
65+
$VERTICAL-ALIGN: 'VERTICAL-ALIGN';

‎src/utils/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
@forward "./utils/position";
1111
@forward "./utils/shadows";
1212
@forward "./utils/transitions";
13+
@forward "./utils/vertical-align";
1314
@forward "./utils/zindex";

0 commit comments

Comments
 (0)