From 04d92a420a15311b5033215d843e853aae540f5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 Nov 2017 18:06:34 -0800 Subject: move from csslint to stylelint --- 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 | 105 +++---- 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 | 184 +++++------ 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 +- 56 files changed, 802 insertions(+), 785 deletions(-) delete mode 100644 less/.csslintrc (limited to 'less') diff --git a/less/.csslintrc b/less/.csslintrc deleted file mode 100644 index 005b86236..000000000 --- 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 c4199db92..3101fec27 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 6ee16dca4..be7f8d0cc 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 cb01d503f..f21d0d89d 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 16db0c613..6c2b6f7c6 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 9cbb8f416..2e1166a10 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 252011e9e..699d67b20 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 6d5bfe087..a1f2affe2 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 a08b4d48c..4e07976d5 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 0bcee910a..711e1e2d9 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 f6876c1a9..542c00461 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 9377d3846..abad9d08d 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