From 023e5ae3a60d67f038484bedbc02bcfceda0def2 Mon Sep 17 00:00:00 2001 From: vill Date: Thu, 25 Mar 2021 23:58:47 +0530 Subject: [PATCH 01/22] feat: added alert and avatar --- src/App.js | 16 +- src/components/Example.js | 25 ++ src/components/alerts/Alert.js | 300 +++++++++++++++++++++ src/components/avatar/Avatar.js | 77 ++++++ src/components/badges/Badge.js | 152 +++++++++++ src/css/alert.css | 163 +++++++++++ src/css/avatar.css | 57 ++++ src/css/badge.css | 74 +++++ src/css/style.css | 28 +- src/css/utility.css | 460 ++++++++++++++++++++++++++++++++ src/images/avatar.jpeg | Bin 0 -> 6893 bytes src/images/user(1).svg | 1 + src/images/user.svg | 1 + src/index.html | 5 + 14 files changed, 1349 insertions(+), 10 deletions(-) create mode 100644 src/components/Example.js create mode 100644 src/components/alerts/Alert.js create mode 100644 src/components/avatar/Avatar.js create mode 100644 src/components/badges/Badge.js create mode 100644 src/css/alert.css create mode 100644 src/css/avatar.css create mode 100644 src/css/badge.css create mode 100644 src/css/utility.css create mode 100644 src/images/avatar.jpeg create mode 100644 src/images/user(1).svg create mode 100644 src/images/user.svg diff --git a/src/App.js b/src/App.js index 8504268..e5fd2fa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,22 @@ import React from "react"; import "./css/style.css"; +// import Example from "./components/Example"; +import Avatar from "./components/avatar/Avatar"; +import Alert from "./components/alerts/Alert"; +import Badge from "./components/badges/Badge"; + export default function App() { return ( -
-

test

+
+

Monochrome.js

+ +
+
+ +
+
+
); } diff --git a/src/components/Example.js b/src/components/Example.js new file mode 100644 index 0000000..52440e9 --- /dev/null +++ b/src/components/Example.js @@ -0,0 +1,25 @@ +import React from "react"; + +export default function Example() { + return ( +
+
+ {/* alert */} + {/* badge */} + {/* button */} + {/* cards */} + {/* img */} + {/* input */} + {/* list */} + {/* dropdown */} + {/* navigation */} + {/* modal */} + {/* rating */} + {/* slider */} + {/* toast/snackbar */} + {/* typography */} + {/* grid */} + {/* flex */} +
+ ); +} diff --git a/src/components/alerts/Alert.js b/src/components/alerts/Alert.js new file mode 100644 index 0000000..3902a1c --- /dev/null +++ b/src/components/alerts/Alert.js @@ -0,0 +1,300 @@ +import React from "react"; + +export default function Alert() { + return ( +
+

Alert

+

Takes width of parent container

+

Alert with different severity

+
+ {" "} +
This is an error alert!
+
+
+ {" "} +
This is a warning alert!
+
+
+ {" "} +
This is an info alert!
+
+
+ {" "} +
This is a success alert!
+
+ {/* ---------------------------rounded------------------------------- */} +

Rounded Alerts

+
+
This is an error alert!
+
+
+
This is a warning alert!
+
+
+
This is an info alert!
+
+
+
This is a success alert!
+
+ {/* ------------------------------titile------------------------------ */} +

Alerts with title

+
+
+
Error
+ This is an error alert! +
+
+
+
+
Warning
+ This is a warning alert! +
+
+
+
+
Info
+ This is an info alert! +
+
+
+
+
Success
+ This is a success alert! +
+
+ {/* ---------------------icon------------------------------------- */} +

Alerts with icon

+
+
+ +
+
This is an error alert!
+
+
+
+ +
+
This is a warning alert!
+
+
+
+ +
+
+
Info
+ This is an info alert! +
+
+
+
+ +
+
+
Success
+ This is a success alert! +
+
+ {/* ---------------------actions------------------------------------- */} +

Alerts with actions

+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ + +
+
+ {/* ---------------------actions------------------------------------- */} +

Alerts with outline variant

+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ +
+
+ {/* ---------------------light------------------------------------- */} +

Alerts with light scheme

+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ +
+
+
+ ); +} diff --git a/src/components/avatar/Avatar.js b/src/components/avatar/Avatar.js new file mode 100644 index 0000000..1624f96 --- /dev/null +++ b/src/components/avatar/Avatar.js @@ -0,0 +1,77 @@ +import React from "react"; +import avatarImg from "../../images/avatar.jpeg"; + +export default function Avatar() { + return ( +
+

Avatar

+

Avatar with Images

+
+ +
+
+ +
+
+ +
+

Avatar with text

+
Sk
+
NG
+
FD
+

Avatar in different sizes

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

Avatar with Badges

+ {/* ----------------------------todo---------------------------------- */} + {/*
+ +
+
+ +
+
+ +
*/} +

Avatar with Icons

+
+ +
+
+ +
+
+ +
+

Avatar with Square Variants

+
+ S +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/components/badges/Badge.js b/src/components/badges/Badge.js new file mode 100644 index 0000000..84aeb0b --- /dev/null +++ b/src/components/badges/Badge.js @@ -0,0 +1,152 @@ +import React from "react"; +import avatarImg from "../../images/avatar.jpeg"; + +export default function Badge() { + return ( +
+

Badges

+

Badges with icon

+
+ + 9 +
+
+ + 10+ +
+ {/* -------------------badge with icon in different sizes---------------- */} +

Badges with different sizes

+
+ + 1 +
+
+ + 2 +
+
+ + 3 +
+ {/* --------------------------badge with dot-------------- */} +

Badge with only dot

+
+ + +
+
+ + +
+
+ + +
+ {/* -------------------badge alignment---------------- */} +

Badges with different alignment

+
+ + 1 +
+
+ + 2 +
+
+ + 3 +
+ {/* -------------------badge avatar---------------- */} +

Badges with avatar

+
+ SK + 1 +
+
+ + 2 +
+
+ + 3 +
+
+ ); +} diff --git a/src/css/alert.css b/src/css/alert.css new file mode 100644 index 0000000..e215dd8 --- /dev/null +++ b/src/css/alert.css @@ -0,0 +1,163 @@ +.alert { + padding: 1rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.4; + letter-spacing: 0.01em; + display: flex; + align-items: center; + position: relative; +} +.alert--error { + background-color: rgb(24, 6, 5); + color: rgb(250, 179, 174); +} +.alert--error > .alert__icon > svg { + fill: #f44336; +} +.alert--warning { + background-color: rgb(25, 15, 0); + color: rgb(255, 213, 153); +} +.alert--warning > .alert__icon > svg { + fill: #ff9800; +} +.alert--info { + background-color: rgb(3, 14, 24); + color: rgb(166, 213, 250); +} +.alert--info > .alert__icon > svg { + fill: #2196f3; +} +.alert--success { + background-color: rgb(7, 17, 7); + color: rgb(183, 223, 185); +} +.alert--success > .alert__icon > svg { + fill: #4caf50; +} +.alert--rounded { + border-radius: 4px; +} +.alert--rounded-full { + border-radius: 12px; +} +.alert__msg { + display: flex; + flex-direction: column; +} +.alert__title { + font-size: 1rem; + font-weight: 500; + line-height: 1.5; + letter-spacing: 0.009em; + margin-bottom: 0.35em; +} +.alert__icon { + font-size: 22px; + opacity: 0.9; + padding: 4px 0; + margin-right: 12px; + display: flex; + justify-content: center; + align-items: center; + align-self: flex-start; +} +.alert__icon > svg { + /* fill: currentColor; */ + width: 1em; + height: 1em; + flex-shrink: 0; + display: inline-block; +} + +.alert__actions { + margin-left: auto; + display: flex; + align-items: center; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.43; + letter-spacing: 0.01em; + gap: 0.5em; +} +.alert__actions button { + border-style: none; + /* padding: 3px; */ + /* font-size: 1.1rem; */ + color: inherit; + flex: 0 0 auto; + overflow: visible; + text-align: center; + background-color: transparent; + border: 1px solid transparent; + font-weight: 500; + line-height: 1.75; + border-radius: 4px; + letter-spacing: 0.02em; + text-transform: uppercase; + cursor: pointer; + margin: 0; + display: inline-flex; + outline: 0; + position: relative; + align-items: center; + justify-content: center; + text-decoration: none; + font-size: 0.9rem; + padding: 6px 8px; +} +.alert__actions button:hover { + background-color: rgba(255, 255, 255, 0.1); + /* opacity: 0.3; */ +} +.alert__actions svg { + fill: currentColor; + /* background-color: transparent; */ + width: 1.325em; + height: 1.325em; + display: inline-block; +} + +/* alert-light */ +.alert--light.alert--error { + background-color: rgb(253, 236, 234); + color: rgb(97, 26, 21); +} +.alert--light.alert--warning { + background-color: rgb(255, 244, 229); + color: rgb(102, 60, 0); +} +.alert--light.alert--info { + background-color: rgb(232, 244, 253); + color: rgb(13, 60, 97); +} +.alert--light.alert--success { + background-color: rgb(237, 247, 237); + color: rgb(30, 70, 32); +} + +/* alert-outline */ +.alert.alert--outline { + background-color: transparent; +} +.alert--error.alert--outline { + border: 1px solid #f44336; + /* color: rgb(219, 156, 152); */ + color: #b8473f; +} +.alert--warning.alert--outline { + border: 1px solid #ff9800; + color: #946319; +} +.alert--info.alert--outline { + border: 1px solid #2196f3; + color: #2069a5; +} +.alert--success.alert--outline { + border: 1px solid #4caf50; + color: #377c3a; +} +.alert.alert--light button:hover { + border: 1px solid rgba(0, 0, 0, 0.1); +} diff --git a/src/css/avatar.css b/src/css/avatar.css new file mode 100644 index 0000000..fb469e6 --- /dev/null +++ b/src/css/avatar.css @@ -0,0 +1,57 @@ +/* + sm -> 24 + md -> 36 - normal + lg -> 48 + xl -> 72 + 2xl -> 98 +*/ +.avatar { + border-radius: 50%; + width: 36px; + height: 36px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.3); +} +.avatar > * { + width: 100%; + border-radius: 50%; +} +.avatar--icon > * { + width: 80%; +} +.avatar--square { + border-radius: 0; +} +.avatar--square > * { + border-radius: 0; +} +.avatar--rounded { + border-radius: 0.5rem; + /* border-radius: 8px; */ +} +.avatar--rounded > * { + border-radius: 0.25rem; +} + +.avatar--sm { + width: 24px; + height: 24px; +} +.avatar--md { + width: 36px; + height: 36px; +} +.avatar--lg { + width: 48px; + height: 48px; +} +.avatar--xl { + width: 72px; + height: 72px; +} +.avatar--2xl { + width: 98px; + height: 98px; +} diff --git a/src/css/badge.css b/src/css/badge.css new file mode 100644 index 0000000..a375c05 --- /dev/null +++ b/src/css/badge.css @@ -0,0 +1,74 @@ +.badge-wrapper { + position: relative; + display: inline-block; +} +.badge { + position: absolute; + top: 0; + right: 0; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + min-width: 20px; + height: 20px; + /* background-color: red; */ + /* transform: scale(1) translate(50%, -50%); */ + transform: scale(1) translate(40%, -40%); + transform-origin: 100% 0%; + font-size: 0.75rem; + padding: 0 6px; + line-height: 1; + font-weight: 600; +} +.badge--sm { + min-width: 16px; + height: 16px; + /* padding: 4px; */ + font-size: 0.6rem; +} +.badge--md { + min-width: 20px; + height: 20px; + /* padding: 6px; */ + font-size: 0.75rem; +} +.badge--lg { + min-width: 24px; + height: 24px; + /* padding: 8px; */ + font-size: 0.9rem; +} + +.badge-dot { + width: 16px; + height: 16px; + border: 3px outset var(--black-color1); + border-radius: 50%; + position: absolute; + top: 0; + right: 0; + transform: scale(1) translate(30%, -30%); + transform-origin: 100% 0%; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + /* todo: make this border dynamic */ +} +.badge-dot.badge-dot--sm { + width: 12px; + height: 12px; +} +.badge-dot.badge-dot--lg { + width: 20px; + height: 20px; + /* min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; */ +} + +.badge-wrapper .badge--bottom { + transform: scale(1) translate(40%, 100%); +} diff --git a/src/css/style.css b/src/css/style.css index c82a21d..4bc80e1 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,8 +1,7 @@ -:root { - --text-color: black; - --bg-color: #e5e7eb; -} - +@import url("./utility.css"); +@import url("./avatar.css"); +@import url("./alert.css"); +@import url("./badge.css"); /* border box */ html { box-sizing: border-box; @@ -15,7 +14,20 @@ html { body { margin: 0; - font: 16px/1.7 "Source Sans Pro", Helvetica, Helvetica Neue, Arial, sans-serif; - color: var(--text-color); - background-color: var(--bg-color); + /* font: 16px/1.7 "Source Sans Pro", Helvetica, Helvetica Neue, Arial, sans-serif; */ + font: 16px/1.7 "Inter", sans-serif; + /* color: var(--white-color1); */ + /* background-color: var(--bg-color); */ +} +h1 { + margin: 0; +} + +.App { + padding: 2rem; + width: 100%; + min-height: 100vh; + background-color: var(--black-color1); + /* background-color: var(--white-color1); */ + color: var(--white-color1); } diff --git a/src/css/utility.css b/src/css/utility.css new file mode 100644 index 0000000..bcbe520 --- /dev/null +++ b/src/css/utility.css @@ -0,0 +1,460 @@ +:root { + --text-color: black; + --bg-color: #e5e7eb; + + --white-color1: #f1f5f6; + --white-color2: #f3f2f3; + --white-color3: #f6f6f6; + + --black-color1: #131213; + --black-color2: #0b0c0d; + --black-color3: #040404; + + --blue-color1: #1876d2; +} + +/* ---------------------------------------utitlity classes--------------------------------------- */ + +/* bg-colors */ +.bg-white { + background-color: var(--white-color3); +} +.bg-black { + background-color: var(--black-color3); +} +.bg-blue { + background-color: var(--blue-color1); +} + +/* text-colors */ +.text-white { + color: var(--white-color2); +} +.text-black { + color: var(--black-color2); +} + +/* icon */ +.icon-sm { + width: 24px; + height: 24px; +} +.icon-md { + width: 36px; + height: 36px; +} +.icon-lg { + width: 48px; + height: 48px; +} +.icon-xl { + width: 72px; + height: 72px; +} +.icon-2xl { + width: 98px; + height: 98px; +} + +/* fill */ +.fill-white { + fill: var(--white-color1); +} +.fill-black { + fill: var(--black-color1); +} + +/* margin */ +.mr-4 { + margin-right: 1rem; +} + +/* font */ + +/* breakpoints */ + +/* container */ +.container { +} +.container-sm { + max-width: 640px; +} +.container-md { + max-width: 768px; +} +.container-lg { + max-width: 1024px; +} +.container-xl { + max-width: 1280px; +} +.container-2xl { + max-width: 1536px; +} + +/* box sizing */ +.box-border { + box-sizing: border-box; +} +.box-content { + box-sizing: content-box; +} + +/* display */ +.hidden { + display: none; +} +.block { + display: block; +} +.inline-block { + display: inline-block; +} +.inline { + display: inline; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} + +/* table */ +/* todo inlcude table if need be */ + +/* float */ +.float-right { + float: right; +} +.float-left { + float: left; +} +.float-none { + float: none; +} + +/* clear */ +.clear-left { + clear: left; +} +.clear-right { + clear: right; +} +.clear-both { + clear: both; +} +.clear-none { + clear: none; +} + +/* object-fit */ +.object-contain { + object-fit: contain; +} +.object-cover { + object-fit: cover; +} +.object-fill { + object-fit: fill; +} +.object-none { + object-fit: none; +} +.object-scale-down { + object-fit: scale-down; +} + +/* object-position */ +/* todo */ + +/* overflow */ +.overflow-auto { + overflow: auto; +} +.overflow-hidden { + overflow: hidden; +} +.overflow-visible { + overflow: visible; +} +.overflow-scroll { + overflow: scroll; +} +.overflow-x-auto { + overflow-x: auto; +} +.overflow-y-auto { + overflow-y: auto; +} +.overflow-x-hidden { + overflow-x: hidden; +} +.overflow-y-hidden { + overflow-y: hidden; +} +.overflow-x-visible { + overflow-x: visible; +} +.overflow-y-visible { + overflow-y: visible; +} +.overflow-x-scroll { + overflow-x: scroll; +} +.overflow-y-scroll { + overflow-y: scroll; +} + +/* overscroll */ +/* todo */ + +/* position */ +.static { + position: static; +} +.fixed { + position: fixed; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.stickt { + position: sticky; +} + +/* top right bottom left */ +/* todo */ + +/* visibility */ +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} + +/* zindex */ +.z-0 { + z-index: 0; +} +.z-10 { + z-index: 10; +} +.z-20 { + z-index: 20; +} +.z-30 { + z-index: 30; +} +.z-40 { + z-index: 40; +} +.z-50 { + z-index: 50; +} +.z-auto { + z-index: auto; +} + +/* ------------------------------flexbox--------------------------------- */ +/* display */ +/* .flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} */ + +/* flex-direction */ +.flex-row { + flex-direction: row; +} +.flex-row-reverse { + flex-direction: row-reverse; +} +.flex-col { + flex-direction: column; +} +.flex-col-reverse { + flex-direction: column-reverse; +} + +/* flex-wrap */ +.flex-wrap { + flex-wrap: wrap; +} +.flex-wrap { + flex-wrap: wrap-reverse; +} +.flex-nowrap { + flex-wrap: nowrap; +} + +/* flex */ +.flex-1 { + flex: 1 1 0%; +} +.flex-auto { + flex: 1 1 auto; +} +.flex-initial { + flex: 0 1 auto; +} +.flex-none { + flex: none; +} + +/* flex-grow */ +.flex-grow { + flex-grow: 1; +} +.flex-grow-0 { + flex-grow: 0; +} + +/* flex-shrink */ +.flex-shrink { + flex-shrink: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} + +/* order */ +.order-1 { + order: 1; +} +.order-2 { + order: 2; +} +.order-3 { + order: 3; +} +.order-4 { + order: 4; +} +.order-5 { + order: 5; +} +.order-6 { + order: 6; +} +.order-7 { + order: 7; +} +.order-8 { + order: 8; +} +.order-9 { + order: 9; +} +.order-10 { + order: 10; +} +.order-11 { + order: 11; +} +.order-12 { + order: 12; +} + +/* ------------------------------------------------grid------------------------------------- */ +/* todo */ + +/* -------------------------------------------box-alignment--------------------------------- */ + +/* --------------------------------------spacing------------------------------------------- */ +.p-0 { + padding: 0px; +} +.p-1 { + padding: 0.25rem; +} +.p-2 { + padding: 0.5rem; +} +.p-3 { + padding: 0.75rem; +} +.p-4 { + padding: 1rem; +} +.p-5 { + padding: 1.25rem; +} +.p-6 { + padding: 1.5rem; +} +.p-7 { + padding: 1.75rem; +} +.p-8 { + padding: 2rem; +} +.p-9 { + padding: 2.25rem; +} +.p-10 { + padding: 2.5rem; +} +.p-11 { + padding: 2.75rem; +} +.p-12 { + padding: 3rem; +} +.p-14 { + padding: 3.5rem; +} +.p-16 { + padding: 4rem; +} +.p-20 { + padding: 5rem; +} +.p-24 { + padding: 6rem; +} +.p-28 { + padding: 7rem; +} +.p-32 { + padding: 8rem; +} +.p-36 { + padding: 9rem; +} +.p-40 { + padding: 10rem; +} +.p-44 { + padding: 11rem; +} +.p-48 { + padding: 12rem; +} +.p-52 { + padding: 13rem; +} +.p-56 { + padding: 14rem; +} +.p-60 { + padding: 15rem; +} +.p-64 { + padding: 16rem; +} +.p-72 { + padding: 18rem; +} +.p-80 { + padding: 20rem; +} +.p-96 { + padding: 24rem; +} diff --git a/src/images/avatar.jpeg b/src/images/avatar.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..c5421e9bd841debbf33823ba85d375d79c9be1eb GIT binary patch literal 6893 zcmb_=byQUE*YBAbhDK)S?r!N+x@$-&Vd#_?QW23xLRvt&JEdE?M5Ie3qy!{HL=o=z z^}WCEd)K<}U-$0kJnMYce)f9K=j^l3vp#FzF5Z3uVCu?h$^Zxi0#wlhxZMQPs3|B| z>gwqzt7$5s7XSc^?`q?Q0>c2n?UA>ao{Buf0~1pQtW^L6Py!Hu6OcgKpgiPsbv1$i z(Z0{4qtQ0Q`)9BJG3@`ofNN`qvOzChqvt~#4=-;30GXpPo}ahJAMA+6B-Sqf;J`oF z3r!I1Pxyl!{^Fv4V*cXRe_{;u6womfXe{gS->~(6!~gYMbO->k5&U!e|7+fM{%HOH zp!NU&{^a!U?*HcMUmt`FO+g6#EsFm2xfcL{_yyXZ@UPE00{~jW0f1upUmr^z01$=& zK=YK1kC*S?X8=^_`#5M6VgpUWcES4&yHARs7G^xYX*{49=KJRU=%>oWtZ zoO+(l^zRGY-rlYNVE_~p6AK3m7Y`4Y;0}5a6Tx6a#I&Sj=t0X(%|MO5xY_vFn9);F zR6syfQAhs1ypE-zp{2iJsT_wX2SW3-Dn?)RSoenEHwX*Dz4lKws23u!MU^fJ(7jQIL z_{6i31{x~%>V)B@uAtbIVdBZeNj;hnX20>apj<0^BUP^Mk!gJr_=<@H z1o#(()9j{@ysllddOUV!Kzy3W6=vJ8S+6z#J6fOU8{g~F&L;vVzg5QauAhnhq(bOw zT)pOMTxf|an}MCq=0ihca(&|#wCIPYiK+24EogR>l%6Rm-W;UAjo+a+UA4T18{Yh` z86!!Hi4sUO2)`4!OCZ=+xp3^}&AB-DL2>j-)KRUKF)kXVoIGuOO>Dy)9X7*d2V?ba z#KRq12#~M-kkolvHTRvstv*WLA5ZZq(}s!*>ub+P`}D;}68c^FZBeY?2Pa?RUix%eGWmflyAbREsVj;gi;{LdJS~U-W(hiX&L3Bz*E4c3n=-LO*1TETkWG zVS9HX*~9wdQcYC6#0@37YIRNE<29(qZ=OdPY~zK6G-^wHmIy;uQH$&f4}NUcsA2ET z@eOixu*x11!t-gG)uj2vl93Y9a1odg&>yd0G|f3e)Y2gwtBw$q)!`YFvfg7L?%CRZ zLSo6VT+@8T;!=~%);B#05?auQ>kHDv@UvQOkA4Z?^qF*4zbD@#KydKkSItLu)Q~Tw z`AQb6J2}pRmS$M7wUco9D*^|-)bz%bd4YHfID&HJ|srVrN9xo=oB$9Q0}8>!`lp!woQA*-0Q3z2R*@7fj-sn4ysWaK!3Sc+|)71IDXWohkhNCO~)$}}gWHvLFIk}IIN3*W@aPvZ^B z8K=OE=?J%NOh~asqGnK?X2zkdXB&xTAp-+I5HJP=69WT+1^q+j4=oHhjEM0rR1Sej z%p{2PWO$yK&#Y%%Pa@n$DkLJWFukGgg=#qYum2BpAJjmA2)DCpXfp$XO}Tk0#<`lw zObiqIE1C(qCRee$bE1Fgu2~)a+0Db8gUXkNI{B|S_SVR~hqLKqjywHM z+CS0RavV5soQ?fB^me=E4)?5=>L?F(&3ehy^mdsEQ_QTAo7*{ppqD#Ve4T>CGor=B zvZb^lFrJ_7s>V-O6(ch^mj#7~-+Qqgq%P^ilFl$xyR$L zo1CWRfi{!D^|+Tx@aG&$W?-1Cl}bfJ>$InOq?Vb`+SLeMA7+#4M0~wL>8Y8QYQx89&3eMXpt z?DeV0nklTIp{2h@RKds9oDch;f_YRrZf}#=%!|a}sE!eVsB)rzFgg2sP$H4nSyHWaxJ)zmE?(#xvCUU2JsT>A#(FA+h3hoFoK?jneu%&@l-j3~& zZww~z@mmHAVSK28LxIPfZ+oTNXw-NWxDcnNtQigB9z!^W*1IMx1;-gb z>Abnxoax&|{7b$5&+RoE)!9R*O&|9=?L%pd84C`gjy(81O~v`VRh)*Ws;cUZ zipaMHr=bz(GVYT(`K`wAZlpSP!cPg0a={7Qf(Qw%vp9pEM}cNs2nQ%`%77J8J&Yn7u+#bGBAnj};+o ztbE-QlWg*!eV)T@smzTm$r#y7nPH8^J^g(rW+ZQL@>8M1in4O+LMI*wPkx`TbylK` zM$fFz>qFAyq1Gi6vpE~f1(Ur~rMZHm4c@pGq!jo;-bA`Qo)T(wOGlkQ=wHBkJERDz1sW?Q!t zutbjYBCMg38);`}`=gJn>4HKS!`h`q8B+WPL5QumXyN%#ia#JNyI1tav+WiLr$%NU z3-%1@y#D=@-Q$Yk6(WBpj>BU~tuNCDapFG_OfLR}OPl&_*_j%TL?gBNmvcn=I0y;t ztZv}yGcm)9b*+ktPcwP%^=J>vrB>vlNGzXc9j!6x)}3-E*T+gvp8U$E03N#*#r0ms zt>;!0Y?9d<$4=0+wJZsyQJUniTlBQFliWd^%sX_1Z1IAV-Llp{j%79!kkhN@{&Y z5qRPD5<&Zoel|a~hORt=ZZ4UP7Z+Ut}HYL4CF*Q3np zTQhHMj{Ey0!h65XX?URGmVLCx$E~v+@N4kG7pByh(`g>fcur658Pb{?-gR)8@a{dV zUO0H+43ab$#gPmtY;bCNTP_=kzG*g8y!sQ2A`M}!uj^z$@9ykq3pwzmWee}eHxayngcR3 z#~j!1?A)bLoAhwvhEBSOgS7lq*si8U#P_GLl8kb{}}){u(ke zzXcAp&!O@=Vtw6BoG>|e!Bj^+93%6^6Q93D2d> z*IB3dvuh>cX7P9ItS*w-wVM=-?Ob2@_Mp9qipAKZVE=7(+CE(~i@b5IbL4 zs~ZMdUbaQO0jTgd${fe-yi-U5Jfiyo7v{vgmndvzj_=~r&O1; zuPko9WEsb9VM1x0_#$N$XCNSwg6Mo}f-fF{d(rlIfjYP;u9qG*GoLTn7raanpNcr+ zb~To(|Ctc>>EWuv`$HRMT=u#kW-D-Q*aHKXGCbYI4ROl>+r2j9CwwL^MPO!dv()sT zS&4r3#mnCn>o>m=g{3Z{u&b`M$yeJ8JcWj$FJg0k9tjqGdN5Jq(eT<2mV|pj5DCYR zVwI?zx2_@}pAMut$L4yp5GA-NjEubnB6+k6C{d^=K9>PvN}2ID=BXWi#1yHImJ~4R zFE~Yvo_tWOe-1UU@DB^fkNt_lfVP`6_c9@0L_e|pp;gzcn&*#WpdX#kWZPEzBabkw zOnQkRs8)kgrN_RbYNIGh4sPv?jhl8KN!uUpZrFu<3RL@zrk#A1PFMQTU{q>cWd(}9> z!(!1@9n8Ii(f$DMT*LW(EefEu5p;0g9 z4B8LPswZTr?++-3+N4rN;*zWjoWS}A1oS=0xX2%LZ#ZtJ3?A;VS>0T650sD7e_9|{ zbmZ2k{Ut=Vc|G{;7N9ug>N}K3qhmU3m!jaN8SCq~uPeUDH-^%sQKt9w_@?2Uv7cLn zH=nf9ICz(D>~kD1(Xq!tq8NpB<+BY2^RYqX>s8@{ANwgYI~GA(VZ+hrQy>b~TzIu< z(v*ify>}cUk>*s^OjEccSW{(-CEl+_xUH^Em|FKK_zeq{o7p9#WR32NWg4Z=T|ySk zu>oXSTkID8qJQ^qjYYqyhc>w#OPHdgZ}mMH&8l7vYCL8ToHG?VwMV2uYnVa&@0Co) zID#I$+^79qLO<(uB9AZA+s*WBTx$4Q0o>^F3Z-@5AJW)rW<0J^HuG7ith`gcn3U06 zcZO2xN6&yueuliU4Nbe`CZ(1xUgPK{*~lwp>MDE{15z@Rac>lw)>Zir10N5=-ApmRXXjO*G5E8ix*g=!IkVP-n zE*rs(R!DE!z@DvDZ=>V2~AIBcU5QewIpjtCW)qv2DU8~4J&K*tI?HO z820Pxnn--rEyY5lNoAT~s1ErpP$U+#NE1L{f(`Apw#>9Qeo^Ow_nFGhzL{k4TYNg1 zZl|oduG8*4>layw&bwV}SmswDo4Vo7`TJw*BA`0H*4gnAT6O57vd(x}ghb&Fg`?enD2WYyP6|X%aTIL;d5I-OT5H+kBa^^RSZ_6rF95*fp zp3p80}jey!Oqg-$d<5+B5a% zoRT89z>*?^q)Yyn(&$f4iHqqvwmKzT&#KhRf|onxluYb&BxQ3(t?7uD;M%?PsV|~D zB#9Ny%cdhKu4Nfg{o?aTy*n)ehfjjeLbpP!?4-=CTh2l1len10@`E=!46*NZw$d34 zD#x}y{BVZXuzC0RWjrXV<;^98^Wt*em8~tC8kn`eymQaW0mL~o(bT*>tgqU0jGUa$ z*oSEyV|l%p$~q7?w`6Si6xjvoU4nbtkUw+$B++rMN)Kx`j+aRg;*N7{+(EdSR?NDz zCHik=pWjVLIVx1?gNJ5>e%0&N7*v#V=?iO3iGNVPH-M6|Gi=b)BzVddo?_1^ z9<*3Kxc1D@DGdsLQTo zo_+u;0MT^{_STB+AqBhwCPT1V<*Z*)j06?vO9>3cd=F8TdZLK;7}cSE_lce)RhcuR zMC%wPP3;UBDuDLqQ$LY=PwVu^mpIs?zvnQWQfG#bh~Ry0d5r4_YMR|#ScCLll$Sl< zeAh{oW+{Y)XO+Nd9cKdX*FmAB7atq|gCGzvy5IGu)q^$=82HoeVZ2Ku#~>gGB}Sk% z7!$Ls9Uq4z-9^Sh8t#4?9EQow z2tSjqtFV3|W`u)!Dje1b1Gb0T@=fzOf~?Ll^S*LE4zmazMh%r<+f6>MMf6L-aC+I@ z3UYl7UnTXkagJd9m_a9;<4?lDPzVO(e|NC|Bpi-`?ykwf7zChb%}bJ)FZj3R_b1i+ zwLZn2l2@YpX}{j`1R8agMwF?%DGk-*F*A8l;55s8u~v!@;KEB#Ec;fS0uRs>Y&v># zK{lCK{YYBe+4({~M=srNTsMFFZB$iz?(^XTK@NbT{=nm1_A(qjvNvXaeIu*faRecvazJo?JK?m@D)kczHQz9IPt%wBL%7 vRg+Q(0@7 literal 0 HcmV?d00001 diff --git a/src/images/user(1).svg b/src/images/user(1).svg new file mode 100644 index 0000000..b6a6590 --- /dev/null +++ b/src/images/user(1).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/user.svg b/src/images/user.svg new file mode 100644 index 0000000..04ee9b7 --- /dev/null +++ b/src/images/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 0cb1bea..1a2870c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,11 @@ Monochrome.css + +
From 7fc9ddc56030c2d3abfa426685d602c2be703b11 Mon Sep 17 00:00:00 2001 From: vill Date: Fri, 26 Mar 2021 20:11:41 +0530 Subject: [PATCH 02/22] feat: added buttons --- src/App.js | 4 + src/components/alerts/Alert.js | 79 +++++++- src/components/avatar/Avatar.js | 29 +-- src/components/badges/Badge.js | 18 +- src/components/buttons/Button.js | 179 ++++++++++++++++++ src/css/alert.css | 16 ++ src/css/badge.css | 14 +- src/css/button.css | 303 +++++++++++++++++++++++++++++++ src/css/style.css | 1 + src/css/utility.css | 8 + 10 files changed, 634 insertions(+), 17 deletions(-) create mode 100644 src/components/buttons/Button.js create mode 100644 src/css/button.css diff --git a/src/App.js b/src/App.js index e5fd2fa..131a2a7 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import "./css/style.css"; import Avatar from "./components/avatar/Avatar"; import Alert from "./components/alerts/Alert"; import Badge from "./components/badges/Badge"; +import Button from "./components/buttons/Button"; export default function App() { return ( @@ -17,6 +18,9 @@ export default function App() {
+
+
+
); } diff --git a/src/components/alerts/Alert.js b/src/components/alerts/Alert.js index 3902a1c..521cb48 100644 --- a/src/components/alerts/Alert.js +++ b/src/components/alerts/Alert.js @@ -6,6 +6,10 @@ export default function Alert() {

Alert

Takes width of parent container

Alert with different severity

+
+ {" "} +
This is a normal alert!
+
{" "}
This is an error alert!
@@ -24,6 +28,9 @@ export default function Alert() {
{/* ---------------------------rounded------------------------------- */}

Rounded Alerts

+
+
This is an alert!
+
This is an error alert!
@@ -36,8 +43,14 @@ export default function Alert() {
This is a success alert!
- {/* ------------------------------titile------------------------------ */} + {/* ------------------------------title------------------------------ */}

Alerts with title

+
+
+
Alert
+ This is an alert! +
+
Error
@@ -64,6 +77,14 @@ export default function Alert() {
{/* ---------------------icon------------------------------------- */}

Alerts with icon

+
+
+ +
+
This is an alert!
+
{/* ---------------------actions------------------------------------- */}

Alerts with actions

+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
- {/* ---------------------actions------------------------------------- */} + {/* ---------------------outline------------------------------------- */}

Alerts with outline variant

+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
{/* ---------------------light------------------------------------- */}

Alerts with light scheme

+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
-

Avatar with Badges

- {/* ----------------------------todo---------------------------------- */} - {/*
- -
-
- -
-
- -
*/} + {/* --------------------icons-------------------------------------- */}

Avatar with Icons

+ {/* -----------------square variants */}

Avatar with Square Variants

S @@ -72,6 +63,22 @@ export default function Avatar() {
+ {/* ----------------------------avatar badges---------------------------------- */} +

Avatar with Badges

+
+ + +
+
+ + 2 +
+
+ + +
); } diff --git a/src/components/badges/Badge.js b/src/components/badges/Badge.js index 84aeb0b..92280aa 100644 --- a/src/components/badges/Badge.js +++ b/src/components/badges/Badge.js @@ -135,9 +135,9 @@ export default function Badge() {
{/* -------------------badge avatar---------------- */}

Badges with avatar

-
+
SK - 1 + 1
@@ -147,6 +147,20 @@ export default function Badge() { 3
+ {/* -------------------badge-dot avatar---------------- */} +

Badge-dot with avatar

+
+ SK + +
+
+ + +
+
+ + +
); } diff --git a/src/components/buttons/Button.js b/src/components/buttons/Button.js new file mode 100644 index 0000000..30cb7c0 --- /dev/null +++ b/src/components/buttons/Button.js @@ -0,0 +1,179 @@ +import React from "react"; + +export default function Button() { + return ( +
+

Buttons

+ {/* ---------------------sizes--------------------------------- */} +

Primary buttons with different sizes

+ + + + {/* ----------------border radius roudned pill -------------------*/} +

Primary buttons with border radius variants

+ + + + {/* ----------------btn with color variants -------------------*/} + {/* add color variants with their hover effects---------add b&w buttons------------------------------------- */} +

Primary buttons with color variants and hover

+ + + + + + + + + {/* ----------------w/o box shadow----------------------------- */} +

Primary buttons without box shadow / elevation

+ + + + {/* ----------------outlined----------------------------- */} +

Outlined buttons with hover

+ + + + + + + + + {/* ----------------link/txt btn----------------------------- */} +

Link / text buttons

+ + + + {/* ----------------icon and text btn----------------------------- */} +

Buttons with icon and label

+ + + + + {/* ----------------icon btn----------------------------- */} +

Buttons with only icons

+ + + + {/* ----------------disabled btns -------------------*/} +

Disabled btns

+ + + +
+ ); +} diff --git a/src/css/alert.css b/src/css/alert.css index e215dd8..9982c84 100644 --- a/src/css/alert.css +++ b/src/css/alert.css @@ -7,6 +7,12 @@ display: flex; align-items: center; position: relative; + /* test */ + background-color: rgb(9, 9, 9); + color: white; +} +.alert > .alert__icon > svg { + fill: var(--white-color1); } .alert--error { background-color: rgb(24, 6, 5); @@ -120,6 +126,15 @@ } /* alert-light */ +.alert--light { + background-color: var(--white-color1); + color: var(--black-color1); +} +.alert--light:not(.alert--error, .alert--warning, .alert--info, .alert--success) + > .alert__icon + > svg { + fill: var(--black-color1); +} .alert--light.alert--error { background-color: rgb(253, 236, 234); color: rgb(97, 26, 21); @@ -140,6 +155,7 @@ /* alert-outline */ .alert.alert--outline { background-color: transparent; + border: 1px solid var(--white-color1); } .alert--error.alert--outline { border: 1px solid #f44336; diff --git a/src/css/badge.css b/src/css/badge.css index a375c05..e620531 100644 --- a/src/css/badge.css +++ b/src/css/badge.css @@ -1,6 +1,7 @@ .badge-wrapper { position: relative; - display: inline-block; + /* display: inline-block; */ + display: inline-flex; } .badge { position: absolute; @@ -11,6 +12,8 @@ justify-content: center; align-items: center; min-width: 20px; + /* max-width: 28px; */ + width: auto; height: 20px; /* background-color: red; */ /* transform: scale(1) translate(50%, -50%); */ @@ -42,6 +45,7 @@ .badge-dot { width: 16px; + min-width: 16px; height: 16px; border: 3px outset var(--black-color1); border-radius: 50%; @@ -58,10 +62,12 @@ } .badge-dot.badge-dot--sm { width: 12px; + min-width: 12px; height: 12px; } .badge-dot.badge-dot--lg { width: 20px; + min-width: 20px; height: 20px; /* min-width: 16px; max-width: 16px; @@ -70,5 +76,9 @@ } .badge-wrapper .badge--bottom { - transform: scale(1) translate(40%, 100%); + /* transform: scale(1) translate(40%, 100%); */ + top: 100%; + transform: scale(1) translate(30%, -70%); + transform-origin: 100% 0%; + /* bottom: 0; */ } diff --git a/src/css/button.css b/src/css/button.css new file mode 100644 index 0000000..63e0407 --- /dev/null +++ b/src/css/button.css @@ -0,0 +1,303 @@ +.btn { + /* font-size: 0.875rem; */ + font-size: 1rem; + /* font-size: 1.3rem; */ + font-weight: 500; + line-height: 1.75; + letter-spacing: 0.05em; + cursor: pointer; + border-style: none; + outline: none; + /* padding: 0 8px; */ + /* padding: 0.4rem 1rem; */ + padding: 6px 18px; + height: 58px; + min-width: 144px; + + display: inline-flex; + position: relative; + align-items: center; + /* justify-content: center; */ + justify-content: space-around; + gap: 0.4rem; + vertical-align: middle; + text-decoration: none; + user-select: none; + -moz-user-select: none; + -webkit-appearance: none; + /* text-transform: uppercase; */ + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, + box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, + border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} +.btn:hover { + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), + 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); + /* transform: scale(1.01); */ + /* background-color: #d5d5d5; */ +} +.btn:active { + transform: scale(0.99); + box-shadow: 5px 5px -3px rgba(0, 0, 0, 0.2), + 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); +} +.btn--sm { + font-size: 0.875rem; + height: 42px; + min-width: 64px; + gap: 0.6rem; +} +.btn--md { + font-size: 1rem; + height: 56px; + min-width: 144px; + gap: 0.4rem; +} +.btn--lg { + font-size: 1.175rem; + height: 68px; + min-width: 160px; + gap: 0.2rem; +} + +.btn--rounded { + border-radius: 4px; +} +.btn--pill { + border-radius: 2rem; +} +.btn.btn--danger { + color: var(--white-color1); + background-color: #f44336; + fill: currentColor; +} +.btn.btn--danger:hover { + background-color: #be342a; +} + +.btn.btn--default { + color: rgba(0, 0, 0, 0.87); + background-color: #e0e0e0; + fill: currentColor; +} +.btn.btn--default:hover { + background-color: #b4b3b3; +} + +.btn.btn--success { + color: var(--white-color1); + background-color: #4caf50; + fill: currentColor; +} +.btn.btn--success:hover { + background-color: #378039; +} +.btn.btn--dark { + background-color: var(--black-color1); + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--dark:hover { + background-color: var(--black-color2); +} +.btn.btn--black { + background-color: var(--black-color3); + color: var(--white-color3); + fill: currentColor; +} +.btn.btn--black:hover { + background-color: var(--black-color2); +} +.btn.btn--white { + background-color: var(--white-color3); + color: var(--black-color3); + fill: currentColor; +} +.btn.btn--white:hover { + background-color: #e0e0e0; +} +.btn.btn--blue { + background-color: var(--blue-color2); + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--blue:hover { + background-color: var(--blue-color0); +} +.btn.btn--yellow { + background-color: var(--yellow-color1); + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--yellow:hover { + background-color: var(--yellow-color2); +} + +.btn.btn--no-shadow { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn.btn--outlined { + background-color: transparent; + border: 1px solid var(--white-color1); + box-shadow: none; +} +.btn.btn--outlined:hover { + /* background-color: rgba(25, 118, 210, 0.08); */ +} +.btn--outlined.btn--danger { + color: #f44336; + border: 1px solid #f44336; + fill: currentColor; +} +.btn--outlined.btn--danger:hover { + background-color: rgba(210, 25, 25, 0.06); +} +.btn--outlined.btn--default { + color: #e0e0e0; + border: 1px solid #e0e0e0; + fill: currentColor; +} +.btn--outlined.btn--default:hover { + background-color: rgba(212, 208, 208, 0.06); +} +.btn--outlined.btn--success { + color: #4caf50; + border: 1px solid #4caf50; + fill: currentColor; +} +.btn--outlined.btn--success:hover { + background-color: rgba(47, 210, 25, 0.06); +} +.btn--outlined.btn--dark { + color: var(--black-color1); + border: 1px solid var(--black-color1); + fill: currentColor; +} +.btn--outlined.btn--dark:hover { + background-color: rgba(0, 0, 0, 0.1); +} +.btn--outlined.btn--black { + color: var(--black-color3); + border: 1px solid var(--black-color3); + fill: currentColor; +} +.btn--outlined.btn--black:hover { + background-color: rgba(0, 0, 0, 0.1); +} +.btn--outlined.btn--white { + color: var(--white-color3); + border: 1px solid var(--white-color3); + fill: currentColor; +} +.btn--outlined.btn--white:hover { + background-color: rgba(255, 255, 255, 0.06); +} +.btn--outlined.btn--blue { + color: var(--blue-color2); + border: 1px solid var(--blue-color2); + fill: currentColor; +} +.btn--outlined.btn--blue:hover { + background-color: rgba(25, 121, 210, 0.06); +} +.btn--outlined.btn--yellow { + color: var(--yellow-color1); + border: 1px solid var(--yellow-color1); + fill: currentColor; +} +.btn--outlined.btn--yellow:hover { + background-color: rgba(210, 182, 25, 0.06); +} +.btn.btn--link { + background-color: transparent; + padding: 6px 8px; + min-width: 64px; + box-shadow: none; +} +/* .btn--link.btn--default { + color: var(--white-color1); +} +.btn--link.btn--success { + color: #4caf50; +} +.btn--link.btn--danger { + color: #f44336; +} */ + +.btn__icon { + /* max-width: 15%; */ + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + /* overflow: hidden; */ + /* width: 20%; */ +} + +.btn.btn--icon { + border-radius: 0; + background-color: transparent; + padding: 0.4rem; + border: none; + height: auto; + min-width: auto; + box-shadow: none; + fill: #e0e0e0; +} +.btn.btn--icon-circle { + border-radius: 50%; + background-color: transparent; + padding: 0.4rem; + border: none; + /* height: auto; */ + min-width: auto; + max-width: 56px; + box-shadow: none; + fill: #e0e0e0; +} +.btn--sm.btn--icon-circle { + max-width: 42px; + min-width: 42px; + height: 42px; +} +.btn--md.btn--icon-circle { + max-width: 56px; + min-width: 56px; + height: 56px; +} +.btn--lg.btn--icon-circle { + max-width: 68px; + min-width: 68px; + height: 68px; +} +.btn.btn--icon-rounded { + background-color: transparent; + padding: 0.4rem; + height: auto; + border: none; + min-width: auto; + box-shadow: none; + fill: #e0e0e0; +} +.btn.btn--icon:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.btn.btn--icon-circle:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.btn.btn--icon-rounded:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.btn.btn--disabled { + /* opacity: 0.6; */ + filter: grayscale(0.6); + cursor: default; + box-shadow: none; +} +.btn.btn--disabled:hover { + /* background-color: ; */ +} diff --git a/src/css/style.css b/src/css/style.css index 4bc80e1..f441044 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2,6 +2,7 @@ @import url("./avatar.css"); @import url("./alert.css"); @import url("./badge.css"); +@import url("./button.css"); /* border box */ html { box-sizing: border-box; diff --git a/src/css/utility.css b/src/css/utility.css index bcbe520..7247fe4 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -11,6 +11,11 @@ --black-color3: #040404; --blue-color1: #1876d2; + --blue-color0: #394baf; + --blue-color2: #4960e0; + + --yellow-color1: #f9ad1a; + --yellow-color2: #ca8e17; } /* ---------------------------------------utitlity classes--------------------------------------- */ @@ -25,6 +30,9 @@ .bg-blue { background-color: var(--blue-color1); } +.bg-blue2 { + background-color: var(--blue-color2); +} /* text-colors */ .text-white { From d916101f3379b0540f9dcb5c549fff001fc0ec61 Mon Sep 17 00:00:00 2001 From: vill Date: Sat, 27 Mar 2021 14:12:45 +0530 Subject: [PATCH 03/22] feat: added cards, fixed btn hover --- src/App.js | 12 +- src/components/{alerts => }/Alert.js | 0 src/components/{avatar => }/Avatar.js | 2 +- src/components/{badges => }/Badge.js | 2 +- src/components/{buttons => }/Button.js | 0 src/components/Card.js | 253 +++++++++++++++++++++++++ src/components/Image.js | 12 ++ src/css/alert.css | 1 + src/css/button.css | 18 +- src/css/card.css | 69 +++++++ src/css/style.css | 6 +- src/css/utility.css | 90 ++++++++- src/images/contemplative-reptile.jpg | Bin 0 -> 42845 bytes src/images/paella.jpg | Bin 0 -> 33329 bytes 14 files changed, 450 insertions(+), 15 deletions(-) rename src/components/{alerts => }/Alert.js (100%) rename src/components/{avatar => }/Avatar.js (98%) rename src/components/{badges => }/Badge.js (99%) rename src/components/{buttons => }/Button.js (100%) create mode 100644 src/components/Card.js create mode 100644 src/components/Image.js create mode 100644 src/css/card.css create mode 100644 src/images/contemplative-reptile.jpg create mode 100644 src/images/paella.jpg diff --git a/src/App.js b/src/App.js index 131a2a7..5586f36 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,11 @@ import React from "react"; import "./css/style.css"; // import Example from "./components/Example"; -import Avatar from "./components/avatar/Avatar"; -import Alert from "./components/alerts/Alert"; -import Badge from "./components/badges/Badge"; -import Button from "./components/buttons/Button"; +import Avatar from "./components/Avatar"; +import Alert from "./components/Alert"; +import Badge from "./components/Badge"; +import Button from "./components/Button"; +import Card from "./components/Card"; export default function App() { return ( @@ -21,6 +22,9 @@ export default function App() {
); } diff --git a/src/components/alerts/Alert.js b/src/components/Alert.js similarity index 100% rename from src/components/alerts/Alert.js rename to src/components/Alert.js diff --git a/src/components/avatar/Avatar.js b/src/components/Avatar.js similarity index 98% rename from src/components/avatar/Avatar.js rename to src/components/Avatar.js index da19512..578f9d1 100644 --- a/src/components/avatar/Avatar.js +++ b/src/components/Avatar.js @@ -1,5 +1,5 @@ import React from "react"; -import avatarImg from "../../images/avatar.jpeg"; +import avatarImg from "../images/avatar.jpeg"; export default function Avatar() { return ( diff --git a/src/components/badges/Badge.js b/src/components/Badge.js similarity index 99% rename from src/components/badges/Badge.js rename to src/components/Badge.js index 92280aa..aae85bd 100644 --- a/src/components/badges/Badge.js +++ b/src/components/Badge.js @@ -1,5 +1,5 @@ import React from "react"; -import avatarImg from "../../images/avatar.jpeg"; +import avatarImg from "../images/avatar.jpeg"; export default function Badge() { return ( diff --git a/src/components/buttons/Button.js b/src/components/Button.js similarity index 100% rename from src/components/buttons/Button.js rename to src/components/Button.js diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 0000000..efceea4 --- /dev/null +++ b/src/components/Card.js @@ -0,0 +1,253 @@ +import React from "react"; +import foodSampleImg from "../images/paella.jpg"; +import reptileImg from "../images/contemplative-reptile.jpg"; + +export default function Card() { + return ( +
+

Cards

+ {/* -------------------------------simple cards-------------------------- */} +

Simple card

+
+
+ +

Fast. Very fast.

+

Blazing fast speed you can depend on.

+
+
+ +
+
+
+
+
Title
+
Subtitle for card
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, + dolores ad. Assumenda dolorum sunt, fuga velit sequi officia ea + facere nostrum ad... +

+
+
+
+ +
+
+
+ {/* ------------------------------full card structure--------------------------- */} +

Full Card Structure

+ {/*
*/} +
+
+
SK
+
+
Shrimp and Chorizo
+
September 14, 2016
+
+
+ +
+
+
+ +
+
+

+ This impressive paella is a perfect party dish and a fun meal to + cook together with your guests. Add 1 cup of frozen peas along with + the mussels, if you like. +

+
+
+
+
+ + +
+ +
+
+
+
+
+ +
+
+
+
Lizard
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except Antarctica +
+
+
+
+
+ + +
+
+
+ {/* -----------------------card with dismiss btn------------------------- */} +

Card with dismiss button

+
+
+
+ EF +
+
+
Elliot Fu
+
Friends of Veronika
+
+
+ +
+
+
+ Elliot requested permission to view your contact details +
+
+
+ + +
+
+
+ {/* --------------------------card with overlay------------------- */} +

Cards with overlay

+
+
+ +
+
+
Lizard
+
Squamate Reptiles
+
+
+
+
+
+ Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica +
+
+
+
+ + +
+
+
+ {/*-------------------------horizontal cards---------------------- */} +

Horizontal Cards

+
+
+ +
+
+
+
+
Lizard
+
+
+
+ Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica. Lorem + ipsum dolor sit amet consectetur, adipisicing elit. Ipsa at ad a + molestiae autem aliquid odit veritatis magni quisquam. +
+
+ Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica. Lorem + ipsum dolor sit amet consectetur, adipisicing elit. +
+
+
+ + +
+
+
+
+
+ ); +} diff --git a/src/components/Image.js b/src/components/Image.js new file mode 100644 index 0000000..37fbcb8 --- /dev/null +++ b/src/components/Image.js @@ -0,0 +1,12 @@ +import React from "react"; + +export default function Image() { + return ( +
+

Images

+ {/* --------------------responsive images---------------------- */} +

Responsive Images

+ {/* !todo later */} +
+ ); +} diff --git a/src/css/alert.css b/src/css/alert.css index 9982c84..ea0c5ba 100644 --- a/src/css/alert.css +++ b/src/css/alert.css @@ -117,6 +117,7 @@ background-color: rgba(255, 255, 255, 0.1); /* opacity: 0.3; */ } +/*!------------------------------------- add active class-------------------------- */ .alert__actions svg { fill: currentColor; /* background-color: transparent; */ diff --git a/src/css/button.css b/src/css/button.css index 63e0407..7b643df 100644 --- a/src/css/button.css +++ b/src/css/button.css @@ -2,7 +2,7 @@ /* font-size: 0.875rem; */ font-size: 1rem; /* font-size: 1.3rem; */ - font-weight: 500; + /* font-weight: 500; */ line-height: 1.75; letter-spacing: 0.05em; cursor: pointer; @@ -40,7 +40,7 @@ } .btn:active { transform: scale(0.99); - box-shadow: 5px 5px -3px rgba(0, 0, 0, 0.2), + box-shadow: 5px 5px -3px 4px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .btn--sm { @@ -218,6 +218,10 @@ min-width: 64px; box-shadow: none; } +.btn.btn--link:hover { + filter: brightness(0.9); + background-color: rgba(128, 128, 128, 0.14); +} /* .btn--link.btn--default { color: var(--white-color1); } @@ -284,14 +288,18 @@ fill: #e0e0e0; } .btn.btn--icon:hover { - background-color: rgba(255, 255, 255, 0.1); + /* background-color: rgba(255, 255, 255, 0.1); */ + background-color: rgba(128, 128, 128, 0.25); } .btn.btn--icon-circle:hover { - background-color: rgba(255, 255, 255, 0.1); + /* background-color: rgba(255, 255, 255, 0.1); */ + background-color: rgba(128, 128, 128, 0.25); } .btn.btn--icon-rounded:hover { - background-color: rgba(255, 255, 255, 0.1); + /* background-color: rgba(255, 255, 255, 0.1); */ + background-color: rgba(128, 128, 128, 0.25); } + .btn.btn--disabled { /* opacity: 0.6; */ filter: grayscale(0.6); diff --git a/src/css/card.css b/src/css/card.css new file mode 100644 index 0000000..d1d8a07 --- /dev/null +++ b/src/css/card.css @@ -0,0 +1,69 @@ +.card { + border-radius: 4px; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} +.card__content { + padding: 1em; +} +.card__header { + display: flex; + align-items: center; + /* margin-bottom: 0.6em; */ + padding: 0.5em; +} +.card__title { + /* padding: 0.5rem; */ +} +.card__media { + overflow: hidden; + position: relative; +} +.card__media > * { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 50% 50%; + /* position: absolute; */ + /* top: 0; */ + /* left: 0; */ +} +.card__media > .card__overlay { + position: absolute; + top: 0; + left: 0; + z-index: 2; + padding: 1em; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + /* flex-direction: column; */ +} +.card__actions { + /* padding: 0.5em; */ + align-self: flex-start; + display: flex; +} +.card__footer { + display: flex; + padding: 0.5em; + position: relative; +} +.card--horizontal { + flex-direction: row; +} +.card--horizontal > .card__media > * { + /* height: 100%; */ + /* width: 100%; */ + /* object-fit: contain; */ + height: 100%; + width: 100%; + object-fit: cover; + /* object-position: 0 0; */ +} diff --git a/src/css/style.css b/src/css/style.css index f441044..6f5686a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -3,6 +3,7 @@ @import url("./alert.css"); @import url("./badge.css"); @import url("./button.css"); +@import url("./card.css"); /* border box */ html { box-sizing: border-box; @@ -20,8 +21,11 @@ body { /* color: var(--white-color1); */ /* background-color: var(--bg-color); */ } -h1 { +*, +body, +html { margin: 0; + padding: 0; } .App { diff --git a/src/css/utility.css b/src/css/utility.css index 7247fe4..a3bbc14 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -13,9 +13,12 @@ --blue-color1: #1876d2; --blue-color0: #394baf; --blue-color2: #4960e0; + --blue-color: #90caf9; --yellow-color1: #f9ad1a; --yellow-color2: #ca8e17; + + --light-grey1: #424242; } /* ---------------------------------------utitlity classes--------------------------------------- */ @@ -33,7 +36,9 @@ .bg-blue2 { background-color: var(--blue-color2); } - +.bg-grey1 { + background-color: var(--light-grey1); +} /* text-colors */ .text-white { color: var(--white-color2); @@ -41,7 +46,31 @@ .text-black { color: var(--black-color2); } - +.text-blue { + color: var(--blue-color); +} +.text-subtitle { + font-size: 0.8em; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.009em; +} +.text-title { + font-size: 1.2rem; + font-weight: 400; + line-height: 1.334; + letter-spacing: 0em; +} +/* font */ +.text-center { + text-align: center; +} +.text-bold { + font-weight: bold; +} +.text-para { + font-size: 0.875rem; +} /* icon */ .icon-sm { width: 24px; @@ -73,17 +102,72 @@ } /* margin */ +.mr-6 { + margin-right: 1.5rem; +} +.mr-5 { + margin-right: 1.25rem; +} .mr-4 { margin-right: 1rem; } +.mr-3 { + margin-right: 0.75rem; +} +.mr-2 { + margin-right: 0.5rem; +} +.mb-4 { + margin-bottom: 1rem; +} +.ml-auto { + margin-left: auto; +} +/* padding */ +.pt-3 { + padding-top: 0.75rem; +} +.pt-4 { + padding-top: 1rem; +} +/* border */ +.border-top { + border-top: 1px solid rgba(189, 185, 185, 0.589); +} +/* width */ +[class*="w-1/2"] { + width: 50%; +} +[class*="w-1/3"] { + width: 33.333333%; +} +[class*="w-2/3"] { + width: 66.666666%; +} +.w-full { + width: 100%; +} -/* font */ +/* height */ +.h-28 { + height: 7rem; +} +.h-64 { + height: 16rem; +} /* breakpoints */ /* container */ .container { } +.container-xs { + max-width: 275px; +} +.container-xs0 { + max-width: 345px; + /* max-width: 380px; */ +} .container-sm { max-width: 640px; } diff --git a/src/images/contemplative-reptile.jpg b/src/images/contemplative-reptile.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2348454cc1c8936c9ee91cccc2ee83a694ed431a GIT binary patch literal 42845 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 z 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 literal 0 HcmV?d00001 From 6cc6e3a1eee2037a109b0ff967f7de21d14169f1 Mon Sep 17 00:00:00 2001 From: vill Date: Sun, 28 Mar 2021 15:33:49 +0530 Subject: [PATCH 04/22] feat: added inputs plus some fixes --- src/App.js | 5 + src/components/Card.js | 41 +++- src/components/Input.js | 73 ++++++ src/css/card.css | 11 + src/css/input.css | 517 ++++++++++++++++++++++++++++++++++++++++ src/css/style.css | 1 + src/css/utility.css | 26 ++ 7 files changed, 670 insertions(+), 4 deletions(-) create mode 100644 src/components/Input.js create mode 100644 src/css/input.css diff --git a/src/App.js b/src/App.js index 5586f36..573a2da 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import Alert from "./components/Alert"; import Badge from "./components/Badge"; import Button from "./components/Button"; import Card from "./components/Card"; +import Input from "./components/Input"; export default function App() { return ( @@ -25,6 +26,10 @@ export default function App() {
+
+
+ +
); } diff --git a/src/components/Card.js b/src/components/Card.js index efceea4..f47faf5 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -58,7 +58,7 @@ export default function Card() { {/* ------------------------------full card structure--------------------------- */}

Full Card Structure

{/*
*/} -
+
SK
@@ -132,7 +132,8 @@ export default function Card() {
-
+ {/* 2 */} +
@@ -154,9 +155,28 @@ export default function Card() {
+ {/* 3 */} +
+
+
+
Delete
+
+
+
+

Are you sure you want to delete this file?

+
+
+
+ + +
+
+
{/* -----------------------card with dismiss btn------------------------- */}

Card with dismiss button

-
+
EF @@ -190,7 +210,20 @@ export default function Card() {
{/* --------------------------card with overlay------------------- */}

Cards with overlay

-
+ {/* card with full overlay */} +
+
+ +
+
+
+
Lizard
+
Squamate Reptiles
+
+
+
+ {/* card with specific overlay on card__medua */} +
diff --git a/src/components/Input.js b/src/components/Input.js new file mode 100644 index 0000000..6e2bc3a --- /dev/null +++ b/src/components/Input.js @@ -0,0 +1,73 @@ +import React from "react"; + +export default function Input() { + return ( +
+

Inputs

+ {/* -----------------checkbox--------------- */} +

Checkbox

+ + {/* ----------------radio---------------------- */} + {/* radio--light for light scheme */} +

Radio

+ + + {/* */} + {/* ----------------toggle---------------------- */} +

Toggle

+ {/* toggle--light for light scheme */} + + {/* ------------------text-------------- */} +

Text Input

+
+ + +
+
+ + + +
+ {/* -------------------text with bcg----------------- */} +
+ + +
+
+ + +
+ {/* todo ------------slider------------------------------- */} +
+ ); +} diff --git a/src/css/card.css b/src/css/card.css index d1d8a07..ced0196 100644 --- a/src/css/card.css +++ b/src/css/card.css @@ -45,6 +45,17 @@ display: flex; /* flex-direction: column; */ } +.card > .card__overlay { + position: absolute; + top: 0; + left: 0; + z-index: 2; + padding: 1em; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + display: flex; +} .card__actions { /* padding: 0.5em; */ align-self: flex-start; diff --git a/src/css/input.css b/src/css/input.css new file mode 100644 index 0000000..7ed3f73 --- /dev/null +++ b/src/css/input.css @@ -0,0 +1,517 @@ +:root { + --pure-material-primary-rgb: 33, 150, 243; + --pure-material-onprimary-rgb: 255, 255, 255; + --pure-material-surface-rgb: 255, 255, 255; + --pure-material-onsurface-rgb: 0, 0, 0; +} + +/* input container */ +.input-checkbox { + z-index: 0; + position: relative; + display: inline-block; + color: rgba(255, 255, 255, 0.87); + font-size: 16px; + line-height: 1.5; +} + +/* opacity 0 input */ +.input-checkbox > input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + z-index: -1; + position: absolute; + left: -10px; + top: -8px; + display: block; + margin: 0; + border-radius: 50%; + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.6); + box-shadow: none; + outline: none; + opacity: 0; + transform: scale(1); + pointer-events: none; + transition: opacity 0.3s, transform 0.2s; +} + +/* span */ +.input-checkbox > span { + display: inline-block; + width: 100%; + cursor: pointer; +} + +/* box */ +.input-checkbox > span::before { + content: ""; + display: inline-block; + box-sizing: border-box; + margin: 3px 11px 3px 1px; + border: solid 2px; /* Safari */ + /* border-color: rgba(0, 0, 0, 0.6); */ + border-color: #3d424e; + /* background-color: #323741; */ + border-radius: 2px; + width: 18px; + height: 18px; + vertical-align: top; + transition: border-color 0.2s, background-color 0.2s; +} + +/* Checkmark */ +.input-checkbox > span::after { + content: ""; + display: block; + position: absolute; + top: 4px; + left: 2px; + width: 10px; + height: 5px; + border: solid 2px transparent; + border-right: none; + border-top: none; + transform: translate(3px, 4px) rotate(-45deg); +} + +/* Checked, Indeterminate */ +.input-checkbox > input:checked, +.input-checkbox > input:indeterminate { + /* background-color: rgb(33, 150, 243); */ + background-color: rgb(5, 5, 5); +} + +.input-checkbox > input:checked + span::before, +.input-checkbox > input:indeterminate + span::before { + /* border-color: rgb(33, 150, 243); */ + /* border-color: rgb(5, 5, 5); */ + /* background-color: rgb(33, 150, 243); */ + border: 1px solid #3d424e; + /* border-color: rgb(255, 255, 255); */ + background-color: rgb(255, 255, 255); +} + +.input-checkbox > input:checked + span::after, +.input-checkbox > input:indeterminate + span::after { + /* border-color: rgb(255, 255, 255); */ + border-color: rgb(0, 0, 0); +} + +.input-checkbox > input:indeterminate + span::after { + border-left: none; + transform: translate(4px, 3px); +} + +/* Hover, Focus */ +.input-checkbox:hover > input { + opacity: 0.04; +} + +.input-checkbox > input:focus { + opacity: 0.12; +} + +.input-checkbox:hover > input:focus { + opacity: 0.16; +} + +/* Active */ +.input-checkbox > input:active { + opacity: 1; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +.input-checkbox > input:active + span::before { + /* border-color: rgb(33, 150, 243); */ + border-color: rgb(5, 5, 5); +} + +.input-checkbox > input:checked:active + span::before { + border-color: transparent; + background-color: rgba(0, 0, 0, 0.6); +} + +/* Disabled */ +.input-checkbox > input:disabled { + opacity: 0; +} + +.input-checkbox > input:disabled + span { + color: rgba(0, 0, 0, 0.38); + cursor: initial; +} + +.input-checkbox > input:disabled + span::before { + border-color: currentColor; +} + +.input-checkbox > input:checked:disabled + span::before, +.input-checkbox > input:indeterminate:disabled + span::before { + border-color: transparent; + background-color: currentColor; +} + +/* --------------------------radio------------------------------ */ +.input-radio { + z-index: 0; + position: relative; + display: inline-block; + color: rgba(255, 255, 255, 0.87); + font-size: 16px; + line-height: 1.5; +} +.input-radio.radio--light { + color: rgba(0, 0, 0, 0.87); +} + +/* Input */ +.input-radio > input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + z-index: -1; + position: absolute; + left: -10px; + top: -8px; + display: block; + margin: 0; + border-radius: 50%; + width: 40px; + height: 40px; + background-color: rgba(0, 0, 0, 0.6); + outline: none; + opacity: 0; + transform: scale(1); + pointer-events: none; + transition: opacity 0.3s, transform 0.2s; +} + +/* Span */ +.input-radio > span { + display: inline-block; + width: 100%; + cursor: pointer; +} + +/* Circle */ +.input-radio > span::before { + content: ""; + display: inline-block; + box-sizing: border-box; + margin: 2px 10px 2px 0; + border: solid 2px; /* Safari */ + /* border-color: rgba(0, 0, 0, 0.6); */ + border-color: #3d424e; + border-radius: 50%; + width: 20px; + height: 20px; + vertical-align: top; + transition: border-color 0.2s; +} + +/* Check */ +.input-radio > span::after { + content: ""; + display: block; + position: absolute; + top: 2px; + left: 0; + border-radius: 50%; + width: 10px; + height: 10px; + /* background-color: rgb(33, 150, 243); */ + background-color: white; + /* background-color: black; */ + transform: translate(5px, 5px) scale(0); + transition: transform 0.2s; +} +.radio--light > span::after { + background-color: black; +} + +/* Checked */ +.input-radio > input:checked { + /* background-color: rgb(33, 150, 243); */ + background-color: rgb(5, 5, 5); +} + +.input-radio > input:checked + span::before { + /* border-color: rgb(33, 150, 243); */ + /* border-color: ; */ +} + +.input-radio > input:checked + span::after { + transform: translate(5px, 5px) scale(1); +} + +/* Hover, Focus */ +.input-radio:hover > input { + opacity: 0.04; +} + +.input-radio > input:focus { + opacity: 0.12; +} + +.input-radio:hover > input:focus { + opacity: 0.16; +} + +/* Active */ +.input-radio > input:active { + opacity: 1; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +.input-radio > input:active + span::before { + /* border-color: rgb(33, 150, 243); */ +} + +/* Disabled */ +.input-radio > input:disabled { + opacity: 0; +} + +.input-radio > input:disabled + span { + color: rgba(0, 0, 0, 0.38); + cursor: initial; +} + +.input-radio > input:disabled + span::before { + border-color: currentColor; +} + +.input-radio > input:disabled + span::after { + background-color: currentColor; +} + +/* -------------------------------toggle---------------------------- */ +.input-toggle { + z-index: 0; + position: relative; + display: inline-block; + color: rgba(255, 255, 255, 0.87); + font-size: 16px; + line-height: 1.5; +} + +/* Input */ +.input-toggle > input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + z-index: -1; + position: absolute; + /* right: 6px; */ + /* right: 3px; */ + /* left: -2px; */ + right: 12px; + /* top: -8px; */ + top: 1px; + display: block; + margin: 0; + border-radius: 50%; + width: 32px; + height: 32px; + background-color: rgba(0, 0, 0, 0.38); + outline: none; + opacity: 0; + transform: scale(1); + pointer-events: none; + transition: opacity 0.3s 0.1s, transform 0.2s 0.1s; +} + +/* Span */ +.input-toggle > span { + display: inline-block; + width: 100%; + cursor: pointer; +} + +/* Track */ +.input-toggle > span::before { + content: ""; + float: right; + display: inline-block; + margin: 5px 0 5px 10px; + border-radius: 14px; + /* width: 36px; */ + width: 42px; + /* height: 14px; */ + height: 24px; + /* background-color: rgba(0, 0, 0, 0.38); */ + background-color: #3d424e; + vertical-align: top; + transition: background-color 0.2s, opacity 0.2s; +} + +/* Thumb */ +.input-toggle > span::after { + content: ""; + position: absolute; + top: 9px; + /* right: 16px; */ + right: 21px; + border-radius: 50%; + width: 16px; + height: 16px; + /* width: 20px; + height: 20px; */ + background-color: rgb(255, 255, 255, 0.6); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); + transition: background-color 0.2s, transform 0.2s; +} + +/* Checked */ +.input-toggle > input:checked { + /* right: -10px; */ + right: -4px; + /* background-color: rgb(33, 150, 243); */ + /* background-color: rgb(5, 5, 5); */ + background-color: rgb(128, 128, 128, 0.7); +} + +.input-toggle > input:checked + span::before { + /* background-color: rgba(33, 150, 243, 0.6); */ + /* background-color: rgb(255, 255, 255, 0.6); */ + background-color: #505766; +} + +.input-toggle > input:checked + span::after { + /* background-color: rgb(33, 150, 243); */ + /* background-color: rgb(0, 0, 0); */ + background-color: rgb(255, 255, 255); + transform: translateX(16px); +} + +/* Hover, Focus */ +.input-toggle:hover > input { + opacity: 0.04; +} + +.input-toggle > input:focus { + opacity: 0.12; +} + +.input-toggle:hover > input:focus { + opacity: 0.16; +} + +/* Active */ +.input-toggle > input:active { + opacity: 1; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +.input-toggle > input:active + span::before { + /* background-color: rgba(33, 150, 243, 0.6); */ + /* background-color: rgb(255, 255, 255, 0.6); */ + background-color: #505766; +} + +.input-toggle > input:checked:active + span::before { + /* background-color: rgba(0, 0, 0, 0.38); */ + background-color: #505766; +} + +/* Disabled */ +.input-toggle > input:disabled { + opacity: 0; +} + +.input-toggle > input:disabled + span { + color: rgb(0, 0, 0); + opacity: 0.38; + cursor: default; +} + +.input-toggle > input:disabled + span::before { + /* background-color: rgba(0, 0, 0, 0.38); */ + background-color: #505766; +} + +.input-toggle > input:checked:disabled + span::before { + /* background-color: rgba(33, 150, 243, 0.6); */ + /* background-color: rgb(255, 255, 255, 0.6); */ +} + +/* ---------------------text------------------------ */ + +.input-text { + position: relative; +} +.input-text input { + color: #fff; + background-color: #292f3a; + width: 100%; + letter-spacing: 1px; + border: 0; + /* padding: 7px 4px; */ + padding: 0.6rem 0.6rem; + border-bottom: 1px solid #000; +} +.input-text--light input { + background-color: #fff; + color: #333; + border-bottom: 1px solid #ccc; +} +.input-text input:focus { + outline: none; +} +.focus-border { + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background-color: #fff; + transition: 0.4s; +} +.input-text--light .focus-border { + background-color: #0e0e0e; +} +.input-text input:focus ~ .focus-border { + width: 100%; + transition: 0.4s; +} + +/* bcg text input */ + +.input-text--bcg input { + color: #fff; + width: 100%; + letter-spacing: 1px; + border: 1px solid #ccc; + padding: 0.6rem 0.8rem; + /* border: 1px solid #ccc; */ + position: relative; + background-color: transparent; +} +.input-text--bcg.input-text--light input { + color: #000; + border-color: #000; +} + +.input-text--bcg input:focus { + transition: 0.5s; + /* opacity: 1; */ + background-color: rgba(204, 204, 204, 0.1); +} +.input-text--bcg.input-text--light input:focus { + background-color: rgba(0, 0, 0, 0.05); +} +/* icon input */ +.input-text__icon { + position: absolute; + top: 50%; + left: 0.6rem; + transform: translate(0, -50%); + width: 24px; +} diff --git a/src/css/style.css b/src/css/style.css index 6f5686a..cb040c2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -4,6 +4,7 @@ @import url("./badge.css"); @import url("./button.css"); @import url("./card.css"); +@import url("./input.css"); /* border box */ html { box-sizing: border-box; diff --git a/src/css/utility.css b/src/css/utility.css index a3bbc14..ed0fae0 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -19,6 +19,7 @@ --yellow-color2: #ca8e17; --light-grey1: #424242; + --light-grey2: #1c1d1f; } /* ---------------------------------------utitlity classes--------------------------------------- */ @@ -39,6 +40,9 @@ .bg-grey1 { background-color: var(--light-grey1); } +.bg-gre2 { + background-color: var(--light-grey2); +} /* text-colors */ .text-white { color: var(--white-color2); @@ -120,6 +124,12 @@ .mb-4 { margin-bottom: 1rem; } +.mb-3 { + margin-bottom: 0.75rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} .ml-auto { margin-left: auto; } @@ -130,10 +140,26 @@ .pt-4 { padding-top: 1rem; } +.pb-4 { + padding-bottom: 1rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.pl-4 { + padding-left: 1rem; +} +.pl-8 { + padding-left: 2rem; +} /* border */ .border-top { border-top: 1px solid rgba(189, 185, 185, 0.589); } +.border-bottom { + border-bottom: 1px solid rgba(189, 185, 185, 0.589); +} /* width */ [class*="w-1/2"] { width: 50%; From 2a1dcb3aed7efc76319da81889227a38a94e7a73 Mon Sep 17 00:00:00 2001 From: vill Date: Sun, 28 Mar 2021 18:36:01 +0530 Subject: [PATCH 05/22] feat: initial styles completed --- src/App.js | 8 + src/components/Card.js | 2 +- src/components/Typography.js | 34 ++ src/components/Utility.js | 13 + src/css/card.css | 3 + src/css/style.css | 1 + src/css/typography.css | 573 +++++++++++++++++++++++ src/css/utility.css | 870 +++++++++++++++++++++-------------- 8 files changed, 1164 insertions(+), 340 deletions(-) create mode 100644 src/components/Typography.js create mode 100644 src/components/Utility.js create mode 100644 src/css/typography.css diff --git a/src/App.js b/src/App.js index 573a2da..0e041ea 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,8 @@ import Badge from "./components/Badge"; import Button from "./components/Button"; import Card from "./components/Card"; import Input from "./components/Input"; +import Typography from "./components/Typography"; +import Utility from "./components/Utility"; export default function App() { return ( @@ -30,6 +32,12 @@ export default function App() {

+
+ +
+
+ +
); } diff --git a/src/components/Card.js b/src/components/Card.js index f47faf5..47531f7 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -211,7 +211,7 @@ export default function Card() { {/* --------------------------card with overlay------------------- */}

Cards with overlay

{/* card with full overlay */} -
+
diff --git a/src/components/Typography.js b/src/components/Typography.js new file mode 100644 index 0000000..6ec445f --- /dev/null +++ b/src/components/Typography.js @@ -0,0 +1,34 @@ +import React from "react"; + +export default function Typography() { + return ( +
+

Typography

+

Headline

+
HEADLINE
+
HEADLINE
+
HEADLINE
+
HEADLINE
+

h1-h6

+ {/* h1-h6 */} +
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+

Subtitle

+
This is subititle 1
+
This is subititle 2
+

Body

+
This is body 1
+
This is body 2
+

Button

+
Button font size
+

Caption

+
This is a text caption.
+

Overline

+
This is an overline.
+
+ ); +} diff --git a/src/components/Utility.js b/src/components/Utility.js new file mode 100644 index 0000000..da86a7f --- /dev/null +++ b/src/components/Utility.js @@ -0,0 +1,13 @@ +import React from "react"; + +export default function Utility() { + return ( +
+

Utility Classes

+

Colors Bg and Text

+

Container

+

Icons

+

Flexbox

+
+ ); +} diff --git a/src/css/card.css b/src/css/card.css index ced0196..fcf3c12 100644 --- a/src/css/card.css +++ b/src/css/card.css @@ -8,6 +8,9 @@ 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } +.card--square { + border-radius: 0; +} .card__content { padding: 1em; } diff --git a/src/css/style.css b/src/css/style.css index cb040c2..87245ab 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -5,6 +5,7 @@ @import url("./button.css"); @import url("./card.css"); @import url("./input.css"); +@import url("./typography.css"); /* border box */ html { box-sizing: border-box; diff --git a/src/css/typography.css b/src/css/typography.css new file mode 100644 index 0000000..f2cdc45 --- /dev/null +++ b/src/css/typography.css @@ -0,0 +1,573 @@ +.text-h1 { + font-size: 96px; + font-weight: 300; + letter-spacing: -1.5px; + line-height: 120px; +} + +.text-h2 { + font-size: 60px; + font-weight: 300; + letter-spacing: -0.5px; + line-height: 80px; +} + +.text-h3 { + font-size: 48px; + font-weight: 400; + letter-spacing: 0; + line-height: 64px; +} + +.text-h4 { + font-size: 34px; + font-weight: 400; + letter-spacing: 0.25px; + line-height: 48px; +} + +.text-h5 { + font-size: 24px; + font-weight: 400; + letter-spacing: 0; + line-height: 36px; +} + +.text-h6 { + font-size: 20px; + font-weight: 500; + letter-spacing: 0.15px; + line-height: 28px; +} +.text-headline1 { + font-size: 8.5rem; + font-weight: 700; + letter-spacing: 0.05rem; + line-height: 1.125em; +} +.text-headline2 { + font-size: 7.5rem; + font-weight: 700; + letter-spacing: 0.05rem; + line-height: 1.125em; +} +.text-headline3 { + font-size: 6.5rem; + font-weight: 700; + letter-spacing: 0.05rem; + line-height: 1.125em; +} +.text-headline4 { + font-size: 5.5rem; + font-weight: 700; + letter-spacing: 0.05rem; + line-height: 1.125em; +} + +.text-subtitle1 { + font-size: 16px; + font-weight: 400; + letter-spacing: 0.15px; + line-height: 24px; +} + +.text-subtitle2 { + font-size: 14px; + font-weight: 500; + letter-spacing: 0.1px; + line-height: 20px; +} + +.text-body1 { + font-size: 16px; + font-weight: 400; + letter-spacing: 0.5px; + line-height: 24px; +} + +.text-body2 { + font-size: 14px; + font-weight: 400; + letter-spacing: 0.25px; + line-height: 20px; +} + +.text-button { + font-size: 14px; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; + line-height: 20px; +} + +.text-caption { + font-size: 12px; + font-weight: 400; + letter-spacing: 0.4px; + line-height: 20px; +} + +.text-overline { + font-size: 10px; + font-weight: 400; + letter-spacing: 1.5px; + text-transform: uppercase; + line-height: 16px; +} + +/* font weights*/ +.text-thin { + font-weight: 100; +} +.text-extralight { + font-weight: 200; +} +.text-light { + font-weight: 300; +} +.text-normal { + font-weight: 400; +} +.text-medium { + font-weight: 500; +} +.text-semibold { + font-weight: 600; +} +.text-bold { + font-weight: 700; +} +.text-extrabold { + font-weight: 800; +} +.text-black { + font-weight: 900; +} +/* todo change this to above bold after fixed whole app */ +.text-bold { + font-weight: bold; +} + +/* text color */ +.text-transparent { + color: transparent; +} +.text-current { + color: currentColor; +} +.text-black { + --text-opacity: 1; + color: rgba(0, 0, 0, var(--text-opacity)); +} +.text-white { + --text-opacity: 1; + color: rgba(255, 255, 255, var(--text-opacity)); +} +.text-gray-50 { + --text-opacity: 1; + color: rgba(249, 250, 251, var(--text-opacity)); +} +.text-gray-100 { + --text-opacity: 1; + color: rgba(243, 244, 246, var(--text-opacity)); +} +.text-gray-200 { + --text-opacity: 1; + color: rgba(229, 231, 235, var(--text-opacity)); +} +.text-gray-300 { + --text-opacity: 1; + color: rgba(209, 213, 219, var(--text-opacity)); +} +.text-gray-400 { + --text-opacity: 1; + color: rgba(156, 163, 175, var(--text-opacity)); +} +.text-gray-500 { + --text-opacity: 1; + color: rgba(107, 114, 128, var(--text-opacity)); +} +.text-gray-600 { + --text-opacity: 1; + color: rgba(75, 85, 99, var(--text-opacity)); +} +.text-gray-700 { + --text-opacity: 1; + color: rgba(55, 65, 81, var(--text-opacity)); +} +.text-gray-800 { + --text-opacity: 1; + color: rgba(31, 41, 55, var(--text-opacity)); +} +.text-gray-900 { + --text-opacity: 1; + color: rgba(17, 24, 39, var(--text-opacity)); +} +.text-red-50 { + --text-opacity: 1; + color: rgba(254, 242, 242, var(--text-opacity)); +} +.text-red-100 { + --text-opacity: 1; + color: rgba(254, 226, 226, var(--text-opacity)); +} +.text-red-200 { + --text-opacity: 1; + color: rgba(254, 202, 202, var(--text-opacity)); +} +.text-red-300 { + --text-opacity: 1; + color: rgba(252, 165, 165, var(--text-opacity)); +} +.text-red-400 { + --text-opacity: 1; + color: rgba(248, 113, 113, var(--text-opacity)); +} +.text-red-500 { + --text-opacity: 1; + color: rgba(239, 68, 68, var(--text-opacity)); +} +.text-red-600 { + --text-opacity: 1; + color: rgba(220, 38, 38, var(--text-opacity)); +} +.text-red-700 { + --text-opacity: 1; + color: rgba(185, 28, 28, var(--text-opacity)); +} +.text-red-800 { + --text-opacity: 1; + color: rgba(153, 27, 27, var(--text-opacity)); +} +.text-red-900 { + --text-opacity: 1; + color: rgba(127, 29, 29, var(--text-opacity)); +} +.text-yellow-50 { + --text-opacity: 1; + color: rgba(255, 251, 235, var(--text-opacity)); +} +.text-yellow-100 { + --text-opacity: 1; + color: rgba(254, 243, 199, var(--text-opacity)); +} +.text-yellow-200 { + --text-opacity: 1; + color: rgba(253, 230, 138, var(--text-opacity)); +} +.text-yellow-300 { + --text-opacity: 1; + color: rgba(252, 211, 77, var(--text-opacity)); +} +.text-yellow-400 { + --text-opacity: 1; + color: rgba(251, 191, 36, var(--text-opacity)); +} +.text-yellow-500 { + --text-opacity: 1; + color: rgba(245, 158, 11, var(--text-opacity)); +} +.text-yellow-600 { + --text-opacity: 1; + color: rgba(217, 119, 6, var(--text-opacity)); +} +.text-yellow-700 { + --text-opacity: 1; + color: rgba(180, 83, 9, var(--text-opacity)); +} +.text-yellow-800 { + --text-opacity: 1; + color: rgba(146, 64, 14, var(--text-opacity)); +} +.text-yellow-900 { + --text-opacity: 1; + color: rgba(120, 53, 15, var(--text-opacity)); +} +.text-green-50 { + --text-opacity: 1; + color: rgba(236, 253, 245, var(--text-opacity)); +} +.text-green-100 { + --text-opacity: 1; + color: rgba(209, 250, 229, var(--text-opacity)); +} +.text-green-200 { + --text-opacity: 1; + color: rgba(167, 243, 208, var(--text-opacity)); +} +.text-green-300 { + --text-opacity: 1; + color: rgba(110, 231, 183, var(--text-opacity)); +} +.text-green-400 { + --text-opacity: 1; + color: rgba(52, 211, 153, var(--text-opacity)); +} +.text-green-500 { + --text-opacity: 1; + color: rgba(16, 185, 129, var(--text-opacity)); +} +.text-green-600 { + --text-opacity: 1; + color: rgba(5, 150, 105, var(--text-opacity)); +} +.text-green-700 { + --text-opacity: 1; + color: rgba(4, 120, 87, var(--text-opacity)); +} +.text-green-800 { + --text-opacity: 1; + color: rgba(6, 95, 70, var(--text-opacity)); +} +.text-green-900 { + --text-opacity: 1; + color: rgba(6, 78, 59, var(--text-opacity)); +} +.text-blue-50 { + --text-opacity: 1; + color: rgba(239, 246, 255, var(--text-opacity)); +} +.text-blue-100 { + --text-opacity: 1; + color: rgba(219, 234, 254, var(--text-opacity)); +} +.text-blue-200 { + --text-opacity: 1; + color: rgba(191, 219, 254, var(--text-opacity)); +} +.text-blue-300 { + --text-opacity: 1; + color: rgba(147, 197, 253, var(--text-opacity)); +} +.text-blue-400 { + --text-opacity: 1; + color: rgba(96, 165, 250, var(--text-opacity)); +} +.text-blue-500 { + --text-opacity: 1; + color: rgba(59, 130, 246, var(--text-opacity)); +} +.text-blue-600 { + --text-opacity: 1; + color: rgba(37, 99, 235, var(--text-opacity)); +} +.text-blue-700 { + --text-opacity: 1; + color: rgba(29, 78, 216, var(--text-opacity)); +} +.text-blue-800 { + --text-opacity: 1; + color: rgba(30, 64, 175, var(--text-opacity)); +} +.text-blue-900 { + --text-opacity: 1; + color: rgba(30, 58, 138, var(--text-opacity)); +} +.text-indigo-50 { + --text-opacity: 1; + color: rgba(238, 242, 255, var(--text-opacity)); +} +.text-indigo-100 { + --text-opacity: 1; + color: rgba(224, 231, 255, var(--text-opacity)); +} +.text-indigo-200 { + --text-opacity: 1; + color: rgba(199, 210, 254, var(--text-opacity)); +} +.text-indigo-300 { + --text-opacity: 1; + color: rgba(165, 180, 252, var(--text-opacity)); +} +.text-indigo-400 { + --text-opacity: 1; + color: rgba(129, 140, 248, var(--text-opacity)); +} +.text-indigo-500 { + --text-opacity: 1; + color: rgba(99, 102, 241, var(--text-opacity)); +} +.text-indigo-600 { + --text-opacity: 1; + color: rgba(79, 70, 229, var(--text-opacity)); +} +.text-indigo-700 { + --text-opacity: 1; + color: rgba(67, 56, 202, var(--text-opacity)); +} +.text-indigo-800 { + --text-opacity: 1; + color: rgba(55, 48, 163, var(--text-opacity)); +} +.text-indigo-900 { + --text-opacity: 1; + color: rgba(49, 46, 129, var(--text-opacity)); +} +.text-purple-50 { + --text-opacity: 1; + color: rgba(245, 243, 255, var(--text-opacity)); +} +.text-purple-100 { + --text-opacity: 1; + color: rgba(237, 233, 254, var(--text-opacity)); +} +.text-purple-200 { + --text-opacity: 1; + color: rgba(221, 214, 254, var(--text-opacity)); +} +.text-purple-300 { + --text-opacity: 1; + color: rgba(196, 181, 253, var(--text-opacity)); +} +.text-purple-400 { + --text-opacity: 1; + color: rgba(167, 139, 250, var(--text-opacity)); +} +.text-purple-500 { + --text-opacity: 1; + color: rgba(139, 92, 246, var(--text-opacity)); +} +.text-purple-600 { + --text-opacity: 1; + color: rgba(124, 58, 237, var(--text-opacity)); +} +.text-purple-700 { + --text-opacity: 1; + color: rgba(109, 40, 217, var(--text-opacity)); +} +.text-purple-800 { + --text-opacity: 1; + color: rgba(91, 33, 182, var(--text-opacity)); +} +.text-purple-900 { + --text-opacity: 1; + color: rgba(76, 29, 149, var(--text-opacity)); +} +.text-pink-50 { + --text-opacity: 1; + color: rgba(253, 242, 248, var(--text-opacity)); +} +.text-pink-100 { + --text-opacity: 1; + color: rgba(252, 231, 243, var(--text-opacity)); +} +.text-pink-200 { + --text-opacity: 1; + color: rgba(251, 207, 232, var(--text-opacity)); +} +.text-pink-300 { + --text-opacity: 1; + color: rgba(249, 168, 212, var(--text-opacity)); +} +.text-pink-400 { + --text-opacity: 1; + color: rgba(244, 114, 182, var(--text-opacity)); +} +.text-pink-500 { + --text-opacity: 1; + color: rgba(236, 72, 153, var(--text-opacity)); +} +.text-pink-600 { + --text-opacity: 1; + color: rgba(219, 39, 119, var(--text-opacity)); +} +.text-pink-700 { + --text-opacity: 1; + color: rgba(190, 24, 93, var(--text-opacity)); +} +.text-pink-800 { + --text-opacity: 1; + color: rgba(157, 23, 77, var(--text-opacity)); +} +.text-pink-900 { + --text-opacity: 1; + color: rgba(131, 24, 67, var(--text-opacity)); +} + +/* text opacity */ +.text-opacity-0 { + --text-opacity: 0; +} +.text-opacity-5 { + --text-opacity: 0.05; +} +.text-opacity-10 { + --text-opacity: 0.1; +} +.text-opacity-20 { + --text-opacity: 0.2; +} +.text-opacity-25 { + --text-opacity: 0.25; +} +.text-opacity-30 { + --text-opacity: 0.3; +} +.text-opacity-40 { + --text-opacity: 0.4; +} +.text-opacity-50 { + --text-opacity: 0.5; +} +.text-opacity-60 { + --text-opacity: 0.6; +} +.text-opacity-70 { + --text-opacity: 0.7; +} +.text-opacity-75 { + --text-opacity: 0.75; +} +.text-opacity-80 { + --text-opacity: 0.8; +} +.text-opacity-90 { + --text-opacity: 0.9; +} +.text-opacity-95 { + --text-opacity: 0.95; +} +.text-opacity-100 { + --text-opacity: 1; +} + +/* align */ +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +.text-left { + text-align: left; +} +.text-justify { + text-align: justify; +} + +/*! refactor below */ +/* text-colors */ +.text-white { + color: var(--white-color2); +} +.text-black { + color: var(--black-color2); +} +.text-blue { + color: var(--blue-color); +} +.text-subtitle { + font-size: 0.8em; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.009em; +} +.text-title { + font-size: 1.2rem; + font-weight: 400; + line-height: 1.334; + letter-spacing: 0em; +} +.text-para { + font-size: 0.875rem; +} diff --git a/src/css/utility.css b/src/css/utility.css index ed0fae0..6a2d28e 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -40,41 +40,10 @@ .bg-grey1 { background-color: var(--light-grey1); } -.bg-gre2 { +.bg-grey2 { background-color: var(--light-grey2); } -/* text-colors */ -.text-white { - color: var(--white-color2); -} -.text-black { - color: var(--black-color2); -} -.text-blue { - color: var(--blue-color); -} -.text-subtitle { - font-size: 0.8em; - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.009em; -} -.text-title { - font-size: 1.2rem; - font-weight: 400; - line-height: 1.334; - letter-spacing: 0em; -} -/* font */ -.text-center { - text-align: center; -} -.text-bold { - font-weight: bold; -} -.text-para { - font-size: 0.875rem; -} + /* icon */ .icon-sm { width: 24px; @@ -97,93 +66,6 @@ height: 98px; } -/* fill */ -.fill-white { - fill: var(--white-color1); -} -.fill-black { - fill: var(--black-color1); -} - -/* margin */ -.mr-6 { - margin-right: 1.5rem; -} -.mr-5 { - margin-right: 1.25rem; -} -.mr-4 { - margin-right: 1rem; -} -.mr-3 { - margin-right: 0.75rem; -} -.mr-2 { - margin-right: 0.5rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-2 { - margin-bottom: 0.5rem; -} -.ml-auto { - margin-left: auto; -} -/* padding */ -.pt-3 { - padding-top: 0.75rem; -} -.pt-4 { - padding-top: 1rem; -} -.pb-4 { - padding-bottom: 1rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} -.pl-4 { - padding-left: 1rem; -} -.pl-8 { - padding-left: 2rem; -} -/* border */ -.border-top { - border-top: 1px solid rgba(189, 185, 185, 0.589); -} -.border-bottom { - border-bottom: 1px solid rgba(189, 185, 185, 0.589); -} -/* width */ -[class*="w-1/2"] { - width: 50%; -} -[class*="w-1/3"] { - width: 33.333333%; -} -[class*="w-2/3"] { - width: 66.666666%; -} -.w-full { - width: 100%; -} - -/* height */ -.h-28 { - height: 7rem; -} -.h-64 { - height: 16rem; -} - -/* breakpoints */ - /* container */ .container { } @@ -210,14 +92,6 @@ max-width: 1536px; } -/* box sizing */ -.box-border { - box-sizing: border-box; -} -.box-content { - box-sizing: content-box; -} - /* display */ .hidden { display: none; @@ -238,115 +112,6 @@ display: inline-flex; } -/* table */ -/* todo inlcude table if need be */ - -/* float */ -.float-right { - float: right; -} -.float-left { - float: left; -} -.float-none { - float: none; -} - -/* clear */ -.clear-left { - clear: left; -} -.clear-right { - clear: right; -} -.clear-both { - clear: both; -} -.clear-none { - clear: none; -} - -/* object-fit */ -.object-contain { - object-fit: contain; -} -.object-cover { - object-fit: cover; -} -.object-fill { - object-fit: fill; -} -.object-none { - object-fit: none; -} -.object-scale-down { - object-fit: scale-down; -} - -/* object-position */ -/* todo */ - -/* overflow */ -.overflow-auto { - overflow: auto; -} -.overflow-hidden { - overflow: hidden; -} -.overflow-visible { - overflow: visible; -} -.overflow-scroll { - overflow: scroll; -} -.overflow-x-auto { - overflow-x: auto; -} -.overflow-y-auto { - overflow-y: auto; -} -.overflow-x-hidden { - overflow-x: hidden; -} -.overflow-y-hidden { - overflow-y: hidden; -} -.overflow-x-visible { - overflow-x: visible; -} -.overflow-y-visible { - overflow-y: visible; -} -.overflow-x-scroll { - overflow-x: scroll; -} -.overflow-y-scroll { - overflow-y: scroll; -} - -/* overscroll */ -/* todo */ - -/* position */ -.static { - position: static; -} -.fixed { - position: fixed; -} -.absolute { - position: absolute; -} -.relative { - position: relative; -} -.stickt { - position: sticky; -} - -/* top right bottom left */ -/* todo */ - /* visibility */ .visible { visibility: visible; @@ -355,29 +120,6 @@ visibility: hidden; } -/* zindex */ -.z-0 { - z-index: 0; -} -.z-10 { - z-index: 10; -} -.z-20 { - z-index: 20; -} -.z-30 { - z-index: 30; -} -.z-40 { - z-index: 40; -} -.z-50 { - z-index: 50; -} -.z-auto { - z-index: auto; -} - /* ------------------------------flexbox--------------------------------- */ /* display */ /* .flex { @@ -412,6 +154,74 @@ flex-wrap: nowrap; } +/* align items */ +.items-start { + align-items: flex-start; +} +.items-end { + align-items: flex-end; +} +.items-center { + align-items: center; +} +.items-baseline { + align-items: baseline; +} +.items-stretch { + align-items: stretch; +} +/* align self */ +.self-auto { + align-self: auto; +} +.self-start { + align-self: flex-start; +} +.self-end { + align-self: flex-end; +} +.self-center { + align-self: center; +} +.self-stretch { + align-self: stretch; +} +/* justify content */ +.justify-start { + justify-content: flex-start; +} +.justify-end { + justify-content: flex-end; +} +.justify-center { + justify-content: center; +} +.justify-between { + justify-content: space-between; +} +.justify-around { + justify-content: space-around; +} +.justify-evenly { + justify-content: space-evenly; +} +/* justify self */ +.justify-self-auto { + justify-self: auto; +} +.justify-self-start { + justify-self: start; +} +.justify-self-end { + justify-self: end; +} +.justify-self-center { + justify-self: center; +} +.justify-self-stretch { + justify-self: stretch; +} + /* flex */ .flex-1 { flex: 1 1 0%; @@ -442,49 +252,482 @@ flex-shrink: 0; } -/* order */ -.order-1 { - order: 1; +/* colors bg */ +.bg-black { + --bg-opacity: 1; + background-color: rgba(0, 0, 0, var(--bg-opacity)); +} +.bg-white { + --bg-opacity: 1; + background-color: rgba(255, 255, 255, var(--bg-opacity)); +} +.bg-gray-50 { + --bg-opacity: 1; + background-color: rgba(249, 250, 251, var(--bg-opacity)); +} +.bg-gray-100 { + --bg-opacity: 1; + background-color: rgba(243, 244, 246, var(--bg-opacity)); +} +.bg-gray-200 { + --bg-opacity: 1; + background-color: rgba(229, 231, 235, var(--bg-opacity)); +} +.bg-gray-300 { + --bg-opacity: 1; + background-color: rgba(209, 213, 219, var(--bg-opacity)); +} +.bg-gray-400 { + --bg-opacity: 1; + background-color: rgba(156, 163, 175, var(--bg-opacity)); +} +.bg-gray-500 { + --bg-opacity: 1; + background-color: rgba(107, 114, 128, var(--bg-opacity)); +} +.bg-gray-600 { + --bg-opacity: 1; + background-color: rgba(75, 85, 99, var(--bg-opacity)); +} +.bg-gray-700 { + --bg-opacity: 1; + background-color: rgba(55, 65, 81, var(--bg-opacity)); +} +.bg-gray-800 { + --bg-opacity: 1; + background-color: rgba(31, 41, 55, var(--bg-opacity)); +} +.bg-gray-900 { + --bg-opacity: 1; + background-color: rgba(17, 24, 39, var(--bg-opacity)); } -.order-2 { - order: 2; +.bg-red-50 { + --bg-opacity: 1; + background-color: rgba(254, 242, 242, var(--bg-opacity)); } -.order-3 { - order: 3; +.bg-red-100 { + --bg-opacity: 1; + background-color: rgba(254, 226, 226, var(--bg-opacity)); } -.order-4 { - order: 4; +.bg-red-200 { + --bg-opacity: 1; + background-color: rgba(254, 202, 202, var(--bg-opacity)); } -.order-5 { - order: 5; +.bg-red-300 { + --bg-opacity: 1; + background-color: rgba(252, 165, 165, var(--bg-opacity)); } -.order-6 { - order: 6; +.bg-red-400 { + --bg-opacity: 1; + background-color: rgba(248, 113, 113, var(--bg-opacity)); } -.order-7 { - order: 7; +.bg-red-500 { + --bg-opacity: 1; + background-color: rgba(239, 68, 68, var(--bg-opacity)); } -.order-8 { - order: 8; +.bg-red-600 { + --bg-opacity: 1; + background-color: rgba(220, 38, 38, var(--bg-opacity)); } -.order-9 { - order: 9; +.bg-red-700 { + --bg-opacity: 1; + background-color: rgba(185, 28, 28, var(--bg-opacity)); } -.order-10 { - order: 10; +.bg-red-800 { + --bg-opacity: 1; + background-color: rgba(153, 27, 27, var(--bg-opacity)); } -.order-11 { - order: 11; +.bg-red-900 { + --bg-opacity: 1; + background-color: rgba(127, 29, 29, var(--bg-opacity)); } -.order-12 { - order: 12; +.bg-yellow-50 { + --bg-opacity: 1; + background-color: rgba(255, 251, 235, var(--bg-opacity)); +} +.bg-yellow-100 { + --bg-opacity: 1; + background-color: rgba(254, 243, 199, var(--bg-opacity)); +} +.bg-yellow-200 { + --bg-opacity: 1; + background-color: rgba(253, 230, 138, var(--bg-opacity)); +} +.bg-yellow-300 { + --bg-opacity: 1; + background-color: rgba(252, 211, 77, var(--bg-opacity)); +} +.bg-yellow-400 { + --bg-opacity: 1; + background-color: rgba(251, 191, 36, var(--bg-opacity)); +} +.bg-yellow-500 { + --bg-opacity: 1; + background-color: rgba(245, 158, 11, var(--bg-opacity)); +} +.bg-yellow-600 { + --bg-opacity: 1; + background-color: rgba(217, 119, 6, var(--bg-opacity)); +} +.bg-yellow-700 { + --bg-opacity: 1; + background-color: rgba(180, 83, 9, var(--bg-opacity)); +} +.bg-yellow-800 { + --bg-opacity: 1; + background-color: rgba(146, 64, 14, var(--bg-opacity)); +} +.bg-yellow-900 { + --bg-opacity: 1; + background-color: rgba(120, 53, 15, var(--bg-opacity)); +} +.bg-green-50 { + --bg-opacity: 1; + background-color: rgba(236, 253, 245, var(--bg-opacity)); +} +.bg-green-100 { + --bg-opacity: 1; + background-color: rgba(209, 250, 229, var(--bg-opacity)); +} +.bg-green-200 { + --bg-opacity: 1; + background-color: rgba(167, 243, 208, var(--bg-opacity)); +} +.bg-green-300 { + --bg-opacity: 1; + background-color: rgba(110, 231, 183, var(--bg-opacity)); +} +.bg-green-400 { + --bg-opacity: 1; + background-color: rgba(52, 211, 153, var(--bg-opacity)); +} +.bg-green-500 { + --bg-opacity: 1; + background-color: rgba(16, 185, 129, var(--bg-opacity)); +} +.bg-green-600 { + --bg-opacity: 1; + background-color: rgba(5, 150, 105, var(--bg-opacity)); +} +.bg-green-700 { + --bg-opacity: 1; + background-color: rgba(4, 120, 87, var(--bg-opacity)); +} +.bg-green-800 { + --bg-opacity: 1; + background-color: rgba(6, 95, 70, var(--bg-opacity)); +} +.bg-green-900 { + --bg-opacity: 1; + background-color: rgba(6, 78, 59, var(--bg-opacity)); +} +.bg-blue-50 { + --bg-opacity: 1; + background-color: rgba(239, 246, 255, var(--bg-opacity)); +} +.bg-blue-100 { + --bg-opacity: 1; + background-color: rgba(219, 234, 254, var(--bg-opacity)); +} +.bg-blue-200 { + --bg-opacity: 1; + background-color: rgba(191, 219, 254, var(--bg-opacity)); +} +.bg-blue-300 { + --bg-opacity: 1; + background-color: rgba(147, 197, 253, var(--bg-opacity)); +} +.bg-blue-400 { + --bg-opacity: 1; + background-color: rgba(96, 165, 250, var(--bg-opacity)); +} +.bg-blue-500 { + --bg-opacity: 1; + background-color: rgba(59, 130, 246, var(--bg-opacity)); +} +.bg-blue-600 { + --bg-opacity: 1; + background-color: rgba(37, 99, 235, var(--bg-opacity)); +} +.bg-blue-700 { + --bg-opacity: 1; + background-color: rgba(29, 78, 216, var(--bg-opacity)); +} +.bg-blue-800 { + --bg-opacity: 1; + background-color: rgba(30, 64, 175, var(--bg-opacity)); +} +.bg-blue-900 { + --bg-opacity: 1; + background-color: rgba(30, 58, 138, var(--bg-opacity)); +} +.bg-indigo-50 { + --bg-opacity: 1; + background-color: rgba(238, 242, 255, var(--bg-opacity)); +} +.bg-indigo-100 { + --bg-opacity: 1; + background-color: rgba(224, 231, 255, var(--bg-opacity)); +} +.bg-indigo-200 { + --bg-opacity: 1; + background-color: rgba(199, 210, 254, var(--bg-opacity)); +} +.bg-indigo-300 { + --bg-opacity: 1; + background-color: rgba(165, 180, 252, var(--bg-opacity)); +} +.bg-indigo-400 { + --bg-opacity: 1; + background-color: rgba(129, 140, 248, var(--bg-opacity)); +} +.bg-indigo-500 { + --bg-opacity: 1; + background-color: rgba(99, 102, 241, var(--bg-opacity)); +} +.bg-indigo-600 { + --bg-opacity: 1; + background-color: rgba(79, 70, 229, var(--bg-opacity)); +} +.bg-indigo-700 { + --bg-opacity: 1; + background-color: rgba(67, 56, 202, var(--bg-opacity)); +} +.bg-indigo-800 { + --bg-opacity: 1; + background-color: rgba(55, 48, 163, var(--bg-opacity)); +} +.bg-indigo-900 { + --bg-opacity: 1; + background-color: rgba(49, 46, 129, var(--bg-opacity)); +} +.bg-purple-50 { + --bg-opacity: 1; + background-color: rgba(245, 243, 255, var(--bg-opacity)); +} +.bg-purple-100 { + --bg-opacity: 1; + background-color: rgba(237, 233, 254, var(--bg-opacity)); +} +.bg-purple-200 { + --bg-opacity: 1; + background-color: rgba(221, 214, 254, var(--bg-opacity)); +} +.bg-purple-300 { + --bg-opacity: 1; + background-color: rgba(196, 181, 253, var(--bg-opacity)); +} +.bg-purple-400 { + --bg-opacity: 1; + background-color: rgba(167, 139, 250, var(--bg-opacity)); +} +.bg-purple-500 { + --bg-opacity: 1; + background-color: rgba(139, 92, 246, var(--bg-opacity)); +} +.bg-purple-600 { + --bg-opacity: 1; + background-color: rgba(124, 58, 237, var(--bg-opacity)); +} +.bg-purple-700 { + --bg-opacity: 1; + background-color: rgba(109, 40, 217, var(--bg-opacity)); +} +.bg-purple-800 { + --bg-opacity: 1; + background-color: rgba(91, 33, 182, var(--bg-opacity)); +} +.bg-purple-900 { + --bg-opacity: 1; + background-color: rgba(76, 29, 149, var(--bg-opacity)); +} +.bg-pink-50 { + --bg-opacity: 1; + background-color: rgba(253, 242, 248, var(--bg-opacity)); +} +.bg-pink-100 { + --bg-opacity: 1; + background-color: rgba(252, 231, 243, var(--bg-opacity)); +} +.bg-pink-200 { + --bg-opacity: 1; + background-color: rgba(251, 207, 232, var(--bg-opacity)); +} +.bg-pink-300 { + --bg-opacity: 1; + background-color: rgba(249, 168, 212, var(--bg-opacity)); +} +.bg-pink-400 { + --bg-opacity: 1; + background-color: rgba(244, 114, 182, var(--bg-opacity)); +} +.bg-pink-500 { + --bg-opacity: 1; + background-color: rgba(236, 72, 153, var(--bg-opacity)); +} +.bg-pink-600 { + --bg-opacity: 1; + background-color: rgba(219, 39, 119, var(--bg-opacity)); +} +.bg-pink-700 { + --bg-opacity: 1; + background-color: rgba(190, 24, 93, var(--bg-opacity)); +} +.bg-pink-800 { + --bg-opacity: 1; + background-color: rgba(157, 23, 77, var(--bg-opacity)); +} +.bg-pink-900 { + --bg-opacity: 1; + background-color: rgba(131, 24, 67, var(--bg-opacity)); +} +.bg-transparent { + background-color: transparent; +} +.bg-current { + background-color: currentColor; +} +.bg-inherit { + background-color: inherit; +} +.bg-initial { + background-color: initial; +} +.bg-none { + background-image: none; +} +.bg-opacity-0 { + --bg-opacity: 0; +} +.bg-opacity-5 { + --bg-opacity: 0.05; +} +.bg-opacity-10 { + --bg-opacity: 0.1; +} +.bg-opacity-20 { + --bg-opacity: 0.2; +} +.bg-opacity-25 { + --bg-opacity: 0.25; +} +.bg-opacity-30 { + --bg-opacity: 0.3; +} +.bg-opacity-40 { + --bg-opacity: 0.4; +} +.bg-opacity-50 { + --bg-opacity: 0.5; +} +.bg-opacity-60 { + --bg-opacity: 0.6; +} +.bg-opacity-70 { + --bg-opacity: 0.7; +} +.bg-opacity-75 { + --bg-opacity: 0.75; +} +.bg-opacity-80 { + --bg-opacity: 0.8; +} +.bg-opacity-90 { + --bg-opacity: 0.9; +} +.bg-opacity-95 { + --bg-opacity: 0.95; +} +.bg-opacity-100 { + --bg-opacity: 1; } -/* ------------------------------------------------grid------------------------------------- */ -/* todo */ +/*------------------------------------- temp move from here--------------- */ +/* fill svg */ +.fill-white { + fill: var(--white-color1); +} +.fill-black { + fill: var(--black-color1); +} + +/* margin */ +.mr-6 { + margin-right: 1.5rem; +} +.mr-5 { + margin-right: 1.25rem; +} +.mr-4 { + margin-right: 1rem; +} +.mr-3 { + margin-right: 0.75rem; +} +.mr-2 { + margin-right: 0.5rem; +} +.mb-4 { + margin-bottom: 1rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.ml-auto { + margin-left: auto; +} +/* padding */ -/* -------------------------------------------box-alignment--------------------------------- */ +.pt-3 { + padding-top: 0.75rem; +} +.pt-4 { + padding-top: 1rem; +} +.pb-4 { + padding-bottom: 1rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.pl-4 { + padding-left: 1rem; +} +.pl-8 { + padding-left: 2rem; +} +/* border */ +.border-top { + border-top: 1px solid rgba(189, 185, 185, 0.589); +} +.border-bottom { + border-bottom: 1px solid rgba(189, 185, 185, 0.589); +} +/* width */ +[class*="w-1/2"] { + width: 50%; +} +[class*="w-1/3"] { + width: 33.333333%; +} +[class*="w-2/3"] { + width: 66.666666%; +} +.w-full { + width: 100%; +} +/* height */ +.h-28 { + height: 7rem; +} +.h-64 { + height: 16rem; +} /* --------------------------------------spacing------------------------------------------- */ .p-0 { padding: 0px; @@ -525,54 +768,3 @@ .p-12 { padding: 3rem; } -.p-14 { - padding: 3.5rem; -} -.p-16 { - padding: 4rem; -} -.p-20 { - padding: 5rem; -} -.p-24 { - padding: 6rem; -} -.p-28 { - padding: 7rem; -} -.p-32 { - padding: 8rem; -} -.p-36 { - padding: 9rem; -} -.p-40 { - padding: 10rem; -} -.p-44 { - padding: 11rem; -} -.p-48 { - padding: 12rem; -} -.p-52 { - padding: 13rem; -} -.p-56 { - padding: 14rem; -} -.p-60 { - padding: 15rem; -} -.p-64 { - padding: 16rem; -} -.p-72 { - padding: 18rem; -} -.p-80 { - padding: 20rem; -} -.p-96 { - padding: 24rem; -} From 172db2b081fda2396960d29779d80f022bb20882 Mon Sep 17 00:00:00 2001 From: vill Date: Mon, 29 Mar 2021 14:41:30 +0530 Subject: [PATCH 06/22] fix: fixed consistency and colors --- src/components/Avatar.js | 13 ++- src/components/Badge.js | 34 +++---- src/components/Button.js | 99 ++++++++++++-------- src/components/Card.js | 101 +++++++++++---------- src/components/Typography.js | 54 +++++++++++ src/components/Utility.js | 14 +++ src/css/alert.css | 4 - src/css/button.css | 150 +++++++++++++++++++------------ src/css/card.css | 17 +++- src/css/doc.css | 0 src/css/input.css | 35 ++++---- src/css/style.css | 138 +++++++++++++++++++++++++++- src/css/typography.css | 35 +------- src/css/utility.css | 170 +---------------------------------- src/images/logo.svg | 15 ++++ src/index.html | 2 +- 16 files changed, 498 insertions(+), 383 deletions(-) create mode 100644 src/css/doc.css create mode 100644 src/images/logo.svg diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 578f9d1..ee243ee 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -73,7 +73,18 @@ export default function Avatar() { - 2 + 2 +
+
+ + 2
diff --git a/src/components/Badge.js b/src/components/Badge.js index aae85bd..39c1a96 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -15,7 +15,7 @@ export default function Badge() { > - 9 + 9
- 10+ + 10+
{/* -------------------badge with icon in different sizes---------------- */}

Badges with different sizes

@@ -39,7 +39,7 @@ export default function Badge() { > - 1 + 1
- 2 + 2
- 3 + 3
{/* --------------------------badge with dot-------------- */}

Badge with only dot

@@ -74,7 +74,7 @@ export default function Badge() { > - +
- +
- +
{/* -------------------badge alignment---------------- */}

Badges with different alignment

@@ -109,7 +109,7 @@ export default function Badge() { > - 1 + 1
- 2 + 2
- 3 + 3
{/* -------------------badge avatar---------------- */}

Badges with avatar

SK - 1 + 1
- 2 + 2
- 3 + 3
{/* -------------------badge-dot avatar---------------- */}

Badge-dot with avatar

SK - +
- +
- +
); diff --git a/src/components/Button.js b/src/components/Button.js index 30cb7c0..10459fd 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -6,95 +6,94 @@ export default function Button() {

Buttons

{/* ---------------------sizes--------------------------------- */}

Primary buttons with different sizes

- - + {/* ----------------border radius roudned pill -------------------*/}

Primary buttons with border radius variants

- - - + {/* ----------------btn with color variants -------------------*/} {/* add color variants with their hover effects---------add b&w buttons------------------------------------- */}

Primary buttons with color variants and hover

- - - - - - {/* ----------------w/o box shadow----------------------------- */}

Primary buttons without box shadow / elevation

- - - {/* ----------------outlined----------------------------- */}

Outlined buttons with hover

- + - - - - + {/* ----------------link/txt btn----------------------------- */}

Link / text buttons

- - {/* ----------------icon and text btn----------------------------- */} @@ -107,24 +106,24 @@ export default function Button() {
- - - {/* ----------------disabled btns -------------------*/}

Disabled btns

- + {/* ---------------with text-button utility-------------------- */} +

Using text-button utility

+ + + + + + + +
); } diff --git a/src/components/Card.js b/src/components/Card.js index 47531f7..175c572 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -29,19 +29,17 @@ export default function Card() {

Fast. Very fast.

-

Blazing fast speed you can depend on.

+

Blazing fast speed you can depend on.

-
-
-
Title
-
Subtitle for card
-
+
+
Title
+
Subtitle for card
-

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, dolores ad. Assumenda dolorum sunt, fuga velit sequi officia ea facere nostrum ad... @@ -49,7 +47,7 @@ export default function Card() {

-
@@ -57,13 +55,14 @@ export default function Card() {
{/* ------------------------------full card structure--------------------------- */}

Full Card Structure

- {/*
*/} -
+
-
SK
+
SK
-
Shrimp and Chorizo
-
September 14, 2016
+
Shrimp and Chorizo
+
+ September 14, 2016 +
-

+

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like. @@ -133,14 +132,14 @@ export default function Card() {

{/* 2 */} -
+
-
Lizard
-
+
Lizard
+
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
@@ -148,27 +147,33 @@ export default function Card() {
- - +
{/* 3 */} -
+
-
Delete
+
Delete
-

Are you sure you want to delete this file?

+

+ Are you sure you want to delete this file? +

- - +
@@ -176,14 +181,16 @@ export default function Card() {
{/* -----------------------card with dismiss btn------------------------- */}

Card with dismiss button

-
+
EF
-
Elliot Fu
-
Friends of Veronika
+
Elliot Fu
+
+ Friends of Veronika +
- Elliot requested permission to view your contact details +

+ Elliot requested permission to view your contact details +

@@ -211,30 +220,30 @@ export default function Card() { {/* --------------------------card with overlay------------------- */}

Cards with overlay

{/* card with full overlay */} -
+
-
Lizard
-
Squamate Reptiles
+
Lizard
+
Squamate Reptiles
{/* card with specific overlay on card__medua */} -
+
-
Lizard
-
Squamate Reptiles
+
Lizard
+
Squamate Reptiles
-
+
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
@@ -255,26 +264,24 @@ export default function Card() {
-
-
-
Lizard
-
+
+
Lizard
-
+
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica. Lorem - ipsum dolor sit amet consectetur, adipisicing elit. Ipsa at ad a - molestiae autem aliquid odit veritatis magni quisquam. + ipsum dolor sit amet consectetur, adipisicing elit.
-
+
Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica. Lorem - ipsum dolor sit amet consectetur, adipisicing elit. + species, ranging across all continents except Antarctica.
- - +
diff --git a/src/components/Typography.js b/src/components/Typography.js index 6ec445f..f383392 100644 --- a/src/components/Typography.js +++ b/src/components/Typography.js @@ -29,6 +29,60 @@ export default function Typography() {
This is a text caption.

Overline

This is an overline.
+

Font Weight

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos.{" "} +
+

Text Align

+
+ Text center: Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Corporis aliquam praesentium temporibus consequuntur incidunt. +
+
+ Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Corporis aliquam praesentium temporibus consequuntur incidunt. +
+
+ Text Right: Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Corporis aliquam praesentium temporibus consequuntur incidunt. +
+
+ Text Justify: Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Corporis aliquam praesentium temporibus consequuntur incidunt. +
); } diff --git a/src/components/Utility.js b/src/components/Utility.js index da86a7f..4375a90 100644 --- a/src/components/Utility.js +++ b/src/components/Utility.js @@ -5,6 +5,20 @@ export default function Utility() {

Utility Classes

Colors Bg and Text

+
+
+
+
+
+
+
+
+
+
+
+
+
+

Container

Icons

Flexbox

diff --git a/src/css/alert.css b/src/css/alert.css index ea0c5ba..38585e8 100644 --- a/src/css/alert.css +++ b/src/css/alert.css @@ -89,8 +89,6 @@ } .alert__actions button { border-style: none; - /* padding: 3px; */ - /* font-size: 1.1rem; */ color: inherit; flex: 0 0 auto; overflow: visible; @@ -115,12 +113,10 @@ } .alert__actions button:hover { background-color: rgba(255, 255, 255, 0.1); - /* opacity: 0.3; */ } /*!------------------------------------- add active class-------------------------- */ .alert__actions svg { fill: currentColor; - /* background-color: transparent; */ width: 1.325em; height: 1.325em; display: inline-block; diff --git a/src/css/button.css b/src/css/button.css index 7b643df..563985e 100644 --- a/src/css/button.css +++ b/src/css/button.css @@ -70,37 +70,67 @@ } .btn.btn--danger { color: var(--white-color1); - background-color: #f44336; + /* background-color: #f44336; */ + background-color: rgba(220, 38, 38); /*600*/ fill: currentColor; } .btn.btn--danger:hover { - background-color: #be342a; + /* background-color: #be342a; */ + background-color: rgba(185, 28, 28); } .btn.btn--default { color: rgba(0, 0, 0, 0.87); - background-color: #e0e0e0; + /* background-color: #e0e0e0; */ + background-color: rgba(229, 231, 235); /*200*/ fill: currentColor; } .btn.btn--default:hover { - background-color: #b4b3b3; + /* background-color: #b4b3b3; */ + background-color: rgba(209, 213, 219); + /* background-color: rgba(156, 163, 175); */ } .btn.btn--success { color: var(--white-color1); - background-color: #4caf50; + /* background-color: #4caf50; */ + background-color: rgba(5, 150, 105); /*600*/ fill: currentColor; } .btn.btn--success:hover { - background-color: #378039; + /* background-color: #378039; */ + background-color: rgba(4, 120, 87); } .btn.btn--dark { - background-color: var(--black-color1); + /* background-color: var(--black-color1); */ + background-color: rgba(31, 41, 55); /*800*/ color: var(--white-color1); fill: currentColor; } .btn.btn--dark:hover { - background-color: var(--black-color2); + /* background-color: var(--black-color3); */ + background-color: rgba(55, 65, 81); +} +.btn.btn--blue { + /* background-color: var(--blue-color2); */ + /* background-color: rgba(59, 130, 246); */ + background-color: rgba(37, 99, 235); /*600*/ + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--blue:hover { + /* background-color: var(--blue-color0); */ + background-color: rgba(29, 78, 216); +} +.btn.btn--yellow { + /* background-color: var(--yellow-color1); */ + background-color: rgba(245, 158, 11); /*500*/ + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--yellow:hover { + /* background-color: var(--yellow-color2); */ + background-color: rgba(217, 119, 6); } .btn.btn--black { background-color: var(--black-color3); @@ -108,7 +138,8 @@ fill: currentColor; } .btn.btn--black:hover { - background-color: var(--black-color2); + background-color: var(--white-color3); + color: var(--black-color3); } .btn.btn--white { background-color: var(--white-color3); @@ -116,23 +147,8 @@ fill: currentColor; } .btn.btn--white:hover { - background-color: #e0e0e0; -} -.btn.btn--blue { - background-color: var(--blue-color2); - color: var(--white-color1); - fill: currentColor; -} -.btn.btn--blue:hover { - background-color: var(--blue-color0); -} -.btn.btn--yellow { - background-color: var(--yellow-color1); - color: var(--white-color1); - fill: currentColor; -} -.btn.btn--yellow:hover { - background-color: var(--yellow-color2); + background-color: var(--black-color3); + color: var(--white-color3); } .btn.btn--no-shadow { @@ -149,36 +165,69 @@ /* background-color: rgba(25, 118, 210, 0.08); */ } .btn--outlined.btn--danger { - color: #f44336; - border: 1px solid #f44336; + /* color: #f44336; + border: 1px solid #f44336; */ + color: rgba(220, 38, 38); + border: 1px solid rgba(220, 38, 38); fill: currentColor; } .btn--outlined.btn--danger:hover { - background-color: rgba(210, 25, 25, 0.06); + /* background-color: rgba(210, 25, 25, 0.06); */ + background-color: rgba(220, 38, 38, 0.1); } .btn--outlined.btn--default { - color: #e0e0e0; - border: 1px solid #e0e0e0; + /* color: #e0e0e0; + border: 1px solid #e0e0e0; */ + color: rgba(229, 231, 235); + border: 1px solid rgba(229, 231, 235); fill: currentColor; } .btn--outlined.btn--default:hover { - background-color: rgba(212, 208, 208, 0.06); + /* background-color: rgba(212, 208, 208, 0.06); */ + background-color: rgba(229, 231, 235, 0.1); } .btn--outlined.btn--success { - color: #4caf50; - border: 1px solid #4caf50; + /* color: #4caf50; + border: 1px solid #4caf50; */ + color: rgba(5, 150, 105); + border: 1px solid rgba(5, 150, 105); fill: currentColor; } .btn--outlined.btn--success:hover { - background-color: rgba(47, 210, 25, 0.06); + /* background-color: rgba(47, 210, 25, 0.06); */ + background-color: rgba(5, 150, 105, 0.1); } .btn--outlined.btn--dark { - color: var(--black-color1); - border: 1px solid var(--black-color1); + /* color: var(--black-color1); + border: 1px solid var(--black-color1); */ + color: rgba(31, 41, 55); + border: 1px solid rgba(31, 41, 55); fill: currentColor; } .btn--outlined.btn--dark:hover { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(31, 41, 55, 0.1); +} +.btn--outlined.btn--blue { + /* color: var(--blue-color2); + border: 1px solid var(--blue-color2); */ + color: rgba(37, 99, 235); + border: 1px solid rgba(37, 99, 235); + fill: currentColor; +} +.btn--outlined.btn--blue:hover { + /* background-color: rgba(25, 121, 210, 0.06); */ + background-color: rgba(37, 99, 235, 0.1); +} +.btn--outlined.btn--yellow { + /* color: var(--yellow-color1); + border: 1px solid var(--yellow-color1); */ + color: rgba(245, 158, 11); + border: 1px solid rgba(245, 158, 11); + fill: currentColor; +} +.btn--outlined.btn--yellow:hover { + /* background-color: rgba(210, 182, 25, 0.06); */ + background-color: rgba(245, 158, 11, 0.1); } .btn--outlined.btn--black { color: var(--black-color3); @@ -186,7 +235,10 @@ fill: currentColor; } .btn--outlined.btn--black:hover { - background-color: rgba(0, 0, 0, 0.1); + /* background-color: rgba(0, 0, 0, 0.1); */ + /* color: rgba(209, 213, 219); */ + color: rgba(156, 163, 175); + background-color: var(--black-color3); } .btn--outlined.btn--white { color: var(--white-color3); @@ -194,23 +246,9 @@ fill: currentColor; } .btn--outlined.btn--white:hover { - background-color: rgba(255, 255, 255, 0.06); -} -.btn--outlined.btn--blue { - color: var(--blue-color2); - border: 1px solid var(--blue-color2); - fill: currentColor; -} -.btn--outlined.btn--blue:hover { - background-color: rgba(25, 121, 210, 0.06); -} -.btn--outlined.btn--yellow { - color: var(--yellow-color1); - border: 1px solid var(--yellow-color1); - fill: currentColor; -} -.btn--outlined.btn--yellow:hover { - background-color: rgba(210, 182, 25, 0.06); + /* background-color: rgba(255, 255, 255, 0.06); */ + color: var(--black-color3); + background-color: var(--white-color3); } .btn.btn--link { background-color: transparent; diff --git a/src/css/card.css b/src/css/card.css index fcf3c12..c180242 100644 --- a/src/css/card.css +++ b/src/css/card.css @@ -12,14 +12,23 @@ border-radius: 0; } .card__content { + /* padding: 0.5em; */ padding: 1em; + /* margin: 0.5em; */ } +/* .card__content > * { + padding: 0.5em; +} */ .card__header { display: flex; - align-items: center; + /* align-items: center; */ /* margin-bottom: 0.6em; */ - padding: 0.5em; + /* padding: 0.5em; */ + padding: 1em; } +/* .card__header > * { + margin: 0.5em; +} */ .card__title { /* padding: 0.5rem; */ } @@ -81,3 +90,7 @@ object-fit: cover; /* object-position: 0 0; */ } +.card__content > .card__header, +.card__content > .card__footer { + padding: 0; +} diff --git a/src/css/doc.css b/src/css/doc.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/input.css b/src/css/input.css index 7ed3f73..5ad61a9 100644 --- a/src/css/input.css +++ b/src/css/input.css @@ -1,10 +1,3 @@ -:root { - --pure-material-primary-rgb: 33, 150, 243; - --pure-material-onprimary-rgb: 255, 255, 255; - --pure-material-surface-rgb: 255, 255, 255; - --pure-material-onsurface-rgb: 0, 0, 0; -} - /* input container */ .input-checkbox { z-index: 0; @@ -312,13 +305,14 @@ /* left: -2px; */ right: 12px; /* top: -8px; */ - top: 1px; + top: -1px; display: block; margin: 0; border-radius: 50%; - width: 32px; - height: 32px; - background-color: rgba(0, 0, 0, 0.38); + width: 36px; + height: 36px; + /* background-color: rgba(0, 0, 0, 0.38); */ + background-color: rgba(128, 128, 128, 0.38); outline: none; opacity: 0; transform: scale(1); @@ -371,7 +365,7 @@ /* Checked */ .input-toggle > input:checked { /* right: -10px; */ - right: -4px; + right: -7px; /* background-color: rgb(33, 150, 243); */ /* background-color: rgb(5, 5, 5); */ background-color: rgb(128, 128, 128, 0.7); @@ -450,12 +444,14 @@ .input-text input { color: #fff; background-color: #292f3a; + /* background-color: rgba(17, 24, 39); */ width: 100%; letter-spacing: 1px; border: 0; /* padding: 7px 4px; */ padding: 0.6rem 0.6rem; - border-bottom: 1px solid #000; + /* border-bottom: 1px solid #000; */ + border-bottom: 1px solid rgba(75, 85, 99); } .input-text--light input { background-color: #fff; @@ -488,7 +484,8 @@ color: #fff; width: 100%; letter-spacing: 1px; - border: 1px solid #ccc; + /* border: 1px solid #ccc; */ + border: 1px solid rgba(156, 163, 175); padding: 0.6rem 0.8rem; /* border: 1px solid #ccc; */ position: relative; @@ -496,16 +493,20 @@ } .input-text--bcg.input-text--light input { color: #000; - border-color: #000; + /* border-color: #000; */ } .input-text--bcg input:focus { transition: 0.5s; /* opacity: 1; */ - background-color: rgba(204, 204, 204, 0.1); + /* background-color: rgba(204, 204, 204, 0.1); */ + background-color: rgba(17, 24, 39); + border-color: rgba(249, 250, 251); } .input-text--bcg.input-text--light input:focus { - background-color: rgba(0, 0, 0, 0.05); + /* background-color: rgba(0, 0, 0, 0.05); */ + background-color: rgba(229, 231, 235); + border-color: rgba(17, 24, 39); } /* icon input */ .input-text__icon { diff --git a/src/css/style.css b/src/css/style.css index 87245ab..7b8b619 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,4 +1,3 @@ -@import url("./utility.css"); @import url("./avatar.css"); @import url("./alert.css"); @import url("./badge.css"); @@ -6,6 +5,8 @@ @import url("./card.css"); @import url("./input.css"); @import url("./typography.css"); +@import url("./utility.css"); + /* border box */ html { box-sizing: border-box; @@ -38,3 +39,138 @@ html { /* background-color: var(--white-color1); */ color: var(--white-color1); } + +/*------------------------------------- temp move from here--------------- */ +/* fill svg */ +.fill-white { + fill: var(--white-color1); +} +.fill-black { + fill: var(--black-color1); +} + +/* margin */ +.mr-6 { + margin-right: 1.5rem; +} +.mr-5 { + margin-right: 1.25rem; +} +.mr-4 { + margin-right: 1rem; +} +.mr-3 { + margin-right: 0.75rem; +} +.mr-2 { + margin-right: 0.5rem; +} +.mb-4 { + margin-bottom: 1rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.ml-auto { + margin-left: auto; +} +/* padding */ + +.pt-3 { + padding-top: 0.75rem; +} +.pt-4 { + padding-top: 1rem; +} +.pb-4 { + padding-bottom: 1rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.pl-4 { + padding-left: 1rem; +} +.pl-8 { + padding-left: 2rem; +} +/* border */ +.border-top { + border-top: 1px solid rgba(189, 185, 185, 0.589); +} +.border-bottom { + border-bottom: 1px solid rgba(189, 185, 185, 0.589); +} +/* width */ +[class*="w-1/2"] { + width: 50%; +} +[class*="w-1/3"] { + width: 33.333333%; +} +[class*="w-2/3"] { + width: 66.666666%; +} +.w-full { + width: 100%; +} + +/* height */ +.h-28 { + height: 7rem; +} +.h-64 { + height: 16rem; +} +/* --------------------------------------spacing------------------------------------------- */ +.p-0 { + padding: 0px; +} +.p-1 { + padding: 0.25rem; +} +.p-2 { + padding: 0.5rem; +} +.p-3 { + padding: 0.75rem; +} +.p-4 { + padding: 1rem; +} +.p-5 { + padding: 1.25rem; +} +.p-6 { + padding: 1.5rem; +} +.p-7 { + padding: 1.75rem; +} +.p-8 { + padding: 2rem; +} +.p-9 { + padding: 2.25rem; +} +.p-10 { + padding: 2.5rem; +} +.p-11 { + padding: 2.75rem; +} +.p-12 { + padding: 3rem; +} diff --git a/src/css/typography.css b/src/css/typography.css index f2cdc45..683b7ca 100644 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -140,13 +140,9 @@ .text-extrabold { font-weight: 800; } -.text-black { +/* .text-black { font-weight: 900; -} -/* todo change this to above bold after fixed whole app */ -.text-bold { - font-weight: bold; -} +} */ /* text color */ .text-transparent { @@ -544,30 +540,3 @@ .text-justify { text-align: justify; } - -/*! refactor below */ -/* text-colors */ -.text-white { - color: var(--white-color2); -} -.text-black { - color: var(--black-color2); -} -.text-blue { - color: var(--blue-color); -} -.text-subtitle { - font-size: 0.8em; - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.009em; -} -.text-title { - font-size: 1.2rem; - font-weight: 400; - line-height: 1.334; - letter-spacing: 0em; -} -.text-para { - font-size: 0.875rem; -} diff --git a/src/css/utility.css b/src/css/utility.css index 6a2d28e..dde4487 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -1,7 +1,4 @@ :root { - --text-color: black; - --bg-color: #e5e7eb; - --white-color1: #f1f5f6; --white-color2: #f3f2f3; --white-color3: #f6f6f6; @@ -9,41 +6,10 @@ --black-color1: #131213; --black-color2: #0b0c0d; --black-color3: #040404; - - --blue-color1: #1876d2; - --blue-color0: #394baf; - --blue-color2: #4960e0; - --blue-color: #90caf9; - - --yellow-color1: #f9ad1a; - --yellow-color2: #ca8e17; - - --light-grey1: #424242; - --light-grey2: #1c1d1f; } /* ---------------------------------------utitlity classes--------------------------------------- */ -/* bg-colors */ -.bg-white { - background-color: var(--white-color3); -} -.bg-black { - background-color: var(--black-color3); -} -.bg-blue { - background-color: var(--blue-color1); -} -.bg-blue2 { - background-color: var(--blue-color2); -} -.bg-grey1 { - background-color: var(--light-grey1); -} -.bg-grey2 { - background-color: var(--light-grey2); -} - /* icon */ .icon-sm { width: 24px; @@ -67,14 +33,11 @@ } /* container */ -.container { +.container-card { + max-width: 345px; } .container-xs { - max-width: 275px; -} -.container-xs0 { - max-width: 345px; - /* max-width: 380px; */ + max-width: 300px; } .container-sm { max-width: 640px; @@ -641,130 +604,3 @@ .bg-opacity-100 { --bg-opacity: 1; } - -/*------------------------------------- temp move from here--------------- */ -/* fill svg */ -.fill-white { - fill: var(--white-color1); -} -.fill-black { - fill: var(--black-color1); -} - -/* margin */ -.mr-6 { - margin-right: 1.5rem; -} -.mr-5 { - margin-right: 1.25rem; -} -.mr-4 { - margin-right: 1rem; -} -.mr-3 { - margin-right: 0.75rem; -} -.mr-2 { - margin-right: 0.5rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-2 { - margin-bottom: 0.5rem; -} -.ml-auto { - margin-left: auto; -} -/* padding */ - -.pt-3 { - padding-top: 0.75rem; -} -.pt-4 { - padding-top: 1rem; -} -.pb-4 { - padding-bottom: 1rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} -.pl-4 { - padding-left: 1rem; -} -.pl-8 { - padding-left: 2rem; -} -/* border */ -.border-top { - border-top: 1px solid rgba(189, 185, 185, 0.589); -} -.border-bottom { - border-bottom: 1px solid rgba(189, 185, 185, 0.589); -} -/* width */ -[class*="w-1/2"] { - width: 50%; -} -[class*="w-1/3"] { - width: 33.333333%; -} -[class*="w-2/3"] { - width: 66.666666%; -} -.w-full { - width: 100%; -} - -/* height */ -.h-28 { - height: 7rem; -} -.h-64 { - height: 16rem; -} -/* --------------------------------------spacing------------------------------------------- */ -.p-0 { - padding: 0px; -} -.p-1 { - padding: 0.25rem; -} -.p-2 { - padding: 0.5rem; -} -.p-3 { - padding: 0.75rem; -} -.p-4 { - padding: 1rem; -} -.p-5 { - padding: 1.25rem; -} -.p-6 { - padding: 1.5rem; -} -.p-7 { - padding: 1.75rem; -} -.p-8 { - padding: 2rem; -} -.p-9 { - padding: 2.25rem; -} -.p-10 { - padding: 2.5rem; -} -.p-11 { - padding: 2.75rem; -} -.p-12 { - padding: 3rem; -} diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..de80d8b --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 1a2870c..5498501 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Monochrome.css + Pars.css Date: Tue, 30 Mar 2021 00:35:26 +0530 Subject: [PATCH 07/22] feat: finished header --- src/App.js | 24 +++--- src/components/Header.js | 92 ++++++++++++++++++++++ src/components/Utility.js | 14 ---- src/components/theme-context.js | 21 +++++ src/css/alert.css | 6 +- src/css/header.css | 134 ++++++++++++++++++++++++++++++++ src/css/pars.css | 8 ++ src/css/style.css | 28 ++----- src/css/utility.css | 7 ++ src/images/logo.svg | 2 +- src/images/moon.svg | 3 + src/images/search-gray.svg | 3 + src/images/search.svg | 3 + src/images/sun.svg | 10 +++ src/index.js | 26 ++++++- 15 files changed, 330 insertions(+), 51 deletions(-) create mode 100644 src/components/Header.js create mode 100644 src/components/theme-context.js create mode 100644 src/css/header.css create mode 100644 src/css/pars.css create mode 100644 src/images/moon.svg create mode 100644 src/images/search-gray.svg create mode 100644 src/images/search.svg create mode 100644 src/images/sun.svg diff --git a/src/App.js b/src/App.js index 0e041ea..120c1e8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,20 +1,22 @@ import React from "react"; import "./css/style.css"; +import "./css/pars.css"; -// import Example from "./components/Example"; -import Avatar from "./components/Avatar"; -import Alert from "./components/Alert"; -import Badge from "./components/Badge"; -import Button from "./components/Button"; -import Card from "./components/Card"; -import Input from "./components/Input"; -import Typography from "./components/Typography"; -import Utility from "./components/Utility"; +// import Avatar from "./components/Avatar"; +// import Alert from "./components/Alert"; +// import Badge from "./components/Badge"; +// import Button from "./components/Button"; +// import Card from "./components/Card"; +// import Input from "./components/Input"; +// import Typography from "./components/Typography"; +// import Utility from "./components/Utility"; +import Header from "./components/Header"; export default function App() { return (
-

Monochrome.js

+ {/* +

Pars.js


@@ -38,6 +40,8 @@ export default function App() {

+ */} +
); } diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..1129776 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,92 @@ +import React from "react"; +import "../css/header.css"; +import { useTheme } from "./theme-context"; +import logoIcon from "../images/logo.svg"; + +export default function Header() { + const { currentTheme, userTheme, toggleTheme } = useTheme(); + // const toggleIconColor = currentTheme === "light" ? "#f39c12" : "#c1c2c9"; + const headerStyle = { + backgroundColor: userTheme[currentTheme].bg, + color: userTheme[currentTheme].text, + "--text-color:": userTheme[currentTheme].text, + "--bg": userTheme[currentTheme].toggleColor, + borderBottom: userTheme[currentTheme].border, + }; + return ( +
+
+ +
+ PARS.css +
+
+
+ + {/* */} +
+ + +
+
+
+ + +
+
+ ); +} diff --git a/src/components/Utility.js b/src/components/Utility.js index 4375a90..da86a7f 100644 --- a/src/components/Utility.js +++ b/src/components/Utility.js @@ -5,20 +5,6 @@ export default function Utility() {

Utility Classes

Colors Bg and Text

-
-
-
-
-
-
-
-
-
-
-
-
-
-

Container

Icons

Flexbox

diff --git a/src/components/theme-context.js b/src/components/theme-context.js new file mode 100644 index 0000000..1b2cd07 --- /dev/null +++ b/src/components/theme-context.js @@ -0,0 +1,21 @@ +import React, { createContext, useState, useContext } from "react"; + +export const ThemeContext = createContext(); + +export function ThemeProvider({ children, userTheme }) { + const [currentTheme, setCurrentTheme] = useState("light"); + const toggleTheme = () => { + setCurrentTheme((currentTheme) => + currentTheme === "light" ? "dark" : "light" + ); + }; + return ( + + {children} + + ); +} + +export function useTheme() { + return useContext(ThemeContext); +} diff --git a/src/css/alert.css b/src/css/alert.css index 38585e8..3a7d706 100644 --- a/src/css/alert.css +++ b/src/css/alert.css @@ -112,7 +112,8 @@ padding: 6px 8px; } .alert__actions button:hover { - background-color: rgba(255, 255, 255, 0.1); + /* background-color: rgba(255, 255, 255, 0.1); */ + background-color: rgba(128, 128, 128, 0.2); } /*!------------------------------------- add active class-------------------------- */ .alert__actions svg { @@ -171,6 +172,3 @@ border: 1px solid #4caf50; color: #377c3a; } -.alert.alert--light button:hover { - border: 1px solid rgba(0, 0, 0, 0.1); -} diff --git a/src/css/header.css b/src/css/header.css new file mode 100644 index 0000000..39b3a1f --- /dev/null +++ b/src/css/header.css @@ -0,0 +1,134 @@ +header { + height: var(--header-height); + position: relative; + border-bottom: 1px solid rgba(209, 213, 219); +} + +.input-toggle .toggle-icon::after { + background-color: var(--bg); +} +.input-toggle > input:checked + span::after { + background-color: var(--bg); +} + +.logo { + width: var(--sidebar-width); + cursor: pointer; +} +.logo__icon { + fill: #3e6eff; +} +.logo__text { + letter-spacing: 1.25px; + font-weight: 700; + font-size: 1.25rem; + margin-left: 0.5rem; +} +.navigation { + flex-grow: 1; + height: 100%; +} +.header-btns { + width: var(--sidebar-width); +} +.main-nav { + height: 100%; +} +.main-nav ul { + list-style: none; + display: flex; + height: 100%; +} +.main-nav__item { + font-weight: 600; + font-size: 1.15rem; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + position: relative; +} +.main-nav__item button { + border: none; + outline: none; + background-color: transparent; + cursor: pointer; + height: 100%; + font-weight: 600; + font-family: "Inter", sans-serif; + font-size: 1.15rem; + color: var(--text-color); +} + +.main-nav__item + .main-nav__item { + margin-left: 2.75rem; +} +.active-main-nav > button { + color: var(--primary-color); +} + +.main-nav__item::before { + content: ""; + display: block; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: var(--primary-color); + /* z-index: -1; */ + transition: transform 0.3s ease; +} + +.main-nav__item::before { + transform: scaleX(0); + transform-origin: bottom right; +} + +.main-nav__item:hover::before { + transform: scaleX(1); + transform-origin: bottom left; +} + +.active-main-nav::before { + transform: scaleX(1); +} +.main-nav__item button:focus { + /* background-color: rgba(128, 128, 128, 0.2); */ + /* border-radius: 12px; */ + /* padding: 12px 0; */ + text-decoration-line: underline; + text-decoration-thickness: 2px; + text-decoration-style: wavy; + text-decoration-color: var(--primary-color); +} + +.input-text.input-text--light .focus-border { + bottom: -55%; + background-color: rgba(128, 128, 128, 0.3); + height: 3px; +} +.input-text.input-text--light input { + border-bottom: none; + background-color: transparent; + font-size: 1rem; + font-weight: 600; + font-family: "Inter", sans-serif; + background-image: url("../images/search-gray.svg"); + background-position: 0 50%; + background-repeat: no-repeat; + padding-left: 32px; +} + +.github-btn:focus { + background-color: rgba(128, 128, 128, 0.3); +} + +.theme-toggle { + display: flex; + justify-content: center; + align-items: center; + margin-right: 0.5rem; +} diff --git a/src/css/pars.css b/src/css/pars.css new file mode 100644 index 0000000..da35178 --- /dev/null +++ b/src/css/pars.css @@ -0,0 +1,8 @@ +@import url("./avatar.css"); +@import url("./alert.css"); +@import url("./badge.css"); +@import url("./button.css"); +@import url("./card.css"); +@import url("./input.css"); +@import url("./typography.css"); +@import url("./utility.css"); diff --git a/src/css/style.css b/src/css/style.css index 7b8b619..3403c03 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,11 +1,8 @@ -@import url("./avatar.css"); -@import url("./alert.css"); -@import url("./badge.css"); -@import url("./button.css"); -@import url("./card.css"); -@import url("./input.css"); -@import url("./typography.css"); -@import url("./utility.css"); +:root { + --header-height: 80px; + --sidebar-width: 18%; + --primary-color: #3e6eff; +} /* border box */ html { @@ -19,7 +16,6 @@ html { body { margin: 0; - /* font: 16px/1.7 "Source Sans Pro", Helvetica, Helvetica Neue, Arial, sans-serif; */ font: 16px/1.7 "Inter", sans-serif; /* color: var(--white-color1); */ /* background-color: var(--bg-color); */ @@ -32,23 +28,13 @@ html { } .App { - padding: 2rem; width: 100%; min-height: 100vh; - background-color: var(--black-color1); - /* background-color: var(--white-color1); */ + /* background-color: var(--black-color1); */ + background-color: var(--white-color1); color: var(--white-color1); } -/*------------------------------------- temp move from here--------------- */ -/* fill svg */ -.fill-white { - fill: var(--white-color1); -} -.fill-black { - fill: var(--black-color1); -} - /* margin */ .mr-6 { margin-right: 1.5rem; diff --git a/src/css/utility.css b/src/css/utility.css index dde4487..5f1b4d1 100644 --- a/src/css/utility.css +++ b/src/css/utility.css @@ -215,6 +215,13 @@ flex-shrink: 0; } +/* fill svg */ +.fill-white { + fill: var(--white-color1); +} +.fill-black { + fill: var(--black-color1); +} /* colors bg */ .bg-black { --bg-opacity: 1; diff --git a/src/images/logo.svg b/src/images/logo.svg index de80d8b..72ed4eb 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1,6 +1,6 @@ - + diff --git a/src/images/moon.svg b/src/images/moon.svg new file mode 100644 index 0000000..ebd1890 --- /dev/null +++ b/src/images/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/search-gray.svg b/src/images/search-gray.svg new file mode 100644 index 0000000..5209712 --- /dev/null +++ b/src/images/search-gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/search.svg b/src/images/search.svg new file mode 100644 index 0000000..2308ac6 --- /dev/null +++ b/src/images/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sun.svg b/src/images/sun.svg new file mode 100644 index 0000000..6e9bbb3 --- /dev/null +++ b/src/images/sun.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/index.js b/src/index.js index e467082..f6d8167 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,36 @@ import React from "react"; import { render } from "react-dom"; import App from "./App"; +import { ThemeProvider } from "./components/theme-context"; + +const userTheme = { + light: { + bg: "#FFFFFF", + text: "rgba(107, 114, 128)", + toggleColor: "#f39c12", + // text: "#91929e", + // 500 above, 400 below - gray + // text: "rgba(156, 163, 175)" + oppositeColor: "#000", + border: "1px solid rgba(209, 213, 219)", + }, + dark: { + bg: "#040406", + text: "rgba(156, 163, 175)", + toggleColor: "#c1c2c9", + // 400 gray + oppositeColor: "#fff", + border: "1px solid rgba(31, 41, 55)", + }, +}; const rootEl = document.getElementById("root"); render( - + + + , rootEl ); From eace9da6989f82abe28f8fe65b8432d77e639743 Mon Sep 17 00:00:00 2001 From: vill Date: Tue, 30 Mar 2021 18:50:36 +0530 Subject: [PATCH 08/22] feat: added all component data in one ds plus small fixes --- src/App.js | 25 +- src/components/Alert.js | 5 + src/components/Component.js | 10 + src/components/ComponentsRoute.js | 14 + src/components/Header.js | 40 +- src/components/RightSidebar.js | 10 + src/components/Sidebar.js | 10 + src/components/componentData.js | 3139 +++++++++++++++++++++++++++++ src/css/header.css | 18 +- src/css/style.css | 8 +- 10 files changed, 3241 insertions(+), 38 deletions(-) create mode 100644 src/components/Component.js create mode 100644 src/components/ComponentsRoute.js create mode 100644 src/components/RightSidebar.js create mode 100644 src/components/Sidebar.js create mode 100644 src/components/componentData.js diff --git a/src/App.js b/src/App.js index 120c1e8..4145a6e 100644 --- a/src/App.js +++ b/src/App.js @@ -2,20 +2,20 @@ import React from "react"; import "./css/style.css"; import "./css/pars.css"; -// import Avatar from "./components/Avatar"; -// import Alert from "./components/Alert"; -// import Badge from "./components/Badge"; -// import Button from "./components/Button"; -// import Card from "./components/Card"; -// import Input from "./components/Input"; -// import Typography from "./components/Typography"; -// import Utility from "./components/Utility"; -import Header from "./components/Header"; +import Avatar from "./components/Avatar"; +import Alert from "./components/Alert"; +import Badge from "./components/Badge"; +import Button from "./components/Button"; +import Card from "./components/Card"; +import Input from "./components/Input"; +import Typography from "./components/Typography"; +import Utility from "./components/Utility"; +// import Header from "./components/Header"; +// import ComponentsRoute from "./components/ComponentsRoute"; export default function App() { return (
- {/*

Pars.js


@@ -40,8 +40,9 @@ export default function App() {

- */} -
+ + {/*
+ */}
); } diff --git a/src/components/Alert.js b/src/components/Alert.js index 521cb48..a3978b2 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -368,6 +368,11 @@ export default function Alert() {
This is a success alert!
+
diff --git a/src/components/Component.js b/src/components/Component.js new file mode 100644 index 0000000..3d906b6 --- /dev/null +++ b/src/components/Component.js @@ -0,0 +1,10 @@ +import React from "react"; + +export default function Component() { + return ( +
+
hi
+
hi
+
+ ); +} diff --git a/src/components/ComponentsRoute.js b/src/components/ComponentsRoute.js new file mode 100644 index 0000000..8bb569b --- /dev/null +++ b/src/components/ComponentsRoute.js @@ -0,0 +1,14 @@ +import React from "react"; +import Sidebar from "./Sidebar"; +import Component from "./Component"; +import RightSidebar from "./RightSidebar"; + +export default function ComponentsRoute() { + return ( +
+ + + +
+ ); +} diff --git a/src/components/Header.js b/src/components/Header.js index 1129776..51ec24c 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -27,7 +27,7 @@ export default function Header() {
diff --git a/src/components/RightSidebar.js b/src/components/RightSidebar.js new file mode 100644 index 0000000..9dcb420 --- /dev/null +++ b/src/components/RightSidebar.js @@ -0,0 +1,10 @@ +import React from "react"; + +export default function RightSidebar() { + return ( +
+
hi
+
hi
+
+ ); +} diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js new file mode 100644 index 0000000..bf0d6d2 --- /dev/null +++ b/src/components/Sidebar.js @@ -0,0 +1,10 @@ +import React from "react"; + +export default function Sidebar() { + return ( +
+
hi
+
hi
+
+ ); +} diff --git a/src/components/componentData.js b/src/components/componentData.js new file mode 100644 index 0000000..349dc4b --- /dev/null +++ b/src/components/componentData.js @@ -0,0 +1,3139 @@ +import React from "react"; +// import avatarImg for avatars +//import foodsampleimg and reptile img for cards + +export const componentData = { + Avatar: { + title: "Avatar", + desc: + "The Avatar component is typically used to display images, icons or initials representing people or other entities.", + intro: + 'Created using a div with
.avatar
class, wrapping an image, icon or text.', + lightVariants: [ + { + name: "With Image", + desc: + 'Image avatars can be created by wrapping an image with a div with class name
.avatar
.', + code: ( +
+
+ +
+
+ ), + }, + { + name: "With Text", + desc: + 'Avatars containing simple character can be created by wrapping the characters in a div with class name
.avatar
. The text color and background color is not set and can be customized', + code: ( +
+
Sk
+
+ ), + }, + { + name: "Sizes", + desc: + 'Avatars come in five sizes-
.avatar--sm
,
.avatar--md
(default),
avatar--lg
,
avatar--xl
and
avatar--2xl
. Just add the corresponding class in
.avatar
wrapping div.', + code: ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ), + }, + { + name: "With Icons", + desc: + 'Icon avatar can be created by adding
.avatar--icon
class in wrapping div. Background is transparent by default and can be set along with text color.', + code: ( +
+
+ +
+
+ +
+
+ +
+
+ ), + }, + { + name: "Square Variants", + desc: + 'If you need square or rounded variants add the
.avatar--square
or
.avatar--rounded
class.', + code: ( +
+
+ S +
+
+ +
+
+ +
+
+ ), + }, + { + name: "With Badge", + desc: + 'Add a span element inside
.avatar
div and add classes as needed. Refer to Badge component for the badge classes.', + code: ( +
+
+ + +
+
+ + 2 +
+
+ + 2 +
+
+ + +
+
+ ), + }, + ], + darkVariants: [ + { + name: "With Image", + desc: + 'Image avatars can be created by wrapping an image with a div with class name
.avatar
.', + code: ( +
+
+ +
+
+ ), + }, + { + name: "With Text", + desc: + 'Avatars containing simple character can be created by wrapping the characters in a div with class name
.avatar
. The text color and background color is not set and can be customized', + code: ( +
+
Sk
+
+ ), + }, + { + name: "Sizes", + desc: + 'Avatars come in five sizes-
.avatar--sm
,
.avatar--md
(default),
avatar--lg
,
avatar--xl
and
avatar--2xl
. Just add the corresponding class in
.avatar
wrapping div.', + code: ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ), + }, + { + name: "With Icons", + desc: + 'Icon avatar can be created by adding
.avatar--icon
class in wrapping div. Background is transparent by default and can be set along with text color.', + code: ( +
+
+ +
+
+ +
+
+ +
+
+ ), + }, + { + name: "Square Variants", + desc: + 'If you need square or rounded variants add the
.avatar--square
or
.avatar--rounded
class.', + code: ( +
+
+ S +
+
+ +
+
+ +
+
+ ), + }, + { + name: "With Badge", + desc: + 'Add a span element inside
.avatar
div and add classes as needed. Refer to Badge component for the badge classes.', + code: ( +
+
+ + +
+
+ + 2 +
+
+ + 2 +
+
+ + +
+
+ ), + }, + ], + classes: [ + ".avatar", + ".avatar--sm", + ".avatar--md", + ".avatar--lg", + ".avatar--xl", + ".avatar--2xl", + ".avatar--icon", + ".avatar--square", + ".avatar--rounded", + ], + }, + Alert: { + title: "Alert", + desc: + "An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. Used to give feedback to the user about an action or state.", + intro: + 'Created using a div with
.alert
class wrapping an
.alert__msg
div. Use
.alert--light
for light scheme variant. Takes width of parent container.', + lightVariants: [ + { + name: "Different Severity", + desc: + 'Alerts come in five severity levels depending on which their color changes. First is the default alert. Red for
.alert--error
, yellow for
.alert--warning
, blue for
.alert--info
and green for
.alert--success
.', + code: ( +
+
+
This is a normal alert!
+
+
+
This is an error alert!
+
+
+
This is a warning alert!
+
+
+
This is an info alert!
+
+
+
This is a success alert!
+
+
+ ), + }, + { + name: "Rounded", + desc: + 'Alerts have no rounded edges by default. Use
.alert--rounded
to add a slight round edge. For more use
.alert--rounded-full
.', + code: ( +
+
+
This is an alert!
+
+
+
This is an error alert!
+
+
+
This is a warning alert!
+
+
+
This is an info alert!
+
+
+
This is a success alert!
+
+
+ ), + }, + { + name: "With title", + desc: + 'To add a title to the alert, add
.alert__title
div inside
.alert__msg
.', + code: ( +
+
+
+
Alert
+ This is an alert! +
+
+
+
+
Error
+ This is an error alert! +
+
+
+
+
Warning
+ This is a warning alert! +
+
+
+
+
Info
+ This is an info alert! +
+
+
+
+
Success
+ This is a success alert! +
+
+
+ ), + }, + { + name: "With Icon", + desc: + 'To add an icon, wrap an svg or img in
.alert--icon
div inside
.alert
.', + code: ( +
+
+
+ +
+
This is an alert!
+
+
+
+ +
+
This is an error alert!
+
+
+
+ +
+
This is a warning alert!
+
+
+
+ +
+
+
Info
+ This is an info alert! +
+
+
+
+ +
+
+
Success
+ This is a success alert! +
+
+
+ ), + }, + { + name: "With Actions", + desc: + 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. Wrap the buttons in
.alert__actions
div inside
.alert
.', + code: ( +
+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ + +
+
+
+ ), + }, + { + name: "Outlined", + desc: + 'To create the outlined variant, add
.alert--outline
class to the
.alert
div', + code: ( +
+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ +
+
+
+ ), + }, + ], + darkVariants: [ + { + name: "Different Severity", + desc: + 'Alerts come in five severity levels depending on which their color changes. First is the default alert. Red for
.alert--error
, yellow for
.alert--warning
, blue for
.alert--info
and green for
.alert--success
.', + code: ( +
+
+
This is a normal alert!
+
+
+
This is an error alert!
+
+
+
This is a warning alert!
+
+
+
This is an info alert!
+
+
+
This is a success alert!
+
+
+ ), + }, + { + name: "Rounded", + desc: + 'Alerts have no rounded edges by default. Use
.alert--rounded
to add a slight round edge. For more use
.alert--rounded-full
.', + code: ( +
+
+
This is an alert!
+
+
+
This is an error alert!
+
+
+
This is a warning alert!
+
+
+
This is an info alert!
+
+
+
This is a success alert!
+
+
+ ), + }, + { + name: "With title", + desc: + 'To add a title to the alert, add
.alert__title
div inside
.alert__msg
.', + code: ( +
+
+
+
Alert
+ This is an alert! +
+
+
+
+
Error
+ This is an error alert! +
+
+
+
+
Warning
+ This is a warning alert! +
+
+
+
+
Info
+ This is an info alert! +
+
+
+
+
Success
+ This is a success alert! +
+
+
+ ), + }, + { + name: "With Icon", + desc: + 'To add an icon, wrap an svg or img in
.alert--icon
div inside
.alert
.', + code: ( +
+
+
+ +
+
This is an alert!
+
+
+
+ +
+
This is an error alert!
+
+
+
+ +
+
This is a warning alert!
+
+
+
+ +
+
+
Info
+ This is an info alert! +
+
+
+
+ +
+
+
Success
+ This is a success alert! +
+
+
+ ), + }, + { + name: "With Actions", + desc: + 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. Wrap the buttons in
.alert__actions
div inside
.alert
.', + code: ( +
+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ + +
+
+
+ ), + }, + { + name: "Outlined", + desc: + 'To create the outlined variant, add
.alert--outline
class to the
.alert
div', + code: ( +
+
+
+ +
+
+
Alert
+ This is an alert! +
+
+ +
+
+
+
+ +
+
+
Error
+ This is an error alert! +
+
+ +
+
+
+
+ +
+
+
Warning
+ This is a warning alert! +
+
+ +
+
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+
+ +
+
This is a success alert!
+
+ +
+
+
+ ), + }, + ], + classes: [ + ".alert", + ".alert--light", + ".alert__msg", + ".alert__title", + ".alert__icon", + ".alert__actions", + ], + }, + Badge: { + title: "Badge", + desc: + "Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.", + intro: + 'Inside a
.badge-wrapper
div, add an svg/img and a span with class
.badge
.', + lightVariants: [ + { + name: "With Icon", + desc: + 'Wrap an svg/img inside a
.badge-wrapper
div and add a span with class
.badge
.', + code: ( +
+
+ + 9 +
+
+ + 10+ +
+
+ ), + }, + { + name: "Sizes", + desc: + 'To change the size add
.badge--sm
,
.badge--md
(default) or
.badge--lg
. Also add corresponding icon class from the utility classes.', + code: ( +
+
+ + 1 +
+
+ + 2 +
+
+ + 3 +
+
+ ), + }, + { + name: "Dot Variant", + desc: + 'To use a badge without text use class
.badge-dot
instead of
.badge
in the span element.', + code: ( +
+
+ + +
+
+ + +
+
+ + +
+
+ ), + }, + { + name: "Alignment", + desc: + 'To change the alignment from top-left(default) to bottom-left add
.badge--bottom
class to
.badge
.', + code: ( +
+
+ + + 1 + +
+
+ + + 2 + +
+
+ + + 3 + +
+
+ ), + }, + { + name: "With Avatar", + desc: + 'To add badge to avatar, add
.badge-wrapper
class to
.avatar
div. Then add span inside with
.badge
class.', + code: ( +
+
+ SK + 1 +
+
+ + 2 +
+
+ + 3 +
+
+ ), + }, + { + name: "Dot with Avatar", + desc: + 'To get the dot variant just replace
.badge
with
.badge-dot
.', + code: ( +
+
+ SK + +
+
+ + +
+
+ + +
+
+ ), + }, + ], + darkVariants: [ + { + name: "With Icon", + desc: + 'Wrap an svg/img inside a
.badge-wrapper
div and add a span with class
.badge
.', + code: ( +
+
+ + 9 +
+
+ + 10+ +
+
+ ), + }, + { + name: "Sizes", + desc: + 'To change the size add
.badge--sm
,
.badge--md
(default) or
.badge--lg
. Also add corresponding icon class from the utility classes.', + code: ( +
+
+ + 1 +
+
+ + 2 +
+
+ + 3 +
+
+ ), + }, + { + name: "Dot Variant", + desc: + 'To use a badge without text use class
.badge-dot
instead of
.badge
in the span element.', + code: ( +
+
+ + +
+
+ + +
+
+ + +
+
+ ), + }, + { + name: "Alignment", + desc: + 'To change the alignment from top-left(default) to bottom-left add
.badge--bottom
class to
.badge
.', + code: ( +
+
+ + + 1 + +
+
+ + + 2 + +
+
+ + + 3 + +
+
+ ), + }, + { + name: "With Avatar", + desc: + 'To add badge to avatar, add
.badge-wrapper
class to
.avatar
div. Then add span inside with
.badge
class.', + code: ( +
+
+ SK + 1 +
+
+ + 2 +
+
+ + 3 +
+
+ ), + }, + { + name: "Dot with Avatar", + desc: + 'To get the dot variant just replace
.badge
with
.badge-dot
.', + code: ( +
+
+ SK + +
+
+ + +
+
+ + +
+
+ ), + }, + ], + classes: [ + ".badge-wrapper", + ".badge", + ".badge-dot", + ".badge--sm", + ".badge--md", + ".badge--lg", + ".badge--bottom", + ], + }, + Button: { + title: "Button", + desc: + "Buttons allow users to take actions, and make choices, with a single tap. Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both.", + intro: + 'Add
.btn
class in a button element for a simple button. Add variants to give it color, size and hover effects.', + lightVariants: [ + { + name: "Sizes", + desc: + 'Three different sizes provided. Just add the following class to
.btn
element:
.btn--sm
for smallest, default is
.btn--md
with largest size being
.btn--lg
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Rounded", + desc: + 'Default button has no rounded edges. Add
.btn--rounded
class to
.btn
to get rounded edges. To get pill shaped button use
.btn--pill
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Colors", + desc: + 'There are eight preset variants.
.btn--default
,
.btn--danger
,
.btn--success
,
.btn--dark
,
.btn--blue
,
.btn--yellow
,
.btn--black
and
.btn--white
. Preset variant colors have hover effects as well.', + code: ( +
+ + + + + + + + +
+ ), + }, + { + name: "No Box-Shadow", + desc: + 'Buttons by default have box-shadow enabled. To remove add
.btn--no-shadow
class to
.btn
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Outline", + desc: + 'To use the outlined variant, add
.btn--outlined
class to
.btn
.', + code: ( +
+ + + + + + + + +
+ ), + }, + { + name: "Link", + desc: + 'To style link/text buttons, add
.btn--link
to
.btn
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Icon and Label", + desc: + 'Create a button with icon and label by adding a div with class
.btn__icon
that wraps an img/svg inside
.btn
. Depending on position of
.btn__icon
the icon will be positioned first or last.', + code: ( +
+ + + + +
+ ), + }, + { + name: "Icon only", + desc: + 'To get buttons with only icon, add
.btn--icon
class to
.btn
and put an img/svg inside.', + code: ( +
+ + + +
+ ), + }, + { + name: "Disabled", + desc: + 'To show that a button is disabled, add
.btn--disabled
class.', + code: ( +
+ + + +
+ ), + }, + { + name: "Text-button utility", + desc: + 'To change text style of button to preset style, add
.text-button
.', + code: ( +
+ + + + + + + + +
+ ), + }, + ], + darkVariants: [ + { + name: "Sizes", + desc: + 'Three different sizes provided. Just add the following class to
.btn
element:
.btn--sm
for smallest, default is
.btn--md
with largest size being
.btn--lg
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Rounded", + desc: + 'Default button has no rounded edges. Add
.btn--rounded
class to
.btn
to get rounded edges. To get pill shaped button use
.btn--pill
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Colors", + desc: + 'There are eight preset variants.
.btn--default
,
.btn--danger
,
.btn--success
,
.btn--dark
,
.btn--blue
,
.btn--yellow
,
.btn--black
and
.btn--white
. Preset variant colors have hover effects as well.', + code: ( +
+ + + + + + + + +
+ ), + }, + { + name: "No Box-Shadow", + desc: + 'Buttons by default have box-shadow enabled. To remove add
.btn--no-shadow
class to
.btn
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Outline", + desc: + 'To use the outlined variant, add
.btn--outlined
class to
.btn
.', + code: ( +
+ + + + + + + + +
+ ), + }, + { + name: "Link", + desc: + 'To style link/text buttons, add
.btn--link
to
.btn
.', + code: ( +
+ + + +
+ ), + }, + { + name: "Icon and Label", + desc: + 'Create a button with icon and label by adding a div with class
.btn__icon
that wraps an img/svg inside
.btn
. Depending on position of
.btn__icon
the icon will be positioned first or last.', + code: ( +
+ + + + +
+ ), + }, + { + name: "Icon only", + desc: + 'To get buttons with only icon, add
.btn--icon
class to
.btn
and put an img/svg inside.', + code: ( +
+ + + +
+ ), + }, + { + name: "Disabled", + desc: + 'To show that a button is disabled, add
.btn--disabled
class.', + code: ( +
+ + + +
+ ), + }, + { + name: "Text-button utility", + desc: + 'To change text style of button to preset style, add
.text-button
.', + code: ( +
+ + + + + + + + +
+ ), + }, + ], + classes: [ + ".btn", + ".btn--sm", + ".btn--md", + ".btn--lg", + ".btn--rounded", + ".btn--pill", + ".btn--default", + ".btn--danger", + ".btn--success", + ".btn--dark", + ".btn--blue", + ".btn--yellow", + ".btn-black", + ".btn--white", + ".btn--outlined", + ".btn--link", + ".btn__icon", + ".btn--icon", + ".btn--disabled", + ".text-button", + ], + }, + Card: { + title: "Card", + desc: "Cards contain content and actions about a single subject.", + intro: + 'A card is created by giving a div element a class of
.card
. Card has further classes you can use to build complex structures.
.card__header
,
.card__media
,
.card__overlay/div>,
.card__content
,
.card__title
,
.card__actions
and
.card__footer
can all be used in conjunction inside
.card
element on div. Card background color, text color and size is not set by default and needs to be set.', + lightVariants: [ + { + name: "Simple Card", + desc: + 'Simple variants can be created by using
.card
and inside add a div with class
.card__content
. Use
.card__title
inside
.card__content
or
.card__header
if required.
.card__footer
can be used to add a footer. If there are actions that need to be performed / buttons, use
.card__actions
, preferably inside footer or header.', + code: ( +
+
+
+ +

Fast. Very fast.

+

+ Blazing fast speed you can depend on. +

+
+
+ +
+
+
+
Title
+
Subtitle for card
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, + dolores ad. Assumenda dolorum sunt, fuga velit sequi officia + ea facere nostrum ad... +

+
+
+
+ +
+
+
+
+ ), + }, + { + name: "Full Structure", + desc: + 'The full structure includes
.card__media
which by default takes up the entire width if there\'s an img inside. Most elements of cards can be used inside the other. For eg.
.card__title
and
.card__actions
can be used iniside
.card__header
.', + code: ( +
+
+
+
SK
+
+
+ Shrimp and Chorizo +
+
+ September 14, 2016 +
+
+
+ +
+
+
+ +
+
+

+ This impressive paella is a perfect party dish and a fun meal + to cook together with your guests. Add 1 cup of frozen peas + along with the mussels, if you like. +

+
+
+
+
+ + +
+ +
+
+
+ {/* 2 */} +
+
+ +
+
+
+
Lizard
+
+ Lizards are a widespread group of squamate reptiles, with + over 6,000 species, ranging across all continents except + Antarctica +
+
+
+
+
+ + +
+
+
+ {/* 3 */} +
+
+
+
Delete
+
+
+
+

+ Are you sure you want to delete this file? +

+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Dismiss button", + desc: + 'Card with dismiss button can be created by wrapping close button isnide
.card__actions
and put inside
.card__header
element of
.card
', + code: ( +
+

Card with dismiss button

+
+
+
+ EF +
+
+
Elliot Fu
+
+ Friends of Veronika +
+
+
+ +
+
+
+

+ Elliot requested permission to view your contact details +

+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Overlay", + desc: + 'Overlay can be given to card by adding
.card__overlay
div inside
.card
. It will take up the whole card space as an overlay with opacity. If overlay element is added inside
.card__media
, then it will overlay only the parent media element.', + code: ( +
+
+
+ +
+
+
+
Lizard
+
Squamate Reptiles
+
+
+
+ {/* card with specific overlay on card__medua */} +
+
+ +
+
+
Lizard
+
Squamate Reptiles
+
+
+
+
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except Antarctica +
+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Horizontal Card", + desc: + 'To make the card horizontal add class
.card--horizontal
and accordingly structure the parts.', + code: ( +
+
+
+ +
+
+
+
Lizard
+
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except + Antarctica. Lorem ipsum dolor sit amet consectetur, + adipisicing elit. +
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except + Antarctica. +
+
+
+ + +
+
+
+
+
+ ), + }, + ], + darkVariants: [ + { + name: "Simple Card", + desc: + 'Simple variants can be created by using
.card
and inside add a div with class
.card__content
. Use
.card__title
inside
.card__content
or
.card__header
if required.
.card__footer
can be used to add a footer. If there are actions that need to be performed / buttons, use
.card__actions
, preferably inside footer or header.', + code: ( +
+
+
+ +

Fast. Very fast.

+

+ Blazing fast speed you can depend on. +

+
+
+ +
+
+
+
Title
+
Subtitle for card
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, + dolores ad. Assumenda dolorum sunt, fuga velit sequi officia + ea facere nostrum ad... +

+
+
+
+ +
+
+
+
+ ), + }, + { + name: "Full Structure", + desc: + 'The full structure includes
.card__media
which by default takes up the entire width if there\'s an img inside. Most elements of cards can be used inside the other. For eg.
.card__title
and
.card__actions
can be used iniside
.card__header
.', + code: ( +
+
+
+
SK
+
+
+ Shrimp and Chorizo +
+
+ September 14, 2016 +
+
+
+ +
+
+
+ +
+
+

+ This impressive paella is a perfect party dish and a fun meal + to cook together with your guests. Add 1 cup of frozen peas + along with the mussels, if you like. +

+
+
+
+
+ + +
+ +
+
+
+ {/* 2 */} +
+
+ +
+
+
+
Lizard
+
+ Lizards are a widespread group of squamate reptiles, with + over 6,000 species, ranging across all continents except + Antarctica +
+
+
+
+
+ + +
+
+
+ {/* 3 */} +
+
+
+
Delete
+
+
+
+

+ Are you sure you want to delete this file? +

+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Dismiss button", + desc: + 'Card with dismiss button can be created by wrapping close button isnide
.card__actions
and put inside
.card__header
element of
.card
', + code: ( +
+

Card with dismiss button

+
+
+
+ EF +
+
+
Elliot Fu
+
+ Friends of Veronika +
+
+
+ +
+
+
+

+ Elliot requested permission to view your contact details +

+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Overlay", + desc: + 'Overlay can be given to card by adding
.card__overlay
div inside
.card
. It will take up the whole card space as an overlay with opacity. If overlay element is added inside
.card__media
, then it will overlay only the parent media element.', + code: ( +
+
+
+ +
+
+
+
Lizard
+
Squamate Reptiles
+
+
+
+ {/* card with specific overlay on card__medua */} +
+
+ +
+
+
Lizard
+
Squamate Reptiles
+
+
+
+
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except Antarctica +
+
+
+
+ + +
+
+
+
+ ), + }, + { + name: "Horizontal Card", + desc: + 'To make the card horizontal add class
.card--horizontal
and accordingly structure the parts.', + code: ( +
+
+
+ +
+
+
+
Lizard
+
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except + Antarctica. Lorem ipsum dolor sit amet consectetur, + adipisicing elit. +
+
+ Lizards are a widespread group of squamate reptiles, with over + 6,000 species, ranging across all continents except + Antarctica. +
+
+
+ + +
+
+
+
+
+ ), + }, + ], + classes: [ + ".card", + ".card__header", + ".card__title", + ".card__media", + ".card__overlay", + ".card__content", + ".card__actions", + ".card__footer", + ".card--horizontal", + ], + }, + Input: { + title: "Input", + desc: + "Input elements like checkbox, toggle, text-input are used when user interaction and input is required.", + intro: "", + lightVariants: [ + { + name: "Checkbox", + desc: + 'Checkboxes allow the user to select one or more items from a set. To a label give a class of
.input-checkbox
and inside add input of type checkbox and span. Add the label text inside the span.', + code: ( +
+ +
+ ), + }, + { + name: "Radio", + desc: + 'Radio buttons allow the user to select one option from a set. To a label give a class of
.input-radio
and inside add input of type radio and span. Add the label text inside the span. Add
.radio--light
for light scheme variant.', + code: ( +
+ + +
+ ), + }, + { + name: "Toggle", + desc: + 'Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. To a label give a class of
.input-toggle
and inside add input of type checkbox and span. Add the label text inside the span. Add
.toggle--light
for light scheme variant.', + code: ( +
+ +
+ ), + }, + { + name: "Text", + desc: + 'Add class
.input-text
to a div element and then inside add a label, input of type text and span with class
.focus-border
. Add
.input-text--light
for light scheme variant.', + code: ( +
+
+ + +
+
+ ), + }, + { + name: "Outlined Text", + desc: + 'Add class
.input-text
and
.input-text--bcg
to a div element and then inside add a label and input of type text. Add
.input-text--light
for light scheme variant.', + code: ( +
+
+ + +
+
+ ), + }, + ], + darkVariants: [ + { + name: "Checkbox", + desc: + 'Checkboxes allow the user to select one or more items from a set. To a label give a class of
.input-checkbox
and inside add input of type checkbox and span. Add the label text inside the span.', + code: ( +
+ +
+ ), + }, + { + name: "Radio", + desc: + 'Radio buttons allow the user to select one option from a set. To a label give a class of
.input-radio
and inside add input of type radio and span. Add the label text inside the span. Add
.radio--light
for light scheme variant.', + code: ( +
+ + +
+ ), + }, + { + name: "Toggle", + desc: + 'Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. To a label give a class of
.input-toggle
and inside add input of type checkbox and span. Add the label text inside the span. Add
.toggle--light
for light scheme variant.', + code: ( +
+ +
+ ), + }, + { + name: "Text", + desc: + 'Add class
.input-text
to a div element and then inside add a label, input of type text and span with class
.focus-border
. Add
.input-text--light
for light scheme variant.', + code: ( +
+
+ + +
+
+ ), + }, + { + name: "Outlined Text", + desc: + 'Add class
.input-text
and
.input-text--bcg
to a div element and then inside add a label and input of type text. Add
.input-text--light
for light scheme variant.', + code: ( +
+
+ + +
+
+ ), + }, + ], + classes: [ + ".input-checkbox", + ".input-radio", + ".input-toggle", + ".input-text", + ".input-text--light", + ".input-text--bcg", + ".focus-border", + ], + }, + Typography: { + title: "Typography", + desc: + "Use typography to present your design and content as clearly and efficiently as possible.", + intro: "", + lightVariants: [ + { + name: "Headline", + desc: + 'Headline is the first design element the reader\'s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece. Four variants of headlines are provided.
.text-headline1
,
.text-headline1
,
.text-headline1
and
.text-headline1
which provide different sizes.', + code: ( +
+
HEADLINE
+
HEADLINE
+
HEADLINE
+
HEADLINE
+
+ ), + }, + { + name: "Heading", + desc: + 'Headings are titles or signposts for readers that reveal the structure of the content. Six heading vaaints are provided.
.text-h1
,
.text-h2
,
.text-h3
,
.text-h4
,
.text-h5
and
.text-h6
.', + code: ( +
+
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+
+ ), + }, + { + name: "Subtitle", + desc: + 'A subtitle is smaller than a heading. It is a single line that is usally used in conbination with title or heading. Two variants are available.
.text-subtitle1
and
.text-subtitle2
.', + code: ( +
+
This is subititle 1
+
This is subititle 2
+
+ ), + }, + { + name: "Body", + desc: + 'Body text is the text forming the main content. For this use classes
.text-body1
and
.text-body2
', + code: ( +
+
This is body 1
+
This is body 2
+
+ ), + }, + { + name: "Button", + desc: + 'Styling button text makes the content and design uniform and provides consistency. Use class
.text-button
', + code: ( +
+
Button font style
+
+ ), + }, + { + name: "Caption", + desc: + 'A caption is the brief text description accompanying a photograph, illustration or cartoon, most often as part of a longer article. Use class
.text-caption
.', + code: ( +
+
+ This is a text caption. +
+
+ ), + }, + { + name: "Overline", + desc: + 'Overline text is text with a line above it. Is usually of smaller size or different typeface than the headline. Used sparingly to annotate imagery or to introduce a headline.
.text-overline
', + code: ( +
+
This is an overline.
+
+ ), + }, + { + name: "Font Weight", + desc: + 'Defines how bold the text will be. There are eigth variants.
.text-thin
,
.text-extralight
,
.text-light
,
.text-normal
,
.text-medium
,
.text-semibold
,
.text-bold
and
.text-extrabold
.', + code: ( +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ ), + }, + { + name: "Text Align", + desc: + 'Type alignment controls how text aligns in the space it appears. There are four type alignments available:
.text-center
,
.text-right
,
.text-left
and
.text-justify
.', + code: ( +
+
+ Text center: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Right: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Justify: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ ), + }, + ], + darkVariants: [ + { + name: "Headline", + desc: + 'Headline is the first design element the reader\'s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece. Four variants of headlines are provided.
.text-headline1
,
.text-headline1
,
.text-headline1
and
.text-headline1
which provide different sizes.', + code: ( +
+
HEADLINE
+
HEADLINE
+
HEADLINE
+
HEADLINE
+
+ ), + }, + { + name: "Heading", + desc: + 'Headings are titles or signposts for readers that reveal the structure of the content. Six heading vaaints are provided.
.text-h1
,
.text-h2
,
.text-h3
,
.text-h4
,
.text-h5
and
.text-h6
.', + code: ( +
+
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+
Heading
+
+ ), + }, + { + name: "Subtitle", + desc: + 'A subtitle is smaller than a heading. It is a single line that is usally used in conbination with title or heading. Two variants are available.
.text-subtitle1
and
.text-subtitle2
.', + code: ( +
+
This is subititle 1
+
This is subititle 2
+
+ ), + }, + { + name: "Body", + desc: + 'Body text is the text forming the main content. For this use classes
.text-body1
and
.text-body2
', + code: ( +
+
This is body 1
+
This is body 2
+
+ ), + }, + { + name: "Button", + desc: + 'Styling button text makes the content and design uniform and provides consistency. Use class
.text-button
', + code: ( +
+
Button font style
+
+ ), + }, + { + name: "Caption", + desc: + 'A caption is the brief text description accompanying a photograph, illustration or cartoon, most often as part of a longer article. Use class
.text-caption
.', + code: ( +
+
This is a text caption.
+
+ ), + }, + { + name: "Overline", + desc: + 'Overline text is text with a line above it. Is usually of smaller size or different typeface than the headline. Used sparingly to annotate imagery or to introduce a headline.
.text-overline
', + code: ( +
+
This is an overline.
+
+ ), + }, + { + name: "Font Weight", + desc: + 'Defines how bold the text will be. There are eigth variants.
.text-thin
,
.text-extralight
,
.text-light
,
.text-normal
,
.text-medium
,
.text-semibold
,
.text-bold
and
.text-extrabold
.', + code: ( +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi + doloribus quidem dignissimos. +
+
+ ), + }, + { + name: "Text Align", + desc: + 'Type alignment controls how text aligns in the space it appears. There are four type alignments available:
.text-center
,
.text-right
,
.text-left
and
.text-justify
.', + code: ( +
+
+ Text center: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Right: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text Justify: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ ), + }, + ], + classes: [ + ".text-headline1", + ".text-headline2", + ".text-headline3", + ".text-headline4", + ".text-h1", + ".text-h2", + ".text-h3", + ".text-h4", + ".text-h5", + ".text-h6", + ".text-subtitle1", + ".text-subtitle2", + ".text-body1", + ".text-body2", + ".text-caption", + ".text-overline", + ".text-thin", + ".text-extralight", + ".text-light", + ".text-normal", + ".text-medium", + ".text-semibold", + ".text-bold", + ".text-extrabold", + ], + }, + // Utility: { + // title: "", + // desc: "", + // variants: [ + // { + // name: "", + // desc: "", + // code: "", + // }, + // ], + // classes: [ + + // ] + // }, +}; diff --git a/src/css/header.css b/src/css/header.css index 39b3a1f..ccfc7f8 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -96,13 +96,12 @@ header { transform: scaleX(1); } .main-nav__item button:focus { - /* background-color: rgba(128, 128, 128, 0.2); */ - /* border-radius: 12px; */ - /* padding: 12px 0; */ - text-decoration-line: underline; - text-decoration-thickness: 2px; - text-decoration-style: wavy; - text-decoration-color: var(--primary-color); + color: var(--primary-color); +} +.main-nav__item button:active .main-nav__item::before { + /* background-color: red; */ + transform-origin: bottom right; + transform: scale(0); } .input-text.input-text--light .focus-border { @@ -122,6 +121,11 @@ header { padding-left: 32px; } +.github-btn > a { + display: flex; + justify-content: center; + align-items: center; +} .github-btn:focus { background-color: rgba(128, 128, 128, 0.3); } diff --git a/src/css/style.css b/src/css/style.css index 3403c03..0123f22 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -30,8 +30,8 @@ html { .App { width: 100%; min-height: 100vh; - /* background-color: var(--black-color1); */ - background-color: var(--white-color1); + background-color: var(--black-color1); + /* background-color: var(--white-color1); */ color: var(--white-color1); } @@ -160,3 +160,7 @@ html { .p-12 { padding: 3rem; } + +.border-color-white { + border-color: #fff; +} From 4449f7769384dc66e8163a816b33165ddc245ec8 Mon Sep 17 00:00:00 2001 From: vill Date: Wed, 31 Mar 2021 17:04:31 +0530 Subject: [PATCH 09/22] feat: componentRoute initial interface completed --- package-lock.json | 67 + package.json | 4 +- src/App.js | 28 +- src/components/Component.js | 85 +- src/components/ComponentsRoute.js | 26 +- src/components/Header.js | 4 +- src/components/RightSidebar.js | 20 +- src/components/Sidebar.js | 37 +- src/components/componentData.js | 2146 ++++++++++++----------------- src/css/avatar.css | 2 +- src/css/badge.css | 2 +- src/css/button.css | 6 +- src/css/component.css | 98 ++ src/css/header.css | 12 +- src/css/prism.css | 191 +++ src/css/rightSidebar.css | 37 + src/css/sidebar.css | 33 + src/css/style.css | 11 +- src/index.js | 6 + 19 files changed, 1510 insertions(+), 1305 deletions(-) create mode 100644 src/css/component.css create mode 100644 src/css/prism.css create mode 100644 src/css/rightSidebar.css create mode 100644 src/css/sidebar.css diff --git a/package-lock.json b/package-lock.json index b556580..091d8a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1156,6 +1156,11 @@ "to-fast-properties": "^2.0.0" } }, + "@base2/pretty-print-object": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz", + "integrity": "sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==" + }, "@eslint/eslintrc": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz", @@ -2289,6 +2294,17 @@ "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==", "dev": true }, + "clipboard": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz", + "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "clone": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", @@ -2994,6 +3010,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -4140,6 +4162,15 @@ "type-fest": "^0.8.1" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -6564,6 +6595,14 @@ "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==", "dev": true }, + "prismjs": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz", + "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==", + "requires": { + "clipboard": "^2.0.0" + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -6768,6 +6807,22 @@ "scheduler": "^0.20.1" } }, + "react-element-to-jsx-string": { + "version": "14.3.2", + "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.2.tgz", + "integrity": "sha512-WZbvG72cjLXAxV7VOuSzuHEaI3RHj10DZu8EcKQpkKcAj7+qAkG5XUeSdX5FXrA0vPrlx0QsnAzZEBJwzV0e+w==", + "requires": { + "@base2/pretty-print-object": "1.0.0", + "is-plain-object": "3.0.1" + }, + "dependencies": { + "is-plain-object": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz", + "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==" + } + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -7100,6 +7155,12 @@ "object-assign": "^4.1.1" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "semver": { "version": "7.3.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", @@ -7963,6 +8024,12 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "tiny-inflate": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", diff --git a/package.json b/package.json index 576bc84..15f88c9 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,10 @@ "description": "", "main": "index.js", "dependencies": { + "prismjs": "^1.23.0", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "react-element-to-jsx-string": "^14.3.2" }, "devDependencies": { "babel-eslint": "^10.1.0", diff --git a/src/App.js b/src/App.js index 4145a6e..ec5a1bb 100644 --- a/src/App.js +++ b/src/App.js @@ -2,21 +2,21 @@ import React from "react"; import "./css/style.css"; import "./css/pars.css"; -import Avatar from "./components/Avatar"; -import Alert from "./components/Alert"; -import Badge from "./components/Badge"; -import Button from "./components/Button"; -import Card from "./components/Card"; -import Input from "./components/Input"; -import Typography from "./components/Typography"; -import Utility from "./components/Utility"; -// import Header from "./components/Header"; -// import ComponentsRoute from "./components/ComponentsRoute"; +// import Avatar from "./components/Avatar"; +// import Alert from "./components/Alert"; +// import Badge from "./components/Badge"; +// import Button from "./components/Button"; +// import Card from "./components/Card"; +// import Input from "./components/Input"; +// import Typography from "./components/Typography"; +// import Utility from "./components/Utility"; +import Header from "./components/Header"; +import ComponentsRoute from "./components/ComponentsRoute"; export default function App() { return (
-

Pars.js

+ {/*

Pars.js


@@ -39,10 +39,10 @@ export default function App() {
-
+
*/} - {/*
- */} +
+
); } diff --git a/src/components/Component.js b/src/components/Component.js index 3d906b6..58ba5e5 100644 --- a/src/components/Component.js +++ b/src/components/Component.js @@ -1,10 +1,85 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; +import { useTheme } from "./theme-context"; +import Prism from "prismjs"; +import reactElementToJSXString from "react-element-to-jsx-string"; +import RightSidebar from "./RightSidebar"; + +import "../css/prism.css"; +import "../css/component.css"; + +export default function Component({ comp }) { + const { currentTheme, userTheme } = useTheme(); + const currentVariants = + currentTheme === "light" ? comp.lightVariants : comp.darkVariants; + const navVariants = currentVariants.map(({ name }) => name); + const mainContentRef = useRef(null); + useEffect(() => { + Prism.highlightAll(); + }, [currentTheme]); + + useEffect(() => { + Prism.highlightAll(); + //scroll to top + mainContentRef.current.scrollTo(0, 0); + }, [comp]); -export default function Component() { return ( -
-
hi
-
hi
+
+
+
+
+ {comp.title} +
+
{comp.desc}
+
+ {comp.intro && ( +
+
+ Introduction +
+
{comp.intro}
+
+ )} + + {currentVariants.map((variant, i) => ( +
+
+ {variant.name} +
+
{variant.desc}
+
+
+ {variant.code} +
+ 
+                
+                  {/* {reactElementToJSXString(variant.code)} */}
+                  {reactElementToJSXString(variant.code).slice(26, -6)}
+                
+
+
+
+ ))} + {/* 
+        {content}
+
*/} + {/* 
+        `console.log("test")`
+
*/} +
+
); } diff --git a/src/components/ComponentsRoute.js b/src/components/ComponentsRoute.js index 8bb569b..0f01cd7 100644 --- a/src/components/ComponentsRoute.js +++ b/src/components/ComponentsRoute.js @@ -1,14 +1,28 @@ -import React from "react"; +import React, { useState } from "react"; import Sidebar from "./Sidebar"; import Component from "./Component"; -import RightSidebar from "./RightSidebar"; +// import RightSidebar from "./RightSidebar"; +import { useTheme } from "./theme-context"; +import { componentData } from "./componentData"; export default function ComponentsRoute() { + const { currentTheme, userTheme } = useTheme(); + const [currentComp, setCurrentComp] = useState("Avatar"); return ( -
- - - +
+ + + {/* */}
); } diff --git a/src/components/Header.js b/src/components/Header.js index 51ec24c..60d760e 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -15,7 +15,7 @@ export default function Header() { }; return (
-
+
*/} -
+
-
hi
-
hi
+
+
On this page
+
); } diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index bf0d6d2..9f7a731 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,10 +1,39 @@ import React from "react"; +import { componentData } from "./componentData"; -export default function Sidebar() { +import "../css/sidebar.css"; + +export default function Sidebar({ currentComp, setCurrentComp }) { + const navItems = Object.keys(componentData); + const changeComponent = (comp) => { + setCurrentComp(comp); + }; return ( -
-
hi
-
hi
+
+
COMPONENTS
+
); } diff --git a/src/components/componentData.js b/src/components/componentData.js index 349dc4b..885f44f 100644 --- a/src/components/componentData.js +++ b/src/components/componentData.js @@ -1,19 +1,31 @@ import React from "react"; +import avatarImg from "../images/avatar.jpeg"; // import avatarImg for avatars +import reptileImg from "../images/contemplative-reptile.jpg"; //import foodsampleimg and reptile img for cards +import foodSampleImg from "../images/paella.jpg"; export const componentData = { Avatar: { title: "Avatar", desc: "The Avatar component is typically used to display images, icons or initials representing people or other entities.", - intro: - 'Created using a div with
.avatar
class, wrapping an image, icon or text.', + intro: ( +
+ Create an avatar using a div with{" "} +
.avatar
class, wrapping an image, icon + or text. +
+ ), lightVariants: [ { name: "With Image", - desc: - 'Image avatars can be created by wrapping an image with a div with class name
.avatar
.', + desc: ( +
+ Image avatars can be created by wrapping an image with a div with + class name
.avatar
. +
+ ), code: (
@@ -24,74 +36,73 @@ export const componentData = { }, { name: "With Text", - desc: - 'Avatars containing simple character can be created by wrapping the characters in a div with class name
.avatar
. The text color and background color is not set and can be customized', + desc: ( +
+ Avatars containing simple character can be created by wrapping the + characters in a div with class name{" "} +
.avatar
. The text color and + background color is not set and can be customized. +
+ ), code: (
-
Sk
+
SK
), }, { name: "Sizes", - desc: - 'Avatars come in five sizes-
.avatar--sm
,
.avatar--md
(default),
avatar--lg
,
avatar--xl
and
avatar--2xl
. Just add the corresponding class in
.avatar
wrapping div.', + desc: ( +
+ Avatars come in five sizes-{" "} +
.avatar--sm
,{" "} +
.avatar--md
(default),{" "} +
avatar--lg
,{" "} +
avatar--xl
and{" "} +
avatar--2xl
. Just add the + corresponding class in
.avatar
{" "} + wrapping div. +
+ ), code: (
-
- -
-
- -
-
- -
-
- -
), }, { name: "With Icons", - desc: - 'Icon avatar can be created by adding
.avatar--icon
class in wrapping div. Background is transparent by default and can be set along with text color.', + desc: ( +
+ Icon avatar can be created by adding{" "} +
.avatar--icon
class in wrapping + div. Background is transparent by default and can be set along with + text color. +
+ ), code: (
-
- -
-
+
-
- -
), }, { name: "Square Variants", - desc: - 'If you need square or rounded variants add the
.avatar--square
or
.avatar--rounded
class.', + desc: ( +
+ If you need square or rounded variants add the{" "} +
.avatar--square
or{" "} +
.avatar--rounded
class. +
+ ), code: (
-
- S -
-
- -
@@ -100,34 +111,18 @@ export const componentData = { }, { name: "With Badge", - desc: - 'Add a span element inside
.avatar
div and add classes as needed. Refer to Badge component for the badge classes.', + desc: ( +
+ Add a span element inside
.avatar
{" "} + div and add classes as needed. Refer to Badge component for the + badge classes. +
+ ), code: (
- -
-
- - 2 -
-
- - 2 -
-
- - +
), @@ -136,8 +131,12 @@ export const componentData = { darkVariants: [ { name: "With Image", - desc: - 'Image avatars can be created by wrapping an image with a div with class name
.avatar
.', + desc: ( +
+ Image avatars can be created by wrapping an image with a div with + class name
.avatar
. +
+ ), code: (
@@ -148,74 +147,73 @@ export const componentData = { }, { name: "With Text", - desc: - 'Avatars containing simple character can be created by wrapping the characters in a div with class name
.avatar
. The text color and background color is not set and can be customized', + desc: ( +
+ Avatars containing simple character can be created by wrapping the + characters in a div with class name{" "} +
.avatar
. The text color and + background color is not set and can be customized. +
+ ), code: (
-
Sk
+
SK
), }, { name: "Sizes", - desc: - 'Avatars come in five sizes-
.avatar--sm
,
.avatar--md
(default),
avatar--lg
,
avatar--xl
and
avatar--2xl
. Just add the corresponding class in
.avatar
wrapping div.', + desc: ( +
+ Avatars come in five sizes-{" "} +
.avatar--sm
,{" "} +
.avatar--md
(default),{" "} +
avatar--lg
,{" "} +
avatar--xl
and{" "} +
avatar--2xl
. Just add the + corresponding class in
.avatar
{" "} + wrapping div. +
+ ), code: (
-
- -
-
- -
-
- -
-
- -
), }, { name: "With Icons", - desc: - 'Icon avatar can be created by adding
.avatar--icon
class in wrapping div. Background is transparent by default and can be set along with text color.', + desc: ( +
+ Icon avatar can be created by adding{" "} +
.avatar--icon
class in wrapping + div. Background is transparent by default and can be set along with + text color. +
+ ), code: (
-
- -
-
+
-
- -
), }, { name: "Square Variants", - desc: - 'If you need square or rounded variants add the
.avatar--square
or
.avatar--rounded
class.', + desc: ( +
+ If you need square or rounded variants add the{" "} +
.avatar--square
or{" "} +
.avatar--rounded
class. +
+ ), code: (
-
- S -
-
- -
@@ -224,34 +222,18 @@ export const componentData = { }, { name: "With Badge", - desc: - 'Add a span element inside
.avatar
div and add classes as needed. Refer to Badge component for the badge classes.', + desc: ( +
+ Add a span element inside
.avatar
{" "} + div and add classes as needed. Refer to Badge component for the + badge classes. +
+ ), code: (
- -
-
- - 2 -
-
- - 2 -
-
- - +
), @@ -272,14 +254,28 @@ export const componentData = { Alert: { title: "Alert", desc: - "An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. Used to give feedback to the user about an action or state.", - intro: - 'Created using a div with
.alert
class wrapping an
.alert__msg
div. Use
.alert--light
for light scheme variant. Takes width of parent container.', + "An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.", + intro: ( +
+ Created using a div with
.alert
class + wrapping an
.alert__msg
div. Use{" "} +
.alert--light
for light scheme variant. + Takes width of parent container. +
+ ), lightVariants: [ { name: "Different Severity", - desc: - 'Alerts come in five severity levels depending on which their color changes. First is the default alert. Red for
.alert--error
, yellow for
.alert--warning
, blue for
.alert--info
and green for
.alert--success
.', + desc: ( +
+ Alerts come in five severity levels depending on which their color + changes. First is the default alert. Red for{" "} +
.alert--error
, yellow for{" "} +
.alert--warning
, blue for{" "} +
.alert--info
and green for{" "} +
.alert--success
. +
+ ), code: (
@@ -302,97 +298,53 @@ export const componentData = { }, { name: "Rounded", - desc: - 'Alerts have no rounded edges by default. Use
.alert--rounded
to add a slight round edge. For more use
.alert--rounded-full
.', + desc: ( +
+ Alerts have no rounded edges by default. Use{" "} +
.alert--rounded
to add a slight + round edge. For more use{" "} +
.alert--rounded-full
. +
+ ), code: (
-
-
This is an alert!
-
-
-
This is an error alert!
-
-
-
This is a warning alert!
-
This is an info alert!
-
-
This is a success alert!
-
), }, { name: "With title", - desc: - 'To add a title to the alert, add
.alert__title
div inside
.alert__msg
.', + desc: ( +
+ To add a title to the alert, add{" "} +
.alert__title
div inside{" "} +
.alert__msg
. +
+ ), code: (
-
-
-
Alert
- This is an alert! -
-
-
-
-
Error
- This is an error alert! -
-
-
-
-
Warning
- This is a warning alert! -
-
Info
This is an info alert!
-
-
-
Success
- This is a success alert! -
-
), }, { name: "With Icon", - desc: - 'To add an icon, wrap an svg or img in
.alert--icon
div inside
.alert
.', + desc: ( +
+ To add an icon, wrap an svg or img in{" "} +
.alert--icon
div inside{" "} +
.alert
. +
+ ), code: (
-
-
- -
-
This is an alert!
-
-
-
- -
-
This is an error alert!
-
-
-
- -
-
This is a warning alert!
-
-
-
- -
-
-
Success
- This is a success alert! -
-
), }, { name: "With Actions", - desc: - 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. Wrap the buttons in
.alert__actions
div inside
.alert
.', + desc: ( +
+ An alert can have an action, such as a close or undo button. It is + rendered after the message, at the end of the alert. Wrap the + buttons in
.alert__actions
div + inside
.alert
. +
+ ), code: (
-
-
- -
-
-
Alert
- This is an alert! -
-
- -
-
-
-
- -
-
-
Error
- This is an error alert! -
-
- -
-
-
-
- -
-
-
Warning
- This is a warning alert! -
-
- -
-
-
-
- -
-
This is a success alert!
-
- - -
-
), }, { name: "Outlined", - desc: - 'To create the outlined variant, add
.alert--outline
class to the
.alert
div', + desc: ( +
+ To create the outlined variant, add{" "} +
.alert--outline
class to the{" "} +
.alert
div +
+ ), code: (
-
-
- -
-
-
Alert
- This is an alert! -
-
- -
-
-
-
- -
-
-
Error
- This is an error alert! -
-
- -
-
-
-
- -
-
-
Warning
- This is a warning alert! -
-
- -
-
-
-
- -
-
This is a success alert!
-
- -
-
), }, @@ -605,8 +418,16 @@ export const componentData = { darkVariants: [ { name: "Different Severity", - desc: - 'Alerts come in five severity levels depending on which their color changes. First is the default alert. Red for
.alert--error
, yellow for
.alert--warning
, blue for
.alert--info
and green for
.alert--success
.', + desc: ( +
+ Alerts come in five severity levels depending on which their color + changes. First is the default alert. Red for{" "} +
.alert--error
, yellow for{" "} +
.alert--warning
, blue for{" "} +
.alert--info
and green for{" "} +
.alert--success
. +
+ ), code: (
@@ -629,97 +450,53 @@ export const componentData = { }, { name: "Rounded", - desc: - 'Alerts have no rounded edges by default. Use
.alert--rounded
to add a slight round edge. For more use
.alert--rounded-full
.', + desc: ( +
+ Alerts have no rounded edges by default. Use{" "} +
.alert--rounded
to add a slight + round edge. For more use{" "} +
.alert--rounded-full
. +
+ ), code: (
-
-
This is an alert!
-
-
-
This is an error alert!
-
-
-
This is a warning alert!
-
This is an info alert!
-
-
This is a success alert!
-
), }, { name: "With title", - desc: - 'To add a title to the alert, add
.alert__title
div inside
.alert__msg
.', + desc: ( +
+ To add a title to the alert, add{" "} +
.alert__title
div inside{" "} +
.alert__msg
. +
+ ), code: (
-
-
-
Alert
- This is an alert! -
-
-
-
-
Error
- This is an error alert! -
-
-
-
-
Warning
- This is a warning alert! -
-
Info
This is an info alert!
-
-
-
Success
- This is a success alert! -
-
), }, { name: "With Icon", - desc: - 'To add an icon, wrap an svg or img in
.alert--icon
div inside
.alert
.', + desc: ( +
+ To add an icon, wrap an svg or img in{" "} +
.alert--icon
div inside{" "} +
.alert
. +
+ ), code: (
-
-
- -
-
This is an alert!
-
-
-
- -
-
This is an error alert!
-
-
-
- -
-
This is a warning alert!
-
-
-
- -
-
-
Success
- This is a success alert! -
-
), }, { name: "With Actions", - desc: - 'An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. Wrap the buttons in
.alert__actions
div inside
.alert
.', + desc: ( +
+ An alert can have an action, such as a close or undo button. It is + rendered after the message, at the end of the alert. Wrap the + buttons in
.alert__actions
div + inside
.alert
. +
+ ), code: (
-
-
- -
-
-
Alert
- This is an alert! -
-
- -
-
-
-
- -
-
-
Error
- This is an error alert! -
-
- -
-
-
-
- -
-
-
Warning
- This is a warning alert! -
-
- -
-
-
-
- -
-
This is a success alert!
-
- - -
-
), - }, - { - name: "Outlined", - desc: - 'To create the outlined variant, add
.alert--outline
class to the
.alert
div', - code: ( -
-
-
- -
-
-
Alert
- This is an alert! -
-
- -
-
-
-
- -
-
-
Error
- This is an error alert! -
-
- -
-
-
-
- -
-
-
Warning
- This is a warning alert! -
-
- -
-
-
-
- -
-
This is an info alert!
-
- -
-
-
+ }, + { + name: "Outlined", + desc: ( +
+ To create the outlined variant, add{" "} +
.alert--outline
class to the{" "} +
.alert
div +
+ ), + code: ( +
+
-
This is a success alert!
+
This is an info alert!
-
), }, { name: "Icon only", - desc: - 'To get buttons with only icon, add
.btn--icon
class to
.btn
and put an img/svg inside.', + desc: ( +
+ To get buttons with only icon, add{" "} +
.btn--icon
class to{" "} +
.btn
and put an img/svg inside. Use{" "} +
.btn--icon-circle
or{" "} +
.btn--icon-rounded
for round edges. +
+ ), code: (
- -
), }, { name: "Disabled", - desc: - 'To show that a button is disabled, add
.btn--disabled
class.', + desc: ( +
+ To show that a button is disabled, add{" "} +
.btn--disabled
class. +
+ ), code: (
- - - -
), }, @@ -1648,8 +1178,15 @@ export const componentData = { darkVariants: [ { name: "Sizes", - desc: - 'Three different sizes provided. Just add the following class to
.btn
element:
.btn--sm
for smallest, default is
.btn--md
with largest size being
.btn--lg
.', + desc: ( +
+ Three different sizes provided. Just add the following class to{" "} +
.btn
element:{" "} +
.btn--sm
for smallest, default is{" "} +
.btn--md
with largest size being{" "} +
.btn--lg
. +
+ ), code: (
-
), }, { name: "Icon only", - desc: - 'To get buttons with only icon, add
.btn--icon
class to
.btn
and put an img/svg inside.', + desc: ( +
+ To get buttons with only icon, add{" "} +
.btn--icon
class to{" "} +
.btn
and put an img/svg inside. Use{" "} +
.btn--icon-circle
or{" "} +
.btn--icon-rounded
for round edges. +
+ ), code: (
- -
), }, { name: "Disabled", - desc: - 'To show that a button is disabled, add
.btn--disabled
class.', + desc: ( +
+ To show that a button is disabled, add{" "} +
.btn--disabled
class. +
+ ), code: (
- - - -
), }, @@ -1942,41 +1486,40 @@ export const componentData = { Card: { title: "Card", desc: "Cards contain content and actions about a single subject.", - intro: - 'A card is created by giving a div element a class of
.card
. Card has further classes you can use to build complex structures.
.card__header
,
.card__media
,
.card__overlay/div>,
.card__content
,
.card__title
,
.card__actions
and
.card__footer
can all be used in conjunction inside
.card
element on div. Card background color, text color and size is not set by default and needs to be set.', + intro: ( +
+ A card is created by giving a div element a class of{" "} +
.card
.{" "} +
.card__header
,{" "} +
.card__media
,{" "} +
.card__overlay
,{" "} +
.card__content
,{" "} +
.card__title
,{" "} +
.card__actions
and{" "} +
.card__footer
can all be used in + conjunction inside
.card
element on + div. +
+ ), lightVariants: [ { name: "Simple Card", - desc: - 'Simple variants can be created by using
.card
and inside add a div with class
.card__content
. Use
.card__title
inside
.card__content
or
.card__header
if required.
.card__footer
can be used to add a footer. If there are actions that need to be performed / buttons, use
.card__actions
, preferably inside footer or header.', + desc: ( +
+ Simple variants can be created by using{" "} +
.card
and inside add a div with + class
.card__content
. Use{" "} +
.card__title
inside{" "} +
.card__content
or{" "} +
.card__header
if required.{" "} +
.card__footer
can be used to add a + footer. If there are actions that need to be performed / buttons, + use
.card__actions
, preferably + inside footer or header. +
+ ), code: (
-
-
- -

Fast. Very fast.

-

- Blazing fast speed you can depend on. -

-
-
-
@@ -2002,8 +1545,17 @@ export const componentData = { }, { name: "Full Structure", - desc: - 'The full structure includes
.card__media
which by default takes up the entire width if there\'s an img inside. Most elements of cards can be used inside the other. For eg.
.card__title
and
.card__actions
can be used iniside
.card__header
.', + desc: ( +
+ The full structure includes{" "} +
.card__media
which by default takes + up the entire width if there is an img inside. Most elements of + cards can be used inside the other. For eg.{" "} +
.card__title
and{" "} +
.card__actions
can be used iniside{" "} +
.card__header
. +
+ ), code: (
@@ -2084,65 +1636,21 @@ export const componentData = {
- {/* 2 */} -
-
- -
-
-
-
Lizard
-
- Lizards are a widespread group of squamate reptiles, with - over 6,000 species, ranging across all continents except - Antarctica -
-
-
-
-
- - -
-
-
- {/* 3 */} -
-
-
-
Delete
-
-
-
-

- Are you sure you want to delete this file? -

-
-
-
- - -
-
-
), }, { name: "Dismiss button", - desc: - 'Card with dismiss button can be created by wrapping close button isnide
.card__actions
and put inside
.card__header
element of
.card
', + desc: ( +
+ Card with dismiss button can be created by wrapping close button + isnide
.card__actions
and put + inside
.card__header
element of{" "} +
.card
+
+ ), code: (
-

Card with dismiss button

@@ -2188,8 +1696,16 @@ export const componentData = { }, { name: "Overlay", - desc: - 'Overlay can be given to card by adding
.card__overlay
div inside
.card
. It will take up the whole card space as an overlay with opacity. If overlay element is added inside
.card__media
, then it will overlay only the parent media element.', + desc: ( +
+ Overlay can be given to card by adding{" "} +
.card__overlay
div inside{" "} +
.card
. It will take up the whole + card space as an overlay with opacity. If overlay element is added + inside
.card__media
, then it will + overlay only the parent media element. +
+ ), code: (
@@ -2203,41 +1719,18 @@ export const componentData = {
- {/* card with specific overlay on card__medua */} -
-
- -
-
-
Lizard
-
Squamate Reptiles
-
-
-
-
-
- Lizards are a widespread group of squamate reptiles, with over - 6,000 species, ranging across all continents except Antarctica -
-
-
-
- - -
-
-
), }, { name: "Horizontal Card", - desc: - 'To make the card horizontal add class
.card--horizontal
and accordingly structure the parts.', + desc: ( +
+ To make the card horizontal add class{" "} +
.card--horizontal
and accordingly + structure the parts. +
+ ), code: (
@@ -2278,35 +1771,22 @@ export const componentData = { darkVariants: [ { name: "Simple Card", - desc: - 'Simple variants can be created by using
.card
and inside add a div with class
.card__content
. Use
.card__title
inside
.card__content
or
.card__header
if required.
.card__footer
can be used to add a footer. If there are actions that need to be performed / buttons, use
.card__actions
, preferably inside footer or header.', + desc: ( +
+ Simple variants can be created by using{" "} +
.card
and inside add a div with + class
.card__content
. Use{" "} +
.card__title
inside{" "} +
.card__content
or{" "} +
.card__header
if required.{" "} +
.card__footer
can be used to add a + footer. If there are actions that need to be performed / buttons, + use
.card__actions
, preferably + inside footer or header. +
+ ), code: (
-
-
- -

Fast. Very fast.

-

- Blazing fast speed you can depend on. -

-
-
-
@@ -2332,8 +1812,17 @@ export const componentData = { }, { name: "Full Structure", - desc: - 'The full structure includes
.card__media
which by default takes up the entire width if there\'s an img inside. Most elements of cards can be used inside the other. For eg.
.card__title
and
.card__actions
can be used iniside
.card__header
.', + desc: ( +
+ The full structure includes{" "} +
.card__media
which by default takes + up the entire width if there is an img inside. Most elements of + cards can be used inside the other. For eg.{" "} +
.card__title
and{" "} +
.card__actions
can be used iniside{" "} +
.card__header
. +
+ ), code: (
@@ -2414,65 +1903,21 @@ export const componentData = {
- {/* 2 */} -
-
- -
-
-
-
Lizard
-
- Lizards are a widespread group of squamate reptiles, with - over 6,000 species, ranging across all continents except - Antarctica -
-
-
-
-
- - -
-
-
- {/* 3 */} -
-
-
-
Delete
-
-
-
-

- Are you sure you want to delete this file? -

-
-
-
- - -
-
-
), }, { name: "Dismiss button", - desc: - 'Card with dismiss button can be created by wrapping close button isnide
.card__actions
and put inside
.card__header
element of
.card
', + desc: ( +
+ Card with dismiss button can be created by wrapping close button + isnide
.card__actions
and put + inside
.card__header
element of{" "} +
.card
+
+ ), code: (
-

Card with dismiss button

@@ -2518,8 +1963,16 @@ export const componentData = { }, { name: "Overlay", - desc: - 'Overlay can be given to card by adding
.card__overlay
div inside
.card
. It will take up the whole card space as an overlay with opacity. If overlay element is added inside
.card__media
, then it will overlay only the parent media element.', + desc: ( +
+ Overlay can be given to card by adding{" "} +
.card__overlay
div inside{" "} +
.card
. It will take up the whole + card space as an overlay with opacity. If overlay element is added + inside
.card__media
, then it will + overlay only the parent media element. +
+ ), code: (
@@ -2533,41 +1986,18 @@ export const componentData = {
- {/* card with specific overlay on card__medua */} -
-
- -
-
-
Lizard
-
Squamate Reptiles
-
-
-
-
-
- Lizards are a widespread group of squamate reptiles, with over - 6,000 species, ranging across all continents except Antarctica -
-
-
-
- - -
-
-
), }, { name: "Horizontal Card", - desc: - 'To make the card horizontal add class
.card--horizontal
and accordingly structure the parts.', + desc: ( +
+ To make the card horizontal add class{" "} +
.card--horizontal
and accordingly + structure the parts. +
+ ), code: (
@@ -2625,28 +2055,41 @@ export const componentData = { lightVariants: [ { name: "Checkbox", - desc: - 'Checkboxes allow the user to select one or more items from a set. To a label give a class of
.input-checkbox
and inside add input of type checkbox and span. Add the label text inside the span.', + desc: ( +
+ Checkboxes allow the user to select one or more items from a set. To + a label give a class of{" "} +
.input-checkbox
and inside add + input of type checkbox and span. Add the label text inside the span. +
+ ), code: (
), }, { name: "Radio", - desc: - 'Radio buttons allow the user to select one option from a set. To a label give a class of
.input-radio
and inside add input of type radio and span. Add the label text inside the span. Add
.radio--light
for light scheme variant.', + desc: ( +
+ Radio buttons allow the user to select one option from a set. To a + label give a class of
.input-radio
{" "} + and inside add input of type radio and span. Add the label text + inside the span. Add
.radio--light
{" "} + for light scheme variant. +
+ ), code: (
-
@@ -2681,8 +2139,15 @@ export const componentData = { }, { name: "Outlined Text", - desc: - 'Add class
.input-text
and
.input-text--bcg
to a div element and then inside add a label and input of type text. Add
.input-text--light
for light scheme variant.', + desc: ( +
+ Add class
.input-text
and{" "} +
.input-text--bcg
to a div element + and then inside add a label and input of type text. Add{" "} +
.input-text--light
for light scheme + variant. +
+ ), code: (
@@ -2701,8 +2166,14 @@ export const componentData = { darkVariants: [ { name: "Checkbox", - desc: - 'Checkboxes allow the user to select one or more items from a set. To a label give a class of
.input-checkbox
and inside add input of type checkbox and span. Add the label text inside the span.', + desc: ( +
+ Checkboxes allow the user to select one or more items from a set. To + a label give a class of{" "} +
.input-checkbox
and inside add + input of type checkbox and span. Add the label text inside the span. +
+ ), code: (
@@ -2757,8 +2250,15 @@ export const componentData = { }, { name: "Outlined Text", - desc: - 'Add class
.input-text
and
.input-text--bcg
to a div element and then inside add a label and input of type text. Add
.input-text--light
for light scheme variant.', + desc: ( +
+ Add class
.input-text
and{" "} +
.input-text--bcg
to a div element + and then inside add a label and input of type text. Add{" "} +
.input-text--light
for light scheme + variant. +
+ ), code: (
@@ -2792,8 +2292,18 @@ export const componentData = { lightVariants: [ { name: "Headline", - desc: - 'Headline is the first design element the reader\'s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece. Four variants of headlines are provided.
.text-headline1
,
.text-headline1
,
.text-headline1
and
.text-headline1
which provide different sizes.', + desc: ( +
+ Headline is the first design element the readers eye lands upon. Its + purpose is to draw your audience in, and it also sets the tone for + the rest of the piece. Four variants of headlines are provided.{" "} +
.text-headline1
,{" "} +
.text-headline1
,{" "} +
.text-headline1
and{" "} +
.text-headline1
which provide + different sizes. +
+ ), code: (
HEADLINE
@@ -2805,8 +2315,18 @@ export const componentData = { }, { name: "Heading", - desc: - 'Headings are titles or signposts for readers that reveal the structure of the content. Six heading vaaints are provided.
.text-h1
,
.text-h2
,
.text-h3
,
.text-h4
,
.text-h5
and
.text-h6
.', + desc: ( +
+ Headings are titles or signposts for readers that reveal the + structure of the content. Six heading vaaints are provided.{" "} +
.text-h1
,{" "} +
.text-h2
,{" "} +
.text-h3
,{" "} +
.text-h4
,{" "} +
.text-h5
and{" "} +
.text-h6
. +
+ ), code: (
Heading
@@ -2820,8 +2340,14 @@ export const componentData = { }, { name: "Subtitle", - desc: - 'A subtitle is smaller than a heading. It is a single line that is usally used in conbination with title or heading. Two variants are available.
.text-subtitle1
and
.text-subtitle2
.', + desc: ( +
+ A subtitle is smaller than a heading. It is a single line that is + usally used in conbination with title or heading. Two variants are + available.
.text-subtitle1
and{" "} +
.text-subtitle2
. +
+ ), code: (
This is subititle 1
@@ -2831,8 +2357,13 @@ export const componentData = { }, { name: "Body", - desc: - 'Body text is the text forming the main content. For this use classes
.text-body1
and
.text-body2
', + desc: ( +
+ Body text is the text forming the main content. For this use classes{" "} +
.text-body1
and{" "} +
.text-body2
+
+ ), code: (
This is body 1
@@ -2842,8 +2373,13 @@ export const componentData = { }, { name: "Button", - desc: - 'Styling button text makes the content and design uniform and provides consistency. Use class
.text-button
', + desc: ( +
+ Styling button text makes the content and design uniform and + provides consistency. Use class{" "} +
.text-button
+
+ ), code: (
Button font style
@@ -2852,8 +2388,13 @@ export const componentData = { }, { name: "Caption", - desc: - 'A caption is the brief text description accompanying a photograph, illustration or cartoon, most often as part of a longer article. Use class
.text-caption
.', + desc: ( +
+ A caption is the brief text description accompanying a photograph, + illustration or cartoon, most often as part of a longer article. Use + class
.text-caption
. +
+ ), code: (
@@ -2864,8 +2405,14 @@ export const componentData = { }, { name: "Overline", - desc: - 'Overline text is text with a line above it. Is usually of smaller size or different typeface than the headline. Used sparingly to annotate imagery or to introduce a headline.
.text-overline
', + desc: ( +
+ Overline text is text with a line above it. Is usually of smaller + size or different typeface than the headline. Used sparingly to + annotate imagery or to introduce a headline.{" "} +
.text-overline
+
+ ), code: (
This is an overline.
@@ -2874,8 +2421,19 @@ export const componentData = { }, { name: "Font Weight", - desc: - 'Defines how bold the text will be. There are eigth variants.
.text-thin
,
.text-extralight
,
.text-light
,
.text-normal
,
.text-medium
,
.text-semibold
,
.text-bold
and
.text-extrabold
.', + desc: ( +
+ Defines how bold the text will be. There are eigth variants.{" "} +
.text-thin
,{" "} +
.text-extralight
,{" "} +
.text-light
,{" "} +
.text-normal
,{" "} +
.text-medium
,{" "} +
.text-semibold
,{" "} +
.text-bold
and{" "} +
.text-extrabold
. +
+ ), code: (
@@ -2915,17 +2473,25 @@ export const componentData = { }, { name: "Text Align", - desc: - 'Type alignment controls how text aligns in the space it appears. There are four type alignments available:
.text-center
,
.text-right
,
.text-left
and
.text-justify
.', + desc: ( +
+ Type alignment controls how text aligns in the space it appears. + There are four type alignments available:{" "} +
.text-center
,{" "} +
.text-right
,{" "} +
.text-left
and{" "} +
.text-justify
. +
+ ), code: (
-
- Text center: Lorem ipsum dolor sit, amet consectetur adipisicing +
+ Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aliquam praesentium temporibus consequuntur incidunt.
-
- Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing +
+ Text center: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aliquam praesentium temporibus consequuntur incidunt.
@@ -2946,8 +2512,18 @@ export const componentData = { darkVariants: [ { name: "Headline", - desc: - 'Headline is the first design element the reader\'s eye lands upon. Its purpose is to draw your audience in, and it also sets the tone for the rest of the piece. Four variants of headlines are provided.
.text-headline1
,
.text-headline1
,
.text-headline1
and
.text-headline1
which provide different sizes.', + desc: ( +
+ Headline is the first design element the readers eye lands upon. Its + purpose is to draw your audience in, and it also sets the tone for + the rest of the piece. Four variants of headlines are provided.{" "} +
.text-headline1
,{" "} +
.text-headline1
,{" "} +
.text-headline1
and{" "} +
.text-headline1
which provide + different sizes. +
+ ), code: (
HEADLINE
@@ -2959,8 +2535,18 @@ export const componentData = { }, { name: "Heading", - desc: - 'Headings are titles or signposts for readers that reveal the structure of the content. Six heading vaaints are provided.
.text-h1
,
.text-h2
,
.text-h3
,
.text-h4
,
.text-h5
and
.text-h6
.', + desc: ( +
+ Headings are titles or signposts for readers that reveal the + structure of the content. Six heading vaaints are provided.{" "} +
.text-h1
,{" "} +
.text-h2
,{" "} +
.text-h3
,{" "} +
.text-h4
,{" "} +
.text-h5
and{" "} +
.text-h6
. +
+ ), code: (
Heading
@@ -2974,8 +2560,14 @@ export const componentData = { }, { name: "Subtitle", - desc: - 'A subtitle is smaller than a heading. It is a single line that is usally used in conbination with title or heading. Two variants are available.
.text-subtitle1
and
.text-subtitle2
.', + desc: ( +
+ A subtitle is smaller than a heading. It is a single line that is + usally used in conbination with title or heading. Two variants are + available.
.text-subtitle1
and{" "} +
.text-subtitle2
. +
+ ), code: (
This is subititle 1
@@ -2985,8 +2577,13 @@ export const componentData = { }, { name: "Body", - desc: - 'Body text is the text forming the main content. For this use classes
.text-body1
and
.text-body2
', + desc: ( +
+ Body text is the text forming the main content. For this use classes{" "} +
.text-body1
and{" "} +
.text-body2
+
+ ), code: (
This is body 1
@@ -2996,8 +2593,13 @@ export const componentData = { }, { name: "Button", - desc: - 'Styling button text makes the content and design uniform and provides consistency. Use class
.text-button
', + desc: ( +
+ Styling button text makes the content and design uniform and + provides consistency. Use class{" "} +
.text-button
+
+ ), code: (
Button font style
@@ -3006,8 +2608,13 @@ export const componentData = { }, { name: "Caption", - desc: - 'A caption is the brief text description accompanying a photograph, illustration or cartoon, most often as part of a longer article. Use class
.text-caption
.', + desc: ( +
+ A caption is the brief text description accompanying a photograph, + illustration or cartoon, most often as part of a longer article. Use + class
.text-caption
. +
+ ), code: (
This is a text caption.
@@ -3016,8 +2623,14 @@ export const componentData = { }, { name: "Overline", - desc: - 'Overline text is text with a line above it. Is usually of smaller size or different typeface than the headline. Used sparingly to annotate imagery or to introduce a headline.
.text-overline
', + desc: ( +
+ Overline text is text with a line above it. Is usually of smaller + size or different typeface than the headline. Used sparingly to + annotate imagery or to introduce a headline.{" "} +
.text-overline
+
+ ), code: (
This is an overline.
@@ -3026,8 +2639,19 @@ export const componentData = { }, { name: "Font Weight", - desc: - 'Defines how bold the text will be. There are eigth variants.
.text-thin
,
.text-extralight
,
.text-light
,
.text-normal
,
.text-medium
,
.text-semibold
,
.text-bold
and
.text-extrabold
.', + desc: ( +
+ Defines how bold the text will be. There are eigth variants.{" "} +
.text-thin
,{" "} +
.text-extralight
,{" "} +
.text-light
,{" "} +
.text-normal
,{" "} +
.text-medium
,{" "} +
.text-semibold
,{" "} +
.text-bold
and{" "} +
.text-extrabold
. +
+ ), code: (
@@ -3067,17 +2691,25 @@ export const componentData = { }, { name: "Text Align", - desc: - 'Type alignment controls how text aligns in the space it appears. There are four type alignments available:
.text-center
,
.text-right
,
.text-left
and
.text-justify
.', + desc: ( +
+ Type alignment controls how text aligns in the space it appears. + There are four type alignments available:{" "} +
.text-center
,{" "} +
.text-right
,{" "} +
.text-left
and{" "} +
.text-justify
. +
+ ), code: (
-
- Text center: Lorem ipsum dolor sit, amet consectetur adipisicing +
+ Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aliquam praesentium temporibus consequuntur incidunt.
-
- Text Left: Lorem ipsum dolor sit, amet consectetur adipisicing +
+ Text center: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis aliquam praesentium temporibus consequuntur incidunt.
diff --git a/src/css/avatar.css b/src/css/avatar.css index fb469e6..c88d6bf 100644 --- a/src/css/avatar.css +++ b/src/css/avatar.css @@ -12,7 +12,7 @@ display: flex; justify-content: center; align-items: center; - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.07); } .avatar > * { width: 100%; diff --git a/src/css/badge.css b/src/css/badge.css index e620531..5ef484c 100644 --- a/src/css/badge.css +++ b/src/css/badge.css @@ -47,7 +47,7 @@ width: 16px; min-width: 16px; height: 16px; - border: 3px outset var(--black-color1); + border: 3px solid var(--black-color1); border-radius: 50%; position: absolute; top: 0; diff --git a/src/css/button.css b/src/css/button.css index 563985e..c7bbed5 100644 --- a/src/css/button.css +++ b/src/css/button.css @@ -327,15 +327,15 @@ } .btn.btn--icon:hover { /* background-color: rgba(255, 255, 255, 0.1); */ - background-color: rgba(128, 128, 128, 0.25); + background-color: rgba(128, 128, 128, 0.35); } .btn.btn--icon-circle:hover { /* background-color: rgba(255, 255, 255, 0.1); */ - background-color: rgba(128, 128, 128, 0.25); + background-color: rgba(128, 128, 128, 0.35); } .btn.btn--icon-rounded:hover { /* background-color: rgba(255, 255, 255, 0.1); */ - background-color: rgba(128, 128, 128, 0.25); + background-color: rgba(128, 128, 128, 0.35); } .btn.btn--disabled { diff --git a/src/css/component.css b/src/css/component.css new file mode 100644 index 0000000..7545bc9 --- /dev/null +++ b/src/css/component.css @@ -0,0 +1,98 @@ +.main-content { + overflow: auto; + display: flex; + width: calc(100% - var(--sidebar-width)); + position: relative; +} + +.component-wrapper { + flex-grow: 1; + padding: 2.5rem 0; + padding-right: 2.5rem; + max-width: calc(100% - var(--sidebar-width)); +} + +.component-title { + font-size: 2.5rem; + line-height: 1; + font-weight: 600; + margin-bottom: 2rem; +} +.component-desc { + height: 3rem; +} +.component-desc { + font-size: 1.2rem; + font-weight: 500; +} +.component-info-wrapper { + padding-bottom: 3rem; + margin-bottom: 3rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.2); +} +.component-intro-header { + font-size: 2rem; + line-height: 1; + font-weight: 600; + margin-bottom: 2rem; +} +.component-intro-wrapper { + padding-bottom: 3rem; + margin-bottom: 3rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.2); +} +.component-intro { + /* height: 3rem; */ + min-height: 3rem; +} + +.highlight { + display: inline-flex; + /* background-color: var(--highlight-bcg); */ + /* background-color: #e5ebf8; */ + background-color: #edf2fd; + border: 1px solid rgba(128, 128, 128, 0.2); + font-size: 1.1rem; + padding: 0 0.5rem; + border-radius: 0.2rem; + color: var(--primary-color); + margin: 0.2rem 0.2rem; +} + +/* variants */ +.component-variant-wrapper { + padding-bottom: 3.25rem; + /* margin-bottom: 3rem; */ + margin-bottom: 3.25rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.2); +} +.component-variant-header { + font-size: 2rem; + line-height: 1; + font-weight: 600; + margin-bottom: 2rem; +} +.component-variant-desc { + /* height: 3rem; */ + min-height: 3rem; + margin-bottom: 2.5rem; +} +.component-variant-example { + border: 1px solid rgba(128, 128, 128, 0.2); + border-radius: 0.4rem; +} +.component-variant-example__output { + width: 100%; + margin: 0 auto; + padding: 2rem; + border: 1px solid rgba(128, 128, 128, 0.2); +} +pre[class*="language-"] { + margin: 0; + border-radius: 0 0 0.4rem 0.4rem; + padding-bottom: 2.5rem; +} + +.comp__eg > * { + margin: 1rem; +} diff --git a/src/css/header.css b/src/css/header.css index ccfc7f8..2c357c2 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -4,16 +4,17 @@ header { border-bottom: 1px solid rgba(209, 213, 219); } -.input-toggle .toggle-icon::after { +.theme-toggle .toggle-icon::after { background-color: var(--bg); } -.input-toggle > input:checked + span::after { +.theme-toggle > input:checked + span::after { background-color: var(--bg); } .logo { width: var(--sidebar-width); cursor: pointer; + padding: 0 3.25rem; } .logo__icon { fill: #3e6eff; @@ -27,9 +28,12 @@ header { .navigation { flex-grow: 1; height: 100%; + /* width: calc(100% - var(--sidebar-width)); */ + max-width: calc(100% - var(--sidebar-width)); } .header-btns { width: var(--sidebar-width); + max-width: var(--sidebar-width); } .main-nav { height: 100%; @@ -104,12 +108,12 @@ header { transform: scale(0); } -.input-text.input-text--light .focus-border { +.search-bar-wrapper.input-text--light .focus-border { bottom: -55%; background-color: rgba(128, 128, 128, 0.3); height: 3px; } -.input-text.input-text--light input { +.search-bar-wrapper.input-text--light input { border-bottom: none; background-color: transparent; font-size: 1rem; diff --git a/src/css/prism.css b/src/css/prism.css new file mode 100644 index 0000000..c2b44cb --- /dev/null +++ b/src/css/prism.css @@ -0,0 +1,191 @@ +/* PrismJS 1.23.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup&plugins=highlight-keywords+toolbar+copy-to-clipboard */ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8292a2; +} + +.token.punctuation { + color: #f8f8f2; +} + +.token.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a6e22e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + diff --git a/src/css/rightSidebar.css b/src/css/rightSidebar.css new file mode 100644 index 0000000..24cfc43 --- /dev/null +++ b/src/css/rightSidebar.css @@ -0,0 +1,37 @@ +/* ----------------------right sidebar----------------- */ +.right-sidebar { + width: var(--sidebar-width); + /* position: fixed; */ + position: sticky; + top: 0; + left: calc(100%- var(--sidebar-width)); + padding: 2.5rem 2.5rem; + /* padding-left: 3.5rem; */ +} +.right-sidebar-header { + font-size: 1rem; + font-weight: 700; + letter-spacing: 1.25px; + /* text-transform: uppercase; */ + line-height: 20px; + margin-bottom: 1rem; + padding: 0 0.75rem; + margin-left: auto; + margin-right: auto; +} +.right-sidebar-nav__item { + list-style: none; + /* opacity: 0.6; */ + font-size: 0.875rem; + color: var(--text-light); + padding: 0.1rem 0.75rem; + border-radius: 0.2rem; + /* font-weight: 500; */ + cursor: pointer; + + margin-left: auto; + margin-right: auto; +} +.right-sidebar-nav__item:hover { + color: var(--primary-color); +} diff --git a/src/css/sidebar.css b/src/css/sidebar.css new file mode 100644 index 0000000..eaaa3d3 --- /dev/null +++ b/src/css/sidebar.css @@ -0,0 +1,33 @@ +.sidebar { + width: var(--sidebar-width); + /* padding: 2.5rem 2.5rem; */ + padding: 2.5rem 2.5rem; + padding-right: 3.5rem; +} +.sidebar-header { + font-size: 1rem; + font-weight: 600; + letter-spacing: 1.25px; + text-transform: uppercase; + line-height: 20px; + margin-bottom: 2rem; + padding: 0 0.75rem; +} +.sidebar-nav__item { + list-style: none; + /* opacity: 0.6; */ + color: var(--text-light); + font-size: 0.975rem; + padding: 0.5rem 0.75rem; + border-radius: 0.2rem; + font-weight: 600; + cursor: pointer; +} +.sidebar-nav__item:hover { + background-color: var(--nav-hover); +} +.active-sidebar-nav { + background-color: var(--nav-hover); + color: var(--primary-color); + font-weight: 600; +} diff --git a/src/css/style.css b/src/css/style.css index 0123f22..d50d20d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -29,11 +29,16 @@ html { .App { width: 100%; - min-height: 100vh; - background-color: var(--black-color1); + height: 100vh; + /* background-color: var(--black-color1); */ /* background-color: var(--white-color1); */ color: var(--white-color1); } +.main-content-wrapper { + display: flex; + width: 100%; + height: calc(100vh - var(--header-height)); +} /* margin */ .mr-6 { @@ -161,6 +166,6 @@ html { padding: 3rem; } -.border-color-white { +.badge-dot.border-color-white { border-color: #fff; } diff --git a/src/index.js b/src/index.js index f6d8167..d7f7e38 100644 --- a/src/index.js +++ b/src/index.js @@ -7,20 +7,26 @@ const userTheme = { light: { bg: "#FFFFFF", text: "rgba(107, 114, 128)", + textLight: "#a6a7b3", toggleColor: "#f39c12", // text: "#91929e", // 500 above, 400 below - gray // text: "rgba(156, 163, 175)" oppositeColor: "#000", border: "1px solid rgba(209, 213, 219)", + navHover: "#F3F6FF", + highlightBcg: "#CCD3E7", }, dark: { bg: "#040406", text: "rgba(156, 163, 175)", + textLight: "#606169", //change toggleColor: "#c1c2c9", // 400 gray oppositeColor: "#fff", border: "1px solid rgba(31, 41, 55)", + navHover: "#131314", //change for dark + highlightBcg: "#26272b", // also change }, }; From 933ef05d2e665fa0e4070869ca078b5b953feab3 Mon Sep 17 00:00:00 2001 From: vill Date: Wed, 31 Mar 2021 18:09:01 +0530 Subject: [PATCH 10/22] fix: updated colors and added copy icon --- src/components/Component.js | 29 +++++++++++++++++++---------- src/components/ComponentsRoute.js | 1 + src/components/Header.js | 2 +- src/css/component.css | 15 +++++++++++++-- src/index.js | 12 +++++++----- 5 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/components/Component.js b/src/components/Component.js index 58ba5e5..24e9786 100644 --- a/src/components/Component.js +++ b/src/components/Component.js @@ -25,10 +25,7 @@ export default function Component({ comp }) { return (
-
+
{variant.code} + 
                 
@@ -72,12 +87,6 @@ export default function Component({ comp }) {
))} - {/* 
-        {content}
-
*/} - {/* 
-        `console.log("test")`
-
*/}
diff --git a/src/components/ComponentsRoute.js b/src/components/ComponentsRoute.js index 0f01cd7..7e3e73b 100644 --- a/src/components/ComponentsRoute.js +++ b/src/components/ComponentsRoute.js @@ -18,6 +18,7 @@ export default function ComponentsRoute() { "--text-light": userTheme[currentTheme].textLight, "--nav-hover": userTheme[currentTheme].navHover, "--highlight-bcg": userTheme[currentTheme].highlightBcg, + "--codeBcg": userTheme[currentTheme].codeBcg, }} > diff --git a/src/components/Header.js b/src/components/Header.js index 60d760e..94196ae 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -70,7 +70,7 @@ export default function Header() {
- +
); } diff --git a/src/components/RightSidebar.js b/src/components/RightSidebar.js index 040851b..35f7dc5 100644 --- a/src/components/RightSidebar.js +++ b/src/components/RightSidebar.js @@ -2,16 +2,21 @@ import React from "react"; import "../css/rightSidebar.css"; -export default function RightSidebar({ navVariants }) { +export default function RightSidebar({ navVariants, introPresent }) { return (
On this page
 - {/* */}
-

Images

- {/* --------------------responsive images---------------------- */} -

Responsive Images

- {/* !todo later */} -
- ); -} diff --git a/src/components/Input.js b/src/components/Input.js deleted file mode 100644 index 6e2bc3a..0000000 --- a/src/components/Input.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; - -export default function Input() { - return ( -
-

Inputs

- {/* -----------------checkbox--------------- */} -

Checkbox

- - {/* ----------------radio---------------------- */} - {/* radio--light for light scheme */} -

Radio

- - - {/* */} - {/* ----------------toggle---------------------- */} -

Toggle

- {/* toggle--light for light scheme */} - - {/* ------------------text-------------- */} -

Text Input

-
- - -
-
- - - -
- {/* -------------------text with bcg----------------- */} -
- - -
-
- - -
- {/* todo ------------slider------------------------------- */} -
- ); -} diff --git a/src/components/RightSidebar.js b/src/components/RightSidebar.js index 35f7dc5..921c746 100644 --- a/src/components/RightSidebar.js +++ b/src/components/RightSidebar.js @@ -1,6 +1,6 @@ import React from "react"; -import "../css/rightSidebar.css"; +// import "../css/rightSidebar.css"; export default function RightSidebar({ navVariants, introPresent }) { return ( @@ -16,7 +16,7 @@ export default function RightSidebar({ navVariants, introPresent }) { {navVariants.map((nav, i) => { return (
  • - {nav} + {nav}
    • ); })} diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 9f7a731..814eb30 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,7 +1,7 @@ import React from "react"; import { componentData } from "./componentData"; -import "../css/sidebar.css"; +// import "../css/sidebar.css"; export default function Sidebar({ currentComp, setCurrentComp }) { const navItems = Object.keys(componentData); @@ -9,13 +9,7 @@ export default function Sidebar({ currentComp, setCurrentComp }) { setCurrentComp(comp); }; return ( -
    +
    COMPONENTS