org.visallo.web.table.less.table.less Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of visallo-web-table Show documentation
The newest version!
.com-visallo-table {
  height: 100%;
  display: flex;
  flex-direction: column;

  .watermark {
    h1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #999;
      font-size: 110%;
      display: block;
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: block;
      background-image: url(/org/visallo/web/table/img/empty-table.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 128px auto;
      opacity: 0.15;
    }
  }
}

.saved-search-table {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tabs {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    border-bottom: 3px solid #0088cc;

    .tabScrollButtons {
      flex: 0 0 auto;
      display: flex;
      align-items: center;

      .scrollButton {
        cursor: pointer;
        color: #666;
        margin: 0 0.5em;
        display: inline-block;

        &.disabled {
            color: #eee;
            pointer-events: none;
        }
      }
    }

    .list-container {
      overflow: hidden;
      margin-left: 10px;

      .tab-list {
        white-space: nowrap;
        list-style: none;
        margin: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        .active {
           background: #0088cc;
           color: white;
           text-shadow: 0 -1px 0 rgba(0,0,0,0.4);

           &:hover {
             background: #0088cc;
           }
        }

        li {
          display: inline-block;
          padding: 0.25em 0.5em;
          margin: 0;
          background: #999;
          color: white;
          margin-right: 1px;
          text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
          cursor: pointer;

          .name {
            margin: 5px;
          }

          .count {
            color: #ccc;
            font-weight: bold;
            font-size: 85%;
            opacity: 0.6;
          }

          &:hover {
            background: #aaa;
          }
        }

        li:first-child {
          border-top-left-radius: 3px;
        }

        li:last-child {
          border-top-right-radius: 3px;
        }
      }
    }
  }

  .table {
    flex: 1 1 auto;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;

      .ReactVirtualized__Table {
        overflow-x: auto;

        .ReactVirtualized__Table__headerRow {
          background: #f1f1f1;

          .ReactVirtualized__Table__headerColumn {
            color: #666;

            .resizable-column-header {
              display: flex;

              .ReactVirtualized__Table__headerTruncatedText {
                &:after {
                  content: ' ';
                  display: inline-block;
                  width: 0;
                  height: 0;
                  border-style: solid;
                  margin-left: 0.5em;
                  border-width: 0.5em 0.4em;
                  border-color: transparent;
                  vertical-align: middle;
                }

                &.sort-ASCENDING:after,.sort-DESCENDING:after {
                  margin-left: 0.3em;
                  margin-top: -0.5ex;
                }

                &.sort-ASCENDING:after {
                  border-color: transparent transparent #0088cc transparent;
                  border-width: 0 .4em 0.5em .4em;
                }

                &.sort-DESCENDING:after {
                  border-color: #0088cc transparent transparent transparent;
                  border-width: .5em .4em 0 .4em;
                }
              }
              .react-resizable-handle {
                height: 80%;
                width: 0.5em;
                padding: 0;
                vertical-align: center;
                background: none;

                &:hover {
                  cursor: col-resize;
                }
              }
            }

            .configure-column-header {
              position: relative;
              height: 25px;
              width: 25px;
              opacity: 0.6;
              background: url(/img/glyphicons/[email protected]);
              background-size: auto 40%;
              background-repeat: no-repeat;
              background-position: center;
              &:hover {
                background-color: #c7c7c7;
                pointer-events: all;
                cursor: pointer;
              }
            }
          }
        }

        .ReactVirtualized__Table__Grid {
          .ReactVirtualized__Table__row {
            border-bottom: 1px solid #f1f1f1;

            .ReactVirtualized__Table__rowColumn {
              display: flex;
              flex-direction: column;
              justify-content: center;
              pointer-events: none;
              border-right: 1px solid transparent;

              .property-value {
                width: inherit;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0.3em 0;

                &.config-row-column {
                  color: #ccc;
                }
              }
            }

            &.selected {
              background: #0088cc;
              color: white;

              .ReactVirtualized__Table__rowColumn {
                .config-row-column {
                  color: white;
                }
              }

              &:hover {
                background: #0088cc;
              }
            }

            &.loading {
              background: none;
              .config-row-column {
                  flex: 1;
                  height: 100%;
                  background: transparent url(../../../../../../img/loading.gif) no-repeat center center;
                  background-size: 35%;
              }
            }

            &:hover {
              background: #f9f9f9;
            }
          }
        }

        *:focus {
          outline: none;
        }
      }
  }
}

.com-visallo-table-columnconfig.popover {
    opacity: 1;

    .popover-title input {
      margin-top: 0;
      margin-right: 5px;
    }

    .popover-title {
      .tableOption {
        font-size: 90%;
        margin: 0 0 0.2em 0;
        padding: 0;
        input {
          margin: 0;
          vertical-align: baseline;
        }
      }
      .sort-config {
        border-top: 1px solid #ebebeb;
        margin-top: 0.5em;
        padding-top: 0.5em;

        .sort-property-select {
          margin: 0.5em 0 0 0;
          display: block;
          width: 100%;
        }
      }
    }

    .popover-content {
      padding: 0;

      .ui-sortable {
        list-style-type: none;
        margin: 0;
        overflow-y: auto;
        max-height: 40vh;
        padding: 0.25em 1em;

        input[type="checkbox"] {
          margin: 0;
        }
        label {
          font-size: 90%;
          padding: 0;
          margin: 0 0 .2em 0;
          white-space: nowrap;
          overflow: hidden;
          max-width: 14em;
          text-overflow: ellipsis; 
          input {
            vertical-align: baseline;
          }
        }
      }
    }
}