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

package/index.d.ts

@@ -173,6 +173,9 @@ declare const _default: {
     'list.GridView': {
         lazy: () => any;
     };
+    'list.FlexGridView': {
+        lazy: () => any;
+    };
     'list.ContentColumnView': {
         lazy: () => any;
     };

package/index.js

@@ -176,6 +176,9 @@ exports["default"] = {
     'list.GridView': {
         lazy: function () { return require('./list/Grid/GridView')["default"]; }
     },
+    'list.FlexGridView': {
+        lazy: function () { return require('./list/FlexGrid/FlexGridView')["default"]; }
+    },
     'list.ContentColumnView': {
         lazy: function () { return require('./list/Grid/views/ContentColumnView/ContentColumnView')["default"]; }
     },

package/index.scss

@@ -3,6 +3,8 @@
 @import './scss/animations';
 @import './scss/fonts';
 
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
@@ -11,8 +13,6 @@
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Accordion/AccordionView';
-@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
 @import './content/DropDown/DropDownView.scss';
 @import './content/Menu/MenuItemView';
@@ -61,6 +61,7 @@
 @import './list/CheckboxColumn/CheckboxColumnView';
 @import './list/Empty/EmptyView';
 @import './list/Grid/GridView';
+@import './list/FlexGrid/FlexGridView';
 @import './list/List/ListView';
 @import './list/Pagination/PaginationButtonView';
 @import './list/Pagination/PaginationMoreView';

package/layout/ProgressBar/LineProgressBarView.scss

@@ -109,7 +109,7 @@
   }
 
   &__text{
-    color: $dark;
+    color: $graphite;
     margin-left: 8px;
   }
 }

package/list/FlexGrid/FlexGridView.d.ts

@@ -0,0 +1,2 @@
+import { IFlexGridViewProps } from '@steroidsjs/core/ui/list/FlexGrid/FlexGrid';
+export default function FlexGridView(props: IFlexGridViewProps): JSX.Element;

package/list/FlexGrid/FlexGridView.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function FlexGridView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('FlexGridView');
+    var halfColGap = props.colGap / 2;
+    var hasItems = !!((_a = props.items) === null || _a === void 0 ? void 0 : _a.length);
+    var colGapStyle = hasItems
+        ? {
+            marginRight: -halfColGap,
+            marginLeft: -halfColGap
+        }
+        : {
+            columnGap: props.colGap
+        };
+    return (React.createElement("div", { className: bem(bem.block({
+            wrap: props.wrap,
+            align: props.align,
+            direction: props.direction,
+            justify: props.justify
+        }), props.className), style: __assign(__assign(__assign({}, props.style), colGapStyle), { rowGap: props.rowGap }) },
+        hasItems && props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem(bem.element('item', {
+                col: item.col,
+                lg: item.lg,
+                md: item.md,
+                sm: item.sm,
+                offset: item.offset
+            }), props.itemClassName), style: {
+                paddingRight: halfColGap,
+                paddingLeft: halfColGap,
+                order: item.order
+            } }, item.content)); }),
+        props.children));
+}
+exports["default"] = FlexGridView;

package/list/FlexGrid/FlexGridView.scss

@@ -0,0 +1,57 @@
+$justifyValues: center, end, start, stretch, flex-start, flex-end, left, right, space-between, space-around, space-evenly;
+$alignValues: center, end, start, stretch, flex-start, flex-end;
+$directionValues: column-reverse column row-reverse row;
+$colValues: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
+$colMaxValue: 12;
+
+@mixin col($className, $root, $property: flex-basis) {
+  @each $colValue in $colValues {
+    &_#{$className}_#{$colValue} {
+      #{$property}: calc((100% / $colMaxValue) * $colValue);
+    }
+  }
+}
+
+.FlexGridView {
+  $root: &;
+
+  display: flex;
+  flex-wrap: nowrap;
+
+  &_wrap {
+    flex-wrap: wrap;
+  }
+
+  @each $alignValue in $alignValues {
+    &_align_#{$alignValue} {
+        align-items: $alignValue;
+    }
+  }
+
+  @each $justifyValue in $justifyValues {
+    &_justify_#{$justifyValue} {
+        justify-content: $justifyValue;
+    }
+  }
+
+  @each $directionValue in $directionValues {
+    &_direction_#{$directionValue} {
+        flex-direction: $directionValue;
+    }
+  }
+
+  &__item {
+    @include col(col, $root);
+    @include col(offset, $root, margin-inline-start);
+
+    @media (max-width: $desktop-width) {
+      @include col(lg, $root);
+    }
+    @media (max-width: $tablet-width) {
+      @include col(md, $root);
+    }
+    @media (max-width: $mobile-width) {
+      @include col(sm, $root);
+    }
+  }
+}

package/list/Grid/GridView.scss

@@ -1,21 +1,24 @@
 :root {
-    --grid-header-background-color: #f1f5f7;
-    --grid-border-color: #e6e6e6;
-    --grid-alternating-color: #F8F8F8;
+    --grid-header-background-color: var(--light-gray);
+    --grid-border-color: var(--gray);
+
     --grid-td-background-color: #FFFFFF;
+    --grid-td-alternating-color: var(--additional-light-gray);
 }
 
 html[data-theme="dark"] {
-    --grid-header-background-color: #414141;
-    --grid-border-color: #595959;
-    --grid-alternating-color: #4A4B53;
-    --grid-td-background-color: #4E4F57;
+    --grid-header-background-color: var(--additional-gray-dark);
+    --grid-border-color: var(--additional-gray-dark);
+
+    --grid-td-background-color: var(--graphite);
+    --grid-td-alternating-color: var(--graphite-dark);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
 $grid-border-color: var(--grid-border-color);
-$grid-alternating-color: var(--grid-alternating-color);
+
 $grid-td-background-color: var(--grid-td-background-color);
+$grid-td-alternating-color: var(--grid-td-alternating-color);
 
 .GridView {
     $root: &;
@@ -78,7 +81,7 @@ $grid-td-background-color: var(--grid-td-background-color);
 
     &_alternatingColors{
         #{$root}__table tbody tr:nth-child(even) td { 
-            background-color: $grid-alternating-color;
+            background-color: $grid-td-alternating-color;
         }
     }
 

package/list/Grid/views/ContentColumnView/ContentColumnView.scss

@@ -28,7 +28,7 @@ $grid-icon-color: var(--grid-icon-color);
     }
 
     &__subtitle {
-        color: $placeholder-color;
+        color: $element-placeholder-color;
     }
 
     &__picture {

package/list/Pagination/PaginationButtonView.scss

@@ -1,27 +1,24 @@
 :root {
-    --pagination-hover-color: #e5e9eb;
-    --pagination-hover-background-color: #ffffff;
+    --pagination-border-color: var(--gray);
+    --pagination-hover-background-color: $white;
+
     --pagination-arrow-color: #323232;
-    --pagination-focus-color: #f5f8fa;
-    --pagination-disabled-background-color: #eef1f2;
-    --pagination-disabled-color: rgba(0, 0, 0, 0.1);
+    --pagination-background-color-disabled: #F1F5F7;
 }
 
 html[data-theme="dark"] {
-    --pagination-hover-color: #5b5c6b;
-    --pagination-hover-background-color: #5b5c6b;
+    --pagination-border-color: var(--background-color);
+    --pagination-hover-background-color: var(--gray-dark);
+
     --pagination-arrow-color: #ffffff;
-    --pagination-focus-color: #adaab3;
-    --pagination-disabled-background-color: #5b5c6b;
-    --pagination-disabled-color: rgba(255, 255, 255, 0.1);
+    --pagination-background-color-disabled: #333646;
 }
 
-$pagination-hover-color: var(--pagination-hover-color);
+$pagination-border-color: var(--pagination-border-color);
 $pagination-hover-background-color: var(--pagination-hover-background-color);
+
 $pagination-arrow-color: var(--pagination-arrow-color);
-$pagination-focus-color: var(--pagination-focus-color);
-$pagination-disabled-background-color: var(--pagination-disabled-background-color);
-$pagination-disabled-color: var(--pagination-disabled-color);
+$pagination-background-color-disabled: var(--pagination-background-color-disabled);
 
 .PaginationButtonView {
     $root: &;
@@ -155,7 +152,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         cursor: pointer;
 
         background-color: $element-background-color;
-        border: 1px solid $border-color;
+        border: 1px solid $pagination-border-color;
         border-right: none;
 
         &::before {
@@ -168,12 +165,12 @@ $pagination-disabled-color: var(--pagination-disabled-color);
             height: 100%;
             pointer-events: none;
             border-radius: inherit;
-            border: 4px solid $pagination-focus-color;
+            border: 4px solid $light-gray;
             opacity: 0;
         }
 
         &:last-child {
-            border: 1px solid $border-color;
+            border: 1px solid $pagination-border-color;
         }
 
         &_active {
@@ -192,7 +189,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         }
 
         &:not(#{$pageRoot}_disabled):not(#{$pageRoot}_active):hover {
-            border-color: $pagination-hover-color;
+            border-color: $element-border-color-hover;
             background-color: $pagination-hover-background-color;
         }
 
@@ -233,7 +230,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
             justify-content: center;
             align-items: center;
 
-            rect { 
+            rect {
                 fill: transparent;
             }
 
@@ -247,18 +244,19 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         }
 
         &_disabled {
-            background-color: $pagination-disabled-background-color;
-            color: $pagination-disabled-color;
+            background-color: $element-background-color-disabled;
+            color: $element-placeholder-color-disabled;
+
             cursor: not-allowed;
 
-            button { 
+            button {
                 cursor: not-allowed;
             }
 
             #{$pageRoot}-icon {
                 pointer-events: none;
                 path {
-                    stroke: $pagination-disabled-color;
+                    stroke: $element-placeholder-color-disabled;
                 }
             }
         }

package/modal/Modal/ModalView.scss

@@ -1,3 +1,13 @@
+:root { 
+    --modal-background-color:  #FFFFFF;
+}
+
+html[data-theme="dark"] {
+    --modal-background-color:  #272A37;
+}
+
+$modal-background-color: var(--modal-background-color);
+
 .ModalView {
     $root: &;
     min-width: 300px;
@@ -18,7 +28,7 @@
     &__body {
         margin: auto;
         overflow: visible;
-        background-color: $element-background-color;
+        background-color: $modal-background-color;
         color: $text-color;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.62",
+    "version": "3.0.0-beta.64",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45"
     }
 }

package/scss/mixins/date.scss

@@ -1,3 +1,5 @@
+@import "../variables/index";
+
 :root {
     --date-icon-default-color: #cbd5db;
     --date-icon-close-default-color: #323232;
@@ -6,7 +8,7 @@
 }
 
 html[data-theme="dark"] {
-    --date-icon-default-color: #5b5c6b;
+    --date-icon-default-color: #333646;
     --date-icon-close-default-color: #ffffff;
     --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
     --date-range-separator-color: rgba(255, 255, 255, 0.1);
@@ -106,8 +108,8 @@ $date-sizes: map-merge(
         width: 100%;
         font-size: inherit;
         line-height: $line-height-lg;
-        background-color: $element-background-color;
-        border: 1px solid $border-color;
+        background-color: $element-field-background-color;
+        border: 1px solid $element-border-color;
         color: $text-color;
         transition: border-color 150ms ease-in-out;
 
@@ -116,12 +118,16 @@ $date-sizes: map-merge(
         }
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:disabled {
             border: none;
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
+
+            &::placeholder {
+                color: $element-placeholder-color-disabled;
+            }
         }
     }
 }
@@ -163,10 +169,12 @@ $date-sizes: map-merge(
     }
 
     &_disabled {
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-disabled-color;
+        #{$root}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
             }
         }
     }
@@ -232,7 +240,7 @@ $date-sizes: map-merge(
         }
 
         &::before {
-            border-color: $border-color;
+            border-color: $element-border-color;
         }
 
         &::after {
@@ -263,7 +271,13 @@ $date-sizes: map-merge(
 
     &_disabled {
         #{$root}__body {
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
+        }
+
+        #{$root}__input { 
+            &::placeholder { 
+                color: $element-placeholder-color-disabled;
+            }
         }
 
         #{$root}__effect {
@@ -272,10 +286,12 @@ $date-sizes: map-merge(
     }
 
     &_disabled {
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-disabled-color;
+        #{$root}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
             }
         }
     }
@@ -325,12 +341,11 @@ $date-sizes: map-merge(
         color: inherit;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
     }
 }
 
-
 @mixin date-time-panel($root) {
     &__panel-container {
         position: relative;
@@ -394,4 +409,10 @@ $date-sizes: map-merge(
             margin-top: 3px;
         }
     }
+}
+
+@mixin calendar-border () { 
+    .CalendarView { 
+        border: none;
+    }
 }