mirror of
https://github.com/tabler/tabler.git
synced 2026-10-20 06:44:20 +04:00
42 files changed
+825
-550
No files matched your search
+5
-5
@@ -11,7 +11,7 @@ mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
|
||||
|
||||
debug: false
|
||||
|
||||
dark-theme: false
|
||||
layout-dark: false
|
||||
|
||||
plugins:
|
||||
- jekyll-random
|
||||
@@ -50,10 +50,10 @@ toc:
|
||||
collections:
|
||||
docs:
|
||||
output: true
|
||||
changelog:
|
||||
output: false
|
||||
components:
|
||||
output: true
|
||||
# changelog:
|
||||
# output: false
|
||||
# components:
|
||||
# output: true
|
||||
|
||||
defaults:
|
||||
- scope:
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
first:
|
||||
url: '#'
|
||||
icon: star
|
||||
title: First
|
||||
active: true
|
||||
|
||||
second:
|
||||
url: '#'
|
||||
icon: star
|
||||
badge: 2
|
||||
title: Second
|
||||
|
||||
third:
|
||||
url: '#'
|
||||
icon: star
|
||||
title: Third
|
||||
children:
|
||||
first:
|
||||
url: '#'
|
||||
title: First
|
||||
second:
|
||||
url: '#'
|
||||
title: Second
|
||||
third:
|
||||
url: '#'
|
||||
title: Third
|
||||
|
||||
disabled:
|
||||
url: '#'
|
||||
icon: star
|
||||
disabled: true
|
||||
title: Disabled
|
||||
+47
-6
@@ -3,13 +3,9 @@ home:
|
||||
title: Home
|
||||
icon: home
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
icon: checkbox
|
||||
|
||||
base:
|
||||
title: Base
|
||||
title: Interface
|
||||
title-long: User Interface
|
||||
icon: package
|
||||
columns: 2
|
||||
children:
|
||||
@@ -37,6 +33,9 @@ base:
|
||||
maps-vector:
|
||||
url: maps-vector.html
|
||||
title: Vector maps
|
||||
navigation:
|
||||
url: navigation.html
|
||||
title: Navigation
|
||||
charts:
|
||||
url: charts.html
|
||||
title: Charts
|
||||
@@ -97,6 +96,12 @@ base:
|
||||
url: maintenance.html
|
||||
title: Maintenance page
|
||||
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Forms
|
||||
title-long: Form elements
|
||||
icon: checkbox
|
||||
|
||||
extra:
|
||||
title: Extra
|
||||
icon: star
|
||||
@@ -128,6 +133,42 @@ extra:
|
||||
music:
|
||||
title: Music
|
||||
url: music.html
|
||||
|
||||
layout:
|
||||
icon: layout-2
|
||||
title: Layout
|
||||
children:
|
||||
horizontal:
|
||||
url: layout-horizontal.html
|
||||
title: Horizontal
|
||||
vertical:
|
||||
url: layout-vertical.html
|
||||
title: Vertical
|
||||
vertical-right:
|
||||
url: layout-vertical-right.html
|
||||
title: Right vertical
|
||||
condensed:
|
||||
url: layout-condensed.html
|
||||
title: Condensed
|
||||
condensed-dark:
|
||||
url: layout-condensed-dark.html
|
||||
title: Condensed dark
|
||||
combo:
|
||||
url: layout-combo.html
|
||||
title: Combined
|
||||
navbar-dark:
|
||||
url: layout-navbar-dark.html
|
||||
title: Navbar dark
|
||||
dark-mode:
|
||||
url: layout-dark.html
|
||||
title: Dark mode
|
||||
fluid:
|
||||
url: layout-fluid.html
|
||||
title: Fluid
|
||||
fluid-vertical:
|
||||
url: layout-fluid-vertical.html
|
||||
title: Fluid vertical
|
||||
|
||||
docs:
|
||||
title: Docs
|
||||
icon: file-text
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
{% assign page-header = page.page-header | default: layout.page-header %}
|
||||
|
||||
<div class="content">
|
||||
<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
|
||||
{% if page-header %}
|
||||
{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include layout/footer.html %}
|
||||
</div>
|
||||
@@ -1,6 +1,16 @@
|
||||
{% assign prefix = include.prefix | default: 'navbar' %}
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
|
||||
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
|
||||
{% unless include.hide-logo %}
|
||||
{% if include.small-logo %}
|
||||
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
|
||||
{% else %}
|
||||
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
|
||||
{% if include.show-title %}
|
||||
Dashboard
|
||||
{% endif %}
|
||||
</a>
|
||||
@@ -1,17 +1,35 @@
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
{% assign hide-icons = include.hide-icons %}
|
||||
|
||||
<ul class="navbar-nav">
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign menu = site.data.menu %}
|
||||
{% if include.sample %}
|
||||
{% assign menu = site.data.menu-sample %}
|
||||
{% endif %}
|
||||
|
||||
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for level-1 in menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
|
||||
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
|
||||
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
|
||||
<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
|
||||
<span class="nav-link-title">{{ level-1[1].title }}</span>
|
||||
<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
||||
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
|
||||
{% unless hide-icons %}
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
|
||||
{% endunless %}
|
||||
|
||||
<span class="nav-link-title">
|
||||
{% if include.long-titles %}
|
||||
{{ level-1[1].title-long | default: level-1[1].title }}
|
||||
{% else %}
|
||||
{{ level-1[1].title }}
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
{% if level-1[1].badge %}
|
||||
<span class="badge bg-red">{{ level-1[1].badge }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% if level-1[1].children %}
|
||||
<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
|
||||
<ul class="dropdown-menu{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}{% if include.auto-open and level-1[0] == current-page[0] %} show{% endif %}">
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<li {% if level-2[1].children %}class="dropright"{% endif %}>
|
||||
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% 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 %}>
|
||||
@@ -32,10 +50,12 @@
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
{% comment %}
|
||||
<li class="nav-item d-none-navbar-vertical">
|
||||
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
|
||||
<span class="nav-link-icon">{% include ui/icon.html icon="adjustments" %}</span>
|
||||
<span class="nav-link-title">Customize</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
</ul>
|
||||
@@ -1,20 +0,0 @@
|
||||
{% assign breakpoint = 'lg' %}
|
||||
<nav class="navbar navbar-expand-{{ breakpoint }} navbar-light navbar-primary" id="navbar-primary">
|
||||
<div class="container">
|
||||
{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
|
||||
|
||||
<div class="navbar-collapse collapse">
|
||||
<h6 class="navbar-heading">Navigation</h6>
|
||||
{% include layout/navbar-menu.html %}
|
||||
|
||||
<h6 class="navbar-heading mt-4">Tools</h6>
|
||||
|
||||
<div class="navbar-side">
|
||||
{% include layout/navbar-search.html class="d-none-navbar-vertical-narrow" %}
|
||||
{% include ui/button.html text="Customize" icon="adjustments" color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-narrow" %}
|
||||
{% include ui/button.html icon="adjustments" icon-only=true color="primary" block=true modal-id="customize" class="d-none-navbar-horizontal d-none-navbar-vertical-wide" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<div class="d-none d-xl-block ml-auto{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
|
||||
<form action="." method="get">
|
||||
{% include ui/form/input-icon.html prepend=true %}
|
||||
{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded %}
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,52 +0,0 @@
|
||||
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
|
||||
<div class="container">
|
||||
{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
|
||||
|
||||
<form class="form-inline w-50 mr-4 d-none d-md-flex ">
|
||||
{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w-100" class="w-100" %}
|
||||
</form>
|
||||
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link px-0" data-toggle="dropdown">
|
||||
{% include ui/icon.html icon="settings" %}
|
||||
</a>
|
||||
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link" data-toggle="dropdown">
|
||||
{% include ui/flag.html flag="us" class="mr-1" %}
|
||||
<span class="d-none d-lg-inline">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
|
||||
<a href="#" class="dropdown-item">{% include ui/flag.html flag="de" class="mr-1" %} German</a>
|
||||
<a href="#" class="dropdown-item">{% include ui/flag.html flag="pl" class="mr-1" %} Polish</a>
|
||||
<a href="#" class="dropdown-item">{% include ui/flag.html flag="jp" class="mr-1" %} Japan</a>
|
||||
<a href="#" class="dropdown-item">{% include ui/flag.html flag="ru" class="mr-1" %} Russian</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link px-0" data-toggle="dropdown">
|
||||
{% include ui/icon.html icon="bell" %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
|
||||
{% include cards/navbar-notifications.html %}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown pl-3">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
<div class="d-none d-lg-block pl-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-muted">Founder</div>
|
||||
</div>
|
||||
</a>
|
||||
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
{% assign person-id = include.person-id | default: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="nav-item dropdown d-none d-md-flex mr-3">
|
||||
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
|
||||
{% include ui/icon.html icon="bell" %}
|
||||
<span class="badge bg-red"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
|
||||
{% include cards/navbar-notifications.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
|
||||
{% include ui/avatar.html person-id=person-id %}
|
||||
{% unless include.hide-username %}
|
||||
<div class="d-none d-xl-block pl-2">
|
||||
<div>{{ person.full_name }}</div>
|
||||
<div class="mt-1 small text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
</a>
|
||||
{% include ui/dropdown-menu.html right=true icons=true separated=true %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse"{% if include.target %} data-target="#{{ include.target }}"{% endif %}>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@@ -0,0 +1,46 @@
|
||||
{% assign breakpoint = include.breakpoint | default: 'md' %}
|
||||
{% assign condensed = include.condensed | default: false %}
|
||||
|
||||
<header class="navbar navbar-expand-{{ breakpoint }}{% unless include.transparent %} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endunless %}{% if include.sticky %} sticky-top{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
|
||||
<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}">
|
||||
{% include layout/navbar-toggler.html target="navbar-menu" %}
|
||||
|
||||
{% unless include.hide-brand %}
|
||||
{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pr-0 pr-md-3" breakpoint=breakpoint show-title=include.show-title %}
|
||||
{% endunless %}
|
||||
|
||||
{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %}
|
||||
|
||||
{% if condensed %}
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
{% if include.hide-search %}
|
||||
{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
|
||||
{% elsif include.hide-menu %}
|
||||
{% include layout/navbar-search.html rounded=include.transparent dark=include.dark %}
|
||||
{% else %}
|
||||
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
||||
{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
|
||||
|
||||
{% assign search-class = "ml-md-auto pl-md-4 py-2 py-md-0 mr-md-4 order-first order-md-last flex-grow-1" %}
|
||||
{% unless include.fluid-search %}
|
||||
{% assign search-class = search-class | append: " flex-md-grow-0" %}
|
||||
{% endunless %}
|
||||
|
||||
{% include layout/navbar-search.html breakpoint="lg" rounded=include.transparent class=search-class dark=include.dark %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% unless condensed %}
|
||||
<div class="navbar-expand-{{ breakpoint }}">
|
||||
<div class="navbar collapse navbar-collapse {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}" id="navbar-menu">
|
||||
<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}">
|
||||
{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons long-titles=true %}
|
||||
{% include layout/navbar-search.html breakpoint=breakpoint dark=include.dark-secondary class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
@@ -0,0 +1,23 @@
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% unless include.transparent %} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endunless %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
|
||||
<div class="container">
|
||||
{% include layout/navbar-toggler.html target="navbar-menu" %}
|
||||
|
||||
{% unless include.hide-brand %}
|
||||
{% include layout/navbar-logo.html dark=include.dark breakpoint=breakpoint %}
|
||||
{% endunless %}
|
||||
|
||||
{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id %}
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" %}
|
||||
|
||||
{% comment %}
|
||||
<div class="d-none d-{{ breakpoint }}-flex mt-auto">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, cupiditate doloribus dolorum impedit labore magni nisi nostrum rerum tempora! Accusantium asperiores cum, est eum quas quia similique sunt ullam vel!
|
||||
</div>
|
||||
{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -1,11 +1,11 @@
|
||||
{% capture addon %}
|
||||
{% if include.loader %}
|
||||
<span class="input-icon-addon">
|
||||
<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
|
||||
{% include ui/spinner.html class="text-muted" size="sm" %}
|
||||
</span>
|
||||
{% else %}
|
||||
{% assign icon = include.icon | default: 'search' %}
|
||||
<span class="input-icon-addon">
|
||||
<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
|
||||
{% include ui/icon.html icon=icon %}
|
||||
</span>
|
||||
{% endif %}
|
||||
@@ -16,7 +16,7 @@
|
||||
{{ addon }}
|
||||
{% endif %}
|
||||
|
||||
<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
|
||||
<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
|
||||
|
||||
{% unless include.prepend %}
|
||||
{{ addon }}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
|
||||
|
||||
{% if jekyll.environment == 'production' %}
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||||
|
||||
<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
|
||||
@@ -32,6 +33,8 @@
|
||||
{% endif %}
|
||||
|
||||
{% include layout/og.html show=layout.og-component %}
|
||||
{% endif %}
|
||||
|
||||
{% include layout/css.html %}
|
||||
|
||||
<style>
|
||||
@@ -41,21 +44,21 @@
|
||||
</style>
|
||||
</head>
|
||||
|
||||
{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
|
||||
<body class="antialiased{% if dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
{% assign layout-dark = page.layout-dark | default: site.layout-dark %}
|
||||
<body class="antialiased{% if layout-dark %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include layout/modals-capture.html %}
|
||||
|
||||
{% include layout/js.html %}
|
||||
|
||||
{% include layout/js-capture.html %}
|
||||
|
||||
{% if site.debug and jekyll.environment == 'development' %}
|
||||
{% include layout/debug.html %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<script>document.body.style.display = "block"</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,23 +2,15 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
{% assign page-header = page.page-header | default: layout.page-header %}
|
||||
{% if page.layout-sidebar %}
|
||||
{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right %}
|
||||
{% endif %}
|
||||
|
||||
<div class="page">
|
||||
{% include layout/navbar-primary.html %}
|
||||
{% include layout/navbar-secondary.html %}
|
||||
{% unless page.layout-hide-topbar %}
|
||||
{% include layout/navbar.html condensed=page.layout-navbar-condensed dark=page.layout-navbar-dark hide-brand=page.layout-navbar-hide-brand hide-menu=page.layout-navbar-hide-menu class=page.layout-navbar-class %}
|
||||
{% endunless %}
|
||||
|
||||
<div class="content">
|
||||
<div class="container{% if page.container-size %}-{{ page.container-size }}{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
|
||||
{% if page-header %}
|
||||
{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include layout/footer.html %}
|
||||
</div>
|
||||
{% include layout/content.html %}
|
||||
</div>
|
||||
|
||||
{% include ui/modal.html modal-id="customize" top=true %}
|
||||
@@ -2,4 +2,7 @@
|
||||
title: Empty page
|
||||
done: true
|
||||
menu: base.empty
|
||||
page-header: Empty page
|
||||
---
|
||||
|
||||
<!-- Content here -->
|
||||
+3
-4
@@ -4,11 +4,10 @@ page-header: Icons
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{% include cards/icons.html title="Tabler icons" group="tabler" %}
|
||||
</div>
|
||||
|
||||
{% if jekyll.environment == 'production' %}
|
||||
<div class="col-12">
|
||||
{% include cards/icons.html title="Tabler icons" group="tabler" %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include cards/icons.html title="Brand icons" group="brand" %}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
page-header: Combo layout
|
||||
menu: layout.combo
|
||||
layout-sidebar: true
|
||||
layout-sidebar-dark: true
|
||||
layout-navbar-hide-brand: true
|
||||
layout-navbar-hide-menu: true
|
||||
layout-navbar-class: "d-none d-lg-flex"
|
||||
layout-navbar-condensed: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
page-header: Condensed dark layout
|
||||
menu: layout.condensed-dark
|
||||
layout-navbar-condensed: true
|
||||
layout-navbar-dark: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-header: Condensed layout
|
||||
menu: layout.condensed
|
||||
layout-navbar-condensed: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-header: Dark mode
|
||||
menu: layout.dark-mode
|
||||
layout-dark: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
page-header: Fluid vertical layout
|
||||
menu: layout.fluid-vertical
|
||||
layout-fluid: true
|
||||
layout-sidebar: true
|
||||
layout-sidebar-dark: true
|
||||
layout-hide-topbar: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-header: Fluid layout
|
||||
menu: layout.fluid
|
||||
layout-fluid: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
page-header: Horizontal layout
|
||||
menu: layout.horizontal
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-header: Navbar dark
|
||||
menu: layout.navbar-dark
|
||||
layout-navbar-dark: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
page-header: Right vertical layout
|
||||
menu: layout.vertical-right
|
||||
layout-sidebar: true
|
||||
layout-sidebar-right: true
|
||||
layout-hide-topbar: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
page-header: Vertical layout
|
||||
menu: layout.vertical
|
||||
layout-sidebar: true
|
||||
layout-sidebar-dark: true
|
||||
layout-hide-topbar: true
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
menu: base.navigation
|
||||
page-header: Navigation
|
||||
---
|
||||
|
||||
|
||||
<div class="box">
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true transparent=true person-id=3 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true person-id=4 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true dark=true hide-logo=true show-title=true hide-icons=true hide-username=true person-id=5 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true dark=true small-logo=true background-color="#7952b3" hide-search=true person-id=6 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true dark=true background="primary" hide-brand=true hide-icons=true fluid-search=true hide-username=true person-id=7 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=8 %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{% include layout/navbar.html sample=true secondary=true dark=true person-id=9 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,7 +7,6 @@
|
||||
}
|
||||
|
||||
.card,
|
||||
.navbar-light,
|
||||
.footer,
|
||||
.modal-content,
|
||||
.modal-header,
|
||||
@@ -47,10 +46,6 @@
|
||||
background-color: $dark-mode-darken;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 0 1px $dark-mode-darken;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: $dark-mode-darken;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
height: $caret-width;
|
||||
border-bottom: 1px solid;
|
||||
border-left: 1px solid;
|
||||
margin-right: .1em;
|
||||
|
||||
@if $direction != 'left' {
|
||||
margin-left: $caret-spacing;
|
||||
|
||||
+59
-46
@@ -2,15 +2,24 @@
|
||||
$assets-base: ".." !default;
|
||||
|
||||
// FONTS
|
||||
$google-font: "Source Sans Pro" !default;
|
||||
$google-font: "Ubuntu" !default;
|
||||
|
||||
$font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
|
||||
$font-family-sans-serif: $google-font, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
||||
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
|
||||
// EXTERNAL FONTS
|
||||
$icon-fonts: () !default;
|
||||
|
||||
//Fonts
|
||||
$font-size-base: .875rem !default;
|
||||
$font-weight-bold: 500 !default;
|
||||
$body-letter-spacing: -.01em !default;
|
||||
|
||||
$line-height-base: (1.5rem/$font-size-base) !default;
|
||||
$line-height-sm: 1.3333334 !default;
|
||||
$line-height-lg: 2.1333334 !default;
|
||||
|
||||
// COLORS
|
||||
$theme-color-interval: 10% !default;
|
||||
$min-contrast-ratio: 1.5 !default;
|
||||
@@ -54,10 +63,10 @@ $white: #ffffff !default;
|
||||
$body-bg: $light !default;
|
||||
$body-color: $dark !default;
|
||||
|
||||
$text-muted-opacity: .60 !default;
|
||||
$text-muted-opacity: .72 !default; //Perfect color for AA
|
||||
$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
|
||||
$border-color: rgba($text-muted, .24) !default;
|
||||
$border-color-light: rgba($text-muted, .12) !default;
|
||||
$border-color: rgba($text-muted, .2) !default;
|
||||
$border-color-light: rgba($text-muted, .1) !default;
|
||||
|
||||
$active-bg: rgba($blue, .06) !default;
|
||||
$hover-bg: rgba($text-muted, .06) !default;
|
||||
@@ -122,14 +131,6 @@ $avatar-sizes: (
|
||||
"xl": 6rem
|
||||
) !default;
|
||||
|
||||
//Fonts
|
||||
$font-size-base: .9375rem !default;
|
||||
$font-weight-bold: 600 !default;
|
||||
$body-letter-spacing: null !default;
|
||||
|
||||
$line-height-base: 1.6 !default;
|
||||
$line-height-sm: 1.3333334 !default;
|
||||
$line-height-lg: 2.1333334 !default;
|
||||
|
||||
$link-decoration: none !default;
|
||||
|
||||
@@ -142,19 +143,19 @@ $headings-font-weight: $font-weight-bold !default;
|
||||
|
||||
$small-font-size: 87.5% !default;
|
||||
|
||||
$h1-font-size: (26rem / 16) !default;
|
||||
$h1-font-size: (28rem / 16) !default;
|
||||
$h2-font-size: (22rem / 16) !default;
|
||||
$h3-font-size: (18rem / 16) !default;
|
||||
$h4-font-size: (15rem / 16) !default;
|
||||
$h5-font-size: (13rem / 16) !default;
|
||||
$h6-font-size: (11rem / 16) !default;
|
||||
$h4-font-size: $font-size-base !default;
|
||||
$h5-font-size: (12rem / 16) !default;
|
||||
$h6-font-size: (10rem / 16) !default;
|
||||
|
||||
$blockquote-font-size: $h4-font-size !default;
|
||||
$blockquote-font-size: $font-size-base !default;
|
||||
|
||||
$code-font-size: $h6-font-size !default;
|
||||
$code-color: $primary !default;
|
||||
|
||||
$lead-font-size: $h4-font-size !default;
|
||||
$lead-font-size: $font-size-base !default;
|
||||
$lead-font-weight: 400 !default;
|
||||
|
||||
$hr-opacity: .1 !default;
|
||||
@@ -169,11 +170,9 @@ $spacers: (
|
||||
1: $spacer * .25,
|
||||
2: $spacer * .5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.25,
|
||||
5: $spacer * 2,
|
||||
6: $spacer * 3,
|
||||
7: $spacer * 6,
|
||||
8: $spacer * 9,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
6: $spacer * 4.5
|
||||
) !default;
|
||||
|
||||
$size-spacers: (
|
||||
@@ -238,7 +237,6 @@ $embed-responsive-aspect-ratios: (
|
||||
$content-padding-y: 1.25rem !default;
|
||||
|
||||
|
||||
|
||||
//alerts
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-bg-level: -8 !default;
|
||||
@@ -253,6 +251,9 @@ $breadcrumb-variants: (
|
||||
) !default;
|
||||
|
||||
//badges
|
||||
$badge-padding-y: .125rem !default;
|
||||
$badge-padding-x: .25rem !default;
|
||||
$badge-font-size: $h6-font-size !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-empty-size: .5rem !default;
|
||||
|
||||
@@ -277,7 +278,7 @@ $input-focus-color: inherit !default;
|
||||
|
||||
//buttons
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-font-weight: 500 !default;
|
||||
$btn-font-weight: $font-weight-bold !default;
|
||||
$btn-border-radius: 3px !default;
|
||||
|
||||
//cards
|
||||
@@ -307,14 +308,13 @@ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !default;
|
||||
|
||||
|
||||
|
||||
//close
|
||||
$close-font-weight: 400 !default;
|
||||
$close-font-size: 1.5rem !default;
|
||||
|
||||
//dropdown
|
||||
$dropdown-item-padding-x: 1rem !default;
|
||||
$dropdown-font-size: $h4-font-size !default;
|
||||
$dropdown-font-size: $font-size-base !default;
|
||||
$dropdown-divider-bg: $border-color !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-link-hover-bg: $hover-bg !default;
|
||||
@@ -330,6 +330,7 @@ $dropdown-menu-max-width: 25rem !default;
|
||||
|
||||
//grid
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
$container-padding-x: .75rem !default;
|
||||
|
||||
//loader
|
||||
$loader-size: 2.5rem !default;
|
||||
@@ -363,29 +364,41 @@ $modal-lg: 720px !default;
|
||||
$modal-md: 540px !default;
|
||||
$modal-sm: 380px !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: .25rem !default;
|
||||
$nav-link-padding-x: .75rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-padding-y: .5rem !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
$navbar-padding-y: .25rem !default;
|
||||
|
||||
$navbar-light-color: rgba($body-color, $text-muted-opacity) !default;
|
||||
$navbar-light-brand-color: $body-color !default;
|
||||
$navbar-light-active-color: $body-color !default;
|
||||
$navbar-light-disabled-color: rgba($body-color, .3) !default;
|
||||
|
||||
$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
|
||||
$navbar-dark-brand-color: $white !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-disabled-color: rgba($white, .3) !default;
|
||||
|
||||
|
||||
$navbar-brand-padding-y: $nav-link-padding-y !default;
|
||||
$navbar-brand-image-height: 2rem !default;
|
||||
$navbar-brand-margin-right: 0 !default;
|
||||
$navbar-brand-font-size: $h3-font-size !default;
|
||||
$navbar-brand-font-weight: $font-weight-bold !default;
|
||||
|
||||
$navbar-toggler-padding-y: .75rem !default;
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-margin: -.75rem !default;
|
||||
$navbar-toggler-font-size: 1rem !default;
|
||||
$navbar-toggler-size: 1.5rem !default;
|
||||
$navbar-toggler-item-height: 2px !default;
|
||||
$navbar-toggler-item-spacing: 7px !default;
|
||||
$navbar-toggler-transform-time: .2s !default;
|
||||
$navbar-toggler-padding-x: 0 !default;
|
||||
$navbar-toggler-padding-y: 0 !default;
|
||||
$navbar-toggler-animation-time: .2s !default;
|
||||
$navbar-toggler-focus-width: 0 !default;
|
||||
|
||||
//sidenav
|
||||
$navbar-vertical-width: 15.625rem !default;
|
||||
$navbar-vertical-narrow-width: 4rem !default;
|
||||
$navbar-vertical-dark-bg: $dark !default;
|
||||
$navbar-vertical-dark-color: $white !default;
|
||||
$navbar-vertical-padding: 1rem !default;
|
||||
$navbar-vertical-active-accent-color: $primary !default;
|
||||
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
|
||||
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
//sidebar
|
||||
$sidebar-width: 15rem !default;
|
||||
|
||||
//popover
|
||||
$popover-border-color: $border-color !default;
|
||||
@@ -481,7 +494,7 @@ $form-range-thumb-focus-box-shadow-width: .125rem !default;
|
||||
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
|
||||
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
|
||||
|
||||
$caret-width: .32em !default;
|
||||
$caret-width: .36em !default;
|
||||
|
||||
//Flags
|
||||
$generate-flags: true !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@if $google-font {
|
||||
$google-font-url: "https://fonts.googleapis.com/css?family=" + str-replace($google-font, " ", "+") + ":300,400,500,600,700&display=swap" !default;
|
||||
$google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
|
||||
|
||||
@import url($google-font-url);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ body {
|
||||
touch-action: manipulation;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga" 0;
|
||||
position: relative;
|
||||
|
||||
.content * {
|
||||
@include scrollbar;
|
||||
|
||||
+328
-361
@@ -1,314 +1,30 @@
|
||||
/*
|
||||
Horizontal navbar
|
||||
*/
|
||||
@mixin navbar-horizontal {
|
||||
.d-none-navbar-horizontal,
|
||||
~ * .d-none-navbar-vertical-narrow {
|
||||
display: none !important;
|
||||
}
|
||||
@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color) {
|
||||
background: $bg-color;
|
||||
color: $color;
|
||||
|
||||
.dropdown-menu {
|
||||
margin-right: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Vertical narrow navbar
|
||||
*/
|
||||
@mixin navbar-vertical-narrow {
|
||||
width: $navbar-vertical-narrow-width;
|
||||
overflow: visible;
|
||||
|
||||
.d-none-navbar-vertical-narrow,
|
||||
~ * .d-none-navbar-vertical-narrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 3rem; //todo: to variable
|
||||
}
|
||||
|
||||
.nav-link-title,
|
||||
.navbar-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
margin: 0 auto;
|
||||
font-size: 1.125rem;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-small {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $navbar-vertical-narrow-width;
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
margin: 0 0 0 -4px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $navbar-vertical-narrow-width;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0 -4px 0 0;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Vertical navbar
|
||||
*/
|
||||
@mixin navbar-vertical {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $navbar-vertical-width;
|
||||
z-index: $zindex-fixed;
|
||||
min-height: auto;
|
||||
align-items: start;
|
||||
overflow: auto;
|
||||
|
||||
> [class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: $navbar-vertical-width;
|
||||
|
||||
[class*="container"] {
|
||||
padding-left: $cards-grid-gap;
|
||||
padding-right: $cards-grid-gap;
|
||||
}
|
||||
}
|
||||
|
||||
.d-none-navbar-vertical,
|
||||
~ * .d-none-navbar-vertical {
|
||||
display: none !important;
|
||||
}
|
||||
@include scrollbar;
|
||||
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
height: $navbar-height;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
color: $brand-color;
|
||||
|
||||
.navbar-heading {
|
||||
@include subheader();
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
align-items: normal;
|
||||
|
||||
padding: $navbar-vertical-padding $navbar-vertical-padding;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $brand-color;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
margin-left: -($navbar-vertical-padding);
|
||||
margin-right: -($navbar-vertical-padding);
|
||||
|
||||
.nav-link {
|
||||
min-height: 0;
|
||||
height: 2.5rem;
|
||||
padding-left: $navbar-vertical-padding;
|
||||
padding-right: $navbar-vertical-padding;
|
||||
justify-content: start;
|
||||
}
|
||||
color: $color;
|
||||
|
||||
.nav-item {
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
|
||||
>.nav-link:before {
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-side {
|
||||
margin-left: 0;
|
||||
margin-top: auto;
|
||||
padding-left: 0;
|
||||
padding-top: $navbar-vertical-padding;
|
||||
|
||||
> * {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
~ .navbar,
|
||||
~ .content {
|
||||
margin-left: 0;
|
||||
margin-right: $navbar-vertical-width;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.navbar-vertical-narrow) {
|
||||
.d-none-navbar-vertical-wide,
|
||||
~ * .d-none-navbar-vertical-wide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-item.active>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
columns: 1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding-left: add($navbar-vertical-padding, 1.5rem);
|
||||
opacity: $text-muted-opacity;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical-narrow {
|
||||
@include navbar-vertical-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
All navbars
|
||||
*/
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: $navbar-height;
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
z-index: $zindex-fixed;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
line-height: 1;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
font-size: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
margin-right: .5rem;
|
||||
line-height: .99;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
align-items: center;
|
||||
|
||||
.nav-link {
|
||||
color: inherit;
|
||||
opacity: $text-muted-opacity;
|
||||
transition: .3s opacity;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-active-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: inherit;
|
||||
opacity: $text-muted-opacity / 3;
|
||||
color: $link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -316,21 +32,171 @@ All navbars
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $brand-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $color;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin navbar-dark {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
|
||||
@include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
|
||||
@include scrollbar(true);
|
||||
|
||||
.input-icon-addon {
|
||||
color: rgba($dark-mode-text, .64);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($dark-mode-text, .64);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin navbar-vertical-nav {
|
||||
.navbar-collapse {
|
||||
flex-direction: column;
|
||||
|
||||
[class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: -($container-padding-x);
|
||||
margin-right: -($container-padding-x);
|
||||
|
||||
.nav-link {
|
||||
padding: .5rem $container-padding-x;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
position: static;
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
columns: 1;
|
||||
min-width: 0;
|
||||
|
||||
.dropdown-item {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding-left: add($container-padding-x, 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-item.active:after {
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 2px;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar
|
||||
*/
|
||||
.navbar {
|
||||
min-height: $navbar-height;
|
||||
align-items: stretch;
|
||||
|
||||
@include navbar-color();
|
||||
|
||||
@include dark-mode {
|
||||
@include navbar-dark();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
min-height: subtract($navbar-height, 2 * $navbar-padding-y);
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
justify-content: center;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
&-#{$breakpoint} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.navbar-nav {
|
||||
margin-left: (-$navbar-nav-link-padding-x);
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
.nav-item {
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
@include navbar-vertical-nav;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
.navbar-collapse {
|
||||
width: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&.navbar-dark,
|
||||
.navbar-dark {
|
||||
.nav-item.active {
|
||||
.nav-link {
|
||||
background-color: rgba(#000, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-light,
|
||||
.navbar-light {
|
||||
.nav-item.active {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: subtract(-.25rem, 1px);
|
||||
border: 0 solid $primary;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -338,88 +204,189 @@ All navbars
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-side {
|
||||
margin-left: auto;
|
||||
padding-left: 1.5rem;
|
||||
|
||||
> * {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar brand
|
||||
*/
|
||||
.navbar-brand {
|
||||
padding: 0; //todo: move to varaibles
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: $navbar-brand-font-weight;
|
||||
}
|
||||
|
||||
.navbar-brand-logo {
|
||||
height: 2rem;
|
||||
.navbar-brand-image {
|
||||
display: block;
|
||||
height: $navbar-brand-image-height;
|
||||
}
|
||||
|
||||
.navbar-brand-logo-small {
|
||||
display: none;
|
||||
/**
|
||||
Navbar toggler
|
||||
*/
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
width: $navbar-brand-image-height;
|
||||
height: $navbar-brand-image-height;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
height: 2px;
|
||||
width: 1.25em;
|
||||
background: currentColor;
|
||||
border-radius: 10px;
|
||||
transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.45em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -.45em;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded="true"] & {
|
||||
transform: rotate(45deg);
|
||||
transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar light
|
||||
*/
|
||||
.navbar-light {
|
||||
background: $white;
|
||||
@include scrollbar;
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar dark
|
||||
*/
|
||||
.navbar-dark {
|
||||
background: $navbar-vertical-dark-bg;
|
||||
color: $navbar-vertical-dark-color;
|
||||
box-shadow: 0 0 0 1px $dark-mode-darken;
|
||||
@include scrollbar(true);
|
||||
@include navbar-dark;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: inherit !important;
|
||||
opacity: $text-muted-opacity;
|
||||
}
|
||||
/**
|
||||
Navbar nav
|
||||
*/
|
||||
.navbar-nav {
|
||||
align-items: stretch;
|
||||
|
||||
.navbar-brand-autodark {
|
||||
@include autodark-image;
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
background: $dark-mode-lighten;
|
||||
color: $white;
|
||||
}
|
||||
/**
|
||||
Navbar side
|
||||
*/
|
||||
.navbar-side {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar vertical
|
||||
*/
|
||||
@if $enable-navbar-vertical {
|
||||
.navbar:not(.navbar-vertical) {
|
||||
@include navbar-horizontal;
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
@each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
|
||||
&.navbar-expand-#{$breakpoint} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
@include navbar-vertical;
|
||||
}
|
||||
&.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
@include media-breakpoint-down-than($breakpoint) {
|
||||
@include navbar-horizontal;
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-up($next) {
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: flex-start;
|
||||
transition: .3s transform;
|
||||
overflow-x: auto;
|
||||
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-height: auto;
|
||||
|
||||
.nav-link {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> [class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
~ .page {
|
||||
padding-left: $sidebar-width;
|
||||
|
||||
[class*="container"] {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page {
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
}
|
||||
|
||||
@include navbar-vertical-nav;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Navbar secondary
|
||||
*/
|
||||
.navbar-secondary {
|
||||
order: -1;
|
||||
z-index: $zindex-fixed + 10;
|
||||
}
|
||||
}
|
||||
@@ -34,7 +34,7 @@
|
||||
background: $gray-500;
|
||||
|
||||
@if ($is-dark) {
|
||||
background: mix(#fff, $dark, 20%);
|
||||
background: mix(#ffffff, $dark, 20%);
|
||||
} @else {
|
||||
background: $gray-500;
|
||||
}
|
||||
@@ -48,15 +48,29 @@
|
||||
|
||||
@mixin dark-mode {
|
||||
@if $enable-dark-mode {
|
||||
$selector: &;
|
||||
|
||||
@media not print {
|
||||
.theme-dark {
|
||||
@content
|
||||
@if ($selector) {
|
||||
.theme-dark & {
|
||||
@content
|
||||
}
|
||||
} @else {
|
||||
.theme-dark {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media not print and (prefers-color-scheme: dark) {
|
||||
.theme-dark-auto {
|
||||
@content
|
||||
@if ($selector) {
|
||||
.theme-dark-auto & {
|
||||
@content
|
||||
}
|
||||
} @else {
|
||||
.theme-dark-auto {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,11 +2,10 @@
|
||||
@include subheader(false);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 0 .5em;
|
||||
line-height: 1.75em;
|
||||
background: $gray-500;
|
||||
overflow: hidden;
|
||||
vertical-align: text-bottom;
|
||||
user-select: none;
|
||||
|
||||
@at-root a#{&} {
|
||||
color: $white;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.btn {
|
||||
font-weight: 600;
|
||||
font-weight: $btn-font-weight;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
}
|
||||
|
||||
.dropdown-item-icon {
|
||||
width: 1rem;
|
||||
font-size: 1rem;
|
||||
width: 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
margin-right: .5rem;
|
||||
opacity: .64;
|
||||
text-align: center;
|
||||
|
||||
+17
-1
@@ -81,6 +81,22 @@ Form control
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
background-color: rgba($black, .1);
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($black, .1);
|
||||
box-shadow: none;
|
||||
border-color: rgba($white, .24);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($white, .6);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-rounded {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
@@ -111,7 +127,7 @@ Form help
|
||||
*/
|
||||
.form-help {
|
||||
display: inline-flex;
|
||||
font-weight: 600;
|
||||
font-weight: $font-weight-bold;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.125rem;
|
||||
|
||||
@@ -2,11 +2,6 @@
|
||||
Markdown
|
||||
*/
|
||||
.markdown {
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+17
-1
@@ -50,7 +50,23 @@
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: .3s color;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
width: 1.25rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user