--- /dev/null
+.EditForwardingGraphPaths {
+
+ padding: 8px;
+
+ &.-with-transitions {
+ * {
+ transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
+ }
+ }
+
+ .NetworkService {
+ position: relative;
+ > .footer-actions {
+ border-top: 1px solid silver;
+ }
+ }
+
+ .ForwardingGraph {
+
+ margin-top: 20px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ border-bottom: 1px solid silver;
+
+ > div > .footer-actions {
+ padding-left: 80px;
+ }
+
+ }
+
+ .RecordServicePath {
+
+ position: relative;
+
+ min-height: 100px;
+
+ white-space: nowrap;
+
+ overflow: visible;
+
+ margin: 8px 0;
+
+ background-color: #CBD1D1;
+
+ .EditableProperty {
+ display: block;
+ margin: 12px 0;
+ width: 200px;
+ }
+
+ .ConstituentVnfd {
+
+ position: relative;
+ display: none;
+
+ > small {
+ vertical-align: bottom;
+ }
+
+ &:hover {
+ small.vnfd-title {
+ display: block;
+ }
+ }
+
+ small.vnfd-title {
+ display: none;
+ position: absolute;
+ top: -20px;
+ width: 100%;
+ left: 0;
+ }
+
+ .connectors {
+ border-top: 3px solid silver;
+ border-radius: 9px;
+ padding-top: 3px;
+ .connection-point {
+ border: 2px solid;
+ margin: 2px;
+ * {
+ vertical-align: middle;
+ }
+ }
+ }
+ }
+
+ &.-is-factory {
+ opacity: 0.33;
+ &:hover {
+ opacity: 1;
+ .ConstituentVnfd {
+ display: inline-block;
+ }
+ }
+ .create-record-service-path {
+ display: none;
+ }
+ .EditableProperty {
+ visibility: hidden;
+ }
+ }
+
+ &:hover {
+ > .header-actions {
+ display: block;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ &.-is-edit-paths-mode {
+ .ConstituentVnfd {
+ display: inline-block;
+
+ }
+ .enter-path-edit-mode {
+ display: none;
+ }
+ .selection {
+ display: inline-block;
+ }
+ > .header-actions {
+ display: none;
+ }
+ }
+ .rsp-create-new-connection-point-line,
+ .enter-path-edit-mode {
+ opacity: 1;
+ }
+
+ }
+
+ }
+
+ .RspConnectionPointRef {
+ border: 2px solid transparent;
+ border-radius: 8px;
+ width: 35px;
+ height: 35px;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ font-size: 11px;
+ text-align: center;
+ cursor: pointer;
+ vertical-align: middle;
+ &.create-new-connection-point {
+ width: auto;
+ height: auto;
+ border: dotted red;
+ }
+ small {
+ vertical-align: baseline;
+ }
+
+ }
+
+ .connection-point {
+ @extend .RspConnectionPointRef;
+ display: inline-block;
+ border: dotted red;
+ text {
+ fill: #111831;
+ stroke: #111831;
+ }
+ }
+
+ .Classifier {
+ background-color: #CBD1D1 !important;
+ td {
+ .match-attr-name {
+ display: none;
+ }
+ }
+ }
+
+ .fg-classifier {
+
+ position: relative;
+ margin-bottom: 13px;
+
+ th,
+ td {
+ padding: 4px;
+ min-width: 80px;
+ text-align: left;
+ vertical-align: top;
+ &.primary-action-column,
+ &.secondary-action-column {
+ max-width: 40px;
+ }
+ &.id-property {
+ display: none;
+ }
+ }
+
+ th {
+ line-height: 10px;
+ vertical-align: bottom;
+ }
+
+ th {
+ @extend h2;
+ }
+
+ input {
+ &.match-attr-value {
+ min-width: 100px;
+ }
+ }
+
+ .classifier-properties {
+ line-height: 25px;
+ .classifier-property {
+ position: relative;
+ vertical-align: top;
+ display: inline-block;
+ margin: 4px;
+ }
+ }
+
+ .select-connection-point-ref {
+ display: none;
+ position: absolute;
+ top: 30px;
+ left: 2px;
+ width: auto;/* set by the code*/
+ min-width: 150px;
+ box-shadow: 0.1px 0.1px 3px silver;
+ z-index: 9999;
+ .ConnectionPointSelector {
+ background-color: white;
+ border-radius: 3px;
+ width: 100%;
+ text-align: left;
+ margin: 0;
+ small.Button {
+ display: none;
+ }
+ }
+ }
+
+ &.-is-edit-classifier-connection-point-ref {
+ .select-connection-point-ref {
+ display: block;
+ }
+ }
+
+ }
+
+ h2 {
+ font-size: 9px;
+ text-transform: uppercase;
+ color: #AEAEAE;
+ img {
+ border: 0;
+ width: 30px;
+ margin: 3px;
+ vertical-align: middle;
+ }
+ }
+
+ h4 {
+ @extend h2;
+ margin: 4px 4px 4px 80px;
+ }
+
+ .primary-action-column {
+ width: 40px;
+ input {
+ margin: 8px 12px;
+ }
+ }
+
+ .secondary-action-column {
+ width: 40px;
+ }
+
+ .rsp {
+ display: inline-block;
+ }
+
+ .rsp-line {
+ border: 2px solid red;
+ display: inline-block;
+ width: 20px;
+ vertical-align: middle;
+ &.rsp-create-new-connection-point-line {
+ border-style: dotted;
+ }
+ }
+
+
+ .header-actions {
+ position: absolute;
+ right: 0;
+ }
+
+ .row-action-column {
+ width: 50px;
+ overflow: visible;
+ white-space: nowrap;
+ text-align: center;
+ padding: 8px;
+ display: inline-block;
+ .action {
+ cursor: pointer;
+ }
+ }
+
+ .connection-points {
+ display: inline-block;
+ margin-right: 25px;
+ vertical-align: middle;
+ .selection {
+ display: none;
+ position: absolute;
+ bottom: 2px;
+ font-size: 10px;
+ text-align: center;
+ border-radius: 33px;
+ margin: 0 0 0 -12px;
+ padding: 12px;
+ background-color: rgba(255, 255, 255, 0.66);
+ border-top: 1px solid rgba(192, 192, 192, 0.13);
+ border-bottom: 1px solid rgba(192, 192, 192, 0.13);
+ }
+ .rsp:first-child {
+ .rsp-line {
+ display: none;
+ }
+ }
+ }
+
+ .create-new-connection-point.Button {
+ padding: 0;
+ img {
+ width: 34px;
+ height: 34px;
+ }
+ }
+
+ .header-actions {
+ display: none;
+ opacity: 0.33;
+ }
+
+ .footer-actions {
+ border-color: transparent;
+ opacity: 0.33;
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .vnfd-list {
+ display: inline-block;
+ }
+
+ .rsp-create-new-connection-point-line,
+ .enter-path-edit-mode {
+ opacity: 0.33;
+ }
+
+ .fg-icon {
+ width: 25px;
+ vertical-align: middle;
+ }
+
+ input {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ select {
+ width: auto !important;
+ max-width: none !important;
+ min-width: 150px !important;
+ }
+
+ .classifier-match-attributes {
+ > tbody {
+ > tr:nth-of-type(odd) {
+ background-color: rgba(238, 232, 213, 0.33);
+ }
+ //> tr:nth-of-type(even) {
+ // background-color: rgba(147, 161, 161, 0.33);
+ //}
+ }
+ }
+
+ .no-service-function-chain-msg {
+ margin-left: 80px;
+ }
+
+ .hint {
+ color: #073642;
+ font-size: 12.8px;
+ }
+
+ .EditableProperty {
+ &.-is-disabled {
+ h3,
+ val input {
+ background: #aeaeae !important;
+ }
+ }
+ }
+}
+
+.tooltip-indicator {
+ .cpNumber {
+ i {
+ display: none;
+ }
+ val {
+ position: absolute;
+ top: -10px;
+ left: -5px;
+ margin-left: 50%;
+ margin-right: 50%;
+ padding: 0;
+ }
+ }
+}
projects / osm / UI.git / blobdiff