mirror of
https://github.com/tabler/tabler.git
synced 2026-08-06 03:12:26 +04:00
Merge branches 'dev' and 'dev-navbar' of https://github.com/tabler/tabler into dev
Conflicts: pages/_docs/progress.md
This commit is contained in:
codecalm
+7
-6
@@ -6,7 +6,7 @@ title: Tabler
|
|||||||
description: Premium and Open Source dashboard template with responsive and high quality UI.
|
description: Premium and Open Source dashboard template with responsive and high quality UI.
|
||||||
github_url: https://github.com/tabler/tabler
|
github_url: https://github.com/tabler/tabler
|
||||||
|
|
||||||
debug: true
|
debug: false
|
||||||
|
|
||||||
plugins:
|
plugins:
|
||||||
- jekyll-random
|
- jekyll-random
|
||||||
@@ -50,21 +50,22 @@ collections:
|
|||||||
defaults:
|
defaults:
|
||||||
-
|
-
|
||||||
scope:
|
scope:
|
||||||
type: pages
|
type: "pages"
|
||||||
values:
|
values:
|
||||||
layout: default
|
layout: default
|
||||||
nav-position: top
|
menu-layout: horizontal
|
||||||
-
|
-
|
||||||
scope:
|
scope:
|
||||||
type: docs
|
type: "docs"
|
||||||
values:
|
values:
|
||||||
layout: docs
|
layout: docs
|
||||||
nav-position: top
|
menu-layout: horizontal
|
||||||
-
|
-
|
||||||
scope:
|
scope:
|
||||||
type: components
|
type: "components"
|
||||||
values:
|
values:
|
||||||
layout: component
|
layout: component
|
||||||
|
menu-layout: horizontal
|
||||||
|
|
||||||
|
|
||||||
colors:
|
colors:
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
- page: index
|
|
||||||
- page: alerts
|
|
||||||
- page: autosize
|
|
||||||
- page: avatars
|
|
||||||
- page: badges
|
|
||||||
- page: breadcrumb
|
|
||||||
- page: buttons
|
|
||||||
- page: cards
|
|
||||||
- page: carousel
|
|
||||||
- page: colors
|
|
||||||
- page: cursors
|
|
||||||
- page: charts
|
|
||||||
- page: divider
|
|
||||||
- page: empty
|
|
||||||
- page: flags
|
|
||||||
- page: form-elements
|
|
||||||
- page: form-helpers
|
|
||||||
- page: input-mask
|
|
||||||
- page: progress
|
|
||||||
- page: ribbons
|
|
||||||
- page: spinners
|
|
||||||
- page: steps
|
|
||||||
- page: tables
|
|
||||||
- page: tabs
|
|
||||||
- page: timelines
|
|
||||||
- page: toasts
|
|
||||||
- page: tooltips
|
|
||||||
- page: typography
|
|
||||||
|
|||||||
+1
-22
@@ -1,24 +1,3 @@
|
|||||||
- name: sidebar-left
|
- name: sidebar-left
|
||||||
title: Left sidebar
|
title: Left sidebar
|
||||||
url: layout-navbar-left.html
|
url: layout-test.html
|
||||||
- name: sidebar-right
|
|
||||||
title: Right sidebar
|
|
||||||
url: layout-navbar-right.html
|
|
||||||
- name: sidebar-dark
|
|
||||||
title: Dark sidebar
|
|
||||||
url: layout-navbar-dark.html
|
|
||||||
- name: sidebar-folded
|
|
||||||
title: Folded sidebar
|
|
||||||
url: layout-navbar-folded.html
|
|
||||||
- name: navbar-top
|
|
||||||
title: Navbar top
|
|
||||||
url: layout-navbar-top.html
|
|
||||||
- name: header-dark
|
|
||||||
title: Dark header
|
|
||||||
url: layout-header-dark.html
|
|
||||||
- name: header-sticky
|
|
||||||
title: Sticky header
|
|
||||||
url: layout-header-sticky.html
|
|
||||||
- name: dark-mode
|
|
||||||
title: Dark mode
|
|
||||||
url: layout-dark-mode.html
|
|
||||||
|
|||||||
+113
-17
@@ -2,11 +2,15 @@ home:
|
|||||||
url: index.html
|
url: index.html
|
||||||
title: Dashboard
|
title: Dashboard
|
||||||
icon: home
|
icon: home
|
||||||
|
badge: ''
|
||||||
|
badge-color: blue
|
||||||
|
|
||||||
forms:
|
forms:
|
||||||
url: form-elements.html
|
url: form-elements.html
|
||||||
title: Form elements
|
title: Form elements
|
||||||
icon: check-square
|
icon: check-square
|
||||||
|
badge: New
|
||||||
|
badge-color: red
|
||||||
|
|
||||||
base:
|
base:
|
||||||
title: Base
|
title: Base
|
||||||
@@ -15,42 +19,134 @@ base:
|
|||||||
buttons:
|
buttons:
|
||||||
url: buttons.html
|
url: buttons.html
|
||||||
title: Buttons
|
title: Buttons
|
||||||
|
badge: New
|
||||||
cards:
|
cards:
|
||||||
url: cards.html
|
url: cards.html
|
||||||
title: Cards
|
title: Cards
|
||||||
c:
|
calendar:
|
||||||
url: c.html
|
title: Calendar
|
||||||
title: C
|
icon: calendar
|
||||||
|
url: calendar.html
|
||||||
|
users:
|
||||||
|
title: Users
|
||||||
|
icon: users
|
||||||
|
url: users.html
|
||||||
|
gallery:
|
||||||
|
title: Gallery
|
||||||
|
icon: image
|
||||||
|
url: gallery.html
|
||||||
|
|
||||||
charts:
|
charts:
|
||||||
url: charts.html
|
url: charts.html
|
||||||
title: Charts
|
title: Charts
|
||||||
icon: pie-chart
|
icon: pie-chart
|
||||||
|
|
||||||
calendar:
|
|
||||||
title: Calendar
|
|
||||||
icon: calendar
|
|
||||||
url: calendar.html
|
|
||||||
|
|
||||||
users:
|
|
||||||
title: Users
|
|
||||||
icon: users
|
|
||||||
url: users.html
|
|
||||||
|
|
||||||
gallery:
|
|
||||||
title: Gallery
|
|
||||||
icon: image
|
|
||||||
url: gallery.html
|
|
||||||
|
|
||||||
layouts:
|
layouts:
|
||||||
title: Layouts
|
title: Layouts
|
||||||
icon: layout
|
icon: layout
|
||||||
url: layouts.html
|
url: layouts.html
|
||||||
|
|
||||||
|
extra:
|
||||||
|
title: Extra
|
||||||
|
icon: star
|
||||||
|
children:
|
||||||
|
invoice:
|
||||||
|
icon: file
|
||||||
|
title: Invoice
|
||||||
|
url: invoice.html
|
||||||
|
|
||||||
docs:
|
docs:
|
||||||
title: Documentation
|
title: Documentation
|
||||||
icon: file-text
|
icon: file-text
|
||||||
url: docs/index.html
|
url: docs/index.html
|
||||||
|
children:
|
||||||
|
index:
|
||||||
|
title: index
|
||||||
|
url: docs/index.html
|
||||||
|
alerts:
|
||||||
|
title: Alerts
|
||||||
|
url: docs/alerts.html
|
||||||
|
autosize:
|
||||||
|
title: Autosize
|
||||||
|
url: docs/autosize.html
|
||||||
|
avatars:
|
||||||
|
title: Avatars
|
||||||
|
url: docs/avatars.html
|
||||||
|
badges:
|
||||||
|
title: Badges
|
||||||
|
url: docs/badges.html
|
||||||
|
breadcrumb:
|
||||||
|
title: Breadcrumb
|
||||||
|
url: docs/breadcrumb.html
|
||||||
|
buttons:
|
||||||
|
title: Buttons
|
||||||
|
url: docs/buttons.html
|
||||||
|
cards:
|
||||||
|
title: Cards
|
||||||
|
url: docs/cards.html
|
||||||
|
carousel:
|
||||||
|
title: Carousel
|
||||||
|
url: docs/carousel.html
|
||||||
|
colors:
|
||||||
|
title: Colors
|
||||||
|
url: docs/colors.html
|
||||||
|
cursors:
|
||||||
|
title: Cursors
|
||||||
|
url: docs/cursors.html
|
||||||
|
charts:
|
||||||
|
title: Charts
|
||||||
|
url: docs/charts.html
|
||||||
|
divider:
|
||||||
|
title: Divider
|
||||||
|
url: docs/divider.html
|
||||||
|
empty:
|
||||||
|
title: Empty states
|
||||||
|
url: docs/empty.html
|
||||||
|
flags:
|
||||||
|
title: Flags
|
||||||
|
url: docs/flags.html
|
||||||
|
form-elements:
|
||||||
|
title: Form elements
|
||||||
|
url: docs/form-elements.html
|
||||||
|
form-helpers:
|
||||||
|
title: Form helpers
|
||||||
|
url: docs/form-helpers.html
|
||||||
|
input-mask:
|
||||||
|
title: Form input mask
|
||||||
|
url: docs/input-mask.html
|
||||||
|
progress:
|
||||||
|
title: Progress
|
||||||
|
url: docs/progress.html
|
||||||
|
ribbons:
|
||||||
|
title: Ribbons
|
||||||
|
badge: New
|
||||||
|
url: docs/ribbons.html
|
||||||
|
spinners:
|
||||||
|
title: Spinners
|
||||||
|
url: docs/spinners.html
|
||||||
|
steps:
|
||||||
|
title: Steps
|
||||||
|
url: docs/steps.html
|
||||||
|
tables:
|
||||||
|
title: Tables
|
||||||
|
url: docs/tables.html
|
||||||
|
tabs:
|
||||||
|
title: Tabs
|
||||||
|
url: docs/tabs.html
|
||||||
|
timelines:
|
||||||
|
title: Timelines
|
||||||
|
url: docs/timelines.html
|
||||||
|
toasts:
|
||||||
|
title: Toasts
|
||||||
|
url: docs/toasts.html
|
||||||
|
tooltips:
|
||||||
|
title: Tooltips
|
||||||
|
url: docs/tooltips.html
|
||||||
|
typography:
|
||||||
|
title: Typography
|
||||||
|
url: docs/typography.html
|
||||||
|
|
||||||
|
|
||||||
#changelog:
|
#changelog:
|
||||||
# url: changelog.html
|
# url: changelog.html
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Alerts
|
title: Alerts
|
||||||
menu: docs.alerts
|
menu: docs.alerts
|
||||||
description: Bootstrap provides an easy way to create predefined alert messages.
|
description: Bootstrap provides an easy way to create predefined alert messages.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/
|
bootstrap-link: components/alerts/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Badges
|
title: Badges
|
||||||
menu: docs.badges
|
menu: docs.badges
|
||||||
description: A small count and labeling component.
|
description: A small count and labeling component.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
|
bootstrap-link: components/badge/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Breadcrumb
|
title: Breadcrumb
|
||||||
menu: docs.breadcrumb
|
menu: docs.breadcrumb
|
||||||
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
|
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/
|
bootstrap-link: components/breadcrumb/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Buttons
|
title: Buttons
|
||||||
icon: fe fe-plus-square
|
icon: fe fe-plus-square
|
||||||
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
|
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
|
bootstrap-link: components/buttons/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Cards
|
title: Cards
|
||||||
menu: docs.cards
|
menu: docs.cards
|
||||||
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
|
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
|
bootstrap-link: components/card/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Carousel
|
title: Carousel
|
||||||
menu: docs.carousel
|
menu: docs.carousel
|
||||||
description: The Carousel is a slideshow for cycling through elements.
|
description: The Carousel is a slideshow for cycling through elements.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/
|
bootstrap-link: components/carousel/
|
||||||
---
|
---
|
||||||
|
|
||||||
{% example html columns=1 %}
|
{% example html columns=1 %}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Colors
|
title: Colors
|
||||||
menu: docs.colors
|
menu: docs.colors
|
||||||
description:
|
description:
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
|
bootstrap-link: utilities/colors/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Divider
|
title: Divider
|
||||||
description: A divider visually segments content into groups
|
description: A divider visually segments content into groups
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers
|
bootstrap-link: components/dropdowns/#dividers
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
### Default markup
|
### Default markup
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Form Elements
|
title: Form Elements
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
|
bootstrap-link: components/forms/
|
||||||
---
|
---
|
||||||
|
|
||||||
### Classic Input
|
### Classic Input
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Progress
|
title: Progress
|
||||||
description: A progress bar can be used to show a user how far along he is in a process.
|
description: A progress bar can be used to show a user how far along he is in a process.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/
|
bootstrap-link: components/progress/
|
||||||
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
### Default markup
|
### Default markup
|
||||||
@@ -49,5 +50,8 @@ You can also use native HTML5 `<progress>` element.
|
|||||||
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||||
|
|
||||||
{% example %}
|
{% example %}
|
||||||
{% include ui/progress.html size="sm" color="purple"%}
|
{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %}
|
||||||
|
{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %}
|
||||||
|
{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %}
|
||||||
|
{% include ui/progress.html size="sm" color="pink" %}
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Ribbons
|
title: Ribbons
|
||||||
menu: docs.ribbons
|
menu: docs.ribbons
|
||||||
new: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
### Default markup
|
### Default markup
|
||||||
@@ -14,10 +14,10 @@ new: true
|
|||||||
|
|
||||||
You can easily change the position of a ribbon by adding a class to the element.
|
You can easily change the position of a ribbon by adding a class to the element.
|
||||||
|
|
||||||
`ribbon-top` - moves it to the top
|
- `ribbon-top` - moves it to the top
|
||||||
`ribbon-right` - moves it to the right
|
- `ribbon-right` - moves it to the right
|
||||||
`ribbon-bottom` - moves it to the bottom
|
- `ribbon-bottom` - moves it to the bottom
|
||||||
`ribbon-left` - moves it to the lefg
|
- `ribbon-left` - moves it to the lefg
|
||||||
|
|
||||||
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Spinners
|
title: Spinners
|
||||||
menu: docs.spinners
|
menu: docs.spinners
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
|
bootstrap-link: components/spinners/
|
||||||
done: true
|
done: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Tables
|
title: Tables
|
||||||
menu: docs.tables
|
menu: docs.tables
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
|
bootstrap-link: content/tables/
|
||||||
---
|
---
|
||||||
|
|
||||||
### Basic Table
|
### Basic Table
|
||||||
|
|||||||
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Tabs
|
title: Tabs
|
||||||
menu: docs.tabs
|
menu: docs.tabs
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
|
bootstrap-link: components/navs/
|
||||||
---
|
---
|
||||||
|
|
||||||
### Default markup
|
### Default markup
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Toasts
|
title: Toasts
|
||||||
menu: docs.toasts
|
menu: docs.toasts
|
||||||
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
|
bootstrap-link: components/toasts/
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Tooltips
|
title: Tooltips
|
||||||
menu: docs.tooltips
|
menu: docs.tooltips
|
||||||
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
|
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
|
bootstrap-link: components/tooltips/
|
||||||
---
|
---
|
||||||
|
|
||||||
### Default markup
|
### Default markup
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
title: Typography
|
title: Typography
|
||||||
menu: docs.typography
|
menu: docs.typography
|
||||||
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
||||||
bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
|
bootstrap-link: content/typography/
|
||||||
---
|
---
|
||||||
|
|
||||||
### Headings
|
### Headings
|
||||||
|
|||||||
@@ -1,40 +0,0 @@
|
|||||||
<form action="#" class="js-layout-form">
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Color scheme</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Nav position</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Header color</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<!--<div class="mb-2">-->
|
|
||||||
<!--<label class="form-label">Header fixed</label>-->
|
|
||||||
<!--{% include_cached ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
|
|
||||||
<!--</div>-->
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Sidebar position</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Sidebar size</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Sidebar color</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label class="form-label">Sidebar fixed</label>
|
|
||||||
{% include_cached ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--<div class="form-footer">-->
|
|
||||||
<!--<button type="submit" class="btn btn-primary">Save options</button>-->
|
|
||||||
<!--</div>-->
|
|
||||||
</form>
|
|
||||||
|
|||||||
+129
-127
@@ -1,161 +1,163 @@
|
|||||||
<div class="debug">
|
<div class="debug">
|
||||||
<a href="#" data-debug="dark">Dark mode</a>
|
<a href="#" data-debug="dark">Dark mode</a>
|
||||||
<a href="#" data-debug="rtl">RTL mode</a>
|
<a href="#" data-debug="rtl">RTL mode</a>
|
||||||
<a href="#" data-debug="code">Show cards code</a>
|
<a href="#" data-debug="code">Show cards code</a>
|
||||||
<a href="#" data-debug="folded">Folded sidebar</a>
|
<a href="#" data-debug="folded">Folded sidebar</a>
|
||||||
<a href="#" data-debug="fullscreen">Fullscreen</a>
|
<a href="#" data-debug="fullscreen">Fullscreen</a>
|
||||||
<a href="#" data-debug="header-sticky">Sticky header</a>
|
<a href="#" data-debug="header-sticky">Sticky header</a>
|
||||||
<a href="{{ site.base }}/pages.html">All pages</a>
|
<a href="{{ site.base }}/pages.html">All pages</a>
|
||||||
|
|
||||||
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
|
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.card-debug {
|
.card-debug {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-info {
|
.debug-info {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-debug a {
|
.card-debug a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-debug a:hover {
|
.card-debug a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug {
|
.debug {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: #222;
|
background: #222;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .5rem .75rem;
|
padding: .5rem .75rem;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
z-index: 3000;
|
z-index: 3000;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-page {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug a {
|
||||||
|
color: inherit;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.debug a {
|
.debug a[data-debug]:after {
|
||||||
color: inherit;
|
content: '';
|
||||||
margin-right: 1rem;
|
margin: 0 0 1px .25rem;
|
||||||
}
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(255, 255, 255, .3);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.debug a[data-debug]:after {
|
body.show-debug-code .card-debug {
|
||||||
content: '';
|
display: block;
|
||||||
margin: 0 0 1px .25rem;
|
}
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
display: inline-block;
|
|
||||||
background: rgba(255, 255, 255, .3);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.show-debug-code .card-debug {
|
@media (max-width: 991.98px) {
|
||||||
display: block;
|
.debug {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
body.show-debug-code a[data-debug="code"]:after,
|
||||||
.debug {
|
html[dir="rtl"] a[data-debug="rtl"]:after,
|
||||||
display: none;
|
body.theme-dark a[data-debug="dark"]:after,
|
||||||
}
|
:fullscreen a[data-debug="fullscreen"]:after,
|
||||||
}
|
body.header-sticky a[data-debug="header-sticky"]:after,
|
||||||
|
body.sidebar-folded a[data-debug="folded"]:after {
|
||||||
body.show-debug-code a[data-debug="code"]:after,
|
background: #5eba00;
|
||||||
html[dir="rtl"] a[data-debug="rtl"]:after,
|
}
|
||||||
body.theme-dark a[data-debug="dark"]:after,
|
|
||||||
:fullscreen a[data-debug="fullscreen"]:after,
|
|
||||||
body.header-sticky a[data-debug="header-sticky"]:after,
|
|
||||||
body.sidebar-folded a[data-debug="folded"]:after {
|
|
||||||
background: #5eba00;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
|
||||||
var $body = $('body'),
|
var $body = $('body'),
|
||||||
$html = $('html');
|
$html = $('html');
|
||||||
|
|
||||||
$body
|
$body
|
||||||
.on('click', '[data-debug="dark"]', function (e) {
|
.on('click', '[data-debug="dark"]', function (e) {
|
||||||
$body.toggleClass('theme-dark');
|
$body.toggleClass('theme-dark');
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
.on('click', '[data-debug="code"]', function (e) {
|
.on('click', '[data-debug="code"]', function (e) {
|
||||||
$body.toggleClass('show-debug-code');
|
$body.toggleClass('show-debug-code');
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
.on('click', '[data-debug="folded"]', function (e) {
|
.on('click', '[data-debug="folded"]', function (e) {
|
||||||
$('.sidenav').toggleClass('sidenav-folded');
|
$('.sidenav').toggleClass('sidenav-folded');
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
.on('click', '[data-debug="fullscreen"]', function (e) {
|
.on('click', '[data-debug="fullscreen"]', function (e) {
|
||||||
tabler.toggleFullscreen();
|
tabler.toggleFullscreen();
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
.on('click', '[data-debug="header-sticky"]', function (e) {
|
.on('click', '[data-debug="header-sticky"]', function (e) {
|
||||||
$body.toggleClass('header-sticky');
|
$body.toggleClass('header-sticky');
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
.on('click', '[data-debug="rtl"]', function (e) {
|
.on('click', '[data-debug="rtl"]', function (e) {
|
||||||
if ($html.attr('dir') === 'rtl') {
|
if ($html.attr('dir') === 'rtl') {
|
||||||
$html.attr('dir', 'ltr');
|
$html.attr('dir', 'ltr');
|
||||||
} else {
|
} else {
|
||||||
$html.attr('dir', 'rtl');
|
$html.attr('dir', 'rtl');
|
||||||
}
|
}
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$('.card').each(function () {
|
$('.card').each(function () {
|
||||||
var $card = $(this),
|
var $card = $(this),
|
||||||
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
|
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
|
||||||
|
|
||||||
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
|
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
|
||||||
$codeLink = $button.find('[data-code]');
|
$codeLink = $button.find('[data-code]');
|
||||||
|
|
||||||
$codeLink
|
$codeLink
|
||||||
// .data('htmlCode', htmlCode)
|
// .data('htmlCode', htmlCode)
|
||||||
.on('click', function(e){
|
.on('click', function (e) {
|
||||||
|
|
||||||
var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
|
var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
|
||||||
$modal.find('pre').text(htmlCode);
|
$modal.find('pre').text(htmlCode);
|
||||||
$('body').append($modal);
|
$('body').append($modal);
|
||||||
console.log();
|
console.log();
|
||||||
|
|
||||||
$modal.modal('show');
|
$modal.modal('show');
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$card.prepend($button);
|
$card.prepend($button);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,44 @@
|
|||||||
|
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||||
|
|
||||||
|
<ul class="sidebar-nav">
|
||||||
|
<li class="sidebar-nav-title">Navigation</li>
|
||||||
|
{% for level-1 in site.data.menu %}
|
||||||
|
<li class="sidebar-nav-item">
|
||||||
|
|
||||||
|
<a href="{{ site.base }}/{{ level-1[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
|
||||||
|
{% if level-1[1].icon %}
|
||||||
|
{% assign icon = level-1[1].icon %}
|
||||||
|
{% include ui/icon.html icon=icon class="nav-icon" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<span class="nav-text">{{ level-1[1].title }}</span>
|
||||||
|
|
||||||
|
{% if level-1[1].badge %}
|
||||||
|
{% assign badge = level-1[1].badge %}
|
||||||
|
{% assign badge-color = level-1[1].badge-color | default: 'green' %}
|
||||||
|
{% include ui/badge.html text=badge color=badge-color %}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% comment %}
|
||||||
|
<div class="sidebar-nav-title">{{ level-1[1].title }}</div>
|
||||||
|
{% endcomment %}
|
||||||
|
|
||||||
|
{% if level-1[1].children %}
|
||||||
|
<ul class="sidebar-subnav">
|
||||||
|
{% for level-2 in level-1[1].children %}
|
||||||
|
<li class="sidebar-nav-item">
|
||||||
|
<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}">
|
||||||
|
<span>{{ level-2[1].title }}</span>
|
||||||
|
{% if level-2[1].badge %}
|
||||||
|
{% assign badge = level-2[1].badge %}
|
||||||
|
{% include ui/badge.html text=badge color="green" %}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
@@ -1,12 +1,10 @@
|
|||||||
{% removeemptylines %}
|
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||||
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
|
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
|
||||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
|
||||||
|
|
||||||
{% for level-1 in site.data.menu %}
|
{% for level-1 in site.data.menu %}
|
||||||
{% assign icon = level-1[1].icon %}
|
{% assign icon = level-1[1].icon %}
|
||||||
|
|
||||||
{% assign has-children = false %}
|
{% assign has-children = false %}
|
||||||
{% if level-1[1].children or level-1[1].docs %}
|
{% if level-1[1].children %}
|
||||||
{% assign has-children = true %}
|
{% assign has-children = true %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@@ -31,23 +29,6 @@
|
|||||||
|
|
||||||
{% if has-children %}
|
{% if has-children %}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
{% if level-1[1].docs %}
|
|
||||||
{% for d in site.data.docs %}
|
|
||||||
{% assign doc = site.docs | where: "slug", d.page | first %}
|
|
||||||
{% if doc %}
|
|
||||||
<a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
|
||||||
<span class="nav-text">
|
|
||||||
{{ doc.title }}
|
|
||||||
|
|
||||||
{% if doc.new %}
|
|
||||||
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% for level-2 in level-1[1].children %}
|
{% for level-2 in level-1[1].children %}
|
||||||
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
||||||
<span class="nav-text">
|
<span class="nav-text">
|
||||||
@@ -63,4 +44,3 @@
|
|||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endremoveemptylines %}
|
|
||||||
|
|||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{% assign prefix = include.prefix | default: 'navbar' %}
|
||||||
|
|
||||||
|
<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
|
||||||
|
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
|
||||||
|
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
|
||||||
|
</a>
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="navbar-search d-none d-lg-block">
|
||||||
|
<form action="" method="get">
|
||||||
|
<input type="text" name="q" class="form-control bg-light" placeholder="Search...">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
||||||
|
{% assign person = site.data.people[person-id] %}
|
||||||
|
|
||||||
|
{% if include.menu-layout != 'vertical' %}
|
||||||
|
{% include_cached layout/navbar-logo.html class="mr-4" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% include_cached layout/navbar-search.html %}
|
||||||
|
|
||||||
|
<ul class="nav navbar-menu align-items-center ml-auto">
|
||||||
|
<li class="nav-item d-none d-lg-flex mr-3">
|
||||||
|
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a href="#" data-toggle="dropdown"
|
||||||
|
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||||||
|
{% include ui/avatar.html src=person.photo %}
|
||||||
|
<span class="ml-2 d-none d-lg-block leading-none">
|
||||||
|
{{ person.full_name }}
|
||||||
|
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="user" class="dropdown-icon" %} Profile
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="settings" class="dropdown-icon" %} Settings
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
|
||||||
|
<span class="badge bg-primary ml-auto">6</span>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="send" class="dropdown-icon" %} Message
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-item" href="#">
|
||||||
|
{% include_cached ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
{% assign actions = include.actions %}
|
||||||
|
|
||||||
|
<!-- Page title actions -->
|
||||||
|
<div class="col-auto ml-auto">
|
||||||
|
{% if actions == 'users' %}
|
||||||
|
<div class="d-flex">
|
||||||
|
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
||||||
|
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
|
||||||
|
</div>
|
||||||
|
{% elsif actions == 'calendar' %}
|
||||||
|
<div class="d-flex">
|
||||||
|
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||||
|
</div>
|
||||||
|
{% elsif actions == 'breadcrumb' %}
|
||||||
|
<div class="d-flex">
|
||||||
|
{% include_cached ui/breadcrumb.html class="breadcrumb-alternate" %}
|
||||||
|
</div>
|
||||||
|
{% elsif actions == 'buttons' %}
|
||||||
|
<span class="d-none d-sm-inline">
|
||||||
|
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
|
||||||
|
</span>
|
||||||
|
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
@@ -2,45 +2,28 @@
|
|||||||
<!-- Page title -->
|
<!-- Page title -->
|
||||||
<div class="page-title-box">
|
<div class="page-title-box">
|
||||||
|
|
||||||
<div class="row align-items-center">
|
<div class="row align-items-center">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
{% if page.page-pretitle %}
|
{% if page.page-pretitle %}
|
||||||
<!-- Page pre-title -->
|
<!-- Page pre-title -->
|
||||||
<div class="page-pretitle">
|
<div class="page-pretitle">
|
||||||
{{ page.page-pretitle }}
|
{{ page.page-pretitle }}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<h2 class="page-title">
|
<h2 class="page-title">
|
||||||
{{ page.page-title | default: layout.page-title }}
|
{{ page.page-title | default: layout.page-title }}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if page.page-title-description %}
|
{% if page.page-title-description %}
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div class="text-muted text-h5">{{ page.page-title-description }}</div>
|
<div class="text-muted text-h5">{{ page.page-title-description }}</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.page-title-actions %}
|
{% if page.page-title-actions %}
|
||||||
<!-- Page title actions -->
|
{% include layout/page-title-actions.html actions=page.page-title-actions %}
|
||||||
<div class="col-auto ml-auto">
|
{% endif %}
|
||||||
{% if page.page-title-actions == 'users' %}
|
</div>
|
||||||
<div class="d-flex">
|
|
||||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
|
||||||
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
|
|
||||||
</div>
|
|
||||||
{% elsif page.page-title-actions == 'calendar' %}
|
|
||||||
<div class="d-flex">
|
|
||||||
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<span class="d-none d-sm-inline">
|
|
||||||
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
|
|
||||||
</span>
|
|
||||||
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<aside class="sidebar sidebar-dark">
|
||||||
|
<!-- Sidebar logo -->
|
||||||
|
{% include_cached layout/navbar-logo.html prefix="sidebar" %}
|
||||||
|
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<div>
|
||||||
|
<!-- Sidebar menu -->
|
||||||
|
{% include layout/menu-aside.html %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-auto">
|
||||||
|
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
<header class="topnav topbar">
|
||||||
<div class="container">
|
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||||
{% include layout/menu.html top=true %}
|
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||||
|
{% include layout/menu.html top=true %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
|
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
<header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
<header class="topnav topbar">
|
||||||
<div class="container{% if include.fluid %} container-fluid{% endif %}">
|
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||||
{% include parts/navbar.html logo=true search=true user-menu=1 person-id=1 dark=include.dark notifications=true %}
|
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||||
|
{% include_cached layout/navbar.html search=true menu-layout=page.menu-layout %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,116 +0,0 @@
|
|||||||
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
|
||||||
{% assign person = site.data.people[person-id] %}
|
|
||||||
|
|
||||||
<a class="layout-toggler" data-toggle="menubar">
|
|
||||||
<span class="layout-toggler-icon"></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
|
|
||||||
{% if include.icon %}<span class="text-green">{% include_cached 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.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
|
|
||||||
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
|
|
||||||
{% endif %}
|
|
||||||
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
|
|
||||||
|
|
||||||
{% if include.notifications %}
|
|
||||||
<li class="nav-item dropdown mr-3">
|
|
||||||
<a class="nav-link text-reset px-2" data-toggle="dropdown">
|
|
||||||
{% include_cached ui/icon.html icon="bell" %}
|
|
||||||
<span class="badge badge-pill badge-up bg-primary">4</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
|
|
||||||
<div class="scrollable">
|
|
||||||
<div class="list list-row">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex px-3 py-2 b-t">
|
|
||||||
<div class="flex">
|
|
||||||
<span>6 Notifications</span>
|
|
||||||
</div>
|
|
||||||
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<li class="nav-item d-none d-lg-flex mr-3">
|
|
||||||
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{% if include.user-menu %}
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a href="#" data-toggle="dropdown"
|
|
||||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
|
||||||
{% include ui/avatar.html src=person.photo %}
|
|
||||||
<span class="ml-2 d-none d-lg-block leading-none">
|
|
||||||
{{ person.full_name }}
|
|
||||||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="user" class="dropdown-icon" %} Profile
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="settings" class="dropdown-icon" %} Settings
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
|
|
||||||
<span class="badge bg-primary ml-auto">6</span>
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="send" class="dropdown-icon" %} Message
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-divider"></div>
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="#">
|
|
||||||
{% include_cached ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.manage %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-secondary">Manage Widgets</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.register %}
|
|
||||||
<li class="nav-item ">
|
|
||||||
<a href="#" class="nav-link">
|
|
||||||
Sign in
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="d-flex align-items-center">
|
|
||||||
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.plus %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-primary btn-icon">{% include_cached ui/icon.html icon="plus" %}</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.premium %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-success">Go Premium</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if include.sync %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="btn btn-secondary">{% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
@@ -1 +1 @@
|
|||||||
<span class="badge bg-{{ include.color }}">{{ include.text }}</span>
|
<span class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text }}</span>
|
||||||
|
|||||||
@@ -2,17 +2,25 @@
|
|||||||
layout: base
|
layout: base
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
|
<div class="wrapper">
|
||||||
|
|
||||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
{% if page.menu-layout == 'vertical' %}
|
||||||
{% include layout/topmenu.html %}
|
{% include layout/sidebar.html %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="layout-area-main">
|
<div class="content">
|
||||||
|
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||||
|
|
||||||
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
{% if page.menu-layout != 'vertical' %}
|
||||||
{% include layout/page-title.html %}
|
{% include layout/topmenu.html %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{{ content }}
|
<div class="content-page">
|
||||||
</main>
|
<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
|
||||||
</div>
|
{% include layout/page-title.html %}
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ title: Documentation
|
|||||||
page-title: Documentation
|
page-title: Documentation
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% assign current-url = page.url | replace_regex: "^/", "" %}
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-lg-3 order-lg-1 mb-4">
|
<div class="col-lg-3 order-lg-1 mb-4">
|
||||||
@@ -13,11 +14,21 @@ page-title: Documentation
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="list-group list-group-transparent mb-0">
|
<div class="list-group list-group-transparent mb-0">
|
||||||
{% for p in site.data.docs %}
|
{% for doc in site.data.menu.docs.children %}
|
||||||
{% assign doc = site.docs | where: "slug", p.page | first %}
|
{% assign key = doc[0] %}
|
||||||
<a href="{{ site.base }}{{ doc.url | relative_url }}"
|
<a href="{{ site.base }}{{ doc[1].url | relative_url }}" class="list-group-item list-group-item-action{% if current-url == doc[1].url %} active{% endif %}">
|
||||||
class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
|
|
||||||
{{ doc.title }}{% if doc.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
{% if jekyll.environment == 'development' %}
|
||||||
|
{% assign doc-page = site.docs | where: "slug", key | first %}
|
||||||
|
{% if doc-page.done %}{% include_cached ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{{ doc[1].title }}
|
||||||
|
|
||||||
|
{% if doc[1].badge %}
|
||||||
|
{% assign badge = doc[1].badge %}
|
||||||
|
{% include ui/badge.html text=badge color="green" class="ml-auto" %}
|
||||||
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
@@ -29,7 +40,7 @@ page-title: Documentation
|
|||||||
<div class="markdown">
|
<div class="markdown">
|
||||||
{% if page.bootstrap-link %}
|
{% if page.bootstrap-link %}
|
||||||
<p class="mb-4 float-right">
|
<p class="mb-4 float-right">
|
||||||
<a href="{{ page.bootstrap-link }}" target="_blank">
|
<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
|
||||||
{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
|
{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
|
||||||
Bootstrap documentation
|
Bootstrap documentation
|
||||||
</a>
|
</a>
|
||||||
@@ -40,8 +51,6 @@ page-title: Documentation
|
|||||||
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% if page.plugin %}
|
{% if page.plugin %}
|
||||||
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
|
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
|
||||||
plugin.
|
plugin.
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
title: Homepage
|
title: Homepage
|
||||||
page-title: Homepage
|
page-title: Homepage
|
||||||
page-pretitle: Overview
|
page-pretitle: Overview
|
||||||
page-title-actions: home
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|||||||
+2
-1
@@ -2,8 +2,9 @@
|
|||||||
title: Dashboard
|
title: Dashboard
|
||||||
page-title: Dashboard
|
page-title: Dashboard
|
||||||
page-pretitle: Overview
|
page-pretitle: Overview
|
||||||
page-title-actions: true
|
page-title-actions: buttons
|
||||||
site-layout: layout-collapsed-md
|
site-layout: layout-collapsed-md
|
||||||
|
menu-layout: vertical
|
||||||
menu: home
|
menu: home
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: Dark mode
|
|
||||||
dark-theme: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: Dark header
|
|
||||||
header-dark: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
title: Sticky header
|
|
||||||
menu: layout.header-sticky
|
|
||||||
page-title: Dashboard
|
|
||||||
header-sticky: true
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
title: Sidebar white
|
|
||||||
menu: layout.sidebar-white
|
|
||||||
sidenav: true
|
|
||||||
nav-dark: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
---
|
|
||||||
title: Folded sidebar
|
|
||||||
menu: layout.sidebar-folded
|
|
||||||
sidenav: true
|
|
||||||
nav-folded: true
|
|
||||||
nav-dark: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
title: Sidebar left
|
|
||||||
menu: layout.sidebar-left
|
|
||||||
sidenav: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
title: Sidebar right
|
|
||||||
menu: layout.sidebar-right
|
|
||||||
sidenav: true
|
|
||||||
nav-right: true
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Navbar top
|
|
||||||
page-title: Dashboard
|
|
||||||
menu: layouts
|
|
||||||
---
|
|
||||||
|
|
||||||
{% include layout/layouts.html %}
|
|
||||||
@@ -2,13 +2,16 @@
|
|||||||
title: Layout test
|
title: Layout test
|
||||||
sidenav: true
|
sidenav: true
|
||||||
sidenav-dark: true
|
sidenav-dark: true
|
||||||
site-layout: layout-collapsed-sm
|
page-title: Layout test
|
||||||
|
page-title-actions: breadcrumb
|
||||||
|
menu-layout: vertical
|
||||||
|
menu: base.buttons
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="card" id="card-test">
|
<div class="card" id="card-test">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>
|
<!-- <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>-->
|
||||||
<div id="card-body"></div>
|
<div id="card-size"></div>
|
||||||
<div>
|
<div>
|
||||||
<h1>Well, she turned me into a newt.</h1>
|
<h1>Well, she turned me into a newt.</h1>
|
||||||
<p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
|
<p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
|
||||||
@@ -44,7 +47,7 @@ site-layout: layout-collapsed-sm
|
|||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
var $test_el = $('#card-test'),
|
var $test_el = $('#card-test'),
|
||||||
$test_body_el = $('#card-body'),
|
$test_body_el = $('#card-size'),
|
||||||
test_width = function () {
|
test_width = function () {
|
||||||
$test_body_el.text($test_el.width());
|
$test_body_el.text($test_el.width());
|
||||||
};
|
};
|
||||||
|
|||||||
+2
-2
@@ -41,11 +41,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.theme-dark {
|
body.theme-dark {
|
||||||
@include dark-mode ();
|
@include dark-mode;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body.auto-theme-dark {
|
body.auto-theme-dark {
|
||||||
@include dark-mode ();
|
@include dark-mode;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-16
@@ -117,7 +117,7 @@ $avatar-sizes: (
|
|||||||
//Fonts
|
//Fonts
|
||||||
$font-size-base: 1rem !default;
|
$font-size-base: 1rem !default;
|
||||||
$font-weight-base: 400 !default;
|
$font-weight-base: 400 !default;
|
||||||
$line-height-base: 1.6 !default;
|
$line-height-base: 1.5 !default;
|
||||||
$body-letter-spacing: null !default;
|
$body-letter-spacing: null !default;
|
||||||
|
|
||||||
$border-radius: 3px !default;
|
$border-radius: 3px !default;
|
||||||
@@ -206,6 +206,7 @@ $breadcrumb-variants: (
|
|||||||
|
|
||||||
//badges
|
//badges
|
||||||
$badge-font-weight: 500 !default;
|
$badge-font-weight: 500 !default;
|
||||||
|
$badge-empty-size: .5rem !default;
|
||||||
|
|
||||||
//buttons
|
//buttons
|
||||||
$input-btn-line-height: 1.5 !default;
|
$input-btn-line-height: 1.5 !default;
|
||||||
@@ -266,11 +267,19 @@ $loader-size: 2.5rem !default;
|
|||||||
|
|
||||||
//navbar
|
//navbar
|
||||||
$navbar-bg: $white !default;
|
$navbar-bg: $white !default;
|
||||||
|
$navbar-height: 3.5rem !default;
|
||||||
$navbar-border-color: $border-color !default;
|
$navbar-border-color: $border-color !default;
|
||||||
$navbar-border-color: $border-color !default;
|
$navbar-border-color: $border-color !default;
|
||||||
|
|
||||||
//nav
|
//nav
|
||||||
$nav-link-padding-y: .25rem !default;
|
$nav-link-padding-y: 1rem !default;
|
||||||
|
|
||||||
|
$navbar-padding-x: .75rem !default;
|
||||||
|
$navbar-padding-y: .75rem !default;
|
||||||
|
$navbar-nav-link-padding-x: .75rem !default;
|
||||||
|
$navbar-light-color: $text-muted !default;
|
||||||
|
$navbar-light-active-color: $primary !default;
|
||||||
|
$navbar-light-hover-color: $body-color !default;
|
||||||
|
|
||||||
//pagination
|
//pagination
|
||||||
$pagination-border-width: 0 !default;
|
$pagination-border-width: 0 !default;
|
||||||
@@ -281,20 +290,7 @@ $pagination-bg: transparent !default;
|
|||||||
$pagination-disabled-bg: transparent !default;
|
$pagination-disabled-bg: transparent !default;
|
||||||
$pagination-disabled-color: rgba($text-muted, .5) !default;
|
$pagination-disabled-color: rgba($text-muted, .5) !default;
|
||||||
|
|
||||||
//sidenav
|
|
||||||
$sidenav-width: 16rem !default;
|
|
||||||
$sidenav-folded-width: 4rem !default;
|
|
||||||
$sidenav-bg: $white !default;
|
|
||||||
$sidenav-border-color: $border-color-alpha !default;
|
|
||||||
$sidenav-dark-bg: $dark !default;
|
|
||||||
$sidenav-link-padding-x: .75rem !default;
|
|
||||||
|
|
||||||
$navbar-padding-x: .75rem !default;
|
|
||||||
$navbar-padding-y: .75rem !default;
|
|
||||||
$navbar-nav-link-padding-x: .75rem !default;
|
|
||||||
$navbar-light-color: $text-muted !default;
|
|
||||||
$navbar-light-active-color: $primary !default;
|
|
||||||
$navbar-light-hover-color: $body-color !default;
|
|
||||||
|
|
||||||
//steps
|
//steps
|
||||||
$steps-border-width: 2px !default;
|
$steps-border-width: 2px !default;
|
||||||
@@ -340,7 +336,9 @@ $input-border-radius: $border-radius !default;
|
|||||||
|
|
||||||
|
|
||||||
//Forms
|
//Forms
|
||||||
$form-check-input-width: 1em !default;
|
$form-check-input-width: 1rem !default;
|
||||||
|
$form-check-padding-left: $form-check-input-width + .5rem !default;
|
||||||
|
$form-check-input-bg: $white !default;
|
||||||
$form-check-input-border: 1px solid $border-color !default;
|
$form-check-input-border: 1px solid $border-color !default;
|
||||||
$form-check-input-border-radius: $border-radius !default;
|
$form-check-input-border-radius: $border-radius !default;
|
||||||
$form-check-input-checked-bg-size: .75rem !default;
|
$form-check-input-checked-bg-size: .75rem !default;
|
||||||
|
|||||||
+3
-13
@@ -11,20 +11,10 @@ body {
|
|||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
font-feature-settings: "liga" 0;
|
font-feature-settings: "liga" 0;
|
||||||
}
|
|
||||||
|
|
||||||
body *::-webkit-scrollbar {
|
* {
|
||||||
width: 6px;
|
@include scrollbar;
|
||||||
height: 6px;
|
}
|
||||||
transition: .3s background;
|
|
||||||
}
|
|
||||||
|
|
||||||
body *::-webkit-scrollbar-thumb {
|
|
||||||
background: $gray-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
body *:hover::-webkit-scrollbar-thumb {
|
|
||||||
background: $gray-500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
+329
-139
@@ -1,182 +1,372 @@
|
|||||||
/**
|
//sidenav
|
||||||
Layout
|
$sidenav-width: 16.25rem;
|
||||||
*/
|
$sidenav-width-folded: 4rem;
|
||||||
@mixin menu-side {
|
$sidenav-bg: $white;
|
||||||
align-items: flex-start;
|
$sidenav-border-color: $border-color-alpha;
|
||||||
}
|
$sidenav-dark-bg: $dark;
|
||||||
|
$sidenav-padding: 1.25rem;
|
||||||
|
$sidenav-breakpoint-show: 'sm';
|
||||||
|
$sidenav-breakpoint-folded: 'lg';
|
||||||
|
$sidenav-folded-item-height: 3.5rem;
|
||||||
|
|
||||||
@mixin menu-collapsed {
|
@mixin sidebar-folded($breakpoint-folded) {
|
||||||
.layout-area-menu {
|
@if $breakpoint-folded {
|
||||||
position: fixed;
|
|
||||||
left: -($sidenav-width);
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: $dark;
|
|
||||||
color: $white;
|
|
||||||
width: $sidenav-width;
|
|
||||||
z-index: $zindex-fixed;
|
|
||||||
transition: .3s left;
|
|
||||||
|
|
||||||
@include menu-side;
|
@include media-breakpoint-down($breakpoint-folded) {
|
||||||
}
|
width: $sidenav-width-folded;
|
||||||
|
|
||||||
.layout-area-menu-backdrop {
|
.sidebar-brand {
|
||||||
display: block;
|
width: $sidenav-width-folded;
|
||||||
position: fixed;
|
}
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100vw;
|
|
||||||
background: rgba($dark, .1);
|
|
||||||
z-index: $zindex-fixed - 1;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-toggler {
|
.sidebar-content {
|
||||||
display: block;
|
padding: 0;
|
||||||
}
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
@at-root body.aside-visible & {
|
.sidebar-nav {
|
||||||
.layout-area-menu {
|
margin: 0;
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-area-menu-backdrop {
|
> .sidebar-nav-item {
|
||||||
opacity: 1;
|
position: relative;
|
||||||
visibility: visible;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout {
|
&:hover {
|
||||||
position: relative;
|
background: $primary;
|
||||||
display: grid;
|
width: $sidenav-width;
|
||||||
|
|
||||||
grid-template: "head" auto "menu" auto "main" auto /
|
> .sidebar-nav-link {
|
||||||
100%;
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.layout-collapsed {
|
> span {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
display: block;
|
||||||
$infix: breakpoint-infix($breakpoint);
|
}
|
||||||
|
|
||||||
@if $infix != '' {
|
.icon {
|
||||||
@include media-breakpoint-down($breakpoint) {
|
margin-right: add(1rem, $sidenav-padding);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&#{$infix} {
|
.sidebar-subnav {
|
||||||
@include menu-collapsed;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @else {
|
|
||||||
@include menu-collapsed;
|
.sidebar-subnav {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: $sidenav-folded-item-height;
|
||||||
|
left: $sidenav-width-folded;
|
||||||
|
right: 0;
|
||||||
|
padding: .5rem 0;
|
||||||
|
background: $dark;
|
||||||
|
box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-sidebar {
|
@mixin sidebar-show($breakpoint-show) {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@include media-breakpoint-down($breakpoint-show) {
|
||||||
$infix: breakpoint-infix($breakpoint);
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
.layout-toggler {
|
/**
|
||||||
|
Topnav
|
||||||
|
*/
|
||||||
|
.topnav {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
background-color: $navbar-bg;
|
||||||
|
border-color: $navbar-border-color;
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: $navbar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand-logo {
|
||||||
|
&-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||||
|
&-lg {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#{$infix} {
|
&-sm {
|
||||||
grid-template: "menu head" auto "menu main" auto /
|
display: block;
|
||||||
auto 1fr;
|
|
||||||
|
|
||||||
.layout-area-menu {
|
|
||||||
width: $sidenav-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-folded#{$infix} {
|
|
||||||
grid-template: "menu head" auto "menu main" auto /
|
|
||||||
auto 1fr;
|
|
||||||
|
|
||||||
.layout-area-menu {
|
|
||||||
width: $sidenav-folded-width;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-toggler {
|
/**
|
||||||
display: none;
|
Topbar
|
||||||
width: 2rem;
|
*/
|
||||||
|
.topbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
z-index: $zindex-sticky;
|
||||||
|
min-height: $navbar-height;
|
||||||
|
|
||||||
|
& + & {
|
||||||
|
top: add($navbar-height, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
& + & + & {
|
||||||
|
top: add($navbar-height * 2, 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar + .content & {
|
||||||
|
left: $sidenav-width;
|
||||||
|
|
||||||
|
@if $sidenav-breakpoint-folded {
|
||||||
|
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||||
|
left: $sidenav-width-folded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-fixed {
|
||||||
|
position: fixed;
|
||||||
|
z-index: $zindex-fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Wrapper
|
||||||
|
*/
|
||||||
|
.wrapper {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Content
|
||||||
|
*/
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0 .5rem 0;
|
||||||
|
|
||||||
|
.sidebar + & {
|
||||||
|
margin-left: $sidenav-width;
|
||||||
|
|
||||||
|
@if $sidenav-breakpoint-folded {
|
||||||
|
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||||
|
margin-left: $sidenav-width-folded;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down($sidenav-breakpoint-show) {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-page {
|
||||||
|
.topbar + & {
|
||||||
|
padding-top: add($navbar-height, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar + .topbar + & {
|
||||||
|
padding-top: add($navbar-height * 2, 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar + .topbar + .topbar + & {
|
||||||
|
padding-top: add($navbar-height * 3, 3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Sidebar
|
||||||
|
*/
|
||||||
|
.sidebar {
|
||||||
|
width: $sidenav-width;
|
||||||
|
position: fixed;
|
||||||
|
z-index: $zindex-fixed;
|
||||||
|
padding: 0;
|
||||||
|
background: $white;
|
||||||
|
box-shadow: inset -1px 0 $border-color-alpha;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
@include sidebar-folded($sidenav-breakpoint-folded);
|
||||||
|
@include sidebar-show($sidenav-breakpoint-show);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-brand {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
line-height: $navbar-height;
|
||||||
|
width: $sidenav-width;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-brand-logo {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
opacity: .8;
|
|
||||||
|
|
||||||
&-icon {
|
&-sm {
|
||||||
top: 50%;
|
display: none;
|
||||||
left: 50%;
|
}
|
||||||
display: block;
|
|
||||||
margin-top: -2px;
|
|
||||||
margin-left: -.75rem;
|
|
||||||
|
|
||||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
@if $sidenav-breakpoint-folded {
|
||||||
transition-duration: 75ms;
|
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||||
|
&-sm {
|
||||||
&,
|
display: inline-block;
|
||||||
&:after,
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 2px;
|
|
||||||
background: currentColor;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: -.5rem;
|
|
||||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
bottom: -.5rem;
|
|
||||||
transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
|
||||||
}
|
|
||||||
|
|
||||||
@at-root body.aside-visible & {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
transition-delay: .12s;
|
|
||||||
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 0;
|
|
||||||
transition: top 75ms ease, opacity 75ms ease .12s;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&-lg {
|
||||||
bottom: 0;
|
display: none;
|
||||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-area-topnav {
|
.sidebar-content {
|
||||||
grid-area: head;
|
padding: $sidenav-padding;
|
||||||
padding-left: 0;
|
flex: 1;
|
||||||
padding-right: 0;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: auto;
|
||||||
|
@include scrollbar(true);
|
||||||
|
|
||||||
|
.sidebar-brand + & {
|
||||||
|
margin-top: $navbar-height;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-area-menu {
|
/**
|
||||||
grid-area: menu;
|
Sidebar menu
|
||||||
|
*/
|
||||||
|
.sidebar-nav {
|
||||||
|
margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-area-menu-backdrop {
|
.sidebar-nav-link {
|
||||||
display: none;
|
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: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
opacity: 1;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: inset 3px 0 $primary;
|
||||||
|
background-color: rgba(#fff, .01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-area-main {
|
.sidebar-nav-title {
|
||||||
grid-area: main;
|
@include subheader(false);
|
||||||
|
color: inherit;
|
||||||
|
opacity: .8;
|
||||||
|
padding: $sidenav-padding $sidenav-padding .5rem;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Sidebar dark
|
||||||
|
*/
|
||||||
|
.sidebar-dark {
|
||||||
|
background: $dark;
|
||||||
|
color: $text-muted;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.sidebar-brand {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-13
@@ -1,7 +1,6 @@
|
|||||||
.navbar {
|
.navbar {
|
||||||
border-bottom: 1px solid;
|
//padding-top: 0;
|
||||||
background-color: $navbar-bg;
|
//padding-bottom: 0;
|
||||||
border-color: $navbar-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -21,19 +20,18 @@ Navbar logo
|
|||||||
padding-right: $navbar-nav-link-padding-x;
|
padding-right: $navbar-nav-link-padding-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active .nav-link {
|
.nav-item {
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
&:hover {
|
||||||
content: '';
|
.dropdown-menu {
|
||||||
position: absolute;
|
display: block;
|
||||||
|
}
|
||||||
bottom: subtract(-$navbar-padding-y, 1px);
|
|
||||||
right: $navbar-nav-link-padding-x;
|
|
||||||
left: $navbar-nav-link-padding-x;
|
|
||||||
border-bottom: 1px solid $primary;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.page-title-box {
|
.page-title-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 2.5rem;
|
min-height: 2.25rem;
|
||||||
margin: .25rem 0 1.5rem;
|
margin: .25rem 0 1.5rem;
|
||||||
|
|
||||||
>* {
|
>* {
|
||||||
|
|||||||
@@ -1,161 +0,0 @@
|
|||||||
$sidenav-padding-x: 1rem;
|
|
||||||
$sidenav-padding-y: 1rem;
|
|
||||||
$sidenav-active-color: $primary;
|
|
||||||
$breakpoints: $grid-breakpoints;
|
|
||||||
|
|
||||||
@mixin sidenav-overlay {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
body.show-sidenav & {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
z-index: $zindex-fixed - 1;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba($dark, .1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sidenav-base {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: $zindex-fixed;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
transition: .3s opacity, .3s transform;
|
|
||||||
will-change: transform;
|
|
||||||
width: $sidenav-width;
|
|
||||||
min-width: $sidenav-width;
|
|
||||||
|
|
||||||
&.sidenav-right {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.show-sidenav & {
|
|
||||||
@include sidenav-visible-common;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sidenav-visible-common {
|
|
||||||
transform: translateX(0) !important;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sidenav-expanded {
|
|
||||||
@include sidenav-visible-common;
|
|
||||||
width: $sidenav-width;
|
|
||||||
min-width: $sidenav-width;
|
|
||||||
|
|
||||||
&:not(.sidenav-right) ~ .layout-main {
|
|
||||||
//padding-left: $sidenav-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidenav-right ~ .layout-main {
|
|
||||||
//padding-right: $sidenav-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ~ .sidenav-overlay {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sidenav-folded {
|
|
||||||
@include sidenav-visible-common;
|
|
||||||
width: $sidenav-folded-width;
|
|
||||||
min-width: $sidenav-folded-width;
|
|
||||||
|
|
||||||
&:not(.sidenav-right) ~ .layout-main {
|
|
||||||
//padding-left: $sidenav-folded-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidenav-right ~ .layout-main {
|
|
||||||
//padding-right: $sidenav-folded-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ~ .sidenav-overlay {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Sidebar
|
|
||||||
*/
|
|
||||||
.sidenav {
|
|
||||||
@include sidenav-base;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: inherit;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
overflow: auto;
|
|
||||||
pointer-events: inherit;
|
|
||||||
user-select: none;
|
|
||||||
background: $sidenav-bg;
|
|
||||||
padding: $sidenav-padding-y $sidenav-padding-x;
|
|
||||||
padding: 0; //todo: remove
|
|
||||||
|
|
||||||
box-shadow: 1px 0 $sidenav-border-color;
|
|
||||||
|
|
||||||
/*
|
|
||||||
Right navbar
|
|
||||||
*/
|
|
||||||
&.sidenav-right {
|
|
||||||
order: 9;
|
|
||||||
box-shadow: -1px 0 $sidenav-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-overlay {
|
|
||||||
@include sidenav-overlay;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Folded navbar
|
|
||||||
*/
|
|
||||||
.sidenav-folded {
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
&#{$infix} {
|
|
||||||
@include sidenav-folded;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-expanded {
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
&#{$infix} {
|
|
||||||
@include sidenav-expanded;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
Utils
|
|
||||||
*/
|
|
||||||
.hide-sidenav-folded {
|
|
||||||
.sidenav.sidenav-folded & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide-sidenav-expanded {
|
|
||||||
.sidenav:not(.sidenav-folded) & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -8,3 +8,31 @@
|
|||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin scrollbar($is-dark: false) {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
transition: .3s background;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
@if ($is-dark) {
|
||||||
|
background: transparent;
|
||||||
|
} @else {
|
||||||
|
background: $gray-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::-webkit-scrollbar-thumb {
|
||||||
|
background: $gray-500;
|
||||||
|
|
||||||
|
@if ($is-dark) {
|
||||||
|
background: mix(#fff, $dark, 20%);
|
||||||
|
} @else {
|
||||||
|
background: $gray-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
@include subheader(false);
|
@include subheader(false);
|
||||||
background: $gray-200;
|
background: $gray-200;
|
||||||
@@ -8,9 +10,9 @@
|
|||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 8px;
|
width: $badge-empty-size;
|
||||||
|
height: $badge-empty-size;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: 8px;
|
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|||||||
@@ -39,6 +39,10 @@
|
|||||||
height: .25rem;
|
height: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-bar-indeterminate {
|
.progress-bar-indeterminate {
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@@ -47,6 +47,5 @@ Bootstrap color input
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
background: $white;
|
|
||||||
transition: .3s background-position, .3s background-color;
|
transition: .3s background-position, .3s background-color;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user