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

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