Merge pull request #91 from vyorkin-forks/feature/add-opacity

Add opacity

Author: garyb

src/CSS.purs

@@ -5,7 +5,7 @@ import CSS.Background (class Background, class Loc, BackgroundAttachment, Backgr
 import CSS.Border (Stroke(..), 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
+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, opacity) as X
 import CSS.Elements (a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, datalist, dd, del, details, dfn, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, main, map, mark, meter, nav, object, ol, optgroup, output, p, pre, progress, q, s, samp, section, small, span, strong, sub, summary, sup, tbody, td, textarea, tfoot, th, thead, tr, u, ul, var) as X
 import CSS.Flexbox (class FlexEnd, class FlexStart, class SpaceAround, class SpaceBetween, class Stretch, AlignContentValue(..), AlignItemsValue(..), AlignSelfValue(..), FlexDirection(..), FlexWrap(..), JustifyContentValue(..), alignContent, alignItems, alignSelf, column, columnReverse, flexBasis, flexDirection, flexEnd, flexFlow, flexGrow, flexShrink, flexStart, flexWrap, justifyContent, nowrap, order, row, rowReverse, spaceAround, spaceBetween, stretch, wrap, wrapReverse) as X
 import CSS.FontFace (FontFaceFormat(..), FontFaceSrc(..), fontFaceFamily, fontFaceSrc, formatName) as X

src/CSS/Display.purs

@@ -183,5 +183,8 @@ clearInlineEnd = ClearFloatInlineEnd
 clear :: ClearFloat -> CSS
 clear = key (fromString "clear")
 
+opacity :: Number -> CSS
+opacity = key $ fromString "opacity"
+
 zIndex :: Int -> CSS
 zIndex = key (fromString "z-index") <<< show

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, a, p, px, dashed, border, inlineBlock, red, (?), (##), (|>), (**), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow)
+import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, (?), (##), (|>), (**), hover, fontFaceSrc, fontStyle, deg, zIndex, textOverflow, opacity)
 import CSS.FontStyle as FontStyle
 import CSS.Text.Overflow as TextOverflow
 import Data.Maybe (Maybe(..))
@@ -42,6 +42,7 @@ example6 = render do
 example7 :: Rendered
 example7 = render do
   zIndex 11
+  opacity 0.5
 
 withSelector :: Rendered
 withSelector = render do
@@ -118,7 +119,7 @@ main = do
 
   renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")"
 
-  renderedInline example7 `assertEqual` Just "z-index: 11"
+  renderedInline example7 `assertEqual` Just "z-index: 11; opacity: 0.5"
 
   renderedInline exampleFontStyle1 `assertEqual` Just "font-style: italic"
   renderedInline exampleFontStyle2 `assertEqual` Just "font-style: oblique"