@sellmate/design-system 0.0.35 → 0.0.37

package/dist/collection/components/sd-popover/sd-popover.js

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'c589194a99064c6d4dcba4a3041fabc86e629190' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '8ad8df3d02c2889a404366a7a1486ee001415423', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'a45f59c40dfbdbe3ad70ea4733459841ddbd6ca2', class: {
+        return (h(Fragment, { key: 'f7d868fe01f6581696734d08170c59d6e2d66c94' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '7846b8c93a38969514390a1ea40d5afe6c200de2', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'be1329e93d0ab1e66bf575a094a25290bddd5eeb', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '37666b148d9638512cdcf9880b4d4f928c617398', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '34801580a143b2a9a0e4fd2a754e3b7df84715bb' })), h("div", { key: 'f6ed764d4c50b2573188164f387df4ec4df04430', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'd038bbede4912070b58772daac3f264908c7b0ef', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0bc6407b1deb2fdc2194fe8b45af199c797ad9de', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '77f310b36aabbd66ed92cbf3caa9edf619875f0e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'd48a8945ff2419ff4f45f62bddc4b56cccf608e2', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '821ce775843d2958b2288f7deba565b1b5aa4cda', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '1c3127247ddc6044e53a75d4579125e1daab032a', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd1024814728db04093907521b580bdf0359e9aed' })), h("div", { key: '2e2fcca71d8ac944c55c013eb14cd5b59567aa6e', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'cc6c83b6fa37e70a7deb430720693592b8a41e71', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'f91f9a3f1a45485743d76cae7c016bd63564613d', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ffd219508aa2f6b3b28f1491091ce1a8fbb2d6aa', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '75697c3987694b0f27626b3731b93b84cc9c81a6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'fc139a83b11abf239e017dd0d9caf1568c36c99d', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-portal/sd-portal.js

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '00d9c45ad016f874250e3ca637abee455860d479' });
+        return h("slot", { key: 'c7f389fa51f356d455aa3b7df24d0b8e1de36bb8' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-progress/sd-progress.js

@@ -13,10 +13,10 @@ export class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'f086ff0b5357c038b83f8b8b457cd7aa3c99ba03', style: {
+        return (h(Host, { key: '1bbd63533b614796a5eaf2009a3b2be2e33a0fc5', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2e8ce5a1fe1206f95f4268eaa571264f7daa7b8f', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '94fd4a76b8fcc32b2a6f0575ffcc819c7e908d28', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '87e4810a3c5058cc0969748d6cdf83b0fdcf9d8e' }, h("div", { key: '8d502e3a2ebdd8810abfdfd8ed317554e1e89f6f', class: {
+        return (h(Host, { key: 'c0d9e91485cd89b58bca238e394feebfc50c76e1' }, h("div", { key: '6a02be748e4ca5a2a64200872cfeeda8065a09b4', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '3c3cd8714a8d2a7e3f7ca5057c19b281488aa159', style: style }, h("div", { key: '877950e58b715002bb1976b11ead8abd41984534', class: {
+        return (h(Host, { key: '86eb209469905a2992fc45ad246420d98df6e78a', style: style }, h("div", { key: 'a85fc4b2bb5dbf951a1388704923672bd1430355', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '2839ca7bfa830226ace0a32e8deb62c03f1feb62', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '01e1004445aecf2b1f8d1808f6b80cbc675bf378', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '4ce025571bbc415a03d2ec9a2c27d6867571bbe1', class: {
+        return (h("div", { key: 'cd1e638e01313eacc2253ef9f341eeeef90190d9', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ea7682119a423a0a49fb69ef4ae775330552ffc5', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'd8ba6537c8ebdbc3b3a1a132b1c0d2e53a23aac1', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '85a5ce3861e43d3cbde9cbf82c1d4c51439199f2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '1e4d066daf72f8a1b00927206bda0385bd5a28f0', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'd15d031152d6e10f47068567ab3fc954766a7557', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '82c8efa653a4b32a2991b2416996f67ea9b33bae', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'df4f05045d0e14310a79ed9c33486dd98887c771', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'd8995c3f266b0fb6d686e8713e304b73f1e73f4f', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: '2db73c5270442ed9080a645fc6ec373764475993' }, h("slot", { key: '23199e678de6d2df0fd476b14da9eb9340ac040d' })));
+        return (h(Host, { key: '8c5fd86ada95e5b0e87ba041fc4439596c8db6bf' }, h("slot", { key: 'a1d7800eb8856cb4a0d4c958b9163bf101691bb8' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '7c60c5073b921e3fc62d5738196f9b89710da055', role: "cell", class: {
+        return (h(Host, { key: '0521ae774fb04209ae95584aac87337a825546a7', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: 'af4093382842e7fafdd1d061e61e3a889237fab5' })));
+            }, style: this.tdStyle }, h("slot", { key: 'd50eb6a72b8291bd349940430c17fa523f7e2a94' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-th/sd-th.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: '8d7263800b22a88f28e8953827aaf69307ea28ef', role: "columnheader" }, h("slot", { key: '57151efcfb335814fc8d59a71496ea85cdc79ae9' })));
+        return (h(Host, { key: 'f906ec4174e7829e25f34c7e62484f8a5a9ad282', role: "columnheader" }, h("slot", { key: '165aac26eeedcdf772e3a751a98ae2c8a84016b6' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: 'a3a60dc016314ae086ccba52c4f1967db982553e', role: "row" }, h("slot", { key: 'ced44913de272afa61850e35b2a0d070d32b41ab' })));
+        return (h(Host, { key: '86aa7ec46f1b8b9c29bda9e10604f6ddf0ca7d1c', role: "row" }, h("slot", { key: 'c13e2405d9908152ecd09edb7c286717adccf56a' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table-backup/sd-table-backup.css

@@ -0,0 +1,244 @@
+.sd-table__wrapper .sd-table__container .sd-table__middle {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar {
+  opacity: 0;
+  background: #e5e5e5;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical {
+  width: 8px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb {
+  height: 80px;
+  background-color: #cccccc;
+  border-radius: 4px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.sd-table__wrapper {
+  height: var(--table-height, auto);
+  width: var(--table-width, 100%);
+  color: #222222;
+}
+.sd-table__wrapper .sd-table__container {
+  width: 100%;
+  height: var(--table-height, auto);
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle {
+  overflow: auto;
+  position: relative;
+  will-change: scroll-position;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
+  height: var(--table-height, auto);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle--loading {
+  overflow: hidden !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
+  background-color: white;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
+  width: 52px !important;
+  max-width: 52px !important;
+  min-width: 52px !important;
+  padding: 0 10px 0 24px;
+  text-align: left;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
+  position: sticky;
+  background-color: #f5faff;
+  z-index: 110 !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
+  left: var(--sticky-left-offset, 0);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
+  right: var(--sticky-right-offset, 0);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
+  position: sticky;
+  z-index: 102;
+  background-color: #f5faff;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
+  position: sticky;
+  z-index: 101;
+  background-color: white;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
+  overflow: visible;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  right: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset 12px 0 20px -25px;
+  opacity: 1;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
+  overflow: visible;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset -12px 0 20px -25px;
+  opacity: 1;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead {
+  opacity: 0.4;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
+  border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead {
+  height: 36px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr {
+  width: 100%;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
+  background: #f5faff;
+  height: 36px;
+  padding: 0 16px;
+  font-weight: 500;
+  vertical-align: middle;
+  border-bottom: 1px solid #e1e1e1;
+  -webkit-user-select: none;
+  user-select: none;
+  position: relative;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 4px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
+  justify-content: flex-start;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
+  justify-content: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
+  justify-content: flex-end;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  cursor: col-resize;
+  z-index: 3;
+  border-left: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
+  height: 44px;
+  padding: 0 16px;
+  border-bottom: 1px solid #e1e1e1;
+  background: white;
+  vertical-align: middle;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
+  text-align: left;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
+  text-align: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
+  text-align: right;
+}
+.sd-table__wrapper .sd-table__container .sd-table__bottom {
+  background: white;
+  text-align: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data {
+  padding-top: 15%;
+  color: #888888;
+}
+.sd-table__wrapper .sd-table__pagination {
+  position: relative;
+  background: #f9f9f9;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e1e1e1;
+  border-top: none;
+  border-radius: 8px;
+}
+.sd-table__wrapper .sd-table__pagination sd-select {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}