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

topbar search

Browse Source
This commit is contained in:
chomik
2019-06-01 19:51:59 +02:00
parent a0c2c446b9
commit d1839ec1ae
11 changed files with 101 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_includes/cards/card.html
View File

@@ -12,7 +12,7 @@
{% if include.show-form %}
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
<input type="text" class="form-control form-control-sm" placeholder="Search something&hellip;" name="s">
<span class="input-group-btn ml-2">
<button class="btn btn-sm btn-default" type="submit">
<span class="fe fe-search"></span>

6
pages/_includes/cards/form-elements.html
View File

@@ -35,7 +35,7 @@
<div class="form-group">
<label class="form-label">Input group</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
<span class="input-group-append">
<button class="btn btn-primary" type="button">Go!</button>
</span>
@@ -71,7 +71,7 @@
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<span class="col-auto">
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
@@ -82,7 +82,7 @@
<label class="form-label">ZIP Code</label>
<div class="row row-sm">
<div class="col">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<span class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top"

2
pages/_includes/cards/project-box.html
View File

@@ -12,7 +12,7 @@
</a>
</div>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis dolorem earum et, fugiat illum
incidunt modi ne... </p>
incidunt modi ne&hellip; </p>
{% include ui/avatar-list.html text="+5" %}
</div>
</div>

3
pages/_includes/layout/header.html
View File

@@ -1,3 +0,0 @@
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header>

8
pages/_includes/layout/topnav.html
View File

@@ -1,5 +1,13 @@
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header>
{% comment %}
{% if page.nav-position == "top" or page.nav-position == "all" %}
<header class="navbar navbar-expand-md">
<div class="container">
{% include layout/menu.html %}
</div>
</header>
{% endif %}
{% endcomment %}

4
pages/_includes/parts/input-icon.html
View File

@@ -1,7 +1,7 @@
<div class="form-group">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
<span class="input-icon-addon">
{% include ui/icon.html icon="search" %}
</span>
@@ -12,4 +12,4 @@
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>

36
pages/_includes/parts/navbar.html
View File

@@ -11,10 +11,22 @@
<a href="{{ site.base }}" class="navbar-brand text-inherit">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
{% if include.logo %}
<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
<img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
{% if include.search %}
<div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
<div class="input-icon">
<span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
{% endif %}
{% if include.plus-left %}
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
@@ -59,18 +71,6 @@
</li>
</ul>
{% endif %}
{% if include.search %}
<!-- Navbar Search -->
<form class="input-group m-2 my-lg-0 ">
<span class="input-group-prepend">
<button type="button"
class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
</span>
<input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
data-plugin="typeahead">
</form>
{% endif %}
</div>
<ul class="nav navbar-menu order-1 order-lg-2">
@@ -129,8 +129,8 @@
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span>
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
@@ -157,14 +157,14 @@
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>

2
pages/_includes/ui/spinner.html
View File

@@ -1,4 +1,4 @@
{% assign elem = include.element | default: 'div' %}
<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
<span class="sr-only">loading...</span>
<span class="sr-only">loading&hellip;</span>
</{{ elem }}>

6
pages/_layouts/default.html
View File

@@ -9,13 +9,7 @@ layout: base
{% endif %}
<div class="main-content flex-fill d-flex flex-column mw-100">
{% include layout/header.html %}
{% comment %}
{% if page.nav-position == "top" or page.nav-position == "all" %}
{% include layout/topnav.html %}
{% endif %}
{% endcomment %}
<div class="d-flex flex-fill">

58
scss/_variables.scss
View File

@@ -105,6 +105,9 @@ $avatar-sizes: (
"xl": 6rem
) !default;
/**
Fonts
*/
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.375 !default;
@@ -116,7 +119,7 @@ Typography
*/
$headings-font-weight: 600 !default;
$small-font-size: 80% !default;
$small-font-size: 87.5% !default;
$h1-font-size: $font-size-base * 1.875 !default;
$h2-font-size: $font-size-base * 1.5 !default;
@@ -129,13 +132,51 @@ $blockquote-font-size: $h4-font-size !default;
$lead-font-size: $h3-font-size !default;
/**
Ribbons
Sizing
*/
$ribbon-margin: .25rem !default;
$spacer: 1rem !default;
$spacers: (
0: 0rem,
1: .25rem,
2: .5rem,
4: 1rem,
5: 1.5rem,
6: 2rem,
7: 2.5rem,
8: 3rem,
) !default;
$loader-size: 2.5rem !default;
$size-spacers: (
9: 4rem,
10: 5rem,
11: 6rem,
12: 8rem,
13: 10rem,
14: 12rem,
15: 14rem,
16: 16rem,
17: 18rem,
18: 20rem,
auto: auto,
px: 1px,
full: 100%
) !default;
$sizes: (
$size-max-spacers: (
xs: 20rem,
sm: 24rem,
md: 28rem,
lg: 32rem,
xl: 36rem,
2 xl: 42rem,
3 xl: 48rem,
4 xl: 56rem,
5 xl: 64rem,
6 xl: 72rem,
full: 100%
) !default;
$sizes-percentage: (
1: 1%,
25: 25%,
50: 50%,
@@ -144,6 +185,13 @@ $sizes: (
auto: auto
) !default;
/**
Ribbons
*/
$ribbon-margin: .25rem !default;
$loader-size: 2.5rem !default;
$generate-social-colors: true !default;
$generate-color-hues: true !default;
$generate-colors: true !default;

48
scss/utils/_sizing.scss
View File

@@ -10,41 +10,21 @@
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.h-1 { height: .25rem !important; }
.h-2 { height: .5rem !important; }
.h-3 { height: .75rem !important; }
.h-4 { height: 1rem !important; }
.h-6 { height: 1.5rem !important; }
.h-8 { height: 2rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }
.h-16 { height: 4rem !important; }
.h-24 { height: 6rem !important; }
.h-32 { height: 8rem !important; }
.h-48 { height: 12rem !important; }
.h-64 { height: 16rem !important; }
.h-auto { height: auto !important; }
.h-px { height: 1px !important; }
.h-full { height: 100% !important; }
@each $size-name, $size in $sizes-percentage {
.w-#{$size-name}p { width: $size !important; }
.h-#{$size-name}p { height: $size !important; }
}
@each $size-name, $size in map_merge($spacers, $size-spacers) {
.w-#{$size-name} { width: $size !important; }
.h-#{$size-name} { height: $size !important; }
}
.h-screen { height: 100vh !important; }
.w-1 { width: .25rem !important; }
.w-2 { width: .5rem !important; }
.w-3 { width: .75rem !important; }
.w-4 { width: 1rem !important; }
.w-6 { width: 1.5rem !important; }
.w-8 { width: 2rem !important; }
.w-10 { width: 2.5rem !important; }
.w-12 { width: 3rem !important; }
.w-16 { width: 4rem !important; }
.w-24 { width: 6rem !important; }
.w-32 { width: 8rem !important; }
.w-48 { width: 12rem !important; }
.w-64 { width: 16rem !important; }
.w-auto { width: auto !important; }
.w-px { width: 1px !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
@each $size-name, $size in $size-max-spacers {
.max-w-#{$size-name} { max-width: $size !important; }
.max-h-#{$size-name} { max-height: $size !important; }
}