├── logo.xcf ├── docs └── assets │ ├── img │ ├── home.jpg │ ├── favicon.ico │ ├── icon-192.png │ ├── thumbnail.jpg │ ├── apple-touch-icon.png │ └── component │ │ ├── nav │ │ ├── size.png │ │ ├── tree.png │ │ ├── active.png │ │ ├── tabs-left.png │ │ ├── tabs-bottom.png │ │ ├── tabs-right.png │ │ └── tabs-material.png │ │ ├── button │ │ ├── 3d.png │ │ ├── active.png │ │ ├── circle.png │ │ ├── custom.png │ │ ├── hover.png │ │ ├── pill.png │ │ ├── size.png │ │ ├── state.png │ │ ├── opacity.png │ │ ├── outline.png │ │ ├── responsive-block.png │ │ └── responsive-size.png │ │ ├── card │ │ ├── pill.png │ │ ├── size.png │ │ ├── table.png │ │ ├── body-size.png │ │ ├── image-left.png │ │ ├── footer-pills.png │ │ ├── footer-tabs.png │ │ ├── image-right.png │ │ ├── responsive-size.png │ │ ├── responsive-image-left.png │ │ └── responsive-image-right.png │ │ ├── flex │ │ ├── align.png │ │ ├── align-content.png │ │ ├── responsive-align.png │ │ └── responsive-align-content.png │ │ ├── font │ │ ├── size.png │ │ └── weight.png │ │ ├── text │ │ ├── hover.png │ │ ├── state.png │ │ ├── custom.png │ │ ├── opacity.png │ │ └── hover-opacity.png │ │ ├── badge │ │ ├── custom.png │ │ └── opacity.png │ │ ├── border │ │ ├── custom.png │ │ ├── hover.png │ │ ├── style.png │ │ ├── width.png │ │ ├── opacity.png │ │ ├── responsive.png │ │ ├── rounded-0.png │ │ ├── hover-opacity.png │ │ ├── rounded-pill.png │ │ └── responsive-width.png │ │ ├── grid │ │ ├── column-5.png │ │ ├── row-size.png │ │ ├── container-size.png │ │ ├── gutter-spacing.png │ │ ├── column-size-wide.png │ │ └── wide-container-responsive.png │ │ ├── navbar │ │ ├── size.png │ │ ├── tribar.png │ │ ├── nav-size.png │ │ ├── scroller.png │ │ ├── breadcrumb.png │ │ ├── container.png │ │ ├── expand-xs.png │ │ ├── dropdown-menu.png │ │ ├── scroller-size.png │ │ ├── nav-align-left.png │ │ ├── nav-align-right.png │ │ ├── fixed-body-padding.png │ │ ├── nav-size-vertical.png │ │ └── nav-size-horizontal.png │ │ ├── progress │ │ ├── size.png │ │ └── vertical.png │ │ ├── sidebar │ │ ├── color.png │ │ ├── modal.png │ │ ├── size.png │ │ ├── nav-size.png │ │ └── responsive-visibility.png │ │ ├── tribar │ │ ├── color.png │ │ └── tribar.png │ │ ├── breadcrumb │ │ ├── pill.png │ │ ├── size.png │ │ ├── arrow.png │ │ ├── color.png │ │ └── responsive-size.png │ │ ├── dropdown │ │ ├── arrow.png │ │ ├── hover.png │ │ ├── mega-menu.png │ │ ├── menu-size.png │ │ ├── disable-caret.png │ │ ├── scrollable-menu.png │ │ └── responsive-menu-size.png │ │ ├── form │ │ ├── input-dark.png │ │ ├── input-size.png │ │ ├── input-color.png │ │ ├── input-opacity.png │ │ ├── input-material.png │ │ └── switch-reverse.png │ │ ├── list-group │ │ ├── size.png │ │ ├── striped.png │ │ ├── item-size.png │ │ └── horizontal-flush.png │ │ ├── pagination │ │ └── size.png │ │ ├── position │ │ └── sizes.png │ │ ├── scrollspy │ │ └── tree.png │ │ ├── background │ │ ├── contain.png │ │ ├── cover.png │ │ ├── custom.png │ │ ├── hover.png │ │ ├── opacity.png │ │ ├── state.png │ │ ├── striped.png │ │ └── hover-opacity.png │ │ ├── collapse │ │ └── horizontal.png │ │ ├── type │ │ └── responsive-heading.png │ │ └── size │ │ └── full-width-and-height.png │ ├── json │ └── manifest.json │ └── css │ └── main.css ├── src ├── docs │ ├── scss │ │ ├── main.scss │ │ ├── postboot │ │ │ └── _main.scss │ │ ├── bootstrap │ │ │ └── _main.scss │ │ └── _reboot.scss │ └── pug │ │ ├── mixins │ │ ├── badge.pug │ │ ├── progress.pug │ │ ├── font.pug │ │ ├── breadcrumb.pug │ │ ├── pagination.pug │ │ ├── list-group.pug │ │ ├── text.pug │ │ ├── background.pug │ │ ├── nav.pug │ │ ├── form.pug │ │ ├── grid.pug │ │ ├── button.pug │ │ ├── border.pug │ │ ├── dropdown.pug │ │ └── navbar.pug │ │ ├── variables.pug │ │ ├── nav.pug │ │ ├── card.pug │ │ ├── flex.pug │ │ ├── font.pug │ │ ├── form.pug │ │ ├── grid.pug │ │ ├── size.pug │ │ ├── text.pug │ │ ├── type.pug │ │ ├── badge.pug │ │ ├── border.pug │ │ ├── button.pug │ │ ├── navbar.pug │ │ ├── tribar.pug │ │ ├── sidebar.pug │ │ ├── collapse.pug │ │ ├── dropdown.pug │ │ ├── position.pug │ │ ├── progress.pug │ │ ├── scrollspy.pug │ │ ├── background.pug │ │ ├── breadcrumb.pug │ │ ├── list-group.pug │ │ ├── pagination.pug │ │ ├── component.pug │ │ ├── example-html.pug │ │ ├── mixins.pug │ │ ├── example-js.pug │ │ ├── tribar │ │ ├── tribar.pug │ │ └── color.pug │ │ ├── breadcrumb │ │ ├── pill.pug │ │ ├── arrow.pug │ │ ├── size.pug │ │ └── color.pug │ │ ├── nav │ │ ├── tabs-bottom.pug │ │ ├── active.pug │ │ ├── tabs-left.pug │ │ ├── tabs-right.pug │ │ ├── tabs-material.pug │ │ ├── size.pug │ │ └── tree.pug │ │ ├── button │ │ ├── circle.pug │ │ ├── pill.pug │ │ ├── hover.pug │ │ ├── block-responsive.pug │ │ ├── 3d.pug │ │ ├── opacity.pug │ │ ├── state.pug │ │ ├── custom.pug │ │ ├── outline.pug │ │ ├── active.pug │ │ └── size.pug │ │ ├── list-group │ │ ├── striped.pug │ │ ├── size.pug │ │ ├── horizontal-flush.pug │ │ └── item-size.pug │ │ ├── navbar │ │ ├── container.pug │ │ ├── tribar.pug │ │ ├── nav-align-left.pug │ │ ├── expand-xs.pug │ │ ├── nav-align-right.pug │ │ ├── size.pug │ │ ├── scroller.pug │ │ ├── nav-size.pug │ │ ├── breadcrumb.pug │ │ ├── dropdown-menu.pug │ │ └── padding-vertical.pug │ │ ├── card │ │ ├── pill.pug │ │ ├── body-size.pug │ │ ├── footer-pills.pug │ │ ├── table.pug │ │ ├── footer-tabs.pug │ │ ├── image-left.pug │ │ ├── image-right.pug │ │ └── size.pug │ │ ├── text │ │ ├── hover.pug │ │ ├── custom.pug │ │ ├── state.pug │ │ ├── opacity.pug │ │ └── hover-opacity.pug │ │ ├── background │ │ ├── striped.pug │ │ ├── custom.pug │ │ ├── state.pug │ │ ├── cover.pug │ │ ├── opacity.pug │ │ ├── contain.pug │ │ ├── hover-opacity.pug │ │ └── hover.pug │ │ ├── border │ │ ├── custom.pug │ │ ├── opacity.pug │ │ ├── responsive.pug │ │ ├── hover-opacity.pug │ │ ├── rounded-0.pug │ │ ├── rounded-pill.pug │ │ ├── hover.pug │ │ ├── style.pug │ │ └── width.pug │ │ ├── badge │ │ ├── opacity.pug │ │ └── custom.pug │ │ ├── grid │ │ ├── column-5.pug │ │ ├── wide-container-responsive.pug │ │ ├── row-size.pug │ │ ├── column-size-wide.pug │ │ └── container-size.pug │ │ ├── dropdown │ │ ├── disable-caret.pug │ │ ├── scrollable-menu.pug │ │ ├── menu-size.pug │ │ ├── arrow.pug │ │ ├── hover.pug │ │ └── mega-menu.pug │ │ ├── type │ │ └── heading-responsive.pug │ │ ├── form │ │ ├── input-dark.pug │ │ ├── input-color.pug │ │ ├── switch-reverse.pug │ │ ├── input-material.pug │ │ ├── input-opacity.pug │ │ └── input-size.pug │ │ ├── example.pug │ │ ├── progress │ │ ├── vertical.pug │ │ └── size.pug │ │ ├── font │ │ ├── size.pug │ │ └── weight.pug │ │ ├── pagination │ │ └── size.pug │ │ ├── example-responsive.pug │ │ ├── templates │ │ ├── image-left.pug │ │ └── image-right.pug │ │ ├── sidebar │ │ ├── size.pug │ │ ├── expand.pug │ │ ├── color.pug │ │ └── nav-size.pug │ │ ├── collapse │ │ └── horizontal.pug │ │ ├── size │ │ └── full.pug │ │ ├── flex │ │ ├── align-content.pug │ │ └── align.pug │ │ └── position │ │ └── spacing.pug ├── scss │ ├── light │ │ ├── _variables.scss │ │ └── main.scss │ ├── mixins │ │ ├── _progress.scss │ │ ├── _dropdown.scss │ │ ├── _grid.scss │ │ ├── _tribar.scss │ │ ├── _nav.scss │ │ ├── _list-group.scss │ │ ├── _button.scss │ │ ├── _breadcrumb.scss │ │ ├── _navbar.scss │ │ └── _form.scss │ ├── _collapse.scss │ ├── grid │ │ └── main.scss │ ├── _mixins.scss │ ├── _functions.scss │ ├── _position.scss │ ├── _custom-form.scss │ ├── _pagination.scss │ ├── _tribar.scss │ ├── _progress.scss │ ├── _font.scss │ ├── main.scss │ ├── _badge.scss │ ├── _sizing.scss │ ├── _breadcrumb.scss │ ├── _type.scss │ ├── _text.scss │ └── _list-group.scss └── js │ ├── dropdown-mega.js │ ├── dropdown-hover.js │ └── scrollspy-tree.js ├── .browserslistrc ├── .github ├── release-drafter.yml └── workflows │ └── release.yml ├── LICENSE ├── package.json ├── dist └── js │ └── postboot.min.js ├── .gitignore └── .npmignore /logo.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/logo.xcf -------------------------------------------------------------------------------- /docs/assets/img/home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/home.jpg -------------------------------------------------------------------------------- /docs/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/favicon.ico -------------------------------------------------------------------------------- /docs/assets/img/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/icon-192.png -------------------------------------------------------------------------------- /src/docs/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "bootstrap/main"; 2 | @import "postboot/main"; 3 | @import "reboot"; 4 | -------------------------------------------------------------------------------- /src/scss/light/_variables.scss: -------------------------------------------------------------------------------- 1 | $theme-colors: (); 2 | $custom-colors: (); 3 | $enable-opacity: false; 4 | -------------------------------------------------------------------------------- /docs/assets/img/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/thumbnail.jpg -------------------------------------------------------------------------------- /docs/assets/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/tree.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/3d.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/pill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/pill.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/table.png -------------------------------------------------------------------------------- /docs/assets/img/component/flex/align.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/flex/align.png -------------------------------------------------------------------------------- /docs/assets/img/component/font/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/font/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/active.png -------------------------------------------------------------------------------- /docs/assets/img/component/text/hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/text/hover.png -------------------------------------------------------------------------------- /docs/assets/img/component/text/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/text/state.png -------------------------------------------------------------------------------- /docs/assets/img/component/badge/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/badge/custom.png -------------------------------------------------------------------------------- /docs/assets/img/component/badge/opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/badge/opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/custom.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/hover.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/style.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/width.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/active.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/circle.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/custom.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/hover.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/pill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/pill.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/state.png -------------------------------------------------------------------------------- /docs/assets/img/component/font/weight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/font/weight.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/column-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/column-5.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/row-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/row-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/tabs-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/tabs-left.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/tribar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/tribar.png -------------------------------------------------------------------------------- /docs/assets/img/component/progress/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/progress/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/sidebar/color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/sidebar/color.png -------------------------------------------------------------------------------- /docs/assets/img/component/sidebar/modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/sidebar/modal.png -------------------------------------------------------------------------------- /docs/assets/img/component/sidebar/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/sidebar/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/text/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/text/custom.png -------------------------------------------------------------------------------- /docs/assets/img/component/text/opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/text/opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/tribar/color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/tribar/color.png -------------------------------------------------------------------------------- /docs/assets/img/component/tribar/tribar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/tribar/tribar.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/breadcrumb/pill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/breadcrumb/pill.png -------------------------------------------------------------------------------- /docs/assets/img/component/breadcrumb/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/breadcrumb/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/outline.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/body-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/body-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/image-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/image-left.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/arrow.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/hover.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/input-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/input-dark.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/input-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/input-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/list-group/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/list-group/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/tabs-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/tabs-bottom.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/tabs-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/tabs-right.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/nav-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/nav-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/scroller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/scroller.png -------------------------------------------------------------------------------- /docs/assets/img/component/pagination/size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/pagination/size.png -------------------------------------------------------------------------------- /docs/assets/img/component/position/sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/position/sizes.png -------------------------------------------------------------------------------- /docs/assets/img/component/scrollspy/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/scrollspy/tree.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/contain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/contain.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/cover.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/custom.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/hover.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/state.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/striped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/striped.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/responsive.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/rounded-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/rounded-0.png -------------------------------------------------------------------------------- /docs/assets/img/component/breadcrumb/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/breadcrumb/arrow.png -------------------------------------------------------------------------------- /docs/assets/img/component/breadcrumb/color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/breadcrumb/color.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/footer-pills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/footer-pills.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/footer-tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/footer-tabs.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/image-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/image-right.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/mega-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/mega-menu.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/menu-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/menu-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/flex/align-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/flex/align-content.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/input-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/input-color.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/input-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/input-opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/list-group/striped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/list-group/striped.png -------------------------------------------------------------------------------- /docs/assets/img/component/nav/tabs-material.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/nav/tabs-material.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/breadcrumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/breadcrumb.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/container.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/container.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/expand-xs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/expand-xs.png -------------------------------------------------------------------------------- /docs/assets/img/component/progress/vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/progress/vertical.png -------------------------------------------------------------------------------- /docs/assets/img/component/sidebar/nav-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/sidebar/nav-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/text/hover-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/text/hover-opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/hover-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/hover-opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/border/rounded-pill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/rounded-pill.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/responsive-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/responsive-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/collapse/horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/collapse/horizontal.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/input-material.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/input-material.png -------------------------------------------------------------------------------- /docs/assets/img/component/form/switch-reverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/form/switch-reverse.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/container-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/container-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/gutter-spacing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/gutter-spacing.png -------------------------------------------------------------------------------- /docs/assets/img/component/list-group/item-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/list-group/item-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/dropdown-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/dropdown-menu.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/scroller-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/scroller-size.png -------------------------------------------------------------------------------- /src/scss/mixins/_progress.scss: -------------------------------------------------------------------------------- 1 | // Sizes 2 | @mixin progress-size($height, $font-size) { 3 | font-size: $font-size; 4 | height: $height; 5 | } 6 | -------------------------------------------------------------------------------- /docs/assets/img/component/border/responsive-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/border/responsive-width.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/responsive-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/responsive-block.png -------------------------------------------------------------------------------- /docs/assets/img/component/button/responsive-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/button/responsive-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/disable-caret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/disable-caret.png -------------------------------------------------------------------------------- /docs/assets/img/component/flex/responsive-align.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/flex/responsive-align.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/column-size-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/column-size-wide.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/nav-align-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/nav-align-left.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/nav-align-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/nav-align-right.png -------------------------------------------------------------------------------- /docs/assets/img/component/type/responsive-heading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/type/responsive-heading.png -------------------------------------------------------------------------------- /docs/assets/img/component/background/hover-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/background/hover-opacity.png -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/scrollable-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/scrollable-menu.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/fixed-body-padding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/fixed-body-padding.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/nav-size-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/nav-size-vertical.png -------------------------------------------------------------------------------- /docs/assets/img/component/breadcrumb/responsive-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/breadcrumb/responsive-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/responsive-image-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/responsive-image-left.png -------------------------------------------------------------------------------- /docs/assets/img/component/card/responsive-image-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/card/responsive-image-right.png -------------------------------------------------------------------------------- /docs/assets/img/component/list-group/horizontal-flush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/list-group/horizontal-flush.png -------------------------------------------------------------------------------- /docs/assets/img/component/navbar/nav-size-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/navbar/nav-size-horizontal.png -------------------------------------------------------------------------------- /docs/assets/img/component/size/full-width-and-height.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/size/full-width-and-height.png -------------------------------------------------------------------------------- /src/docs/scss/postboot/_main.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../src/scss/functions"; 2 | @import "../../../../src/scss/variables"; 3 | @import "../../../../src/scss/mixins"; 4 | -------------------------------------------------------------------------------- /docs/assets/img/component/dropdown/responsive-menu-size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/dropdown/responsive-menu-size.png -------------------------------------------------------------------------------- /docs/assets/img/component/flex/responsive-align-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/flex/responsive-align-content.png -------------------------------------------------------------------------------- /docs/assets/img/component/grid/wide-container-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/grid/wide-container-responsive.png -------------------------------------------------------------------------------- /docs/assets/img/component/sidebar/responsive-visibility.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarkhov/postboot/HEAD/docs/assets/img/component/sidebar/responsive-visibility.png -------------------------------------------------------------------------------- /src/docs/pug/mixins/badge.pug: -------------------------------------------------------------------------------- 1 | mixin badge(text, classes) 2 | .badge(class=classes)= text 3 | 4 | mixin badge_variant(text, variant) 5 | +badge(text, 'badge-' + variant) 6 | -------------------------------------------------------------------------------- /src/scss/_collapse.scss: -------------------------------------------------------------------------------- 1 | // Horizontal 2 | .collapse-horizontal.collapsing { 3 | width: 0; 4 | height: auto; 5 | @include transition($transition-collapse-horizontal); 6 | } 7 | -------------------------------------------------------------------------------- /src/docs/pug/variables.pug: -------------------------------------------------------------------------------- 1 | - var githubUrl= 'https://github.com' 2 | - var downloadUrl = githubUrl + '/' + username + '/' + pkg.name + '/releases/download/v' + pkg.version + '/' + pkg.name + '.zip' 3 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/progress.pug: -------------------------------------------------------------------------------- 1 | mixin progress(classes) 2 | .progress.mb-3(class=classes) 3 | .progress-bar.w-100 100% 4 | 5 | mixin progress_variant(variant) 6 | +progress('progress-' + variant) 7 | -------------------------------------------------------------------------------- /src/docs/scss/bootstrap/_main.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../node_modules/bootstrap/scss/functions"; 2 | @import "../../../../node_modules/bootstrap/scss/variables"; 3 | @import "../../../../node_modules/bootstrap/scss/mixins"; 4 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/font.pug: -------------------------------------------------------------------------------- 1 | mixin font(text, classes) 2 | p(class=classes)= text 3 | 4 | mixin font_size(text, size) 5 | +font(text, 'fs-' + size) 6 | 7 | mixin font_weight(text, weight) 8 | +font(text, 'fw-' + weight) 9 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # https://github.com/browserslist/browserslist#readme 2 | 3 | >= 1% 4 | last 1 major version 5 | not dead 6 | Chrome >= 45 7 | Firefox >= 38 8 | Edge >= 12 9 | Explorer >= 10 10 | iOS >= 9 11 | Safari >= 9 12 | Android >= 4.4 13 | Opera >= 30 14 | -------------------------------------------------------------------------------- /src/scss/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Sizes 2 | @mixin dropdown-menu-size($padding-y, $item-padding-y, $item-padding-x, $font-size) { 3 | padding: $padding-y 0; 4 | font-size: $font-size; 5 | 6 | .dropdown-item { 7 | padding: $item-padding-y $item-padding-x; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/mixins/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row sizes 2 | @mixin row-size($size) { 3 | @include make-row($grid-gutter-width / $size); 4 | 5 | > .col, 6 | > [class*="col-"] { 7 | padding-right: $grid-gutter-width / 2 / $size; 8 | padding-left: $grid-gutter-width / 2 / $size; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/grid/main.scss: -------------------------------------------------------------------------------- 1 | @import "../../../node_modules/bootstrap/scss/functions"; 2 | @import "../../../node_modules/bootstrap/scss/variables"; 3 | @import "../../../node_modules/bootstrap/scss/mixins"; 4 | 5 | @import "../functions"; 6 | @import "../variables"; 7 | @import "../mixins"; 8 | @import "../grid"; 9 | -------------------------------------------------------------------------------- /src/docs/pug/nav.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('nav') 5 | 6 | block meta_description 7 | +component_meta_description('nav') 8 | 9 | block component_description 10 | +component_description('nav') 11 | 12 | block component_examples 13 | +component_examples('nav') 14 | -------------------------------------------------------------------------------- /src/docs/pug/card.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('card') 5 | 6 | block meta_description 7 | +component_meta_description('card') 8 | 9 | block component_description 10 | +component_description('card') 11 | 12 | block component_examples 13 | +component_examples('card') 14 | -------------------------------------------------------------------------------- /src/docs/pug/flex.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('flex') 5 | 6 | block meta_description 7 | +component_meta_description('flex') 8 | 9 | block component_description 10 | +new_component_description('flex') 11 | 12 | block component_examples 13 | +component_examples('flex') 14 | -------------------------------------------------------------------------------- /src/docs/pug/font.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('font') 5 | 6 | block meta_description 7 | +component_meta_description('font') 8 | 9 | block component_description 10 | +component_description('font') 11 | 12 | block component_examples 13 | +component_examples('font') 14 | -------------------------------------------------------------------------------- /src/docs/pug/form.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('form') 5 | 6 | block meta_description 7 | +component_meta_description('form') 8 | 9 | block component_description 10 | +component_description('form') 11 | 12 | block component_examples 13 | +component_examples('form') 14 | -------------------------------------------------------------------------------- /src/docs/pug/grid.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('grid') 5 | 6 | block meta_description 7 | +component_meta_description('grid') 8 | 9 | block component_description 10 | +component_description('grid') 11 | 12 | block component_examples 13 | +component_examples('grid') 14 | -------------------------------------------------------------------------------- /src/docs/pug/size.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('size') 5 | 6 | block meta_description 7 | +component_meta_description('size') 8 | 9 | block component_description 10 | +component_description('size') 11 | 12 | block component_examples 13 | +component_examples('size') 14 | -------------------------------------------------------------------------------- /src/docs/pug/text.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('text') 5 | 6 | block meta_description 7 | +component_meta_description('text') 8 | 9 | block component_description 10 | +component_description('text') 11 | 12 | block component_examples 13 | +component_examples('text') 14 | -------------------------------------------------------------------------------- /src/docs/pug/type.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('type') 5 | 6 | block meta_description 7 | +component_meta_description('type') 8 | 9 | block component_description 10 | +component_description('type') 11 | 12 | block component_examples 13 | +component_examples('type') 14 | -------------------------------------------------------------------------------- /src/docs/pug/badge.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('badge') 5 | 6 | block meta_description 7 | +component_meta_description('badge') 8 | 9 | block component_description 10 | +component_description('badge') 11 | 12 | block component_examples 13 | +component_examples('badge') 14 | -------------------------------------------------------------------------------- /src/docs/pug/border.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('border') 5 | 6 | block meta_description 7 | +component_meta_description('border') 8 | 9 | block component_description 10 | +component_description('border') 11 | 12 | block component_examples 13 | +component_examples('border') 14 | -------------------------------------------------------------------------------- /src/docs/pug/button.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('button') 5 | 6 | block meta_description 7 | +component_meta_description('button') 8 | 9 | block component_description 10 | +component_description('button') 11 | 12 | block component_examples 13 | +component_examples('button') 14 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/breadcrumb.pug: -------------------------------------------------------------------------------- 1 | mixin breadcrumb(classes) 2 | ol.breadcrumb(class=classes) 3 | li.breadcrumb-item: a.breadcrumb-link(href='#') Home 4 | li.breadcrumb-item: a.breadcrumb-link(href='#') Category 5 | li.breadcrumb-item.active Article 6 | 7 | mixin breadcrumb_variant(variant) 8 | +breadcrumb("breadcrumb-" + variant) 9 | -------------------------------------------------------------------------------- /src/docs/pug/navbar.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('navbar') 5 | 6 | block meta_description 7 | +component_meta_description('navbar') 8 | 9 | block component_description 10 | +component_description('navbar') 11 | 12 | block component_examples 13 | +component_examples('navbar') 14 | -------------------------------------------------------------------------------- /src/docs/pug/tribar.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('tribar') 5 | 6 | block meta_description 7 | +component_meta_description('tribar') 8 | 9 | block component_description 10 | +new_component_description('tribar') 11 | 12 | block component_examples 13 | +component_examples('tribar') 14 | -------------------------------------------------------------------------------- /src/docs/pug/sidebar.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('sidebar') 5 | 6 | block meta_description 7 | +component_meta_description('sidebar') 8 | 9 | block component_description 10 | +new_component_description('sidebar') 11 | 12 | block component_examples 13 | +component_examples('sidebar') 14 | -------------------------------------------------------------------------------- /src/docs/pug/collapse.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('collapse') 5 | 6 | block meta_description 7 | +component_meta_description('collapse') 8 | 9 | block component_description 10 | +component_description('collapse') 11 | 12 | block component_examples 13 | +component_examples('collapse') 14 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('dropdown') 5 | 6 | block meta_description 7 | +component_meta_description('dropdown') 8 | 9 | block component_description 10 | +component_description('dropdown') 11 | 12 | block component_examples 13 | +component_examples('dropdown') 14 | -------------------------------------------------------------------------------- /src/docs/pug/position.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('position') 5 | 6 | block meta_description 7 | +component_meta_description('position') 8 | 9 | block component_description 10 | +component_description('position') 11 | 12 | block component_examples 13 | +component_examples('position') 14 | -------------------------------------------------------------------------------- /src/docs/pug/progress.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('progress') 5 | 6 | block meta_description 7 | +component_meta_description('progress') 8 | 9 | block component_description 10 | +component_description('progress') 11 | 12 | block component_examples 13 | +component_examples('progress') 14 | -------------------------------------------------------------------------------- /src/docs/pug/scrollspy.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('scrollspy') 5 | 6 | block meta_description 7 | +component_meta_description('scrollspy') 8 | 9 | block component_description 10 | +component_description('scrollspy') 11 | 12 | block component_examples 13 | +component_examples('scrollspy') 14 | -------------------------------------------------------------------------------- /src/docs/pug/background.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('background') 5 | 6 | block meta_description 7 | +component_meta_description('background') 8 | 9 | block component_description 10 | +component_description('background') 11 | 12 | block component_examples 13 | +component_examples('background') 14 | -------------------------------------------------------------------------------- /src/docs/pug/breadcrumb.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('breadcrumb') 5 | 6 | block meta_description 7 | +component_meta_description('breadcrumb') 8 | 9 | block component_description 10 | +component_description('breadcrumb') 11 | 12 | block component_examples 13 | +component_examples('breadcrumb') 14 | -------------------------------------------------------------------------------- /src/docs/pug/list-group.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('list-group') 5 | 6 | block meta_description 7 | +component_meta_description('list-group') 8 | 9 | block component_description 10 | +component_description('list-group') 11 | 12 | block component_examples 13 | +component_examples('list-group') 14 | -------------------------------------------------------------------------------- /src/docs/pug/pagination.pug: -------------------------------------------------------------------------------- 1 | extends component.pug 2 | 3 | block head_title 4 | +component_head_title('pagination') 5 | 6 | block meta_description 7 | +component_meta_description('pagination') 8 | 9 | block component_description 10 | +component_description('pagination') 11 | 12 | block component_examples 13 | +component_examples('pagination') 14 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/breadcrumb"; 2 | @import "mixins/button"; 3 | @import "mixins/card"; 4 | @import "mixins/dropdown"; 5 | @import "mixins/form"; 6 | @import "mixins/grid"; 7 | @import "mixins/list-group"; 8 | @import "mixins/nav"; 9 | @import "mixins/navbar"; 10 | @import "mixins/progress"; 11 | @import "mixins/sidebar"; 12 | @import "mixins/tribar"; 13 | -------------------------------------------------------------------------------- /src/scss/_functions.scss: -------------------------------------------------------------------------------- 1 | @function unicode($str) { 2 | @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"") 3 | } 4 | 5 | // Request a color level 6 | @function color-level($color, $level: 0) { 7 | $color-base: if($level > 0, $black, $white); 8 | $level: abs($level); 9 | 10 | @return mix($color-base, $color, $level * $theme-color-interval); 11 | } 12 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/pagination.pug: -------------------------------------------------------------------------------- 1 | mixin pagination(classes) 2 | ol.pagination.mb-3(class=classes) 3 | - for(var i = 1; i <= 3; i++) 4 | if i == 1 5 | li.page-item.active 6 | span.page-link= i 7 | else 8 | li.page-item 9 | a.page-link(href="#")= i 10 | 11 | mixin pagination_size(size) 12 | +pagination('pagination-' + size) 13 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: 'v$NEXT_PATCH_VERSION' 2 | tag-template: 'v$NEXT_PATCH_VERSION' 3 | categories: 4 | - title: ':rocket: Features' 5 | label: 'feature' 6 | - title: ':beetle: Bug fixes' 7 | label: 'bug' 8 | - title: ':notebook: Docs' 9 | label: 'docs' 10 | change-template: '- #$NUMBER - $TITLE' 11 | prerelease: true 12 | template: | 13 | ## Changes 14 | 15 | $CHANGES 16 | -------------------------------------------------------------------------------- /docs/assets/json/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "PostBoot", 3 | "name": "PostBoot", 4 | "icons": [ 5 | { 6 | "src": "/postboot/assets/img/icon-192.png", 7 | "type": "image/png", 8 | "sizes": "192x192" 9 | } 10 | ], 11 | "start_url": "/postboot/", 12 | "background_color": "#3367D6", 13 | "display": "standalone", 14 | "scope": "/postboot/", 15 | "theme_color": "#3367D6" 16 | } 17 | -------------------------------------------------------------------------------- /src/docs/pug/component.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block main 4 | #description 5 | block component_description 6 | #examples 7 | block component_examples 8 | 9 | block sidebar_right 10 | ul.sidebar-nav.nav-tree.nav-tabs.nav-tabs-material.nav-tabs-right.nav-y-2.fs-2 11 | li.nav-item 12 | a.nav-link(href="#description") Description 13 | li.nav-item 14 | a.nav-link(href="#examples") Examples 15 | -------------------------------------------------------------------------------- /src/scss/_position.scss: -------------------------------------------------------------------------------- 1 | // Spacing 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | @include media-breakpoint-up($breakpoint) { 4 | $infix: breakpoint-infix($breakpoint); 5 | 6 | @each $position in $position-properties { 7 | .#{$position}#{$infix}-auto { #{$position}: auto; } 8 | .#{$position}#{$infix}-0 { #{$position}: 0; } 9 | .#{$position}#{$infix}-50 { #{$position}: 50%; } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/_custom-form.scss: -------------------------------------------------------------------------------- 1 | // Switch reverse 2 | .custom-switch-reverse { 3 | .custom-control-label { 4 | &::after { 5 | left: calc(#{-($custom-control-gutter + $custom-control-indicator-size)} + #{$custom-control-indicator-border-width * 2}); 6 | } 7 | } 8 | 9 | .custom-control-input:checked ~ .custom-control-label { 10 | &::after { 11 | transform: translateX(-($custom-switch-width - $custom-control-indicator-size)); 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/list-group.pug: -------------------------------------------------------------------------------- 1 | mixin list_group_item(text, classes) 2 | a.list-group-item.list-group-item-action(href="#" class=classes)= text 3 | 4 | mixin list_group_item_variant(text, variant) 5 | +list_group_item(text, 'list-group-item-' + variant) 6 | 7 | mixin list_group(classes) 8 | .list-group(class=classes) 9 | - for(var i = 1; i <= 5; i++) 10 | +list_group_item('List item ' + i) 11 | 12 | mixin list_group_variant(variant) 13 | +list_group('list-group-' + variant) 14 | -------------------------------------------------------------------------------- /src/js/dropdown-mega.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | var DATA_KEY = 'bs.dropdown-mega'; 3 | var EVENT_KEY = '.' + DATA_KEY; 4 | var DATA_API_KEY = '.data-api'; 5 | 6 | var Event = { 7 | CLICK_DATA_API : 'click' + EVENT_KEY + DATA_API_KEY 8 | }; 9 | 10 | var Selector = { 11 | MEGA_MENU : '.dropdown-mega-menu' 12 | }; 13 | 14 | $(document) 15 | .on(Event.CLICK_DATA_API, Selector.MEGA_MENU, function (event) { 16 | event.stopPropagation(); 17 | }); 18 | })(jQuery); 19 | -------------------------------------------------------------------------------- /src/scss/mixins/_tribar.scss: -------------------------------------------------------------------------------- 1 | // Color 2 | @mixin tribar-variant($color) { 3 | border-color: $color; 4 | 5 | &::before, 6 | &::after { 7 | background-color: $color; 8 | } 9 | } 10 | 11 | // Size 12 | @mixin tribar-size($width, $height, $margin-top) { 13 | border-top-width: $height; 14 | 15 | &, 16 | &::before, 17 | &::after { 18 | width: $width; 19 | } 20 | 21 | &::before, 22 | &::after { 23 | height: $height; 24 | margin-top: $margin-top; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/docs/pug/example-html.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block main 4 | block example_title 5 | block example_description 6 | 7 | .card.card-body.bg-light.mb-3 8 | pre.pre-scrollable 9 | code.language-markup 10 | block example_code 11 | 12 | block sidebar_right 13 | ul.sidebar-nav.nav-tree.nav-tabs.nav-tabs-material.nav-tabs-right.nav-y-2.fs-2 14 | li.nav-item 15 | a.nav-link(href="#description") Description 16 | li.nav-item 17 | a.nav-link(href="#example") Example 18 | -------------------------------------------------------------------------------- /src/docs/pug/mixins.pug: -------------------------------------------------------------------------------- 1 | include mixins/example.pug 2 | include mixins/grid.pug 3 | include mixins/badge.pug 4 | include mixins/breadcrumb.pug 5 | include mixins/button.pug 6 | include mixins/dropdown.pug 7 | include mixins/form.pug 8 | include mixins/list-group.pug 9 | include mixins/navbar.pug 10 | include mixins/nav.pug 11 | include mixins/pagination.pug 12 | include mixins/progress.pug 13 | include mixins/background.pug 14 | include mixins/border.pug 15 | include mixins/font.pug 16 | include mixins/text.pug 17 | -------------------------------------------------------------------------------- /src/docs/pug/example-js.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block main 4 | block example_title 5 | block example_description 6 | 7 | .card.card-body.bg-light.mb-3 8 | pre.pre-scrollable 9 | code.language-javascript 10 | block example_code 11 | 12 | block sidebar_right 13 | ul.sidebar-nav.nav-tree.nav-tabs.nav-tabs-material.nav-tabs-right.nav-y-2.fs-2 14 | li.nav-item 15 | a.nav-link(href="#description") Description 16 | li.nav-item 17 | a.nav-link(href="#example") Example 18 | -------------------------------------------------------------------------------- /src/docs/pug/tribar/tribar.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('tribar', 'tribar') 5 | 6 | block meta_description 7 | +example_meta_description('tribar', 'tribar') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('tribar') 11 | 12 | block example_description 13 | +example_description('tribar', 'tribar') 14 | 15 | block example_result 16 | .d-inline-block 17 | .tribar 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | .tribar 23 | -------------------------------------------------------------------------------- /src/scss/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Sizes 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | @include media-breakpoint-up($breakpoint) { 4 | $infix: breakpoint-infix($breakpoint); 5 | 6 | @each $size, $pagination in $pagination-sizes { 7 | .pagination#{$infix}-#{$size} { 8 | @include pagination-size(map-get($pagination, 'padding-y'), map-get($pagination, 'padding-x'), map-get($pagination, 'font-size'), map-get($pagination, 'line-height'), map-get($pagination, 'border-radius')); 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/docs/pug/breadcrumb/pill.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('breadcrumb', 'pill') 5 | 6 | block meta_description 7 | +example_meta_description('breadcrumb', 'pill') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('breadcrumb') 11 | 12 | block example_description 13 | +example_description('breadcrumb', 'pill') 14 | 15 | block example_result 16 | +breadcrumb_variant('pill') 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | ol.breadcrumb.breadcrumb-pill 22 | -------------------------------------------------------------------------------- /src/docs/pug/nav/tabs-bottom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'tabs_bottom') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'tabs_bottom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'tabs_bottom') 14 | 15 | block example_result 16 | +nav(['nav-tabs', 'nav-tabs-bottom']) 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | ul.nav.nav-tabs.nav-tabs-bottom 22 | -------------------------------------------------------------------------------- /src/docs/pug/nav/active.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'active') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'active') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'active') 14 | 15 | block example_result 16 | +nav('justify-content-start') 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | ul.nav 22 | li.nav-item: a.nav-link.active(href='#') Active 23 | -------------------------------------------------------------------------------- /src/docs/pug/button/circle.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'circle') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'circle') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'circle') 14 | 15 | block example_result 16 | +button('C', ['btn-primary', 'btn-circle']) 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | button.btn.btn-primary.btn-circle(type='button') C 22 | -------------------------------------------------------------------------------- /src/docs/pug/button/pill.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'pill') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'pill') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'pill') 14 | 15 | block example_result 16 | +button('Ellipse', ['btn-primary', 'btn-pill']) 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | button.btn.btn-primary.btn-pill(type='button') Ellipse 22 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/text.pug: -------------------------------------------------------------------------------- 1 | mixin text(text, classes) 2 | span.mr-2.mb-2.d-inline-block(class=classes)= text 3 | 4 | mixin text_variant(text, variant) 5 | +text(text, 'text-' + variant) 6 | 7 | mixin text_alpha(text, variant) 8 | +text_variant(text, variant + '-50') 9 | 10 | mixin text_hover(text, variant) 11 | +text_variant(text, 'hover-' + variant) 12 | 13 | mixin text_hover_alpha(text, variant, alpha) 14 | +text(text, ['text-' + variant, 'text-hover-' + variant + '-' + alpha]) 15 | 16 | mixin text_state(text, variant) 17 | +text_variant(text, 'state-' + variant) 18 | -------------------------------------------------------------------------------- /src/docs/pug/list-group/striped.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('list-group', 'striped') 5 | 6 | block meta_description 7 | +example_meta_description('list-group', 'striped') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('list-group') 11 | 12 | block example_description 13 | +example_description('list-group', 'striped') 14 | 15 | block example_result 16 | .row 17 | .col-md-4 18 | +list_group_variant('striped') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | .list-group.list-group-striped 24 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/container.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'container') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'container') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'container') 14 | 15 | block example_result 16 | +navbar(['navbar-expand-xs', 'navbar-dark', 'bg-dark']) 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | .navbar.px-0 22 | .container.navbar-container 23 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/background.pug: -------------------------------------------------------------------------------- 1 | mixin background(text, classes) 2 | p.p-2.mr-1.mb-2.d-inline-block(class=classes)= text 3 | 4 | mixin background_variant(text, variant) 5 | +background(text, 'bg-' + variant) 6 | 7 | mixin background_inverse(text, variant) 8 | +background(text, ['bg-' + variant, 'text-white']) 9 | 10 | mixin background_hover(text, variant, color) 11 | +background(text, ['border', 'border-' + variant, 'bg-hover-' + variant, 'text-hover-' + color]) 12 | 13 | mixin background_state(text, variant) 14 | +background(text, ['bg-state-' + variant, 'text-state-' + variant]) 15 | 16 | -------------------------------------------------------------------------------- /src/docs/pug/card/pill.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'pill') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'pill') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'pill') 14 | 15 | block example_result 16 | .row 17 | .col-md-6 18 | .card.card-body.card-pill 19 | h4.card-title Pill 20 | p.card-text Example text 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | .card.card-pill 26 | -------------------------------------------------------------------------------- /src/docs/pug/text/hover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('text', 'hover') 5 | 6 | block meta_description 7 | +example_meta_description('text', 'hover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('text') 11 | 12 | block example_description 13 | +example_description('text', 'hover') 14 | 15 | block example_result 16 | each text, variant in colors 17 | +text_hover(text, variant) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, variant in colors 23 | div(class='text-hover-' + variant)= text 24 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/nav.pug: -------------------------------------------------------------------------------- 1 | mixin nav(classes) 2 | ul.nav(class=classes) 3 | - for(var i = 1; i <= 3; i++) 4 | li.nav-item 5 | a.nav-link(href='#' class={ active: i === 1 })= 'Item ' + i 6 | 7 | mixin responsive_nav(classes) 8 | ul.nav(class=classes) 9 | - for(var i = 1; i <= 3; i++) 10 | li.nav-item 11 | a.nav-link(href='#' class={ active: i === 1, 'd-none d-sm-block': i > 2 })= 'Item ' + i 12 | 13 | mixin nav_size(size) 14 | +nav(['nav-pills', 'nav-' + size, 'mb-3']) 15 | 16 | mixin responsive_nav_size(size) 17 | +responsive_nav(['nav-pills', 'nav-' + size, 'mb-3']) 18 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/form.pug: -------------------------------------------------------------------------------- 1 | mixin form_control(placeholder, classes) 2 | input.form-control(type='text', placeholder=placeholder, class=classes) 3 | 4 | mixin input_variant(placeholder, variant) 5 | +form_control(placeholder, 'input-' + variant) 6 | 7 | mixin input_state(placeholder, variant, state) 8 | +form_control(placeholder, ['input-' + variant, 'is-' + state]) 9 | 10 | mixin input_dark(placeholder, variant) 11 | +form_control(placeholder, ['input-dark', 'input-' + variant]) 12 | 13 | mixin input_dark_state(placeholder, variant, state) 14 | +form_control(placeholder, ['input-dark', 'input-' + variant, 'is-' + state]) 15 | -------------------------------------------------------------------------------- /src/scss/mixins/_nav.scss: -------------------------------------------------------------------------------- 1 | // Sizes 2 | @mixin nav-size($padding-y, $padding-x, $font-size) { 3 | font-size: $font-size; 4 | 5 | > .nav-text, 6 | > .nav-link, 7 | > .nav-item > .nav-link { 8 | padding: $padding-y $padding-x; 9 | } 10 | } 11 | 12 | @mixin nav-size-y($padding-y) { 13 | > .nav-text, 14 | > .nav-link, 15 | > .nav-item > .nav-link { 16 | padding-top: $padding-y; 17 | padding-bottom: $padding-y; 18 | } 19 | } 20 | 21 | @mixin nav-size-x($padding-x) { 22 | > .nav-text, 23 | > .nav-link, 24 | > .nav-item > .nav-link { 25 | padding-left: $padding-x; 26 | padding-right: $padding-x; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/docs/pug/button/hover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'hover') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'hover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'hover') 14 | 15 | block example_result 16 | each text, variant in colors 17 | +button_hover(text, variant) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, variant in colors 23 | button.btn.btn-secondary.active(type='button' class='btn-active-' + variant)= text 24 | -------------------------------------------------------------------------------- /src/docs/pug/background/striped.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'striped') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'striped') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'striped') 14 | p Can be activated by adding #[code.fs-2 .bg-striped] class to any background. 15 | 16 | block example_result 17 | +background('Striped', ['bg-primary', 'bg-striped', 'text-white']) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | .bg-striped.bg-primary 23 | -------------------------------------------------------------------------------- /src/scss/_tribar.scss: -------------------------------------------------------------------------------- 1 | // Icon 2 | .tribar { 3 | border-top: $tribar-height solid $tribar-color; 4 | 5 | &, 6 | &::before, 7 | &::after { 8 | display: block; 9 | width: $tribar-width; 10 | } 11 | 12 | &::before, 13 | &::after { 14 | background-color: $tribar-color; 15 | content: ""; 16 | height: $tribar-height; 17 | margin-top: $tribar-margin-top; 18 | } 19 | } 20 | 21 | // Colors 22 | @each $color, $value in $theme-colors { 23 | .tribar-#{$color} { 24 | @include tribar-variant($value); 25 | } 26 | } 27 | @each $color, $value in $custom-colors { 28 | .tribar-#{$color} { 29 | @include tribar-variant($value); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/grid.pug: -------------------------------------------------------------------------------- 1 | mixin container(text, classes) 2 | div(class=classes)= text 3 | 4 | mixin column(text, classes) 5 | div(class=classes)= text 6 | 7 | mixin container_example() 8 | .row 9 | .col-sm-4.offset-sm-4 10 | .bg-faded.p-2.mb-3.text-center 540px 11 | .row 12 | .col-sm-6.offset-sm-3 13 | .bg-faded.p-2.mb-3.text-center 720px 14 | .row 15 | .col-sm-8.offset-sm-2 16 | .bg-faded.p-2.text-center 960px 17 | 18 | mixin container_size(text, size) 19 | +container(text, 'container-' + size) 20 | 21 | mixin container_sizes() 22 | each text, size in {'sm': 'Small', 'md': 'Medium', 'lg': 'Large'} 23 | +container_size(text, size) 24 | -------------------------------------------------------------------------------- /src/docs/pug/text/custom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('text', 'custom') 5 | 6 | block meta_description 7 | +example_meta_description('text', 'custom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('text') 11 | 12 | block example_description 13 | +example_description('text', 'custom') 14 | 15 | block example_result 16 | each text, variant in customColors 17 | if variant != 'white' 18 | +text_variant(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in customColors 24 | if variant != 'white' 25 | div(class='text-' + variant)= text 26 | -------------------------------------------------------------------------------- /src/docs/pug/border/custom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'custom') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'custom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'custom') 14 | 15 | block example_result 16 | each text, variant in customColors 17 | if variant != 'white' 18 | +border_variant(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in customColors 24 | if variant != 'white' 25 | div(class='border-' + variant) 26 | -------------------------------------------------------------------------------- /src/scss/_progress.scss: -------------------------------------------------------------------------------- 1 | // Vertical 2 | .progress-vertical { 3 | width: $progress-width; 4 | align-items: flex-end; 5 | 6 | .progress-bar { 7 | width: 100%; 8 | } 9 | } 10 | 11 | // Sizes 12 | @each $breakpoint in map-keys($grid-breakpoints) { 13 | @include media-breakpoint-up($breakpoint) { 14 | $infix: breakpoint-infix($breakpoint); 15 | 16 | @each $size, $progress in $progress-sizes { 17 | .progress#{$infix}-#{$size} { 18 | @include progress-size(map-get($progress, 'height'), map-get($progress, 'font-size')); 19 | 20 | &.progress-vertical { 21 | width: map-get($progress, 'width'); 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/docs/pug/button/block-responsive.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'block_responsive') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'block_responsive') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'block_responsive') 14 | 15 | block example_result 16 | button.btn.btn-secondary.btn-xl-block(type='button') Block 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 22 | button.btn.btn-secondary(type='button' class='btn-' + breakpoint + '-block') Button 23 | -------------------------------------------------------------------------------- /src/docs/pug/background/custom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'custom') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'custom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'custom') 14 | 15 | block example_result 16 | each text, variant in customColors 17 | if variant != 'white' 18 | +background_inverse(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in customColors 24 | if variant != 'white' 25 | div(class='bg-' + variant) 26 | -------------------------------------------------------------------------------- /src/docs/pug/breadcrumb/arrow.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('breadcrumb', 'arrow') 5 | 6 | block meta_description 7 | +example_meta_description('breadcrumb', 'arrow') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('breadcrumb') 11 | 12 | block example_description 13 | +example_description('breadcrumb', 'arrow') 14 | 15 | block example_result 16 | .row 17 | each arrow in ['rang', 'raquo', 'rarr', 'rsaquo'] 18 | .col-sm-6 19 | +breadcrumb_variant(arrow) 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | each arrow in ['rang', 'raquo', 'rarr', 'rsaquo'] 25 | ol.breadcrumb(class='breadcrumb-' + arrow) 26 | -------------------------------------------------------------------------------- /src/docs/pug/text/state.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('text', 'state') 5 | 6 | block meta_description 7 | +example_meta_description('text', 'state') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('text') 11 | 12 | block example_description 13 | +example_description('text', 'state') 14 | 15 | block example_result 16 | each text, variant in colors 17 | if variant != "black" && variant != "white" 18 | +text_state(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | if variant != "black" && variant != "white" 25 | div(class='text-state-' + variant)= text 26 | -------------------------------------------------------------------------------- /src/docs/pug/text/opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('text', 'opacity') 5 | 6 | block meta_description 7 | +example_meta_description('text', 'opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('text') 11 | 12 | block example_description 13 | +example_description('text', 'opacity') 14 | 15 | block example_body 16 | .card-body.bg-black.bg-striped 17 | each text, variant in colors 18 | +text_alpha(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='text-' + variant + '-' + i * 10)= text 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/button/3d.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', '3d') 5 | 6 | block meta_description 7 | +example_meta_description('button', '3d') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', '3d') 14 | 15 | block example_result 16 | each text, variant in colors 17 | if variant != "black" && variant != "white" 18 | +button_3d(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | if variant != "black" && variant != "white" 25 | button.btn(type='button' class='btn-3d-' + variant)= text 26 | -------------------------------------------------------------------------------- /src/docs/pug/border/opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'opacity') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped 17 | each text, variant in colors 18 | +border_alpha(text, variant + '-50') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='border-' + variant + '-' + i * 10) 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/background/state.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'state') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'state') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'state') 14 | 15 | block example_result 16 | each text, variant in colors 17 | if variant != 'black' && variant != 'white' 18 | +background_state(text, variant) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | if variant != 'black' && variant != 'white' 25 | div(class='bg-state-' + variant) 26 | -------------------------------------------------------------------------------- /src/docs/pug/badge/opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('badge', 'opacity') 5 | 6 | block meta_description 7 | +example_meta_description('badge', 'opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('badge') 11 | 12 | block example_description 13 | +example_description('badge', 'opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped 17 | each text, variant in colors 18 | +badge_variant(text, variant + '-50') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | .badge(class='badge-' + variant + '-' + i * 10)= text 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/scss/_font.scss: -------------------------------------------------------------------------------- 1 | // Font sizes 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | @include media-breakpoint-up($breakpoint) { 4 | $infix: breakpoint-infix($breakpoint); 5 | 6 | @each $size, $value in $font-sizes { 7 | .fs#{$infix}-#{$size} { font-size: $value !important; } 8 | } 9 | } 10 | } 11 | 12 | // Font weights - https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping 13 | @each $breakpoint in map-keys($grid-breakpoints) { 14 | @include media-breakpoint-up($breakpoint) { 15 | $infix: breakpoint-infix($breakpoint); 16 | 17 | @each $weight, $value in $font-weights { 18 | .fw#{$infix}-#{$weight} { font-weight: $value !important; } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/docs/pug/grid/column-5.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('grid', 'column_5') 5 | 6 | block meta_description 7 | +example_meta_description('grid', 'column_5') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('grid') 11 | 12 | block example_description 13 | +example_description('grid', 'column_5') 14 | 15 | block example_result 16 | .row-md-3.row-1 17 | - for(var i = 1; i <= 5; i++) 18 | .col-2-5 19 | .w-100.bg-secondary(style="height: 40px;") 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | .col-2-5 25 | each breakpoint in ['sm', 'md', 'lg', 'xl', 'xxl', '3xl', '4xl', '5xl', '6xl'] 26 | div(class='col-' + breakpoint + '-2-5') 27 | -------------------------------------------------------------------------------- /src/docs/pug/badge/custom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('badge', 'custom') 5 | 6 | block meta_description 7 | +example_meta_description('badge', 'custom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('badge') 11 | 12 | block example_description 13 | +example_description('badge', 'custom') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in customColors 18 | if variant != 'white' 19 | +badge_variant(text, variant) 20 | .card-body.bg-dark.bg-striped 21 | +badge_variant('White', 'white') 22 | 23 | block example_code 24 | :encode-pug 25 | | 26 | each text, variant in customColors 27 | .badge(class='badge-' + variant)= text 28 | -------------------------------------------------------------------------------- /src/docs/pug/border/responsive.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'responsive') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'responsive') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'responsive') 14 | 15 | block example_result 16 | .d-inline-block.border-sm.p-2 Border 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 22 | div(class='border-' + breakpoint) 23 | each position in ['top', 'right', 'bottom', 'left'] 24 | div(class='border-' + breakpoint + '-' + position) 25 | ="\n" 26 | -------------------------------------------------------------------------------- /src/docs/pug/background/cover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'cover') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'cover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'cover') 14 | p Add #[code.fs-2 .bg-cover] class to any element which uses #[strong background-image] property. 15 | 16 | block example_result 17 | .bg-cover.w-100(style="background-image: url(/" + pkg.name + "/assets/img/home.jpg);background-repeat: no-repeat;background-position: top left;height: 200px;") 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | .bg-cover 23 | -------------------------------------------------------------------------------- /src/docs/pug/button/opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'opacity') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped 17 | each text, variant in colors 18 | +button_variant(text, variant + '-50') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | button.btn(type='button' class='btn-' + variant + '-' + i * 10)= text 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/text/hover-opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('text', 'hover_opacity') 5 | 6 | block meta_description 7 | +example_meta_description('text', 'hover_opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('text') 11 | 12 | block example_description 13 | +example_description('text', 'hover_opacity') 14 | 15 | block example_body 16 | .card-body.bg-black.bg-striped 17 | each text, variant in colors 18 | +text_hover_alpha(text, variant, 50) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='text-hover-' + variant + '-' + i * 10)= text 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/background/opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'opacity') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped.text-white 17 | each text, variant in colors 18 | +background_variant(text, variant + '-50') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='bg-' + variant + '-' + i * 10) 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/button/state.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'state') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'state') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'state') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in colors 18 | if variant != 'black' && variant != 'white' 19 | +button_state(text, variant) 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | each text, variant in colors 25 | if variant != 'black' && variant != 'white' 26 | button.btn(type='button' class='btn-state-' + variant)= text 27 | -------------------------------------------------------------------------------- /src/docs/pug/border/hover-opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'hover_opacity') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'hover_opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'hover_opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped.text-white 17 | each text, variant in colors 18 | +border_hover_alpha(text, variant, 50) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='border-hover-' + variant + '-' + i * 10) 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/border/rounded-0.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'rounded_0') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'rounded_0') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'rounded_0') 14 | 15 | block example_result 16 | each text, position in {'top': 'Top', 'right': 'Right', 'bottom': 'Bottom', 'left': 'Left'} 17 | +border_radius(text, position, 0) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, position in {'top': 'Top', 'right': 'Right', 'bottom': 'Bottom', 'left': 'Left'} 23 | div(class='rounded-' + position + '-0') 24 | ="\n" 25 | -------------------------------------------------------------------------------- /src/docs/pug/button/custom.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'custom') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'custom') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'custom') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in customColors 18 | if variant != 'white' 19 | +button_variant(text, variant) 20 | .card-body.bg-dark.bg-striped 21 | +button_variant('White', 'white') 22 | 23 | block example_code 24 | :encode-pug 25 | | 26 | each text, variant in customColors 27 | button.btn(type='button' class='btn-' + variant)= text 28 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/button.pug: -------------------------------------------------------------------------------- 1 | mixin button(text, classes) 2 | button.btn.mr-1.mb-2(type='button' class=classes)!= text 3 | 4 | mixin button_variant(text, variant) 5 | +button(text, 'btn-'+variant) 6 | 7 | mixin button_outline(text, variant) 8 | +button(text, 'btn-outline-' + variant) 9 | 10 | mixin button_3d(text, variant) 11 | +button(text, 'btn-3d-' + variant) 12 | 13 | mixin button_state(text, variant) 14 | +button(text, 'btn-state-' + variant) 15 | 16 | mixin button_size(text, size) 17 | +button(text, ['btn-secondary', 'btn-' + size]) 18 | 19 | mixin button_active(text, variant) 20 | +button(text, ['btn-secondary', 'btn-active-' + variant, 'active']) 21 | 22 | mixin button_hover(text, variant) 23 | +button(text, ['btn-secondary', 'btn-hover-' + variant]) 24 | -------------------------------------------------------------------------------- /src/docs/pug/border/rounded-pill.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'rounded_pill') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'rounded_pill') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'rounded_pill') 14 | 15 | block example_result 16 | each text, position in {'top': 'Top', 'right': 'Right', 'bottom': 'Bottom', 'left': 'Left'} 17 | +border_radius(text, position, 'pill') 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, position in {'top': 'Top', 'right': 'Right', 'bottom': 'Bottom', 'left': 'Left'} 23 | div(class='rounded-' + position + '-pill') 24 | ="\n" 25 | -------------------------------------------------------------------------------- /src/docs/pug/background/contain.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'contain') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'contain') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'contain') 14 | p Just add #[code.fs-2 .bg-contain] class to any element which uses #[strong background-image] property. 15 | 16 | block example_result 17 | .row 18 | .col-10.col-sm-8.col-md-6 19 | .bg-contain.w-100(style="background-image: url(/" + pkg.name + "/assets/img/home.jpg);background-repeat: no-repeat;height: 100px;") 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | .bg-contain 25 | -------------------------------------------------------------------------------- /docs/assets/css/main.css: -------------------------------------------------------------------------------- 1 | a { 2 | outline: none !important; } 3 | 4 | pre, 5 | code { 6 | font-size: 100%; 7 | background: transparent !important; 8 | margin: 0 !important; 9 | padding: 0 !important; } 10 | 11 | #navbar-top { 12 | background-color: #f4f5f9; } 13 | 14 | .extension-image { 15 | margin-bottom: 1.25rem; } 16 | 17 | .extension-name { 18 | line-height: 1.3; } 19 | 20 | @media (max-width: 575.98px) { 21 | .example-card-img-responsive { 22 | width: 150px; 23 | height: 100px; } } 24 | 25 | .logo { 26 | padding-left: .6rem; 27 | padding-right: .6rem; } 28 | 29 | #sidebar-left .sidebar-nav .nav-item:first-child .nav-link { 30 | padding-top: 0; } 31 | 32 | @media (max-width: 991.98px) { 33 | .example-title, 34 | .component-title { 35 | line-height: 1.3; } } 36 | -------------------------------------------------------------------------------- /src/docs/pug/background/hover-opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'hover_opacity') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'hover_opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'hover_opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped.text-white 17 | each text, variant in colors 18 | +background_hover(text, variant + '-50', 'white') 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | each text, variant in colors 24 | - for(var i = 1; i <= 9; i++) 25 | div(class='bg-hover-' + variant + '-' + i * 10) 26 | = "\n" 27 | -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "../../node_modules/bootstrap/scss/functions"; 2 | @import "../../node_modules/bootstrap/scss/variables"; 3 | @import "../../node_modules/bootstrap/scss/mixins"; 4 | 5 | @import "functions"; 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "type"; 9 | @import "grid"; 10 | @import "form"; 11 | @import "button"; 12 | @import "collapse"; 13 | @import "dropdown"; 14 | @import "tribar"; 15 | @import "custom-form"; 16 | @import "nav"; 17 | @import "navbar"; 18 | @import "card"; 19 | @import "breadcrumb"; 20 | @import "pagination"; 21 | @import "badge"; 22 | @import "progress"; 23 | @import "list-group"; 24 | @import "sidebar"; 25 | @import "background"; 26 | @import "border"; 27 | @import "flex"; 28 | @import "font"; 29 | @import "position"; 30 | @import "sizing"; 31 | @import "text"; 32 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/disable-caret.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'disable_caret') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'disable_caret') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'disable_caret') 14 | 15 | block example_result 16 | .btn-group.dropdown 17 | button.btn.btn-secondary.dropdown-toggle.disable-caret(type="button" data-toggle="dropdown") Dropdown 18 | +dropdown_menu() 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | .btn-group.dropdown 24 | button.btn.btn-secondary.dropdown-toggle.disable-caret(type="button" data-toggle="dropdown") Dropdown 25 | .dropdown-menu 26 | -------------------------------------------------------------------------------- /src/docs/pug/border/hover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'hover') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'hover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'hover') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in colors 18 | if variant != 'light' && variant != 'white' 19 | +border_hover(text, variant) 20 | .card-body.bg-secondary.bg-striped.text-white 21 | +border_hover_inverse('Light', 'light') 22 | +border_hover_inverse('White', 'white') 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | each text, variant in colors 28 | div(class='border-hover-' + variant) 29 | -------------------------------------------------------------------------------- /src/docs/pug/type/heading-responsive.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('type', 'heading_responsive') 5 | 6 | block meta_description 7 | +example_meta_description('type', 'heading_responsive') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('type') 11 | 12 | block example_description 13 | +example_description('type', 'heading_responsive') 14 | 15 | block example_result 16 | h1.h5.h4-sm.h3-md.h2-lg.h1-xl.mb-0 Responsive title 17 | 18 | block example_code 19 | :encode-pug 20 | | 21 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 22 | - for(var size = 1; size <= 6; size++) 23 | div(class='h' + size + '-' + breakpoint) 24 | ="\n" 25 | - for(var size = 1; size <= 4; size++) 26 | div(class='display-' + breakpoint + '-' + size) 27 | ="\n" 28 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/tribar.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'tribar') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'tribar') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'tribar') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 17 | .container-fluid.navbar-container 18 | button.navbar-toggler.mr-3(type="button") 19 | ="\n " 20 | span.tribar.navbar-toggler-tribar 21 | = "\n\t" 22 | a.navbar-brand.mr-auto(href="#") Brand 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | button.navbar-toggler(type="button") 28 | ="\n " 29 | span.tribar.navbar-toggler-tribar 30 | -------------------------------------------------------------------------------- /src/scss/_badge.scss: -------------------------------------------------------------------------------- 1 | // Custom 2 | @each $color, $value in $custom-colors { 3 | .badge-#{$color} { 4 | @include badge-variant($value); 5 | @if $color == 'orange' { 6 | color: $white; 7 | } 8 | } 9 | } 10 | 11 | // Opacity 12 | @if $enable-opacity { 13 | @for $alpha from 1 through 9 { 14 | @each $color, $value in $theme-colors { 15 | .badge-#{$color}-#{($alpha * 10)} { 16 | @include badge-variant(rgba($value, ($alpha * .1))); 17 | @if $color == 'warning' { 18 | color: $white; 19 | } 20 | } 21 | } 22 | @each $color, $value in $custom-colors { 23 | .badge-#{$color}-#{($alpha * 10)} { 24 | @include badge-variant(rgba($value, ($alpha * .1))); 25 | @if $color == 'orange' { 26 | color: $white; 27 | } 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/docs/pug/nav/tabs-left.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'tabs_left') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'tabs_left') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'tabs_left') 14 | 15 | block example_result 16 | .row 17 | .col-md-4 18 | +nav(['nav-tabs', 'nav-tabs-left']) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | ul.nav.nav-tabs.nav-tabs-left 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive tabs left 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | ul.nav.nav-tabs(class='nav-tabs-' + breakpoint + '-left') 33 | -------------------------------------------------------------------------------- /src/docs/pug/nav/tabs-right.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'tabs_right') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'tabs_right') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'tabs_right') 14 | 15 | block example_result 16 | .row 17 | .col-md-4 18 | +nav(['nav-tabs', 'nav-tabs-right']) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | ul.nav.nav-tabs.nav-tabs-right 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive tabs right 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | ul.nav.nav-tabs(class='nav-tabs-' + breakpoint + '-right') 33 | -------------------------------------------------------------------------------- /src/docs/pug/form/input-dark.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'input_dark') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'input_dark') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'input_dark') 14 | 15 | block example_result 16 | .form-group 17 | +input_variant('Dark', 'dark') 18 | .form-group 19 | +input_state('Valid', 'dark', 'valid') 20 | +input_state('Invalid', 'dark', 'invalid') 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | input.form-control.input-dark(type='text', placeholder='Dark') 26 | input.form-control.input-dark.is-valid(type='text', placeholder='Valid') 27 | input.form-control.input-dark.is-invalid(type='text', placeholder='Invalid') 28 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/nav-align-left.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'nav_align_left') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'nav_align_left') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'nav_align_left') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.mb-3.px-0 17 | .collapse.navbar-collapse 18 | ul.navbar-nav.navbar-nav-left 19 | - for(var i = 1; i <= 3; i++) 20 | li.nav-item: a.nav-link(href='#')= 'Nav item ' + i 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | nav.navbar.navbar-expand-sm.navbar-dark.bg-dark.px-0 26 | .collapse.navbar-collapse 27 | ul.navbar-nav.navbar-nav-left 28 | -------------------------------------------------------------------------------- /src/scss/light/main.scss: -------------------------------------------------------------------------------- 1 | @import "../../../node_modules/bootstrap/scss/functions"; 2 | @import "../../../node_modules/bootstrap/scss/variables"; 3 | @import "../../../node_modules/bootstrap/scss/mixins"; 4 | 5 | @import "../functions"; 6 | @import "../variables"; 7 | @import "../mixins"; 8 | @import "variables"; 9 | @import "../type"; 10 | @import "../grid"; 11 | @import "../form"; 12 | @import "../button"; 13 | @import "../collapse"; 14 | @import "../dropdown"; 15 | @import "../tribar"; 16 | @import "../nav"; 17 | @import "../navbar"; 18 | @import "../card"; 19 | @import "../breadcrumb"; 20 | @import "../badge"; 21 | @import "../progress"; 22 | @import "../list-group"; 23 | @import "../sidebar"; 24 | @import "../background"; 25 | @import "../border"; 26 | @import "../flex"; 27 | @import "../font"; 28 | @import "../position"; 29 | @import "../sizing"; 30 | @import "../text"; 31 | -------------------------------------------------------------------------------- /src/docs/pug/border/style.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'style') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'style') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'style') 14 | 15 | block example_result 16 | each text, style in {'dashed': 'Dashed', 'dotted': 'Dotted', 'double': 'Double', 'solid': 'Solid'} 17 | +border_style(text, style) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, style in {'dashed': 'Dashed', 'dotted': 'Dotted', 'double': 'Double', 'solid': 'Solid'} 23 | div(class='border-' + style) 24 | each position in ['top', 'right', 'bottom', 'left'] 25 | div(class='border-' + position + '-' + style) 26 | ="\n" 27 | -------------------------------------------------------------------------------- /src/docs/pug/example.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block main 4 | #description 5 | block example_title 6 | block example_description 7 | #example.card.mb-3 8 | block example_header 9 | .card-header 10 | ul.nav.nav-tabs.card-header-tabs 11 | li.nav-item 12 | a.nav-link.active(href="#") Example 13 | block example_body 14 | .card-body 15 | block example_result 16 | block example_footer 17 | .card-footer 18 | pre.pre-scrollable 19 | code.language-markup 20 | block example_code 21 | .clearfix 22 | block example_after 23 | 24 | block sidebar_right 25 | ul.sidebar-nav.nav-tree.nav-tabs.nav-tabs-material.nav-tabs-right.nav-y-2.fs-2 26 | li.nav-item 27 | a.nav-link(href="#description") Description 28 | li.nav-item 29 | a.nav-link(href="#example") Example 30 | -------------------------------------------------------------------------------- /src/docs/pug/progress/vertical.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('progress', 'vertical') 5 | 6 | block meta_description 7 | +example_meta_description('progress', 'vertical') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('progress') 11 | 12 | block example_description 13 | +example_description('progress', 'vertical') 14 | 15 | block example_result 16 | .d-flex 17 | - for(var size = 1; size <= 4; size++) 18 | .progress.progress-vertical.mr-gutter(style={ height: '300px' }) 19 | .progress-bar(style={ height: (size * 25) + '%' }) 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | .d-flex 25 | - for(var size = 1; size <= 4; size++) 26 | .progress.progress-vertical.mr-gutter(style={ height: '300px' }) 27 | .progress-bar(style={ height: (size * 25) + '%' }) 28 | -------------------------------------------------------------------------------- /src/docs/pug/tribar/color.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('tribar', 'color') 5 | 6 | block meta_description 7 | +example_meta_description('tribar', 'color') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('tribar') 11 | 12 | block example_description 13 | +example_description('tribar', 'color') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in colors 18 | if variant != 'light' && variant != 'white' 19 | .d-inline-block.mr-1.mb-2 20 | .tribar(class='tribar-' + variant) 21 | .card-body.bg-dark.bg-striped 22 | .d-inline-block.mr-1 23 | .tribar.tribar-light 24 | .d-inline-block 25 | .tribar.tribar-white 26 | 27 | block example_code 28 | :encode-pug 29 | | 30 | each text, variant in colors 31 | .tribar(class='tribar-' + variant) 32 | -------------------------------------------------------------------------------- /src/docs/scss/_reboot.scss: -------------------------------------------------------------------------------- 1 | a { 2 | outline: none !important; 3 | } 4 | 5 | pre, 6 | code { 7 | font-size: 100%; 8 | background: transparent !important; 9 | margin: 0 !important; 10 | padding: 0 !important; 11 | } 12 | 13 | #navbar-top { 14 | background-color: #f4f5f9; 15 | } 16 | 17 | .extension-image { 18 | margin-bottom: $card-spacer-x; 19 | } 20 | 21 | .extension-name { 22 | line-height: 1.3; 23 | } 24 | 25 | .example-card-img-responsive { 26 | @include media-breakpoint-down(xs) { 27 | width: 150px; 28 | height: 100px; 29 | } 30 | } 31 | 32 | .logo { 33 | padding-left: .6rem; 34 | padding-right: .6rem; 35 | } 36 | 37 | #sidebar-left .sidebar-nav .nav-item:first-child .nav-link { 38 | padding-top: 0; 39 | } 40 | 41 | .example-title, 42 | .component-title { 43 | @include media-breakpoint-down(md) { 44 | line-height: 1.3; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/docs/pug/button/outline.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'outline') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'outline') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'outline') 14 | 15 | block example_body 16 | .card-body 17 | +button_outline('Link', 'link') 18 | each text, variant in customColors 19 | if variant != 'white' 20 | +button_outline(text, variant) 21 | .card-body.bg-dark.bg-striped 22 | +button_outline('White', 'white') 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | button.btn.btn-outline-link(type='button') Link 28 | each text, variant in customColors 29 | button.btn(type='button' class='btn-outline-' + variant)= text 30 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/expand-xs.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'expand_xs') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'expand_xs') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'expand_xs') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 17 | .container-fluid.navbar-container 18 | = "\n\t" 19 | a.navbar-brand(href="#") Brand 20 | .collapse.navbar-collapse 21 | ul.navbar-nav(class=classes) 22 | - for(var i = 1; i <= 3; i++) 23 | li.nav-item: a.nav-link(href='#' class=i==3 ? ["d-none", "d-sm-block"] : "")= 'Nav item ' + i 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | nav.navbar.navbar-expand-xs 29 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/nav-align-right.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'nav_align_right') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'nav_align_right') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'nav_align_right') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.mb-3.px-0 17 | .collapse.navbar-collapse 18 | ul.navbar-nav.navbar-nav-right.ml-auto 19 | - for(var i = 1; i <= 3; i++) 20 | li.nav-item: a.nav-link(href='#')= 'Nav item ' + i 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | nav.navbar.navbar-expand-sm.navbar-dark.bg-dark.px-0 26 | .collapse.navbar-collapse 27 | ul.navbar-nav.navbar-nav-right.ml-auto 28 | -------------------------------------------------------------------------------- /src/docs/pug/form/input-color.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'input_color') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'input_color') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'input_color') 14 | 15 | block example_result 16 | .row 17 | each text, variant in colors 18 | if variant != 'dark' && variant != 'light' && variant != 'white' 19 | .col-12.col-sm-6.col-md-3 20 | .form-group 21 | +input_dark(text, variant) 22 | 23 | block example_code 24 | :encode-pug 25 | | 26 | each text, variant in colors 27 | if variant != 'dark' && variant != 'light' && variant != 'white' 28 | input.form-control.input-dark(type='text', placeholder=text class="input-" + variant) 29 | -------------------------------------------------------------------------------- /src/docs/pug/form/switch-reverse.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'switch_reverse') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'switch_reverse') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'switch_reverse') 14 | 15 | block example_result 16 | .custom-control.custom-switch.custom-switch-reverse 17 | input.custom-control-input(type="checkbox" id="customSwitch1") 18 | label.custom-control-label(for="customSwitch1") Toggle this switch element 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | .custom-control.custom-switch.custom-switch-reverse 24 | input.custom-control-input(type="checkbox" id="customSwitch1") 25 | label.custom-control-label(for="customSwitch1") Toggle this switch element 26 | -------------------------------------------------------------------------------- /src/scss/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // Sizes 2 | @mixin list-group-item-size($padding-y, $padding-x, $font-size) { 3 | font-size: $font-size; 4 | padding: $padding-y $padding-x; 5 | } 6 | 7 | @mixin list-group-size($padding-y, $padding-x, $font-size) { 8 | .list-group-item { 9 | @include list-group-item-size($padding-y, $padding-x, $font-size); 10 | } 11 | } 12 | 13 | @mixin list-group-item-size-y($padding-y) { 14 | padding-top: $padding-y; 15 | padding-bottom: $padding-y; 16 | } 17 | 18 | @mixin list-group-size-y($padding-y) { 19 | .list-group-item { 20 | @include list-group-item-size-y($padding-y); 21 | } 22 | } 23 | 24 | @mixin list-group-item-size-x($padding-x) { 25 | padding-left: $padding-x; 26 | padding-right: $padding-x; 27 | } 28 | 29 | @mixin list-group-size-x($padding-x) { 30 | .list-group-item { 31 | @include list-group-item-size-x($padding-x); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/docs/pug/background/hover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('background', 'hover') 5 | 6 | block meta_description 7 | +example_meta_description('background', 'hover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('background') 11 | 12 | block example_description 13 | +example_description('background', 'hover') 14 | 15 | block example_body 16 | .card-body 17 | each text, variant in colors 18 | if variant != 'light' && variant != 'white' 19 | +background_hover(text, variant, 'white') 20 | .card-body.bg-dark.bg-striped.text-white 21 | .d-inline-block 22 | +background_hover('Light', 'light', 'dark') 23 | .d-inline-block 24 | +background_hover('White', 'white', 'dark') 25 | 26 | block example_code 27 | :encode-pug 28 | | 29 | each text, variant in colors 30 | div(class='bg-hover-' + variant) 31 | -------------------------------------------------------------------------------- /src/docs/pug/form/input-material.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'input_material') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'input_material') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'input_material') 14 | 15 | block example_result 16 | .form-group 17 | +input_variant('Material', 'material') 18 | .form-group 19 | +input_state('Valid', 'material', 'valid') 20 | +input_state('Invalid', 'material', 'invalid') 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | input.form-control.input-material(type='text', placeholder='Material') 26 | input.form-control.input-material.is-valid(type='text', placeholder='Valid') 27 | input.form-control.input-material.is-invalid(type='text', placeholder='Invalid') 28 | -------------------------------------------------------------------------------- /src/docs/pug/button/active.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'active') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'active') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'active') 14 | 15 | block example_result 16 | .btn-group 17 | button.btn.btn-secondary.btn-active-primary.active(type='button') Active 18 | button.btn.btn-secondary(type='button') Secondary 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | .btn-group 24 | button.btn.btn-secondary.btn-active-primary.active(type='button') Active 25 | button.btn.btn-secondary(type='button') Secondary 26 | ="\n\n" 27 | | 28 | each text, variant in colors 29 | button.btn.btn-secondary.active(type='button' class='btn-active-' + variant)= text 30 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/scrollable-menu.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'scrollable_menu') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'scrollable_menu') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'scrollable_menu') 14 | 15 | block example_result 16 | .btn-group.dropdown 17 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown") Dropdown 18 | .dropdown-menu.dropdown-menu-scrollable 19 | - for(var i = 1; i <= 20; i++) 20 | = "\n\t" 21 | a.dropdown-item(href='#')= 'Menu item ' + i 22 | 23 | block example_code 24 | :encode-pug 25 | | 26 | .btn-group.dropdown 27 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown") Dropdown 28 | .dropdown-menu.dropdown-menu-scrollable 29 | -------------------------------------------------------------------------------- /src/docs/pug/form/input-opacity.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'input_opacity') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'input_opacity') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'input_opacity') 14 | 15 | block example_body 16 | .card-body.bg-dark.bg-striped 17 | .row 18 | each text, variant in colors 19 | if variant != 'light' 20 | .col-12.col-sm-6.col-md-3 21 | .form-group 22 | +input_dark(text, variant + '-50') 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | each text, variant in colors 28 | if variant != 'light' 29 | - for(var i = 1; i <= 9; i++) 30 | input.form-control.input-dark(type='text', placeholder=text class="input-" + variant + '-' + i * 10) 31 | = "\n" 32 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +navbar_size(size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | nav.navbar(class='navbar-' + size) 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive navbar sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 5; size++) 33 | nav.navbar(class='navbar-' + breakpoint + '-' + size) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/font/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('font', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('font', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('font') 11 | 12 | block example_description 13 | +example_description('font', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 12; size++) 17 | +font_size('Font size ' + size, size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 12; size++) 23 | p(class='fs-' + size)= 'Font size ' + size 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive font sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 12; size++) 33 | p(class='fs-' + breakpoint + '-' + size) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/progress/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('progress', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('progress', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('progress') 11 | 12 | block example_description 13 | +example_description('progress', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +progress_variant(size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | .progress(class='progress-' + size) 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive progress sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 5; size++) 33 | .progress(class='progress-' + breakpoint + '-' + size) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/pagination/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('pagination', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('pagination', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('pagination') 11 | 12 | block example_description 13 | +example_description('pagination', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +pagination_size(size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | ol.pagination(class='pagination-' + size) 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive pagination sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 5; size++) 33 | ol.pagination(class='pagination-' + breakpoint + '-' + size) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/breadcrumb/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('breadcrumb', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('breadcrumb', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('breadcrumb') 11 | 12 | block example_description 13 | +example_description('breadcrumb', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +breadcrumb_variant(size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | ol.breadcrumb(class='breadcrumb-' + size) 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive breadcrumb sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 5; size++) 33 | ol.breadcrumb(class='breadcrumb-' + breakpoint + '-' + size) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/grid/wide-container-responsive.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('grid', 'wide_container_responsive') 5 | 6 | block meta_description 7 | +example_meta_description('grid', 'wide_container_responsive') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('grid') 11 | 12 | block example_description 13 | +example_description('grid', 'wide_container_responsive') 14 | 15 | block example_body 16 | table.table.table-bordered.table-striped.card-table.mb-0 17 | thead 18 | tr 19 | th Class 20 | th Size 21 | th Device width 22 | tbody 23 | each container in [{'size': 'xxl', 'width': '1570px', 'breakpoint': '≥1600px'}] 24 | tr 25 | td #[code.fs-2= '.container-' + container.size] 26 | td= container.width 27 | td= container.breakpoint 28 | 29 | 30 | block example_code 31 | :encode-pug 32 | | 33 | each breakpoint in ['xxl'] 34 | div(class='container-' + breakpoint) 35 | -------------------------------------------------------------------------------- /src/docs/pug/breadcrumb/color.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('breadcrumb', 'color') 5 | 6 | block meta_description 7 | +example_meta_description('breadcrumb', 'color') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('breadcrumb') 11 | 12 | block example_description 13 | +example_description('breadcrumb', 'color') 14 | 15 | block example_result 16 | +breadcrumb(["breadcrumb-dark", "bg-primary"]) 17 | +breadcrumb(["breadcrumb-light", "bg-light"]) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | ol.breadcrumb.breadcrumb-dark.bg-primary 23 | li.breadcrumb-item: a.breadcrumb-link(href='#') Home 24 | li.breadcrumb-item: a.breadcrumb-link(href='#') Category 25 | li.breadcrumb-item.active Article 26 | = "\n" 27 | ol.breadcrumb.breadcrumb-light.bg-light 28 | li.breadcrumb-item: a.breadcrumb-link(href='#') Home 29 | li.breadcrumb-item: a.breadcrumb-link(href='#') Category 30 | li.breadcrumb-item.active Article 31 | -------------------------------------------------------------------------------- /src/docs/pug/button/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('button', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('button', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('button') 11 | 12 | block example_description 13 | +example_description('button', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +button_size('Button', size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | button.btn.btn-secondary(type='button' class='btn-' + size) Button 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive button sizes 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | - for(var size = 1; size <= 5; size++) 33 | button.btn.btn-secondary(type='button' class='btn-' + breakpoint + '-' + size) Button 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/nav/tabs-material.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'tabs_material') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'tabs_material') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'tabs_material') 14 | 15 | block example_result 16 | +nav(['nav-tabs', 'nav-tabs-material', 'mb-5']) 17 | .row 18 | .col-md-4 19 | +nav(['nav-tabs', 'nav-tabs-left', 'nav-tabs-material', 'mb-5']) 20 | .col-md-4 21 | .col-md-4 22 | +nav(['nav-tabs', 'nav-tabs-right', 'nav-tabs-material', 'justify-content-end', 'mb-5']) 23 | +nav(['nav-tabs', 'nav-tabs-bottom', 'nav-tabs-material']) 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | ul.nav.nav-tabs.nav-tabs-material 29 | ul.nav.nav-tabs.nav-tabs-left.nav-tabs-material 30 | ul.nav.nav-tabs.nav-tabs-right.nav-tabs-material 31 | ul.nav.nav-tabs.nav-tabs-bottom.nav-tabs-material 32 | -------------------------------------------------------------------------------- /src/docs/pug/form/input-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('form', 'input_size') 5 | 6 | block meta_description 7 | +example_meta_description('form', 'input_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('form') 11 | 12 | block example_description 13 | +example_description('form', 'input_size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | .mb-3 18 | +input_variant(size, size) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | - for(var size = 1; size <= 5; size++) 24 | input.form-control(type='text', placeholder=size class='input-' + size) 25 | 26 | block responsive_description 27 | h2.h3.fw-400 Responsive input sizes 28 | 29 | block responsive_code 30 | :encode-pug 31 | | 32 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 33 | - for(var size = 1; size <= 5; size++) 34 | input.form-control(type='text', placeholder=size class='input-' + breakpoint + '-' + size) 35 | ="\n" 36 | -------------------------------------------------------------------------------- /src/docs/pug/grid/row-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('grid', 'row_size') 5 | 6 | block meta_description 7 | +example_meta_description('grid', 'row_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('grid') 11 | 12 | block example_description 13 | +example_description('grid', 'row_size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | .mb-3(class="row-" + size) 18 | - for(var i = 1; i <= 4; i++) 19 | .col-3 20 | .w-100.bg-secondary(style="height: 40px;") 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | - for(var size = 1; size <= 5; size++) 26 | div(class="row-" + size) 27 | 28 | block responsive_description 29 | h2.h3.fw-400 Responsive row sizes 30 | 31 | block responsive_code 32 | :encode-pug 33 | | 34 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 35 | - for(var size = 1; size <= 5; size++) 36 | div(class="row-" + breakpoint + '-' + size) 37 | ="\n" 38 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/menu-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'menu_size') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'menu_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'menu_size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | .d-block.d-sm-inline-block.mb-2.mr-sm-1.mr-lg-0 18 | +dropdown_size(size) 19 | 20 | block example_code 21 | :encode-pug 22 | | 23 | - for(var size = 1; size <= 5; size++) 24 | .dropdown-menu(class='dropdown-menu-' + size) 25 | 26 | block responsive_description 27 | h2.h3.fw-400 Responsive dropdown menu sizes 28 | 29 | block responsive_code 30 | :encode-pug 31 | | 32 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 33 | - for(var size = 1; size <= 5; size++) 34 | .dropdown-menu(class='dropdown-menu-' + breakpoint + '-' + size) 35 | ="\n" 36 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/arrow.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'arrow') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'arrow') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'arrow') 14 | p Now you can add #[strong arrows] for all directions of the menu using a special class #[code.fs-2 .dropdown-arrow]. 15 | 16 | block example_result 17 | .row-1.row-sm-3 18 | .col-sm-3.col-auto 19 | +dropdown_arrow('Right', 'dropright') 20 | .col-sm-6.col-auto.text-center 21 | +dropdown_arrow('Down', 'dropdown') 22 | +dropdown_arrow('Up', 'dropup') 23 | .col-sm-3.col-auto 24 | .float-right 25 | +dropdown_arrow('Left', 'dropleft') 26 | 27 | block example_code 28 | :encode-pug 29 | | 30 | .btn-group.dropdown 31 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown") Dropdown 32 | .dropdown-menu 33 | .dropdown-arrow 34 | -------------------------------------------------------------------------------- /src/docs/pug/list-group/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('list-group', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('list-group', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('list-group') 11 | 12 | block example_description 13 | +example_description('list-group', 'size') 14 | 15 | block example_result 16 | .row 17 | - for(var size = 1; size <= 5; size++) 18 | .mb-gutter.col-12(class='col-md-' + (size <= 3 ? 4 : 6)) 19 | +list_group_variant(size) 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | - for(var size = 1; size <= 5; size++) 25 | .list-group(class='list-group-' + size) 26 | 27 | block responsive_description 28 | h2.h3.fw-400 Responsive list group sizes 29 | 30 | block responsive_code 31 | :encode-pug 32 | | 33 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 34 | - for(var size = 1; size <= 5; size++) 35 | .list-group(class='list-group-' + breakpoint + '-' + size) 36 | ="\n" 37 | -------------------------------------------------------------------------------- /src/docs/pug/list-group/horizontal-flush.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('list-group', 'horizontal_flush') 5 | 6 | block meta_description 7 | +example_meta_description('list-group', 'horizontal_flush') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('list-group') 11 | 12 | block example_description 13 | +example_description('list-group', 'horizontal_flush') 14 | 15 | block example_result 16 | .d-none.d-lg-block 17 | +list_group(['list-group-horizontal', 'list-group-horizontal-flush', 'text-center']) 18 | .d-none.d-sm-block.d-lg-none 19 | .list-group.list-group-horizontal.list-group-horizontal-flush.text-center 20 | - for(var i = 1; i <= 3; i++) 21 | +list_group_item('List item ' + i) 22 | .d-block.d-sm-none 23 | .list-group.list-group-horizontal.list-group-horizontal-flush.text-center 24 | - for(var i = 1; i <= 2; i++) 25 | +list_group_item('List item ' + i) 26 | 27 | block example_code 28 | :encode-pug 29 | | 30 | .list-group.list-group-horizontal.list-group-horizontal-flush 31 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release Drafter 2 | 3 | on: 4 | push: 5 | # branches to consider in the event; optional, defaults to all 6 | branches: 7 | - master 8 | # pull_request event is required only for autolabeler 9 | pull_request: 10 | # Only following types are handled by the action, but one can default to all as well 11 | types: [opened, reopened, synchronize] 12 | 13 | jobs: 14 | update_release_draft: 15 | runs-on: ubuntu-latest 16 | steps: 17 | # (Optional) GitHub Enterprise requires GHE_HOST variable set 18 | #- name: Set GHE_HOST 19 | # run: | 20 | # echo "GHE_HOST=${GITHUB_SERVER_URL##https:\/\/}" >> $GITHUB_ENV 21 | 22 | # Drafts your next Release notes as Pull Requests are merged into "master" 23 | - uses: release-drafter/release-drafter@v5 24 | # (Optional) specify config name to use, relative to .github/. Default: release-drafter.yml 25 | # with: 26 | # config-name: my-config.yml 27 | # disable-autolabeler: true 28 | env: 29 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | -------------------------------------------------------------------------------- /src/docs/pug/card/body-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'body_size') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'body_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'body_size') 14 | 15 | block example_result 16 | .row 17 | - for(var i = 1; i <= 5; i++) 18 | .col-12.col-md-6 19 | .card.mb-gutter 20 | .card-body(class="card-body-" + i) 21 | h4.card-title Example title 22 | p.card-text Example text 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | - for(var i = 1; i <= 5; i++) 28 | .card-body(class="card-body-" + i) 29 | 30 | block responsive_description 31 | h2.h3.fw-400 Responsive card body sizes 32 | 33 | block responsive_code 34 | :encode-pug 35 | | 36 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 37 | - for(var size = 1; size <= 5; size++) 38 | .card-body(class="card-body-" + breakpoint + '-' + size) 39 | ="\n" 40 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/scroller.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'scroller') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'scroller') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'scroller') 14 | .alert.alert-primary(role="alert") Works only on touch devices like #[b tablet] and #[b phone]. 15 | 16 | block example_result 17 | .navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 18 | .container-fluid.navbar-container 19 | .navbar-scroller 20 | ul.navbar-nav.navbar-scroller-nav 21 | - for(var i = 1; i <= 12; i++) 22 | li.nav-item: a.nav-link(href='#')= 'Nav item ' + i 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | .navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 28 | .container-fluid.navbar-container 29 | .navbar-scroller 30 | ul.navbar-nav.navbar-scroller-nav 31 | - for(var i = 1; i <= 12; i++) 32 | li.nav-item: a.nav-link(href='#')= 'Nav item ' + i 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-2021 Alexander Tarkhov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/docs/pug/example-responsive.pug: -------------------------------------------------------------------------------- 1 | extends layout.pug 2 | 3 | block main 4 | #description 5 | block example_title 6 | block example_description 7 | #example.card.mb-3 8 | block example_header 9 | block example_body 10 | .card-body 11 | block example_result 12 | block example_footer 13 | .card-footer 14 | pre.pre-scrollable 15 | code.language-markup 16 | block example_code 17 | .clearfix 18 | 19 | #responsive.pt-3 20 | #responsive-description 21 | block responsive_title 22 | block responsive_description 23 | #responsive-example 24 | block responsive_example 25 | .card.card-body.bg-light.mb-3 26 | pre.pre-scrollable 27 | code.language-markup 28 | block responsive_code 29 | .clearfix 30 | 31 | block sidebar_right 32 | ul.sidebar-nav.nav-tree.nav-tabs.nav-tabs-material.nav-tabs-right.nav-y-2.fs-2 33 | li.nav-item 34 | a.nav-link(href="#description") Description 35 | li.nav-item 36 | a.nav-link(href="#example") Example 37 | li.nav-item 38 | a.nav-link(href="#responsive") Responsive 39 | -------------------------------------------------------------------------------- /src/docs/pug/card/footer-pills.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'footer_pills') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'footer_pills') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'footer_pills') 14 | 15 | block example_result 16 | .card 17 | .card-body 18 | h4.card-title Footer pills 19 | p.card-text Example text 20 | .card-footer 21 | ul.nav.nav-pills.card-footer-pills 22 | li.nav-item: a.nav-link.active(href="#") Active 23 | li.nav-item: a.nav-link(href="#") Link 24 | li.nav-item: a.nav-link.disabled(href="#") Disabled 25 | 26 | block example_code 27 | :encode-pug 28 | | 29 | .card 30 | .card-body 31 | h4.card-title Footer pills 32 | p.card-text Example text 33 | .card-footer 34 | ul.nav.nav-pills.card-footer-pills 35 | li.nav-item: a.nav-link.active(href="#") Active 36 | li.nav-item: a.nav-link(href="#") Link 37 | li.nav-item: a.nav-link.disabled(href="#") Disabled 38 | -------------------------------------------------------------------------------- /src/docs/pug/card/table.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'table') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'table') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'table') 14 | 15 | block example_body 16 | .table-responsive 17 | table.table.table-bordered.card-table.mb-0 18 | thead 19 | tr 20 | - for(var i = 1; i <= 3; i++) 21 | th= 'Head ' + i 22 | tbody 23 | - for(var r = 1; r <= 4; r++) 24 | tr 25 | - for(var i = 1; i <= 3; i++) 26 | td= 'Column ' + i 27 | 28 | block example_code 29 | :encode-pug 30 | | 31 | .card 32 | .table-responsive 33 | table.table.table-bordered.card-table.mb-0 34 | thead 35 | tr 36 | - for(var i = 1; i <= 3; i++) 37 | th= 'Head ' + i 38 | tbody 39 | - for(var r = 1; r <= 4; r++) 40 | tr 41 | - for(var i = 1; i <= 3; i++) 42 | td= 'Column ' + i 43 | -------------------------------------------------------------------------------- /src/scss/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | // Active 2 | @mixin button-active-variant($background, $border, $color: color-yiq($background)) { 3 | &:not(:disabled):not(.disabled).active, 4 | .show > &.dropdown-toggle { 5 | color: $color; 6 | background-color: $background; 7 | @if $enable-gradients { 8 | background-image: none; 9 | } 10 | border-color: $border; 11 | } 12 | } 13 | 14 | // Hover 15 | @mixin button-hover-variant($background, $border, $color: color-yiq($background)) { 16 | &:hover { 17 | color: $color; 18 | @include gradient-bg($background); 19 | border-color: $border; 20 | } 21 | } 22 | 23 | // 3D 24 | @mixin button-3d-variant($background, $border) { 25 | border-bottom-width: 4px; 26 | @include button-variant($background, darken($border, 10%)); 27 | } 28 | 29 | // Circle size 30 | @mixin button-circle-size($font-size) { 31 | width: ($font-size * 2.5); 32 | height: ($font-size * 2.5); 33 | } 34 | 35 | // State 36 | @mixin button-state-variant($background, $border: $btn-state-border-color) { 37 | @include button-variant(color-level($background, $btn-state-bg-level), $border); 38 | color: color-level($background, $btn-state-color-level); 39 | } 40 | -------------------------------------------------------------------------------- /src/docs/pug/card/footer-tabs.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'footer_tabs') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'footer_tabs') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'footer_tabs') 14 | 15 | block example_result 16 | .card 17 | .card-body 18 | h4.card-title Footer tabs 19 | p.card-text Example text 20 | .card-footer 21 | ul.nav.nav-tabs.nav-tabs-bottom.card-footer-tabs 22 | li.nav-item: a.nav-link.active(href="#") Active 23 | li.nav-item: a.nav-link(href="#") Link 24 | li.nav-item: a.nav-link.disabled(href="#") Disabled 25 | 26 | block example_code 27 | :encode-pug 28 | | 29 | .card 30 | .card-body 31 | h4.card-title Footer tabs 32 | p.card-text Example text 33 | .card-footer 34 | ul.nav.nav-tabs.nav-tabs-bottom.card-footer-tabs 35 | li.nav-item: a.nav-link.active(href="#") Active 36 | li.nav-item: a.nav-link(href="#") Link 37 | li.nav-item: a.nav-link.disabled(href="#") Disabled 38 | -------------------------------------------------------------------------------- /src/js/dropdown-hover.js: -------------------------------------------------------------------------------- 1 | if (!('ontouchstart' in document.documentElement)) { 2 | (function ($) { 3 | var DATA_KEY = 'bs.dropdown-hover'; 4 | var EVENT_KEY = '.' + DATA_KEY; 5 | var DATA_API_KEY = '.data-api'; 6 | 7 | var Event = { 8 | MOUSEENTER_DATA_API : 'mouseenter' + EVENT_KEY + DATA_API_KEY, 9 | MOUSELEAVE_DATA_API : 'mouseleave' + EVENT_KEY + DATA_API_KEY 10 | }; 11 | 12 | var ClassName = { 13 | SHOW : 'show' 14 | }; 15 | 16 | var Selector = { 17 | DATA_HOVER : '[data-hover="dropdown"]', 18 | HOVER : '.dropdown-hover.show' 19 | }; 20 | 21 | $(document) 22 | .on(Event.MOUSEENTER_DATA_API, Selector.DATA_HOVER, function () { 23 | var $this = $(this); 24 | var $parent = $this.closest(Selector.HOVER); 25 | if ($parent && !$parent.hasClass(ClassName.SHOW)) { 26 | $this.dropdown('toggle'); 27 | } 28 | }) 29 | .on(Event.MOUSELEAVE_DATA_API, Selector.HOVER, function () { 30 | var $hover = $(this).children(Selector.DATA_HOVER); 31 | if ($hover.length) { 32 | $hover.dropdown('toggle'); 33 | } 34 | }); 35 | })(jQuery); 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Size 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | @include media-breakpoint-up($breakpoint) { 4 | $infix: breakpoint-infix($breakpoint); 5 | 6 | @if $breakpoint != xs { 7 | @each $prop, $abbrev in (width: w, height: h) { 8 | .#{$abbrev}#{$infix}-100 { #{$prop}: 100% !important; } 9 | .m#{$abbrev}#{$infix}-100 { max-#{$prop}: 100% !important; } 10 | .min-v#{$abbrev}#{$infix}-100 { min-#{$prop}: 100v#{$abbrev} !important; } 11 | .v#{$abbrev}#{$infix}-100 { #{$prop}: 100v#{$abbrev} !important; } 12 | } 13 | } 14 | 15 | .s#{$infix}-100 { 16 | width: 100% !important; 17 | height: 100% !important; 18 | } 19 | 20 | .ms#{$infix}-100 { 21 | max-width: 100% !important; 22 | max-height: 100% !important; 23 | } 24 | 25 | .min-s#{$infix}-100 { 26 | min-width: 100% !important; 27 | min-height: 100% !important; 28 | } 29 | 30 | .min-vs#{$infix}-100 { 31 | min-width: 100vw !important; 32 | min-height: 100vh !important; 33 | } 34 | 35 | .vs#{$infix}-100 { 36 | width: 100vw !important; 37 | height: 100vh !important; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/border.pug: -------------------------------------------------------------------------------- 1 | mixin border(text, classes) 2 | .d-inline-block.mr-1.mb-2.p-2(class=classes)= text 3 | 4 | mixin border_variant(text, variant) 5 | +border(text, ['border-solid', 'border-1', 'border-' + variant, 'text-' + variant]) 6 | 7 | mixin border_alpha(text, variant) 8 | +border(text, ['border-solid', 'border-3', 'border-' + variant, 'text-white']) 9 | 10 | mixin border_hover(text, variant) 11 | +border(text, ['border-hover-' + variant, 'text-' + variant, 'card']) 12 | 13 | mixin border_hover_inverse(text, variant) 14 | +border(text, ['border-hover-' + variant, 'text-' + variant, 'card', 'bg-transparent', 'border-black']) 15 | 16 | mixin border_hover_alpha(text, variant, alpha) 17 | +border(text, ['border-hover-' + variant + '-' + alpha, 'border-' + variant, 'card', 'bg-transparent', 'border-3']) 18 | 19 | mixin border_style(text, style) 20 | +border(text, ['border-3', 'border-' + style, 'border-primary', 'text-primary']) 21 | 22 | mixin border_width(width) 23 | .mb-3.border-top-solid.border-primary(class="border-top-" + width) 24 | 25 | mixin border_radius(text, position, radius) 26 | +border(text, ['border', 'border-primary', 'text-primary', 'rounded', 'rounded-' + position + '-' + radius]) 27 | -------------------------------------------------------------------------------- /src/docs/pug/card/image-left.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'image_left') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'image_left') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'image_left') 14 | 15 | block example_result 16 | .card.flex-row 17 | img.card-img-left.example-card-img-responsive(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 18 | .card-body 19 | h4.card-title.h5.h4-sm Left image 20 | p.card-text Example text 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | .card.flex-row 26 | img.card-img-left.example-card-img-responsive(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 27 | .card-body 28 | h4.card-title.h5.h4-sm Left image 29 | p.card-text Example text 30 | 31 | block responsive_description 32 | h2.h3.fw-400 Responsive card image left 33 | 34 | block responsive_code 35 | :encode-pug 36 | | 37 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 38 | ="\n" 39 | img(class="card-img-" + breakpoint + "-left" src="/" + pkg.name + "/assets/img/thumbnail.jpg") 40 | -------------------------------------------------------------------------------- /src/docs/pug/card/image-right.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'image_right') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'image_right') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'image_right') 14 | 15 | block example_result 16 | .card.flex-row 17 | .card-body 18 | h4.card-title.h5.h4-sm Right image 19 | p.card-text Example text 20 | img.card-img-right.example-card-img-responsive(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | .card.flex-row 26 | .card-body 27 | h4.card-title.h5.h4-sm Right image 28 | p.card-text Example text 29 | img.card-img-sm-right.example-card-img-responsive(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 30 | 31 | block responsive_description 32 | h2.h3.fw-400 Responsive card image right 33 | 34 | block responsive_code 35 | :encode-pug 36 | | 37 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 38 | ="\n" 39 | img(class="card-img-" + breakpoint + "-right" src="/" + pkg.name + "/assets/img/thumbnail.jpg") 40 | -------------------------------------------------------------------------------- /src/scss/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | .breadcrumb-dark { 3 | @include breadcrumb-variant($breadcrumb-dark-color, $breadcrumb-dark-hover-color, $breadcrumb-dark-active-color, $breadcrumb-dark-divider-color); 4 | } 5 | .breadcrumb-light { 6 | @include breadcrumb-variant($breadcrumb-light-color, $breadcrumb-light-hover-color, $breadcrumb-light-active-color, $breadcrumb-light-divider-color); 7 | } 8 | 9 | // Arrows 10 | @each $divider, $value in $breadcrumb-dividers { 11 | .breadcrumb-#{$divider} { 12 | @include breadcrumb-divider($value); 13 | } 14 | } 15 | 16 | // Pill 17 | .breadcrumb-pill { 18 | border-radius: $border-radius-pill; 19 | padding-left: $breadcrumb-pill-padding-x; 20 | padding-right: $breadcrumb-pill-padding-x; 21 | } 22 | 23 | // Sizes 24 | @each $breakpoint in map-keys($grid-breakpoints) { 25 | @include media-breakpoint-up($breakpoint) { 26 | $infix: breakpoint-infix($breakpoint); 27 | 28 | @each $size, $breadcrumb in $breadcrumb-sizes { 29 | .breadcrumb#{$infix}-#{$size} { 30 | @include breadcrumb-size(map-get($breadcrumb, 'padding-y'), map-get($breadcrumb, 'padding-x'), map-get($breadcrumb, 'font-size'), map-get($breadcrumb, 'border-radius'), map-get($breadcrumb, 'item-padding')); 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/scss/_type.scss: -------------------------------------------------------------------------------- 1 | // Responsive headings 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | @include media-breakpoint-up($breakpoint) { 4 | @if $breakpoint != xs { 5 | .h1-#{$breakpoint} { font-size: $h1-font-size; } 6 | .h2-#{$breakpoint} { font-size: $h2-font-size; } 7 | .h3-#{$breakpoint} { font-size: $h3-font-size; } 8 | .h4-#{$breakpoint} { font-size: $h4-font-size; } 9 | .h5-#{$breakpoint} { font-size: $h5-font-size; } 10 | .h6-#{$breakpoint} { font-size: $h6-font-size; } 11 | 12 | .display-#{$breakpoint}-1 { 13 | font-size: $display1-size; 14 | font-weight: $display1-weight; 15 | line-height: $display-line-height; 16 | } 17 | .display-#{$breakpoint}-2 { 18 | font-size: $display2-size; 19 | font-weight: $display2-weight; 20 | line-height: $display-line-height; 21 | } 22 | .display-#{$breakpoint}-3 { 23 | font-size: $display3-size; 24 | font-weight: $display3-weight; 25 | line-height: $display-line-height; 26 | } 27 | .display-#{$breakpoint}-4 { 28 | font-size: $display4-size; 29 | font-weight: $display4-weight; 30 | line-height: $display-line-height; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/docs/pug/grid/column-size-wide.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('grid', 'column_size_wide') 5 | 6 | block meta_description 7 | +example_meta_description('grid', 'column_size_wide') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('grid') 11 | 12 | block example_description 13 | +example_description('grid', 'column_size_wide') 14 | 15 | block example_body 16 | table.table.table-bordered.table-striped.card-table.mb-0 17 | thead 18 | tr 19 | th Class 20 | th Device width 21 | th Standard 22 | tbody 23 | each column in [{'size': 'xxl', 'width': '≥1600px', 'standard': ''}, {'size': '3xl', 'width': '≥1920px', 'standard': '2K'}, {'size': '4xl', 'width': '≥3840px', 'standard': '4K'}, {'size': '5xl', 'width': '≥5120px', 'standard': '5K'}, {'size': '6xl', 'width': '≥7680px', 'standard': '8K'}] 24 | tr 25 | td #[code.fs-2= '.col-' + column.size + '-'] 26 | td= column.width 27 | td= column.standard 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | each breakpoint in ['xxl', '3xl', '4xl', '5xl', '6xl'] 33 | - for(var size = 1; size <= 12; size++) 34 | div(class='col-' + breakpoint + '-' + size) 35 | ="\n" 36 | -------------------------------------------------------------------------------- /src/docs/pug/templates/image-left.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block breadcrumb 4 | +example_breadcrumb(contents.card) 5 | 6 | block example_description 7 | h1.h2.fw-400= contents.card.examples.image_left.title 8 | p.fs-4.mb-4= contents.card.examples.image_left.description 9 | 10 | block example_result 11 | .card.flex-sm-row 12 | img.card-img-top.card-img-sm-left(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 13 | .card-body 14 | h4.card-title Left image 15 | p.card-text Example text 16 | 17 | block example_code 18 | :encode-pug 19 | | 20 | .card.flex-sm-row 21 | img.card-img-top.card-img-sm-left(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 22 | .card-body 23 | h4.card-title Left image 24 | p.card-text Example text 25 | 26 | block responsive_description 27 | h2.h3.fw-400 Responsive card image left 28 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 29 | 30 | block responsive_code 31 | :encode-pug 32 | | 33 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 34 | ="\n" 35 | img(class="card-img-" + breakpoint + "-left" src="/" + pkg.name + "/assets/img/thumbnail.jpg") 36 | -------------------------------------------------------------------------------- /src/docs/pug/nav/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | if size < 4 18 | +nav_size(size) 19 | else 20 | +responsive_nav_size(size) 21 | 22 | block example_code 23 | :encode-pug 24 | | 25 | - for(var size = 0; size <= 5; size++) 26 | if size != 0 27 | ul.nav(class='nav-' + size) 28 | ul.nav(class='nav-x-' + size) 29 | ul.nav(class='nav-y-' + size) 30 | ="\n" 31 | 32 | block responsive_description 33 | h2.h3.fw-400 Responsive nav sizes 34 | 35 | block responsive_code 36 | :encode-pug 37 | | 38 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 39 | - for(var size = 0; size <= 5; size++) 40 | if size != 0 41 | ul.nav(class='nav-' + breakpoint + '-' + size) 42 | ul.nav(class='nav-x-' + breakpoint + '-' + size) 43 | ul.nav(class='nav-y-' + breakpoint + '-' + size) 44 | ="\n" 45 | ="\n" 46 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/nav-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'nav_size') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'nav_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'nav_size') 14 | 15 | block example_result 16 | - for(var size = 1; size <= 5; size++) 17 | +navbar_nav_size(size) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var size = 1; size <= 5; size++) 23 | ul.navbar-nav(class='navbar-nav-' + size) 24 | ul.navbar-nav(class='navbar-nav-x-' + size) 25 | ul.navbar-nav(class='navbar-nav-y-' + size) 26 | ="\n" 27 | 28 | block responsive_description 29 | h2.h3.fw-400 Responsive navbar nav sizes 30 | 31 | block responsive_code 32 | :encode-pug 33 | | 34 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 35 | - for(var size = 1; size <= 5; size++) 36 | ul.navbar-nav(class='navbar-nav-' + breakpoint + '-' + size) 37 | ul.navbar-nav(class='navbar-nav-x-' + breakpoint + '-' + size) 38 | ul.navbar-nav(class='navbar-nav-y-' + breakpoint + '-' + size) 39 | ="\n" 40 | ="\n" 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postboot", 3 | "description": "Web app prototyping library based on Bootstrap framework.", 4 | "version": "1.0.2", 5 | "keywords": [ 6 | "bootstrap", 7 | "css", 8 | "html", 9 | "js", 10 | "javascript", 11 | "sass" 12 | ], 13 | "homepage": "https://tarkhov.github.io/postboot/", 14 | "author": "Alexander Tarkhov", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/tarkhov/postboot.git" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/tarkhov/postboot/issues" 21 | }, 22 | "license": "MIT", 23 | "devDependencies": { 24 | "@fortawesome/fontawesome-free": "^5.9.0", 25 | "grunt": "^1.2.0", 26 | "grunt-autoprefixer": "^3.0.4", 27 | "grunt-banner": "^0.6.0", 28 | "grunt-contrib-concat": "^1.0.1", 29 | "grunt-contrib-cssmin": "^1.0.2", 30 | "grunt-contrib-pug": "^1.0.0", 31 | "grunt-contrib-sass": "^1.0.0", 32 | "grunt-contrib-uglify": "^3.4.0", 33 | "grunt-contrib-watch": "^1.1.0", 34 | "grunt-notify": "^0.4.5", 35 | "he": "^1.2.0", 36 | "jquery": "^3.5.1", 37 | "jstransformer-prismjs": "^0.1.0", 38 | "load-grunt-tasks": "^3.5.2", 39 | "prismjs": "^1.20.0" 40 | }, 41 | "dependencies": { 42 | "bootstrap": "^4.5.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/docs/pug/templates/image-right.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block breadcrumb 4 | +example_breadcrumb(contents.card) 5 | 6 | block example_description 7 | h1.h2.fw-400= contents.card.examples.image_right.title 8 | p.fs-4.mb-4= contents.card.examples.image_right.description 9 | 10 | block example_result 11 | .card.flex-sm-row 12 | .card-body 13 | h4.card-title Right image 14 | p.card-text Example text 15 | img.card-img-bottom.card-img-sm-right(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 16 | 17 | block example_code 18 | :encode-pug 19 | | 20 | .card.flex-sm-row 21 | .card-body 22 | h4.card-title Right image 23 | p.card-text Example text 24 | img.card-img-bottom.card-img-sm-right(src="/" + pkg.name + "/assets/img/thumbnail.jpg") 25 | 26 | block responsive_description 27 | h2.h3.fw-400 Responsive card image right 28 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 29 | 30 | block responsive_code 31 | :encode-pug 32 | | 33 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 34 | ="\n" 35 | img(class="card-img-" + breakpoint + "-right" src="/" + pkg.name + "/assets/img/thumbnail.jpg") 36 | -------------------------------------------------------------------------------- /src/scss/mixins/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // Size 2 | @mixin breadcrumb-size($padding-y, $padding-x, $font-size, $border-radius, $item-padding) { 3 | padding: $padding-y $padding-x; 4 | font-size: $font-size; 5 | @include border-radius($border-radius); 6 | 7 | .breadcrumb-item { 8 | + .breadcrumb-item { 9 | padding-left: $item-padding; 10 | 11 | &::before { 12 | padding-right: $item-padding; 13 | } 14 | } 15 | } 16 | } 17 | 18 | // Divider 19 | @mixin breadcrumb-divider($divider) { 20 | .breadcrumb-item { 21 | + .breadcrumb-item::before { 22 | content: unicode($divider); 23 | } 24 | } 25 | } 26 | 27 | // Color 28 | @mixin breadcrumb-variant($color, $hover-color, $active-color, $divider-color) { 29 | .breadcrumb-item { 30 | color: $color; 31 | 32 | &:hover, 33 | &:focus { 34 | color: $hover-color; 35 | } 36 | 37 | &.active { 38 | color: $active-color; 39 | } 40 | 41 | + .breadcrumb-item::before { 42 | color: $divider-color; 43 | } 44 | } 45 | 46 | .breadcrumb-link { 47 | color: $color; 48 | 49 | &:hover, 50 | &:focus { 51 | color: $hover-color; 52 | } 53 | 54 | .active > &, 55 | .show > &, 56 | &.active { 57 | color: $active-color; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/dropdown.pug: -------------------------------------------------------------------------------- 1 | mixin dropdown_menu() 2 | .dropdown-menu 3 | - for(var i = 1; i <= 3; i++) 4 | = "\n\t" 5 | a.dropdown-item(href='#')= 'Menu item ' + i 6 | 7 | mixin dropdown(text, classes) 8 | .btn-group(class=classes) 9 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown")= text 10 | +dropdown_menu() 11 | 12 | mixin dropdown_arrow(text, classes) 13 | .btn-group(class=classes) 14 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown")= text 15 | .dropdown-menu 16 | .dropdown-arrow 17 | - for(var i = 1; i <= 3; i++) 18 | = "\n\t" 19 | a.dropdown-item(href='#')= 'Menu item ' + i 20 | 21 | mixin dropdown_hover() 22 | .btn-group.dropdown.dropdown-hover 23 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown" data-hover="dropdown") Hover 24 | +dropdown_menu() 25 | 26 | mixin dropdown_menu_size(size) 27 | .dropdown-menu(class='dropdown-menu-' + size) 28 | - for(var i = 1; i <= 3; i++) 29 | = "\n\t" 30 | a.dropdown-item(href='#')= 'Menu item ' + i 31 | 32 | mixin dropdown_size(size) 33 | .btn-group.dropdown 34 | button.btn.btn-secondary.dropdown-toggle(type="button" data-toggle="dropdown" class="btn-" + size)= 'Dropdown ' + size 35 | +dropdown_menu_size(size) 36 | -------------------------------------------------------------------------------- /src/docs/pug/font/weight.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('font', 'weight') 5 | 6 | block meta_description 7 | +example_meta_description('font', 'weight') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('font') 11 | 12 | block example_description 13 | +example_description('font', 'weight') 14 | 15 | block example_result 16 | each text, weight in {'100': 'Thin', '200': 'Extra light', '300': 'Light', '400': 'Normal', '500': 'Medium', '600': 'Semi bold', '700': 'Bold', '800': 'Extra bold', '900': 'Black'} 17 | +font_weight(text, weight) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | each text, weight in {'100': 'Thin', '200': 'Extra light', '300': 'Light', '400': 'Normal', '500': 'Medium', '600': 'Semi bold', '700': 'Bold', '800': 'Extra bold', '900': 'Black'} 23 | p(class='fw-' + weight)= text 24 | 25 | block responsive_description 26 | h2.h3.fw-400 Responsive font weights 27 | 28 | block responsive_code 29 | :encode-pug 30 | | 31 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 32 | each text, weight in {'100': 'Thin', '200': 'Extra light', '300': 'Light', '400': 'Normal', '500': 'Medium', '600': 'Semi bold', '700': 'Bold', '800': 'Extra bold', '900': 'Black'} 33 | p(class='fw-' + breakpoint + '-' + weight) 34 | ="\n" 35 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/breadcrumb.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'breadcrumb') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'breadcrumb') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'breadcrumb') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 17 | .container-fluid.navbar-container 18 | = "\n " 19 | a.navbar-brand.d-none.d-sm-inline-block(href="#") Brand 20 | ol.breadcrumb.breadcrumb-dark.bg-transparent.px-0.navbar-breadcrumb 21 | li.breadcrumb-item: a.breadcrumb-link(href='#') Home 22 | li.breadcrumb-item: a.breadcrumb-link(href='#') Category 23 | li.breadcrumb-item.active Article 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 29 | .container-fluid.navbar-container 30 | = "\n " 31 | a.navbar-brand.d-none.d-sm-inline-block(href="#") Navbar 32 | ol.breadcrumb.breadcrumb-dark.bg-transparent.px-0.navbar-breadcrumb 33 | li.breadcrumb-item: a.breadcrumb-link(href='#') Home 34 | li.breadcrumb-item: a.breadcrumb-link(href='#') Category 35 | li.breadcrumb-item.active Article 36 | -------------------------------------------------------------------------------- /src/docs/pug/sidebar/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('sidebar', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('sidebar', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('sidebar') 11 | 12 | block example_description 13 | +example_description('sidebar', 'size') 14 | 15 | block example_result 16 | .row 17 | - for(var size = 1; size <= 5; size++) 18 | .col-12.col-sm-6.mb-gutter(class=size >= 4 ? ['col-xl-5', 'col-md-6'] : 'col-md-4') 19 | .sidebar.sidebar-dark.bg-dark.sidebar-expand(class='sidebar-' + size) 20 | a.sidebar-brand(href="#") Brand 21 | ul.sidebar-nav 22 | - for(var i = 1; i <= 5; i++) 23 | li.nav-item 24 | a.nav-link(href="#")= 'Nav item ' + i 25 | 26 | block example_code 27 | :encode-pug 28 | | 29 | - for(var size = 1; size <= 5; size++) 30 | .sidebar.sidebar-dark.bg-dark.sidebar-expand(class='sidebar-' + size) 31 | 32 | block responsive_description 33 | h2.h3.fw-400 Responsive sidebar sizes 34 | 35 | block responsive_code 36 | :encode-pug 37 | | 38 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 39 | - for(var size = 1; size <= 5; size++) 40 | .sidebar(class='sidebar-' + breakpoint + '-' + size) 41 | ="\n" 42 | -------------------------------------------------------------------------------- /src/docs/pug/collapse/horizontal.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('collapse', 'horizontal') 5 | 6 | block meta_description 7 | +example_meta_description('collapse', 'horizontal') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('collapse') 11 | 12 | block example_description 13 | +example_description('collapse', 'horizontal') 14 | 15 | block example_result 16 | a.btn.btn-primary.mb-3(href="#example-collapse-horizontal" data-toggle="collapse") Collapse 17 | .collapse.collapse-horizontal.width#example-collapse-horizontal 18 | .sidebar.sidebar-dark.bg-dark.sidebar-expand(style="width: 300px;") 19 | a.sidebar-brand(href="#") Sidebar 20 | ul.sidebar-nav 21 | - for(var i = 1; i <= 5; i++) 22 | li.nav-item 23 | a.nav-link(href="#")= 'Nav item ' + i 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | = "\n" 29 | a.btn.btn-primary.mb-3(href="#example-collapse-horizontal" data-toggle="collapse") Collapse 30 | .collapse.collapse-horizontal.width#example-collapse-horizontal 31 | .sidebar.sidebar-dark.bg-dark.sidebar-expand(style="width: 300px;") 32 | a.sidebar-brand(href="#") Sidebar 33 | ul.sidebar-nav 34 | - for(var i = 1; i <= 5; i++) 35 | li.nav-item 36 | a.nav-link(href="#")= 'Nav item ' + i 37 | -------------------------------------------------------------------------------- /dist/js/postboot.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * PostBoot v1.0.2 (https://tarkhov.github.io/postboot/) 3 | * Copyright 2016-2021 Alexander Tarkhov 4 | * Licensed under MIT 5 | */ 6 | 7 | "ontouchstart"in document.documentElement||function(t){var n=".bs.dropdown-hover",o=".data-api",r={MOUSEENTER_DATA_API:"mouseenter"+n+o,MOUSELEAVE_DATA_API:"mouseleave"+n+o},a="show",e='[data-hover="dropdown"]',d=".dropdown-hover.show";t(document).on(r.MOUSEENTER_DATA_API,e,function(){var n=t(this),o=n.closest(d);o&&!o.hasClass(a)&&n.dropdown("toggle")}).on(r.MOUSELEAVE_DATA_API,d,function(){var n=t(this).children(e);n.length&&n.dropdown("toggle")})}(jQuery),function(n){var o={CLICK_DATA_API:"click.bs.dropdown-mega.data-api"};jQuery(document).on(o.CLICK_DATA_API,".dropdown-mega-menu",function(n){n.stopPropagation()})}(),function(d){var n={ACTIVATE:"activate.bs.scrollspy"},s="dropdown-item",i="nav-link",l="show",a='[data-spy="scroll"]',u=".dropdown-menu",A=".dropup, .dropright, .dropdown, .dropleft",h=".nav-item",c=".show";d(window).on(n.ACTIVATE,function(n,o){var t=o.relatedTarget,e='[href="'+t+'"], [data-target="'+t+'"]',r=d(a);if(!r.length)return!0;r.each(function(){var n=d(this).attr("data-target");if(!n)return!0;var o=d(n);if(!o.length)return!0;var t=o.find(e);if(!t.length)return!0;var r=o.find(c);r.length&&r.removeClass(l);var a=null;t.hasClass(s)?a=u+","+A:t.hasClass(i)&&(a=h),null!==a&&t.parentsUntil(n,a).addClass(l)})})}(jQuery); -------------------------------------------------------------------------------- /src/docs/pug/border/width.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('border', 'width') 5 | 6 | block meta_description 7 | +example_meta_description('border', 'width') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('border') 11 | 12 | block example_description 13 | +example_description('border', 'width') 14 | 15 | block example_result 16 | - for(var width = 1; width <= 5; width++) 17 | +border_width(width) 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | - for(var width = 1; width <= 5; width++) 23 | p(class='border-' + width)= width + 'px' 24 | each position in ['top', 'right', 'bottom', 'left'] 25 | p(class='border-' + position + '-' + width)= width + 'px' 26 | ="\n" 27 | 28 | block responsive_description 29 | h2.h3.fw-400 Responsive border widths 30 | p Make your border width responsive by adding class #[code.fs-2 .border-breakpoint-width]. 31 | 32 | block responsive_code 33 | :encode-pug 34 | | 35 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 36 | - for(var width = 0; width <= 5; width++) 37 | p(class='border-' + breakpoint + '-' + width)= width + 'px' 38 | each position in ['top', 'right', 'bottom', 'left'] 39 | p(class='border-' + position + '-' + breakpoint + '-' + width)= width + 'px' 40 | ="\n" 41 | -------------------------------------------------------------------------------- /src/docs/pug/grid/container-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('grid', 'container_size') 5 | 6 | block meta_description 7 | +example_meta_description('grid', 'container_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('grid') 11 | 12 | block example_description 13 | +example_description('grid', 'container_size') 14 | 15 | block example_body 16 | table.table.table-bordered.table-striped.card-table.mb-0 17 | thead 18 | tr 19 | th Class 20 | th Size 21 | th Device width 22 | tbody 23 | each container, width in [{'size': '540px', 'breakpoint': '≥576px'}, {'size': '720px', 'breakpoint': '≥768px'}, {'size': '960px', 'breakpoint': '≥992px'}, {'size': '1140px', 'breakpoint': '≥1200px'}, {'size': '1570px', 'breakpoint': '≥1600px'}] 24 | tr 25 | td #[code.fs-2= '.container-' + (width + 1)] 26 | td= container.size 27 | td= container.breakpoint 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | - for(var i = 1; i <= 5; i++) 33 | .container(class='container-' + i) 34 | 35 | block responsive_description 36 | h2.h3.fw-400 Responsive container sizes 37 | 38 | block responsive_code 39 | :encode-pug 40 | | 41 | .container-md-2 42 | .container-lg-3 43 | .container-xl-4 44 | .container-xxl-5 45 | -------------------------------------------------------------------------------- /src/docs/pug/mixins/navbar.pug: -------------------------------------------------------------------------------- 1 | mixin navbar_nav(classes) 2 | ul.navbar-nav(class=classes) 3 | - for(var i = 1; i <= 3; i++) 4 | li.nav-item: a.nav-link(href='#')= 'Item ' + i 5 | 6 | mixin responsive_navbar_nav(size, classes) 7 | ul.navbar-nav(class=classes) 8 | - var linkClass = '' 9 | - for(var i = 1; i <= 3; i++) 10 | if size <= 3 && i == 3 11 | - var linkClass = ['d-none', 'd-sm-block'] 12 | else if size == 4 && i >= 2 13 | - var linkClass = ['d-none', 'd-sm-block'] 14 | else if size == 5 && i >= 2 15 | - var linkClass = ['d-none', 'd-md-block'] 16 | li.nav-item: a.nav-link(href='#' class=linkClass)= 'Nav item ' + i 17 | 18 | mixin navbar(classes) 19 | nav.navbar.px-0(class=classes) 20 | .container-fluid.navbar-container 21 | = "\n\t" 22 | a.navbar-brand(href="#") Brand 23 | .collapse.navbar-collapse 24 | +navbar_nav() 25 | 26 | mixin navbar_nav_size(size) 27 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.mb-3.px-0 28 | .container-fluid.navbar-container 29 | = "\n\t" 30 | a.navbar-brand(href="#") Brand 31 | .collapse.navbar-collapse 32 | +responsive_navbar_nav(size, 'navbar-nav-' + size) 33 | 34 | mixin navbar_size(size) 35 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.mb-3.px-0(class='navbar-' + size) 36 | .container-fluid.navbar-container 37 | = "\n\t" 38 | a.navbar-brand(href="#") Brand 39 | .collapse.navbar-collapse 40 | +responsive_navbar_nav(size) 41 | -------------------------------------------------------------------------------- /src/docs/pug/sidebar/expand.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('sidebar', 'expand') 5 | 6 | block meta_description 7 | +example_meta_description('sidebar', 'expand') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('sidebar') 11 | 12 | block example_description 13 | +example_description('sidebar', 'expand') 14 | 15 | block example_result 16 | .row 17 | .col-auto 18 | .sidebar.sidebar-dark.bg-dark.sidebar-expand-xl.rounded 19 | a.sidebar-brand(href="#") #[i.fab.fa-bootstrap] #[span.sidebar-collapse.collapse.width.ml-2 Bootstrap] 20 | ul.sidebar-nav 21 | li.nav-item 22 | a.nav-link(href="#") #[i.fas.fa-home] #[span.sidebar-collapse.collapse.width.ml-2 Home] 23 | li.nav-item 24 | a.nav-link(href="#") #[i.fas.fa-shopping-cart] #[span.sidebar-collapse.collapse.width.ml-2 Products] 25 | li.nav-item 26 | a.nav-link(href="#") #[i.fas.fa-user-friends] #[span.sidebar-collapse.collapse.width.ml-2 Users] 27 | li.nav-item 28 | a.nav-link(href="#") #[i.fas.fa-chart-pie] #[span.sidebar-collapse.collapse.width.ml-2 Analytics] 29 | li.nav-item 30 | a.nav-link(href="#") #[i.fas.fa-comment] #[span.sidebar-collapse.collapse.width.ml-2 Comments] 31 | 32 | block example_code 33 | :encode-pug 34 | | 35 | .sidebar.sidebar-expand 36 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 37 | .sidebar(class="sidebar-expand-" + breakpoint) 38 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/hover.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'hover') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'hover') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'hover') 14 | .alert.alert-primary This component requires #[b bootstrap.js] and #[b= pkg.name + '.js'] or just #[b dropdown.js] and #[b dropdown-hover.js]. 15 | 16 | block example_result 17 | +dropdown_hover() 18 | 19 | block example_code 20 | :encode-pug 21 | | 22 | .btn-group.dropdown.dropdown-hover 23 | button.btn.btn-secondary.dropdown-toggle(type="button" data-hover="dropdown") Hover 24 | .dropdown-menu 25 | 26 | block example_after 27 | h2.h3.fw-400.pt-3 Dropdown disable click event 28 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 29 | .card.card-body.bg-light.mb-3 30 | pre.pre-scrollable 31 | code.language-javascript 32 | :prismjs(language='javascript') 33 | jQuery(document).ready(function ($) { 34 | $(document).off('.dropdown.data-api'); 35 | $(document).on('show.bs.dropdown', '.dropdown-hover', function (e) { 36 | var events = $._data(e.relatedTarget, 'events'); 37 | if (events) { 38 | $(e.relatedTarget).off('click.bs.dropdown'); 39 | } 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /src/docs/pug/sidebar/color.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('sidebar', 'color') 5 | 6 | block meta_description 7 | +example_meta_description('sidebar', 'color') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('sidebar') 11 | 12 | block example_description 13 | +example_description('sidebar', 'color') 14 | 15 | block example_result 16 | .row 17 | .col-12.col-lg-4.col-sm.mb-gutter 18 | .sidebar.sidebar-dark.bg-dark.sidebar-expand 19 | a.sidebar-brand(href="#") Brand 20 | ul.sidebar-nav 21 | - for(var i = 1; i <= 5; i++) 22 | li.nav-item 23 | a.nav-link(href="#")= 'Nav item ' + i 24 | .col-12.col-lg-4.col-sm-6.mb-gutter 25 | .sidebar.sidebar-light.bg-light.sidebar-expand 26 | a.sidebar-brand(href="#") Brand 27 | ul.sidebar-nav 28 | - for(var i = 1; i <= 5; i++) 29 | li.nav-item 30 | a.nav-link(href="#")= 'Nav item ' + i 31 | 32 | block example_code 33 | :encode-pug 34 | | 35 | .sidebar.sidebar-dark.bg-dark.sidebar-expand 36 | ="\n " 37 | a.sidebar-brand(href="#") Brand 38 | ul.sidebar-nav 39 | - for(var i = 1; i <= 5; i++) 40 | li.nav-item 41 | a.nav-link(href="#")= 'Nav item ' + i 42 | .sidebar.sidebar-light.bg-light.sidebar-expand 43 | ="\n " 44 | a.sidebar-brand(href="#") Brand 45 | ul.sidebar-nav 46 | - for(var i = 1; i <= 5; i++) 47 | li.nav-item 48 | a.nav-link(href="#")= 'Nav item ' + i 49 | -------------------------------------------------------------------------------- /src/docs/pug/list-group/item-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('list-group', 'item_size') 5 | 6 | block meta_description 7 | +example_meta_description('list-group', 'item_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('list-group') 11 | 12 | block example_description 13 | +example_description('list-group', 'item_size') 14 | 15 | block example_result 16 | .row 17 | .col-md-4 18 | .list-group 19 | +list_group_item_variant('Extra large', '5') 20 | +list_group_item('Large', ['list-group-item-4', 'list-group-item-x-5']) 21 | +list_group_item_variant('Medium', 'x-5') 22 | +list_group_item('Small', ['list-group-item-2', 'list-group-item-x-5']) 23 | +list_group_item('Extra small', ['list-group-item-1', 'list-group-item-x-5']) 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | - for(var size = 1; size <= 5; size++) 29 | div(class='list-group-item-' + size) 30 | div(class='list-group-item-x-' + size) 31 | div(class='list-group-item-y-' + size) 32 | ="\n" 33 | 34 | block responsive_description 35 | h2.h3.fw-400 Responsive list group item sizes 36 | 37 | block responsive_code 38 | :encode-pug 39 | | 40 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 41 | - for(var size = 1; size <= 5; size++) 42 | div(class='list-group-item-' + breakpoint + '-' + size) 43 | each coordinate in ['x', 'y'] 44 | div(class='list-group-item-' + coordinate + '-' + breakpoint + '-' + size) 45 | ="\n" 46 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/dropdown-menu.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'dropdown_menu') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'dropdown_menu') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'dropdown_menu') 14 | 15 | block example_result 16 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 17 | .container-fluid.navbar-container 18 | = "\n " 19 | a.navbar-brand(href="#") Brand 20 | .collapse.navbar-collapse 21 | ul.navbar-nav 22 | li.nav-item.dropdown 23 | a.nav-link.dropdown-toggle(href='#' data-toggle='dropdown') Dropdown 24 | .dropdown-menu.navbar-dropdown-menu 25 | - for(var i = 1; i <= 3; i++) 26 | = "\n\t" 27 | a.dropdown-item(href='#')= 'Menu item ' + i 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | nav.navbar.navbar-expand-xs.navbar-dark.bg-dark.px-0 33 | .container-fluid.navbar-container 34 | = "\n " 35 | a.navbar-brand(href="#") Navbar 36 | .collapse.navbar-collapse 37 | ul.navbar-nav 38 | li.nav-item.dropdown 39 | = "\n\t\t" 40 | a.nav-link.dropdown-toggle(href='#' data-toggle='dropdown') Dropdown 41 | .dropdown-menu.navbar-dropdown-menu 42 | - for(var i = 1; i <= 3; i++) 43 | = "\n\t\t " 44 | a.dropdown-item(href='#')= 'Menu item ' + i 45 | -------------------------------------------------------------------------------- /src/docs/pug/size/full.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('size', 'full') 5 | 6 | block meta_description 7 | +example_meta_description('size', 'full') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('size') 11 | 12 | block example_description 13 | +example_description('size', 'full') 14 | 15 | block example_result 16 | div(style="width: 100px;height: 100px;") 17 | .s-100.bg-state-primary.text-state-primary.border.border-primary 18 | .flex-center.s-100 19 | div 100% 20 | 21 | block example_code 22 | :encode-pug 23 | | 24 | .s-100 25 | .ms-100 26 | .min-s-100 27 | .min-vs-100 28 | .vs-100 29 | 30 | block responsive_description 31 | h2.h3.fw-400 Responsive full width and height 32 | 33 | block responsive_code 34 | :encode-pug 35 | | 36 | .s-100 37 | .ms-100 38 | .min-s-100 39 | .min-vs-100 40 | .vs-100 41 | ="\n" 42 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 43 | div(class="s-" + breakpoint + "-100") 44 | div(class="ms-" + breakpoint + "-100") 45 | div(class="min-s-" + breakpoint + "-100") 46 | div(class="min-vs-" + breakpoint + "-100") 47 | div(class="vs-" + breakpoint + "-100") 48 | ="\n" 49 | each length in ['w', 'h'] 50 | div(class=length + "-" + breakpoint + "-100") 51 | div(class="m" + length + "-" + breakpoint + "-100") 52 | div(class="min-v" + length + "-" + breakpoint + "-100") 53 | div(class="v" + length + "-" + breakpoint + "-100") 54 | ="\n" 55 | ="\n" 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # https://github.com/github/gitignore/blob/master/Global/Linux.gitignore 2 | *~ 3 | 4 | # temporary files which can be created if a process still has a handle open of a deleted file 5 | .fuse_hidden* 6 | 7 | # KDE directory preferences 8 | .directory 9 | 10 | # Linux trash folder which might appear on any partition or disk 11 | .Trash-* 12 | 13 | # .nfs files are created when an open file is removed but is still being accessed 14 | .nfs* 15 | 16 | # https://github.com/github/gitignore/blob/master/Global/Vim.gitignore 17 | [._]*.s[a-w][a-z] 18 | [._]s[a-w][a-z] 19 | *.un~ 20 | Session.vim 21 | .netrwhist 22 | *~ 23 | 24 | # https://github.com/github/gitignore/blob/master/Node.gitignore 25 | # Logs 26 | logs 27 | *.log 28 | npm-debug.log* 29 | 30 | # Runtime data 31 | pids 32 | *.pid 33 | *.seed 34 | 35 | # Directory for instrumented libs generated by jscoverage/JSCover 36 | lib-cov 37 | 38 | # Coverage directory used by tools like istanbul 39 | coverage 40 | 41 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 42 | .grunt 43 | 44 | # node-waf configuration 45 | .lock-wscript 46 | 47 | # Compiled binary addons (http://nodejs.org/api/addons.html) 48 | build/Release 49 | 50 | # Dependency directory 51 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 52 | node_modules 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | # https://github.com/github/gitignore/blob/master/Sass.gitignore 61 | .sass-cache/ 62 | *.css.map 63 | *.sass.map 64 | *.scss.map 65 | 66 | # Custom 67 | package-lock.json 68 | -------------------------------------------------------------------------------- /src/scss/mixins/_navbar.scss: -------------------------------------------------------------------------------- 1 | // Size 2 | @mixin navbar-size($padding-y, $font-size, $brand-font-size, $brand-padding-y, $nav-link-padding-y, $nav-height) { 3 | padding-top: $padding-y; 4 | padding-bottom: $padding-y; 5 | 6 | .navbar-brand { 7 | font-size: $brand-font-size; 8 | padding-top: $brand-padding-y; 9 | padding-bottom: $brand-padding-y; 10 | } 11 | 12 | .navbar-nav { 13 | font-size: $font-size; 14 | 15 | .nav-link { 16 | padding-top: $nav-link-padding-y; 17 | padding-bottom: $nav-link-padding-y; 18 | } 19 | } 20 | 21 | .navbar-text { 22 | font-size: $font-size; 23 | padding-top: $nav-link-padding-y; 24 | padding-bottom: $nav-link-padding-y; 25 | } 26 | 27 | .navbar-breadcrumb { 28 | font-size: $font-size; 29 | padding-top: $nav-link-padding-y; 30 | padding-bottom: $nav-link-padding-y; 31 | } 32 | 33 | .navbar-dropdown-menu { 34 | margin-top: $padding-y; 35 | } 36 | 37 | .navbar-scroller { 38 | height: $nav-height; 39 | } 40 | } 41 | 42 | // Nav size 43 | @mixin navbar-nav-size($link-padding-y, $link-padding-x, $font-size) { 44 | font-size: $font-size; 45 | 46 | .nav-link { 47 | padding: $link-padding-y $link-padding-x !important; 48 | } 49 | } 50 | 51 | @mixin navbar-nav-size-y($link-padding-y) { 52 | .nav-link { 53 | padding-top: $link-padding-y !important; 54 | padding-bottom: $link-padding-y !important; 55 | } 56 | } 57 | 58 | @mixin navbar-nav-size-x($link-padding-x) { 59 | .nav-link { 60 | padding-right: $link-padding-x !important; 61 | padding-left: $link-padding-x !important; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/docs/pug/sidebar/nav-size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('sidebar', 'nav_size') 5 | 6 | block meta_description 7 | +example_meta_description('sidebar', 'nav_size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('sidebar') 11 | 12 | block example_description 13 | +example_description('sidebar', 'nav_size') 14 | 15 | block example_result 16 | .row 17 | .col-12.col-sm-7.col-md-6.col-xl-5 18 | .sidebar.sidebar-dark.bg-dark.sidebar-expand 19 | a.sidebar-brand(href="#") Brand 20 | - for(var size = 5; size > 0; size--) 21 | ul.sidebar-nav.sidebar-nav-x-3.sidebar-nav-y-5(class='fs-' + size) 22 | li.nav-item 23 | a.nav-link(href="#")= 'Nav item ' + size 24 | 25 | block example_code 26 | :encode-pug 27 | | 28 | - for(var size = 0; size <= 5; size++) 29 | if size != 0 30 | ul.sidebar-nav(class='sidebar-nav-' + size) 31 | ul.sidebar-nav(class='sidebar-nav-x-' + size) 32 | ul.sidebar-nav(class='sidebar-nav-y-' + size) 33 | ="\n" 34 | 35 | block responsive_description 36 | h2.h3.fw-400 Responsive sidebar nav sizes 37 | 38 | block responsive_code 39 | :encode-pug 40 | | 41 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 42 | - for(var size = 0; size <= 5; size++) 43 | if size != 0 44 | ul.sidebar-nav(class='sidebar-nav-' + breakpoint + '-' + size) 45 | ul.sidebar-nav(class='sidebar-nav-x-' + breakpoint + '-' + size) 46 | ul.sidebar-nav(class='sidebar-nav-y-' + breakpoint + '-' + size) 47 | ="\n" 48 | ="\n" 49 | -------------------------------------------------------------------------------- /src/docs/pug/dropdown/mega-menu.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('dropdown', 'mega_menu') 5 | 6 | block meta_description 7 | +example_meta_description('dropdown', 'mega_menu') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('dropdown') 11 | 12 | block example_description 13 | +example_description('dropdown', 'mega_menu') 14 | .alert.alert-primary This component requires #[b bootstrap.js] and #[b= pkg.name + '.js'] or just #[b dropdown.js] and #[b dropdown-mega.js]. 15 | 16 | block example_result 17 | ul.nav.dropdown 18 | li.nav-item.dropdown-hover.dropdown-mega 19 | a.nav-link.dropdown-toggle(href="#" data-toggle='dropdown' data-hover='dropdown') Fluid 20 | .dropdown-menu.dropdown-menu-fluid.dropdown-mega-menu 21 | .dropdown-menu-body 22 | .row 23 | - for(var c = 1; c <= 2; c++) 24 | .col-6 25 | ul.list-unstyled 26 | - for(var i = 1; i <= 3; i++) 27 | li: a(href='#')= 'List item ' + i 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | ul.nav.dropdown 33 | li.nav-item.dropdown-hover.dropdown-mega 34 | = "\n\t" 35 | a.nav-link.dropdown-toggle(href="#" data-toggle='dropdown' data-hover='dropdown') Fluid 36 | .dropdown-menu.dropdown-menu-fluid.dropdown-mega-menu 37 | .dropdown-menu-body 38 | .row 39 | - for(var c = 1; c <= 2; c++) 40 | .col-6 41 | ul.list-unstyled 42 | - for(var i = 1; i <= 3; i++) 43 | li: a(href='#')= 'List item ' + i 44 | -------------------------------------------------------------------------------- /src/scss/mixins/_form.scss: -------------------------------------------------------------------------------- 1 | // Size 2 | @mixin input-size($height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { 3 | height: $height; 4 | padding: $padding-y $padding-x; 5 | @include font-size($font-size); 6 | line-height: $line-height; 7 | @include border-radius($border-radius); 8 | } 9 | 10 | // Validation state 11 | @mixin form-validation-state-selector($state) { 12 | @if ($state == "valid" or $state == "invalid") { 13 | .was-validated &:#{$state}, 14 | &.is-#{$state} { 15 | &, 16 | &:focus { 17 | @content; 18 | } 19 | } 20 | } @else { 21 | &.is-#{$state} { 22 | &, 23 | &:focus { 24 | @content; 25 | } 26 | } 27 | } 28 | } 29 | 30 | // Material 31 | @mixin input-material-variant($border, $color: $input-color, $focus-border: $border, $focus-color: $color, $placeholder-color: $color) { 32 | border-bottom-color: $border; 33 | color: $color; 34 | 35 | &:focus { 36 | border-bottom-color: $focus-border; 37 | color: $focus-color; 38 | } 39 | 40 | &::placeholder { 41 | color: $placeholder-color; 42 | } 43 | } 44 | 45 | // Dark 46 | @mixin input-dark-variant($background, $color: $input-dark-color, $focus-background: $background, $focus-color: $color) { 47 | background-color: $background; 48 | border-color: $background; 49 | color: $color; 50 | 51 | &:focus { 52 | background-color: $focus-background; 53 | border-color: $focus-background; 54 | color: $focus-color; 55 | } 56 | 57 | &::placeholder { 58 | color: $color; 59 | } 60 | 61 | &:disabled, 62 | &[readonly] { 63 | background-color: darken($color, 15%); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # https://github.com/github/gitignore/blob/master/Global/Linux.gitignore 2 | *~ 3 | 4 | # temporary files which can be created if a process still has a handle open of a deleted file 5 | .fuse_hidden* 6 | 7 | # KDE directory preferences 8 | .directory 9 | 10 | # Linux trash folder which might appear on any partition or disk 11 | .Trash-* 12 | 13 | # .nfs files are created when an open file is removed but is still being accessed 14 | .nfs* 15 | 16 | # https://github.com/github/gitignore/blob/master/Global/Vim.gitignore 17 | [._]*.s[a-w][a-z] 18 | [._]s[a-w][a-z] 19 | *.un~ 20 | Session.vim 21 | .netrwhist 22 | *~ 23 | 24 | # https://github.com/github/gitignore/blob/master/Node.gitignore 25 | # Logs 26 | logs 27 | *.log 28 | npm-debug.log* 29 | 30 | # Runtime data 31 | pids 32 | *.pid 33 | *.seed 34 | 35 | # Directory for instrumented libs generated by jscoverage/JSCover 36 | lib-cov 37 | 38 | # Coverage directory used by tools like istanbul 39 | coverage 40 | 41 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 42 | .grunt 43 | 44 | # node-waf configuration 45 | .lock-wscript 46 | 47 | # Compiled binary addons (http://nodejs.org/api/addons.html) 48 | build/Release 49 | 50 | # Dependency directory 51 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 52 | node_modules 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | # https://github.com/github/gitignore/blob/master/Sass.gitignore 61 | .sass-cache/ 62 | *.css.map 63 | *.sass.map 64 | *.scss.map 65 | 66 | # https://github.com/tarkhov/postboot/issues/17 67 | docs 68 | src/docs/ 69 | logo.xcf 70 | -------------------------------------------------------------------------------- /src/docs/pug/card/size.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('card', 'size') 5 | 6 | block meta_description 7 | +example_meta_description('card', 'size') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('card') 11 | 12 | block example_description 13 | +example_description('card', 'size') 14 | 15 | block example_result 16 | .row 17 | - for(var i = 1; i <= 5; i++) 18 | div(class='col-md-' + (i < 3 ? 6 : 12)) 19 | .card.mb-gutter(class="card-" + i) 20 | .card-header 21 | ul.nav.nav-tabs.card-header-tabs 22 | li.nav-item: a.nav-link.active(href="#") Active 23 | li.nav-item: a.nav-link(href="#") Link 24 | li.nav-item: a.nav-link.disabled.d-sm-block.d-none(href="#") Disabled 25 | .card-body 26 | h4.card-title(class="fs-" + (i + 2)) Example title 27 | p.card-text Example text 28 | .card-footer 29 | ul.nav.nav-pills.card-footer-pills 30 | li.nav-item: a.nav-link.active(href="#") Active 31 | li.nav-item: a.nav-link(href="#") Link 32 | li.nav-item: a.nav-link.disabled.d-sm-block.d-none(href="#") Disabled 33 | 34 | block example_code 35 | :encode-pug 36 | | 37 | - for(var i = 1; i <= 5; i++) 38 | .card(class="card-" + i) 39 | 40 | block responsive_description 41 | h2.h3.fw-400 Responsive card sizes 42 | 43 | block responsive_code 44 | :encode-pug 45 | | 46 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 47 | - for(var size = 1; size <= 5; size++) 48 | .card(class="card-" + breakpoint + '-' + size) 49 | ="\n" 50 | -------------------------------------------------------------------------------- /src/docs/pug/flex/align-content.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('flex', 'align_content') 5 | 6 | block meta_description 7 | +example_meta_description('flex', 'align_content') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('flex') 11 | 12 | block example_description 13 | +example_description('flex', 'align_content') 14 | 15 | block example_result 16 | each align in ['between', 'around', 'start', 'end', 'center', 'stretch'] 17 | .mb-3.bg-dark.p-3.d-none(class='flex-align-md-' + align style="height: 250px") 18 | - for(var i = 1; i <= 16; i++) 19 | .p-2.mr-1.mb-2.bg-primary.text-white= 'Item ' + i 20 | .mb-3.bg-dark.p-3.d-md-none.d-flex.flex-wrap(class='align-content-' + align style="height: 200px") 21 | - for(var i = 1; i <= 8; i++) 22 | .p-2.mr-1.mb-2.bg-primary.text-white= 'Item ' + i 23 | 24 | block example_code 25 | :encode-pug 26 | | 27 | .flex-align-between 28 | .flex-align-around 29 | .flex-align-start 30 | .flex-align-end 31 | .flex-align-center 32 | .flex-align-stretch 33 | 34 | block responsive_description 35 | h2.h3.fw-400 Responsive flex align content 36 | 37 | block responsive_code 38 | :encode-pug 39 | | 40 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 41 | div(class='flex-align-' + breakpoint + '-between') 42 | div(class='flex-align-' + breakpoint + '-around') 43 | div(class='flex-align-' + breakpoint + '-start') 44 | div(class='flex-align-' + breakpoint + '-end') 45 | div(class='flex-align-' + breakpoint + '-center') 46 | div(class='flex-align-' + breakpoint + '-stretch') 47 | ="\n" 48 | -------------------------------------------------------------------------------- /src/docs/pug/navbar/padding-vertical.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('navbar', 'padding_vertical') 5 | 6 | block meta_description 7 | +example_meta_description('navbar', 'padding_vertical') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('navbar') 11 | 12 | block example_description 13 | +example_description('navbar', 'padding_vertical') 14 | 15 | block example_result 16 | .bg-state-success.d-inline-block.border.border-success 17 | .d-flex 18 | .flex-y-center 19 | .fs-2.text-state-success.px-3 20 | div 21 | .flex-x-center 22 | .fs-2.text-state-success.py-3 3.5rem 23 | .bg-state-primary.text-state-primary.d-inline-block.p-2.border.border-primary Element 24 | .flex-x-center 25 | .fs-2.text-state-success.py-3 3.5rem 26 | .flex-y-center 27 | .fs-2.text-state-success.px-3 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | .py-navbar 33 | ="\n" 34 | - for(var size = 1; size <= 5; size++) 35 | div(class="py-navbar-" + size) 36 | div(class="pt-navbar-" + size) 37 | div(class="pb-navbar-" + size) 38 | ="\n" 39 | 40 | block responsive_description 41 | h2.h3.fw-400 Responsive navbar sizes 42 | 43 | block responsive_code 44 | :encode-pug 45 | | 46 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 47 | div(class="py-navbar-" + breakpoint) 48 | div(class="pt-navbar-" + breakpoint) 49 | div(class="pb-navbar-" + breakpoint) 50 | ="\n" 51 | - for(var size = 1; size <= 5; size++) 52 | div(class="py-navbar-" + breakpoint + "-" + size) 53 | div(class="pt-navbar-" + breakpoint + "-" + size) 54 | div(class="pb-navbar-" + breakpoint + "-" + size) 55 | ="\n" 56 | ="\n" 57 | -------------------------------------------------------------------------------- /src/js/scrollspy-tree.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | var DATA_KEY = 'bs.scrollspy'; 3 | var EVENT_KEY = '.' + DATA_KEY; 4 | 5 | var Event = { 6 | ACTIVATE : 'activate' + EVENT_KEY 7 | }; 8 | 9 | var ClassName = { 10 | DROPDOWN_ITEM : 'dropdown-item', 11 | NAV_LINK : 'nav-link', 12 | SHOW : 'show' 13 | }; 14 | 15 | var Selector = { 16 | DATA_SPY : '[data-spy="scroll"]', 17 | DROPDOWN_MENU : '.dropdown-menu', 18 | DROPDOWNS : '.dropup, .dropright, .dropdown, .dropleft', 19 | NAV_ITEM : '.nav-item', 20 | SHOW : '.show' 21 | }; 22 | 23 | $(window).on(Event.ACTIVATE, function (event, obj) { 24 | var url = obj.relatedTarget; 25 | var selector = '[href="' + url + '"], [data-target="' + url + '"]'; 26 | 27 | var $spys = $(Selector.DATA_SPY); 28 | if (!$spys.length) { 29 | return true; 30 | } 31 | 32 | $spys.each(function () { 33 | var target = $(this).attr('data-target'); 34 | if (!target) { 35 | return true; 36 | } 37 | 38 | var $target = $(target); 39 | if (!$target.length) { 40 | return true; 41 | } 42 | 43 | var $link = $target.find(selector); 44 | if (!$link.length) { 45 | return true; 46 | } 47 | 48 | var $show = $target.find(Selector.SHOW); 49 | if ($show.length) { 50 | $show.removeClass(ClassName.SHOW); 51 | } 52 | 53 | var item = null; 54 | if ($link.hasClass(ClassName.DROPDOWN_ITEM)) { 55 | item = Selector.DROPDOWN_MENU + ',' + Selector.DROPDOWNS; 56 | } else if ($link.hasClass(ClassName.NAV_LINK)) { 57 | item = Selector.NAV_ITEM; 58 | } 59 | 60 | if (item !== null) { 61 | $link.parentsUntil(target, item).addClass(ClassName.SHOW); 62 | } 63 | }); 64 | }); 65 | })(jQuery); 66 | -------------------------------------------------------------------------------- /src/scss/_text.scss: -------------------------------------------------------------------------------- 1 | // Custom 2 | @each $color, $value in map-remove($custom-colors, "white") { 3 | .text-#{$color} { 4 | color: $value !important; 5 | } 6 | } 7 | 8 | // Opacity 9 | @if $enable-opacity { 10 | @for $alpha from 1 through 9 { 11 | @each $color, $value in $theme-colors { 12 | .text-#{$color}-#{($alpha * 10)} { 13 | color: rgba($value, ($alpha * .1)) !important; 14 | } 15 | } 16 | @each $color, $value in $custom-colors { 17 | @if $color not in 'white', 'black' and $alpha != 5 { 18 | .text-#{$color}-#{($alpha * 10)} { 19 | color: rgba($value, ($alpha * .1)) !important; 20 | } 21 | } 22 | } 23 | } 24 | } 25 | 26 | // Hover 27 | @each $color, $value in $theme-colors { 28 | .text-hover-#{$color} { 29 | @include hover-focus { 30 | color: $value !important; 31 | } 32 | } 33 | 34 | @if $enable-opacity { 35 | @for $alpha from 1 through 9 { 36 | .text-hover-#{$color}-#{($alpha * 10)} { 37 | @include hover-focus { 38 | color: rgba($value, ($alpha * .1)) !important; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | @each $color, $value in $custom-colors { 45 | .text-hover-#{$color} { 46 | @include hover-focus { 47 | color: $value !important; 48 | } 49 | } 50 | 51 | @if $enable-opacity { 52 | @for $alpha from 1 through 9 { 53 | .text-hover-#{$color}-#{($alpha * 10)} { 54 | @include hover-focus { 55 | color: rgba($value, ($alpha * .1)) !important; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | // States 63 | @each $color, $value in $theme-colors { 64 | .text-state-#{$color} { 65 | color: color-level($value, $text-state-level) !important; 66 | } 67 | } 68 | @each $color, $value in map-remove($custom-colors, "black", "white") { 69 | .text-state-#{$color} { 70 | color: color-level($value, $text-state-level) !important; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/scss/_list-group.scss: -------------------------------------------------------------------------------- 1 | // Striped 2 | .list-group-striped { 3 | .list-group-item { 4 | &:nth-child(even) { 5 | background-color: $list-group-striped-bg; 6 | } 7 | } 8 | } 9 | 10 | // Sizes 11 | @each $breakpoint in map-keys($grid-breakpoints) { 12 | @include media-breakpoint-up($breakpoint) { 13 | $infix: breakpoint-infix($breakpoint); 14 | 15 | @each $size, $list-group in $list-group-sizes { 16 | .list-group#{$infix}-#{$size} { 17 | @include list-group-size(map-get($list-group, 'padding-y'), map-get($list-group, 'padding-x'), map-get($list-group, 'font-size')); 18 | } 19 | .list-group-y#{$infix}-#{$size} { 20 | @include list-group-size-y(map-get($list-group, 'padding-y')); 21 | } 22 | .list-group-x#{$infix}-#{$size} { 23 | @include list-group-size-x(map-get($list-group, 'padding-x')); 24 | } 25 | .list-group-item#{$infix}-#{$size} { 26 | @include list-group-item-size(map-get($list-group, 'padding-y'), map-get($list-group, 'padding-x'), map-get($list-group, 'font-size')); 27 | } 28 | .list-group-item-y#{$infix}-#{$size} { 29 | @include list-group-item-size-y(map-get($list-group, 'padding-y')); 30 | } 31 | .list-group-item-x#{$infix}-#{$size} { 32 | @include list-group-item-size-x(map-get($list-group, 'padding-x')); 33 | } 34 | } 35 | } 36 | } 37 | 38 | // Horizontal flush 39 | .list-group-horizontal-flush { 40 | .list-group-item { 41 | border-top: 0; 42 | border-bottom: 0; 43 | @include border-radius(0); 44 | 45 | &:first-child { 46 | border-left: 0; 47 | } 48 | 49 | &:last-child { 50 | margin-right: -$list-group-border-width; 51 | } 52 | } 53 | 54 | &:first-child { 55 | .list-group-item:first-child { 56 | border-left: 0; 57 | } 58 | } 59 | 60 | &:last-child { 61 | .list-group-item:last-child { 62 | margin-right: 0; 63 | border-right: 0; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/docs/pug/nav/tree.pug: -------------------------------------------------------------------------------- 1 | extends ../example.pug 2 | 3 | block head_title 4 | +example_head_title('nav', 'tree') 5 | 6 | block meta_description 7 | +example_meta_description('nav', 'tree') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('nav') 11 | 12 | block example_description 13 | +example_description('nav', 'tree') 14 | 15 | block example_result 16 | ul.nav.nav-tree.nav-x-0.nav-y-sm.flex-column 17 | li.nav-item 18 | a.nav-link(href="#") Item 1 19 | li.nav-item.show 20 | a.nav-link(href="#") Item 2 21 | ul.nav.nav-tree.nav-x-0.nav-y-sm.font-size-2.pl-3.flex-column 22 | li.nav-item 23 | a.nav-link(href="#") Sub-item 1 24 | li.nav-item.show 25 | a.nav-link.active(href="#") Sub-item 2 26 | ul.nav.nav-tree.nav-x-0.nav-y-sm.font-size-1.pl-3.flex-column 27 | li.nav-item 28 | a.nav-link(href="#") Sub-item 1 29 | li.nav-item 30 | a.nav-link.active(href="#") Sub-item 2 31 | li.nav-item 32 | a.nav-link(href="#") Sub-item 3 33 | li.nav-item 34 | a.nav-link(href="#") Sub-item 3 35 | li.nav-item 36 | a.nav-link(href="#") Item 3 37 | 38 | block example_code 39 | :encode-pug 40 | | 41 | ul.nav.nav-tree.nav-x-0.nav-y-sm.flex-column 42 | li.nav-item 43 | a.nav-link(href="#") Item 1 44 | li.nav-item.show 45 | a.nav-link(href="#") Item 2 46 | ul.nav.nav-tree.nav-x-0.nav-y-sm.font-size-2.pl-3.flex-column 47 | li.nav-item 48 | a.nav-link(href="#") Sub-item 1 49 | li.nav-item.show 50 | a.nav-link.active(href="#") Sub-item 2 51 | ul.nav.nav-tree.nav-x-0.nav-y-sm.font-size-1.pl-3.flex-column 52 | li.nav-item 53 | a.nav-link(href="#") Sub-item 1 54 | li.nav-item 55 | a.nav-link.active(href="#") Sub-item 2 56 | li.nav-item 57 | a.nav-link(href="#") Sub-item 3 58 | li.nav-item 59 | a.nav-link(href="#") Sub-item 3 60 | li.nav-item 61 | a.nav-link(href="#") Item 3 62 | -------------------------------------------------------------------------------- /src/docs/pug/position/spacing.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('position', 'spacing') 5 | 6 | block meta_description 7 | +example_meta_description('position', 'spacing') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('position') 11 | 12 | block example_description 13 | +example_description('position', 'spacing') 14 | 15 | block example_result 16 | .bg-state-warning.d-inline-block.border.border-warning 17 | .d-flex 18 | .flex-y-center 19 | .fs-2.text-state-warning.px-2.px-sm-3 0 20 | div 21 | .flex-x-center 22 | .fs-2.text-state-warning.py-2.py-sm-3 0 23 | .bg-state-success.d-inline-block.border.border-success 24 | .d-flex 25 | .flex-y-center 26 | .fs-2.text-state-success.px-2.px-sm-3 auto 27 | div 28 | .flex-x-center 29 | .fs-2.text-state-success.py-2.py-sm-3 auto 30 | .bg-state-primary.text-state-primary.d-inline-block.p-2.border.border-primary 50% 31 | .flex-x-center 32 | .fs-2.text-state-success.py-2.py-sm-3 auto 33 | .flex-y-center 34 | .fs-2.text-state-success.px-2.px-sm-3 auto 35 | .flex-x-center 36 | .fs-2.text-state-warning.py-2.py-sm-3 0 37 | .flex-y-center 38 | .fs-2.text-state-warning.px-2.px-sm-3 0 39 | 40 | block example_code 41 | :encode-pug 42 | | 43 | each size in ['0', '50', 'auto'] 44 | div(class='top-' + size) 45 | div(class='right-' + size) 46 | div(class='bottom-' + size) 47 | div(class='left-' + size) 48 | ="\n" 49 | 50 | block responsive_description 51 | h2.h3.fw-400 Responsive position sizes 52 | 53 | block responsive_code 54 | :encode-pug 55 | | 56 | each size in ['0', '50', 'auto'] 57 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 58 | div(class='top-' + breakpoint + '-' + size) 59 | div(class='right-' + breakpoint + '-' + size) 60 | div(class='bottom-' + breakpoint + '-' + size) 61 | div(class='left-' + breakpoint + '-' + size) 62 | ="\n" 63 | -------------------------------------------------------------------------------- /src/docs/pug/flex/align.pug: -------------------------------------------------------------------------------- 1 | extends ../example-responsive.pug 2 | 3 | block head_title 4 | +example_head_title('flex', 'align') 5 | 6 | block meta_description 7 | +example_meta_description('flex', 'align') 8 | 9 | block breadcrumb 10 | +example_breadcrumb('flex') 11 | 12 | block example_description 13 | +example_description('flex', 'align') 14 | 15 | block example_result 16 | each align in ['center', 'y-center'] 17 | .mb-3.bg-dark.p-3(class='flex-' + align style="height: 150px") 18 | - for(var i = 1; i <= 3; i++) 19 | .p-2.mr-1.bg-primary.text-white= 'Item ' + i 20 | each align in ['x-center', 'left', 'right', 'between', 'around'] 21 | .mb-3.bg-dark.p-3(class='flex-' + align) 22 | - for(var i = 1; i <= 3; i++) 23 | .p-2.mr-1.bg-primary.text-white= 'Item ' + i 24 | each align in ['top', 'bottom', 'baseline', 'stretch'] 25 | .mb-3.bg-dark.p-3(class='flex-' + align style="height: 150px") 26 | - for(var i = 1; i <= 3; i++) 27 | .p-2.mr-1.bg-primary.text-white= 'Item ' + i 28 | 29 | block example_code 30 | :encode-pug 31 | | 32 | .flex-none 33 | .flex-center 34 | .flex-y-center 35 | .flex-x-center 36 | .flex-left 37 | .flex-right 38 | .flex-between 39 | .flex-around 40 | .flex-top 41 | .flex-bottom 42 | .flex-baseline 43 | .flex-stretch 44 | 45 | block responsive_description 46 | h2.h3.fw-400 Responsive flex align 47 | 48 | block responsive_code 49 | :encode-pug 50 | | 51 | each breakpoint in ['sm', 'md', 'lg', 'xl'] 52 | div(class='flex-' + breakpoint + '-none') 53 | div(class='flex-' + breakpoint + '-center') 54 | div(class='flex-y-' + breakpoint + '-center') 55 | div(class='flex-x-' + breakpoint + '-center') 56 | div(class='flex-' + breakpoint + '-left') 57 | div(class='flex-' + breakpoint + '-right') 58 | div(class='flex-' + breakpoint + '-between') 59 | div(class='flex-' + breakpoint + '-around') 60 | div(class='flex-' + breakpoint + '-top') 61 | div(class='flex-' + breakpoint + '-bottom') 62 | div(class='flex-' + breakpoint + '-baseline') 63 | div(class='flex-' + breakpoint + '-stretch') 64 | ="\n" 65 | --------------------------------------------------------------------------------