//////////////////////// // CORE / OBJECTS / GRID //////////////////////// .dcf-grid, .dcf-grid-full, .dcf-grid-full\@sm, .dcf-grid-full\@md, .dcf-grid-full\@lg, .dcf-grid-full\@xl, .dcf-grid-halves, .dcf-grid-halves\@sm, .dcf-grid-halves\@md, .dcf-grid-halves\@lg, .dcf-grid-halves\@xl, .dcf-grid-thirds, .dcf-grid-thirds\@sm, .dcf-grid-thirds\@md, .dcf-grid-thirds\@lg, .dcf-grid-thirds\@xl, .dcf-grid-fourths, .dcf-grid-fourths\@sm, .dcf-grid-fourths\@md, .dcf-grid-fourths\@lg, .dcf-grid-fourths\@xl, .dcf-grid-fifths\@md, .dcf-grid-fifths\@lg, .dcf-grid-fifths\@xl, .dcf-grid-sixths\@md, .dcf-grid-sixths\@lg, .dcf-grid-sixths\@xl { display: grid; } .dcf-grid { grid-template-columns: repeat(12, minmax(10px, 1fr)); } .dcf-grid-full { grid-template-columns: minmax(10px, 1fr); } .dcf-grid-halves { grid-template-columns: repeat(2, minmax(10px, 1fr)); } .dcf-grid-thirds { grid-template-columns: repeat(3, minmax(10px, 1fr)); } .dcf-grid-fourths { grid-template-columns: repeat(4, minmax(10px, 1fr)); } .dcf-col-100\% { grid-column: 1 / -1; } .dcf-col-50\% { grid-column: span 6; } .dcf-col-50\%-start { grid-column: 1 / 7; } .dcf-col-50\%-center { grid-column: 4 / -4; } .dcf-col-50\%-end { grid-column: 7 / -1; } .dcf-col-33\% { grid-column: span 4; } .dcf-col-33\%-start { grid-column: 1 / 5; } .dcf-col-33\%-center { grid-column: 5 / -5; } .dcf-col-33\%-end { grid-column: 9 / -1; } .dcf-col-67\% { grid-column: span 8; } .dcf-col-67\%-start { grid-column: 1 / 9; } .dcf-col-67\%-center { grid-column: 3 / -3; } .dcf-col-67\%-end { grid-column: 5 / -1; } .dcf-col-25\% { grid-column: span 3; } .dcf-col-25\%-start { grid-column: 1 / 4; } .dcf-col-25\%-end { grid-column: 10 / -1; } .dcf-col-75\% { grid-column: span 9; } .dcf-col-75\%-start { grid-column: 1 / 10; } .dcf-col-75\%-end { grid-column: 4 / -1; } @include mq(sm, min, width) { .dcf-grid-full\@sm { grid-template-columns: minmax(10px, 1fr); } .dcf-grid-halves\@sm { grid-template-columns: repeat(2, minmax(10px, 1fr)); } .dcf-grid-thirds\@sm { grid-template-columns: repeat(3, minmax(10px, 1fr)); } .dcf-grid-fourths\@sm { grid-template-columns: repeat(4, minmax(10px, 1fr)); } .dcf-col-100\%\@sm { grid-column: 1 / -1; } .dcf-col-50\%\@sm { grid-column: span 6; } .dcf-col-50\%-start\@sm { grid-column: 1 / 7; } .dcf-col-50\%-center\@sm { grid-column: 4 / -4; } .dcf-col-50\%-end\@sm { grid-column: 7 / -1; } .dcf-col-33\%\@sm { grid-column: span 4; } .dcf-col-33\%-start\@sm { grid-column: 1 / 5; } .dcf-col-33\%-center\@sm { grid-column: 5 / -5; } .dcf-col-33\%-end\@sm { grid-column: 9 / -1; } .dcf-col-67\%\@sm { grid-column: span 8; } .dcf-col-67\%-start\@sm { grid-column: 1 / 9; } .dcf-col-67\%-center\@sm { grid-column: 3 / -3; } .dcf-col-67\%-end\@sm { grid-column: 5 / -1; } .dcf-col-25\%\@sm { grid-column: span 3; } .dcf-col-25\%-start\@sm { grid-column: 1 / 4; } .dcf-col-25\%-end\@sm { grid-column: 10 / -1; } .dcf-col-75\%\@sm { grid-column: span 9; } .dcf-col-75\%-start\@sm { grid-column: 1 / 10; } .dcf-col-75\%-end\@sm { grid-column: 4 / -1; } } @include mq(md, min, width) { .dcf-grid-full\@md { grid-template-columns: minmax(10px, 1fr); } .dcf-grid-halves\@md { grid-template-columns: repeat(2, minmax(10px, 1fr)); } .dcf-grid-thirds\@md { grid-template-columns: repeat(3, minmax(10px, 1fr)); } .dcf-grid-fourths\@md { grid-template-columns: repeat(4, minmax(10px, 1fr)); } .dcf-grid-fifths\@md { grid-template-columns: repeat(5, minmax(10px, 1fr)); } .dcf-grid-sixths\@md { grid-template-columns: repeat(6, minmax(10px, 1fr)); } .dcf-col-100\%\@md { grid-column: 1 / -1; } .dcf-col-50\%\@md { grid-column: span 6; } .dcf-col-50\%-start\@md { grid-column: 1 / 7; } .dcf-col-50\%-center\@md { grid-column: 4 / -4; } .dcf-col-50\%-end\@md { grid-column: 7 / -1; } .dcf-col-33\%\@md { grid-column: span 4; } .dcf-col-33\%-start\@md { grid-column: 1 / 5; } .dcf-col-33\%-center\@md { grid-column: 5 / -5; } .dcf-col-33\%-end\@md { grid-column: 9 / -1; } .dcf-col-67\%\@md { grid-column: span 8; } .dcf-col-67\%-start\@md { grid-column: 1 / 9; } .dcf-col-67\%-center\@md { grid-column: 3 / -3; } .dcf-col-67\%-end\@md { grid-column: 5 / -1; } .dcf-col-25\%\@md { grid-column: span 3; } .dcf-col-25\%-start\@md { grid-column: 1 / 4; } .dcf-col-25\%-end\@md { grid-column: 10 / -1; } .dcf-col-75\%\@md { grid-column: span 9; } .dcf-col-75\%-start\@md { grid-column: 1 / 10; } .dcf-col-75\%-end\@md { grid-column: 4 / -1; } } @include mq(lg, min, width) { .dcf-grid-full\@lg { grid-template-columns: minmax(10px, 1fr); } .dcf-grid-halves\@lg { grid-template-columns: repeat(2, minmax(10px, 1fr)); } .dcf-grid-thirds\@lg { grid-template-columns: repeat(3, minmax(10px, 1fr)); } .dcf-grid-fourths\@lg { grid-template-columns: repeat(4, minmax(10px, 1fr)); } .dcf-grid-fifths\@lg { grid-template-columns: repeat(5, minmax(10px, 1fr)); } .dcf-grid-sixths\@lg { grid-template-columns: repeat(6, minmax(10px, 1fr)); } .dcf-col-100\%\@lg { grid-column: 1 / -1; } .dcf-col-50\%\@lg { grid-column: span 6; } .dcf-col-50\%-start\@lg { grid-column: 1 / 7; } .dcf-col-50\%-center\@lg { grid-column: 4 / -4; } .dcf-col-50\%-end\@lg { grid-column: 7 / -1; } .dcf-col-33\%\@lg { grid-column: span 4; } .dcf-col-33\%-start\@lg { grid-column: 1 / 5; } .dcf-col-33\%-center\@lg { grid-column: 5 / -5; } .dcf-col-33\%-end\@lg { grid-column: 9 / -1; } .dcf-col-67\%\@lg { grid-column: span 8; } .dcf-col-67\%-start\@lg { grid-column: 1 / 9; } .dcf-col-67\%-center\@lg { grid-column: 3 / -3; } .dcf-col-67\%-end\@lg { grid-column: 5 / -1; } .dcf-col-25\%\@lg { grid-column: span 3; } .dcf-col-25\%-start\@lg { grid-column: 1 / 4; } .dcf-col-25\%-end\@lg { grid-column: 10 / -1; } .dcf-col-75\%\@lg { grid-column: span 9; } .dcf-col-75\%-start\@lg { grid-column: 1 / 10; } .dcf-col-75\%-end\@lg { grid-column: 4 / -1; } } @include mq(xl, min, width) { .dcf-grid-full\@xl { grid-template-columns: minmax(10px, 1fr); } .dcf-grid-halves\@xl { grid-template-columns: repeat(2, minmax(10px, 1fr)); } .dcf-grid-thirds\@xl { grid-template-columns: repeat(3, minmax(10px, 1fr)); } .dcf-grid-fourths\@xl { grid-template-columns: repeat(4, minmax(10px, 1fr)); } .dcf-grid-fifths\@xl { grid-template-columns: repeat(5, minmax(10px, 1fr)); } .dcf-grid-sixths\@xl { grid-template-columns: repeat(6, minmax(10px, 1fr)); } .dcf-col-100\%\@xl { grid-column: 1 / -1; } .dcf-col-50\%\@xl { grid-column: span 6; } .dcf-col-50\%-start\@xl { grid-column: 1 / 7; } .dcf-col-50\%-center\@xl { grid-column: 4 / -4; } .dcf-col-50\%-end\@xl { grid-column: 7 / -1; } .dcf-col-33\%\@xl { grid-column: span 4; } .dcf-col-33\%-start\@xl { grid-column: 1 / 5; } .dcf-col-33\%-center\@xl { grid-column: 5 / -5; } .dcf-col-33\%-end\@xl { grid-column: 9 / -1; } .dcf-col-67\%\@xl { grid-column: span 8; } .dcf-col-67\%-start\@xl { grid-column: 1 / 9; } .dcf-col-67\%-center\@xl { grid-column: 3 / -3; } .dcf-col-67\%-end\@xl { grid-column: 5 / -1; } .dcf-col-25\%\@xl { grid-column: span 3; } .dcf-col-25\%-start\@xl { grid-column: 1 / 4; } .dcf-col-25\%-end\@xl { grid-column: 10 / -1; } .dcf-col-75\%\@xl { grid-column: span 9; } .dcf-col-75\%-start\@xl { grid-column: 1 / 10; } .dcf-col-75\%-end\@xl { grid-column: 4 / -1; } }