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