add modals code

6 files changed, 145 insertions, 28 deletions

diff --git a/demo/index.html b/demo/index.html
index d8636a1..b5c2bfe 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -74,7 +74,7 @@
                 </div>
             </div>
         </section>
-        <section class="layout">
+        <section id="layout">
             <header class="text-center"><h4>flexbox layout</h4></header>
             <section>
                 <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p>
@@ -128,7 +128,7 @@
                 </div>
             </div>
         </section>
-        <section class="tables">
+        <section id="tables">
             <header class="text-center"><h4>tables</h4></header>
             <table>
                 <thead>
@@ -167,7 +167,7 @@
                 </tbody>
             </table>
         </section>
-        <section class="buttons">
+        <section id="buttons">
             <header class="text-center"><h4>buttons</h4></header>
             <section>
                 <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. Buttons can show loading indicators. </p>
@@ -193,7 +193,7 @@
                 </div>
             </div>
         </section>
-        <section class="button-groups">
+        <section id="button-groups">
             <header class="text-center"><h4>button groups</h4></header>
             <div class="columns">
                 <div class="column">
@@ -212,7 +212,7 @@
                 </div>
             </div>
         </section>
-        <section class="media">
+        <section id="media">
             <header class="text-center"><h4>media</h4></header>
             <div class="columns">
                 <div class="column col-6">
@@ -223,7 +223,7 @@
                 </div>
             </div>
         </section>
-        <section class="tooltips">
+        <section id="tooltips">
             <header class="text-center"><h4>tooltips</h4></header>
             <section>
                 <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
@@ -243,10 +243,10 @@
                 </div>
             </div>
         </section>
-        <section class="forms">
+        <section id="forms">
             <header class="text-center"><h4>forms</h4></header>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-5">
                     <form>
                         <div class="form-group">
                             <label class="form-label" for="input-example-1">Name</label>
@@ -295,8 +295,7 @@
                         </div>
                     </form>
                 </div>
-            </div>
-            <div class="columns">
+                <div class="column col-1"></div>
                 <div class="column col-6">
                     <form class="form-horizontal">
                         <div class="form-group columns">
@@ -314,15 +313,6 @@
                         <div class="form-group columns">
                             <div class="col-3"></div>
                             <div class="col-9">
-                                <label class="form-switch">
-                                    <input type="checkbox">
-                                    Send me emails with news and tips
-                                </label>
-                            </div>
-                        </div>
-                        <div class="form-group columns">
-                            <div class="col-3"></div>
-                            <div class="col-9">
                                 <select class="form-select">
                                     <option>Choose an option</option>
                                     <option>Slack</option>
@@ -334,9 +324,9 @@
                         <div class="form-group columns">
                             <div class="col-3"></div>
                             <div class="col-9">
-                                <label class="form-checkbox">
+                                <label class="form-switch">
                                     <input type="checkbox">
-                                    Remember me
+                                    Send me emails with news and tips
                                 </label>
                             </div>
                         </div>
@@ -360,6 +350,15 @@
                         <div class="form-group columns">
                             <div class="col-3"></div>
                             <div class="col-9">
+                                <label class="form-checkbox">
+                                    <input type="checkbox">
+                                    Remember me
+                                </label>
+                            </div>
+                        </div>
+                        <div class="form-group columns">
+                            <div class="col-3"></div>
+                            <div class="col-9">
                                 <button class="btn btn-primary">Submit</button>
                                 <button class="btn btn-link">Cancel</button>
                             </div>
@@ -368,7 +367,7 @@
                 </div>
             </div>
         </section>
-        <section class="labels">
+        <section id="labels">
             <header class="text-center"><h4>labels</h4></header>
             <div class="columns">
                 <div class="column">
@@ -397,7 +396,7 @@
                 </div>
             </div>
         </section>
-        <section class="toasts">
+        <section id="toasts">
             <header class="text-center"><h4>toasts</h4></header>
             <div class="columns">
                 <div class="column">
@@ -436,7 +435,7 @@
                 </div>
             </div>
         </section>
-        <section class="menus">
+        <section id="menus">
             <header class="text-center"><h4>menus</h4></header>
             <div class="columns">
                 <div class="column col-3">
@@ -483,7 +482,7 @@
                 </div>
             </div>
         </section>
-        <section class="breadcrumbs">
+        <section id="breadcrumbs">
             <header class="text-center"><h4>breadcrumbs</h4></header>
             <div class="columns">
                 <div class="column">
@@ -507,7 +506,7 @@
                 </div>
             </div>
         </section>
-        <section class="tabs">
+        <section id="tabs">
             <header class="text-center"><h4>tabs</h4></header>
             <div class="columns">
                 <div class="column">
@@ -560,7 +559,7 @@
                 </div>
             </div>
         </section>
-        <section class="badges">
+        <section id="badges">
             <header class="text-center"><h4>badges</h4></header>
             <div class="columns">
                 <div class="column">
@@ -585,6 +584,52 @@
                 </div>
             </div>
         </section>
+        <section id="modals">
+            <header class="text-center"><h4>modals</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <div class="modal">
+                        <div class="modal-container" role="document">
+                            <div class="modal-header">
+                                <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button>
+                                <h6 class="modal-title">Modal title</h6>
+                            </div>
+                            <div class="modal-body">
+                                <div class="content">
+                                    <p>
+                                        This is the content inside the modal.
+                                    </p>
+                                    <h3>Lorem ipsum</h3>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                                    </p>
+                                    <p>
+                                        Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                                    </p>
+                                    <h3>Cupcake ipsum</h3>
+                                    <p>
+                                        Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                                    </p>
+                                    <p>
+                                        De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                                    </p>
+                                    <p>
+                                        Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                                    </p>
+                                    <p>
+                                        Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button class="btn btn-link">Close</button>
+                                <button class="btn btn-primary">Share</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index a849bc1..0d20d3f 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -406,6 +406,8 @@ h5,
 h6 {
   font-weight: 300;
   line-height: 1.1;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
   color: inherit;
 }
 h1 {
@@ -835,6 +837,9 @@ button.btn-clear::after {
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+.form-horizontal {
+  padding: 1rem;
+}
 .form-horizontal .col-12,
 .form-horizontal .col-11,
 .form-horizontal .col-10,
@@ -1284,6 +1289,37 @@ textarea.form-input {
           flex: 1;
   text-align: center;
 }
+.modal {
+  width: 50vw;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+.modal .modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #efefef;
+}
+.modal .modal-header .modal-title {
+  margin: 0;
+}
+.modal .modal-body {
+  position: relative;
+  padding: 1.5rem;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.modal .modal-footer {
+  padding: 1.5rem;
+  text-align: right;
+}
 .tooltip {
   position: relative;
 }
diff --git a/spectre.less b/spectre.less
index 3e0e3c6..dd185df 100644
--- a/spectre.less
+++ b/spectre.less
@@ -23,7 +23,7 @@
 @import 'src/menus.less';
 @import 'src/navigation.less';
 //@import 'src/cards.less';
-//@import 'src/modals.less';
+@import 'src/modals.less';
 @import 'src/tooltips.less';
 //@import 'src/animations.less';
 
diff --git a/src/forms.less b/src/forms.less
index 8d4cbc4..9838228 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -3,6 +3,8 @@
   margin-bottom: 1rem;
 }
 .form-horizontal {
+  padding: 1rem;
+
   .col-12,
   .col-11,
   .col-10,
diff --git a/src/modals.less b/src/modals.less
new file mode 100644
index 0000000..b51f5ca
--- /dev/null
+++ b/src/modals.less
@@ -0,0 +1,32 @@
+// Modals
+.modal {
+  display: block;
+  width: 50vw;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  .shadow;
+  .centered;
+
+  .modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid @core-border-color;
+
+    .modal-title {
+      margin: 0;
+    }
+  }
+  .modal-body {
+    position: relative;
+    padding: 1.5rem;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+  .modal-footer {
+    padding: 1.5rem;
+    text-align: right;
+  }
+}
\ No newline at end of file
diff --git a/src/typography.less b/src/typography.less
index 4b0cd49..94a596f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -7,6 +7,8 @@ h5,
 h6 {
   font-weight: 300;
   line-height: 1.1;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
   color: inherit;
 }
 h1 {