@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/form/NumberField/NumberFieldView.scss

@@ -1,14 +1,30 @@
 .NumberFieldView {
   display: flex;
+  overflow: hidden;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
+  border: $input-border;
+
+  &:hover {
+    border-color: $border-hover;
+  }
+  &:active {
+    border-color: $border-action;
+    box-shadow: 0 0 0 4px $border-typing;
+  }
 
   &_disabled {
     color: rgba(0, 0, 0, .25);
-    background-color: rgba($input-border-color, .3);
+    background-color: $back-disabled;
+    border: unset;
     cursor: not-allowed;
 
+    &:active, &:hover {
+      border: unset;
+      box-shadow: unset;
+    }
+
     input {
       cursor: inherit;
     }
@@ -32,13 +48,16 @@
     border: none;
     outline: none;
     background-color: transparent;
+    color: $heading;
 
+    width: inherit;
     padding: $input-padding-y $input-padding-x;
   }
 
   &__arrows-container{
     display: flex;
     flex-flow: column;
+    grid-gap: 2px;
     font-size: .6em;
 
     opacity: 0;
@@ -59,13 +78,17 @@
     align-items: center;
     justify-content: center;
 
-    &:nth-child(1){
-      border-left: 1px solid $input-border-color;
-    }
-    &:nth-child(2){
-      border-top: 1px solid $input-border-color;
-      border-left: 1px solid $input-border-color;
+    &:nth-child(1), &:nth-child(2) {
+      background-color: $grey-lighter;
+      &:active, &:hover {
+        background-color: $border-default;
+        fill: $white;
+        svg {
+          fill: $white;
+        }
+      }
     }
+
     &_disabled{
       cursor: not-allowed;
     }
@@ -74,11 +97,6 @@
       transition: fill .1s;
     }
 
-    &:hover{
-      svg{
-        fill: #4a90e2;
-      }
-    }
   }
 }
 

package/form/PasswordField/PasswordFieldView.scss

@@ -9,16 +9,16 @@
 
     &:focus-within{
       outline: 0;
-      border-color: $blue;
-      box-shadow: 0 0 0 0.2rem rgba($blue, 0.25);
+      border-color: $border-action;
+      box-shadow: 0 0 0 0.2rem $border-typing;
     }
     &.is-invalid:focus-within{
-      border-color: $red;
-      box-shadow: 0 0 0 0.2rem rgba($red, 0.25);
+      border-color: $border-error;
+      box-shadow: 0 0 0 0.2rem $back-error;
     }
     &_disabled {
       color: rgba(0, 0, 0, .25);
-      background-color: rgba($input-border-color, .3);
+      background-color: $back-disabled;
       cursor: not-allowed;
       input {
         cursor: inherit;

package/form/RateField/RateFieldView.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { IRateFieldViewProps } from '@steroidsjs/core/ui/form/RateField/RateField';
-import './RateFieldView.scss';
 export default function RateFieldView(props: IRateFieldViewProps): JSX.Element;

package/form/RateField/RateFieldView.js

@@ -25,7 +25,6 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
-require("./RateFieldView.scss");
 function RateFieldView(props) {
     var bem = hooks_1.useBem('RateFieldView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {

package/form/RateField/RateFieldView.scss

@@ -22,7 +22,7 @@
 
         #{$root}__rate-icon {
           path {
-            fill: #fbd608;
+            fill: $icon-color;
           }
         }
       }
@@ -31,8 +31,8 @@
 
   &__rate-value-first, &__rate-value-second {
     display: inline-block;
-    width: 20px;
-    height: 20px;
+    width: $icon-size;
+    height: $icon-size;
   }
 
   &__rate-value-second {
@@ -44,10 +44,10 @@
 
   &__rate-icon {
     &.IconView svg {
-      width: 20px;
+      width: $icon-size;
 
       path {
-        fill: #dadada;
+        fill: $back-disabled;
       }
     }
   }

package/form/SliderField/SliderFieldView.js

@@ -29,19 +29,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var rc_slider_1 = __importDefault(require("rc-slider"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var rc_slider_1 = __importStar(require("rc-slider"));
+var createRangeWithTooltip = rc_slider_1["default"].createSliderWithTooltip;
+var createSliderWithTooltip = rc_slider_1["default"].createSliderWithTooltip;
+var RangeComponent = createRangeWithTooltip(rc_slider_1.Range);
+var SliderComponent = createSliderWithTooltip(rc_slider_1["default"]);
 function SliderFieldView(props) {
     var bem = hooks_1.useBem('SliderFieldView');
-    var SliderComponent = rc_slider_1["default"]; // TODO Fix error https://github.com/react-component/slider/issues/656
-    return (React.createElement("div", { className: bem(bem.block({
-            size: props.size
-        }), props.className) },
-        React.createElement(SliderComponent, __assign({}, props.slider, { className: bem.element('slider') }))));
+    var handle = function (prevProps) {
+        var value = prevProps.value;
+        return (React.createElement(rc_slider_1.SliderTooltip, { prefixCls: 'rc-slider-tooltip', placement: 'top', overlay: "" + value },
+            React.createElement(rc_slider_1.Handle, { value: value })));
+    };
+    var commonProps = {
+        slider: props.slider,
+        className: props.className,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        marks: props.marks,
+        onChange: props.onChange,
+        onAfterChange: props.onAfterChange,
+        defaultValue: props.defaultValue
+            ? props.defaultValue
+            : (props.isRange ? props.rangeDefaultValue : props.sliderDefaultValue),
+        disabled: props.disabled,
+        tipFormatter: function (value) { return "" + (value + props.valuePostfix); },
+        handle: handle
+    };
+    var RangeField = (React.createElement(RangeComponent, __assign({}, commonProps, { draggableTrack: true, areaDisabled: true, pushable: true })));
+    var SliderField = (React.createElement(SliderComponent, __assign({}, commonProps)));
+    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.isRange ? RangeField : SliderField));
 }
 exports["default"] = SliderFieldView;

package/form/SliderField/SliderFieldView.scss

@@ -1,14 +1,23 @@
 .SliderFieldView {
+  $root: &;
+
+  &_hidden {
+    display: unset;
+  }
 
   .rc-slider {
     position: relative;
     height: 6px;
     width: 100%;
     border-radius: 6px;
-    background-color: #e9e9e9;
+    background-color: $primary-light;
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
+  .rc-slider-rail {
+    background-color: $primary;
+  }
+
   .rc-slider * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -18,27 +27,29 @@
     left: 0;
     height: 6px;
     border-radius: 6px;
-    background-color: $primary;
+    background-color: rgba($primary, .7);
     z-index: 1;
   }
   .rc-slider-handle {
     position: absolute;
-    margin-left: -10px;
+    margin-left: 0;
     margin-top: -8px;
     width: 20px;
     height: 20px;
     cursor: pointer;
     border-radius: 50%;
-    border: solid 3px $primary;
-    background-color: #fff;
+    background-color: $primary;
+    box-shadow: $primary-dark 0 0 5px;
     z-index: 2;
-  }
-  .rc-slider-handle:hover {
-    border-color: $primary;
-  }
-  .rc-slider-handle-active:active {
-    border-color: $primary;
-    box-shadow: 0 0 5px $primary;
+    transition: box-shadow 300ms;
+    outline: none;
+
+    &:hover {
+      box-shadow: 0 0 0 10px rgba($primary-light, .3);
+    }
+    &:active {
+      box-shadow: 0 0 0 15px rgba($primary, .3);
+    }
   }
   .rc-slider-mark {
     position: absolute;
@@ -89,6 +100,11 @@
   }
   .rc-slider-disabled {
     background-color: #e9e9e9;
+
+    .rc-slider-handle, .rc-slider-dot {
+      box-shadow: 0 0 4px $border-default;
+      background-color: #ccc;
+    }
   }
   .rc-slider-disabled .rc-slider-track {
     background-color: #ccc;
@@ -238,7 +254,10 @@
       transform: scale(0, 0);
     }
   }
-  .rc-tooltip {
+  .rc-slider-tooltip {
+    display: inline-block;
+  }
+  .rc-slider-tooltip {
     position: absolute;
     left: -9999px;
     top: -9999px;
@@ -247,17 +266,17 @@
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
-  .rc-tooltip * {
+  .rc-slider-tooltip * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
-  .rc-tooltip-hidden {
+  .rc-slider-tooltip-hidden {
     display: none;
   }
-  .rc-tooltip-placement-top {
+  .rc-slider-tooltip-placement-top {
     padding: 4px 0 8px 0;
   }
-  .rc-tooltip-inner {
+  .rc-slider-tooltip-inner {
     padding: 6px 2px;
     min-width: 24px;
     height: 24px;
@@ -270,18 +289,18 @@
     border-radius: 6px;
     box-shadow: 0 0 4px #d9d9d9;
   }
-  .rc-tooltip-arrow {
+  .rc-slider-tooltip-arrow {
     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
   }
-  .rc-tooltip-placement-top .rc-tooltip-arrow {
+  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
     bottom: 4px;
     left: 50%;
     margin-left: -4px;
     border-width: 4px 4px 0;
     border-top-color: #6c6c6c;
   }
-}
+}

package/form/TextField/TextFieldView.scss

@@ -1,3 +1,4 @@
 .TextFieldView {
-
-}
+  min-height: 38px;
+  box-sizing: border-box;
+}

package/form/TimeField/TimeFieldView.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITimeFieldViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
-import './TimeFieldView.scss';
 export default function TimeFieldView(props: ITimeFieldViewProps & IBemHocOutput): JSX.Element;

package/form/TimeField/TimeFieldView.js

@@ -39,7 +39,6 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var TimePanelView_1 = __importDefault(require("./TimePanelView"));
-require("./TimeFieldView.scss");
 function TimeFieldView(props) {
     var bem = hooks_1.useBem('TimeFieldView');
     var renderContent = react_1.useCallback(function () { return (React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps))); }, [props.timePanelViewProps]);

package/form/TimeField/TimeFieldView.scss

@@ -5,14 +5,14 @@
   padding: 0 8px;
   position: relative;
 
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
+  background-color: $white;
+  border: 1px solid $border-default;
   border-radius: 4px;
 
   &:focus-within{
     outline: 0;
-    border-color: #a7efff;
-    box-shadow: 0 0 0 1px #a7efff;
+    border-color: $border-action;
+    box-shadow: 0 0 0 1px $border-typing;
   }
   *:focus {
     outline: none;
@@ -20,7 +20,7 @@
 
   &_disabled {
     color: rgba(0, 0, 0, .25);
-    background-color: #f1f1f1;
+    background-color: $back-disabled;
     cursor: not-allowed;
     input {
       cursor: inherit;
@@ -61,21 +61,20 @@
     display: flex;
 
     path {
-      fill: #d9d9d9;
+      fill: $border-default;
       transition: fill .1s ease-in;
     }
 
     &_close{
       position: absolute;
-      background-color: #fff;
+      background-color: $white;
 
       opacity: 0;
       transition: opacity .2s ease-in;
 
       &:hover {
         path {
-          fill: #2d2d2d;
-
+          fill: $border-default;
         }
       }
     }

package/form/TimeField/TimePanelView.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { ITimePanelViewProps } from '@steroidsjs/core/ui/form/TimeField/TimeField';
-import './TimePanelView.scss';
 declare function TimePanelView(props: ITimePanelViewProps): JSX.Element;
 declare namespace TimePanelView {
     var defaultProps: {

package/form/TimeField/TimePanelView.js

@@ -25,7 +25,6 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var padStart_1 = __importDefault(require("lodash-es/padStart"));
-require("./TimePanelView.scss");
 var getHours = function () {
     var result = [];
     for (var i = 0; i < 24; i += 1) {

package/form/TimeField/TimePanelView.scss

@@ -9,14 +9,14 @@
     align-items: center;
     justify-content: center;
 
-    border-left: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
+    border-left: 1px solid $border-default;
+    border-bottom: 1px solid $border-default;
   }
 
   &__body {
     display: flex;
     flex-flow: row nowrap;
-    border-radius: 4px;
+    border-radius: $input-border-radius;
   }
 
   &__column {
@@ -26,9 +26,9 @@
     padding: 0;
     margin: 0;
 
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $border-default;
     &:not(:last-child) {
-      border-right: 1px solid #ccc;
+      border-right: 1px solid $border-default;
     }
   }
 
@@ -37,12 +37,12 @@
     cursor: pointer;
 
     &_selected {
-      background-color: #d8ccf7;
+      background-color: $primary-light;
     }
 
     transition: background-color .1s ease-in;
     &:hover {
-      background-color: #f8f8f8;
+      background-color: $back-disabled;
     }
   }
 
@@ -61,23 +61,23 @@
     border: none;
 
     &_now {
-      color: #651fff;
+      color: $primary;
       background-color: unset;
 
       transition: color .1s ease-in;
       &:hover {
-        color: #410fad;
+        color: $primary-dark;
       }
     }
 
     &_ok {
       color: #fff;
       border-radius: 4px;
-      background-color: #651fff;
+      background-color: $primary;
 
       transition: background-color .1s ease-in;
       &:hover {
-        background-color: #410fad;
+        background-color: $primary-dark;
       }
     }
   }

package/icon/Icon/IconView.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import './IconView.scss';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IIconViewProps } from '@steroidsjs/core/ui/icon/Icon/Icon';
 export default function IconView(props: IIconViewProps & IBemHocOutput): JSX.Element;

package/icon/Icon/IconView.js

@@ -20,7 +20,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-require("./IconView.scss");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function IconView(props) {
     var bem = hooks_1.useBem('IconView');

package/icon/Icon/IconView.scss

@@ -1,25 +1,25 @@
 .IconView {
   svg {
-    width: 16px;
+    width: $icon-size;
   }
 
   &_size_sm svg {
-    width: 12px;
+    width: $icon-size-sm;
   }
 
   &_size_lg svg {
-    width: 32px;
+    width: $icon-size-lg;
   }
 }
 
 img.IconView {
-  width: 16px;
+  width: $icon-size;
 
   &_size_sm {
-    width: 12px;
+    width: $icon-size-sm;
   }
 
   &_size_lg {
-    width: 32px;
+    width: $icon-size-lg;
   }
 }

package/icon/fontawesome.js

@@ -238,7 +238,11 @@ exports["default"] = (function () {
         reject: 'times-circle',
         back: 'arrow-left',
         securityEye: 'eye',
-        securityEyeSlash: 'eye-slash'
+        securityEyeSlash: 'eye-slash',
+        success: 'check-circle',
+        info: 'info-circle',
+        warning: 'exclamation-circle',
+        error: 'times-circle'
     };
     Object.keys(coreIconsMap).forEach(function (name) {
         icons[name] = icons[coreIconsMap[name]];

package/index.d.ts

@@ -5,6 +5,9 @@ declare const _default: {
     'content.DropDownView': {
         lazy: () => any;
     };
+    'content.AlertView': {
+        lazy: () => any;
+    };
     'content.AvatarView': {
         lazy: () => any;
     };
@@ -14,6 +17,9 @@ declare const _default: {
     'content.CalendarView': {
         lazy: () => any;
     };
+    'content.DetailView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -23,6 +29,12 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
+    'content.CollapseView': {
+        lazy: () => any;
+    };
+    'content.CollapseItemView': {
+        lazy: () => any;
+    };
     'form.CheckboxFieldView': {
         lazy: () => any;
     };
@@ -68,6 +80,12 @@ declare const _default: {
     'form.HtmlFieldView': {
         lazy: () => any;
     };
+    'form.ImageFieldView': {
+        lazy: () => any;
+    };
+    'form.ImageFieldModalView': {
+        lazy: () => any;
+    };
     'form.InputFieldView': {
         lazy: () => any;
     };
@@ -119,6 +137,15 @@ declare const _default: {
     'layout.NotificationsItemView': {
         lazy: () => any;
     };
+    'layout.LineProgressBarView': {
+        lazy: () => any;
+    };
+    'layout.CircleProgressBarView': {
+        lazy: () => any;
+    };
+    'layout.SkeletonView': {
+        lazy: () => any;
+    };
     'layout.TooltipView': {
         lazy: () => any;
     };
@@ -149,6 +176,12 @@ declare const _default: {
     'list.PaginationSizeView': {
         lazy: () => any;
     };
+    'list.StepsView': {
+        lazy: () => any;
+    };
+    'list.StepItemView': {
+        lazy: () => any;
+    };
     'modal.ModalView': {
         lazy: () => any;
     };