added editconfigparametermap.scss 67/967/1
authorLaurence Maultsby <laurence.maultsby@riftio.com>
Tue, 17 Jan 2017 15:39:19 +0000 (10:39 -0500)
committerLaurence Maultsby <laurence.maultsby@riftio.com>
Tue, 17 Jan 2017 15:39:19 +0000 (10:39 -0500)
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss [new file with mode: 0644]

diff --git a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
new file mode 100644 (file)
index 0000000..ed16003
--- /dev/null
@@ -0,0 +1,328 @@
+/*
+ *
+ *   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 "main";
+@import "ColorGroups";
+
+.config-parameter-map {
+
+       $field-border-radius: 3px;
+       $field-background-color: white;
+       $child-indent-left-right-margin: 5px;
+
+       font-size: smaller;
+       display:-ms-flexbox;
+       display:flex;
+       -ms-flex-wrap: wrap;
+           flex-wrap: wrap;
+
+
+
+       width: 600px;
+
+       .config-parameter {
+               -ms-flex: 1 1 50%;
+                   flex: 1 1 50%;
+                   &-source, &-request {
+                               border-top:1px solid $vld-primary-color;
+                   }
+       }
+
+
+       h1 {
+               text-align: left;
+               span:last-child {
+                       i {
+                               display: none;
+                       }
+               }
+       }
+
+       h2 {
+               @extend h1;
+
+       }
+
+       .basic-properties-group {
+               > h1 {
+                       display: none;
+               }
+       }
+
+       .advanced-properties-group {
+       }
+
+       /* label is used as list item headers */
+       h3 {
+               @extend h2;
+               display: inline-block;
+               .name {
+                       color: #586e75;
+               }
+               .value {
+                       display: none;
+                       color: #002b36;
+               }
+               .info {
+                       margin: 4px;
+               }
+       }
+
+       val {
+               display: inline-block;
+               color: #073642;
+       }
+
+       a {
+               &.simple-list-item {
+                       display: inline-block;
+                       width: 230px;
+                       padding: 4px 16px 4px 4px;
+                       white-space: nowrap;
+               }
+               &.vld-list-item,
+               &.internal-vld-list-item{
+                       border: 1px solid $vld-primary-color;
+                       border-radius: 24px;
+                       background: white linear-gradient(to right, $vld-primary-color 34px, white 34px);;
+               }
+               &.vnfd-list-item,
+               &.constituent-vnfd-list-item{
+                       border: 1px solid $vnfd-primary-color;
+                       border-radius: 11px;
+                       background: white linear-gradient(to right, $vnfd-primary-color 34px, white 34px);;
+               }
+               &.vdu-list-item {
+                       border: 1px solid $vdu-primary-color;
+                       border-radius: 11px;
+                       background: white linear-gradient(to right, $vdu-primary-color 34px, white 34px);;
+               }
+               &.vnffgd-list-item {
+                       border: 1px solid $vnffgd-primary-color;
+                       border-radius: 11px;
+                       background: white linear-gradient(to right, $vnffgd-primary-color 34px, white 34px);;
+               }
+       }
+
+       &.-is-tree-view {
+               .property {
+
+                       position: relative;
+                       overflow: hidden;
+
+                       margin: 8px 8px;
+
+                       background-color: rgba(147, 161, 161, 0.5);
+                       border-radius: $field-border-radius;
+
+                       > h3 {
+                               position: absolute;
+                               top: 2px;
+                               right: 18px;
+                               height: 21px;
+                               pointer-events: none;
+                               border-radius: $field-border-radius;
+                               padding: 3px 0;
+                       }
+
+                       > val {
+                               width: 100%;
+                               > .property-content {
+                                       width: 100%;
+                               }
+
+                       }
+
+                       &.-is-focused {
+                               > h3 {
+                                       /*z-index: -1;*/
+                               }
+                       }
+
+                       &.leaf-property {
+                               overflow: hidden;
+                               min-height: 25px;
+                               > h3 {
+                                       background: linear-gradient(to right, transparent, $field-background-color 21px);
+                                       padding-left: 25px;
+                               }
+                               > val {
+                                       border-radius: $field-border-radius;
+                                       > .property-content {
+                                               border-radius: $field-border-radius;
+                                       }
+                               }
+                       }
+
+                       &.property:not(.leaf-property) {
+
+                               padding: 7px $child-indent-left-right-margin 0 $child-indent-left-right-margin;
+
+                               &.list-property {
+                                       > h3 {
+                                               padding: 4px 8px;
+                                       }
+                               }
+
+                               > h3 {
+                                       right: auto;
+                                       top: 0;
+                                       left: 0;
+                                       width: 100%;
+                                       height: 25px;
+                                       z-index: 1;
+                                       padding: 8px;
+                                       /*background: red;*/
+                                       pointer-events: all;
+                               }
+                               > val {
+                                       margin: 28px 0 8px 0;
+                                       > .property-content {
+                                               position: relative;
+                                               border-radius: $field-border-radius;
+                                               margin-top: 4px;
+                                               padding: 4px;
+                                               &:first-of-type {
+                                                       margin-top: 0;
+                                               }
+                                               &.simple-list {
+                                                       min-height: 15px;
+                                                       margin: 11px;
+                                                       .simple-list-item {
+                                                               img,
+                                                               span {
+                                                                       margin: 0 5px;
+                                                                       vertical-align: middle;
+                                                               }
+                                                       }
+                                               }
+                                       }
+                                       > .property-content:not(.simple-list) {
+                                               &:nth-of-type(odd) {
+                                                       background-color: rgba(238, 232, 213, 0.33);
+                                               }
+                                               &:nth-of-type(even) {
+                                                       background-color: rgba(147, 161, 161, 0.33);
+                                               }
+                                       }
+                                       .tip {
+                                               font-style: italic;
+                                               font-size: small;
+                                               color: #93a1a1;
+                                       }
+                               }
+                       }
+
+                       .actions {
+                               span {
+                                       vertical-align: middle;
+                                       padding: 0 5px;
+                               }
+                       }
+
+               }
+
+       }
+
+       .description {
+               display: none;
+       }
+
+       input,
+       select,
+       textarea {
+               height: 25px;
+               line-height: 25px;
+               max-width: 100%;
+               min-width: 100%;
+               margin: 0;
+               padding: 0 0px 4px 8px;
+               border: 1px solid $field-background-color;
+               border-radius: $field-border-radius;
+               color: #002b36;
+               background-color: $field-background-color;
+               vertical-align: top;
+               &:focus {
+                       color: #002b36;
+                       background-color: white !important;
+               }
+               &::-webkit-input-placeholder {
+                       color: #eee8d5 !important;
+               }
+
+               &:-moz-placeholder { /* Firefox 18- */
+                       color: #eee8d5 !important;
+               }
+
+               &::-moz-placeholder {  /* Firefox 19+ */
+                       color: #eee8d5 !important;
+               }
+
+               &:-ms-input-placeholder {
+                       color: #eee8d5 !important;
+               }
+       }
+
+       select {
+               padding-right: 0;
+               margin-right: 0;
+               -webkit-appearance: none;
+               -webkit-border-radius: $field-border-radius;
+               &.-value-not-set {
+                       color: #eee8d5;
+               }
+       }
+
+       select {
+               -webkit-appearance: none;
+                  -moz-appearance: none;
+                       appearance: none; /* using -prefix-free http://leaverou.github.io/prefixfree/*/
+        background: $field-background-color url(../../../node_modules/open-iconic/svg/caret-bottom.svg) no-repeat right 8px center;
+               background-size: 10px;
+               border: {
+                       color: $field-background-color;
+                       radius: $field-border-radius;
+                       style: solid;
+                       width: 1px;
+               }
+       }
+
+       /* Removes default arrow for IE10+*/
+       /* IE 8/9 get dafault arrow which covers caret image*/
+       /* as long as caret image is small than and positioned*/
+       /* behind default arrow*/
+       select::-ms-expand {
+               display: none;
+       }
+
+       textarea {
+               height: 50px;
+       }
+
+       input {
+               padding: 0 20px 0 8px;
+               line-height: 25px;
+       }
+
+       input[name$="id"],
+       input.-is-guid {
+               font-size: 10px;
+               font-family: monospace;
+       }
+
+}