diff --git a/css/extra.css b/css/extra.css index 75ff8e1..d6bd371 100644 --- a/css/extra.css +++ b/css/extra.css @@ -67,3 +67,18 @@ ul.list-style-none > li, .list-style-none ul > li { padding:0; } + +/* + * Visually hidden + * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/ + */ +.visually-hidden { + position:absolute; + overflow:hidden; + clip:rect(0 0 0 0); + width:1px; + height:1px; + margin:-1px; + padding:0; + border:0; +} diff --git a/css/transitions.css b/css/transitions.css index 7082cb3..7e5cddd 100644 --- a/css/transitions.css +++ b/css/transitions.css @@ -4,23 +4,53 @@ */ /* transition */ .t { - transition-duration:.25s; - transition-property:all; - transition-timing-function:ease; - transition-delay:0s; + transition-duration:.25s; + transition-property:all; + transition-timing-function:ease; + transition-delay:0s; } /* slow */ .t-slow { - transition-duration:.6s; + transition-duration:.6s; } /* fast */ .t-fast { - transition-duration:.1s; + transition-duration:.1s; } /* opacity */ .t-opacity { - transition-property:opacity; + transition-property:opacity; +} + +/* opacity-color */ +.t-opacity-color { + transition-property:opacity, color; +} + +/* transform */ +.t-transform { + transition-property:transform; +} + +/* transform-opacity */ +.t-transform-opacity { + transition-property:transform, opacity; +} + +/* transform-opacity-color */ +.t-transform-opacity-color { + transition-property:transform, opacity, color; +} + +/* transform-color */ +.t-transform-color { + transition-property:transform, color; +} + +/* color */ +.t-color { + transition-property:color; } diff --git a/dist/atomic.css b/dist/atomic.css index 21fd3d9..7d7ee2c 100644 --- a/dist/atomic.css +++ b/dist/atomic.css @@ -1,5 +1,5 @@ /*! -* Atomic CSS 1.1.9 +* Atomic CSS 1.1.10 * https://github.com/viivue/atomic-css */ /** @@ -647,6 +647,36 @@ transition-property:opacity; } +/* opacity-color */ +.t-opacity-color { + transition-property:opacity, color; +} + +/* transform */ +.t-transform { + transition-property:transform; +} + +/* transform-opacity */ +.t-transform-opacity { + transition-property:transform, opacity; +} + +/* transform-opacity-color */ +.t-transform-opacity-color { + transition-property:transform, opacity, color; +} + +/* transform-color */ +.t-transform-color { + transition-property:transform, color; +} + +/* color */ +.t-color { + transition-property:color; +} + /** * Object fit * https://stackoverflow.design/product/base/object-fit/ @@ -1034,3 +1064,18 @@ ul.list-style-none > li, .list-style-none ul > li { padding:0; } + +/* + * Visually hidden + * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/ + */ +.visually-hidden { + position:absolute; + overflow:hidden; + clip:rect(0 0 0 0); + width:1px; + height:1px; + margin:-1px; + padding:0; + border:0; +} diff --git a/dist/atomic.min.css b/dist/atomic.min.css index 4911511..9fc1844 100644 --- a/dist/atomic.min.css +++ b/dist/atomic.min.css @@ -1,5 +1,5 @@ /*! -* Atomic CSS 1.1.9 +* Atomic CSS 1.1.10 * https://github.com/viivue/atomic-css */ -.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0:0}.pt0{padding-top:var(--spacing-0)}.pb0{padding-bottom:var(--spacing-0)}.mt0{margin-top:var(--spacing-0)}.mb0{margin-bottom:var(--spacing-0)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0} \ No newline at end of file +.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0:0}.pt0{padding-top:var(--spacing-0)}.pb0{padding-bottom:var(--spacing-0)}.mt0{margin-top:var(--spacing-0)}.mb0{margin-bottom:var(--spacing-0)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.t-opacity-color{transition-property:opacity,color}.t-transform{transition-property:transform}.t-transform-opacity{transition-property:transform,opacity}.t-transform-opacity-color{transition-property:transform,opacity,color}.t-transform-color{transition-property:transform,color}.t-color{transition-property:color}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0} \ No newline at end of file diff --git a/package.json b/package.json index 2efd84a..04bb8ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@viivue/atomic-css", - "version": "1.1.9", + "version": "1.1.10", "description": "⚛️ Customizable Atomic CSS Framework.", "main": "./dist/atomic.min.css", "scripts": { diff --git a/scss/_defs.scss b/scss/_defs.scss index a19f8e6..7730114 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -1,7 +1,7 @@ /// Definitions /// DO NOT EDIT! -$version: "1.1.9"; +$version: "1.1.10"; $info: (); // axes diff --git a/scss/extra.scss b/scss/extra.scss index 9a4126c..0ea6d07 100644 --- a/scss/extra.scss +++ b/scss/extra.scss @@ -73,4 +73,20 @@ ul.list-style-none, ul.list-style-none > li, .list-style-none ul > li { padding: 0; +} + + +/* + * Visually hidden + * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/ + */ +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; } \ No newline at end of file diff --git a/scss/transitions.scss b/scss/transitions.scss index 623042e..0e5bdef 100644 --- a/scss/transitions.scss +++ b/scss/transitions.scss @@ -20,7 +20,31 @@ $dataset: ( opacity:( selectors:'.t-opacity', inline:'transition-property: opacity' - ) + ), + opacity-color:( + selectors:'.t-opacity-color', + inline:'transition-property: opacity, color' + ), + transform :( + selectors:'.t-transform', + inline:'transition-property: transform' + ), + transform-opacity :( + selectors:'.t-transform-opacity ', + inline:'transition-property: transform, opacity' + ), + transform-opacity-color:( + selectors:'.t-transform-opacity-color', + inline:'transition-property: transform, opacity, color' + ), + transform-color:( + selectors:'.t-transform-color', + inline:'transition-property: transform, color' + ), + color :( + selectors:'.t-color', + inline:'transition-property: color' + ), ); // print