@steroidsjs/bootstrap 3.0.0-beta.62 → 3.0.0-beta.64

package/form/DateField/DateFieldView.scss

@@ -1,7 +1,7 @@
 .DateFieldView {
     $root: &;
     position: relative;
-
+    
     @include date-default-input();
 
     @include date-default-body();
@@ -11,4 +11,12 @@
     @include date-default-sizes($root);
 
     @include date-default-effects($root);
+
+    
+
+    &__dropdown { 
+        background: $element-background-color;
+
+        @include calendar-border();
+    }
 }

package/form/DateRangeField/DateRangeFieldView.js

@@ -47,7 +47,7 @@ function DateRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateRangeFieldView');
     var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split') },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
                 size: props.size,

package/form/DateRangeField/DateRangeFieldView.scss

@@ -8,6 +8,9 @@
     @include date-range-sizes($root);
 
     &__split {
+        background: $element-background-color;
+        @include calendar-border();
+
         .DayPicker-Months {
             position: relative;
             display: flex;
@@ -30,4 +33,5 @@
     }
 
     @include date-range-effects($root);
+
 }

package/form/DateTimeField/DateTimeFieldView.js

@@ -50,7 +50,7 @@ function DateTimeFieldView(props) {
         React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
         React.createElement("div", { className: bem.element('separator') }),
         React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderContent, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderContent, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,

package/form/DateTimeField/DateTimeFieldView.scss

@@ -12,4 +12,9 @@
     @include date-time-panel($root);
 
     @include date-default-effects($root);
+
+    &__dropdown { 
+        @include calendar-border();
+        background: $element-background-color;
+    }
 }

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -51,7 +51,7 @@ function DateTimeRangeFieldView(props) {
         React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
         React.createElement("div", { className: bem.element('separator') }),
         React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
                 size: props.size,

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -34,4 +34,9 @@
     @include date-range-effects($root);
 
     @include date-time-panel($root);
+
+    &__dropdown { 
+        @include calendar-border();
+        background-color: $element-background-color;
+    }
 }

package/form/DropDownField/DropDownFieldView.scss

@@ -4,7 +4,6 @@
     --basic-active-color: #e5e9eb;
     --chevron-background-color: #ffffff;
     --chevron-background-color-outline: #f5f8fa;
-    --chevron-background-color-basic: #ffffff;
     --chevron-inner-color: #323232;
     --drop-down-border-color: #e9e9e9;
     --search-color: #626262;
@@ -16,12 +15,11 @@
 }
 
 html[data-theme="dark"] {
-    --basic-color: #5b5c6b;
+    --basic-color: #333646;
     --basic-focus-color: #adaab3;
     --basic-active-color: #4e4f57;
-    --chevron-background-color: #323232;
-    --chevron-background-color-outline: #323232;
-    --chevron-background-color-basic: #6f6b76;
+    --chevron-background-color: #16171B;
+    --chevron-background-color-outline: #191B1F;
     --chevron-inner-color: #ffffff;
     --drop-down-border-color: #595959;
     --search-color: #adacac;
@@ -37,7 +35,6 @@ $basic-focus-color: var(--basic-focus-color);
 $basic-active-color: var(--basic-active-color);
 $chevron-background-color: var(--chevron-background-color);
 $chevron-background-color-outline: var(--chevron-background-color-outline);
-$chevron-background-color-basic: var(--chevron-background-color-basic);
 $chevron-inner-color: var(--chevron-inner-color);
 $drop-down-border-color: var(--drop-down-border-color);
 $search-color: var(--search-color);
@@ -52,7 +49,7 @@ $drop-down-color-themes: map-merge(
     (
         "basic": (
             "background-color": $basic-color,
-            "hover-color": $border-color-hover,
+            "hover-color": $element-border-color-hover,
             "focus-color": $basic-focus-color,
             "active-color": $basic-active-color,
         ),
@@ -122,10 +119,6 @@ $drop-down-color-themes: map-merge(
         svg {
             rect {
                 fill: $chevron-background-color;
-
-                @if ($colorType == "basic") {
-                    fill: $chevron-background-color-basic;
-                }
             }
             path {
                 stroke: $chevron-inner-color;
@@ -147,7 +140,7 @@ $drop-down-color-themes: map-merge(
 }
 
 @mixin dropDownOutlineTheme($colorMap, $root) {
-    background-color: $element-background-color;
+    background-color: $element-field-background-color;
     border: 1px solid map-get($colorMap, background-color);
     color: $text-color;
 
@@ -372,7 +365,7 @@ $drop-down-color-themes: map-merge(
             font-size: $font-size-base;
             font-weight: 400;
             line-height: 22px;
-            border: 1px solid $border-color;
+            border: 1px solid $element-border-color;
 
             color: $text-color;
             background-color: $search-background-color;

package/form/DropDownFieldItem/DropDownFieldItemView.scss

@@ -144,7 +144,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
                 border: none;
 
                 &_visible {
-                    border-bottom: 1px solid $border-color;
+                    border-bottom: 1px solid $element-border-color;
                 }
             }
 
@@ -174,7 +174,7 @@ $drop-down-item-hover-background-color: var(--drop-down-item-hover-background-co
             &__icon-chevron {
                 box-shadow: none;
                 svg {
-                    border: 1px solid $border-color;
+                    border: 1px solid $element-border-color;
                     border-radius: $radius-small;
                 }
             }

package/form/FieldList/FieldListView.scss

@@ -1,75 +1,83 @@
 :root {
-  --background-th: #f1f5f7;
+    --background-th: var(--light-gray);
+    --background-td-alternating: var(--additional-light-gray);
 }
 
-html[data-theme="dark"] { 
-  --background-th: #414141;
+html[data-theme="dark"] {
+    --background-th: var(--additional-gray-dark);
+    --background-td-alternating: var(--graphite-dark);
 }
 
 $background-th: var(--background-th);
+$background-td-alternating: var(--background-td-alternating);
 
 .FieldListView {
-  table {
-    width: 100%;
-    background-color: transparent;
-    border: 1px solid $additional-gray;
-    border-collapse: separate;
-    border-radius: 10px;
-    border-spacing: 0;
-    overflow: hidden;
-  }
+    table {
+        width: 100%;
+        background-color: transparent;
+        border: 1px solid $gray-dark;
+        border-collapse: separate;
+        border-radius: 10px;
+        border-spacing: 0;
+        overflow: hidden;
+    }
+
+    th:not(:last-child),
+    td:not(:last-child) {
+        border-right: 1px solid $gray-dark;
+    }
 
-  th:not(:last-child), td:not(:last-child) {
-    border-right: 1px solid $additional-gray;
-  }
+    tr th {
+        border-bottom: 1px solid $gray-dark;
+        background-color: $background-th;
+        color: $text-color;
+        font-size: 14px;
+        line-height: 18px;
+    }
 
-  tr th {
-    border-bottom: 1px solid $additional-gray;
-    background-color: $background-th;
-    color: $text-color;
-    font-size: 14px;
-    line-height: 18px;
-  }
+    tr:not(:last-child) td {
+        border-bottom: 1px solid $gray-dark;
+    }
 
-  tr:not(:last-child) td {
-    border-bottom: 1px solid $additional-gray;
-  }
-  
-  tfoot > tr > td{
-    border-top: 1px solid $additional-gray;
-  }
+    tfoot > tr > td {
+        border-top: 1px solid $gray-dark;
+    }
 
-  tr td {
-    padding: 12px;
-  }
+    tr td {
+        padding: 12px;
+    }
 
-  tr th {
-    text-align: left;
-    padding: 20px 12px;
-  }
+    tr th {
+        text-align: left;
+        padding: 20px 12px;
+    }
 
-  tr td .CheckboxFieldView{
-    justify-content: center
-  }
+    tr td .CheckboxFieldView {
+        justify-content: center;
+    }
 
-  &_hasAlternatingColors {
-    tr:nth-child(even) {
-      background-color: $additional-light-gray;
+    td {
+        background: $element-background-color;
     }
-  }
 
-  &__button-add {
-    svg {
-      path { 
-          stroke: $primary;
-      }
+    &_hasAlternatingColors {
+        tr:nth-child(even) td {
+            background-color: $background-td-alternating;
+        }
     }
-    > span {
-      gap: 4px;
+
+    &__button-add {
+        svg {
+            path {
+                stroke: $primary;
+            }
+        }
+        > span {
+            gap: 4px;
+        }
     }
-  }
 
-  .FieldLayoutView {
-    margin-bottom: 0;
-  }
-}
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+}

package/form/FileField/FileFieldView.scss

@@ -1,45 +1,45 @@
 .FileFieldView {
-  $root: &;
+    $root: &;
 
-  &__files {
-    margin-bottom: 1em;
-    display: flex;
-    row-gap: 8px;
-    flex-wrap: wrap;
-    flex-direction: column;
-  }
+    &__files {
+        margin-bottom: 1em;
+        display: flex;
+        row-gap: 8px;
+        flex-wrap: wrap;
+        flex-direction: column;
+    }
 
-  &_isWall {
-    display: flex;
-    column-gap: 10px;
+    &_isWall {
+        display: flex;
+        column-gap: 10px;
 
-    #{$root}__files {
-      flex-direction: row;
-      column-gap: 10px;
+        #{$root}__files {
+            flex-direction: row;
+            column-gap: 10px;
+        }
     }
-  }
 
-  &__button {
-    margin-bottom: 16px;
-    min-width: 200px;
+    &__button {
+        margin-bottom: 16px;
+        min-width: 200px;
 
-    &_isWall {
-      min-width: auto;
-      width: 128px;
-      height: 128px;
-      border: 1px dashed $light;
-      background-color: $gray;
-      border-radius: 20px;
+        &_isWall {
+            min-width: auto;
+            width: 128px;
+            height: 128px;
+            border: 1px dashed #6F6B76;
+            background-color: $gray;
+            border-radius: 20px;
 
-      .ButtonView__label {
-        flex-direction: column;
-        row-gap: 10px;
-      }
+            .ButtonView__label {
+                flex-direction: column;
+                row-gap: 10px;
+            }
+        }
     }
-  }
 
-  .ButtonView__icon {
-    width: 25px;
-    height: 25px;
-  }
+    .ButtonView__icon {
+        width: 25px;
+        height: 25px;
+    }
 }

package/form/InputField/InputFieldView.scss

@@ -44,12 +44,12 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
         padding: 0 8px;
         outline: none;
 
-        background-color: $element-background-color;
-        border: 1px solid $border-color;
+        background-color: $element-field-background-color;
+        border: 1px solid $element-border-color;
         border-radius: inherit;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
             font-size: inherit;
         }
     }
@@ -92,7 +92,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
 
     &_disabled {
         #{$root}__input { 
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
             border-color: transparent;
         }
     }
@@ -265,7 +265,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             border: none;
         }
         &::before { 
-            border: 1px solid $border-color;
+            border: 1px solid $element-border-color;
             opacity: 1;
         }
     }
@@ -276,7 +276,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
             border-bottom-right-radius: 0;
         }
         &::before { 
-            border: 1px solid $border-color;
+            border: 1px solid $element-border-color;
             opacity: 1;
         }
     }
@@ -284,7 +284,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
     &__addon-before,
     &__addon-after {
         padding: 11px 12px;
-        background-color: $background-disabled-color;
+        background-color: $element-background-color-disabled;
         color: $text-color;
     }
 

package/form/NumberField/NumberFieldView.scss

@@ -66,7 +66,7 @@ $number-field-arrow-color: var(--number-field-arrow-color);
                 cursor: not-allowed;
             }
             span > svg > path {
-                stroke: $background-disabled-color;
+                stroke: $element-background-color-disabled;
             }
         }
 
@@ -145,7 +145,7 @@ $number-field-arrow-color: var(--number-field-arrow-color);
     &__input {
         width: 100%;
         outline: none;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
         border-radius: $radius-small;
         padding: 5px 22px 5px 8px;
         line-height: 24px;
@@ -153,19 +153,19 @@ $number-field-arrow-color: var(--number-field-arrow-color);
         font-weight: $font-weight-sm;
         color: $text-color;
 
-        background-color: $element-background-color;
+        background-color: $element-field-background-color;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:disabled {
-            background-color: $background-disabled-color;
-            color: $placeholder-disabled-color;
+            background-color: $element-background-color-disabled;
+            color: $element-placeholder-color-disabled;
         }
 
         &:hover:not(:disabled):not(:focus) {
-            border-color: $border-color-hover;
+            border-color: $element-border-color-hover;
         }
 
         &:active:not(:disabled) {

package/form/PasswordField/PasswordFieldView.scss

@@ -51,33 +51,33 @@ $eye-filled-color: var(--eye-filled-color);
         width: 100%;
         height: 100%;
         border-radius: $radius-small;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
         outline: none;
         padding-left: 8px;
         padding-right: 42px;
 
-        background-color: $element-background-color;
+        background-color: $element-field-background-color;
         color: $text-color;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:hover {
-            border: 1px solid $border-color-hover;
+            border: 1px solid $element-border-color-hover;
         }
 
         &:not(:disabled):active {
             border: 1px solid $primary;
         }
 
-        &:not(:disabled):focus { 
+        &:not(:disabled):focus {
             border-color: transparent;
         }
 
         &:disabled {
             border: none;
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
         }
     }
 
@@ -88,7 +88,7 @@ $eye-filled-color: var(--eye-filled-color);
 
                 &::before {
                     border-radius: 16px;
-                    transform: translateX(-2%) translateY(-6.5%)
+                    transform: translateX(-2%) translateY(-6.5%);
                 }
             }
 
@@ -96,7 +96,6 @@ $eye-filled-color: var(--eye-filled-color);
                 border-radius: $radius-large;
                 font-size: $font-size-lg;
             }
-
         }
 
         &_md {
@@ -112,7 +111,6 @@ $eye-filled-color: var(--eye-filled-color);
                 border-radius: $radius-large;
                 font-size: $font-size-base;
             }
-
         }
 
         &_sm {
@@ -129,7 +127,6 @@ $eye-filled-color: var(--eye-filled-color);
                 border-radius: $radius-small;
                 font-size: $font-size-sm;
             }
-
         }
     }
 
@@ -232,9 +229,17 @@ $eye-filled-color: var(--eye-filled-color);
     }
 
     &_disabled {
-        #{$root}__icon-eye,
+        #{$root}__input {
+            cursor: not-allowed;
+        }
+
+        #{$root}__icon-eye { 
+            pointer-events: none;
+        }
+
         #{$root}__security-bar {
             opacity: 0;
+            pointer-events: none;
 
             &::before {
                 opacity: 0;

package/form/RadioField/RadioFieldView.scss

@@ -59,7 +59,7 @@ $radio-hover-color: var(--radio-hover-color);
         width: 24px;
         height: 24px;
         border-radius: $radius-circle;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
         margin-right: 8px;
         cursor: pointer;
 
@@ -86,7 +86,7 @@ $radio-hover-color: var(--radio-hover-color);
     }
 
     &__input:not(:disabled):not(:checked):hover + &__label::before {
-        border-color: $border-color-hover;
+        border-color: $element-border-color-hover;
     }
 
     &__input:not(:disabled):not(:checked):active + &__label::before {
@@ -128,11 +128,11 @@ $radio-hover-color: var(--radio-hover-color);
 
     &__input:disabled + &__label {
         cursor: not-allowed;
-        color: $placeholder-color;
+        color: $element-placeholder-color;
 
         &::before {
             cursor: not-allowed;
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
         }
     }
 
@@ -140,11 +140,11 @@ $radio-hover-color: var(--radio-hover-color);
         cursor: not-allowed;
 
         background-color: transparent;
-        border-color: $background-disabled-color;
+        border-color: $element-background-color-disabled;
     }
 
     &__input:disabled:checked + &__label &__ellipse {
-        background-color: $background-disabled-color;
+        background-color: $element-background-color-disabled;
     }
 
     &_hasError {

package/form/TextField/TextFieldView.scss

@@ -41,7 +41,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
 
         svg {
             path {
-                stroke: $background-disabled-color;
+                stroke: $element-background-color-disabled;
                 stroke-width: 1.5px;
             }
         }
@@ -58,7 +58,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         height: 80px;
 
         border-radius: $radius-small;
-        background-color: $text-field-background-color;
+        background-color: $element-field-background-color;
 
         padding: 5px 40px 8px 8px;
 
@@ -68,14 +68,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         z-index: 2;
         outline: none;
         color: $text-color;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:hover {
-            border-color: $border-color-hover;
+            border-color: $element-border-color-hover;
         }
 
         &:focus {
@@ -87,13 +87,13 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         }
 
         &:disabled {
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
             border: none;
             resize: none;
         }
 
         &:disabled::placeholder {
-            color: $placeholder-disabled-color;
+            color: $element-placeholder-color-disabled;
         }
 
         &:disabled + #{$root}__clear {