From 6b76a8c32d755783e6fd51e43ff6030089ab1690 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 07:15:25 +0000 Subject: [PATCH 01/45] Adds Logical border radius properties Implements: - border-start-start-radius - border-start-end-radius - border-end-start-radius - border-end-end-radius In both 1 and 2-argument forms. --- src/Css.elm | 171 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..ce446ee3 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -36,6 +36,7 @@ module Css exposing , dotted, dashed, solid, double, groove, ridge, inset, outset , borderColor, borderColor2, borderColor3, borderColor4, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor , borderRadius, borderRadius2, borderRadius3, borderRadius4, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderBottomLeftRadius, borderBottomLeftRadius2 + , borderStartStartRadius, borderStartStartRadius2, borderStartEndRadius, borderStartEndRadius2, borderEndStartRadius, borderEndStartRadius2, borderEndEndRadius, borderEndEndRadius2 , borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4 , borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4 , outline, outline3, outlineWidth, outlineColor, invert, outlineStyle, outlineOffset @@ -310,6 +311,8 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs borderRadius, borderRadius2, borderRadius3, borderRadius4, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderBottomLeftRadius, borderBottomLeftRadius2 +@docs borderStartStartRadius, borderStartStartRadius2, borderStartEndRadius, borderStartEndRadius2, borderEndStartRadius, borderEndStartRadius2, borderEndEndRadius, borderEndEndRadius2 + ## Border Image @@ -8170,6 +8173,174 @@ borderBottomLeftRadius2 (Value horizontal) (Value vertical) = AppendProperty ("border-bottom-left-radius:" ++ horizontal ++ " " ++ vertical) +{-| Sets [`border-start-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius) property. + + borderStartStartRadius (em 4) + + borderStartStartRadius2 (em 4) (px 2) + +-} +borderStartStartRadius : + BaseValue + (LengthSupported + { pct : Supported + } + ) + -> Style +borderStartStartRadius (Value radius) = + AppendProperty ("border-start-start-radius:" ++ radius) + + +{-| Sets [`border-start-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius) property. + + borderStartStartRadius (em 4) + + borderStartStartRadius2 (em 4) (px 2) + +-} +borderStartStartRadius2 : + Value + (LengthSupported + { pct : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + } + ) + -> Style +borderStartStartRadius2 (Value horizontal) (Value vertical) = + AppendProperty ("border-start-start-radius:" ++ horizontal ++ " " ++ vertical) + + +{-| Sets [`border-start-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) property. + + borderStartEndRadius (em 4) + + borderStartEndRadius2 (em 4) (px 2) + +-} +borderStartEndRadius : + BaseValue + (LengthSupported + { pct : Supported + } + ) + -> Style +borderStartEndRadius (Value radius) = + AppendProperty ("border-start-end-radius:" ++ radius) + + +{-| Sets [`border-start-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) property. + + borderStartEndRadius (em 4) + + borderStartEndRadius2 (em 4) (px 2) + +-} +borderStartEndRadius2 : + Value + (LengthSupported + { pct : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + } + ) + -> Style +borderStartEndRadius2 (Value horizontal) (Value vertical) = + AppendProperty ("border-start-end-radius:" ++ horizontal ++ " " ++ vertical) + + +{-| Sets [`border-end-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) property. + + borderEndStartRadius (em 4) + + borderEndStartRadius2 (em 4) (px 2) + +-} +borderEndStartRadius : + BaseValue + (LengthSupported + { pct : Supported + } + ) + -> Style +borderEndStartRadius (Value radius) = + AppendProperty ("border-end-start-radius:" ++ radius) + + +{-| Sets [`border-end-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) property. + + borderEndStartRadius (em 4) + + borderEndStartRadius2 (em 4) (px 2) + +-} +borderEndStartRadius2 : + Value + (LengthSupported + { pct : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + } + ) + -> Style +borderEndStartRadius2 (Value horizontal) (Value vertical) = + AppendProperty ("border-end-start-radius:" ++ horizontal ++ " " ++ vertical) + + +{-| Sets [`border-end-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) property. + + borderEndEndRadius (em 4) + + borderEndEndRadius2 (em 4) (px 2) + +-} +borderEndEndRadius : + BaseValue + (LengthSupported + { pct : Supported + } + ) + -> Style +borderEndEndRadius (Value radius) = + AppendProperty ("border-end-end-radius:" ++ radius) + + +{-| Sets [`border-end-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) property. + + borderEndEndRadius (em 4) + + borderEndEndRadius2 (em 4) (px 2) + +-} +borderEndEndRadius2 : + Value + (LengthSupported + { pct : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + } + ) + -> Style +borderEndEndRadius2 (Value horizontal) (Value vertical) = + AppendProperty ("border-end-end-radius:" ++ horizontal ++ " " ++ vertical) + + {-| Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property. borderImageOutset (rem 1) From 953e1318593d2f52f099be9250e815fcf3342908 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 07:42:01 +0000 Subject: [PATCH 02/45] Adds basic scroll-margin-block/inline Implements the following: - scroll-margin-block - scroll-margin-inline both as 1 and 2 argument versions. --- src/Css.elm | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..5652846f 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -142,6 +142,7 @@ module Css exposing , scrollBehavior, smooth, scrollSnapAlign, always, scrollSnapStop , scrollSnapType, scrollSnapType2, x, y, mandatory, proximity , scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom + , scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 , scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom , speak, spellOut , userSelect @@ -688,6 +689,7 @@ Multiple CSS properties use these values. @docs scrollBehavior, smooth, scrollSnapAlign, always, scrollSnapStop @docs scrollSnapType, scrollSnapType2, x, y, mandatory, proximity @docs scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom +@docs scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 @docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom @@ -13167,6 +13169,108 @@ scrollMarginLeft (Value value) = AppendProperty ("scroll-margin-left:" ++ value) +{-| Sets [`scroll-margin-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block) property. +The `scrollMarginBlock` property is a shorthand property for setting +`scroll-margin-block-start` and `scroll-margin-block-end` in a single declaration. + +If there is only one argument value, it applies to both sides. If there are two +values, the block start margin is set to the first value and the block end margin is +set to the second. + + scrollMarginBlock (em 4) -- set both block margins to 4em + + scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px + +-} +scrollMarginBlock : + BaseValue + (LengthSupported + { auto : Supported + } + ) + -> Style +scrollMarginBlock (Value value) = + AppendProperty ("scroll-margin-block:" ++ value) + + +{-| Sets [`scroll-margin-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block) property. +The `scrollMarginBlock2` property is a shorthand property for setting +`scroll-margin-block-start` and `scroll-margin-block-end` in a single declaration. + +The block start margin is set to the first value and the block end margin is +set to the second. + + scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px + +-} +scrollMarginBlock2 : + Value + (LengthSupported + { auto : Supported + } + ) + -> + Value + (LengthSupported + { auto : Supported + } + ) + -> Style +scrollMarginBlock2 (Value valueTopBottom) (Value valueRightLeft) = + AppendProperty ("scroll-margin-block:" ++ valueTopBottom ++ " " ++ valueRightLeft) + + +{-| Sets [`scroll-margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) property. +The `scrollMarginInline` property is a shorthand property for setting +`scroll-margin-inline-start` and `scroll-margin-inline-end` in a single declaration. + +If there is only one argument value, it applies to both sides. If there are two +values, the inline start margin is set to the first value and the inline end margin is +set to the second. + + scrollMarginInline (em 4) -- set both inline margins to 4em + + scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px + +-} +scrollMarginInline : + BaseValue + (LengthSupported + { auto : Supported + } + ) + -> Style +scrollMarginInline (Value value) = + AppendProperty ("scroll-margin-inline:" ++ value) + + +{-| Sets [`scroll-margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) property. +The `scrollMarginInline2` property is a shorthand property for setting +`scroll-margin-inline-start` and `scroll-margin-inline-end` in a single declaration. + +The inline start margin is set to the first value and the inline end margin is +set to the second. + + scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px + +-} +scrollMarginInline2 : + Value + (LengthSupported + { auto : Supported + } + ) + -> + Value + (LengthSupported + { auto : Supported + } + ) + -> Style +scrollMarginInline2 (Value valueTopBottom) (Value valueRightLeft) = + AppendProperty ("scroll-margin-inline:" ++ valueTopBottom ++ " " ++ valueRightLeft) + + {-| Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property. The `scrollPadding` property is a shorthand property for setting `scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`, From b0cf944e43dc951a8d0b01a0d3c93be9a54ac521 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 07:59:15 +0000 Subject: [PATCH 03/45] Bug fix for all current scroll margins Scroll-margin properties don't accept percentages, only basic lengths. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin - All scroll-margin properties have had their input types changed from LengthSupported { auto : Supported } to Length. --- src/Css.elm | 100 +++++++++++----------------------------------------- 1 file changed, 20 insertions(+), 80 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 5652846f..c0ead6f3 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -12995,10 +12995,7 @@ bottom, and left, respectively. -} scrollMargin : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMargin (Value value) = AppendProperty ("scroll-margin:" ++ value) @@ -13017,16 +13014,10 @@ margins are set to the second. -} scrollMargin2 : Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMargin2 (Value valueTopBottom) (Value valueRightLeft) = AppendProperty ("scroll-margin:" ++ valueTopBottom ++ " " ++ valueRightLeft) @@ -13045,22 +13036,13 @@ second, and the bottom is set to the third. -} scrollMargin3 : Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMargin3 (Value valueTop) (Value valueRightLeft) (Value valueBottom) = AppendProperty ("scroll-margin:" ++ valueTop ++ " " ++ valueRightLeft ++ " " ++ valueBottom) @@ -13078,28 +13060,16 @@ The four values apply to the top, right, bottom, and left margins. -} scrollMargin4 : Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMargin4 (Value valueTop) (Value valueRight) (Value valueBottom) (Value valueLeft) = AppendProperty ("scroll-margin:" ++ valueTop ++ " " ++ valueRight ++ " " ++ valueBottom ++ " " ++ valueLeft) @@ -13112,10 +13082,7 @@ scrollMargin4 (Value valueTop) (Value valueRight) (Value valueBottom) (Value val -} scrollMarginTop : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginTop (Value value) = AppendProperty ("scroll-margin-top:" ++ value) @@ -13128,10 +13095,7 @@ scrollMarginTop (Value value) = -} scrollMarginRight : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginRight (Value value) = AppendProperty ("scroll-margin-right:" ++ value) @@ -13144,10 +13108,7 @@ scrollMarginRight (Value value) = -} scrollMarginBottom : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginBottom (Value value) = AppendProperty ("scroll-margin-bottom:" ++ value) @@ -13160,10 +13121,7 @@ scrollMarginBottom (Value value) = -} scrollMarginLeft : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginLeft (Value value) = AppendProperty ("scroll-margin-left:" ++ value) @@ -13184,10 +13142,7 @@ set to the second. -} scrollMarginBlock : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginBlock (Value value) = AppendProperty ("scroll-margin-block:" ++ value) @@ -13205,16 +13160,10 @@ set to the second. -} scrollMarginBlock2 : Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginBlock2 (Value valueTopBottom) (Value valueRightLeft) = AppendProperty ("scroll-margin-block:" ++ valueTopBottom ++ " " ++ valueRightLeft) @@ -13235,10 +13184,7 @@ set to the second. -} scrollMarginInline : BaseValue - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginInline (Value value) = AppendProperty ("scroll-margin-inline:" ++ value) @@ -13256,16 +13202,10 @@ set to the second. -} scrollMarginInline2 : Value - (LengthSupported - { auto : Supported - } - ) + Length -> Value - (LengthSupported - { auto : Supported - } - ) + Length -> Style scrollMarginInline2 (Value valueTopBottom) (Value valueRightLeft) = AppendProperty ("scroll-margin-inline:" ++ valueTopBottom ++ " " ++ valueRightLeft) From 736fc6e9de48fd933c37f23fa0d3c59635462e1b Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 08:08:37 +0000 Subject: [PATCH 04/45] Adds start/end scroll margins Implements the following: - scroll-margin-block-start - scroll-margin-block-end - scroll-margin-inline-start - scroll-margin-inline-end --- src/Css.elm | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/src/Css.elm b/src/Css.elm index c0ead6f3..4173ab75 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -143,6 +143,7 @@ module Css exposing , scrollSnapType, scrollSnapType2, x, y, mandatory, proximity , scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom , scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 + , scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd , scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom , speak, spellOut , userSelect @@ -690,6 +691,7 @@ Multiple CSS properties use these values. @docs scrollSnapType, scrollSnapType2, x, y, mandatory, proximity @docs scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom @docs scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 +@docs scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd @docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom @@ -13211,6 +13213,58 @@ scrollMarginInline2 (Value valueTopBottom) (Value valueRightLeft) = AppendProperty ("scroll-margin-inline:" ++ valueTopBottom ++ " " ++ valueRightLeft) +{-| Sets [`scroll-margin-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start) property. + + scrollMarginBlockStart (px 4) + +-} +scrollMarginBlockStart : + BaseValue + Length + -> Style +scrollMarginBlockStart (Value value) = + AppendProperty ("scroll-margin-block-start:" ++ value) + + +{-| Sets [`scroll-margin-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end) property. + + scrollMarginBlockEnd (px 4) + +-} +scrollMarginBlockEnd : + BaseValue + Length + -> Style +scrollMarginBlockEnd (Value value) = + AppendProperty ("scroll-margin-block-end:" ++ value) + + +{-| Sets [`scroll-margin-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start) property. + + scrollMarginInlineStart (px 4) + +-} +scrollMarginInlineStart : + BaseValue + Length + -> Style +scrollMarginInlineStart (Value value) = + AppendProperty ("scroll-margin-inline-start:" ++ value) + + +{-| Sets [`scroll-margin-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end) property. + + scrollMarginInlineEnd (px 4) + +-} +scrollMarginInlineEnd : + BaseValue + Length + -> Style +scrollMarginInlineEnd (Value value) = + AppendProperty ("scroll-margin-inline-end:" ++ value) + + {-| Sets [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding/) property. The `scrollPadding` property is a shorthand property for setting `scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom`, From 6afbf856060cd41f3f76a571f943f38a9051618a Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 13:51:10 +0000 Subject: [PATCH 05/45] Adds inset property - Adds an implementation of the inset property in 1, 2, 3, and 4 argument forms. - Renames the pre-existing 'inset' value to 'inset_', based on current package conventions. --- src/Css.elm | 182 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 166 insertions(+), 16 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..2088053e 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -33,7 +33,7 @@ module Css exposing , borderWidth, borderWidth2, borderWidth3, borderWidth4, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth , thin, thick , borderStyle, borderStyle2, borderStyle3, borderStyle4, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle - , dotted, dashed, solid, double, groove, ridge, inset, outset + , dotted, dashed, solid, double, groove, ridge, inset_, outset , borderColor, borderColor2, borderColor3, borderColor4, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor , borderRadius, borderRadius2, borderRadius3, borderRadius4, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderBottomLeftRadius, borderBottomLeftRadius2 , borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4 @@ -41,8 +41,9 @@ module Css exposing , outline, outline3, outlineWidth, outlineColor, invert, outlineStyle, outlineOffset , display, display2, displayListItem2, displayListItem3 , block, flex_, flow, flowRoot, grid, contents, listItem, inline, inlineBlock, inlineFlex, inlineTable, inlineGrid, ruby, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup - , position, top, right, bottom, left, zIndex + , position, zIndex , absolute, fixed, relative, static, sticky + , inset, inset2, inset3, inset4, top, right, bottom, left , padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft , margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft , boxSizing @@ -298,7 +299,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs borderStyle, borderStyle2, borderStyle3, borderStyle4, borderTopStyle, borderRightStyle, borderBottomStyle, borderLeftStyle -@docs dotted, dashed, solid, double, groove, ridge, inset, outset +@docs dotted, dashed, solid, double, groove, ridge, inset_, outset ## Border Color @@ -332,11 +333,18 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` ## Positions -@docs position, top, right, bottom, left, zIndex +@docs position, zIndex @docs absolute, fixed, relative, static, sticky +## Inset + +@docs inset, inset2, inset3, inset4, top, right, bottom, left + +-- @docs insetBlock, insetBlock2, insetInline, insetInline2, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd + + ## Paddings @docs padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft @@ -865,7 +873,7 @@ type alias LineStyleSupported supported = , double : Supported , groove : Supported , ridge : Supported - , inset : Supported + , inset_ : Supported , outset : Supported } @@ -1507,6 +1515,148 @@ position (Value val) = AppendProperty ("position:" ++ val) +{-| Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property. + +`inset` sets the `top`, `bottom`, `left` and `right` properties. + + inset (px 10) -- top, bottom, left and right are all 10px. + + inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5% + + inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px + + inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px + +-} +inset : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +inset (Value val) = + AppendProperty ("inset:" ++ val) + + +{-| Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property. + +`inset` sets the `top`, `bottom`, `left` and `right` properties. + + inset (px 10) -- top, bottom, left and right are all 10px. + + inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5% + + inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px + + inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px + +-} +inset2 : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +inset2 (Value valTopBottom) (Value valRightLeft) = + AppendProperty ("inset:" ++ valTopBottom ++ " " ++ valRightLeft) + + +{-| Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property. + +`inset` sets the `top`, `bottom`, `left` and `right` properties. + + inset (px 10) -- top, bottom, left and right are all 10px. + + inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5% + + inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px + + inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px + +-} +inset3 : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +inset3 (Value valTop) (Value valRightLeft) (Value valBottom) = + AppendProperty ("inset:" ++ valTop ++ " " ++ valRightLeft ++ " " ++ valBottom) + + +{-| Sets the [`inset`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) property. + +`inset` sets the `top`, `bottom`, `left` and `right` properties. + + inset (px 10) -- top, bottom, left and right are all 10px. + + inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5% + + inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px + + inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px + +-} +inset4 : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +inset4 (Value valTop) (Value valRight) (Value valBottom) (Value valLeft) = + AppendProperty ("inset:" ++ valTop ++ " " ++ valRight ++ " " ++ valBottom ++ " " ++ valLeft) + + {-| Sets the [`top` property](https://css-tricks.com/almanac/properties/t/top/). top (px 10) @@ -2485,7 +2635,7 @@ type alias BoxShadowConfig = ) , color : Maybe (Value Color) - , inset : Bool + , inset_ : Bool } @@ -2503,7 +2653,7 @@ defaultBoxShadow = , blurRadius = Nothing , spreadRadius = Nothing , color = Nothing - , inset = False + , inset_ = False } @@ -2587,7 +2737,7 @@ boxShadowConfigToString config = "" insetStr = - if config.inset then + if config.inset_ then "inset " else @@ -7837,19 +7987,19 @@ ridge = {-| The `inset` value used by properties such as [`borderStyle`](#borderStyle), [`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle). - borderStyle inset + borderStyle inset_ - columnRuleStyle inset + columnRuleStyle inset_ - textDecorationStyle inset + textDecorationStyle inset_ Adds a split tone to the line that makes it appear slightly depressed. Contrast with [`outset`](#outset) -} -inset : Value { provides | inset : Supported } -inset = +inset_ : Value { provides | inset_ : Supported } +inset_ = Value "inset" @@ -7866,7 +8016,7 @@ and [`strokeAlign`](#strokeAlign). textDecorationStyle outset -Similar to [`inset`](#inset), but reverses the colors in a way that makes it appear slightly raised. +Similar to [`inset_`](#inset_), but reverses the colors in a way that makes it appear slightly raised. -} outset : Value { provides | outset : Supported } @@ -10042,14 +10192,14 @@ strokeWidth (Value val) = {-| Sets [`stroke-align`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align) strokeAlign center - strokeAlign inset + strokeAlign inset_ strokeAlign outset -} strokeAlign : BaseValue { center : Supported - , inset : Supported + , inset_ : Supported , outset : Supported } -> Style From e0f2931de67328c6d8e3d4592f4bc563dfe9cd71 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 17:57:54 +0000 Subject: [PATCH 06/45] Adds one-liner inset-block/inline Implements the following: - inset-block - inset-inline as both 1 and 2-argument functions. --- src/Css.elm | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 100 insertions(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index 2088053e..05951293 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -44,6 +44,7 @@ module Css exposing , position, zIndex , absolute, fixed, relative, static, sticky , inset, inset2, inset3, inset4, top, right, bottom, left + , insetBlock, insetBlock2, insetInline, insetInline2 , padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft , margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft , boxSizing @@ -342,7 +343,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs inset, inset2, inset3, inset4, top, right, bottom, left --- @docs insetBlock, insetBlock2, insetInline, insetInline2, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd +@docs insetBlock, insetBlock2, insetInline, insetInline2 ## Paddings @@ -1761,6 +1762,104 @@ right (Value val) = AppendProperty ("right:" ++ val) +{-| Sets the [`inset-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) property. + +`inset-block` sets the `inset-block-start` and `inset-block-end` properties. + + insetBlock (px 10) -- block start and block end are both 10px. + + insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5% + +-} +insetBlock : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetBlock (Value val) = + AppendProperty ("inset-block:" ++ val) + + +{-| Sets the [`inset-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) property. + +`inset-block` sets the `inset-block-start` and `inset-block-end` properties. + + insetBlock (px 10) -- block start and block end are both 10px. + + insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5% + +-} +insetBlock2 : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetBlock2 (Value valStart) (Value valEnd) = + AppendProperty ("inset-block:" ++ valStart ++ " " ++ valEnd) + + +{-| Sets the [`inset-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) property. + +`inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties. + + insetInline (px 10) -- inline start and inline end are both 10px. + + insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5% + +-} +insetInline : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetInline (Value val) = + AppendProperty ("inset-inline:" ++ val) + + +{-| Sets the [`inset-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) property. + +`inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties. + + insetInline (px 10) -- inline start and inline end are both 10px. + + insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5% + +-} +insetInline2 : + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetInline2 (Value valStart) (Value valEnd) = + AppendProperty ("inset-inline:" ++ valStart ++ " " ++ valEnd) + + {-| An [`absolute` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative). position absolute From 54788ebd1ff2bada74974a8c7f4bcf5ce1a074f8 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 18:10:41 +0000 Subject: [PATCH 07/45] Add inset start/end properties Implements the following: - inset-block-start - inset-block-end - inset-inline-start - inset-inline-end Makes the docs for top, bottom, left and right properties flow a bit better with the link use. Changed the links for inset-block and inset-inline functions from MDN to CSS Tricks Almanac. --- src/Css.elm | 112 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 102 insertions(+), 10 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 05951293..903e566d 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -44,7 +44,7 @@ module Css exposing , position, zIndex , absolute, fixed, relative, static, sticky , inset, inset2, inset3, inset4, top, right, bottom, left - , insetBlock, insetBlock2, insetInline, insetInline2 + , insetBlock, insetBlock2, insetInline, insetInline2, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd , padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft , margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft , boxSizing @@ -343,7 +343,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs inset, inset2, inset3, inset4, top, right, bottom, left -@docs insetBlock, insetBlock2, insetInline, insetInline2 +@docs insetBlock, insetBlock2, insetInline, insetInline2, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd ## Paddings @@ -1658,7 +1658,7 @@ inset4 (Value valTop) (Value valRight) (Value valBottom) (Value valLeft) = AppendProperty ("inset:" ++ valTop ++ " " ++ valRight ++ " " ++ valBottom ++ " " ++ valLeft) -{-| Sets the [`top` property](https://css-tricks.com/almanac/properties/t/top/). +{-| Sets the [`top`](https://css-tricks.com/almanac/properties/t/top/) property. top (px 10) @@ -1684,7 +1684,7 @@ top (Value val) = AppendProperty ("top:" ++ val) -{-| Sets the [`bottom` property](https://css-tricks.com/almanac/properties/b/bottom/). +{-| Sets the [`bottom`](https://css-tricks.com/almanac/properties/b/bottom/) property. bottom (px 10) @@ -1710,7 +1710,7 @@ bottom (Value val) = AppendProperty ("bottom:" ++ val) -{-| Sets the [`left` property](https://css-tricks.com/almanac/properties/l/left/). +{-| Sets the [`left`](https://css-tricks.com/almanac/properties/l/left/) property. left (px 10) @@ -1736,7 +1736,7 @@ left (Value val) = AppendProperty ("left:" ++ val) -{-| Sets the [`right` property](https://css-tricks.com/almanac/properties/r/right). +{-| Sets the [`right`](https://css-tricks.com/almanac/properties/r/right) property. right (px 10) @@ -1762,7 +1762,7 @@ right (Value val) = AppendProperty ("right:" ++ val) -{-| Sets the [`inset-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) property. +{-| Sets the [`inset-block`](https://css-tricks.com/almanac/properties/i/inset-block/) property. `inset-block` sets the `inset-block-start` and `inset-block-end` properties. @@ -1783,7 +1783,7 @@ insetBlock (Value val) = AppendProperty ("inset-block:" ++ val) -{-| Sets the [`inset-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) property. +{-| Sets the [`inset-block`](https://css-tricks.com/almanac/properties/i/inset-block/) property. `inset-block` sets the `inset-block-start` and `inset-block-end` properties. @@ -1811,7 +1811,7 @@ insetBlock2 (Value valStart) (Value valEnd) = AppendProperty ("inset-block:" ++ valStart ++ " " ++ valEnd) -{-| Sets the [`inset-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) property. +{-| Sets the [`inset-inline`](https://css-tricks.com/almanac/properties/i/inset-inline) property. `inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties. @@ -1832,7 +1832,7 @@ insetInline (Value val) = AppendProperty ("inset-inline:" ++ val) -{-| Sets the [`inset-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) property. +{-| Sets the [`inset-inline`](https://css-tricks.com/almanac/properties/i/inset-inline) property. `inset-inline` sets the `inset-inline-start` and `inset-inline-end` properties. @@ -1860,6 +1860,98 @@ insetInline2 (Value valStart) (Value valEnd) = AppendProperty ("inset-inline:" ++ valStart ++ " " ++ valEnd) +{-| Sets the [`inset-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) property. + + insetBlockStart (px 10) + + insetBlockStart (pct 50) + + insetBlockStart auto + + insetBlockStart zero + +-} +insetBlockStart : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetBlockStart (Value val) = + AppendProperty ("inset-block-start:" ++ val) + + +{-| Sets the [`inset-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) property. + + insetBlockEnd (px 10) + + insetBlockEnd (pct 50) + + insetBlockEnd auto + + insetBlockEnd zero + +-} +insetBlockEnd : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetBlockEnd (Value val) = + AppendProperty ("inset-block-end:" ++ val) + + +{-| Sets the [`inset-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) property. + + insetInlineStart (px 10) + + insetInlineStart (pct 50) + + insetInlineStart auto + + insetInlineStart zero + +-} +insetInlineStart : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetInlineStart (Value val) = + AppendProperty ("inset-inline-start:" ++ val) + + +{-| Sets the [`inset-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) property. + + insetInlineEnd (px 10) + + insetInlineEnd (pct 50) + + insetInlineEnd auto + + insetInlineEnd zero + +-} +insetInlineEnd : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + } + ) + -> Style +insetInlineEnd (Value val) = + AppendProperty ("inset-inline-end:" ++ val) + + {-| An [`absolute` `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative). position absolute From 5fdb0820dd7bdc37121e68e33763f8fa6473db6b Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 18:27:49 +0000 Subject: [PATCH 08/45] Adds scroll-padding-block/inline one-liners Implements the following: - scroll-padding-block - scroll-padding-inline Both as 1 and 2-argument functions. - Fixed variable naming in scrollMarginBlock2 and scrollMarginInline2. - Fixed a typo I noticed in scrollPadding's documentation. --- src/Css.elm | 120 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 115 insertions(+), 5 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 4173ab75..4442b988 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -145,6 +145,7 @@ module Css exposing , scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 , scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd , scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom + , scrollPaddingBlock, scrollPaddingBlock2, scrollPaddingInline, scrollPaddingInline2 , speak, spellOut , userSelect , unicodeBidi, embed, bidiOverride, isolateOverride, plaintext @@ -693,6 +694,7 @@ Multiple CSS properties use these values. @docs scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 @docs scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd @docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom +@docs scrollPaddingBlock, scrollPaddingBlock2, scrollPaddingInline, scrollPaddingInline2 # Accessibility @@ -13167,8 +13169,8 @@ scrollMarginBlock2 : Value Length -> Style -scrollMarginBlock2 (Value valueTopBottom) (Value valueRightLeft) = - AppendProperty ("scroll-margin-block:" ++ valueTopBottom ++ " " ++ valueRightLeft) +scrollMarginBlock2 (Value valueStart) (Value valueEnd) = + AppendProperty ("scroll-margin-block:" ++ valueStart ++ " " ++ valueEnd) {-| Sets [`scroll-margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline) property. @@ -13209,8 +13211,8 @@ scrollMarginInline2 : Value Length -> Style -scrollMarginInline2 (Value valueTopBottom) (Value valueRightLeft) = - AppendProperty ("scroll-margin-inline:" ++ valueTopBottom ++ " " ++ valueRightLeft) +scrollMarginInline2 (Value valueStart) (Value valueEnd) = + AppendProperty ("scroll-margin-inline:" ++ valueStart ++ " " ++ valueEnd) {-| Sets [`scroll-margin-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start) property. @@ -13277,7 +13279,7 @@ to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. - scrollPadding (em 4) -- set all margins to 4em + scrollPadding (em 4) -- set all paddings to 4em scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px @@ -13476,6 +13478,114 @@ scrollPaddingLeft (Value value) = AppendProperty ("scroll-padding-left:" ++ value) +{-| Sets [`scroll-padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block) property. +The `scroll-padding-block` property is a shorthand property for setting +`scroll-padding-block-start` and `scroll-padding-block-end` in a single declaration. + +If there is only one argument value, it applies to both sides. If there are two +values, the block start padding is set to the first value and the block end padding +is set to the second. + + scrollPaddingBlock (em 4) -- set both block paddings to 4em + + scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px + +-} +scrollPaddingBlock : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingBlock (Value value) = + AppendProperty ("scroll-padding-block:" ++ value) + + +{-| Sets [`scroll-padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block) property. +The `scroll-padding-block` property is a shorthand property for setting +`scroll-padding-block-start` and `scroll-padding-block-end` in a single declaration. + +The block start padding is set to the first value and the block end padding +is set to the second. + + scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px + +-} +scrollPaddingBlock2 : + Value + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> + Value + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingBlock2 (Value valueStart) (Value valueEnd) = + AppendProperty ("scroll-padding-block:" ++ valueStart ++ " " ++ valueEnd) + + +{-| Sets [`scroll-padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline) property. +The `scroll-padding-inline` property is a shorthand property for setting +`scroll-padding-inline-start` and `scroll-padding-inline-end` in a single declaration. + +If there is only one argument value, it applies to both sides. If there are two +values, the inline start padding is set to the first value and the inline end padding +is set to the second. + + scrollPaddingInline (em 4) -- set both inline paddings to 4em + + scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px + +-} +scrollPaddingInline : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingInline (Value value) = + AppendProperty ("scroll-padding-inline:" ++ value) + + +{-| Sets [`scroll-padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline) property. +The `scroll-padding-inline` property is a shorthand property for setting +`scroll-padding-inline-start` and `scroll-padding-inline-end` in a single declaration. + +The inline start padding is set to the first value and the inline end padding +is set to the second. + + scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px + +-} +scrollPaddingInline2 : + Value + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> + Value + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingInline2 (Value valueStart) (Value valueEnd) = + AppendProperty ("scroll-padding-inline:" ++ valueStart ++ " " ++ valueEnd) + + {-| Sets [`scroll-snap-align`](https://css-tricks.com/almanac/properties/s/scroll-snap-align/) scrollSnapAlign none From d753af9345db3c0d3ad140fee87363c1b863af97 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 18:34:11 +0000 Subject: [PATCH 09/45] Adds start/end scroll padding Implements the following properties: - scroll-padding-block-start - scroll-padding-block-end - scroll-padding-inline-start - scroll-padding-inline-end --- src/Css.elm | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/Css.elm b/src/Css.elm index 4442b988..68ac9a89 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -146,6 +146,7 @@ module Css exposing , scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd , scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom , scrollPaddingBlock, scrollPaddingBlock2, scrollPaddingInline, scrollPaddingInline2 + , scrollPaddingBlockStart, scrollPaddingBlockEnd, scrollPaddingInlineStart, scrollPaddingInlineEnd , speak, spellOut , userSelect , unicodeBidi, embed, bidiOverride, isolateOverride, plaintext @@ -695,6 +696,7 @@ Multiple CSS properties use these values. @docs scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd @docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom @docs scrollPaddingBlock, scrollPaddingBlock2, scrollPaddingInline, scrollPaddingInline2 +@docs scrollPaddingBlockStart, scrollPaddingBlockEnd, scrollPaddingInlineStart, scrollPaddingInlineEnd # Accessibility @@ -13586,6 +13588,74 @@ scrollPaddingInline2 (Value valueStart) (Value valueEnd) = AppendProperty ("scroll-padding-inline:" ++ valueStart ++ " " ++ valueEnd) +{-| Sets [`scroll-padding-block-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start) property. + + scrollPaddingBlockStart (px 4) + +-} +scrollPaddingBlockStart : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingBlockStart (Value value) = + AppendProperty ("scroll-padding-block-start:" ++ value) + + +{-| Sets [`scroll-padding-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end) property. + + scrollPaddingBlockEnd (px 4) + +-} +scrollPaddingBlockEnd : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingBlockEnd (Value value) = + AppendProperty ("scroll-padding-block-end:" ++ value) + + +{-| Sets [`scroll-padding-inline-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start) property. + + scrollPaddingInlineStart (px 4) + +-} +scrollPaddingInlineStart : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingInlineStart (Value value) = + AppendProperty ("scroll-padding-inline-start:" ++ value) + + +{-| Sets [`scroll-padding-inline-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end) property. + + scrollPaddingInlineEnd (px 4) + +-} +scrollPaddingInlineEnd : + BaseValue + (LengthSupported + { auto : Supported + , pct : Supported + } + ) + -> Style +scrollPaddingInlineEnd (Value value) = + AppendProperty ("scroll-padding-inline-end:" ++ value) + + {-| Sets [`scroll-snap-align`](https://css-tricks.com/almanac/properties/s/scroll-snap-align/) scrollSnapAlign none From 018cf0aa4d61eae0f72b05ee5dbb93cfbbd57ae2 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 17 Nov 2021 19:00:24 +0000 Subject: [PATCH 10/45] BaseValue fixes Some one-argument functions I wrote didn't use BaseValue when they should have.. This has been fixed. --- src/Css.elm | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 1992a13d..246c4ff6 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -1541,7 +1541,7 @@ position (Value val) = -} inset : - Value + BaseValue (LengthSupported { pct : Supported , auto : Supported @@ -1783,7 +1783,7 @@ right (Value val) = -} insetBlock : - Value + BaseValue (LengthSupported { pct : Supported , auto : Supported @@ -1832,7 +1832,7 @@ insetBlock2 (Value valStart) (Value valEnd) = -} insetInline : - Value + BaseValue (LengthSupported { pct : Supported , auto : Supported From 3f2e99a125be49dc2f368db869a22bb57b765982 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Thu, 18 Nov 2021 03:33:40 +0000 Subject: [PATCH 11/45] Adds logical sizing, size property fixes Implements the following: - block-size - inline-size - max-block-size - max-inline-size - min-block-size - min-inline-size Fixes: - Both the width and height properties can accept, pct, auto, maxContent, minContent and fitContent, so I've changed their type annotations to add them. - Re-arranged existing sizing property and variable functions so they flow better (group functions first and values later). - Made the documentation for minContent, maxContent and fitContent a bit more concise and inclusive to Logical size properties. --- src/Css.elm | 242 ++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 189 insertions(+), 53 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..60042cc8 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -13,6 +13,7 @@ module Css exposing , pseudoClass, active, disabled , pseudoElement, before, after , width, minWidth, maxWidth, height, minHeight, maxHeight + , blockSize, minBlockSize, maxBlockSize, inlineSize, minInlineSize, maxInlineSize , minContent, maxContent, fitContent , backgroundAttachment, backgroundAttachments, scroll, local , backgroundBlendMode, backgroundBlendModes, multiply, screen, overlay, darken, lighten, colorDodge, colorBurn, hardLight, softLight, difference, exclusion, hue, saturation, color_, luminosity @@ -232,6 +233,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` ## Sizing @docs width, minWidth, maxWidth, height, minHeight, maxHeight +@docs blockSize, minBlockSize, maxBlockSize, inlineSize, minInlineSize, maxInlineSize @docs minContent, maxContent, fitContent @@ -11876,7 +11878,7 @@ letterSpacing (Value val) = AppendProperty ("letter-spacing:" ++ val) -{-| Sets [`width`](https://css-tricks.com/almanac/properties/w/width/). +{-| The [`width`](https://css-tricks.com/almanac/properties/w/width/) property. width (px 150) @@ -11887,12 +11889,22 @@ letterSpacing (Value val) = width minContent -} -width : BaseValue Width -> Style +width : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style width (Value size) = AppendProperty ("width:" ++ size) -{-| Sets [`minWidth`](https://css-tricks.com/almanac/properties/m/min-width/). +{-| The [`min-width`](https://css-tricks.com/almanac/properties/m/min-width/) property. minWidth (px 150) @@ -11916,7 +11928,7 @@ minWidth (Value size) = AppendProperty ("min-width:" ++ size) -{-| Sets [`maxWidth`](https://css-tricks.com/almanac/properties/m/max-width/). +{-| The [`max-width`](https://css-tricks.com/almanac/properties/m/max-width/) property. maxWidth (px 150) @@ -11940,60 +11952,22 @@ maxWidth (Value size) = AppendProperty ("max-width:" ++ size) -{-| The `min-content` value used for properties such as [`width`](#width), -[`minWidth`](#minWidth), -[`maxWidth`](#maxWidth), -[`height`](#height), -[`minHeight`](#minHeight), -[`maxHeight`](#maxHeight) -and [`flexBasis`](#flexBasis) - - width minContent - --} -minContent : Value { provides | minContent : Supported } -minContent = - Value "min-content" - - -{-| The `max-content` value used for properties such as [`width`](#width), -[`minWidth`](#minWidth), -[`maxWidth`](#maxWidth), -[`height`](#height), -[`minHeight`](#minHeight), -[`maxHeight`](#maxHeight) -and [`flexBasis`](#flexBasis) - - width maxContent - --} -maxContent : Value { provides | maxContent : Supported } -maxContent = - Value "max-content" - - -{-| The `fit-content` value used for properties such as [`width`](#width), -[`minWidth`](#minWidth), -[`maxWidth`](#maxWidth), -[`height`](#height), -[`minHeight`](#minHeight), -[`maxHeight`](#maxHeight) -and [`flexBasis`](#flexBasis) - - width fitContent - --} -fitContent : Value { provides | fitContent : Supported } -fitContent = - Value "fit-content" - - {-| The [`height`](https://css-tricks.com/almanac/properties/h/height/) property. height (px 34) -} -height : BaseValue Width -> Style +height : + BaseValue + (LengthSupported + { pct : Supported + , auto : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style height (Value val) = AppendProperty ("height:" ++ val) @@ -12038,6 +12012,168 @@ maxHeight (Value val) = AppendProperty ("max-height:" ++ val) +{-| The [`block-size`](https://css-tricks.com/almanac/properties/b/block-size/) property. + + blockSize (px 20) + +-} +blockSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +blockSize (Value val) = + AppendProperty ("block-size:" ++ val) + + +{-| The [`min-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size) property. + + minBlockSize (px 20) + +-} +minBlockSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +minBlockSize (Value val) = + AppendProperty ("min-block-size:" ++ val) + + +{-| The [`max-block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size) property. + + maxBlockSize (px 20) + +-} +maxBlockSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +maxBlockSize (Value val) = + AppendProperty ("max-block-size:" ++ val) + + +{-| The [`inline-size`](https://css-tricks.com/almanac/properties/i/inline-size/) property. + + inlineSize (px 20) + +-} +inlineSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +inlineSize (Value val) = + AppendProperty ("inline-size:" ++ val) + + +{-| The [`min-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size) property. + + minInlineSize (px 20) + +-} +minInlineSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +minInlineSize (Value val) = + AppendProperty ("min-inline-size:" ++ val) + + +{-| The [`max-inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size) property. + + maxInlineSize (px 20) + +-} +maxInlineSize : + BaseValue + (LengthSupported + { pct : Supported + , none : Supported + , maxContent : Supported + , minContent : Supported + , fitContent : Supported + } + ) + -> Style +maxInlineSize (Value val) = + AppendProperty ("max-inline-size:" ++ val) + + +{-| The `min-content` value used for properties such as: + +- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) +- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) +- [`flexBasis`](#flexBasis) + + width minContent + +-} +minContent : Value { provides | minContent : Supported } +minContent = + Value "min-content" + + +{-| The `max-content` value used for properties such as: + +- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) +- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) +- [`flexBasis`](#flexBasis) + + width maxContent + +-} +maxContent : Value { provides | maxContent : Supported } +maxContent = + Value "max-content" + + +{-| The `fit-content` value used for properties such as: + +- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) +- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) +- [`flexBasis`](#flexBasis) + + width fitContent + +-} +fitContent : Value { provides | fitContent : Supported } +fitContent = + Value "fit-content" + + {-| Sets [`backface-visibility`](https://css-tricks.com/almanac/properties/b/backface-visibility/) backfaceVisibility visible From 98dcdf926ae43f7bc7dae96901bad14c594a5c6c Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 00:34:29 +0000 Subject: [PATCH 12/45] Add gap and row-gap Implements the following: - gap - row-gap This commit also groups column-gap with the aforementioned properties since they're related. --- src/Css.elm | 126 +++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 106 insertions(+), 20 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..c9c730eb 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -45,6 +45,7 @@ module Css exposing , absolute, fixed, relative, static, sticky , padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft , margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft + , gap, gap2, rowGap, columnGap , boxSizing , alignContent, alignContent2, alignItems, alignItems2, alignSelf, alignSelf2, justifyContent, justifyContent2, justifyItems, justifyItems2, justifySelf, justifySelf2 , flexDirection, row, rowReverse, column, columnReverse @@ -124,7 +125,7 @@ module Css exposing , strokeOrigin, fillBox, strokeBox , strokeLinejoin, strokeLinejoin2, crop, arcs, miter, bevel , strokeDashJustify, compress, dashes, gaps - , columns, columns2, columnWidth, columnCount, columnGap, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 + , columns, columns2, columnWidth, columnCount, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 , columnFill, balance, balanceAll , columnSpan, all_ , transform, transforms, transformOrigin, transformOrigin2 @@ -347,6 +348,11 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft +## Gap + +@docs gap, gap2, rowGap, columnGap + + ## Box Sizing @docs boxSizing @@ -626,7 +632,7 @@ Multiple CSS properties use these values. # Columns -@docs columns, columns2, columnWidth, columnCount, columnGap, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 +@docs columns, columns2, columnWidth, columnCount, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 @docs columnFill, balance, balanceAll @docs columnSpan, all_ @@ -9864,24 +9870,6 @@ all_ = Value "all" -{-| Sets [`column-gap`](https://css-tricks.com/almanac/properties/c/column-gap/) - - columnGap normal - - columnGap (px 20) - --} -columnGap : - BaseValue - (LengthSupported - { normal : Supported - } - ) - -> Style -columnGap (Value widthVal) = - AppendProperty ("column-gap:" ++ widthVal) - - {-| Sets [`column-rule-width`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-width) columnRuleWidth thin @@ -9920,6 +9908,104 @@ columnRuleColor (Value colorVal) = AppendProperty ("column-rule-color:" ++ colorVal) +{-| Sets the [`gap`](https://css-tricks.com/almanac/properties/g/gap/) property. + +The `gap` property is a shorthand for setting `row-gap` and `column-gap` +in a single declaration. + +`gap` specifies the size of spacing between items within grid, flex +and multi-column layouts. + + gap initial + + gap (px 20) -- 20px gap between all items. + + gap2 (px 20) (px 40) -- 20px row gap, 40px column gap. + +-} +gap : + BaseValue + (LengthSupported + { pct : Supported + } + ) + -> Style +gap (Value val) = + AppendProperty ("gap:" ++ val) + + +{-| Sets the [`gap`](https://css-tricks.com/almanac/properties/g/gap/) property. + +The `gap` property is a shorthand for setting `row-gap` and `column-gap` +in a single declaration. + +`gap` specifies the size of spacing between items within grid, flex +and multi-column layouts. + + gap2 (px 20) (px 40) -- 20px row gap, 40px column gap. + +-} +gap2 : + Value + (LengthSupported + { pct : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + } + ) + -> Style +gap2 (Value rowVal) (Value columnVal) = + AppendProperty ("gap:" ++ rowVal ++ " " ++ columnVal) + + +{-| Sets the [`row-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) property. + +`row-gap` specifies the size of spacing between rows of items within grid, flex +and multi-column layouts. + + rowGap normal + + rowGap (px 20) + +-} +rowGap : + BaseValue + (LengthSupported + { normal : Supported + , pct : Supported + } + ) + -> Style +rowGap (Value widthVal) = + AppendProperty ("row-gap:" ++ widthVal) + + +{-| Sets the [`column-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) property. + +`column-gap` specifies the size of spacing between column of items within grid, flex +and multi-column layouts. + + columnGap normal + + columnGap (px 20) + +-} +columnGap : + BaseValue + (LengthSupported + { normal : Supported + , pct : Supported + } + ) + -> Style +columnGap (Value widthVal) = + AppendProperty ("column-gap:" ++ widthVal) + + -- STROKE -- From 7ca126d79463ae0715fd835a4e3f55af758935f0 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 01:01:10 +0000 Subject: [PATCH 13/45] Add Logical overflow properties Implements the following: - overflow-block - overflow-inline --- src/Css.elm | 50 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index c9c730eb..20f85e8a 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -84,7 +84,7 @@ module Css exposing , auto, none , hidden, visible , contentBox, borderBox - , overflow, overflowX, overflowY + , overflow, overflowX, overflowY, overflowBlock, overflowInline , overflowAnchor , overflowWrap , breakWord, anywhere @@ -501,7 +501,7 @@ Multiple CSS properties use these values. ## Overflow -@docs overflow, overflowX, overflowY +@docs overflow, overflowX, overflowY, overflowBlock, overflowInline @docs overflowAnchor @docs overflowWrap @@ -1307,6 +1307,52 @@ overflowY (Value val) = AppendProperty ("overflow-y:" ++ val) +{-| Sets [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block). + + overflowBlock visible + + overflowBlock hidden + + overflowBlock scroll + + overflowBlock auto + +-} +overflowBlock : + BaseValue + { visible : Supported + , hidden : Supported + , scroll : Supported + , auto : Supported + } + -> Style +overflowBlock (Value val) = + AppendProperty ("overflow-block:" ++ val) + + +{-| Sets [`overflow-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline). + + overflowInline visible + + overflowInline hidden + + overflowInline scroll + + overflowInline auto + +-} +overflowInline : + BaseValue + { visible : Supported + , hidden : Supported + , scroll : Supported + , auto : Supported + } + -> Style +overflowInline (Value val) = + AppendProperty ("overflow-inline:" ++ val) + + {-| Sets [`overflow-wrap`](https://css-tricks.com/almanac/properties/o/overflow-wrap/) overflowWrap breakWord From 6362c2f6ae5a368fa64ef32ddbdc4a9d6ebb98a3 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 01:16:33 +0000 Subject: [PATCH 14/45] Add overscroll-behavior properties Implements the following: - overscroll-behavior - overscroll-behavior-x - overscroll-behavior-y - overscroll-behavior-block - overscroll-behavior-inline --- src/Css.elm | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/src/Css.elm b/src/Css.elm index 20f85e8a..fed83816 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -144,6 +144,7 @@ module Css exposing , scrollSnapType, scrollSnapType2, x, y, mandatory, proximity , scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom , scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom + , overscrollBehavior, overscrollBehavior2, overscrollBehaviorX, overscrollBehaviorY, overscrollBehaviorBlock, overscrollBehaviorInline , speak, spellOut , userSelect , unicodeBidi, embed, bidiOverride, isolateOverride, plaintext @@ -695,6 +696,7 @@ Multiple CSS properties use these values. @docs scrollSnapType, scrollSnapType2, x, y, mandatory, proximity @docs scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom @docs scrollPadding, scrollPadding2, scrollPadding3, scrollPadding4, scrollPaddingTop, scrollPaddingLeft, scrollPaddingRight, scrollPaddingBottom +@docs overscrollBehavior, overscrollBehavior2, overscrollBehaviorX, overscrollBehaviorY, overscrollBehaviorBlock, overscrollBehaviorInline # Accessibility @@ -13510,6 +13512,122 @@ scrollPaddingLeft (Value value) = AppendProperty ("scroll-padding-left:" ++ value) +{-| Sets the [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property. + +This property is a shorthand for setting both `overscroll-behavior-x` and `overscroll-behavior-y`. + + overscrollBehavior auto -- sets both X and Y to auto + + overscrollBehavior2 auto contain -- X = auto, Y = contain. + +-} +overscrollBehavior : + BaseValue + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehavior (Value value) = + AppendProperty ("overscroll-behavior:" ++ value) + + +{-| Sets the [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property. + +This property is a shorthand for setting both `overscroll-behavior-x` and `overscroll-behavior-y`. + + overscrollBehavior2 auto contain -- X = auto, Y = contain. + +-} +overscrollBehavior2 : + Value + { auto : Supported + , contain : Supported + , none : Supported + } + -> + Value + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehavior2 (Value xValue) (Value yValue) = + AppendProperty ("overscroll-behavior:" ++ xValue ++ " " ++ yValue) + + +{-| Sets the [`overscroll-behavior-x`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property. + + overscrollBehaviorX auto + + overscrollBehaviorX contain + +-} +overscrollBehaviorX : + BaseValue + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehaviorX (Value value) = + AppendProperty ("overscroll-behavior-x:" ++ value) + + +{-| Sets the [`overscroll-behavior-y`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property. + + overscrollBehaviorY auto + + overscrollBehaviorY contain + +-} +overscrollBehaviorY : + BaseValue + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehaviorY (Value value) = + AppendProperty ("overscroll-behavior-y:" ++ value) + + +{-| Sets the [`overscroll-behavior-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block) property. + + overscrollBehaviorBlock auto + + overscrollBehaviorBlock contain + +-} +overscrollBehaviorBlock : + BaseValue + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehaviorBlock (Value value) = + AppendProperty ("overscroll-behavior-block:" ++ value) + + +{-| Sets the [`overscroll-behavior-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline) property. + + overscrollBehaviorInline auto + + overscrollBehaviorInline contain + +-} +overscrollBehaviorInline : + BaseValue + { auto : Supported + , contain : Supported + , none : Supported + } + -> Style +overscrollBehaviorInline (Value value) = + AppendProperty ("overscroll-behavior-inline:" ++ value) + + {-| Sets [`scroll-snap-align`](https://css-tricks.com/almanac/properties/s/scroll-snap-align/) scrollSnapAlign none From 060872b07458d48d1855b31f0d37f928ba0701e0 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 01:49:57 +0000 Subject: [PATCH 15/45] boxShadow inset and documentation fix - The 'inset_' field for box-shadows has been renamed to 'inset' because they don't interact with the 'inset_' function. - Fixed a typo in the boxShadows documentation where the function examples were called 'boxShadow' instead of 'boxShadows'. --- src/Css.elm | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 0d25b90d..7eb2b937 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -2839,7 +2839,7 @@ type alias BoxShadowConfig = ) , color : Maybe (Value Color) - , inset_ : Bool + , inset : Bool } @@ -2857,7 +2857,7 @@ defaultBoxShadow = , blurRadius = Nothing , spreadRadius = Nothing , color = Nothing - , inset_ = False + , inset = False } @@ -2877,12 +2877,12 @@ boxShadow (Value val) = {-| Sets [`box-shadow`](https://css-tricks.com/almanac/properties/b/box-shadow/). - boxShadow [] -- "box-shadow: none" + boxShadows [] -- "box-shadow: none" -- "box-shadow: 3px 5px #aabbcc" button [ css - [ boxShadow + [ boxShadows [ { defaultBoxShadow | offsetX = px 3 , offsetY = px 5 @@ -2941,7 +2941,7 @@ boxShadowConfigToString config = "" insetStr = - if config.inset_ then + if config.inset then "inset " else @@ -8191,6 +8191,8 @@ ridge = {-| The `inset` value used by properties such as [`borderStyle`](#borderStyle), [`columnRuleStyle`](#columnRuleStyle), and [`textDecorationStyle`](#textDecorationStyle). +This is called `inset_` rather than `inset` because [`inset` is already a function](#inset). + borderStyle inset_ columnRuleStyle inset_ @@ -10563,6 +10565,9 @@ strokeWidth (Value val) = {-| Sets [`stroke-align`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align) +**Note:** This function accepts `inset_` rather than `inset` because +[`inset` is already a function](#inset). + strokeAlign center strokeAlign inset_ strokeAlign outset From 3092434c4ca56dd392d8290df67ea23394953319 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 02:08:35 +0000 Subject: [PATCH 16/45] Documentation fix for contain The contain variable now includes documentation for overscrollBehavior as well as backgroundSize. --- src/Css.elm | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 4200a141..9f377c71 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -6515,12 +6515,18 @@ backgroundSize2 (Value widthVal) (Value heightVal) = AppendProperty ("background-size:" ++ widthVal ++ " " ++ heightVal) -{-| Sets [`contain`](https://css-tricks.com/almanac/properties/b/background-size/) -for [`backgroundSize`](#backgroundSize). It always show the whole background -image, even if it leaves empty spaces on the sides. +{-| Sets `contain` for [`backgroundSize`](#backgroundSize) and [`overscrollBehavior`](#overscrollBehavior). + +For `backgroundSize`, this means this always shows the whole background image, +even if it leaves empty spaces on the sides. + +For `overscrollBehavior`, this means that default scroll overflow behavior +is observed inside the element, but scroll chaining will not happen to neighbouring elements. backgroundSize contain + overscrollBehavior contain + -} contain : Value { provides | contain : Supported } contain = From 62fa02df55786643a5fd72b49dc469bd71951010 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 14:55:04 +0000 Subject: [PATCH 17/45] Adds quotes property - Adds quotes property (in 1, 2 and 4 argument versions) - Moves the string value up to the area with other shared value types --- src/Css.elm | 129 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 114 insertions(+), 15 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 9f377c71..b3ed9fad 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -10,6 +10,7 @@ module Css exposing , calc, CalcOperation, minus, plus, times, dividedBy , Color, ColorSupported, color, backgroundColor, hex, rgb, rgba, hsl, hsla, currentcolor , Time, TimeSupported, s, ms + , string , pseudoClass, active, disabled , pseudoElement, before, after , width, minWidth, maxWidth, height, minHeight, maxHeight @@ -61,7 +62,7 @@ module Css exposing , tabSize , fontDisplay, fallback, swap, optional , writingMode, verticalLr, verticalRl, horizontalTb - , hyphens, manual + , hyphens, quotes, quotes2, quotes4, manual , hangingPunctuation, first, last, forceEnd, allowEnd , lineClamp , fontSize, xxSmall, xSmall, small, medium, large, xLarge, xxLarge, smaller, larger, lineHeight, letterSpacing @@ -83,7 +84,7 @@ module Css exposing , wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize , neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing , ListStyleType, ListStyleTypeSupported - , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, string, customIdent, listStyleImage + , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, customIdent, listStyleImage , arabicIndic, armenian, bengali, cambodian, circle, cjkDecimal, cjkEarthlyBranch, cjkHeavenlyStem, cjkIdeographic, decimal, decimalLeadingZero, devanagari, disclosureClosed, disclosureOpen, disc, ethiopicNumeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiraganaIroha, japaneseFormal, japaneseInformal, kannada, katakana, katakanaIroha, khmer, koreanHangulFormal, koreanHanjaFormal, koreanHanjaInformal, lao, lowerAlpha, lowerArmenian, lowerGreek, lowerLatin, lowerRoman, malayalam, monogolian, myanmar, oriya, persian, simpChineseFormal, simpChineseInformal, tamil, telugu, thai, tibetan, tradChineseFormal, tradChineseInformal, upperAlpha, upperArmenian, upperLatin, upperRoman , auto, none , hidden, visible @@ -426,7 +427,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontDisplay, fallback, swap, optional @docs writingMode, verticalLr, verticalRl, horizontalTb -@docs hyphens, manual +@docs hyphens, quotes, quotes2, quotes4, manual @docs hangingPunctuation, first, last, forceEnd, allowEnd @docs lineClamp @@ -1000,6 +1001,21 @@ type alias Time = TimeSupported {} +{-| Produces an [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string) +value used by properties such as: +- [`listStyle`](#listStyle), +- [`listStyleType`](#listStyleType) +- [`quotes2`](#quotes2) + + listStyleType (string "> ") + + quotes2 (string "«") (string "»") + +-} +string : String -> Value { provides | string : Supported } +string = + Value << enquoteString + -- CUSTOM PROPERTIES -- @@ -6966,18 +6982,6 @@ listStyleType (Value val) = AppendProperty ("list-style-type:" ++ val) -{-| Produces an [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string) -value used by properties such as [`listStyle`](#listStyle), -and [`listStyleType`](#listStyleType) - - listStyleType (string "> ") - --} -string : String -> Value { provides | string : Supported } -string = - Value << enquoteString - - {-| Produces an [`custom-ident`](https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident) value used by properties such as [`listStyle`](#listStyle), and [`listStyleType`](#listStyleType) @@ -13269,6 +13273,101 @@ hyphens (Value val) = AppendProperty ("hyphens:" ++ val) +{-| Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property. + +This one-argument version can only use keyword or global values. + + quotes none + + quotes inherit + + quotes2 (string "\"") (string "\"") + + quotes4 (string "\"") (string "\"") (string "\'") (string "\'") + +-} +quotes : + BaseValue + { none : Supported + , auto : Supported + } + -> Style +quotes (Value val) = + AppendProperty ("quotes:" ++ val) + + +{-| Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property. + +This 2-argument version sets the starting and closing quotation marks for +a top-level quote (a quote that is not nested within another quote). It only accepts +string values. + + quotes auto + + quotes2 (string "\"") (string "\"") -- "Hey, this is a first-level quote." + + quotes2 (string "\'") (string "\'") -- 'Hey, this is a first-level quote.' + + quotes2 (string "«") (string "»") -- «Hey, this is a first-level quote.» +-} +quotes2 : + Value + { string : Supported + } + -> Value + { string : Supported + } + -> Style +quotes2 (Value lv1StartQuote) (Value lv1EndQuote) = + AppendProperty ("quotes:" ++ lv1StartQuote ++ " " ++ lv1EndQuote) + + +{-| Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property. + +This 4-argument version sets the starting and closing quotation marks for both +a top-level quote and a nested quote. It only accepts +string values. + + quotes auto + + quotes2 (string "\"") (string "\"") + + -- "Hey, this is a first-level quote." + + + quotes4 (string "\"") (string "\"") (string "\'") (string "\'") + + {- "Hey, this is a first-level quote. + 'And this is someone else I made up for + a second-level quote!' Yeah, I did that!" + -} + + quotes4 (string "«") (string "»") (string "👏") (string "🤔") + + {- «Hey, this is a first-level quote. + 👏And this is someone else I made up for + a second-level quote!🤔 Yeah, I did that!» + -} + +-} +quotes4 : + Value + { string : Supported + } + -> Value + { string : Supported + } + -> Value + { string : Supported + } + -> Value + { string : Supported + } + -> Style +quotes4 (Value lv1StartQuote) (Value lv1EndQuote) (Value lv2StartQuote) (Value lv2EndQuote) = + AppendProperty ("quotes:" ++ lv1StartQuote ++ " " ++ lv1EndQuote ++ " " ++ lv2StartQuote ++ " " ++ lv2EndQuote) + + {-| Sets `pixelated` value for usage with [`imageRendering`](#imageRendering). imageRendering pixelated From b03be812584dc700da942a914335e81f2c2c71a1 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Fri, 19 Nov 2021 15:11:25 +0000 Subject: [PATCH 18/45] Adds text-overflow property Implements: - text-overflow property (in 1 and 2-argument forms) - ellipsis value (for text-overflow) --- src/Css.elm | 146 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 111 insertions(+), 35 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index b3ed9fad..d714970b 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -10,7 +10,6 @@ module Css exposing , calc, CalcOperation, minus, plus, times, dividedBy , Color, ColorSupported, color, backgroundColor, hex, rgb, rgba, hsl, hsla, currentcolor , Time, TimeSupported, s, ms - , string , pseudoClass, active, disabled , pseudoElement, before, after , width, minWidth, maxWidth, height, minHeight, maxHeight @@ -62,7 +61,7 @@ module Css exposing , tabSize , fontDisplay, fallback, swap, optional , writingMode, verticalLr, verticalRl, horizontalTb - , hyphens, quotes, quotes2, quotes4, manual + , hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, ellipsis, manual , hangingPunctuation, first, last, forceEnd, allowEnd , lineClamp , fontSize, xxSmall, xSmall, small, medium, large, xLarge, xxLarge, smaller, larger, lineHeight, letterSpacing @@ -84,7 +83,7 @@ module Css exposing , wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize , neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing , ListStyleType, ListStyleTypeSupported - , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, customIdent, listStyleImage + , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, string, customIdent, listStyleImage , arabicIndic, armenian, bengali, cambodian, circle, cjkDecimal, cjkEarthlyBranch, cjkHeavenlyStem, cjkIdeographic, decimal, decimalLeadingZero, devanagari, disclosureClosed, disclosureOpen, disc, ethiopicNumeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiraganaIroha, japaneseFormal, japaneseInformal, kannada, katakana, katakanaIroha, khmer, koreanHangulFormal, koreanHanjaFormal, koreanHanjaInformal, lao, lowerAlpha, lowerArmenian, lowerGreek, lowerLatin, lowerRoman, malayalam, monogolian, myanmar, oriya, persian, simpChineseFormal, simpChineseInformal, tamil, telugu, thai, tibetan, tradChineseFormal, tradChineseInformal, upperAlpha, upperArmenian, upperLatin, upperRoman , auto, none , hidden, visible @@ -427,7 +426,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontDisplay, fallback, swap, optional @docs writingMode, verticalLr, verticalRl, horizontalTb -@docs hyphens, quotes, quotes2, quotes4, manual +@docs hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, ellipsis, manual @docs hangingPunctuation, first, last, forceEnd, allowEnd @docs lineClamp @@ -1003,9 +1002,12 @@ type alias Time = {-| Produces an [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string) value used by properties such as: -- [`listStyle`](#listStyle), -- [`listStyleType`](#listStyleType) -- [`quotes2`](#quotes2) + + - [`listStyle`](#listStyle), + + - [`listStyleType`](#listStyleType) + + - [`quotes2`](#quotes2) listStyleType (string "> ") @@ -1017,6 +1019,7 @@ string = Value << enquoteString + -- CUSTOM PROPERTIES -- @@ -12801,11 +12804,13 @@ maxInlineSize (Value val) = AppendProperty ("max-inline-size:" ++ val) -{-| The `min-content` value used for properties such as: +{-| The `min-content` value used for properties such as: + + - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) -- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) -- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) -- [`flexBasis`](#flexBasis) + - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) + + - [`flexBasis`](#flexBasis) width minContent @@ -12817,9 +12822,11 @@ minContent = {-| The `max-content` value used for properties such as: -- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) -- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) -- [`flexBasis`](#flexBasis) + - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) + + - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) + + - [`flexBasis`](#flexBasis) width maxContent @@ -12831,9 +12838,11 @@ maxContent = {-| The `fit-content` value used for properties such as: -- sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) -- min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) -- [`flexBasis`](#flexBasis) + - sizing (eg. [`width`](#width), [`height`](#height), [`inlineSize`](#inlineSize)) + + - min/max sizing (eg. [`minWidth`](#minWidth), [`maxBlockWidth`](#maxBlockWidth)) + + - [`flexBasis`](#flexBasis) width fitContent @@ -13283,12 +13292,12 @@ This one-argument version can only use keyword or global values. quotes2 (string "\"") (string "\"") - quotes4 (string "\"") (string "\"") (string "\'") (string "\'") + quotes4 (string "\"") (string "\"") (string "'") (string "'") -} quotes : BaseValue - { none : Supported + { none : Supported , auto : Supported } -> Style @@ -13299,24 +13308,26 @@ quotes (Value val) = {-| Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property. This 2-argument version sets the starting and closing quotation marks for -a top-level quote (a quote that is not nested within another quote). It only accepts +a top-level quote (a quote that is not nested within another quote). It only accepts string values. quotes auto quotes2 (string "\"") (string "\"") -- "Hey, this is a first-level quote." - quotes2 (string "\'") (string "\'") -- 'Hey, this is a first-level quote.' + quotes2 (string "'") (string "'") -- 'Hey, this is a first-level quote.' quotes2 (string "«") (string "»") -- «Hey, this is a first-level quote.» + -} quotes2 : Value { string : Supported } - -> Value - { string : Supported - } + -> + Value + { string : Supported + } -> Style quotes2 (Value lv1StartQuote) (Value lv1EndQuote) = AppendProperty ("quotes:" ++ lv1StartQuote ++ " " ++ lv1EndQuote) @@ -13325,13 +13336,13 @@ quotes2 (Value lv1StartQuote) (Value lv1EndQuote) = {-| Sets the [`quotes`](https://css-tricks.com/almanac/properties/q/quotes/) property. This 4-argument version sets the starting and closing quotation marks for both -a top-level quote and a nested quote. It only accepts +a top-level quote and a nested quote. It only accepts string values. quotes auto quotes2 (string "\"") (string "\"") - + -- "Hey, this is a first-level quote." @@ -13354,20 +13365,83 @@ quotes4 : Value { string : Supported } - -> Value - { string : Supported - } - -> Value - { string : Supported - } - -> Value - { string : Supported - } + -> + Value + { string : Supported + } + -> + Value + { string : Supported + } + -> + Value + { string : Supported + } -> Style quotes4 (Value lv1StartQuote) (Value lv1EndQuote) (Value lv2StartQuote) (Value lv2EndQuote) = AppendProperty ("quotes:" ++ lv1StartQuote ++ " " ++ lv1EndQuote ++ " " ++ lv2StartQuote ++ " " ++ lv2EndQuote) +{-| Sets the [`text-overflow`](https://css-tricks.com/almanac/properties/t/text-overflow/) property. + +`text-overflow` describes how text that gets cut off is signalled to users. + +When the one-argument version is used, it sets the end of text (right end for LTR users) that is cut off. + + textOverflow ellipsis + +When the two-argument version is used, it specifies how the +text cut-off is displayed at the start (left in LTR) and +the end (right in LTR) of the text. + + textOverflow2 ellipsis ellipsis + +-} +textOverflow : + BaseValue + { clip : Supported + , ellipsis : Supported + } + -> Style +textOverflow (Value value) = + AppendProperty ("text-overflow:" ++ value) + + +{-| Sets the [`text-overflow`](https://css-tricks.com/almanac/properties/t/text-overflow/) property. + +`text-overflow` describes how text that gets cut off is signalled to users. + +This version specifies how the text cut-off is displayed in start +(left in LTR) and the end (right in LTR) of the text.. + + textOverflow2 ellipsis ellipsis + +-} +textOverflow2 : + Value + { clip : Supported + , ellipsis : Supported + } + -> + Value + { clip : Supported + , ellipsis : Supported + } + -> Style +textOverflow2 (Value startValue) (Value endValue) = + AppendProperty ("text-overflow:" ++ startValue ++ " " ++ endValue) + + +{-| Sets `ellipsis` value for usage with [`textOverflow`](#textOverflow). + + textOverflow ellipsis + +-} +ellipsis : Value { provides | ellipsis : Supported } +ellipsis = + Value "ellipsis" + + {-| Sets `pixelated` value for usage with [`imageRendering`](#imageRendering). imageRendering pixelated @@ -14546,6 +14620,8 @@ scrollPaddingInlineEnd : -> Style scrollPaddingInlineEnd (Value value) = AppendProperty ("scroll-padding-inline-end:" ++ value) + + {-| Sets the [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) property. This property is a shorthand for setting both `overscroll-behavior-x` and `overscroll-behavior-y`. From cb1a07c8d8c551281069850b284cd9f429184a98 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sat, 20 Nov 2021 01:18:58 +0000 Subject: [PATCH 19/45] Adds line-break Implements the following: - line-break - strict value for line-break - loose value for line-break Adds line-break as a use case the documentation for the other values that it accepts. --- src/Css.elm | 82 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 62 insertions(+), 20 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d714970b..c172e96f 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -61,7 +61,7 @@ module Css exposing , tabSize , fontDisplay, fallback, swap, optional , writingMode, verticalLr, verticalRl, horizontalTb - , hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, ellipsis, manual + , hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, strict, loose , hangingPunctuation, first, last, forceEnd, allowEnd , lineClamp , fontSize, xxSmall, xSmall, small, medium, large, xLarge, xxLarge, smaller, larger, lineHeight, letterSpacing @@ -426,7 +426,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontDisplay, fallback, swap, optional @docs writingMode, verticalLr, verticalRl, horizontalTb -@docs hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, ellipsis, manual +@docs hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, strict, loose @docs hangingPunctuation, first, last, forceEnd, allowEnd @docs lineClamp @@ -1428,10 +1428,12 @@ breakWord = Value "break-word" -{-| The `anywhere` value used by [`overflowWrap`](#overflowWrap) +{-| The `anywhere` value used by [`overflowWrap`](#overflowWrap) and [`lineBreak`](#lineBreak). overflowWrap anywhere + lineBreak anywhere + -} anywhere : Value { provides | anywhere : Supported } anywhere = @@ -5041,14 +5043,17 @@ fontVariantCaps (Value str) = AppendProperty ("font-variant-caps:" ++ str) -{-| The `normal` value, which can be used with such properties as -[`fontVariantCaps`](#fontVariantCaps), -[`whiteSpace`](#whiteSpace), -[`wordBreak`](#wordBreak), -[`columnGap`](#columnGap), -[`zoom`](#zoom), -[`animationDirection`](#animationDirection), -and [`alignItems`](#alignItems). +{-| The `normal` value, which can be used with such properties as: + +- [`fontVariantCaps`](#fontVariantCaps) +- [`whiteSpace`](#whiteSpace) +- [`wordBreak`](#wordBreak) +- [`columnGap`](#columnGap) +- [`zoom`](#zoom) +- [`animationDirection`](#animationDirection) +- [`alignItems`](#alignItems) +- [`lineBreak`](#lineBreak) + alignItems normal @@ -13252,15 +13257,6 @@ hangingPunctuation (Value val) = AppendProperty ("hanging-punctuation:" ++ val) -{-| Sets `manual` value for usage with [`hyphens`](#hyphens). - - hyphens manual - --} -manual : Value { provides | manual : Supported } -manual = - Value "manual" - {-| Sets [`hyphens`](https://css-tricks.com/almanac/properties/h/hyphens/) @@ -13432,6 +13428,35 @@ textOverflow2 (Value startValue) (Value endValue) = AppendProperty ("text-overflow:" ++ startValue ++ " " ++ endValue) +{-| Sets the [`lineBreak`](https://css-tricks.com/almanac/properties/l/line-break/) property. + + lineBreak auto + + lineBreak strict +-} +lineBreak : + BaseValue + { auto : Supported + , loose : Supported + , normal : Supported + , strict : Supported + , anywhere : Supported + } + -> Style +lineBreak (Value value) = + AppendProperty ("line-break:" ++ "value") + + +{-| Sets `manual` value for usage with [`hyphens`](#hyphens). + + hyphens manual + +-} +manual : Value { provides | manual : Supported } +manual = + Value "manual" + + {-| Sets `ellipsis` value for usage with [`textOverflow`](#textOverflow). textOverflow ellipsis @@ -13442,6 +13467,23 @@ ellipsis = Value "ellipsis" +{-| Sets `strict` value for usage with [`lineBreak`](#lineBreak). + + lineBreak strict +-} +strict : Value { provides | strict : Supported } +strict = + Value "strict" + + +{-| Sets `loose` value for usage with [`lineBreak`](#lineBreak). + + lineBreak loose +-} +loose : Value { provides | loose : Supported } +loose = + Value "loose" + {-| Sets `pixelated` value for usage with [`imageRendering`](#imageRendering). imageRendering pixelated From 2443e4ff2c4ebbed3e8696d773c8225cddb64af3 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 04:54:16 +0000 Subject: [PATCH 20/45] Adds prelim 2 and 3-argument hanging-punctuation Adds preliminary 2 and 3-argument versions of hanging-punctuation. These need more work because the way the arguments work here can enable incorrectly typed CSS. --- src/Css.elm | 57 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 51 insertions(+), 6 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..b72ccfc5 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -57,7 +57,7 @@ module Css exposing , fontDisplay, fallback, swap, optional , writingMode, verticalLr, verticalRl, horizontalTb , hyphens, manual - , hangingPunctuation, first, last, forceEnd, allowEnd + , hangingPunctuation, hangingPunctuation2, hangingPunctuation3, first, last, forceEnd, allowEnd , lineClamp , fontSize, xxSmall, xSmall, small, medium, large, xLarge, xxLarge, smaller, larger, lineHeight, letterSpacing , fontSizeAdjust @@ -402,7 +402,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontDisplay, fallback, swap, optional @docs writingMode, verticalLr, verticalRl, horizontalTb @docs hyphens, manual -@docs hangingPunctuation, first, last, forceEnd, allowEnd +@docs hangingPunctuation, hangingPunctuation2, hangingPunctuation3, first, last, forceEnd, allowEnd @docs lineClamp @@ -12418,11 +12418,9 @@ allowEnd = hangingPunctuation first - hangingPunctuation forceEnd + hangingPunctuation2 first forceEnd - hangingPunctuation allowEnd - - hangingPunctuation last + hangingPunctuation3 first allowEnd last -} hangingPunctuation : @@ -12438,6 +12436,53 @@ hangingPunctuation (Value val) = AppendProperty ("hanging-punctuation:" ++ val) +{-| Sets [`hanging-punctuation`](https://css-tricks.com/almanac/properties/h/hanging-punctuation/) + + hangingPunctuation2 first forceEnd + +-} +hangingPunctuation2 : + Value + { first : Supported + , last : Supported + } + -> + Value + { first : Supported + , forceEnd : Supported + , allowEnd : Supported + , last : Supported + } + -> Style +hangingPunctuation2 (Value val1) (Value val2) = + AppendProperty ("hanging-punctuation:" ++ val1 ++ " " ++ val2) + + +{-| Sets [`hanging-punctuation`](https://css-tricks.com/almanac/properties/h/hanging-punctuation/) + + hangingPunctuation3 first allowEnd last + +-} +hangingPunctuation3 : + Value + { first : Supported + , last : Supported + } + -> + Value + { forceEnd : Supported + , allowEnd : Supported + } + -> + Value + { first : Supported + , last : Supported + } + -> Style +hangingPunctuation3 (Value val1) (Value val2) (Value val3) = + AppendProperty ("hanging-punctuation:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) + + {-| Sets `manual` value for usage with [`hyphens`](#hyphens). hyphens manual From 6529a3034b4d03664205f268d94e2d24abc00869 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 05:14:25 +0000 Subject: [PATCH 21/45] Adds resize property Implements the following: - resize property - horizontal and vertical values (for resize) Changed the variable names in various functions to eliminate naming conflicts with the new horizontal and vertical values. --- src/Css.elm | 76 +++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 62 insertions(+), 14 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index d4ab3dee..6e6558fb 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -160,6 +160,7 @@ module Css exposing , caretColor , pointerEvents , visiblePainted, visibleFill, visibleStroke, painted, stroke + , resize, horizontal, vertical ) {-| If you need something that `elm-css` does not support right now, the @@ -722,7 +723,7 @@ Multiple CSS properties use these values. @docs caretColor @docs pointerEvents @docs visiblePainted, visibleFill, visibleStroke, painted, stroke - +@docs resize, horizontal, vertical -} import Css.Preprocess as Preprocess exposing (Style(..)) @@ -2963,10 +2964,12 @@ displayListItem3 (Value displayOutside) (Value displayFlow) = AppendProperty ("display:list-item " ++ displayOutside ++ " " ++ displayFlow) -{-| The `block` value used by [`display`](#display) +{-| The `block` value used by [`display`](#display) and [`resize`]. display block + resize block + -} block : Value { provides | block : Supported } block = @@ -3025,10 +3028,12 @@ contents = Value "contents" -{-| The `inline` value used by [`display`](#display) +{-| The `inline` value used by [`display`](#display) and [`resize`]. display inline + resize inline + -} inline : Value { provides | inline : Supported } inline = @@ -8040,8 +8045,8 @@ borderTopLeftRadius2 : } ) -> Style -borderTopLeftRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-top-left-radius:" ++ horizontal ++ " " ++ vertical) +borderTopLeftRadius2 (Value valHorizontal) (Value valVertical) = + AppendProperty ("border-top-left-radius:" ++ valHorizontal ++ " " ++ valVertical) {-| Sets [`border-top-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) property. @@ -8082,8 +8087,8 @@ borderTopRightRadius2 : } ) -> Style -borderTopRightRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-top-right-radius:" ++ horizontal ++ " " ++ vertical) +borderTopRightRadius2 (Value valHorizontal) (Value valVertical) = + AppendProperty ("border-top-right-radius:" ++ valHorizontal ++ " " ++ valVertical) {-| Sets [`border-bottom-right-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) property. @@ -8124,8 +8129,8 @@ borderBottomRightRadius2 : } ) -> Style -borderBottomRightRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-bottom-right-radius:" ++ horizontal ++ " " ++ vertical) +borderBottomRightRadius2 (Value valHorizontal) (Value valVertical) = + AppendProperty ("border-bottom-right-radius:" ++ valHorizontal ++ " " ++ valVertical) {-| Sets [`border-bottom-left-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) property. @@ -8166,8 +8171,8 @@ borderBottomLeftRadius2 : } ) -> Style -borderBottomLeftRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-bottom-left-radius:" ++ horizontal ++ " " ++ vertical) +borderBottomLeftRadius2 (Value valHorizontal) (Value valVertical) = + AppendProperty ("border-bottom-left-radius:" ++ valHorizontal ++ " " ++ valVertical) {-| Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property. @@ -9165,8 +9170,8 @@ borderSpacing (Value str) = -} borderSpacing2 : Value Length -> Value Length -> Style -borderSpacing2 (Value horizontal) (Value vertical) = - AppendProperty ("border-spacing:" ++ horizontal ++ " " ++ vertical) +borderSpacing2 (Value valHorizontal) (Value valVertical) = + AppendProperty ("border-spacing:" ++ valHorizontal ++ " " ++ valVertical) @@ -11756,10 +11761,12 @@ clear (Value val) = AppendProperty ("clear:" ++ val) -{-| Sets `both` value for usage with [`clear`](#clear). +{-| Sets `both` value for usage with [`clear`](#clear) and [`resize`](#resize). clear both + resize both + -} both : Value { provides | both : Supported } both = @@ -13938,3 +13945,44 @@ writingMode : -> Style writingMode (Value str) = AppendProperty ("writing-mode:" ++ str) + + +{-| The [`resize`](https://css-tricks.com/almanac/properties/r/resize/) property. + + resize none + + resize both + + resize inline + +-} +resize : + BaseValue + { none : Supported + , both : Supported + , horizontal : Supported + , vertical : Supported + , block : Supported + , inline : Supported + } + -> Style +resize (Value value) = + AppendProperty ("resize:" ++ value) + + +{-| The `horizontal` value used by [`resize`](#resize). + + resize horizontal +-} +horizontal : Value { provides | horizontal : Supported } +horizontal = + Value "horizontal" + + +{-| The `vertical` value used by [`resize`](#resize). + + resize vertical +-} +vertical : Value { provides | vertical : Supported } +vertical = + Value "vertical" From a78c3d17c260417440925337a0fa8fa981930643 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 06:24:51 +0000 Subject: [PATCH 22/45] Adds contain property and values Implements the following: - contain property (1, 2, 3 and 4 argument versions) - strict value - size value - layout value - style value - paint value Changes to existing code: - style variables in functions have been renamed to styleVal to avoid clashes with style. - size variables in functions have been renamed to sizeVal to avoid clashes with size. - Renamed contain value to contain_ so as to not clash with contain property. It's unclear how to mark contain4 since having values is redundant but calling it containAll is probably misleading, so it's being called contain4 pending further discussion. --- src/Css.elm | 330 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 261 insertions(+), 69 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 6e6558fb..588758d2 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -21,7 +21,7 @@ module Css exposing , backgroundImage, backgroundImages, backgroundPosition, backgroundPosition2, backgroundPosition3, backgroundPosition4, backgroundRepeat, backgroundRepeat2, backgroundSize, backgroundSize2 , linearGradient, linearGradient2, stop, stop2, stop3, toBottom, toBottomLeft, toBottomRight, toLeft, toRight, toTop, toTopLeft, toTopRight , repeat, noRepeat, repeatX, repeatY, space, round - , cover, contain + , cover, contain_ , BoxShadowConfig, boxShadow, boxShadows, defaultBoxShadow , TextShadowConfig, textShadow, defaultTextShadow , LineWidth, LineWidthSupported, LineStyle, LineStyleSupported @@ -161,6 +161,7 @@ module Css exposing , pointerEvents , visiblePainted, visibleFill, visibleStroke, painted, stroke , resize, horizontal, vertical + , contain, contain2, contain3, contain4, strict, size, layout, style, paint ) {-| If you need something that `elm-css` does not support right now, the @@ -260,7 +261,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs repeat, noRepeat, repeatX, repeatY, space, round -@docs cover, contain +@docs cover, contain_ ## Box Shadow @@ -724,6 +725,8 @@ Multiple CSS properties use these values. @docs pointerEvents @docs visiblePainted, visibleFill, visibleStroke, painted, stroke @docs resize, horizontal, vertical +@docs contain, contain2, contain3, contain4, strict, size, layout, style, paint + -} import Css.Preprocess as Preprocess exposing (Style(..)) @@ -3860,9 +3863,16 @@ flexBasis (Value val) = AppendProperty ("flex-basis:" ++ val) -{-| The `content` [`flex-basis` value](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values). +{-| The `content` value used in: + + - [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values) (Indicates automatic sizing based on the item's content) + - [`contain`](#contain) (Indicates all containment rules apart from `size` and `style` are applied.) + +``` +flexBasis content - flexBasis content +contain content +``` -} content : Value { provides | content : Supported } @@ -6076,12 +6086,12 @@ backgroundSize : { pct : Supported , auto : Supported , cover : Supported - , contain : Supported + , contain_ : Supported } ) -> Style -backgroundSize (Value size) = - AppendProperty ("background-size:" ++ size) +backgroundSize (Value sizeVal) = + AppendProperty ("background-size:" ++ sizeVal) {-| Sets [`background-size`](https://css-tricks.com/almanac/properties/b/background-size/) for both width and height (in that order.) @@ -6113,14 +6123,22 @@ backgroundSize2 (Value widthVal) (Value heightVal) = {-| Sets [`contain`](https://css-tricks.com/almanac/properties/b/background-size/) -for [`backgroundSize`](#backgroundSize). It always show the whole background -image, even if it leaves empty spaces on the sides. +for the following properties: - backgroundSize contain + - [`backgroundSize`](#backgroundSize) (It always show the whole background + image, even if it leaves empty spaces on the sides.) + - [`objectFit`](#objectFit) (Replaced content is scaled to maintain proportions within the element's content box.) + - [`userSelect`](#userSelect) (Lets selection start within the element but that selection will be contained within that element's bounds.) + +``` +backgroundSize contain_ +``` + +The value is called `contain_` instead of `contain` because [`contain`](#contain) is already a function. -} -contain : Value { provides | contain : Supported } -contain = +contain_ : Value { provides | contain_ : Supported } +contain_ = Value "contain" @@ -7219,8 +7237,8 @@ border (Value widthVal) = -} border2 : Value LineWidth -> Value LineStyle -> Style -border2 (Value widthVal) (Value style) = - AppendProperty ("border:" ++ widthVal ++ " " ++ style) +border2 (Value widthVal) (Value styleVal) = + AppendProperty ("border:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`border`](https://css-tricks.com/almanac/properties/b/border/) property. @@ -7233,8 +7251,8 @@ border2 (Value widthVal) (Value style) = -} border3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -border3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("border:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +border3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("border:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) property. @@ -7261,8 +7279,8 @@ borderTop (Value widthVal) = -} borderTop2 : Value LineWidth -> Value LineStyle -> Style -borderTop2 (Value widthVal) (Value style) = - AppendProperty ("border-top:" ++ widthVal ++ " " ++ style) +borderTop2 (Value widthVal) (Value styleVal) = + AppendProperty ("border-top:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`border-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) property. @@ -7275,8 +7293,8 @@ borderTop2 (Value widthVal) (Value style) = -} borderTop3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -borderTop3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("border-top:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +borderTop3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("border-top:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) property. @@ -7303,8 +7321,8 @@ borderRight (Value widthVal) = -} borderRight2 : Value LineWidth -> Value LineStyle -> Style -borderRight2 (Value widthVal) (Value style) = - AppendProperty ("border-right:" ++ widthVal ++ " " ++ style) +borderRight2 (Value widthVal) (Value styleVal) = + AppendProperty ("border-right:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`border-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) property. @@ -7317,8 +7335,8 @@ borderRight2 (Value widthVal) (Value style) = -} borderRight3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -borderRight3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("border-right:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +borderRight3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("border-right:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) property. @@ -7345,8 +7363,8 @@ borderBottom (Value widthVal) = -} borderBottom2 : Value LineWidth -> Value LineStyle -> Style -borderBottom2 (Value widthVal) (Value style) = - AppendProperty ("border-bottom:" ++ widthVal ++ " " ++ style) +borderBottom2 (Value widthVal) (Value styleVal) = + AppendProperty ("border-bottom:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`border-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) property. @@ -7359,8 +7377,8 @@ borderBottom2 (Value widthVal) (Value style) = -} borderBottom3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -borderBottom3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("border-bottom:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +borderBottom3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("border-bottom:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) property. @@ -7387,8 +7405,8 @@ borderLeft (Value widthVal) = -} borderLeft2 : Value LineWidth -> Value LineStyle -> Style -borderLeft2 (Value widthVal) (Value style) = - AppendProperty ("border-left:" ++ widthVal ++ " " ++ style) +borderLeft2 (Value widthVal) (Value styleVal) = + AppendProperty ("border-left:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`border-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) property. @@ -7401,8 +7419,8 @@ borderLeft2 (Value widthVal) (Value style) = -} borderLeft3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -borderLeft3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("border-left:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +borderLeft3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("border-left:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property. @@ -7521,8 +7539,8 @@ borderLeftWidth (Value widthVal) = -} borderStyle : BaseValue LineStyle -> Style -borderStyle (Value style) = - AppendProperty ("border-style:" ++ style) +borderStyle (Value styleVal) = + AppendProperty ("border-style:" ++ styleVal) {-| Sets [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) property. @@ -7561,8 +7579,8 @@ borderStyle4 (Value styleTop) (Value styleRigt) (Value styleBottom) (Value style -} borderTopStyle : BaseValue LineStyle -> Style -borderTopStyle (Value style) = - AppendProperty ("border-top-style:" ++ style) +borderTopStyle (Value styleVal) = + AppendProperty ("border-top-style:" ++ styleVal) {-| Sets [`border-right-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style) property. @@ -7571,8 +7589,8 @@ borderTopStyle (Value style) = -} borderRightStyle : BaseValue LineStyle -> Style -borderRightStyle (Value style) = - AppendProperty ("border-right-style:" ++ style) +borderRightStyle (Value styleVal) = + AppendProperty ("border-right-style:" ++ styleVal) {-| Sets [`border-bottom-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) property. @@ -7581,8 +7599,8 @@ borderRightStyle (Value style) = -} borderBottomStyle : BaseValue LineStyle -> Style -borderBottomStyle (Value style) = - AppendProperty ("border-bottom-style:" ++ style) +borderBottomStyle (Value styleVal) = + AppendProperty ("border-bottom-style:" ++ styleVal) {-| Sets [`border-left-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style) property. @@ -7591,8 +7609,8 @@ borderBottomStyle (Value style) = -} borderLeftStyle : BaseValue LineStyle -> Style -borderLeftStyle (Value style) = - AppendProperty ("border-left-style:" ++ style) +borderLeftStyle (Value styleVal) = + AppendProperty ("border-left-style:" ++ styleVal) {-| Sets [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) property. @@ -8795,8 +8813,8 @@ textDecoration2 : , wavy : Supported } -> Style -textDecoration2 (Value line) (Value style) = - AppendProperty ("text-decoration:" ++ line ++ " " ++ style) +textDecoration2 (Value line) (Value styleVal) = + AppendProperty ("text-decoration:" ++ line ++ " " ++ styleVal) {-| Sets [`text-decoration`][text-decoration] property. @@ -8823,8 +8841,8 @@ textDecoration3 : } -> Value Color -> Style -textDecoration3 (Value line) (Value style) (Value colorVal) = - AppendProperty ("text-decoration:" ++ line ++ " " ++ style ++ " " ++ colorVal) +textDecoration3 (Value line) (Value styleVal) (Value colorVal) = + AppendProperty ("text-decoration:" ++ line ++ " " ++ styleVal ++ " " ++ colorVal) {-| Sets [`text-decoration-line`][text-decoration-line] property. @@ -8904,8 +8922,8 @@ textDecorationStyle : , wavy : Supported } -> Style -textDecorationStyle (Value style) = - AppendProperty ("text-decoration-style:" ++ style) +textDecorationStyle (Value styleVal) = + AppendProperty ("text-decoration-style:" ++ styleVal) {-| Sets [`text-decoration-color`][text-decoration-color] property. @@ -9909,8 +9927,8 @@ columnRuleWidth (Value widthVal) = -} columnRuleStyle : BaseValue LineStyle -> Style -columnRuleStyle (Value style) = - AppendProperty ("column-rule-style:" ++ style) +columnRuleStyle (Value styleVal) = + AppendProperty ("column-rule-style:" ++ styleVal) {-| Sets [`column-rule-color`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-color) @@ -10411,8 +10429,8 @@ strokeSize : } ) -> Style -strokeSize (Value size) = - AppendProperty ("stroke-size:" ++ size) +strokeSize (Value sizeVal) = + AppendProperty ("stroke-size:" ++ sizeVal) {-| Sets [`stroke-size`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-size). @@ -10462,8 +10480,8 @@ strokeDashCorner : } ) -> Style -strokeDashCorner (Value size) = - AppendProperty ("stroke-dash-corner:" ++ size) +strokeDashCorner (Value sizeVal) = + AppendProperty ("stroke-dash-corner:" ++ sizeVal) {-| Sets [`stroke-linejoin`](https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-linejoin). @@ -10637,8 +10655,8 @@ properties. -} columnRule2 : Value LineWidth -> Value LineStyle -> Style -columnRule2 (Value widthVal) (Value style) = - AppendProperty ("column-rule:" ++ widthVal ++ " " ++ style) +columnRule2 (Value widthVal) (Value styleVal) = + AppendProperty ("column-rule:" ++ widthVal ++ " " ++ styleVal) {-| Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/). @@ -10654,8 +10672,8 @@ properties. -} columnRule3 : Value LineWidth -> Value LineStyle -> Value Color -> Style -columnRule3 (Value widthVal) (Value style) (Value colorVal) = - AppendProperty ("column-rule:" ++ widthVal ++ " " ++ style ++ " " ++ colorVal) +columnRule3 (Value widthVal) (Value styleVal) (Value colorVal) = + AppendProperty ("column-rule:" ++ widthVal ++ " " ++ styleVal ++ " " ++ colorVal) @@ -11895,8 +11913,8 @@ letterSpacing (Value val) = -} width : BaseValue Width -> Style -width (Value size) = - AppendProperty ("width:" ++ size) +width (Value sizeVal) = + AppendProperty ("width:" ++ sizeVal) {-| Sets [`minWidth`](https://css-tricks.com/almanac/properties/m/min-width/). @@ -11919,8 +11937,8 @@ minWidth : } ) -> Style -minWidth (Value size) = - AppendProperty ("min-width:" ++ size) +minWidth (Value sizeVal) = + AppendProperty ("min-width:" ++ sizeVal) {-| Sets [`maxWidth`](https://css-tricks.com/almanac/properties/m/max-width/). @@ -11943,8 +11961,8 @@ maxWidth : } ) -> Style -maxWidth (Value size) = - AppendProperty ("max-width:" ++ size) +maxWidth (Value sizeVal) = + AppendProperty ("max-width:" ++ sizeVal) {-| The `min-content` value used for properties such as [`width`](#width), @@ -12623,7 +12641,7 @@ scaleDown = objectFit fill_ - objectFit contain + objectFit contain_ objectFit cover @@ -12635,7 +12653,7 @@ scaleDown = objectFit : BaseValue { fill_ : Supported - , contain : Supported + , contain_ : Supported , cover : Supported , none : Supported , scaleDown : Supported @@ -13843,7 +13861,7 @@ unicodeBidi (Value val) = userSelect text - userSelect contain + userSelect contain_ userSelect all_ @@ -13853,7 +13871,7 @@ userSelect : { none : Supported , auto : Supported , text : Supported - , contain : Supported + , contain_ : Supported , all_ : Supported } -> Style @@ -13956,7 +13974,7 @@ writingMode (Value str) = resize inline -} -resize : +resize : BaseValue { none : Supported , both : Supported @@ -13973,6 +13991,7 @@ resize (Value value) = {-| The `horizontal` value used by [`resize`](#resize). resize horizontal + -} horizontal : Value { provides | horizontal : Supported } horizontal = @@ -13982,7 +14001,180 @@ horizontal = {-| The `vertical` value used by [`resize`](#resize). resize vertical + -} vertical : Value { provides | vertical : Supported } vertical = Value "vertical" + + +{-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. + + contain none + + contain content + + contain2 size layout + + contain3 size layout style + + contain4 -- all multiple choice values in use, no value entry needed + +-} +contain : + BaseValue + { none : Supported + , strict : Supported + , content : Supported + , size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> Style +contain (Value value) = + AppendProperty ("contain:" ++ value) + + +{-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. + +This two-argument version lets you use 2 of the 4 multiple choice values you +can use for this property. + + contain2 size layout + +-} +contain2 : + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> Style +contain2 (Value value1) (Value value2) = + AppendProperty ("contain:" ++ value1 ++ " " ++ value2) + + +{-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. + +This two-argument version lets you use 3 of the 4 multiple choice values you +can use for this property. + + contain3 size layout style + +-} +contain3 : + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> Style +contain3 (Value value1) (Value value2) (Value value3) = + AppendProperty ("contain:" ++ value1 ++ " " ++ value2 ++ " " ++ value3) + + +{-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. + +This version uses all 4 multiple choice values that can be used with this +property, no values required. + +Equivalent to `contain size layout style paint`. + + contain4 + +-} +contain4 : Style +contain4 = + AppendProperty "contain:size layout style paint" + + +{-| Sets the `strict` value for [`contain`](#contain). + +This indicates that all containment rules apart from `style` are applied. + +This is equivalent to `contain3 size layout paint`. + + contain strict + +-} +strict : Value { provides | strict : Supported } +strict = + Value "strict" + + +{-| Sets the `size` value for [`contain`](#contain). + +This indicates that the element can be sized without +needing to look at the size of its descendants. + + contain size + +-} +size : Value { provides | size : Supported } +size = + Value "size" + + +{-| Sets the `layout` value for [`contain`](#contain). + +This indicates that nothing outside the element +may affect its internal layout and vice versa. + + contain layout + +-} +layout : Value { provides | layout : Supported } +layout = + Value "layout" + + +{-| Sets the `style` value for [`contain`](#contain). + +For properties that can have effects on more than its +element and descendenants, this indicates that those effects +are contained by the containing element. + + contain style + +-} +style : Value { provides | style : Supported } +style = + Value "style" + + +{-| Sets the `paint` value for [`contain`](#contain). + +Indicates that descendants of the element will not +display outside its bounds and will not be painted +by the browser if the containing box is offscreen. + + contain paint + +-} +paint : Value { provides | paint : Supported } +paint = + Value "paint" From e01813b9c63c13cc2f62bd3d3323f798ae68f88d Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 06:26:25 +0000 Subject: [PATCH 23/45] Fixed doc typo in contain4 --- src/Css.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index 588758d2..19e12c88 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -14102,7 +14102,7 @@ contain3 (Value value1) (Value value2) (Value value3) = This version uses all 4 multiple choice values that can be used with this property, no values required. -Equivalent to `contain size layout style paint`. +Equivalent to `contain: size layout style paint;`. contain4 From 50a95d3a869e27096034a6cc995311a1893058bc Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 06:49:25 +0000 Subject: [PATCH 24/45] Adds paint-order Implements the following: - paint-order property (in 1, 2 and 3-argument forms) - markers value Adjusts the documentation of fill_ and stroke to mention that they work with paintOrder. --- src/Css.elm | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 93 insertions(+), 3 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 19e12c88..7d3e4132 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -124,6 +124,7 @@ module Css exposing , strokeOrigin, fillBox, strokeBox , strokeLinejoin, strokeLinejoin2, crop, arcs, miter, bevel , strokeDashJustify, compress, dashes, gaps + , paintOrder, paintOrder2, paintOrder3, markers , columns, columns2, columnWidth, columnCount, columnGap, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 , columnFill, balance, balanceAll , columnSpan, all_ @@ -625,6 +626,8 @@ Multiple CSS properties use these values. @docs strokeLinejoin, strokeLinejoin2, crop, arcs, miter, bevel @docs strokeDashJustify, compress, dashes, gaps +## Other +@docs paintOrder, paintOrder2, paintOrder3, markers # Columns @@ -10625,6 +10628,89 @@ gaps = Value "gaps" +{-| The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property. + +This one-argument version indicates which parts of text and shape graphics are +painted first, followed by the other two in their relative default order. + + paintOrder normal -- normal paint order. + + paintOrder2 fill_ stroke -- fill, stroke, then markers. + + paintOrder3 markers stroke fill_ -- markers, stroke, then fill. +-} +paintOrder : + BaseValue + { normal : Supported + , stroke : Supported + , markers : Supported + } + -> Style +paintOrder (Value val) = + AppendProperty ("paint-order:" ++ val) + + +{-| The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property. + +This two-argument version indicates which parts of text and shape graphics are +painted first, followed by the other remaining one. + + paintOrder2 fill_ stroke -- fill, stroke, then markers. +-} +paintOrder2 : + Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> Style +paintOrder2 (Value val1) (Value val2) = + AppendProperty ("paint-order:" ++ val1 ++ " " ++ val2) + + +{-| The [`paint-order`](https://css-tricks.com/almanac/properties/p/paint-order/) property. + +This three-argument version explicitly indicates in which order should all the parts of text +and shape graphics be painted. + + paintOrder3 markers stroke fill_ -- markers, stroke, then fill. +-} +paintOrder3 : + Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> Style +paintOrder3 (Value val1) (Value val2) (Value val3) = + AppendProperty ("paint-order:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) + + +{-| Provides the `markers` value for [`paintOrder`](#paintOrder). + + paintOrder markers +-} +markers : Value { provides | markers : Supported } +markers = + Value "markers" + + + {-| Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/). This is a shorthand for the [`columnRuleWidth`](#columnRuleWidth), [`columnRuleStyle`](#columnRuleStyle), and [`columnRuleColor`](#columnRuleColor) @@ -12614,13 +12700,15 @@ mixBlendMode (Value val) = AppendProperty ("mix-blend-mode:" ++ val) -{-| The `fill` value used in properties such as [`objectFit`](#objectFit) -and [`pointerEvents`](#pointerEvents). +{-| The `fill` value used in properties such as [`objectFit`](#objectFit), + [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder) objectFit fill_ pointerEvents fill_ + paintOrder2 fill markers + -} fill_ : Value { provides | fill_ : Supported } fill_ = @@ -12954,10 +13042,12 @@ painted = Value "painted" -{-| The `stroke` value used by [`pointerEvents`](#pointerEvents) +{-| The `stroke` value used by [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder). pointerEvents stroke + paintOrder2 stroke markers + -} stroke : Value { provides | stroke : Supported } stroke = From f5765bc2c177a9d96f382abfddc1350397a828fd Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 15:06:02 +0000 Subject: [PATCH 25/45] Adds clip value to overflow properties - Adds clip value to overflow, overflowX and overflowY. --- src/Css.elm | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index fa73149b..c5a2d2f9 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -83,7 +83,7 @@ module Css exposing , auto, none , hidden, visible , contentBox, borderBox - , overflow, overflowX, overflowY + , overflow, overflowX, overflowY, clip , overflowAnchor , overflowWrap , breakWord, anywhere @@ -498,7 +498,7 @@ Multiple CSS properties use these values. ## Overflow -@docs overflow, overflowX, overflowY +@docs overflow, overflowX, overflowY, clip @docs overflowAnchor @docs overflowWrap @@ -1256,6 +1256,7 @@ overflow : , hidden : Supported , scroll : Supported , auto : Supported + , clip : Supported } -> Style overflow (Value val) = @@ -1279,6 +1280,7 @@ overflowX : , hidden : Supported , scroll : Supported , auto : Supported + , clip : Supported } -> Style overflowX (Value val) = @@ -1302,12 +1304,29 @@ overflowY : , hidden : Supported , scroll : Supported , auto : Supported + , clip : Supported } -> Style overflowY (Value val) = AppendProperty ("overflow-y:" ++ val) +{-| The `clip` value used by [`overflow`](#overflow). + + overflow clip + + overflowX clip + + overflowY clip + +-} +clip : Value { provides | clip : Supported } +clip = + Value "clip" + + + + {-| Sets [`overflow-wrap`](https://css-tricks.com/almanac/properties/o/overflow-wrap/) overflowWrap breakWord From 45ee2490337c8f6ed3bd4eee9f10c6b05039dfdf Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 16:25:34 +0000 Subject: [PATCH 26/45] Adds perspective property - Adds perspective property - Renames the pre-existing 'perspective' value to 'perspective_' --- src/Css.elm | 42 ++++++++++++++++++++++++++++++++---------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index c5a2d2f9..1fbdbe8b 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -131,7 +131,7 @@ module Css exposing , transform, transforms, transformOrigin, transformOrigin2 , TransformFunction, TransformFunctionSupported , matrix, matrix3d - , perspective + , perspective, perspective_ , rotate, rotateX, rotateY, rotateZ, rotate3d , scale, scale2, scaleX, scaleY, scaleZ, scale3d , skew, skew2, skewX, skewY @@ -641,7 +641,6 @@ Multiple CSS properties use these values. @docs transform, transforms, transformOrigin, transformOrigin2 @docs TransformFunction, TransformFunctionSupported - ## Matrix transformation @docs matrix, matrix3d @@ -650,6 +649,7 @@ Multiple CSS properties use these values. ## Perspective @docs perspective +@docs perspective_ ## Rotation @@ -10813,7 +10813,7 @@ type alias TransformFunctionSupported supported = , rotateY : Supported , rotateZ : Supported , rotate3d : Supported - , perspective : Supported + , perspective_ : Supported } @@ -10849,7 +10849,7 @@ type alias TransformFunction = transform (rotateY (deg 10)) transform (rotateZ (deg 10)) transform (rotate3d 1 2.0 3.0 (deg 10)) - transform (perspective (px 17)) + transform (perspective_ (px 17)) -} transform : BaseValue (TransformFunctionSupported { none : Supported }) -> Style @@ -10871,7 +10871,7 @@ transforms head rest = AppendProperty ("transform:" ++ plusListToString head rest) -{-| Named afte the plus symbol in the CSS specification [CSS-VALUES-3]. +{-| Named after the plus symbol in the CSS specification [CSS-VALUES-3]. -} plusListToString : Value a -> List (Value a) -> String plusListToString head rest = @@ -10880,7 +10880,6 @@ plusListToString head rest = |> String.join " " - -- MATRIX TRANSFORMATION @@ -11270,15 +11269,38 @@ rotate3d valX valY z (Value angle) = -- PERSPECTIVE -{-| Sets `perspective` value for usage with [`transform`](#transform). +{-| The [`perspective`](https://css-tricks.com/almanac/properties/p/perspective/) property. + +Negative values are not supported and any value smaller than 1px is clamped to 1px. - transform (perspective (px 17)) + perspective none + perspective (px 100) + + perspective (rem 50) -} perspective : + BaseValue + ( LengthSupported + { none : Supported + } + ) + -> Style +perspective (Value val) = + AppendProperty ("perspective:" ++ val) + + +{-| Sets `perspective` value for usage with [`transform`](#transform). + + transform (perspective_ (px 17)) + +The value is called `perspective_` instead of `perspective` because +[`perspective`](#perspective) is already a function. +-} +perspective_ : Value Length - -> Value { provides | perspective : Supported } -perspective (Value length) = + -> Value { provides | perspective_ : Supported } +perspective_ (Value length) = Value ("perspective(" ++ length ++ ")") From a794c5020136250baf7f3646ae1e830e3e45b285 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 16:36:03 +0000 Subject: [PATCH 27/45] Adds perspective-origin property - Implements perspective-origin property. - Applies elm-format to the previous few commits that hadn't had it applied. --- src/Css.elm | 123 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 98 insertions(+), 25 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 1fbdbe8b..777ff440 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -131,7 +131,8 @@ module Css exposing , transform, transforms, transformOrigin, transformOrigin2 , TransformFunction, TransformFunctionSupported , matrix, matrix3d - , perspective, perspective_ + , perspective, perspectiveOrigin, perspectiveOrigin2 + , perspective_ , rotate, rotateX, rotateY, rotateZ, rotate3d , scale, scale2, scaleX, scaleY, scaleZ, scale3d , skew, skew2, skewX, skewY @@ -626,9 +627,12 @@ Multiple CSS properties use these values. @docs strokeLinejoin, strokeLinejoin2, crop, arcs, miter, bevel @docs strokeDashJustify, compress, dashes, gaps + ## Other + @docs paintOrder, paintOrder2, paintOrder3, markers + # Columns @docs columns, columns2, columnWidth, columnCount, columnGap, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 @@ -641,6 +645,7 @@ Multiple CSS properties use these values. @docs transform, transforms, transformOrigin, transformOrigin2 @docs TransformFunction, TransformFunctionSupported + ## Matrix transformation @docs matrix, matrix3d @@ -648,7 +653,7 @@ Multiple CSS properties use these values. ## Perspective -@docs perspective +@docs perspective, perspectiveOrigin, perspectiveOrigin2 @docs perspective_ @@ -1325,8 +1330,6 @@ clip = Value "clip" - - {-| Sets [`overflow-wrap`](https://css-tricks.com/almanac/properties/o/overflow-wrap/) overflowWrap breakWord @@ -10654,9 +10657,10 @@ painted first, followed by the other two in their relative default order. paintOrder normal -- normal paint order. - paintOrder2 fill_ stroke -- fill, stroke, then markers. + paintOrder2 fill_ stroke -- fill, stroke, then markers. + + paintOrder3 markers stroke fill_ -- markers, stroke, then fill. - paintOrder3 markers stroke fill_ -- markers, stroke, then fill. -} paintOrder : BaseValue @@ -10675,6 +10679,7 @@ This two-argument version indicates which parts of text and shape graphics are painted first, followed by the other remaining one. paintOrder2 fill_ stroke -- fill, stroke, then markers. + -} paintOrder2 : Value @@ -10682,11 +10687,12 @@ paintOrder2 : , stroke : Supported , markers : Supported } - -> Value - { fill_ : Supported - , stroke : Supported - , markers : Supported - } + -> + Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } -> Style paintOrder2 (Value val1) (Value val2) = AppendProperty ("paint-order:" ++ val1 ++ " " ++ val2) @@ -10697,7 +10703,8 @@ paintOrder2 (Value val1) (Value val2) = This three-argument version explicitly indicates in which order should all the parts of text and shape graphics be painted. - paintOrder3 markers stroke fill_ -- markers, stroke, then fill. + paintOrder3 markers stroke fill_ -- markers, stroke, then fill. + -} paintOrder3 : Value @@ -10705,16 +10712,18 @@ paintOrder3 : , stroke : Supported , markers : Supported } - -> Value - { fill_ : Supported - , stroke : Supported - , markers : Supported - } - -> Value - { fill_ : Supported - , stroke : Supported - , markers : Supported - } + -> + Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } + -> + Value + { fill_ : Supported + , stroke : Supported + , markers : Supported + } -> Style paintOrder3 (Value val1) (Value val2) (Value val3) = AppendProperty ("paint-order:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) @@ -10723,13 +10732,13 @@ paintOrder3 (Value val1) (Value val2) (Value val3) = {-| Provides the `markers` value for [`paintOrder`](#paintOrder). paintOrder markers + -} markers : Value { provides | markers : Supported } markers = Value "markers" - {-| Sets [`column-rule`](https://css-tricks.com/almanac/properties/c/column-rule/). This is a shorthand for the [`columnRuleWidth`](#columnRuleWidth), [`columnRuleStyle`](#columnRuleStyle), and [`columnRuleColor`](#columnRuleColor) @@ -10880,6 +10889,7 @@ plusListToString head rest = |> String.join " " + -- MATRIX TRANSFORMATION @@ -11278,10 +11288,11 @@ Negative values are not supported and any value smaller than 1px is clamped to 1 perspective (px 100) perspective (rem 50) + -} perspective : BaseValue - ( LengthSupported + (LengthSupported { none : Supported } ) @@ -11290,12 +11301,74 @@ perspective (Value val) = AppendProperty ("perspective:" ++ val) +{-| The [`perspective-origin`](https://css-tricks.com/almanac/properties/p/perspective-origin/) property. + +This one-argument version either supports a global value or the x-position. + + perspectiveOrigin inherit + + perspectiveOrigin left_ + + perspectiveOrigin (pct 50) + + perspectiveOrigin2 left_ center + + perspectiveOrigin2 (rem 50) (pct 20) + +-} +perspectiveOrigin : + BaseValue + (LengthSupported + { pct : Supported + , left_ : Supported + , center : Supported + , right_ : Supported + } + ) + -> Style +perspectiveOrigin (Value val) = + AppendProperty ("perspective-origin:" ++ val) + + +{-| The [`perspective-origin`](https://css-tricks.com/almanac/properties/p/perspective-origin/) property. + +This two-argument version takes an X position and then a Y position. + + pperspectiveOrigin2 left_ center + + perspectiveOrigin2 (rem 50) (pct 20) + +-} +perspectiveOrigin2 : + Value + (LengthSupported + { pct : Supported + , left_ : Supported + , center : Supported + , right_ : Supported + } + ) + -> + Value + (LengthSupported + { pct : Supported + , top_ : Supported + , center : Supported + , bottom_ : Supported + } + ) + -> Style +perspectiveOrigin2 (Value xVal) (Value yVal) = + AppendProperty ("perspective-origin:" ++ xVal ++ " " ++ yVal) + + {-| Sets `perspective` value for usage with [`transform`](#transform). transform (perspective_ (px 17)) The value is called `perspective_` instead of `perspective` because [`perspective`](#perspective) is already a function. + -} perspective_ : Value Length @@ -12787,7 +12860,7 @@ mixBlendMode (Value val) = {-| The `fill` value used in properties such as [`objectFit`](#objectFit), - [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder) +[`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder) objectFit fill_ From b23ca7f7d3c76f862ce1605fa882779479ff6c43 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 17:36:22 +0000 Subject: [PATCH 28/45] Adds scale and rotate properties - Adds scale property (as scale, scale2, and scale3) - Renames scale value to scale_ (to avoid conflicts with scale) - Renames scale2 value to scale2_ (to avoid conflicts with scale2) - Adds rotate property (as rotate and rotate2) - Renames rotate value to rotate_ (to avoid conflicts with rotate) - New value function: z - New value function: vec3 - Changes some variable names in functions to avoid conflicts with new value functions --- src/Css.elm | 213 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 180 insertions(+), 33 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 777ff440..034c008b 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -133,8 +133,8 @@ module Css exposing , matrix, matrix3d , perspective, perspectiveOrigin, perspectiveOrigin2 , perspective_ - , rotate, rotateX, rotateY, rotateZ, rotate3d - , scale, scale2, scaleX, scaleY, scaleZ, scale3d + , rotate, rotate2, rotate_, rotateX, rotateY, rotateZ, rotate3d, vec3, z + , scale, scale2, scale3, scale_, scale2_, scaleX, scaleY, scaleZ, scale3d , skew, skew2, skewX, skewY , translate, translate2, translateX, translateY, translateZ, translate3d , animationName, animationNames, animationDuration, animationDurations, animationTimingFunction, animationTimingFunctions, animationIterationCount, animationIterationCounts, animationDirection, animationDirections, animationPlayState, animationPlayStates, animationDelay, animationDelays, animationFillMode, animationFillModes @@ -659,12 +659,12 @@ Multiple CSS properties use these values. ## Rotation -@docs rotate, rotateX, rotateY, rotateZ, rotate3d +@docs rotate, rotate2, rotate_, rotateX, rotateY, rotateZ, rotate3d, vec3, z ## Scaling (resizing) -@docs scale, scale2, scaleX, scaleY, scaleZ, scale3d +@docs scale, scale2, scale3, scale_, scale2_, scaleX, scaleY, scaleZ, scale3d ## Skewing (distortion) @@ -10807,8 +10807,8 @@ type alias TransformFunctionSupported supported = , translateY : Supported , translateZ : Supported , translate3d : Supported - , scale : Supported - , scale2 : Supported + , scale_ : Supported + , scale2_ : Supported , scaleX : Supported , scaleY : Supported , scaleZ : Supported @@ -10817,7 +10817,7 @@ type alias TransformFunctionSupported supported = , skew2 : Supported , skewX : Supported , skewY : Supported - , rotate : Supported + , rotate_ : Supported , rotateX : Supported , rotateY : Supported , rotateZ : Supported @@ -10843,8 +10843,8 @@ type alias TransformFunction = transform (translateY (in 3)) transform (translateZ (px 2)) transform (translate3d (px 12) (pct 50) (em 3)) - transform (scale 2) - transform (scale2 2, 0.5) + transform (scale_ 2) + transform (scale2_ 2, 0.5) transform (scaleX 2) transform (scaleY 0.5) transform (scaleZ 0.3) @@ -10853,7 +10853,7 @@ type alias TransformFunction = transform (skew2 (deg 30) (deg 20)) transform (skewX (deg 30)) transform (skewY (rad 1.07)) - transform (rotate (turn 0.5)) + transform (rotate_ (turn 0.5)) transform (rotateX (deg 10)) transform (rotateY (deg 10)) transform (rotateZ (deg 10)) @@ -10869,7 +10869,7 @@ transform (Value val) = {-| Sets [`transform`](https://css-tricks.com/almanac/properties/t/transform/) with a series of transform-functions. - transforms (translate (px 12)) [ scale 2, skew (deg 20) ] + transforms (translate (px 12)) [ scale_ 2, skew (deg 20) ] -} transforms : @@ -11050,8 +11050,8 @@ translateY (Value valY) = translateZ : Value Length -> Value { provides | translateZ : Supported } -translateZ (Value z) = - Value ("translateZ(" ++ z ++ ")") +translateZ (Value valZ) = + Value ("translateZ(" ++ valZ ++ ")") {-| Sets `translate3d` value for usage with [`transform`](#transform). @@ -11073,31 +11073,96 @@ translate3d : ) -> Value Length -> Value { provides | translate3d : Supported } -translate3d (Value valX) (Value valY) (Value z) = - Value ("translate3d(" ++ valX ++ "," ++ valY ++ "," ++ z ++ ")") +translate3d (Value valX) (Value valY) (Value valZ) = + Value ("translate3d(" ++ valX ++ "," ++ valY ++ "," ++ valZ ++ ")") -- SCALING (resizing) +{-| The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property. + +This one-argument version lets you set a global value, `none` or +a `num` that will scale the element by both X and Y axes +(equivalent to [`scale_`](#scale_)). + + scale none + + scale (num 3) + + scale2 (num 1) (num 3) + + scale3 (num 1) (num 3) (num 4) +-} +scale : + BaseValue + { num : Supported + , none : Supported + } + -> Style +scale (Value val) = + AppendProperty ("scale:" ++ val) + + +{-| The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property. + +This two-argument version lets you specify scaling in X and Y axes +(equivalent to [`scale2_`](#scale2_)). + + scale2 (num 1) (num 3) +-} +scale2 : + Value + { num : Supported + } + -> Value + { num : Supported + } + -> Style +scale2 (Value xVal) (Value yVal) = + AppendProperty ("scale:" ++ xVal ++ " " ++ yVal) + + +{-| The [`scale`](https://css-tricks.com/almanac/properties/s/scale) property. + +This three-argument version lets you specify scaling in X, Y and Z axes +(equivalent to [`scale3d`](#scale3d)). + + scale3 (num 1) (num 3) (num 4) +-} +scale3 : + Value + { num : Supported + } + -> Value + { num : Supported + } + -> Value + { num : Supported + } + -> Style +scale3 (Value xVal) (Value yVal) (Value zVal) = + AppendProperty ("scale:" ++ xVal ++ " " ++ yVal ++ " " ++ zVal) + + {-| Sets `scale` value for usage with [`transform`](#transform). - transform (scale 0.7) + transform (scale_ 0.7) -} -scale : Float -> Value { provides | scale : Supported } -scale val = +scale_ : Float -> Value { provides | scale_ : Supported } +scale_ val = Value ("scale(" ++ String.fromFloat val ++ ")") {-| Sets `scale` value for usage with [`transform`](#transform). - transform (scale 0.7 0.7) + transform (scale2_ 0.7 0.7) -} -scale2 : Float -> Float -> Value { provides | scale2 : Supported } -scale2 valX valY = +scale2_ : Float -> Float -> Value { provides | scale2_ : Supported } +scale2_ valX valY = Value ("scale(" ++ String.fromFloat valX ++ ", " ++ String.fromFloat valY ++ ")") @@ -11127,8 +11192,8 @@ scaleY valY = -} scaleZ : Float -> Value { provides | scaleZ : Supported } -scaleZ z = - Value ("scaleZ(" ++ String.fromFloat z ++ ")") +scaleZ valZ = + Value ("scaleZ(" ++ String.fromFloat valZ ++ ")") {-| Sets `scale3d` value for usage with [`transform`](#transform). @@ -11141,8 +11206,8 @@ scale3d : -> Float -> Float -> Value { provides | scale3d : Supported } -scale3d valX valY z = - Value ("scale3d(" ++ String.fromFloat valX ++ "," ++ String.fromFloat valY ++ "," ++ String.fromFloat z ++ ")") +scale3d valX valY valZ = + Value ("scale3d(" ++ String.fromFloat valX ++ "," ++ String.fromFloat valY ++ "," ++ String.fromFloat valZ ++ ")") @@ -11201,16 +11266,66 @@ skewY (Value angle) = -- ROTATION +{-| The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property. -{-| Sets `rotate` value for usage with [`transform`](#transform). +This one-argument version lets you set a global variable, `none`, or angle. + + rotate none + + rotate inherit - transform (rotate (deg 30)) + rotate (deg 60) + rotate2 x (deg 50) + + rotate2 y (deg 100) + + rotate2 (vec3 1 2 10) (deg 100) -} rotate : + BaseValue + (AngleSupported + { none : Supported + } + ) + -> Style +rotate (Value value) = + AppendProperty ("rotate:" ++ value) + + +{-| The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property. + +This two-argument version lets you set an axis or a vector, then an angle value. + + rotate2 x (deg 50) + + rotate2 y (deg 100) + + rotate2 (vec3 1 2 10) (deg 100) +-} +rotate2 : + Value + { x : Supported + , y : Supported + , z : Supported + , vec3 : Supported + } + -> Value Angle + -> Style +rotate2 (Value axisOrVecVal) (Value angleVal)= + AppendProperty ("rotate:" ++ axisOrVecVal ++ " " ++ angleVal) + + +{-| Sets `rotate` value for usage with [`transform`](#transform). + + transform (rotate_ (deg 30)) + +This is called `rotate_` instead of `rotate` because [`rotate` is already a function.](#rotate) +-} +rotate_ : Value Angle - -> Value { provides | rotate : Supported } -rotate (Value angle) = + -> Value { provides | rotate_ : Supported } +rotate_ (Value angle) = Value ("rotate(" ++ angle ++ ")") @@ -11261,20 +11376,46 @@ rotate3d : -> Float -> Value Angle -> Value { provides | rotate3d : Supported } -rotate3d valX valY z (Value angle) = +rotate3d valX valY valZ (Value angle) = Value ("rotate3d(" ++ String.fromFloat valX ++ "," ++ String.fromFloat valY ++ "," - ++ String.fromFloat z + ++ String.fromFloat valZ ++ "," ++ angle ++ ")" ) +{-| A vector consisting of three values. + +Sets the vector values in [`rotate2`](#rotate2). + + rotate2 (vec3 1 2 3) (deg 100) + +-} +vec3 : Float -> Float -> Float -> Value { provides | vec3 : Supported } +vec3 vec1Val vec2Val vec3Val = + Value + ( String.fromFloat vec1Val + ++ " " + ++ String.fromFloat vec2Val + ++ " " + ++ String.fromFloat vec3Val + ) + +{-| Sets `z` value for usage with [`rotate2`](#rotate2). + + rotate z (deg 100) + +-} +z : Value { provides | z : Supported } +z = + Value "z" + -- PERSPECTIVE @@ -13725,20 +13866,26 @@ scrollSnapType (Value val) = AppendProperty ("scroll-snap-type:" ++ val) -{-| Sets `x` value for usage with [`scrollSnapType2`](#scrollSnapType2). +{-| Sets `x` value for usage with [`scrollSnapType2`](#scrollSnapType2) +and [`rotate2`](#rotate2). scrollSnapType2 x mandatory + rotate x (deg 10) + -} x : Value { provides | x : Supported } x = Value "x" -{-| Sets `y` value for usage with [`scrollSnapType2`](#scrollSnapType2). +{-| Sets `y` value for usage with [`scrollSnapType2`](#scrollSnapType2) +and [`rotate2`](#rotate2). scrollSnapType2 y mandatory + rotate y (deg 50) + -} y : Value { provides | y : Supported } y = From 9d0ae6a795554b44a211a7a9af0e7c03b3990252 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 17:38:51 +0000 Subject: [PATCH 29/45] Adds overlap information to scale_ and scale2_ --- src/Css.elm | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index 034c008b..61dd61a7 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -11150,6 +11150,7 @@ scale3 (Value xVal) (Value yVal) (Value zVal) = transform (scale_ 0.7) +This is called `scale_` instead of `scale` because [`scale` is already a function](#scale). -} scale_ : Float -> Value { provides | scale_ : Supported } scale_ val = @@ -11160,6 +11161,7 @@ scale_ val = transform (scale2_ 0.7 0.7) +This is called `scale2_` instead of `scale2` because [`scale2` is already a function](#scale2). -} scale2_ : Float -> Float -> Value { provides | scale2_ : Supported } scale2_ valX valY = @@ -11320,7 +11322,7 @@ rotate2 (Value axisOrVecVal) (Value angleVal)= transform (rotate_ (deg 30)) -This is called `rotate_` instead of `rotate` because [`rotate` is already a function.](#rotate) +This is called `rotate_` instead of `rotate` because [`rotate` is already a function](#rotate). -} rotate_ : Value Angle From 256f5eb853b50877af70f5f9f1da79584e53a1f2 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 18:00:28 +0000 Subject: [PATCH 30/45] Adds various pseudo-elements Adds the folowing pseudo-elements: - ::backdrop - ::cue - ::marker - ::placeholder - ::selection --- src/Css.elm | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 4 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 61dd61a7..7f4bb4a5 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -11,7 +11,7 @@ module Css exposing , Color, ColorSupported, color, backgroundColor, hex, rgb, rgba, hsl, hsla, currentcolor , Time, TimeSupported, s, ms , pseudoClass, active, disabled - , pseudoElement, before, after + , pseudoElement, before, after, backdrop, cue, marker, placeholder, selection , width, minWidth, maxWidth, height, minHeight, maxHeight , minContent, maxContent, fitContent , backgroundAttachment, backgroundAttachments, scroll, local @@ -230,7 +230,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` ## Pseudo-Elements -@docs pseudoElement, before, after +@docs pseudoElement, before, after, backdrop, cue, marker, placeholder, selection ## Sizing @@ -2249,7 +2249,7 @@ pseudoElement element = div [ after [ content "hi!" ] ] ---TODO : Introduce aw way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`. +--TODO : Introduce a way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`. -} after : List Style -> Style @@ -2262,7 +2262,7 @@ after = div [ before [ content "hi!" ] ] ---TODO : Introduce aw way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`. +--TODO : Introduce a way to do [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) - lots of options there, not just text. Also it's overloaded with `flexBasis content`. -} before : List Style -> Style @@ -2270,6 +2270,74 @@ before = pseudoElement "before" +{-| A [`::backdrop`](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop) +[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). + + backdrop + [ background (rgba 255 0 0 0.25) + ] +-} +backdrop : List Style -> Style +backdrop = + pseudoElement "backdrop" + + +{-| A [`::cue`](https://developer.mozilla.org/en-US/docs/Web/CSS/::cue) +[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). + + cue + [ color (rgba 255 255 0 1) + , fontWeight (int 600) + ] +-} +cue : List Style -> Style +cue = + pseudoElement "cue" + +{-| A [`::marker`](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker) +[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). + + marker + [ color (rgba 255 255 0 1) + , fontWeight (int 600) + ] +-} +marker : List Style -> Style +marker = + pseudoElement "marker" + + +{-| A [`::placeholder`](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder) +[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). + +Be careful when using placeholders as they can compromise accessibility. + + placeholder + [ opacity (num 1) <| important + , color (rgb 90 90 90) + , fontWeight (int 300) + ] +] +-} +placeholder : List Style -> Style +placeholder = + pseudoElement "placeholder" + + +{-| A [`::selection`](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection) +[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). + + selection + [ backgroundColor (rgb 200 140 15) + ] + + +-} +selection : List Style -> Style +selection = + pseudoElement "selection" + + -- NUMBERS -- From c0d2c8a72ffe9c12054cc03fa4d4bceea0444dd7 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 21 Nov 2021 18:16:52 +0000 Subject: [PATCH 31/45] Code and documentation fixes - Keeps active, disabled and after DRY. - Makes a doc I just made make a little more sense. --- src/Css.elm | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 7f4bb4a5..0e85ba4f 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -2204,7 +2204,7 @@ pseudoClass pseudoClassName = -} active : List Style -> Style active = - Preprocess.ExtendSelector (Structure.PseudoClassSelector "active") + pseudoClass "active" {-| A [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled) @@ -2215,7 +2215,7 @@ active = -} disabled : List Style -> Style disabled = - Preprocess.ExtendSelector (Structure.PseudoClassSelector "disabled") + pseudoClass "disabled" @@ -2254,7 +2254,7 @@ pseudoElement element = -} after : List Style -> Style after = - Preprocess.WithPseudoElement (Structure.PseudoElement "after") + pseudoElement "after" {-| A [`::before`](https://css-tricks.com/almanac/selectors/a/after-and-before/) @@ -2315,7 +2315,7 @@ Be careful when using placeholders as they can compromise accessibility. placeholder [ opacity (num 1) <| important , color (rgb 90 90 90) - , fontWeight (int 300) + , fontWeight (int 400) ] ] -} From a953ca5d059af164475f1d2cd2bce7bcf8e81370 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 22 Nov 2021 06:36:53 +0000 Subject: [PATCH 32/45] Adds many pseudo-classes Adds the following pseudo-classes: - :checked - :empty - :enabled - :first-child - :first-of-type - :focus - :fullscreen - :hover - :in-range - :indeterminate - :invalid - :last-child - :last-of-type - :link - :only-child - :only-of-type - :out-of-range - :read-only - :read-write - :required - :root - :scope - :target - :valid - :visited --- src/Css.elm | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 316 insertions(+), 2 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 0e85ba4f..32d5f4bc 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -10,7 +10,11 @@ module Css exposing , calc, CalcOperation, minus, plus, times, dividedBy , Color, ColorSupported, color, backgroundColor, hex, rgb, rgba, hsl, hsla, currentcolor , Time, TimeSupported, s, ms - , pseudoClass, active, disabled + , pseudoClass, active, checked, disabled, empty, enabled + , firstChild, firstOfType, focus, fullscreen, hover, inRange + , indeterminate, invalid, lastChild, lastOfType, link, onlyChild + , onlyOfType, outOfRange, readOnly, readWrite, required + , root, scope, target, valid, visited , pseudoElement, before, after, backdrop, cue, marker, placeholder, selection , width, minWidth, maxWidth, height, minHeight, maxHeight , minContent, maxContent, fitContent @@ -225,7 +229,11 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` ## Pseudo-Classes -@docs pseudoClass, active, disabled +@docs pseudoClass, active, checked, disabled, empty, enabled +@docs firstChild, firstOfType, focus, fullscreen, hover, inRange +@docs indeterminate, invalid, lastChild, lastOfType, link, onlyChild +@docs onlyOfType, outOfRange, readOnly, readWrite, required +@docs root, scope, target, valid, visited ## Pseudo-Elements @@ -2207,6 +2215,20 @@ active = pseudoClass "active" +{-| A [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + +This pseudo-class is for any checkbox, option or radio input that is checked or toggled on. + + checked + [ backgroundColor (rgb 0 0 255) + ] +-} +checked : List Style -> Style +checked = + pseudoClass "checked" + + {-| A [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled) [pseudo-class](https://css-tricks.com/pseudo-class-selectors/). @@ -2218,6 +2240,298 @@ disabled = pseudoClass "disabled" +{-| An [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + empty + [ backgroundColor (rgb 20 20 20) + ] + +-} +empty : List Style -> Style +empty = + pseudoClass "empty" + + +{-| An [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + enabled + [ borderColor (rgba 150 150 0 0.5) + ] +-} +enabled : List Style -> Style +enabled = + pseudoClass "enabled" + + +{-| A [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + firstChild + [ fontWeight bold + ] +-} +firstChild : List Style -> Style +firstChild = + pseudoClass "first-child" + + +{-| A [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + firstOfType + [ color (rgb 255 0 0) + ] +-} +firstOfType : List Style -> Style +firstOfType = + pseudoClass "first-of-type" + + +{-| A [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + focus + [ border3 (px 2) solid (rgb 0 0 0) + ] +-} +focus : List Style -> Style +focus = + pseudoClass "focus" + + +{-| A [`:fullscreen`](https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + fullscreen + [ backgroundColor (rgb 0 0 0) + ] +-} +fullscreen : List Style -> Style +fullscreen = + pseudoClass "fullscreen" + + +{-| A [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + hover + [ fontWeight bold + , color (rgb 255 50 0) + ] +-} +hover : List Style -> Style +hover = + pseudoClass "hover" + + +{-| An [`:in-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + inRange + [ backgroundColor (rgb 0 255 0) + ] +-} +inRange : List Style -> Style +inRange = + pseudoClass "in-range" + + +{-| An [`:indeterminate`](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + indeterminate + [ backgroundColor (rgb 100 100 100) + ] +-} +indeterminate : List Style -> Style +indeterminate = + pseudoClass "indeterminate" + + +{-| An [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + invalid + [ color (rgb 255 0 0) + , fontWeight bold + ] +-} +invalid : List Style -> Style +invalid = + pseudoClass "invalid" + + +{-| A [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + lastChild + [ backgroundColor (rgb 0 0 255) + ] +-} +lastChild : List Style -> Style +lastChild = + pseudoClass "last-child" + + +{-| A [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + lastOfType + [ color (rgb 100 100 100) + ] +-} +lastOfType : List Style -> Style +lastOfType = + pseudoClass "last-of-type" + + +{-| A [`:link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:link) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + link + [ color (rgb 0 0 255) + ] +-} +link : List Style -> Style +link = + pseudoClass "link" + + +{-| An [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + onlyChild + [ backgroundColor (rgb 255 255 255) + ] +-} +onlyChild : List Style -> Style +onlyChild = + pseudoClass "only-child" + + +{-| An [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + onlyOfType + [ color (rgb 255 0 0) + , fontStyle italic + ] +-} +onlyOfType : List Style -> Style +onlyOfType = + pseudoClass "only-of-type" + + +{-| An [`:out-of-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + outOfRange + [ color (rgb 255 0 0) + ] +-} +outOfRange : List Style -> Style +outOfRange = + pseudoClass "out-of-range" + + +{-| A [`:read-only`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + readOnly + [ color (rgb 50 50 50) + ] +-} +readOnly : List Style -> Style +readOnly = + pseudoClass "read-only" + + +{-| A [`:read-write`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + readWrite + [ backgroundColor (rgb 0 50 150) + ] +-} +readWrite : List Style -> Style +readWrite = + pseudoClass "read-write" + + +{-| A [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + required + [ border (px 2) solid (rgb 100 100 100) + ] +-} +required : List Style -> Style +required = + pseudoClass "required" + + +{-| A [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + root + [ backgroundColor (rgb 0 200 200) + ] +-} +root : List Style -> Style +root = + pseudoClass "root" + + +{-| A [`:scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + scope + [ backgroundColor (rgb 0 200 200) + ] +-} +scope : List Style -> Style +scope = + pseudoClass "scope" + + +{-| A [`:target`](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + target + [ fontWeight bold + , border3 (px 2) dotted (rgb 255 0 0) + ] +-} +target : List Style -> Style +target = + pseudoClass "target" + + +{-| A [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + valid + [ border3 (px 1) solid (rgb 0 255 0) + ] +-} +valid : List Style -> Style +valid = + pseudoClass "valid" + + +{-| A [`:visited`](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited) +[pseudo-class](https://css-tricks.com/pseudo-class-selectors/). + + visited + [ color (rgb 150 0 255) + ] +-} +visited : List Style -> Style +visited = + pseudoClass "visited" + -- PSEUDO-ELEMENTS-- From f8bb76749b09f2636257511b88d90e3567532c1a Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 22 Nov 2021 06:38:24 +0000 Subject: [PATCH 33/45] Applies elm-format Applies elm-format to recent changes. --- src/Css.elm | 79 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 62 insertions(+), 17 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 32d5f4bc..c3d96522 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -2223,6 +2223,7 @@ This pseudo-class is for any checkbox, option or radio input that is checked or checked [ backgroundColor (rgb 0 0 255) ] + -} checked : List Style -> Style checked = @@ -2259,6 +2260,7 @@ empty = enabled [ borderColor (rgba 150 150 0 0.5) ] + -} enabled : List Style -> Style enabled = @@ -2271,6 +2273,7 @@ enabled = firstChild [ fontWeight bold ] + -} firstChild : List Style -> Style firstChild = @@ -2283,6 +2286,7 @@ firstChild = firstOfType [ color (rgb 255 0 0) ] + -} firstOfType : List Style -> Style firstOfType = @@ -2295,6 +2299,7 @@ firstOfType = focus [ border3 (px 2) solid (rgb 0 0 0) ] + -} focus : List Style -> Style focus = @@ -2307,6 +2312,7 @@ focus = fullscreen [ backgroundColor (rgb 0 0 0) ] + -} fullscreen : List Style -> Style fullscreen = @@ -2315,11 +2321,12 @@ fullscreen = {-| A [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) [pseudo-class](https://css-tricks.com/pseudo-class-selectors/). - + hover [ fontWeight bold , color (rgb 255 50 0) ] + -} hover : List Style -> Style hover = @@ -2332,6 +2339,7 @@ hover = inRange [ backgroundColor (rgb 0 255 0) ] + -} inRange : List Style -> Style inRange = @@ -2344,6 +2352,7 @@ inRange = indeterminate [ backgroundColor (rgb 100 100 100) ] + -} indeterminate : List Style -> Style indeterminate = @@ -2357,6 +2366,7 @@ indeterminate = [ color (rgb 255 0 0) , fontWeight bold ] + -} invalid : List Style -> Style invalid = @@ -2369,6 +2379,7 @@ invalid = lastChild [ backgroundColor (rgb 0 0 255) ] + -} lastChild : List Style -> Style lastChild = @@ -2381,6 +2392,7 @@ lastChild = lastOfType [ color (rgb 100 100 100) ] + -} lastOfType : List Style -> Style lastOfType = @@ -2393,6 +2405,7 @@ lastOfType = link [ color (rgb 0 0 255) ] + -} link : List Style -> Style link = @@ -2405,6 +2418,7 @@ link = onlyChild [ backgroundColor (rgb 255 255 255) ] + -} onlyChild : List Style -> Style onlyChild = @@ -2418,6 +2432,7 @@ onlyChild = [ color (rgb 255 0 0) , fontStyle italic ] + -} onlyOfType : List Style -> Style onlyOfType = @@ -2430,6 +2445,7 @@ onlyOfType = outOfRange [ color (rgb 255 0 0) ] + -} outOfRange : List Style -> Style outOfRange = @@ -2442,6 +2458,7 @@ outOfRange = readOnly [ color (rgb 50 50 50) ] + -} readOnly : List Style -> Style readOnly = @@ -2454,6 +2471,7 @@ readOnly = readWrite [ backgroundColor (rgb 0 50 150) ] + -} readWrite : List Style -> Style readWrite = @@ -2466,6 +2484,7 @@ readWrite = required [ border (px 2) solid (rgb 100 100 100) ] + -} required : List Style -> Style required = @@ -2478,6 +2497,7 @@ required = root [ backgroundColor (rgb 0 200 200) ] + -} root : List Style -> Style root = @@ -2490,6 +2510,7 @@ root = scope [ backgroundColor (rgb 0 200 200) ] + -} scope : List Style -> Style scope = @@ -2503,6 +2524,7 @@ scope = [ fontWeight bold , border3 (px 2) dotted (rgb 255 0 0) ] + -} target : List Style -> Style target = @@ -2515,6 +2537,7 @@ target = valid [ border3 (px 1) solid (rgb 0 255 0) ] + -} valid : List Style -> Style valid = @@ -2527,12 +2550,14 @@ valid = visited [ color (rgb 150 0 255) ] + -} visited : List Style -> Style visited = pseudoClass "visited" + -- PSEUDO-ELEMENTS-- @@ -2590,6 +2615,7 @@ before = backdrop [ background (rgba 255 0 0 0.25) ] + -} backdrop : List Style -> Style backdrop = @@ -2603,11 +2629,13 @@ backdrop = [ color (rgba 255 255 0 1) , fontWeight (int 600) ] + -} cue : List Style -> Style cue = pseudoElement "cue" + {-| A [`::marker`](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker) [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). @@ -2615,6 +2643,7 @@ cue = [ color (rgba 255 255 0 1) , fontWeight (int 600) ] + -} marker : List Style -> Style marker = @@ -2631,7 +2660,9 @@ Be careful when using placeholders as they can compromise accessibility. , color (rgb 90 90 90) , fontWeight (int 400) ] + ] + -} placeholder : List Style -> Style placeholder = @@ -2644,7 +2675,7 @@ placeholder = selection [ backgroundColor (rgb 200 140 15) ] - + -} selection : List Style -> Style @@ -11476,6 +11507,7 @@ a `num` that will scale the element by both X and Y axes scale2 (num 1) (num 3) scale3 (num 1) (num 3) (num 4) + -} scale : BaseValue @@ -11493,14 +11525,16 @@ This two-argument version lets you specify scaling in X and Y axes (equivalent to [`scale2_`](#scale2_)). scale2 (num 1) (num 3) + -} scale2 : Value { num : Supported } - -> Value - { num : Supported - } + -> + Value + { num : Supported + } -> Style scale2 (Value xVal) (Value yVal) = AppendProperty ("scale:" ++ xVal ++ " " ++ yVal) @@ -11512,17 +11546,20 @@ This three-argument version lets you specify scaling in X, Y and Z axes (equivalent to [`scale3d`](#scale3d)). scale3 (num 1) (num 3) (num 4) + -} scale3 : Value { num : Supported } - -> Value - { num : Supported - } - -> Value - { num : Supported - } + -> + Value + { num : Supported + } + -> + Value + { num : Supported + } -> Style scale3 (Value xVal) (Value yVal) (Value zVal) = AppendProperty ("scale:" ++ xVal ++ " " ++ yVal ++ " " ++ zVal) @@ -11533,6 +11570,7 @@ scale3 (Value xVal) (Value yVal) (Value zVal) = transform (scale_ 0.7) This is called `scale_` instead of `scale` because [`scale` is already a function](#scale). + -} scale_ : Float -> Value { provides | scale_ : Supported } scale_ val = @@ -11544,6 +11582,7 @@ scale_ val = transform (scale2_ 0.7 0.7) This is called `scale2_` instead of `scale2` because [`scale2` is already a function](#scale2). + -} scale2_ : Float -> Float -> Value { provides | scale2_ : Supported } scale2_ valX valY = @@ -11650,6 +11689,7 @@ skewY (Value angle) = -- ROTATION + {-| The [`rotate`](https://css-tricks.com/almanac/properties/r/rotate/) property. This one-argument version lets you set a global variable, `none`, or angle. @@ -11665,6 +11705,7 @@ This one-argument version lets you set a global variable, `none`, or angle. rotate2 y (deg 100) rotate2 (vec3 1 2 10) (deg 100) + -} rotate : BaseValue @@ -11686,6 +11727,7 @@ This two-argument version lets you set an axis or a vector, then an angle value. rotate2 y (deg 100) rotate2 (vec3 1 2 10) (deg 100) + -} rotate2 : Value @@ -11696,7 +11738,7 @@ rotate2 : } -> Value Angle -> Style -rotate2 (Value axisOrVecVal) (Value angleVal)= +rotate2 (Value axisOrVecVal) (Value angleVal) = AppendProperty ("rotate:" ++ axisOrVecVal ++ " " ++ angleVal) @@ -11705,6 +11747,7 @@ rotate2 (Value axisOrVecVal) (Value angleVal)= transform (rotate_ (deg 30)) This is called `rotate_` instead of `rotate` because [`rotate` is already a function](#rotate). + -} rotate_ : Value Angle @@ -11784,13 +11827,14 @@ Sets the vector values in [`rotate2`](#rotate2). vec3 : Float -> Float -> Float -> Value { provides | vec3 : Supported } vec3 vec1Val vec2Val vec3Val = Value - ( String.fromFloat vec1Val - ++ " " - ++ String.fromFloat vec2Val - ++ " " - ++ String.fromFloat vec3Val + (String.fromFloat vec1Val + ++ " " + ++ String.fromFloat vec2Val + ++ " " + ++ String.fromFloat vec3Val ) + {-| Sets `z` value for usage with [`rotate2`](#rotate2). rotate z (deg 100) @@ -11801,6 +11845,7 @@ z = Value "z" + -- PERSPECTIVE From 12ef623855782db99e0541acecf4737f5d7b50a8 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Tue, 23 Nov 2021 08:29:33 +0000 Subject: [PATCH 34/45] Doc improvements for contain values - Noted that contain: style; is at-risk of being depreciated. --- src/Css.elm | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index c3d96522..f0feb07b 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -14925,10 +14925,12 @@ contain3 (Value value1) (Value value2) (Value value3) = {-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. This version uses all 4 multiple choice values that can be used with this -property, no values required. +property. Because there is only one possible combination, this does not take values. Equivalent to `contain: size layout style paint;`. +**Note: The `style` value is considered at-risk from being depreciated.** + contain4 -} @@ -14983,6 +14985,8 @@ For properties that can have effects on more than its element and descendenants, this indicates that those effects are contained by the containing element. +**This value is considered at-risk from being depreciated.** + contain style -} From 52812441bb3679281e18364fbf501cbc036c4e14 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Tue, 23 Nov 2021 11:49:49 +0000 Subject: [PATCH 35/45] Fixed missing issues from merge There were a series of conflicts and a few duplicate functions from the recent merge. This fixes those issues. --- src/Css.elm | 98 ++++++++++++++++++++++------------------------------- 1 file changed, 40 insertions(+), 58 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 82c635fd..127d4552 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -177,7 +177,7 @@ module Css exposing , pointerEvents , visiblePainted, visibleFill, visibleStroke, painted, stroke , resize, horizontal, vertical - , contain, contain2, contain3, contain4, strict, size, layout, style, paint + , contain, contain2, contain3, contain4, size, layout, style, paint ) {-| If you need something that `elm-css` does not support right now, the @@ -771,7 +771,7 @@ Multiple CSS properties use these values. @docs pointerEvents @docs visiblePainted, visibleFill, visibleStroke, painted, stroke @docs resize, horizontal, vertical -@docs contain, contain2, contain3, contain4, strict, size, layout, style, paint +@docs contain, contain2, contain3, contain4, size, layout, style, paint -} @@ -1385,8 +1385,8 @@ overflowY (Value val) = clip : Value { provides | clip : Supported } clip = Value "clip" - - + + {-| Sets [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block). overflowBlock visible @@ -3105,7 +3105,6 @@ placeholder = [ backgroundColor (rgb 200 140 15) ] - -} selection : List Style -> Style selection = @@ -5498,27 +5497,28 @@ fontVariantCaps (Value str) = {-| The `normal` value, which can be used with such properties as: -- [`fontVariantCaps`](#fontVariantCaps) -- [`whiteSpace`](#whiteSpace) -- [`wordBreak`](#wordBreak) -- [`columnGap`](#columnGap) -- [`zoom`](#zoom) -- [`animationDirection`](#animationDirection) -- [`alignItems`](#alignItems) -- [`lineBreak`](#lineBreak) + - [`fontVariantCaps`](#fontVariantCaps) + - [`whiteSpace`](#whiteSpace) + - [`wordBreak`](#wordBreak) + - [`columnGap`](#columnGap) + - [`zoom`](#zoom) + - [`animationDirection`](#animationDirection) + - [`alignItems`](#alignItems) + - [`lineBreak`](#lineBreak) +``` +alignItems normal - alignItems normal - - columnGap normal +columnGap normal - fontVariantCaps normal +fontVariantCaps normal - whiteSpace normal +whiteSpace normal - wordBreak normal +wordBreak normal - zoom normal +zoom normal +``` -} normal : Value { provides | normal : Supported } @@ -7000,16 +7000,16 @@ for the following properties: - [`objectFit`](#objectFit) (Replaced content is scaled to maintain proportions within the element's content box.) - [`userSelect`](#userSelect) (Lets selection start within the element but that selection will be contained within that element's bounds.) - [`overscrollBehavior`](#overscrollBehavior) (This means that default scroll overflow behavior -is observed inside the element, but scroll chaining will not happen to neighbouring elements.) + is observed inside the element, but scroll chaining will not happen to neighbouring elements.) +``` +backgroundSize contain_ - backgroundSize contain_ - - overscrollBehavior contain +overscrollBehavior contain +``` The value is called `contain_` instead of `contain` because [`contain`](#contain) is already a function. - -} contain_ : Value { provides | contain_ : Supported } contain_ = @@ -9095,8 +9095,8 @@ borderStartStartRadius2 : } ) -> Style -borderStartStartRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-start-start-radius:" ++ horizontal ++ " " ++ vertical) +borderStartStartRadius2 (Value horizontalValue) (Value verticalValue) = + AppendProperty ("border-start-start-radius:" ++ horizontalValue ++ " " ++ verticalValue) {-| Sets [`border-start-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius) property. @@ -9137,8 +9137,8 @@ borderStartEndRadius2 : } ) -> Style -borderStartEndRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-start-end-radius:" ++ horizontal ++ " " ++ vertical) +borderStartEndRadius2 (Value horizontalValue) (Value verticalValue) = + AppendProperty ("border-start-end-radius:" ++ horizontalValue ++ " " ++ verticalValue) {-| Sets [`border-end-start-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius) property. @@ -9179,8 +9179,8 @@ borderEndStartRadius2 : } ) -> Style -borderEndStartRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-end-start-radius:" ++ horizontal ++ " " ++ vertical) +borderEndStartRadius2 (Value horizontalValue) (Value verticalValue) = + AppendProperty ("border-end-start-radius:" ++ horizontalValue ++ " " ++ verticalValue) {-| Sets [`border-end-end-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius) property. @@ -9221,8 +9221,8 @@ borderEndEndRadius2 : } ) -> Style -borderEndEndRadius2 (Value horizontal) (Value vertical) = - AppendProperty ("border-end-end-radius:" ++ horizontal ++ " " ++ vertical) +borderEndEndRadius2 (Value horizontalValue) (Value verticalValue) = + AppendProperty ("border-end-end-radius:" ++ horizontalValue ++ " " ++ verticalValue) {-| Sets [`border-image-outset`](https://css-tricks.com/almanac/properties/b/border-image/) property. @@ -14095,16 +14095,6 @@ hangingPunctuation3 (Value val1) (Value val2) (Value val3) = AppendProperty ("hanging-punctuation:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) -{-| Sets `manual` value for usage with [`hyphens`](#hyphens). - - hyphens manual - --} -manual : Value { provides | manual : Supported } -manual = - Value "manual" - - {-| Sets [`hyphens`](https://css-tricks.com/almanac/properties/h/hyphens/) hyphens none @@ -14280,6 +14270,7 @@ textOverflow2 (Value startValue) (Value endValue) = lineBreak auto lineBreak strict + -} lineBreak : BaseValue @@ -14314,9 +14305,12 @@ ellipsis = Value "ellipsis" -{-| Sets `strict` value for usage with [`lineBreak`](#lineBreak). +{-| Sets `strict` value for usage with [`lineBreak`](#lineBreak) and [`contain`](#contain). + + contain strict lineBreak strict + -} strict : Value { provides | strict : Supported } strict = @@ -14326,11 +14320,13 @@ strict = {-| Sets `loose` value for usage with [`lineBreak`](#lineBreak). lineBreak loose + -} loose : Value { provides | loose : Supported } loose = Value "loose" + {-| Sets `pixelated` value for usage with [`imageRendering`](#imageRendering). imageRendering pixelated @@ -16348,20 +16344,6 @@ contain4 = AppendProperty "contain:size layout style paint" -{-| Sets the `strict` value for [`contain`](#contain). - -This indicates that all containment rules apart from `style` are applied. - -This is equivalent to `contain3 size layout paint`. - - contain strict - --} -strict : Value { provides | strict : Supported } -strict = - Value "strict" - - {-| Sets the `size` value for [`contain`](#contain). This indicates that the element can be sized without From 46b95ae810fc96afceb01b1d830eb8f1b37bef26 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 24 Nov 2021 11:40:11 +0000 Subject: [PATCH 36/45] Adds font-variant-east-asian - Added all possible implementations of font-variant-east-asian. - Added all possible values of font-variant-east-asian. - Changed the docs for fullWidth so it includes it's new use with fontVariantEastAsian. --- src/Css.elm | 212 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 211 insertions(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index 127d4552..692f7a4a 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -76,6 +76,7 @@ module Css exposing , fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, normal, semiExpanded, expanded, extraExpanded, ultraExpanded , fontFeatureSettings, fontFeatureSettingsList, featureTag, featureTag2 , fontVariantCaps, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps + , fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3, jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions , stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter @@ -482,6 +483,11 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontVariantCaps, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps +## Font Variant East Asian + +@docs fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3, jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth + + ## Font Variant Ligatures @docs fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual @@ -5587,6 +5593,201 @@ titlingCaps = +-- FONT VARIANT EAST ASIAN -- + + +{-| The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property. + +This property controls the use of alternative glyphs for East Asian scripts. + + fontVariantEastAsian normal + + fontVariantEastAsian2 ruby jis83 + + fontVariantEastAsian3 ruby jis90 fullWidth + +-} +fontVariantEastAsian : + BaseValue + { normal : Supported + , ruby : Supported + + -- variant values + , jis78 : Supported + , jis83 : Supported + , jis90 : Supported + , jis04 : Supported + , simplified : Supported + , traditional : Supported + + -- width values + , fullWidth : Supported + , proportionalWidth : Supported + } + -> Style +fontVariantEastAsian (Value val) = + AppendProperty ("font-variant-east-asian:" ++ val) + + +{-| The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property. + +This property controls the use of alternative glyphs for East Asian scripts. + + fontVariantEastAsian2 ruby jis83 + +-} +fontVariantEastAsian2 : + Value + { ruby : Supported + , jis78 : Supported + , jis83 : Supported + , jis90 : Supported + , jis04 : Supported + , simplified : Supported + , traditional : Supported + , fullWidth : Supported + , proportionalWidth : Supported + } + -> + Value + { ruby : Supported + , jis78 : Supported + , jis83 : Supported + , jis90 : Supported + , jis04 : Supported + , simplified : Supported + , traditional : Supported + , fullWidth : Supported + , proportionalWidth : Supported + } + -> Style +fontVariantEastAsian2 (Value val1) (Value val2) = + AppendProperty ("font-variant-east-asian:" ++ val1 ++ " " ++ val2) + + +{-| The [`font-variant-east-asian`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) property. + +This property controls the use of alternative glyphs for East Asian scripts. + + fontVariantEastAsian3 ruby jis90 fullWidth + +-} +fontVariantEastAsian3 : + Value + { ruby : Supported + } + -> + Value + { jis78 : Supported + , jis83 : Supported + , jis90 : Supported + , jis04 : Supported + , simplified : Supported + , traditional : Supported + } + -> + Value + { fullWidth : Supported + , proportionalWidth : Supported + } + -> Style +fontVariantEastAsian3 (Value rubyVal) (Value variantVal) (Value widthVal) = + AppendProperty ("font-variant-east-asian:" ++ rubyVal ++ " " ++ variantVal ++ " " ++ widthVal) + + +{-| Sets the [`jis78`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that the JIS X 0208:1978 standard for East Asian logographic glyphs +should be used. + + fontVariantEastAsian jis78 + +-} +jis78 : Value { provides | jis78 : Supported } +jis78 = + Value "jis78" + + +{-| Sets the [`jis83`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that the JIS X 0208:1983 standard for East Asian logographic glyphs +should be used. + + fontVariantEastAsian jis83 + +-} +jis83 : Value { provides | jis83 : Supported } +jis83 = + Value "jis83" + + +{-| Sets the [`jis90`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that the JIS X 0208:1990 standard for East Asian logographic glyphs +should be used. + + fontVariantEastAsian jis90 + +-} +jis90 : Value { provides | jis90 : Supported } +jis90 = + Value "jis90" + + +{-| Sets the [`jis04`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that the JIS X 0208:2004 standard for East Asian logographic glyphs +should be used. + + fontVariantEastAsian jis04 + +-} +jis04 : Value { provides | jis04 : Supported } +jis04 = + Value "jis04" + + +{-| Sets the [`simplified`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that no particular standard should be used for East Asian logographic glyphs +apart from them being simplified Chinese glyphs. + + fontVariantEastAsian simplified + +-} +simplified : Value { provides | simplified : Supported } +simplified = + Value "simplified" + + +{-| Sets the [`traditional`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This specifies that no particular standard should be used for East Asian logographic glyphs +apart from them being traditional Chinese glyphs. + + fontVariantEastAsian traditional + +-} +traditional : Value { provides | traditional : Supported } +traditional = + Value "traditional" + + +{-| Sets the [`proportional-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian#syntax) value for [`fontVariantEastAsian`](#fontVariantEastAsian). + +This activates the East Asian characters that vary in width. + +(As opposed to [`fullWidth`](#fullWidth), which specifies that they should roughly be the same width.) + + fontVariantEastAsian proportionalWidth + +-} +proportionalWidth : Value { provides | proportionalWidth : Supported } +proportionalWidth = + Value "proportional-width" + + + -- FONT VARIANT LIGATURES -- @@ -9772,10 +9973,19 @@ lowercase = Value "lowercase" -{-| A `full-width` value for the [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Syntax) property. +{-| A `full-width` value for: + +### [`textTransform`](#textTransform) +Forces the writing of characters in a square so they can be aligned in East Asian scripts. + +### [`fontVariantEastAsian`](#fontVariantEastAsian) +Activates the East Asian characters that are roughly be the same width. + textTransform fullWidth + fontVariantEastAsian fullWidth + -} fullWidth : Value { provides | fullWidth : Supported } fullWidth = From 2c5c5b4b9dc0466901d6760c2519657e807b5173 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Wed, 24 Nov 2021 12:32:58 +0000 Subject: [PATCH 37/45] Adds font-optical-sizing - Added the font-optical-sizing property. --- src/Css.elm | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/Css.elm b/src/Css.elm index 692f7a4a..f95ed7d3 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -79,6 +79,7 @@ module Css exposing , fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3, jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions + , fontOpticalSizing , stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter , url , CursorKeyword @@ -498,6 +499,11 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions +## Font Optical Sizing + +@docs fontOpticalSizing + + # Align Items @docs stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter @@ -6056,6 +6062,25 @@ stackedFractions = +-- FONT OPTICAL SIZING -- + + +{-| The [`font-optical-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) property. + + fontOpticalSizing none + +-} +fontOpticalSizing : + BaseValue + { none : Supported + , auto : Supported + } + -> Style +fontOpticalSizing (Value val) = + AppendProperty ("font-optical-sizing:" ++ val) + + + -- CURSOR -- @@ -9975,12 +10000,15 @@ lowercase = {-| A `full-width` value for: + ### [`textTransform`](#textTransform) + Forces the writing of characters in a square so they can be aligned in East Asian scripts. + ### [`fontVariantEastAsian`](#fontVariantEastAsian) -Activates the East Asian characters that are roughly be the same width. +Activates the East Asian characters that are roughly be the same width. textTransform fullWidth From 37a70a372103ce992fd63a1297bc90193ce4853a Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sat, 27 Nov 2021 11:33:16 +0000 Subject: [PATCH 38/45] More font properties Implements the following: - font-kerning - font-language-override - font-synthesis (1, 2 and 3-argument variants) - font-variant-position Other changes: - made contain4 a normal property because I figured it would be more readable to have explicit CSS values rather than implicit ones. --- src/Css.elm | 226 +++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 199 insertions(+), 27 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index f95ed7d3..91d68d61 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -79,7 +79,7 @@ module Css exposing , fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3, jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions - , fontOpticalSizing + , fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition , stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter , url , CursorKeyword @@ -501,7 +501,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox ## Font Optical Sizing -@docs fontOpticalSizing +@docs fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition # Align Items @@ -1032,19 +1032,24 @@ type alias Time = TimeSupported {} -{-| Produces an [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string) +{-| Produces a [`string`](https://developer.mozilla.org/en-US/docs/Web/CSS/string) value used by properties such as: - - [`listStyle`](#listStyle), + - [`listStyle`](#listStyle) - [`listStyleType`](#listStyleType) - [`quotes2`](#quotes2) + - [`fontLanguageOverride`](#fontLanguageOverride) + + listStyleType (string "> ") quotes2 (string "«") (string "»") + fontLanguageOverride (string "ENG") + -} string : String -> Value { provides | string : Supported } string = @@ -5510,6 +5515,8 @@ fontVariantCaps (Value str) = {-| The `normal` value, which can be used with such properties as: - [`fontVariantCaps`](#fontVariantCaps) + - [`fontKerning`](#fontKerning) + - [`fontLanguageOverride`](#fontLanguageOverride) - [`whiteSpace`](#whiteSpace) - [`wordBreak`](#wordBreak) - [`columnGap`](#columnGap) @@ -5518,6 +5525,7 @@ fontVariantCaps (Value str) = - [`alignItems`](#alignItems) - [`lineBreak`](#lineBreak) + ``` alignItems normal @@ -5538,10 +5546,13 @@ normal = Value "normal" -{-| The `small-caps` [`font-variant-caps` value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Values). +{-| The `small-caps` value used in + - [`fontVariantCaps`](#fontVariantCaps) + - [`fontSynthesis`](#fontSynthesis) fontVariantCaps smallCaps + fontSynthesis2 smallCaps style -} smallCaps : Value { provides | smallCaps : Supported } smallCaps = @@ -6065,10 +6076,123 @@ stackedFractions = -- FONT OPTICAL SIZING -- +{-| The [`font-kerning`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) property. + + fontKerning none +-} +fontKerning : + BaseValue + { none : Supported + , auto : Supported + , normal : Supported + } + -> Style +fontKerning (Value val) = + AppendProperty ("font-kerning:" ++ val) + + +{-| The [`font-language-override`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override) property. + + fontLanguageOverride normal + + fontLanguageOverride (string "ENG") +-} +fontLanguageOverride : + BaseValue + { normal : Supported + , string : Supported + } + -> Style +fontLanguageOverride (Value val) = + AppendProperty ("font-language-override:" ++ val) + + +{-| The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property. + + fontSynthesis none + + fontSynthesis smallCaps + + fontSynthesis2 smallCaps weight + + fontSynthesis3 weight style smallCaps +-} +fontSynthesis : + BaseValue + { none : Supported + , weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Style +fontSynthesis (Value val) = + AppendProperty ("font-synthesis:" ++ val) + + +{-| The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property. + +This is the two-argument variant, in which you can indicate +two different font properties to be synthesised by the browser. + + fontSynthesis2 smallCaps weight +-} +fontSynthesis2 : + Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Style +fontSynthesis2 (Value val1) (Value val2) = + AppendProperty ("font-synthesis:" ++ val1 ++ " " ++ val2) + + +{-| The [`font-synthesis`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis) property. + +This is the three-argument variant, in which you can indicate +all three different font properties to be synthesised by the browser. + + fontSynthesis3 weight style smallCaps +-} +fontSynthesis3 : + Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> Style +fontSynthesis3 (Value val1) (Value val2) (Value val3) = + AppendProperty ("font-synthesis:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) + + +{-| The `weight` value for the [`fontSynthesis`](#fontSynthesis) property. + + fontSynthesis weight +-} +weight : Value { provides | weight : Supported } +weight = + Value "weight" + + + {-| The [`font-optical-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) property. fontOpticalSizing none - -} fontOpticalSizing : BaseValue @@ -6080,6 +6204,22 @@ fontOpticalSizing (Value val) = AppendProperty ("font-optical-sizing:" ++ val) +{-| The [`font-variant-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position) property. + + fontVariantPosition sub + + fontVariantPosition normal +-} +fontVariantPosition : + BaseValue + { normal : Supported + , sub : Supported + , super : Supported + } + -> Style +fontVariantPosition (Value val) = + AppendProperty ("font-variant-position:" ++ val) + -- CURSOR -- @@ -10000,16 +10140,13 @@ lowercase = {-| A `full-width` value for: - ### [`textTransform`](#textTransform) - Forces the writing of characters in a square so they can be aligned in East Asian scripts. - ### [`fontVariantEastAsian`](#fontVariantEastAsian) - Activates the East Asian characters that are roughly be the same width. + textTransform fullWidth fontVariantEastAsian fullWidth @@ -10575,7 +10712,13 @@ verticalAlign (Value str) = AppendProperty ("vertical-align:" ++ str) -{-| A `sub` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property. +{-| A `sub` value for the following properties: + + - [`fontVariantPosition](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) + + + fontVariantPosition sub verticalAlign sub @@ -10585,8 +10728,14 @@ sub = Value "sub" -{-| A `super` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property. +{-| A `super` value for the following properties: + + - [`fontVariantPosition](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) + + fontVariantPosition super + verticalAlign super -} @@ -16567,19 +16716,44 @@ contain3 (Value value1) (Value value2) (Value value3) = {-| The [`contain`](https://css-tricks.com/almanac/properties/c/contain/) property. -This version uses all 4 multiple choice values that can be used with this -property. Because there is only one possible combination, this does not take values. +This two-argument version lets you use all 4 multiple choice values you +can use for this property. -Equivalent to `contain: size layout style paint;`. + contain4 size layout style paint **Note: The `style` value is considered at-risk from being depreciated.** - - contain4 - -} -contain4 : Style -contain4 = - AppendProperty "contain:size layout style paint" +contain4 : + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> + Value + { size : Supported + , layout : Supported + , style : Supported + , paint : Supported + } + -> Style +contain4 (Value value1) (Value value2) (Value value3) (Value value4) = + AppendProperty ("contain:" ++ value1 ++ " " ++ value2 ++ " " ++ value3 ++ " " ++ value4) {-| Sets the `size` value for [`contain`](#contain). @@ -16608,16 +16782,14 @@ layout = Value "layout" -{-| Sets the `style` value for [`contain`](#contain). - -For properties that can have effects on more than its -element and descendenants, this indicates that those effects -are contained by the containing element. +{-| Sets the `style` value for: -**This value is considered at-risk from being depreciated.** + - [`contain`](#contain). **(This value is considered at-risk from being depreciated for this property.)** + - [`fontSynthesis`](#fontSynthesis) contain style + fontSynthesis style -} style : Value { provides | style : Supported } style = From b0f618d6284f612f049f1d985328fab3f0d38591 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 5 Dec 2021 21:26:49 +0000 Subject: [PATCH 39/45] Grouping more shared values 1 Cleaning up by moving values shared across different types of properties into the 'Shared Values' section. These values also have updated documentation to these the properties that use them. Moved values: - start - end - left_ - right_ - top_ - bottom_ - baseline - clip - block - inline - ruby Pre-existing values in the shared category have also had updated documentation. Some documentation to other values have had lightly improved grammar. --- src/Css.elm | 481 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 300 insertions(+), 181 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 91d68d61..e9077e24 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -46,7 +46,7 @@ module Css exposing , borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4 , outline, outline3, outlineWidth, outlineColor, invert, outlineStyle, outlineOffset , display, display2, displayListItem2, displayListItem3 - , block, flex_, flow, flowRoot, grid, contents, listItem, inline, inlineBlock, inlineFlex, inlineTable, inlineGrid, ruby, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup + , flex_, flow, flowRoot, grid, contents, listItem, inlineBlock, inlineFlex, inlineTable, inlineGrid, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup , position, zIndex , absolute, fixed, relative, static, sticky , inset, inset2, inset3, inset4, top, right, bottom, left @@ -80,7 +80,7 @@ module Css exposing , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions , fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition - , stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter + , stretch, center, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter , url , CursorKeyword , cursor, cursor2, cursor4, pointer, default, contextMenu, help, progress, wait, cell @@ -94,7 +94,9 @@ module Css exposing , auto, none , hidden, visible , contentBox, borderBox - , overflow, overflowX, overflowY, overflowBlock, overflowInline, clip + , left_, right_, top_, bottom_, block, inline, start, end + , baseline, clip, ruby + , overflow, overflowX, overflowY, overflowBlock, overflowInline , overflowAnchor , overflowWrap , breakWord, anywhere @@ -354,7 +356,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs display, display2, displayListItem2, displayListItem3 -@docs block, flex_, flow, flowRoot, grid, contents, listItem, inline, inlineBlock, inlineFlex, inlineTable, inlineGrid, ruby, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup +@docs flex_, flow, flowRoot, grid, contents, listItem, inlineBlock, inlineFlex, inlineTable, inlineGrid, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup ## Positions @@ -506,7 +508,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox # Align Items -@docs stretch, center, start, end, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, left_, right_, top_, bottom_, baseline, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter +@docs stretch, center, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter # Url @@ -540,11 +542,13 @@ Multiple CSS properties use these values. @docs auto, none @docs hidden, visible @docs contentBox, borderBox +@docs left_, right_, top_, bottom_, block, inline, start, end +@docs baseline, clip, ruby ## Overflow -@docs overflow, overflowX, overflowY, overflowBlock, overflowInline, clip +@docs overflow, overflowX, overflowY, overflowBlock, overflowInline @docs overflowAnchor @docs overflowWrap @@ -1200,7 +1204,7 @@ url str = Value ("url(" ++ str ++ ")") -{-| The `auto` value used for properties such as [`width`](#width), +{-| The `auto` value used in many properties such as [`width`](#width), [`zoom`](#zoom), [`outlineStyle`](#outlineStyle), and [`flexBasis`](#flexBasis). @@ -1217,7 +1221,7 @@ auto = Value "auto" -{-| The `none` value used for properties such as [`display`](#display), +{-| The `none` value used in many properties such as [`display`](#display), [`borderStyle`](#borderStyle), [`maxWidth`](#maxWidth), [`clear`](#clear), @@ -1278,9 +1282,13 @@ scroll = Value "scroll" -{-| The `content-box` value, used with [`boxSizing`](#boxSizing), -[`backgroundClip`](#backgroundClip), [`backgroundOrigin`](#backgroundOrigin), -and [`strokeOrigin`](#strokeOrigin). +{-| The `content-box` value, used in the following properties: + +- [`boxSizing`](#boxSizing) +- [`backgroundClip`](#backgroundClip) +- [`backgroundOrigin`](#backgroundOrigin) +- [`strokeOrigin`](#strokeOrigin) + boxSizing contentBox @@ -1296,9 +1304,13 @@ contentBox = Value "content-box" -{-| The `border-box` value, used with [`boxSizing`](#boxSizing), -[`backgroundClip`](#backgroundClip), [`backgroundOrigin`](backgroundOrigin), -and [`strokeOrigin`](#strokeOrigin). +{-| The `border-box` value, used in the following properties: + +- [`boxSizing`](#boxSizing) +- [`backgroundClip`](#backgroundClip) +- [`backgroundOrigin`](backgroundOrigin) +- [`strokeOrigin`](#strokeOrigin) + boxSizing borderBox @@ -1314,6 +1326,256 @@ borderBox = Value "border-box" +{-| The `left` value, used in many properties such as: + +- [`backgroundPosition`](#backgroundPosition) +- [`clear`](#clear) +- [`float`](#float) +- [`justifyContent`](#justifyContent) +- [`justifyItems`](#justifyItems) +- [`justifySelf`](#justifySelf) +- [`pageBreakAfter`](#pageBreakAfter) +- [`textAlign`](#textAlign) + + + backgroundPosition left_ + + clear left_ + + float left_ + + justifyContent left_ + + justifyItems left_ + + justifySelf left_ + + pageBreakAfter left_ + + textAlign left_ + + + +The value is called `left_` instead of `left` because [`left` is already a function](#left). + +-} +left_ : Value { provides | left_ : Supported } +left_ = + Value "left" + + +{-| The `right` value, used in many properties such as: + +- [`backgroundPosition`](#backgroundPosition) +- [`clear`](#clear) +- [`float`](#float) +- [`justifyContent`](#justifyContent) +- [`justifyItems`](#justifyItems) +- [`justifySelf`](#justifySelf) +- [`pageBreakAfter`](#pageBreakAfter) +- [`textAlign`](#textAlign) + + + backgroundPosition right_ + + clear right_ + + float right_ + + justifyContent right_ + + justifyItems right_ + + justifySelf right_ + + pageBreakAfter right_ + + textAlign right_ + + + +The value is called `right_` instead of `right` because [`right` is already a function](#right). + +-} +right_ : Value { provides | right_ : Supported } +right_ = + Value "right" + + +{-| The `top` value, used in the following properties: + +- [`backgroundPosition`](#backgroundPosition) +- [`captionSide`](#captionSide) +- [`objectPosition2`](#objectPosition2) +- [`perspectiveOrigin2`](#perspectiveOrigin2) +- [`strokePosition2`](#strokePosition2) +- [`transformOrigin`](#transformOrigin) +- [`verticalAlign`](#verticalAlign) + + + backgroundPosition top_ + + captionSide top_ + + objectPosition2 right_ top_ + + perspectiveOrigin2 left_ top_ + + transformOrigin top_ + + verticalAlign top_ + +The value is called `top_` instead of `top` because [`top` is already a function](#top). + +-} +top_ : Value { provides | top_ : Supported } +top_ = + Value "top" + + +{-| The `bottom` value, used in the following properties: + +- [`backgroundPosition`](#backgroundPosition) +- [`captionSide`](#captionSide) +- [`objectPosition2`](#objectPosition2) +- [`perspectiveOrigin2`](#perspectiveOrigin2) +- [`strokePosition2`](#strokePosition2) +- [`transformOrigin`](#transformOrigin) +- [`verticalAlign`](#verticalAlign) + + + backgroundPosition bottom_ + + captionSide bottom_ + + objectPosition2 right_ bottom_ + + perspectiveOrigin2 left_ bottom_ + + transformOrigin bottom_ + + verticalAlign bottom_ + +The value is called `bottom_` instead of `bottom` because [`bottom` is already a function](#bottom). + +-} +bottom_ : Value { provides | bottom_ : Supported } +bottom_ = + Value "bottom" + + +{-| The `block` value used by [`display`](#display) and [`resize`](#resize). + + display block + + resize block + +-} +block : Value { provides | block : Supported } +block = + Value "block" + + +{-| The `inline` value used by [`display`](#display) and [`resize`](#resize). + + display inline + + resize inline + +-} +inline : Value { provides | inline : Supported } +inline = + Value "inline" + + +{-| The `start` value, used in the following properties: + +- [`alignItems`](#alignItems) +- [`alignContent`](#alignContent) +- [`alignSelf`](#alignSelf) +- [`justifyContent`](#justifyContent) +- [`justifyItems`](#justifyItems) +- [`justifySelf`](#justifySelf) +- [`steps2`](#steps2) + + + alignContent start + + steps2 3 start + +-} +start : Value { provides | start : Supported } +start = + Value "start" + + +{-| The `end` value, used in the following properties: + +- [`alignItems`](#alignItems) +- [`alignContent`](#alignContent) +- [`alignSelf`](#alignSelf) +- [`justifyContent`](#justifyContent) +- [`justifyItems`](#justifyItems) +- [`justifySelf`](#justifySelf) +- [`steps2`](#steps2) + + + alignContent end + + steps2 3 end + +-} +end : Value { provides | end : Supported } +end = + Value "end" +{-| The `baseline` value, used in the following properties: + +- [`alignContent`](#alignContent) +- [`alignItems`](#alignItems) +- [`alignSelf`](#alignSelf) +- [`verticalAlign`](#verticalAlign) + + + alignItems baseline + + verticalAlign baseline + +-} + + +baseline : Value { provides | baseline : Supported } +baseline = + Value "baseline" + + +{-| The `clip` value used by [`overflow`](#overflow) and [`textOverflow`](#textOverflow). + + overflow clip + + overflowX clip + + overflowY clip + + textOverflow clip + +-} +clip : Value { provides | clip : Supported } +clip = + Value "clip" + + + +{-| The `ruby` value used by [`display`](#display) and [`fontVariantEastAsian`](#fontVariantEastAsian). + + display ruby + + fontVariantEastAsian2 ruby jis83 + +-} +ruby : Value { provides | ruby : Supported } +ruby = + Value "ruby" + -- OVERFLOW -- @@ -1390,19 +1652,6 @@ overflowY (Value val) = AppendProperty ("overflow-y:" ++ val) -{-| The `clip` value used by [`overflow`](#overflow). - - overflow clip - - overflowX clip - - overflowY clip - --} -clip : Value { provides | clip : Supported } -clip = - Value "clip" - {-| Sets [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block). @@ -3850,19 +4099,7 @@ displayListItem3 (Value displayOutside) (Value displayFlow) = AppendProperty ("display:list-item " ++ displayOutside ++ " " ++ displayFlow) -{-| The `block` value used by [`display`](#display) and [`resize`]. - - display block - - resize block - --} -block : Value { provides | block : Supported } -block = - Value "block" - - -{-| `flex` value use by [`display`](#display) +{-| The `flex` value used by [`display`](#display). display flex_ @@ -3874,7 +4111,7 @@ flex_ = Value "flex" -{-| The `flow` value used by [`display`](#display) +{-| The `flow` value used by [`display`](#display). display flow @@ -3884,7 +4121,7 @@ flow = Value "flow" -{-| The `flow-root` value used by [`display`](#display) +{-| The `flow-root` value used by [`display`](#display). display flowRoot @@ -3894,7 +4131,7 @@ flowRoot = Value "flow-root" -{-| The `grid` value used by [`display`](#display) +{-| The `grid` value used by [`display`](#display). display grid @@ -3904,7 +4141,7 @@ grid = Value "grid" -{-| The `contents` value used by [`display`](#display) +{-| The `contents` value used by [`display`](#display). display contents @@ -3914,19 +4151,7 @@ contents = Value "contents" -{-| The `inline` value used by [`display`](#display) and [`resize`]. - - display inline - - resize inline - --} -inline : Value { provides | inline : Supported } -inline = - Value "inline" - - -{-| The `inline-block` value used by [`display`](#display) +{-| The `inline-block` value used by [`display`](#display). display inlineBlock @@ -3936,7 +4161,7 @@ inlineBlock = Value "inline-block" -{-| The `inline-flex` value used by [`display`](#display) +{-| The `inline-flex` value used by [`display`](#display). display inlineFlex @@ -3946,7 +4171,7 @@ inlineFlex = Value "inline-flex" -{-| The `list-item` value used by [`display`](#display) +{-| The `list-item` value used by [`display`](#display). display listItem @@ -3956,7 +4181,7 @@ listItem = Value "list-item" -{-| The `inline-table` value used by [`display`](#display) +{-| The `inline-table` value used by [`display`](#display). display inlineTable @@ -3966,7 +4191,7 @@ inlineTable = Value "inline-table" -{-| The `inline-grid` value used by [`display`](#display) +{-| The `inline-grid` value used by [`display`](#display). display inlineGrid @@ -3976,17 +4201,7 @@ inlineGrid = Value "inline-grid" -{-| The `ruby` value used by [`display`](#display) - - display ruby - --} -ruby : Value { provides | ruby : Supported } -ruby = - Value "ruby" - - -{-| The `ruby-base` value used by [`display`](#display) +{-| The `ruby-base` value used by [`display`](#display). display rubyBase @@ -3996,7 +4211,7 @@ rubyBase = Value "ruby-base" -{-| The `ruby-base-container` value used by [`display`](#display) +{-| The `ruby-base-container` value used by [`display`](#display). display rubyBaseContainer @@ -4006,7 +4221,7 @@ rubyBaseContainer = Value "ruby-base-container" -{-| The `ruby-text` value used by [`display`](#display) +{-| The `ruby-text` value used by [`display`](#display). display rubyText @@ -4016,7 +4231,7 @@ rubyText = Value "ruby-text" -{-| The `ruby-text-container` value used by [`display`](#display) +{-| The `ruby-text-container` value used by [`display`](#display). display rubyTextContainer @@ -4026,7 +4241,7 @@ rubyTextContainer = Value "ruby-text-container" -{-| The `run-in` value used by [`display`](#display) +{-| The `run-in` value used by [`display`](#display). display runIn @@ -4036,7 +4251,7 @@ runIn = Value "run-in" -{-| The `table` value used by [`display`](#display) +{-| The `table` value used by [`display`](#display). display table @@ -4046,7 +4261,7 @@ table = Value "table" -{-| The `table-caption` value used by [`display`](#display) +{-| The `table-caption` value used by [`display`](#display). display tableCaption @@ -4056,7 +4271,7 @@ tableCaption = Value "table-caption" -{-| The `table-cell` value used by [`display`](#display) +{-| The `table-cell` value used by [`display`](#display). display tableCell @@ -4066,7 +4281,7 @@ tableCell = Value "table-cell" -{-| The `table-column` value used by [`display`](#display) +{-| The `table-column` value used by [`display`](#display). display tableColumn @@ -4076,7 +4291,7 @@ tableColumn = Value "table-column" -{-| The `table-column-group` value used by [`display`](#display) +{-| The `table-column-group` value used by [`display`](#display). display tableColumnGroup @@ -4086,7 +4301,7 @@ tableColumnGroup = Value "table-column-group" -{-| The `table-footer-group` value used by [`display`](#display) +{-| The `table-footer-group` value used by [`display`](#display). display tableFooterGroup @@ -4096,7 +4311,7 @@ tableFooterGroup = Value "table-footer-group" -{-| The `table-header-group` value used by [`display`](#display) +{-| The `table-header-group` value used by [`display`](#display). display tableHeaderGroup @@ -4106,7 +4321,7 @@ tableHeaderGroup = Value "table-header-group" -{-| The `table-row` value used by [`display`](#display) +{-| The `table-row` value used by [`display`](#display). display tableRow @@ -4116,7 +4331,7 @@ tableRow = Value "table-row" -{-| The `table-row-group` value used by [`display`](#display) +{-| The `table-row-group` value used by [`display`](#display). display tableRowGroup @@ -4142,41 +4357,6 @@ center = Value "center" -{-| The `start` value used for properties such as [`alignItems`](#alignItems), -[`alignContent`](#alignContent), -[`alignSelf`](#alignSelf), -[`justifyContent`](#justifyContent), -[`justifyItems`](#justifyItems), -[`justifySelf`](#justifySelf), -and [`steps2`](#steps2). - - alignContent start - - steps2 3 start - --} -start : Value { provides | start : Supported } -start = - Value "start" - - -{-| The `end` value used for properties such as [`alignItems`](#alignItems), -[`alignContent`](#alignContent), -[`alignSelf`](#alignSelf), -[`justifyContent`](#justifyContent), -[`justifyItems`](#justifyItems), -[`justifySelf`](#justifySelf), -and [`steps2`](#steps2). - - alignContent end - - steps2 3 end - --} -end : Value { provides | end : Supported } -end = - Value "end" - {-| The `flex-start` value used by [`alignItems`](#alignItems), [`justifyContent`](#justifyContent), @@ -4259,67 +4439,6 @@ spaceEvenly = Value "space-evenly" -{-| The `left` value used for alignment. - - float left_ - -The value is called `left_` instead of `left` because [`left` is already a function](#left). - --} -left_ : Value { provides | left_ : Supported } -left_ = - Value "left" - - -{-| The `right` value used for alignment. - - float right_ - -The value is called `right_` instead of `right` because [`right` is already a function](#right). - --} -right_ : Value { provides | right_ : Supported } -right_ = - Value "right" - - -{-| The `top` value used by [`verticalAlign`](#verticalAlign). - - verticalAlign top_ - -The value is called `top_` instead of `top` because [`top` is already a function](#top). - --} -top_ : Value { provides | top_ : Supported } -top_ = - Value "top" - - -{-| The `bottom` value used by [`verticalAlign`](#verticalAlign). - - verticalAlign bottom_ - -The value is called `bottom_` instead of `bottom` because [`bottom` is already a function](#bottom). - --} -bottom_ : Value { provides | bottom_ : Supported } -bottom_ = - Value "bottom" - - -{-| The `baseline` value used for properties such as [`alignContent`](#alignContent), -[`alignItems`](#alignItems), -[`alignSelf`](#alignSelf), -and [`verticalAlign`](#verticalAlign). - - alignItems baseline - --} -baseline : Value { provides | baseline : Supported } -baseline = - Value "baseline" - - {-| The `first baseline` value used for properties such as [`alignContent`](#alignContent), [`alignItems`](#alignItems), and [`alignSelf`](#alignSelf). From d601804c348cf1ab91c8d67e997353a0164c60b4 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Sun, 5 Dec 2021 23:07:43 +0000 Subject: [PATCH 40/45] Grouping more shared values 2 Bringing more values that should be in the shared section: - stretch (added documentation) - center (added documentation) - content (improved documentation) - normal - text (improved docs) - paddingBox - cover (improved docs) - contain_ Other stuff - Improved documentation for placeholder. - Added links to moved values in the Align Items section of the docs so the user knows that these are other values that can be used. - Simplified the wording in the documentation for repeat values to match the wording in other documentation for values. - Applied elm-format to previous commits. --- src/Css.elm | 697 +++++++++++++++++++++++++++++----------------------- 1 file changed, 391 insertions(+), 306 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index e9077e24..fad0195e 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -21,12 +21,11 @@ module Css exposing , minContent, maxContent, fitContent , backgroundAttachment, backgroundAttachments, scroll, local , backgroundBlendMode, backgroundBlendModes, multiply, screen, overlay, darken, lighten, colorDodge, colorBurn, hardLight, softLight, difference, exclusion, hue, saturation, color_, luminosity - , backgroundClip, backgroundClips, backgroundOrigin, backgroundOrigins, paddingBox + , backgroundClip, backgroundClips, backgroundOrigin, backgroundOrigins , ImageSupported, Image , backgroundImage, backgroundImages, backgroundPosition, backgroundPosition2, backgroundPosition3, backgroundPosition4, backgroundRepeat, backgroundRepeat2, backgroundSize, backgroundSize2 , linearGradient, linearGradient2, stop, stop2, stop3, toBottom, toBottomLeft, toBottomRight, toLeft, toRight, toTop, toTopLeft, toTopRight , repeat, noRepeat, repeatX, repeatY, space, round - , cover, contain_ , BoxShadowConfig, boxShadow, boxShadows, defaultBoxShadow , TextShadowConfig, textShadow, defaultTextShadow , LineWidth, LineWidthSupported, LineStyle, LineStyleSupported @@ -58,7 +57,7 @@ module Css exposing , alignContent, alignContent2, alignItems, alignItems2, alignSelf, alignSelf2, justifyContent, justifyContent2, justifyItems, justifyItems2, justifySelf, justifySelf2 , flexDirection, row, rowReverse, column, columnReverse , order - , flexGrow, flexShrink, flexBasis, content + , flexGrow, flexShrink, flexBasis , flexWrap, nowrap, wrap, wrapReverse , flex, flex2, flex3, flexFlow, flexFlow2 , wordSpacing @@ -73,29 +72,31 @@ module Css exposing , fontFamily, fontFamilies, serif, sansSerif, monospace, cursive, fantasy, systemUi , fontStyle, italic, oblique , fontWeight, bold, lighter, bolder - , fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, normal, semiExpanded, expanded, extraExpanded, ultraExpanded + , fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, semiExpanded, expanded, extraExpanded, ultraExpanded , fontFeatureSettings, fontFeatureSettingsList, featureTag, featureTag2 , fontVariantCaps, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps , fontVariantEastAsian, fontVariantEastAsian2, fontVariantEastAsian3, jis78, jis83, jis90, jis04, simplified, traditional, proportionalWidth , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions , fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition - , stretch, center, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter + , flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter , url , CursorKeyword , cursor, cursor2, cursor4, pointer, default, contextMenu, help, progress, wait, cell - , crosshair, text, verticalText, alias, copy, move, noDrop + , crosshair, verticalText, alias, copy, move, noDrop , notAllowed, allScroll, colResize, rowResize, nResize, eResize, sResize , wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize , neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing , ListStyleType, ListStyleTypeSupported , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, string, customIdent, listStyleImage , arabicIndic, armenian, bengali, cambodian, circle, cjkDecimal, cjkEarthlyBranch, cjkHeavenlyStem, cjkIdeographic, decimal, decimalLeadingZero, devanagari, disclosureClosed, disclosureOpen, disc, ethiopicNumeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiraganaIroha, japaneseFormal, japaneseInformal, kannada, katakana, katakanaIroha, khmer, koreanHangulFormal, koreanHanjaFormal, koreanHanjaInformal, lao, lowerAlpha, lowerArmenian, lowerGreek, lowerLatin, lowerRoman, malayalam, monogolian, myanmar, oriya, persian, simpChineseFormal, simpChineseInformal, tamil, telugu, thai, tibetan, tradChineseFormal, tradChineseInformal, upperAlpha, upperArmenian, upperLatin, upperRoman - , auto, none + , auto, none, normal , hidden, visible - , contentBox, borderBox + , contentBox, borderBox, paddingBox , left_, right_, top_, bottom_, block, inline, start, end , baseline, clip, ruby + , stretch, center, content, text + , cover, contain_ , overflow, overflowX, overflowY, overflowBlock, overflowInline , overflowAnchor , overflowWrap @@ -274,7 +275,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` ## Background Clip and Origin -@docs backgroundClip, backgroundClips, backgroundOrigin, backgroundOrigins, paddingBox +@docs backgroundClip, backgroundClips, backgroundOrigin, backgroundOrigins ## Background Image @@ -286,8 +287,6 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs repeat, noRepeat, repeatX, repeatY, space, round -@docs cover, contain_ - ## Box Shadow @@ -416,7 +415,9 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox ### Flexbox Sizing -@docs flexGrow, flexShrink, flexBasis, content +[`content`](#content) is also a supported value. + +@docs flexGrow, flexShrink, flexBasis ### Flexbox Wrapping @@ -471,7 +472,7 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox [`normal`](#normal) is also a supported font weight. -@docs fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, normal, semiExpanded, expanded, extraExpanded, ultraExpanded +@docs fontStretch, ultraCondensed, extraCondensed, condensed, semiCondensed, semiExpanded, expanded, extraExpanded, ultraExpanded ## Font Feature Settings @@ -508,7 +509,19 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox # Align Items -@docs stretch, center, flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter +Other values you can use for alignment than the ones listed in this section: + + - [`left_`](#left_) + - [`right_`](#right_) + - [`top_`](#top_) + - [`bottom_`](#bottom_) + - [`start`](#start) + - [`end`](#end) + - [`center`](#center) + - [`stretch`](#stretch) + - [`baseline`](#baseline) + +@docs flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter # Url @@ -518,9 +531,11 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox ## Cursors +[`text`](#text) is also a supported value. + @docs CursorKeyword @docs cursor, cursor2, cursor4, pointer, default, contextMenu, help, progress, wait, cell -@docs crosshair, text, verticalText, alias, copy, move, noDrop +@docs crosshair, verticalText, alias, copy, move, noDrop @docs notAllowed, allScroll, colResize, rowResize, nResize, eResize, sResize @docs wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize @docs neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing @@ -539,12 +554,13 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox Multiple CSS properties use these values. -@docs auto, none +@docs auto, none, normal @docs hidden, visible -@docs contentBox, borderBox +@docs contentBox, borderBox, paddingBox @docs left_, right_, top_, bottom_, block, inline, start, end @docs baseline, clip, ruby - +@docs stretch, center, content, text +@docs cover, contain_ ## Overflow @@ -1047,12 +1063,13 @@ value used by properties such as: - [`fontLanguageOverride`](#fontLanguageOverride) +``` +listStyleType (string "> ") - listStyleType (string "> ") - - quotes2 (string "«") (string "»") +quotes2 (string "«") (string "»") - fontLanguageOverride (string "ENG") +fontLanguageOverride (string "ENG") +``` -} string : String -> Value { provides | string : Supported } @@ -1242,6 +1259,39 @@ none = Value "none" +{-| The `normal` value, which can be used with such properties as: + + - [`fontVariantCaps`](#fontVariantCaps) + - [`fontKerning`](#fontKerning) + - [`fontLanguageOverride`](#fontLanguageOverride) + - [`whiteSpace`](#whiteSpace) + - [`wordBreak`](#wordBreak) + - [`columnGap`](#columnGap) + - [`zoom`](#zoom) + - [`animationDirection`](#animationDirection) + - [`alignItems`](#alignItems) + - [`lineBreak`](#lineBreak) + +``` +alignItems normal + +columnGap normal + +fontVariantCaps normal + +whiteSpace normal + +wordBreak normal + +zoom normal +``` + +-} +normal : Value { provides | normal : Supported } +normal = + Value "normal" + + {-| The `hidden` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`border style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). visibility hidden @@ -1282,21 +1332,22 @@ scroll = Value "scroll" -{-| The `content-box` value, used in the following properties: - -- [`boxSizing`](#boxSizing) -- [`backgroundClip`](#backgroundClip) -- [`backgroundOrigin`](#backgroundOrigin) -- [`strokeOrigin`](#strokeOrigin) +{-| The `content-box` value, used in the following properties: + - [`boxSizing`](#boxSizing) + - [`backgroundClip`](#backgroundClip) + - [`backgroundOrigin`](#backgroundOrigin) + - [`strokeOrigin`](#strokeOrigin) - boxSizing contentBox +``` +boxSizing contentBox - backgroundClip contentBox +backgroundClip contentBox - backgroundOrigin contentBox +backgroundOrigin contentBox - strokeOrigin contentBox +strokeOrigin contentBox +``` -} contentBox : Value { provides | contentBox : Supported } @@ -1306,19 +1357,20 @@ contentBox = {-| The `border-box` value, used in the following properties: -- [`boxSizing`](#boxSizing) -- [`backgroundClip`](#backgroundClip) -- [`backgroundOrigin`](backgroundOrigin) -- [`strokeOrigin`](#strokeOrigin) - + - [`boxSizing`](#boxSizing) + - [`backgroundClip`](#backgroundClip) + - [`backgroundOrigin`](backgroundOrigin) + - [`strokeOrigin`](#strokeOrigin) - boxSizing borderBox +``` +boxSizing borderBox - backgroundClip borderBox +backgroundClip borderBox - backgroundOrigin borderBox +backgroundOrigin borderBox - strokeOrigin borderBox +strokeOrigin borderBox +``` -} borderBox : Value { provides | borderBox : Supported } @@ -1326,35 +1378,50 @@ borderBox = Value "border-box" -{-| The `left` value, used in many properties such as: +{-| The `padding-box` value, used with [`backgroundClip`](#backgroundClip), +[`backgroundOrigin`](#backgroundOrigin), +and [`strokeOrigin`](#strokeOrigin). -- [`backgroundPosition`](#backgroundPosition) -- [`clear`](#clear) -- [`float`](#float) -- [`justifyContent`](#justifyContent) -- [`justifyItems`](#justifyItems) -- [`justifySelf`](#justifySelf) -- [`pageBreakAfter`](#pageBreakAfter) -- [`textAlign`](#textAlign) + backgroundClip paddingBox + backgroundOrigin paddingBox - backgroundPosition left_ - - clear left_ + strokeOrigin paddingBox - float left_ +-} +paddingBox : Value { provides | paddingBox : Supported } +paddingBox = + Value "padding-box" - justifyContent left_ - justifyItems left_ +{-| The `left` value, used in many properties such as: - justifySelf left_ + - [`backgroundPosition`](#backgroundPosition) + - [`clear`](#clear) + - [`float`](#float) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [`pageBreakAfter`](#pageBreakAfter) + - [`textAlign`](#textAlign) - pageBreakAfter left_ +``` +backgroundPosition left_ - textAlign left_ +clear left_ + +float left_ + +justifyContent left_ + +justifyItems left_ + +justifySelf left_ +pageBreakAfter left_ +textAlign left_ +``` The value is called `left_` instead of `left` because [`left` is already a function](#left). @@ -1366,33 +1433,32 @@ left_ = {-| The `right` value, used in many properties such as: -- [`backgroundPosition`](#backgroundPosition) -- [`clear`](#clear) -- [`float`](#float) -- [`justifyContent`](#justifyContent) -- [`justifyItems`](#justifyItems) -- [`justifySelf`](#justifySelf) -- [`pageBreakAfter`](#pageBreakAfter) -- [`textAlign`](#textAlign) - - - backgroundPosition right_ - - clear right_ + - [`backgroundPosition`](#backgroundPosition) + - [`clear`](#clear) + - [`float`](#float) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [`pageBreakAfter`](#pageBreakAfter) + - [`textAlign`](#textAlign) - float right_ +``` +backgroundPosition right_ - justifyContent right_ +clear right_ - justifyItems right_ +float right_ - justifySelf right_ +justifyContent right_ - pageBreakAfter right_ +justifyItems right_ - textAlign right_ +justifySelf right_ +pageBreakAfter right_ +textAlign right_ +``` The value is called `right_` instead of `right` because [`right` is already a function](#right). @@ -1404,26 +1470,27 @@ right_ = {-| The `top` value, used in the following properties: -- [`backgroundPosition`](#backgroundPosition) -- [`captionSide`](#captionSide) -- [`objectPosition2`](#objectPosition2) -- [`perspectiveOrigin2`](#perspectiveOrigin2) -- [`strokePosition2`](#strokePosition2) -- [`transformOrigin`](#transformOrigin) -- [`verticalAlign`](#verticalAlign) - + - [`backgroundPosition`](#backgroundPosition) + - [`captionSide`](#captionSide) + - [`objectPosition2`](#objectPosition2) + - [`perspectiveOrigin2`](#perspectiveOrigin2) + - [`strokePosition2`](#strokePosition2) + - [`transformOrigin`](#transformOrigin) + - [`verticalAlign`](#verticalAlign) - backgroundPosition top_ +``` +backgroundPosition top_ - captionSide top_ +captionSide top_ - objectPosition2 right_ top_ +objectPosition2 right_ top_ - perspectiveOrigin2 left_ top_ +perspectiveOrigin2 left_ top_ - transformOrigin top_ +transformOrigin top_ - verticalAlign top_ +verticalAlign top_ +``` The value is called `top_` instead of `top` because [`top` is already a function](#top). @@ -1435,26 +1502,27 @@ top_ = {-| The `bottom` value, used in the following properties: -- [`backgroundPosition`](#backgroundPosition) -- [`captionSide`](#captionSide) -- [`objectPosition2`](#objectPosition2) -- [`perspectiveOrigin2`](#perspectiveOrigin2) -- [`strokePosition2`](#strokePosition2) -- [`transformOrigin`](#transformOrigin) -- [`verticalAlign`](#verticalAlign) - + - [`backgroundPosition`](#backgroundPosition) + - [`captionSide`](#captionSide) + - [`objectPosition2`](#objectPosition2) + - [`perspectiveOrigin2`](#perspectiveOrigin2) + - [`strokePosition2`](#strokePosition2) + - [`transformOrigin`](#transformOrigin) + - [`verticalAlign`](#verticalAlign) - backgroundPosition bottom_ +``` +backgroundPosition bottom_ - captionSide bottom_ +captionSide bottom_ - objectPosition2 right_ bottom_ +objectPosition2 right_ bottom_ - perspectiveOrigin2 left_ bottom_ +perspectiveOrigin2 left_ bottom_ - transformOrigin bottom_ +transformOrigin bottom_ - verticalAlign bottom_ +verticalAlign bottom_ +``` The value is called `bottom_` instead of `bottom` because [`bottom` is already a function](#bottom). @@ -1490,18 +1558,19 @@ inline = {-| The `start` value, used in the following properties: -- [`alignItems`](#alignItems) -- [`alignContent`](#alignContent) -- [`alignSelf`](#alignSelf) -- [`justifyContent`](#justifyContent) -- [`justifyItems`](#justifyItems) -- [`justifySelf`](#justifySelf) -- [`steps2`](#steps2) - + - [`alignItems`](#alignItems) + - [`alignContent`](#alignContent) + - [`alignSelf`](#alignSelf) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [`steps2`](#steps2) - alignContent start +``` +alignContent start - steps2 3 start +steps2 3 start +``` -} start : Value { provides | start : Supported } @@ -1511,38 +1580,40 @@ start = {-| The `end` value, used in the following properties: -- [`alignItems`](#alignItems) -- [`alignContent`](#alignContent) -- [`alignSelf`](#alignSelf) -- [`justifyContent`](#justifyContent) -- [`justifyItems`](#justifyItems) -- [`justifySelf`](#justifySelf) -- [`steps2`](#steps2) - + - [`alignItems`](#alignItems) + - [`alignContent`](#alignContent) + - [`alignSelf`](#alignSelf) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [`steps2`](#steps2) - alignContent end +``` +alignContent end - steps2 3 end +steps2 3 end +``` -} end : Value { provides | end : Supported } end = Value "end" -{-| The `baseline` value, used in the following properties: - -- [`alignContent`](#alignContent) -- [`alignItems`](#alignItems) -- [`alignSelf`](#alignSelf) -- [`verticalAlign`](#verticalAlign) - alignItems baseline +{-| The `baseline` value, used in the following properties: - verticalAlign baseline + - [`alignContent`](#alignContent) + - [`alignItems`](#alignItems) + - [`alignSelf`](#alignSelf) + - [`verticalAlign`](#verticalAlign) --} +``` +alignItems baseline +verticalAlign baseline +``` +-} baseline : Value { provides | baseline : Supported } baseline = Value "baseline" @@ -1564,12 +1635,11 @@ clip = Value "clip" - {-| The `ruby` value used by [`display`](#display) and [`fontVariantEastAsian`](#fontVariantEastAsian). display ruby - fontVariantEastAsian2 ruby jis83 + fontVariantEastAsian2 ruby jis83 -} ruby : Value { provides | ruby : Supported } @@ -1577,6 +1647,126 @@ ruby = Value "ruby" +{-| The `stretch` value used in the following properties: + + - [`alignContent`](#alignContent) + - [`alignItems`](#alignItems) + - [`alignSelf`](#alignSelf) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [\`strokeDashJustify](#strokeDashJustify) + +``` +alignContent stretch + +strokeDashJustify stretch +``` + +-} +stretch : Value { provides | stretch : Supported } +stretch = + Value "stretch" + + +{-| The `center` value, used in many properties such as: + + - [`alignContent`](#alignContent) + - [`alignItems`](#alignItems) + - [`alignSelf`](#alignSelf) + - [`backgroundPosition`](#backgroundPosition) + - [`justifyContent`](#justifyContent) + - [`justifyItems`](#justifyItems) + - [`justifySelf`](#justifySelf) + - [`scrollSnapAlign`](#scrollSnapAlign) + +``` +backgroundPosition enter + +justifyContent center +``` + +-} +center : Value { provides | center : Supported } +center = + Value "center" + + +{-| The `content` value used in the following properties: + + - [`flex`](#flex) + - [`flex-basis`](#flexBasis) + - [`contain`](#contain) + +``` +flexBasis content + +contain content +``` + +-} +content : Value { provides | content : Supported } +content = + Value "content" + + +{-| The `text` value for the [`cursor`](#cursor), +[`backgroundClip`](#backgroundClip), +and [`user-select`](#userSelect) properties. + + backgroundClip text + + cursor text + + userSelect text + +-} +text : Value { provides | text : Supported } +text = + Value "text" + + +{-| Sets `contain` for the following properties: + + - [`backgroundSize`](#backgroundSize) (It always show the whole background + image, even if it leaves empty spaces on the sides.) + - [`objectFit`](#objectFit) (Replaced content is scaled to maintain proportions within the element's content box.) + - [`userSelect`](#userSelect) (Lets selection start within the element but that selection will be contained within that element's bounds.) + - [`overscrollBehavior`](#overscrollBehavior) (This means that default scroll overflow behavior + is observed inside the element, but scroll chaining will not happen to neighbouring elements.) + +``` +backgroundSize contain_ + +overscrollBehavior contain +``` + +The value is called `contain_` instead of `contain` because [`contain`](#contain) is already a function. + +-} +contain_ : Value { provides | contain_ : Supported } +contain_ = + Value "contain" + + +{-| Sets `cover` for the following properties: + +- [`backgroundSize`](#backgroundSize) +- [`objectFit`](#objectFit) +- [`strokeDashCorner`](#strokeDashCorner) +- [`strokeSize`](#strokeSize) + + + backgroundSize cover + + strokeSize cover + +-} +cover : Value { provides | cover : Supported } +cover = + Value "cover" + + -- OVERFLOW -- @@ -1652,7 +1842,6 @@ overflowY (Value val) = AppendProperty ("overflow-y:" ++ val) - {-| Sets [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block). overflowBlock visible @@ -3348,7 +3537,7 @@ marker = {-| A [`::placeholder`](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder) [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). -Be careful when using placeholders as they can compromise accessibility. +Be careful when using placeholders as they can negatively impact accessibility. placeholder [ opacity (num 1) <| important @@ -4345,19 +4534,6 @@ tableRowGroup = -- ALIGN-ITEMS VALUES -- -{-| -} -stretch : Value { provides | stretch : Supported } -stretch = - Value "stretch" - - -{-| -} -center : Value { provides | center : Supported } -center = - Value "center" - - - {-| The `flex-start` value used by [`alignItems`](#alignItems), [`justifyContent`](#justifyContent), and [`alignContent`](#alignContent). @@ -4865,23 +5041,6 @@ flexBasis (Value val) = AppendProperty ("flex-basis:" ++ val) -{-| The `content` value used in: - - - [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values) (Indicates automatic sizing based on the item's content) - - [`contain`](#contain) (Indicates all containment rules apart from `size` and `style` are applied.) - -``` -flexBasis content - -contain content -``` - --} -content : Value { provides | content : Supported } -content = - Value "content" - - {-| Sets [`flex-grow`](https://css-tricks.com/almanac/properties/f/flex-grow/). flexGrow (num 3) @@ -5631,47 +5790,14 @@ fontVariantCaps (Value str) = AppendProperty ("font-variant-caps:" ++ str) -{-| The `normal` value, which can be used with such properties as: - - - [`fontVariantCaps`](#fontVariantCaps) - - [`fontKerning`](#fontKerning) - - [`fontLanguageOverride`](#fontLanguageOverride) - - [`whiteSpace`](#whiteSpace) - - [`wordBreak`](#wordBreak) - - [`columnGap`](#columnGap) - - [`zoom`](#zoom) - - [`animationDirection`](#animationDirection) - - [`alignItems`](#alignItems) - - [`lineBreak`](#lineBreak) - - -``` -alignItems normal - -columnGap normal - -fontVariantCaps normal - -whiteSpace normal - -wordBreak normal - -zoom normal -``` - --} -normal : Value { provides | normal : Supported } -normal = - Value "normal" - - {-| The `small-caps` value used in - - [`fontVariantCaps`](#fontVariantCaps) - - [`fontSynthesis`](#fontSynthesis) +- [`fontVariantCaps`](#fontVariantCaps) +- [`fontSynthesis`](#fontSynthesis) fontVariantCaps smallCaps fontSynthesis2 smallCaps style + -} smallCaps : Value { provides | smallCaps : Supported } smallCaps = @@ -6198,6 +6324,7 @@ stackedFractions = {-| The [`font-kerning`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) property. fontKerning none + -} fontKerning : BaseValue @@ -6215,6 +6342,7 @@ fontKerning (Value val) = fontLanguageOverride normal fontLanguageOverride (string "ENG") + -} fontLanguageOverride : BaseValue @@ -6235,6 +6363,7 @@ fontLanguageOverride (Value val) = fontSynthesis2 smallCaps weight fontSynthesis3 weight style smallCaps + -} fontSynthesis : BaseValue @@ -6254,6 +6383,7 @@ This is the two-argument variant, in which you can indicate two different font properties to be synthesised by the browser. fontSynthesis2 smallCaps weight + -} fontSynthesis2 : Value @@ -6261,11 +6391,12 @@ fontSynthesis2 : , style : Supported , smallCaps : Supported } - -> Value - { weight : Supported - , style : Supported - , smallCaps : Supported - } + -> + Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } -> Style fontSynthesis2 (Value val1) (Value val2) = AppendProperty ("font-synthesis:" ++ val1 ++ " " ++ val2) @@ -6277,6 +6408,7 @@ This is the three-argument variant, in which you can indicate all three different font properties to be synthesised by the browser. fontSynthesis3 weight style smallCaps + -} fontSynthesis3 : Value @@ -6284,16 +6416,18 @@ fontSynthesis3 : , style : Supported , smallCaps : Supported } - -> Value - { weight : Supported - , style : Supported - , smallCaps : Supported - } - -> Value - { weight : Supported - , style : Supported - , smallCaps : Supported - } + -> + Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } + -> + Value + { weight : Supported + , style : Supported + , smallCaps : Supported + } -> Style fontSynthesis3 (Value val1) (Value val2) (Value val3) = AppendProperty ("font-synthesis:" ++ val1 ++ " " ++ val2 ++ " " ++ val3) @@ -6302,16 +6436,17 @@ fontSynthesis3 (Value val1) (Value val2) (Value val3) = {-| The `weight` value for the [`fontSynthesis`](#fontSynthesis) property. fontSynthesis weight + -} weight : Value { provides | weight : Supported } weight = Value "weight" - {-| The [`font-optical-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing) property. fontOpticalSizing none + -} fontOpticalSizing : BaseValue @@ -6328,6 +6463,7 @@ fontOpticalSizing (Value val) = fontVariantPosition sub fontVariantPosition normal + -} fontVariantPosition : BaseValue @@ -6340,6 +6476,7 @@ fontVariantPosition (Value val) = AppendProperty ("font-variant-position:" ++ val) + -- CURSOR -- @@ -6496,18 +6633,6 @@ crosshair = Value "crosshair" -{-| The `text` value for the [`cursor`](#cursor), -[`backgroundClip`](#backgroundClip), -and [`user-select`](#userSelect) properties. - - backgroundClip text - --} -text : Value { provides | text : Supported } -text = - Value "text" - - {-| The `vertical-text` value for the [`cursor`](#cursor) property. -} verticalText : Value { provides | verticalText : Supported } @@ -7036,22 +7161,6 @@ backgroundClips firstValue values = AppendProperty ("background-clip:" ++ hashListToString firstValue values) -{-| The `padding-box` value, used with [`backgroundClip`](#backgroundClip), -[`backgroundOrigin`](#backgroundOrigin), -and [`strokeOrigin`](#strokeOrigin). - - backgroundClip paddingBox - - backgroundOrigin paddingBox - - strokeOrigin paddingBox - --} -paddingBox : Value { provides | paddingBox : Supported } -paddingBox = - Value "padding-box" - - -- BACKGROUND ORIGIN -- @@ -7335,7 +7444,7 @@ backgroundRepeat2 (Value horiz) (Value vert) = AppendProperty ("background-repeat:" ++ horiz ++ " " ++ vert) -{-| Compiles to [`repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#Values) for [backgrounds](#backgroundRepeat), +{-| The `repeat` value for [background properties](#backgroundRepeat) and [`strokeRepeat`](#strokeRepeat). backgroundRepeat repeat @@ -7348,7 +7457,7 @@ repeat = Value "repeat" -{-| Compiles to [`no-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#Values) for [backgrounds](#backgroundRepeat), +{-| The `no-repeat` value for [background properties](#backgroundRepeat) and [`strokeRepeat`](#strokeRepeat). backgroundRepeat noRepeat @@ -7361,8 +7470,8 @@ noRepeat = Value "no-repeat" -{-| Compiles to [`repeat-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#Values) for [repeating backgrounds](#backgroundRepeat), -and [`strokeRepeat`](#strokeRepeat) horizontally. +{-| The `repeat-x` value for [repeating backgrounds](#backgroundRepeat) +and [`strokeRepeat`](#strokeRepeat). backgroundRepeat repeatX @@ -7374,8 +7483,8 @@ repeatX = Value "repeat-x" -{-| Compiles to [`repeat-y`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#Values) for [repeating backgrounds](#backgroundRepeat), -and [`strokeRepeat`](#strokeRepeat) vertically. +{-| The `repeat-y` value for [repeating backgrounds](#backgroundRepeat) +and [`strokeRepeat`](#strokeRepeat). backgroundRepeat repeatY @@ -7387,8 +7496,8 @@ repeatY = Value "repeat-y" -{-| Compiles to [`space`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#Values) for [repeating backgrounds](#backgroundRepeat), -and [`strokeRepeat`](#strokeRepeat) without cutting off edges by adding space. +{-| The `space` value for [repeating backgrounds](#backgroundRepeat) +and [`strokeRepeat`](#strokeRepeat). backgroundRepeat space @@ -7400,11 +7509,14 @@ space = Value "space" -{-| The `round` value used for properties such as [repeating background](#backgroundRepeat) without cutting off edges by stretching or shrinking the image, -and [`strokeLinecap`](#strokeLinecap), -and [`strokeRepeat`](#strokeRepeat), -and [`strokeLinejoin`](#strokeLinejoin2). +{-| The `round` value used for properties such as: + + - [repeating backgrounds](#backgroundRepeat) + - [`strokeLinecap`](#strokeLinecap) + - [`strokeRepeat`](#strokeRepeat) + - [`strokeLinejoin`](#strokeLinejoin2) +``` backgroundRepeat round strokeLineCap round @@ -7412,6 +7524,7 @@ and [`strokeLinejoin`](#strokeLinejoin2). strokeLinejoin2 miter round strokeRepeat round +``` -} round : Value { provides | round : Supported } @@ -7477,45 +7590,6 @@ backgroundSize2 (Value widthVal) (Value heightVal) = AppendProperty ("background-size:" ++ widthVal ++ " " ++ heightVal) -{-| Sets [`contain`](https://css-tricks.com/almanac/properties/b/background-size/) -for the following properties: - - - [`backgroundSize`](#backgroundSize) (It always show the whole background - image, even if it leaves empty spaces on the sides.) - - [`objectFit`](#objectFit) (Replaced content is scaled to maintain proportions within the element's content box.) - - [`userSelect`](#userSelect) (Lets selection start within the element but that selection will be contained within that element's bounds.) - - [`overscrollBehavior`](#overscrollBehavior) (This means that default scroll overflow behavior - is observed inside the element, but scroll chaining will not happen to neighbouring elements.) - -``` -backgroundSize contain_ - -overscrollBehavior contain -``` - -The value is called `contain_` instead of `contain` because [`contain`](#contain) is already a function. - --} -contain_ : Value { provides | contain_ : Supported } -contain_ = - Value "contain" - - -{-| Sets [`cover`](https://css-tricks.com/almanac/properties/b/background-size/) -for [`backgroundSize`](#backgroundSize), and [`strokeSize`](#strokeSize). It fills the whole space available with -the background image by scaling, even if it cuts off some of the image. - - backgroundSize cover - - strokeSize cover - --} -cover : Value { provides | cover : Supported } -cover = - Value "cover" - - - {- GRADIENTS -} @@ -10259,12 +10333,15 @@ lowercase = {-| A `full-width` value for: + ### [`textTransform`](#textTransform) + Forces the writing of characters in a square so they can be aligned in East Asian scripts. + ### [`fontVariantEastAsian`](#fontVariantEastAsian) -Activates the East Asian characters that are roughly be the same width. +Activates the East Asian characters that are roughly be the same width. textTransform fullWidth @@ -10847,14 +10924,14 @@ sub = Value "sub" -{-| A `super` value for the following properties: +{-| A `super` value for the following properties: - [`fontVariantPosition](#fontVariantPosition) - [`verticalAlign`](#verticalAlign) fontVariantPosition super - + verticalAlign super -} @@ -14116,7 +14193,9 @@ maxInlineSize (Value val) = - [`flexBasis`](#flexBasis) - width minContent +``` +width minContent +``` -} minContent : Value { provides | minContent : Supported } @@ -14132,7 +14211,9 @@ minContent = - [`flexBasis`](#flexBasis) - width maxContent +``` +width maxContent +``` -} maxContent : Value { provides | maxContent : Supported } @@ -14148,7 +14229,9 @@ maxContent = - [`flexBasis`](#flexBasis) - width fitContent +``` +width fitContent +``` -} fitContent : Value { provides | fitContent : Supported } @@ -16841,6 +16924,7 @@ can use for this property. contain4 size layout style paint **Note: The `style` value is considered at-risk from being depreciated.** + -} contain4 : Value @@ -16909,6 +16993,7 @@ layout = contain style fontSynthesis style + -} style : Value { provides | style : Supported } style = From 01238b394ab4bec9e5ea1a63eb2eaefb4676713b Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 6 Dec 2021 01:31:02 +0000 Subject: [PATCH 41/45] Re-organised and improved docs As I'm working on this file more, I found that a lot of things didn't have clear organisation so I figured it would be good to give them a look over. Moved docs and exposing - Moved the shared values section to a more logical part of the docs and exposing (after the main measurements) - Moved the url variable higher up in the docs and exposing. - Added one line break between the cursor properties and the cursor values since I figured that would separate them a bit more neatly. Edited documentation - Changed the levels of different headers to reflect what level they're actually at in the general categorisation heirarchy. - Fixed a doc typo in contain_ and textOverflow2. - Renamed 'Align Items' section to 'Flex align items' and made it a subheader of the Flexbox module section as there's no other purpose for these particular values. --- src/Css.elm | 206 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 118 insertions(+), 88 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index fad0195e..4c9515c0 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -10,6 +10,15 @@ module Css exposing , calc, CalcOperation, minus, plus, times, dividedBy , Color, ColorSupported, color, backgroundColor, hex, rgb, rgba, hsl, hsla, currentcolor , Time, TimeSupported, s, ms + , deg, grad, rad, turn + , url + , auto, none, normal + , hidden, visible + , contentBox, borderBox, paddingBox + , left_, right_, top_, bottom_, block, inline, start, end + , baseline, clip, ruby + , stretch, center, content, text + , cover, contain_ , pseudoClass, active, checked, disabled, empty, enabled , firstChild, firstOfType, focus, fullscreen, hover, inRange , indeterminate, invalid, lastChild, lastOfType, link, onlyChild @@ -55,6 +64,8 @@ module Css exposing , gap, gap2, rowGap, columnGap , boxSizing , alignContent, alignContent2, alignItems, alignItems2, alignSelf, alignSelf2, justifyContent, justifyContent2, justifyItems, justifyItems2, justifySelf, justifySelf2 + , flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly + , firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter , flexDirection, row, rowReverse, column, columnReverse , order , flexGrow, flexShrink, flexBasis @@ -79,10 +90,9 @@ module Css exposing , fontVariantLigatures, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual , fontVariantNumeric, fontVariantNumeric4, ordinal, slashedZero, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions , fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition - , flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter - , url , CursorKeyword - , cursor, cursor2, cursor4, pointer, default, contextMenu, help, progress, wait, cell + , cursor, cursor2, cursor4 + , pointer, default, contextMenu, help, progress, wait, cell , crosshair, verticalText, alias, copy, move, noDrop , notAllowed, allScroll, colResize, rowResize, nResize, eResize, sResize , wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize @@ -90,18 +100,10 @@ module Css exposing , ListStyleType, ListStyleTypeSupported , listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, string, customIdent, listStyleImage , arabicIndic, armenian, bengali, cambodian, circle, cjkDecimal, cjkEarthlyBranch, cjkHeavenlyStem, cjkIdeographic, decimal, decimalLeadingZero, devanagari, disclosureClosed, disclosureOpen, disc, ethiopicNumeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiraganaIroha, japaneseFormal, japaneseInformal, kannada, katakana, katakanaIroha, khmer, koreanHangulFormal, koreanHanjaFormal, koreanHanjaInformal, lao, lowerAlpha, lowerArmenian, lowerGreek, lowerLatin, lowerRoman, malayalam, monogolian, myanmar, oriya, persian, simpChineseFormal, simpChineseInformal, tamil, telugu, thai, tibetan, tradChineseFormal, tradChineseInformal, upperAlpha, upperArmenian, upperLatin, upperRoman - , auto, none, normal - , hidden, visible - , contentBox, borderBox, paddingBox - , left_, right_, top_, bottom_, block, inline, start, end - , baseline, clip, ruby - , stretch, center, content, text - , cover, contain_ , overflow, overflowX, overflowY, overflowBlock, overflowInline , overflowAnchor , overflowWrap , breakWord, anywhere - , deg, grad, rad, turn , direction, ltr, rtl , justify, matchParent, textAlign, textJustify, interWord, interCharacter, textUnderlinePosition, textUnderlinePosition2, under , textOrientation @@ -213,7 +215,7 @@ functions let you define custom properties and selectors, respectively. # General Values -All CSS properties can have the values `unset`, `initial`, and `inherit` +All CSS properties can have the values `unset`, `initial`, and `inherit`. @docs unset, initial, inherit @@ -242,7 +244,30 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs Time, TimeSupported, s, ms -## Pseudo-Classes +## Angles + +@docs deg, grad, rad, turn + + +## URLs + +@docs url + + +# Shared Values + +Many different kinds of CSS properties use these values. + +@docs auto, none, normal +@docs hidden, visible +@docs contentBox, borderBox, paddingBox +@docs left_, right_, top_, bottom_, block, inline, start, end +@docs baseline, clip, ruby +@docs stretch, center, content, text +@docs cover, contain_ + + +# Pseudo-Classes @docs pseudoClass, active, checked, disabled, empty, enabled @docs firstChild, firstOfType, focus, fullscreen, hover, inRange @@ -251,18 +276,21 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs root, scope, target, valid, visited -## Pseudo-Elements +# Pseudo-Elements @docs pseudoElement, before, after, backdrop, cue, marker, placeholder, selection -## Sizing +# Sizing @docs width, minWidth, maxWidth, height, minHeight, maxHeight @docs blockSize, minBlockSize, maxBlockSize, inlineSize, minInlineSize, maxInlineSize @docs minContent, maxContent, fitContent +# Backgrounds + + ## Background Attachment @docs backgroundAttachment, backgroundAttachments, scroll, local @@ -288,6 +316,9 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs repeat, noRepeat, repeatX, repeatY, space, round +# Shadows + + ## Box Shadow @docs BoxShadowConfig, boxShadow, boxShadows, defaultBoxShadow @@ -298,7 +329,7 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs TextShadowConfig, textShadow, defaultTextShadow -## Border +# Borders @docs LineWidth, LineWidthSupported, LineStyle, LineStyleSupported @@ -346,63 +377,86 @@ All CSS properties can have the values `unset`, `initial`, and `inherit` @docs borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4 -## Outline +# Outline @docs outline, outline3, outlineWidth, outlineColor, invert, outlineStyle, outlineOffset -## Display +# Display @docs display, display2, displayListItem2, displayListItem3 + +## Display values + +You can also use [`block`](#block), [`inline`](#inline) and [`ruby`](#ruby) as values. + @docs flex_, flow, flowRoot, grid, contents, listItem, inlineBlock, inlineFlex, inlineTable, inlineGrid, rubyBase, rubyBaseContainer, rubyText, rubyTextContainer, runIn, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup -## Positions +# Positions @docs position, zIndex @docs absolute, fixed, relative, static, sticky -## Inset +# Inset @docs inset, inset2, inset3, inset4, top, right, bottom, left @docs insetBlock, insetBlock2, insetInline, insetInline2, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd -## Paddings +# Paddings @docs padding, padding2, padding3, padding4, paddingTop, paddingRight, paddingBottom, paddingLeft -## Margins +# Margins @docs margin, margin2, margin3, margin4, marginTop, marginRight, marginBottom, marginLeft -## Gap +# Gaps @docs gap, gap2, rowGap, columnGap -## Box Sizing +# Box Sizing @docs boxSizing -## Flexbox +# Flexbox The CSS Flexible Box Layout Module. See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). -### Flexbox Alignment +## Flexbox Alignment @docs alignContent, alignContent2, alignItems, alignItems2, alignSelf, alignSelf2, justifyContent, justifyContent2, justifyItems, justifyItems2, justifySelf, justifySelf2 +### Align Items + +Other values you can use for flex item alignment: + + - [`left_`](#left_) + - [`right_`](#right_) + - [`top_`](#top_) + - [`bottom_`](#bottom_) + - [`start`](#start) + - [`end`](#end) + - [`center`](#center) + - [`stretch`](#stretch) + - [`baseline`](#baseline) + +@docs flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly +@docs firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter + + ### Flexbox Direction @docs flexDirection, row, rowReverse, column, columnReverse @@ -507,41 +561,24 @@ See this [complete guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox @docs fontKerning, fontLanguageOverride, fontSynthesis, fontSynthesis2, fontSynthesis3, fontOpticalSizing, fontVariantPosition -# Align Items - -Other values you can use for alignment than the ones listed in this section: +# Cursors - - [`left_`](#left_) - - [`right_`](#right_) - - [`top_`](#top_) - - [`bottom_`](#bottom_) - - [`start`](#start) - - [`end`](#end) - - [`center`](#center) - - [`stretch`](#stretch) - - [`baseline`](#baseline) - -@docs flexStart, flexEnd, selfStart, selfEnd, spaceBetween, spaceAround, spaceEvenly, firstBaseline, lastBaseline, safe, unsafe, legacy, legacyLeft, legacyRight, legacyCenter - - -# Url - -@docs url +@docs CursorKeyword +@docs cursor, cursor2, cursor4 -## Cursors +## Cursor values -[`text`](#text) is also a supported value. +[`text`](#text) is also a supported value for `cursor`. -@docs CursorKeyword -@docs cursor, cursor2, cursor4, pointer, default, contextMenu, help, progress, wait, cell +@docs pointer, default, contextMenu, help, progress, wait, cell @docs crosshair, verticalText, alias, copy, move, noDrop @docs notAllowed, allScroll, colResize, rowResize, nResize, eResize, sResize @docs wResize, neResize, nwResize, seResize, swResize, ewResize, nsResize @docs neswResize, nwseResize, zoomIn, zoomOut, grab, grabbing -## List Style +# List Style @docs ListStyleType, ListStyleTypeSupported @docs listStyle, listStyle2, listStyle3, listStylePosition, inside, outside, listStyleType, string, customIdent, listStyleImage @@ -550,19 +587,7 @@ Other values you can use for alignment than the ones listed in this section: [`square`](#square) is also a supported value for [`listStyle`](#listStyle) and [`listStyleType`](#listStyleType). -## Shared Values - -Multiple CSS properties use these values. - -@docs auto, none, normal -@docs hidden, visible -@docs contentBox, borderBox, paddingBox -@docs left_, right_, top_, bottom_, block, inline, start, end -@docs baseline, clip, ruby -@docs stretch, center, content, text -@docs cover, contain_ - -## Overflow +# Overflow @docs overflow, overflowX, overflowY, overflowBlock, overflowInline @docs overflowAnchor @@ -571,40 +596,35 @@ Multiple CSS properties use these values. @docs breakWord, anywhere -## Angles - -@docs deg, grad, rad, turn - - -## Direction +# Direction @docs direction, ltr, rtl -## Text Align +# Text Align @docs justify, matchParent, textAlign, textJustify, interWord, interCharacter, textUnderlinePosition, textUnderlinePosition2, under -## Text Orientation +# Text Orientation @docs textOrientation @docs mixed, sideways, upright -## Text Rendering +# Text Rendering @docs textRendering @docs geometricPrecision, optimizeLegibility, optimizeSpeed -## Text Transform +# Text Transform @docs textTransform @docs capitalize, uppercase, lowercase, fullWidth, fullSizeKana -## Text Decoration +# Text Decoration @docs textDecoration, textDecoration2, textDecoration3, textDecorationLine, textDecorationLine2, textDecorationLine3, textDecorationStyle, textDecorationColor @docs textDecorationSkip, objects, spaces, ink, edges, boxDecoration @@ -1221,6 +1241,10 @@ url str = Value ("url(" ++ str ++ ")") + +-- SHARED VALUES -- + + {-| The `auto` value used in many properties such as [`width`](#width), [`zoom`](#zoom), [`outlineStyle`](#outlineStyle), @@ -1738,7 +1762,7 @@ text = ``` backgroundSize contain_ -overscrollBehavior contain +overscrollBehavior contain_ ``` The value is called `contain_` instead of `contain` because [`contain`](#contain) is already a function. @@ -1751,15 +1775,16 @@ contain_ = {-| Sets `cover` for the following properties: -- [`backgroundSize`](#backgroundSize) -- [`objectFit`](#objectFit) -- [`strokeDashCorner`](#strokeDashCorner) -- [`strokeSize`](#strokeSize) - + - [`backgroundSize`](#backgroundSize) + - [`objectFit`](#objectFit) + - [`strokeDashCorner`](#strokeDashCorner) + - [`strokeSize`](#strokeSize) - backgroundSize cover +``` +backgroundSize cover - strokeSize cover +strokeSize cover +``` -} cover : Value { provides | cover : Supported } @@ -1767,6 +1792,7 @@ cover = Value "cover" + -- OVERFLOW -- @@ -5791,12 +5817,15 @@ fontVariantCaps (Value str) = {-| The `small-caps` value used in -- [`fontVariantCaps`](#fontVariantCaps) -- [`fontSynthesis`](#fontSynthesis) - fontVariantCaps smallCaps + - [`fontVariantCaps`](#fontVariantCaps) + - [`fontSynthesis`](#fontSynthesis) + +``` +fontVariantCaps smallCaps - fontSynthesis2 smallCaps style +fontSynthesis2 smallCaps style +``` -} smallCaps : Value { provides | smallCaps : Supported } @@ -7590,6 +7619,7 @@ backgroundSize2 (Value widthVal) (Value heightVal) = AppendProperty ("background-size:" ++ widthVal ++ " " ++ heightVal) + {- GRADIENTS -} @@ -14833,8 +14863,8 @@ textOverflow (Value value) = `text-overflow` describes how text that gets cut off is signalled to users. -This version specifies how the text cut-off is displayed in start -(left in LTR) and the end (right in LTR) of the text.. +This version specifies how the text cut-off is displayed at the start +(left in LTR) and at the end (right in LTR) of the text. textOverflow2 ellipsis ellipsis From 7000980fdf02e208324efdc1440e9e50212a138a Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 6 Dec 2021 01:46:45 +0000 Subject: [PATCH 42/45] Grouping more shared values 3 More shared values have been organised together: - fullWidth - sub - super Misc: - Moved ltr and rtl values to be next to the direction property in the code (since they are the only things that go together) --- src/Css.elm | 163 ++++++++++++++++++++++++++-------------------------- 1 file changed, 81 insertions(+), 82 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 4c9515c0..784561bd 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -18,7 +18,8 @@ module Css exposing , left_, right_, top_, bottom_, block, inline, start, end , baseline, clip, ruby , stretch, center, content, text - , cover, contain_ + , cover, contain_, fullWidth + , sub, super , pseudoClass, active, checked, disabled, empty, enabled , firstChild, firstOfType, focus, fullscreen, hover, inRange , indeterminate, invalid, lastChild, lastOfType, link, onlyChild @@ -111,7 +112,7 @@ module Css exposing , textRendering , geometricPrecision, optimizeLegibility, optimizeSpeed , textTransform - , capitalize, uppercase, lowercase, fullWidth, fullSizeKana + , capitalize, uppercase, lowercase, fullSizeKana , textDecoration, textDecoration2, textDecoration3, textDecorationLine, textDecorationLine2, textDecorationLine3, textDecorationStyle, textDecorationColor , textDecorationSkip, objects, spaces, ink, edges, boxDecoration , wavy, underline, overline, lineThrough @@ -125,7 +126,7 @@ module Css exposing , show, hide , tableLayout , verticalAlign - , sub, super, textTop, textBottom, middle + , textTop, textBottom, middle , whiteSpace , pre, preWrap, preLine , wordBreak @@ -264,8 +265,8 @@ Many different kinds of CSS properties use these values. @docs left_, right_, top_, bottom_, block, inline, start, end @docs baseline, clip, ruby @docs stretch, center, content, text -@docs cover, contain_ - +@docs cover, contain_, fullWidth +@docs sub, super # Pseudo-Classes @@ -621,7 +622,7 @@ Other values you can use for flex item alignment: # Text Transform @docs textTransform -@docs capitalize, uppercase, lowercase, fullWidth, fullSizeKana +@docs capitalize, uppercase, lowercase, fullSizeKana # Text Decoration @@ -669,7 +670,7 @@ Other values you can use for flex item alignment: ## Vertical Align @docs verticalAlign -@docs sub, super, textTop, textBottom, middle +@docs textTop, textBottom, middle ## White space @@ -1792,6 +1793,59 @@ cover = Value "cover" +{-| A `full-width` value for: + + +### [`textTransform`](#textTransform) + +Forces the writing of characters in a square so they can be aligned in East Asian scripts. + + +### [`fontVariantEastAsian`](#fontVariantEastAsian) + +Activates the East Asian characters that are roughly be the same width. + + textTransform fullWidth + + fontVariantEastAsian fullWidth + +-} +fullWidth : Value { provides | fullWidth : Supported } +fullWidth = + Value "full-width" + + +{-| A `sub` value for the following properties: + + - [`fontVariantPosition](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) + + + fontVariantPosition sub + + verticalAlign sub + +-} +sub : Value { provides | sub : Supported } +sub = + Value "sub" + + +{-| A `super` value for the following properties: + + - [`fontVariantPosition](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) + + + fontVariantPosition super + + verticalAlign super + +-} +super : Value { provides | super : Supported } +super = + Value "super" + -- OVERFLOW -- @@ -10361,28 +10415,6 @@ lowercase = Value "lowercase" -{-| A `full-width` value for: - - -### [`textTransform`](#textTransform) - -Forces the writing of characters in a square so they can be aligned in East Asian scripts. - - -### [`fontVariantEastAsian`](#fontVariantEastAsian) - -Activates the East Asian characters that are roughly be the same width. - - textTransform fullWidth - - fontVariantEastAsian fullWidth - --} -fullWidth : Value { provides | fullWidth : Supported } -fullWidth = - Value "full-width" - - {-| The `full-size-kana` value used by [`textTransform`](#textTransform) textTransform fullSizeKana @@ -10938,38 +10970,6 @@ verticalAlign (Value str) = AppendProperty ("vertical-align:" ++ str) -{-| A `sub` value for the following properties: - - - [`fontVariantPosition](#fontVariantPosition) - - [`verticalAlign`](#verticalAlign) - - - fontVariantPosition sub - - verticalAlign sub - --} -sub : Value { provides | sub : Supported } -sub = - Value "sub" - - -{-| A `super` value for the following properties: - - - [`fontVariantPosition](#fontVariantPosition) - - [`verticalAlign`](#verticalAlign) - - - fontVariantPosition super - - verticalAlign super - --} -super : Value { provides | super : Supported } -super = - Value "super" - - {-| A `textTop` value for the [`vertical-align`](https://css-tricks.com/almanac/properties/v/vertical-align/) property. verticalAlign textTop @@ -11017,6 +11017,26 @@ direction (Value str) = AppendProperty ("direction:" ++ str) +{-| A `ltr` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property. + + direction ltr + +-} +ltr : Value { provides | ltr : Supported } +ltr = + Value "ltr" + + +{-| A `rtl` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property. + + direction rtl + +-} +rtl : Value { provides | rtl : Supported } +rtl = + Value "rtl" + + {-| Sets [`text-align`](https://css-tricks.com/almanac/properties/t/text-align/) textAlign left_ @@ -11157,27 +11177,6 @@ under = Value "under" -{-| A `ltr` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property. - - direction ltr - --} -ltr : Value { provides | ltr : Supported } -ltr = - Value "ltr" - - -{-| A `rtl` value for the [`direction`](https://css-tricks.com/almanac/properties/d/direction/) property. - - direction rtl - --} -rtl : Value { provides | rtl : Supported } -rtl = - Value "rtl" - - - -- WHITE-SPACE -- From 530791178278d7ad623d2a06f79fcf06d282addb Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 6 Dec 2021 17:11:57 +0000 Subject: [PATCH 43/45] Grouping more shared values 4 Grouped what might be the last batch of shared values: - all_ - both - strict - fill_ - stroke - always - x - y - style Misc: - Expanded documentation for slice and clone. - Fixed some documentation typos for shared values - Applied elm-format to Css.elm. --- src/Css.elm | 307 +++++++++++++++++++++++++++------------------------- 1 file changed, 160 insertions(+), 147 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 784561bd..2a170eac 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -12,12 +12,13 @@ module Css exposing , Time, TimeSupported, s, ms , deg, grad, rad, turn , url - , auto, none, normal + , auto, none, normal, strict, all_, both, always , hidden, visible , contentBox, borderBox, paddingBox , left_, right_, top_, bottom_, block, inline, start, end + , x, y , baseline, clip, ruby - , stretch, center, content, text + , stretch, center, content, fill_, stroke, text, style , cover, contain_, fullWidth , sub, super , pseudoClass, active, checked, disabled, empty, enabled @@ -76,7 +77,7 @@ module Css exposing , tabSize , fontDisplay, fallback, swap, optional , writingMode, verticalLr, verticalRl, horizontalTb - , hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, strict, loose + , hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, loose , hangingPunctuation, hangingPunctuation2, hangingPunctuation3, first, last, forceEnd, allowEnd , lineClamp , fontSize, xxSmall, xSmall, small, medium, large, xLarge, xxLarge, smaller, larger, lineHeight, letterSpacing @@ -132,7 +133,7 @@ module Css exposing , wordBreak , breakAll, keepAll , float - , clear, both, inlineStart, inlineEnd + , clear, inlineStart, inlineEnd , visibility , fill , strokeDasharray, strokeDashoffset, strokeWidth, strokeAlign, strokeColor, strokeImage, strokeMiterlimit, strokeOpacity, strokePosition, strokePosition2, strokePosition4, strokeRepeat, strokeRepeat2, strokeSize, strokeSize2, strokeDashCorner @@ -144,7 +145,7 @@ module Css exposing , paintOrder, paintOrder2, paintOrder3, markers , columns, columns2, columnWidth, columnCount, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 , columnFill, balance, balanceAll - , columnSpan, all_ + , columnSpan , transform, transforms, transformOrigin, transformOrigin2 , TransformFunction, TransformFunctionSupported , matrix, matrix3d @@ -158,8 +159,8 @@ module Css exposing , EasingFunction, EasingFunctionSupported, linear, ease, easeIn, easeOut, easeInOut, cubicBezier, stepStart, stepEnd, steps, steps2, jumpStart, jumpEnd, jumpNone, jumpBoth, infinite, reverse, alternate, alternateReverse, running, paused, forwards, backwards , opacity , zoom - , scrollBehavior, smooth, scrollSnapAlign, always, scrollSnapStop - , scrollSnapType, scrollSnapType2, x, y, mandatory, proximity + , scrollBehavior, smooth, scrollSnapAlign, scrollSnapStop + , scrollSnapType, scrollSnapType2, mandatory, proximity , scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom , scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 , scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd @@ -177,15 +178,15 @@ module Css exposing , mixBlendMode , imageRendering, crispEdges, pixelated , backfaceVisibility - , objectFit, fill_, scaleDown + , objectFit, scaleDown , objectPosition, objectPosition2, objectPosition4 , boxDecorationBreak , isolation, isolate , caretColor , pointerEvents - , visiblePainted, visibleFill, visibleStroke, painted, stroke + , visiblePainted, visibleFill, visibleStroke, painted , resize, horizontal, vertical - , contain, contain2, contain3, contain4, size, layout, style, paint + , contain, contain2, contain3, contain4, size, layout, paint ) {-| If you need something that `elm-css` does not support right now, the @@ -259,15 +260,17 @@ All CSS properties can have the values `unset`, `initial`, and `inherit`. Many different kinds of CSS properties use these values. -@docs auto, none, normal +@docs auto, none, normal, strict, all_, both, always @docs hidden, visible @docs contentBox, borderBox, paddingBox @docs left_, right_, top_, bottom_, block, inline, start, end +@docs x, y @docs baseline, clip, ruby -@docs stretch, center, content, text +@docs stretch, center, content, fill_, stroke, text, style @docs cover, contain_, fullWidth @docs sub, super + # Pseudo-Classes @docs pseudoClass, active, checked, disabled, empty, enabled @@ -498,7 +501,7 @@ Other values you can use for flex item alignment: @docs fontDisplay, fallback, swap, optional @docs writingMode, verticalLr, verticalRl, horizontalTb -@docs hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, strict, loose +@docs hyphens, quotes, quotes2, quotes4, textOverflow, textOverflow2, lineBreak, manual, ellipsis, loose @docs hangingPunctuation, hangingPunctuation2, hangingPunctuation3, first, last, forceEnd, allowEnd @docs lineClamp @@ -688,7 +691,7 @@ Other values you can use for flex item alignment: ## Float @docs float -@docs clear, both, inlineStart, inlineEnd +@docs clear, inlineStart, inlineEnd # Visibility @@ -723,7 +726,7 @@ Other values you can use for flex item alignment: @docs columns, columns2, columnWidth, columnCount, columnRuleWidth, columnRuleStyle, columnRuleColor, columnRule, columnRule2, columnRule3 @docs columnFill, balance, balanceAll -@docs columnSpan, all_ +@docs columnSpan # Transformation @@ -781,8 +784,8 @@ Other values you can use for flex item alignment: # Scroll -@docs scrollBehavior, smooth, scrollSnapAlign, always, scrollSnapStop -@docs scrollSnapType, scrollSnapType2, x, y, mandatory, proximity +@docs scrollBehavior, smooth, scrollSnapAlign, scrollSnapStop +@docs scrollSnapType, scrollSnapType2, mandatory, proximity @docs scrollMargin, scrollMargin2, scrollMargin3, scrollMargin4, scrollMarginTop, scrollMarginLeft, scrollMarginRight, scrollMarginBottom @docs scrollMarginBlock, scrollMarginBlock2, scrollMarginInline, scrollMarginInline2 @docs scrollMarginBlockStart, scrollMarginBlockEnd, scrollMarginInlineStart, scrollMarginInlineEnd @@ -812,7 +815,7 @@ Other values you can use for flex item alignment: @docs mixBlendMode @docs imageRendering, crispEdges, pixelated @docs backfaceVisibility -@docs objectFit, fill_, scaleDown +@docs objectFit, scaleDown @docs objectPosition, objectPosition2, objectPosition4 @docs boxDecorationBreak @docs isolation, isolate @@ -822,9 +825,9 @@ Other values you can use for flex item alignment: @docs caretColor @docs pointerEvents -@docs visiblePainted, visibleFill, visibleStroke, painted, stroke +@docs visiblePainted, visibleFill, visibleStroke, painted @docs resize, horizontal, vertical -@docs contain, contain2, contain3, contain4, size, layout, style, paint +@docs contain, contain2, contain3, contain4, size, layout, paint -} @@ -1317,6 +1320,57 @@ normal = Value "normal" +{-| Sets `strict` value for usage with [`lineBreak`](#lineBreak) and [`contain`](#contain). + + contain strict + + lineBreak strict + +-} +strict : Value { provides | strict : Supported } +strict = + Value "strict" + + +{-| The `all` value used in properties such as [`columnSpan`](#columnSpan) +and [`pointerEvents`](#pointerEvents). + + columnSpan all_ + + pointerEvents all_ + +-} +all_ : Value { provides | all_ : Supported } +all_ = + Value "all" + + +{-| Sets `both` value for usage with [`clear`](#clear) and [`resize`](#resize). + + clear both + + resize both + +-} +both : Value { provides | both : Supported } +both = + Value "both" + + +{-| Sets `always` value for usage with [`scrollSnapStop`](#scrollSnapStop), [`pageBreakBefore`](#pageBreakBefore), and [`pageBreakAfter`](#pageBreakAfter). + + scrollSnapStop always + + pageBreakBefore always + + pageBreakAfter always + +-} +always : Value { provides | always : Supported } +always = + Value "always" + + {-| The `hidden` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`border style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). visibility hidden @@ -1625,6 +1679,32 @@ end = Value "end" +{-| Sets `x` value for usage with [`scrollSnapType2`](#scrollSnapType2) +and [`rotate2`](#rotate2). + + scrollSnapType2 x mandatory + + rotate x (deg 10) + +-} +x : Value { provides | x : Supported } +x = + Value "x" + + +{-| Sets `y` value for usage with [`scrollSnapType2`](#scrollSnapType2) +and [`rotate2`](#rotate2). + + scrollSnapType2 y mandatory + + rotate y (deg 50) + +-} +y : Value { provides | y : Supported } +y = + Value "y" + + {-| The `baseline` value, used in the following properties: - [`alignContent`](#alignContent) @@ -1735,6 +1815,33 @@ content = Value "content" +{-| The `fill` value used in properties such as [`objectFit`](#objectFit), +[`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder). + + objectFit fill_ + + pointerEvents fill_ + + paintOrder2 fill markers + +-} +fill_ : Value { provides | fill_ : Supported } +fill_ = + Value "fill" + + +{-| The `stroke` value used by [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder). + + pointerEvents stroke + + paintOrder2 stroke markers + +-} +stroke : Value { provides | stroke : Supported } +stroke = + Value "stroke" + + {-| The `text` value for the [`cursor`](#cursor), [`backgroundClip`](#backgroundClip), and [`user-select`](#userSelect) properties. @@ -1751,6 +1858,23 @@ text = Value "text" +{-| Sets the `style` value for: + + - [`contain`](#contain). **(This value is considered at-risk from being depreciated for this property.)** + - [`fontSynthesis`](#fontSynthesis) + +``` + contain style + + fontSynthesis style +``` + +-} +style : Value { provides | style : Supported } +style = + Value "style" + + {-| Sets `contain` for the following properties: - [`backgroundSize`](#backgroundSize) (It always show the whole background @@ -1817,13 +1941,14 @@ fullWidth = {-| A `sub` value for the following properties: - - [`fontVariantPosition](#fontVariantPosition) - - [`verticalAlign`](#verticalAlign) - + - [`fontVariantPosition`](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) +``` fontVariantPosition sub verticalAlign sub +``` -} sub : Value { provides | sub : Supported } @@ -1833,13 +1958,14 @@ sub = {-| A `super` value for the following properties: - - [`fontVariantPosition](#fontVariantPosition) - - [`verticalAlign`](#verticalAlign) - + - [`fontVariantPosition`](#fontVariantPosition) + - [`verticalAlign`](#verticalAlign) +``` fontVariantPosition super verticalAlign super +``` -} super : Value { provides | super : Supported } @@ -1847,6 +1973,7 @@ super = Value "super" + -- OVERFLOW -- @@ -11177,6 +11304,7 @@ under = Value "under" + -- WHITE-SPACE -- @@ -11518,19 +11646,6 @@ columnSpan (Value span) = AppendProperty ("column-span:" ++ span) -{-| The `all` value used in properties such as [`columnSpan`](#columnSpan) -and [`pointerEvents`](#pointerEvents). - - columnSpan all_ - - pointerEvents all_ - --} -all_ : Value { provides | all_ : Supported } -all_ = - Value "all" - - {-| Sets [`column-rule-width`](https://www.w3.org/TR/css-multicol-1/#propdef-column-rule-width) columnRuleWidth thin @@ -11835,20 +11950,24 @@ boundingBox = Value "bounding-box" -{-| A `slice` value for the [`strokeBreak`](#strokeBreak) property. +{-| A `slice` value for the [`strokeBreak`](#strokeBreak) and [`boxDecorationBreak`](#boxDecorationBreak) properties. strokeBreak slice + boxDecorationbreak clone + -} slice : Value { provides | slice : Supported } slice = Value "slice" -{-| A `clone` value for the [`strokeBreak`](#strokeBreak) property. +{-| A `clone` value for the [`strokeBreak`](#strokeBreak) and [`boxDecorationBreak`](#boxDecorationBreak) properties. strokeBreak clone + boxDecorationBreak clone + -} clone : Value { provides | clone : Supported } clone = @@ -13838,18 +13957,6 @@ clear (Value val) = AppendProperty ("clear:" ++ val) -{-| Sets `both` value for usage with [`clear`](#clear) and [`resize`](#resize). - - clear both - - resize both - --} -both : Value { provides | both : Supported } -both = - Value "both" - - {-| Sets `inline-start` value for usage with [`clear`](#clear). clear inlineStart @@ -14923,18 +15030,6 @@ ellipsis = Value "ellipsis" -{-| Sets `strict` value for usage with [`lineBreak`](#lineBreak) and [`contain`](#contain). - - contain strict - - lineBreak strict - --} -strict : Value { provides | strict : Supported } -strict = - Value "strict" - - {-| Sets `loose` value for usage with [`lineBreak`](#lineBreak). lineBreak loose @@ -15066,21 +15161,6 @@ mixBlendMode (Value val) = AppendProperty ("mix-blend-mode:" ++ val) -{-| The `fill` value used in properties such as [`objectFit`](#objectFit), -[`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder) - - objectFit fill_ - - pointerEvents fill_ - - paintOrder2 fill markers - --} -fill_ : Value { provides | fill_ : Supported } -fill_ = - Value "fill" - - {-| Sets `scale-down` value for usage with [`objectFit`](#objectFit). objectFit scaleDown @@ -15408,18 +15488,6 @@ painted = Value "painted" -{-| The `stroke` value used by [`pointerEvents`](#pointerEvents) and [`paintOrder`](#paintOrder). - - pointerEvents stroke - - paintOrder2 stroke markers - --} -stroke : Value { provides | stroke : Supported } -stroke = - Value "stroke" - - --- Scroll --- @@ -16268,20 +16336,6 @@ scrollSnapAlign (Value val) = AppendProperty ("scroll-snap-align:" ++ val) -{-| Sets `always` value for usage with [`scrollSnapStop`](#scrollSnapStop), [`pageBreakBefore`](#pageBreakBefore), and [`pageBreakAfter`](#pageBreakAfter). - - scrollSnapStop always - - pageBreakBefore always - - pageBreakAfter always - --} -always : Value { provides | always : Supported } -always = - Value "always" - - {-| Sets [`scroll-snap-stop`](https://css-tricks.com/almanac/properties/s/scroll-snap-stop/) scrollSnapStop normal @@ -16318,32 +16372,6 @@ scrollSnapType (Value val) = AppendProperty ("scroll-snap-type:" ++ val) -{-| Sets `x` value for usage with [`scrollSnapType2`](#scrollSnapType2) -and [`rotate2`](#rotate2). - - scrollSnapType2 x mandatory - - rotate x (deg 10) - --} -x : Value { provides | x : Supported } -x = - Value "x" - - -{-| Sets `y` value for usage with [`scrollSnapType2`](#scrollSnapType2) -and [`rotate2`](#rotate2). - - scrollSnapType2 y mandatory - - rotate y (deg 50) - --} -y : Value { provides | y : Supported } -y = - Value "y" - - {-| Sets `mandatory` value for usage with [`scrollSnapType2`](#scrollSnapType2). scrollSnapType2 x mandatory @@ -17014,21 +17042,6 @@ layout = Value "layout" -{-| Sets the `style` value for: - - - [`contain`](#contain). **(This value is considered at-risk from being depreciated for this property.)** - - [`fontSynthesis`](#fontSynthesis) - - contain style - - fontSynthesis style - --} -style : Value { provides | style : Supported } -style = - Value "style" - - {-| Sets the `paint` value for [`contain`](#contain). Indicates that descendants of the element will not From 49f851ef02d805f22e5af28ce0d94760fc85530a Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 6 Dec 2021 17:22:04 +0000 Subject: [PATCH 44/45] Rer-ordered shared values - Rearranged the shared values so values with similar effects and categories are next to each other. - Improved documentation --- src/Css.elm | 140 ++++++++++++++++++++++++++-------------------------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 2a170eac..0c1811bc 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -17,10 +17,10 @@ module Css exposing , contentBox, borderBox, paddingBox , left_, right_, top_, bottom_, block, inline, start, end , x, y - , baseline, clip, ruby + , clip , stretch, center, content, fill_, stroke, text, style - , cover, contain_, fullWidth - , sub, super + , cover, contain_ + , baseline, sub, super, ruby, fullWidth , pseudoClass, active, checked, disabled, empty, enabled , firstChild, firstOfType, focus, fullscreen, hover, inRange , indeterminate, invalid, lastChild, lastOfType, link, onlyChild @@ -265,10 +265,10 @@ Many different kinds of CSS properties use these values. @docs contentBox, borderBox, paddingBox @docs left_, right_, top_, bottom_, block, inline, start, end @docs x, y -@docs baseline, clip, ruby +@docs clip @docs stretch, center, content, fill_, stroke, text, style -@docs cover, contain_, fullWidth -@docs sub, super +@docs cover, contain_ +@docs baseline, sub, super, ruby, fullWidth # Pseudo-Classes @@ -1371,7 +1371,7 @@ always = Value "always" -{-| The `hidden` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`border style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). +{-| The `hidden` value used for properties such as [`visibility`](https://css-tricks.com/almanac/properties/v/visibility/), [`overflow`](https://css-tricks.com/almanac/properties/o/overflow/) and [`borderStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). visibility hidden @@ -1705,53 +1705,6 @@ y = Value "y" -{-| The `baseline` value, used in the following properties: - - - [`alignContent`](#alignContent) - - [`alignItems`](#alignItems) - - [`alignSelf`](#alignSelf) - - [`verticalAlign`](#verticalAlign) - -``` -alignItems baseline - -verticalAlign baseline -``` - --} -baseline : Value { provides | baseline : Supported } -baseline = - Value "baseline" - - -{-| The `clip` value used by [`overflow`](#overflow) and [`textOverflow`](#textOverflow). - - overflow clip - - overflowX clip - - overflowY clip - - textOverflow clip - --} -clip : Value { provides | clip : Supported } -clip = - Value "clip" - - -{-| The `ruby` value used by [`display`](#display) and [`fontVariantEastAsian`](#fontVariantEastAsian). - - display ruby - - fontVariantEastAsian2 ruby jis83 - --} -ruby : Value { provides | ruby : Supported } -ruby = - Value "ruby" - - {-| The `stretch` value used in the following properties: - [`alignContent`](#alignContent) @@ -1760,7 +1713,7 @@ ruby = - [`justifyContent`](#justifyContent) - [`justifyItems`](#justifyItems) - [`justifySelf`](#justifySelf) - - [\`strokeDashJustify](#strokeDashJustify) + - [`strokeDashJustify`](#strokeDashJustify) ``` alignContent stretch @@ -1875,6 +1828,22 @@ style = Value "style" +{-| The `clip` value used by [`overflow`](#overflow) and [`textOverflow`](#textOverflow). + + overflow clip + + overflowX clip + + overflowY clip + + textOverflow clip + +-} +clip : Value { provides | clip : Supported } +clip = + Value "clip" + + {-| Sets `contain` for the following properties: - [`backgroundSize`](#backgroundSize) (It always show the whole background @@ -1917,26 +1886,23 @@ cover = Value "cover" -{-| A `full-width` value for: - - -### [`textTransform`](#textTransform) - -Forces the writing of characters in a square so they can be aligned in East Asian scripts. - - -### [`fontVariantEastAsian`](#fontVariantEastAsian) +{-| The `baseline` value, used in the following properties: -Activates the East Asian characters that are roughly be the same width. + - [`alignContent`](#alignContent) + - [`alignItems`](#alignItems) + - [`alignSelf`](#alignSelf) + - [`verticalAlign`](#verticalAlign) - textTransform fullWidth +``` +alignItems baseline - fontVariantEastAsian fullWidth +verticalAlign baseline +``` -} -fullWidth : Value { provides | fullWidth : Supported } -fullWidth = - Value "full-width" +baseline : Value { provides | baseline : Supported } +baseline = + Value "baseline" {-| A `sub` value for the following properties: @@ -1973,6 +1939,40 @@ super = Value "super" +{-| The `ruby` value used by [`display`](#display) and [`fontVariantEastAsian`](#fontVariantEastAsian). + + display ruby + + fontVariantEastAsian2 ruby jis83 + +-} +ruby : Value { provides | ruby : Supported } +ruby = + Value "ruby" + + +{-| A `full-width` value for: + + +### [`textTransform`](#textTransform) + +Forces the writing of characters in a square so they can be aligned in East Asian scripts. + + +### [`fontVariantEastAsian`](#fontVariantEastAsian) + +Activates the East Asian characters that are roughly be the same width. + + textTransform fullWidth + + fontVariantEastAsian fullWidth + +-} +fullWidth : Value { provides | fullWidth : Supported } +fullWidth = + Value "full-width" + + -- OVERFLOW -- From a742834623b2c1b0a985db8b9be711550a6f86c4 Mon Sep 17 00:00:00 2001 From: Dzuk <32108484+dzuk-mutant@users.noreply.github.com> Date: Mon, 6 Dec 2021 18:20:17 +0000 Subject: [PATCH 45/45] Re-organised clip in docs and includes Forgot to move clip to it's more appropriate place in the shared values. --- src/Css.elm | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Css.elm b/src/Css.elm index 0c1811bc..7274683d 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -17,9 +17,8 @@ module Css exposing , contentBox, borderBox, paddingBox , left_, right_, top_, bottom_, block, inline, start, end , x, y - , clip , stretch, center, content, fill_, stroke, text, style - , cover, contain_ + , clip, cover, contain_ , baseline, sub, super, ruby, fullWidth , pseudoClass, active, checked, disabled, empty, enabled , firstChild, firstOfType, focus, fullscreen, hover, inRange @@ -265,9 +264,8 @@ Many different kinds of CSS properties use these values. @docs contentBox, borderBox, paddingBox @docs left_, right_, top_, bottom_, block, inline, start, end @docs x, y -@docs clip @docs stretch, center, content, fill_, stroke, text, style -@docs cover, contain_ +@docs clip, cover, contain_ @docs baseline, sub, super, ruby, fullWidth