mp-design-system 1.2.64 → 1.2.65

package/src/assets/scss/tools/cutoff.scss

@@ -1,50 +0,0 @@
-// Cutoff corner effect
-@mixin cutoff($corner:"bottom-right", $size:var(--gutter)) {
-    
-    $offset : calc(100% - $size);
-
-    // Co-ordinates for the polygon
-    $co1: "0 0";
-    $co2: "100% 0";
-    $co3: "100% 100%";
-    $co4: "0 100%";
-
-    // Override the basic co-ordinates
-    @if $corner == "top-left" {
-        $co1: "0 #{$size}, #{$size} 0";
-    } @else if $corner == "top-right" {
-        $co2: "#{$offset} 0, 100% #{$size}";
-    } @else if $corner == "bottom-left" {
-        $co4: "#{$size} 100%, 0 #{$offset}";
-    } @else {
-        $co3: "100% #{$offset}, #{$offset} 100%";
-    }
-
-    clip-path: polygon(
-        #{$co1}, #{$co2}, #{$co3}, #{$co4}
-    );
-}
-
-.u-cutoff {
-    @include cutoff
-}
-
-.u-cutoff--top-right {
-    @include cutoff("top-right")
-}
-
-.u-cutoff--top-left {
-    @include cutoff("top-left")
-}
-
-.u-cutoff--bottom-left {
-    @include cutoff("bottom-left")
-}
-
-.u-cutoff--m {
-    @include cutoff($size: var(--space-m))
-}
-
-.u-cutoff--xl {
-    @include cutoff($size: var(--space-xl))
-}

package/src/assets/scss/tools/index.scss

@@ -1,172 +0,0 @@
-@import './breakout.scss';
-@import './cutoff.scss';
-
-@function color($palette, $tone: 'step-0') {
-  @return map-get(map-get($colours, $palette), $tone);
-}
-
-@function lh($size: 'base') {
-  @return map-get($line-heights, $size);
-}
-
-@function ls($size: 'base') {
-  @return map-get($letter-spacings, $size);
-}
-
-@function weight($size: 'base') {
-  @return map-get($weights, $size);
-}
-
-@mixin step($step: 0) {
-  letter-spacing: ls(map-get(map-get($steps, $step), ls));
-  font-size: 1px * map-get(map-get($steps, $step), max);
-  font-size: var(--step-#{$step});
-}
-
-@mixin flow($size) {
-  & > * + * {
-    @include margin-top($size);
-  }
-}
-
-@function space-size($key: s) {
-  @return $space-base * map-get($spaces, $key);
-}
-
-@function space-unit($key: s) {
-  @return space-size($key) * 1px;
-}
-
-@mixin space-between($min, $max) {
-  --space-#{$min}-#{$max}: calc(
-    ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) *
-      var(--fluid-bp)
-  );
-}
-
-@function safe-space($value, $safe: false) {
-  @if (type-of($value) == number) {
-    @return $value;
-  } @else if (type-of($value) == null) {
-    @return 0;
-  } @else if (type-of($value) == string) {
-    $split: get-min-max($value);
-    $min: nth($split, 1);
-
-    @if ($value == 'gutter') {
-      @if ($safe) {
-        @return space-unit(s);
-      } @else {
-        @return var(--gutter);        
-      }
-    }
-
-    @if ($value == 'auto') {
-      @return auto;
-    }
-    
-    @if ($safe) {
-      @return space-unit($min);
-    } @else {
-      @return var(--space-#{$value});      
-    }
-  }
-}
-
-@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }
-@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }
-@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }
-@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }
-@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }
-@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }
-@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }
-@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }
-@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }
-@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }
-@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }
-@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }
-@mixin top($arg1: '') { @include space('top', $arg1); }
-
-@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {
-  @if ($arg4 != '') {
-    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);
-    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);
-  } @else if ($arg3 != '') {
-    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);
-    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);
-  } @else if ($arg2 != '') {
-    #{$property}: safe-space($arg1, true) safe-space($arg2, true);
-    #{$property}: safe-space($arg1) safe-space($arg2);
-  } @else if ($arg1 != '') {
-    #{$property}: safe-space($arg1, true);
-    #{$property}: safe-space($arg1);
-  }
-}
-
-@function get-min-max($value) {
-  $split: str-split($value, '-');
-  $min: nth($split, 1);
-
-  @if (length($split) == 1) {
-    @return ($min, null);
-  } @else {
-    @return ($min, nth($split, 2))
-  }
-}
-
-@function str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index : str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-      // get the substring from the first character to the separator
-      $item: str-slice($string, 1, $index - 1);
-      // push item to array
-      $split-arr: append($split-arr, $item);
-      // remove item and separator from string
-      $string: str-slice($string, $index + 1);
-      // find new index of separator
-      $index : str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-@mixin hyphenated {
-  @media only screen and (max-width: 28rem) {
-    word-break: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto;
-  }
-
-  @media only screen and (max-width: 70rem) {
-    [lang='de-DE'] & {
-      word-break: break-word;
-      -webkit-hyphens: auto;
-      -ms-hyphens: auto;
-      hyphens: auto;
-    }
-  }
-}
-
-@mixin clickable-parent {
-  position: static;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    cursor: pointer !important;
-    display: flex;
-    z-index: 1;
-  }
-}

package/src/assets/scss/utilities/colour.scss

@@ -1,10 +0,0 @@
-@each $name, $colour in $colours {
-  .u-#{$name} { color: color($name); }
-  .u-bg-#{$name} { background-color: color($name); }
-  @each $tone, $shade in $colour {
-    @if ($tone != 'step-0') {
-      .u-#{$name}-#{$tone} { color: color($name, $tone); }
-      .u-bg-#{$name}-#{$tone} { background-color: color($name, $tone); }
-    }
-  }
-}

package/src/assets/scss/utilities/disabled.scss

@@ -1,8 +0,0 @@
-.u-disabled {
-    cursor: not-allowed;
-  
-    input,
-    button {
-      pointer-events: none;
-    }
-}

package/src/assets/scss/utilities/display.scss

@@ -1,156 +0,0 @@
-.u-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(0 0 100% 0);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  transition: 300ms clip-path;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.u-revealed {
-  clip-path: inset(0);
-  transition: 300ms clip-path;
-}
-
-.u-clear-both {
-  clear: both;
-}
-
-.u-display-none {
-  display: none;
-}
-
-.u-display-block {
-  display: block;
-}
-
-.u-display-inline-block {
-  display: inline-block;
-}
-
-.u-float-left {
-  float: left;
-}
-
-.u-float-right {
-  float: right;
-}
-
-.u-float--image-left {
-  @extend .u-float-left;
-  @include margin(0, 0, "xs-l", 0);
-  width: 100%;
-
-  @media (min-width: 38em) {
-    @include margin-right('xs-l');
-    min-width: 9rem;
-    width: 50%;
-  }
-}
-
-.u-float--image-right {
-  @extend .u-float-right;
-  @include margin(0, 0, "xs-l", 0);
-  width: 100%;
-
-  @media (min-width: 38em) {
-    @include margin-left('xs-l');
-    min-width: 9rem;
-    width: 50%;
-  }
-}
-
-.u-fill {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: 1;
-
-  object-fit: cover;
-}
-
-.u-fill--link {
-  overflow: hidden;
-  white-space: nowrap;
-  text-indent: 200%;
-}
-
-.u-relative {
-  position: relative;
-}
-
-.u-sticky {
-  position: sticky;
-  top: 0;
-}
-
-.u-sticky--gutter {
-  @include space("top", "gutter");
-}
-
-.u-split {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-
-  &--top {
-    align-items: flex-start;
-  }
-
-  &--bottom {
-    align-items: flex-end;
-  }
-
-  & > :first-child {
-    @include margin-right("s");
-  }
-
-  @supports (gap: 1rem) {
-    @include gap("s-m");
-    
-    & > :first-child {
-      margin-right: unset;
-    }
-  }
-}
-
-.u-row {
-  display: flex;
-  @include gap("s-l");
-}
-
-@supports (object-fit: contain) {
-  .u-object-contain {
-    object-fit: contain;
-  }
-}
-
-@supports (object-fit: cover) {
-  .u-2\/1 {
-    aspect-ratio: 2 / 1;
-    object-fit: cover;
-    object-position: 75% 50%;
-  }
-}
-
-.u-4\/1 {
-  aspect-ratio: 4;
-}
-
-
-@media (min-width: 640px) {
-  .u-md-hidden {
-    display: none !important;
-  }
-}
-
-// Used to hide un-compiled Vue code - Do not remove
-[v-cloak] {
-  display: none;
-}

package/src/assets/scss/utilities/divider.scss

@@ -1,6 +0,0 @@
-.u-divider {
-  & > * + * {
-    border-top: 1px solid;
-    border-top-color: color('grey', 'step-2');
-  }
-}

package/src/assets/scss/utilities/ellipsis.scss

@@ -1,7 +0,0 @@
-.u-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 0;
-  width: 100%;
-}

package/src/assets/scss/utilities/flex.scss

@@ -1,47 +0,0 @@
-.u-flex {
-  display: flex;
-}
-
-.u-flex-column {
-  flex-direction: column;
-}
-
-.u-align-center {
-  align-items: center;
-}
-
-.u-align-items-start {
-  align-items: flex-start;
-}
-
-.u-justify-center {
-  justify-content: center;
-}
-
-.u-justify-between {
-  justify-content: space-between;
-}
-
-.u-justify-end {
-  justify-content: flex-end;
-}
-
-.u-flex-1 {
-  flex: 1;
-}
-
-.u-flex-no-shrink {
-  flex-shrink: 0;
-}
-
-.u-flex-no-grow {
-  flex-grow: 0;
-}
-
-.u-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.u-flex-nowrap {
-  flex-wrap: nowrap;
-}

package/src/assets/scss/utilities/flow.scss

@@ -1,69 +0,0 @@
-.u-flow {
-  &--3xs {
-    @include flow('3xs');
-  }
-
-  &--2xs {
-    @include flow('2xs');
-  }
-
-  &--xs {
-    @include flow('xs');
-  }
-
-  &--s,
-  & {
-    @include flow('s');
-  }
-
-  &--m {
-    @include flow('m');
-  }
-
-  &--s-m {
-    @include flow('s-m');
-  }
-
-  &--s-l {
-    @include flow('s-l');
-  }
-
-  &--m-xl {
-    @include flow('m-xl');
-  }
-
-  &--l {
-    @include flow('l');
-  }
-
-  &--xl {
-    @include flow('xl');
-  }
-
-  &--l-2xl {
-    @include flow('l-2xl');
-  }
-
-  &--3xl {
-    @include flow('3xl');
-  }
-
-  &--prose > * + *,
-  // Fix for Tridion XPM markup interrupting u-flow--prose spacing
-  &--prose > [property='a:Content'] > * + * {
-    margin-top: var(--flow, 1em);
-  }
-
-  &--gutter {
-    @include flow('gutter');
-  }
-
-  &--lined {
-    & > * + * {
-      @include padding-top('m-xl');
-      @include margin-top('m-xl');
-      border-top: 1px solid color('petrol', 'step-2');
-      clear: both;
-    }
-  }
-}

package/src/assets/scss/utilities/gap.scss

@@ -1,3 +0,0 @@
-.u-gap--s {
-  @include gap('s');
-}

package/src/assets/scss/utilities/hr.scss

@@ -1,23 +0,0 @@
-.u-hr {
-  margin: 0;
-  border: none;
-  @include padding-bottom('m-xl');
-  @include margin-bottom('m-xl');
-  border-bottom: 1px solid color('petrol', 'step-2');
-}
-
-.u-border-top {
-  border-top: 1px solid color('petrol', 'step-2');
-}
-
-.u-border-bottom {
-  border-bottom: 1px solid color('petrol', 'step-2');
-}
-
-.u-border {
-  border: 1px solid color('petrol', 'step-2');
-}
-
-.o-prose hr {
-  @extend .u-hr
-}

package/src/assets/scss/utilities/index.scss

@@ -1,18 +0,0 @@
-html body {
-
-@import './typography.scss';
-@import './link.scss';
-@import './colour.scss';
-@import './disabled.scss';
-@import './divider.scss';
-@import './wrap.scss';
-@import './flex.scss';
-@import './gap.scss';
-@import './display.scss';
-@import './flow.scss';
-@import './space.scss';
-@import './hr.scss';
-@import './ellipsis.scss';
-@import './scroll-shadows.scss';
-
-}

package/src/assets/scss/utilities/link.scss

@@ -1,26 +0,0 @@
-.u-link-inside a,
-.mp .u-link,
-.u-link {
-  color: color('utility-blue');
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &--petrol {
-    color: color('petrol');
-  }
-
-  &--red {
-    color: color('red');
-  }
-  
-  &--underline {
-    text-decoration: underline;
-  
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}

package/src/assets/scss/utilities/scroll-shadows.scss

@@ -1,69 +0,0 @@
-// Scroll shadows
-// Helps identify when an element has overflow i.e. can be scrolled
-@mixin scroll-shadows($direction:vertical,$background-color:white) {
-    @supports (background-attachment: local) {
-        $cover-size: 54px;
-        $shadow-size: 27px;
-        $cover-direction: to bottom;
-        $shadow-position-start: 50% 0;
-        $shadow-position-end: 50% 100%;
-
-        @if $direction == vertical {
-            background-position: 
-                center top, 
-                center bottom, 
-                center top, 
-                center bottom;
-            background-size: 
-                100% $cover-size, 
-                100% $cover-size, 
-                100% $shadow-size, 
-                100% $shadow-size;
-        }
-        
-        @else if $direction == horizontal {
-            background-position: 
-                left center, 
-                right center, 
-                left center, 
-                right center;
-            background-size: 
-                $cover-size 100%, 
-                $cover-size 100%, 
-                $shadow-size 120%, 
-                $shadow-size 120%;
-            $cover-direction: to right;
-            $shadow-position-start: 0 50%;
-            $shadow-position-end: 100% 50%;
-        }
-
-        background-repeat: no-repeat;
-        background-color: $background-color;
-        background-attachment: local, local, scroll, scroll;
-        background-image: 
-            linear-gradient(
-                $cover-direction, 
-                $background-color 50%, 
-                transparent),
-            linear-gradient(
-                $cover-direction, 
-                transparent, 
-                $background-color 50%),
-            radial-gradient(
-                farthest-side at $shadow-position-start, 
-                transparentize(darken($background-color,40%), 0.7), 
-                transparent),
-            radial-gradient(
-                farthest-side at $shadow-position-end, 
-                transparentize(darken($background-color,40%), 0.7), 
-                transparent);
-    }
-}
-
-.u-scroll-shadows--v {
-    @include scroll-shadows
-}
-
-.u-scroll-shadows--h {
-    @include scroll-shadows(horizontal)
-}