diff --git a/src/Nri/Ui/Checkbox/V3.elm b/src/Nri/Ui/Checkbox/V3.elm index fb9a5238..c4b331a4 100644 --- a/src/Nri/Ui/Checkbox/V3.elm +++ b/src/Nri/Ui/Checkbox/V3.elm @@ -60,6 +60,19 @@ type IsSelected | PartiallySelected +{-| -} +type Theme + = Square ColorTheme + | LockOnInside + | Premium + + +{-| -} +type ColorTheme + = Default + | Gray + + selectedToMaybe : IsSelected -> Maybe Bool selectedToMaybe selected = case selected of @@ -100,64 +113,14 @@ buildCheckbox assets modifierClasses model labelContent = case model.theme of Square colorTheme -> { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ]) - , labelStyles = - css - [ backgroundRepeat noRepeat - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , Fonts.baseFont - , fontSize (px 16) - , outline none - , padding2 (px 13) zero - , paddingLeft (px (29 + 6)) -- checkbox width + padding - , property "background-position" "left center" - , verticalAlign middle - , display inlineBlock - , case model.selected of - Selected -> - backgroundImage assets.checkboxChecked_svg - - NotSelected -> - backgroundImage assets.checkboxUnchecked_svg - - PartiallySelected -> - backgroundImage assets.checkboxCheckedPartially_svg - , Css.batch <| - case colorTheme of - Gray -> - [ color Colors.gray45 ] - - Default -> - [] - ] + , labelStyles = squareLabelStyles assets model colorTheme , labelClasses = labelClass model.selected , labelContent = labelContent } LockOnInside -> { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ]) - , labelStyles = - css - [ backgroundImage assets.checkboxLockOnInside_svg - , backgroundRepeat noRepeat - , backgroundSize (px 24) - , color Colors.gray20 - , if model.disabled then - cursor auto - else - cursor pointer - , Fonts.baseFont - , fontSize (px 16) - , outline none - , padding2 (px 13) zero - , paddingLeft (px 35) - , property "background-position" "left center" - , verticalAlign middle - , display inlineBlock - ] + , labelStyles = lockLabelStyles assets.checkboxLockOnInside_svg model , labelClasses = labelClass model.selected , labelContent = labelContent } @@ -170,6 +133,112 @@ buildCheckbox assets modifierClasses model labelContent = } +squareLabelStyles assets model colorTheme = + css + [ backgroundRepeat noRepeat + , color Colors.gray20 + , if model.disabled then + cursor auto + else + cursor pointer + , Fonts.baseFont + , fontSize (px 16) + , outline none + , padding2 (px 13) zero + , paddingLeft (px (29 + 6)) -- checkbox width + padding + , property "background-position" "left center" + , verticalAlign middle + , display inlineBlock + , case model.selected of + Selected -> + backgroundImage assets.checkboxChecked_svg + + NotSelected -> + backgroundImage assets.checkboxUnchecked_svg + + PartiallySelected -> + backgroundImage assets.checkboxCheckedPartially_svg + , Css.batch <| + case colorTheme of + Gray -> + [ color Colors.gray45 ] + + Default -> + [] + ] + + +lockLabelStyles image model = + let + baseStyles = + [ -- Positioning + display inlineBlock + , padding2 (px 13) zero + , paddingLeft (px 35) + , verticalAlign middle + + -- Text + , color Colors.gray20 + , Fonts.baseFont + , fontSize (px 16) + + -- Focus & Hover + , outline none + + -- Icon + , backgroundImage image + , backgroundRepeat noRepeat + , backgroundSize (px 24) + , property "background-position" "left center" + ] + in + css + (if model.disabled then + [ cursor auto ] ++ baseStyles + else + [ cursor pointer ] ++ baseStyles + ) + + +premiumLabelStyles : + Asset + -> { a | disabled : Bool } + -> Html.Styled.Attribute msg +premiumLabelStyles image model = + let + baseStyles = + [ -- Positioning + alignItems center + , displayFlex + + -- Focus & Hover + , cursor pointer + , outline none + + -- Icon + , icon + ] + + icon = + after + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage image + , backgroundRepeat noRepeat + , backgroundPosition Css.center + ] + in + css + (if model.disabled then + opacity (num 0.4) :: baseStyles + else + baseStyles + ) + + labelClass : IsSelected -> Html.Styled.Attribute msg labelClass isSelected = case isSelected of @@ -258,58 +327,6 @@ viewLabel model content class theme = [ content ] -premiumLabelStyles : - Asset - -> { a | disabled : Bool } - -> Html.Styled.Attribute msg -premiumLabelStyles image model = - let - baseStyles = - [ -- Positioning - alignItems center - , displayFlex - - -- Focus & Hover - , cursor pointer - , outline none - - -- Icon - , icon - ] - - icon = - after - [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) - , marginLeft (px 8) - , backgroundImage image - , backgroundRepeat noRepeat - , backgroundPosition Css.center - ] - in - css - (if model.disabled then - opacity (num 0.4) :: baseStyles - else - baseStyles - ) - - -{-| -} -type Theme - = Square ColorTheme - | LockOnInside - | Premium - - -{-| -} -type ColorTheme - = Default - | Gray - - {-| The assets used in this module. -} type alias Assets r =