less/roojs-bootstrap/alert.scss

[roojs1] / less / roojs-bootstrap / document-manager.scss

diff --git a/less/roojs-bootstrap/document-manager.scss b/less/roojs-bootstrap/document-manager.scss
new file mode 100644 (file)
index 0000000..82f7615
--- /dev/null
+++ b/less/roojs-bootstrap/document-manager.scss
@@ -0,0 +1,207 @@
+
+.roo-document-manager-selector { // it must use visibility, display is not working on old safari...
+    visibility: hidden;
+    height: 0px;
+}
+
+.roo-document-manager-uploader,
+.roo-document-manager-loading,
+.roo-document-manager-preview {
+    position: relative;
+    float: left;
+    width: 25%;
+    padding-left: 5px;
+    height: 100px;
+    max-height: 100px;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+.roo-document-manager-preview.wide {
+    width: 50%;
+}
+
+.roo-document-manager-thumb,
+.roo-document-manager-upload-btn {
+    width : 100%;
+    height: 100px;
+    line-height: 100px;
+    max-height: 100px;
+    border: 1px solid $gray-lighter;
+    -webkit-box-shadow: 1px 0px 5px 0px fade($gray-light, 75%);
+    -moz-box-shadow: 1px 0px 5px 0px fade($gray-light, 75%);
+    box-shadow: 1px 0px 5px 0px fade($gray-light, 75%);
+}
+
+.roo-document-manager-thumb > i.fa,
+.roo-document-manager-upload-btn > i.fa {
+    width: 100%;
+    line-height: 98px;
+    text-align: center;
+    vertical-align: middle;
+    color: $gray-light;
+    font-size: 2.5em;
+}
+
+.roo-document-manager-thumb > i.fa {
+    font-size: 2.5em;
+}
+
+.roo-document-manager-thumb > img {
+    width: 100%;
+    max-height: 100%;
+    text-align: center;
+    vertical-align: middle;
+    padding-bottom: 5px;
+}
+
+.roo-document-manager-preview > .close {
+    position: absolute;
+    top: 0px;
+    right: 3px;
+    font-size: 20px;
+    opacity: 1;
+}
+
+.roo-document-manager-preview > .close:hover {
+    color: $gray-dark;
+}
+
+.roo-document-manager-preview.disabled > .roo-document-manager-thumb > img {
+    -webkit-filter: grayscale(100%);
+       -moz-filter: grayscale(100%);
+         -o-filter: grayscale(100%);
+        -ms-filter: grayscale(100%);
+            filter: grayscale(100%); 
+}
+
+.roo-document-manager-preview.disabled > .close {
+    display: none !important;
+}
+
+.roo-document-manager-preview > .roo-document-manager-thumb > .fa {
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 25px;
+    height: 25px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    line-height: 25px;
+    text-align: center;
+    background-color: $body-bg;
+    /*border: inherit;*/
+    font-size: 1.8em;
+    z-index: 1;
+}
+
+.roo-document-manager-preview > .roo-document-manager-thumb.bottom > .fa {
+    top: inherit;
+    bottom: -5px;
+}
+
+.roo-document-manager-preview > .roo-document-manager-thumb.primary > .fa {
+    color : $brand-primary
+}
+
+.roo-document-manager-preview > .roo-document-manager-thumb.border-primary {
+    border: 3px solid $brand-primary;
+}
+
+.roo-document-manager-preview.disabled > .roo-document-manager-thumb.primary > .fa {
+    color : $gray
+}
+
+.roo-document-manager-preview.disabled > .roo-document-manager-thumb.border-primary {
+    border: none;
+}
+
+/*
+* sm
+*/
+
+@media (min-width: 768px) { 
+    .roo-document-manager-uploader,
+    .roo-document-manager-loading,
+    .roo-document-manager-preview {
+        height: 200px;
+        max-height: 200px;
+    }
+    
+    .roo-document-manager-thumb,
+    .roo-document-manager-upload-btn {
+        line-height: 200px;
+        height: 200px;
+        max-height: 200px;
+    }
+
+    .roo-document-manager-thumb > i.fa,
+    .roo-document-manager-upload-btn > i.fa {
+        line-height: 198px;
+    }
+    
+}
+
+/*
+* md
+*/
+
+@media (min-width: 992px) { 
+    .roo-document-manager-uploader,
+    .roo-document-manager-loading,
+    .roo-document-manager-preview {
+        width: 8.33333333%;
+        height: 80px;
+        max-height: 80px;
+    }
+    
+    .roo-document-manager-preview.wide {
+        width: 16.66666666%;
+    }
+    
+    .roo-document-manager-thumb,
+    .roo-document-manager-upload-btn {
+        line-height: 80px;
+        height: 80px;
+        max-height: 80px;
+    }
+
+    .roo-document-manager-thumb > i.fa,
+    .roo-document-manager-upload-btn > i.fa {
+        line-height: 78px;
+    }
+    
+}
+
+
+/*
+* lg
+*/
+
+@media (min-width: 1200px) {
+    .roo-document-manager-uploader,
+    .roo-document-manager-loading,
+    .roo-document-manager-preview {
+        width: 8.33333333%;
+        height: 100px;
+        max-height: 100px;
+    }
+    
+    .roo-document-manager-preview.wide {
+        width: 16.66666666%;
+    }
+    
+    .roo-document-manager-thumb,
+    .roo-document-manager-upload-btn {
+        line-height: 100px;
+        height: 100px;
+        max-height: 100px;
+    }
+
+    .roo-document-manager-thumb > i.fa,
+    .roo-document-manager-upload-btn > i.fa {
+        line-height: 98px;
+    }
+    
+}