From 15dfb5dfbc5961b478e0a801a054ca21420292e1 Mon Sep 17 00:00:00 2001 From: Maitra Khatri Date: Thu, 24 Mar 2022 14:44:35 +0530 Subject: [PATCH] feat: list and rating --- CSS/Components/list/list.css | 38 ++++++++++++ CSS/Components/list/list.html | 46 ++++++++++++++ CSS/style.css | 10 +++- docs/components/list.html | 109 ++++++++++++++++++++++++++++++++++ docs/components/rating.html | 76 ++++++++++++++++++++++++ docs/docs.css | 3 +- 6 files changed, 280 insertions(+), 2 deletions(-) create mode 100644 CSS/Components/list/list.css create mode 100644 CSS/Components/list/list.html create mode 100644 docs/components/list.html create mode 100644 docs/components/rating.html diff --git a/CSS/Components/list/list.css b/CSS/Components/list/list.css new file mode 100644 index 0000000..33deff6 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/CSS/Components/list/list.html b/CSS/Components/list/list.html new file mode 100644 index 0000000..11d688a --- /dev/null +++ b/CSS/Components/list/list.html @@ -0,0 +1,46 @@ + + + + + + + List + + + + + + + + + + \ No newline at end of file diff --git a/CSS/style.css b/CSS/style.css index 2754508..11f615a 100644 --- 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; -} \ No newline at end of file +} + +.checked { + color: orange; + } \ No newline at end of file diff --git a/docs/components/list.html b/docs/components/list.html new file mode 100644 index 0000000..54db96b --- /dev/null +++ b/docs/components/list.html @@ -0,0 +1,109 @@ + + + + + + + + + gozo UI | Slider + + + + + + + + + +
+
+ +

List

+

Spaced Inline List

+ +
+
    +
  • Spaced
    • +
  • Inline
    • +
  • List
    • +
+
+ +
+ +
+ +

Stacked List

+ +
+
    +
  • +
    + avatar +
    Maitra Khatri
    +
    maitrakhatri@gmail.com
    +
    +
    • + +
  • +
    + avatar +
    Maitra Khatri
    +
    maitrakhatri@gmail.com
    +
    +
    • + +
  • +
    + avatar +
    Maitra Khatri
    +
    maitrakhatri@gmail.com
    +
    +
    • + +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/docs/components/rating.html b/docs/components/rating.html new file mode 100644 index 0000000..8b08f69 --- /dev/null +++ b/docs/components/rating.html @@ -0,0 +1,76 @@ + + + + + + + + + gozo UI | Slider + + + + + + + + + +
+
+ +

Rating

+

P.S. you need not to install/import Font Awesome Icons, it is included with the gozo UI package

+ +
+
+ + + + + +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/docs/docs.css b/docs/docs.css index 8a83d48..f441eb8 100644 --- 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 {