ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/boxes.less

   1 /*
   2  * Component: Box
   3  * --------------
   4  */
   5 .box {
   6   position: relative;
   7   .border-radius(@box-border-radius);
   8   background: #ffffff;
   9   border-top: 3px solid @box-default-border-top-color;
  10   margin-bottom: 20px;
  11   width: 100%;
  12   box-shadow: @box-boxshadow;
  13
  14   // Box color variations
  15   &.box-primary {
  16     border-top-color: @light-blue;
  17   }
  18   &.box-info {
  19     border-top-color: @aqua;
  20   }
  21   &.box-danger {
  22     border-top-color: @red;
  23   }
  24   &.box-warning {
  25     border-top-color: @yellow;
  26   }
  27   &.box-success {
  28     border-top-color: @green;
  29   }
  30   &.box-default {
  31     border-top-color: @gray;
  32   }
  33
  34   // collapsed mode
  35   &.collapsed-box {
  36     .box-body,
  37     .box-footer {
  38       display: none;
  39     }
  40   }
  41
  42   .nav-stacked {
  43     > li {
  44       border-bottom: 1px solid @box-border-color;
  45       margin: 0;
  46       &:last-of-type {
  47         border-bottom: none;
  48       }
  49     }
  50   }
  51
  52   // fixed height to 300px
  53   &.height-control {
  54     .box-body {
  55       max-height: 300px;
  56       overflow: auto;
  57     }
  58   }
  59
  60   .border-right {
  61     border-right: 1px solid @box-border-color;
  62   }
  63   .border-left {
  64     border-left: 1px solid @box-border-color;
  65   }
  66
  67   //SOLID BOX
  68   //---------
  69   //use this class to get a colored header and borders
  70
  71   &.box-solid {
  72     border-top: 0;
  73     > .box-header {
  74       .btn.btn-default {
  75         background: transparent;
  76       }
  77       .btn,
  78       a {
  79         &:hover {
  80           background: rgba(0, 0, 0, 0.1);
  81         }
  82       }
  83     }
  84
  85     // Box color variations
  86     &.box-default {
  87       .box-solid-variant(@gray, #444);
  88     }
  89     &.box-primary {
  90       .box-solid-variant(@light-blue);
  91     }
  92     &.box-info {
  93       .box-solid-variant(@aqua);
  94     }
  95     &.box-danger {
  96       .box-solid-variant(@red);
  97     }
  98     &.box-warning {
  99       .box-solid-variant(@yellow);
 100     }
 101     &.box-success {
 102       .box-solid-variant(@green);
 103     }
 104
 105     > .box-header > .box-tools .btn {
 106       border: 0;
 107       box-shadow: none;
 108     }
 109
 110     // Fix font color for tiles
 111     &[class*='bg'] {
 112       > .box-header {
 113         color: #fff;
 114       }
 115     }
 116
 117   }
 118
 119   //BOX GROUP
 120   .box-group {
 121     > .box {
 122       margin-bottom: 5px;
 123     }
 124   }
 125
 126   // jQuery Knob in a box
 127   .knob-label {
 128     text-align: center;
 129     color: #333;
 130     font-weight: 100;
 131     font-size: 12px;
 132     margin-bottom: 0.3em;
 133   }
 134 }
 135
 136 .box,
 137 .overlay-wrapper {
 138   // Box overlay for LOADING STATE effect
 139   > .overlay,
 140   > .loading-img {
 141     position: absolute;
 142     top: 0;
 143     left: 0;
 144     width: 100%;
 145     height: 100%;
 146   }
 147
 148   .overlay {
 149     z-index: 50;
 150     background: rgba(255, 255, 255, 0.7);
 151     .border-radius(@box-border-radius);
 152     > .fa {
 153       position: absolute;
 154       top: 50%;
 155       left: 50%;
 156       margin-left: -15px;
 157       margin-top: -15px;
 158       color: #000;
 159       font-size: 30px;
 160     }
 161   }
 162
 163   .overlay.dark {
 164     background: rgba(0, 0, 0, 0.5);
 165   }
 166 }
 167
 168 //Add clearfix to header, body and footer
 169 .box-header,
 170 .box-body,
 171 .box-footer {
 172   .clearfix();
 173 }
 174
 175 //Box header
 176 .box-header {
 177   color: #444;
 178   display: block;
 179   padding: @box-padding;
 180   position: relative;
 181
 182   //Add bottom border
 183   &.with-border {
 184     border-bottom: 1px solid @box-border-color;
 185     .collapsed-box & {
 186       border-bottom: none;
 187     }
 188   }
 189
 190   //Icons and box title
 191   > .fa,
 192   > .glyphicon,
 193   > .ion,
 194   .box-title {
 195     display: inline-block;
 196     font-size: 18px;
 197     margin: 0;
 198     line-height: 1;
 199   }
 200   > .fa,
 201   > .glyphicon,
 202   > .ion {
 203     margin-right: 5px;
 204   }
 205   > .box-tools {
 206     position: absolute;
 207     right: 10px;
 208     top: 5px;
 209     [data-toggle="tooltip"] {
 210       position: relative;
 211     }
 212
 213     &.pull-right {
 214       .dropdown-menu {
 215         right: 0;
 216         left: auto;
 217       }
 218     }
 219   }
 220 }
 221
 222 //Box Tools Buttons
 223 .btn-box-tool {
 224   padding: 5px;
 225   font-size: 12px;
 226   background: transparent;
 227   color: darken(@box-default-border-top-color, 20%);
 228   .open &,
 229   &:hover {
 230     color: darken(@box-default-border-top-color, 40%);
 231   }
 232   &.btn:active {
 233     box-shadow: none;
 234   }
 235 }
 236
 237 //Box Body
 238 .box-body {
 239   .border-radius(0; 0; @box-border-radius; @box-border-radius);
 240   padding: @box-padding;
 241   .no-header & {
 242     .border-top-radius(@box-border-radius);
 243   }
 244   // Tables within the box body
 245   > .table {
 246     margin-bottom: 0;
 247   }
 248
 249   // Calendar within the box body
 250   .fc {
 251     margin-top: 5px;
 252   }
 253
 254   .full-width-chart {
 255     margin: -19px;
 256   }
 257   &.no-padding .full-width-chart {
 258     margin: -9px;
 259   }
 260
 261   .box-pane {
 262     .border-radius(0; 0; @box-border-radius; 0);
 263   }
 264   .box-pane-right {
 265     .border-radius(0; 0; 0; @box-border-radius);
 266   }
 267 }
 268
 269 //Box footer
 270 .box-footer {
 271   .border-radius(0; 0; @box-border-radius; @box-border-radius);
 272   border-top: 1px solid @box-border-color;
 273   padding: @box-padding;
 274   background-color: @box-footer-bg;
 275 }
 276
 277 .chart-legend {
 278   &:extend(.list-unstyled);
 279   margin: 10px 0;
 280   > li {
 281     @media (max-width: @screen-sm-max) {
 282       float: left;
 283       margin-right: 10px;
 284     }
 285   }
 286 }
 287
 288 //Comment Box
 289 .box-comments {
 290   background: #f7f7f7;
 291   .box-comment {
 292     .clearfix();
 293     padding: 8px 0;
 294     border-bottom: 1px solid #eee;
 295     &:last-of-type {
 296       border-bottom: 0;
 297     }
 298     &:first-of-type {
 299       padding-top: 0;
 300     }
 301     img {
 302       &:extend(.img-sm);
 303       float: left;
 304     }
 305   }
 306   .comment-text {
 307     margin-left: 40px;
 308     color: #555;
 309   }
 310   .username {
 311     color: #444;
 312     display: block;
 313     font-weight: 600;
 314   }
 315   .text-muted {
 316     font-weight: 400;
 317     font-size: 12px;
 318   }
 319 }
 320
 321 //Widgets
 322 //-----------
 323
 324 /* Widget: TODO LIST */
 325
 326 .todo-list {
 327   margin: 0;
 328   padding: 0;
 329   list-style: none;
 330   overflow: auto;
 331   // Todo list element
 332   > li {
 333     .border-radius(2px);
 334     padding: 10px;
 335     background: #f4f4f4;
 336     margin-bottom: 2px;
 337     border-left: 2px solid #e6e7e8;
 338     color: #444;
 339     &:last-of-type {
 340       margin-bottom: 0;
 341     }
 342
 343     > input[type='checkbox'] {
 344       margin: 0 10px 0 5px;
 345     }
 346
 347     .text {
 348       display: inline-block;
 349       margin-left: 5px;
 350       font-weight: 600;
 351     }
 352
 353     // Time labels
 354     .label {
 355       margin-left: 10px;
 356       font-size: 9px;
 357     }
 358
 359     // Tools and options box
 360     .tools {
 361       display: none;
 362       float: right;
 363       color: @red;
 364       // icons
 365       > .fa, > .glyphicon, > .ion {
 366         margin-right: 5px;
 367         cursor: pointer;
 368       }
 369
 370     }
 371     &:hover .tools {
 372       display: inline-block;
 373     }
 374
 375     &.done {
 376       color: #999;
 377       .text {
 378         text-decoration: line-through;
 379         font-weight: 500;
 380       }
 381
 382       .label {
 383         background: @gray !important;
 384       }
 385     }
 386   }
 387
 388   // Color varaity
 389   .danger {
 390     border-left-color: @red;
 391   }
 392   .warning {
 393     border-left-color: @yellow;
 394   }
 395   .info {
 396     border-left-color: @aqua;
 397   }
 398   .success {
 399     border-left-color: @green;
 400   }
 401   .primary {
 402     border-left-color: @light-blue;
 403   }
 404
 405   .handle {
 406     display: inline-block;
 407     cursor: move;
 408     margin: 0 5px;
 409   }
 410
 411 }
 412
 413 // END TODO WIDGET
 414
 415 /* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
 416 .chat {
 417   padding: 5px 20px 5px 10px;
 418
 419   .item {
 420     .clearfix();
 421     margin-bottom: 10px;
 422     // The image
 423     > img {
 424       width: 40px;
 425       height: 40px;
 426       border: 2px solid transparent;
 427       .border-radius(50%);
 428     }
 429
 430     > .online {
 431       border: 2px solid @green;
 432     }
 433     > .offline {
 434       border: 2px solid @red;
 435     }
 436
 437     // The message body
 438     > .message {
 439       margin-left: 55px;
 440       margin-top: -40px;
 441       > .name {
 442         display: block;
 443         font-weight: 600;
 444       }
 445     }
 446
 447     // The attachment
 448     > .attachment {
 449       .border-radius(@attachment-border-radius);
 450       background: #f4f4f4;
 451       margin-left: 65px;
 452       margin-right: 15px;
 453       padding: 10px;
 454       > h4 {
 455         margin: 0 0 5px 0;
 456         font-weight: 600;
 457         font-size: 14px;
 458       }
 459       > p, > .filename {
 460         font-weight: 600;
 461         font-size: 13px;
 462         font-style: italic;
 463         margin: 0;
 464
 465       }
 466       .clearfix();
 467     }
 468   }
 469
 470 }
 471
 472 //END CHAT WIDGET
 473
 474 //Input in box
 475 .box-input {
 476   max-width: 200px;
 477 }
 478
 479 //A fix for panels body text color when placed within
 480 // a modal
 481 .modal {
 482   .panel-body {
 483     color: #444;
 484   }
 485 }