@ddsys/material/lib/styles/tab.js

<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (theme) {
  var colors = theme.colors,
      variables = theme.variables;
  var fonts = variables.fonts,
      tab = variables.tab;


  return {
    style: {
      display: "flex",
      flexWrap: "wrap",
      paddingLeft: "0",
      marginBottom: "0",
      listStyle: "none",
      borderBottom: "1px solid " + (0, _color2.default)(colors.gray_900).alpha(0.2).string()
    },
    label: { fontSize: fonts.size.normal + "rem" },
    indicator: {
      backgroundColor: colors.primary,
      height: tab.indicatorHeight
    },
    tabRoot: {
      textTransform: "initial",
      minWidth: 72,
      fontFamily: fonts.family,
      fontWeight: fonts.weight.bold,
      borderBottomWidth: tab.indicatorHeight + "px",
      borderBottomStyle: "solid",
      borderBottomColor: "transparent",
      "&:hover": {
        borderColor: (0, _color2.default)(colors.gray_900).alpha(0.2).string()
      },
      "&:focus": {
        outline: "none"
      }
    }
  };
};

var _color = require("color");

var _color2 = _interopRequireDefault(_color);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }