root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

convert to scss

This commit is contained in:
Mark Otto 2014-12-02 14:02:35 -08:00
parent 6bd84210ff
commit 27df020852
102 changed files with 8449 additions and 6837 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
Gruntfile.js
View File

@ -20,12 +20,12 @@ module.exports = function (grunt) {
var npmShrinkwrap = require('npm-shrinkwrap');
var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
var getLessVarsData = function () {
var filePath = path.join(__dirname, 'less/_variables.less');
var filePath = path.join(__dirname, 'scss/_variables.scss');
var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
var parser = new BsLessdocParser(fileContent);
return { sections: parser.parseFile() };
};
var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
// var generateRawFiles = require('./grunt/bs-raw-files-generator.js');
var generateCommonJSModule = require('./grunt/bs-commonjs-generator.js');
var configBridge = grunt.file.readJSON('./grunt/configBridge.json', { encoding: 'utf8' });
@ -148,25 +148,56 @@ module.exports = function (grunt) {
files: 'js/tests/index.html'
},
less: {
core: {
// less: {
// core: {
// options: {
// strictMath: true,
// sourceMap: true,
// outputSourceFiles: true,
// sourceMapURL: '<%= pkg.name %>.css.map',
// sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
// },
// src: 'less/bootstrap.less',
// dest: 'dist/css/<%= pkg.name %>.css'
// },
// docs: {
// options: {
// strictMath: true
// },
// files: {
// 'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less'
// }
// }
// },
sass: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
includePaths: ['scss'],
precision: 6,
sourceMap: true
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
core: {
// files: [{
// expand: true,
// cwd: './scss',
// src: ['<%= pkg.name %>.scss'],
// dest: './dist/css',
// ext: '.css'
// }]
files: {
'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
}
},
docs: {
options: {
strictMath: true
},
files: {
'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less'
'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
}
// },
// watch: {
// css: {
// files: './scss/**/*.scss',
// tasks: ['sass']
// }
}
},
@ -220,7 +251,7 @@ module.exports = function (grunt) {
csscomb: {
options: {
config: 'less/.csscomb.json'
config: 'scss/.csscomb.json'
},
dist: {
expand: true,
@ -396,8 +427,8 @@ module.exports = function (grunt) {
grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
// CSS distribution task.
grunt.registerTask('less-compile', ['less:core', 'less:docs']);
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'autoprefixer:core', 'usebanner', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
// Full distribution task.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
@ -411,12 +442,12 @@ module.exports = function (grunt) {
grunt.registerTask('change-version-number', 'sed');
// task for building customizer
grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
grunt.registerTask('build-customizer-html', 'jade');
grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
var banner = grunt.template.process('<%= banner %>');
generateRawFiles(grunt, banner);
});
// grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
// grunt.registerTask('build-customizer-html', 'jade');
// grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
// var banner = grunt.template.process('<%= banner %>');
// generateRawFiles(grunt, banner);
// });
grunt.registerTask('commonjs', 'Generate CommonJS entrypoint module in dist dir.', function () {
var srcFiles = grunt.config.get('concat.bootstrap.src');
@ -428,7 +459,7 @@ module.exports = function (grunt) {
grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']);
grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-customizer']);
grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
grunt.registerTask('docs-github', ['jekyll:github']);

4428
dist/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
docs/assets/css/docs.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

0
docs/assets/less/syntax.less → docs/assets/scss/_syntax.scss
View File

80
docs/assets/less/docs.less → docs/assets/scss/docs.scss
View File

@ -6,19 +6,19 @@
*/
// Import Bootstrap variables and mixins
@import "../../../less/_variables.less";
@import "../../../less/_mixins.less";
@import "../../../scss/variables";
@import "../../../scss/mixins";
// Import the syntax highlighting
@import "syntax.less";
@import "syntax";
// Local docs variables
@bs-purple: #563d7c;
@bs-purple-light: #cdbfe3;
@bs-yellow: #ffe484;
@bs-danger: #d9534f;
@bs-warning: #f0ad4e;
@bs-info: #5bc0de;
$bs-purple: #563d7c;
$bs-purple-light: #cdbfe3;
$bs-yellow: #ffe484;
$bs-danger: #d9534f;
$bs-warning: #f0ad4e;
$bs-info: #5bc0de;
// Scaffolding
@ -35,28 +35,28 @@ body {
//
.btn-outline {
color: @bs-purple;
color: $bs-purple;
background-color: transparent;
border-color: @bs-purple;
border-color: $bs-purple;
&:hover,
&:focus,
&:active {
color: #fff;
background-color:@bs-purple;
border-color: @bs-purple;
background-color:$bs-purple;
border-color: $bs-purple;
}
}
.btn-outline-inverse {
color: #fff;
background-color: transparent;
border-color: @bs-purple-light;
border-color: $bs-purple-light;
&:hover,
&:focus,
&:active {
color: @bs-purple;
color: $bs-purple;
text-shadow: none;
background-color: #fff;
border-color: #fff;
@ -78,16 +78,16 @@ body {
color: #fff;
text-align: center;
cursor: default;
background-color: @bs-purple;
background-color: $bs-purple;
border-radius: 15%;
&.inverse {
color: @bs-purple;
color: $bs-purple;
background-color: #fff;
}
&.outline {
background-color: transparent;
border: 1px solid @bs-purple-light;
border: 1px solid $bs-purple-light;
}
}
@ -217,7 +217,7 @@ body {
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
#gradient > .vertical(@bs-purple, #6f5499);
@include gradient-vertical($bs-purple, #6f5499);
}
.bs-docs-masthead .bs-docs-booticon {
@ -279,7 +279,7 @@ body {
padding-bottom: 2rem;
margin-bottom: 2rem;
font-size: 1.25rem;
background-color: @bs-purple;
background-color: $bs-purple;
}
.bs-docs-header h1 {
margin-top: 0;
@ -330,7 +330,7 @@ body {
overflow: hidden; /* clearfix */
font-size: .8rem !important;
line-height: 1rem !important;
color: @bs-purple-light !important;
color: $bs-purple-light !important;
text-align: left;
background: transparent !important;
border: solid #866ab3 !important;
@ -371,7 +371,7 @@ body {
// }
// .bs-docs-header .carbonad-text a,
// .bs-docs-header .carbonad-tag a {
// color: @bs-purple !important;
// color: $bs-purple !important;
// }
@media (min-width: 480px) {
@ -448,7 +448,7 @@ body {
color: #333;
}
.bs-docs-featurette-img:hover {
color: @brand-primary;
color: $brand-primary;
text-decoration: none;
}
.bs-docs-featurette-img img {
@ -597,7 +597,7 @@ body {
width: 240px;
overflow-x: hidden;
overflow-y: auto;
#gradient > .vertical(#29262f, #322f38);
@include gradient-vertical(#29262f, #322f38);
}
.bs-docs-sidebar .navbar-brand {
margin-bottom: 15px;
@ -634,12 +634,12 @@ body {
}
.bs-docs-toc-link:hover,
.bs-docs-toc-link:focus {
color: @bs-yellow;
color: $bs-yellow;
text-decoration: none;
}
.active > .bs-docs-toc-link {
font-weight: 500;
color: @bs-yellow;
color: $bs-yellow;
}
.active > .bs-docs-sidenav {
display: block;
@ -665,7 +665,7 @@ body {
}
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
color: @bs-yellow;
color: $bs-yellow;
text-decoration: none;
background-color: transparent;
}
@ -673,7 +673,7 @@ body {
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
font-weight: 500;
color: @bs-yellow;
color: $bs-yellow;
background-color: transparent;
}
@ -763,14 +763,14 @@ body {
}
// Variations
.bs-callout-variant(@color) {
border-left-color: @color;
@mixin bs-callout-variant($color) {
border-left-color: $color;
h4 { color: @color; }
h4 { color: $color; }
}
.bs-callout-danger { .bs-callout-variant(@bs-danger); }
.bs-callout-warning { .bs-callout-variant(@bs-warning); }
.bs-callout-info { .bs-callout-variant(@bs-info); }
.bs-callout-danger { @include bs-callout-variant($bs-danger); }
.bs-callout-warning { @include bs-callout-variant($bs-warning); }
.bs-callout-info { @include bs-callout-variant($bs-info); }
//
@ -799,10 +799,10 @@ body {
// Docs colors
.color-swatches {
.bs-purple {
background-color: @bs-purple;
background-color: $bs-purple;
}
.bs-purple-light {
background-color: @bs-purple-light;
background-color: $bs-purple-light;
}
.bs-purple-lighter {
background-color: #e5e1ea;
@ -880,7 +880,7 @@ body {
margin-bottom: -1rem;
border: solid #f7f7f9;
border-width: .2rem 0 0;
.clearfix();
@include clearfix();
@media (min-width: 480px) {
border-width: .2rem;
@ -1123,7 +1123,7 @@ body {
}
.highlight pre code {
font-size: inherit;
color: @gray-dark; // Effectively the base text color
color: $gray-dark; // Effectively the base text color
}
@ -1428,8 +1428,8 @@ body {
// Pseudo :focus state for showing how it looks in the docs
#focusedInput {
border-color: @input-border-focus;
border-color: $input-border-focus;
outline: 0;
outline: thin dotted \9; // IE9
box-shadow: 0 0 .5rem @input-box-shadow-focus;
box-shadow: 0 0 .5rem $input-box-shadow-focus;
}

4428
docs/dist/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

27
less/_breadcrumb.less
View File

@ -1,27 +0,0 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
.border-radius(@border-radius-base);
> li {
display: inline-block;
+ li:before {
content: "@{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding-left: .5rem;
padding-right: .5rem;
color: @breadcrumb-divider-color;
}
}
> .active {
color: @breadcrumb-active-color;
}
}

44
less/_jumbotron.less
View File

@ -1,44 +0,0 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: @jumbotron-padding (@jumbotron-padding / 2);
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;
.container &,
.container-fluid & {
.border-radius(@border-radius-lg); // Only round corners at higher resolutions if contained in a container
}
.container {
max-width: 100%;
}
}
.jumbotron-heading {
color: @jumbotron-heading-color;
}
.jumbotron-hr {
border-top-color: darken(@jumbotron-bg, 10%);
}
.media-sm({
.jumbotron {
padding: (@jumbotron-padding * 1.6) 0;
.container &,
.container-fluid & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
}
.jumbotron-heading {
font-size: (@font-size-base * 4.5);
}
});

56
less/_mixins.less
View File

@ -1,56 +0,0 @@
// Mixins
// --------------------------------------------------
.border-radius(@radius: .25em) when (@enable-rounded = true) {
border-radius: @radius;
}
.box-shadow(@shadow) when (@enable-shadows = true) {
box-shadow: @arguments;
}
.transition(@transition) when (@enable-transitions = true) {
transition: @arguments;
}
.render-gradient(@start; @end) when (@enable-gradients = true) {
#gradient > .vertical(@start-color: @start; @end-color: @end);
background-color: @end;
}
// Utilities
@import "mixins/media-queries.less";
@import "mixins/hide-text.less";
@import "mixins/image.less";
@import "mixins/labels.less";
@import "mixins/reset-filter.less";
@import "mixins/resize.less";
@import "mixins/responsive-visibility.less";
@import "mixins/size.less";
@import "mixins/tab-focus.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";
// Components
@import "mixins/alerts.less";
@import "mixins/buttons.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";
@import "mixins/nav-divider.less";
@import "mixins/forms.less";
@import "mixins/progress-bar.less";
@import "mixins/table-row.less";
// Skins
@import "mixins/background-variant.less";
@import "mixins/border-radius.less";
@import "mixins/gradients.less";
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

575
less/_navbar.less
View File

@ -1,575 +0,0 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
padding: @spacer;
/*min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/
margin-bottom: @navbar-margin-bottom;
/*border: 1px solid transparent;*/
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
.border-radius(@navbar-border-radius);
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
float: left;
padding: .55rem .75rem;
margin-right: @spacer;
margin-bottom: 0; // For headings
font-size: @font-size-lg;
line-height: @line-height-computed;
/*height: @navbar-height;*/
> a:hover,
> a:focus {
text-decoration: none;
}
> img {
display: block;
}
/*
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
*/
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggler {
float: left;
padding: .55rem .75rem;
margin-right: @spacer;
margin-bottom: 0; // For headings
font-size: @font-size-lg;
line-height: @line-height-computed;
background: none;
border: 0;
&:hover,
&:focus {
text-decoration: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
.box-shadow(none);
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a {
line-height: @line-height-computed;
&:hover,
&:focus {
background-image: none;
}
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-top-radius(@navbar-border-radius);
.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
&.btn-sm {
.navbar-vertical-align(@input-height-sm);
}
&.btn-xs {
.navbar-vertical-align(22);
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
margin-right: -@navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: @navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
.btn-link {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
}
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-toggler,
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
}
.nav-pills > .nav-item > .nav-link {
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
.nav-pills > .active > .nav-link,
.nav-pills > .nav-link.active {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
.divider {
background-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
}

88
less/_pagination.less
View File

@ -1,88 +0,0 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: @line-height-computed 0;
border-radius: @border-radius-base;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
color: @pagination-color;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
.border-left-radius(@border-radius-base);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-base);
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
color: @pagination-hover-color;
background-color: @pagination-hover-bg;
border-color: @pagination-hover-border;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-border;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: @pagination-disabled-color;
background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border;
cursor: @cursor-disabled;
}
}
}
// Sizing
// --------------------------------------------------
// Large
.pagination-lg {
.pagination-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @border-radius-lg);
}
// Small
.pagination-sm {
.pagination-size(@padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @border-radius-sm);
}

130
less/_popover.less
View File

@ -1,130 +0,0 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
// Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
text-align: left;
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-border-color;
.border-radius(@border-radius-lg);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: (@border-radius-lg - 1) (@border-radius-lg - 1) 0 0;
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}

103
less/_tooltip.less
View File

@ -1,103 +0,0 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
// Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-sm;
font-weight: normal;
line-height: 1.4;
opacity: 0;
&.in { opacity: @tooltip-opacity; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
.border-radius(@border-radius-base);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}

777
less/_variables.less
View File

@ -1,777 +0,0 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
@gray-dark: #373a3c;
@gray-darker: @gray-dark; // TODO: remove
@gray: #55595c;
@gray-light: #818a91;
@gray-lighter: #eceeef;
@gray-lightest: #f7f7f9;
@brand-primary: #0275d8;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @gray-dark;
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
//== Global settings
//
//## Quickly modify global styling by enabling or disabling features.
@enable-rounded: true;
@enable-shadows: true;
@enable-gradients: true;
@enable-transitions: true;
@spacer: 1rem;
@border-width: .075rem;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
//** Pixel value used to responsively scale all typography. Applied to the `<html>` element.
@font-size-root: 16px;
//** Sets the `<body>` and more to the root pixel value.
@font-size-base: 1rem;
@font-size-lg: 1.25rem;
@font-size-sm: .85rem;
@font-size-xs: .75rem;
@font-size-h1: 3rem;
@font-size-h2: 2.5rem;
@font-size-h3: 2rem;
@font-size-h4: 1.5rem;
@font-size-h5: 1.25rem;
@font-size-h6: 1rem;
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.5;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: (@font-size-root * @line-height-base);
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: .5rem;
@padding-base-horizontal: .75rem;
@padding-lg-vertical: .75rem;
@padding-lg-horizontal: 1.5rem;
@padding-sm-vertical: .3rem;
@padding-smhorizontal: .75rem;
@padding-xs-vertical: .2rem;
@padding-xs-horizontal: .5rem;
@line-height-lg: 1.33;
@line-height-sm: 1.5;
@border-radius-base: .25rem;
@border-radius-lg: .3rem;
@border-radius-sm: .2rem;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: .3em;
//** Carets increase slightly in size for larger components.
@caret-width-large: @caret-width-base;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: .75rem;
//** Padding for cells in `.table-sm`.
@table-sm-cell-padding: .3rem;
//** Default background color used for all tables.
@table-bg: transparent;
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: @gray-lighter;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-secondary-color: @gray-dark;
@btn-secondary-bg: #fff;
@btn-secondary-border: @gray-lighter;
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @gray-lighter;
//** Text color for `<input>`s
@input-color: @gray;
//** `<input>` border color
@input-border: #ccc;
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-lg: @border-radius-lg;
//** Small `.form-control` border radius
@input-border-radius-sm: @border-radius-sm;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
@input-box-shadow-focus: rgba(102,175,233,.6);
//** Placeholder text color
@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + (@border-width * 2));
//** Large `.form-control` height
@input-height-lg: ((@font-size-lg * @line-height-lg) + (@padding-lg-vertical * 2) + (@border-width * 2));
//** Small `.form-control` height
@input-height-sm: ((@font-size-sm * @line-height-sm) + (@padding-sm-vertical * 2) + (@border-width * 2));
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%);
//** Hover background for dropdown links.
@dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @component-active-color;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal: 1040;
//== Media queries breakpoints
//
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
@screen-xs-max: (@screen-sm-min - .1);
// Small screen / tablet
@screen-sm-min: 48em;
@screen-sm-max: (@screen-md-min - .1);
// Medium screen / desktop
@screen-md-min: 62em;
@screen-md-max: (@screen-lg-min - .1);
// Large screen / wide desktop
@screen-lg-min: 75em;
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 1.5rem;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
//** For `@screen-sm-min` and up.
@container-sm: 45rem; // 720
//** For `@screen-md-min` and up.
@container-md: 60rem; // 960
//** For `@screen-lg-min` and up.
@container-lg: 72.25rem; // 1140
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: (@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 12%);
@navbar-inverse-bg: #373a3c;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: .6em 1em;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: @link-color;
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gray-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
//== Jumbotron
//
//##
@jumbotron-padding: 2rem;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
// @jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #000;
@tooltip-opacity: .9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #ccc;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
@label-default-bg: @gray-light;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 15px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: #f5f5f5;
//** Progress bar text color
@progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: #ddd;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5;
//** Text color of active list items
@list-group-active-color: @component-active-color;
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: .25rem;
//** Thumbnail background color
@thumbnail-bg: @body-bg;
//** Thumbnail border color
@thumbnail-border: #ddd;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//== Badges
//
//##
@badge-color: #fff;
//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
//** Badge text color in active nav link
@badge-active-color: @link-color;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 2em;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: .75rem;
@breadcrumb-padding-horizontal: 1rem;
//** Breadcrumb background color
@breadcrumb-bg: @gray-lighter;
//** Text color for the generated divider between breadcrumb items
@breadcrumb-divider-color: @gray-light;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @gray-light;
//** Textual divider for between breadcrumb elements
@breadcrumb-divider: "/";
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
@code-color: #d44950;
@code-bg: #f7f7f9;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f7f7f9;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @gray-light;
//** Blockquote small color
@blockquote-small-color: @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-lighter;
//** Page header border color
@page-header-border-color: @gray-lighter;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @gray-lighter;

47
less/bootstrap.less vendored
View File

@ -1,47 +0,0 @@
// Core variables and mixins
@import "_variables.less";
@import "_mixins.less";
// Reset and dependencies
@import "_normalize.less";
@import "_print.less";
// Core CSS
@import "_scaffolding.less";
@import "_type.less";
@import "_code.less";
@import "_grid.less";
@import "_tables.less";
@import "_forms.less";
@import "_buttons.less";
// Components
@import "_animation.less";
@import "_dropdown.less";
@import "_button-group.less";
@import "_input-group.less";
@import "_nav.less";
@import "_navbar.less";
@import "_card.less";
@import "_breadcrumb.less";
@import "_pagination.less";
@import "_pager.less";
@import "_labels.less";
@import "_badge.less";
@import "_jumbotron.less";
@import "_alert.less";
@import "_progress.less";
@import "_media.less";
@import "_list-group.less";
@import "_responsive-embed.less";
@import "_close.less";
// Components w/ JavaScript
@import "_modal.less";
@import "_tooltip.less";
@import "_popover.less";
@import "_carousel.less";
// Utility classes
@import "_utilities.less";
@import "_utilities-responsive.less";

14
less/mixins/alerts.less
View File

@ -1,14 +0,0 @@
// Alerts
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}

8
less/mixins/background-variant.less
View File

@ -1,8 +0,0 @@
// Contextual backgrounds
.bg-variant(@color) {
background-color: @color;
a&:hover {
background-color: darken(@color, 10%);
}
}

18
less/mixins/border-radius.less
View File

@ -1,18 +0,0 @@
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}

56
less/mixins/buttons.less
View File

@ -1,56 +0,0 @@
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
// @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow(@shadow);
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open > .dropdown-toggle& {
// Remove the gradient for the pressed/active state
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
.border-radius(@border-radius);
}

59
less/mixins/gradients.less
View File

@ -1,59 +0,0 @@
// Gradients
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}
}

91
less/mixins/grid-framework.less
View File

@ -1,91 +0,0 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}

41
less/mixins/grid.less
View File

@ -1,41 +0,0 @@
/// Grid system
//
// Generate semantic grid columns with these mixins.
.make-container(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
.make-col(@gutter: @grid-gutter-width) {
position: relative;
float: left;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-col-span(@columns) {
width: percentage((@columns / @grid-columns));
}
.make-col-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-col-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-col-pull(@columns) {
right: percentage((@columns / @grid-columns));
}

12
less/mixins/labels.less
View File

@ -1,12 +0,0 @@
// Labels
.label-variant(@color) {
background-color: @color;
&[href] {
&:hover,
&:focus {
background-color: darken(@color, 10%);
}
}
}

29
less/mixins/list-group.less
View File

@ -1,29 +0,0 @@
// List Groups
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
a& {
color: @color;
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
}

26
less/mixins/media-queries.less
View File

@ -1,26 +0,0 @@
// Media query mixins
.media-xs(@rules) {
@media (max-width: @screen-xs-max) { @rules(); }
}
.media-sm(@rules) {
@media (min-width: @screen-sm-min) { @rules(); }
}
.media-sm-max(@rules) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }
}
.media-md(@rules) {
@media (min-width: @screen-md-min) { @rules(); }
}
.media-md-max(@rules) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @rules(); }
}
.media-lg(@rules) {
@media (min-width: @screen-lg-min) { @rules(); }
}

23
less/mixins/pagination.less
View File

@ -1,23 +0,0 @@
// Pagination
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}

15
less/mixins/progress-bar.less
View File

@ -1,15 +0,0 @@
// Progress bars
.progress-variant(@color) {
&[value]::-webkit-progress-value {
background-color: @color;
}
&[value]::-moz-progress-bar {
background-color: @color;
}
@media screen and (~"min-width:0\0") {
.progress-bar {
background-color: @color;
}
}
}

15
less/mixins/responsive-visibility.less
View File

@ -1,15 +0,0 @@
// Responsive utilities
//
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
}

10
less/mixins/size.less
View File

@ -1,10 +0,0 @@
// Sizing shortcuts
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}

8
less/mixins/text-emphasis.less
View File

@ -1,8 +0,0 @@
// Typography
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
}
}

1
package.json
View File

@ -53,6 +53,7 @@
"grunt-html-validation": "~0.1.18",
"grunt-jekyll": "~0.4.2",
"grunt-jscs": "~1.0.0",
"grunt-sass": "~0.16.0",
"grunt-saucelabs": "~8.3.3",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~1.0.0",

0
less/.csscomb.json → scss/.csscomb.json
View File

0
less/.csslintrc → scss/.csslintrc
View File

20
less/_alert.less → scss/_alert.scss
View File

@ -7,20 +7,20 @@
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
padding: $alert-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
.border-radius(@alert-border-radius);
@include border-radius($alert-border-radius);
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
// Specified for the h4 to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
font-weight: $alert-link-font-weight;
}
// Improve alignment and spacing of inner content
@ -38,7 +38,7 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: (@alert-padding + 20);
padding-right: ($alert-padding + 20);
// Adjust close link position
.close {
@ -54,14 +54,14 @@
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
@include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text);
}

10
less/_animation.less → scss/_animation.scss
View File

@ -5,6 +5,7 @@
.fade {
opacity: 0;
transition: opacity .15s linear;
&.in {
opacity: 1;
}
@ -14,9 +15,12 @@
display: none;
visibility: hidden;
&.in { display: block; visibility: visible; }
tr&.in { display: table-row; }
tbody&.in { display: table-row-group; }
&.in {
display: block;
visibility: visible;
}
// tr&.in { display: table-row; }
// tbody&.in { display: table-row-group; }
}
.collapsing {

32
less/_badge.less → scss/_badge.scss
View File

@ -11,12 +11,12 @@
padding-left: .6em;
padding-right: .6em;
font-size: .75em;
font-weight: @badge-font-weight;
color: @badge-color;
font-weight: $badge-font-weight;
color: $badge-color;
text-align: center;
white-space: nowrap;
background-color: @badge-bg;
.border-radius(@badge-border-radius);
background-color: $badge-bg;
@include border-radius($badge-border-radius);
// Empty badges collapse automatically
&:empty {
@ -28,21 +28,11 @@
top: .2em;
}
// Hover state, but only for links
a& {
&:hover,
&:focus {
color: @badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: @badge-active-color;
background-color: @badge-active-bg;
color: $badge-active-color;
background-color: $badge-active-bg;
}
.list-group-item > & {
float: right;
@ -54,3 +44,13 @@
margin-left: 3px;
}
}
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}

27
scss/_breadcrumb.scss Normal file
View File

@ -0,0 +1,27 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: $line-height-computed;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius-base);
> li {
display: inline-block;
+ li:before {
content: "#{breadcrumb-divider}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding-left: .5rem;
padding-right: .5rem;
color: $breadcrumb-divider-color;
}
}
> .active {
color: $breadcrumb-active-color;
}
}

45
less/_button-group.less → scss/_button-group.scss
View File

@ -8,9 +8,11 @@
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
@ -34,12 +36,13 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
margin-left: -5px; // Offset the first child's margin
&:extend(.clearfix all);
@include clearfix();
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
@ -54,14 +57,15 @@
// 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
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
@include border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
@ -74,11 +78,11 @@
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
@include border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
@include border-left-radius(0);
}
// On active and open, don't show outline
@ -92,9 +96,9 @@
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { &:extend(.btn-xs); }
.btn-group-sm > .btn { &:extend(.btn-sm); }
.btn-group-lg > .btn { &:extend(.btn-lg); }
.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
// Split button dropdowns
@ -113,11 +117,11 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
.box-shadow(none);
@include box-shadow(none);
}
}
@ -128,12 +132,12 @@
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-width: $caret-width-large $caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
border-width: 0 $caret-width-large $caret-width-large;
}
@ -152,7 +156,8 @@
// Clear floats so dropdown menus can be properly placed
> .btn-group {
&:extend(.clearfix all);
@include clearfix();
> .btn {
float: none;
}
@ -172,12 +177,12 @@
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
border-top-right-radius: $border-radius-base;
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
border-bottom-left-radius: $border-radius-base;
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
@ -186,11 +191,11 @@
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
.border-top-radius(0);
@include border-top-radius(0);
}
@ -202,12 +207,14 @@
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}

42
less/_buttons.less → scss/_buttons.scss
View File

@ -9,24 +9,24 @@
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
font-weight: $btn-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: @border-width solid transparent;
border: $border-width solid transparent;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
user-select: none;
.transition(all .2s ease-in-out);
transition: all .2s ease-in-out;
&,
&:active,
&.active {
&:focus,
&.focus {
.tab-focus();
@include tab-focus();
}
}
@ -40,16 +40,16 @@
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: @cursor-disabled;
cursor: $cursor-disabled;
pointer-events: none; // Future-proof disabling of clicks
opacity: .65;
.box-shadow(none);
@include box-shadow(none);
}
}
@ -58,22 +58,22 @@
// --------------------------------------------------
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-secondary {
.button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
@ -82,7 +82,7 @@
// Make a button look and behave like a link
.btn-link {
color: @link-color;
color: $link-color;
font-weight: normal;
border-radius: 0;
@ -92,7 +92,7 @@
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
@include box-shadow(none);
}
&,
&:hover,
@ -102,7 +102,7 @@
}
&:hover,
&:focus {
color: @link-hover-color;
color: $link-hover-color;
text-decoration: underline;
background-color: transparent;
}
@ -110,7 +110,7 @@
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
color: $btn-link-disabled-color;
text-decoration: none;
}
}
@ -122,14 +122,14 @@
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @border-radius-lg);
@include button-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @border-radius-sm);
@include button-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $border-radius-sm);
}
.btn-xs {
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-xs; @line-height-sm; @border-radius-sm);
@include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-sm, $border-radius-sm);
}

30
less/_card.less → scss/_card.scss
View File

@ -33,13 +33,13 @@
padding: .75rem 1.25rem;
margin: -1.25rem -1.25rem 1.25rem;
border-bottom: .075rem solid #eee;
.border-radius(.25rem .25rem 0 0);
@include border-radius(.25rem .25rem 0 0);
}
.card-footer {
padding: .75rem 1.25rem;
margin: 1.25rem -1.25rem -1.25rem;
border-top: .075rem solid #eee;
.border-radius(0 0 .25rem .25rem);
@include border-radius(0 0 .25rem .25rem);
}
@ -48,24 +48,24 @@
//
.card-primary {
background-color: @brand-primary;
border-color: @brand-primary;
background-color: $brand-primary;
border-color: $brand-primary;
}
.card-success {
background-color: @brand-success;
border-color: @brand-success;
background-color: $brand-success;
border-color: $brand-success;
}
.card-info {
background-color: @brand-info;
border-color: @brand-info;
background-color: $brand-info;
border-color: $brand-info;
}
.card-warning {
background-color: @brand-warning;
border-color: @brand-warning;
background-color: $brand-warning;
border-color: $brand-warning;
}
.card-danger {
background-color: @brand-danger;
border-color: @brand-danger;
background-color: $brand-danger;
border-color: $brand-danger;
}
@ -109,7 +109,7 @@
// Card image
.card-img {
margin: -1.325rem;
.border-radius(.25rem);
@include border-radius(.25rem);
}
.card-img-overlay {
position: absolute;
@ -125,11 +125,11 @@
// Card image caps
.card-img-top {
margin: -1.325rem -1.325rem 1.25rem;
.border-radius(.25rem .25rem 0 0);
@include border-radius(.25rem .25rem 0 0);
}
.card-img-bottom {
margin: 1.25rem -1.325rem -1.325rem;
.border-radius(0 0 .25rem .25rem);
@include border-radius(0 0 .25rem .25rem);
}

31
less/_carousel.less → scss/_carousel.scss
View File

@ -21,7 +21,7 @@
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
@extend .img-responsive;
line-height: 1;
}
@ -95,30 +95,30 @@
top: 0;
left: 0;
bottom: 0;
width: @carousel-control-width;
opacity: @carousel-control-opacity;
font-size: @carousel-control-font-size;
color: @carousel-control-color;
width: $carousel-control-width;
opacity: $carousel-control-opacity;
font-size: $carousel-control-font-size;
color: $carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
text-shadow: $carousel-text-shadow;
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
@include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
outline: 0;
color: @carousel-control-color;
color: $carousel-control-color;
text-decoration: none;
opacity: .9;
}
@ -178,7 +178,7 @@
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border: 1px solid $carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
@ -193,7 +193,7 @@
margin: 0;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
background-color: $carousel-indicator-active-bg;
}
}
@ -208,9 +208,10 @@
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
color: $carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
text-shadow: $carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
@ -218,7 +219,7 @@
// Scale up controls for tablets and up
.media-sm({
@include media-sm {
// Scale up the controls a smidge
.carousel-control {
.icon-prev,
@ -247,4 +248,4 @@
.carousel-indicators {
bottom: 20px;
}
});
}

12
less/_close.less → scss/_close.scss
View File

@ -5,16 +5,16 @@
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
font-size: ($font-size-base * 1.5);
font-weight: $close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .2;
&:hover,
&:focus {
color: @close-color;
color: $close-color;
text-decoration: none;
cursor: pointer;
opacity: .5;
@ -23,7 +23,7 @@
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button& {
&button {
padding: 0;
cursor: pointer;
background: transparent;

28
less/_code.less → scss/_code.scss
View File

@ -8,32 +8,32 @@ code,
kbd,
pre,
samp {
font-family: @font-family-monospace;
font-family: $font-family-monospace;
}
// Inline code
code {
padding: .2rem .4rem;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
.border-radius(@border-radius-base);
color: $code-color;
background-color: $code-bg;
@include border-radius($border-radius-base);
}
// User input typically entered via keyboard
kbd {
padding: .2rem .4rem;
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
.border-radius(@border-radius-sm);
.box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
.box-shadow(none);
@include box-shadow(none);
}
}
@ -44,10 +44,10 @@ pre {
margin-top: 0;
margin-bottom: 1rem;
font-size: 90%;
line-height: @line-height-base;
color: @pre-color;
background-color: @pre-bg;
.border-radius(@border-radius-base);
line-height: $line-height-base;
color: $pre-color;
background-color: $pre-bg;
@include border-radius($border-radius-base);
// Account for some code outputs that place code tags in pre tags
code {
@ -61,6 +61,6 @@ pre {
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

74
less/_dropdown.less → scss/_dropdown.scss
View File

@ -16,9 +16,9 @@
content: "";
margin-left: .25rem;
vertical-align: middle;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
border-top: $caret-width-base solid;
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
@ -32,24 +32,24 @@
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
font-size: $font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg;
border: 1px solid @dropdown-border;
.border-radius(@border-radius-base);
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-color: $dropdown-bg;
border: 1px solid $dropdown-border;
@include border-radius($border-radius-base);
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
@ -58,8 +58,8 @@
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
line-height: $line-height-base;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
@ -69,8 +69,8 @@
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
color: $dropdown-link-hover-color;
background-color: $dropdown-link-hover-bg;
}
}
@ -79,10 +79,10 @@
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
background-color: $dropdown-link-active-bg;
}
}
@ -94,7 +94,7 @@
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
color: $dropdown-link-disabled-color;
}
// Nuke hover/focus effects
@ -103,8 +103,8 @@
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: @cursor-disabled;
@include reset-filter();
cursor: $cursor-disabled;
}
}
@ -144,9 +144,9 @@
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-sm;
line-height: @line-height-base;
color: @dropdown-header-color;
font-size: $font-size-sm;
line-height: $line-height-base;
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
@ -157,7 +157,7 @@
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
z-index: ($zindex-dropdown - 10);
}
// Right aligned dropdowns
@ -176,7 +176,7 @@
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
border-bottom: $caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
@ -191,16 +191,18 @@
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
//
// TODO: remove?
.media-sm({
.navbar-right {
.dropdown-menu {
.dropdown-menu-right();
}
// Necessary for overrides of the default right aligned menu.
// Will remove come v4 in all likelihood.
.dropdown-menu-left {
.dropdown-menu-left();
}
}
});
// @include media-sm {
// .navbar-right {
// .dropdown-menu {
// .dropdown-menu-right();
// }
// // Necessary for overrides of the default right aligned menu.
// // Will remove come v4 in all likelihood.
// .dropdown-menu-left {
// .dropdown-menu-left();
// }
// }
// }

146
less/_forms.less → scss/_forms.scss
View File

@ -21,12 +21,12 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
margin-bottom: $line-height-computed;
font-size: ($font-size-base * 1.5);
line-height: inherit;
color: @legend-color;
color: $legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
border-bottom: 1px solid $legend-border-color;
}
label {
@ -76,21 +76,23 @@ select[size] {
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
@include tab-focus();
}
// Adjust output element
output {
display: block;
padding-top: (@padding-base-vertical + 1);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
padding-top: ($padding-base-vertical + 1);
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
}
//
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
@ -114,24 +116,24 @@ output {
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
.border-radius(@input-border-radius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
border: 1px solid $input-border;
@include border-radius($input-border-radius);
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
@include form-control-focus();
// Placeholder
&::placeholder {
color: @input-color-placeholder;
color: $input-color-placeholder;
}
// Disabled and read-only inputs
@ -142,16 +144,16 @@ output {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: @cursor-disabled;
background-color: @input-bg-disabled;
cursor: $cursor-disabled;
background-color: $input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s
textarea& {
&textarea {
height: auto;
padding-top: @padding-base-horizontal;
padding-bottom: @padding-base-horizontal;
padding-top: $padding-base-horizontal;
padding-bottom: $padding-base-horizontal;
}
}
@ -180,19 +182,19 @@ input[type="search"] {
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base;
line-height: $input-height-base;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
line-height: @input-height-sm;
line-height: $input-height-sm;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
line-height: @input-height-lg;
line-height: $input-height-lg;
}
}
@ -219,7 +221,7 @@ input[type="search"] {
margin-bottom: 10px;
label {
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
@ -265,7 +267,7 @@ input[type="checkbox"] {
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
cursor: $cursor-disabled;
}
}
// These classes are used directly on <label>s
@ -273,7 +275,7 @@ input[type="checkbox"] {
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
cursor: $cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
@ -282,7 +284,7 @@ input[type="checkbox"] {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
cursor: $cursor-disabled;
}
}
}
@ -295,8 +297,8 @@ input[type="checkbox"] {
.form-control-static {
// Size it appropriately next to real form controls
padding-top: (@padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1);
padding-top: ($padding-base-vertical + 1);
padding-bottom: ($padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
@ -316,22 +318,16 @@ input[type="checkbox"] {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
.input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
}
@include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
.form-group-sm {
.form-control {
.input-size(@input-height-sm; @padding-sm-vertical; @padding-smhorizontal; @font-size-sm; @line-height-sm; @input-border-radius-sm);
}
@include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
}
.input-lg {
.input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
}
@include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
.form-group-lg {
.form-control {
.input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @input-border-radius-lg);
}
@include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
}
@ -345,7 +341,7 @@ input[type="checkbox"] {
// Ensure icons don't overlap text
.form-control {
padding-right: (@input-height-base * 1.25);
padding-right: ($input-height-base * 1.25);
}
}
// Feedback icon
@ -355,39 +351,39 @@ input[type="checkbox"] {
right: 0;
z-index: 2; // Ensure icon is above input groups
display: block;
width: @input-height-base;
height: @input-height-base;
line-height: @input-height-base;
width: $input-height-base;
height: $input-height-base;
line-height: $input-height-base;
text-align: center;
pointer-events: none;
}
.input-lg + .form-control-feedback {
width: @input-height-lg;
height: @input-height-lg;
line-height: @input-height-lg;
width: $input-height-lg;
height: $input-height-lg;
line-height: $input-height-lg;
}
.input-sm + .form-control-feedback {
width: @input-height-sm;
height: @input-height-sm;
line-height: @input-height-sm;
width: $input-height-sm;
height: $input-height-sm;
line-height: $input-height-sm;
}
// Feedback states
// Form validation states
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
@include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
@include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
// Reposition feedback icon if input has visible label above
.has-feedback label {
& ~ .form-control-feedback {
top: (@line-height-computed + 5); // Height of the `label` and its margin
top: ($line-height-computed + 5); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0;
@ -404,7 +400,7 @@ input[type="checkbox"] {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
color: lighten($text-color, 25%); // lighten the text some for contrast
}
@ -422,7 +418,7 @@ input[type="checkbox"] {
.form-inline {
// Kick in the inline
.media-sm({
@include media-sm {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
@ -487,7 +483,7 @@ input[type="checkbox"] {
.has-feedback .form-control-feedback {
top: 0;
}
});
}
}
@ -507,36 +503,36 @@ input[type="checkbox"] {
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + .1); // Default padding plus a border
padding-top: ($padding-base-vertical + .1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: (@line-height-computed + (@padding-base-vertical + .1));
min-height: ($line-height-computed + ($padding-base-vertical + .1));
}
// Make form groups behave like rows
.form-group {
.make-row();
@include make-row();
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
.media-sm({
@include media-sm {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + .1); // Default padding plus a border
padding-top: ($padding-base-vertical + .1); // Default padding plus a border
}
}
});
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback {
right: (@grid-gutter-width / 2);
right: ($grid-gutter-width / 2);
}
// Form group sizes
@ -544,16 +540,16 @@ input[type="checkbox"] {
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
.control-label {
padding-top: @padding-lg-vertical;
padding-top: $padding-lg-vertical;
}
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
.control-label {
padding-top: (@padding-sm-vertical + .1);
padding-top: ($padding-sm-vertical + .1);
}
}
}

40
less/_grid.less → scss/_grid.scss
View File

@ -8,16 +8,16 @@
// Set the container width, and override it for fixed navbars in media queries.
.container {
.make-container();
@include make-container();
@media (min-width: @screen-sm-min) {
max-width: @container-sm;
@media (min-width: $screen-sm-min) {
max-width: $container-sm;
}
@media (min-width: @screen-md-min) {
max-width: @container-md;
@media (min-width: $screen-md-min) {
max-width: $container-md;
}
@media (min-width: @screen-lg-min) {
max-width: @container-lg;
@media (min-width: $screen-lg-min) {
max-width: $container-lg;
}
}
@ -28,7 +28,7 @@
// width for fluid, full width layouts.
.container-fluid {
.make-container();
@include make-container();
}
@ -37,7 +37,7 @@
// Rows contain and clear the floats of your columns.
.row {
.make-row();
@include make-row();
}
@ -45,7 +45,7 @@
//
// Common styles for small and large grid columns
.make-grid-columns();
@include make-grid-columns();
// Extra small grid
@ -53,7 +53,7 @@
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
@include make-grid(xs);
// Small grid
@ -61,24 +61,24 @@
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
.media-sm({
.make-grid(sm);
});
@include media-sm {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
.media-md({
.make-grid(md);
});
@include media-md {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
.media-lg({
.make-grid(lg);
});
@include media-lg {
@include make-grid(lg);
}

34
less/_input-group.less → scss/_input-group.scss
View File

@ -40,12 +40,12 @@
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
.input-lg();
@extend .input-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
.input-sm();
@extend .input-sm;
}
@ -57,7 +57,7 @@
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
@include border-radius(0);
}
}
// Addon and addon wrapper for buttons
@ -71,26 +71,26 @@
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color;
color: $input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
.border-radius(@border-radius-base);
background-color: $input-group-addon-bg;
border: 1px solid $input-group-addon-border-color;
@include border-radius($border-radius-base);
// Sizing
&.input-sm {
padding: @padding-sm-vertical @padding-smhorizontal;
font-size: @font-size-sm;
.border-radius(@border-radius-sm);
padding: $padding-sm-vertical $padding-sm-horizontal;
font-size: $font-size-sm;
@include border-radius($border-radius-sm);
}
&.input-lg {
padding: @padding-lg-vertical @padding-lg-horizontal;
font-size: @font-size-lg;
.border-radius(@border-radius-lg);
padding: $padding-lg-vertical $padding-lg-horizontal;
font-size: $font-size-lg;
@include border-radius($border-radius-lg);
}
// Nuke default margins from checkboxes and radios to vertically center within.
@ -108,7 +108,7 @@
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
@include border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
@ -120,7 +120,7 @@
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
@include border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;

44
scss/_jumbotron.scss Normal file
View File

@ -0,0 +1,44 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
.container &,
.container-fluid & {
@include border-radius($border-radius-lg); // Only round corners at higher resolutions if contained in a container
}
.container {
max-width: 100%;
}
}
.jumbotron-heading {
color: $jumbotron-heading-color;
}
.jumbotron-hr {
border-top-color: darken($jumbotron-bg, 10%);
}
@include media-sm {
.jumbotron {
padding: ($jumbotron-padding * 1.6) 0;
.container &,
.container-fluid & {
padding-left: ($jumbotron-padding * 2);
padding-right: ($jumbotron-padding * 2);
}
}
.jumbotron-heading {
font-size: ($font-size-base * 4.5);
}
}

36
less/_labels.less → scss/_labels.scss
View File

@ -8,21 +8,11 @@
font-size: 75%;
font-weight: bold;
line-height: 1;
color: @label-color;
color: $label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
.border-radius();
// Add hover effects, but only for links
a& {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
@include border-radius();
// Empty labels collapse automatically
&:empty {
@ -36,29 +26,39 @@
}
}
// Add hover effects, but only for links
a.label {
&:hover,
&:focus {
color: $label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
@include label-variant($label-default-bg);
}
.label-primary {
.label-variant(@label-primary-bg);
@include label-variant($label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
@include label-variant($label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
@include label-variant($label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
@include label-variant($label-warning-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
@include label-variant($label-danger-bg);
}

40
less/_list-group.less → scss/_list-group.scss
View File

@ -24,16 +24,16 @@
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
background-color: $list-group-bg;
border: 1px solid $list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
@include border-bottom-radius($list-group-border-radius);
}
}
@ -44,18 +44,18 @@
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item {
color: @list-group-link-color;
color: $list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
color: $list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
color: @list-group-link-hover-color;
background-color: @list-group-hover-bg;
color: $list-group-link-hover-color;
background-color: $list-group-hover-bg;
}
}
@ -64,16 +64,16 @@ a.list-group-item {
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
cursor: @cursor-disabled;
background-color: $list-group-disabled-bg;
color: $list-group-disabled-color;
cursor: $cursor-disabled;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
color: $list-group-disabled-text-color;
}
}
@ -82,9 +82,9 @@ a.list-group-item {
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
@ -93,7 +93,7 @@ a.list-group-item {
color: inherit;
}
.list-group-item-text {
color: @list-group-active-text-color;
color: $list-group-active-text-color;
}
}
}
@ -104,10 +104,10 @@ a.list-group-item {
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @state-success-text);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
// Custom content options

0
less/_media.less → scss/_media.scss
View File

59
scss/_mixins.scss Normal file
View File

@ -0,0 +1,59 @@
// Mixins
// --------------------------------------------------
// Toggles
//
// Used in conjuntion with global variables to enable certain theme features.
@mixin border-radius($radius: $border-radius-base) {
@if $enable-rounded {
border-radius: $radius;
}
}
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
}
}
// Utilities
@import "mixins/media-queries";
@import "mixins/hide-text";
@import "mixins/image";
@import "mixins/label";
@import "mixins/reset-filter";
@import "mixins/resize";
@import "mixins/responsive-visibility";
@import "mixins/size";
@import "mixins/tab-focus";
@import "mixins/text-emphasis";
@import "mixins/text-overflow";
// // Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/pagination";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/progress";
@import "mixins/table-row";
// // Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/gradients";
// // Layout
@import "mixins/clearfix";
@import "mixins/center-block";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";

42
less/_modal.less → scss/_modal.scss
View File

@ -21,7 +21,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
z-index: $zindex-modal;
-webkit-overflow-scrolling: touch;
// Prevent Chrome on Windows from adding a focus outline. For details, see
@ -50,10 +50,10 @@
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-lg;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-color: $modal-content-bg;
border: 1px solid $modal-content-border-color;
border-radius: $border-radius-lg;
@include box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
@ -65,18 +65,18 @@
top: 0;
right: 0;
left: 0;
background-color: @modal-backdrop-bg;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.in { opacity: @modal-backdrop-opacity; }
&.in { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
padding: $modal-title-padding;
border-bottom: 1px solid $modal-header-border-color;
min-height: ($modal-title-padding + $modal-title-line-height);
}
// Close icon
.modal-header .close {
@ -86,22 +86,22 @@
// Title text within header
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: @modal-inner-padding;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
padding: @modal-inner-padding;
padding: $modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
border-top: 1px solid $modal-footer-border-color;
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
@ -128,20 +128,20 @@
}
// Scale up the modal
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
width: $modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
@include box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
.modal-sm { width: $modal-sm; }
}
@media (min-width: @screen-md-min) {
.modal-lg { width: @modal-lg; }
@media (min-width: $screen-md-min) {
.modal-lg { width: $modal-lg; }
}

38
less/_nav.less → scss/_nav.scss
View File

@ -4,8 +4,8 @@
.nav {
margin-bottom: 0;
.list-unstyled();
&:extend(.clearfix all);
@extend .list-unstyled;
@include clearfix();
}
.nav-item {
@ -15,26 +15,26 @@
.nav-link {
display: inline-block;
padding: @nav-link-padding;
line-height: @line-height-base;
padding: $nav-link-padding;
line-height: $line-height-base;
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
background-color: $nav-link-hover-bg;
}
// Disabled state sets text to gray and nukes hover/tab effects
.disabled > &,
&.disabled {
color: @nav-disabled-link-color;
color: $nav-disabled-link-color;
&,
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
color: $nav-disabled-link-hover-color;
background-color: transparent;
cursor: @cursor-disabled;
cursor: $cursor-disabled;
}
}
}
@ -45,7 +45,7 @@
//
.nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color;
border-bottom: 1px solid $nav-tabs-border-color;
.nav-item {
float: left;
@ -60,11 +60,11 @@
.nav-link {
display: block;
border: 1px solid transparent;
.border-radius(@border-radius-base @border-radius-base 0 0);
@include border-radius($border-radius-base $border-radius-base 0 0);
&:hover,
&:focus {
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
}
@ -75,9 +75,9 @@
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border-color: @nav-tabs-active-link-hover-border-color @nav-tabs-active-link-hover-border-color transparent;
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
}
}
@ -86,7 +86,7 @@
&,
&:hover,
&:focus {
color: @nav-disabled-link-color;
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
@ -109,7 +109,7 @@
.nav-link {
display: block;
.border-radius(@nav-pills-border-radius);
@include border-radius($nav-pills-border-radius);
}
.open > .nav-link,
@ -119,8 +119,8 @@
&,
&:hover,
&:focus {
color: @component-active-color;
background-color: @component-active-bg;
color: $component-active-color;
background-color: $component-active-bg;
cursor: default;
}
}
@ -164,5 +164,5 @@
// Make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
@include border-top-radius(0);
}

574
scss/_navbar.scss Normal file
View File

@ -0,0 +1,574 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
padding: $spacer;
/*min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/
margin-bottom: $navbar-margin-bottom;
/*border: 1px solid transparent;*/
// Prevent floats from breaking the navbar
@include clearfix();
@media (min-width: $grid-float-breakpoint) {
@include border-radius($navbar-border-radius);
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: $zindex-navbar;
border-width: 0 0 1px;
@media (min-width: $grid-float-breakpoint) {
@include border-radius(0);
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: $grid-float-breakpoint) {
@include border-radius(0);
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
float: left;
padding: .55rem .75rem;
margin-right: $spacer;
margin-bottom: 0; // For headings
font-size: $font-size-lg;
line-height: $line-height-computed;
/*height: $navbar-height;*/
> a:hover,
> a:focus {
text-decoration: none;
}
> img {
display: block;
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggler {
float: left;
padding: .55rem .75rem;
margin-right: $spacer;
margin-bottom: 0; // For headings
font-size: $font-size-lg;
line-height: $line-height-computed;
background: none;
border: 0;
&:hover,
&:focus {
text-decoration: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
// .navbar-nav {
// margin: ($navbar-padding-vertical / 2) -$navbar-padding-horizontal;
// > li > a {
// padding-top: 10px;
// padding-bottom: 10px;
// line-height: $line-height-computed;
// }
// @media (max-width: $grid-float-breakpoint-max) {
// // Dropdowns get custom display when collapsed
// .open .dropdown-menu {
// position: static;
// float: none;
// width: auto;
// margin-top: 0;
// background-color: transparent;
// border: 0;
// @include box-shadow(none);
// > li > a,
// .dropdown-header {
// padding: 5px 15px 5px 25px;
// }
// > li > a {
// line-height: $line-height-computed;
// &:hover,
// &:focus {
// background-image: none;
// }
// }
// }
// }
// // Uncollapse the nav
// @media (min-width: $grid-float-breakpoint) {
// float: left;
// margin: 0;
// > li {
// float: left;
// > a {
// padding-top: $navbar-padding-vertical;
// padding-bottom: $navbar-padding-vertical;
// }
// }
// }
// }
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -$navbar-padding-horizontal;
margin-right: -$navbar-padding-horizontal;
padding: 10px $navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
// Mixin behavior for optimum display
@extend .form-inline;
.form-group {
@media (max-width: $grid-float-breakpoint-max) {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
// Vertically center in expanded, horizontal navbar
// @include navbar-vertical-align($input-height-base);
// Undo 100% width for pull classes
@media (min-width: $grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
@include box-shadow(none);
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
@include border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
@include border-top-radius($navbar-border-radius);
@include border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
// .navbar-btn {
// @include navbar-vertical-align($input-height-base);
// &.btn-sm {
// @include navbar-vertical-align($input-height-sm);
// }
// &.btn-xs {
// @include navbar-vertical-align(22);
// }
// }
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
// @include navbar-vertical-align($line-height-computed);
@media (min-width: $grid-float-breakpoint) {
float: left;
margin-left: $navbar-padding-horizontal;
margin-right: $navbar-padding-horizontal;
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: $grid-float-breakpoint) {
.navbar-left {
@extend .pull-left;
}
.navbar-right {
@extend .pull-right;
margin-right: -$navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: $navbar-default-bg;
border-color: $navbar-default-border;
.navbar-brand {
color: $navbar-default-brand-color;
&:hover,
&:focus {
color: $navbar-default-brand-hover-color;
background-color: $navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: $navbar-default-color;
}
.navbar-nav {
> li > a {
color: $navbar-default-link-color;
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-disabled-color;
background-color: $navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: $navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: $navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: $navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: $navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: $navbar-default-link-active-bg;
color: $navbar-default-link-active-color;
}
}
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: $navbar-default-link-color;
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-default-link-disabled-color;
background-color: $navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: $navbar-default-link-color;
&:hover {
color: $navbar-default-link-hover-color;
}
}
.btn-link {
color: $navbar-default-link-color;
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $navbar-default-link-disabled-color;
}
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
.navbar-toggler,
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: $navbar-inverse-link-color;
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
}
}
.nav-pills > .nav-item > .nav-link {
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
.nav-pills > .active > .nav-link,
.nav-pills > .nav-link.active {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
.navbar-brand {
color: $navbar-inverse-brand-color;
&:hover,
&:focus {
color: $navbar-inverse-brand-hover-color;
background-color: $navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: $navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: $navbar-inverse-link-color;
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: $navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: $navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: $navbar-inverse-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken($navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: $navbar-inverse-link-active-bg;
color: $navbar-inverse-link-active-color;
}
}
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: $navbar-inverse-border;
}
.divider {
background-color: $navbar-inverse-border;
}
> li > a {
color: $navbar-inverse-link-color;
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: $navbar-inverse-link-color;
&:hover {
color: $navbar-inverse-link-hover-color;
}
}
.btn-link {
color: $navbar-inverse-link-color;
&:hover,
&:focus {
color: $navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $navbar-inverse-link-disabled-color;
}
}
}
}

0
less/_normalize.less → scss/_normalize.scss
View File

20
less/_pager.less → scss/_pager.scss
View File

@ -5,25 +5,27 @@
.pager {
padding-left: 0;
margin: @line-height-computed 0;
margin: $line-height-computed 0;
list-style: none;
text-align: center;
&:extend(.clearfix all);
@include clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pager-bg;
border: 1px solid @pager-border;
border-radius: @pager-border-radius;
background-color: $pager-bg;
border: 1px solid $pager-border;
border-radius: $pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pager-hover-bg;
background-color: $pager-hover-bg;
}
}
@ -46,9 +48,9 @@
> a:hover,
> a:focus,
> span {
color: @pager-disabled-color;
background-color: @pager-bg;
cursor: @cursor-disabled;
color: $pager-disabled-color;
background-color: $pager-bg;
cursor: $cursor-disabled;
}
}
}

89
scss/_pagination.scss Normal file
View File

@ -0,0 +1,89 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: $line-height-computed 0;
@include border-radius();
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-base;
text-decoration: none;
color: $pagination-color;
background-color: $pagination-bg;
border: 1px solid $pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
@include border-left-radius($border-radius-base);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius-base);
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
color: $pagination-hover-color;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
cursor: default;
}
}
> .disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: $pagination-disabled-color;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
cursor: $cursor-disabled;
}
}
}
// Sizing
// --------------------------------------------------
// Large
.pagination-lg {
@include pagination-size($padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $border-radius-lg);
}
// Small
.pagination-sm {
@include pagination-size($padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $border-radius-sm);
}

130
scss/_popover.scss Normal file
View File

@ -0,0 +1,130 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
display: none;
max-width: $popover-max-width;
padding: 1px;
// Reset font and text propertes given new insertion method
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: normal;
line-height: $line-height-base;
text-align: left;
background-color: $popover-bg;
background-clip: padding-box;
border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -$popover-arrow-width; }
&.right { margin-left: $popover-arrow-width; }
&.bottom { margin-top: $popover-arrow-width; }
&.left { margin-left: -$popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
@include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: $popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: $popover-arrow-width;
content: "";
}
.popover {
&.top > .arrow {
left: 50%;
margin-left: -$popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: $popover-arrow-outer-color;
bottom: -$popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -$popover-arrow-width;
border-bottom-width: 0;
border-top-color: $popover-arrow-color;
}
}
&.right > .arrow {
top: 50%;
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-width: 0;
border-right-color: $popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -$popover-arrow-width;
border-left-width: 0;
border-right-color: $popover-arrow-color;
}
}
&.bottom > .arrow {
left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color;
top: -$popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -$popover-arrow-width;
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
}
&.left > .arrow {
top: 50%;
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: $popover-arrow-color;
bottom: -$popover-arrow-width;
}
}
}

0
less/_print.less → scss/_print.scss
View File

76
less/_progress.less → scss/_progress.scss
View File

@ -10,12 +10,12 @@
//
@-webkit-keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; }
from { background-position: $line-height-computed 0; }
to { background-position: 0 0; }
}
@keyframes progress-bar-stripes {
from { background-position: @line-height-computed 0; }
from { background-position: $line-height-computed 0; }
to { background-position: 0 0; }
}
@ -27,8 +27,8 @@
.progress {
display: block;
width: 100%;
height: @line-height-computed;
margin-bottom: @line-height-computed;
height: $line-height-computed;
margin-bottom: $line-height-computed;
}
.progress[value] {
// Reset the default appearance
@ -40,73 +40,73 @@
}
.progress[value]::-webkit-progress-bar {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include border-radius($border-radius-base);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-webkit-progress-value::before {
content: attr(value);
}
.progress[value]::-webkit-progress-value {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
border-top-left-radius: $border-radius-base;
border-bottom-left-radius: $border-radius-base;
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-top-right-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
}
// Firefox styles must be entirely separate or it busts Webkit styles.
//
// Commented out for now because linter.
//
// @-moz-document url-prefix() {
// $-moz-document url-prefix() {
// .progress[value] {
// background-color: #eee;
// .border-radius(@border-radius-base);
// .border-radius($border-radius-base);
// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
// }
// .progress[value]::-moz-progress-bar {
// background-color: #0074d9;
// border-top-left-radius: @border-radius-base;
// border-bottom-left-radius: @border-radius-base;
// border-top-left-radius: $border-radius-base;
// border-bottom-left-radius: $border-radius-base;
// }
// .progress[value="0"]::-moz-progress-bar {
// color: @gray-light;
// color: $gray-light;
// min-width: 2rem;
// background-color: transparent;
// background-image: none;
// }
// .progress[value="100"]::-moz-progress-bar {
// border-top-right-radius: @border-radius-base;
// border-bottom-right-radius: @border-radius-base;
// border-top-right-radius: $border-radius-base;
// border-bottom-right-radius: $border-radius-base;
// }
// }
// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
@media screen and (~"min-width:0\0") {
@media screen and ("min-width:0\0") {
.progress {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
@include border-radius($border-radius-base);
@include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress-bar {
display: inline-block;
height: @line-height-computed;
height: $line-height-computed;
text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
border-top-left-radius: $border-radius-base;
border-bottom-left-radius: $border-radius-base;
}
.progress[width^="0"] {
color: @gray-light;
color: $gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[width="100%"] {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
border-top-right-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
}
}
@ -116,17 +116,17 @@
//
.progress-striped[value]::-webkit-progress-value {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
background-size: $line-height-computed $line-height-computed;
}
.progress-striped[value]::-moz-progress-bar {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
background-size: $line-height-computed $line-height-computed;
}
@media screen and (~"min-width:0\0") {
@media screen and ("min-width:0\0") {
.progress-bar-striped {
#gradient > .striped();
background-size: @line-height-computed @line-height-computed;
@include gradient-striped();
background-size: $line-height-computed $line-height-computed;
}
}
@ -141,7 +141,7 @@
.progress-animated[value]::-moz-progress-bar {
animation: progress-bar-stripes 2s linear infinite;
}
@media screen and (~"min-width:0\0") {
@media screen and ("min-width:0\0") {
.progress-animated .progress-bar-striped {
animation: progress-bar-stripes 2s linear infinite;
}
@ -153,14 +153,14 @@
//
.progress-success {
.progress-variant(@progress-bar-success-bg);
@include progress-variant($progress-bar-success-bg);
}
.progress-info {
.progress-variant(@progress-bar-info-bg);
@include progress-variant($progress-bar-info-bg);
}
.progress-warning {
.progress-variant(@progress-bar-warning-bg);
@include progress-variant($progress-bar-warning-bg);
}
.progress-danger {
.progress-variant(@progress-bar-danger-bg);
@include progress-variant($progress-bar-danger-bg);
}

0
less/_responsive-embed.less → scss/_responsive-embed.scss
View File

44
less/_scaffolding.less → scss/_scaffolding.scss
View File

@ -18,16 +18,16 @@
// Body reset
html {
font-size: @font-size-root;
font-size: ($font-size-root)px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
// Reset fonts for relevant elements
@ -44,17 +44,17 @@ textarea {
// Links
a {
color: @link-color;
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: @link-hover-decoration;
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus {
.tab-focus();
@include tab-focus();
}
}
@ -77,26 +77,26 @@ img {
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
.img-responsive();
@include img-responsive();
}
// Rounded corners
.img-rounded {
.border-radius(@border-radius-lg);
@include border-radius($border-radius-lg);
}
// Image thumbnails
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
padding: $thumbnail-padding;
line-height: $line-height-base;
background-color: $thumbnail-bg;
border: 1px solid $thumbnail-border;
border-radius: $thumbnail-border-radius;
transition: all .2s ease-in-out;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide
.img-responsive(inline-block);
@include img-responsive(inline-block);
}
// Perfect circle
@ -108,10 +108,10 @@ img {
// Horizontal rules
hr {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
border: 0;
border-top: 1px solid @hr-border;
border-top: 1px solid $hr-border;
}

71
less/_tables.less → scss/_tables.scss
View File

@ -2,14 +2,13 @@
// Tables
// --------------------------------------------------
table {
background-color: @table-bg;
background-color: $table-bg;
}
caption {
padding-top: @table-cell-padding;
padding-bottom: @table-cell-padding;
color: @text-muted;
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
}
th {
@ -22,7 +21,7 @@ th {
.table {
width: 100%;
max-width: 100%;
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
// Cells
> thead,
> tbody,
@ -30,17 +29,17 @@ th {
> tr {
> th,
> td {
padding: @table-cell-padding;
line-height: @line-height-base;
padding: $table-cell-padding;
line-height: $line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
border-top: 1px solid $table-border-color;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
border-bottom: 2px solid $table-border-color;
}
// Remove top border from thead by default
// > caption + thead,
@ -55,12 +54,12 @@ th {
// }
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid @table-border-color;
border-top: 2px solid $table-border-color;
}
// Nesting
// .table {
// background-color: @body-bg;
// background-color: $body-bg;
// }
}
@ -74,7 +73,7 @@ th {
> tr {
> th,
> td {
padding: @table-sm-cell-padding;
padding: $table-sm-cell-padding;
}
}
}
@ -86,14 +85,14 @@ th {
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
}
}
}
@ -112,7 +111,7 @@ th {
.table-striped {
> tbody > tr:nth-child(odd) {
background-color: @table-bg-accent;
background-color: $table-bg-accent;
}
}
@ -123,7 +122,7 @@ th {
.table-hover {
> tbody > tr:hover {
background-color: @table-bg-hover;
background-color: $table-bg-hover;
}
}
@ -155,11 +154,11 @@ table {
// inheritance to nested tables.
// Generate the contextual variants
.table-row-variant(active; @table-bg-active);
.table-row-variant(success; @state-success-bg);
.table-row-variant(info; @state-info-bg);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);
// Responsive tables
@ -172,12 +171,12 @@ table {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) {
@media screen and (max-width: $screen-xs-max) {
width: 100%;
margin-bottom: (@line-height-computed * 0.75);
margin-bottom: ($line-height-computed * 0.75);
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
// Tighten up spacing
> .table {
@ -237,19 +236,19 @@ table {
.table > .thead-inverse {
> tr > th {
color: #fff;
background-color: @gray-dark;
background-color: $gray-dark;
}
}
.table > .thead-default {
> tr > th {
color: @gray;
background-color: @gray-lighter;
color: $gray;
background-color: $gray-lighter;
}
}
.table-inverse {
color: @gray-lighter;
background-color: @gray-dark;
color: $gray-lighter;
background-color: $gray-dark;
&.table-bordered {
border: 0;
@ -260,7 +259,7 @@ table {
> tr {
> th,
> td {
border-color: @gray;
border-color: $gray;
}
}
}
@ -284,11 +283,11 @@ table {
> tr {
> th,
> td {
border-top: 1px solid @table-border-color;
border-left: 1px solid @table-border-color;
border-top: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
&:last-child {
border-right: 1px solid @table-border-color;
border-right: 1px solid $table-border-color;
}
}
}
@ -297,7 +296,7 @@ table {
> tr:last-child {
> th,
> td {
border-bottom: 1px solid @table-border-color;
border-bottom: 1px solid $table-border-color;
}
}
}
@ -309,7 +308,7 @@ table {
th,
td {
display: block !important;
border: 1px solid @table-border-color;
border: 1px solid $table-border-color;
}
}
}

103
scss/_tooltip.scss Normal file
View File

@ -0,0 +1,103 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
visibility: visible;
// Reset font and text propertes given new insertion method
font-family: $font-family-base;
font-size: $font-size-sm;
font-weight: normal;
line-height: 1.4;
opacity: 0;
&.in { opacity: $tooltip-opacity; }
&.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: $tooltip-max-width;
padding: 3px 8px;
color: $tooltip-color;
text-align: center;
text-decoration: none;
background-color: $tooltip-bg;
@include border-radius($border-radius-base);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
right: $tooltip-arrow-width;
margin-bottom: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: $tooltip-arrow-width;
margin-bottom: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
}

72
less/_type.less → scss/_type.scss
View File

@ -9,23 +9,23 @@
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
color: @headings-color;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
small,
.small {
font-weight: normal;
line-height: 1;
color: @headings-small-color;
color: $headings-small-color;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
small,
.small {
@ -35,7 +35,7 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
small,
.small {
@ -43,12 +43,12 @@ h6, .h6 {
}
}
h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
// Body text
@ -71,12 +71,12 @@ p {
// Ex: (12px small font / 14px base font) * 100% = about 85%
small,
.small {
font-size: floor((100% * @font-size-sm / @font-size-base));
font-size: floor((100% * $font-size-sm / $font-size-base));
}
mark,
.mark {
background-color: @state-warning-bg;
background-color: $state-warning-bg;
padding: .2em;
}
@ -85,8 +85,8 @@ mark,
// -------------------------
// .page-header {
// padding-bottom: ((@line-height-computed / 2) - 1);
// margin: (@line-height-computed * 2) 0 @line-height-computed;
// padding-bottom: (($line-height-computed / 2) - 1);
// margin: ($line-height-computed * 2) 0 @line-height-computed;
// border-bottom: 1px solid @page-header-border-color;
// }
@ -98,7 +98,7 @@ mark,
ul,
ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
ul,
ol {
margin-bottom: 0;
@ -115,7 +115,7 @@ ol {
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
@extend list-unstyled();
margin-left: -5px;
> li {
@ -128,11 +128,11 @@ ol {
// Description Lists
dl {
margin-top: 0; // Remove browser default
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
line-height: $line-height-base;
}
dt {
font-weight: bold;
@ -148,19 +148,19 @@ dd {
.dl-horizontal {
dd {
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
@include clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
@media (min-width: @grid-float-breakpoint) {
@media (min-width: $grid-float-breakpoint) {
dt {
float: left;
width: (@dl-horizontal-offset - 20);
width: ($dl-horizontal-offset - 20);
clear: left;
text-align: right;
.text-overflow();
@include text-overflow();
}
dd {
margin-left: @dl-horizontal-offset;
margin-left: $dl-horizontal-offset;
}
}
}
@ -174,7 +174,7 @@ abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
border-bottom: 1px dotted $abbr-border-color;
}
.initialism {
font-size: 90%;
@ -183,10 +183,10 @@ abbr[data-original-title] {
// Blockquotes
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
font-size: @blockquote-font-size;
border-left: 5px solid @blockquote-border-color;
padding: ($line-height-computed / 2) $line-height-computed;
margin: 0 0 $line-height-computed;
font-size: $blockquote-font-size;
border-left: 5px solid $blockquote-border-color;
p,
ul,
@ -199,8 +199,8 @@ blockquote {
footer {
display: block;
font-size: 80%; // back to default font-size
line-height: @line-height-base;
color: @blockquote-small-color;
line-height: $line-height-base;
color: $blockquote-small-color;
&:before {
content: '\2014 \00A0'; // em dash, nbsp
@ -212,7 +212,7 @@ blockquote {
.blockquote-reverse {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;
border-right: 5px solid $blockquote-border-color;
border-left: 0;
text-align: right;
@ -227,7 +227,7 @@ blockquote {
// Addresses
address {
margin-bottom: @line-height-computed;
margin-bottom: $line-height-computed;
font-style: normal;
line-height: @line-height-base;
line-height: $line-height-base;
}

70
less/_utilities-responsive.less → scss/_utilities-responsive.scss
View File

@ -39,83 +39,79 @@
}
.visible-xs-block {
.media-xs({
@include media-xs {
display: block !important;
});
}
}
.visible-xs-inline {
.media-xs({
@include media-xs {
display: inline !important;
});
}
}
.visible-xs-inline-block {
.media-xs({
@include media-xs {
display: inline-block !important;
});
}
}
.visible-sm-block {
.media-sm-max({
@include media-sm-max {
display: block !important;
});
}
}
.visible-sm-inline {
.media-sm-max({
@include media-sm-max {
display: inline !important;
});
}
}
.visible-sm-inline-block {
.media-sm-max({
@include media-sm-max {
display: inline-block !important;
});
}
}
.visible-md-block {
.media-md-max({
@include media-md-max {
display: block !important;
});
}
}
.visible-md-inline {
.media-md-max({
@include media-md-max {
display: inline !important;
});
}
}
.visible-md-inline-block {
.media-md-max({
@include media-md-max {
display: inline-block !important;
});
}
}
.visible-lg-block {
.media-lg({
@include media-lg {
display: block !important;
});
}
}
.visible-lg-inline {
.media-lg({
@include media-lg {
display: inline !important;
});
}
}
.visible-lg-inline-block {
.media-lg({
@include media-lg {
display: inline-block !important;
});
}
}
.hidden-sm {
.media-sm-max({
.responsive-invisibility();
});
@include media-sm-max {
@include responsive-invisibility('.hidden-sm');
}
.hidden-md {
.media-md-max({
.responsive-invisibility();
});
@include media-md-max {
@include responsive-invisibility('.hidden-md');
}
.hidden-lg {
.media-lg({
.responsive-invisibility();
});
@include media-lg {
@include responsive-invisibility('.hidden-lg');
}
@ -147,6 +143,6 @@
.hidden-print {
@media print {
.responsive-invisibility();
@include responsive-invisibility('.hidden-print');
}
}

77
less/_utilities.less → scss/_utilities.scss
View File

@ -5,10 +5,10 @@
// Floats
.clearfix {
.clearfix();
@include clearfix();
}
.center-block {
.center-block();
@include center-block();
}
.pull-right {
float: right !important;
@ -20,21 +20,21 @@
// Inverse
.inverse {
color: @gray-lighter;
background-color: @gray-dark;
color: $gray-lighter;
background-color: $gray-dark;
}
// Spacing
.p-a {
padding: @spacer;
padding: $spacer;
}
.p-h {
padding-left: @spacer;
padding-right: @spacer;
padding-left: $spacer;
padding-right: $spacer;
}
.p-v {
padding-top: @spacer;
padding-bottom: @spacer;
padding-top: $spacer;
padding-bottom: $spacer;
}
// Positioning
@ -43,7 +43,7 @@
top: 0;
left: 0;
right: 0;
z-index: @zindex-navbar-fixed;
z-index: $zindex-navbar-fixed;
}
@ -55,7 +55,7 @@
visibility: hidden;
}
.text-hide {
.text-hide();
@include text-hide();
}
@ -86,46 +86,37 @@
.text-capitalize { text-transform: capitalize; }
// Contextual colors
.text-muted {
color: @text-muted;
}
.text-primary {
.text-emphasis-variant(@brand-primary);
}
.text-success {
.text-emphasis-variant(@state-success-text);
}
.text-info {
.text-emphasis-variant(@state-info-text);
}
.text-warning {
.text-emphasis-variant(@state-warning-text);
}
.text-danger {
.text-emphasis-variant(@state-danger-text);
color: $text-muted;
}
@include text-emphasis-variant('.text-primary', $brand-primary);
@include text-emphasis-variant('.text-success', $state-success-text);
@include text-emphasis-variant('.text-info', $state-info-text);
@include text-emphasis-variant('.text-warning', $state-warning-text);
@include text-emphasis-variant('.text-danger', $state-danger-text);
// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
// Given the contrast here, this is the only class to have its color inverted
// automatically.
color: #fff;
.bg-variant(@brand-primary);
}
.bg-success {
.bg-variant(@state-success-bg);
}
.bg-info {
.bg-variant(@state-info-bg);
}
.bg-warning {
.bg-variant(@state-warning-bg);
}
.bg-danger {
.bg-variant(@state-danger-bg);
}
.bg-gray-dark {
.bg-variant(@gray-dark);
}
@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $state-success-bg);
@include bg-variant('.bg-info', $state-info-bg);
@include bg-variant('.bg-warning', $state-warning-bg);
@include bg-variant('.bg-danger', $state-danger-bg);

777
scss/_variables.scss Normal file
View File

@ -0,0 +1,777 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-dark: #373a3c;
$gray-darker: $gray-dark; // TODO: remove
$gray: #55595c;
$gray-light: #818a91;
$gray-lighter: #eceeef;
$gray-lightest: #f7f7f9;
$brand-primary: #0275d8;
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff;
//** Global text color on `<body>`.
$text-color: $gray-dark;
//** Global textual link color.
$link-color: $brand-primary;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%);
//** Link hover decoration.
$link-hover-decoration: underline;
//== Global settings
//
//## Quickly modify global styling by enabling or disabling features.
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: true !default;
$enable-transitions: true !default;
$spacer: 1rem;
$border-width: .075rem;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
//** Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16;
//** Sets the `<body>` and more to the root pixel value.
$font-size-base: 1rem;
$font-size-lg: 1.25rem;
$font-size-sm: .85rem;
$font-size-xs: .75rem;
$font-size-h1: 3rem;
$font-size-h2: 2.5rem;
$font-size-h3: 2rem;
$font-size-h4: 1.5rem;
$font-size-h5: 1.25rem;
$font-size-h6: 1rem;
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.5;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: ($font-size-root * $line-height-base);
//** By default, this inherits from the `<body>`.
$headings-font-family: inherit;
$headings-font-weight: 500;
$headings-line-height: 1.1;
$headings-color: inherit;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-base-vertical: .5rem;
$padding-base-horizontal: .75rem;
$padding-lg-vertical: .75rem;
$padding-lg-horizontal: 1.5rem;
$padding-sm-vertical: .3rem;
$padding-sm-horizontal: .75rem;
$padding-xs-vertical: .2rem;
$padding-xs-horizontal: .5rem;
$line-height-lg: 1.33;
$line-height-sm: 1.5;
$border-radius-base: .25rem;
$border-radius-lg: .3rem;
$border-radius-sm: .2rem;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
$caret-width-base: .3em;
//** Carets increase slightly in size for larger components.
$caret-width-large: $caret-width-base;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
$table-cell-padding: .75rem;
//** Padding for cells in `.table-sm`.
$table-sm-cell-padding: .3rem;
//** Default background color used for all tables.
$table-bg: transparent;
//** Background color used for `.table-striped`.
$table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
$table-bg-hover: #f5f5f5;
$table-bg-active: $table-bg-hover;
//** Border color for table and cell borders.
$table-border-color: $gray-lighter;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: darken($btn-primary-bg, 5%);
$btn-secondary-color: $gray-dark;
$btn-secondary-bg: #fff;
$btn-secondary-border: $gray-lighter;
$btn-info-color: #fff;
$btn-info-bg: $brand-info;
$btn-info-border: darken($btn-info-bg, 5%);
$btn-success-color: #fff;
$btn-success-bg: $brand-success;
$btn-success-border: darken($btn-success-bg, 5%);
$btn-warning-color: #fff;
$btn-warning-bg: $brand-warning;
$btn-warning-border: darken($btn-warning-bg, 5%);
$btn-danger-color: #fff;
$btn-danger-bg: $brand-danger;
$btn-danger-border: darken($btn-danger-bg, 5%);
$btn-link-disabled-color: $gray-light;
//== Forms
//
//##
//** `<input>` background color
$input-bg: #fff;
//** `<input disabled>` background color
$input-bg-disabled: $gray-lighter;
//** Text color for `<input>`s
$input-color: $gray;
//** `<input>` border color
$input-border: #ccc;
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
$input-border-radius: $border-radius-base;
//** Large `.form-control` border radius
$input-border-radius-lg: $border-radius-lg;
//** Small `.form-control` border radius
$input-border-radius-sm: $border-radius-sm;
//** Border color for inputs on focus
$input-border-focus: #66afe9;
$input-box-shadow-focus: rgba(102,175,233,.6);
//** Placeholder text color
$input-color-placeholder: #999;
//** Default `.form-control` height
$input-height-base: (($font-size-base * $line-height-base) + ($padding-base-vertical * 2) + ($border-width * 2));
//** Large `.form-control` height
$input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-vertical * 2) + ($border-width * 2));
//** Small `.form-control` height
$input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-vertical * 2) + ($border-width * 2));
$legend-color: $gray-dark;
$legend-border-color: #e5e5e5;
//** Background color for textual input addons
$input-group-addon-bg: $gray-lighter;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border;
//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
$dropdown-bg: #fff;
//** Dropdown menu `border-color`.
$dropdown-border: rgba(0,0,0,.15);
//** Divider color for between dropdown items.
$dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
$dropdown-link-color: $gray-dark;
//** Hover color for dropdown links.
$dropdown-link-hover-color: darken($gray-dark, 5%);
//** Hover background for dropdown links.
$dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color.
$dropdown-link-active-color: $component-active-color;
//** Active dropdown menu item background color.
$dropdown-link-active-bg: $component-active-bg;
//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color: $gray-light;
//** Text color for headers within dropdown menus.
$dropdown-header-color: $gray-light;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
$zindex-navbar: 1000;
$zindex-dropdown: 1000;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
$zindex-navbar-fixed: 1030;
$zindex-modal: 1040;
//== Media queries breakpoints
//
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Large screen / wide desktop
$screen-lg-min: 75em;
// Medium screen / desktop
$screen-md-min: 62em;
$screen-md-max: ($screen-lg-min - .1);
// Small screen / tablet
$screen-sm-min: 48em;
$screen-sm-max: ($screen-md-min - .1);
// Extra small screen / phone
$screen-xs-max: ($screen-sm-min - .1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
$grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 1.5rem;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
//** For `$screen-sm-min` and up.
$container-sm: 45rem; // 720
//** For `$screen-md-min` and up.
$container-md: 60rem; // 960
//** For `$screen-lg-min` and up.
$container-lg: 72.25rem; // 1140
//== Navbar
//
//##
// Basics of a navbar
// $navbar-height: 50px;
$navbar-margin-bottom: $line-height-computed;
$navbar-border-radius: $border-radius-base;
$navbar-padding-horizontal: $spacer;
$navbar-padding-vertical: ($spacer / 2);
$navbar-collapse-max-height: 340px;
$navbar-default-color: #777;
$navbar-default-bg: #f8f8f8;
$navbar-default-border: darken($navbar-default-bg, 6.5%);
// Navbar links
$navbar-default-link-color: #777;
$navbar-default-link-hover-color: #333;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: #555;
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
$navbar-default-link-disabled-color: #ccc;
$navbar-default-link-disabled-bg: transparent;
// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
$navbar-default-brand-hover-bg: transparent;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd;
$navbar-default-toggle-icon-bar-bg: #888;
$navbar-default-toggle-border-color: #ddd;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: lighten($gray-light, 12%);
$navbar-inverse-bg: #373a3c;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
// Inverted navbar links
$navbar-inverse-link-color: lighten($gray-light, 15%);
$navbar-inverse-link-hover-color: #fff;
$navbar-inverse-link-hover-bg: transparent;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%);
$navbar-inverse-link-disabled-color: #444;
$navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color;
$navbar-inverse-brand-hover-color: #fff;
$navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333;
$navbar-inverse-toggle-icon-bar-bg: #fff;
$navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
$nav-link-padding: .6em 1em;
$nav-link-hover-bg: $gray-lighter;
$nav-disabled-link-color: $gray-light;
$nav-disabled-link-hover-color: $gray-light;
//== Tabs
$nav-tabs-border-color: #ddd;
$nav-tabs-link-hover-border-color: $gray-lighter;
$nav-tabs-active-link-hover-bg: $body-bg;
$nav-tabs-active-link-hover-color: $gray;
$nav-tabs-active-link-hover-border-color: #ddd;
$nav-tabs-justified-link-border-color: #ddd;
$nav-tabs-justified-active-link-border-color: $body-bg;
//== Pills
$nav-pills-border-radius: $border-radius-base;
$nav-pills-active-link-hover-bg: $component-active-bg;
$nav-pills-active-link-hover-color: $component-active-color;
//== Pagination
//
//##
$pagination-color: $link-color;
$pagination-bg: #fff;
$pagination-border: #ddd;
$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-lighter;
$pagination-hover-border: #ddd;
$pagination-active-color: #fff;
$pagination-active-bg: $brand-primary;
$pagination-active-border: $brand-primary;
$pagination-disabled-color: $gray-light;
$pagination-disabled-bg: #fff;
$pagination-disabled-border: #ddd;
//== Pager
//
//##
$pager-bg: $pagination-bg;
$pager-border: $pagination-border;
$pager-border-radius: 15px;
$pager-hover-bg: $pagination-hover-bg;
$pager-active-bg: $pagination-active-bg;
$pager-active-color: $pagination-active-color;
$pager-disabled-color: $pagination-disabled-color;
//== Jumbotron
//
//##
$jumbotron-padding: 2rem;
$jumbotron-color: inherit;
$jumbotron-bg: $gray-lighter;
$jumbotron-heading-color: inherit;
// $jumbotron-font-size: ceil(($font-size-base * 1.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
$state-success-text: #3c763d;
$state-success-bg: #dff0d8;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: #31708f;
$state-info-bg: #d9edf7;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: #8a6d3b;
$state-warning-bg: #fcf8e3;
$state-warning-border: darken($state-warning-bg, 5%);
$state-danger-text: #a94442;
$state-danger-bg: #f2dede;
$state-danger-border: darken($state-danger-bg, 5%);
//== Tooltips
//
//##
//** Tooltip max width
$tooltip-max-width: 200px;
//** Tooltip text color
$tooltip-color: #fff;
//** Tooltip background color
$tooltip-bg: #000;
$tooltip-opacity: .9;
//** Tooltip arrow width
$tooltip-arrow-width: 5px;
//** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
$popover-bg: #fff;
//** Popover maximum width
$popover-max-width: 276px;
//** Popover border color
$popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
$popover-fallback-border-color: #ccc;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%);
//** Popover arrow width
$popover-arrow-width: 10px;
//** Popover arrow color
$popover-arrow-color: $popover-bg;
//** Popover outer arrow width
$popover-arrow-outer-width: ($popover-arrow-width + 1);
//** Popover outer arrow color
$popover-arrow-outer-color: fadein($popover-border-color, 5%);
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
$label-default-bg: $gray-light;
//** Primary label background color
$label-primary-bg: $brand-primary;
//** Success label background color
$label-success-bg: $brand-success;
//** Info label background color
$label-info-bg: $brand-info;
//** Warning label background color
$label-warning-bg: $brand-warning;
//** Danger label background color
$label-danger-bg: $brand-danger;
//** Default label text color
$label-color: #fff;
//** Default text color of a linked label
$label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
$modal-inner-padding: 15px;
//** Padding applied to the modal title
$modal-title-padding: 15px;
//** Modal title line-height
$modal-title-line-height: $line-height-base;
//** Background color of modal content area
$modal-content-bg: #fff;
//** Modal content border color
$modal-content-border-color: rgba(0,0,0,.2);
//** Modal backdrop background color
$modal-backdrop-bg: #000;
//** Modal backdrop opacity
$modal-backdrop-opacity: .5;
//** Modal header border color
$modal-header-border-color: #e5e5e5;
//** Modal footer border color
$modal-footer-border-color: $modal-header-border-color;
$modal-lg: 900px;
$modal-md: 600px;
$modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
$alert-padding: 15px;
$alert-border-radius: $border-radius-base;
$alert-link-font-weight: bold;
$alert-success-bg: $state-success-bg;
$alert-success-text: $state-success-text;
$alert-success-border: $state-success-border;
$alert-info-bg: $state-info-bg;
$alert-info-text: $state-info-text;
$alert-info-border: $state-info-border;
$alert-warning-bg: $state-warning-bg;
$alert-warning-text: $state-warning-text;
$alert-warning-border: $state-warning-border;
$alert-danger-bg: $state-danger-bg;
$alert-danger-text: $state-danger-text;
$alert-danger-border: $state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
$progress-bg: #f5f5f5;
//** Progress bar text color
$progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
$progress-border-radius: $border-radius-base;
//** Default progress bar color
$progress-bar-bg: $brand-primary;
//** Success progress bar color
$progress-bar-success-bg: $brand-success;
//** Warning progress bar color
$progress-bar-warning-bg: $brand-warning;
//** Danger progress bar color
$progress-bar-danger-bg: $brand-danger;
//** Info progress bar color
$progress-bar-info-bg: $brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
$list-group-bg: #fff;
//** `.list-group-item` border color
$list-group-border: #ddd;
//** List group border radius
$list-group-border-radius: $border-radius-base;
//** Background color of single list items on hover
$list-group-hover-bg: #f5f5f5;
//** Text color of active list items
$list-group-active-color: $component-active-color;
//** Background color of active list items
$list-group-active-bg: $component-active-bg;
//** Border color of active list elements
$list-group-active-border: $list-group-active-bg;
//** Text color for content within active list items
$list-group-active-text-color: lighten($list-group-active-bg, 40%);
//** Text color of disabled list items
$list-group-disabled-color: $gray-light;
//** Background color of disabled list items
$list-group-disabled-bg: $gray-lighter;
//** Text color for content within disabled list items
$list-group-disabled-text-color: $list-group-disabled-color;
$list-group-link-color: #555;
$list-group-link-hover-color: $list-group-link-color;
$list-group-link-heading-color: #333;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
$thumbnail-padding: .25rem;
//** Thumbnail background color
$thumbnail-bg: $body-bg;
//** Thumbnail border color
$thumbnail-border: #ddd;
//** Thumbnail border radius
$thumbnail-border-radius: $border-radius-base;
//== Badges
//
//##
$badge-color: #fff;
//** Linked badge text color on hover
$badge-link-hover-color: #fff;
$badge-bg: $gray-light;
//** Badge text color in active nav link
$badge-active-color: $link-color;
//** Badge background color in active nav link
$badge-active-bg: #fff;
$badge-font-weight: bold;
$badge-line-height: 1;
$badge-border-radius: 2em;
//== Breadcrumbs
//
//##
$breadcrumb-padding-vertical: .75rem;
$breadcrumb-padding-horizontal: 1rem;
//** Breadcrumb background color
$breadcrumb-bg: $gray-lighter;
//** Text color for the generated divider between breadcrumb items
$breadcrumb-divider-color: $gray-light;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color: $gray-light;
//** Textual divider for between breadcrumb elements
$breadcrumb-divider: "/";
//== Carousel
//
//##
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
$carousel-control-color: #fff;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-font-size: 20px;
$carousel-indicator-active-bg: #fff;
$carousel-indicator-border-color: #fff;
$carousel-caption-color: #fff;
//== Close
//
//##
$close-font-weight: bold;
$close-color: #000;
$close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
$code-color: #d44950;
$code-bg: #f7f7f9;
$kbd-color: #fff;
$kbd-bg: #333;
$pre-bg: #f7f7f9;
$pre-color: $gray-dark;
$pre-border-color: #ccc;
$pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px;
//** Text muted color
$text-muted: $gray-light;
//** Abbreviations and acronyms border color
$abbr-border-color: $gray-light;
//** Headings small color
$headings-small-color: $gray-light;
//** Blockquote small color
$blockquote-small-color: $gray-light;
//** Blockquote font size
$blockquote-font-size: ($font-size-base * 1.25);
//** Blockquote border color
$blockquote-border-color: $gray-lighter;
//** Page header border color
$page-header-border-color: $gray-lighter;
//** Width of horizontal description list titles
$dl-horizontal-offset: $component-offset-horizontal;
//** Horizontal line color.
$hr-border: $gray-lighter;

47
scss/bootstrap.scss vendored Normal file
View File

@ -0,0 +1,47 @@
// Core variables and mixins
@import "variables";
@import "mixins";
// // Reset and dependencies
@import "normalize";
@import "print";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// // Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "pager";
@import "labels";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";
// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
// Utility classes
@import "utilities";
@import "utilities-responsive";

14
scss/mixins/_alert.scss Normal file
View File

@ -0,0 +1,14 @@
// Alerts
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}

11
scss/mixins/_background-variant.scss Normal file
View File

@ -0,0 +1,11 @@
// Contextual backgrounds
// [converter] $parent hack
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color;
}
a#{$parent}:hover {
background-color: darken($color, 10%);
}
}

21
scss/mixins/_border-radius.scss Normal file
View File

@ -0,0 +1,21 @@
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}

56
scss/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,56 @@
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
// .box-shadow($shadow);
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
&:active,
&.active,
.open > &.dropdown-toggle {
// Remove the gradient for the pressed/active state
background-image: none;
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
}
}
.badge {
color: $background;
background-color: $color;
}
}
// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}

2
less/mixins/center-block.less → scss/mixins/_center-block.scss
View File

@ -1,6 +1,6 @@
// Center-align a block level element
.center-block() {
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;

2
less/mixins/clearfix.less → scss/mixins/_clearfix.scss
View File

@ -10,7 +10,7 @@
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1

59
less/mixins/forms.less → scss/mixins/_forms.scss
View File

@ -1,9 +1,9 @@
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
@ -15,31 +15,31 @@
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label {
color: @text-color;
color: $text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
border-color: $border-color;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
border-color: darken($border-color, 10%);
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
@include box-shadow($shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
color: $text-color;
border-color: $border-color;
background-color: $background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
color: $text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
@ -52,12 +52,12 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus() {
@mixin form-control-focus() {
&:focus {
border-color: @input-border-focus;
border-color: $input-border-focus;
outline: 0;
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus;
.box-shadow(@shadow);
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@include box-shadow($shadow);
}
}
@ -66,20 +66,23 @@
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
.border-radius(@border-radius);
select& {
height: @input-height;
line-height: @input-height;
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}
textarea&,
select[multiple]& {
select#{$parent} {
height: $input-height;
line-height: $input-height;
}
textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}

56
scss/mixins/_gradients.scss Normal file
View File

@ -0,0 +1,56 @@
// Gradients
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

81
scss/mixins/_grid-framework.scss Normal file
View File

@ -0,0 +1,81 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
#{$list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-#{$class}-#{$i}";
}
#{$list} {
float: left;
}
}
@mixin calc-grid-column($index, $class, $type) {
@if ($type == width) and ($index > 0) {
.col-#{$class}-#{$index} {
width: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index > 0) {
.col-#{$class}-push-#{$index} {
left: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index == 0) {
.col-#{$class}-push-0 {
left: auto;
}
}
@if ($type == pull) and ($index > 0) {
.col-#{$class}-pull-#{$index} {
right: percentage(($index / $grid-columns));
}
}
@if ($type == pull) and ($index == 0) {
.col-#{$class}-pull-0 {
right: auto;
}
}
@if ($type == offset) {
.col-#{$class}-offset-#{$index} {
margin-left: percentage(($index / $grid-columns));
}
}
}
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
@for $i from 0 through $columns {
@include calc-grid-column($i, $class, $type);
}
}
// Create grid for specific class
@mixin make-grid($class) {
@include float-grid-columns($class);
@include loop-grid-columns($grid-columns, $class, width);
@include loop-grid-columns($grid-columns, $class, pull);
@include loop-grid-columns($grid-columns, $class, push);
@include loop-grid-columns($grid-columns, $class, offset);
}

41
scss/mixins/_grid.scss Normal file
View File

@ -0,0 +1,41 @@
/// Grid system
//
// Generate semantic grid columns with these mixins.
@mixin make-container($gutter: $grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@include clearfix();
}
@mixin make-row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
@mixin make-col($gutter: $grid-gutter-width) {
position: relative;
float: left;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-col-span($columns) {
width: percentage(($columns / $grid-columns));
}
@mixin make-col-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
right: percentage(($columns / $grid-columns));
}

4
less/mixins/hide-text.less → scss/mixins/_hide-text.scss
View File

@ -1,6 +1,6 @@
// CSS image replacement
.text-hide() {
font: ~"0/0" a;
@mixin text-hide() {
font: "0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;

14
less/mixins/image.less → scss/mixins/_image.scss
View File

@ -6,8 +6,9 @@
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display;
@mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
@ -17,8 +18,9 @@
//
// Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url("#{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
@ -27,7 +29,7 @@
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
background-image: url("#{file-2x}");
background-size: $width-1x $height-1x;
}
}

12
scss/mixins/_label.scss Normal file
View File

@ -0,0 +1,12 @@
// Labels
@mixin label-variant($color) {
background-color: $color;
&[href] {
&:hover,
&:focus {
background-color: darken($color, 10%);
}
}
}

30
scss/mixins/_list-group.scss Normal file
View File

@ -0,0 +1,30 @@
// List Groups
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{state} {
color: $color;
background-color: $background;
}
a.list-group-item-#{state} {
color: $color;
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
color: $color;
background-color: darken($background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: $color;
border-color: $color;
}
}
}

25
scss/mixins/_media-queries.scss Normal file
View File

@ -0,0 +1,25 @@
// Media query mixins
@mixin media-xs() {
@media (max-width: $screen-xs-max) { @content }
}
@mixin media-sm() {
@media (min-width: $screen-sm-min) { @content }
}
@mixin media-sm-max() {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content }
}
@mixin media-md() {
@media (min-width: $screen-md-min) { @content }
}
@mixin media-md-max() {
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content }
}
@mixin media-lg() {
@media (min-width: $screen-lg-min) { @content }
}

6
less/mixins/nav-divider.less → scss/mixins/_nav-divider.scss
View File

@ -2,9 +2,9 @@
//
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
@mixin nav-divider($color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
margin: (($line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
background-color: $color;
}

8
less/mixins/nav-vertical-align.less → scss/mixins/_navbar-align.scss
View File

@ -3,7 +3,7 @@
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// @mixin navbar-vertical-align($element-height) {
// margin-top: (($navbar-height - $element-height) / 2);
// margin-bottom: (($navbar-height - $element-height) / 2);
// }

23
scss/mixins/_pagination.scss Normal file
View File

@ -0,0 +1,23 @@
// Pagination
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
}
&:first-child {
> a,
> span {
@include border-left-radius($border-radius);
}
}
&:last-child {
> a,
> span {
@include border-right-radius($border-radius);
}
}
}
}

17
scss/mixins/_progress.scss Normal file
View File

@ -0,0 +1,17 @@
// Progress bars
@mixin progress-variant($color) {
&[value]::-webkit-progress-value {
background-color: $color;
}
&[value]::-moz-progress-bar {
background-color: $color;
}
@media screen and ("min-width:0\0") {
.progress-bar {
background-color: $color;
}
}
}

4
less/mixins/reset-filter.less → scss/mixins/_reset-filter.scss
View File

@ -3,6 +3,6 @@
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
@mixin reset-filter() {
filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

4
less/mixins/resize.less → scss/mixins/_resize.scss
View File

@ -1,6 +1,6 @@
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
}

21
scss/mixins/_responsive-visibility.scss Normal file
View File

@ -0,0 +1,21 @@
// Responsive utilities
//
// More easily include all the states for responsive-utilities.less.
// [converter] $parent hack
@mixin responsive-visibility($parent) {
#{$parent} {
display: block !important;
}
table#{$parent} { display: table; }
tr#{$parent} { display: table-row !important; }
th#{$parent},
td#{$parent} { display: table-cell !important; }
}
// [converter] $parent hack
@mixin responsive-invisibility($parent) {
#{$parent} {
display: none !important;
}
}

10
scss/mixins/_size.scss Normal file
View File

@ -0,0 +1,10 @@
// Sizing shortcuts
@mixin size($width, $height) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}

2
less/mixins/tab-focus.less → scss/mixins/_tab-focus.scss
View File

@ -1,6 +1,6 @@
// WebKit-style focus
.tab-focus() {
@mixin tab-focus() {
// Default
outline: thin dotted;
// WebKit

24
less/mixins/table-row.less → scss/mixins/_table-row.scss
View File

@ -1,28 +1,28 @@
// Tables
.table-row-variant(@state; @background) {
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.@{state},
> th.@{state},
&.@{state} > td,
&.@{state} > th {
background-color: @background;
> td.#{$state},
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
background-color: $background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td,
&:hover > .@{state},
&.@{state}:hover > th {
background-color: darken(@background, 5%);
> td.#{$state}:hover,
> th.#{$state}:hover,
&.#{$state}:hover > td,
&:hover > .#{$state},
&.#{$state}:hover > th {
background-color: darken($background, 5%);
}
}
}

Some files were not shown because too many files have changed in this diff Show More