frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

More restyling - workspace buttons

Browse Source
This commit is contained in:
Nick O'Leary
2015-07-13 15:08:17 +01:00
parent 5d8dae05c4
commit a1d7bb4208
7 changed files with 75 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
editor/sass/colors.scss
View File

@@ -15,7 +15,6 @@
**/
$form-placeholder-color: #bbbbbb;
$form-text-color: #444;
$form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc;
@@ -23,3 +22,13 @@ $form-input-border-color: #ccc;
$node-selected-color: #5596E6; // #ff7f0e
$primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd;
$workspace-button-background: #fff;
$workspace-button-background-hover: #f3f3f3;
$workspace-button-background-active: #efefef;
$workspace-button-color: #999;
$workspace-button-color-disabled: #ccc;
$workspace-button-color-focus: #999;
$workspace-button-color-hover: #666;
$workspace-button-color-active: #666;

14
editor/sass/library.scss
View File

@@ -31,3 +31,17 @@
#node-select-library li.list-hover {
background: #ffffd0;
}
.library-button {
box-sizing: border-box;
height: 28px;
line-height: 28px;
display: inline-block;
font-size: 12px;
padding: 0px 8px;
text-decoration: none;
border-radius: 0px;
color: #666;
background: #f6f6f6;
margin: 0 5px;
}

27
editor/sass/mixins.scss
View File

@@ -25,4 +25,31 @@
@mixin component-border {
border: 1px solid $primary-border-color;
box-sizing: border-box;
}
@mixin workspace-button {
color: $workspace-button-color;
box-sizing: border-box;
display: inline-block;
background: $workspace-button-background;
border: 1px solid $secondary-border-color;
text-align: center;
margin:0;
text-decoration: none;
&.disabled {
cursor: default;
color: $workspace-button-color-disabled;
}
&:not(.disabled):hover {
color: $workspace-button-color-hover;
background: $workspace-button-background-hover;
}
&:not(.disabled):focus {
color: $workspace-button-color-focus;
}
&:not(.disabled):active {
color: $workspace-button-color-active;
background: $workspace-button-background-active;
}
}

23
editor/sass/workspace.scss
View File

@@ -42,18 +42,22 @@
#chart-zoom-controls {
position: absolute;
bottom:30px; right: 350px;
bottom:30px;
right: 350px;
}
#chart-zoom-controls {
padding-top: 3px;
text-align: right;
float: right;
.chart-zoom-button {
@include workspace-button;
font-size: 10px;
line-height: 17px;
width: 18px;
height: 18px;
}
#workspace-tabs {
margin-right: 28px;
}
#workspace-add-tab {
position: absolute;
top: 0;
@@ -65,14 +69,9 @@
}
#btn-workspace-add-tab {
display: inline-block;
@include workspace-button;
border: none;
width: 100%;
background: #f3f3f3;
height: 100%;
line-height: 35px;
text-align: center;
color: #000;
}
#btn-workspace-add-tab:hover {
background: #ddd;
}

30
editor/sass/workspaceToolbar.scss
View File

@@ -20,34 +20,18 @@
position: absolute;
top: 35px;
left:0;
width: 100%;
padding: 7px;
border-bottom-right-radius: 5px;
background: #f3f3f3;
height: 40px;
box-sizing: border-box;
background: #fff;
border-bottom: 1px solid $secondary-border-color;
}
#workspace-toolbar .button {
@include workspace-button;
line-height: 18px;
display: inline-block;
font-size: 12px;
padding: 2px 8px;
text-decoration: none;
border-radius: 3px;
color: #666;
background: #f6f6f6;
vertical-align: middle;
box-shadow: 0 0 2px #888;
margin-right: 5px;
}
#workspace-toolbar .button.disabled {
box-shadow: 0 0 2px #bbb;
color: #aaa;
cursor: default;
}
#workspace-toolbar .button:not(.disabled):hover {
background: #e6e6e6;
box-shadow: 0 0 2px #666;
}
#workspace-toolbar .button:not(.disabled):active {
background: #e0e0e0;
box-shadow: 0 0 2px #444;
padding: 2px 8px;
}