From 457383298e422069baa053ede5f6fbe025e21587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Tue, 25 Oct 2022 00:58:54 +0200 Subject: [PATCH] New `badges` page (#1331) --- src/pages/_data/menu.yml | 4 + src/pages/_includes/layout/navbar-menu.html | 4 +- src/pages/badges.html | 97 +++++++++++++++++++++ src/scss/_core.scss | 1 + src/scss/layout/_animations.scss | 62 +++++++++++++ src/scss/mixins/_mixins.scss | 10 +++ src/scss/ui/_avatars.scss | 13 +-- src/scss/ui/_badges.scss | 35 ++++++-- src/scss/ui/_buttons.scss | 9 +- src/scss/ui/_icons.scss | 83 ++++++------------ src/scss/ui/_loaders.scss | 12 +-- 11 files changed, 233 insertions(+), 97 deletions(-) create mode 100644 src/pages/badges.html create mode 100644 src/scss/layout/_animations.scss diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 1568113db..877f600be 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -17,6 +17,10 @@ base: blank: title: Blank page url: blank.html + badges: + url: badges.html + title: Badges + badge: New buttons: url: buttons.html title: Buttons diff --git a/src/pages/_includes/layout/navbar-menu.html b/src/pages/_includes/layout/navbar-menu.html index 512063ed7..adaa668d0 100644 --- a/src/pages/_includes/layout/navbar-menu.html +++ b/src/pages/_includes/layout/navbar-menu.html @@ -57,7 +57,7 @@ {{ level-2[1].title }} {% if level-2[1].badge %} - {{ level-2[1].badge }} + {{ level-2[1].badge }} {% endif %} @@ -68,7 +68,7 @@ {{ level-3[1].title }} {% if level-3[1].badge %} - {{ level-3[1].badge }} + {{ level-3[1].badge }} {% endif %} {% endfor %} diff --git a/src/pages/badges.html b/src/pages/badges.html new file mode 100644 index 000000000..418da3685 --- /dev/null +++ b/src/pages/badges.html @@ -0,0 +1,97 @@ +--- +title: Badges +page-header: Badges +menu: base.badges +--- + +
+
+
+
+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+
+
+
+
+
+
+
+
+
+ {% for color in site.colors %} + {{ color[1].title }} + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in site.colors %} + {{ color[1].title }} + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in site.colors %} + {{ color[1].title }} + {% endfor %} +
+
+
+
+
+
+
+ {% include ui/dropdown-menu.html show=true badge=true arrow=true %} +
+
+
+
+
+
+
+ {% for color in site.colors %} + + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in site.colors %} + + {% endfor %} +
+
+
+
+
+
+
+
+ {% for color in site.colors %} + + {% endfor %} +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 9bfa6e4f8..fae98573e 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -4,6 +4,7 @@ @import "fonts/webfonts"; @import "layout/root"; +@import "layout/animations"; @import "layout/core"; @import "layout/navbar"; @import "layout/page"; diff --git a/src/scss/layout/_animations.scss b/src/scss/layout/_animations.scss new file mode 100644 index 000000000..3c72a0d9c --- /dev/null +++ b/src/scss/layout/_animations.scss @@ -0,0 +1,62 @@ +@keyframes pulse { + from { + opacity: 1; + transform: scale3d(.8, .8, .8) + } + + 50% { + transform: scale3d(1, 1, 1); + opacity: 1 + } + + to { + opacity: 1; + transform: scale3d(.8, .8, .8) + } +} + +@keyframes tada { + 0% { + transform: scale3d(1, 1, 1) + } + + 10%, 5% { + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg) + } + + 15%, 25%, 35%, 45% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg) + } + + 20%, 30%, 40% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg) + } + + 50% { + transform: scale3d(1, 1, 1) + } +} + +@keyframes rotate-360 { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes blink { + from { + opacity: 0; + } + + 50% { + opacity: 1; + } + + to { + opacity: 0; + } +} \ No newline at end of file diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss index 460271b51..0523703bb 100644 --- a/src/scss/mixins/_mixins.scss +++ b/src/scss/mixins/_mixins.scss @@ -101,4 +101,14 @@ --#{$prefix}btn-disabled-border-color: transparent; --#{$prefix}gradient: none; --#{$prefix}btn-box-shadow: none; +} + +// +// Elements list +// +@mixin elements-list($gap: .5rem) { + --#{$prefix}list-gap: #{$gap}; + display: flex; + flex-wrap: wrap; + gap: var(--#{$prefix}list-gap); } \ No newline at end of file diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss index 09500a419..dfaddafd7 100644 --- a/src/scss/ui/_avatars.scss +++ b/src/scss/ui/_avatars.scss @@ -52,18 +52,7 @@ .avatar-list { - display: inline-flex; - padding: 0; - margin: 0 0 -.5rem; - flex-wrap: wrap; - - .avatar { - margin-bottom: .5rem; - - &:not(:last-child) { - margin-right: .5rem; - } - } + @include elements-list; a.avatar { &:hover { diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss index 7883ee890..2a0b0cde5 100644 --- a/src/scss/ui/_badges.scss +++ b/src/scss/ui/_badges.scss @@ -40,18 +40,39 @@ } } -.badge-sm { - font-size: $h6-font-size; - line-height: $h6-line-height; - padding: 0 .25rem; -} - -// bordered +// +// Outline badge +// .badge-outline { background-color: transparent; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor; } +// +// Pill badge +// .badge-pill { border-radius: $border-radius-pill; +} + +// +// Badges list +// +.badges-list { + @include elements-list; +} + +// +// Notification badge +// +.badge-notification { + position: absolute !important; + top: 0 !important; + right: 0 !important; + transform: translate(50%, -50%); + z-index: 1; +} + +.badge-blink { + animation: blink 2s infinite; } \ No newline at end of file diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 8f55ad2a9..252e8e470 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -150,14 +150,7 @@ // Button list // .btn-list { - display: flex; - flex-wrap: wrap; - margin-bottom: -.5rem !important; - margin-right: -.5rem; - - > * { - margin: 0 .5rem .5rem 0 !important; - } + @include elements-list; } // diff --git a/src/scss/ui/_icons.scss b/src/scss/ui/_icons.scss index 62eab7bf4..f236afc2c 100644 --- a/src/scss/ui/_icons.scss +++ b/src/scss/ui/_icons.scss @@ -1,7 +1,11 @@ +// +// Icon component +// .icon { - width: $font-size-base * $line-height-base; - height: $font-size-base * $line-height-base; - font-size: $font-size-base * $line-height-base; + --#{$prefix}icon-size: #{$font-size-base * $line-height-base}; + width: var(--#{$prefix}icon-size); + height: var(--#{$prefix}icon-size); + font-size: var(--#{$prefix}icon-size); vertical-align: bottom; @if $icon-stroke-width { @@ -13,91 +17,56 @@ } } +// +// Inline icon +// .icon-inline { - width: 1rem; - height: 1rem; - font-size: 1rem; + --#{$prefix}icon-size: 1rem; vertical-align: -.2rem; } +// +// Filled icon +// .icon-filled { fill: currentColor; } +// +// Icon size +// .icon-sm { - width: 1rem; - height: 1rem; + --#{$prefix}icon-size: 1rem; stroke-width: 1; } .icon-md { - width: 2.5rem; - height: 2.5rem; + --#{$prefix}icon-size: 2.5rem; stroke-width: 1; } .icon-lg { - width: 3.5rem; - height: 3.5rem; + --#{$prefix}icon-size: 3.5rem; stroke-width: 1; } -@keyframes icon-pulse { - from { - opacity: 1; - transform: scale3d(.8, .8, .8) - } - 50% { - transform: scale3d(1, 1, 1); - opacity: 1 - } - to { - opacity: 1; - transform: scale3d(.8, .8, .8) - } -} - +// +// Icons animation +// .icon-pulse { transition: all .15s ease 0s; - animation: icon-pulse 2s ease infinite; + animation: pulse 2s ease infinite; animation-fill-mode: both } -@keyframes icon-tada { - 0% { - transform: scale3d(1, 1, 1) - } - 10%, 5% { - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg) - } - 15%, 25%, 35%, 45% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg) - } - 20%, 30%, 40% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg) - } - 50% { - transform: scale3d(1, 1, 1) - } -} - .icon-tada { transition: all .15s ease 0s; - animation: icon-tada 3s ease infinite; + animation: tada 3s ease infinite; animation-fill-mode: both } -@keyframes icon-rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - .icon-rotate { transition: all .15s ease 0s; - animation: icon-rotate 3s linear infinite; + animation: rotate-360 3s linear infinite; animation-fill-mode: both } \ No newline at end of file diff --git a/src/scss/ui/_loaders.scss b/src/scss/ui/_loaders.scss index 619e7592a..341d90f07 100644 --- a/src/scss/ui/_loaders.scss +++ b/src/scss/ui/_loaders.scss @@ -1,13 +1,3 @@ -@keyframes loader { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - .loader { position: relative; display: block; @@ -29,7 +19,7 @@ border-left-color: currentColor; border-radius: $border-radius-pill; - animation: loader .6s linear; + animation: rotate-360 .6s linear; animation-iteration-count: infinite; } }