AdminLTE/build/less/boxes.less

/*
 * Component: Box
 * --------------
 */
.box {
  position: relative;
  .border-radius(@box-border-radius);
  background: #ffffff;
  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-lte;
  }

  // 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);
        }
      }
    }

    // Box color variations
    &.box-default {
      .box-solid-variant(@gray-lte, #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;
    }
  }

  // jQuery Knob in a box
  .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em;
  }
}

.box,
.overlay-wrapper {
  // Box overlay for LOADING STATE effect
  > .overlay,
  > .loading-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .overlay {
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    .border-radius(@box-border-radius);
    > .fa {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -15px;
      margin-top: -15px;
      color: #000;
      font-size: 30px;
    }
  }

  .overlay.dark {
    background: rgba(0, 0, 0, 0.5);
  }
}

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

//Box header
.box-header {
  color: #444;
  display: block;
  padding: @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,
  > .glyphicon,
  > .ion,
  .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
  }
  > .fa,
  > .glyphicon,
  > .ion {
    margin-right: 5px;
  }
  > .box-tools {
    float: right;
    margin-top: -5px;
    margin-bottom: -5px;
    [data-toggle="tooltip"] {
      position: relative;
    }

    &.pull-right {
      .dropdown-menu {
        right: 0;
        left: auto;
      }
    }

    .dropdown-menu > li > a {
      color: #444!important;
    }
  }
}

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

//Box Body
.box-body {
  .border-radius(0; 0; @box-border-radius; @box-border-radius);
  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;
}

.chart-legend {
  &:extend(.list-unstyled);
  margin: 10px 0;
  > li {
    @media (max-width: @screen-sm-max) {
      float: left;
      margin-right: 10px;
    }
  }
}

//Comment Box
.box-comments {
  background: #f7f7f7;
  .box-comment {
    .clearfix();
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    &:last-of-type {
      border-bottom: 0;
    }
    &:first-of-type {
      padding-top: 0;
    }
    img {
      &:extend(.img-sm);
      float: left;
    }
  }
  .comment-text {
    margin-left: 40px;
    color: #555;
  }
  .username {
    color: #444;
    display: block;
    font-weight: 600;
  }
  .text-muted {
    font-weight: 400;
    font-size: 12px;
  }
}

//Widgets
//-----------

/* Widget: TODO LIST */

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  // Todo list element
  > li {
    .border-radius(2px);
    padding: 10px;
    background: #f4f4f4;
    margin-bottom: 2px;
    border-left: 2px solid #e6e7e8;
    color: #444;
    &:last-of-type {
      margin-bottom: 0;
    }

    > input[type='checkbox'] {
      margin: 0 10px 0 5px;
    }

    .text {
      display: inline-block;
      margin-left: 5px;
      font-weight: 600;
    }

    // Time labels
    .label {
      margin-left: 10px;
      font-size: 9px;
    }

    // Tools and options box
    .tools {
      display: none;
      float: right;
      color: @red;
      // icons
      > .fa, > .glyphicon, > .ion {
        margin-right: 5px;
        cursor: pointer;
      }

    }
    &:hover .tools {
      display: inline-block;
    }

    &.done {
      color: #999;
      .text {
        text-decoration: line-through;
        font-weight: 500;
      }

      .label {
        background: @gray-lte !important;
      }
    }
  }

  // Color varaity
  .danger {
    border-left-color: @red;
  }
  .warning {
    border-left-color: @yellow;
  }
  .info {
    border-left-color: @aqua;
  }
  .success {
    border-left-color: @green;
  }
  .primary {
    border-left-color: @light-blue;
  }

  .handle {
    display: inline-block;
    cursor: move;
    margin: 0 5px;
  }

}

// END TODO WIDGET

/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
.chat {
  padding: 5px 20px 5px 10px;

  .item {
    .clearfix();
    margin-bottom: 10px;
    // The image
    > img {
      width: 40px;
      height: 40px;
      border: 2px solid transparent;
      .border-radius(50%);
    }

    > .online {
      border: 2px solid @green;
    }
    > .offline {
      border: 2px solid @red;
    }

    // The message body
    > .message {
      margin-left: 55px;
      margin-top: -40px;
      > .name {
        display: block;
        font-weight: 600;
      }
    }

    // The attachment
    > .attachment {
      .border-radius(@attachment-border-radius);
      background: #f4f4f4;
      margin-left: 65px;
      margin-right: 15px;
      padding: 10px;
      > h4 {
        margin: 0 0 5px 0;
        font-weight: 600;
        font-size: 14px;
      }
      > p, > .filename {
        font-weight: 600;
        font-size: 13px;
        font-style: italic;
        margin: 0;

      }
      .clearfix();
    }
  }

}

//END CHAT WIDGET

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

//A fix for panels body text color when placed within
// a modal
.modal {
  .panel-body {
    color: #444;
  }
}