diff --git a/0.18-src/Css.elm b/0.18-src/Css.elm deleted file mode 100644 index 64f1a1b2..00000000 --- a/0.18-src/Css.elm +++ /dev/null @@ -1,8370 +0,0 @@ -module Css - exposing - ( AlignItems - , All - , Angle - , AngleOrDirection - , BackgroundAttachment - , BackgroundBlendMode - , BackgroundClip - , BackgroundImage - , BackgroundOrigin - , BackgroundRepeat - , BackgroundRepeatShorthand - , BasicProperty - , BorderCollapse - , BorderStyle - , BoxSizing - , Calc - , CalcExpression - , Ch - , Cm - , Color - , ColorStop - , ColorValue - , Compatible - , Cursor - , Display - , Em - , Ex - , ExplicitLength - , FeatureTagValue - , FlexBasis - , FlexDirection - , FlexDirectionOrWrap - , FlexWrap - , FontFamily - , FontSize - , FontStyle - , FontStyleOrFeatureTagValue - , FontVariant - , FontVariantCaps - , FontVariantLigatures - , FontVariantNumeric - , FontWeight - , ImportType - , In - , IncompatibleUnits - , IntOrAuto - , JustifyContent - , Length - , LengthOrAuto - , LengthOrAutoOrCoverOrContain - , LengthOrMinMaxDimension - , LengthOrNone - , LengthOrNoneOrMinMaxDimension - , LengthOrNumber - , LengthOrNumberOrAutoOrNoneOrContent - , ListStyle - , ListStylePosition - , ListStyleType - , MinMaxDimension - , Mm - , NonMixable - , None - , Number - , Outline - , Overflow - , Pc - , Pct - , Position - , Pt - , Px - , Rem - , Resize - , Style - , TableLayout - , TextDecorationLine - , TextDecorationStyle - , TextIndent - , TextOrientation - , TextOverflow - , TextRendering - , TextTransform - , TouchAction - , Transform - , TransformBox - , TransformStyle - , Value - , VerticalAlign - , Vh - , Visibility - , Vmax - , Vmin - , Vw - , WhiteSpace - , Wrap - , absolute - , active - , after - , alignItems - , alignSelf - , all - , allPetiteCaps - , allScroll - , allSmallCaps - , animationName - , any - , arabicIndic - , armenian - , auto - , backgroundAttachment - , backgroundBlendMode - , backgroundClip - , backgroundColor - , backgroundImage - , backgroundOrigin - , backgroundPosition - , backgroundPosition2 - , backgroundRepeat - , backgroundRepeat2 - , backgroundSize - , backgroundSize2 - , baseline - , batch - , before - , bengali - , blink - , block - , bold - , bolder - , border - , border2 - , border3 - , borderBottom - , borderBottom2 - , borderBottom3 - , borderBottomColor - , borderBottomLeftRadius - , borderBottomLeftRadius2 - , borderBottomRightRadius - , borderBottomRightRadius2 - , borderBottomStyle - , borderBottomWidth - , borderBox - , borderCollapse - , borderColor - , borderColor2 - , borderColor3 - , borderColor4 - , borderImageOutset - , borderImageOutset2 - , borderImageOutset3 - , borderImageOutset4 - , borderImageWidth - , borderImageWidth2 - , borderImageWidth3 - , borderImageWidth4 - , borderLeft - , borderLeft2 - , borderLeft3 - , borderLeftColor - , borderLeftStyle - , borderLeftWidth - , borderRadius - , borderRadius2 - , borderRadius3 - , borderRadius4 - , borderRight - , borderRight2 - , borderRight3 - , borderRightColor - , borderRightStyle - , borderRightWidth - , borderSpacing - , borderSpacing2 - , borderStyle - , borderTop - , borderTop2 - , borderTop3 - , borderTopColor - , borderTopLeftRadius - , borderTopLeftRadius2 - , borderTopRightRadius - , borderTopRightRadius2 - , borderTopStyle - , borderTopWidth - , borderWidth - , borderWidth2 - , borderWidth3 - , borderWidth4 - , both - , bottom - , boxShadow - , boxShadow2 - , boxShadow3 - , boxShadow4 - , boxShadow5 - , boxShadow6 - , boxSizing - , breakWord - , calc - , capitalize - , cell - , center - , ch - , checked - , circle - , cjkEarthlyBranch - , cjkHeavenlyStem - , clip - , cm - , colResize - , collapse - , color - , colorBurn - , colorDodge - , column - , columnReverse - , commonLigatures - , contain - , content - , contentBox - , contextMenu - , contextual - , copy - , cover - , crosshair - , currentColor - , cursive - , cursor - , cursorAlias - , darken - , dashed - , decimal - , decimalLeadingZero - , default - , deg - , devanagari - , diagonalFractions - , difference - , disabled - , disc - , discretionaryLigatures - , display - , displayFlex - , dotted - , double - , eResize - , eachLine - , ellipsis - , em - , empty - , enabled - , end - , ewResize - , ex - , exclusion - , fantasy - , featureOff - , featureOn - , featureTag - , featureTag2 - , fill - , fillAvailable - , fillBox - , first - , firstChild - , firstLetter - , firstLine - , firstOfType - , fitContent - , fixed - , flat - , flex - , flex2 - , flex3 - , flexBasis - , flexDirection - , flexEnd - , flexFlow1 - , flexFlow2 - , flexGrow - , flexShrink - , flexStart - , flexWrap - , float - , focus - , fontFace - , fontFamilies - , fontFamily - , fontFeatureSettings - , fontFeatureSettingsList - , fontSize - , fontStyle - , fontVariant - , fontVariant2 - , fontVariant3 - , fontVariantCaps - , fontVariantLigatures - , fontVariantNumeric - , fontVariantNumeric2 - , fontVariantNumeric3 - , fontVariantNumerics - , fontWeight - , fullWidth - , fullscreen - , geometricPrecision - , georgian - , grab - , grabbing - , grad - , groove - , gujarati - , gurmukhi - , hanging - , hardLight - , height - , help - , hex - , hidden - , historicalLigatures - , horizontal - , hover - , hsl - , hsla - , hue - , important - , inches - , indeterminate - , inherit - , initial - , inline - , inlineBlock - , inlineFlex - , inlineListItem - , inlineTable - , inset - , inside - , int - , invalid - , italic - , justify - , justifyAll - , justifyContent - , kannada - , khmer - , lang - , lao - , large - , larger - , lastChild - , lastOfType - , left - , letterSpacing - , lighten - , lighter - , lineHeight - , lineThrough - , linearGradient - , linearGradient2 - , liningNums - , link - , listItem - , listStyle - , listStyle2 - , listStyle3 - , listStylePosition - , listStyleType - , local - , lowerAlpha - , lowerGreek - , lowerLatin - , lowerRoman - , lowercase - , luminosity - , malayalam - , manipulation - , margin - , margin2 - , margin3 - , margin4 - , marginBlockEnd - , marginBlockStart - , marginBottom - , marginInlineEnd - , marginInlineStart - , marginLeft - , marginRight - , marginTop - , matchParent - , matrix - , matrix3d - , maxContent - , maxHeight - , maxWidth - , medium - , middle - , minContent - , minHeight - , minWidth - , minus - , mm - , monospace - , move - , multiply - , myanmar - , nResize - , neResize - , neswResize - , noCommonLigatures - , noContextual - , noDiscretionaryLigatures - , noDrop - , noHistoricalLigatures - , noRepeat - , noWrap - , none - , normal - , notAllowed - , nsResize - , nthChild - , nthLastChild - , nthLastOfType - , nthOfType - , num - , nwResize - , nwseResize - , oblique - , oldstyleNums - , onlyChild - , onlyOfType - , opacity - , optimizeLegibility - , optimizeSpeed - , optional - , order - , ordinal - , oriya - , outOfRange - , outline - , outline3 - , outlineColor - , outlineOffset - , outlineStyle - , outlineWidth - , outset - , outside - , overflow - , overflowWrap - , overflowX - , overflowY - , overlay - , overline - , padding - , padding2 - , padding3 - , padding4 - , paddingBottom - , paddingBox - , paddingLeft - , paddingRight - , paddingTop - , painted - , panDown - , panLeft - , panRight - , panUp - , panX - , panY - , pc - , pct - , perspective - , petiteCaps - , pinchZoom - , plus - , pointer - , pointerEvents - , pointerEventsAll - , pointerEventsFill - , position - , pre - , preLine - , preWrap - , preserve3d - , progress - , property - , proportionalNums - , pseudoClass - , pseudoElement - , pt - , px - , qt - , rad - , readWrite - , relative - , rem - , repeat - , repeatX - , repeatY - , required - , resize - , rgb - , rgba - , ridge - , right - , root - , rotate - , rotate3d - , rotateX - , rotateY - , rotateZ - , round - , row - , rowResize - , rowReverse - , sResize - , sansSerif - , saturation - , scale - , scale2 - , scale3d - , scaleX - , scaleY - , scope - , screenBlendMode - , scroll - , seResize - , selection - , separate - , serif - , skew - , skew2 - , skewX - , skewY - , slashedZero - , small - , smallCaps - , smaller - , softLight - , solid - , space - , spaceAround - , spaceBetween - , square - , src_ - , stackedFractions - , start - , static - , sticky - , stop - , stop2 - , stretch - , stroke - , sub - , super - , swResize - , table - , tableCaption - , tableCell - , tableColumn - , tableColumnGroup - , tableFooterGroup - , tableHeaderGroup - , tableLayout - , tableRow - , tableRowGroup - , tabularNums - , target - , telugu - , textAlign - , textAlignLast - , textBottom - , textDecoration - , textDecoration2 - , textDecoration3 - , textDecorationLine - , textDecorationLines - , textDecorationStyle - , textDecorations - , textDecorations2 - , textDecorations3 - , textEmphasisColor - , textIndent - , textIndent2 - , textIndent3 - , textOrientation - , textOverflow - , textRendering - , textShadow - , textShadow2 - , textShadow3 - , textShadow4 - , textTop - , textTransform - , text_ - , thai - , thick - , thin - , titlingCaps - , toBottom - , toBottomLeft - , toBottomRight - , toLeft - , toRight - , toTop - , toTopLeft - , toTopRight - , top - , touchAction - , transform - , transformBox - , transformStyle - , transforms - , translate - , translate2 - , translate3d - , translateX - , translateY - , translateZ - , transparent - , true - , turn - , underline - , unicase - , unset - , upperAlpha - , upperLatin - , upperRoman - , uppercase - , url - , valid - , vertical - , verticalAlign - , verticalText - , vh - , viewBox - , visibility - , visible - , visibleFill - , visiblePainted - , visibleStroke - , visited - , vmax - , vmin - , vw - , wResize - , wait - , wavy - , whiteSpace - , width - , wrap - , wrapReverse - , xLarge - , xSmall - , xxLarge - , xxSmall - , zIndex - , zero - , zoomIn - , zoomOut - ) - -{-| Define CSS styles in Elm. - - import Css exposing (..) - import Html - import Html.Styled exposing (..) - import Html.Styled.Attributes exposing (css, href, src) - import Html.Styled.Events exposing (onClick) - - {-| A logo image, with inline styles that change on hover. - -} - logo : Html msg - logo = - img - [ src "logo.png" - , css - [ display inlineBlock - , padding (px 20) - , border3 (px 5) solid (rgb 120 120 120) - , hover - [ borderColor theme.primary - , borderRadius (px 10) - ] - ] - ] - [] - - {-| A plain old record holding a couple of theme colors. - -} - theme : { secondary : Color, primary : Color } - theme = - { primary = hex "55af6a" - , secondary = rgb 250 240 230 - } - - {-| A reusable button which has some styles pre-applied to it. - -} - btn : List (Attribute msg) -> List (Html msg) -> Html msg - btn = - styled button - [ margin (px 12) - , color (rgb 250 250 250) - , hover - [ backgroundColor theme.primary - , textDecoration underline - ] - ] - - {-| A reusable style. Css.batch combines multiple styles into one, much - like mixins in CSS preprocessors. - -} - paragraphFont : Style - paragraphFont = - Css.batch - [ fontFamilies [ "Palatino Linotype", "Georgia", "serif" ] - , fontSize (px 16) - , fontWeight normal - ] - - {-| Css.property lets you define custom properties, using strings as their values. - -} - legacyBorderRadius : String -> Style - legacyBorderRadius amount = - Css.batch - [ property "-moz-border-radius" amount - , property "-webkit-border-top-left-radius" amount - , property "-webkit-border-top-right-radius" amount - , property "-webkit-border-bottom-right-radius" amount - , property "-webkit-border-bottom-left-radius" amount - , property "border-radius" amount - ] - - view : Model -> Html Msg - view model = - nav [] - [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] [] - , btn [ onClick DoSomething ] [ text "Click me!" ] - ] - - main : Program Never Model Msg - main = - Html.beginnerProgram - { view = view >> toUnstyled - , update = update - , model = initialModel - } - -_See [`examples/readme/`](https://github.com/rtfeldman/elm-css/blob/master/examples/readme) to play around with this example._ - -The [`css`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes#css) -function accepts a list of [`Style`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Attributes#css) -values which roughly correspond to [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference). - - css - [ display inlineBlock - , padding (px 20) - , border3 (px 5) solid (rgb 120 120 120) - , hover - [ borderColor theme.primary - , borderRadius (px 10) - ] - ] - -Let's take a look at some of these declarations. - - display inlineBlock - -This compiles to the CSS declaration `display: inline-block;` - - -[_Kebab-case_](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles) CSS names become [_camelCase_](https://en.wikipedia.org/wiki/Camel_case) names in elm-css. - -The [`Css.display`](#display) function only accepts values that are compatible -with the CSS `display` property, such as [`inlineBlock`](#inlineBlock), [`flex`](#flex), [`none`](#none), [`inherit`](#inherit), etc. -If you try to pass `display` an invalid value such as [`pointer`](#pointer), it will not compile! - - padding (px 20) - -This compiles to the CSS declaration `padding: 20px;` - -Values with units such as [`px`](#px), [`em`](#em), and [`rem`](#rem) are implemented as functions. -The [`num`](#num) function compiles to unitless numbers; for example, `flexGrow (num 1)` compiles to `flex-grow: 1;`. - -[`zero`](#zero) is compatible with declarations that either do or do not expect units, so you can write -`padding zero` instead of something like `padding (px 0)`. (`padding zero` compiles to `padding: 0;`.) - - border3 (px 5) solid (rgb 120 120 120) - -The [`border3`](#border3) function shows a convention in elm-css: when a CSS property supports a variable number of arguments, as is the case with `border`, elm-css commonly provides multiple functions to support those alternatives. For example, [`border`](#border), [`border2`](#border2), and [`border3`](#border3). - - hover - [ borderColor theme.primary - , borderRadius (px 10) - ] - -CSS pseudo-classes like `:hover` are implemented as functions that take a list of declarations. - -The above compiles to something like this: - - ._c7f8ba:hover { - border-color: #55af6a; - border-raidus: 10px; - } - -Where does that funky classname of `_c7f8ba` come from? - -elm-css automatically generates this classname based on the declarations used, and -uses it to generate a ` - -To sum up what's happening here: - -1. When you define values using the `css` attribute, elm-css generates a classname and some style information. -2. That classname gets added to the element receiving the attiibute, and the style information gets stored in the `Html.Styled` value which wraps that element. -3. Calling `toUnstyled` converts this `Html.Styled` value to a normal `Html` value which represents both the requested element as well as a ` - -With the exception of [`Lazy`](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Lazy), -you can expect `toUnstyled` to create one ` - --} -pseudoClass : String -> List Style -> Style -pseudoClass class = - Preprocess.ExtendSelector (Structure.PseudoClassSelector class) - - -{-| An [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -active : List Style -> Style -active = - pseudoClass "active" - - -{-| An [`:any`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aany) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -any : String -> List Style -> Style -any str = - pseudoClass ("any(" ++ str ++ ")") - - -{-| A [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -checked : List Style -> Style -checked = - pseudoClass "checked" - - -{-| A [`:disabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Adisabled) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -disabled : List Style -> Style -disabled = - pseudoClass "disabled" - - -{-| An [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aempty) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -empty : List Style -> Style -empty = - pseudoClass "empty" - - -{-| An [`:enabled`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aenabled) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -enabled : List Style -> Style -enabled = - pseudoClass "enabled" - - -{-| A [`:first`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -first : List Style -> Style -first = - pseudoClass "first" - - -{-| A [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -firstChild : List Style -> Style -firstChild = - pseudoClass "first-child" - - -{-| A [`:first-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-of-type) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -firstOfType : List Style -> Style -firstOfType = - pseudoClass "first-of-type" - - -{-| A [`:fullscreen`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afullscreen) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -fullscreen : List Style -> Style -fullscreen = - pseudoClass "fullscreen" - - -{-| A [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -focus : List Style -> Style -focus = - pseudoClass "focus" - - -{-| An [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -hover : List Style -> Style -hover = - pseudoClass "hover" - - -{-| An [`:visited`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -visited : List Style -> Style -visited = - pseudoClass "visited" - - -{-| An [`:indeterminate`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aindeterminate) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -indeterminate : List Style -> Style -indeterminate = - pseudoClass "indeterminate" - - -{-| An [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ainvalid) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -invalid : List Style -> Style -invalid = - pseudoClass "invalid" - - -{-| A [`:lang`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alang) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -lang : String -> List Style -> Style -lang str = - pseudoClass ("lang(" ++ str ++ ")") - - -{-| A [`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-child) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -lastChild : List Style -> Style -lastChild = - pseudoClass "last-child" - - -{-| A [`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-of-type) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -lastOfType : List Style -> Style -lastOfType = - pseudoClass "last-of-type" - - -{-| A [`:link`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alink) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -link : List Style -> Style -link = - pseudoClass "link" - - -{-| An [`:nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -nthChild : String -> List Style -> Style -nthChild str = - pseudoClass ("nth-child(" ++ str ++ ")") - - -{-| An [`:nth-last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-last-child) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -nthLastChild : String -> List Style -> Style -nthLastChild str = - pseudoClass ("nth-last-child(" ++ str ++ ")") - - -{-| An [`:nth-last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-last-of-type) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -nthLastOfType : String -> List Style -> Style -nthLastOfType str = - pseudoClass ("nth-last-of-type(" ++ str ++ ")") - - -{-| An [`:nth`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-of-type) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -nthOfType : String -> List Style -> Style -nthOfType str = - pseudoClass ("nth-of-type(" ++ str ++ ")") - - -{-| An [`:only-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aonly-child) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -onlyChild : List Style -> Style -onlyChild = - pseudoClass "only-child" - - -{-| An [`:only-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aonly-of-type) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -onlyOfType : List Style -> Style -onlyOfType = - pseudoClass "only-of-type" - - -{-| An [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aoptional) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -optional : List Style -> Style -optional = - pseudoClass "optional" - - -{-| An [`:out-of-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aout-of-range) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -outOfRange : List Style -> Style -outOfRange = - pseudoClass "out-of-range" - - -{-| A [`:read-write`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aread-write) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -readWrite : List Style -> Style -readWrite = - pseudoClass "read-write" - - -{-| A [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Arequired) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -required : List Style -> Style -required = - pseudoClass "required" - - -{-| A [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aroot) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -root : List Style -> Style -root = - pseudoClass "root" - - -{-| A [`:scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ascope) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -scope : List Style -> Style -scope = - pseudoClass "scope" - - -{-| A [`:target`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Atarget) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -target : List Style -> Style -target = - pseudoClass "target" - - -{-| A [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avalid) -[pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). --} -valid : List Style -> Style -valid = - pseudoClass "valid" - - - --- Pseudo-Elements -- - - -{-| Define a custom pseudo-element. - - textarea - [ css [ pseudoElement "-webkit-scrollbar" [ display none ] ] ] - [] - -...outputs - - - - - --} -pseudoElement : String -> List Style -> Style -pseudoElement element = - Preprocess.WithPseudoElement (Structure.PseudoElement element) - - -{-| An [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) -[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). --} -after : List Style -> Style -after = - pseudoElement "after" - - -{-| A [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore) -[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). --} -before : List Style -> Style -before = - pseudoElement "before" - - -{-| A [`::first-letter`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter) -[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). --} -firstLetter : List Style -> Style -firstLetter = - pseudoElement "first-letter" - - -{-| A [`::first-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-line) -[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). --} -firstLine : List Style -> Style -firstLine = - pseudoElement "first-line" - - -{-| A [`::selection`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aselection) -[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). --} -selection : List Style -> Style -selection = - pseudoElement "selection" - - - --- Intentionally Unsupported -- - - -type IntentionallyUnsupportedPleaseSeeDocs - = IntentionallyUnsupportedPleaseSeeDocs - - -{-| The -[border width values](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) -of `thin`, `medium`, and `thick` have unspecified behavior according to the -CSS specification, and as such are intentionally unsupported. - -Using them is a bad idea, but if the fate of the world depends on it, you can -fall back on something like this: - - css [ property "border-left" "thin" ] - --} -thin : IntentionallyUnsupportedPleaseSeeDocs -thin = - IntentionallyUnsupportedPleaseSeeDocs - - -{-| The -[border width values](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) -of `thin`, `medium`, and `thick` have unspecified behavior according to the -CSS specification, and as such are intentionally unsupported. - -Using them is a bad idea, but if the fate of the world depends on it, you can -fall back on something like this: - - css [ property "border-left" "thick" ] - --} -thick : IntentionallyUnsupportedPleaseSeeDocs -thick = - IntentionallyUnsupportedPleaseSeeDocs - - -{-| [`blink`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#Value) -is ~~totally rad~~ deprecated, and as such has been ~~reluctantly~~ omitted -from elm-css. --} -blink : IntentionallyUnsupportedPleaseSeeDocs -blink = - IntentionallyUnsupportedPleaseSeeDocs - - -stringToInt : String -> Int -stringToInt str = - Result.withDefault 0 <| String.toInt str - - -numericalPercentageToString : Float -> String -numericalPercentageToString value = - toString (value * 100) ++ "%" - - -valuesOrNone : List (Value compatible) -> Value {} -valuesOrNone list = - if List.isEmpty list then - { value = "none" } - else - { value = String.join " " (List.map .value list) } - - -stringsToValue : List String -> Value {} -stringsToValue list = - if List.isEmpty list then - { value = "none" } - else - { value = String.join ", " (List.map (\s -> s) list) } - - -{-| Sets [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) - - zIndex (int 2) - -See for a useful library -to manage z-index values. - --} -zIndex : IntOrAuto compatible -> Style -zIndex = - prop1 "z-index" - - - -{- Touch Action -} - - -{-| The `pan-x` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panX : TouchAction {} -panX = - { value = "pan-x" - , touchAction = Compatible - } - - -{-| The `pan-left` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panLeft : TouchAction {} -panLeft = - { value = "pan-left" - , touchAction = Compatible - } - - -{-| The `pan-right` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panRight : TouchAction {} -panRight = - { value = "pan-right" - , touchAction = Compatible - } - - -{-| The `pan-y` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panY : TouchAction {} -panY = - { value = "pan-y" - , touchAction = Compatible - } - - -{-| The `pan-up` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panUp : TouchAction {} -panUp = - { value = "pan-up" - , touchAction = Compatible - } - - -{-| The `pan-down` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -panDown : TouchAction {} -panDown = - { value = "pan-down" - , touchAction = Compatible - } - - -{-| The `pinch-zoom` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -pinchZoom : TouchAction {} -pinchZoom = - { value = "pinch-zoom" - , touchAction = Compatible - } - - -{-| The `manipulation` value for the [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. --} -manipulation : TouchAction {} -manipulation = - { value = "manipulation" - , touchAction = Compatible - } - - -{-| Sets [`touch-action`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) property. - -touchAction (auto | none | panX | panLeft | panRight | panY | panUp | panDown | pinchZoom | manipulation | inherit | initial | unset) - --} -touchAction : TouchAction compatible -> Style -touchAction = - prop1 "touch-action" - - - -{- TABLE LAYOUT -} - - -{-| Sets [`table-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) property. - -tableLayout (auto | fixed | inherit | initial | unset) - --} -tableLayout : TableLayout compatible -> Style -tableLayout = - prop1 "table-layout" - - - -{- POINTER-EVENTS PROPERTY -} - - -{-| The [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values) -property specifies under what circumstances (if any) a particular graphic -element can become the target of mouse events. --} -pointerEvents : PointerEvents compatible -> Style -pointerEvents = - prop1 "pointer-events" - - - -{- POINTER-EVENTS VALUES -} - - -{-| A `visiblePainted` [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) value. - - pointer-events: visiblePainted - --} -visiblePainted : PointerEvents {} -visiblePainted = - { value = "visiblePainted", pointerEvents = Compatible } - - -{-| A `visibleFill` [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) value. - - pointer-events: visibleFill - --} -visibleFill : PointerEvents {} -visibleFill = - { value = "visibleFill", pointerEvents = Compatible } - - -{-| A `visibleStroke` [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) value. - - pointer-events: visibleStroke - --} -visibleStroke : PointerEvents {} -visibleStroke = - { value = "visibleStroke", pointerEvents = Compatible } - - -{-| A `painted` [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) value. - - pointer-events: painted - --} -painted : PointerEvents {} -painted = - { value = "painted", pointerEvents = Compatible } - - -{-| `property-events: fill`. This works around the fact that -[`fill` is already taken](#fill). --} -pointerEventsFill : Style -pointerEventsFill = - property "pointer-events" "fill" - - -{-| `property-events: all`. This works around the fact that -[`all` is already taken](#all). --} -pointerEventsAll : Style -pointerEventsAll = - property "pointer-events" "all" - - -{-| A `stroke` [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) value. - - pointer-events: stroke - --} -stroke : PointerEvents {} -stroke = - { value = "stroke", pointerEvents = Compatible } diff --git a/0.18-src/Css/Animations.elm b/0.18-src/Css/Animations.elm deleted file mode 100644 index 30d5bdfa..00000000 --- a/0.18-src/Css/Animations.elm +++ /dev/null @@ -1,204 +0,0 @@ -module Css.Animations - exposing - ( Keyframes - , Property - , all - , backgroundColor - , backgroundSize - , backgroundSize2 - , border - , border2 - , border3 - , borderBottom - , borderBottom2 - , borderBottom3 - , custom - , keyframes - , opacity - , property - , transform - ) - -{-| - - -# Animations - -@docs Property, keyframes, Keyframes - - -# Animatable Properties - -As [MDN explains](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties), only certain CSS properties are animatable. - -Some of the animatable properties (except for experimental properties, or properties with browser prefixes) are listed here. Many of them share a name and similar type with `Style` equivalents in the `Css` module, but they are different in that unlike `Style`s, animatable properties [are not compatible with `!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe) or various selectors or media queries. - -**NOTE:** We're looking to expand this list, but only on the `phantom-types` branch! See - -@docs opacity, transform, all, backgroundSize, backgroundSize2, border, property, backgroundColor, border2, border3, borderBottom, borderBottom2, borderBottom3, custom - --} - -import Css.Internal exposing (AnimationProperty(..), ColorValue, ExplicitLength, Length, LengthOrAutoOrCoverOrContain, lengthConverter, lengthForOverloadedProperty) -import Css.Preprocess as Preprocess -import Css.Structure exposing (Compatible(..)) - - -{-| An [animatable property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). - -Many of these share a name and similar type with `Style` equivalents in the `Css` module, but they are different in that unlike `Style`s, animatable properties [are not compatible with `!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe) or various selectors or media queries. - -If you need to use an experimental or vendor-prefixed animatable property, see [`custom`](#custom). - --} -type alias Property = - AnimationProperty - - -type alias Style = - Preprocess.Style - - -{-| -} -type alias Keyframes compatible = - { compatible | keyframes : Compatible, none : Compatible, value : String } - - -{-| Specify a list of ( percentage, properties) tuples to use for -animation keyframes. - -Pass the result to [`Css.animationName`](Css#animationName)! - -`keyframes []` is equivalent to `none`. - --} -keyframes : List ( Int, List Property ) -> Keyframes {} -keyframes tuples = - if List.isEmpty tuples then - -- animationName is special-cased to pick up on this. - { value = "none" - , none = Compatible - , keyframes = Compatible - } - else - { value = Css.Internal.compileKeyframes tuples - , none = Compatible - , keyframes = Compatible - } - - - --- ANIMATABLE PROPERTIES - - -{-| Create a custom animatable property with the given name and value. You can use this to define vendor-prefixed or experimental properties. - - custom "-moz-outline-radius" "25px" - -**WARNING:** Some properties are not exposed in this module because they -are not animatable! This means browsers will refuse to animate them even if you pass them to this function. - -MDN has [a list of the animatable properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). - --} -custom : String -> String -> Property -custom name value = - Property (name ++ ":" ++ value) - - -{-| -} -all : { compatible | value : String, all : Compatible } -> Property -all { value } = - Property ("all:" ++ value) - - -{-| -} -backgroundColor : { compatible | value : String, color : Compatible } -> Property -backgroundColor { value } = - Property ("background-color:" ++ value) - - -{-| -} -backgroundSize : LengthOrAutoOrCoverOrContain compatible -> Property -backgroundSize { value } = - Property ("background-size:" ++ value) - - -{-| -} -backgroundSize2 : LengthOrAutoOrCoverOrContain compatible -> LengthOrAutoOrCoverOrContain compatible -> Property -backgroundSize2 arg1 arg2 = - Property ("background-size:" ++ arg1.value ++ " " ++ arg2.value) - - -{-| -} -border : Length compatible units -> Property -border { value } = - Property ("border:" ++ value) - - -{-| -} -border2 : Length compatible units -> Length compatible units -> Property -border2 arg1 arg2 = - Property ("border:" ++ arg1.value ++ " " ++ arg2.value) - - -{-| -} -border3 : Length compatible units -> Length compatible units -> Length compatible units -> Property -border3 arg1 arg2 arg3 = - Property ("border:" ++ arg1.value ++ " " ++ arg2.value ++ " " ++ arg3.value) - - -{-| -} -borderBottom : Length compatible units -> Property -borderBottom { value } = - Property ("border-bottom:" ++ value) - - -{-| -} -borderBottom2 : Length compatible units -> Length compatible units -> Property -borderBottom2 arg1 arg2 = - Property ("border-bottom:" ++ arg1.value ++ " " ++ arg2.value) - - -{-| -} -borderBottom3 : Length compatible units -> Length compatible units -> Length compatible units -> Property -borderBottom3 arg1 arg2 arg3 = - Property ("border-bottom:" ++ arg1.value ++ " " ++ arg2.value ++ " " ++ arg3.value) - - -{-| -} -opacity : { compatible | value : String, number : Compatible } -> Property -opacity { value } = - Property ("opacity:" ++ value) - - -{-| -} -transform : List { compatible | value : String, transform : Compatible } -> Property -transform values = - Property <| - if List.isEmpty values then - "transform:none" - else - "transform:" ++ String.join " " (List.map .value values) - - -{-| Define a custom animatable property. - - css [ animationName (keyframes [ ( 5, property "backdrop-filter" "blur(3px)" ) ]) ] - -...outputs - - @keyframes _cf0d1b { - 5% { - backdrop-filter:blur(3px); - } - } - - ... - - animation-name: _cf0d1b - --} -property : String -> String -> Property -property key value = - Property (key ++ ":" ++ value) diff --git a/0.18-src/Css/Colors.elm b/0.18-src/Css/Colors.elm deleted file mode 100644 index 139d0ea9..00000000 --- a/0.18-src/Css/Colors.elm +++ /dev/null @@ -1,137 +0,0 @@ -module Css.Colors exposing (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow) - -{-| A nicer default set of colors than the ones CSS ships with. Color codes taken from [clrs.cc](http://clrs.cc). - - css [ backgroundColor blue ] - -...compiles to: - - backgroundColor: #0074D9; - - -# Colors - -@docs navy, blue, aqua, teal, olive, green, lime, yellow, orange, red, maroon, fuchsia, purple, black, gray, silver, white - --} - -import Css exposing (Color, hex) - - -{-| --} -navy : Color -navy = - hex "001F3F" - - -{-| --} -blue : Color -blue = - hex "0074D9" - - -{-| --} -aqua : Color -aqua = - hex "7FDBFF" - - -{-| --} -teal : Color -teal = - hex "39CCCC" - - -{-| --} -olive : Color -olive = - hex "3D9970" - - -{-| --} -green : Color -green = - hex "2ECC40" - - -{-| --} -lime : Color -lime = - hex "01FF70" - - -{-| --} -yellow : Color -yellow = - hex "FFDC00" - - -{-| --} -orange : Color -orange = - hex "FF851B" - - -{-| --} -red : Color -red = - hex "FF4136" - - -{-| --} -maroon : Color -maroon = - hex "85144b" - - -{-| --} -fuchsia : Color -fuchsia = - hex "F012BE" - - -{-| --} -purple : Color -purple = - hex "B10DC9" - - -{-| --} -black : Color -black = - hex "111111" - - -{-| --} -gray : Color -gray = - hex "AAAAAA" - - -{-| --} -silver : Color -silver = - hex "dddddd" - - -{-| --} -white : Color -white = - hex "ffffff" diff --git a/0.18-src/Css/Global.elm b/0.18-src/Css/Global.elm deleted file mode 100644 index 9e028ed6..00000000 --- a/0.18-src/Css/Global.elm +++ /dev/null @@ -1,1150 +0,0 @@ -module Css.Global - exposing - ( Snippet - , a - , adjacentSiblings - , article - , aside - , audio - , blockquote - , body - , button - , canvas - , caption - , children - , circle - , class - , code - , col - , colgroup - , dd - , descendants - , details - , div - , dl - , dt - , each - , ellipse - , em - , everything - , fieldset - , footer - , form - , generalSiblings - , global - , h1 - , h2 - , h3 - , h4 - , h5 - , h6 - , header - , hr - , html - , i - , id - , img - , input - , label - , legend - , li - , line - , main_ - , media - , mediaQuery - , menu - , nav - , ol - , optgroup - , option - , p - , path - , polygon - , polyline - , pre - , progress - , q - , rect - , section - , select - , selector - , small - , span - , strong - , summary - , svg - , table - , tbody - , td - , textarea - , tfoot - , th - , thead - , time - , tr - , typeSelector - , ul - , video - , withAttribute - , withClass - ) - -{-| Apply global CSS to things like foreign DOM structures (e.g. generated -from markdown) where you cannot add attributes. - -This module relies on CSS selectors which are [globally scoped and -bad for maintainability](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284), -so definitely avoid using this module except when there is no reasonable way -do to it using `Style` instead! - - -# Global Styles - -@docs global, Snippet - - -# Statements - -@docs class, id, selector, everything, media, mediaQuery - - -# Combinators - -@docs children, descendants, adjacentSiblings, generalSiblings, each, withAttribute, withClass - - -# Basic elements - -@docs typeSelector, html, body - - -# Content sectioning - -@docs article, header, footer, h1, h2, h3, h4, h5, h6, nav, menu, section, aside, time, details, summary - - -# Text content - -@docs div, hr, li, main_, ol, p, ul, pre, dl, dt, dd, blockquote - - -# Inline text semantics - -@docs a, code, small, span, strong, i, em, q - - -# Image and multimedia - -@docs img, audio, video, canvas - - -# Table content - -@docs caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr - - -# Forms - -@docs button, fieldset, form, input, label, legend, optgroup, option, progress, select, textarea - - -# SVG - -@docs svg, path, rect, circle, ellipse, line, polyline, polygon - --} - -import Css.Media exposing (MediaQuery) -import Css.Preprocess as Preprocess - exposing - ( Snippet(..) - , SnippetDeclaration(..) - , Style - , StyleBlock(..) - , unwrapSnippet - ) -import Css.Preprocess.Resolve as Resolve -import Css.Structure as Structure -import Html.Styled -import VirtualDom -import VirtualDom.Styled exposing (makeSnippet) - - -{-| Add global styles to the page. This compiles directly to a `