Skip to content

Commit 1b5a32e

Browse files
authored
feat(mistica-css): padding, stack, inline, align (#1384)
WEB-2254
1 parent 0da6411 commit 1b5a32e

3 files changed

Lines changed: 358 additions & 23 deletions

File tree

css/mistica-common.css

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,236 @@ label.mistica-chip > input:checked + span {
504504
pointer-events: none;
505505
}
506506

507+
/* Padding */
508+
509+
[class*='mistica-padding-'] {
510+
padding-left: var(--mistica-padding-left, var(--mistica-padding-x, var(--mistica-padding)));
511+
padding-right: var(--mistica-padding-right, var(--mistica-padding-x, var(--mistica-padding)));
512+
padding-top: var(--mistica-padding-top, var(--mistica-padding-y, var(--mistica-padding)));
513+
padding-bottom: var(--mistica-padding-bottom, var(--mistica-padding-y, var(--mistica-padding)));
514+
}
515+
516+
.mistica-padding-8 {
517+
--mistica-padding: 8px;
518+
}
519+
520+
.mistica-padding-16 {
521+
--mistica-padding: 16px;
522+
}
523+
524+
.mistica-padding-20 {
525+
--mistica-padding: 20px;
526+
}
527+
528+
.mistica-padding-24 {
529+
--mistica-padding: 24px;
530+
}
531+
532+
.mistica-padding-32 {
533+
--mistica-padding: 32px;
534+
}
535+
536+
.mistica-padding-y-8 {
537+
--mistica-padding-y: 8px;
538+
}
539+
540+
.mistica-padding-y-16 {
541+
--mistica-padding-y: 16px;
542+
}
543+
544+
.mistica-padding-y-20 {
545+
--mistica-padding-y: 20px;
546+
}
547+
548+
.mistica-padding-y-24 {
549+
--mistica-padding-y: 24px;
550+
}
551+
552+
.mistica-padding-y-32 {
553+
--mistica-padding-y: 32px;
554+
}
555+
556+
.mistica-padding-x-8 {
557+
--mistica-padding-x: 8px;
558+
}
559+
560+
.mistica-padding-x-16 {
561+
--mistica-padding-x: 16px;
562+
}
563+
564+
.mistica-padding-x-20 {
565+
--mistica-padding-x: 20px;
566+
}
567+
568+
.mistica-padding-x-24 {
569+
--mistica-padding-x: 24px;
570+
}
571+
572+
.mistica-padding-x-32 {
573+
--mistica-padding-x: 32px;
574+
}
575+
576+
.mistica-padding-left-8 {
577+
--mistica-padding-left: 8px;
578+
}
579+
580+
.mistica-padding-left-16 {
581+
--mistica-padding-left: 16px;
582+
}
583+
584+
.mistica-padding-left-20 {
585+
--mistica-padding-left: 20px;
586+
}
587+
588+
.mistica-padding-left-24 {
589+
--mistica-padding-left: 24px;
590+
}
591+
592+
.mistica-padding-left-32 {
593+
--mistica-padding-left: 32px;
594+
}
595+
596+
.mistica-padding-right-8 {
597+
--mistica-padding-right: 8px;
598+
}
599+
600+
.mistica-padding-right-16 {
601+
--mistica-padding-right: 16px;
602+
}
603+
604+
.mistica-padding-right-20 {
605+
--mistica-padding-right: 20px;
606+
}
607+
608+
.mistica-padding-right-24 {
609+
--mistica-padding-right: 24px;
610+
}
611+
612+
.mistica-padding-right-32 {
613+
--mistica-padding-right: 32px;
614+
}
615+
616+
.mistica-padding-top-8 {
617+
--mistica-padding-top: 8px;
618+
}
619+
620+
.mistica-padding-top-16 {
621+
--mistica-padding-top: 16px;
622+
}
623+
624+
.mistica-padding-top-20 {
625+
--mistica-padding-top: 20px;
626+
}
627+
628+
.mistica-padding-top-24 {
629+
--mistica-padding-top: 24px;
630+
}
631+
632+
.mistica-padding-top-32 {
633+
--mistica-padding-top: 32px;
634+
}
635+
636+
.mistica-padding-bottom-8 {
637+
--mistica-padding-bottom: 8px;
638+
}
639+
640+
.mistica-padding-bottom-16 {
641+
--mistica-padding-bottom: 16px;
642+
}
643+
644+
.mistica-padding-bottom-20 {
645+
--mistica-padding-bottom: 20px;
646+
}
647+
648+
.mistica-padding-bottom-24 {
649+
--mistica-padding-bottom: 24px;
650+
}
651+
652+
.mistica-padding-bottom-32 {
653+
--mistica-padding-bottom: 32px;
654+
}
655+
656+
/* Stack / Inline */
657+
658+
.mistica-stack {
659+
display: flex;
660+
flex-direction: column;
661+
}
662+
663+
.mistica-inline,
664+
.mistica-inline-wrap {
665+
display: flex;
666+
flex-direction: row;
667+
}
668+
669+
.mistica-inline-wrap {
670+
flex-wrap: wrap;
671+
}
672+
673+
.mistica-gap-8 {
674+
gap: 8px;
675+
}
676+
677+
.mistica-gap-16 {
678+
gap: 16px;
679+
}
680+
681+
.mistica-gap-20 {
682+
gap: 20px;
683+
}
684+
685+
.mistica-gap-24 {
686+
gap: 24px;
687+
}
688+
689+
.mistica-gap-32 {
690+
gap: 32px;
691+
}
692+
693+
/* Align */
694+
695+
[class*='mistica-align-'] {
696+
display: grid;
697+
width: 100%;
698+
height: 100%;
699+
}
700+
701+
.mistica-align-start {
702+
place-items: start;
703+
}
704+
705+
.mistica-align-end {
706+
place-items: end;
707+
}
708+
709+
.mistica-align-center {
710+
place-items: center;
711+
}
712+
713+
.mistica-align-x-start {
714+
justify-items: start;
715+
}
716+
717+
.mistica-align-x-end {
718+
justify-items: end;
719+
}
720+
721+
.mistica-align-x-center {
722+
justify-items: center;
723+
}
724+
725+
.mistica-align-y-start {
726+
align-items: start;
727+
}
728+
729+
.mistica-align-y-end {
730+
align-items: end;
731+
}
732+
733+
.mistica-align-y-center {
734+
align-items: center;
735+
}
736+
507737
/* Breadcrumbs */
508738
.mistica-breadcrumb ol {
509739
display: block;

0 commit comments

Comments
 (0)