@flourish/ui-styles 1.1.0 → 2.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 (7) hide show
  1. package/RELEASE_NOTES.md +6 -0
  2. package/controls-style/settings.yml +1 -2
  3. package/package.json +2 -2
  4. package/src/button-style/index.js +0 -1
  5. package/src/dropdown-style/index.js +4 -5
  6. package/src/general-controls-style/index.js +9 -8
  7. package/ui-styles.js +13 -14
package/RELEASE_NOTES.md CHANGED
@@ -1,3 +1,9 @@
1
+ # 2.0.0
2
+ * BREAKING: Change styles to reflect use of a `select` element for the dropdown. For use with version 3.0.0+ of @flourish/controls
3
+
4
+ # 1.1.1
5
+ * Update module license
6
+
1
7
  # 1.1.0
2
8
  * Apply font size and weight to control title
3
9
 
package/controls-style/settings.yml CHANGED
@@ -17,9 +17,8 @@
17
17
  choices:
18
18
  - [ Bold, bold ]
19
19
  - [ Normal, normal ]
20
- - property: padding
20
+ - property: height
21
21
  name: Height
22
- description: Space below and above controls text
23
22
  type: number
24
23
  width: quarter
25
24
  min: 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "1.1.0",
3
+ "version": "2.0.0",
4
4
  "description": "Flourish module for styling UI elements",
5
5
  "main": "ui-styles.js",
6
6
  "module": "src/index.js",
@@ -12,7 +12,7 @@
12
12
  "precommit": "lint-staged"
13
13
  },
14
14
  "author": "Kiln Enterprises Ltd",
15
- "license": "UNLICENSED",
15
+ "license": "https://flourish.studio/terms/fcl/",
16
16
  "dependencies": {
17
17
  "@flourish/pocket-knife": "^0.5.0",
18
18
  "d3-selection": "^1.4.0"
package/src/button-style/index.js CHANGED
@@ -49,7 +49,6 @@ ButtonStyle.prototype.update = function() {
49
49
  this._styles.select(this._selector + ".fl-control .button")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
- .style("box-sizing", "content-box")
53
52
  .style("margin", "0 2px 0 0 !important")
54
53
  .style("background-color", background_color)
55
54
  .style("color", text_color)
package/src/dropdown-style/index.js CHANGED
@@ -44,22 +44,21 @@ DropdownStyle.prototype.update = function() {
44
44
  this._styles.select(this._selector)
45
45
  .style("pointer-events", "all");
46
46
 
47
- this._styles.select(this._selector + " .main")
47
+ this._styles.select(this._selector + " select")
48
48
  .style("display", "inline-block")
49
49
  .style("cursor", "pointer")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
52
  .style("position", "relative")
53
+ .style("font-family", "inherit")
53
54
  .style("background-color", background_color)
54
55
  .style("color", text_color)
55
56
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
56
57
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
57
58
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
58
59
 
59
- this._styles.select(this._selector + " .main .symbol")
60
- .style("float", "right")
61
- .select("div")
62
- .style("border-top-color", text_color + " !important");
60
+ this._styles.select(this._selector + ":after")
61
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
63
62
 
64
63
  this._styles.select(this._selector + " .main .current")
65
64
  .style("line-height", "1em")
package/src/general-controls-style/index.js CHANGED
@@ -3,7 +3,7 @@ import Stylesheet from "../lib/js2css";
3
3
  var DEFAULTS = Object.freeze({
4
4
  font_size: 1,
5
5
  font_weight: "bold",
6
- padding: 0.4,
6
+ height: 2
7
7
  });
8
8
 
9
9
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -43,20 +43,21 @@ GeneralControlsStyle.prototype.update = function() {
43
43
  .style("vertical-align", "middle");
44
44
 
45
45
  this._styles.select(this._selector + ".fl-control .button")
46
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
46
+ .style("height", this._state.height + "rem")
47
+ .style("padding", "0 0.5em");
47
48
 
48
- this._styles.select(this._selector + " .list-item")
49
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
50
-
51
- this._styles.select(this._selector + "-dropdown .main")
52
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
49
+ this._styles.select(this._selector + "-dropdown select")
50
+ .style("height", this._state.height + "rem")
51
+ .style("font-size", this._state.font_size + "rem")
52
+ .style("font-weight", this._state.font_weight)
53
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
53
54
 
54
55
  this._styles.select(this._selector + "-slider .slider-end-labels")
55
56
  .style("font-size", this._state.font_size + "rem")
56
57
  .style("font-weight", this._state.font_weight);
57
58
 
58
59
  this._styles.select(this._selector + "-slider")
59
- .style("padding", this._state.padding + "rem 0");
60
+ .style("height", this._state.height + "rem");
60
61
 
61
62
  // Some additional styling for slider controls
62
63
  // TODO: should move this somewhere else at some point
package/ui-styles.js CHANGED
@@ -59,7 +59,7 @@
59
59
  var DEFAULTS = Object.freeze({
60
60
  font_size: 1,
61
61
  font_weight: "bold",
62
- padding: 0.4,
62
+ height: 2
63
63
  });
64
64
 
65
65
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -99,20 +99,21 @@
99
99
  .style("vertical-align", "middle");
100
100
 
101
101
  this._styles.select(this._selector + ".fl-control .button")
102
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
102
+ .style("height", this._state.height + "rem")
103
+ .style("padding", "0 0.5em");
103
104
 
104
- this._styles.select(this._selector + " .list-item")
105
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
106
-
107
- this._styles.select(this._selector + "-dropdown .main")
108
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
105
+ this._styles.select(this._selector + "-dropdown select")
106
+ .style("height", this._state.height + "rem")
107
+ .style("font-size", this._state.font_size + "rem")
108
+ .style("font-weight", this._state.font_weight)
109
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
109
110
 
110
111
  this._styles.select(this._selector + "-slider .slider-end-labels")
111
112
  .style("font-size", this._state.font_size + "rem")
112
113
  .style("font-weight", this._state.font_weight);
113
114
 
114
115
  this._styles.select(this._selector + "-slider")
115
- .style("padding", this._state.padding + "rem 0");
116
+ .style("height", this._state.height + "rem");
116
117
 
117
118
  // Some additional styling for slider controls
118
119
  // TODO: should move this somewhere else at some point
@@ -744,7 +745,6 @@
744
745
  this._styles.select(this._selector + ".fl-control .button")
745
746
  .style("overflow", "hidden")
746
747
  .style("white-space", "nowrap")
747
- .style("box-sizing", "content-box")
748
748
  .style("margin", "0 2px 0 0 !important")
749
749
  .style("background-color", background_color)
750
750
  .style("color", text_color)
@@ -820,22 +820,21 @@
820
820
  this._styles.select(this._selector)
821
821
  .style("pointer-events", "all");
822
822
 
823
- this._styles.select(this._selector + " .main")
823
+ this._styles.select(this._selector + " select")
824
824
  .style("display", "inline-block")
825
825
  .style("cursor", "pointer")
826
826
  .style("overflow", "hidden")
827
827
  .style("white-space", "nowrap")
828
828
  .style("position", "relative")
829
+ .style("font-family", "inherit")
829
830
  .style("background-color", background_color)
830
831
  .style("color", text_color)
831
832
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
832
833
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
833
834
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
834
835
 
835
- this._styles.select(this._selector + " .main .symbol")
836
- .style("float", "right")
837
- .select("div")
838
- .style("border-top-color", text_color + " !important");
836
+ this._styles.select(this._selector + ":after")
837
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
839
838
 
840
839
  this._styles.select(this._selector + " .main .current")
841
840
  .style("line-height", "1em")