├── .gitignore ├── theme ├── index.js └── _bootstrap.scss ├── core ├── index.js └── _core.scss ├── bootstrap ├── utilities │ ├── _clearfix.scss │ ├── _screenreaders.scss │ ├── _display.scss │ ├── _align.scss │ ├── _float.scss │ ├── _background.scss │ ├── _borders.scss │ ├── _visibility.scss │ ├── _spacing.scss │ ├── _flex.scss │ └── _text.scss ├── mixins │ ├── _clearfix.scss │ ├── _float.scss │ ├── _size.scss │ ├── _text-hide.scss │ ├── _lists.scss │ ├── _text-truncate.scss │ ├── _tag.scss │ ├── _resize.scss │ ├── _nav-divider.scss │ ├── _reset-filter.scss │ ├── _text-emphasis.scss │ ├── _background-variant.scss │ ├── _alert.scss │ ├── _tab-focus.scss │ ├── _navbar-align.scss │ ├── _progress.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _list-group.scss │ ├── _table-row.scss │ ├── _screen-reader.scss │ ├── _border-radius.scss │ ├── _cards.scss │ ├── _hover.scss │ ├── _image.scss │ ├── _grid-framework.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _buttons.scss │ ├── _breakpoints.scss │ └── _grid.scss ├── _custom.scss ├── bootstrap-flex.scss ├── bootstrap-reboot.scss ├── _utilities.scss ├── bootstrap-grid.scss ├── _jumbotron.scss ├── _animation.scss ├── _responsive-embed.scss ├── _close.scss ├── _grid.scss ├── bootstrap.scss ├── _breadcrumb.scss ├── _images.scss ├── _code.scss ├── _media.scss ├── _mixins.scss ├── _alert.scss ├── _tags.scss ├── _pagination.scss ├── _tooltip.scss ├── _print.scss ├── _type.scss ├── _nav.scss ├── _modal.scss ├── _list-group.scss ├── _progress.scss ├── _buttons.scss ├── _tables.scss ├── _popover.scss ├── _dropdown.scss ├── _input-group.scss ├── _button-group.scss ├── _carousel.scss ├── _navbar.scss ├── _card.scss ├── _custom-forms.scss ├── _normalize.scss ├── _forms.scss ├── _reboot.scss └── .scss-lint.yml ├── components ├── pager │ └── index.js ├── tags │ └── index.js ├── nav │ └── index.js ├── breadcrumb │ └── index.js ├── buttons │ └── index.js ├── images │ └── index.js ├── jumbotron │ └── index.js ├── progress │ └── index.js ├── tables │ └── index.js ├── media │ └── index.js ├── alert │ └── index.js ├── dropdown │ └── index.js ├── modal │ └── index.js ├── carousel │ └── index.js ├── list-group │ └── index.js ├── popover │ └── index.js ├── tooltip │ └── index.js ├── button-group │ └── index.js ├── forms │ └── index.js ├── custom-forms │ └── index.js ├── pagination │ └── index.js ├── navbar │ └── index.js ├── card │ └── index.js ├── components.scss └── index.js ├── assets └── web-components-concept.png ├── package.json ├── index.js ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /theme/index.js: -------------------------------------------------------------------------------- 1 | import './_bootstrap.scss' 2 | -------------------------------------------------------------------------------- /core/index.js: -------------------------------------------------------------------------------- 1 | // import core stuff 2 | import './_core.scss' 3 | -------------------------------------------------------------------------------- /bootstrap/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /components/pager/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_pager.scss' -------------------------------------------------------------------------------- /components/tags/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_tags.scss' -------------------------------------------------------------------------------- /components/nav/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_nav.scss' 3 | -------------------------------------------------------------------------------- /components/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_breadcrumb.scss' -------------------------------------------------------------------------------- /components/buttons/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_buttons.scss' 3 | -------------------------------------------------------------------------------- /components/images/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_images.scss' 3 | -------------------------------------------------------------------------------- /components/jumbotron/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_jumbotron.scss' -------------------------------------------------------------------------------- /components/progress/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_progress.scss' -------------------------------------------------------------------------------- /components/tables/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_tables.scss' 3 | -------------------------------------------------------------------------------- /theme/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../bootstrap/_mixins.scss"; 2 | @import "../bootstrap/_variables.scss"; 3 | -------------------------------------------------------------------------------- /assets/web-components-concept.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kzima/vuestrap/HEAD/assets/web-components-concept.png -------------------------------------------------------------------------------- /components/media/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_media.scss' 3 | import '../../bootstrap/_images.scss' -------------------------------------------------------------------------------- /components/alert/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_alert.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | -------------------------------------------------------------------------------- /components/dropdown/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_dropdown.scss' 3 | import '../../bootstrap/_buttons.scss' -------------------------------------------------------------------------------- /components/modal/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_modal.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | -------------------------------------------------------------------------------- /components/carousel/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_images.scss' 3 | import '../../bootstrap/_carousel.scss' 4 | -------------------------------------------------------------------------------- /components/list-group/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_list-group.scss' 3 | import '../../bootstrap/_tags.scss' 4 | -------------------------------------------------------------------------------- /components/popover/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_popover.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | -------------------------------------------------------------------------------- /components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_tooltip.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | -------------------------------------------------------------------------------- /bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | content: ""; 4 | display: table; 5 | clear: both; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /bootstrap/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | @mixin float-left { 2 | float: left !important; 3 | } 4 | @mixin float-right { 5 | float: right !important; 6 | } 7 | -------------------------------------------------------------------------------- /bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | } 7 | -------------------------------------------------------------------------------- /components/button-group/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_button-group.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | -------------------------------------------------------------------------------- /bootstrap/_custom.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap overrides 2 | // 3 | // Copy variables from `_variables.scss` to this file to override default values 4 | // without modifying source files. 5 | -------------------------------------------------------------------------------- /components/forms/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_buttons.scss' 3 | import '../../bootstrap/_forms.scss' 4 | import '../../bootstrap/_custom-forms.scss' 5 | -------------------------------------------------------------------------------- /components/custom-forms/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_forms.scss' 3 | import '../../bootstrap/_custom-forms.scss' 4 | import '../../bootstrap/_buttons.scss' 5 | -------------------------------------------------------------------------------- /components/pagination/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_pagination.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | import '../../bootstrap/_button-group.scss' 5 | -------------------------------------------------------------------------------- /bootstrap/utilities/_screenreaders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Screenreaders 3 | // 4 | 5 | .sr-only { 6 | @include sr-only(); 7 | } 8 | 9 | .sr-only-focusable { 10 | @include sr-only-focusable(); 11 | } 12 | -------------------------------------------------------------------------------- /bootstrap/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | @mixin text-hide() { 3 | font: 0/0 a; 4 | color: transparent; 5 | text-shadow: none; 6 | background-color: transparent; 7 | border: 0; 8 | } 9 | -------------------------------------------------------------------------------- /components/navbar/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_navbar.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | import '../../bootstrap/_nav.scss' 5 | import '../../bootstrap/_forms.scss' 6 | -------------------------------------------------------------------------------- /components/card/index.js: -------------------------------------------------------------------------------- 1 | // import dependencies 2 | import '../../bootstrap/_card.scss' 3 | import '../../bootstrap/_buttons.scss' 4 | import '../../bootstrap/_images.scss' 5 | import '../../bootstrap/_list-group.scss' 6 | -------------------------------------------------------------------------------- /bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } -------------------------------------------------------------------------------- /bootstrap/bootstrap-flex.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap with Flexbox enabled 2 | // 3 | // Includes all the imports from the standard Bootstrap project, but enables 4 | // the flexbox variable. 5 | 6 | $enable-flex: true; 7 | 8 | @import "bootstrap"; 9 | -------------------------------------------------------------------------------- /bootstrap/mixins/_tag.scss: -------------------------------------------------------------------------------- 1 | // Tags 2 | 3 | @mixin tag-variant($color) { 4 | background-color: $color; 5 | 6 | &[href] { 7 | @include hover-focus { 8 | background-color: darken($color, 10%); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | resize: $direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /bootstrap/utilities/_display.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Display utilities 3 | // 4 | 5 | .d-block { 6 | display: block !important; 7 | } 8 | .d-inline-block { 9 | display: inline-block !important; 10 | } 11 | .d-inline { 12 | display: inline !important; 13 | } 14 | -------------------------------------------------------------------------------- /bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap Reboot only 2 | // 3 | // Includes only Normalize and our custom Reboot reset. 4 | 5 | @import "custom"; 6 | @import "variables"; 7 | @import "mixins/hover"; 8 | @import "mixins/tab-focus"; 9 | 10 | @import "normalize"; 11 | @import "reboot"; 12 | -------------------------------------------------------------------------------- /bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 1px; 7 | margin: ($spacer-y / 2) 0; 8 | overflow: hidden; 9 | background-color: $color; 10 | } 11 | -------------------------------------------------------------------------------- /bootstrap/mixins/_reset-filter.scss: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9. 5 | 6 | @mixin reset-filter() { 7 | filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; 8 | } 9 | -------------------------------------------------------------------------------- /bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | @mixin text-emphasis-variant($parent, $color) { 4 | #{$parent} { 5 | color: $color !important; 6 | } 7 | a#{$parent} { 8 | @include hover-focus { 9 | color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | @mixin bg-variant($parent, $color) { 4 | #{$parent} { 5 | background-color: $color !important; 6 | } 7 | a#{$parent} { 8 | @include hover-focus { 9 | background-color: darken($color, 10%) !important; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | @mixin alert-variant($background, $border, $body-color) { 4 | background-color: $background; 5 | border-color: $border; 6 | color: $body-color; 7 | 8 | hr { 9 | border-top-color: darken($border, 5%); 10 | } 11 | .alert-link { 12 | color: darken($body-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/align"; 2 | @import "utilities/background"; 3 | @import "utilities/borders"; 4 | @import "utilities/clearfix"; 5 | @import "utilities/display"; 6 | @import "utilities/flex"; 7 | @import "utilities/float"; 8 | @import "utilities/screenreaders"; 9 | @import "utilities/spacing"; 10 | @import "utilities/text"; 11 | @import "utilities/visibility"; 12 | -------------------------------------------------------------------------------- /bootstrap/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | .align-baseline { vertical-align: baseline !important; } // Browser default 2 | .align-top { vertical-align: top !important; } 3 | .align-middle { vertical-align: middle !important; } 4 | .align-bottom { vertical-align: bottom !important; } 5 | .align-text-bottom { vertical-align: text-bottom !important; } 6 | .align-text-top { vertical-align: text-top !important; } 7 | -------------------------------------------------------------------------------- /bootstrap/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | @each $breakpoint in map-keys($grid-breakpoints) { 2 | @include media-breakpoint-up($breakpoint) { 3 | .float-#{$breakpoint}-left { 4 | @include float-left(); 5 | } 6 | .float-#{$breakpoint}-right { 7 | @include float-right(); 8 | } 9 | .float-#{$breakpoint}-none { 10 | float: none !important; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /bootstrap/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | @mixin tab-focus() { 4 | // WebKit-specific. Other browsers will keep their default outline style. 5 | // (Initially tried to also force default via `outline: initial`, 6 | // but that seems to erroneously remove the outline in Firefox altogether.) 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /bootstrap/mixins/_navbar-align.scss: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | // @mixin navbar-vertical-align($element-height) { 7 | // margin-top: (($navbar-height - $element-height) / 2); 8 | // margin-bottom: (($navbar-height - $element-height) / 2); 9 | // } 10 | -------------------------------------------------------------------------------- /bootstrap/utilities/_background.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Contextual backgrounds 3 | // 4 | 5 | .bg-faded { 6 | background-color: $gray-lightest; 7 | } 8 | 9 | @include bg-variant('.bg-primary', $brand-primary); 10 | 11 | @include bg-variant('.bg-success', $brand-success); 12 | 13 | @include bg-variant('.bg-info', $brand-info); 14 | 15 | @include bg-variant('.bg-warning', $brand-warning); 16 | 17 | @include bg-variant('.bg-danger', $brand-danger); 18 | 19 | @include bg-variant('.bg-inverse', $brand-inverse); 20 | -------------------------------------------------------------------------------- /bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap Grid only 2 | // 3 | // Includes relevant variables and mixins for the regular (non-flexbox) grid 4 | // system, as well as the generated predefined classes (e.g., `.col-4-sm`). 5 | 6 | 7 | // 8 | // Variables 9 | // 10 | 11 | @import "custom"; 12 | @import "variables"; 13 | 14 | // 15 | // Grid mixins 16 | // 17 | 18 | @import "mixins/clearfix"; 19 | @import "mixins/breakpoints"; 20 | @import "mixins/grid-framework"; 21 | @import "mixins/grid"; 22 | 23 | @import "grid"; 24 | -------------------------------------------------------------------------------- /bootstrap/mixins/_progress.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | @mixin progress-variant($color) { 4 | &[value]::-webkit-progress-value { 5 | background-color: $color; 6 | } 7 | 8 | &[value]::-moz-progress-bar { 9 | background-color: $color; 10 | } 11 | 12 | // IE10+, Microsoft Edge 13 | &[value]::-ms-fill { 14 | background-color: $color; 15 | } 16 | 17 | // IE9 18 | @media screen and (min-width:0\0) { 19 | .progress-bar { 20 | background-color: $color; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | font-size: $font-size; 7 | } 8 | 9 | .page-item { 10 | &:first-child { 11 | .page-link { 12 | @include border-left-radius($border-radius); 13 | } 14 | } 15 | &:last-child { 16 | .page-link { 17 | @include border-right-radius($border-radius); 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding: $jumbotron-padding ($jumbotron-padding / 2); 3 | margin-bottom: $jumbotron-padding; 4 | background-color: $jumbotron-bg; 5 | @include border-radius($border-radius-lg); 6 | 7 | @include media-breakpoint-up(sm) { 8 | padding: ($jumbotron-padding * 2) $jumbotron-padding; 9 | } 10 | } 11 | 12 | .jumbotron-hr { 13 | border-top-color: darken($jumbotron-bg, 10%); 14 | } 15 | 16 | .jumbotron-fluid { 17 | padding-right: 0; 18 | padding-left: 0; 19 | @include border-radius(0); 20 | } 21 | -------------------------------------------------------------------------------- /bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or word-wrap. 4 | font-style: normal; 5 | font-weight: normal; 6 | letter-spacing: normal; 7 | line-break: auto; 8 | line-height: $line-height-base; 9 | text-align: left; // Fallback for where `start` is not supported 10 | text-align: start; 11 | text-decoration: none; 12 | text-shadow: none; 13 | text-transform: none; 14 | white-space: normal; 15 | word-break: normal; 16 | word-spacing: normal; 17 | } 18 | -------------------------------------------------------------------------------- /bootstrap/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Border-width 3 | // 4 | 5 | // TBD...? 6 | 7 | 8 | // 9 | // Border-radius 10 | // 11 | 12 | .rounded { 13 | @include border-radius($border-radius); 14 | } 15 | .rounded-top { 16 | @include border-top-radius($border-radius); 17 | } 18 | .rounded-right { 19 | @include border-right-radius($border-radius); 20 | } 21 | .rounded-bottom { 22 | @include border-bottom-radius($border-radius); 23 | } 24 | .rounded-left { 25 | @include border-left-radius($border-radius); 26 | } 27 | 28 | .rounded-circle { 29 | border-radius: 50%; 30 | } 31 | -------------------------------------------------------------------------------- /bootstrap/_animation.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | opacity: 0; 3 | transition: opacity .15s linear; 4 | 5 | &.in { 6 | opacity: 1; 7 | } 8 | } 9 | 10 | .collapse { 11 | display: none; 12 | &.in { 13 | display: block; 14 | } 15 | } 16 | 17 | tr { 18 | &.collapse.in { 19 | display: table-row; 20 | } 21 | } 22 | 23 | tbody { 24 | &.collapse.in { 25 | display: table-row-group; 26 | } 27 | } 28 | 29 | .collapsing { 30 | position: relative; 31 | height: 0; 32 | overflow: hidden; 33 | transition-timing-function: ease; 34 | transition-duration: .35s; 35 | transition-property: height; 36 | } 37 | -------------------------------------------------------------------------------- /core/_core.scss: -------------------------------------------------------------------------------- 1 | // import variables and mixins 2 | @import "../theme/bootstrap.scss"; 3 | 4 | // import normalize 5 | @import "../bootstrap/_normalize.scss"; 6 | @import "../bootstrap/_print.scss"; 7 | @import "../bootstrap/_reboot.scss"; 8 | 9 | // import utilities 10 | @import "../bootstrap/_animation.scss"; 11 | @import "../bootstrap/_close.scss"; 12 | @import "../bootstrap/_code.scss"; 13 | @import "../bootstrap/_input-group.scss"; 14 | @import "../bootstrap/_responsive-embed.scss"; 15 | @import "../bootstrap/_type.scss"; 16 | @import "../bootstrap/_utilities.scss"; 17 | 18 | // import grid 19 | @import "../bootstrap/_grid.scss"; 20 | -------------------------------------------------------------------------------- /bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | } 8 | 9 | a.list-group-item-#{$state}, 10 | button.list-group-item-#{$state} { 11 | color: $color; 12 | 13 | .list-group-item-heading { 14 | color: inherit; 15 | } 16 | 17 | @include hover-focus { 18 | color: $color; 19 | background-color: darken($background, 5%); 20 | } 21 | 22 | &.active { 23 | @include plain-hover-focus { 24 | color: #fff; 25 | background-color: $color; 26 | border-color: $color; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuestrap", 3 | "version": "1.0.5", 4 | "description": "Vuestrap Javascript wrapper for Bootstrap 4 components.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/kzima/vuestrap.git" 9 | }, 10 | "keywords": [ 11 | "bootstrap4", 12 | "vuestrap", 13 | "vue-components", 14 | "web-components" 15 | ], 16 | "author": { 17 | "name": "Kris Zima", 18 | "email": "kris@mosquito.ie", 19 | "url": "https://github.com/kzima" 20 | }, 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/kzima/vuestrap/issues" 24 | }, 25 | "devDependencies": { 26 | }, 27 | "homepage": "https://github.com/kzima/vuestrap#readme" 28 | } 29 | -------------------------------------------------------------------------------- /components/components.scss: -------------------------------------------------------------------------------- 1 | // Components 2 | @import "../bootstrap/mixins"; 3 | @import "../bootstrap/animation"; 4 | @import "../bootstrap/dropdown"; 5 | @import "../bootstrap/buttons"; 6 | @import "../bootstrap/button-group"; 7 | @import "../bootstrap/input-group"; 8 | @import "../bootstrap/custom-forms"; 9 | @import "../bootstrap/nav"; 10 | @import "../bootstrap/navbar"; 11 | @import "../bootstrap/card"; 12 | @import "../bootstrap/breadcrumb"; 13 | @import "../bootstrap/pagination"; 14 | @import "../bootstrap/tags"; 15 | @import "../bootstrap/jumbotron"; 16 | @import "../bootstrap/alert"; 17 | @import "../bootstrap/progress"; 18 | @import "../bootstrap/media"; 19 | @import "../bootstrap/list-group"; 20 | @import "../bootstrap/responsive-embed"; 21 | @import "../bootstrap/close"; -------------------------------------------------------------------------------- /bootstrap/_responsive-embed.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .embed-responsive { 4 | position: relative; 5 | display: block; 6 | height: 0; 7 | padding: 0; 8 | overflow: hidden; 9 | 10 | .embed-responsive-item, 11 | iframe, 12 | embed, 13 | object, 14 | video { 15 | position: absolute; 16 | top: 0; 17 | bottom: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | border: 0; 22 | } 23 | } 24 | 25 | .embed-responsive-21by9 { 26 | padding-bottom: percentage(9 / 21); 27 | } 28 | 29 | .embed-responsive-16by9 { 30 | padding-bottom: percentage(9 / 16); 31 | } 32 | 33 | .embed-responsive-4by3 { 34 | padding-bottom: percentage(3 / 4); 35 | } 36 | 37 | .embed-responsive-1by1 { 38 | padding-bottom: percentage(1 / 1); 39 | } 40 | -------------------------------------------------------------------------------- /bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table-#{$state} { 7 | &, 8 | > th, 9 | > td { 10 | background-color: $background; 11 | } 12 | } 13 | 14 | // Hover states for `.table-hover` 15 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 16 | .table-hover { 17 | $hover-background: darken($background, 5%); 18 | 19 | .table-#{$state} { 20 | @include hover { 21 | background-color: $hover-background; 22 | 23 | > td, 24 | > th { 25 | background-color: $hover-background; 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import './core' 2 | import './components/alert' 3 | import './components/breadcrumb' 4 | import './components/button-group' 5 | import './components/buttons' 6 | import './components/card' 7 | import './components/carousel' 8 | import './components/custom-forms' 9 | import './components/dropdown' 10 | import './components/forms' 11 | import './components/images' 12 | import './components/jumbotron' 13 | import './components/labels' 14 | import './components/list-group' 15 | import './components/media' 16 | import './components/modal' 17 | import './components/nav' 18 | import './components/navbar' 19 | import './components/pager' 20 | import './components/pagination' 21 | import './components/popover' 22 | import './components/progress' 23 | import './components/tables' 24 | import './components/tooltip' -------------------------------------------------------------------------------- /bootstrap/mixins/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Only display content to screen readers 2 | // 3 | // See: http://a11yproject.com/posts/how-to-hide-content 4 | 5 | @mixin sr-only { 6 | position: absolute; 7 | width: 1px; 8 | height: 1px; 9 | padding: 0; 10 | margin: -1px; 11 | overflow: hidden; 12 | clip: rect(0,0,0,0); 13 | border: 0; 14 | } 15 | 16 | // Use in conjunction with .sr-only to only display content when it's focused. 17 | // 18 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 19 | // 20 | // Credit: HTML5 Boilerplate 21 | 22 | @mixin sr-only-focusable { 23 | &:active, 24 | &:focus { 25 | position: static; 26 | width: auto; 27 | height: auto; 28 | margin: 0; 29 | overflow: visible; 30 | clip: auto; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | .close { 2 | float: right; 3 | font-size: ($font-size-base * 1.5); 4 | font-weight: $close-font-weight; 5 | line-height: 1; 6 | color: $close-color; 7 | text-shadow: $close-text-shadow; 8 | opacity: .2; 9 | 10 | @include hover-focus { 11 | color: $close-color; 12 | text-decoration: none; 13 | cursor: pointer; 14 | opacity: .5; 15 | } 16 | } 17 | 18 | // Additional properties for button version 19 | // iOS requires the button element instead of an anchor tag. 20 | // If you want the anchor version, it requires `href="#"`. 21 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 22 | 23 | // scss-lint:disable QualifyingElement 24 | button.close { 25 | padding: 0; 26 | cursor: pointer; 27 | background: transparent; 28 | border: 0; 29 | -webkit-appearance: none; 30 | } 31 | // scss-lint:enable QualifyingElement 32 | -------------------------------------------------------------------------------- /bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-grid-classes { 6 | .container { 7 | @include make-container(); 8 | @include make-container-max-widths(); 9 | } 10 | } 11 | 12 | // Fluid container 13 | // 14 | // Utilizes the mixin meant for fixed width containers, but without any defined 15 | // width for fluid, full width layouts. 16 | 17 | @if $enable-grid-classes { 18 | .container-fluid { 19 | @include make-container(); 20 | } 21 | } 22 | 23 | // Row 24 | // 25 | // Rows contain and clear the floats of your columns. 26 | 27 | @if $enable-grid-classes { 28 | .row { 29 | @include make-row(); 30 | } 31 | } 32 | 33 | // Columns 34 | // 35 | // Common styles for small and large grid columns 36 | 37 | @if $enable-grid-classes { 38 | @include make-grid-columns(); 39 | } 40 | -------------------------------------------------------------------------------- /bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-radius($radius: $border-radius) { 4 | @if $enable-rounded { 5 | border-radius: $radius; 6 | } 7 | } 8 | 9 | @mixin border-top-radius($radius) { 10 | @if $enable-rounded { 11 | border-top-right-radius: $radius; 12 | border-top-left-radius: $radius; 13 | } 14 | } 15 | 16 | @mixin border-right-radius($radius) { 17 | @if $enable-rounded { 18 | border-bottom-right-radius: $radius; 19 | border-top-right-radius: $radius; 20 | } 21 | } 22 | 23 | @mixin border-bottom-radius($radius) { 24 | @if $enable-rounded { 25 | border-bottom-right-radius: $radius; 26 | border-bottom-left-radius: $radius; 27 | } 28 | } 29 | 30 | @mixin border-left-radius($radius) { 31 | @if $enable-rounded { 32 | border-bottom-left-radius: $radius; 33 | border-top-left-radius: $radius; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /bootstrap/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | // Card variants 2 | 3 | @mixin card-variant($background, $border) { 4 | background-color: $background; 5 | border-color: $border; 6 | 7 | .card-header, 8 | .card-footer { 9 | background-color: transparent; 10 | } 11 | } 12 | 13 | @mixin card-outline-variant($color) { 14 | background-color: transparent; 15 | border-color: $color; 16 | } 17 | 18 | // 19 | // Inverse text within a card for use with dark backgrounds 20 | // 21 | 22 | @mixin card-inverse { 23 | .card-header, 24 | .card-footer { 25 | border-color: rgba(255,255,255,.2); 26 | } 27 | .card-header, 28 | .card-footer, 29 | .card-title, 30 | .card-blockquote { 31 | color: #fff; 32 | } 33 | .card-link, 34 | .card-text, 35 | .card-subtitle, 36 | .card-blockquote .blockquote-footer { 37 | color: rgba(255,255,255,.65); 38 | } 39 | .card-link { 40 | @include hover-focus { 41 | color: $card-link-hover-color; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /bootstrap/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visibility utilities 3 | // 4 | 5 | .invisible { 6 | visibility: hidden !important; 7 | } 8 | 9 | // Responsive visibility utilities 10 | 11 | @each $bp in map-keys($grid-breakpoints) { 12 | .hidden-#{$bp}-up { 13 | @include media-breakpoint-up($bp) { 14 | display: none !important; 15 | } 16 | } 17 | .hidden-#{$bp}-down { 18 | @include media-breakpoint-down($bp) { 19 | display: none !important; 20 | } 21 | } 22 | } 23 | 24 | 25 | // Print utilities 26 | // 27 | // Media queries are placed on the inside to be mixin-friendly. 28 | 29 | .visible-print-block { 30 | display: none !important; 31 | 32 | @media print { 33 | display: block !important; 34 | } 35 | } 36 | .visible-print-inline { 37 | display: none !important; 38 | 39 | @media print { 40 | display: inline !important; 41 | } 42 | } 43 | .visible-print-inline-block { 44 | display: none !important; 45 | 46 | @media print { 47 | display: inline-block !important; 48 | } 49 | } 50 | 51 | .hidden-print { 52 | @media print { 53 | display: none !important; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Kris Zima 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 | 23 | -------------------------------------------------------------------------------- /bootstrap/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | @mixin hover { 2 | // TODO: re-enable along with mq4-hover-shim 3 | // @if $enable-hover-media-query { 4 | // // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover 5 | // // Currently shimmed by https://github.com/twbs/mq4-hover-shim 6 | // @media (hover: hover) { 7 | // &:hover { @content } 8 | // } 9 | // } 10 | // @else { 11 | &:hover { @content } 12 | // } 13 | } 14 | 15 | @mixin hover-focus { 16 | @if $enable-hover-media-query { 17 | &:focus { @content } 18 | @include hover { @content } 19 | } 20 | @else { 21 | &:focus, 22 | &:hover { 23 | @content 24 | } 25 | } 26 | } 27 | 28 | @mixin plain-hover-focus { 29 | @if $enable-hover-media-query { 30 | &, 31 | &:focus { 32 | @content 33 | } 34 | @include hover { @content } 35 | } 36 | @else { 37 | &, 38 | &:focus, 39 | &:hover { 40 | @content 41 | } 42 | } 43 | } 44 | 45 | @mixin hover-focus-active { 46 | @if $enable-hover-media-query { 47 | &:focus, 48 | &:active { 49 | @content 50 | } 51 | @include hover { @content } 52 | } 53 | @else { 54 | &:focus, 55 | &:active, 56 | &:hover { 57 | @content 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | 18 | 19 | // Retina image 20 | // 21 | // Short retina mixin for setting background-image and -size. 22 | 23 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 24 | background-image: url($file-1x); 25 | 26 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, 27 | // but doesn't convert dppx=>dpi. 28 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. 29 | // Compatibility info: http://caniuse.com/#feat=css-media-resolution 30 | @media 31 | only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx 32 | only screen and (min-resolution: 2dppx) { // Standardized 33 | background-image: url($file-2x); 34 | background-size: $width-1x $height-1x; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /bootstrap/bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com) 3 | * Copyright 2011-2016 The Bootstrap Authors 4 | * Copyright 2011-2016 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | 8 | // Core variables and mixins 9 | @import "custom"; 10 | @import "variables"; 11 | @import "mixins"; 12 | 13 | // Reset and dependencies 14 | @import "normalize"; 15 | @import "print"; 16 | 17 | // Core CSS 18 | @import "reboot"; 19 | @import "type"; 20 | @import "images"; 21 | @import "code"; 22 | @import "grid"; 23 | @import "tables"; 24 | @import "forms"; 25 | @import "buttons"; 26 | 27 | // Components 28 | @import "animation"; 29 | @import "dropdown"; 30 | @import "button-group"; 31 | @import "input-group"; 32 | @import "custom-forms"; 33 | @import "nav"; 34 | @import "navbar"; 35 | @import "card"; 36 | @import "breadcrumb"; 37 | @import "pagination"; 38 | @import "tags"; 39 | @import "jumbotron"; 40 | @import "alert"; 41 | @import "progress"; 42 | @import "media"; 43 | @import "list-group"; 44 | @import "responsive-embed"; 45 | @import "close"; 46 | 47 | // Components w/ JavaScript 48 | @import "modal"; 49 | @import "tooltip"; 50 | @import "popover"; 51 | @import "carousel"; 52 | 53 | // Utility classes 54 | @import "utilities"; 55 | -------------------------------------------------------------------------------- /bootstrap/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | // Width and height 2 | 3 | .w-100 { width: 100% !important; } 4 | .h-100 { height: 100% !important; } 5 | 6 | // Margin and Padding 7 | 8 | .mx-auto { 9 | margin-right: auto !important; 10 | margin-left: auto !important; 11 | } 12 | 13 | @each $prop, $abbrev in (margin: m, padding: p) { 14 | @each $size, $lengths in $spacers { 15 | $length-x: map-get($lengths, x); 16 | $length-y: map-get($lengths, y); 17 | 18 | .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides 19 | .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } 20 | .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } 21 | .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } 22 | .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; } 23 | 24 | // Axes 25 | .#{$abbrev}x-#{$size} { 26 | #{$prop}-right: $length-x !important; 27 | #{$prop}-left: $length-x !important; 28 | } 29 | .#{$abbrev}y-#{$size} { 30 | #{$prop}-top: $length-y !important; 31 | #{$prop}-bottom: $length-y !important; 32 | } 33 | } 34 | } 35 | 36 | // Positioning 37 | 38 | .pos-f-t { 39 | position: fixed; 40 | top: 0; 41 | right: 0; 42 | left: 0; 43 | z-index: $zindex-navbar-fixed; 44 | } 45 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * IMPORT EACH COMPONENT 3 | */ 4 | import alert from './alert' 5 | import breadcrumb from './breadcrumb' 6 | import buttonGroup from './button-group' 7 | import buttons from './buttons' 8 | import card from './card' 9 | import carousel from './carousel' 10 | import customForms from './custom-forms' 11 | import dropdown from './dropdown' 12 | import forms from './forms' 13 | import images from './images' 14 | import jumbotron from './jumbotron' 15 | import listGroup from './list-group' 16 | import media from './media' 17 | import modal from './modal' 18 | import nav from './nav' 19 | import navbar from './navbar' 20 | import pagination from './pagination' 21 | import popover from './popover' 22 | import progress from './progress' 23 | import tables from './tables' 24 | import tags from './tags' 25 | import tooltip from './tooltip' 26 | 27 | const vuestrap = { 28 | alert, 29 | breadcrumb, 30 | buttonGroup, 31 | buttons, 32 | card, 33 | carousel, 34 | customForms, 35 | dropdown, 36 | forms, 37 | images, 38 | jumbotron, 39 | listGroup, 40 | media, 41 | modal, 42 | nav, 43 | navbar, 44 | pagination, 45 | popover, 46 | progress, 47 | tables, 48 | tags, 49 | tooltip, 50 | } 51 | 52 | // export all components under global variable 53 | export default vuestrap 54 | -------------------------------------------------------------------------------- /bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 3 | margin-bottom: $spacer-y; 4 | list-style: none; 5 | background-color: $breadcrumb-bg; 6 | @include border-radius($border-radius); 7 | @include clearfix; 8 | } 9 | 10 | .breadcrumb-item { 11 | float: left; 12 | 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item::before { 15 | display: inline-block; // Suppress underlining of the separator in modern browsers 16 | padding-right: $breadcrumb-item-padding; 17 | padding-left: $breadcrumb-item-padding; 18 | color: $breadcrumb-divider-color; 19 | content: "#{$breadcrumb-divider}"; 20 | } 21 | 22 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 23 | // without `