@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.60

package/form/DateField/DateFieldView.scss

@@ -1,81 +1,14 @@
 .DateFieldView {
-  $root: &;
-
-  padding-right: 8px;
-  position: relative;
-
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
-
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $grey-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
-
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    &:hover #{$root}__icon_close {
-      opacity: 1;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__icon-container {
+    $root: &;
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
 
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
-    }
+    @include date-default-input();
+
+    @include date-default-body();
 
-    &_close{
-      position: absolute;
-      background-color: $white;
+    @include icon-container($root);
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
+    @include date-default-sizes($root);
 
-      &:hover {
-        path {
-          fill: $grey-dark;
-        }
-      }
-    }
-  }
+    @include date-default-effects($root);
 }

package/form/DateRangeField/DateRangeFieldView.js

@@ -43,28 +43,25 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
-var isString_1 = __importDefault(require("lodash-es/isString"));
 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 },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
-                'no-border': props.noBorder
+                size: props.size,
+                'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsFrom && 'is-invalid'), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                React.createElement("span", { className: bem.element('divider') }, "-"),
-                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
-                        size: props.size
-                    }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
-                    props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' }))),
+                React.createElement("span", { className: bem.element('effect') })))));
 }
 exports["default"] = DateRangeFieldView;

package/form/DateRangeField/DateRangeFieldView.scss

@@ -1,82 +1,33 @@
 .DateRangeFieldView {
-  $root: &;
-
-  padding: 0 8px;
-  position: relative;
-
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
-
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
-
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    &:hover #{$root}__icon_close {
-      opacity: 1;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-
-    padding: 10px 5px;
-  }
-
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
-
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
-    }
-
-    &_close{
-      position: absolute;
-      background-color: $white;
-
-      opacity: 0;
-      transition: opacity .2s ease-in;
-
-      &:hover {
-        path {
-          fill: $grey-dark;
+    $root: &;
+
+    @include date-range-body($root);
+    @include icon-container($root);
+    @include date-range-input();
+
+    @include date-range-sizes($root);
+
+    &__split {
+        .DayPicker-Months {
+            position: relative;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 47px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                display: block;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                height: 100%;
+                width: 1px;
+                background-color: $date-range-separator-color;
+            }
         }
-      }
     }
-  }
+
+    @include date-range-effects($root);
 }

package/form/DateTimeField/DateTimeFieldView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IDateTimeFieldViewProps } from '@steroidsjs/core/ui/form/DateTimeField/DateTimeField';
-export default function DateTimeFieldView(props: IDateTimeFieldViewProps & IBemHocOutput): JSX.Element;
+export default function DateTimeFieldView(props: IDateTimeFieldViewProps): JSX.Element;

package/form/DateTimeField/DateTimeFieldView.js

@@ -48,13 +48,13 @@ function DateTimeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateTimeFieldView');
     var renderContent = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
         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 },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,
-                'has-icon': !!props.icon,
-                'is-invalid': !!props.isInvalid
+                'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
                 React.createElement("input", __assign({}, props.inputProps, { placeholder: props.placeholder
@@ -63,10 +63,10 @@ function DateTimeFieldView(props) {
                         size: props.size
                     }), props.isInvalid && 'is-invalid'), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: props.icon || 'calendar-alt' })),
-                    props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && props.inputProps.value && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: typeof props.icon === 'string' ? props.icon : 'times-circle' })))))));
+                        }, name: typeof props.icon === 'string' ? props.icon : 'cross_8x8' })))))));
 }
 exports["default"] = DateTimeFieldView;

package/form/DateTimeField/DateTimeFieldView.scss

@@ -1,117 +1,15 @@
 .DateTimeFieldView {
-  $root: &;
+    $root: &;
 
-  padding: 0 8px;
-  position: relative;
+    @include date-default-input();
 
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
+    @include date-default-body();
 
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
+    @include date-default-sizes($root);
 
-  &_disabled {
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
+    @include icon-container($root);
 
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
+    @include date-time-panel($root);
 
-  &__panel-container {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-
-    &:hover #{$root}__icon_close {
-      opacity: 1;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
-
-    padding: $input-padding-y $input-padding-x;
-  }
-
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
-
-    path {
-      fill: $border-default;
-      transition: fill .1s ease-in;
-    }
-
-    &_close{
-      position: absolute;
-      background-color: $white;
-
-      opacity: 0;
-      transition: opacity .2s ease-in;
-
-      &:hover {
-        path {
-          fill: $grey-dark;
-        }
-      }
-    }
-  }
-
-  &__calendar {
-    .DayPicker-Footer {
-      justify-content: flex-start !important;
-    }
-  }
-
-  &__time-panel {
-    .TimePanelView__column {
-      height: 291px;
-
-      &:first-child {
-        border-left: 1px solid $border-default;
-      }
-    }
-  }
-
-  &__calendar {
-    .DayPicker-Footer {
-      justify-content: flex-start !important;
-    }
-  }
-
-  &__time {
-    .TimePanelView__column {
-      height: 291px;
-      border-left: 1px solid $border-default;
-    }
-  }
+    @include date-default-effects($root);
 }

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -43,31 +43,33 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
-var isString_1 = __importDefault(require("lodash-es/isString"));
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
 function DateTimeRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
+    var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
         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 },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
-                'no-border': props.noBorder
+                size: props.size,
+                'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
                 React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {
                         size: props.size
-                    }), !!props.errorsFrom && 'is-invalid'), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                React.createElement("span", { className: bem.element('divider') }, "-"),
+                    })), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
                 React.createElement("input", __assign({}, props.inputPropsTo, { className: bem(bem.element('input', {
                         size: props.size
                     }), !!props.errorsTo && 'is-invalid'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
-                    props.icon && (React.createElement(Icon_1["default"], { className: bem.element('icon'), name: (0, isString_1["default"])(props.icon) ? props.icon : 'calendar-alt' })),
-                    props.showRemove && (props.inputPropsFrom.value || props.inputPropsTo.value) && (React.createElement(Icon_1["default"], { className: bem.element('icon', 'close'), onClick: function (e) {
+                    props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
+                    props.showRemove && hasValue && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {
                             e.preventDefault();
                             props.onClear();
-                        }, name: 'times-circle' })))))));
+                        }, name: 'cross_8x8' }))),
+                React.createElement("span", { className: bem.element('effect') })))));
 }
 exports["default"] = DateTimeRangeFieldView;

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -1,102 +1,37 @@
 .DateTimeRangeFieldView {
-  $root: &;
+    $root: &;
 
-  padding: 0 8px;
-  position: relative;
+    @include icon-container($root);
 
-  background-color: $white;
-  border: 1px solid $border-default;
-  border-radius: 4px;
+    @include date-range-body($root);
 
-  &:focus-within{
-    outline: 0;
-    border-color: $border-action;
-    box-shadow: 0 0 0 1px $border-typing;
-  }
-  *:focus {
-    outline: none;
-  }
-
-  &_disabled {
-    opacity: .7;
-    color: rgba(0, 0, 0, .25);
-    background-color: $back-disabled;
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
-    }
-  }
-  &_no-border {
-    border: unset;
-  }
-
-  &__panel-container {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-  &__calendar {
-    .DayPicker-Footer {
-      justify-content: flex-start !important;
-    }
-  }
-  &__time-panel {
-    .TimePanelView__column {
-      height: 291px;
-
-      &:first-child {
-        border-left: 1px solid $border-default;
-      }
+    &__body {
+        > * {
+            &:nth-child(1) {
+                width: 140px;
+            }
+        }
     }
-  }
-
-  &__body {
-    height: 100%;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
 
-    &:hover #{$root}__icon_close {
-      opacity: 1;
+    &_size {
+        @each $size, $size-map in $date-sizes {
+            &_#{$size} {
+                #{$root}__body {
+                    #{$root}__input {
+                        &:nth-child(1) {
+                            width: calc(map-get($size-map, first-input-width) + 60px);
+                        }
+                    }
+                }
+            }
+        }
     }
-  }
-
-  &__input {
-    width: 100%;
-    flex-grow: 1;
-    border: none;
-    outline: none;
-    background-color: transparent;
 
-    padding: 10px 5px;
-  }
+    @include date-range-input();
 
-  &__icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &__icon {
-    display: flex;
-    height: 16px;
-
-    path {
-      fill: $grey-light;
-      transition: fill .1s ease-in;
-    }
+    @include date-range-sizes($root);
 
-    &_close{
-      position: absolute;
-      background-color: $white;
+    @include date-range-effects($root);
 
-      opacity: 0;
-      transition: opacity .2s ease-in;
-
-      &:hover {
-        path {
-          fill: $grey-dark;
-        }
-      }
-    }
-  }
+    @include date-time-panel($root);
 }