From 9951fe9b1d6b48fe3e24aa3406f7d3688e79be73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 7 Jul 2025 22:56:08 +0200 Subject: [PATCH] Enhance button and hover animations (#2401) --- .changeset/forty-pigs-sparkle.md | 5 + core/scss/_core.scss | 1 + core/scss/_variables.scss | 126 ++++++++++------- core/scss/layout/_animations.scss | 69 ++++++--- core/scss/ui/_buttons.scss | 109 ++++++++++++--- core/scss/utils/_hover.scss | 47 +++++++ docs/content/ui/components/buttons.md | 169 +++++++++++++++++++++++ preview/pages/buttons.html | 134 ++++++++++++++---- shared/data/sri.json | 12 +- shared/includes/parts/buttons-table.html | 34 ----- 10 files changed, 558 insertions(+), 148 deletions(-) create mode 100644 .changeset/forty-pigs-sparkle.md create mode 100644 core/scss/utils/_hover.scss delete mode 100644 shared/includes/parts/buttons-table.html diff --git a/.changeset/forty-pigs-sparkle.md b/.changeset/forty-pigs-sparkle.md new file mode 100644 index 000000000..8fe029786 --- /dev/null +++ b/.changeset/forty-pigs-sparkle.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Enhance button and hover animations diff --git a/core/scss/_core.scss b/core/scss/_core.scss index ea1e6f872..28324f971 100644 --- a/core/scss/_core.scss +++ b/core/scss/_core.scss @@ -76,6 +76,7 @@ @import "utils/opacity"; @import "utils/shadow"; @import "utils/text"; +@import "utils/hover"; @import "debug"; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 6e1bfbafb..919ce1be3 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -26,7 +26,7 @@ $font-icons: () !default; $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default; $font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default; $font-family-serif: "Georgia", "Times New Roman", times, serif !default; -$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default; +$font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default; //Icons $icon-stroke-width: 1.5 !default; @@ -52,9 +52,9 @@ $line-height-700: 3rem !default; $font-size-base: 0.875rem !default; -$spacing-wide: .04em !default; +$spacing-wide: 0.04em !default; $spacing-normal: 0 !default; -$spacing-tight: -.04em !default; +$spacing-tight: -0.04em !default; $body-letter-spacing: 0 !default; @@ -68,12 +68,12 @@ $headings-font-weight: var(--#{$prefix}font-weight-bold) !default; $headings-margin-bottom: var(--#{$prefix}spacer) !default; $font-weights: ( - 'light': $font-weight-light, - 'normal': $font-weight-normal, - 'medium': $font-weight-medium, - 'bold': $font-weight-bold, - 'black': $font-weight-black, - 'headings': $headings-font-weight, + "light": $font-weight-light, + "normal": $font-weight-normal, + "medium": $font-weight-medium, + "bold": $font-weight-bold, + "black": $font-weight-black, + "headings": $headings-font-weight, ) !default; $line-height-base: divide(1.25rem, $font-size-base) !default; @@ -99,8 +99,8 @@ $h5-line-height: 1rem !default; $h6-font-size: 0.625rem !default; $h6-line-height: 1rem !default; -$font-size-reative-xs: .71428571em !default; -$font-size-reative-sm: .85714285em !default; +$font-size-reative-xs: 0.71428571em !default; +$font-size-reative-sm: 0.85714285em !default; $font-size-reative-md: 1em !default; $font-sizes: ( @@ -146,7 +146,7 @@ $border-light-opacity: 0.08 !default; $border-dark-opacity: 0.24 !default; $border-active-opacity: 0.58 !default; -$gray-50: #f9fafb !default; +$gray-50: #f9fafb !default; $gray-100: #f3f4f6 !default; $gray-200: #e5e7eb !default; $gray-300: #d1d5db !default; @@ -210,7 +210,7 @@ $active-border-color: var(--#{$prefix}primary) !default; $hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default; $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default; -$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default; +$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default; $primary: $blue !default; $secondary: $text-secondary !default; @@ -341,7 +341,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default; // Avatars $avatar-size: 2.5rem !default; -$avatar-status-size: .75rem !default; +$avatar-status-size: 0.75rem !default; $avatar-font-size: 1rem !default; $avatar-icon-size: 1.5rem !default; $avatar-brand-size: 1.25rem !default; @@ -349,52 +349,52 @@ $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default; $avatar-sizes: ( "xxs": ( size: 1rem, - font-size: .5rem, - icon-size: .5rem, - status-size: .25rem, - brand-size: .5rem + font-size: 0.5rem, + icon-size: 0.5rem, + status-size: 0.25rem, + brand-size: 0.5rem, ), "xs": ( size: 1.25rem, font-size: $h6-font-size, - icon-size: .75rem, - status-size: .375rem, - brand-size: .75rem + icon-size: 0.75rem, + status-size: 0.375rem, + brand-size: 0.75rem, ), "sm": ( size: 2rem, font-size: $h5-font-size, icon-size: 1.5rem, - status-size: .5rem, - brand-size: 1rem + status-size: 0.5rem, + brand-size: 1rem, ), "md": ( size: 2.5rem, font-size: $h4-font-size, icon-size: 1.5rem, - status-size: .75rem, - brand-size: 1.25rem + status-size: 0.75rem, + brand-size: 1.25rem, ), "lg": ( size: 3rem, font-size: $h2-font-size, icon-size: 2rem, - status-size: .75rem, - brand-size: 1.25rem + status-size: 0.75rem, + brand-size: 1.25rem, ), "xl": ( size: 5rem, font-size: 2rem, icon-size: 3rem, status-size: 1rem, - brand-size: 1.25rem + brand-size: 1.25rem, ), "2xl": ( size: 7rem, font-size: 3rem, icon-size: 5rem, status-size: 1rem, - brand-size: 2rem + brand-size: 2rem, ), ) !default; $avatar-border-radius: var(--#{$prefix}border-radius) !default; @@ -586,41 +586,71 @@ $badge-color: var(--#{$prefix}secondary) !default; $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default; // Buttons -$input-btn-line-height: $line-height-base !default; -$input-btn-font-size: $font-size-base !default; -$input-btn-font-family: var(--#{$prefix}body-font-face) !default; -$input-btn-padding-y: 0.5rem - 0.0625rem !default; -$input-btn-icon-size: $icon-size !default; +$input-btn-border-width: var(--#{$prefix}border-width) !default; +$input-btn-font-family: var(--#{$prefix}body-font-family) !default; +$input-btn-focus-width: 0.25rem !default; +$input-btn-padding-y-sm: 0.3125rem !default; +$input-btn-padding-x-sm: 0.5rem !default; $input-btn-font-size-sm: $h5-font-size !default; -$input-btn-padding-x-sm: 0.25rem !default; -$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default; $input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default; $input-btn-icon-size-sm: 1rem !default; -$input-btn-font-size-lg: $h2-font-size !default; -$input-btn-padding-x-lg: 1.5rem !default; -$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default; -$input-btn-line-height-lg: divide(2rem, $input-btn-font-size-lg) !default; -$input-btn-icon-size-lg: 2rem !default; +$input-btn-padding-y: 0.5625rem !default; +$input-btn-padding-x: 1rem !default; +$input-btn-line-height: 1.25rem !default; +$input-btn-font-size: $font-size-base !default; +$input-btn-icon-size: $icon-size !default; + +$input-btn-padding-y-lg: 0.6875rem !default; +$input-btn-padding-x-lg: 1.5rem !default; +$input-btn-line-height-lg: 1.5rem !default; +$input-btn-font-size-lg: $h3-font-size !default; +$input-btn-icon-size-lg: 1.5rem !default; + +$input-btn-padding-y-xl: 0.6875rem !default; +$input-btn-padding-x-xl: 2rem !default; +$input-btn-font-size-xl: $h1-font-size !default; +$input-btn-line-height-xl: divide(2rem, $input-btn-font-size-lg) !default; +$input-btn-icon-size-xl: 2rem !default; -$input-btn-focus-width: 0.25rem !default; // Inputs $input-height: null !default; $input-height-sm: null !default; $input-height-lg: null !default; $input-border-radius: var(--#{$prefix}border-radius) !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; $input-color: var(--#{$prefix}body-color) !default; $input-focus-color: var(--#{$prefix}body-color) !default; $input-box-shadow: var(--#{$prefix}shadow-input) !default; +$input-border-width: $input-btn-border-width !default; +$input-line-height: $input-btn-line-height !default; +$input-height-border: calc(#{$input-border-width} * 2) !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; + +$input-height-inner: add($input-line-height, calc($input-padding-y * 2)) !default; +$input-height-inner-half: add($input-line-height, $input-padding-y) !default; +$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default; + +$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default; +$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default; +$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default; + // Buttons $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default; $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; -$btn-disabled-opacity: .4 !default; -$btn-padding-x: 1rem !default; +$btn-disabled-opacity: 0.4 !default; $btn-font-weight: var(--#{$prefix}font-weight-medium) !default; $btn-border-color: var(--#{$prefix}border-color) !default; $btn-border-radius: var(--#{$prefix}border-radius) !default; @@ -811,7 +841,7 @@ $navbar-toggler-focus-width: 0 !default; $navbar-overlap-height: 9rem !default; $navbar-nav-link-padding-x: $nav-link-padding-x !default; -$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default; +$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default; $navbar-active-border-color: var(--#{$prefix}primary) !default; @@ -828,8 +858,8 @@ $popover-bg: var(--#{$prefix}bg-surface) !default; $popover-header-bg: transparent !default; $popover-border-color: var(--#{$prefix}border-color) !default; $popover-body-color: inherit !default; -$popover-body-padding-x: .5rem !default; -$popover-body-padding-y: .5rem !default; +$popover-body-padding-x: 0.5rem !default; +$popover-body-padding-y: 0.5rem !default; $popover-box-shadow: var(--#{$prefix}shadow-lg) !default; // Footer @@ -896,7 +926,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml, .btn { +.btn-sm, +.btn-group-sm > .btn { --#{$prefix}btn-line-height: #{$input-btn-line-height-sm}; --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm}; } -.btn-lg, .btn-group-lg > .btn { +.btn-lg, +.btn-group-lg > .btn { --#{$prefix}btn-line-height: #{$input-btn-line-height-lg}; --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg}; } +.btn-xl, +.btn-group-xl > .btn { + --#{$prefix}btn-line-height: #{$input-btn-line-height-xl}; + --#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl}; + --#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl}; + --#{$prefix}btn-padding-x: #{$input-btn-padding-x-xl}; + --#{$prefix}btn-font-size: #{$input-btn-font-size-xl}; +} + // // Button shapes // @@ -161,9 +178,8 @@ // // Icon button // -.btn-icon { - min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); - min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); +.btn-icon, +.btn-action { padding-left: 0; padding-right: 0; @@ -216,7 +232,7 @@ height: var(--#{$prefix}btn-icon-size); left: calc(50% - var(--#{$prefix}btn-icon-size) / 2); top: calc(50% - var(--#{$prefix}btn-icon-size) / 2); - animation: spinner-border .75s linear infinite; + animation: spinner-border 0.75s linear infinite; } } @@ -225,14 +241,7 @@ // .btn-action { --#{$prefix}border-color: transparent; - padding: 0; - border: 0; color: var(--#{$prefix}secondary); - display: inline-flex; - width: 2rem; - height: 2rem; - align-items: center; - justify-content: center; border-radius: var(--#{$prefix}border-radius); background: transparent; box-shadow: none; @@ -250,6 +259,7 @@ &.show { color: var(--#{$prefix}body-color); background: var(--#{$prefix}active-bg); + border-color: transparent; } &.show { @@ -259,4 +269,65 @@ .btn-actions { display: flex; -} \ No newline at end of file +} + +.btn-animate-icon { + .icon { + transition: transform 0.3s ease; + } + + &:hover, + &:focus-visible { + .icon { + transform: translateX(4px); + } + } + + &.btn-animate-icon-rotate { + &:hover, + &:focus-visible { + .icon { + transform: rotate(90deg); + } + } + } + + &.btn-animate-icon-move-start { + &:hover, + &:focus-visible { + .icon { + transform: translateX(-4px); + } + } + } + + &.btn-animate-icon-pulse { + &:hover, + &:focus-visible { + .icon { + transform: none; + animation: pulse 0.9s; + } + } + } + + &.btn-animate-icon-shake { + &:hover, + &:focus-visible { + .icon { + transform: none; + animation: shake 0.9s; + } + } + } + + &.btn-animate-icon-tada { + &:hover, + &:focus-visible { + .icon { + transform: none; + animation: tada 0.9s; + } + } + } +} diff --git a/core/scss/utils/_hover.scss b/core/scss/utils/_hover.scss new file mode 100644 index 000000000..866aa054e --- /dev/null +++ b/core/scss/utils/_hover.scss @@ -0,0 +1,47 @@ +%hover-animation { + transition: transform 0.3s ease; + + &:hover { + will-change: transform; + } +} + +.hover-elevate-up { + @extend %hover-animation; + + &:hover { + transform: translateY(-4px); + } +} + +.hover-elevate-down { + @extend %hover-animation; + + &:hover { + transform: translateY(4px); + } +} + +.hover-scale { + @extend %hover-animation; + + &:hover { + transform: scale(1.1); + } +} + +.hover-rotate-end { + @extend %hover-animation; + + &:hover { + transform: rotate(4deg); + } +} + +.hover-rotate-start { + @extend %hover-animation; + + &:hover { + transform: rotate(-4deg); + } +} diff --git a/docs/content/ui/components/buttons.md b/docs/content/ui/components/buttons.md index fbaee53c9..9c0cb0a47 100644 --- a/docs/content/ui/components/buttons.md +++ b/docs/content/ui/components/buttons.md @@ -409,6 +409,16 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef {%- endcapture -%} {%- include "docs/example.html" html=html centered %} +## Full width buttons + +Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space. + +{% capture html -%} +Full width button +Full width outline button +{%- endcapture -%} +{%- include "docs/example.html" html=html separated %} + ## List of buttons Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result. @@ -476,6 +486,26 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align {%- endcapture -%} {%- include "docs/example.html" html=html %} +## Buttons with badges + +Add badges to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout. + +{% capture html -%} + + Notifications + 14 + + + Messages + 3 + + + Alerts + 7 + +{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + ## Buttons with avatars Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space. @@ -508,3 +538,142 @@ Use buttons with avatars to simplify the process of interaction and make your de {%- endcapture -%} {%- include "docs/example.html" html=html centered %} + +## Buttons with animations on hover + +Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience. + +{% capture html -%} +
+ + Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %} + + + {% include "ui/icon.html" icon="plus" %} Add + + + {% include "ui/icon.html" icon="bell" %} Notifications + + + {% include "ui/icon.html" icon="settings" %} Settings + + + {% include "ui/icon.html" icon="heart" %} Love + + + {% include "ui/icon.html" icon="x" %} Close + + + {% include "ui/icon.html" icon="check" %} Confirm + + + Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %} + + + {% include "ui/icon.html" icon="chevron-left" %} Previous + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html %} + +## Button sizes + +Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs`, `.btn-sm`, default, `.btn-lg`, `.btn-xl`. + +{% capture html -%} + + + + +{%- endcapture -%} +{%- include "docs/example.html" html=html separated centered vertical %} + +## Link buttons + +Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention. + +{% capture html -%} +Link button + +{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + +## Action buttons + +Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact. + +{% capture html -%} +
+ + {%- include "ui/icon.html" icon="edit" -%} + + + {%- include "ui/icon.html" icon="copy" -%} + + + {%- include "ui/icon.html" icon="settings" -%} + + + {%- include "ui/icon.html" icon="trash" -%} + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + +## Action button groups + +Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements. + +{% capture html -%} +
+ + {%- include "ui/icon.html" icon="refresh" -%} + + + {%- include "ui/icon.html" icon="chevron-up" -%} + + + {%- include "ui/icon.html" icon="dots-vertical" -%} + + + {%- include "ui/icon.html" icon="x" -%} + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + +## Button groups + +Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped. + +{% capture html -%} +
+ + + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + +{% capture html -%} +
+ + + + + + + + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} + +{% capture html -%} +
+ + + +
+{%- endcapture -%} +{%- include "docs/example.html" html=html centered %} diff --git a/preview/pages/buttons.html b/preview/pages/buttons.html index 44b4c2812..5a8223eea 100644 --- a/preview/pages/buttons.html +++ b/preview/pages/buttons.html @@ -7,91 +7,177 @@ permalink: buttons.html ---
-
+

Standard Buttons

- {% include "parts/buttons-table.html" show-link=true show-states=true %} +
+ {% for color in site.themeColors %} + {% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }} + {% endfor %} +
-
+

Outline Buttons

-

Use .btn-outline-* class for outline buttons. -

- {% include "parts/buttons-table.html" prefix="btn-outline-" show-states=true %} +
+ {% for color in site.themeColors %} + {% include "ui/icon.html" + icon=color[1].icon %} {{ color[1].title }} + {% endfor %} +
-
+

Ghost Buttons

-

Use .btn-ghost-* class for ghost buttons. -

- {% include "parts/buttons-table.html" prefix="btn-ghost-" show-states=true %} +
+ {% for color in site.themeColors %} + {% include "ui/icon.html" + icon=color[1].icon %} {{ color[1].title }} + {% endfor %} +
-
+

Square Buttons

-

Use .btn-square class for square buttons. -

- {% include "parts/buttons-table.html" class="btn-square" show-states=true %} +
+ {% for color in site.themeColors %} + + {% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }} + + {% endfor %} +
-
+

Pill Buttons

-

Use .btn-pill class for pill buttons. -

- {% include "parts/buttons-table.html" class="btn-pill" show-states=true %} +
+ {% for color in site.themeColors %} + + {% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }} + + {% endfor %} +
-
+

Extra colors

- {% include "parts/buttons-table.html" variants=site.colors hide-labels=true icon="star" auto-columns=true %} +
+ {% for color in site.colors %} + {% include "ui/icon.html" + icon=color[1].icon %} {{ color[1].title }} + {% endfor %} +
-
+

Icon buttons

- {% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %} +
+ {% for app in site.socialColors %} + {% include "ui/icon.html" icon=app[1].icon %} + {% endfor %} +
-
+

Social colors

- {% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %} +
+ {% for app in site.socialColors %} + {% include "ui/icon.html" icon=app[1].icon %} {{ app[1].title }} + {% endfor %} +
+
+
+
+ {% assign actions = 'edit,copy,settings,clipboard,x' | split: ',' %} +
+
+
+

Action buttons

+
+
+
+ {% for action in actions %} + {% include "ui/icon.html" icon=action %} + {% endfor %} +
+
+
+
+
+
+
+

Buttons with icon

+
+
+
+ Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %} + {% include "ui/icon.html" icon="plus" %} Add + {% include "ui/icon.html" icon="bell" %} Notifications + {% include "ui/icon.html" icon="settings" %} Settings + {% include "ui/icon.html" icon="heart" %} Love + {% include "ui/icon.html" icon="x" %} Close + {% include "ui/icon.html" icon="check" %} Confirm + Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %} + {% include "ui/icon.html" icon="chevron-left" %} Previous +
+
+
+
+
+
+
+

Buttons size

+
+
+
+ {% assign sizes = 'sm,md,lg,xl' | split: ',' %} + {% for size in sizes %} +
+ {% include "ui/button.html" size=size text="Button" %} + {% include "ui/button.html" size=size icon="star" icon-only %} + {% include "ui/button.html" size=size icon="star" text="Button" %} + {% include "ui/button.html" size=size icon-end="star" text="Button" %} +
+ {% endfor %} +
diff --git a/shared/data/sri.json b/shared/data/sri.json index 4e5af2192..f1b1e9cd8 100644 --- a/shared/data/sri.json +++ b/shared/data/sri.json @@ -1,6 +1,6 @@ { - "css": "sha384-5giQMn6+5ciSHvBDFs0PiYSSxefBFia1in4jshPxFyAW6OgOyFY8MgcpshFmmzIX", - "css-rtl": "sha384-bnNXrnBOjBGqF+px2z86UVufg7rLlMXxO/66LoA2Wh2SsR58pS3zgjuJ6HsVeN98", + "css": "sha384-LUZmhPrA9DuvV+PENAthWDl8vR3wEHZ2mxCp6V4VEbbCIDjvxx2RlvvYjfSZZ+Fe", + "css-rtl": "sha384-R+1hmp3uvF0kkOZyoxDNAnLplv2bfSkdzNMujFi7fbvcu+l5L15NMKg50UT7SHD0", "css-flags": "sha384-H7p4Cgh2RM3r9apL63WdIpPu9BtIhbGngx0f3WrqyCpunfY+X7M4apXpQQcZqA5c", "css-flags-rtl": "sha384-tzddSAu/YEPdL4FEjR4HwaKan3DhU5kQ+ifJOWa0kR7eb1RUmPKr8PHEx1Hmgx+t", "css-marketing": "sha384-jdZv/iHkc5OuAPy1SD9QancYje5FHhs4s1GL7AOvKdb6ZMiC+Zwya8pCGDBb7tIf", @@ -9,14 +9,14 @@ "css-payments-rtl": "sha384-gZtxDQ2AdE1j/+cmuiPWY+AJ0jtnsk2C3Z65u+uyzQkqfISW1V7Blezfumdm/mfj", "css-socials": "sha384-bujgRtkeNSwK8hFfCUO6SyIyWngJuWblefHIViyjq5XbDAEeCi1YRlIqggw9Vcqu", "css-socials-rtl": "sha384-SIYJowkbADF1DNCVS7QnO0WDOPI7xOulE2iUJ5do1VveCIHslxNnE7lYyXbHMqtH", - "css-props": "sha384-VeBVCSj9feUGkuG55hL+mt2qeQK5FM8BrDnVpc1LfOydkX5uQXyeb3FFC1Bik301", - "css-props-rtl": "sha384-YeIydJO/dmbDv+HHcIbd93qd1wUD1C4oaOdHJVcHB5Z26S4QAmPeNP/400EzB2lu", + "css-props": "sha384-eFBhxMcWpvjSKfWwkdzIeMzXUt2j6d0od1+xwAYsUAtAlBK0SK/tZl9xbx624xxx", + "css-props-rtl": "sha384-ifUxJ+Cmg0A/0cl51AAiC0TsP2kvHrBMyGxIsHWT3sPmZzu0PGHf0Pc3YwmoUWkT", "css-themes": "sha384-EWgzD0j3PnZ9hhq/YFnSNV/Hm54BB0hWYSSCEj6OR1YxP0BVDEM7Enp+UAJDMqBx", "css-themes-rtl": "sha384-rzVwsvFoVNK25vTMMkUuO71ndLJIhoMtvnaA9BKDBa2s+lboMuDmnHX/ikLmdgqv", "css-vendors-rtl": "sha384-bD4REzS6v/hyJgKgmqVmDd/HSu5y3dsZ4hQYcdYQqEOKQDLUEyqiWAWYq/NObB8B", "css-vendors": "sha384-yYQlhpXu43M9F6EsDV1V/GQBPy9gQSKTTkvRiSnKEbUjI3/RhmpARqgI9pUTU6Z9", - "js": "sha384-DaKT+KCi9ypTlo8Tfz74XJPqZhkV6luseXpEDIzTeYfy4PIZZW9gV6hAxC4/mGDj", - "js-theme": "sha384-6UW/C91tb0VoxDoxl4Fpngc2SX3sK37eWdaDTVBcwA1WkWVYV9V8pZlen7sud5CB", + "js": "sha384-2WdYXbwTs+5LXi+OUvcthfGsTS1s8P9lt6uUbrglmYVhAsPSh1ItGCmXkpzSR34u", + "js-theme": "sha384-owIUMWnQZ6WJM5sJcZYopxE42XrqqKivlpxysxQYM+RXYbaHGAWVo2aniM4Wyhxq", "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA", "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z" } \ No newline at end of file diff --git a/shared/includes/parts/buttons-table.html b/shared/includes/parts/buttons-table.html deleted file mode 100644 index 9a7776dc9..000000000 --- a/shared/includes/parts/buttons-table.html +++ /dev/null @@ -1,34 +0,0 @@ -{% assign prefix = include.prefix | default: 'btn-' %} -{% assign show-link = include.show-link | default: false %} -{% assign show-states = include.show-states | default: false %} -{% assign hide-labels = include.hide-labels | default: false %} -{% assign variants = include.variants | default: site.themeColors %} - -{% for state in site.buttonStates %} - {% if show-states or state.class != 'active' and state.class != 'disabled' %} -
- {% unless hide-labels %}
{{ state.title }}
{% endunless %} - {% for variant in variants %} - {% if show-link or variant[0] != 'link' %} -
- {% if include.icon or include.icon-only %} - {% assign icon = variant[1].icon %} - {% endif %} - - {% assign class = prefix | append: variant[0] %} - {% if state.class %} - {% assign class = class | append: ' ' | append: state.class %} - {% endif %} - {% if include.class %} - {% assign class = class | append: ' ' | append: include.class %} - {% endif %} - - {% assign text = variant[1].title %} - {% assign color = variant[0] %} - {% include "ui/button.html" block=true color=false class=class icon=icon icon-only=include.icon-only text=text %} -
- {% endif %} - {% endfor %} -
- {% endif %} -{% endfor %} \ No newline at end of file