X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=blobdiff_plain;f=src%2Fceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Fstatic%2FAdminLTE-2.3.7%2Fbuild%2Fless%2Fboxes.less;fp=src%2Fceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Fstatic%2FAdminLTE-2.3.7%2Fbuild%2Fless%2Fboxes.less;h=c92ef3bab09e8982994cbab1b4174944c4c95b69;hb=812ff6ca9fcd3e629e49d4328905f33eee8ca3f5;hp=0000000000000000000000000000000000000000;hpb=15280273faafb77777eab341909a3f495cf248d9;p=stor4nfv.git diff --git a/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/boxes.less b/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/boxes.less new file mode 100644 index 0000000..c92ef3b --- /dev/null +++ b/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/boxes.less @@ -0,0 +1,485 @@ +/* + * 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; + } +}