mediacube-ui-v2 0.0.3 → 0.0.5

package/src/assets/main.scss

@@ -0,0 +1,233 @@
+@use "tokens/font-families.scss" as *;
+@use "tokens/animations.scss" as *;
+@use "tokens/spacings.scss" as *;
+@use "tokens/colors.scss" as *;
+@use "tokens/media-queries.scss" as *;
+@use 'sass:color' as sasscolor;
+
+$system-color: #8756FF;
+
+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: 13px;
+}
+
+body {
+    overflow-y: hidden;
+}
+
+body,
+#__nuxt,
+#__layout,
+.mc-tm-root {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+    // убирает превращение х в знак умножения между цифр
+    font-variant-ligatures: none !important;
+}
+
+body {
+    margin: 0;
+    overflow-y: auto;
+    word-break: break-word;
+
+    font-family: $font-family-main;
+    font-size: 13px;
+    line-height: 16px;
+    color: #202427;
+    font-variant: none !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%;
+    user-select: none;
+}
+
+a {
+    text-decoration-skip-ink: auto;
+}
+
+::selection {
+    background: sasscolor.scale($system-color, $lightness: 0%);
+    color: #ffffff;
+}
+
+::-moz-selection {
+    background: sasscolor.scale($system-color, $lightness: 0%);
+    color: #ffffff;
+}
+
+input,
+textarea,
+[contenteditable] {
+    caret-color: $system-color;
+}
+
+button {
+    -webkit-appearance: none;
+}
+
+a,
+button {
+    outline: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+hr {
+    box-sizing: content-box;
+    overflow: visible;
+}
+
+pre {
+    font-size: 0.7em;
+}
+
+// Spaces
+@each $space, $value in $token-spaces {
+    .pb-#{$space} {
+        padding-bottom: $value !important;
+    }
+    .pt-#{$space} {
+        padding-top: $value !important;
+    }
+
+    .mb-#{$space} {
+        margin-bottom: $value !important;
+    }
+    .mt-#{$space} {
+        margin-top: $value !important;
+    }
+}
+
+// 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;
+    }
+}
+
+.color {
+    @each $name, $color in $token-colors {
+        &--#{$name} {
+            color: $color;
+        }
+    }
+}

package/src/assets/styles/_functions.scss

@@ -0,0 +1,187 @@
+/* GLOBAL FUNCTIONS
+--------------------------------------------- */
+
+// Create a tint
+//
+// @param  {Color}  $color to tint
+// @param  {Number} $percentage of `$color` in returned color
+// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+// Create a shade
+//
+// @param  {Color}  $color to shade
+// @param  {Number} $percentage of `$color` in returned color
+// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+// Calculate color difference
+// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
+//
+// @param  {Color} $color of foreground
+// @param  {Color} $color of background
+// @return {Boolean}
+@function color-difference($foreground, $background) {
+  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
+  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
+  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
+  $sum-rgb: $r + $g + $b;
+
+  @if $sum-rgb < 350 {
+    @return "false";
+  } @else {
+    @return "true";
+  }
+}
+
+// Set text color based on contrast
+//
+// @param  {Color}  $color to set
+// @param  {Color}  $background color to test
+// @param  {Color}  $fallback color to set in case contrast check fails
+@function set-text-color($color, $background, $fallback: null) {
+  @if $fallback == null {
+    $fallback: #000;
+  }
+  @if (color-difference($color, $background) == "false") {
+    @return $fallback;
+  } @else {
+    @return $color;
+  }
+}
+
+/// Darkens the foreground color by the background color. This is the same as the
+/// “multiply” filter in graphics apps.
+///
+/// @param {Color} $foreground - The color to darken.
+/// @param {Color} $background - The background to base darkening on.
+/// @return {Color} The modified color.
+@function color-multiply($foreground, $background: null) {
+  @if $background == null {
+    $background: #ffffff;
+  }
+
+  @return calc(#{$foreground} * #{$background} / 255);
+}
+
+/// Returns the value in rem for a given pixel value.
+/// @param {Number} $value - The pixel value to be converted.
+/// @return {Number} The converted value in rem.
+@function rem($value) {
+  $unit: unit($value);
+
+  @if $unit == "rem" {
+    @return $value;
+  } @else if $unit == "px" {
+    @return calc((#{$value} / #{$font-size-300}) * 1rem);
+  } @else if $unit == "em" {
+    @return calc((#{$unit} / (1em)) * 1rem);
+  } @else {
+    @error "Value must be in px, em, or rem.";
+  }
+}
+
+/// Returns the value in pixels for a given rem value.
+/// @param {Number} $value - The rem value to be converted.
+/// @return {Number} The converted value in pixels.
+@function px($value) {
+  $unit: unit($value);
+
+  @if $unit == "px" {
+    @return $value;
+  } @else if $unit == "em" {
+    @return calc((#{$value} / (1em)) * #{$font-size-300});
+  } @else if $unit == "rem" {
+    @return calc((#{$value} / (1rem)) * #{$font-size-300});
+  } @else {
+    @error "Value must be in rem, em, or px.";
+  }
+}
+
+/// Returns the list of available names in a given map.
+/// @param {Map} $map - The map of data to list the names from.
+/// @param {Number} $map - The level of depth to get names from.
+/// @return {String} The list of names in the map.
+@function available-names($map, $level: 1) {
+  @if type-of($map) != "map" {
+    @return null;
+  }
+
+  $output: "";
+  $newline: "\A ";
+
+  @if $level == 1 {
+    @each $key, $value in $map {
+      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
+    }
+  } @else {
+    $output: "(";
+    $i: 1;
+
+    @each $key, $value in $map {
+      $sep: if($i < length($map), ", ", "");
+      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
+      $i: $i + 1;
+    }
+
+    $output: $output + ")";
+  }
+
+  @return $output;
+}
+
+/**
+ * Преобразование пикселей в em на основе переменной с базовым размером шрифта
+ * (указывается в px) проекта.
+ * @param  {number} $px Число без единиц измерения, кол-во пикселей
+ * @param  {string} $font-size Число пикселей, размер конт. шрифта на проекте
+ * @return {string} Результат преобразования $px в em на основе $font-size
+ */
+
+@function px-to-em($px, $font-size) {
+  @return calc(((#{$px} * 100 / calc(#{$font-size} / (1px))) / 100) * 1em);
+}
+
+/**
+ * Преобразование пикселей в множитель
+ * @param  {number} $line-height Число без единиц измерения, высота строки
+ * @param  {number} $font-size Число без единиц измерения, размер шрифта
+ * @return {number} Результат преобразования $line-height в множитель на основе $font-size
+ */
+@function line-height($line-height, $font-size) {
+  @return calc(round(calc((#{$line-height} / #{$font-size}) * 100)) / 100);
+}
+
+@function sum($numbers...) {
+  $sum: 0;
+  @each $number in $numbers {
+    $sum: $sum + $number;
+  }
+
+  @return $sum;
+}
+
+@function diff($from, $numbers...) {
+  @each $number in $numbers {
+    $from: $from - $number;
+  }
+
+  @return $from;
+}
+
+@function multiplication($from, $numbers...) {
+  @each $number in $numbers {
+    $from: $from * $number;
+  }
+
+  @return $from;
+}
+
+@function swapSign($number) {
+
+  @return -$number;
+}