mediacube-ui 0.1.7

package/src/styles/_mixins.scss

@@ -0,0 +1,366 @@
+@import '~bourbon/core/bourbon';
+
+/* 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);
+*/
+@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: unquote(calc(calc(#{$y} / #{$x}) * 100) + "%");
+
+  @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) {
+  color: $main-color;
+  &:hover,
+  &:focus {
+    color: $second-color;
+  }
+
+  &:active {
+    color: darken($second-color, 8%);
+  }
+}
+
+@mixin delete-link() {
+  @include default-link($color-black, $color-red);
+}
+@mixin text-link() {
+  @include default-link($color-purple, $color-hover-purple);
+}
+@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 {
+  }
+}
+
+@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() {
+  p,
+  strong,
+  em,
+  u,
+  span {
+    font-size: $font-size-200;
+    line-height: $line-height-200;
+    margin: 0;
+    &:empty {
+      display: none;
+    }
+  }
+  ol li,
+  ul li {
+    font-size: $font-size-300;
+    line-height: 28px;
+  }
+  a {
+    @include text-link();
+    text-decoration: none;
+  }
+  h1,
+  h1 * {
+    font-size: 40px !important;
+    line-height: $line-height-600;
+    margin: 0;
+  }
+  h2,
+  h2 * {
+    font-size: $font-size-600 !important;
+    line-height: $line-height-500;
+    margin: 0;
+  }
+  h3,
+  h3 * {
+    font-size: $font-size-400 !important;
+    line-height: $line-height-400;
+    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;
+  }
+}

package/src/styles/_spacing.scss

@@ -0,0 +1,66 @@
+/* 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);
+}
+
+// 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-right: $space;
+  }
+}
+@mixin child-indent-left($space) {
+  > *:not(:first-child) {
+    margin-left: $space;
+  }
+}
+@mixin child-indent-right-rtl($space) {
+  > *:not(:first-child) {
+    margin-right: $space;
+  }
+}
+@mixin child-indent-left-rtl($space) {
+  > *:not(:last-child) {
+    margin-left: $space;
+  }
+}
+
+@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

@@ -0,0 +1,23 @@
+@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';
+
+
+
+
+

package/src/styles/global.scss

@@ -0,0 +1,244 @@
+@import "toast";
+
+html {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -ms-overflow-style: scrollbar;
+  -ms-text-size-adjust: 100%;
+  min-height: 100%;
+  font-size: $font-size-200;
+}
+
+body {
+  overflow-y: hidden;
+}
+
+body,
+#__nuxt,
+#__layout,
+.mc-tm-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  overflow-y: auto;
+  word-break: break-word;
+
+  font-family: $font-family-main;
+  font-size: $font-size-200;
+  line-height: $line-height-200;
+  color: $color-black;
+  font-variant: normal !important;
+  font-feature-settings: normal !important;
+}
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+a,
+button,
+[role="button"],
+input,
+label,
+select,
+textarea {
+  touch-action: manipulation;
+}
+
+input {
+  overflow: visible;
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+svg {
+  fill: currentColor;
+
+  a &,
+  button & {
+    pointer-events: none;
+  }
+
+  &:not(:root) {
+    overflow: hidden;
+  }
+}
+
+img {
+  max-width: 100%;
+}
+
+a {
+  text-decoration-skip-ink: auto;
+}
+
+::selection {
+  background: fade-out($color-purple, 0);
+  color: $color-white;
+}
+
+::-moz-selection {
+  background: fade-out($color-purple, 0);
+  color: $color-white;
+}
+
+input,
+textarea,
+[contenteditable] {
+  caret-color: $color-purple;
+}
+
+button {
+  -webkit-appearance: none;
+}
+
+a,
+button {
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+hr {
+  box-sizing: content-box;
+  overflow: visible;
+}
+
+pre {
+  font-size: 0.7em;
+}
+
+/**
+ * Global classes
+ */
+
+// Spaces
+@each $space, $value in $token-spaces {
+  .pb-#{$space} {
+    padding-bottom: $value;
+    @media #{$media-query-m} {
+      padding-bottom: $value;
+    }
+    @media #{$media-query-l} {
+      padding-bottom: $value;
+    }
+  }
+  .pt-#{$space} {
+    padding-top: $value;
+    @media #{$media-query-m} {
+      padding-top: $value;
+    }
+    @media #{$media-query-l} {
+      padding-top: $value;
+    }
+  }
+
+  .mb-#{$space} {
+    margin-bottom: $value;
+    @media #{$media-query-m} {
+      margin-bottom: $value;
+    }
+    @media #{$media-query-l} {
+      margin-bottom: $value;
+    }
+  }
+  .mt-#{$space} {
+    margin-top: $value;
+    @media #{$media-query-m} {
+      margin-top: $value;
+    }
+    @media #{$media-query-l} {
+      margin-top: $value;
+    }
+  }
+}
+
+
+// Visibility
+.hidden-xs {
+  @media #{$media-query-xs} {
+    display: none !important;
+  }
+}
+.hidden-s {
+  @media #{$media-query-s} {
+    display: none !important;
+  }
+}
+.hidden-m {
+  @media #{$media-query-m} {
+    display: none !important;
+  }
+}
+.hidden-l {
+  @media #{$media-query-l} {
+    display: none !important;
+  }
+}
+
+.hidden-xs {
+  @media #{$media-query-xs-down} {
+    display: none !important;
+  }
+}
+.hidden-s-down {
+  @media #{$media-query-s-down} {
+    display: none !important;
+  }
+}
+.hidden-m-down {
+  @media #{$media-query-m-down} {
+    display: none !important;
+  }
+}
+.hidden-l-down {
+  @media #{$media-query-l-down} {
+    display: none !important;
+  }
+}

package/src/styles/main.scss

@@ -0,0 +1,5 @@
+@import 'variables.scss';
+@import 'spacing.scss';
+@import 'mixins.scss';
+@import 'functions.scss';
+@import "../assets/fonts/inter/inter.css";

package/src/styles/table.scss

@@ -0,0 +1,10 @@
+$vxe-table-border-color: $color-hover-gray;
+$vxe-table-header-background-color: $color-white;
+$vxe-table-row-hover-background-color: $color-hover-gray;
+$vxe-table-row-hover-striped-background-color: $color-hover-gray;
+$vxe-table-row-current-background-color: $color-lighter-purple;
+$vxe-table-row-hover-current-background-color: $color-lighter-purple;
+$vxe-table-row-cheched-background-color: $color-lighter-purple;
+$vxe-table-row-hover-cheched-background-color: $color-lighter-purple;
+
+$vxe-table-row-line-height: 16px;