git.roojs.org Git - roojs1/blob - less/roojs-bootstrap/modal.less

   1 /*
   2     Document   : modal
   3     Created on : Apr 23, 2014, 11:24:28 AM
   4     Author     : edward
   5     Description:
   6         Purpose of the stylesheet follows.
   7 */
   8
   9
  10 .modal-md-1,
  11 .modal-md-2,
  12 .modal-md-3,
  13 .modal-md-4,
  14 .modal-md-5,
  15 .modal-md-6,
  16 .modal-md-7,
  17 .modal-md-8,
  18 .modal-md-9,
  19 .modal-md-10,
  20 .modal-md-11,
  21 .modal-md-12 {
  22   float: left;
  23 }
  24
  25 .modal-md-12 .modal-dialog {
  26   width: 100%;
  27   margin: 30 auto;
  28 }
  29 .modal-md-11 .modal-dialog {
  30   width: 91.66666666666666%;
  31   margin: 30 auto;
  32 }
  33 .modal-md-10 .modal-dialog {
  34   width: 83.33333333333334%;
  35   margin: 30 auto;
  36 }
  37 .modal-md-9 .modal-dialog {
  38   width: 75%;
  39   margin: 30 auto;
  40 }
  41 .modal-md-8 .modal-dialog {
  42   width: 66.66666666666666%;
  43   margin: 30 auto;
  44 }
  45 .modal-md-7 .modal-dialog {
  46   width: 58.333333333333336%;
  47   margin: 30 auto;
  48 }
  49 .modal-md-6 .modal-dialog {
  50   width: 50%;
  51   margin: 30 auto;
  52 }
  53 .modal-md-5 .modal-dialog {
  54   width: 41.66666666666667%;
  55   margin: 30 auto;
  56 }
  57 .modal-md-4 .modal-dialog {
  58   width: 33.33333333333333%;
  59   margin: 30 auto;
  60 }
  61 .modal-md-3 .modal-dialog {
  62   width: 25%;
  63   margin: 30 auto;
  64 }
  65 .modal-md-2 .modal-dialog {
  66   width: 16.666666666666664%;
  67   margin: 30 auto;
  68 }
  69 .modal-md-1 .modal-dialog {
  70   width: 8.333333333333332%;
  71   margin: 30 auto;
  72 }
  73
  74 /*
  75  this  appears to break the layout on dialog buttons on mobile?
  76 @media (max-width: 568px) {
  77     .modal-footer .btn+.btn {
  78             margin-left: 0px;
  79             margin-top: 5px;
  80     }
  81 }
  82 */
  83
  84 .modal-body.roo-layout-container,
  85 .modal-body > .container {
  86     padding: 0;
  87 }
  88
  89 .modal-dialog {
  90     max-width: 100%;
  91 }
  92
  93 @media (max-width: 768px) {
  94
  95     .modal-body  .col-md-12  {
  96         padding : 0;
  97     }
  98
  99     .modal-body {
 100         padding: 5px;
 101     }
 102      .modal-body    .row {
 103         margin-left: -5px;
 104         margin-right: -5px;
 105     }
 106
 107     .modal-body   > .container .col-xs-12 {
 108         padding: 0;
 109     }
 110
 111 }
 112
 113 .modal .roo-mb-progress-wrap {
 114     margin-top: 4px;
 115     border: 1px solid darken(@brand-primary, 10%);;
 116 }
 117
 118 .modal .roo-mb-progress-wrap .roo-mb-progress {
 119     height: 18px;
 120     background: transparent url('@{bootstrap-image-path}/default/basic-dialog/progress2.gif') repeat-x 1px 1px;
 121 }
 122
 123 .modal .roo-mb-progress-wrap .roo-mb-progress .roo-mb-progress-bar {
 124     height: 18px;
 125     overflow: hidden;
 126     width: 0;
 127     background: @brand-primary;
 128 }