diff --git a/src/Css.elm b/src/Css.elm index c3812b72..bc67f625 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -1,6 +1,6 @@ module Css exposing ( Style, batch - , property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility + , property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, gap, gap2, rowGap, columnGap, columnCount, columnWidth, columnRuleColor, columnRuleWidth, columnRuleStyle, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility , Color, all, important, solid, transparent, rgb, rgba, hsl, hsla, hex , featureTag, featureTag2, featureOn, featureOff , borderCollapse, borderColor, borderColor2, borderColor3, borderColor4, borderBottomLeftRadius, borderBottomLeftRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderRadius, borderRadius2, borderRadius3, borderRadius4, borderWidth, borderWidth2, borderWidth3, borderWidth4, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle, borderStyle, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderBox, contentBox, border, border2, border3, borderTop, borderTop2, borderTop3, borderBottom, borderBottom2, borderBottom3, borderLeft, borderLeft2, borderLeft3, borderRight, borderRight2, borderRight3, borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4, borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4, scroll, visible, block, inlineBlock, inlineFlex, inline, none, auto, inherit, unset, initial, noWrap, top, static, fixed, sticky, relative, absolute, position, float, bottom, middle, baseline, sub, super, textTop, textBottom, hidden, wavy, dotted, dashed, double, groove, ridge, inset, outset, matrix, matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale, scale2, scale3d, scaleX, scaleY, skew, skew2, skewX, skewY, translate, translate2, translate3d, translateX, translateY, translateZ, rotate, fillBox, viewBox, flat, preserve3d, content, wrapReverse, wrap, flexStart, flexEnd, stretch, row, rowReverse, column, columnReverse, serif, sansSerif, monospace, cursive, fantasy, xxSmall, xSmall, small, large, xLarge, xxLarge, smaller, larger, normal, italic, oblique, bold, lighter, bolder, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions, ordinal, slashedZero, default, pointer, crosshair, contextMenu, help, progress, wait, cell, text_, verticalText, cursorAlias, copy, move, noDrop, notAllowed, eResize, nResize, neResize, nwResize, sResize, seResize, swResize, wResize, ewResize, nsResize, neswResize, nwseResize, colResize, rowResize, allScroll, zoomIn, zoomOut, grab, grabbing, visiblePainted, visibleFill, visibleStroke, painted, stroke @@ -342,7 +342,7 @@ functions let you define custom properties and selectors, respectively. # Properties -@docs property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility +@docs property, flex, flex2, flex3, medium, alignSelf, alignItems, justifyContent, order, flexDirection, flexFlow1, flexFlow2, flexWrap, flexBasis, flexGrow, flexShrink, transformStyle, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textOrientation, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, textEmphasisColor, capitalize, uppercase, lowercase, fullWidth, hanging, eachLine, textIndent, textIndent2, textIndent3, clip, ellipsis, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textAlign, textAlignLast, left, right, center, justify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, pointerEvents, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, gap, gap2, rowGap, columnGap, columnCount, columnWidth, columnRuleColor, columnRuleWidth, columnRuleStyle, boxSizing, overflow, overflowX, overflowY, overflowWrap, whiteSpace, backgroundColor, color, textShadow, textShadow2, textShadow3, textShadow4, boxShadow, boxShadow2, boxShadow3, boxShadow4, boxShadow5, boxShadow6, lineHeight, letterSpacing, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, fontFamilies, fontVariantNumerics, fontFeatureSettings, fontFeatureSettingsList, cursor, outline, outline3, outlineColor, outlineWidth, outlineStyle, outlineOffset, zIndex, spaceAround, spaceBetween, resize, fill, touchAction, borderSpacing, borderSpacing2, visibility # Values @@ -4917,6 +4917,97 @@ marginInlineEnd = prop1 "margin-inline-end" +{-| Sets [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) + + gap (px 10) + +-} +gap : Length compatible units -> Style +gap = + prop1 "gap" + + +{-| Sets [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) with separate +row-gap and column-gap values. + + gap2 (px 10) (px 10) + +-} +gap2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style +gap2 = + prop2 "gap" + + +{-| Sets [`row-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) + + rowGap (px 10) + +-} +rowGap : Length compatible units -> Style +rowGap = + prop1 "row-gap" + + +{-| Sets [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) + + columnGap (px 10) + +-} +columnGap : Length compatible units -> Style +columnGap = + prop1 "column-gap" + + +{-| Sets [`column-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) + + columnCount (int 3) + +-} +columnCount : IntOrAuto compatible -> Style +columnCount = + prop1 "column-count" + + +{-| Sets [`column-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) + + columnWidth (px 200) + +-} +columnWidth : LengthOrAuto compatible -> Style +columnWidth = + prop1 "column-width" + + +{-| Sets [`column-rule-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color) + + columnRuleColor transparent + +-} +columnRuleColor : ColorValue compatible -> Style +columnRuleColor c = + property "column-rule-color" c.value + + +{-| Sets [`column-rule-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style) + + columnRuleStyle solid + +-} +columnRuleStyle : BorderStyle compatible -> Style +columnRuleStyle = + prop1 "column-rule-style" + + +{-| Sets [`column-rule-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width) + + columnRuleWidth (px 2) + +-} +columnRuleWidth : Length compatible units -> Style +columnRuleWidth = + prop1 "column-rule-width" + + {-| The [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top) property. position absolute diff --git a/tests/Properties.elm b/tests/Properties.elm index e4f379ef..8fb856e3 100644 --- a/tests/Properties.elm +++ b/tests/Properties.elm @@ -380,6 +380,69 @@ all = ] , testProperty { function = "order", property = "order" } [ ( order (int 1), "1" ) ] + , testProperty { function = "gap", property = "gap" } + [ ( gap initial, "initial" ) + , ( gap unset, "unset" ) + , ( gap inherit, "inherit" ) + , ( gap (px 12), "12px" ) + , ( gap (pct 5), "5%" ) + ] + , testProperty { function = "gap2", property = "gap" } + [ ( gap2 initial unset, "initial unset" ) + , ( gap2 unset inherit, "unset inherit" ) + , ( gap2 (px 12) (em 3), "12px 3em" ) + , ( gap2 (pct 5) (vmin 2), "5% 2vmin" ) + ] + , testProperty { function = "rowGap", property = "row-gap" } + [ ( rowGap initial, "initial" ) + , ( rowGap unset, "unset" ) + , ( rowGap inherit, "inherit" ) + , ( rowGap (rem 10), "10rem" ) + , ( rowGap (pct 5), "5%" ) + ] + , testProperty { function = "columnGap", property = "column-gap" } + [ ( columnGap initial, "initial" ) + , ( columnGap unset, "unset" ) + , ( columnGap inherit, "inherit" ) + , ( columnGap (px 12), "12px" ) + , ( columnGap (em 5), "5em" ) + ] + , testProperty { function = "columnCount", property = "column-count" } + [ ( columnCount initial, "initial" ) + , ( columnCount unset, "unset" ) + , ( columnCount inherit, "inherit" ) + , ( columnCount auto, "auto" ) + , ( columnCount (int 5), "5" ) + ] + , testProperty { function = "columnWidth", property = "column-width" } + [ ( columnWidth initial, "initial" ) + , ( columnWidth unset, "unset" ) + , ( columnWidth inherit, "inherit" ) + , ( columnWidth auto, "auto" ) + , ( columnWidth (px 240), "240px" ) + , ( columnWidth (vh 40), "40vh" ) + ] + , testProperty { function = "columnRuleColor", property = "column-rule-color" } + [ ( columnRuleColor initial, "initial" ) + , ( columnRuleColor unset, "unset" ) + , ( columnRuleColor inherit, "inherit" ) + , ( columnRuleColor currentColor, "currentColor" ) + , ( columnRuleColor (rgb 11 14 17), "rgb(11,14,17)" ) + ] + , testProperty { function = "columnRuleStyle", property = "column-rule-style" } + [ ( columnRuleStyle initial, "initial" ) + , ( columnRuleStyle unset, "unset" ) + , ( columnRuleStyle inherit, "inherit" ) + , ( columnRuleStyle solid, "solid" ) + , ( columnRuleStyle hidden, "hidden" ) + ] + , testProperty { function = "columnRuleWidth", property = "column-rule-width" } + [ ( columnRuleWidth initial, "initial" ) + , ( columnRuleWidth unset, "unset" ) + , ( columnRuleWidth inherit, "inherit" ) + , ( columnRuleWidth (pct 45), "45%" ) + , ( columnRuleWidth (em 64), "64em" ) + ] , testProperty { function = "fontWeight", property = "font-weight" } [ ( fontWeight bold, "bold" ) , ( fontWeight normal, "normal" )