|
- import {
- hexToRGBAlpha,
- roseColor,
- primaryColor,
- infoColor,
- successColor,
- warningColor,
- dangerColor
- } from "assets/jss/nextjs-material-kit.js";
-
- const navPillsStyle = theme => ({
- root: {
- marginTop: "20px",
- paddingLeft: "0",
- marginBottom: "0",
- overflow: "visible !important",
- lineHeight: "24px",
- textTransform: "uppercase",
- fontSize: "12px",
- fontWeight: "500",
- position: "relative",
- display: "block",
- color: "inherit"
- },
- flexContainer: {
- [theme.breakpoints.down("xs")]: {
- display: "flex",
- flexWrap: "wrap"
- }
- },
- displayNone: {
- display: "none !important"
- },
- fixed: {
- overflow: "visible !important"
- },
- horizontalDisplay: {
- display: "block"
- },
- pills: {
- float: "left",
- position: "relative",
- display: "block",
- borderRadius: "30px",
- minWidth: "100px",
- textAlign: "center",
- transition: "all .3s",
- padding: "10px 15px",
- color: "#555555",
- height: "auto",
- opacity: "1",
- maxWidth: "100%",
- margin: "0 5px"
- },
- pillsWithIcons: {
- borderRadius: "4px"
- },
- tabIcon: {
- width: "30px",
- height: "30px",
- display: "block",
- margin: "15px 0 !important",
- "&, & *": {
- letterSpacing: "normal !important"
- }
- },
- horizontalPills: {
- width: "100%",
- float: "none !important",
- "& + button": {
- margin: "10px 0"
- }
- },
- contentWrapper: {
- marginTop: "20px"
- },
- primary: {
- "&,&:hover": {
- color: "#FFFFFF",
- backgroundColor: infoColor,
- boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
- primaryColor,
- 0.4
- )}`
- }
- },
- info: {
- "&,&:hover": {
- color: "#FFFFFF",
- backgroundColor: infoColor,
- boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
- infoColor,
- 0.4
- )}`
- }
- },
- success: {
- "&,&:hover": {
- color: "#FFFFFF",
- 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)}`
- }
- },
- warning: {
- "&,&:hover": {
- color: "#FFFFFF",
- backgroundColor: warningColor,
- boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
- warningColor,
- 0.4
- )}`
- }
- },
- danger: {
- "&,&:hover": {
- color: "#FFFFFF",
- backgroundColor: dangerColor,
- boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
- dangerColor,
- 0.4
- )}`
- }
- },
- rose: {
- "&,&:hover": {
- color: "#FFFFFF",
- backgroundColor: roseColor,
- boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
- roseColor,
- 0.4
- )}`
- }
- },
- alignCenter: {
- alignItems: "center",
- justifyContent: "center"
- },
- tabWrapper: {
- color: "inherit",
- position: "relative",
- fontSize: "12px",
- lineHeight: "24px",
- fontWeight: "500",
- textTransform: "uppercase",
- "&,& *": {
- letterSpacing: "normal"
- }
- }
- });
-
- export default navPillsStyle;
|