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.
|
||||
github_url: https://github.com/tabler/tabler
|
||||
|
||||
debug: true
|
||||
debug: false
|
||||
|
||||
plugins:
|
||||
- jekyll-random
|
||||
@@ -50,21 +50,22 @@ collections:
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
type: pages
|
||||
type: "pages"
|
||||
values:
|
||||
layout: default
|
||||
nav-position: top
|
||||
menu-layout: horizontal
|
||||
-
|
||||
scope:
|
||||
type: docs
|
||||
type: "docs"
|
||||
values:
|
||||
layout: docs
|
||||
nav-position: top
|
||||
menu-layout: horizontal
|
||||
-
|
||||
scope:
|
||||
type: components
|
||||
type: "components"
|
||||
values:
|
||||
layout: component
|
||||
menu-layout: horizontal
|
||||
|
||||
|
||||
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
|
||||
title: Left sidebar
|
||||
url: layout-navbar-left.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
|
||||
url: layout-test.html
|
||||
|
||||
+113
-17
@@ -2,11 +2,15 @@ home:
|
||||
url: index.html
|
||||
title: Dashboard
|
||||
icon: home
|
||||
badge: ''
|
||||
badge-color: blue
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
icon: check-square
|
||||
badge: New
|
||||
badge-color: red
|
||||
|
||||
base:
|
||||
title: Base
|
||||
@@ -15,42 +19,134 @@ base:
|
||||
buttons:
|
||||
url: buttons.html
|
||||
title: Buttons
|
||||
badge: New
|
||||
cards:
|
||||
url: cards.html
|
||||
title: Cards
|
||||
c:
|
||||
url: c.html
|
||||
title: C
|
||||
calendar:
|
||||
title: Calendar
|
||||
icon: calendar
|
||||
url: calendar.html
|
||||
users:
|
||||
title: Users
|
||||
icon: users
|
||||
url: users.html
|
||||
gallery:
|
||||
title: Gallery
|
||||
icon: image
|
||||
url: gallery.html
|
||||
|
||||
charts:
|
||||
url: charts.html
|
||||
title: Charts
|
||||
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:
|
||||
title: Layouts
|
||||
icon: layout
|
||||
url: layouts.html
|
||||
|
||||
extra:
|
||||
title: Extra
|
||||
icon: star
|
||||
children:
|
||||
invoice:
|
||||
icon: file
|
||||
title: Invoice
|
||||
url: invoice.html
|
||||
|
||||
docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
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:
|
||||
# url: changelog.html
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Alerts
|
||||
menu: docs.alerts
|
||||
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
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Badges
|
||||
menu: docs.badges
|
||||
description: A small count and labeling component.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
|
||||
bootstrap-link: components/badge/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Breadcrumb
|
||||
menu: docs.breadcrumb
|
||||
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
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Buttons
|
||||
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.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
|
||||
bootstrap-link: components/buttons/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 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.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
|
||||
bootstrap-link: components/card/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Carousel
|
||||
menu: docs.carousel
|
||||
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 %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Colors
|
||||
menu: docs.colors
|
||||
description:
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
|
||||
bootstrap-link: utilities/colors/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
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
|
||||
---
|
||||
### Default markup
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Form Elements
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
|
||||
bootstrap-link: components/forms/
|
||||
---
|
||||
|
||||
### Classic Input
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Progress
|
||||
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
|
||||
@@ -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.
|
||||
|
||||
{% 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 %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
new: true
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
@@ -14,10 +14,10 @@ new: true
|
||||
|
||||
You can easily change the position of a ribbon by adding a class to the element.
|
||||
|
||||
`ribbon-top` - moves it to the top
|
||||
`ribbon-right` - moves it to the right
|
||||
`ribbon-bottom` - moves it to the bottom
|
||||
`ribbon-left` - moves it to the lefg
|
||||
- `ribbon-top` - moves it to the top
|
||||
- `ribbon-right` - moves it to the right
|
||||
- `ribbon-bottom` - moves it to the bottom
|
||||
- `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.
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Spinners
|
||||
menu: docs.spinners
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
|
||||
bootstrap-link: components/spinners/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tables
|
||||
menu: docs.tables
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
|
||||
bootstrap-link: content/tables/
|
||||
---
|
||||
|
||||
### Basic Table
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Tabs
|
||||
menu: docs.tabs
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
|
||||
bootstrap-link: components/navs/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 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.).
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
|
||||
bootstrap-link: components/toasts/
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 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.
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
|
||||
bootstrap-link: components/tooltips/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Typography
|
||||
menu: docs.typography
|
||||
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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -47,7 +47,9 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.content-page {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.debug a {
|
||||
color: inherit;
|
||||
@@ -142,7 +144,7 @@
|
||||
|
||||
$codeLink
|
||||
// .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>');
|
||||
$modal.find('pre').text(htmlCode);
|
||||
|
||||
@@ -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 %}">
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
|
||||
{% assign has-children = false %}
|
||||
{% if level-1[1].children or level-1[1].docs %}
|
||||
{% if level-1[1].children %}
|
||||
{% assign has-children = true %}
|
||||
{% endif %}
|
||||
|
||||
@@ -31,23 +29,6 @@
|
||||
|
||||
{% if has-children %}
|
||||
<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 %}
|
||||
<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">
|
||||
@@ -63,4 +44,3 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
</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>
|
||||
@@ -22,24 +22,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if page.page-title-actions %}
|
||||
<!-- Page title actions -->
|
||||
<div class="col-auto ml-auto">
|
||||
{% if page.page-title-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 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>
|
||||
{% include layout/page-title-actions.html actions=page.page-title-actions %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 %}">
|
||||
<div class="container">
|
||||
<header class="topnav topbar">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
{% include layout/menu.html top=true %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -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 %}">
|
||||
<div class="container{% if include.fluid %} container-fluid{% endif %}">
|
||||
{% include parts/navbar.html logo=true search=true user-menu=1 person-id=1 dark=include.dark notifications=true %}
|
||||
<header class="topnav topbar">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
<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>
|
||||
</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
|
||||
---
|
||||
|
||||
<div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
|
||||
<div class="wrapper">
|
||||
|
||||
{% if page.menu-layout == 'vertical' %}
|
||||
{% include layout/sidebar.html %}
|
||||
{% endif %}
|
||||
|
||||
<div class="content">
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
|
||||
{% if page.menu-layout != 'vertical' %}
|
||||
{% include layout/topmenu.html %}
|
||||
{% endif %}
|
||||
|
||||
<div class="layout-area-main">
|
||||
|
||||
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
||||
<div class="content-page">
|
||||
<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
|
||||
{% include layout/page-title.html %}
|
||||
|
||||
{{ content }}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ title: Documentation
|
||||
page-title: Documentation
|
||||
---
|
||||
|
||||
{% assign current-url = page.url | replace_regex: "^/", "" %}
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-3 order-lg-1 mb-4">
|
||||
@@ -13,11 +14,21 @@ page-title: Documentation
|
||||
</a>
|
||||
|
||||
<div class="list-group list-group-transparent mb-0">
|
||||
{% for p in site.data.docs %}
|
||||
{% assign doc = site.docs | where: "slug", p.page | first %}
|
||||
<a href="{{ site.base }}{{ doc.url | relative_url }}"
|
||||
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 %}
|
||||
{% for doc in site.data.menu.docs.children %}
|
||||
{% assign key = doc[0] %}
|
||||
<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 %}">
|
||||
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -29,7 +40,7 @@ page-title: Documentation
|
||||
<div class="markdown">
|
||||
{% if page.bootstrap-link %}
|
||||
<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" %}
|
||||
Bootstrap documentation
|
||||
</a>
|
||||
@@ -40,8 +51,6 @@ page-title: Documentation
|
||||
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
{% if page.plugin %}
|
||||
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
|
||||
plugin.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Homepage
|
||||
page-title: Homepage
|
||||
page-pretitle: Overview
|
||||
page-title-actions: home
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
+2
-1
@@ -2,8 +2,9 @@
|
||||
title: Dashboard
|
||||
page-title: Dashboard
|
||||
page-pretitle: Overview
|
||||
page-title-actions: true
|
||||
page-title-actions: buttons
|
||||
site-layout: layout-collapsed-md
|
||||
menu-layout: vertical
|
||||
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
|
||||
sidenav: 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-body">
|
||||
<a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>
|
||||
<div id="card-body"></div>
|
||||
<!-- <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>-->
|
||||
<div id="card-size"></div>
|
||||
<div>
|
||||
<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>
|
||||
@@ -44,7 +47,7 @@ site-layout: layout-collapsed-sm
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $test_el = $('#card-test'),
|
||||
$test_body_el = $('#card-body'),
|
||||
$test_body_el = $('#card-size'),
|
||||
test_width = function () {
|
||||
$test_body_el.text($test_el.width());
|
||||
};
|
||||
|
||||
+2
-2
@@ -41,11 +41,11 @@
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
@include dark-mode ();
|
||||
@include dark-mode;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.auto-theme-dark {
|
||||
@include dark-mode ();
|
||||
@include dark-mode;
|
||||
}
|
||||
}
|
||||
|
||||
+14
-16
@@ -117,7 +117,7 @@ $avatar-sizes: (
|
||||
//Fonts
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
$line-height-base: 1.6 !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
$body-letter-spacing: null !default;
|
||||
|
||||
$border-radius: 3px !default;
|
||||
@@ -206,6 +206,7 @@ $breadcrumb-variants: (
|
||||
|
||||
//badges
|
||||
$badge-font-weight: 500 !default;
|
||||
$badge-empty-size: .5rem !default;
|
||||
|
||||
//buttons
|
||||
$input-btn-line-height: 1.5 !default;
|
||||
@@ -266,11 +267,19 @@ $loader-size: 2.5rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
//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-border-width: 0 !default;
|
||||
@@ -281,20 +290,7 @@ $pagination-bg: transparent !default;
|
||||
$pagination-disabled-bg: transparent !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-border-width: 2px !default;
|
||||
@@ -340,7 +336,9 @@ $input-border-radius: $border-radius !default;
|
||||
|
||||
|
||||
//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-radius: $border-radius !default;
|
||||
$form-check-input-checked-bg-size: .75rem !default;
|
||||
|
||||
+3
-13
@@ -11,20 +11,10 @@ body {
|
||||
touch-action: manipulation;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga" 0;
|
||||
}
|
||||
|
||||
body *::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: .3s background;
|
||||
}
|
||||
|
||||
body *::-webkit-scrollbar-thumb {
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
body *:hover::-webkit-scrollbar-thumb {
|
||||
background: $gray-500;
|
||||
* {
|
||||
@include scrollbar;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+331
-141
@@ -1,182 +1,372 @@
|
||||
/**
|
||||
Layout
|
||||
*/
|
||||
@mixin menu-side {
|
||||
align-items: flex-start;
|
||||
}
|
||||
//sidenav
|
||||
$sidenav-width: 16.25rem;
|
||||
$sidenav-width-folded: 4rem;
|
||||
$sidenav-bg: $white;
|
||||
$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 {
|
||||
.layout-area-menu {
|
||||
position: fixed;
|
||||
left: -($sidenav-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $dark;
|
||||
color: $white;
|
||||
width: $sidenav-width;
|
||||
z-index: $zindex-fixed;
|
||||
transition: .3s left;
|
||||
@mixin sidebar-folded($breakpoint-folded) {
|
||||
@if $breakpoint-folded {
|
||||
|
||||
@include menu-side;
|
||||
@include media-breakpoint-down($breakpoint-folded) {
|
||||
width: $sidenav-width-folded;
|
||||
|
||||
.sidebar-brand {
|
||||
width: $sidenav-width-folded;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: rgba($dark, .1);
|
||||
z-index: $zindex-fixed - 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
.sidebar-content {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
.layout-area-menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
> .sidebar-nav-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
white-space: nowrap;
|
||||
|
||||
grid-template: "head" auto "menu" auto "main" auto /
|
||||
100%;
|
||||
}
|
||||
|
||||
.layout-collapsed {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@if $infix != '' {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
||||
&#{$infix} {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
&:hover {
|
||||
background: $primary;
|
||||
width: $sidenav-width;
|
||||
|
||||
> .sidebar-nav-link {
|
||||
color: #fff;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: add(1rem, $sidenav-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&-folded#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
.sidebar-subnav {
|
||||
display: block;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-folded-width;
|
||||
.sidebar-nav-link {
|
||||
padding-left: $sidenav-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
> .sidebar-nav-link {
|
||||
min-height: $sidenav-folded-item-height;
|
||||
padding: 0 1rem !important;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: .8;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
>span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
margin-left: -.75rem;
|
||||
|
||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
transition-duration: 75ms;
|
||||
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
left: 2.5rem;
|
||||
top: 1rem;
|
||||
|
||||
text-indent: -99999px;
|
||||
width: $badge-empty-size;
|
||||
height: $badge-empty-size;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.5rem;
|
||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
.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;
|
||||
}
|
||||
|
||||
&: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 {
|
||||
bottom: 0;
|
||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
transform: rotate(-90deg);
|
||||
.sidebar-nav-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-topnav {
|
||||
grid-area: head;
|
||||
@mixin sidebar-show($breakpoint-show) {
|
||||
@include media-breakpoint-down($breakpoint-show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
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;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Topbar
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-menu {
|
||||
grid-area: menu;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
/**
|
||||
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;
|
||||
|
||||
&-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@if $sidenav-breakpoint-folded {
|
||||
@include media-breakpoint-down($sidenav-breakpoint-folded) {
|
||||
&-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-main {
|
||||
grid-area: main;
|
||||
.sidebar-content {
|
||||
padding: $sidenav-padding;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@include scrollbar(true);
|
||||
|
||||
.sidebar-brand + & {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Sidebar menu
|
||||
*/
|
||||
.sidebar-nav {
|
||||
margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
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: #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;
|
||||
}
|
||||
}
|
||||
|
||||
.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: $dark;
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
|
||||
.sidebar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
+11
-13
@@ -1,7 +1,6 @@
|
||||
.navbar {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
//padding-top: 0;
|
||||
//padding-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -21,19 +20,18 @@ Navbar logo
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
position: relative;
|
||||
.nav-item {
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
bottom: subtract(-$navbar-padding-y, 1px);
|
||||
right: $navbar-nav-link-padding-x;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
border-bottom: 1px solid $primary;
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.page-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.5rem;
|
||||
min-height: 2.25rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
@include subheader(false);
|
||||
background: $gray-200;
|
||||
@@ -8,9 +10,9 @@
|
||||
|
||||
&:empty {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
width: $badge-empty-size;
|
||||
height: $badge-empty-size;
|
||||
min-width: 0;
|
||||
height: 8px;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -39,6 +39,10 @@
|
||||
height: .25rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-bar-indeterminate {
|
||||
&::after,
|
||||
&::before {
|
||||
|
||||
@@ -47,6 +47,5 @@ Bootstrap color input
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
background: $white;
|
||||
transition: .3s background-position, .3s background-color;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user