--- /dev/null
+/*
+ *
+ * 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 "variables";
+@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;
+
+
+
+ max-width: 980px;
+ .config-parameter-titles {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ padding-bottom:10px;
+ color: #AEAEAE;
+ text-transform:uppercase;
+ .config-parameter {
+ padding-left: 10px;
+ }
+ }
+ .config-parameter {
+ display:-ms-flexbox;
+ display:flex;
+ -ms-flex: 1 0 50%;
+ flex: 1 0 50%;
+ &-source, &-request {
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+ border-top:1px solid silver;
+ padding: 10px 10px;
+ }
+ &-request{
+ line-height: 25px;
+ }
+ &-group {
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ display:-ms-flexbox;
+ display:flex;
+ &:nth-child(even) {
+ background: $panel-bg-color-contrast;
+ }
+ }
+ }
+
+
+ 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;
+ }
+
+}
projects / osm / UI.git / blobdiff