@danilandreev/material-docs/components/Tagable/styles.js

material-docs - react framework for easy creating documentation site in material design style.

"use strict";

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

var _styles = require("@material-ui/core/styles");

var _colors = require("@material-ui/core/colors");

/*
 * Author: Andrieiev Danil |  danssg08@gmail.com | https://github.com/DanilAndreev
 * Copyright (C) 2020.
 */
var styles = function styles(theme) {
  return (0, _styles.createStyles)({
    root: {},
    container: {
      position: "relative"
    },
    tagHook: {
      position: "absolute",
      left: -25,
      top: "10%",
      color: _colors.grey[600],
      display: "none",
      padding: 20,
      paddingTop: 0,
      paddingLeft: 0,
      "&:hover": {
        color: _colors.grey[700],
        display: "block"
      }
    },
    anchor: {
      "&:target": {
        paddingTop: 64,
        marginTop: -64
      },
      "&:hover $tagHook": {
        display: "block"
      }
    },
    divider: {
      marginBottom: theme.spacing(1)
    },
    h1: {
      fontSize: "2.8rem"
    },
    h2: {
      fontSize: "2.3rem"
    },
    h3: {
      fontSize: "1.8rem"
    },
    h4: {
      fontSize: "1.6rem"
    },
    h5: {
      fontSize: "1.3rem"
    },
    h6: {
      fontSize: "1.1rem"
    },
    typography: {
      overflowWrap: "break-word"
    },
    textBlock: {
      overflowWrap: "break-word",
      maxWidth: "calc(100vw - ".concat(theme.spacing(6), "px)")
    },
    anchorIcon: {
      transform: "rotate(45deg)"
    }
  });
};

exports.styles = styles;