Merge pull request #22 from kaminorse/add-dialog

Add dialog

Author: kaminorse

dist/css/sorbit.css

@@ -155,15 +155,12 @@
       <div class="container has-gutter-2rem">
         <section class="my-1rem">
           <div class="message is-blue">
-            <div class="message-header">
-              Welcome to sorbit.css
-            </div>
+            <div class="message-header">Welcome to sorbit.css</div>
             <div class="message-body">
+              <p class="paragraph">sorbit is sweet css written by scss.</p>
               <p class="paragraph">
-                sorbit is sweet css written by scss.
-              </p>
-              <p class="paragraph">
-                If you want to use "admin layout", <a class="link" href="admin.html">here is an example</a>.
+                If you want to use "admin layout",
+                <a class="link" href="admin.html">here is an example</a>.
               </p>
             </div>
           </div>
@@ -175,12 +172,8 @@
         <section class="my-1rem">
           <nav class="breadcrumb-wrapper">
             <ul class="breadcrumb">
-              <li class="breadcrumb-item">
-                .breadcrumb
-              </li>
-              <li class="breadcrumb-item">
-                .breadcrumb-item
-              </li>
+              <li class="breadcrumb-item">.breadcrumb</li>
+              <li class="breadcrumb-item">.breadcrumb-item</li>
             </ul>
           </nav>
         </section>
@@ -226,6 +219,46 @@
             <input type="radio" class="input" />
           </div>
         </section>
+        <section class="my-1rem">
+          <div class="dialog is-left is-avatar-circle">
+            <div class="dialog-avatar-container">
+              <img
+                class="image dialog-avatar"
+                src="./images/avatar/kaminorse/kaminorse.png"
+                alt="avatar"
+              />
+            </div>
+            <div class="dialog-content-container">
+              <div class="dialog-name">
+                <span
+                  class="forecolor-light-rainbow-70 forecolor-dark-rainbow-80"
+                  >kaminorse</span
+                >
+              </div>
+              <div class="dialog-message">
+                <div class="dialog-message-inner">
+                  <p class="paragraph">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </p>
+                  <p class="paragraph">
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                    laboris nisi ut aliquip ex ea commodo consequat.
+                  </p>
+                  <p class="paragraph">
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur.
+                  </p>
+                  <p class="paragraph">
+                    Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
         <section class="my-1rem">
           <div>
             <div class="loader"></div>
@@ -938,9 +971,7 @@
         </section>
         <section class="my-1rem">
           <details class="accordion">
-            <summary class="accordion-summary">
-              accordion-summary
-            </summary>
+            <summary class="accordion-summary">accordion-summary</summary>
             <div class="accordion-details">accordion-details</div>
           </details>
         </section>

dist/css/sorbit.css.map

@@ -62,6 +62,10 @@ function changeColor(color) {
     elem.className = `code ${color}`;
   });
 
+  document.querySelectorAll(".dialog").forEach((elem) => {
+    elem.className = `dialog is-left is-avatar-circle ${color}`;
+  });
+
   document.querySelectorAll(".input").forEach((elem) => {
     elem.className = `input ${color}`;
   });

dist/css/sorbit.min.css

@@ -1,6 +1,6 @@
 {
   "name": "sorbit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "sweet css written by scss",
   "main": "src/sass/sorbit.scss",
   "scripts": {