Update sass
This commit is contained in:
Andros Fenollosa
@ -1,7 +0,0 @@
|
||||
# Abstracts
|
||||
|
||||
The `abstracts/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
|
||||
|
||||
The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
|
||||
|
||||
Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Abstracts folder](http://sass-guidelin.es/#abstracts-folder)
|
||||
@ -7,24 +7,21 @@
|
||||
/// @param {String} $type - asset type folder (e.g. `fonts/`)
|
||||
/// @param {String} $path - asset path
|
||||
/// @return {Url}
|
||||
@function asset($base, $type, $path) {
|
||||
@return url($base + $type + $path);
|
||||
}
|
||||
@function asset($base, $type, $path)
|
||||
@return url($base + $type + $path)
|
||||
|
||||
/// Returns URL to an image based on its path
|
||||
/// @param {String} $path - image path
|
||||
/// @param {String} $base [$base-url] - base URL
|
||||
/// @return {Url}
|
||||
/// @require $base-url
|
||||
@function image($path, $base: $base-url) {
|
||||
@return asset($base, 'images/', $path);
|
||||
}
|
||||
@function image($path, $base: $base-url)
|
||||
@return asset($base, "images/", $path)
|
||||
|
||||
/// Returns URL to a font based on its path
|
||||
/// @param {String} $path - font path
|
||||
/// @param {String} $base [$base-url] - base URL
|
||||
/// @return {Url}
|
||||
/// @require $base-url
|
||||
@function font($path, $base: $base-url) {
|
||||
@return asset($base, 'fonts/', $path);
|
||||
}
|
||||
@function font($path, $base: $base-url)
|
||||
@return asset($base, "fonts/", $path)
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide Sass functions.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/// Native `url(..)` function wrapper
|
||||
/// @param {String} $base - base URL for the asset
|
||||
/// @param {String} $type - asset type folder (e.g. `fonts/`)
|
||||
/// @param {String} $path - asset path
|
||||
/// @return {Url}
|
||||
@function asset($base, $type, $path) {
|
||||
@return url($base + $type + $path);
|
||||
}
|
||||
|
||||
/// Returns URL to an image based on its path
|
||||
/// @param {String} $path - image path
|
||||
/// @param {String} $base [$base-url] - base URL
|
||||
/// @return {Url}
|
||||
/// @require $base-url
|
||||
@function image($path, $base: $base-url) {
|
||||
@return asset($base, 'images/', $path);
|
||||
}
|
||||
|
||||
/// Returns URL to a font based on its path
|
||||
/// @param {String} $path - font path
|
||||
/// @param {String} $base [$base-url] - base URL
|
||||
/// @return {Url}
|
||||
/// @require $base-url
|
||||
@function font($path, $base: $base-url) {
|
||||
@return asset($base, 'fonts/', $path);
|
||||
}
|
||||
@ -6,29 +6,22 @@
|
||||
/// @author Harry Roberts
|
||||
/// @param {Bool} $self [false] - Whether or not to include current selector
|
||||
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
|
||||
@mixin on-event($self: false) {
|
||||
@if $self {
|
||||
=on-event($self: false)
|
||||
@if $self
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
&:focus
|
||||
@content
|
||||
@else
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus
|
||||
@content
|
||||
|
||||
/// Make a context based selector a little more friendly
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $context
|
||||
@mixin when-inside($context) {
|
||||
#{$context} & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
=when-inside($context)
|
||||
#{$context} &
|
||||
@content
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide Sass mixins.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/// Event wrapper
|
||||
/// @author Harry Roberts
|
||||
/// @param {Bool} $self [false] - Whether or not to include current selector
|
||||
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
|
||||
@mixin on-event($self: false) {
|
||||
@if $self {
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Make a context based selector a little more friendly
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $context
|
||||
@mixin when-inside($context) {
|
||||
#{$context} & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,70 +2,45 @@
|
||||
// This file contains all application-wide Sass variables.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Regular font family
|
||||
/// @type List
|
||||
$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
||||
$text-font-stack: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
||||
|
||||
/// Code (monospace) font family
|
||||
/// @type List
|
||||
$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default;
|
||||
|
||||
|
||||
|
||||
|
||||
$code-font-stack: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Monaco", monospace !default
|
||||
|
||||
/// Copy text color
|
||||
/// @type Color
|
||||
$text-color: rgb(34, 34, 34) !default;
|
||||
$text-color: rgb(34, 34, 34) !default
|
||||
|
||||
/// Main brand color
|
||||
/// @type Color
|
||||
$brand-color: rgb(229, 0, 80) !default;
|
||||
$brand-color: rgb(229, 0, 80) !default
|
||||
|
||||
/// Light grey
|
||||
/// @type Color
|
||||
$light-grey: rgb(237, 237, 237) !default;
|
||||
$light-grey: rgb(237, 237, 237) !default
|
||||
|
||||
/// Medium grey
|
||||
/// @type Color
|
||||
$mid-grey: rgb(153, 153, 153) !default;
|
||||
$mid-grey: rgb(153, 153, 153) !default
|
||||
|
||||
/// Dark grey
|
||||
/// @type Color
|
||||
$dark-grey: rgb(68, 68, 68) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
$dark-grey: rgb(68, 68, 68) !default
|
||||
|
||||
/// Container's maximum width
|
||||
/// @type Length
|
||||
$max-width: 1180px !default;
|
||||
|
||||
|
||||
|
||||
|
||||
$max-width: 1180px !default
|
||||
|
||||
/// Breakpoints map
|
||||
/// @prop {String} keys - Keys are identifiers mapped to a given length
|
||||
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
|
||||
$breakpoints: (
|
||||
'small': 320px,
|
||||
'medium': 768px,
|
||||
'large': 1024px,
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$breakpoints: ("small": 320px, "medium": 768px, "large": 1024px) !default
|
||||
|
||||
/// Relative or absolute URL where all assets are served from
|
||||
/// @type String
|
||||
/// @example scss - When using a CDN
|
||||
/// $base-url: 'http://cdn.example.com/assets/';
|
||||
$base-url: '/assets/' !default;
|
||||
$base-url: "/assets/" !default
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide Sass variables.
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Regular font family
|
||||
/// @type List
|
||||
$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
/// Code (monospace) font family
|
||||
/// @type List
|
||||
$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Copy text color
|
||||
/// @type Color
|
||||
$text-color: rgb(34, 34, 34) !default;
|
||||
|
||||
/// Main brand color
|
||||
/// @type Color
|
||||
$brand-color: rgb(229, 0, 80) !default;
|
||||
|
||||
/// Light grey
|
||||
/// @type Color
|
||||
$light-grey: rgb(237, 237, 237) !default;
|
||||
|
||||
/// Medium grey
|
||||
/// @type Color
|
||||
$mid-grey: rgb(153, 153, 153) !default;
|
||||
|
||||
/// Dark grey
|
||||
/// @type Color
|
||||
$dark-grey: rgb(68, 68, 68) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Container's maximum width
|
||||
/// @type Length
|
||||
$max-width: 1180px !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Breakpoints map
|
||||
/// @prop {String} keys - Keys are identifiers mapped to a given length
|
||||
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
|
||||
$breakpoints: (
|
||||
'small': 320px,
|
||||
'medium': 768px,
|
||||
'large': 1024px,
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// Relative or absolute URL where all assets are served from
|
||||
/// @type String
|
||||
/// @example scss - When using a CDN
|
||||
/// $base-url: 'http://cdn.example.com/assets/';
|
||||
$base-url: '/assets/' !default;
|
||||
Reference in New Issue
Block a user