diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..6122eb4 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +node_modules +dist +example/src/js/prism.min.js +example/build +coverage \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..c01d8a3 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,12 @@ +{ + "extends": "airbnb", + "import/no-extraneous-dependencies": ["warn", { + "devDependencies": true, + "optionalDependencies": true, + "peerDependencies": true + }], + "env": { + "node": true, + "browser": true + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 16a2410..ae9a173 100755 --- a/.gitignore +++ b/.gitignore @@ -151,3 +151,6 @@ node_modules scss-report.json docs/ .jshint* +example/build +example/*.html +dist/main.scss \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index e1319b1..6eb46d9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,7 @@ language: node_js sudo: true node_js: 4 +script: npm run lint deploy: provider: script script: diff --git a/CHANGELOG.md b/CHANGELOG.md index 368a5f0..b78149f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,16 @@ CHANGELOG ========= +## Version 0.4.0 + +:new: The `0.4.0` removes the static assets transforming this into a sass only library. We will be releasing icons, images and javascript as part of the (soon to be release) React component library. + +_2016-09-06_ + + * New: source maps for sass files. + * Fix: remove icons, svgs and JS files + + ## Version 0.3.1 _2016-08-30_ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b175089..ff0e531 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,16 @@ -# Contributing Guidelines +# Issues + +If you encounter an issue with this sample app, you are welcome to submit a bug report. Before that, please search for similar issues. It's possible somebody has encountered this issue already. + +# Pull Requests + +If you want to contribute to the repository, here's a quick guide: + +1. Fork the repo +1. Develop your code changes +1. Ensure `eslint` is happy: `npm run lint` +1. Commit your changes +1. Push to your fork and submit a pull request ## Publishing a Github Page diff --git a/README.md b/README.md index 9e1dbf1..f0664ef 100755 --- a/README.md +++ b/README.md @@ -41,23 +41,14 @@ The path of the icon-fonts must be relative to the path of the compiled css file You will also need to make sure to load the paths of your `node_modules` directory into your Sass configurations, so that the library can reference its npm dependencies properly. -The javascript of this library relies on `JQuery 2.*.*` and above. Make sure it is -included before this library. - ## Directory Structure ```none . -│ -└── dist -    ├── _watson-developer-cloud-ui-components.scss // Compiled Sass -    ├── icons -    │   ├── link.svg -    │   └── reset.svg -    ├── watson-developer-cloud-ui-components.css // Compiled css -    ├── watson-developer-cloud-ui-components.js -    ├── watson-developer-cloud-ui-components.min.css -    └── watson-developer-cloud-ui-components.min.js +└─ dist + ├── _watson-developer-cloud-ui-components.scss // Compiled Sass + ├── watson-developer-cloud-ui-components.css // Compiled css + └── watson-developer-cloud-ui-components.min.css ``` ## Credits diff --git a/RELEASES.md b/RELEASES.md index 4ded1b6..2c9f29b 100644 --- a/RELEASES.md +++ b/RELEASES.md @@ -12,8 +12,8 @@ pip install bumpversion ### 2. Doing a release - [ ] Commit all the local changes -- [ ] Run `npm run dist` -- [ ] Commit the changes in `dist` +- [ ] Run `npm run compile` +- [ ] Commit the changes - [ ] Use `bumpversion` to update the version and commit the changes ```sh diff --git a/config.js b/config.js deleted file mode 100755 index 50cbe52..0000000 --- a/config.js +++ /dev/null @@ -1,32 +0,0 @@ -'use strict'; - -var pkg = require('./package.json'); -var src = './src'; -var docs = './docs'; -var dist = './dist'; - -module.exports = { - projectName: pkg.name, - paths: { - src: { - root: src, - styles: src + '/scss', - scripts: src + '/js', - views: src + '/views', - dist: src + '/dist', - icons: src + '/icons' - }, - docs: { - root: docs, - styles: docs + '/css', - scripts: docs + '/js', - iconFonts: docs + '/fonts/icon-fonts', - icons: docs + '/images/icons' - }, - dist: { - root: dist, - stylesheets: dist + '/stylesheets', - scripts: dist + '/js' - } - } -}; diff --git a/dist/icons/link.svg b/dist/icons/link.svg deleted file mode 100644 index 39affed..0000000 --- a/dist/icons/link.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - diff --git a/dist/icons/reset.svg b/dist/icons/reset.svg deleted file mode 100644 index a167782..0000000 --- a/dist/icons/reset.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/dist/js/components/tab-panels.js b/dist/js/components/tab-panels.js deleted file mode 100644 index 7df6541..0000000 --- a/dist/js/components/tab-panels.js +++ /dev/null @@ -1,16 +0,0 @@ -/* -Tabbed Panels js -*/ -(function() { - $('.tab-panels--tab').click(function(e) { - e.preventDefault(); - var self = $(this); - var inputGroup = self.closest('.tab-panels'); - var idName = null; - - inputGroup.find('.active').removeClass('active'); - self.addClass('active'); - idName = self.attr('href'); - $(idName).addClass('active'); - }); -})(); diff --git a/dist/js/script.js b/dist/js/script.js deleted file mode 100644 index b1c40e7..0000000 --- a/dist/js/script.js +++ /dev/null @@ -1 +0,0 @@ -// main lib js file diff --git a/dist/js/vendors/browser-detect.js b/dist/js/vendors/browser-detect.js deleted file mode 100644 index 7aabab0..0000000 --- a/dist/js/vendors/browser-detect.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Copyright 2015 IBM Corp. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -/* -Browser-detect.js by James Zhang. -This is a very basic browser sniffer. -*/ - -(function() { - - var userAgent = window.navigator.userAgent; - // Browser User Agent Strings - var ie = 'MSIE'; - var ie9 = 'MSIE 9.0'; - var ie10 = 'MSIE 10.0'; - var chrome = 'Chrome'; - var firefox = 'Firefox/'; - var safari = 'Safari'; - // OS User Agent Strings - var windows = 'Windows'; - var mac = 'Macintosh'; - var linux = 'Linux'; - - // class names - var ie_class = 'ie'; - var ie9_class = 'ie9'; - var ie10_class = 'ie10'; - var ie11_class = 'ie11'; - var chrome_class = 'chrome'; - var firefox_class = 'firefox'; - var safari_class = 'safari'; - var windows_class = 'windows'; - var mac_class = 'mac'; - var linux_class = 'linux'; - - // All matching classes will be appended to classes - var classes = ''; - - // using UserAgent, checking to see which match - if (userAgent.indexOf(ie) > -1) { - classes += ie_class + ' '; - } - if (userAgent.indexOf(ie9) > -1) { - classes += ie9_class + ' '; - } - if (userAgent.indexOf(ie10) > -1) { - classes += ie10_class + ' '; - } - if (!!navigator.userAgent.match(/Trident.*rv\:11\./)) { - classes += ie_class + ' ' + ie11_class + ' '; - } - if (userAgent.indexOf(safari) > -1 && userAgent.indexOf(chrome) == -1) { - classes += safari_class + ' '; - } - if (userAgent.indexOf(chrome) > -1) { - classes += chrome_class + ' '; - } - if (userAgent.indexOf(firefox) > -1) { - classes += firefox_class + ' '; - } - if (userAgent.indexOf(windows) > -1) { - classes += windows_class + ' '; - } - if (userAgent.indexOf(mac) > -1) { - classes += mac_class + ' '; - } - if (userAgent.indexOf(linux) > -1) { - classes += linux_class + ' '; - } - - // trimming off additional space - classes = classes.slice(0,-1); - - document.addEventListener('DOMContentLoaded', function() { - // adding class names to body tag - document.body.className += classes; - }); - - // exposing browser information globally - window.browserInfo = classes; - - return classes; - -})(); diff --git a/dist/lib/components/icon/_icon-fonts.scss b/dist/lib/components/icon/_icon-fonts.scss deleted file mode 100755 index 78d553f..0000000 --- a/dist/lib/components/icon/_icon-fonts.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - font-family: "icons"; - src: url('../fonts/icon-fonts/icons.eot'); - src: url('../fonts/icon-fonts/icons.eot?#iefix') format('eot'), - url('../fonts/icon-fonts/icons.woff2') format('woff2'), - url('../fonts/icon-fonts/icons.woff') format('woff'), - url('../fonts/icon-fonts/icons.ttf') format('truetype'), - url('../fonts/icon-fonts/icons.svg#icons') format('svg'); -} - -.icon:before { - font-family: "icons"; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-style: normal; - font-variant: normal; - font-weight: normal; - /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ - text-decoration: none; - text-transform: none; -} - - -.icon-link:before { - content: "\E001"; -} - -.icon-reset:before { - content: "\E002"; -} diff --git a/dist/lib/components/icon/_icon.scss b/dist/lib/components/icon/_icon.scss index de6fc96..92db68d 100755 --- a/dist/lib/components/icon/_icon.scss +++ b/dist/lib/components/icon/_icon.scss @@ -1,4 +1,22 @@ -@import 'icon-fonts'; +.icon:before { + font-family: "icons"; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-style: normal; + font-variant: normal; + font-weight: normal; + /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ + text-decoration: none; + text-transform: none; +} + +.icon-link:before { + content: "\E001"; +} + +.icon-reset:before { + content: "\E002"; +} .icon { vertical-align: middle; diff --git a/dist/watson-developer-cloud-ui-components.css b/dist/watson-developer-cloud-ui-components.css index 6b643e0..6382fc1 100644 --- a/dist/watson-developer-cloud-ui-components.css +++ b/dist/watson-developer-cloud-ui-components.css @@ -320,7 +320,6 @@ body { border-bottom: 2px solid #121212; font-weight: 400; text-decoration: none; - -webkit-transition: 0.2s; transition: 0.2s; } .base--a:visited { color: #121212; @@ -355,8 +354,8 @@ body { .base--pre, .base--pre code, .base--pre .base--code { display: block; -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -ms-hyphens: none; + hyphens: none; word-spacing: normal; text-align: left; word-break: normal; @@ -364,8 +363,7 @@ body { word-wrap: normal; direction: ltr; -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; + tab-size: 2; overflow-y: overlay; } .base--pre { @@ -453,10 +451,8 @@ body { border: 2px solid #aeaeae; border-radius: 50%; content: ''; - -webkit-transform: translateY(-0.125em); - transform: translateY(-0.125em); } + transform: translateY(-0.125em); } .base--radio:checked + label::before { - background: -webkit-radial-gradient(#323232 40%, transparent 40%); background: radial-gradient(#323232 40%, transparent 40%); } .base--color-input { @@ -496,8 +492,7 @@ input[type="week"]::-webkit-inner-spin-button { background: #fff; border-radius: 1.5em; box-shadow: inset 0 0 0 0.1875em #464646; - -webkit-transition-duration: .5s; - transition-duration: .5s; } + transition-duration: .5s; } .base--range-input:active::-webkit-slider-thumb { box-shadow: inset 0 0 0 1.25em #464646; width: 1.875em; @@ -540,8 +535,7 @@ input[type="week"]::-webkit-inner-spin-button { vertical-align: middle; border: 2px solid #aeaeae; content: ''; - -webkit-transform: translateY(-0.125em); - transform: translateY(-0.125em); } + transform: translateY(-0.125em); } .base--checkbox:checked + label::before { background: #323232; box-shadow: inset 0 0 0 1.33333px #fff; } @@ -571,7 +565,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: transparent; border: 2px solid #9855d4; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; } .base--button:hover, .base--button:focus { @@ -579,10 +572,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #bd92e3; color: #bd92e3; } .base--button:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .base--button_submit { padding: 0.25em 2em; @@ -591,7 +582,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: transparent; border: 2px solid #9855d4; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; } .base--button_submit:hover, .base--button_submit:focus { @@ -599,10 +589,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #bd92e3; color: #bd92e3; } .base--button_submit:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .base--button_reset { padding: 0.25em 2em; @@ -611,7 +599,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: transparent; border: 2px solid #9855d4; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; } .base--button_reset:hover, .base--button_reset:focus { @@ -619,10 +606,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #bd92e3; color: #bd92e3; } .base--button_reset:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .base--button_black { padding: 0.25em 2em; @@ -631,7 +616,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: transparent; border: 2px solid #121212; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; } .base--button_black:hover, .base--button_black:focus { @@ -639,10 +623,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #383838; color: #383838; } .base--button_black:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .base--button_teal { padding: 0.25em 2em; @@ -651,7 +633,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: transparent; border: 2px solid #008571; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; } .base--button_teal:hover, .base--button_teal:focus { @@ -659,10 +640,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #00d2b2; color: #00d2b2; } .base--button_teal:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .base--button_icon-hyperlink { background-color: transparent; @@ -677,10 +656,8 @@ input[type="week"]::-webkit-inner-spin-button { border-color: transparent; color: #121212; } .base--button_icon-hyperlink:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: none; - transform: none; } + transform: none; } .base--button_icon-hyperlink--icon { margin-right: 0.2em; } .base--button_icon-hyperlink--icon.icon-reset { @@ -690,7 +667,6 @@ input[type="week"]::-webkit-inner-spin-button { border-bottom: 2px solid #121212; font-weight: 400; text-decoration: none; - -webkit-transition: 0.2s; transition: 0.2s; padding-bottom: 0.1em; } .base--button_icon-hyperlink--link:visited { @@ -734,11 +710,6 @@ input[type="week"]::-webkit-inner-spin-button { margin-top: 3rem; margin-bottom: 3rem; } -@font-face { - font-family: "icons"; - src: url("../fonts/icon-fonts/icons.eot"); - src: url("../fonts/icon-fonts/icons.eot?#iefix") format("eot"), url("../fonts/icon-fonts/icons.woff2") format("woff2"), url("../fonts/icon-fonts/icons.woff") format("woff"), url("../fonts/icon-fonts/icons.ttf") format("truetype"), url("../fonts/icon-fonts/icons.svg#icons") format("svg"); } - .icon:before { font-family: "icons"; -webkit-font-smoothing: antialiased; @@ -819,7 +790,6 @@ input[type="week"]::-webkit-inner-spin-button { background-color: #734098; border: 2px solid #734098; border-radius: 10rem; - -webkit-transition: 0.2s; transition: 0.2s; display: inline-block; color: #fff; @@ -831,19 +801,15 @@ input[type="week"]::-webkit-inner-spin-button { border-color: #9966bf; color: #bd92e3; } .metatag:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(2px); - transform: translateY(2px); } + transform: translateY(2px); } .metatag:hover, .metatag:focus { background-color: #734098; border-color: #734098; color: #fff; } .metatag:active { - -webkit-transition: 0s; transition: 0s; - -webkit-transform: translateY(0px); - transform: translateY(0px); } + transform: translateY(0px); } .loader-container { display: inline-block; @@ -856,14 +822,10 @@ input[type="week"]::-webkit-inner-spin-button { .loader { height: 100%; width: 100%; - -webkit-transform: translateZ(0) rotate(300deg); - transform: translateZ(0) rotate(300deg); - -webkit-transform-origin: 25px 25px; - transform-origin: 25px 25px; - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-animation: b 4s ease-out infinite; - animation: b 4s ease-out infinite; } + transform: translateZ(0) rotate(300deg); + transform-origin: 25px 25px; + transform-origin: center center; + animation: b 4s ease-out infinite; } .loader--path { stroke-dasharray: 125px; stroke-dashoffset: 9.7px; @@ -874,19 +836,9 @@ input[type="week"]::-webkit-inner-spin-button { stroke: #9855d4; stroke-width: 4.65116px; stroke-linecap: butt; - -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.5, 0.08, 0, 1); transition: stroke-dashoffset 1s cubic-bezier(0.5, 0.08, 0, 1); - -webkit-animation: a 4s ease-out infinite; animation: a 4s ease-out infinite; } -@-webkit-keyframes a { - 0% { - stroke-dashoffset: 9.7px; } - 60% { - stroke-dashoffset: 113.52px; } - to { - stroke-dashoffset: 9.7px; } } - @keyframes a { 0% { stroke-dashoffset: 9.7px; } @@ -895,26 +847,12 @@ input[type="week"]::-webkit-inner-spin-button { to { stroke-dashoffset: 9.7px; } } -@-webkit-keyframes b { - 0% { - -webkit-transform: rotate(300deg); - transform: rotate(300deg); } - 60% { - -webkit-transform: rotate(1320deg); - transform: rotate(1320deg); } - to { - -webkit-transform: rotate(2100deg); - transform: rotate(2100deg); } } - @keyframes b { 0% { - -webkit-transform: rotate(300deg); transform: rotate(300deg); } 60% { - -webkit-transform: rotate(1320deg); transform: rotate(1320deg); } to { - -webkit-transform: rotate(2100deg); transform: rotate(2100deg); } } ._container { diff --git a/dist/watson-developer-cloud-ui-components.js b/dist/watson-developer-cloud-ui-components.js deleted file mode 100644 index 4016299..0000000 --- a/dist/watson-developer-cloud-ui-components.js +++ /dev/null @@ -1,128 +0,0 @@ -/** - * Copyright 2015 IBM Corp. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -/* -Browser-detect.js by James Zhang. -This is a very basic browser sniffer. -*/ - -(function() { - - var userAgent = window.navigator.userAgent; - // Browser User Agent Strings - var ie = 'MSIE'; - var ie9 = 'MSIE 9.0'; - var ie10 = 'MSIE 10.0'; - var chrome = 'Chrome'; - var firefox = 'Firefox/'; - var safari = 'Safari'; - // OS User Agent Strings - var windows = 'Windows'; - var mac = 'Macintosh'; - var linux = 'Linux'; - - // class names - var ie_class = 'ie'; - var ie9_class = 'ie9'; - var ie10_class = 'ie10'; - var ie11_class = 'ie11'; - var chrome_class = 'chrome'; - var firefox_class = 'firefox'; - var safari_class = 'safari'; - var windows_class = 'windows'; - var mac_class = 'mac'; - var linux_class = 'linux'; - - // All matching classes will be appended to classes - var classes = ''; - - // using UserAgent, checking to see which match - if (userAgent.indexOf(ie) > -1) { - classes += ie_class + ' '; - } - if (userAgent.indexOf(ie9) > -1) { - classes += ie9_class + ' '; - } - if (userAgent.indexOf(ie10) > -1) { - classes += ie10_class + ' '; - } - if (!!navigator.userAgent.match(/Trident.*rv\:11\./)) { - classes += ie_class + ' ' + ie11_class + ' '; - } - if (userAgent.indexOf(safari) > -1 && userAgent.indexOf(chrome) == -1) { - classes += safari_class + ' '; - } - if (userAgent.indexOf(chrome) > -1) { - classes += chrome_class + ' '; - } - if (userAgent.indexOf(firefox) > -1) { - classes += firefox_class + ' '; - } - if (userAgent.indexOf(windows) > -1) { - classes += windows_class + ' '; - } - if (userAgent.indexOf(mac) > -1) { - classes += mac_class + ' '; - } - if (userAgent.indexOf(linux) > -1) { - classes += linux_class + ' '; - } - - // trimming off additional space - classes = classes.slice(0,-1); - - document.addEventListener('DOMContentLoaded', function() { - // adding class names to body tag - document.body.className += classes; - }); - - // exposing browser information globally - window.browserInfo = classes; - - return classes; - -})(); - -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+json+python+sass+scss */ -var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(g?b[1].length:0),_=b.index+b[0].length,A=m,S=y,P=r.length;P>A&&_>S;++A)S+=(r[A].matchedStr||r[A]).length,w>=S&&(++m,y=S);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,S),b.index-=y}if(b){g&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),j=[m,k];x&&j.push(x);var N=new a(l,c?n.tokenize(b,c):b,d,b,h);j.push(N),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); -Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; -Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); -Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; -Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; -!function(e){var t={variable:[{pattern:/\$?\(\([\w\W]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\w\W]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b-?(?:0x[\dA-Fa-f]+|\d*\.?\d+(?:[Ee]-?\d+)?)\b/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[a-z0-9_#\?\*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)(?:"|')?(\w+?)(?:"|')?\s*\r?\n(?:[\s\S])*?\r?\n\2/g,lookbehind:!0,greedy:!0,inside:t},{pattern:/(["'])(?:\\\\|\\?[^\\])*?\1/g,greedy:!0,inside:t}],variable:t.variable,"function":{pattern:/(^|\s|;|\||&)(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|npm|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|\s|;|\||&)/,lookbehind:!0},keyword:{pattern:/(^|\s|;|\||&)(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|\s|;|\||&)/,lookbehind:!0},"boolean":{pattern:/(^|\s|;|\||&)(?:true|false)(?=$|\s|;|\||&)/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a["function"]=e.languages.bash["function"],a.keyword=e.languages.bash.keyword,a.boolean=e.languages.bash.boolean,a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation}(Prism); -Prism.languages.json={property:/".*?"(?=\s*:)/gi,string:/"(?!:)(\\?[^"])*?"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json; -Prism.languages.python={"triple-quoted-string":{pattern:/"""[\s\S]+?"""|'''[\s\S]+?'''/,alias:"string"},comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},string:{pattern:/("|')(?:\\\\|\\?[^\\\r\n])*?\1/,greedy:!0},"function":{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_][a-zA-Z0-9_]*(?=\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)[a-z0-9_]+/i,lookbehind:!0},keyword:/\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|pass|print|raise|return|try|while|with|yield)\b/,"boolean":/\b(?:True|False)\b/,number:/\b-?(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,punctuation:/[{}[\];(),.:]/}; -!function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m,lookbehind:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var a=/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i,t=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|or|not)\b/,{pattern:/(\s+)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,inside:{punctuation:/:/,variable:a,operator:t}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s]+.*)/m,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:a,operator:t,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,delete e.languages.sass.selector,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*)\S(?:,?[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,?[^,\r\n]+)*)*/,lookbehind:!0}})}(Prism); -Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-_\w]+/,variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\w-]|\$[-_\w]+|#\{\$[-_\w]+\})+(?=\s*:)/i,inside:{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}},Prism.languages.insertBefore("scss","important",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss); - -/* -Tabbed Panels js -*/ -(function() { - $('.tab-panels--tab').click(function(e) { - e.preventDefault(); - var self = $(this); - var inputGroup = self.closest('.tab-panels'); - var idName = null; - - inputGroup.find('.active').removeClass('active'); - self.addClass('active'); - idName = self.attr('href'); - $(idName).addClass('active'); - }); -})(); - -// main lib js file diff --git a/dist/watson-developer-cloud-ui-components.min.css b/dist/watson-developer-cloud-ui-components.min.css index 7c4438f..95c47b2 100644 --- a/dist/watson-developer-cloud-ui-components.min.css +++ b/dist/watson-developer-cloud-ui-components.min.css @@ -1 +1 @@ -@charset "UTF-8";hr,img,legend{border:0}a,hr,input[type=checkbox],input[type=radio],legend,td,th{padding:0}pre,textarea{overflow:auto}.base--checkbox+label,.base--radio+label,.prism{position:relative}.base--color-input,.base--date-input,.base--datetime-local-input,.base--email-input,.base--file-input,.base--hidden-input,.base--input,.base--month-input,.base--number-input,.base--password-input,.base--range-input,.base--search-input,.base--select,.base--tel-input,.base--text-input,.base--textarea,.base--time-input,.base--url-input,.base--week-input{font-family:"Helvetica Neue",Helvetica,"Open Sans",Arial,"Lucida Grande",Roboto,sans-serif}.base--code,.base--pre,.base--pre .base--code,.base--pre code{font-family:source-code-pro,Menlo,Consolas,monospace}.base--article::after,.base--article::before,.base--div::after,.base--div::before,.base--footer::after,.base--footer::before,.base--header::after,.base--header::before,article::after,article::before,div::after,div::before,footer::after,footer::before,header::after,header::before{content:'';display:table;clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{background:0 0;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;font-size:100%;margin:0;vertical-align:baseline}a:active,a:hover{outline:0}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}ins{text-decoration:none}del{text-decoration:line-through}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}ul{list-style:none}svg:not(:root){overflow:hidden}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}code,kbd,pre,samp{font-size:1em;font-family:monospace,sans-serif}hr{height:1px;border-top:1px solid;margin:1em 0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}.base--blockquote,.base--em{font-style:italic}button,input[type=button]{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=file],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}input,select{vertical-align:middle}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:inherit}embed,img,object,video{max-width:100%;height:auto}body{margin:0;background:#fff;color:#323232;font-family:"Helvetica Neue",Helvetica,"Open Sans",Arial,"Lucida Grande",Roboto,sans-serif;font-weight:400;line-height:1.5}.base--a,.base--a:visited{color:#121212;border-bottom:2px solid #121212}.base--h1,.base--h2,.base--h3,.base--h4{font-weight:200}body *+*{margin-top:1rem}.base--h1{font-size:3.5em}.base--h2{font-size:2.25em}.base--h3{font-size:1.5em}.base--h4{font-size:1.25em}.base--a,.base--h5,.base--h6{font-weight:400}.base--h5{font-size:1em}.base--h6{font-size:.8em}.base--a{text-decoration:none;-webkit-transition:.2s;transition:.2s}.base--a:focus,.base--a:hover{color:#9855d4;border-bottom:2px solid #9855d4}.base--strong{font-weight:700}.base--p{font-size:1em;font-weight:400;color:#121212}.base--p_light{color:#777677}.base--p_inline{display:inline}.base--code{padding:.2em .5em;font-size:.8em;color:#008571;outline:rgba(199,199,199,.25) solid 1px}.base--pre,.base--pre .base--code,.base--pre code{display:block;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;word-spacing:normal;text-align:left;word-break:normal;white-space:pre;word-wrap:normal;direction:ltr;-moz-tab-size:2;-o-tab-size:2;tab-size:2;overflow-y:overlay}.base--pre{margin:0 0 .5em;overflow:auto;white-space:normal;padding:1rem 2rem;background-color:#f0f2f4;color:#121212;font-size:.875em}.base--pre .base--code,.base--pre code{font-size:1em;outline:0;margin:0;padding:0}.base--ol,.base--ul{padding-left:0;margin-left:0;list-style:none;width:100%}.base--ol .base--li,.base--ol li,.base--ul .base--li,.base--ul li{margin-top:0}.base--ol .base--li::before,.base--ol li::before,.base--ul .base--li::before,.base--ul li::before{padding-right:.4em;text-align:right}.base--ul .base--li::before,.base--ul li::before{content:"•"}.base--ul_inline .base--li{display:inline-block;margin-top:0;margin-right:1rem}.base--ul_inline .base--li::before{display:inline-block}.base--ul_no-bullets .base--li::before{display:none}.base--ol .base--li::before,.base--ol li::before{content:counter(table-ol) "."}.base--blockquote{padding:0 1.5em;margin-right:1em;margin-left:1em;color:#464646;border-left:.25em solid}.base--color-input,.base--date-input,.base--datetime-local-input,.base--email-input,.base--file-input,.base--hidden-input,.base--input,.base--month-input,.base--number-input,.base--password-input,.base--range-input,.base--search-input,.base--select,.base--tel-input,.base--text-input,.base--time-input,.base--url-input,.base--week-input{width:100%;padding:.6em 1em;font-size:1em;font-weight:300;border:2px solid #464646;background-color:#fff;line-height:normal;display:block}.base--color-input:focus,.base--date-input:focus,.base--datetime-local-input:focus,.base--email-input:focus,.base--file-input:focus,.base--hidden-input:focus,.base--input:focus,.base--month-input:focus,.base--number-input:focus,.base--password-input:focus,.base--range-input:focus,.base--search-input:focus,.base--select:focus,.base--tel-input:focus,.base--text-input:focus,.base--time-input:focus,.base--url-input:focus,.base--week-input:focus{outline:#9855d4 solid 3px;border-color:#9855d4}.base--color-input:disabled,.base--date-input:disabled,.base--datetime-local-input:disabled,.base--email-input:disabled,.base--file-input:disabled,.base--hidden-input:disabled,.base--input:disabled,.base--month-input:disabled,.base--number-input:disabled,.base--password-input:disabled,.base--range-input:disabled,.base--search-input:disabled,.base--select:disabled,.base--tel-input:disabled,.base--text-input:disabled,.base--time-input:disabled,.base--url-input:disabled,.base--week-input:disabled{background-color:#e0e0e0}.base--block-label{display:block;margin:1.25em 0 .25em}.base--checkbox+label::before,.base--radio+label::before{margin-right:1rem;content:'';vertical-align:middle}.base--inline-label{display:inline}.base--radio{display:none}.base--radio+label::before{display:inline-block;width:1em;height:1em;border:2px solid #aeaeae;border-radius:50%;-webkit-transform:translateY(-.125em);transform:translateY(-.125em)}.base--radio:checked+label::before{background:-webkit-radial-gradient(#323232 40%,transparent 40%);background:radial-gradient(#323232 40%,transparent 40%)}.base--color-input{height:3em;padding:.25em;background:#fff}input[type=date]::-webkit-inner-spin-button,input[type=datetime]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-inner-spin-button,input[type=month]::-webkit-inner-spin-button,input[type=time]::-webkit-inner-spin-button,input[type=week]::-webkit-inner-spin-button{height:0}.base--range-input{height:.5em;padding:0;background-color:#fff;border-radius:.5em;box-shadow:inset 0 0 0 .125em #464646}.base--range-input:focus{outline:0;box-shadow:inset 0 0 0 .125em #9855d4}.base--range-input:disabled{opacity:.5}.base--range-input::-moz-range-track{height:.5em;padding:0;background-color:#fff;border-radius:.5em;box-shadow:inset 0 0 0 .125em #464646}.base--range-input::-webkit-slider-thumb{-webkit-appearance:none;width:1.5em;height:1.5em;background:#fff;border-radius:1.5em;box-shadow:inset 0 0 0 .1875em #464646;-webkit-transition-duration:.5s;transition-duration:.5s}.base--range-input:active::-webkit-slider-thumb{box-shadow:inset 0 0 0 1.25em #464646;width:1.875em;height:1.875em}.base--range-input::-moz-range-thumb{-moz-appearance:none;width:1.5em;height:1.5em;background:#fff;border-radius:1.5em;box-shadow:inset 0 0 0 .1875em #464646;transition-duration:.5s}.base--range-input:active::-moz-range-thumb{box-shadow:inset 0 0 0 1.25em #464646;width:1.875em;height:1.875em}.base--textarea{width:100%;padding:.6em 1em;font-size:1em;font-weight:300;border:2px solid #464646;background-color:#fff}.base--button,.base--button_black,.base--button_reset,.base--button_submit,.base--button_teal{padding:.25em 2em;font-weight:500}.base--textarea:focus{outline:#9855d4 solid 3px;border-color:#9855d4}.base--textarea:disabled{background-color:#c7c7c7}.base--checkbox{display:none}.base--checkbox+label::before{display:inline-block;width:1em;height:1em;border:2px solid #aeaeae;-webkit-transform:translateY(-.125em);transform:translateY(-.125em)}.base--checkbox:checked+label::before{background:#323232;box-shadow:inset 0 0 0 1.33px #fff}.base--select{border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20viewbox%3D%220%200%2012%2012%20true%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23464646%22%20points%3D%220%2C0%205%2E85%2C12%2012%2C0%20%22%2F%3E%3C%2Fsvg%3E);background-size:1em 1em;background-repeat:no-repeat;background-position:calc(100% - .3em) 1em}.firefox .base--select,.ie .base--select{background-image:none;background-size:0}.base--button{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block}.base--button:focus,.base--button:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(2px);transform:translateY(2px)}.base--button_submit{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block}.base--button_submit:focus,.base--button_submit:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button_submit:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(2px);transform:translateY(2px)}.base--button_reset{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block}.base--button_reset:focus,.base--button_reset:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button_reset:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(2px);transform:translateY(2px)}.base--button_black{color:#121212;background-color:transparent;border:2px solid #121212;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block}.base--button_black:focus,.base--button_black:hover{background-color:rgba(38,38,38,0);border-color:#383838;color:#383838}.base--button_black:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(2px);transform:translateY(2px)}.base--button_teal{color:#008571;background-color:transparent;border:2px solid #008571;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block}.base--button_teal:focus,.base--button_teal:hover{background-color:rgba(38,38,38,0);border-color:#00d2b2;color:#00d2b2}.base--button_teal:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(2px);transform:translateY(2px)}.base--button_icon-hyperlink{background-color:transparent;border:none;padding:0;margin:0;text-decoration:none;color:#121212}.base--button_icon-hyperlink:focus,.base--button_icon-hyperlink:hover{background-color:transparent;border-color:transparent;color:#121212}.base--button_icon-hyperlink--link,.base--button_icon-hyperlink--link:visited{color:#121212;border-bottom:2px solid #121212}.base--button_icon-hyperlink:active{-webkit-transition:0s;transition:0s;-webkit-transform:none;transform:none}.base--button_icon-hyperlink--icon{margin-right:.2em}.base--button_icon-hyperlink--icon.icon-reset{font-size:1.5em}.base--button_icon-hyperlink--link{font-weight:400;text-decoration:none;-webkit-transition:.2s;transition:.2s;padding-bottom:.1em}.base--button_icon-hyperlink--link:focus,.base--button_icon-hyperlink--link:hover{color:#9855d4;border-bottom:2px solid #9855d4}.base--table{width:100%;border-top:1px solid #c7c7c7;border-bottom:1px solid #c7c7c7;font-weight:300;color:#777677}.base--thead{font-weight:500;border-bottom:2px solid #e0e0e0;text-transform:uppercase}.base--td{padding:1em}.base--tr{background-color:transparent;border-top:1px solid #e0e0e0}.base--hr{border-top:2px solid #c7c7c7;margin:auto auto auto 0}.base--hr_small{width:23.40426%;float:none;clear:both;display:block;margin-top:3rem;margin-bottom:3rem}@font-face{font-family:icons;src:url(../fonts/icon-fonts/icons.eot);src:url(../fonts/icon-fonts/icons.eot?#iefix) format("eot"),url(../fonts/icon-fonts/icons.woff2) format("woff2"),url(../fonts/icon-fonts/icons.woff) format("woff"),url(../fonts/icon-fonts/icons.ttf) format("truetype"),url(../fonts/icon-fonts/icons.svg#icons) format("svg")}.icon:before{font-family:icons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;text-decoration:none;text-transform:none}.icon-link:before{content:"\E001"}.icon-reset:before{content:"\E002"}.icon{vertical-align:middle;font-size:1em;color:inherit}.panel{background-color:#e0e0e0;border:2px solid #c7c7c7;padding:0 1rem 1rem}.tab-panels{padding:0;background-color:#f4f4f4;border:1px solid #777677}.tab-panels--tab-list{border-bottom:1px solid #e0e0e0}.tab-panels--tab-list-item{display:inline-block;margin-top:0}.tab-panels--tab{display:block;text-decoration:none;padding:.66667rem 1.33333rem;border-bottom:6px solid transparent}.tab-panels--tab.base--a{border-bottom:6px solid transparent;color:#121212}.tab-panels--tab.active,.tab-panels--tab:focus,.tab-panels--tab:hover{border-bottom:6px solid #777677}.tab-panels--tab-content{margin-top:0;padding:2rem;background-color:#fff}.tab-panels--tab-pane{display:none;margin-top:0}.tab-panels--tab-pane.active{display:block}.clickable-tab{background-color:#f4f4f4;display:inline-block;padding:.8em 2em;font-size:1em;border-left:6px solid #734098;margin-top:0;cursor:pointer}.base--radio+.clickable-tab{border-left-color:transparent}.base--radio:checked+.clickable-tab{border-left-color:#734098}.base--radio+.clickable-tab::before{display:none}.metatag{background-color:#734098;border:2px solid #734098;border-radius:10rem;-webkit-transition:.2s;transition:.2s;display:inline-block;color:#fff;padding:.2em 1.75em;font-weight:300;font-size:.9em}.metatag:focus,.metatag:hover{background-color:#734098;border-color:#734098;color:#fff}.metatag:active{-webkit-transition:0s;transition:0s;-webkit-transform:translateY(0);transform:translateY(0)}.loader-container{display:inline-block;width:5.625rem;height:5.625rem}.loader-container_small{width:2.8125rem;height:2.8125rem}.loader{height:100%;width:100%;-webkit-transform:translateZ(0) rotate(300deg);transform:translateZ(0) rotate(300deg);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation:b 4s ease-out infinite;animation:b 4s ease-out infinite}.loader--path{stroke-dasharray:125px;stroke-dashoffset:9.7px;r:20px;cx:50px;cy:50px;fill:transparent;stroke:#9855d4;stroke-width:4.65px;stroke-linecap:butt;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);transition:stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);-webkit-animation:a 4s ease-out infinite;animation:a 4s ease-out infinite}@-webkit-keyframes a{0%,to{stroke-dashoffset:9.7px}60%{stroke-dashoffset:113.52px}}@keyframes a{0%,to{stroke-dashoffset:9.7px}60%{stroke-dashoffset:113.52px}}@-webkit-keyframes b{0%{-webkit-transform:rotate(300deg);transform:rotate(300deg)}60%{-webkit-transform:rotate(1320deg);transform:rotate(1320deg)}to{-webkit-transform:rotate(2100deg);transform:rotate(2100deg)}}@keyframes b{0%{-webkit-transform:rotate(300deg);transform:rotate(300deg)}60%{-webkit-transform:rotate(1320deg);transform:rotate(1320deg)}to{-webkit-transform:rotate(2100deg);transform:rotate(2100deg)}}._container{width:100%;margin:auto;padding:0 1rem}@media (min-width:768px){._container{max-width:768px}}._container_xx-small{max-width:320px}._container_x-small{max-width:360px}._container_small{max-width:640px}._container_medium{max-width:768px}._container_large{max-width:1024px}._container_x-large{max-width:1200px}._container_xx-large{max-width:1280px}code[class*=language-] ::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#777677}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#9855d4}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#db2780}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#00b4a0}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.prism+.prism{margin-top:-15px}.line-highlight{background:rgba(75,145,80,.15);left:0;line-height:inherit;margin-top:5px;pointer-events:none;position:absolute;right:0} \ No newline at end of file +@charset "UTF-8";hr,img,legend{border:0}a,hr,input[type=checkbox],input[type=radio],legend,td,th{padding:0}pre,textarea{overflow:auto}.base--checkbox+label,.base--radio+label,.prism{position:relative}.base--color-input,.base--date-input,.base--datetime-local-input,.base--email-input,.base--file-input,.base--hidden-input,.base--input,.base--month-input,.base--number-input,.base--password-input,.base--range-input,.base--search-input,.base--select,.base--tel-input,.base--text-input,.base--textarea,.base--time-input,.base--url-input,.base--week-input{font-family:"Helvetica Neue",Helvetica,"Open Sans",Arial,"Lucida Grande",Roboto,sans-serif}.base--code,.base--pre,.base--pre .base--code,.base--pre code{font-family:source-code-pro,Menlo,Consolas,monospace}.base--article::after,.base--article::before,.base--div::after,.base--div::before,.base--footer::after,.base--footer::before,.base--header::after,.base--header::before,article::after,article::before,div::after,div::before,footer::after,footer::before,header::after,header::before{content:'';display:table;clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{background:0 0;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;font-size:100%;margin:0;vertical-align:baseline}a:active,a:hover{outline:0}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}ins{text-decoration:none}del{text-decoration:line-through}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}ul{list-style:none}svg:not(:root){overflow:hidden}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}code,kbd,pre,samp{font-size:1em;font-family:monospace,sans-serif}hr{height:1px;border-top:1px solid;margin:1em 0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}.base--blockquote,.base--em{font-style:italic}button,input[type=button]{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=file],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}input,select{vertical-align:middle}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:inherit}embed,img,object,video{max-width:100%;height:auto}body{margin:0;background:#fff;color:#323232;font-family:"Helvetica Neue",Helvetica,"Open Sans",Arial,"Lucida Grande",Roboto,sans-serif;font-weight:400;line-height:1.5}.base--a,.base--a:visited{color:#121212;border-bottom:2px solid #121212}.base--h1,.base--h2,.base--h3,.base--h4{font-weight:200}body *+*{margin-top:1rem}.base--h1{font-size:3.5em}.base--h2{font-size:2.25em}.base--h3{font-size:1.5em}.base--h4{font-size:1.25em}.base--a,.base--h5,.base--h6{font-weight:400}.base--h5{font-size:1em}.base--h6{font-size:.8em}.base--a{text-decoration:none;transition:.2s}.base--a:focus,.base--a:hover{color:#9855d4;border-bottom:2px solid #9855d4}.base--strong{font-weight:700}.base--p{font-size:1em;font-weight:400;color:#121212}.base--p_light{color:#777677}.base--p_inline{display:inline}.base--code{padding:.2em .5em;font-size:.8em;color:#008571;outline:rgba(199,199,199,.25) solid 1px}.base--pre,.base--pre .base--code,.base--pre code{display:block;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;word-spacing:normal;text-align:left;word-break:normal;white-space:pre;word-wrap:normal;direction:ltr;-moz-tab-size:2;tab-size:2;overflow-y:overlay}.base--pre{margin:0 0 .5em;overflow:auto;white-space:normal;padding:1rem 2rem;background-color:#f0f2f4;color:#121212;font-size:.875em}.base--pre .base--code,.base--pre code{font-size:1em;outline:0;margin:0;padding:0}.base--ol,.base--ul{padding-left:0;margin-left:0;list-style:none;width:100%}.base--ol .base--li,.base--ol li,.base--ul .base--li,.base--ul li{margin-top:0}.base--ol .base--li::before,.base--ol li::before,.base--ul .base--li::before,.base--ul li::before{padding-right:.4em;text-align:right}.base--ul .base--li::before,.base--ul li::before{content:"•"}.base--ul_inline .base--li{display:inline-block;margin-top:0;margin-right:1rem}.base--ul_inline .base--li::before{display:inline-block}.base--ul_no-bullets .base--li::before{display:none}.base--ol .base--li::before,.base--ol li::before{content:counter(table-ol) "."}.base--blockquote{padding:0 1.5em;margin-right:1em;margin-left:1em;color:#464646;border-left:.25em solid}.base--color-input,.base--date-input,.base--datetime-local-input,.base--email-input,.base--file-input,.base--hidden-input,.base--input,.base--month-input,.base--number-input,.base--password-input,.base--range-input,.base--search-input,.base--select,.base--tel-input,.base--text-input,.base--time-input,.base--url-input,.base--week-input{width:100%;padding:.6em 1em;font-size:1em;font-weight:300;border:2px solid #464646;background-color:#fff;line-height:normal;display:block}.base--color-input:focus,.base--date-input:focus,.base--datetime-local-input:focus,.base--email-input:focus,.base--file-input:focus,.base--hidden-input:focus,.base--input:focus,.base--month-input:focus,.base--number-input:focus,.base--password-input:focus,.base--range-input:focus,.base--search-input:focus,.base--select:focus,.base--tel-input:focus,.base--text-input:focus,.base--time-input:focus,.base--url-input:focus,.base--week-input:focus{outline:#9855d4 solid 3px;border-color:#9855d4}.base--color-input:disabled,.base--date-input:disabled,.base--datetime-local-input:disabled,.base--email-input:disabled,.base--file-input:disabled,.base--hidden-input:disabled,.base--input:disabled,.base--month-input:disabled,.base--number-input:disabled,.base--password-input:disabled,.base--range-input:disabled,.base--search-input:disabled,.base--select:disabled,.base--tel-input:disabled,.base--text-input:disabled,.base--time-input:disabled,.base--url-input:disabled,.base--week-input:disabled{background-color:#e0e0e0}.base--block-label{display:block;margin:1.25em 0 .25em}.base--checkbox+label::before,.base--radio+label::before{margin-right:1rem;content:'';transform:translateY(-.125em);vertical-align:middle}.base--inline-label{display:inline}.base--radio{display:none}.base--radio+label::before{display:inline-block;width:1em;height:1em;border:2px solid #aeaeae;border-radius:50%}.base--radio:checked+label::before{background:radial-gradient(#323232 40%,transparent 40%)}.base--color-input{height:3em;padding:.25em;background:#fff}input[type=date]::-webkit-inner-spin-button,input[type=datetime]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-inner-spin-button,input[type=month]::-webkit-inner-spin-button,input[type=time]::-webkit-inner-spin-button,input[type=week]::-webkit-inner-spin-button{height:0}.base--range-input{height:.5em;padding:0;background-color:#fff;border-radius:.5em;box-shadow:inset 0 0 0 .125em #464646}.base--range-input:focus{outline:0;box-shadow:inset 0 0 0 .125em #9855d4}.base--range-input:disabled{opacity:.5}.base--range-input::-moz-range-track{height:.5em;padding:0;background-color:#fff;border-radius:.5em;box-shadow:inset 0 0 0 .125em #464646}.base--range-input::-webkit-slider-thumb{-webkit-appearance:none;width:1.5em;height:1.5em;background:#fff;border-radius:1.5em;box-shadow:inset 0 0 0 .1875em #464646;transition-duration:.5s}.base--range-input:active::-webkit-slider-thumb{box-shadow:inset 0 0 0 1.25em #464646;width:1.875em;height:1.875em}.base--range-input::-moz-range-thumb{-moz-appearance:none;width:1.5em;height:1.5em;background:#fff;border-radius:1.5em;box-shadow:inset 0 0 0 .1875em #464646;transition-duration:.5s}.base--range-input:active::-moz-range-thumb{box-shadow:inset 0 0 0 1.25em #464646;width:1.875em;height:1.875em}.base--textarea{width:100%;padding:.6em 1em;font-size:1em;font-weight:300;border:2px solid #464646;background-color:#fff}.base--button,.base--button_black,.base--button_reset,.base--button_submit,.base--button_teal{padding:.25em 2em;font-weight:500}.base--textarea:focus{outline:#9855d4 solid 3px;border-color:#9855d4}.base--textarea:disabled{background-color:#c7c7c7}.base--checkbox{display:none}.base--checkbox+label::before{display:inline-block;width:1em;height:1em;border:2px solid #aeaeae}.base--checkbox:checked+label::before{background:#323232;box-shadow:inset 0 0 0 1.33px #fff}.base--select{border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%20viewbox%3D%220%200%2012%2012%20true%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23464646%22%20points%3D%220%2C0%205%2E85%2C12%2012%2C0%20%22%2F%3E%3C%2Fsvg%3E);background-size:1em 1em;background-repeat:no-repeat;background-position:calc(100% - .3em) 1em}.firefox .base--select,.ie .base--select{background-image:none;background-size:0}.base--button{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;transition:.2s;display:inline-block}.base--button:focus,.base--button:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button:active{transition:0s;transform:translateY(2px)}.base--button_submit{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;transition:.2s;display:inline-block}.base--button_submit:focus,.base--button_submit:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button_submit:active{transition:0s;transform:translateY(2px)}.base--button_reset{color:#9855d4;background-color:transparent;border:2px solid #9855d4;border-radius:10rem;transition:.2s;display:inline-block}.base--button_reset:focus,.base--button_reset:hover{background-color:rgba(38,38,38,0);border-color:#bd92e3;color:#bd92e3}.base--button_reset:active{transition:0s;transform:translateY(2px)}.base--button_black{color:#121212;background-color:transparent;border:2px solid #121212;border-radius:10rem;transition:.2s;display:inline-block}.base--button_black:focus,.base--button_black:hover{background-color:rgba(38,38,38,0);border-color:#383838;color:#383838}.base--button_black:active{transition:0s;transform:translateY(2px)}.base--button_teal{color:#008571;background-color:transparent;border:2px solid #008571;border-radius:10rem;transition:.2s;display:inline-block}.base--button_teal:focus,.base--button_teal:hover{background-color:rgba(38,38,38,0);border-color:#00d2b2;color:#00d2b2}.base--button_teal:active{transition:0s;transform:translateY(2px)}.base--button_icon-hyperlink{background-color:transparent;border:none;padding:0;margin:0;text-decoration:none;color:#121212}.base--button_icon-hyperlink:focus,.base--button_icon-hyperlink:hover{background-color:transparent;border-color:transparent;color:#121212}.base--button_icon-hyperlink--link,.base--button_icon-hyperlink--link:visited{color:#121212;border-bottom:2px solid #121212}.base--button_icon-hyperlink:active{transition:0s;transform:none}.base--button_icon-hyperlink--icon{margin-right:.2em}.base--button_icon-hyperlink--icon.icon-reset{font-size:1.5em}.base--button_icon-hyperlink--link{font-weight:400;text-decoration:none;transition:.2s;padding-bottom:.1em}.base--button_icon-hyperlink--link:focus,.base--button_icon-hyperlink--link:hover{color:#9855d4;border-bottom:2px solid #9855d4}.base--table{width:100%;border-top:1px solid #c7c7c7;border-bottom:1px solid #c7c7c7;font-weight:300;color:#777677}.base--thead{font-weight:500;border-bottom:2px solid #e0e0e0;text-transform:uppercase}.base--td{padding:1em}.base--tr{background-color:transparent;border-top:1px solid #e0e0e0}.base--hr{border-top:2px solid #c7c7c7;margin:auto auto auto 0}.base--hr_small{width:23.40426%;float:none;clear:both;display:block;margin-top:3rem;margin-bottom:3rem}.icon:before{font-family:icons;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:400;text-decoration:none;text-transform:none}.icon-link:before{content:"\E001"}.icon-reset:before{content:"\E002"}.icon{vertical-align:middle;font-size:1em;color:inherit}.panel{background-color:#e0e0e0;border:2px solid #c7c7c7;padding:0 1rem 1rem}.tab-panels{padding:0;background-color:#f4f4f4;border:1px solid #777677}.tab-panels--tab-list{border-bottom:1px solid #e0e0e0}.tab-panels--tab-list-item{display:inline-block;margin-top:0}.tab-panels--tab{display:block;text-decoration:none;padding:.66667rem 1.33333rem;border-bottom:6px solid transparent}.tab-panels--tab.base--a{border-bottom:6px solid transparent;color:#121212}.tab-panels--tab.active,.tab-panels--tab:focus,.tab-panels--tab:hover{border-bottom:6px solid #777677}.tab-panels--tab-content{margin-top:0;padding:2rem;background-color:#fff}.tab-panels--tab-pane{display:none;margin-top:0}.tab-panels--tab-pane.active{display:block}.clickable-tab{background-color:#f4f4f4;display:inline-block;padding:.8em 2em;font-size:1em;border-left:6px solid #734098;margin-top:0;cursor:pointer}.base--radio+.clickable-tab{border-left-color:transparent}.base--radio:checked+.clickable-tab{border-left-color:#734098}.base--radio+.clickable-tab::before{display:none}.metatag{background-color:#734098;border:2px solid #734098;border-radius:10rem;transition:.2s;display:inline-block;color:#fff;padding:.2em 1.75em;font-weight:300;font-size:.9em}.metatag:focus,.metatag:hover{background-color:#734098;border-color:#734098;color:#fff}.metatag:active{transition:0s;transform:translateY(0)}.loader-container{display:inline-block;width:5.625rem;height:5.625rem}.loader-container_small{width:2.8125rem;height:2.8125rem}.loader{height:100%;width:100%;transform:translateZ(0) rotate(300deg);transform-origin:25px 25px;transform-origin:center center;animation:b 4s ease-out infinite}.loader--path{stroke-dasharray:125px;stroke-dashoffset:9.7px;r:20px;cx:50px;cy:50px;fill:transparent;stroke:#9855d4;stroke-width:4.65px;stroke-linecap:butt;transition:stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);animation:a 4s ease-out infinite}@keyframes a{0%,to{stroke-dashoffset:9.7px}60%{stroke-dashoffset:113.52px}}@keyframes b{0%{transform:rotate(300deg)}60%{transform:rotate(1320deg)}to{transform:rotate(2100deg)}}._container{width:100%;margin:auto;padding:0 1rem}@media (min-width:768px){._container{max-width:768px}}._container_xx-small{max-width:320px}._container_x-small{max-width:360px}._container_small{max-width:640px}._container_medium{max-width:768px}._container_large{max-width:1024px}._container_x-large{max-width:1200px}._container_xx-large{max-width:1280px}code[class*=language-] ::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#777677}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#9855d4}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#db2780}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#00b4a0}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.prism+.prism{margin-top:-15px}.line-highlight{background:rgba(75,145,80,.15);left:0;line-height:inherit;margin-top:5px;pointer-events:none;position:absolute;right:0} \ No newline at end of file diff --git a/dist/watson-developer-cloud-ui-components.min.js b/dist/watson-developer-cloud-ui-components.min.js deleted file mode 100644 index d8670ee..0000000 --- a/dist/watson-developer-cloud-ui-components.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(){var e=window.navigator.userAgent,t="MSIE",a="MSIE 9.0",n="MSIE 10.0",r="Chrome",s="Firefox/",i="Safari",o="Windows",l="Macintosh",u="Linux",c="ie",g="ie9",d="ie10",p="ie11",m="chrome",f="firefox",h="safari",b="windows",w="mac",y="linux",k="";return e.indexOf(t)>-1&&(k+=c+" "),e.indexOf(a)>-1&&(k+=g+" "),e.indexOf(n)>-1&&(k+=d+" "),navigator.userAgent.match(/Trident.*rv\:11\./)&&(k+=c+" "+p+" "),e.indexOf(i)>-1&&e.indexOf(r)==-1&&(k+=h+" "),e.indexOf(r)>-1&&(k+=m+" "),e.indexOf(s)>-1&&(k+=f+" "),e.indexOf(o)>-1&&(k+=b+" "),e.indexOf(l)>-1&&(k+=w+" "),e.indexOf(u)>-1&&(k+=y+" "),k=k.slice(0,-1),document.addEventListener("DOMContentLoaded",function(){document.body.className+=k}),window.browserInfo=k,k}();var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,a=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(w instanceof n)){u.lastIndex=0;var y=u.exec(w),k=1;if(!y&&d&&h!=r.length-1){if(u.lastIndex=b,y=u.exec(e),!y)break;for(var v=y.index+(g?y[1].length:0),P=y.index+y[0].length,x=h,_=b,$=r.length;$>x&&P>_;++x)_+=(r[x].matchedStr||r[x]).length,v>=_&&(++h,b=_);if(r[h]instanceof n||r[x-1].greedy)continue;k=x-h,w=e.slice(b,_),y.index-=b}if(y){g&&(p=y[1].length);var v=y.index+p,y=y[0].slice(p),P=v+y.length,A=w.slice(0,v),S=w.slice(P),j=[h,k];A&&j.push(A);var O=new n(i,c?a.tokenize(y,c):y,m,y,d);j.push(O),S&&j.push(S),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,s=0;r=n[s++];)r(t)}}},n=a.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.matchedStr=n||null,this.greedy=!!r};if(n.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return n.stringify(a,t,e)}).join("");var s={type:e.type,content:n.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==s.type&&(s.attributes.spellcheck="true"),e.alias){var i="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(s.classes,i)}a.hooks.run("wrap",s);var o="";for(var l in s.attributes)o+=(o?" ":"")+l+'="'+(s.attributes[l]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'"'+(o?" "+o:"")+">"+s.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,r=t.code,s=t.immediateClose;_self.postMessage(a.highlight(r,a.languages[n],n)),s&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(a.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript,!function(e){var t={variable:[{pattern:/\$?\(\([\w\W]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\w\W]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b-?(?:0x[\dA-Fa-f]+|\d*\.?\d+(?:[Ee]-?\d+)?)\b/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[a-z0-9_#\?\*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)(?:"|')?(\w+?)(?:"|')?\s*\r?\n(?:[\s\S])*?\r?\n\2/g,lookbehind:!0,greedy:!0,inside:t},{pattern:/(["'])(?:\\\\|\\?[^\\])*?\1/g,greedy:!0,inside:t}],variable:t.variable,"function":{pattern:/(^|\s|;|\||&)(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|npm|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|\s|;|\||&)/,lookbehind:!0},keyword:{pattern:/(^|\s|;|\||&)(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|\s|;|\||&)/,lookbehind:!0},"boolean":{pattern:/(^|\s|;|\||&)(?:true|false)(?=$|\s|;|\||&)/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a["function"]=e.languages.bash["function"],a.keyword=e.languages.bash.keyword,a["boolean"]=e.languages.bash["boolean"],a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation}(Prism),Prism.languages.json={property:/".*?"(?=\s*:)/gi,string:/"(?!:)(\\?[^"])*?"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json,Prism.languages.python={"triple-quoted-string":{pattern:/"""[\s\S]+?"""|'''[\s\S]+?'''/,alias:"string"},comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},string:{pattern:/("|')(?:\\\\|\\?[^\\\r\n])*?\1/,greedy:!0},"function":{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_][a-zA-Z0-9_]*(?=\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)[a-z0-9_]+/i,lookbehind:!0},keyword:/\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|pass|print|raise|return|try|while|with|yield)\b/,"boolean":/\b(?:True|False)\b/,number:/\b-?(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,punctuation:/[{}[\];(),.:]/},!function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m,lookbehind:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var t=/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i,a=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|or|not)\b/,{pattern:/(\s+)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,inside:{punctuation:/:/,variable:t,operator:a}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s]+.*)/m,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:a,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,delete e.languages.sass.selector,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*)\S(?:,?[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,?[^,\r\n]+)*)*/,lookbehind:!0}})}(Prism),Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-_\w]+/,variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\w-]|\$[-_\w]+|#\{\$[-_\w]+\})+(?=\s*:)/i,inside:{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}},Prism.languages.insertBefore("scss","important",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss),function(){$(".tab-panels--tab").click(function(e){e.preventDefault();var t=$(this),a=t.closest(".tab-panels"),n=null;a.find(".active").removeClass("active"),t.addClass("active"),n=t.attr("href"),$(n).addClass("active")})}(); \ No newline at end of file diff --git a/example/components.html b/example/components.html new file mode 100644 index 0000000..6eb29f3 --- /dev/null +++ b/example/components.html @@ -0,0 +1,1015 @@ + + + + + Watson Platform Component Library + + + + + + + + + + + + + + + + +
+
+
+ + Watson Platform Component Library + +
+
+ +
+
+ +
+
+

Content

+
+ +
+ BUTTONS +
+ + +
+ TAB PANELS +
+ + +
+ CLICKABLE TABS +
+ + +
+ ROUNDED TAGS +
+ + +
+ LOADER +
+ + +
+ HR +
+ + +
+ OTHERS +
+ + +
+ +
+ +

Buttons

+ + +
+
+ + + + + + + + + + + + + +
+
+ 
+    
+<!-- BUTTONS -->
+<button class="base--button">Button</button>
+
+<!-- SUBMIT AND RESET BUTTONS -->
+<button class="base--button base--button_submit" type="submit">Submit Button</button>
+<button class="base--button base--button_reset" type="reset">Reset Button</button>
+
+<!-- COLOR BUTTONS -->
+<button class="base--button base--button_black">Black Button</button>
+<button class="base--button base--button_teal">Teal Button</button>
+    
+
+
+
+ + + +

Tab Panels

+ + +
+
+ +
+ +
+
+ This is panel 1 +
+
+ This is panel 2 +
+
+
+ + +
+
+ 
+    
+<div class="tab-panels" role="tabpanel">
+  <ul class="tab-panels--tab-list" role="tablist">
+    <li class="tab-panels--tab-list-item base--li" role="presentation">
+      <a class="tab-panels--tab base--a active" href="#panel1" aria-controls="panel1" role="tab">Tab 1</a>
+    </li>
+    <li class="tab-panels--tab-list-item base--li" role="presentation">
+      <a class="tab-panels--tab base--a" href="#panel2" aria-controls="panel2" role="tab">Tab 2</a>
+    </li>
+  </ul>
+  <div class="tab-panels--tab-content">
+    <div id="panel1" class="tab-panels--tab-pane active" role="tab-panel">
+      This is panel 1
+    </div>
+    <div id="panel2" class="tab-panels--tab-pane" role="tab-panel">
+      This is panel 2
+    </div>
+  </div>
+</div>
+    
+
+
+
+ + + +

Clickable Tabs

+ + +
+
+ +
+ Clickable Tab +
+ + +
+
+ 
+    
+<div class="clickable-tab">
+  Clickable Tab
+</div>
+    
+
+
+
+ + + +

Clickable Tabs as Radio Buttons

+ + +
+
+ + + + + + + + +
+
+ 
+    
+<input role="radio" class="base--radio" type="radio" id="tab-1" name="tab-radio" value="1">
+<label class="base--inline-label clickable-tab" for="tab-1">
+  Option 1
+</label>
+
+<input role="radio" class="base--radio" type="radio" id="tab-2" name="tab-radio" value="2">
+<label class="base--inline-label clickable-tab" for="tab-2">
+  Option 2
+</label>
+    
+
+
+
+ + + +

Rounded Tags

+ + +
+
+ +
+ tag 1 +
+
+ tag 2 +
+ + +
+
+ 
+    
+<div class="metatag">
+  tag 1
+</div>
+<div class="metatag">
+  tag 2
+</div>
+    
+
+
+
+ + + +

Loader

+ + +
+
+ +
+ + + +
+ +
+ + + +
+ + +
+
+ 
+    
+<div class="loader-container">
+  <svg viewBox="25 25 50 50" class="loader">
+    <circle cx="50" cy="50" r="20" class="loader--path"></circle>
+  </svg>
+</div>
+
+<div class="loader-container loader-container_small">
+  <svg viewBox="25 25 50 50" class="loader">
+    <circle cx="50" cy="50" r="20" class="loader--path"></circle>
+  </svg>
+</div>
+    
+
+
+
+ + + +

HR

+ + +
+
+ +
+
+ + +
+
+ 
+    
+<hr class="base--hr">
+<hr class="base--hr base--hr_small">
+    
+
+
+
+ + + +

Checkboxes

+ + +
+
+ + + + + +
+
+ 
+    
+<input role="checkbox" class="base--checkbox" type="checkbox" id="cb1" name="cb" value="some cb">
+<label class="base--inline-label" for="cb1">Option 1</label>
+    
+
+
+
+ + + +

Radio Buttons

+ + +
+
+ + + + + + + +
+
+ 
+    
+<input role="radio" class="base--radio" type="radio" id="rb1" name="rb" value="">
+<label class="base--inline-label" for="rb1">Option 1</label>
+<input role="radio" class="base--radio" type="radio" id="rb2" name="rb" value="">
+<label class="base--inline-label" for="rb2">Option 2</label>
+    
+
+
+
+ + + +

Table

+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First NameLast NameRole
Westley--The Man in Black
PrincessButtercupThe Princess Bride
PrinceHumperdinckThe Obnoxious Prince
BarackObamaPresident
JohnDoePlaceholder
+ + +
+
+ 
+    
+<table class="base--table">
+  <thead class="base--thead">
+    <tr class="base--tr">
+      <td class="base--td">First Name</td>
+      <td class="base--td">Last Name</td>
+      <td class="base--td">Role</td>
+    </tr>
+  </thead>
+  <tbody class="base--tbody">
+    <tr class="base--tr">
+      <td class="base--td">Westley</td>
+      <td class="base--td">--</td>
+      <td class="base--td">The Man in Black</td>
+    </tr>
+    <tr class="base--tr">
+      <td class="base--td">Princess</td>
+      <td class="base--td">Buttercup</td>
+      <td class="base--td">The Princess Bride</td>
+    </tr>
+    <tr class="base--tr">
+      <td class="base--td">Prince</td>
+      <td class="base--td">Humperdinck</td>
+      <td class="base--td">The Obnoxious Prince</td>
+    </tr>
+    <tr class="base--tr">
+      <td class="base--td">Barack</td>
+      <td class="base--td">Obama</td>
+      <td class="base--td">President</td>
+    </tr>
+    <tr class="base--tr">
+      <td class="base--td">John</td>
+      <td class="base--td">Doe</td>
+      <td class="base--td">Placeholder</td>
+    </tr>
+  </tbody>
+</table>
+    
+
+
+
+ + + +

Lists

+ + +
+
+ +
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+ + +
+
+ 
+    
+<ul class="base--ul">
+  <li class="base--li">List item 1</li>
+  <li class="base--li">List item 2</li>
+  <li class="base--li">List item 3</li>
+</ul>
+<ul class="base--ul base--ul_inline">
+  <li class="base--li">List item 1</li>
+  <li class="base--li">List item 2</li>
+  <li class="base--li">List item 3</li>
+</ul>
+<ul class="base--ul base--ul_no-bullets">
+  <li class="base--li">List item 1</li>
+  <li class="base--li">List item 2</li>
+  <li class="base--li">List item 3</li>
+</ul>
+    
+
+
+
+ + + +

TextArea

+ + +
+
+ + + + +
+
+ 
+    
+<textarea class="base--textarea" name="text-area" id="textarea1" cols="30" rows="10"></textarea>
+    
+
+
+
+ + + +

Dropdown Select

+ + +
+
+ + + + +
+
+ 
+    
+<select name="pick-a-value" id="any-value" class="base--select">
+  <option value="value1">Value 1</option>
+  <option value="value2">Value 2</option>
+  <option value="value3">Value 3</option>
+</select>
+    
+
+
+
+ + + +

Basic Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="" id="input1" class="base--input"></input>
+<input type="" id="input2" placeholder="This is placeholder text" class="base--input"></input>
+<input type="" id="input3" placeholder="Can't touch this" class="base--input" disabled></input>
+    
+
+
+
+ + + +

Color Input

+ + +
+
+ + + + +
+
+ 
+    
+<input type="color" id="input4" class="base--color-input" disabled></input>
+    
+
+
+
+ + + +

Date Input

+ + +
+
+ + + + + +
+
+ 
+    
+<input type="date" id="input5" class="base--date-input"></input>
+<input type="date" id="input6" placeholder="Can't click me" class="base--date-input" disabled></input>
+    
+
+
+
+ + + +

Date Time Local Input

+ + +
+
+ + + + + +
+
+ 
+    
+<input type="datetime-local" id="input7" class="base--datetime-local-input"></input>
+<input type="datetime-local" id="input8" placeholder="Can't click me" class="base--datetime-local-input" disabled></input>
+    
+
+
+
+ + + +

File Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="file" id="input12" class="base--file-input"></input>
+<input type="file" id="input13" placeholder="This is a placeholder file" class="base--file-input"></input>
+<input type="file" id="input14" placeholder="Can't click me" class="base--file-input" disabled></input>
+    
+
+
+
+ + + +

Hidden Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="hidden" id="input15" class="base--hidden-input"></input>
+<input type="hidden" id="input16" placeholder="This is placeholder hidden" class="base--hidden-input"></input>
+<input type="hidden" id="input17" placeholder="Can't click me" class="base--hidden-input" disabled></input>
+    
+
+
+
+ + + +

Month Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="month" id="input18" class="base--month-input"></input>
+<input type="month" id="input19" placeholder="Placeholder Month" class="base--month-input" ></input>
+<input type="month" id="input20" placeholder="Can't click me" class="base--month-input" disabled></input>
+    
+
+
+
+ + + +

Number Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="number" id="input21" class="base--number-input"></input>
+<input type="number" id="input22" placeholder="This is placeholder number" class="base--number-input"></input>
+<input type="number" id="input23" placeholder="Can't touch this" class="base--number-input" disabled></input>
+    
+
+
+
+ + + +

Password Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="password" id="input24" class="base--password-input"></input>
+<input type="password" id="input25" placeholder="This is placeholder password" class="base--password-input"></input>
+<input type="password" id="input26" placeholder="Can't touch this" class="base--password-input" disabled></input>
+    
+
+
+
+ + + +

Range Input

+ + +
+
+ + + + + +
+
+ 
+    
+<input type="range" id="input27" class="base--range-input"></input>
+<input type="range" id="input28" class="base--range-input" disabled></input>
+    
+
+
+
+ + + +

Search Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="search" id="input29" class="base--search-input"></input>
+<input type="search" id="input30" placeholder="This is placeholder search" class="base--search-input"></input>
+<input type="search" id="input31" placeholder="Can't touch this" class="base--search-input" disabled></input>
+    
+
+
+
+ + + +

Telephone Input

+ + +
+
+ + + + + + + +
+
+ 
+    
+<input type="tel" id="input32" class="base--tel-input"></input>
+<input type="tel" id="input33" placeholder="8882121881" class="base--tel-input"></input>
+<input type="tel" id="input34" placeholder="123-343-9938" pattern="\d{3}[\-]\d{3}[\-]\d{4}" class="base--tel-input"></input>
+<input type="tel" id="input35" placeholder="8882121881" class="base--tel-input" disabled></input>
+    
+
+
+
+ + + +

Text Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="text" id="input36" class="base--text-input"></input>
+<input type="text" id="input37" placeholder="This is placeholder text" class="base--text-input"></input>
+<input type="text" id="input38" placeholder="Can't touch this" class="base--text-input" disabled></input>
+    
+
+
+
+ + + +

Time Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="time" id="input39" class="base--time-input"></input>
+<input type="time" id="input40" placeholder="This is placeholder time" class="base--time-input"></input>
+<input type="time" id="input41" placeholder="Can't Click me" class="base--time-input" disabled></input>
+    
+
+
+
+ + + +

Url Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="url" id="input42" class="base--url-input"></input>
+<input type="url" id="input43" placeholder="Placeholder URL" class="base--url-input"></input>
+<input type="url" id="input44" placeholder="Placeholder URL" class="base--url-input" disabled></input>
+    
+
+
+
+ + + +

Week Input

+ + +
+
+ + + + + + +
+
+ 
+    
+<input type="week" id="input45" class="base--week-input"></input>
+<input type="week" id="input46" placeholder="This is placeholder week" class="base--week-input"></input>
+<input type="week" id="input47" placeholder="Can't click me" class="base--week-input" disabled></input>
+    
+
+
+
+ + + + + + + +
+
+ +
+ + + + + + + + + + + diff --git a/example/get-started.html b/example/get-started.html new file mode 100644 index 0000000..ca5aff2 --- /dev/null +++ b/example/get-started.html @@ -0,0 +1,104 @@ + + + + + Watson Platform Component Library + + + + + + + + + + + + + + + + +
+
+
+ + Watson Platform Component Library + +
+
+ +
+
+ +
+ +
+

Installation

+ 
+      $ npm install watson-developer-cloud-ui-components
+
+

+ Or you can download a release version from github. +

+
+ +
+

How to use

+

+ In the dist/ directory, you'll find the CSS and the SCSS library. + If you're using SCSS, make sure you have the path to the node_modules directory included in the SASS compiling configurations so that the library's dependencies are referenced correctly in the code. +

+
+ +
+
+ +
+ + + + + + + + + + + diff --git a/example/images/favicon.png b/example/images/favicon.png new file mode 100644 index 0000000..1998f58 Binary files /dev/null and b/example/images/favicon.png differ diff --git a/example/index.html b/example/index.html new file mode 100755 index 0000000..5bc8c4a --- /dev/null +++ b/example/index.html @@ -0,0 +1,116 @@ + + + + + Watson Platform Component Library + + + + + + + + + + + + + + + + +
+
+
+ + Watson Platform Component Library + +
+
+ +
+
+ +
+
+
+
+

Watson Platform Component Library

+
+
+

+ The Watson Platform Component Library is a Sass library that translates Watson design language into UI components to help develop web UI. Get Started Now. +

+
+
+
+
+
+ +
+
+ COMPONENTS +
+
+ + +
+
+ STYLE +
+
+ +
+ +
+ +
+
+
+ + + + + + + + + + + diff --git a/src/js/lib/components/tab-panels.js b/example/src/js/page.js similarity index 54% rename from src/js/lib/components/tab-panels.js rename to example/src/js/page.js index 7df6541..8b250b5 100644 --- a/src/js/lib/components/tab-panels.js +++ b/example/src/js/page.js @@ -1,8 +1,14 @@ +// Executes your code when the DOM is ready. Acts the same as $(document).ready(). +/* eslint vars-on-top: "off" */ +/* eslint no-var: "off" */ +/* global $:true */ + + /* Tabbed Panels js */ -(function() { - $('.tab-panels--tab').click(function(e) { +((function initTabs() { + $('.tab-panels--tab').click(function onClick(e) { e.preventDefault(); var self = $(this); var inputGroup = self.closest('.tab-panels'); @@ -13,4 +19,4 @@ Tabbed Panels js idName = self.attr('href'); $(idName).addClass('active'); }); -})(); +})()); diff --git a/dist/js/vendors/prism.min.js b/example/src/js/prism.min.js similarity index 100% rename from dist/js/vendors/prism.min.js rename to example/src/js/prism.min.js diff --git a/src/scss/style.scss b/example/src/scss/main.scss similarity index 99% rename from src/scss/style.scss rename to example/src/scss/main.scss index 471614d..c2da970 100755 --- a/src/scss/style.scss +++ b/example/src/scss/main.scss @@ -1,4 +1,4 @@ -@import 'lib/style'; +@import '../../../src/scss/main'; .top-nav { $top-nav--border-width: 4px; diff --git a/src/views/base/a.nunjucks b/example/src/views/base/a.nunjucks similarity index 100% rename from src/views/base/a.nunjucks rename to example/src/views/base/a.nunjucks diff --git a/src/views/base/blockquote.nunjucks b/example/src/views/base/blockquote.nunjucks similarity index 100% rename from src/views/base/blockquote.nunjucks rename to example/src/views/base/blockquote.nunjucks diff --git a/src/views/base/button.nunjucks b/example/src/views/base/button.nunjucks similarity index 65% rename from src/views/base/button.nunjucks rename to example/src/views/base/button.nunjucks index b569940..9d08802 100755 --- a/src/views/base/button.nunjucks +++ b/example/src/views/base/button.nunjucks @@ -8,9 +8,3 @@ - - - diff --git a/src/views/base/checkbox.nunjucks b/example/src/views/base/checkbox.nunjucks similarity index 100% rename from src/views/base/checkbox.nunjucks rename to example/src/views/base/checkbox.nunjucks diff --git a/src/views/base/code.nunjucks b/example/src/views/base/code.nunjucks similarity index 100% rename from src/views/base/code.nunjucks rename to example/src/views/base/code.nunjucks diff --git a/src/views/base/em.nunjucks b/example/src/views/base/em.nunjucks similarity index 100% rename from src/views/base/em.nunjucks rename to example/src/views/base/em.nunjucks diff --git a/src/views/base/h1.nunjucks b/example/src/views/base/h1.nunjucks similarity index 100% rename from src/views/base/h1.nunjucks rename to example/src/views/base/h1.nunjucks diff --git a/src/views/base/h2.nunjucks b/example/src/views/base/h2.nunjucks similarity index 100% rename from src/views/base/h2.nunjucks rename to example/src/views/base/h2.nunjucks diff --git a/src/views/base/h3.nunjucks b/example/src/views/base/h3.nunjucks similarity index 100% rename from src/views/base/h3.nunjucks rename to example/src/views/base/h3.nunjucks diff --git a/src/views/base/h4.nunjucks b/example/src/views/base/h4.nunjucks similarity index 100% rename from src/views/base/h4.nunjucks rename to example/src/views/base/h4.nunjucks diff --git a/src/views/base/h5.nunjucks b/example/src/views/base/h5.nunjucks similarity index 100% rename from src/views/base/h5.nunjucks rename to example/src/views/base/h5.nunjucks diff --git a/src/views/base/h6.nunjucks b/example/src/views/base/h6.nunjucks similarity index 100% rename from src/views/base/h6.nunjucks rename to example/src/views/base/h6.nunjucks diff --git a/src/views/base/hr.nunjucks b/example/src/views/base/hr.nunjucks similarity index 100% rename from src/views/base/hr.nunjucks rename to example/src/views/base/hr.nunjucks diff --git a/src/views/base/input--color.nunjucks b/example/src/views/base/input--color.nunjucks similarity index 100% rename from src/views/base/input--color.nunjucks rename to example/src/views/base/input--color.nunjucks diff --git a/src/views/base/input--date.nunjucks b/example/src/views/base/input--date.nunjucks similarity index 100% rename from src/views/base/input--date.nunjucks rename to example/src/views/base/input--date.nunjucks diff --git a/src/views/base/input--datetime-local.nunjucks b/example/src/views/base/input--datetime-local.nunjucks similarity index 100% rename from src/views/base/input--datetime-local.nunjucks rename to example/src/views/base/input--datetime-local.nunjucks diff --git a/src/views/base/input--email.nunjucks b/example/src/views/base/input--email.nunjucks similarity index 100% rename from src/views/base/input--email.nunjucks rename to example/src/views/base/input--email.nunjucks diff --git a/src/views/base/input--file.nunjucks b/example/src/views/base/input--file.nunjucks similarity index 100% rename from src/views/base/input--file.nunjucks rename to example/src/views/base/input--file.nunjucks diff --git a/src/views/base/input--hidden.nunjucks b/example/src/views/base/input--hidden.nunjucks similarity index 100% rename from src/views/base/input--hidden.nunjucks rename to example/src/views/base/input--hidden.nunjucks diff --git a/src/views/base/input--month.nunjucks b/example/src/views/base/input--month.nunjucks similarity index 100% rename from src/views/base/input--month.nunjucks rename to example/src/views/base/input--month.nunjucks diff --git a/src/views/base/input--number.nunjucks b/example/src/views/base/input--number.nunjucks similarity index 100% rename from src/views/base/input--number.nunjucks rename to example/src/views/base/input--number.nunjucks diff --git a/src/views/base/input--password.nunjucks b/example/src/views/base/input--password.nunjucks similarity index 100% rename from src/views/base/input--password.nunjucks rename to example/src/views/base/input--password.nunjucks diff --git a/src/views/base/input--range.nunjucks b/example/src/views/base/input--range.nunjucks similarity index 100% rename from src/views/base/input--range.nunjucks rename to example/src/views/base/input--range.nunjucks diff --git a/src/views/base/input--search.nunjucks b/example/src/views/base/input--search.nunjucks similarity index 100% rename from src/views/base/input--search.nunjucks rename to example/src/views/base/input--search.nunjucks diff --git a/src/views/base/input--tel.nunjucks b/example/src/views/base/input--tel.nunjucks similarity index 100% rename from src/views/base/input--tel.nunjucks rename to example/src/views/base/input--tel.nunjucks diff --git a/src/views/base/input--text.nunjucks b/example/src/views/base/input--text.nunjucks similarity index 100% rename from src/views/base/input--text.nunjucks rename to example/src/views/base/input--text.nunjucks diff --git a/src/views/base/input--time.nunjucks b/example/src/views/base/input--time.nunjucks similarity index 100% rename from src/views/base/input--time.nunjucks rename to example/src/views/base/input--time.nunjucks diff --git a/src/views/base/input--url.nunjucks b/example/src/views/base/input--url.nunjucks similarity index 100% rename from src/views/base/input--url.nunjucks rename to example/src/views/base/input--url.nunjucks diff --git a/src/views/base/input--week.nunjucks b/example/src/views/base/input--week.nunjucks similarity index 100% rename from src/views/base/input--week.nunjucks rename to example/src/views/base/input--week.nunjucks diff --git a/src/views/base/input.nunjucks b/example/src/views/base/input.nunjucks similarity index 100% rename from src/views/base/input.nunjucks rename to example/src/views/base/input.nunjucks diff --git a/src/views/base/label.nunjucks b/example/src/views/base/label.nunjucks similarity index 100% rename from src/views/base/label.nunjucks rename to example/src/views/base/label.nunjucks diff --git a/src/views/base/ol.nunjucks b/example/src/views/base/ol.nunjucks similarity index 100% rename from src/views/base/ol.nunjucks rename to example/src/views/base/ol.nunjucks diff --git a/src/views/base/p.nunjucks b/example/src/views/base/p.nunjucks similarity index 100% rename from src/views/base/p.nunjucks rename to example/src/views/base/p.nunjucks diff --git a/src/views/base/pre.nunjucks b/example/src/views/base/pre.nunjucks similarity index 100% rename from src/views/base/pre.nunjucks rename to example/src/views/base/pre.nunjucks diff --git a/src/views/base/radio.nunjucks b/example/src/views/base/radio.nunjucks similarity index 100% rename from src/views/base/radio.nunjucks rename to example/src/views/base/radio.nunjucks diff --git a/src/views/base/select.nunjucks b/example/src/views/base/select.nunjucks similarity index 100% rename from src/views/base/select.nunjucks rename to example/src/views/base/select.nunjucks diff --git a/src/views/base/strong.nunjucks b/example/src/views/base/strong.nunjucks similarity index 100% rename from src/views/base/strong.nunjucks rename to example/src/views/base/strong.nunjucks diff --git a/src/views/base/table.nunjucks b/example/src/views/base/table.nunjucks similarity index 100% rename from src/views/base/table.nunjucks rename to example/src/views/base/table.nunjucks diff --git a/src/views/base/textarea.nunjucks b/example/src/views/base/textarea.nunjucks similarity index 100% rename from src/views/base/textarea.nunjucks rename to example/src/views/base/textarea.nunjucks diff --git a/src/views/base/ul.nunjucks b/example/src/views/base/ul.nunjucks similarity index 100% rename from src/views/base/ul.nunjucks rename to example/src/views/base/ul.nunjucks diff --git a/src/views/components/clickable-tab-with-radio.nunjucks b/example/src/views/components/clickable-tab-with-radio.nunjucks similarity index 100% rename from src/views/components/clickable-tab-with-radio.nunjucks rename to example/src/views/components/clickable-tab-with-radio.nunjucks diff --git a/src/views/components/clickable-tab.nunjucks b/example/src/views/components/clickable-tab.nunjucks similarity index 100% rename from src/views/components/clickable-tab.nunjucks rename to example/src/views/components/clickable-tab.nunjucks diff --git a/src/views/components/loader.nunjucks b/example/src/views/components/loader.nunjucks similarity index 100% rename from src/views/components/loader.nunjucks rename to example/src/views/components/loader.nunjucks diff --git a/src/views/components/metatag.nunjucks b/example/src/views/components/metatag.nunjucks similarity index 100% rename from src/views/components/metatag.nunjucks rename to example/src/views/components/metatag.nunjucks diff --git a/src/views/components/tab-panels.nunjucks b/example/src/views/components/tab-panels.nunjucks similarity index 100% rename from src/views/components/tab-panels.nunjucks rename to example/src/views/components/tab-panels.nunjucks diff --git a/src/views/core/colors.nunjucks b/example/src/views/core/colors.nunjucks similarity index 100% rename from src/views/core/colors.nunjucks rename to example/src/views/core/colors.nunjucks diff --git a/src/views/macros/ui-macros.nunjucks b/example/src/views/macros/ui-macros.nunjucks similarity index 100% rename from src/views/macros/ui-macros.nunjucks rename to example/src/views/macros/ui-macros.nunjucks diff --git a/src/views/pages/components.nunjucks b/example/src/views/pages/components.nunjucks similarity index 98% rename from src/views/pages/components.nunjucks rename to example/src/views/pages/components.nunjucks index f4c0e77..4070868 100644 --- a/src/views/pages/components.nunjucks +++ b/example/src/views/pages/components.nunjucks @@ -245,6 +245,4 @@ {% block scripts %} {{ super() }} - - {% endblock %} diff --git a/src/views/pages/get-started.nunjucks b/example/src/views/pages/get-started.nunjucks similarity index 82% rename from src/views/pages/get-started.nunjucks rename to example/src/views/pages/get-started.nunjucks index 05c44ba..7b72ed5 100644 --- a/src/views/pages/get-started.nunjucks +++ b/example/src/views/pages/get-started.nunjucks @@ -52,10 +52,8 @@

How to use

- In the dist/ directory, you'll find the CSS code, the SCSS code, the JS code, icons, and icon-fonts. - If you're using SCSS, make sure you have the path to the bower_components directory included in the SASS compiling configurations so that bower dependencies are referenced correctly in the code. - For the Javascript, make sure that you're using JQuery 2.*.* or above. - To use components that use icon fonts, make sure that the icon-fonts files are correctly referenced in your project relative to the CSS output file. + In the dist/ directory, you'll find the CSS and the SCSS library. + If you're using SCSS, make sure you have the path to the node_modules directory included in the SASS compiling configurations so that the library's dependencies are referenced correctly in the code.

@@ -74,6 +72,4 @@ {% block scripts %} {{ super() }} - - {% endblock %} diff --git a/src/views/pages/index.nunjucks b/example/src/views/pages/index.nunjucks similarity index 93% rename from src/views/pages/index.nunjucks rename to example/src/views/pages/index.nunjucks index e8a6874..b920f24 100755 --- a/src/views/pages/index.nunjucks +++ b/example/src/views/pages/index.nunjucks @@ -45,7 +45,7 @@

- The Watson Platform Component Library is a Sass library that translates Watson design language into UI components to help develop web UI. Get Started Now. + The Watson Platform Component Library is a Sass library that translates Watson design language into UI components to help develop web UI. Get Started Now.

@@ -84,6 +84,4 @@ {% block scripts %} {{ super() }} - - {% endblock %} diff --git a/src/views/pages/style.nunjucks b/example/src/views/pages/style.nunjucks similarity index 99% rename from src/views/pages/style.nunjucks rename to example/src/views/pages/style.nunjucks index f123599..da14bac 100644 --- a/src/views/pages/style.nunjucks +++ b/example/src/views/pages/style.nunjucks @@ -572,6 +572,4 @@ $ColorScheme: ( {% block scripts %} {{ super() }} - - {% endblock %} diff --git a/src/views/templates/base.nunjucks b/example/src/views/templates/base.nunjucks similarity index 64% rename from src/views/templates/base.nunjucks rename to example/src/views/templates/base.nunjucks index bc1a0ac..f2920bc 100755 --- a/src/views/templates/base.nunjucks +++ b/example/src/views/templates/base.nunjucks @@ -6,8 +6,12 @@ + + + + {% block styles %} - + {% endblock %} @@ -15,9 +19,8 @@ {% block body %}{% endblock %} {% block scripts %} - - - + + {% endblock %} + + + +

Colors Settings

+
+ 
+      
+$ColorScheme: (
+  'primary color': color('purple', 50),
+  'secondary color': color('teal', 50),
+  'background color': color('white', 10),
+  'text color': color('gray', 80),
+  'white': color('white', 10),
+  'black': color('gray', 100)
+);
+      
+
+
+ +

set-text-color Function

+ +

The set-text-color function can find a contrasting text color given a background color.

+ +
+
+ 
+        
+.element-with-dark-text {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('purple', 20);
+  color: set-text-color(color('purple', 20));
+  }
+
+  .element-with-light-text {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('purple', 80);
+  color: set-text-color(color('purple', 80));
+}
+        
+
+
+
+
+ Dark text, light background +
+
+ Light text, dark background +
+
+
+ +

color Function

+ +

The color function can pull a color from the IBM Design Color palette given a color name and tone.

+ +
+
+ 
+        
+.lots-of-colors {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('white', 40);
+
+  span:nth-of-type(1) {
+    color: color('green', 50);
+  }
+
+  span:nth-of-type(2) {
+    color: color('blue', 40);
+  }
+
+  span:nth-of-type(3) {
+    color: color('yellow', 30);
+  }
+}
+        
+
+
+
+
+ green 50 + blue 40 + yellow 30 +
+
+
+ +

get Function

+ +

The get function can look up a key in any global setting (Breakpoints, Typography, etc.) defined in the Sass library.

+ +
+
+ 
+        
+.get-example {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: get('background color');
+  color: get('primary color');
+
+  @include breakpoint(get('medium')) {
+    @include grid(6);
+
+    &:nth-of-type(2) {
+      margin-right: 0rem;
+    }
+  }
+}
+        
+
+
+
+
+ Get +
+
+ Get +
+
+
+ + +

Container

+

+ Containers define main body layouts and contain responsive grid elements. +

+
+ 
+      
+<div class="_container">
+  <div class="row">
+    <!-- responsive grid elements -->
+  </div>
+</div>
+      
+
+
+

+ In this library, there are containers of different widths. +

+
+ 
+      
+<!-- max-width of 768px -->
+<div class="_container"></div>
+<!-- max-width of 1024px -->
+<div class="_container _container_large"></div>
+<!-- max-width of 1200px -->
+<div class="_container _container_x-large"></div>
+<!-- max-width of 1280px -->
+<div class="_container _container_xx-large"></div>
+      
+
+
+ + +

Grid Mixin

+ +

For layouts designed with responsive grids, you can use the grid mixin.

+ +
+
+
+
+
+
+
+ 
+        
+.column-1 {
+  @include grid(6);
+  background-color: color('purple', 50);
+  height: 3rem;
+}
+
+.column-2 {
+  @include grid(3);
+  background-color: color('teal', 50);
+  height: 3rem;
+  margin-top: 0rem;
+}
+
+.column-3 {
+  @include grid(3, $has-right-gutter: false);
+  background-color: color('gray', 50);
+  height: 3rem;
+  margin-top: 0rem;
+}
+        
+
+
+
+ +

Divisions Mixin

+ +

For layouts made with basic divisions, you can use the divisions mixin.

+ +
+
+
+
+
+
+ 
+        
+.left-division {
+  @include divisions(2);
+  background-color: color('purple', 30);
+  height: 7rem;
+}
+
+.right-division {
+  @include divisions(2);
+  margin-top: 0rem;
+  background-color: color('teal', 30);
+  height: 7rem;
+}
+        
+
+
+
+ +

Divisions is also useful for ui like grid-view list items that don't align with a responsive grid layout.

+ +
+
+
+
+
+
+
+
+
+ 
+        
+.grid-item {
+  @include divisions(5);
+  background-color: color('purple', 50);
+  height: 3rem;
+  margin-top: 0rem;
+
+  &:nth-of-type(2n) {
+    background-color: color('teal', 50);
+  }
+}
+        
+
+
+
+ +

Breakpoints

+ +

Below is a basic usage of defining responsive breakpoints using the Breakpoints-Sass mixin.

+
+
+
+ first item +
+
+ second item +
+
+
+ 
+        
+.breakpoint-example-1 {
+  display: block;
+  background-color: color('purple', 50);
+
+  @include breakpoint(get('large')) {
+    @include grid(6);
+  }
+  }
+
+  .breakpoint-example-2 {
+  display: block;
+  background-color: color('teal', 50);
+
+  @include breakpoint(get('large')) {
+    @include grid(6);
+  }
+}
+        
+
+
+
+ +

Breakpoint Settings

+
+ 
+      
+$BreakpointSettings: (
+  'xx-small': 320px,
+  'x-small': 360px,
+  'small': 640px,
+  'medium': 768px,
+  'large': 1024px,
+  'x-large': 1200px,
+  'xx-large': 1280px
+);
+      
+
+
+ +

Typography Settings

+
+ 
+      
+$TypographySettings: (
+  'sans serif': ('Helvetica Neue', Helvetica, 'Open Sans', Arial, 'Lucida Grande', 'Roboto', sans-serif),
+  'monospace': (source-code-pro, Menlo, Consolas, monospace),
+  'weight bold': 700,
+  'weight normal': 400,
+  'weight light': 200,
+  'rhythm': 2rem
+);
+      
+
+
+ +

Colors Settings

+
+ 
+      
+$ColorScheme: (
+  'primary color': color('purple', 50),
+  'secondary color': color('teal', 50),
+  'background color': color('white', 10),
+  'text color': color('gray', 80),
+  'white': color('white', 10),
+  'black': color('gray', 100)
+);
+      
+
+
+ +

set-text-color Function

+ +

The set-text-color function can find a contrasting text color given a background color.

+ +
+
+
+ Dark text, light background +
+
+ Light text, dark background +
+
+
+ 
+        
+.element-with-dark-text {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('purple', 20);
+  color: set-text-color(color('purple', 20));
+  }
+
+  .element-with-light-text {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('purple', 80);
+  color: set-text-color(color('purple', 80));
+}
+        
+
+
+
+ +

color Function

+ +

The color function can pull a color from the IBM Design Color palette given a color name and tone.

+ +
+
+
+ green 50 + blue 40 + yellow 30 +
+
+
+ 
+        
+.lots-of-colors {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: color('white', 40);
+
+  span:nth-of-type(1) {
+    color: color('green', 50);
+  }
+
+  span:nth-of-type(2) {
+    color: color('blue', 40);
+  }
+
+  span:nth-of-type(3) {
+    color: color('yellow', 30);
+  }
+}
+        
+
+
+
+ +

get Function

+ +

The get function can look up a key in any global setting (Breakpoints, Typography, etc.) defined in the Sass library.

+ +
+
+
+ Get +
+
+ Get +
+
+
+ 
+        
+.get-example {
+  display: block;
+  padding: get('rhythm') / 2;
+  background-color: get('background color');
+  color: get('primary color');
+
+  @include breakpoint(get('medium')) {
+    @include grid(6);
+
+    &:nth-of-type(2) {
+      margin-right: 0rem;
+    }
+  }
+}
+        
+
+
+
+ + + +
+ +
+ + + + + + + + + + + + diff --git a/gulp/_styles.js b/gulp/_styles.js deleted file mode 100644 index f825ad4..0000000 --- a/gulp/_styles.js +++ /dev/null @@ -1,18 +0,0 @@ -var config = require('../config.js'), - sass = require('gulp-sass'), - autoprefixer = require('gulp-autoprefixer'), - plumber = require('gulp-plumber'), - onError = require('./on-error.js'); - -module.exports = function(watchPath, destPath, gulpInstance) { - return gulpInstance.src([watchPath]) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(sass({ - errLogToConsole: true, - includePaths: ['./node_modules'] - })) - .pipe(autoprefixer()) - .pipe(gulpInstance.dest(destPath)); -} diff --git a/gulp/browser-sync.js b/gulp/browser-sync.js deleted file mode 100755 index 4317b23..0000000 --- a/gulp/browser-sync.js +++ /dev/null @@ -1,26 +0,0 @@ -/** -* Browser Sync setup and tasks -**/ - -'use strict'; - -var config = require('../config.js'), - gulp = require('gulp'), - browserSync = require('browser-sync'), - reload = browserSync.reload; - -// Paths -var baseDir = config.paths.docs.root; - -gulp.task('browser-sync', function () { - browserSync.init({ - 'notify': true, - 'server': { - 'baseDir': baseDir - } - }); -}); - -gulp.task('browser-sync-reload', function() { - browserSync.reload(); -}); diff --git a/gulp/dist.js b/gulp/dist.js deleted file mode 100644 index 09adfa3..0000000 --- a/gulp/dist.js +++ /dev/null @@ -1,120 +0,0 @@ -var config = require('../config.js'), - sass = require('./_styles.js'), - gulp = require('gulp'), - rename = require('gulp-rename'), - clean = require('gulp-clean'), - cleanCSS = require('gulp-clean-css'), - uglify = require('gulp-uglify'), - concat = require('gulp-concat'), - browserSync = require('browser-sync'), - runSequence = require('run-sequence'), - plumber = require('gulp-plumber'), - onError = require('./on-error.js'); - -// Paths -var watchPath = config.paths.src.styles + '/**/*.scss', - destPath = config.paths.dist.root, - distSrcPath = config.paths.src.dist; - -var projectName = config.projectName; - -gulp.task('dist', function() { - return runSequence('dist:clean', [ - 'dist:scss', - 'dist:css', - 'dist:icons', - 'dist:icon-fonts', - 'dist:scripts' - ]); -}); - -gulp.task('dist:clean', function() { - return gulp.src([destPath]).pipe(clean()); -}); - -gulp.task('dist:scss', function() { - return runSequence( - 'dist:scss-export', - 'dist:scss-change-name', - 'dist:scss-clean', - 'dist:clean-style' - ); -}); - -gulp.task('dist:scss-export', function() { - return gulp.src([watchPath]) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('dist:scss-change-name', function() { - return gulp.src([destPath + '/' + projectName + '.scss']) - .pipe(rename('_' + projectName + '.scss')) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('dist:scss-clean', function() { - return gulp.src([destPath + '/' + projectName + '.scss']) - .pipe(clean()); -}); - -gulp.task('dist:css', function() { - return runSequence('dist:css-normal', 'dist:css-min'); -}); - -gulp.task('dist:css-normal', function() { - return sass(watchPath, destPath, gulp); -}); - -gulp.task('dist:css-min', function() { - return gulp.src([destPath + '/' + projectName + '.css']) - .pipe(rename(projectName + '.min.css')) - .pipe(cleanCSS()) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('dist:clean-style', function() { - return gulp.src([destPath + '/style.scss', destPath + '/style.css']) - .pipe(clean()); -}); - -gulp.task('dist:scripts', ['dist:scripts-lib', 'dist:scripts-unminify', 'dist:scripts-minify']); - -gulp.task('dist:scripts-lib', function() { - return gulp.src([config.paths.src.scripts + '/lib/**/*.js']) - .pipe(gulp.dest(config.paths.dist.scripts)); -}); - -gulp.task('dist:scripts-unminify', function() { - return gulp.src([config.paths.src.scripts + '/lib/vendors/*.js', config.paths.src.scripts + '/lib/components/*.js', config.paths.src.scripts + '/lib/script.js']) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(concat(projectName + '.js')) - .pipe(gulp.dest(config.paths.dist.root)); -}); - -gulp.task('dist:scripts-minify', function() { - return gulp.src([config.paths.src.scripts + '/lib/vendors/*.js', config.paths.src.scripts + '/lib/components/*.js', config.paths.src.scripts + '/lib/script.js']) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(concat(projectName + '.min.js')) - .pipe(uglify()) - .pipe(gulp.dest(config.paths.dist.root)); -}); - -gulp.task('dist:icons', function() { - return gulp.src(config.paths.src.icons + '/**.*') - .pipe(gulp.dest(destPath + '/icons')); -}); - -gulp.task('dist:icon-fonts', function() { - return gulp.src(config.paths.docs.iconFonts + '/**.*') - .pipe(gulp.dest(destPath + '/icons-fonts')); -}); - -gulp.task('dist:watch', function() { - return gulp.watch(watchPath).on('change', function() { - runSequence('dist', 'browser-sync-reload'); - }); -}); diff --git a/gulp/icon-fonts.js b/gulp/icon-fonts.js deleted file mode 100644 index cda7d8a..0000000 --- a/gulp/icon-fonts.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Compiles JS to dist - **/ - -'use strict'; - -var paths = require('../config.js').paths; -var gulp = require('gulp'); -var runSequence = require('run-sequence'); -var iconfont = require('gulp-iconfont'); -var iconfontCSS = require('gulp-iconfont-css'); -var plumber = require('gulp-plumber'); -var onError = require('./on-error.js'); - -// Paths -var watchPath = paths.src.icons + '/**/*.svg'; -var targetPath = '../../../src/scss/lib/components/icon/_icon-fonts.scss'; -var fontPath = '../fonts/icon-fonts/'; -var destPath = paths.docs.iconFonts; -var imagesDestPath = paths.docs.icons; - -gulp.task('icon-fonts', ['icon-fonts:copy-to-images'], function() { - return gulp.src([watchPath]) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(iconfontCSS({ - fontName: 'icons', - targetPath: targetPath, - fontPath: fontPath - })) - .pipe(iconfont({ - fontName: 'icons', // required - appendCodepoints: true, // recommended option - normalize: true, - formats: ['svg', 'ttf', 'eot', 'woff'] - })) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('icon-fonts:copy-to-images', function() { - return gulp.src([watchPath]) - .pipe(gulp.dest(imagesDestPath)); -}); - -gulp.task('icon-fonts:watch', ['icon-fonts'], function() { - return gulp.watch(watchPath).on('change', function() { - runSequence('icon-fonts', 'styles', 'browser-sync-reload'); - }); -}); diff --git a/gulp/on-error.js b/gulp/on-error.js deleted file mode 100755 index 9eaf000..0000000 --- a/gulp/on-error.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; -// error catching to prevent gulp from crashing -module.exports = function(error) { - // details of the error in console - console.log(error); - this.emit('end'); -}; diff --git a/gulp/scripts.js b/gulp/scripts.js deleted file mode 100644 index b0000f8..0000000 --- a/gulp/scripts.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Compiles src/js to public/js - **/ - -'use strict'; - -var config = require('../config.js'); -var gulp = require('gulp'); -var concat = require('gulp-concat'); -var sourcemaps = require("gulp-sourcemaps"); -var runSequence = require('run-sequence'); -var plumber = require('gulp-plumber'); -var onError = require('./on-error.js'); - -// Paths -var watchPath = config.paths.src.scripts + '/**/*.js', - destPath = config.paths.docs.scripts; - -gulp.task('scripts', function() { - return gulp.src([config.paths.src.scripts + '/lib/vendors/*.js', config.paths.src.scripts + '/lib/components/*.js', config.paths.src.scripts + '/lib/script.js']) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(sourcemaps.init()) - .pipe(concat('watson-components.js')) - .pipe(sourcemaps.write('.')) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('scripts:site', function() { - return gulp.src([config.paths.src.scripts + '/page/**/*.js']) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('scripts:watch', ['scripts', 'scripts:site'], function() { - return gulp.watch(watchPath).on('change', function() { - runSequence('scripts', 'browser-sync-reload'); - }); -}); diff --git a/gulp/serve.js b/gulp/serve.js deleted file mode 100755 index 7a8b050..0000000 --- a/gulp/serve.js +++ /dev/null @@ -1,15 +0,0 @@ -/** -* Serve site -**/ - -'use strict'; - -var gulp = require('gulp'), - runSequence = require('run-sequence'); - -gulp.task('serve', function (cb) { - return runSequence( - ['compile', 'browser-sync', 'watch'], - cb - ); -}); diff --git a/gulp/styles.js b/gulp/styles.js deleted file mode 100755 index c56daf4..0000000 --- a/gulp/styles.js +++ /dev/null @@ -1,61 +0,0 @@ -/** -* Compiles SCSS to CSS -**/ - -'use strict'; - -var config = require('../config.js'), - sass = require('./_styles.js'), - gulp = require('gulp'), - scsslint = require('gulp-scss-lint'), - beautify = require('gulp-beautify'), - clean = require('gulp-clean'), - browserSync = require('browser-sync'), - runSequence = require('run-sequence'), - onError = require('./on-error.js'); - -// Paths -var watchPath = config.paths.src.styles + '/**/*.scss', - destPath = config.paths.docs.styles; - -var projectName = config.projectName; - -gulp.task('styles', function() { - return runSequence('styles:lint', 'styles:compile', 'styles:clean'); -}); - -gulp.task('styles:compile', function() { - return sass(watchPath, destPath, gulp); -}); - -gulp.task('styles:clean', function() { - return gulp.src(destPath + '/' + projectName + '.css') - .pipe(clean()); -}); - -gulp.task('styles:lint', function() { - return runSequence('styles:lint-base', 'styles:lint-with-report'); -}); - -gulp.task('styles:lint-base', function() { - return gulp.src([ - watchPath, - '!' + config.paths.src.styles + '/lib/components/icon/_icon-fonts.scss', - '!' + config.paths.src.styles + '/lib/vendors/reset/_reset.scss' - ]).pipe(scsslint({ - 'maxBuffer': 1000000, - 'reporterOutput': 'scss-report.json' - })); -}); - -gulp.task('styles:lint-with-report', function() { - return gulp.src('scss-report.json') - .pipe(beautify()) - .pipe(gulp.dest('.')); -}); - -gulp.task('styles:watch', function() { - return gulp.watch(watchPath).on('change', function() { - runSequence('styles', 'browser-sync-reload'); - }); -}); diff --git a/gulp/views.js b/gulp/views.js deleted file mode 100755 index 546daee..0000000 --- a/gulp/views.js +++ /dev/null @@ -1,36 +0,0 @@ -/** -* Compiles HTML -**/ - -'use strict'; - -var config = require('../config.js'), - gulp = require('gulp'), - nunjucksRender = require('gulp-nunjucks-render'), - browserSync = require('browser-sync'), - runSequence = require('run-sequence'), - plumber = require('gulp-plumber'), - onError = require('./on-error.js'); - -// Paths -var viewsPath = config.paths.src.views, - srcPath = config.paths.src.views + '/pages/**/*.nunjucks', - watchPath = viewsPath + '/**/*.nunjucks', - destPath = config.paths.docs.root; - -gulp.task('views', function() { - return gulp.src([srcPath]) - .pipe(plumber({ - errorHandler: onError - })) - .pipe(nunjucksRender({ - path: [viewsPath] - })) - .pipe(gulp.dest(destPath)); -}); - -gulp.task('views:watch', function() { - return gulp.watch([watchPath]).on('change', function() { - runSequence('views', 'browser-sync-reload'); - }); -}); diff --git a/gulp/watch.js b/gulp/watch.js deleted file mode 100755 index e9b1e2b..0000000 --- a/gulp/watch.js +++ /dev/null @@ -1,26 +0,0 @@ -/** -* Watches all the files for changes -**/ - -'use strict'; - -var gulp = require('gulp'), - browserSync = require('browser-sync'); - -// list of gulp tasks -var tasks, - watches; - -tasks = [ - 'styles', - 'scripts', - 'views', - 'icon-fonts' -]; - -watches = tasks.map(function(element) { - return element + ':watch'; -}); - -gulp.task('compile', tasks); -gulp.task('watch', watches); diff --git a/gulpfile.js b/gulpfile.js index 4965929..1db0942 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,20 +1,124 @@ -/** -* Main Gulp File -**/ - -'use strict'; - -var gulp = require('gulp'), - wrench = require('wrench'); - -/** - * This will load all js or coffee files in the gulp directory - * in order to load all gulp tasks - */ -wrench.readdirSyncRecursive('./gulp').filter(function(file) { - return (/\.(js|coffee)$/i).test(file); -}).map(function(file) { - require('./gulp/' + file); -}); +/* eslint-disable import/no-extraneous-dependencies */ + +const gulp = require('gulp'); +const sass = require('gulp-sass'); +const scsslint = require('gulp-scss-lint'); +const beautify = require('gulp-beautify'); +const rename = require('gulp-rename'); +const autoprefixer = require('gulp-autoprefixer'); +const minifyCss = require('gulp-minify-css'); +const sourcemaps = require('gulp-sourcemaps'); +const concat = require('gulp-concat'); +const uglify = require('gulp-uglify'); +const browserSync = require('browser-sync').create(); +const pkg = require('./package.json'); +const nunjucksRender = require('gulp-nunjucks-render'); + +const reloadBrowser = (done) => { + browserSync.reload(); + done(); +}; + +gulp.task('scss:copy', () => + gulp.src(['src/scss/**/*.scss']) + .pipe(gulp.dest('dist')) +); + +gulp.task('scss', ['scss:copy'], () => + gulp.src('dist/main.scss') + .pipe(rename(`_${pkg.name}.scss`)) + .pipe(gulp.dest('dist')) +); + +gulp.task('css', () => + gulp.src('src/scss/main.scss') + .pipe( + sass({ + errLogToConsole: true, + includePaths: ['./node_modules'], + outputStyle: 'nested', + }).on('error', sass.logError) + ) + .pipe(autoprefixer({ + browsers: ['last 2 versions'], + cascade: false, + })) + .pipe(rename(`${pkg.name}.css`)) + .pipe(gulp.dest('dist')) + .pipe(minifyCss()) + .pipe(rename(`${pkg.name}.min.css`)) + .pipe(gulp.dest('dist')) +); + +gulp.task('scss:lint-base', () => + gulp.src(['src/scss/**/*.scss']) + .pipe(scsslint({ + maxBuffer: 1000000, + reporterOutput: 'scss-report.json', + })) +); + +gulp.task('scss:lint-with-report', () => + gulp.src('scss-report.json') + .pipe(beautify()) + .pipe(gulp.dest('.')) +); + +gulp.task('scss:lint', () => ['scss:lint-base', 'scss:lint-with-report']); -gulp.task('default', ['serve']); +gulp.task('example-css', () => + gulp.src('example/src/scss/main.scss') + .pipe(sourcemaps.init()) + .pipe( + sass({ + errLogToConsole: true, + includePaths: ['./node_modules'], + outputStyle: 'nested', + }).on('error', sass.logError) + ) + .pipe(autoprefixer({ + browsers: ['last 2 versions'], + cascade: false, + })) + .pipe(rename('bundle.css')) + .pipe(sourcemaps.write()) + .pipe(gulp.dest('example/build')) + .pipe(browserSync.stream()) +); + +gulp.task('example-js', () => + gulp.src('example/src/js/**/*.js') + .pipe(sourcemaps.init()) + .pipe(concat('bundle.js')) + .pipe(uglify()) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest('example/build')) +); + +gulp.task('example-html', () => + gulp.src('example/src/views/pages/**/*.nunjucks') + .pipe(nunjucksRender({ path: ['example/src/views'] })) + .pipe(gulp.dest('example/')) +); + +// high level tasks +gulp.task('example', ['example-css', 'example-js', 'example-html']); +gulp.task('compile', ['css', 'scss', 'example']); + +// default task +gulp.task('default', ['compile']); + +// watch tasks +gulp.task('example-js-watch', ['example-js'], reloadBrowser); +gulp.task('example-html-watch', ['example-html'], reloadBrowser); + +gulp.task('serve', ['example'], () => { + browserSync.init({ + notify: true, + server: './example', + }); + + gulp.watch(['example/src/scss/**/*.scss', 'src/scss/**/*.scss'], ['example-css']); + gulp.watch(['example/src/js/**/*.js'], ['example-js-watch']); + gulp.watch(['example/src/views/**/*.nunjucks'], ['example-html-watch']); +}); diff --git a/package.json b/package.json index bd2258a..daa3566 100644 --- a/package.json +++ b/package.json @@ -6,31 +6,31 @@ "scripts": { "deploy": "sh scripts/deploy.sh", "deploy-from-local": "npm run compile && git subtree push --prefix docs origin gh-pages", - "dist": "gulp dist", - "compile": "gulp compile", + "compile": "./node_modules/.bin/gulp compile", + "dev": "./node_modules/.bin/gulp serve", + "lint": "./node_modules/.bin/eslint .", "validate": "npm ls" }, "author": "IBM Corp.", "license": "Apache-2.0", "devDependencies": { "browser-sync": "^2.11.1", + "eslint": "^3.4.0", + "eslint-config-airbnb": "^10.0.1", + "eslint-plugin-import": "^1.14.0", + "eslint-plugin-jsx-a11y": "^2.2.1", + "eslint-plugin-react": "^6.2.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.0", "gulp-beautify": "^2.0.0", - "gulp-clean": "^0.3.2", - "gulp-clean-css": "^2.0.11", "gulp-concat": "^2.6.0", - "gulp-iconfont": "^8.0.1", - "gulp-iconfont-css": "^2.1.0", + "gulp-minify-css": "^1.2.4", "gulp-nunjucks-render": "^2.0.0", - "gulp-plumber": "^1.1.0", "gulp-rename": "^1.2.2", "gulp-sass": "^2.2.0", "gulp-scss-lint": "^0.4.0", "gulp-sourcemaps": "^1.6.0", - "gulp-uglify": "^1.5.4", - "run-sequence": "^1.1.5", - "wrench": "^1.5.8" + "gulp-uglify": "^1.5.4" }, "repository": { "type": "git", diff --git a/scripts/deploy.sh b/scripts/deploy.sh index 48dee07..c55c33b 100644 --- a/scripts/deploy.sh +++ b/scripts/deploy.sh @@ -4,7 +4,7 @@ GH_REPO="@github.com/watson-developer-cloud/ui-components.git" FULL_REPO="https://$GH_TOKEN$GH_REPO" gulp compile -cd docs +cd example git init git config user.name "Travis Ci" git config user.email "james.zhang75024@gmail.com" diff --git a/src/icons/link.svg b/src/icons/link.svg deleted file mode 100644 index 39affed..0000000 --- a/src/icons/link.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - diff --git a/src/icons/reset.svg b/src/icons/reset.svg deleted file mode 100644 index a167782..0000000 --- a/src/icons/reset.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/src/js/lib/script.js b/src/js/lib/script.js deleted file mode 100644 index b1c40e7..0000000 --- a/src/js/lib/script.js +++ /dev/null @@ -1 +0,0 @@ -// main lib js file diff --git a/src/js/lib/vendors/browser-detect.js b/src/js/lib/vendors/browser-detect.js deleted file mode 100644 index 7aabab0..0000000 --- a/src/js/lib/vendors/browser-detect.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Copyright 2015 IBM Corp. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ - -/* -Browser-detect.js by James Zhang. -This is a very basic browser sniffer. -*/ - -(function() { - - var userAgent = window.navigator.userAgent; - // Browser User Agent Strings - var ie = 'MSIE'; - var ie9 = 'MSIE 9.0'; - var ie10 = 'MSIE 10.0'; - var chrome = 'Chrome'; - var firefox = 'Firefox/'; - var safari = 'Safari'; - // OS User Agent Strings - var windows = 'Windows'; - var mac = 'Macintosh'; - var linux = 'Linux'; - - // class names - var ie_class = 'ie'; - var ie9_class = 'ie9'; - var ie10_class = 'ie10'; - var ie11_class = 'ie11'; - var chrome_class = 'chrome'; - var firefox_class = 'firefox'; - var safari_class = 'safari'; - var windows_class = 'windows'; - var mac_class = 'mac'; - var linux_class = 'linux'; - - // All matching classes will be appended to classes - var classes = ''; - - // using UserAgent, checking to see which match - if (userAgent.indexOf(ie) > -1) { - classes += ie_class + ' '; - } - if (userAgent.indexOf(ie9) > -1) { - classes += ie9_class + ' '; - } - if (userAgent.indexOf(ie10) > -1) { - classes += ie10_class + ' '; - } - if (!!navigator.userAgent.match(/Trident.*rv\:11\./)) { - classes += ie_class + ' ' + ie11_class + ' '; - } - if (userAgent.indexOf(safari) > -1 && userAgent.indexOf(chrome) == -1) { - classes += safari_class + ' '; - } - if (userAgent.indexOf(chrome) > -1) { - classes += chrome_class + ' '; - } - if (userAgent.indexOf(firefox) > -1) { - classes += firefox_class + ' '; - } - if (userAgent.indexOf(windows) > -1) { - classes += windows_class + ' '; - } - if (userAgent.indexOf(mac) > -1) { - classes += mac_class + ' '; - } - if (userAgent.indexOf(linux) > -1) { - classes += linux_class + ' '; - } - - // trimming off additional space - classes = classes.slice(0,-1); - - document.addEventListener('DOMContentLoaded', function() { - // adding class names to body tag - document.body.className += classes; - }); - - // exposing browser information globally - window.browserInfo = classes; - - return classes; - -})(); diff --git a/src/js/lib/vendors/prism.min.js b/src/js/lib/vendors/prism.min.js deleted file mode 100644 index 8fcb0b7..0000000 --- a/src/js/lib/vendors/prism.min.js +++ /dev/null @@ -1,11 +0,0 @@ -/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+json+python+sass+scss */ -var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(g?b[1].length:0),_=b.index+b[0].length,A=m,S=y,P=r.length;P>A&&_>S;++A)S+=(r[A].matchedStr||r[A]).length,w>=S&&(++m,y=S);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,S),b.index-=y}if(b){g&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),j=[m,k];x&&j.push(x);var N=new a(l,c?n.tokenize(b,c):b,d,b,h);j.push(N),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); -Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; -Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); -Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; -Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; -!function(e){var t={variable:[{pattern:/\$?\(\([\w\W]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\w\W]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b-?(?:0x[\dA-Fa-f]+|\d*\.?\d+(?:[Ee]-?\d+)?)\b/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[a-z0-9_#\?\*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)(?:"|')?(\w+?)(?:"|')?\s*\r?\n(?:[\s\S])*?\r?\n\2/g,lookbehind:!0,greedy:!0,inside:t},{pattern:/(["'])(?:\\\\|\\?[^\\])*?\1/g,greedy:!0,inside:t}],variable:t.variable,"function":{pattern:/(^|\s|;|\||&)(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|npm|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|\s|;|\||&)/,lookbehind:!0},keyword:{pattern:/(^|\s|;|\||&)(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|\s|;|\||&)/,lookbehind:!0},"boolean":{pattern:/(^|\s|;|\||&)(?:true|false)(?=$|\s|;|\||&)/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a["function"]=e.languages.bash["function"],a.keyword=e.languages.bash.keyword,a.boolean=e.languages.bash.boolean,a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation}(Prism); -Prism.languages.json={property:/".*?"(?=\s*:)/gi,string:/"(?!:)(\\?[^"])*?"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json; -Prism.languages.python={"triple-quoted-string":{pattern:/"""[\s\S]+?"""|'''[\s\S]+?'''/,alias:"string"},comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},string:{pattern:/("|')(?:\\\\|\\?[^\\\r\n])*?\1/,greedy:!0},"function":{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_][a-zA-Z0-9_]*(?=\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)[a-z0-9_]+/i,lookbehind:!0},keyword:/\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|pass|print|raise|return|try|while|with|yield)\b/,"boolean":/\b(?:True|False)\b/,number:/\b-?(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,punctuation:/[{}[\];(),.:]/}; -!function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m,lookbehind:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var a=/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i,t=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|or|not)\b/,{pattern:/(\s+)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,inside:{punctuation:/:/,variable:a,operator:t}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s]+.*)/m,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:a,operator:t,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,delete e.languages.sass.selector,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*)\S(?:,?[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,?[^,\r\n]+)*)*/,lookbehind:!0}})}(Prism); -Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-_\w]+/,variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\w-]|\$[-_\w]+|#\{\$[-_\w]+\})+(?=\s*:)/i,inside:{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}},Prism.languages.insertBefore("scss","important",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss); diff --git a/src/js/page/page.js b/src/js/page/page.js deleted file mode 100644 index 051a862..0000000 --- a/src/js/page/page.js +++ /dev/null @@ -1 +0,0 @@ -//Executes your code when the DOM is ready. Acts the same as $(document).ready(). diff --git a/src/scss/lib/components/icon/_icon-fonts.scss b/src/scss/lib/components/icon/_icon-fonts.scss deleted file mode 100755 index 78d553f..0000000 --- a/src/scss/lib/components/icon/_icon-fonts.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - font-family: "icons"; - src: url('../fonts/icon-fonts/icons.eot'); - src: url('../fonts/icon-fonts/icons.eot?#iefix') format('eot'), - url('../fonts/icon-fonts/icons.woff2') format('woff2'), - url('../fonts/icon-fonts/icons.woff') format('woff'), - url('../fonts/icon-fonts/icons.ttf') format('truetype'), - url('../fonts/icon-fonts/icons.svg#icons') format('svg'); -} - -.icon:before { - font-family: "icons"; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-style: normal; - font-variant: normal; - font-weight: normal; - /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ - text-decoration: none; - text-transform: none; -} - - -.icon-link:before { - content: "\E001"; -} - -.icon-reset:before { - content: "\E002"; -} diff --git a/src/scss/lib/components/icon/_icon.scss b/src/scss/lib/components/icon/_icon.scss index de6fc96..92db68d 100755 --- a/src/scss/lib/components/icon/_icon.scss +++ b/src/scss/lib/components/icon/_icon.scss @@ -1,4 +1,22 @@ -@import 'icon-fonts'; +.icon:before { + font-family: "icons"; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-style: normal; + font-variant: normal; + font-weight: normal; + /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ + text-decoration: none; + text-transform: none; +} + +.icon-link:before { + content: "\E001"; +} + +.icon-reset:before { + content: "\E002"; +} .icon { vertical-align: middle; diff --git a/src/scss/watson-developer-cloud-ui-components.scss b/src/scss/main.scss similarity index 100% rename from src/scss/watson-developer-cloud-ui-components.scss rename to src/scss/main.scss