diff options
Diffstat (limited to '')
-rw-r--r-- | example.css | 124 | ||||
-rw-r--r-- | example.css.map | 1 |
2 files changed, 125 insertions, 0 deletions
diff --git a/example.css b/example.css new file mode 100644 index 0000000..113a7bf --- /dev/null +++ b/example.css @@ -0,0 +1,124 @@ +@charset "UTF-8"; +.sortable th { + cursor: pointer; +} +.sortable th.no-sort { + pointer-events: none; +} +.sortable th::after, .sortable th::before { + transition: color 0.1s ease-in-out; + font-size: 1.2em; + color: transparent; +} +.sortable th::after { + margin-left: 3px; + content: "▸"; +} +.sortable th:hover::after { + color: inherit; +} +.sortable th.dir-d::after { + color: inherit; + content: "▾"; +} +.sortable th.dir-u::after { + color: inherit; + content: "▴"; +} +.sortable th.indicator-left::after { + content: ""; +} +.sortable th.indicator-left::before { + margin-right: 3px; + content: "▸"; +} +.sortable th.indicator-left:hover::before { + color: inherit; +} +.sortable th.indicator-left.dir-d::before { + color: inherit; + content: "▾"; +} +.sortable th.indicator-left.dir-u::before { + color: inherit; + content: "▴"; +} + +.sortable { + --stripe-color: #e4e4e4; + --th-color: #fff; + --th-bg: #808080; + --td-color: #000; + --td-on-stripe-color: #000; + border-spacing: 0; +} +.sortable tbody tr:nth-child(odd) { + background-color: var(--stripe-color); + color: var(--td-on-stripe-color); +} +.sortable th { + background: var(--th-bg); + color: var(--th-color); + font-weight: normal; + text-align: left; + text-transform: capitalize; + vertical-align: baseline; + white-space: nowrap; +} +.sortable td { + color: var(--td-color); +} +.sortable td, +.sortable th { + padding: 10px; +} +.sortable td:first-child, +.sortable th:first-child { + border-top-left-radius: 4px; +} +.sortable td:last-child, +.sortable th:last-child { + border-top-right-radius: 4px; +} + +body { + font-size: 14px; +} + +p { + line-height: 1.7em; +} + +code { + font-family: monospace; + background: #eee; + padding: 5px; + border-radius: 2px; +} + +* { + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.sortable:nth-of-type(4) th:nth-child(7), +th.no-sort { + background: pink; + color: red; + pointer-events: none; +} + +.sortable:nth-of-type(4) th:nth-child(7)::after { + color: red; + content: "(also not sortable)"; + font-size: 0.9em; + display: block; +} + +.lefty td:nth-child(2), +.lefty th:nth-child(2) { + width: 80px; + text-align: right; +}/*# sourceMappingURL=example.css.map */
\ No newline at end of file diff --git a/example.css.map b/example.css.map new file mode 100644 index 0000000..e5d7a9c --- /dev/null +++ b/example.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["example.css","sortable-base.scss","sortable.scss","example.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACCd;EACE,eAAA;ADCJ;ACCI;EACE,oBAAA;ADCN;ACCI;EAEE,kCAAA;EACA,gBAAA;EACA,kBAAA;ADAN;ACGI;EACE,gBAAA;EACA,YAAA;ADDN;ACIM;EACE,cAAA;ADFR;ACOM;EACE,cAAA;EACA,YAAA;ADLR;ACUM;EACE,cAAA;EACA,YAAA;ADRR;ACYM;EACE,WAAA;ADVR;ACYM;EACE,iBAAA;EACA,YAAA;ADVR;ACcQ;EACE,cAAA;ADZV;ACiBQ;EACE,cAAA;EACA,YAAA;ADfV;ACoBQ;EACE,cAAA;EACA,YAAA;ADlBV;;AE1CA;EACE,uBAAA;EACA,gBAAA;EACA,gBAAA;EACA,gBAAA;EACA,0BAAA;EAEA,iBAAA;AF4CF;AExCM;EACE,qCAAA;EACA,gCAAA;AF0CR;AEtCE;EACE,wBAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;EACA,0BAAA;EACA,wBAAA;EACA,mBAAA;AFwCJ;AEtCE;EACE,sBAAA;AFwCJ;AEtCE;;EAEE,aAAA;AFwCJ;AEtCI;;EACE,2BAAA;AFyCN;AEtCI;;EACE,4BAAA;AFyCN;;AGhFA;EACE,eAAA;AHmFF;;AGhFA;EACE,kBAAA;AHmFF;;AGhFA;EACE,sBAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;AHmFF;;AGhFA;EACE,sBAAA;EACA,8JAAA;EAEA,mCAAA;EACA,kCAAA;AHkFF;;AGhFA;;EAEE,gBAAA;EACA,UAAA;EACA,oBAAA;AHmFF;;AGjFA;EACE,UAAA;EACA,8BAAA;EACA,gBAAA;EACA,cAAA;AHoFF;;AGjFE;;EAEE,WAAA;EACA,iBAAA;AHoFJ","file":"example.css"}
\ No newline at end of file |