From b9d2969e2fe1bb52a2bd4501646f1106f8207d14 Mon Sep 17 00:00:00 2001 From: Lcfvs Date: Mon, 28 May 2018 12:14:22 +0200 Subject: [PATCH] replacing hover by active --- css-ui.css | 4 ++-- css-ui.min.css | 4 ++-- package.json | 2 +- readme.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/css-ui.css b/css-ui.css index 959d7c5..0ffb092 100644 --- a/css-ui.css +++ b/css-ui.css @@ -84,7 +84,7 @@ body > nav ol:first-of-type { z-index: 1; } -body > nav ol:first-of-type:hover:before, body > nav:focus ol:first-of-type:before { +body > nav ol:first-of-type:active:before, body > nav:focus ol:first-of-type:before { content: '✖'; height: 100%; width: 1em; @@ -109,7 +109,7 @@ body > nav:focus:before { left: 0; } -body > nav > ol:first-of-type:hover, body > nav:focus > ol:first-of-type { +body > nav > ol:first-of-type:active, body > nav:focus > ol:first-of-type { overflow-x: hidden; max-width: calc(100vw - 5em); width: 20em; diff --git a/css-ui.min.css b/css-ui.min.css index 9cea020..3bc7c41 100644 --- a/css-ui.min.css +++ b/css-ui.min.css @@ -1,2 +1,2 @@ -/* {"name": "css-ui","version": "1.0.0","author": "lcf.vs ","license": "MIT"} */ -a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}ol,ul{list-style:none}a{text-decoration:none}:active,:focus{outline:0}html{font-size:1em;overflow-x:hidden;overflow-y:auto;margin-top:2.5em}body{display:table;margin:auto;width:100%;top:2.5em;height:calc(100vh - 2.5em)}body>header,body>nav{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}body>header{position:fixed;top:0;left:0;width:100%;height:2.5em}body>header>h1{position:fixed;left:3em;line-height:2.5em}body>nav{position:fixed;width:0;background:rgba(0,0,0,.6);height:calc(100vh - 2.5em);left:0}body>nav:before{content:'☰';position:absolute;top:-2.5em;cursor:pointer;display:block;width:2.5em;text-align:center;line-height:2.5em}body>nav ol:first-of-type{position:fixed;height:100%;width:0;overflow-x:hidden;display:inline-block;z-index:1}body>nav ol:first-of-type:hover:before,body>nav:focus ol:first-of-type:before{content:'✖';height:100%;width:1em;display:inline-block;color:rgba(255,255,255,1);text-align:right;position:fixed;pointer-events:none;background:rgba(0,0,0,.6);top:2.5em;right:0;padding:.5em;z-index:-1;border-left:calc(100vw - 2em) solid transparent}body>nav:focus:before{content:'⬅';width:1.65em;padding-top:.45em;left:0;font-size:1.5em;pointer-events:none}body>nav:focus>ol:first-of-type,body>nav>ol:first-of-type:hover{overflow-x:hidden;max-width:calc(100vw - 5em);width:20em}body>nav a{display:block}body>nav>ol:first-of-type a{padding:.7em}body>nav>ol:first-of-type a:before{width:1.5em;display:inline-block;text-align:center;margin-right:.5em}main{display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - 2.5em)}nav:focus+main{pointer-events:none}main>h1{font-weight:700;margin-bottom:1em}main>section{display:inline-block;margin:.5em;padding:.5em;width:calc(100% - 1em)}main>section>*{text-align:left}@media screen and (min-width:50em) and (min-height:40em){body{width:calc(100vw - 2.5em);margin-left:2.5em}body>nav>ol:first-of-type{min-width:2.5em}body>nav>ol:first-of-type a{padding:.5em}} \ No newline at end of file +/* {"name": "css-ui","version": "1.0.6","author": "lcf.vs ","license": "MIT"} */ +a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}ol,ul{list-style:none}a{text-decoration:none}:active,:focus{outline:0}html{font-size:1em;overflow-x:hidden;overflow-y:auto;margin-top:2.5em}body{display:table;margin:auto;width:100%;top:2.5em;height:calc(100vh - 2.5em)}body>header,body>nav{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}body>header{position:fixed;top:0;left:0;width:100%;height:2.5em}body>header>h1{position:fixed;left:3em;line-height:2.5em}body>nav{position:fixed;width:0;background:rgba(0,0,0,.6);height:calc(100vh - 2.5em);left:0}body>nav:before{content:'☰';position:absolute;top:-2.5em;cursor:pointer;display:block;width:2.5em;text-align:center;line-height:2.5em}body>nav ol:first-of-type{position:fixed;height:100%;width:0;overflow-x:hidden;display:inline-block;z-index:1}body>nav ol:first-of-type:active:before,body>nav:focus ol:first-of-type:before{content:'✖';height:100%;width:1em;display:inline-block;color:rgba(255,255,255,1);text-align:right;position:fixed;pointer-events:none;background:rgba(0,0,0,.6);top:2.5em;right:0;padding:.5em;z-index:-1;border-left:calc(100vw - 2em) solid transparent}body>nav:focus:before{content:'⬅';pointer-events:none;width:1.65em;padding-top:.45em;left:0}body>nav:focus>ol:first-of-type,body>nav>ol:first-of-type:active{overflow-x:hidden;max-width:calc(100vw - 5em);width:20em}body>nav a{display:block}body>nav>ol:first-of-type a{padding:.7em}body>nav>ol:first-of-type a:before{width:1.5em;display:inline-block;text-align:center;margin-right:.5em}main{display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - 2.5em)}nav:focus+main{pointer-events:none}main>h1{font-weight:700;margin-bottom:1em}main>section{display:inline-block;margin:.5em;padding:.5em;width:calc(100% - 1em)}main>section>*{text-align:left}@media screen and (min-width:50em) and (min-height:40em){body{width:calc(100vw - 2.5em);margin-left:2.5em}body>nav>ol:first-of-type{min-width:2.5em}body>nav>ol:first-of-type a{padding:.5em}} \ No newline at end of file diff --git a/package.json b/package.json index ff9a252..efb4776 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lcf.vs/css-ui", - "version": "1.0.5", + "version": "1.0.6", "description": "A pure CSS base to make a responsive user interface", "main": "css-ui.min.css", "scripts": { diff --git a/readme.md b/readme.md index 9925b02..266fb8d 100644 --- a/readme.md +++ b/readme.md @@ -17,7 +17,7 @@ A pure CSS base to make a responsive user interface. ### Using a CDN ```html - + ``` ```html