Added close button to dialog

4 files changed, 17 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;
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index eb524a2..a695bee 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -6,6 +6,7 @@ mixin action-button
             'o-action-button':        true,
             'o-action-button--block': attributes.block,
             'o-action-button--quiet': attributes.quiet,
+            'o-action-button--round': attributes.round,
             'is-disabled':            attributes.disabled,
             'is-selected':            attributes.selected
         }
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 7e3e2d6..0ee52df 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,12 +1,14 @@
 include rule.pug
 include button.pug
 include heading.pug
+include action-button.pug
 
 mixin dialog(title)
     .o-dialog.t-raised
         header.o-dialog__header
             +div-heading('lg')(class='o-dialog__title')
                 = title
+        +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
         +rule('medium')(class='o-dialog__rule')
         section.o-dialog__body
             block