@lskjs/navbar/GlobalStyles.js

LSK ux subrepo: navbar

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _react = _interopRequireDefault(require("react"));

var _core = require("@emotion/core");

var _templateObject;

var styles = function styles() {
  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  :root {\n    --blue: #007bff;\n    --indigo: #6610f2;\n    --purple: #6f42c1;\n    --pink: #e83e8c;\n    --red: #dc3545;\n    --orange: #fd7e14;\n    --yellow: #ffc107;\n    --green: #28a745;\n    --teal: #20c997;\n    --cyan: #17a2b8;\n    --white: #fff;\n    --gray: #6c757d;\n    --gray-dark: #343a40;\n    --primary: #007bff;\n    --secondary: #6c757d;\n    --success: #28a745;\n    --info: #17a2b8;\n    --warning: #ffc107;\n    --danger: #dc3545;\n    --light: #f8f9fa;\n    --dark: #343a40;\n    --breakpoint-xs: 0;\n    --breakpoint-sm: 576px;\n    --breakpoint-md: 768px;\n    --breakpoint-lg: 992px;\n    --breakpoint-xl: 1200px;\n    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n  }\n\n  .bg-light {\n    background-color: #f8f9fa !important;\n  }\n\n  a.bg-light:hover,\n  a.bg-light:focus,\n  button.bg-light:hover,\n  button.bg-light:focus {\n    background-color: #dae0e5 !important;\n  }\n\n  /* //////////// */\n\n  .nav {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    padding-left: 0;\n    margin-bottom: 0;\n    list-style: none;\n  }\n\n  .nav-link {\n    display: block;\n    padding: 0.5rem 1rem;\n  }\n\n  .nav-link:hover,\n  .nav-link:focus {\n    text-decoration: none;\n  }\n\n  .nav-link.disabled {\n    color: #6c757d;\n    pointer-events: none;\n    cursor: default;\n  }\n\n  .nav-tabs {\n    border-bottom: 1px solid #dee2e6;\n  }\n\n  .nav-tabs .nav-item {\n    margin-bottom: -1px;\n  }\n\n  .nav-tabs .nav-link {\n    border: 1px solid transparent;\n    border-top-left-radius: 0.25rem;\n    border-top-right-radius: 0.25rem;\n  }\n\n  .nav-tabs .nav-link:hover,\n  .nav-tabs .nav-link:focus {\n    border-color: #e9ecef #e9ecef #dee2e6;\n  }\n\n  .nav-tabs .nav-link.disabled {\n    color: #6c757d;\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .nav-tabs .nav-link.active,\n  .nav-tabs .nav-item.show .nav-link {\n    color: #495057;\n    background-color: #fff;\n    border-color: #dee2e6 #dee2e6 #fff;\n  }\n\n  .nav-tabs .dropdown-menu {\n    margin-top: -1px;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .nav-pills .nav-link {\n    border-radius: 0.25rem;\n  }\n\n  .nav-pills .nav-link.active,\n  .nav-pills .show > .nav-link {\n    color: #fff;\n    background-color: #007bff;\n  }\n\n  .nav-fill .nav-item {\n    -ms-flex: 1 1 auto;\n    flex: 1 1 auto;\n    text-align: center;\n  }\n\n  .nav-justified .nav-item {\n    -ms-flex-preferred-size: 0;\n    flex-basis: 0;\n    -ms-flex-positive: 1;\n    flex-grow: 1;\n    text-align: center;\n  }\n\n  .tab-content > .tab-pane {\n    display: none;\n  }\n\n  .tab-content > .active {\n    display: block;\n  }\n\n  /* //////// */\n\n  .navbar {\n    position: relative;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    -ms-flex-align: center;\n    align-items: center;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    padding: 0.5rem 1rem;\n  }\n\n  .navbar .container,\n  .navbar .container-fluid,\n  .navbar .container-sm,\n  .navbar .container-md,\n  .navbar .container-lg,\n  .navbar .container-xl {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    -ms-flex-align: center;\n    align-items: center;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n  }\n\n  .navbar-brand {\n    display: inline-block;\n    padding-top: 0.3125rem;\n    padding-bottom: 0.3125rem;\n    margin-right: 1rem;\n    font-size: 1.25rem;\n    line-height: inherit;\n    white-space: nowrap;\n  }\n\n  .navbar-brand:hover,\n  .navbar-brand:focus {\n    text-decoration: none;\n  }\n\n  .navbar-nav {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    padding-left: 0;\n    margin-bottom: 0;\n    list-style: none;\n  }\n\n  .navbar-nav .nav-link {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .navbar-nav .dropdown-menu {\n    position: static;\n    float: none;\n  }\n\n  .navbar-text {\n    display: inline-block;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n\n  .navbar-collapse {\n    -ms-flex-preferred-size: 100%;\n    flex-basis: 100%;\n    -ms-flex-positive: 1;\n    flex-grow: 1;\n    -ms-flex-align: center;\n    align-items: center;\n  }\n\n  .navbar-toggler {\n    padding: 0.25rem 0.75rem;\n    font-size: 1.25rem;\n    line-height: 1;\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-radius: 0.25rem;\n  }\n\n  .navbar-toggler:hover,\n  .navbar-toggler:focus {\n    text-decoration: none;\n  }\n\n  .navbar-toggler-icon {\n    display: inline-block;\n    width: 1.5em;\n    height: 1.5em;\n    vertical-align: middle;\n    content: '';\n    background: no-repeat center center;\n    background-size: 100% 100%;\n  }\n\n  @media (max-width: 575.98px) {\n    .navbar-expand-sm > .container,\n    .navbar-expand-sm > .container-fluid,\n    .navbar-expand-sm > .container-sm,\n    .navbar-expand-sm > .container-md,\n    .navbar-expand-sm > .container-lg,\n    .navbar-expand-sm > .container-xl {\n      padding-right: 0;\n      padding-left: 0;\n    }\n  }\n\n  @media (min-width: 576px) {\n    .navbar-expand-sm {\n      -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n    }\n    .navbar-expand-sm .navbar-nav {\n      -ms-flex-direction: row;\n      flex-direction: row;\n    }\n    .navbar-expand-sm .navbar-nav .dropdown-menu {\n      position: absolute;\n    }\n    .navbar-expand-sm .navbar-nav .nav-link {\n      padding-right: 0.5rem;\n      padding-left: 0.5rem;\n    }\n    .navbar-expand-sm > .container,\n    .navbar-expand-sm > .container-fluid,\n    .navbar-expand-sm > .container-sm,\n    .navbar-expand-sm > .container-md,\n    .navbar-expand-sm > .container-lg,\n    .navbar-expand-sm > .container-xl {\n      -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n    }\n    .navbar-expand-sm .navbar-collapse {\n      display: -ms-flexbox !important;\n      display: flex !important;\n      -ms-flex-preferred-size: auto;\n      flex-basis: auto;\n    }\n    .navbar-expand-sm .navbar-toggler {\n      display: none;\n    }\n  }\n\n  @media (max-width: 767.98px) {\n    .navbar-expand-md > .container,\n    .navbar-expand-md > .container-fluid,\n    .navbar-expand-md > .container-sm,\n    .navbar-expand-md > .container-md,\n    .navbar-expand-md > .container-lg,\n    .navbar-expand-md > .container-xl {\n      padding-right: 0;\n      padding-left: 0;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .navbar-expand-md {\n      -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n    }\n    .navbar-expand-md .navbar-nav {\n      -ms-flex-direction: row;\n      flex-direction: row;\n    }\n    .navbar-expand-md .navbar-nav .dropdown-menu {\n      position: absolute;\n    }\n    .navbar-expand-md .navbar-nav .nav-link {\n      padding-right: 0.5rem;\n      padding-left: 0.5rem;\n    }\n    .navbar-expand-md > .container,\n    .navbar-expand-md > .container-fluid,\n    .navbar-expand-md > .container-sm,\n    .navbar-expand-md > .container-md,\n    .navbar-expand-md > .container-lg,\n    .navbar-expand-md > .container-xl {\n      -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n    }\n    .navbar-expand-md .navbar-collapse {\n      display: -ms-flexbox !important;\n      display: flex !important;\n      -ms-flex-preferred-size: auto;\n      flex-basis: auto;\n    }\n    .navbar-expand-md .navbar-toggler {\n      display: none;\n    }\n  }\n\n  @media (max-width: 991.98px) {\n    .navbar-expand-lg > .container,\n    .navbar-expand-lg > .container-fluid,\n    .navbar-expand-lg > .container-sm,\n    .navbar-expand-lg > .container-md,\n    .navbar-expand-lg > .container-lg,\n    .navbar-expand-lg > .container-xl {\n      padding-right: 0;\n      padding-left: 0;\n    }\n  }\n\n  @media (min-width: 992px) {\n    .navbar-expand-lg {\n      -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n    }\n    .navbar-expand-lg .navbar-nav {\n      -ms-flex-direction: row;\n      flex-direction: row;\n    }\n    .navbar-expand-lg .navbar-nav .dropdown-menu {\n      position: absolute;\n    }\n    .navbar-expand-lg .navbar-nav .nav-link {\n      padding-right: 0.5rem;\n      padding-left: 0.5rem;\n    }\n    .navbar-expand-lg > .container,\n    .navbar-expand-lg > .container-fluid,\n    .navbar-expand-lg > .container-sm,\n    .navbar-expand-lg > .container-md,\n    .navbar-expand-lg > .container-lg,\n    .navbar-expand-lg > .container-xl {\n      -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n    }\n    .navbar-expand-lg .navbar-collapse {\n      display: -ms-flexbox !important;\n      display: flex !important;\n      -ms-flex-preferred-size: auto;\n      flex-basis: auto;\n    }\n    .navbar-expand-lg .navbar-toggler {\n      display: none;\n    }\n  }\n\n  @media (max-width: 1199.98px) {\n    .navbar-expand-xl > .container,\n    .navbar-expand-xl > .container-fluid,\n    .navbar-expand-xl > .container-sm,\n    .navbar-expand-xl > .container-md,\n    .navbar-expand-xl > .container-lg,\n    .navbar-expand-xl > .container-xl {\n      padding-right: 0;\n      padding-left: 0;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    .navbar-expand-xl {\n      -ms-flex-flow: row nowrap;\n      flex-flow: row nowrap;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n    }\n    .navbar-expand-xl .navbar-nav {\n      -ms-flex-direction: row;\n      flex-direction: row;\n    }\n    .navbar-expand-xl .navbar-nav .dropdown-menu {\n      position: absolute;\n    }\n    .navbar-expand-xl .navbar-nav .nav-link {\n      padding-right: 0.5rem;\n      padding-left: 0.5rem;\n    }\n    .navbar-expand-xl > .container,\n    .navbar-expand-xl > .container-fluid,\n    .navbar-expand-xl > .container-sm,\n    .navbar-expand-xl > .container-md,\n    .navbar-expand-xl > .container-lg,\n    .navbar-expand-xl > .container-xl {\n      -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n    }\n    .navbar-expand-xl .navbar-collapse {\n      display: -ms-flexbox !important;\n      display: flex !important;\n      -ms-flex-preferred-size: auto;\n      flex-basis: auto;\n    }\n    .navbar-expand-xl .navbar-toggler {\n      display: none;\n    }\n  }\n\n  .navbar-expand {\n    -ms-flex-flow: row nowrap;\n    flex-flow: row nowrap;\n    -ms-flex-pack: start;\n    justify-content: flex-start;\n  }\n\n  .navbar-expand > .container,\n  .navbar-expand > .container-fluid,\n  .navbar-expand > .container-sm,\n  .navbar-expand > .container-md,\n  .navbar-expand > .container-lg,\n  .navbar-expand > .container-xl {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .navbar-expand .navbar-nav {\n    -ms-flex-direction: row;\n    flex-direction: row;\n  }\n\n  .navbar-expand .navbar-nav .dropdown-menu {\n    position: absolute;\n  }\n\n  .navbar-expand .navbar-nav .nav-link {\n    padding-right: 0.5rem;\n    padding-left: 0.5rem;\n  }\n\n  .navbar-expand > .container,\n  .navbar-expand > .container-fluid,\n  .navbar-expand > .container-sm,\n  .navbar-expand > .container-md,\n  .navbar-expand > .container-lg,\n  .navbar-expand > .container-xl {\n    -ms-flex-wrap: nowrap;\n    flex-wrap: nowrap;\n  }\n\n  .navbar-expand .navbar-collapse {\n    display: -ms-flexbox !important;\n    display: flex !important;\n    -ms-flex-preferred-size: auto;\n    flex-basis: auto;\n  }\n\n  .navbar-expand .navbar-toggler {\n    display: none;\n  }\n\n  .navbar-light .navbar-brand {\n    color: rgba(0, 0, 0, 0.9);\n  }\n\n  .navbar-light .navbar-brand:hover,\n  .navbar-light .navbar-brand:focus {\n    color: rgba(0, 0, 0, 0.9);\n  }\n\n  .navbar-light .navbar-nav .nav-link {\n    color: rgba(0, 0, 0, 0.5);\n  }\n\n  .navbar-light .navbar-nav .nav-link:hover,\n  .navbar-light .navbar-nav .nav-link:focus {\n    color: rgba(0, 0, 0, 0.7);\n  }\n\n  .navbar-light .navbar-nav .nav-link.disabled {\n    color: rgba(0, 0, 0, 0.3);\n  }\n\n  .navbar-light .navbar-nav .show > .nav-link,\n  .navbar-light .navbar-nav .active > .nav-link,\n  .navbar-light .navbar-nav .nav-link.show,\n  .navbar-light .navbar-nav .nav-link.active {\n    color: rgba(0, 0, 0, 0.9);\n  }\n\n  .navbar-light .navbar-toggler {\n    color: rgba(0, 0, 0, 0.5);\n    border-color: rgba(0, 0, 0, 0.1);\n  }\n\n  .navbar-light .navbar-toggler-icon {\n    background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\");\n  }\n\n  .navbar-light .navbar-text {\n    color: rgba(0, 0, 0, 0.5);\n  }\n\n  .navbar-light .navbar-text a {\n    color: rgba(0, 0, 0, 0.9);\n  }\n\n  .navbar-light .navbar-text a:hover,\n  .navbar-light .navbar-text a:focus {\n    color: rgba(0, 0, 0, 0.9);\n  }\n\n  .navbar-dark .navbar-brand {\n    color: #fff;\n  }\n\n  .navbar-dark .navbar-brand:hover,\n  .navbar-dark .navbar-brand:focus {\n    color: #fff;\n  }\n\n  .navbar-dark .navbar-nav .nav-link {\n    color: rgba(255, 255, 255, 0.5);\n  }\n\n  .navbar-dark .navbar-nav .nav-link:hover,\n  .navbar-dark .navbar-nav .nav-link:focus {\n    color: rgba(255, 255, 255, 0.75);\n  }\n\n  .navbar-dark .navbar-nav .nav-link.disabled {\n    color: rgba(255, 255, 255, 0.25);\n  }\n\n  .navbar-dark .navbar-nav .show > .nav-link,\n  .navbar-dark .navbar-nav .active > .nav-link,\n  .navbar-dark .navbar-nav .nav-link.show,\n  .navbar-dark .navbar-nav .nav-link.active {\n    color: #fff;\n  }\n\n  .navbar-dark .navbar-toggler {\n    color: rgba(255, 255, 255, 0.5);\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .navbar-dark .navbar-toggler-icon {\n    background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\");\n  }\n\n  .navbar-dark .navbar-text {\n    color: rgba(255, 255, 255, 0.5);\n  }\n\n  .navbar-dark .navbar-text a {\n    color: #fff;\n  }\n\n  .navbar-dark .navbar-text a:hover,\n  .navbar-dark .navbar-text a:focus {\n    color: #fff;\n  }\n"])));
}; // export default () => <Global styles={styles()} />;


var _default = function _default() {
  return /*#__PURE__*/_react["default"].createElement("link", {
    rel: "stylesheet",
    href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  });
};

exports["default"] = _default;
//# sourceMappingURL=GlobalStyles.js.map