Skip to content

Commit fa5dcc5

Browse files
bpostlethwaitebpostlethwaite
committed
create a more reasonable scss system
A variables main file defines the customizable variables in the editor. This is only partially complete. Better standardization and coverage is required. Use a default vars file to assign plotly defaults to the customizable variables.
1 parent f51c8bb commit fa5dcc5

File tree

16 files changed

+239
-180
lines changed

16 files changed

+239
-180
lines changed

‎src/styles/_helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.\+flex { display: flex; }
22
.\+cursor-clickable { cursor: pointer; }
3-
.\+hover-grey:hover{ color: $color-gray-dark; }
3+
.\+hover-grey:hover{ color: $color-active-text; }

‎src/styles/_mixins.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,15 @@
2121
@error "'#{$value}' is not a valid z-index value";
2222
}
2323
}
24+
25+
@mixin clearfix() {
26+
&:before,
27+
&:after {
28+
content: " ";
29+
display: table;
30+
}
31+
32+
&:after {
33+
clear: both;
34+
}
35+
}

‎src/styles/_variables.scss

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎src/styles/components/containers/_fold.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
clear: both;
1616
padding: 6px 12px;
1717
color: #ffffff;
18-
font-size: 13px;
19-
line-height: 13px;
18+
font-size: $font-size;
19+
line-height: $font-size;
2020
border: 1px solid #a2b1c6;
2121
background-color: #a2b1c6;
2222
height: 15px;

‎src/styles/components/containers/_info.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.info__title {
2-
color: $color-blue-pale;
2+
color: $color-link-light;
33
font-size: $font-size-medium;
44
font-weight: $font-weight-normal;
55
line-height: 18px;
@@ -8,14 +8,14 @@
88

99
.info__text {
1010
padding: $quarter-spacing-unit $half-spacing-unit;
11-
color: $color-rhino-dark;
11+
color: $color-secondary-text;
1212
font-size: $font-size-small;
1313
font-weight: $font-weight-light;
1414
line-height: 18px;
1515
}
1616

1717
.info__sub-text {
18-
color: $color-navyblue;
18+
color: $color-brand;
1919
font-size: $font-size-small;
2020
font-weight: $font-weight-light;
2121
line-height: 14px;

‎src/styles/components/containers/_menupanel.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
border-radius: 2px;
44
text-transform: none;
55
text-align: left;
6-
border: $fold-border;
6+
border: 1px solid $color-border;
77

88
align-content: center;
99
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
@@ -39,7 +39,7 @@
3939
}
4040

4141
.subpanel__icon-span--question {
42-
color: $color-blue-pale;
42+
color: $color-link-light;
4343
}
4444

4545
.subpanel__icon {

‎src/styles/components/containers/_panel.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
bottom: 5px;
66
right: 1px;
77
margin-left: 100px;
8-
background-color: $color-rhino-light-3;
8+
background-color: $color-panel-background;
99
overflow-y: scroll;
1010
padding-left: $half-spacing-unit;
1111
padding-right: $half-spacing-unit;

‎src/styles/components/containers/_section.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.section__heading {
22
display: flex;
3-
font-size: 13px;
4-
color: #69738a;
3+
font-size: $font-size;
4+
color: $color-header-text;
55
font-weight: 400;
66
cursor: default;
7-
background-color: #F4FAFF;
7+
background-color: $color-section-header-background;
88
padding: 6px 12px;
99
clear: both;
1010
text-transform: capitalize;

‎src/styles/components/fields/_field.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.field {
2+
align-items: center;
3+
border-top: 1px solid #f8f8f9;
4+
color: #6D6D6D;
5+
display: flex;
6+
font-size: $font-size;
7+
font-weight: $font-weight-light;
8+
justify-content: flex-start;
9+
line-height: $font-size;
10+
min-height: 32px;
11+
padding: 6px 0;
12+
width: 100%;
13+
}
14+
15+
.field:not(:last-child) {
16+
border-bottom: 1px solid #f8f8f9;
17+
}
18+
19+
.field__no-title {
20+
width: 100%;
21+
padding: 0 12px;
22+
}
23+
24+
.field__no-title--center {
25+
text-align: center;
26+
}
27+
28+
.field__title {
29+
padding-left: 0.5em;
30+
color: #69738a;
31+
font-size: 14px;
32+
width: 36%;
33+
display: inline-block;
34+
}
35+
36+
.field__widget {
37+
width: 64%;
38+
padding-left: 18px;
39+
display: inline-block;
40+
padding-right: 12px;
41+
}
42+
43+
.field__widget--postfix {
44+
width: 50%;
45+
padding-right: 0px;
46+
}
47+
48+
.field__title {
49+
width: 30%;
50+
padding-left: 12px;
51+
display: inline-block;
52+
line-height: 18px;
53+
text-transform: capitalize;
54+
}
55+
56+
.field__title-text {
57+
text-transform: capitalize;
58+
cursor: default;
59+
}

‎src/styles/components/fields/_main.scss

Lines changed: 2 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,2 @@
1-
.field {
2-
align-items: center;
3-
border-top: 1px solid #f8f8f9;
4-
color: #6D6D6D;
5-
display: flex;
6-
font-size: 13px;
7-
font-weight: $font-weight-light;
8-
justify-content: flex-start;
9-
line-height: 13px;
10-
min-height: 32px;
11-
padding: 6px 0;
12-
width: 100%;
13-
}
14-
15-
.field:not(:last-child) {
16-
border-bottom: 1px solid #f8f8f9;
17-
}
18-
19-
.field__no-title {
20-
width: 100%;
21-
padding: 0 12px;
22-
}
23-
24-
.field__no-title--center {
25-
text-align: center;
26-
}
27-
28-
.field__title {
29-
padding-left: 0.5em;
30-
color: #69738a;
31-
font-size: 14px;
32-
width: 36%;
33-
display: inline-block;
34-
}
35-
36-
.field__widget {
37-
width: 64%;
38-
padding-left: 18px;
39-
display: inline-block;
40-
padding-right: 12px;
41-
}
42-
43-
.field__widget--postfix {
44-
width: 50%;
45-
padding-right: 0px;
46-
}
47-
48-
.field__title {
49-
width: 30%;
50-
padding-left: 12px;
51-
display: inline-block;
52-
line-height: 18px;
53-
text-transform: capitalize;
54-
}
55-
56-
.field__title-text {
57-
text-transform: capitalize;
58-
cursor: default;
59-
}
1+
@import 'field';
2+
@import 'symbolselector';

‎src/styles/components/widgets/_colorpicker.scss

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
$swatch-size: 20px;
22
$colorpicker-width: 250px;
3-
$colorpicker-border-color: #bbb;
43
$saturation-picker-height: 160px;
54
$slider-picker-height: 10px;
65

@@ -43,7 +42,7 @@ $slider-picker-height: 10px;
4342
width: 32px;
4443
height: 32px;
4544
border-radius: 50%;
46-
border: 1px solid $color-gray-light;
45+
border: 1px solid $color-border-secondary;
4746
vertical-align: middle;
4847
padding-top: $sixth-spacing-unit;
4948
padding-left: $sixth-spacing-unit;
@@ -52,7 +51,7 @@ $slider-picker-height: 10px;
5251

5352
.colorpicker__selected-color {
5453
margin-left: $half-spacing-unit;
55-
color: $color-black-pale;
54+
color: $color-text;
5655
font-weight: $font-weight-light;
5756
font-size: $font-size-small;
5857
display: inline-block;
@@ -67,17 +66,11 @@ $slider-picker-height: 10px;
6766
vertical-align: middle;
6867
}
6968

70-
.toolLabel {
71-
color: $color-black-pale;
72-
font-size: $font-size-small;
73-
font-weight: $font-weight-light;
74-
}
75-
7669
%colorpicker__component {
7770
position: relative;
7871
overflow: hidden;
7972
margin: 0 $half-spacing-unit;
80-
border: 1px solid $colorpicker-border-color;
73+
border: 1px solid $color-border;
8174
border-radius: $border-radius / 2;
8275
cursor: pointer;
8376
}

‎src/styles/components/widgets/_numeric-input.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
background-color: #f8f8f9;
4040
border: 1px solid #bec8d9;
4141
border-radius: 1px;
42-
width: 13px;
43-
height: 13px;
42+
width: $font-size;
43+
height: $font-size;
4444
line-height: 12px;
4545
text-align: center;
4646
}

‎src/styles/icons/_icons.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@font-face {
22
font-family: "react-plotlyjs-editor";
3-
src: url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXie8lwAAAhIAAAAHEdERUYAMgAGAAAIKAAAACBPUy8yT9ZcggAAAVgAAABWY21hcATVA2AAAAHEAAABSmdhc3D//wADAAAIIAAAAAhnbHlmNg/xlQAAAxwAAAJ4aGVhZA1/kIkAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BiUAJQAAAbAAAAASbG9jYQC2ATwAAAMQAAAADG1heHAASgCBAAABOAAAACBuYW1ltk1ZQgAABZQAAAJJcG9zdGfkHw8AAAfgAAAAQAABAAAAAQAAPBzDHV8PPPUACwIAAAAAANYwp8YAAAAA1jCnxgAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAFAH4AAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAABAAAAAAAAAAAAAAAAUGZFZABAAGEAYgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlAAAAAAADAAAAAwAAABwAAQAAAAAARAADAAEAAAAcAAQAKAAAAAYABAABAAIAAABi//8AAAAAAGH//wAA/6IAAQAAAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALYBPAACACUAJQHbAdsACwB9AAAkNCcmIgcGFBcWMj8BFRQHBg8BBgcWFxYUBwYHBiMiLwEGBwYHBisBIicmNScmJwcGIicmJyY1NDc+ATc+ATcmLwEiJyY9ATQ3Nj8BNjcmJyY0NzY3NjMyHwE2NzY3NjsBMhcWFRcWFzc2MhcWFxYVFAcOAQcOAQcWHwEyFxYBSRUWPBYVFRY8FqcCAQU0BwUTDAMDCBQWBQQDKAgSBAQBCUAFAgMIEggoAwgDJQoCAgEKAwQKAgcFNAUBAgIBBDUFBw8QAwMIFBUGBAMoCBIEBAEJQAUCAwgSCCgDCAMnCAICAQoDBAoCCAQ0BQEC4jwWFRUWPBYVFVM/BQICAggRCRgPAwgDChUUAx8FBiMSCAIDAzUGBB4DAyIOAgUEAgINBAQOAwwQCAMCBT8FAgICCA4MFBMEBgQMEhUDHwUGIxIIAgMDNQYEHgMDJA0BBQQCAg0EBA8CDg4IAwIAAwAlACUB2wHbABMASABcAAAlNTQnJisBIgcGHQEUFxY7ATI3Njc0JicmIyIHBh8BFjMyNzY3NjMyFhUUBwYHBgcGHQEUFxY7ATI3NjU0NzY3Njc2NzY3Njc+ARQHBgcGIicmJyY0NzY3NjIXFhcBJQMDBDYEAwMDBAM2AwQDSSAYGRdGJAQGJgIDBgELDgsNDhYGCAwTDg8DAwQ2BAMDBgYJCAYGBwYHBQMEbR0eMjB8MDIeHR0eMjB8MDIedzcEAgMDAgQ3BAMCAgPEGCwMCz0GBhwCBA4MBxAJCwYIBQgREBMLBAIDAwIEBggJBgQEAwcECQkJCRV8MDIeHR0eMjB8MDIeHR0eMgAAAAAADACWAAEAAAAAAAEAFQAsAAEAAAAAAAIADwBiAAEAAAAAAAMAMgDYAAEAAAAAAAQAFQE3AAEAAAAAAAUACwFlAAEAAAAAAAYAFQGdAAMAAQQJAAEAKgAAAAMAAQQJAAIAHgBCAAMAAQQJAAMAZAByAAMAAQQJAAQAKgELAAMAAQQJAAUAFgFNAAMAAQQJAAYAKgFxAHIAZQBhAGMAdAAtAHAAbABvAHQAbAB5AGoAcwAtAGUAZABpAHQAbwByAAByZWFjdC1wbG90bHlqcy1lZGl0b3IAAHAAbABvAHQAbAB5AGoAcwAtAGUAZABpAHQAbwByAABwbG90bHlqcy1lZGl0b3IAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAcgBlAGEAYwB0AC0AcABsAG8AdABsAHkAagBzAC0AZQBkAGkAdABvAHIAIAA6ACAAMQA0AC0AMQAxAC0AMgAwADEANwAARm9udEZvcmdlIDIuMCA6IHJlYWN0LXBsb3RseWpzLWVkaXRvciA6IDE0LTExLTIwMTcAAHIAZQBhAGMAdAAtAHAAbABvAHQAbAB5AGoAcwAtAGUAZABpAHQAbwByAAByZWFjdC1wbG90bHlqcy1lZGl0b3IAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAHIAZQBhAGMAdAAtAHAAbABvAHQAbAB5AGoAcwAtAGUAZABpAHQAbwByAAByZWFjdC1wbG90bHlqcy1lZGl0b3IAAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABQAAAAEAAgECAQMDY29nD3F1ZXN0aW9uLWNpcmNsZQAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMABAABAAQAAAACAAAAAAABAAAAAMw9os8AAAAA1jCnxgAAAADWMKfG') format("truetype");
3+
src: url('data:font/truetype;charset=utf-8;base64,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') format("truetype");
44
font-weight: normal;
55
font-style: normal;
66
}
@@ -37,3 +37,9 @@
3737
.plotlyjs_editor__icon-question-circle:before {
3838
content: "\62";
3939
}
40+
.plotlyjs_editor__.icon-caret-down:before {
41+
content: "\63";
42+
}
43+
.plotlyjs_editor__.icon-angle-down:before {
44+
content: "\64";
45+
}

‎src/styles/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@charset 'utf-8';
2-
@import 'variables';
2+
@import 'variables/main';
33
@import 'mixins';
44
@import 'helpers';
55
@import 'icons/main';

0 commit comments

Comments
 (0)