From e7d4b2bb3ada5030f0271c315870749dd889347d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 9 Jun 2018 14:31:45 +0800 Subject: Add Icons Pug template --- docs/src/contents/icons.pug | 197 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) (limited to 'docs/src') diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug index e69de29..b67f1a5 100644 --- a/docs/src/contents/icons.pug +++ b/docs/src/contents/icons.pug @@ -0,0 +1,197 @@ +p + | Icons are single-element, responsive and pure CSS icons. + | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{''} to have these CSS icons. + ++docs-subheading('icons-navigation', 'Navigation icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-up + p icon-arrow-up + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-right + p icon-arrow-right + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-down + p icon-arrow-down + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-left + p icon-arrow-left + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-upward + p icon-upward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-forward + p icon-forward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-downward + p icon-downward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-back + p icon-back + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-caret + p icon-caret + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-menu + p icon-menu + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-apps + p icon-apps + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-more-horiz + p icon-more-horiz + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-more-vert + p icon-more-vert + ++docs-subheading('icons-action', 'Action icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-resize-horiz + p icon-resize-horiz + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-resize-vert + p icon-resize-vert + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-plus + p icon-plus + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-minus + p icon-minus + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-cross + p icon-cross + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-check + p icon-check + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-stop + p icon-stop + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-shutdown + p icon-shutdown + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-refresh + p icon-refresh + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-search + p icon-search + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-flag + p icon-flag + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-bookmark + p icon-bookmark + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-edit + p icon-edit + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-delete + p icon-delete + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-share + p icon-share + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-download + p icon-download + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-upload + p icon-upload + ++docs-subheading('icons-object', 'Object icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-mail + p icon-mail + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-people + p icon-people + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-message + p icon-message + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-photo + p icon-photo + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-time + p icon-time + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-location + p icon-location + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-link + p icon-link + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-emoji + p icon-emoji + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + ++docs-subheading('icons-sizes', 'Icon sizes') + +p + | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes. + | You can set #[code font-size] to have different icon sizes. + +.columns + .column.col-3.col-md-6 + p + i.icon.icon-2x.icon-mail + p icon-2x (32px) + .column.col-3.col-md-6 + p + i.icon.icon-3x.icon-mail + p icon-3x (48px) + .column.col-3.col-md-6 + p + i.icon.icon-4x.icon-mail + p icon-4x (64px) + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + \ No newline at end of file -- cgit v1.3.1-23-gd82d