mp-design-system 1.2.64 → 1.2.66

package/src/assets/scss/library.scss

@@ -1,672 +0,0 @@
-@import './tools';
-@import './foundations';
-@import './elements/reset';
-@import './objects/syntax-highlighting';
-@import './utilities/hr.scss';
-@import './objects/grid';
-
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
-
-.c-library {
-  display: grid;
-  min-height: 100vh;
-  grid-template-rows: auto 1fr auto;
-
-  &--components {
-    grid-template-rows: auto 1fr;
-  }
-
-  &__header {
-    @include step(-1);
-    @include padding('2xs');
-    flex-direction: column;
-    align-items: flex-start;
-
-    background: color('petrol');
-    color: color('white');
-    font-weight: weight('bold');
-
-    @media only screen and (min-width: 650px) {
-      @include step(-2);
-      flex-direction: row;
-      align-items: center;
-    }
-
-    @media only screen and (min-width: 1000px) {
-      @include step(-1);
-      @include padding('s', 's-l');
-    }
-
-    img {
-      filter: saturate(0) brightness(10);
-    }
-
-    .c-library-page-active {
-      position: relative;
-
-      &:after {
-        content: '';
-        position: absolute;
-        left: 0;
-        width: 100%;
-        bottom: -6px;
-        border-bottom: 1px solid;
-      }
-    }
-  }
-
-  &__hero {
-    color: white;
-    background: linear-gradient(color('petrol'), transparent),
-      linear-gradient(45deg, color('blue'), color('petrol'));
-  }
-
-  &__body {
-    display: grid;
-    grid-template-rows: auto auto;
-
-    @media only screen and (min-width: 600px) {
-      grid-template-columns: 10em 1fr;
-    }
-
-    @media only screen and (min-width: 800px) {
-      grid-template-columns: 17em 1fr;
-    }
-  }
-
-  @media only screen and (min-width: 600px) {
-    &--components &__body > * {
-      overflow-y: auto;
-      height: calc(100vh - var(--headerHeight) - 1px);
-    }
-  }
-
-  &__sidebar {
-    @include step(-2);
-    border-right: 1px solid color('petrol', 'step-3');
-    grid-row: -1;
-    scroll-behavior: none;
-
-    @media only screen and (min-width: 600px) {
-      grid-row: auto;
-    }
-
-    @media only screen and (min-width: 800px) {
-      @include step(-1);
-    }
-
-    & > * {
-      @include padding('s-l', 's', 's-l', 's-l');
-    }
-
-    li {
-      position: relative;
-    }
-
-    li a {
-      color: color('utility-blue');
-
-      &:hover {
-        text-decoration: underline;
-        color: color('utility-blue');
-      }
-    }
-
-    li + li {
-      @include margin-top('xs');
-    }
-
-    ul ul {
-      @include padding('xs');
-      padding-bottom: 0;
-
-      li + li {
-        @include margin-top('2xs');
-      }
-    }
-  }
-
-  &__skip-link {
-    @include padding('xs');
-
-    @media only screen and (min-width: 600px) {
-      display: none;
-    }
-  }
-
-  &__logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 15%;
-    min-width: 100px;
-
-    @media only screen and (min-width: 650px) {
-      justify-content: flex-start;
-    }
-
-    &-name {
-      @include padding-left('xs-s');
-      @include margin-left('xs-s');
-      border-left: 1px solid color('petrol', 'step-1');
-      white-space: nowrap;
-
-      span {
-        display: block;
-
-        &:nth-last-child(3),
-        &:nth-last-child(1) {
-          text-transform: uppercase;
-          @include step(-1);
-          letter-spacing: 0.08em;
-          color: color('petrol', 'step-2');
-        }
-
-        &:nth-last-child(2) {
-          color: color('white');
-          @include step(4);
-        }
-
-        // &:nth-last-child(3) {
-        // color: color('petrol', 'step-1');
-        // }
-      }
-    }
-  }
-
-  .has-js &__sidebar ul > li > ul {
-    display: none;
-  }
-
-  .has-js &__sidebar ul > .c-library-accordion-open > ul {
-    display: block;
-  }
-
-  .c-library-accordion-open > .c-library-accordion__toggle {
-    transform: rotate(180deg);
-  }
-
-  .c-library-accordion__toggle {
-    color: color('utility-blue');
-    line-height: 1;
-    font-size: 1rem;
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-  }
-
-  &-menu-active {
-    font-weight: weight('bold');
-    position: relative;
-
-    &::before {
-      content: '▸ ';
-      position: absolute;
-      left: -17px;
-      top: 0;
-    }
-  }
-
-  &-stretch {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-
-  &__main {
-    overflow-y: auto;
-
-    @media only screen and (min-width: 600px) {
-      overflow-y: scroll;
-    }
-  }
-
-  &__frame {
-    position: relative;
-    width: 100%;
-
-    &-links {
-      position: absolute;
-      right: 0;
-      top: calc(-1 * (var(--space-m) + var(--space-s)));
-      z-index: 1;
-
-      a,
-      button {
-        border-radius: 0 0 0.25em 0.25em;
-        @include step(-1);
-        padding: 0.25em 0.666em;
-        background: color('petrol', 'step-2');
-        color: color('grey', 'step-1');
-      }
-    }
-
-    &-background {
-      border-radius: 0 0 0 0.25em;
-      top: 0;
-    }
-
-    &-wrap {
-      --width: '';
-      height: 100%;
-      overflow: hidden;
-      position: relative;
-      resize: both;
-
-      &:after {
-        background: color('petrol', 'step-3');
-        bottom: 0;
-        color: color('petrol', 'step-1');
-        counter-reset: width var(--width);
-        content: counter(width);
-        @include step(-2);
-        mix-blend-mode: multiply;
-        padding: 0.5ch 1ch;
-        position: absolute;
-        right: 0;
-      }
-    }
-
-    iframe {
-      --negative-padding: calc(var(--space-m) * -1);
-      height: 100%;
-      width: 100%;
-      width: calc(100% - var(--negative-padding) * 2);
-      left: var(--negative-padding);
-      top: var(--negative-padding);
-      position: relative;
-      transition:
-        padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
-        background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
-
-      // @media only screen and (min-width: 600px) {
-      //   position: absolute;
-      // }
-    }
-  }
-
-  &-code {
-    font-family: 'Source Code Pro';
-  }
-
-  &-pre {
-    overflow-x: auto;
-    background: color('petrol', 'step-3');
-    @include padding('s');
-    font-family: 'Source Code Pro';
-    line-height: 1.4;
-
-    &--bordered {
-      border-bottom: 1px solid color('petrol', 'step-2');
-    }
-  }
-
-  &-version {
-    @include step(-1);
-    color: color('grey', 'step-1');
-  }
-
-  &-status {
-    @include step(-1);
-    padding: 0.25em 0.666em;
-    border-radius: 0.25em;
-    background: color('petrol', 'step-2');
-    color: color('grey', 'step-1');
-
-    &--ready {
-      background: color('green');
-      color: color('white');
-    }
-
-    &--in-production,
-    &--development,
-    &--placeholder {
-      background: color('utility-orange');
-      color: color('white');
-    }
-
-    &--deprecated {
-      background: color('red');
-      color: color('white');
-    }
-  }
-
-  &__swatch-grid {
-    display: grid;
-    gap: 0 1em;
-    grid-auto-rows: minmax(4em, auto);
-    margin-bottom: var(--space-m);
-
-    @media only screen and (min-width: 680px) {
-      gap: 0;
-      grid-template-columns: repeat(5, auto);
-      grid-template-rows: 5em auto;
-    }
-  }
-
-  &__swatch-grid--has-labels {
-    grid-auto-flow: row;
-
-    @media only screen and (min-width: 40em) {
-      grid-template-columns: minmax(15%, 15em) auto;
-      grid-template-rows: auto;
-    }
-
-    @media only screen and (min-width: 1000px) {
-      grid-auto-flow: column;
-      grid-template-columns: repeat(5, 1fr);
-      grid-template-rows: 5em auto;
-    }
-  }
-
-  &__swatches,
-  &__swatch-labels {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 165px);
-  }
-
-  &__swatch {
-    display: flex;
-
-    & > * {
-      justify-content: center;
-      font-weight: weight('bold');
-      margin: auto;
-    }
-  }
-
-  &__swatches {
-    & > * {
-      height: 0;
-      padding-bottom: 50%;
-      position: relative;
-
-      & > * {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0.5rem;
-        font-weight: weight('bold');
-        text-align: center;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-      }
-    }
-  }
-
-  &__swatch-grid table {
-    @include step(-2);
-
-    td,
-    th {
-      @include padding('2xs', 0, '2xs', '3xs');
-    }
-    th {
-      width: 3em;
-    }
-    td {
-      font-family: monospace;
-    }
-  }
-
-  &__image-row {
-    display: flex;
-    max-width: 100%;
-
-    img {
-      flex: 1 1 auto;
-      margin: 0 2% 0 0;
-      object-fit: contain;
-      width: 6%;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  &__space {
-    display: block;
-
-    span {
-      background: linear-gradient(
-          45deg,
-          rgba(255, 255, 255, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        rgba(206, 0, 88, 0.5);
-      height: 0;
-      padding-bottom: 100%;
-      position: relative;
-      display: block;
-    }
-
-    code {
-      position: absolute;
-      line-height: 1;
-      left: 100%;
-      top: 50%;
-      @include margin-left('s');
-      white-space: nowrap;
-      transform: translateY(-50%);
-    }
-  }
-
-  &-grid {
-    background: color('blue', 'step--1');
-    padding: 3rem 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: color('white');
-    @include step(-1);
-
-    &--alt {
-      background: color('petrol', 'step-1');
-      padding: 2rem 1rem;
-
-      &:before {
-        content: '\00a0';
-        display: block;
-      }
-    }
-
-    &--first {
-      background: color('petrol');
-      padding: 2rem 1rem;
-
-      &:before {
-        content: 'First on mobile';
-      }
-    }
-  }
-
-  &-copy {
-    position: relative;
-
-    &__trigger {
-      position: absolute;
-      background: color('petrol', 'step-2');
-      bottom: 0;
-      right: 0;
-      font-weight: weight('bold');
-      @include step(-1);
-      @include padding('3xs', '2xs');
-      letter-spacing: ls('2%');
-
-      &:hover {
-        color: color('red');
-      }
-    }
-  }
-
-  hr {
-    @extend .u-hr;
-  }
-
-  &__typo {
-    &__sidebar {
-      width: grid-column(2);
-
-      span {
-        display: block;
-      }
-
-      .x2 {
-        margin-top: 4.25em;
-        border: 1px solid color('grey');
-        border-width: 1px 0;
-        height: 2em;
-        line-height: 2em;
-      }
-    }
-
-    &__main {
-      width: grid-column(10);
-    }
-  }
-
-  &__semi {
-    font-weight: 600;
-  }
-
-  &__photo-grid {
-    display: grid;
-    gap: 2px;
-    grid-template-columns: 1fr;
-    @include margin-top(xl);
-
-    @media only screen and (min-width: 880px) {
-      grid-auto-flow: dense;
-      grid-auto-rows: auto;
-
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-      }
-
-      div {
-        grid-column: 1/3;
-        grid-row: 1/2;
-        display: flex;
-
-        h2 {
-          margin: auto var(--space-s);
-        }
-      }
-
-      &.grid-1 {
-        grid-template-columns: 40% 20% 40%;
-        grid-template-rows: var(--space-2xl) 400px 400px;
-
-        img {
-          &:nth-child(2) {
-            grid-row: 2/3;
-            grid-column: 1/3;
-          }
-
-          &:nth-child(3) {
-            grid-column: 3/4;
-            grid-row: 1/3;
-          }
-
-          &:nth-child(5) {
-            grid-column: 2/4;
-          }
-        }
-      }
-
-      &.grid-2 {
-        grid-template-columns: 50% 50%;
-        grid-template-rows: var(--space-2xl) 300px 300px;
-
-        div {
-          grid-column: 1/2;
-        }
-
-        img {
-          &:nth-child(2) {
-            grid-row: 2/4;
-          }
-          &:nth-child(3) {
-            grid-row: 1/3;
-          }
-        }
-      }
-    }
-  }
-
-  &__illustration-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: var(--gutter);
-
-    & :nth-child(odd):nth-last-child(5) {
-      grid-column: 1/-1;
-    }
-  }
-
-  .c-alert 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;
-
-    h3,
-    h4 {
-      line-height: lh('prose');
-      font-size: 1em;
-      color: color('green');
-    }
-  }
-}
-
-// Header responsive styles
-@media only screen and (max-width: 1050px) {
-  .c-library__logo-name span:nth-last-child(3),
-  .c-library__logo-name span:nth-last-child(1) {
-    @include step(-2);
-  }
-
-  .c-library__logo-name span:nth-last-child(2) {
-    @include step(1);
-  }
-
-  .c-library__header nav li:last-child {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 650px) and (max-width: 700px),
-  screen and (max-width: 450px) {
-  .c-library__header nav .u-row {
-    @include space('gap', '2xs');
-    @include step(-2);
-  }
-}
-
-.c-library__header {
-  @media only screen and (max-width: 650px) {
-    nav a {
-      @include padding('2xs', 0);
-      display: block;
-    }
-
-    .c-library-page-active:after {
-      @include space('bottom', '3xs');
-    }
-  }
-}
-
-.u-resize {
-  overflow: hidden;
-  resize: both;
-}

package/src/assets/scss/main.scss

@@ -1,6 +0,0 @@
-@import './tools';
-@import './foundations';
-@import './elements';
-@import './objects';
-@import './components';
-@import './utilities';

package/src/assets/scss/objects/button-wrap.scss

@@ -1,18 +0,0 @@
-@mixin button-wrap {
-    display: flex;
-    flex-flow: row wrap;
-    @include space('gap', '2xs');
-
-    & > .c-button,
-    & > button,
-    & > input[type='button'],
-    & > input[type='submit'] {
-        &:not(:only-child) {
-            flex-grow: 1;
-        }
-    }
-}
-
-.o-button-wrap {
-    @include button-wrap;
-}

package/src/assets/scss/objects/clickable-parent.scss

@@ -1,3 +0,0 @@
-.o-clickable-parent {
-    @include clickable-parent;
-}