mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Move common components and add searchBox
This commit is contained in:
Nick O'Leary
71
editor/sass/ui/common/editableList.scss
Normal file
71
editor/sass/ui/common/editableList.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Copyright 2016 IBM Corp.
|
||||
*
|
||||
* 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-editableList-container {
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
|
||||
.red-ui-editableList-list {
|
||||
list-style-type:none;
|
||||
margin: 0;
|
||||
}
|
||||
.red-ui-editabelList-item-placeholder {
|
||||
border: 2px dashed $secondary-border-color !important;
|
||||
}
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin:0;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
min-height: 20px;
|
||||
.red-ui-editableList-item-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
margin-top: -7px;
|
||||
color: #eee;
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editableList-item-remove {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
border-top: 1px solid $secondary-border-color;
|
||||
}
|
||||
//.red-ui-editableList-item-content { outline: 1px solid red}
|
||||
|
||||
&.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
|
||||
margin-left: 22px;
|
||||
}
|
||||
&.red-ui-editableList-item-removable .red-ui-editableList-item-content {
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.red-ui-editableList-item-deleting {
|
||||
background: #fee;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
69
editor/sass/ui/common/searchBox.scss
Normal file
69
editor/sass/ui/common/searchBox.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* Copyright 2016 IBM Corp.
|
||||
*
|
||||
* 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-searchBox-container {
|
||||
i {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
i.fa-search {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
i.fa-times {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 12px;
|
||||
}
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
padding: 3px 17px 3px 22px;
|
||||
margin: 0px;
|
||||
height: 30px;
|
||||
box-sizing:border-box;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
display: none;
|
||||
}
|
||||
.red-ui-searchBox-resultCount {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 7px;
|
||||
background: #eee;
|
||||
color: #666;
|
||||
padding: 1px 8px;
|
||||
font-size: 9px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
150
editor/sass/ui/common/typedInput.scss
Normal file
150
editor/sass/ui/common/typedInput.scss
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
*
|
||||
* 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-typedInput-container {
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
height: 34px;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
overflow:hidden;
|
||||
position: relative;
|
||||
.red-ui-typedInput-input {
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
outline: red;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0 0 0 1px;
|
||||
margin:0;
|
||||
height: 32px;
|
||||
border:none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
box-shadow: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.red-ui-typedInput-focus:not(.input-error) {
|
||||
border-color: $form-input-focus-color !important;
|
||||
}
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
padding: 0 1px 0 5px;
|
||||
display:inline-block;
|
||||
background: $typedInput-button-background;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
i {
|
||||
position:relative;
|
||||
top:-3px;
|
||||
margin-right:4px;
|
||||
margin-top: 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
i {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 1px 0 5px;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
text-decoration: none;
|
||||
background: $typedInput-button-background-hover;
|
||||
|
||||
span {
|
||||
background: $typedInput-button-background-hover;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:not(.disabled):active {
|
||||
background: $typedInput-button-background-active;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.red-ui-typedInput-option-trigger {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
padding: 0 5px 0 0;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
i {
|
||||
position:absolute;
|
||||
right: 4px;
|
||||
top: 7px;
|
||||
}
|
||||
span {
|
||||
background:#fff;
|
||||
position:absolute;
|
||||
left:0;
|
||||
right:23px;
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.red-ui-typedInput-options {
|
||||
@include component-shadow;
|
||||
position: absolute;
|
||||
border: 1px solid $primary-border-color;
|
||||
background: #fff;
|
||||
z-index: 2000;
|
||||
a {
|
||||
padding: 6px 18px 6px 6px;
|
||||
display: block;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
color: #333;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: $typedInput-button-background-hover;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:active {
|
||||
background: $typedInput-button-background-active;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user