framework/crawler-ui/src/main/less/boxes.less

/*!
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements. See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Component: Box
 * --------------
 */
.box {
  position: relative;
  background: #ffffff;
  border:1px solid @box-border-color;
  border-top: 3px solid @box-default-border-top-color;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: @box-boxshadow;

  // Box color variations
  &.box-primary {
    border-top-color: @light-blue;
  }
  &.box-info {
    border-top-color: @aqua;
  }
  &.box-danger {
    border-top-color: @red;
  }
  &.box-warning {
    border-top-color: @yellow;
  }
  &.box-success {
    border-top-color: @green;
  }
  &.box-default {
    border-top-color: @gray;
  }

  // collapsed mode
  &.collapsed-box {
    .box-body,
    .box-footer {
      display: none;
    }
  }

  .nav-stacked {
    > li {
      border-bottom: 1px solid @box-border-color;
      margin: 0;
      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  // fixed height to 300px
  &.height-control {
    .box-body {
      max-height: 300px;
      overflow: auto;
    }
  }

  .border-right {
    border-right: 1px solid @box-border-color;
  }
  .border-left {
    border-left: 1px solid @box-border-color;
  }

  //SOLID BOX
  //---------
  //use this class to get a colored header and borders

  &.box-solid {
    border-top: 0;
    > .box-header {
      .btn.btn-default {
        background: transparent;
      }
      .btn,
      a {
        &:hover {
          background: rgba(0,0,0,0.1)!important;
        }
      }
    }

    // Box color variations
    &.box-default {
      .box-solid-variant(@gray, #444);
    }
    &.box-primary {
      .box-solid-variant(@light-blue);
    }
    &.box-info {
      .box-solid-variant(@aqua);
    }
    &.box-danger {
      .box-solid-variant(@red);
    }
    &.box-warning {
      .box-solid-variant(@yellow);
    }
    &.box-success {
      .box-solid-variant(@green);
    }

    > .box-header > .box-tools .btn {
      border: 0;
      box-shadow: none;
    }

    // Fix font color for tiles
    &[class*='bg'] {
      > .box-header {
        color: #fff;
      }
    }

  }

  //BOX GROUP
  .box-group {
    > .box {
      margin-bottom: 5px;
    }
  }
}

//Add clearfix to header, body and footer
.box-header,
.box-body,
.box-footer {
  .clearfix();
}

//Box header
.box-header {
  color: #444;
  display: block;
  padding-top: @box-padding;
  position: relative;

  //Add bottom border
  &.with-border {
    border-bottom: 1px solid @box-border-color;
    .collapsed-box & {
      border-bottom: none;
    }
  }

  //Icons and box title
  > .fa,
  .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
  }
  > .fa {
    margin-right: 5px;
  }
  > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
    [data-toggle="tooltip"] {
      position: relative;
    }
    //float: none!important;
    &.pull-right {
      .dropdown-menu {
        right: 0;
        left: auto;
      }
    }
  }
}

//Box Tools Buttons
.btn-box-tool {
  padding: 5px;
  font-size: 12px;
  background: transparent;
  box-shadow: none!important;
  color: darken(@box-default-border-top-color, 20%);
  .open &,
  &:hover {
    color: darken(@box-default-border-top-color, 40%);
  }
  &:active {
    outline: none!important;
  }
}

//Box Body
.box-body {
  overflow:auto;
  padding: @box-padding;
  .no-header & {
    .border-top-radius(@box-border-radius);
  }
  // Tables within the box body
  > .table {
    margin-bottom: 0;
  }

  // Calendar within the box body
  .fc {
    margin-top: 5px;
  }

  .full-width-chart {
    margin: -19px;
  }
  &.no-padding .full-width-chart {
    margin: -9px;
  }

  .box-pane {
    //.border-radius(0; 0; @box-border-radius; 0);
  }
  .box-pane-right {
    //.border-radius(0; 0; 0; @box-border-radius);
  }
}

//Box footer
.box-footer {
  //.border-radius(0; 0; @box-border-radius; @box-border-radius);
  border-top: 1px solid @box-border-color;
  padding: @box-padding;
  background-color: @box-footer-bg;
}

//Input in box
.box-input {
  max-width: 200px;
}