@steroidsjs/bootstrap 3.0.0-beta.44 → 3.0.0-beta.45

package/content/Alert/AlertView.js

@@ -23,7 +23,7 @@ function Alert(props) {
                     props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description))),
                 react_1["default"].createElement("div", null, props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
                         large: !!props.description
-                    }), name: 'close', onClick: props.onClose })))),
+                    }), name: 'alert-close', onClick: props.onClose })))),
             props.children || null))));
 }
 exports["default"] = Alert;

package/form/Button/ButtonView.scss

@@ -6,7 +6,7 @@ $btn-letter-spacing: 0.1em;
 .ButtonView {
     $root: &;
 
-    transition-property: color, background-color, border-color, box-shadow;
+    transition-property: color, background-color, border-color, box-shadow, stroke;
     transition-duration: 0.15s;
     transition-timing-function: ease-in-out;
 
@@ -61,8 +61,6 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-
-
     &_tag { 
         &-a { 
             width: auto;
@@ -114,8 +112,8 @@ $btn-letter-spacing: 0.1em;
 
     &__icon {
         margin-right: 10px;
-        width: 16px;
-        height: 16px;
+        width: fit-content;
+        height: fit-content;
         &_without-label {
             margin: 0;
         }

package/form/FieldLayout/FieldLayoutView.js

@@ -32,7 +32,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function FieldLayoutView(props) {
     var bem = (0, hooks_1.useBem)('FieldLayoutView');
-    return (React.createElement("div", { className: bem.block() },
+    return (React.createElement("div", { className: bem(bem.block(), props.className) },
         props.label && (React.createElement("label", { htmlFor: props.id, className: bem.element('label', {
                 required: props.required,
                 size: props.size

package/form/FieldList/FieldListItemView.js

@@ -37,13 +37,15 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
+var content_1 = require("@steroidsjs/core/ui/content");
 exports["default"] = React.memo(function (props) {
     var bem = (0, hooks_1.useBem)('FieldListItemView');
-    return (React.createElement("tr", null,
-        props.items.map(function (field, index) { return (React.createElement("td", { key: index, className: bem(bem.element('table-cell'), field.className) },
+    return (React.createElement("tr", { className: bem.block() },
+        props.items.map(function (field, index) { return (React.createElement("td", { key: index, className: field.className },
             React.createElement(form_1.Field, __assign({}, field, { prefix: props.prefix })))); }),
-        props.showRemove && (React.createElement("td", { className: bem.element('table-cell', 'remove') }, (!props.required || props.rowIndex > 0) && (React.createElement("button", { type: 'button', className: bem.element('remove'), onClick: function (e) {
+        props.showRemove && (React.createElement("td", null, (!props.required || props.rowIndex > 0) && (React.createElement("button", { type: 'button', className: bem.element('remove'), onClick: function (e) {
                 e.preventDefault();
                 props.onRemove(props.rowIndex);
-            } }, "\u00D7"))))));
+            } },
+            React.createElement(content_1.Icon, { name: 'field-list-remove' })))))));
 });

package/form/FieldList/FieldListItemView.scss

@@ -1,41 +1,12 @@
-
 .FieldListItemView {
-
-  &__table {
-    th, thead th, td {
-      border: none;
-    }
-  }
-
-  &__table-cell {
-    .form-group {
-      margin-bottom: 0;
-    }
-
-    &_remove {
-      vertical-align: middle !important;
-    }
-  }
-
-  &__table-cell-header {
-    padding-bottom: 0 !important;
-  }
-
   &__remove {
+    background-color: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
-    color: $danger;
-  }
-
-  &__link-add {
-    margin-left: 0.75rem;
-    border-bottom: 1px dashed $link-color;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .FileFieldView__files {
-    margin-bottom: 0;
+    border: none;
+    width: 24px;
+    height: 24px;
   }
 }

package/form/FieldList/FieldListView.js

@@ -28,20 +28,21 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 function FieldListView(props) {
     var bem = (0, hooks_1.useBem)('FieldListView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style, ref: props.forwardedRef },
-        React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size, props.tableClassName) },
+    return (React.createElement("div", { className: bem(bem.block({ hasAlternatingColors: props.hasAlternatingColors }), props.className), style: props.style, ref: props.forwardedRef },
+        React.createElement("table", { className: bem(bem.element('table'), props.tableClassName) },
             React.createElement("thead", null,
                 React.createElement("tr", null,
-                    props.items.map(function (field, rowIndex) { return (React.createElement("th", { key: rowIndex, className: bem(bem.element('table-cell-header'), field.headerClassName) }, field.label)); }),
+                    props.items.map(function (field, rowIndex) { return (React.createElement("th", { key: rowIndex, className: field.headerClassName }, field.title)); }),
                     props.showRemove && (
                     // eslint-disable-next-line jsx-a11y/control-has-associated-label
                     React.createElement("th", null)))),
             React.createElement("tbody", null, props.children),
-            React.createElement("tfoot", null,
+            props.showAdd && !props.disabled && (React.createElement("tfoot", null,
                 React.createElement("tr", null,
-                    React.createElement("td", { colSpan: props.items.length }, props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
-                            e.preventDefault();
-                            props.onAdd();
-                        } }, __('Добавить ещё')))))))));
+                    React.createElement("td", { colSpan: props.items.length + 1 },
+                        React.createElement(form_1.Button, { formId: false, color: 'primary', size: 'sm', outline: true, icon: 'add', className: bem.element('button-add'), onClick: function (e) {
+                                e.preventDefault();
+                                props.onAdd();
+                            } }, __('Добавить')))))))));
 }
 exports["default"] = FieldListView;

package/form/FieldList/FieldListView.scss

@@ -1,35 +1,74 @@
+:root {
+  --background-th: #f1f5f7;
+}
+
+html[data-theme="dark"] { 
+  --background-th: #414141;
+}
+
+$background-th: var(--background-th);
+
 .FieldListView {
+  table {
+    width: 100%;
+    background-color: transparent;
+    border: 1px solid $additional-gray;
+    border-collapse: separate;
+    border-radius: 10px;
+    border-spacing: 0;
+    overflow: hidden;
+  }
 
-  &__table {
-    th, thead th, td {
-      border: none;
-    }
+  th:not(:last-child), td:not(:last-child) {
+    border-right: 1px solid $additional-gray;
   }
 
-  &__table-cell {
-    .form-group {
-      margin-bottom: 0;
-    }
+  tr th {
+    border-bottom: 1px solid $additional-gray;
+    background-color: $background-th;
+    color: $text-color;
+    font-size: 14px;
+    line-height: 18px;
+  }
 
-    &_remove {
-      vertical-align: middle !important;
-    }
+  tr:not(:last-child) td {
+    border-bottom: 1px solid $additional-gray;
+  }
+  
+  tfoot > tr > td{
+    border-top: 1px solid $additional-gray;
   }
 
-  &__table-cell-header {
-    padding-bottom: 0 !important;
+  tr td {
+    padding: 12px;
   }
 
-  &__remove {
-    cursor: pointer;
-    color: $danger;
+  tr th {
+    text-align: left;
+    padding: 20px 12px;
+  }
+
+  tr td .CheckboxFieldView{
+    justify-content: center
+  }
+
+  &_hasAlternatingColors {
+    tr:nth-child(even) {
+      background-color: $additional-light-gray;
+    }
   }
 
   &__button-add {
-    margin-left: 0.75rem;
+    > span {
+      gap: 4px;
+    }
+
+    svg > * {
+      stroke: inherit;
+    }
   }
 
-  .FileFieldView__files {
+  .FieldLayoutView {
     margin-bottom: 0;
   }
 }

package/form/FieldSet/FieldSetView.js

@@ -24,9 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
 function FieldSetView(props) {
-    return (React.createElement("fieldset", { className: props.className },
-        React.createElement("legend", null, props.label),
+    var bem = (0, hooks_1.useBem)('FieldSetView');
+    return (React.createElement("fieldset", { className: bem(bem.block(), props.className) },
+        React.createElement("legend", { className: bem.element('legend') }, props.label),
         props.children));
 }
 exports["default"] = FieldSetView;

package/form/FieldSet/FieldSetView.scss

@@ -0,0 +1,42 @@
+:root {
+    --legend-color: #152536;
+    --legend-background-color: #ffffff;
+    --fieldset-border-color: #E6E6E6;
+}
+  
+html[data-theme="dark"] { 
+    --legend-color: #ffffff;
+    --legend-background-color: #414141;
+    --fieldset-border-color: #595959;
+}
+  
+$legend-color: var(--legend-color);
+$legend-background-color: var(--legend-background-color);
+$fieldset-border-color: var(--fieldset-border-color);
+
+.FieldSetView{
+    border: 1px solid $fieldset-border-color;
+    border-radius: 8px;
+
+    &__legend {
+        background-color: $legend-background-color;
+        color: $legend-color;
+
+        padding: 8px;
+        margin-left: 16px;
+
+        line-height: 32px;
+        font-weight: 700;
+        font-size: 24px;
+
+    }
+
+    .FieldLayoutView {
+        padding: 0px 24px 24px 24px;
+        margin-bottom: 0px;
+    }
+
+    .FieldLayoutView + .FieldLayoutView {
+        padding-top: 0px;
+    }
+}

package/form/HtmlField/HtmlFieldView.scss

@@ -1,4 +1,7 @@
-
 .HtmlFieldView {
-
-}
+  --ck-color-toolbar-background: #f1f5f7;
+  --ck-color-toolbar-border: #dbe2e6;
+  --ck-color-base-border: #dbe2e6;
+  --ck-border-radius: 12px;
+  max-width: 610px;
+}

package/icons/index.js

@@ -257,7 +257,7 @@ exports["default"] = (function (customIcons) {
         'info',
         'warning',
         'error',
-        'close',
+        'alert-close',
         'default',
         'badge-close',
         'loader',
@@ -282,6 +282,13 @@ exports["default"] = (function (customIcons) {
         'paste',
         'pin',
         'trash',
+        'comeback',
+        'remove',
+        'show',
+        'add1',
+        'edit1',
+        'field-list-remove',
+        'add',
         'file-loading',
     ];
     steroidsIcons.forEach(function (iconName) {

package/icons/svgs/add.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3535 6.47559L12.3739 17.7689M6.69666 12.1324L17.99 12.1528" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/add1.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.85156 11.5815C3.85156 9.68173 3.85262 8.30721 3.99355 7.25902C4.13254 6.22521 4.39929 5.58401 4.87669 5.10661C5.35409 4.62921 5.99529 4.36246 7.0291 4.22347C8.07729 4.08254 9.45181 4.08148 11.3516 4.08148H13.3516C15.2513 4.08148 16.6258 4.08254 17.674 4.22347C18.7078 4.36246 19.349 4.62921 19.8264 5.10661C20.3038 5.58401 20.5706 6.22521 20.7096 7.25902C20.8505 8.30721 20.8516 9.68173 20.8516 11.5815V13.5815C20.8516 15.4812 20.8505 16.8558 20.7096 17.9039C20.5706 18.9378 20.3038 19.579 19.8264 20.0564C19.349 20.5338 18.7078 20.8005 17.674 20.9395C16.6258 21.0804 15.2513 21.0815 13.3516 21.0815H11.3516C9.45181 21.0815 8.07729 21.0804 7.0291 20.9395C5.99529 20.8005 5.35409 20.5338 4.87669 20.0564C4.39929 19.579 4.13254 18.9378 3.99355 17.9039C3.85262 16.8558 3.85156 15.4812 3.85156 13.5815V11.5815Z" stroke="#323232"/>
+<path d="M12.3516 8.58148L12.3516 16.5815" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.3516 12.5815L8.35156 12.5815" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/comeback.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.35156 8.58148L5.35156 12.5815M5.35156 12.5815L9.35156 16.5815M5.35156 12.5815H17.3516" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/edit1.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28127 19.8645L6.28128 19.8645L6.30306 19.8591L6.30307 19.8591L8.9354 19.201C8.95052 19.1972 8.96552 19.1935 8.98041 19.1898C9.20315 19.1343 9.40033 19.0852 9.57936 18.9839C9.75839 18.8825 9.90192 18.7387 10.064 18.5762C10.0749 18.5654 10.0858 18.5544 10.0968 18.5434L17.2909 11.3493L17.2909 11.3493L17.3142 11.326C17.6276 11.0126 17.8977 10.7426 18.0849 10.4973C18.2855 10.2343 18.4373 9.94193 18.4373 9.58154C18.4373 9.22116 18.2855 8.92873 18.0849 8.66582C17.8977 8.42048 17.6276 8.15045 17.3142 7.83704L17.2909 7.81378L16.9373 8.16733L17.2909 7.81377L17.1193 7.6422L17.0961 7.61893C16.7827 7.30549 16.5126 7.03543 16.2673 6.84825C16.0044 6.64765 15.7119 6.49576 15.3516 6.49576C14.9912 6.49576 14.6988 6.64764 14.4358 6.84825C14.1905 7.03543 13.9205 7.30549 13.6071 7.61894L13.5838 7.6422L6.38972 14.8363C6.3787 14.8473 6.36775 14.8582 6.35689 14.8691C6.19442 15.0312 6.05059 15.1747 5.94923 15.3537C5.84786 15.5328 5.79879 15.7299 5.74336 15.9527C5.73965 15.9676 5.73591 15.9826 5.73213 15.9977L5.0686 18.6518C5.06639 18.6607 5.06416 18.6696 5.06192 18.6785C5.02268 18.8352 4.98077 19.0025 4.96702 19.1431C4.95189 19.2978 4.95541 19.5589 5.16482 19.7683C5.37423 19.9777 5.63529 19.9812 5.79002 19.9661C5.93055 19.9523 6.09789 19.9104 6.25457 19.8712C6.26351 19.8689 6.27241 19.8667 6.28127 19.8645Z" stroke="#323232"/>
+<path d="M12.8516 8.08154L16.8516 12.0815" stroke="#323232"/>
+</svg>

package/icons/svgs/field-list-remove.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.35156" y="3" width="18" height="18" rx="9" fill="#323232"/>
+<path d="M9.35156 9L15.3516 14.9784M9.35156 15L15.3516 9.02161" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/remove.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.3516" cy="12.5815" r="9" stroke="#323232"/>
+<path d="M18.3516 18.5815L6.35156 6.58154" stroke="#323232"/>
+</svg>

package/icons/svgs/show.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.3516" cy="12.5815" r="3.5" stroke="#323232"/>
+<path d="M20.5396 11.5158C20.9278 11.987 21.1218 12.2227 21.1218 12.5815C21.1218 12.9403 20.9278 13.1759 20.5396 13.6472C19.1195 15.3713 15.9873 18.5815 12.3516 18.5815C8.71583 18.5815 5.58362 15.3713 4.16353 13.6472C3.77537 13.1759 3.58129 12.9403 3.58129 12.5815C3.58129 12.2227 3.77537 11.987 4.16353 11.5158C5.58362 9.79162 8.71583 6.58148 12.3516 6.58148C15.9873 6.58148 19.1195 9.79162 20.5396 11.5158Z" stroke="#323232"/>
+</svg>

package/index.d.ts

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

package/index.js

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

package/index.scss

@@ -33,6 +33,7 @@
 @import './form/FieldList/FieldListItemView';
 @import './form/FileField/FileFieldView';
 @import './form/FileField/FileFieldItemView';
+@import './form/FieldSet/FieldSetView';
 @import './form/Form/FormView';
 @import './form/HtmlField/HtmlFieldView';
 @import './form/InputField/InputFieldView';

package/list/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
-export default function CheckboxColumnView(props: ICheckboxColumnViewProps & IBemHocOutput): JSX.Element;
+export default function CheckboxColumnView(props: ICheckboxColumnViewProps): JSX.Element;

package/list/CheckboxColumn/CheckboxColumnView.js

@@ -40,10 +40,11 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var CheckboxField_1 = __importDefault(require("@steroidsjs/core/ui/form/CheckboxField"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var get_1 = __importDefault(require("lodash-es/get"));
 function CheckboxColumnView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxColumnView');
     var CheckboxFieldInternal = CheckboxField_1["default"].WrappedComponent;
     return (React.createElement("div", { className: bem.block() },
-        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input }))));
+        React.createElement(CheckboxFieldInternal, __assign({}, props.fieldProps, { input: props.input, size: props.size, label: (0, get_1["default"])(props.item, props.attribute) }))));
 }
 exports["default"] = CheckboxColumnView;

package/list/Grid/GridView.js

@@ -73,10 +73,14 @@ function GridView(props) {
             } }));
     }, [bem, props]);
     var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
-    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading) }), props.className) },
+    return props.renderList(React.createElement("div", { className: bem(bem.block({
+            loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading),
+            size: props.size,
+            alternatingColors: props.hasAlternatingColors
+        }), props.className) },
         props.renderSearchForm(),
         props.renderPaginationSize(),
-        React.createElement("table", { className: 'table table-striped' },
+        React.createElement("table", { className: bem.element('table') },
             React.createElement("thead", null,
                 React.createElement("tr", null, props.columns.map(function (column, columnIndex) { return (React.createElement("th", { key: columnIndex, className: column.headerClassName },
                     column.label,
@@ -86,7 +90,7 @@ function GridView(props) {
                         renderSortButton(column.attribute, 'desc'))))); })),
                 renderInsideSearchForm()),
             React.createElement("tbody", null,
-                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: column.className, "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
+                props.items && props.items.map(function (item, rowIndex) { return (React.createElement("tr", { key: item[props.primaryKey] || rowIndex }, props.columns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex, className: bem(bem.element('column'), column.className), "data-label": (0, isString_1["default"])(column.label) ? column.label : null }, props.renderValue(item, column))); }))); }),
                 emptyContent && (React.createElement("tr", null,
                     React.createElement("td", { colSpan: props.columns.length }, emptyContent))))),
         props.renderPagination()));

package/list/Grid/GridView.scss

@@ -1,51 +1,164 @@
+:root {
+    --grid-header-background-color: #f1f5f7;
+    --grid-border-color: #e6e6e6;
+    --grid-alternating-color: #F8F8F8;
+    --grid-td-background-color: #FFFFFF;
+}
+
+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(--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);
+
 .GridView {
-  opacity: 1;
-  transition: opacity .2s;
-
-  &_loading {
-    opacity: .4;
-  }
-
-  //adaptive styles
-  // @include media-breakpoint-down(sm) {
-  //   thead, tbody, th, tr {
-  //     display: block;
-  //   }
-
-  //   thead tr {
-  //     position: absolute;
-  //     top: -9999px;
-  //     left: -9999px;
-  //   }
-
-  //   td {
-  //     position: relative;
-  //     width: 100% !important;
-  //     text-align: left !important;
-
-  //     display: flex;
-  //     align-items: center;
-  //     white-space: pre-wrap;
-  //   }
-
-  //   td:before {
-  //     padding-right: 1rem;
-  //     width: 50%;
-  //     flex-shrink: 0;
-  //     content: attr(data-label);
-  //   }
-  // }
-
-  &__sort-button {
-    opacity: 0.5;
-
-    &_is-active {
-      opacity: 1;
+    $root: &;
+
+    text-align: left;
+
+    width: 100%;
+
+    &__table {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        border-collapse: separate;
+        border: 1px solid $grid-border-color;
+        border-radius: $radius-large;
+        margin: 24px 0;
+
+        th,
+        td {
+            color: $text-color;
+            background-color: $grid-td-background-color;
+        }
+        th {
+            font-weight: $font-weight-lg;
+            background-color: $grid-header-background-color;
+        }
+
+        th:not(:last-child),
+        td:not(:last-child) {
+            border-right: 1px solid $grid-border-color;
+        }
+
+        thead > tr > th,
+        tbody > tr:not(:last-child) > td,
+        tr:not(:last-child) > td,
+        thead:not(:last-child),
+        tbody:not(:last-child) {
+            border-bottom: 1px solid $grid-border-color;
+        }
+
+        thead > tr > th {
+            &:first-child {
+                border-top-left-radius: $radius-large;
+            }
+            &:last-child {
+                border-top-right-radius: $radius-large;
+            }
+        }
+
+        tbody > tr:last-child > td {
+            &:first-child {
+                border-bottom-left-radius: $radius-large;
+            }
+
+            &:last-child {
+                border-bottom-right-radius: $radius-large;
+            }
+        }
+    }
+
+    &_alternatingColors{
+        #{$root}__table tbody tr:nth-child(even) td { 
+            background-color: $grid-alternating-color;
+        }
     }
 
-    .IconView svg {
-      width: 10px;
-      height: 16px;
+    &_size {
+        &_lg {
+            #{$root}__table {
+                font-size: $font-size-lg;
+                line-height: $line-height-lg;
+            }
+
+            th,
+            td {
+                padding: 24px 16px;
+            }
+        }
+
+        &_md {
+            #{$root}__table {
+                font-size: $font-size-base;
+                line-height: $line-height-base;
+            }
+
+            th,
+            td {
+                padding: 21px 12px;
+            }
+        }
+
+        &_sm {
+            #{$root}__table {
+                font-size: $font-size-sm;
+                line-height: $line-height-sm;
+            }
+
+            th,
+            td {
+                padding: 16px 8px;
+            }
+        }
+    }
+
+
+    &__column {
+
+        .IconView { 
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &_hasIcon { 
+            display: flex;    
+            flex-flow: row nowrap;
+            align-items: center;
+
+            .IconView { 
+                margin-left: 8px;           
+            }
+
+            &-left { 
+                span {
+                    &:nth-child(1) {
+                        order: 2;
+                    }
+
+                    &:nth-child(2) {
+                        order: 1;
+                    }
+                }
+
+                .IconView { 
+                    margin-left: 0;
+                    margin-right: 8px;
+                }
+            }
+        }
     }
-  }
 }

package/list/Grid/views/ContentColumnView/ContentColumnView.d.ts

@@ -0,0 +1,3 @@
+import { IContentColumnViewProps } from '@steroidsjs/core/ui/list/Grid/Grid';
+import './ContentColumnView.scss';
+export default function ContentColumnView(props: IContentColumnViewProps): JSX.Element;

package/list/Grid/views/ContentColumnView/ContentColumnView.js

@@ -0,0 +1,51 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Format_1 = __importDefault(require("@steroidsjs/core/ui/format/Format"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
+require("./ContentColumnView.scss");
+function ContentColumnView(props) {
+    var _a, _b, _c, _d, _e;
+    var bem = (0, useBem_1["default"])('ContentColumnView');
+    var hasLink = !!((_a = props.link) === null || _a === void 0 ? void 0 : _a.attribute);
+    var hasPicture = !!((_b = props.picture) === null || _b === void 0 ? void 0 : _b.attribute);
+    var hasIcon = !!((_c = props.icon) === null || _c === void 0 ? void 0 : _c.attribute);
+    var hasSubtitle = !!props.subtitleAttribute;
+    var hasTextData = !!props.attribute || !!props.subtitleAttribute || hasLink;
+    var renderFormat = function () { return (react_1["default"].createElement(Format_1["default"], __assign({}, props, (props.formatter || {}), { attribute: hasLink ? props.link.attribute : props.attribute }))); };
+    var renderValue = function () {
+        var _a;
+        if (hasLink) {
+            return (react_1["default"].createElement(nav_1.Link, __assign({}, props.link.linkProps, { url: (0, get_1["default"])(props.item, (_a = props.link) === null || _a === void 0 ? void 0 : _a.urlAttribute), className: bem.element('link') }), renderFormat()));
+        }
+        return (react_1["default"].createElement("span", { className: bem.element('value') }, renderFormat()));
+    };
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size,
+            isLeft: ((_d = props.picture) === null || _d === void 0 ? void 0 : _d.isLeft) || ((_e = props.icon) === null || _e === void 0 ? void 0 : _e.isLeft)
+        })) },
+        hasTextData && (react_1["default"].createElement("div", { className: bem.element('data') },
+            renderValue(),
+            hasSubtitle && react_1["default"].createElement("span", { className: bem.element('subtitle') }, (0, get_1["default"])(props.item, props.subtitleAttribute)))),
+        hasPicture && (react_1["default"].createElement("span", { className: bem.element('picture') },
+            react_1["default"].createElement("img", { src: (0, get_1["default"])(props.item, props.picture.attribute), alt: "cell element" }))),
+        hasIcon && (react_1["default"].createElement(content_1.Icon, { name: (0, get_1["default"])(props.item, props.icon.attribute), className: bem.element('icon') }))));
+}
+exports["default"] = ContentColumnView;

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

@@ -0,0 +1,88 @@
+@import "style/variables";
+
+:root {
+    --grid-icon-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --grid-icon-color: #ffffff;
+}
+
+$grid-icon-color: var(--grid-icon-color);
+
+.ContentColumnView {
+    $root: &;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    column-gap: 8px;
+
+    > * {
+        display: inline-block;
+    }
+
+    &__data {
+        display: flex;
+        flex-flow: column;
+    }
+
+    &__subtitle {
+        color: $placeholder-color;
+    }
+
+    &__picture {
+        width: 24px;
+        height: 24px;
+        overflow: hidden;
+        border-radius: 4px;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__icon {
+        svg {
+            > * {
+                stroke: $grid-icon-color;
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            #{$root}__subtitle {
+                font-size: $font-size-base;
+                line-height: $line-height-base;
+            }
+
+            #{$root}__avatar-wrapper {
+                width: 56px;
+                height: 56px;
+            }
+        }
+
+        &_md {
+            #{$root}__subtitle {
+                font-size: $font-size-sm;
+                line-height: $line-height-sm;
+            }
+        }
+
+        &_sm {
+            #{$root}__subtitle {
+                font-size: $font-size-xs;
+                line-height: $line-height-xs;
+            }
+        }
+    }
+
+    &_isLeft {
+        #{$root}__data {
+            order: 2;
+        }
+    }
+}

package/list/Grid/views/ContentColumnView/index.d.ts

@@ -0,0 +1,2 @@
+import ContentColumnView from './ContentColumnView';
+export default ContentColumnView;

package/list/Grid/views/ContentColumnView/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ContentColumnView_1 = __importDefault(require("./ContentColumnView"));
+exports["default"] = ContentColumnView_1["default"];

package/list/List/ListView.js

@@ -36,10 +36,9 @@ function ListView(props) {
             return null;
         }
         return (React.createElement("div", { className: bem.element('pagination') },
-            React.createElement("div", null, pagination),
-            React.createElement("div", { className: bem.element('pagination-sizes') },
-                layout,
-                paginationSize)));
+            pagination && (React.createElement("div", { className: bem.element('pagination-button') }, pagination)),
+            paginationSize && (React.createElement("div", { className: bem.element('pagination-sizes') }, paginationSize)),
+            layout && (React.createElement("div", { className: bem.element('pagination-layout') }, layout))));
     };
     return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || props.list.isLoading }), props.className) },
         props.renderSearchForm(),

package/list/List/ListView.scss

@@ -2,17 +2,22 @@
     &__pagination {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         flex-flow: row nowrap;
         margin-bottom: 3px;
 
         &-sizes {
-            width: calc(100% / 4);
+            width: fit-content;
 
             .PaginationSizeView__sizes {
                 display: flex;
                 flex-flow: row nowrap;
             }
         }
+
+        &-button { 
+            margin: 0 auto;
+        }
     }
 
     &__content {

package/nav/Controls/ControlsView.scss

@@ -1,5 +1,18 @@
 .ControlsView {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+
+    width: 24px;
+    height: 24px;
+
+    a {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .ButtonView {
+        border: none;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.44",
+    "version": "3.0.0-beta.45",
     "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.24",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.25",
         "@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.24"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.25"
     }
 }

package/scss/mixins/button.scss

@@ -50,6 +50,7 @@
 @mixin button-outline-theme($colorMap, $colorName, $root) {
     background-color: transparent;
     color: map-get($colorMap, color);
+    stroke: map-get($colorMap, color);
     border: 1px solid map-get($colorMap, color);
 
     @include svg-color(map-get($colorMap, text-color));
@@ -67,6 +68,7 @@
         @include svg-color(map-get($colorMap, color-light));
         color: map-get($colorMap, color-light);
         border-color: map-get($colorMap, color-light);
+        stroke: map-get($colorMap, color-light);
         box-shadow: none;
     }
 

package/scss/variables/common/colors.scss

@@ -32,6 +32,11 @@
     --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
     --background-disabled-color: #f1f5f7;
     --element-background-color: #FFFFFF;
+    --additional-gray-dark: #6F6B76;
+    --additional-gray: #E6E6E6;
+    --additional-light-gray: #F8F8F8;
+    --additional-light: #9088A1;
+    --additional-light-blue: #F9FCFF;
 }
 
 html[data-theme="dark"] {
@@ -68,6 +73,11 @@ html[data-theme="dark"] {
     --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
     --background-disabled-color: #5b5c6b;
     --element-background-color: #414141;
+    --additional-gray-dark: #6B6477;
+    --additional-gray: #595959;
+    --additional-light-gray: #4A4B53;
+    --additional-light: #B7AFC7;
+    --additional-light-blue: #DAEAF6;
 }
 
 /*
@@ -107,6 +117,11 @@ $placeholder-color: var(--placeholder-color);
 $placeholder-disabled-color: var(--placeholder-disabled-color);
 $background-disabled-color: var(--background-disabled-color);
 $element-background-color: var(--element-background-color);
+$additional-gray-dark: var(--additional-gray-dark);
+$additional-gray: var(--additional-gray);
+$additional-light-gray: var(--additional-light-gray);
+$additional-light: var(--additional-light);
+$additional-light-blue: var(--additional-light-blue);
 
 /*
  * Common colors