vcc-ui/lib/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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; }

var _default = {
  nav: function nav(_ref) {
    var _ref$theme = _ref.theme,
        _ref$theme$colors = _ref$theme.colors,
        grey1 = _ref$theme$colors.grey1,
        grey8 = _ref$theme$colors.grey8,
        grey6 = _ref$theme$colors.grey6,
        _nav = _ref$theme.nav,
        reverseOut = _ref.reverseOut,
        textAlign = _ref.textAlign;
    return _objectSpread({
      position: "relative",
      display: "flex",
      justifyContent: textAlign === "center" ? "center" : "flex-start",
      zIndex: 10,
      width: "100%",
      background: reverseOut ? grey1 : grey8,
      boxSizing: "border-box",
      height: 55,
      ":before": {
        content: "''",
        display: "block",
        background: reverseOut ? grey1 : grey6,
        height: 1,
        outline: "none",
        position: "absolute",
        left: 0,
        right: 0,
        zIndex: -1,
        bottom: 0
      }
    }, _nav);
  },
  backButton: function backButton(_ref2) {
    var _ref3;

    var _ref2$theme = _ref2.theme,
        breakpoints = _ref2$theme.breakpoints,
        _ref2$theme$colors = _ref2$theme.colors,
        grey1 = _ref2$theme$colors.grey1,
        white = _ref2$theme$colors.white,
        reverseOut = _ref2.reverseOut,
        _ref2$showBackButtonO = _ref2.showBackButtonOn,
        showBackButtonOn = _ref2$showBackButtonO === void 0 ? [] : _ref2$showBackButtonO;
    return _ref3 = {
      fontSize: 15,
      padding: "17px 20px",
      fontWeight: 200,
      whiteSpace: "nowrap",
      flexShrink: "0",
      color: reverseOut ? white : grey1,
      display: showBackButtonOn.some(function (size) {
        return size === "s";
      }) ? "inline" : "none",
      "> svg": {
        marginRight: 8
      },
      ":hover > svg": {
        transform: "translateX(-5px)"
      }
    }, _defineProperty(_ref3, breakpoints.onlyM, {
      display: showBackButtonOn.some(function (size) {
        return size === "m";
      }) ? "inline" : "none"
    }), _defineProperty(_ref3, breakpoints.fromL, {
      display: showBackButtonOn.some(function (size) {
        return size === "l";
      }) ? "inline" : "none"
    }), _ref3;
  },
  backButtonText: function backButtonText(_ref4) {
    var breakpoints = _ref4.theme.breakpoints;
    return _defineProperty({}, breakpoints.onlyS, {
      display: "none"
    });
  },
  navItemGroup: function navItemGroup(_ref6) {
    var textAlign = _ref6.textAlign,
        isScrolling = _ref6.isScrolling;
    return {
      display: "flex",
      justifyContent: textAlign === "center" && !isScrolling ? "center" : "flex-start",
      overflowX: "auto",
      WebkitOverflowScrolling: "touch",
      position: "relative",
      overflowY: "hidden",
      whiteSpace: "nowrap",
      flexGrow: 0,
      height: "100%",
      padding: "0 0 40px 0px",
      boxSizing: "border-box"
    };
  },
  navItemGroupInner: function navItemGroupInner(_ref7) {
    var showBackButton = _ref7.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"
  },
  centeredLayoutRightInner: {
    marginLeft: "auto"
  },
  centeredLayoutCenter: {
    display: "flex",
    whiteSpace: "noWrap"
  },
  centeredLayoutCenterInner: {
    overflowX: "auto",
    WebkitOverflowScrolling: "touch",
    overflowY: "hidden"
  }
};
exports.default = _default;