diff --git a/README.md b/README.md new file mode 100644 index 0000000..bd73528 --- /dev/null +++ b/README.md @@ -0,0 +1,29 @@ +# PARS.css Component Library + +PARS.css is a component library built using pure css. It provides a set of common website components with more to be added in the future. The components make use of predefined css classes that follow the BEM syntax to compose the component. + +The documentation site is built using React.js. It makes use of Prism.js for code highlighting. The site also support both light and dark mode. Parcel used for bundling and hosted on Netlify. + +Still under development. Fixes and more features will be added soon. + +## Installation + +Clone the repository or download it as zip. + +Install dependencies: + +``` +npm install +``` + +Compile app and run the server: + +``` +npm run dev +``` + +## Demo + +![PARS.css](https://i.imgur.com/UGYru83.png) + +[Project Live Link](https://pars.netlify.app/). diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..ff1c050 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,4 @@ +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b556580..a5d8b6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1094,7 +1094,6 @@ "version": "7.12.5", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -1156,6 +1155,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 +2293,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 +3009,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 +4161,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", @@ -4288,6 +4318,14 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, + "history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6564,6 +6602,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", @@ -6586,7 +6632,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -6768,11 +6813,43 @@ "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", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "react-router": { + "version": "6.0.0-beta.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz", + "integrity": "sha512-VgMdfpVcmFQki/LZuLh8E/MNACekDetz4xqft+a6fBZvvJnVqKbLqebF7hyoawGrV1HcO5tVaUang2Og4W2j1Q==", + "requires": { + "prop-types": "^15.7.2" + } + }, + "react-router-dom": { + "version": "6.0.0-beta.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz", + "integrity": "sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==", + "requires": { + "prop-types": "^15.7.2", + "react-router": "6.0.0-beta.0" + } }, "read-pkg": { "version": "2.0.0", @@ -6839,8 +6916,7 @@ "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true + "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==" }, "regenerator-transform": { "version": "0.14.5", @@ -7100,6 +7176,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 +8045,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..d68caad 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,12 @@ "description": "", "main": "index.js", "dependencies": { + "history": "^5.0.0", + "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", + "react-router-dom": "^6.0.0-beta.0" }, "devDependencies": { "babel-eslint": "^10.1.0", diff --git a/src/App.js b/src/App.js index 8504268..250d443 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,18 @@ import React from "react"; +import "./css/pars.css"; +import "./css/prism.css"; import "./css/style.css"; +import Header from "./components/Header"; +import ComponentsRoute from "./components/ComponentsRoute"; +import { BrowserRouter as Router } from "react-router-dom"; export default function App() { return ( -
-

test

+
+
+ + +
); } diff --git a/src/android-chrome-192x192.png b/src/android-chrome-192x192.png new file mode 100644 index 0000000..8afc24d Binary files /dev/null and b/src/android-chrome-192x192.png differ diff --git a/src/android-chrome-512x512.png b/src/android-chrome-512x512.png new file mode 100644 index 0000000..520f0ff Binary files /dev/null and b/src/android-chrome-512x512.png differ diff --git a/src/apple-touch-icon.png b/src/apple-touch-icon.png new file mode 100644 index 0000000..6a83c34 Binary files /dev/null and b/src/apple-touch-icon.png differ diff --git a/src/browserconfig.xml b/src/browserconfig.xml new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ b/src/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/src/components/Component.js b/src/components/Component.js new file mode 100644 index 0000000..12989bd --- /dev/null +++ b/src/components/Component.js @@ -0,0 +1,179 @@ +import React, { useEffect, useRef, useState } 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 theme = userTheme[currentTheme]; + const currentVariants = + currentTheme === "light" ? comp.lightVariants : comp.darkVariants; + const navVariants = currentVariants.map(({ name }) => name); + + const variantRefs = useRef([]); + variantRefs.current = []; + const [variantStatus, setVariantStatus] = useState( + Array(navVariants.length).fill(false) + ); + + const addToVariantRefs = (el) => { + if (el && !variantRefs.current.includes(el)) { + variantRefs.current.push(el); + } + }; + + const getRefIndex = (viewEl, viewElements) => { + return viewElements.findIndex((el) => el === viewEl); + }; + + const options = { + root: null, + rootMargin: "0px", + threshold: 0.5, + }; + + const handleCopy = (reactCode) => { + navigator.clipboard.writeText( + reactElementToJSXString(reactCode).slice(26, -6) + ); + }; + + const inViewCallback = (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const inViewIndex = getRefIndex(entry.target, variantRefs.current); + setVariantStatus((prevStatus) => { + return prevStatus.map((status, statusIndex) => { + if (statusIndex === inViewIndex) return true; + else return false; + }); + }); + } + // else { + // const outOfViewIndex = getRefIndex(entry.target, variantRefs.current); + // setVariantStatus((prevStatus) => { + // return prevStatus.map((status, statusIndex) => { + // if (statusIndex === outOfViewIndex) return false; + // else return status; + // }); + // }); + // } + }); + }; + + const mainContentRef = useRef(null); + useEffect(() => { + Prism.highlightAll(); + }, [currentTheme]); + + useEffect(() => { + Prism.highlightAll(); + mainContentRef.current.scrollTo(0, 0); + }, [comp]); + + useEffect(() => { + const observer = new IntersectionObserver(inViewCallback, options); + + variantRefs.current.forEach((variant) => { + observer.observe(variant); + }); + + return () => { + variantRefs.current.forEach((variant) => { + observer.unobserve(variant); + }); + }; + }, [variantRefs]); + + return ( +
+
+
+
+ {comp.title} +
+
{comp.desc}
+
+ {comp.intro && ( +
+
+ Introduction + + # + +
+
{comp.intro}
+
+ )} + + {currentVariants.map((variant, i) => ( +
+
+ {variant.name} + + # + +
+
{variant.desc}
+
+
+ {variant.code} + +
+ 
+                
+                  {reactElementToJSXString(variant.code).slice(26, -6)}
+                
+
+
+
+ ))} +
+ +
+ ); +} diff --git a/src/components/ComponentsRoute.js b/src/components/ComponentsRoute.js new file mode 100644 index 0000000..bc6598b --- /dev/null +++ b/src/components/ComponentsRoute.js @@ -0,0 +1,38 @@ +import React from "react"; +import Sidebar from "./Sidebar"; +import Component from "./Component"; +import { useTheme } from "./theme-context"; +import { componentData } from "./componentData"; +import { Routes, Route, Navigate } from "react-router-dom"; + +export default function ComponentsRoute() { + const { currentTheme, userTheme } = useTheme(); + const theme = userTheme[currentTheme]; + const navItems = Object.keys(componentData); + return ( +
+ + + + {navItems.map((item, i) => ( + } + /> + ))} + +
+ ); +} diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..2d6a6f8 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,90 @@ +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 theme = userTheme[currentTheme]; + const headerStyle = { + backgroundColor: theme.bg, + color: theme.text, + "--text-color:": theme.text, + "--bg": theme.toggleColor, + borderBottom: theme.border, + }; + return ( +
+
+ +
+ PARS.css +
+
+
+ +
+ + +
+
+
+ + +
+
+ ); +} diff --git a/src/components/RightSidebar.js b/src/components/RightSidebar.js new file mode 100644 index 0000000..c0d7f63 --- /dev/null +++ b/src/components/RightSidebar.js @@ -0,0 +1,39 @@ +import React from "react"; + +// import "../css/rightSidebar.css"; + +export default function RightSidebar({ + navVariants, + variantStatus, + introPresent, +}) { + return ( +
+
On this page
+ +
+ ); +} diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js new file mode 100644 index 0000000..cb81b24 --- /dev/null +++ b/src/components/Sidebar.js @@ -0,0 +1,25 @@ +import React from "react"; +import { componentData } from "./componentData"; +import { NavLink } from "react-router-dom"; + +export default function Sidebar() { + const navItems = Object.keys(componentData); + return ( +
+
COMPONENTS
+ +
+ ); +} diff --git a/src/components/componentData.js b/src/components/componentData.js new file mode 100644 index 0000000..e41e458 --- /dev/null +++ b/src/components/componentData.js @@ -0,0 +1,2769 @@ +import React from "react"; +import avatarImg from "../images/avatar.jpeg"; +import reptileImg from "../images/contemplative-reptile.jpg"; +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: ( +
+ 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
. +
+ ), + 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: ( +
+
+ +
+
+ ), + }, + { + 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: ( +
+
+ + +
+
+ ), + }, + ], + 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: ( +
+
+ +
+
+ ), + }, + { + 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: ( +
+
+ + +
+
+ ), + }, + ], + 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.", + 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 info alert!
+
+
+ ), + }, + { + name: "With title", + desc: ( +
+ To add a title to the alert, add{" "} +
.alert__title
div inside{" "} +
.alert__msg
. +
+ ), + code: ( +
+
+
+
Info
+ This is an info alert! +
+
+
+ ), + }, + { + name: "With Icon", + desc: ( +
+ To add an icon, wrap an svg or img in{" "} +
.alert--icon
div inside{" "} +
.alert
. +
+ ), + code: ( +
+
+
+ +
+
+
Info
+ This is an info 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: ( +
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+ ), + }, + { + name: "Outlined", + desc: ( +
+ To create the outlined variant, add{" "} +
.alert--outline
class to the{" "} +
.alert
div +
+ ), + code: ( +
+
+
+ +
+
This is an info 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 info alert!
+
+
+ ), + }, + { + name: "With title", + desc: ( +
+ To add a title to the alert, add{" "} +
.alert__title
div inside{" "} +
.alert__msg
. +
+ ), + code: ( +
+
+
+
Info
+ This is an info alert! +
+
+
+ ), + }, + { + name: "With Icon", + desc: ( +
+ To add an icon, wrap an svg or img in{" "} +
.alert--icon
div inside{" "} +
.alert
. +
+ ), + code: ( +
+
+
+ +
+
+
Info
+ This is an info 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: ( +
+
+
+ +
+
This is an info alert!
+
+ +
+
+
+ ), + }, + { + name: "Outlined", + desc: ( +
+ To create the outlined variant, add{" "} +
.alert--outline
class to the{" "} +
.alert
div +
+ ), + code: ( +
+
+
+ +
+
This is an info 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. They can be used as a notification that there are additional items associated with an element.", + 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: ( +
+
+ + 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 +
+
+ ), + }, + { + 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 + +
+
+ ), + }, + { + name: "With Avatar", + desc: ( +
+ To add badge to avatar, add{" "} +
.badge-wrapper
class to{" "} +
.avatar
div. Then add span inside + with
.badge
class. +
+ ), + code: ( +
+
+ + 2 +
+
+ ), + }, + { + name: "Dot with Avatar", + desc: ( +
+ To get the dot variant just replace{" "} +
.badge
with{" "} +
.badge-dot
. +
+ ), + code: ( +
+
+ + +
+
+ ), + }, + ], + darkVariants: [ + { + name: "With Icon", + desc: ( +
+ Wrap an svg/img inside a{" "} +
.badge-wrapper
div and add a span + with class
.badge
. +
+ ), + code: ( +
+
+ + 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 +
+
+ ), + }, + { + 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 + +
+
+ ), + }, + { + name: "With Avatar", + desc: ( +
+ To add badge to avatar, add{" "} +
.badge-wrapper
class to{" "} +
.avatar
div. Then add span inside + with
.badge
class. +
+ ), + code: ( +
+
+ + 2 +
+
+ ), + }, + { + name: "Dot with Avatar", + desc: ( +
+ To get the dot variant just replace{" "} +
.badge
with{" "} +
.badge-dot
. +
+ ), + code: ( +
+
+ + +
+
+ ), + }, + ], + 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.", + 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. 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. +
+ ), + 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. 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. +
+ ), + 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__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. +
+ ), + code: ( +
+
+
+
+
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 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: ( +
+
+
+
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. +

+
+
+
+
+ + +
+ +
+
+
+
+ ), + }, + { + 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: ( +
+
+
+
+ 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
+
+
+
+
+ ), + }, + { + 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: ( +
+
+
+
+
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 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: ( +
+
+
+
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. +

+
+
+
+
+ + +
+ +
+
+
+
+ ), + }, + { + 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: ( +
+
+
+
+ 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
+
+
+
+
+ ), + }, + { + 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 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
+
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 Left: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text center: 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 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
+
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 Left: Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Corporis aliquam praesentium temporibus consequuntur + incidunt. +
+
+ Text center: 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/components/theme-context.js b/src/components/theme-context.js new file mode 100644 index 0000000..7e8d844 --- /dev/null +++ b/src/components/theme-context.js @@ -0,0 +1,25 @@ +import React, { createContext, useState, useContext } from "react"; + +export const ThemeContext = createContext(); + +export function ThemeProvider({ children, userTheme }) { + const [currentTheme, setCurrentTheme] = useState( + JSON.parse(localStorage.getItem("mode")) || "light" + ); + const toggleTheme = () => { + setCurrentTheme((currentTheme) => { + const newTheme = currentTheme === "light" ? "dark" : "light"; + localStorage.setItem("mode", JSON.stringify(newTheme)); + return newTheme; + }); + }; + return ( + + {children} + + ); +} + +export function useTheme() { + return useContext(ThemeContext); +} diff --git a/src/css/css-lib/alert.css b/src/css/css-lib/alert.css new file mode 100644 index 0000000..75e49c5 --- /dev/null +++ b/src/css/css-lib/alert.css @@ -0,0 +1,194 @@ +:root { + --error-color: rgb(250, 179, 174); +} + +.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; + background-color: rgb(9, 9, 9); + color: white; +} +.alert > .alert__icon > svg { + fill: var(--white-color1); +} +.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: 0.25rem; +} +.alert--rounded-full { + border-radius: 0.75rem; +} +.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; */ + font-size: 1.375rem; + opacity: 0.9; + /* padding: 4px 0; */ + padding: 0.25rem 0; + /* margin-right: 12px; */ + margin-right: 0.75rem; + display: flex; + justify-content: center; + align-items: center; + align-self: flex-start; +} +.alert__icon > svg { + 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; + 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; */ + border-radius: 0.25rem; + 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: 0.375rem 0.5rem; +} +.alert__actions button::before { + content: ""; + width: 100%; + height: 120%; + background-color: rgba(128, 128, 128, 0.25); + position: absolute; + border-radius: 50%; + transform: scale(1); + opacity: 0; + transition: opacity 0.3s, transform 0.2s; +} +.alert__actions button:active::before { + opacity: 0.9; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +.alert__actions button:hover { + background-color: rgba(128, 128, 128, 0.2); +} +.alert__actions svg { + fill: currentColor; + width: 1.325em; + height: 1.325em; + display: inline-block; +} + +/* 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); +} +.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; + border: 1px solid var(--white-color1); +} +.alert--error.alert--outline { + border: 1px solid #f44336; + 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; +} diff --git a/src/css/css-lib/avatar.css b/src/css/css-lib/avatar.css new file mode 100644 index 0000000..4c3c021 --- /dev/null +++ b/src/css/css-lib/avatar.css @@ -0,0 +1,53 @@ +.avatar { + border-radius: 50%; + width: 2.25rem; + height: 2.25rem; + /* width: 36px; + height: 36px; */ + display: flex; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.07); +} +.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; +} +.avatar--rounded > * { + border-radius: 0.25rem; +} + +.avatar--sm { + width: 1.5rem; + height: 1.5rem; + /* width: 24px; + height: 24px; */ +} +.avatar--md { + width: 2.25rem; + height: 2.25rem; +} +.avatar--lg { + width: 3rem; + height: 3rem; +} +.avatar--xl { + width: 4.5rem; + height: 4.5rem; +} +.avatar--2xl { + width: 6.125rem; + height: 6.125rem; +} diff --git a/src/css/css-lib/badge.css b/src/css/css-lib/badge.css new file mode 100644 index 0000000..871b2cc --- /dev/null +++ b/src/css/css-lib/badge.css @@ -0,0 +1,71 @@ +.badge-wrapper { + position: relative; + display: inline-flex; +} +.badge { + position: absolute; + top: 0; + right: 0; + border-radius: 0.625rem; + display: flex; + justify-content: center; + align-items: center; + min-width: 1.25rem; + width: auto; + height: 1.25rem; + transform: scale(1) translate(40%, -40%); + transform-origin: 100% 0%; + font-size: 0.75rem; + padding: 0 0.375rem; + line-height: 1; + font-weight: 600; +} +.badge--sm { + min-width: 1rem; + height: 1rem; + font-size: 0.6rem; +} +.badge--md { + min-width: 1.25rem; + height: 1.25rem; + font-size: 0.75rem; +} +.badge--lg { + min-width: 1.5rem; + height: 1.5rem; + font-size: 0.9rem; +} + +.badge-dot { + width: 1rem; + min-width: 1rem; + height: 1rem; + border: 3px solid var(--black-color1); + border-radius: 50%; + position: absolute; + top: 0; + right: 0; + transform: scale(1) translate(30%, -30%); + transform-origin: 100% 0%; + border-radius: 0.625rem; + display: flex; + justify-content: center; + align-items: center; + /* todo: make this border dynamic */ +} +.badge-dot.badge-dot--sm { + width: 0.75rem; + min-width: 0.75rem; + height: 0.75rem; +} +.badge-dot.badge-dot--lg { + width: 1.25rem; + min-width: 1.25rem; + height: 1.25rem; +} + +.badge-wrapper .badge--bottom { + top: 100%; + transform: scale(1) translate(30%, -70%); + transform-origin: 100% 0%; +} diff --git a/src/css/css-lib/button.css b/src/css/css-lib/button.css new file mode 100644 index 0000000..8980db3 --- /dev/null +++ b/src/css/css-lib/button.css @@ -0,0 +1,300 @@ +.btn { + font-size: 1rem; + line-height: 1.75; + letter-spacing: 0.05em; + cursor: pointer; + border-style: none; + outline: none; + padding: 0.375rem 1.125rem; + height: 3.5rem; + min-width: 9rem; + display: inline-flex; + position: relative; + align-items: center; + justify-content: space-around; + gap: 0.4rem; + vertical-align: middle; + text-decoration: none; + user-select: none; + -moz-user-select: none; + -webkit-appearance: none; + 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); +} +.btn:active { + 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::before { + content: ""; + width: 100%; + height: 120%; + background-color: rgba(252, 252, 252, 0.1); + position: absolute; + border-radius: 50%; + transform: scale(1); + opacity: 0; + transition: opacity 0.3s, transform 0.2s; +} +.btn:active::before { + opacity: 0.9; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +.btn--sm { + font-size: 0.875rem; + height: 2.625rem; + min-width: 4rem; + gap: 0.6rem; +} +.btn--md { + font-size: 1rem; + height: 3.5rem; + min-width: 9rem; + gap: 0.4rem; +} +.btn--lg { + font-size: 1.175rem; + height: 4.25rem; + min-width: 10rem; + gap: 0.2rem; +} + +.btn--rounded { + border-radius: 0.25rem; +} +.btn--pill { + border-radius: 2rem; +} +.btn.btn--danger { + color: var(--white-color1); + background-color: rgba(220, 38, 38); /*600*/ + fill: currentColor; +} +.btn.btn--danger:hover { + background-color: rgba(185, 28, 28); +} + +.btn.btn--default { + color: rgba(0, 0, 0, 0.87); + background-color: rgba(229, 231, 235); /*200*/ + fill: currentColor; +} +.btn.btn--default:hover { + background-color: rgba(209, 213, 219); +} + +.btn.btn--success { + color: var(--white-color1); + background-color: rgba(5, 150, 105); /*600*/ + fill: currentColor; +} +.btn.btn--success:hover { + background-color: rgba(4, 120, 87); +} +.btn.btn--dark { + background-color: rgba(31, 41, 55); /*800*/ + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--dark:hover { + background-color: rgba(55, 65, 81); +} +.btn.btn--blue { + background-color: rgba(37, 99, 235); /*600*/ + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--blue:hover { + background-color: rgba(29, 78, 216); +} +.btn.btn--yellow { + background-color: rgba(245, 158, 11); /*500*/ + color: var(--white-color1); + fill: currentColor; +} +.btn.btn--yellow:hover { + background-color: rgba(217, 119, 6); +} +.btn.btn--black { + background-color: var(--black-color3); + color: var(--white-color3); + fill: currentColor; +} +.btn.btn--black:hover { + background-color: var(--white-color3); + color: var(--black-color3); +} +.btn.btn--white { + background-color: var(--white-color3); + color: var(--black-color3); + fill: currentColor; +} +.btn.btn--white:hover { + background-color: var(--black-color3); + color: var(--white-color3); +} + +.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--outlined.btn--danger { + color: rgba(220, 38, 38); + border: 1px solid rgba(220, 38, 38); + fill: currentColor; +} +.btn--outlined.btn--danger:hover { + background-color: rgba(220, 38, 38, 0.1); +} +.btn--outlined.btn--default { + color: rgba(229, 231, 235); + border: 1px solid rgba(229, 231, 235); + fill: currentColor; +} +.btn--outlined.btn--default:hover { + background-color: rgba(229, 231, 235, 0.1); +} +.btn--outlined.btn--success { + color: rgba(5, 150, 105); + border: 1px solid rgba(5, 150, 105); + fill: currentColor; +} +.btn--outlined.btn--success:hover { + background-color: rgba(5, 150, 105, 0.1); +} +.btn--outlined.btn--dark { + color: rgba(31, 41, 55); + border: 1px solid rgba(31, 41, 55); + fill: currentColor; +} +.btn--outlined.btn--dark:hover { + background-color: rgba(31, 41, 55, 0.1); +} +.btn--outlined.btn--blue { + color: rgba(37, 99, 235); + border: 1px solid rgba(37, 99, 235); + fill: currentColor; +} +.btn--outlined.btn--blue:hover { + background-color: rgba(37, 99, 235, 0.1); +} +.btn--outlined.btn--yellow { + color: rgba(245, 158, 11); + border: 1px solid rgba(245, 158, 11); + fill: currentColor; +} +.btn--outlined.btn--yellow:hover { + background-color: rgba(245, 158, 11, 0.1); +} +.btn--outlined.btn--black { + color: var(--black-color3); + border: 1px solid var(--black-color3); + fill: currentColor; +} +.btn--outlined.btn--black:hover { + color: rgba(156, 163, 175); + background-color: var(--black-color3); +} +.btn--outlined.btn--white { + color: var(--white-color3); + border: 1px solid var(--white-color3); + fill: currentColor; +} +.btn--outlined.btn--white:hover { + color: var(--black-color3); + background-color: var(--white-color3); +} +.btn.btn--link { + background-color: transparent; + padding: 0.375rem 0.5rem; + min-width: 4rem; + box-shadow: none; +} +.btn.btn--link:hover { + filter: brightness(0.9); + background-color: rgba(128, 128, 128, 0.14); +} + +.btn__icon { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.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; + min-width: auto; + max-width: 3.5rem; + box-shadow: none; + fill: #e0e0e0; +} +.btn--sm.btn--icon-circle { + max-width: 2.625rem; + min-width: 2.625rem; + height: 2.625rem; +} +.btn--md.btn--icon-circle { + max-width: 3.5rem; + min-width: 3.5rem; + height: 3.5rem; +} +.btn--lg.btn--icon-circle { + max-width: 4.25rem; + min-width: 4.25rem; + height: 4.25rem; +} +.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(128, 128, 128, 0.35); +} +.btn.btn--icon-circle:hover { + background-color: rgba(128, 128, 128, 0.35); +} +.btn.btn--icon-rounded:hover { + background-color: rgba(128, 128, 128, 0.35); +} + +.btn.btn--disabled { + filter: grayscale(0.6); + cursor: default; + box-shadow: none; +} diff --git a/src/css/css-lib/card.css b/src/css/css-lib/card.css new file mode 100644 index 0000000..bf1468c --- /dev/null +++ b/src/css/css-lib/card.css @@ -0,0 +1,73 @@ +.card { + border-radius: 0.25rem; + 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--square { + border-radius: 0; +} +.card__content { + padding: 1em; +} +.card__header { + display: flex; + padding: 1em; +} +.card__media { + overflow: hidden; + position: relative; +} +.card__media > * { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 50% 50%; +} +.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; +} +.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 { + 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: cover; +} +.card__content > .card__header, +.card__content > .card__footer { + padding: 0; +} diff --git a/src/css/css-lib/input.css b/src/css/css-lib/input.css new file mode 100644 index 0000000..c9d90d1 --- /dev/null +++ b/src/css/css-lib/input.css @@ -0,0 +1,460 @@ +/* input container */ +.input-checkbox { + z-index: 0; + position: relative; + display: inline-block; + color: rgba(255, 255, 255, 0.87); + font-size: 1rem; + line-height: 1.5; +} + +/* opacity 0 input */ +.input-checkbox > input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + z-index: -1; + position: absolute; + left: -0.625rem; + top: -0.5rem; + display: block; + margin: 0; + border-radius: 50%; + width: 2.5rem; + height: 2.5rem; + 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: 0.188rem 0.688rem 0.188rem 0.063rem; + border: solid 2px; + border-color: #3d424e; + border-radius: 0.125rem; + width: 1.125rem; + height: 1.125rem; + vertical-align: top; + transition: border-color 0.2s, background-color 0.2s; +} + +/* Checkmark */ +.input-checkbox > span::after { + content: ""; + display: block; + position: absolute; + top: 0.25rem; + left: 0.125rem; + width: 0.625rem; + height: 0.313rem; + border: solid 2px transparent; + border-right: none; + border-top: none; + transform: translate(0.188rem, 0.25rem) rotate(-45deg); +} + +/* Checked, Indeterminate */ +.input-checkbox > input:checked, +.input-checkbox > input:indeterminate { + background-color: rgb(5, 5, 5); +} + +.input-checkbox > input:checked + span::before, +.input-checkbox > input:indeterminate + span::before { + border: 1px solid #3d424e; + background-color: rgb(255, 255, 255); +} + +.input-checkbox > input:checked + span::after, +.input-checkbox > input:indeterminate + span::after { + border-color: rgb(0, 0, 0); +} + +.input-checkbox > input:indeterminate + span::after { + border-left: none; + transform: translate(0.25rem, 0.188rem); +} + +/* 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(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: 1rem; + 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: -0.625rem; + top: -0.5rem; + display: block; + margin: 0; + border-radius: 50%; + width: 2.5rem; + height: 2.5rem; + 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: 0.125rem 0.625rem 0.125rem 0; + border: solid 2px; + border-color: #3d424e; + border-radius: 50%; + width: 1.25rem; + height: 1.25rem; + vertical-align: top; + transition: border-color 0.2s; +} + +/* Check */ +.input-radio > span::after { + content: ""; + display: block; + position: absolute; + top: 0.125rem; + left: 0; + border-radius: 50%; + width: 0.625rem; + height: 0.625rem; + background-color: white; + transform: translate(0.313rem, 0.313rem) scale(0); + transition: transform 0.2s; +} +.radio--light > span::after { + background-color: black; +} + +/* Checked */ +.input-radio > input:checked { + background-color: rgb(5, 5, 5); +} + +.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; +} + +/* 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: 1rem; + line-height: 1.5; +} + +/* Input */ +.input-toggle > input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + z-index: -1; + position: absolute; + right: 0.75rem; + top: -0.063rem; + display: block; + margin: 0; + border-radius: 50%; + width: 2.25rem; + height: 2.25rem; + background-color: rgba(128, 128, 128, 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: 0.313rem 0 0.313rem 0.625rem; + border-radius: 0.875rem; + width: 2.625rem; + height: 1.5rem; + background-color: #3d424e; + vertical-align: top; + transition: background-color 0.2s, opacity 0.2s; +} + +/* Thumb */ +.input-toggle > span::after { + content: ""; + position: absolute; + top: 0.563rem; + right: 1.313rem; + border-radius: 50%; + width: 1rem; + height: 1rem; + 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: -0.438rem; + background-color: rgb(128, 128, 128, 0.7); +} + +.input-toggle > input:checked + span::before { + background-color: #505766; +} + +.input-toggle > input:checked + span::after { + background-color: rgb(255, 255, 255); + transform: translateX(1rem); +} + +/* 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: #505766; +} + +.input-toggle > input:checked:active + span::before { + 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: #505766; +} + +/* ---------------------text------------------------ */ + +.input-text { + position: relative; +} +.input-text input { + color: #fff; + background-color: #292f3a; + width: 100%; + letter-spacing: 0.063rem; + border: 0; + padding: 0.6rem 0.6rem; + border-bottom: 1px solid rgba(75, 85, 99); +} +.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: 0.125rem; + 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: 0.063rem; + border: 1px solid rgba(156, 163, 175); + padding: 0.6rem 0.8rem; + position: relative; + background-color: transparent; +} +.input-text--bcg.input-text--light input { + color: #000; +} + +.input-text--bcg input:focus { + transition: 0.5s; + background-color: rgba(17, 24, 39); + border-color: rgba(249, 250, 251); +} +.input-text--bcg.input-text--light input:focus { + background-color: rgba(229, 231, 235); + border-color: rgba(17, 24, 39); +} +/* icon input */ +.input-text__icon { + position: absolute; + top: 50%; + left: 0.6rem; + transform: translate(0, -50%); + width: 1.5rem; +} diff --git a/src/css/css-lib/typography.css b/src/css/css-lib/typography.css new file mode 100644 index 0000000..2660452 --- /dev/null +++ b/src/css/css-lib/typography.css @@ -0,0 +1,542 @@ +.text-h1 { + font-size: 6rem; + font-weight: 300; + letter-spacing: -1.5px; + line-height: 7.5rem; +} + +.text-h2 { + font-size: 3.75rem; + font-weight: 300; + letter-spacing: -0.5px; + line-height: 5rem; +} + +.text-h3 { + font-size: 3rem; + font-weight: 400; + letter-spacing: 0; + line-height: 4rem; +} + +.text-h4 { + font-size: 2.125rem; + font-weight: 400; + letter-spacing: 0.25px; + line-height: 3rem; +} + +.text-h5 { + font-size: 1.5rem; + font-weight: 400; + letter-spacing: 0; + line-height: 2.25rem; +} + +.text-h6 { + font-size: 1.25rem; + font-weight: 500; + letter-spacing: 0.15px; + line-height: 1.75rem; +} +.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: 1rem; + font-weight: 400; + letter-spacing: 0.15px; + line-height: 1.5rem; +} + +.text-subtitle2 { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.1px; + line-height: 1.25rem; +} + +.text-body1 { + font-size: 1rem; + font-weight: 400; + letter-spacing: 0.5px; + line-height: 1.5rem; +} + +.text-body2 { + font-size: 0.875rem; + font-weight: 400; + letter-spacing: 0.25px; + line-height: 1.25rem; +} + +.text-button { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 1.25px; + text-transform: uppercase; + line-height: 1.25rem; +} + +.text-caption { + font-size: 0.75rem; + font-weight: 400; + letter-spacing: 0.4px; + line-height: 1.25rem; +} + +.text-overline { + font-size: 0.625rem; + font-weight: 400; + letter-spacing: 1.5px; + text-transform: uppercase; + line-height: 1rem; +} + +/* 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; +} */ + +/* 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; +} diff --git a/src/css/css-lib/utility.css b/src/css/css-lib/utility.css new file mode 100644 index 0000000..5f1b4d1 --- /dev/null +++ b/src/css/css-lib/utility.css @@ -0,0 +1,613 @@ +:root { + --white-color1: #f1f5f6; + --white-color2: #f3f2f3; + --white-color3: #f6f6f6; + + --black-color1: #131213; + --black-color2: #0b0c0d; + --black-color3: #040404; +} + +/* ---------------------------------------utitlity classes--------------------------------------- */ + +/* 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; +} + +/* container */ +.container-card { + max-width: 345px; +} +.container-xs { + max-width: 300px; +} +.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; +} + +/* display */ +.hidden { + display: none; +} +.block { + display: block; +} +.inline-block { + display: inline-block; +} +.inline { + display: inline; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} + +/* visibility */ +.visible { + visibility: visible; +} +.invisible { + visibility: hidden; +} + +/* ------------------------------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; +} + +/* 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%; +} +.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; +} + +/* fill svg */ +.fill-white { + fill: var(--white-color1); +} +.fill-black { + fill: var(--black-color1); +} +/* 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)); +} +.bg-red-50 { + --bg-opacity: 1; + background-color: rgba(254, 242, 242, var(--bg-opacity)); +} +.bg-red-100 { + --bg-opacity: 1; + background-color: rgba(254, 226, 226, var(--bg-opacity)); +} +.bg-red-200 { + --bg-opacity: 1; + background-color: rgba(254, 202, 202, var(--bg-opacity)); +} +.bg-red-300 { + --bg-opacity: 1; + background-color: rgba(252, 165, 165, var(--bg-opacity)); +} +.bg-red-400 { + --bg-opacity: 1; + background-color: rgba(248, 113, 113, var(--bg-opacity)); +} +.bg-red-500 { + --bg-opacity: 1; + background-color: rgba(239, 68, 68, var(--bg-opacity)); +} +.bg-red-600 { + --bg-opacity: 1; + background-color: rgba(220, 38, 38, var(--bg-opacity)); +} +.bg-red-700 { + --bg-opacity: 1; + background-color: rgba(185, 28, 28, var(--bg-opacity)); +} +.bg-red-800 { + --bg-opacity: 1; + background-color: rgba(153, 27, 27, var(--bg-opacity)); +} +.bg-red-900 { + --bg-opacity: 1; + background-color: rgba(127, 29, 29, var(--bg-opacity)); +} +.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; +} diff --git a/src/css/pars.css b/src/css/pars.css new file mode 100644 index 0000000..26b9187 --- /dev/null +++ b/src/css/pars.css @@ -0,0 +1,8 @@ +@import url("./css-lib/button.css"); +@import url("./css-lib/avatar.css"); +@import url("./css-lib/alert.css"); +@import url("./css-lib/badge.css"); +@import url("./css-lib/card.css"); +@import url("./css-lib/input.css"); +@import url("./css-lib/typography.css"); +@import url("./css-lib/utility.css"); 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/style.css b/src/css/style.css index c82a21d..04af5b8 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,7 @@ :root { - --text-color: black; - --bg-color: #e5e7eb; + --header-height: 80px; + --sidebar-width: 18%; + --primary-color: #3e6eff; } /* border box */ @@ -15,7 +16,573 @@ html { body { margin: 0; - font: 16px/1.7 "Source Sans Pro", Helvetica, Helvetica Neue, Arial, sans-serif; + font: 16px/1.7 "Inter", sans-serif; +} +*, +body, +html { + margin: 0; + padding: 0; +} + +/* ----------------------app-------------------------- */ +.App { + width: 100%; + height: 100vh; + color: var(--white-color1); +} +/* ----------------------header------------------------ */ +header { + height: var(--header-height); + position: relative; + border-bottom: 1px solid rgba(209, 213, 219); +} + +.theme-toggle .toggle-icon::after { + background-color: var(--bg); +} +.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; +} +.logo__text { + letter-spacing: 1.25px; + font-weight: 700; + font-size: 1.25rem; + margin-left: 0.5rem; +} +.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%; +} +.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; + white-space: nowrap; +} +.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); - background-color: var(--bg-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: -0.125rem; + left: 0; + width: 100%; + height: 0.25rem; + border-radius: 0.125rem; + background-color: var(--primary-color); + 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 { + color: var(--primary-color); +} +.main-nav__item button:active .main-nav__item::before { + transform-origin: bottom right; + transform: scale(0); +} + +.search-bar-wrapper.input-text--light .focus-border { + bottom: -55%; + background-color: rgba(128, 128, 128, 0.3); + height: 0.188rem; +} +.search-bar-wrapper.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 > a { + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} +.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; +} + +/* -------------------------main-content------------------------ */ +.main-content-wrapper { + display: flex; + width: 100%; + height: calc(100vh - var(--header-height)); +} + +/* -----------------------sidebar---------------------------- */ +.sidebar { + width: var(--sidebar-width); + padding: 3rem 2.5rem; + padding-right: 3.5rem; +} +.sidebar-header { + font-size: 1rem; + font-weight: 600; + letter-spacing: 0.078rem; + text-transform: uppercase; + line-height: 1.25rem; + margin-bottom: 2rem; + padding: 0 0.75rem; +} +.sidebar a { + display: inline-block; + text-decoration: none; + width: 100%; + height: 100%; +} +.sidebar-nav__item { + list-style: none; + color: var(--text-light); + font-size: 0.975rem; + padding: 0.5rem 0.75rem; + border-radius: 0.2rem; + font-weight: 600; + cursor: pointer; + text-decoration: none; +} +.sidebar-nav__item:hover { + background-color: var(--nav-hover); +} +.active-sidebar-nav .sidebar-nav__item { + background-color: var(--nav-hover); + color: var(--primary-color); + font-weight: 600; +} + +/* ----------------------------component------------------------ */ +.main-content { + overflow: auto; + display: flex; + width: calc(100% - var(--sidebar-width)); + position: relative; +} + +.component-wrapper { + flex-grow: 1; + padding: 3rem 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 { + padding-top: 1rem; + 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 { + min-height: 3rem; +} + +.highlight { + display: inline-flex; + background-color: var(--highlight-bcg); + 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: 4.25rem; + margin-bottom: 3.25rem; + border-bottom: 1px solid rgba(128, 128, 128, 0.2); +} +.component-variant-header { + padding-top: 1rem; + font-size: 2rem; + line-height: 1; + font-weight: 600; + margin-bottom: 2rem; +} +.component-variant-desc { + 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); + position: relative; +} +pre[class*="language-"] { + margin: 0; + border-radius: 0 0 0.4rem 0.4rem; + padding-bottom: 2.5rem; + background-color: var(--codeBcg); +} + +.comp__eg > * { + margin: 1rem; +} + +.btn-copy { + position: absolute; + bottom: -3.75rem; + right: 1rem; +} +.btn-copy.btn:hover { + background-color: rgba(128, 128, 128, 0.1); +} +.btn-copy::before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + background-color: var(--primary-color); + border-radius: 50%; + transform: scale(1); + opacity: 0; + transition: opacity 0.3s, transform 0.2s; +} +.btn-copy:active::before { + opacity: 0.8; + transform: scale(0); + transition: transform 0s, opacity 0s; +} + +/* direct link */ +.direct-link-wrapper { + position: relative; +} +.direct-link > a { + color: var(--primary-color); + font-size: 1.75rem; + text-decoration: none; + margin-left: 0.5rem; + opacity: 0; + transition: opacity 0.3s; +} + +.direct-link-wrapper:hover .direct-link > a { + opacity: 1; +} + +/* ------------------------------right-sidebar------------------ */ + +.right-sidebar { + width: var(--sidebar-width); + position: sticky; + top: 0; + left: calc(100%- var(--sidebar-width)); + padding: 3rem 2.5rem; +} +.right-sidebar-header { + font-size: 1rem; + font-weight: 700; + letter-spacing: 1.25px; + line-height: 20px; + margin-bottom: 1rem; + padding: 0 0.75rem; + margin-left: auto; + margin-right: auto; +} +.right-sidebar-nav__item { + list-style: none; + font-size: 0.875rem; + color: var(--text-light); + padding: 0.1rem 0.75rem; + border-radius: 0.2rem; + cursor: pointer; + margin-left: auto; + margin-right: auto; + white-space: nowrap; +} +.right-sidebar-nav__item > .right-sidebar-nav__item--active { + color: var(--primary-color); +} +.right-sidebar-nav__item a { + text-decoration: none; + color: var(--text-light); +} +.right-sidebar-nav__item a:hover { + color: var(--primary-color); +} +.right-sidebar-nav__item a:focus { + color: var(--primary-color); +} + +/* ------------------------extra utility------------------ */ +/* 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; +} + +.badge-dot.border-color-white { + border-color: #fff; +} + +/* ----------------media-queries------------------- */ +@media (max-width: 1280px) { + .sidebar { + padding: 2.5rem 1.25rem; + } + .component-wrapper { + padding: 2.5rem 0; + padding-right: 1.25rem; + } + .right-sidebar { + padding: 2.5rem 1.25rem; + } + .logo { + padding: 0 2rem; + } + .logo__text { + font-size: 1.15rem; + } + .main-nav__item + .main-nav__item { + margin-left: 1.75rem; + } +} + +@media (max-width: 1024px) { + .right-sidebar { + display: none; + } + .component-wrapper { + /* padding-right: 2.5rem; */ + max-width: 100%; + } + .header-btns { + width: calc(var(--sidebar-width) * 0.6); + max-width: calc(var(--sidebar-width) * 0.6); + } + .component-variant-header { + font-size: 1.5rem; + } + .component-intro-header { + font-size: 1.5rem; + } + .component-title { + font-size: 2rem; + } + .component-desc { + font-size: 1.1rem; + } } diff --git a/src/favicon-16x16.png b/src/favicon-16x16.png new file mode 100644 index 0000000..31278f8 Binary files /dev/null and b/src/favicon-16x16.png differ diff --git a/src/favicon-32x32.png b/src/favicon-32x32.png new file mode 100644 index 0000000..86c2ace Binary files /dev/null and b/src/favicon-32x32.png differ diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000..6f20ce2 Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/images/avatar.jpeg b/src/images/avatar.jpeg new file mode 100644 index 0000000..c5421e9 Binary files /dev/null and b/src/images/avatar.jpeg differ diff --git a/src/images/contemplative-reptile.jpg b/src/images/contemplative-reptile.jpg new file mode 100644 index 0000000..2348454 Binary files /dev/null and b/src/images/contemplative-reptile.jpg differ diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..72ed4eb --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/paella.jpg b/src/images/paella.jpg new file mode 100644 index 0000000..1747662 Binary files /dev/null and b/src/images/paella.jpg differ 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/index.html b/src/index.html index 0cb1bea..f13d9d7 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,47 @@ - Monochrome.css + PARS.css | CSS Component Library + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/index.js b/src/index.js index e467082..c730970 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,40 @@ import React from "react"; import { render } from "react-dom"; import App from "./App"; +import { ThemeProvider } from "./components/theme-context"; + +const userTheme = { + light: { + bg: "#f5f5f5", + text: "rgba(107, 114, 128)", + textLight: "#a6a7b3", + toggleColor: "#f39c12", + oppositeColor: "#000", + border: "1px solid rgba(209, 213, 219)", + navHover: "#e3e7f1", + highlightBcg: "#edf2fd", + codeBcg: "#222328", + }, + dark: { + bg: "#040406", + text: "rgba(156, 163, 175)", + textLight: "#606169", + toggleColor: "#c1c2c9", + oppositeColor: "#fff", + border: "1px solid rgba(31, 41, 55)", + navHover: "#131314", + highlightBcg: "#26272b", + codeBcg: "#222328", + }, +}; const rootEl = document.getElementById("root"); render( - + + + , rootEl ); diff --git a/src/mstile-150x150.png b/src/mstile-150x150.png new file mode 100644 index 0000000..78175c3 Binary files /dev/null and b/src/mstile-150x150.png differ diff --git a/src/safari-pinned-tab.svg b/src/safari-pinned-tab.svg new file mode 100644 index 0000000..2b84030 --- /dev/null +++ b/src/safari-pinned-tab.svg @@ -0,0 +1,158 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + + + + diff --git a/src/site.webmanifest b/src/site.webmanifest new file mode 100644 index 0000000..c6cc918 --- /dev/null +++ b/src/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#3e6eff", + "background_color": "#3e6eff", + "display": "standalone" +}