Skip to content

Commit a4c1a47

Browse files
authored
Explicitly set input height where possible to reduce browser inconsistencies (#90)
1 parent 456564a commit a4c1a47

File tree

3 files changed

+16
-4
lines changed

3 files changed

+16
-4
lines changed

src/Lumi/Components/Input.purs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -667,9 +667,12 @@ lumiInputStyles = jss
667667
, color: cssStringHSLA colors.black
668668
, fontSize: "14px"
669669
, lineHeight: "20px"
670+
, fontFamily: "inherit"
671+
, height: "40px"
670672
, padding: [ inputPaddingYMobile, "10px" ]
671673
, "@media (min-width: 860px)":
672-
{ padding: [ inputPaddingYDesktop, "10px" ]
674+
{ height: "32px"
675+
, padding: [ inputPaddingYDesktop, "10px" ]
673676
}
674677
, outline: "none"
675678
, touchAction: "manipulation"

src/Lumi/Components/Select.purs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,11 @@ styles = jss
484484
}
485485

486486
, "&[data-multi=\"true\"]":
487-
{ "& lumi-select-input-selected-value":
487+
{ "& lumi-select-input":
488+
{ height: important "unset"
489+
}
490+
491+
, "& lumi-select-input-selected-value":
488492
{ backgroundColor: cssStringHSLA colors.primary3
489493
, borderRadius: "3px"
490494
, padding: "0 0 0 7px"

src/Lumi/Components/Textarea.purs

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
module Lumi.Components.Textarea where
22

33
import Prelude
4+
45
import Data.Maybe (Maybe(..))
56
import Data.Nullable (Nullable, toNullable)
67
import Effect.Uncurried (mkEffectFn1)
7-
import JSS (JSS, jss)
8+
import JSS (JSS, important, jss)
89
import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusInvalidStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputInvalidStyles, lumiInputPlaceholderStyles, lumiInputStyles)
910
import React.Basic (Component, JSX, createComponent, element, makeStateless)
1011
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
@@ -87,8 +88,12 @@ styles =
8788
, touchAction: "manipulation"
8889
, boxSizing: "border-box"
8990
, resize: "vertical"
90-
, minHeight: "32px"
9191
, extend: lumiInputStyles
92+
, height: important "unset"
93+
, minHeight: "40px"
94+
, "@media (min-width: 860px)":
95+
{ minHeight: "32px"
96+
}
9297
, "&:hover": lumiInputHoverStyles
9398
, "&:invalid": lumiInputInvalidStyles
9499
, "&:focus":

0 commit comments

Comments
 (0)