+++ /dev/null
-/*
- * 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;
- }
-
- // 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, #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 {
- position: absolute;
- right: 10px;
- top: 5px;
- [data-toggle="tooltip"] {
- position: relative;
- }
-
- &.pull-right {
- .dropdown-menu {
- right: 0;
- left: auto;
- }
- }
- }
-}
-
-//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 !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;
- }
-}
Code Review / stor4nfv.git / blobdiff