@inspark/components-web 14.0.14 → 19.0.0

package/src/select/_mixins.scss

@@ -1,267 +1,269 @@
-@import "../base/variables";
-@import "../typography/variables";
-@import "../theme/variables";
-@import "../form/variables";
-@import "./variables";
-@import "../input/mixins";
-
-// todo: отрефакторить структуру миксинов в core и названия переменных
-
-@mixin ids-select-core-styles {
-
-  .c-select {
-    @include c-select;
-  }
-
-  .c-select_small {
-    @include c-select_small;
-  }
-
-  .c-select_is-success {
-    @include c-select_is-success;
-  }
-
-  .c-select_is-warning {
-    @include c-select_is-warning;
-  }
-
-  .c-select_is-error {
-    @include c-select_is-error;
-  }
-
-  .c-select_block {
-    @include c-select_block;
-  }
-}
-
-//  = SELECT
-//
-
-/*
-Select
-
-markup:
-<select class="c-select" name="" id="">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-<select class="c-select" disabled="" name="" id="">
-	<option value="">Disabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-
-*/
-
-@mixin c-select {
-  height: 37px;
-  padding: 6px $unit-large 6px 12px;
-  transition: box-shadow 0.2s linear, border-color 0.2s linear;
-  border: $form-border_outer;
-  border: var(--ids-theme-form-border_outer, $form-border_outer);
-  border-radius: $global-radius;
-  background-color: var(--ids-theme-select-background, $select-background);
-  background-image: var(--ids-theme-select-arrow, $select-arrow);
-  background-repeat: no-repeat;
-  background-position: calc(100% - 8px);
-  font-size: $font-size-base;
-  font-weight: $font-weight-normal;
-  line-height: 1.3;
-  cursor: pointer;
-  color: var(--ids-theme-select-color, $select-color);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  @media only screen
-  and (min-device-width: 320px)
-  and (max-device-width: $screen-limit-larger)
-  and (-webkit-min-device-pixel-ratio: 1.5) {
-    line-height: 1.6;
-    font-size: 16px;
-  }
-
-  &:hover {
-    border: 1px solid var(--ids-theme-select-border_hover, $select-border_hover);
-    box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
-    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
-  }
-
-  &:focus,
-  &:active {
-    border: 1px solid var(--ids-theme-select-border_hover, $select-border_hover);
-    box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
-    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
-    outline: 0;
-  }
-
-  &::-ms-expand {
-    display: none;
-  }
-
-  //&:active {
-  //  border: 1px solid $select-border_pressed;
-  //  border: 1px solid var(--ids-theme-select-border_pressed, $select-border_pressed);
-  //  box-shadow: $select-shadow_dark;
-  //  box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
-  //  background-color: $select-background_pressed;
-  //  background-color: var(--ids-theme-select-background_pressed, $select-background_pressed);
-  //}
-
-  &[disabled] {
-    border: 1px solid transparent;
-    box-shadow: none;
-    background-color: var(--ids-theme-select-background_disabled, $select-background_disabled);
-    background-image: var(--ids-theme-select-arrow-disabled, $select-arrow-disabled);
-    color: var(--ids-theme-select-color_disabled, $select-color_disabled);
-    cursor: not-allowed;
-  }
-
-  &[multiple] {
-    border: $form-border_outer;
-    border: var(--ids-theme-form-border_outer, $form-border_outer);
-    padding: $inuit-global-spacing-unit-tiny;
-    cursor: pointer;
-    background: $select-multiple-background;
-    background: var(--ids-theme-select-multiple-background, $select-multiple-background);
-  }
-
-  option {
-    color: var(--colorText);
-    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
-  }
-
-  optgroup {
-    color: var(--colorText);
-  //  background-color: #000;
-  //
-  //  option {
-  //    color: #13151c;
-  //    background-color: #fff;
-  //  }
-  }
-}
-
-/*
-Select small
-
-To match radio & checkbox.
-
-markup:
-<select class="c-select c-select_small" name="" id="">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-
-*/
-
-@mixin c-select_small {
-  height: 22px; // 22px to match radio & checkbox
-  font-size: $font-size-sm;
-  text-transform: uppercase;
-}
-
-/*
-Select statuses
-
-Select with validation status.
-
-markup:
-<select class="c-select c-select_is-success" name="" id="">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-<select class="c-select c-select_is-warning" name="" id="">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-<select class="c-select c-select_is-error" name="" id="">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-
-*/
-
-@mixin c-select_is-success {
-  border-color: var(--ids-theme-status-success, $ids-theme-status-success);
-
-  &:hover,
-  &:focus {
-    border-color: var(--ids-theme-status-success, $ids-theme-status-success);
-  }
-}
-
-@mixin c-select_is-warning {
-  border-color: var(--ids-theme-status-warning, $ids-theme-status-warning);
-
-  &:hover,
-  &:focus {
-    border-color: var(--ids-theme-status-warning, $ids-theme-status-warning);
-  }
-}
-
-@mixin c-select_is-error {
-  border-color: var(--ids-theme-status-error, $ids-theme-status-error);
-
-  &:hover,
-  &:focus {
-    border-color: var(--ids-theme-status-error, $ids-theme-status-error);
-  }
-}
-
-/*
-Select full width
-
-Select with validation status.
-
-markup:
-<select class="c-select c-select_block">
-	<option value="">Enabled</option>
-	<option value="">Option 2</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-
-*/
-
-@mixin c-select_block {
-  @include c-input_block;
-}
-
-/*
-Divider for select
-
-Divider may be created as option. See below:
-`<option value="" disabled="disabled" role="separator">─────────────────────────</option>`
-
-markup:
-<select class="c-select">
-	<option value="">Enabled</option>
-	<option value="" disabled="disabled" role="separator">─────────────────────────</option>
-	<option value="">Option 3</option>
-	<option value="">Option 4</option>
-	<option value="">Option 5</option>
-</select>
-
-*/
-
-@mixin c-select_block {
-  @include c-input_block;
-}
+@use "../base/variables" as *;
+@use "../theme/variables" as *;
+@use "../typography/variables" as *;
+@use "../mediaqueries/variables" as *;
+@use "../form/variables" as *;
+@use "./variables" as *;
+@use "../input/mixins" as *;
+@use "../tools/tools.border-radius" as *;
+
+// todo: отрефакторить структуру миксинов в core и названия переменных
+
+@mixin ids-select-core-styles {
+
+  .c-select {
+    @include c-select;
+  }
+
+  .c-select_small {
+    @include c-select_small;
+  }
+
+  .c-select_is-success {
+    @include c-select_is-success;
+  }
+
+  .c-select_is-warning {
+    @include c-select_is-warning;
+  }
+
+  .c-select_is-error {
+    @include c-select_is-error;
+  }
+
+  .c-select_block {
+    @include c-select_block;
+  }
+}
+
+//  = SELECT
+//
+
+/*
+Select
+
+markup:
+<select class="c-select" name="" id="">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+<select class="c-select" disabled="" name="" id="">
+	<option value="">Disabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+
+*/
+
+@mixin c-select {
+  height: 37px;
+  padding: 6px $unit-large 6px 12px;
+  transition: box-shadow 0.2s linear, border-color 0.2s linear;
+  border: $form-border_outer;
+  border: var(--ids-theme-form-border_outer, $form-border_outer);
+  border-radius: $global-radius;
+  background-color: var(--ids-theme-select-background, $select-background);
+  background-image: var(--ids-theme-select-arrow, $select-arrow);
+  background-repeat: no-repeat;
+  background-position: calc(100% - 8px);
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: 1.3;
+  cursor: pointer;
+  color: var(--ids-theme-select-color, $select-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  @media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: $screen-limit-larger)
+  and (-webkit-min-device-pixel-ratio: 1.5) {
+    line-height: 1.6;
+    font-size: 16px;
+  }
+
+  &:hover {
+    border: 1px solid var(--ids-theme-select-border_hover, $select-border_hover);
+    box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
+    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
+  }
+
+  &:focus,
+  &:active {
+    border: 1px solid var(--ids-theme-select-border_hover, $select-border_hover);
+    box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
+    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
+    outline: 0;
+  }
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  //&:active {
+  //  border: 1px solid $select-border_pressed;
+  //  border: 1px solid var(--ids-theme-select-border_pressed, $select-border_pressed);
+  //  box-shadow: $select-shadow_dark;
+  //  box-shadow: var(--ids-theme-select-shadow_dark, $select-shadow_dark);
+  //  background-color: $select-background_pressed;
+  //  background-color: var(--ids-theme-select-background_pressed, $select-background_pressed);
+  //}
+
+  &[disabled] {
+    border: 1px solid transparent;
+    box-shadow: none;
+    background-color: var(--ids-theme-select-background_disabled, $select-background_disabled);
+    background-image: var(--ids-theme-select-arrow-disabled, $select-arrow-disabled);
+    color: var(--ids-theme-select-color_disabled, $select-color_disabled);
+    cursor: not-allowed;
+  }
+
+  &[multiple] {
+    border: $form-border_outer;
+    border: var(--ids-theme-form-border_outer, $form-border_outer);
+    padding: $inuit-global-spacing-unit-tiny;
+    cursor: pointer;
+    background: $select-multiple-background;
+    background: var(--ids-theme-select-multiple-background, $select-multiple-background);
+  }
+
+  option {
+    color: var(--colorText);
+    background-color: var(--ids-theme-select-background_hover, $select-background_hover);
+  }
+
+  optgroup {
+    color: var(--colorText);
+  //  background-color: #000;
+  //
+  //  option {
+  //    color: #13151c;
+  //    background-color: #fff;
+  //  }
+  }
+}
+
+/*
+Select small
+
+To match radio & checkbox.
+
+markup:
+<select class="c-select c-select_small" name="" id="">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+
+*/
+
+@mixin c-select_small {
+  height: 22px; // 22px to match radio & checkbox
+  font-size: $font-size-sm;
+  text-transform: uppercase;
+}
+
+/*
+Select statuses
+
+Select with validation status.
+
+markup:
+<select class="c-select c-select_is-success" name="" id="">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+<select class="c-select c-select_is-warning" name="" id="">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+<select class="c-select c-select_is-error" name="" id="">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+
+*/
+
+@mixin c-select_is-success {
+  border-color: var(--ids-theme-status-success, $ids-theme-status-success);
+
+  &:hover,
+  &:focus {
+    border-color: var(--ids-theme-status-success, $ids-theme-status-success);
+  }
+}
+
+@mixin c-select_is-warning {
+  border-color: var(--ids-theme-status-warning, $ids-theme-status-warning);
+
+  &:hover,
+  &:focus {
+    border-color: var(--ids-theme-status-warning, $ids-theme-status-warning);
+  }
+}
+
+@mixin c-select_is-error {
+  border-color: var(--ids-theme-status-error, $ids-theme-status-error);
+
+  &:hover,
+  &:focus {
+    border-color: var(--ids-theme-status-error, $ids-theme-status-error);
+  }
+}
+
+/*
+Select full width
+
+Select with validation status.
+
+markup:
+<select class="c-select c-select_block">
+	<option value="">Enabled</option>
+	<option value="">Option 2</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+
+*/
+
+@mixin c-select_block {
+  @include c-input_block;
+}
+
+/*
+Divider for select
+
+Divider may be created as option. See below:
+`<option value="" disabled="disabled" role="separator">─────────────────────────</option>`
+
+markup:
+<select class="c-select">
+	<option value="">Enabled</option>
+	<option value="" disabled="disabled" role="separator">─────────────────────────</option>
+	<option value="">Option 3</option>
+	<option value="">Option 4</option>
+	<option value="">Option 5</option>
+</select>
+
+*/
+
+@mixin c-select_block {
+  @include c-input_block;
+}

package/src/select/_variables.scss

@@ -1,3 +1,6 @@
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
+@use "../form/variables" as *;
 /// Sets the forms Select dropdown background color
 ///
 /// @group px-forms-design:variables:style

package/src/select/ids-select.scss

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

package/src/sidebar/_mixins.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
-@import "../base/variables";
-@import "./variables";
-@import "../mediaqueries/variables";
+@use "../base/variables" as *;
+@use "./variables" as *;
+@use "../mediaqueries/variables" as *;
 
 @mixin ids-sidebar-core-styles {
   .c-sidebar {

package/src/sidebar/_variables.scss

@@ -1,5 +1,5 @@
-@import "../theme/variables";
-@import "../base/variables";
+@use "../theme/variables" as *;
+@use "../base/variables" as *;
 
 $sidebar-open-width: 260px !default;
 $sidebar-collapsed-width: 47px !default;

package/src/sidebar/ids-sidebar.scss

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

package/src/static/_mixins.scss

@@ -1,4 +1,4 @@
-@import "../base/variables";
+@use "../base/variables" as *;
 
 // todo: отрефакторить структуру миксинов в core и названия переменных
 

package/src/static/ids-static.scss

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