@infinitoui/infinito-button
Advanced tools
Comparing version 1.6.3 to 1.6.4
@@ -6,2 +6,10 @@ # Change Log | ||
## [1.6.4](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v1.6.3...v1.6.4) (2021-03-05) | ||
**Note:** Version bump only for package @infinitoui/infinito-button | ||
## [1.6.3](http://git.infinitynewtab.com/Starlab/infinitoui/compare/v1.6.2...v1.6.3) (2021-03-04) | ||
@@ -8,0 +16,0 @@ |
import { css } from 'lit-element'; | ||
export default css `:host{--button-padding: 0 10px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:block;height:100%;font-size:14px}:host([primary]){--font-color: #fff}:host([primary]) button{background:rgba(51,51,51,0.8)}:host([primary]) button:hover{background:#333}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed}button{width:100%;height:100%;min-height:32px;border:1px solid var(--border-color);outline:none;border-radius:var(--border-raduis);color:var(--font-color);padding:var(--button-padding);background:#f5f5f5;font-size:var(--font-size);transition:all 0.3s;cursor:pointer;overflow:hidden;position:relative;display:flex;align-items:center}button>span{flex:1;width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background:#fff}button:not([disabled]):active::after{transform:translate(-50%, -50%) scale(0);opacity:0.3;transition:0s}button::after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background:radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;transform:translate(-50%, -50%) scale(10);opacity:0;transition:transform 0.3s, opacity 0.8s}button .loading{width:36px} | ||
export default css `:host{--button-padding: 0 10px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:block}:host([primary]){--font-color: #fff}:host([primary]) button{background:rgba(51,51,51,0.8)}:host([primary]) button:hover{background:#333}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed;display:flex;align-items:center}:host([loading]) .loading{width:36px;vertical-align:middle;margin-left:3px}:host([loading]) button>span{flex:1;width:0}button{display:inline-block;width:100%;height:100%;min-height:32px;border:1px solid var(--border-color);outline:none;border-radius:var(--border-raduis);color:var(--font-color);padding:var(--button-padding);background:#fafafa;font-size:var(--font-size);transition:all 0.3s;cursor:pointer;overflow:hidden;position:relative}button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:14px;display:inline-block;vertical-align:middle;width:100%}button:hover{background:#fff}button:not([disabled]):active::after{transform:translate(-50%, -50%) scale(0);opacity:0.3;transition:0s}button::after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background:radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;transform:translate(-50%, -50%) scale(10);opacity:0;transition:transform 0.3s, opacity 0.8s} | ||
`; |
@@ -60,5 +60,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
<button ?disabled="${this.disabled}"> | ||
<span> | ||
<slot></slot> | ||
</span> | ||
<span><slot></slot></span> | ||
${this.renderSpin()} | ||
@@ -65,0 +63,0 @@ </button> |
{ | ||
"name": "@infinitoui/infinito-button", | ||
"version": "1.6.3", | ||
"version": "1.6.4", | ||
"description": "button", | ||
@@ -26,3 +26,3 @@ "main": "lib/infinito-button.js", | ||
}, | ||
"gitHead": "3c22a115f336f24f7f6fdb2762799dc47b2dbf64" | ||
"gitHead": "b821c952f0be91b5ac0fad4c74ef42276dd67fd6" | ||
} |
import { css } from 'lit-element' | ||
export default css`:host{--button-padding: 0 10px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:block;height:100%;font-size:14px}:host([primary]){--font-color: #fff}:host([primary]) button{background:rgba(51,51,51,0.8)}:host([primary]) button:hover{background:#333}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed}button{width:100%;height:100%;min-height:32px;border:1px solid var(--border-color);outline:none;border-radius:var(--border-raduis);color:var(--font-color);padding:var(--button-padding);background:#f5f5f5;font-size:var(--font-size);transition:all 0.3s;cursor:pointer;overflow:hidden;position:relative;display:flex;align-items:center}button>span{flex:1;width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}button:hover{background:#fff}button:not([disabled]):active::after{transform:translate(-50%, -50%) scale(0);opacity:0.3;transition:0s}button::after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background:radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;transform:translate(-50%, -50%) scale(10);opacity:0;transition:transform 0.3s, opacity 0.8s}button .loading{width:36px} | ||
export default css`:host{--button-padding: 0 10px;--border-color: #333;--border-raduis: 6px;--font-color: #333;--font-size: 14px;--hover-color: #333;--hover-font-color: #fff;display:block}:host([primary]){--font-color: #fff}:host([primary]) button{background:rgba(51,51,51,0.8)}:host([primary]) button:hover{background:#333}:host([disabled]) button{opacity:0.5;cursor:not-allowed}:host([loading]) button{opacity:0.5;cursor:not-allowed;display:flex;align-items:center}:host([loading]) .loading{width:36px;vertical-align:middle;margin-left:3px}:host([loading]) button>span{flex:1;width:0}button{display:inline-block;width:100%;height:100%;min-height:32px;border:1px solid var(--border-color);outline:none;border-radius:var(--border-raduis);color:var(--font-color);padding:var(--button-padding);background:#fafafa;font-size:var(--font-size);transition:all 0.3s;cursor:pointer;overflow:hidden;position:relative}button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:14px;display:inline-block;vertical-align:middle;width:100%}button:hover{background:#fff}button:not([disabled]):active::after{transform:translate(-50%, -50%) scale(0);opacity:0.3;transition:0s}button::after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background:radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;transform:translate(-50%, -50%) scale(10);opacity:0;transition:transform 0.3s, opacity 0.8s} | ||
` |
@@ -73,5 +73,3 @@ import { | ||
<button ?disabled="${this.disabled}"> | ||
<span> | ||
<slot></slot> | ||
</span> | ||
<span><slot></slot></span> | ||
${this.renderSpin()} | ||
@@ -78,0 +76,0 @@ </button> |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
21421
261