%PDF- %PDF-
Direktori : /home/medipszd/public_html/build/less/ |
Current File : /home/medipszd/public_html/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 { position: absolute; right: 10px; top: 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; } }