├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bootstrap ├── alerts.styl ├── badges.styl ├── breadcrumbs.styl ├── button-groups.styl ├── buttons.styl ├── carousel.styl ├── close.styl ├── code.styl ├── component-animations.styl ├── dropdowns.styl ├── forms.styl ├── glyphicons.styl ├── grid.styl ├── index.styl ├── input-groups.styl ├── jumbotron.styl ├── labels.styl ├── list-group.styl ├── media.styl ├── mixins.styl ├── mixins │ ├── alerts.styl │ ├── background-variant.styl │ ├── border-radius.styl │ ├── buttons.styl │ ├── center-block.styl │ ├── clearfix.styl │ ├── forms.styl │ ├── gradients.styl │ ├── grid-framework.styl │ ├── grid.styl │ ├── hide-text.styl │ ├── image.styl │ ├── labels.styl │ ├── list-group.styl │ ├── nav-divider.styl │ ├── nav-vertical-align.styl │ ├── opacity.styl │ ├── pagination.styl │ ├── panels.styl │ ├── progress-bar.styl │ ├── reset-filter.styl │ ├── reset-text.styl │ ├── resize.styl │ ├── responsive-visibility.styl │ ├── size.styl │ ├── tab-focus.styl │ ├── table-row.styl │ ├── text-emphasis.styl │ ├── text-overflow.styl │ └── vendor-prefixes.styl ├── modals.styl ├── navbar.styl ├── navs.styl ├── normalize.styl ├── pager.styl ├── pagination.styl ├── panels.styl ├── popovers.styl ├── print.styl ├── progress-bars.styl ├── responsive-embed.styl ├── responsive-utilities.styl ├── scaffolding.styl ├── tables.styl ├── theme.styl ├── thumbnails.styl ├── tooltip.styl ├── type.styl ├── utilities.styl ├── variables.styl └── wells.styl ├── bower.json ├── fonts ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 ├── index.js ├── js ├── affix.js ├── alert.js ├── button.js ├── carousel.js ├── collapse.js ├── dropdown.js ├── modal.js ├── popover.js ├── scrollspy.js ├── tab.js ├── tooltip.js └── transition.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | npm-debug.log 3 | node_modules -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Grunt Script for Bootstrap Stylus 3 | * http://gruntjs.com/ 4 | */ 5 | 6 | 'use strict'; 7 | module.exports = function(grunt) { 8 | 9 | grunt.initConfig({ 10 | 11 | stylus: { 12 | options: { 13 | compress: false, 14 | paths: ['stylus', __dirname], 15 | urlfunc: 'embedurl', // use embedurl('test.png') in our code to trigger Data URI embedding 16 | }, 17 | bootstrap: { 18 | files: { 19 | 'dist/bootstrap.css': 'bootstrap/index.styl' // 1:1 compile 20 | } 21 | }, 22 | 23 | theme: { 24 | files: { 25 | 'dist/theme.css': 'bootstrap/theme.styl' // 1:1 compile 26 | } 27 | } 28 | }, 29 | 30 | watch: { 31 | css: { 32 | files: 'bootstrap/**/*.styl', 33 | tasks: ['stylus'], 34 | options: { 35 | debounceDelay: 250 36 | } 37 | } 38 | }, 39 | 40 | clean: { 41 | dist: ["dist/*.css", "dist/*.js"] 42 | }, 43 | 44 | autoprefixer: { 45 | options: { 46 | browsers: [ 47 | 'Android 2.3', 48 | 'Android >= 4', 49 | 'Chrome >= 20', 50 | 'Firefox >= 24', // Firefox 24 is the latest ESR 51 | 'Explorer >= 8', 52 | 'iOS >= 6', 53 | 'Opera >= 12', 54 | 'Safari >= 6' 55 | ] 56 | }, 57 | core: { 58 | options: { 59 | map: true 60 | }, 61 | src: 'dist/bootstrap.css' 62 | }, 63 | theme: { 64 | options: { 65 | map: true 66 | }, 67 | src: 'dist/theme.css' 68 | } 69 | }, 70 | 71 | cssmin: { 72 | bootstrap: { 73 | files: { 74 | "dist/bootstrap.min.css": ["dist/bootstrap.css"] 75 | } 76 | }, 77 | theme: { 78 | files: { 79 | "dist/theme.min.css": ["dist/theme.css"] 80 | } 81 | } 82 | }, 83 | 84 | uglify: { 85 | dist: { 86 | files: { 87 | 'dist/bootstrap.min.js': [ 88 | 'js/transition.js', 89 | 'js/alert.js', 90 | 'js/button.js', 91 | 'js/carousel.js', 92 | 'js/collapse.js', 93 | 'js/dropdown.js', 94 | 'js/modal.js', 95 | 'js/tooltip.js', 96 | 'js/popover.js', 97 | 'js/scrollspy.js', 98 | 'js/tab.js', 99 | 'js/affix.js' 100 | ] 101 | } 102 | } 103 | }, 104 | 105 | }); 106 | 107 | // Load plugins here 108 | grunt.loadNpmTasks('grunt-contrib-stylus'); 109 | grunt.loadNpmTasks('grunt-contrib-watch'); 110 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 111 | grunt.loadNpmTasks('grunt-contrib-clean'); 112 | grunt.loadNpmTasks('grunt-contrib-uglify'); 113 | 114 | grunt.registerTask('dist', ['clean','stylus:bootstrap', 'cssmin:bootstrap', 'uglify']); 115 | grunt.registerTask('theme', ['stylus:theme', 'cssmin:theme']); 116 | grunt.registerTask('build', ['clean','stylus:bootstrap', 'stylus:theme', 'cssmin:bootstrap', 'cssmin:theme', 'uglify']); 117 | }; 118 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2011-2016 Twitter, Inc. 4 | Copyright (c) 2011-2016 The Bootstrap Authors 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Stylus 3.4.1 2 | ====================== 3 | 4 | Port of the amazing [Bootstrap 3.4.1](https://github.com/twbs/bootstrap) to [Stylus 0.52.0](http://learnboost.github.com/stylus/). 5 | 6 | ## Installing 7 | 8 | Latest version via [Bower](https://github.com/bower/bower): 9 | 10 | ```bash 11 | $ bower install bootstrap-stylus 12 | ``` 13 | 14 | Legacy 2.3.2 version is kept in [this release](https://github.com/Acquisio/bootstrap-stylus/releases/tag/v2.3.2) and can be installed via Bower as well, however it does not include any build scripts. 15 | 16 | ```bash 17 | $ bower install bootstrap-stylus#2.3.2 18 | ``` 19 | 20 | Via npm: 21 | 22 | ```bash 23 | $ npm install bootstrap-styl 24 | ``` 25 | Example of requiring and using bootstrap middleware to create compile function to utilize in other frameworks. 26 | ```javascript 27 | var bootstrap = require('bootstrap-styl'), 28 | stylus = require('stylus'); 29 | 30 | function compile(str) { 31 | return stylus(str) 32 | .use(bootstrap()); 33 | } 34 | ``` 35 | 36 | To import whole bootstrap in your stylus file: 37 | ```stylus 38 | @import bootstrap 39 | ``` 40 | 41 | Alternatively to import individual components: 42 | ```stylus 43 | @import 'bootstrap/variables' 44 | @import 'bootstrap/mixins' 45 | @import 'bootstrap/alerts' 46 | 47 | ``` 48 | 49 | ## Compiling CSS from Stylus 50 | 51 | Bootstrap Stylus uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. To use it, install the required dependencies as directed and then run some Grunt commands. 52 | 53 | ### Install Grunt 54 | 55 | From the command line: 56 | 57 | 1. Install `grunt-cli` globally with `npm install -g grunt-cli`. 58 | 2. Install the [necessary local dependencies](package.json) via `npm install` 59 | 60 | When completed, you'll be able to run the various Grunt commands provided from the command line. 61 | 62 | **Unfamiliar with `npm`? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding. 63 | 64 | ### Available Grunt commands 65 | 66 | #### Compile CSS and JavaScript - `grunt dist` 67 | `grunt dist` creates the `/dist` directory with compiled files. **Uses [UglifyJS](http://lisperator.net/uglifyjs/).** 68 | 69 | #### Legacy 2.3.2 Theme - `grunt theme` 70 | This will compile the `theme.styl` separately and output it to the `/dist` folder. 71 | 72 | #### Watch - `grunt watch` 73 | This is a convenience method for watching just Stylus files and automatically building them whenever you save. 74 | 75 | ### Troubleshooting dependencies 76 | 77 | Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`. 78 | 79 | ### Usage 80 | * You may select what css components you want to include by editing `stylus/bootstrap.styl`. 81 | * You may override [bootstrap variables](http://getbootstrap.com/customize/#less-variables) in your private code, for example 82 | ``` 83 | // myStyles.styl 84 | $font-family-serif ?= 'Merriweather', serif 85 | $font-family-base ?= $font-family-serif 86 | @import "bower_components/bootstrap-stylus/stylus/bootstrap.styl" // Or wherever your bootstrap.styl is located 87 | ``` 88 | this allows flexibility for easily updating to new bootstrap versions. See [?=](https://learnboost.github.io/stylus/docs/operators.html#conditional-assignment--). 89 | * You may select what javascript components you want by editing the uglify task in `gulpfile.js`. You can ommit components by removing them from the `uglify:dist:files` list. 90 | 91 | ### Using with gulp 92 | 93 | To use with gulp, use bootstrap-stylus as a plugin. 94 | 95 | ``` 96 | var bootstrap = require('bootstrap-styl'); 97 | var stylus = require('gulp-stylus'); 98 | 99 | gulp.task('bootstrap', function(){ 100 | gulp.src('./your_code.styl') 101 | .pipe(stylus({ use: bootstrap(), compress: true })) 102 | .pipe(gulp.dest('./build')); 103 | }); 104 | ``` 105 | 106 | ## Original Authors 107 | 108 | **Mark Otto** 109 | 110 | + [http://twitter.com/mdo](http://twitter.com/mdo) 111 | + [http://github.com/mdo](http://github.com/mdo) 112 | 113 | **Jacob Thornton** 114 | 115 | + [http://twitter.com/fat](http://twitter.com/fat) 116 | + [http://github.com/fat](http://github.com/fat) 117 | 118 | 119 | 120 | ## Copyright and license 121 | 122 | Copyright 2013 Twitter, Inc under [the Apache 2.0 license](LICENSE). 123 | -------------------------------------------------------------------------------- /bootstrap/alerts.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert 10 | padding $alert-padding 11 | margin-bottom $line-height-computed 12 | border 1px solid transparent 13 | border-radius $alert-border-radius 14 | 15 | // Headings for larger alerts 16 | h4 17 | margin-top 0 18 | color inherit // Specified for the h4 to prevent conflicts of changing $headings-color 19 | 20 | // Provide class for links that match alerts 21 | .alert-link 22 | font-weight $alert-link-font-weight 23 | 24 | // Improve alignment and spacing of inner content 25 | > p, 26 | > ul 27 | margin-bottom 0 28 | 29 | > p + p 30 | margin-top 5px 31 | 32 | // Dismissible alerts 33 | // 34 | // Expand the right padding and account for the close button's positioning. 35 | 36 | // The misspelled .alert-dismissable was deprecated in 3.2.0. 37 | .alert-dismissable, 38 | .alert-dismissible 39 | padding-right ($alert-padding + 20) 40 | 41 | // Adjust close link position 42 | .close 43 | position relative 44 | top -2px 45 | right -21px 46 | color inherit 47 | 48 | // Alternate styles 49 | // 50 | // Generate contextual modifier classes for colorizing the alert. 51 | 52 | .alert-success 53 | alert-variant($alert-success-bg, $alert-success-border, $alert-success-text) 54 | 55 | .alert-info 56 | alert-variant($alert-info-bg, $alert-info-border, $alert-info-text) 57 | 58 | .alert-warning 59 | alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text) 60 | 61 | .alert-danger 62 | alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text) 63 | -------------------------------------------------------------------------------- /bootstrap/badges.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge 8 | display inline-block 9 | min-width 10px 10 | padding 3px 7px 11 | font-size $font-size-small 12 | font-weight $badge-font-weight 13 | line-height $badge-line-height 14 | color $badge-color 15 | text-align center 16 | white-space nowrap 17 | vertical-align middle 18 | background-color $badge-bg 19 | border-radius $badge-border-radius 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty 23 | display none 24 | 25 | // Quick fix for badges in buttons 26 | .btn & 27 | position relative 28 | top -1px 29 | 30 | .btn-xs &, 31 | .btn-group-xs > .btn & 32 | top 0 33 | padding 1px 5px 34 | 35 | // Hover state, but only for links 36 | a& 37 | &:hover, 38 | &:focus 39 | color $badge-link-hover-color 40 | text-decoration none 41 | cursor pointer 42 | 43 | // Account for badges in navs 44 | .list-group-item.active > &, 45 | .nav-pills > .active > a > & 46 | color $badge-active-color 47 | background-color $badge-active-bg 48 | 49 | .list-group-item > & 50 | float right 51 | 52 | .list-group-item > & + & 53 | margin-right 5px 54 | 55 | .nav-pills > li > a > & 56 | margin-left 3px 57 | -------------------------------------------------------------------------------- /bootstrap/breadcrumbs.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | .breadcrumb 5 | padding $breadcrumb-padding-vertical $breadcrumb-padding-horizontal 6 | margin-bottom $line-height-computed 7 | list-style none 8 | background-color $breadcrumb-bg 9 | border-radius $border-radius-base 10 | 11 | > li 12 | display inline-block 13 | 14 | + li:before 15 | padding 0 5px 16 | color $breadcrumb-color 17 | content "" + $breadcrumb-separator + "\00a0" // Unicode space added since inline-block means non-collapsing white-space 18 | 19 | > .active 20 | color $breadcrumb-active-color 21 | -------------------------------------------------------------------------------- /bootstrap/button-groups.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type */ 2 | 3 | // 4 | // Button groups 5 | // -------------------------------------------------- 6 | 7 | // Make the div behave like a button 8 | .btn-group, 9 | .btn-group-vertical 10 | position relative 11 | display inline-block 12 | vertical-align middle // match .btn alignment given font-size hack above 13 | 14 | > .btn 15 | position relative 16 | float left 17 | 18 | // Bring the "active" button to the front 19 | &:hover, 20 | &:focus, 21 | &:active, 22 | &.active 23 | z-index 2 24 | 25 | // Prevent double borders when buttons are next to each other 26 | .btn-group 27 | .btn + .btn, 28 | .btn + .btn-group, 29 | .btn-group + .btn, 30 | .btn-group + .btn-group 31 | margin-left -1px 32 | 33 | // Optional Group multiple button groups together for a toolbar 34 | .btn-toolbar 35 | margin-left -5px // Offset the first child's margin 36 | clearfix() 37 | 38 | .btn, 39 | .btn-group, 40 | .input-group 41 | float left 42 | 43 | > .btn, 44 | > .btn-group, 45 | > .input-group 46 | margin-left 5px 47 | 48 | .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) 49 | border-radius 0 50 | 51 | // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match 52 | .btn-group > .btn:first-child 53 | margin-left 0 54 | 55 | &:not(:last-child):not(.dropdown-toggle) 56 | border-right-radius(0) 57 | 58 | // Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it 59 | .btn-group > .btn:last-child:not(:first-child), 60 | .btn-group > .dropdown-toggle:not(:first-child) 61 | border-left-radius(0) 62 | 63 | // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) 64 | .btn-group > .btn-group 65 | float left 66 | 67 | .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn 68 | border-radius 0 69 | 70 | .btn-group > .btn-group:first-child:not(:last-child) 71 | > .btn:last-child, 72 | > .dropdown-toggle 73 | border-right-radius(0) 74 | 75 | .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child 76 | border-left-radius(0) 77 | 78 | // On active and open, don't show outline 79 | .btn-group .dropdown-toggle:active, 80 | .btn-group.open .dropdown-toggle 81 | outline 0 82 | 83 | 84 | // Sizing 85 | // 86 | // Remix the default button sizing classes into new ones for easier manipulation. 87 | 88 | .btn-group-xs > .btn 89 | @extend .btn-xs 90 | 91 | .btn-group-sm > .btn 92 | @extend .btn-sm 93 | 94 | .btn-group-lg > .btn 95 | @extend .btn-lg 96 | 97 | 98 | // Split button dropdowns 99 | // ---------------------- 100 | 101 | // Give the line between buttons some depth 102 | .btn-group > .btn + .dropdown-toggle 103 | padding-right 8px 104 | padding-left 8px 105 | 106 | .btn-group > .btn-lg + .dropdown-toggle 107 | padding-right 12px 108 | padding-left 12px 109 | 110 | // The clickable button for toggling the menu 111 | // Remove the gradient and set the same inset shadow as the :active state 112 | .btn-group.open .dropdown-toggle 113 | box-shadow inset 0 3px 5px rgba(0, 0, 0, .125) 114 | 115 | // Show no shadow for `.btn-link` since it has no other button styles. 116 | &.btn-link 117 | box-shadow none 118 | 119 | 120 | // Reposition the caret 121 | .btn .caret 122 | margin-left 0 123 | 124 | // Carets in other button sizes 125 | .btn-lg .caret 126 | border-width $caret-width-large $caret-width-large 0 127 | border-bottom-width 0 128 | 129 | // Upside down carets for .dropup 130 | .dropup .btn-lg .caret 131 | border-width 0 $caret-width-large $caret-width-large 132 | 133 | 134 | // Vertical button groups 135 | // ---------------------- 136 | 137 | .btn-group-vertical 138 | > .btn, 139 | > .btn-group, 140 | > .btn-group > .btn 141 | display block 142 | float none 143 | width 100% 144 | max-width 100% 145 | 146 | // Clear floats so dropdown menus can be properly placed 147 | > .btn-group 148 | clearfix() 149 | > .btn 150 | float none 151 | 152 | > .btn + .btn, 153 | > .btn + .btn-group, 154 | > .btn-group + .btn, 155 | > .btn-group + .btn-group 156 | margin-top -1px 157 | margin-left 0 158 | 159 | .btn-group-vertical > .btn 160 | &:not(:first-child):not(:last-child) 161 | border-radius 0 162 | 163 | &:first-child:not(:last-child) 164 | border-top-radius($btn-border-radius-base) 165 | border-bottom-radius(0) 166 | 167 | &:last-child:not(:first-child) 168 | border-top-radius(0) 169 | border-bottom-radius($btn-border-radius-base) 170 | 171 | .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn 172 | border-radius 0 173 | 174 | .btn-group-vertical > .btn-group:first-child:not(:last-child) 175 | > .btn:last-child, 176 | > .dropdown-toggle 177 | border-bottom-radius(0) 178 | 179 | .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child 180 | border-top-radius(0) 181 | 182 | 183 | 184 | // Justified button groups 185 | // ---------------------- 186 | 187 | .btn-group-justified 188 | display table 189 | width 100% 190 | table-layout fixed 191 | border-collapse separate 192 | 193 | > .btn, 194 | > .btn-group 195 | display table-cell 196 | float none 197 | width 1% 198 | 199 | > .btn-group .btn 200 | width 100% 201 | 202 | > .btn-group .dropdown-menu 203 | left auto 204 | 205 | 206 | // Checkbox and radio options 207 | // 208 | // In order to support the browser's form validation feedback, powered by the 209 | // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use 210 | // `display: none;` or `visibility: hidden;` as that also hides the popover. 211 | // Simply visually hiding the inputs via `opacity` would leave them clickable in 212 | // certain cases which is prevented by using `clip` and `pointer-events`. 213 | // This way, we ensure a DOM element is visible to position the popover from. 214 | // 215 | // See https://github.com/twbs/bootstrap/pull/12794 and 216 | // https://github.com/twbs/bootstrap/pull/14559 for more information. 217 | 218 | [data-toggle="buttons"] 219 | > .btn 220 | > .btn-group > .btn 221 | input[type="radio"], 222 | input[type="checkbox"] 223 | position absolute 224 | clip rect(0, 0, 0, 0) 225 | pointer-events none 226 | -------------------------------------------------------------------------------- /bootstrap/buttons.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // 4 | // Buttons 5 | // -------------------------------------------------- 6 | 7 | 8 | // Base styles 9 | // -------------------------------------------------- 10 | 11 | .btn 12 | display inline-block 13 | margin-bottom 0 // For input.btn 14 | font-weight $btn-font-weight 15 | text-align center 16 | white-space nowrap 17 | vertical-align middle 18 | touch-action manipulation 19 | cursor pointer 20 | background-image none // Reset unusual Firefox-on-Android default style see https://github.com/necolas/normalize.css/issues/214 21 | border 1px solid transparent 22 | button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base) 23 | user-select none 24 | 25 | &, 26 | &:active, 27 | &.active 28 | &:focus, 29 | &.focus 30 | tab-focus() 31 | 32 | &:hover, 33 | &:focus, 34 | &.focus 35 | color $btn-default-color 36 | text-decoration none 37 | 38 | &:active, 39 | &.active 40 | background-image none 41 | outline 0 42 | box-shadow inset 0 3px 5px rgba(0, 0, 0, .125) 43 | 44 | &.disabled, 45 | &[disabled], 46 | fieldset[disabled] & 47 | cursor $cursor-disabled 48 | opacity-ie(.65) 49 | box-shadow none 50 | 51 | a& 52 | &.disabled, 53 | fieldset[disabled] & 54 | pointer-events none // Future-proof disabling of clicks on `` elements 55 | 56 | 57 | // Alternate buttons 58 | // -------------------------------------------------- 59 | 60 | .btn-default 61 | button-variant($btn-default-color, $btn-default-bg, $btn-default-border) 62 | 63 | .btn-primary 64 | button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border) 65 | 66 | // Success appears as green 67 | .btn-success 68 | button-variant($btn-success-color, $btn-success-bg, $btn-success-border) 69 | 70 | // Info appears as blue-green 71 | .btn-info 72 | button-variant($btn-info-color, $btn-info-bg, $btn-info-border) 73 | 74 | // Warning appears as orange 75 | .btn-warning 76 | button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border) 77 | 78 | // Danger and error appear as red 79 | .btn-danger 80 | button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border) 81 | 82 | 83 | // Link buttons 84 | // ------------------------- 85 | 86 | // Make a button look and behave like a link 87 | .btn-link 88 | color $link-color 89 | font-weight 400 90 | border-radius 0 91 | 92 | &, 93 | &:active, 94 | &.active, 95 | &[disabled], 96 | fieldset[disabled] & 97 | background-color transparent 98 | box-shadow none 99 | 100 | &, 101 | &:hover, 102 | &:focus, 103 | &:active 104 | border-color transparent 105 | 106 | &:hover, 107 | &:focus 108 | color $link-hover-color 109 | text-decoration $link-hover-decoration 110 | background-color transparent 111 | 112 | &[disabled], 113 | fieldset[disabled] & 114 | &:hover, 115 | &:focus 116 | color $btn-link-disabled-color 117 | text-decoration none 118 | 119 | 120 | // Button Sizes 121 | // -------------------------------------------------- 122 | 123 | .btn-lg 124 | // line-height ensure even-numbered height of button next to large input 125 | button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large) 126 | 127 | .btn-sm 128 | // line-height ensure proper height of button next to small input 129 | button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small) 130 | 131 | .btn-xs 132 | button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small) 133 | 134 | 135 | // Block button 136 | // -------------------------------------------------- 137 | 138 | .btn-block 139 | display block 140 | width 100% 141 | 142 | // Vertically space out multiple block buttons 143 | .btn-block + .btn-block 144 | margin-top 5px 145 | 146 | // Specificity overrides 147 | input[type="submit"], 148 | input[type="reset"], 149 | input[type="button"] 150 | &.btn-block 151 | width 100% 152 | -------------------------------------------------------------------------------- /bootstrap/carousel.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable media-feature-name-no-unknown 2 | 3 | // 4 | // Carousel 5 | // -------------------------------------------------- 6 | 7 | 8 | // Wrapper for the slide container and indicators 9 | .carousel 10 | position relative 11 | 12 | .carousel-inner 13 | position relative 14 | width 100% 15 | overflow hidden 16 | 17 | > .item 18 | position relative 19 | display none 20 | transition .6s ease-in-out left 21 | 22 | // Account for jankitude on images 23 | > img, 24 | > a > img 25 | @extend .img-responsive 26 | line-height 1 27 | 28 | 29 | // WebKit CSS3 transforms for supported devices 30 | @media all and (transform-3d), (-webkit-transform-3d) 31 | transition-transform(.6s ease-in-out) 32 | backface-visibility(hidden) 33 | perspective(1000px) 34 | 35 | &.next, 36 | &.active.right 37 | transform translate3d(100%, 0, 0) 38 | left 0 39 | 40 | &.prev, 41 | &.active.left 42 | transform translate3d(-100%, 0, 0) 43 | left 0 44 | 45 | &.next.left, 46 | &.prev.right, 47 | &.active 48 | transform translate3d(0, 0, 0) 49 | left 0 50 | 51 | > .active, 52 | > .next, 53 | > .prev 54 | display block 55 | 56 | > .active 57 | left 0 58 | 59 | > .next, 60 | > .prev 61 | position absolute 62 | top 0 63 | width 100% 64 | 65 | > .next 66 | left 100% 67 | 68 | > .prev 69 | left -100% 70 | 71 | > .next.left, 72 | 73 | > .prev.right 74 | left 0 75 | 76 | > .active.left 77 | left -100% 78 | 79 | > .active.right 80 | left 100% 81 | 82 | 83 | // Left/right controls for nav 84 | // --------------------------- 85 | 86 | .carousel-control 87 | position absolute 88 | top 0 89 | bottom 0 90 | left 0 91 | width $carousel-control-width 92 | font-size $carousel-control-font-size 93 | color $carousel-control-color 94 | text-align center 95 | text-shadow $carousel-text-shadow 96 | background-color rgba(0, 0, 0, 0) // Fix IE9 click-thru bug 97 | opacity-ie($carousel-control-opacity) 98 | // We can't have this transition here because WebKit cancels the carousel 99 | // animation if you trip this while in the middle of another animation. 100 | 101 | // Set gradients for backgrounds 102 | &.left 103 | gradient-horizontal(rgba(0, 0, 0, .5), rgba(0, 0, 0, .0001)) 104 | 105 | &.right 106 | right 0 107 | left auto 108 | gradient-horizontal(rgba(0, 0, 0, .0001), rgba(0, 0, 0, .5)) 109 | 110 | // Hover/focus state 111 | &:hover, 112 | &:focus 113 | color $carousel-control-color 114 | text-decoration none 115 | outline 0 116 | opacity-ie(.9) 117 | 118 | // Toggles 119 | .icon-prev, 120 | .icon-next, 121 | .glyphicon-chevron-left, 122 | .glyphicon-chevron-right 123 | position absolute 124 | top 50% 125 | z-index 5 126 | display inline-block 127 | margin-top -10px 128 | 129 | .icon-prev, 130 | .glyphicon-chevron-left 131 | left 50% 132 | margin-left -10px 133 | 134 | .icon-next, 135 | .glyphicon-chevron-right 136 | right 50% 137 | margin-right -10px 138 | 139 | .icon-prev, 140 | .icon-next 141 | width 20px 142 | height 20px 143 | font-family serif 144 | line-height 1 145 | 146 | .icon-prev 147 | &:before 148 | content "\2039"// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) 149 | 150 | .icon-next 151 | &:before 152 | content "\203a"// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) 153 | 154 | // Optional indicator pips 155 | // 156 | // Add an unordered list with the following class and add a list item for each 157 | // slide your carousel holds. 158 | 159 | .carousel-indicators 160 | position absolute 161 | bottom 10px 162 | left 50% 163 | z-index 15 164 | width 60% 165 | padding-left 0 166 | margin-left -30% 167 | text-align center 168 | list-style none 169 | 170 | li 171 | display inline-block 172 | width 10px 173 | height 10px 174 | margin 1px 175 | text-indent -999px 176 | cursor pointer 177 | // IE8-9 hack for event handling 178 | // 179 | // Internet Explorer 8-9 does not support clicks on elements without a set 180 | // `background-color`. We cannot use `filter` since that's not viewed as a 181 | // background color by the browser. Thus, a hack is needed. 182 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer 183 | // 184 | // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we 185 | // set alpha transparency for the best results possible. 186 | background-color unquote('#000 \9') // IE8 187 | background-color rgba(0, 0, 0, 0) // IE9 188 | 189 | border 1px solid $carousel-indicator-border-color 190 | border-radius 10px 191 | 192 | .active 193 | width 12px 194 | height 12px 195 | margin 0 196 | background-color $carousel-indicator-active-bg 197 | 198 | // Optional captions 199 | // ----------------------------- 200 | // Hidden by default for smaller viewports 201 | .carousel-caption 202 | position absolute 203 | right 15% 204 | left 15% 205 | bottom 20px 206 | z-index 10 207 | padding-top 20px 208 | padding-bottom 20px 209 | color $carousel-caption-color 210 | text-align center 211 | text-shadow $carousel-text-shadow 212 | 213 | & .btn 214 | text-shadow none // No shadow for button elements in carousel-caption 215 | 216 | 217 | // Scale up controls for tablets and up 218 | @media screen and (min-width $screen-sm-min) 219 | // Scale up the controls a smidge 220 | .carousel-control 221 | .glyphicon-chevron-left, 222 | .glyphicon-chevron-right, 223 | .icon-prev, 224 | .icon-next 225 | width ($carousel-control-font-size * 1.5) 226 | height ($carousel-control-font-size * 1.5) 227 | margin-top ($carousel-control-font-size / -2) 228 | font-size ($carousel-control-font-size * 1.5) 229 | 230 | .glyphicon-chevron-left, 231 | .icon-prev 232 | margin-left ($carousel-control-font-size / -2) 233 | 234 | .glyphicon-chevron-right, 235 | .icon-next 236 | margin-right ($carousel-control-font-size / -2) 237 | 238 | // Show and left align the captions 239 | .carousel-caption 240 | right 20% 241 | left 20% 242 | padding-bottom 30px 243 | 244 | // Move up the indicators 245 | .carousel-indicators 246 | bottom 20px 247 | -------------------------------------------------------------------------------- /bootstrap/close.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-no-vendor-prefix 2 | 3 | // 4 | // Close icons 5 | // -------------------------------------------------- 6 | 7 | 8 | .close 9 | float right 10 | font-size ($font-size-base * 1.5) 11 | font-weight $close-font-weight 12 | line-height 1 13 | color $close-color 14 | text-shadow $close-text-shadow 15 | opacity-ie(.2) 16 | 17 | &:hover, 18 | &:focus 19 | color $close-color 20 | text-decoration none 21 | cursor pointer 22 | opacity-ie(.5) 23 | 24 | // Additional properties for button version 25 | // iOS requires the button element instead of an anchor tag. 26 | // If you want the anchor version, it requires `href="#"`. 27 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 28 | button& 29 | padding 0 30 | cursor pointer 31 | background transparent 32 | border 0 33 | -webkit-appearance none 34 | appearance none -------------------------------------------------------------------------------- /bootstrap/code.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp 11 | font-family $font-family-monospace 12 | 13 | // Inline code 14 | code 15 | padding 2px 4px 16 | font-size 90% 17 | color $code-color 18 | background-color $code-bg 19 | border-radius $border-radius-base 20 | 21 | // User input typically entered via keyboard 22 | kbd 23 | padding 2px 4px 24 | font-size 90% 25 | color $kbd-color 26 | background-color $kbd-bg 27 | border-radius $border-radius-small 28 | box-shadow inset 0 -1px 0 rgba(0, 0, 0, .25) 29 | 30 | kbd 31 | padding 0 32 | font-size 100% 33 | font-weight 700 34 | box-shadow none 35 | 36 | // Blocks of code 37 | pre 38 | display block 39 | padding (($line-height-computed - 1) / 2) 40 | margin 0 0 ($line-height-computed / 2) 41 | font-size ($font-size-base - 1) // 14px to 13px 42 | line-height $line-height-base 43 | color $pre-color 44 | word-break break-all 45 | word-wrap break-word 46 | background-color $pre-bg 47 | border 1px solid $pre-border-color 48 | border-radius $border-radius-base 49 | 50 | // Account for some code outputs that place code tags in pre tags 51 | code 52 | padding 0 53 | font-size inherit 54 | color inherit 55 | white-space pre-wrap 56 | background-color transparent 57 | border-radius 0 58 | 59 | // Enable scrollable blocks of code 60 | .pre-scrollable 61 | max-height $pre-scrollable-max-height 62 | overflow-y scroll 63 | -------------------------------------------------------------------------------- /bootstrap/component-animations.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // 4 | // Component animations 5 | // -------------------------------------------------- 6 | 7 | // Heads up! 8 | // 9 | // We don't use the `opacity-ie()` mixin here since it causes a bug with text 10 | // fields in IE7-8. Source https://github.com/twbs/bootstrap/pull/3552. 11 | 12 | .fade 13 | opacity 0 14 | transition opacity .15s linear 15 | 16 | &.in 17 | opacity 1 18 | 19 | .collapse 20 | display none 21 | 22 | &.in 23 | display block 24 | 25 | tr&.in 26 | display table-row 27 | 28 | tbody&.in 29 | display table-row-group 30 | 31 | .collapsing 32 | position relative 33 | height 0 34 | overflow hidden 35 | transition-property height, visibility 36 | transition-duration .35s 37 | transition-timing-function ease 38 | -------------------------------------------------------------------------------- /bootstrap/dropdowns.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Dropdown menus 3 | // -------------------------------------------------- 4 | 5 | 6 | // Dropdown arrow/caret 7 | .caret 8 | display inline-block 9 | width 0 10 | height 0 11 | margin-left 2px 12 | vertical-align middle 13 | border-top $caret-width-base dashed 14 | border-top s("%s solid \9", $caret-width-base) // IE8 15 | border-right $caret-width-base solid transparent 16 | border-left $caret-width-base solid transparent 17 | 18 | // The dropdown wrapper (div) 19 | .dropup, 20 | .dropdown 21 | position relative 22 | 23 | // Prevent the focus on the dropdown toggle when closing dropdowns 24 | .dropdown-toggle:focus 25 | outline 0 26 | 27 | // The dropdown menu (ul) 28 | .dropdown-menu 29 | position absolute 30 | top 100% 31 | left 0 32 | z-index $zindex-dropdown 33 | display none // none by default, but block on "open" of the menu 34 | float left 35 | min-width 160px 36 | padding 5px 0 37 | margin 2px 0 0 // override default ul 38 | font-size $font-size-base 39 | text-align left // Ensures proper alignment if parent has it changed (e.g., modal footer) 40 | list-style none 41 | background-color $dropdown-bg 42 | background-clip padding-box 43 | border 1px solid $dropdown-fallback-border // IE8 fallback 44 | border 1px solid $dropdown-border 45 | border-radius $border-radius-base 46 | box-shadow 0 6px 12px rgba(0, 0, 0, .175) 47 | 48 | // Aligns the dropdown menu to right 49 | // 50 | // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` 51 | &.pull-right 52 | right 0 53 | left auto 54 | 55 | // Dividers (basically an hr) within the dropdown 56 | .divider 57 | nav-divider($dropdown-divider-bg) 58 | 59 | // Links within the dropdown menu 60 | > li > a 61 | display block 62 | padding 3px 20px 63 | clear both 64 | font-weight 400 65 | line-height $line-height-base 66 | color $dropdown-link-color 67 | white-space nowrap // prevent links from randomly breaking onto new lines 68 | 69 | &:hover, 70 | &:focus 71 | text-decoration none 72 | color $dropdown-link-hover-color 73 | background-color $dropdown-link-hover-bg 74 | 75 | // Active state 76 | .dropdown-menu > .active > a 77 | &, 78 | &:hover, 79 | &:focus 80 | color $dropdown-link-active-color 81 | text-decoration none 82 | background-color $dropdown-link-active-bg 83 | outline 0 84 | 85 | // Disabled state 86 | // 87 | // Gray out text and ensure the hover/focus state remains gray 88 | 89 | .dropdown-menu > .disabled > a 90 | &, 91 | &:hover, 92 | &:focus 93 | color $dropdown-link-disabled-color 94 | 95 | // Nuke hover/focus effects 96 | &:hover, 97 | &:focus 98 | text-decoration none 99 | cursor $cursor-disabled 100 | background-color transparent 101 | background-image none // Remove CSS gradient 102 | reset-filter() 103 | 104 | // Open state for the dropdown 105 | .open 106 | // Show the menu 107 | > .dropdown-menu 108 | display block 109 | 110 | // Remove the outline when :focus is triggered 111 | > a 112 | outline 0 113 | 114 | // Menu positioning 115 | // 116 | // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown 117 | // menu with the parent. 118 | .dropdown-menu-right 119 | right 0 120 | left auto // Reset the default from `.dropdown-menu` 121 | 122 | // With v3, we enabled auto-flipping if you have a dropdown within a right 123 | // aligned nav component. To enable the undoing of that, we provide an override 124 | // to restore the default dropdown menu alignment. 125 | // 126 | // This is only for left-aligning a dropdown menu within a `.navbar-right` or 127 | // `.pull-right` nav component. 128 | .dropdown-menu-left 129 | right auto 130 | left 0 131 | 132 | // Dropdown section headers 133 | .dropdown-header 134 | display block 135 | padding 3px 20px 136 | font-size $font-size-small 137 | line-height $line-height-base 138 | color $dropdown-header-color 139 | white-space nowrap // as with > li > a 140 | 141 | // Backdrop to catch body clicks on mobile, etc. 142 | .dropdown-backdrop 143 | position fixed 144 | top 0 145 | right 0 146 | bottom 0 147 | left 0 148 | z-index ($zindex-dropdown - 10) 149 | 150 | // Right aligned dropdowns 151 | .pull-right > .dropdown-menu 152 | right 0 153 | left auto 154 | 155 | // Allow for dropdowns to go bottom up (aka, dropup-menu) 156 | // 157 | // Just add .dropup after the standard .dropdown class and you're set, bro. 158 | // TODO abstract this so that the navbar fixed styles are not placed here? 159 | 160 | .dropup, 161 | .navbar-fixed-bottom .dropdown 162 | // Reverse the caret 163 | .caret 164 | content "" 165 | border-top 0 166 | border-bottom $caret-width-base dashed 167 | border-bottom s("%s solid \9", $caret-width-base) // IE8 168 | 169 | // Different positioning for bottom up menu 170 | .dropdown-menu 171 | top auto 172 | bottom 100% 173 | margin-bottom 2px 174 | 175 | 176 | // Component alignment 177 | // 178 | // Reiterate per navbar and the modified component alignment there. 179 | 180 | @media (min-width $grid-float-breakpoint) 181 | .navbar-right 182 | .dropdown-menu 183 | right 0 184 | left auto 185 | 186 | // Necessary for overrides of the default right aligned menu. 187 | // Will remove come v4 in all likelihood. 188 | .dropdown-menu-left 189 | right auto 190 | left 0 191 | 192 | -------------------------------------------------------------------------------- /bootstrap/grid.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container 11 | container-fixed() 12 | 13 | @media (min-width $screen-sm-min) 14 | width $container-sm 15 | @media (min-width $screen-md-min) 16 | width $container-md 17 | @media (min-width $screen-lg-min) 18 | width $container-lg 19 | 20 | 21 | // Fluid container 22 | // 23 | // Utilizes the mixin meant for fixed width containers, but without any defined 24 | // width for fluid, full width layouts. 25 | 26 | .container-fluid 27 | container-fixed() 28 | 29 | 30 | // Row 31 | // 32 | // Rows contain and clear the floats of your columns. 33 | 34 | .row 35 | make-row() 36 | 37 | .row-no-gutters 38 | margin-right 0 39 | margin-left 0 40 | 41 | [class*="col-"] 42 | padding-right 0 43 | padding-left 0 44 | 45 | // Columns 46 | // 47 | // Common styles for small and large grid columns 48 | 49 | make-grid-columns() 50 | 51 | 52 | // Extra small grid 53 | // 54 | // Columns, offsets, pushes, and pulls for extra small devices like 55 | // smartphones. 56 | 57 | make-grid(xs) 58 | 59 | 60 | // Small grid 61 | // 62 | // Columns, offsets, pushes, and pulls for the small device range, from phones 63 | // to tablets. 64 | 65 | @media (min-width $screen-sm-min) 66 | make-grid(sm) 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width $screen-md-min) 74 | make-grid(md) 75 | 76 | 77 | // Large grid 78 | // 79 | // Columns, offsets, pushes, and pulls for the large desktop device range. 80 | 81 | @media (min-width $screen-lg-min) 82 | make-grid(lg) 83 | -------------------------------------------------------------------------------- /bootstrap/index.styl: -------------------------------------------------------------------------------- 1 | /*!! 2 | * Bootstrap v3.4.1 (http://getbootstrap.com) 3 | * Copyright 2011-2019 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | // Core variables and mixins 8 | @import "bootstrap/variables" 9 | @import "bootstrap/mixins" 10 | 11 | // Reset and dependencies 12 | @import "bootstrap/normalize" 13 | @import "bootstrap/print" 14 | @import "bootstrap/glyphicons" 15 | 16 | // Core CSS 17 | @import "bootstrap/scaffolding" 18 | @import "bootstrap/type" 19 | @import "bootstrap/code" 20 | @import "bootstrap/grid" 21 | @import "bootstrap/tables" 22 | @import "bootstrap/forms" 23 | @import "bootstrap/buttons" 24 | 25 | // Components 26 | @import "bootstrap/component-animations" 27 | @import "bootstrap/dropdowns" 28 | @import "bootstrap/button-groups" 29 | @import "bootstrap/input-groups" 30 | @import "bootstrap/navs" 31 | @import "bootstrap/navbar" 32 | @import "bootstrap/breadcrumbs" 33 | @import "bootstrap/pagination" 34 | @import "bootstrap/pager" 35 | @import "bootstrap/labels" 36 | @import "bootstrap/badges" 37 | @import "bootstrap/jumbotron" 38 | @import "bootstrap/thumbnails" 39 | @import "bootstrap/alerts" 40 | @import "bootstrap/progress-bars" 41 | @import "bootstrap/media" 42 | @import "bootstrap/list-group" 43 | @import "bootstrap/panels" 44 | @import "bootstrap/responsive-embed" 45 | @import "bootstrap/wells" 46 | @import "bootstrap/close" 47 | 48 | // Components w/ JavaScript 49 | @import "bootstrap/modals" 50 | @import "bootstrap/tooltip" 51 | @import "bootstrap/popovers" 52 | @import "bootstrap/carousel" 53 | 54 | // Utility classes 55 | @import "bootstrap/utilities" 56 | @import "bootstrap/responsive-utilities" 57 | -------------------------------------------------------------------------------- /bootstrap/input-groups.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // 4 | // Input groups 5 | // -------------------------------------------------- 6 | 7 | // Base styles 8 | // ------------------------- 9 | .input-group 10 | position relative // For dropdowns 11 | display table 12 | border-collapse separate // prevent input groups from inheriting border styles from table cells when placed within a table 13 | 14 | // Undo padding and float of grid classes 15 | &[class*="col-"] 16 | float none 17 | padding-right 0 18 | padding-left 0 19 | 20 | .form-control 21 | // Ensure that the input is always above the *appended* addon button for 22 | // proper border colors. 23 | position relative 24 | z-index 2 25 | 26 | // IE9 fubars the placeholder attribute in text inputs and the arrows on 27 | // select elements in input groups. To fix it, we float the input. Details: 28 | // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 29 | float left 30 | 31 | width 100% 32 | margin-bottom 0 33 | 34 | &:focus 35 | z-index 3 36 | 37 | // Sizing options 38 | // 39 | // Remix the default form control sizing classes into new ones for easier 40 | // manipulation. 41 | 42 | .input-group-lg > .form-control, 43 | .input-group-lg > .input-group-addon, 44 | .input-group-lg > .input-group-btn > .btn 45 | @extend .input-lg 46 | 47 | .input-group-sm > .form-control, 48 | .input-group-sm > .input-group-addon, 49 | .input-group-sm > .input-group-btn > .btn 50 | @extend .input-sm 51 | 52 | 53 | // Display as table-cell 54 | // ------------------------- 55 | .input-group-addon, 56 | .input-group-btn, 57 | .input-group .form-control 58 | display table-cell 59 | 60 | &:not(:first-child):not(:last-child) 61 | border-radius 0 62 | // Addon and addon wrapper for buttons 63 | .input-group-addon, 64 | .input-group-btn 65 | width 1% 66 | white-space nowrap 67 | vertical-align middle // Match the inputs 68 | 69 | // Text input groups 70 | // ------------------------- 71 | .input-group-addon 72 | padding $padding-base-vertical $padding-base-horizontal 73 | font-size $font-size-base 74 | font-weight 400 75 | line-height 1 76 | color $input-color 77 | text-align center 78 | background-color $input-group-addon-bg 79 | border 1px solid $input-group-addon-border-color 80 | border-radius $input-border-radius 81 | 82 | // Sizing 83 | &.input-sm 84 | padding $padding-small-vertical $padding-small-horizontal 85 | font-size $font-size-small 86 | border-radius $input-border-radius-small 87 | &.input-lg 88 | padding $padding-large-vertical $padding-large-horizontal 89 | font-size $font-size-large 90 | border-radius $input-border-radius-large 91 | 92 | // Nuke default margins from checkboxes and radios to vertically center within. 93 | input[type="radio"], 94 | input[type="checkbox"] 95 | margin-top 0 96 | 97 | // Reset rounded corners 98 | .input-group .form-control:first-child, 99 | .input-group-addon:first-child, 100 | .input-group-btn:first-child > .btn, 101 | .input-group-btn:first-child > .btn-group > .btn, 102 | .input-group-btn:first-child > .dropdown-toggle, 103 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 104 | .input-group-btn:last-child > .btn-group:not(:last-child) > .btn 105 | border-right-radius(0) 106 | 107 | .input-group-addon:first-child 108 | border-right 0 109 | 110 | .input-group .form-control:last-child, 111 | .input-group-addon:last-child, 112 | .input-group-btn:last-child > .btn, 113 | .input-group-btn:last-child > .btn-group > .btn, 114 | .input-group-btn:last-child > .dropdown-toggle, 115 | .input-group-btn:first-child > .btn:not(:first-child), 116 | .input-group-btn:first-child > .btn-group:not(:first-child) > .btn 117 | border-left-radius(0) 118 | 119 | .input-group-addon:last-child 120 | border-left 0 121 | 122 | // Button input groups 123 | // ------------------------- 124 | .input-group-btn 125 | position relative 126 | // Jankily prevent input button groups from wrapping with `white-space` and 127 | // `font-size` in combination with `inline-block` on buttons. 128 | font-size 0 129 | white-space nowrap 130 | 131 | // Negative margin for spacing, position for bringing hovered/focused/actived 132 | // element above the siblings. 133 | > .btn 134 | position relative 135 | + .btn 136 | margin-left -1px 137 | // Bring the "active" button to the front 138 | &:hover, 139 | &:focus, 140 | &:active 141 | z-index 2 142 | 143 | // Negative margin to only have a 1px border between the two 144 | &:first-child 145 | > .btn, 146 | > .btn-group 147 | z-index 2 148 | margin-right -1px 149 | &:last-child 150 | > .btn, 151 | > .btn-group 152 | margin-left -1px 153 | -------------------------------------------------------------------------------- /bootstrap/jumbotron.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron 7 | padding-top $jumbotron-padding 8 | padding-bottom $jumbotron-padding 9 | margin-bottom $jumbotron-padding 10 | color $jumbotron-color 11 | background-color $jumbotron-bg 12 | 13 | h1, 14 | .h1 15 | color $jumbotron-heading-color 16 | 17 | p 18 | margin-bottom ($jumbotron-padding / 2) 19 | font-size $jumbotron-font-size 20 | font-weight 200 21 | 22 | > hr 23 | border-top-color darken($jumbotron-bg, 10) 24 | 25 | .container &, 26 | .container-fluid & 27 | padding-right ($grid-gutter-width / 2) 28 | padding-left ($grid-gutter-width / 2) 29 | border-radius $border-radius-large // Only round corners at higher resolutions if contained in a container 30 | 31 | .container 32 | max-width 100% 33 | 34 | @media screen and (min-width $screen-sm-min) 35 | padding-top ($jumbotron-padding * 1.6) 36 | padding-bottom ($jumbotron-padding * 1.6) 37 | 38 | .container &, 39 | .container-fluid & 40 | padding-right ($jumbotron-padding * 2) 41 | padding-left ($jumbotron-padding * 2) 42 | 43 | h1, 44 | .h1 45 | font-size $jumbotron-heading-font-size 46 | -------------------------------------------------------------------------------- /bootstrap/labels.styl: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label 6 | display inline 7 | padding .2em .6em .3em 8 | font-size 75% 9 | font-weight 700 10 | line-height 1 11 | color $label-color 12 | text-align center 13 | white-space nowrap 14 | vertical-align baseline 15 | border-radius .25em 16 | 17 | // Add hover effects, but only for links 18 | a& 19 | &:hover, 20 | &:focus 21 | color $label-link-hover-color 22 | text-decoration none 23 | cursor pointer 24 | 25 | // Empty labels collapse automatically (not available in IE8) 26 | &:empty 27 | display none 28 | 29 | // Quick fix for labels in buttons 30 | .btn & 31 | position relative 32 | top -1px 33 | 34 | // Colors 35 | // Contextual variations (linked labels get darker on :hover) 36 | 37 | .label-default 38 | label-variant($label-default-bg) 39 | 40 | .label-primary 41 | label-variant($label-primary-bg) 42 | 43 | .label-success 44 | label-variant($label-success-bg) 45 | 46 | .label-info 47 | label-variant($label-info-bg) 48 | 49 | .label-warning 50 | label-variant($label-warning-bg) 51 | 52 | .label-danger 53 | label-variant($label-danger-bg) 54 | -------------------------------------------------------------------------------- /bootstrap/list-group.styl: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // 4 | // List groups 5 | // -------------------------------------------------- 6 | 7 | 8 | // Base class 9 | // 10 | // Easily usable on