@assecosolutions/fox-button - npm Package Compare versions

Comparing version 1.5.31 to 1.5.32

index.js

@@ -1559,3 +1559,3 @@ import { css, LitElement, html as html$2, nothing } from 'lit';
     _t$1;
-const styles = css(_t$1 || (_t$1 = _$1`:host{--fox-button-text-on-primary-color: #ffffff}:host{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;position:relative}.fox-button{--fox-button-height: 40px;--fox-button-border-radius: 4px}.fox-button{display:inline-flex;justify-content:space-evenly;align-items:center;height:var(--fox-button-height);padding:0 12px;gap:6px;--fox-button-background-color: var(--fox-client-base-color, #4599ff);font-family:var(--fox-font-family, Nunito);font-size:var(--fox-font-size-base, 14px);font-weight:var(--fox-font-weight-medium, 600);color:var(--fox-button-text-on-primary-color, #ffffff);border-radius:var(--fox-button-border-radius);overflow:hidden;white-space:nowrap;background-clip:border-box;cursor:pointer}.fox-button:hover{--fox-button-background-opacity: 1;--fox-button-background-alpha: 0.9}.fox-button:focus{--fox-button-outline-color: var(--fox-client-30-color, #e7ecf0);--fox-button-background-alpha: 1}.fox-button__outline{color:#142c49;--fox-button-background-opacity: 0;--fox-button-background-color: #ffffff;--fox-button-outline-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__outline:focus{--fox-button-outline-thickness: 3px;--fox-button-outline-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__text{color:#142c49;--fox-button-background-color: #ffffff;--fox-button-background-opacity: 0}.fox-button__text:focus{--fox-button-outline-thickness: 3px;--fox-button-outline-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__label{z-index:3}.fox-button__icon{font-size:18px;color:inherit;z-index:4}.fox-button::after{position:absolute;top:0;left:0;content:"";width:100%;height:100%;z-index:1;background-color:var(--fox-button-background-color, var(--fox-button-primary-color));opacity:var(--fox-button-background-opacity, 1);border-radius:var(--fox-button-border-radius);filter:brightness(var(--fox-button-background-alpha, 1));transition:all .1s ease-in-out}.fox-button::before{position:absolute;top:0;left:0;bottom:0;right:0;content:"";z-index:2;border:var(--fox-button-outline-thickness, 2px) solid var(--fox-button-outline-color);border-radius:var(--fox-button-border-radius);pointer-events:none;transition:all .1s ease-in-out}:host([small]) .fox-button{--fox-button-height: 32px}:host([fullwidth]){width:100%}:host([fullwidth]) .fox-button{flex:1;justify-content:center}:host([disabled]){pointer-events:none}:host([disabled]) .fox-button{opacity:.4}::slotted(*){z-index:3}button{background:unset;border:none;display:block;font-family:inherit;font-size:unset;margin:0;padding:0;outline:none}`));
+const styles = css(_t$1 || (_t$1 = _$1`:host{--fox-button-text-on-primary-color: #ffffff}:host{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;position:relative}.fox-button{--fox-button-height: 40px;--fox-button-border-radius: 4px}.fox-button{display:inline-flex;justify-content:space-evenly;align-items:center;height:var(--fox-button-height);padding:0 12px;gap:6px;--fox-button-background-color: var(--fox-client-base-color, #4599ff);font-family:var(--fox-font-family, Nunito);font-size:var(--fox-font-size-base, 14px);font-weight:var(--fox-font-weight-medium, 600);color:var(--fox-button-text-on-primary-color, #ffffff);border-radius:var(--fox-button-border-radius);overflow:hidden;white-space:nowrap;background-clip:border-box;cursor:pointer}.fox-button:hover{--fox-button-background-opacity: 1;--fox-button-background-alpha: 0.9}.fox-button:focus{--fox-button-outlined-color: var(--fox-client-30-color, #e7ecf0);--fox-button-background-alpha: 1}.fox-button__outlined{color:#142c49;--fox-button-background-opacity: 0;--fox-button-background-color: #ffffff;--fox-button-outlined-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__outlined:focus{--fox-button-outlined-thickness: 3px;--fox-button-outlined-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__text{color:#142c49;--fox-button-background-color: #ffffff;--fox-button-background-opacity: 0}.fox-button__text:focus{--fox-button-outlined-thickness: 3px;--fox-button-outlined-color: var(--fox-base-grey-30-color, #e7ecf0)}.fox-button__label{z-index:3}.fox-button__icon{font-size:18px;color:inherit;z-index:4}.fox-button::after{position:absolute;top:0;left:0;content:"";width:100%;height:100%;z-index:1;background-color:var(--fox-button-background-color, var(--fox-button-primary-color));opacity:var(--fox-button-background-opacity, 1);border-radius:var(--fox-button-border-radius);filter:brightness(var(--fox-button-background-alpha, 1));transition:all .1s ease-in-out}.fox-button::before{position:absolute;top:0;left:0;bottom:0;right:0;content:"";z-index:2;border:var(--fox-button-outlined-thickness, 2px) solid var(--fox-button-outlined-color);border-radius:var(--fox-button-border-radius);pointer-events:none;transition:all .1s ease-in-out}:host([small]) .fox-button{--fox-button-height: 32px}:host([fullwidth]){width:100%}:host([fullwidth]) .fox-button{flex:1;justify-content:center}:host([disabled]){pointer-events:none}:host([disabled]) .fox-button{opacity:.4}::slotted(*){z-index:3}button{background:unset;border:none;display:block;font-family:inherit;font-size:unset;margin:0;padding:0;outlined:none}`));
 
@@ -1599,3 +1599,3 @@ let _ = t => t,
 
-    this.outline = false;
+    this.outlined = false;
     /**
@@ -1626,3 +1626,3 @@ * Indicates if button should have icon on right side.
     const classes = {
-      'fox-button__outline': this.outline,
+      'fox-button__outlined': this.outlined,
       'fox-button__text': this.text
@@ -1692,3 +1692,3 @@ };
   reflect: true
-}), __metadata("design:type", Object)], FoxButton.prototype, "outline", void 0);
+}), __metadata("design:type", Object)], FoxButton.prototype, "outlined", void 0);
 
@@ -1695,0 +1695,0 @@ __decorate([property({

lib/FoxButton.d.ts

@@ -35,3 +35,3 @@ import { LitElement } from 'lit';
      */
-    outline: boolean;
+    outlined: boolean;
     /**
@@ -38,0 +38,0 @@ * Indicates if button should have icon on right side.

package.json

 {
   "name": "@assecosolutions/fox-button",
-  "version": "1.5.31",
+  "version": "1.5.32",
   "public": true,
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65843

increased by0.02%

No dependency changes