{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Styling Widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%html\n",
    "<style type=\"text/css\">\n",
    "    .red { color: red }\n",
    "    .italic { font-style: italic }\n",
    "    .serif { font-family: serif }\n",
    "    .bigFont { font-size: 2em }\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import com.twosigma.beakerx.widget.Label\n",
    "\n",
    "l = new Label()\n",
    "l.setValue(\"This is a big red serif font text in italics\")\n",
    "l.setDomClasses([\"red\", \"italic\", \"serif\", \"bigFont\"])\n",
    "l"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%html\n",
    "<style type=\"text/css\">\n",
    "    @keyframes bounce {\n",
    "        0%, 20%, 60%, 90%, 100% {\n",
    "            -webkit-transform: translateY(0);\n",
    "            transform: translateY(0);\n",
    "        }\n",
    "\n",
    "        40% {\n",
    "            -webkit-transform: translateY(-15px);\n",
    "            transform: translateY(-15px);\n",
    "        }\n",
    "\n",
    "        80% {\n",
    "            -webkit-transform: translateY(-10px);\n",
    "            transform: translateY(-10px);\n",
    "        }\n",
    "\n",
    "        95% {\n",
    "            -webkit-transform: translateY(-5px);\n",
    "            transform: translateY(-5px);\n",
    "        }\n",
    "    }\n",
    "\n",
    "    .bxPrimaryButton {\n",
    "        background: #3498db;\n",
    "        color: #FFF;\n",
    "        text-transform: uppercase;\n",
    "        width: 180px;\n",
    "        height: 40px;\n",
    "        padding: 4px 0;\n",
    "        border-radius: 3px;\n",
    "        margin-top: 20px;\n",
    "        margin-bottom: 20px;\n",
    "    }\n",
    "\n",
    "    .bxPrimaryButton:hover {\n",
    "        cursor: pointer;\n",
    "        animation: 0.5s bounce\n",
    "    }\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import com.twosigma.beakerx.widget.Button\n",
    "\n",
    "b = new Button()\n",
    "b.setDescription(\"Bouncing button\")\n",
    "b.setDomClasses([\"bxPrimaryButton\"])\n",
    "b"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Groovy",
   "language": "groovy",
   "name": "groovy"
  },
  "language_info": {
   "codemirror_mode": "groovy",
   "file_extension": ".groovy",
   "mimetype": "",
   "name": "Groovy",
   "nbconverter_exporter": "",
   "version": "2.4.3"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": false,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": false,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}