@aquera/nile-elements 1.1.1 → 1.1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-button/nile-button.css.ts

@@ -74,14 +74,38 @@ export const styles = css`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(
-      --nile-textarea-standard-disabled-box-shadow,
-      var(--ng-shadow-xs-skeuomorphic)
-    ); //TODO: fix
-  }
+  position: relative;
+  overflow: hidden; 
+  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  border-color: var(--nile-colors-primary-600);
+  border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
+  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));
+}
+
+.button--standard.button--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
+
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
@@ -121,8 +145,11 @@ export const styles = css`
   /*  Secondary */
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));
+    border-width:var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
@@ -255,11 +282,38 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive {
+    position: relative;
+    overflow: hidden; 
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
+    border-color: var(--nile-colors-red-500);
+    border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
-  }
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
+  }
+
+
+  .button--standard.button--destructive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--destructive::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));

package/src/nile-table-body/nile-table-body.ts

@@ -25,6 +25,7 @@ import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
 import { hasResizableColumns } from '../internal/resizable-table-helper';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * nile-table-body component.
@@ -124,7 +125,7 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          style="display: ${this.bodyStyle}"
+          style=${ifDefined(this.bodyStyle ? `display: ${this.bodyStyle}` : undefined)}
           ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>