@flourish/ui-styles 0.0.2 → 0.0.4

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 (8) hide show
  1. package/button-style/settings.yml +8 -6
  2. package/controls-style/settings.yml +3 -0
  3. package/dropdown-style/settings.yml +3 -2
  4. package/package.json +1 -1
  5. package/src/button-style/index.js +10 -17
  6. package/src/dropdown-style/index.js +2 -4
  7. package/src/general-controls-style/index.js +11 -3
  8. package/ui-styles.js +23 -24
package/button-style/settings.yml CHANGED
@@ -21,21 +21,23 @@
21
21
  width: quarter
22
22
  show_if: button_styles_advanced
23
23
  - property: border_color
24
- name: Border
24
+ name: Color
25
+ new_section: Button border
25
26
  type: color
26
27
  width: quarter
27
28
  show_if: button_styles_advanced
28
- - property: border_transparency
29
- name: Transparency
30
- type: number
31
- width: quarter
32
- show_if: button_styles_advanced
33
29
  - property: border_width
34
30
  name: Width
35
31
  type: number
36
32
  width: quarter
37
33
  min: 0
38
34
  show_if: button_styles_advanced
35
+ - property: border_transparency
36
+ name: Transparency
37
+ type: number
38
+ width: quarter
39
+ show_if: button_styles_advanced
40
+ step: 0.1
39
41
  - property: border_radius
40
42
  name: Radius
41
43
  type: number
package/controls-style/settings.yml CHANGED
@@ -1,11 +1,13 @@
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
6
7
  step: 0.1
7
8
  - property: font_weight
8
9
  name: Text weight
10
+ description:
9
11
  type: string
10
12
  width: half
11
13
  min: 0
@@ -16,6 +18,7 @@
16
18
  - [ Normal, normal ]
17
19
  - property: padding
18
20
  name: Height
21
+ description: Space below and above controls text
19
22
  type: number
20
23
  width: quarter
21
24
  min: 0
package/dropdown-style/settings.yml CHANGED
@@ -12,12 +12,13 @@
12
12
  type: boolean
13
13
  - property: border_style
14
14
  name: Border style
15
+ description: Show border on all sides, or only at the bottom
15
16
  type: string
16
- width: half
17
+ width: full
17
18
  style: buttons
18
19
  show_if: border_styles_advanced
19
20
  choices:
20
- - [All, all]
21
+ - [All sides, all]
21
22
  - [Bottom, bottom]
22
23
  - property: border_width
23
24
  name: Width
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
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
@@ -3,7 +3,7 @@ import Stylesheet from "../lib/js2css";
3
3
 
4
4
  var DEFAULTS = Object.freeze({
5
5
  background: "#ffffff",
6
- background_selected: "#ff0033",
6
+ background_selected: "#2886b2",
7
7
 
8
8
  font_color: "#333333",
9
9
  font_color_selected: "#ffffff",
@@ -35,44 +35,37 @@ ButtonStyle.prototype.update = function() {
35
35
 
36
36
  var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
37
37
 
38
- this._styles.select(this._selector + ".hidden")
38
+ this._styles.select(this._selector + ".fl-control.hidden")
39
39
  .style("display", "none");
40
40
 
41
- this._styles.select(this._selector + " .button")
42
- .style("display", "inline-block")
43
- .style("cursor", "pointer")
44
- .style("text-align", "center")
41
+ this._styles.select(this._selector + ".fl-control .button")
45
42
  .style("overflow", "hidden")
46
43
  .style("white-space", "nowrap")
47
44
  .style("box-sizing", "content-box")
48
- .style("margin", "0 2px 0 0")
45
+ .style("margin", "0 2px 0 0 !important")
49
46
  .style("background-color", this._state.background)
50
47
  .style("color", this._state.font_color)
51
48
  .style("border", this._state.border_width + "px solid " + border_color)
52
49
  .style("border-radius", this._state.border_radius + "px");
53
50
 
54
- this._styles.select(this._selector + " .button.selected")
51
+ this._styles.select(this._selector + ".fl-control .button.selected")
55
52
  .style("background-color", this._state.background_selected)
56
53
  .style("color", this._state.font_color_selected);
57
54
 
58
- this._styles.select(this._selector + ".grouped .button")
55
+ this._styles.select(this._selector + ".grouped.fl-control .button")
59
56
  .style("border-right", "none")
60
57
  .style("border-radius", "0")
61
58
  .style("margin", "0");
62
59
 
63
- this._styles.select(this._selector + ".grouped .button:first-child")
60
+ this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
64
61
  .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
65
62
 
66
- this._styles.select(this._selector + ".grouped .button:last-child")
63
+ this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
67
64
  .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
68
65
  .style("border-right", this._state.border_width + "px solid " + border_color);
69
66
 
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");
67
+ this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
68
+ .style("width", this._state.grouped_width + "%");
76
69
 
77
70
  this._stylesheet.innerHTML = this._styles.print();
78
71
  };
package/src/dropdown-style/index.js CHANGED
@@ -47,7 +47,7 @@ DropdownStyle.prototype.update = function() {
47
47
  .style("position", "relative")
48
48
  .style("background-color", this._state.background)
49
49
  .style("color", this._state.font_color)
50
- .style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
50
+ .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
51
51
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
52
52
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
53
53
 
@@ -62,7 +62,6 @@ DropdownStyle.prototype.update = function() {
62
62
  .style("max-width", "88%")
63
63
  .style("display", "inline-block")
64
64
  .style("overflow", "hidden")
65
- .style("padding", "0.2em 0 0")
66
65
  .style("vertical-align", "top");
67
66
 
68
67
  this._styles.select(this._selector + " .list")
@@ -70,7 +69,7 @@ DropdownStyle.prototype.update = function() {
70
69
  .style("background-color", this._state.background)
71
70
  .style("position", "absolute")
72
71
  .style("top", "2px")
73
- .style("min-width", "100%")
72
+ .style("min-width", "200%")
74
73
  .style("padding", "2px")
75
74
  .style("display", "none")
76
75
  .style("max-height", "200px")
@@ -101,7 +100,6 @@ DropdownStyle.prototype.update = function() {
101
100
  .style("padding-right", "0.1rem");
102
101
  }
103
102
 
104
-
105
103
  this._stylesheet.innerHTML = this._styles.print();
106
104
  };
107
105
 
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.5,
6
+ padding: 0.4,
7
7
  });
8
8
 
9
9
  function GeneralControlsStyle(state_, selector_) {
@@ -29,12 +29,13 @@ GeneralControlsStyle.prototype.update = function() {
29
29
  .style("display", "none");
30
30
 
31
31
  this._styles.select(this._selector)
32
+ .style("vertical-align", "middle")
32
33
  .style("position", "relative")
33
34
  .style("font-size", this._state.font_size + "rem")
34
35
  .style("font-weight", this._state.font_weight);
35
36
 
36
- this._styles.select(this._selector + " .button")
37
- .style("padding", this._state.padding + "rem");
37
+ this._styles.select(this._selector + ".fl-control .button")
38
+ .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
38
39
 
39
40
  this._styles.select(this._selector + " .list-item")
40
41
  .style("padding", Math.max(this._state.padding, 0.5) + "rem");
@@ -42,6 +43,13 @@ GeneralControlsStyle.prototype.update = function() {
42
43
  this._styles.select(this._selector + "-dropdown .main")
43
44
  .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
44
45
 
46
+ this._styles.select(this._selector + "-slider .slider-end-labels")
47
+ .style("font-size", this._state.font_size + "rem")
48
+ .style("font-weight", this._state.font_weight);
49
+
50
+ this._styles.select(this._selector + "-slider")
51
+ .style("padding", this._state.padding + "rem 0");
52
+
45
53
  // Some additional styling for slider controls
46
54
  // TODO: should move this somewhere else at some point
47
55
 
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.5,
62
+ padding: 0.4,
63
63
  });
64
64
 
65
65
  function GeneralControlsStyle(state_, selector_) {
@@ -85,12 +85,13 @@
85
85
  .style("display", "none");
86
86
 
87
87
  this._styles.select(this._selector)
88
+ .style("vertical-align", "middle")
88
89
  .style("position", "relative")
89
90
  .style("font-size", this._state.font_size + "rem")
90
91
  .style("font-weight", this._state.font_weight);
91
92
 
92
- this._styles.select(this._selector + " .button")
93
- .style("padding", this._state.padding + "rem");
93
+ this._styles.select(this._selector + ".fl-control .button")
94
+ .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
94
95
 
95
96
  this._styles.select(this._selector + " .list-item")
96
97
  .style("padding", Math.max(this._state.padding, 0.5) + "rem");
@@ -98,6 +99,13 @@
98
99
  this._styles.select(this._selector + "-dropdown .main")
99
100
  .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
100
101
 
102
+ this._styles.select(this._selector + "-slider .slider-end-labels")
103
+ .style("font-size", this._state.font_size + "rem")
104
+ .style("font-weight", this._state.font_weight);
105
+
106
+ this._styles.select(this._selector + "-slider")
107
+ .style("padding", this._state.padding + "rem 0");
108
+
101
109
  // Some additional styling for slider controls
102
110
  // TODO: should move this somewhere else at some point
103
111
 
@@ -682,7 +690,7 @@
682
690
 
683
691
  var DEFAULTS$1 = Object.freeze({
684
692
  background: "#ffffff",
685
- background_selected: "#ff0033",
693
+ background_selected: "#2886b2",
686
694
 
687
695
  font_color: "#333333",
688
696
  font_color_selected: "#ffffff",
@@ -714,44 +722,37 @@
714
722
 
715
723
  var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
716
724
 
717
- this._styles.select(this._selector + ".hidden")
725
+ this._styles.select(this._selector + ".fl-control.hidden")
718
726
  .style("display", "none");
719
727
 
720
- this._styles.select(this._selector + " .button")
721
- .style("display", "inline-block")
722
- .style("cursor", "pointer")
723
- .style("text-align", "center")
728
+ this._styles.select(this._selector + ".fl-control .button")
724
729
  .style("overflow", "hidden")
725
730
  .style("white-space", "nowrap")
726
731
  .style("box-sizing", "content-box")
727
- .style("margin", "0 2px 0 0")
732
+ .style("margin", "0 2px 0 0 !important")
728
733
  .style("background-color", this._state.background)
729
734
  .style("color", this._state.font_color)
730
735
  .style("border", this._state.border_width + "px solid " + border_color)
731
736
  .style("border-radius", this._state.border_radius + "px");
732
737
 
733
- this._styles.select(this._selector + " .button.selected")
738
+ this._styles.select(this._selector + ".fl-control .button.selected")
734
739
  .style("background-color", this._state.background_selected)
735
740
  .style("color", this._state.font_color_selected);
736
741
 
737
- this._styles.select(this._selector + ".grouped .button")
742
+ this._styles.select(this._selector + ".grouped.fl-control .button")
738
743
  .style("border-right", "none")
739
744
  .style("border-radius", "0")
740
745
  .style("margin", "0");
741
746
 
742
- this._styles.select(this._selector + ".grouped .button:first-child")
747
+ this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
743
748
  .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
744
749
 
745
- this._styles.select(this._selector + ".grouped .button:last-child")
750
+ this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
746
751
  .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
747
752
  .style("border-right", this._state.border_width + "px solid " + border_color);
748
753
 
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");
754
+ this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
755
+ .style("width", this._state.grouped_width + "%");
755
756
 
756
757
  this._stylesheet.innerHTML = this._styles.print();
757
758
  };
@@ -802,7 +803,7 @@
802
803
  .style("position", "relative")
803
804
  .style("background-color", this._state.background)
804
805
  .style("color", this._state.font_color)
805
- .style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
806
+ .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
806
807
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
807
808
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
808
809
 
@@ -817,7 +818,6 @@
817
818
  .style("max-width", "88%")
818
819
  .style("display", "inline-block")
819
820
  .style("overflow", "hidden")
820
- .style("padding", "0.2em 0 0")
821
821
  .style("vertical-align", "top");
822
822
 
823
823
  this._styles.select(this._selector + " .list")
@@ -825,7 +825,7 @@
825
825
  .style("background-color", this._state.background)
826
826
  .style("position", "absolute")
827
827
  .style("top", "2px")
828
- .style("min-width", "100%")
828
+ .style("min-width", "200%")
829
829
  .style("padding", "2px")
830
830
  .style("display", "none")
831
831
  .style("max-height", "200px")
@@ -856,7 +856,6 @@
856
856
  .style("padding-right", "0.1rem");
857
857
  }
858
858
 
859
-
860
859
  this._stylesheet.innerHTML = this._styles.print();
861
860
  };
862
861