From 67722515b4882458547bcbe8ac13e60ba3790a56 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 11 Feb 2022 17:34:57 +0100
Subject: Added backdrop and dialog
---
src/_utils.scss | 8 ++++++
src/index.scss | 2 ++
src/objects/_action-menu.scss | 10 ++------
src/objects/_backdrop.scss | 36 +++++++++++++++++++++++++++
src/objects/_dialog.scss | 57 +++++++++++++++++++++++++++++++++++++++++++
5 files changed, 105 insertions(+), 8 deletions(-)
create mode 100644 src/objects/_backdrop.scss
create mode 100644 src/objects/_dialog.scss
(limited to 'src')
diff --git a/src/_utils.scss b/src/_utils.scss
index 72c1f2f..7525f34 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -12,3 +12,11 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
+@include iro.bem-utility('ps') {
+ position: static;
+}
+
+@include iro.bem-utility('pr') {
+ position: relative;
+}
diff --git a/src/index.scss b/src/index.scss
index 44fba76..3796c18 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -21,6 +21,8 @@
@use 'objects/avatar';
@use 'objects/action-menu';
@use 'objects/menu';
+@use 'objects/backdrop';
+@use 'objects/dialog';
@use 'layouts/form';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 1e95b39..3c10604 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -4,8 +4,6 @@
@include iro.props-namespace('action-menu') {
@include iro.props-store((
--dims: (
- --x: 0,
- --y: 0,
--pad-x: 0,
--pad-y: .3rem,
--separator: .3rem,
@@ -45,8 +43,8 @@
@include iro.bem-object(iro.props-namespace()) {
position: absolute;
z-index: 10000;
- top: fn.dim(--y);
- left: fn.dim(--x);
+ top: var(--y);
+ left: var(--x);
padding: fn.dim(--pad-y) fn.dim(--pad-x);
border: fn.dim(--border) solid fn.color(--border);
border-radius: fn.dim(--rounding);
@@ -54,10 +52,6 @@
box-shadow: fn.color(--shadow);
color: fn.global-color(--fg);
- @include iro.bem-modifier('static') {
- position: static;
- }
-
@include iro.bem-modifier('up-left') {
transform: translate(0, -100%);
}
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
new file mode 100644
index 0000000..bc63a27
--- /dev/null
+++ b/src/objects/_backdrop.scss
@@ -0,0 +1,36 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('backdrop') {
+ @include iro.props-store((
+ --dims: (
+ --z-index: 10000,
+ --pad-x: iro.fn-px-to-rem(14px),
+ --pad-y: iro.fn-px-to-rem(60px),
+ ),
+ ), 'dims');
+
+ @include iro.props-store((
+ --colors: (
+ --bg: rgba(#000, .3),
+ ),
+ ), 'colors');
+
+ @include iro.props-store((
+ --dims: (
+ --pad-y: iro.fn-px-to-rem(30px),
+ )
+ ), 'sm');
+
+ @include iro.bem-object(iro.props-namespace()) {
+ position: fixed;
+ z-index: fn.dim(--z-index);
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ box-sizing: border-box;
+ padding: fn.dim(--pad-y) fn.dim(--pad-x);
+ background-color: fn.color(--bg);
+ }
+}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
new file mode 100644
index 0000000..453b32b
--- /dev/null
+++ b/src/objects/_dialog.scss
@@ -0,0 +1,57 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('dialog') {
+ @include iro.props-store((
+ --dims: (
+ --pad-x: iro.fn-px-to-rem(40px),
+ --pad-y: iro.fn-px-to-rem(40px),
+ --width-sm: iro.fn-px-to-rem(500px),
+ --width-md: iro.fn-px-to-rem(800px),
+ --width-lg: iro.fn-px-to-rem(1100px),
+ --rounding: 3px,
+ ),
+ ), 'dims');
+
+ @include iro.props-store((
+ --colors: (
+ --shadow: 0 .2em .5em rgba(#000, .2),
+ ),
+ ), 'colors');
+
+ @include iro.bem-object(iro.props-namespace()) {
+ max-width: fn.dim(--width-md);
+ margin: 0 auto;
+ padding: fn.dim(--pad-y) fn.dim(--pad-x);
+ overflow: hidden;
+ border-radius: fn.dim(--rounding);
+ background-color: fn.global-color(--bg);
+ box-shadow: fn.color(--shadow);
+ color: fn.global-color(--fg);
+
+ @include iro.bem-modifier('sm') {
+ max-width: fn.dim(--width-sm);
+ }
+
+ @include iro.bem-modifier('lg') {
+ max-width: fn.dim(--width-lg);
+ }
+
+ @include iro.bem-elem('header') {
+ padding-bottom: .5rem;
+ }
+
+ @include iro.bem-elem('title') {
+ margin-top: 0;
+ }
+
+ @include iro.bem-elem('body') {
+ padding-top: .5rem;
+ }
+
+ @include iro.bem-elem('footer') {
+ padding-top: fn.dim(--pad-y);
+ text-align: right;
+ }
+ }
+}
--
cgit v1.2.3-70-g09d2