From 9d02a3fb30dbe6f895b41be87fc995443451c75d Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Sun, 31 Mar 2019 20:50:25 +0200 Subject: [PATCH] Updating to normalize.css 8.0.1 minus IE fixes. Other sass file cleanup as well. --- assets/sass/_init.scss | 40 +--------------- assets/sass/_zen.scss | 48 ------------------- assets/sass/base/_normalize.scss | 21 ++------ assets/sass/base/document/_document.scss | 10 ++++ assets/sass/base/embedded/_embedded.scss | 26 ++-------- assets/sass/base/forms/_forms.scss | 4 -- assets/sass/base/grouping/_grouping.scss | 22 ++------- assets/sass/base/hidden/_hidden.scss | 8 ---- .../sass/base/interactive/_interactive.scss | 2 - assets/sass/base/links/_links.scss | 5 -- assets/sass/base/scripting/_scripting.scss | 9 +--- assets/sass/base/sections/_sections.scss | 10 ---- assets/sass/base/tables/_tables.scss | 2 - assets/sass/base/text/_text.scss | 13 +---- assets/sass/components/button/_button.scss | 20 ++------ .../language-selector/_language-selector.scss | 15 ++++++ .../sass/components/messages/_messages.scss | 26 ++++++++++ assets/sass/init/_variables.scss | 2 - assets/sass/print.scss | 4 -- assets/sass/styles.scss | 9 +--- 20 files changed, 73 insertions(+), 223 deletions(-) delete mode 100644 assets/sass/base/hidden/_hidden.scss create mode 100644 assets/sass/components/language-selector/_language-selector.scss create mode 100644 assets/sass/components/messages/_messages.scss diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss index d3cdb87..24c4d1e 100644 --- a/assets/sass/_init.scss +++ b/assets/sass/_init.scss @@ -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'; diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 636778f..8441c8f 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -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 { diff --git a/assets/sass/base/_normalize.scss b/assets/sass/base/_normalize.scss index cdd1f4c..74f9522 100644 --- a/assets/sass/base/_normalize.scss +++ b/assets/sass/base/_normalize.scss @@ -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. diff --git a/assets/sass/base/document/_document.scss b/assets/sass/base/document/_document.scss index 9737956..608a356 100644 --- a/assets/sass/base/document/_document.scss +++ b/assets/sass/base/document/_document.scss @@ -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; +} + diff --git a/assets/sass/base/embedded/_embedded.scss b/assets/sass/base/embedded/_embedded.scss index 7675525..68147c5 100644 --- a/assets/sass/base/embedded/_embedded.scss +++ b/assets/sass/base/embedded/_embedded.scss @@ -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 `` 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 `` 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. } diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss index 0c9b152..b5889b3 100644 --- a/assets/sass/base/forms/_forms.scss +++ b/assets/sass/base/forms/_forms.scss @@ -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 `` 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; } diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss index 43fbb9c..a6415de 100644 --- a/assets/sass/base/grouping/_grouping.scss +++ b/assets/sass/base/grouping/_grouping.scss @@ -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 `
` 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 `
` 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 // `` element and all paragraphs. In addition, `

` (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 diff --git a/assets/sass/base/hidden/_hidden.scss b/assets/sass/base/hidden/_hidden.scss deleted file mode 100644 index fe6153b..0000000 --- a/assets/sass/base/hidden/_hidden.scss +++ /dev/null @@ -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; -} diff --git a/assets/sass/base/interactive/_interactive.scss b/assets/sass/base/interactive/_interactive.scss index 9e95523..541c505 100644 --- a/assets/sass/base/interactive/_interactive.scss +++ b/assets/sass/base/interactive/_interactive.scss @@ -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; diff --git a/assets/sass/base/links/_links.scss b/assets/sass/base/links/_links.scss index 035f9f3..4981153 100644 --- a/assets/sass/base/links/_links.scss +++ b/assets/sass/base/links/_links.scss @@ -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; - } } diff --git a/assets/sass/base/scripting/_scripting.scss b/assets/sass/base/scripting/_scripting.scss index 31ba2b0..a97c2ed 100644 --- a/assets/sass/base/scripting/_scripting.scss +++ b/assets/sass/base/scripting/_scripting.scss @@ -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. } diff --git a/assets/sass/base/sections/_sections.scss b/assets/sass/base/sections/_sections.scss index cc6f9cc..f981210 100644 --- a/assets/sass/base/sections/_sections.scss +++ b/assets/sass/base/sections/_sections.scss @@ -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, `

` through `

`, are available. `%h1` through `%h6` diff --git a/assets/sass/base/tables/_tables.scss b/assets/sass/base/tables/_tables.scss index 7868cdf..abfcc06 100644 --- a/assets/sass/base/tables/_tables.scss +++ b/assets/sass/base/tables/_tables.scss @@ -1,8 +1,6 @@ // Tables // // The `` element displays tabular data in rows, columns, and cells. -// -// Weight: 1 table { // Add vertical rhythm margins. diff --git a/assets/sass/base/text/_text.scss b/assets/sass/base/text/_text.scss index 4423c4d..c0b8601 100644 --- a/assets/sass/base/text/_text.scss +++ b/assets/sass/base/text/_text.scss @@ -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 `` in HTML5. `` 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 `` 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 `` element in HTML5. `` 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 diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index 23a5be1..826a658 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -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; diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss new file mode 100644 index 0000000..873db04 --- /dev/null +++ b/assets/sass/components/language-selector/_language-selector.scss @@ -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; + } + } +} diff --git a/assets/sass/components/messages/_messages.scss b/assets/sass/components/messages/_messages.scss new file mode 100644 index 0000000..6b1d40e --- /dev/null +++ b/assets/sass/components/messages/_messages.scss @@ -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; + } +} diff --git a/assets/sass/init/_variables.scss b/assets/sass/init/_variables.scss index c095e1c..5e16761 100644 --- a/assets/sass/init/_variables.scss +++ b/assets/sass/init/_variables.scss @@ -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; diff --git a/assets/sass/print.scss b/assets/sass/print.scss index 26baccc..c6475c7 100644 --- a/assets/sass/print.scss +++ b/assets/sass/print.scss @@ -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'; diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index b35d306..67c0dd4 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -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';