mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-04 05:07:32 +02:00
Code Issues Releases Wiki Activity

Merge pull request #217 from phuocng/progress-bar

Browse Source 
feat: Indeterminate progress bar
This commit is contained in:
phuocng
2022-10-02 17:38:02 +07:00
committed by GitHub
parent 9e070d822d 006c83cc41
commit 586d67b8ec
177 changed files with 399 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@@ -2,12 +2,12 @@
A collection of popular layouts and patterns made with CSS: A collection of popular layouts and patterns made with CSS:
* 🎉 Zero dependencies - 🎉 Zero dependencies
* 🎉 No frameworks - 🎉 No frameworks
* 🎉 No CSS hacks - 🎉 No CSS hacks
* 🎉 Real use cases - 🎉 Real use cases
* Good practices (coming soon) - Good practices (coming soon)
* Accessibility Support (coming soon) - Accessibility Support (coming soon)
## Why ## Why
@@ -61,6 +61,7 @@ If there is any issue, it will be logged in the `tslint.log` file.
This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge. This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge.
Be my friend on Be my friend on
* [Twitter](https://twitter.com/nghuuphuoc)
* [dev.to](https://dev.to/phuocng) - [Twitter](https://twitter.com/nghuuphuoc)
* [Github](https://github.com/phuoc-ng) - [dev.to](https://dev.to/phuocng)
- [Github](https://github.com/phuoc-ng)

3
contents/_includes/covers/indeterminate-progress-bar.njk Normal file
View File

@@ -0,0 +1,3 @@
<div class="indeterminate-progress-bar">
<div class="indeterminate-progress-bar__progress"></div>
</div>

12
contents/accordion.md
View File

@@ -18,21 +18,15 @@ keywords: css accordion, css flexbox
<div class="accordion__toggle">...</div> <div class="accordion__toggle">...</div>
<!-- The title --> <!-- The title -->
<div class="accordion__title"> <div class="accordion__title">...</div>
...
</div>
</div> </div>
<!-- The content --> <!-- The content -->
<div class="accordion__content"> <div class="accordion__content">...</div>
...
</div>
</div> </div>
<!-- Expanded item --> <!-- Expanded item -->
<div class="accordion__item accordion__item--expanded"> <div class="accordion__item accordion__item--expanded">...</div>
...
</div>
<!-- Repeat other item --> <!-- Repeat other item -->
... ...

4
contents/badge.md
View File

@@ -8,9 +8,7 @@ keywords: css badge, css flexbox
## HTML ## HTML
```html ```html
<div class="badge"> <div class="badge">...</div>
...
</div>
``` ```
## CSS ## CSS

2
contents/box-selector.md
View File

@@ -20,7 +20,7 @@ keywords: css box selector
.box-selector { .box-selector {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: .5rem; padding: 0.5rem;
} }
.box-selector--selected { .box-selector--selected {

4
contents/button-with-icon.md
View File

@@ -13,9 +13,7 @@ keywords: css flexbox, css icon button
... ...
<!-- Label --> <!-- Label -->
<div class="button-with-icon__label"> <div class="button-with-icon__label">...</div>
...
</div>
</button> </button>
``` ```

2
contents/calendar.md
View File

@@ -60,7 +60,7 @@ keywords: css calendar, css grid
color: #fff; color: #fff;
} }
.calendar__day:nth-child(7n+1) { .calendar__day:nth-child(7n + 1) {
border-left: 1px solid #d1d5db; border-left: 1px solid #d1d5db;
} }

4
contents/card-layout.md
View File

@@ -10,9 +10,7 @@ keywords: css card layout, css flexbox, css layout
```html ```html
<div class="card-layout"> <div class="card-layout">
<!-- A card with given width --> <!-- A card with given width -->
<div class="card-layout__item"> <div class="card-layout__item">...</div>
...
</div>
<!-- Repeat other cards --> <!-- Repeat other cards -->
... ...

8
contents/card.md
View File

@@ -10,14 +10,10 @@ keywords: css card, css flexbox
```html ```html
<div class="card"> <div class="card">
<!-- Cover --> <!-- Cover -->
<div class="card__cover"> <div class="card__cover">...</div>
...
</div>
<!-- Content --> <!-- Content -->
<div class="card__content"> <div class="card__content">...</div>
...
</div>
... ...
</div> </div>
``` ```

4
contents/centering.md
View File

@@ -8,9 +8,7 @@ keywords: css centering, css flexbox
## HTML ## HTML
```html ```html
<div class="centering"> <div class="centering">...</div>
...
</div>
``` ```
## CSS ## CSS

4
contents/chip.md
View File

@@ -10,9 +10,7 @@ keywords: css chip, css flexbox, css tag
```html ```html
<div class="chip"> <div class="chip">
<!-- Content --> <!-- Content -->
<div class="chip__content"> <div class="chip__content">...</div>
...
</div>
<!-- The close button --> <!-- The close button -->
<button class="chip__button"> <button class="chip__button">

4
contents/circular-navigation.md
View File

@@ -15,9 +15,7 @@ keywords: css circular navigation, css flexbox
<!-- A circle menu item --> <!-- A circle menu item -->
<div class="circular-navigation__circle"> <div class="circular-navigation__circle">
<!-- The content --> <!-- The content -->
<div class="circular-navigation__content"> <div class="circular-navigation__content">...</div>
...
</div>
</div> </div>
<!-- Repeat menu items --> <!-- Repeat menu items -->

4
contents/cookie-banner.md
View File

@@ -10,9 +10,7 @@ keywords: css cookie banner, css flexbox
```html ```html
<div class="cookie-banner"> <div class="cookie-banner">
<!-- Tells visitors that the website uses cookie --> <!-- Tells visitors that the website uses cookie -->
<div class="cookie-banner__content"> <div class="cookie-banner__content">...</div>
...
</div>
<!-- Close button --> <!-- Close button -->
... ...

3
contents/corner-ribbon.md
View File

@@ -12,8 +12,7 @@ keywords: css flexbox, css ribbon
<!-- The container --> <!-- The container -->
<div class="corner-ribbon__inner"> <div class="corner-ribbon__inner">
<!-- The ribbon --> <!-- The ribbon -->
<div class="corner-ribbon__ribbon"> <div class="corner-ribbon__ribbon"></div>
</div>
</div> </div>
</div> </div>
``` ```

4
contents/drawer.md
View File

@@ -15,9 +15,7 @@ This pattern is also known as off-canvas.
<div class="drawer__overlay"></div> <div class="drawer__overlay"></div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="drawer__sidebar"> <div class="drawer__sidebar">...</div>
...
</div>
</div> </div>
``` ```

4
contents/drop-area.md
View File

@@ -8,9 +8,7 @@ keywords: css dropping area, css flexbox
## HTML ## HTML
```html ```html
<div class="drop-area"> <div class="drop-area">...</div>
...
</div>
``` ```
## CSS ## CSS

4
contents/drop-cap.md
View File

@@ -8,9 +8,7 @@ keywords: css drop cap, css :first-letter
## HTML ## HTML
```html ```html
<div class="drop-cap"> <div class="drop-cap">...</div>
...
</div>
``` ```
## CSS ## CSS

10
contents/dropdown.md
View File

@@ -10,21 +10,17 @@ keywords: css dropdown, css menu
```html ```html
<div class="dropdown"> <div class="dropdown">
<!-- The trigger element --> <!-- The trigger element -->
<div class="dropdown__trigger"> <div class="dropdown__trigger">...</div>
...
</div>
<!-- The content --> <!-- The content -->
<div class="dropdown__content"> <div class="dropdown__content">...</div>
...
</div>
</div> </div>
``` ```
## CSS ## CSS
```css ```css
.dropdown { .dropdown {
position: relative; position: relative;
} }

4
contents/fading-long-section.md
View File

@@ -12,9 +12,7 @@ The pattern is often used to indicate there is more content.
```html ```html
<div class="fading-long-section"> <div class="fading-long-section">
<!-- Main content --> <!-- Main content -->
<div class="fading-long-section__content"> <div class="fading-long-section__content">...</div>
...
</div>
<!-- The faded element --> <!-- The faded element -->
<div class="fading-long-section__fading"></div> <div class="fading-long-section__fading"></div>

4
contents/feature-comparison.md
View File

@@ -10,9 +10,7 @@ keywords: css feature comparison, css flexbox
```html ```html
<div class="feature-comparison"> <div class="feature-comparison">
<!-- Feature name --> <!-- Feature name -->
<div class="feature-comparison__feature"> <div class="feature-comparison__feature">...</div>
...
</div>
<!-- The model --> <!-- The model -->
<div class="feature-comparison__model"> <div class="feature-comparison__model">

8
contents/feature-list.md
View File

@@ -11,14 +11,10 @@ keywords: css feature list, css flexbox
<!-- Feature item --> <!-- Feature item -->
<div class="feature-list"> <div class="feature-list">
<!-- Image --> <!-- Image -->
<div class="feature-list__image"> <div class="feature-list__image">...</div>
...
</div>
<!-- Right side --> <!-- Right side -->
<div class="feature-list__desc"> <div class="feature-list__desc">...</div>
...
</div>
</div> </div>
<!-- Repeated items --> <!-- Repeated items -->

16
contents/fixed-at-corner.md
View File

@@ -10,24 +10,16 @@ keywords: css fixed
```html ```html
<div class="fixed-at-corner"> <div class="fixed-at-corner">
<!-- Top-left corner --> <!-- Top-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tl"> <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">...</div>
...
</div>
<!-- Top-right corner --> <!-- Top-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tr"> <div class="fixed-at-corner__corner fixed-at-corner__corner--tr">...</div>
...
</div>
<!-- Bottom-right corner --> <!-- Bottom-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--br"> <div class="fixed-at-corner__corner fixed-at-corner__corner--br">...</div>
...
</div>
<!-- Bottom-left corner --> <!-- Bottom-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--bl"> <div class="fixed-at-corner__corner fixed-at-corner__corner--bl">...</div>
...
</div>
</div> </div>
``` ```

8
contents/fixed-at-side.md
View File

@@ -9,14 +9,10 @@ keywords: css fixed
```html ```html
<!-- Fixed at the middle of left side --> <!-- Fixed at the middle of left side -->
<div class="fixed-at-side fixed-at-side--l"> <div class="fixed-at-side fixed-at-side--l">...</div>
...
</div>
<!-- Fixed at the middle of right side --> <!-- Fixed at the middle of right side -->
<div class="fixed-at-side fixed-at-side--r"> <div class="fixed-at-side fixed-at-side--r">...</div>
...
</div>
``` ```
## CSS ## CSS

4
contents/folder-structure.md
View File

@@ -88,9 +88,7 @@ keywords: css folder structure, css folder tree
/* Remove the border from the last item */ /* Remove the border from the last item */
.folder-structure li:last-child::before { .folder-structure li:last-child::before {
height: calc( height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
);
} }
``` ```

4
contents/full-background.md
View File

@@ -8,9 +8,7 @@ keywords: css background size cover, css full background
## HTML ## HTML
```html ```html
<div class="full-background"> <div class="full-background">...</div>
...
</div>
``` ```
## CSS ## CSS

8
contents/holy-grail.md
View File

@@ -9,9 +9,7 @@ keywords: css flexbox, css holy grail layout, css layout
```html ```html
<div class="holy-grail"> <div class="holy-grail">
<header> <header>...</header>
...
</header>
<main class="holy-grail__main"> <main class="holy-grail__main">
<!-- Left sidebar --> <!-- Left sidebar -->
<aside class="holy-grail__left">...</aside> <aside class="holy-grail__left">...</aside>
@@ -22,9 +20,7 @@ keywords: css flexbox, css holy grail layout, css layout
<!-- Right sidebar --> <!-- Right sidebar -->
<nav class="holy-grail__right">...</nav> <nav class="holy-grail__right">...</nav>
</main> </main>
<footer> <footer>...</footer>
...
</footer>
</div> </div>
``` ```

66
contents/indeterminate-progress-bar.md Normal file
View File

@@ -0,0 +1,66 @@
---
layout: layouts/post.njk
title: Indeterminate progress bar
description: Create an indeterminate progress bar with CSS
keywords: css indeterminate progress bar, css progress bar
---
## HTML
```html
<div class="indeterminate-progress-bar">
<div class="indeterminate-progress-bar__progress"></div>
</div>
```
## CSS
```css
.indeterminate-progress-bar {
/* Color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 0.5rem;
position: relative;
overflow: hidden;
}
.indeterminate-progress-bar__progress {
/* Color */
background-color: #3b82f6;
/* Rounded border */
border-radius: 9999px;
/* Absolute position */
position: absolute;
bottom: 0;
top: 0;
width: 50%;
/* Move the bar infinitely */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: indeterminate-progress-bar;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}
```
{% demo %}{% include "covers/indeterminate-progress-bar.njk" %}{% enddemo %}
## See also
- [Progress bar](/progress-bar/)

1
contents/index.njk
View File

@@ -77,6 +77,7 @@ eleventyExcludeFromCollections: true
<div class="category"> <div class="category">
<h2 class="category__name">Feedback</h2> <h2 class="category__name">Feedback</h2>
<div class="category__posts"> <div class="category__posts">
{% pattern "Indeterminate progress bar" %}{% include "covers/indeterminate-progress-bar.njk" %}{% endpattern %}
{% pattern "Modal" %}{% include "covers/modal.njk" %}{% endpattern %} {% pattern "Modal" %}{% include "covers/modal.njk" %}{% endpattern %}
{% pattern "Notification" %}{% include "covers/notification.njk" %}{% endpattern %} {% pattern "Notification" %}{% include "covers/notification.njk" %}{% endpattern %}
{% pattern "Popover arrow" %}{% include "covers/popover-arrow.njk" %}{% endpattern %} {% pattern "Popover arrow" %}{% include "covers/popover-arrow.njk" %}{% endpattern %}

4
contents/initial-avatar.md
View File

@@ -8,9 +8,7 @@ keywords: css avatar
## HTML ## HTML
```html ```html
<div class="initial-avatar"> <div class="initial-avatar">...</div>
...
</div>
``` ```
## CSS ## CSS

16
contents/input-addon.md
View File

@@ -11,9 +11,7 @@ keywords: css flexbox, css input add-on
<!-- Add-on prepended --> <!-- Add-on prepended -->
<div class="input-addon"> <div class="input-addon">
<!-- Add-on --> <!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended"> <div class="input-addon__addon input-addon__addon--prepended">...</div>
...
</div>
<!-- Input --> <!-- Input -->
<input type="text" class="input-addon__input" /> <input type="text" class="input-addon__input" />
@@ -25,25 +23,19 @@ keywords: css flexbox, css input add-on
<input type="text" class="input-addon__input" /> <input type="text" class="input-addon__input" />
<!-- Add-on --> <!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended"> <div class="input-addon__addon input-addon__addon--appended">...</div>
...
</div>
</div> </div>
<!-- Appended and prepended add-ons --> <!-- Appended and prepended add-ons -->
<div class="input-addon"> <div class="input-addon">
<!-- Add-on --> <!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended"> <div class="input-addon__addon input-addon__addon--prepended">...</div>
...
</div>
<!-- Input --> <!-- Input -->
<input type="text" class="input-addon__input" /> <input type="text" class="input-addon__input" />
<!-- Add-on --> <!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended"> <div class="input-addon__addon input-addon__addon--appended">...</div>
...
</div>
</div> </div>
``` ```

4
contents/inverted-corners.md
View File

@@ -8,9 +8,7 @@ keywords: css border radius, css inverted border radius, css inverted corners
## HTML ## HTML
```html ```html
<div class="inverted-corners"> <div class="inverted-corners">...</div>
...
</div>
``` ```
## CSS ## CSS

2
contents/layered-card.md
View File

@@ -54,7 +54,7 @@ keywords: css layered card
z-index: 1; z-index: 1;
background: #FFF; background: #fff;
} }
``` ```

4
contents/lined-paper.md
View File

@@ -8,9 +8,7 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines
## HTML ## HTML
```html ```html
<div class="lined-paper"> <div class="lined-paper">...</div>
...
</div>
``` ```
## CSS ## CSS

8
contents/media-object.md
View File

@@ -10,13 +10,9 @@ keywords: css flexbox, media object
```html ```html
<div class="media-object"> <div class="media-object">
<!-- Media object --> <!-- Media object -->
<div class="media-object__media"> <div class="media-object__media">...</div>
...
</div>
<!-- Main content --> <!-- Main content -->
<div class="media-object__content"> <div class="media-object__content">...</div>
...
</div>
</div> </div>
``` ```

4
contents/mega-menu.md
View File

@@ -18,9 +18,7 @@ keywords: css mega menu
<div>...</div> <div>...</div>
<!-- Mega menu --> <!-- Mega menu -->
<div class="mega-menu__content"> <div class="mega-menu__content">...</div>
...
</div>
</div> </div>
<!-- Item --> <!-- Item -->

12
contents/menu.md
View File

@@ -10,18 +10,14 @@ keywords: css flexbox, css menu
```html ```html
<div class="menu"> <div class="menu">
<!-- Normal menu item --> <!-- Normal menu item -->
<div class="menu__item"> <div class="menu__item">...</div>
...
</div>
<!-- With hot key --> <!-- With hot key -->
<div class="menu__item"> <div class="menu__item">
<!-- Label --> <!-- Label -->
... ...
<!-- Hot key --> <!-- Hot key -->
<div class="menu__hotkey"> <div class="menu__hotkey">...</div>
...
</div>
</div> </div>
<!-- With image and hot key --> <!-- With image and hot key -->
@@ -33,9 +29,7 @@ keywords: css flexbox, css menu
... ...
<!-- Hot key --> <!-- Hot key -->
<div class="menu__hotkey"> <div class="menu__hotkey">...</div>
...
</div>
</div> </div>
<!-- Divider --> <!-- Divider -->

4
contents/modal.md
View File

@@ -21,9 +21,7 @@ keywords: css dialog, css flexbox, css modal
... ...
<!-- Footer --> <!-- Footer -->
<div class="modal__footer"> <div class="modal__footer">...</div>
...
</div>
</div> </div>
``` ```

3
contents/nested-dropdowns.md
View File

@@ -12,7 +12,8 @@ keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown
<li>A</li> <li>A</li>
<li> <li>
<div class="nested-dropdowns__item"> <div class="nested-dropdowns__item">
B <div class="nested-dropdowns__arrow">...</div> B
<div class="nested-dropdowns__arrow">...</div>
</div> </div>
<ul> <ul>
<li>B.1</li> <li>B.1</li>

4
contents/notification.md
View File

@@ -10,9 +10,7 @@ keywords: css alert, css flexbox, css notification
```html ```html
<div class="notification"> <div class="notification">
<!-- Content --> <!-- Content -->
<div class="notification__body"> <div class="notification__body">...</div>
...
</div>
<!-- Close button --> <!-- Close button -->
<button class="notification__close"> <button class="notification__close">

6
contents/overlay-play-button.md
View File

@@ -15,9 +15,7 @@ keywords: css flexbox
<!-- The overlay area --> <!-- The overlay area -->
<div class="overlay-play-button__overlay"> <div class="overlay-play-button__overlay">
<!-- The player button --> <!-- The player button -->
<div class="overlay-play-button__play"> <div class="overlay-play-button__play">...</div>
...
</div>
</div> </div>
</div> </div>
``` ```
@@ -50,7 +48,7 @@ keywords: css flexbox
} }
.overlay-play-button__play { .overlay-play-button__play {
border: 0.25rem solid #FFF; border: 0.25rem solid #fff;
border-radius: 9999px; border-radius: 9999px;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;

4
contents/pagination.md
View File

@@ -10,9 +10,7 @@ keywords: css flexbox, css pagination
```html ```html
<div class="pagination"> <div class="pagination">
<!-- Pagination item --> <!-- Pagination item -->
<div class="pagination__item"> <div class="pagination__item">...</div>
...
</div>
<!-- Repeat other items --> <!-- Repeat other items -->
... ...

7
contents/price-tag.md
View File

@@ -8,9 +8,7 @@ keywords: css price tag
## HTML ## HTML
```html ```html
<div class="price-tag"> <div class="price-tag">...</div>
...
</div>
``` ```
## CSS ## CSS
@@ -46,8 +44,7 @@ keywords: css price tag
border-color: transparent var(--price-tag-background) transparent transparent; border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid; border-style: solid;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) 0rem;
calc(var(--price-tag-height) / 2) 0rem;
/* Position */ /* Position */
left: 0px; left: 0px;

8
contents/progress-bar.md
View File

@@ -44,6 +44,8 @@ keywords: css flexbox, css progress bar
} }
``` ```
{% demo %} {% demo %}{% include "covers/progress-bar.njk" %}{% enddemo %}
{% include "covers/progress-bar.njk" %}
{% enddemo %} ## See also
- [Indeterminate progress bar](/indeterminate-progress-bar/)

15
contents/questions-and-answers.md
View File

@@ -13,25 +13,18 @@ keywords: css accordion, css faq, css flexbox
<!-- Heading --> <!-- Heading -->
<div class="questions-and-answers__header"> <div class="questions-and-answers__header">
<!-- Question --> <!-- Question -->
<div class="questions-and-answers__title"> <div class="questions-and-answers__title">...</div>
...
</div>
<!-- The toggle icon sticks to the right --> <!-- The toggle icon sticks to the right -->
<div class="questions-and-answers__toggle"> <div class="questions-and-answers__toggle"></div>
</div>
</div> </div>
<!-- Answer --> <!-- Answer -->
<div class="questions-and-answers__content"> <div class="questions-and-answers__content">...</div>
...
</div>
</div> </div>
<!-- Expanded question and answer item --> <!-- Expanded question and answer item -->
<div class="questions-and-answers__item questions-and-answers__item--expanded"> <div class="questions-and-answers__item questions-and-answers__item--expanded">...</div>
...
</div>
``` ```
## CSS ## CSS

18
contents/radial-progress-bar.md
View File

@@ -10,9 +10,7 @@ keywords: css clip rect, css flexbox, css progress bar
```html ```html
<div class="radial-progress-bar"> <div class="radial-progress-bar">
<!-- Show number of percentages --> <!-- Show number of percentages -->
<div class="radial-progress-bar__percentages"> <div class="radial-progress-bar__percentages">...</div>
...
</div>
<!-- The curve --> <!-- The curve -->
<div class="radial-progress-bar__curve"> <div class="radial-progress-bar__curve">
@@ -93,12 +91,7 @@ keywords: css clip rect, css flexbox, css progress bar
.radial-progress-bar__half--first { .radial-progress-bar__half--first {
/* Position */ /* Position */
clip: rect( clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
/* Number of percentages * 360 / 100 */ /* Number of percentages * 360 / 100 */
transform: rotate(270deg); transform: rotate(270deg);
@@ -106,12 +99,7 @@ keywords: css clip rect, css flexbox, css progress bar
.radial-progress-bar__half--second { .radial-progress-bar__half--second {
/* Position */ /* Position */
clip: rect( clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
/* If percentages is less than 50 */ /* If percentages is less than 50 */
/* transform: rotate(0deg); */ /* transform: rotate(0deg); */

4
contents/radio-button-group.md
View File

@@ -19,9 +19,7 @@ keywords: css flexbox, css radio button
</label> </label>
<!-- Selected item --> <!-- Selected item -->
<label class="radio-button-group__label radio-button-group__label--selected"> <label class="radio-button-group__label radio-button-group__label--selected"> ... </label>
...
</label>
<!-- Repeat other items --> <!-- Repeat other items -->
... ...

4
contents/same-height-columns.md
View File

@@ -15,9 +15,7 @@ keywords: css flexbox, css layout, css same height columns
... ...
<!-- Content --> <!-- Content -->
<div class="same-height-columns__content"> <div class="same-height-columns__content">...</div>
...
</div>
<!-- Button sticks to the bottom --> <!-- Button sticks to the bottom -->
... ...

4
contents/separator.md
View File

@@ -10,9 +10,7 @@ keywords: css divider, css flexbox, css separator
```html ```html
<div class="separator"> <div class="separator">
<!-- Text --> <!-- Text -->
<div class="separator__content"> <div class="separator__content">...</div>
...
</div>
<!-- Separator line --> <!-- Separator line -->
<div class="separator__separator"></div> <div class="separator__separator"></div>

8
contents/sidebar.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css sidebar
```html ```html
<div class="sidebar"> <div class="sidebar">
<!-- Sidebar --> <!-- Sidebar -->
<aside class="sidebar__sidebar"> <aside class="sidebar__sidebar">...</aside>
...
</aside>
<!-- Main --> <!-- Main -->
<main class="sidebar__main"> <main class="sidebar__main">...</main>
...
</main>
</div> </div>
``` ```

4
contents/simple-grid.md
View File

@@ -14,9 +14,7 @@ keywords: css flexbox, css flexbox grid, css grid, css layout
<div class="simple-grid__cell simple-grid__cell--1/4">25%</div> <div class="simple-grid__cell simple-grid__cell--1/4">25%</div>
<!-- Cell that takes remaining width --> <!-- Cell that takes remaining width -->
<div class="simple-grid__cell simple-grid__cell--fill"> <div class="simple-grid__cell simple-grid__cell--fill">...</div>
...
</div>
</div> </div>
``` ```

8
contents/spin-button.md
View File

@@ -15,14 +15,10 @@ keywords: css flexbox, css spin button
<!-- Buttons spin-button --> <!-- Buttons spin-button -->
<div class="spin-button__buttons"> <div class="spin-button__buttons">
<!-- Up button --> <!-- Up button -->
<button class="spin-button__button"> <button class="spin-button__button">...</button>
...
</button>
<!-- Down button --> <!-- Down button -->
<button class="spin-button__button"> <button class="spin-button__button">...</button>
...
</button>
</div> </div>
</div> </div>
``` ```

8
contents/split-screen.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css split screen
```html ```html
<div class="split-screen"> <div class="split-screen">
<!-- Left content --> <!-- Left content -->
<div class="split-screen__half"> <div class="split-screen__half">...</div>
...
</div>
<!-- Right content --> <!-- Right content -->
<div class="split-screen__half"> <div class="split-screen__half">...</div>
...
</div>
</div> </div>
``` ```

8
contents/statistic.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css statistic
```html ```html
<div class="statistic"> <div class="statistic">
<!-- Value --> <!-- Value -->
<div class="statistic__value"> <div class="statistic__value">...</div>
...
</div>
<!-- Label --> <!-- Label -->
<div class="statistic__label"> <div class="statistic__label">...</div>
...
</div>
</div> </div>
``` ```

4
contents/status-light.md
View File

@@ -13,9 +13,7 @@ keywords: css flexbox, css status light
<div class="status-light__status"></div> <div class="status-light__status"></div>
<!-- Content --> <!-- Content -->
<div class="status-light__content"> <div class="status-light__content">...</div>
...
</div>
</div> </div>
``` ```

12
contents/sticky-footer.md
View File

@@ -9,15 +9,9 @@ keywords: css flexbox, css layout, css sticky, css sticky footer
```html ```html
<div class="sticky-footer"> <div class="sticky-footer">
<header class="sticky-footer__header"> <header class="sticky-footer__header">...</header>
... <main class="sticky-footer__main">...</main>
</header> <footer class="sticky-footer__footer">...</footer>
<main class="sticky-footer__main">
...
</main>
<footer class="sticky-footer__footer">
...
</footer>
</div> </div>
``` ```

8
contents/sticky-header.md
View File

@@ -9,12 +9,8 @@ keywords: css layout, css position sticky, css sticky header
```html ```html
<div> <div>
<header class="sticky-header__header"> <header class="sticky-header__header">...</header>
... <main>...</main>
</header>
<main>
...
</main>
</div> </div>
``` ```

4
contents/sticky-sections.md
View File

@@ -9,9 +9,7 @@ keywords: css layout, css sticky, css sticky sections
```html ```html
<div class="sticky-sections"> <div class="sticky-sections">
<section class="sticky-sections__section"> <section class="sticky-sections__section">...</section>
...
</section>
<!-- Repeat other sections --> <!-- Repeat other sections -->
... ...

4
contents/sticky-table-column.md
View File

@@ -11,9 +11,7 @@ keywords: css position sticky, css sticky table column
<table class="sticky-table-column"> <table class="sticky-table-column">
<thead> <thead>
<tr> <tr>
<th class="sticky-table-column__sticky"> <th class="sticky-table-column__sticky">...</th>
...
</th>
<!-- Other header column ... --> <!-- Other header column ... -->
</tr> </tr>

9
contents/tab.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css navigation, css tab
```html ```html
<div class="tab"> <div class="tab">
<!-- Active tab --> <!-- Active tab -->
<div class="tab__item tab__item--active"> <div class="tab__item tab__item--active">...</div>
...
</div>
<!-- Inactive tab --> <!-- Inactive tab -->
<div class="tab__item tab__item--inactive"> <div class="tab__item tab__item--inactive">...</div>
...
</div>
</div> </div>
``` ```
@@ -52,7 +48,6 @@ keywords: css flexbox, css navigation, css tab
/* Has only the bottom border */ /* Has only the bottom border */
border-bottom: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db;
} }
``` ```
{% demo %}{% include "covers/tab.njk" %}{% enddemo %} {% demo %}{% include "covers/tab.njk" %}{% enddemo %}

4
contents/teardrop.md
View File

@@ -10,9 +10,7 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl
```html ```html
<div class="teardrop"> <div class="teardrop">
<!-- Display the content vertically --> <!-- Display the content vertically -->
<div class="teardrop__content"> <div class="teardrop__content">...</div>
...
</div>
</div> </div>
``` ```

4
contents/three-dimensions-card.md
View File

@@ -8,9 +8,7 @@ keywords: css 3D card
## HTML ## HTML
```html ```html
<div class="three-dimensions-card"> <div class="three-dimensions-card">...</div>
...
</div>
``` ```
## CSS ## CSS

8
contents/timeline.md
View File

@@ -22,15 +22,11 @@ keywords: css flexbox, css timeline
<div class="timeline__circle"></div> <div class="timeline__circle"></div>
<!-- The title --> <!-- The title -->
<div class="timeline__title"> <div class="timeline__title">...</div>
...
</div>
</div> </div>
<!-- The description --> <!-- The description -->
<div class="timeline__desc"> <div class="timeline__desc">...</div>
...
</div>
</div> </div>
<!-- Repeat other items --> <!-- Repeat other items -->

10
contents/toggle-password-visibility.md
View File

@@ -13,9 +13,7 @@ keywords: css flexbox, toggle password visibilit
<input type="text" class="toggle-password-visibility__input" /> <input type="text" class="toggle-password-visibility__input" />
<!-- Toggle button sticks to the right --> <!-- Toggle button sticks to the right -->
<button class="toggle-password-visibility__toggle"> <button class="toggle-password-visibility__toggle">...</button>
...
</button>
</div> </div>
``` ```
@@ -53,13 +51,11 @@ keywords: css flexbox, toggle password visibilit
In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`: In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
```js ```js
document document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
.querySelector('.toggle-password-visibility__toggle')
.addEventListener('click', (e) => {
const input = e.target.previousElementSibling; const input = e.target.previousElementSibling;
const type = input.getAttribute('type'); const type = input.getAttribute('type');
input.setAttribute('type', type === 'text' ? 'password' : 'text'); input.setAttribute('type', type === 'text' ? 'password' : 'text');
}); });
``` ```
{% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %} {% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %}

4
contents/tooltip.md
View File

@@ -10,9 +10,7 @@ keywords: css tooltip
```html ```html
<div class="tooltip"> <div class="tooltip">
<!-- The tooltip content --> <!-- The tooltip content -->
<div class="tooltip__content"> <div class="tooltip__content">...</div>
...
</div>
<!-- The tooltip arrow --> <!-- The tooltip arrow -->
<div class="tooltip__arrow"></div> <div class="tooltip__arrow"></div>

4
contents/tree-diagram.md
View File

@@ -120,9 +120,7 @@ You can add a root item to the tree:
```html ```html
<div class="tree-diagram"> <div class="tree-diagram">
<ul> <ul>
<li class="tree-diagram__root"> <li class="tree-diagram__root">...</li>
...
</li>
</ul> </ul>
</div> </div>
``` ```

8
contents/video-background.md
View File

@@ -13,15 +13,11 @@ In this pattern, the video is displayed in the background.
<div class="video-background"> <div class="video-background">
<!-- The video container --> <!-- The video container -->
<div class="video-background__inner"> <div class="video-background__inner">
<video class="video-background__video" src="..."> <video class="video-background__video" src="...">...</video>
...
</video>
</div> </div>
<!-- The content --> <!-- The content -->
<div class="video-background__content"> <div class="video-background__content">...</div>
...
</div>
</div> </div>
``` ```

4
contents/watermark.md
View File

@@ -12,9 +12,7 @@ keywords: css watermark
<!-- Watermark container --> <!-- Watermark container -->
<div class="watermark__inner"> <div class="watermark__inner">
<!-- The watermark --> <!-- The watermark -->
<div class="watermark__body"> <div class="watermark__body">Draft</div>
Draft
</div>
</div> </div>
<!-- Other content --> <!-- Other content -->

4
contents/wizard.md
View File

@@ -16,9 +16,7 @@ keywords: css flexbox, css stepper, css wizard
<div class="wizard__connector"></div> <div class="wizard__connector"></div>
<!-- The step number --> <!-- The step number -->
<div class="wizard__number"> <div class="wizard__number">...</div>
...
</div>
<!-- The right connector --> <!-- The right connector -->
<div class="wizard__connector"></div> <div class="wizard__connector"></div>

1
styles/index.scss
View File

@@ -55,6 +55,7 @@
@import './patterns/full-background'; @import './patterns/full-background';
@import './patterns/full-screen-menu'; @import './patterns/full-screen-menu';
@import './patterns/holy-grail'; @import './patterns/holy-grail';
@import './patterns/indeterminate-progress-bar';
@import './patterns/initial-avatar'; @import './patterns/initial-avatar';
@import './patterns/input-addon'; @import './patterns/input-addon';
@import './patterns/inverted-corners'; @import './patterns/inverted-corners';

4
styles/patterns/_avatar-list.scss
View File

@@ -10,8 +10,8 @@
} }
.avatars__image { .avatars__image {
background-color: #d1d5db; background-color: #d1d5db;
box-shadow: 0 0 0 0.25rem #FFF; box-shadow: 0 0 0 0.25rem #fff;
color: #FFF; color: #fff;
font-size: 0.75rem; font-size: 0.75rem;
/* Rounded border */ /* Rounded border */

2
styles/patterns/_box-selector.scss
View File

@@ -12,7 +12,7 @@
.box-selector { .box-selector {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: .5rem; padding: 0.5rem;
} }
.box-selector--selected { .box-selector--selected {

2
styles/patterns/_calendar.scss
View File

@@ -24,7 +24,7 @@
color: #fff; color: #fff;
} }
.calendar__day:nth-child(7n+1) { .calendar__day:nth-child(7n + 1) {
border-left: 1px solid #d1d5db; border-left: 1px solid #d1d5db;
} }

2
styles/patterns/_circular-navigation.scss
View File

@@ -63,7 +63,7 @@
--circular-navigation__circle-degree: 60deg; --circular-navigation__circle-degree: 60deg;
--circular-navigation__content-degree: -60deg; --circular-navigation__content-degree: -60deg;
} }
.circular-navigation__circle--3{ .circular-navigation__circle--3 {
--circular-navigation__circle-degree: 120deg; --circular-navigation__circle-degree: 120deg;
--circular-navigation__content-degree: -120deg; --circular-navigation__content-degree: -120deg;
} }

10
styles/patterns/_color-swatch.scss
View File

@@ -15,20 +15,20 @@
margin: 0.5rem; margin: 0.5rem;
} }
.swatch__item--1st { .swatch__item--1st {
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, 0.1);
} }
.swatch__item--2nd { .swatch__item--2nd {
background-color: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, 0.2);
} }
.swatch__item--3rd { .swatch__item--3rd {
background-color: #d1d5db; background-color: #d1d5db;
} }
.swatch__item--4th { .swatch__item--4th {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, 0.4);
} }
.swatch__item--5th { .swatch__item--5th {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, 0.5);
} }
.swatch__item--6th { .swatch__item--6th {
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0.6);
} }

4
styles/patterns/_folder-structure.scss
View File

@@ -45,7 +45,5 @@
/* Remove the border from the last item */ /* Remove the border from the last item */
.folder-structure li:last-child::before { .folder-structure li:last-child::before {
height: calc( height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
);
} }

43
styles/patterns/_indeterminate-progress-bar.scss Normal file
View File

@@ -0,0 +1,43 @@
.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%;
}
}

2
styles/patterns/_layered-card.scss
View File

@@ -35,5 +35,5 @@
z-index: 1; z-index: 1;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
background: #FFF; background: #fff;
} }

2
styles/patterns/_overlay-play-button.scss
View File

@@ -27,7 +27,7 @@
} }
.overlay-play-button__play { .overlay-play-button__play {
border: 0.25rem solid #FFF; border: 0.25rem solid #fff;
border-radius: 9999px; border-radius: 9999px;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;

5
styles/patterns/_popover-arrow.scss
View File

@@ -1,3 +1,8 @@
.pattern__cover .popover-arrow {
height: 8rem;
width: 8rem;
}
.popover-arrow { .popover-arrow {
/* Border */ /* Border */
border: 1px solid #d1d5db; border: 1px solid #d1d5db;

4
styles/patterns/_price-tag.scss
View File

@@ -28,8 +28,8 @@
border-color: transparent var(--price-tag-background) transparent transparent; border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid; border-style: solid;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2) 0rem; 0rem;
/* Position */ /* Position */
left: 0px; left: 0px;

14
styles/patterns/_radial-progress-bar.scss
View File

@@ -57,12 +57,7 @@
.radial-progress-bar__half--first { .radial-progress-bar__half--first {
/* Position */ /* Position */
clip: rect( clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
/* Number of percentages * 360 / 100 */ /* Number of percentages * 360 / 100 */
transform: rotate(270deg); transform: rotate(270deg);
@@ -70,12 +65,7 @@
.radial-progress-bar__half--second { .radial-progress-bar__half--second {
/* Position */ /* Position */
clip: rect( clip: rect(0px, calc(var(--radial-progress-bar-size) * 0.5), var(--radial-progress-bar-size), 0px);
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
/* If percentages is less than 50 */ /* If percentages is less than 50 */
// transform: rotate(0deg); // transform: rotate(0deg);