mediacube-ui-v2 0.0.5 → 0.0.7

package/src/assets/styles/_mixins.scss

@@ -1,664 +0,0 @@
-/* GLOBAL MIXINS
---------------------------------------------- */
-
-/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES
-
-  @param {Number}  $responsive  - Viewport-based size
-  @param {Number}  $min         - Minimum font size (px)
-  @param {Number}  $max         - Maximum font size (px) (optional)
-
-  @param {Number}  $fallback    - Fallback for viewport-based units (optional)
-
-  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:
-
-  @include responsive-font(5vw, 35px, 150px, 50px);
-*/
-
-@use 'sass:list' as *;
-@use 'sass:color' as sasscolor;
-@use '../tokens/border-radius' as *;
-@use '../tokens/colors' as *;
-@use '../tokens/font-sizes' as *;
-@use '../tokens/line-heights' as *;
-@use '../tokens/spacings' as *;
-@use '../tokens/font-weights' as *;
-@use '../styles/functions' as *;
-
-@mixin size($width, $height: $width) {
-  height: $height;
-  width: $width;
-}
-@function _unpack-shorthand($shorthand) {
-  @if length($shorthand) == 1 {
-    @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
-  } @else if length($shorthand) == 2 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
-  } @else if length($shorthand) == 3 {
-    @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
-  } @else {
-    @return $shorthand;
-  }
-}
-
-@mixin position($position, $box-edge-values) {
-  position: $position;
-  $box-edge-values-unpacked: _unpack-shorthand($box-edge-values);
-  top: nth($box-edge-values-unpacked, 1);
-  inset-inline-end: nth($box-edge-values-unpacked, 2);
-  bottom: nth($box-edge-values-unpacked, 3);
-  inset-inline-start: nth($box-edge-values-unpacked, 4);
-}
-
-@mixin ellipsis($width: 100%, $display: inline-block) {
-  display: $display;
-  max-width: $width;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
-@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
-  $responsive-unitless: calc(#{$responsive} / (#{$responsive} - #{$responsive} + 1));
-  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
-  $min-breakpoint: calc(#{$min} / #{$responsive}-unitless * 100);
-
-  @media (max-#{$dimension}: #{$min-breakpoint}) {
-    font-size: $min;
-  }
-
-  @if $max {
-    $max-breakpoint: calc(#{$max} / #{$responsive-unitless} * 100);
-
-    @media (min-#{$dimension}: #{$max-breakpoint}) {
-      font-size: $max;
-    }
-  }
-
-  @if $fallback {
-    font-size: $fallback;
-  } @else {
-    font-size: $responsive;
-  }
-}
-
-// Reset
-@mixin reset {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-/// To be used on flex items. Resolves some common layout issues, such as
-/// text truncation not respecting padding or breaking out of container.
-/// https://css-tricks.com/flexbox-truncated-text/
-@mixin layout-flex-fix {
-  min-width: 0;
-  max-width: 100%;
-}
-
-@mixin align($vertical: true, $horizontal: false, $position: relative) {
-  @if $position {
-    position: $position;
-  }
-  @if $vertical {
-    top: 50%;
-  }
-  @if $horizontal {
-    left: 50%;
-  }
-
-  @if $vertical and $horizontal {
-    transform: translateX(-50%) translateY(-50%);
-  } @else if $vertical {
-    transform: translateY(-50%);
-  } @else {
-    transform: translateX(-50%);
-  }
-}
-
-@mixin hardware($backface: true, $perspective: 1000) {
-  @if $backface {
-    backface-visibility: hidden;
-  }
-
-  perspective: $perspective;
-}
-
-@mixin pseudo($display: block, $pos: absolute, $content: '') {
-  content: $content;
-  display: $display;
-  position: $pos;
-}
-
-/*
-	Responsive ratio
-	Used for creating scalable elements that maintain the same ratio
-	example:
-	.element {
-		@include responsive-ratio(400, 300);
-	}
-*/
-
-@mixin responsive-ratio($x, $y, $pseudo: false) {
-  $padding: calc(#{$y} / #{$x} * 100 * 1%);
-
-  @if $pseudo {
-    &::before {
-      @include pseudo($pos: relative);
-      width: 100%;
-      padding-top: $padding;
-    }
-  } @else {
-    padding-top: $padding;
-  }
-}
-
-@mixin input-placeholder {
-  &.placeholder {
-    @content;
-  }
-  &:-moz-placeholder {
-    @content;
-  }
-  &::-moz-placeholder {
-    @content;
-  }
-  &:-ms-input-placeholder {
-    @content;
-  }
-  &::-webkit-input-placeholder {
-    @content;
-  }
-}
-
-@mixin selection {
-  ::-moz-selection {
-    @content;
-  }
-  ::selection {
-    @content;
-  }
-}
-
-@mixin reset-text-indents() {
-  font-size: 0;
-  line-height: 0;
-}
-
-// Reset btn styles
-
-@mixin reset-btn() {
-  box-sizing: border-box;
-  display: block;
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  text-align: center;
-  text-decoration: none;
-  text-transform: none;
-  border-radius: 0;
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  cursor: pointer;
-  outline: 0;
-  font-size: 0;
-  line-height: 0;
-  font-family: inherit;
-  -webkit-appearance: none;
-  -webkit-text-fill-color: currentColor;
-  &:focus {
-    outline: 0;
-  }
-}
-
-@mixin default-link($main-color: $color-black, $second-color: $color-purple, $is-important: false) {
-  & {
-    color: $main-color if($is-important, !important, null);
-  }
-  &:hover,
-  &:focus {
-    color: $second-color if($is-important, !important, null);
-  }
-  &:active {
-    color: sasscolor.adjust($second-color, $lightness: 8%) if($is-important, !important, null);
-  }
-}
-
-@mixin delete-link() {
-  @include default-link($color-black, $color-red);
-}
-@mixin text-link($is-important: false) {
-  @include default-link($color-purple, $color-hover-purple, $is-important);
-}
-@mixin close-link() {
-  @include default-link($color-gray, $color-black);
-}
-
-@mixin field-error() {
-  color: $color-red;
-  font-size: 13px;
-  line-height: line-height(16, 13);
-  display: block;
-  margin-top: 5px;
-}
-
-@mixin custom-scroll($track-indent-vertical: 0, $track-indent-horizontal: 0) {
-  /* Firefox */
-  @-moz-document url-prefix() {
-    scrollbar-color: $color-outline-gray $color-transparent;
-    scrollbar-width: thin;
-  }
-  ::-webkit-scrollbar {
-    @include size(5px);
-    transition: background 0.3s;
-  }
-  ::-webkit-scrollbar-track {
-    margin: $track-indent-vertical $track-indent-horizontal;
-    background: $color-transparent;
-    border-radius: $radius-50;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: $color-outline-gray;
-    border-radius: $radius-50;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: $color-gray;
-  }
-  ::-webkit-scrollbar-thumb:active {
-  }
-}
-
-@mixin hide-scrollbar() {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-  &::-webkit-scrollbar {
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    display: none;
-  }
-}
-
-@mixin img-ofi($object-fit: 'cover') {
-  display: block;
-  @include position(absolute, 0);
-  @include size(100%);
-  object-fit: $object-fit;
-}
-
-@mixin input-placeholder {
-  &.placeholder {
-    @content;
-  }
-  &:-moz-placeholder {
-    @content;
-  }
-  &::-moz-placeholder {
-    @content;
-  }
-  &:-ms-input-placeholder {
-    @content;
-  }
-  &::-webkit-input-placeholder {
-    @content;
-  }
-}
-
-@mixin interplay() {
-  &:hover,
-  &:focus {
-    background-color: #ebebeb;
-  }
-  &:active {
-    background-color: #919191;
-  }
-}
-
-// This triangle can be used as hint or in the dropdown list instead of svg-icon
-@mixin css-triangle($color: $color-orange, $direction: 'up', $size: 6px, $position: absolute) {
-  @include pseudo($pos: $position);
-  @include size(0);
-  @if $direction == down {
-    border-left: $size solid transparent;
-    border-right: $size solid transparent;
-    border-top: $size solid $color;
-    margin-top: calc(0 - round(calc(#{$size} / 2.5)));
-  } @else if $direction == up {
-    border-left: $size solid transparent;
-    border-right: $size solid transparent;
-    border-bottom: $size solid $color;
-    margin-bottom: calc(0 - round(calc(#{$size} / 2.5)));
-  } @else if $direction == right {
-    border-top: $size solid transparent;
-    border-bottom: $size solid transparent;
-    border-left: $size solid $color;
-    margin-right: -$size;
-  } @else if $direction == left {
-    border-top: $size solid transparent;
-    border-bottom: $size solid transparent;
-    border-right: $size solid $color;
-    margin-left: -$size;
-  }
-}
-
-@mixin editor-default-styles($main-font-size: $font-size-300, $main-line-height: $line-height-300) {
-  p,
-  strong,
-  em,
-  u,
-  span {
-    font-size: $main-font-size;
-    line-height: $main-line-height;
-    margin: 0;
-    &:empty {
-      display: none;
-    }
-  }
-  ol,
-  ul {
-    margin-block-start: 0;
-    margin-block-end: 0;
-    padding-inline-start: $space-250;
-
-    li {
-      font-size: $main-font-size;
-      line-height: $main-line-height;
-    }
-  }
-  a {
-    @include text-link(true);
-    text-decoration: none;
-  }
-  h1 {
-    &,
-    & * {
-      font-size: 40px !important;
-      line-height: $line-height-600;
-      font-weight: $font-weight-bold;
-    }
-  }
-  h2 {
-    &,
-    & * {
-      font-size: $font-size-600 !important;
-      line-height: $line-height-500;
-      font-weight: $font-weight-bold;
-    }
-  }
-  h3,
-  h4,
-  h5,
-  h6 {
-    &,
-    & * {
-      font-size: $font-size-400 !important;
-      line-height: $line-height-400;
-      font-weight: $font-weight-bold;
-    }
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &,
-    & * {
-      margin: 0;
-    }
-  }
-  .ql {
-    &-editor {
-      padding: $space-150;
-      &.ql-blank::before {
-        left: $space-150;
-      }
-    }
-    &-align-center {
-      text-align: center;
-    }
-    &-align-right {
-      text-align: right;
-    }
-    &-align-left {
-      text-align: left;
-    }
-  }
-  img {
-    max-width: 100%;
-    max-height: 600px;
-    margin: $space-150 0;
-    border-radius: $radius-200;
-  }
-  blockquote {
-    border-left: $space-50 solid $color-purple !important;
-    margin: $space-zero;
-    padding-left: $space-200;
-  }
-}
-
-@mixin common-slide-styles {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease;
-  }
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-@mixin slideAnimations {
-  /*slide-right*/
-  .slide-right {
-    @include common-slide-styles;
-    &-enter {
-      transform: translateX(50%);
-    }
-    &-leave-to {
-      transform: translateX(-50%);
-    }
-  }
-  /*slide-left*/
-  .slide-left {
-    @include common-slide-styles;
-    &-enter {
-      transform: translateX(-50%);
-    }
-    &-leave-to {
-      transform: translateX(50%);
-    }
-  }
-}
-
-@mixin animation-border-spinner($duration: 2s, $border-color: $color-purple, $border-size: $space-100) {
-  background-repeat: no-repeat;
-  background-image: linear-gradient(to right, $border-color 100%, $border-color 100%),
-    linear-gradient(to bottom, $border-color 100%, $border-color 100%),
-    linear-gradient(to right, $border-color 100%, $border-color 100%),
-    linear-gradient(to bottom, $border-color 100%, $border-color 100%);
-  background-position:
-    0 0,
-    100% 0,
-    100% 100%,
-    0 100%;
-  background-size:
-    100% $border-size,
-    $border-size 100%,
-    100% $border-size,
-    $border-size 100%;
-  animation: spin-border $duration linear;
-
-  @keyframes spin-border {
-    0% {
-      background-position:
-        0 0,
-        100% 0,
-        100% 100%,
-        0 100%;
-      background-size:
-        0 $border-size,
-        $border-size 0,
-        0 $border-size,
-        $border-size 0;
-    }
-    10% {
-      background-position:
-        0 0,
-        100% 0,
-        100% 100%,
-        0 100%;
-      background-size:
-        0 $border-size,
-        $border-size 25%,
-        0 $border-size,
-        $border-size 0;
-    }
-    20% {
-      background-position:
-        0 0,
-        100% 100%,
-        100% 100%,
-        0 100%;
-      background-size:
-        0 $border-size,
-        $border-size 50%,
-        0 $border-size,
-        $border-size 0;
-    }
-    30% {
-      background-position:
-        0 0,
-        100% 100%,
-        100% 100%,
-        0 100%;
-      background-size:
-        0 $border-size,
-        $border-size 0,
-        100% $border-size,
-        $border-size 0;
-    }
-    40% {
-      background-position:
-        0 0,
-        100% 0,
-        0 100%,
-        0 100%;
-      background-size:
-        0 $border-size,
-        $border-size 0,
-        100% $border-size,
-        $border-size 100%;
-    }
-    50% {
-      background-position:
-        0 0,
-        100% 0,
-        0 100%,
-        0 100%;
-      background-size:
-        50% $border-size,
-        $border-size 0,
-        75% $border-size,
-        $border-size 100%;
-    }
-    60% {
-      background-position:
-        0 0,
-        100% 0,
-        0 100%,
-        0 100%;
-      background-size:
-        100% $border-size,
-        $border-size 0,
-        50% $border-size,
-        $border-size 100%;
-    }
-    70% {
-      background-position:
-        0 0,
-        100% 0,
-        0 100%,
-        0 100%;
-      background-size:
-        100% $border-size,
-        $border-size 33%,
-        25% $border-size,
-        $border-size 100%;
-    }
-    80% {
-      background-position:
-        0 0,
-        100% 0,
-        0 100%,
-        0 100%;
-      background-size:
-        100% $border-size,
-        $border-size 66%,
-        0 $border-size,
-        $border-size 100%;
-    }
-    90% {
-      background-position:
-        0 0,
-        100% 0,
-        100% 100%,
-        0 100%;
-      background-size:
-        100% $border-size,
-        $border-size 100%,
-        0 $border-size,
-        $border-size 100%;
-    }
-    100% {
-      background-position:
-        0 0,
-        100% 0,
-        100% 100%,
-        0 100%;
-      background-size:
-        100% $border-size,
-        $border-size 100%,
-        100% $border-size,
-        $border-size 100%;
-    }
-  }
-}
-
-@mixin mirror-x {
-  transform: scale(-1, 1);
-}
-
-@mixin gradientText($gradient) {
-  span {
-    -webkit-box-decoration-break: clone;
-    background: $gradient;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-// Create stack-space
-@mixin child-indent-bottom($space) {
-  > *:not(:last-child) {
-    margin-block-end: $space;
-  }
-}
-@mixin child-indent-top($space) {
-  > *:not(:first-child) {
-    margin-block-start: $space;
-  }
-}
-
-@mixin child-indent-right($space) {
-  > *:not(:last-child) {
-    margin-inline-end: $space;
-  }
-}
-@mixin child-indent-left($space) {
-  > *:not(:first-child) {
-    margin-inline-start: $space;
-  }
-}

package/src/assets/styles/_spacing.scss

@@ -1,33 +0,0 @@
-/* VUE DESIGN SYSTEM SPACING HELPERS
---------------------------------------------- */
-
-$spacing-ratio: $line-height-250;
-
-/*
-  INSET-SPACE: For interface containers.
-  INSET-SQUISH-SPACE: For buttons, form elements, cells.
-  STACK-SPACE: For vertically stacked content.
-  INLINE-SPACE: For things displayed inline.
-*/
-
-// Create inset-space
-//
-// @param  {Number} inset-space to set
-@mixin inset-space($value) {
-  padding: $value;
-}
-
-// Create inset-squish-space
-//
-// @param  {Number} inset-squish-space to set
-@mixin inset-squish-space($value) {
-  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
-}
-
-@mixin indent-top($space: $space-xs, $indent-type: "margin") {
-  #{$indent-type}-top: $space;
-}
-
-@mixin indent-bottom($size: "middle", $indent-type: "margin") {
-  #{$indent-type}-bottom: $space;
-}