Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-13 23:02:23 +04:00
Code Issues Projects Releases Wiki Activity

new page headers

Browse Source
This commit is contained in:
codecalm
2020-12-19 17:32:06 +01:00
parent b8ae6be923
commit 9888183e0a
5 changed files with 162 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_data/people.json
+1 -1
View File
@@ -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",
src/pages/page-headers.html
+131
View File
@@ -0,0 +1,131 @@
---
title: Page headers
page-header: Page headers
---
{% assign person = site.data.people[0] %}
<div class="my-5">
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="md" %}
</div>
<div class="col">
<h2 class="page-title">{{ person.full_name }}</h2>
<div class="page-subtitle">
<div class="row">
<div class="col-auto">
{% include ui/icon.html icon="building-skyscraper" %}
<a href="#" class="text-reset">{{ person.job_title }} at {{ person.company }}</a>
</div>
<div class="col-auto">
{% include ui/icon.html icon="users" %}
<a href="#" class="text-reset">194 friends</a>
</div>
<div class="col-auto text-success">
{% include ui/icon.html icon="check" color="green" %} Verified
</div>
</div>
</div>
</div>
<div class="col-auto d-none d-md-flex">
<div class="btn-list">
{% 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" %}
</div>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Gallery</h2>
<div class="text-muted mt-1">1-12 of 241 photos</div>
</div>
<div class="col-auto ms-auto d-print-none">
<div class="d-flex">
<div class="me-3 d-none d-md-block">
<div class="input-icon">
<input type="text" class="form-control" placeholder="Search…">
<span class="input-icon-addon">
{% include ui/icon.html icon="plus" %}
</span>
</div>
</div>
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
Add photo
</a>
</div>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="page-header page-header-border">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Improve cards with no border</h2>
<div class="text-muted mt-1">
<a href="#" class="text-reset">#693</a>
opened by <a href="#" class="text-body">{{ person.full_name }}</a>
in <a href="#" class="text-body">Calendar Page</a>
</div>
</div>
<div class="col-auto">
<div class="btn-list">
{% 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" %}
</div>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="page-header">
<div class="row align-items-center mw-100">
<div class="col">
<div class="mb-1">
{% include ui/breadcrumb.html pages="Home,Library,Articles" class="breadcrumb-alternate" %}
</div>
<h2 class="page-title">
<span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
</h2>
</div>
<div class="col-auto">
<div class="btn-list">
{% 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" %}
</div>
</div>
</div>
</div>
</div>
<div class="my-5">
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<div class="page-pretitle">
Overview
</div>
<h2 class="page-title">
Dashboard
</h2>
</div>
<div class="col-auto ms-auto">
{% include layout/header-actions/buttons.html %}
</div>
</div>
</div>
</div>
src/scss/layout/_page.scss
+15
View File
@@ -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;
}
src/scss/ui/_buttons.scss
+14 -2
View File
@@ -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;
src/scss/ui/_icons.scss
+1 -1
View File
@@ -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;