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 restylin

Browse Source
This commit is contained in:
Nick O'Leary
2015-07-14 15:59:56 +01:00
parent 57d6b16d5c
commit d3c41b38f7
16 changed files with 250 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
editor/sass/editor.scss
View File

@@ -66,9 +66,16 @@
.editor-button {
@include workspace-button;
height: 30px;
line-height: 28px;
font-size: 12px;
border-radius: 3px;
height: 34px;
line-height: 30px;
font-size: 13px;
border-radius: 4px;
padding: 0 10px;
}
.editor-button-small {
height: 20px;
line-height: 18px;
font-size: 10px;
border-radius: 2px;
padding: 0 5px;
}

10
editor/sass/forms.scss
View File

@@ -149,15 +149,13 @@ input[type="color"],
.uneditable-input {
display: inline-block;
height: 20px;
padding: 4px 6px;
padding: 6px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-radius: 4px;
}
input,
@@ -239,13 +237,13 @@ input[type="checkbox"] {
select,
input[type="file"] {
height: 30px;
height: 34px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
line-height: 30px;
line-height: 34px;
}
select {

20
editor/sass/mixins.scss
View File

@@ -56,3 +56,23 @@
background: $workspace-button-background-active;
}
}
@mixin component-footer {
border-top: 1px solid $primary-border-color;
background: #f3f3f3;
text-align: right;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25px;
line-height: 23px;
padding: 0 10px;
}
@mixin component-footer-button {
@include workspace-button;
font-size: 11px;
line-height: 17px;
width: 18px;
height: 18px;
}

87
editor/sass/notifications.scss
View File

@@ -14,87 +14,32 @@
* limitations under the License.
**/
#notifications {
z-index: 10000;
width: 500px;
margin-left: -250px;
left: 50%;
position: absolute;
top: 1px;
}
.notification {
box-sizing: border-box;
position: relative;
padding: 14px 18px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
background-color: #fff;
color: #666;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
border-color: #4B8400;
}
.notification-warning {
border-color: #D74108;
}
.notification-error {
border-color: #AD1625;
}
/*
.notification {
box-sizing: border-box;
position: relative;
padding: 12px 20px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
color: #f0f0f0;
background-color: #5AAAFA;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
background: #5AA700;
border-color: #4B8400;
}
.notification-warning {
background:#FF7832;
border-color: #D74108;
}
.notification-error {
background: #FF5050;
border-color: #AD1625;
}
*/
/*
#notifications {
z-index: 10000;
width: 500px;
margin-left: -250px;
left: 50%;
position: absolute;
top: 1px;
}
.notification {
box-sizing: border-box;
position: relative;
padding: 12px 20px;
padding: 14px 18px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
color: #325C80;
background-color: #C0E6FF;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
background-color: #fff;
color: #666;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
color: #4B8400;
background-color: #C8F08F;
border-color: #4B8400;
border-color: #4B8400;
}
.notification-warning {
color:#D74108;
border-color: #D74108;
background-color:#FFD791;
}
.notification-error {
color: #AD1625;
background-color: #FFD2DD;
border-color: #AD1625;
border-color: #AD1625;
}
*/

26
editor/sass/palette.scss
View File

@@ -18,7 +18,7 @@
#palette {
position: absolute;
top: 0px;
bottom: 10px;
bottom: 0px;
left:0px;
background: #f3f3f3;
width: 180px;
@@ -32,7 +32,7 @@
position: absolute;
top: 35px;
right: 0;
bottom: 0px;
bottom: 25px;
left:0;
padding: 0;
overflow-y: auto;
@@ -56,23 +56,28 @@
box-sizing:border-box;
}
#palette-search i {
font-size: 10px;
color: #666;
}
#palette-search i.fa-search {
position: absolute;
pointer-events: none;
left: 5px;
top: 11px;
left: 12px;
top: 12px;
}
#palette-search i.fa-times {
position: absolute;
right: 7px;
top: 11px;
top: 12px;
}
#palette-search-clear {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20px;
display: none;
color: #000;
}
#palette-search input {
@@ -81,7 +86,7 @@
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
padding: 3px 17px;
padding: 3px 17px 3px 22px;
margin: 0px;
height: 30px;
box-sizing:border-box;
@@ -92,6 +97,13 @@
box-shadow: none;
-webkit-box-shadow: none;
}
#palette-footer {
@include component-footer;
}
.palette-button {
@include component-footer-button;
}
.palette-category {
border-bottom: 1px solid #ccc;

9
editor/sass/sidebar.scss
View File

@@ -18,7 +18,7 @@
position: absolute;
top: 0px;
right: 0px;
bottom: 10px;
bottom: 0px;
width: 315px;
background: #fff;
box-sizing: border-box;
@@ -35,7 +35,7 @@
position: absolute;
top: 35px;
right: 0;
bottom: 1px;
bottom: 25px;
left: 0px;
padding-top: 10px;
overflow-y: auto;
@@ -54,7 +54,6 @@
.sidebar-closed > #sidebar { display: none; }
.sidebar-closed > #sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 7px !important; }
.sidebar-closed > #chart-zoom-controls { right: 30px !important; }
#sidebar .button {
@include workspace-button;
@@ -63,3 +62,7 @@
margin-right: 5px;
padding: 2px 8px;
}
#sidebar-footer {
@include component-footer;
}

40
editor/sass/style.scss
View File

@@ -68,3 +68,43 @@ i.spinner {
background: url(images/spin.svg) no-repeat 50% 50%;
background-size: contain
}
code, pre {
padding: 0 3px 2px;
font-family: monospace;
font-size: 14px;
color: #333333;
border-radius: 1px;
}
code {
padding: 0px 4px;
color: #AD1625;
white-space: nowrap;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}

58
editor/sass/tabs.scss
View File

@@ -58,27 +58,46 @@ ul.red-ui-tabs li {
position: relative;
}
ul.red-ui-tabs li a.red-ui-tab-close {
background: rgba(227,227,227,0.8);
.red-ui-tab-close {
background: $tab-background-inactive;
opacity: 0.8;
position: absolute;
right: 2px;
top: 2px;
right: 0px;
top: 0px;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
height: 30px;
line-height: 28px;
text-align: center;
padding: 0px;
border-radius: 5px;
color: #666;
color: #aaa;
&:hover {
background: $workspace-button-background-hover !important;
opacity: 1;
}
}
ul.red-ui-tabs li a.red-ui-tab-close:hover {
background: #bbb !important;
}
ul.red-ui-tabs li a:hover {
text-decoration: none;
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;
}
@@ -91,16 +110,3 @@ ul.red-ui-tabs li.active {
ul.red-ui-tabs li.active a {
color: #333;
}
ul.red-ui-tabs li.active a.red-ui-tab-close {
background: rgba(255,255,255,0.8);
}
ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
background: #fff;
}
ul.red-ui-tabs li.red-ui-add-tab {
width: 25px;
line-height: 22px;
}
ul.red-ui-tabs li.red-ui-add-tab a {
padding: 2px 4px;
}

41
editor/sass/workspace.scss
View File

@@ -19,7 +19,7 @@
overflow: auto;
background: #e3e3e3;
position: absolute;
bottom:0px;
bottom:25px;
top: 35px;
left:0px;
right:0px;
@@ -34,44 +34,41 @@
margin: 0;
top:0px;
left:179px;
bottom: 10px;
bottom: 0px;
right: 322px;
overflow: hidden;
@include component-border;
}
#chart-zoom-controls {
position: absolute;
bottom:30px;
right: 350px;
}
.chart-zoom-button {
@include workspace-button;
font-size: 10px;
line-height: 17px;
width: 18px;
height: 18px;
.workspace-footer-button {
@include component-footer-button;
}
#workspace-tabs {
margin-right: 28px;
margin-right: 40px;
}
#workspace-add-tab {
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
height: 34px;
width: 28px;
height: 35px;
width: 40px;
background: #fff;
border-bottom: 1px solid $primary-border-color;
border-left: 1px solid $primary-border-color;
}
#btn-workspace-add-tab {
@include workspace-button;
border: none;
width: 100%;
height: 100%;
line-height: 35px;
line-height: 32px;
height: 32px;
width: 32px;
margin-top: 3px;
margin-right:8px;
border: 1px solid $primary-border-color;
}
#workspace-footer {
@include component-footer;
}