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

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -14,12 +14,12 @@
     min-width: 100px;
     //height: 38px;
     cursor: pointer;
-    background-color: $input-bg;
-    background-clip: padding-box;
-    border: 1px solid $input-border-color;
+    background-color: black; //changed
+    background-clip: blue; //changed
+    border: 1px solid red; //changed
     border-radius: 0.25rem;
     line-height: 1.5;
-    color: $input-color;
+    color: red; //changed
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -44,7 +44,7 @@
     }
 
     &_is-invalid {
-      border-color: $danger;
+      border-color: black; //changed
     }
   }
   &_size_sm &__selected-items {
@@ -79,7 +79,7 @@
       left: 50%;
       width: 1px;
       height: 10px;
-      background-color: $text-muted;
+      background-color: yellow; //
       content: '';
     }
 
@@ -94,21 +94,21 @@
 
   &__drop-down {
     position: absolute;
-    top: calc(100% + 3px);
+    top: calc(100% + 8px);
     left: 0;
-    padding: 0.375rem 0;
     width: 100%;
-    z-index: $zindex-dropdown;
-    background-color: $dropdown-bg;
-    background-clip: padding-box;
-    border: $dropdown-border-width solid $dropdown-border-width;
-    border-radius: $dropdown-border-radius;
-    box-shadow: $dropdown-box-shadow;
+    z-index: 10;  //changed
+    background-color: #fff; //changed
     line-height: 1.5;
-    color: $dropdown-color;
+    padding: 5.5px 0;
+    border: 1px solid #CCCCCC;
+    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
+    border-radius: 10px;
   }
 
   &__drop-down-list {
+    display: flex;
+    flex-direction: column;
     max-height: 273px;
     overflow: auto;
   }
@@ -125,16 +125,21 @@
   }
 
   &__drop-down-item {
-    padding: 0.375rem 0.75rem;
+    display: flex;
+    justify-content: flex-start;
+    padding: 10px 34px;
     cursor: pointer;
-
+    border: unset;
+    background-color: #fff;
+    font-size: 14px;
+    line-height: 140%;
     &_hover {
-      background-color: $dropdown-divider-bg;
+      background-color: #F8F8F8; //
     }
 
     &_select {
-      background-color: $dropdown-link-active-bg;
-      color: $dropdown-link-active-color;
+      background-color: #F8F8F8; //
+      color: #152536; //
     }
   }
   &_size_sm &__drop-down-item {
@@ -144,3 +149,9 @@
     padding: 0.5rem 1rem;
   }
 }
+
+.form-control:focus{
+  box-shadow: unset;
+  border: 4px solid #A7EFFF;
+  border-radius: 4px;
+}

package/form/Button/ButtonView.js

@@ -27,6 +27,7 @@ var isString_1 = __importDefault(require("lodash-es/isString"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ButtonView(props) {
+    var _a;
     var bem = hooks_1.useBem('ButtonView');
     var renderLabel = function () {
         var title = props.label && isString_1["default"](props.label)
@@ -45,22 +46,25 @@ function ButtonView(props) {
         }
         return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-" + props.badge.color, bem.element('badge'), props.badge.className) }, props.badge.value));
     };
-    var className = bem(bem.block({
-        color: props.color,
-        outline: props.outline,
-        size: props.size,
-        disabled: props.disabled,
-        submitting: props.submitting,
-        loading: props.isLoading,
-        failed: props.isFailed,
-        link: props.tag === 'a'
-    }), !props.link && 'btn', props.size && "btn-" + props.size, !props.link && "btn-" + (props.outline ? 'outline-' : '') + props.color, props.block && 'btn-block', props.link && 'btn-link', props.className);
+    var className = bem(bem.block((_a = {
+            button: !props.link
+        },
+        _a["color_" + props.color] = props.color && !props.outline,
+        _a["outline_" + props.color] = props.outline,
+        _a.outline = props.outline,
+        _a.size = props.size,
+        _a.disabled = props.disabled,
+        _a.submitting = props.submitting,
+        _a.loading = props.isLoading,
+        _a.failed = props.isFailed,
+        _a.link = props.tag === 'a',
+        _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
     if (props.tag === 'a') {
         return (React.createElement("a", { className: className, href: props.url, onClick: props.onClick, style: props.style, target: props.target },
             renderLabel(),
             renderBadge()));
     }
-    return (React.createElement("button", { type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
+    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
         renderLabel(),
         renderBadge()));
 }

package/form/Button/ButtonView.scss

@@ -1,5 +1,66 @@
 .ButtonView {
-  position: relative;
+  $root: &;
+
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-duration: .15s;
+  transition-timing-function: ease-in-out;
+
+  &_button {
+    position: relative;
+    border-radius: $button-border-radius;
+    user-select: none;
+    border: $button-border;
+
+    padding: $button-padding-y $button-padding-x;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-weight: $button-font-weight;
+    font-size: $button-font-size;
+
+    @each $color, $value in $color-themes {
+      &#{$root}_color_#{$color} {
+        @include button-theme($value)
+      }
+    }
+
+    @each $color, $value in $color-themes {
+      &#{$root}_outline_#{$color} {
+        @include button-outline-theme($value)
+      }
+    }
+
+  }
+
+  &_disabled {
+    opacity: .5;
+    color: rgba(0, 0, 0, .25);
+    cursor: not-allowed;
+    input {
+      cursor: inherit;
+    }
+  }
+
+  &_size {
+    &_sm {
+      height: $button-height-sm;
+      font-size: $button-font-size-sm;
+    }
+    &_md {
+      height: $button-height-md;
+      font-size: $button-font-size-md;
+    }
+    &_lg {
+      height: $button-height-lg;
+      font-size: $button-font-size-lg;
+    }
+  }
+
+  &_link {
+    justify-content: flex-start;
+    background-color: #fff;
+  }
 
   &__icon {
     margin-right: 3px;
@@ -32,4 +93,4 @@
     top: -1px;
     margin-left: 4px;
   }
-}
+}

package/form/CheckboxField/CheckboxFieldView.js

@@ -39,7 +39,7 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxFieldView(props) {
     var bem = hooks_1.useBem('CheckboxFieldView');
     var id = useUniqueId_1["default"]('checkbox');
-    return (React.createElement("div", { className: bem(bem.block(), 'custom-control', 'custom-checkbox') },
+    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), 'custom-control', 'custom-checkbox') },
         React.createElement("input", __assign({ className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid', props.className), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
         React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: id },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,12 +1,46 @@
 .CheckboxFieldView {
   display: inline-block;
 
-  &__label-text {
-    &_required:after {
-      display: inline-block;
-      content: '*';
-      color: $danger;
-      margin: 0 0 0 3px;
+  &__label {
+    &-text {
+      &_required:after {
+        display: inline-block;
+        content: '*';
+        color: $danger;
+        margin: 0 0 0 3px;
+      }
+    }
+  }
+  .custom-control-label {
+    &::before, &::after {
+      top: 0;
+    }
+  }
+
+  .custom-control-input {
+    &:checked ~ .custom-control-label {
+      &::before {
+        border-color: $primary;
+        background: $primary;
+      }
+      &:hover {
+        &::before {
+          background: $primary-dark;
+        }
+      }
+      &:active {
+        &::before {
+          background: $primary-light;
+        }
+      }
+    }
+    &:disabled ~ .custom-control-label {
+      color: $border-default;
+
+      &::before {
+        border: unset;
+        background-color: $back-disabled;
+      }
     }
   }
 }

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -39,10 +39,9 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxListFieldView(props) {
     var bem = hooks_1.useBem('CheckboxListFieldView');
     var prefix = useUniqueId_1["default"]('checkbox');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
-        React.createElement("input", __assign({}, props.inputProps, { id: prefix + "_" + item.id, className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), disabled: props.disabled, onChange: function () {
-                props.onItemSelect(item.id);
-            }, onMouseOver: function () { return props.onItemHover(item.id); } })),
-        React.createElement("label", { className: "custom-control-label", htmlFor: prefix + "_" + item.id }, item.label))); })));
+    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), props.className) }, props.items.map(function (item) { return (React.createElement("div", { key: item.id, className: "custom-control custom-checkbox" },
+        React.createElement("input", __assign({}, props.inputProps, { disabled: props.disabled, required: props.required, id: prefix + "_" + item.id, className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid'), checked: props.selectedIds.includes(item.id), onChange: function () { return props.onItemSelect(item.id); }, onMouseOver: function () { return props.onItemHover(item.id); } })),
+        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: prefix + "_" + item.id },
+            React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, item.label)))); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/CheckboxListField/CheckboxListFieldView.scss

@@ -1,3 +1,47 @@
 .CheckboxListFieldView {
+  &__label {
+    &-text {
+      &_required:after {
+        display: inline-block;
+        content: '*';
+        color: $danger;
+        margin: 0 0 0 3px;
+      }
+    }
+  }
 
-}
+  .custom-control-label {
+    &::before, &::after {
+      border-color: $border-default;
+      top: 0;
+    }
+  }
+
+  .custom-control-input {
+    &:checked ~ .custom-control-label {
+      &::before {
+        border-color: $primary;
+        background: $primary;
+      }
+      &:hover {
+        &::before {
+          background: $primary-dark;
+        }
+      }
+      &:active {
+        &::before {
+          background: $primary-light;
+        }
+      }
+    }
+    &:disabled ~ .custom-control-label {
+      color: $border-default;
+
+      &::before {
+        border: unset;
+        background-color: $back-disabled;
+      }
+    }
+  }
+
+}

package/form/DateField/DateFieldView.d.ts

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

package/form/DateField/DateFieldView.js

@@ -39,13 +39,13 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
-require("./DateFieldView.scss");
 function DateFieldView(props) {
     var bem = hooks_1.useBem('DateFieldView');
     var renderCalendar = 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 },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
+                disabled: props.disabled,
                 'has-icon': !!props.icon,
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },

package/form/DateField/DateFieldView.scss

@@ -4,14 +4,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;
@@ -19,7 +19,7 @@
 
   &_disabled {
     color: rgba(0, 0, 0, .25);
-    background-color: #f1f1f1;
+    background-color: $grey-disabled;
     cursor: not-allowed;
     input {
       cursor: inherit;
@@ -61,21 +61,20 @@
     height: 16px;
 
     path {
-      fill: #d9d9d9;
+      fill: $grey-light;
       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: $grey-dark;
         }
       }
     }

package/form/DateRangeField/DateRangeFieldView.d.ts

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

package/form/DateRangeField/DateRangeFieldView.js

@@ -40,7 +40,6 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/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"));
-require("./DateRangeFieldView.scss");
 function DateRangeFieldView(props) {
     var bem = hooks_1.useBem('DateRangeFieldView');
     var renderCalendar = react_1.useCallback(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);

package/form/DateRangeField/DateRangeFieldView.scss

@@ -4,14 +4,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;
@@ -19,7 +19,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 @@
     height: 16px;
 
     path {
-      fill: #d9d9d9;
+      fill: $grey-light;
       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: $grey-dark;
         }
       }
     }

package/form/DateTimeField/DateTimeFieldView.js

@@ -48,11 +48,14 @@ function DateTimeFieldView(props) {
     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
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input', {
+                React.createElement("input", __assign({}, props.inputProps, { placeholder: props.placeholder
+                        ? props.placeholder
+                        : props.inputProps.placeholder, className: bem(bem.element('input', {
                         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') },

package/form/DateTimeField/DateTimeFieldView.scss

@@ -4,14 +4,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;
@@ -19,8 +19,9 @@
 
   &_disabled {
     color: rgba(0, 0, 0, .25);
-    background-color: #f1f1f1;
+    background-color: $back-disabled;
     cursor: not-allowed;
+
     input {
       cursor: inherit;
     }
@@ -66,21 +67,20 @@
     height: 16px;
 
     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: $grey-dark;
         }
       }
     }
@@ -97,7 +97,7 @@
       height: 291px;
 
       &:first-child {
-        border-left: 1px solid #ccc;
+        border-left: 1px solid $border-default;
       }
     }
   }
@@ -111,7 +111,7 @@
   &__time {
     .TimePanelView__column {
       height: 291px;
-      border-left: 1px solid #ccc;
+      border-left: 1px solid $border-default;
     }
   }
 }

package/form/DateTimeRangeField/DateTimeRangeFieldView.d.ts

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

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -40,7 +40,6 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/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"));
-require("./DateTimeRangeFieldView.scss");
 var TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
 function DateTimeRangeFieldView(props) {
     var bem = hooks_1.useBem('DateTimeRangeFieldView');

package/form/DateTimeRangeField/DateTimeRangeFieldView.scss

@@ -4,22 +4,23 @@
   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;
   }
 
   &_disabled {
+    opacity: .7;
     color: rgba(0, 0, 0, .25);
-    background-color: #f1f1f1;
+    background-color: $back-disabled;
     cursor: not-allowed;
     input {
       cursor: inherit;
@@ -43,7 +44,7 @@
       height: 291px;
 
       &:first-child {
-        border-left: 1px solid #ccc;
+        border-left: 1px solid $border-default;
       }
     }
   }
@@ -80,21 +81,20 @@
     height: 16px;
 
     path {
-      fill: #d9d9d9;
+      fill: $grey-light;
       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: $grey-dark;
         }
       }
     }

package/form/DropDownField/DropDownFieldView.js

@@ -54,7 +54,7 @@ function DropDownFieldView(props) {
                 reset: props.showReset,
                 'no-border': props.noBorder,
                 'is-invalid': !!props.errors,
-                'disabled': props.disabled
+                disabled: props.disabled
             }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.multiple
             ? props.selectedIds
                 .map(function (id) { return props.items.find(function (item) { return item[props.primaryKey] === id; }); })