yusmar
/
tbg-ecomm-nextjs
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 提交
1 分支
204 MiB
 
 
目錄樹: a74e3f9132
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 'a74e3f9132'
${ noResults }
tbg-ecomm-nextjs/assets/jss/nextjs-material-kit/components/buttonStyle.js

386 line
9.5 KiB
原始文件 Blame 歷史記錄 

  1. import {

  2.   hexToRGBAlpha,

  3.   grayColor,

  4.   roseColor,

  5.   primaryColor,

  6.   infoColor,

  7.   successColor,

  8.   warningColor,

  9.   dangerColor

  10. } from "assets/jss/nextjs-material-kit.js";

  11. 

  12. const buttonStyle = {

  13.   button: {

  14.     minHeight: "auto",

  15.     minWidth: "auto",

  16.     backgroundColor: grayColor,

  17.     color: "#FFFFFF",

  18.     boxShadow:

  19.       "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)",

  20.     border: "none",

  21.     borderRadius: "3px",

  22.     position: "relative",

  23.     padding: "12px 30px",

  24.     margin: ".3125rem 1px",

  25.     fontSize: "12px",

  26.     fontWeight: "400",

  27.     textTransform: "uppercase",

  28.     letterSpacing: "0",

  29.     willChange: "box-shadow, transform",

  30.     transition:

  31.       "box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)",

  32.     lineHeight: "1.42857143",

  33.     textAlign: "center",

  34.     whiteSpace: "nowrap",

  35.     verticalAlign: "middle",

  36.     touchAction: "manipulation",

  37.     cursor: "pointer",

  38.     "&:hover,&:focus": {

  39.       color: "#FFFFFF",

  40.       backgroundColor: grayColor,

  41.       boxShadow:

  42.         "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)"

  43.     },

  44.     "& .fab,& .fas,& .far,& .fal,& .material-icons": {

  45.       position: "relative",

  46.       display: "inline-block",

  47.       top: "0",

  48.       fontSize: "1.1rem",

  49.       marginRight: "4px",

  50.       verticalAlign: "middle"

  51.     },

  52.     "& svg": {

  53.       position: "relative",

  54.       display: "inline-block",

  55.       top: "0",

  56.       width: "18px",

  57.       height: "18px",

  58.       marginRight: "4px",

  59.       verticalAlign: "middle"

  60.     },

  61.     "&$justIcon": {

  62.       "& .fab,& .fas,& .far,& .fal,& .material-icons": {

  63.         marginRight: "0px",

  64.         position: "absolute",

  65.         width: "100%",

  66.         transform: "none",

  67.         left: "0px",

  68.         top: "0px",

  69.         height: "100%",

  70.         lineHeight: "41px",

  71.         fontSize: "20px"

  72.       }

  73.     }

  74.   },

  75.   fullWidth: {

  76.     width: "100%"

  77.   },

  78.   primary: {

  79.     backgroundColor: primaryColor,

  80.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  81.       primaryColor,

  82.       0.14

  83.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  84.       primaryColor,

  85.       0.2

  86.     )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,

  87.     "&:hover,&:focus": {

  88.       backgroundColor: primaryColor,

  89.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  90.         primaryColor,

  91.         0.42

  92.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  93.         primaryColor,

  94.         0.2

  95.       )}`

  96.     }

  97.   },

  98.   info: {

  99.     backgroundColor: infoColor,

  100.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  101.       infoColor,

  102.       0.14

  103.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  104.       infoColor,

  105.       0.2

  106.     )}, 0 1px 5px 0 ${hexToRGBAlpha(infoColor, 0.12)}`,

  107.     "&:hover,&:focus": {

  108.       backgroundColor: infoColor,

  109.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  110.         infoColor,

  111.         0.42

  112.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  113.         infoColor,

  114.         0.2

  115.       )}`

  116.     }

  117.   },

  118.   success: {

  119.     backgroundColor: successColor,

  120.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  121.       successColor,

  122.       0.14

  123.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  124.       successColor,

  125.       0.2

  126.     )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`,

  127.     "&:hover,&:focus": {

  128.       backgroundColor: successColor,

  129.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  130.         successColor,

  131.         0.42

  132.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  133.         successColor,

  134.         0.2

  135.       )}`

  136.     }

  137.   },

  138.   warning: {

  139.     backgroundColor: warningColor,

  140.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  141.       warningColor,

  142.       0.14

  143.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  144.       warningColor,

  145.       0.2

  146.     )}, 0 1px 5px 0 ${hexToRGBAlpha(warningColor, 0.12)}`,

  147.     "&:hover,&:focus": {

  148.       backgroundColor: warningColor,

  149.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  150.         warningColor,

  151.         0.42

  152.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  153.         warningColor,

  154.         0.2

  155.       )}`

  156.     }

  157.   },

  158.   danger: {

  159.     backgroundColor: dangerColor,

  160.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  161.       dangerColor,

  162.       0.14

  163.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  164.       dangerColor,

  165.       0.2

  166.     )}, 0 1px 5px 0 ${hexToRGBAlpha(dangerColor, 0.12)}`,

  167.     "&:hover,&:focus": {

  168.       backgroundColor: dangerColor,

  169.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  170.         dangerColor,

  171.         0.42

  172.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  173.         dangerColor,

  174.         0.2

  175.       )}`

  176.     }

  177.   },

  178.   rose: {

  179.     backgroundColor: roseColor,

  180.     boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(

  181.       primaryColor,

  182.       0.14

  183.     )}, 0 3px 1px -2px ${hexToRGBAlpha(

  184.       primaryColor,

  185.       0.2

  186.     )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,

  187.     "&:hover,&:focus": {

  188.       backgroundColor: roseColor,

  189.       boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(

  190.         primaryColor,

  191.         0.42

  192.       )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(

  193.         primaryColor,

  194.         0.2

  195.       )}`

  196.     }

  197.   },

  198.   white: {

  199.     "&,&:focus,&:hover,&:visited": {

  200.       backgroundColor: "#FFFFFF",

  201.       color: grayColor

  202.     }

  203.   },

  204.   twitter: {

  205.     backgroundColor: "#55acee",

  206.     color: "#fff",

  207.     boxShadow:

  208.       "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)",

  209.     "&:hover,&:focus,&:visited": {

  210.       backgroundColor: "#55acee",

  211.       color: "#fff",

  212.       boxShadow:

  213.         "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)"

  214.     }

  215.   },

  216.   facebook: {

  217.     backgroundColor: "#3b5998",

  218.     color: "#fff",

  219.     boxShadow:

  220.       "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)",

  221.     "&:hover,&:focus": {

  222.       backgroundColor: "#3b5998",

  223.       color: "#fff",

  224.       boxShadow:

  225.         "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)"

  226.     }

  227.   },

  228.   google: {

  229.     backgroundColor: "#dd4b39",

  230.     color: "#fff",

  231.     boxShadow:

  232.       "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)",

  233.     "&:hover,&:focus": {

  234.       backgroundColor: "#dd4b39",

  235.       color: "#fff",

  236.       boxShadow:

  237.         "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)"

  238.     }

  239.   },

  240.   github: {

  241.     backgroundColor: "#333333",

  242.     color: "#fff",

  243.     boxShadow:

  244.       "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)",

  245.     "&:hover,&:focus": {

  246.       backgroundColor: "#333333",

  247.       color: "#fff",

  248.       boxShadow:

  249.         "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)"

  250.     }

  251.   },

  252.   simple: {

  253.     "&,&:focus,&:hover,&:visited": {

  254.       color: "#FFFFFF",

  255.       background: "transparent",

  256.       boxShadow: "none"

  257.     },

  258.     "&$primary": {

  259.       "&,&:focus,&:hover,&:visited": {

  260.         color: primaryColor

  261.       }

  262.     },

  263.     "&$info": {

  264.       "&,&:focus,&:hover,&:visited": {

  265.         color: infoColor

  266.       }

  267.     },

  268.     "&$success": {

  269.       "&,&:focus,&:hover,&:visited": {

  270.         color: successColor

  271.       }

  272.     },

  273.     "&$warning": {

  274.       "&,&:focus,&:hover,&:visited": {

  275.         color: warningColor

  276.       }

  277.     },

  278.     "&$rose": {

  279.       "&,&:focus,&:hover,&:visited": {

  280.         color: roseColor

  281.       }

  282.     },

  283.     "&$danger": {

  284.       "&,&:focus,&:hover,&:visited": {

  285.         color: dangerColor

  286.       }

  287.     },

  288.     "&$twitter": {

  289.       "&,&:focus,&:hover,&:visited": {

  290.         color: "#55acee"

  291.       }

  292.     },

  293.     "&$facebook": {

  294.       "&,&:focus,&:hover,&:visited": {

  295.         color: "#3b5998"

  296.       }

  297.     },

  298.     "&$google": {

  299.       "&,&:focus,&:hover,&:visited": {

  300.         color: "#dd4b39"

  301.       }

  302.     },

  303.     "&$github": {

  304.       "&,&:focus,&:hover,&:visited": {

  305.         color: "#333333"

  306.       }

  307.     }

  308.   },

  309.   transparent: {

  310.     "&,&:focus,&:hover,&:visited": {

  311.       color: "inherit",

  312.       background: "transparent",

  313.       boxShadow: "none"

  314.     }

  315.   },

  316.   disabled: {

  317.     opacity: "0.65",

  318.     pointerEvents: "none"

  319.   },

  320.   lg: {

  321.     padding: "1.125rem 2.25rem",

  322.     fontSize: "0.875rem",

  323.     lineHeight: "1.333333",

  324.     borderRadius: "0.2rem"

  325.   },

  326.   sm: {

  327.     padding: "0.40625rem 1.25rem",

  328.     fontSize: "0.6875rem",

  329.     lineHeight: "1.5",

  330.     borderRadius: "0.2rem"

  331.   },

  332.   round: {

  333.     borderRadius: "30px"

  334.   },

  335.   block: {

  336.     width: "100% !important"

  337.   },

  338.   link: {

  339.     "&,&:hover,&:focus": {

  340.       backgroundColor: "transparent",

  341.       color: "#999999",

  342.       boxShadow: "none"

  343.     }

  344.   },

  345.   justIcon: {

  346.     paddingLeft: "12px",

  347.     paddingRight: "12px",

  348.     fontSize: "20px",

  349.     height: "41px",

  350.     minWidth: "41px",

  351.     width: "41px",

  352.     "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": {

  353.       marginRight: "0px"

  354.     },

  355.     "&$lg": {

  356.       height: "57px",

  357.       minWidth: "57px",

  358.       width: "57px",

  359.       lineHeight: "56px",

  360.       "& .fab,& .fas,& .far,& .fal,& .material-icons": {

  361.         fontSize: "32px",

  362.         lineHeight: "56px"

  363.       },

  364.       "& svg": {

  365.         width: "32px",

  366.         height: "32px"

  367.       }

  368.     },

  369.     "&$sm": {

  370.       height: "30px",

  371.       minWidth: "30px",

  372.       width: "30px",

  373.       "& .fab,& .fas,& .far,& .fal,& .material-icons": {

  374.         fontSize: "17px",

  375.         lineHeight: "29px"

  376.       },

  377.       "& svg": {

  378.         width: "17px",

  379.         height: "17px"

  380.       }

  381.     }

  382.   }

  383. };

  384. 

  385. export default buttonStyle;