From 14af3c7c1c850bfa7d343f93ee7eb0f50718dfd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Tue, 15 Nov 2022 21:03:18 +0100 Subject: [PATCH] Profile page (#1288) --- _config.yml | 2 + src/pages/_data/menu.yml | 3 + src/pages/_data/timeline.yml | 31 ++++ src/pages/_docs/timelines.md | 4 +- src/pages/_includes/cards/timeline.html | 161 +++++++++--------- .../_includes/layout/headers/profile.html | 38 +++++ src/pages/_includes/layout/navbar-side.html | 2 +- src/pages/_includes/parts/modals/success.html | 2 +- src/pages/profile.html | 32 ++++ src/pages/sign-in-link.html | 20 +++ src/scss/_core.scss | 1 + src/scss/_variables.scss | 37 ++-- src/scss/layout/_dark.scss | 7 +- src/scss/layout/_page.scss | 36 +++- src/scss/layout/_root.scss | 2 + src/scss/ui/_avatars.scss | 12 +- src/scss/ui/_buttons.scss | 2 + src/scss/ui/_cards.scss | 2 +- src/scss/ui/_forms.scss | 2 +- src/scss/ui/_lists.scss | 95 ----------- src/scss/ui/_timeline.scss | 61 +++++++ src/scss/vendor/_dropzone.scss | 4 +- 22 files changed, 350 insertions(+), 206 deletions(-) create mode 100644 src/pages/_data/timeline.yml create mode 100644 src/pages/_includes/layout/headers/profile.html create mode 100644 src/pages/profile.html create mode 100644 src/pages/sign-in-link.html create mode 100644 src/scss/ui/_timeline.scss diff --git a/_config.yml b/_config.yml index 8173e75a4..fffa02be6 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 71bbcf998..825c4ee42 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -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 diff --git a/src/pages/_data/timeline.yml b/src/pages/_data/timeline.yml new file mode 100644 index 000000000..a5855541c --- /dev/null +++ b/src/pages/_data/timeline.yml @@ -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 \ No newline at end of file diff --git a/src/pages/_docs/timelines.md b/src/pages/_docs/timelines.md index 3fc98c0ac..0518ce414 100644 --- a/src/pages/_docs/timelines.md +++ b/src/pages/_docs/timelines.md @@ -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 %} diff --git a/src/pages/_includes/cards/timeline.html b/src/pages/_includes/cards/timeline.html index e95eb6ce8..9bec97986 100644 --- a/src/pages/_includes/cards/timeline.html +++ b/src/pages/_includes/cards/timeline.html @@ -1,83 +1,90 @@ -
-
-

{{ include.title | default: 'Timeline' }}

-
-
-
+
+ + +
  • +
    {% include ui/icon.html icon="settings" %}
    +
    +
    +
    2 weeks ago
    +

    System updated to v2.02

    +

    Check the complete changelog at the activity + page.

    +
    +
    +
    • + diff --git a/src/pages/_includes/layout/headers/profile.html b/src/pages/_includes/layout/headers/profile.html new file mode 100644 index 000000000..e37d82bd7 --- /dev/null +++ b/src/pages/_includes/layout/headers/profile.html @@ -0,0 +1,38 @@ +{% assign person = site.data.people[3] %} + +
    +
    +
    +
    + {% include ui/avatar.html person=person rounded=true size="lg" %} +
    +
    +

    {{ person.full_name }}

    +
    Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr. +
    + +
    +
    + {% include ui/icon.html icon="map" inline=true %} + {{ person.university }}, {{ person.country }} +
    +
    + {% include ui/icon.html icon="mail" inline=true %} + {{ person.email }} +
    +
    + {% include ui/icon.html icon="cake" inline=true %} + {{ person.birth_date }} +
    +
    +
    +
    +
    + {% 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" %} +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/src/pages/_includes/layout/navbar-side.html b/src/pages/_includes/layout/navbar-side.html index ac88c2962..53c8de0f6 100644 --- a/src/pages/_includes/layout/navbar-side.html +++ b/src/pages/_includes/layout/navbar-side.html @@ -55,7 +55,7 @@
    Status - Profile + Profile Feedback
    Settings diff --git a/src/pages/_includes/parts/modals/success.html b/src/pages/_includes/parts/modals/success.html index 36dc36d46..4a3b6e856 100644 --- a/src/pages/_includes/parts/modals/success.html +++ b/src/pages/_includes/parts/modals/success.html @@ -5,7 +5,7 @@ {% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %}

    Payment succedeed

    -
    Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
    +
    Your payment of $290 has been successfully submitted. Your invoice has been sent to {{ site.email }}.
    diff --git a/src/pages/profile.html b/src/pages/profile.html new file mode 100644 index 000000000..66ac6e86e --- /dev/null +++ b/src/pages/profile.html @@ -0,0 +1,32 @@ +--- +title: Profile +page-header-file: profile +--- + +
    +
    + {% include cards/timeline.html %} +
    +
    +
    +
    + {% include cards/user-info.html %} +
    +
    +
    +
    +

    About Me

    +
    +

    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. +

    +
    +
    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/src/pages/sign-in-link.html b/src/pages/sign-in-link.html new file mode 100644 index 000000000..2ef606f5c --- /dev/null +++ b/src/pages/sign-in-link.html @@ -0,0 +1,20 @@ +--- +layout: single +title: Sign in link +--- + +
    +
    +

    Check your inbox

    + +

    + We've sent you a magic link to {{ site.email }}.
    + Please click the link to confirm your address. +

    +
    + +
    + Can't see the email? Please check the spam folder.
    + Wrong email? Please re-enter your address. +
    +
    \ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index dd043a9f4..ea8247559 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -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"; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 9f891b4e7..ac88fc866 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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,") !default; diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss index 6a18f7d1b..4b3db0bef 100644 --- a/src/scss/layout/_dark.scss +++ b/src/scss/layout/_dark.scss @@ -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, diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss index c64817f5e..82ae1c3dc 100644 --- a/src/scss/layout/_page.scss +++ b/src/scss/layout/_page.scss @@ -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 // diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss index 7001da853..5fec5785d 100644 --- a/src/scss/layout/_root.scss +++ b/src/scss/layout/_root.scss @@ -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}; diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss index 8b5813e20..ccf7c1f6d 100644 --- a/src/scss/ui/_avatars.scss +++ b/src/scss/ui/_avatars.scss @@ -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)); } \ No newline at end of file diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 66013c297..85cc7bb5a 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -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); diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss index f56d0676f..1a94f036b 100644 --- a/src/scss/ui/_cards.scss +++ b/src/scss/ui/_cards.scss @@ -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 { diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss index 1e0c0a965..1fe0a9e01 100644 --- a/src/scss/ui/_forms.scss +++ b/src/scss/ui/_forms.scss @@ -83,7 +83,7 @@ Form control } .form-control-light { - background-color: $gray-100; + background-color: var(--#{$prefix}gray-100); border-color: transparent; } diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss index 9794a52c1..1befa94c9 100644 --- a/src/scss/ui/_lists.scss +++ b/src/scss/ui/_lists.scss @@ -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 { diff --git a/src/scss/ui/_timeline.scss b/src/scss/ui/_timeline.scss new file mode 100644 index 000000000..bccbf420b --- /dev/null +++ b/src/scss/ui/_timeline.scss @@ -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; + } +} diff --git a/src/scss/vendor/_dropzone.scss b/src/scss/vendor/_dropzone.scss index 01546590d..2ccd0c421 100644 --- a/src/scss/vendor/_dropzone.scss +++ b/src/scss/vendor/_dropzone.scss @@ -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);