From 260845d254097aa90adf0acf8e0fec386cdc9c93 Mon Sep 17 00:00:00 2001 From: Black Mirror Date: Mon, 30 Apr 2018 16:21:43 +0200 Subject: [PATCH] filter mixins documentation --- docs/index.html | 43 +++++++++++++++++++++++------ scss/mixins/_filter.scss | 58 +++++++++++++++++++++++++++++++++++----- 2 files changed, 87 insertions(+), 14 deletions(-) diff --git a/docs/index.html b/docs/index.html index 43e5580..f0cc144 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,9 +1,9 @@ Flavor-scss - v0.7.11

Flavor SCSS - Advanced and strongly type checked mixins with a Grid System

Greetings to

Core

functions

is-null

Flavor SCSS - Advanced and strongly type checked mixins with a Grid System
Greetings to
Core
functions
is-null
@function is-null($n) { ... }
Description
Checks if a value is null
Parameters
NameDescriptionTypeDefault value
$n
the value to check
Any—
Returns
Boolean
Used by
Author
  • blackmirror1980
is-defined
@function is-defined($d) { ... }
Description
Checks if a value is defined
Parameters
NameDescriptionTypeDefault value
$d
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
Mixins - Animation
functions
is-animation-name
@function is-defined($d) { ... }
Description
Checks if a value is defined
Parameters
NameDescriptionTypeDefault value
$d
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
Mixins - Animation
functions
is-animation-name
@function is-animation-name($an) { ... }
Description
Checks if animation name is string or animation-name-mode (none, inherit, initial)
Parameters
NameDescriptionTypeDefault value
$an
the animation name
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-time
Output
.cursor-element {
   cursor: pointer;
-}
Requires
Links
Author
  • blackmirror1980
variables
[private] cursor-modes
$cursor-modes: array-concat((alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out), $css-default-modes);
Description
Cursor modes
Type
List
Used by
Author
  • blackmirror1980
[private] pointer-events-modes
$pointer-events-modes: array-concat((all, auto, bounding-box, fill, none, painted, stroke, unset, visible, visiblefill, visiblepainted, visiblestroke), $css-default-modes);
Description
Pointer events modes
Type
List
Used by
Author
  • blackmirror1980
Types - Angle
functions
is-angle
Requires
Links
Author
  • blackmirror1980
variables
[private] pointer-events-modes
$pointer-events-modes: array-concat((all, auto, bounding-box, fill, none, painted, stroke, unset, visible, visiblefill, visiblepainted, visiblestroke), $css-default-modes);
Description
Pointer events modes
Type
List
Used by
Author
  • blackmirror1980
[private] cursor-modes
$cursor-modes: array-concat((alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out), $css-default-modes);
Description
Cursor modes
Type
List
Used by
Author
  • blackmirror1980
Mixins - Filter
functions
get-filter-function-name
@function get-filter-function-name($ff) { ... }
Description
Extracts filter function name from a string
Parameters
NameDescriptionTypeDefault value
$ff
the filter string (e.g. blur(5px))
String—
Returns
String or Null —
(e.g. blur)
Requires
Used by
Author
  • blackmirror1980
is-filter-function
@function is-filter-function($ff) { ... }
Description
Checks if something is a filter function
Parameters
NameDescriptionTypeDefault value
$ff
the filter string (e.g. blur(5px))
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-filter-mode-or-function
@function is-filter-mode-or-function($filter) { ... }
Description
Checks if something is a filter mode or function
Parameters
NameDescriptionTypeDefault value
$filter
the filter string (e.g. blur(5px) or 'none)
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
mixins
filter
@mixin filter($filter) { ... }
Description
Filter mixin
Parameters
NameDescriptionTypeDefault value
$filter
the filter string (e.g. blur(5px) or 'none)
String—
Example
Usage
.filter-element {
+  @include filter(blur(5px));
+}
Output
.filter-element {
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -ms-filter: blur(5px);
+  -o-filter: blur(5px);
+  filter: blur(5px);
+}
Requires
TODO's
  • manage multiple filters
Author
  • blackmirror1980
variables
[private] filter-modes
$filter-modes: array-concat((none), $css-default-modes);
Description
Filter modes
Type
List
Used by
Author
  • blackmirror1980
[private] filter-functions-names
$filter-functions-names: (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url);
Description
Filter functions
Type
List
Used by
Author
  • blackmirror1980
Types - Angle
functions
is-angle
@function is-angle($a) { ... }
Description
Checks if a value is an angle value
Parameters
NameDescriptionTypeDefault value
$a
the value to check
Number (with unit)—
Returns
Boolean
Example
Usage
.element {
   $a: 30deg;
@@ -1224,7 +1251,7 @@
 
   @warn '`array: #{$a}` and `item: #{$i}` are not valid data for array-contains';
   @return false;
- }" data-collapsed="@function array-contains($a, $i) { ... }">@function array-contains($a, $i) { ... }
Description
Checks if an array/list contains specified item
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$i
the item
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
array-concat
@function array-contains($a, $i) { ... }
Description
Checks if an array/list contains specified item
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$i
the item
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
array-concat
@function string-length($s) { ... }
Description
Returns the number of characters in a string.

Note: aliases the native str-length method
Parameters
NameDescriptionTypeDefault value
$s
the string to count
String—
Returns
Number
Used by
Author
  • blackmirror1980
string-index
@function string-index($h, $n) { ... }
Description
Returns the position index of the first occurrence of string needle in string haystack

Note: aliases the native str-index method
Parameters
NameDescriptionTypeDefault value
$h
the haystack
String—
$n
the needle
String—
Returns
Number
Used by
Author
  • blackmirror1980
string-insert
@function string-index($h, $n) { ... }
Description
Returns the position index of the first occurrence of string needle in string haystack

Note: aliases the native str-index method
Parameters
NameDescriptionTypeDefault value
$h
the haystack
String—
$n
the needle
String—
Returns
Number
Used by
Author
  • blackmirror1980
string-insert
@function string-insert($s, $i, $p) { ... }
Description
Inserts string $i in string $s at $p position

Note: aliases the native str-insert method
Parameters
NameDescriptionTypeDefault value
$s
the string to modify
String—
$i
the string to insert into
String—
$p
the position index to use for insertion
Number—
Returns
String
Author
  • blackmirror1980
string-slice
@function string-slice($s, $from: 1, $to: -1) { ... }
Description
Extracts a sub string from a string between from & to position indexes,
if to position index is not specified (null), will be between from & the end of the string

Note: aliases the native str-slice method
Parameters
NameDescriptionTypeDefault value
$s
the string
String—
$from
the needle
String1
$to
the needle
String-1
Returns
Number
Used by
Author
  • blackmirror1980
string-starts-with
@function string-slice($s, $from: 1, $to: -1) { ... }
Description
Extracts a sub string from a string between from & to position indexes,
if to position index is not specified (null), will be between from & the end of the string

Note: aliases the native str-slice method
Parameters
NameDescriptionTypeDefault value
$s
the string
String—
$from
the needle
String1
$to
the needle
String-1
Returns
Number
Used by
Author
  • blackmirror1980
string-starts-with
@function string-contains($h, $n) { ... }
Description
Checks if a string contains another string.
Parameters
NameDescriptionTypeDefault value
$h
the haystack
String—
$n
the needle
String—
Returns
Boolean
Requires
Author
  • blackmirror1980
string-ends-with
@function string-contains($h, $n) { ... }
Description
Checks if a string contains another string.
Parameters
NameDescriptionTypeDefault value
$h
the haystack
String—
$n
the needle
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
string-ends-with
Used by
variables
transitionable-properties
$transitionable-properties: (background, background-color, background-position, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left, border-left-color, border-left-width, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, clip, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust font-stretch font-weight, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-decoration-color, text-indent, text-shadow, top, transform, transform-origin, vertical-align, visibility width, word-spacing, z-index);
Description
transition property
transition-timing-functions-names
$transition-timing-functions-names: (steps, cubic-bezier);
Description
transition timing

\ No newline at end of file
+}

Used by

variables

transitionable-properties

$transitionable-properties: (background, background-color, background-position, background-size, border, border-bottom, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left, border-left-color, border-left-width, border-right, border-right-color, border-right-width, border-spacing, border-top, border-top-color, border-top-left-radius, border-top-right-radius, border-top-width, bottom, box-shadow, clip, color, column-count, column-gap, column-rule, column-rule-color, column-rule-width, column-width, columns, filter, flex, flex-basis, flex-grow, flex-shrink, font, font-size, font-size-adjust font-stretch font-weight, height, left, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, order, outline, outline-color, outline-offset, outline-width, padding, padding-bottom, padding-left, padding-right, padding-top, perspective, perspective-origin, right, text-decoration-color, text-indent, text-shadow, top, transform, transform-origin, vertical-align, visibility width, word-spacing, z-index);

Description

transition property

transition-timing-functions-names

$transition-timing-functions-names: (steps, cubic-bezier);

Description

transition timing

\ No newline at end of file diff --git a/scss/mixins/_filter.scss b/scss/mixins/_filter.scss index d3371d5..f9af6b2 100644 --- a/scss/mixins/_filter.scss +++ b/scss/mixins/_filter.scss @@ -1,28 +1,74 @@ @charset 'UTF-8'; +//// +/// Flavor SCSS Mixins Filter +/// @group mixins-filter +/// @author blackmirror1980 +//// + +/// Filter functions +/// +/// @type list +/// @access private $filter-functions-names: (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url); -@function get-filter-function-name($t) { - @if(string-contains($t, '(') and string-contains($t, ')')) { - @return str-slice($t, 1, str-index($t, '(') - 1); +/// Extracts filter function name from a string +/// +/// @access public +/// @requires {function} string-contains +/// @param {string} $ff - the filter string (e.g. `blur(5px)`) +/// @return {string | null} (e.g. `blur`) +@function get-filter-function-name($ff) { + @if(string-contains($ff, '(') and string-contains($ff, ')')) { + @return string-slice($ff, 1, string-index($ff, '(') - 1); } @return null; } -@function is-filter-function($tf) { - $filter-function-name: get-filter-function-name($tf); +/// Checks if something is a filter function +/// +/// @access public +/// @param {string} $ff - the filter string (e.g. `blur(5px)`) +/// @return {boolean} +@function is-filter-function($ff) { + $filter-function-name: get-filter-function-name($ff); @return is-defined($filter-function-name) and array-contains($filter-functions-names, $filter-function-name); } +/// Filter modes +/// +/// @type list +/// @access private $filter-modes: array-concat((none), $css-default-modes); +/// Checks if something is a filter mode or function +/// +/// @access public +/// @param {string} $filter - the filter string (e.g. `blur(5px)` or `'none`) +/// @return {boolean} @function is-filter-mode-or-function($filter) { @return is-defined($filter) and (array-contains($filter-modes, $filter) or is-filter-function($filter)); } -// TODO: manage multiple filters +/// Filter mixin +/// +/// @param {string} $filter - the filter string (e.g. `blur(5px)` or `none`) +/// @todo manage multiple filters +/// @example scss - Usage +/// .filter-element { +/// @include filter(blur(5px)); +/// } +/// +/// @example css - Output +/// .filter-element { +/// -webkit-filter: blur(5px); +/// -moz-filter: blur(5px); +/// -ms-filter: blur(5px); +/// -o-filter: blur(5px); +/// filter: blur(5px); +/// } @mixin filter($filter) { @if is-filter-mode-or-function($filter) { @include prefixer(filter, $filter);