From 9888183e0a61fe443ebff729cd0944c181cd2a68 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 19 Dec 2020 17:32:06 +0100 Subject: [PATCH] new page headers --- src/pages/_data/people.json | 2 +- src/pages/page-headers.html | 131 ++++++++++++++++++++++++++++++++++++ src/scss/layout/_page.scss | 15 +++++ src/scss/ui/_buttons.scss | 16 ++++- src/scss/ui/_icons.scss | 2 +- 5 files changed, 162 insertions(+), 4 deletions(-) create mode 100644 src/pages/page-headers.html diff --git a/src/pages/_data/people.json b/src/pages/_data/people.json index 798688f3..e4531eeb 100644 --- a/src/pages/_data/people.json +++ b/src/pages/_data/people.json @@ -6,7 +6,7 @@ "full_name": "Paweł Kuna", "email": "paweluna@howstuffworks.com", "gender": "Male", - "company": "Yombu", + "company": "Tabler", "department": "Training", "job_title": "UI Designer", "slogan": "utilize distributed convergence", diff --git a/src/pages/page-headers.html b/src/pages/page-headers.html new file mode 100644 index 00000000..081637b1 --- /dev/null +++ b/src/pages/page-headers.html @@ -0,0 +1,131 @@ +--- +title: Page headers +page-header: Page headers +--- + +{% assign person = site.data.people[0] %} + +
+
+
+
+ {% include ui/avatar.html person=person size="md" %} +
+
+

{{ person.full_name }}

+
+
+
+ {% include ui/icon.html icon="building-skyscraper" %} + {{ person.job_title }} at {{ person.company }} +
+
+ {% include ui/icon.html icon="users" %} + 194 friends +
+
+ {% include ui/icon.html icon="check" color="green" %} Verified +
+
+
+
+
+
+ {% include ui/button.html icon="plus" icon="plus" text="Add to friends" %} + {% include ui/button.html icon="plus" color="primary" icon="message" text="Send message" %} +
+
+
+
+
+ + +
+
+
+
+

Gallery

+
1-12 of 241 photos
+
+
+
+
+
+ + + {% include ui/icon.html icon="plus" %} + +
+
+ + {% include ui/icon.html icon="plus" %} + Add photo + +
+
+
+
+
+ + +
+
+
+
+

Improve cards with no border

+
+ #693 + opened by {{ person.full_name }} + in Calendar Page +
+
+
+
+ {% include ui/button.html icon="plus" icon="edit" text="Edit" %} + {% include ui/button.html icon="plus" icon="bell" text="Subscribe" class="d-none d-md-inline-flex" %} +
+
+
+
+
+ + +
+
+
+
+
+ {% include ui/breadcrumb.html pages="Home,Library,Articles" class="breadcrumb-alternate" %} +
+

+ Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. +

+
+
+
+ {% include ui/button.html icon="plus" icon="edit" text="Edit" class="d-none d-md-inline-flex" %} + {% include ui/button.html color="primary" text="Publish" %} +
+
+
+
+
+ + +
+
+
+
+
+ Overview +
+

+ Dashboard +

+
+
+ {% include layout/header-actions/buttons.html %} +
+
+
+
\ No newline at end of file diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss index 897a0d63..f79a6e5f 100644 --- a/src/scss/layout/_page.scss +++ b/src/scss/layout/_page.scss @@ -37,6 +37,11 @@ } } +.page-header-border { + border-bottom: 1px solid $border-color-transparent; + padding-bottom: $content-padding-y; +} + .page-pretitle { @include subheader; } @@ -56,3 +61,13 @@ margin-inline-end: .25rem; } } + +.page-title-lg { + font-size: $h1-font-size; + line-height: $h1-line-height; +} + +.page-subtitle { + margin-top: .25rem; + color: $text-muted; +} \ No newline at end of file diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index f6f44cac..cd99b815 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -23,13 +23,13 @@ cursor: not-allowed; } - svg, - i { + .icon { width: $icon-size; height: $icon-size; margin: 0 .5rem 0; margin-inline-start: -.25rem; vertical-align: bottom; + color: $text-muted; } .avatar { @@ -54,6 +54,10 @@ background-color: rgba(var(--#{$variable-prefix}btn-color), 1); color: var(--#{$variable-prefix}btn-color-text); + .icon { + color: inherit; + } + &:hover { color: var(--#{$variable-prefix}btn-color-text); background: rgba(var(--#{$variable-prefix}btn-color-darker), 1); @@ -66,6 +70,10 @@ color: rgba(var(--#{$variable-prefix}btn-color), 1); border-color: $border-color-transparent; + .icon { + color: inherit; + } + &:hover { background-color: rgba(var(--#{$variable-prefix}btn-color), 1); color: var(--#{$variable-prefix}btn-color-text); @@ -90,6 +98,10 @@ background-color: transparent; border-color: transparent; + .icon { + color: inherit; + } + &:hover { color: $link-hover-color; border-color: transparent; diff --git a/src/scss/ui/_icons.scss b/src/scss/ui/_icons.scss index 5de6b15a..a02fc7a5 100644 --- a/src/scss/ui/_icons.scss +++ b/src/scss/ui/_icons.scss @@ -2,7 +2,7 @@ width: $font-size-base * $line-height-base; height: $font-size-base * $line-height-base; font-size: $font-size-base * $line-height-base; - vertical-align: sub; + vertical-align: bottom; @if $icon-stroke-width { stroke-width: $icon-stroke-width; -- GitLab