mirror of
https://github.com/tabler/tabler.git
synced 2026-06-17 12:50:03 +04:00
layout rebuild
This commit is contained in:
codecalm
+86
-15
@@ -25,6 +25,77 @@ tabler-plugins:
|
||||
|
||||
exclude:
|
||||
- .jekyll-cache
|
||||
- 400.html
|
||||
- 401.html
|
||||
- 403.html
|
||||
- 404.html
|
||||
- 500.html
|
||||
- 503.html
|
||||
- all.html
|
||||
- blank.html
|
||||
- blog.html
|
||||
- buttons.html
|
||||
- calendar.html
|
||||
- cards.html
|
||||
- carousel.html
|
||||
- changelog.html
|
||||
- charts.html
|
||||
- charts-heatmap.html
|
||||
- components.html
|
||||
- crypto-currencies.html
|
||||
- datatables.html
|
||||
- docs.html
|
||||
- dropdowns.html
|
||||
- email.html
|
||||
- empty.html
|
||||
- favicon.ico
|
||||
- flags.html
|
||||
- forgot-password.html
|
||||
- form-elements.html
|
||||
- gallery.html
|
||||
- homepage.html
|
||||
- icons.html
|
||||
- index.html
|
||||
- invoice.html
|
||||
- layout-dark.html
|
||||
- layout-dark-navigation.html
|
||||
- layout-dark-topnav.html
|
||||
- layout-sidebar.html
|
||||
- layout-sidebar-dark.html
|
||||
- layout-sidebar-narrow.html
|
||||
- layout-sidebar-only.html
|
||||
- layout-sidebar-right.html
|
||||
- layouts.html
|
||||
- license.html
|
||||
- lists.html
|
||||
- lookup.html
|
||||
- maintenance.html
|
||||
- maps.html
|
||||
- markdown.md
|
||||
- music.html
|
||||
- pagination.html
|
||||
- pricing.html
|
||||
- profile.html
|
||||
- ribbons.html
|
||||
- rtl.html
|
||||
- search-results.html
|
||||
- sign-in.html
|
||||
- sign-up.html
|
||||
- sitemap.xml
|
||||
- snippets.html
|
||||
- social.html
|
||||
- store.html
|
||||
- tabs.html
|
||||
- terms-of-service.html
|
||||
- tmp.html
|
||||
- tmp2.html
|
||||
- tmp3.html
|
||||
- tmp4.html
|
||||
- tmp-dark.html
|
||||
- tmp-forms.html
|
||||
- typography.html
|
||||
- users.html
|
||||
- welcome.html
|
||||
|
||||
keep_files:
|
||||
- css/ui-kit.css
|
||||
@@ -47,13 +118,13 @@ jekyll_tidy:
|
||||
ignore_env: development
|
||||
|
||||
|
||||
collections:
|
||||
docs:
|
||||
output: true
|
||||
changelog:
|
||||
output: false
|
||||
components:
|
||||
output: true
|
||||
#collections:
|
||||
# docs:
|
||||
# output: false
|
||||
# changelog:
|
||||
# output: false
|
||||
# components:
|
||||
# output: false
|
||||
|
||||
defaults:
|
||||
- scope:
|
||||
@@ -66,14 +137,14 @@ defaults:
|
||||
type: "pages"
|
||||
values:
|
||||
layout: default
|
||||
- scope:
|
||||
type: "docs"
|
||||
values:
|
||||
layout: docs
|
||||
- scope:
|
||||
type: "components"
|
||||
values:
|
||||
layout: component
|
||||
# - scope:
|
||||
# type: "docs"
|
||||
# values:
|
||||
# layout: docs
|
||||
# - scope:
|
||||
# type: "components"
|
||||
# values:
|
||||
# layout: component
|
||||
|
||||
|
||||
colors:
|
||||
|
||||
@@ -92,16 +92,6 @@ base:
|
||||
maintenance:
|
||||
url: maintenance.html
|
||||
title: Maintenance page
|
||||
a:
|
||||
title: A
|
||||
icon: menu
|
||||
children:
|
||||
b:
|
||||
title: B
|
||||
children:
|
||||
c:
|
||||
title: C
|
||||
url: tmp.html
|
||||
|
||||
layouts:
|
||||
title: Layouts
|
||||
|
||||
@@ -47,10 +47,6 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.debug a {
|
||||
color: inherit;
|
||||
margin-right: 1rem;
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
{% include layout/page-title.html title="Invoices" %}
|
||||
{% include layout/page-header.html title="Invoices" %}
|
||||
|
||||
<div class="row row-deck row-cards">
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{% comment %}
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
|
||||
<ul class="sidebar-nav">
|
||||
@@ -62,3 +63,4 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcomment %}
|
||||
@@ -1,3 +1,4 @@
|
||||
{% comment %}
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
<ul class="navbar-nav flex-wrap flex-fill{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for level-1 in site.data.menu %}
|
||||
@@ -49,3 +50,4 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcomment %}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<nav class="navbar navbar-vertical navbar-expand-md navbar-dark navbar-primary" id="navbar-primary">
|
||||
<div class="container">
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quae, veniam? Adipisci alias assumenda debitis dolores ex laudantium nam, nesciunt non, pariatur quis repellat suscipit unde vel veniam veritatis voluptatem!
|
||||
</div>
|
||||
|
||||
<div style="opacity: .64;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur cum delectus dicta dolor doloribus dolorum eum expedita facere in nesciunt, nostrum perferendis porro quas, quibusdam ratione rerum sit voluptatum!</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<nav class="navbar navbar-light navbar-secondary" id="navbar-secondary">
|
||||
<div class="container">
|
||||
navbar-secondary
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- Page title -->
|
||||
<div class="page-title-box">
|
||||
<div class="page-header">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
@@ -21,7 +21,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if include.actions %}
|
||||
{% include layout/page-title-actions.html actions=include.actions %}
|
||||
{% include layout/page-header-actions.html actions=include.actions %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +1,5 @@
|
||||
{% comment %}
|
||||
|
||||
<aside class="sidebar{% if page.sidebar-dark %} sidebar-dark{% endif %}{% if page.sidebar-narrow %} sidebar-narrow{% endif %}{% if page.sidebar-right %} sidebar-right{% endif %}">
|
||||
<!-- Sidebar logo -->
|
||||
{% include layout/navbar-logo.html prefix="sidebar" %}
|
||||
@@ -25,3 +27,4 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{% endcomment %}
|
||||
@@ -1,3 +1,5 @@
|
||||
{% comment %}
|
||||
|
||||
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
|
||||
@@ -74,4 +76,6 @@
|
||||
{% endunless %}
|
||||
|
||||
</header>
|
||||
{% endunless %}
|
||||
{% endunless %}
|
||||
|
||||
{% endcomment %}
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
layout: default
|
||||
menu: components
|
||||
page-title: Tabler components
|
||||
page-header: Tabler components
|
||||
og-component: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,24 +2,19 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
{% assign page-title = page.page-title | default: layout.page-title %}
|
||||
{% assign page-header = page.page-header | default: layout.page-header %}
|
||||
|
||||
<div class="page">
|
||||
{% if page.sidebar %}
|
||||
{% include layout/sidebar.html %}
|
||||
{% endif %}
|
||||
{% include layout/navbar-primary.html %}
|
||||
{% include layout/navbar-secondary.html %}
|
||||
|
||||
<div class="content">
|
||||
{% include layout/topnav.html %}
|
||||
<main class="container">
|
||||
{% if page-header %}
|
||||
{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
|
||||
{% endif %}
|
||||
|
||||
<div class="content-page">
|
||||
<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
|
||||
{% if page-title %}
|
||||
{% include layout/page-title.html title=page-title description=page.page-title-description actions=page.page-title-actions pretitle=page.page-pretitle %}
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</main>
|
||||
</div>
|
||||
{{ content }}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
layout: default
|
||||
menu: docs
|
||||
title: Documentation
|
||||
page-title: Documentation
|
||||
page-header: Documentation
|
||||
---
|
||||
|
||||
{% assign current-url = page.url | replace_regex: "^/", "" %}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Index
|
||||
page-title: Index
|
||||
page-header: Index
|
||||
menu: index
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Blog
|
||||
page-title: Blog
|
||||
page-header: Blog
|
||||
menu: extra.blog
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Buttons
|
||||
page-title: Buttons
|
||||
page-header: Buttons
|
||||
done: true
|
||||
menu: base.buttons
|
||||
---
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Calendar
|
||||
page-title: Calendar
|
||||
page-title-actions: calendar
|
||||
page-header: Calendar
|
||||
page-header-actions: calendar
|
||||
menu: base.calendar
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Cards
|
||||
page-title: Cards
|
||||
page-header: Cards
|
||||
menu: base.cards
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Carousel
|
||||
page-title: Carousel
|
||||
page-header: Carousel
|
||||
layout: default
|
||||
done: true
|
||||
menu: base.carousel
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Changelog
|
||||
page-title: Changelog
|
||||
page-header: Changelog
|
||||
menu: changelog
|
||||
done: true
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Heatmap Charts
|
||||
page-title: Heatmap Charts
|
||||
page-header: Heatmap Charts
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Charts
|
||||
page-title: Charts
|
||||
page-header: Charts
|
||||
menu: charts
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Crypto currencies
|
||||
page-title: Crypto currencies
|
||||
page-header: Crypto currencies
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Dropdowns
|
||||
page-title: Dropdowns
|
||||
page-header: Dropdowns
|
||||
---
|
||||
|
||||
{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Email
|
||||
page-title: Crypto currencies
|
||||
page-header: Crypto currencies
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Flags
|
||||
page-title: Flags
|
||||
page-header: Flags
|
||||
done: true
|
||||
---
|
||||
<div class="d-flex flex-row flex-wrap">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Form elements
|
||||
page-title: Form elements
|
||||
page-header: Form elements
|
||||
menu: forms
|
||||
---
|
||||
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Gallery
|
||||
page-title: Gallery
|
||||
page-title-description: 1-12 of 241 photos
|
||||
page-title-actions: photos
|
||||
page-header: Gallery
|
||||
page-header-description: 1-12 of 241 photos
|
||||
page-header-actions: photos
|
||||
done: true
|
||||
menu: base.gallery
|
||||
---
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Homepage
|
||||
page-title: Homepage
|
||||
page-pretitle: Overview
|
||||
page-header: Homepage
|
||||
page-header-pretitle: Overview
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Icons
|
||||
page-title: Icons
|
||||
page-header: Icons
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Dashboard
|
||||
page-title: Dashboard
|
||||
page-pretitle: Overview
|
||||
page-title-actions: buttons
|
||||
page-header: Dashboard
|
||||
page-header-pretitle: Overview
|
||||
page-header-actions: buttons
|
||||
menu: home
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
topmenu-dark: true
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
topnav-dark: true
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
hide-topnav: true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-right: true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
---
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
page-header: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
tmp: true
|
||||
page-title: Tabler licence
|
||||
page-header: Tabler licence
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
---
|
||||
menu: base.lists
|
||||
title: Lists
|
||||
page-title: Lists
|
||||
page-header: Lists
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Lookup company
|
||||
page-title: Lookup company
|
||||
page-header: Lookup company
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Maps
|
||||
page-title: Maps
|
||||
page-header: Maps
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Markdown
|
||||
page-title: Markdown
|
||||
page-header: Markdown
|
||||
---
|
||||
|
||||
# Who's that then?
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Music components
|
||||
page-title: Music components
|
||||
page-header: Music components
|
||||
menu: base.music
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Pricing cards
|
||||
page-title: Pricing cards
|
||||
page-header: Pricing cards
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Profile
|
||||
page-title: Profile
|
||||
page-header: Profile
|
||||
menu: base.profile
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Ribbons
|
||||
page-title: Ribbons
|
||||
page-header: Ribbons
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
---
|
||||
rtl: true
|
||||
title: RTL mode
|
||||
page-title: RTL mode
|
||||
page-header: RTL mode
|
||||
menu: pages.rtl
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
page-title: Search results
|
||||
page-title-description: About 2,410 result (0.19 seconds)
|
||||
page-header: Search results
|
||||
page-header-description: About 2,410 result (0.19 seconds)
|
||||
menu: extra.search-results
|
||||
---
|
||||
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Snippets
|
||||
page-title: Snippets
|
||||
page-title-right: date
|
||||
page-header: Snippets
|
||||
page-header-actions: date
|
||||
menu: extra.snippets
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Social elements
|
||||
page-title: Social elements
|
||||
page-header: Social elements
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Store
|
||||
page-title: Store
|
||||
page-header: Store
|
||||
---
|
||||
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tabs
|
||||
page-title: Tabs
|
||||
page-header: Tabs
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-title: Dark
|
||||
page-header: Dark
|
||||
---
|
||||
|
||||
<div class="row row-md">
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
tmp: true
|
||||
page-header: Layout test
|
||||
page-header-actions: breadcrumb
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-vertical">Toggle sidebar</a>
|
||||
<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-vertical-narrow">Sidebar narrow</a>
|
||||
<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-right">Sidebar left/right</a>
|
||||
<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-color">Sidebar color</a>
|
||||
<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-secondary">Toggle secondary</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for i in (1..6) %}
|
||||
<div class="col-md-6">
|
||||
<div class="card card-body">
|
||||
<div style="height: 10rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for i in (1..6) %}
|
||||
<div class="col-md-4">
|
||||
<div class="card card-body">
|
||||
<div style="height: 10rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
var navbarPrimary = document.getElementById('navbar-primary'),
|
||||
navbarSecondary = document.getElementById('navbar-secondary');
|
||||
|
||||
var events = {
|
||||
'navbar-vertical': function () {
|
||||
navbarPrimary.classList.toggle('navbar-vertical');
|
||||
},
|
||||
'navbar-right': function () {
|
||||
navbarPrimary.classList.toggle('navbar-right');
|
||||
},
|
||||
'navbar-vertical-narrow': function () {
|
||||
navbarPrimary.classList.toggle('navbar-vertical-narrow');
|
||||
},
|
||||
'navbar-color': function () {
|
||||
var classList = navbarPrimary.classList;
|
||||
|
||||
if (classList.contains('navbar-light')) {
|
||||
classList.add('navbar-dark');
|
||||
classList.remove('navbar-light');
|
||||
} else {
|
||||
classList.add('navbar-light');
|
||||
classList.remove('navbar-dark');
|
||||
}
|
||||
},
|
||||
'navbar-secondary': function () {
|
||||
navbarSecondary.classList.toggle('d-none');
|
||||
},
|
||||
};
|
||||
|
||||
for (var name in events) {
|
||||
var event = events[name];
|
||||
|
||||
(function(event){
|
||||
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
||||
event.call();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
})(event);
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
tmp: true
|
||||
page-title: Search results
|
||||
page-header: Search results
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Typography
|
||||
page-title: Typography
|
||||
page-header: Typography
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+3
-3
@@ -1,9 +1,9 @@
|
||||
---
|
||||
layout: default
|
||||
title: Users list
|
||||
page-title: Users
|
||||
page-title-actions: users
|
||||
page-title-description: 1-18 of 413 people
|
||||
page-header: Users
|
||||
page-header-actions: users
|
||||
page-header-description: 1-18 of 413 people
|
||||
done: true
|
||||
menu: base.users
|
||||
---
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@import "layout/navbar";
|
||||
@import "layout/sidenav";
|
||||
@import "layout/page";
|
||||
@import "layout/mainnav";
|
||||
|
||||
@import "ui/alerts";
|
||||
@import "ui/avatars";
|
||||
|
||||
+12
-1
@@ -14,7 +14,7 @@ $icon-fonts: () !default;
|
||||
$theme-color-interval: 10% !default;
|
||||
|
||||
$light: #f5f7fb !default;
|
||||
$dark: #303645 !default;
|
||||
$dark: #354052 !default;
|
||||
|
||||
$light-black: rgba($dark, .24) !default;
|
||||
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
|
||||
@@ -206,6 +206,17 @@ $embed-responsive-aspect-ratios: (
|
||||
)
|
||||
) !default;
|
||||
|
||||
//sidenav
|
||||
$sidenav-width: 15.625rem !default;
|
||||
$sidenav-width-narrow: 4rem !default;
|
||||
$sidenav-bg: $white !default;
|
||||
$sidenav-border-color: $border-color !default;
|
||||
$sidenav-dark-bg: $dark !default;
|
||||
$sidenav-dark-color: $white !default;
|
||||
$sidenav-padding: 1.25rem !default;
|
||||
$sidenav-breakpoint-show: 'sm' !default;
|
||||
$sidenav-breakpoint-folded: 'lg' !default;
|
||||
|
||||
//alerts
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-bg-level: -8 !default;
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
// stylelint-disable property-no-vendor-prefix
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
//overflow-y: scroll;
|
||||
overflow-y: scroll;
|
||||
letter-spacing: $body-letter-spacing;
|
||||
touch-action: manipulation;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
+385
-393
@@ -1,393 +1,385 @@
|
||||
//sidenav
|
||||
$sidenav-width: 16rem;
|
||||
$sidenav-width-narrow: 4rem;
|
||||
$sidenav-bg: $white;
|
||||
$sidenav-border-color: $border-color;
|
||||
$sidenav-dark-bg: $dark;
|
||||
$sidenav-padding: 1.25rem;
|
||||
$sidenav-breakpoint-show: 'sm';
|
||||
$sidenav-breakpoint-folded: 'lg';
|
||||
$sidenav-folded-item-height: 3.5rem;
|
||||
|
||||
@mixin sidebar-narrow {
|
||||
width: $sidenav-width-narrow;
|
||||
|
||||
.sidebar-brand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-brand-logo {
|
||||
&-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
|
||||
> .sidebar-nav-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
width: $sidenav-width;
|
||||
|
||||
> .sidebar-nav-link {
|
||||
color: #ffffff;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: add(1rem, $sidenav-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-subnav {
|
||||
display: block;
|
||||
|
||||
.sidebar-nav-link {
|
||||
padding-left: $sidenav-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .sidebar-nav-link {
|
||||
min-height: $sidenav-folded-item-height;
|
||||
padding: 0 1rem !important;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
width: 2rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 2.5rem;
|
||||
top: 1rem;
|
||||
|
||||
text-indent: -99999px;
|
||||
width: $badge-empty-size;
|
||||
height: $badge-empty-size;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-subnav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: $sidenav-folded-item-height;
|
||||
left: $sidenav-width-narrow;
|
||||
right: 0;
|
||||
padding: .5rem 0;
|
||||
background: $dark;
|
||||
box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
|
||||
}
|
||||
|
||||
.sidebar-nav-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-nav-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .content {
|
||||
margin-left: $sidenav-width-narrow;
|
||||
|
||||
.navbar.fixed-top {
|
||||
left: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-right {
|
||||
+ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidenav-width-narrow;
|
||||
|
||||
.navbar.fixed-top {
|
||||
left: 0;
|
||||
right: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide-sidebar-narrow {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-visible {
|
||||
display: flex;
|
||||
|
||||
+ .content .navbar.fixed-top {
|
||||
left: $sidenav-width;
|
||||
}
|
||||
|
||||
.hide-sidebar-visible,
|
||||
+ .content .hide-sidebar-visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Wrapper
|
||||
*/
|
||||
.page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
Content
|
||||
*/
|
||||
.content {
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar + & {
|
||||
margin-left: $sidenav-width;
|
||||
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
margin-left: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
//@include media-breakpoint-up($cards-grid-breakpoint) {
|
||||
// padding-left: $cards-grid-gap / 2;
|
||||
// padding-right: $cards-grid-gap / 2;
|
||||
//}
|
||||
|
||||
@media print {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar
|
||||
*/
|
||||
.sidebar {
|
||||
width: $sidenav-width;
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
padding: 0;
|
||||
background: $sidenav-bg;
|
||||
box-shadow: inset -1px 0 $sidenav-border-color;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
@include media-breakpoint-up($sidenav-breakpoint-show) {
|
||||
@include sidebar-visible;
|
||||
}
|
||||
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
|
||||
@include sidebar-narrow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
line-height: $navbar-height;
|
||||
width: $sidenav-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand-logo {
|
||||
height: 2rem;
|
||||
|
||||
&-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: $sidenav-padding;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
@include scrollbar;
|
||||
|
||||
.sidebar-brand + & {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar menu
|
||||
*/
|
||||
.sidebar-nav {
|
||||
margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
color: $text-muted;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav-link {
|
||||
padding: .5rem $sidenav-padding;
|
||||
transition: .3s color, .3s background-color;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sidebar-nav-item .sidebar-nav-item & {
|
||||
padding-left: add(1.5rem, $sidenav-padding);
|
||||
}
|
||||
|
||||
.sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
|
||||
padding-left: add(3rem, $sidenav-padding);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#fff, .02);
|
||||
text-decoration: none;
|
||||
color: $body-color !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: $body-color !important;
|
||||
box-shadow: inset 3px 0 $primary;
|
||||
background-color: rgba(#fff, .01);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav-arrow {
|
||||
display: block;
|
||||
|
||||
margin-left: auto;
|
||||
@include caret(right);
|
||||
|
||||
&:after {
|
||||
transition: .3s transform;
|
||||
}
|
||||
|
||||
.sidebar-nav-link[aria-expanded="true"] &:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-subnav {
|
||||
}
|
||||
|
||||
.sidebar-nav-title {
|
||||
@include subheader(false);
|
||||
color: inherit;
|
||||
opacity: .8;
|
||||
padding: $sidenav-padding $sidenav-padding .5rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar dark
|
||||
*/
|
||||
.sidebar-dark {
|
||||
background: $sidenav-dark-bg;
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
|
||||
.sidebar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.sidebar-nav-link {
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
@include scrollbar(true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Right sidebar
|
||||
*/
|
||||
.sidebar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
box-shadow: inset 1px 0 $sidenav-border-color;
|
||||
|
||||
+ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidenav-width;
|
||||
|
||||
.navbar.fixed-top {
|
||||
left: 0;
|
||||
right: $sidenav-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Folded sidebar
|
||||
*/
|
||||
.sidebar-narrow {
|
||||
@include sidebar-narrow;
|
||||
}
|
||||
////sidenav
|
||||
//
|
||||
//
|
||||
//@mixin sidebar-narrow {
|
||||
// width: $sidenav-width-narrow;
|
||||
//
|
||||
// .sidebar-brand {
|
||||
// width: 100%;
|
||||
// }
|
||||
//
|
||||
// .sidebar-brand-logo {
|
||||
// &-sm {
|
||||
// display: inline-block;
|
||||
// }
|
||||
//
|
||||
// &-lg {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .sidebar-content {
|
||||
// padding: 0;
|
||||
// overflow: visible;
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav {
|
||||
// margin: 0;
|
||||
//
|
||||
// > .sidebar-nav-item {
|
||||
// position: relative;
|
||||
// white-space: nowrap;
|
||||
//
|
||||
// &:hover {
|
||||
// background: $primary;
|
||||
// width: $sidenav-width;
|
||||
//
|
||||
// > .sidebar-nav-link {
|
||||
// color: #ffffff;
|
||||
//
|
||||
// > span {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// .icon {
|
||||
// margin-right: add(1rem, $sidenav-padding);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .sidebar-subnav {
|
||||
// display: block;
|
||||
//
|
||||
// .sidebar-nav-link {
|
||||
// padding-left: $sidenav-padding;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// > .sidebar-nav-link {
|
||||
// min-height: $sidenav-folded-item-height;
|
||||
// padding: 0 1rem !important;
|
||||
// position: relative;
|
||||
//
|
||||
// .icon {
|
||||
// margin: 0;
|
||||
// width: 2rem;
|
||||
// height: 1.125rem;
|
||||
// }
|
||||
//
|
||||
// > span {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .badge {
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// left: 2.5rem;
|
||||
// top: 1rem;
|
||||
//
|
||||
// text-indent: -99999px;
|
||||
// width: $badge-empty-size;
|
||||
// height: $badge-empty-size;
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .sidebar-subnav {
|
||||
// display: none;
|
||||
// position: absolute;
|
||||
// top: $sidenav-folded-item-height;
|
||||
// left: $sidenav-width-narrow;
|
||||
// right: 0;
|
||||
// padding: .5rem 0;
|
||||
// background: $dark;
|
||||
// box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav-arrow {
|
||||
// display: none !important;
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav-title {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// + .content {
|
||||
// margin-left: $sidenav-width-narrow;
|
||||
//
|
||||
// .navbar.fixed-top {
|
||||
// left: $sidenav-width-narrow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &.sidebar-right {
|
||||
// + .content {
|
||||
// margin-left: 0;
|
||||
// margin-right: $sidenav-width-narrow;
|
||||
//
|
||||
// .navbar.fixed-top {
|
||||
// left: 0;
|
||||
// right: $sidenav-width-narrow;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .hide-sidebar-narrow {
|
||||
// display: none !important
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@mixin sidebar-visible {
|
||||
// display: flex;
|
||||
//
|
||||
// + .content .navbar.fixed-top {
|
||||
// left: $sidenav-width;
|
||||
// }
|
||||
//
|
||||
// .hide-sidebar-visible,
|
||||
// + .content .hide-sidebar-visible {
|
||||
// display: none !important;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Wrapper
|
||||
// */
|
||||
//.page {
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
// width: 100%;
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Content
|
||||
// */
|
||||
//.content {
|
||||
// overflow: hidden;
|
||||
// min-height: 100vh;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//
|
||||
// .sidebar + & {
|
||||
// margin-left: $sidenav-width;
|
||||
//
|
||||
// @if $sidenav-breakpoint-folded {
|
||||
// @include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
// margin-left: $sidenav-width-narrow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||
// margin-left: 0;
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.content-page {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
//
|
||||
// //@include media-breakpoint-up($cards-grid-breakpoint) {
|
||||
// // padding-left: $cards-grid-gap / 2;
|
||||
// // padding-right: $cards-grid-gap / 2;
|
||||
// //}
|
||||
//
|
||||
// @media print {
|
||||
// padding-top: 0 !important;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Sidebar
|
||||
// */
|
||||
//.sidebar {
|
||||
// width: $sidenav-width;
|
||||
// position: fixed;
|
||||
// z-index: $zindex-fixed;
|
||||
// padding: 0;
|
||||
// background: $sidenav-bg;
|
||||
// box-shadow: inset -1px 0 $sidenav-border-color;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// display: none;
|
||||
// flex-direction: column;
|
||||
//
|
||||
// @include media-breakpoint-up($sidenav-breakpoint-show) {
|
||||
// @include sidebar-visible;
|
||||
// }
|
||||
//
|
||||
// @if $sidenav-breakpoint-folded {
|
||||
// @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
|
||||
// @include sidebar-narrow;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.sidebar-brand {
|
||||
// display: block;
|
||||
// text-align: center;
|
||||
//
|
||||
// line-height: $navbar-height;
|
||||
// width: $sidenav-width;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
//}
|
||||
//
|
||||
//.sidebar-brand-logo {
|
||||
// height: 2rem;
|
||||
//
|
||||
// &-sm {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.sidebar-content {
|
||||
// padding: $sidenav-padding;
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// overflow-y: scroll;
|
||||
// @include scrollbar;
|
||||
//
|
||||
// .sidebar-brand + & {
|
||||
// margin-top: $navbar-height;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Sidebar menu
|
||||
// */
|
||||
//.sidebar-nav {
|
||||
// margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
|
||||
// padding: 0;
|
||||
// list-style: none;
|
||||
// user-select: none;
|
||||
// color: $text-muted;
|
||||
//
|
||||
// ul {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// list-style: none;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.sidebar-nav-link {
|
||||
// padding: .5rem $sidenav-padding;
|
||||
// transition: .3s color, .3s background-color;
|
||||
// color: inherit;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
//
|
||||
// .sidebar-nav-item .sidebar-nav-item & {
|
||||
// padding-left: add(1.5rem, $sidenav-padding);
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
|
||||
// padding-left: add(3rem, $sidenav-padding);
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// background-color: rgba(#fff, .02);
|
||||
// text-decoration: none;
|
||||
// color: $body-color !important;
|
||||
// cursor: pointer !important;
|
||||
// }
|
||||
//
|
||||
// &.active {
|
||||
// opacity: 1;
|
||||
// color: $body-color !important;
|
||||
// box-shadow: inset 3px 0 $primary;
|
||||
// background-color: rgba(#fff, .01);
|
||||
// }
|
||||
//
|
||||
// .icon {
|
||||
// width: 1rem;
|
||||
// margin-right: .5rem;
|
||||
// }
|
||||
//
|
||||
// .badge {
|
||||
// margin-left: auto;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.sidebar-nav-arrow {
|
||||
// display: block;
|
||||
//
|
||||
// margin-left: auto;
|
||||
// @include caret(right);
|
||||
//
|
||||
// &:after {
|
||||
// transition: .3s transform;
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav-link[aria-expanded="true"] &:after {
|
||||
// transform: rotate(-45deg);
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.sidebar-subnav {
|
||||
//}
|
||||
//
|
||||
//.sidebar-nav-title {
|
||||
// @include subheader(false);
|
||||
// color: inherit;
|
||||
// opacity: .8;
|
||||
// padding: $sidenav-padding $sidenav-padding .5rem;
|
||||
//
|
||||
// &:not(:first-child) {
|
||||
// margin-top: .5rem;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Sidebar dark
|
||||
// */
|
||||
//.sidebar-dark {
|
||||
// background: $sidenav-dark-bg;
|
||||
// color: $text-muted;
|
||||
// box-shadow: none;
|
||||
//
|
||||
// .sidebar-brand {
|
||||
// filter: brightness(0) invert(1);
|
||||
// }
|
||||
//
|
||||
// .sidebar-nav-link {
|
||||
// &:hover,
|
||||
// &.active {
|
||||
// color: $white !important;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .sidebar-content {
|
||||
// @include scrollbar(true);
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Right sidebar
|
||||
// */
|
||||
//.sidebar-right {
|
||||
// left: auto;
|
||||
// right: 0;
|
||||
// box-shadow: inset 1px 0 $sidenav-border-color;
|
||||
//
|
||||
// + .content {
|
||||
// margin-left: 0;
|
||||
// margin-right: $sidenav-width;
|
||||
//
|
||||
// .navbar.fixed-top {
|
||||
// left: 0;
|
||||
// right: $sidenav-width;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Folded sidebar
|
||||
// */
|
||||
//.sidebar-narrow {
|
||||
// @include sidebar-narrow;
|
||||
//}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
@mixin navbar-vertical {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $sidenav-width;
|
||||
z-index: $zindex-fixed;
|
||||
min-height: auto;
|
||||
align-items: start;
|
||||
|
||||
>.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $sidenav-width;
|
||||
}
|
||||
|
||||
&.navbar-vertical-narrow {
|
||||
width: $sidenav-width-narrow;
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidenav-width;
|
||||
}
|
||||
|
||||
&.navbar-vertical-narrow {
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-right: $sidenav-width-narrow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: map-get($spacers, 4);
|
||||
padding-bottom: map-get($spacers, 4);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
background: $white;
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
background: $sidenav-dark-bg;
|
||||
color: $sidenav-dark-color;
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
&.navbar-expand-#{$breakpoint} {
|
||||
@include navbar-vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-secondary {
|
||||
order: -1;
|
||||
}
|
||||
+180
-180
@@ -1,180 +1,180 @@
|
||||
/*
|
||||
Navbar
|
||||
*/
|
||||
.navbar {
|
||||
|
||||
&, .navbar-dark {
|
||||
min-height: $navbar-height;
|
||||
|
||||
&.fixed-top {
|
||||
+ .content-page {
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
+ .navbar:not(.fixed-top) {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
|
||||
+ .navbar.fixed-top {
|
||||
top: $navbar-height;
|
||||
|
||||
+ .content-page {
|
||||
padding-top: $navbar-height * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($cards-grid-breakpoint) {
|
||||
padding-left: $cards-grid-gap / 2;
|
||||
padding-right: $cards-grid-gap / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse-absolute {
|
||||
@each $breakpoint, $width in $grid-breakpoints {
|
||||
@at-root .navbar-expand-#{$breakpoint} & {
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
z-index: $zindex-sticky;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
navbar toggler
|
||||
*/
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
|
||||
height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
|
||||
margin: $navbar-toggler-margin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.navbar-toggler-icon {
|
||||
$time: $navbar-toggler-transform-time / 2;
|
||||
|
||||
background-image: none !important;
|
||||
position: absolute;
|
||||
width: $navbar-toggler-size;
|
||||
height: $navbar-toggler-item-height;
|
||||
border-radius: 3px;
|
||||
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -($navbar-toggler-size / 2);
|
||||
margin-top: -($navbar-toggler-item-height / 2);
|
||||
|
||||
background: currentColor;
|
||||
transform-origin: center;
|
||||
transition: transform $time, top $time $time, bottom $time $time;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
left: 0;
|
||||
border-radius: inherit;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: $navbar-toggler-item-spacing;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: $navbar-toggler-item-spacing;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] & {
|
||||
transform: rotate(45deg);
|
||||
transition: top $time, bottom $time, transform $time $time, opacity $time;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
navbar with border
|
||||
*/
|
||||
.navbar-border {
|
||||
box-shadow: inset 0 -1px 0 0px $navbar-border-color;
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar logo
|
||||
*/
|
||||
.navbar-brand-logo {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-right: -($navbar-nav-link-padding-x);
|
||||
margin-left: -($navbar-nav-link-padding-x);
|
||||
|
||||
.nav-link {
|
||||
padding-left: $navbar-nav-link-padding-x;
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
@each $breakpoint, $width in $grid-breakpoints {
|
||||
@at-root .navbar-expand-#{$breakpoint} & {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.nav-item:hover,
|
||||
.dropright:hover {
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding-left: add($navbar-nav-link-padding-x, 19px);
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown,
|
||||
.dropright {
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
///*
|
||||
//Navbar
|
||||
// */
|
||||
//.navbar {
|
||||
//
|
||||
// &, .navbar-dark {
|
||||
// min-height: $navbar-height;
|
||||
//
|
||||
// &.fixed-top {
|
||||
// + .content-page {
|
||||
// padding-top: $navbar-height;
|
||||
// }
|
||||
//
|
||||
// + .navbar:not(.fixed-top) {
|
||||
// margin-top: $navbar-height;
|
||||
// }
|
||||
//
|
||||
// + .navbar.fixed-top {
|
||||
// top: $navbar-height;
|
||||
//
|
||||
// + .content-page {
|
||||
// padding-top: $navbar-height * 2;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-up($cards-grid-breakpoint) {
|
||||
// padding-left: $cards-grid-gap / 2;
|
||||
// padding-right: $cards-grid-gap / 2;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.navbar-collapse-absolute {
|
||||
// @each $breakpoint, $width in $grid-breakpoints {
|
||||
// @at-root .navbar-expand-#{$breakpoint} & {
|
||||
// position: absolute;
|
||||
// background: inherit;
|
||||
// z-index: $zindex-sticky;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
//
|
||||
// @include media-breakpoint-up($breakpoint) {
|
||||
// position: static;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//navbar toggler
|
||||
// */
|
||||
//.navbar-toggler {
|
||||
// border: 0;
|
||||
// font-size: $navbar-toggler-font-size;
|
||||
// width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
|
||||
// height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
|
||||
// margin: $navbar-toggler-margin;
|
||||
// position: relative;
|
||||
//}
|
||||
//
|
||||
//
|
||||
//.navbar-toggler-icon {
|
||||
// $time: $navbar-toggler-transform-time / 2;
|
||||
//
|
||||
// background-image: none !important;
|
||||
// position: absolute;
|
||||
// width: $navbar-toggler-size;
|
||||
// height: $navbar-toggler-item-height;
|
||||
// border-radius: 3px;
|
||||
//
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// margin-left: -($navbar-toggler-size / 2);
|
||||
// margin-top: -($navbar-toggler-item-height / 2);
|
||||
//
|
||||
// background: currentColor;
|
||||
// transform-origin: center;
|
||||
// transition: transform $time, top $time $time, bottom $time $time;
|
||||
//
|
||||
// &:before,
|
||||
// &:after {
|
||||
// content: '';
|
||||
// background: inherit;
|
||||
// position: absolute;
|
||||
// height: inherit;
|
||||
// width: inherit;
|
||||
// left: 0;
|
||||
// border-radius: inherit;
|
||||
// transition: inherit;
|
||||
// }
|
||||
//
|
||||
// &:before {
|
||||
// top: $navbar-toggler-item-spacing;
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: $navbar-toggler-item-spacing;
|
||||
// }
|
||||
//
|
||||
// .navbar-toggler[aria-expanded="true"] & {
|
||||
// transform: rotate(45deg);
|
||||
// transition: top $time, bottom $time, transform $time $time, opacity $time;
|
||||
//
|
||||
// &:before {
|
||||
// top: 0;
|
||||
// transform: rotate(-90deg);
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: 0;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//navbar with border
|
||||
//*/
|
||||
//.navbar-border {
|
||||
// box-shadow: inset 0 -1px 0 0px $navbar-border-color;
|
||||
//}
|
||||
//
|
||||
///**
|
||||
//Navbar logo
|
||||
// */
|
||||
//.navbar-brand-logo {
|
||||
// height: 2rem;
|
||||
//}
|
||||
//
|
||||
//.navbar-nav {
|
||||
// margin-right: -($navbar-nav-link-padding-x);
|
||||
// margin-left: -($navbar-nav-link-padding-x);
|
||||
//
|
||||
// .nav-link {
|
||||
// padding-left: $navbar-nav-link-padding-x;
|
||||
// padding-right: $navbar-nav-link-padding-x;
|
||||
// }
|
||||
//
|
||||
// @each $breakpoint, $width in $grid-breakpoints {
|
||||
// @at-root .navbar-expand-#{$breakpoint} & {
|
||||
// @include media-breakpoint-up($breakpoint) {
|
||||
// .nav-item:hover,
|
||||
// .dropright:hover {
|
||||
// > .dropdown-menu {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down($breakpoint) {
|
||||
// .dropdown-menu {
|
||||
// box-shadow: none;
|
||||
// border: 0;
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// .dropdown-item {
|
||||
// padding-left: add($navbar-nav-link-padding-x, 19px);
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .dropdown-menu {
|
||||
// .dropdown,
|
||||
// .dropright {
|
||||
// .dropdown-toggle:after {
|
||||
// margin-left: auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.navbar-brand {
|
||||
// padding: 0;
|
||||
// line-height: 1;
|
||||
//}
|
||||
//
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.page-title-box {
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.25rem;
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
.btn-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -.5rem;
|
||||
margin-bottom: -.5rem !important;
|
||||
margin-right: -.5rem;
|
||||
|
||||
> .btn,
|
||||
|
||||
@@ -185,6 +185,10 @@
|
||||
}
|
||||
|
||||
.card-body {
|
||||
>:last-child:not {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-sm & {
|
||||
padding: map-get($spacers, 3);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user