diff --git a/css/ubc.columns.css b/css/ubc.columns.css index eb2ecd0..8f81a9d 100644 --- a/css/ubc.columns.css +++ b/css/ubc.columns.css @@ -48,19 +48,19 @@ grid-template-rows: auto; } - .widget-column-options .widget-region-one { + .widget-column-options .first-child--mt-0:nth-child(1) { grid-area: a; } - .widget-column-options .widget-region-two { + .widget-column-options .first-child--mt-0:nth-child(2) { grid-area: b; } - .widget-column-options .widget-region-three { + .widget-column-options .first-child--mt-0:nth-child(3) { grid-area: c; } - .widget-column-options .widget-region-four { + .widget-column-options .first-child--mt-0:nth-child(4) { grid-area: d; } @@ -98,21 +98,21 @@ grid-template-areas: 'a a a b b b c c c d d d'; } - .widget-columns-2.widget-keylines .widget-region-one, - .widget-columns-3.widget-keylines .widget-region-one, - .widget-columns-3.widget-keylines .widget-region-two, - .widget-columns-4.widget-keylines .widget-region-one, - .widget-columns-4.widget-keylines .widget-region-two, - .widget-columns-4.widget-keylines .widget-region-three { + .widget-columns-2.widget-keylines .first-child--mt-0:nth-child(1), + .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(1), + .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(2), + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(1), + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(2), + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(3) { position: relative; } - .widget-columns-2.widget-keylines .widget-region-one::after, - .widget-columns-3.widget-keylines .widget-region-one::after, - .widget-columns-3.widget-keylines .widget-region-two::after, - .widget-columns-4.widget-keylines .widget-region-one::after, - .widget-columns-4.widget-keylines .widget-region-two::after, - .widget-columns-4.widget-keylines .widget-region-three::after { + .widget-columns-2.widget-keylines .first-child--mt-0:nth-child(1)::after, + .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(1)::after, + .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(2)::after, + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(1)::after, + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(2)::after, + .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(3)::after { content: ''; top: 0; height: 100%; @@ -122,63 +122,63 @@ right: -.75rem; /* default placement */ } - .widget-columns-2 .gap-0 .widget-region-one::after, - .widget-columns-3 .gap-0 .widget-region-one::after, - .widget-columns-3 .gap-0 .widget-region-two::after, - .widget-columns-4 .gap-0 .widget-region-one::after, - .widget-columns-4 .gap-0 .widget-region-two::after, - .widget-columns-4 .gap-0 .widget-region-three::after { + .widget-columns-2 .gap-0 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-0 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-0 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(3)::after { right: 0; } - .widget-columns-2 .gap-4 .widget-region-one::after, - .widget-columns-3 .gap-4 .widget-region-one::after, - .widget-columns-3 .gap-4 .widget-region-two::after, - .widget-columns-4 .gap-4 .widget-region-one::after, - .widget-columns-4 .gap-4 .widget-region-two::after, - .widget-columns-4 .gap-4 .widget-region-three::after { + .widget-columns-2 .gap-4 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-4 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-4 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(3)::after { right: -.5rem } - .widget-columns-2 .gap-6 .widget-region-one::after, - .widget-columns-3 .gap-6 .widget-region-one::after, - .widget-columns-3 .gap-6 .widget-region-two::after, - .widget-columns-4 .gap-6 .widget-region-one::after, - .widget-columns-4 .gap-6 .widget-region-two::after, - .widget-columns-4 .gap-6 .widget-region-three::after { + .widget-columns-2 .gap-6 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-6 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-6 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(3)::after { right: -.75rem } - .widget-columns-2 .gap-8 .widget-region-one::after, - .widget-columns-3 .gap-8 .widget-region-one::after, - .widget-columns-3 .gap-8 .widget-region-two::after, - .widget-columns-4 .gap-8 .widget-region-one::after, - .widget-columns-4 .gap-8 .widget-region-two::after, - .widget-columns-4 .gap-8 .widget-region-three::after { + .widget-columns-2 .gap-8 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-8 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-8 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(3)::after { right: -1rem; } - .widget-columns-2 .gap-12 .widget-region-one::after, - .widget-columns-3 .gap-12 .widget-region-one::after, - .widget-columns-3 .gap-12 .widget-region-two::after, - .widget-columns-4 .gap-12 .widget-region-one::after, - .widget-columns-4 .gap-12 .widget-region-two::after, - .widget-columns-4 .gap-12 .widget-region-three::after { + .widget-columns-2 .gap-12 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-12 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-12 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(3)::after { right: -1.5rem } - .widget-columns-2.widget-gap-wide .widget-region-one::after, - .widget-columns-3.widget-gap-wide .widget-region-one::after, - .widget-columns-3.widget-gap-wide .widget-region-two::after, - .widget-columns-4.widget-gap-wide .widget-region-one::after, - .widget-columns-4.widget-gap-wide .widget-region-two::after, - .widget-columns-4.widget-gap-wide .widget-region-three::after, - .widget-columns-2 .gap-16 .widget-region-one::after, - .widget-columns-3 .gap-16 .widget-region-one::after, - .widget-columns-3 .gap-16 .widget-region-two::after, - .widget-columns-4 .gap-16 .widget-region-one::after, - .widget-columns-4 .gap-16 .widget-region-two::after, - .widget-columns-4 .gap-16 .widget-region-three::after { + .widget-columns-2.widget-gap-wide .first-child--mt-0:nth-child(1)::after, + .widget-columns-3.widget-gap-wide .first-child--mt-0:nth-child(1)::after, + .widget-columns-3.widget-gap-wide .first-child--mt-0:nth-child(2)::after, + .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(1)::after, + .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(2)::after, + .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(3)::after, + .widget-columns-2 .gap-16 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-16 .first-child--mt-0:nth-child(1)::after, + .widget-columns-3 .gap-16 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(1)::after, + .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(2)::after, + .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(3)::after { right: -2rem; }