Bootstrap/scss/_reboot.scss

// Reboot
//
// Global resets to common HTML elements and more for easier usage by Bootstrap.
// Builds on the resets of Normalize.css.


// Reset the box-sizing
//
// Change from `box-sizing: content-box` to `border-box` so that when you add
// `padding` or `border`s to an element, the overall declared `width` does not
// change. For example, `width: 100px;` will always be `100px` despite the
// `border: 10px solid red;` and `padding: 20px;`.
//
// Heads up! This reset may cause conflicts with some third-party widgets. For
// recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing.
//
// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


// Make viewport responsive
//
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// Eventually @viewport will replace <meta name="viewport">. It's been manually
// prefixed for forward-compatibility.
//
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
// and the fix for that involves a snippet of JavaScript to sniff the user agent
// and apply some conditional CSS.
//
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.

@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@-webkit-viewport   { width: device-width; }
@viewport           { width: device-width; }


//
// Reset HTML, body, and more
//

html {
  // Sets a specific default `font-size` for user with `rem` type scales.
  font-size: $font-size-root;
  // Changes the default tap highlight to be completely transparent in iOS.
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  // Make the `body` use the `font-size-root`
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  // Go easy on the eyes and use something other than `#000` for text
  color: $text-color;
  // By default, `<body>` has no `background-color` so we set one as a best practice.
  background-color: $body-bg;
}


//
// Typography
//

// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  cursor: help;
  border-bottom-color: #ccc;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0; // Undo browser default
  margin-bottom: .5rem;
}

blockquote {
  margin: 0 0 1rem;
}


//
// Links
//

a {
  color: $link-color;
  text-decoration: none;

  @include hover-focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus();
  }
}


//
// Code
//

pre {
  // Remove browser default top margin
  margin-top: 0;
  // Reset browser default of `1em` to use `rem`s
  margin-bottom: 1rem;
}


//
// Figures
//

figure {
  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
  // We reset that to create a better flow in-page.
  margin: 0 0 1rem;
}


//
// Images
//

img {
  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
  // centers them. This won't apply should you reset them to `block` level.
  vertical-align: middle;
}


// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged

[role="button"] {
  cursor: pointer;
}


//
// Tables
//

table {
  // Reset for nesting within parents with `background-color`.
  background-color: $table-bg;
}

caption {
  caption-side: bottom;
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
}

th {
  // Centered by default, but left-align-ed to match the `td`s below.
  text-align: left;
}


//
// Forms
//

label {
  // Allow labels can use `margin` for spacing.
  display: inline-block;
}

input,
button,
select,
textarea {
  // Remove all `margin`s so our classes don't have to do it themselves.
  margin: 0;
  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
  // properly inherited. However, `line-height` isn't addressed there. Using this
  // ensures we don't need to unnessarily redeclare the global font stack.
  line-height: inherit;
}

textarea {
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  resize: vertical;
}

fieldset {
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  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;
}

legend {
  // Reset the entire legend element to match the `fieldset`
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
//  border: 0;
}

input[type="search"] {
  // 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;
}

// todo: needed?
output {
  display: inline-block;
//  font-size: $font-size-base;
//  line-height: $line-height-base;
//  color: $input-color;
}
edit comments a bit 2015-04-17 02:15:29 +02:00			`// Reboot`
standardize top level file comments 2012-06-29 06:46:45 +02:00			`//`
edit comments a bit 2015-04-17 02:15:29 +02:00			`// Global resets to common HTML elements and more for easier usage by Bootstrap.`
			`// Builds on the resets of Normalize.css.`
rearranging everything 2011-05-04 03:09:25 +02:00
update whitspace and comment styles 2011-08-17 07:58:01 +02:00
Set border-box globally instead 2013-03-10 19:24:07 +01:00			`// Reset the box-sizing`
Add ref in Less to docs regarding box-sizing conflicts Refs #12351 2014-01-24 02:23:57 +01:00			`//`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// Change from `box-sizing: content-box` to `border-box` so that when you add
			// `padding` or `border`s to an element, the overall declared `width` does not
			// change. For example, `width: 100px;` will always be `100px` despite the
			// `border: 10px solid red;` and `padding: 20px;`.
			`//`
edit comments a bit 2015-04-17 02:15:29 +02:00			`// Heads up! This reset may cause conflicts with some third-party widgets. For`
			`// recommendations on resolving such conflicts, see`
			`// http://getbootstrap.com/getting-started/#third-box-sizing.`
			`//`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/`
Move .img- classes to new _images.scss; move hr to _type.scss 2015-04-17 02:10:47 +02:00
Use improved box sizing reset Based on http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ This allows us to significantly simplify the relevant part of the docs. 2015-01-06 00:20:46 +01:00			`html {`
			`box-sizing: border-box;`
			`}`
Move .img- classes to new _images.scss; move hr to _type.scss 2015-04-17 02:10:47 +02:00
Drop: all vendor prefix mixins because autoprefixer 2014-07-08 11:04:48 +02:00			`*,`
fixes #9400: add box-sizing to pseudo elements as well 2013-08-13 06:26:43 +02:00			`*:before,`
			`*:after {`
Use improved box sizing reset Based on http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ This allows us to significantly simplify the relevant part of the docs. 2015-01-06 00:20:46 +01:00			`box-sizing: inherit;`
Set border-box globally instead 2013-03-10 19:24:07 +01:00			`}`


Reorg @viewport now that we don't need to worry about non-responsive layouts 2015-01-21 21:41:11 +01:00			`// Make viewport responsive`
			`//`
edit comments a bit 2015-04-17 02:15:29 +02:00			`// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in`
			`// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.`
			`// Eventually @viewport will replace <meta name="viewport">. It's been manually`
			`// prefixed for forward-compatibility.`
Reorg @viewport now that we don't need to worry about non-responsive layouts 2015-01-21 21:41:11 +01:00			`//`
			// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
edit comments a bit 2015-04-17 02:15:29 +02:00			`// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)`
			`// and the fix for that involves a snippet of JavaScript to sniff the user agent`
			`// and apply some conditional CSS.`
			`//`
Reorg @viewport now that we don't need to worry about non-responsive layouts 2015-01-21 21:41:11 +01:00			`// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.`

			`@-moz-viewport { width: device-width; }`
			`@-ms-viewport { width: device-width; }`
			`@-o-viewport { width: device-width; }`
			`@-webkit-viewport { width: device-width; }`
			`@viewport { width: device-width; }`


start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`//`
Move .img- classes to new _images.scss; move hr to _type.scss 2015-04-17 02:10:47 +02:00			`// Reset HTML, body, and more`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`//`
rearranging everything 2011-05-04 03:09:25 +02:00
mobile-first navs, navbar, grids, and type 2013-01-16 02:55:14 +01:00			`html {`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// Sets a specific default `font-size` for user with `rem` type scales.
restore px to base font size var 2014-12-04 09:10:24 +01:00			`font-size: $font-size-root;`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`// Changes the default tap highlight to be completely transparent in iOS.`
mobile-first navs, navbar, grids, and type 2013-01-16 02:55:14 +01:00			`-webkit-tap-highlight-color: rgba(0,0,0,0);`
			`}`

rearranging everything 2011-05-04 03:09:25 +02:00			`body {`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// Make the `body` use the `font-size-root`
convert to scss 2014-12-02 23:02:35 +01:00			`font-family: $font-family-base;`
			`font-size: $font-size-base;`
			`line-height: $line-height-base;`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// Go easy on the eyes and use something other than `#000` for text
convert to scss 2014-12-02 23:02:35 +01:00			`color: $text-color;`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// By default, `<body>` has no `background-color` so we set one as a best practice.
convert to scss 2014-12-02 23:02:35 +01:00			`background-color: $body-bg;`
consolidate font resets into scaffolding 2012-11-30 09:24:17 +01:00			`}`

start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00
			`//`
			`// Typography`
			`//`

			`// Remove top margins from headings`
			`//`
			// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
			`// margin for easier control within type scales as it avoids margin collapsing.`
			`h1, h2, h3, h4, h5, h6 {`
			`margin-top: 0;`
			`margin-bottom: .5rem;`
			`}`

			`// Reset margins on paragraphs`
			`//`
			// Similarly, the top margin on `<p>`s get reset. However, we also reset the
			// bottom margin to use `rem` units instead of `em`.
			`p {`
			`margin-top: 0;`
			`margin-bottom: 1rem;`
			`}`

			`abbr[title] {`
			`cursor: help;`
			`border-bottom-color: #ccc;`
			`}`

			`address {`
			`margin-bottom: 1rem;`
			`font-style: normal;`
New grid classes 2013-03-27 01:12:17 +01:00			`line-height: inherit;`
rearranging everything 2011-05-04 03:09:25 +02:00			`}`

start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`ol,`
			`ul,`
			`dl {`
			`margin-top: 0;`
			`margin-bottom: 1rem;`
			`}`
updated hero example, added fluid example, resolved issue with tabs and fluid nav 2011-09-03 08:01:38 +02:00
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`ol ol,`
			`ul ul,`
			`ol ul,`
			`ul ol {`
			`margin-bottom: 0;`
			`}`

			`dt {`
			`font-weight: bold;`
			`}`

			`dd {`
			`margin-left: 0; // Undo browser default`
			`margin-bottom: .5rem;`
			`}`

			`blockquote {`
			`margin: 0 0 1rem;`
			`}`


			`//`
adding responsive utility classes and matching docs section with super neato table and test 2012-02-21 17:24:18 +01:00			`// Links`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`//`
rearranging everything 2011-05-04 03:09:25 +02:00
			`a {`
convert to scss 2014-12-02 23:02:35 +01:00			`color: $link-color;`
rearranging everything 2011-05-04 03:09:25 +02:00			`text-decoration: none;`
Nesting for link styles 2013-08-18 23:28:55 +02:00
put all :hover styles within @media (hover: hover) 2015-01-01 10:05:01 +01:00			`@include hover-focus {`
convert to scss 2014-12-02 23:02:35 +01:00			`color: $link-hover-color;`
			`text-decoration: $link-hover-decoration;`
Nesting for link styles 2013-08-18 23:28:55 +02:00			`}`

			`&:focus {`
convert to scss 2014-12-02 23:02:35 +01:00			`@include tab-focus();`
Nesting for link styles 2013-08-18 23:28:55 +02:00			`}`
Finish migrating to Normalize 2: * Port print styles from reset.less to scaffolding.less * Port responsive image styles from reset.less to scaffolding.less 2012-12-21 05:52:20 +01:00			`}`
add image styles, for now to scaffolding (soon to own file) 2012-07-27 09:06:43 +02:00

start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`//`
			`// Code`
			`//`

			`pre {`
			`// Remove browser default top margin`
			`margin-top: 0;`
			// Reset browser default of `1em` to use `rem`s
			`margin-bottom: 1rem;`
			`}`


			`//`
			`// Figures`
			`//`

			`figure {`
			// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
			`// We reset that to create a better flow in-page.`
			`margin: 0 0 1rem;`
			`}`



			`//`
add image styles, for now to scaffolding (soon to own file) 2012-07-27 09:06:43 +02:00			`// Images`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`//`
add image styles, for now to scaffolding (soon to own file) 2012-07-27 09:06:43 +02:00
Finish migrating to Normalize 2: * Port print styles from reset.less to scaffolding.less * Port responsive image styles from reset.less to scaffolding.less 2012-12-21 05:52:20 +01:00			`img {`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			// By default, `<img>`s are `inline-block`. This assumes that, and vertically
			// centers them. This won't apply should you reset them to `block` level.
Overall responsive `img` styles `img`s are no longer responsive by default. Instead, use `.img-responsive` as a class or mixin. Existing `.thumbnail > img` and `.img-thumbnail` classes now make use of this as a mixin as well. 2013-06-28 09:09:10 +02:00			`vertical-align: middle;`
			`}`

improve dependencies for image thumbnails and thumbnail component 2013-08-19 04:24:10 +02:00
Merge branch 'master' into v4 Conflicts: .gitignore Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.js dist/js/bootstrap.min.js docs/_includes/components/navbar.html docs/_includes/components/progress-bars.html docs/_includes/css/grid.html docs/_includes/css/overview.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/license.html docs/_includes/getting-started/third-party-support.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/js/transitions.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.js docs/dist/js/bootstrap.min.js docs/migration.html js/affix.js js/alert.js js/button.js js/carousel.js js/collapse.js js/dropdown.js js/modal.js js/popover.js js/scrollspy.js js/tab.js js/tests/unit/affix.js js/tests/unit/button.js js/tests/unit/carousel.js js/tests/unit/modal.js js/tests/unit/tooltip.js js/tests/visual/modal.html js/tooltip.js less/component-animations.less less/jumbotron.less less/mixins/background-variant.less less/mixins/buttons.less less/mixins/responsive-visibility.less less/mixins/text-emphasis.less less/navbar.less less/navs.less less/scaffolding.less less/tooltip.less less/utilities.less less/variables.less package.json scss/_buttons.scss scss/_forms.scss scss/_modal.scss 2015-03-29 09:08:54 +02:00			`// iOS "clickable elements" fix for role="button"`
			`//`
			`// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)`
			`// for traditionally non-focusable elements with role="button"`
			`// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile`
			`// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged`

			`[role="button"] {`
			`cursor: pointer;`
			`}`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00

			`//`
			`// Tables`
			`//`

			`table {`
			// Reset for nesting within parents with `background-color`.
			`background-color: $table-bg;`
			`}`

			`caption {`
			`caption-side: bottom;`
			`padding-top: $table-cell-padding;`
			`padding-bottom: $table-cell-padding;`
			`color: $text-muted;`
			`text-align: left;`
			`}`

			`th {`
			// Centered by default, but left-align-ed to match the `td`s below.
			`text-align: left;`
			`}`


			`//`
			`// Forms`
			`//`

			`label {`
			// Allow labels can use `margin` for spacing.
			`display: inline-block;`
			`}`

			`input,`
			`button,`
			`select,`
			`textarea {`
			// Remove all `margin`s so our classes don't have to do it themselves.
			`margin: 0;`
			// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
			// properly inherited. However, `line-height` isn't addressed there. Using this
			`// ensures we don't need to unnessarily redeclare the global font stack.`
			`line-height: inherit;`
			`}`

			`textarea {`
			`// Textareas should really only resize vertically so they don't break their (horizontal) containers.`
			`resize: vertical;`
			`}`

			`fieldset {`
			`// Reset the default outline behavior of fieldsets so they don't affect page layout.`
			`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;`
			`}`

			`legend {`
			// Reset the entire legend element to match the `fieldset`
			`display: block;`
			`width: 100%;`
			`padding: 0;`
			`margin-bottom: .5rem;`
			`font-size: 1.5rem;`
			`line-height: inherit;`
			`// border: 0;`
			`}`

			`input[type="search"] {`
More reboot work, commenting out things that have been moved over 2015-04-17 09:22:35 +02:00			`// 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;`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`}`

			`// todo: needed?`
			`output {`
More reboot work, commenting out things that have been moved over 2015-04-17 09:22:35 +02:00			`display: inline-block;`
start stubbing out a new reboot section and file 2015-04-17 03:39:45 +02:00			`// font-size: $font-size-base;`
			`// line-height: $line-height-base;`
			`// color: $input-color;`
			`}`