mirror of https://github.com/node-red/node-red.git
1168 lines
31 KiB
SCSS
1168 lines
31 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-editor-stack {
|
|
position: absolute;
|
|
margin: 0;
|
|
top: 0;
|
|
bottom: 0px;
|
|
right: 323px;
|
|
width: 0;
|
|
z-index: 5;
|
|
}
|
|
.red-ui-tray {
|
|
position:absolute;
|
|
margin: 0;
|
|
top: 0;
|
|
//min-width: 500px;
|
|
width: auto;
|
|
right: -1000px;
|
|
bottom: 0;
|
|
background: var(--red-ui-secondary-background);
|
|
border-left: 1px solid var(--red-ui-secondary-border-color);
|
|
border-bottom: 1px solid var(--red-ui-primary-border-color);
|
|
box-sizing: content-box;
|
|
}
|
|
.red-ui-tray.open {
|
|
right: 0;
|
|
}
|
|
.red-ui-tray-body-wrapper {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
.red-ui-tray-body {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0.1px; // prevent margin collapsing
|
|
// .dialog-form,#dialog-form, #node-config-dialog-edit-form {
|
|
// margin: 20px;
|
|
// height: calc(100% - 40px);
|
|
// }
|
|
}
|
|
.red-ui-tray-content {
|
|
overflow: auto;
|
|
position: relative;
|
|
.red-ui-palette-icon-fa {
|
|
top: 6px;
|
|
left: 4px;
|
|
}
|
|
}
|
|
.red-ui-tray-header {
|
|
@include disable-selection;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid var(--red-ui-secondary-border-color);
|
|
background: var(--red-ui-palette-header-background);
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.red-ui-tray-footer {
|
|
@include component-footer;
|
|
height: 35px;
|
|
font-size: 14px !important;
|
|
line-height: 35px;
|
|
vertical-align: middle;
|
|
|
|
button.red-ui-button {
|
|
padding: 0px 8px;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
&.toggle.selected {
|
|
color: var(--red-ui-workspace-button-color-selected) !important;
|
|
background: var(--red-ui-workspace-button-background) !important;
|
|
}
|
|
}
|
|
|
|
.red-ui-tray-footer-left {
|
|
margin-right: 20px;
|
|
float:left;
|
|
& :not(:first-child) {
|
|
margin-left: 5px
|
|
}
|
|
}
|
|
.red-ui-tray-footer-right {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.red-ui-tray-toolbar {
|
|
text-align: right;
|
|
padding: 6px;
|
|
|
|
button {
|
|
@include editor-button;
|
|
&.toggle {
|
|
@include workspace-button-toggle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.red-ui-tray-titlebar {
|
|
color: var(--red-ui-header-text-color);
|
|
border-bottom: 1px solid var(--red-ui-secondary-border-color);
|
|
padding: 8px;
|
|
}
|
|
.red-ui-editor ul.red-ui-tray-breadcrumbs {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding:0;
|
|
overflow-wrap: anywhere;
|
|
li {
|
|
display: inline-block;
|
|
padding:0;
|
|
margin:0;
|
|
|
|
&:not(:last-child) {
|
|
color: var(--red-ui-workspace-button-color);
|
|
font-weight: normal;
|
|
|
|
&:after {
|
|
display: inline-block;
|
|
content: '>';
|
|
margin: 0 5px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.red-ui-tray-resize-handle {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
width: 7px;
|
|
left: -9px;
|
|
background-color: var(--red-ui-primary-background);
|
|
cursor: col-resize;
|
|
border-left: 1px solid var(--red-ui-primary-border-color);
|
|
box-shadow: -1px 0 6px var(--red-ui-shadow);
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-mask-image: url(images/grip.svg);
|
|
mask-image: url(images/grip.svg);
|
|
-webkit-mask-size: auto;
|
|
mask-size: auto;
|
|
-webkit-mask-position: 50% 50%;
|
|
mask-position: 50% 50%;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
background-color: var(--red-ui-grip-color);
|
|
}
|
|
|
|
&.red-ui-tray-resize-maximised {
|
|
background: var(--red-ui-primary-background);
|
|
cursor: default;
|
|
}
|
|
}
|
|
a.red-ui-tray-resize-button,
|
|
button.red-ui-tray-resize-button {
|
|
@include workspace-button;
|
|
display: block;
|
|
height: 37px;
|
|
line-height: 35px;
|
|
border: none;
|
|
border-bottom: 1px solid var(--red-ui-secondary-border-color);
|
|
margin: 0;
|
|
background: var(--red-ui-primary-background);
|
|
color: var(--red-ui-workspace-button-color);
|
|
}
|
|
|
|
.red-ui-editor .red-ui-tray {
|
|
.dialog-form, #dialog-form, #node-config-dialog-edit-form {
|
|
margin: 10px 20px;
|
|
height: calc(100% - 20px);
|
|
}
|
|
}
|
|
|
|
.red-ui-editor,.red-ui-editor-dialog {
|
|
|
|
.dialog-form, #dialog-form, #node-config-dialog-edit-form {
|
|
margin: 0;
|
|
height:100%;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: var(--red-ui-form-input-border-error-color) !important;
|
|
}
|
|
|
|
.input-updated {
|
|
border-color: var(--red-ui-node-selected-color) !important;
|
|
}
|
|
|
|
.form-row {
|
|
clear: both;
|
|
color: var(--red-ui-form-text-color);
|
|
margin-bottom:12px;
|
|
}
|
|
.form-row label {
|
|
display: inline-block;
|
|
width: 100px;
|
|
}
|
|
.form-row input, .form-row div[contenteditable="true"] {
|
|
width:70%;
|
|
}
|
|
.form-tips {
|
|
background: var(--red-ui-form-tips-background);
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
border: 1px solid var(--red-ui-secondary-border-color);
|
|
max-width: 450px;
|
|
}
|
|
.form-tips code {
|
|
border: none;
|
|
padding: auto;
|
|
}
|
|
.form-tips a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.form-warning {
|
|
border-color: var(--red-ui-text-color-error);
|
|
}
|
|
}
|
|
|
|
.node-text-editor {
|
|
position: relative;
|
|
.red-ui-editor-text-help {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 1px;
|
|
border-bottom-right-radius: 5px;
|
|
z-Index: 8;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
}
|
|
.red-ui-editor-text-container {
|
|
border:1px solid var(--red-ui-tertiary-border-color);
|
|
border-radius:5px;
|
|
overflow: hidden;
|
|
font-size: var(--red-ui-primary-font-size !important);
|
|
font-family: var(--red-ui-monospace-font !important);
|
|
height: 100%;
|
|
|
|
&.red-ui-editor-text-container-toolbar {
|
|
height: calc(100% - 40px);
|
|
}
|
|
}
|
|
|
|
a.editor-button, // Deprecated: use .red-ui-button
|
|
button.editor-button, // Deprecated: use .red-ui-button
|
|
a.red-ui-button,
|
|
button.red-ui-button
|
|
{
|
|
@include workspace-button;
|
|
height: 34px;
|
|
line-height: 32px;
|
|
font-size: 13px;
|
|
border-radius: 2px;
|
|
padding: 0 10px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
&.toggle {
|
|
@include workspace-button-toggle;
|
|
}
|
|
}
|
|
|
|
|
|
a.editor-button-small, // Deprecated: use .red-ui-button-small
|
|
button.editor-button-small, // Deprecated: use .red-ui-button-small
|
|
a.red-ui-button-small,
|
|
button.red-ui-button-small
|
|
{
|
|
height: 20px;
|
|
min-width: 20px;
|
|
line-height: 18px;
|
|
font-size: 10px;
|
|
border-radius: 2px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#red-ui-editor-config-scope-warning {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
color: var(--red-ui-text-color-warning);
|
|
vertical-align: middle;
|
|
}
|
|
#red-ui-editor-config-scope {
|
|
margin: 1px 0 0 0;
|
|
padding: 0;
|
|
height: 22px;
|
|
width: 200px;
|
|
|
|
}
|
|
|
|
.red-ui-editor .red-ui-tray .red-ui-editor-type-expression #dialog-form {
|
|
margin: 0;
|
|
height: 100%;
|
|
.red-ui-panel {
|
|
&:first-child {
|
|
padding: 20px 20px 0;
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editor-type-expression-tab-content {
|
|
position: relative;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
#red-ui-editor-type-expression-help {
|
|
position: absolute;
|
|
top: 35px;
|
|
left:0;
|
|
right: 0;
|
|
bottom:0;
|
|
padding: 0 20px;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
#red-ui-editor-type-expression-panel-info {
|
|
& > .form-row {
|
|
margin: 0;
|
|
& > div:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editor-type-expression-legacy {
|
|
float: left;
|
|
}
|
|
.red-ui-editor-type-buffer-type {
|
|
text-align: right;
|
|
}
|
|
.red-ui-editor .red-ui-tray .red-ui-editor-type-markdown-editor #dialog-form {
|
|
margin: 0;
|
|
height: 100%;
|
|
.red-ui-panel {
|
|
padding: 20px 20px 10px;
|
|
&:last-child {
|
|
padding-top: 60px;
|
|
background: var(--red-ui-primary-background);
|
|
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editor-type-markdown-panel-preview {
|
|
padding: 10px;
|
|
border:1px solid var(--red-ui-secondary-border-color);
|
|
border-radius:5px;
|
|
height: calc(100% - 21px);
|
|
overflow-y: auto;
|
|
background: var(--red-ui-secondary-background);
|
|
}
|
|
|
|
#red-ui-clipboard-hidden {
|
|
position: absolute;
|
|
top: -3000px;
|
|
}
|
|
|
|
.form-row .red-ui-editor-node-label-form-row {
|
|
margin: 5px 0 0 50px;
|
|
label {
|
|
margin-right: 20px;
|
|
text-align: right;
|
|
width: 30px;
|
|
}
|
|
button {
|
|
margin-left: 10px;
|
|
}
|
|
input {
|
|
width: calc(100% - 100px);
|
|
}
|
|
#red-ui-editor-node-icon-module {
|
|
width: calc(55% - 50px);
|
|
}
|
|
#red-ui-editor-node-icon-file {
|
|
width: calc(45% - 55px);
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.red-ui-editor-node-label-form-none {
|
|
span {
|
|
padding-left: 50px;
|
|
width: 100px;
|
|
color: var(--red-ui-secondary-text-color);
|
|
}
|
|
}
|
|
|
|
button.red-ui-button.red-ui-editor-node-appearance-button {
|
|
position: relative;
|
|
height: 35px !important;
|
|
text-align: left;
|
|
padding: 0 6px 0 3px;
|
|
>i {
|
|
width: 15px;
|
|
vertical-align: middle;
|
|
padding-left: 2px;
|
|
}
|
|
.red-ui-search-result-node {
|
|
vertical-align: middle;
|
|
float: none;
|
|
position: relative;
|
|
top: -1px;
|
|
|
|
}
|
|
}
|
|
|
|
.red-ui-group-layout-picker {
|
|
padding: 5px;
|
|
background: var(--red-ui-secondary-background);
|
|
}
|
|
.red-ui-group-layout-picker-cell-text {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 2px;
|
|
border-top: 2px solid var(--red-ui-secondary-text-color);
|
|
border-bottom: 2px solid var(--red-ui-secondary-text-color);
|
|
margin: 2px;
|
|
|
|
&.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
|
|
&.red-ui-group-layout-text-pos-n { top: 0; left: calc(50% - 9px); }
|
|
&.red-ui-group-layout-text-pos-ne { top: 0; right: 0; }
|
|
&.red-ui-group-layout-text-pos-sw { bottom: 0; left: 0; }
|
|
&.red-ui-group-layout-text-pos-s { bottom: 0; left: calc(50% - 9px); }
|
|
&.red-ui-group-layout-text-pos-se { bottom: 0; right: 0; }
|
|
&.red-ui-group-layout-text-pos- {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
margin: 0;
|
|
background-color: #FFF;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0, 50% 50%;
|
|
background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.red-ui-group-layout-picker button.red-ui-search-result-node {
|
|
float: none;
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 5px;
|
|
width: 32px;
|
|
height: 27px;
|
|
}
|
|
|
|
button.red-ui-group-layout-picker-none {
|
|
width: 100%;
|
|
}
|
|
|
|
.red-ui-color-picker {
|
|
input[type="text"] {
|
|
border-radius:0;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
border: none;
|
|
border-bottom: 1px solid var(--red-ui-form-input-border-color);
|
|
}
|
|
small {
|
|
color: var(--red-ui-secondary-text-color);
|
|
margin-left: 5px;
|
|
margin-right: 4px;
|
|
display: inline-block;
|
|
min-width: 35px;
|
|
text-align: right;
|
|
}
|
|
background: var(--red-ui-primary-background);
|
|
}
|
|
.red-ui-editor-node-appearance-button {
|
|
.red-ui-search-result-node {
|
|
overflow: hidden
|
|
}
|
|
}
|
|
.red-ui-color-picker-cell {
|
|
padding: 0;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: var(--red-ui-secondary-border-color);
|
|
}
|
|
.red-ui-color-picker-swatch {
|
|
position: absolute;
|
|
top:-1px;right:-1px;left:-1px;bottom:-1px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.red-ui-color-picker-cell-none {
|
|
height: 100%;
|
|
background-color: #FFF;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0, 50% 50%;
|
|
background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent)
|
|
}
|
|
.red-ui-search-result-node .red-ui-color-picker-cell-none {
|
|
border-radius: 4px;
|
|
background-size: 50% 50%;
|
|
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
|
}
|
|
|
|
.red-ui-color-picker-opacity-slider {
|
|
position:relative;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
width: calc(100% - 50px);
|
|
height: 14px;
|
|
margin: 6px 3px 8px;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
background-image:
|
|
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 25%),
|
|
linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 25%);
|
|
background-size: 6px 6px;
|
|
}
|
|
.red-ui-color-picker-opacity-slider-overlay {
|
|
position: absolute;
|
|
top:0;right:0;left:0;bottom:0;
|
|
background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
|
|
background-size: 100% 100%;
|
|
border: 1px solid var(--red-ui-primary-border-color);
|
|
}
|
|
|
|
div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
|
|
z-Index: 10;
|
|
top: -4px;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
width: 10px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: 1px solid var(--red-ui-primary-border-color);
|
|
border-radius: 1px;
|
|
background: var(--red-ui-secondary-background);
|
|
box-sizing: border-box;
|
|
}
|
|
.red-ui-icon-picker {
|
|
select {
|
|
box-sizing: border-box;
|
|
margin: 3px;
|
|
width: calc(100% - 6px);
|
|
}
|
|
}
|
|
.red-ui-icon-list {
|
|
width: 308px;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
line-height: 0px;
|
|
position: relative;
|
|
&.red-ui-icon-list-dark {
|
|
.red-ui-palette-icon-fa {
|
|
color: var(--red-ui-secondary-text-color);
|
|
}
|
|
.red-ui-palette-icon-container {
|
|
background: var(--red-ui-secondary-background);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
.red-ui-icon-list-icon {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
background: var(--red-ui-list-item-background-hover);
|
|
}
|
|
&.selected {
|
|
background: var(--red-ui-list-item-background-selected);
|
|
.red-ui-search-result-node {
|
|
// border-color: white;
|
|
}
|
|
}
|
|
.red-ui-palette-icon-fa {
|
|
top: 6px;
|
|
left: 3px;
|
|
}
|
|
}
|
|
.red-ui-icon-list-module {
|
|
background: var(--red-ui-palette-header-background);
|
|
font-size: 0.9em;
|
|
padding: 3px;
|
|
color: var(--red-ui-secondary-text-color);
|
|
clear: both;
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.red-ui-icon-meta {
|
|
border-top: 1px solid var(--red-ui-secondary-border-color);
|
|
background: var(--red-ui-tertiary-background);
|
|
height: 24px;
|
|
span {
|
|
padding: 4px;
|
|
color: var(--red-ui-secondary-text-color);
|
|
font-size: 0.9em;
|
|
line-height: 24px;
|
|
}
|
|
button {
|
|
float: right;
|
|
margin: 2px;
|
|
}
|
|
}
|
|
|
|
|
|
.red-ui-editor input.red-ui-editor-type-json-editor-key {
|
|
width: 150px;
|
|
}
|
|
|
|
.red-ui-editor-type-json-editor {
|
|
height: calc(100% - 10px);
|
|
.red-ui-treeList-container {
|
|
background: var(--red-ui-secondary-background);
|
|
}
|
|
.red-ui-treeList-label {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
white-space: nowrap;
|
|
min-height: 35px;
|
|
.red-ui-treeList-icon:before {
|
|
content:'';
|
|
display: inline-block;
|
|
height: 35px;
|
|
vertical-align: middle;
|
|
}
|
|
> span, > span > span {
|
|
vertical-align: middle;
|
|
}
|
|
&:hover, &:hover .red-ui-treeList-sublabel-text {
|
|
background: var(--red-ui-secondary-background-disabled);
|
|
.red-ui-editor-type-json-editor-item-gutter {
|
|
> span, > button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
&.selected {
|
|
.red-ui-editor-type-json-editor-item-gutter {
|
|
background: var(--red-ui-secondary-background-hover);
|
|
}
|
|
&:hover {
|
|
.red-ui-editor-type-json-editor-item-gutter {
|
|
background: var(--red-ui-secondary-background-selected);
|
|
}
|
|
}
|
|
}
|
|
&.red-ui-editor-type-json-root-node {
|
|
.red-ui-editor-type-json-editor-item-gutter {
|
|
> span, > button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editor-type-json-editor-controls {
|
|
height: 34px;
|
|
line-height: 34px;
|
|
display: none;
|
|
}
|
|
.red-ui-editor-type-json-editor-key {
|
|
width: 100px;
|
|
}
|
|
.red-ui-editor-type-json-editor-label {
|
|
display: inline-block;
|
|
white-space: pre-wrap;
|
|
}
|
|
.red-ui-editor-type-json-editor-label-value {
|
|
min-width: 200px;
|
|
}
|
|
.red-ui-editor-type-json-editor-label-value,
|
|
.red-ui-editor-type-json-editor-label-key {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
min-height: 34px;
|
|
line-height: 30px;
|
|
padding: 0 2px;
|
|
border: 2px solid rgba(0,0,0,0);
|
|
border-radius: 3px;
|
|
&:not(.red-ui-editor-type-json-editor-label-array-key):hover {
|
|
border-color: var(--red-ui-list-item-background-hover);
|
|
border-style: dashed;
|
|
}
|
|
&.readonly {
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.red-ui-editor-type-json-editor-item-gutter {
|
|
width: 48px;
|
|
padding-left: 4px;
|
|
|
|
height: 100%;
|
|
line-height: 35px;
|
|
color: var(--red-ui-tertiary-text-color);
|
|
background: var(--red-ui-secondary-background-disabled);
|
|
> span {
|
|
display: inline-block;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
width: 20px;
|
|
text-align:center;
|
|
}
|
|
> span, > button {
|
|
display: none;
|
|
}
|
|
&.readonly {
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
|
|
.red-ui-editor-type-json-editor-item-handle {
|
|
cursor: move;
|
|
}
|
|
.red-ui-editor-type-json-tab-content {
|
|
position: relative;
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
button.red-ui-toggleButton.toggle {
|
|
text-align: left;
|
|
i {
|
|
min-width: 15px;
|
|
}
|
|
}
|
|
|
|
|
|
.red-ui-editor-subflow-env-ui-row {
|
|
margin-right: 3px;
|
|
>div {
|
|
display: grid;
|
|
grid-template-columns: 16px 40px 35% auto;
|
|
}
|
|
>div:first-child {
|
|
font-size: 0.9em;
|
|
color: var(--red-ui-tertiary-text-color);
|
|
margin: 3px 0 -4px;
|
|
>div {
|
|
padding-left: 3px;
|
|
}
|
|
}
|
|
>div:last-child {
|
|
>div {
|
|
height: 40px;
|
|
line-height: 30px;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
// border-left: 2px dashed var(--red-ui-secondary-border-color);
|
|
// border-bottom: 2px dashed var(--red-ui-secondary-border-color);
|
|
// border: 1px dashed var(--red-ui-secondary-border-color);
|
|
border-right: none;
|
|
&:not(:first-child) {
|
|
padding: 3px;
|
|
}
|
|
// &:last-child {
|
|
// border-right: 1px dashed var(--red-ui-secondary-border-color);
|
|
// }
|
|
.placeholder-input {
|
|
position: relative;
|
|
padding: 0 3px;
|
|
line-height: 24px;
|
|
opacity: 0.8
|
|
}
|
|
.red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
|
|
select,.placeholder-input {
|
|
margin: 3px;
|
|
height: 24px;
|
|
width: calc(100% - 10px);
|
|
padding-left: 3px;
|
|
}
|
|
select {
|
|
padding: 0 3px;
|
|
font-size: 11px;
|
|
}
|
|
.placeholder-input {
|
|
span:first-child {
|
|
display:inline-block;
|
|
height: 100%;
|
|
width: 20px;
|
|
text-align:center;
|
|
border-right: 1px solid var(--red-ui-secondary-border-color);
|
|
background: var(--red-ui-tertiary-background);
|
|
}
|
|
}
|
|
input[type="checkbox"] {
|
|
margin-left: 8px;
|
|
margin-top: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
>div:nth-child(1) {
|
|
border: none;
|
|
padding: 2px;
|
|
.red-ui-editableList-item-handle {
|
|
position:relative;
|
|
top: 0px;
|
|
color: var(--red-ui-tertiary-text-color);
|
|
}
|
|
}
|
|
>div:nth-child(2) {
|
|
margin: 4px;
|
|
height: 32px;
|
|
border: 1px dashed var(--red-ui-secondary-border-color);
|
|
text-align: center;
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 32px;
|
|
&:hover {
|
|
background: var(--red-ui-secondary-background-hover);
|
|
}
|
|
i {
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
>div:nth-child(3) {
|
|
position: relative;
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
span.red-ui-editor-subflow-env-lang-icon {
|
|
position: absolute;
|
|
display: inline-block;
|
|
background: var(--red-ui-secondary-background);
|
|
opacity: 0.8;
|
|
width: 20px;
|
|
line-height: 32px;
|
|
height: 32px;
|
|
text-align: center;
|
|
top: 4px;
|
|
right: 4px;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.red-ui-editor-subflow-env-input-type {
|
|
background: var(--red-ui-secondary-background);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.red-ui-editor-subflow-env-input-type-placeholder {
|
|
color: var(--red-ui-tertiary-text-color);
|
|
padding-left: 4px;
|
|
}
|
|
|
|
// .red-ui-editor-subflow-ui-grid {
|
|
// width: 100%;
|
|
// .red-ui-editableList-container {
|
|
// border: none;
|
|
// border-radius: 0;
|
|
// }
|
|
// .red-ui-editableList-container li {
|
|
// border: none;
|
|
// padding: 0;
|
|
// &:not(:first-child) .red-ui-editableList-item-content >div:first-child >div {
|
|
// border-top: none;
|
|
// }
|
|
// &.ui-sortable-helper {
|
|
// border: 2px dashed var(--red-ui-secondary-border-color);
|
|
// .red-ui-editableList-item-content {
|
|
// >div {
|
|
// border: none;
|
|
// opacity: 0.7
|
|
// }
|
|
//
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
// .red-ui-editableList-item-content {
|
|
// >div>div {
|
|
// display: inline-block;
|
|
// box-sizing: border-box;
|
|
// border-left: 1px dashed var(--red-ui-secondary-border-color);
|
|
// border-bottom: 1px dashed var(--red-ui-secondary-border-color);
|
|
// }
|
|
// >div:first-child {
|
|
// font-size: 0.9em;
|
|
// display: grid;
|
|
// grid-template-columns: 25px auto 20px;
|
|
// >div {
|
|
// border-top: 1px dashed var(--red-ui-secondary-border-color);
|
|
// padding: 1px;
|
|
// }
|
|
// >div:nth-child(3) {
|
|
// border-top: none;
|
|
// border-bottom: none;
|
|
// // width: 20px;
|
|
// }
|
|
// }
|
|
// >div:last-child {
|
|
// display: grid;
|
|
// grid-template-columns: 25px 140px auto 20px;
|
|
// >div {
|
|
// height: 48px;
|
|
// line-height: 30px;
|
|
// // display: inline-block;
|
|
// // height: 48px;
|
|
// // line-height: 30px;
|
|
// // box-sizing: border-box;
|
|
// //
|
|
// // border-left: 2px dashed var(--red-ui-secondary-border-color);
|
|
// border-top: none;
|
|
// // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
|
|
// &:not(:first-child) {
|
|
// padding: 6px 3px;
|
|
// }
|
|
// .placeholder-input {
|
|
// position: relative;
|
|
// padding: 0 3px;
|
|
// line-height: 24px;
|
|
// opacity: 0.8
|
|
// }
|
|
// .red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
|
|
// select,.placeholder-input {
|
|
// margin: 3px;
|
|
// height: 26px;
|
|
// width: calc(100% - 10px);
|
|
// padding-left: 3px;
|
|
// }
|
|
// input[type="checkbox"] {
|
|
// margin-left: 8px;
|
|
// margin-top: 0;
|
|
// height: 100%;
|
|
// }
|
|
// }
|
|
// }
|
|
// >div:nth-child(1) {
|
|
// text-align: center;
|
|
// a {
|
|
// display: block;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// line-height: 45px;
|
|
// &:hover {
|
|
// background: var(--red-ui-secondary-background-hover);
|
|
// }
|
|
// }
|
|
// }
|
|
// >div:nth-child(2) {
|
|
// input {
|
|
// width: 100%;
|
|
// }
|
|
// // width: 140px;
|
|
// }
|
|
// >div:nth-child(3) {
|
|
// position: relative;
|
|
// .options-button {
|
|
// position: absolute;
|
|
// top: calc(50% - 10px);
|
|
// margin-right: 2px;
|
|
// right: 2px;
|
|
// }
|
|
// }
|
|
// >div:nth-child(4) {
|
|
// border-top: none;
|
|
// border-bottom: none;
|
|
// // width: 20px;
|
|
// }
|
|
//
|
|
// }
|
|
// }
|
|
// }
|
|
.red-ui-editor-subflow-ui-edit-panel {
|
|
padding-bottom: 3px;
|
|
background: var(--red-ui-primary-background);
|
|
.red-ui-editableList-border {
|
|
border: none;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--red-ui-secondary-border-color);
|
|
}
|
|
.red-ui-editableList-container {
|
|
}
|
|
.red-ui-editableList-addButton {
|
|
margin-left: 2px;
|
|
}
|
|
.red-ui-editableList-header {
|
|
background: var(--red-ui-primary-background);
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
color: var(--red-ui-secondary-text-color);
|
|
div:first-child {
|
|
padding-left: 23px;
|
|
}
|
|
div:last-child {
|
|
padding-left: 3px;
|
|
}
|
|
}
|
|
.red-ui-editableList-container {
|
|
padding: 0 1px;
|
|
li {
|
|
background: var(--red-ui-secondary-background);
|
|
// border-bottom: none;
|
|
padding: 0;
|
|
.red-ui-editableList-item-content {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
>div {
|
|
position:relative;
|
|
|
|
}
|
|
}
|
|
input {
|
|
margin-bottom: 0;
|
|
border:none;
|
|
width: 100%;
|
|
border-right: 1px solid var(--red-ui-secondary-border-color);
|
|
|
|
border-radius: 0;
|
|
&:focus {
|
|
box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color);
|
|
}
|
|
&:first-child {
|
|
border-left: 1px solid var(--red-ui-secondary-border-color);
|
|
}
|
|
}
|
|
button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
|
|
border-radius: 0;
|
|
height: 34px;
|
|
}
|
|
.red-ui-typedInput-container {
|
|
border-radius: 0;
|
|
border: none;
|
|
input.red-ui-typedInput-input {
|
|
height: 34px;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.red-ui-editor-subflow-env-lang-icon {
|
|
top: 1px;
|
|
right: 1px;
|
|
border-top-right-radius:0;
|
|
border-bottom-right-radius:0;
|
|
}
|
|
.red-ui-editableList-item-remove {
|
|
right: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-input-env-locales-row {
|
|
position: relative;
|
|
top: -20px;
|
|
float: right;
|
|
select {
|
|
padding: 2px;
|
|
width: 160px;
|
|
height: auto;
|
|
min-width: 20px;
|
|
line-height: 18px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
.node-input-env-container-row {
|
|
min-width: 470px;
|
|
position: relative;
|
|
.red-ui-editableList-item-content {
|
|
label {
|
|
margin-bottom: 0;
|
|
line-height: 32px;
|
|
span {
|
|
display: inline-block;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
>div:first-child {
|
|
display: grid;
|
|
padding-left: 5px;
|
|
grid-template-columns: 40% auto 37px;
|
|
> :first-child {
|
|
width: calc(100% - 5px);
|
|
}
|
|
input {
|
|
width: calc(100% - 5px);
|
|
}
|
|
}
|
|
&.red-ui-editor-subflow-env-editable {
|
|
>div:first-child {
|
|
padding-left: 0;
|
|
grid-template-columns: 24px 40% auto 37px;
|
|
> a:first-child {
|
|
text-align: center;
|
|
line-height: 32px;
|
|
i.fa-angle-right {
|
|
transition: all 0.2s linear;
|
|
}
|
|
&.expanded {
|
|
i.fa-angle-right {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editableList-border .red-ui-editableList-header {
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
|
|
background: var(--red-ui-tertiary-background);
|
|
padding: 0;
|
|
>div {
|
|
display: grid;
|
|
grid-template-columns: 24px 40% auto 37px;
|
|
>div {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
.red-ui-editableList-container {
|
|
padding: 0;
|
|
.red-ui-editableList-item-handle {
|
|
top: 25px;
|
|
}
|
|
.red-ui-editableList-item-remove {
|
|
top: 25px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
#subflow-input-ui {
|
|
// .form-row {
|
|
// display: grid;
|
|
// grid-template-columns: 120px auto;
|
|
// label span {
|
|
// display: inline-block;
|
|
// width: 20px;
|
|
// text-align: center;
|
|
// }
|
|
// }
|
|
}
|