diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 18ad0dec2..4fd3194b9 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -882,7 +882,7 @@ $avatar-sizes: ( brand-size: 2rem, ), ) !default; -$avatar-border-radius: var(--#{$prefix}border-radius) !default; +$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default; $avatar-font-size: $h4-font-size !default; $avatar-box-shadow: var(--#{$prefix}shadow-border) !default; $avatar-list-spacing: -0.5; diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss index 4d1971225..4577b5ab4 100644 --- a/core/scss/ui/_alerts.scss +++ b/core/scss/ui/_alerts.scss @@ -1,10 +1,11 @@ .alert { --#{$prefix}alert-color: var(--#{$prefix}body-color); - --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)}; + --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1, var(--#{$prefix}bg-surface))}; --#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)}; + --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2, + var(--#{$prefix}bg-surface))}; --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius); --#{$prefix}alert-link-color: inherit; diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss index dfb67c3bc..244957997 100644 --- a/core/scss/ui/_avatars.scss +++ b/core/scss/ui/_avatars.scss @@ -9,6 +9,7 @@ --#{$prefix}avatar-font-size: #{$avatar-font-size}; --#{$prefix}avatar-icon-size: #{$avatar-icon-size}; --#{$prefix}avatar-brand-size: #{$avatar-brand-size}; + --#{$prefix}avatar-border-radius: #{$avatar-border-radius}; position: relative; width: var(--#{$prefix}avatar-size); height: var(--#{$prefix}avatar-size); @@ -24,7 +25,7 @@ vertical-align: bottom; user-select: none; background: var(--#{$prefix}avatar-bg) no-repeat center/cover; - border-radius: $avatar-border-radius; + border-radius: var(--#{$prefix}avatar-border-radius); box-shadow: var(--#{$prefix}avatar-box-shadow); transition: color $transition-time, @@ -38,7 +39,7 @@ .badge { position: absolute; - inset-inline-end: 0; + inset-inline-end: 0; bottom: 0; border-radius: $border-radius-pill; box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg; @@ -96,10 +97,12 @@ --#{$prefix}list-gap: 0; .avatar { - margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; - box-shadow: - var(--#{$prefix}avatar-box-shadow), - 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); + box-shadow: var(--#{$prefix}avatar-box-shadow), + 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); + + &:not(:first-child) { + margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; + } } } @@ -153,4 +156,4 @@ background: var(--#{$prefix}bg-surface); border-radius: var(--#{$prefix}border-radius); border: 1px solid var(--#{$prefix}border-color); -} +} \ No newline at end of file diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 1da6fc608..35e395d76 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -26,7 +26,7 @@ @at-root a#{&} { color: inherit; - + &:hover { text-decoration: none; box-shadow: $box-shadow-card-hover; @@ -48,6 +48,17 @@ } } +// Card dashed +.card-dashed { + border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); +} + +// Card transparent +.card-transparent { + background: transparent; + border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); +} + // Card stamp .card-stamp { --#{$prefix}stamp-size: 7rem; @@ -732,4 +743,4 @@ Card gradient .card-gradient-start { --#{$prefix}card-gradient-direction: 90deg; -} \ No newline at end of file +} diff --git a/preview/pages/cards.html b/preview/pages/cards.html index 5bcdb07b1..59f0629fe 100644 --- a/preview/pages/cards.html +++ b/preview/pages/cards.html @@ -108,17 +108,7 @@ permalink: cards.html
-
-
-
- {% include "ui/icon.html" icon="star" %} -
-
-
-

Card with background and icon

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

-
-
+ {% include "cards/card-background-icon.html" %}
{% include "cards/card.html" status-top="danger" title="Card with top status" %} @@ -131,22 +121,10 @@ permalink: cards.html
-
-
{% include "ui/icon.html" icon="star" %}
-
-

Card with top ribbon

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

-
-
+ {% include "cards/card-ribbon-top.html" %}
-
-
NEW
-
-

Card with text ribbon

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

-
-
+ {% include "cards/card-ribbon-text.html" %}
{% include "cards/card.html" progress=true title="Card with progress bar" %} @@ -199,8 +177,8 @@ permalink: cards.html
{% include "cards/card.html" header-tabs=true %}
{% include "cards/card.html" header-pills=true %}
-
{% include "cards/card-tabs.html" count=4 %}
-
{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}
+
{% include "cards/card-tabs.html" %}
+
{% include "cards/card-tabs.html" bottom=true id="bottom" %}
@@ -278,5 +256,6 @@ permalink: cards.html
{% include "cards/card.html" empty=true %}
+
{% include "cards/empty-team.html" %}
{% include "cards/credit-card.html" %}
\ No newline at end of file diff --git a/preview/pages/form-layout.html b/preview/pages/form-layout.html index 411a64712..48c4af7eb 100644 --- a/preview/pages/form-layout.html +++ b/preview/pages/form-layout.html @@ -7,7 +7,7 @@ permalink: form-layout.html page-libs: [litepicker] --- -
+
@@ -360,4 +360,8 @@ page-libs: [litepicker]
+ +
+ {% include "cards/form/payment.html" %} +
\ No newline at end of file diff --git a/shared/includes/cards/card-background-icon.html b/shared/includes/cards/card-background-icon.html new file mode 100644 index 000000000..2409f9d6d --- /dev/null +++ b/shared/includes/cards/card-background-icon.html @@ -0,0 +1,12 @@ +
+
+
+ {% include "ui/icon.html" icon="star" %} +
+
+
+

Card with background and icon

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

+
+
+ diff --git a/shared/includes/cards/card-ribbon-text.html b/shared/includes/cards/card-ribbon-text.html new file mode 100644 index 000000000..7386024b8 --- /dev/null +++ b/shared/includes/cards/card-ribbon-text.html @@ -0,0 +1,8 @@ +
+
NEW
+
+

Card with text ribbon

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

+
+
+ diff --git a/shared/includes/cards/card-ribbon-top.html b/shared/includes/cards/card-ribbon-top.html new file mode 100644 index 000000000..d2cc3699c --- /dev/null +++ b/shared/includes/cards/card-ribbon-top.html @@ -0,0 +1,8 @@ +
+
{% include "ui/icon.html" icon="star" %}
+
+

Card with top ribbon

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

+
+
+ diff --git a/shared/includes/cards/card-tabs.html b/shared/includes/cards/card-tabs.html index 2309330b8..b3d91a7e4 100644 --- a/shared/includes/cards/card-tabs.html +++ b/shared/includes/cards/card-tabs.html @@ -1,12 +1,12 @@ {% assign tabs-count = include.count | default: 3 %} {% assign id = include.id | default: 'top' %} -{% assign tabs = (1..tabs-count) %} +{% assign tabs = 'Activity,Profile,Settings' | split: "," %} {% capture tabs-html %} {%- endcapture %} @@ -15,9 +15,9 @@
{% for tab in tabs %} -
+
-
Content of tab #{{ tab }}
+
{{ tab }}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

diff --git a/shared/includes/cards/card.html b/shared/includes/cards/card.html index c8c1438c4..c8ebe70ce 100644 --- a/shared/includes/cards/card.html +++ b/shared/includes/cards/card.html @@ -78,7 +78,7 @@ {% when "check" %} {% include "ui/form/check.html" empty=true checked=true class="m-0" %} {% when "avatars" %} - {% include "ui/avatar-list.html" stacked=true text="+3" %} + {% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %} {% when "more" %} More information {% endcase %} diff --git a/shared/includes/cards/empty-team.html b/shared/includes/cards/empty-team.html new file mode 100644 index 000000000..e128e548e --- /dev/null +++ b/shared/includes/cards/empty-team.html @@ -0,0 +1,12 @@ +
+
+
+ {% include "ui/avatar-list.html" stacked %} +
+

No Team Members

+

Invite your team to
collaborate on this project.

+
+ {% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %} +
+
+
diff --git a/shared/includes/cards/form/payment.html b/shared/includes/cards/form/payment.html new file mode 100644 index 000000000..6822a150e --- /dev/null +++ b/shared/includes/cards/form/payment.html @@ -0,0 +1,91 @@ +
+
+

Payment Method

+

All transactions are secure and encrypted

+ +
+ + +
+ +
+
+
+ + + Enter your 16-digit number. +
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+ +

Billing Address

+

The billing address associated with your payment method

+ +
+ +
+ +
+ +
+ + +
+ +
+
+ {% include "ui/button.html" text="Submit" color="primary" %} + {% include "ui/button.html" text="Cancel" %} +
+
+
+
+