next-material-kit
Version:
NextJS Version of Material Kit React by Creative Tim (https://creative-tim.com)
386 lines (383 loc) • 9.8 kB
JavaScript
import {
hexToRGBAlpha,
grayColor,
roseColor,
primaryColor,
infoColor,
successColor,
warningColor,
dangerColor,
} from "styles/jss/nextjs-material-kit.js";
const buttonStyle = {
button: {
minHeight: "auto",
minWidth: "auto",
backgroundColor: grayColor,
color: "#FFFFFF",
boxShadow:
"0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)",
border: "none",
borderRadius: "3px",
position: "relative",
padding: "12px 30px",
margin: ".3125rem 1px",
fontSize: "12px",
fontWeight: "400",
textTransform: "uppercase",
letterSpacing: "0",
willChange: "box-shadow, transform",
transition:
"box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
lineHeight: "1.42857143",
textAlign: "center",
whiteSpace: "nowrap",
verticalAlign: "middle",
touchAction: "manipulation",
cursor: "pointer",
"&:hover,&:focus": {
color: "#FFFFFF",
backgroundColor: grayColor,
boxShadow:
"0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)",
},
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
position: "relative",
display: "inline-block",
top: "0",
fontSize: "1.1rem",
marginRight: "4px",
verticalAlign: "middle",
},
"& svg": {
position: "relative",
display: "inline-block",
top: "0",
width: "18px",
height: "18px",
marginRight: "4px",
verticalAlign: "middle",
},
"&$justIcon": {
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
marginRight: "0px",
position: "absolute",
width: "100%",
transform: "none",
left: "0px",
top: "0px",
height: "100%",
lineHeight: "41px",
fontSize: "20px",
},
},
},
fullWidth: {
width: "100%",
},
primary: {
backgroundColor: primaryColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
primaryColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
primaryColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: primaryColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
primaryColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
primaryColor,
0.2
)}`,
},
},
info: {
backgroundColor: infoColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
infoColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
infoColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(infoColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: infoColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
infoColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
infoColor,
0.2
)}`,
},
},
success: {
backgroundColor: successColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
successColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
successColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: successColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
successColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
successColor,
0.2
)}`,
},
},
warning: {
backgroundColor: warningColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
warningColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
warningColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(warningColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: warningColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
warningColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
warningColor,
0.2
)}`,
},
},
danger: {
backgroundColor: dangerColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
dangerColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
dangerColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(dangerColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: dangerColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
dangerColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
dangerColor,
0.2
)}`,
},
},
rose: {
backgroundColor: roseColor,
boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
primaryColor,
0.14
)}, 0 3px 1px -2px ${hexToRGBAlpha(
primaryColor,
0.2
)}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
"&:hover,&:focus": {
backgroundColor: roseColor,
boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
primaryColor,
0.42
)}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
primaryColor,
0.2
)}`,
},
},
white: {
"&,&:focus,&:hover,&:visited": {
backgroundColor: "#FFFFFF",
color: grayColor,
},
},
twitter: {
backgroundColor: "#55acee",
color: "#fff",
boxShadow:
"0 2px 2px 0 rgba(85, 172, 238, 0.14), 0 3px 1px -2px rgba(85, 172, 238, 0.2), 0 1px 5px 0 rgba(85, 172, 238, 0.12)",
"&:hover,&:focus,&:visited": {
backgroundColor: "#55acee",
color: "#fff",
boxShadow:
"0 14px 26px -12px rgba(85, 172, 238, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(85, 172, 238, 0.2)",
},
},
facebook: {
backgroundColor: "#3b5998",
color: "#fff",
boxShadow:
"0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12)",
"&:hover,&:focus": {
backgroundColor: "#3b5998",
color: "#fff",
boxShadow:
"0 14px 26px -12px rgba(59, 89, 152, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(59, 89, 152, 0.2)",
},
},
google: {
backgroundColor: "#dd4b39",
color: "#fff",
boxShadow:
"0 2px 2px 0 rgba(221, 75, 57, 0.14), 0 3px 1px -2px rgba(221, 75, 57, 0.2), 0 1px 5px 0 rgba(221, 75, 57, 0.12)",
"&:hover,&:focus": {
backgroundColor: "#dd4b39",
color: "#fff",
boxShadow:
"0 14px 26px -12px rgba(221, 75, 57, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(221, 75, 57, 0.2)",
},
},
github: {
backgroundColor: "#333333",
color: "#fff",
boxShadow:
"0 2px 2px 0 rgba(51, 51, 51, 0.14), 0 3px 1px -2px rgba(51, 51, 51, 0.2), 0 1px 5px 0 rgba(51, 51, 51, 0.12)",
"&:hover,&:focus": {
backgroundColor: "#333333",
color: "#fff",
boxShadow:
"0 14px 26px -12px rgba(51, 51, 51, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(51, 51, 51, 0.2)",
},
},
simple: {
"&,&:focus,&:hover,&:visited": {
color: "#FFFFFF",
background: "transparent",
boxShadow: "none",
},
"&$primary": {
"&,&:focus,&:hover,&:visited": {
color: primaryColor,
},
},
"&$info": {
"&,&:focus,&:hover,&:visited": {
color: infoColor,
},
},
"&$success": {
"&,&:focus,&:hover,&:visited": {
color: successColor,
},
},
"&$warning": {
"&,&:focus,&:hover,&:visited": {
color: warningColor,
},
},
"&$rose": {
"&,&:focus,&:hover,&:visited": {
color: roseColor,
},
},
"&$danger": {
"&,&:focus,&:hover,&:visited": {
color: dangerColor,
},
},
"&$twitter": {
"&,&:focus,&:hover,&:visited": {
color: "#55acee",
},
},
"&$facebook": {
"&,&:focus,&:hover,&:visited": {
color: "#3b5998",
},
},
"&$google": {
"&,&:focus,&:hover,&:visited": {
color: "#dd4b39",
},
},
"&$github": {
"&,&:focus,&:hover,&:visited": {
color: "#333333",
},
},
},
transparent: {
"&,&:focus,&:hover,&:visited": {
color: "inherit",
background: "transparent",
boxShadow: "none",
},
},
disabled: {
opacity: "0.65",
pointerEvents: "none",
},
lg: {
padding: "1.125rem 2.25rem",
fontSize: "0.875rem",
lineHeight: "1.333333",
borderRadius: "0.2rem",
},
sm: {
padding: "0.40625rem 1.25rem",
fontSize: "0.6875rem",
lineHeight: "1.5",
borderRadius: "0.2rem",
},
round: {
borderRadius: "30px",
},
block: {
width: "100% !important",
},
link: {
"&,&:hover,&:focus": {
backgroundColor: "transparent",
color: "#999999",
boxShadow: "none",
},
},
justIcon: {
paddingLeft: "12px",
paddingRight: "12px",
fontSize: "20px",
height: "41px",
minWidth: "41px",
width: "41px",
"& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": {
marginRight: "0px",
},
"&$lg": {
height: "57px",
minWidth: "57px",
width: "57px",
lineHeight: "56px",
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
fontSize: "32px",
lineHeight: "56px",
},
"& svg": {
width: "32px",
height: "32px",
},
},
"&$sm": {
height: "30px",
minWidth: "30px",
width: "30px",
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
fontSize: "17px",
lineHeight: "29px",
},
"& svg": {
width: "17px",
height: "17px",
},
},
},
};
export default buttonStyle;