@flourish/ui-styles 0.0.4 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +52 -0
  2. package/RELEASE_NOTES.md +2 -0
  3. package/button-style/settings.yml +30 -15
  4. package/controls-style/settings.yml +2 -0
  5. package/dropdown-style/settings.yml +10 -3
  6. package/package.json +1 -1
  7. package/src/button-style/index.js +20 -8
  8. package/src/dropdown-style/index.js +18 -14
  9. package/src/general-controls-style/index.js +4 -1
  10. package/src/index.js +6 -6
  11. package/ui-styles.js +48 -29
package/README.md CHANGED
@@ -1 +1,53 @@
1
1
  # Flourish UI Styles
2
+
3
+ Style UI elements (like @flourish/controls) in Flourish templates.
4
+
5
+ ## How to install
6
+
7
+ `npm install -s @flourish/ui-styles`
8
+
9
+ Add one or more control style objects to your template state:
10
+
11
+ ``` js
12
+ export var state = {
13
+ controls_style: {},
14
+ button_style: {},
15
+ dropdown_style: {}
16
+ }
17
+ ```
18
+
19
+ Import settings for controls styling in your `template.yml` settings.
20
+
21
+ - For generic controls styling: `@flourish/ui-styles/controls-style`
22
+ - For button styling: `@flourish/ui-styles/button-style`
23
+ - For dropdown styling: `@flourish/ui-styles/dropdown-style`
24
+
25
+ ## Basics
26
+
27
+ Initialise the styling outside any function or in a special init function:
28
+
29
+ ``` js
30
+ import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle } from "@flourish/ui-styles";
31
+ var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
32
+ buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
33
+ dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown");
34
+ ```
35
+
36
+ The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above. If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of `fl-control`.
37
+
38
+ Then in the update function, make sure to update the styles with `update()`.
39
+
40
+ ```js
41
+ controlsStyle.update();
42
+ buttonStyle.update();
43
+ dropdownStyle.update();
44
+ ```
45
+
46
+ ## Using defaults from @flourish/layout
47
+
48
+ There is an optional feature that allows you to inherit text and background color from the layout module. Just pass in the layout state object as a third argument when initializing the styles.
49
+
50
+ ``` js
51
+ import { createButtonStyle } from "@flourish/ui-styles";
52
+ var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);
53
+ ```
package/RELEASE_NOTES.md CHANGED
@@ -0,0 +1,2 @@
1
+ # 1.0.0
2
+ * First release
package/button-style/settings.yml CHANGED
@@ -2,35 +2,47 @@
2
2
  name: Background
3
3
  type: color
4
4
  width: quarter
5
- - property: font_color
6
- name: Text color
5
+ optional: true
6
+ - property: background_selected
7
+ name: Selected
7
8
  type: color
8
9
  width: quarter
9
- - property: button_styles_advanced
10
- name: Advanced
10
+ - property: background_hover
11
+ name: Mouse over
12
+ type: color
11
13
  width: half
12
- type: boolean
13
- - property: background_selected
14
- name: Selected background
14
+ optional: true
15
+ - property: font_color
16
+ name: Text color
17
+ new_section: true
15
18
  type: color
19
+ optional: true
16
20
  width: quarter
17
- show_if: button_styles_advanced
18
21
  - property: font_color_selected
19
- name: Selected text color
22
+ name: Selected
20
23
  type: color
21
24
  width: quarter
22
- show_if: button_styles_advanced
23
- - property: border_color
24
- name: Color
25
- new_section: Button border
25
+ - property: font_color_hover
26
+ name: Mouse over
26
27
  type: color
27
28
  width: quarter
28
- show_if: button_styles_advanced
29
+ optional: true
30
+ - property: button_styles_advanced
31
+ name: Button border styles
32
+ width: full
33
+ type: boolean
29
34
  - property: border_width
30
- name: Width
35
+ name: Border width
31
36
  type: number
32
37
  width: quarter
33
38
  min: 0
39
+ max: 20
40
+ show_if: button_styles_advanced
41
+ - property: border_color
42
+ name: Color
43
+ type: color
44
+ optional: true
45
+ width: quarter
34
46
  show_if: button_styles_advanced
35
47
  - property: border_transparency
36
48
  name: Transparency
@@ -38,9 +50,12 @@
38
50
  width: quarter
39
51
  show_if: button_styles_advanced
40
52
  step: 0.1
53
+ min: 0
54
+ max: 1
41
55
  - property: border_radius
42
56
  name: Radius
43
57
  type: number
44
58
  width: quarter
45
59
  min: 0
60
+ max: 100
46
61
  show_if: button_styles_advanced
package/controls-style/settings.yml CHANGED
@@ -4,6 +4,7 @@
4
4
  type: number
5
5
  width: quarter
6
6
  min: 0
7
+ max: 5
7
8
  step: 0.1
8
9
  - property: font_weight
9
10
  name: Text weight
@@ -22,4 +23,5 @@
22
23
  type: number
23
24
  width: quarter
24
25
  min: 0
26
+ max: 5
25
27
  step: 0.1
package/dropdown-style/settings.yml CHANGED
@@ -1,14 +1,16 @@
1
1
  - property: background
2
2
  name: Background
3
3
  type: color
4
+ optional: true
4
5
  width: quarter
5
6
  - property: font_color
6
7
  name: Text color
7
8
  type: color
9
+ optional: true
8
10
  width: quarter
9
11
  - property: border_styles_advanced
10
- name: Advanced
11
- width: half
12
+ name: Dropdown border styles
13
+ width: full
12
14
  type: boolean
13
15
  - property: border_style
14
16
  name: Border style
@@ -21,14 +23,16 @@
21
23
  - [All sides, all]
22
24
  - [Bottom, bottom]
23
25
  - property: border_width
24
- name: Width
26
+ name: Border width
25
27
  type: number
26
28
  width: quarter
27
29
  min: 0
30
+ max: 20
28
31
  show_if: border_styles_advanced
29
32
  - property: border_color
30
33
  name: Color
31
34
  type: color
35
+ optional: true
32
36
  width: quarter
33
37
  min: 0
34
38
  show_if: border_styles_advanced
@@ -37,12 +41,15 @@
37
41
  type: number
38
42
  width: quarter
39
43
  min: 0
44
+ max: 1
45
+ step: 0.1
40
46
  show_if: border_styles_advanced
41
47
  - property: border_radius
42
48
  name: Radius
43
49
  type: number
44
50
  width: quarter
45
51
  min: 0
52
+ max: 100
46
53
  show_if:
47
54
  border_styles_advanced: true
48
55
  border_style: all
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "0.0.4",
3
+ "version": "1.0.0",
4
4
  "description": "Flourish module for styling UI elements",
5
5
  "main": "ui-styles.js",
6
6
  "module": "src/index.js",
package/src/button-style/index.js CHANGED
@@ -2,22 +2,27 @@ import { hexToRgba } from "@flourish/pocket-knife";
2
2
  import Stylesheet from "../lib/js2css";
3
3
 
4
4
  var DEFAULTS = Object.freeze({
5
- background: "#ffffff",
6
- background_selected: "#2886b2",
5
+ background: null,
6
+ font_color: null,
7
7
 
8
- font_color: "#333333",
8
+ background_selected: "#2886b2",
9
9
  font_color_selected: "#ffffff",
10
10
 
11
+ background_hover: null,
12
+ font_color_hover: null,
13
+
11
14
  border_width: 1,
12
15
  border_transparency: 0.25,
13
- border_color: "#000000",
16
+ border_color: null,
14
17
  border_radius: 3
15
18
  });
16
19
 
17
- function ButtonStyle(state_, selector_) {
20
+ function ButtonStyle(state_, selector_, layout_) {
18
21
  this._state = state_;
19
22
  for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
20
23
 
24
+ this._layout = layout_ || {};
25
+
21
26
  this._styles = new Stylesheet();
22
27
  this._selector = selector_;
23
28
  this._createStylesheet();
@@ -27,13 +32,16 @@ function ButtonStyle(state_, selector_) {
27
32
 
28
33
  ButtonStyle.prototype._createStylesheet = function() {
29
34
  this._stylesheet = document.createElement("style");
35
+ this._stylesheet.className = "fl-ui-styles-button";
30
36
  document.head.appendChild(this._stylesheet);
31
37
  };
32
38
 
33
39
  ButtonStyle.prototype.update = function() {
34
40
  this._styles.clear();
35
41
 
36
- var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
42
+ var background_color = this._state.background || this._layout.background_color || "#ffffff";
43
+ var text_color = this._state.font_color || this._layout.font_color || "#333333";
44
+ var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
37
45
 
38
46
  this._styles.select(this._selector + ".fl-control.hidden")
39
47
  .style("display", "none");
@@ -43,11 +51,15 @@ ButtonStyle.prototype.update = function() {
43
51
  .style("white-space", "nowrap")
44
52
  .style("box-sizing", "content-box")
45
53
  .style("margin", "0 2px 0 0 !important")
46
- .style("background-color", this._state.background)
47
- .style("color", this._state.font_color)
54
+ .style("background-color", background_color)
55
+ .style("color", text_color)
48
56
  .style("border", this._state.border_width + "px solid " + border_color)
49
57
  .style("border-radius", this._state.border_radius + "px");
50
58
 
59
+ this._styles.select(this._selector + ".fl-control .button:hover")
60
+ .style("background-color", this._state.background_hover || background_color)
61
+ .style("color", this._state.font_color_hover || text_color);
62
+
51
63
  this._styles.select(this._selector + ".fl-control .button.selected")
52
64
  .style("background-color", this._state.background_selected)
53
65
  .style("color", this._state.font_color_selected);
package/src/dropdown-style/index.js CHANGED
@@ -2,20 +2,22 @@ import { hexToRgba } from "@flourish/pocket-knife";
2
2
  import Stylesheet from "../lib/js2css";
3
3
 
4
4
  var DEFAULTS = Object.freeze({
5
- background: "#ffffff",
6
- font_color: "#333333",
5
+ background: null,
6
+ font_color: null,
7
7
 
8
8
  border_style: "bottom",
9
9
  border_width: 1,
10
- border_color: "#000000",
10
+ border_color: null,
11
11
  border_transparency: 0.25,
12
12
  border_radius: 3
13
13
  });
14
14
 
15
- function DropdownStyle(state_, selector_) {
15
+ function DropdownStyle(state_, selector_, layout_) {
16
16
  this._state = state_;
17
17
  for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
18
18
 
19
+ this._layout = layout_ || {};
20
+
19
21
  this._styles = new Stylesheet();
20
22
  this._selector = selector_;
21
23
  this._createStylesheet();
@@ -25,13 +27,16 @@ function DropdownStyle(state_, selector_) {
25
27
 
26
28
  DropdownStyle.prototype._createStylesheet = function() {
27
29
  this._stylesheet = document.createElement("style");
30
+ this._stylesheet.className = "fl-ui-styles-dropdown";
28
31
  document.head.appendChild(this._stylesheet);
29
32
  };
30
33
 
31
34
  DropdownStyle.prototype.update = function() {
32
35
  this._styles.clear();
33
36
 
34
- var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
37
+ var background_color = this._state.background || this._layout.background_color || "#ffffff";
38
+ var text_color = this._state.font_color || this._layout.font_color || "#333333";
39
+ var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
35
40
 
36
41
  this._styles.select(this._selector + " .heading")
37
42
  .style("margin-bottom", "0.4em");
@@ -45,8 +50,8 @@ DropdownStyle.prototype.update = function() {
45
50
  .style("overflow", "hidden")
46
51
  .style("white-space", "nowrap")
47
52
  .style("position", "relative")
48
- .style("background-color", this._state.background)
49
- .style("color", this._state.font_color)
53
+ .style("background-color", background_color)
54
+ .style("color", text_color)
50
55
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
51
56
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
52
57
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
@@ -54,7 +59,7 @@ DropdownStyle.prototype.update = function() {
54
59
  this._styles.select(this._selector + " .main .symbol")
55
60
  .style("float", "right")
56
61
  .select("div")
57
- .style("border-top-color", this._state.font_color + " !important");
62
+ .style("border-top-color", text_color + " !important");
58
63
 
59
64
  this._styles.select(this._selector + " .main .current")
60
65
  .style("line-height", "1em")
@@ -65,25 +70,24 @@ DropdownStyle.prototype.update = function() {
65
70
  .style("vertical-align", "top");
66
71
 
67
72
  this._styles.select(this._selector + " .list")
68
- .style("border", this._state.border_width + "px solid " + border_color)
69
- .style("background-color", this._state.background)
70
- .style("position", "absolute")
71
73
  .style("top", "2px")
72
- .style("min-width", "200%")
74
+ .style("min-width", "100%")
73
75
  .style("padding", "2px")
74
76
  .style("display", "none")
75
77
  .style("max-height", "200px")
76
- .style("overflow-y", "scroll")
78
+ .style("overflow-y", "auto")
77
79
  .style("box-shadow", "0 1px 4px rgba(0, 0, 0, .1)")
78
80
  .style("margin-top", "2px")
79
81
  .select(".list-item")
80
82
  .style("line-height", "1em")
81
83
  .style("cursor", "pointer")
82
84
  .style("font-weight", "normal")
83
- .style("color", this._state.font_color);
85
+ .style("color", text_color);
84
86
 
85
87
  this._styles.select(this._selector + ".open .list")
86
88
  .style("display", "block")
89
+ .style("border", this._state.border_width + "px solid " + border_color)
90
+ .style("background-color", background_color)
87
91
  .style("z-index", "1")
88
92
  .style("animation", "dropdown-out 200ms");
89
93
 
package/src/general-controls-style/index.js CHANGED
@@ -6,10 +6,12 @@ var DEFAULTS = Object.freeze({
6
6
  padding: 0.4,
7
7
  });
8
8
 
9
- function GeneralControlsStyle(state_, selector_) {
9
+ function GeneralControlsStyle(state_, selector_, layout_) {
10
10
  this._state = state_;
11
11
  for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
12
12
 
13
+ this._layout = layout_ || {};
14
+
13
15
  this._styles = new Stylesheet();
14
16
  this._selector = selector_;
15
17
  this._createStylesheet();
@@ -19,6 +21,7 @@ function GeneralControlsStyle(state_, selector_) {
19
21
 
20
22
  GeneralControlsStyle.prototype._createStylesheet = function() {
21
23
  this._stylesheet = document.createElement("style");
24
+ this._stylesheet.className = "fl-ui-styles-controls";
22
25
  document.head.appendChild(this._stylesheet);
23
26
  };
24
27
 
package/src/index.js CHANGED
@@ -2,16 +2,16 @@ import GeneralControlsStyle from "./general-controls-style";
2
2
  import ButtonStyle from "./button-style";
3
3
  import DropdownStyle from "./dropdown-style";
4
4
 
5
- function createGeneralControlsStyle(state, selector) {
6
- return new GeneralControlsStyle(state, selector);
5
+ function createGeneralControlsStyle(state, selector, layout) {
6
+ return new GeneralControlsStyle(state, selector, layout);
7
7
  }
8
8
 
9
- function createButtonStyle(state, selector) {
10
- return new ButtonStyle(state, selector);
9
+ function createButtonStyle(state, selector, layout) {
10
+ return new ButtonStyle(state, selector, layout);
11
11
  }
12
12
 
13
- function createDropdownStyle(state, selector) {
14
- return new DropdownStyle(state, selector);
13
+ function createDropdownStyle(state, selector, layout) {
14
+ return new DropdownStyle(state, selector, layout);
15
15
  }
16
16
 
17
17
  export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle };
package/ui-styles.js CHANGED
@@ -62,10 +62,12 @@
62
62
  padding: 0.4,
63
63
  });
64
64
 
65
- function GeneralControlsStyle(state_, selector_) {
65
+ function GeneralControlsStyle(state_, selector_, layout_) {
66
66
  this._state = state_;
67
67
  for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
68
68
 
69
+ this._layout = layout_ || {};
70
+
69
71
  this._styles = new Stylesheet();
70
72
  this._selector = selector_;
71
73
  this._createStylesheet();
@@ -75,6 +77,7 @@
75
77
 
76
78
  GeneralControlsStyle.prototype._createStylesheet = function() {
77
79
  this._stylesheet = document.createElement("style");
80
+ this._stylesheet.className = "fl-ui-styles-controls";
78
81
  document.head.appendChild(this._stylesheet);
79
82
  };
80
83
 
@@ -689,22 +692,27 @@
689
692
  }
690
693
 
691
694
  var DEFAULTS$1 = Object.freeze({
692
- background: "#ffffff",
693
- background_selected: "#2886b2",
695
+ background: null,
696
+ font_color: null,
694
697
 
695
- font_color: "#333333",
698
+ background_selected: "#2886b2",
696
699
  font_color_selected: "#ffffff",
697
700
 
701
+ background_hover: null,
702
+ font_color_hover: null,
703
+
698
704
  border_width: 1,
699
705
  border_transparency: 0.25,
700
- border_color: "#000000",
706
+ border_color: null,
701
707
  border_radius: 3
702
708
  });
703
709
 
704
- function ButtonStyle(state_, selector_) {
710
+ function ButtonStyle(state_, selector_, layout_) {
705
711
  this._state = state_;
706
712
  for (var key in DEFAULTS$1) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
707
713
 
714
+ this._layout = layout_ || {};
715
+
708
716
  this._styles = new Stylesheet();
709
717
  this._selector = selector_;
710
718
  this._createStylesheet();
@@ -714,13 +722,16 @@
714
722
 
715
723
  ButtonStyle.prototype._createStylesheet = function() {
716
724
  this._stylesheet = document.createElement("style");
725
+ this._stylesheet.className = "fl-ui-styles-button";
717
726
  document.head.appendChild(this._stylesheet);
718
727
  };
719
728
 
720
729
  ButtonStyle.prototype.update = function() {
721
730
  this._styles.clear();
722
731
 
723
- var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
732
+ var background_color = this._state.background || this._layout.background_color || "#ffffff";
733
+ var text_color = this._state.font_color || this._layout.font_color || "#333333";
734
+ var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
724
735
 
725
736
  this._styles.select(this._selector + ".fl-control.hidden")
726
737
  .style("display", "none");
@@ -730,11 +741,15 @@
730
741
  .style("white-space", "nowrap")
731
742
  .style("box-sizing", "content-box")
732
743
  .style("margin", "0 2px 0 0 !important")
733
- .style("background-color", this._state.background)
734
- .style("color", this._state.font_color)
744
+ .style("background-color", background_color)
745
+ .style("color", text_color)
735
746
  .style("border", this._state.border_width + "px solid " + border_color)
736
747
  .style("border-radius", this._state.border_radius + "px");
737
748
 
749
+ this._styles.select(this._selector + ".fl-control .button:hover")
750
+ .style("background-color", this._state.background_hover || background_color)
751
+ .style("color", this._state.font_color_hover || text_color);
752
+
738
753
  this._styles.select(this._selector + ".fl-control .button.selected")
739
754
  .style("background-color", this._state.background_selected)
740
755
  .style("color", this._state.font_color_selected);
@@ -758,20 +773,22 @@
758
773
  };
759
774
 
760
775
  var DEFAULTS$2 = Object.freeze({
761
- background: "#ffffff",
762
- font_color: "#333333",
776
+ background: null,
777
+ font_color: null,
763
778
 
764
779
  border_style: "bottom",
765
780
  border_width: 1,
766
- border_color: "#000000",
781
+ border_color: null,
767
782
  border_transparency: 0.25,
768
783
  border_radius: 3
769
784
  });
770
785
 
771
- function DropdownStyle(state_, selector_) {
786
+ function DropdownStyle(state_, selector_, layout_) {
772
787
  this._state = state_;
773
788
  for (var key in DEFAULTS$2) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
774
789
 
790
+ this._layout = layout_ || {};
791
+
775
792
  this._styles = new Stylesheet();
776
793
  this._selector = selector_;
777
794
  this._createStylesheet();
@@ -781,13 +798,16 @@
781
798
 
782
799
  DropdownStyle.prototype._createStylesheet = function() {
783
800
  this._stylesheet = document.createElement("style");
801
+ this._stylesheet.className = "fl-ui-styles-dropdown";
784
802
  document.head.appendChild(this._stylesheet);
785
803
  };
786
804
 
787
805
  DropdownStyle.prototype.update = function() {
788
806
  this._styles.clear();
789
807
 
790
- var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
808
+ var background_color = this._state.background || this._layout.background_color || "#ffffff";
809
+ var text_color = this._state.font_color || this._layout.font_color || "#333333";
810
+ var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
791
811
 
792
812
  this._styles.select(this._selector + " .heading")
793
813
  .style("margin-bottom", "0.4em");
@@ -801,8 +821,8 @@
801
821
  .style("overflow", "hidden")
802
822
  .style("white-space", "nowrap")
803
823
  .style("position", "relative")
804
- .style("background-color", this._state.background)
805
- .style("color", this._state.font_color)
824
+ .style("background-color", background_color)
825
+ .style("color", text_color)
806
826
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
807
827
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
808
828
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
@@ -810,7 +830,7 @@
810
830
  this._styles.select(this._selector + " .main .symbol")
811
831
  .style("float", "right")
812
832
  .select("div")
813
- .style("border-top-color", this._state.font_color + " !important");
833
+ .style("border-top-color", text_color + " !important");
814
834
 
815
835
  this._styles.select(this._selector + " .main .current")
816
836
  .style("line-height", "1em")
@@ -821,25 +841,24 @@
821
841
  .style("vertical-align", "top");
822
842
 
823
843
  this._styles.select(this._selector + " .list")
824
- .style("border", this._state.border_width + "px solid " + border_color)
825
- .style("background-color", this._state.background)
826
- .style("position", "absolute")
827
844
  .style("top", "2px")
828
- .style("min-width", "200%")
845
+ .style("min-width", "100%")
829
846
  .style("padding", "2px")
830
847
  .style("display", "none")
831
848
  .style("max-height", "200px")
832
- .style("overflow-y", "scroll")
849
+ .style("overflow-y", "auto")
833
850
  .style("box-shadow", "0 1px 4px rgba(0, 0, 0, .1)")
834
851
  .style("margin-top", "2px")
835
852
  .select(".list-item")
836
853
  .style("line-height", "1em")
837
854
  .style("cursor", "pointer")
838
855
  .style("font-weight", "normal")
839
- .style("color", this._state.font_color);
856
+ .style("color", text_color);
840
857
 
841
858
  this._styles.select(this._selector + ".open .list")
842
859
  .style("display", "block")
860
+ .style("border", this._state.border_width + "px solid " + border_color)
861
+ .style("background-color", background_color)
843
862
  .style("z-index", "1")
844
863
  .style("animation", "dropdown-out 200ms");
845
864
 
@@ -859,16 +878,16 @@
859
878
  this._stylesheet.innerHTML = this._styles.print();
860
879
  };
861
880
 
862
- function createGeneralControlsStyle(state, selector) {
863
- return new GeneralControlsStyle(state, selector);
881
+ function createGeneralControlsStyle(state, selector, layout) {
882
+ return new GeneralControlsStyle(state, selector, layout);
864
883
  }
865
884
 
866
- function createButtonStyle(state, selector) {
867
- return new ButtonStyle(state, selector);
885
+ function createButtonStyle(state, selector, layout) {
886
+ return new ButtonStyle(state, selector, layout);
868
887
  }
869
888
 
870
- function createDropdownStyle(state, selector) {
871
- return new DropdownStyle(state, selector);
889
+ function createDropdownStyle(state, selector, layout) {
890
+ return new DropdownStyle(state, selector, layout);
872
891
  }
873
892
 
874
893
  exports.createButtonStyle = createButtonStyle;