@flourish/ui-styles 0.0.3 → 0.0.5

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 (10) hide show
  1. package/README.md +52 -0
  2. package/button-style/settings.yml +32 -15
  3. package/controls-style/settings.yml +5 -0
  4. package/dropdown-style/settings.yml +13 -5
  5. package/package.json +1 -1
  6. package/src/button-style/index.js +29 -24
  7. package/src/dropdown-style/index.js +19 -17
  8. package/src/general-controls-style/index.js +15 -4
  9. package/src/index.js +6 -6
  10. package/ui-styles.js +69 -51
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/button-style/settings.yml CHANGED
@@ -2,27 +2,46 @@
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
23
+ type: color
24
+ width: quarter
25
+ - property: font_color_hover
26
+ name: Mouse over
20
27
  type: color
21
28
  width: quarter
29
+ optional: true
30
+ - property: button_styles_advanced
31
+ name: Button border styles
32
+ width: full
33
+ type: boolean
34
+ - property: border_width
35
+ name: Border width
36
+ type: number
37
+ width: quarter
38
+ min: 0
39
+ max: 20
22
40
  show_if: button_styles_advanced
23
41
  - property: border_color
24
- name: Border
42
+ name: Color
25
43
  type: color
44
+ optional: true
26
45
  width: quarter
27
46
  show_if: button_styles_advanced
28
47
  - property: border_transparency
@@ -30,15 +49,13 @@
30
49
  type: number
31
50
  width: quarter
32
51
  show_if: button_styles_advanced
33
- - property: border_width
34
- name: Width
35
- type: number
36
- width: quarter
52
+ step: 0.1
37
53
  min: 0
38
- show_if: button_styles_advanced
54
+ max: 1
39
55
  - property: border_radius
40
56
  name: Radius
41
57
  type: number
42
58
  width: quarter
43
59
  min: 0
60
+ max: 100
44
61
  show_if: button_styles_advanced
package/controls-style/settings.yml CHANGED
@@ -1,11 +1,14 @@
1
1
  - property: font_size
2
2
  name: Text size
3
+ new_section: Controls style
3
4
  type: number
4
5
  width: quarter
5
6
  min: 0
7
+ max: 5
6
8
  step: 0.1
7
9
  - property: font_weight
8
10
  name: Text weight
11
+ description:
9
12
  type: string
10
13
  width: half
11
14
  min: 0
@@ -16,7 +19,9 @@
16
19
  - [ Normal, normal ]
17
20
  - property: padding
18
21
  name: Height
22
+ description: Space below and above controls text
19
23
  type: number
20
24
  width: quarter
21
25
  min: 0
26
+ max: 5
22
27
  step: 0.1
package/dropdown-style/settings.yml CHANGED
@@ -1,33 +1,38 @@
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
17
+ description: Show border on all sides, or only at the bottom
15
18
  type: string
16
- width: half
19
+ width: full
17
20
  style: buttons
18
21
  show_if: border_styles_advanced
19
22
  choices:
20
- - [All, all]
23
+ - [All sides, all]
21
24
  - [Bottom, bottom]
22
25
  - property: border_width
23
- name: Width
26
+ name: Border width
24
27
  type: number
25
28
  width: quarter
26
29
  min: 0
30
+ max: 20
27
31
  show_if: border_styles_advanced
28
32
  - property: border_color
29
33
  name: Color
30
34
  type: color
35
+ optional: true
31
36
  width: quarter
32
37
  min: 0
33
38
  show_if: border_styles_advanced
@@ -36,12 +41,15 @@
36
41
  type: number
37
42
  width: quarter
38
43
  min: 0
44
+ max: 1
45
+ step: 0.1
39
46
  show_if: border_styles_advanced
40
47
  - property: border_radius
41
48
  name: Radius
42
49
  type: number
43
50
  width: quarter
44
51
  min: 0
52
+ max: 100
45
53
  show_if:
46
54
  border_styles_advanced: true
47
55
  border_style: all
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
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: "#ff0033",
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,52 +32,52 @@ 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
- this._styles.select(this._selector + ".hidden")
46
+ this._styles.select(this._selector + ".fl-control.hidden")
39
47
  .style("display", "none");
40
48
 
41
- this._styles.select(this._selector + " .button")
42
- .style("display", "inline-block")
43
- .style("cursor", "pointer")
44
- .style("text-align", "center")
49
+ this._styles.select(this._selector + ".fl-control .button")
45
50
  .style("overflow", "hidden")
46
51
  .style("white-space", "nowrap")
47
52
  .style("box-sizing", "content-box")
48
- .style("margin", "0 2px 0 0")
49
- .style("background-color", this._state.background)
50
- .style("color", this._state.font_color)
53
+ .style("margin", "0 2px 0 0 !important")
54
+ .style("background-color", background_color)
55
+ .style("color", text_color)
51
56
  .style("border", this._state.border_width + "px solid " + border_color)
52
57
  .style("border-radius", this._state.border_radius + "px");
53
58
 
54
- this._styles.select(this._selector + " .button.selected")
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
+
63
+ this._styles.select(this._selector + ".fl-control .button.selected")
55
64
  .style("background-color", this._state.background_selected)
56
65
  .style("color", this._state.font_color_selected);
57
66
 
58
- this._styles.select(this._selector + ".grouped .button")
67
+ this._styles.select(this._selector + ".grouped.fl-control .button")
59
68
  .style("border-right", "none")
60
69
  .style("border-radius", "0")
61
70
  .style("margin", "0");
62
71
 
63
- this._styles.select(this._selector + ".grouped .button:first-child")
72
+ this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
64
73
  .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
65
74
 
66
- this._styles.select(this._selector + ".grouped .button:last-child")
75
+ this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
67
76
  .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
68
77
  .style("border-right", this._state.border_width + "px solid " + border_color);
69
78
 
70
- this._styles.select(this._selector + ".grouped.fixed-width:not(.hidden)")
71
- .style("display", "table")
72
- .style("table-layout", "fixed")
73
- .style("width", this._state.grouped_width + "%")
74
- .select(".button")
75
- .style("display", "table-cell");
79
+ this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
80
+ .style("width", this._state.grouped_width + "%");
76
81
 
77
82
  this._stylesheet.innerHTML = this._styles.print();
78
83
  };
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,16 +50,16 @@ 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)
50
- .style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
53
+ .style("background-color", background_color)
54
+ .style("color", text_color)
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");
53
58
 
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")
@@ -62,29 +67,27 @@ DropdownStyle.prototype.update = function() {
62
67
  .style("max-width", "88%")
63
68
  .style("display", "inline-block")
64
69
  .style("overflow", "hidden")
65
- .style("padding", "0.2em 0 0")
66
70
  .style("vertical-align", "top");
67
71
 
68
72
  this._styles.select(this._selector + " .list")
69
- .style("border", this._state.border_width + "px solid " + border_color)
70
- .style("background-color", this._state.background)
71
- .style("position", "absolute")
72
73
  .style("top", "2px")
73
- .style("min-width", "200%")
74
+ .style("min-width", "100%")
74
75
  .style("padding", "2px")
75
76
  .style("display", "none")
76
77
  .style("max-height", "200px")
77
- .style("overflow-y", "scroll")
78
+ .style("overflow-y", "auto")
78
79
  .style("box-shadow", "0 1px 4px rgba(0, 0, 0, .1)")
79
80
  .style("margin-top", "2px")
80
81
  .select(".list-item")
81
82
  .style("line-height", "1em")
82
83
  .style("cursor", "pointer")
83
84
  .style("font-weight", "normal")
84
- .style("color", this._state.font_color);
85
+ .style("color", text_color);
85
86
 
86
87
  this._styles.select(this._selector + ".open .list")
87
88
  .style("display", "block")
89
+ .style("border", this._state.border_width + "px solid " + border_color)
90
+ .style("background-color", background_color)
88
91
  .style("z-index", "1")
89
92
  .style("animation", "dropdown-out 200ms");
90
93
 
@@ -101,7 +104,6 @@ DropdownStyle.prototype.update = function() {
101
104
  .style("padding-right", "0.1rem");
102
105
  }
103
106
 
104
-
105
107
  this._stylesheet.innerHTML = this._styles.print();
106
108
  };
107
109
 
package/src/general-controls-style/index.js CHANGED
@@ -3,13 +3,15 @@ import Stylesheet from "../lib/js2css";
3
3
  var DEFAULTS = Object.freeze({
4
4
  font_size: 1,
5
5
  font_weight: "bold",
6
- padding: 0.5,
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
 
@@ -29,12 +32,13 @@ GeneralControlsStyle.prototype.update = function() {
29
32
  .style("display", "none");
30
33
 
31
34
  this._styles.select(this._selector)
35
+ .style("vertical-align", "middle")
32
36
  .style("position", "relative")
33
37
  .style("font-size", this._state.font_size + "rem")
34
38
  .style("font-weight", this._state.font_weight);
35
39
 
36
- this._styles.select(this._selector + " .button")
37
- .style("padding", this._state.padding + "rem");
40
+ this._styles.select(this._selector + ".fl-control .button")
41
+ .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
38
42
 
39
43
  this._styles.select(this._selector + " .list-item")
40
44
  .style("padding", Math.max(this._state.padding, 0.5) + "rem");
@@ -42,6 +46,13 @@ GeneralControlsStyle.prototype.update = function() {
42
46
  this._styles.select(this._selector + "-dropdown .main")
43
47
  .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
44
48
 
49
+ this._styles.select(this._selector + "-slider .slider-end-labels")
50
+ .style("font-size", this._state.font_size + "rem")
51
+ .style("font-weight", this._state.font_weight);
52
+
53
+ this._styles.select(this._selector + "-slider")
54
+ .style("padding", this._state.padding + "rem 0");
55
+
45
56
  // Some additional styling for slider controls
46
57
  // TODO: should move this somewhere else at some point
47
58
 
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
@@ -59,13 +59,15 @@
59
59
  var DEFAULTS = Object.freeze({
60
60
  font_size: 1,
61
61
  font_weight: "bold",
62
- padding: 0.5,
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
 
@@ -85,12 +88,13 @@
85
88
  .style("display", "none");
86
89
 
87
90
  this._styles.select(this._selector)
91
+ .style("vertical-align", "middle")
88
92
  .style("position", "relative")
89
93
  .style("font-size", this._state.font_size + "rem")
90
94
  .style("font-weight", this._state.font_weight);
91
95
 
92
- this._styles.select(this._selector + " .button")
93
- .style("padding", this._state.padding + "rem");
96
+ this._styles.select(this._selector + ".fl-control .button")
97
+ .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
94
98
 
95
99
  this._styles.select(this._selector + " .list-item")
96
100
  .style("padding", Math.max(this._state.padding, 0.5) + "rem");
@@ -98,6 +102,13 @@
98
102
  this._styles.select(this._selector + "-dropdown .main")
99
103
  .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
100
104
 
105
+ this._styles.select(this._selector + "-slider .slider-end-labels")
106
+ .style("font-size", this._state.font_size + "rem")
107
+ .style("font-weight", this._state.font_weight);
108
+
109
+ this._styles.select(this._selector + "-slider")
110
+ .style("padding", this._state.padding + "rem 0");
111
+
101
112
  // Some additional styling for slider controls
102
113
  // TODO: should move this somewhere else at some point
103
114
 
@@ -681,22 +692,27 @@
681
692
  }
682
693
 
683
694
  var DEFAULTS$1 = Object.freeze({
684
- background: "#ffffff",
685
- background_selected: "#ff0033",
695
+ background: null,
696
+ font_color: null,
686
697
 
687
- font_color: "#333333",
698
+ background_selected: "#2886b2",
688
699
  font_color_selected: "#ffffff",
689
700
 
701
+ background_hover: null,
702
+ font_color_hover: null,
703
+
690
704
  border_width: 1,
691
705
  border_transparency: 0.25,
692
- border_color: "#000000",
706
+ border_color: null,
693
707
  border_radius: 3
694
708
  });
695
709
 
696
- function ButtonStyle(state_, selector_) {
710
+ function ButtonStyle(state_, selector_, layout_) {
697
711
  this._state = state_;
698
712
  for (var key in DEFAULTS$1) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
699
713
 
714
+ this._layout = layout_ || {};
715
+
700
716
  this._styles = new Stylesheet();
701
717
  this._selector = selector_;
702
718
  this._createStylesheet();
@@ -706,71 +722,73 @@
706
722
 
707
723
  ButtonStyle.prototype._createStylesheet = function() {
708
724
  this._stylesheet = document.createElement("style");
725
+ this._stylesheet.className = "fl-ui-styles-button";
709
726
  document.head.appendChild(this._stylesheet);
710
727
  };
711
728
 
712
729
  ButtonStyle.prototype.update = function() {
713
730
  this._styles.clear();
714
731
 
715
- 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);
716
735
 
717
- this._styles.select(this._selector + ".hidden")
736
+ this._styles.select(this._selector + ".fl-control.hidden")
718
737
  .style("display", "none");
719
738
 
720
- this._styles.select(this._selector + " .button")
721
- .style("display", "inline-block")
722
- .style("cursor", "pointer")
723
- .style("text-align", "center")
739
+ this._styles.select(this._selector + ".fl-control .button")
724
740
  .style("overflow", "hidden")
725
741
  .style("white-space", "nowrap")
726
742
  .style("box-sizing", "content-box")
727
- .style("margin", "0 2px 0 0")
728
- .style("background-color", this._state.background)
729
- .style("color", this._state.font_color)
743
+ .style("margin", "0 2px 0 0 !important")
744
+ .style("background-color", background_color)
745
+ .style("color", text_color)
730
746
  .style("border", this._state.border_width + "px solid " + border_color)
731
747
  .style("border-radius", this._state.border_radius + "px");
732
748
 
733
- this._styles.select(this._selector + " .button.selected")
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
+
753
+ this._styles.select(this._selector + ".fl-control .button.selected")
734
754
  .style("background-color", this._state.background_selected)
735
755
  .style("color", this._state.font_color_selected);
736
756
 
737
- this._styles.select(this._selector + ".grouped .button")
757
+ this._styles.select(this._selector + ".grouped.fl-control .button")
738
758
  .style("border-right", "none")
739
759
  .style("border-radius", "0")
740
760
  .style("margin", "0");
741
761
 
742
- this._styles.select(this._selector + ".grouped .button:first-child")
762
+ this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
743
763
  .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
744
764
 
745
- this._styles.select(this._selector + ".grouped .button:last-child")
765
+ this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
746
766
  .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
747
767
  .style("border-right", this._state.border_width + "px solid " + border_color);
748
768
 
749
- this._styles.select(this._selector + ".grouped.fixed-width:not(.hidden)")
750
- .style("display", "table")
751
- .style("table-layout", "fixed")
752
- .style("width", this._state.grouped_width + "%")
753
- .select(".button")
754
- .style("display", "table-cell");
769
+ this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
770
+ .style("width", this._state.grouped_width + "%");
755
771
 
756
772
  this._stylesheet.innerHTML = this._styles.print();
757
773
  };
758
774
 
759
775
  var DEFAULTS$2 = Object.freeze({
760
- background: "#ffffff",
761
- font_color: "#333333",
776
+ background: null,
777
+ font_color: null,
762
778
 
763
779
  border_style: "bottom",
764
780
  border_width: 1,
765
- border_color: "#000000",
781
+ border_color: null,
766
782
  border_transparency: 0.25,
767
783
  border_radius: 3
768
784
  });
769
785
 
770
- function DropdownStyle(state_, selector_) {
786
+ function DropdownStyle(state_, selector_, layout_) {
771
787
  this._state = state_;
772
788
  for (var key in DEFAULTS$2) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
773
789
 
790
+ this._layout = layout_ || {};
791
+
774
792
  this._styles = new Stylesheet();
775
793
  this._selector = selector_;
776
794
  this._createStylesheet();
@@ -780,13 +798,16 @@
780
798
 
781
799
  DropdownStyle.prototype._createStylesheet = function() {
782
800
  this._stylesheet = document.createElement("style");
801
+ this._stylesheet.className = "fl-ui-styles-dropdown";
783
802
  document.head.appendChild(this._stylesheet);
784
803
  };
785
804
 
786
805
  DropdownStyle.prototype.update = function() {
787
806
  this._styles.clear();
788
807
 
789
- 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);
790
811
 
791
812
  this._styles.select(this._selector + " .heading")
792
813
  .style("margin-bottom", "0.4em");
@@ -800,16 +821,16 @@
800
821
  .style("overflow", "hidden")
801
822
  .style("white-space", "nowrap")
802
823
  .style("position", "relative")
803
- .style("background-color", this._state.background)
804
- .style("color", this._state.font_color)
805
- .style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
824
+ .style("background-color", background_color)
825
+ .style("color", text_color)
826
+ .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
806
827
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
807
828
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
808
829
 
809
830
  this._styles.select(this._selector + " .main .symbol")
810
831
  .style("float", "right")
811
832
  .select("div")
812
- .style("border-top-color", this._state.font_color + " !important");
833
+ .style("border-top-color", text_color + " !important");
813
834
 
814
835
  this._styles.select(this._selector + " .main .current")
815
836
  .style("line-height", "1em")
@@ -817,29 +838,27 @@
817
838
  .style("max-width", "88%")
818
839
  .style("display", "inline-block")
819
840
  .style("overflow", "hidden")
820
- .style("padding", "0.2em 0 0")
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
 
@@ -856,20 +875,19 @@
856
875
  .style("padding-right", "0.1rem");
857
876
  }
858
877
 
859
-
860
878
  this._stylesheet.innerHTML = this._styles.print();
861
879
  };
862
880
 
863
- function createGeneralControlsStyle(state, selector) {
864
- return new GeneralControlsStyle(state, selector);
881
+ function createGeneralControlsStyle(state, selector, layout) {
882
+ return new GeneralControlsStyle(state, selector, layout);
865
883
  }
866
884
 
867
- function createButtonStyle(state, selector) {
868
- return new ButtonStyle(state, selector);
885
+ function createButtonStyle(state, selector, layout) {
886
+ return new ButtonStyle(state, selector, layout);
869
887
  }
870
888
 
871
- function createDropdownStyle(state, selector) {
872
- return new DropdownStyle(state, selector);
889
+ function createDropdownStyle(state, selector, layout) {
890
+ return new DropdownStyle(state, selector, layout);
873
891
  }
874
892
 
875
893
  exports.createButtonStyle = createButtonStyle;