diff --git a/README.md b/README.md index 1b00fc7..8c4cf00 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,17 @@ 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 Being a front-end engineer, I have to deal with a lot of layouts and components. -There are a lot of CSS frameworks out there that provide popular layouts/components but +There are a lot of CSS frameworks out there that provide popular layouts/components but I usually don't want to include all of them in my project. So I collect most popular layouts and components that can be built with pure CSS. @@ -23,20 +23,20 @@ By composing them, you can have any possible layout that exists in the real life ## Running it on local -- Clone the project: +- Clone the project: ```shell $ git clone https://github.com/phuocng/csslayout ``` -- Install the dependencies: +- Install the dependencies: ```shell $ cd csslayout $ npm install ``` -- Run it on the local: +- Run it on the local: ```shell $ npm run start @@ -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) diff --git a/contents/_includes/covers/indeterminate-progress-bar.njk b/contents/_includes/covers/indeterminate-progress-bar.njk new file mode 100644 index 0000000..c875006 --- /dev/null +++ b/contents/_includes/covers/indeterminate-progress-bar.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/accordion.md b/contents/accordion.md index 10c998a..b822260 100644 --- a/contents/accordion.md +++ b/contents/accordion.md @@ -18,21 +18,15 @@ keywords: css accordion, css flexbox
...
-
- ... -
+
...
-
- ... -
+
...
-
- ... -
+
...
... diff --git a/contents/badge.md b/contents/badge.md index da3b3e9..5f8c06d 100644 --- a/contents/badge.md +++ b/contents/badge.md @@ -8,9 +8,7 @@ keywords: css badge, css flexbox ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/box-selector.md b/contents/box-selector.md index 8e9ebdf..d3e897c 100644 --- a/contents/box-selector.md +++ b/contents/box-selector.md @@ -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 { @@ -54,5 +54,5 @@ keywords: css box selector ## See also -- [Custom checkbox button](/custom-checkbox-button/) -- [Custom radio button](/custom-radio-button/) +- [Custom checkbox button](/custom-checkbox-button/) +- [Custom radio button](/custom-radio-button/) diff --git a/contents/breadcrumb.md b/contents/breadcrumb.md index 242eb78..5a07883 100644 --- a/contents/breadcrumb.md +++ b/contents/breadcrumb.md @@ -40,7 +40,7 @@ keywords: css breadcrumb, css flexbox top: 0; transform: translate(0.5rem, 0px); - content: '/'; + content: '/'; } ``` diff --git a/contents/button-with-icon.md b/contents/button-with-icon.md index c8aad11..0bcbd5d 100644 --- a/contents/button-with-icon.md +++ b/contents/button-with-icon.md @@ -13,9 +13,7 @@ keywords: css flexbox, css icon button ... -
- ... -
+
...
``` diff --git a/contents/calendar.md b/contents/calendar.md index 97f2d09..66d0664 100644 --- a/contents/calendar.md +++ b/contents/calendar.md @@ -17,11 +17,11 @@ keywords: css calendar, css grid
Fri
Sat
Sun
- +
30
31
- +
1
2
@@ -60,12 +60,12 @@ keywords: css calendar, css grid color: #fff; } -.calendar__day:nth-child(7n+1) { +.calendar__day:nth-child(7n + 1) { border-left: 1px solid #d1d5db; } .calendar__day--disabled { - color: #d1d5db; + color: #d1d5db; } ``` diff --git a/contents/card-layout.md b/contents/card-layout.md index f407d5f..525e950 100644 --- a/contents/card-layout.md +++ b/contents/card-layout.md @@ -10,9 +10,7 @@ keywords: css card layout, css flexbox, css layout ```html
-
- ... -
+
...
... diff --git a/contents/card.md b/contents/card.md index 610d23b..09c1497 100644 --- a/contents/card.md +++ b/contents/card.md @@ -10,14 +10,10 @@ keywords: css card, css flexbox ```html
-
- ... -
+
...
-
- ... -
+
...
...
``` diff --git a/contents/centering.md b/contents/centering.md index 0eea8be..f05dda3 100644 --- a/contents/centering.md +++ b/contents/centering.md @@ -8,9 +8,7 @@ keywords: css centering, css flexbox ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/chip.md b/contents/chip.md index 07bc2e8..e22849d 100644 --- a/contents/chip.md +++ b/contents/chip.md @@ -10,9 +10,7 @@ keywords: css chip, css flexbox, css tag ```html
-
- ... -
+
...
``` diff --git a/contents/drop-area.md b/contents/drop-area.md index 45e6870..984d26f 100644 --- a/contents/drop-area.md +++ b/contents/drop-area.md @@ -8,9 +8,7 @@ keywords: css dropping area, css flexbox ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/drop-cap.md b/contents/drop-cap.md index 5168a7a..131218e 100644 --- a/contents/drop-cap.md +++ b/contents/drop-cap.md @@ -8,9 +8,7 @@ keywords: css drop cap, css :first-letter ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/dropdown.md b/contents/dropdown.md index 754ce14..a78a377 100644 --- a/contents/dropdown.md +++ b/contents/dropdown.md @@ -10,21 +10,17 @@ keywords: css dropdown, css menu ```html
-
- ... -
+
...
-
- ... -
+
...
``` ## CSS ```css - .dropdown { +.dropdown { position: relative; } diff --git a/contents/fading-long-section.md b/contents/fading-long-section.md index cd4bb0d..bbe3ab2 100644 --- a/contents/fading-long-section.md +++ b/contents/fading-long-section.md @@ -12,9 +12,7 @@ The pattern is often used to indicate there is more content. ```html
-
- ... -
+
...
diff --git a/contents/feature-comparison.md b/contents/feature-comparison.md index ddc4220..217ed97 100644 --- a/contents/feature-comparison.md +++ b/contents/feature-comparison.md @@ -10,9 +10,7 @@ keywords: css feature comparison, css flexbox ```html
-
- ... -
+
...
diff --git a/contents/feature-list.md b/contents/feature-list.md index e0ca7d4..30495a3 100644 --- a/contents/feature-list.md +++ b/contents/feature-list.md @@ -11,14 +11,10 @@ keywords: css feature list, css flexbox
-
- ... -
+
...
-
- ... -
+
...
diff --git a/contents/fixed-at-corner.md b/contents/fixed-at-corner.md index c653cdc..6e2d44e 100644 --- a/contents/fixed-at-corner.md +++ b/contents/fixed-at-corner.md @@ -10,24 +10,16 @@ keywords: css fixed ```html
-
- ... -
+
...
-
- ... -
+
...
-
- ... -
+
...
-
- ... -
+
...
``` diff --git a/contents/fixed-at-side.md b/contents/fixed-at-side.md index 20211b5..ef93347 100644 --- a/contents/fixed-at-side.md +++ b/contents/fixed-at-side.md @@ -9,14 +9,10 @@ keywords: css fixed ```html -
- ... -
+
...
-
- ... -
+
...
``` ## CSS diff --git a/contents/folder-structure.md b/contents/folder-structure.md index ee80fca..ddea9d9 100644 --- a/contents/folder-structure.md +++ b/contents/folder-structure.md @@ -31,7 +31,7 @@ keywords: css folder structure, css folder tree ... - + ... @@ -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); } ``` diff --git a/contents/full-background.md b/contents/full-background.md index f7e7c3a..0f6216d 100644 --- a/contents/full-background.md +++ b/contents/full-background.md @@ -8,9 +8,7 @@ keywords: css background size cover, css full background ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/full-screen-menu.md b/contents/full-screen-menu.md index 3df8918..e5a90cd 100644 --- a/contents/full-screen-menu.md +++ b/contents/full-screen-menu.md @@ -39,7 +39,7 @@ keywords: css fixed, css flexbox, css menu .full-screen-menu__close { /* Shown at top left corner */ left: 1rem; - position: absolute; + position: absolute; top: 1rem; } ``` diff --git a/contents/holy-grail.md b/contents/holy-grail.md index 6b15992..6435cd3 100644 --- a/contents/holy-grail.md +++ b/contents/holy-grail.md @@ -9,9 +9,7 @@ keywords: css flexbox, css holy grail layout, css layout ```html
-
- ... -
+
...
@@ -22,9 +20,7 @@ keywords: css flexbox, css holy grail layout, css layout
-
- ... -
+
...
``` diff --git a/contents/indeterminate-progress-bar.md b/contents/indeterminate-progress-bar.md new file mode 100644 index 0000000..e19a650 --- /dev/null +++ b/contents/indeterminate-progress-bar.md @@ -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 +
+
+
+``` + +## 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/) diff --git a/contents/index.njk b/contents/index.njk index 04efc29..2ad7241 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -77,6 +77,7 @@ eleventyExcludeFromCollections: true

Feedback

+ {% 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 %} diff --git a/contents/initial-avatar.md b/contents/initial-avatar.md index 31df3bd..862d370 100644 --- a/contents/initial-avatar.md +++ b/contents/initial-avatar.md @@ -8,9 +8,7 @@ keywords: css avatar ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/input-addon.md b/contents/input-addon.md index 12c339a..068217a 100644 --- a/contents/input-addon.md +++ b/contents/input-addon.md @@ -11,9 +11,7 @@ keywords: css flexbox, css input add-on
-
- ... -
+
...
@@ -25,25 +23,19 @@ keywords: css flexbox, css input add-on -
- ... -
+
...
-
- ... -
+
...
-
- ... -
+
...
``` diff --git a/contents/inverted-corners.md b/contents/inverted-corners.md index 8397291..181113f 100644 --- a/contents/inverted-corners.md +++ b/contents/inverted-corners.md @@ -8,9 +8,7 @@ keywords: css border radius, css inverted border radius, css inverted corners ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/layered-card.md b/contents/layered-card.md index 2f8e7dd..fd7a10f 100644 --- a/contents/layered-card.md +++ b/contents/layered-card.md @@ -51,10 +51,10 @@ keywords: css layered card /* Size */ height: 100%; width: 100%; - + z-index: 1; - background: #FFF; + background: #fff; } ``` diff --git a/contents/lined-paper.md b/contents/lined-paper.md index ac6052e..91d087f 100644 --- a/contents/lined-paper.md +++ b/contents/lined-paper.md @@ -8,9 +8,7 @@ keywords: css linear gradient, css lined paper, css multiple horizontal lines ## HTML ```html -
- ... -
+
...
``` ## CSS diff --git a/contents/media-object.md b/contents/media-object.md index 14ce45f..bc74818 100644 --- a/contents/media-object.md +++ b/contents/media-object.md @@ -10,13 +10,9 @@ keywords: css flexbox, media object ```html
-
- ... -
+
...
-
- ... -
+
...
``` diff --git a/contents/mega-menu.md b/contents/mega-menu.md index 5944d7f..6d87794 100644 --- a/contents/mega-menu.md +++ b/contents/mega-menu.md @@ -18,9 +18,7 @@ keywords: css mega menu
...
-
- ... -
+
...
diff --git a/contents/menu.md b/contents/menu.md index 1da4be7..1a542a3 100644 --- a/contents/menu.md +++ b/contents/menu.md @@ -10,18 +10,14 @@ keywords: css flexbox, css menu ```html
-
- ... -
+
...
... -
- ... -
+
...
@@ -33,9 +29,7 @@ keywords: css flexbox, css menu ... -
- ... -
+
...
diff --git a/contents/modal.md b/contents/modal.md index 5a7ad28..271b335 100644 --- a/contents/modal.md +++ b/contents/modal.md @@ -21,9 +21,7 @@ keywords: css dialog, css flexbox, css modal ... -
- ... -
+
...
``` @@ -48,7 +46,7 @@ keywords: css dialog, css flexbox, css modal display: flex; /* Push the buttons to the right */ justify-content: flex-end; - + /* Border */ border-top: 1px solid #d1d5db; } diff --git a/contents/nested-dropdowns.md b/contents/nested-dropdowns.md index 370e738..e89c2d2 100644 --- a/contents/nested-dropdowns.md +++ b/contents/nested-dropdowns.md @@ -12,7 +12,8 @@ keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown
  • A
  • - B
    ...
    + B +
    ...
    • B.1
      • @@ -54,7 +55,7 @@ keywords: css dropdown menu, css multi-level dropdown menu, css nested dropdown .nested-dropdowns li { cursor: pointer; - + /* Spacing */ padding: 0.25rem; diff --git a/contents/notification.md b/contents/notification.md index b3bf7e9..514f0c9 100644 --- a/contents/notification.md +++ b/contents/notification.md @@ -10,9 +10,7 @@ keywords: css alert, css flexbox, css notification ```html
      -
      - ... -
      +
      ...
      ``` @@ -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; diff --git a/contents/pagination.md b/contents/pagination.md index 543641b..56773ae 100644 --- a/contents/pagination.md +++ b/contents/pagination.md @@ -10,9 +10,7 @@ keywords: css flexbox, css pagination ```html -
      - ... -
      +
      ...
      ``` ## CSS diff --git a/contents/radial-progress-bar.md b/contents/radial-progress-bar.md index 5d2a744..29a33c7 100644 --- a/contents/radial-progress-bar.md +++ b/contents/radial-progress-bar.md @@ -10,9 +10,7 @@ keywords: css clip rect, css flexbox, css progress bar ```html
      -
      - ... -
      +
      ...
      @@ -29,7 +27,7 @@ keywords: css clip rect, css flexbox, css progress bar ```css :root { - --radial-progress-bar-size: 8rem; + --radial-progress-bar-size: 8rem; --radial-progress-bar-border-width: 0.75rem; } @@ -93,25 +91,15 @@ 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); } .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); */ diff --git a/contents/radio-button-group.md b/contents/radio-button-group.md index e88dd0d..137ed6b 100644 --- a/contents/radio-button-group.md +++ b/contents/radio-button-group.md @@ -19,9 +19,7 @@ keywords: css flexbox, css radio button - + ... diff --git a/contents/same-height-columns.md b/contents/same-height-columns.md index 04d0903..3451bcf 100644 --- a/contents/same-height-columns.md +++ b/contents/same-height-columns.md @@ -15,9 +15,7 @@ keywords: css flexbox, css layout, css same height columns ... -
      - ... -
      +
      ...
      ... diff --git a/contents/separator.md b/contents/separator.md index feb1e24..c8e8951 100644 --- a/contents/separator.md +++ b/contents/separator.md @@ -10,9 +10,7 @@ keywords: css divider, css flexbox, css separator ```html
      -
      - ... -
      +
      ...
      diff --git a/contents/sidebar.md b/contents/sidebar.md index d4eee1b..5008cf4 100644 --- a/contents/sidebar.md +++ b/contents/sidebar.md @@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css sidebar ```html
      - + -
      - ... -
      +
      ...
      ``` diff --git a/contents/simple-grid.md b/contents/simple-grid.md index afe171a..409b841 100644 --- a/contents/simple-grid.md +++ b/contents/simple-grid.md @@ -14,9 +14,7 @@ keywords: css flexbox, css flexbox grid, css grid, css layout
      25%
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/spin-button.md b/contents/spin-button.md index 771f6db..a197646 100644 --- a/contents/spin-button.md +++ b/contents/spin-button.md @@ -15,14 +15,10 @@ keywords: css flexbox, css spin button
      - + - +
      ``` diff --git a/contents/split-screen.md b/contents/split-screen.md index 64da366..7bab1e4 100644 --- a/contents/split-screen.md +++ b/contents/split-screen.md @@ -10,14 +10,10 @@ keywords: css flexbox, css layout, css split screen ```html
      -
      - ... -
      +
      ...
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/statistic.md b/contents/statistic.md index e229a8f..fd8e70b 100644 --- a/contents/statistic.md +++ b/contents/statistic.md @@ -10,14 +10,10 @@ keywords: css flexbox, css statistic ```html
      -
      - ... -
      +
      ...
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/status-light.md b/contents/status-light.md index df3400b..0b1c611 100644 --- a/contents/status-light.md +++ b/contents/status-light.md @@ -13,9 +13,7 @@ keywords: css flexbox, css status light
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/sticky-footer.md b/contents/sticky-footer.md index 8244622..a74a5d4 100644 --- a/contents/sticky-footer.md +++ b/contents/sticky-footer.md @@ -9,15 +9,9 @@ keywords: css flexbox, css layout, css sticky, css sticky footer ```html
      -
      - ... -
      -
      - ... -
      -
      - ... -
      +
      ...
      +
      ...
      +
      ...
      ``` diff --git a/contents/sticky-header.md b/contents/sticky-header.md index a2aa714..e6c18cf 100644 --- a/contents/sticky-header.md +++ b/contents/sticky-header.md @@ -9,12 +9,8 @@ keywords: css layout, css position sticky, css sticky header ```html
      -
      - ... -
      -
      - ... -
      +
      ...
      +
      ...
      ``` diff --git a/contents/sticky-sections.md b/contents/sticky-sections.md index 7deb15a..4d108d2 100644 --- a/contents/sticky-sections.md +++ b/contents/sticky-sections.md @@ -9,9 +9,7 @@ keywords: css layout, css sticky, css sticky sections ```html
      -
      - ... -
      +
      ...
      ... diff --git a/contents/sticky-table-column.md b/contents/sticky-table-column.md index 0166e77..1ce4f87 100644 --- a/contents/sticky-table-column.md +++ b/contents/sticky-table-column.md @@ -11,9 +11,7 @@ keywords: css position sticky, css sticky table column - + diff --git a/contents/tab.md b/contents/tab.md index c5e5b9d..9d72fb1 100644 --- a/contents/tab.md +++ b/contents/tab.md @@ -10,14 +10,10 @@ keywords: css flexbox, css navigation, css tab ```html
      -
      - ... -
      +
      ...
      -
      - ... -
      +
      ...
      ``` @@ -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 %} diff --git a/contents/teardrop.md b/contents/teardrop.md index 4508b27..07c27e9 100644 --- a/contents/teardrop.md +++ b/contents/teardrop.md @@ -10,9 +10,7 @@ keywords: css border radius, css teardrop, css water drop shape, css water dropl ```html
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/three-dimensions-card.md b/contents/three-dimensions-card.md index 4f4e9db..dff7f6c 100644 --- a/contents/three-dimensions-card.md +++ b/contents/three-dimensions-card.md @@ -8,9 +8,7 @@ keywords: css 3D card ## HTML ```html -
      - ... -
      +
      ...
      ``` ## CSS @@ -20,7 +18,7 @@ keywords: css 3D card --three-dimensions-card-left-side-width: 1rem; } -.three-dimensions-card { +.three-dimensions-card { position: relative; } diff --git a/contents/timeline.md b/contents/timeline.md index 9269b40..eb8f408 100644 --- a/contents/timeline.md +++ b/contents/timeline.md @@ -22,15 +22,11 @@ keywords: css flexbox, css timeline
      -
      - ... -
      +
      ...
      -
      - ... -
      +
      ...
      diff --git a/contents/toggle-password-visibility.md b/contents/toggle-password-visibility.md index eefe556..db1d7e0 100644 --- a/contents/toggle-password-visibility.md +++ b/contents/toggle-password-visibility.md @@ -13,9 +13,7 @@ keywords: css flexbox, toggle password visibilit - + ``` @@ -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) => { - const input = e.target.previousElementSibling; - const type = input.getAttribute('type'); - input.setAttribute('type', type === 'text' ? 'password' : 'text'); - }); +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 %} diff --git a/contents/tooltip.md b/contents/tooltip.md index 6da31f7..c635b80 100644 --- a/contents/tooltip.md +++ b/contents/tooltip.md @@ -10,9 +10,7 @@ keywords: css tooltip ```html
      -
      - ... -
      +
      ...
      diff --git a/contents/tree-diagram.md b/contents/tree-diagram.md index 94b11f0..b4c3bcb 100644 --- a/contents/tree-diagram.md +++ b/contents/tree-diagram.md @@ -31,7 +31,7 @@ keywords: css sitemap, css tree diagram ... - + ... @@ -120,9 +120,7 @@ You can add a root item to the tree: ```html
        -
      • - ... -
        • +
      • ...
      ``` diff --git a/contents/video-background.md b/contents/video-background.md index ba0b3f0..c0d0c46 100644 --- a/contents/video-background.md +++ b/contents/video-background.md @@ -13,15 +13,11 @@ In this pattern, the video is displayed in the background.
      - +
      -
      - ... -
      +
      ...
      ``` diff --git a/contents/watermark.md b/contents/watermark.md index 1fb466b..6e3d570 100644 --- a/contents/watermark.md +++ b/contents/watermark.md @@ -12,9 +12,7 @@ keywords: css watermark
      -
      - Draft -
      +
      Draft
      diff --git a/contents/wizard.md b/contents/wizard.md index 3fd51e9..7b884f5 100644 --- a/contents/wizard.md +++ b/contents/wizard.md @@ -16,9 +16,7 @@ keywords: css flexbox, css stepper, css wizard
      -
      - ... -
      +
      ...
      diff --git a/styles/blocks/_category.scss b/styles/blocks/_category.scss index d2215a1..1eb6e72 100644 --- a/styles/blocks/_category.scss +++ b/styles/blocks/_category.scss @@ -10,7 +10,7 @@ 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%); + box-shadow: 0 0 1.5rem rgb(0 0 0 / 10%); } .category__link { background: #4338ca; @@ -38,4 +38,4 @@ :root { --category__post-num-columns: 5; } -} \ No newline at end of file +} diff --git a/styles/blocks/_css-scan.scss b/styles/blocks/_css-scan.scss index 6daf854..ef7f9c9 100644 --- a/styles/blocks/_css-scan.scss +++ b/styles/blocks/_css-scan.scss @@ -80,4 +80,4 @@ right: -5%; transform: scale(1.1) rotate(-7deg); } -} \ No newline at end of file +} diff --git a/styles/blocks/_example.scss b/styles/blocks/_example.scss index 624af1f..02ee79c 100644 --- a/styles/blocks/_example.scss +++ b/styles/blocks/_example.scss @@ -68,4 +68,4 @@ } .example__content--large { height: 40rem; -} \ No newline at end of file +} diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss index e0169d2..0fd4d32 100644 --- a/styles/blocks/_pattern.scss +++ b/styles/blocks/_pattern.scss @@ -27,4 +27,4 @@ color: #6366f1; font-size: 1.25rem; font-weight: 500; -} \ No newline at end of file +} diff --git a/styles/index.scss b/styles/index.scss index 5bf8ee2..f428678 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -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'; diff --git a/styles/pages/_home.scss b/styles/pages/_home.scss index eff7145..8a1b62e 100644 --- a/styles/pages/_home.scss +++ b/styles/pages/_home.scss @@ -2,4 +2,4 @@ font-size: 1.5rem; margin-top: 2rem; text-align: center; -} \ No newline at end of file +} diff --git a/styles/patterns/_accordion.scss b/styles/patterns/_accordion.scss index eb25ff4..ef79115 100644 --- a/styles/patterns/_accordion.scss +++ b/styles/patterns/_accordion.scss @@ -29,4 +29,4 @@ } .accordion__item--expanded .accordion__content { display: block; -} \ No newline at end of file +} diff --git a/styles/patterns/_arrow-buttons.scss b/styles/patterns/_arrow-buttons.scss index 136c1e2..f08e47f 100644 --- a/styles/patterns/_arrow-buttons.scss +++ b/styles/patterns/_arrow-buttons.scss @@ -63,4 +63,4 @@ left: 0; top: 50%; transform: translate(0%, -50%); -} \ No newline at end of file +} diff --git a/styles/patterns/_avatar-list.scss b/styles/patterns/_avatar-list.scss index b0f651b..222b241 100644 --- a/styles/patterns/_avatar-list.scss +++ b/styles/patterns/_avatar-list.scss @@ -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 */ @@ -25,4 +25,4 @@ /* Size */ height: 2rem; width: 2rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_avatar.scss b/styles/patterns/_avatar.scss index ccf43a6..ce3156b 100644 --- a/styles/patterns/_avatar.scss +++ b/styles/patterns/_avatar.scss @@ -14,4 +14,4 @@ .avatar__image { height: 50%; width: 50%; -} \ No newline at end of file +} diff --git a/styles/patterns/_badge.scss b/styles/patterns/_badge.scss index 9a19a0f..c45ff4b 100644 --- a/styles/patterns/_badge.scss +++ b/styles/patterns/_badge.scss @@ -12,4 +12,4 @@ border-radius: 9999px; height: 3rem; width: 3rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_box-selector.scss b/styles/patterns/_box-selector.scss index 0647c23..1a5a730 100644 --- a/styles/patterns/_box-selector.scss +++ b/styles/patterns/_box-selector.scss @@ -4,7 +4,7 @@ grid-template-columns: repeat(2, 1fr); column-gap: 0.5rem; row-gap: 0.5rem; - + height: 8rem; width: 8rem; } @@ -12,7 +12,7 @@ .box-selector { border: 1px solid #d1d5db; border-radius: 0.25rem; - padding: .5rem; + padding: 0.5rem; } .box-selector--selected { @@ -32,4 +32,4 @@ background-position: center center; background-repeat: no-repeat; } -} \ No newline at end of file +} diff --git a/styles/patterns/_breadcrumb.scss b/styles/patterns/_breadcrumb.scss index dfac1f9..076a8aa 100644 --- a/styles/patterns/_breadcrumb.scss +++ b/styles/patterns/_breadcrumb.scss @@ -10,11 +10,11 @@ } .breadcrumb__item:not(:last-child)::after { - /* Absolute position */ + /* Absolute position */ position: absolute; right: 0; top: 0; transform: translate(0.5rem, 0px); - content: '/'; -} \ No newline at end of file + content: '/'; +} diff --git a/styles/patterns/_button-with-icon.scss b/styles/patterns/_button-with-icon.scss index 199919b..76afe79 100644 --- a/styles/patterns/_button-with-icon.scss +++ b/styles/patterns/_button-with-icon.scss @@ -8,11 +8,11 @@ /* Demo */ background: #fff; border: 1px solid #d1d5db; - border-radius: 0.25rem; + border-radius: 0.25rem; width: 8rem; } .button-with-icon__label { flex: 1; margin-left: 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_calendar.scss b/styles/patterns/_calendar.scss index bc27e31..c854924 100644 --- a/styles/patterns/_calendar.scss +++ b/styles/patterns/_calendar.scss @@ -24,10 +24,10 @@ color: #fff; } -.calendar__day:nth-child(7n+1) { +.calendar__day:nth-child(7n + 1) { border-left: 1px solid #d1d5db; } .calendar__day--disabled { - color: #e5e7eb; -} \ No newline at end of file + color: #e5e7eb; +} diff --git a/styles/patterns/_card-layout.scss b/styles/patterns/_card-layout.scss index 5bda22b..875a271 100644 --- a/styles/patterns/_card-layout.scss +++ b/styles/patterns/_card-layout.scss @@ -20,4 +20,4 @@ /* Demo */ margin: 0.25rem 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_card.scss b/styles/patterns/_card.scss index 273b565..552be0d 100644 --- a/styles/patterns/_card.scss +++ b/styles/patterns/_card.scss @@ -16,4 +16,4 @@ /* Take available height */ flex: 1; padding: 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_centering.scss b/styles/patterns/_centering.scss index e7cb5b3..9ba12e0 100644 --- a/styles/patterns/_centering.scss +++ b/styles/patterns/_centering.scss @@ -6,4 +6,4 @@ /* Demo */ flex-direction: column; width: 6rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_circular-navigation.scss b/styles/patterns/_circular-navigation.scss index 9b7670c..952db22 100644 --- a/styles/patterns/_circular-navigation.scss +++ b/styles/patterns/_circular-navigation.scss @@ -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; } diff --git a/styles/patterns/_color-swatch.scss b/styles/patterns/_color-swatch.scss index 39074ee..b36f9c6 100644 --- a/styles/patterns/_color-swatch.scss +++ b/styles/patterns/_color-swatch.scss @@ -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); -} \ No newline at end of file + background-color: rgba(0, 0, 0, 0.6); +} diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss index 2160819..3a210cf 100644 --- a/styles/patterns/_concave-corners.scss +++ b/styles/patterns/_concave-corners.scss @@ -53,4 +53,4 @@ /* Border radius */ border-radius: 1rem 0 0 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_cookie-banner.scss b/styles/patterns/_cookie-banner.scss index b694eb5..0ef2011 100644 --- a/styles/patterns/_cookie-banner.scss +++ b/styles/patterns/_cookie-banner.scss @@ -9,9 +9,9 @@ display: flex; } -.cookie-banner__content { +.cookie-banner__content { border-top: 1px solid #d1d5db; /* Take available width */ flex: 1; padding: 0 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_corner-ribbon.scss b/styles/patterns/_corner-ribbon.scss index 8414fce..7a17ae2 100644 --- a/styles/patterns/_corner-ribbon.scss +++ b/styles/patterns/_corner-ribbon.scss @@ -38,4 +38,4 @@ /* Centerize the text content */ text-align: center; -} \ No newline at end of file +} diff --git a/styles/patterns/_curved-background.scss b/styles/patterns/_curved-background.scss index 4f7b6c5..e7c351e 100644 --- a/styles/patterns/_curved-background.scss +++ b/styles/patterns/_curved-background.scss @@ -11,4 +11,4 @@ height: 50%; width: 100%; -} \ No newline at end of file +} diff --git a/styles/patterns/_custom-checkbox-button.scss b/styles/patterns/_custom-checkbox-button.scss index db52b0a..d9f8a25 100644 --- a/styles/patterns/_custom-checkbox-button.scss +++ b/styles/patterns/_custom-checkbox-button.scss @@ -35,4 +35,4 @@ .custom-checkbox-button__checkbox--selected { /* For selected checkbox */ background-color: #3b82f6; -} \ No newline at end of file +} diff --git a/styles/patterns/_custom-radio-button.scss b/styles/patterns/_custom-radio-button.scss index 7a9ba29..ced5ac0 100644 --- a/styles/patterns/_custom-radio-button.scss +++ b/styles/patterns/_custom-radio-button.scss @@ -39,4 +39,4 @@ .custom-radio-button__radio--selected { /* For selected radio */ background-color: #3b82f6; -} \ No newline at end of file +} diff --git a/styles/patterns/_diagonal-section.scss b/styles/patterns/_diagonal-section.scss index 67df6b1..b09028c 100644 --- a/styles/patterns/_diagonal-section.scss +++ b/styles/patterns/_diagonal-section.scss @@ -21,4 +21,4 @@ /* Background color */ background-color: #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_docked-at-corner.scss b/styles/patterns/_docked-at-corner.scss index 88f9a97..8f5ff10 100644 --- a/styles/patterns/_docked-at-corner.scss +++ b/styles/patterns/_docked-at-corner.scss @@ -22,4 +22,4 @@ /* Size */ height: 1rem; width: 1rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_dot-leader.scss b/styles/patterns/_dot-leader.scss index 9cd57e0..ed3da3d 100644 --- a/styles/patterns/_dot-leader.scss +++ b/styles/patterns/_dot-leader.scss @@ -16,4 +16,4 @@ /* Spacing */ margin: 0 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_drawer.scss b/styles/patterns/_drawer.scss index 580c7de..111492c 100644 --- a/styles/patterns/_drawer.scss +++ b/styles/patterns/_drawer.scss @@ -5,7 +5,7 @@ height: 100%; width: 100%; - display: flex; + display: flex; } .drawer__sidebar { @@ -18,4 +18,4 @@ /* Demo */ background: #4b5563; flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_drop-area.scss b/styles/patterns/_drop-area.scss index ea81c86..61d1b93 100644 --- a/styles/patterns/_drop-area.scss +++ b/styles/patterns/_drop-area.scss @@ -11,4 +11,4 @@ /* Border */ border: 0.25rem dashed #d1d5db; border-radius: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_drop-cap.scss b/styles/patterns/_drop-cap.scss index 1185366..2266e3b 100644 --- a/styles/patterns/_drop-cap.scss +++ b/styles/patterns/_drop-cap.scss @@ -15,4 +15,4 @@ /* Optional */ font-size: 2rem; font-weight: 700; -} \ No newline at end of file +} diff --git a/styles/patterns/_dropdown.scss b/styles/patterns/_dropdown.scss index f82df5c..8a5c7f2 100644 --- a/styles/patterns/_dropdown.scss +++ b/styles/patterns/_dropdown.scss @@ -50,4 +50,4 @@ /* Show the content when hover on the container */ .dropdown:hover .dropdown__content { display: block; -} \ No newline at end of file +} diff --git a/styles/patterns/_fading-long-section.scss b/styles/patterns/_fading-long-section.scss index 91059c6..2aec04d 100644 --- a/styles/patterns/_fading-long-section.scss +++ b/styles/patterns/_fading-long-section.scss @@ -24,4 +24,4 @@ /* Gradient background */ background: linear-gradient(rgba(255, 255, 255, 0.01), #fff); -} \ No newline at end of file +} diff --git a/styles/patterns/_feature-comparison.scss b/styles/patterns/_feature-comparison.scss index ac1e503..97d0d42 100644 --- a/styles/patterns/_feature-comparison.scss +++ b/styles/patterns/_feature-comparison.scss @@ -20,7 +20,7 @@ /* Center the content */ display: flex; justify-content: center; - + /* Demo */ width: 1.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_feature-list.scss b/styles/patterns/_feature-list.scss index a4d16d5..58c272b 100644 --- a/styles/patterns/_feature-list.scss +++ b/styles/patterns/_feature-list.scss @@ -17,4 +17,4 @@ .feature-list__desc { /* Take the remaining width */ flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_fixed-at-corner.scss b/styles/patterns/_fixed-at-corner.scss index 667b4b0..917c36c 100644 --- a/styles/patterns/_fixed-at-corner.scss +++ b/styles/patterns/_fixed-at-corner.scss @@ -29,4 +29,4 @@ .fixed-at-corner__corner--bl { bottom: 0; left: 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_fixed-at-side.scss b/styles/patterns/_fixed-at-side.scss index cdc8710..23e1c91 100644 --- a/styles/patterns/_fixed-at-side.scss +++ b/styles/patterns/_fixed-at-side.scss @@ -9,7 +9,7 @@ .fixed-at-side__side { height: 40%; - position: absolute; + position: absolute; top: 50%; transform: translate(0px, -50%); } @@ -18,4 +18,4 @@ } .fixed-at-side__side--r { right: 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss index 11c499c..2956f6c 100644 --- a/styles/patterns/_floating-label.scss +++ b/styles/patterns/_floating-label.scss @@ -35,4 +35,4 @@ placeholder of input isn't shown transition: all 200ms; padding: 0 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_folder-structure.scss b/styles/patterns/_folder-structure.scss index 2590240..6e69ea1 100644 --- a/styles/patterns/_folder-structure.scss +++ b/styles/patterns/_folder-structure.scss @@ -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 - ); -} \ No newline at end of file + height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); +} diff --git a/styles/patterns/_full-background.scss b/styles/patterns/_full-background.scss index 7a461b6..62f3e7c 100644 --- a/styles/patterns/_full-background.scss +++ b/styles/patterns/_full-background.scss @@ -10,4 +10,4 @@ width: 100%; background: url('/assets/full-background.jpeg') center center / cover no-repeat; -} \ No newline at end of file +} diff --git a/styles/patterns/_holy-grail.scss b/styles/patterns/_holy-grail.scss index 9a44f47..a02f064 100644 --- a/styles/patterns/_holy-grail.scss +++ b/styles/patterns/_holy-grail.scss @@ -1,7 +1,7 @@ .holy-grail { display: flex; flex-direction: column; - + /* Demo */ border: 1px solid #d1d5db; border-radius: 0.25rem; @@ -40,4 +40,4 @@ .holy-grail__right { width: 20%; -} \ No newline at end of file +} diff --git a/styles/patterns/_indeterminate-progress-bar.scss b/styles/patterns/_indeterminate-progress-bar.scss new file mode 100644 index 0000000..58359c0 --- /dev/null +++ b/styles/patterns/_indeterminate-progress-bar.scss @@ -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%; + } +} diff --git a/styles/patterns/_initial-avatar.scss b/styles/patterns/_initial-avatar.scss index 075e68f..91e73fa 100644 --- a/styles/patterns/_initial-avatar.scss +++ b/styles/patterns/_initial-avatar.scss @@ -12,4 +12,4 @@ border-radius: 50%; height: 3rem; width: 3rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_input-addon.scss b/styles/patterns/_input-addon.scss index 0483922..ced392c 100644 --- a/styles/patterns/_input-addon.scss +++ b/styles/patterns/_input-addon.scss @@ -33,4 +33,4 @@ } .input-addon__addon--appended { border-left: 1px solid #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_keyboard-shortcut.scss b/styles/patterns/_keyboard-shortcut.scss index feed3de..80a485b 100644 --- a/styles/patterns/_keyboard-shortcut.scss +++ b/styles/patterns/_keyboard-shortcut.scss @@ -9,4 +9,4 @@ /* Spacing */ padding: 0.25rem 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_layered-card.scss b/styles/patterns/_layered-card.scss index 7dfcf6a..b991575 100644 --- a/styles/patterns/_layered-card.scss +++ b/styles/patterns/_layered-card.scss @@ -33,7 +33,7 @@ height: 100%; width: 100%; z-index: 1; - + border: 1px solid #d1d5db; - background: #FFF; -} \ No newline at end of file + background: #fff; +} diff --git a/styles/patterns/_lined-paper.scss b/styles/patterns/_lined-paper.scss index 1d6e20a..d4fbfb6 100644 --- a/styles/patterns/_lined-paper.scss +++ b/styles/patterns/_lined-paper.scss @@ -12,4 +12,4 @@ /* Demo */ overflow: hidden; -} \ No newline at end of file +} diff --git a/styles/patterns/_masonry-grid.scss b/styles/patterns/_masonry-grid.scss index c33501f..97444b6 100644 --- a/styles/patterns/_masonry-grid.scss +++ b/styles/patterns/_masonry-grid.scss @@ -16,4 +16,4 @@ /* Misc */ margin-bottom: 1rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_media-object.scss b/styles/patterns/_media-object.scss index 00cbabe..0156e2c 100644 --- a/styles/patterns/_media-object.scss +++ b/styles/patterns/_media-object.scss @@ -15,4 +15,4 @@ .media-object__content { /* Take the remaining width */ flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_mega-menu.scss b/styles/patterns/_mega-menu.scss index 504068e..772fc51 100644 --- a/styles/patterns/_mega-menu.scss +++ b/styles/patterns/_mega-menu.scss @@ -61,4 +61,4 @@ /* Show the mega menu when hovering the trigger item */ .mega-menu__trigger:hover .mega-menu__content { display: block; -} \ No newline at end of file +} diff --git a/styles/patterns/_modal.scss b/styles/patterns/_modal.scss index ec92d41..f886fb6 100644 --- a/styles/patterns/_modal.scss +++ b/styles/patterns/_modal.scss @@ -17,7 +17,7 @@ /* Border */ border-bottom: 1px solid #d1d5db; - + padding: 0.25rem 0.5rem; } @@ -30,9 +30,9 @@ display: flex; /* Push the buttons to the right */ justify-content: flex-end; - + /* Border */ border-top: 1px solid #d1d5db; padding: 0.25rem 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_nested-dropdowns.scss b/styles/patterns/_nested-dropdowns.scss index 7329ef1..016b1a2 100644 --- a/styles/patterns/_nested-dropdowns.scss +++ b/styles/patterns/_nested-dropdowns.scss @@ -11,7 +11,7 @@ .nested-dropdowns li { cursor: pointer; - + /* Spacing */ padding: 0.25rem; @@ -62,4 +62,4 @@ } .nested-dropdowns__arrow { margin-left: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_overlay-play-button.scss b/styles/patterns/_overlay-play-button.scss index e102cff..a7bc650 100644 --- a/styles/patterns/_overlay-play-button.scss +++ b/styles/patterns/_overlay-play-button.scss @@ -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; @@ -35,4 +35,4 @@ align-items: center; display: flex; justify-content: center; -} \ No newline at end of file +} diff --git a/styles/patterns/_pagination.scss b/styles/patterns/_pagination.scss index 61493d5..881352d 100644 --- a/styles/patterns/_pagination.scss +++ b/styles/patterns/_pagination.scss @@ -22,4 +22,4 @@ .pagination__item--active { background-color: #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_popover-arrow.scss b/styles/patterns/_popover-arrow.scss index e4e3ad7..766892d 100644 --- a/styles/patterns/_popover-arrow.scss +++ b/styles/patterns/_popover-arrow.scss @@ -1,3 +1,8 @@ +.pattern__cover .popover-arrow { + height: 8rem; + width: 8rem; +} + .popover-arrow { /* Border */ border: 1px solid #d1d5db; @@ -149,4 +154,4 @@ border-bottom: 1px solid #d1d5db; border-left: 1px solid #d1d5db; transform: translate(-50%, -50%) rotate(45deg); -} \ No newline at end of file +} diff --git a/styles/patterns/_presence-indicator.scss b/styles/patterns/_presence-indicator.scss index cd296b4..1814c60 100644 --- a/styles/patterns/_presence-indicator.scss +++ b/styles/patterns/_presence-indicator.scss @@ -22,4 +22,4 @@ /* Background color */ background-color: #22c55e; -} \ No newline at end of file +} diff --git a/styles/patterns/_previous-next-buttons.scss b/styles/patterns/_previous-next-buttons.scss index 6cc61c0..f1deae4 100644 --- a/styles/patterns/_previous-next-buttons.scss +++ b/styles/patterns/_previous-next-buttons.scss @@ -2,7 +2,7 @@ align-items: center; display: flex; justify-content: space-between; - + /* Demo */ width: 100%; } @@ -14,7 +14,7 @@ border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.25rem 0.5rem; - + align-items: center; display: flex; justify-content: center; diff --git a/styles/patterns/_price-tag.scss b/styles/patterns/_price-tag.scss index dee3ce6..65eb460 100644 --- a/styles/patterns/_price-tag.scss +++ b/styles/patterns/_price-tag.scss @@ -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; @@ -55,4 +55,4 @@ /* Size */ height: 0.5rem; width: 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_pricing-table.scss b/styles/patterns/_pricing-table.scss index 40d3c3e..8000f2b 100644 --- a/styles/patterns/_pricing-table.scss +++ b/styles/patterns/_pricing-table.scss @@ -8,4 +8,4 @@ border-radius: 0.25rem; margin: 0 0.25rem; padding: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_progress-bar.scss b/styles/patterns/_progress-bar.scss index 04f8be1..167289c 100644 --- a/styles/patterns/_progress-bar.scss +++ b/styles/patterns/_progress-bar.scss @@ -24,4 +24,4 @@ border-radius: 9999px; width: 40%; -} \ No newline at end of file +} diff --git a/styles/patterns/_property-list.scss b/styles/patterns/_property-list.scss index 4391a42..3b32130 100644 --- a/styles/patterns/_property-list.scss +++ b/styles/patterns/_property-list.scss @@ -17,4 +17,4 @@ } .property-list__value { margin-left: 0.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_questions-and-answers.scss b/styles/patterns/_questions-and-answers.scss index a4de586..c9c283b 100644 --- a/styles/patterns/_questions-and-answers.scss +++ b/styles/patterns/_questions-and-answers.scss @@ -26,4 +26,4 @@ } .questions-and-answers__item--expanded .questions-and-answers__content { display: block; -} \ No newline at end of file +} diff --git a/styles/patterns/_radial-progress-bar.scss b/styles/patterns/_radial-progress-bar.scss index 4220f5d..f7d74cd 100644 --- a/styles/patterns/_radial-progress-bar.scss +++ b/styles/patterns/_radial-progress-bar.scss @@ -1,5 +1,5 @@ :root { - --radial-progress-bar-size: 8rem; + --radial-progress-bar-size: 8rem; --radial-progress-bar-border-width: 0.75rem; } @@ -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,16 +65,11 @@ .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); /* If percentages is greater than or equals to 50 */ transform: rotate(180deg); -} \ No newline at end of file +} diff --git a/styles/patterns/_radio-button-group.scss b/styles/patterns/_radio-button-group.scss index f5fcf14..3e65c84 100644 --- a/styles/patterns/_radio-button-group.scss +++ b/styles/patterns/_radio-button-group.scss @@ -37,4 +37,4 @@ .radio-button-group__input { /* Hide it */ display: none; -} \ No newline at end of file +} diff --git a/styles/patterns/_radio-switch.scss b/styles/patterns/_radio-switch.scss index 1e2cf70..bd12ced 100644 --- a/styles/patterns/_radio-switch.scss +++ b/styles/patterns/_radio-switch.scss @@ -19,4 +19,4 @@ .radio-switch__input { display: none; -} \ No newline at end of file +} diff --git a/styles/patterns/_rating.scss b/styles/patterns/_rating.scss index c2fc9c2..a22419a 100644 --- a/styles/patterns/_rating.scss +++ b/styles/patterns/_rating.scss @@ -35,4 +35,4 @@ Note that we use \`flex-direction: row-reverse\` on the container /* Used to position the hover state */ position: relative; -} \ No newline at end of file +} diff --git a/styles/patterns/_resizable-element.scss b/styles/patterns/_resizable-element.scss index 9a1b1be..7966f9f 100644 --- a/styles/patterns/_resizable-element.scss +++ b/styles/patterns/_resizable-element.scss @@ -98,4 +98,4 @@ left: 0px; top: 50%; transform: translate(-50%, -50%); -} \ No newline at end of file +} diff --git a/styles/patterns/_ribbon.scss b/styles/patterns/_ribbon.scss index 6312f2e..99d7126 100644 --- a/styles/patterns/_ribbon.scss +++ b/styles/patterns/_ribbon.scss @@ -58,4 +58,4 @@ .ribbon__triangle--r { border-left-width: 0; right: 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_same-height-columns.scss b/styles/patterns/_same-height-columns.scss index 9e44a4c..83ed542 100644 --- a/styles/patterns/_same-height-columns.scss +++ b/styles/patterns/_same-height-columns.scss @@ -24,4 +24,4 @@ .same-height-columns__content { /* Take available height */ flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_search-box.scss b/styles/patterns/_search-box.scss index be22855..f739f2a 100644 --- a/styles/patterns/_search-box.scss +++ b/styles/patterns/_search-box.scss @@ -1,4 +1,4 @@ -.search-box { +.search-box { border: 1px solid #d1d5db; border-radius: 0.25rem; @@ -20,4 +20,4 @@ /* Demo */ width: 6rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_separator.scss b/styles/patterns/_separator.scss index b0d634a..dc3cc1f 100644 --- a/styles/patterns/_separator.scss +++ b/styles/patterns/_separator.scss @@ -31,4 +31,4 @@ border-bottom: 1px solid #d1d5db; height: 1px; width: 100%; -} \ No newline at end of file +} diff --git a/styles/patterns/_sidebar.scss b/styles/patterns/_sidebar.scss index bac0e62..c166012 100644 --- a/styles/patterns/_sidebar.scss +++ b/styles/patterns/_sidebar.scss @@ -24,4 +24,4 @@ /* Make it scrollable */ overflow: auto; -} \ No newline at end of file +} diff --git a/styles/patterns/_simple-grid.scss b/styles/patterns/_simple-grid.scss index fc55790..69aa8dc 100644 --- a/styles/patterns/_simple-grid.scss +++ b/styles/patterns/_simple-grid.scss @@ -29,4 +29,4 @@ .simple-grid__cell--fill { flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_slider.scss b/styles/patterns/_slider.scss index f10fdc4..c2ceae9 100644 --- a/styles/patterns/_slider.scss +++ b/styles/patterns/_slider.scss @@ -36,4 +36,4 @@ /* Colors */ background-color: #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_spin-button.scss b/styles/patterns/_spin-button.scss index dc591f9..c6e106f 100644 --- a/styles/patterns/_spin-button.scss +++ b/styles/patterns/_spin-button.scss @@ -31,4 +31,4 @@ /* Make buttons have the same height */ flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_split-navigation.scss b/styles/patterns/_split-navigation.scss index 489bafa..37ed7ac 100644 --- a/styles/patterns/_split-navigation.scss +++ b/styles/patterns/_split-navigation.scss @@ -24,4 +24,4 @@ /* Sticks to the right */ margin-left: auto; margin-right: 0; -} \ No newline at end of file +} diff --git a/styles/patterns/_split-screen.scss b/styles/patterns/_split-screen.scss index 2962e98..5e1faf0 100644 --- a/styles/patterns/_split-screen.scss +++ b/styles/patterns/_split-screen.scss @@ -19,4 +19,4 @@ .split-screen__half:first-child { border-right: 1px solid #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_stacked-cards.scss b/styles/patterns/_stacked-cards.scss index 34e8319..a42eae2 100644 --- a/styles/patterns/_stacked-cards.scss +++ b/styles/patterns/_stacked-cards.scss @@ -37,4 +37,4 @@ .stacked-cards__card--3rd { /* Rotate it. Change the number of degrees for the following cards */ transform: rotate(15deg); -} \ No newline at end of file +} diff --git a/styles/patterns/_stamp-border.scss b/styles/patterns/_stamp-border.scss index 22b622a..78bca1b 100644 --- a/styles/patterns/_stamp-border.scss +++ b/styles/patterns/_stamp-border.scss @@ -20,4 +20,4 @@ height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/styles/patterns/_status-light.scss b/styles/patterns/_status-light.scss index 2820678..045ed7e 100644 --- a/styles/patterns/_status-light.scss +++ b/styles/patterns/_status-light.scss @@ -25,4 +25,4 @@ .status-light__content { /* Take available width */ flex: 1; -} \ No newline at end of file +} diff --git a/styles/patterns/_stepper-input.scss b/styles/patterns/_stepper-input.scss index a075b38..94c5ad1 100644 --- a/styles/patterns/_stepper-input.scss +++ b/styles/patterns/_stepper-input.scss @@ -35,4 +35,4 @@ /* Take full size of its container */ height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/styles/patterns/_sticky-footer.scss b/styles/patterns/_sticky-footer.scss index 5a718f7..344c1ab 100644 --- a/styles/patterns/_sticky-footer.scss +++ b/styles/patterns/_sticky-footer.scss @@ -24,4 +24,4 @@ border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; padding: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_sticky-header.scss b/styles/patterns/_sticky-header.scss index 31b2cd1..e464f1c 100644 --- a/styles/patterns/_sticky-header.scss +++ b/styles/patterns/_sticky-header.scss @@ -14,4 +14,4 @@ /* Demo */ padding: 0.25rem; border-bottom: 1px solid #d1d5db; -} \ No newline at end of file +} diff --git a/styles/patterns/_sticky-sections.scss b/styles/patterns/_sticky-sections.scss index 9e2514c..340b1ba 100644 --- a/styles/patterns/_sticky-sections.scss +++ b/styles/patterns/_sticky-sections.scss @@ -27,4 +27,4 @@ } .sticky-sections__section:nth-child(4) { background-color: #6b7280; -} \ No newline at end of file +} diff --git a/styles/patterns/_sticky-table-column.scss b/styles/patterns/_sticky-table-column.scss index 615457e..5c8ea0c 100644 --- a/styles/patterns/_sticky-table-column.scss +++ b/styles/patterns/_sticky-table-column.scss @@ -24,4 +24,4 @@ z-index: 9999; padding: 0 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_sticky-table-headers.scss b/styles/patterns/_sticky-table-headers.scss index e9068b5..b6c9afd 100644 --- a/styles/patterns/_sticky-table-headers.scss +++ b/styles/patterns/_sticky-table-headers.scss @@ -24,4 +24,4 @@ /* Displayed on top of other rows when scrolling */ z-index: 9999; -} \ No newline at end of file +} diff --git a/styles/patterns/_teardrop.scss b/styles/patterns/_teardrop.scss index a747254..37dd69e 100644 --- a/styles/patterns/_teardrop.scss +++ b/styles/patterns/_teardrop.scss @@ -18,4 +18,4 @@ .teardrop__content { transform: rotate(-45deg); -} \ No newline at end of file +} diff --git a/styles/patterns/_three-dimensions-card.scss b/styles/patterns/_three-dimensions-card.scss index d237c1d..8267a2a 100644 --- a/styles/patterns/_three-dimensions-card.scss +++ b/styles/patterns/_three-dimensions-card.scss @@ -2,7 +2,7 @@ --three-dimensions-card-left-side-width: 1rem; } -.three-dimensions-card { +.three-dimensions-card { position: relative; /* Demo */ @@ -43,4 +43,4 @@ /* Size */ height: var(--three-dimensions-card-left-side-width); width: 100%; -} \ No newline at end of file +} diff --git a/styles/patterns/_timeline.scss b/styles/patterns/_timeline.scss index 98bb0d5..4564000 100644 --- a/styles/patterns/_timeline.scss +++ b/styles/patterns/_timeline.scss @@ -56,4 +56,4 @@ .timeline__desc { /* Make it align with the title */ margin-left: 2rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_toggle-password-visibility.scss b/styles/patterns/_toggle-password-visibility.scss index eeaa1f1..5304361 100644 --- a/styles/patterns/_toggle-password-visibility.scss +++ b/styles/patterns/_toggle-password-visibility.scss @@ -38,4 +38,4 @@ stroke-linejoin: round; stroke-width: 1; width: 1.5rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_tooltip.scss b/styles/patterns/_tooltip.scss index 93d1bc8..6de880d 100644 --- a/styles/patterns/_tooltip.scss +++ b/styles/patterns/_tooltip.scss @@ -63,4 +63,4 @@ /* Demo */ width: 6rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_tree-diagram.scss b/styles/patterns/_tree-diagram.scss index 02960f4..a6eec87 100644 --- a/styles/patterns/_tree-diagram.scss +++ b/styles/patterns/_tree-diagram.scss @@ -69,4 +69,4 @@ /* Add a root item if you want */ li.tree-diagram__root::before { border-right: none; -} \ No newline at end of file +} diff --git a/styles/patterns/_triangle-buttons.scss b/styles/patterns/_triangle-buttons.scss index a082671..bf967b4 100644 --- a/styles/patterns/_triangle-buttons.scss +++ b/styles/patterns/_triangle-buttons.scss @@ -54,4 +54,4 @@ left: 0; top: 50%; transform: translate(0%, -50%); -} \ No newline at end of file +} diff --git a/styles/patterns/_validation-icon.scss b/styles/patterns/_validation-icon.scss index 81c3cdb..7c64871 100644 --- a/styles/patterns/_validation-icon.scss +++ b/styles/patterns/_validation-icon.scss @@ -37,4 +37,4 @@ stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; -} \ No newline at end of file +} diff --git a/styles/patterns/_video-background.scss b/styles/patterns/_video-background.scss index 821a1a9..2acc2c4 100644 --- a/styles/patterns/_video-background.scss +++ b/styles/patterns/_video-background.scss @@ -43,4 +43,4 @@ display: flex; flex-direction: column; justify-content: center; -} \ No newline at end of file +} diff --git a/styles/patterns/_voting.scss b/styles/patterns/_voting.scss index 4c2738e..025ef93 100644 --- a/styles/patterns/_voting.scss +++ b/styles/patterns/_voting.scss @@ -53,4 +53,4 @@ /* Spacing */ padding: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_watermark.scss b/styles/patterns/_watermark.scss index b06eb1a..158600a 100644 --- a/styles/patterns/_watermark.scss +++ b/styles/patterns/_watermark.scss @@ -39,4 +39,4 @@ /* Disable the selection */ user-select: none; -} \ No newline at end of file +} diff --git a/styles/patterns/_wizard.scss b/styles/patterns/_wizard.scss index f644640..1652de7 100644 --- a/styles/patterns/_wizard.scss +++ b/styles/patterns/_wizard.scss @@ -42,4 +42,4 @@ border-radius: 9999px; height: 1rem; width: 1rem; -} \ No newline at end of file +} diff --git a/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss index 9383d74..c7d8ec5 100644 --- a/styles/patterns/_zigzag-timeline.scss +++ b/styles/patterns/_zigzag-timeline.scss @@ -44,4 +44,4 @@ .zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { right: 0; transform: translate(50%, -50%); -} \ No newline at end of file +} diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss index 82bbf1f..44700dd 100644 --- a/styles/placeholders/_circle.scss +++ b/styles/placeholders/_circle.scss @@ -12,4 +12,4 @@ } .circle--lg { --circle-size: 4rem; -} \ No newline at end of file +} diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss index 5d5eefe..fc272fe 100644 --- a/styles/placeholders/_line.scss +++ b/styles/placeholders/_line.scss @@ -50,4 +50,4 @@ } .lines .line { margin-bottom: 0.25rem; -} \ No newline at end of file +} diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss index 32b88ba..0c96632 100644 --- a/styles/placeholders/_rectangle.scss +++ b/styles/placeholders/_rectangle.scss @@ -53,4 +53,4 @@ &.rectangle--lg { width: 4rem; } -} \ No newline at end of file +} diff --git a/styles/placeholders/_square.scss b/styles/placeholders/_square.scss index b079d9e..d5ce2c2 100644 --- a/styles/placeholders/_square.scss +++ b/styles/placeholders/_square.scss @@ -11,4 +11,4 @@ } .square--lg { --square-size: 4rem; -} \ No newline at end of file +} diff --git a/styles/placeholders/_triangle.scss b/styles/placeholders/_triangle.scss index 179a6b0..72cddd1 100644 --- a/styles/placeholders/_triangle.scss +++ b/styles/placeholders/_triangle.scss @@ -27,7 +27,7 @@ border-color: transparent transparent #d1d5db transparent; border-width: 0 0 var(--triangle-size) var(--triangle-size); } -.triangle--bl { +.triangle--bl { border-color: transparent transparent transparent #d1d5db; border-width: var(--triangle-size) 0 0 var(--triangle-size); } @@ -43,4 +43,4 @@ } .triangle--lg { --triangle-size: 4rem; -} \ No newline at end of file +}
      - ... - ...