From d07f664450ddaaebb44127a4bd057763d13d3f82 Mon Sep 17 00:00:00 2001
From: Feuerfuchs <git@feuerfuchs.dev>
Date: Sun, 1 Nov 2020 20:55:14 +0100
Subject: Init

---
 src/bem/_state.scss | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 src/bem/_state.scss

(limited to 'src/bem/_state.scss')

diff --git a/src/bem/_state.scss b/src/bem/_state.scss
new file mode 100644
index 0000000..4a85bbb
--- /dev/null
+++ b/src/bem/_state.scss
@@ -0,0 +1,146 @@
+////
+/// @group BEM
+///
+/// @access public
+////
+
+/// 
+/// Create a new state rule.
+///
+/// @param {string} $state  - First state name
+/// @param {list}   $states - List of more state names
+///
+/// @content
+///
+/// @example scss - Using single is-state
+///   @include iro-bem-object('menu') {
+///     display: none;
+///     
+///     @include iro-bem-state('is', open') {
+///       display: block;
+///     }
+///   }
+///   
+///   // Generates:
+///   
+///   .o-menu {
+///     display: none;
+///   }
+///   
+///   .o-menu.is-open {
+///     display: block;
+///   }
+///
+/// @example scss - Using multiple is-states
+///   @include iro-bem-object('menu') {
+///     display: none;
+///     
+///     @include iro-bem-state('is', open', 'visible') {
+///       display: block;
+///     }
+///   }
+///   
+///   // Generates:
+///   
+///   .o-menu {
+///     display: none;
+///   }
+///   
+///   .o-menu.is-open,
+///   .o-menu.is-visible {
+///     display: block;
+///   }
+///
+@mixin iro-bem-state($prefix, $state, $states...) {
+    $result:   iro-bem-state($prefix, $state, $states...);
+    $selector: nth($result, 1);
+    $context:  nth($result, 2);
+
+    @include iro-bem-validate(
+        'state',
+        (prefix: $prefix, state: $state, states: $states),
+        $selector,
+        $context
+    );
+
+    @include iro-context-push($iro-bem-context-id, $context...);
+    @at-root #{$selector} {
+        @content;
+    }
+    @include iro-context-pop($iro-bem-context-id);
+}
+
+///
+/// Generate a new state.
+/// 
+/// @return {list} A list with two items: 1. selector, 2. context or `null`
+///
+/// @see {mixin} iro-bem-has
+///
+@function iro-bem-state($prefix, $state, $states...) {
+    $selector:   ();
+    $parts-data: ();
+
+    @each $state in join($state, $states) {
+        $sel:        selector-parse('.#{$prefix}-#{$state}');
+        @if & {
+            $sel:    selector-append(&, $sel);
+        }
+        $selector:   join($selector, $sel, comma);
+        $parts-data: append($parts-data, (
+                'name':     $state,
+                'selector': $sel
+        ));
+    }
+
+    $context: 'state', (
+        'parts':    $parts-data,
+        'selector': $selector
+    );
+
+    @return $selector $context;
+}
+
+/// 
+/// Create a new has-state modifier.
+///
+/// It's a shorthand for iro-bem-state('is', $state, $states...).
+///
+@mixin iro-bem-is($state, $states...) {
+    @include iro-bem-state('is', $state, $states...) {
+        @content;
+    }
+}
+
+///
+/// Generate a new is-state modifier. Check the respective mixin documentation for more information.
+/// 
+/// @return {list} A list with two items: 1. selector, 2. context or `null`
+///
+/// @see {mixin} iro-bem-is
+///
+@function iro-bem-is($state, $states...) {
+    @return iro-bem-state('is', $state, $states...);
+}
+
+/// 
+/// Create a new has-state modifier.
+///
+/// It's a shorthand for iro-bem-state('has', $state, $states...).
+///
+@mixin iro-bem-has($state, $states...) {
+    @include iro-bem-state('has', $state, $states...) {
+        @content;
+    }
+}
+
+///
+/// Generate a new has-state modifier. Check the respective mixin documentation for more information.
+/// 
+/// @return {list} A list with two items: 1. selector, 2. context or `null`
+///
+/// @see {mixin} iro-bem-has
+///
+@function iro-bem-has($state, $states...) {
+    @return iro-bem-state('has', $state, $states...);
+}
-- 
cgit v1.2.3-54-g00ecf