Added close button to dialog

2 files changed, 14 insertions, 0 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 160aa5d..08ac625 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -223,6 +223,12 @@
             }
         }
     
+        @include iro.bem-modifier('round') {
+            padding-right: fn.dim(--pad-y);
+            padding-left:  fn.dim(--pad-y);
+            border-radius: 100em;
+        }
+    
         @include iro.bem-is('disabled') {
             border-color:     fn.color(--disabled --border);
             background-color: fn.color(--disabled --bg);
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index d83f348..9c7dc1f 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -24,6 +24,7 @@
         display:             grid;
         grid-template-rows:  auto auto 1fr auto;
         grid-template-areas: 'header' 'rule' 'body' 'footer';
+        position:            relative;
         max-width:           fn.dim(--width-md);
         margin:              0 auto;
         padding:             fn.dim(--pad-y) fn.dim(--pad-x);
@@ -46,6 +47,13 @@
             margin-bottom: fn.dim(--title-body-spacing);
         }
 
+        @include iro.bem-elem('close-btn') {
+            position:  absolute;
+            top:       iro.fn-px-to-rem(12px);
+            right:     iro.fn-px-to-rem(12px);
+            font-size: fn.global-dim(--font-size --lg);
+        }
+
         @include iro.bem-elem('rule') {
             grid-area: rule;
             margin:    0;