ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into feature/icons

Browse Source
This commit is contained in:
Lucas
2022-06-01 16:19:46 +02:00
committed by GitHub
parent 648109fc9b 17e8004515
commit 9154deb036
37 changed files with 824 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
assets/scripts/utils/visibility.js
View File

@@ -1,129 +1,118 @@
import { isFunction } from './is';
import { arrayContains, findByKeyValue, removeFromArray } from './array';
import { $document, $window, $html, $body } from './environment';
const CALLBACKS = {
hidden: [],
visible: []
};
const ACTIONS = [
'addCallback',
'removeCallback'
];
const STATES = [
'visible',
'hidden'
];
const PREFIX = 'v-';
let UUID = 0;
// Main event
$document.on('visibilitychange', function(event) {
if (document.hidden) {
onDocumentChange('hidden');
} else {
onDocumentChange('visible');
}
});
/**
* Add a callback
* @param {string} state
* @param {function} callback
* @return {string} ident
* The `PageVisibility` interface provides support for dispatching
* a custom event derived from the value of {@see document.visibilityState}
* when the "visibilitychange" event is fired.
*
* The custom events are:
*
* - "visibilityhidden" representing the "hidden" visibility state.
* - "visibilityvisible" representing the "visibile" visibility state.
*
* Example:
*
* ```js
* import pageVisibility from './utils/visibility.js';
*
* pageVisibility.enableCustomEvents();
*
* document.addEventListener('visibilityhidden', () => videoElement.pause());
* ```
*
* The dispatched event object is the same from "visibilitychange"
* and renamed according to the visibility state.
*
* The `PageVisibility` interface does not manage the attachment/detachment
* of event listeners on the custom event types.
*
* Further reading:
*
* - {@link https://www.w3.org/TR/page-visibility/ W3 Specification}
* - {@link https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API MDN Web Docs}
*/
function addCallback (state, options) {
let callback = options.callback || '';
export default new class PageVisibility {
/**
* Checks if the "visibilitychange" event listener has been registered.
*
* @return {boolean} Returns `false` if the event listener is not registered,
* otherwise returns `true`.
*/
get isEnabled() {
return isVisibilityChangeObserved;
}
/**
* Removes the "visibilitychange" event listener.
*
* @return {boolean} Returns `false` if the event listener was already unregistered,
* otherwise returns `true`.
*/
disableCustomEvents() {
if (isVisibilityChangeObserved) {
isVisibilityChangeObserved = false;
document.removeEventListener('visibilitychange', handleCustomVisibilityChange);
return true;
}
if (!isFunction(callback)) {
console.warn('Callback is not a function');
return false;
}
let ident = PREFIX + UUID++;
/**
* Registers the "visibilitychange" event listener.
*
* @return {boolean} Returns `false` if the event listener was already registered,
* otherwise returns `true`.
*/
enableCustomEvents() {
if (!isVisibilityChangeObserved) {
isVisibilityChangeObserved = true;
document.addEventListener('visibilitychange', handleCustomVisibilityChange);
return true;
}
CALLBACKS[state].push({
ident: ident,
callback: callback
});
return ident;
}
/**
* Remove a callback
* @param {string} state Visible or hidden
* @param {string} ident Unique identifier
* @return {boolean} If operation was a success
*/
function removeCallback (state, options) {
let ident = options.ident || '';
if (typeof(ident) === 'undefined' || ident === '') {
console.warn('Need ident to remove callback');
return false;
}
let index = findByKeyValue(CALLBACKS[state], 'ident', ident)[0];
// console.log(ident)
// console.log(CALLBACKS[state])
if (typeof(index) !== 'undefined') {
removeFromArray(CALLBACKS[state], index);
return true;
} else {
console.warn('Callback could not be found');
return false;
}
}
/**
* When document state changes, trigger callbacks
* @param {string} state Visible or hidden
* Tracks whether custom visibility event types
* are available (`true`) or not (`false`).
*
* @type {boolean}
*/
function onDocumentChange (state) {
let callbackArray = CALLBACKS[state];
let i = 0;
let len = callbackArray.length;
let isVisibilityChangeObserved = false;
for (; i < len; i++) {
callbackArray[i].callback();
}
/**
* Dispatches a custom visibility event at the document derived
* from the value of {@see document.visibilityState}.
*
* @listens document#visibilitychange
*
* @fires PageVisibility#visibilityhidden
* @fires PageVisibility#visibilityvisible
*
* @param {Event} event
* @return {void}
*/
function handleCustomVisibilityChange(event) {
document.dispatchEvent(new CustomEvent(`visibility${document.visibilityState}`, {
detail: {
cause: event
}
}));
}
/**
* Public facing API for adding and removing callbacks
* @param {object} options Options
* @return {boolean|integer} Unique identifier for the callback or boolean indicating success or failure
* The "visibilityhidden" eveent is fired at the document when the contents
* of its tab have become hidden.
*
* @event PageVisibility#visibilityhidden
* @type {Event}
*/
function visibilityApi (options) {
let action = options.action || '';
let state = options.state || '';
let ret;
// Type and value checking
if (!arrayContains(ACTIONS, action)) {
console.warn('Action does not exist');
return false;
}
if (!arrayContains(STATES, state)) {
console.warn('State does not exist');
return false;
}
// @todo Magic call function pls
if (action === 'addCallback') {
ret = addCallback(state, options);
} else if (action === 'removeCallback') {
ret = removeCallback(state, options);
}
return ret;
}
export { visibilityApi };
/**
* The "visibilityvisible" eveent is fired at the document when the contents
* of its tab have become visible.
*
* @event PageVisibility#visibilityvisible
* @type {Event}
*/

4
assets/styles/components/_button.scss
View File

@@ -1,3 +1,7 @@
// ==========================================================================
// Components / Buttons
// ==========================================================================
.c-button {
padding: rem(15px) rem(20px);
background-color: lightgray;

13
assets/styles/components/_form.scss
View File

@@ -1,6 +1,7 @@
// ==========================================================================
// Form
// Components / Form
// ==========================================================================
.c-form {
}
@@ -12,6 +13,7 @@
// Label
// ==========================================================================
.c-form_label {
display: block;
margin-bottom: rem(10px);
@@ -19,12 +21,13 @@
// Input
// ==========================================================================
$input-icon-color: 424242; // No #
.c-form_input {
padding: rem(10px);
border: 1px solid lightgray;
background-color: white;
background-color: $color-lightest;
&:hover {
border-color: darkgray;
@@ -41,6 +44,7 @@ $input-icon-color: 424242; // No #
// Checkbox
// ==========================================================================
$checkbox: rem(18px);
$checkbox-icon-color: $input-icon-color;
@@ -67,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
}
&::before {
background-color: $white;
background-color: $color-lightest;
border: 1px solid lightgray;
}
@@ -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;

4
assets/styles/components/_heading.scss
View File

@@ -1,3 +1,7 @@
// ==========================================================================
// Components / Headings
// ==========================================================================
.c-heading {
line-height: $line-height-h;
margin-bottom: rem(30px);

6
assets/styles/components/_scrollbar.scss
View File

@@ -1,3 +1,7 @@
// ==========================================================================
// Components / Scrollbar
// ==========================================================================
.c-scrollbar {
position: absolute;
right: 0;
@@ -21,7 +25,7 @@
position: absolute;
top: 0;
right: 0;
background-color: black;
background-color: $color-darkest;
opacity: 0.5;
width: 7px;
border-radius: 10px;

4
assets/styles/critical.scss
View File

@@ -1 +1,5 @@
// ==========================================================================
// Critical CSS
// ==========================================================================
$assets-path: "assets/";

27
assets/styles/elements/_page.scss → assets/styles/elements/_document.scss
View File

@@ -1,19 +1,22 @@
// ==========================================================================
// Base / Page
// Elements / Document
// ==========================================================================
//
// Simple page-level setup.
//
// 1. Set the default `font-size` and `line-height` for the entire project,
// sourced from our default variables.
// 1. Include web fonts
// 2. Ensure the page always fills at least the entire height of the viewport.
//
// 3. Set the default `font-size` and `line-height` for the entire project,
// sourced from our default variables.
@include font-faces($font-faces, $font-dir); // [1]
html {
min-height: 100%; /* [2] */
color: $color;
font-family: $font-family;
line-height: $line-height; /* [1] */
min-height: 100%; // [2]
line-height: $line-height;
font-family: ff("sans");
color: $font-color;
line-height: $line-height; // [3]
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -30,7 +33,7 @@ html {
}
@media (min-width: $from-large) and (max-width: $to-huge) {
font-size: $font-size; /* [1] */
font-size: $font-size; // [1]
}
@media (min-width: $from-huge) and (max-width: $to-gigantic) {
@@ -71,9 +74,9 @@ body {
}
a {
color: $link-color;
color: $color-link;
@include u-hocus {
color: $link-hover-color;
color: $color-link-hover;
}
}

36
assets/styles/elements/_fonts.scss
View File

@@ -1,36 +0,0 @@
// ==========================================================================
// Base / Fonts
// ==========================================================================
// @include font-face(
// $font-foobar,
// "fonts/Foobar/Regular"
// ) {
// font-style: normal;
// font-weight: 400;
// }
// @include font-face(
// $font-foobar,
// "fonts/Foobar/Medium"
// ) {
// font-style: normal;
// font-weight: 500;
// }
// @include font-face(
// $font-foobar,
// "fonts/Foobar/Semibold"
// ) {
// font-style: normal;
// font-weight: 600;
// }
// @include font-face(
// $font-bazqux,
// "fonts/Bazqux/Regular",
// ("eot", "woff2", "woff", "ttf")
// ) {
// font-style: normal;
// font-weight: 400;
// }

17
assets/styles/generic/_button.scss
View File

@@ -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;
}

10
assets/styles/generic/_form.scss
View File

@@ -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 {

14
assets/styles/generic/_generic.scss
View File

@@ -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;
}
@@ -34,7 +33,7 @@ i {
b,
strong {
font-weight: $bold;
font-weight: $font-weight-bold;
}
a {
@@ -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;
}

34
assets/styles/generic/_media.scss
View File

@@ -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]
}

15
assets/styles/main.scss
View File

@@ -4,6 +4,7 @@
// Settings
// ==========================================================================
@import "settings/config.eases";
@import "settings/config.colors";
@import "settings/config";
@@ -11,6 +12,8 @@
// ==========================================================================
// Tools
// ==========================================================================
@import "tools/maths";
@import "tools/functions";
@import "tools/mixins";
@import "tools/fonts";
@@ -20,6 +23,7 @@
// Generic
// ==========================================================================
@import "node_modules/normalize.css/normalize";
@import "generic/generic";
@import "generic/media";
@@ -28,11 +32,12 @@
// Elements
// ==========================================================================
@import "elements/fonts";
@import "elements/page";
@import "elements/document";
// Objects
// ==========================================================================
@import "objects/scroll";
@import "objects/container";
@import "objects/ratio";
@@ -47,17 +52,15 @@
// Components
// ==========================================================================
@import "components/scrollbar";
@import "components/heading";
@import "components/button";
@import "components/form";
// Templates
// ==========================================================================
// @import "templates/template";
// Utilities
// ==========================================================================
@import "utilities/ratio";
@import "utilities/widths";
// @import "utilities/align";

2
assets/styles/objects/_container.scss
View File

@@ -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;

51
assets/styles/objects/_crop.scss
View File

@@ -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} {

70
assets/styles/objects/_layout.scss
View File

@@ -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;

17
assets/styles/objects/_ratio.scss
View File

@@ -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: "";
}

4
assets/styles/objects/_scroll.scss
View File

@@ -1,3 +1,7 @@
// ==========================================================================
// Objects / Scroll
// ==========================================================================
.o-scroll {
min-height: 100vh;
}

10
assets/styles/objects/_table.scss
View File

@@ -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;
}

26
assets/styles/settings/_config.colors.scss
View File

@@ -4,22 +4,26 @@
// Palette
// =============================================================================
$white: #FFFFFF;
$black: #000000;
$color-lightest: #FFFFFF;
$color-darkest: #000000;
// Specific
// =============================================================================
// Link
$link-color: #1A0DAB;
$link-focus-color: #1A0DAB;
$link-hover-color: darken(#1A0DAB, 10%);
$color-link: #1A0DAB;
$color-link-focus: #1A0DAB;
$color-link-hover: darken(#1A0DAB, 10%);
// Selection
$selection-text-color: #3297FD;
$selection-background-color: #FFFFFF;
$selection-text-color: #3297FD;
$selection-background-color: #FFFFFF;
// Social Colors
// =============================================================================
$facebook-color: #3B5998;
$instagram-color: #E1306C;
$youtube-color: #CD201F;
$twitter-color: #1DA1F2;
$color-facebook: #3B5998;
$color-instagram: #E1306C;
$color-youtube: #CD201F;
$color-twitter: #1DA1F2;

67
assets/styles/settings/_config.eases.scss
View File

@@ -1,19 +1,48 @@
$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);
$Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530) ;
$Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$SlowEaseOut: cubic-bezier(.04,1.15,0.4,.99);
$bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
// ==========================================================================
// Settings / Config / Eases
// ==========================================================================
// Power 1
$ease-power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-power1-out: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-power1-in-out: cubic-bezier(0.455, 0.030, 0.515, 0.955);
// Power 2
$ease-power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-power2-out: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);
// Power 3
$ease-power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-power3-out: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-power3-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000);
// Power 3
$ease-power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-power4-out: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-power4-in-out: cubic-bezier(0.860, 0.000, 0.070, 1.000);
// Expo
$ease-expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-expo-out: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-expo-in-out: cubic-bezier(1.000, 0.000, 0.000, 1.000);
// Back
$ease-back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$ease-back-out: cubic-bezier(0.175, 00.885, 0.320, 1.275);
$ease-back-in-out: cubic-bezier(0.680, -0.550, 0.265, 1.550);
// Sine
$ease-sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-sine-out: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-sine-in-out: cubic-bezier(0.445, 0.050, 0.550, 0.950);
// Circ
$ease-circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-circ-out: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860);
// Misc
$ease-bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
$ease-slow-out: cubic-bezier(.04,1.15,0.4,.99);
$ease-smooth: cubic-bezier(0.380, 0.005, 0.215, 1);

68
assets/styles/settings/_config.scss
View File

@@ -4,6 +4,7 @@
// Context
// =============================================================================
// The current stylesheet context. Available values: frontend, editor.
$context: frontend !default;
@@ -12,15 +13,28 @@ $assets-path: "../" !default;
// Typefaces
// =============================================================================
$font-sans-serif: sans-serif;
$font-dir: "../fonts/";
$font-families: (
"sans": ("Webfont Sans", "Helvetica Neue", Arial, sans-serif),
// "serif": ("Webfont Serif", Georgia, serif)
);
$font-faces: (
// "Webfont Sans" "webfont-sans_regular" 400 normal,
// "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
// "Webfont Serif" "webfont-sans_bold" 700 normal,
);
// Typography
// =============================================================================
// Base
$font-size: 16px;
$line-height: 24px / $font-size;
$font-family: $font-sans-serif;
$color: #222222;
$font-size: 16px;
$line-height: 24px / $font-size;
$font-color: $color-darkest;
// Headings
$font-size-h1: 36px !default;
$font-size-h2: 28px !default;
@@ -29,29 +43,34 @@ $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;
$medium: 500;
$bold: 700;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
// Transitions
// =============================================================================
$speed: 0.3s;
$easing: $Power2EaseOut;
$speed: 0.3s;
$easing: $ease-power2-out;
// Spacing Units
// =============================================================================
$unit: 60px;
$unit-small: 30px;
$unit: 60px;
$unit-small: 30px;
// Container
// ==========================================================================
$container-width: 2000px;
$padding: $unit;
// =============================================================================
$container-width: 2000px;
$padding: $unit;
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
@@ -70,3 +89,20 @@ $from-gigantic: 2000px !default;
$to-gigantic: $from-gigantic - 1 !default;
$from-colossal: 2400px !default;
$to-colossal: $from-colossal - 1 !default;
// Master z-indexe
// =============================================================================
$z-indexes: (
"goku": 9000,
"transition": 500,
"toast": 400,
"popover": 300,
"modal": 250,
"sheet": 200,
"fixed": 150,
"sticky": 100,
"dropdown": 50,
"default": 1,
"limbo": -999
);

263
assets/styles/tools/_family.scss
View File

@@ -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);
}

137
assets/styles/tools/_fonts.scss
View File

@@ -2,97 +2,54 @@
// Tools / Font Faces
// ==========================================================================
$global-font-file-formats: "woff2", "woff" !default;
// Imports the custom font.
//
// The mixin expects font files to be woff and woff2.
//
// @param {List} $webfont - A custom font to import, as a tuple:
// `<font-name> <font-file-basename> <font-weight> <font-style>`.
// @param {String} $dir - The webfont directory path.
// @output The `@font-face` at-rule specifying the custom font.
//
// Builds the `src` list for an `@font-face` declaration.
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
// @link http://goo.gl/Ru1bKP
//
// @param {String} $font-family - The font family name.
// @param {String} $file-path - The path to the font family.
// @param {List} $file-formats - The file formats to request.
// @return {List}
//
// @require {function} list-contains
//
// @access private
//
@function font-source-declaration(
$font-family,
$file-path,
$file-formats
) {
$src: ();
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
woff: "#{$file-path}.woff" format("woff"),
ttf: "#{$file-path}.ttf" format("truetype"),
svg: "#{$file-path}.svg##{$font-family}" format("svg"),
);
@each $key, $values in $formats-map {
@if list-contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
$src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
}
}
@return $src;
}
//
// Generates an `@font-face` declaration.
//
// You can choose the specific file formats you need to output; the mixin supports
// `eot`, `ttf`, `svg`, `woff2` and `woff`.
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
//
// @param {String} $font-family - The font family name.
// @param {String} $file-path - The path to the font family.
// @param {String|List} $file-formats [("ttf", "woff2", "woff")]
// A list of file formats to support,
// for example ("eot", "ttf", "svg", "woff2", "woff").
//
// @content
// Any additional CSS properties that are included in the `@include`
// directive will be output within the `@font-face` declaration, e.g.
// you can pass in `font-weight`, `font-style` and/or `unicode-range`.
//
// @example scss
// @include font-face(
// "source-sans-pro",
// "fonts/source-sans-pro-regular",
// ("woff2", "woff")
// ) {
// font-style: normal;
// font-weight: 400;
// }
//
// // CSS Output
// @font-face {
// font-family: "source-sans-pro";
// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
// url("fonts/source-sans-pro-regular.woff") format("woff");
// font-style: normal;
// font-weight: 400;
// }
//
// @require {function} _font-source-declaration
// @require {function} _retrieve-bourbon-setting
//
@mixin font-face(
$font-family,
$file-path,
$file-formats: $global-font-file-formats
) {
@mixin font-face($webfont, $dir) {
@font-face {
font-family: $font-family;
src: font-source-declaration( $font-family, $file-path, $file-formats);
@content;
font-display: swap;
font-family: nth($webfont, 1);
src: url("#{$dir}#{nth($webfont, 2)}.woff2") format("woff2"),
url("#{$dir}#{nth($webfont, 2)}.woff") format("woff");
font-weight: #{nth($webfont, 3)};
font-style: #{nth($webfont, 4)};
}
}
// Imports the list of custom fonts.
//
// @require {mixin} font-face
//
// @param {List<List>} $webfonts - List of custom fonts to import.
// See `font-face` mixin for details.
// @param {String} $dir - The webfont directory path.
// @output The `@font-face` at-rules specifying the custom fonts.
@mixin font-faces($webfonts, $dir) {
@each $webfont in $webfonts {
@include font-face($webfont, $dir);
}
}
// Retrieves the font family stack for the given font ID.
//
// @require {variable} $font-families - See settings directory.
//
// @param {String} $font-family - The custom font ID.
// @throws Error if the $font-family does not exist.
// @return {List} The font stack.
@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}`.";
}
$value: map-get($font-families, $font-family);
@return $value;
}

89
assets/styles/tools/_functions.scss
View File

@@ -1,73 +1,89 @@
// ==========================================================================
// Tools / Functions
// ==========================================================================
// Check if the given value is a number in pixel
//
// @param {Number} $number - The value to check
// @return {Boolean}
@function is-pixel-number($number) {
@return type-of($number) == number and unit($number) == "px";
}
// 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") {
@error "`#{$size}` needs to be a pixel value.";
}
} @else {
@error "`#{$size}` needs to be a number.";
@if not is-pixel-number($size) {
@error "`#{$size}` needs to be a number in pixel.";
}
@if (type-of($base) == number) {
@if (unit($base) != "px") {
@error "`#{$base}` needs to be a pixel value.";
}
} @else {
@error "`#{$base}` needs to be a number.";
@if not is-pixel-number($base) {
@error "`#{$base}` needs to be a number in pixel.";
}
@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") {
@error "`#{$size}` needs to be a pixel value.";
}
} @else {
@error "`#{$size}` needs to be a number.";
@if not is-pixel-number($size) {
@error "`#{$size}` needs to be a number in pixel.";
}
@if (type-of($base) == number) {
@if (unit($base) != "px") {
@error "`#{$base}` needs to be a pixel value.";
}
} @else {
@error "`#{$base}` needs to be a number.";
@if not is-pixel-number($base) {
@error "`#{$base}` needs to be a number in pixel.";
}
@return ($size / $base) * 1rem;
}
// Retrieves the z-index from the {@see $layers master list}.
//
// @link on http://css-tricks.com/handling-z-index/
//
// @param {string} $layer The name of the z-index.
// @param {number} $modifier A positive or negative modifier to apply
// to the returned z-index value.
// @throw Error if the $layer does not exist.
// @throw Warning if the $modifier might overlap another master z-index.
// @return {number} The computed z-index of $layer and $modifier.
@function z($layer, $modifier: 0) {
@if not map-has-key($layers, $layer) {
@error "Unknown master z-index layer: #{$layer}";
}
@if ($modifier >= 50 or $modifier <= -50) {
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
}
$index: map-get($z-indexes, $layer);
@return $index + $modifier;
}
// 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 +91,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 +105,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) {
} @else if ($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);
}

7
assets/styles/tools/_layout.scss
View File

@@ -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]

136
assets/styles/tools/_maths.scss Normal file
View File

@@ -0,0 +1,136 @@
// ==========================================================================
// Tools / Maths
// ==========================================================================
// Removes the unit from the given number.
//
// @param {number} $number The number to strip.
// @return {number}
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// Returns the square root of the given number.
//
// @param {number} $number The number to calculate.
// @return {number}
@function sqrt($number) {
$x: 1;
$value: $x;
@for $i from 1 through 10 {
$value: $x - ($x * $x - abs($number)) / (2 * $x);
$x: $value;
}
@return $value;
}
// Returns a number raised to the power of an exponent.
//
// @param {number} $number The base number.
// @param {number} $exp The exponent.
// @return {number}
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
} @else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
// Returns the factorial of the given number.
//
// @param {number} $number The number to calculate.
// @return {number}
@function fact($number) {
$value: 1;
@if $number > 0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
}
// Returns an approximation of pi, with 11 decimals.
//
// @return {number}
@function pi() {
@return 3.14159265359;
}
// Converts the number in degrees to the radian equivalent .
//
// @param {number} $angle The angular value to calculate.
// @return {number} If $angle has the `deg` unit,
// the radian equivalent is returned.
// Otherwise, the unitless value of $angle is returned.
@function rad($angle) {
$unit: unit($angle);
$angle: strip-units($angle);
// If the angle has `deg` as unit, convert to radians.
@if ($unit == deg) {
@return $angle / 180 * pi();
}
@return $angle;
}
// Returns the sine of the given number.
//
// @param {number} $angle The angle to calculate.
// @return {number}
@function sin($angle) {
$sin: 0;
$angle: rad($angle);
@for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
@return $sin;
}
// Returns the cosine of the given number.
//
// @param {string} $angle The angle to calculate.
// @return {number}
@function cos($angle) {
$cos: 0;
$angle: rad($angle);
@for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
}
@return $cos;
}
// Returns the tangent of the given number.
//
// @param {string} $angle The angle to calculate.
// @return {number}
@function tan($angle) {
@return sin($angle) / cos($angle);
}

38
assets/styles/tools/_mixins.scss
View File

@@ -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;
@@ -62,12 +58,11 @@
line-height: $line-height $important;
}
@elseif ($line-height != "none" and $line-height != false) {
@error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
@error "D’oh! `#{$line-height}` is not a valid value for `$line-height`.";
}
}
}
//
// 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;

6
assets/styles/tools/_widths.scss
View File

@@ -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);

3
assets/styles/utilities/_align.scss
View File

@@ -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;
}

38
assets/styles/utilities/_helpers.scss
View File

@@ -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;
}

20
assets/styles/utilities/_print.scss
View File

@@ -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;
}

7
assets/styles/utilities/_ratio.scss
View File

@@ -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) {

27
assets/styles/utilities/_states.scss
View File

@@ -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;

6
assets/styles/utilities/_widths.scss
View File

@@ -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);

39
www/assets/styles/main.css
View File

@@ -394,11 +394,9 @@ 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 +425,6 @@ img,
svg,
video {
vertical-align: middle;
/* [1] */
}
audio:not([controls]) {
@@ -438,25 +435,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 +492,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;
@@ -534,11 +520,10 @@ button:focus, button:hover,
html {
min-height: 100%;
/* [2] */
color: #222222;
font-family: sans-serif;
line-height: 1.5;
/* [1] */
font-family: "Webfont Sans", "Helvetica Neue", Arial, sans-serif;
color: #000000;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -564,7 +549,6 @@ html {
@media (min-width: 1200px) and (max-width: 1599px) {
html {
font-size: 16px;
/* [1] */
}
}
@@ -637,14 +621,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;
@@ -654,7 +630,6 @@ a:focus, a:hover {
.o-ratio:before {
display: block;
padding-bottom: 100%;
/* [1] */
width: 100%;
content: "";
}
@@ -793,7 +768,7 @@ a:focus, a:hover {
position: absolute;
top: 0;
right: 0;
background-color: black;
background-color: #000000;
opacity: 0.5;
width: 7px;
border-radius: 10px;
@@ -858,7 +833,7 @@ a:focus, a:hover {
.c-form_input, .c-form_select_input, .c-form_textarea {
padding: 0.625rem;
border: 1px solid lightgray;
background-color: white;
background-color: #FFFFFF;
}
.c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {

2
www/assets/styles/main.css.map
View File

File diff suppressed because one or more lines are too long