Skip to content

Commit bc4ffcb

Browse files
stephaniehobsonstephaniehobson
committed
Simplify split component by removing pop and overflow options (Fix #896)
1 parent 865863d commit bc4ffcb

5 files changed

Lines changed: 57 additions & 333 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The good news is we don't expect any visible changes in modern browsers and you
66

77
Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries.
88

9+
## Split Component
10+
11+
* **component:** (breaking) Removed `mzp-l-split-pop-top`, `mzp-l-split-pop-bottom`, and `mzp-l-split-pop` layout classes from Split component
12+
* **component:** (breaking) Removed `mzp-l-split-media-overflow` and `mzp-l-split-media-constrain-height` layout classes from Split component
913

1014
## Typography
1115

‎assets/sass/protocol/components/_split.scss‎

Lines changed: 3 additions & 257 deletions
Original file line numberDiff line numberDiff line change
@@ -320,261 +320,18 @@
320320
}
321321
}
322322

323-
// * -------------------------------------------------------------------------- */
324-
// constraints on height or width of media
325-
326-
@supports (display:grid) {
327-
@media #{$mq-md} {
328-
.mzp-c-split-media {
329-
&.mzp-l-split-media-overflow {
330-
.mzp-c-split-media-asset {
331-
max-width: none;
332-
333-
.mzp-l-split-reversed & {
334-
@include bidi((
335-
(float, right, left),
336-
));
337-
}
338-
}
339-
}
340-
341-
&.mzp-l-split-media-constrain-height {
342-
height: 100%;
343-
justify-self: auto !important; /* stylelint-disable-line declaration-no-important */
344-
345-
.mzp-c-split-media-asset {
346-
@include bidi(((left, 0, right, auto),));
347-
bottom: 0;
348-
max-height: 100%;
349-
max-width: none;
350-
position: absolute;
351-
top: 50%;
352-
transform: translateY(-50%);
353-
width: auto;
354-
355-
.mzp-l-split-reversed & {
356-
@include bidi((
357-
(left, auto, right, 0),
358-
(right, 0, left, auto),
359-
));
360-
}
361-
}
362-
}
363-
}
364-
}
365-
}
366-
367-
// * --------------------------------------------------------------------------- */
368-
// vertical spacing for body or media
369-
370-
@supports (display:grid) {
371-
@media #{$mq-md} {
372-
.mzp-l-split-pop-top,
373-
.mzp-l-split-pop {
374-
&.mzp-c-split {
375-
padding-top: $v-grid-lg * 2;
376-
377-
@supports (--css: variables) {
378-
padding-top: calc(var(--v-grid-lg) * 2);
379-
}
380-
}
381-
382-
.mzp-c-split-media {
383-
margin-top: $v-grid-lg * -1;
384-
385-
@supports (--css: variables) {
386-
margin-top: calc(var(--v-grid-lg) * -1);
387-
}
388-
}
389-
390-
.mzp-c-split-bg & {
391-
.mzp-c-split-media {
392-
margin-top: $v-grid-lg * -2;
393-
394-
@supports (--css: variables) {
395-
margin-top: calc(var(--v-grid-lg) * -2);
396-
}
397-
}
398-
}
399-
}
400-
401-
.mzp-l-split-pop-bottom,
402-
.mzp-l-split-pop {
403-
&.mzp-c-split {
404-
padding-bottom: $v-grid-lg * 2;
405-
406-
@supports (--css: variables) {
407-
padding-bottom: calc(var(--v-grid-lg) * 2);
408-
}
409-
}
410-
411-
.mzp-c-split-media {
412-
margin-bottom: $v-grid-lg * -1;
413-
414-
@supports (--css: variables) {
415-
margin-bottom: calc(var(--v-grid-lg) * -1);
416-
}
417-
}
418-
419-
.mzp-c-split-bg & {
420-
.mzp-c-split-media {
421-
margin-bottom: $v-grid-lg * -2;
422-
423-
@supports (--css: variables) {
424-
margin-bottom: calc(var(--v-grid-lg) * -2);
425-
}
426-
}
427-
}
428-
}
429-
430-
.mzp-l-split-media-constrain-height {
431-
.mzp-l-split-pop-top &,
432-
.mzp-l-split-pop-bottom & {
433-
height: calc(100% + #{$v-grid-lg});
434-
435-
@supports (--css: variables) {
436-
height: calc(100% + var(--v-grid-lg));
437-
}
438-
}
439-
440-
.mzp-l-split-pop & {
441-
height: calc(100% + #{$v-grid-lg * 2});
442-
443-
@supports (--css: variables) {
444-
height: calc(100% + var(--v-grid-lg) * 2);
445-
}
446-
}
447-
448-
.mzp-l-split-pop-top .mzp-c-split-bg &,
449-
.mzp-l-split-pop-bottom .mzp-c-split-bg & {
450-
height: calc(100% + #{$v-grid-lg * 2});
451-
452-
@supports (--css: variables) {
453-
height: calc(100% + var(--v-grid-lg) * 2);
454-
}
455-
}
456-
457-
.mzp-l-split-pop .mzp-c-split-bg & {
458-
height: calc(100% + #{$v-grid-lg * 4});
459-
460-
@supports (--css: variables) {
461-
height: calc(100% + var(--v-grid-lg) * 4);
462-
}
463-
}
464-
}
465-
}
466-
467-
@media #{$mq-xl} {
468-
.mzp-l-split-pop-top,
469-
.mzp-l-split-pop {
470-
&.mzp-c-split {
471-
padding-top: $v-grid-xl * 2;
472-
473-
@supports (--css: variables) {
474-
padding-top: calc(var(--v-grid-xl) * 2);
475-
}
476-
}
477-
478-
.mzp-c-split-media {
479-
margin-top: $v-grid-xl * -1;
480-
481-
@supports (--css: variables) {
482-
margin-top: calc(var(--v-grid-xl) * -1);
483-
}
484-
}
485-
486-
& .mzp-c-split-bg {
487-
.mzp-c-split-media {
488-
margin-top: $v-grid-xl * -2;
489-
490-
@supports (--css: variables) {
491-
margin-top: calc(var(--v-grid-xl) * -2);
492-
}
493-
}
494-
}
495-
}
496-
497-
.mzp-l-split-pop-bottom,
498-
.mzp-l-split-pop {
499-
&.mzp-c-split {
500-
padding-bottom: $v-grid-xl * 2;
501-
502-
@supports (--css: variables) {
503-
padding-bottom: calc(var(--v-grid-xl) * 2);
504-
}
505-
}
506-
507-
.mzp-c-split-media {
508-
margin-bottom: $v-grid-xl * -1;
509-
510-
@supports (--css: variables) {
511-
margin-bottom: calc(var(--v-grid-xl) * -1);
512-
}
513-
}
514-
515-
& .mzp-c-split-bg {
516-
.mzp-c-split-media {
517-
margin-bottom: $v-grid-xl * -2;
518-
519-
@supports (--css: variables) {
520-
margin-bottom: calc(var(--v-grid-xl) * -2);
521-
}
522-
}
523-
}
524-
}
525-
526-
.mzp-l-split-media-constrain-height {
527-
.mzp-l-split-pop-top &,
528-
.mzp-l-split-pop-bottom & {
529-
height: calc(100% + #{$v-grid-xl});
530-
531-
@supports (--css: variables) {
532-
height: calc(100% + var(--v-grid-xl));
533-
}
534-
}
535-
536-
.mzp-l-split-pop & {
537-
height: calc(100% + #{$v-grid-xl * 2});
538-
539-
@supports (--css: variables) {
540-
height: calc(100% + calc(var(--v-grid-xl) * 2));
541-
}
542-
}
543-
544-
.mzp-l-split-pop-top .mzp-c-split-bg &,
545-
.mzp-l-split-pop-bottom .mzp-c-split-bg & {
546-
height: calc(100% + #{$v-grid-xl * 2});
547-
548-
@supports (--css: variables) {
549-
height: calc(100% + calc(var(--v-grid-xl) * 2));
550-
}
551-
}
552-
553-
.mzp-l-split-pop .mzp-c-split-bg & {
554-
height: calc(100% + #{$v-grid-xl * 4});
555-
556-
@supports (--css: variables) {
557-
height: calc(100% + calc(var(--v-grid-xl) * 4));
558-
}
559-
}
560-
}
561-
}
562-
}
563-
564323
// * --------------------------------------------------------------------------- */
565-
// vertical and horizontal aligment for body or media
324+
// vertical and horizontal alignment for body or media
566325

567326
@media #{$mq-md} {
568327
.mzp-c-split {
569328
// horizontal alignment works with float fallbacks.
570-
// horizontal alignment does not apply to constrain-height or overflow because it could expand and obscure the text
571-
// there's an !important in the contrain-height definitions to enforce this
572329
.mzp-l-split-h-start {
573330
@include bidi(((text-align, left, right),));
574331
justify-self: start;
575332
}
576333

577-
.mzp-l-split-h-center:not([class*='mzp-l-split-media-']) {
334+
.mzp-l-split-h-center {
578335
justify-self: center;
579336
text-align: center;
580337

@@ -583,7 +340,7 @@
583340
}
584341
}
585342

586-
.mzp-l-split-h-end:not([class*='mzp-l-split-media-']) {
343+
.mzp-l-split-h-end {
587344
@include bidi(((text-align, right, left),));
588345
justify-self: end;
589346

@@ -598,12 +355,6 @@
598355
// vertical alignment relies on grid so don't work for float fallbacks
599356
.mzp-l-split-v-start {
600357
align-self: start;
601-
602-
&.mzp-l-split-media-constrain-height .mzp-c-split-media-asset {
603-
bottom: 0;
604-
top: 0;
605-
transform: none;
606-
}
607358
}
608359

609360
.mzp-l-split-v-center {
@@ -612,11 +363,6 @@
612363

613364
.mzp-l-split-v-end {
614365
align-self: end;
615-
616-
&.mzp-l-split-media-constrain-height .mzp-c-split-media-asset {
617-
top: auto;
618-
transform: none;
619-
}
620366
}
621367
}
622368
}

‎components/split/readme.md‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,6 @@ variations.
4444
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
4545
- `mzp-l-split-v-start` - vertically aligned to the top.
4646
- `mzp-l-split-v-end` - vertically aligned to the bottom.
47-
- Note that the media can only be positioned horizontally if it does _not_ have
48-
a sizing class added, such as `mzp-l-split-media-overflow` or
49-
`mzp-l-split-media-constrain-height`
50-
- You can control the behavior of the media with a class on the media container
51-
(`mzp-c-split-media`):
52-
- `mzp-l-split-media-overflow` - the image can be larger than the Split
53-
container and will "bleed" past the edges. This means some of the image will
54-
be hidden, so choose images wisely.
55-
- `mzp-l-split-media-constrain-height` - the image will scale to fit the height
56-
of the container, which depends on the amount of content in the body.
57-
- The media can "pop" out of the container, protruding past the top and bottom
58-
edges. Apply these classes to the outer container (`mzp-c-split`):
59-
- `mzp-l-split-pop-top` - protrude from the top.
60-
- `mzp-l-split-pop-bottom` - protrude from the bottom.
61-
- `mzp-l-split-pop` - both.
6247
- Choose how to treat the Split on small screens. Apply these classes to the
6348
outer container (`mzp-c-split`):
6449
- `mzp-l-split-center-on-sm-md` - content is centered on small to medium screens.

0 commit comments

Comments
 (0)