PHP Classes

File: WITheme/WICMS/admin/less/boxes.less

Recommend this page to a friend!
  Classes of Jules Warner   WICMS   WITheme/WICMS/admin/less/boxes.less   Download  
File: WITheme/WICMS/admin/less/boxes.less
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: WICMS
Database driven content management system with PDO
Author: By
Last change:
Date: 7 years ago
Size: 9,097 bytes
 

Contents

Class file image Download
/* component: Boxes ------------------------- */ .box { position: relative; background: #ffffff; border-top: 2px solid darken(@box-border-color, 20%); margin-bottom: 20px; .border-radius(@box-border-radius); width: 100%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); // 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; } // fixed height to 300px &.height-control { .box-body { max-height: 300px; overflow: auto; } } // Box header .box-header { position: relative; .clearfix(); //Add top left and top right border radius .border-radius(@box-border-radius; @box-border-radius; 0; 0); border-bottom: 0px solid @box-border-color; color: #444; padding-bottom: 10px; // Icons and box title > .fa, > .glyphicon, > .ion, .box-title { display: inline-block; padding: 10px 0px 10px 10px; margin: 0; font-size: 20px; font-weight: 400; float: left; cursor: default; //text-transform: capitalize; } a { color: #444; } // Box Tools > .box-tools { padding: 5px 10px 5px 5px; } } // Box body .box-body { padding: 10px; .border-radius(0; 0; @box-border-radius; @box-border-radius); // Tables within the box body > table, > .table { margin-bottom: 0; } &.chart-responsive { width: 100%; overflow: hidden; } // Charts > .chart { position: relative; overflow: hidden; width: 100%; svg, canvas { width: 100%!important;} } // Calendar within the box body .fc { margin-top: 5px; } // Calendar title .fc-header-title h2 { font-size: 15px; line-height: 1.6em; color: #666; margin-left: 10px; } .fc-header-right { padding-right: 10px; } .fc-header-left { padding-left: 10px; } // Calendar table header cells .fc-widget-header { background: #fafafa; box-shadow: inset 0px -3px 1px rgba(0,0,0,0.02); } .fc-grid { width: 100%; border: 0; } .fc-widget-header:first-of-type, .fc-widget-content:first-of-type { border-left: 0; border-right: 0; } .fc-widget-header:last-of-type, .fc-widget-content:last-of-type { border-right: 0; } // tables in the box body .table { margin-bottom: 0; } .full-width-chart { margin: -19px; } &.no-padding .full-width-chart { margin: -9px; } } // Box footer .box-footer { border-top: 1px solid @box-border-color; .border-radius(0; 0; @box-border-radius; @box-border-radius); padding: 10px; background-color: @box-footer-bg; } // // SOLID BOX: //------------------ //use this class to get a colored header and borders // &.box-solid { border-top: 0px; > .box-header { padding-bottom: 0px!important; .btn.btn-default { background: transparent; } } // Box color variations &.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; } // collapsed mode &.collapsed-box { .box-header { .border-radius(@box-border-radius); } } // 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; } // // Widgets //----------- // // Widget: TODO LIST .todo-list { margin: 0; padding: 0px 0px; list-style: none; // Todo list element > li { .border-radius(2px); padding: 10px; background: @table-striped-color; margin-bottom: 2px; border-left: 2px solid #e6e7e8; color: #444; &:last-of-type { margin-bottom: 0; } // 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; } > 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; } } } .handle { display: inline-block; cursor: move; margin: 0 5px; } } // END TODO WIDGET // Chat widget .chat { padding: 5px 20px 5px 10px; .item { .clearfix(); margin-bottom: 10px; // The image > img { //display: inline-block; width: 40px; height: 40px; border: 2px solid transparent; .border-radius(50%)!important; &.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: #f0f0f0; 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 // Box overlay for LOADING STATE effect > .overlay, > .loading-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } > .overlay { z-index: 1010; background: rgba(255, 255, 255, 0.7); } > .overlay.dark { background: rgba(0, 0, 0, 0.5); } > .loading-img { z-index: 1020; background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat; } }