From 511a47c8964c43927563ee88b62b3f215bf9b7d1 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 28 Mar 2022 20:25:21 +0200
Subject: Update

---
 src/_declare-vars.scss       |  4 +--
 src/_objects.scss            |  2 --
 src/_utils.scss              | 16 ++++++-----
 src/layouts/_container.scss  | 65 ++++---------------------------------------
 src/objects/_alert.scss      |  4 +--
 src/objects/_checkbox.scss   | 32 ++++++++++-----------
 src/objects/_dialog.scss     | 66 +++++++++++++++++++++++++++++---------------
 src/objects/_divider.scss    | 12 ++++----
 src/objects/_header.scss     | 31 ---------------------
 src/objects/_lightbox.scss   |  2 +-
 src/objects/_radio.scss      | 18 ++++++------
 src/objects/_sidebar.scss    | 36 ------------------------
 src/objects/_switch.scss     | 18 ++++++------
 src/objects/_text-field.scss | 10 +++----
 14 files changed, 107 insertions(+), 209 deletions(-)
 delete mode 100644 src/objects/_header.scss
 delete mode 100644 src/objects/_sidebar.scss

(limited to 'src')

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index c28cbb2..89d10fe 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -79,7 +79,7 @@
             --400: iro.fn-px-to-rem(28px),
         ),
 
-        --border-width: (
+        --border: (
             --thick:  4px,
             --medium: 2px,
             --thin:   1px,
@@ -160,7 +160,7 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(91%),
+        --gray: fn.gray-palette(92%),
     ),
 ), 'palette-light-lo');
 
diff --git a/src/_objects.scss b/src/_objects.scss
index 9a516ee..e2551ad 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -12,8 +12,6 @@
 @use 'objects/status-indicator';
 @use 'objects/avatar';
 @use 'objects/bubble';
-@use 'objects/header';
-@use 'objects/sidebar';
 @use 'objects/action-menu';
 @use 'objects/menu';
 @use 'objects/backdrop';
diff --git a/src/_utils.scss b/src/_utils.scss
index c0bc087..4aea27c 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -103,18 +103,16 @@ $dirs: (
     @include iro.bem-utility('m#{$dir}-auto') {
         margin#{$suffix}: auto;
     }
-
-    @each $size in (0 10 50 100 200 400) {
-        @include iro.bem-utility('m#{$dir}-#{$size}') {
-            margin#{$suffix}: fn.global-dim(--size --#{$size});
-        }
-    }
     
     @include iro.bem-utility('p#{$dir}-auto') {
         padding#{$suffix}: auto;
     }
 
-    @each $size in (0 10 50 100 200 400) {
+    @each $size in (0 10 50 75 100 125 200 400 700) {
+        @include iro.bem-utility('m#{$dir}-#{$size}') {
+            margin#{$suffix}: fn.global-dim(--size --#{$size});
+        }
+        
         @include iro.bem-utility('p#{$dir}-#{$size}') {
             padding#{$suffix}: fn.global-dim(--size --#{$size});
         }
@@ -123,4 +121,8 @@ $dirs: (
     @include iro.bem-utility('b#{$dir}-0') {
         border#{$suffix}: 0;
     }
+    
+    @include iro.bem-utility('b#{$dir}-1') {
+        border#{$suffix}: 1px solid fn.global-color(--obj);
+    }
 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 3f81758..521262d 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -5,77 +5,22 @@
 @include iro.props-namespace('container') {
     @include iro.props-store((
         --dims: (
-            --content-width:     iro.fn-px-to-rem(700px),
-            --sm-content-width:  iro.fn-px-to-rem(360px),
-            --pad-x:             fn.global-dim(--size --700),
-            --pad-y:             fn.global-dim(--size --700),
+            --width:    iro.fn-px-to-rem(700px),
+            --width-50: iro.fn-px-to-rem(360px),
         )
     ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
-        overflow: hidden;
-
-        @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * fn.global-dim(--size --700));
-            margin-bottom: calc(-1 * fn.global-dim(--size --700));
-
-            &::before,
-            &::after {
-                content: '';
-                display: block;
-                width:   0;
-                height:  0;
-            }
-
-            &::before {
-                margin-bottom: fn.global-dim(--size --700);
-            }
-
-            &::after {
-                margin-top: fn.global-dim(--size --700);
-            }
-        }
-
-        @include iro.bem-modifier('pad-x') {
-            padding-right: fn.dim(--pad-x);
-            padding-left:  fn.dim(--pad-x);
-        }
-
-        @include iro.bem-modifier('pad-y') {
-            padding-top:    fn.dim(--pad-y);
-            padding-bottom: fn.dim(--pad-y);
-        }
-
         @include iro.bem-modifier('narrow') {
-            max-width:    fn.dim(--content-width);
+            max-width:    fn.dim(--width);
             margin-right: auto;
             margin-left:  auto;
-
-            @each $breakpoint in map-keys(media.$breakpoints) {
-                @include media.media('<=#{$breakpoint}') {
-                    @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    fn.dim(--content-width);
-                        margin-right: auto;
-                        margin-left:  auto;
-                    }
-                }
-            }
         }
 
-        @include iro.bem-modifier('sm-narrow') {
-            max-width:    fn.dim(--sm-content-width);
+        @include iro.bem-modifier('narrow-50') {
+            max-width:    fn.dim(--width-50);
             margin-right: auto;
             margin-left:  auto;
-
-            @each $breakpoint in map-keys(media.$breakpoints) {
-                @include media.media('<=#{$breakpoint}') {
-                    @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    fn.dim(--sm-content-width);
-                        margin-right: auto;
-                        margin-left:  auto;
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 0bb8485..3b4656e 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('alert') {
     @include iro.props-store((
         --dims: (
-            --border-width: 2px,
+            --border: 2px,
             --pad-x:        fn.global-dim(--size --250),
             --pad-y:        fn.global-dim(--size --250),
             --rounding:     4px,
@@ -24,7 +24,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        border:           fn.dim(--border-width) solid fn.color(--border);
+        border:           fn.dim(--border) solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         color:            fn.global-color(--fg);
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 412efda..5443354 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('checkbox') {
     @include iro.props-store((
         --dims: (
-            --size:         fn.global-dim(--size --175),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --size:      fn.global-dim(--size --175),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -56,7 +56,7 @@
             width:            fn.dim(--size);
             height:           fn.dim(--size);
             margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
-            border-radius:    fn.dim(--border-width);
+            border-radius:    fn.dim(--border);
             background-color: fn.color(--box-border);
     
             &::before,
@@ -68,10 +68,10 @@
     
             &::before {
                 z-index:          2;
-                top:              fn.dim(--border-width);
-                left:             fn.dim(--border-width);
-                width:            calc(fn.dim(--size) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--size) - 2 * fn.dim(--border-width));
+                top:              fn.dim(--border);
+                left:             fn.dim(--border);
+                width:            calc(fn.dim(--size) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--size) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
                 background-color: fn.color(--box-bg);
             }
@@ -79,9 +79,9 @@
             &::after {
                 z-index:       3;
                 top:           calc(.5 * fn.dim(--size) - 1px);
-                left:          calc(1.5 * fn.dim(--border-width));
+                left:          calc(1.5 * fn.dim(--border));
                 box-sizing:    border-box;
-                width:         calc(fn.dim(--size) - 3 * fn.dim(--border-width));
+                width:         calc(fn.dim(--size) - 3 * fn.dim(--border));
                 height:        0;
                 transform:     scale(0);
                 transition:    transform .2s ease;
@@ -96,10 +96,10 @@
             display:          block;
             position:         absolute;
             z-index:          2;
-            top:              calc(1 * fn.dim(--border-width));
-            left:             calc(1 * fn.dim(--border-width));
-            width:            calc(100% - 2 * fn.dim(--border-width));
-            height:           calc(100% - 2 * fn.dim(--border-width));
+            top:              calc(1 * fn.dim(--border));
+            left:             calc(1 * fn.dim(--border));
+            width:            calc(100% - 2 * fn.dim(--border));
+            height:           calc(100% - 2 * fn.dim(--border));
             transform:        scale(0);
             transform-origin: 40% 90%;
             transition:       transform .2s ease;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 094e09b..ac77a66 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,8 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@use 'header';
-
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
@@ -12,6 +10,16 @@
             --rounding: 8px,
             --border:   1px,
 
+            --header: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
+            --sidebar: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
             --body: (
                 --pad-x: fn.global-dim(--size --200),
                 --pad-y: fn.global-dim(--size --200),
@@ -28,18 +36,15 @@
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#000, .2),
-            --shadow: 0 .2em .5em rgba(#000, .2),
-
-            --sidebar: (
-                --border: fn.global-color(--obj),
-            ),
+            --outer-border: rgba(#000, .2),
+            --inner-border: fn.global-color(--obj),
+            --shadow:       0 .2em .5em rgba(#000, .2),
         ),
     ), 'colors');
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#fff, .2),
+            --outer-border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
@@ -57,7 +62,7 @@
         max-width:             fn.dim(--width-md);
         margin:                0 auto;
         overflow:              hidden;
-        border:                fn.dim(--border) solid fn.color(--border);
+        border:                fn.dim(--border) solid fn.color(--outer-border);
         border-radius:         fn.dim(--rounding);
         background-clip:       padding-box;
         background-color:      fn.global-color(--bg);
@@ -72,29 +77,34 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('sidebar-header') {
-            grid-area:    sidebar-header;
-            border-right: 1px solid fn.color(--sidebar --border);
-
-            @include iro.bem-sibling-elem('header') {
-                grid-area: header;
+        @include iro.bem-elem('header') {
+            grid-area:     sidebar-header / sidebar-header / header / header;
+            padding:       fn.dim(--header --pad-y) fn.dim(--header --pad-x);
+            border-bottom: 1px solid fn.color(--inner-border);
+
+            @include iro.bem-modifier('sidebar') {
+                grid-area:    sidebar-header;
+                border-right: 1px solid fn.color(--inner-border);
+    
+                @include iro.bem-sibling-elem('header') {
+                    grid-area: header;
+                }
             }
         }
 
-        @include iro.bem-elem('header') {
-            grid-area: sidebar-header / sidebar-header / header / header;
+        @include iro.bem-elem('title') {
+            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
+            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
         }
 
         @include iro.bem-elem('close-btn') {
             margin-left: auto;
         }
 
-        @include iro.bem-elem('label') {
-            padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
-        }
-
         @include iro.bem-elem('sidebar') {
-            grid-area: sidebar;
+            grid-area:    sidebar;
+            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
+            border-right: 1px solid fn.color(--inner-border);
         }
 
         @include iro.bem-elem('body') {
@@ -108,5 +118,15 @@
             justify-content: flex-end;
             padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
+
+        @include iro.bem-modifier('flat') {
+            @include iro.bem-elem('header') {
+                border-bottom: 0;
+            }
+
+            @include iro.bem-elem('body') {
+                padding-top: 0;
+            }
+        }
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index cef598f..9764ddb 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -7,15 +7,15 @@
             --margin-y: fn.global-dim(--size --85),
     
             --strong: (
-                --border-width:    fn.global-dim(--border-width --thick),
+                --border:          fn.global-dim(--border --thick),
                 --label-font-size: fn.global-dim(--font-size --100),
             ),
             --medium: (
-                --border-width:    fn.global-dim(--border-width --medium),
+                --border:          fn.global-dim(--border --medium),
                 --label-font-size: fn.global-dim(--font-size --75),
             ),
             --faint: (
-                --border-width:    fn.global-dim(--border-width --thin),
+                --border:          fn.global-dim(--border --thin),
                 --label-font-size: fn.global-dim(--font-size --50),
             ),
         ),
@@ -40,7 +40,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          block;
-        height:           fn.dim(--strong --border-width);
+        height:           fn.dim(--strong --border);
         margin-top:       fn.dim(--margin-y);
         margin-bottom:    fn.dim(--margin-y);
         background-color: fn.color(--strong --bg);
@@ -55,12 +55,12 @@
         }
 
         @include iro.bem-modifier('medium') {
-            height:           fn.dim(--medium --border-width);
+            height:           fn.dim(--medium --border);
             background-color: fn.color(--medium --bg);
         }
 
         @include iro.bem-modifier('faint') {
-            height:           fn.dim(--faint --border-width);
+            height:           fn.dim(--faint --border);
             background-color: fn.color(--faint --bg);
         }
 
diff --git a/src/objects/_header.scss b/src/objects/_header.scss
deleted file mode 100644
index 773d584..0000000
--- a/src/objects/_header.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('header') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --75),
-            --pad-y: fn.global-dim(--size --75)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border-bottom: 1px solid fn.color(--border);
-
-        @include iro.bem-elem('content') {
-            display:          flex;
-            box-sizing:       border-box;
-            align-items:      center;
-            height:           100%;
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        }
-    }
-}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 435ff88..131db29 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,7 +12,7 @@
             --thumbnail: (
                 --size:     fn.global-dim(--size --800),
                 --spacing:  fn.global-dim(--size --100),
-                --selected: 2px, //fn.global-dim(--border-width --medium),
+                --selected: 2px, //fn.global-dim(--border --medium),
             ),
             --button: (
                 --font-size: fn.global-dim(--font-size --200),
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c740833..65dfa66 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('radio') {
     @include iro.props-store((
         --dims: (
-            --diameter:     calc(fn.global-dim(--size --175) + 1px),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --diameter:  calc(fn.global-dim(--size --175) + 1px),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -63,10 +63,10 @@
                 content:          '';
                 display:          block;
                 position:         relative;
-                top:              fn.dim(--border-width);
-                left:             fn.dim(--border-width);
-                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
+                top:              fn.dim(--border);
+                left:             fn.dim(--border);
+                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
                 border-radius:    fn.dim(--diameter);
                 background-color: fn.color(--circle-bg);
diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss
deleted file mode 100644
index bf8dd59..0000000
--- a/src/objects/_sidebar.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('sidebar') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --75),
-            --pad-y: fn.global-dim(--size --75)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border-width: 0 1px 0 0;
-        border-style: solid;
-        border-color: fn.color(--border);
-
-        @include iro.bem-elem('content') {
-            box-sizing:       border-box;
-            height:           100%;
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        }
-
-        @include iro.bem-modifier('right') {
-            border-right-width: 0;
-            border-left-width:  1px;
-        }
-    }
-}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index a818bde..ad39115 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
 @include iro.props-namespace('switch') {
     @include iro.props-store((
         --dims: (
-            --width:        fn.global-dim(--size --325),
-            --height:       calc(fn.global-dim(--size --175) + 1px),
-            --label-gap:    fn.global-dim(--size --125),
-            --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        fn.global-dim(--size --65),
-            --pad-y:        fn.global-dim(--size --65),
+            --width:     fn.global-dim(--size --325),
+            --height:    calc(fn.global-dim(--size --175) + 1px),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
         ),
     ), 'dims');
 
@@ -67,10 +67,10 @@
             &::after {
                 content:          '';
                 display:          block;
-                width:            calc(fn.dim(--height) - 2 * fn.dim(--border-width));
-                height:           calc(fn.dim(--height) - 2 * fn.dim(--border-width));
+                width:            calc(fn.dim(--height) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--height) - 2 * fn.dim(--border));
                 transition:       transform .2s ease;
-                border:           fn.dim(--border-width) solid fn.color(--handle-border);
+                border:           fn.dim(--border) solid fn.color(--handle-border);
                 border-radius:    fn.dim(--width);
                 background-color: fn.color(--handle-bg);
             }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 1e18f0a..643e8d9 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -34,7 +34,7 @@
         --dims: (
             --pad-x:         fn.global-dim(--size --125),
             --pad-y:         fn.global-dim(--size --125),
-            --border-width:  fn.global-dim(--border-width --thin),
+            --border:        fn.global-dim(--border --thin),
             --border-radius: 2px,
 
             --extended: (
@@ -43,7 +43,7 @@
             ),
 
             --focus: (
-                --border-width:  fn.global-dim(--border-width --medium),
+                --border:  fn.global-dim(--border --medium),
             )
         ),
     ), 'dims');
@@ -93,7 +93,7 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         $line-height:         1.4;
-        $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
+        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
 
         position:         relative;
         min-width:        0;
@@ -107,7 +107,7 @@
             right:            0;
             bottom:           0;
             left:             0;
-            border:           fn.dim(--border-width) solid fn.color(--border);
+            border:           fn.dim(--border) solid fn.color(--border);
             border-radius:    fn.dim(--border-radius);
             box-shadow:       fn.color(--shadow);
             pointer-events:   none;
@@ -143,7 +143,7 @@
                     right:         $focus-border-offset;
                     bottom:        $focus-border-offset;
                     left:          $focus-border-offset;
-                    border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
+                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
                     border-radius: calc(fn.dim(--border-radius) - $focus-border-offset);
                     box-shadow:    fn.color(--focus --shadow);
                 }
-- 
cgit v1.2.3-54-g00ecf