@aquera/nile-elements 0.1.57-beta-1.6 → 0.1.57-beta-1.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.57-beta-1.6",
+  "version": "0.1.57-beta-1.7",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -86,8 +86,7 @@
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
     "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js",
-    "./nile-pagination": "./dist/src/nile-pagination/index.js",
-    "./nile-slider": "./dist/src/nile-slider/index.js"
+    "./nile-pagination": "./dist/src/nile-pagination/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -191,4 +190,5 @@
       "prettier --write"
     ]
   }
-}
+}
+

package/src/index.ts

@@ -77,5 +77,4 @@ export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
 export { NileFilterChip } from './nile-filter-chip';
-export {NilePagination } from './nile-pagination';
-export { NileSlider } from './nile-slider';
+export {NilePagination } from './nile-pagination';

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

@@ -17,7 +17,7 @@ export const styles = css`
   .base {
     background-color: white;
     border-radius: 8px;
-    width: 300px;
+  width: 288px;
     box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
     box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);
   }
@@ -66,7 +66,7 @@ export const styles = css`
   .day_date ,.day_name{
 		font-family: var( --nile-font-family-serif);
 		font-style: normal;
-		font-size: 14px;
+		font-size: 12px;
 		line-height: 20px;
 		text-align: center;
 
@@ -79,6 +79,7 @@ export const styles = css`
 
   .day_name{
     font-weight:500;
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .day_date{
@@ -87,7 +88,7 @@ export const styles = css`
   }
 
 	.current__date__dot{
-		background-color:white;
+		background-color:var(--nile-colors-primary-600);
 		position:absolute;
 		border-radius:50%;
 		height:5px;
@@ -113,7 +114,7 @@ export const styles = css`
   .selected-date {
     color: white;
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
   }
 
   .selected-date:hover {
@@ -124,27 +125,33 @@ export const styles = css`
   .range-start,
   .range-end {
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
-    color: white;
+    background: var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .selected-date:hover,
   .range-start:hover,
   .range-end:hover,
   .day_date.in-range:hover {
-    background: var(--nile-colors-primary-700);
+    background: var(--nile-colors-blue-500);
   }
 
   .range-start.in-range {
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
     border-radius: 4px 0 0 4px;
-    color: white;
+    color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .range-end {
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
     border-radius: 0 4px 4px 0;
-    color: white;
+    color: var(--nile-colors-dark-900);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .range-middle {
@@ -160,13 +167,13 @@ export const styles = css`
   }
 
   .day_date.in-range:not(.range-start,.range-end, .selected-date) {
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-100);
   }
 
   .selected-date {
-    color: white;
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .not-allowed{
@@ -219,24 +226,32 @@ export const styles = css`
 
   .calendar-switcher {
     width: 100%;
-    margin: 0 12px;
-    margin-top: 16px;
+    margin-top: 12px;
   }
 
+  nile-tab::part(base){
+
+padding-bottom: 12px;
+justify-content: center;
+}
+
   .units-wrapper{
     width:min-content;
     margin:auto;
   }
 
   .unit-container{
-    display:grid;
-    grid-template-columns: auto auto;
-    row-gap:var(--nile-spacing-spacing-2xl);
-    column-gap: var(--nile-spacing-spacing-sm);
-    padding: 16px;
-    padding-bottom: 0;
+ display: flex;
+  flex-direction: column;
+  gap: 24px;
   }
-  
+ 
+ 
+
+
+
+
+
   .duration-name{
     display:flex;
     align-items:center;
@@ -254,6 +269,7 @@ export const styles = css`
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
+    gap: 6px;
   }
 
   .duration__value{
@@ -263,19 +279,25 @@ export const styles = css`
     height: 34px;
     cursor: pointer;
     border-radius: 4px;
+    border: 1px solid var(--nile-colors-neutral-500);
   }
 
   .duration__value:hover{
-    background: var(--nile-colors-neutral-100);
+    background: var(--nile-colors-neutral-400);
   }
 
   .duration__value--selected{
-    background-color:var(--nile-colors-primary-600);
-    color: white;
+    background-color:var(--nile-colors-blue-400);
+    color: black;
+    font-weight: 500;
+    border: 1px solid transparent;
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .duration__value--selected:hover{
-    background:var(--nile-colors-primary-700);
+    background:var(--nile-colors-blue-500);
+    font-weight: 500;
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   nile-input::part(input)::-webkit-inner-spin-button,
@@ -298,6 +320,123 @@ export const styles = css`
   .duration-input,.time-input,.manual-input {
     width: 125px;
   }
+
+
+nile-dropdown[open] > span[slot="trigger"] .calendar-header__caret {
+  transform: rotate(180deg);
+}
+
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0.2px;
+  font-feature-settings: 'liga' off, 'clig' off;
+}
+
+.calendar-header__center {
+  display: flex;
+  align-items: center;
+  gap: 6px; 
+}
+
+.calendar-header__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  background: transparent;
+  color: var(--nile-colors-dark-900);
+}
+
+.calendar-header__caret {
+  width: 1em;
+  height: 1em;
+  transition: transform 0.2s ease;
+  transform-origin: center;
+}
+
+ .calendar-menu {
+  max-height: 194px;
+  overflow-y: auto;
+  width: 66px;
+  background: red;
+ }
+
+ 
+
+ .month-scroll-wrapper {
+    max-height: 196px;
+    overflow-y: auto;
+    width: 62px;
+    overflow-x: hidden;
+  }
+
+  .month-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+
+  .year-scroll-wrapper {
+    max-height: 196px;
+    overflow-y: auto;
+    width: 65px;
+    overflow-x: hidden;
+  }
+
+  .year-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .month-dropdown nile-menu-item::part(base) {
+    padding: 0px 12px;
+   }
+   .year-dropdown nile-menu-item::part(base) {
+    padding: 0px 12px;
+   }
+nile-menu-item[selected]{
+  background: var(--nile-colors-primary-100);
+}
+
+nile-menu-item[selected]::part(base):hover {
+  background: var(--nile-colors-primary-100);
+  border-radius: 0px;
+}
+
+
+nile-icon[disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.units-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 16px;
+  width: auto;
+}
+
+ 
+  
+.duration-name {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+ 
+
+   
 `;
 
 export default [styles];