Updating to normalize.css 8.0.1 minus IE fixes. Other sass file cleanup as well.
This commit is contained in:
parent
a5c50ab78a
commit
9d02a3fb30
20 changed files with 73 additions and 223 deletions
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
// Tables
|
||||
//
|
||||
// The `<table>` element displays tabular data in rows, columns, and cells.
|
||||
//
|
||||
// Weight: 1
|
||||
|
||||
table {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
assets/sass/components/messages/_messages.scss
Normal file
26
assets/sass/components/messages/_messages.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue