From a71dbc5dcee6b2a01b83da56cb68046feee3c976 Mon Sep 17 00:00:00 2001 From: Black Mirror Date: Mon, 7 May 2018 17:37:01 +0200 Subject: [PATCH] finally removed bourbon dependency added position, margin, padding mixins --- .sassdocrc | 2 +- README.md | 2 +- package.json | 15 ++- scss/flavor.scss | 1 - scss/mixins/_box.scss | 190 ++++++++++++++++++++++++++-- scss/mixins/_margin.scss | 12 +- scss/mixins/_padding.scss | 12 +- scss/mixins/_position.scss | 250 +++++++++++++++++++++++++++++++++++++ scss/mixins/mixins.scss | 5 +- scss/options.scss | 3 - scss/types/_common.scss | 4 +- 11 files changed, 451 insertions(+), 45 deletions(-) create mode 100644 scss/mixins/_position.scss diff --git a/.sassdocrc b/.sassdocrc index 9123939..5e12121 100644 --- a/.sassdocrc +++ b/.sassdocrc @@ -1,7 +1,7 @@ dest: docs theme: flippant description: | - ## Flavor SCSS - Advanced and strongly type checked mixins with a Grid System + ## Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers with a fully customizable Grid System --- #### Greetings to * [Hugo Giraudel](https://hugogiraudel.com) diff --git a/README.md b/README.md index b3d5f49..248a98f 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Check out the [Latest Documentation](https://blackmirror1980.github.io/flavor-sc Check out the [Changelog](https://github.com/blackmirror1980/flavor-scss/blob/master/CHANGELOG.md) ## Description -Flavor SCSS, bourbon.io based mixins & helpers +Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers with a fully customizable Grid System ## Example Check out this [Codepen]() example diff --git a/package.json b/package.json index 1cf8eda..9f13ad6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "flavor-scss", "version": "0.8.1", - "description": "Flavor SCSS, bourbon.io based mixins & helpers", + "description": "Flavor SCSS - Advanced type checking Sass/SCSS Framework with Mixins & Helpers with a fully customizable Grid System", "main": "scss/flavor.scss", "scripts": { "git-prepare": "changelog && echo 'CHANGELOG.md file built' && npm run readme && npm run docs", @@ -15,11 +15,13 @@ }, "keywords": [ "flavor", + "sass", "scss", - "bourbon", "mixins", "functions", - "helpers" + "helpers", + "framework", + "grid system" ], "author": "Black Mirror", "license": "MIT", @@ -31,10 +33,7 @@ "devDependencies": { "sass-lint": "^1.12.1", "sassdoc": "^2.5.0", - "sassdoc-theme-flippant": "^0.1.0" - }, - "dependencies": { - "bourbon": "4.3.4", + "sassdoc-theme-flippant": "^0.1.0", "pkg-2-readme": "0.0.6" } -} \ No newline at end of file +} diff --git a/scss/flavor.scss b/scss/flavor.scss index 790ad06..c14ddbc 100644 --- a/scss/flavor.scss +++ b/scss/flavor.scss @@ -1,7 +1,6 @@ @charset 'UTF-8'; @import 'options'; -@import '~bourbon/app/assets/stylesheets/bourbon'; @import 'core'; @import 'grid-system/grid-system'; diff --git a/scss/mixins/_box.scss b/scss/mixins/_box.scss index e8f7f63..ee199f5 100644 --- a/scss/mixins/_box.scss +++ b/scss/mixins/_box.scss @@ -5,7 +5,6 @@ /// @group mixins-box /// @author blackmirror1980 //// - /// Reset inline-block mixin (useful to fix those annoying auto margins between inline-block children elements /// /// @access public @@ -457,25 +456,190 @@ $box-bound-size-modes: array-concat((none), $css-default-modes); } } +/// Box shadow modes +/// +/// @type list +/// @access private +$box-shadow-modes: array-concat((none), $css-default-modes); + +/// Checks if something is box shadow mode +/// +/// @access public +/// @param {string} $bsm - the box shadow mode +/// @return {boolean} +@function is-box-shadow-mode($bsm) { + @return is-defined($bsm) and array-contains($box-shadow-modes, $bsm); +} + +/// Checks if something is box shadow +/// +/// @access public +/// @param {any} $box-shadow - the box shadow +/// @return {boolean} +@function is-box-shadow($box-shadow) { + @if is-defined($box-shadow) { + @if is-box-shadow-mode($box-shadow) { + @return true; + } + @else { + $defaults: (h-offset: 0, v-offset: 0, blur: 0, spread: 0, color: transparent, inset: null); + + @if is-object($box-shadow) { + $box-shadow: extend($defaults, $box-shadow); + } + @else { + $box-shadow-h-offset: nth-value($box-shadow, 1); + $box-shadow-v-offset: nth-value($box-shadow, 2); + $box-shadow-blur: nth-value($box-shadow, 3); + $box-shadow-spread: nth-value($box-shadow, 4); + $box-shadow-color: nth-value($box-shadow, 5); + $box-shadow-inset: nth-value($box-shadow, 6); + + $box-shadow: extend($defaults, ()); + + @if is-defined($box-shadow-h-offset) { + $box-shadow: extend($box-shadow, (h-offset: $box-shadow-h-offset)); + } + + @if is-defined($box-shadow-v-offset) { + $box-shadow: extend($box-shadow, (v-offset: $box-shadow-v-offset)); + } + + @if is-defined($box-shadow-blur) { + $box-shadow: extend($box-shadow, (blur: $box-shadow-blur)); + } + + @if is-defined($box-shadow-spread) { + $box-shadow: extend($box-shadow, (spread: $box-shadow-spread)); + } + + @if is-defined($box-shadow-color) { + $box-shadow: extend($box-shadow, (color: $box-shadow-color)); + } + + @if is-defined($box-shadow-inset) { + $box-shadow: extend($box-shadow, (inset: $box-shadow-inset)); + } + } + + $is-box-shadow-valid: true; + + $box-shadow-h-offset: get($box-shadow, h-offset); + + @if not is-length($box-shadow-h-offset) { + $is-box-shadow-valid: false; + + @warn '`box-shadow h-offset: #{$box-shadow-h-offset}` is not a valid css length value'; + } + + $box-shadow-v-offset: get($box-shadow, v-offset); + + @if $is-box-shadow-valid { + @if not is-length($box-shadow-v-offset) { + $is-box-shadow-valid: false; + + @warn '`box-shadow v-offset: #{$box-shadow-v-offset}` is not a valid css length value'; + } + } + + $box-shadow-blur: get($box-shadow, blur); + + @if $is-box-shadow-valid { + @if not is-length($box-shadow-blur) { + $is-box-shadow-valid: false; + + @warn '`box-shadow blur: #{$box-shadow-blur}` is not a valid css length value'; + } + } + + $box-shadow-spread: get($box-shadow, spread); + + @if $is-box-shadow-valid { + @if not is-length($box-shadow-spread) { + $is-box-shadow-valid: false; + + @warn '`box-shadow spread: #{$box-shadow-spread}` is not a valid css length value'; + } + } + + $box-shadow-color: get($box-shadow, color); + + @if $is-box-shadow-valid { + @if not is-css-color($box-shadow-color) { + $is-box-shadow-valid: false; + + @warn '`box-shadow color: #{$box-shadow-color}` is not a valid css color value'; + } + } + + $box-shadow-inset: get($box-shadow, inset); + + @if $is-box-shadow-valid { + @if is-string($box-shadow-inset) and $box-shadow-inset !=inset { + $is-box-shadow-valid: false; + + @warn '`box-shadow inset: #{$box-shadow-inset}` is not a valid css inset value'; + } + } + + @return $is-box-shadow-valid; + } + } + + @return false; +} + +/// Checks if a list is a box-shadow list (e.g. `0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000`) +/// +/// @access public +/// @param {array | list} $box-shadows - the box shadows list +/// @return {boolean} +@function is-box-shadows($box-shadows-list...) { + @if is-defined($box-shadows-list) { + $is-box-shadows-valid: true; + + @each $box-shadows in $box-shadows-list { + @each $box-shadow in $box-shadows { + @if $is-box-shadows-valid { + $is-box-shadows-valid: is-box-shadow($box-shadow); + } + } + } + + @return $is-box-shadows-valid; + } + + @return false; +} + /// Box shadow mixin /// /// @access public -/// @param {shadow} $shadows... - the box shadows list +/// @param {shadow} $box-shadows... - the box shadows list /// @example scss - Usage -/// .shadow-element { -/// @include box-shadow(inset 0 2px 0px #dcffa6, 0 2px 5px #000); +/// .box-shadow-element { +/// @include box-shadow(0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000); /// } /// /// @example css - Output -/// .color-element { -/// -webkit-box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000; -/// -moz-box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000; -/// -ms-box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000; -/// -o-box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000; -/// box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000; +/// .box-shadow-element { +/// -webkit-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000; +/// -moz-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000; +/// -ms-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000; +/// -o-box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000; +/// box-shadow: 0 2px 0 0 #dcffa6 inset, 0 2px 5px 0 #000; /// } -@mixin box-shadow($shadows...) { - @include prefixer(box-shadow, $shadows); +@mixin box-shadow($box-shadows...) { + @if list-separator($box-shadows...) != comma { + $box-shadows: $box-shadows, ; + } + + @if is-box-shadows($box-shadows...) { + @include prefixer(box-shadow, $box-shadows); + } + @else { + @warn '`box-shadow: #{$box-shadows}` one or more are not valid css box-shadow values'; + } } /// Z-index modes @@ -631,7 +795,7 @@ $backface-visibility-modes: array-concat((visible, hidden), $css-default-modes); /// } /// } @mixin aspect-ratio($width, $height, $content-selector: '.content') { - @if (unit($height) == unit($width)) { + @if (unit($height)==unit($width)) { @include position(relative); @include display(inline-block); diff --git a/scss/mixins/_margin.scss b/scss/mixins/_margin.scss index 4fff662..978ab3a 100644 --- a/scss/mixins/_margin.scss +++ b/scss/mixins/_margin.scss @@ -9,7 +9,7 @@ $margin-modes: array-concat((auto), $css-default-modes); @function is-margin($m) { - @return is-defined($m) and (array-contains($margin-modes, $m) or is-size($m) or is-percentage($m)); + @return is-defined($m) and (array-contains($margin-modes, $m) or is-length($m)); } @mixin margin-direction($m, $margin-direction-selector: margin) { @@ -41,14 +41,12 @@ $margin-modes: array-concat((auto), $css-default-modes); @mixin margin($m) { $margin-top: nth-value($m, 1, 0); - @include margin-top($margin-top); - $margin-right: nth-value($m, 2, $margin-top); - @include margin-right($margin-right); - $margin-bottom: nth-value($m, 3, $margin-top); - @include margin-bottom($margin-bottom); - $margin-left: nth-value($m, 4, $margin-right); + + @include margin-top($margin-top); + @include margin-right($margin-right); + @include margin-bottom($margin-bottom); @include margin-left($margin-left); } diff --git a/scss/mixins/_padding.scss b/scss/mixins/_padding.scss index 9d4daf0..c1dae23 100644 --- a/scss/mixins/_padding.scss +++ b/scss/mixins/_padding.scss @@ -7,7 +7,7 @@ //// @function is-padding($p) { - @return is-defined($p) and (array-contains($css-default-modes, $p) or is-size($p) or is-percentage($p)); + @return is-defined($p) and (array-contains($css-default-modes, $p) or is-length($p)); } @mixin padding-direction($p, $padding-direction-selector: padding) { @@ -39,14 +39,12 @@ @mixin padding($p) { $padding-top: nth-value($p, 1, 0); - @include padding-top($padding-top); - $padding-right: nth-value($p, 2, $padding-top); - @include padding-right($padding-right); - $padding-bottom: nth-value($p, 3, $padding-top); - @include padding-bottom($padding-bottom); - $padding-left: nth-value($p, 4, $padding-right); + + @include padding-top($padding-top); + @include padding-right($padding-right); + @include padding-bottom($padding-bottom); @include padding-left($padding-left); } diff --git a/scss/mixins/_position.scss b/scss/mixins/_position.scss new file mode 100644 index 0000000..7b5e2a6 --- /dev/null +++ b/scss/mixins/_position.scss @@ -0,0 +1,250 @@ +/// Position modes +/// +/// @type list +/// @access private +$position-modes: array-concat((static, absolute, fixed, relative, sticky), $css-default-modes); + +/// Checks if something is a position mode +/// +/// @access public +/// @param {string} $pm - the position mode +/// @return {boolean} +@function is-position($pm) { + @return is-defined($pm) and array-contains($position-modes, $pm); +} + +/// Position point modes +/// +/// @type list +/// @access private +$position-point-modes: array-concat((auto), $css-default-modes); + +/// Checks if something is a position point value +/// +/// @access public +/// @param {string | length} $ppv - the position point value +/// @return {boolean} +@function is-position-point-value($ppv) { + @return is-defined($ppv) and (is-length($ppv) or array-contains($position-point-modes, $ppv)); +} + +/// Position points +/// +/// @type list +/// @access private +$position-points: (top, right, bottom, left); + +/// Checks if something is a position point +/// +/// @access public +/// @param {string} $pp - the position point +/// @return {boolean} +@function is-position-point($pp) { + @return is-defined($pp) and array-contains($position-points, $pp); +} + +/// Position point mixin +/// +/// @access public +/// @param {string | length} $v - the point value (eg. 1px, 20%, auto, etc...) +/// @param {string} $p - the point (top, right, bottom, left) +/// @example scss - Usage +/// .position-point-element { +/// @include position-point(0, top); +/// } +/// +/// @example css - Output +/// .position-point-element { +/// top: 0; +/// } +@mixin position-point($v: auto, $p: null) { + @if is-position-point-value($v) and is-position-point($p) { + #{$p}: $v; + } + @else { + @warn '`#{$p}: #{$v}` is not a valid position point value'; + } +} + +/// Top mixin +/// +/// @access public +/// @param {string | length} $v - the point value (eg. 1px, 20%, auto, etc...) +/// @example scss - Usage +/// .top-element { +/// @include top(0); +/// } +/// +/// @example css - Output +/// .top-element { +/// top: 0; +/// } +@mixin top($v: auto) { + @include position-point($v, top); +} + +/// Right mixin +/// +/// @access public +/// @param {string | length} $v - the point value (eg. 1px, 20%, auto, etc...) +/// @example scss - Usage +/// .right-element { +/// @include right(0); +/// } +/// +/// @example css - Output +/// .right-element { +/// right: 0; +/// } +@mixin right($v: auto) { + @include position-point($v, right); +} + +/// Bottom mixin +/// +/// @access public +/// @param {string | length} $v - the point value (eg. 1px, 20%, auto, etc...) +/// @example scss - Usage +/// .bottom-element { +/// @include bottom(0); +/// } +/// +/// @example css - Output +/// .bottom-element { +/// bottom: 0; +/// } +@mixin bottom($v: auto) { + @include position-point($v, bottom); +} + +/// Left mixin +/// +/// @access public +/// @param {string | length} $v - the point value (eg. 1px, 20%, auto, etc...) +/// @example scss - Usage +/// .left-element { +/// @include left(0); +/// } +/// +/// @example css - Output +/// .left-element { +/// left: 0; +/// } +@mixin left($v: auto) { + @include position-point($v, left); +} + +/// Position mixin +/// +/// @access public +/// @param {string} $options - the options +/// @param {string} $options.position - the position mode +/// @param {length} $options.top - the top +/// @param {length} $options.right - the right +/// @param {length} $options.bottom - the bottom +/// @param {length} $options.left - the left +/// @example scss - Usage +/// .position-element { +/// @include position(absolute 0 0 0 0); +/// } +/// +/// @example css - Output +/// .position-element { +/// position: absolute; +/// top: 0; +/// right: 0; +/// bottom: 0; +/// left: 0; +/// } +/// +/// @example scss - Usage - sticky +/// .position-element { +/// @include position(sticky 10px 2rem); +/// } +/// +/// @example css - Output +/// .position-element { +/// position: -webkit-sticky; +/// position: sticky; +/// top: 10px; +/// right: 2rem; +/// bottom: 10px; +/// left: 2rem; +/// } +@mixin position($options) { + $settings: (position: static, top: null, right: null, bottom: null, left: null); + + @if is-object($options) { + $settings: extend($settings, $options); + } + @else { + $position: nth-value($options, 1); + + @if is-defined($position) { + $settings: extend($settings, (position: $position)); + } + + $top: nth-value($options, 2, null); + + @if is-defined($top) { + $settings: extend($settings, (top: $top)); + } + + $right: nth-value($options, 3, $top); + + @if is-defined($right) { + $settings: extend($settings, (right: $right)); + } + + $bottom: nth-value($options, 4, $top); + + @if is-defined($bottom) { + $settings: extend($settings, (bottom: $bottom)); + } + + $left: nth-value($options, 5, $right); + + @if is-defined($left) { + $settings: extend($settings, (left: $left)); + } + } + + $position: get($settings, position); + + @if is-defined($position) { + @if is-position($position) { + @if $position == sticky { + position: -webkit-sticky; + } + + position: $position; + } + @else { + @warn '`position: #{$position}` is not a valid position mode'; + } + } + + $top: get($settings, top); + + @if is-defined($top) { + @include top($top); + } + + $right: get($settings, right); + + @if is-defined($right) { + @include right($right); + } + + $bottom: get($settings, bottom); + + @if is-defined($bottom) { + @include bottom($bottom); + } + + $left: get($settings, left); + + @if is-defined($left) { + @include left($left); + } +} diff --git a/scss/mixins/mixins.scss b/scss/mixins/mixins.scss index 06573aa..58cf030 100644 --- a/scss/mixins/mixins.scss +++ b/scss/mixins/mixins.scss @@ -8,12 +8,13 @@ @import 'utils'; @import 'cursor'; +@import 'position'; @import 'box'; @import 'background'; @import 'text'; -// @import 'padding'; TODO: fix this type checking +@import 'padding'; @import 'border'; -// @import 'margin'; TODO: fix this type checking +@import 'margin'; @import 'media'; @import 'overflow'; @import 'transform'; diff --git a/scss/options.scss b/scss/options.scss index 47fa79d..814dbb0 100644 --- a/scss/options.scss +++ b/scss/options.scss @@ -1,7 +1,4 @@ @charset 'UTF-8'; -// sass-lint:disable indentation -$output-bourbon-deprecation-warnings: false !default; - @import 'grid-system/options/options'; diff --git a/scss/types/_common.scss b/scss/types/_common.scss index 98f6b2a..5eed86b 100644 --- a/scss/types/_common.scss +++ b/scss/types/_common.scss @@ -89,13 +89,13 @@ $absolute-length-units: (cm, mm, in, px, pt, pc); } /// Checks if a value is a valid CSS length -///
Relative, Absolute, Calc or Length Mode +///
Relative, Absolute, Percentage, Calc or Length Mode /// /// @access public /// @param {any} $l /// @return {boolean} @function is-length($l) { - @return is-defined($l) and (is-relative-length($l) or is-absolute-length($l) or is-calc-length($l) or is-length-mode($l)); + @return is-defined($l) and (is-relative-length($l) or is-absolute-length($l) or is-calc-length($l) or is-percentage($l) or is-length-mode($l)); } /// CSS size/length modes supported