Skip to content

Instantly share code, notes, and snippets.

@peller
Last active July 6, 2016 01:05
Show Gist options
  • Select an option

  • Save peller/63b6bf6ccb2d37247f714273117cc4c1 to your computer and use it in GitHub Desktop.

Select an option

Save peller/63b6bf6ccb2d37247f714273117cc4c1 to your computer and use it in GitHub Desktop.
Example declaring and using a CSS rule based on a CSS variables in paper-styles
Display the source blob
Display the rendered blob
Raw
{
"cells": [
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" window.Urth = window.Urth || {};\n",
" Urth._initialized = Urth._initialized || $.Deferred();\n",
" Urth.whenReady = Urth.whenReady || function(cb) {\n",
" Urth._initialized.then(function() {\n",
" Urth.whenReady(cb);\n",
" });\n",
" };\n",
" Urth.whenReady(function() { console.log(\"Declarative widgets connected.\") });\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from urth import widgets\n",
"widgets.init()"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<link rel=\"import\" href=\"urth_components/paper-styles/paper-styles.html\" is='urth-core-import' package='PolymerElements/paper-styles'>"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html\n",
"<link rel=\"import\" href=\"urth_components/paper-styles/paper-styles.html\" is='urth-core-import' package='PolymerElements/paper-styles'>"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<style is=\"custom-style\">\n",
".secondary {\n",
" color: var(--secondary-text-color);\n",
" @apply(--paper-font-body1);\n",
"}\n",
"</style>\n",
"<div class=\"secondary\">secondary</div>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html\n",
"<style is=\"custom-style\">\n",
".secondary {\n",
" color: var(--secondary-text-color);\n",
" @apply(--paper-font-body1);\n",
"}\n",
"</style>\n",
"<div class=\"secondary\">secondary</div>"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"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.5.1"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment