Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Profile page (#1288)

Browse Source
This commit is contained in:
Paweł Kuna
2022-11-15 21:03:18 +01:00
committed by GitHub
parent ce293a14ef
commit 14af3c7c1c
22 changed files with 350 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@@ -14,6 +14,8 @@ rtl: false
title: Tabler
description: Premium and Open Source dashboard template with responsive and high quality UI.
email: support@tabler.io
homepage: https://tabler.io
github-url: https://github.com/tabler/tabler
github-sponsors-url: https://github.com/sponsors/codecalm

3
src/pages/_data/menu.yml
View File

@@ -127,6 +127,9 @@ base:
sign-in:
title: Sign in
url: sign-in.html
sign-in-link:
title: Sign in link
url: sign-in-link.html
sign-in-illustration:
title: Sign in with illustration
url: sign-in-illustration.html

31
src/pages/_data/timeline.yml Normal file
View File

@@ -0,0 +1,31 @@
- icon: brand-facebook
icon-bg: facebook
title: Facebook
date: just now
- icon: briefcase
title: Products
date: 2 hrs ago
- icon: brand-twitter
icon-bg: twitter
title: Twitter
date: 8 hrs ago
- icon: brand-dribbble
icon-bg: dribbble
title: Dribbble
date: 12 hrs ago
- icon: database
title: Backup
date: 2 days ago
- icon: settings
icon-bg: primary
title: System
date: 4 days ago
- icon: briefcase
title: Products
date: 12 days ago

4
src/pages/_docs/timelines.md
View File

@@ -12,7 +12,7 @@ The available timeline design is comprised of many components that will help you
{% capture code %}
{% include cards/timeline.html %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code columns=2 %}
## Simple timeline
@@ -22,4 +22,4 @@ Use a simplified version of the timeline, if it suits your design better. You ca
{% capture code %}
{% include cards/timeline.html simple=true %}
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code columns=2 %}

161
src/pages/_includes/cards/timeline.html
View File

@@ -1,83 +1,90 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Timeline' }}</h3>
</div>
<div class="card-body">
<ul class="list list-timeline{% if include.simple %} list-timeline-simple{% endif %}">
<li>
<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="brand-twitter" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">10 hrs ago</div>
<p class="list-timeline-title">+1150 Followers</p>
<p class="text-muted">You’re getting more and more followers, keep it up!</p>
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt">{% include ui/icon.html icon="brand-twitter" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">10 hrs ago</div>
<h4>+1150 Followers</h4>
<p class="text-muted">You’re getting more and more followers, keep it up!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include ui/icon.html icon="briefcase" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">2 hrs ago</div>
<h4>+3 New Products were added!</h4>
<p class="text-muted">Congratulations!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include ui/icon.html icon="check" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">1 day ago</div>
<h4>Database backup completed!</h4>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">{% include ui/icon.html icon="brand-facebook" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">1 day ago</div>
<h4>+290 Page Likes</h4>
<p class="text-muted">This is great, keep it up!</p>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include ui/icon.html icon="user-plus" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">2 days ago</div>
<h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3">
{% for person in site.data.people limit: 3 %}
{% include ui/avatar.html person=person status="success" %}
{% endfor %}
</div>
</li>
<li>
<div class="list-timeline-icon bg-red">{% include ui/icon.html icon="briefcase" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 hrs ago</div>
<p class="list-timeline-title">+3 New Products were added!</p>
<p class="text-muted">Congratulations!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-success">{% include ui/icon.html icon="check" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="brand-facebook" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">+290 Page Likes</p>
<p class="text-muted">This is great, keep it up!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-teal">{% include ui/icon.html icon="user-plus" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 days ago</div>
<p class="list-timeline-title">+3 Friend Requests</p>
<div class="avatar-list mt-3">
{% for person in site.data.people limit: 3 %}
{% include ui/avatar.html person=person status="success" %}
{% endfor %}
</div>
</div>
</li>
<li>
<div class="list-timeline-icon bg-yellow">{% include ui/icon.html icon="photo" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
<div class="mt-3">
<div class="row g-2">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
</div>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include ui/icon.html icon="photo" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">3 days ago</div>
<h4>+2 New photos</h4>
<div class="mt-3">
<div class="row g-2">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>
</div>
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({% include ui/image.html id=7 %})"></a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-timeline-icon">{% include ui/icon.html icon="settings" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
page</a>.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon">{% include ui/icon.html icon="settings" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-muted float-end">2 weeks ago</div>
<h4>System updated to v2.02</h4>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
page</a>.</p>
</div>
</div>
</li>
</ul>

38
src/pages/_includes/layout/headers/profile.html Normal file
View File

@@ -0,0 +1,38 @@
{% assign person = site.data.people[3] %}
<div class="page-header">
<div class="container">
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person rounded=true size="lg" %}
</div>
<div class="col">
<h1 class="fw-bold">{{ person.full_name }}</h1>
<div class="my-2">Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr.
</div>
<div class="list-inline list-inline-dots text-muted">
<div class="list-inline-item">
{% include ui/icon.html icon="map" inline=true %}
{{ person.university }}, {{ person.country }}
</div>
<div class="list-inline-item">
{% include ui/icon.html icon="mail" inline=true %}
<a href="#" class="text-reset">{{ person.email }}</a>
</div>
<div class="list-inline-item">
{% include ui/icon.html icon="cake" inline=true %}
{{ person.birth_date }}
</div>
</div>
</div>
<div class="col-auto ms-auto">
<div class="btn-list">
{% include ui/button.html icon="dots" icon-only=true %}
{% include ui/button.html icon="message" icon-only=true %}
{% include ui/button.html icon="check" color="primary" text="Following" %}
</div>
</div>
</div>
</div>
</div>

2
src/pages/_includes/layout/navbar-side.html
View File

@@ -55,7 +55,7 @@
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown-item">Status</a>
<a href="#" class="dropdown-item">Profile</a>
<a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>

2
src/pages/_includes/parts/modals/success.html
View File

@@ -5,7 +5,7 @@
{% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %}
<h3>Payment succedeed</h3>
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.</div>
</div>
<div class="modal-footer">

32
src/pages/profile.html Normal file
View File

@@ -0,0 +1,32 @@
---
title: Profile
page-header-file: profile
---
<div class="row g-3">
<div class="col">
{% include cards/timeline.html %}
</div>
<div class="col-lg-4">
<div class="row row-cards">
<div class="col-12">
{% include cards/user-info.html %}
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">About Me</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius
esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis
laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur
doloremque, error impedit, ipsum labore laboriosam minima non omnis perspiciatis possimus
praesentium provident quo recusandae suscipit tempore totam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

20
src/pages/sign-in-link.html Normal file
View File

@@ -0,0 +1,20 @@
---
layout: single
title: Sign in link
---
<div class="text-center">
<div class="my-5">
<h2 class="h1">Check your inbox</h2>
<p class="fs-h3 text-muted">
We've sent you a magic link to <strong>{{ site.email }}</strong>.<br />
Please click the link to confirm your address.
</p>
</div>
<div class="text-center text-muted mt-3">
Can't see the email? Please check the spam folder.<br />
Wrong email? Please <a href="#">re-enter your address</a>.
</div>
</div>

1
src/scss/_core.scss
View File

@@ -56,6 +56,7 @@
@import "ui/toasts";
@import "ui/toolbar";
@import "ui/tracking";
@import "ui/timeline";
@import "ui/type";
@import "ui/charts";
@import "ui/offcanvas";

37
src/scss/_variables.scss
View File

@@ -149,7 +149,8 @@ $light: $gray-50 !default;
$dark: $gray-800 !default;
$bg-surface: var(--#{$prefix}white) !default;
$bg-surface-secondary: var(--#{$prefix}light) !default;
$bg-surface-secondary: var(--#{$prefix}gray-100) !default;
$bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
$bg-surface-dark: var(--#{$prefix}dark) !default;
$body-bg: $gray-100 !default;
@@ -190,7 +191,7 @@ $active-border-color: var(--#{$prefix}primary) !default;
$hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
$disabled-bg: var(--#{$prefix}gray-100) !default;
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
$disabled-color: var(--#{$prefix}gray-300) !default;
$link-color: var(--#{$prefix}primary) !default;
@@ -289,7 +290,7 @@ $icon-color: var(--#{$prefix}gray-500) !default;
$code-color: var(--#{$prefix}gray-600) !default;
$code-font-size: $small-font-size !default;
$code-line-height: 1.25rem !default;
$code-bg: var(--#{$prefix}gray-100) !default;
$code-bg: var(--#{$prefix}bg-surface-secondary) !default;
$pre-padding: 1rem !default;
$pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -304,11 +305,12 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
// Avatars
$avatar-size: 2.5rem !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: (
"xs": 1.5rem,
"sm": 2rem,
"md": 4rem,
"lg": 5rem,
"lg": 5.5rem,
"xl": 7rem,
"2xl": 11rem,
) !default;
@@ -326,6 +328,12 @@ $hr-margin-y: 2rem !default;
$caret-width: .36em !default;
$caret-spacing: .4em !default;
//Sizing
$content-padding: 1.25rem !default;
$container-padding-x: var(--#{$prefix}content-padding) !default;
$grid-gutter-width: var(--#{$prefix}content-padding) !default;
// Grid
$grid-gutter-width: 1rem !default;
$container-padding-x: 1.5rem !default;
@@ -367,6 +375,13 @@ $size-values: map-merge($spacers, (
auto: auto
)) !default;
$container-variations: (
tight: 30rem,
narrow: 45rem,
) !default;
// Aspect ratios
$aspect-ratios: (
"1x1": 100%,
@@ -422,7 +437,7 @@ $alert-padding-x: 1rem !default;
$alert-padding-y: 1rem !default;
$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
$alert-border-width: 1px !default;
$alert-border-width: var(--#{$prefix}border-width) !default;
$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
$alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
@@ -493,7 +508,7 @@ $card-border-radius: var(--#{$prefix}border-radius) !default;
$card-spacer-x: 1.5rem !default;
$card-spacer-y: 1rem !default;
$card-cap-bg: var(--#{$prefix}bg-surface-secondary) !default;
$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-padding-y: $card-spacer-y !default;
@@ -507,7 +522,7 @@ $card-ribbon-margin: .25rem !default;
$card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
$card-ribbon-font-size: $h6-font-size !default;
$card-header-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;
$card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$cards-grid-gap: 1rem !default;
$cards-grid-breakpoint: lg !default;
@@ -577,7 +592,7 @@ $modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius
$modal-header-padding: 1.5rem !default;
$modal-header-height: 3.5rem !default;
$modal-header-border-width: 1px !default;
$modal-header-border-width: var(--#{$prefix}border-width) !default;
$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-bg: $white !default;
$modal-inner-padding: 1.5rem !default;
@@ -614,7 +629,7 @@ $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-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-secondary) !default;
$nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
// Navbar
@@ -710,9 +725,9 @@ $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
$table-th-padding-x: $table-cell-padding-x !default;
$table-th-padding-y: .5rem !default;
$table-th-color: var(--#{$prefix}muted) !default;
$table-th-bg: var(--#{$prefix}gray-50) !default;
$table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$table-striped-order: even !default;
$table-striped-bg: var(--#{$prefix}bg-surface-secondary) !default;
$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !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;

7
src/scss/layout/_dark.scss
View File

@@ -22,7 +22,8 @@ body:not(.theme-dark) .hide-theme-light {
--#{$prefix}bg-forms: #{$dark-mode-darken};
--#{$prefix}bg-surface: #{$dark};
--#{$prefix}bg-surface-dark: #{$dark-mode-darken};
--#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
--#{$prefix}bg-surface-secondary: #{$dark-mode-lighten};
--#{$prefix}bg-surface-tertiary: #{$dark-mode-darken};
--#{$prefix}link-color: #{lighten($primary, 8%)};
--#{$prefix}link-hover-color: #{$primary};
@@ -118,8 +119,8 @@ body:not(.theme-dark) .hide-theme-light {
background-color: $dark-mode-darken;
}
.avatar {
--#{$prefix}avatar-bg: #{$dark-mode-lighten};
.timeline-event-icon {
background-color: #{$dark-mode-lighten};
}
.markdown,

36
src/scss/layout/_page.scss
View File

@@ -28,14 +28,14 @@
// Content body
.page-body {
margin-top: $content-padding-y;
margin-bottom: $content-padding-y;
margin-top: var(--#{$prefix}content-padding);
margin-bottom: var(--#{$prefix}content-padding);
}
.page-body-card {
background: var(--#{$prefix}bg-surface);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
padding: $content-padding-y 0;
padding: var(--#{$prefix}content-padding) 0;
margin-bottom: 0;
flex: 1;
@@ -80,13 +80,13 @@
justify-content: center;
.page-wrapper & {
margin: $content-padding-y 0 0;
margin: var(--#{$prefix}content-padding) 0 0;
}
}
.page-header-border {
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding: $content-padding-y 0;
padding: var(--#{$prefix}content-padding) 0;
margin: 0 !important;
background-color: var(--#{$prefix}bg-surface);
}
@@ -121,6 +121,32 @@
color: var(--#{$prefix}muted);
}
//
// Page cover
//
.page-cover {
--#{$prefix}page-cover-blur: 20px;
--#{$prefix}page-cover-padding: 1rem;
min-height: 6rem;
padding: var(--#{$prefix}page-cover-padding) 0;
position: relative;
overflow: hidden;
}
.page-cover-img {
position: absolute;
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
pointer-events: none;
filter: blur(var(--#{$prefix}page-cover-blur));
object-fit: cover;
background-size: cover;
background-position: center;
z-index: -1;
}
//
// Page tabs
//

2
src/scss/layout/_root.scss
View File

@@ -12,6 +12,7 @@
--#{$prefix}bg-surface: #{$bg-surface};
--#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
--#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
--#{$prefix}bg-surface-dark: #{$bg-surface-dark};
--#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
@@ -29,6 +30,7 @@
--#{$prefix}code-color: #{$code-color};
--#{$prefix}code-bg: #{$code-bg};
--#{$prefix}content-padding: #{$content-padding};
--#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
--#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
--#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};

12
src/scss/ui/_avatars.scss
View File

@@ -1,6 +1,6 @@
.avatar {
--#{$prefix}avatar-size: #{$avatar-size};
--#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
--#{$prefix}avatar-bg: #{$avatar-bg};
--#{$prefix}avatar-shadow: #{$shadow-inset};
position: relative;
width: var(--#{$prefix}avatar-size);
@@ -81,7 +81,7 @@
.avatar-upload {
width: 4rem;
height: 4rem;
border: 1px dashed var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg;
flex-direction: column;
@include transition(color $transition-time, background-color $transition-time);
@@ -105,9 +105,7 @@
margin-top: .25rem;
}
.page-avatar {
.page-cover ~ * & {
margin-top: calc(calc(-1 * calc(var(--#{$prefix}avatar-size) * .5)) - #{$content-padding-y});
box-shadow: 0 0 0 .25rem $body-bg;
}
.avatar-cover {
margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
}

2
src/scss/ui/_buttons.scss
View File

@@ -2,6 +2,8 @@
// Button
//
.btn {
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-icon-size: #{$icon-size};
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
--#{$prefix}btn-color: var(--#{$prefix}body-color);

2
src/scss/ui/_cards.scss
View File

@@ -197,7 +197,7 @@ Stacked card
.card-header-light {
border-bottom-color: transparent;
background: var(--#{$prefix}bg-surface-secondary);
background: var(--#{$prefix}bg-surface-tertiary);
}
.card-header-tabs {

2
src/scss/ui/_forms.scss
View File

@@ -83,7 +83,7 @@ Form control
}
.form-control-light {
background-color: $gray-100;
background-color: var(--#{$prefix}gray-100);
border-color: transparent;
}

95
src/scss/ui/_lists.scss
View File

@@ -69,101 +69,6 @@
}
}
/**
Timeline
*/
.list-timeline {
position: relative;
padding: 0;
margin: 0;
list-style: none;
> li {
position: relative;
margin-bottom: 1.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.list-timeline-time {
float: right;
margin-left: 1rem;
color: var(--#{$prefix}muted);
}
.list-timeline-icon {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: $white;
text-align: center;
background: var(--#{$prefix}muted);
border-radius: $border-radius-pill;
.icon {
width: 1rem;
height: 1rem;
font-size: 1rem;
}
}
.list-timeline-title {
margin: 0;
font-weight: var(--#{$prefix}font-weight-bold);
}
.list-timeline-content {
margin-left: 3.5rem;
}
@media screen and (min-width: 768px) {
.list-timeline:not(.list-timeline-simple) {
&:before {
position: absolute;
top: 0;
bottom: 0;
left: add(7.5rem, 2px);
z-index: 1;
display: block;
width: 2px;
content: "";
background-color: var(--#{$prefix}border-color);
}
& > li {
z-index: 2;
min-height: 40px;
}
.list-timeline-time {
position: absolute;
top: .5rem;
left: 0;
width: 5.5rem;
margin: 0;
text-align: right;
}
.list-timeline-icon {
top: 0;
left: 6.5rem;
}
.list-timeline-content {
padding: .625rem 0 0 10rem;
margin: 0;
}
}
}
.list-group-transparent {

61
src/scss/ui/_timeline.scss Normal file
View File

@@ -0,0 +1,61 @@
//
// Timeline
//
.timeline {
--#{$prefix}timeline-icon-size: #{$avatar-size};
position: relative;
list-style: none;
padding: 0;
}
//
// Timeline event
//
.timeline-event {
position: relative;
&:not(:last-child) {
margin-bottom: var(--#{$prefix}content-padding);
&:before {
content: "";
position: absolute;
top: var(--#{$prefix}timeline-icon-size);
left: calc(var(--#{$prefix}timeline-icon-size) / 2);
bottom: calc(-1 * var(--#{$prefix}content-padding));
width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius);
}
}
}
.timeline-event-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: var(--#{$prefix}timeline-icon-size, $avatar-size);
height: var(--#{$prefix}timeline-icon-size, $avatar-size);
background: var(--#{$prefix}gray-200);
color: var(--#{$prefix}muted);
border-radius: var(--#{$prefix}border-radius);
z-index: 5
}
.timeline-event-card {
margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}content-padding));
}
//
// Simple timeline
//
.timeline-simple {
.timeline-event-icon {
display: none;
}
.timeline-event-card {
margin-left: 0;
}
}

4
src/scss/vendor/_dropzone.scss vendored
View File

@@ -1,10 +1,10 @@
.dropzone {
border: 1px dashed var(--#{$prefix}border-color);
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
color: var(--#{$prefix}muted);
padding: 1rem;
&.dz-drag-hover {
border: 1px dashed var(--#{$prefix}primary);
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
background: rgba(var(--#{$prefix}primary-rgb), .01);
color: var(--#{$prefix}primary);