Rift.IO OSM R1 Initial Submission
[osm/UI.git] / skyquake / plugins / composer / src / src / styles / CatalogPackageManager.scss
diff --git a/skyquake/plugins/composer/src/src/styles/CatalogPackageManager.scss b/skyquake/plugins/composer/src/src/styles/CatalogPackageManager.scss
new file mode 100644 (file)
index 0000000..9b434f9
--- /dev/null
@@ -0,0 +1,164 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+@import 'variables';
+
+.CatalogPackageManager {
+       overflow: hidden;
+       > .items {
+               margin: 4px;
+               border: 1px solid transparent;
+               padding: 4px;
+               white-space: nowrap;
+               overflow: auto;
+               -ms-overflow-style: -ms-autohiding-scrollbar;
+               -ms-overflow-style: none;
+               display: flex;
+               flex-wrap: wrap;
+               align-items: flex-start;
+               align-content: flex-start;
+               justify-content: flex-start;
+
+               > .item {
+                       overflow: hidden;
+                       position: relative;
+                       font-size: 12px;
+                       font-weight: 200;
+                       font-style: normal;
+                       height: 40px;
+                       width: 100%;
+                       max-width: 400px;
+                       margin: 5px;
+                       border-radius: 5px;
+                       padding: 4px 8px;
+                       color: #3a3a3a;
+                       background-color: #ffffff;
+
+                       &.-error {
+                               background-color: rgba(139, 0, 0, 0.1);
+                       }
+                       &.-success {
+                               background-color: rgba(0, 139, 0, 0.1);
+                       }
+
+                       h2 {
+                               font-size:12px;
+                               font-weight: 400;
+                               padding-top: 0;
+                               padding-bottom: 0;
+                               padding-left: 30px;
+                       }
+                       img {
+                               width: 25px;
+                               height: 25px;
+                               position: absolute;
+                               top: 4px;
+                               left: 5px;
+                       }
+                       .message {
+                               padding-left: 30px;
+                       }
+                       span {
+                               display: inline-block;
+                       }
+                       em {
+                               display: none;
+                               color: #3C0808;
+                               font-weight: 100;
+                               margin-right: 4px;
+                       }
+                       var {
+                               font-family: monospace, serif;
+                       }
+                       .file-progress {
+                               display: block;
+                       }
+                       .file-progress-indicator {
+                               position: absolute;
+                               left: 30px;
+                               right: 3px;
+                               bottom: 0;
+                               margin: 3px;
+                               border: 1px solid rgba(81, 102, 147, 0.87);
+                               border-radius: 3px;
+                               padding: 0;
+                               height: 3px;
+                               background-color: white;
+                       }
+                       .file-progress-indicator-value {
+                               height: 1px;
+                               border-radius: 3px;
+                               background-color: #64F106;
+                       }
+                       .file-download {
+                       }
+                       .file-download-link {
+                               display: inline;
+                               margin-left: 24px;
+                               padding: 3px;
+                       }
+                       .file-preview {
+                               display: block;
+                               em {
+                                       display: none;
+                               }
+                       }
+                       .file-error {
+                               display: block;
+                               position: absolute;
+                               z-index: 99;
+                               background-color: black;
+                               top: 18px;
+                               left: 30px;
+                               right: 10px;
+                               border-radius: 3px;
+                               padding: 1px 4px !important;
+                       }
+                       .file-success {
+                               display: block;
+                               position: absolute;
+                               z-index: 99;
+                               background-color: black;
+                               top: 18px;
+                               left: 30px;
+                               right: 10px;
+                               border-radius: 3px;
+                               padding: 1px 4px !important;
+                       }
+                       .item-actions {
+                               background-color: rgba(255,255,255,.5);
+                               display: none;
+                               position: absolute;
+                               top: 0;
+                               right: 0;
+                               bottom: 0;
+                               padding: 4px;
+                               text-align: right;
+                               .Button {
+                                       &:hover {
+                                               background-color: transparent;
+                                               border-color: transparent;
+                                       }
+                               }
+                       }
+                       &:hover .item-actions {
+                               display: block;
+                       }
+               }
+       }
+}
\ No newline at end of file