Skip to content

Commit da0a953

Browse files
DavidNietoGonzalezdavidvdshop
DavidNietoGonzalez
and
davidvdshop
authored
feat(mistica-css): GridLayout (#1355)
[WEB-2192](https://jira.tid.es/browse/WEB-2192) --------- Co-authored-by: david.nieto <david.nieto@vdshop.es>
1 parent d26129e commit da0a953

2 files changed

Lines changed: 155 additions & 0 deletions

File tree

‎css/mistica-common.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -939,6 +939,62 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
939939
height: auto;
940940
}
941941

942+
/* Grid Layout */
943+
944+
.mistica-grid-layout {
945+
display: grid;
946+
grid-template-columns: repeat(12, 1fr);
947+
gap: 24px;
948+
}
949+
950+
@media (max-width: 1023px) {
951+
.mistica-grid-layout {
952+
grid-template-columns: minmax(0, 1fr);
953+
}
954+
955+
.mistica-grid-layout [class^="mistica-col-"] {
956+
grid-column: span 1;
957+
}
958+
959+
.mistica-col-1 {
960+
display: none;
961+
}
962+
}
963+
964+
@media (min-width: 1024px) and (max-width: 1367px) {
965+
.mistica-grid-layout {
966+
grid-column-gap: 16px;
967+
}
968+
}
969+
970+
.mistica-col-1 {
971+
grid-column: span 1;
972+
}
973+
974+
.mistica-col-3 {
975+
grid-column: span 3;
976+
}
977+
978+
.mistica-col-4 {
979+
grid-column: span 4;
980+
}
981+
982+
.mistica-col-5 {
983+
grid-column: span 5;
984+
}
985+
986+
.mistica-col-6 {
987+
grid-column: span 6;
988+
}
989+
990+
.mistica-col-8 {
991+
grid-column: span 8;
992+
}
993+
994+
.mistica-col-9 {
995+
grid-column: span 9;
996+
}
997+
942998
/* Table */
943999
.mistica-table {
9441000
border-collapse: separate;

‎examples/css/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -601,8 +601,107 @@ <h2 class="mistica-card__title">Title</h2>
601601
</a>
602602
</div>
603603
</div>
604+
605+
<h3 class="mistica-text-title2">Grid Layout</h3>
606+
<h4 class="mistica-text-title1">6 + 6</h4>
607+
<section class="mistica-grid-layout" id="mistica-grid">
608+
<div class="mistica-col-6">
609+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
610+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
611+
<use href="#mistica-grid-svg"></use>
612+
</svg>
613+
</div>
614+
</div>
615+
<div class="mistica-col-6">
616+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
617+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
618+
<use href="#mistica-grid-svg"></use>
619+
</svg>
620+
</div>
621+
</div>
622+
</section>
623+
<h4 class="mistica-text-title1">5 + 4</h4>
624+
<section class="mistica-grid-layout" id="mistica-grid">
625+
<div class="mistica-col-1"></div>
626+
<div class="mistica-col-5">
627+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
628+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
629+
<use href="#mistica-grid-svg"></use>
630+
</svg>
631+
</div>
632+
</div>
633+
<div class="mistica-col-1"></div>
634+
<div class="mistica-col-4">
635+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
636+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
637+
<use href="#mistica-grid-svg"></use>
638+
</svg>
639+
</div>
640+
</div>
641+
<div class="mistica-col-1"></div>
642+
</section>
643+
<h4 class="mistica-text-title1">4 + 6</h4>
644+
<section class="mistica-grid-layout" id="mistica-grid">
645+
<div class="mistica-col-1"></div>
646+
<div class="mistica-col-4">
647+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
648+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
649+
<use href="#mistica-grid-svg"></use>
650+
</svg>
651+
</div>
652+
</div>
653+
<div class="mistica-col-6">
654+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
655+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
656+
<use href="#mistica-grid-svg"></use>
657+
</svg>
658+
</div>
659+
</div>
660+
<div class="mistica-col-1"></div>
661+
</section>
662+
<h4 class="mistica-text-title1">8 + 4</h4>
663+
<section class="mistica-grid-layout" id="mistica-grid">
664+
<div class="mistica-col-8">
665+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
666+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
667+
<use href="#mistica-grid-svg"></use>
668+
</svg>
669+
</div>
670+
</div>
671+
<div class="mistica-col-4">
672+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
673+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
674+
<use href="#mistica-grid-svg"></use>
675+
</svg>
676+
</div>
677+
</div>
678+
</section>
679+
<h4 class="mistica-text-title1">3 + 9</h4>
680+
<section class="mistica-grid-layout" id="mistica-grid">
681+
<div class="mistica-col-3">
682+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
683+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
684+
<use href="#mistica-grid-svg"></use>
685+
</svg>
686+
</div>
687+
</div>
688+
<div class="mistica-col-9">
689+
<div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
690+
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
691+
<use href="#mistica-grid-svg"></use>
692+
</svg>
693+
</div>
694+
</div>
695+
</section>
604696
</div>
605697
</div>
606698
<script type="module" src="/main.js"></script>
607699
</body>
700+
701+
<svg style="display: none;">
702+
<symbol id="mistica-grid-svg">
703+
<line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
704+
<line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
705+
</symbol>
706+
</svg>
608707
</html>

0 commit comments

Comments
 (0)