diff --git a/README.md b/README.md index 962cff8..d190b58 100644 --- a/README.md +++ b/README.md @@ -30,3 +30,32 @@ This repo is set up with [Netlify's continuous deployment](https://docs.netlify. ## Contributing Pull requests are welcome! If you find a bug or have a feature request, please submit a GitHub issue. + +## Alternative features + +Not all UI features can be implemented with classless CSS while remaining accessible and supported cross-browser. For more complex features, you may need to supplement this framework with additional HTML, CSS, or JavaScript. + +Here are some suggestions for altering the behavior of certain elements. + +**Feature** + +Make `table`s scroll horizontally when they are wider than the main content width. + +Desired behavior: +![HTML table with horizontal scroll](https://user-images.githubusercontent.com/2905455/120902460-6bbadd80-c5f5-11eb-9d9d-1aea260b7f8f.gif) + +Note: In **OK.css**, `table`s are set to `display: table` for [accessibility reasons](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/). + +**Implementation** + +Wrap the table in a `
` with `overflow-x: scroll;`: + +``` +
+ + ... +
+
+``` + +One caveat is that this can prevent the table heading from sticking when scrolling vertically. diff --git a/dist/ok.min.css b/dist/ok.min.css index 8b5f86e..7f4f874 100644 --- a/dist/ok.min.css +++ b/dist/ok.min.css @@ -1,2 +1,2 @@ -/*! OK.css v1.0.3 | MIT License | github.com/andrewh0/okcss */@import url("https://rsms.me/inter/inter.css"); -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--ok-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ok-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Ubuntu Mono","Liberation Mono","Courier New",Courier,monospace;--ok-fw-0:400;--ok-fw-1:600;--ok-fw-2:700;--ok-fw-3:700;--ok-fs-0:2.5rem;--ok-fs-1:2rem;--ok-fs-2:1.5rem;--ok-fs-3:1.25rem;--ok-fs-4:1rem;--ok-fs-5:0.75rem;--ok-br:0.25rem;--ok-s-0:0;--ok-s-1:0.25rem;--ok-s-2:0.5rem;--ok-s-3:1rem;--ok-s-4:1.5rem;--ok-s-5:2rem;--ok-s-6:2.5rem;--ok-lh-body:1.5;--ok-lh-heading:1.25;--ok-t-hl:#ffcf30;--ok-accent-0:#3e67fa;--ok-accent-1:#4788ff;--ok-tc-accent:#3173de;--ok-tc-code:#c23a30;--ok-tc-0:#000;--ok-tc-1:#747474;--ok-tc-2:#848484;--ok-bg-0:#fff;--ok-bg-1:#f0f0f0;--ok-bg-2:#ccc;--ok-b-0:1px solid #cbcbcb;--ok-b-1:1px solid #848484;--ok-down-0:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23747474'/%3E%3C/svg%3E");--ok-down-1:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23848484'/%3E%3C/svg%3E")}@media (prefers-color-scheme:dark){:root{--ok-tc-accent:#5c9aff;--ok-tc-code:#ed5853;--ok-tc-0:#fff;--ok-tc-1:#ababab;--ok-tc-2:#929292;--ok-bg-0:#000;--ok-bg-1:#212121;--ok-bg-2:#3e3e3e;--ok-b-0:1px solid #747474;--ok-b-1:1px solid #929292;--ok-down-0:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23ababab'/%3E%3C/svg%3E");--ok-down-1:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23929292'/%3E%3C/svg%3E")}}*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}html{font-family:var(--ok-sans);line-sizing:normal;line-height:var(--ok-lh-body);font-weight:var(--ok-fw-0);color:var(--ok-tc-0);background-color:var(--ok-bg-0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility}@supports (font-variation-settings:normal){html{font-family:Inter var,var(--ok-sans)}}button,input,optgroup,select,textarea{font-family:inherit;line-height:var(--ok-lh-body)}[role=button],button{cursor:pointer}audio,canvas,embed,iframe,img,input,object,select,svg,textarea,video{display:block}img,video{max-width:100%;height:auto}body{padding:var(--ok-s-3);max-width:80ch;margin:auto}h1{font-size:var(--ok-fs-0);margin:0}h2{font-size:var(--ok-fs-1)}h3{font-size:var(--ok-fs-2)}h4{font-size:var(--ok-fs-3)}h5{font-size:var(--ok-fs-4)}h6{font-size:var(--ok-fs-5);text-transform:uppercase;font-weight:var(--ok-fw-1)}h1,h2,h3,h4,h5,h6{line-height:var(--ok-lh-heading);font-weight:var(--ok-fw-3)}p{font-size:var(--ok-fs-4)}small{font-size:var(--ok-fs-5)}b,dt,strong{font-weight:var(--ok-fw-2)}address,article,aside,audio,blockquote,button,canvas,dd,details,dialog,div,dl,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,img,input,main,nav,object,ol,p,pre,section,select,summary,svg,table,textarea,ul,video{margin-bottom:var(--ok-s-4)}address:last-child,article:last-child,aside:last-child,blockquote:last-child,dd:last-child,details:last-child,dialog:last-child,div:last-child,dl:last-child,dt:last-child,fieldset:last-child,figcaption:last-child,figure:last-child,footer:last-child,form:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,header:last-child,hgroup:last-child,hr:last-child,input[type=checkbox],input[type=radio],main:last-child,nav:last-child,ol:last-child,p:last-child,pre:last-child,section:last-child,table:last-child,ul:last-child{margin-bottom:0}fieldset{padding:var(--ok-s-3);border:var(--ok-b-0);border-radius:var(--ok-br)}legend{font-weight:var(--ok-fw-1);text-transform:uppercase;font-size:var(--ok-fs-5)}input,select{padding:var(--ok-s-2);background:var(--ok-bg-0);border:var(--ok-b-0);border-radius:var(--ok-br);color:var(--ok-tc-0);min-width:25ch}input:disabled,select:disabled,textarea:disabled{color:var(--ok-tc-2)}input::placeholder,textarea::placeholder{color:var(--ok-tc-2)}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:var(--ok-tc-2)}input::-moz-placeholder,textarea::-moz-placeholder{color:var(--ok-tc-2)}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--ok-tc-2)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--ok-tc-2)}input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-results-button{display:none}input::-ms-clear,input::-ms-reveal{display:none}input:disabled,textarea:disabled{background-color:var(--ok-bg-1)}input[type=search]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=file]{max-width:300px}input[type=number]{-moz-appearance:textfield}input[type=checkbox],input[type=radio]{display:inline;min-width:auto}input[type=color]{height:2.5rem}input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week]{height:2.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative}input[type=date]:before,input[type=datetime-local]:before,input[type=month]:before,input[type=time]:before,input[type=week]:before{position:absolute;right:0;top:0;background-image:var(--ok-down-0);background-repeat:no-repeat;background-position:right .2em top 50%;background-size:2em auto;width:2.5rem;height:calc(2.5rem - 2px);content:""}input[type=date]:disabled:before,input[type=datetime-local]:disabled:before,input[type=month]:disabled:before,input[type=time]:disabled:before,input[type=week]:disabled:before{background-image:var(--ok-down-1)}input::-webkit-calendar-picker-indicator{position:absolute;top:0;right:0;background-color:transparent;cursor:pointer;padding:0;width:2.5rem;height:calc(2.5rem - 2px);content:"";opacity:0}input[type=range]{overflow:visible;line-height:inherit;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:none;cursor:pointer;padding:0;vertical-align:middle;border:none;min-height:2rem;background-color:transparent}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;-webkit-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box;position:relative}input[type=range]::-moz-range-track{cursor:pointer;-moz-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box}input[type=range]::-ms-track{cursor:pointer;-ms-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box}input[type=range]::-ms-fill-lower{background:transparent}input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem;margin-top:calc(-.5rem - 1px)}input[type=range]::-moz-range-thumb{cursor:pointer;-moz-appearance:none;border:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem}input[type=range]::-ms-thumb{cursor:pointer;-ms-appearance:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem;transform:translateY(.25rem)}input[type=range]:focus:not(:disabled)::-webkit-slider-thumb{background-color:var(--ok-accent-1)}input[type=range]:focus:not(:disabled)::-moz-range-thumb{background-color:var(--ok-accent-1)}input[type=range]:focus:not(:disabled)::-ms-thumb{background-color:var(--ok-accent-1)}input[type=range]:disabled{cursor:default}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--ok-bg-2);cursor:default}input[type=range]:disabled::-moz-range-thumb{background-color:var(--ok-bg-2);cursor:default}input[type=range]:disabled::-ms-thumb{background-color:var(--ok-bg-2);cursor:default}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--ok-b-0);border-radius:var(--ok-br);background-color:var(--ok-bg-0);min-height:2.5rem;color:var(--ok-tc-0)}select:not([multiple]){background-image:var(--ok-down-0);background-repeat:no-repeat,repeat;background-position:right .2em top 50%;background-size:2em auto;padding-right:2.5em;height:2.5rem}select::-ms-expand{display:none}select:not([multiple]):disabled{background-image:var(--ok-down-1);background-color:var(--ok-bg-1);cursor:default}select[multiple]{border-radius:var(--ok-br)}select[multiple]:disabled{background-color:var(--ok-bg-1)}select[multiple] option{color:var(--ok-t-)}select[multiple]:disabled option{color:var(--ok-tc-2)}textarea{padding:var(--ok-s-2);resize:vertical;background:var(--ok-bg-0);border:var(--ok-b-0);border-radius:var(--ok-br);color:var(--ok-tc-0);min-height:calc(2.5rem - 2px);min-width:25ch}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;background-color:var(--ok-accent-0);border-radius:var(--ok-br);color:#fff;font-weight:var(--ok-fw-1);height:2.5rem;border:none;padding:var(--ok-s-2) var(--ok-s-3);white-space:nowrap;min-width:auto}input::-webkit-file-upload-button{display:inline-block;background-color:var(--ok-accent-0);border-radius:var(--ok-br);color:#fff;font-weight:var(--ok-fw-1);height:2.5rem;border:none;padding:var(--ok-s-2) var(--ok-s-3);white-space:nowrap}input:disabled::-webkit-file-upload-button{cursor:default;opacity:.5}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer}input:not(:disabled)::-webkit-file-upload-button{cursor:pointer}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{cursor:default;opacity:.5;background-color:var(--ok-accent-0)}button:focus:not(:disabled),input[type=button]:focus:not(:disabled),input[type=reset]:focus:not(:disabled),input[type=submit]:focus:not(:disabled){background-color:var(--ok-accent-1)}input:not(:disabled):focus::-webkit-file-upload-button{background-color:var(--ok-accent-1)}table{border-collapse:collapse;border-radius:var(--ok-br);display:block;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;margin-left:auto;margin-right:auto;overflow-x:auto;white-space:nowrap}tfoot,thead{border:var(--ok-b-0)}tfoot tr,thead tr{background-color:var(--ok-bg-1);font-size:var(--ok-fs-5);text-transform:uppercase;color:var(--ok-tc-0)}td,th{border:var(--ok-b-0) 0;text-align:left;padding:.5rem}td{white-space:normal;max-width:20ch}tr{border:var(--ok-b-0)}table caption{font-size:var(--ok-fs-4);font-weight:var(--ok-fw-3);padding:.5rem}code,samp{padding:.2em .4em;color:var(--ok-tc-code)}code,pre,samp{font-family:var(--ok-mono);line-height:var(--ok-lh-body);background-color:var(--ok-bg-1);border-radius:var(--ok-br);text-transform:none}pre{padding:var(--ok-s-3);white-space:pre;overflow-x:auto}pre,var{color:var(--ok-tc-0)}var{font-family:var(--ok-mono);font-style:normal}code pre,pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline}kbd{background-color:var(--ok-bg-1);border:var(--ok-b-0);border-radius:var(--ok-br);border-bottom:2px solid var(--ok-bg-2);padding:var(--ok-s-1);font-family:var(--ok-sans);color:var(--ok-tc-0)}a{text-decoration:none;font-weight:var(--ok-fw-1)}a,a:visited{color:var(--ok-tc-accent)}ol,ul{padding-left:var(--ok-s-5)}nav ul{text-decoration:none;padding-left:0}nav ul li{display:inline;margin-right:1em}audio,img,video{margin-left:auto;margin-right:auto}img{border-radius:var(--ok-br)}figure>img:not(:last-child){margin-bottom:var(--ok-s-1)}figure>figcaption{text-align:center}figcaption,time{font-size:var(--ok-fs-5);color:var(--ok-tc-1)}mark{padding:.2em .4em;background:var(--ok-t-hl);color:#000;border-radius:var(--ok-br)}iframe{border:var(--ok-b-0);border-radius:var(--ok-br);width:100%}hr{border:none;border-bottom:var(--ok-b-0)}footer{font-size:var(--ok-fs-5)}blockquote,footer{color:var(--ok-tc-1)}blockquote{position:relative;margin-left:0;margin-right:0;padding-left:var(--ok-s-5)}blockquote:before{position:absolute;height:100%;content:"";width:4px;left:0;border-radius:var(--ok-br);background-color:var(--ok-bg-1)}dd{padding-left:var(--ok-s-5)}abbr{cursor:help}@media (hover:hover){a:hover{text-decoration:underline}input:hover:not(:disabled):not(:focus):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-webkit-slider-runnable-track{border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-moz-range-track{border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-ms-track{border:var(--ok-b-1)}select:not([multiple]):not(:disabled):hover{cursor:pointer}button:hover:not(:disabled),input[type=button]:hover:not(:disabled),input[type=reset]:hover:not(:disabled),input[type=submit]:hover:not(:disabled){background-color:var(--ok-accent-1)}input:not(:disabled):hover::-webkit-file-upload-button{background-color:var(--ok-accent-1)}} \ No newline at end of file +/*! OK.css v1.1.0 | MIT License | github.com/andrewh0/okcss */@import url("https://rsms.me/inter/inter.css"); +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--ok-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ok-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Ubuntu Mono","Liberation Mono","Courier New",Courier,monospace;--ok-fw-0:400;--ok-fw-1:600;--ok-fw-2:700;--ok-fw-3:700;--ok-fs-0:2.5rem;--ok-fs-1:2rem;--ok-fs-2:1.5rem;--ok-fs-3:1.25rem;--ok-fs-4:1rem;--ok-fs-5:0.75rem;--ok-br:0.25rem;--ok-s-0:0;--ok-s-1:0.25rem;--ok-s-2:0.5rem;--ok-s-3:1rem;--ok-s-4:1.5rem;--ok-s-5:2rem;--ok-s-6:2.5rem;--ok-lh-body:1.5;--ok-lh-heading:1.25;--ok-t-hl:#ffcf30;--ok-accent-0:#3e67fa;--ok-accent-1:#4788ff;--ok-tc-accent:#3173de;--ok-tc-code:#c23a30;--ok-tc-0:#000;--ok-tc-1:#747474;--ok-tc-2:#848484;--ok-bg-0:#fff;--ok-bg-1:#f0f0f0;--ok-bg-2:#ccc;--ok-b-0:1px solid #cbcbcb;--ok-b-1:1px solid #848484;--ok-down-0:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23747474'/%3E%3C/svg%3E");--ok-down-1:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23848484'/%3E%3C/svg%3E")}@media (prefers-color-scheme:dark){:root{--ok-tc-accent:#5c9aff;--ok-tc-code:#ed5853;--ok-tc-0:#fff;--ok-tc-1:#ababab;--ok-tc-2:#929292;--ok-bg-0:#000;--ok-bg-1:#212121;--ok-bg-2:#3e3e3e;--ok-b-0:1px solid #747474;--ok-b-1:1px solid #929292;--ok-down-0:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23ababab'/%3E%3C/svg%3E");--ok-down-1:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' viewBox='0 0 12 8' width='24' fill='none'%3E%3Cpath d='M6 6l4-4h1v1-1L6 7 1 2h1l4 4z' fill='%23929292'/%3E%3C/svg%3E")}}*,:after,:before{box-sizing:border-box}*{margin:0;padding:0}html{font-family:var(--ok-sans);line-sizing:normal;line-height:var(--ok-lh-body);font-weight:var(--ok-fw-0);color:var(--ok-tc-0);background-color:var(--ok-bg-0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}@supports (font-variation-settings:normal){html{font-family:Inter var,var(--ok-sans)}}button,input,optgroup,select,textarea{font-family:inherit;line-height:var(--ok-lh-body)}[role=button],button{cursor:pointer}audio,canvas,embed,iframe,img,input,object,select,svg,textarea,video{display:block}img,video{max-width:100%;height:auto}body{padding:var(--ok-s-3);max-width:80ch;margin:auto}h1{font-size:var(--ok-fs-0);margin:0}h2{font-size:var(--ok-fs-1)}h3{font-size:var(--ok-fs-2)}h4{font-size:var(--ok-fs-3)}h5{font-size:var(--ok-fs-4)}h6{font-size:var(--ok-fs-5);text-transform:uppercase;font-weight:var(--ok-fw-1)}h1,h2,h3,h4,h5,h6{line-height:var(--ok-lh-heading);font-weight:var(--ok-fw-3)}p{font-size:var(--ok-fs-4)}small{font-size:var(--ok-fs-5)}b,dt,strong{font-weight:var(--ok-fw-2)}address,article,aside,audio,blockquote,button,canvas,dd,details,dialog,div,dl,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,img,input,main,nav,object,ol,p,pre,section,select,summary,svg,table,textarea,ul,video{margin-bottom:var(--ok-s-4)}address:last-child,article:last-child,aside:last-child,blockquote:last-child,dd:last-child,details:last-child,dialog:last-child,div:last-child,dl:last-child,dt:last-child,fieldset:last-child,figcaption:last-child,figure:last-child,footer:last-child,form:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,header:last-child,hgroup:last-child,hr:last-child,input[type=checkbox],input[type=radio],main:last-child,nav:last-child,ol:last-child,p:last-child,pre:last-child,section:last-child,table:last-child,ul:last-child{margin-bottom:0}fieldset{padding:var(--ok-s-3);border:var(--ok-b-0);border-radius:var(--ok-br)}legend{font-weight:var(--ok-fw-1);text-transform:uppercase;font-size:var(--ok-fs-5)}input,select{padding:var(--ok-s-2);background:var(--ok-bg-0);border:var(--ok-b-0);border-radius:var(--ok-br);color:var(--ok-tc-0);min-width:25ch}input:disabled,select:disabled,textarea:disabled{color:var(--ok-tc-2)}input::placeholder,textarea::placeholder{color:var(--ok-tc-2)}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:var(--ok-tc-2)}input::-moz-placeholder,textarea::-moz-placeholder{color:var(--ok-tc-2)}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--ok-tc-2)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--ok-tc-2)}input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-results-button{display:none}input::-ms-clear,input::-ms-reveal{display:none}input:disabled,textarea:disabled{background-color:var(--ok-bg-1)}input[type=search]{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=file]{max-width:300px}input[type=number]{-moz-appearance:textfield}input[type=checkbox],input[type=radio]{display:inline;min-width:auto}input[type=color]{height:2.5rem}input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week]{height:2.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative}input[type=date]:before,input[type=datetime-local]:before,input[type=month]:before,input[type=time]:before,input[type=week]:before{position:absolute;right:0;top:0;background-image:var(--ok-down-0);background-repeat:no-repeat;background-position:right .2em top 50%;background-size:2em auto;width:2.5rem;height:calc(2.5rem - 2px);content:""}input[type=date]:disabled:before,input[type=datetime-local]:disabled:before,input[type=month]:disabled:before,input[type=time]:disabled:before,input[type=week]:disabled:before{background-image:var(--ok-down-1)}input::-webkit-calendar-picker-indicator{position:absolute;top:0;right:0;background-color:transparent;cursor:pointer;padding:0;width:2.5rem;height:calc(2.5rem - 2px);content:"";opacity:0}input[type=range]{overflow:visible;line-height:inherit;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:none;cursor:pointer;padding:0;vertical-align:middle;border:none;min-height:2rem;background-color:transparent}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;-webkit-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box;position:relative}input[type=range]::-moz-range-track{cursor:pointer;-moz-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box}input[type=range]::-ms-track{cursor:pointer;-ms-appearance:none;border-radius:var(--ok-br);border:var(--ok-b-0);background-color:var(--ok-bg-1);background-image:linear-gradient(var(--ok-bg-1),var(--ok-bg-1));width:100%;height:.5rem;color:transparent;box-sizing:border-box}input[type=range]::-ms-fill-lower{background:transparent}input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem;margin-top:calc(-.5rem - 1px)}input[type=range]::-moz-range-thumb{cursor:pointer;-moz-appearance:none;border:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem}input[type=range]::-ms-thumb{cursor:pointer;-ms-appearance:none;border-radius:50%;background-color:var(--ok-accent-0);width:1.5rem;height:1.5rem;transform:translateY(.25rem)}input[type=range]:focus:not(:disabled)::-webkit-slider-thumb{background-color:var(--ok-accent-1)}input[type=range]:focus:not(:disabled)::-moz-range-thumb{background-color:var(--ok-accent-1)}input[type=range]:focus:not(:disabled)::-ms-thumb{background-color:var(--ok-accent-1)}input[type=range]:disabled{cursor:default}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--ok-bg-2);cursor:default}input[type=range]:disabled::-moz-range-thumb{background-color:var(--ok-bg-2);cursor:default}input[type=range]:disabled::-ms-thumb{background-color:var(--ok-bg-2);cursor:default}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--ok-b-0);border-radius:var(--ok-br);background-color:var(--ok-bg-0);min-height:2.5rem;color:var(--ok-tc-0)}select:not([multiple]){background-image:var(--ok-down-0);background-repeat:no-repeat,repeat;background-position:right .2em top 50%;background-size:2em auto;padding-right:2.5em;height:2.5rem}select::-ms-expand{display:none}select:not([multiple]):disabled{background-image:var(--ok-down-1);background-color:var(--ok-bg-1);cursor:default}select[multiple]{border-radius:var(--ok-br)}select[multiple]:disabled{background-color:var(--ok-bg-1)}select[multiple] option{color:var(--ok-t-)}select[multiple]:disabled option{color:var(--ok-tc-2)}textarea{padding:var(--ok-s-2);resize:vertical;background:var(--ok-bg-0);border:var(--ok-b-0);border-radius:var(--ok-br);color:var(--ok-tc-0);min-height:calc(2.5rem - 2px);min-width:25ch}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;background-color:var(--ok-accent-0);border-radius:var(--ok-br);color:#fff;font-weight:var(--ok-fw-1);height:2.5rem;border:none;padding:var(--ok-s-2) var(--ok-s-3);white-space:nowrap;min-width:auto}input::-webkit-file-upload-button{display:inline-block;background-color:var(--ok-accent-0);border-radius:var(--ok-br);color:#fff;font-weight:var(--ok-fw-1);height:2.5rem;border:none;padding:var(--ok-s-2) var(--ok-s-3);white-space:nowrap}input:disabled::-webkit-file-upload-button{cursor:default;opacity:.5}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer}input:not(:disabled)::-webkit-file-upload-button{cursor:pointer}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{cursor:default;opacity:.5;background-color:var(--ok-accent-0)}button:focus:not(:disabled),input[type=button]:focus:not(:disabled),input[type=reset]:focus:not(:disabled),input[type=submit]:focus:not(:disabled){background-color:var(--ok-accent-1)}input:not(:disabled):focus::-webkit-file-upload-button{background-color:var(--ok-accent-1)}table{border-collapse:collapse;display:table;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;margin-left:auto;margin-right:auto;white-space:nowrap}tfoot,thead{border:var(--ok-b-0)}thead{position:-webkit-sticky;position:sticky;top:0}tfoot tr,thead tr{background-color:var(--ok-bg-1);font-size:var(--ok-fs-5);text-transform:uppercase;color:var(--ok-tc-0)}td,th{border:var(--ok-b-0) 0;text-align:left;padding:.5rem}td{white-space:normal;max-width:20ch}tr{border:var(--ok-b-0)}table caption{font-size:var(--ok-fs-4);font-weight:var(--ok-fw-3);padding:.5rem}code,samp{padding:.2em .4em;color:var(--ok-tc-code)}code,pre,samp{font-family:var(--ok-mono);font-size:87.5%;line-height:var(--ok-lh-body);background-color:var(--ok-bg-1);border-radius:var(--ok-br);text-transform:none}pre{padding:var(--ok-s-3);white-space:pre;overflow-x:auto}pre,var{color:var(--ok-tc-0)}var{font-family:var(--ok-mono);font-style:normal}code pre,pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline}kbd{background-color:var(--ok-bg-1);border:var(--ok-b-0);border-radius:var(--ok-br);border-bottom:2px solid var(--ok-bg-2);padding:var(--ok-s-1);font-family:var(--ok-sans);color:var(--ok-tc-0)}a{text-decoration:none;font-weight:var(--ok-fw-1)}a,a:visited{color:var(--ok-tc-accent)}ol,ul{padding-left:var(--ok-s-5)}nav ul{text-decoration:none;padding-left:0}nav ul li{display:inline;margin-right:1em}audio,img,video{margin-left:auto;margin-right:auto}img{border-radius:var(--ok-br)}figure>img:not(:last-child){margin-bottom:var(--ok-s-1)}figure>figcaption{text-align:center}figcaption,time{font-size:var(--ok-fs-5);color:var(--ok-tc-1)}mark{padding:.2em .4em;background:var(--ok-t-hl);color:#000;border-radius:var(--ok-br)}iframe{border:var(--ok-b-0);border-radius:var(--ok-br);width:100%}hr{border:none;border-bottom:var(--ok-b-0)}footer{font-size:var(--ok-fs-5)}blockquote,footer{color:var(--ok-tc-1)}blockquote{position:relative;margin-left:0;margin-right:0;padding-left:var(--ok-s-5)}blockquote:before{position:absolute;height:100%;content:"";width:4px;left:0;border-radius:var(--ok-br);background-color:var(--ok-bg-1)}dd{padding-left:var(--ok-s-5)}abbr{cursor:help}@media (hover:hover){a:hover{text-decoration:underline}input:hover:not(:disabled):not(:focus):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-webkit-slider-runnable-track{border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-moz-range-track{border:var(--ok-b-1)}input[type=range]:hover:not(:disabled)::-ms-track{border:var(--ok-b-1)}select:not([multiple]):not(:disabled):hover{cursor:pointer}button:hover:not(:disabled),input[type=button]:hover:not(:disabled),input[type=reset]:hover:not(:disabled),input[type=submit]:hover:not(:disabled){background-color:var(--ok-accent-1)}input:not(:disabled):hover::-webkit-file-upload-button{background-color:var(--ok-accent-1)}} \ No newline at end of file diff --git a/src/ok.css b/src/ok.css index a180473..5c1376e 100644 --- a/src/ok.css +++ b/src/ok.css @@ -1,4 +1,4 @@ -/*! OK.css v1.0.3 | MIT License | github.com/andrewh0/okcss */ +/*! OK.css v1.1.0 | MIT License | github.com/andrewh0/okcss */ @import url("https://rsms.me/inter/inter.css"); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ @@ -492,6 +492,7 @@ html { -ms-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; + scroll-behavior: smooth; } @supports (font-variation-settings: normal) { @@ -1107,12 +1108,14 @@ input:not(:disabled):focus::-webkit-file-upload-button { /* Tables */ table { border-collapse: collapse; - border-radius: var(--ok-br); - display: block; + /* + Use `display: table` for proper screen reader support and + allow sticky header and footer + */ + display: table; max-width: fit-content; margin-left: auto; margin-right: auto; - overflow-x: auto; white-space: nowrap; } @@ -1121,6 +1124,19 @@ tfoot { border: var(--ok-b-0); } +/* +tfoot is not sticky because captions are shown above the table +and the footer can cover the caption. +*/ +thead { + /* + In Chrome 91 there's a rendering bug that can show a 1px gap + when there's a border. + */ + position: sticky; + top: 0; +} + thead tr, tfoot tr { background-color: var(--ok-bg-1); @@ -1162,6 +1178,11 @@ pre, code, samp { font-family: var(--ok-mono); + /* + 87.5% = 7/8 + If 1rem is 16px, font-size is 14px. + */ + font-size: 87.5%; line-height: var(--ok-lh-body); background-color: var(--ok-bg-1); border-radius: var(--ok-br);