@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
123 lines (8 loc) • 3.59 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n .explorer-ribbon {\n width: 12.1em;\n height: 12.1em;\n position: absolute;\n overflow: hidden;\n top: 0;\n right: 0;\n z-index: 20;\n pointer-events: none;\n font-size: 13px;\n text-decoration: none;\n text-indent: -999999px;\n }\n\n .explorer-ribbon.fixed {\n position: fixed;\n }\n\n .explorer-ribbon:hover,\n .explorer-ribbon:active {\n background-color: rgba(0, 0, 0, 0);\n }\n\n .explorer-ribbon:before,\n .explorer-ribbon:after {\n /* The right and left classes determine the side we attach our banner to */\n position: absolute;\n display: block;\n width: 15.38em;\n height: 1.54em;\n\n top: 3.23em;\n right: -3.23em;\n\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n\n -webkit-transform: rotate(45deg);\n -moz-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n -o-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n .explorer-ribbon:before {\n content: \"\";\n\n /* Add a bit of padding to give some substance outside the \"stitching\" */\n padding: 0.38em 0;\n\n /* Set the base colour */\n background-color: ", ";\n\n background-image: ", ";\n\n pointer-events: auto;\n }\n\n .explorer-ribbon:after {\n /* Set the text from the data-ribbon attribute */\n content: attr(data-ribbon);\n .explorer-ribbon:after:before {\n margin-left: 10px;\n }\n /* Set the text properties */\n color: #fff;\n font: 700 1em \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n line-height: 1.54em;\n text-decoration: none;\n text-align: center;\n text-indent: 27px;\n\n /* Set the layout properties */\n padding: 0.15em 0;\n margin: 0.15em 0;\n }\n\n .explorer-ribbon.left-top,\n .explorer-ribbon.left-bottom {\n right: auto;\n left: 0;\n }\n\n .explorer-ribbon.left-bottom,\n .explorer-ribbon.right-bottom {\n top: auto;\n bottom: 0;\n }\n\n .explorer-ribbon.left-top:before,\n .explorer-ribbon.left-top:after,\n .explorer-ribbon.left-bottom:before,\n .explorer-ribbon.left-bottom:after {\n right: auto;\n left: -5.23em;\n }\n\n .explorer-ribbon.left-bottom:before,\n .explorer-ribbon.left-bottom:after,\n .explorer-ribbon.right-bottom:before,\n .explorer-ribbon.right-bottom:after {\n top: auto;\n bottom: 5.23em;\n }\n\n .explorer-ribbon.left-top:before,\n .explorer-ribbon.left-top:after,\n .explorer-ribbon.right-bottom:before,\n .explorer-ribbon.right-bottom:after {\n -webkit-transform: rotate(-45deg);\n -moz-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n transform: rotate(-45deg);\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import styled from "styled-components";
var RibbonWrapper = styled.span(_templateObject(),
function (props) {return props.theme.palette.quaternary.main;},
function (props) {return props.theme.palette.quaternary.main;});
export default (function (_ref) {var title = _ref.title;return /*#__PURE__*/React.createElement(RibbonWrapper, null, /*#__PURE__*/
React.createElement("span", { title: title, className: "explorer-ribbon left-top", "data-ribbon": title }));});
//# sourceMappingURL=index.js.map