mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 04:51:39 +02:00
Code Issues Releases Wiki Activity

convert to scss

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

83
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: {
// 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: {
includePaths: ['scss'],
precision: 6,
sourceMap: true
},
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'
// 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']);

4646
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;
}

4646
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