five-bells-visualization
Version:
Tool to visualize Five Bells payments
116 lines (91 loc) • 3.72 kB
HTML
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="style-util.html">
<link rel="import" href="style-transformer.html">
<link rel="import" href="style-defaults.html">
<!--
The `x-style` extension of the native `<style>` element allows defining styles
in the main document that can take advantage of several special features of
Polymer's styling system:
* Document styles defined in an `x-style` will be shimmed to ensure they do
not leak into local DOM when running on browsers without non-native Shadow DOM.
* Shadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on
browsers without non-native Shadow DOM.
* Custom properties used by Polymer's experimental shim for cross-scope styling
may be defined in an `x-style`.
Example:
```html
<!doctype html>
<html>
<head>
<script src="components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="components/polymer/polymer.html">
<style is="x-style">
/* Will be prevented from affecting local DOM of Polymer elements */
* {
box-sizing: border-box;
}
/* Can use /deep/ and ::shadow combinators */
body /deep/ .my-special-view::shadow #thing-inside {
background: yellow;
}
/* Custom properties that inherit down the document tree may be defined */
body {
--my-toolbar-title-color: green;
}
</style>
</head>
<body>
...
</body>
</html>
```
Note, all features of `x-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `x-style` extension should only be used for defining document styles, outside of a custom element's local DOM.
-->
<script>
(function() {
Polymer({
is: 'x-style',
extends: 'style',
created: function() {
var rules = Polymer.StyleUtil.parser.parse(this.textContent);
this.applyProperties(rules);
// TODO(sorvell): since custom rules must match directly, they tend to be
// made with selectors like `*`.
// We *remove them here* so they don't apply too widely and nerf recalc.
// This means that normal properties mixe in rules with custom
// properties will *not* apply.
var cssText = Polymer.StyleUtil.parser.stringify(rules);
this.textContent = this.scopeCssText(cssText);
},
scopeCssText: function(cssText) {
return Polymer.Settings.useNativeShadow ?
cssText :
Polymer.StyleUtil.toCssText(cssText, function(rule) {
Polymer.StyleTransformer.rootRule(rule);
});
},
applyProperties: function(rules) {
var cssText = '';
Polymer.StyleUtil.forEachStyleRule(rules, function(rule) {
if (rule.cssText.match(CUSTOM_RULE)) {
// TODO(sorvell): use parser.stringify, it needs an option not to
// strip custom properties.
cssText += rule.selector + ' {\n' + rule.cssText + '\n}\n';
}
});
if (cssText) {
Polymer.StyleDefaults.applyCss(cssText);
}
}
});
var CUSTOM_RULE = /--[^;{'"]*\:/;
})();
</script>