Skip to content

Commit b05ca33

Browse files
author
Madeline Trotter
authored
Replace em/rem with px (#85)
1 parent 9f47cda commit b05ca33

21 files changed

+352
-361
lines changed

‎docs/App.jsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ import { attachGlobalComponentStyles } from "purs/Lumi.Components.Styles";
2828
attachGlobalComponentStyles();
2929

3030
const repoSourceBasePath = `https://github.com/lumihq/purescript-lumi-components/blob/${COMMITHASH}`;
31-
const pursuitBasePath = `https://pursuit.purescript.org/packages/purescript-lumi-components/${VERSION.replace('v', '')}`;
31+
const pursuitBasePath = `https://pursuit.purescript.org/packages/purescript-lumi-components/${VERSION.replace(
32+
"v",
33+
""
34+
)}`;
3235

3336
const fromComponentPath = title => ({
3437
docs: Loadable({
@@ -194,7 +197,7 @@ const renderRoute = component => (
194197
className="lumi"
195198
target="_blank"
196199
href={component.apiReference}
197-
style={{
200+
style={{
198201
marginLeft: "8px"
199202
}}
200203
>
@@ -250,7 +253,7 @@ const MenuLink = ({ toggleMenu }) =>
250253
onClick={toggleMenu}
251254
style={{
252255
color: cssStringHSLA(colors.black1),
253-
marginRight: "1rem",
256+
marginRight: "10px",
254257
display: "flex",
255258
justifyContent: "center",
256259
cursor: "pointer",
@@ -330,7 +333,7 @@ const SideNav = ({ children, isMobile, menuOpen }) => {
330333
borderRightStyle: "solid"
331334
};
332335
const navMobileInner = {
333-
padding: "1em",
336+
padding: "10px",
334337
height: "100%",
335338
overflowY: "auto",
336339
WebkitOverflowScrolling: "touch"
@@ -353,9 +356,9 @@ const NavSubtitle = ({ children }) =>
353356
...sectionHeader,
354357
children: children,
355358
style: {
356-
fontSize: "1.6em",
357-
marginBottom: "1em",
358-
marginTop: "1em"
359+
fontSize: "16px",
360+
marginBottom: "10px",
361+
marginTop: "10px"
359362
}
360363
});
361364

@@ -364,7 +367,7 @@ const ExampleArea = ({ children }) =>
364367
children: children,
365368
style: {
366369
width: "100%",
367-
padding: "2em"
370+
padding: "20px"
368371
}
369372
});
370373

@@ -400,7 +403,7 @@ class ErrorBoundary extends Component {
400403
</pre>
401404
)
402405
],
403-
style: { padding: "1rem" }
406+
style: { padding: "10px" }
404407
});
405408
}
406409
return this.props.children;

‎docs/Examples/Button.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,4 @@ docs =
119119
sections :: Array (Array JSX) -> Array JSX
120120
sections children = intercalate [ spacer ] children
121121
where
122-
spacer = R.div { style: css { display: "flex", height: 1, paddingBottom: "2em" } }
122+
spacer = R.div { style: css { display: "flex", height: 1, paddingBottom: "20px" } }

‎docs/Examples/Color.example.purs‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module Lumi.Components.Examples.Color where
22

33
import Prelude
4-
54
import Color (cssStringHSLA)
65
import Data.Foldable (intercalate)
76
import Data.Maybe (Maybe(..))
@@ -24,19 +23,22 @@ docs =
2423
[ row
2524
{ style: css { flexWrap: "wrap" }
2625
, children:
27-
[ section
28-
[ intercalate divider
29-
[ colorPanel _.black "Black" """default text color
26+
[ section
27+
[ intercalate divider
28+
[ colorPanel _.black "Black"
29+
"""default text color
3030
active nav links
3131
active tabs
3232
active grid/lines icon on items page"""
33-
, colorPanel _.black1 "Black - 50%" """secondary text color
33+
, colorPanel _.black1 "Black - 50%"
34+
"""secondary text color
3435
subtext
3536
inactive nav links
3637
inactive tabs
3738
column titles
3839
column sort arrow icon color"""
39-
, colorPanel _.black2 "Black - 30%" """text in disabled buttons and form fields
40+
, colorPanel _.black2 "Black - 30%"
41+
"""text in disabled buttons and form fields
4042
icons in disabled buttons and form fields
4143
placeholder text in form fields
4244
toggle background
@@ -45,78 +47,86 @@ Checkbox border color (Hover state)
4547
Radio button border color (Hover state)
4648
Grey status pill text color
4749
inactive list/grid icon color"""
48-
, colorPanel _.black3 "Black - 18%" """Form field border (Regular/Inactive state)
50+
, colorPanel _.black3 "Black - 18%"
51+
"""Form field border (Regular/Inactive state)
4952
Checkbox border color (Regular/Inactive state)
5053
Radio button border color (Regular/Inactive state)"""
51-
, colorPanel _.black4 "Black - 12%" """Table/list line colors
54+
, colorPanel _.black4 "Black - 12%"
55+
"""Table/list line colors
5256
Divider line color
5357
Slat border color
5458
Container box color
5559
Thumbnail border color
5660
Payment method border color
5761
Grey status pill border color
5862
Slider grey bar background color"""
59-
, colorPanel _.black5 "Black - 6%" """disabled input field background
63+
, colorPanel _.black5 "Black - 6%"
64+
"""disabled input field background
6065
disabled checkbox background color
6166
disabled radio button background color
6267
disabled toggle background color"""
63-
, colorPanel _.black6 "Black - Background gray" """Nav bar background color
68+
, colorPanel _.black6 "Black - Background gray"
69+
"""Nav bar background color
6470
Image background color"""
65-
, colorPanel _.black7 "Black - 4%" """dropdown hover background color"""
66-
, colorPanel _.black8 "Black - 2%" """table row hover background color"""
67-
]
68-
]
69-
, section
70-
[ intercalate divider
71-
[ colorPanel _.primary "Primary" """primary actions
71+
, colorPanel _.black7 "Black - 4%" """dropdown hover background color"""
72+
, colorPanel _.black8 "Black - 2%" """table row hover background color"""
73+
]
74+
]
75+
, section
76+
[ intercalate divider
77+
[ colorPanel _.primary "Primary"
78+
"""primary actions
7279
active states
7380
links"""
74-
, colorPanel _.primary1 "Primary - 35%" """1px active border for input fields, radio buttons, and checkboxes"""
75-
, colorPanel _.primary2 "Primary - 25%" """Used for the disabled primary button background color"""
76-
, colorPanel _.primary3 "Primary - 15%" """tag color for multi select dropdowns, the 3px focus border for inputs, and the selected row background color in input dropdowns"""
77-
, colorPanel _.primary4 "Primary - 7%" """Input dropdown row hover background color
81+
, colorPanel _.primary1 "Primary - 35%" """1px active border for input fields, radio buttons, and checkboxes"""
82+
, colorPanel _.primary2 "Primary - 25%" """Used for the disabled primary button background color"""
83+
, colorPanel _.primary3 "Primary - 15%" """tag color for multi select dropdowns, the 3px focus border for inputs, and the selected row background color in input dropdowns"""
84+
, colorPanel _.primary4 "Primary - 7%"
85+
"""Input dropdown row hover background color
7886
selected table row background color"""
79-
, colorPanel _.accent1 "Accent 1" """Indicates good or complete status"""
80-
, colorPanel _.accent2 "Accent 2" """Indicates pending, needs attention"""
81-
, colorPanel _.accent3 "Accent 3" """Indicates a problem, warning"""
82-
, colorPanel _.accent33 "Accent 3 - 15%" """Faded for focus borders/backgrounds"""
83-
, colorPanel _.white "White" """Primary button text"""
84-
]
85-
]
86-
]
87+
, colorPanel _.accent1 "Accent 1" """Indicates good or complete status"""
88+
, colorPanel _.accent2 "Accent 2" """Indicates pending, needs attention"""
89+
, colorPanel _.accent3 "Accent 3" """Indicates a problem, warning"""
90+
, colorPanel _.accent33 "Accent 3 - 15%" """Faded for focus borders/backgrounds"""
91+
, colorPanel _.white "White" """Primary button text"""
92+
]
93+
]
94+
]
8795
}
8896
]
8997
where
90-
colorPanel :: (forall a. ColorMap a -> a) -> String -> String -> JSX
91-
colorPanel color title notes =
92-
row_
93-
[ column
94-
{ style: css { padding: "0.5rem", alignItems: "center", color: cssStringHSLA colors.black1 }
95-
, children:
96-
[ button defaults { size = Large, color = toNullable $ Just (color colorNames) }
97-
, text body
98-
{ children = [ R.text (unwrap <<< color $ colorNames) ]
99-
}
100-
]
101-
}
102-
, column
103-
{ style: css { padding: "0.5rem" }
104-
, children:
105-
[ body_ title ]
106-
<> (
107-
split (Pattern "\n") notes <#> \note ->
108-
text subtext
109-
{ style = css { color: cssStringHSLA colors.black1 }
110-
, children = [ R.text note ]
111-
}
98+
colorPanel :: (forall a. ColorMap a -> a) -> String -> String -> JSX
99+
colorPanel color title notes =
100+
row_
101+
[ column
102+
{ style: css { padding: "5px", alignItems: "center", color: cssStringHSLA colors.black1 }
103+
, children:
104+
[ button defaults { size = Large, color = toNullable $ Just (color colorNames) }
105+
, text
106+
body
107+
{ children = [ R.text (unwrap <<< color $ colorNames) ]
108+
}
109+
]
110+
}
111+
, column
112+
{ style: css { padding: "5px" }
113+
, children:
114+
[ body_ title ]
115+
<> ( split (Pattern "\n") notes
116+
<#> \note ->
117+
text
118+
subtext
119+
{ style = css { color: cssStringHSLA colors.black1 }
120+
, children = [ R.text note ]
121+
}
112122
)
113-
}
114-
]
123+
}
124+
]
115125

116-
section panels =
117-
R.section
118-
{ style: css { maxWidth: "70rem", flex: "1 1 0" }
119-
, children: panels
120-
}
126+
section panels =
127+
R.section
128+
{ style: css { maxWidth: "700px", flex: "1 1 0" }
129+
, children: panels
130+
}
121131

122-
divider = row { style: css { height: "2rem" }, children: [] }
132+
divider = row { style: css { height: "20px" }, children: [] }

‎docs/Examples/Form.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ docs = flip element {} $ unsafePerformEffect do
5757

5858
pure $ column_
5959
[ column
60-
{ style: css { width: "100%", maxWidth: 300, padding: "2rem 0" }
60+
{ style: css { width: "100%", maxWidth: 300, padding: "20px 0" }
6161
, children: [ form ]
6262
}
6363

‎docs/Examples/LabeledField.example.purs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ docs =
5555
]
5656
where
5757

58-
simpleDivider = divider { style: css { margin: "0.6rem 0", visibility: "hidden" } }
58+
simpleDivider = divider { style: css { margin: "6px 0", visibility: "hidden" } }
5959

60-
inlineTableDivider = divider { style: css { margin: "0.6rem 0" } }
60+
inlineTableDivider = divider { style: css { margin: "6px 0" } }
6161

6262
makeLabeledFieldExamples forceTopLabel =
6363
[ labeledField defaults

‎docs/Examples/Layouts.example.purs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ docs = (\c -> element c {}) $ withRouter $ toReactComponent identity component {
6666
, content: \_ ->
6767
R.div
6868
{ children: [ p_ "lorem ipsum"]
69-
, style: R.css { padding: "0.5em" }
69+
, style: R.css { padding: "5px" }
7070
}
7171
} :|
7272
[ { id: TabId "shipment"
@@ -75,7 +75,7 @@ docs = (\c -> element c {}) $ withRouter $ toReactComponent identity component {
7575
, content: \_ ->
7676
R.div
7777
{ children: [ p_ "dolor sit amet"]
78-
, style: R.css { padding: "0.5em" }
78+
, style: R.css { padding: "5px" }
7979
}
8080
}
8181
]

‎docs/Examples/Progress.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ docs = unit # make component
3737
, render: \self ->
3838
column_
3939
[ column
40-
{ style: R.css { maxWidth: "50rem", padding: "2rem 0" }
40+
{ style: R.css { maxWidth: "500px", padding: "20px 0" }
4141
, children:
4242
[ labeledField
4343
{ label: R.text "Adjust progress:"

‎docs/Examples/Select.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ docs = unit # make component { initialState, render }
6565
render self@{ state: { disabled, example1, example2, example3, example4 } } =
6666
column_
6767
[ column
68-
{ style: css { maxWidth: "50rem", padding: "2rem 0" }
68+
{ style: css { maxWidth: 500, padding: "20px 0" }
6969
, children:
7070
[ labeledField
7171
{ label: R.text "Disabled"

‎docs/Examples/Tooltip.example.purs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ docs =
5757
[ body_ "Hello, world see"
5858
, tooltip
5959
{ variant: "top"
60-
, style: R.css { padding: "0 0.2rem", textDecoration: "underline" }
60+
, style: R.css { padding: "0 2px", textDecoration: "underline" }
6161
, text: "Lorem ipsum"
6262
, content: body_ "here"
6363
, size: toNullable Nothing
@@ -70,7 +70,7 @@ docs =
7070
[ body_ "Hello, world see"
7171
, tooltip
7272
{ variant: "top"
73-
, style: R.css { padding: "0 0.2rem", textDecoration: "underline" }
73+
, style: R.css { padding: "0 2px", textDecoration: "underline" }
7474
, text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus."
7575
, content: body_ "here"
7676
, size: toNullable $ Just $ Large

‎docs/Examples/Upload.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ docs = unit # make component { initialState, didMount, render }
8989
render self =
9090
column_
9191
[ column
92-
{ style: R.css { maxWidth: "50rem", padding: "2rem 0" }
92+
{ style: R.css { maxWidth: 500, padding: "20px 0" }
9393
, children:
9494
[ labeledField
9595
{ label: R.text "Readonly"

0 commit comments

Comments
 (0)