diff options
6 files changed, 73 insertions, 20 deletions
| -rw-r--r-- | docs/src/contents/breadcrumbs.pug | 2 | ||||
| -rw-r--r-- | docs/src/contents/browsers.pug (renamed from docs/src/contents/browers.pug) | 0 | ||||
| -rw-r--r-- | docs/src/contents/code.pug | 2 | ||||
| -rw-r--r-- | docs/src/contents/custom.pug | 26 | ||||
| -rw-r--r-- | docs/src/contents/position.pug | 11 | ||||
| -rw-r--r-- | docs/src/contents/tables.pug | 52 |
diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug index ccde5e1..9d61c69 100644 --- a/docs/src/contents/breadcrumbs.pug +++ b/docs/src/contents/breadcrumbs.pug @@ -22,7 +22,7 @@ p Breadcrumbs are used as navigational hierarchies to indicate current location. li.breadcrumb-item a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings li.breadcrumb-item - | Search result: + | Search result: a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre p diff --git a/docs/src/contents/browers.pug b/docs/src/contents/browsers.pug index dfa95cd..dfa95cd 100644 --- a/docs/src/contents/browers.pug +++ b/docs/src/contents/browsers.pug diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug index f1ee876..b14cc89 100644 --- a/docs/src/contents/code.pug +++ b/docs/src/contents/code.pug @@ -2,7 +2,7 @@ p Code is used for styling inline and multiline code snippets. p | For inline code, you can use the #{'<code>'} element. | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it. - | The #[code data-lang] ibute is rendered as the language name in the top right. + | The #[code data-lang] attribute is rendered as the language name in the top right. pre.code(data-lang='HTML') code diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug index a21357e..367fdac 100644 --- a/docs/src/contents/custom.pug +++ b/docs/src/contents/custom.pug @@ -177,31 +177,31 @@ p .color-subtitle Error .columns .column.col-3.col-md-6 - .docs-color(style='background:#454d5d;color:#fff;') - .color-title #454d5d + .docs-color(style='background:#303742;color:#fff;') + .color-title #303742 .color-subtitle Dark .column.col-3.col-md-6 - .docs-color(style='background:#727e96;color:#fff;') - .color-title #727e96 + .docs-color(style='background:#66758c;color:#fff;') + .color-title #66758c .color-subtitle Gray dark .column.col-3.col-md-6 - .docs-color(style='background:#acb3c2;color:#fff;') - .color-title #acb3c2 + .docs-color(style='background:#bcc3ce;color:#303742;') + .color-title #bcc3ce .color-subtitle Gray .column.col-3.col-md-6 - .docs-color(style='background:#e7e9ed;color:#727e96;') - .color-title #e7e9ed + .docs-color(style='background:#f7f8f9;color:#303742;') + .color-title #f7f8f9 .color-subtitle Gray light .column.col-3.col-md-6 - .docs-color(style='background:#f0f1f4;color:#727e96;') - .color-title #f0f1f4 + .docs-color(style='background:#bcc3ce;color:#303742;') + .color-title #bcc3ce .color-subtitle Border .column.col-3.col-md-6 - .docs-color(style='background:#f8f9fa;color:#727e96;') - .color-title #f8f9fa + .docs-color(style='background:#f7f8f9;color:#303742;') + .color-title #f7f8f9 .color-subtitle Background .column.col-3.col-md-6 - .docs-color(style='background:#fff;color:#727e96;') + .docs-color(style='background:#fff;color:#303742;') .color-title #fff .color-subtitle Light diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug index 4e73fed..7f49b1f 100644 --- a/docs/src/contents/position.pug +++ b/docs/src/contents/position.pug @@ -9,12 +9,13 @@ pre.code(data-lang='HTML') <!-- float: left and right --> <div class="float-left"></div> <div class="float-right"></div> - <!-- position: relative, absolute and fixed --> - <div class="relative"></div> - <div class="absolute"></div> - <div class="fixed"></div> + <!-- position: relative, absolute, fixed and sticky --> + <div class="p-relative"></div> + <div class="p-absolute"></div> + <div class="p-fixed"></div> + <div class="p-sticky"></div> <!-- centered block --> - <div class="centered"></div> + <div class="p-centered"></div> <!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --> <div class="m-1"></div> diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug index 4cb996c..5466959 100644 --- a/docs/src/contents/tables.pug +++ b/docs/src/contents/tables.pug @@ -52,4 +52,56 @@ pre.code(data-lang='HTML') <td>14 October 1994</td> </tr> </tbody> + </table> + + +.docs-demo.columns + .column.col-12 + table.table.table-striped.table-scroll + thead + tr + th Name + th Rating + th Duration + th Genre + th Release date + th Director + tbody + tr + td The Shawshank Redemption + td R + td 2h 22min + td Crime, Drama + td 14 October 1994 + td Frank Darabont + tr + td The Godfather + td R + td 2h 55min + td Crime, Drama + td 24 March 1972 + td Francis Ford Coppola + tr + td Schindler's List + td R + td 3h 15min + td Biography, Drama, History + td 4 February 1994 + td Steven Spielberg + tr + td Se7en + td R + td 2h 7min + td Crime, Drama, Mystery + td 22 September 1995 + td David Fincher + +p + | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <table class="table table-striped table-scroll"> + ... </table>
\ No newline at end of file |