Files
kupshop/web/common/static/scss/base/_reboot.scss
2025-08-02 16:30:27 +02:00

231 lines
4.8 KiB
SCSS

// Reboot
// Based off Boostrap reboot, which is based off normalize.css
// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box;
}
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
body {
margin: 0; // 1
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $body-color;
background-color: $body-bg; // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: none !important;
}
// Abbreviations and acronyms
abbr[title] {
text-decoration: underline dotted; // 2
cursor: help; // 3
text-decoration-skip-ink: none; // 4
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
blockquote {
margin: 0 0 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;
// Note: `<img>`s are deliberately not made responsive by default.
// For the rationale behind this, see the comments on the `.img-fluid` class.
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
a,
area,
button,
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
//
// Forms
//
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: .5rem;
}
// Reset focus style, show only on tab press (requires JS support)
a:focus,
input:focus,
select:focus,
button:focus {
outline: 0;
}
.tab-key {
a:focus,
button:focus {
outline: auto;
}
}
// Delete FF dotted outline.
button::-moz-focus-inner {
border: 0;
}
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
font-family: inherit;
font-size: inherit;
// iOS adds rounded borders by default
border-radius: 0;
// reset FF :active:focus padding animation
padding: 0;
}
// 1. Remove the default vertical scrollbar in IE.
// 2. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
overflow: auto; // 1
resize: vertical; // 2
}
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset {
min-width: 0; // 1
padding: 0; // 2
margin: 0; // 2
border: 0; // 2
}
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;
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// 1. Change font properties to `inherit` in Safari.
// 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button {
font: inherit; // 1
-webkit-appearance: button; // 2
}
// Add the correct display for main in IE 11
main {
display: block;
}
table {
border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
picture {
display: block;
}