/*! * 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; }