diff --git a/dist/styles.css b/dist/styles.css index ceca43f..e3706a3 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1 +1 @@ -:root{--tabled-column-min-width: 163px;--tabled-column-min-width-large: 300px;--tabled-column-min-width-small: 80px;--tabled-v-space-4xs: 1rem;--tabled-v-space-3xs: 1.5rem;--tabled-v-space-2xs: 2rem;--tabled-v-space-xs: 2.5rem;--tabled-v-space-s: 3rem;--tabled-color-white: #ffffff;--tabled-color-black: #000000;--tabled-color-50: #f6f8f9;--tabled-color-150: #dde4e9;--tabled-color-500: #3f6076;--tabled-color-600: #19405b;--tabled-color-700: #15354c;--tabled-color-ascent: #e0a624;--tabled-color-focus: #3d8eff;--tabled-color-disabled: #a1a1a1;--tabled-color-border: var(--tabled-color-700)}.visually-hidden{padding:0;margin:-1px;white-space:nowrap;border:0;position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);inline-size:1px;block-size:1px;word-wrap:normal}.tabled{position:relative;padding-block-start:var(--tabled-v-space-4xs);overflow:hidden}.tabled:before,.tabled:after{content:"";position:absolute;inset-block-start:var(--tabled-v-space-s);inline-size:10%;block-size:100%;background:rgba(0,0,0,0);z-index:1;will-change:opacity;transition:opacity .4s;opacity:0;pointer-events:none;font-weight:600}.tabled:before{inset-inline-start:0;background:linear-gradient(90deg, rgba(7, 23, 46, 0.1), rgba(0, 0, 0, 0))}.tabled:after{inset-inline-end:0;background:linear-gradient(-90deg, rgba(7, 23, 46, 0.1), rgba(0, 0, 0, 0))}.tabled .tabled__navigation{display:none;position:relative;block-size:var(--tabled-v-space-xs);inline-size:100%;padding-block:var(--tabled-v-space-4xs);background:var(--tabled-color-white);z-index:4}.tabled .tabled__previous,.tabled .tabled__next{position:absolute;inset-block-start:var(--tabled-v-space-4xs);inset-inline-end:0;inline-size:var(--tabled-v-space-xs);block-size:var(--tabled-v-space-xs);background:var(--tabled-color-white);border:2px solid var(--tabled-color-border);padding:0;margin:0;line-height:100%;transition:border .3s ease-in;outline-offset:-3px;cursor:pointer}.tabled .tabled__previous:before,.tabled .tabled__next:before{transition:border,color .3s ease-in}.tabled .tabled__previous:disabled,.tabled .tabled__next:disabled{border:2px solid var(--tabled-color-150);cursor:default}.tabled .tabled__previous:hover:not(:disabled),.tabled .tabled__next:hover:not(:disabled){border-color:var(--tabled-color-ascent)}.tabled .tabled__previous:hover:not(:disabled):before,.tabled .tabled__next:hover:not(:disabled):before{color:var(--tabled-color-ascent)}.tabled .tabled__previous:focus,.tabled .tabled__next:focus{outline:2px solid var(--tabled-color-focus)}.tabled.tabled--fade-left .tabled__navigation,.tabled.tabled--fade-right .tabled__navigation{display:block}.tabled.tabled--fade-left .tabled__wrapper,.tabled.tabled--fade-right .tabled__wrapper{overflow-x:scroll;overflow-y:visible}.tabled .tabled__previous{inset-inline-end:var(--tabled-v-space-s)}.tabled .tabled__previous:before{font-family:Arial,Helvetica,sans-serif;display:inline-block;content:"←";font-size:1.5rem}.tabled .tabled__previous:disabled:before{color:var(--tabled-color-disabled)}.tabled .tabled__next:before{font-family:Arial,Helvetica,sans-serif;display:inline-block;content:"→";font-size:1.5rem}.tabled .tabled__next:disabled:before{color:var(--tabled-color-disabled)}.tabled.tabled--fade-left:before{opacity:1;z-index:3}.tabled.tabled--fade-right:after{opacity:1;z-index:3}table.tabled__table{block-size:auto;inline-size:auto;min-inline-size:100%;margin:0;border-spacing:0;position:relative;table-layout:fixed}table.tabled__table th,table.tabled__table td{min-inline-size:var(--tabled-column-min-width)}table.tabled__table .tabled__column--large{min-inline-size:var(--tabled-column-min-width-large)}table.tabled__table .tabled__column--small{min-inline-size:var(--tabled-column-min-width-small)}.tabled--stacked th,.tabled--stacked td{display:flex;flex-flow:column wrap}@media(min-width: 1024px){.tabled--stacked th,.tabled--stacked td{display:table-cell}}.tabled--stacked th:before,.tabled--stacked td:before{display:block;content:attr(data-label)}@media(min-width: 1024px){.tabled--stacked th:before,.tabled--stacked td:before{display:none}}@media(min-width: 1024px){.tabled--stacked tr{display:table-row}}@media(max-width: 1024px){.tabled--stacked thead th{padding:0;margin:-1px;white-space:nowrap;border:0;position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);inline-size:1px;block-size:1px;word-wrap:normal;padding:0}}/*# sourceMappingURL=styles.css.map */ +:root{--tabled-column-min-width: 163px;--tabled-column-min-width-large: 300px;--tabled-column-min-width-small: 80px;--tabled-v-space-4xs: 1rem;--tabled-v-space-3xs: 1.5rem;--tabled-v-space-2xs: 2rem;--tabled-v-space-xs: 2.5rem;--tabled-v-space-s: 3rem;--tabled-color-white: #ffffff;--tabled-color-black: #000000;--tabled-color-50: #f6f8f9;--tabled-color-150: #dde4e9;--tabled-color-500: #3f6076;--tabled-color-600: #19405b;--tabled-color-700: #15354c;--tabled-color-ascent: #e0a624;--tabled-color-focus: #3d8eff;--tabled-color-disabled: #a1a1a1;--tabled-color-border: var(--tabled-color-700)}.visually-hidden{padding:0;margin:-1px;white-space:nowrap;border:0;position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);inline-size:1px;block-size:1px;word-wrap:normal}.tabled{position:relative;padding-block-start:var(--tabled-v-space-4xs);overflow:hidden}.tabled:before,.tabled:after{content:"";position:absolute;inset-block-start:var(--tabled-v-space-s);inline-size:10%;block-size:100%;background:rgba(0,0,0,0);z-index:1;will-change:opacity;transition:opacity .4s;opacity:0;pointer-events:none;font-weight:600}.tabled:before{inset-inline-start:0;background:linear-gradient(90deg, rgba(7, 23, 46, 0.1), rgba(0, 0, 0, 0))}.tabled:after{inset-inline-end:0;background:linear-gradient(-90deg, rgba(7, 23, 46, 0.1), rgba(0, 0, 0, 0))}.tabled .tabled__navigation{display:none;position:relative;block-size:var(--tabled-v-space-xs);inline-size:100%;padding-block:var(--tabled-v-space-4xs);background:var(--tabled-color-white);z-index:4}.tabled .tabled__previous,.tabled .tabled__next{position:absolute;inset-block-start:var(--tabled-v-space-4xs);inset-inline-end:0;inline-size:var(--tabled-v-space-xs);block-size:var(--tabled-v-space-xs);background:var(--tabled-color-white);border:2px solid var(--tabled-color-border);padding:0;margin:0;line-height:100%;transition:border .3s ease-in;outline-offset:-3px;cursor:pointer}.tabled .tabled__previous:before,.tabled .tabled__next:before{transition:border,color .3s ease-in}.tabled .tabled__previous:disabled,.tabled .tabled__next:disabled{border:2px solid var(--tabled-color-150);cursor:default}.tabled .tabled__previous:hover:not(:disabled),.tabled .tabled__next:hover:not(:disabled){border-color:var(--tabled-color-ascent)}.tabled .tabled__previous:hover:not(:disabled):before,.tabled .tabled__next:hover:not(:disabled):before{color:var(--tabled-color-ascent)}.tabled .tabled__previous:focus,.tabled .tabled__next:focus{outline:2px solid var(--tabled-color-focus)}.tabled.tabled--fade-left .tabled__navigation,.tabled.tabled--fade-right .tabled__navigation{display:block}.tabled.tabled--fade-left .tabled__wrapper,.tabled.tabled--fade-right .tabled__wrapper{overflow-x:scroll;overflow-y:visible}.tabled .tabled__previous{inset-inline-end:var(--tabled-v-space-s)}.tabled .tabled__previous:before{font-family:Arial,Helvetica,sans-serif;display:inline-block;content:"←";font-size:1.5rem}.tabled .tabled__previous:disabled:before{color:var(--tabled-color-disabled)}.tabled .tabled__next:before{font-family:Arial,Helvetica,sans-serif;display:inline-block;content:"→";font-size:1.5rem}.tabled .tabled__next:disabled:before{color:var(--tabled-color-disabled)}.tabled.tabled--fade-left:before{opacity:1;z-index:3}.tabled.tabled--fade-right:after{opacity:1;z-index:3}table.tabled__table{block-size:auto;inline-size:auto;min-inline-size:100%;margin:0;border-spacing:0;position:relative;table-layout:fixed}table.tabled__table th,table.tabled__table td{min-inline-size:var(--tabled-column-min-width)}table.tabled__table .tabled__column--large{min-inline-size:var(--tabled-column-min-width-large)}table.tabled__table .tabled__column--small{min-inline-size:var(--tabled-column-min-width-small)}.tabled--stacked th,.tabled--stacked td{display:flex;flex-flow:column wrap}@media(min-width: 1024px){.tabled--stacked th,.tabled--stacked td{display:table-cell}}.tabled--stacked th:before,.tabled--stacked td:before{display:block;content:attr(data-label)}@media(min-width: 1024px){.tabled--stacked th:before,.tabled--stacked td:before{display:none}}@media(min-width: 1024px){.tabled--stacked tr{display:table-row}}@media(max-width: 1024px){.tabled--stacked thead th{padding:0;margin:-1px;white-space:nowrap;border:0;position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);inline-size:1px;block-size:1px;word-wrap:normal;padding:0}} diff --git a/dist/theme.css b/dist/theme.css index 3d5caca..ac36fb2 100644 --- a/dist/theme.css +++ b/dist/theme.css @@ -1 +1 @@ -table caption,.tabled__caption{padding-block:var(--tabled-v-space-4xs);border-block-end:1px solid var(--tabled-color-150);background:var(--tabled-color-white);z-index:4;position:relative;font-weight:600;text-align:start}table{border-collapse:collapse;margin:0;padding:0;inline-size:100%;table-layout:fixed;text-align:start;overflow:hidden;scrollbar-color:var(--tabled-color-600) var(--tabled-color-150)}table:-webkit-scrollbar-thumb{background-color:var(--tabled-color-600)}table:-webkit-scrollbar-track{background-color:var(--tabled-color-150)}table th,table td{border-block-end:0;padding:var(--tabled-v-space-4xs)}table th a:not(.section-heading),table td a:not(.section-heading){padding:0}table th a:not(.section-heading):hover,table td a:not(.section-heading):hover{background:none}table th{background-color:var(--tabled-color-500);color:var(--tabled-color-white);border-inline-end:8px solid var(--tabled-color-600)}table thead tr{background-color:var(--tabled-color-600);border:1px solid var(--tabled-color-600);border-block-end:8px solid var(--tabled-color-700);padding:var(--tabled-v-space-4xs) 0 0}@media(min-width: 1024px){table thead tr{padding:var(--tabled-v-space-3xs) var(--tabled-v-space-2xs)}}table thead tr th{background:none;border-inline-end:0}table tbody tr{background-color:var(--tabled-color-150);border:1px solid var(--line-light);border-block-start:none;padding:var(--tabled-v-space-3xs) var(--tabled-v-space-2xs);vertical-align:top}.layout--light .link-collection--table table tbody tr{background-color:var(--color-white)}table tbody tr .link-default-desc{color:var(--tabled-color-black)}table tbody tr:nth-child(even){background-color:var(--color-white)}table tbody td,table tbody .link-default-desc{color:var(--tabled-color-black)}table tbody p{margin-block-start:0;margin-block-end:0}table.tabled--stacked th{padding:var(--tabled-v-space-2xs)}table.tabled--stacked td{padding:var(--tabled-v-space-3xs)}table.tabled--stacked th:before,table.tabled--stacked td:before{font-weight:600}@media(max-width: 1024px){table.tabled--stacked tr{border-inline-start:0;border-inline-end:0;background-color:var(--color-white)}table.tabled--stacked tr:nth-child(even){background-color:var(--tabled-color-150)}table.tabled--stacked td{padding:0;margin:var(--tabled-v-space-3xs)}}/*# sourceMappingURL=theme.css.map */ +table caption,.tabled__caption{padding-block:var(--tabled-v-space-4xs);border-block-end:1px solid var(--tabled-color-150);background:var(--tabled-color-white);z-index:4;position:relative;font-weight:600;text-align:start}table{border-collapse:collapse;margin:0;padding:0;inline-size:100%;table-layout:fixed;text-align:start;overflow:hidden;scrollbar-color:var(--tabled-color-600) var(--tabled-color-150)}table:-webkit-scrollbar-thumb{background-color:var(--tabled-color-600)}table:-webkit-scrollbar-track{background-color:var(--tabled-color-150)}table th,table td{border-block-end:0;padding:var(--tabled-v-space-4xs)}table th a:not(.section-heading),table td a:not(.section-heading){padding:0}table th a:not(.section-heading):hover,table td a:not(.section-heading):hover{background:none}table th{background-color:var(--tabled-color-500);color:var(--tabled-color-white);border-inline-end:8px solid var(--tabled-color-600)}table thead tr{background-color:var(--tabled-color-600);border:1px solid var(--tabled-color-600);border-block-end:8px solid var(--tabled-color-700);padding:var(--tabled-v-space-4xs) 0 0}@media(min-width: 1024px){table thead tr{padding:var(--tabled-v-space-3xs) var(--tabled-v-space-2xs)}}table thead tr th{background:none;border-inline-end:0}table tbody tr{background-color:var(--tabled-color-150);border:1px solid var(--line-light);border-block-start:none;padding:var(--tabled-v-space-3xs) var(--tabled-v-space-2xs);vertical-align:top}.layout--light .link-collection--table table tbody tr{background-color:var(--color-white)}table tbody tr .link-default-desc{color:var(--tabled-color-black)}table tbody tr:nth-child(even){background-color:var(--color-white)}table tbody td,table tbody .link-default-desc{color:var(--tabled-color-black)}table tbody p{margin-block-start:0;margin-block-end:0}table.tabled--stacked th{padding:var(--tabled-v-space-2xs)}table.tabled--stacked td{padding:var(--tabled-v-space-3xs)}table.tabled--stacked th:before,table.tabled--stacked td:before{font-weight:600}@media(max-width: 1024px){table.tabled--stacked tr{border-inline-start:0;border-inline-end:0;background-color:var(--color-white)}table.tabled--stacked tr:nth-child(even){background-color:var(--tabled-color-150)}table.tabled--stacked td{padding:0;margin:var(--tabled-v-space-3xs)}} diff --git a/package.json b/package.json index 21a79a8..13e0856 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "start": "parcel docs/examples.html", "tsc": "tsc", "uglify": "uglifyjs --compress --mangle -o ./dist/tabled.min.js -- ./dist/tabled.js", - "sass-themes": "sass ./src/styles/tabled_theme.scss ./dist/theme.css --style compressed", - "sass": "sass ./src/styles/tabled_core.scss ./dist/styles.css --style compressed", + "sass-themes": "sass --no-source-map ./src/styles/tabled_theme.scss ./dist/theme.css --style compressed", + "sass": "sass --no-source-map ./src/styles/tabled_core.scss ./dist/styles.css --style compressed", "build": "npm run tsc && npm run sass && npm run sass-themes && npm run uglify", "prepack": "npm run build" },