mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add theme settings (#2054)
This commit is contained in:
Paweł Kuna
GitHub
@@ -118,7 +118,8 @@ export default function (eleventyConfig) {
|
||||
"tabler-socials",
|
||||
"tabler-payments",
|
||||
"tabler-vendors",
|
||||
"tabler-marketing"
|
||||
"tabler-marketing",
|
||||
"tabler-themes",
|
||||
],
|
||||
|
||||
icons: {
|
||||
|
||||
@@ -4,25 +4,35 @@
|
||||
* This will prevent any flashes of the light theme (default) before switching.
|
||||
*/
|
||||
|
||||
const themeStorageKey = "tablerTheme"
|
||||
const defaultTheme = "light"
|
||||
let selectedTheme
|
||||
const themeConfig = {
|
||||
"theme": "light",
|
||||
"theme-base": "gray",
|
||||
"theme-font": "sans-serif",
|
||||
"theme-primary": "blue",
|
||||
"theme-radius": "1",
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/901144
|
||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
})
|
||||
|
||||
if (!!params.theme) {
|
||||
localStorage.setItem(themeStorageKey, params.theme)
|
||||
selectedTheme = params.theme
|
||||
} else {
|
||||
const storedTheme = localStorage.getItem(themeStorageKey)
|
||||
selectedTheme = storedTheme ? storedTheme : defaultTheme
|
||||
}
|
||||
|
||||
if (selectedTheme === 'dark') {
|
||||
document.body.setAttribute("data-bs-theme", selectedTheme)
|
||||
} else {
|
||||
document.body.removeAttribute("data-bs-theme")
|
||||
for (const key in themeConfig) {
|
||||
const param = params[key]
|
||||
let selectedValue
|
||||
|
||||
if (!!param) {
|
||||
localStorage.setItem('tabler-' + key, param)
|
||||
selectedValue = param
|
||||
} else {
|
||||
const storedTheme = localStorage.getItem('tabler-' + key)
|
||||
selectedValue = storedTheme ? storedTheme : themeConfig[key]
|
||||
}
|
||||
|
||||
if (selectedValue !== themeConfig[key]) {
|
||||
document.documentElement.setAttribute('data-bs-' + key, selectedValue)
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-bs-' + key)
|
||||
}
|
||||
}
|
||||
@@ -35,7 +35,7 @@
|
||||
"@melloware/coloris": "^0.24.0",
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0",
|
||||
"apexcharts": "^4.5.0",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"countup.js": "^2.8.0",
|
||||
|
||||
@@ -128,13 +128,13 @@
|
||||
{
|
||||
"name": "Affilliate",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.8,
|
||||
"color-opacity": "80%",
|
||||
"data": 55
|
||||
},
|
||||
{
|
||||
"name": "E-mail",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.6,
|
||||
"color-opacity": "60%",
|
||||
"data": 12
|
||||
},
|
||||
{
|
||||
@@ -596,7 +596,7 @@
|
||||
0
|
||||
],
|
||||
"color": "primary",
|
||||
"color-opacity": 0.8
|
||||
"color-opacity": "80%"
|
||||
},
|
||||
{
|
||||
"name": "Other",
|
||||
@@ -640,7 +640,7 @@
|
||||
6
|
||||
],
|
||||
"color": "green",
|
||||
"color-opacity": 0.8
|
||||
"color-opacity": "80%"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -817,13 +817,13 @@
|
||||
{
|
||||
"name": "Reached",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.8,
|
||||
"color-opacity": "80%",
|
||||
"data": 36
|
||||
},
|
||||
{
|
||||
"name": "Opened",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.6,
|
||||
"color-opacity": "60%",
|
||||
"data": 18
|
||||
}
|
||||
]
|
||||
@@ -1594,19 +1594,19 @@
|
||||
{
|
||||
"name": "B",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.8,
|
||||
"color-opacity": "80%",
|
||||
"data": 44
|
||||
},
|
||||
{
|
||||
"name": "C",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.6,
|
||||
"color-opacity": "60%",
|
||||
"data": 12
|
||||
},
|
||||
{
|
||||
"name": "D",
|
||||
"color": "primary",
|
||||
"color-opacity": 0.4,
|
||||
"color-opacity": "40%",
|
||||
"data": 14
|
||||
}
|
||||
]
|
||||
@@ -1623,7 +1623,7 @@
|
||||
{
|
||||
"name": "Minimum",
|
||||
"color": "green",
|
||||
"color-opacity": 0.8,
|
||||
"color-opacity": "80%",
|
||||
"data": 37
|
||||
}
|
||||
]
|
||||
|
||||
@@ -3,13 +3,379 @@
|
||||
"title": "World map",
|
||||
"map": "world",
|
||||
"color": "primary",
|
||||
"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, \"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": "scale2",
|
||||
"AL": "scale2",
|
||||
"DZ": "scale4",
|
||||
"AO": "scale3",
|
||||
"AG": "scale1",
|
||||
"AR": "scale5",
|
||||
"AM": "scale1",
|
||||
"AU": "scale7",
|
||||
"AT": "scale5",
|
||||
"AZ": "scale3",
|
||||
"BS": "scale1",
|
||||
"BH": "scale2",
|
||||
"BD": "scale4",
|
||||
"BB": "scale1",
|
||||
"BY": "scale3",
|
||||
"BE": "scale5",
|
||||
"BZ": "scale1",
|
||||
"BJ": "scale1",
|
||||
"BT": "scale1",
|
||||
"BO": "scale2",
|
||||
"BA": "scale2",
|
||||
"BW": "scale2",
|
||||
"BR": "scale8",
|
||||
"BN": "scale2",
|
||||
"BG": "scale2",
|
||||
"BF": "scale1",
|
||||
"BI": "scale1",
|
||||
"KH": "scale2",
|
||||
"CM": "scale2",
|
||||
"CA": "scale7",
|
||||
"CV": "scale1",
|
||||
"CF": "scale1",
|
||||
"TD": "scale1",
|
||||
"CL": "scale4",
|
||||
"CN": "scale9",
|
||||
"CO": "scale5",
|
||||
"KM": "scale1",
|
||||
"CD": "scale2",
|
||||
"CG": "scale2",
|
||||
"CR": "scale2",
|
||||
"CI": "scale2",
|
||||
"HR": "scale3",
|
||||
"CY": "scale2",
|
||||
"CZ": "scale4",
|
||||
"DK": "scale5",
|
||||
"DJ": "scale1",
|
||||
"DM": "scale1",
|
||||
"DO": "scale3",
|
||||
"EC": "scale3",
|
||||
"EG": "scale5",
|
||||
"SV": "scale2",
|
||||
"GQ": "scale2",
|
||||
"ER": "scale1",
|
||||
"EE": "scale2",
|
||||
"ET": "scale2",
|
||||
"FJ": "scale1",
|
||||
"FI": "scale5",
|
||||
"FR": "scale8",
|
||||
"GA": "scale2",
|
||||
"GM": "scale1",
|
||||
"GE": "scale2",
|
||||
"DE": "scale8",
|
||||
"GH": "scale2",
|
||||
"GR": "scale5",
|
||||
"GD": "scale1",
|
||||
"GT": "scale2",
|
||||
"GN": "scale1",
|
||||
"GW": "scale1",
|
||||
"GY": "scale1",
|
||||
"HT": "scale1",
|
||||
"HN": "scale2",
|
||||
"HK": "scale5",
|
||||
"HU": "scale4",
|
||||
"IS": "scale2",
|
||||
"IN": "scale7",
|
||||
"ID": "scale6",
|
||||
"IR": "scale5",
|
||||
"IQ": "scale3",
|
||||
"IE": "scale5",
|
||||
"IL": "scale5",
|
||||
"IT": "scale8",
|
||||
"JM": "scale2",
|
||||
"JP": "scale9",
|
||||
"JO": "scale2",
|
||||
"KZ": "scale4",
|
||||
"KE": "scale2",
|
||||
"KI": "scale1",
|
||||
"KR": "scale6",
|
||||
"KW": "scale4",
|
||||
"KG": "scale1",
|
||||
"LA": "scale1",
|
||||
"LV": "scale2",
|
||||
"LB": "scale2",
|
||||
"LS": "scale1",
|
||||
"LR": "scale1",
|
||||
"LY": "scale3",
|
||||
"LT": "scale2",
|
||||
"LU": "scale3",
|
||||
"MK": "scale1",
|
||||
"MG": "scale1",
|
||||
"MW": "scale1",
|
||||
"MY": "scale5",
|
||||
"MV": "scale1",
|
||||
"ML": "scale1",
|
||||
"MT": "scale1",
|
||||
"MR": "scale1",
|
||||
"MU": "scale1",
|
||||
"MX": "scale7",
|
||||
"MD": "scale1",
|
||||
"MN": "scale1",
|
||||
"ME": "scale1",
|
||||
"MA": "scale3",
|
||||
"MZ": "scale2",
|
||||
"MM": "scale2",
|
||||
"NA": "scale2",
|
||||
"NP": "scale2",
|
||||
"NL": "scale6",
|
||||
"NZ": "scale4",
|
||||
"NI": "scale1",
|
||||
"NE": "scale1",
|
||||
"NG": "scale5",
|
||||
"NO": "scale5",
|
||||
"OM": "scale3",
|
||||
"PK": "scale4",
|
||||
"PA": "scale2",
|
||||
"PG": "scale1",
|
||||
"PY": "scale2",
|
||||
"PE": "scale4",
|
||||
"PH": "scale4",
|
||||
"PL": "scale10",
|
||||
"PT": "scale5",
|
||||
"QA": "scale4",
|
||||
"RO": "scale4",
|
||||
"RU": "scale7",
|
||||
"RW": "scale1",
|
||||
"WS": "scale1",
|
||||
"ST": "scale1",
|
||||
"SA": "scale5",
|
||||
"SN": "scale2",
|
||||
"RS": "scale2",
|
||||
"SC": "scale1",
|
||||
"SL": "scale1",
|
||||
"SG": "scale5",
|
||||
"SK": "scale3",
|
||||
"SI": "scale2",
|
||||
"SB": "scale1",
|
||||
"ZA": "scale5",
|
||||
"ES": "scale7",
|
||||
"LK": "scale2",
|
||||
"KN": "scale1",
|
||||
"LC": "scale1",
|
||||
"VC": "scale1",
|
||||
"SD": "scale3",
|
||||
"SR": "scale1",
|
||||
"SZ": "scale1",
|
||||
"SE": "scale5",
|
||||
"CH": "scale6",
|
||||
"SY": "scale3",
|
||||
"TW": "scale5",
|
||||
"TJ": "scale1",
|
||||
"TZ": "scale2",
|
||||
"TH": "scale5",
|
||||
"TL": "scale1",
|
||||
"TG": "scale1",
|
||||
"TO": "scale1",
|
||||
"TT": "scale2",
|
||||
"TN": "scale2",
|
||||
"TR": "scale6",
|
||||
"TM": "scale1",
|
||||
"UG": "scale2",
|
||||
"UA": "scale4",
|
||||
"AE": "scale5",
|
||||
"GB": "scale8",
|
||||
"US": "scale10",
|
||||
"UY": "scale2",
|
||||
"UZ": "scale2",
|
||||
"VU": "scale1",
|
||||
"VE": "scale5",
|
||||
"VN": "scale4",
|
||||
"YE": "scale2",
|
||||
"ZM": "scale2",
|
||||
"ZW": "scale1"
|
||||
}
|
||||
},
|
||||
"world-merc": {
|
||||
"title": "World map",
|
||||
"map": "world_merc",
|
||||
"color": "primary",
|
||||
"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, \"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": "scale2",
|
||||
"AL": "scale2",
|
||||
"DZ": "scale4",
|
||||
"AO": "scale3",
|
||||
"AG": "scale1",
|
||||
"AR": "scale5",
|
||||
"AM": "scale1",
|
||||
"AU": "scale7",
|
||||
"AT": "scale5",
|
||||
"AZ": "scale3",
|
||||
"BS": "scale1",
|
||||
"BH": "scale2",
|
||||
"BD": "scale4",
|
||||
"BB": "scale1",
|
||||
"BY": "scale3",
|
||||
"BE": "scale5",
|
||||
"BZ": "scale1",
|
||||
"BJ": "scale1",
|
||||
"BT": "scale1",
|
||||
"BO": "scale2",
|
||||
"BA": "scale2",
|
||||
"BW": "scale2",
|
||||
"BR": "scale8",
|
||||
"BN": "scale2",
|
||||
"BG": "scale2",
|
||||
"BF": "scale1",
|
||||
"BI": "scale1",
|
||||
"KH": "scale2",
|
||||
"CM": "scale2",
|
||||
"CA": "scale7",
|
||||
"CV": "scale1",
|
||||
"CF": "scale1",
|
||||
"TD": "scale1",
|
||||
"CL": "scale4",
|
||||
"CN": "scale9",
|
||||
"CO": "scale5",
|
||||
"KM": "scale1",
|
||||
"CD": "scale2",
|
||||
"CG": "scale2",
|
||||
"CR": "scale2",
|
||||
"CI": "scale2",
|
||||
"HR": "scale3",
|
||||
"CY": "scale2",
|
||||
"CZ": "scale4",
|
||||
"DK": "scale5",
|
||||
"DJ": "scale1",
|
||||
"DM": "scale1",
|
||||
"DO": "scale3",
|
||||
"EC": "scale3",
|
||||
"EG": "scale5",
|
||||
"SV": "scale2",
|
||||
"GQ": "scale2",
|
||||
"ER": "scale1",
|
||||
"EE": "scale2",
|
||||
"ET": "scale2",
|
||||
"FJ": "scale1",
|
||||
"FI": "scale5",
|
||||
"FR": "scale8",
|
||||
"GA": "scale2",
|
||||
"GM": "scale1",
|
||||
"GE": "scale2",
|
||||
"DE": "scale8",
|
||||
"GH": "scale2",
|
||||
"GR": "scale5",
|
||||
"GD": "scale1",
|
||||
"GT": "scale2",
|
||||
"GN": "scale1",
|
||||
"GW": "scale1",
|
||||
"GY": "scale1",
|
||||
"HT": "scale1",
|
||||
"HN": "scale2",
|
||||
"HK": "scale5",
|
||||
"HU": "scale4",
|
||||
"IS": "scale2",
|
||||
"IN": "scale7",
|
||||
"ID": "scale6",
|
||||
"IR": "scale5",
|
||||
"IQ": "scale3",
|
||||
"IE": "scale5",
|
||||
"IL": "scale5",
|
||||
"IT": "scale8",
|
||||
"JM": "scale2",
|
||||
"JP": "scale9",
|
||||
"JO": "scale2",
|
||||
"KZ": "scale4",
|
||||
"KE": "scale2",
|
||||
"KI": "scale1",
|
||||
"KR": "scale6",
|
||||
"KW": "scale4",
|
||||
"KG": "scale1",
|
||||
"LA": "scale1",
|
||||
"LV": "scale2",
|
||||
"LB": "scale2",
|
||||
"LS": "scale1",
|
||||
"LR": "scale1",
|
||||
"LY": "scale3",
|
||||
"LT": "scale2",
|
||||
"LU": "scale3",
|
||||
"MK": "scale1",
|
||||
"MG": "scale1",
|
||||
"MW": "scale1",
|
||||
"MY": "scale5",
|
||||
"MV": "scale1",
|
||||
"ML": "scale1",
|
||||
"MT": "scale1",
|
||||
"MR": "scale1",
|
||||
"MU": "scale1",
|
||||
"MX": "scale7",
|
||||
"MD": "scale1",
|
||||
"MN": "scale1",
|
||||
"ME": "scale1",
|
||||
"MA": "scale3",
|
||||
"MZ": "scale2",
|
||||
"MM": "scale2",
|
||||
"NA": "scale2",
|
||||
"NP": "scale2",
|
||||
"NL": "scale6",
|
||||
"NZ": "scale4",
|
||||
"NI": "scale1",
|
||||
"NE": "scale1",
|
||||
"NG": "scale5",
|
||||
"NO": "scale5",
|
||||
"OM": "scale3",
|
||||
"PK": "scale4",
|
||||
"PA": "scale2",
|
||||
"PG": "scale1",
|
||||
"PY": "scale2",
|
||||
"PE": "scale4",
|
||||
"PH": "scale4",
|
||||
"PL": "scale10",
|
||||
"PT": "scale5",
|
||||
"QA": "scale4",
|
||||
"RO": "scale4",
|
||||
"RU": "scale7",
|
||||
"RW": "scale1",
|
||||
"WS": "scale1",
|
||||
"ST": "scale1",
|
||||
"SA": "scale5",
|
||||
"SN": "scale2",
|
||||
"RS": "scale2",
|
||||
"SC": "scale1",
|
||||
"SL": "scale1",
|
||||
"SG": "scale5",
|
||||
"SK": "scale3",
|
||||
"SI": "scale2",
|
||||
"SB": "scale1",
|
||||
"ZA": "scale5",
|
||||
"ES": "scale7",
|
||||
"LK": "scale2",
|
||||
"KN": "scale1",
|
||||
"LC": "scale1",
|
||||
"VC": "scale1",
|
||||
"SD": "scale3",
|
||||
"SR": "scale1",
|
||||
"SZ": "scale1",
|
||||
"SE": "scale5",
|
||||
"CH": "scale6",
|
||||
"SY": "scale3",
|
||||
"TW": "scale5",
|
||||
"TJ": "scale1",
|
||||
"TZ": "scale2",
|
||||
"TH": "scale5",
|
||||
"TL": "scale1",
|
||||
"TG": "scale1",
|
||||
"TO": "scale1",
|
||||
"TT": "scale2",
|
||||
"TN": "scale2",
|
||||
"TR": "scale6",
|
||||
"TM": "scale1",
|
||||
"UG": "scale2",
|
||||
"UA": "scale4",
|
||||
"AE": "scale5",
|
||||
"GB": "scale8",
|
||||
"US": "scale10",
|
||||
"UY": "scale2",
|
||||
"UZ": "scale2",
|
||||
"VU": "scale1",
|
||||
"VE": "scale5",
|
||||
"VN": "scale4",
|
||||
"YE": "scale2",
|
||||
"ZM": "scale2",
|
||||
"ZW": "scale1"
|
||||
}
|
||||
},
|
||||
"world-markers": {
|
||||
"title": "Map with markers",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -45,13 +45,30 @@
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
|
||||
<div class="container-xl">
|
||||
<div class="row flex-fill align-items-center">
|
||||
<div class="row flex-column flex-md-row flex-fill align-items-center">
|
||||
<div class="col">
|
||||
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
|
||||
</div>
|
||||
{% unless include.hide-search %}
|
||||
<div class="col-2 d-none d-xxl-block">
|
||||
{% include "layout/navbar-search.html" breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
<div class="col col-md-auto">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Settings
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,16 +2,16 @@
|
||||
{% include "marketing/section-divider.html" divider=include.divider %}
|
||||
<div class="container">
|
||||
<div class="section-header mb-6">
|
||||
<h2 class="section-title text-muted">Trusted by over 3,000 companies</h2>
|
||||
<h2 class="section-title text-secondary">Trusted by over 3,000 companies</h2>
|
||||
</div>
|
||||
<div class="row g-8 align-items-center justify-content-center">
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/baremetrics.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/cgi.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/docplanner.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/flow.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/fubotv.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/six-flags.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-muted">{% include "marketing/brands/vocus.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/baremetrics.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/cgi.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/docplanner.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/flow.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/fubotv.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/six-flags.svg" %}</a></div>
|
||||
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/vocus.svg" %}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -11,15 +11,15 @@
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<div class="h3 mb-1">Can I use Tabler in commercial projects?</div>
|
||||
<div class="text-muted">Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler.</div>
|
||||
<div class="text-secondary">Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler.</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h3 mb-1">How do I get notified of new Tabler versions?</div>
|
||||
<div class="text-muted">You may watch the releases on GitHub or follow me on Twitter.</div>
|
||||
<div class="text-secondary">You may watch the releases on GitHub or follow me on Twitter.</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h3 mb-1">Can Tabler be used with WordPress?</div>
|
||||
<div class="text-muted">
|
||||
<div class="text-secondary">
|
||||
Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-muted m-0">
|
||||
<p class="text-secondary m-0">
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
|
||||
attention to detail to make your interface beautiful!
|
||||
</p>
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-muted m-0">
|
||||
<p class="text-secondary m-0">
|
||||
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
|
||||
browsers and fully responsive.
|
||||
</p>
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-muted m-0">
|
||||
<p class="text-secondary m-0">
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
|
||||
attention to detail to make your interface beautiful!
|
||||
</p>
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-muted m-0">
|
||||
<p class="text-secondary m-0">
|
||||
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
|
||||
browsers and fully responsive.
|
||||
</p>
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,17 +5,17 @@
|
||||
<div class="col-md-6 col-lg">
|
||||
{% include "ui/shape.html" icon="devices" class="mb-3" size="md" %}
|
||||
<h2 class="h2">Mobile-optimized</h2>
|
||||
<p class="text-muted">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
|
||||
<p class="text-secondary">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
{% include "ui/shape.html" icon="mailbox" class="mb-3" size="md" %}
|
||||
<h2 class="h2">Compatible with 90+ email clients</h2>
|
||||
<p class="text-muted">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
|
||||
<p class="text-secondary">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
{% include "ui/shape.html" icon="palette" class="mb-3" size="md" %}
|
||||
<h2 class="h2">Unique, minimal design</h2>
|
||||
<p class="text-muted">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
|
||||
<p class="text-secondary">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
{% for testimonial in group %}
|
||||
{% assign person = people[i] %}
|
||||
<div class="col-12">
|
||||
<a href="#" class="card bg-body">
|
||||
<a href="#" class="card bg-surface-secondary">
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-auto">{% include "ui/avatar.html" person=person size="md" %}</div>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
{% if task.subtasks %}
|
||||
<div class="col-auto">
|
||||
<a href="#" class="link-muted">
|
||||
<a href="#" class="link-secondary">
|
||||
{% include "ui/icon.html" icon="activity" %}
|
||||
1/{{ task.subtasks.size }}
|
||||
</a>
|
||||
@@ -65,11 +65,11 @@
|
||||
{% endif %}
|
||||
{% if task.comments %}
|
||||
<div class="col-auto">
|
||||
<a href="#" class="link-muted">{% include "ui/icon.html" icon="message" %} {{ task.comments }}</a>
|
||||
<a href="#" class="link-secondary">{% include "ui/icon.html" icon="message" %} {{ task.comments }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-auto">
|
||||
<a href="#" class="link-muted">{% include "ui/icon.html" icon="share" %}</a>
|
||||
<a href="#" class="link-secondary">{% include "ui/icon.html" icon="share" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,88 +1,167 @@
|
||||
<div class="settings">
|
||||
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"> {% include "ui/icon.html" icon="brush" %} </a>
|
||||
|
||||
<a href="#" class="btn btn-icon btn-lg settings-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</a>
|
||||
|
||||
|
||||
<form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
||||
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
||||
<div class="offcanvas-header">
|
||||
<h2 class="offcanvas-title">Theme Builder</h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Color scheme</label>
|
||||
<p class="form-hint">The perfect color mode for your app.</p>
|
||||
<div class="offcanvas-body d-flex flex-column">
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Color mode</label>
|
||||
<p class="form-hint">Choose the color mode for your app.</p>
|
||||
{% assign modes = 'light,dark' | split: ',' %} {% for mode in modes %}
|
||||
<label class="form-check">
|
||||
<div class="form-selectgroup-item">
|
||||
<input type="radio" name="theme" value="{{ mode }}" class="form-check-input"{% if mode == 'light' %} checked{% endif %} />
|
||||
<div class="form-check-label">{{ mode | capitalize }}</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row g-2">
|
||||
{% assign schemes = 'light,mixed,colored,dark,transparent' | split: ',' %}
|
||||
{% for scheme in schemes %}
|
||||
<div class="col-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="settings-theme" value="{{ scheme }}" class="form-selectgroup-input" />
|
||||
<div class="form-selectgroup-label text-center">
|
||||
<span class="form-selectgroup-check form-selectgroup-check-floated"></span>
|
||||
<div class="settings-scheme settings-scheme-{{ scheme }}"></div>
|
||||
<div>{{ scheme | capitalize }}</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Color scheme</label>
|
||||
<p class="form-hint">The perfect color mode for your app.</p>
|
||||
|
||||
<div class="row g-2">
|
||||
{% for color in site.colors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="theme-primary" type="radio" value="{{ color[0] }}" class="form-colorinput-input" />
|
||||
<span class="form-colorinput-color bg-{{ color[0] }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Font family</label>
|
||||
<p class="form-hint">Choose the font family that fits your app.</p>
|
||||
|
||||
<div>
|
||||
{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
|
||||
<label class="form-check">
|
||||
<div class="form-selectgroup-item">
|
||||
<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
|
||||
<div class="form-check-label">{{ font | capitalize }}</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Theme base</label>
|
||||
<p class="form-hint">Choose the gray shade for your app.</p>
|
||||
|
||||
<div>
|
||||
{% assign bases = 'slate,gray,zinc,neutral,stone' | split: ',' %} {% for base in bases %}
|
||||
<label class="form-check">
|
||||
<div class="form-selectgroup-item">
|
||||
<input type="radio" name="theme-base" value="{{ base }}" class="form-check-input"{% if base == 'gray' %} checked{% endif %} />
|
||||
<div class="form-check-label">{{ base | capitalize }}</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Corner Radius</label>
|
||||
<p class="form-hint">
|
||||
Choose the border radius factory for your app.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
{% assign radiuses = '0,0.5,1,1.5,2' | split: ',' %} {% for radius in radiuses %}
|
||||
<label class="form-check">
|
||||
<div class="form-selectgroup-item">
|
||||
<input type="radio" name="theme-radius" value="{{ radius }}" class="form-check-input"{% if radius == "1" %} checked{% endif %} />
|
||||
<div class="form-check-label">{{ radius }}</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-label">Menu position</div>
|
||||
<p class="form-hint">Toggle the position of the menu.</p>
|
||||
|
||||
<div>
|
||||
{% assign positions = 'top,top-condensed,top-overlap,combo,left,right' | split: ',' %}
|
||||
{% for position in positions %}
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" name="settings-menu-position" value="{{ position }}" type="radio" />
|
||||
<span class="form-check-label">{{ position | capitalize }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="mt-auto space-y">
|
||||
<button type="button" class="btn w-100" id="reset-changes">
|
||||
{% include "ui/icon.html" icon="rotate" %}
|
||||
Reset changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
Save settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-label">Menu behavior</div>
|
||||
<p class="form-hint">Change the behavior of the menu.</p>
|
||||
|
||||
<div>
|
||||
{% assign behaviors = 'sticky,fixed,compact' | split: ',' %}
|
||||
{% for behavior in behaviors %}
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" name="settings-menu-behavior" value="{{ behavior }}" type="radio" />
|
||||
<span class="form-check-label">{{ behavior | capitalize }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-label">Layout</div>
|
||||
<p class="form-hint">Toggle container layout system.</p>
|
||||
|
||||
<div>
|
||||
{% assign systems = 'boxed,fluid' | split: ',' %}
|
||||
{% for system in systems %}
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" name="settings-container-layout" value="{{ system }}" type="radio" />
|
||||
<span class="form-check-label">{{ system | capitalize }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="offcanvas-footer">
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
Save settings
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var themeConfig = {
|
||||
theme: "light",
|
||||
"theme-base": "gray",
|
||||
"theme-font": "sans-serif",
|
||||
"theme-primary": "blue",
|
||||
"theme-radius": "1",
|
||||
}
|
||||
|
||||
var url = new URL(window.location)
|
||||
var form = document.getElementById("offcanvasSettings")
|
||||
var resetButton = document.getElementById("reset-changes")
|
||||
|
||||
var checkItems = function () {
|
||||
for (var key in themeConfig) {
|
||||
var value = window.localStorage["tabler-" + key] || themeConfig[key]
|
||||
|
||||
if (!!value) {
|
||||
var radios = form.querySelectorAll(`[name="${key}"]`)
|
||||
|
||||
if (!!radios) {
|
||||
radios.forEach((radio) => {
|
||||
radio.checked = radio.value === value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener("change", function (event) {
|
||||
var target = event.target,
|
||||
name = target.name,
|
||||
value = target.value
|
||||
|
||||
for (var key in themeConfig) {
|
||||
if (name === key) {
|
||||
document.documentElement.setAttribute("data-bs-" + key, value)
|
||||
window.localStorage.setItem("tabler-" + key, value)
|
||||
url.searchParams.set(key, value)
|
||||
}
|
||||
}
|
||||
|
||||
window.history.pushState({}, "", url)
|
||||
})
|
||||
|
||||
resetButton.addEventListener("click", function () {
|
||||
for (var key in themeConfig) {
|
||||
var value = themeConfig[key]
|
||||
document.documentElement.removeAttribute("data-bs-" + key)
|
||||
window.localStorage.removeItem("tabler-" + key)
|
||||
url.searchParams.delete(key)
|
||||
}
|
||||
|
||||
checkItems()
|
||||
|
||||
window.history.pushState({}, "", url)
|
||||
})
|
||||
|
||||
checkItems()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign type = include.type | default: 'bar' %}
|
||||
{% assign id = include.id %}
|
||||
{% assign color = include.color | default: 'blue' %}
|
||||
{% assign color = include.color | default: 'primary' %}
|
||||
{% assign height = include.height | default: 2.5 %}
|
||||
{% if include.small %}
|
||||
{% assign height = include.height | default: 1.5 %}
|
||||
@@ -70,11 +70,11 @@
|
||||
{% endif %}
|
||||
|
||||
{% if type == 'donut' %}
|
||||
colors: [tabler.getColor("{{ color | default: 'primary' }}")],
|
||||
colors: ['var(--tblr-{{ color }})'],
|
||||
series: [{{ data }}],
|
||||
{% else %}
|
||||
series: [{
|
||||
color: tabler.getColor("{{ color | default: 'primary' }}"),
|
||||
color: 'var(--tblr-{{ color }})',
|
||||
data: [{{ data }}]
|
||||
}],
|
||||
{% endif %}
|
||||
|
||||
@@ -89,10 +89,15 @@
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'area' %}
|
||||
fill: {
|
||||
opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
|
||||
{% if chart-type == 'area' %}type: 'solid'{% endif %}
|
||||
colors: [
|
||||
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
|
||||
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}80%{% endif %})',
|
||||
],
|
||||
type: 'solid'
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.title %}
|
||||
title: {
|
||||
@@ -214,7 +219,9 @@
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}tabler.getColor("{{ color }}"{% if serie.color-opacity %}, {{ serie.color-opacity }}{% endif %}){% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}
|
||||
'color-mix(in srgb, transparent, var(--tblr-{{ color }}) {% if serie.color-opacity %}{{ serie.color-opacity }}{% else %}100%{% endif %})'{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
|
||||
legend: {
|
||||
|
||||
@@ -21,11 +21,11 @@
|
||||
regionStyle: {
|
||||
initial: {
|
||||
{% unless data.filled %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
stroke: tabler.getColor('border-color'),
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: 'var(--tblr-border-color)',
|
||||
strokeWidth: 2,
|
||||
{% else %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
fill: 'var(--tblr-bg-surface-secondary)',
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
{% endunless %}
|
||||
@@ -34,11 +34,17 @@
|
||||
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
|
||||
{% if data.values %}
|
||||
// -------- Series --------
|
||||
visualizeData: {
|
||||
scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
|
||||
values: {{ data.values }},
|
||||
},
|
||||
series: {
|
||||
regions: [{
|
||||
attribute: "fill",
|
||||
scale: {
|
||||
{% for i in (1..10) %}
|
||||
scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
|
||||
{% endfor %}
|
||||
},
|
||||
values: {{ data.values | json }},
|
||||
}]
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.markers %}
|
||||
markers: [
|
||||
@@ -56,11 +62,11 @@
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: .5,
|
||||
fill: tabler.getColor('{{ color }}')
|
||||
fill: 'var(--tblr-{{ color }})'
|
||||
},
|
||||
hover: {
|
||||
fill: tabler.getColor('{{ color }}'),
|
||||
stroke: tabler.getColor('{{ color }}')
|
||||
fill: 'var(--tblr-{{ color }})',
|
||||
stroke: 'var(--tblr-{{ color }})'
|
||||
}
|
||||
},
|
||||
markerLabelStyle: {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
{% assign layout-dark = page.layout-dark | default: site.layout-dark -%}
|
||||
<!doctype html>
|
||||
{% include "layout/banner.html" %}
|
||||
{% assign title = page.title | default: layout.title %}
|
||||
<html lang="en"{% if layout-rtl %} dir="rtl" {% endif %}>
|
||||
<html lang="en"{% if layout-rtl %} dir="rtl" {% endif %}{% if layout.html-class or page.html-class %} class="{{ page.html-class | default: layout.html-class }}"{% endif %}>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||||
@@ -50,5 +51,7 @@
|
||||
{% modals %}
|
||||
|
||||
{% include "layout/js.html" %}
|
||||
|
||||
{% include "settings.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -13,7 +13,7 @@ layout: base
|
||||
|
||||
{% unless layout-hide-topbar %}
|
||||
<!-- BEGIN NAVBAR -->
|
||||
{% include "layout/navbar.html" condensed=layout-navbar-condensed overlap=layout-navbar-overlap dark=layout-navbar-dark hide-brand=layout-navbar-hide-brand hide-menu=layout-navbar-hide-menu sticky=layout-navbar-sticky transparent=layout-topbar-transparent class=layout-navbar-class %}
|
||||
{% include "layout/navbar.html" condensed=layout-navbar-condensed overlap=layout-navbar-overlap dark=layout-navbar-dark hide-brand=layout-navbar-hide-brand hide-menu=layout-navbar-hide-menu sticky=layout-navbar-sticky transparent=layout-topbar-transparent class=layout-navbar-class hide-search=true %}
|
||||
<!-- END NAVBAR -->
|
||||
{% endunless %}
|
||||
|
||||
@@ -39,6 +39,4 @@ layout: base
|
||||
|
||||
{% include "layout/footer.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %}{% include "settings.html" %}{% endcomment %}
|
||||
</div>
|
||||
@@ -17,26 +17,26 @@ plugins: marketing
|
||||
<div class="col-md">
|
||||
<div class="subheader mb-3">Our products</div>
|
||||
<ul class="list-unstyled list-separated gap-2">
|
||||
<li><a class="link-muted" href="/">UI Kit</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">UI Kit</a></li>
|
||||
<li>
|
||||
<a class="link-muted" href="/icons">2664 open source icons</a>
|
||||
<a class="link-secondary" href="{{ site.base }}">Open source icons</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-muted" href="/emails">Email templates</a>
|
||||
<a class="link-secondary" href="{{ site.base }}">Email templates</a>
|
||||
</li>
|
||||
<li><a class="link-muted" href="/pricing">Pricing</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Pricing</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<div class="subheader mb-3">Support</div>
|
||||
<ul class="list-unstyled list-separated gap-2">
|
||||
<li><a class="link-muted" href="/">Blog</a></li>
|
||||
<li><a class="link-muted" href="/">Documentation</a></li>
|
||||
<li><a class="link-muted" href="/">Support</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Documentation</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Support</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="https://status.tabler.io"
|
||||
class="link-muted"
|
||||
class="link-secondary"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>Status</a
|
||||
@@ -47,13 +47,13 @@ plugins: marketing
|
||||
<div class="col-md">
|
||||
<div class="subheader mb-3">Tabler</div>
|
||||
<ul class="list-unstyled list-separated gap-2">
|
||||
<li><a class="link-muted" href="/">About</a></li>
|
||||
<li><a class="link-muted" href="/">Blog</a></li>
|
||||
<li><a class="link-muted" href="/">Changelog</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">About</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Blog</a></li>
|
||||
<li><a class="link-secondary" href="{{ site.base }}">Changelog</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="{{ site.githubUrl }}"
|
||||
class="link-muted"
|
||||
class="link-secondary"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>Github</a
|
||||
@@ -64,7 +64,7 @@ plugins: marketing
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 ml-auto">
|
||||
<div class="text-muted">
|
||||
<div class="text-secondary">
|
||||
Tabler comes with tons of well-designed components and features.
|
||||
Start your adventure with Tabler and make your dashboard great
|
||||
again. For free!
|
||||
@@ -132,7 +132,7 @@ plugins: marketing
|
||||
<div class="col-auto">
|
||||
©<a
|
||||
href="https://codecalm.net"
|
||||
class="link-muted"
|
||||
class="link-secondary"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>codecalm.net</a
|
||||
@@ -141,12 +141,12 @@ plugins: marketing
|
||||
<div class="col-auto">
|
||||
<ul class="list-inline list-inline-dots">
|
||||
<li class="list-inline-item">
|
||||
<a class="link-muted" href="/terms-of-service"
|
||||
<a class="link-secondary" href="/terms-of-service"
|
||||
>Terms of service</a
|
||||
>
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a class="link-muted" href="/privacy-policy"
|
||||
<a class="link-secondary" href="/privacy-policy"
|
||||
>Privacy policy</a
|
||||
>
|
||||
</li>
|
||||
|
||||
@@ -26,9 +26,7 @@ page-header: Account Settings
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9 d-flex flex-column">
|
||||
|
||||
{{ content }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +56,7 @@ permalink: emails.html
|
||||
<div class="modal-body p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-6">
|
||||
<div class="p-6 bg-body rounded-start">
|
||||
<div class="p-6 bg-surface-secondary rounded-start">
|
||||
<img src="" class="img-fluid rounded-left" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ permalink: illustrations.html
|
||||
{% assign skinColor = site.skinColors | first %}
|
||||
{% assign color = site.colors | first %}
|
||||
|
||||
<div class="mb-7" style="--tblr-illustrations-primary: {{ color.hex }}; --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
|
||||
<div class="mb-7" style="--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck g-4">
|
||||
@@ -33,10 +33,22 @@ permalink: illustrations.html
|
||||
<div>
|
||||
<div class="form-label">Primary color</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
|
||||
<span class="form-colorinput-color bg-primary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-inverted"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% for color in site.colors %}
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} />
|
||||
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,6 @@ $prefix: "tblr-";
|
||||
|
||||
@import "highlight";
|
||||
|
||||
.card-sponsor {
|
||||
background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;
|
||||
border-color: var(--#{$prefix}primary);
|
||||
min-height: 316px;
|
||||
}
|
||||
|
||||
.dropdown-menu-demo {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 175 KiB After Width: | Height: | Size: 66 KiB |
Reference in New Issue
Block a user