Skip to content

Commit

Permalink
finally removed bourbon dependency
Browse files Browse the repository at this point in the history 
added position, margin, padding mixins
  • Loading branch information
Black Mirror committed May 7, 2018
1 parent 5761b4b commit a71dbc5
Show file tree
Hide file tree
Showing 11 changed files with 451 additions and 45 deletions.
2 changes: 1 addition & 1 deletion .sassdocrc
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 7 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -15,11 +15,13 @@
},
"keywords": [
"flavor",
"sass",
"scss",
"bourbon",
"mixins",
"functions",
"helpers"
"helpers",
"framework",
"grid system"
],
"author": "Black Mirror",
"license": "MIT",
Expand All @@ -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"
}
}
}
1 change: 0 additions & 1 deletion scss/flavor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@charset 'UTF-8';

@import 'options';
@import '~bourbon/app/assets/stylesheets/bourbon';

@import 'core';
@import 'grid-system/grid-system';
190 changes: 177 additions & 13 deletions scss/mixins/_box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);

Expand Down
12 changes: 5 additions & 7 deletions scss/mixins/_margin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
12 changes: 5 additions & 7 deletions scss/mixins/_padding.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Loading

0 comments on commit a71dbc5

Please sign in to comment.