From 6deae08061381acda189b3c13dbc9192088504c4 Mon Sep 17 00:00:00 2001 From: Erny Sans Date: Fri, 15 Jun 2018 13:15:36 -0500 Subject: [PATCH] 3.0 preview (#7) * Migrate to Polymer 3 * Code clean and update --- .travis.yml | 5 +- bower.json | 37 - classes.html | 16 - classes.js | 21 + classes/animate.html | 2 +- classes/{bootstrap.html => bootstrap.js} | 35 +- classes/buttons.html | 182 -- classes/buttons.js | 187 ++ classes/grid.html | 1575 ---------------- classes/grid.js | 1585 +++++++++++++++++ classes/typography.html | 635 ------- classes/typography.js | 637 +++++++ demo/buttons.html | 48 +- demo/grid.html | 15 +- demo/typography.html | 29 +- package-lock.json | 554 +++++- package.json | 42 +- polymer.json | 2 +- skin-styles.html => skin-styles.js | 11 +- styles.html | 9 - styles.js | 10 + styles/{buttons.html => buttons.js} | 27 +- .../{default-theme.html => default-theme.js} | 27 +- 23 files changed, 3116 insertions(+), 2575 deletions(-) delete mode 100644 bower.json delete mode 100644 classes.html create mode 100644 classes.js rename classes/{bootstrap.html => bootstrap.js} (99%) delete mode 100644 classes/buttons.html create mode 100644 classes/buttons.js delete mode 100644 classes/grid.html create mode 100644 classes/grid.js delete mode 100644 classes/typography.html create mode 100644 classes/typography.js rename skin-styles.html => skin-styles.js (86%) delete mode 100644 styles.html create mode 100644 styles.js rename styles/{buttons.html => buttons.js} (90%) rename styles/{default-theme.html => default-theme.js} (87%) diff --git a/.travis.yml b/.travis.yml index 8ff3a8d..7ceeb4d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,6 @@ notifications: language: node_js sudo: false node_js: stable -before_script: - - npm install -g polymer-cli - - polymer install +before_script: npm install -g polymer-cli script: npm run lint + diff --git a/bower.json b/bower.json deleted file mode 100644 index c15a8b1..0000000 --- a/bower.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "skin-styles", - "version": "2.0.0", - "license": "BSD-3-Clause", - "private": true, - "authors": [ - "The FabricElements Authors" - ], - "description": "Extend paper-styles with useful styles", - "keywords": [ - "web-components", - "polymer", - "styles", - "FabricElements", - "css", - "buttons", - "typography", - "grid", - "animations" - ], - "repository": { - "type": "git", - "url": "git@github.com:FabricElements/skin-styles.git" - }, - "main": "skin-styles.html", - "dependencies": { - "polymer": "Polymer/polymer#^2.0.0", - "paper-styles": "PolymerElements/paper-styles#^2.0.0" - }, - "devDependencies": { - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0", - "web-component-tester": "Polymer/web-component-tester#^6.0.0", - "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0", - "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0", - "paper-button": "PolymerElements/paper-button#^2.0.0" - } -} diff --git a/classes.html b/classes.html deleted file mode 100644 index 5a660bd..0000000 --- a/classes.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - diff --git a/classes.js b/classes.js new file mode 100644 index 0000000..464366f --- /dev/null +++ b/classes.js @@ -0,0 +1,21 @@ +/** + @license + Copyright (c) FabricElements. All rights reserved. + + skin-styles Styles + */ +import './classes/buttons.js'; +import './classes/typography.js'; +import './classes/grid.js'; +import './classes/bootstrap.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = ` + +`; +styleElement.register('skin-styles'); diff --git a/classes/animate.html b/classes/animate.html index fe6d15c..1052ed1 100644 --- a/classes/animate.html +++ b/classes/animate.html @@ -1,6 +1,6 @@ - - +`; + +document.head.appendChild($_documentContainer.content); + +/** + @license + Copyright (c) FabricElements. All rights reserved. + + `skin-styles-bootstrap` is a supercharged Bootstrap grid. + https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css + + @group Skin Styles + @demo demo/grid.html bootstrap + */ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +; diff --git a/classes/buttons.html b/classes/buttons.html deleted file mode 100644 index a6bd2bf..0000000 --- a/classes/buttons.html +++ /dev/null @@ -1,182 +0,0 @@ - - - - - - - - diff --git a/classes/buttons.js b/classes/buttons.js new file mode 100644 index 0000000..83094af --- /dev/null +++ b/classes/buttons.js @@ -0,0 +1,187 @@ +/** + @license + Copyright (c) FabricElements. All rights reserved. + + `buttons` + App color themes + + @group Skin Styles + @demo demo/buttons.html skin-buttons + */ +import '@polymer/polymer/polymer-legacy.js'; +import '../styles/buttons.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = ` + +`; +styleElement.register('skin-buttons'); diff --git a/classes/grid.html b/classes/grid.html deleted file mode 100644 index 819976f..0000000 --- a/classes/grid.html +++ /dev/null @@ -1,1575 +0,0 @@ - - - diff --git a/classes/grid.js b/classes/grid.js new file mode 100644 index 0000000..58ff278 --- /dev/null +++ b/classes/grid.js @@ -0,0 +1,1585 @@ +/** + @license + Copyright (c) FabricElements. All rights reserved. + + `skin-grid` is a supercharged Bootstrap grid. + https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css + + @group Skin Styles + @demo demo/grid.html skin-grid + */ +import '@polymer/polymer/polymer-legacy.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = ` + +`; +styleElement.register('skin-grid'); diff --git a/classes/typography.html b/classes/typography.html deleted file mode 100644 index 83f87fe..0000000 --- a/classes/typography.html +++ /dev/null @@ -1,635 +0,0 @@ - - - - - - - - - diff --git a/classes/typography.js b/classes/typography.js new file mode 100644 index 0000000..92e207b --- /dev/null +++ b/classes/typography.js @@ -0,0 +1,637 @@ +/** + @license + Copyright (c) FabricElements. All rights reserved. + `skin-typography` + Typography Sizes applied to paper classes. + @group Skin Styles + @demo demo/typography.html skin-typography + */ +import '@polymer/polymer/polymer-legacy.js'; +import '@polymer/paper-styles/classes/typography.js'; +import '@polymer/paper-styles/typography.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = ` + +`; +styleElement.register('skin-typography'); diff --git a/demo/buttons.html b/demo/buttons.html index 931a791..4383c41 100644 --- a/demo/buttons.html +++ b/demo/buttons.html @@ -2,7 +2,7 @@ @@ -13,14 +13,12 @@ skin-buttons demo - - - - - - - - + + + + - -

skin-buttons

- -
+

buttons.html

Use paper-button attributes like "raised" to continue manipulating the styles



-

btn-rounded

@@ -76,7 +70,6 @@

btn--primary-color

-

btn-fill--primary-color

hello @@ -87,7 +80,6 @@

btn-fill--primary-color



-

btn--light-primary-color

hello @@ -97,7 +89,6 @@

btn--light-primary-color

-

btn-fill--light-primary-color

hello @@ -108,7 +99,6 @@

btn-fill--light-primary-color



-

btn--dark-primary-color

hello @@ -118,7 +108,6 @@

btn--dark-primary-color

-

btn-fill--dark-primary-color

hello @@ -129,7 +118,6 @@

btn-fill--dark-primary-color



-

btn--accent-color

hello @@ -139,7 +127,6 @@

btn--accent-color

-

btn-fill--accent-color

hello @@ -150,7 +137,6 @@

btn-fill--accent-color



-

btn--light-accent-color

hello @@ -160,7 +146,6 @@

btn--light-accent-color

-

btn-fill--light-accent-color

hello @@ -171,7 +156,6 @@

btn-fill--light-accent-color



-

btn--dark-accent-color

hello @@ -181,7 +165,6 @@

btn--dark-accent-color

-

btn-fill--dark-accent-color

hello @@ -192,8 +175,6 @@

btn-fill--dark-accent-color



- -

@@ -206,7 +187,6 @@

btn--secondary-color



-

btn-fill--secondary-color

hello @@ -217,7 +197,6 @@

btn-fill--secondary-color



-

btn--light-secondary-color

hello @@ -227,7 +206,6 @@

btn--light-secondary-color

-

btn-fill--light-secondary-color

hello @@ -238,7 +216,6 @@

btn-fill--light-secondary-color



-

btn--dark-secondary-color

hello @@ -248,7 +225,6 @@

btn--dark-secondary-color

-

btn-fill--dark-secondary-color

hello @@ -259,7 +235,6 @@

btn-fill--dark-secondary-color



-

btn--accent-secondary-color

hello @@ -269,7 +244,6 @@

btn--accent-secondary-color

-

btn-fill--accent-secondary-color

hello @@ -280,7 +254,6 @@

btn-fill--accent-secondary-color



-

btn--light-accent-secondary-color

hello @@ -290,7 +263,6 @@

btn--light-accent-secondary-color

-

btn-fill--light-accent-secondary-color

hello @@ -301,7 +273,6 @@

btn-fill--light-accent-secondary-color



-

btn--dark-accent-secondary-color

hello @@ -311,7 +282,6 @@

btn--dark-accent-secondary-color

-

btn-fill--dark-accent-secondary-color

hello @@ -323,8 +293,6 @@

btn-fill--dark-accent-secondary-color


-
- diff --git a/demo/grid.html b/demo/grid.html index b72ccd6..3d117f5 100644 --- a/demo/grid.html +++ b/demo/grid.html @@ -2,7 +2,7 @@ @@ -13,13 +13,13 @@ skin-styles-grid demo + + + - - - - - +`; + +document.head.appendChild(styleElement.content); + diff --git a/styles/default-theme.html b/styles/default-theme.js similarity index 87% rename from styles/default-theme.html rename to styles/default-theme.js index 0e00ca4..7120a5c 100644 --- a/styles/default-theme.html +++ b/styles/default-theme.js @@ -1,21 +1,23 @@ - +/** + @license + Copyright (c) FabricElements. All rights reserved. + */ +import '@polymer/polymer/lib/elements/custom-style.js'; +import '@polymer/paper-styles/color.js'; - - - - - +const styleElement = document.createElement('template'); +styleElement.innerHTML = ` + + + +`; + +document.head.appendChild(styleElement.content);