NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 03:31:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #727 from NoRedInk/dansby/input-padding

Browse Source 
Input padding
This commit is contained in:
Ben Dansby 2021-09-10 13:55:50 -07:00 committed by GitHub
commit 29b9f293d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Nri/Ui/Checkbox/V5.elm
View File

@ -163,6 +163,7 @@ checkboxContainer model =
[ display block [ display block
, height inherit , height inherit
, position relative , position relative
, marginLeft (px -4)
, pseudoClass "focus-within" , pseudoClass "focus-within"
[ Css.Global.descendants [ Css.Global.descendants
[ Css.Global.class "checkbox-icon-container" [ Css.Global.class "checkbox-icon-container"

5
src/Nri/Ui/RadioButton/V2.elm
View File

@ -143,6 +143,9 @@ internalView config =
, classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ] , classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ]
, css , css
[ position relative [ position relative
, marginLeft (px -4)
, display inlineBlock
, Css.height (px 34)
, pseudoClass "focus-within" , pseudoClass "focus-within"
[ Css.Global.descendants [ Css.Global.descendants
[ Css.Global.class "Nri-RadioButton-RadioButtonIcon" [ Css.Global.class "Nri-RadioButton-RadioButtonIcon"
@ -177,7 +180,7 @@ internalView config =
, ( "Nri-RadioButton-RadioButtonChecked", isChecked ) , ( "Nri-RadioButton-RadioButtonChecked", isChecked )
] ]
, css , css
[ padding4 (px 4) zero (px 4) (px 40) [ padding4 (px 6) zero (px 4) (px 40)
, if config.isDisabled then , if config.isDisabled then
Css.batch Css.batch
[ color Colors.gray45 [ color Colors.gray45

6
styleguide-app/Examples/RadioButton.elm
View File

@ -35,7 +35,7 @@ example =
, update = update , update = update
, subscriptions = subscriptions , subscriptions = subscriptions
, view = view , view = view
, categories = [ Layout ] , categories = [ Inputs ]
, keyboardSupport = , keyboardSupport =
[ { keys = [ Arrow Left ] [ { keys = [ Arrow Left ]
, result = "Move the focus & select the radio button to the left" , result = "Move the focus & select the radio button to the left"
@ -85,7 +85,7 @@ view model =
viewVanilla : State -> Html Msg viewVanilla : State -> Html Msg
viewVanilla state = viewVanilla state =
div [ css [ Css.margin (Css.px 8) ] ] div []
[ RadioButton.view [ RadioButton.view
{ label = "Cats" { label = "Cats"
, value = "Cats" , value = "Cats"
@ -111,7 +111,7 @@ viewPremium state =
premiumConfig = premiumConfig =
Control.currentValue state.premiumControl Control.currentValue state.premiumControl
in in
div [ css [ Css.margin (Css.px 8) ] ] div []
[ Heading.h4 [] [ Html.text "Premium Radio Buttons" ] [ Heading.h4 [] [ Html.text "Premium Radio Buttons" ]
, Html.div [ css [ Css.margin (Css.px 8) ] ] , Html.div [ css [ Css.margin (Css.px 8) ] ]
[ Control.view SetPremiumControl state.premiumControl [ Control.view SetPremiumControl state.premiumControl