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;
padding: 0;
margin: 0;
background: $background-color;
color: #333333;
background: $primary-background;
color: $primary-text-color;
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.
**/
$background-color: #f3f3f3;
$primary-background: #f3f3f3;
$primary-text-color: #555;
$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-border-color: #ccc;
$form-input-border-selected-color: #aaa;
@ -34,12 +35,22 @@ $list-item-border-selected: #999;
$primary-border-color: #bbbbbb;
$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-selected: #f9f9f9;
$tab-background-inactive: #f0f0f0;
$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-hover: #ddd;

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

@ -143,13 +143,13 @@
bottom: 0px;
width: 7px;
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;
border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
&.red-ui-tray-resize-maximised {
background: $background-color;
background: $primary-background;
cursor: default;
}
}
@ -161,7 +161,7 @@
border: none;
border-bottom: 1px solid $secondary-border-color;
margin: 0;
background: $background-color;
background: $primary-background;
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 {
position: relative;
background: $palette-header-background;
color: $palette-header-color;
cursor: pointer;
text-align: left;
padding: 9px;

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

@ -30,7 +30,7 @@
height: 7px;
box-sizing: border-box;
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;
height: 300px;
padding: 5px;
background: $background-color;
background: $primary-background;
.red-ui-search-results-list {
}
.red-ui-editableList-container {
padding: 0;
background: $background-color;
background: $primary-background;
li {
padding: 0;
&.selected {

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

@ -48,7 +48,7 @@
bottom:10px;
width: 7px;
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;
}

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

@ -16,7 +16,7 @@
.red-ui-tabs {
position: relative;
background: #fff;
background: $tab-background;
overflow: hidden;
height: 35px;
box-sizing: border-box;
@ -71,7 +71,7 @@
padding-left: 12px;
width: 100%;
height: 100%;
color: #666;
color: $tab-text-color-inactive;
}
a:hover {
text-decoration: none;
@ -86,14 +86,14 @@
&.active {
background: $tab-background-active;
font-weight: bold;
border-bottom: 1px solid #fff;
border-bottom: 1px solid $tab-background-active;
z-index: 2;
a {
color: #333;
color: $tab-text-color-active;
}
a.red-ui-tab-close {
color: #aaa;
color: $workspace-button-color;
background: $tab-background-active;
&:hover {
background: $workspace-button-background-hover !important;
@ -111,7 +111,7 @@
font-weight: bold;
.red-ui-tabs-badge-selected {
display: inline;
background: white;
background: $tab-background;
}
.red-ui-tabs-badge-changed {
display: none;
@ -159,7 +159,7 @@
height: 100%;
border-right: 1px solid $primary-border-color;
margin: 0;
background: #f3f3f3;
background: $primary-background;
overflow: visible;
.red-ui-tabs-scroll-container {
@ -181,10 +181,10 @@
border-right: 1px solid $primary-border-color;
height: auto;
&:not(:first-child) {
border-top: 1px solid $secondary-border-color;
border-top: 1px solid $secondary-border-color;
}
&:last-child {
border-bottom: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color;
}
a.red-ui-tab-label {
@ -192,7 +192,7 @@
}
&.active {
border-right: 1px solid #fff;
border-right: 1px solid $tab-background-active;
}
}
}
@ -213,7 +213,7 @@
top: 0;
right: 0;
height: 35px;
background: #fff;
background: $tab-background;
border-bottom: 1px solid $primary-border-color;
z-index: 2;
@ -235,7 +235,7 @@
top: 0;
right: 0;
height: 35px;
background: #fff;
background: $tab-background;
border-bottom: 1px solid $primary-border-color;
z-index: 2;
a {
@ -251,7 +251,7 @@
}
}
&.red-ui-tab-link-button-menu {
border-color: white;
border-color: $tab-background;
}
}
}
@ -262,7 +262,7 @@
height: 35px;
width: 21px;
display: block;
color: $link-color;
color: $workspace-button-color;
font-size: 22px;
text-align: center;
margin:0;
@ -275,14 +275,12 @@
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);
}
}
@ -324,7 +322,7 @@ i.red-ui-tab-icon {
line-height: 28px;
text-align: center;
padding:0px;
color: #aaa;
color: $tab-badge-color;
}
.red-ui-tabs-badges i {
@ -358,9 +356,10 @@ i.red-ui-tab-icon {
line-height: 28px;
text-align: center;
padding: 0px;
color: #aaa;
color: $workspace-button-color;
&:hover {
background: $workspace-button-background-hover !important;
color: $workspace-button-color-hover;
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.
**/
#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 {
position: absolute;
margin: 0;
@ -42,13 +26,27 @@
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 {
fill: #fff;
fill: $workspace-background;
}
.red-ui-workspace-chart-grid line {
fill: none;
shape-rendering: crispEdges;
stroke: #eee;
stroke: $workspace-grid-color;
stroke-width: 1px;
}
@ -70,9 +68,6 @@
#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
opacity:0.8;
li.red-ui-tab.active a {
color:#666;
}
}
.red-ui-workspace-disabled-icon {
display: none;
@ -85,11 +80,11 @@
a {
font-style: italic;
color: #aaa !important;
color: $tab-text-color-disabled-inactive !important;
}
&.active a {
font-weight: normal;
color: #999 !important;
color: $tab-text-color-disabled-active !important;
}
.red-ui-workspace-disabled-icon {
display: inline;
@ -110,7 +105,7 @@
.red-ui-navigator-border {
stroke-dasharray: 5,5;
pointer-events: none;
stroke: #999;
stroke: $secondary-border-color;
strokeWidth: 1;
fill: white;
}