diff options
author | 2019-04-07 19:50:40 +0200 | |
---|---|---|
committer | 2019-04-07 19:50:40 +0200 | |
commit | b3afb9f45d47ebc352b28eb106b22fffc2f17707 (patch) | |
tree | 1cdcd243eba4e797c75747379f2ed8ad8a392cdc /packages/forms | |
parent | refactor workspace table css away from legacy styles (diff) | |
download | ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.gz ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.zst ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.zip |
render workspace service list like services + toggle
Diffstat (limited to 'packages/forms')
-rw-r--r-- | packages/forms/src/input/index.tsx | 1 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 5 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 4 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 6 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 4 |
5 files changed, 15 insertions, 5 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index f89c91be5..e410f8fef 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -131,6 +131,7 @@ class InputComponent extends Component<IProps, IState> { | |||
131 | title={label} | 131 | title={label} |
132 | showLabel={showLabel} | 132 | showLabel={showLabel} |
133 | htmlFor={id} | 133 | htmlFor={id} |
134 | className={classes.label} | ||
134 | > | 135 | > |
135 | <div | 136 | <div |
136 | className={classnames({ | 137 | className={classnames({ |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index a64d2c340..2f7ea65f2 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -10,6 +10,11 @@ const prefixStyles = (theme: Theme) => ({ | |||
10 | }); | 10 | }); |
11 | 11 | ||
12 | export default (theme: Theme) => ({ | 12 | export default (theme: Theme) => ({ |
13 | label: { | ||
14 | '& > div': { | ||
15 | marginTop: 5, | ||
16 | } | ||
17 | }, | ||
13 | disabled: { | 18 | disabled: { |
14 | opacity: theme.inputDisabledOpacity, | 19 | opacity: theme.inputDisabledOpacity, |
15 | }, | 20 | }, |
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts index f3998de04..c64c9b285 100644 --- a/packages/forms/src/label/styles.ts +++ b/packages/forms/src/label/styles.ts | |||
@@ -1,9 +1,7 @@ | |||
1 | import { Theme } from '../../../theme/lib'; | 1 | import { Theme } from '../../../theme/lib'; |
2 | 2 | ||
3 | export default (theme: Theme) => ({ | 3 | export default (theme: Theme) => ({ |
4 | content: { | 4 | content: {}, |
5 | marginTop: 5, | ||
6 | }, | ||
7 | label: { | 5 | label: { |
8 | color: theme.labelColor, | 6 | color: theme.labelColor, |
9 | fontSize: theme.uiFontSize, | 7 | fontSize: theme.uiFontSize, |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 4a9e3c56e..cfbe91dda 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -56,6 +56,11 @@ const styles = (theme: Theme) => ({ | |||
56 | textAlign: 'left', | 56 | textAlign: 'left', |
57 | color: theme.selectColor, | 57 | color: theme.selectColor, |
58 | }, | 58 | }, |
59 | label: { | ||
60 | '& > div': { | ||
61 | marginTop: 5, | ||
62 | } | ||
63 | }, | ||
59 | popup: { | 64 | popup: { |
60 | opacity: 0, | 65 | opacity: 0, |
61 | height: 0, | 66 | height: 0, |
@@ -334,6 +339,7 @@ class SelectComponent extends Component<IProps> { | |||
334 | title={label} | 339 | title={label} |
335 | showLabel={showLabel} | 340 | showLabel={showLabel} |
336 | htmlFor={id} | 341 | htmlFor={id} |
342 | className={classes.label} | ||
337 | > | 343 | > |
338 | <div | 344 | <div |
339 | className={classnames({ | 345 | className={classnames({ |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 6487f1d07..d84508a5f 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '@meetfranz/theme'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CSS from 'csstype'; | 3 | import CSS from 'csstype'; |
4 | import React, { Component, createRef } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import injectStyle from 'react-jss'; | 5 | import injectStyle from 'react-jss'; |
6 | 6 | ||
7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; | 7 | import { IFormField, IWithStyle, Omit } from '../typings/generic'; |
@@ -45,11 +45,11 @@ const styles = (theme: Theme) => ({ | |||
45 | }, | 45 | }, |
46 | toggleLabel: { | 46 | toggleLabel: { |
47 | display: 'flex', | 47 | display: 'flex', |
48 | alignItems: 'center', | ||
48 | 49 | ||
49 | '& > span': { | 50 | '& > span': { |
50 | order: 1, | 51 | order: 1, |
51 | marginLeft: 15, | 52 | marginLeft: 15, |
52 | marginTop: 2, | ||
53 | }, | 53 | }, |
54 | }, | 54 | }, |
55 | }); | 55 | }); |