1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
node-red/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
2020-04-27 11:17:19 +01:00

452 lines
10 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-sidebar-info hr {
margin: 10px 0;
}
table.red-ui-info-table {
font-size: 14px;
margin: 0 0 10px;
width: 100%;
}
table.red-ui-info-table tr:not(.blank) {
border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-help-property-expand {
font-size: 0.8em;
text-align: right;
line-height: 0.9em;
a {
padding-bottom: 5px;
}
}
table.red-ui-info-table tr.blank {
border: none;
th {
text-align: left;
font-weight: 500;
color: $primary-text-color;
padding: 6px 3px 3px;
}
>* {
padding-top: 8px;
border: none;
padding-left: 0px;
}
a {
display: block;
color: $primary-text-color;
&:hover,&:focus {
color: $primary-text-color;
text-decoration: none;
}
&:not(.expanded) {
.red-ui-help-property-more {
display: inline;
}
.red-ui-help-property-less {
display: none;
}
}
i {
width: 10px;
text-align: center;
transition: transform 0.2s ease-in-out;
}
&.expanded {
.red-ui-help-property-more {
display: none;
}
.red-ui-help-property-less {
display: inline;
}
i {
transform: rotate(180deg);
}
}
}
}
.red-ui-help-info-none {
font-style: italic;
color: $tertiary-text-color;
}
table.red-ui-info-table tr:not(.blank) td:first-child{
color: $header-text-color;
vertical-align: top;
width: 90px;
padding: 3px 3px 3px 6px;
background:$tertiary-background;
border-right: 1px solid $secondary-border-color;
}
table.red-ui-info-table tr:not(.blank) td:last-child{
padding: 3px 3px 3px 6px;
color: $primary-text-color;
overflow-y: hidden;
}
div.red-ui-info-table {
margin: 5px;
}
.red-ui-help {
font-size: $primary-font-size;
line-height: 1.5em;
a {
color: $info-text-link-color;
text-decoration: none;
}
a:hover,
a:focus {
color: $info-text-link-color;
text-decoration: underline;
}
h1 {
font-weight: 500;
font-size: 1.296em;
line-height: 1.3em;
margin: 8px auto;
}
h2 {
font-weight: 500;
font-size: 1.215em;
margin: 8px auto;
line-height: 1.3em;
}
h3 {
font-weight: 500;
font-size: 1.138em;
margin: 7px auto 5px;
line-height: 1.3em;
}
h4,
h5 {
font-weight: 500;
font-size: 1.067em;
line-height: 1.3em;
margin: 8px auto 5px;
}
& > span > p:first-child {
}
dl.message-properties {
border: 1px solid $secondary-border-color;
border-radius: 2px;
margin: 5px auto 10px;
&>dt {
padding: 0px 3px 2px 3px;
font-family: $monospace-font;
font-weight: normal;
margin: 5px 3px 1px;
color: $text-color-warning;
white-space: nowrap;
&.optional {
font-style: italic;
}
.property-type {
font-family: $primary-font;
color: $primary-text-color;
font-style: italic;
font-size: 11px;
float: right;
}
&:after {
content: "";
display: table;
clear: both;
}
}
&>dd {
margin: 0px 8px 2px 13px;
vertical-align: top;
}
}
ol.node-ports {
margin: 0;
li {
border: 1px solid $secondary-border-color;
border-radius: 2px;
list-style-position: inside;
padding: 3px;
margin-bottom: 5px;
dl.message-properties {
border: none;
}
}
}
.red-ui-help-info-header {
i {
width: 10px;
text-align: center;
transition: transform 0.2s ease-in-out;
margin-right: 4px;
}
color: $header-text-color;
&:hover, &:focus {
text-decoration: none;
}
&.expanded {
i {
transform: rotate(90deg);
}
}
}
}
.red-ui-sidebar-info-stack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
.red-ui-help-tips {
display: none;
position: absolute;
left:0;
right:0;
bottom: 0;
height: 150px;
box-sizing: border-box;
border-top: 1px solid $secondary-border-color;
background-color: $secondary-background;
padding: 20px;
box-shadow: 0 5px 20px 0px $shadow;
overflow-y: auto;
}
.red-ui-sidebar-info.show-tips {
.red-ui-sidebar-info-stack {
bottom: 150px;
}
.red-ui-help-tips {
display: block;
}
}
.red-ui-help-tips:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.red-ui-help-tip {
display: inline-block;
vertical-align: middle;
width: 100%;
font-size: 16px;
text-align: center;
line-height: 1.9em;
color : $tertiary-text-color;
@include disable-selection;
cursor: default;
}
.red-ui-help-tips-buttons {
position: absolute;
top: 4px;
right: 6px;
a {
color: $secondary-text-color;
border-color: $secondary-border-color !important;
margin-left: 4px;
}
}
.node-info-property-config-node {
border: 1px solid $secondary-border-color;
border-radius: 4px;
padding: 2px 4px 2px;
}
.red-ui-help-search {
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-info-outline {
display: flex;
flex-direction: column;
.red-ui-treeList {
flex-grow: 1;
}
.red-ui-treeList-container,.red-ui-editableList-border {
border: none;
border-radius: 0;
}
.red-ui-treeList-label {
font-size: 13px;
padding: 2px 0;
overflow: hidden;
}
.red-ui-info-outline-item {
display: inline-block;
padding: 0;
font-size: 13px;
border: none;
.red-ui-palette-icon-fa {
position: relative;
top: 1px;
left: 0px;
}
&:hover {
background: inherit
}
&.red-ui-info-outline-item-flow {
.red-ui-search-result-description {
margin-left: 4px;
}
}
&.red-ui-info-outline-item-group .red-ui-search-result-node {
background: none;
border-color: transparent;
.red-ui-palette-icon-container {
background: none;
}
.red-ui-palette-icon-fa {
color: $secondary-text-color;
font-size: 18px;
}
}
&.red-ui-info-outline-item-empty {
font-style: italic;
color: $form-placeholder-color;
}
}
.red-ui-search-result-node {
width: 24px;
height: 20px;
margin-top: 1px;
}
.red-ui-palette-icon-container {
width: 24px;
}
.red-ui-palette-icon {
width: 20px;
}
.red-ui-search-result-description {
margin-left: 32px;
line-height: 22px;
white-space: nowrap;
}
.red-ui-search-result-node-label {
color: $secondary-text-color;
}
}
.red-ui-info-outline-item-control-spacer {
display: inline-block;
width: 23px;
}
.red-ui-info-outline-item-controls {
position: absolute;
top:0;
bottom: 0;
right: 0px;
padding: 2px 0 0 1px;
text-align: right;
background: $list-item-background;
.red-ui-treeList-label:hover & {
background: $list-item-background-hover;
}
.red-ui-treeList-label.selected & {
background: $list-item-background-selected;
}
&.red-ui-info-outline-item-hover-controls button {
min-width: 23px;
}
.red-ui-treeList-label:not(:hover) &.red-ui-info-outline-item-hover-controls {
button {
border: none;
background: none;
}
}
.red-ui-info-outline-item-control-reveal,
.red-ui-info-outline-item-control-action {
display: none;
}
.red-ui-treeList-label:hover & {
.red-ui-info-outline-item-control-reveal,
.red-ui-info-outline-item-control-action {
display: inline-block;
}
}
.fa-ban {
display: none;
}
.red-ui-info-outline-item.red-ui-info-outline-item-disabled & {
.fa-ban {
display: inline-block;
}
.fa-circle-thin {
display: none;
}
}
button {
margin-right: 3px
}
}
.red-ui-info-outline-item-disabled {
.red-ui-search-result-node {
opacity: 0.4;
}
.red-ui-info-outline-item-label {
font-style: italic;
color: $secondary-text-color-disabled;
}
.red-ui-icons-flow {
opacity: 0.4;
}
}
.red-ui-icons {
display: inline-block;
width: 18px;
&:before {
white-space: pre;
content: ' '
}
}
.red-ui-icons-flow {
background-image: url('images/subflow_tab.svg');
background-repeat: no-repeat;
background-size: contain;
filter: brightness(2.5);
}
.red-ui-info-outline-toolbar {
border-bottom: 1px solid $secondary-border-color;
}