feat: list and rating

maitrakhatri · Mar 24, 2022 · 15dfb5d · 15dfb5d
1 parent 56e36ba
commit 15dfb5d
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 2 deletions.
diff --git a/CSS/Components/list/list.css b/CSS/Components/list/list.css
@@ -0,0 +1,38 @@
+.list-inline li {
+    display: inline;
+    margin-right: 1rem;
+}
+
+.list-stacked {
+    list-style: none;
+    padding: 1rem;
+    background-color: var(--text-gray)
+}
+
+.list-stacked li {
+    margin-bottom: 1.5rem;
+}
+
+.stacked-component {
+    display: grid;
+    grid-template-areas: 
+    "a t"
+    "a s";
+    width: fit-content;
+    background-color: var(--gray);
+    padding: 1rem;
+    border-radius: .25rem;
+}
+
+.stacked-component .avatar {
+    grid-area: a;
+    margin-right: 1rem;
+}
+
+.stacked-component .title {
+    grid-area: t;
+}
+
+.stacked-component .sub-title {
+    grid-area: s;
+}
diff --git a/CSS/Components/list/list.html b/CSS/Components/list/list.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>List</title>
+    <link rel="stylesheet" href="list.css">
+</head>
+<body>
+
+    <ul class="list-inline">
+        <li>Spaced</li>
+        <li>Inline</li>
+        <li>List</li>
+    </ul>
+
+    <ul class="list-stacked">
+        <li>
+            <div class="stacked-component">
+                <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                <div class="title">Maitra Khatri</div>
+                <div class="sub-title">maitrakhatri@gmail.com</div>
+            </div>
+        </li>
+
+        <li>
+            <div class="stacked-component">
+                <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                <div class="title">Maitra Khatri</div>
+                <div class="sub-title">maitrakhatri@gmail.com</div>
+            </div>
+        </li>
+
+        <li>
+            <div class="stacked-component">
+                <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                <div class="title">Maitra Khatri</div>
+                <div class="sub-title">maitrakhatri@gmail.com</div>
+            </div>
+        </li>
+
+    </ul>
+
+</body>
+</html>
diff --git a/CSS/style.css b/CSS/style.css
@@ -15,10 +15,14 @@
 @import url(./Components/text-utilities/text-utilities.css);
 @import url(./Components/navigation/navigation.css);
 @import url(./Components/simplified-grid/simplified-grid.css);
+@import url(./Components/list/list.css);
 
 /* FONT */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
 
+/* FONT AWESOME ICONS */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
+
 /* APPLYING FONT */
 * {
     font-family: 'Source Sans Pro', sans-serif;
@@ -33,4 +37,8 @@
     --yellow: #FCA311;
     --gray: #FAFAFA;
     --text-gray: #333333;
-}
+}
+
+.checked {
+    color: orange;
+  }
diff --git a/docs/components/list.html b/docs/components/list.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="gozo-UI | Maitra Khatri">
+    <meta name="description" content="gozo UI is a Simple Ready to use CSS Component Library.">
+    <title>gozo UI | Slider</title>
+    <link rel="stylesheet" href="../docs.css">
+    <link rel="icon" type="image/x-icon" href="../../../assets/gozo-logo-540p.ico">
+</head>
+<body>
+
+    <nav>
+        <div class="nav-header">
+            <a href="../../index.html" rel="noopener noreferrer">gozo</a>
+        </div>
+        <div class="nav-links">
+            <div class="nav-item">
+                <a href="../gettingStarted.html" rel="noopener noreferrer">Get Started</a>
+            </div>
+            <div class="nav-item">
+                <a href="../components.html" rel="noopener noreferrer">Docs</a>
+            </div>
+            <div class="nav-items">
+                <a href="https://github.com/maitrakhatri/gozo-UI" target="_blank" rel="noopener noreferrer"><img src="../../assets/GitHub-Mark-32px.png" alt="GitHub Link"></a>
+            </div>
+        </div>
+    </nav>
+
+    <aside class="sidebar">
+
+        <a href="../gettingStarted.html">Getting Started</a>
+        <a href="../designSystem.html">Design System</a>
+        <a class="sidebar-header" href="../components.html">Components</a>
+        <a class="sidebar-components" href="./alert.html">Alert</a>
+        <a class="sidebar-components" href="./avatar.html">Avatar</a>
+        <a class="sidebar-components" href="./badge.html">Badge</a>
+        <a class="sidebar-components" href="./button.html">Button</a>
+        <a class="sidebar-components" href="./card.html">Card</a>
+        <a class="sidebar-components" href="./image.html">Image</a>
+        <a class="sidebar-components" href="./input.html">Input</a>
+        <a class="sidebar-components" href="./navigation.html">Navigation</a>
+        <a class="sidebar-components" href="./simplified-grid.html">Simplified Grid</a>
+        <a class="sidebar-components" href="./slider.html">Slider</a>
+        <a class="sidebar-components" href="./list.html" id="active">List</a>
+        <a class="sidebar-components" href="./text-utilities.html">Text Utilities</a>
+        <a class="sidebar-components" href="./utilities.html"> Utilities</a>
+    </aside>
+
+    <main>
+        <div id="slider" class="section">
+
+            <h2 class="section-title">List</h2>
+            <h3 class="sub-section-title">Spaced Inline List</h3>
+
+            <div class="component-container">
+                <ul class="list-inline">
+                    <li>Spaced</li>
+                    <li>Inline</li>
+                    <li>List</li>
+                </ul>
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522component-container%2522%253E%250A%2520%2520%2520%2520%253Cul%2520class%253D%2522list-inline%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253ESpaced%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EInline%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%253EList%253C%252Fli%253E%250A%2520%2520%2520%2520%253C%252Ful%253E%250A%253C%252Fdiv%253E" style="width: 411px; height: 299px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>
+            </div>
+
+            <h3 class="sub-section-title">Stacked List</h3>
+
+            <div class="component-container">
+                <ul class="list-stacked">
+                    <li>
+                        <div class="stacked-component">
+                            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                            <div class="title">Maitra Khatri</div>
+                            <div class="sub-title">maitrakhatri@gmail.com</div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <div class="stacked-component">
+                            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                            <div class="title">Maitra Khatri</div>
+                            <div class="sub-title">maitrakhatri@gmail.com</div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <div class="stacked-component">
+                            <img class="avatar avatar-round" src="../../../assets/avatar.svg" alt="avatar">
+                            <div class="title">Maitra Khatri</div>
+                            <div class="sub-title">maitrakhatri@gmail.com</div>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cul%2520class%253D%2522list-stacked%2522%253E%250A%2520%2520%2520%2520%253Cli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522stacked-component%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522avatar%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522sub-title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fli%253E%250A%250A%2520%2520%2520%2520%253Cli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522stacked-component%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522avatar%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522sub-title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fli%253E%250A%250A%2520%2520%2520%2520%253Cli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522stacked-component%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522avatar%2520avatar-round%2522%2520src%253D%2522...%2522%2520alt%253D%2522avatar%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522sub-title%2522%253E...%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fli%253E%250A%2520%2520%2520%2520%250A%253C%252Ful%253E" style="width: 900px; height: 653px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin">
+              </iframe>
+            </div>
+
+        </div>
+    </main>
+</body>
+</html>
diff --git a/docs/components/rating.html b/docs/components/rating.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="gozo-UI | Maitra Khatri">
+    <meta name="description" content="gozo UI is a Simple Ready to use CSS Component Library.">
+    <title>gozo UI | Slider</title>
+    <link rel="stylesheet" href="../docs.css">
+    <link rel="icon" type="image/x-icon" href="../../../assets/gozo-logo-540p.ico">
+</head>
+<body>
+
+    <nav>
+        <div class="nav-header">
+            <a href="../../index.html" rel="noopener noreferrer">gozo</a>
+        </div>
+        <div class="nav-links">
+            <div class="nav-item">
+                <a href="../gettingStarted.html" rel="noopener noreferrer">Get Started</a>
+            </div>
+            <div class="nav-item">
+                <a href="../components.html" rel="noopener noreferrer">Docs</a>
+            </div>
+            <div class="nav-items">
+                <a href="https://github.com/maitrakhatri/gozo-UI" target="_blank" rel="noopener noreferrer"><img src="../../assets/GitHub-Mark-32px.png" alt="GitHub Link"></a>
+            </div>
+        </div>
+    </nav>
+
+    <aside class="sidebar">
+
+        <a href="../gettingStarted.html">Getting Started</a>
+        <a href="../designSystem.html">Design System</a>
+        <a class="sidebar-header" href="../components.html">Components</a>
+        <a class="sidebar-components" href="./alert.html">Alert</a>
+        <a class="sidebar-components" href="./avatar.html">Avatar</a>
+        <a class="sidebar-components" href="./badge.html">Badge</a>
+        <a class="sidebar-components" href="./button.html">Button</a>
+        <a class="sidebar-components" href="./card.html">Card</a>
+        <a class="sidebar-components" href="./image.html">Image</a>
+        <a class="sidebar-components" href="./input.html">Input</a>
+        <a class="sidebar-components" href="./navigation.html">Navigation</a>
+        <a class="sidebar-components" href="./simplified-grid.html">Simplified Grid</a>
+        <a class="sidebar-components" href="./slider.html">Slider</a>
+        <a class="sidebar-components" href="./list.html">List</a>
+        <a class="sidebar-components" href="./rating.html" id="active">Rating</a>
+        <a class="sidebar-components" href="./text-utilities.html">Text Utilities</a>
+        <a class="sidebar-components" href="./utilities.html"> Utilities</a>
+    </aside>
+
+    <main>
+        <div id="slider" class="section">
+
+            <h2 class="section-title">Rating</h2>
+            <p>P.S. you need not to install/import Font Awesome Icons, it is included with the gozo UI package</p>
+
+            <div class="component-container">
+                <div class="rating">
+                    <span class="fa fa-star checked"></span>
+                    <span class="fa fa-star checked"></span>
+                    <span class="fa fa-star checked"></span>
+                    <span class="fa fa-star"></span>
+                    <span class="fa fa-star"></span>
+                </div>
+            </div>
+
+            <div class="code-snippets">
+                <iframe src="https://carbon.now.sh/embed?bg=rgba%28171%2C184%2C195%2C0%29&t=seti&wt=none&l=htmlmixed&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=4x&wm=false&code=%253Cdiv%2520class%253D%2522rating%2522%253E%250A%2520%2520%2520%2520%253Cspan%2520class%253D%2522fa%2520fa-star%2520checked%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253Cspan%2520class%253D%2522fa%2520fa-star%2520checked%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253Cspan%2520class%253D%2522fa%2520fa-star%2520checked%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253Cspan%2520class%253D%2522fa%2520fa-star%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%253Cspan%2520class%253D%2522fa%2520fa-star%2522%253E%253C%252Fspan%253E%250A%253C%252Fdiv%253E" style="width: 600px; height: 299px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>
+            </div>
+
+        </div>
+    </main>
+</body>
+</html>
diff --git a/docs/docs.css b/docs/docs.css
@@ -76,10 +76,11 @@ main {
     width: 8rem;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: .65rem;
     margin-left: 2rem;
     /* margin-top: 2rem; */
     margin-bottom: 1rem;
+    overflow: auto;
 }
 
 .sidebar a {