@danilandreev/material-docs/components/SearchField/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 width = 250;
var focusWidth = 300;

var styles = function styles(theme) {
  return (0, _styles.createStyles)({
    root: {
      transition: "width 0.2s",
      padding: '2px 4px',
      display: 'flex',
      alignItems: 'center',
      width: width,
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      backgroundColor: "rgba(255,255,255,0.1)",
      "&:hover": {
        backgroundColor: "rgba(255,255,255,0.15)"
      }
    },
    rootFocused: {
      width: focusWidth
    },
    input: {
      marginLeft: theme.spacing(1),
      flex: 1,
      color: theme.palette.common.white
    },
    iconButton: {
      padding: 10
    },
    icon: {
      margin: theme.spacing(1),
      marginTop: theme.spacing(0.5),
      marginBottom: theme.spacing(0.5),
      color: theme.palette.common.white
    },
    iconClickable: {
      "&:hover": {
        color: _colors.grey[400],
        cursor: "pointer"
      },
      "&:active": {
        color: _colors.grey[500],
        cursor: "pointer"
      }
    },
    popper: {
      maxWidth: 550,
      minWidth: focusWidth
    },
    listPaper: {
      marginTop: theme.spacing(2),
      maxHeight: "70vh",
      overflowY: "auto",
      width: 420
    }
  });
};

exports.styles = styles;