Socket
Socket
Sign inDemoInstall

@anypoint-web-components/anypoint-button

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@anypoint-web-components/anypoint-button - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

src/IconStyles.js

79

CHANGELOG.md

@@ -78,1 +78,80 @@ <a name="1.0.14"></a>

<a name="1.0.15"></a>
## [1.0.15](https://github.com/anypoint-web-components/anypoint-button/compare/1.0.13...1.0.15) (2019-12-03)
### Build
* bumping version [9041de8](https://github.com/anypoint-web-components/anypoint-button/commit/9041de85797b0fc5aad038c48043bdb37d38d864) by Pawel Psztyc
* bumping version [bfd97c4](https://github.com/anypoint-web-components/anypoint-button/commit/bfd97c45e9528925f9b8aa97a47457d5de9a5bd8) by Pawel Psztyc
* bumping version [99aa662](https://github.com/anypoint-web-components/anypoint-button/commit/99aa6624300d1fc281af5d84778707b0e4b28655) by Pawel
* bumping version [e219510](https://github.com/anypoint-web-components/anypoint-button/commit/e21951041ece1d7b1560957643d8ab119a799d65) by Pawel
* bumping version [68becd3](https://github.com/anypoint-web-components/anypoint-button/commit/68becd3f8dd414150ce437455d16c30707a9b429) by Pawel
* bumping version [7633255](https://github.com/anypoint-web-components/anypoint-button/commit/7633255338e0d545622d815e728d3822bc66d1b7) by Pawel
* bumping version [b6222c7](https://github.com/anypoint-web-components/anypoint-button/commit/b6222c7126793ffe7b77c6df8b67f9e60d8e9862) by Pawel
* bumping version [eab5493](https://github.com/anypoint-web-components/anypoint-button/commit/eab5493022e44fee6eb9a9f8348245ae16527ba4) by Pawel
* bumping version [28673af](https://github.com/anypoint-web-components/anypoint-button/commit/28673af135dbf139033164e0ade974256d44c8d3) by Pawel Psztyc
* bumping version [6eb64e2](https://github.com/anypoint-web-components/anypoint-button/commit/6eb64e252b12ea21cfa1fa48363b1f040088c9f6) by Pawel Psztyc
* bumping version [d5938f7](https://github.com/anypoint-web-components/anypoint-button/commit/d5938f734a8eac150fc20d52e8dfe46c5ca044ec) by Pawel
* bumping version [95da1bf](https://github.com/anypoint-web-components/anypoint-button/commit/95da1bfeecdf135ddcae8426c906edd5360bb766) by Pawel
* bumping version [f34d29e](https://github.com/anypoint-web-components/anypoint-button/commit/f34d29eba6a6e41f028c05455f95430a57e3c9fe) by Pawel
* bumping version [f4fab65](https://github.com/anypoint-web-components/anypoint-button/commit/f4fab65193112d8d6102e0817d8cc06d01677ac5) by Pawel
* bumping version [47857e7](https://github.com/anypoint-web-components/anypoint-button/commit/47857e77cc3348ce56acb87675093de4a7cce357) by Pawel
### Update
* moving styles to a separate files [a80fe90](https://github.com/anypoint-web-components/anypoint-button/commit/a80fe90d8662b9760f8ea9b469bc2340b073925b) by Pawel Psztyc
* updating lock file [8e3783b](https://github.com/anypoint-web-components/anypoint-button/commit/8e3783b1f730aea6436a4924a1934836c5279239) by Pawel Psztyc
* updating depdnencies [117939f](https://github.com/anypoint-web-components/anypoint-button/commit/117939f7c2bd5c9f8178154aa104dd86bc16e65a) by Pawel
* upgrading dependencies [effb533](https://github.com/anypoint-web-components/anypoint-button/commit/effb5334f8d9f1e72b336dd7fcc2d984e35151c0) by Pawel
* updating border radius for anypoint styles [332cd95](https://github.com/anypoint-web-components/anypoint-button/commit/332cd95bce23db96a5db67aa64412072895db57c) by Pawel
* upgrading dependencies [0d541ee](https://github.com/anypoint-web-components/anypoint-button/commit/0d541ee18e9d3fe761e64dbdef700da673058b3e) by Pawel
* updating anypoint styles [0270eed](https://github.com/anypoint-web-components/anypoint-button/commit/0270eed42ee82768dac386f08587b5efe3ed3572) by Pawel Psztyc
* upgrading dependencies [c7f33bc](https://github.com/anypoint-web-components/anypoint-button/commit/c7f33bcf0ab973c17971a854a90114a4065fc01f) by Pawel
* adding import name to mockinteractions [9c27462](https://github.com/anypoint-web-components/anypoint-button/commit/9c2746233ec3977392434a4a0201cdfc372c0679) by Pawel
* upgrading project to latest ARC standard [e3c6bfb](https://github.com/anypoint-web-components/anypoint-button/commit/e3c6bfb127800efdcbf379923340e89360784f46) by Pawel Psztyc
### Documentation
* updating demo page to match other elements [0136516](https://github.com/anypoint-web-components/anypoint-button/commit/013651627c602d023852cc2b195b38037cf838d9) by Pawel
* adding typpings [b8d682d](https://github.com/anypoint-web-components/anypoint-button/commit/b8d682d34c94dbc32deb1f5b6fa11824d9ced6b3) by Pawel
* updating readme file [0d79e92](https://github.com/anypoint-web-components/anypoint-button/commit/0d79e926e19c657ac3bf694dd6ac178529eae2cb) by Pawel
### Features
* updating styles to Anypint v3 [015f76a](https://github.com/anypoint-web-components/anypoint-button/commit/015f76adacd34173922461a3f0257bc9892ab259) by Pawel Psztyc
* adding legacy state option [a312070](https://github.com/anypoint-web-components/anypoint-button/commit/a3120703b82f134edd38a3d99b9a088fb70f5a1c) by Pawel
* adding icon button [26518b1](https://github.com/anypoint-web-components/anypoint-button/commit/26518b11c4bcd0b3ab18421e21c3becc1332117d) by Pawel
### Bug Fixes
* fixing font-transform in compatibility mode [a6a58e7](https://github.com/anypoint-web-components/anypoint-button/commit/a6a58e74710826d4b3b8dcab877a84b19312b718) by Pawel
* fixing `legacy` setter [acd70ef](https://github.com/anypoint-web-components/anypoint-button/commit/acd70ef15ede1a18c4e552d1220389820ea6881e) by Pawel
* fixing elevation computation when legacy is set [0000c4b](https://github.com/anypoint-web-components/anypoint-button/commit/0000c4b8211bcf8601f6be6bfa7683920c78f457) by Pawel
* fixing button initialization with createElement [9d60c8b](https://github.com/anypoint-web-components/anypoint-button/commit/9d60c8bda5d0e35848bd4c723409202e6810e837) by Pawel
* fixing legacy button height [88500e8](https://github.com/anypoint-web-components/anypoint-button/commit/88500e87f6ac797e00b24c1cf72a56cd7804f23b) by Pawel
* upgrading dev deps to fix npm audit errors [1e67c35](https://github.com/anypoint-web-components/anypoint-button/commit/1e67c35879c131feb20906a4dda13c396829fd16) by Pawel
* adding version [0bfd643](https://github.com/anypoint-web-components/anypoint-button/commit/0bfd643a135c40797d5bd1b54b156adc2db96f31) by Pawel
### Refactor
* move styles into render [bbdd524](https://github.com/anypoint-web-components/anypoint-button/commit/bbdd524985ab8d3dadeef92d331eda6b664e2879) by TwoPlusTwoOne
* renaming `legacy` to `compatibility` [0ac7835](https://github.com/anypoint-web-components/anypoint-button/commit/0ac783582be6b0aed5f0db64106a49bb66012cf9) by Pawel
* moving component definition to separate files [3738b4f](https://github.com/anypoint-web-components/anypoint-button/commit/3738b4f0572c4c23b7bdf765ce18fe1be860a6f0) by Pawel
* removing use of the <button> for icon button [9b154fd](https://github.com/anypoint-web-components/anypoint-button/commit/9b154fd199a528791acf2e2b5041e18eb4345f09) by Pawel
* updating elements group [b362dca](https://github.com/anypoint-web-components/anypoint-button/commit/b362dca3f5612f04c2a4bef206b04e268fd117f6) by Pawel
* upgraded to LitELement [10d5641](https://github.com/anypoint-web-components/anypoint-button/commit/10d5641999377775ebb8b9afb140fc6ce78856aa) by Pawel
### Testing
* updating SL config [af98061](https://github.com/anypoint-web-components/anypoint-button/commit/af98061479a6091cbf3f75221abe53779bda619c) by Pawel
* fixing tests after refactoring [744cc58](https://github.com/anypoint-web-components/anypoint-button/commit/744cc58d989f58b871ffc77d9014f0856eca2362) by Pawel
* removing IE from tests [7ad97dd](https://github.com/anypoint-web-components/anypoint-button/commit/7ad97dde7c27af1843016c3d81e72ab77d76cf22) by Pawel
* updated Travis configuration to connect to Sauce Labs [182d64a](https://github.com/anypoint-web-components/anypoint-button/commit/182d64a27249b45acae6bbdf5eb371c7cc5861aa) by Pawel

12

package.json
{
"name": "@anypoint-web-components/anypoint-button",
"description": "Anypoint styled button.",
"version": "1.0.14",
"version": "1.0.15",
"license": "Apache-2.0",

@@ -38,3 +38,3 @@ "main": "anypoint-button.js",

"@advanced-rest-client/testing-karma-sl": "^1.1.0",
"@anypoint-web-components/anypoint-checkbox": "^1.0.1",
"@anypoint-web-components/anypoint-checkbox": "^1.0.2",
"@anypoint-web-components/anypoint-icons": "^1.0.1",

@@ -44,4 +44,4 @@ "@anypoint-web-components/anypoint-styles": "^1.0.1",

"@commitlint/config-conventional": "^8.2.0",
"@open-wc/testing": "^2.3.9",
"@open-wc/testing-karma": "^3.2.1",
"@open-wc/testing": "^2.4.1",
"@open-wc/testing-karma": "^3.2.9",
"@polymer/gen-typescript-declarations": "^1.6.2",

@@ -52,6 +52,6 @@ "@polymer/iron-icon": "^3.0.1",

"deepmerge": "^4.2.2",
"es-dev-server": "^1.24.1",
"es-dev-server": "^1.28.0",
"husky": "^3.1.0",
"karma": "^4.4.1",
"lint-staged": "^9.4.3",
"lint-staged": "^9.5.0",
"sinon": "^7.5.0"

@@ -58,0 +58,0 @@ },

@@ -1,4 +0,5 @@

import { html, css } from 'lit-element';
import { html } from 'lit-element';
import { AnypointButtonBase } from './AnypointButtonBase.js';
import '@polymer/paper-ripple/paper-ripple.js';
import styles from './Styles.js';
/**

@@ -14,169 +15,3 @@ * `anypoint-button`

get styles() {
return css`:host {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
min-width: 5.14em;
margin: 0 0.29em;
outline-width: 0;
user-select: none;
cursor: pointer;
z-index: 0;
padding: 0.7em 0.57em;
font-size: var(--anypoint-button-font-size, 15px);
background-color: var(--anypoint-button-background-color, inherit);
color: var(--anypoint-button-color, var(--anypoint-color-primary));
border-width: 1px;
border-color: var(--anypoint-button-border-color, transparent);
border-style: solid;
border-radius: var(--anypoint-button-border-radius, 3px);
text-transform: var(--anypoint-button-text-transform, uppercase);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
:host([hidden]) {
display: none !important;
}
:host(:focus) {
outline: none;
}
:host([disabled]) {
cursor: auto;
pointer-events: none;
}
:host([emphasis="low"]:not([compatibility])) {
box-shadow: none !important;
}
:host([emphasis="low"][disabled]) {
color: var(--anypoint-button-disabled-color, #a8a8a8);
}
:host(:not([pressed])[emphasis="low"]:hover) {
background-color: var(--anypoint-button-emphasis-low-hover-background-color, rgba(0, 162, 223, .08));
}
:host(:not([pressed]):not([compatibility])[emphasis="low"][focused]) {
background-color: var(--anypoint-button-emphasis-low-focus-background-color, rgba(0, 162, 223, .12));
color: var(--anypoint-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
}
:host(:not([pressed])[emphasis="low"][active]) {
background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
}
:host([emphasis="medium"]:not([compatibility])) {
box-shadow: none !important;
}
:host([emphasis="medium"]) {
border-color: var(--anypoint-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue1));
}
:host([emphasis="medium"][disabled]) {
color: var(--anypoint-button-disabled-color, #a8a8a8);
border-color: var(--anypoint-button-disabled-color, var(--anypoint-color-aluminum4));
}
:host(:not([pressed])[emphasis="medium"]:hover) {
background-color: var(--anypoint-button-emphasis-medium-hover-background-color, rgba(0, 162, 223, .06));
}
:host(:not([pressed])[emphasis="medium"][focused]) {
background-color: var(--anypoint-button-emphasis-medium-focus-background-color, rgba(0, 162, 223, .08));
color: var(--anypoint-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
border-color: var(--anypoint-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue2));
}
:host(:not([pressed])[emphasis="medium"][active]) {
background-color: var(--anypoint-button-emphasis-low-active-background-color, rgba(94, 102, 249, 0.16));
}
:host([emphasis="high"]:not([compatibility])) {
will-change: box-shadow;
background-color: var(--anypoint-button-emphasis-high-background-color, var(--anypoint-color-primary));
color: var(--anypoint-button-emphasis-high-color, var(--anypoint-color-tertiary));
}
:host([emphasis="high"][disabled]:not([compatibility])) {
background: var(--anypoint-button-disabled-background-color, #eaeaea);
color: var(--anypoint-button-disabled-color, #a8a8a8);
box-shadow: none;
}
:host(:not([pressed]):not([compatibility])[emphasis="high"]:hover) {
background-color: var(--anypoint-button-emphasis-high-hover-background-color, rgba(0, 162, 223, 0.87));
}
:host(:not([pressed]):not([compatibility])[emphasis="high"]:focus) {
background-color: var(--anypoint-button-emphasis-high-focus-background-color, rgba(0, 162, 223, 0.87));
}
:host(:not([pressed]):not([compatibility])[emphasis="high"][active]) {
background-color: var(--anypoint-button-emphasis-high-active-background-color, var(--anypoint-color-indigo3));
}
:host([elevation="1"]) {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
:host([elevation="2"]) {
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.4);
}
:host([elevation="3"]) {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.4);
}
:host([emphasis="high"][compatibility]) {
background-color: var(--anypoint-button-background-color, var(--anypoint-color-primary));
color: var(--anypoint-button-color, var(--anypoint-color-tertiary));
border-radius: var(--anypoint-button-border-radius, 2px);
height: 40px;
}
:host([emphasis="high"][compatibility]:hover) {
background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue4));
}
:host([compatibility][focused]) {
box-shadow: var(--anypoint-button-foxus-box-shadow-color, 0 0 0 3px #abe2f5);
}
:host([emphasis="high"][compatibility][pressed]) {
background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue5));
}
:host([emphasis="high"][compatibility][active]) {
background-color: var(--anypoint-button-active-background-color, var(--anypoint-color-coreBlue5));
}
:host([compatibility]) {
text-transform: var(--anypoint-button-text-transform, initial);
}
:host([compatibility]) paper-ripple {
display: none;
}
:host([compatibility][disabled]) {
background: var(--anypoint-button-disabled-background-color, #eaeaea);
color: var(--anypoint-button-disabled-color, #a8a8a8);
}
:host ::slotted(*) {
margin: 0 4px;
}
`;
return styles;
}

@@ -183,0 +18,0 @@

@@ -1,5 +0,5 @@

import { html, css } from 'lit-element';
import { html } from 'lit-element';
import { AnypointButtonBase } from './AnypointButtonBase.js';
import '@polymer/paper-ripple/paper-ripple.js';
import styles from './IconStyles.js';
/**

@@ -15,153 +15,3 @@ * `anypoint-button`

get styles() {
return css`
:host {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
outline: none;
}
paper-ripple {
opacity: 0.6;
color: currentColor;
}
:host ::slotted(*) {
margin: 0;
padding: 0;
color: var(--anypoint-icon-button-color, var(--anypoint-color-primary));
}
.icon {
cursor: pointer;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: transparent;
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
:host([disabled]) {
pointer-events: none;
cursor: auto;
}
:host([disabled]) ::slotted(*) {
color: var(--anypoint-icon-button-disabled-color, #a8a8a8) !important;
}
/* Low emhasis styles */
:host([emphasis="low"]:not(:disabled)) .icon {
background-color: none;
border-color: none;
box-shadow: none !important;
}
:host([emphasis="low"]:not(:disabled)) ::slotted(*) {
color: var(--anypoint-icon-button-emphasis-low-color, var(--anypoint-color-primary));
}
:host([emphasis="low"]:hover) .icon {
background-color: var(--anypoint-icon-button-emphasis-low-hover-background-color, rgba(0, 162, 223, .08));
}
:host([emphasis="low"][focused]) .icon {
background-color: var(--anypoint-icon-button-emphasis-low-focus-background-color, rgba(0, 162, 223, .12));
}
:host([emphasis="low"][active]) .icon {
background-color: var(--anypoint-icon-button-emphasis-low-active-background-color, rgba(0, 162, 223, .16));
}
:host([emphasis="low"][active]) ::slotted(*) {
color: var(--anypoint-icon-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
}
/* Medium emphasis styles */
:host([emphasis="medium"]) .icon {
border-color: var(--anypoint-icon-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue1));
box-shadow: none !important;
}
:host([emphasis="medium"][disabled]) .icon {
border-color: var(--anypoint-icon-button-disabled-color, var(--anypoint-color-aluminum4));
}
:host([emphasis="medium"][disabled]) ::slotted(*) {
color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
}
:host([emphasis="medium"]:hover) .icon {
background-color: var(--anypoint-icon-button-emphasis-medium-hover-background-color, rgba(0, 162, 223, .06));
}
:host([emphasis="medium"][focused]) .icon {
background-color: var(--anypoint-icon-button-emphasis-medium-focus-background-color, rgba(0, 162, 223, .08));
border-color: var(--anypoint-icon-button-emphasis-medium-focus-border-color, var(--anypoint-color-robustBlue2));
}
:host([emphasis="medium"][focused]) ::slotted(*) {
color: var(--anypoint-icon-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
}
:host([emphasis="medium"][active]) .icon {
background-color: var(--anypoint-icon-button-emphasis-low-active-background-color, rgba(94, 102, 249, 0.16));
}
/* High emphasis styles */
:host([emphasis="high"]) .icon {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
will-change: box-shadow;
background-color: var(--anypoint-icon-button-emphasis-high-background-color, var(--anypoint-color-primary));
}
:host([emphasis="high"]) ::slotted(*) {
color: var(--anypoint-icon-button-emphasis-high-color, var(--anypoint-color-tertiary));
}
:host([emphasis="high"][disabled]) .icon {
background: var(--anypoint-icon-button-disabled-background-color, #eaeaea);
box-shadow: none;
}
:host([emphasis="high"][disabled]) ::slotted(*) {
color: var(--anypoint-icon-button-disabled-color, #a8a8a8);
}
:host([emphasis="high"]:hover) .icon {
background-color: var(--anypoint-icon-button-emphasis-high-hover-background-color, rgba(0, 162, 223, 0.87));
}
:host(:not([pressed])[emphasis="high"][active]) .icon {
background-color:
var(--anypoint-icon-button-emphasis-high-active-background-color, var(--anypoint-color-indigo3));
}
:host([elevation="1"]) .icon {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
:host([elevation="2"]) .icon,
:host([elevation][emphasis="high"][focused]) > .icon {
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.4);
}
:host([elevation="3"]) .icon {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.4);
}
`;
return styles;
}

@@ -168,0 +18,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc