diff --git a/.eleventy.js b/.eleventy.js deleted file mode 100644 index 3e9c4cc..0000000 --- a/.eleventy.js +++ /dev/null @@ -1,163 +0,0 @@ -const fs = require('fs'); -const markdownIt = require('markdown-it'); -const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); -const htmlmin = require('html-minifier'); - -const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; - -module.exports = function(eleventyConfig) { - // Copy the `img` and `css` folders to the output - eleventyConfig.addPassthroughCopy('assets'); - - eleventyConfig.addPlugin(syntaxHighlight); - - let markdownLibrary = markdownIt({ - html: true, - linkify: true - }); - eleventyConfig.setLibrary('md', markdownLibrary); - - // Shortcodes - - eleventyConfig.addPairedShortcode('demo', function(content) { - return `
-
- Demo -
-
${content}
-
`; - }); - eleventyConfig.addPairedShortcode('pattern', function(content, name) { - const href = `/${name.toLowerCase().split(' ').join('-')}/`; - return `
- -
${content}
-
${name}
- -
`; - }); - - // `size` can be `sm`, `md`, `lg` - eleventyConfig.addShortcode('circle', function(size) { - const s = size || 'sm'; - return `
`; - }); - // `direction` can be `hor` or `ver` - eleventyConfig.addShortcode('line', function(dir) { - const w = randomInteger(1, 4) * 20; - return `
`; - }); - eleventyConfig.addShortcode('lines', function(dir, numLines) { - const content = Array(numLines).fill('').map(_ => { - const w = randomInteger(1, 4) * 20; - return `
` - }).join(''); - return `
${content}
`; - }); - - // `direction` can be `hor` or `ver` - eleventyConfig.addShortcode('rectangle', function(dir, size, width) { - const direction = dir || 'hor'; - const s = size || 'sm'; - const w = width || randomInteger(2, 4) * 20; - return `
`; - }); - eleventyConfig.addShortcode('square', function(size) { - const s = size || 'sm'; - return `
`; - }); - // `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl` - eleventyConfig.addShortcode('triangle', function(corner, size) { - const s = size || 'sm'; - return `
`; - }); - - // Get the first `n` elements of a collection. - eleventyConfig.addFilter("head", (array, n) => { - if (!Array.isArray(array) || array.length === 0) { - return []; - } - return (n < 0) ? array.slice(n) : array.slice(0, n); - }); - - eleventyConfig.addCollection('sortByTitle', function(collectionApi) { - return collectionApi.getAll() - .filter(function(item) { - let extension = item.inputPath.split('.').pop(); - return extension === 'md'; - }) - .sort(function(a, b) { - return a.data.title - b.data.title; - }); - }); - - eleventyConfig.addCollection('categories', function(collectionApi) { - const categories = []; - collectionApi.getAll() - .filter(function(item) { - let extension = item.inputPath.split('.').pop(); - return extension === 'md'; - }) - .forEach((item) => { - const category = item.data.category; - if (category && !categories.includes(category)) { - categories.push(category); - } - }); - return categories.sort(); - }); - - eleventyConfig.addCollection('groupByCategories', function(collectionApi) { - const categories = {}; - collectionApi.getAll() - .filter(function(item) { - let extension = item.inputPath.split('.').pop(); - return extension === 'md'; - }) - .forEach((item) => { - const category = item.data.category; - if (!category) { - return; - } - Array.isArray(categories[category]) - ? categories[category].push(item) - : categories[category] = [item]; - }); - return categories; - }); - - eleventyConfig.addTransform('minify-html', function(content) { - if (this.outputPath && this.outputPath.endsWith('.html')) { - return htmlmin.minify(content, { - useShortDoctype: true, - removeComments: true, - collapseWhitespace: true - }); - } - return content; - }); - - return { - // Control which files Eleventy will process - // e.g.: *.md, *.njk, *.html, *.liquid - templateFormats: [ - 'md', - 'njk', - 'html', - 'liquid', - ], - // Pre-process *.md files with: (default: `liquid`) - markdownTemplateEngine: 'njk', - - // Pre-process *.html files with: (default: `liquid`) - htmlTemplateEngine: 'njk', - - // These are all optional (defaults are shown): - dir: { - input: 'contents', - includes: '_includes', - data: '_data', - output: '_site' - } - }; -}; \ No newline at end of file diff --git a/.eleventyignore b/.eleventyignore deleted file mode 100644 index 42061c0..0000000 --- a/.eleventyignore +++ /dev/null @@ -1 +0,0 @@ -README.md \ No newline at end of file diff --git a/.gitignore b/.gitignore index f459e3d..496ee2c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1 @@ -.cache -.netlify -_site -node_modules -package-lock.json \ No newline at end of file +.DS_Store \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index bad2f09..0000000 --- a/.prettierignore +++ /dev/null @@ -1,4 +0,0 @@ -.cache -.netlify -_site -node_modules \ No newline at end of file diff --git a/README.md b/README.md index 8c4cf00..afd9c8c 100644 --- a/README.md +++ b/README.md @@ -21,41 +21,6 @@ They are powered by modern CSS features such as flexbox and grid. They are great starting points to be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life. -## Running it on local - -- Clone the project: - -```shell -$ git clone https://github.com/phuocng/csslayout -``` - -- Install the dependencies: - -```shell -$ cd csslayout -$ npm install -``` - -- Run it on the local: - -```shell -$ npm run start -``` - -Visit http://localhost:8081 to see it in action. - -## Contributing - -PRs are welcomed. If you think there are any missing useful layouts or patterns, please create an issue or submit a PR. - -It's important to note that you should run the following command to lint the code: - -```shell -$ npm run lint -``` - -If there is any issue, it will be logged in the `tslint.log` file. - ## About This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge. diff --git a/assets/full-background.jpeg b/assets/full-background.jpeg deleted file mode 100644 index 77ee1e0..0000000 Binary files a/assets/full-background.jpeg and /dev/null differ diff --git a/assets/screenshot.png b/assets/screenshot.png deleted file mode 100644 index f04aa94..0000000 Binary files a/assets/screenshot.png and /dev/null differ diff --git a/assets/video-background-demo.mp4 b/assets/video-background-demo.mp4 deleted file mode 100644 index d566293..0000000 Binary files a/assets/video-background-demo.mp4 and /dev/null differ diff --git a/package.json b/package.json deleted file mode 100644 index ae08ddc..0000000 --- a/package.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "name": "csslayout", - "description": "A collection of popular layouts and patterns made with CSS", - "author": { - "name": "Nguyen Huu Phuoc", - "email": "me@phuoc.ng", - "url": "https://twitter.com/nghuuphuoc" - }, - "homepage": "https://csslayout.io", - "keywords": [ - "CSS grid", - "CSS flexbox", - "CSS layout", - "CSS patterns" - ], - "repository": { - "type": "git", - "url": "https://github.com/phuocng/csslayout" - }, - "bugs": { - "url": "https://github.com/phuocng/csslayout/issues" - }, - "license": "MIT", - "scripts": { - "build": "npm run build:eleventy && npm run build:sass", - "build:sass": "sass styles/index.scss _site/styles/index.min.css --no-source-map --style compressed", - "build:eleventy": "npx @11ty/eleventy", - "deploy": "npm run build && netlify deploy --prod --dir=_site", - "format": "prettier --write \"**/*.+(json|md|scss)\"", - "start": "npm run watch:eleventy & npm run watch:sass", - "watch:eleventy": "npx @11ty/eleventy --serve --port=8081", - "watch:sass": "sass styles/index.scss _site/styles/index.min.css --no-source-map --style compressed --watch" - }, - "devDependencies": { - "@11ty/eleventy-fetch": "^3.0.0", - "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", - "html-minifier": "^4.0.0", - "prettier": "^2.7.1", - "sass": "^1.54.8" - }, - "dependencies": { - "@11ty/eleventy": "^1.0.2", - "markdown-it": "^13.0.1" - } -} diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index c39f321..0000000 --- a/prettier.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - printWidth: 120, - singleQuote: true, - tabWidth: 4, -}; diff --git a/styles/_common.scss b/styles/_common.scss deleted file mode 100644 index 0ed567e..0000000 --- a/styles/_common.scss +++ /dev/null @@ -1,32 +0,0 @@ -:root { - --container-width: auto; -} - -body { - background: #e2e8f0; - font-family: Space Grotesk, -apple-system, Arial, ui-sans-serif, system-ui; - font-size: 1rem; - font-weight: 300; - line-height: 1.5; - margin: 0; -} -* { - box-sizing: border-box; -} -.container { - margin: 0 auto; - padding: 0 1rem; - width: var(--container-width); -} -.divider { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} -.text--primary { - color: #6366f1; -} - -@media (min-width: 1024px) { - :root { - --container-width: 64rem; - } -} diff --git a/styles/blocks/_category.scss b/styles/blocks/_category.scss deleted file mode 100644 index 1eb6e72..0000000 --- a/styles/blocks/_category.scss +++ /dev/null @@ -1,41 +0,0 @@ -:root { - --category__name-font-size: 1.5rem; - --category__post-num-columns: 1; -} -.category__name { - font-size: var(--category__name-font-size); -} -.category__posts { - display: grid; - grid-template-columns: repeat(var(--category__post-num-columns), 1fr); - background-color: #fff; - border-radius: 0.5rem; - box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%); -} -.category__link { - background: #4338ca; - border-radius: 9999px; - color: #fff; - display: block; - padding: 0.5rem 1rem; - text-align: center; - text-decoration: none; - margin: 1rem auto; - width: 12rem; -} -@media (min-width: 640px) { - :root { - --category__post-num-columns: 2; - } -} -@media (min-width: 768px) { - :root { - --category__name-font-size: 2rem; - --category__post-num-columns: 3; - } -} -@media (min-width: 1024px) { - :root { - --category__post-num-columns: 5; - } -} diff --git a/styles/blocks/_css-scan.scss b/styles/blocks/_css-scan.scss deleted file mode 100644 index ef7f9c9..0000000 --- a/styles/blocks/_css-scan.scss +++ /dev/null @@ -1,83 +0,0 @@ -.cssscan { - -webkit-font-smoothing: antialiased; - color: #000; - text-decoration: none; - display: block; -} - -.cssscan__inner { - background: #c2fbd7; - border-radius: 0.5rem; - padding: 2rem; - position: relative; - overflow: hidden; - box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; - cursor: pointer; - text-align: left; -} - -.cssscan__title { - font-size: 2rem; - font-weight: 700; - margin-bottom: 0; - margin-top: 0; -} - -.cssscan__desc { - opacity: 0.8; - color: #333; - margin-top: 1em; - margin-bottom: 1em; -} - -.cssscan__more { - margin: 0; - margin-top: 2em; -} - -.cssscan__image { - position: absolute; - transform: rotate(-7deg); - transition: all 0.3s; - top: 14%; - right: -37%; - width: 95%; - height: 95%; -} - -.cssscan__inner:hover { - .cssscan__more { - text-decoration: underline; - } - - .cssscan__image { - transform: scale(1.1) rotate(-7deg); - top: 10%; - right: -35%; - } -} - -@media screen and (min-width: 0px) and (max-width: 1024px) { - .cssscan { - padding: 0; - } - - .cssscan__inner { - margin-top: 2rem; - } - - .cssscan__image { - top: initial; - bottom: -14%; - width: 45%; - height: 45%; - right: -5%; - } - - .cssscan__inner:hover .cssscan__image { - top: initial; - bottom: -10%; - right: -5%; - transform: scale(1.1) rotate(-7deg); - } -} diff --git a/styles/blocks/_example.scss b/styles/blocks/_example.scss deleted file mode 100644 index 02ee79c..0000000 --- a/styles/blocks/_example.scss +++ /dev/null @@ -1,71 +0,0 @@ -.example { - box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); - margin: 2rem -1rem 2rem -1rem; - position: relative; -} -.example--border { - border-top: 1px solid #d1d5db; - border-bottom: 1px solid #d1d5db; -} -.example__ribbon { - height: 8rem; - width: 8rem; - overflow: hidden; - position: absolute; - z-index: 1; - - &::before, - &::after { - border: 0.25rem solid #4338ca; - content: ''; - position: absolute; - z-index: -1; - } -} -.example__title { - background-color: #6366f1; - color: #fff; - position: absolute; - padding: 0.5rem 0; - text-transform: uppercase; - text-align: center; - // It is a result of height * Math.sqrt(2) - width: 181px; -} -.example__ribbon--tr { - top: -0.5rem; - right: -0.5rem; - - &::before, - &::after { - border-top-color: transparent; - border-right-color: transparent; - } - &::after { - bottom: 0; - right: 0; - } - &::before { - top: 0; - left: 0; - } - .example__title { - transform: translate(-13px, 30px) rotate(45deg); - } -} -.example__content { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - padding: 1rem; -} -.example__content--small { - height: 20rem; -} -.example__content--medium { - height: 30rem; -} -.example__content--large { - height: 40rem; -} diff --git a/styles/blocks/_follow.scss b/styles/blocks/_follow.scss deleted file mode 100644 index 511ec28..0000000 --- a/styles/blocks/_follow.scss +++ /dev/null @@ -1,29 +0,0 @@ -.follow { - background: #fff; - border-radius: 0.5rem; - margin: 2rem auto; - padding: 1rem; - position: relative; - max-width: 20rem; - - &::after { - background-image: linear-gradient(45deg, #9333ea, #ea580c); - border-radius: inherit; - content: ''; - - /* Absolute position */ - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - - margin: -0.5rem; - z-index: -1; - } -} - -.follow__link { - color: #2563eb; - text-decoration: none; -} diff --git a/styles/blocks/_footer.scss b/styles/blocks/_footer.scss deleted file mode 100644 index fb2a137..0000000 --- a/styles/blocks/_footer.scss +++ /dev/null @@ -1,56 +0,0 @@ -:root { - --footer-num-columns: 1; -} - -.footer { - display: grid; - grid-template-columns: repeat(var(--footer-num-columns), 1fr); - column-gap: var(--footer-column-gap, 0); - font-size: 0.9rem; - row-gap: 1rem; - margin: 2rem 0; -} -.footer__heading { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 0.5rem; -} -.footer__list { - list-style-type: none; - margin: 0; - padding: 0; -} -.footer__item { - margin-bottom: 0.25rem; -} -.footer__link { - color: #000; - text-decoration: none; -} -.footer__link:hover { - text-decoration: underline; -} - -.footer__new { - background: #6366f1; - border-radius: 9999px; - color: #fff; - font-size: 0.75rem; - padding: 0 0.5rem; - margin-left: 0.5rem; -} - -.footer__author { - margin-top: 1rem; -} - -@media (min-width: 640px) { - :root { - --footer-num-columns: 3; - } -} -@media (min-width: 1024px) { - :root { - --footer-column-gap: 1rem; - } -} diff --git a/styles/blocks/_header.scss b/styles/blocks/_header.scss deleted file mode 100644 index c771ec8..0000000 --- a/styles/blocks/_header.scss +++ /dev/null @@ -1,25 +0,0 @@ -.header { - align-items: center; - display: flex; - justify-content: space-between; - padding: 1rem 0; -} -.header__breadcrumb { - align-items: center; - display: flex; - justify-content: center; -} -.header__link { - align-items: center; - color: #222; - display: flex; - padding: 0.5rem; - text-decoration: none; -} -.header__link--primary { - background: #6366f1; - border-radius: 9999px; - color: #fff; - padding: 0.5rem 1rem; - text-decoration: none; -} diff --git a/styles/blocks/_hero.scss b/styles/blocks/_hero.scss deleted file mode 100644 index 29474b9..0000000 --- a/styles/blocks/_hero.scss +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --hero-margin: 2rem; - --hero-width: 100%; - --hero__heading-font-size: 2rem; -} -.hero { - margin: var(--hero-margin) auto; - text-align: center; - width: var(--hero-width); -} -.hero__heading { - font-size: var(--hero__heading-font-size); - font-weight: 700; - line-height: 1.25; - margin: 2rem auto; - text-align: center; -} -.hero__button { - background: #6366f1; - border-radius: 9999px; - color: #fff; - padding: 1rem 2rem; - text-decoration: none; -} -@media (min-width: 768px) { - :root { - --hero-margin: 3rem; - --hero-width: 75%; - --hero__heading-font-size: 2.5rem; - } -} diff --git a/styles/blocks/_nav.scss b/styles/blocks/_nav.scss deleted file mode 100644 index 2c8b12e..0000000 --- a/styles/blocks/_nav.scss +++ /dev/null @@ -1,33 +0,0 @@ -:root { - --nav__item-margin-bottom: 1rem; -} -.nav__item { - align-items: center; - display: flex; - justify-content: center; - text-align: center; - - background: #6366f1; - border-radius: 0.25rem; - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); - color: #f9fafb; - margin-bottom: var(--nav__item-margin-bottom); - padding: 0.25rem 1rem; - - text-decoration: none; -} -.nav__item--next { - margin-left: auto; -} -.nav__item--prev { - margin-right: auto; -} - -@media (min-width: 640px) { - .nav { - display: flex; - } - :root { - --nav__item-margin-bottom: 0; - } -} diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss deleted file mode 100644 index 0fd4d32..0000000 --- a/styles/blocks/_pattern.scss +++ /dev/null @@ -1,30 +0,0 @@ -.pattern__item { - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - padding: 1rem; - text-align: center; -} -.pattern__link { - text-align: center; - text-decoration: none; -} -.pattern__cover { - /* Center the content */ - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - - pointer-events: none; - - color: #000; - height: 10rem; - width: 100%; - margin-bottom: 0.5rem; - overflow: hidden; -} -.pattern__title { - color: #6366f1; - font-size: 1.25rem; - font-weight: 500; -} diff --git a/styles/blocks/_post.scss b/styles/blocks/_post.scss deleted file mode 100644 index 4f1e4dd..0000000 --- a/styles/blocks/_post.scss +++ /dev/null @@ -1,127 +0,0 @@ -:root { - --post__heading-font-size: 2rem; - --post__heading-line-height: 1.25; - --post__content-heading-line-height: 1.25; -} - -.post { - background-color: #fff; - border-radius: 0.5rem; - box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1); - margin: 2rem 0 2rem 0; - padding: 2rem 1rem 1rem 1rem; - position: relative; -} - -.post__heading { - color: #6366f1; - font-size: var(--post__heading-font-size); - font-weight: 700; - line-height: var(--post__heading-line-height); - text-align: center; -} - -.post__content { - line-height: 1.5; - - a { - color: #6366f1; - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - - blockquote { - background-color: rgba(0, 0, 0, 0.1); - border-radius: 0.5rem; - margin: 1rem 0; - padding: 0.25rem 1rem; - } - - h1 { - font-size: 2.5rem; - font-weight: 600; - line-height: var(--post__content-heading-line-height); - } - - h2 { - font-size: 2rem; - font-weight: 600; - line-height: var(--post__content-heading-line-height); - } - - hr { - background: rgba(0, 0, 0, 0.1); - height: 1px; - border: none; - } - - img { - max-width: 100%; - } - - > ol { - counter-reset: ol-step-counter; - list-style-type: none; - margin: 0; - padding: 0; - } - - > ol li { - counter-increment: ol-step-counter; - padding-bottom: 0.25rem; - padding-left: 2rem; - } - > ol li::before { - background-color: #d1d5db; - border-radius: 50%; - content: counter(ol-step-counter); - align-items: center; - display: inline-flex; - justify-content: center; - position: absolute; - margin-left: -2rem; - height: 1.5rem; - width: 1.5rem; - } - - p { - margin: 1rem 0; - } - - table { - border-collapse: collapse; - width: 100%; - } - - td, - th { - padding: 0.5rem; - } - - th { - font-weight: normal; - text-align: left; - } - - thead { - background: #d1d5db; - } - - tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - } - - > ul { - margin: 0; - padding: 0 0 0 1.5rem; - } -} - -@media (min-width: 1024px) { - :root { - --post__heading-font-size: 2.5rem; - --post__content-heading-line-height: 1.5; - } -} diff --git a/styles/index.scss b/styles/index.scss deleted file mode 100644 index 0062daa..0000000 --- a/styles/index.scss +++ /dev/null @@ -1,133 +0,0 @@ -@import './common'; - -@import './blocks/category'; -@import './blocks/css-scan'; -@import './blocks/example'; -@import './blocks/hero'; -@import './blocks/follow'; -@import './blocks/footer'; -@import './blocks/header'; -@import './blocks/nav'; -@import './blocks/pattern'; -@import './blocks/post'; - -// Pages -@import './pages/home'; - -// Patterns -@import './patterns/accordion'; -@import './patterns/arrow-buttons'; -@import './patterns/avatar'; -@import './patterns/avatar-list'; -@import './patterns/badge'; -@import './patterns/box-selector'; -@import './patterns/breadcrumb'; -@import './patterns/button-with-icon'; -@import './patterns/calendar'; -@import './patterns/card-layout'; -@import './patterns/card'; -@import './patterns/centering'; -@import './patterns/chip'; -@import './patterns/circular-navigation'; -@import './patterns/close-button'; -@import './patterns/color-swatch'; -@import './patterns/concave-corners'; -@import './patterns/cookie-banner'; -@import './patterns/corner-ribbon'; -@import './patterns/curved-background'; -@import './patterns/custom-checkbox-button'; -@import './patterns/custom-radio-button'; -@import './patterns/diagonal-section'; -@import './patterns/docked-at-corner'; -@import './patterns/dot-leader'; -@import './patterns/dot-navigation'; -@import './patterns/drawer'; -@import './patterns/drop-area'; -@import './patterns/drop-cap'; -@import './patterns/dropdown'; -@import './patterns/fading-long-section'; -@import './patterns/feature-comparison'; -@import './patterns/feature-list'; -@import './patterns/fixed-at-corner'; -@import './patterns/fixed-at-side'; -@import './patterns/floating-label'; -@import './patterns/folder-structure'; -@import './patterns/full-background'; -@import './patterns/full-screen-menu'; -@import './patterns/holy-grail'; -@import './patterns/indeterminate-progress-bar'; -@import './patterns/initial-avatar'; -@import './patterns/input-addon'; -@import './patterns/inverted-corners'; -@import './patterns/keyboard-shortcut'; -@import './patterns/layered-card'; -@import './patterns/lined-paper'; -@import './patterns/masonry-grid'; -@import './patterns/media-object'; -@import './patterns/mega-menu'; -@import './patterns/menu'; -@import './patterns/modal'; -@import './patterns/nested-dropdowns'; -@import './patterns/notification'; -@import './patterns/overlay-play-button'; -@import './patterns/pagination'; -@import './patterns/popover-arrow'; -@import './patterns/presence-indicator'; -@import './patterns/previous-next-buttons'; -@import './patterns/price-tag'; -@import './patterns/pricing-table'; -@import './patterns/progress-bar'; -@import './patterns/property-list'; -@import './patterns/questions-and-answers'; -@import './patterns/radial-progress-bar'; -@import './patterns/radio-button-group'; -@import './patterns/radio-switch'; -@import './patterns/rating'; -@import './patterns/resizable-element'; -@import './patterns/ribbon'; -@import './patterns/same-height-columns'; -@import './patterns/search-box'; -@import './patterns/separator'; -@import './patterns/sidebar'; -@import './patterns/simple-grid'; -@import './patterns/slider'; -@import './patterns/spin-button'; -@import './patterns/spinner'; -@import './patterns/split-navigation'; -@import './patterns/split-screen'; -@import './patterns/stacked-cards'; -@import './patterns/stamp-border'; -@import './patterns/statistic'; -@import './patterns/status-light'; -@import './patterns/stepper-input'; -@import './patterns/sticky-footer'; -@import './patterns/sticky-header'; -@import './patterns/sticky-sections'; -@import './patterns/sticky-table-column'; -@import './patterns/sticky-table-headers'; -@import './patterns/switch'; -@import './patterns/tab'; -@import './patterns/teardrop'; -@import './patterns/three-dimensions-card'; -@import './patterns/timeline'; -@import './patterns/toggle-password-visibility'; -@import './patterns/tooltip'; -@import './patterns/tree-diagram'; -@import './patterns/triangle-buttons'; -@import './patterns/upload-button'; -@import './patterns/validation-icon'; -@import './patterns/video-background'; -@import './patterns/voting'; -@import './patterns/watermark'; -@import './patterns/wizard'; -@import './patterns/zigzag-timeline'; - -// Placeholders -@import './placeholders/circle'; -@import './placeholders/line'; -@import './placeholders/rectangle'; -@import './placeholders/square'; -@import './placeholders/triangle'; - -// Themes -@import './themes/dracula.scss'; diff --git a/styles/pages/_home.scss b/styles/pages/_home.scss deleted file mode 100644 index 8a1b62e..0000000 --- a/styles/pages/_home.scss +++ /dev/null @@ -1,5 +0,0 @@ -.home__tip { - font-size: 1.5rem; - margin-top: 2rem; - text-align: center; -} diff --git a/styles/patterns/_accordion.scss b/styles/patterns/_accordion.scss deleted file mode 100644 index ef79115..0000000 --- a/styles/patterns/_accordion.scss +++ /dev/null @@ -1,32 +0,0 @@ -.accordion { - border: 1px solid #d1d5db; - border-radius: 4px; - height: 100%; - width: 100%; -} -.accordion__item:not(:last-child) { - border-bottom: 1px solid #d1d5db; -} -.accordion__header { - align-items: center; - display: flex; - justify-content: center; - cursor: pointer; - padding: 0.5rem; -} -.accordion__toggle { - margin-right: 0.25rem; -} -.accordion__title { - flex: 1; -} -.accordion__content { - padding: 0.5rem; -} - -.accordion__item--collapsed .accordion__content { - display: none; -} -.accordion__item--expanded .accordion__content { - display: block; -} diff --git a/styles/patterns/_arrow-buttons.scss b/styles/patterns/_arrow-buttons.scss deleted file mode 100644 index f08e47f..0000000 --- a/styles/patterns/_arrow-buttons.scss +++ /dev/null @@ -1,66 +0,0 @@ -.arrow-buttons { - position: relative; - height: 100%; - width: 100%; -} -.arrow-button { - /* Transparent background */ - background-color: transparent; - - /* Size */ - height: 12px; - width: 12px; -} - -.arrow-button--t { - /* Edges */ - border-left: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translateY(25%) rotate(45deg); -} - -.arrow-button--r { - /* Edges */ - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translateX(-25%) rotate(45deg); -} - -.arrow-button--b { - /* Edges */ - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - transform: translateY(-25%) rotate(45deg); -} - -.arrow-button--l { - /* Edges */ - border-bottom: 1px solid #d1d5db; - border-left: 1px solid #d1d5db; - transform: translateX(25%) rotate(45deg); -} - -/* Demo */ -.arrow-buttons__corner { - position: absolute; -} -.arrow-buttons__corner--t { - left: 50%; - top: 0; - transform: translate(-50%, 0%); -} -.arrow-buttons__corner--r { - right: 0; - top: 50%; - transform: translate(0%, -50%); -} -.arrow-buttons__corner--b { - bottom: 0; - left: 50%; - transform: translate(-50%, 0%); -} -.arrow-buttons__corner--l { - left: 0; - top: 50%; - transform: translate(0%, -50%); -} diff --git a/styles/patterns/_avatar-list.scss b/styles/patterns/_avatar-list.scss deleted file mode 100644 index 222b241..0000000 --- a/styles/patterns/_avatar-list.scss +++ /dev/null @@ -1,28 +0,0 @@ -.avatars { - display: flex; - justify-content: center; - - height: 2rem; - width: 100%; -} -.avatars__item { - margin-left: -0.25rem; -} -.avatars__image { - background-color: #d1d5db; - box-shadow: 0 0 0 0.25rem #fff; - color: #fff; - font-size: 0.75rem; - - /* Rounded border */ - border-radius: 50%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Size */ - height: 2rem; - width: 2rem; -} diff --git a/styles/patterns/_avatar.scss b/styles/patterns/_avatar.scss deleted file mode 100644 index ce3156b..0000000 --- a/styles/patterns/_avatar.scss +++ /dev/null @@ -1,17 +0,0 @@ -.avatar { - height: 4rem; - width: 4rem; - - background-color: #d1d5db; - /* Rounded border */ - border-radius: 50%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; -} -.avatar__image { - height: 50%; - width: 50%; -} diff --git a/styles/patterns/_badge.scss b/styles/patterns/_badge.scss deleted file mode 100644 index c45ff4b..0000000 --- a/styles/patterns/_badge.scss +++ /dev/null @@ -1,15 +0,0 @@ -.badge { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Colors */ - background-color: #d1d5db; - color: #fff; - - /* Rounded border */ - border-radius: 9999px; - height: 3rem; - width: 3rem; -} diff --git a/styles/patterns/_box-selector.scss b/styles/patterns/_box-selector.scss deleted file mode 100644 index 1a5a730..0000000 --- a/styles/patterns/_box-selector.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* Demo */ -.box-selector-container { - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 0.5rem; - row-gap: 0.5rem; - - height: 8rem; - width: 8rem; -} - -.box-selector { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.5rem; -} - -.box-selector--selected { - border: 2px solid #3b82f6; - position: relative; - - &:before { - content: ''; - left: 0.25rem; - position: absolute; - top: 0.25rem; - - height: 1rem; - width: 1rem; - - background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E"); - background-position: center center; - background-repeat: no-repeat; - } -} diff --git a/styles/patterns/_breadcrumb.scss b/styles/patterns/_breadcrumb.scss deleted file mode 100644 index 076a8aa..0000000 --- a/styles/patterns/_breadcrumb.scss +++ /dev/null @@ -1,20 +0,0 @@ -.breadcrumb { - /* Content is centered vertically */ - align-items: center; - display: flex; -} - -.breadcrumb__item { - margin: 0 0.5rem; - position: relative; -} - -.breadcrumb__item:not(:last-child)::after { - /* Absolute position */ - position: absolute; - right: 0; - top: 0; - transform: translate(0.5rem, 0px); - - content: '/'; -} diff --git a/styles/patterns/_button-with-icon.scss b/styles/patterns/_button-with-icon.scss deleted file mode 100644 index 76afe79..0000000 --- a/styles/patterns/_button-with-icon.scss +++ /dev/null @@ -1,18 +0,0 @@ -.button-with-icon { - /* Center the content */ - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - - /* Demo */ - background: #fff; - border: 1px solid #d1d5db; - border-radius: 0.25rem; - width: 8rem; -} - -.button-with-icon__label { - flex: 1; - margin-left: 0.5rem; -} diff --git a/styles/patterns/_calendar.scss b/styles/patterns/_calendar.scss deleted file mode 100644 index c854924..0000000 --- a/styles/patterns/_calendar.scss +++ /dev/null @@ -1,33 +0,0 @@ -.calendar { - display: grid; - grid-template-columns: repeat(7, 1fr); - - /* Demo */ - font-size: 0.75rem; - width: 8rem; -} - -.calendar__weekday { - border-bottom: 1px solid #d1d5db; - padding: 0.125rem; -} - -.calendar__day { - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - padding: 0.25rem; - text-align: center; -} - -.calendar__day--current { - background-color: #3b82f6; - color: #fff; -} - -.calendar__day:nth-child(7n + 1) { - border-left: 1px solid #d1d5db; -} - -.calendar__day--disabled { - color: #e5e7eb; -} diff --git a/styles/patterns/_card-layout.scss b/styles/patterns/_card-layout.scss deleted file mode 100644 index 875a271..0000000 --- a/styles/patterns/_card-layout.scss +++ /dev/null @@ -1,23 +0,0 @@ -.card-layout { - display: flex; - - /* Put a card in the next row when previous cards take all width */ - flex-wrap: wrap; - - margin-left: -0.25rem; - margin-right: -0.25rem; - - /* Demo */ - width: 8rem; -} - -.card-layout__item { - /* There will be 3 cards per row */ - flex-basis: 33.33333%; - - padding-left: 0.25rem; - padding-right: 0.25rem; - - /* Demo */ - margin: 0.25rem 0; -} diff --git a/styles/patterns/_card.scss b/styles/patterns/_card.scss deleted file mode 100644 index 552be0d..0000000 --- a/styles/patterns/_card.scss +++ /dev/null @@ -1,19 +0,0 @@ -.card { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - border: 1px solid #d1d5db; - border-radius: 0.25rem; -} -.card__cover { - background: #d1d5db; - border-radius: 0.25rem; - height: 40%; - width: 100%; -} -.card__content { - /* Take available height */ - flex: 1; - padding: 0.5rem; -} diff --git a/styles/patterns/_centering.scss b/styles/patterns/_centering.scss deleted file mode 100644 index 9ba12e0..0000000 --- a/styles/patterns/_centering.scss +++ /dev/null @@ -1,9 +0,0 @@ -.centering { - align-items: center; - display: flex; - justify-content: center; - - /* Demo */ - flex-direction: column; - width: 6rem; -} diff --git a/styles/patterns/_chip.scss b/styles/patterns/_chip.scss deleted file mode 100644 index bfb310c..0000000 --- a/styles/patterns/_chip.scss +++ /dev/null @@ -1,69 +0,0 @@ -.chip { - /* Center the content */ - align-items: center; - display: inline-flex; - justify-content: center; - - /* Background color */ - background-color: #d1d5db; - - /* Rounded border */ - border-radius: 9999px; - - /* Spacing */ - padding: 0.25rem 0.5rem; -} - -.chip__content { - margin-right: 0.25rem; -} - -.chip__button { - /* Reset */ - background-color: transparent; - border-color: transparent; - - /* Cursor */ - cursor: pointer; - - /* Size */ - height: 1rem; - width: 1rem; - - /* Used to position the inner */ - position: relative; -} - -.chip__button-line { - /* Background color */ - background-color: #9ca3af; - - /* Position */ - position: absolute; - - /* Size */ - height: 1px; - width: 100%; -} - -.chip__button-line--first { - /* Position */ - left: 0px; - top: 50%; - transform: translate(0%, -50%) rotate(45deg); - - /* Size */ - height: 1px; - width: 100%; -} - -.chip__button-line--second { - /* Position */ - left: 50%; - top: 0px; - transform: translate(-50%, 0%) rotate(45deg); - - /* Size */ - height: 100%; - width: 1px; -} diff --git a/styles/patterns/_circular-navigation.scss b/styles/patterns/_circular-navigation.scss deleted file mode 100644 index 952db22..0000000 --- a/styles/patterns/_circular-navigation.scss +++ /dev/null @@ -1,81 +0,0 @@ -.circular-navigation-container { - /* Demo */ - align-items: center; - display: flex; - justify-content: center; - - height: 8rem; - width: 8rem; -} - -.circular-navigation { - position: relative; - height: 2rem; - width: 2rem; -} - -.circular-navigation__circle { - /* Position */ - position: absolute; - top: 0; - - /* - 3rem is the distance from the item to the trigger element. - Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item - in case you want to have a total of 6 menu items. - The formulation is 360 / numberOfItems * indexOfItem - */ - transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem); - - /* Must have the same size as the trigger element */ - height: 2rem; - width: 2rem; - - /* Demo */ - background-color: #d1d5db; - border-radius: 9999px; -} - -.circular-navigation__content { - /* - Rotate it to make it displayed vertically - Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item - in case you want to have a total of 6 menu items. - The formulation is -(360 / numberOfItems * indexOfItem) - */ - transform: rotate(var(--circular-navigation__content-degree)); - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Take full size */ - height: 100%; - width: 100%; -} - -.circular-navigation__circle--1 { - --circular-navigation__circle-degree: 0deg; - --circular-navigation__content-degree: -0deg; -} -.circular-navigation__circle--2 { - --circular-navigation__circle-degree: 60deg; - --circular-navigation__content-degree: -60deg; -} -.circular-navigation__circle--3 { - --circular-navigation__circle-degree: 120deg; - --circular-navigation__content-degree: -120deg; -} -.circular-navigation__circle--4 { - --circular-navigation__circle-degree: 180deg; - --circular-navigation__content-degree: -180deg; -} -.circular-navigation__circle--5 { - --circular-navigation__circle-degree: 240deg; - --circular-navigation__content-degree: -240deg; -} -.circular-navigation__circle--6 { - --circular-navigation__circle-degree: 300deg; - --circular-navigation__content-degree: -300deg; -} diff --git a/styles/patterns/_close-button.scss b/styles/patterns/_close-button.scss deleted file mode 100644 index 8b8cda6..0000000 --- a/styles/patterns/_close-button.scss +++ /dev/null @@ -1,49 +0,0 @@ -.close-button { - /* Reset */ - background-color: transparent; - border-color: transparent; - - /* Cursor */ - cursor: pointer; - - /* Size */ - height: 3rem; - width: 3rem; - - /* Used to position the inner */ - position: relative; -} - -.close-button__line { - /* Background color */ - background-color: #d1d5db; - - /* Position */ - position: absolute; - - /* Size */ - height: 1px; - width: 100%; -} - -.close-button__line--first { - /* Position */ - left: 0px; - top: 50%; - transform: translate(0%, -50%) rotate(45deg); - - /* Size */ - height: 1px; - width: 100%; -} - -.close-button__line--second { - /* Position */ - left: 50%; - top: 0px; - transform: translate(-50%, 0%) rotate(45deg); - - /* Size */ - height: 100%; - width: 1px; -} diff --git a/styles/patterns/_color-swatch.scss b/styles/patterns/_color-swatch.scss deleted file mode 100644 index b36f9c6..0000000 --- a/styles/patterns/_color-swatch.scss +++ /dev/null @@ -1,34 +0,0 @@ -.swatch { - /* Wrap the items */ - align-items: center; - display: flex; - justify-content: center; - flex-wrap: wrap; -} -.swatch__item { - /* Rounded border */ - border-radius: 9999px; - height: 1.5rem; - width: 1.5rem; - - /* Space between items */ - margin: 0.5rem; -} -.swatch__item--1st { - background-color: rgba(0, 0, 0, 0.1); -} -.swatch__item--2nd { - background-color: rgba(0, 0, 0, 0.2); -} -.swatch__item--3rd { - background-color: #d1d5db; -} -.swatch__item--4th { - background-color: rgba(0, 0, 0, 0.4); -} -.swatch__item--5th { - background-color: rgba(0, 0, 0, 0.5); -} -.swatch__item--6th { - background-color: rgba(0, 0, 0, 0.6); -} diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss deleted file mode 100644 index 3a210cf..0000000 --- a/styles/patterns/_concave-corners.scss +++ /dev/null @@ -1,56 +0,0 @@ -.concave-corners { - background-color: #d1d5db; - - /* Used to position the corners */ - position: relative; - - /* Misc */ - height: 100%; - width: 100%; -} -.concave-corners__corner { - /* Absolute position */ - position: absolute; - - /* Size */ - height: 1rem; - width: 1rem; - - background: #fff; -} - -.concave-corners__corner--tl { - /* Position */ - left: 0; - top: 0; - - /* Border radius */ - border-radius: 0 0 1rem 0; -} - -.concave-corners__corner--tr { - /* Position */ - right: 0; - top: 0; - - /* Border radius */ - border-radius: 0 0 0 1rem; -} - -.concave-corners__corner--bl { - /* Position */ - bottom: 0; - left: 0; - - /* Border radius */ - border-radius: 0 1rem 0 0; -} - -.concave-corners__corner--br { - /* Position */ - bottom: 0; - right: 0; - - /* Border radius */ - border-radius: 1rem 0 0 0; -} diff --git a/styles/patterns/_cookie-banner.scss b/styles/patterns/_cookie-banner.scss deleted file mode 100644 index 0ef2011..0000000 --- a/styles/patterns/_cookie-banner.scss +++ /dev/null @@ -1,17 +0,0 @@ -.cookie-banner { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - height: 100%; - width: 100%; - - align-items: end; - display: flex; -} - -.cookie-banner__content { - border-top: 1px solid #d1d5db; - /* Take available width */ - flex: 1; - padding: 0 0.5rem; -} diff --git a/styles/patterns/_corner-ribbon.scss b/styles/patterns/_corner-ribbon.scss deleted file mode 100644 index 7a17ae2..0000000 --- a/styles/patterns/_corner-ribbon.scss +++ /dev/null @@ -1,41 +0,0 @@ -.corner-ribbon { - position: relative; - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} - -.corner-ribbon__inner { - /* Displayed at the top left corner */ - left: 0px; - position: absolute; - top: 0px; - - /* Size */ - height: 4rem; - width: 4rem; - - /* Hide the part of its children which is displayed outside */ - overflow: hidden; -} - -.corner-ribbon__ribbon { - /* Position */ - left: 1rem; - position: absolute; - top: 1rem; - - /* Size */ - height: 1.5rem; - width: 5.656rem; - - /* Displayed diagonally */ - transform: translate(-38px, -8px) rotate(-45deg); - - /* Background color */ - background-color: #d1d5db; - - /* Centerize the text content */ - text-align: center; -} diff --git a/styles/patterns/_curved-background.scss b/styles/patterns/_curved-background.scss deleted file mode 100644 index e7c351e..0000000 --- a/styles/patterns/_curved-background.scss +++ /dev/null @@ -1,14 +0,0 @@ -.curved-background { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} -.curved-background__curved { - background-color: #d1d5db; - border-bottom-left-radius: 50% 40%; - border-bottom-right-radius: 50% 40%; - - height: 50%; - width: 100%; -} diff --git a/styles/patterns/_custom-checkbox-button.scss b/styles/patterns/_custom-checkbox-button.scss deleted file mode 100644 index d9f8a25..0000000 --- a/styles/patterns/_custom-checkbox-button.scss +++ /dev/null @@ -1,38 +0,0 @@ -.custom-checkbox-button { - /* Center the content horizontally */ - align-items: center; - display: inline-flex; - - /* Cursor */ - cursor: pointer; - - /* Demo */ - margin: 0.25rem 0; - width: 8rem; -} - -.custom-checkbox-button__input { - /* Hide it */ - display: none; -} - -.custom-checkbox-button__square { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - /* Spacing */ - margin-right: 0.5rem; - padding: 0.25rem; -} - -.custom-checkbox-button__checkbox { - background-color: transparent; - border-radius: 0.25rem; - height: 1rem; - width: 1rem; -} - -.custom-checkbox-button__checkbox--selected { - /* For selected checkbox */ - background-color: #3b82f6; -} diff --git a/styles/patterns/_custom-radio-button.scss b/styles/patterns/_custom-radio-button.scss deleted file mode 100644 index ced5ac0..0000000 --- a/styles/patterns/_custom-radio-button.scss +++ /dev/null @@ -1,42 +0,0 @@ -.custom-radio-button { - /* Center the content horizontally */ - align-items: center; - display: inline-flex; - - /* Cursor */ - cursor: pointer; - - /* Demo */ - margin: 0.25rem 0; - width: 8rem; -} - -.custom-radio-button__input { - /* Hide it */ - display: none; -} - -.custom-radio-button__circle { - /* Rounded border */ - border: 1px solid #d1d5db; - border-radius: 9999px; - - /* Spacing */ - margin-right: 0.5rem; - padding: 0.25rem; -} - -.custom-radio-button__radio { - /* Rounded border */ - border-radius: 9999px; - height: 1rem; - width: 1rem; - - /* For not selected radio */ - background-color: transparent; -} - -.custom-radio-button__radio--selected { - /* For selected radio */ - background-color: #3b82f6; -} diff --git a/styles/patterns/_diagonal-section.scss b/styles/patterns/_diagonal-section.scss deleted file mode 100644 index b09028c..0000000 --- a/styles/patterns/_diagonal-section.scss +++ /dev/null @@ -1,24 +0,0 @@ -.diagonal-section { - /* Used to position the diagonal area */ - position: relative; - - height: 100%; - width: 100%; -} - -.diagonal-section__diagonal { - /* Absolute position */ - left: 0px; - position: absolute; - top: 50%; - - /* Take full size */ - height: 2rem; - width: 100%; - - /* Create diagonal sides */ - transform: translate(0, -50%) skewY(-15deg); - - /* Background color */ - background-color: #d1d5db; -} diff --git a/styles/patterns/_docked-at-corner.scss b/styles/patterns/_docked-at-corner.scss deleted file mode 100644 index 8f5ff10..0000000 --- a/styles/patterns/_docked-at-corner.scss +++ /dev/null @@ -1,25 +0,0 @@ -.docked-at-corner { - position: relative; - height: 4rem; - width: 80%; - border: 1px solid #d1d5db; - border-radius: 0.25rem; -} -.docked-at-corner__docker { - background-color: #22c55e; - border-radius: 9999px; - - position: absolute; - right: 0; - top: 0; - transform: translate(50%, -50%); - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Size */ - height: 1rem; - width: 1rem; -} diff --git a/styles/patterns/_dot-leader.scss b/styles/patterns/_dot-leader.scss deleted file mode 100644 index ed3da3d..0000000 --- a/styles/patterns/_dot-leader.scss +++ /dev/null @@ -1,19 +0,0 @@ -.dot-leader { - width: 100%; - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - margin: 0.25rem 0; -} - -.dot-leader__dots { - /* Bottom border */ - border-bottom: 1px dotted #d1d5db; - - /* Take remaining width */ - flex: 1; - - /* Spacing */ - margin: 0 0.25rem; -} diff --git a/styles/patterns/_dot-navigation.scss b/styles/patterns/_dot-navigation.scss deleted file mode 100644 index 5a02ecd..0000000 --- a/styles/patterns/_dot-navigation.scss +++ /dev/null @@ -1,29 +0,0 @@ -.dot-navigation { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Reset styles */ - list-style-type: none; - margin: 0; - padding: 0; -} - -.dot-navigation__item { - /* Rounded border */ - border-radius: 9999px; - height: 0.75rem; - width: 0.75rem; - - /* Inactive dot */ - background-color: transparent; - border: 1px solid #d1d5db; - - /* OPTIONAL: Spacing between dots */ - margin: 0 0.25rem; -} - -.dot-navigation__item--active { - background-color: #d1d5db; -} diff --git a/styles/patterns/_drawer.scss b/styles/patterns/_drawer.scss deleted file mode 100644 index 111492c..0000000 --- a/styles/patterns/_drawer.scss +++ /dev/null @@ -1,21 +0,0 @@ -.drawer { - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; - - display: flex; -} - -.drawer__sidebar { - /* Demo */ - border-right: 1px solid #d1d5db; - width: 25%; -} - -.drawer__overlay { - /* Demo */ - background: #4b5563; - flex: 1; -} diff --git a/styles/patterns/_drop-area.scss b/styles/patterns/_drop-area.scss deleted file mode 100644 index 61d1b93..0000000 --- a/styles/patterns/_drop-area.scss +++ /dev/null @@ -1,14 +0,0 @@ -.drop-area { - padding: 0.5rem; - height: 100%; - width: 100%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Border */ - border: 0.25rem dashed #d1d5db; - border-radius: 0.25rem; -} diff --git a/styles/patterns/_drop-cap.scss b/styles/patterns/_drop-cap.scss deleted file mode 100644 index 2266e3b..0000000 --- a/styles/patterns/_drop-cap.scss +++ /dev/null @@ -1,18 +0,0 @@ -.drop-cap { - overflow: hidden; -} -.drop-cap:first-letter { - border: 2px solid #d1d5db; - - /* Display at the left */ - float: left; - line-height: 1; - - /* Spacing */ - margin: 0 0.5rem 0 0; - padding: 0 0.5rem; - - /* Optional */ - font-size: 2rem; - font-weight: 700; -} diff --git a/styles/patterns/_dropdown.scss b/styles/patterns/_dropdown.scss deleted file mode 100644 index 8a5c7f2..0000000 --- a/styles/patterns/_dropdown.scss +++ /dev/null @@ -1,53 +0,0 @@ -.dropdown { - position: relative; - - /* Demo */ - width: 6rem; - - align-items: flex-start; - display: flex; - justify-content: center; -} - -.dropdown__trigger { - cursor: pointer; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 2rem; - width: 6rem; - padding: 0.25rem 0.5rem; - - align-items: center; - display: flex; - justify-content: center; -} - -/* Hide the dropdown's content by default */ -.dropdown__content { - display: none; - - /* Position it right below the trigger element */ - left: 0; - padding-top: 0.25rem; - position: absolute; - top: 100%; - - /* It should be on the top of other elements */ - background-color: #fff; - z-index: 9999; -} - -.dropdown__body { - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 6rem; - width: 8rem; -} - -/* Show the content when hover on the container */ -.dropdown:hover .dropdown__content { - display: block; -} diff --git a/styles/patterns/_fading-long-section.scss b/styles/patterns/_fading-long-section.scss deleted file mode 100644 index 2aec04d..0000000 --- a/styles/patterns/_fading-long-section.scss +++ /dev/null @@ -1,27 +0,0 @@ -.fading-long-section { - /* Used to position the faded element */ - position: relative; - - height: 8rem; - width: 8rem; -} - -.fading-long-section__content { - /* Height */ - height: 100%; - overflow-y: hidden; -} - -.fading-long-section__fading { - /* Displayed at the bottom */ - bottom: 0; - left: 0; - position: absolute; - - /* Size */ - height: 2rem; - width: 100%; - - /* Gradient background */ - background: linear-gradient(rgba(255, 255, 255, 0.01), #fff); -} diff --git a/styles/patterns/_feature-comparison.scss b/styles/patterns/_feature-comparison.scss deleted file mode 100644 index 97d0d42..0000000 --- a/styles/patterns/_feature-comparison.scss +++ /dev/null @@ -1,26 +0,0 @@ -.feature-comparison { - align-items: center; - display: flex; - - /* Bottom border */ - border-bottom: 1px solid #d1d5db; - - /* Spacing */ - padding: 0.25rem 0; - - width: 100%; -} - -.feature-comparison__feature { - /* Take available width */ - flex: 1; -} - -.feature-comparison__model { - /* Center the content */ - display: flex; - justify-content: center; - - /* Demo */ - width: 1.5rem; -} diff --git a/styles/patterns/_feature-list.scss b/styles/patterns/_feature-list.scss deleted file mode 100644 index 58c272b..0000000 --- a/styles/patterns/_feature-list.scss +++ /dev/null @@ -1,20 +0,0 @@ -.feature-list { - display: flex; - - /* OPTIONAL: Spacing between items */ - margin: 0.5rem 0; - width: 100%; -} - -.feature-list--reverse { - flex-direction: row-reverse; -} - -.feature-list__image { - width: 2rem; -} - -.feature-list__desc { - /* Take the remaining width */ - flex: 1; -} diff --git a/styles/patterns/_fixed-at-corner.scss b/styles/patterns/_fixed-at-corner.scss deleted file mode 100644 index 917c36c..0000000 --- a/styles/patterns/_fixed-at-corner.scss +++ /dev/null @@ -1,32 +0,0 @@ -.fixed-at-corner { - width: 100%; - height: 100%; - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - position: relative; -} - -.fixed-at-corner__corner { - position: absolute; -} - -.fixed-at-corner__corner--tl { - left: 0; - top: 0; -} - -.fixed-at-corner__corner--tr { - top: 0; - right: 0; -} - -.fixed-at-corner__corner--br { - bottom: 0; - right: 0; -} - -.fixed-at-corner__corner--bl { - bottom: 0; - left: 0; -} diff --git a/styles/patterns/_fixed-at-side.scss b/styles/patterns/_fixed-at-side.scss deleted file mode 100644 index 23e1c91..0000000 --- a/styles/patterns/_fixed-at-side.scss +++ /dev/null @@ -1,21 +0,0 @@ -.fixed-at-side { - width: 100%; - height: 100%; - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - position: relative; -} - -.fixed-at-side__side { - height: 40%; - position: absolute; - top: 50%; - transform: translate(0px, -50%); -} -.fixed-at-side__side--l { - left: 0; -} -.fixed-at-side__side--r { - right: 0; -} diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss deleted file mode 100644 index 2956f6c..0000000 --- a/styles/patterns/_floating-label.scss +++ /dev/null @@ -1,38 +0,0 @@ -.floating-label { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - position: relative; - - /* Demo */ - padding: 0px 1px; - height: 2.5rem; -} - -.floating-label__input { - border: none; - padding: 0.5rem; - height: 100%; -} - -/* -Show the label at desired position when the -placeholder of input isn't shown -*/ -.floating-label__input:not(:placeholder-shown) + .floating-label__label { - background: #fff; - transform: translate(0, -200%); - opacity: 1; -} - -.floating-label__label { - /* Position the label */ - left: 1rem; - position: absolute; - top: 100%; - - /* Hide it by default */ - opacity: 0; - transition: all 200ms; - - padding: 0 0.5rem; -} diff --git a/styles/patterns/_folder-structure.scss b/styles/patterns/_folder-structure.scss deleted file mode 100644 index 6e69ea1..0000000 --- a/styles/patterns/_folder-structure.scss +++ /dev/null @@ -1,49 +0,0 @@ -:root { - --folder-structure-item-height: 0.5rem; - --folder-structure-item-margin-left: 2.25rem; - --folder-structure-item-padding-top: 0.5rem; -} - -.folder-structure ul { - /* Reset */ - list-style-type: none; - margin: 0; -} - -.folder-structure li { - padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem; - position: relative; -} - -.folder-structure li::before { - border-left: 1px solid #d1d5db; - content: ''; - - /* Position */ - left: 0; - position: absolute; - top: 0; - transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0); - - /* Size */ - height: 100%; -} - -.folder-structure li::after { - border-bottom: 1px solid #d1d5db; - content: ''; - - /* Position */ - left: 0; - position: absolute; - top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); - transform: translate(-100%, 0); - - /* Size */ - width: var(--folder-structure-item-margin-left); -} - -/* Remove the border from the last item */ -.folder-structure li:last-child::before { - height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); -} diff --git a/styles/patterns/_full-background.scss b/styles/patterns/_full-background.scss deleted file mode 100644 index 62f3e7c..0000000 --- a/styles/patterns/_full-background.scss +++ /dev/null @@ -1,13 +0,0 @@ -.full-background { - /* Center the content */ - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - - /* Take full size */ - height: 100%; - width: 100%; - - background: url('/assets/full-background.jpeg') center center / cover no-repeat; -} diff --git a/styles/patterns/_full-screen-menu.scss b/styles/patterns/_full-screen-menu.scss deleted file mode 100644 index c3fa7b6..0000000 --- a/styles/patterns/_full-screen-menu.scss +++ /dev/null @@ -1,67 +0,0 @@ -.full-screen-menu { - /* Take full size */ - height: 100%; - width: 100%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - position: relative; - - background: #374151; -} - -.full-screen-menu__close { - left: 0.5rem; - position: absolute; - top: 0.5rem; - - /* Reset */ - background-color: transparent; - border-color: transparent; - - /* Cursor */ - cursor: pointer; - - /* Size */ - height: 1rem; - width: 1rem; - - &:before, - &:after { - content: ''; - /* Background color */ - background-color: #d1d5db; - - /* Position */ - position: absolute; - - /* Size */ - height: 1px; - width: 100%; - } - - &:before { - /* Position */ - left: 0px; - top: 50%; - transform: translate(0%, -50%) rotate(45deg); - - /* Size */ - height: 1px; - width: 100%; - } - - &:after { - /* Position */ - left: 50%; - top: 0px; - transform: translate(-50%, 0%) rotate(45deg); - - /* Size */ - height: 100%; - width: 1px; - } -} diff --git a/styles/patterns/_holy-grail.scss b/styles/patterns/_holy-grail.scss deleted file mode 100644 index a02f064..0000000 --- a/styles/patterns/_holy-grail.scss +++ /dev/null @@ -1,43 +0,0 @@ -.holy-grail { - display: flex; - flex-direction: column; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} - -.holy-grail__header, -.holy-grail__footer { - padding: 0.25rem; -} - -.holy-grail__main { - border-top: 1px solid #d1d5db; - border-bottom: 1px solid #d1d5db; - - /* Take the remaining height */ - flex-grow: 1; - - /* Layout the left sidebar, main content and right sidebar */ - display: flex; - flex-direction: row; -} - -.holy-grail__left { - width: 25%; -} - -.holy-grail__middle { - border-left: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - - /* Take the remaining width */ - flex-grow: 1; -} - -.holy-grail__right { - width: 20%; -} diff --git a/styles/patterns/_indeterminate-progress-bar.scss b/styles/patterns/_indeterminate-progress-bar.scss deleted file mode 100644 index 58359c0..0000000 --- a/styles/patterns/_indeterminate-progress-bar.scss +++ /dev/null @@ -1,43 +0,0 @@ -.pattern__cover .indeterminate-progress-bar { - width: 8rem; -} - -.indeterminate-progress-bar { - /* Color */ - background-color: #d1d5db; - - /* Rounded border */ - border-radius: 9999px; - - width: 50%; - height: 0.5rem; - - position: relative; - overflow: hidden; -} - -.indeterminate-progress-bar__progress { - /* Color */ - background-color: #3b82f6; - - /* Rounded border */ - border-radius: 9999px; - - position: absolute; - bottom: 0; - top: 0; - width: 50%; - - animation-duration: 2s; - animation-iteration-count: infinite; - animation-name: indeterminate-progress-bar; -} - -@keyframes indeterminate-progress-bar { - from { - left: -50%; - } - to { - left: 100%; - } -} diff --git a/styles/patterns/_initial-avatar.scss b/styles/patterns/_initial-avatar.scss deleted file mode 100644 index 91e73fa..0000000 --- a/styles/patterns/_initial-avatar.scss +++ /dev/null @@ -1,15 +0,0 @@ -.initial-avatar { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Colors */ - background-color: #d1d5db; - color: #fff; - - /* Rounded border */ - border-radius: 50%; - height: 3rem; - width: 3rem; -} diff --git a/styles/patterns/_input-addon.scss b/styles/patterns/_input-addon.scss deleted file mode 100644 index ced392c..0000000 --- a/styles/patterns/_input-addon.scss +++ /dev/null @@ -1,36 +0,0 @@ -.input-addon { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - display: flex; - - /* Demo */ - margin-bottom: 0.5rem; -} - -.input-addon__input { - border: none; - /* Take the remaining width */ - flex: 1; - - /* Demo */ - padding: 0.25rem; - margin: 0 0.25rem; - width: 5rem; -} - -.input-addon__addon { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Demo */ - padding: 0.25rem; -} - -.input-addon__addon--prepended { - border-right: 1px solid #d1d5db; -} -.input-addon__addon--appended { - border-left: 1px solid #d1d5db; -} diff --git a/styles/patterns/_inverted-corners.scss b/styles/patterns/_inverted-corners.scss deleted file mode 100644 index 5d6b564..0000000 --- a/styles/patterns/_inverted-corners.scss +++ /dev/null @@ -1,33 +0,0 @@ -:root { - --inverted-corners-background: #d1d5db; - --inverted-corners-size: 2rem; -} - -.inverted-corners { - background-color: var(--inverted-corners-background); - - /* Used to position the corner */ - position: relative; - - /* Demo */ - height: 50%; - width: 100%; -} - -.inverted-corners::before { - content: ''; - - /* Absolute position */ - bottom: calc(-2 * var(--inverted-corners-size)); - left: 0; - position: absolute; - - /* Size */ - height: calc(2 * var(--inverted-corners-size)); - width: var(--inverted-corners-size); - - /* Border */ - background-color: transparent; - border-top-left-radius: var(--inverted-corners-size); - box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px; -} diff --git a/styles/patterns/_keyboard-shortcut.scss b/styles/patterns/_keyboard-shortcut.scss deleted file mode 100644 index 80a485b..0000000 --- a/styles/patterns/_keyboard-shortcut.scss +++ /dev/null @@ -1,12 +0,0 @@ -.keyboard-shortcut { - /* Background and color */ - background-color: rgba(0, 0, 0, 0.1); - border-radius: 0.25rem; - color: rgba(0, 0, 0, 0.7); - - /* Bottom shadow */ - box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; - - /* Spacing */ - padding: 0.25rem 0.5rem; -} diff --git a/styles/patterns/_layered-card.scss b/styles/patterns/_layered-card.scss deleted file mode 100644 index b991575..0000000 --- a/styles/patterns/_layered-card.scss +++ /dev/null @@ -1,39 +0,0 @@ -.layered-card { - position: relative; - - /* Demo */ - height: 6rem; - width: 6rem; -} - -.layered-card::before { - background: #d1d5db; - content: ''; - - /* Position */ - top: 0; - left: 0; - position: absolute; - transform: translate(1rem, 1rem); - - /* Size */ - height: 100%; - width: 100%; - - /* Display under the main content */ - z-index: 0; -} - -.layered-card__content { - left: 0; - position: absolute; - top: 0; - - /* Size */ - height: 100%; - width: 100%; - z-index: 1; - - border: 1px solid #d1d5db; - background: #fff; -} diff --git a/styles/patterns/_lined-paper.scss b/styles/patterns/_lined-paper.scss deleted file mode 100644 index d4fbfb6..0000000 --- a/styles/patterns/_lined-paper.scss +++ /dev/null @@ -1,15 +0,0 @@ -.lined-paper { - /* Lined background */ - background-image: linear-gradient(#d1d5db 1px, transparent 0px); - background-size: 100% 2em; - - /* - Display the content on top of the lines. - The line height must be the same as the background size defined above - */ - background-position-y: 1.5rem; - line-height: 2em; - - /* Demo */ - overflow: hidden; -} diff --git a/styles/patterns/_masonry-grid.scss b/styles/patterns/_masonry-grid.scss deleted file mode 100644 index 97444b6..0000000 --- a/styles/patterns/_masonry-grid.scss +++ /dev/null @@ -1,19 +0,0 @@ -.masonry-grid { - /* It is split into 3 columns */ - column-count: 3; - - /* The space between columns */ - column-gap: 1rem; - - /* Demo */ - height: 100%; - width: 100%; -} - -.masonry-grid__item { - /* Prevent a column from breaking into multiple columns */ - break-inside: avoid; - - /* Misc */ - margin-bottom: 1rem; -} diff --git a/styles/patterns/_media-object.scss b/styles/patterns/_media-object.scss deleted file mode 100644 index 0156e2c..0000000 --- a/styles/patterns/_media-object.scss +++ /dev/null @@ -1,18 +0,0 @@ -.media-object { - /* Align sub-items to top */ - align-items: start; - display: flex; - - /* Demo */ - height: 100%; - width: 100%; -} - -.media-object__media { - margin-right: 0.5rem; -} - -.media-object__content { - /* Take the remaining width */ - flex: 1; -} diff --git a/styles/patterns/_mega-menu.scss b/styles/patterns/_mega-menu.scss deleted file mode 100644 index 772fc51..0000000 --- a/styles/patterns/_mega-menu.scss +++ /dev/null @@ -1,64 +0,0 @@ -.mega-menu { - align-items: center; - display: flex; - justify-content: center; - - position: relative; - - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - /* Demo */ - width: 100%; -} - -.mega-menu__item { - display: flex; - align-items: center; - - height: 100%; - flex: 1; - - padding: 0.25rem 0.5rem; -} -.mega-menu__item:not(:last-child) { - border-right: 1px solid #d1d5db; -} - -.mega-menu__trigger { - cursor: pointer; - - /* Demo */ - height: 2rem; - - align-items: center; - display: flex; - justify-content: center; -} - -.mega-menu__content { - /* Border */ - border: 1px solid #d1d5db; - // margin-top: -1px; - - /* Hidden by default */ - display: none; - - /* Position it right below the trigger element */ - left: 0; - padding-top: 0.25rem; - position: absolute; - top: 100%; - - /* Take full width */ - width: 100%; - - /* It should be on the top of other elements */ - background-color: #fff; - z-index: 9999; -} - -/* Show the mega menu when hovering the trigger item */ -.mega-menu__trigger:hover .mega-menu__content { - display: block; -} diff --git a/styles/patterns/_menu.scss b/styles/patterns/_menu.scss deleted file mode 100644 index c0b3833..0000000 --- a/styles/patterns/_menu.scss +++ /dev/null @@ -1,33 +0,0 @@ -.menu { - display: flex; - flex-direction: column; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - /* Demo */ - width: 8rem; -} - -.menu__item { - /* Center the content horizontally */ - align-items: center; - display: flex; - - height: 2rem; - padding: 0.25rem; -} -.menu__item:hover { - background: #e5e7eb; -} - -.menu__hotkey { - /* Push the hot key to the right */ - margin-left: auto; -} - -.menu__divider { - border-bottom: 1px solid #d1d5db; - height: 1px; -} diff --git a/styles/patterns/_modal.scss b/styles/patterns/_modal.scss deleted file mode 100644 index f886fb6..0000000 --- a/styles/patterns/_modal.scss +++ /dev/null @@ -1,38 +0,0 @@ -.modal { - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - display: flex; - flex-direction: column; - - /* Demo */ - height: 8rem; - width: 8rem; -} - -.modal__header { - display: flex; - justify-content: space-between; - - /* Border */ - border-bottom: 1px solid #d1d5db; - - padding: 0.25rem 0.5rem; -} - -.modal__body { - flex: 1; - overflow: auto; -} - -.modal__footer { - display: flex; - /* Push the buttons to the right */ - justify-content: flex-end; - - /* Border */ - border-top: 1px solid #d1d5db; - - padding: 0.25rem 0.5rem; -} diff --git a/styles/patterns/_nested-dropdowns.scss b/styles/patterns/_nested-dropdowns.scss deleted file mode 100644 index 016b1a2..0000000 --- a/styles/patterns/_nested-dropdowns.scss +++ /dev/null @@ -1,65 +0,0 @@ -.nested-dropdowns { - /* Border */ - border: 1px solid #d1d5db; - display: flex; - - /* Reset list styles */ - list-style-type: none; - margin: 0; - padding: 0; -} - -.nested-dropdowns li { - cursor: pointer; - - /* Spacing */ - padding: 0.25rem; - - /* Used to position the sub nested-dropdowns */ - position: relative; -} - -/* The sub nested-dropdowns */ -.nested-dropdowns ul { - /* Border */ - border: 1px solid #d1d5db; - - /* Hidden by default */ - display: none; - - /* Absolute position */ - left: 0; - position: absolute; - top: 100%; - - /* Reset styles */ - list-style-type: none; - margin: 0; - padding: 0; -} - -/* The second level sub nested-dropdowns */ -.nested-dropdowns ul ul { - left: 100%; - position: absolute; - top: 0; -} - -/* Change background color of list item when being hovered */ -.nested-dropdowns li:hover { - background-color: rgba(0, 0, 0, 0.1); -} - -/* Show the direct sub nested-dropdowns when hovering the list item */ -.nested-dropdowns li:hover > ul { - display: block; -} - -/* Demo */ -.nested-dropdowns__item { - align-items: center; - display: flex; -} -.nested-dropdowns__arrow { - margin-left: 0.25rem; -} diff --git a/styles/patterns/_notification.scss b/styles/patterns/_notification.scss deleted file mode 100644 index 0331615..0000000 --- a/styles/patterns/_notification.scss +++ /dev/null @@ -1,63 +0,0 @@ -.notification { - display: flex; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.25rem; - width: 8rem; -} -.notification__body { - flex: 1; - margin-right: 0.5rem; -} - -.notification__close { - /* Reset */ - background-color: transparent; - border-color: transparent; - - /* Cursor */ - cursor: pointer; - - /* Size */ - height: 1rem; - width: 1rem; - - /* Used to position the inner */ - position: relative; -} - -.notification__close-line { - /* Background color */ - background-color: #d1d5db; - - /* Position */ - position: absolute; - - /* Size */ - height: 1px; - width: 100%; -} - -.notification__close-line--first { - /* Position */ - left: 0px; - top: 50%; - transform: translate(0%, -50%) rotate(45deg); - - /* Size */ - height: 1px; - width: 100%; -} - -.notification__close-line--second { - /* Position */ - left: 50%; - top: 0px; - transform: translate(-50%, 0%) rotate(45deg); - - /* Size */ - height: 100%; - width: 1px; -} diff --git a/styles/patterns/_overlay-play-button.scss b/styles/patterns/_overlay-play-button.scss deleted file mode 100644 index a7bc650..0000000 --- a/styles/patterns/_overlay-play-button.scss +++ /dev/null @@ -1,38 +0,0 @@ -.overlay-play-button { - /* Used to position the overlay */ - position: relative; - - /* Demo */ - height: 100%; - width: 100%; -} - -.overlay-play-button__overlay { - /* Position */ - left: 0; - position: absolute; - top: 0; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Add a dark background */ - background-color: #4b5563; -} - -.overlay-play-button__play { - border: 0.25rem solid #fff; - border-radius: 9999px; - height: 3rem; - width: 3rem; - - align-items: center; - display: flex; - justify-content: center; -} diff --git a/styles/patterns/_pagination.scss b/styles/patterns/_pagination.scss deleted file mode 100644 index 881352d..0000000 --- a/styles/patterns/_pagination.scss +++ /dev/null @@ -1,25 +0,0 @@ -.pagination { - display: flex; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 4px; -} - -.pagination__item { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - padding: 0.25rem 0.5rem; -} - -.pagination__item:not(:last-child) { - /* Right border */ - border-right: 1px solid #d1d5db; -} - -.pagination__item--active { - background-color: #d1d5db; -} diff --git a/styles/patterns/_popover-arrow.scss b/styles/patterns/_popover-arrow.scss deleted file mode 100644 index 766892d..0000000 --- a/styles/patterns/_popover-arrow.scss +++ /dev/null @@ -1,157 +0,0 @@ -.pattern__cover .popover-arrow { - height: 8rem; - width: 8rem; -} - -.popover-arrow { - /* Border */ - border: 1px solid #d1d5db; - - /* Used to position the arrow */ - position: relative; - - /* Demo */ - height: 100%; - width: 100%; -} - -.popover-arrow__arrow { - /* Size */ - height: 1rem; - width: 1rem; - - background-color: #fff; - position: absolute; -} - -.popover-arrow__arrow--tl { - /* Position at the top left corner */ - left: 1rem; - top: 0; - - /* Border */ - border-left: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--tc { - /* Position at the top center */ - left: 50%; - top: 0; - - /* Border */ - border-left: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--tr { - /* Position at the top right corner */ - right: 1rem; - top: 0; - - /* Border */ - border-left: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--rt { - /* Position at the right top corner */ - right: 0; - top: 1rem; - - /* Border */ - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(50%, 50%) rotate(45deg); -} - -.popover-arrow__arrow--rc { - /* Position at the right center */ - right: 0; - top: 50%; - - /* Border */ - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--rb { - /* Position at the right bottom corner */ - bottom: 1rem; - right: 0; - - /* Border */ - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translate(50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--bl { - /* Position at the bottom left corner */ - bottom: -1rem; - left: 1rem; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - transform: translate(50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--bc { - /* Position at the bottom center */ - bottom: -1rem; - left: 50%; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--br { - /* Position at the bottom right corner */ - bottom: -1rem; - right: 1rem; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-right: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--lt { - /* Position at the left top corner */ - left: 0; - top: 1rem; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-left: 1px solid #d1d5db; - transform: translate(-50%, 50%) rotate(45deg); -} - -.popover-arrow__arrow--lc { - /* Position at the left center */ - left: 0; - top: 50%; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-left: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} - -.popover-arrow__arrow--lb { - /* Position at the left bottom corner */ - bottom: 1rem; - left: 0; - - /* Border */ - border-bottom: 1px solid #d1d5db; - border-left: 1px solid #d1d5db; - transform: translate(-50%, -50%) rotate(45deg); -} diff --git a/styles/patterns/_presence-indicator.scss b/styles/patterns/_presence-indicator.scss deleted file mode 100644 index 1814c60..0000000 --- a/styles/patterns/_presence-indicator.scss +++ /dev/null @@ -1,25 +0,0 @@ -.presence-indicator { - position: relative; - - /* Demo */ - background-color: #d1d5db; - border-radius: 9999px; - height: 6rem; - width: 6rem; -} - -.presence-indicator__indicator { - /* Shown at the bottom right corner */ - bottom: 0; - position: absolute; - right: 0; - transform: translate(50%, 50%); - - /* Rounded border */ - border-radius: 9999px; - height: 1rem; - width: 1rem; - - /* Background color */ - background-color: #22c55e; -} diff --git a/styles/patterns/_previous-next-buttons.scss b/styles/patterns/_previous-next-buttons.scss deleted file mode 100644 index f1deae4..0000000 --- a/styles/patterns/_previous-next-buttons.scss +++ /dev/null @@ -1,47 +0,0 @@ -.previous-next-buttons { - align-items: center; - display: flex; - justify-content: space-between; - - /* Demo */ - width: 100%; -} - -.previous-next-buttons__nav { - position: relative; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem; - - align-items: center; - display: flex; - justify-content: center; - - height: 2rem; - width: 3rem; -} - -.previous-next-buttons__button { - /* Transparent background */ - background-color: transparent; - - /* Size */ - height: 0.5rem; - width: 0.5rem; -} - -.previous-next-buttons__button--r { - /* Edges */ - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - transform: translateX(-25%) rotate(45deg); -} - -.previous-next-buttons__button--l { - /* Edges */ - border-bottom: 1px solid #d1d5db; - border-left: 1px solid #d1d5db; - transform: translateX(25%) rotate(45deg); -} diff --git a/styles/patterns/_price-tag.scss b/styles/patterns/_price-tag.scss deleted file mode 100644 index 65eb460..0000000 --- a/styles/patterns/_price-tag.scss +++ /dev/null @@ -1,58 +0,0 @@ -:root { - --price-tag-background: #d1d5db; - --price-tag-height: 2rem; -} - -.price-tag { - background: var(--price-tag-background); - color: #fff; - - /* Center the price */ - align-items: center; - display: flex; - justify-content: center; - - /* Used to position the triangle */ - position: relative; - - /* Size */ - height: var(--price-tag-height); - - /* Spacing */ - padding: 0.25rem 0.5rem; -} - -/* The triangle */ -.price-tag::before { - content: ''; - - border-color: transparent var(--price-tag-background) transparent transparent; - border-style: solid; - border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) - 0rem; - - /* Position */ - left: 0px; - position: absolute; - top: 0px; - transform: translate(-100%, 0px); -} - -/* The dot */ -.price-tag::after { - content: ''; - - /* Make it like a cirle */ - background: #fff; - border-radius: 9999rem; - - /* Position */ - left: 0; - position: absolute; - top: 50%; - transform: translate(-0.5rem, -50%); - - /* Size */ - height: 0.5rem; - width: 0.5rem; -} diff --git a/styles/patterns/_pricing-table.scss b/styles/patterns/_pricing-table.scss deleted file mode 100644 index 8000f2b..0000000 --- a/styles/patterns/_pricing-table.scss +++ /dev/null @@ -1,11 +0,0 @@ -.pricing-table { - align-items: center; - display: flex; - justify-content: center; -} -.pricing-table__column { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - margin: 0 0.25rem; - padding: 0.25rem; -} diff --git a/styles/patterns/_progress-bar.scss b/styles/patterns/_progress-bar.scss deleted file mode 100644 index 167289c..0000000 --- a/styles/patterns/_progress-bar.scss +++ /dev/null @@ -1,27 +0,0 @@ -.progress-bar { - /* Colors */ - background-color: #d1d5db; - - /* Rounded border */ - border-radius: 9999px; - padding: 0.25rem; - - /* Demo */ - width: 100%; -} - -.progress-bar__progress { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Colors */ - background-color: #3b82f6; - color: #fff; - - /* Rounded border */ - border-radius: 9999px; - - width: 40%; -} diff --git a/styles/patterns/_property-list.scss b/styles/patterns/_property-list.scss deleted file mode 100644 index 3b32130..0000000 --- a/styles/patterns/_property-list.scss +++ /dev/null @@ -1,20 +0,0 @@ -.property-list { - /* Content is center horizontally */ - align-items: center; - display: flex; - - border-bottom: 1px solid #d1d5db; - - /* Spacing */ - margin: 0; - padding: 0.5rem 0; - - width: 100%; -} -.property-list__key { - /* Take the remaining width */ - flex: 1; -} -.property-list__value { - margin-left: 0.5rem; -} diff --git a/styles/patterns/_questions-and-answers.scss b/styles/patterns/_questions-and-answers.scss deleted file mode 100644 index c9c283b..0000000 --- a/styles/patterns/_questions-and-answers.scss +++ /dev/null @@ -1,29 +0,0 @@ -.questions-and-answers { - width: 100%; -} -.questions-and-answers__item:not(:last-child) { - border-bottom: 1px solid #d1d5db; -} -.questions-and-answers__header { - align-items: center; - display: flex; - justify-content: center; - cursor: pointer; - padding: 0.5rem; -} -.questions-and-answers__toggle { - margin-right: 0.25rem; -} -.questions-and-answers__title { - flex: 1; -} -.questions-and-answers__content { - padding: 0 0.5rem; -} - -.questions-and-answers__item--collapsed .questions-and-answers__content { - display: none; -} -.questions-and-answers__item--expanded .questions-and-answers__content { - display: block; -} diff --git a/styles/patterns/_radial-progress-bar.scss b/styles/patterns/_radial-progress-bar.scss deleted file mode 100644 index f7d74cd..0000000 --- a/styles/patterns/_radial-progress-bar.scss +++ /dev/null @@ -1,75 +0,0 @@ -:root { - --radial-progress-bar-size: 8rem; - --radial-progress-bar-border-width: 0.75rem; -} - -.radial-progress-bar { - position: relative; - height: var(--radial-progress-bar-size); - width: var(--radial-progress-bar-size); -} - -.radial-progress-bar__percentages { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Rounded border */ - border: var(--radial-progress-bar-border-width) solid #d1d5db; - border-radius: 9999px; - - /* Size */ - height: 100%; - width: 100%; -} - -.radial-progress-bar__curve { - /* Position */ - left: 0; - position: absolute; - top: 0; - - /* Take full size */ - height: 100%; - width: 100%; - - /* If percentages is less than 50 */ - // clip: rect(0px, var(--radial-progress-bar-size), var(--radial-progress-bar-size), calc(var(--radial-progress-bar-size) * 0.5), 0px); - - /* If percentages is greater than or equals to 50 */ - clip: rect(auto, auto, auto, auto); -} - -.radial-progress-bar__half { - /* Take full size */ - height: 100%; - position: absolute; - width: 100%; - - /* - Background color of curve. - The border width should be the same as the area showing the percentages - */ - border: var(--radial-progress-bar-border-width) solid #3b82f6; - border-radius: 9999px; -} - -.radial-progress-bar__half--first { - /* Position */ - clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px); - - /* Number of percentages * 360 / 100 */ - transform: rotate(270deg); -} - -.radial-progress-bar__half--second { - /* Position */ - clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px); - - /* If percentages is less than 50 */ - // transform: rotate(0deg); - - /* If percentages is greater than or equals to 50 */ - transform: rotate(180deg); -} diff --git a/styles/patterns/_radio-button-group.scss b/styles/patterns/_radio-button-group.scss deleted file mode 100644 index 3e65c84..0000000 --- a/styles/patterns/_radio-button-group.scss +++ /dev/null @@ -1,40 +0,0 @@ -.radio-button-group { - display: flex; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 2rem; -} - -.radio-button-group__label { - /* Center the content */ - align-items: center; - display: inline-flex; - - border-right: 1px solid #d1d5db; - padding: 0.5rem; - - /* For not selected radio */ - background-color: transparent; - color: #ccc; -} - -.radio-button-group__label:last-child { - /* Remove the right border from the last label */ - border-right-color: transparent; -} - -.radio-button-group__label--selected { - /* For selected radio */ - background-color: #3b82f6; - color: #fff; - - margin-top: -1px; - margin-bottom: -1px; -} - -.radio-button-group__input { - /* Hide it */ - display: none; -} diff --git a/styles/patterns/_radio-switch.scss b/styles/patterns/_radio-switch.scss deleted file mode 100644 index bd12ced..0000000 --- a/styles/patterns/_radio-switch.scss +++ /dev/null @@ -1,22 +0,0 @@ -.radio-switch { - background-color: #d1d5db; - border-radius: 9999px; - display: inline-flex; - padding: 0.25rem; -} - -.radio-switch__label { - border-radius: 9999px; - cursor: pointer; - padding: 0.25rem 0.5rem; -} - -.radio-switch__label--selected { - /* For selected radio only */ - background-color: #3b82f6; - color: #fff; -} - -.radio-switch__input { - display: none; -} diff --git a/styles/patterns/_rating.scss b/styles/patterns/_rating.scss deleted file mode 100644 index a22419a..0000000 --- a/styles/patterns/_rating.scss +++ /dev/null @@ -1,38 +0,0 @@ -.rating { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - flex-direction: row-reverse; -} - -.rating__star:hover, -.rating__star:hover ~ .rating__star { - color: transparent; -} - -/* -Make all previous stars selected when hover on a star -Note that we use \`flex-direction: row-reverse\` on the container -*/ -.rating__star:hover:before, -.rating__star:hover ~ .rating__star:before { - color: #eab308; - content: '★'; - left: 0; - position: absolute; -} - -.rating__star { - font-size: 1.5rem; - - /* Reset styles for button */ - background-color: transparent; - border: transparent; - margin: 0 2px; - padding: 0; - - /* Used to position the hover state */ - position: relative; -} diff --git a/styles/patterns/_resizable-element.scss b/styles/patterns/_resizable-element.scss deleted file mode 100644 index 7966f9f..0000000 --- a/styles/patterns/_resizable-element.scss +++ /dev/null @@ -1,101 +0,0 @@ -.resizable-element { - /* Border */ - border: 1px dashed #d1d5db; - - /* Used to position the squares */ - position: relative; - - /* Demo */ - height: 100%; - width: 100%; -} - -.resizable-element__resizer { - /* Border */ - border: 1px solid #d1d5db; - position: absolute; - - /* Size */ - height: 0.75rem; - width: 0.75rem; -} - -.resizable-element__resizer--tl { - /* Resize cursor */ - cursor: nwse-resize; - - /* Positioned at the top left corner */ - left: 0px; - top: 0px; - transform: translate(-50%, -50%); -} - -.resizable-element__resizer--tc { - /* Resize cursor */ - cursor: ns-resize; - - /* Positioned at the middle of top side */ - left: 50%; - top: 0px; - transform: translate(-50%, -50%); -} - -.resizable-element__resizer--tr { - /* Resize cursor */ - cursor: nesw-resize; - - /* Positioned at the top right corner */ - right: 0px; - top: 0px; - transform: translate(50%, -50%); -} - -.resizable-element__resizer--rc { - /* Resize cursor */ - cursor: ew-resize; - - /* Positioned at the middle of right side */ - right: 0px; - top: 50%; - transform: translate(50%, -50%); -} - -.resizable-element__resizer--rb { - /* Resize cursor */ - cursor: nwse-resize; - - /* Positioned at the right bottom corner */ - bottom: 0px; - right: 0px; - transform: translate(50%, 50%); -} - -.resizable-element__resizer--bc { - /* Resize cursor */ - cursor: ns-resize; - - /* Positioned at the middle of bottom side */ - bottom: 0px; - right: 50%; - transform: translate(50%, 50%); -} - -.resizable-element__resizer--bl { - /* Resize cursor */ - cursor: nesw-resize; - - /* Positioned at the bottom left corner */ - bottom: 0px; - left: 0px; - transform: translate(-50%, 50%); -} - -.resizable-element__resizer--lc { - /* Resize cursor */ - cursor: ew-resize; - - /* Positioned at the middle of left side */ - left: 0px; - top: 50%; - transform: translate(-50%, -50%); -} diff --git a/styles/patterns/_ribbon.scss b/styles/patterns/_ribbon.scss deleted file mode 100644 index 99d7126..0000000 --- a/styles/patterns/_ribbon.scss +++ /dev/null @@ -1,61 +0,0 @@ -.ribbon { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Size */ - height: 2rem; - width: 4rem; /* For demo */ - - /* Use to position the corners */ - position: relative; -} - -.ribbon__content { - /* Background color */ - background-color: #9ca3af; - z-index: 1; - - height: 100%; - width: 100%; -} -.ribbon__side { - bottom: -0.5rem; - position: absolute; - - /* Background */ - border: 1rem solid #d1d5db; -} - -.ribbon__side--l { - /* Position */ - left: -1.5rem; - border-color: #d1d5db #d1d5db #d1d5db transparent; -} - -.ribbon__side--r { - /* Position */ - right: -1.5rem; - border-color: #d1d5db transparent #d1d5db #d1d5db; -} - -.ribbon__triangle { - position: absolute; - top: 100%; - - border: 0.5rem solid transparent; - border-bottom-width: 0; - border-top-color: #6b7280; - z-index: 1; -} - -.ribbon__triangle--l { - border-right-width: 0; - left: 0; -} - -.ribbon__triangle--r { - border-left-width: 0; - right: 0; -} diff --git a/styles/patterns/_same-height-columns.scss b/styles/patterns/_same-height-columns.scss deleted file mode 100644 index 83ed542..0000000 --- a/styles/patterns/_same-height-columns.scss +++ /dev/null @@ -1,27 +0,0 @@ -.same-height-columns { - display: flex; - - /* Demo */ - width: 100%; - height: 100%; -} - -.same-height-columns__column { - flex: 1; - /* Space between columns */ - margin: 0 0.25rem; - - /* Layout each column */ - display: flex; - flex-direction: column; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.25rem; -} - -.same-height-columns__content { - /* Take available height */ - flex: 1; -} diff --git a/styles/patterns/_search-box.scss b/styles/patterns/_search-box.scss deleted file mode 100644 index f739f2a..0000000 --- a/styles/patterns/_search-box.scss +++ /dev/null @@ -1,23 +0,0 @@ -.search-box { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - display: flex; - align-items: center; - - /* Demo */ - padding: 0.25rem; -} - -.search-box__input { - border-color: transparent; - - /* Take available width */ - flex: 1; - - height: 2rem; - margin-right: 0.25rem; - - /* Demo */ - width: 6rem; -} diff --git a/styles/patterns/_separator.scss b/styles/patterns/_separator.scss deleted file mode 100644 index dc3cc1f..0000000 --- a/styles/patterns/_separator.scss +++ /dev/null @@ -1,34 +0,0 @@ -.separator { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Used to set the position of text */ - position: relative; - - /* Demo */ - width: 100%; -} - -.separator__content { - /* We won't see the separator line */ - background: #fff; - - /* Displayed at the center of separator */ - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - - /* Spacing */ - padding: 0 0.25rem; - - /* Demo */ - width: 60%; -} - -.separator__separator { - border-bottom: 1px solid #d1d5db; - height: 1px; - width: 100%; -} diff --git a/styles/patterns/_sidebar.scss b/styles/patterns/_sidebar.scss deleted file mode 100644 index c166012..0000000 --- a/styles/patterns/_sidebar.scss +++ /dev/null @@ -1,27 +0,0 @@ -.sidebar { - display: flex; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} - -.sidebar__sidebar { - border-right: 1px solid #d1d5db; - width: 30%; - - /* Demo */ - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.sidebar__main { - /* Take the remaining width */ - flex: 1; - - /* Make it scrollable */ - overflow: auto; -} diff --git a/styles/patterns/_simple-grid.scss b/styles/patterns/_simple-grid.scss deleted file mode 100644 index 69aa8dc..0000000 --- a/styles/patterns/_simple-grid.scss +++ /dev/null @@ -1,32 +0,0 @@ -.simple-grid { - display: flex; - - margin-left: -0.25rem; - margin-right: -0.25rem; - - /* Demo */ - margin-bottom: 0.25em; - margin-top: 0.25em; - height: 100%; - width: 100%; -} - -.simple-grid__cell { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -/* Cell with given width */ -.simple-grid__cell--1\/2 { - flex: 0 0 50%; -} -.simple-grid__cell--1\/3 { - flex: 0 0 33.3333333%; -} -.simple-grid__cell--1\/4 { - flex: 0 0 25%; -} - -.simple-grid__cell--fill { - flex: 1; -} diff --git a/styles/patterns/_slider.scss b/styles/patterns/_slider.scss deleted file mode 100644 index c2ceae9..0000000 --- a/styles/patterns/_slider.scss +++ /dev/null @@ -1,39 +0,0 @@ -.slider { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Size */ - height: 2rem; - - /* Demo */ - width: 100%; -} - -.slider__left { - height: 2px; - - /* Colors */ - background-color: #d1d5db; -} - -.slider__circle { - /* Size */ - height: 2rem; - width: 2rem; - - /* Rounded border */ - border-radius: 9999px; - - /* Colors */ - background-color: #3b82f6; -} - -.slider__right { - /* Take the remaining width */ - flex: 1; - height: 2px; - - /* Colors */ - background-color: #d1d5db; -} diff --git a/styles/patterns/_spin-button.scss b/styles/patterns/_spin-button.scss deleted file mode 100644 index c6e106f..0000000 --- a/styles/patterns/_spin-button.scss +++ /dev/null @@ -1,34 +0,0 @@ -.spin-button { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - display: flex; - overflow: hidden; -} - -.spin-button__input { - border-color: transparent; - padding: 0.5rem; - - /* Demo */ - width: 8rem; -} - -.spin-button__buttons { - /* Content is centered vertically */ - display: flex; - flex-direction: column; - justify-content: center; - - /* Left border */ - border-left: 1px solid #d1d5db; -} - -.spin-button__button { - /* Reset */ - background: #fff; - border-color: transparent; - cursor: pointer; - - /* Make buttons have the same height */ - flex: 1; -} diff --git a/styles/patterns/_spinner.scss b/styles/patterns/_spinner.scss deleted file mode 100644 index 79ae69c..0000000 --- a/styles/patterns/_spinner.scss +++ /dev/null @@ -1,19 +0,0 @@ -.spinner { - height: 4rem; - width: 4rem; - - border: 4px solid #d1d5db; - border-top-color: #3b82f6; - border-radius: 50%; - - animation: spinner 800ms linear infinite; -} - -@keyframes spinner { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/styles/patterns/_split-navigation.scss b/styles/patterns/_split-navigation.scss deleted file mode 100644 index 37ed7ac..0000000 --- a/styles/patterns/_split-navigation.scss +++ /dev/null @@ -1,27 +0,0 @@ -.split-navigation { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Reset styles */ - list-style-type: none; - margin: 0; - padding: 0 0 0.5rem 0; - - /* Demo */ - border-bottom: 1px solid #d1d5db; - width: 8rem; -} - -.split-navigation__item { - margin-right: 0.25rem; - - /* Demo */ - width: 1.25rem; -} - -.split-navigation__item--right { - /* Sticks to the right */ - margin-left: auto; - margin-right: 0; -} diff --git a/styles/patterns/_split-screen.scss b/styles/patterns/_split-screen.scss deleted file mode 100644 index 5e1faf0..0000000 --- a/styles/patterns/_split-screen.scss +++ /dev/null @@ -1,22 +0,0 @@ -.split-screen { - display: flex; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} - -.split-screen__half { - flex: 1; - - /* Demo */ - align-items: center; - display: flex; - justify-content: center; -} - -.split-screen__half:first-child { - border-right: 1px solid #d1d5db; -} diff --git a/styles/patterns/_stacked-cards.scss b/styles/patterns/_stacked-cards.scss deleted file mode 100644 index a42eae2..0000000 --- a/styles/patterns/_stacked-cards.scss +++ /dev/null @@ -1,40 +0,0 @@ -.stacked-cards { - /* Used to position the stacked cards */ - position: relative; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 6rem; - width: 6rem; -} - -.stacked-cards__card { - /* Absolute position */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Displayed under the container */ - z-index: 1; - - /* Background and border colors */ - background-color: rgb(255, 255, 255); - border: 1px solid #d1d5db; -} -.stacked-cards__card--1st { - /* Rotate it. Change the number of degrees for the following cards */ - transform: rotate(5deg); -} -.stacked-cards__card--2nd { - /* Rotate it. Change the number of degrees for the following cards */ - transform: rotate(10deg); -} -.stacked-cards__card--3rd { - /* Rotate it. Change the number of degrees for the following cards */ - transform: rotate(15deg); -} diff --git a/styles/patterns/_stamp-border.scss b/styles/patterns/_stamp-border.scss deleted file mode 100644 index 78bca1b..0000000 --- a/styles/patterns/_stamp-border.scss +++ /dev/null @@ -1,23 +0,0 @@ -.stamp-border { - /* Background */ - background-color: #d1d5db; - background-image: radial-gradient(#fff 50%, transparent 50%); - background-position: -0.25rem -0.25rem; - background-repeat: repeat; - background-size: 0.5rem 0.5rem; - - /* Spacing */ - padding: 0.25rem; - - /* Demo */ - height: 100%; - width: 100%; -} - -.stamp-border__content { - /* Background */ - background-color: #d1d5db; - - height: 100%; - width: 100%; -} diff --git a/styles/patterns/_statistic.scss b/styles/patterns/_statistic.scss deleted file mode 100644 index 06b5821..0000000 --- a/styles/patterns/_statistic.scss +++ /dev/null @@ -1,21 +0,0 @@ -.statistic { - /* Center the content */ - align-items: center; - display: inline-flex; - flex-direction: column; -} - -.statistic__value { - /* Big font size */ - font-size: 3rem; - font-weight: 500; -} - -.statistic__label { - /* Smaller font size */ - font-size: 1rem; - font-weight: 700; - - /* Uppercase the label */ - text-transform: uppercase; -} diff --git a/styles/patterns/_status-light.scss b/styles/patterns/_status-light.scss deleted file mode 100644 index 045ed7e..0000000 --- a/styles/patterns/_status-light.scss +++ /dev/null @@ -1,28 +0,0 @@ -.status-light { - /* Center the content */ - align-items: center; - display: flex; - - /* Demo */ - width: 8rem; -} - -.status-light__status { - /* Background color */ - background-color: #16a34a; - - /* Rounded border */ - border-radius: 9999px; - - /* Size */ - height: 0.5rem; - width: 0.5rem; - - /* Spacing */ - margin-right: 0.5rem; -} - -.status-light__content { - /* Take available width */ - flex: 1; -} diff --git a/styles/patterns/_stepper-input.scss b/styles/patterns/_stepper-input.scss deleted file mode 100644 index 94c5ad1..0000000 --- a/styles/patterns/_stepper-input.scss +++ /dev/null @@ -1,38 +0,0 @@ -.stepper-input { - display: flex; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - /* Size */ - height: 2rem; - width: 8rem; -} - -.stepper-input__button { - /* Reset */ - background: #d1d5db; - border: none; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Size */ - width: 2rem; -} - -.stepper-input__content { - flex: 1; -} - -.stepper-input__input { - /* Reset */ - border: none; - - /* Take full size of its container */ - height: 100%; - width: 100%; -} diff --git a/styles/patterns/_sticky-footer.scss b/styles/patterns/_sticky-footer.scss deleted file mode 100644 index 344c1ab..0000000 --- a/styles/patterns/_sticky-footer.scss +++ /dev/null @@ -1,27 +0,0 @@ -.sticky-footer { - display: flex; - flex-direction: column; - height: 100%; - - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - width: 100%; -} - -.sticky-footer__header, -.sticky-footer__footer { - flex-shrink: 0; - - /* Demo */ - padding: 0.25rem; -} - -.sticky-footer__main { - flex-grow: 1; - - /* Demo */ - border-top: 1px solid #d1d5db; - border-bottom: 1px solid #d1d5db; - padding: 0.25rem; -} diff --git a/styles/patterns/_sticky-header.scss b/styles/patterns/_sticky-header.scss deleted file mode 100644 index e464f1c..0000000 --- a/styles/patterns/_sticky-header.scss +++ /dev/null @@ -1,17 +0,0 @@ -.sticky-header { - /* Demo */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - height: 100%; - width: 100%; -} - -.sticky-header__header { - /* Stick to the top */ - position: sticky; - top: 0; - - /* Demo */ - padding: 0.25rem; - border-bottom: 1px solid #d1d5db; -} diff --git a/styles/patterns/_sticky-sections.scss b/styles/patterns/_sticky-sections.scss deleted file mode 100644 index 340b1ba..0000000 --- a/styles/patterns/_sticky-sections.scss +++ /dev/null @@ -1,30 +0,0 @@ -.sticky-sections { - height: 100%; - - /* Demo */ - width: 100%; -} - -.sticky-sections__section { - /* Take full size */ - height: 25%; - width: 100%; - - /* Stick to the top */ - position: sticky; - top: 0; -} - -/* Demo */ -.sticky-sections__section:nth-child(1) { - background-color: #e5e7eb; -} -.sticky-sections__section:nth-child(2) { - background-color: #d1d5db; -} -.sticky-sections__section:nth-child(3) { - background-color: #9ca3af; -} -.sticky-sections__section:nth-child(4) { - background-color: #6b7280; -} diff --git a/styles/patterns/_sticky-table-column.scss b/styles/patterns/_sticky-table-column.scss deleted file mode 100644 index 5c8ea0c..0000000 --- a/styles/patterns/_sticky-table-column.scss +++ /dev/null @@ -1,27 +0,0 @@ -.sticky-table-column { - /* Demo */ - border-collapse: collapse; - width: 100%; -} - -.sticky-table-column tbody { - border-bottom: 1px solid #d1d5db; -} - -.sticky-table-column tr { - border-top: 1px solid #d1d5db; -} - -.sticky-table-column__sticky { - /* Background color */ - background-color: #9ca3af; - - /* Stick to the left */ - left: 0; - position: sticky; - - /* Displayed on top of other rows when scrolling */ - z-index: 9999; - - padding: 0 0.25rem; -} diff --git a/styles/patterns/_sticky-table-headers.scss b/styles/patterns/_sticky-table-headers.scss deleted file mode 100644 index b6c9afd..0000000 --- a/styles/patterns/_sticky-table-headers.scss +++ /dev/null @@ -1,27 +0,0 @@ -.sticky-table-headers { - /* Demo */ - border-collapse: collapse; - width: 100%; -} - -.sticky-table-headers tbody { - border-bottom: 1px solid #d1d5db; -} -.sticky-table-headers thead td { - padding: 0.25rem; -} -.sticky-table-headers tr { - border-top: 1px solid #d1d5db; -} - -.sticky-table-headers__sticky { - /* Background color */ - background-color: #9ca3af; - - /* Stick to the left */ - left: 0; - position: sticky; - - /* Displayed on top of other rows when scrolling */ - z-index: 9999; -} diff --git a/styles/patterns/_switch.scss b/styles/patterns/_switch.scss deleted file mode 100644 index 33d88c7..0000000 --- a/styles/patterns/_switch.scss +++ /dev/null @@ -1,46 +0,0 @@ -.switch { - display: flex; - - /* Rounded border */ - border-radius: 9999px; - - /* Size */ - height: 2rem; - width: 4rem; - - /* Demo */ - margin-bottom: 0.5rem; -} - -.switch__input { - /* Hide the input */ - display: none; -} - -.switch__circle { - /* Rounded border */ - border-radius: 9999px; - - /* Size */ - width: 2rem; - - background-color: #fff; -} - -/* ON status */ -.switch--on { - background-color: #357edd; - border: 1px solid #357edd; - - /* Push the circle to the right */ - justify-content: flex-end; -} - -/* OFF status */ -.switch--off { - background-color: #d1d5db; - border: 1px solid #d1d5db; -} -.switch--off .switch__circle { - border: 1px solid #d1d5db; -} diff --git a/styles/patterns/_tab.scss b/styles/patterns/_tab.scss deleted file mode 100644 index f452ae3..0000000 --- a/styles/patterns/_tab.scss +++ /dev/null @@ -1,28 +0,0 @@ -.tab { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; -} - -.tab__item { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; - padding: 0.5rem 1rem; -} - -.tab__item--active { - /* Border */ - border: 1px solid #d1d5db; - /* Hide the bottom border */ - border-bottom-color: transparent; - - /* Border radius */ - border-top-left-radius: 2px; - border-top-right-radius: 2px; -} - -.tab__item--inactive { - /* Has only the bottom border */ - border-bottom: 1px solid #d1d5db; -} diff --git a/styles/patterns/_teardrop.scss b/styles/patterns/_teardrop.scss deleted file mode 100644 index 37dd69e..0000000 --- a/styles/patterns/_teardrop.scss +++ /dev/null @@ -1,21 +0,0 @@ -.teardrop { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Border */ - border: 2px solid #d1d5db; - border-radius: 0px 50% 50% 50%; - - /* Angle at the top */ - transform: rotate(45deg); - - /* Size */ - height: 4rem; - width: 4rem; -} - -.teardrop__content { - transform: rotate(-45deg); -} diff --git a/styles/patterns/_three-dimensions-card.scss b/styles/patterns/_three-dimensions-card.scss deleted file mode 100644 index 8267a2a..0000000 --- a/styles/patterns/_three-dimensions-card.scss +++ /dev/null @@ -1,46 +0,0 @@ -:root { - --three-dimensions-card-left-side-width: 1rem; -} - -.three-dimensions-card { - position: relative; - - /* Demo */ - border: 1px solid #d1d5db; - height: 6rem; - width: 6rem; -} - -/* The left side */ -.three-dimensions-card::before { - background: #d1d5db; - content: ''; - - /* Position */ - top: var(--three-dimensions-card-left-side-width); - left: 0px; - position: absolute; - transform: translate(-100%, 0) skewY(-45deg); - transform-origin: left top; - - /* Size */ - height: 100%; - width: var(--three-dimensions-card-left-side-width); -} - -/* The bottom side */ -.three-dimensions-card::after { - background: #d1d5db; - content: ''; - - /* Position */ - bottom: 0px; - left: 0px; - position: absolute; - transform: translate(0, 100%) skewX(-45deg); - transform-origin: left top; - - /* Size */ - height: var(--three-dimensions-card-left-side-width); - width: 100%; -} diff --git a/styles/patterns/_timeline.scss b/styles/patterns/_timeline.scss deleted file mode 100644 index 4564000..0000000 --- a/styles/patterns/_timeline.scss +++ /dev/null @@ -1,59 +0,0 @@ -.timeline { - /* Used to position the left vertical line */ - position: relative; - - /* Demo */ - height: 100%; - width: 100%; -} - -.timeline__line { - /* Border */ - border-right: 2px solid #d1d5db; - - /* Positioned at the left */ - left: 0.75rem; - position: absolute; - top: 0px; - - /* Take full height */ - height: 100%; -} - -.timeline__items { - /* Reset styles */ - list-style-type: none; - margin: 0px; - padding: 0px; -} - -.timeline__item { - margin-bottom: 8px; -} - -.timeline__top { - /* Center the content horizontally */ - align-items: center; - display: flex; -} - -.timeline__circle { - /* Rounded border */ - background-color: #d1d5db; - border-radius: 9999px; - - /* Size */ - height: 1.5rem; - width: 1.5rem; -} - -.timeline__title { - /* Take available width */ - flex: 1; - margin-left: 0.5rem; -} - -.timeline__desc { - /* Make it align with the title */ - margin-left: 2rem; -} diff --git a/styles/patterns/_toggle-password-visibility.scss b/styles/patterns/_toggle-password-visibility.scss deleted file mode 100644 index 5304361..0000000 --- a/styles/patterns/_toggle-password-visibility.scss +++ /dev/null @@ -1,41 +0,0 @@ -.toggle-password-visibility { - display: flex; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.25rem; - - /* Demo */ - height: 2.5rem; -} - -.toggle-password-visibility__input { - border-color: transparent; - /* Take available width */ - flex: 1; - - /* Demo */ - width: 6rem; -} - -.toggle-password-visibility__toggle { - /* Reset */ - background: #fff; - border-color: transparent; - - /* Center the content */ - display: flex; - align-items: center; - justify-content: center; -} - -.toggle-password-visibility__svg { - fill: none; - height: 1.5rem; - stroke: #d1d5db; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1; - width: 1.5rem; -} diff --git a/styles/patterns/_tooltip.scss b/styles/patterns/_tooltip.scss deleted file mode 100644 index 6de880d..0000000 --- a/styles/patterns/_tooltip.scss +++ /dev/null @@ -1,66 +0,0 @@ -.tooltip { - /* Used to position the arrow */ - position: relative; - - /* Demo */ - width: 8rem; - height: 2rem; - border-radius: 0.25rem; - background: #d1d5db; -} - -/* Show the arrow and content and restore pointer events when hovering the trigger element */ -.tooltip:hover .tooltip__arrow, -.tooltip:hover .tooltip__content { - opacity: 1; - pointer-events: initial; -} - -.tooltip__arrow { - /* Invisible by default */ - opacity: 1; - - /* To prevent accidental interactions with other elements */ - pointer-events: none; - - /* Border */ - border: 0.5rem solid transparent; - border-top-color: #111827; - - /* Position */ - bottom: 100%; - left: 50%; - position: absolute; - transform: translate(-50%, 8px); - - /* Zero size */ - height: 0; - width: 0; - - /* Displayed on top of other element */ - z-index: 10; -} - -.tooltip__content { - /* Invisible by default */ - opacity: 1; - - /* To prevent accidental interactions with other elements */ - pointer-events: none; - - /* Background color, must be the same as the border color of arrow */ - background-color: #111827; - border-radius: 0.25rem; - - /* Position */ - bottom: 100%; - left: 50%; - position: absolute; - transform: translate(-50%, -8px); - - /* Displayed on top of other element */ - z-index: 10; - - /* Demo */ - width: 6rem; -} diff --git a/styles/patterns/_tree-diagram.scss b/styles/patterns/_tree-diagram.scss deleted file mode 100644 index a6eec87..0000000 --- a/styles/patterns/_tree-diagram.scss +++ /dev/null @@ -1,72 +0,0 @@ -.tree-diagram ul { - display: flex; - position: relative; - - /* Reset */ - list-style-type: none; - margin: 0; - padding: 1rem 0.5rem 0rem 0.5rem; -} - -.tree-diagram ul ul::before { - border-right: 1px solid #d1d5db; - content: ''; - - /* Position */ - position: absolute; - top: 0; - right: 50%; - - /* Size */ - height: 1rem; - width: 50%; -} - -.tree-diagram li { - padding: 1rem 0.5rem 0rem 0.5rem; - position: relative; - - /* Center the content */ - align-items: center; - display: flex; - flex-direction: column; -} - -.tree-diagram li::before { - border-right: 1px solid #d1d5db; - border-top: 1px solid #d1d5db; - content: ''; - - /* Position */ - position: absolute; - top: 0; - right: 50%; - - /* Size */ - height: 1rem; - width: 50%; -} - -.tree-diagram li::after { - border-top: 1px solid #d1d5db; - content: ''; - - /* Position */ - position: absolute; - top: 0; - right: 0; - - /* Size */ - width: 50%; -} - -.tree-diagram li:first-child::before, -.tree-diagram li:last-child::after { - /* Remove the top of border from the first and last items */ - border-top: none; -} - -/* Add a root item if you want */ -li.tree-diagram__root::before { - border-right: none; -} diff --git a/styles/patterns/_triangle-buttons.scss b/styles/patterns/_triangle-buttons.scss deleted file mode 100644 index bf967b4..0000000 --- a/styles/patterns/_triangle-buttons.scss +++ /dev/null @@ -1,57 +0,0 @@ -.triangle-buttons__triangle { - border-style: solid; - - /* Size */ - height: 0; - width: 0; -} - -.triangle-buttons__triangle--t { - border-color: transparent transparent #d1d5db; - border-width: 0 0.5rem 0.5rem; -} - -.triangle-buttons__triangle--r { - border-color: transparent transparent transparent #d1d5db; - border-width: 0.5rem 0 0.5rem 0.5rem; -} - -.triangle-buttons__triangle--b { - border-color: #d1d5db transparent transparent; - border-width: 0.5rem 0.5rem 0; -} - -.triangle-buttons__triangle--l { - border-color: transparent #d1d5db transparent transparent; - border-width: 0.5rem 0.5rem 0.5rem 0; -} - -/* Demo */ -.triangle-buttons { - position: relative; - height: 100%; - width: 100%; -} -.triangle-buttons__corner { - position: absolute; -} -.triangle-buttons__corner--t { - left: 50%; - top: 0; - transform: translate(-50%, 0%); -} -.triangle-buttons__corner--r { - right: 0; - top: 50%; - transform: translate(0%, -50%); -} -.triangle-buttons__corner--b { - bottom: 0; - left: 50%; - transform: translate(-50%, 0%); -} -.triangle-buttons__corner--l { - left: 0; - top: 50%; - transform: translate(0%, -50%); -} diff --git a/styles/patterns/_upload-button.scss b/styles/patterns/_upload-button.scss deleted file mode 100644 index 40e6308..0000000 --- a/styles/patterns/_upload-button.scss +++ /dev/null @@ -1,41 +0,0 @@ -.upload-button { - /* Used to position the input */ - position: relative; - - /* Center the content */ - align-items: center; - display: flex; - - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem; - - /* Demo */ - width: 8rem; -} - -.upload-button__input { - /* Take the full size */ - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - - /* Make it transparent */ - opacity: 0; -} - -.upload-button__icon { - margin-right: 0.5rem; -} -.upload-button__svg { - fill: none; - height: 1.5rem; - stroke: #d1d5db; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1; - width: 1.5rem; -} diff --git a/styles/patterns/_validation-icon.scss b/styles/patterns/_validation-icon.scss deleted file mode 100644 index 7c64871..0000000 --- a/styles/patterns/_validation-icon.scss +++ /dev/null @@ -1,40 +0,0 @@ -.validation-icon { - /* Used to position the validation icon */ - position: relative; - - /* Demo */ - width: 8rem; -} - -.validation-icon__input { - /* Border */ - border: 1px solid #d1d5db; - border-radius: 0.25rem; - - /* Take the full width */ - width: 100%; - height: 2rem; - - /* Don't overlap the icon */ - padding-right: 1.5rem; -} - -.validation-icon__icon { - /* Positioned at the right side */ - position: absolute; - right: 0.5rem; - top: 50%; - transform: translate(0, -50%); - - z-index: 10; -} - -.validation-icon__svg { - fill: none; - height: 1rem; - width: 1rem; - stroke: #22c55e; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 2; -} diff --git a/styles/patterns/_video-background.scss b/styles/patterns/_video-background.scss deleted file mode 100644 index 2acc2c4..0000000 --- a/styles/patterns/_video-background.scss +++ /dev/null @@ -1,46 +0,0 @@ -.video-background { - /* Used to position the video and content */ - position: relative; - - height: 100%; - width: 100%; -} - -.video-background__inner { - /* Positioned at the top left corner */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Hide the scrollbar */ - overflow: hidden; -} - -.video-background__video { - object-fit: cover; - - /* Take full width */ - height: 100%; - max-width: 100%; -} - -.video-background__content { - /* Positioned at the top left corner */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Center the content */ - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; -} diff --git a/styles/patterns/_voting.scss b/styles/patterns/_voting.scss deleted file mode 100644 index 025ef93..0000000 --- a/styles/patterns/_voting.scss +++ /dev/null @@ -1,56 +0,0 @@ -.voting { - border: 1px solid #d1d5db; - border-radius: 0.25rem; - display: flex; - flex-direction: column; - height: 8rem; -} - -.voting__button { - /* Reset */ - background: none; - border: none; - cursor: pointer; - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Size */ - height: 1rem; - - /* Position the triangle */ - position: relative; -} - -.voting__triangle { - border-style: solid; - - /* Size */ - height: 0; - width: 0; -} - -.voting__triangle--up { - border-color: transparent transparent #d1d5db; - border-width: 0 0.5rem 0.5rem; -} - -.voting__triangle--down { - border-color: #d1d5db transparent transparent; - border-width: 0.5rem 0.5rem 0px; -} - -.voting__number { - /* Take the available height */ - flex: 1; - - /* Center the number */ - align-items: center; - display: flex; - justify-content: center; - - /* Spacing */ - padding: 0.25rem; -} diff --git a/styles/patterns/_watermark.scss b/styles/patterns/_watermark.scss deleted file mode 100644 index 158600a..0000000 --- a/styles/patterns/_watermark.scss +++ /dev/null @@ -1,42 +0,0 @@ -.watermark { - position: relative; - - /* Demo */ - height: 100%; - width: 100%; - align-items: center; - display: flex; - justify-content: center; -} - -.watermark__inner { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Absolute position */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; -} - -.watermark__body { - /* Text color */ - color: rgba(0, 0, 0, 0.2); - - /* Text styles */ - font-size: 2rem; - font-weight: bold; - text-transform: uppercase; - - /* Rotate the text */ - transform: rotate(-45deg); - - /* Disable the selection */ - user-select: none; -} diff --git a/styles/patterns/_wizard.scss b/styles/patterns/_wizard.scss deleted file mode 100644 index 1652de7..0000000 --- a/styles/patterns/_wizard.scss +++ /dev/null @@ -1,45 +0,0 @@ -.wizard { - align-items: center; - display: flex; - justify-content: center; - - /* Demo */ - height: 8rem; - width: 8rem; -} - -.wizard__step { - /* Make all steps have the same width */ - flex: 1; -} - -.wizard__dot { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; -} - -.wizard__connector { - flex: 1; - height: 1px; - background-color: #d1d5db; -} - -.wizard__step:first-child .wizard__connector:first-child, -.wizard__step:last-child .wizard__connector:last-child { - background-color: transparent; -} - -.wizard__number { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Rounded border */ - background-color: #d1d5db; - border-radius: 9999px; - height: 1rem; - width: 1rem; -} diff --git a/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss deleted file mode 100644 index c7d8ec5..0000000 --- a/styles/patterns/_zigzag-timeline.scss +++ /dev/null @@ -1,47 +0,0 @@ -.zigzag-timeline { - height: 8rem; - width: 8rem; -} - -.zigzag-timeline__item { - /* Used to position the milestone */ - position: relative; - - /* Border */ - border-bottom: 1px solid #9ca3af; - - /* Take full width */ - width: 100%; -} - -.zigzag-timeline__milestone { - /* Absolute position */ - position: absolute; - top: 50%; - - /* Circle it */ - border-radius: 50%; - height: 1rem; - width: 1rem; - - /* Misc */ - background: #9ca3af; -} - -/* Styles for even items */ -.zigzag-timeline__item:nth-child(2n) { - border-left: 1px solid #9ca3af; -} -.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone { - left: 0; - transform: translate(-50%, -50%); -} - -/* Styles for odd items */ -.zigzag-timeline__item:nth-child(2n + 1) { - border-right: 1px solid #9ca3af; -} -.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { - right: 0; - transform: translate(50%, -50%); -} diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss deleted file mode 100644 index 44700dd..0000000 --- a/styles/placeholders/_circle.scss +++ /dev/null @@ -1,15 +0,0 @@ -.circle { - background: #d1d5db; - border-radius: 9999px; - height: var(--circle-size); - width: var(--circle-size); -} -.circle--sm { - --circle-size: 0.5rem; -} -.circle--md { - --circle-size: 1.5rem; -} -.circle--lg { - --circle-size: 4rem; -} diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss deleted file mode 100644 index fc272fe..0000000 --- a/styles/placeholders/_line.scss +++ /dev/null @@ -1,53 +0,0 @@ -.line { - background: #d1d5db; -} -.line--hor { - height: 1px; - - &.line--20 { - width: 20%; - } - &.line--40 { - width: 40%; - } - &.line--60 { - width: 60%; - } - &.line--80 { - width: 80%; - } - &.line--100 { - width: 100%; - } -} -.line--ver { - width: 1px; - - &.line--20 { - height: 20%; - } - &.line--40 { - height: 40%; - } - &.line--60 { - height: 60%; - } - &.line--80 { - height: 80%; - } - &.line--100 { - height: 100%; - } -} - -.lines { - padding: 0.5rem 0; - width: 100%; - align-items: center; - display: flex; - justify-content: center; - flex-direction: column; -} -.lines .line { - margin-bottom: 0.25rem; -} diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss deleted file mode 100644 index 0c96632..0000000 --- a/styles/placeholders/_rectangle.scss +++ /dev/null @@ -1,56 +0,0 @@ -.rectangle { - background: #d1d5db; - border-radius: 0.25rem; -} -.rectangle--hor { - &.rectangle--20 { - width: 20%; - } - &.rectangle--40 { - width: 40%; - } - &.rectangle--60 { - width: 60%; - } - &.rectangle--80 { - width: 80%; - } - &.rectangle--100 { - width: 100%; - } - &.rectangle--sm { - height: 0.5rem; - } - &.rectangle--md { - height: 2rem; - } - &.rectangle--lg { - height: 4rem; - } -} -.rectangle--ver { - &.rectangle--20 { - height: 20%; - } - &.rectangle--40 { - height: 40%; - } - &.rectangle--60 { - height: 60%; - } - &.rectangle--80 { - height: 80%; - } - &.rectangle--100 { - height: 100%; - } - &.rectangle--sm { - width: 0.5rem; - } - &.rectangle--md { - width: 2rem; - } - &.rectangle--lg { - width: 4rem; - } -} diff --git a/styles/placeholders/_square.scss b/styles/placeholders/_square.scss deleted file mode 100644 index d5ce2c2..0000000 --- a/styles/placeholders/_square.scss +++ /dev/null @@ -1,14 +0,0 @@ -.square { - background: #d1d5db; - height: var(--square-size); - width: var(--square-size); -} -.square--sm { - --square-size: 0.5rem; -} -.square--md { - --square-size: 2rem; -} -.square--lg { - --square-size: 4rem; -} diff --git a/styles/placeholders/_triangle.scss b/styles/placeholders/_triangle.scss deleted file mode 100644 index 72cddd1..0000000 --- a/styles/placeholders/_triangle.scss +++ /dev/null @@ -1,46 +0,0 @@ -.triangle { - border-style: solid; - height: 0; - width: 0; -} -.triangle--t { - border-color: transparent transparent #d1d5db transparent; - border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size); -} -.triangle--r { - border-color: transparent transparent transparent #d1d5db; - border-width: var(--triangle-size) 0 var(--triangle-size) 1rem; -} -.triangle--b { - border-color: #d1d5db transparent transparent transparent; - border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size); -} -.triangle--l { - border-color: transparent #d1d5db transparent transparent; - border-width: var(--triangle-size) 1rem var(--triangle-size) 0; -} -.triangle--tr { - border-color: transparent #d1d5db transparent transparent; - border-width: 0 var(--triangle-size) var(--triangle-size) 0; -} -.triangle--br { - border-color: transparent transparent #d1d5db transparent; - border-width: 0 0 var(--triangle-size) var(--triangle-size); -} -.triangle--bl { - border-color: transparent transparent transparent #d1d5db; - border-width: var(--triangle-size) 0 0 var(--triangle-size); -} -.triangle--tl { - border-color: #d1d5db transparent transparent transparent; - border-width: var(--triangle-size) var(--triangle-size) 0 0; -} -.triangle--sm { - --triangle-size: 0.5rem; -} -.triangle--md { - --triangle-size: 2rem; -} -.triangle--lg { - --triangle-size: 4rem; -} diff --git a/styles/themes/_dracula.scss b/styles/themes/_dracula.scss deleted file mode 100644 index fca1d8a..0000000 --- a/styles/themes/_dracula.scss +++ /dev/null @@ -1,124 +0,0 @@ -// https://github.com/PrismJS/prism-themes/blob/master/themes/prism-dracula.css - -/** - * Dracula Theme originally by Zeno Rocha [@zenorocha] - * https://draculatheme.com/ - * - * Ported for PrismJS by Albert Vallverdu [@byverdu] - */ - -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; - 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: 0.5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background: #282a36; -} - -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #6272a4; -} - -.token.punctuation { - color: #f8f8f2; -} - -.namespace { - opacity: 0.7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #ff79c6; -} - -.token.boolean, -.token.number { - color: #bd93f9; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #50fa7b; -} - -.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: #f1fa8c; -} - -.token.keyword { - color: #8be9fd; -} - -.token.regex, -.token.important { - color: #ffb86c; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -}