mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-07-31 11:20:21 +02:00
chore: Cleanup
This commit is contained in:
Phuoc Nguyen
163
.eleventy.js
163
.eleventy.js
@@ -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 `<div class="example example--border">
|
||||
<div class="example__ribbon example__ribbon--tr">
|
||||
<span class="example__title">Demo</span>
|
||||
</div>
|
||||
<div class="example__content example__content--medium">${content}</div>
|
||||
</div>`;
|
||||
});
|
||||
eleventyConfig.addPairedShortcode('pattern', function(content, name) {
|
||||
const href = `/${name.toLowerCase().split(' ').join('-')}/`;
|
||||
return `<div class="pattern__item">
|
||||
<a class="pattern__link" href="${href}">
|
||||
<div class="pattern__cover">${content}</div>
|
||||
<div class="pattern__title">${name}</div>
|
||||
</a>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
// `size` can be `sm`, `md`, `lg`
|
||||
eleventyConfig.addShortcode('circle', function(size) {
|
||||
const s = size || 'sm';
|
||||
return `<div class="circle circle--${s}"></div>`;
|
||||
});
|
||||
// `direction` can be `hor` or `ver`
|
||||
eleventyConfig.addShortcode('line', function(dir) {
|
||||
const w = randomInteger(1, 4) * 20;
|
||||
return `<div class="line line--${dir} line--${w}"></div>`;
|
||||
});
|
||||
eleventyConfig.addShortcode('lines', function(dir, numLines) {
|
||||
const content = Array(numLines).fill('').map(_ => {
|
||||
const w = randomInteger(1, 4) * 20;
|
||||
return `<div class="line line--${dir} line--${w}"></div>`
|
||||
}).join('');
|
||||
return `<div class="lines">${content}</div>`;
|
||||
});
|
||||
|
||||
// `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 `<div class="rectangle rectangle--${direction} rectangle--${s} rectangle--${w}"></div>`;
|
||||
});
|
||||
eleventyConfig.addShortcode('square', function(size) {
|
||||
const s = size || 'sm';
|
||||
return `<div class="square square--${s}"></div>`;
|
||||
});
|
||||
// `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
|
||||
eleventyConfig.addShortcode('triangle', function(corner, size) {
|
||||
const s = size || 'sm';
|
||||
return `<div class="triangle triangle--${corner} triangle--${s}"></div>`;
|
||||
});
|
||||
|
||||
// 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'
|
||||
}
|
||||
};
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
README.md
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
@@ -1,5 +1 @@
|
||||
.cache
|
||||
.netlify
|
||||
_site
|
||||
node_modules
|
||||
package-lock.json
|
||||
.DS_Store
|
||||
@@ -1,4 +0,0 @@
|
||||
.cache
|
||||
.netlify
|
||||
_site
|
||||
node_modules
|
||||
35
README.md
35
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.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 662 KiB |
Binary file not shown.
45
package.json
45
package.json
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
printWidth: 120,
|
||||
singleQuote: true,
|
||||
tabWidth: 4,
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -1,5 +0,0 @@
|
||||
.home__tip {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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: '/';
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.centering {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Demo */
|
||||
flex-direction: column;
|
||||
width: 6rem;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user