From 04d92a420a15311b5033215d843e853aae540f5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 Nov 2017 18:06:34 -0800 Subject: [PATCH 01/11] move from csslint to stylelint --- Gruntfile.js | 30 +- docs/assets/less/ads.less | 2 + docs/assets/less/algolia.less | 19 +- docs/assets/less/anchor.less | 6 +- docs/assets/less/customizer.less | 14 +- docs/assets/less/docs.less | 8 +- docs/assets/less/examples.less | 34 +- docs/assets/less/featurettes.less | 4 +- .../less/ie10-viewport-bug-workaround.less | 2 + docs/assets/less/masthead.less | 10 +- docs/assets/less/responsive-tests.less | 8 +- docs/assets/less/sidebar.less | 6 +- docs/assets/less/skip-link.less | 2 + docs/assets/less/syntax.less | 113 ++-- docs/assets/less/zero-clipboard.less | 2 +- grunt/.stylelintrc | 247 ++++++++ less/.csslintrc | 19 - less/alerts.less | 3 +- less/badges.less | 6 +- less/breadcrumbs.less | 4 +- less/button-groups.less | 12 +- less/buttons.less | 10 +- less/carousel.less | 61 +- less/close.less | 2 + less/code.less | 6 +- less/component-animations.less | 3 + less/dropdowns.less | 43 +- less/forms.less | 107 ++-- less/glyphicons.less | 548 +++++++++--------- less/grid.less | 2 +- less/input-groups.less | 6 +- less/jumbotron.less | 10 +- less/labels.less | 2 +- less/list-group.less | 64 +- less/media.less | 2 +- less/mixins/alerts.less | 3 +- less/mixins/border-radius.less | 8 +- less/mixins/buttons.less | 16 +- less/mixins/center-block.less | 2 +- less/mixins/clearfix.less | 10 +- less/mixins/forms.less | 8 +- less/mixins/gradients.less | 14 +- less/mixins/grid-framework.less | 2 +- less/mixins/grid.less | 14 +- less/mixins/hide-text.less | 2 + less/mixins/image.less | 15 +- less/mixins/opacity.less | 5 +- less/mixins/reset-text.less | 8 +- less/mixins/resize.less | 2 +- less/mixins/responsive-visibility.less | 4 +- less/mixins/vendor-prefixes.less | 4 +- less/modals.less | 12 +- less/navbar.less | 40 +- less/navs.less | 10 +- less/normalize.less | 2 + less/pager.less | 4 +- less/pagination.less | 27 +- less/panels.less | 10 +- less/popovers.less | 91 ++- less/print.less | 150 ++--- less/progress-bars.less | 8 +- less/responsive-embed.less | 4 +- less/responsive-utilities.less | 2 + less/scaffolding.less | 12 +- less/tables.less | 48 +- less/theme.less | 36 +- less/thumbnails.less | 4 +- less/tooltip.less | 26 +- less/type.less | 22 +- less/utilities.less | 2 + less/variables.less | 14 +- less/wells.less | 4 +- package.json | 5 +- 73 files changed, 1181 insertions(+), 886 deletions(-) create mode 100644 grunt/.stylelintrc delete mode 100644 less/.csslintrc diff --git a/Gruntfile.js b/Gruntfile.js index dff1fadb9e..8b282a20b9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -218,24 +218,26 @@ module.exports = function (grunt) { } }, - csslint: { + stylelint: { options: { - csslintrc: 'less/.csslintrc' + configFile: 'grunt/.stylelintrc', + formatter: 'string', + ignoreDisables: false, + failOnError: true, + outputFile: '', + reportNeedlessDisables: false, + syntax: '' }, dist: [ - 'dist/css/bootstrap.css', - 'dist/css/bootstrap-theme.css' + 'less/**/*.less' + ], + docs: [ + 'docs/assets/less/**/*.less' ], examples: [ 'docs/examples/**/*.css' - ], - docs: { - options: { - ids: false, - 'overqualified-elements': false - }, - src: 'docs/assets/css/src/docs.css' - } + ] + }, cssmin: { @@ -464,7 +466,7 @@ module.exports = function (grunt) { if (runSubset('core') && // Skip core tests if this is a Savage build process.env.TRAVIS_REPO_SLUG !== 'twbs-savage/bootstrap') { - testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'csslint:dist', 'test-js', 'docs']); + testSubtasks = testSubtasks.concat(['dist-css', 'dist-js', 'stylelint:dist', 'test-js', 'docs']); } // Skip HTML validation if running a different subset of the test suite if (runSubset('validate-html') && @@ -515,7 +517,7 @@ module.exports = function (grunt) { // Docs task. grunt.registerTask('docs-css', ['autoprefixer:docs', 'autoprefixer:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:minifyDocs']); - grunt.registerTask('lint-docs-css', ['csslint:docs', 'csslint:examples']); + grunt.registerTask('lint-docs-css', ['stylelint:docs', 'stylelint:examples']); grunt.registerTask('docs-js', ['uglify:docsJs', 'uglify:customize']); grunt.registerTask('lint-docs-js', ['jshint:assets', 'jscs:assets']); grunt.registerTask('docs', ['docs-css', 'lint-docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs', 'build-glyphicons-data', 'build-customizer']); diff --git a/docs/assets/less/ads.less b/docs/assets/less/ads.less index 168a01fc61..9e64da5209 100644 --- a/docs/assets/less/ads.less +++ b/docs/assets/less/ads.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-max-id, declaration-no-important */ + #carbonads { display: block; padding: 15px 15px 15px 160px; diff --git a/docs/assets/less/algolia.less b/docs/assets/less/algolia.less index b6484f04fb..7cab593397 100644 --- a/docs/assets/less/algolia.less +++ b/docs/assets/less/algolia.less @@ -1,3 +1,5 @@ +/* stylelint-disable declaration-no-important, selector-attribute-quotes */ + // Docsearch overrides // // `!important` indicates overridden properties. @@ -12,8 +14,9 @@ padding: 10px 0 !important; background-color: #fff; background-clip: padding-box; - border: 1px solid rgba(0,0,0,.1); - box-shadow: 0 8px 15px rgba(0,0,0,.175); + border: 1px solid #ddd; + border: 1px solid rgba(0, 0, 0, .1); + box-shadow: 0 8px 15px rgba(0, 0, 0, .175); @media min-width(@screen-sm-min) { width: 175%; @@ -79,7 +82,7 @@ .algolia-docsearch-suggestion--category-header { padding-top: 10px !important; margin-top: 10px !important; - border-top: 1px solid rgba(0,0,0,.1); + border-top: 1px solid #eee; } } @@ -100,7 +103,7 @@ padding: 0 15px 8px !important; margin-top: -4px; font-size: 13px !important; - font-weight: normal; + font-weight: 400; line-height: 1.25 !important; } @@ -112,7 +115,7 @@ font-size: 10px !important; line-height: 1 !important; color: #767676 !important; - border-top: 1px solid rgba(0,0,0,.1); + border-top: 1px solid #eee; } .algolia-docsearch-footer--logo { @@ -125,14 +128,14 @@ .algolia-docsearch-suggestion--highlight { color: #5f2dab; - background-color: rgba(154, 132, 187, .12); + background-color: #eee; } .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 rgba(95,45,171,.5) !important; + box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important; } .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background-color: rgba(208,189,236,.15) !important; + background-color: #e5e5e5 !important; } } diff --git a/docs/assets/less/anchor.less b/docs/assets/less/anchor.less index b7718a8377..3054ec8c01 100644 --- a/docs/assets/less/anchor.less +++ b/docs/assets/less/anchor.less @@ -1,3 +1,5 @@ +/* stylelint-disable property-no-vendor-prefix */ + .anchorjs-link { color: inherit; } @@ -11,8 +13,8 @@ *:hover > .anchorjs-link { opacity: .75; -webkit-transition: color .16s linear; - -o-transition: color .16s linear; - transition: color .16s linear; + -o-transition: color .16s linear; + transition: color .16s linear; } *:hover > .anchorjs-link:hover, diff --git a/docs/assets/less/customizer.less b/docs/assets/less/customizer.less index c36fbc15f0..a87fca971e 100644 --- a/docs/assets/less/customizer.less +++ b/docs/assets/less/customizer.less @@ -1,3 +1,5 @@ +/* stylelint-disable property-no-vendor-prefix, selector-max-id */ + .bs-customizer .toggle { float: right; margin-top: 25px; @@ -36,7 +38,7 @@ // For the variables, use regular weight #less-section label { - font-weight: normal; + font-weight: 400; } // Downloads @@ -55,8 +57,8 @@ color: #fff; background-color: #d9534f; border-bottom: 1px solid #b94441; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); - box-shadow: inset 0 1px 0 rgba(255,255,255,.25); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } .bs-customizer-alert .close { margin-top: -4px; @@ -73,8 +75,8 @@ color: #fff; background-color: #a83c3a; border-color: #973634; - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); } .bs-dropzone { @@ -97,7 +99,7 @@ } .bs-dropzone .lead { margin-bottom: 10px; - font-weight: normal; + font-weight: 400; color: #333; } #import-manual-trigger { diff --git a/docs/assets/less/docs.less b/docs/assets/less/docs.less index 8bf588ade8..4ef7a7d3d3 100644 --- a/docs/assets/less/docs.less +++ b/docs/assets/less/docs.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-max-type, selector-no-qualifying-type, declaration-no-important */ + /*! * Bootstrap Docs (http://getbootstrap.com) * Copyright 2011-2017 Twitter, Inc. @@ -51,7 +53,7 @@ body { // Keep code small in tables on account of limited space .table code { font-size: 13px; - font-weight: normal; + font-weight: 400; } // Inline code within headings retain the heading's background-color @@ -106,7 +108,7 @@ h1[id] { .v4-tease { display: block; padding: 15px 20px; - font-weight: bold; + font-weight: 700; color: #fff; text-align: center; background-color: #0275d8; @@ -119,7 +121,7 @@ h1[id] { /* Nullify ill-advised printing of hrefs; see #18711 */ @media print { - a[href]:after { + a[href]::after { content: "" !important; } } diff --git a/docs/assets/less/examples.less b/docs/assets/less/examples.less index 6407cc97b6..8d92ac52df 100644 --- a/docs/assets/less/examples.less +++ b/docs/assets/less/examples.less @@ -1,3 +1,5 @@ +/* stylelint-disable property-no-vendor-prefix, selector-max-id, selector-no-qualifying-type */ + // Grid examples // // Highlight the grid columns within the docs so folks can see their padding, @@ -10,9 +12,9 @@ padding-top: 10px; padding-bottom: 10px; background-color: #eee; - background-color: rgba(86,61,124,.15); + background-color: rgba(86, 61, 124, .15); border: 1px solid #ddd; - border: 1px solid rgba(86,61,124,.2); + border: 1px solid rgba(86, 61, 124, .2); } // Examples @@ -27,16 +29,16 @@ border-color: #e5e5e5 #eee #eee; border-style: solid; border-width: 1px 0; - -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); - box-shadow: inset 0 3px 6px rgba(0,0,0,.05); + -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05); + box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05); } // Echo out a label for the example -.bs-example:after { +.bs-example::after { position: absolute; top: 15px; left: 15px; font-size: 12px; - font-weight: bold; + font-weight: 700; color: #959595; text-transform: uppercase; letter-spacing: 1px; @@ -65,7 +67,7 @@ border-width: 1px; border-radius: 4px 4px 0 0; -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .bs-example + .highlight, .bs-example + .zero-clipboard + .highlight { @@ -156,9 +158,11 @@ } // Forms -.bs-example-control-sizing select, -.bs-example-control-sizing input[type="text"] + input[type="text"] { - margin-top: 10px; +.bs-example-control-sizing { + select, + input[type="text"] + input[type="text"] { + margin-top: 10px; + } } .bs-example-form .input-group { margin-bottom: 10px; @@ -195,7 +199,7 @@ .bs-navbar-top-example { padding-bottom: 45px; } -.bs-navbar-top-example:after { +.bs-navbar-top-example::after { top: auto; bottom: 15px; } @@ -311,10 +315,10 @@ // Pseudo :focus state for showing how it looks in the docs #focusedInput { - border-color: rgb(204,204,204); // Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback - border-color: rgba(82,168,236,.8); + border-color: rgb(204, 204, 204); // Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback + border-color: rgba(82, 168, 236, .8); outline: 0; outline: thin dotted \9; // IE6-9 - -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6); - box-shadow: 0 0 8px rgba(82,168,236,.6); + -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, .6); + box-shadow: 0 0 8px rgba(82, 168, 236, .6); } diff --git a/docs/assets/less/featurettes.less b/docs/assets/less/featurettes.less index 7df3e94d54..ec939c7b06 100644 --- a/docs/assets/less/featurettes.less +++ b/docs/assets/less/featurettes.less @@ -16,7 +16,7 @@ .bs-docs-featurette-title { margin-bottom: 5px; font-size: 30px; - font-weight: normal; + font-weight: 400; color: #333; } .half-rule { @@ -25,7 +25,7 @@ } .bs-docs-featurette h3 { margin-bottom: 5px; - font-weight: normal; + font-weight: 400; color: #333; } .bs-docs-featurette-img { diff --git a/docs/assets/less/ie10-viewport-bug-workaround.less b/docs/assets/less/ie10-viewport-bug-workaround.less index 6ac824f93f..a09b8d9ff8 100644 --- a/docs/assets/less/ie10-viewport-bug-workaround.less +++ b/docs/assets/less/ie10-viewport-bug-workaround.less @@ -1,3 +1,5 @@ +/* stylelint-disable at-rule-no-vendor-prefix */ + /*! * IE10 viewport hack for Surface/desktop Windows 8 bug * Copyright 2014-2015 Twitter, Inc. diff --git a/docs/assets/less/masthead.less b/docs/assets/less/masthead.less index 20c9a2671d..284fdece70 100644 --- a/docs/assets/less/masthead.less +++ b/docs/assets/less/masthead.less @@ -1,17 +1,19 @@ +/* stylelint-disable value-no-vendor-prefix, function-name-case */ + .bs-docs-masthead, .bs-docs-header { position: relative; padding: 30px 0; color: #cdbfe3; text-align: center; - text-shadow: 0 1px 0 rgba(0,0,0,.1); + text-shadow: 0 1px 0 rgba(0, 0, 0, .1); background-color: #6f5499; background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%); - background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%); - background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); + background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%); + background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%); background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#563d7c", endColorstr="#6F5499", GradientType=0); } // Masthead (headings and download button) diff --git a/docs/assets/less/responsive-tests.less b/docs/assets/less/responsive-tests.less index bf9d002d2b..784fc6c46b 100644 --- a/docs/assets/less/responsive-tests.less +++ b/docs/assets/less/responsive-tests.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-no-qualifying-type, declaration-no-important */ + // Responsive (scrollable) doc tables .table-responsive .highlight pre { white-space: normal; @@ -7,11 +9,11 @@ .bs-table th small, .responsive-utilities th small { display: block; - font-weight: normal; + font-weight: 400; color: #999; } .responsive-utilities tbody th { - font-weight: normal; + font-weight: 400; } .responsive-utilities td { text-align: center; @@ -36,7 +38,7 @@ display: block; padding: 15px 10px; font-size: 14px; - font-weight: bold; + font-weight: 700; line-height: 1.1; text-align: center; border-radius: 4px; diff --git a/docs/assets/less/sidebar.less b/docs/assets/less/sidebar.less index 5e9705257b..fe36cd57d7 100644 --- a/docs/assets/less/sidebar.less +++ b/docs/assets/less/sidebar.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-max-compound-selectors */ + // By default it's not affixed in mobile views, so undo that .bs-docs-sidebar.affix { position: static; @@ -39,7 +41,7 @@ .bs-docs-sidebar .nav > .active:hover > a, .bs-docs-sidebar .nav > .active:focus > a { padding-left: 18px; - font-weight: bold; + font-weight: 700; color: #563d7c; background-color: transparent; border-left: 2px solid #563d7c; @@ -55,7 +57,7 @@ padding-bottom: 1px; padding-left: 30px; font-size: 12px; - font-weight: normal; + font-weight: 400; } .bs-docs-sidebar .nav .nav > li > a:hover, .bs-docs-sidebar .nav .nav > li > a:focus { diff --git a/docs/assets/less/skip-link.less b/docs/assets/less/skip-link.less index 174a64fe08..a64f3319ae 100644 --- a/docs/assets/less/skip-link.less +++ b/docs/assets/less/skip-link.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-max-id */ + #skippy { display: block; padding: 1em; diff --git a/docs/assets/less/syntax.less b/docs/assets/less/syntax.less index ab8cc60342..a43045fe91 100644 --- a/docs/assets/less/syntax.less +++ b/docs/assets/less/syntax.less @@ -1,64 +1,65 @@ -.hll { background-color: #ffffcc } +/* stylelint-disable declaration-block-single-line-max-declarations */ + +.hll { background-color: #ffc; } .c { color: #999; } -.err { color: #AA0000; background-color: #FFAAAA } -.k { color: #006699; } -.o { color: #555555 } +.err { color: #a00; background-color: #faa; } +.k { color: #069; } +.o { color: #555; } .cm { color: #999; } -.cp { color: #009999 } +.cp { color: #099; } .c1 { color: #999; } .cs { color: #999; } -.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } -.ge { font-style: italic } -.gr { color: #FF0000 } -.gh { color: #003300; } -.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } -.go { color: #AAAAAA } -.gp { color: #000099; } -.gs { } -.gu { color: #003300; } -.gt { color: #99CC66 } -.kc { color: #006699; } -.kd { color: #006699; } -.kn { color: #006699; } -.kp { color: #006699 } -.kr { color: #006699; } -.kt { color: #007788; } -.m { color: #FF6600 } -.s { color: #d44950 } -.na { color: #4f9fcf } -.nb { color: #336666 } -.nc { color: #00AA88; } -.no { color: #336600 } -.nd { color: #9999FF } -.ni { color: #999999; } -.ne { color: #CC0000; } -.nf { color: #CC00FF } -.nl { color: #9999FF } -.nn { color: #00CCFF; } +.gd { background-color: #fcc; border: 1px solid #c00; } +.ge { font-style: italic; } +.gr { color: #f00; } +.gh { color: #030; } +.gi { background-color: #cfc; border: 1px solid #0c0; } +.go { color: #aaa; } +.gp { color: #009; } +.gu { color: #030; } +.gt { color: #9c6; } +.kc { color: #069; } +.kd { color: #069; } +.kn { color: #069; } +.kp { color: #069; } +.kr { color: #069; } +.kt { color: #078; } +.m { color: #f60; } +.s { color: #d44950; } +.na { color: #4f9fcf; } +.nb { color: #366; } +.nc { color: #0a8; } +.no { color: #360; } +.nd { color: #99f; } +.ni { color: #999; } +.ne { color: #c00; } +.nf { color: #c0f; } +.nl { color: #99f; } +.nn { color: #0cf; } .nt { color: #2f6f9f; } -.nv { color: #003333 } -.ow { color: #000000; } -.w { color: #bbbbbb } -.mf { color: #FF6600 } -.mh { color: #FF6600 } -.mi { color: #FF6600 } -.mo { color: #FF6600 } -.sb { color: #CC3300 } -.sc { color: #CC3300 } -.sd { color: #CC3300; font-style: italic } -.s2 { color: #CC3300 } -.se { color: #CC3300; } -.sh { color: #CC3300 } -.si { color: #AA0000 } -.sx { color: #CC3300 } -.sr { color: #33AAAA } -.s1 { color: #CC3300 } -.ss { color: #FFCC33 } -.bp { color: #336666 } -.vc { color: #003333 } -.vg { color: #003333 } -.vi { color: #003333 } -.il { color: #FF6600 } +.nv { color: #033; } +.ow { color: #000; } +.w { color: #bbb; } +.mf { color: #f60; } +.mh { color: #f60; } +.mi { color: #f60; } +.mo { color: #f60; } +.sb { color: #c30; } +.sc { color: #c30; } +.sd { font-style: italic; color: #c30; } +.s2 { color: #c30; } +.se { color: #c30; } +.sh { color: #c30; } +.si { color: #a00; } +.sx { color: #c30; } +.sr { color: #3aa; } +.s1 { color: #c30; } +.ss { color: #fc3; } +.bp { color: #366; } +.vc { color: #033; } +.vg { color: #033; } +.vi { color: #033; } +.il { color: #f60; } .css .o, .css .o + .nt, diff --git a/docs/assets/less/zero-clipboard.less b/docs/assets/less/zero-clipboard.less index 13cfb149b2..688c8de770 100644 --- a/docs/assets/less/zero-clipboard.less +++ b/docs/assets/less/zero-clipboard.less @@ -14,7 +14,7 @@ cursor: pointer; background-color: #fff; border: 1px solid #e1e1e8; - border-radius: 0 4px 0 4px; + border-radius: 0 4px; } .btn-clipboard-hover { color: #fff; diff --git a/grunt/.stylelintrc b/grunt/.stylelintrc new file mode 100644 index 0000000000..cb57941210 --- /dev/null +++ b/grunt/.stylelintrc @@ -0,0 +1,247 @@ +{ + "extends": ["stylelint-config-standard"], + "plugins": [ + "stylelint-order" + ], + "rules": { + "at-rule-empty-line-before": [null, + "except": ["first-nested"] + ], + "at-rule-name-space-after": "always", + "at-rule-no-vendor-prefix": true, + "at-rule-semicolon-space-before": "never", + "block-closing-brace-empty-line-before": null, + "block-closing-brace-newline-after": null, + "block-opening-brace-space-before": null, + "color-named": "never", + "declaration-block-semicolon-newline-after": "always-multi-line", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-empty-line-before": null, + "declaration-no-important": true, + "font-family-name-quotes": "always-where-recommended", + "font-weight-notation": "numeric", + "function-url-no-scheme-relative": true, + "function-url-quotes": "always", + "length-zero-no-unit": true, + "max-empty-lines": 2, + "max-line-length": null, + "media-feature-name-no-vendor-prefix": true, + "media-feature-parentheses-space-inside": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "never", + "no-descending-specificity": null, + "no-duplicate-selectors": true, + "number-leading-zero": "never", + "order/properties-order": [ + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "box-sizing", + "display", + "flex", + "flex-align", + "flex-basis", + "flex-direction", + "flex-wrap", + "flex-flow", + "flex-grow", + "flex-order", + "flex-pack", + "align-items", + "align-self", + "justify-content", + "order", + "float", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "overflow", + "overflow-x", + "overflow-y", + "-webkit-overflow-scrolling", + "-ms-overflow-x", + "-ms-overflow-y", + "-ms-overflow-style", + "clip", + "clear", + "font", + "font-family", + "font-size", + "font-style", + "font-weight", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "hyphens", + "line-height", + "color", + "text-align", + "text-align-last", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-decoration", + "text-indent", + "text-justify", + "text-outline", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-shadow", + "text-transform", + "text-wrap", + "-webkit-text-size-adjust", + "-ms-text-size-adjust", + "letter-spacing", + "-ms-word-break", + "word-break", + "word-spacing", + "-ms-word-wrap", + "word-wrap", + "overflow-wrap", + "tab-size", + "white-space", + "vertical-align", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "pointer-events", + "-ms-touch-action", + "touch-action", + "cursor", + "visibility", + "zoom", + "table-layout", + "empty-cells", + "caption-side", + "border-spacing", + "border-collapse", + "content", + "quotes", + "counter-reset", + "counter-increment", + "resize", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "background", + "background-color", + "background-image", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "background-position-y", + "background-clip", + "background-origin", + "background-size", + "filter", + "border", + "border-color", + "border-style", + "border-width", + "border-top", + "border-top-color", + "border-top-style", + "border-top-width", + "border-right", + "border-right-color", + "border-right-style", + "border-right-width", + "border-bottom", + "border-bottom-color", + "border-bottom-style", + "border-bottom-width", + "border-left", + "border-left-color", + "border-left-style", + "border-left-width", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "border-image", + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "box-shadow", + "opacity", + "-ms-interpolation-mode", + "transition", + "transition-delay", + "transition-timing-function", + "transition-duration", + "transition-property", + "transform", + "transform-origin", + "animation", + "animation-name", + "animation-duration", + "animation-play-state", + "animation-timing-function", + "animation-delay", + "animation-iteration-count", + "animation-direction" + ], + "property-no-vendor-prefix": true, + "rule-empty-line-before": null, + "selector-attribute-quotes": "always", + "selector-list-comma-newline-after": "always", + "selector-list-comma-newline-before": "never-multi-line", + "selector-list-comma-space-after": "always-single-line", + "selector-list-comma-space-before": "never-single-line", + "selector-max-attribute": 2, + "selector-max-class": 4, + "selector-max-combinators": 4, + "selector-max-compound-selectors": 4, + "selector-max-empty-lines": 1, + "selector-max-id": 0, + "selector-max-specificity": null, + "selector-max-type": 2, + "selector-max-universal": 1, + "selector-no-qualifying-type": true, + "selector-no-vendor-prefix": true, + "string-quotes": "double", + "value-keyword-case": "lower", + "value-list-comma-newline-after": "never-multi-line", + "value-list-comma-newline-before": "never-multi-line", + "value-list-comma-space-after": "always", + "value-no-vendor-prefix": true + } +} diff --git a/less/.csslintrc b/less/.csslintrc deleted file mode 100644 index 005b86236c..0000000000 --- a/less/.csslintrc +++ /dev/null @@ -1,19 +0,0 @@ -{ - "adjoining-classes": false, - "box-sizing": false, - "box-model": false, - "compatible-vendor-prefixes": false, - "floats": false, - "font-sizes": false, - "gradients": false, - "important": false, - "known-properties": false, - "outline-none": false, - "qualified-headings": false, - "regex-selectors": false, - "shorthand": false, - "text-indent": false, - "unique-headings": false, - "universal-selector": false, - "unqualified-attributes": false -} diff --git a/less/alerts.less b/less/alerts.less index c4199db927..3101fec270 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -15,8 +15,7 @@ // Headings for larger alerts h4 { margin-top: 0; - // Specified for the h4 to prevent conflicts of changing @headings-color - color: inherit; + color: inherit; // Specified for the h4 to prevent conflicts of changing @headings-color } // Provide class for links that match alerts diff --git a/less/badges.less b/less/badges.less index 6ee16dca41..be7f8d0cc6 100644 --- a/less/badges.less +++ b/less/badges.less @@ -10,11 +10,11 @@ padding: 3px 7px; font-size: @font-size-small; font-weight: @badge-font-weight; - color: @badge-color; line-height: @badge-line-height; - vertical-align: middle; - white-space: nowrap; + color: @badge-color; text-align: center; + white-space: nowrap; + vertical-align: middle; background-color: @badge-bg; border-radius: @badge-border-radius; diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index cb01d503fb..f21d0d89db 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -13,10 +13,10 @@ > li { display: inline-block; - + li:before { - content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space + + li::before { padding: 0 5px; color: @breadcrumb-color; + content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space } } diff --git a/less/button-groups.less b/less/button-groups.less index 16db0c6135..6c2b6f7c67 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-no-qualifying-type */ + // // Button groups // -------------------------------------------------- @@ -103,18 +105,18 @@ // Give the line between buttons some depth .btn-group > .btn + .dropdown-toggle { - padding-left: 8px; padding-right: 8px; + padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { - padding-left: 12px; padding-right: 12px; + padding-left: 12px; } // 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)); + .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 { @@ -205,8 +207,8 @@ border-collapse: separate; > .btn, > .btn-group { - float: none; display: table-cell; + float: none; width: 1%; } > .btn-group .btn { @@ -237,7 +239,7 @@ input[type="radio"], input[type="checkbox"] { position: absolute; - clip: rect(0,0,0,0); + clip: rect(0, 0, 0, 0); pointer-events: none; } } diff --git a/less/buttons.less b/less/buttons.less index 9cbb8f416f..2e1166a101 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-no-qualifying-type */ + // // Buttons // -------------------------------------------------- @@ -11,12 +13,12 @@ margin-bottom: 0; // For input.btn font-weight: @btn-font-weight; text-align: center; + white-space: nowrap; 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: 1px solid transparent; - white-space: nowrap; .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); .user-select(none); @@ -38,9 +40,9 @@ &:active, &.active { - outline: 0; background-image: none; - .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + outline: 0; + .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125)); } &.disabled, @@ -92,8 +94,8 @@ // Make a button look and behave like a link .btn-link { + font-weight: 400; color: @link-color; - font-weight: normal; border-radius: 0; &, diff --git a/less/carousel.less b/less/carousel.less index 252011e9e2..699d67b20c 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -1,3 +1,5 @@ +/* stylelint-disable media-feature-name-no-unknown */ + // // Carousel // -------------------------------------------------- @@ -10,12 +12,12 @@ .carousel-inner { position: relative; - overflow: hidden; width: 100%; + overflow: hidden; > .item { - display: none; position: relative; + display: none; .transition(.6s ease-in-out left); // Account for jankitude on images @@ -27,8 +29,8 @@ // WebKit CSS3 transforms for supported devices @media all and (transform-3d), (-webkit-transform-3d) { - .transition-transform(~'0.6s ease-in-out'); - .backface-visibility(~'hidden'); + .transition-transform(~"0.6s ease-in-out"); + .backface-visibility(~"hidden"); .perspective(1000px); &.next, @@ -93,34 +95,34 @@ .carousel-control { position: absolute; top: 0; - left: 0; bottom: 0; + left: 0; 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; background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug + .opacity(@carousel-control-opacity); // 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)); + #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)); + left: auto; + #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; text-decoration: none; + outline: 0; .opacity(.9); } @@ -131,9 +133,9 @@ .glyphicon-chevron-right { position: absolute; top: 50%; - margin-top: -10px; z-index: 5; display: inline-block; + margin-top: -10px; } .icon-prev, .glyphicon-chevron-left { @@ -147,21 +149,20 @@ } .icon-prev, .icon-next { - width: 20px; + width: 20px; height: 20px; - line-height: 1; font-family: serif; + line-height: 1; } - .icon-prev { - &:before { - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + &::before { + content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) } } .icon-next { - &:before { - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + &::before { + content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) } } } @@ -177,21 +178,18 @@ left: 50%; z-index: 15; width: 60%; - margin-left: -30%; padding-left: 0; - list-style: none; + margin-left: -30%; text-align: center; + list-style: none; li { display: inline-block; - width: 10px; + width: 10px; height: 10px; margin: 1px; text-indent: -999px; - border: 1px solid @carousel-indicator-border-color; - border-radius: 10px; cursor: pointer; - // IE8-9 hack for event handling // // Internet Explorer 8-9 does not support clicks on elements without a set @@ -202,12 +200,16 @@ // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we // set alpha transparency for the best results possible. background-color: #000 \9; // IE8 - background-color: rgba(0,0,0,0); // IE9 + background-color: rgba(0, 0, 0, 0); // IE9 + + border: 1px solid @carousel-indicator-border-color; + border-radius: 10px; } + .active { - margin: 0; - width: 12px; + width: 12px; height: 12px; + margin: 0; background-color: @carousel-indicator-active-bg; } } @@ -217,15 +219,16 @@ // Hidden by default for smaller viewports .carousel-caption { position: absolute; - left: 15%; right: 15%; bottom: 20px; + left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: @carousel-caption-color; text-align: center; text-shadow: @carousel-text-shadow; + & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } @@ -258,8 +261,8 @@ // Show and left align the captions .carousel-caption { - left: 20%; right: 20%; + left: 20%; padding-bottom: 30px; } diff --git a/less/close.less b/less/close.less index 6d5bfe087a..a1f2affe2e 100644 --- a/less/close.less +++ b/less/close.less @@ -1,3 +1,5 @@ +/* stylelint-disable property-no-vendor-prefix */ + // // Close icons // -------------------------------------------------- diff --git a/less/code.less b/less/code.less index a08b4d48c4..4e07976d54 100644 --- a/less/code.less +++ b/less/code.less @@ -27,12 +27,12 @@ kbd { color: @kbd-color; background-color: @kbd-bg; border-radius: @border-radius-small; - box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); kbd { padding: 0; font-size: 100%; - font-weight: bold; + font-weight: 700; box-shadow: none; } } @@ -44,9 +44,9 @@ pre { margin: 0 0 (@line-height-computed / 2); font-size: (@font-size-base - 1); // 14px to 13px line-height: @line-height-base; + color: @pre-color; word-break: break-all; word-wrap: break-word; - color: @pre-color; background-color: @pre-bg; border: 1px solid @pre-border-color; border-radius: @border-radius-base; diff --git a/less/component-animations.less b/less/component-animations.less index 0bcee910ac..711e1e2d93 100644 --- a/less/component-animations.less +++ b/less/component-animations.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-no-qualifying-type */ + // // Component animations // -------------------------------------------------- @@ -10,6 +12,7 @@ .fade { opacity: 0; .transition(opacity .15s linear); + &.in { opacity: 1; } diff --git a/less/dropdowns.less b/less/dropdowns.less index f6876c1a9b..542c00461a 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -10,10 +10,10 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: @caret-width-base dashed; - border-top: @caret-width-base solid ~"\9"; // IE8 + border-top: @caret-width-base dashed; + border-top: @caret-width-base solid ~"\9"; // IE8 border-right: @caret-width-base solid transparent; - border-left: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; } // The dropdown wrapper (div) @@ -38,15 +38,15 @@ min-width: 160px; padding: 5px 0; margin: 2px 0 0; // override default ul - list-style: none; font-size: @font-size-base; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + list-style: none; background-color: @dropdown-bg; + background-clip: padding-box; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; border-radius: @border-radius-base; - .box-shadow(0 6px 12px rgba(0,0,0,.175)); - background-clip: padding-box; + .box-shadow(0 6px 12px rgba(0, 0, 0, .175)); // Aligns the dropdown menu to right // @@ -66,20 +66,17 @@ display: block; padding: 3px 20px; clear: both; - font-weight: normal; + font-weight: 400; line-height: @line-height-base; color: @dropdown-link-color; white-space: nowrap; // prevent links from randomly breaking onto new lines - } -} -// Hover/Focus state -.dropdown-menu > li > a { - &:hover, - &:focus { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; + &:hover, + &:focus { + color: @dropdown-link-hover-color; + text-decoration: none; + background-color: @dropdown-link-hover-bg; + } } } @@ -90,8 +87,8 @@ &:focus { color: @dropdown-link-active-color; text-decoration: none; - outline: 0; background-color: @dropdown-link-active-bg; + outline: 0; } } @@ -110,10 +107,10 @@ &:hover, &:focus { text-decoration: none; + cursor: @cursor-disabled; background-color: transparent; background-image: none; // Remove CSS gradient .reset-filter(); - cursor: @cursor-disabled; } } @@ -135,8 +132,8 @@ // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown // menu with the parent. .dropdown-menu-right { - left: auto; // Reset the default from `.dropdown-menu` right: 0; + left: auto; // Reset the default from `.dropdown-menu` } // With v3, we enabled auto-flipping if you have a dropdown within a right // aligned nav component. To enable the undoing of that, we provide an override @@ -145,8 +142,8 @@ // This is only for left-aligning a dropdown menu within a `.navbar-right` or // `.pull-right` nav component. .dropdown-menu-left { - left: 0; right: auto; + left: 0; } // Dropdown section headers @@ -162,10 +159,10 @@ // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; - left: 0; + top: 0; right: 0; bottom: 0; - top: 0; + left: 0; z-index: (@zindex-dropdown - 10); } @@ -184,10 +181,10 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { + content: ""; border-top: 0; border-bottom: @caret-width-base dashed; border-bottom: @caret-width-base solid ~"\9"; // IE8 - content: ""; } // Different positioning for bottom up menu .dropdown-menu { diff --git a/less/forms.less b/less/forms.less index 9377d3846b..abad9d08da 100644 --- a/less/forms.less +++ b/less/forms.less @@ -1,3 +1,5 @@ +/* stylelint-disable selector-no-qualifying-type, property-no-vendor-prefix, media-feature-name-no-vendor-prefix, indentation */ + // // Forms // -------------------------------------------------- @@ -8,13 +10,13 @@ // Restyle and baseline non-control form elements. fieldset { - padding: 0; - margin: 0; - border: 0; // Chrome and Firefox set a `min-width: min-content;` on fieldsets, // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; + padding: 0; + margin: 0; + border: 0; } legend { @@ -33,7 +35,7 @@ label { display: inline-block; max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) margin-bottom: 5px; - font-weight: bold; + font-weight: 700; } @@ -43,9 +45,17 @@ label { // is required to ensure optimum display with or without those classes to better // address browser inconsistencies. -// Override content-box in Normalize (* isn't specific enough) input[type="search"] { + // Override content-box in Normalize (* isn't specific enough) .box-sizing(border-box); + + // Search inputs in iOS + // + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + -webkit-appearance: none; } // Position radios and checkboxes better @@ -54,6 +64,16 @@ input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px \9; // IE8-9 line-height: normal; + + // Apply same disabled cursor tweak as for inputs + // Some special care is needed because {% highlight html %}
{% endhighlight %} @@ -91,26 +91,26 @@
{% highlight html %}
{% endhighlight %} @@ -126,7 +126,7 @@

Swaps text to any data defined text state.

{% highlight html %} -