Updating to normalize.css 8.0.1 minus IE fixes. Other sass file cleanup as well.

This commit is contained in:
Fredrik Jonsson 2019-03-31 20:50:25 +02:00
commit 9d02a3fb30
20 changed files with 73 additions and 223 deletions

View file

@ -4,55 +4,19 @@
// project, each .scss file has a `@import 'init';` declaration. The _init.scss
// file is in charge of importing all the other partials needed for the
// project.
//
// The initialization partial is organized in this way:
// - First we set any shared Sass variables.
// - Next we import Sass modules.
// - Last we define our custom mixins for this project.
//
// Weight: -1
//
// Style guide: sass.init
// The following Sass functions/mixins are required to generate some variables'
// values, so we load them first.
@import 'init/breakpoint/respond-to';
// Colours and variables.
@import 'init/colors';
@import 'init/variables';
// 3rd party libraries
//
// The following sass modules are shared with all .scss files:
// - [Breakpoint](http://breakpoint-sass.com/)
// - [Typey](https://github.com/jptaranto/typey)
//
// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
//
// Style guide: sass.modules
// Add typey to manage font sizes and margins.
@import 'typey';
// Mixins
//
// Custom mixins used on this site.
//
// Weight: 1
//
// Style guide: sass.mixins
@import 'init/breakpoint/respond-to';
@import 'init/clearfix/clearfix';
@import 'init/rtl/rtl';
@import 'init/visually-hidden/visually-hidden';
// Functions
//
// Custom functions used on this site.
//
// Weight: 1
//
// Style guide: sass.functions
@import 'init/image-url/image-url';

View file

@ -1,10 +1,5 @@
// Zen custom styles
p,
pre {
@include margin(.75 0);
}
// Page
body {
@ -245,33 +240,6 @@ figcaption {
text-decoration: none;
}
// Messages
.message {
padding: 10px;
border-width: 1px;
border-style: solid;
width: 95%;
&.status {
background-color: $status-bg;
color: $status;
border-color: $status;
}
&.warning {
background-color: $warning-bg;
color: $warning;
border-color: $warning;
}
&.error {
background-color: $error-bg;
color: $error;
border-color: $error;
}
}
// Search
.search-form {
@ -282,22 +250,6 @@ figcaption {
@include type-layout(l, 1);
}
// Language selector
.language-selector {
.navbar {
&::before {
content: '';
background-image: url('../images/language-icon.png');
background-size: 24px;
background-repeat: no-repeat;
height: 24px;
width: 24px;
margin-right: 8px;
}
}
}
// Form
.content {

View file

@ -1,29 +1,15 @@
// Normalize.css is intended to be used as an alternative to CSS resets.
//
// @see http://nicolasgallagher.com/about-normalize-css/
//
// Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
// @see http://snook.ca/archives/html_and_css/no_css_reset/
// @see https://necolas.github.io/normalize.css/
//
// This directory is a slight fork of this original source:
// normalize-scss 7.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss
// normalize.css 8.0.1 | MIT License
// Universal
// ==========================================================================
// Use the saner border-box model for all elements.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
// Normalize-scss is broken into modular pieces to make it easier to edit.
// Broken into modular pieces to make it easier to edit.
@import 'document/document';
@import 'sections/sections';
@import 'grouping/grouping';
@ -34,7 +20,6 @@ html {
@import 'tables/tables';
@import 'interactive/interactive';
@import 'scripting/scripting';
@import 'hidden/hidden';
// Note: we allow the .button component (loaded by forms) to override :link, by
// loading links first.

View file

@ -16,8 +16,18 @@ html {
// On short pages, we want any background gradients to fill the entire height
// of the browser.
min-height: 100%;
// Use the saner border-box model.
box-sizing: border-box;
@include respond-to(xxl) {
@include define-type-sizing($base-font-size-2, $base-line-height-2);
}
}
// Use the saner border-box model for all elements.
*,
*::before,
*::after {
box-sizing: inherit;
}

View file

@ -1,18 +1,9 @@
// Embedded content
//
// Weight: 2
// Audio
audio {
// Add the correct display in IE 9-.
display: inline-block;
}
// Add the correct display in iOS 4-7.
audio:not([controls]) {
display: none;
height: 0;
// Add your styles.
}
// Image
@ -20,8 +11,7 @@ audio:not([controls]) {
// An `<img>` element represents an image.
img {
// Remove the border on images inside links in IE 10-.
border-style: none;
// Add your styles.
}
img,
@ -34,18 +24,8 @@ svg {
height: auto;
}
// Scalable vector
//
// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
svg:not(:root) {
// Hide the overflow in IE.
overflow: hidden;
}
// Video
video {
// Add the correct display in IE 9-.
display: inline-block;
// Add your styles.
}

View file

@ -6,8 +6,6 @@
//
// Component classes can override these styles, but if no class applies a style
// to an HTML form element, these styles will be the ones displayed.
//
// Weight: -1
//
// The following rules are from normalize.css and help to fix inconsistencies
@ -216,8 +214,6 @@ select {
// The `<progress>` element represents the completion progress of a task.
progress {
// Add the correct display in IE 9-.
display: inline-block;
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
vertical-align: baseline;
}

View file

@ -2,8 +2,6 @@
@import 'components/divider/divider';
// Grouping content
//
// Weight: 1
// Block quotes
@ -24,8 +22,6 @@ blockquote {
// Lists
//
// Weight: -1
//
// Style guide: base.grouping.lists
// Unordered list
@ -41,8 +37,6 @@ blockquote {
// Description list
//
// The `<dl>` element is a list of terms with their associated descriptions.
//
// Weight: 1
dl,
ol,
@ -86,15 +80,11 @@ ul {
// caption of the figure.
figure {
// Add the correct margin in IE 8.
@include margin(1 0);
// Add the correct display in IE 9-.
display: block;
// Add your styles.
}
figcaption {
// Add the correct display in IE 9-.
display: block;
// Add your styles.
}
// Horizontal rule
@ -117,8 +107,7 @@ hr {
// The `<main>` element represents the main content of the page.
main {
// Add the correct display in IE.
display: block;
// Add your styles.
}
// Body copy
@ -126,13 +115,10 @@ main {
// The default `font-size` and `line-height` properties are applied to the
// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
// a top and bottom margin.
//
// Weight: -2
p,
pre {
// Set 1 unit of vertical rhythm on the top and bottom margin.
@include margin(1 0);
@include margin(.75 0);
}
// Preformatted text

View file

@ -1,8 +0,0 @@
// Hidden
//
// Some older browsers do not hide elements that have a `hidden` attribute.
[hidden] {
// Add the correct display in IE 10-.
display: none;
}

View file

@ -17,8 +17,6 @@ summary {
menu {
// Set 1 unit of vertical rhythm on the top and bottom margin.
@include margin(1 0);
// Add the correct display in IE 9-.
display: block;
// Set consistent space for the list style image.
padding: 0 0 0 $indent-amount;

View file

@ -33,9 +33,4 @@ a:focus {
a:active {
color: $link-active;
&:not(.button) {
// Remove the gray background on active links in IE 10.
background-color: transparent;
}
}

View file

@ -3,16 +3,11 @@
// Canvas
canvas {
// Add the correct display in IE 9-.
display: inline-block;
// Add your styles.
}
// Template
//
// Some older browsers do not hide elements the web components' `template`
// element.
template {
// Add the correct display in IE.
display: none;
// Add your styles.
}

View file

@ -11,16 +11,6 @@ body {
padding: 0;
}
// Add the correct display in IE 9-.
article,
aside,
footer,
header,
nav,
section {
display: block;
}
// Headings
//
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`

View file

@ -1,8 +1,6 @@
// Tables
//
// The `<table>` element displays tabular data in rows, columns, and cells.
//
// Weight: 1
table {
// Add vertical rhythm margins.

View file

@ -1,8 +1,6 @@
// Text-level semantics
//
// The elements in this section give semantics to inline text.
//
// Weight: 1
// Abbreviation / Acroynym
//
@ -25,8 +23,6 @@ abbr[title] {
//
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
// without conveying additional importance.
//
// Weight: -1
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
@ -76,8 +72,7 @@ del {
// The `<dfn>` element represents the defining instance of a term.
dfn {
// Add the correct font style in Android 4.3-.
font-style: italic;
// Add your styles.
}
// Italics
@ -87,8 +82,6 @@ dfn {
//
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
// technical terms, etc.
//
// Weight: -1
i,
em {
@ -109,9 +102,7 @@ ins {
// context.
mark {
// Add the correct background and color in IE 9-.
background-color: $mark-bg;
color: $text;
// Add your styles.
}
// Quote

View file

@ -8,21 +8,6 @@
// :hover - Hover styling.
// :active - Depressed button styling.
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
.button,
%button,
button,
// 1
html [type='button'],
[type='reset'],
[type='submit'] {
// sass-lint:disable no-vendor-prefixes
-moz-appearance: button;
-webkit-appearance: button; // 2
}
.button,
%button,
button,
@ -53,8 +38,11 @@ button,
border-bottom-color: #b4b4b4;
border-radius: 2px;
// sass-lint:disable no-vendor-prefixes
// Correct the inability to style clickable types in iOS and Safari.
-moz-appearance: button;
-webkit-appearance: button;
// Remove the inner border and padding in Firefox.
&::-moz-focus-inner {
border-style: none;

View file

@ -0,0 +1,15 @@
// Language selector
.language-selector {
.navbar {
&::before {
content: '';
background-image: url('../images/language-icon.png');
background-size: 24px;
background-repeat: no-repeat;
height: 24px;
width: 24px;
margin-right: 8px;
}
}
}

View file

@ -0,0 +1,26 @@
// Messages
.message {
padding: 10px;
border-width: 1px;
border-style: solid;
width: 95%;
&.status {
background-color: $status-bg;
color: $status;
border-color: $status;
}
&.warning {
background-color: $warning-bg;
color: $warning;
border-color: $warning;
}
&.error {
background-color: $error-bg;
color: $error;
border-color: $error;
}
}

View file

@ -148,8 +148,6 @@ $zen-gutters: 20px;
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
//
// `$include-rtl` controls whether RTL styles are output.
//
// weight: 10
$indent-amount: 2 * $base-font-size;

View file

@ -4,14 +4,10 @@
// Colors and Sass
//
// Documentation for colors and Sass mixins and variables.
//
// Weight: -1
@import 'init';
// Components
//
// Weight: 1
@import 'components/print-none/print-none';

View file

@ -4,12 +4,9 @@
// We categorize our components by creating headings in this file. See the
// description on the style guide home page for more information.
// Colors and Sass
//
// Documentation for colors and Sass mixins and variables.
//
// Weight: -1
@import 'init';
@ -36,8 +33,6 @@
//
// Design components are reusable designs that can be applied using just the CSS
// class names specified in the component.
//
// Weight: 1
@import 'components/box/box';
@import 'components/clearfix/clearfix';
@ -47,7 +42,9 @@
@import 'components/inline-links/inline-links';
@import 'components/inline-sibling/inline-sibling';
@import 'components/inverted-box/inverted-box';
@import 'components/language-selector/language-selector';
@import 'components/list-straight-left/list-straight-left';
@import 'components/messages/messages';
@import 'components/responsive-video/responsive-video';
@import 'components/visually-hidden/visually-hidden';
@import 'components/watermark/watermark';
@ -57,8 +54,6 @@
//
// Navigation components are specialized design components that are used for
// page navigation.
//
// Weight: 2
@import 'navigation/more-link/more-link';
@import 'navigation/navbar/navbar';