calcite-react/Tabs/Tab-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTabSection = exports.StyledTabContents = exports.StyledTabNav = exports.StyledTabTitle = exports.StyledTab = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

var _Elements = require("../Elements");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledTab = _styledComponents.default.div.withConfig({
  displayName: "StyledTab",
  componentId: "sc-1432ziz-0"
})(["padding:0;flex:1 0 auto;", ";"], function (props) {
  return props.right && (0, _styledComponents.css)(["float:right;html[dir='rtl'] &{float:left;}"]);
});

exports.StyledTab = StyledTab;
StyledTab.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledTabTitle = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledTabTitle",
  componentId: "sc-1432ziz-1"
})(["box-sizing:border-box;", ";transition:background ", ";padding:", " ", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:", ";border:1px solid ", ";margin-right:-1px;cursor:pointer;html[dir='rtl'] &{margin-right:0;margin-left:-1px;}&:first-child{border-top-left-radius:", ";html[dir='rtl'] &{border-top-left-radius:0;border-top-right-radius:", ";}}&:last-child{border-top-right-radius:", ";html[dir='rtl'] &{border-top-right-radius:0;border-top-left-radius:", ";}}&:focus{outline:none;}&:hover,&:focus{background-color:", ";text-decoration:none;background-image:linear-gradient( to top,transparent 94%,", " 96%,", " 100% );}", ";", ";", ";", ";", ";}", ";"], (0, _helpers.fontSize)(-2), (0, _helpers.transition)(), function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.theme.palette.offWhite;
}, function (props) {
  return props.theme.palette.lighterGray;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.active && (0, _styledComponents.css)(["border-bottom:1px solid ", ";background-color:", ";&:hover{background-color:", ";}"], function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.theme.palette.white;
  }, props.theme.palette.white);
}, function (props) {
  return props.gray && (0, _styledComponents.css)(["background-color:", ";", ";"], function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.active && (0, _styledComponents.css)(["background-color:", ";border-bottom:1px solid ", ";"], function (props) {
      return props.theme.palette.offWhite;
    }, function (props) {
      return props.theme.palette.offWhite;
    });
  });
}, function (props) {
  return props.transparent && (0, _styledComponents.css)(["background-color:transparent;border:1px solid transparent;border-bottom:1px solid ", ";margin-right:0;html[dir='rtl'] &{margin-left:0;}&:hover{border-bottom:1px solid ", ";}", ";"], function (props) {
    return props.theme.palette.lighterGray;
  }, function (props) {
    return props.theme.palette.lighterGray;
  }, function (props) {
    return props.active && (0, _styledComponents.css)(["transition:background ", ";background-color:transparent;border:1px solid ", ";border-bottom:1px solid ", ";border-radius:", " ", " 0 0;&:hover{border-bottom:1px solid ", ";}"], (0, _helpers.transition)(), function (props) {
      return props.theme.palette.lighterGray;
    }, function (props) {
      return props.theme.palette.white;
    }, function (props) {
      return props.theme.borderRadius;
    }, function (props) {
      return props.theme.borderRadius;
    }, function (props) {
      return props.theme.palette.white;
    });
  });
}, function (props) {
  return props.translucent && (0, _styledComponents.css)(["background-color:transparent;background-image:none;border:none;border-bottom:3px solid transparent;color:", ";margin-right:", ";transition:all 0.15s ease-in-out 0s;padding:", " 0;html[dir='rtl'] &{margin-right:0;margin-left:", ";}&:first-child,&:last-child{border-top-left-radius:0;border-top-right-radius:0;}&:hover,&:focus{background-color:transparent;border-bottom-color:", ";background-image:none;color:", ";}", ";"], props.theme.palette.darkerGray, (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  }, (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), props.theme.palette.lighterGray, props.theme.palette.offBlack, function (props) {
    return props.active && (0, _styledComponents.css)(["&,&:hover,&:focus{background-image:none;background-color:transparent;border-bottom-color:", ";color:", ";font-weight:bold;}"], props.theme.palette.blue, props.theme.palette.offBlack);
  });
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["margin-right:2px;margin-bottom:3px;border:none;background-color:", ";color:", ";border-top:2px solid ", ";html[dir='rtl'] &{margin-right:0;margin-left:2px;}&:hover,&:focus{color:", ";background-color:", ";border-top-color:", ";background-image:none;}", ";"], function (props) {
    return props.theme.palette.transparentBlack;
  }, function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.theme.palette.transparentBlack;
  }, function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.theme.palette.opaqueBlack;
  }, function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.active && (0, _styledComponents.css)(["margin-bottom:1px;background-color:", ";border-top-color:", ";border-bottom:2px solid transparent;"], function (props) {
      return props.theme.palette.opaqueBlack;
    }, function (props) {
      return props.theme.palette.white;
    });
  });
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
});
exports.StyledTabTitle = StyledTabTitle;
StyledTabTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTabNav = _styledComponents.default.nav.withConfig({
  displayName: "StyledTabNav",
  componentId: "sc-1432ziz-2"
})(["display:flex;&::after{display:table;content:'';clear:both;}"]);

exports.StyledTabNav = StyledTabNav;
StyledTabNav.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTabContents = _styledComponents.default.div.withConfig({
  displayName: "StyledTabContents",
  componentId: "sc-1432ziz-3"
})(["box-sizing:border-box;border:1px solid ", ";border-radius:0 0 ", " ", ";margin-top:-1px;", ";", ";", ";"], function (props) {
  return props.theme.palette.lighterGray;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.transparent && (0, _styledComponents.css)(["border-bottom:none;border-left:none;border-right:none;"]);
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["border:none;"]);
}, function (props) {
  return props.translucent && (0, _styledComponents.css)(["border:none;border-top:1px solid ", ";"], props.theme.palette.lighterGray);
});

exports.StyledTabContents = StyledTabContents;
StyledTabContents.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTabSection = _styledComponents.default.article.withConfig({
  displayName: "StyledTabSection",
  componentId: "sc-1432ziz-4"
})(["box-sizing:border-box;background-color:", ";padding:", ";border-radius:0 0 ", " ", ";pre{margin:0;}", ";", ";", ";", ";"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.gray && (0, _styledComponents.css)(["background-color:", ";pre code{padding:0;border:none;background-color:transparent;}"], function (props) {
    return props.theme.palette.offWhite;
  });
}, function (props) {
  return props.transparent && (0, _styledComponents.css)(["background-color:transparent;padding-left:0;padding-right:0;"]);
}, function (props) {
  return props.translucent && (0, _styledComponents.css)(["background-color:", ";padding-left:0;padding-right:0;"], function (props) {
    return props.theme.palette.opaqueWhite;
  });
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["background-color:", ";color:", ";"], function (props) {
    return props.theme.palette.opaqueBlack;
  }, function (props) {
    return props.theme.palette.white;
  });
});

exports.StyledTabSection = StyledTabSection;
StyledTabSection.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};