@jetlinks-web/components 2.6.22 → 2.6.24

package/lib/EditTable/style/index.css

@@ -0,0 +1,267 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.jetlinks-edit-table-wrapper {
+  background: #fff;
+  height: 100%;
+  position: relative;
+}
+.jetlinks-edit-table-wrapper.table-full-screen {
+  padding: 24px;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  background: #fafafa;
+  transition: background-color 0.3s ease;
+  overflow: auto hidden;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-header {
+  overflow: hidden;
+  width: 100%;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-body {
+  background-color: #fff;
+  overflow-y: hidden;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll {
+  width: 100%;
+  height: 15px;
+  min-height: 15px;
+  max-height: 15px;
+  display: flex;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll .jetlinks-table-horizontal-scroll-bar {
+  height: 100%;
+  overflow-x: scroll;
+}
+.jetlinks-edit-table-body-viewport {
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden auto;
+  position: relative;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-scrollbar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-body-container {
+  overflow: hidden;
+  height: 100%;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  transition: top 0.2s, height 0.2s, background-color 0.1s;
+  border-bottom: 1px solid #ebebeb;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row .jetlinks-edit-table-cell {
+  position: absolute;
+  min-width: 0;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row:hover {
+  background-color: #f8f8f8;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row.jetlinks-edit-table-row-selected {
+  background-color: var(--ant-primary-1);
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row .body-cell-box {
+  padding: 0 12px;
+  position: relative;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .readonly-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+}
+.jetlinks-edit-table-body-empty {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: 24px;
+}
+.jetlinks-edit-table-header-container {
+  height: 100%;
+  position: relative;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell {
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  float: left;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box {
+  padding: 0 12px;
+  width: 100%;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box.header-cell-box-tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .table-header-cell-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  gap: 4px;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .table-header-cell-title .cell-title-box {
+  flex: 1 1 auto;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .header-cell-required {
+  color: #ff4d4f;
+  padding-left: 8px;
+  transform: translateY(3px);
+  font-weight: 500;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box::before {
+  position: absolute;
+  top: 50%;
+  right: 1px;
+  width: 1px;
+  height: 1.6em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.06);
+  transform: translateY(-50%);
+  transition: background-color 0.3s;
+  content: "";
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box:not(:last-child)::before {
+  background-color: transparent;
+}
+.jetlinks-table-search .jetlinks-table-search-header {
+  display: flex;
+  justify-content: space-between;
+}
+.jetlinks-table-search .jetlinks-table-search-header .jetlinks-drag-modal-footer {
+  display: none;
+}
+.jetlinks-table-search .jetlinks-table-search-header .jetlinks-table-search-result-total {
+  color: #1890ff;
+}
+.jetlinks-table-group-warp .ant-tabs-nav {
+  margin-bottom: 0;
+}
+.jetlinks-table-group-warp .ant-tabs-nav .ant-tabs-tab {
+  overflow: hidden;
+  position: relative;
+}
+.jetlinks-table-group-warp .ant-tabs-nav .ant-tabs-tab-active {
+  background-color: #BAE0FF !important;
+  border-color: #91CAFF !important;
+}
+.jetlinks-table-group-warp .ant-tabs-nav .ant-tabs-nav-add {
+  border: none;
+}
+.jetlinks-table-group-error-warp {
+  color: #1a1a1a !important;
+}
+.jetlinks-table-group-error-warp .table-group-error-target {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border: 16px solid transparent;
+  border-top-color: #ff4d4f;
+  border-right-width: 0;
+  border-bottom-width: 0;
+}
+.jetlinks-table-form-error-target {
+  position: absolute;
+  right: 2px;
+  top: -9px;
+  border: 16px solid transparent;
+  border-top-color: #ff4d4f;
+  border-right-width: 0;
+  border-bottom-width: 0;
+}
+.jetlinks-edit-table-form-has-error .select-no-value .ant-select-selector {
+  border-color: #ff4d4f !important;
+}
+.jetlinks-edit-table-form-has-error .select-no-value .ant-select-selector:focus {
+  box-shadow: 0 0 0 2px var(--ant-error-color-outline) !important;
+}
+.jetlinks-edit-table-form-has-error > input {
+  border-color: #ff4d4f !important;
+}
+.jetlinks-edit-table-form-has-error > input:focus {
+  box-shadow: 0 0 0 2px var(--ant-error-color-outline) !important;
+}
+.jetlinks-edit-table-form-has-error .jetlinks-table-form-required-aicon {
+  color: #ff4d4f;
+}
+.jetlinks-edit-table-context-menu {
+  position: fixed;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  width: 192px;
+  padding: 4px;
+  background-color: #fff;
+}
+.jetlinks-edit-table-context-menu .ant-menu {
+  border-right: none;
+}
+.jetlinks-edit-table-context-menu .ant-menu .ant-menu-item {
+  margin: 0;
+  height: 32px;
+}
+.jetlinks-edit-table-context-menu .ant-menu .ant-menu-item.danger {
+  color: #ff4d4f;
+}
+.jetlinks-edit-table-context-menu .ant-menu-item-active {
+  background-color: var(--ant-primary-1);
+}
+.edit-table-search-header {
+  display: flex;
+  justify-content: space-between;
+}
+.edit-table-search-result-total {
+  color: #1890ff;
+}
+.jetlinks-edit-table-horizontal-scroll {
+  height: 17px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 4;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-viewport {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  position: relative;
+  flex: 1 1 0;
+  height: 17px;
+  width: 100%;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-viewport > div {
+  height: 17px;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-hidden {
+  height: 100%;
+  overflow-x: hidden;
+}

package/lib/EditTable/style/index.less

@@ -0,0 +1,41 @@
+@import "ant-design-vue/lib/style/themes/index.less";
+@import "./table.less";
+@import "./body.less";
+@import "./header.less";
+@import "./group.less";
+@import "./form.less";
+@import "./menu.less";
+
+.edit-table-search-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.edit-table-search-result-total {
+  color: @primary-color;
+}
+
+.jetlinks-edit-table-horizontal-scroll {
+  height: 17px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 4;
+
+  .jetlinks-edit-table-horizontal-scroll-viewport {
+    overflow-y: hidden;
+    overflow-x: scroll;
+    position: relative;
+    flex: 1 1 0;
+    height: 17px;
+    width: 100%;
+
+    > div {
+      height: 17px;
+    }
+  }
+
+  .jetlinks-edit-table-horizontal-scroll-hidden {
+    height: 100%; overflow-x: hidden;
+  }
+}

package/lib/EditTable/style/menu.less

@@ -0,0 +1,25 @@
+.jetlinks-edit-table-context-menu{
+  position: fixed;
+  box-shadow: 0 0 12px rgba(0, 0, 0 ,.2);
+  border-radius: 4px;
+  overflow: hidden;
+  width: 192px;
+  padding: 4px;
+  background-color: #fff;
+  .ant-menu {
+    border-right: none;
+
+    .ant-menu-item {
+      margin: 0;
+      height: 32px;
+
+      &.danger {
+        color: @error-color;
+      }
+    }
+  }
+
+  .ant-menu-item-active {
+    background-color: var(--ant-primary-1);;
+  }
+}

package/lib/EditTable/style/table.less

@@ -0,0 +1,47 @@
+.jetlinks-edit-table-wrapper {
+  background: #fff;
+  height: 100%;
+  position: relative;
+
+  &.table-full-screen {
+    padding: 24px;
+  }
+
+  .jetlinks-edit-table {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+    background: #fafafa;
+    transition: background-color .3s ease;
+    overflow: auto hidden;
+
+    .jetlinks-edit-table-header {
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .jetlinks-edit-table-body {
+      background-color: #fff;
+      overflow-y: hidden;
+      position: relative;
+      height: 100%;
+      width: 100%;
+      flex: 1 1 auto;
+      flex-direction: row;
+    }
+
+    .jetlinks-table-horizontal-scroll {
+      width: 100%;
+      height: 15px;
+      min-height: 15px;
+      max-height: 15px;
+      display: flex;
+
+      .jetlinks-table-horizontal-scroll-bar {
+        height: 100%;
+        overflow-x: scroll;
+      }
+    }
+  }
+}

package/lib/Ellipsis/style/index.css

@@ -0,0 +1,17 @@
+.j-ellipsis {
+  overflow: hidden;
+  vertical-align: bottom;
+}
+.j-ellipsis-cursor {
+  cursor: pointer;
+}
+.j-ellipsis-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+.j-ellipsis-deep {
+  max-height: 380px;
+  -webkit-line-clamp: 17;
+  text-overflow: ellipsis;
+}

package/lib/Ellipsis/style/index.less

@@ -0,0 +1,20 @@
+.j-ellipsis {
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.j-ellipsis-cursor {
+  cursor: pointer;
+}
+
+.j-ellipsis-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.j-ellipsis-deep {
+  max-height: 380px;
+  -webkit-line-clamp: 17;
+  text-overflow: ellipsis;
+}

package/lib/FlameGraph/FlameGraph.js

@@ -117,9 +117,10 @@ const __sfc_main__ = Object.assign({
                             }),
                             _createVNode(_component_a_button, { onClick: invert }, {
                                 default: _withCtx(() => _cache[0] || (_cache[0] = [
-                                    _createTextVNode("反转")
+                                    _createTextVNode("反转", -1 /* CACHED */)
                                 ])),
-                                _: 1 /* STABLE */
+                                _: 1 /* STABLE */,
+                                __: [0]
                             })
                         ]),
                         _: 1 /* STABLE */

package/lib/FlameGraph/style/index.css

@@ -0,0 +1,43 @@
+.j-flame-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  /* 修改矩形块样式 */
+}
+.j-flame-graph .actions {
+  position: sticky;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: #fff;
+}
+.j-flame-graph .d3-flame-graph {
+  margin-top: 40px;
+}
+.j-flame-graph .d3-flame-graph rect {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+.j-flame-graph .d3-flame-graph text {
+  font-size: 18px;
+  fill: #333;
+}
+.j-flame-graph .frame {
+  cursor: pointer;
+}
+.j-flame-graph .frame:hover {
+  fill: #E600E6;
+}
+.j-flame-graph .frame:hover rect {
+  fill: #ffffe0;
+}
+.j-flame-graph .frame div {
+  color: #000;
+}
+.j-flame-graph .j-flame-graph-search {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 200px;
+}

package/lib/FlameGraph/style/index.less

@@ -0,0 +1,52 @@
+.j-flame-graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .actions {
+    position: sticky;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    background: #fff;
+  }
+  .d3-flame-graph {
+    margin-top: 40px;
+  }
+  /* 修改矩形块样式 */
+  .d3-flame-graph {
+    rect {
+      stroke: #fff;
+      stroke-width: 1px;
+    }
+
+    text {
+      font-size: 18px;
+      fill: #333;
+    }
+  }
+
+  .frame {
+    cursor: pointer;
+  }
+  .frame:hover {
+    fill: #E600E6;
+  }
+  .frame:hover rect {
+    fill: #ffffe0;
+  }
+  .frame div {
+    color: #000
+  }
+
+  .j-flame-graph-search {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 200px;
+  }
+}
+
+
+
+

package/lib/Icon/icon.js

@@ -11,8 +11,7 @@ var _vue = require("vue");
 var _iconsVue = _interopRequireWildcard(require("@ant-design/icons-vue/lib/icons"));
 var aIcon = _iconsVue;
 var _constants = require("../utils/constants");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var MyIcon = (0, _iconsVue.createFromIconfontCN)({
   scriptUrl: '//at.alicdn.com/t/c/font_3183515_i7oma42he.js' // 在 iconfont.cn 上生成
 });

package/lib/MonacoEditor/style/index.css

@@ -0,0 +1,4 @@
+.j-monaco-editor {
+  min-height: 50px;
+  height: 100%;
+}

package/lib/MonacoEditor/style/index.less

@@ -0,0 +1,4 @@
+.j-monaco-editor {
+  min-height: 50px;
+  height: 100%;
+}

package/lib/PermissionButton/index.js

@@ -86,12 +86,12 @@ var PermissionButton = (0, _vue.defineComponent)({
         buttonProps.onClick = /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee() {
           var _props$popConfirmBefo;
           var _popConfirm;
-          return _regenerator.default.wrap(function _callee$(_context) {
+          return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                _context.next = 2;
+                _context.next = 1;
                 return ((_props$popConfirmBefo = props.popConfirmBefore) === null || _props$popConfirmBefo === void 0 ? void 0 : _props$popConfirmBefo.call(props)) || popConfirm;
-              case 2:
+              case 1:
                 _popConfirm = _context.sent;
                 if (context.components) {
                   (0, _confirm.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _popConfirm), {}, {
@@ -111,7 +111,7 @@ var PermissionButton = (0, _vue.defineComponent)({
                     }
                   });
                 }
-              case 4:
+              case 2:
               case "end":
                 return _context.stop();
             }

package/lib/ProLayout/Basic/BasicLayout.js

@@ -20,8 +20,7 @@ var _RouteContext = require("../RouteContext");
 var _util = require("../util");
 var _lib = require("ant-design-vue/lib/");
 var _excluded = ["pure", "onCollapse", "onOpenKeys", "onSelect", "onMenuClick"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var basicLayoutProps = exports.basicLayoutProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _SiderMenu.siderMenuProps), _TopHeader.baseHeaderProps), _Header.headerViewProps), {}, {
   pure: Boolean,
   loading: Boolean,

package/lib/ProLayout/Basic/BasicLayout.less

@@ -0,0 +1,66 @@
+@import '../style/default.less';
+
+.@{basicLayout-prefix-cls} {
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .@{ant-prefix}-layout-header {
+    &.@{ant-prefix}-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+
+    .@{ant-prefix}-pro-page-container {
+      margin: -24px -24px 0;
+    }
+
+    &-disable-margin {
+      margin: 0;
+
+      .@{ant-prefix}-pro-page-container {
+        margin: 0;
+      }
+    }
+
+    > .@{ant-prefix}-layout {
+      max-height: 100%;
+    }
+  }
+
+  // children should support fixed
+  .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-fix-siderbar {
+    height: 100vh;
+    overflow: hidden;
+    transform: rotate(0);
+  }
+
+  .@{basicLayout-prefix-cls}-has-header {
+    // tech-page-container
+    .tech-page-container {
+      height: calc(100vh - @pro-layout-header-height);
+    }
+
+    .@{basicLayout-prefix-cls}-is-children.@{basicLayout-prefix-cls}-has-header {
+      .tech-page-container {
+        height: calc(100vh - @pro-layout-header-height -
+        @pro-layout-header-height);
+      }
+
+      .@{basicLayout-prefix-cls}-is-children {
+        min-height: calc(100vh - @pro-layout-header-height);
+
+        &.@{basicLayout-prefix-cls}-fix-siderbar {
+          height: calc(100vh - @pro-layout-header-height);
+        }
+      }
+    }
+  }
+}

package/lib/ProLayout/Basic/Header.less

@@ -0,0 +1,8 @@
+@import '../style/default.less';
+
+@pro-layout-fixed-header-prefix-cls: ~'@{ant-prefix}-pro-fixed-header';
+
+.@{pro-layout-fixed-header-prefix-cls} {
+    z-index: 9;
+    width: 100%;
+}