From aed2471a6b5f030d96175c0cf25c3fe44e389614 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 18 Mar 2025 16:56:43 +0100
Subject: Add placeholders
---
src/_iro-design.scss | 1 +
src/objects/_placeholders.scss | 22 ++++++++++++++++++++++
src/objects/_placeholders.vars.scss | 6 ++++++
3 files changed, 29 insertions(+)
create mode 100644 src/objects/_placeholders.scss
create mode 100644 src/objects/_placeholders.vars.scss
(limited to 'src')
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;
--
cgit v1.2.3-70-g09d2