Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / composer / src / src / styles / CatalogItems.scss

diff --git a/skyquake/plugins/composer/src/src/styles/CatalogItems.scss b/skyquake/plugins/composer/src/src/styles/CatalogItems.scss
new file mode 100644 (file)
index 0000000..5d020c0
--- /dev/null
+++ b/skyquake/plugins/composer/src/src/styles/CatalogItems.scss
@@ -0,0 +1,195 @@
+
+/*
+ * 
+ *   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';
+@import "ColorGroups";
+
+%type-header {
+    height:0.8rem;
+    width:100%;
+    color:white;
+    font-size:0.6rem;
+    padding-left: 1.5rem;
+    text-transform:uppercase;
+        line-height: 0.9rem;
+}
+
+.CatalogItems {
+       padding:0;
+       margin: 0;
+       position: absolute;
+       margin-top: 40px;
+       overflow-y: auto;
+       top: -6px;
+       right: 0;
+       bottom: 0;
+       left: 0;
+       .nsd {
+               .type-header {
+                       @extend %type-header;
+                       background:$nsd-primary-color;
+               }
+       }
+       .vnfd {
+               .type-header {
+                       @extend %type-header;
+                       background:$vnfd-primary-color;
+               }
+       }
+       ul {
+               list-style: none;
+               margin: 0;
+               border: 0;
+               padding: 10px;
+               display: flex;
+               flex-wrap: wrap;
+               flex-direction: column;
+       }
+       li {
+               position: relative;
+               width: 100%;
+               min-width: 280px;
+               max-width: 400px;
+               margin: 1px;
+               border: 5px;
+               padding: 4px 8px;
+       }
+       li > div {
+               &.-is-open-for-edit-indicator {
+                       position: absolute;
+                       top: 10px;
+                       left: -4px;
+                       bottom: 10px;
+                       width: 8px;
+                       border-radius: 2px;
+                       background-color: #4d8fb3;
+               }
+
+       }
+       div.catalog-item {
+               cursor: pointer;
+               display: block;
+               overflow: hidden;
+               position: relative;
+               width: 100%;
+               height:auto;
+               min-height: 70px;
+               margin: 0;
+               padding: 0;
+               border-radius: 5px;
+               border: 1px solid #e5e5e5;
+               font-size: 14px;
+               font-weight: 400;
+               font-style: normal;
+               background-color: #ffffff;
+               -webkit-user-select: none;
+               -moz-user-select: none;
+               -ms-user-select: none;
+               user-select: none;
+
+               &:hover {
+                       background-color: #7E9BC1;
+                       dl {
+                               dd {
+                                       color: #ffffff;
+                               }
+                       }
+               }
+               &:active, &:visited {
+                       background-color:#4C5E74;
+               }
+               &.-is-modified {
+
+               }
+               &.-is-deleted {
+                       opacity: 0.25;
+               }
+
+               .-is-modified-indicator {
+                       position: absolute;
+                       top: -20px;
+                       right: -20px;
+                       width: 40px;
+                       height: 40px;
+                       background-color: #FF5F5F;
+                       transform: rotate(-45deg);
+               }
+
+               dl {
+                       margin: 0;
+                       padding: 3px 0 0 80px;
+                       position: relative;
+                       min-height: 70px;
+                       dt {
+                               margin: 0;
+                               padding: 0;
+                               font-size: 14px;
+                               font-weight: 400;
+                               white-space: nowrap;
+                       }
+                       dd {
+                               display: block;
+                               padding:0;
+                               color:#aeaeae;
+                               font-size: 10px;
+                               font-style: normal;
+                       }
+                       dd.logo {
+                               position: absolute;
+                               top:0;
+                               left: 5px;
+                               bottom: -4px;
+                               width: 70px;
+                               margin: 0;
+                               border: 0;
+                               padding: 0;
+                               overflow: hidden;
+                               img.logo {
+                                       margin: 0;
+                                       border: 0;
+                                       padding: 0;
+                                       width: 50px;
+                                       /*height: 50px; logos must scale height to fit a 50x50 pixel box otherwise they will clip*/
+                                       position: absolute;
+                                       top: 50%;
+                                       left: 50%;
+                                       transform: translate(-50%, -50%);
+                               }
+                       }
+               }
+
+               &:first-of-type {
+                       margin-top: 0;
+               }
+
+               span.vendor,
+               span.version {
+                       display: inline-block;
+                       padding-right: 4px;
+               }
+               span.vendor:after {
+                       content: ' /';
+               }
+               span.version:before {
+                       content: ' v';
+               }
+               span.description {
+                       display: none;
+               }
+       }
+}