{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><style>/*\n",
       " * Override Jupyter's default css inside elements with the hrepr class.\n",
       " */\n",
       "\n",
       ".hrepr td {\n",
       "\ttext-align: left;\n",
       "}\n",
       "\n",
       ".jp-RenderedHTMLCommon .hrepr table {\n",
       "\tmargin-bottom: 0px;\n",
       "}\n",
       "</style><style>.my-integer { color: fuchsia; }</style><style>\n",
       ":root, :host {\n",
       "\t--instance-color: #00a;\n",
       "\t--dict-color: #00a;\n",
       "\t--tuple-color: #080;\n",
       "\t--list-color: #080;\n",
       "\t--set-color: #080;\n",
       "\t--frozenset-color: #88f;\n",
       "\t--titled-box-radius: 0px;\n",
       "}\n",
       "\n",
       "/* Scalar/string formatting */\n",
       "\n",
       ".hreprv-True, .hreprv-False, .hreprv-None, .hreprt-int, .hreprt-float {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hreprt-int, .hreprt-float {\n",
       "\tcolor: #88f;\n",
       "}\n",
       "\n",
       ".hreprt-str {\n",
       "\tcolor: #666;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hreprt-str:before {\n",
       "\tcontent: \"“\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hreprt-str:after {\n",
       "\tcontent: \"”\";\n",
       "\tcolor: #888;\n",
       "}\n",
       "\n",
       ".hreprt-bytes {\n",
       "\tcolor: #666;\n",
       "\tfont-family: monospace;\n",
       "\twhite-space: pre;\n",
       "}\n",
       "\n",
       ".hreprt-bytes:before {\n",
       "\tcontent: \"b“\";\n",
       "\t/* font-family: normal;\n",
       "\tcolor: #888; */\n",
       "}\n",
       "\n",
       ".hreprt-bytes:after {\n",
       "\tcontent: \"”\";\n",
       "\t/* font-family: normal;\n",
       "\tcolor: #888; */\n",
       "}\n",
       "\n",
       ".hreprv-True {\n",
       "\tcolor: green;\n",
       "}\n",
       "\n",
       ".hreprv-False {\n",
       "\tcolor: red;\n",
       "}\n",
       "\n",
       ".hreprv-None {\n",
       "\tcolor: grey;\n",
       "}\n",
       "\n",
       "/* Generic object formatting */\n",
       "\n",
       ".hrepr-title, .hrepr-short-instance {\n",
       "\tbackground: var(--instance-color);\n",
       "\tcolor: white;\n",
       "\tvertical-align: middle;\n",
       "\tdisplay: flex;\n",
       "\talign-items: center;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v > .hrepr-title, .hrepr-short-instance {\n",
       "\tfont-weight: bold;\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tpadding-top: 2px;\n",
       "\tpadding-bottom: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title {\n",
       "\tpadding-left: 2px;\n",
       "\tpadding-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:first-child {\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h > .hrepr-title:last-child {\n",
       "\tpadding-left: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-contents-h {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: row;\n",
       "}\n",
       "\n",
       ".hrepr-titled-v, .hrepr-contents-v {\n",
       "\tdisplay: flex;\n",
       "\tflex-direction: column;\n",
       "}\n",
       "\n",
       ".hrepr-titled-h, .hrepr-titled-v {\n",
       "\tdisplay: inline-flex;\n",
       "\tborder: 1px solid var(--instance-color);\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h {\n",
       "\talign-items: center;\n",
       "\tflex-wrap: wrap;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > * {\n",
       "\tmargin-left: 2px;\n",
       "\tmargin-right: 2px;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(odd),\n",
       ".hrepr-contents-v > :nth-child(odd),\n",
       ".hrepr-instance-table > tbody > tr:nth-child(odd) {\n",
       "\tbackground: #fff;\n",
       "}\n",
       "\n",
       ".hrepr-contents-h > :nth-child(even),\n",
       ".hrepr-contents-v > :nth-child(even),\n",
       ".hrepr-instance-table > tbody > tr:nth-child(even) {\n",
       "\tbackground: #ddd;\n",
       "}\n",
       "\n",
       ".hrepr-instance-table {\n",
       "\tdisplay: inline-block;\n",
       "\tborder-collapse: collapse;\n",
       "\twidth: 100%;\n",
       "\tborder-radius: var(--titled-box-radius);\n",
       "}\n",
       "\n",
       ".hrepr-instance-table > tbody > tr > td {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "}\n",
       "\n",
       ".hrepr-instance-table > tbody > tr > td.hrepr-delimiter {\n",
       "\tpadding: 0px;\n",
       "}\n",
       "\n",
       "/* .hrepr-instance-table > tbody > tr > td > * {\n",
       "\tdisplay: inline-block;\n",
       "} */\n",
       "\n",
       ".hrepr-instance-kvpair {\n",
       "\tpadding-left: 5px;\n",
       "\tpadding-right: 5px;\n",
       "\tbackground: #eee;\n",
       "}\n",
       "\n",
       "/* Colorize boxes for standard data structures */\n",
       "\n",
       ".hreprt-dict { border: 1px solid var(--dict-color); }\n",
       ".hreprt-dict > .hrepr-title { background: var(--dict-color); }\n",
       "\n",
       ".hreprt-tuple { border: 1px solid var(--tuple-color); }\n",
       ".hreprt-tuple > .hrepr-title { background: var(--tuple-color); }\n",
       "\n",
       ".hreprt-list { border: 1px solid var(--list-color); }\n",
       ".hreprt-list > .hrepr-title { background: var(--list-color); }\n",
       "\n",
       ".hreprt-set { border: 1px solid var(--set-color); }\n",
       ".hreprt-set > .hrepr-title { background: var(--set-color); }\n",
       "\n",
       ".hreprt-frozenset { border: 1px solid var(--frozenset-color); }\n",
       ".hreprt-frozenset > .hrepr-title { background: var(--frozenset-color); }\n",
       "\n",
       ".hreprs-list { background: var(--list-color); color: white; padding: 2px; }\n",
       "\n",
       ".hrepr-ellipsis {\n",
       "\tfont-weight: bold;\n",
       "}\n",
       "\n",
       ".hrepr-ref {\n",
       "\tfont-weight: bold;\n",
       "\tcolor: magenta;\n",
       "}\n",
       "\n",
       ".hrepr-refbox {\n",
       "\tdisplay: inline-block;\n",
       "\tposition: relative;\n",
       "}\n",
       "\n",
       "/* .hrepr-refbox > :first-child {\n",
       "\tposition: absolute;\n",
       "\tcolor: white;\n",
       "\tbackground: magenta;\n",
       "\tpadding: 2px;\n",
       "\tfont-size: 9px;\n",
       "\tleft: 0px;\n",
       "\ttop: 0px;\n",
       "} */\n",
       "</style><div class=\"hrepr\"><div class=\"hreprt-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-integer\">The number 1</span><span class=\"my-integer\">The number 2</span><span class=\"my-integer\">The number 3</span><span class=\"my-integer\">The number 4</span><span class=\"my-integer\">woof</span></div><div class=\"hrepr-title\">]</div></div></div></div>"
      ],
      "text/plain": [
       "<div class=\"hreprt-list hrepr-titled-h\"><div class=\"hrepr-title\">[</div><div class=\"hrepr-contents-h\"><span class=\"my-integer\">The number 1</span><span class=\"my-integer\">The number 2</span><span class=\"my-integer\">The number 3</span><span class=\"my-integer\">The number 4</span><span class=\"my-integer\">woof</span></div><div class=\"hrepr-title\">]</div></div>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from hrepr import hrepr\n",
    "from hrepr.core import Hrepr\n",
    "from ovld import ovld, OvldMC\n",
    "\n",
    "class MyIntRepr(Hrepr):\n",
    "    def hrepr_resources(self, cls: int):\n",
    "        return self.H.style(\".my-integer { color: fuchsia; }\")\n",
    "\n",
    "    def hrepr(self, n: int):\n",
    "        return self.H.span['my-integer']('The number ', str(n))\n",
    "\n",
    "    def hrepr_short(self, n: int):\n",
    "        return self.H.span['my-integer']('The number ', str(n))\n",
    "\n",
    "    def hrepr(self, n: str):\n",
    "        return self.H.span['my-integer'](str(n))\n",
    "\n",
    "hrepr([1, 2, 3, 4, \"woof\"], mixins=MyIntRepr)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
