mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Modernize css normalize
This commit is contained in:
Lucas Vallenet
100
assets/styles/elements/_normalize.scss
Normal file
100
assets/styles/elements/_normalize.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
// ==========================================================================
|
||||
// Elements / Normalize
|
||||
// ==========================================================================
|
||||
|
||||
// Modern CSS Normalize
|
||||
// Based on the reset by Andy.set with some tweaks.
|
||||
// Original by Andy.set: https://piccalil.li/blog/a-more-modern-css-reset/
|
||||
// Review by Chris collier: https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
|
||||
|
||||
|
||||
// Box sizing rules
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Prevent font size inflation
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
// Remove default margin in favour of better control in authored CSS
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
dl,
|
||||
dd,
|
||||
body,
|
||||
figure,
|
||||
blockquote {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
// Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
|
||||
ul[class],
|
||||
ol[class] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Set core html defaults
|
||||
html {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Set shorter line heights on headings and interactive elements
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
// Balance text wrapping on headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
// Remove a elements default styles if they have a class
|
||||
a[class] {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Make images easier to work with
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Inherit fonts for inputs and buttons
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// Make sure textareas without a rows attribute are not tiny
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
// Anything that has been anchored to should have extra scroll margin
|
||||
:target {
|
||||
scroll-margin-block: 1rlh;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Generic / Buttons
|
||||
// ==========================================================================
|
||||
|
||||
// 1. Allow us to style box model properties.
|
||||
// 2. Fixes odd inner spacing in IE7.
|
||||
// 3. Reset/normalize some styles.
|
||||
// 4. Line different sized buttons up a little nicer.
|
||||
// 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
|
||||
// 6. Force all button-styled elements to appear clickable.
|
||||
|
||||
button,
|
||||
.c-button {
|
||||
@include u-hocus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
display: inline-block; // [1]
|
||||
overflow: visible; // [2]
|
||||
margin: 0; // [3]
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: none transparent;
|
||||
color: inherit;
|
||||
vertical-align: middle; // [4]
|
||||
text-align: center; // [3]
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
font: inherit; // [5]
|
||||
line-height: normal;
|
||||
cursor: pointer; // [6]
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Generic / Forms
|
||||
// ==========================================================================
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
text-transform: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-ms-value {
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// // Remove Firefox :focus dotted outline, breaks color inherit
|
||||
// // &:-moz-focusring {
|
||||
// // color: transparent;
|
||||
// // text-shadow: 0 0 0 #000000; // Text :focus color
|
||||
// // }
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Generic
|
||||
// ==========================================================================
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10-.
|
||||
// 1. Add the correct display in IE.
|
||||
|
||||
template, // [1]
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
dfn,
|
||||
cite,
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
p,
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 1. Single taps should be dispatched immediately on clickable elements
|
||||
|
||||
a, area, button, input, label, select, textarea, [tabindex] {
|
||||
-ms-touch-action: manipulation; // [1]
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
[hreflang] > abbr[title] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Generic / Media
|
||||
// ==========================================================================
|
||||
|
||||
// 1. Setting `vertical-align` removes the whitespace that appears under `img`
|
||||
// elements when they are dropped into a page as-is. Safer alternative to
|
||||
// using `display: block;`.
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle; // [1]
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7.
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// 2. Fluid media for responsive purposes.
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-width: 100%; // [2]
|
||||
height: auto;
|
||||
|
||||
// 4. If a `width` and/or `height` attribute have been explicitly defined,
|
||||
// let’s not make the image fluid.
|
||||
|
||||
&[width], // [4]
|
||||
&[height] {
|
||||
// [4]
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Offset `alt` text from surrounding copy.
|
||||
|
||||
img {
|
||||
font-style: italic; // [4]
|
||||
}
|
||||
|
||||
// 5. SVG elements should fallback to their surrounding text color.
|
||||
|
||||
svg {
|
||||
fill: currentColor; // [5]
|
||||
}
|
||||
@@ -27,15 +27,6 @@
|
||||
@import "settings/config";
|
||||
@import "settings/config.variables";
|
||||
|
||||
// Generic
|
||||
// ==========================================================================
|
||||
|
||||
@import "node_modules/normalize.css/normalize";
|
||||
@import "generic/generic";
|
||||
@import "generic/media";
|
||||
@import "generic/form";
|
||||
@import "generic/button";
|
||||
|
||||
// Vendors
|
||||
// ==========================================================================
|
||||
@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
|
||||
@@ -43,6 +34,7 @@
|
||||
// Elements
|
||||
// ==========================================================================
|
||||
|
||||
@import "elements/normalize";
|
||||
@import "elements/document";
|
||||
|
||||
// Objects
|
||||
|
||||
Reference in New Issue
Block a user