From 67aebcf6bf448fd0166c974436ff0daefb2a3e54 Mon Sep 17 00:00:00 2001
From: sakofchit <sakun.acharige@gmail.com>
Date: Mon, 8 Aug 2022 01:29:01 -0400
Subject: [PATCH] added dialogs/alerts

---
 .DS_Store           | Bin 10244 -> 10244 bytes
 docs/docs.css       |  34 ++++++++++++++--
 docs/index.html.ejs |  92 +++++++++++++++++++++++++++++++++++++++-----
 package-lock.json   |   2 +-
 package.json        |   2 +-
 style.css           |  25 +++++++++---
 6 files changed, 135 insertions(+), 20 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index 9e95116e162ee387c4349e6fda5497156b6521e9..87f896ea46ce69302635503d13d8add0e753a754 100644
GIT binary patch
delta 616
zcmZn(XbG6$FQ~-8z`)4BAi$85ZWx@LpIfl8a2or>2Eonj94s95AXyd$J%)6KOokGe
z3ZNKJ&;KN3x!imgm!zD0kQm42FFYr2_#JUXl~2JdUyuQ@9jJ$afpr6jWMN2|yhz}Q
z{kcgH4$uk33?;}G{p2_=2e&8%CXcWPEWi1vpdw>z;xDKn`3%Vn#mI&np0BoE$QSC`
z6b7g~!VqloD6VBF*z7FK#>mX*yJfPEh!h+1uga}A{3hp!$iSF=BC?E(o7af2F*2p?
z*}O%xm6c7wqG^q$-(-7fDHt<eT85Efa*ec1Jr6@3&>1NVsSNQ9xnNc)Lk^Hvj2r=s
z3w~4sy@XROvKKqH-g|x>5+Qih!@O+Dz(I@#<S<~`r?9c`GV^A3g<mX_*9$jIo-Ha4
I@oEMW0Ap09ng9R*

delta 509
zcmZn(XbG6$FDl2tz`)4BAi%(o!BEPOl#^~4oSeTgaWVU5b`BPfdXO|bgC0XVLncEB
zvXa~apbQW&bpQ!86}kB?E=f80NkAD628IT2E7>EC*i@wuR3*reRFDC35zIP)$;|?<
znO22NE)bMpomI6n+;noUpfrTFd99!#Bh#GT$rpqq*dX>!ekUXaWAX{hFh1C<EzHJP
z&-70m=pI&vG=_YJJfOddkzM>V@nFS5XRwP=R3Kc7T?L9mnHzu>AlpzDT$GoSpO+34
zWt_Z0<P}qx_2xOEt*kMDf!YTgJ;2tn00TK0<fPnugk{*|QLJLT0I~|M7ulkXiA5}%
V*%f}VOs*H6HMv<-9Aaw#697YKet!S}

diff --git a/docs/docs.css b/docs/docs.css
index b5f8c95..dc705c7 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -3,6 +3,12 @@
   src: url("fonts/FindersKeepers.ttf")
 }
 
+@font-face {
+  font-family: Chicago_12;
+  src: url("fonts/ChiKareGo2.ttf"); 
+}
+
+
 * {
   box-sizing: border-box;
 }
@@ -10,11 +16,10 @@
 body {
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
 }
 
 main {
-  width: 95rem;
+  width: 90rem;
   margin-left: 240px;
   margin-bottom: 60px;
   margin-top: 25px;
@@ -25,7 +30,6 @@ main {
 }
 
 
-
 aside {
   width: 200px;
   position: fixed;
@@ -76,6 +80,19 @@ h3 {
   vertical-align: center;
 }
 
+.modal-text, .alert-text {
+  font-family: Chicago_12;
+  font-size: 1.2em;
+  margin-top: 10px;
+  vertical-align: center;
+}
+
+.modeless-text {
+  font-family: Chicago_12;
+  font-size: 1em;
+  vertical-align: center;
+}
+
 
 p {
   font-family: Geneva;
@@ -110,10 +127,21 @@ pre {
   font-size: 13px;
 }
 
+.modal-dialog {
+  width: 50%;
+}
 
 .btn.active {
   background: black;
   border-radius:6px;
   color: white;
   font-family: Chicago_12;
+}
+
+.square {
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  border: 1.5px solid black;
+  padding-right: 46px;
 }
\ No newline at end of file
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index cd30a80..1f85e30 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -159,19 +159,69 @@
             `)%>
 
             <p>
-              We can also have a bordered dialog, which typically has some interactive component within it.
+              We can also have a modal dialog box, which typically has some interactive component within it.
             </p>
 
             <%- example(`
-            <div class="outer-border">
+            <div class="modal-dialog outer-border">
               <div class="inner-border center">
-                <p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
-                <p class="dialog-text">&copy; 1984 Apple Computer</p>
+
+                <div class="modal-contents">
+                  <p class="modal-text">Modal Dialog</p>
+                  <div style="padding-left: 20px;">
+                    <div class="field-row">
+                      <input id="radio4" type="radio" name="second-example">
+                      <label for="radio4">Room</label>
+                    </div>
+                    <div class="field-row">
+                      <input id="radio5" type="radio" name="second-example">
+                      <label for="radio5">For</label>
+                    </div>
+                    <div class="field-row">
+                      <input id="radio6" type="radio" name="second-example">
+                      <label for="radio6">Stuff</label>
+                    </div>
+                    
+                  </div>
+
+                  <section class="field-row" style="justify-content: flex-end">
+                    <button class="btn">Cancel</button>
+                    <button class="btn" style="width:95px;">OK</button>
+                  </section>
+                
+                </div>
+
+                
               </div>
             </div>
+            `)%>
 
-            
-            
+            <p>
+              A modeless dialog box looks like a window without a size box, zoom box, or
+              scroll bars.
+            </p>
+
+            <%- example(`
+            <div class="window" style="width:30rem;">
+              <div class="title-bar"> 
+                <button class="close"></button>
+                <h1 class="title">Modeless Dialog</h1>
+                <button class="hidden"></button>
+              </div>
+              <div class="separator"></div>
+              
+              <div class="modeless-dialog">
+                <section class="field-row" style="justify-content: flex-start">
+                  <p class="modeless-text">Find:</p>
+                  <input type="text" style="width:100%;" placeholder=""/>
+
+                </section>
+                <section class="field-row" style="justify-content: flex-end">
+                  <button class="btn">Cancel</button>
+                  <button class="btn" style="width:95px;">Find</button>
+                </section>
+              </div>
+            </div>
             `)%>
   
   
@@ -182,6 +232,30 @@
               actions
               <footer>&mdash; Apple HI Guidelines, p. 176</footer>
             </blockquote>
+
+            <p>Alert boxes also have a double-outline frame. T</p>
+
+            <%- example(`
+            <div class="alert-box outer-border"  style="width:30rem;">
+              <div class="inner-border">
+
+                <div class="alert-contents" style="padding-left: 30px; padding-right:30px;">
+                  <section class="field-row" style="justify-content: flex-start">
+                    <div class="square"></div>
+                    <p class="alert-text" style="padding-left:10px;">This is a standard alert box. The text would be placed here. This is where more text appears</p>
+                  </section>
+
+                  <section class="field-row" style="justify-content: flex-end">
+                    <button class="btn">Cancel</button>
+                    <button class="btn" style="width:95px;">OK</button>
+                  </section>
+                
+                </div>
+
+                
+              </div>
+            </div>
+            `)%>
           </div>
         </section>
   
@@ -430,7 +504,7 @@
 
 
   
-            <p>You can also add a details bar to a window by adding<code>.details__bar</code> below the title bar.</p>
+            <p>You can also add a details bar to a window by adding<code>.details-bar</code> below the title bar.</p>
 
             <%- example(`
             
@@ -440,7 +514,7 @@
                 <h1 class="title">Window With Details</h1>
                 <button class="resize"></button>
               </div>
-              <div class="details__bar">
+              <div class="details-bar">
                 <span>some</span>
                 <span>more</span>
                 <span>details</span>
@@ -460,7 +534,7 @@
                 <div class="inactive-title-bar"> 
                   <h1 class="title">Inactive Window</h1>
                 </div>
-                <div class="details__bar">
+                <div class="details-bar">
                   <span>some</span>
                   <span>more</span>
                   <span>details</span>
diff --git a/package-lock.json b/package-lock.json
index 3dfb12e..aa843e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "system.css",
+  "name": "@sakun/system.css",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/package.json b/package.json
index 671ea3b..ed3fecb 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "system.css",
+  "name": "@sakun/system.css",
   "version": "0.1.0",
   "description": "A design system for building retro Apple interfaces",
   "main": "dist/system.css",
diff --git a/style.css b/style.css
index 5fdc1ca..560ef7c 100644
--- a/style.css
+++ b/style.css
@@ -156,17 +156,14 @@ h2 {
   font-size: 2em;
 }
 
+/* buttons */
+
 .standard-button {
   display: block;
   min-width: 59px;
   min-height: 20px;
 }
 
-/*p {
-  font-family: Monaco;
-  font-size: 22px;
-}*/
-
 /* dialogs */
 
 .standard-dialog {
@@ -176,6 +173,22 @@ h2 {
   background-color: white;
 }
 
+.modal-dialog, .alert-box {
+  width: auto;
+  padding: 13px;
+}
+
+.modal-contents, .alert-contents {
+  padding: 10px;
+}
+
+.modeless-dialog {
+  height: 100%;
+  padding: 0.5rem 0.5rem;
+  font-size: 18px;
+  letter-spacing: -0.025em;
+}
+
 .inner-border {
   border-color: black;
   border-top: 3.5px solid;
@@ -336,7 +349,7 @@ h2 {
   font-size: 1rem;
 }
 
-.details__bar {
+.details-bar {
   flex: none;
   display: flex;
   flex-direction: row;