1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict';
|
7 |
|
8 | const px = require('add-px-to-style');
|
9 | const none = require('./none');
|
10 |
|
11 | module.exports = json;
|
12 |
|
13 | json.palette = ['white', 'rgb(200,0,0)', 'rgb(40,40,40)'];
|
14 |
|
15 | json.fontSize = '12px';
|
16 | json.fontFamily = 'monospace';
|
17 | json.labelWidth = 'auto';
|
18 | json.inputHeight = 1.5;
|
19 |
|
20 | function json (opts) {
|
21 | opts = opts || {};
|
22 |
|
23 | let h = opts.inputHeight || json.inputHeight;
|
24 | let labelWidth = opts.labelWidth || json.labelWidth;
|
25 | let fontSize = opts.fontSize || json.fontSize;
|
26 | let font = opts.fontFamily || json.fontFamily;
|
27 |
|
28 | let palette = opts.palette || json.palette;
|
29 |
|
30 | let white = palette[0];
|
31 | let black = palette[palette.length - 1];
|
32 | let red = palette[palette.length - 2];
|
33 |
|
34 | return none({
|
35 | fontSize: fontSize,
|
36 | fontFamily: font,
|
37 | inputHeight: h,
|
38 | labelWidth: labelWidth,
|
39 | palette: [white, black]
|
40 | }) + `
|
41 | :host {
|
42 | -webkit-user-select: initial;
|
43 | -moz-user-select: initial;
|
44 | -ms-user-select: initial;
|
45 | user-select: initial;
|
46 | }
|
47 |
|
48 | .settings-panel-title {
|
49 | margin: 0;
|
50 | font-size: 1.4em;
|
51 | }
|
52 |
|
53 | .settings-panel-field {
|
54 | display: inline-block;
|
55 | }
|
56 |
|
57 | .settings-panel-label {
|
58 | display: inline-block;
|
59 | width: ${labelWidth};
|
60 | color: ${red};
|
61 | }
|
62 | .settings-panel-label:before {
|
63 | content: '"';
|
64 | opacity: .3;
|
65 | color: ${black};
|
66 | }
|
67 | .settings-panel-label:after {
|
68 | content: '":';
|
69 | opacity: .3;
|
70 | color: ${black};
|
71 | }
|
72 | .settings-panel-input {
|
73 | display: inline-block;
|
74 | min-height: 0;
|
75 | }
|
76 | /*
|
77 | .settings-panel-input:after {
|
78 | content: ',';
|
79 | color: ${black};
|
80 | opacity: .3;
|
81 | }
|
82 | */
|
83 |
|
84 | .settings-panel-range {
|
85 | display: none;
|
86 | }
|
87 | .settings-panel-range + .settings-panel-value {
|
88 | width: auto;
|
89 | }
|
90 | .settings-panel-value {
|
91 | padding: 0;
|
92 | }
|
93 |
|
94 |
|
95 | .settings-panel-text,
|
96 | .settings-panel-color-value,
|
97 | .settings-panel-select,
|
98 | .settings-panel-textarea {
|
99 | -webkit-appearance: none;
|
100 | -moz-appearance: none;
|
101 | -o-appearance:none;
|
102 | border: none;
|
103 | background: none;
|
104 | }
|
105 |
|
106 | .settings-panel-text:focus,
|
107 | .settings-panel-color-value:focus,
|
108 | .settings-panel-textarea:focus {
|
109 | outline: none;
|
110 | }
|
111 |
|
112 |
|
113 | .settings-panel-interval {
|
114 | display: none;
|
115 | }
|
116 | .settings-panel-field--interval {
|
117 | white-space: nowrap;
|
118 | }
|
119 | .settings-panel-field--interval .settings-panel-input:before {
|
120 | content: '[';
|
121 | opacity: .3;
|
122 | }
|
123 | .settings-panel-field--interval .settings-panel-input:after {
|
124 | content: ']';
|
125 | opacity: .3;
|
126 | }
|
127 |
|
128 | /** Decorations */
|
129 | :host hr {
|
130 | margin: 0;
|
131 | border: none;
|
132 | height: 0;
|
133 | }
|
134 | .settings-panel-field--disabled {
|
135 | opacity: .333;
|
136 | pointer-events: none;
|
137 | }
|
138 | `;
|
139 | }; |
\ | No newline at end of file |