ultra-design/lib/tabs/tabs-styles.js

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject, _templateObject2;
var tabsStyles = function tabsStyles(props) {
  var theme = props.theme;
  var _theme$style = theme.style,
      primaryColor = _theme$style.primaryColor,
      radius = _theme$style.radius;
  var _props$theme$props$th = props.theme[props.theme.mode],
      borderColor = _props$theme$props$th.borderColor,
      disabledTextColor = _props$theme$props$th.disabledTextColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    color: ", ";\n    border-radius: ", "px;\n    border: 1px solid ", ";\n    padding: 16px;\n    overflow: hidden;\n    .ultra-tabs-header {\n      padding: 0 10px;\n      display: flex;\n      border-bottom: 1px solid ", ";\n      overflow-x: auto;\n      overflow-y: hidden;\n      &-item {\n        padding: 14px 18px;\n        cursor: pointer;\n        position: relative;\n        display: inline-flex;\n        white-space: nowrap;\n        transition: color 0.3s;\n        &__icon {\n          margin-right: 8px;\n          display: inline-flex;\n          align-items: center;\n        }\n\n        &:after {\n          position: absolute;\n          content: ' ';\n          bottom: -11px;\n          left: 0;\n          right: 0;\n          width: 100%;\n          height: 2px;\n          border-radius: 4px;\n          transform: scaleX(0.8);\n          background-color: ", ";\n          transition: opacity, transform 200ms ease-in;\n          opacity: 0;\n        }\n        &:hover:not(&__disabled) {\n          color: ", ";\n        }\n        &__active {\n          color: ", ";\n          &:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n        }\n        &__disabled {\n          cursor: not-allowed;\n          color: ", ";\n        }\n      }\n    }\n\n    .ultra-tabs-content {\n      padding: 10px;\n      .ultra-tabs-item {\n        padding-top: 8px;\n        &__inactive {\n          height: 0;\n          padding: 0 !important;\n          overflow: hidden;\n          opacity: 0;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .ultra-tabs-item-transition-enter {\n      opacity: 0;\n      transform: scale(1.1);\n    }\n\n    .ultra-tabs-item-transition-enter-active {\n      opacity: 0.8;\n      transform: scale(1);\n      transition: opacity 300ms, transform 300ms;\n    }\n\n    .ultra-tabs-item-transition-exit {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    .ultra-tabs-item-transition-exit-active {\n      opacity: 0;\n      transform: scale(0.9);\n      transition: opacity 300ms, transform 300ms;\n    }\n  "])), theme[theme.mode].textColor, radius, borderColor, borderColor, primaryColor, primaryColor, primaryColor, disabledTextColor);
};
var tabsItemStyles = function tabsItemStyles(_props) {
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    padding: 0 4px;\n  "])));
};

exports.tabsItemStyles = tabsItemStyles;
exports.tabsStyles = tabsStyles;