From e5d410405ddc2214901c36dc86584e8648fdda48 Mon Sep 17 00:00:00 2001 From: Vasiliy Yorkin Date: Fri, 6 Jul 2018 22:43:04 +0300 Subject: [PATCH] Add outline CSS property --- src/CSS.purs | 2 +- src/CSS/Border.purs | 3 +++ test/Main.purs | 13 +++++++++---- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/CSS.purs b/src/CSS.purs index 1806107..7e62af7 100644 --- a/src/CSS.purs +++ b/src/CSS.purs @@ -2,7 +2,7 @@ module CSS (module X) where import CSS.Animation (AnimationDirection(..), AnimationName(..), FillMode(..), IterationCount(..), alternate, alternateReverse, animation, backwards, forwards, infinite, iterationCount, normalAnimationDirection, reverse) as X import CSS.Background (class Background, class Loc, BackgroundAttachment, BackgroundClip, BackgroundImage, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, Direction, Location, Side, angular, attachFixed, attachScroll, background, backgroundAttachment, backgroundAttachments, backgroundClip, backgroundClips, backgroundColor, backgroundImage, backgroundImages, backgroundOrigin, backgroundOrigins, backgroundPosition, backgroundPositions, backgroundRepeat, backgroundRepeats, backgroundSize, backgroundSizes, boxClip, by, contain, cover, location, noRepeat, origin, placed, positioned, repeat, repeatX, repeatY, round, sideBottom, sideCenter, sideLeft, sideMiddle, sideRight, sideTop, space, straight, url, xyRepeat) as X -import CSS.Border (Stroke(..), border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderTop, dashed, dotted, double, groove, inset, outset, ridge, solid, wavy) as X +import CSS.Border (Stroke(..), outline, border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderTop, dashed, dotted, double, groove, inset, outset, ridge, solid, wavy) as X import CSS.Box (BoxType, borderBox, boxShadow, boxSizing, contentBox, insetBoxShadow, paddingBox) as X import CSS.Color (Color, ColorSpace(..), aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brightness, brown, burlywood, cadetblue, chartreuse, chocolate, complementary, contrast, coral, cornflowerblue, cornsilk, crimson, cssStringHSLA, cssStringRGBA, cyan, darkblue, darkcyan, darken, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, desaturate, dimgray, dimgrey, distance, dodgerblue, firebrick, floralwhite, forestgreen, fromHexString, fromInt, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, graytone, green, greenyellow, grey, honeydew, hotpink, hsl, hsla, indianred, indigo, isLight, isReadable, ivory, khaki, lab, lavender, lavenderblush, lawngreen, lch, lemonchiffon, lightblue, lightcoral, lightcyan, lighten, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, luminance, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mix, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rgb, rgb', rgba, rgba', rosybrown, rotateHue, royalblue, saddlebrown, salmon, sandybrown, saturate, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, textColor, thistle, toGray, toHSLA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, tomato, turquoise, violet, wheat, white, whitesmoke, xyz, yellow, yellowgreen) as X import CSS.Display (ClearFloat(..), Display(..), Float(..), Position(..), absolute, block, clear, clearBoth, clearInlineEnd, clearInlineStart, clearLeft, clearRight, display, displayInherit, displayNone, fixed, flex, float, floatLeft, floatRight, grid, inline, inlineBlock, inlineFlex, inlineGrid, inlineTable, listItem, position, relative, runIn, static, table, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup, zIndex) as X diff --git a/src/CSS/Border.purs b/src/CSS/Border.purs index 7ec3343..965cdba 100644 --- a/src/CSS/Border.purs +++ b/src/CSS/Border.purs @@ -65,3 +65,6 @@ borderColor = key $ fromString "border-color" borderRadius :: forall a. Size a -> Size a -> Size a -> Size a -> CSS borderRadius a b c d = key (fromString "border-radius") (tuple4 a b c d) + +outline :: Stroke -> Size Abs -> Color -> CSS +outline a b c = key (fromString "outline") $ tuple3 a b c diff --git a/test/Main.purs b/test/Main.purs index ed5214e..2138fa3 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -4,7 +4,7 @@ import Prelude import Effect (Effect) import Effect.Exception (error, throwException) -import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, px, dashed, border, inlineBlock, red, (?), fontFaceSrc, zIndex) +import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, violet, color, body, px, dashed, solid, border, outline, inlineBlock, red, (?), fontFaceSrc, zIndex) import Data.Maybe (Maybe(..)) import Data.NonEmpty (singleton) @@ -17,10 +17,14 @@ example2 :: Rendered example2 = render do display inlineBlock -example3 :: Rendered -example3 = render do +example3a :: Rendered +example3a = render do border dashed (px 2.0) blue +example3b :: Rendered +example3b = render do + outline solid (px 1.0) violet + example4 :: Rendered example4 = render do body ? do @@ -59,7 +63,8 @@ main :: Effect Unit main = do renderedInline example1 `assertEqual` Just "color: hsl(0.0, 100.0%, 50.0%); display: block" renderedInline example2 `assertEqual` Just "display: inline-block" - renderedInline example3 `assertEqual` Just "border: dashed 2.0px hsl(240.0, 100.0%, 50.0%) " + renderedInline example3a `assertEqual` Just "border: dashed 2.0px hsl(240.0, 100.0%, 50.0%) " + renderedInline example3b `assertEqual` Just "outline: solid 1.0px hsl(300.0, 76.06%, 72.16%) " selector (Selector (Refinement [Id "test"]) Star) `assertEqual` "#test"