Add placeholders

4 files changed, 30 insertions, 0 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 04857e3..2bf1a6c 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -61,6 +61,7 @@ $breakpoints: (
 @forward 'objects/menu' as o-menu--*;
 @forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..e148f21
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'placeholders.vars';
+@use 'placeholders.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('placeholders') {
+        @include bem.elem('placeholder') {
+            display:          inline-block;
+            min-block-size:   props.get(vars.$min-block-size);
+            vertical-align:   middle;
+            background-color: currentColor;
+            border-radius:    props.get(vars.$rounding);
+            opacity:          props.get(vars.$opacity);
+        }
+    }
+}
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
+$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity:        props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 85d1918..ba85ec4 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -39,6 +39,7 @@
 @include iro.o-menu--styles;
 @include iro.o-navbar--styles;
 @include iro.o-palette--styles;
+@include iro.o-placeholders--styles;
 @include iro.o-popover--styles;
 @include iro.o-radio--styles;
 @include iro.o-side-nav--styles;