@angular-generic-table/column-settings/css/column-settings.css

angular-generic-table extension that makes it easy to toggle column visibility and reoder columns.

.gt-column-settings {
  position: relative; }
  .gt-column-settings .gt-overlay {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    opacity: 0.5;
    z-index: 3; }

.gt-column-settings-panel {
  position: absolute;
  width: 100%; }
  .gt-column-settings-panel .gt-column-settings-header {
    position: relative;
    z-index: 4;
    overflow: auto; }
  .gt-column-settings-panel .gt-column-settings-item-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    position: relative;
    z-index: 4;
    width: 100%;
    min-height: 90px;
    overflow-x: auto; }

.gt-column-settings-item span {
  cursor: move; }

.gt-column-settings-item:hover span {
  cursor: pointer; }

.gt-column-settings-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  filter: alpha(opacity=80); }

.gu-hide {
  display: none !important; }

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important; }

.gu-transit {
  opacity: 0.2;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20); }

@media (max-width: 576px) {
  /*.gt-column-settings-panel {
    width: 100vw !important;
    height: 100vh !important;
    margin-top: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
  }*/
  .gt-column-settings-item-wrapper {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    overflow: auto;
    min-height: 100px; } }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3Njc3MvY29sdW1uLXNldHRpbmdzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU0E7RUFDQyxtQkFBa0IsRUFhbEI7RUFkRDtJQUlFLFlBQVc7SUFDWCxlQUFjO0lBQ2QsWUFBVztJQUNYLGFBQVk7SUFDWixpQkFBZ0I7SUFDaEIsbUJBQWtCO0lBQ2xCLE9BQU07SUFDTixhQUFZO0lBQ1osV0FBVSxFQUNWOztBQUdGO0VBQ0MsbUJBQWtCO0VBQ2xCLFlBQVcsRUFtQlg7RUFyQkQ7SUFLRSxtQkFBa0I7SUFDbEIsV0FBVTtJQUNWLGVBQWMsRUFDZDtFQVJGO0lBV0UscUJBQWE7SUFBYixxQkFBYTtJQUFiLGNBQWE7SUFDYiw2QkFBc0I7SUFBdEIsOEJBQXNCO1FBQXRCLDJCQUFzQjtZQUF0Qix1QkFBc0I7SUFDdEIsd0JBQTJCO1FBQTNCLHFCQUEyQjtZQUEzQiw0QkFBMkI7SUFDM0IsMEJBQXlCO1FBQXpCLDBCQUF5QjtJQUN6QixtQkFBa0I7SUFDbEIsV0FBVTtJQUNWLFlBQVc7SUFDWCxpQkFBZ0I7SUFDaEIsaUJBQWdCLEVBQ2hCOztBQUdGO0VBQ0MsYUFBWSxFQUNaOztBQUNEO0VBQ0MsZ0JBQWUsRUFDZjs7QUFFRDtFQUNDLG9CQUFjO01BQWQsbUJBQWM7VUFBZCxlQUFjLEVBQ2Q7O0FBRUQ7RUFDQywyQkFBMEI7RUFDMUIscUJBQW9CO0VBQ3BCLHlCQUF3QjtFQUN4QixhQUFZO0VBQ1osa0VBQWlFO0VBQ2pFLDBCQUF5QixFQUN6Qjs7QUFDRDtFQUNDLHlCQUF3QixFQUN4Qjs7QUFDRDtFQUNDLHFDQUFvQztFQUNwQyxrQ0FBaUM7RUFDakMsaUNBQWdDO0VBQ2hDLDZCQUE0QixFQUM1Qjs7QUFDRDtFQUNDLGFBQVk7RUFDWixrRUFBaUU7RUFDakUsMEJBQXlCLEVBQ3pCOztBQUdEO0VBQ0M7Ozs7Ozs7S0FPSTtFQUVKO0lBQ0MsaUNBQTRCO1FBQTVCLDZCQUE0QjtJQUM1QixlQUFjO0lBQ2Qsa0JBQWlCLEVBQ2pCLEVBQUEiLCJmaWxlIjoiY29sdW1uLXNldHRpbmdzLXByZWJ1aWxkLmNzcyJ9 */