<div class="site-content cf">
<div class="boxed-group dangerzone">
<h3>Account</h3>
<div class="boxed-group-inner">
<section>
<h4>Delete this account</h4>
<button href="#" class="btn btn-danger boxed-action" id="delete-account">Delete Account</button>
<p>This action is permanent; think twice before proceeding!</p>
<dialog id="confirm-delete" class="site-dialog">
<header class="dialog-header">
<h1>Please Confirm</h1>
</header>
<div class="dialog-content">
<p>You are about to close your account. This action is irreversible. It will permanently delete your account along with its associated data. Are you sure you want to continue?</p>
</div>
<div class="btn-group cf">
<button id="delete">Delete</button>
<button id="cancel">Cancel</button>
</div>
</dialog>
</section>
</div>
</div>
</div>
@gray-darker : #555;
@gray-dark : #999;
@gray : #ddd;
@gray-light : #f3f3f3;
@gray-lighter : #e6e9ed;
@body-bg : #f5f7fa;
@body-color : @gray-darker;
@header-bg : #196e76;
@heading-bg : #434a54;
@button-danger-bg : #c0392b;
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.cf:before,
.cf:after {
display: table;
content: ' ';
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
body {
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
color: @body-color;
background-color: @body-bg;
}
img {
max-width: 100%;
height: auto;
}
figure {
margin: 0;
padding: 10px;
a {
display: block;
}
}
mark {
padding: 0 5px;
background-color: @gray;
}
.btn-danger {
padding: 10px 15px;
cursor: pointer;
border: 1px solid darken(@button-danger-bg, 5%);
border-radius: 3px;
color: #fff;
background-color: @button-danger-bg;
&:hover {
background-color: darken(@button-danger-bg, 5%);
}
}
.site-header {
text-align: center;
background-color: @header-bg;
h1, a {
padding: 15px;
text-transform: uppercase;
color: #fff;
}
h1 {
font-size: 18px;
margin: 0;
}
a {
font-size: 14px;
font-weight: 300;
display: block;
text-decoration: none;
background-color: darken(@header-bg, 10%);
}
}
.boxed-group {
width: 90%;
max-width: 680px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
h3, h4 {
font-weight: 400;
margin: 0;
}
h3 {
padding: 12px 20px;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: @heading-bg;
}
h4 {
font-size: 18px;
color: @gray-darker;
}
section {
padding: 30px 20px;
&:first-child {
border-bottom: 1px solid @gray-lighter;
}
&:only-of-type,
&:only-child {
border-bottom: 0;
}
}
.boxed-group-inner {
font-size: 14px;
font-weight: 300;
color: #aaa;
border-width: 0 1px 1px;
border-style: solid;
border-color: @gray-lighter;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #fff;
}
.btn {
float: right;
margin-left: 20px;
}
}
View Compiled
(function($) {
'use strict';
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});
})(jQuery);
This Pen doesn't use any external CSS resources.