mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Merge branch '0.15.0'
This commit is contained in:
Nick O'Leary
@@ -20,6 +20,7 @@ $form-placeholder-color: #bbbbbb;
|
||||
$form-text-color: #444;
|
||||
$form-input-focus-color: rgba(85,150,230,0.8);
|
||||
$form-input-border-color: #ccc;
|
||||
$form-input-border-selected-color: #aaa;
|
||||
|
||||
|
||||
$node-selected-color: #ff7f0e;
|
||||
@@ -42,13 +43,17 @@ $palette-header-background: #f3f3f3;
|
||||
$workspace-button-background: #fff;
|
||||
$workspace-button-background-hover: #ddd;
|
||||
$workspace-button-background-active: #efefef;
|
||||
$workspace-button-color: #999;
|
||||
$workspace-button-color: #888;
|
||||
$workspace-button-color-disabled: #ccc;
|
||||
$workspace-button-color-focus: #999;
|
||||
$workspace-button-color-hover: #666;
|
||||
$workspace-button-color-active: #666;
|
||||
$workspace-button-color-selected: #AAA;
|
||||
|
||||
$workspace-button-toggle-color: #999;
|
||||
$workspace-button-toggle-color-selected: #888;
|
||||
$workspace-button-toggle-color-disabled: #ddd;
|
||||
|
||||
$workspace-button-color-focus-outline: rgba(85,150,230,0.2);
|
||||
|
||||
$typedInput-button-background: #efefef;
|
||||
@@ -61,4 +66,4 @@ $editor-button-background-primary-hover: #6E0A1E;
|
||||
$editor-button-color: #999;
|
||||
$editor-button-background: #fff;
|
||||
|
||||
$shade-color: rgba(220,220,220,0.5);
|
||||
$shade-color: rgba(100,100,100,0.5);
|
||||
|
||||
165
editor/sass/diff.scss
Normal file
165
editor/sass/diff.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* 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.
|
||||
**/
|
||||
|
||||
|
||||
#node-dialog-view-diff {
|
||||
height: 600px;
|
||||
|
||||
.red-ui-editableList-container {
|
||||
border-radius:1px;
|
||||
padding:0;
|
||||
}
|
||||
ol {
|
||||
position: absolute;
|
||||
top:10px;
|
||||
bottom:10px;
|
||||
left:10px;
|
||||
right:10px;
|
||||
li {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
.red-ui-editableList-item-content {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
.node-diff-tab {
|
||||
border: 1px solid $secondary-border-color;
|
||||
border-radius: 3px;
|
||||
|
||||
&.collapsed {
|
||||
.node-diff-tab-title > .node-diff-chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.node-diff-node-entry {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.node-diff-tab-stats {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.node-diff-chevron {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
margin: 3px 5px 3px 5px;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
|
||||
}
|
||||
.node-diff-node-entry {
|
||||
padding: 0 0 0 5px;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.node-diff-chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.node-diff-node-entry-properties {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout:fixed;
|
||||
}
|
||||
td, th {
|
||||
border: 1px solid $secondary-border-color;
|
||||
padding: 3px 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td:nth-child(1) {
|
||||
width: 150px;
|
||||
}
|
||||
td:not(:first-child) {
|
||||
width: calc(50% - 150px);
|
||||
}
|
||||
}
|
||||
.node-diff-column {
|
||||
display:inline-block;
|
||||
height:100%;
|
||||
width:50%;
|
||||
box-sizing: border-box;
|
||||
white-space:nowrap;
|
||||
overflow: hidden;
|
||||
&:first-child {
|
||||
border-right: 1px solid $secondary-border-color
|
||||
}
|
||||
}
|
||||
.node-diff-tab-title {
|
||||
padding: 3px 3px 3px 0;
|
||||
background: #f6f6f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-diff-node-entry-node {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
background: #ddd;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #999;
|
||||
background-position: 5% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
|
||||
.palette-icon {
|
||||
width: 16px;
|
||||
}
|
||||
.palette_icon_container {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
.node-diff-node-entry-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
.node-diff-node-entry-properties {
|
||||
margin-left: 30px;
|
||||
margin-right: 8px;
|
||||
margin-bottom:8px;
|
||||
color: #666;
|
||||
}
|
||||
.node-diff-node-description {
|
||||
color: $form-text-color;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding-top: 5px;
|
||||
display: inline-block;
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.node-diff-count { color: #999}
|
||||
.node-diff-added { color: #009900}
|
||||
.node-diff-deleted { color: #f80000}
|
||||
.node-diff-changed { color: #f89406}
|
||||
.node-diff-conflicted { color: purple}
|
||||
@@ -76,16 +76,16 @@
|
||||
font-size: 14px;
|
||||
padding: 6px 14px;
|
||||
margin-right: 8px;
|
||||
color: $editor-button-color;
|
||||
color: $editor-button-color !important;
|
||||
background: $editor-button-background;
|
||||
|
||||
&.primary {
|
||||
border-color: $editor-button-background-primary;
|
||||
color: $editor-button-color-primary;
|
||||
color: $editor-button-color-primary !important;
|
||||
background: $editor-button-background-primary;
|
||||
&.disabled, &.ui-state-disabled {
|
||||
background: none;
|
||||
color: $editor-button-color;
|
||||
color: $editor-button-color !important;
|
||||
border-color: $form-input-border-color;
|
||||
}
|
||||
&:not(.disabled):not(.ui-button-disabled):hover {
|
||||
@@ -167,7 +167,7 @@
|
||||
background: $background-color;
|
||||
color: $workspace-button-color;
|
||||
}
|
||||
#editor-shade, #header-shade {
|
||||
#palette-shade, #editor-shade, #header-shade, #sidebar-shade {
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
@@ -176,6 +176,11 @@
|
||||
background: $shade-color;
|
||||
z-index: 2;
|
||||
}
|
||||
#sidebar-shade {
|
||||
left: -8px;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
|
||||
.dialog-form,#dialog-form, #dialog-config-form {
|
||||
@@ -196,7 +201,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
.form-row input {
|
||||
.form-row input, .form-row div[contenteditable="true"] {
|
||||
width:70%;
|
||||
}
|
||||
|
||||
@@ -230,7 +235,12 @@
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
&.toggle {
|
||||
@include workspace-button-toggle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.editor-button-small {
|
||||
height: 20px;
|
||||
line-height: 18px;
|
||||
@@ -239,6 +249,17 @@
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.dialog-form {
|
||||
.button-group {
|
||||
.editor-button {
|
||||
&:first-child {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#node-config-dialog-scope-container {
|
||||
cursor: auto;
|
||||
float: right;
|
||||
@@ -255,7 +276,7 @@
|
||||
margin: 1px 0 0 0;
|
||||
padding: 0;
|
||||
height: 22px;
|
||||
width: 150px;
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
#node-config-dialog-user-count {
|
||||
|
||||
@@ -157,6 +157,8 @@
|
||||
stroke: $node-selected-color !important;
|
||||
}
|
||||
.node_highlighted {
|
||||
border-color: #dd1616 !important;
|
||||
border-style: dashed !important;
|
||||
stroke: #dd1616;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 10, 4;
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
div[contenteditable="true"],
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
@@ -33,12 +34,14 @@ textarea {
|
||||
}
|
||||
|
||||
button,
|
||||
div[contenteditable="true"],
|
||||
input {
|
||||
*overflow: visible;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
div[contenteditable="true"]::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -110,6 +113,7 @@ legend small {
|
||||
|
||||
label,
|
||||
input,
|
||||
div[contenteditable="true"],
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
@@ -119,6 +123,7 @@ textarea {
|
||||
}
|
||||
|
||||
input,
|
||||
div[contenteditable="true"],
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
@@ -146,6 +151,7 @@ input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
div[contenteditable="true"],
|
||||
.uneditable-input {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
@@ -161,6 +167,7 @@ input[type="color"],
|
||||
|
||||
input,
|
||||
textarea,
|
||||
div[contenteditable="true"],
|
||||
.uneditable-input {
|
||||
width: 206px;
|
||||
}
|
||||
@@ -184,6 +191,7 @@ input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
div[contenteditable="true"],
|
||||
.uneditable-input {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid $form-input-border-color;
|
||||
@@ -207,6 +215,7 @@ input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
div[contenteditable="true"]:focus,
|
||||
.uneditable-input:focus {
|
||||
border-color: $form-input-focus-color;
|
||||
outline: 0;
|
||||
@@ -294,11 +303,13 @@ textarea:-moz-placeholder {
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder,
|
||||
div[contenteditable="true"]:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
div[contenteditable="true"]::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
}
|
||||
@@ -384,6 +395,7 @@ textarea[class*="span"],
|
||||
|
||||
input,
|
||||
textarea,
|
||||
div[contenteditable="true"],
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -515,12 +527,14 @@ input[type="checkbox"][readonly] {
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.control-group.warning input,
|
||||
.control-group.warning div[contenteditable="true"],
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
color: #c09853;
|
||||
}
|
||||
|
||||
.control-group.warning input,
|
||||
.control-group.warning div[contenteditable="true"],
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
border-color: #c09853;
|
||||
@@ -530,6 +544,7 @@ input[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning div[contenteditable="true"]:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
border-color: #a47e3c;
|
||||
@@ -554,12 +569,14 @@ input[type="checkbox"][readonly] {
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.control-group.error input,
|
||||
.control-group.error div[contenteditable="true"],
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.control-group.error input,
|
||||
.control-group.error div[contenteditable="true"],
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
border-color: #b94a48;
|
||||
@@ -569,6 +586,7 @@ input[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
.control-group.error input:focus,
|
||||
.control-group.error div[contenteditable="true"]:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
border-color: #953b39;
|
||||
@@ -593,12 +611,14 @@ input[type="checkbox"][readonly] {
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.control-group.success input,
|
||||
.control-group.success div[contenteditable="true"],
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
color: #468847;
|
||||
}
|
||||
|
||||
.control-group.success input,
|
||||
.control-group.success div[contenteditable="true"],
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
border-color: #468847;
|
||||
@@ -608,6 +628,7 @@ input[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
.control-group.success input:focus,
|
||||
.control-group.success div[contenteditable="true"]:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
border-color: #356635;
|
||||
@@ -632,12 +653,14 @@ input[type="checkbox"][readonly] {
|
||||
.control-group.info .checkbox,
|
||||
.control-group.info .radio,
|
||||
.control-group.info input,
|
||||
.control-group.info div[contenteditable="true"],
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
color: #3a87ad;
|
||||
}
|
||||
|
||||
.control-group.info input,
|
||||
.control-group.info div[contenteditable="true"],
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
border-color: #3a87ad;
|
||||
@@ -647,6 +670,7 @@ input[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
.control-group.info input:focus,
|
||||
.control-group.info div[contenteditable="true"]:focus,
|
||||
.control-group.info select:focus,
|
||||
.control-group.info textarea:focus {
|
||||
border-color: #2d6987;
|
||||
@@ -663,6 +687,7 @@ input[type="checkbox"][readonly] {
|
||||
}
|
||||
|
||||
input:focus:invalid,
|
||||
div[contenteditable="true"]:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
@@ -670,6 +695,7 @@ select:focus:invalid {
|
||||
}
|
||||
|
||||
input:focus:invalid:focus,
|
||||
div[contenteditable="true"]:focus:invalid:focus,
|
||||
textarea:focus:invalid:focus,
|
||||
select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
@@ -727,6 +753,8 @@ select:focus:invalid:focus {
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append div[contenteditable="true"],
|
||||
.input-prepend div[contenteditable="true"],
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
@@ -740,6 +768,8 @@ select:focus:invalid:focus {
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append div[contenteditable="true"],
|
||||
.input-prepend div[contenteditable="true"],
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
@@ -755,6 +785,8 @@ select:focus:invalid:focus {
|
||||
|
||||
.input-append input:focus,
|
||||
.input-prepend input:focus,
|
||||
.input-append div[contenteditable="true"]:focus,
|
||||
.input-prepend div[contenteditable="true"]:focus,
|
||||
.input-append select:focus,
|
||||
.input-prepend select:focus,
|
||||
.input-append .uneditable-input:focus,
|
||||
@@ -809,6 +841,7 @@ select:focus:invalid:focus {
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-append div[contenteditable="true"],
|
||||
.input-append select,
|
||||
.input-append .uneditable-input {
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
@@ -839,6 +872,7 @@ select:focus:invalid:focus {
|
||||
}
|
||||
|
||||
.input-prepend.input-append input,
|
||||
.input-prepend.input-append div[contenteditable="true"],
|
||||
.input-prepend.input-append select,
|
||||
.input-prepend.input-append .uneditable-input {
|
||||
-webkit-border-radius: 0;
|
||||
@@ -923,6 +957,9 @@ input.search-query {
|
||||
.form-search input,
|
||||
.form-inline input,
|
||||
.form-horizontal input,
|
||||
.form-search div[contenteditable="true"],
|
||||
.form-inline div[contenteditable="true"],
|
||||
.form-horizontal div[contenteditable="true"],
|
||||
.form-search textarea,
|
||||
.form-inline textarea,
|
||||
.form-horizontal textarea,
|
||||
@@ -1045,3 +1082,8 @@ legend + .control-group {
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 180px;
|
||||
}
|
||||
|
||||
.form-row div[contenteditable="true"] {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -18,11 +18,11 @@
|
||||
font-size: 14px !important;
|
||||
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
|
||||
}
|
||||
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
|
||||
.ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
|
||||
font-size: 14px !important;
|
||||
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
|
||||
}
|
||||
.ui-widget input {
|
||||
.ui-widget input, .ui-widget div[contenteditable="true"] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -92,13 +92,18 @@
|
||||
|
||||
&.primary {
|
||||
border-color: $editor-button-background-primary;
|
||||
color: $editor-button-color-primary;
|
||||
color: $editor-button-color-primary !important;
|
||||
background: $editor-button-background-primary;
|
||||
&:not(.disabled):hover {
|
||||
border-color: $editor-button-background-primary-hover;
|
||||
background: $editor-button-background-primary-hover;
|
||||
color: $editor-button-color-primary !important;
|
||||
}
|
||||
&.disabled {
|
||||
border-color: $form-input-border-color;
|
||||
color: $workspace-button-color-disabled !important;
|
||||
background: $editor-button-background;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
background: none;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
* Copyright 2015, 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.
|
||||
@@ -22,6 +22,14 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@mixin enable-selection {
|
||||
-webkit-user-select: auto;
|
||||
-khtml-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
@mixin component-border {
|
||||
border: 1px solid $primary-border-color;
|
||||
box-sizing: border-box;
|
||||
@@ -32,38 +40,46 @@
|
||||
@include disable-selection;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
color: $workspace-button-color;
|
||||
color: $workspace-button-color !important;
|
||||
background: $workspace-button-background;
|
||||
border: 1px solid $form-input-border-color;
|
||||
text-align: center;
|
||||
margin:0;
|
||||
text-decoration: none;
|
||||
cursor:pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
color: $workspace-button-color-disabled;
|
||||
color: $workspace-button-color-disabled !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:not(.disabled):hover {
|
||||
text-decoration: none;
|
||||
color: $workspace-button-color-hover;
|
||||
color: $workspace-button-color-hover !important;
|
||||
background: $workspace-button-background-hover;
|
||||
}
|
||||
&:not(.disabled):focus {
|
||||
color: $workspace-button-color-focus;
|
||||
text-decoration: none;
|
||||
color: $workspace-button-color-focus !important;
|
||||
}
|
||||
&:not(.disabled):active {
|
||||
color: $workspace-button-color-active;
|
||||
color: $workspace-button-color-active !important;
|
||||
background: $workspace-button-background-active;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.selected:not(.disabled) {
|
||||
color: $workspace-button-color-selected;
|
||||
color: $workspace-button-color-selected !important;
|
||||
background: $workspace-button-background-active;
|
||||
cursor: default;
|
||||
}
|
||||
.button-group &:not(:first-child) {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.button-group &:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -72,12 +88,18 @@
|
||||
}
|
||||
@mixin workspace-button-toggle {
|
||||
@include workspace-button;
|
||||
color: $workspace-button-color-selected;
|
||||
background: $workspace-button-background-active;
|
||||
|
||||
color: $workspace-button-toggle-color !important;
|
||||
background:$workspace-button-background-active;
|
||||
margin-bottom: 1px;
|
||||
&.selected:not(.disabled) {
|
||||
color: $workspace-button-color;
|
||||
color: $workspace-button-toggle-color-selected !important;
|
||||
background: $workspace-button-background;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: $form-input-border-selected-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.disabled {
|
||||
color: $workspace-button-toggle-color-disabled !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
232
editor/sass/palette-editor.scss
Normal file
232
editor/sass/palette-editor.scss
Normal file
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* 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.
|
||||
**/
|
||||
|
||||
#palette-editor {
|
||||
text-align: left;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
bottom: 25px;
|
||||
left:0;
|
||||
padding: 0;
|
||||
box-sizing:border-box;
|
||||
background: #fff;
|
||||
|
||||
.red-ui-editableList-container {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0px;
|
||||
|
||||
|
||||
li {
|
||||
// border: none;
|
||||
// border-top: 1px solid $primary-border-color;
|
||||
padding: 0px;
|
||||
.disabled {
|
||||
background: #f3f3f3;
|
||||
|
||||
.palette-module-name {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
.palette-module-version {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.red-ui-editableList-item-content {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
&:last-child {
|
||||
// border-bottom: 1px solid $primary-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.palette-editor-tab {
|
||||
position:absolute;
|
||||
top:115px;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0
|
||||
}
|
||||
.palette-editor-toolbar {
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
text-align: right;
|
||||
|
||||
.button-group {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.palette-module-button-group {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.palette-module-shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background: $shade-color;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
#palette-module-install-shade {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.palette-module-shade-status {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.palette-module-meta {
|
||||
color: #666;
|
||||
position: relative;
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.fa {
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.palette-module-name {
|
||||
white-space: nowrap;
|
||||
@include enable-selection;
|
||||
}
|
||||
.palette-module-version, .palette-module-updated, .palette-module-link {
|
||||
font-style:italic;
|
||||
font-size: 0.8em;
|
||||
@include enable-selection;
|
||||
}
|
||||
.palette-module-updated {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.palette-module-link {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.palette-module-description {
|
||||
margin-left: 20px;
|
||||
font-size: 0.9em;
|
||||
color: #999;
|
||||
}
|
||||
.palette-module-link {
|
||||
}
|
||||
.palette-module-set-button-group {
|
||||
}
|
||||
.palette-module-count {
|
||||
border-radius: 4px;
|
||||
background: #eee;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.palette-module-content {
|
||||
display: none;
|
||||
padding: 10px 3px;
|
||||
}
|
||||
i.fa.palette-module-node-chevron {
|
||||
width: 8px;
|
||||
margin-right: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.expanded {
|
||||
i.fa.palette-module-node-chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.palette-module-set-button {
|
||||
background:#f3f3f3 !important;
|
||||
}
|
||||
}
|
||||
.palette-module-set {
|
||||
border:1px solid $secondary-border-color;
|
||||
border-radius: 0;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
&:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-right-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.palette-module-type {
|
||||
color: #666;
|
||||
padding-left: 5px;
|
||||
font-size: 0.9em;
|
||||
@include enable-selection;
|
||||
}
|
||||
.palette-module-type-swatch {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
background: #fff;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.palette-module-set-button-group {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.palette-module-set-disabled {
|
||||
background: #eee;
|
||||
.palette-module-type {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.palette-module-more {
|
||||
padding: 0 !important;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: $tab-background-inactive;
|
||||
a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
color: #AD1625;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: $tab-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -25,10 +25,25 @@
|
||||
text-align: center;
|
||||
@include disable-selection;
|
||||
@include component-border;
|
||||
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.palette-expanded {
|
||||
& #palette {
|
||||
width: 380px;
|
||||
box-shadow: 1px 0 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
& #workspace { left: 379px !important; }
|
||||
& #palette-collapse-all { display: none; }
|
||||
& #palette-expand-all { display: none; }
|
||||
& #palette-container { display: none !important; }
|
||||
& #palette-search { display: none !important; }
|
||||
& #palette-edit { background: $workspace-button-background-active }
|
||||
& #palette-editor { display: block !important }
|
||||
}
|
||||
|
||||
|
||||
.palette-scroll {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
@@ -38,15 +53,11 @@
|
||||
overflow-y: auto;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.palette-spinner {
|
||||
padding-top: 40px;
|
||||
#palette > .palette-spinner {
|
||||
padding-top: 80px;
|
||||
}
|
||||
#palette-search {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left:0;
|
||||
right:0;
|
||||
.palette-search {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
@@ -55,48 +66,7 @@
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#palette-search i {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
#palette-search i.fa-search {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
#palette-search i.fa-times {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
#palette-search-clear {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#palette-search 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;
|
||||
}
|
||||
|
||||
#palette-search input:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
#palette-footer {
|
||||
@include component-footer;
|
||||
}
|
||||
|
||||
106
editor/sass/search.scss
Normal file
106
editor/sass/search.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 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-search {
|
||||
z-index:1000;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
background: white;
|
||||
left: 50%;
|
||||
margin-left: -250px;
|
||||
top: 0px;
|
||||
border: 1px solid $primary-border-color;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.4);
|
||||
|
||||
ol {
|
||||
}
|
||||
}
|
||||
.red-ui-search-container {
|
||||
padding: 3px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
}
|
||||
.red-ui-search-results-container {
|
||||
position:relative;
|
||||
height: 300px;
|
||||
padding: 5px;
|
||||
background: $background-color;
|
||||
.red-ui-editableList-container {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
padding: 0;
|
||||
background: $background-color;
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
&.selected .red-ui-search-result {
|
||||
border-color: $primary-border-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.red-ui-search-result {
|
||||
padding: 8px 2px 8px 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: $form-text-color;
|
||||
border: 2px solid white;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: $primary-border-color;
|
||||
color: $form-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.red-ui-search-result-node {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
float:left;
|
||||
height: 25px;
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #999;
|
||||
background-position: 5% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
}
|
||||
.red-ui-search-result-description {
|
||||
margin-left: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.red-ui-search-result-node-label {
|
||||
color: #222;
|
||||
}
|
||||
.red-ui-search-result-node-type {
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.red-ui-search-result-node-flow {
|
||||
float:right;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.red-ui-search-result-node-id {
|
||||
display:none;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.red-ui-search-empty {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: $form-placeholder-color;
|
||||
}
|
||||
@@ -34,15 +34,20 @@
|
||||
|
||||
@import "editor";
|
||||
@import "library";
|
||||
@import "search";
|
||||
|
||||
@import "tabs";
|
||||
@import "tab-config";
|
||||
@import "tab-info";
|
||||
@import "popover";
|
||||
@import "flow";
|
||||
@import "palette-editor";
|
||||
@import "diff";
|
||||
|
||||
@import "typedInput";
|
||||
@import "editableList";
|
||||
|
||||
@import "ui/common/editableList";
|
||||
@import "ui/common/searchBox";
|
||||
@import "ui/common/typedInput";
|
||||
|
||||
@import "dragdrop";
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Copyright 2015 IBM Corp.
|
||||
* Copyright 2015, 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.
|
||||
@@ -14,47 +14,174 @@
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
ul.red-ui-tabs {
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
height: 35px;
|
||||
box-sizing:border-box;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
background: #fff;
|
||||
@include disable-selection;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border-left: 1px solid $primary-border-color;
|
||||
border-top: 1px solid $primary-border-color;
|
||||
border-right: 1px solid $primary-border-color;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
background: $tab-background-inactive;
|
||||
margin: 3px 3px 0 3px;
|
||||
height: 32px;
|
||||
line-height: 29px;
|
||||
max-width: 200px;
|
||||
width: 14%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li a.red-ui-tab-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
ul.red-ui-tabs li {
|
||||
.red-ui-tabs {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
height: 35px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.red-ui-tabs-scroll-container {
|
||||
height: 60px;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& ul {
|
||||
//background: #9999ff;
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
height: 35px;
|
||||
box-sizing:border-box;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
white-space: nowrap;
|
||||
@include disable-selection;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border-left: 1px solid $primary-border-color;
|
||||
border-top: 1px solid $primary-border-color;
|
||||
border-right: 1px solid $primary-border-color;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
background: $tab-background-inactive;
|
||||
margin: 3px 3px 0 3px;
|
||||
height: 32px;
|
||||
line-height: 29px;
|
||||
max-width: 200px;
|
||||
width: 14%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
a.red-ui-tab-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(.active) a:hover+a.red-ui-tab-close {
|
||||
background: $tab-background-hover;
|
||||
}
|
||||
&.active {
|
||||
background: $tab-background-active;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #fff;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
a.red-ui-tab-close {
|
||||
color: #aaa;
|
||||
background: $tab-background-active;
|
||||
&:hover {
|
||||
background: $workspace-button-background-hover !important;
|
||||
color: $workspace-button-color-hover;
|
||||
}
|
||||
}
|
||||
.red-ui-tab-icon {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
&:not(.active) a:hover {
|
||||
color: $workspace-button-color-hover;
|
||||
background: $tab-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.red-ui-tabs-scrollable {
|
||||
padding-left: 21px;
|
||||
padding-right: 21px;
|
||||
}
|
||||
&.red-ui-tabs-add {
|
||||
padding-right: 35px;
|
||||
}
|
||||
&.red-ui-tabs-add.red-ui-tabs-scrollable {
|
||||
padding-right: 59px;
|
||||
}
|
||||
}
|
||||
.red-ui-tab-button {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
@include workspace-button;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-top: 3px;
|
||||
margin-right:3px;
|
||||
margin-left:3px;
|
||||
border: 1px solid $primary-border-color;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.red-ui-tab-scroll {
|
||||
width: 21px;
|
||||
top: 0;
|
||||
a {
|
||||
height: 35px;
|
||||
width: 21px;
|
||||
display: block;
|
||||
color: $link-color;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin:0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
.red-ui-tab-scroll-left {
|
||||
left:0;
|
||||
a {
|
||||
border-right: 1px solid $primary-border-color;
|
||||
// box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
.red-ui-tab-scroll-right {
|
||||
right: 0px;
|
||||
a {
|
||||
border-left: 1px solid $primary-border-color;
|
||||
// box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
}
|
||||
.red-ui-tabs.red-ui-tabs-add .red-ui-tab-scroll-right {
|
||||
right: 38px;
|
||||
}
|
||||
|
||||
.red-ui-tab-icon {
|
||||
margin-left: -8px;
|
||||
margin-right: 3px;
|
||||
margin-top: -2px;
|
||||
opacity: 0.1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.red-ui-tabs-badges {
|
||||
position: absolute;
|
||||
top:2px;
|
||||
@@ -96,51 +223,3 @@ ul.red-ui-tabs li {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
ul.red-ui-tabs li:not(.active) a:hover+a.red-ui-tab-close {
|
||||
background: $tab-background-hover;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li.active a.red-ui-tab-close {
|
||||
color: #aaa;
|
||||
background: $tab-background-active;
|
||||
&:hover {
|
||||
background: $workspace-button-background-hover !important;
|
||||
color: $workspace-button-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li:not(.active) a:hover {
|
||||
color: $workspace-button-color-hover;
|
||||
background: $tab-background-hover;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.red-ui-tabs li.active {
|
||||
background: $tab-background-active;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.red-ui-tabs li.active a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.red-ui-tab-icon {
|
||||
margin-left: -8px;
|
||||
margin-right: 3px;
|
||||
margin-top: -2px;
|
||||
opacity: 0.1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul.red-ui-tabs li.active .red-ui-tab-icon {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
70
editor/sass/ui/common/searchBox.scss
Normal file
70
editor/sass/ui/common/searchBox.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 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 {
|
||||
position: relative;
|
||||
i {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
i.fa-search {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 8px;
|
||||
top: 9px;
|
||||
}
|
||||
i.fa-times {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 9px;
|
||||
}
|
||||
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: 18px;
|
||||
top: 4px;
|
||||
background: #eee;
|
||||
color: #666;
|
||||
padding: 1px 8px;
|
||||
font-size: 9px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
23
editor/sass/widgetStyle.scss
Normal file
23
editor/sass/widgetStyle.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* 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.
|
||||
**/
|
||||
|
||||
@import "colors";
|
||||
@import "mixins";
|
||||
|
||||
@import "forms";
|
||||
@import "jquery";
|
||||
@import "typedInput";
|
||||
@import "editableList";
|
||||
@@ -40,39 +40,14 @@
|
||||
right: 322px;
|
||||
overflow: hidden;
|
||||
@include component-border;
|
||||
transition: left 0.2s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
.workspace-footer-button {
|
||||
@include component-footer-button;
|
||||
}
|
||||
|
||||
#workspace-tabs {
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#workspace-add-tab {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid $primary-border-color;
|
||||
}
|
||||
|
||||
#btn-workspace-add-tab {
|
||||
@include workspace-button;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-top: 3px;
|
||||
margin-right:3px;
|
||||
border: 1px solid $primary-border-color;
|
||||
}
|
||||
|
||||
#workspace-footer {
|
||||
@include component-footer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user