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:
* 🎉 Zero dependencies
* 🎉 No frameworks
* 🎉 No CSS hacks
* 🎉 Real use cases
* Good practices (coming soon)
* Accessibility Support (coming soon)
- 🎉 Zero dependencies
- 🎉 No frameworks
- 🎉 No CSS hacks
- 🎉 Real use cases
- Good practices (coming soon)
- Accessibility Support (coming soon)
## 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.
Be my friend on
* [Twitter](https://twitter.com/nghuuphuoc)
* [dev.to](https://dev.to/phuocng)
* [Github](https://github.com/phuoc-ng)
- [Twitter](https://twitter.com/nghuuphuoc)
- [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>
<!-- The title -->
<div class="accordion__title">
...
</div>
<div class="accordion__title">...</div>
</div>
<!-- The content -->
<div class="accordion__content">
...
</div>
<div class="accordion__content">...</div>
</div>
<!-- Expanded item -->
<div class="accordion__item accordion__item--expanded">
...
</div>
<div class="accordion__item accordion__item--expanded">...</div>
<!-- Repeat other item -->
...

4
contents/badge.md
View File

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

2
contents/box-selector.md
View File

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

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

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

2
contents/calendar.md
View File

@@ -60,7 +60,7 @@ keywords: css calendar, css grid
color: #fff;
}
.calendar__day:nth-child(7n+1) {
.calendar__day:nth-child(7n + 1) {
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
<div class="card-layout">
<!-- A card with given width -->
<div class="card-layout__item">
...
</div>
<div class="card-layout__item">...</div>
<!-- Repeat other cards -->
...

8
contents/card.md
View File

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

4
contents/centering.md
View File

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

4
contents/chip.md
View File

@@ -10,9 +10,7 @@ keywords: css chip, css flexbox, css tag
```html
<div class="chip">
<!-- Content -->
<div class="chip__content">
...
</div>
<div class="chip__content">...</div>
<!-- The close 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 -->
<div class="circular-navigation__circle">
<!-- The content -->
<div class="circular-navigation__content">
...
</div>
<div class="circular-navigation__content">...</div>
</div>
<!-- Repeat menu items -->

4
contents/cookie-banner.md
View File

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

3
contents/corner-ribbon.md
View File

@@ -12,8 +12,7 @@ keywords: css flexbox, css ribbon
<!-- The container -->
<div class="corner-ribbon__inner">
<!-- The ribbon -->
<div class="corner-ribbon__ribbon">
</div>
<div class="corner-ribbon__ribbon"></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>
<!-- Sidebar -->
<div class="drawer__sidebar">
...
</div>
<div class="drawer__sidebar">...</div>
</div>
```

4
contents/drop-area.md
View File

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

4
contents/drop-cap.md
View File

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

10
contents/dropdown.md
View File

@@ -10,21 +10,17 @@ keywords: css dropdown, css menu
```html
<div class="dropdown">
<!-- The trigger element -->
<div class="dropdown__trigger">
...
</div>
<div class="dropdown__trigger">...</div>
<!-- The content -->
<div class="dropdown__content">
...
</div>
<div class="dropdown__content">...</div>
</div>
```
## CSS
```css
.dropdown {
.dropdown {
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
<div class="fading-long-section">
<!-- Main content -->
<div class="fading-long-section__content">
...
</div>
<div class="fading-long-section__content">...</div>
<!-- The faded element -->
<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
<div class="feature-comparison">
<!-- Feature name -->
<div class="feature-comparison__feature">
...
</div>
<div class="feature-comparison__feature">...</div>
<!-- The 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 -->
<div class="feature-list">
<!-- Image -->
<div class="feature-list__image">
...
</div>
<div class="feature-list__image">...</div>
<!-- Right side -->
<div class="feature-list__desc">
...
</div>
<div class="feature-list__desc">...</div>
</div>
<!-- Repeated items -->

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

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

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

@@ -9,14 +9,10 @@ keywords: css fixed
```html
<!-- Fixed at the middle of left side -->
<div class="fixed-at-side fixed-at-side--l">
...
</div>
<div class="fixed-at-side fixed-at-side--l">...</div>
<!-- Fixed at the middle of right side -->
<div class="fixed-at-side fixed-at-side--r">
...
</div>
<div class="fixed-at-side fixed-at-side--r">...</div>
```
## 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 */
.folder-structure li:last-child::before {
height: calc(
var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
);
height: calc(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
<div class="full-background">
...
</div>
<div class="full-background">...</div>
```
## CSS

8
contents/holy-grail.md
View File

@@ -9,9 +9,7 @@ keywords: css flexbox, css holy grail layout, css layout
```html
<div class="holy-grail">
<header>
...
</header>
<header>...</header>
<main class="holy-grail__main">
<!-- Left sidebar -->
<aside class="holy-grail__left">...</aside>
@@ -22,9 +20,7 @@ keywords: css flexbox, css holy grail layout, css layout
<!-- Right sidebar -->
<nav class="holy-grail__right">...</nav>
</main>
<footer>
...
</footer>
<footer>...</footer>
</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">
<h2 class="category__name">Feedback</h2>
<div class="category__posts">
{% pattern "Indeterminate progress bar" %}{% include "covers/indeterminate-progress-bar.njk" %}{% endpattern %}
{% pattern "Modal" %}{% include "covers/modal.njk" %}{% endpattern %}
{% pattern "Notification" %}{% include "covers/notification.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
<div class="initial-avatar">
...
</div>
<div class="initial-avatar">...</div>
```
## CSS

16
contents/input-addon.md
View File

@@ -11,9 +11,7 @@ keywords: css flexbox, css input add-on
<!-- Add-on prepended -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- 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" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
<div class="input-addon__addon input-addon__addon--appended">...</div>
</div>
<!-- Appended and prepended add-ons -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">
...
</div>
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">
...
</div>
<div class="input-addon__addon input-addon__addon--appended">...</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
<div class="inverted-corners">
...
</div>
<div class="inverted-corners">...</div>
```
## CSS

2
contents/layered-card.md
View File

@@ -54,7 +54,7 @@ keywords: css layered card
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
<div class="lined-paper">
...
</div>
<div class="lined-paper">...</div>
```
## CSS

8
contents/media-object.md
View File

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

4
contents/mega-menu.md
View File

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

12
contents/menu.md
View File

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

4
contents/modal.md
View File

@@ -21,9 +21,7 @@ keywords: css dialog, css flexbox, css modal
...
<!-- Footer -->
<div class="modal__footer">
...
</div>
<div class="modal__footer">...</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>
<div class="nested-dropdowns__item">
B <div class="nested-dropdowns__arrow">...</div>
B
<div class="nested-dropdowns__arrow">...</div>
</div>
<ul>
<li>B.1</li>

4
contents/notification.md
View File

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

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

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

4
contents/pagination.md
View File

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

7
contents/price-tag.md
View File

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

8
contents/progress-bar.md
View File

@@ -44,6 +44,8 @@ keywords: css flexbox, css progress bar
}
```
{% demo %}
{% include "covers/progress-bar.njk" %}
{% enddemo %}
{% demo %}{% 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 -->
<div class="questions-and-answers__header">
<!-- Question -->
<div class="questions-and-answers__title">
...
</div>
<div class="questions-and-answers__title">...</div>
<!-- The toggle icon sticks to the right -->
<div class="questions-and-answers__toggle">
</div>
<div class="questions-and-answers__toggle"></div>
</div>
<!-- Answer -->
<div class="questions-and-answers__content">
...
</div>
<div class="questions-and-answers__content">...</div>
</div>
<!-- Expanded question and answer item -->
<div class="questions-and-answers__item questions-and-answers__item--expanded">
...
</div>
<div class="questions-and-answers__item questions-and-answers__item--expanded">...</div>
```
## CSS

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

@@ -10,9 +10,7 @@ keywords: css clip rect, css flexbox, css progress bar
```html
<div class="radial-progress-bar">
<!-- Show number of percentages -->
<div class="radial-progress-bar__percentages">
...
</div>
<div class="radial-progress-bar__percentages">...</div>
<!-- The 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 {
/* Position */
clip: rect(
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
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);
@@ -106,12 +99,7 @@ keywords: css clip rect, css flexbox, css progress bar
.radial-progress-bar__half--second {
/* Position */
clip: rect(
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
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); */

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

@@ -19,9 +19,7 @@ keywords: css flexbox, css radio button
</label>
<!-- Selected item -->
<label class="radio-button-group__label radio-button-group__label--selected">
...
</label>
<label class="radio-button-group__label radio-button-group__label--selected"> ... </label>
<!-- 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 -->
<div class="same-height-columns__content">
...
</div>
<div class="same-height-columns__content">...</div>
<!-- Button sticks to the bottom -->
...

4
contents/separator.md
View File

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

8
contents/sidebar.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css sidebar
```html
<div class="sidebar">
<!-- Sidebar -->
<aside class="sidebar__sidebar">
...
</aside>
<aside class="sidebar__sidebar">...</aside>
<!-- Main -->
<main class="sidebar__main">
...
</main>
<main class="sidebar__main">...</main>
</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>
<!-- Cell that takes remaining width -->
<div class="simple-grid__cell simple-grid__cell--fill">
...
</div>
<div class="simple-grid__cell simple-grid__cell--fill">...</div>
</div>
```

8
contents/spin-button.md
View File

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

8
contents/split-screen.md
View File

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

8
contents/statistic.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css statistic
```html
<div class="statistic">
<!-- Value -->
<div class="statistic__value">
...
</div>
<div class="statistic__value">...</div>
<!-- Label -->
<div class="statistic__label">
...
</div>
<div class="statistic__label">...</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>
<!-- Content -->
<div class="status-light__content">
...
</div>
<div class="status-light__content">...</div>
</div>
```

12
contents/sticky-footer.md
View File

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

8
contents/sticky-header.md
View File

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

4
contents/sticky-sections.md
View File

@@ -9,9 +9,7 @@ keywords: css layout, css sticky, css sticky sections
```html
<div class="sticky-sections">
<section class="sticky-sections__section">
...
</section>
<section class="sticky-sections__section">...</section>
<!-- 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">
<thead>
<tr>
<th class="sticky-table-column__sticky">
...
</th>
<th class="sticky-table-column__sticky">...</th>
<!-- Other header column ... -->
</tr>

9
contents/tab.md
View File

@@ -10,14 +10,10 @@ keywords: css flexbox, css navigation, css tab
```html
<div class="tab">
<!-- Active tab -->
<div class="tab__item tab__item--active">
...
</div>
<div class="tab__item tab__item--active">...</div>
<!-- Inactive tab -->
<div class="tab__item tab__item--inactive">
...
</div>
<div class="tab__item tab__item--inactive">...</div>
</div>
```
@@ -52,7 +48,6 @@ keywords: css flexbox, css navigation, css tab
/* Has only the bottom border */
border-bottom: 1px solid #d1d5db;
}
```
{% 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
<div class="teardrop">
<!-- Display the content vertically -->
<div class="teardrop__content">
...
</div>
<div class="teardrop__content">...</div>
</div>
```

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

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

8
contents/timeline.md
View File

@@ -22,15 +22,11 @@ keywords: css flexbox, css timeline
<div class="timeline__circle"></div>
<!-- The title -->
<div class="timeline__title">
...
</div>
<div class="timeline__title">...</div>
</div>
<!-- The description -->
<div class="timeline__desc">
...
</div>
<div class="timeline__desc">...</div>
</div>
<!-- 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" />
<!-- Toggle button sticks to the right -->
<button class="toggle-password-visibility__toggle">
...
</button>
<button class="toggle-password-visibility__toggle">...</button>
</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`:
```js
document
.querySelector('.toggle-password-visibility__toggle')
.addEventListener('click', (e) => {
document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
const input = e.target.previousElementSibling;
const type = input.getAttribute('type');
input.setAttribute('type', type === 'text' ? 'password' : 'text');
});
});
```
{% demo %}{% include "covers/toggle-password-visibility.njk" %}{% enddemo %}

4
contents/tooltip.md
View File

@@ -10,9 +10,7 @@ keywords: css tooltip
```html
<div class="tooltip">
<!-- The tooltip content -->
<div class="tooltip__content">
...
</div>
<div class="tooltip__content">...</div>
<!-- The tooltip arrow -->
<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
<div class="tree-diagram">
<ul>
<li class="tree-diagram__root">
...
</li>
<li class="tree-diagram__root">...</li>
</ul>
</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">
<!-- The video container -->
<div class="video-background__inner">
<video class="video-background__video" src="...">
...
</video>
<video class="video-background__video" src="...">...</video>
</div>
<!-- The content -->
<div class="video-background__content">
...
</div>
<div class="video-background__content">...</div>
</div>
```

4
contents/watermark.md
View File

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

4
contents/wizard.md
View File

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

1
styles/index.scss
View File

@@ -55,6 +55,7 @@
@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';

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

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

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

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

2
styles/patterns/_calendar.scss
View File

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

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

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

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

@@ -15,20 +15,20 @@
margin: 0.5rem;
}
.swatch__item--1st {
background-color: rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, 0.1);
}
.swatch__item--2nd {
background-color: rgba(0, 0, 0, .2);
background-color: rgba(0, 0, 0, 0.2);
}
.swatch__item--3rd {
background-color: #d1d5db;
}
.swatch__item--4th {
background-color: rgba(0, 0, 0, .4);
background-color: rgba(0, 0, 0, 0.4);
}
.swatch__item--5th {
background-color: rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, 0.5);
}
.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 */
.folder-structure li:last-child::before {
height: calc(
var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
);
height: calc(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;
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 {
border: 0.25rem solid #FFF;
border: 0.25rem solid #fff;
border-radius: 9999px;
height: 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 {
/* Border */
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-style: solid;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
calc(var(--price-tag-height) / 2) 0rem;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
0rem;
/* Position */
left: 0px;

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

@@ -57,12 +57,7 @@
.radial-progress-bar__half--first {
/* Position */
clip: rect(
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
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);
@@ -70,12 +65,7 @@
.radial-progress-bar__half--second {
/* Position */
clip: rect(
0px,
calc(var(--radial-progress-bar-size) * 0.5),
var(--radial-progress-bar-size),
0px
);
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);