mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
navbar expanded, nadbar dark init
This commit is contained in:
chomik
6
img/logo-small.svg
Normal file
6
img/logo-small.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="68" height="68" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M64.61 16.202A17.595 17.595 0 0 0 51.8 3.391a114.585 114.585 0 0 0-35.596 0A17.595 17.595 0 0 0 3.39 16.202a114.577 114.577 0 0 0 0 35.596 17.595 17.595 0 0 0 12.812 12.811 114.585 114.585 0 0 0 35.596 0A17.595 17.595 0 0 0 64.61 51.798a114.705 114.705 0 0 0 0-35.596z" fill="#2D89EF" fill-rule="nonzero"/>
|
||||
<path d="M33.327 36.329a35.68 35.68 0 0 1-11.09 10.973 4.816 4.816 0 0 1-4.78.123A4.643 4.643 0 0 1 15 43.397a4.638 4.638 0 0 1 2.367-4.08 24.319 24.319 0 0 0 6.088-5.337 27.697 27.697 0 0 0-6.088-5.294c-2.258-1.32-2.998-4.188-1.653-6.405 1.345-2.216 4.266-2.943 6.523-1.622a35.666 35.666 0 0 1 11.09 10.888 4.581 4.581 0 0 1 0 4.782zM49.2 46H37.8c-2.111 0-3.8-1.02-3.8-3s1.71-3 3.8-3h11.4c2.111 0 3.8 1.02 3.8 3s-1.71 3-3.8 3z" fill="#FFF"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 879 B |
7
img/logo.svg
Normal file
7
img/logo.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="232" height="68" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M64.61 16.202A17.595 17.595 0 0 0 51.8 3.391a114.585 114.585 0 0 0-35.596 0A17.595 17.595 0 0 0 3.39 16.202a114.577 114.577 0 0 0 0 35.596 17.595 17.595 0 0 0 12.812 12.811 114.585 114.585 0 0 0 35.596 0A17.595 17.595 0 0 0 64.61 51.798a114.705 114.705 0 0 0 0-35.596z" fill="#2D89EF" fill-rule="nonzero"/>
|
||||
<path d="M33.327 36.329a35.68 35.68 0 0 1-11.09 10.973 4.816 4.816 0 0 1-4.78.123A4.643 4.643 0 0 1 15 43.397a4.638 4.638 0 0 1 2.367-4.08 24.319 24.319 0 0 0 6.088-5.337 27.697 27.697 0 0 0-6.088-5.294c-2.258-1.32-2.998-4.188-1.653-6.405 1.345-2.216 4.266-2.943 6.523-1.622a35.666 35.666 0 0 1 11.09 10.888 4.581 4.581 0 0 1 0 4.782zM49.2 46H37.8c-2.111 0-3.8-1.02-3.8-3s1.71-3 3.8-3h11.4c2.111 0 3.8 1.02 3.8 3s-1.71 3-3.8 3z" fill="#FFF"/>
|
||||
<path d="M105.784 46.096c.448 0 .856.216 1.224.648.368.432.552 1 .552 1.704 0 .864-.472 1.592-1.416 2.184-.944.592-2.008.888-3.192.888-1.984 0-3.656-.424-5.016-1.272-1.36-.848-2.04-2.648-2.04-5.4V31.6h-2.208c-.768 0-1.408-.256-1.92-.768S91 29.68 91 28.912c0-.736.256-1.352.768-1.848s1.152-.744 1.92-.744h2.208v-3.072c0-.832.28-1.528.84-2.088.56-.56 1.256-.84 2.088-.84.8 0 1.472.28 2.016.84.544.56.816 1.256.816 2.088v3.072h3.408c.768 0 1.408.256 1.92.768s.768 1.152.768 1.92c0 .736-.256 1.352-.768 1.848s-1.152.744-1.92.744h-3.408v13.008c0 .672.176 1.16.528 1.464.352.304.832.456 1.44.456.256 0 .608-.064 1.056-.192.384-.16.752-.24 1.104-.24zm28.032-20.736c.832 0 1.52.272 2.064.816.544.544.816 1.248.816 2.112v20.304c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.512-.272-2.04-.816-.528-.544-.808-1.232-.84-2.064-.8.928-1.88 1.72-3.24 2.376A9.767 9.767 0 0 1 123.4 52c-2.208 0-4.208-.568-6-1.704-1.792-1.136-3.208-2.712-4.248-4.728-1.04-2.016-1.56-4.304-1.56-6.864 0-2.56.512-4.856 1.536-6.888s2.424-3.616 4.2-4.752c1.776-1.136 3.736-1.704 5.88-1.704 1.536 0 2.976.28 4.32.84 1.344.56 2.48 1.272 3.408 2.136v-.048c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84zm-9.696 21.36c2.08 0 3.776-.76 5.088-2.28 1.312-1.52 1.968-3.432 1.968-5.736s-.656-4.224-1.968-5.76c-1.312-1.536-3.008-2.304-5.088-2.304-2.048 0-3.728.768-5.04 2.304-1.312 1.536-1.968 3.456-1.968 5.76s.648 4.216 1.944 5.736c1.296 1.52 2.984 2.28 5.064 2.28zm32.112-21.36c2.208 0 4.208.568 6 1.704 1.792 1.136 3.208 2.712 4.248 4.728 1.04 2.016 1.56 4.304 1.56 6.864 0 2.56-.512 4.856-1.536 6.888s-2.424 3.616-4.2 4.752c-1.776 1.136-3.736 1.704-5.88 1.704-1.536 0-2.984-.312-4.344-.936-1.36-.624-2.488-1.384-3.384-2.28v.288c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.52-.272-2.064-.816-.544-.544-.816-1.248-.816-2.112V18.928c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84.832 0 1.52.28 2.064.84.544.56.816 1.256.816 2.088V28.96c.768-.96 1.84-1.8 3.216-2.52a9.196 9.196 0 0 1 4.32-1.08zm-.72 21.36c2.048 0 3.728-.768 5.04-2.304 1.312-1.536 1.968-3.456 1.968-5.76s-.648-4.216-1.944-5.736c-1.296-1.52-2.984-2.28-5.064-2.28s-3.776.76-5.088 2.28c-1.312 1.52-1.968 3.432-1.968 5.736s.656 4.224 1.968 5.76c1.312 1.536 3.008 2.304 5.088 2.304zm23.568 1.872c0 .832-.28 1.528-.84 2.088-.56.56-1.256.84-2.088.84-.8 0-1.472-.28-2.016-.84-.544-.56-.816-1.256-.816-2.088V18.928c0-.832.28-1.528.84-2.088.56-.56 1.256-.84 2.088-.84.8 0 1.472.28 2.016.84.544.56.816 1.256.816 2.088v29.664zm29.28-10.512c-.032.768-.336 1.392-.912 1.872-.576.48-1.248.72-2.016.72h-15.84c.384 1.888 1.264 3.368 2.64 4.44 1.376 1.072 2.928 1.608 4.656 1.608 1.312 0 2.336-.12 3.072-.36.736-.24 1.32-.496 1.752-.768.432-.272.728-.456.888-.552.576-.288 1.12-.432 1.632-.432.672 0 1.248.24 1.728.72s.72 1.04.72 1.68c0 .864-.448 1.648-1.344 2.352-.896.736-2.096 1.36-3.6 1.872a14.065 14.065 0 0 1-4.56.768c-2.688 0-5.032-.56-7.032-1.68-2-1.12-3.544-2.664-4.632-4.632-1.088-1.968-1.632-4.184-1.632-6.648 0-2.752.576-5.168 1.728-7.248 1.152-2.08 2.672-3.672 4.56-4.776 1.888-1.104 3.904-1.656 6.048-1.656 2.112 0 4.104.576 5.976 1.728 1.872 1.152 3.368 2.704 4.488 4.656a12.516 12.516 0 0 1 1.68 6.336zm-12.144-7.44c-3.712 0-5.904 1.744-6.576 5.232h12.576v-.336c-.128-1.344-.784-2.496-1.968-3.456s-2.528-1.44-4.032-1.44zm30.288-5.28c.96 0 1.768.272 2.424.816.656.544.984 1.184.984 1.92 0 .992-.256 1.736-.768 2.232a2.532 2.532 0 0 1-1.824.744c-.48 0-1.024-.112-1.632-.336a20.636 20.636 0 0 0-.648-.192 3.915 3.915 0 0 0-1.08-.144c-.832 0-1.632.256-2.4.768s-1.4 1.288-1.896 2.328c-.496 1.04-.744 2.28-.744 3.72v11.376c0 .832-.272 1.528-.816 2.088-.544.56-1.232.84-2.064.84-.832 0-1.52-.28-2.064-.84-.544-.56-.816-1.256-.816-2.088V28.768c0-.832.272-1.528.816-2.088.544-.56 1.232-.84 2.064-.84.832 0 1.52.28 2.064.84.544.56.816 1.256.816 2.088v.624c.736-1.312 1.792-2.312 3.168-3a9.74 9.74 0 0 1 4.416-1.032z" fill="#4A4A4A"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.5 KiB |
158
pages/_includes/layout/sidenav-content.html
Normal file
158
pages/_includes/layout/sidenav-content.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<a href="{{ site.base }}" class="navbar-brand text-inherit">
|
||||
<img src="{{ site.base }}/img/logo-small.svg" alt="" class="navbar-brand-logo mr-3">
|
||||
</a>
|
||||
<ul class="navbar-nav mb-md-4">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
{% include ui/icon.html icon="clipboard" %}
|
||||
<span class="nav-link-text">Getting started</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#" data-toggle="collapse" role="button" aria-expanded="false">
|
||||
{% include ui/icon.html icon="book-open" %}
|
||||
<span class="nav-link-text">Components</span>
|
||||
</a>
|
||||
<div class="collapse">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Avatars
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Badges
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Button group
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Lists
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Page headers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Social post
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Spinners
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Toasts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
{% include ui/icon.html icon="git-branch" %}
|
||||
<span class="nav-link-text">Changelog</span>
|
||||
<span class="badge bg-primary text-white ml-auto">v1.0.0</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1,8 +1,10 @@
|
||||
<div class="sidenav sidenav-narrow">
|
||||
1
|
||||
<div class="sidenav sidenav-narrow sidenav-dark sidenav-expand-md">
|
||||
<div class="container">
|
||||
{% include layout/sidenav-content.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="sidenav">
|
||||
2
|
||||
<div class="sidenav sidenav-expand-xl">
|
||||
<div class="container">
|
||||
{% include layout/sidenav-content.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<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/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
|
||||
{% if include.logo %}<img src="{{ site.base }}/img/logo.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
|
||||
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
|
||||
</a>
|
||||
|
||||
|
||||
@@ -7,10 +7,8 @@ layout: base
|
||||
|
||||
<div class="flex-fill d-flex flex-column mw-100">
|
||||
{% include layout/header.html %}
|
||||
{% comment %}{% include layout/topnav.html %}{% endcomment %}
|
||||
|
||||
<div class="d-flex flex-fill">
|
||||
{% comment %}{% include layout/sidebar.html %}{% endcomment %}
|
||||
|
||||
<div class="flex-fill px-lg-2 mw-100">
|
||||
<div class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
|
||||
|
||||
@@ -47,7 +47,7 @@ $white: #fff !default;
|
||||
$body-bg: #f5f7fb !default;
|
||||
|
||||
$text-color: #495057 !default;
|
||||
$text-muted: #9aa0ac !default;
|
||||
$text-muted: #888e9a !default;
|
||||
$text-muted-light: #adb5bd !default;
|
||||
|
||||
$border-color: rgba(0, 40, 100, .12) !default;
|
||||
@@ -171,6 +171,14 @@ $pagination-bg: transparent !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-color: rgba($text-muted-light, .5) !default;
|
||||
|
||||
//sidenav
|
||||
$sidenav-bg: $white !default;
|
||||
$sidenav-border-color: $border-color !default;
|
||||
|
||||
$sidenav-dark-bg: $dark !default;
|
||||
|
||||
$sidenav-link-padding-x: .5rem !default;
|
||||
|
||||
//spinner
|
||||
$spinner-width: 1.5rem !default;
|
||||
$spinner-height: 1.5rem !default;
|
||||
|
||||
@@ -3,26 +3,10 @@
|
||||
min-height: 3.75rem;
|
||||
padding: .75rem 1rem;
|
||||
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-active-border .nav-link {
|
||||
margin: -.75rem 0;
|
||||
line-height: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
$sidebar-width: 15rem;
|
||||
|
||||
.sidebar {
|
||||
flex: 1 0 15rem;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
background: #fff;
|
||||
border-right: 1px solid $border-color;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
max-width: 90vw;
|
||||
margin-left: -($sidebar-width);
|
||||
transition: .3s transform;
|
||||
|
||||
@at-root body.sidebar-opened & {
|
||||
transform: translate($sidebar-width, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(1px);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: block;
|
||||
transition: .3s backdrop-filter, .3s opacity;
|
||||
|
||||
@at-root body.sidebar-opened & {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-btn {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
color: $text-muted !important;
|
||||
background: theme-color-lightest($text-muted);
|
||||
border-radius: 50%;
|
||||
box-shadow: $box-shadow-sm;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,81 @@
|
||||
/*
|
||||
Sidebar
|
||||
*/
|
||||
.sidenav {
|
||||
background: $dark;
|
||||
background: $sidenav-bg;
|
||||
width: 16rem;
|
||||
outline: 1px solid red;
|
||||
min-width: 16rem;
|
||||
border-right: 1px solid $sidenav-border-color;
|
||||
padding: .75rem 1rem;
|
||||
|
||||
.nav-link {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Narrow sidebar
|
||||
*/
|
||||
.sidenav-narrow {
|
||||
width: 4rem
|
||||
width: 4rem;
|
||||
min-width: 4rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Right sidebar
|
||||
*/
|
||||
.sidenav-right {
|
||||
order: 9;
|
||||
border-left: 1px solid $sidenav-border-color;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Dark sidebar
|
||||
*/
|
||||
.sidenav-dark {
|
||||
background-color: $sidenav-dark-bg;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@each $breakpoint, $dimension in $grid-breakpoints {
|
||||
|
||||
.sidenav-expand-#{$breakpoint} {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(#{$breakpoint}) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: block;
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
padding: .625rem $sidenav-link-padding-x;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
top: auto;
|
||||
left: $sidenav-link-padding-x;
|
||||
right: $sidenav-link-padding-x;
|
||||
bottom: calc(-#{$navbar-padding-y} - #{$border-width});
|
||||
border-left: 0;
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav > [class*="container"] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
@import "layout/grid";
|
||||
@import "layout/header";
|
||||
@import "layout/navbar";
|
||||
@import "layout/sidebar";
|
||||
@import "layout/sidenav";
|
||||
@import "layout/page";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user