mirror of
https://github.com/tabler/tabler.git
synced 2026-01-25 04:16:36 +00:00
Unify size of avatar, flag and payment components (#1623)
This commit is contained in:
Paweł Kuna
5
.changeset/itchy-bottles-cheat.md
Normal file
5
.changeset/itchy-bottles-cheat.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Unify size of avatar, flag and payment components
|
||||
@@ -45,8 +45,7 @@
|
||||
<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
|
||||
<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
|
||||
<td>
|
||||
{% include ui/flag.html flag=invoice.country %}
|
||||
{{ invoice.client }}
|
||||
{% include ui/flag.html flag=invoice.country size="xs" class="me-2" %}{{ invoice.client }}
|
||||
</td>
|
||||
<td>
|
||||
{{ invoice.vat-no }}
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<span class="tag">
|
||||
{% if include.flag %}
|
||||
{% include ui/flag.html flag=include.flag size="xs" class="tag-flag" %}
|
||||
{% include ui/flag.html flag=include.flag size="xxs" class="tag-flag" %}
|
||||
{% elsif include.icon %}
|
||||
{% include ui/icon.html icon=include.icon size="xs" class="tag-icon" %}
|
||||
{% include ui/icon.html icon=include.icon size="xxs" class="tag-icon" %}
|
||||
{% elsif include.person %}
|
||||
{% include ui/avatar.html person=include.person size="xs" class="tag-avatar" %}
|
||||
{% include ui/avatar.html person=include.person size="xxs" class="tag-avatar" %}
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id size="xxs" class="tag-avatar" %}
|
||||
{% elsif include.payment %}
|
||||
{% include ui/payment.html provider=include.payment size="xxs" class="tag-payment" %}
|
||||
{% elsif include.status %}
|
||||
{% include ui/badge.html color=include.status class="tag-status badge-empty" text="" %}
|
||||
{% elsif include.legend %}
|
||||
|
||||
@@ -202,15 +202,8 @@ $border-color-translucent: rgba(4, 32, 69, 0.14);
|
||||
$border-dark-color: $gray-400 !default;
|
||||
$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
|
||||
|
||||
$border-active-color: mix(
|
||||
$text-secondary,
|
||||
#ffffff,
|
||||
percentage($border-active-opacity)
|
||||
) !default;
|
||||
$border-active-color-translucent: rgba(
|
||||
$text-secondary,
|
||||
$border-active-opacity
|
||||
) !default;
|
||||
$border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
|
||||
$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
|
||||
|
||||
$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
|
||||
$active-color: var(--#{$prefix}primary) !default;
|
||||
@@ -288,10 +281,7 @@ $gray-colors: (
|
||||
gray-900: $gray-900,
|
||||
) !default;
|
||||
|
||||
$theme-colors: map-merge(
|
||||
$theme-colors,
|
||||
map-merge($extra-colors, $social-colors)
|
||||
);
|
||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
|
||||
|
||||
// Borders
|
||||
$border-width: 1px !default;
|
||||
@@ -319,27 +309,65 @@ $kbd-padding-x: 0.5rem !default;
|
||||
$kbd-padding-y: 0.25rem !default;
|
||||
$kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||
$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
|
||||
$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color) !default;
|
||||
$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
|
||||
$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
|
||||
$kbd-bg: var(--#{$prefix}code-bg) !default;
|
||||
$kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
// Avatars
|
||||
$avatar-size: 2rem !default;
|
||||
$avatar-size: 2.5rem !default;
|
||||
$avatar-status-size: .75rem !default;
|
||||
$avatar-font-size: 1rem !default;
|
||||
$avatar-icon-size: 1.5rem !default;
|
||||
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$avatar-sizes: (
|
||||
"xs": 1rem,
|
||||
"sm": 2rem,
|
||||
"md": 4rem,
|
||||
"lg": 5.5rem,
|
||||
"xl": 7rem,
|
||||
"2xl": 11rem,
|
||||
"xxs": (
|
||||
size: 1rem,
|
||||
font-size: .5rem,
|
||||
icon-size: .75rem,
|
||||
status-size: .25rem
|
||||
),
|
||||
"xs": (
|
||||
size: 1.25rem,
|
||||
font-size: $h6-font-size,
|
||||
icon-size: 1rem,
|
||||
status-size: .375rem
|
||||
),
|
||||
"sm": (
|
||||
size: 2rem,
|
||||
font-size: $h5-font-size,
|
||||
icon-size: 1.25rem,
|
||||
status-size: .5rem
|
||||
),
|
||||
"md": (
|
||||
size: 2.5rem,
|
||||
font-size: $h4-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: .75rem
|
||||
),
|
||||
"lg": (
|
||||
size: 3rem,
|
||||
font-size: $h2-font-size,
|
||||
icon-size: 2rem,
|
||||
status-size: .75rem
|
||||
),
|
||||
"xl": (
|
||||
size: 5rem,
|
||||
font-size: 2rem,
|
||||
icon-size: 3rem,
|
||||
status-size: 1rem
|
||||
),
|
||||
"2xl": (
|
||||
size: 7rem,
|
||||
font-size: 3rem,
|
||||
icon-size: 5rem,
|
||||
status-size: 1rem
|
||||
),
|
||||
) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$avatar-font-size: $h4-font-size !default;
|
||||
$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
|
||||
$avatar-list-spacing: -.5;
|
||||
$avatar-list-spacing: -0.5;
|
||||
|
||||
$link-decoration: none !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
@@ -395,11 +423,7 @@ $spacers: (
|
||||
8: $spacer-8,
|
||||
) !default;
|
||||
|
||||
$negative-spacers: if(
|
||||
$enable-negative-margins,
|
||||
negativify-map($spacers),
|
||||
null
|
||||
) !default;
|
||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||
|
||||
// Sizes
|
||||
$size-spacers: (
|
||||
@@ -469,11 +493,7 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
|
||||
$transition-time: 0.3s !default;
|
||||
|
||||
// Overlay
|
||||
$overlay-gradient: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
) !default;
|
||||
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
|
||||
|
||||
// Accordion
|
||||
$accordion-bg: transparent !default;
|
||||
@@ -488,7 +508,7 @@ $accordion-button-focus-border-color: $accordion-border-color !default;
|
||||
|
||||
// Alerts
|
||||
$alert-padding-x: 1rem !default;
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-padding-y: 0.75rem !default;
|
||||
$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
|
||||
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
@@ -601,7 +621,6 @@ $btn-close-width: 1em !default;
|
||||
$btn-close-opacity: 0.4 !default;
|
||||
$btn-close-color: $body-color !default;
|
||||
|
||||
|
||||
// Datagrid
|
||||
$datagrid-padding: 1.5rem !default;
|
||||
$datagrid-item-width: 15rem !default;
|
||||
@@ -654,10 +673,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
|
||||
$modal-content-border-color: transparent !default;
|
||||
$modal-content-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
||||
$modal-content-inner-border-radius: subtract(
|
||||
var(--#{$prefix}modal-border-radius),
|
||||
1px
|
||||
) !default;
|
||||
$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
|
||||
|
||||
$modal-header-padding: 1.5rem !default;
|
||||
$modal-header-height: 3.5rem !default;
|
||||
@@ -697,8 +713,7 @@ $nav-bordered-margin-x: 1.25rem !default;
|
||||
|
||||
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
|
||||
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
$nav-tabs-border-color !default;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
|
||||
$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
|
||||
$nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
||||
@@ -803,9 +818,7 @@ $table-th-color: var(--#{$prefix}secondary) !default;
|
||||
$table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
||||
$table-striped-order: even !default;
|
||||
$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
|
||||
$table-group-separator-color: var(
|
||||
--#{$prefix}border-color-translucent
|
||||
) !default;
|
||||
$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
|
||||
|
||||
$table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
|
||||
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
|
||||
@@ -838,9 +851,7 @@ $list-group-active-color: inherit !default;
|
||||
$input-bg: var(--#{$prefix}bg-forms) !default;
|
||||
$input-disabled-bg: $disabled-bg !default;
|
||||
$input-border-color: var(--#{$prefix}border-color) !default;
|
||||
$input-border-color-translucent: var(
|
||||
--#{$prefix}border-color-translucent
|
||||
) !default;
|
||||
$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
|
||||
$input-placeholder-color: $text-secondary-light !default;
|
||||
|
||||
$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
@@ -849,13 +860,12 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
// Forms
|
||||
$form-check-margin-bottom: .75rem !default;
|
||||
$form-check-margin-bottom: 0.75rem !default;
|
||||
$form-check-padding-start: 2rem !default;
|
||||
|
||||
$form-check-input-width: 1.25rem !default;
|
||||
$form-check-input-bg: var(--#{$prefix}bg-forms) !default;
|
||||
$form-check-input-border: var(--#{$prefix}border-width)
|
||||
var(--#{$prefix}border-style) $input-border-color-translucent !default;
|
||||
$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
|
||||
$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$form-check-input-box-shadow: $input-box-shadow !default;
|
||||
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
.avatar {
|
||||
--#{$prefix}avatar-size: #{$avatar-size};
|
||||
--#{$prefix}avatar-status-size: #{$avatar-status-size};
|
||||
--#{$prefix}avatar-bg: #{$avatar-bg};
|
||||
--#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
|
||||
--#{$prefix}avatar-font-size: #{$avatar-font-size};
|
||||
--#{$prefix}avatar-icon-size: #{$avatar-icon-size};
|
||||
position: relative;
|
||||
width: var(--#{$prefix}avatar-size);
|
||||
height: var(--#{$prefix}avatar-size);
|
||||
font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
|
||||
font-size: var(--#{$prefix}avatar-font-size);
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -19,9 +23,9 @@
|
||||
border-radius: $avatar-border-radius;
|
||||
box-shadow: var(--#{$prefix}avatar-box-shadow);
|
||||
|
||||
svg {
|
||||
width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
|
||||
height: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
|
||||
.icon {
|
||||
width: var(--#{$prefix}avatar-icon-size);
|
||||
height: var(--#{$prefix}avatar-icon-size);
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -29,7 +33,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
box-shadow: 0 0 0 2px $card-bg;
|
||||
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
@@ -43,12 +47,15 @@
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.avatar-#{$avatar-size} {
|
||||
--#{$prefix}avatar-size: #{$size};
|
||||
--#{$prefix}avatar-size: #{map-get($size, size)};
|
||||
--#{$prefix}avatar-status-size: #{map-get($size, status-size)};
|
||||
--#{$prefix}avatar-font-size: #{map-get($size, font-size)};
|
||||
--#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
|
||||
}
|
||||
|
||||
.avatar-#{$avatar-size} .badge:empty {
|
||||
width: $size * .25;
|
||||
height: $size * .25;
|
||||
width: map-get($size, status-size);
|
||||
height: map-get($size, status-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ $countries: (
|
||||
.flag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.5rem;
|
||||
height: $avatar-size;
|
||||
aspect-ratio: 1.33333;
|
||||
background: no-repeat center/cover;
|
||||
box-shadow: $flag-box-shadow;
|
||||
@@ -26,6 +26,6 @@ $countries: (
|
||||
|
||||
@each $flag-size, $size in $flag-sizes {
|
||||
.flag-#{$flag-size} {
|
||||
height: $size;
|
||||
height: map-get($size, size);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
$payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'epayco', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
|
||||
|
||||
.payment {
|
||||
width: 2rem * 1.66666;
|
||||
height: 2rem;
|
||||
height: $avatar-size;
|
||||
aspect-ratio: 1.66666;
|
||||
display: inline-block;
|
||||
background: no-repeat center/100% 100%;
|
||||
vertical-align: bottom;
|
||||
@@ -23,7 +23,6 @@ $payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay',
|
||||
|
||||
@each $payment-size, $size in $payment-sizes {
|
||||
.payment-#{$payment-size} {
|
||||
width: $size * 1.66666;
|
||||
height: $size;
|
||||
height: map-get($size, size);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tag {
|
||||
--#{$prefix}tag-height: 1.5rem;
|
||||
border: $border-width solid var(--#{$prefix}border-color);
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: var(--#{$prefix}tag-height);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
.tag-avatar,
|
||||
.tag-flag,
|
||||
.tag-payment,
|
||||
.tag-icon,
|
||||
.tag-check {
|
||||
margin-left: -.25rem;
|
||||
|
||||
Reference in New Issue
Block a user