mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
880757fb5d
* Add support of Subflow UI definition * new UI definition for env var * fix label * fixed value obtaining * fixed label width * fix checkbox * fix subflow info * remove old subflow ui tests * add tests * merge ui new changes * fix initial open button * fix environment variable edit tab * WIP: cp-1 * Rework subflow ui property * Restrict SF value type according to input selection * Move subflow property UI code to subflow.js * Update subflow ui type select appearance * Present subflow instance properties as table rather than generated UI * Move subflow instance properties to separate tab * Fix subflow property ui element layout issues
177 lines
4.4 KiB
SCSS
177 lines
4.4 KiB
SCSS
/**
|
|
* Copyright JS Foundation and other contributors, http://js.foundation
|
|
*
|
|
* 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.
|
|
**/
|
|
|
|
|
|
.red-ui-popover {
|
|
display: none;
|
|
position: absolute;
|
|
width: auto;
|
|
padding: 10px;
|
|
height: auto;
|
|
background: $popover-background;
|
|
color: $popover-color;
|
|
border-radius: 4px;
|
|
z-index: 1000;
|
|
font-family: $primary-font;
|
|
font-size: 14px;
|
|
line-height: 1.4em;
|
|
@include component-shadow;
|
|
border-color: $popover-background;
|
|
}
|
|
|
|
.red-ui-popover:after, .red-ui-popover:before {
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.red-ui-popover.red-ui-popover-right:after, .red-ui-popover.red-ui-popover-right:before {
|
|
top: 50%;
|
|
right: 100%;
|
|
}
|
|
.red-ui-popover.red-ui-popover-left:after, .red-ui-popover.red-ui-popover-left:before {
|
|
top: 50%;
|
|
left: 100%;
|
|
}
|
|
|
|
.red-ui-popover.red-ui-popover-bottom:after, .red-ui-popover.red-ui-popover-bottom:before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
}
|
|
|
|
.red-ui-popover.red-ui-popover-top:after, .red-ui-popover.red-ui-popover-top:before {
|
|
top: 100%;
|
|
left: 50%;
|
|
}
|
|
|
|
.red-ui-popover.red-ui-popover-right:after {
|
|
border-color: transparent;
|
|
border-right-color: $popover-background;
|
|
border-width: 10px;
|
|
margin-top: -10px;
|
|
}
|
|
.red-ui-popover.red-ui-popover-right:before {
|
|
border-color: transparent;
|
|
border-right-color: $popover-background;
|
|
border-width: 11px;
|
|
margin-top: -11px;
|
|
}
|
|
|
|
.red-ui-popover.red-ui-popover-left:after {
|
|
border-color: transparent;
|
|
border-left-color: $popover-background;
|
|
border-width: 10px;
|
|
margin-top: -10px;
|
|
}
|
|
.red-ui-popover.red-ui-popover-left:before {
|
|
border-color: transparent;
|
|
border-left-color: $popover-background;
|
|
border-width: 11px;
|
|
margin-top: -11px;
|
|
}
|
|
|
|
|
|
.red-ui-popover.red-ui-popover-bottom:after {
|
|
border-color: transparent;
|
|
border-bottom-color: $popover-background;
|
|
border-width: 10px;
|
|
margin-left: -10px;
|
|
}
|
|
.red-ui-popover.red-ui-popover-bottom:before {
|
|
border-color: transparent;
|
|
border-bottom-color: $popover-background;
|
|
border-width: 11px;
|
|
margin-left: -11px;
|
|
}
|
|
|
|
.red-ui-popover.red-ui-popover-top:after {
|
|
border-color: transparent;
|
|
border-top-color: $popover-background;
|
|
border-width: 10px;
|
|
margin-left: -10px;
|
|
}
|
|
.red-ui-popover.red-ui-popover-top:before {
|
|
border-color: transparent;
|
|
border-top-color: $popover-background;
|
|
border-width: 11px;
|
|
margin-left: -11px;
|
|
}
|
|
|
|
|
|
|
|
.red-ui-popover-size-small {
|
|
font-size: 12px;
|
|
padding: 5px 7px;
|
|
line-height: 1.8em;
|
|
|
|
&.red-ui-popover-right:after, &.red-ui-popover-left:after {
|
|
border-width: 7px;
|
|
margin-top: -7px;
|
|
}
|
|
&.red-ui-popover-right:before, &.red-ui-popover-left:before {
|
|
border-width: 8px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
&.red-ui-popover-bottom:after, &.red-ui-popover-top:after {
|
|
border-width: 7px;
|
|
margin-left: -7px;
|
|
}
|
|
&.red-ui-popover-bottom:before, &.red-ui-popover-top:before {
|
|
border-width: 8px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
}
|
|
|
|
.red-ui-popover-key {
|
|
font-size: 11px;
|
|
font-family: $monospace-font;
|
|
margin-left: 3px;
|
|
border: 1px solid $popover-color;
|
|
border-radius:3px;
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
.red-ui-popover a.red-ui-button,
|
|
.red-ui-popover button.red-ui-button {
|
|
&.primary {
|
|
border-color: $popover-button-border-color;
|
|
}
|
|
&.primary:not(.disabled):not(.ui-button-disabled):hover {
|
|
border-color: $popover-button-border-color-hover;
|
|
}
|
|
}
|
|
.red-ui-popover code {
|
|
border: none;
|
|
background: none;
|
|
color: $tertiary-text-color;
|
|
}
|
|
|
|
|
|
.red-ui-popover-panel {
|
|
@include component-shadow;
|
|
font-family: $primary-font;
|
|
font-size: $primary-font-size;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border: 1px solid $primary-border-color;
|
|
background: $secondary-background;
|
|
z-index: 2000;
|
|
}
|