mediacube-ui 0.1.345 → 0.1.347

package/src/styles/_mixins.scss

@@ -1,612 +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);
-*/
-
-
-@import '../tokens/border-radius';
-
-@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
-) {
-  $box-edge-values: _unpack-shorthand($box-edge-values);
-  $offsets: (
-          "top": nth($box-edge-values, 1),
-          "inset-inline-end": nth($box-edge-values, 2),
-          "bottom": nth($box-edge-values, 3),
-          "inset-inline-start": nth($box-edge-values, 4),
-  );
-
-  position: $position;
-
-  @each $offset, $value in $offsets {
-      #{$offset}: $value;
-  }
-}
-
-@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;
-  }
-
-  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: darken($second-color, 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,) {
-  ::-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 {
-  }
-  /* Firefox */
-  @-moz-document url-prefix() {
-    scrollbar-color: $color-outline-gray $color-transparent;
-    scrollbar-width: thin;
-  }
-}
-
-@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 editor-notification-styles {
-  @include editor-default-styles;
-  h1 {
-    margin-bottom: $space-250;
-    img {
-      object-fit: cover;
-      margin: $space-zero auto $space-50;
-      @media #{$media-query-s} {
-        margin: $space-zero auto $space-250;
-      }
-    }
-  }
-  h2 {
-    margin-bottom: $space-200;
-  }
-  * + h2 {
-    margin-top: $space-300;
-  }
-  h3, strong {
-    margin-bottom: $space-100;
-  }
-  * + h3 {
-    margin-top: $space-250;
-  }
-  img {
-    object-fit: cover;
-    margin: $space-250 $space-zero;
-  }
-  img.horizontal {
-    width: 100%;
-    height: auto;
-    max-height: 200px;
-  }
-  img.vertical {
-    display: block;
-    max-height: 180px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  blockquote {
-    margin-top: $space-100;
-    font-size: $font-size-300;
-    font-weight: $font-weight-normal;
-    line-height: $line-height-300;
-  }
-}
-
-@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-bottom: $space;
-  }
-}
-@mixin child-indent-top($space) {
-  > *:not(:first-child) {
-    margin-top: $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/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;
-}

package/src/styles/_variables.scss

@@ -1,23 +0,0 @@
-@import '../tokens/animations.scss';
-@import '../tokens/border-radius.scss';
-@import '../tokens/box-shadows.scss';
-@import '../tokens/colors.scss';
-@import '../tokens/gradients.scss';
-@import '../tokens/durations.scss';
-@import '../tokens/easings.scss';
-@import '../tokens/font-families.scss';
-@import '../tokens/font-sizes.scss';
-@import '../tokens/font-weights.scss';
-@import '../tokens/gradients.scss';
-@import '../tokens/letter-spacings.scss';
-@import '../tokens/line-heights.scss';
-@import '../tokens/media-queries.scss';
-@import '../tokens/opacities.scss';
-@import '../tokens/sizes.scss';
-@import '../tokens/spacings.scss';
-@import '../tokens/z-indexes.scss';
-
-
-
-
-