@inspark/components-web 14.0.14 → 19.0.0

package/src/panel/_variables.scss

@@ -1,5 +1,6 @@
-@import "../base/variables";
-@import "../base/functions";
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
+@use "../typography/variables" as *;
 //== Panels
 //
 //##

package/src/panel/ids-panel.scss

@@ -1,2 +1,2 @@
-@import "./mixins";
+@use "./mixins" as *;
 @include ids-panel-core-styles;

package/src/particles/_mixins.scss

@@ -1,64 +1,65 @@
-@mixin ids-particles-core-styles {
-  //.c-particles {
-  //  position: absolute;
-  //  top: 0;
-  //  bottom: 0;
-  //  left: 0;
-  //  right: 0;
-  //  transform: translateZ(0px);
-  //}
-  //
-  //.c-particles__item {
-  //  position: absolute;
-  //  border-radius: 50%;
-  //}
-  //
-  //// todo: convert styles to mixin
-  //
-  //.c-particles__item_image_1 {
-  //  background-image: url(/assets/static/img/content/svg/image1.svg);
-  //}
-  //
-  //.c-particles__item_image_2 {
-  //  background-image: url(/assets/static/img/content/svg/image2.svg);
-  //}
-  //
-  //.c-particles__item_image_3 {
-  //  background-image: url(/assets/static/img/content/svg/image3.svg);
-  //}
-  //
-  //.c-particles__item_image_4 {
-  //  background-image: url(/assets/static/img/content/svg/image4.svg);
-  //}
-  //
-  //.c-particles__item_image_5 {
-  //  background-image: url(/assets/static/img/content/svg/image5.svg);
-  //}
-  //
-  //.c-particles__item_image_6 {
-  //  background-image: url(/assets/static/img/content/svg/image6.svg);
-  //}
-  //
-  //.c-particles__item_image_7 {
-  //  background-image: url(/assets/static/img/content/svg/image7.svg);
-  //}
-  //
-  //@for $i from 1 through 30 {
-  //  @keyframes particle-animation-#{$i} {
-  //    100% {
-  //      transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
-  //    }
-  //  }
-  //
-  //  .c-particles__item:nth-child(#{$i}) {
-  //    animation: particle-animation-#{$i} 60s infinite;
-  //    $size: random(50) + 50 + px;
-  //    opacity: 0.8;
-  //    height: $size;
-  //    width: $size;
-  //    animation-delay: -$i * .2s;
-  //    transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
-  //  }
-  //}
-}
-
+@use "../tools/tools.border-radius" as *;
+@mixin ids-particles-core-styles {
+  //.c-particles {
+  //  position: absolute;
+  //  top: 0;
+  //  bottom: 0;
+  //  left: 0;
+  //  right: 0;
+  //  transform: translateZ(0px);
+  //}
+  //
+  //.c-particles__item {
+  //  position: absolute;
+  //  border-radius: 50%;
+  //}
+  //
+  //// todo: convert styles to mixin
+  //
+  //.c-particles__item_image_1 {
+  //  background-image: url(/assets/static/img/content/svg/image1.svg);
+  //}
+  //
+  //.c-particles__item_image_2 {
+  //  background-image: url(/assets/static/img/content/svg/image2.svg);
+  //}
+  //
+  //.c-particles__item_image_3 {
+  //  background-image: url(/assets/static/img/content/svg/image3.svg);
+  //}
+  //
+  //.c-particles__item_image_4 {
+  //  background-image: url(/assets/static/img/content/svg/image4.svg);
+  //}
+  //
+  //.c-particles__item_image_5 {
+  //  background-image: url(/assets/static/img/content/svg/image5.svg);
+  //}
+  //
+  //.c-particles__item_image_6 {
+  //  background-image: url(/assets/static/img/content/svg/image6.svg);
+  //}
+  //
+  //.c-particles__item_image_7 {
+  //  background-image: url(/assets/static/img/content/svg/image7.svg);
+  //}
+  //
+  //@for $i from 1 through 30 {
+  //  @keyframes particle-animation-#{$i} {
+  //    100% {
+  //      transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
+  //    }
+  //  }
+  //
+  //  .c-particles__item:nth-child(#{$i}) {
+  //    animation: particle-animation-#{$i} 60s infinite;
+  //    $size: random(50) + 50 + px;
+  //    opacity: 0.8;
+  //    height: $size;
+  //    width: $size;
+  //    animation-delay: -$i * .2s;
+  //    transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
+  //  }
+  //}
+}
+

package/src/particles/ids-particles.scss

@@ -1,3 +1,3 @@
-@import "./mixins";
+@use "./mixins" as *;
 
 @include ids-particles-core-styles;

package/src/radio/_mixins.scss

@@ -1,210 +1,212 @@
-@import "../base/variables";
-@import "../theme/variables";
-@import "../form/variables";
-@import "../checkbox/variables";
-@import "./variables";
-
-// todo: отрефакторить структуру миксинов в core и названия переменных
-
-@mixin ids-radio-core-styles {
-  .c-radio {
-    @include c-radio;
-  }
-
-  .c-radio__input {
-    @include c-radio__input;
-  }
-
-  .c-radio_inline {
-    @include c-radio_inline;
-  }
-}
-
-/*
-Radio button
-
-markup:
-<label class="c-radio">
-  <input type="radio" class="c-radio__input" name="r1">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check this</span>
-</label>
-<label class="c-radio">
-  <input type="radio" class="c-radio__input" name="r1" checked>
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check that</span>
-</label>
-<label class="c-radio">
-  <input type="radio" class="c-radio__input" name="r2" disabled >
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check Disabled</span>
-</label>
-<label class="c-radio">
-  <input type="radio" class="c-radio__input" name="r2" checked disabled >
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check Disabled</span>
-</label>
-
-*/
-
-@mixin c-radio {
-  display: block;
-  margin-right: $unit-small;
-  margin-top: $unit-tiny;
-  margin-bottom: $unit-tiny;
-  cursor: pointer;
-}
-
-@mixin c-radio__input($sibling-icon-selector : ".c-radio__icon") {
-  display: none;
-
-  + #{$sibling-icon-selector} {
-    display: inline-block;
-    position: relative;
-    height: 15px;
-    margin-bottom: 0;
-    padding-left: 28px;
-    font-size: $font-size-base;
-    font-weight: $font-weight-normal;
-    line-height: $line-height-computed;
-    text-transform: none;
-    cursor: pointer;
-
-    &::before,
-    &::after {
-      position: absolute;
-      left: 0;
-      width: $checkbox-size - 4px;
-      height: $checkbox-size - 4px;
-      border: 2px solid $checkbox-border-color;
-      border: 2px solid var(--ids-theme-checkbox-border-color, $checkbox-border-color);
-      border-radius: $global-radius-rounded;
-      // scss-lint:disable ColorVariable
-      background: transparent;
-      // scss-lint:enable ColorVariable
-      content: " ";
-    }
-
-    &::after {
-      top: 5px;
-      left: 5px;
-      width: 10px;
-      height: 10px;
-      transition: transform 0.1s ease-in-out, opacity 0.2s linear;
-      opacity: 0;
-    }
-  }
-
-  &:checked + #{$sibling-icon-selector}::after {
-    //transform: scale3d(1, 1, 1);
-    background: $ids-theme-primary;
-    background: var(--ids-theme-primary, $ids-theme-primary);
-    opacity: 1;
-  }
-
-  &[disabled] + #{$sibling-icon-selector} {
-    color: $form-color_disabled;
-    color: var(--ids-theme-form-color_disabled, $form-color_disabled);
-    cursor: not-allowed;
-
-    &::before,
-    &::after {
-      border-color: $checkbox-disabled-border-color;
-      border-color: var(--ids-theme-checkbox-disabled-border-color, $checkbox-disabled-border-color);
-      opacity: 0.5;
-    }
-
-    &::after {
-      // scss-lint:disable ImportantRule
-      background: transparent !important;
-      // scss-lint:enable ImportantRule
-      opacity: 0.5;
-      border: none;
-    }
-  }
-
-  &[disabled]:checked + #{$sibling-icon-selector} {
-    color: $form-color_disabled;
-    color: var(--ids-theme-form-color_disabled, $form-color_disabled);
-    cursor: not-allowed;
-
-    &::before,
-    &::after {
-      border-color: $checkbox-disabled-border-color;
-      border-color: var(--ids-theme-checkbox-disabled-border-color, $checkbox-disabled-border-color);
-      opacity: 0.5;
-    }
-
-    &::after {
-      // scss-lint:disable ImportantRule
-      background: $radio-disabled-background !important;
-      background: var(--ids-theme-radio-disabled-background, $radio-disabled-background) !important;
-      // scss-lint:enable ImportantRule
-      opacity: 0.5;
-    }
-  }
-
-  + #{$sibling-icon-selector}::before,
-  + #{$sibling-icon-selector}::after {
-    border-radius: 50%;
-  }
-
-  + #{$sibling-icon-selector}::after {
-    border-color: var(--ids-theme-primary, $ids-theme-primary);
-  }
-}
-
-/*
-Inline Radio
-
-Group radiobuttons on the same horizontal row by adding `.c-radio_inline` to any `.c-radio`.
-
-markup:
-<label class="c-radio c-radio_inline">
-  <input type="radio" class="c-radio__input" name="rig1">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check this</span>
-</label>
-<label class="c-radio c-radio_inline">
-  <input type="radio" class="c-radio__input" disabled name="rig1">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check Disabled</span>
-</label>
-<label class="c-radio c-radio_switch c-radio_inline">
-  <input type="radio" class="c-radio__input" checked name="rig1">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check that</span>
-</label>
-<label class="c-radio c-radio_switch c-radio_inline">
-  <input type="radio" class="c-radio__input" checked name="rig1">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Check that</span>
-</label>
-
-*/
-
-@mixin c-radio_inline {
-  display: inline-block;
-}
-
-/*
-Radio with custom label
-
-You can customize label view and even hide label. Just wrap it with `.c-radio__label` span.
-
-To hide label use `sr-only` class on `.c-radio__label` element. Do not remove label from html.
-
-markup:
-<label class="c-radio">
-  <input class="c-radio__input" type="radio">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label">Radio with custom label</span>
-</label>
-<label class="c-radio">
-  <input class="c-radio__input" type="radio">
-  <i class="c-radio__icon"></i>
-  <span class="c-radio__label sr-only">Radio with custom label</span>
-</label>
-
-*/
-
+@use "../base/variables" as *;
+@use "../theme/variables" as *;
+@use "../typography/variables" as *;
+@use "../form/variables" as *;
+@use "../checkbox/variables" as *;
+@use "./variables" as *;
+@use "../tools/tools.border-radius" as *;
+
+// todo: отрефакторить структуру миксинов в core и названия переменных
+
+@mixin ids-radio-core-styles {
+  .c-radio {
+    @include c-radio;
+  }
+
+  .c-radio__input {
+    @include c-radio__input;
+  }
+
+  .c-radio_inline {
+    @include c-radio_inline;
+  }
+}
+
+/*
+Radio button
+
+markup:
+<label class="c-radio">
+  <input type="radio" class="c-radio__input" name="r1">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check this</span>
+</label>
+<label class="c-radio">
+  <input type="radio" class="c-radio__input" name="r1" checked>
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check that</span>
+</label>
+<label class="c-radio">
+  <input type="radio" class="c-radio__input" name="r2" disabled >
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check Disabled</span>
+</label>
+<label class="c-radio">
+  <input type="radio" class="c-radio__input" name="r2" checked disabled >
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check Disabled</span>
+</label>
+
+*/
+
+@mixin c-radio {
+  display: block;
+  margin-right: $unit-small;
+  margin-top: $unit-tiny;
+  margin-bottom: $unit-tiny;
+  cursor: pointer;
+}
+
+@mixin c-radio__input($sibling-icon-selector : ".c-radio__icon") {
+  display: none;
+
+  + #{$sibling-icon-selector} {
+    display: inline-block;
+    position: relative;
+    height: 15px;
+    margin-bottom: 0;
+    padding-left: 28px;
+    font-size: $font-size-base;
+    font-weight: $font-weight-normal;
+    line-height: $line-height-computed;
+    text-transform: none;
+    cursor: pointer;
+
+    &::before,
+    &::after {
+      position: absolute;
+      left: 0;
+      width: $checkbox-size - 4px;
+      height: $checkbox-size - 4px;
+      border: 2px solid $checkbox-border-color;
+      border: 2px solid var(--ids-theme-checkbox-border-color, $checkbox-border-color);
+      border-radius: $global-radius-rounded;
+      // scss-lint:disable ColorVariable
+      background: transparent;
+      // scss-lint:enable ColorVariable
+      content: " ";
+    }
+
+    &::after {
+      top: 5px;
+      left: 5px;
+      width: 10px;
+      height: 10px;
+      transition: transform 0.1s ease-in-out, opacity 0.2s linear;
+      opacity: 0;
+    }
+  }
+
+  &:checked + #{$sibling-icon-selector}::after {
+    //transform: scale3d(1, 1, 1);
+    background: $ids-theme-primary;
+    background: var(--ids-theme-primary, $ids-theme-primary);
+    opacity: 1;
+  }
+
+  &[disabled] + #{$sibling-icon-selector} {
+    color: $form-color_disabled;
+    color: var(--ids-theme-form-color_disabled, $form-color_disabled);
+    cursor: not-allowed;
+
+    &::before,
+    &::after {
+      border-color: $checkbox-disabled-border-color;
+      border-color: var(--ids-theme-checkbox-disabled-border-color, $checkbox-disabled-border-color);
+      opacity: 0.5;
+    }
+
+    &::after {
+      // scss-lint:disable ImportantRule
+      background: transparent !important;
+      // scss-lint:enable ImportantRule
+      opacity: 0.5;
+      border: none;
+    }
+  }
+
+  &[disabled]:checked + #{$sibling-icon-selector} {
+    color: $form-color_disabled;
+    color: var(--ids-theme-form-color_disabled, $form-color_disabled);
+    cursor: not-allowed;
+
+    &::before,
+    &::after {
+      border-color: $checkbox-disabled-border-color;
+      border-color: var(--ids-theme-checkbox-disabled-border-color, $checkbox-disabled-border-color);
+      opacity: 0.5;
+    }
+
+    &::after {
+      // scss-lint:disable ImportantRule
+      background: $radio-disabled-background !important;
+      background: var(--ids-theme-radio-disabled-background, $radio-disabled-background) !important;
+      // scss-lint:enable ImportantRule
+      opacity: 0.5;
+    }
+  }
+
+  + #{$sibling-icon-selector}::before,
+  + #{$sibling-icon-selector}::after {
+    border-radius: 50%;
+  }
+
+  + #{$sibling-icon-selector}::after {
+    border-color: var(--ids-theme-primary, $ids-theme-primary);
+  }
+}
+
+/*
+Inline Radio
+
+Group radiobuttons on the same horizontal row by adding `.c-radio_inline` to any `.c-radio`.
+
+markup:
+<label class="c-radio c-radio_inline">
+  <input type="radio" class="c-radio__input" name="rig1">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check this</span>
+</label>
+<label class="c-radio c-radio_inline">
+  <input type="radio" class="c-radio__input" disabled name="rig1">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check Disabled</span>
+</label>
+<label class="c-radio c-radio_switch c-radio_inline">
+  <input type="radio" class="c-radio__input" checked name="rig1">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check that</span>
+</label>
+<label class="c-radio c-radio_switch c-radio_inline">
+  <input type="radio" class="c-radio__input" checked name="rig1">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Check that</span>
+</label>
+
+*/
+
+@mixin c-radio_inline {
+  display: inline-block;
+}
+
+/*
+Radio with custom label
+
+You can customize label view and even hide label. Just wrap it with `.c-radio__label` span.
+
+To hide label use `sr-only` class on `.c-radio__label` element. Do not remove label from html.
+
+markup:
+<label class="c-radio">
+  <input class="c-radio__input" type="radio">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label">Radio with custom label</span>
+</label>
+<label class="c-radio">
+  <input class="c-radio__input" type="radio">
+  <i class="c-radio__icon"></i>
+  <span class="c-radio__label sr-only">Radio with custom label</span>
+</label>
+
+*/
+

package/src/radio/_variables.scss

@@ -1,3 +1,5 @@
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
 $radio-disabled-background: $color-gray-5 !default;
 
 $ids-radio-theme-property-values: (

package/src/radio/ids-radio.scss

@@ -1,2 +1,2 @@
-@import "./mixins";
+@use "./mixins" as *;
 @include ids-radio-core-styles;

package/src/ratio/_mixins.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 @use "sass:meta";
-@import "./variables";
+@use "./variables" as *;
 
 /* ==========================================================================
    #RATIO

package/src/ratio/_variables.scss

@@ -1,3 +1,5 @@
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
 // A list of aspect ratios that get generated as modifier classes.
 
 $inuit-ratios: (

package/src/ratio/ids-ratio.scss

@@ -1,2 +1,2 @@
-@import "./mixins";
+@use "./mixins" as *;
 @include ids-ratio-core-styles;

package/src/sass-mq/_mixins.scss

@@ -3,7 +3,7 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string";
-@import "./variables";
+@use "./variables" as *;
 
 
 // See https://github.com/sass-mq/sass-mq/pull/10

package/src/sass-mq/_variables.scss

@@ -1,3 +1,5 @@
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
 // To enable support for browsers that do not support @media queries,
 // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
 // Create a separate stylesheet served exclusively to these browsers,

package/src/sass-mq/ids-sass-mq.scss

@@ -1,2 +1,2 @@
-@import "./mixins";
+@use "./mixins" as *;
 @include ids-sass-mq-core-styles;