git.roojs.org Git - roojs1/blob - less/roojs-bootstrap/document-manager.less

   1
   2 .roo-document-manager-selector { // it must use visibility, display is not working on old safari...
   3     visibility: hidden;
   4     height: 0px;
   5 }
   6
   7 .roo-document-manager-uploader,
   8 .roo-document-manager-loading,
   9 .roo-document-manager-preview {
  10     position: relative;
  11     float: left;
  12     width: 25%;
  13     padding-left: 5px;
  14     height: 100px;
  15     max-height: 100px;
  16     margin-top: 10px;
  17 }
  18
  19 .roo-document-manager-preview.wide {
  20     width: 50%;
  21 }
  22
  23 .roo-document-manager-thumb,
  24 .roo-document-manager-upload-btn {
  25     width : 100%;
  26     height: 100px;
  27     line-height: 100px;
  28     max-height: 100px;
  29     border: 1px solid @gray-lighter;
  30     -webkit-box-shadow: 1px 0px 5px 0px fade(@gray-light, 75%);
  31     -moz-box-shadow: 1px 0px 5px 0px fade(@gray-light, 75%);
  32     box-shadow: 1px 0px 5px 0px fade(@gray-light, 75%);
  33 }
  34
  35 .roo-document-manager-thumb > i.fa,
  36 .roo-document-manager-upload-btn > i.fa {
  37     width: 100%;
  38     line-height: 98px;
  39     text-align: center;
  40     vertical-align: middle;
  41     color: @gray-light;
  42     font-size: 2.5em;
  43 }
  44
  45 .roo-document-manager-thumb > i.fa {
  46     font-size: 2.5em;
  47 }
  48
  49 .roo-document-manager-thumb > img {
  50     width: 100%;
  51     max-height: 100%;
  52     text-align: center;
  53     vertical-align: middle;
  54 }
  55
  56 .roo-document-manager-preview > .close {
  57     position: absolute;
  58     top: 0px;
  59     right: 3px;
  60     font-size: 20px;
  61     opacity: 1;
  62 }
  63
  64 .roo-document-manager-preview > .close:hover {
  65     color: @gray-dark;
  66 }
  67
  68 .roo-document-manager-preview.disabled > .roo-document-manager-thumb > img {
  69     -webkit-filter: grayscale(100%);
  70        -moz-filter: grayscale(100%);
  71          -o-filter: grayscale(100%);
  72         -ms-filter: grayscale(100%);
  73             filter: grayscale(100%);
  74 }
  75
  76 .roo-document-manager-preview.disabled > .close {
  77     display: none !important;
  78 }
  79
  80 .roo-document-manager-preview > .roo-document-manager-thumb > .fa {
  81     position: absolute;
  82     left: 10px;
  83     top: 5px;
  84     width: 25px;
  85     height: 25px;
  86     -webkit-border-radius: 50%;
  87     -moz-border-radius: 50%;
  88     border-radius: 50%;
  89     line-height: 25px;
  90     text-align: center;
  91     background: inherit;
  92     border: inherit;
  93     font-size: 1.8em;
  94 }
  95
  96 .roo-document-manager-preview > .roo-document-manager-thumb.bottom > .fa {
  97     top: inherit;
  98     bottom: 5px;
  99 }
 100
 101 /*
 102 * sm
 103 */
 104
 105 @media (min-width: 768px) {
 106     .roo-document-manager-uploader,
 107     .roo-document-manager-loading,
 108     .roo-document-manager-preview {
 109         height: 200px;
 110         max-height: 200px;
 111     }
 112
 113     .roo-document-manager-thumb,
 114     .roo-document-manager-upload-btn {
 115         line-height: 200px;
 116         height: 200px;
 117         max-height: 200px;
 118     }
 119
 120     .roo-document-manager-thumb > i.fa,
 121     .roo-document-manager-upload-btn > i.fa {
 122         line-height: 198px;
 123     }
 124
 125 }
 126
 127 /*
 128 * md
 129 */
 130
 131 @media (min-width: 992px) {
 132     .roo-document-manager-uploader,
 133     .roo-document-manager-loading,
 134     .roo-document-manager-preview {
 135         width: 8.33333333%;
 136         height: 80px;
 137         max-height: 80px;
 138     }
 139
 140     .roo-document-manager-preview.wide {
 141         width: 16.66666666%;
 142     }
 143
 144     .roo-document-manager-thumb,
 145     .roo-document-manager-upload-btn {
 146         line-height: 80px;
 147         height: 80px;
 148         max-height: 80px;
 149     }
 150
 151     .roo-document-manager-thumb > i.fa,
 152     .roo-document-manager-upload-btn > i.fa {
 153         line-height: 78px;
 154     }
 155
 156 }
 157
 158
 159 /*
 160 * lg
 161 */
 162
 163 @media (min-width: 1200px) {
 164     .roo-document-manager-uploader,
 165     .roo-document-manager-loading,
 166     .roo-document-manager-preview {
 167         width: 8.33333333%;
 168         height: 100px;
 169         max-height: 100px;
 170     }
 171
 172     .roo-document-manager-preview.wide {
 173         width: 16.66666666%;
 174     }
 175
 176     .roo-document-manager-thumb,
 177     .roo-document-manager-upload-btn {
 178         line-height: 100px;
 179         height: 100px;
 180         max-height: 100px;
 181     }
 182
 183     .roo-document-manager-thumb > i.fa,
 184     .roo-document-manager-upload-btn > i.fa {
 185         line-height: 98px;
 186     }
 187
 188 }