mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
refactor: Update SCSS variables for avatars and alerts, enhance card layout and tab functionality
This commit is contained in:
codecalm
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -108,17 +108,7 @@ permalink: cards.html
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary text-primary-fg">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-white text-primary">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with background and icon</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-background-icon.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-top="danger" title="Card with top status" %}
|
||||
@@ -131,22 +121,10 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-ribbon-top.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="ribbon bg-red">NEW</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with text ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-ribbon-text.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" progress=true title="Card with progress bar" %}
|
||||
@@ -199,8 +177,8 @@ permalink: cards.html
|
||||
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
@@ -278,5 +256,6 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
|
||||
<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
|
||||
<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
|
||||
</div>
|
||||
@@ -7,7 +7,7 @@ permalink: form-layout.html
|
||||
page-libs: [litepicker]
|
||||
---
|
||||
|
||||
<div class="row row-cards row-cols-1 row-cols-md-2">
|
||||
<div class="row row-cards row-cols-1 row-cols-md-3">
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
@@ -360,4 +360,8 @@ page-libs: [litepicker]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
{% include "cards/form/payment.html" %}
|
||||
</div>
|
||||
</div>
|
||||
12
shared/includes/cards/card-background-icon.html
Normal file
12
shared/includes/cards/card-background-icon.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card bg-primary text-primary-fg">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-white text-primary">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with background and icon</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
8
shared/includes/cards/card-ribbon-text.html
Normal file
8
shared/includes/cards/card-ribbon-text.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="ribbon bg-red">NEW</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with text ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
8
shared/includes/cards/card-ribbon-top.html
Normal file
8
shared/includes/cards/card-ribbon-top.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 %}
|
||||
<!-- Cards navigation -->
|
||||
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
|
||||
{% for tab in tabs %}
|
||||
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
|
||||
<li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
@@ -15,9 +15,9 @@
|
||||
<div class="tab-content">
|
||||
{% for tab in tabs %}
|
||||
<!-- Content of card #{{ tab }} -->
|
||||
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #{{ tab }}</div>
|
||||
<div class="card-title">{{ tab }}</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
|
||||
@@ -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" %}
|
||||
<a href="#">More information</a>
|
||||
{% endcase %}
|
||||
|
||||
12
shared/includes/cards/empty-team.html
Normal file
12
shared/includes/cards/empty-team.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card card-lg card-dashed card-transparent">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{% include "ui/avatar-list.html" stacked %}
|
||||
</div>
|
||||
<h3 class="card-title">No Team Members</h3>
|
||||
<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
|
||||
<div class="mt-4">
|
||||
{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
91
shared/includes/cards/form/payment.html
Normal file
91
shared/includes/cards/form/payment.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Payment Method</h3>
|
||||
<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name on Card</label>
|
||||
<input type="text" class="form-control" placeholder="John Doe">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Card Number</label>
|
||||
<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
|
||||
<small class="form-hint">Enter your 16-digit number.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">CVV</label>
|
||||
<input type="text" class="form-control" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Month</label>
|
||||
<select class="form-select">
|
||||
<option value="">MM</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Year</label>
|
||||
<select class="form-select">
|
||||
<option value="">YYYY</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2026">2026</option>
|
||||
<option value="2027">2027</option>
|
||||
<option value="2028">2028</option>
|
||||
<option value="2029">2029</option>
|
||||
<option value="2030">2030</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h3 class="card-title">Billing Address</h3>
|
||||
<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked>
|
||||
<span class="form-check-label">Same as shipping address</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Comments</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="btn-list">
|
||||
{% include "ui/button.html" text="Submit" color="primary" %}
|
||||
{% include "ui/button.html" text="Cancel" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user