diff --git a/packages/button/dist/amd/index.js b/packages/button/dist/amd/index.js
index 2f5d3c31..01c9c1a2 100644
--- a/packages/button/dist/amd/index.js
+++ b/packages/button/dist/amd/index.js
@@ -1,4 +1,4 @@
-define('@aurelia-ux/button', ['exports', 'aurelia-templating', 'aurelia-dependency-injection', '@aurelia-ux/core'], function (exports, aureliaTemplating, aureliaDependencyInjection, core) { 'use strict';
+define('@aurelia-ux/button', ['exports', 'aurelia-templating', 'aurelia-dependency-injection', '@aurelia-ux/core', 'aurelia-framework'], function (exports, aureliaTemplating, aureliaDependencyInjection, core, aureliaFramework) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
@@ -29,7 +29,7 @@ function __decorate(decorators, target, key, desc) {
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
-var UX_BUTTON_VIEW = " ";
+var UX_BUTTON_VIEW = " ";
var UxButton = /** @class */ (function () {
function UxButton(element, styleEngine) {
@@ -131,6 +131,8 @@ var UxButton = /** @class */ (function () {
return UxButton;
}());
+var css = "ux-button{display:inline-block;position:relative}ux-button>button{display:flex;align-items:center;justify-content:center;width:100%;border:0;outline:0;cursor:pointer;text-align:center;font-family:inherit;font-family:var(--ux-theme--button-font-family, inherit);font-weight:500;font-weight:var(--ux-theme--button-font-weight, 500);text-transform:uppercase;text-transform:var(--ux-theme--button-text-transform, uppercase);letter-spacing:.5px;letter-spacing:var(--ux-theme--button-letter-spacing, 0.5px);flex-wrap:nowrap;overflow:hidden}ux-button>button::-moz-focus-inner{border:0}ux-button>button.raised,ux-button>button.flat{min-width:88px;padding:0 16px 0 16px;border-radius:2px}ux-button>button.text{padding:0 16px 0 16px;border-radius:2px}ux-button>button.raised.small,ux-button>button.outline.small,ux-button>button.flat.small,ux-button>button.text.small{font-size:13px;height:32px;line-height:32px}ux-button>button.raised.medium,ux-button>button.outline.medium,ux-button>button.flat.medium,ux-button>button.text.medium{font-size:14px;height:36px;line-height:36px}ux-button>button.raised.large,ux-button>button.outline.large,ux-button>button.flat.large,ux-button>button.text.large{font-size:16px;height:42px;line-height:42px}ux-button>button.outline{border:1px solid;border-radius:4px}ux-button>button.outline:focus{border:1px solid #3f51b5;border:1px solid var(--ux-design--primary, #3F51B5)}ux-button>button.flat,ux-button>button.raised,ux-button>button.fab{background-color:#3f51b5;background-color:var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));color:#fff;color:var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff))}ux-button.accent>button.flat,ux-button.accent>button.raised,ux-button.accent>button.fab{background-color:#ff4081;background-color:var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));color:#fff;color:var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff))}ux-button>button.raised{transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.raised:disabled,ux-button>button.fab:disabled{background-color:#9e9e9e;background-color:var(--ux-theme--button-background-disabled, #9E9E9E);color:#cfd8dc;color:var(--ux-theme--button-foreground-disabled, #CFD8DC)}ux-button>button.raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.raised:disabled:active,ux-button>button.fab:disabled:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.flat:focus,ux-button>button.raised:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}ux-button>button.raised:disabled:focus,ux-button>button.fab:disabled:focus{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.text{background-color:transparent;background-color:var(--ux-theme--button-flat-background, transparent);color:#3f51b5;color:var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5))}ux-button.accent>button.text{background-color:transparent;background-color:var(--ux-theme--button-accent-flat-background, transparent);color:#ff4081;color:var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081))}ux-button>button.text,ux-button>button.outline{color:inherit;background-color:transparent}ux-button>button.flat.disabled{opacity:.74}ux-button>button.fab{border-radius:50%;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.fab.small{width:40px;height:40px}ux-button>button.fab.medium{width:56px;height:56px}ux-button>button.fab.large{width:64px;height:64px}ux-button>button.fab:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.fab:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}"
+
var UxButtonTheme = /** @class */ (function () {
function UxButtonTheme() {
this.themeKey = 'button';
@@ -139,6 +141,7 @@ var UxButtonTheme = /** @class */ (function () {
}());
function configure(config) {
+ aureliaFramework.DOM.injectStyles(css, undefined, undefined, 'ux-button-css');
config.globalResources(UxButton);
}
diff --git a/packages/button/dist/amd/ux-button.css b/packages/button/dist/amd/ux-button.css
deleted file mode 100644
index e8a71a5f..00000000
--- a/packages/button/dist/amd/ux-button.css
+++ /dev/null
@@ -1,198 +0,0 @@
-ux-button {
- display: inline-block;
- position: relative;
-}
-
-ux-button>button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- border: 0;
- outline: none;
- cursor: pointer;
- text-align: center;
- font-family: inherit;
- font-family: var(--ux-theme--button-font-family, inherit);
- font-weight: 500;
- font-weight: var(--ux-theme--button-font-weight, 500);
- text-transform: uppercase;
- text-transform: var(--ux-theme--button-text-transform, uppercase);
- letter-spacing: 0.5px;
- letter-spacing: var(--ux-theme--button-letter-spacing, 0.5px);
- flex-wrap: nowrap;
- overflow: hidden;
-}
-
-ux-button>button::-moz-focus-inner {
- border: none;
-}
-
-ux-button>button.raised,
-ux-button>button.flat {
- min-width: 88px;
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.text {
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.raised.small,
-ux-button>button.outline.small,
-ux-button>button.flat.small,
-ux-button>button.text.small {
- font-size: 13px;
- height: 32px;
- line-height: 32px;
-}
-
-ux-button>button.raised.medium,
-ux-button>button.outline.medium,
-ux-button>button.flat.medium,
-ux-button>button.text.medium {
- font-size: 14px;
- height: 36px;
- line-height: 36px;
-}
-
-ux-button>button.raised.large,
-ux-button>button.outline.large,
-ux-button>button.flat.large,
-ux-button>button.text.large {
- font-size: 16px;
- height: 42px;
- line-height: 42px;
-}
-
-ux-button>button.outline {
- border: 1px solid;
- border-radius: 4px;
-}
-
-ux-button>button.outline:focus {
- border: 1px solid #3F51B5;
- border: 1px solid var(--ux-design--primary, #3F51B5);
-}
-
-ux-button>button.flat,
-ux-button>button.raised,
-ux-button>button.fab {
- background-color: #3F51B5;
- background-color: var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));
- color: #fff;
- color: var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff));
-}
-
-ux-button.accent>button.flat,
-ux-button.accent>button.raised,
-ux-button.accent>button.fab {
- background-color: #FF4081;
- background-color: var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));
- color: #fff;
- color: var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff));
-}
-
-ux-button>button.raised {
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.raised:disabled,
-ux-button>button.fab:disabled {
- background-color: #9E9E9E;
- background-color: var(--ux-theme--button-background-disabled, #9E9E9E);
- color: #CFD8DC;
- color: var(--ux-theme--button-foreground-disabled, #CFD8DC);
-}
-
-ux-button>button.raised:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:active,
-ux-button>button.fab:disabled:active {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.flat:focus,
-ux-button>button.raised:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:focus,
-ux-button>button.fab:disabled:focus {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-flat-background, transparent);
- color: #3F51B5;
- color: var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5));
-}
-
-ux-button.accent>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-accent-flat-background, transparent);
- color: #FF4081;
- color: var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081));
-}
-
-ux-button>button.text,
-ux-button>button.outline {
- color: inherit;
- background-color: transparent;
-}
-
-ux-button>button.flat.disabled {
- opacity: .74;
-}
-
-ux-button>button.fab {
- border-radius: 50%;
- overflow: hidden;
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.fab.small {
- width: 40px;
- height: 40px;
-}
-
-ux-button>button.fab.medium {
- width: 56px;
- height: 56px;
-}
-
-ux-button>button.fab.large {
- width: 64px;
- height: 64px;
-}
-
-ux-button>button.fab:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.fab:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
diff --git a/packages/button/dist/commonjs/index.js b/packages/button/dist/commonjs/index.js
index c223d131..e685539c 100644
--- a/packages/button/dist/commonjs/index.js
+++ b/packages/button/dist/commonjs/index.js
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
var aureliaTemplating = require('aurelia-templating');
var aureliaDependencyInjection = require('aurelia-dependency-injection');
var core = require('@aurelia-ux/core');
+var aureliaFramework = require('aurelia-framework');
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
@@ -35,7 +36,7 @@ function __decorate(decorators, target, key, desc) {
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
-var UX_BUTTON_VIEW = " ";
+var UX_BUTTON_VIEW = " ";
var UxButton = /** @class */ (function () {
function UxButton(element, styleEngine) {
@@ -137,6 +138,8 @@ var UxButton = /** @class */ (function () {
return UxButton;
}());
+var css = "ux-button{display:inline-block;position:relative}ux-button>button{display:flex;align-items:center;justify-content:center;width:100%;border:0;outline:0;cursor:pointer;text-align:center;font-family:inherit;font-family:var(--ux-theme--button-font-family, inherit);font-weight:500;font-weight:var(--ux-theme--button-font-weight, 500);text-transform:uppercase;text-transform:var(--ux-theme--button-text-transform, uppercase);letter-spacing:.5px;letter-spacing:var(--ux-theme--button-letter-spacing, 0.5px);flex-wrap:nowrap;overflow:hidden}ux-button>button::-moz-focus-inner{border:0}ux-button>button.raised,ux-button>button.flat{min-width:88px;padding:0 16px 0 16px;border-radius:2px}ux-button>button.text{padding:0 16px 0 16px;border-radius:2px}ux-button>button.raised.small,ux-button>button.outline.small,ux-button>button.flat.small,ux-button>button.text.small{font-size:13px;height:32px;line-height:32px}ux-button>button.raised.medium,ux-button>button.outline.medium,ux-button>button.flat.medium,ux-button>button.text.medium{font-size:14px;height:36px;line-height:36px}ux-button>button.raised.large,ux-button>button.outline.large,ux-button>button.flat.large,ux-button>button.text.large{font-size:16px;height:42px;line-height:42px}ux-button>button.outline{border:1px solid;border-radius:4px}ux-button>button.outline:focus{border:1px solid #3f51b5;border:1px solid var(--ux-design--primary, #3F51B5)}ux-button>button.flat,ux-button>button.raised,ux-button>button.fab{background-color:#3f51b5;background-color:var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));color:#fff;color:var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff))}ux-button.accent>button.flat,ux-button.accent>button.raised,ux-button.accent>button.fab{background-color:#ff4081;background-color:var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));color:#fff;color:var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff))}ux-button>button.raised{transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.raised:disabled,ux-button>button.fab:disabled{background-color:#9e9e9e;background-color:var(--ux-theme--button-background-disabled, #9E9E9E);color:#cfd8dc;color:var(--ux-theme--button-foreground-disabled, #CFD8DC)}ux-button>button.raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.raised:disabled:active,ux-button>button.fab:disabled:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.flat:focus,ux-button>button.raised:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}ux-button>button.raised:disabled:focus,ux-button>button.fab:disabled:focus{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.text{background-color:transparent;background-color:var(--ux-theme--button-flat-background, transparent);color:#3f51b5;color:var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5))}ux-button.accent>button.text{background-color:transparent;background-color:var(--ux-theme--button-accent-flat-background, transparent);color:#ff4081;color:var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081))}ux-button>button.text,ux-button>button.outline{color:inherit;background-color:transparent}ux-button>button.flat.disabled{opacity:.74}ux-button>button.fab{border-radius:50%;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.fab.small{width:40px;height:40px}ux-button>button.fab.medium{width:56px;height:56px}ux-button>button.fab.large{width:64px;height:64px}ux-button>button.fab:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.fab:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}"
+
var UxButtonTheme = /** @class */ (function () {
function UxButtonTheme() {
this.themeKey = 'button';
@@ -145,6 +148,7 @@ var UxButtonTheme = /** @class */ (function () {
}());
function configure(config) {
+ aureliaFramework.DOM.injectStyles(css, undefined, undefined, 'ux-button-css');
config.globalResources(UxButton);
}
diff --git a/packages/button/dist/commonjs/ux-button.css b/packages/button/dist/commonjs/ux-button.css
deleted file mode 100644
index e8a71a5f..00000000
--- a/packages/button/dist/commonjs/ux-button.css
+++ /dev/null
@@ -1,198 +0,0 @@
-ux-button {
- display: inline-block;
- position: relative;
-}
-
-ux-button>button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- border: 0;
- outline: none;
- cursor: pointer;
- text-align: center;
- font-family: inherit;
- font-family: var(--ux-theme--button-font-family, inherit);
- font-weight: 500;
- font-weight: var(--ux-theme--button-font-weight, 500);
- text-transform: uppercase;
- text-transform: var(--ux-theme--button-text-transform, uppercase);
- letter-spacing: 0.5px;
- letter-spacing: var(--ux-theme--button-letter-spacing, 0.5px);
- flex-wrap: nowrap;
- overflow: hidden;
-}
-
-ux-button>button::-moz-focus-inner {
- border: none;
-}
-
-ux-button>button.raised,
-ux-button>button.flat {
- min-width: 88px;
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.text {
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.raised.small,
-ux-button>button.outline.small,
-ux-button>button.flat.small,
-ux-button>button.text.small {
- font-size: 13px;
- height: 32px;
- line-height: 32px;
-}
-
-ux-button>button.raised.medium,
-ux-button>button.outline.medium,
-ux-button>button.flat.medium,
-ux-button>button.text.medium {
- font-size: 14px;
- height: 36px;
- line-height: 36px;
-}
-
-ux-button>button.raised.large,
-ux-button>button.outline.large,
-ux-button>button.flat.large,
-ux-button>button.text.large {
- font-size: 16px;
- height: 42px;
- line-height: 42px;
-}
-
-ux-button>button.outline {
- border: 1px solid;
- border-radius: 4px;
-}
-
-ux-button>button.outline:focus {
- border: 1px solid #3F51B5;
- border: 1px solid var(--ux-design--primary, #3F51B5);
-}
-
-ux-button>button.flat,
-ux-button>button.raised,
-ux-button>button.fab {
- background-color: #3F51B5;
- background-color: var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));
- color: #fff;
- color: var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff));
-}
-
-ux-button.accent>button.flat,
-ux-button.accent>button.raised,
-ux-button.accent>button.fab {
- background-color: #FF4081;
- background-color: var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));
- color: #fff;
- color: var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff));
-}
-
-ux-button>button.raised {
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.raised:disabled,
-ux-button>button.fab:disabled {
- background-color: #9E9E9E;
- background-color: var(--ux-theme--button-background-disabled, #9E9E9E);
- color: #CFD8DC;
- color: var(--ux-theme--button-foreground-disabled, #CFD8DC);
-}
-
-ux-button>button.raised:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:active,
-ux-button>button.fab:disabled:active {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.flat:focus,
-ux-button>button.raised:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:focus,
-ux-button>button.fab:disabled:focus {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-flat-background, transparent);
- color: #3F51B5;
- color: var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5));
-}
-
-ux-button.accent>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-accent-flat-background, transparent);
- color: #FF4081;
- color: var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081));
-}
-
-ux-button>button.text,
-ux-button>button.outline {
- color: inherit;
- background-color: transparent;
-}
-
-ux-button>button.flat.disabled {
- opacity: .74;
-}
-
-ux-button>button.fab {
- border-radius: 50%;
- overflow: hidden;
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.fab.small {
- width: 40px;
- height: 40px;
-}
-
-ux-button>button.fab.medium {
- width: 56px;
- height: 56px;
-}
-
-ux-button>button.fab.large {
- width: 64px;
- height: 64px;
-}
-
-ux-button>button.fab:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.fab:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
diff --git a/packages/button/dist/es2015/index.js b/packages/button/dist/es2015/index.js
index f328a256..e2ce20f7 100644
--- a/packages/button/dist/es2015/index.js
+++ b/packages/button/dist/es2015/index.js
@@ -1,6 +1,7 @@
import { customElement, bindable, inlineView } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { StyleEngine, PaperRipple, normalizeBooleanAttribute } from '@aurelia-ux/core';
+import { DOM } from 'aurelia-framework';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
@@ -31,7 +32,7 @@ function __decorate(decorators, target, key, desc) {
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
-var UX_BUTTON_VIEW = " ";
+var UX_BUTTON_VIEW = " ";
let UxButton = class UxButton {
constructor(element, styleEngine) {
@@ -129,6 +130,8 @@ UxButton = __decorate([
inlineView(UX_BUTTON_VIEW)
], UxButton);
+var css = "ux-button{display:inline-block;position:relative}ux-button>button{display:flex;align-items:center;justify-content:center;width:100%;border:0;outline:0;cursor:pointer;text-align:center;font-family:inherit;font-family:var(--ux-theme--button-font-family, inherit);font-weight:500;font-weight:var(--ux-theme--button-font-weight, 500);text-transform:uppercase;text-transform:var(--ux-theme--button-text-transform, uppercase);letter-spacing:.5px;letter-spacing:var(--ux-theme--button-letter-spacing, 0.5px);flex-wrap:nowrap;overflow:hidden}ux-button>button::-moz-focus-inner{border:0}ux-button>button.raised,ux-button>button.flat{min-width:88px;padding:0 16px 0 16px;border-radius:2px}ux-button>button.text{padding:0 16px 0 16px;border-radius:2px}ux-button>button.raised.small,ux-button>button.outline.small,ux-button>button.flat.small,ux-button>button.text.small{font-size:13px;height:32px;line-height:32px}ux-button>button.raised.medium,ux-button>button.outline.medium,ux-button>button.flat.medium,ux-button>button.text.medium{font-size:14px;height:36px;line-height:36px}ux-button>button.raised.large,ux-button>button.outline.large,ux-button>button.flat.large,ux-button>button.text.large{font-size:16px;height:42px;line-height:42px}ux-button>button.outline{border:1px solid;border-radius:4px}ux-button>button.outline:focus{border:1px solid #3f51b5;border:1px solid var(--ux-design--primary, #3F51B5)}ux-button>button.flat,ux-button>button.raised,ux-button>button.fab{background-color:#3f51b5;background-color:var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));color:#fff;color:var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff))}ux-button.accent>button.flat,ux-button.accent>button.raised,ux-button.accent>button.fab{background-color:#ff4081;background-color:var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));color:#fff;color:var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff))}ux-button>button.raised{transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.raised:disabled,ux-button>button.fab:disabled{background-color:#9e9e9e;background-color:var(--ux-theme--button-background-disabled, #9E9E9E);color:#cfd8dc;color:var(--ux-theme--button-foreground-disabled, #CFD8DC)}ux-button>button.raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.raised:disabled:active,ux-button>button.fab:disabled:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.flat:focus,ux-button>button.raised:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}ux-button>button.raised:disabled:focus,ux-button>button.fab:disabled:focus{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.text{background-color:transparent;background-color:var(--ux-theme--button-flat-background, transparent);color:#3f51b5;color:var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5))}ux-button.accent>button.text{background-color:transparent;background-color:var(--ux-theme--button-accent-flat-background, transparent);color:#ff4081;color:var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081))}ux-button>button.text,ux-button>button.outline{color:inherit;background-color:transparent}ux-button>button.flat.disabled{opacity:.74}ux-button>button.fab{border-radius:50%;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.fab.small{width:40px;height:40px}ux-button>button.fab.medium{width:56px;height:56px}ux-button>button.fab.large{width:64px;height:64px}ux-button>button.fab:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.fab:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}"
+
class UxButtonTheme {
constructor() {
this.themeKey = 'button';
@@ -136,6 +139,7 @@ class UxButtonTheme {
}
function configure(config) {
+ DOM.injectStyles(css, undefined, undefined, 'ux-button-css');
config.globalResources(UxButton);
}
diff --git a/packages/button/dist/es2015/ux-button.css b/packages/button/dist/es2015/ux-button.css
deleted file mode 100644
index e8a71a5f..00000000
--- a/packages/button/dist/es2015/ux-button.css
+++ /dev/null
@@ -1,198 +0,0 @@
-ux-button {
- display: inline-block;
- position: relative;
-}
-
-ux-button>button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- border: 0;
- outline: none;
- cursor: pointer;
- text-align: center;
- font-family: inherit;
- font-family: var(--ux-theme--button-font-family, inherit);
- font-weight: 500;
- font-weight: var(--ux-theme--button-font-weight, 500);
- text-transform: uppercase;
- text-transform: var(--ux-theme--button-text-transform, uppercase);
- letter-spacing: 0.5px;
- letter-spacing: var(--ux-theme--button-letter-spacing, 0.5px);
- flex-wrap: nowrap;
- overflow: hidden;
-}
-
-ux-button>button::-moz-focus-inner {
- border: none;
-}
-
-ux-button>button.raised,
-ux-button>button.flat {
- min-width: 88px;
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.text {
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.raised.small,
-ux-button>button.outline.small,
-ux-button>button.flat.small,
-ux-button>button.text.small {
- font-size: 13px;
- height: 32px;
- line-height: 32px;
-}
-
-ux-button>button.raised.medium,
-ux-button>button.outline.medium,
-ux-button>button.flat.medium,
-ux-button>button.text.medium {
- font-size: 14px;
- height: 36px;
- line-height: 36px;
-}
-
-ux-button>button.raised.large,
-ux-button>button.outline.large,
-ux-button>button.flat.large,
-ux-button>button.text.large {
- font-size: 16px;
- height: 42px;
- line-height: 42px;
-}
-
-ux-button>button.outline {
- border: 1px solid;
- border-radius: 4px;
-}
-
-ux-button>button.outline:focus {
- border: 1px solid #3F51B5;
- border: 1px solid var(--ux-design--primary, #3F51B5);
-}
-
-ux-button>button.flat,
-ux-button>button.raised,
-ux-button>button.fab {
- background-color: #3F51B5;
- background-color: var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));
- color: #fff;
- color: var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff));
-}
-
-ux-button.accent>button.flat,
-ux-button.accent>button.raised,
-ux-button.accent>button.fab {
- background-color: #FF4081;
- background-color: var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));
- color: #fff;
- color: var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff));
-}
-
-ux-button>button.raised {
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.raised:disabled,
-ux-button>button.fab:disabled {
- background-color: #9E9E9E;
- background-color: var(--ux-theme--button-background-disabled, #9E9E9E);
- color: #CFD8DC;
- color: var(--ux-theme--button-foreground-disabled, #CFD8DC);
-}
-
-ux-button>button.raised:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:active,
-ux-button>button.fab:disabled:active {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.flat:focus,
-ux-button>button.raised:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:focus,
-ux-button>button.fab:disabled:focus {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-flat-background, transparent);
- color: #3F51B5;
- color: var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5));
-}
-
-ux-button.accent>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-accent-flat-background, transparent);
- color: #FF4081;
- color: var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081));
-}
-
-ux-button>button.text,
-ux-button>button.outline {
- color: inherit;
- background-color: transparent;
-}
-
-ux-button>button.flat.disabled {
- opacity: .74;
-}
-
-ux-button>button.fab {
- border-radius: 50%;
- overflow: hidden;
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.fab.small {
- width: 40px;
- height: 40px;
-}
-
-ux-button>button.fab.medium {
- width: 56px;
- height: 56px;
-}
-
-ux-button>button.fab.large {
- width: 64px;
- height: 64px;
-}
-
-ux-button>button.fab:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.fab:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
diff --git a/packages/button/dist/native-modules/index.js b/packages/button/dist/native-modules/index.js
index 06038488..fb8aa964 100644
--- a/packages/button/dist/native-modules/index.js
+++ b/packages/button/dist/native-modules/index.js
@@ -1,6 +1,7 @@
import { customElement, bindable, inlineView } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { StyleEngine, PaperRipple, normalizeBooleanAttribute } from '@aurelia-ux/core';
+import { DOM } from 'aurelia-framework';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
@@ -31,7 +32,7 @@ function __decorate(decorators, target, key, desc) {
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
-var UX_BUTTON_VIEW = " ";
+var UX_BUTTON_VIEW = " ";
var UxButton = /** @class */ (function () {
function UxButton(element, styleEngine) {
@@ -133,6 +134,8 @@ var UxButton = /** @class */ (function () {
return UxButton;
}());
+var css = "ux-button{display:inline-block;position:relative}ux-button>button{display:flex;align-items:center;justify-content:center;width:100%;border:0;outline:0;cursor:pointer;text-align:center;font-family:inherit;font-family:var(--ux-theme--button-font-family, inherit);font-weight:500;font-weight:var(--ux-theme--button-font-weight, 500);text-transform:uppercase;text-transform:var(--ux-theme--button-text-transform, uppercase);letter-spacing:.5px;letter-spacing:var(--ux-theme--button-letter-spacing, 0.5px);flex-wrap:nowrap;overflow:hidden}ux-button>button::-moz-focus-inner{border:0}ux-button>button.raised,ux-button>button.flat{min-width:88px;padding:0 16px 0 16px;border-radius:2px}ux-button>button.text{padding:0 16px 0 16px;border-radius:2px}ux-button>button.raised.small,ux-button>button.outline.small,ux-button>button.flat.small,ux-button>button.text.small{font-size:13px;height:32px;line-height:32px}ux-button>button.raised.medium,ux-button>button.outline.medium,ux-button>button.flat.medium,ux-button>button.text.medium{font-size:14px;height:36px;line-height:36px}ux-button>button.raised.large,ux-button>button.outline.large,ux-button>button.flat.large,ux-button>button.text.large{font-size:16px;height:42px;line-height:42px}ux-button>button.outline{border:1px solid;border-radius:4px}ux-button>button.outline:focus{border:1px solid #3f51b5;border:1px solid var(--ux-design--primary, #3F51B5)}ux-button>button.flat,ux-button>button.raised,ux-button>button.fab{background-color:#3f51b5;background-color:var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));color:#fff;color:var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff))}ux-button.accent>button.flat,ux-button.accent>button.raised,ux-button.accent>button.fab{background-color:#ff4081;background-color:var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));color:#fff;color:var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff))}ux-button>button.raised{transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.raised:disabled,ux-button>button.fab:disabled{background-color:#9e9e9e;background-color:var(--ux-theme--button-background-disabled, #9E9E9E);color:#cfd8dc;color:var(--ux-theme--button-foreground-disabled, #CFD8DC)}ux-button>button.raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.raised:disabled:active,ux-button>button.fab:disabled:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.flat:focus,ux-button>button.raised:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}ux-button>button.raised:disabled:focus,ux-button>button.fab:disabled:focus{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));transition-delay:0s}ux-button>button.text{background-color:transparent;background-color:var(--ux-theme--button-flat-background, transparent);color:#3f51b5;color:var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5))}ux-button.accent>button.text{background-color:transparent;background-color:var(--ux-theme--button-accent-flat-background, transparent);color:#ff4081;color:var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081))}ux-button>button.text,ux-button>button.outline{color:inherit;background-color:transparent}ux-button>button.flat.disabled{opacity:.74}ux-button>button.fab{border-radius:50%;overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1);transition-delay:.2s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12))}ux-button>button.fab.small{width:40px;height:40px}ux-button>button.fab.medium{width:56px;height:56px}ux-button>button.fab.large{width:64px;height:64px}ux-button>button.fab:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);box-shadow:var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));transition-delay:0s}ux-button>button.fab:focus{box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);box-shadow:var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));transition-delay:0s}"
+
var UxButtonTheme = /** @class */ (function () {
function UxButtonTheme() {
this.themeKey = 'button';
@@ -141,6 +144,7 @@ var UxButtonTheme = /** @class */ (function () {
}());
function configure(config) {
+ DOM.injectStyles(css, undefined, undefined, 'ux-button-css');
config.globalResources(UxButton);
}
diff --git a/packages/button/dist/native-modules/ux-button.css b/packages/button/dist/native-modules/ux-button.css
deleted file mode 100644
index e8a71a5f..00000000
--- a/packages/button/dist/native-modules/ux-button.css
+++ /dev/null
@@ -1,198 +0,0 @@
-ux-button {
- display: inline-block;
- position: relative;
-}
-
-ux-button>button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- border: 0;
- outline: none;
- cursor: pointer;
- text-align: center;
- font-family: inherit;
- font-family: var(--ux-theme--button-font-family, inherit);
- font-weight: 500;
- font-weight: var(--ux-theme--button-font-weight, 500);
- text-transform: uppercase;
- text-transform: var(--ux-theme--button-text-transform, uppercase);
- letter-spacing: 0.5px;
- letter-spacing: var(--ux-theme--button-letter-spacing, 0.5px);
- flex-wrap: nowrap;
- overflow: hidden;
-}
-
-ux-button>button::-moz-focus-inner {
- border: none;
-}
-
-ux-button>button.raised,
-ux-button>button.flat {
- min-width: 88px;
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.text {
- padding: 0 16px 0 16px;
- border-radius: 2px;
-}
-
-ux-button>button.raised.small,
-ux-button>button.outline.small,
-ux-button>button.flat.small,
-ux-button>button.text.small {
- font-size: 13px;
- height: 32px;
- line-height: 32px;
-}
-
-ux-button>button.raised.medium,
-ux-button>button.outline.medium,
-ux-button>button.flat.medium,
-ux-button>button.text.medium {
- font-size: 14px;
- height: 36px;
- line-height: 36px;
-}
-
-ux-button>button.raised.large,
-ux-button>button.outline.large,
-ux-button>button.flat.large,
-ux-button>button.text.large {
- font-size: 16px;
- height: 42px;
- line-height: 42px;
-}
-
-ux-button>button.outline {
- border: 1px solid;
- border-radius: 4px;
-}
-
-ux-button>button.outline:focus {
- border: 1px solid #3F51B5;
- border: 1px solid var(--ux-design--primary, #3F51B5);
-}
-
-ux-button>button.flat,
-ux-button>button.raised,
-ux-button>button.fab {
- background-color: #3F51B5;
- background-color: var(--ux-theme--button-background, var(--ux-design--primary, #3F51B5));
- color: #fff;
- color: var(--ux-theme--button-foreground, var(--ux-design--primary-foreground, #fff));
-}
-
-ux-button.accent>button.flat,
-ux-button.accent>button.raised,
-ux-button.accent>button.fab {
- background-color: #FF4081;
- background-color: var(--ux-theme--button-accent-background, var(--ux-design--accent, #FF4081));
- color: #fff;
- color: var(--ux-theme--button-accent-foreground, var(--ux-design--accent-foreground, #fff));
-}
-
-ux-button>button.raised {
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.raised:disabled,
-ux-button>button.fab:disabled {
- background-color: #9E9E9E;
- background-color: var(--ux-theme--button-background-disabled, #9E9E9E);
- color: #CFD8DC;
- color: var(--ux-theme--button-foreground-disabled, #CFD8DC);
-}
-
-ux-button>button.raised:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:active,
-ux-button>button.fab:disabled:active {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.flat:focus,
-ux-button>button.raised:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevationFocus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
-
-ux-button>button.raised:disabled:focus,
-ux-button>button.fab:disabled:focus {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
- transition-delay: 0s;
-}
-
-ux-button>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-flat-background, transparent);
- color: #3F51B5;
- color: var(--ux-theme--button-flat-foreground, var(--ux-design--primary, #3F51B5));
-}
-
-ux-button.accent>button.text {
- background-color: transparent;
- background-color: var(--ux-theme--button-accent-flat-background, transparent);
- color: #FF4081;
- color: var(--ux-theme--button-accent-flat-foreground, var(--ux-design--accent, #FF4081));
-}
-
-ux-button>button.text,
-ux-button>button.outline {
- color: inherit;
- background-color: transparent;
-}
-
-ux-button>button.flat.disabled {
- opacity: .74;
-}
-
-ux-button>button.fab {
- border-radius: 50%;
- overflow: hidden;
- transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- transition-delay: 0.2s;
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- box-shadow: var(--ux-design--elevation2dp, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12));
-}
-
-ux-button>button.fab.small {
- width: 40px;
- height: 40px;
-}
-
-ux-button>button.fab.medium {
- width: 56px;
- height: 56px;
-}
-
-ux-button>button.fab.large {
- width: 64px;
- height: 64px;
-}
-
-ux-button>button.fab:active {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- box-shadow: var(--ux-design--elevation4dp, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2));
- transition-delay: 0s;
-}
-
-ux-button>button.fab:focus {
- box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
- box-shadow: var(--ux-design--elevation-focus, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36));
- transition-delay: 0s;
-}
diff --git a/packages/button/src/html.d.ts b/packages/button/src/html.d.ts
index 1198a9a6..4c285b83 100644
--- a/packages/button/src/html.d.ts
+++ b/packages/button/src/html.d.ts
@@ -2,3 +2,8 @@ declare module '*.html' {
const value: string;
export default value;
}
+
+declare module '*.css' {
+ const value: string;
+ export default value;
+}
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
index f294d0be..46e6765a 100644
--- a/packages/button/src/index.ts
+++ b/packages/button/src/index.ts
@@ -1,8 +1,10 @@
-import { FrameworkConfiguration } from 'aurelia-framework';
+import { FrameworkConfiguration, DOM } from 'aurelia-framework';
import { UxButton } from './ux-button';
+import css from './ux-button.css';
export { UxButtonTheme } from './ux-button-theme';
export function configure(config: FrameworkConfiguration) {
+ DOM.injectStyles(css, undefined, undefined, 'ux-button-css');
config.globalResources(UxButton);
}
diff --git a/packages/button/src/ux-button.html b/packages/button/src/ux-button.html
index f9a8f0a7..42188634 100644
--- a/packages/button/src/ux-button.html
+++ b/packages/button/src/ux-button.html
@@ -1,6 +1,5 @@
-