Updated the normalise css.
This commit is contained in:
Fredrik Jonsson
parent
5fb50a6da6
commit
fbf7a90ed3
42 changed files with 438 additions and 413 deletions
|
|
@ -31,15 +31,19 @@ rules:
|
|||
single-line-per-selector: 2
|
||||
|
||||
# Disallows
|
||||
# no-color-keywords: 2
|
||||
# no-color-literals: 2
|
||||
# no-css-comments: 2
|
||||
no-attribute-selectors: 0
|
||||
no-color-hex: 2
|
||||
no-color-keywords: 2
|
||||
no-color-literals: 2
|
||||
no-combinators: 0
|
||||
no-css-comments: 2
|
||||
no-debug: 2
|
||||
# no-duplicate-properties: 2
|
||||
no-empty-rulesets: 2
|
||||
no-disallowed-properties: 2
|
||||
no-duplicate-properties: 2
|
||||
no-empty-rulesets: 0
|
||||
no-extends: 0
|
||||
# no-ids: 2
|
||||
# no-important: 2
|
||||
no-ids: 2
|
||||
no-important: 2
|
||||
no-invalid-hex: 2
|
||||
no-mergeable-selectors: 2
|
||||
no-misspelled-properties:
|
||||
|
|
@ -52,10 +56,12 @@ rules:
|
|||
- '*vertical-align'
|
||||
- '*width'
|
||||
no-qualifying-elements: 0
|
||||
no-trailing-whitespace: 2
|
||||
no-trailing-zero: 2
|
||||
no-transition-all: 1
|
||||
no-transition-all: 0
|
||||
no-universal-selectors: 0
|
||||
no-url-protocols: 2
|
||||
# no-vendor-prefixes: 2
|
||||
no-vendor-prefixes: 2
|
||||
no-warn: 2
|
||||
property-units: 0
|
||||
|
||||
|
|
@ -79,6 +85,7 @@ rules:
|
|||
variable-name-format: 2
|
||||
|
||||
# Style Guide
|
||||
attribute-quotes: 2
|
||||
bem-depth: 0
|
||||
border-zero: 2
|
||||
brace-style:
|
||||
|
|
@ -89,12 +96,13 @@ rules:
|
|||
empty-args: 0
|
||||
hex-length: 2
|
||||
hex-notation: 2
|
||||
# indentation: 2
|
||||
indentation: 2
|
||||
leading-zero: 2
|
||||
nesting-depth:
|
||||
- 2
|
||||
- max-depth: 4
|
||||
property-sort-order: 0
|
||||
pseudo-element: 1
|
||||
quotes: 2
|
||||
shorthand-values: 2
|
||||
url-quotes: 2
|
||||
|
|
@ -114,14 +122,3 @@ rules:
|
|||
# Final Items
|
||||
trailing-semicolon: 2
|
||||
final-newline: 2
|
||||
|
||||
# Work-around for sass-lint not having per-file/block/line rule config.
|
||||
# @TODO: Re-enable these disabled rules. See https://www.drupal.org/node/2717117
|
||||
indentation: 0
|
||||
no-color-keywords: 0
|
||||
no-color-literals: 0
|
||||
no-css-comments: 0
|
||||
no-duplicate-properties: 0
|
||||
no-ids: 0
|
||||
no-important: 0
|
||||
no-vendor-prefixes: 0
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/**
|
||||
* @file
|
||||
* Site custom styles
|
||||
*/
|
||||
// sass-lint:disable no-css-comments, no-color-hex, no-color-literals
|
||||
|
||||
// Site custom styles
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
/**
|
||||
* @file
|
||||
* Zen custom styles
|
||||
*/
|
||||
|
||||
/* Zen overrides */
|
||||
// Zen custom styles
|
||||
|
||||
p,
|
||||
pre {
|
||||
|
|
@ -11,7 +6,7 @@ pre {
|
|||
@include margin(.75 0);
|
||||
}
|
||||
|
||||
/* Page */
|
||||
// Page
|
||||
|
||||
body {
|
||||
background-color: color(backdrop);
|
||||
|
|
@ -40,7 +35,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Apply smaller text to blocks, footer etc. */
|
||||
// Apply smaller text to blocks, footer etc.
|
||||
|
||||
th,
|
||||
label,
|
||||
|
|
@ -63,7 +58,7 @@ article > header,
|
|||
}
|
||||
}
|
||||
|
||||
/* Apply heading font stack to heading, labels etc. */
|
||||
// Apply heading font stack to heading, labels etc.
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -215,7 +210,7 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
// Navigation
|
||||
|
||||
.main-menu {
|
||||
@include margin-top(.5);
|
||||
|
|
@ -251,7 +246,7 @@ figcaption {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
// Messages
|
||||
|
||||
.message {
|
||||
padding: 10px;
|
||||
|
|
@ -278,7 +273,7 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/* Search */
|
||||
// Search
|
||||
|
||||
.search-form {
|
||||
@include padding(.5 0);
|
||||
|
|
@ -288,7 +283,7 @@ figcaption {
|
|||
@include type-layout(l, 1);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
// Form
|
||||
|
||||
.content {
|
||||
input,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
// websites where you can find Open Source fonts to download:
|
||||
// - http://www.fontsquirrel.com/fontface
|
||||
// - http://www.theleagueofmoveabletype.com
|
||||
// - https://fonts.google.com
|
||||
//
|
||||
// In order to use these fonts, you will need to convert them into formats
|
||||
// suitable for web fonts. We recommend the free-to-use Font Squirrel's
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
// HTML5 display definitions
|
||||
// ==========================================================================
|
||||
|
||||
// Add the correct display in IE <10.
|
||||
// Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
|
||||
// Add the correct display in IE for `main`.
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Add the correct display in IE <10.
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display and remove excess height in iOS 4-7.
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Add the correct display in IE <11, Safari <8, and Firefox <22.
|
||||
template,
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -6,19 +6,29 @@
|
|||
// @see http://snook.ca/archives/html_and_css/no_css_reset/
|
||||
//
|
||||
// This directory is a slight fork of this original source:
|
||||
// - normalize-scss 5.0.3 | MIT/GPLv2 License | bit.ly/normalize-scss
|
||||
// normalize-scss 7.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss
|
||||
|
||||
|
||||
// Universal
|
||||
// ==========================================================================
|
||||
|
||||
// Use the saner border-box model for all elements.
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Normalize-scss is broken into modular pieces to make it easier to edit.
|
||||
@import 'root';
|
||||
@import 'html5';
|
||||
@import 'links/links';
|
||||
@import 'headings/headings';
|
||||
@import 'text/text';
|
||||
@import 'document/document';
|
||||
@import 'sections/sections';
|
||||
@import 'grouping/grouping';
|
||||
@import 'links/links';
|
||||
@import 'text/text';
|
||||
@import 'embedded/embedded';
|
||||
@import 'forms/forms';
|
||||
@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.
|
||||
|
|
|
|||
23
sass/base/document/_document.scss
Normal file
23
sass/base/document/_document.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// sass-lint:disable no-vendor-prefixes
|
||||
|
||||
// Document
|
||||
//
|
||||
// The default font styles are inherited from the `<html>` element.
|
||||
|
||||
html {
|
||||
// Change the default font family in all browsers (opinionated).
|
||||
@include typeface(body);
|
||||
// Correct the line height in all browsers.
|
||||
@include define-type-sizing();
|
||||
// Prevent adjustments of font size after orientation changes in IE on Windows
|
||||
// Phone and in iOS.
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
// On short pages, we want any background gradients to fill the entire height
|
||||
// of the browser.
|
||||
min-height: 100%;
|
||||
|
||||
@include respond-to(xxl) {
|
||||
@include define-type-sizing($base-font-size-2, $base-line-height-2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,26 @@
|
|||
// Embedded content
|
||||
//
|
||||
// Weight: 2
|
||||
//
|
||||
// Style guide: base.embedded
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Image
|
||||
//
|
||||
// An `<img>` element represents an image.
|
||||
//
|
||||
// Markup: embedded-img.twig
|
||||
//
|
||||
// Style guide: base.embedded.img
|
||||
|
||||
img {
|
||||
// Remove the border on images inside links in IE <11.
|
||||
// Remove the border on images inside links in IE 10-.
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -30,12 +37,15 @@ svg {
|
|||
// Scalable vector
|
||||
//
|
||||
// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
|
||||
//
|
||||
// Markup: embedded-svg.twig
|
||||
//
|
||||
// Style guide: base.embedded.svg
|
||||
|
||||
svg:not(:root) {
|
||||
// Hide the overflow in IE.
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Video
|
||||
|
||||
video {
|
||||
// Add the correct display in IE 9-.
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
// to an HTML form element, these styles will be the ones displayed.
|
||||
//
|
||||
// Weight: -1
|
||||
//
|
||||
// Style guide: forms.base
|
||||
|
||||
//
|
||||
// The following rules are from normalize.css and help to fix inconsistencies
|
||||
|
|
@ -22,11 +20,13 @@ input,
|
|||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
// Change the font styles in all browsers (opinionated).
|
||||
@include typeface(body);
|
||||
@include line-height(1);
|
||||
font-size: 100%;
|
||||
// Keep form elements constrained in their containers.
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
// Change font properties to `inherit` in all browsers (opinionated).
|
||||
font: inherit;
|
||||
// Remove the margin in Firefox and Safari.
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -59,19 +59,13 @@ input {
|
|||
// Correct the outline style in Safari.
|
||||
outline-offset: -2px;
|
||||
|
||||
// Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
||||
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
// Correct the inability to style clickable types in iOS and Safari.
|
||||
-webkit-appearance: button;
|
||||
|
|
@ -79,6 +73,20 @@ input {
|
|||
font: inherit;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// Buttons built with the `<button>` element are the most flexible for styling
|
||||
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
|
||||
// `reset`, or `button` are also supported.
|
||||
//
|
||||
// Below is the default button styling. To see variations on the button styling
|
||||
// see the [button component](section-forms.html#kssref-forms-button).
|
||||
//
|
||||
// :hover - Hover styling.
|
||||
// :active:hover - Depressed button styling.
|
||||
|
||||
@import 'components/button/button';
|
||||
|
||||
// The %text-form-element can be used to style `<input>` text types and
|
||||
// `<textarea>` elements at the same time.
|
||||
%text-form-element {
|
||||
|
|
@ -91,9 +99,18 @@ input {
|
|||
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
|
||||
// `time`, `number`, `range`, `color`, and `file`.
|
||||
//
|
||||
// Markup: forms-input.twig
|
||||
// Note: Certain font size values applied to `number` inputs cause the cursor
|
||||
// style of the decrement button to change from `default` to `text`.
|
||||
//
|
||||
// Style guide: forms.base.input
|
||||
// Note: The search input is not fully stylable by default. In Chrome and Safari
|
||||
// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
|
||||
// Chrome and Safari on Windows you can't control `border` properly. It will
|
||||
// apply `border-width` but will only show a border color (which cannot be
|
||||
// controlled) for the outer 1px of that border. Applying
|
||||
// `-webkit-appearance: textfield` addresses these issues without removing the
|
||||
// benefits of search inputs (e.g. showing past searches). Safari (but not
|
||||
// Chrome) will clip the cancel button on when it has padding (and `textfield`
|
||||
// appearance).
|
||||
|
||||
[type='text'],
|
||||
[type='search'],
|
||||
|
|
@ -124,30 +141,22 @@ input {
|
|||
// If an `<input>` element has the `type='checkbox'` attribute set, the form
|
||||
// field is displayed as a checkbox.
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements. Firefox's
|
||||
// implementation doesn't respect `box-sizing`, `padding`, or `width`.
|
||||
//
|
||||
// Markup: forms-input-checkbox.twig
|
||||
//
|
||||
// Style guide: forms.base.input-checkbox
|
||||
// It is recommended that you do not style checkbox and radio inputs as
|
||||
// Firefox's implementation does not respect box-sizing, padding, or width.
|
||||
|
||||
// Radio buttons
|
||||
//
|
||||
// If an `<input>` element has the `type='radio'` attribute set, the form field
|
||||
// is displayed as a radio button.
|
||||
//
|
||||
// It's recommended that you don't attempt to style these elements. Firefox's
|
||||
// implementation doesn't respect `box-sizing`, `padding`, or `width`.
|
||||
//
|
||||
// Markup: forms-input-radio.twig
|
||||
//
|
||||
// Style guide: forms.base.input-radio
|
||||
// It is recommended that you do not style checkbox and radio inputs as
|
||||
// Firefox's implementation does not respect box-sizing, padding, or width.
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
// Add the correct box sizing in IE <11.
|
||||
// Add the correct box sizing in IE 10-.
|
||||
box-sizing: border-box;
|
||||
// Remove the padding in IE <11.
|
||||
// Remove the padding in IE 10-.
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -155,16 +164,11 @@ input {
|
|||
//
|
||||
// The `<fieldset>` element groups a set of form fields, optionally under a
|
||||
// common name given by the `<legend>` element.
|
||||
//
|
||||
// Markup: forms-fieldset.twig
|
||||
//
|
||||
// Style guide: forms.base.fieldset
|
||||
|
||||
fieldset {
|
||||
// Change the border, margin, and padding in all browsers (opinionated).
|
||||
@include padding(.35 .625 .65);
|
||||
// Correct the padding in Firefox.
|
||||
@include padding(.35 .5 .65);
|
||||
border: 1px solid color(border);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
legend {
|
||||
|
|
@ -172,13 +176,13 @@ legend {
|
|||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// Correct the color inheritance from `fieldset` elements in IE.
|
||||
color: inherit;
|
||||
// Align legend text with a fieldset's text while removing left padding so
|
||||
// people aren't caught out if they zero out fieldset padding.
|
||||
margin-left: -5px;
|
||||
padding: 0 5px;
|
||||
// Correct the color inheritance from `fieldset` elements in IE.
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Labels
|
||||
|
|
@ -186,12 +190,9 @@ legend {
|
|||
// The `<label>` element represents a caption of a form field. The label can be
|
||||
// associated with a specific form control by using the `for` attribute or by
|
||||
// putting the form control inside the label element itself.
|
||||
//
|
||||
// Markup: forms-label.twig
|
||||
//
|
||||
// Style guide: forms.base.label
|
||||
|
||||
label {
|
||||
// Drupal-style form labels.
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -202,28 +203,28 @@ label {
|
|||
// options.
|
||||
//
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `<select>`, unless a `border` property is set.
|
||||
//
|
||||
// Markup: forms-select.twig
|
||||
//
|
||||
// Style guide: forms.base.select
|
||||
// styling of `<select>`, unless a `border` property is set. The default font
|
||||
// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
|
||||
// Safari on OS X.
|
||||
|
||||
select {
|
||||
// Add your styles.
|
||||
}
|
||||
|
||||
optgroup {
|
||||
// Restore the font weight unset by a previous rule.
|
||||
font-weight: bold;
|
||||
// Progress
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Text areas
|
||||
//
|
||||
// The `<textarea>` element represents a multi-line plain text form field.
|
||||
//
|
||||
// Markup: forms-textarea.twig
|
||||
//
|
||||
// Style guide: forms.base.textarea
|
||||
|
||||
textarea {
|
||||
@extend %text-form-element !optional;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
// Dependencies.
|
||||
@import 'base/text/text';
|
||||
@import 'components/divider/divider';
|
||||
|
||||
// Grouping content
|
||||
//
|
||||
// Weight: 1
|
||||
//
|
||||
// Style guide: base.grouping
|
||||
|
||||
|
||||
// Block quotes
|
||||
|
|
@ -18,10 +15,6 @@
|
|||
//
|
||||
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
|
||||
// the name of the source work in `<cite>`.
|
||||
//
|
||||
// Markup: grouping-blockquote.twig
|
||||
//
|
||||
// Style guide: base.grouping.blockquote
|
||||
|
||||
blockquote {
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margin.
|
||||
|
|
@ -39,47 +32,24 @@ blockquote {
|
|||
//
|
||||
// The `<ul>` element is a list of items in which the order does <em>not</em>
|
||||
// explicitly matter.
|
||||
//
|
||||
// Markup: grouping-ul.twig
|
||||
//
|
||||
// Style guide: base.grouping.lists.ul
|
||||
|
||||
// Ordered list
|
||||
//
|
||||
// The `<ol>` element is a list of items in which the order <em>does</em>
|
||||
// explicitly matter.
|
||||
//
|
||||
// Markup: grouping-ol.twig
|
||||
//
|
||||
// Style guide: base.grouping.lists.ol
|
||||
|
||||
// Description list
|
||||
//
|
||||
// The `<dl>` element is a list of terms with their associated descriptions.
|
||||
//
|
||||
// Markup: grouping-dl.twig
|
||||
//
|
||||
// Weight: 1
|
||||
//
|
||||
// Style guide: base.grouping.lists.dl
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
// Address margins set differently in IE 6/7.
|
||||
@include margin(1 0);
|
||||
}
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
ol,
|
||||
ul {
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
// Add your styles.
|
||||
}
|
||||
|
|
@ -92,8 +62,6 @@ dd {
|
|||
}
|
||||
}
|
||||
|
||||
// Address paddings set differently in IE 6/7.
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 $indent-amount;
|
||||
|
|
@ -101,6 +69,12 @@ ul {
|
|||
@include rtl {
|
||||
padding: 0 $indent-amount 0 0;
|
||||
}
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Figures
|
||||
|
|
@ -110,18 +84,17 @@ ul {
|
|||
//
|
||||
// Optionally, a `<figcaption>` element inside the `<figure>` represents the
|
||||
// caption of the figure.
|
||||
//
|
||||
// Markup: grouping-figure.twig
|
||||
//
|
||||
// Style guide: base.grouping.figure
|
||||
|
||||
figure {
|
||||
// Add the correct margin in IE 8.
|
||||
@include margin(1 0);
|
||||
// Add the correct display in IE 9-.
|
||||
display: block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
// Add your styles.
|
||||
// Add the correct display in IE 9-.
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Horizontal rule
|
||||
|
|
@ -129,10 +102,6 @@ figcaption {
|
|||
// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
|
||||
// change in a story, or a transition to another topic within a section of a
|
||||
// reference book.
|
||||
//
|
||||
// Markup: grouping-hr.twig
|
||||
//
|
||||
// Style guide: base.grouping.hr
|
||||
|
||||
hr {
|
||||
@extend %divider;
|
||||
|
|
@ -143,17 +112,22 @@ hr {
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
// Main
|
||||
//
|
||||
// The `<main>` element represents the main content of the page.
|
||||
|
||||
main {
|
||||
// Add the correct display in IE.
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Body copy
|
||||
//
|
||||
// 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.
|
||||
//
|
||||
// Markup: grouping-p.twig
|
||||
//
|
||||
// Weight: -2
|
||||
//
|
||||
// Style guide: base.grouping.p
|
||||
|
||||
p,
|
||||
pre {
|
||||
|
|
@ -165,10 +139,14 @@ pre {
|
|||
//
|
||||
// The `<pre>` element represents a block of preformatted text, such as
|
||||
// fragments of computer code, ASCII art, etc.
|
||||
//
|
||||
// Markup: grouping-pre.twig
|
||||
//
|
||||
// Style guide: base.grouping.pre
|
||||
|
||||
%monospace {
|
||||
// Correct the inheritance and scaling of font size in all browsers.
|
||||
// The font-family value ends with ", serif".
|
||||
@include typeface(monospace);
|
||||
// Correct the odd `em` font sizing in all browsers.
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend %monospace;
|
||||
|
|
|
|||
8
sass/base/hidden/_hidden.scss
Normal file
8
sass/base/hidden/_hidden.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// Hidden
|
||||
//
|
||||
// Some older browsers do not hide elements that have a `hidden` attribute.
|
||||
|
||||
[hidden] {
|
||||
// Add the correct display in IE 10-.
|
||||
display: none;
|
||||
}
|
||||
35
sass/base/interactive/_interactive.scss
Normal file
35
sass/base/interactive/_interactive.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Interactive
|
||||
|
||||
// Details
|
||||
|
||||
details {
|
||||
// Add the correct display in Edge, IE, and Firefox.
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
// Add the correct display in all browsers.
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Menu
|
||||
|
||||
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;
|
||||
|
||||
@include rtl {
|
||||
padding: 0 $indent-amount 0 0;
|
||||
}
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
menu &,
|
||||
ol &,
|
||||
ul & {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,14 +10,11 @@
|
|||
// :hover - A link that is being hovered over.
|
||||
// :focus - A link that has been given keyboard focus.
|
||||
// :active - A link that is being actively clicked.
|
||||
//
|
||||
// Markup: links-a.twig
|
||||
//
|
||||
// Style guide: base.link
|
||||
|
||||
a,
|
||||
%link {
|
||||
color: color(link);
|
||||
// sass-lint:disable no-vendor-prefixes
|
||||
// Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
|
@ -42,10 +39,3 @@ a:active {
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the outline on focused links when they are also active or hovered
|
||||
// in all browsers (opinionated).
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
|
|
|||
18
sass/base/scripting/_scripting.scss
Normal file
18
sass/base/scripting/_scripting.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Scripting
|
||||
|
||||
// Canvas
|
||||
|
||||
canvas {
|
||||
// Add the correct display in IE 9-.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Template
|
||||
//
|
||||
// Some older browsers do not hide elements the web components' `template`
|
||||
// element.
|
||||
|
||||
template {
|
||||
// Add the correct display in IE.
|
||||
display: none;
|
||||
}
|
||||
122
sass/base/sections/_sections.scss
Normal file
122
sass/base/sections/_sections.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
// Sections
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
body {
|
||||
// Output a horizontal grid to help with debugging typography. The
|
||||
// $typey-debug variable will toggle its output.
|
||||
@include typey-debug-grid();
|
||||
// Remove the margin in all browsers (opinionated).
|
||||
margin: 0;
|
||||
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`
|
||||
// classes are also available, for when you want to match the font styling of a
|
||||
// heading but still want your text to be displayed inline.
|
||||
|
||||
// Correct the font size and margin on `h1` elements within `section` and
|
||||
// `article` contexts in Chrome, Firefox, and Safari.
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl, 1.5);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl);
|
||||
@include margin-bottom(1, xxl);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl, 1.5);
|
||||
@include margin-top(1, xl);
|
||||
@include margin-bottom(1, xl);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l, 1.5);
|
||||
@include margin-top(1, l);
|
||||
@include margin-bottom(1, l);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m, 1);
|
||||
@include margin-top(1, m);
|
||||
@include margin-bottom(1, m);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s, 1);
|
||||
@include margin-top(1, s);
|
||||
@include margin-bottom(1, s);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs, 1);
|
||||
@include margin-top(1, xs);
|
||||
@include margin-bottom(1, xs);
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl-2, 2);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl-2);
|
||||
@include margin-bottom(1, xxl-2);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl-2, 1.5);
|
||||
@include margin-top(1, xl-2);
|
||||
@include margin-bottom(1, xl-2);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l-2, 1.5);
|
||||
@include margin-top(1, l-2);
|
||||
@include margin-bottom(1, l-2);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m-2, 1);
|
||||
@include margin-top(1, m-2);
|
||||
@include margin-bottom(1, m-2);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s-2, 1);
|
||||
@include margin-top(1, s-2);
|
||||
@include margin-bottom(1, s-2);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs-2, 1);
|
||||
@include margin-top(1, xs-2);
|
||||
@include margin-bottom(1, xs-2);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,11 +2,7 @@
|
|||
//
|
||||
// The `<table>` element displays tabular data in rows, columns, and cells.
|
||||
//
|
||||
// Markup: tables-table.twig
|
||||
//
|
||||
// Weight: 1
|
||||
//
|
||||
// Style guide: base.table
|
||||
|
||||
table {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
|
|||
|
|
@ -3,24 +3,26 @@
|
|||
// The elements in this section give semantics to inline text.
|
||||
//
|
||||
// Weight: 1
|
||||
//
|
||||
// Style guide: base.text
|
||||
|
||||
// Abbreviation / Acroynym
|
||||
//
|
||||
// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
|
||||
// on hover.
|
||||
//
|
||||
// Markup: text-abbr.twig
|
||||
//
|
||||
// Style guide: base.text.abbr
|
||||
|
||||
abbr[title] {
|
||||
// Remove the bottom border in Firefox <40.
|
||||
// Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
border-bottom: 0;
|
||||
// sass-lint:disable no-duplicate-properties
|
||||
// Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
@media print {
|
||||
// Add visible title after abbreviations.
|
||||
&::after {
|
||||
content: ' (' attr(title) ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bold
|
||||
|
|
@ -31,11 +33,7 @@ abbr[title] {
|
|||
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
|
||||
// without conveying additional importance.
|
||||
//
|
||||
// Markup: text-b.twig
|
||||
//
|
||||
// Weight: -1
|
||||
//
|
||||
// Style guide: base.text.b
|
||||
|
||||
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
|
||||
|
|
@ -45,8 +43,8 @@ strong {
|
|||
}
|
||||
|
||||
// sass-lint:disable no-mergeable-selectors
|
||||
strong,
|
||||
b {
|
||||
b,
|
||||
strong {
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
|
@ -66,34 +64,19 @@ cite {
|
|||
|
||||
// Code
|
||||
//
|
||||
// The `<code>` element represents a fragment of computer code. The `<var>`
|
||||
// element represents a variable. The `<samp>` element represents (sample)
|
||||
// output from a program or computing system. The `<kbd>` element represents
|
||||
// user input (typically keyboard input.)
|
||||
//
|
||||
// Markup: text-code.twig
|
||||
//
|
||||
// Style guide: base.text.code
|
||||
// The `<code>` element represents a fragment of computer code. The `<samp>`
|
||||
// element represents (sample) output from a program or computing system. The
|
||||
// `<kbd>` element represents user input (typically keyboard input.)
|
||||
|
||||
%monospace,
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
var {
|
||||
// Correct the inheritance and scaling of font size in all browsers.
|
||||
// The font-family value ends with ", serif".
|
||||
@include typeface(monospace);
|
||||
// Correct the odd `em` font sizing in all browsers.
|
||||
font-size: 1em;
|
||||
samp {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
||||
// Deleted text
|
||||
//
|
||||
// The `<del>` element indicates blocks of text that have been deleted.
|
||||
//
|
||||
// Markup: text-del.twig
|
||||
//
|
||||
// Style guide: base.text.del
|
||||
|
||||
del {
|
||||
// Add your styles.
|
||||
|
|
@ -102,13 +85,9 @@ del {
|
|||
// Definition
|
||||
//
|
||||
// The `<dfn>` element represents the defining instance of a term.
|
||||
//
|
||||
// Markup: text-dfn.twig
|
||||
//
|
||||
// Style guide: base.text.dfn
|
||||
|
||||
dfn {
|
||||
// Add the correct font style in Android <4.4.
|
||||
// Add the correct font style in Android 4.3-.
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -120,11 +99,7 @@ dfn {
|
|||
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
|
||||
// technical terms, etc.
|
||||
//
|
||||
// Markup: text-i.twig
|
||||
//
|
||||
// Weight: -1
|
||||
//
|
||||
// Style guide: base.text.i
|
||||
|
||||
i,
|
||||
em {
|
||||
|
|
@ -134,10 +109,6 @@ em {
|
|||
// Inserted text
|
||||
//
|
||||
// The `<ins>` element indicates additions to the document.
|
||||
//
|
||||
// Markup: text-ins.twig
|
||||
//
|
||||
// Style guide: base.text.ins
|
||||
|
||||
ins {
|
||||
// Add your styles.
|
||||
|
|
@ -147,13 +118,9 @@ ins {
|
|||
//
|
||||
// The `<mark>` element highlights a run of text due to its relevance in another
|
||||
// context.
|
||||
//
|
||||
// Markup: text-mark.twig
|
||||
//
|
||||
// Style guide: base.text.mark
|
||||
|
||||
mark {
|
||||
// Add the correct background and color in IE <10.
|
||||
// Add the correct background and color in IE 9-.
|
||||
background-color: color(mark-bg);
|
||||
color: color(text);
|
||||
}
|
||||
|
|
@ -162,10 +129,6 @@ mark {
|
|||
//
|
||||
// The `<q>` element represents an inline quote from another source. Longer
|
||||
// quotes should use the `<blockquote>` element.
|
||||
//
|
||||
// Markup: text-q.twig
|
||||
//
|
||||
// Style guide: base.text.q
|
||||
|
||||
q {
|
||||
// Add your styles.
|
||||
|
|
@ -174,10 +137,6 @@ q {
|
|||
// Strikethrough text
|
||||
//
|
||||
// The `<s>` element indicates blocks of text that are no longer relevant.
|
||||
//
|
||||
// Markup: text-s.twig
|
||||
//
|
||||
// Style guide: base.text.s
|
||||
|
||||
s {
|
||||
// Add your styles.
|
||||
|
|
@ -187,10 +146,6 @@ s {
|
|||
//
|
||||
// For de-emphasizing inline or blocks of text, use the `<small>` element to set
|
||||
// text at 80% the size of the parent.
|
||||
//
|
||||
// Markup: text-small.twig
|
||||
//
|
||||
// Style guide: base.text.small
|
||||
|
||||
small {
|
||||
// Add the correct font size in all browsers.
|
||||
|
|
@ -201,10 +156,6 @@ small {
|
|||
//
|
||||
// The `<sup>` element represents a superscript and the `<sub>` element
|
||||
// represents a subscript.
|
||||
//
|
||||
// Markup: text-sub.twig
|
||||
//
|
||||
// Style guide: base.text.sub
|
||||
|
||||
sub,
|
||||
sup {
|
||||
|
|
@ -228,10 +179,6 @@ sup {
|
|||
//
|
||||
// To underline text use the `<u>` element. Not recommended since underlines are
|
||||
// used by web browsers to style hyperlinks.
|
||||
//
|
||||
// Markup: text-u.twig
|
||||
//
|
||||
// Style guide: base.text.u
|
||||
|
||||
u {
|
||||
// Add your styles.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
//
|
||||
// A simple box style.
|
||||
//
|
||||
// A block is often styled as a box. However, this design component is
|
||||
// A Drupal block is often styled as a box. However, this design component is
|
||||
// not applied to any blocks by default; it is used as an example of how to
|
||||
// build and document a CSS component.
|
||||
//
|
||||
|
|
@ -16,10 +16,6 @@
|
|||
//
|
||||
// :hover - The hover/focus styling.
|
||||
// .box--highlight - The "highlight" box variant.
|
||||
//
|
||||
// Markup: box.twig
|
||||
//
|
||||
// Style guide: components.box
|
||||
|
||||
.box,
|
||||
%box {
|
||||
|
|
@ -35,9 +31,19 @@
|
|||
}
|
||||
|
||||
// Sass compiles this nested ruleset's selector into:
|
||||
// .box:focus, .box:hover, %box:focus, %box:hover
|
||||
// .box:focus, .box:hover, .box.is-focus, .box--is-focus,
|
||||
// %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
|
||||
//
|
||||
// The ".box--is-focus" class is a stray class we don't actually want, but we
|
||||
// deal with it because we often want a placeholder selector like
|
||||
// %box--is-focus in case we need to use @extends later.
|
||||
//
|
||||
// The ".is-" part of the class name is a Drupal 8 BEM naming convention that
|
||||
// indicates the "focus" is a _state_ of the "box" component.
|
||||
&:focus,
|
||||
&:hover {
|
||||
&:hover,
|
||||
&.is-focus,
|
||||
&--is-focus {
|
||||
border-color: color(text);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
//
|
||||
// Style guide: forms.button
|
||||
|
||||
// 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,
|
||||
|
|
@ -19,6 +22,7 @@ button,
|
|||
html [type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
// sass-lint:disable no-vendor-prefixes
|
||||
-moz-appearance: button;
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
|
@ -30,12 +34,9 @@ button,
|
|||
[type='reset'],
|
||||
[type='submit'] {
|
||||
@extend %button--disabled;
|
||||
@include typeface(headings);
|
||||
@include margin-right(.75);
|
||||
@include margin-bottom(.75);
|
||||
// Some styles don't apply to <a> links since they are inline elements by default.
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
padding: 2px 6px;
|
||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet. And prevent its "line-height: normal" rule below from
|
||||
// breaking the "appearance: button" styling on the input elements.
|
||||
|
|
@ -44,15 +45,8 @@ button,
|
|||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
cursor: pointer;
|
||||
color: color(button);
|
||||
text-align: center;
|
||||
background-image: linear-gradient(#f6f6f6, #e2e2e2);
|
||||
border: 1px solid #e4e4e4;
|
||||
border-left-color: #d2d2d2;
|
||||
border-right-color: #d2d2d2;
|
||||
border-bottom-color: #b4b4b4;
|
||||
border-radius: 2px;
|
||||
|
||||
|
||||
// sass-lint:disable no-vendor-prefixes
|
||||
// Remove the inner border and padding in Firefox.
|
||||
&::-moz-focus-inner {
|
||||
border-style: none;
|
||||
|
|
@ -63,6 +57,7 @@ button,
|
|||
&:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
// sass-lint:enable no-vendor-prefixes
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
@ -71,13 +66,6 @@ button,
|
|||
text-decoration: none;
|
||||
color: color(button);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: #555;
|
||||
text-shadow: color(button) 0 -1px 0;
|
||||
background: color(grey-dark);
|
||||
color: color(text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Add button variations here.
|
||||
|
|
@ -94,10 +82,6 @@ button,
|
|||
// Re-set default cursor for disabled elements.
|
||||
cursor: default;
|
||||
color: color(button-disabled);
|
||||
background-color: color(grey-extra-light);
|
||||
border-color: color(grey-extra-light);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
// Dependencies.
|
||||
@import 'base/headings/headings';
|
||||
@import 'base/grouping/grouping';
|
||||
@import 'components/clearfix/clearfix';
|
||||
|
||||
// Branding header
|
||||
//
|
||||
// Markup: header.twig
|
||||
//
|
||||
// Style guide: components.header
|
||||
|
||||
.header,
|
||||
%header {
|
||||
@include respond-to(s) {
|
||||
display: flex;
|
||||
}
|
||||
@extend %clearfix;
|
||||
|
||||
// Wrapping link for logo.
|
||||
&__logo {
|
||||
margin: 0 $zen-gutters 0 0;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0;
|
||||
|
||||
@include rtl() {
|
||||
margin: 0 0 0 $zen-gutters;
|
||||
float: right;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,11 +29,15 @@
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// Wrapper for website name and slogan.
|
||||
&__name-and-slogan {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// The name of the website.
|
||||
&__site-name {
|
||||
@extend %h1;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// The link around the name of the website.
|
||||
|
|
@ -44,15 +54,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
&__region {
|
||||
@include respond-to(s) {
|
||||
margin-left: auto;
|
||||
// The slogan (or tagline) of a website.
|
||||
&__site-slogan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
// The secondary menu (login, etc.)
|
||||
&__secondary-menu {
|
||||
float: right;
|
||||
|
||||
@include rtl() {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
&__region {
|
||||
// Clear the logo.
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue