mediacube-ui-v2 0.0.2 → 0.0.4

package/src/assets/styles/_mixins.scss

@@ -0,0 +1,664 @@
+/* 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

@@ -0,0 +1,33 @@
+/* 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;
+}