From: Laurence Maultsby Date: Tue, 17 Jan 2017 15:39:19 +0000 (-0500) Subject: added editconfigparametermap.scss X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=refs%2Fchanges%2F67%2F967%2F1;p=osm%2FUI.git added editconfigparametermap.scss Signed-off-by: Laurence Maultsby --- diff --git a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss new file mode 100644 index 000000000..ed16003a9 --- /dev/null +++ b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss @@ -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; + } + +}