frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Pull out more CSS colors to sass variables

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-08 19:06:08 +01:00
parent db5e79a19b
commit 59093f1721
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
9 changed files with 60 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/node_modules/@node-red/editor-client/src/sass/base.scss vendored
View File

@ -19,8 +19,8 @@ body {
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: $background-color; background: $primary-background;
color: #333333; color: $primary-text-color;
line-height: 20px; line-height: 20px;
} }

17
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -14,10 +14,11 @@
* limitations under the License. * limitations under the License.
**/ **/
$background-color: #f3f3f3; $primary-background: #f3f3f3;
$primary-text-color: #555;
$form-placeholder-color: #bbbbbb; $form-placeholder-color: #bbbbbb;
$form-text-color: #555; $form-text-color: $primary-text-color;
$form-input-focus-color: rgba(85,150,230,0.8); $form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc; $form-input-border-color: #ccc;
$form-input-border-selected-color: #aaa; $form-input-border-selected-color: #aaa;
@ -34,12 +35,22 @@ $list-item-border-selected: #999;
$primary-border-color: #bbbbbb; $primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd; $secondary-border-color: #dddddd;
$tab-text-color-active: #555;
$tab-text-color-inactive: #666;
$tab-text-color-disabled-active: #999;
$tab-text-color-disabled-inactive: #aaa;
$tab-badge-color: #aaa;
$tab-background: #fff;
$tab-background-active: #fff; $tab-background-active: #fff;
$tab-background-selected: #f9f9f9; $tab-background-selected: #f9f9f9;
$tab-background-inactive: #f0f0f0; $tab-background-inactive: #f0f0f0;
$tab-background-hover: #ddd; $tab-background-hover: #ddd;
$palette-header-background: $background-color; $palette-header-background: $primary-background;
$palette-header-color: #444;
$workspace-background: #fff;
$workspace-grid-color: #eee;
$workspace-button-background: #fff; $workspace-button-background: #fff;
$workspace-button-background-hover: #ddd; $workspace-button-background-hover: #ddd;

6
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -143,13 +143,13 @@
bottom: 0px; bottom: 0px;
width: 7px; width: 7px;
left: -9px; left: -9px;
background: $background-color url(images/grip.png) no-repeat 50% 50%; background: $primary-background url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1); box-shadow: -1px 0 6px rgba(0,0,0,0.1);
&.red-ui-tray-resize-maximised { &.red-ui-tray-resize-maximised {
background: $background-color; background: $primary-background;
cursor: default; cursor: default;
} }
} }
@ -161,7 +161,7 @@
border: none; border: none;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
margin: 0; margin: 0;
background: $background-color; background: $primary-background;
color: $workspace-button-color; color: $workspace-button-color;
} }

1
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -74,6 +74,7 @@
.red-ui-palette-header { .red-ui-palette-header {
position: relative; position: relative;
background: $palette-header-background; background: $palette-header-background;
color: $palette-header-color;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
padding: 9px; padding: 9px;

2
packages/node_modules/@node-red/editor-client/src/sass/panels.scss vendored
View File

@ -30,7 +30,7 @@
height: 7px; height: 7px;
box-sizing: border-box; box-sizing: border-box;
cursor: ns-resize; cursor: ns-resize;
background: $background-color url(images/grip.png) no-repeat 50% 50%; background: $primary-background url(images/grip.png) no-repeat 50% 50%;
} }

4
packages/node_modules/@node-red/editor-client/src/sass/search.scss vendored
View File

@ -105,13 +105,13 @@
position:relative; position:relative;
height: 300px; height: 300px;
padding: 5px; padding: 5px;
background: $background-color; background: $primary-background;
.red-ui-search-results-list { .red-ui-search-results-list {
} }
.red-ui-editableList-container { .red-ui-editableList-container {
padding: 0; padding: 0;
background: $background-color; background: $primary-background;
li { li {
padding: 0; padding: 0;
&.selected { &.selected {

2
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -48,7 +48,7 @@
bottom:10px; bottom:10px;
width: 7px; width: 7px;
z-index: 11; z-index: 11;
background: $background-color url(images/grip.png) no-repeat 50% 50%; background: $primary-background url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
} }

35
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -16,7 +16,7 @@
.red-ui-tabs { .red-ui-tabs {
position: relative; position: relative;
background: #fff; background: $tab-background;
overflow: hidden; overflow: hidden;
height: 35px; height: 35px;
box-sizing: border-box; box-sizing: border-box;
@ -71,7 +71,7 @@
padding-left: 12px; padding-left: 12px;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #666; color: $tab-text-color-inactive;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -86,14 +86,14 @@
&.active { &.active {
background: $tab-background-active; background: $tab-background-active;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #fff; border-bottom: 1px solid $tab-background-active;
z-index: 2; z-index: 2;
a { a {
color: #333; color: $tab-text-color-active;
} }
a.red-ui-tab-close { a.red-ui-tab-close {
color: #aaa; color: $workspace-button-color;
background: $tab-background-active; background: $tab-background-active;
&:hover { &:hover {
background: $workspace-button-background-hover !important; background: $workspace-button-background-hover !important;
@ -111,7 +111,7 @@
font-weight: bold; font-weight: bold;
.red-ui-tabs-badge-selected { .red-ui-tabs-badge-selected {
display: inline; display: inline;
background: white; background: $tab-background;
} }
.red-ui-tabs-badge-changed { .red-ui-tabs-badge-changed {
display: none; display: none;
@ -159,7 +159,7 @@
height: 100%; height: 100%;
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
margin: 0; margin: 0;
background: #f3f3f3; background: $primary-background;
overflow: visible; overflow: visible;
.red-ui-tabs-scroll-container { .red-ui-tabs-scroll-container {
@ -181,10 +181,10 @@
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
height: auto; height: auto;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $secondary-border-color; border-top: 1px solid $secondary-border-color;
} }
&:last-child { &:last-child {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
} }
a.red-ui-tab-label { a.red-ui-tab-label {
@ -192,7 +192,7 @@
} }
&.active { &.active {
border-right: 1px solid #fff; border-right: 1px solid $tab-background-active;
} }
} }
} }
@ -213,7 +213,7 @@
top: 0; top: 0;
right: 0; right: 0;
height: 35px; height: 35px;
background: #fff; background: $tab-background;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
z-index: 2; z-index: 2;
@ -235,7 +235,7 @@
top: 0; top: 0;
right: 0; right: 0;
height: 35px; height: 35px;
background: #fff; background: $tab-background;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
z-index: 2; z-index: 2;
a { a {
@ -251,7 +251,7 @@
} }
} }
&.red-ui-tab-link-button-menu { &.red-ui-tab-link-button-menu {
border-color: white; border-color: $tab-background;
} }
} }
} }
@ -262,7 +262,7 @@
height: 35px; height: 35px;
width: 21px; width: 21px;
display: block; display: block;
color: $link-color; color: $workspace-button-color;
font-size: 22px; font-size: 22px;
text-align: center; text-align: center;
margin:0; margin:0;
@ -275,14 +275,12 @@
left:0; left:0;
a { a {
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
// box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
} }
} }
.red-ui-tab-scroll-right { .red-ui-tab-scroll-right {
right: 0px; right: 0px;
a { a {
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
// box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
} }
} }
@ -324,7 +322,7 @@ i.red-ui-tab-icon {
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
padding:0px; padding:0px;
color: #aaa; color: $tab-badge-color;
} }
.red-ui-tabs-badges i { .red-ui-tabs-badges i {
@ -358,9 +356,10 @@ i.red-ui-tab-icon {
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
padding: 0px; padding: 0px;
color: #aaa; color: $workspace-button-color;
&:hover { &:hover {
background: $workspace-button-background-hover !important; background: $workspace-button-background-hover !important;
color: $workspace-button-color-hover;
opacity: 1; opacity: 1;
} }
} }

43
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@ -14,22 +14,6 @@
* limitations under the License. * limitations under the License.
**/ **/
#red-ui-workspace-chart {
overflow: auto;
background: #e3e3e3;
position: absolute;
bottom:25px;
top: 35px;
left:0px;
right:0px;
box-sizing:border-box;
transition: right 0.2s ease;
&:focus {
outline: none;
}
}
#red-ui-workspace { #red-ui-workspace {
position: absolute; position: absolute;
margin: 0; margin: 0;
@ -42,13 +26,27 @@
transition: left 0.1s ease-in-out; transition: left 0.1s ease-in-out;
} }
#red-ui-workspace-chart {
overflow: auto;
position: absolute;
bottom:25px;
top: 35px;
left:0px;
right:0px;
box-sizing:border-box;
transition: right 0.2s ease;
&:focus {
outline: none;
}
}
.red-ui-workspace-chart-background { .red-ui-workspace-chart-background {
fill: #fff; fill: $workspace-background;
} }
.red-ui-workspace-chart-grid line { .red-ui-workspace-chart-grid line {
fill: none; fill: none;
shape-rendering: crispEdges; shape-rendering: crispEdges;
stroke: #eee; stroke: $workspace-grid-color;
stroke-width: 1px; stroke-width: 1px;
} }
@ -70,9 +68,6 @@
#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) { #red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
opacity:0.8; opacity:0.8;
li.red-ui-tab.active a {
color:#666;
}
} }
.red-ui-workspace-disabled-icon { .red-ui-workspace-disabled-icon {
display: none; display: none;
@ -85,11 +80,11 @@
a { a {
font-style: italic; font-style: italic;
color: #aaa !important; color: $tab-text-color-disabled-inactive !important;
} }
&.active a { &.active a {
font-weight: normal; font-weight: normal;
color: #999 !important; color: $tab-text-color-disabled-active !important;
} }
.red-ui-workspace-disabled-icon { .red-ui-workspace-disabled-icon {
display: inline; display: inline;
@ -110,7 +105,7 @@
.red-ui-navigator-border { .red-ui-navigator-border {
stroke-dasharray: 5,5; stroke-dasharray: 5,5;
pointer-events: none; pointer-events: none;
stroke: #999; stroke: $secondary-border-color;
strokeWidth: 1; strokeWidth: 1;
fill: white; fill: white;
} }