mp-design-system 1.2.64 → 1.2.65

package/src/assets/scss/objects/grid.scss

@@ -1,329 +0,0 @@
-@use 'sass:math';
-
-// Layout
-$grid-width: 1260;
-$grid-columns: 12;
-$grid-column-width: 72;
-$grid-gutter-width: 36;
-
-@function grid-gutter() {
-  @return math.div($grid-gutter-width, $grid-width) * 100%;
-}
-
-@function grid-column($count) {
-  @return math.div(
-    (
-      ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)
-    ), $grid-width
-  ) * 100%;
-}
-
-@function grid-column-px($count) {
-  @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;
-}
-
-@mixin o-grid($columns) {
-  $width: math.div(100%, $columns);
-  
-  & > * {
-    width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
-    width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
-    // @include margin-bottom(0);
-    
-    & + * {
-      @include margin-left("gutter");
-    }
-
-    &:nth-child(#{$columns}n + 1) {
-      margin-left: 0;
-    }
-  }
-
-  &.o-grid--s {
-    & > * {
-      width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
-      width: calc(($width - (($columns - 1) * var(--space-s) / $columns)) - 0.1px);
-      @include margin-bottom("s");
-      
-      & + * {
-        @include margin-left("s");
-      }
-
-      &:nth-child(#{$columns}n + 1) {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-.o-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: stretch;
-  margin-bottom: calc(-1 * space-unit());
-  margin-bottom: calc(-1 * var(--gutter));
-  width: 100%;
-
-  &--float:after {
-    content: " ";
-    display: table;
-    clear: both;
-  }
-
-  &--between {
-    justify-content: space-between;
-  }
-
-  &--no-height-match {
-    align-items: start;
-  }
-
-  & > * {
-    @include margin-bottom("gutter");
-    width: 100%;
-  }
-
-  &--of-two {
-    @media (min-width: 40em) {
-      @include o-grid(2)
-    }
-  }
-
-  &--of-two-switch {
-    justify-content: space-between;
-    
-    @media (min-width: 40em) {
-      @include o-grid(2);
-    
-      &>:nth-child(2n + 2) {
-        @include margin-left(0);
-      }
-    }
-  }
-
-  &--of-two-late {
-    @media (min-width: 55em) {
-      @include o-grid(2)
-    }
-  }
-
-  &--of-two-early {
-    @media (min-width: 22.4em) {
-      @include o-grid(2)
-    }
-  }
-
-  &--of-three {
-    @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087
-      @include o-grid(2)
-    }
-
-    @media (min-width: 55em) {
-      @include o-grid(3)
-    }
-  }
-
-  &--of-three-late {
-    @media (min-width: 38em) and (max-width: 67.9375em) {
-      @include o-grid(2)
-    }
-
-    @media (min-width: 68em) {
-      @include o-grid(3)
-    }
-  }
-
-  &--of-three-early {
-    @media (min-width: 22.4em) and (max-width: 54.9375em) {
-      @include o-grid(2)
-    }
-
-    @media (min-width: 55em) {
-      @include o-grid(3)
-    }
-  }
-
-  &--of-four {
-    @media (min-width: 38em) and (max-width: 59.9375em) {
-      @include o-grid(2)
-    }
-
-    @media (min-width: 60em) {
-      @include o-grid(4)
-    }
-  }
-
-  &--of-four-early {
-    @media (min-width: 22.4em) and (max-width: 59.9375em) {
-      @include o-grid(2)
-    }
-
-    @media (min-width: 60em) {
-      @include o-grid(4)
-    }
-  }
-
-  &--of-five {
-    @media (min-width: 22.4em) and (max-width: 64.9375em) {
-      @include o-grid(3)
-    }
-
-    @media (min-width: 65em) {
-      @include o-grid(5)
-    }
-  }
-
-  &--swipeable {
-    @media (max-width: 54.9375em) {
-      @include breakout('gutter');
-      flex-wrap: nowrap;
-      overflow-x: scroll;
-      scroll-snap-type: x mandatory;
-      scroll-padding: var(--gutter);
-      -webkit-overflow-scrolling: touch;
-
-      & > * {
-        flex: 0 0 auto;
-        max-width: 23em;
-        width: calc(85vw - var(--gutter)*2.333); // !important
-        scroll-snap-align: start;
-        scroll-snap-stop: always;
-      }
-
-      & > * + * {
-        margin-left: var(--gutter) !important;
-      }
-    }
-  }
-
-  // Prevents overlap on floated sticky elements when stacked
-  @media (max-width: 55em) {
-    &--float:not([class*="switch"]) > :nth-child(2n + 1),
-    &--float[class*="switch"] > :nth-child(2n + 2),
-    &--float:not([class*="switch"]) > :nth-child(2n + 2),
-    &--float[class*="switch"] > :nth-child(2n + 1) {
-      position: static;
-    }
-  }
-
-  @media (min-width: 55em) {
-    &--4\/7 > :nth-child(2n + 2),
-    &--4\/7-switch > :nth-child(2n + 2) {
-      width: grid-column(7)
-    }
-
-    &--9\/3 > :nth-child(2n + 1),
-    &--8\/3 > :nth-child(2n + 1),
-    &--8\/4 > :nth-child(2n + 1),
-    &--3\/9 > :nth-child(2n + 2),
-    &--3\/8 > :nth-child(2n + 2),
-    &--4\/8 > :nth-child(2n + 2),
-    &--9\/3-switch > :nth-child(2n + 2),
-    &--8\/3-switch > :nth-child(2n + 2),
-    &--8\/4-switch > :nth-child(2n + 2),
-    &--3\/9-switch > :nth-child(2n + 1),
-    &--3\/8-switch > :nth-child(2n + 1),
-    &--4\/8-switch > :nth-child(2n + 1) {
-      width: grid-column(8);
-    }
-
-    &--9\/3 > :nth-child(2n + 2),
-    &--8\/3 > :nth-child(2n + 2),
-    &--8\/4 > :nth-child(2n + 2),
-    &--3\/9 > :nth-child(2n + 1),
-    &--3\/8 > :nth-child(2n + 1),
-    &--4\/8 > :nth-child(2n + 1),
-    &--4\/7 > :nth-child(2n + 1),
-    &--9\/3-switch > :nth-child(2n + 1),
-    &--8\/3-switch > :nth-child(2n + 1),
-    &--8\/4-switch > :nth-child(2n + 1),
-    &--3\/9-switch > :nth-child(2n + 2),
-    &--3\/8-switch > :nth-child(2n + 2),
-    &--4\/8-switch > :nth-child(2n + 2),
-    &--4\/7-switch > :nth-child(2n + 1) {
-      width: grid-column(4);
-    }
-
-    &--3\/9 > :nth-child(2n + 2),
-    &--3\/8 > :nth-child(2n + 2),
-    &--4\/8 > :nth-child(2n + 2),
-    &--9\/3 > :nth-child(2n + 2),
-    &--8\/3 > :nth-child(2n + 2),
-    &--8\/4 > :nth-child(2n + 2),
-    &--9\/3-switch > :nth-child(2n + 1),
-    &--8\/3-switch > :nth-child(2n + 1),
-    &--8\/4-switch > :nth-child(2n + 1),
-    &--3\/9-switch > :nth-child(2n + 1),
-    &--3\/8-switch > :nth-child(2n + 1),
-    &--4\/8-switch > :nth-child(2n + 1) {
-      margin-left: grid-gutter();
-      margin-right: 0;
-    }
-
-    &--8\/3 > :nth-child(2n + 1),
-    &--3\/8 > :nth-child(2n + 2),
-    &--8\/3-switch > :nth-child(2n + 2),
-    &--3\/8-switch > :nth-child(2n + 1) {
-      max-width: grid-column-px(8);
-    }
-
-    &[class*="switch"] > :nth-child(2n + 1) {
-      order: 1;
-    }
-
-    &--layout {
-      margin-bottom: 0;
-
-      & > :nth-last-child(1),
-      & > :nth-last-child(2) {
-        margin-bottom: 0;
-      }
-    }
-
-    &--push {
-      justify-content: space-between;
-    }
-
-    &--pull {
-      justify-content: flex-start;
-    }
-
-    &--float {
-      display: block;
-    }
-
-    &--float:not([class*="switch"]) > :nth-child(2n + 1),
-    &--float[class*="switch"] > :nth-child(2n + 2) {
-      float: left;
-    }
-
-    &--float:not([class*="switch"]) > :nth-child(2n + 2),
-    &--float[class*="switch"] > :nth-child(2n + 1) {
-      float: right;
-    }
-  }
-
-  @media (min-width: 70em) {
-    &--9\/3 > :nth-child(2n + 1),
-    &--8\/3 > :nth-child(2n + 1),
-    &--3\/9 > :nth-child(2n + 2),
-    &--3\/8 > :nth-child(2n + 2),
-    &--9\/3-switch > :nth-child(2n + 2),
-    &--8\/3-switch > :nth-child(2n + 2),
-    &--3\/9-switch > :nth-child(2n + 1),
-    &--3\/8-switch > :nth-child(2n + 1) {
-      width: grid-column(9);
-    }
-
-    &--9\/3 > :nth-child(2n + 2),
-    &--8\/3 > :nth-child(2n + 2),
-    &--3\/9 > :nth-child(2n + 1),
-    &--3\/8 > :nth-child(2n + 1),
-    &--9\/3-switch > :nth-child(2n + 1),
-    &--8\/3-switch > :nth-child(2n + 1),
-    &--3\/9-switch > :nth-child(2n + 2),
-    &--3\/8-switch > :nth-child(2n + 2) {
-      width: grid-column(3);
-    }
-  }
-}

package/src/assets/scss/objects/index.scss

@@ -1,4 +0,0 @@
-@import './button-wrap.scss';
-@import './clickable-parent.scss';
-@import './prose.scss';
-@import './grid.scss';

package/src/assets/scss/objects/prose.scss

@@ -1,169 +0,0 @@
-.o-prose {
-  color: inherit;
-
-  h2 {
-    @extend .c-h, .c-h--step-3;
-  }
-
-  h3 {
-    @extend .c-h, .c-h--step-2;
-  }
-
-  h4 {
-    @extend .c-h, .c-h--step-1;
-  }
-
-  p,
-  ul,
-  ol {
-    line-height: lh('prose');
-  }
-
-  p a:not(.c-button),
-  li a:not(.c-button),
-  td a:not(.c-button) {
-    color: color('utility-blue');
-    text-decoration: underline;
-    text-underline-offset: 3px;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  ul li {
-    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>')
-      outside;
-    margin-left: 1em;
-    padding-left: 0.5rem;
-
-    // Bizzabo reset
-    &::before {
-      display: none !important;
-    }
-
-    h3,
-    h4 {
-      line-height: lh('prose');
-      font-size: 1em;
-      color: color('green');
-    }
-  }
-
-  ol li {
-    list-style: decimal;
-    padding-left: 0.375rem;
-    margin-left: 1.125em;
-  }
-
-  ol ol li {
-    list-style: lower-alpha;
-  }
-
-  pre {
-    background: color('petrol', 'step-3');
-    line-height: 1.4;
-    overflow-x: auto;
-    @include padding('xs');
-    @include step(-1);
-  }
-
-  li code,
-  p code {
-    background: color('petrol', 'step-3');
-    @include step(-1);
-    padding: 0.25em;
-  }
-
-  blockquote {
-    @extend .c-quote;
-  }
-
-  figcaption {
-    @include step(-1);
-    display: block;
-  }
-
-  figure > * + * {
-    margin-top: 0.5em;
-  }
-
-  // Spacing
-
-  ol,
-  ul {
-    ul,
-    ol {
-      @include margin-top('s');
-    }
-
-    li + li,
-    li > ul,
-    li > ol {
-      @include margin-top('2xs');
-    }
-  }
-
-  ol,
-  ul,
-  & > pre {
-    --flow: var(--space-s-m);
-
-    &:not(:last-child) {
-      margin-bottom: var(--flow);
-    }
-  }
-
-  h2,
-  h3 {
-    --flow: var(--space-m-l);
-  }
-
-  h2 {
-    @include margin-bottom('s-m');
-  }
-
-  figure,
-  & > img {
-    --flow: var(--space-l-xl);
-    margin-bottom: var(--flow);
-  }
-
-  blockquote {
-    --flow: var(--space-m-l);
-    margin-bottom: var(--flow);
-  }
-
-  // Modifiers
-
-  @media (min-width: 35em) {
-    &:not(.o-prose--left-blockquote) blockquote {
-      @include padding-left('3xl');
-
-      &:before {
-        left: var(--space-xl);
-      }
-    }
-
-    &.o-prose--left-blockquote blockquote {
-      @include padding-right('3xl');
-    }
-  }
-
-  &--with-lede > p:first-of-type {
-    @include step(1);
-    color: color('blue');
-  }
-
-  table {
-    @extend .c-table;
-  }
-
-  video {
-    max-width: 100%;
-  }
-}
-
-.o-featured-image {
-  margin-left: calc(-1 * var(--gutter));
-}

package/src/assets/scss/objects/syntax-highlighting.scss

@@ -1,211 +0,0 @@
-code[class*="language-"],
-pre[class*="language-"] {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-  color: color('petrol', 'step-1');
-  background: color('petrol', 'step-3');
-  font-family: 'Source Code Pro', monospace;
-	font-size: 1rem;
-	line-height: 1.5em;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-
-	.c-alert & {
-		background: transparent;
-	}
-}
-
-code[class*="language-"]::-moz-selection,
-pre[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection,
-pre[class*="language-"] ::-moz-selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-code[class*="language-"]::selection,
-pre[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"] ::selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-:not(pre) > code[class*="language-"] {
-	white-space: normal;
-	border-radius: 0.2em;
-	padding: 0.1em;
-}
-
-pre[class*="language-"] {
-	overflow: auto;
-  position: relative;
-  @include padding('s');
-}
-
-.language-css > code,
-.language-sass > code,
-.language-scss > code {
-	color: color('utility-orange');
-}
-
-[class*="language-"] .namespace {
-	opacity: 0.7;
-}
-
-.token.atrule {
-	color: color('petrol', 'step-1');
-}
-
-.token.attr-name {
-	color: color('blue');
-}
-
-.token.attr-value {
-	color: color('green');
-}
-
-.token.attribute {
-	color: color('green');
-}
-
-.token.boolean {
-	color: color('red');
-}
-
-.token.builtin {
-	color: color('blue');
-}
-
-.token.cdata {
-	color: color('blue');
-}
-
-.token.char {
-	color: color('blue');
-}
-
-.token.class {
-	color: color('blue');
-}
-
-.token.class-name {
-	color: #6182b8;
-}
-
-.token.comment {
-	color: #aabfc9;
-}
-
-.token.constant {
-	color: color('petrol', 'step-1');
-}
-
-.token.deleted {
-	color: color('red');
-}
-
-.token.doctype {
-	color: #aabfc9;
-}
-
-.token.entity {
-	color: color('red');
-}
-
-.token.function {
-	color: color('petrol', 'step-1');
-}
-
-.token.hexcode {
-	color: color('utility-orange');
-}
-
-.token.id {
-	color: color('petrol', 'step-1');
-	font-weight: bold;
-}
-
-.token.important {
-	color: color('petrol', 'step-1');
-	font-weight: bold;
-}
-
-.token.inserted {
-	color: color('blue');
-}
-
-.token.keyword {
-	color: color('petrol', 'step-1');
-}
-
-.token.number {
-	color: color('utility-orange');
-}
-
-.token.operator {
-	color: color('blue');
-}
-
-.token.prolog {
-	color: #aabfc9;
-}
-
-.token.property {
-	color: color('blue');
-}
-
-.token.pseudo-class {
-	color: color('green');
-}
-
-.token.pseudo-element {
-	color: color('green');
-}
-
-.token.punctuation {
-	color: color('blue');
-}
-
-.token.regex {
-	color: color('blue');
-}
-
-.token.selector {
-	color: color('red');
-}
-
-.token.string {
-	color: color('green');
-}
-
-.token.symbol {
-	color: color('petrol', 'step-1');
-}
-
-.token.tag {
-	color: color('petrol');
-}
-
-.token.unit {
-	color: color('utility-orange');
-}
-
-.token.url {
-	color: color('red');
-}
-
-.token.variable {
-	color: color('red');
-}
-

package/src/assets/scss/tools/breakout.scss

@@ -1,17 +0,0 @@
-// Breakout
-// Force an element to fill 100% of the window width, ignoring its container
-
-@mixin breakout($pad: 0) {
-    left: 50%;
-    left: calc( 50% + var(--scrollbarWidth)/2.0001 );
-    position: relative;
-    transform: translateX(-50vw);
-    width: 100vw;
-    width: calc( 100vw - var(--scrollbarWidth) );
-    padding-left: safe-space($pad);
-    padding-right: safe-space($pad);
-}
-
-.u-breakout {
-    @include breakout
-}