Permalink
Browse files

Updated North mixins so they are now 10x more awesome

  • Loading branch information...
1 parent 261e340 commit f9128131526848b64812e06e2179f806bcc66bf2 @Snugug Snugug committed Apr 27, 2014
View
@@ -1,3 +1,4 @@
+@import "north/helpers";
@import "north/components";
@import "north/layouts";
@import "north/aspects";
@@ -9,8 +9,13 @@
// Mixins
//////////////////////////////
@mixin aspect($name) {
- &--#{aspect($name)} {
+ @include aspects($name) {
@content;
}
}
+@mixin aspects($names...) {
+ @include north--core('aspect', $names) {
+ @content;
+ }
+}
@@ -8,9 +8,14 @@
//////////////////////////////
// Mixins
//////////////////////////////
-@mixin component($name) {
- @at-root .#{component($name)} {
+@mixin components($name) {
+ @include aspects($name) {
@content;
}
}
+@mixin components($names...) {
+ @include north--core('component', $names) {
+ @content;
+ }
+}
@@ -9,8 +9,13 @@
// Mixins
//////////////////////////////
@mixin element($name) {
- &--#{n-element($name)} {
+ @include aspects($name) {
@content;
}
}
+@mixin elements($names...) {
+ @include north--core('element', $names) {
+ @content;
+ }
+}
@@ -0,0 +1,23 @@
+@mixin north--core($type, $names) {
+ @if (length($names) == 0) {
+ @if str-index($type, 'a') == 1 or str-index($type, 'e') == 1 {
+ @warn 'You need to include an #{$type}!';
+ }
+ @else {
+ @warn 'You need to include a #{$type}!';
+ }
+ }
+ @else {
+ $extend: unique-id();
+ @at-root {
+ %#{$extend} {
+ @content;
+ }
+ }
+ @each $name in $names {
+ &--#{call($type, $name)} {
+ @extend %#{$extend};
+ }
+ }
+ }
+}
@@ -0,0 +1,67 @@
+//////////////////////////////
+// Variables
+//////////////////////////////
+$north-layout-type: 'simple' !default;
+
+//////////////////////////////
+// Functions
+//////////////////////////////
+@function simple-layout($name) {
+ @return '_#{to-lower-case($name)}';
+}
+
+@function complex-layout($name) {
+ @return '__#{to-lower-case($name)}';
+}
+
+@function layout($name, $type: $north-layout-type) {
+ $type: to-lower-case($type);
+ $prefix: null;
+
+ @if $type == 'simple' {
+ @return simple-layout($name);
+ }
+ @else if $type == 'complex' {
+ @return complex-layout($name);
+ }
+ @else {
+ @warn '#{$type} is not a valid North layout type. Please use either `simple` or `complex`';
+ @return $name;
+ }
+}
+
+//////////////////////////////
+// Layout Mixins
+//////////////////////////////
+@mixin simple-layout($name) {
+ @at-root .#{simple-layout($name)} {
+ @content;
+ }
+}
+
+@mixin complex-layout($name) {
+ @at-root .#{complex-layout($name)} {
+ @content;
+ }
+}
+
+@mixin layout($name, $type: $north-layout-type) {
+ $type: to-lower-case($type);
+ $prefix: null;
+
+ @if $type == 'simple' {
+ @include simple-layout($name) {
+ @content;
+ }
+ }
+ @else if $type == 'complex' {
+ @include complex-layout($name) {
+ @content;
+ }
+ }
+ @else {
+ @warn '#{$type} is not a valid North layout type. Please use either `simple` or `complex`';
+ @content;
+ }
+}
+
@@ -1,67 +1,21 @@
//////////////////////////////
-// Variables
-//////////////////////////////
-$north-layout-type: 'simple' !default;
-
-//////////////////////////////
// Functions
//////////////////////////////
-@function simple-layout($name) {
+@function layout($name) {
@return '_#{to-lower-case($name)}';
}
-@function complex-layout($name) {
- @return '__#{to-lower-case($name)}';
-}
-
-@function layout($name, $type: $north-layout-type) {
- $type: to-lower-case($type);
- $prefix: null;
-
- @if $type == 'simple' {
- @return simple-layout($name);
- }
- @else if $type == 'complex' {
- @return complex-layout($name);
- }
- @else {
- @warn '#{$type} is not a valid North layout type. Please use either `simple` or `complex`';
- @return $name;
- }
-}
-
//////////////////////////////
-// Layout Mixins
+// Mixins
//////////////////////////////
-@mixin simple-layout($name) {
- @at-root .#{simple-layout($name)} {
- @content;
- }
-}
-
-@mixin complex-layout($name) {
- @at-root .#{complex-layout($name)} {
+@mixin layout($name) {
+ @include layouts($name) {
@content;
}
}
-@mixin layout($name, $type: $north-layout-type) {
- $type: to-lower-case($type);
- $prefix: null;
-
- @if $type == 'simple' {
- @include simple-layout($name) {
- @content;
- }
- }
- @else if $type == 'complex' {
- @include complex-layout($name) {
- @content;
- }
- }
- @else {
- @warn '#{$type} is not a valid North layout type. Please use either `simple` or `complex`';
+@mixin layouts($names...) {
+ @include north--core('layout', $names) {
@content;
}
-}
-
+}
@@ -0,0 +1,24 @@
+//////////////////////////////
+// Variables
+//////////////////////////////
+$north-state-contains: false !default;
+
+//////////////////////////////
+// Functions
+//////////////////////////////
+@function state($name, $contains: $north-state-contains) {
+ $selector: '=';
+ @if $contains {
+ $selector: '~=';
+ }
+ @return '[data-state#{$selector}"#{$name}"]';
+}
+
+//////////////////////////////
+// Mixins
+//////////////////////////////
+@mixin state($name, $contains: $north-state-contains) {
+ @at-root &#{state($name, $contains)} {
+ @content;
+ }
+}
@@ -1,24 +1,21 @@
//////////////////////////////
-// Variables
-//////////////////////////////
-$north-state-contains: false !default;
-
-//////////////////////////////
// Functions
//////////////////////////////
-@function state($name, $contains: $north-state-contains) {
- $selector: '=';
- @if $contains {
- $selector: '~=';
- }
- @return '[data-state#{$selector}"#{$name}"]';
+@function state($name) {
+ @return '[data-state~="#{$name}"]';
}
//////////////////////////////
// Mixins
//////////////////////////////
-@mixin state($name, $contains: $north-state-contains) {
- @at-root &#{state($name, $contains)} {
+@mixin state($name) {
+ @include layouts($name) {
+ @content;
+ }
+}
+
+@mixin states($names...) {
+ @include north--core('state', $names) {
@content;
}
}

0 comments on commit f912813

Please sign in to comment.