raise-common-lib 0.0.245 → 0.0.247

package/src/assets/style/reset/grid.scss

@@ -0,0 +1,985 @@
+.e-grid,
+.e-treegrid {
+  font-family: var(--rs-font-family);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0;
+  .e-spinner-pane {
+    display: none !important; // 隐藏默认的loading spinner
+  }
+  .e-summarycell {
+    padding-right: 36px !important;
+  }
+  .e-gridheader {
+    height: auto;
+    border-top: none;
+    border-bottom: none;
+    padding-right: 16px !important;
+    .e-headercell {
+      &:first-child {
+        padding-left: 8px;
+      }
+      height: 32px;
+      padding: 4px 8px;
+      --header-column-width: 0px;
+      --header-sort-width: 0px;
+
+      &.e-defaultcursor:first-child + .e-headercell {
+        padding-left: 0;
+      }
+
+      &.e-freezeleftborder {
+        border: none;
+      }
+
+      .e-rhandler {
+        border-right: 0 !important;
+      }
+
+      .e-rsuppress {
+        border-right: 0 !important;
+      }
+
+      .e-icons.e-columnmenu {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        padding: 4px;
+        border-radius: 4px;
+        margin: 0;
+        float: unset;
+      }
+      .e-icons.e-filtermenudiv {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        padding: 4px;
+        border-radius: 4px;
+        margin: 0;
+        float: unset;
+      }
+      .e-headerchkcelldiv .e-checkbox-wrapper {
+        .e-icons {
+          margin: 0;
+          display: none;
+          &.e-check,
+          &.e-stop {
+            display: inline-block;
+            color: #fff !important;
+            background-color: var(--rs-active-color);
+            border-color: var(--rs-active-color);
+          }
+        }
+      }
+      &:hover {
+        .e-headerchkcelldiv .e-checkbox-wrapper .e-icons {
+          display: inline-block;
+        }
+      }
+
+      .e-headercelldiv {
+        height: 24px;
+        padding: 4px !important;
+        padding-right: calc(
+          4px + var(--header-column-width) + var(--header-sort-width)
+        ) !important;
+        margin: 0 !important;
+
+        border-radius: 4px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: center;
+
+        color: #44566c;
+        font-family: Arial;
+        font-size: var(--rs-grid-header-cell-font-size);
+        font-weight: 700;
+
+        &:hover {
+          background-color: #f6faff;
+        }
+
+        &.e-headerchkcelldiv {
+          padding: 0 !important;
+
+          .e-checkbox-wrapper {
+            width: 100%;
+            position: static;
+
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            align-items: center;
+
+            .e-label {
+              display: none;
+            }
+          }
+        }
+
+        .e-headertext {
+          display: block;
+          width: 100%;
+          overflow: hidden;
+        }
+      }
+
+      &.e-ellipsistooltip .e-headercelldiv .e-headertext {
+        text-overflow: ellipsis;
+      }
+
+      .e-sortfilterdiv {
+        float: none;
+        clear: both;
+
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        margin: 0 !important;
+
+        position: absolute;
+        top: 50%;
+        right: 32px;
+        transform: translateY(-50%);
+
+        &.e-ascending::before,
+        &.e-descending::before {
+          content: " ";
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-image: url("/assets/img/table-sort-arrow.svg");
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+
+        &.e-ascending::before {
+          transform: rotate(180deg);
+        }
+      }
+
+      &[aria-sort]:not(.e-rightalign):not([aria-sort="none"]) {
+        --header-sort-width: 16px;
+      }
+
+      &.e-mousepointer {
+        --header-column-width: 24px;
+      }
+
+      &.e-rightalign {
+        .e-headercelldiv {
+          justify-content: flex-end;
+        }
+
+        &[aria-sort]:not([aria-sort="none"]) .e-headercelldiv {
+          padding-left: 20px !important;
+        }
+
+        .e-sortfilterdiv {
+          right: auto;
+          left: 8px;
+        }
+      }
+
+      .e-headerchkcelldiv + .e-sortfilterdiv {
+        display: none;
+      }
+
+      .e-columnmenu {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+
+        padding: 4px;
+        border-radius: 4px;
+
+        &:hover {
+          background-color: #edf5ff;
+        }
+
+        &::before {
+          content: url("/assets/img/table-column-menu.svg");
+          display: block;
+          width: 16px;
+          height: 16px;
+        }
+
+        &.e-filtered {
+          background-color: rgba(31, 123, 255, 0.1);
+        }
+      }
+
+      &:not(.e-rcursor):hover .e-rhandler {
+        width: 8px;
+        border-right: 1px solid #dbe1e7;
+
+        &:hover {
+          border-color: #1f7bff;
+        }
+      }
+    }
+  }
+  .e-rowdragdrop {
+    border-bottom: 1px solid #eaedf0;
+    border-top: 0;
+  }
+  .e-rowcell {
+    padding: 2px 12px;
+    border-top: 0;
+    border-bottom: 1px solid #eaedf0;
+    color: var(--rs-text-color) !important;
+    font-family: Arial;
+    font-size: var(--rs-grid-row-cell-font-size);
+    font-weight: 400;
+    line-height: 24px;
+    height: var(--rs-grid-row-height) !important;
+    &.e-rightalign{
+      padding-right: 36px !important;
+    }
+    &.e-updatedtd {
+      background-color: #edf5ff; // selected bg
+    }
+    &.e-leftfreeze {
+      border-right: none;
+      border-left: none;
+    }
+    &.e-active {
+      background-color: #edf5ff; // selected bg
+      &.e-gridchkbox {
+        .e-checkbox-wrapper {
+          display: block;
+        }
+      }
+      .rowcell-menu {
+        display: block;
+      }
+    }
+    .rowcell-menu {
+      display: none;
+    }
+    &.e-gridchkbox {
+      &.e-active {
+        .e-checkbox-wrapper {
+          display: flex;
+        }
+      }
+      .e-checkbox-wrapper {
+        display: none;
+      }
+    }
+
+    &.e-gridchkbox {
+      .e-checkbox-wrapper {
+        width: 100%;
+        position: static;
+
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+
+        .e-label {
+          display: none;
+        }
+        .e-icons.e-check {
+          color: #fff !important;
+          background-color: var(--rs-active-color);
+          border-color: var(--rs-active-color);
+        }
+      }
+      padding: 0;
+      &:first-child + .e-rowcell {
+        padding-left: 4px;
+      }
+    }
+    &[style*="text-align: right;"] {
+      padding-right: 36px;
+    }
+
+    .e-treecolumn-container {
+      display: flex !important;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      .e-none {
+        flex: none;
+        display: block !important;
+
+        &[style*="width: 10px"] {
+          width: 12px !important;
+        }
+
+        &[style*="width: 4px"] {
+          width: 8px !important;
+        }
+      }
+
+      .e-treegridexpand,
+      .e-treegridcollapse {
+        flex: none;
+        width: 16px;
+        height: 16px;
+
+        &::before {
+          content: url("/assets/img/grid-menu-arrow-right.svg");
+        }
+      }
+    }
+  }
+  .e-row
+    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-leftfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row
+    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-rightfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row
+    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-unfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row
+    tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-fixedfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-leftfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-rightfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-unfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell),
+  .e-grid.e-gridhover
+    .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-fixedfreeze:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell) {
+    background-color: var(--rs-grid-row-hover-bg); // hover bg
+  }
+
+  td.e-active.e-leftfreeze:not(.e-updatedtd),
+  td.e-active.e-unfreeze:not(.e-updatedtd),
+  td.e-active.e-rightfreeze:not(.e-updatedtd),
+  td.e-active.e-fixedfreeze:not(.e-updatedtd),
+  .e-columnselection.e-leftfreeze:not(.e-updatedtd),
+  .e-columnselection.e-unfreeze:not(.e-updatedtd),
+  .e-columnselection.e-rightfreeze:not(.e-updatedtd),
+  .e-columnselection.e-fixedfreeze:not(.e-updatedtd) {
+    background-color: #edf5ff; // selected bg
+  }
+  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
+      .e-updatedtd
+    ):not(.e-indentcell) {
+    &.e-gridchkbox {
+      .e-checkbox-wrapper {
+        display: flex;
+      }
+    }
+    .rowcell-menu {
+      display: block;
+    }
+  }
+  .e-row:not(:hover) {
+    kt-grid-action,
+    rs-grid-action {
+      display: none;
+    }
+  }
+
+  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+    .e-rowcell.e-active:not(.e-cellselectionbackground):not(.e-updatedtd):not(
+      .e-indentcell
+    ) {
+    background-color: #e4efff; //selected + hover bg
+  }
+
+  .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
+    box-shadow: none !important;
+  }
+  .e-gridcontent {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    .e-content {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll !important;
+      overflow-x: scroll !important;
+    }
+  }
+
+  .first-action-column {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    width: 100%;
+
+    .first-column-text {
+      flex: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &.flex-text {
+        display: flex;
+        flex-flow: row nowrap;
+      }
+
+      .first-column-alert {
+        width: 4px;
+        margin-right: 8px;
+        color: red;
+      }
+    }
+  }
+}
+
+.e-pager {
+  padding: 12px 0 0 !important;
+  border: 0;
+  div {
+    vertical-align: middle;
+  }
+  .e-icons {
+    border: none;
+    border-radius: 6px;
+    padding: 4px !important;
+
+    margin-right: 6px;
+    &:hover,
+    &.e-focused {
+      background-color: #1f7bff0a;
+    }
+    &.e-disable {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    &::before {
+      display: block;
+      width: 16px;
+      height: 16px;
+    }
+    &.e-first,
+    &.e-mfirst {
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+      }
+    }
+
+    &.e-prev,
+    &.e-mprev {
+      margin: 0 16px 0 6px;
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrow-left.svg");
+      }
+    }
+
+    &.e-next,
+    &.e-mnext {
+      margin: 0 12px 0 10px !important;
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrow-left.svg");
+        transform: rotate(180deg);
+      }
+    }
+    &.e-last,
+    &.e-mlast {
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .e-numericitem {
+    color: #44566c;
+  }
+  .e-pagercontainer {
+    border: 0;
+    vertical-align: top;
+    overflow: visible !important; // 处理mac电脑遮挡
+
+    .e-icons,
+    .e-spacing {
+      border: none;
+      border-radius: 6px;
+      padding: 4px;
+      margin-right: 6px;
+      &:hover,
+      &.e-focused {
+        background-color: #1f7bff0a;
+      }
+
+      &.e-disable {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+    }
+
+    .e-spacing {
+      &.e-pp {
+        margin-right: 12px;
+      }
+
+      &.e-np {
+        margin-left: 12px;
+      }
+
+      &.e-pp.e-disable,
+      &.e-np.e-disable {
+        display: none;
+      }
+    }
+
+    .e-numericcontainer {
+      vertical-align: middle;
+
+      .e-numericitem {
+        border: 1px solid transparent;
+        padding: 4px;
+        min-width: 24px;
+        color: #44566c;
+
+        font-family: Arial;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
+        &.e-currentitem {
+          border-color: #1f7bff66;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  .e-pagesizes {
+    display: inline-block;
+    vertical-align: middle;
+    .e-pagerdropdown {
+      margin: 0 8px 0 6px;
+      width: 60px;
+      height: 24px;
+
+      .e-input-group {
+        height: 24px;
+        padding: 0 0 0 8px;
+
+        border-radius: 4px;
+        border: 1px solid #eaedf0;
+        background-color: #fff;
+
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        &.e-icon-anim,
+        &:focus-within {
+          border-color: #1f7bffb8;
+          box-shadow: none;
+        }
+
+        &:hover {
+          border-color: #1f7bff80;
+          box-shadow: 0px 0px 3px 0px #1f7bff66;
+        }
+
+        &.e-icon-anim:hover,
+        &:not(.e-disabled):focus-within:hover {
+          border-color: #1f7bffb8;
+        }
+
+        .e-input {
+          height: 100%;
+          padding: 0 !important;
+
+          color: #062c4f !important;
+          font-family: Arial;
+          font-size: 11px !important;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 12px;
+        }
+      }
+    }
+  }
+
+  .e-pagerconstant {
+    vertical-align: middle;
+    margin: 0;
+
+    color: #929dab;
+    font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+  }
+  .e-parentmsgbar {
+    color: #929dab;
+    font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    padding-top: 4px !important;
+    padding-bottom: 0 !important;
+    @media (max-width: 769px) {
+      width: auto !important;
+    }
+  }
+}
+.e-grid-menu {
+  .e-menu-parent {
+    .e-menu-item {
+      font-family: var(--rs-font-family);
+      font-size: var(--rs-grid-row-cell-font-size);
+      color: #44566c;
+      &.e-focused,
+      &.e-selected {
+        background-color: #f6faff;
+        color: #44566c;
+      }
+      .e-icons.e-check {
+        background-color: var(--rs-active-color);
+        border-color: var(--rs-active-color);
+      }
+      .e-label {
+        font-family: var(--rs-font-family);
+        font-size: var(--rs-grid-row-cell-font-size);
+        color: #44566c;
+      }
+    }
+  }
+}
+.e-checkboxfilter.e-filter-popup {
+  .e-searchcontainer {
+    .e-searchbox {
+      .e-input-group {
+        box-shadow: none !important;
+        .e-searchclear:hover {
+          background-color: var(--rs-active-color);
+          border-color: var(--rs-active-color);
+        }
+      }
+    }
+    .e-checkboxlist {
+      .e-ftrchk {
+        height: auto;
+        line-height: 26px;
+        padding: 0;
+        padding-left: 8px;
+        .e-chk-hidden {
+          display: none;
+        }
+        .e-icons.e-check,
+        .e-icons.e-stop {
+          background-color: var(--rs-active-color);
+          border-color: var(--rs-active-color);
+        }
+        .e-label {
+          font-family: var(--rs-font-family);
+          font-size: var(--rs-grid-row-cell-font-size);
+          color: #44566c;
+        }
+        &:hover {
+          background-color: #f6faff;
+        }
+        &.e-chkfocus {
+          background-color: #f6faff;
+        }
+      }
+    }
+  }
+  .e-footer-content {
+    display: flex;
+    justify-content: flex-end;
+    .e-btn {
+      font-family: var(--rs-font-family);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 6px;
+      font-style: normal;
+      border: 1px solid #adb5bd !important;
+      background: transparent !important;
+      color: var(--rs-cancel-btn-color) !important;
+      height: 32px;
+      min-width: 80px;
+      padding: 0 10px;
+      font-size: 12px;
+      border-radius: 4px;
+      box-shadow: none !important;
+      line-height: normal;
+      &.e-primary {
+        color: #fff !important;
+        border-color: var(--rs-primary-btn-bg) !important;
+        background: var(--rs-primary-btn-bg) !important;
+        font-weight: 700;
+        &:not([disabled]):hover,
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+          border-color: var(--rs-primary-btn-hover-bg) !important;
+          background: var(--rs-primary-btn-hover-bg) !important;
+          color: #fff !important;
+        }
+        &[disabled] {
+          color: #fff !important;
+          background: var(--rs-primary-btn-bg) !important;
+          border-color: var(--rs-primary-btn-bg) !important;
+        }
+      }
+    }
+  }
+}
+.grid-loading {
+  .e-gridcontent {
+    .e-rowcell {
+      border-bottom: 0;
+      position: relative;
+      color: transparent !important;
+
+      .text-ellipsis,
+      .e-checkbox-wrapper,
+      img,
+      div,
+      span,
+      .mat-chip-list-wrapper {
+        visibility: hidden !important;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: calc(200% + 200px);
+        animation: e-shimmer-wave 1s infinite;
+        animation-timing-function: ease-in-out;
+        background-image: linear-gradient(
+          90deg,
+          transparent calc(50% - 100px),
+          rgb(255, 255, 255) 50%,
+          transparent calc(50% + 100px)
+        );
+        transition: 0.5s;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0px;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 15px;
+        border-radius: 4px;
+        background: linear-gradient(
+            0deg,
+            rgba(103, 80, 164, 0.08),
+            rgba(103, 80, 164, 0.08)
+          ),
+          white;
+      }
+    }
+  }
+}
+
+.e-grid.e-gridhover
+  .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover
+  .e-row
+  tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover:not(.e-rowdrag)
+  .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
+  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover
+  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
+  .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover:not(.e-rowdrag)
+  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
+  .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-rtl
+  .e-gridhover
+  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
+  .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover
+  .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover
+  .e-dragindentcell:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell),
+.e-grid.e-gridhover
+  .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover
+  .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell) {
+  background-color: var(--rs-grid-row-hover-bg); // hover bg
+}
+
+.e-contextmenu-wrapper .e-contextmenu.e-colmenu,
+.e-contextmenu-container .e-contextmenu.e-colmenu {
+  padding: 8px 0;
+  border: none;
+
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+
+  .e-menu-item {
+    height: 28px;
+    padding: 6px 48px 6px 16px;
+
+    color: #44566c;
+    font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 8px;
+
+    &.e-blankicon {
+      padding-left: 40px !important;
+    }
+
+    &.e-selected,
+    &.e-focused {
+      background-color: rgba(31, 123, 255, 0.08);
+    }
+
+    .e-icons {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      padding: 0;
+
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+
+      &::before {
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+      }
+
+      &.e-icon-ascending::before {
+        content: url("/assets/img/grid-menu-arrow-up.svg");
+      }
+
+      &.e-icon-descending::before {
+        content: url("/assets/img/grid-menu-arrow-up.svg");
+        transform: rotate(180deg);
+      }
+
+      &.e-icon-filter::before {
+        content: url("/assets/img/grid-menu-filter.svg");
+      }
+
+      &.e-caret {
+        position: absolute;
+        top: 6px;
+        right: 16px;
+
+        &::before {
+          content: url("/assets/img/grid-menu-arrow-right.svg");
+        }
+      }
+    }
+  }
+
+  & + .e-menu-parent {
+    padding: 8px 0;
+
+    border-radius: 8px;
+    background-color: #fff;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+
+    .e-menu-item {
+      height: 28px;
+      padding: 0 8px;
+
+      &.e-focused {
+        background-color: rgba(31, 123, 255, 0.08);
+      }
+
+      .e-checkbox-wrapper {
+        height: 100%;
+
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        .e-frame {
+          flex: none;
+          margin: 5px;
+        }
+
+        .e-label {
+          margin: 0;
+          padding: 0 6px;
+
+          color: #44566c !important;
+          font-family: Arial;
+          font-size: 11px !important;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 14px;
+        }
+      }
+    }
+  }
+}