Merge branch 'typography-and-list' of https://github.com/Shivani-1524…

…/BookyUI_Component_Library into Dev-Branch
Shivani-1524 · Feb 10, 2022 · b9e8669 · b9e8669
2 parents 51ea8b2 + c56d482
commit b9e8669
Show file tree

Hide file tree

Showing 6 changed files with 385 additions and 113 deletions.
diff --git a/Components/Lists/lists.css b/Components/Lists/lists.css
@@ -0,0 +1,36 @@
+.flex-row.list-ex {
+  display: flex;
+  gap: 50px;
+  justify-content: center;
+}
+li {
+  font-size: 1.3rem;
+}
+.styled-list li {
+  padding: 5px 0px;
+}
+
+.list-style-circle {
+  list-style-type: circle;
+}
+
+.list-style-square {
+  list-style-type: square;
+}
+
+.list-style-none {
+  list-style-type: none;
+}
+
+.list-style-roman {
+  list-style-type: upper-roman;
+}
+
+.list-style-letter {
+  list-style-type: upper-alpha;
+}
+
+.list-inline li {
+  display: inline;
+  padding: 0px 5px;
+}
diff --git a/Components/Typography/typography.css b/Components/Typography/typography.css
@@ -0,0 +1,117 @@
+.typ-ex-grid {
+  display: grid;
+  grid-template-columns: max-content min-content;
+  grid-template-rows: 50px;
+  align-items: center;
+  gap: 30px;
+}
+
+.tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: max-content;
+  padding: 5px 7px;
+  height: 30px;
+  background-color: var(--yellow-color-light);
+  border: 2px solid var(--orange-color);
+  border-radius: 10px;
+}
+
+.tag p {
+  text-align: center;
+}
+
+p,
+a,
+h1,
+h2,
+h3,
+li,
+button {
+  font-family: "Open Sans", sans-serif;
+}
+
+.lg-title {
+  font-size: 3rem;
+  font-family: "Inter", sans-serif;
+  font-weight: 800;
+}
+.rg-title {
+  font-size: 2rem;
+  font-family: "Inter", sans-serif;
+  font-weight: 700;
+}
+.md-title {
+  font-size: 1.5rem;
+  font-family: "Inter", sans-serif;
+  font-weight: 700;
+}
+.sm-title {
+  font-size: 1.2rem;
+  font-family: "Inter", sans-serif;
+  font-weight: 800;
+}
+.xsm-title {
+  font-size: 12px;
+  font-family: "Inter", sans-serif;
+  font-weight: 800;
+}
+
+.lg-booky-title {
+  font-size: 2.5rem;
+  font-family: "Libre Baskerville", serif;
+}
+.rg-booky-title {
+  font-size: 2rem;
+  font-family: "Libre Baskerville", serif;
+}
+
+.md-booky-title {
+  font-size: 1.5rem;
+  font-family: "Libre Baskerville", serif;
+}
+
+.sm-booky-title {
+  font-size: 1.2rem;
+  font-family: "Libre Baskerville", serif;
+}
+
+.rg-p {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.4rem;
+}
+.sm-p {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.2rem;
+}
+.xsm-p {
+  font-family: "Open Sans", sans-serif;
+  font-size: 12px;
+}
+
+.grey-txt {
+  color: var(--dark-grey);
+}
+.light-grey-txt {
+  color: var(--grey);
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.center-txt {
+  text-align: center;
+}
+
+.striked-txt {
+  text-decoration: line-through;
+}
+
+.violet-txt {
+  color: var(--violet-color);
+}
+.orange-txt {
+  color: var(--orange-color);
+}
diff --git a/Components/components.css b/Components/components.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Libre+Baskerville:wght@400;700&family=Open+Sans:wght@300;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Libre+Baskerville:wght@400;700&family=Open+Sans:wght@300;400;500;600;700&display=swap");
 
 @import "./SideNav/sidenav.css";
 @import "./Footer/footer.css";
@@ -14,6 +14,8 @@
 @import "./Input/input.css";
 @import "./Slider/slider.css";
 @import "./Toast/toast.css";
+@import "./Typography/typography.css";
+@import "./Lists/lists.css";
 
 html {
   overflow: scroll;
@@ -65,70 +67,6 @@ body {
   font-size: 13px;
 }
 
-p,
-a,
-h1,
-h2,
-h3,
-button {
-  font-family: "Open Sans", sans-serif;
-}
-
-.md-title {
-  font-size: 3rem;
-  font-family: "Inter", sans-serif;
-  font-weight: 800;
-}
-.rg-title {
-  font-size: 1.5rem;
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-}
-.sm-title {
-  font-size: 1.2rem;
-  font-family: "Inter", sans-serif;
-  font-weight: 800;
-}
-.xsm-title {
-  font-size: 12px;
-  font-family: "Inter", sans-serif;
-  font-weight: 800;
-}
-
-.rg-booky-title {
-  font-size: 1.5rem;
-  font-family: "Libre Baskerville", serif;
-  font-weight: 700;
-}
-
-.md-booky-title {
-  font-size: 2.5rem;
-  font-family: "Libre Baskerville", serif;
-}
-
-.sm-booky-title {
-  font-size: 1.4rem;
-  font-family: "Libre Baskerville", serif;
-}
-
-p.rg-p {
-  font-size: 1.4rem;
-}
-p.sm-p {
-  font-size: 1.2rem;
-}
-p.xsm-p {
-  font-size: 13px;
-}
-
-.grey-txt {
-  color: var(--dark-grey);
-}
-
-.bold {
-  font-weight: 700;
-}
-
 /* utilities */
 .mg-t-50 {
   margin-top: 50px;