612 lines
15 KiB
JavaScript
612 lines
15 KiB
JavaScript
/*
|
|
Template Name: Quarter
|
|
Description: Real Estate HTML Template
|
|
Version: 1.0.0
|
|
Author: Kamrul Hasan
|
|
Email:786hasankamrul96@gmail.com
|
|
*/
|
|
|
|
|
|
/**************************************************************
|
|
|
|
Start Tailwind Custom Style Indexing
|
|
|
|
|
|___screens
|
|
|
|
|
|___colors
|
|
|
|
|
|___area
|
|
| |___width
|
|
| |___height
|
|
| |___max width
|
|
| |___max height
|
|
|
|
|
|___spacing
|
|
| |___gap
|
|
| |___padding
|
|
| |___margin
|
|
|
|
|
|___typography
|
|
| |___font family
|
|
| |___font size
|
|
| |___line-height
|
|
| |___letter spacing
|
|
|
|
|
|___background
|
|
|
|
|
|___box shadows
|
|
|
|
|
|___gradiants
|
|
|
|
|
|___postion
|
|
|
|
|
|___transform
|
|
| |___tranlate
|
|
|
|
|
|___ border
|
|
| |___width
|
|
| |___radius
|
|
|
|
|
|___animation
|
|
|
|
|
|___components
|
|
| |___containers
|
|
|
|
|
|
***************************************************************/
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ["./quarter/**/*.{html,js}","./quarter-rtl/**/*.{html,js}",],
|
|
theme: {
|
|
screens: {
|
|
// Breakpoint
|
|
xxs: "320px",
|
|
// => @media (min-width: 320px) { ... }
|
|
xs: "480px",
|
|
// => @media (min-width: 320px) { ... }
|
|
sm: "576px",
|
|
// => @media (min-width: 576px) { ... }
|
|
|
|
md: "768px",
|
|
// => @media (min-width: 768px) { ... }
|
|
|
|
lg: "992px",
|
|
// => @media (min-width: 992px) { ... }
|
|
|
|
xl: "1200px",
|
|
// => @media (min-width: 1200px) { ... }
|
|
|
|
"2xl": "1300px",
|
|
// => @media (min-width: 1366px) { ... }
|
|
|
|
"3xl": "1400px",
|
|
// // => @media (min-width: 1600px) { ... }
|
|
"4xl": "1600px",
|
|
// // => @media (min-width: 1600px) { ... }
|
|
|
|
"5xl": "1800px",
|
|
// // => @media (min-width: 1920px) { ... }
|
|
},
|
|
extend: {
|
|
// colors
|
|
colors: {
|
|
black: "#000000",
|
|
"black-2": "#22355B",
|
|
lightBlack: "rgba(0,0,0,.7)",
|
|
white: "#fff",
|
|
"white-2": "#F2F6F7",
|
|
"white-3": "#e8edee",
|
|
"white-4": "#e6ecf0",
|
|
"white-5": "#f0f4f7",
|
|
"white-6": "#f1f1f1",
|
|
"white-7": "#F7F7F7",
|
|
"white-8": "#FAFAFA",
|
|
"white-9": "#F2F7FA",
|
|
"white-10": "#EDEDED",
|
|
red: "#FF0000",
|
|
"red-2": "#f34f3f",
|
|
"red-3": "#DB483B",
|
|
silver: "#C0C0C0",
|
|
gray: "#808080",
|
|
gray1: "#7e7e7e",
|
|
maroon: "#800000",
|
|
yellow: "#FFFF00",
|
|
olive: "#808000",
|
|
lime: "#00FF00",
|
|
green: "#77C720",
|
|
"green-2": "#008000",
|
|
aqua: "#00FFFF",
|
|
teal: "#008080",
|
|
blue: "#0000FF",
|
|
navy: "#000080",
|
|
fuchsia: "#B13BFF",
|
|
purple: "#800080",
|
|
pink: "#FFC0CB",
|
|
nude: "#ebc8b2",
|
|
orange: "#ffa500",
|
|
ratings: "#FFB800",
|
|
/* social media colors */
|
|
facebook: "#365493",
|
|
twitter: "#3CF",
|
|
linkedin: "#0077B5",
|
|
pinterest: "#c8232c",
|
|
dribbble: "#ea4c89",
|
|
behance: "#131418",
|
|
"google-plus": "#dd4b39",
|
|
instagram: "#e4405f",
|
|
vk: "#3b5998",
|
|
wechat: "#7bb32e",
|
|
youtube: "#CB2027",
|
|
email: "#F89A1E",
|
|
"color-1": "#8cb2b2",
|
|
"color-2": "#ACD2D8",
|
|
"color-3": "#A3BCC0",
|
|
"color-4": "#84A2A6",
|
|
"color-5": "#5C727D",
|
|
"color-6": "#F5DFDC",
|
|
"color-7": "#212529",
|
|
"primary-color": "#000000",
|
|
"primary-color-2": "#041113",
|
|
"primary-color-3": "#133236",
|
|
"secondary-color": "#FF5A3C",
|
|
"secondary-color-2": "#cb3421",
|
|
"secondary-color-3": "#fb412a",
|
|
"heading-color": "#071c1f",
|
|
"paragraph-color": "#5C727D",
|
|
"section-bg-1": "#F2F6F7",
|
|
"section-bg-2": "#171B2A",
|
|
"section-bg-5": "#FFF2F0",
|
|
"section-bg-6": "#0B2C3D",
|
|
"section-bg-7": "#282b38",
|
|
"table-bg": "#f7f8fa",
|
|
"border-primary": "#eee",
|
|
"border-color-1": "#e5eaee",
|
|
"border-color-2": "#1e2021",
|
|
"border-color-3": "#5C617F",
|
|
"border-color-4": "#eb6954",
|
|
"border-color-5": "#bc3928",
|
|
"border-color-6": "#103034",
|
|
"border-color-7": "#d1dae0",
|
|
"border-color-8": "#f6f6f6",
|
|
"border-color-9": "#e4ecf2",
|
|
"border-color-10": "#ebeeee",
|
|
"border-color-11": "#ededed",
|
|
"border-color-12": "#e1e6ff",
|
|
"border-color-13": "#f1f8ff",
|
|
"border-color-14": "#576466",
|
|
"border-color-15": "#f4faff",
|
|
"border-color-16": "#93959E",
|
|
"border-color-17": "rgb(222, 226, 230)",
|
|
"border-color-18": "#203336",
|
|
"border-dashed": "#ddd",
|
|
"overlay-primary": "rgba(7, 28, 31)",
|
|
overlay: "rgba(7, 28, 31, 0.6)",
|
|
overlay2: "rgba(7, 28, 31, 0.9)",
|
|
},
|
|
// area
|
|
width: {
|
|
"1px": "1px",
|
|
"10px": "10px",
|
|
"15px": ".9375rem",
|
|
"30px": "1.875rem",
|
|
"42px": "2.625rem",
|
|
"45px": "2.8125rem",
|
|
"50px": "3.125rem",
|
|
"60px": "3.75rem",
|
|
"70px": "4.375rem",
|
|
"78px": "4.875rem",
|
|
"90px": "5.625rem",
|
|
"100px": "6.25rem",
|
|
"114px": "7.125rem",
|
|
"125px": "7.8125rem",
|
|
"130px": "8.125rem",
|
|
"140px": "8.75rem",
|
|
"150px": "9.375rem",
|
|
"190px": "11.875rem",
|
|
50: "12.5rem",
|
|
"250px": "15.625rem",
|
|
dropdown: "14.375rem",
|
|
"300px": "18.75rem",
|
|
100: "25rem",
|
|
"500px": "31.25rem",
|
|
"2000px": "2000px",
|
|
},
|
|
height: {
|
|
"1px": "1px",
|
|
"10px": "10px",
|
|
"30px": "1.875rem",
|
|
"45px": "2.8125rem",
|
|
"50px": "3.125rem",
|
|
"60px": "3.75rem",
|
|
"65px": "4.0625rem",
|
|
"68px": "4.25rem",
|
|
"100px": "6.25rem",
|
|
"140px": "8.75rem",
|
|
50: "12.5rem",
|
|
"350px": "21.875rem",
|
|
"360px": "22.5rem",
|
|
},
|
|
maxWidth: {
|
|
"350px": "21.875rem",
|
|
"450px": "28.125rem",
|
|
"500px": "31.25rem",
|
|
"980px": "61.25rem",
|
|
},
|
|
minHeight: {
|
|
"350px": "21.875rem",
|
|
},
|
|
// spacing
|
|
// gap
|
|
gap: {
|
|
"5px": ".3125rem",
|
|
"10px": "10px",
|
|
"11px": "11px",
|
|
"13px": ".8125rem",
|
|
"15px": ".9375rem",
|
|
"18px": "1.125rem",
|
|
"23px": "1.4375rem",
|
|
"25px": "1.5625rem",
|
|
"30px": "1.875rem",
|
|
"35px": "2.1875rem",
|
|
"37px": "2.3125rem",
|
|
"22px": "1.375rem",
|
|
"50px": "3.125rem",
|
|
15: "3.75rem",
|
|
},
|
|
// padding
|
|
padding: {
|
|
"1px": "1px",
|
|
"3px": "3px",
|
|
"5px": ".3125rem",
|
|
"6px": ".375rem",
|
|
"7px": ".4375rem",
|
|
"9px": ".5625rem",
|
|
"10px": ".625rem",
|
|
"11px": ".6875rem",
|
|
"13px": ".8125rem",
|
|
"14px": ".875rem",
|
|
"15px": ".9375rem",
|
|
"17px": "1.0625rem",
|
|
4.5: "1.125rem",
|
|
"18px": "1.125rem",
|
|
"19px": "1.1875rem",
|
|
"21px": "1.3125rem",
|
|
"22px": "1.375rem",
|
|
"23px": "1.4375rem",
|
|
"25px": "1.5625rem",
|
|
"26px": "1.625rem",
|
|
"30px": "1.875rem",
|
|
"33px": "2.0625rem",
|
|
"35px": "2.1875rem",
|
|
"37px": "2.3125rem",
|
|
"39px": "2.4375rem",
|
|
"43px": "2.6875rem",
|
|
"45px": "2.8125rem",
|
|
"47px": "2.9375rem",
|
|
"55px": "3.4375rem",
|
|
"50px": "3.125rem",
|
|
"60px": "3.75rem",
|
|
"65px": "4.0625rem",
|
|
"70px": "4.375rem",
|
|
"74px": "4.625rem",
|
|
"90px": "5.625rem",
|
|
"100px": "6.25rem",
|
|
"110px": "6.875rem",
|
|
"115px": "7.1875rem",
|
|
"130px": "8.125rem",
|
|
"135px": "8.4375rem",
|
|
"140px": "8.75rem",
|
|
30: "7.5rem",
|
|
35: "8.75rem",
|
|
"145px": "9.0625rem",
|
|
"150px": "9.375rem",
|
|
"154px": "9.625rem",
|
|
"155px": "9.6875rem",
|
|
40.5: "10.125rem",
|
|
"170px": "10.625rem",
|
|
"175px": "10.9375rem",
|
|
"180px": "11.25rem",
|
|
"187px": "11.6875rem",
|
|
50: "12.5rem",
|
|
"205px": "12.8125rem",
|
|
"250px": "15.625rem",
|
|
"300px": "18.75rem",
|
|
},
|
|
// margin
|
|
margin: {
|
|
"5px": ".3125rem",
|
|
"6px": ".375rem",
|
|
"7px": ".4375rem",
|
|
"10px": ".625rem",
|
|
"14px": ".875rem",
|
|
"15px": ".9375rem",
|
|
4.5: "1.125rem",
|
|
"18px": "1.125rem",
|
|
"22px": "1.375rem",
|
|
"25px": "1.5625rem",
|
|
"26px": "1.625rem",
|
|
"27px": "27px",
|
|
"30px": "1.875rem",
|
|
"35px": "2.1875rem",
|
|
"43px": "2.6875rem",
|
|
"45px": "2.8125rem",
|
|
"50px": "3.125rem",
|
|
"55px": "3.4375rem",
|
|
"60px": "3.75rem",
|
|
"65px": "4.0625rem",
|
|
"76px": "4.75rem",
|
|
22: "5.5rem",
|
|
"90px": "5.625rem",
|
|
"95px": "5.9375rem",
|
|
30: "7.5rem",
|
|
"110px": "6.875rem",
|
|
"130px": "8.125rem",
|
|
"150px": "9.375rem",
|
|
"187px": "11.6875rem",
|
|
},
|
|
|
|
// typography
|
|
// font family
|
|
fontFamily: {
|
|
nunito: '"Nunito Sans", sans-serif',
|
|
poppins: '"Poppins", sans-serif',
|
|
fontawesome: "'Font Awesome 5 Free'",
|
|
icomoon: "icomoon",
|
|
},
|
|
// font size
|
|
fontSize: {
|
|
"10px": ".625rem",
|
|
"11px": ".6875rem",
|
|
"12px": ".75rem",
|
|
"13px": ".8125rem",
|
|
"15px": ".9375rem",
|
|
"17px": "1.0625rem",
|
|
"19px": "1.1875rem",
|
|
"21px": "1.3125rem",
|
|
"22px": "1.375rem",
|
|
"23px": "1.4375rem",
|
|
"25px": "1.5625rem",
|
|
"26px": "1.625rem",
|
|
"28px": "1.75rem",
|
|
"32px": "2rem",
|
|
"34px": "2.125rem",
|
|
"35px": "2.1875rem",
|
|
"38px": "2.375rem",
|
|
"40px": "2.5rem",
|
|
"42px": "2.625rem",
|
|
"44px": "2.75rem",
|
|
"45px": "2.8125rem",
|
|
"47px": "2.9375rem",
|
|
"50px": "3.125rem",
|
|
"55px": "3.4375rem",
|
|
"58px": "3.625rem",
|
|
"65px": "4.0625rem",
|
|
"75px": "4.6875rem",
|
|
"80px": "5rem",
|
|
"90px": "5.625rem",
|
|
"100px": "6.25rem",
|
|
"140px": "8.75rem",
|
|
"150px": "9.375rem",
|
|
"200px": "12.5rem",
|
|
"autopx-xl": "calc(1.325rem + .9vw)",
|
|
},
|
|
|
|
// line-height
|
|
lineHeight: {
|
|
1: 1,
|
|
1.2: 1.2,
|
|
1.3: 1.3,
|
|
1.24: 1.24,
|
|
1.25: 1.25,
|
|
1.45: 1.45,
|
|
1.5: 1.5,
|
|
1.67: 1.67,
|
|
1.8: 1.8,
|
|
"14px": ".875rem",
|
|
"25.2px": "1.575rem",
|
|
"28.8px": "1.8rem",
|
|
4.5: "1.125rem",
|
|
"13px": "13px",
|
|
"15px": ".9375rem",
|
|
"19px": "1.1875rem",
|
|
"21px": "1.3125rem",
|
|
"22px": "1.375rem",
|
|
"23px": "1.4375rem",
|
|
"25px": "1.5625rem",
|
|
"26px": "1.625rem",
|
|
"27px": "1.6875rem",
|
|
"29px": "1.8125rem",
|
|
"30px": "1.875rem",
|
|
"34px": "2.125rem",
|
|
"35px": "2.1875rem",
|
|
"38px": "2.375rem",
|
|
"37px": "2.3125rem",
|
|
10.5: "2.625rem",
|
|
"41px": "41px",
|
|
11: "2.75rem",
|
|
"42px": "2.625rem",
|
|
"43px": "2.6875rem",
|
|
"45px": "2.8125rem",
|
|
"46px": "46px",
|
|
12: "3rem",
|
|
"50px": "3.125rem",
|
|
"52px": "3.25rem",
|
|
"55px": "3.4375rem",
|
|
"60px": "3.75rem",
|
|
"65px": "4.0625rem",
|
|
"69.44px": "69.44px",
|
|
"70px": "4.375rem",
|
|
xl: "3.875rem",
|
|
"2xl": "3.375rem",
|
|
13.5: "3.375rem",
|
|
14: "3.5rem",
|
|
14.5: "3.625rem",
|
|
15: "3.75rem",
|
|
16: "4rem",
|
|
18: "4.5rem",
|
|
"78px": "4.875rem",
|
|
"90px": "5.625rem",
|
|
20: "5rem",
|
|
"110px": "6.875rem",
|
|
24: "6rem",
|
|
},
|
|
// letter spacing
|
|
letterSpacing: {
|
|
"5px": "5px",
|
|
half: ".5px",
|
|
},
|
|
borderWidth: {
|
|
"3px": "3px",
|
|
},
|
|
borderRadius: {
|
|
"100%": "100%",
|
|
"10px": ".625rem",
|
|
},
|
|
|
|
// box shadows
|
|
boxShadow: {
|
|
"box-shadow-1": "0 16px 32px 0 rgba(7, 28, 31, 0.1)",
|
|
"box-shadow-2": "0 0 4px rgba(0, 0, 0, 0.1)",
|
|
"box-shadow-3": "0 1px 6px 0 rgba(32, 33, 36, .28)",
|
|
"box-shadow-4": "0 5px 20px 0 rgba(23, 44, 82, 0.1)",
|
|
"box-shadow-5": "0 8px 16px 0 rgba(93, 93, 93, 0.1)",
|
|
"box-shadow-6": "0 0 25px 2px rgba(93, 93, 93, 0.2)",
|
|
"box-shadow-7": "0 0 10px 0px rgba(93, 93, 93, 0.2)",
|
|
},
|
|
// gradiants
|
|
backgroundImage: {
|
|
"gradient-color-1":
|
|
"linear-gradient(90deg, rgba(242,139,194,1) 0%, rgba(216,177,242,1) 50%)",
|
|
"gradient-color-2":
|
|
"linear-gradient(to top, rgba(7,28,31,0) 0%, rgba(7,28,31,1) 90%)",
|
|
"gradient-color-3":
|
|
"linear-gradient(to bottom, rgba(7,28,31,0) 0%, rgba(7,28,31,1) 90%)",
|
|
"gradient-color-4":
|
|
"linear-gradient(to top, rgba(242,246,247,0) 0%, rgba(242,246,247,1) 90%)",
|
|
"gradient-color-5":
|
|
"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 70%)",
|
|
},
|
|
// postion
|
|
zIndex: {
|
|
"-1": "-1",
|
|
1: "1",
|
|
xxsmall: "9999",
|
|
xsmall: "99999",
|
|
small: "999999",
|
|
medium: "9999999",
|
|
high: "99999999",
|
|
xl: "999999999",
|
|
xxl: "9999999999",
|
|
},
|
|
// transform
|
|
// tranlate
|
|
translate: {
|
|
"5px": "5px",
|
|
"50px": "3.125rem",
|
|
"30px": "1.875rem",
|
|
},
|
|
//animation
|
|
keyframes: {
|
|
pulse1: {
|
|
"0%": {
|
|
"box-shadow": "0 0 0 0 rgba(255,255,255, 0.6)",
|
|
},
|
|
"70%": {
|
|
"box-shadow": "0 0 0 15px rgba(255,255,255, 0)",
|
|
},
|
|
"100%": {
|
|
"box-shadow": "0 0 0 0 rgba(255,255,255, 0)",
|
|
},
|
|
},
|
|
|
|
pulse2: {
|
|
"0%": {
|
|
"box-shadow": "0 0 0 0 rgba(255, 90, 60, 0.6)",
|
|
},
|
|
"70%": {
|
|
"box-shadow": "0 0 0 15px rgba(255, 90, 60, 0)",
|
|
},
|
|
"100%": {
|
|
"box-shadow": "0 0 0 0 rgba(255, 90, 60, 0)",
|
|
},
|
|
},
|
|
},
|
|
animation: {
|
|
pulse1: "pulse1 1s infinite",
|
|
pulse2: "pulse2 1s infinite",
|
|
},
|
|
},
|
|
},
|
|
// components
|
|
corePlugins: {
|
|
container: false,
|
|
},
|
|
plugins: [
|
|
// containers
|
|
function ({ addComponents }) {
|
|
addComponents({
|
|
".container": {
|
|
maxWidth: "100%",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
margin: "0px auto",
|
|
|
|
"@screen sm": {
|
|
maxWidth: "33.75rem",
|
|
},
|
|
"@screen md": {
|
|
maxWidth: "45rem",
|
|
},
|
|
"@screen lg": {
|
|
maxWidth: "60rem",
|
|
},
|
|
"@screen xl": {
|
|
maxWidth: "75rem",
|
|
},
|
|
// "@screen 2xl": {
|
|
// maxWidth: "75rem",
|
|
// },
|
|
},
|
|
});
|
|
addComponents({
|
|
".container-2": {
|
|
maxWidth: "100%",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
margin: "0 auto",
|
|
|
|
"@screen md": {
|
|
maxWidth: "45rem",
|
|
},
|
|
"@screen lg": {
|
|
maxWidth: "60rem",
|
|
},
|
|
"@screen xl": {
|
|
maxWidth: "75rem",
|
|
},
|
|
// "@screen 2xl": {
|
|
// maxWidth: "75rem",
|
|
// },
|
|
},
|
|
});
|
|
addComponents({
|
|
".container-3": {
|
|
maxWidth: "100%",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
|
|
"@screen 3xl": {
|
|
paddingLeft: "2%",
|
|
paddingRight: "2%",
|
|
},
|
|
"@screen 4xl": {
|
|
paddingLeft: "7%",
|
|
paddingRight: "7%",
|
|
},
|
|
},
|
|
});
|
|
},
|
|
],
|
|
};
|