mirror of
https://github.com/tabler/tabler.git
synced 2026-08-02 08:25:32 +04:00
Merge branch 'dev' into dev-users-table-and-payments
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Page 400
|
||||
layout: error
|
||||
error: 400
|
||||
done: true
|
||||
---
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Page 401
|
||||
layout: error
|
||||
error: 401
|
||||
done: true
|
||||
---
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Page 403
|
||||
layout: error
|
||||
error: 403
|
||||
done: true
|
||||
---
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Page 500
|
||||
layout: error
|
||||
error: 500
|
||||
done: true
|
||||
---
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Page 503
|
||||
layout: error
|
||||
error: 503
|
||||
done: true
|
||||
---
|
||||
@@ -3,4 +3,4 @@ title: Card with ribbon
|
||||
columns: 1
|
||||
---
|
||||
|
||||
{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
|
||||
{% include_cached cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
|
||||
|
||||
+105
-162
@@ -1,7 +1,81 @@
|
||||
completion-tasks:
|
||||
demo: true
|
||||
type: bar
|
||||
days-labels-count: 7
|
||||
debug: true
|
||||
series:
|
||||
- name: Tasks completion
|
||||
data: [155, 65, 465, 265, 225, 325, 80]
|
||||
|
||||
completion-tasks2:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
type: line
|
||||
|
||||
completion-tasks3:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
type: area
|
||||
|
||||
completion-tasks4:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
stroke-curve: straight
|
||||
type: line
|
||||
|
||||
completion-tasks5:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
stroke-curve: stepline
|
||||
type: line
|
||||
|
||||
completion-tasks6:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
type: bar
|
||||
horizontal: true
|
||||
|
||||
completion-tasks7:
|
||||
demo: true
|
||||
extend: completion-tasks
|
||||
type: line
|
||||
datalabels: true
|
||||
|
||||
completion-tasks8:
|
||||
demo: true
|
||||
series:
|
||||
- data: [155, 65, 465, 265, 225, 325, 80]
|
||||
- data: [113, 42, 65, 54, 76, 65, 35]
|
||||
color: red
|
||||
|
||||
completion-tasks9:
|
||||
demo: true
|
||||
extend: completion-tasks8
|
||||
stacked: true
|
||||
|
||||
completion-tasks10:
|
||||
demo: true
|
||||
extend: completion-tasks8
|
||||
type: area
|
||||
|
||||
completion-tasks11:
|
||||
demo: true
|
||||
extend: completion-tasks8
|
||||
type: area
|
||||
stacked: true
|
||||
|
||||
tasks-overview:
|
||||
type: bar
|
||||
debug: true
|
||||
categories: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4', 'Sprint 5', 'Sprint 6', 'Sprint 7', 'Sprint 8', 'Sprint 9', 'Sprint 10', 'Sprint 11', 'Sprint 12', 'Sprint 13', 'Sprint 14', 'Sprint 15', 'Sprint 16', 'Sprint 17', 'Sprint 18', 'Sprint 19', 'Sprint 20', 'Sprint 21', 'Sprint 22', 'Sprint 23', 'Sprint 24']
|
||||
series:
|
||||
- name: A
|
||||
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
|
||||
|
||||
total-sales:
|
||||
type: donut
|
||||
demo: true
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: Direct
|
||||
color: blue
|
||||
@@ -16,26 +90,22 @@ total-sales:
|
||||
color: yellow
|
||||
data: 12
|
||||
|
||||
total-sales2:
|
||||
type: radalBar
|
||||
campaigns:
|
||||
type: radialBar
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: Direct
|
||||
- name: Total Sent
|
||||
color: blue
|
||||
data: 44
|
||||
- name: Affilliate
|
||||
color: green
|
||||
data: 55
|
||||
- name: Sponsored
|
||||
color: red
|
||||
data: 35
|
||||
- name: E-mail
|
||||
color: yellow
|
||||
data: 12
|
||||
- name: Reached
|
||||
color: blue-300
|
||||
data: 36
|
||||
- name: Opened
|
||||
color: blue-100
|
||||
data: 18
|
||||
|
||||
tasks:
|
||||
name: Tasks
|
||||
demo: true
|
||||
type: line
|
||||
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
|
||||
groups: [1, 2, 3]
|
||||
@@ -56,8 +126,6 @@ tasks:
|
||||
data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
|
||||
|
||||
development-activity:
|
||||
name: Development Activity
|
||||
title: Development Activity
|
||||
type: area
|
||||
groups: [1, 2, 3]
|
||||
hide-points: true
|
||||
@@ -71,8 +139,6 @@ development-activity:
|
||||
data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
|
||||
|
||||
line:
|
||||
name: Employment Growth
|
||||
display: true
|
||||
type: line
|
||||
show-grid: true
|
||||
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
@@ -88,11 +154,9 @@ line:
|
||||
data: [17, 18, 21, 20, 30, 29]
|
||||
|
||||
line-stroke:
|
||||
name: Line chart
|
||||
display: true
|
||||
demo: true
|
||||
type: line
|
||||
stroke-curve: straight
|
||||
hide-legend: true
|
||||
show-grid: true
|
||||
categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
|
||||
series:
|
||||
@@ -107,10 +171,8 @@ line-stroke:
|
||||
data: [7, 10, 11, 18, 18, 18, 24]
|
||||
|
||||
stepline:
|
||||
name: Stepline
|
||||
display: true
|
||||
demo: true
|
||||
type: line
|
||||
hide-legend: true
|
||||
stroke-curve: stepline
|
||||
show-grid: true
|
||||
series:
|
||||
@@ -119,13 +181,11 @@ stepline:
|
||||
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
|
||||
|
||||
temperature:
|
||||
name: Monthly Average Temperature
|
||||
display: true
|
||||
demo: true
|
||||
type: line
|
||||
show-labels: true
|
||||
show-data-labels: true
|
||||
show-markers: true
|
||||
hide-legend: true
|
||||
show-grid: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
series:
|
||||
@@ -138,10 +198,8 @@ temperature:
|
||||
|
||||
|
||||
area:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
demo: true
|
||||
type: area
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
@@ -153,11 +211,9 @@ area:
|
||||
|
||||
|
||||
area-spline:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
demo: true
|
||||
type: area
|
||||
spline: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
@@ -169,13 +225,10 @@ area-spline:
|
||||
|
||||
|
||||
area-spline-stacked:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
demo: true
|
||||
type: area
|
||||
spline: true
|
||||
hide-legend: true
|
||||
stacked: true
|
||||
# groups: [1, 2]
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
@@ -187,12 +240,10 @@ area-spline-stacked:
|
||||
|
||||
|
||||
spline:
|
||||
name: Wind speed during two days
|
||||
display: true
|
||||
demo: true
|
||||
type: line
|
||||
spline: true
|
||||
show-labels: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Hestavollane
|
||||
@@ -202,112 +253,39 @@ spline:
|
||||
color: green
|
||||
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
|
||||
|
||||
|
||||
spline-rotated:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: line
|
||||
spline: true
|
||||
rotated: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
bar:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: bar
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
bar-rotated:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: bar
|
||||
rotated: true
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
bar-stacked:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: bar
|
||||
stacked: true
|
||||
# groups: [1, 2]
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
color: blue
|
||||
data: [11, 8, 15, 18, 19, 17]
|
||||
- name: Minimum
|
||||
color: pink
|
||||
data: [7, 7, 5, 7, 9, 12]
|
||||
|
||||
|
||||
pie:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: pie
|
||||
hide-legend: true
|
||||
show-data-labels: true
|
||||
sparkline: true
|
||||
series:
|
||||
- name: A
|
||||
color: blue-darker
|
||||
color: blue-700
|
||||
data: 63
|
||||
- name: B
|
||||
color: blue
|
||||
data: 44
|
||||
- name: C
|
||||
color: blue-light
|
||||
color: blue-300
|
||||
data: 12
|
||||
- name: D
|
||||
color: blue-lighter
|
||||
color: blue-100
|
||||
data: 14
|
||||
|
||||
donut:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
type: donut
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: Maximum
|
||||
color: green
|
||||
data: 63
|
||||
- name: Minimum
|
||||
color: green-light
|
||||
color: green-300
|
||||
data: 37
|
||||
|
||||
|
||||
scatter:
|
||||
name: Lorem ipsum
|
||||
display: true
|
||||
demo: true
|
||||
type: scatter
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
@@ -319,14 +297,12 @@ scatter:
|
||||
|
||||
|
||||
combination:
|
||||
name: Combination chart
|
||||
display: true
|
||||
demo: true
|
||||
type: bar
|
||||
types:
|
||||
2: 'line'
|
||||
3: 'spline'
|
||||
groups: [1, 4]
|
||||
hide-legend: true
|
||||
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
series:
|
||||
- name: Development
|
||||
@@ -354,14 +330,14 @@ new-clients:
|
||||
type: line
|
||||
days-labels-count: 30
|
||||
sparkline: true
|
||||
dashed-history: true
|
||||
hide-legend: true
|
||||
stroke-width: [2, 1]
|
||||
stroke-dash: [0, 3]
|
||||
series:
|
||||
- name: May
|
||||
color: blue
|
||||
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
|
||||
- name: April
|
||||
color: gray
|
||||
color: gray-600
|
||||
data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
|
||||
|
||||
active-users:
|
||||
@@ -372,53 +348,20 @@ active-users:
|
||||
- name: Profits
|
||||
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
|
||||
|
||||
goals:
|
||||
type: area
|
||||
days-labels-count: 30
|
||||
sparkline: true
|
||||
series:
|
||||
- name: Profits
|
||||
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
|
||||
|
||||
traffic-in:
|
||||
type: bar
|
||||
days-labels-count: 10
|
||||
sparkline: true
|
||||
color: green
|
||||
series:
|
||||
- name: Inbound
|
||||
color: azure
|
||||
data: [14, 3, 14, 9, 4, 6, 2, 7, 7, 14, 10, 9, 5, 1]
|
||||
data: [14, -3, 14, 9, 4, 6, -2, 7, 7, 14, 10, 9, 5, -1]
|
||||
|
||||
traffic-out:
|
||||
type: bar
|
||||
days-labels-count: 10
|
||||
sparkline: true
|
||||
color: red
|
||||
series:
|
||||
- name: Outbound
|
||||
color: red
|
||||
data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
|
||||
data: [-3, 7, 9, 14, 4, 5, 3, -1, 7, 10, 14, 14, -2, 6]
|
||||
|
||||
usd-eur:
|
||||
type: line
|
||||
days-labels-count: 30
|
||||
auto-min: true
|
||||
stroke-curve: straight
|
||||
series:
|
||||
- name: USD/EUR
|
||||
color: black
|
||||
data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444]
|
||||
|
||||
devices:
|
||||
type: donut
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: a
|
||||
color: blue-dark
|
||||
data: 23
|
||||
- name: b
|
||||
color: blue
|
||||
data: 54
|
||||
- name: c
|
||||
color: blue-light
|
||||
data: 34
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
blue: '#206bc4'
|
||||
blue-100: '#d2e1f3'
|
||||
blue-200: '#a6c4e7'
|
||||
blue-300: '#79a6dc'
|
||||
blue-400: '#4d89d0'
|
||||
blue-500: '#206bc4'
|
||||
blue-600: '#1a569d'
|
||||
blue-700: '#134076'
|
||||
blue-800: '#0d2b4e'
|
||||
blue-900: '#061527'
|
||||
|
||||
azure: '#45aaf2'
|
||||
azure-100: '#daeefc'
|
||||
azure-200: '#b5ddfa'
|
||||
azure-300: '#8fccf7'
|
||||
azure-400: '#6abbf5'
|
||||
azure-500: '#45aaf2'
|
||||
azure-600: '#3788c2'
|
||||
azure-700: '#296691'
|
||||
azure-800: '#1c4461'
|
||||
azure-900: '#0e2230'
|
||||
|
||||
indigo: '#6574cd'
|
||||
indigo-100: '#e0e3f5'
|
||||
indigo-200: '#c1c7eb'
|
||||
indigo-300: '#a3ace1'
|
||||
indigo-400: '#8490d7'
|
||||
indigo-500: '#6574cd'
|
||||
indigo-600: '#515da4'
|
||||
indigo-700: '#3d467b'
|
||||
indigo-800: '#282e52'
|
||||
indigo-900: '#141729'
|
||||
|
||||
purple: '#a55eea'
|
||||
purple-100: '#eddffb'
|
||||
purple-200: '#dbbff7'
|
||||
purple-300: '#c99ef2'
|
||||
purple-400: '#b77eee'
|
||||
purple-500: '#a55eea'
|
||||
purple-600: '#844bbb'
|
||||
purple-700: '#63388c'
|
||||
purple-800: '#42265e'
|
||||
purple-900: '#21132f'
|
||||
|
||||
pink: '#f66d9b'
|
||||
pink-100: '#fde2eb'
|
||||
pink-200: '#fbc5d7'
|
||||
pink-300: '#faa7c3'
|
||||
pink-400: '#f88aaf'
|
||||
pink-500: '#f66d9b'
|
||||
pink-600: '#c5577c'
|
||||
pink-700: '#94415d'
|
||||
pink-800: '#622c3e'
|
||||
pink-900: '#31161f'
|
||||
|
||||
red: '#fa4654'
|
||||
red-100: '#fedadd'
|
||||
red-200: '#fdb5bb'
|
||||
red-300: '#fc9098'
|
||||
red-400: '#fb6b76'
|
||||
red-500: '#fa4654'
|
||||
red-600: '#c83843'
|
||||
red-700: '#962a32'
|
||||
red-800: '#641c22'
|
||||
red-900: '#320e11'
|
||||
|
||||
orange: '#ff922b'
|
||||
orange-100: '#ffe9d5'
|
||||
orange-200: '#ffd3aa'
|
||||
orange-300: '#ffbe80'
|
||||
orange-400: '#ffa855'
|
||||
orange-500: '#ff922b'
|
||||
orange-600: '#cc7522'
|
||||
orange-700: '#99581a'
|
||||
orange-800: '#663a11'
|
||||
orange-900: '#331d09'
|
||||
|
||||
yellow: '#fab005'
|
||||
yellow-100: '#feefcd'
|
||||
yellow-200: '#fddf9b'
|
||||
yellow-300: '#fcd069'
|
||||
yellow-400: '#fbc037'
|
||||
yellow-500: '#fab005'
|
||||
yellow-600: '#c88d04'
|
||||
yellow-700: '#966a03'
|
||||
yellow-800: '#644602'
|
||||
yellow-900: '#322301'
|
||||
|
||||
green: '#5eba00'
|
||||
green-100: '#dff1cc'
|
||||
green-200: '#bfe399'
|
||||
green-300: '#9ed666'
|
||||
green-400: '#7ec833'
|
||||
green-500: '#5eba00'
|
||||
green-600: '#4b9500'
|
||||
green-700: '#387000'
|
||||
green-800: '#264a00'
|
||||
green-900: '#132500'
|
||||
|
||||
lime: '#7bd235'
|
||||
lime-100: '#e5f6d7'
|
||||
lime-200: '#caedae'
|
||||
lime-300: '#b0e486'
|
||||
lime-400: '#95db5d'
|
||||
lime-500: '#7bd235'
|
||||
lime-600: '#62a82a'
|
||||
lime-700: '#4a7e20'
|
||||
lime-800: '#315415'
|
||||
lime-900: '#192a0b'
|
||||
|
||||
teal: '#2bcbba'
|
||||
teal-100: '#d5f5f1'
|
||||
teal-200: '#aaeae3'
|
||||
teal-300: '#80e0d6'
|
||||
teal-400: '#55d5c8'
|
||||
teal-500: '#2bcbba'
|
||||
teal-600: '#22a295'
|
||||
teal-700: '#1a7a70'
|
||||
teal-800: '#11514a'
|
||||
teal-900: '#092925'
|
||||
|
||||
cyan: '#17a2b8'
|
||||
cyan-100: '#d1ecf1'
|
||||
cyan-200: '#a2dae3'
|
||||
cyan-300: '#74c7d4'
|
||||
cyan-400: '#45b5c6'
|
||||
cyan-500: '#17a2b8'
|
||||
cyan-600: '#128293'
|
||||
cyan-700: '#0e616e'
|
||||
cyan-800: '#09414a'
|
||||
cyan-900: '#052025'
|
||||
|
||||
gray: '#adb5bd'
|
||||
gray-100: '#f8f9fa'
|
||||
gray-200: '#e9ecef'
|
||||
gray-300: '#dee2e6'
|
||||
gray-400: '#ced4da'
|
||||
gray-500: '#adb5bd'
|
||||
gray-600: '#868e96'
|
||||
gray-700: '#495057'
|
||||
gray-800: '#343a40'
|
||||
gray-900: '#212529'
|
||||
|
||||
border-color: '#dce3e9'
|
||||
text-muted: '#8a91a5'
|
||||
@@ -1,28 +0,0 @@
|
||||
- page: index
|
||||
- page: alerts
|
||||
- page: autosize
|
||||
- page: avatars
|
||||
- page: badges
|
||||
- page: breadcrumb
|
||||
- page: buttons
|
||||
- page: cards
|
||||
- page: carousel
|
||||
- page: cursors
|
||||
- page: charts
|
||||
- page: divider
|
||||
- page: empty
|
||||
- page: flags
|
||||
- page: form-elements
|
||||
- page: form-helpers
|
||||
- page: input-mask
|
||||
- page: progress
|
||||
- page: payments
|
||||
- page: ribbons
|
||||
- page: spinners
|
||||
- page: steps
|
||||
- page: tables
|
||||
- page: tabs
|
||||
- page: timelines
|
||||
- page: toasts
|
||||
- page: tooltips
|
||||
- page: typography
|
||||
|
||||
+22
-7
@@ -1,8 +1,23 @@
|
||||
400: We are sorry but your request contains bad syntax and cannot be fulfilled
|
||||
401: We are sorry but you are not authorized to access this page
|
||||
403: We are sorry but you do not have permission to access this page
|
||||
404: We are sorry but the page you are looking for was not found
|
||||
500: We are sorry but our server encountered an internal error
|
||||
503: We are sorry but our service is currently not available
|
||||
maintenance: Sorry, we’re down for maintenance.
|
||||
400:
|
||||
title: 400
|
||||
description: We are sorry but your request contains bad syntax and cannot be fulfilled
|
||||
401:
|
||||
title: 401
|
||||
description: We are sorry but you are not authorized to access this page
|
||||
403:
|
||||
title: 403
|
||||
description: We are sorry but you do not have permission to access this page
|
||||
404:
|
||||
title: 404
|
||||
description: We are sorry but the page you are looking for was not found
|
||||
500:
|
||||
title: 500
|
||||
description: We are sorry but our server encountered an internal error
|
||||
503:
|
||||
title: 503
|
||||
description: We are sorry but our service is currently not available
|
||||
maintenance:
|
||||
illustration: undraw_bug_fixing_oc7a.svg
|
||||
header: Temporarily down for maintenance
|
||||
description: Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!
|
||||
|
||||
|
||||
@@ -68,6 +68,322 @@ brand:
|
||||
- brand/wordpress
|
||||
- brand/ycombinator
|
||||
- brand/youtube
|
||||
bootstrap:
|
||||
- bootstrap/alarm
|
||||
- bootstrap/alarm-fill
|
||||
- bootstrap/alert-circle
|
||||
- bootstrap/alert-circle-fill
|
||||
- bootstrap/alert-octagon
|
||||
- bootstrap/alert-octagon-fill
|
||||
- bootstrap/alert-square
|
||||
- bootstrap/alert-square-fill
|
||||
- bootstrap/alert-triangle
|
||||
- bootstrap/alert-triangle-fill
|
||||
- bootstrap/archive
|
||||
- bootstrap/archive-fill
|
||||
- bootstrap/arrow-bar-bottom
|
||||
- bootstrap/arrow-bar-left
|
||||
- bootstrap/arrow-bar-right
|
||||
- bootstrap/arrow-bar-up
|
||||
- bootstrap/arrow-clockwise
|
||||
- bootstrap/arrow-counterclockwise
|
||||
- bootstrap/arrow-down
|
||||
- bootstrap/arrow-down-left
|
||||
- bootstrap/arrow-down-right
|
||||
- bootstrap/arrow-down-short
|
||||
- bootstrap/arrow-left
|
||||
- bootstrap/arrow-left-right
|
||||
- bootstrap/arrow-left-short
|
||||
- bootstrap/arrow-repeat
|
||||
- bootstrap/arrow-right
|
||||
- bootstrap/arrow-right-short
|
||||
- bootstrap/arrow-up
|
||||
- bootstrap/arrow-up-down
|
||||
- bootstrap/arrow-up-left
|
||||
- bootstrap/arrow-up-right
|
||||
- bootstrap/arrow-up-short
|
||||
- bootstrap/arrows-angle-contract
|
||||
- bootstrap/arrows-angle-expand
|
||||
- bootstrap/arrows-collapse
|
||||
- bootstrap/arrows-expand
|
||||
- bootstrap/arrows-fullscreen
|
||||
- bootstrap/at
|
||||
- bootstrap/award
|
||||
- bootstrap/backspace
|
||||
- bootstrap/backspace-fill
|
||||
- bootstrap/backspace-reverse
|
||||
- bootstrap/backspace-reverse-fill
|
||||
- bootstrap/bar-chart
|
||||
- bootstrap/bar-chart-fill
|
||||
- bootstrap/battery
|
||||
- bootstrap/battery-charging
|
||||
- bootstrap/battery-full
|
||||
- bootstrap/bell
|
||||
- bootstrap/bell-fill
|
||||
- bootstrap/blockquote-left
|
||||
- bootstrap/blockquote-right
|
||||
- bootstrap/book
|
||||
- bootstrap/book-half-fill
|
||||
- bootstrap/bookmark
|
||||
- bootstrap/bookmark-fill
|
||||
- bootstrap/bootstrap
|
||||
- bootstrap/bootstrap-fill
|
||||
- bootstrap/bootstrap-reboot
|
||||
- bootstrap/box-arrow-bottom-left
|
||||
- bootstrap/box-arrow-bottom-right
|
||||
- bootstrap/box-arrow-down
|
||||
- bootstrap/box-arrow-left
|
||||
- bootstrap/box-arrow-right
|
||||
- bootstrap/box-arrow-up
|
||||
- bootstrap/box-arrow-up-left
|
||||
- bootstrap/box-arrow-up-right
|
||||
- bootstrap/braces
|
||||
- bootstrap/brightness-fill-high
|
||||
- bootstrap/brightness-fill-low
|
||||
- bootstrap/brightness-high
|
||||
- bootstrap/brightness-low
|
||||
- bootstrap/brush
|
||||
- bootstrap/bucket
|
||||
- bootstrap/bucket-fill
|
||||
- bootstrap/building
|
||||
- bootstrap/bullseye
|
||||
- bootstrap/calendar
|
||||
- bootstrap/calendar-fill
|
||||
- bootstrap/camera
|
||||
- bootstrap/camera-video
|
||||
- bootstrap/camera-video-fill
|
||||
- bootstrap/capslock
|
||||
- bootstrap/capslock-fill
|
||||
- bootstrap/chat
|
||||
- bootstrap/chat-fill
|
||||
- bootstrap/check
|
||||
- bootstrap/check-box
|
||||
- bootstrap/check-circle
|
||||
- bootstrap/chevron-compact-down
|
||||
- bootstrap/chevron-compact-left
|
||||
- bootstrap/chevron-compact-right
|
||||
- bootstrap/chevron-compact-up
|
||||
- bootstrap/chevron-down
|
||||
- bootstrap/chevron-left
|
||||
- bootstrap/chevron-right
|
||||
- bootstrap/chevron-up
|
||||
- bootstrap/circle
|
||||
- bootstrap/circle-fill
|
||||
- bootstrap/circle-half
|
||||
- bootstrap/circle-slash
|
||||
- bootstrap/clock
|
||||
- bootstrap/clock-fill
|
||||
- bootstrap/cloud
|
||||
- bootstrap/cloud-download
|
||||
- bootstrap/cloud-fill
|
||||
- bootstrap/cloud-upload
|
||||
- bootstrap/code
|
||||
- bootstrap/code-slash
|
||||
- bootstrap/columns
|
||||
- bootstrap/columns-gutters
|
||||
- bootstrap/command
|
||||
- bootstrap/compass
|
||||
- bootstrap/cone
|
||||
- bootstrap/cone-striped
|
||||
- bootstrap/controller
|
||||
- bootstrap/credit-card
|
||||
- bootstrap/cursor
|
||||
- bootstrap/cursor-fill
|
||||
- bootstrap/dash
|
||||
- bootstrap/diamond
|
||||
- bootstrap/diamond-half
|
||||
- bootstrap/display
|
||||
- bootstrap/display-fill
|
||||
- bootstrap/document
|
||||
- bootstrap/document-code
|
||||
- bootstrap/document-diff
|
||||
- bootstrap/document-richtext
|
||||
- bootstrap/document-spreadsheet
|
||||
- bootstrap/document-text
|
||||
- bootstrap/documents
|
||||
- bootstrap/documents-alt
|
||||
- bootstrap/dot
|
||||
- bootstrap/download
|
||||
- bootstrap/egg-fried
|
||||
- bootstrap/eject
|
||||
- bootstrap/eject-fill
|
||||
- bootstrap/envelope
|
||||
- bootstrap/envelope-fill
|
||||
- bootstrap/envelope-open
|
||||
- bootstrap/envelope-open-fill
|
||||
- bootstrap/eye
|
||||
- bootstrap/eye-fill
|
||||
- bootstrap/eye-slash
|
||||
- bootstrap/eye-slash-fill
|
||||
- bootstrap/filter
|
||||
- bootstrap/flag
|
||||
- bootstrap/flag-fill
|
||||
- bootstrap/folder
|
||||
- bootstrap/folder-fill
|
||||
- bootstrap/folder-symlink
|
||||
- bootstrap/folder-symlink-fill
|
||||
- bootstrap/fonts
|
||||
- bootstrap/forward
|
||||
- bootstrap/forward-fill
|
||||
- bootstrap/gear
|
||||
- bootstrap/gear-fill
|
||||
- bootstrap/gear-wide
|
||||
- bootstrap/gear-wide-connected
|
||||
- bootstrap/geo
|
||||
- bootstrap/graph-down
|
||||
- bootstrap/graph-up
|
||||
- bootstrap/grid
|
||||
- bootstrap/grid-fill
|
||||
- bootstrap/hammer
|
||||
- bootstrap/hash
|
||||
- bootstrap/heart
|
||||
- bootstrap/heart-fill
|
||||
- bootstrap/house
|
||||
- bootstrap/house-fill
|
||||
- bootstrap/image
|
||||
- bootstrap/image-alt
|
||||
- bootstrap/image-fill
|
||||
- bootstrap/images
|
||||
- bootstrap/inbox
|
||||
- bootstrap/inbox-fill
|
||||
- bootstrap/inboxes
|
||||
- bootstrap/inboxes-fill
|
||||
- bootstrap/info
|
||||
- bootstrap/info-fill
|
||||
- bootstrap/info-square
|
||||
- bootstrap/info-square-fill
|
||||
- bootstrap/justify
|
||||
- bootstrap/justify-left
|
||||
- bootstrap/justify-right
|
||||
- bootstrap/kanban
|
||||
- bootstrap/kanban-fill
|
||||
- bootstrap/laptop
|
||||
- bootstrap/layout-sidebar
|
||||
- bootstrap/layout-sidebar-reverse
|
||||
- bootstrap/layout-split
|
||||
- bootstrap/list
|
||||
- bootstrap/list-check
|
||||
- bootstrap/list-ol
|
||||
- bootstrap/list-task
|
||||
- bootstrap/list-ul
|
||||
- bootstrap/lock
|
||||
- bootstrap/lock-fill
|
||||
- bootstrap/map
|
||||
- bootstrap/mic
|
||||
- bootstrap/moon
|
||||
- bootstrap/music-player
|
||||
- bootstrap/music-player-fill
|
||||
- bootstrap/option
|
||||
- bootstrap/outlet
|
||||
- bootstrap/pause
|
||||
- bootstrap/pause-fill
|
||||
- bootstrap/pen
|
||||
- bootstrap/pencil
|
||||
- bootstrap/people
|
||||
- bootstrap/people-fill
|
||||
- bootstrap/person
|
||||
- bootstrap/person-fill
|
||||
- bootstrap/phone
|
||||
- bootstrap/phone-landscape
|
||||
- bootstrap/pie-chart
|
||||
- bootstrap/pie-chart-fill
|
||||
- bootstrap/play
|
||||
- bootstrap/play-fill
|
||||
- bootstrap/plug
|
||||
- bootstrap/plus
|
||||
- bootstrap/power
|
||||
- bootstrap/question
|
||||
- bootstrap/question-fill
|
||||
- bootstrap/question-square
|
||||
- bootstrap/question-square-fill
|
||||
- bootstrap/reply
|
||||
- bootstrap/reply-all
|
||||
- bootstrap/reply-all-fill
|
||||
- bootstrap/reply-fill
|
||||
- bootstrap/screwdriver
|
||||
- bootstrap/search
|
||||
- bootstrap/shield
|
||||
- bootstrap/shield-fill
|
||||
- bootstrap/shield-lock
|
||||
- bootstrap/shield-lock-fill
|
||||
- bootstrap/shield-shaded
|
||||
- bootstrap/shift
|
||||
- bootstrap/shift-fill
|
||||
- bootstrap/skip-backward
|
||||
- bootstrap/skip-backward-fill
|
||||
- bootstrap/skip-end
|
||||
- bootstrap/skip-end-fill
|
||||
- bootstrap/skip-forward
|
||||
- bootstrap/skip-forward-fill
|
||||
- bootstrap/skip-start
|
||||
- bootstrap/skip-start-fill
|
||||
- bootstrap/speaker
|
||||
- bootstrap/square
|
||||
- bootstrap/square-fill
|
||||
- bootstrap/square-half
|
||||
- bootstrap/star
|
||||
- bootstrap/star-fill
|
||||
- bootstrap/star-half
|
||||
- bootstrap/stop
|
||||
- bootstrap/stop-fill
|
||||
- bootstrap/stopwatch
|
||||
- bootstrap/stopwatch-fill
|
||||
- bootstrap/sun
|
||||
- bootstrap/table
|
||||
- bootstrap/tablet
|
||||
- bootstrap/tablet-landscape
|
||||
- bootstrap/tag
|
||||
- bootstrap/tag-fill
|
||||
- bootstrap/terminal
|
||||
- bootstrap/terminal-fill
|
||||
- bootstrap/text-center
|
||||
- bootstrap/text-indent-left
|
||||
- bootstrap/text-indent-right
|
||||
- bootstrap/text-left
|
||||
- bootstrap/text-right
|
||||
- bootstrap/three-dots
|
||||
- bootstrap/three-dots-vertical
|
||||
- bootstrap/toggle-off
|
||||
- bootstrap/toggle-on
|
||||
- bootstrap/toggles
|
||||
- bootstrap/tools
|
||||
- bootstrap/trash
|
||||
- bootstrap/trash-fill
|
||||
- bootstrap/triangle
|
||||
- bootstrap/triangle-fill
|
||||
- bootstrap/triangle-half
|
||||
- bootstrap/trophy
|
||||
- bootstrap/tv
|
||||
- bootstrap/tv-fill
|
||||
- bootstrap/type
|
||||
- bootstrap/type-bold
|
||||
- bootstrap/type-h1
|
||||
- bootstrap/type-h2
|
||||
- bootstrap/type-h3
|
||||
- bootstrap/type-italic
|
||||
- bootstrap/type-strikethrough
|
||||
- bootstrap/type-underline
|
||||
- bootstrap/unlock
|
||||
- bootstrap/unlock-fill
|
||||
- bootstrap/upload
|
||||
- bootstrap/volume-down
|
||||
- bootstrap/volume-down-fill
|
||||
- bootstrap/volume-mute
|
||||
- bootstrap/volume-mute-fill
|
||||
- bootstrap/volume-up
|
||||
- bootstrap/volume-up-fill
|
||||
- bootstrap/wallet
|
||||
- bootstrap/watch
|
||||
- bootstrap/wifi
|
||||
- bootstrap/window
|
||||
- bootstrap/wrench
|
||||
- bootstrap/x
|
||||
- bootstrap/x-circle
|
||||
- bootstrap/x-circle-fill
|
||||
- bootstrap/x-octagon
|
||||
- bootstrap/x-octagon-fill
|
||||
- bootstrap/x-square
|
||||
- bootstrap/x-square-fill
|
||||
fe:
|
||||
- activity
|
||||
- airplay
|
||||
|
||||
+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
|
||||
|
||||
+34
-29
@@ -1,32 +1,37 @@
|
||||
{
|
||||
"js": [
|
||||
"jquery/dist/jquery.min.js",
|
||||
"bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"autosize/dist/autosize.min.js",
|
||||
"imask/dist/imask.min.js",
|
||||
|
||||
"selectize/dist/js/standalone/selectize.min.js",
|
||||
"apexcharts/dist/apexcharts.min.js",
|
||||
"jqvmap/dist/jquery.vmap.min.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.world.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.usa.js",
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js",
|
||||
"peity/jquery.peity.min.js",
|
||||
"selectize/dist/js/selectize.min.js",
|
||||
|
||||
"@fullcalendar/core/main.min.js",
|
||||
"@fullcalendar/daygrid/main.min.js",
|
||||
"@fullcalendar/interaction/main.min.js",
|
||||
"@fullcalendar/timegrid/main.min.js",
|
||||
"@fullcalendar/list/main.min.js"
|
||||
"global-libs": [
|
||||
"jquery", "bootstrap"
|
||||
],
|
||||
"css": [
|
||||
"jqvmap/dist/jqvmap.min.css",
|
||||
"selectize/dist/css/selectize.css",
|
||||
|
||||
"@fullcalendar/core/main.min.css",
|
||||
"@fullcalendar/daygrid/main.min.css",
|
||||
"@fullcalendar/timegrid/main.min.css",
|
||||
"@fullcalendar/list/main.min.css"
|
||||
]
|
||||
"js": {
|
||||
"jquery": "jquery/dist/jquery.slim.min.js",
|
||||
"bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"autosize": "autosize/dist/autosize.min.js",
|
||||
"imask": "imask/dist/imask.min.js",
|
||||
"selectize": "selectize/dist/js/standalone/selectize.min.js",
|
||||
"apexcharts": "apexcharts/dist/apexcharts.min.js",
|
||||
"jqvmap": [
|
||||
"jqvmap/dist/jquery.vmap.min.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.world.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.usa.js",
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js"
|
||||
],
|
||||
"peity": "peity/jquery.peity.min.js",
|
||||
"fullcalendar": [
|
||||
"@fullcalendar/core/main.min.js",
|
||||
"@fullcalendar/daygrid/main.min.js",
|
||||
"@fullcalendar/interaction/main.min.js",
|
||||
"@fullcalendar/timegrid/main.min.js",
|
||||
"@fullcalendar/list/main.min.js"
|
||||
]
|
||||
},
|
||||
"css": {
|
||||
"jqvmap": "jqvmap/dist/jqvmap.min.css",
|
||||
"selectize": "selectize/dist/css/selectize.css",
|
||||
"fullcalendar": [
|
||||
"@fullcalendar/core/main.min.css",
|
||||
"@fullcalendar/daygrid/main.min.css",
|
||||
"@fullcalendar/timegrid/main.min.css",
|
||||
"@fullcalendar/list/main.min.css"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
world:
|
||||
title: World map
|
||||
map: world_en
|
||||
values: '{"af":16,"al":11,"dz":158,"ao":85,"ag":1,"ar":351,"am":8,"au":1219,"at":366,"az":52,"bs":7,"bh":21,"bd":105,"bb":3,"by":52,"be":461,"bz":1,"bj":6,"bt":1,"bo":19,"ba":16,"bw":12,"br":2023,"bn":11,"bg":44,"bf":8,"bi":1,"kh":11,"cm":21,"ca":1563,"cv":1,"cf":2,"td":7,"cl":199,"cn":5745,"co":283,"km":0,"cd":12,"cg":11,"cr":35,"ci":22,"hr":59,"cy":22,"cz":195,"dk":304,"dj":1,"dm":0,"do":50,"ec":61,"eg":216,"sv":21,"gq":14,"er":2,"ee":19,"et":30,"fj":3,"fi":231,"fr":2555,"ga":12,"gm":1,"ge":11,"de":3305,"gh":18,"gr":305,"gd":0,"gt":40,"gn":4,"gw":0,"gy":2,"ht":6,"hn":15,"hk":226,"hu":132,"is":12,"in":1430,"id":695,"ir":337,"iq":84,"ie":204,"il":201,"it":2036,"jm":13,"jp":5390,"jo":27,"kz":129,"ke":32,"ki":0,"kr":986,"undefined":5,"kw":117,"kg":4,"la":6,"lv":23,"lb":39,"ls":1,"lr":0,"ly":77,"lt":35,"lu":52,"mk":9,"mg":8,"mw":5,"my":218,"mv":1,"ml":9,"mt":7,"mr":3,"mu":9,"mx":1004,"md":5,"mn":5,"me":3,"ma":91,"mz":10,"mm":35,"na":11,"np":15,"nl":770,"nz":138,"ni":6,"ne":5,"ng":206,"no":413,"om":53,"pk":174,"pa":27,"pg":8,"py":17,"pe":153,"ph":189,"pl":438,"pt":223,"qa":126,"ro":158,"ru":1476,"rw":5,"ws":0,"st":0,"sa":434,"sn":12,"rs":38,"sc":0,"sl":1,"sg":217,"sk":86,"si":46,"sb":0,"za":354,"es":1374,"lk":48,"kn":0,"lc":1,"vc":0,"sd":65,"sr":3,"sz":3,"se":444,"ch":522,"sy":59,"tw":426,"tj":5,"tz":22,"th":312,"tl":0,"tg":3,"to":0,"tt":21,"tn":43,"tr":729,"tm":0,"ug":17,"ua":136,"ae":239,"gb":2258,"us":4624,"uy":40,"uz":37,"vu":0,"ve":285,"vn":101,"ye":30,"zm":15,"zw":5}'
|
||||
values: '{"af":16, "al":11, "dz":158, "ao":85, "ag":1, "ar":351, "am":8, "au":1219, "at":366, "az":52, "bs":7, "bh":21, "bd":105, "bb":3, "by":52, "be":461, "bz":1, "bj":6, "bt":1, "bo":19, "ba":16, "bw":12, "br":2023, "bn":11, "bg":44, "bf":8, "bi":1, "kh":11, "cm":21, "ca":1563, "cv":1, "cf":2, "td":7, "cl":199, "cn":5745, "co":283, "km":0, "cd":12, "cg":11, "cr":35, "ci":22, "hr":59, "cy":22, "cz":195, "dk":304, "dj":1, "dm":0, "do":50, "ec":61, "eg":216, "sv":21, "gq":14, "er":2, "ee":19, "et":30, "fj":3, "fi":231, "fr":2555, "ga":12, "gm":1, "ge":11, "de":3305, "gh":18, "gr":305, "gd":0, "gt":40, "gn":4, "gw":0, "gy":2, "ht":6, "hn":15, "hk":226, "hu":132, "is":12, "in":1430, "id":695, "ir":337, "iq":84, "ie":204, "il":201, "it":2036, "jm":13, "jp":5390, "jo":27, "kz":129, "ke":32, "ki":0, "kr":986, "undefined":5, "kw":117, "kg":4, "la":6, "lv":23, "lb":39, "ls":1, "lr":0, "ly":77, "lt":35, "lu":52, "mk":9, "mg":8, "mw":5, "my":218, "mv":1, "ml":9, "mt":7, "mr":3, "mu":9, "mx":1004, "md":5, "mn":5, "me":3, "ma":91, "mz":10, "mm":35, "na":11, "np":15, "nl":770, "nz":138, "ni":6, "ne":5, "ng":206, "no":413, "om":53, "pk":174, "pa":27, "pg":8, "py":17, "pe":153, "ph":189, "pl":438, "pt":223, "qa":126, "ro":158, "ru":1476, "rw":5, "ws":0, "st":0, "sa":434, "sn":12, "rs":38, "sc":0, "sl":1, "sg":217, "sk":86, "si":46, "sb":0, "za":354, "es":1374, "lk":48, "kn":0, "lc":1, "vc":0, "sd":65, "sr":3, "sz":3, "se":444, "ch":522, "sy":59, "tw":426, "tj":5, "tz":22, "th":312, "tl":0, "tg":3, "to":0, "tt":21, "tn":43, "tr":729, "tm":0, "ug":17, "ua":136, "ae":239, "gb":2258, "us":4624, "uy":40, "uz":37, "vu":0, "ve":285, "vn":101, "ye":30, "zm":15, "zw":5}'
|
||||
|
||||
europe:
|
||||
title: Map of Europe
|
||||
|
||||
+145
-17
@@ -2,55 +2,183 @@ 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
|
||||
|
||||
error:
|
||||
title: Error pages
|
||||
icon: file-minus
|
||||
children:
|
||||
400:
|
||||
url: 400.html
|
||||
title: 400 page
|
||||
401:
|
||||
url: 401.html
|
||||
title: 401 page
|
||||
403:
|
||||
url: 403.html
|
||||
title: 403 page
|
||||
404:
|
||||
url: 404.html
|
||||
title: 404 page
|
||||
500:
|
||||
url: 500.html
|
||||
title: 500 page
|
||||
503:
|
||||
url: 503.html
|
||||
title: 503 page
|
||||
maintenance:
|
||||
url: maintenance.html
|
||||
title: Maintenance page
|
||||
|
||||
base:
|
||||
title: Base
|
||||
icon: package
|
||||
children:
|
||||
blank:
|
||||
title: Starter page
|
||||
url: blank.html
|
||||
buttons:
|
||||
url: buttons.html
|
||||
title: Buttons
|
||||
badge: New
|
||||
cards:
|
||||
url: cards.html
|
||||
title: Cards
|
||||
c:
|
||||
url: c.html
|
||||
title: C
|
||||
calendar:
|
||||
title: Calendar
|
||||
url: calendar.html
|
||||
carousel:
|
||||
title: Carousel
|
||||
url: carousel.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:
|
||||
title: Invoice
|
||||
url: invoice.html
|
||||
blog:
|
||||
title: Blog cards
|
||||
url: blog.html
|
||||
docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
url: docs/index.html
|
||||
children:
|
||||
index:
|
||||
title: Introduction
|
||||
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
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Alerts
|
||||
menu: docs.alerts
|
||||
description: Bootstrap provides an easy way to create predefined alert messages.
|
||||
bootstrap-link: components/alerts/
|
||||
done: true
|
||||
---
|
||||
|
||||
Bootstrap provides an easy way to create predefined alert messages.
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example %}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
title: Autosize
|
||||
menu: docs.autosize
|
||||
description: A small, stand-alone script to automatically adjust textarea height.
|
||||
done: true
|
||||
---
|
||||
|
||||
A small, stand-alone script to automatically adjust textarea height.
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example html %}
|
||||
<label class="form-label">Autosize example</label>
|
||||
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
|
||||
{% include ui/form/textarea-autosize.html %}
|
||||
{% endexample %}
|
||||
|
||||
+52
-34
@@ -1,11 +1,10 @@
|
||||
---
|
||||
title: Avatars
|
||||
menu: docs.avatars
|
||||
description: Create and group avatars of various shapes and sizes with one component.
|
||||
done: true
|
||||
---
|
||||
|
||||
Create and group avatars of various shapes and sizes with one component.
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
@@ -14,6 +13,50 @@ Create and group avatars of various shapes and sizes with one component.
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar image
|
||||
|
||||
Set an image as the background.
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html person-id=1 %}
|
||||
{% include ui/avatar.html person-id=3 %}
|
||||
{% include ui/avatar.html person-id=4 %}
|
||||
{% endexample %}
|
||||
|
||||
### Initials
|
||||
|
||||
You can easily use initials instead of images.
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" %}
|
||||
{% include ui/avatar.html placeholder="CD" %}
|
||||
{% include ui/avatar.html placeholder="EF" %}
|
||||
{% include ui/avatar.html placeholder="GH" %}
|
||||
{% include ui/avatar.html placeholder="IJ" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar icons
|
||||
|
||||
You can also use icons in avatars.
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html icon="user" %}
|
||||
{% include ui/avatar.html icon="plus" %}
|
||||
{% include ui/avatar.html icon="user-plus" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar initials color
|
||||
|
||||
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" color="green" %}
|
||||
{% include ui/avatar.html placeholder="CD" color="red" %}
|
||||
{% include ui/avatar.html placeholder="EF" color="yellow" %}
|
||||
{% include ui/avatar.html placeholder="GH" color="blue" %}
|
||||
{% include ui/avatar.html placeholder="IJ" color="purple" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
|
||||
@@ -51,43 +94,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
|
||||
{% endexample %}
|
||||
|
||||
### Initials
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" size="xl" %}
|
||||
{% include ui/avatar.html placeholder="CD" size="lg" %}
|
||||
{% include ui/avatar.html placeholder="EF" size="md" %}
|
||||
{% include ui/avatar.html placeholder="GH" %}
|
||||
{% include ui/avatar.html placeholder="IJ" size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Avatar initials color
|
||||
|
||||
[See more]({% docs_url colors %})
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html placeholder="AB" color="green" %}
|
||||
{% include ui/avatar.html placeholder="CD" color="red" %}
|
||||
{% include ui/avatar.html placeholder="EF" color="yellow" %}
|
||||
{% include ui/avatar.html placeholder="GH" color="blue" %}
|
||||
{% include ui/avatar.html placeholder="IJ" color="purple" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatar initials icons
|
||||
|
||||
{% example html wrapper=avatar-list %}
|
||||
{% include ui/avatar.html icon="user" %}
|
||||
{% include ui/avatar.html icon="plus" %}
|
||||
{% include ui/avatar.html icon="user-plus" %}
|
||||
{% endexample %}
|
||||
|
||||
### Avatars list
|
||||
|
||||
You can easily create a list of avatars.
|
||||
|
||||
{% example %}
|
||||
{% include ui/avatar-list.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Stacked list
|
||||
|
||||
Make the list stack when it reaches a certain length.
|
||||
|
||||
{% example %}
|
||||
<div class="avatar-list avatar-list-stacked">
|
||||
{% for person in site.data.people limit: 5 offset: 30 %}
|
||||
@@ -95,4 +113,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
|
||||
{% endfor %}
|
||||
<span class="avatar" element="a">+8</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endexample %}
|
||||
+12
-4
@@ -1,30 +1,34 @@
|
||||
---
|
||||
title: Badges
|
||||
menu: docs.badges
|
||||
description: A small count and labeling component.
|
||||
bootstrap-link: components/badge/
|
||||
done: true
|
||||
---
|
||||
|
||||
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
|
||||
<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Pill badges
|
||||
|
||||
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
|
||||
<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Soft badges
|
||||
|
||||
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
|
||||
@@ -34,6 +38,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Links
|
||||
|
||||
Make a badge work as a link by putting it into an `<a>` element.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
|
||||
@@ -43,6 +49,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Empty badges
|
||||
|
||||
If you don't want your badge to contain any text you can do it by leaving the html element empty.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}"></a>
|
||||
|
||||
@@ -2,6 +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: components/breadcrumb/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+91
-47
@@ -2,6 +2,8 @@
|
||||
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: components/buttons/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -12,9 +14,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
|
||||
{% example html wrapper=btn-list %}
|
||||
<a href="#" class="btn btn-primary" role="button">Link</a>
|
||||
<button class="btn btn-primary">Button</button>
|
||||
<input type="button" class="btn btn-primary" value="Input" />
|
||||
<input type="submit" class="btn btn-primary" value="Submit" />
|
||||
<input type="reset" class="btn btn-primary" value="Reset" />
|
||||
<input type="button" class="btn btn-primary" value="Input"/>
|
||||
<input type="submit" class="btn btn-primary" value="Submit"/>
|
||||
<input type="reset" class="btn btn-primary" value="Reset"/>
|
||||
{% endexample %}
|
||||
|
||||
### Button variations
|
||||
@@ -23,18 +25,22 @@ Use any of the available button classes to quickly create a styled button . We p
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.button-variants %}
|
||||
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% include_cached ui/button.html color=btn-color text=btn-title %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Disabled buttons
|
||||
|
||||
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.button-variants %}
|
||||
{% include_cached ui/button.html color=button.1.class text=button.title disabled=true %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% include_cached ui/button.html color=btn-color text=btn-title disabled=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@@ -54,7 +60,9 @@ Add `.btn-square` to button to remove border-radius.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.button-variants %}
|
||||
{% include_cached ui/button.html text=button.title color=button.class square=true %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% include_cached ui/button.html color=btn-color text=btn-title square=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -64,7 +72,9 @@ Add `.btn-pill` class to any button to make them more rounded.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.button-variants %}
|
||||
{% include_cached ui/button.html text=button.title color=button.class pill=true %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% include_cached ui/button.html color=btn-color text=btn-title pill=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -74,7 +84,9 @@ In need of a button, but not the hefty background colors they bring? Replace the
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.button-variants %}
|
||||
{% include_cached ui/button.html text=button.title color=button.class outline=true %}
|
||||
{% assign btn-color = button[1].class %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% include_cached ui/button.html text=btn-title color=btn-color outline=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -103,13 +115,33 @@ Create block level buttons—those that span the full width of a parent—by add
|
||||
|
||||
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
|
||||
|
||||
Icons can be found [**here**](/docs/icons.html#icons)
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-dark"><i class="icon fe fe-upload mr-2"></i>Upload</button>
|
||||
<button type="button" class="btn btn-warning"><i class="icon fe fe-heart mr-2"></i>I like</button>
|
||||
<button type="button" class="btn btn-success"><i class="icon fe fe-check mr-2"></i>I agree</button>
|
||||
<button type="button" class="btn btn-outline-primary"><i class="icon fe fe-plus mr-2"></i>More</button>
|
||||
<button type="button" class="btn btn-danger"><i class="icon fe fe-link mr-2"></i>Link</button>
|
||||
<button type="button" class="btn btn-info"><i class="icon fe fe-message-circle mr-2"></i>Comment</button>
|
||||
<button type="button" class="btn btn-dark">
|
||||
{% include_cached ui/icon.html icon="upload" class="icon-sm" %}
|
||||
Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">
|
||||
{% include_cached ui/icon.html icon="heart" class="icon-sm" %}
|
||||
I like
|
||||
</button>
|
||||
<button type="button" class="btn btn-success">
|
||||
{% include_cached ui/icon.html icon="check" class="icon-sm" %}
|
||||
I agree
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
{% include_cached ui/icon.html icon="plus" class="icon-sm" %}
|
||||
More
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger">
|
||||
{% include_cached ui/icon.html icon="link" class="icon-sm" %}
|
||||
Link
|
||||
</button>
|
||||
<button type="button" class="btn btn-info">
|
||||
{% include_cached ui/icon.html icon="message-circle" class="icon-sm" %}
|
||||
Comment
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Social buttons
|
||||
@@ -118,7 +150,10 @@ A button can be formatted to link to a social website
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.socials %}
|
||||
{% include_cached ui/button.html color=button.name icon=button.icon text=button.title %}
|
||||
{% assign btn-icon = button[1].icon %}
|
||||
{% assign btn-title = button[1].title %}
|
||||
{% assign btn-color = button[0] %}
|
||||
{% include_cached ui/button.html color=btn-color icon=btn-icon text=btn-title %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -126,7 +161,9 @@ You can use only icons.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% for button in site.socials %}
|
||||
{% include_cached ui/button.html color=button.name icon=button.icon %}
|
||||
{% assign btn-icon = button[1].icon %}
|
||||
{% assign btn-color = button[0] %}
|
||||
{% include_cached ui/button.html color=btn-color icon=btn-icon icon-only=true %}
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -135,13 +172,27 @@ You can use only icons.
|
||||
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
<button type="button" class="btn btn-icon btn-primary"><i class="icon fe fe-activity"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="icon fe fe-github"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-success"><i class="icon fe fe-bell"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="icon fe fe-star"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="icon fe fe-trash"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="icon fe fe-bar-chart"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="icon fe fe-git-merge"></i></button>
|
||||
<button type="button" class="btn btn-icon btn-primary">
|
||||
{% include_cached ui/icon.html icon="activity" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-github">
|
||||
{% include_cached ui/icon.html icon="github" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-success">
|
||||
{% include_cached ui/icon.html icon="bell" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-warning">
|
||||
{% include_cached ui/icon.html icon="star" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-danger">
|
||||
{% include_cached ui/icon.html icon="trash-2" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-purple">
|
||||
{% include_cached ui/icon.html icon="bar-chart" class="icon-sm" %}
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-primary btn-secondary">
|
||||
{% include_cached ui/icon.html icon="git-merge" class="icon-sm" %}
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
### Button dropdown
|
||||
@@ -151,32 +202,23 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
|
||||
{% example html wrapper=btn-list %}
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon fe fe-calendar"></i>
|
||||
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon fe fe-calendar mr-2"></i>Show calendar
|
||||
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
Show calendar
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
@@ -187,11 +229,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
|
||||
Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
|
||||
|
||||
{% example html wrapper=btn-list %}
|
||||
{% include_cached ui/button.html spinner=true text="Button" color="primary" %}
|
||||
{% include_cached ui/button.html spinner=true text="Button" color="danger" %}
|
||||
{% include_cached ui/button.html spinner=true text="Button" color="warning" %}
|
||||
{% include_cached ui/button.html spinner=true color="success" %}
|
||||
{% include_cached ui/button.html spinner=true color="secondary" %}
|
||||
{% include_cached ui/button.html color="primary" text="Button" spinner=true %}
|
||||
{% endexample %}
|
||||
|
||||
### List of buttons
|
||||
@@ -250,9 +288,15 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
|
||||
|
||||
### Button with avatar
|
||||
|
||||
{% example html%}
|
||||
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
|
||||
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
|
||||
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
|
||||
{% example html wrapper=btn-list %}
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include_cached ui/avatar.html person-id="4" %} Avatar
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include_cached ui/avatar.html person-id="5" %} Avatar
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary">
|
||||
{% include_cached ui/avatar.html person-id="6" %} Avatar
|
||||
</a>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
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: components/card/
|
||||
done: true
|
||||
---
|
||||
|
||||
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Carousel
|
||||
menu: docs.carousel
|
||||
description: The Carousel is a slideshow for cycling through elements.
|
||||
bootstrap-link: components/carousel/
|
||||
---
|
||||
|
||||
The Carousel is a slideshow for cycling through elements.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
---
|
||||
title: Colors
|
||||
menu: docs.colors
|
||||
description:
|
||||
bootstrap-link: utilities/colors/
|
||||
done: true
|
||||
---
|
||||
|
||||
## Base colors
|
||||
|
||||
{% include example/colors-table.html %}
|
||||
|
||||
## Light colors
|
||||
|
||||
{% include example/colors-table.html light=true %}
|
||||
|
||||
@@ -5,6 +5,13 @@ menu: docs.cursors
|
||||
|
||||
### Cursor utilities
|
||||
|
||||
- `.cursor-auto`- cursor style depends on what's inside element
|
||||
- `.cursor-pointer` - pointing cursor
|
||||
- `.cursor-move` - cursor showing that user can move something
|
||||
- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
|
||||
- `.cursor-zoom-in` - cursor showing that user can zoom in
|
||||
- `.cursor-zoom-out` - cursor showing that user can zoom out
|
||||
|
||||
{% example html %}
|
||||
<div class="row text-center">
|
||||
<div class="col-4 mb-3">
|
||||
|
||||
+22
-8
@@ -1,25 +1,39 @@
|
||||
---
|
||||
title: Divider
|
||||
description: A divider visually segments content into groups
|
||||
bootstrap-link: components/dropdowns/#dividers
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example html max-width=300 %}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
|
||||
</p>
|
||||
<div class="hr-text">Left divider</div>
|
||||
{% example html columns=1 %}
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
<div class="hr-text hr-text-center">Centered divider</div>
|
||||
{% include ui/hr.html text="Left divider" %}
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
<div class="hr-text hr-text-right">Right divider</div>
|
||||
{% include ui/hr.html text="Centered divider" position="center" %}
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
{% include ui/hr.html text="Right divider" position="right" %}
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
### Divider color
|
||||
|
||||
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example html columns=1 %}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
||||
</p>
|
||||
{% include ui/hr.html text="Green divider" color="green" %}
|
||||
<p>
|
||||
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
@@ -15,6 +15,8 @@ done: true
|
||||
|
||||
### Flag sizes
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
|
||||
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
|
||||
@@ -24,6 +26,8 @@ done: true
|
||||
|
||||
### Types
|
||||
|
||||
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
|
||||
|
||||
<table>
|
||||
{% for flag in site.data.flags %}
|
||||
<tr>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Form Elements
|
||||
bootstrap-link: components/forms/
|
||||
---
|
||||
|
||||
### Classic Input
|
||||
@@ -59,14 +60,7 @@ title: Form Elements
|
||||
|
||||
### Select
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
<option value="">USA</option>
|
||||
<option value="">Poland</option>
|
||||
</select>
|
||||
</div>
|
||||
{% include parts/select.html options="Germany,USA,Poland" %}
|
||||
{% endexample %}
|
||||
|
||||
### Textarea
|
||||
@@ -127,24 +121,7 @@ title: Form Elements
|
||||
|
||||
### Sample form
|
||||
{% example %}
|
||||
<fieldset class="form-fieldset">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Full name<span class="form-required">*</span></label>
|
||||
<input type="text" class="form-control"/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Company<span class="form-required">*</span></label>
|
||||
<input type="text" class="form-control"/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Email<span class="form-required">*</span></label>
|
||||
<input type="email" class="form-control"/>
|
||||
</div>
|
||||
<div class="mb-2 mb-0">
|
||||
<label class="form-label">Phone number</label>
|
||||
<input type="tel" class="form-control"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% include parts/form-fieldset.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Input group
|
||||
@@ -190,39 +167,29 @@ title: Form Elements
|
||||
|
||||
### Separated inputs
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<span class="col-auto">
|
||||
<button class="btn btn-secondary btn-icon" type="button" style="height:100%">{% include_cached ui/icon.html icon="search" %}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% include parts/input-icon-separated.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Custom Input examples
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
{% include ui/form/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
{% include ui/form/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@@ -4,5 +4,5 @@ title: Input mask
|
||||
|
||||
{% example %}
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
{% endexample %}
|
||||
|
||||
+23
-4
@@ -1,6 +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: components/progress/
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
@@ -11,20 +13,26 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
|
||||
{% include ui/progress.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Small progress
|
||||
### Progress size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html value=57 size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
### Progress with value
|
||||
### Progress without value
|
||||
|
||||
Remove the showed value by adding a class called `.sr-only`.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html value=75 show-value=true %}
|
||||
{% include ui/progress.html value=75 show-value=false %}
|
||||
{% endexample %}
|
||||
|
||||
### Indeterminate progress
|
||||
|
||||
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html indeterminate=true size="sm" %}
|
||||
{% endexample %}
|
||||
@@ -34,5 +42,16 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
|
||||
You can also use native HTML5 `<progress>` element.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
<progress class="progress progress-sm" value="15" max="100"/>
|
||||
{% endexample %}
|
||||
|
||||
### Progress color
|
||||
|
||||
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="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 %}
|
||||
|
||||
+21
-6
@@ -1,35 +1,50 @@
|
||||
---
|
||||
title: Ribbons
|
||||
menu: docs.ribbons
|
||||
new: true
|
||||
done: true
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html %}
|
||||
{% include_cached cards/ribbon.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon position
|
||||
|
||||
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
|
||||
|
||||
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html top=true left=true %}
|
||||
{% include_cached cards/ribbon.html top=true left=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon color
|
||||
|
||||
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html color="red" %}
|
||||
{% include_cached cards/ribbon.html color="red" %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon text
|
||||
|
||||
Set your own text in a ribbon.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html color="green" text="-50%" %}
|
||||
{% include_cached cards/ribbon.html color="green" text="-50%" %}
|
||||
{% endexample %}
|
||||
|
||||
### Ribbon style
|
||||
|
||||
Change the style of a ribbon.
|
||||
|
||||
{% example html columns=1 %}
|
||||
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
|
||||
{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Spinners
|
||||
menu: docs.spinners
|
||||
bootstrap-link: components/spinners/
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Tables
|
||||
menu: docs.tables
|
||||
bootstrap-link: content/tables/
|
||||
---
|
||||
|
||||
### Basic Table
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Tabs
|
||||
menu: docs.tabs
|
||||
bootstrap-link: components/navs/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
@@ -2,6 +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: components/toasts/
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -2,6 +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: components/tooltips/
|
||||
---
|
||||
|
||||
### Default markup
|
||||
|
||||
+22
-21
@@ -2,6 +2,7 @@
|
||||
title: Typography
|
||||
menu: docs.typography
|
||||
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
|
||||
bootstrap-link: content/typography/
|
||||
---
|
||||
|
||||
### Headings
|
||||
@@ -21,23 +22,23 @@ description: Documentation and examples for common text utilities to control ali
|
||||
### Semantic text elements
|
||||
|
||||
{% example %}
|
||||
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
|
||||
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
|
||||
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
|
||||
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
|
||||
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
|
||||
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
|
||||
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
|
||||
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
|
||||
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
|
||||
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
|
||||
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
|
||||
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
|
||||
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
|
||||
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
|
||||
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
|
||||
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
|
||||
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
|
||||
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
|
||||
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
|
||||
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
|
||||
<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
|
||||
<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
|
||||
<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
|
||||
<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
|
||||
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
|
||||
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
|
||||
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
|
||||
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
|
||||
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
|
||||
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
|
||||
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
|
||||
<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
|
||||
<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
|
||||
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
|
||||
{% endexample %}
|
||||
|
||||
### Horizontal rules
|
||||
@@ -132,10 +133,10 @@ Utilities for controlling the tracking (letter spacing) of an element.
|
||||
Utilities for controlling the leading (line height) of an element.
|
||||
|
||||
{% example %}
|
||||
<p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="lh-sm">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="lh-base">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
<p class="lh-lg">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
|
||||
{% endexample %}
|
||||
|
||||
### Antialiasing
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{% assign data = site.data.charts[include.chart-id] %}
|
||||
{% assign height = include.height | default: 10 %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% if include.title %}
|
||||
<h3 class="card-title">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{% include ui/chart.html height=height chart-id=include.chart-id %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,6 +4,6 @@
|
||||
<h3 class="card-title">Total sales</h3>
|
||||
|
||||
{% include ui/chart.html chart-id="total-sales" height=15 %}
|
||||
{% include ui/chart.html chart-id="total-sales2" height=15 %}
|
||||
{% include ui/chart.html chart-id="campaigns" height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<a href="#" class="mb-3 d-block"><img src="{{ site.base }}/img/photos/{{ photo.file }}" class="rounded"></a>
|
||||
<div class="d-flex align-items-center">
|
||||
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
|
||||
<div class="lh-sm">
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="#" class="text-muted">
|
||||
{% include_cached ui/icon.html icon="eye" %}
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ml-3 text-muted">
|
||||
{% include_cached ui/icon.html icon="heart" %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,94 +1,103 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">#INV0015</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i class="si si-printer"></i> Print Invoice</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row my-5">
|
||||
<div class="col-6">
|
||||
<p class="h3">Company</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ltd@example.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-right" style="width: 1%">Unit</th>
|
||||
<th class="text-right" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Logo Creation</p>
|
||||
<div class="text-muted">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">Online Store Design & Development</p>
|
||||
<div class="text-muted">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="font-w600 mb-1">App Design</p>
|
||||
<div class="text-muted">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Subtotal</td>
|
||||
<td class="text-right">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Rate</td>
|
||||
<td class="text-right">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-w600 text-right">Vat Due</td>
|
||||
<td class="text-right">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
|
||||
<td class="font-weight-bold text-right">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with you again!</p>
|
||||
</div>
|
||||
<div class="card-header d-print-none">
|
||||
<h3 class="card-title">Invoice</h3>
|
||||
<div class="card-options">
|
||||
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i
|
||||
class="si si-printer"></i> Print Invoice
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="h3">Company</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ltd@example.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<p class="h3">Client</p>
|
||||
<address>
|
||||
Street Address<br>
|
||||
State, City<br>
|
||||
Region, Postal Code<br>
|
||||
ctr@example.com
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div class="col-12 my-5">
|
||||
<h1>Invoice INV/001/15</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-right" style="width: 1%">Unit</th>
|
||||
<th class="text-right" style="width: 1%">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Logo Creation</p>
|
||||
<div class="text-muted">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
<td class="text-right">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Online Store Design & Development</p>
|
||||
<div class="text-muted">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
<td class="text-right">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="strong mb-1">App Design</p>
|
||||
<div class="text-muted">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
1
|
||||
</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
<td class="text-right">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Subtotal</td>
|
||||
<td class="text-right">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Vat Rate</td>
|
||||
<td class="text-right">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-right">Vat Due</td>
|
||||
<td class="text-right">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
|
||||
<td class="font-weight-bold text-right">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with
|
||||
you again!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<h3 class="card-title">Invoices</h3>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable">
|
||||
<table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
|
||||
@@ -42,7 +42,7 @@
|
||||
<td class="text-right">
|
||||
<span class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||||
{% include ui/dropdown-menu.html %}
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<ul class="list-unstyled">
|
||||
{% for item in site.data.orders %}
|
||||
<li class="row row-sm leading-tight align-items-center mb-2">
|
||||
<li class="row row-sm lh-sm align-items-center mb-2">
|
||||
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
|
||||
<div class="col">
|
||||
{{ item.title }}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="text-uppercase text-muted">{{ include.category | default: 'Enterprise' }}</div>
|
||||
<div class="h1 my-4">${{ include.price | default: '79' }}</div>
|
||||
|
||||
<ul class="list-unstyled leading-loose">
|
||||
<ul class="list-unstyled lh-lg">
|
||||
<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
|
||||
{% for feature in features %}
|
||||
<li>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
<div class="card-title">
|
||||
<h6 class="h4 mb-3"><a href="#">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
|
||||
|
||||
@@ -1,39 +1,33 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
<div class="card">
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
<div class="card-body p-3 d-flex align-items-center">
|
||||
{% if include.icon %}
|
||||
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
|
||||
{% elsif include.person-id %}
|
||||
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.chart-data and chart-position == "left" %}
|
||||
<div class="mr-3">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mr-3">
|
||||
<div>
|
||||
<strong>{{ include.count | default: 1700 | format_number }}</strong> {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted text-h5">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
<div class="mr-3 lh-sm">
|
||||
<div class="strong">
|
||||
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
|
||||
{% if include.small-icon %}
|
||||
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-muted">{{ include.description | default: "Users" }}</div>
|
||||
</div>
|
||||
|
||||
{% if include.second-icon %}
|
||||
<div class="ml-auto">
|
||||
{% include_cached ui/icon.html icon=include.second-icon color=include.color class="icon-lg icon-thin" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="ml-auto">
|
||||
{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-sm align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/avatar.html person=person size="lg" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="card-title m-0">
|
||||
<a href="#">{{ person.full_name }}</a>
|
||||
</h4>
|
||||
<div class="text-muted">
|
||||
Working in {{ person.company }}
|
||||
</div>
|
||||
<div class="small mt-1">
|
||||
<span class="text-success">●</span> Online
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="dropdown">
|
||||
<button class="btn-options" type="button" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="more-vertical" %}
|
||||
</button>
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,13 +32,7 @@
|
||||
{% if include.dropdown %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if include.settings %}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
{% assign person-id = include.person-id | default: 0 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
<a class="card card-link" href="#">
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person %}
|
||||
</div>
|
||||
<div class="card-title mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
|
||||
{% include ui/avatar.html person=person class="rounded" %}
|
||||
</div>
|
||||
<div class="lh-sm">
|
||||
<div class="strong">{{ person.full_name }}</div>
|
||||
<div class="text-muted">{{ person.job_title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
{% assign colors = include.colors | default: site.colors %}
|
||||
{% assign light = include.light %}
|
||||
|
||||
<div class="example">
|
||||
<div class="mb-n3">
|
||||
{% for color in colors %}
|
||||
<div class="row row-sm mb-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
|
||||
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -42,37 +42,17 @@
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button data-toggle="dropdown" type="button"
|
||||
class="btn btn-primary dropdown-toggle"></button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">
|
||||
News
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
Messages
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">
|
||||
Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
|
||||
{% include_cached ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include parts/input-icon.html %}
|
||||
{% include parts/input-icon-separated.html %}
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-secondary" type="button">{% include_cached ui/icon.html icon="search" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<div class="row row-sm">
|
||||
|
||||
@@ -1,38 +1,31 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
{% include ui/form/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
{% include ui/form/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Button input</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
{% include_cached ui/dropdown-menu.html %}
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
|
||||
@@ -3,20 +3,11 @@
|
||||
{% include parts/input-colorpicker.html %}
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Valid State</label>
|
||||
<input type="text" class="form-control is-valid" placeholder="Valid State..">
|
||||
|
||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Invalid State</label>
|
||||
<label class="form-label">Validation States</label>
|
||||
<input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
|
||||
<input type="text" class="form-control is-invalid" placeholder="Invalid State..">
|
||||
<div class="invalid-feedback">Invalid feedback</div>
|
||||
|
||||
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -50,14 +50,14 @@
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text mask</label>
|
||||
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
{% include ui/form/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Telephone mask</label>
|
||||
{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Autosize textarea</label>
|
||||
<textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
|
||||
{% include ui/form/textarea-autosize.html %}
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
{% endfor %}
|
||||
{% if site.data.libs.css %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
{% for file in lib[1] %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
|
||||
<!-- Tabler Plugins -->
|
||||
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
<link href="{{ site.base }}/dist/css/tabler-payments{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-payments{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<form action="#" class="js-layout-form">
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Color scheme</label>
|
||||
{% include_cached ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Nav position</label>
|
||||
{% include_cached ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Header color</label>
|
||||
{% include_cached ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<!--<div class="mb-2">-->
|
||||
<!--<label class="form-label">Header fixed</label>-->
|
||||
<!--{% include_cached ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
|
||||
<!--</div>-->
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Sidebar position</label>
|
||||
{% include_cached ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Sidebar size</label>
|
||||
{% include_cached ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Sidebar color</label>
|
||||
{% include_cached ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Sidebar fixed</label>
|
||||
{% include_cached ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--<div class="form-footer">-->
|
||||
<!--<button type="submit" class="btn btn-primary">Save options</button>-->
|
||||
<!--</div>-->
|
||||
</form>
|
||||
|
||||
+129
-127
@@ -1,161 +1,163 @@
|
||||
<div class="debug">
|
||||
<a href="#" data-debug="dark">Dark mode</a>
|
||||
<a href="#" data-debug="rtl">RTL mode</a>
|
||||
<a href="#" data-debug="code">Show cards code</a>
|
||||
<a href="#" data-debug="folded">Folded sidebar</a>
|
||||
<a href="#" data-debug="fullscreen">Fullscreen</a>
|
||||
<a href="#" data-debug="header-sticky">Sticky header</a>
|
||||
<a href="{{ site.base }}/pages.html">All pages</a>
|
||||
<a href="#" data-debug="dark">Dark mode</a>
|
||||
<a href="#" data-debug="rtl">RTL mode</a>
|
||||
<a href="#" data-debug="code">Show cards code</a>
|
||||
<a href="#" data-debug="folded">Folded sidebar</a>
|
||||
<a href="#" data-debug="fullscreen">Fullscreen</a>
|
||||
<a href="#" data-debug="header-sticky">Sticky header</a>
|
||||
<a href="{{ site.base }}/pages.html">All pages</a>
|
||||
|
||||
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
|
||||
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
|
||||
</div>
|
||||
<style>
|
||||
.card-debug {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 1;
|
||||
font-size: 11px;
|
||||
display: none;
|
||||
}
|
||||
.card-debug {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 1;
|
||||
font-size: 11px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
margin-left: auto;
|
||||
}
|
||||
.debug-info {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.card-debug a {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
}
|
||||
.card-debug a {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.card-debug a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card-debug a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.debug {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
padding: .5rem .75rem;
|
||||
font-size: 12px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
}
|
||||
.debug {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
padding: .5rem .75rem;
|
||||
font-size: 12px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.debug a {
|
||||
color: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.debug a {
|
||||
color: inherit;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.debug a[data-debug]:after {
|
||||
content: '';
|
||||
margin: 0 0 1px .25rem;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, .3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.debug a[data-debug]:after {
|
||||
content: '';
|
||||
margin: 0 0 1px .25rem;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, .3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body.show-debug-code .card-debug {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.show-debug-code .card-debug {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.debug {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.debug {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.show-debug-code a[data-debug="code"]:after,
|
||||
html[dir="rtl"] a[data-debug="rtl"]:after,
|
||||
body.theme-dark a[data-debug="dark"]:after,
|
||||
:fullscreen a[data-debug="fullscreen"]:after,
|
||||
body.header-sticky a[data-debug="header-sticky"]:after,
|
||||
body.sidebar-folded a[data-debug="folded"]:after {
|
||||
background: #5eba00;
|
||||
}
|
||||
body.show-debug-code a[data-debug="code"]:after,
|
||||
html[dir="rtl"] a[data-debug="rtl"]:after,
|
||||
body.theme-dark a[data-debug="dark"]:after,
|
||||
:fullscreen a[data-debug="fullscreen"]:after,
|
||||
body.header-sticky a[data-debug="header-sticky"]:after,
|
||||
body.sidebar-folded a[data-debug="folded"]:after {
|
||||
background: #5eba00;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(document).ready(function () {
|
||||
|
||||
|
||||
var $body = $('body'),
|
||||
$html = $('html');
|
||||
var $body = $('body'),
|
||||
$html = $('html');
|
||||
|
||||
$body
|
||||
.on('click', '[data-debug="dark"]', function (e) {
|
||||
$body.toggleClass('theme-dark');
|
||||
$body
|
||||
.on('click', '[data-debug="dark"]', function (e) {
|
||||
$body.toggleClass('theme-dark');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="code"]', function (e) {
|
||||
$body.toggleClass('show-debug-code');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="code"]', function (e) {
|
||||
$body.toggleClass('show-debug-code');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="folded"]', function (e) {
|
||||
$('.sidenav').toggleClass('sidenav-folded');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="folded"]', function (e) {
|
||||
$('.sidenav').toggleClass('sidenav-folded');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="fullscreen"]', function (e) {
|
||||
tabler.toggleFullscreen();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="fullscreen"]', function (e) {
|
||||
tabler.toggleFullscreen();
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="header-sticky"]', function (e) {
|
||||
$body.toggleClass('header-sticky');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="header-sticky"]', function (e) {
|
||||
$body.toggleClass('header-sticky');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="rtl"]', function (e) {
|
||||
if ($html.attr('dir') === 'rtl') {
|
||||
$html.attr('dir', 'ltr');
|
||||
} else {
|
||||
$html.attr('dir', 'rtl');
|
||||
}
|
||||
e.preventDefault();
|
||||
return false;
|
||||
})
|
||||
.on('click', '[data-debug="rtl"]', function (e) {
|
||||
if ($html.attr('dir') === 'rtl') {
|
||||
$html.attr('dir', 'ltr');
|
||||
} else {
|
||||
$html.attr('dir', 'rtl');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$('.card').each(function () {
|
||||
var $card = $(this),
|
||||
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
|
||||
$('.card').each(function () {
|
||||
var $card = $(this),
|
||||
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
|
||||
|
||||
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
|
||||
$codeLink = $button.find('[data-code]');
|
||||
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
|
||||
$codeLink = $button.find('[data-code]');
|
||||
|
||||
$codeLink
|
||||
// .data('htmlCode', htmlCode)
|
||||
.on('click', function(e){
|
||||
$codeLink
|
||||
// .data('htmlCode', htmlCode)
|
||||
.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);
|
||||
$('body').append($modal);
|
||||
console.log();
|
||||
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);
|
||||
$('body').append($modal);
|
||||
console.log();
|
||||
|
||||
$modal.modal('show');
|
||||
$modal.modal('show');
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.prepend($button);
|
||||
});
|
||||
});
|
||||
$card.prepend($button);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -43,10 +43,10 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-12">
|
||||
{% include cards/charts/card.html chart-id="temperature" height=10 %}
|
||||
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
{% include cards/charts/card.html chart-id="donut" height=10 %}
|
||||
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
{% removeemptylines %}
|
||||
{{ site.capture_global.scripts }}
|
||||
{% for script in site.captured_global.scripts %}
|
||||
{{ script }}
|
||||
{% endfor %}
|
||||
|
||||
{% for script in site.captured_once.scripts %}
|
||||
{{ script }}
|
||||
{% endfor %}
|
||||
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
<script>
|
||||
window.tabler_colors = { {% for color in site.colors %}
|
||||
'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
|
||||
{% for file in lib[1] %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
<script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
|
||||
<!-- Tabler Plugins -->
|
||||
<script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
|
||||
<ul class="sidebar-nav">
|
||||
<li class="sidebar-nav-title">Navigation</li>
|
||||
{% for level-1 in site.data.menu %}
|
||||
<li class="sidebar-nav-item">
|
||||
|
||||
<a{% unless level-1[1].children %} href="{{ site.base }}/{{ level-1[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-1[0] }}"{% if level-1[0] == current-page[0] %} aria-expanded="true"{% endif %}{% 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 %}
|
||||
|
||||
{% if level-1[1].children %}
|
||||
<span class="sidebar-nav-arrow"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% if level-1[1].children %}
|
||||
<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-menu-{{ level-1[0] }}">
|
||||
{% 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-xl-block">
|
||||
<form action="." method="get">
|
||||
{% include ui/form/input-icon.html prepend=true light=true %}
|
||||
</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" %}
|
||||
{% else %}
|
||||
{% include_cached layout/navbar-search.html class="mr-4" %}
|
||||
{% endif %}
|
||||
|
||||
<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 size="sm" %}
|
||||
<span class="ml-2 d-none d-lg-block lh-1">
|
||||
{{ 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,31 @@
|
||||
{% assign actions = include.actions %}
|
||||
|
||||
<!-- Page title actions -->
|
||||
<div class="col-auto ml-auto d-print-none">
|
||||
{% 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 == 'photos' %}
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
{% include ui/form/input-icon.html %}
|
||||
</div>
|
||||
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'breadcrumb' %}
|
||||
<div class="d-flex">
|
||||
{% include_cached ui/breadcrumb.html class="breadcrumb-alternate" %}
|
||||
</div>
|
||||
{% elsif actions == 'buttons' %}
|
||||
<span class="d-none d-sm-inline">
|
||||
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
|
||||
</span>
|
||||
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -2,45 +2,28 @@
|
||||
<!-- Page title -->
|
||||
<div class="page-title-box">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
{% if page.page-pretitle %}
|
||||
<!-- Page pre-title -->
|
||||
<div class="page-pretitle">
|
||||
{{ page.page-pretitle }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="page-title">
|
||||
{{ page.page-title | default: layout.page-title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
{% if page.page-pretitle %}
|
||||
<!-- Page pre-title -->
|
||||
<div class="page-pretitle">
|
||||
{{ page.page-pretitle }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="page-title">
|
||||
{{ page.page-title | default: layout.page-title }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{% if page.page-title-description %}
|
||||
<div class="col-auto">
|
||||
<div class="text-muted text-h5">{{ page.page-title-description }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if page.page-title-description %}
|
||||
<div class="col-auto">
|
||||
<div class="text-muted text-h5 mt-2">{{ page.page-title-description }}</div>
|
||||
</div>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if page.page-title-actions %}
|
||||
{% include layout/page-title-actions.html actions=page.page-title-actions %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<aside class="sidebar sidebar-dark">
|
||||
<!-- Sidebar logo -->
|
||||
{% include_cached layout/navbar-logo.html prefix="sidebar" %}
|
||||
|
||||
<div class="sidebar-content">
|
||||
<div>
|
||||
<!-- Sidebar menu -->
|
||||
{% include layout/menu-aside.html %}
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -1,6 +1,9 @@
|
||||
<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>
|
||||
|
||||
{% include_cached layout/navbar-search.html %}
|
||||
</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,18 +1,18 @@
|
||||
<fieldset class="form-fieldset">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Full name<span class="form-required">*</span></label>
|
||||
<input type="text" class="form-control" autocomplete="off" />
|
||||
<input type="text" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Company<span class="form-required">*</span></label>
|
||||
<input type="text" class="form-control" autocomplete="off" />
|
||||
<input type="text" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email<span class="form-required">*</span></label>
|
||||
<input type="email" class="form-control" autocomplete="off" />
|
||||
<input type="email" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="">
|
||||
<label class="form-label">Phone number</label>
|
||||
<input type="tel" class="form-control" autocomplete="off" />
|
||||
<input type="tel" class="form-control" autocomplete="off"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Datalist example</label>
|
||||
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
|
||||
<input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
|
||||
<datalist id="datalistOptions">
|
||||
{% for country in site.data.countries limit: 10 %}
|
||||
<option value="{{ country | escape }}" />{% endfor %}
|
||||
<option value="{{ country | escape }}"/>{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include ui/button.html icon="search" icon-only=true color="secondary" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,15 +1,5 @@
|
||||
<div class="mb-2">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Icon input</label>
|
||||
<div class="input-icon mb-3">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<span class="input-icon-addon">
|
||||
{% include_cached ui/icon.html icon="search" %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
{% include_cached ui/icon.html icon="user" %}
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
{% include ui/form/input-icon.html class="mb-3" %}
|
||||
{% include ui/form/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% for photo in site.data.photos limit: limit offset: 30 %}
|
||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||
<label class="imagecheck mb-2">
|
||||
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} />
|
||||
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
|
||||
<span class="imagecheck-figure">
|
||||
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
|
||||
</span>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Shipping methods</label>
|
||||
{% include_cached ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
|
||||
{% include_cached ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Icons input</label>
|
||||
{% include_cached ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
|
||||
{% include_cached ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Icon input</label>
|
||||
{% include_cached ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
||||
{% include_cached ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your skills</label>
|
||||
{% include_cached ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
|
||||
{% include_cached ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
|
||||
</div>
|
||||
|
||||
@@ -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,8 +1,9 @@
|
||||
{% assign options = include.options | default: "One,Two,Three" | split: "," %}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{ include.label | default: 'Select' }}</div>
|
||||
<select class="form-select"{% if include.multiple %} multiple{% endif %}>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
{% for option in options %}
|
||||
<option value="{{ forloop.index }}">{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-alarm-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M7.5 2.5A.5.5 0 018 2h4a.5.5 0 010 1h-1v1.07a7.002 7.002 0 013.537 12.26l.817.816a.5.5 0 01-.708.708l-.924-.925A6.967 6.967 0 0110 18a6.967 6.967 0 01-3.722-1.07l-.924.924a.5.5 0 01-.708-.708l.817-.816A7.002 7.002 0 019 4.07V3H8a.5.5 0 01-.5-.5zM2.86 7.387A2.5 2.5 0 116.387 3.86 8.035 8.035 0 002.86 7.387zM15.5 3c-.753 0-1.429.333-1.887.86a8.035 8.035 0 013.527 3.527A2.5 2.5 0 0015.5 3zm-5 4a.5.5 0 00-1 0v3.882l-1.447 2.894a.5.5 0 10.894.448l1.5-3A.5.5 0 0010.5 11V7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 663 B |
@@ -0,0 +1,7 @@
|
||||
<svg class="bi bi-alarm" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 17a6 6 0 100-12 6 6 0 000 12zm0 1a7 7 0 100-14 7 7 0 000 14z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10 6.5a.5.5 0 01.5.5v4a.5.5 0 01-.053.224l-1.5 3a.5.5 0 11-.894-.448L9.5 10.882V7a.5.5 0 01.5-.5z" clip-rule="evenodd"/>
|
||||
<path d="M2.86 7.387A2.5 2.5 0 116.387 3.86 8.035 8.035 0 002.86 7.387zM13.613 3.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z"/>
|
||||
<path fill-rule="evenodd" d="M13.646 16.146a.5.5 0 01.708 0l1 1a.5.5 0 01-.708.708l-1-1a.5.5 0 010-.708zm-7.292 0a.5.5 0 00-.708 0l-1 1a.5.5 0 00.708.708l1-1a.5.5 0 000-.708zM7.5 2.5A.5.5 0 018 2h4a.5.5 0 010 1H8a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
|
||||
<path d="M9 3h2v2H9V3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 830 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-alert-circle-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8.998 3a1 1 0 112 0 1 1 0 01-2 0zM10 6a.905.905 0 00-.9.995l.35 3.507a.553.553 0 001.1 0l.35-3.507A.905.905 0 0010 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-alert-circle" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 17a7 7 0 100-14 7 7 0 000 14zm0 1a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/>
|
||||
<path d="M9.002 13a1 1 0 112 0 1 1 0 01-2 0zM9.1 6.995a.905.905 0 111.8 0l-.35 3.507a.553.553 0 01-1.1 0L9.1 6.995z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 379 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-alert-octagon-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M13.107 2a.5.5 0 01.353.146l4.394 4.394a.5.5 0 01.146.353v6.214a.5.5 0 01-.146.353l-4.394 4.394a.5.5 0 01-.353.146H6.893a.5.5 0 01-.353-.146L2.146 13.46A.5.5 0 012 13.107V6.893a.5.5 0 01.146-.353L6.54 2.146A.5.5 0 016.893 2h6.214zM9.002 13a1 1 0 112 0 1 1 0 01-2 0zM10 6a.905.905 0 00-.9.995l.35 3.507a.553.553 0 001.1 0l.35-3.507A.905.905 0 0010 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 549 B |
@@ -0,0 +1,5 @@
|
||||
<svg class="bi bi-alert-octagon" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M6.54 2.146A.5.5 0 016.893 2h6.214a.5.5 0 01.353.146l4.394 4.394a.5.5 0 01.146.353v6.214a.5.5 0 01-.146.353l-4.394 4.394a.5.5 0 01-.353.146H6.893a.5.5 0 01-.353-.146L2.146 13.46A.5.5 0 012 13.107V6.893a.5.5 0 01.146-.353L6.54 2.146zM7.1 3L3 7.1v5.8L7.1 17h5.8l4.1-4.1V7.1L12.9 3H7.1z" clip-rule="evenodd"/>
|
||||
<rect width="2" height="2" x="9.002" y="12" rx="1"/>
|
||||
<path d="M9.1 6.995a.905.905 0 111.8 0l-.35 3.507a.553.553 0 01-1.1 0L9.1 6.995z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 619 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-alert-square-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm7.002 9a1 1 0 112 0 1 1 0 01-2 0zM10 6a.905.905 0 00-.9.995l.35 3.507a.553.553 0 001.1 0l.35-3.507A.905.905 0 0010 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 382 B |
@@ -0,0 +1,5 @@
|
||||
<svg class="bi bi-alert-square" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M16 3H4a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1zM4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4z" clip-rule="evenodd"/>
|
||||
<rect width="2" height="2" x="9.002" y="12" rx="1"/>
|
||||
<path d="M9.1 6.995a.905.905 0 111.8 0l-.35 3.507a.553.553 0 01-1.1 0L9.1 6.995z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 466 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-alert-triangle-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M9.022 3.566a1.13 1.13 0 011.96 0l6.857 11.667c.457.778-.092 1.767-.98 1.767H3.144c-.889 0-1.437-.99-.98-1.767L9.022 3.566zM9.002 14a1 1 0 112 0 1 1 0 01-2 0zM10 7a.905.905 0 00-.9.995l.35 3.507a.553.553 0 001.1 0l.35-3.507A.905.905 0 0010 7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 443 B |
@@ -0,0 +1,5 @@
|
||||
<svg class="bi bi-alert-triangle" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M9.938 4.016a.146.146 0 00-.054.057L3.027 15.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L10.12 4.073a.146.146 0 00-.054-.057.13.13 0 00-.063-.016.13.13 0 00-.064.016zm1.043-.45a1.13 1.13 0 00-1.96 0L2.166 15.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L10.982 3.566z" clip-rule="evenodd"/>
|
||||
<rect width="2" height="2" x="9.002" y="13" rx="1"/>
|
||||
<path d="M9.1 7.995a.905.905 0 111.8 0l-.35 3.507a.553.553 0 01-1.1 0L9.1 7.995z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="bi bi-archive-fill" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M14.643 17C15.979 17 17 15.845 17 14.5V7H3v7.5C3 15.845 4.021 17 5.357 17h9.286zM8 9a.5.5 0 000 1h4a.5.5 0 000-1H8zM3 3a1 1 0 00-1 1v1.5a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 375 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-archive" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M4 7v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V7h1v7.5c0 1.345-1.021 2.5-2.357 2.5H5.357C4.021 17 3 15.845 3 14.5V7h1z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M7.5 9.5A.5.5 0 018 9h4a.5.5 0 010 1H8a.5.5 0 01-.5-.5zM17 4H3v2h14V4zM3 3a1 1 0 00-1 1v2a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 517 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-bar-bottom" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M13.354 12.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 01.708-.708L10 14.793l2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10 8a.5.5 0 01.5.5V15a.5.5 0 01-1 0V8.5A.5.5 0 0110 8zM4 5.75a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 482 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-bar-left" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M7.854 6.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L5.207 10l2.647-2.646a.5.5 0 000-.708z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M12 10a.5.5 0 00-.5-.5H5a.5.5 0 000 1h6.5a.5.5 0 00.5-.5zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 477 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-bar-right" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M12.146 6.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L14.793 10l-2.647-2.646a.5.5 0 010-.708z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M8 10a.5.5 0 01.5-.5H15a.5.5 0 010 1H8.5A.5.5 0 018 10zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 480 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-bar-up" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M13.354 7.854a.5.5 0 000-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 10.708.708L10 5.207l2.646 2.647a.5.5 0 00.708 0z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10 12a.5.5 0 00.5-.5V5a.5.5 0 00-1 0v6.5a.5.5 0 00.5.5zm-6 2.75a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 477 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-clockwise" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 4.5a5.5 5.5 0 105.5 5.5.5.5 0 011 0 6.5 6.5 0 11-3.25-5.63l-.5.865A5.472 5.472 0 0010 4.5z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10.646 1.646a.5.5 0 01.708 0l2.5 2.5a.5.5 0 010 .708l-2.5 2.5a.5.5 0 01-.708-.708L12.793 4.5l-2.147-2.146a.5.5 0 010-.708z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 469 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-counterclockwise" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 4.5A5.5 5.5 0 114.5 10a.5.5 0 00-1 0 6.5 6.5 0 103.25-5.63l.5.865A5.472 5.472 0 0110 4.5z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M9.354 1.646a.5.5 0 00-.708 0l-2.5 2.5a.5.5 0 000 .708l2.5 2.5a.5.5 0 10.708-.708L7.207 4.5l2.147-2.146a.5.5 0 000-.708z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 472 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-down-left" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M5 9.5a.5.5 0 01.5.5v4.5H10a.5.5 0 010 1H5a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M14.354 5.646a.5.5 0 010 .708l-9 9a.5.5 0 01-.708-.708l9-9a.5.5 0 01.708 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 404 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-down-right" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M14 9.5a.5.5 0 01.5.5v5a.5.5 0 01-.5.5H9a.5.5 0 010-1h4.5V10a.5.5 0 01.5-.5z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M4.646 5.646a.5.5 0 01.708 0l9 9a.5.5 0 01-.708.708l-9-9a.5.5 0 010-.708z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-down-short" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M6.646 9.646a.5.5 0 01.708 0L10 12.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10 6.5a.5.5 0 01.5.5v5a.5.5 0 01-1 0V7a.5.5 0 01.5-.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 420 B |
@@ -0,0 +1,4 @@
|
||||
<svg class="bi bi-arrow-down" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M6.646 11.646a.5.5 0 01.708 0L10 14.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M10 4.5a.5.5 0 01.5.5v9a.5.5 0 01-1 0V5a.5.5 0 01.5-.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user