jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
11 lines (6 loc) • 1.56 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../style-inject/dist/style-inject.es.js');
var css = "/* Used to detect in JavaScript if apps have loaded styles or not. */\n:root {\n --reach-menu-button: 1;\n}\n\n[data-reach-menu] {\n display: block;\n position: absolute;\n}\n\n[data-reach-menu-list],\n[data-reach-menu-items] {\n display: block;\n white-space: nowrap;\n border: solid 1px hsla(0, 0%, 0%, 0.25);\n background: hsla(0, 100%, 100%, 0.99);\n outline: none;\n padding: 1rem 0;\n font-size: 85%;\n}\n\n[data-reach-menu-item] {\n display: block;\n user-select: none;\n}\n\n/*\n The dom structure of a MenuLink is reach-menu-item > a,\n so to target all items we can use `data-reach-menu-item`\n*/\n[data-reach-menu-item] {\n /*\n These are styled in one rule instead of something like a[data-reach-menu-item]\n and li[data-reach-menu-item] so that apps don't have to fight specificity and\n can style both li and a menu items with one rule,\n ie: `[data-selected] { background: red; }`.\n Otherwise they'd have to define two styles, one for a and one for li.\n */\n\n /* reach-menu-item */\n cursor: pointer;\n\n /* a */\n display: block;\n color: inherit;\n font: inherit;\n text-decoration: initial;\n\n /* both */\n padding: 5px 20px;\n}\n\n/* pseudo pseudo selector */\n[data-reach-menu-item][data-selected] {\n background: hsl(211, 81%, 36%);\n color: white;\n outline: none;\n}\n";
styleInject_es.default(css);
exports.default = css;