mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Merge pull request #114 from locomotivemtl/refactor/css-comments
Standardize scss comments
This commit is contained in:
Lucas
GitHub
@@ -1,3 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Components / Buttons
|
||||
// ==========================================================================
|
||||
|
||||
.c-button {
|
||||
padding: rem(15px) rem(20px);
|
||||
background-color: lightgray;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Form
|
||||
// Components / Form
|
||||
// ==========================================================================
|
||||
|
||||
.c-form {
|
||||
|
||||
}
|
||||
@@ -12,6 +13,7 @@
|
||||
|
||||
// Label
|
||||
// ==========================================================================
|
||||
|
||||
.c-form_label {
|
||||
display: block;
|
||||
margin-bottom: rem(10px);
|
||||
@@ -19,6 +21,7 @@
|
||||
|
||||
// Input
|
||||
// ==========================================================================
|
||||
|
||||
$input-icon-color: 424242; // No #
|
||||
|
||||
.c-form_input {
|
||||
@@ -41,6 +44,7 @@ $input-icon-color: 424242; // No #
|
||||
|
||||
// Checkbox
|
||||
// ==========================================================================
|
||||
|
||||
$checkbox: rem(18px);
|
||||
$checkbox-icon-color: $input-icon-color;
|
||||
|
||||
@@ -108,6 +112,7 @@ $checkbox-icon-color: $input-icon-color;
|
||||
|
||||
// Radio
|
||||
// ==========================================================================
|
||||
|
||||
$radio-icon-color: $input-icon-color;
|
||||
|
||||
.c-form_radioLabel {
|
||||
@@ -129,6 +134,7 @@ $radio-icon-color: $input-icon-color;
|
||||
|
||||
// Select
|
||||
// =============================================================================
|
||||
|
||||
$select-icon: rem(40px);
|
||||
$select-icon-color: $input-icon-color;
|
||||
|
||||
@@ -163,6 +169,7 @@ $select-icon-color: $input-icon-color;
|
||||
|
||||
// Textarea
|
||||
// =============================================================================
|
||||
|
||||
.c-form_textarea {
|
||||
@extend .c-form_input;
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Components / Headings
|
||||
// ==========================================================================
|
||||
|
||||
.c-heading {
|
||||
line-height: $line-height-h;
|
||||
margin-bottom: rem(30px);
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Components / Scrollbar
|
||||
// ==========================================================================
|
||||
|
||||
.c-scrollbar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
// ==========================================================================
|
||||
// Critical CSS
|
||||
// ==========================================================================
|
||||
|
||||
$assets-path: "assets/";
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Base / Page
|
||||
// Elements / Document
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Simple page-level setup.
|
||||
//
|
||||
// 1. Include web fonts
|
||||
|
||||
@@ -2,34 +2,33 @@
|
||||
// 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] */
|
||||
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] */
|
||||
vertical-align: middle; // [4]
|
||||
text-align: center; // [3]
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
font: inherit; /* [5] */
|
||||
font: inherit; // [5]
|
||||
line-height: normal;
|
||||
cursor: pointer; /* [6] */
|
||||
cursor: pointer; // [6]
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -31,11 +31,11 @@ select {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Remove Firefox :focus dotted outline, breaks color inherit
|
||||
// &:-moz-focusring {
|
||||
// color: transparent;
|
||||
// text-shadow: 0 0 0 #000000; // Text :focus color
|
||||
// }
|
||||
// // Remove Firefox :focus dotted outline, breaks color inherit
|
||||
// // &:-moz-focusring {
|
||||
// // color: transparent;
|
||||
// // text-shadow: 0 0 0 #000000; // Text :focus color
|
||||
// // }
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
@@ -6,11 +6,10 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in IE 10-.
|
||||
// 1. Add the correct display in IE.
|
||||
//
|
||||
template, /* [1] */
|
||||
|
||||
template, // [1]
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -62,11 +61,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Single taps should be dispatched immediately on clickable elements
|
||||
*/
|
||||
// 1. Single taps should be dispatched immediately on clickable elements
|
||||
|
||||
a, area, button, input, label, select, textarea, [tabindex] {
|
||||
-ms-touch-action: manipulation; /* [1] */
|
||||
-ms-touch-action: manipulation; // [1]
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,57 +2,51 @@
|
||||
// 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] */
|
||||
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] */
|
||||
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] */
|
||||
// 4. If a `width` and/or `height` attribute have been explicitly defined,
|
||||
// let’s not make the image fluid.
|
||||
|
||||
&[width], // [4]
|
||||
&[height] {
|
||||
/* [4] */
|
||||
// [4]
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 4. Offset `alt` text from surrounding copy.
|
||||
//
|
||||
|
||||
img {
|
||||
font-style: italic; /* [4] */
|
||||
font-style: italic; // [4]
|
||||
}
|
||||
|
||||
//
|
||||
// 5. SVG elements should fallback to their surrounding text color.
|
||||
//
|
||||
|
||||
svg {
|
||||
fill: currentColor; /* [5] */
|
||||
fill: currentColor; // [5]
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
// Settings
|
||||
// ==========================================================================
|
||||
|
||||
@import "settings/config.eases";
|
||||
@import "settings/config.colors";
|
||||
@import "settings/config";
|
||||
@@ -11,6 +12,7 @@
|
||||
// ==========================================================================
|
||||
// Tools
|
||||
// ==========================================================================
|
||||
|
||||
@import "tools/functions";
|
||||
@import "tools/mixins";
|
||||
@import "tools/fonts";
|
||||
@@ -20,6 +22,7 @@
|
||||
|
||||
// Generic
|
||||
// ==========================================================================
|
||||
|
||||
@import "node_modules/normalize.css/normalize";
|
||||
@import "generic/generic";
|
||||
@import "generic/media";
|
||||
@@ -28,10 +31,12 @@
|
||||
|
||||
// Elements
|
||||
// ==========================================================================
|
||||
|
||||
@import "elements/document";
|
||||
|
||||
// Objects
|
||||
// ==========================================================================
|
||||
|
||||
@import "objects/scroll";
|
||||
@import "objects/container";
|
||||
@import "objects/ratio";
|
||||
@@ -45,6 +50,7 @@
|
||||
|
||||
// Components
|
||||
// ==========================================================================
|
||||
|
||||
@import "components/scrollbar";
|
||||
@import "components/heading";
|
||||
@import "components/button";
|
||||
@@ -56,6 +62,7 @@
|
||||
|
||||
// Utilities
|
||||
// ==========================================================================
|
||||
|
||||
@import "utilities/ratio";
|
||||
@import "utilities/widths";
|
||||
// @import "utilities/align";
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
// Objects / Container
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Page-level constraining and wrapping elements.
|
||||
//
|
||||
// > In programming languages the word *container* is generally used for structures
|
||||
@@ -10,7 +9,6 @@
|
||||
// > A *wrapper* instead is something that wraps around a single object to provide
|
||||
// more functionalities and interfaces to it.
|
||||
// @link http://stackoverflow.com/a/13202141/140357
|
||||
//
|
||||
|
||||
.o-container {
|
||||
margin-right: auto;
|
||||
|
||||
@@ -2,45 +2,42 @@
|
||||
// Objects / Crop
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
|
||||
//
|
||||
|
||||
|
||||
// A list of cropping ratios that get generated as modifier classes.
|
||||
|
||||
$crop-ratios: (
|
||||
(2:1),
|
||||
(4:3),
|
||||
(16:9),
|
||||
) !default;
|
||||
|
||||
/**
|
||||
* Provide a cropping container in order to display media (usually images)
|
||||
* cropped to certain ratios.
|
||||
*
|
||||
* 1. Set up a positioning context in which the image can sit.
|
||||
* 2. This is the crucial part: where the cropping happens.
|
||||
*/
|
||||
// Provide a cropping container in order to display media (usually images)
|
||||
// cropped to certain ratios.
|
||||
//
|
||||
// 1. Set up a positioning context in which the image can sit.
|
||||
// 2. This is the crucial part: where the cropping happens.
|
||||
|
||||
.o-crop {
|
||||
position: relative; /* [1] */
|
||||
position: relative; // [1]
|
||||
display: block;
|
||||
overflow: hidden; /* [2] */
|
||||
overflow: hidden; // [2]
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply this class to the content (usually `img`) that needs cropping.
|
||||
*
|
||||
* 1. Image’s default positioning is top-left in the cropping box.
|
||||
* 2. Make sure the media doesn’t stop itself too soon.
|
||||
*/
|
||||
// Apply this class to the content (usually `img`) that needs cropping.
|
||||
//
|
||||
// 1. Image’s default positioning is top-left in the cropping box.
|
||||
// 2. Make sure the media doesn’t stop itself too soon.
|
||||
|
||||
.o-crop_content {
|
||||
position: absolute;
|
||||
top: 0; /* [1] */
|
||||
left: 0; /* [1] */
|
||||
max-width: none; /* [2] */
|
||||
top: 0; // [1]
|
||||
left: 0; // [1]
|
||||
max-width: none; // [2]
|
||||
|
||||
// We can position the media in different locations within the cropping area.
|
||||
|
||||
/**
|
||||
* We can position the media in different locations within the cropping area.
|
||||
*/
|
||||
&.-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@@ -60,22 +57,20 @@ $crop-ratios: (
|
||||
|
||||
/* stylelint-disable */
|
||||
|
||||
//
|
||||
// Generate a series of crop classes to be used like so:
|
||||
//
|
||||
// @example
|
||||
// <div class="o-crop -16:9">
|
||||
//
|
||||
//
|
||||
|
||||
.o-crop {
|
||||
@each $crop in $crop-ratios {
|
||||
@each $antecedent, $consequent in $crop {
|
||||
@if (type-of($antecedent) != number) {
|
||||
@error "`#{$antecedent}` needs to be a number."
|
||||
@error "`#{$antecedent}` needs to be a number.";
|
||||
}
|
||||
|
||||
@if (type-of($consequent) != number) {
|
||||
@error "`#{$consequent}` needs to be a number."
|
||||
@error "`#{$consequent}` needs to be a number.";
|
||||
}
|
||||
|
||||
&.-#{$antecedent}\:#{$consequent} {
|
||||
|
||||
@@ -2,41 +2,41 @@
|
||||
// Objects / Layout
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Grid-like layout system.
|
||||
//
|
||||
// The layout object provides us with a column-style layout system. This file
|
||||
// contains the basic structural elements, but classes should be complemented
|
||||
// with width utilities, for example:
|
||||
//
|
||||
// @example
|
||||
// <div class="o-layout">
|
||||
// <div class="o-layout_item u-1/1 u-1/3@medium">
|
||||
// </div>
|
||||
// <div class="o-layout_item u-1/2 u-1/3@medium">
|
||||
// </div>
|
||||
// <div class="o-layout_item u-1/2 u-1/3@medium">
|
||||
// </div>
|
||||
// </div>
|
||||
//
|
||||
// We can also manipulate entire layout systems by adding a series of modifiers
|
||||
// to the `.o-layout` block. For example:
|
||||
//
|
||||
// @example
|
||||
// <div class="o-layout -reverse">
|
||||
//
|
||||
// This will reverse the displayed order of the system so that it runs in the
|
||||
// opposite order to our source, effectively flipping the system over.
|
||||
//
|
||||
// @example
|
||||
// <div class="o-layout -[right|center]">
|
||||
//
|
||||
// This will cause the system to fill up from either the centre or the right
|
||||
// hand side. Default behaviour is to fill up the layout system from the left.
|
||||
//
|
||||
// @requires tools/layout
|
||||
// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
|
||||
//
|
||||
////
|
||||
/// Grid-like layout system.
|
||||
///
|
||||
/// The layout object provides us with a column-style layout system. This file
|
||||
/// contains the basic structural elements, but classes should be complemented
|
||||
/// with width utilities, for example:
|
||||
///
|
||||
/// @example
|
||||
/// <div class="o-layout">
|
||||
/// <div class="o-layout_item u-1/1 u-1/3@medium">
|
||||
/// </div>
|
||||
/// <div class="o-layout_item u-1/2 u-1/3@medium">
|
||||
/// </div>
|
||||
/// <div class="o-layout_item u-1/2 u-1/3@medium">
|
||||
/// </div>
|
||||
/// </div>
|
||||
///
|
||||
/// We can also manipulate entire layout systems by adding a series of modifiers
|
||||
/// to the `.o-layout` block. For example:
|
||||
///
|
||||
/// @example
|
||||
/// <div class="o-layout -reverse">
|
||||
///
|
||||
/// This will reverse the displayed order of the system so that it runs in the
|
||||
/// opposite order to our source, effectively flipping the system over.
|
||||
///
|
||||
/// @example
|
||||
/// <div class="o-layout -[right|center]">
|
||||
///
|
||||
/// This will cause the system to fill up from either the centre or the right
|
||||
/// hand side. Default behaviour is to fill up the layout system from the left.
|
||||
///
|
||||
/// @requires tools/layout
|
||||
/// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
|
||||
////
|
||||
|
||||
.o-layout {
|
||||
@include o-layout;
|
||||
|
||||
@@ -2,14 +2,13 @@
|
||||
// Objects / Ratio
|
||||
// ==========================================================================
|
||||
|
||||
/**
|
||||
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
|
||||
* their correct aspect ratios.
|
||||
*
|
||||
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
|
||||
*
|
||||
* 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
|
||||
*/
|
||||
// Create ratio-bound content blocks, to keep media (e.g. images, videos) in
|
||||
// their correct aspect ratios.
|
||||
//
|
||||
// http://alistapart.com/article/creating-intrinsic-ratios-for-video
|
||||
//
|
||||
// 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
|
||||
|
||||
.o-ratio {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -17,7 +16,7 @@
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
padding-bottom: 100%; /* [1] */
|
||||
padding-bottom: 100%; // [1]
|
||||
width: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Objects / Scroll
|
||||
// ==========================================================================
|
||||
|
||||
.o-scroll {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
// ==========================================================================
|
||||
// Objects / Tables
|
||||
// ==========================================================================
|
||||
|
||||
.o-table {
|
||||
width: 100%;
|
||||
|
||||
/**
|
||||
* Force all cells within a table to occupy the same width as each other.
|
||||
*
|
||||
* @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
|
||||
*/
|
||||
// Force all cells within a table to occupy the same width as each other.
|
||||
//
|
||||
// @link https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
|
||||
|
||||
&.-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
@@ -4,21 +4,25 @@
|
||||
|
||||
// Palette
|
||||
// =============================================================================
|
||||
|
||||
$white: #FFFFFF;
|
||||
$black: #000000;
|
||||
|
||||
// Specific
|
||||
// =============================================================================
|
||||
|
||||
// Link
|
||||
$link-color: #1A0DAB;
|
||||
$link-focus-color: #1A0DAB;
|
||||
$link-hover-color: darken(#1A0DAB, 10%);
|
||||
|
||||
// Selection
|
||||
$selection-text-color: #3297FD;
|
||||
$selection-background-color: #FFFFFF;
|
||||
|
||||
// Social Colors
|
||||
// =============================================================================
|
||||
|
||||
$facebook-color: #3B5998;
|
||||
$instagram-color: #E1306C;
|
||||
$youtube-color: #CD201F;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Settings / Config / Eases
|
||||
// ==========================================================================
|
||||
|
||||
$Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
$Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
$Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
// Context
|
||||
// =============================================================================
|
||||
|
||||
// The current stylesheet context. Available values: frontend, editor.
|
||||
$context: frontend !default;
|
||||
|
||||
@@ -28,10 +29,12 @@ $font-faces: (
|
||||
|
||||
// Typography
|
||||
// =============================================================================
|
||||
|
||||
// Base
|
||||
$font-size: 16px;
|
||||
$line-height: 24px / $font-size;
|
||||
$color: #222222;
|
||||
|
||||
// Headings
|
||||
$font-size-h1: 36px !default;
|
||||
$font-size-h2: 28px !default;
|
||||
@@ -40,6 +43,7 @@ $font-size-h4: 20px !default;
|
||||
$font-size-h5: 18px !default;
|
||||
$font-size-h6: 16px !default;
|
||||
$line-height-h: $line-height;
|
||||
|
||||
// Weights
|
||||
$light: 300;
|
||||
$normal: 400;
|
||||
@@ -48,21 +52,25 @@ $bold: 700;
|
||||
|
||||
// Transitions
|
||||
// =============================================================================
|
||||
|
||||
$speed: 0.3s;
|
||||
$easing: $Power2EaseOut;
|
||||
|
||||
// Spacing Units
|
||||
// =============================================================================
|
||||
|
||||
$unit: 60px;
|
||||
$unit-small: 30px;
|
||||
|
||||
// Container
|
||||
// ==========================================================================
|
||||
// =============================================================================
|
||||
|
||||
$container-width: 2000px;
|
||||
$padding: $unit;
|
||||
|
||||
// Breakpoints
|
||||
// =============================================================================
|
||||
|
||||
$from-tiny: 500px !default;
|
||||
$to-tiny: $from-tiny - 1 !default;
|
||||
$from-small: 700px !default;
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
//
|
||||
//
|
||||
// ==========================================================================
|
||||
// Tools / Family
|
||||
// ==========================================================================
|
||||
|
||||
// DOCS : https://lukyvj.github.io/family.scss/
|
||||
//
|
||||
//
|
||||
/// Select all children from the first to `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select all children from the first to `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin first($num) {
|
||||
@if $num == 1 {
|
||||
&:first-child {
|
||||
@@ -19,108 +21,118 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all children from the last to `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select all children from the last to `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin last($num) {
|
||||
&:nth-last-child(-n + #{$num}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all children after the first to `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select all children after the first to `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin after-first($num) {
|
||||
&:nth-child(n + #{$num + 1}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all children before `$num` from the last.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select all children before `$num` from the last.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin from-end($num) {
|
||||
&:nth-last-child(#{$num}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all children between `$first` and `$last`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all children between `$first` and `$last`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin between($first, $last) {
|
||||
&:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all even children between `$first` and `$last`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all even children between `$first` and `$last`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin even-between($first, $last) {
|
||||
&:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all odd children between `$first` and `$last`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all odd children between `$first` and `$last`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin odd-between($first, $last) {
|
||||
&:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all `$num` children between `$first` and `$last`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all `$num` children between `$first` and `$last`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin n-between($num, $first, $last) {
|
||||
&:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Select all children but `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
/// Select all children but `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
@mixin all-but($num) {
|
||||
&:not(:nth-child(#{$num})) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select children each `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
/// @alias every
|
||||
// Select children each `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
// @alias every
|
||||
|
||||
@mixin each($num) {
|
||||
&:nth-child(#{$num}n) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select children each `$num`.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select children each `$num`.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin every($num) {
|
||||
&:nth-child(#{$num}n) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select the `$num` child from the start and the `$num` child from the last.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
// Select the `$num` child from the start and the `$num` child from the last.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
@mixin from-first-last($num) {
|
||||
&:nth-child(#{$num}),
|
||||
&:nth-last-child(#{$num}) {
|
||||
@@ -128,57 +140,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Select the item in the middle of `$num` child. Only works with odd number
|
||||
// chain.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
/// Select the item in the middle of `$num` child. Only works with odd number
|
||||
/// chain.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
@mixin middle($num) {
|
||||
&:nth-child(#{round($num / 2)}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Select all children between the `$num` first and the `$num` last.
|
||||
// @group with-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - id of the child
|
||||
|
||||
/// Select all children between the `$num` first and the `$num` last.
|
||||
/// @group with-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - id of the child
|
||||
@mixin all-but-first-last($num) {
|
||||
&:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// This quantity-query mixin will only select the first of `$limit` items. It will not
|
||||
// work if there is not as much as item as you set in `$limit`.
|
||||
// @group Quantity queries
|
||||
// @param {number} $limit
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
/// This quantity-query mixin will only select the first of `$limit` items. It will not
|
||||
/// work if there is not as much as item as you set in `$limit`.
|
||||
/// @group Quantity queries
|
||||
/// @param {number} $limit
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
@mixin first-of($limit) {
|
||||
&:nth-last-child(#{$limit}):first-child {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// This quantity-query mixin will only select the last of `$limit` items. It will not
|
||||
/// if there is not as much as item as you set in `$limit`.
|
||||
/// @group Quantity queries
|
||||
/// @param {number} $limit
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// This quantity-query mixin will only select the last of `$limit` items. It will not
|
||||
// if there is not as much as item as you set in `$limit`.
|
||||
// @group Quantity queries
|
||||
// @param {number} $limit
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin last-of($limit) {
|
||||
&:nth-of-type(#{$limit}):nth-last-of-type(1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// This quantity-query mixin will select every items if there is at least `$num` items. It will not
|
||||
/// if there is not as much as item as you set in `$num`.
|
||||
/// @group Quantity queries
|
||||
/// @param {number} $limit
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// This quantity-query mixin will select every items if there is at least `$num` items. It will not
|
||||
// if there is not as much as item as you set in `$num`.
|
||||
// @group Quantity queries
|
||||
// @param {number} $limit
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin at-least($num) {
|
||||
$selector: &;
|
||||
$child: nth(nth($selector, -1), -1);
|
||||
@@ -189,11 +203,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// This quantity-query mixin will select every items if there is at most `$num` items. It will not
|
||||
/// if there is not as much as item as you set in `$num`.
|
||||
/// @group Quantity queries
|
||||
/// @param {number} $limit
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// This quantity-query mixin will select every items if there is at most `$num` items. It will not
|
||||
// if there is not as much as item as you set in `$num`.
|
||||
// @group Quantity queries
|
||||
// @param {number} $limit
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin at-most($num) {
|
||||
$selector: &;
|
||||
$child: nth(nth($selector, -1), -1);
|
||||
@@ -204,10 +219,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
|
||||
/// @group Quantity queries
|
||||
/// @param {number} $limit
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
|
||||
// @group Quantity queries
|
||||
// @param {number} $limit
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin in-between($min, $max) {
|
||||
$selector: &;
|
||||
$child: nth(nth($selector, -1), -1);
|
||||
@@ -218,45 +234,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Select the first exact child
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select the first exact child
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin first-child() {
|
||||
&:first-of-type {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
/// Select the last exact child
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select the last exact child
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin last-child() {
|
||||
&:last-of-type {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all even children.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all even children.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin even() {
|
||||
&:nth-child(even) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select all odd children.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select all odd children.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin odd() {
|
||||
&:nth-child(odd) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Select only the first and last child.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Select only the first and last child.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin first-last() {
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
@@ -264,43 +285,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Will only select the child if it’s unique.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @alias only
|
||||
// Will only select the child if it’s unique.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @alias only
|
||||
|
||||
@mixin unique() {
|
||||
&:only-child {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Will only select the child if it’s unique.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Will only select the child if it’s unique.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin only() {
|
||||
&:only-child {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/// Will only select children if they are not unique. Meaning if there is at
|
||||
/// least 2 children, the style is applied.
|
||||
/// @group no-arguments
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// Will only select children if they are not unique. Meaning if there is at
|
||||
// least 2 children, the style is applied.
|
||||
// @group no-arguments
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
|
||||
@mixin not-unique() {
|
||||
&:not(:only-child) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// This mixin is used to automatically sort z-index in numerical order. But it
|
||||
// can also sort them in anti-numerical order, depending the parameters you use.
|
||||
// @group using functions
|
||||
// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
// @param {number} $num - Number of children
|
||||
// @param {string} $direction [forward] - Direction of the sort
|
||||
// @param {number} $index [0] - Index of the sorting
|
||||
|
||||
/// This mixin is used to automatically sort z-index in numerical order. But it
|
||||
/// can also sort them in anti-numerical order, depending the parameters you use.
|
||||
/// @group using functions
|
||||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||||
/// @param {number} $num - Number of children
|
||||
/// @param {string} $direction [forward] - Direction of the sort
|
||||
/// @param {number} $index [0] - Index of the sorting
|
||||
@mixin child-index($num, $direction: 'forward', $index: 0) {
|
||||
@for $i from 1 through $num {
|
||||
@if ($direction == 'forward') {
|
||||
@@ -317,11 +341,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Used by the child-index mixin. It will returned the proper sorted numbers
|
||||
/// depending on the `$index` value.
|
||||
/// @access private
|
||||
/// @param {number} $num - Number of children
|
||||
/// @param {number} $index - Index of the sorting
|
||||
// Used by the child-index mixin. It will returned the proper sorted numbers
|
||||
// depending on the `$index` value.
|
||||
// @access private
|
||||
// @param {number} $num - Number of children
|
||||
// @param {number} $index - Index of the sorting
|
||||
|
||||
@function order-index($i, $index) {
|
||||
@return ($index + $i);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,12 @@
|
||||
// Tools / Font Faces
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Import the webfont with font-face as woff and woff2
|
||||
//
|
||||
// @param {List} $webfont (font name, filename, font-weight, font-style) - Each webfont to import.
|
||||
// @param {String} $dir - The webfont directory path
|
||||
// @output void
|
||||
//
|
||||
|
||||
@mixin font-face($webfont, $dir) {
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
@@ -20,25 +19,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Loops through a list of local fonts and import each font-face as woff and woff2
|
||||
//
|
||||
// @param {List} $webfonts [(font name, filename, font-weight, font-style)] - Each webfont to import.
|
||||
// @param {String} $dir - The webfont directory path
|
||||
// @output void
|
||||
//
|
||||
|
||||
@mixin font-faces($webfonts, $dir) {
|
||||
@each $webfont in $webfonts {
|
||||
@include font-face($webfont, $dir);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Map the font-family requires with the existing imported font-families
|
||||
//
|
||||
// @param {String} $font-family - The name of the webfont.
|
||||
// @return {String} The webfont and it's fallbacks.
|
||||
//
|
||||
|
||||
@function ff($font-family) {
|
||||
@if not map-has-key($font-families, $font-family) {
|
||||
@error "No font-family found in $font-families map for `#{$font-family}`. Property omitted.";
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
// ==========================================================================
|
||||
// Tools / Functions
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Converts the given pixel value to its EM quivalent.
|
||||
//
|
||||
// @param {Number} $size - The pixel value to convert.
|
||||
// @param {Number} $base [$font-size] - The assumed base font size.
|
||||
// @return {Number} Scalable pixel value in EMs.
|
||||
//
|
||||
|
||||
@function em($size, $base: $font-size) {
|
||||
@if (type-of($size) == number) {
|
||||
@if (unit($size) != "px") {
|
||||
@@ -28,13 +28,12 @@
|
||||
@return ($size / $base) * 1em;
|
||||
}
|
||||
|
||||
//
|
||||
// Converts the given pixel value to its REM quivalent.
|
||||
//
|
||||
// @param {Number} $size - The pixel value to convert.
|
||||
// @param {Number} $base [$font-size] - The assumed base font size.
|
||||
// @return {Number} Scalable pixel value in REMs.
|
||||
//
|
||||
|
||||
@function rem($size, $base: $font-size) {
|
||||
@if (type-of($size) == number) {
|
||||
@if (unit($size) != "px") {
|
||||
@@ -55,19 +54,17 @@
|
||||
@return ($size / $base) * 1rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Converts a number to a percentage.
|
||||
//
|
||||
// @alias percentage()
|
||||
// @link http://sassdoc.com/annotations/#alias
|
||||
// @param {Number} $number - The value to convert.
|
||||
// @return {Number} A percentage.
|
||||
//
|
||||
|
||||
@function span($number) {
|
||||
@return percentage($number);
|
||||
}
|
||||
|
||||
//
|
||||
// Checks if a list contains a value(s).
|
||||
//
|
||||
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
|
||||
@@ -75,7 +72,7 @@
|
||||
// @param {List} $values - A single value or list of values to check for.
|
||||
// @return {Boolean}
|
||||
// @access private
|
||||
//
|
||||
|
||||
@function list-contains(
|
||||
$list,
|
||||
$values...
|
||||
@@ -89,38 +86,35 @@
|
||||
@return true;
|
||||
}
|
||||
|
||||
//
|
||||
// Resolve whether a rule is important or not.
|
||||
//
|
||||
// @param {Boolean} $flag - Whether a rule is important (TRUE) or not (FALSE).
|
||||
// @return {String|Null} Returns `!important` or NULL.
|
||||
//
|
||||
|
||||
@function important($flag: false) {
|
||||
@if ($flag == true) {
|
||||
@return !important;
|
||||
} @elseif ($important == false) {
|
||||
@return null;
|
||||
} @else {
|
||||
@error "`#{$flag}` needs to be `true` or `false`."
|
||||
@error "`#{$flag}` needs to be `true` or `false`.";
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Determine if the current context is for a WYSIWYG editor.
|
||||
//
|
||||
// @requires {String} $context - The global context of the stylesheet.
|
||||
// @return {Boolean} If the $context is set to "editor".
|
||||
//
|
||||
|
||||
@function is-editor() {
|
||||
@return ('editor' == $context);
|
||||
}
|
||||
|
||||
//
|
||||
// Determine if the current context is for the front-end.
|
||||
//
|
||||
// @requires {String} $context - The global context of the stylesheet.
|
||||
// @return {Boolean} If the $context is set to "frontend".
|
||||
//
|
||||
|
||||
@function is-frontend() {
|
||||
@return ('frontend' == $context);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
// Tools / Layout
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Grid-like layout system.
|
||||
//
|
||||
// The layout tools provide a column-style layout system. This file contains
|
||||
@@ -10,7 +9,6 @@
|
||||
//
|
||||
// @link https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss
|
||||
//
|
||||
|
||||
//
|
||||
// Generate the layout container.
|
||||
//
|
||||
@@ -19,7 +17,7 @@
|
||||
//
|
||||
// @requires {function} u-list-reset
|
||||
// @output `font-size`, `margin`, `padding`, `list-style`
|
||||
//
|
||||
|
||||
@mixin o-layout($gutter: 0, $fix-whitespace: true) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -34,7 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Generate the layout item.
|
||||
//
|
||||
// 1. Required in order to combine fluid widths with fixed gutters.
|
||||
@@ -45,7 +42,7 @@
|
||||
// 4. By default, all layout items are full-width (mobile first).
|
||||
// 5. Gutters provided by left padding:
|
||||
// http://csswizardry.com/2011/08/building-better-grid-systems/
|
||||
//
|
||||
|
||||
@mixin o-layout_item($gutter: 0, $fix-whitespace: true) {
|
||||
display: inline-block; // [2]
|
||||
width: 100%; // [4]
|
||||
|
||||
@@ -2,37 +2,34 @@
|
||||
// Tools / Mixins
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Set the color of the highlight that appears over a link while it's being tapped.
|
||||
//
|
||||
// By default, the highlight is suppressed.
|
||||
//
|
||||
// @param {Color} $value [rgba(0, 0, 0, 0)] - The value of the highlight.
|
||||
// @output `-webkit-tap-highlight-color`
|
||||
//
|
||||
|
||||
@mixin tap-highlight-color($value: rgba(0, 0, 0, 0)) {
|
||||
-webkit-tap-highlight-color: $value;
|
||||
}
|
||||
|
||||
//
|
||||
// Set whether or not touch devices use momentum-based scrolling for the given element.
|
||||
//
|
||||
// By default, applies momentum-based scrolling for the current element.
|
||||
//
|
||||
// @param {String} $value [rgba(0, 0, 0, 0)] - The type of scrolling.
|
||||
// @output `-webkit-overflow-scrolling`
|
||||
//
|
||||
|
||||
@mixin overflow-scrolling($value: touch) {
|
||||
-webkit-overflow-scrolling: $value;
|
||||
}
|
||||
|
||||
//
|
||||
// Micro clearfix rules for containing floats.
|
||||
//
|
||||
// @link http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
|
||||
// @param {List} $supports The type of clearfix to generate.
|
||||
// @output Injects `:::after` pseudo-element.
|
||||
//
|
||||
|
||||
@mixin u-clearfix($supports...) {
|
||||
&::after {
|
||||
display: if(list-contains($supports, table), table, block);
|
||||
@@ -41,7 +38,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Generate a font-size and baseline-compatible line-height.
|
||||
//
|
||||
// @link https://github.com/inuitcss/inuitcss/c14029c/tools/_tools.font-size.scss
|
||||
@@ -49,7 +45,7 @@
|
||||
// @param {Number} $line-height [auto] - The line box height.
|
||||
// @param {Boolean} $important [false] - Whether the font-size is important.
|
||||
// @output `font-size`, `line-height`
|
||||
//
|
||||
|
||||
@mixin font-size($font-size, $line-height: auto, $important: false) {
|
||||
$important: important($important);
|
||||
font-size: rem($font-size) $important;
|
||||
@@ -67,7 +63,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Vertically-center the direct descendants of the current element.
|
||||
//
|
||||
// Centering is achieved by displaying children as inline-blocks. Any whitespace
|
||||
@@ -75,7 +70,7 @@
|
||||
// and its children.
|
||||
//
|
||||
// @output `font-size`, `display`, `vertical-align`
|
||||
//
|
||||
|
||||
@mixin o-vertical-center {
|
||||
font-size: 0;
|
||||
|
||||
@@ -93,13 +88,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Generate `:hover` and `:focus` styles in one go.
|
||||
//
|
||||
// @link https://github.com/inuitcss/inuitcss/blob/master/tools/_tools.mixins.scss
|
||||
// @content Wrapped in `:focus` and `:hover` pseudo-classes.
|
||||
// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
|
||||
//
|
||||
|
||||
@mixin u-hocus {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@@ -107,13 +101,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Generate `:active` and `:focus` styles in one go.
|
||||
//
|
||||
// @see {Mixin} u-hocus
|
||||
// @content Wrapped in `:focus` and `:active` pseudo-classes.
|
||||
// @output Wraps the given content in `:focus` and `:hover` pseudo-classes.
|
||||
//
|
||||
|
||||
@mixin u-actus {
|
||||
&:focus,
|
||||
&:active {
|
||||
@@ -121,7 +114,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent text from wrapping onto multiple lines for the current element.
|
||||
//
|
||||
// An ellipsis is appended to the end of the line.
|
||||
@@ -131,7 +123,7 @@
|
||||
//
|
||||
// @param {Number} $width [100%] - The maximum width of element.
|
||||
// @output `max-width`, `word-wrap`, `white-space`, `overflow`, `text-overflow`
|
||||
//
|
||||
|
||||
@mixin u-truncate($width: 100%) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -142,12 +134,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Applies accessible hiding to the current element.
|
||||
//
|
||||
// @param {Boolean} $important [true] - Whether the visibility is important.
|
||||
// @output Properties for removing the element from the document flow.
|
||||
//
|
||||
|
||||
@mixin u-accessibly-hidden($important: true) {
|
||||
$important: important($important);
|
||||
position: absolute $important;
|
||||
@@ -160,12 +151,11 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Allows an accessibly hidden element to be focusable via keyboard navigation.
|
||||
//
|
||||
// @content For styling the now visible element.
|
||||
// @output Injects `:focus`, `:active` pseudo-classes.
|
||||
//
|
||||
|
||||
@mixin u-accessibly-focusable {
|
||||
@include u-actus {
|
||||
clip: auto;
|
||||
@@ -176,7 +166,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Hide the current element from all.
|
||||
//
|
||||
// The element will be hidden from screen readers and removed from the document flow.
|
||||
@@ -184,14 +173,13 @@
|
||||
// @link http://juicystudio.com/article/screen-readers-display-none.php
|
||||
// @param {Boolean} $important [true] - Whether the visibility is important.
|
||||
// @output `display`, `visibility`
|
||||
//
|
||||
|
||||
@mixin u-hidden($important: true) {
|
||||
$important: important($important);
|
||||
display: none $important;
|
||||
visibility: hidden $important;
|
||||
}
|
||||
|
||||
//
|
||||
// Show the current element for all.
|
||||
//
|
||||
// The element will be accessible from screen readers and visible in the document flow.
|
||||
@@ -199,7 +187,7 @@
|
||||
// @param {String} $display [block] - The rendering box used for the element.
|
||||
// @param {Boolean} $important [true] - Whether the visibility is important.
|
||||
// @output `display`, `visibility`
|
||||
//
|
||||
|
||||
@mixin u-shown($display: block, $important: true) {
|
||||
$important: important($important);
|
||||
display: $display $important;
|
||||
|
||||
@@ -10,19 +10,21 @@
|
||||
// .u-pull-2/4
|
||||
// .u-pull-1/5
|
||||
// .u-push-2/3
|
||||
|
||||
$widths-offsets: false !default;
|
||||
|
||||
// By default, the boilerplate uses fractions-like classes like `<div class="u-1/4">`.
|
||||
// You can change the `/` to whatever you fancy with this variable.
|
||||
|
||||
$fractions-delimiter: \/ !default;
|
||||
|
||||
// When using Sass-MQ, this defines the separator for the breakpoints suffix
|
||||
// in the class name. By default, we are generating the responsive suffixes
|
||||
// for the classes with a `@` symbol so you get classes like:
|
||||
// <div class="u-3/12@mobile">
|
||||
|
||||
$breakpoint-delimiter: \@ !default;
|
||||
|
||||
//
|
||||
// Generate a series of width helper classes
|
||||
//
|
||||
// @example scss
|
||||
@@ -45,7 +47,7 @@ $breakpoint-delimiter: \@ !default;
|
||||
// @param {List} $colums - The columns we want the widths to have.
|
||||
// @param {String} $breakpoint - Optional suffix for responsive widths.
|
||||
// @output `width`, `position`, `right`, `left`
|
||||
//
|
||||
|
||||
@mixin widths($columns, $breakpoint: null, $important: true) {
|
||||
$important: important($important);
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
// Floats
|
||||
// ==========================================================================
|
||||
|
||||
.u-float-left {
|
||||
float: left !important;
|
||||
}
|
||||
@@ -14,6 +15,7 @@
|
||||
|
||||
// Horizontal Text
|
||||
// ==========================================================================
|
||||
|
||||
.u-text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
@@ -28,6 +30,7 @@
|
||||
|
||||
// Vertical Text
|
||||
// ==========================================================================
|
||||
|
||||
.u-align-baseline {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
@@ -4,18 +4,21 @@
|
||||
|
||||
// Layout
|
||||
// ==========================================================================
|
||||
|
||||
.u-clearfix {
|
||||
@include u-clearfix;
|
||||
}
|
||||
|
||||
// Decorative
|
||||
// =============================================================================
|
||||
|
||||
.u-truncate {
|
||||
@include u-truncate;
|
||||
}
|
||||
|
||||
// Visibility / Display
|
||||
// ==========================================================================
|
||||
|
||||
[hidden][aria-hidden="false"] {
|
||||
position: absolute;
|
||||
display: inherit;
|
||||
@@ -30,35 +33,33 @@
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
|
||||
// * inline-block will display at its default size, and not limit its width to
|
||||
// * 100% of an ancestral container.
|
||||
// */
|
||||
// // 1. Fix for Firefox bug: an image styled `max-width:100%` within an
|
||||
// // inline-block will display at its default size, and not limit its width to
|
||||
// // 100% of an ancestral container.
|
||||
//
|
||||
// .u-inline-block {
|
||||
// display: inline-block !important;
|
||||
// max-width: 100%; /* 1 */
|
||||
// }
|
||||
|
||||
//
|
||||
// .u-inline {
|
||||
// display: inline !important;
|
||||
// }
|
||||
|
||||
//
|
||||
// .u-table {
|
||||
// display: table !important;
|
||||
// }
|
||||
|
||||
//
|
||||
// .u-tableCell {
|
||||
// display: table-cell !important;
|
||||
// }
|
||||
|
||||
//
|
||||
// .u-tableRow {
|
||||
// display: table-row !important;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Completely remove from the flow but leave available to screen readers.
|
||||
*/
|
||||
// Completely remove from the flow but leave available to screen readers.
|
||||
|
||||
.u-screen-reader-text {
|
||||
@include u-accessibly-hidden;
|
||||
}
|
||||
@@ -69,13 +70,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the `.screen-reader-text` class to allow the element
|
||||
* to be focusable when navigated to via the keyboard.
|
||||
*
|
||||
* @link https://www.drupal.org/node/897638
|
||||
* @todo Define styles when focused.
|
||||
*/
|
||||
// Extends the `.screen-reader-text` class to allow the element
|
||||
// to be focusable when navigated to via the keyboard.
|
||||
//
|
||||
// @link https://www.drupal.org/node/897638
|
||||
// @todo Define styles when focused.
|
||||
|
||||
.u-screen-reader-text.-focusable {
|
||||
@include u-accessibly-focusable;
|
||||
}
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
////
|
||||
|
||||
@media print {
|
||||
/**
|
||||
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
|
||||
*/
|
||||
|
||||
// 1. Black prints faster: http://www.sanbeiji.com/archives/953
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after,
|
||||
@@ -21,7 +21,7 @@
|
||||
*:first-line {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #000000 !important; /* [1] */
|
||||
color: #000000 !important; // [1]
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
@@ -38,10 +38,9 @@
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't show links that are fragment identifiers, or use the `javascript:`
|
||||
* pseudo protocol.
|
||||
*/
|
||||
// Don't show links that are fragment identifiers, or use the `javascript:`
|
||||
// pseudo protocol.
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
@@ -53,9 +52,8 @@
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
// Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,9 @@
|
||||
// Utilities / Ratio
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
|
||||
//
|
||||
|
||||
// A list of aspect ratios that get generated as modifier classes.
|
||||
|
||||
$aspect-ratios: (
|
||||
(2:1),
|
||||
(4:3),
|
||||
@@ -16,13 +13,11 @@ $aspect-ratios: (
|
||||
|
||||
/* stylelint-disable */
|
||||
|
||||
//
|
||||
// Generate a series of ratio classes to be used like so:
|
||||
//
|
||||
// @example
|
||||
// <div class="o-ratio u-16:9">
|
||||
//
|
||||
//
|
||||
|
||||
@each $ratio in $aspect-ratios {
|
||||
@each $antecedent, $consequent in $ratio {
|
||||
@if (type-of($antecedent) != number) {
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
// Utilities / States
|
||||
// ==========================================================================
|
||||
|
||||
/**
|
||||
* ARIA roles display visual cursor hints
|
||||
*/
|
||||
// ARIA roles display visual cursor hints
|
||||
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
@@ -17,9 +16,7 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Control visibility without affecting flow.
|
||||
*/
|
||||
// Control visibility without affecting flow.
|
||||
|
||||
.is-visible {
|
||||
visibility: visible !important;
|
||||
@@ -31,9 +28,7 @@
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Completely remove from the flow and screen readers.
|
||||
*/
|
||||
// Completely remove from the flow and screen readers.
|
||||
|
||||
.is-hidden {
|
||||
@include u-hidden;
|
||||
@@ -56,29 +51,27 @@
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
//
|
||||
// .is-hidden\@from-large {
|
||||
// @media (min-width: $from-large) {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Display a hidden-by-default element.
|
||||
// */
|
||||
|
||||
// // Display a hidden-by-default element.
|
||||
//
|
||||
// .is-shown {
|
||||
// @include u-shown;
|
||||
// }
|
||||
|
||||
//
|
||||
// table.is-shown {
|
||||
// display: table !important;
|
||||
// }
|
||||
|
||||
//
|
||||
// tr.is-shown {
|
||||
// display: table-row !important;
|
||||
// }
|
||||
|
||||
//
|
||||
// td.is-shown,
|
||||
// th.is-shown {
|
||||
// display: table-cell !important;
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
|
||||
////
|
||||
/// @link https://github.com/inuitcss/inuitcss/blob/6eb574f/utilities/_utilities.widths.scss
|
||||
////
|
||||
|
||||
///
|
||||
///
|
||||
/// Which fractions would you like in your grid system(s)?
|
||||
/// By default, the boilerplate provides fractions of one whole, halves, thirds,
|
||||
/// quarters, and fifths, e.g.:
|
||||
@@ -15,6 +15,8 @@
|
||||
/// .u-2/5
|
||||
/// .u-3/4
|
||||
/// .u-2/3
|
||||
////
|
||||
|
||||
$widths-fractions: 1 2 3 4 5 !default;
|
||||
|
||||
@include widths($widths-fractions);
|
||||
|
||||
@@ -394,11 +394,7 @@ 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] {
|
||||
/* [1] */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
@@ -427,7 +423,6 @@ img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
/* [1] */
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
@@ -438,25 +433,21 @@ audio:not([controls]) {
|
||||
img,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
/* [2] */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img[width], img[height],
|
||||
svg[width],
|
||||
svg[height] {
|
||||
/* [4] */
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
img {
|
||||
font-style: italic;
|
||||
/* [4] */
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
/* [5] */
|
||||
}
|
||||
|
||||
input,
|
||||
@@ -499,27 +490,20 @@ textarea {
|
||||
button,
|
||||
.c-button {
|
||||
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] */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@@ -635,14 +619,6 @@ a:focus, a:hover {
|
||||
max-width: 132.5rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
|
||||
* their correct aspect ratios.
|
||||
*
|
||||
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
|
||||
*
|
||||
* 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
|
||||
*/
|
||||
.o-ratio {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -652,7 +628,6 @@ a:focus, a:hover {
|
||||
.o-ratio:before {
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
/* [1] */
|
||||
width: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user