vcc-ui/es/components/tab-nav/styles.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { COLORS } from "../../";
import { BREAKPOINTS } from "../../constants/breakpoints";
export default {
  nav: function nav(theme, reverseOut, textAlign) {
    return _objectSpread({
      position: "relative",
      display: "flex",
      justifyContent: textAlign === "center" ? "center" : "flex-start",
      zIndex: 10,
      width: "100%",
      background: reverseOut ? COLORS.almostBlack : COLORS.grey,
      boxSizing: "border-box",
      height: "55px",
      ":before": {
        content: "''",
        display: "block",
        background: reverseOut ? COLORS.almostBlack : "#dddddd",
        height: "1px",
        outline: "none",
        position: "absolute",
        left: "0",
        right: "0",
        zIndex: -1,
        bottom: "0px"
      }
    }, theme.nav);
  },
  backButton: function backButton(reverseOut) {
    var _ref;

    var showBackButtonOn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
    return _ref = {
      fontSize: "15px",
      padding: "17px 20px",
      fontFamily: "Volvo Novum Light, sans-serif",
      whiteSpace: "nowrap",
      flexShrink: "0",
      color: reverseOut ? COLORS.white : COLORS.almostBlack,
      display: showBackButtonOn.some(function (size) {
        return size === "s";
      }) ? "inline" : "none",
      "> svg": {
        marginRight: "8px"
      },
      ":hover > svg": {
        transform: "translateX(-5px)"
      }
    }, _defineProperty(_ref, BREAKPOINTS.onM, {
      display: showBackButtonOn.some(function (size) {
        return size === "m";
      }) ? "inline" : "none"
    }), _defineProperty(_ref, BREAKPOINTS.onL, {
      display: showBackButtonOn.some(function (size) {
        return size === "l";
      }) ? "inline" : "none"
    }), _ref;
  },
  backButtonText: _defineProperty({}, BREAKPOINTS.onS, {
    display: "none"
  }),
  navItemGroup: function navItemGroup(textAlign, isScrolling) {
    return {
      display: "flex",
      justifyContent: textAlign === "center" && !isScrolling ? "center" : "flex-start",
      overflowX: "auto",
      WebkitOverflowScrolling: "touch",
      position: "relative",
      overflowY: "hidden",
      whiteSpace: "nowrap",
      flexGrow: "0",
      height: "70px",
      padding: "0 0 40px 0px",
      boxSizing: "border-box"
    };
  },
  navItemGroupInner: function navItemGroupInner(showBackButton) {
    return {
      padding: "0 20px 0 ".concat(showBackButton ? 0 : 20, "px")
    };
  },
  centeredLayoutLeft: {
    flexGrow: "1",
    flexShrink: "1",
    flexBasis: "0%",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start"
  },
  centeredLayoutLeftInner: {
    marginRight: "auto",
    display: "flex",
    height: "100%"
  },
  centeredLayoutRight: {
    flexGrow: "1",
    flexShrink: "1",
    flexBasis: "0%",
    display: "flex",
    alignItems: "right"
  },
  centeredLayoutRightInner: {
    marginLeft: "auto"
  },
  centeredLayoutCenter: {
    display: "flex",
    whiteSpace: "noWrap"
  },
  centeredLayoutCenterInner: {
    overflowX: "auto",
    WebkitOverflowScrolling: "touch",
    overflowY: "hidden"
  }
};