@aquera/nile-elements 0.0.3-9 → 0.0.4-1

package/package.json

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

package/src/index.ts

@@ -28,3 +28,4 @@ export { NileDatePicker } from './nile-date-picker';
 export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
+export { NileCalendar } from './nile-calendar';

package/src/nile-calendar/index.ts

@@ -0,0 +1 @@
+export { NileCalendar } from './nile-calendar';

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

@@ -0,0 +1,188 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * DatePicker CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .calendar-container {
+    font-family: Colfax-regular;
+    width: 365px;
+    height: auto;
+    text-align: center;
+    background: white;
+  }
+
+  .calendar-container.with-margin {
+    margin-right: 20px;
+  }
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    padding: 22px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .calendar-header__month-navigation {
+    cursor: pointer;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background: #c7ced4;
+  }
+
+  .day-names {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    height: 50px;
+    margin-top: 10px;
+  }
+
+  .day-names,
+  .days {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: auto;
+    align-items: center;
+  }
+
+  .days {
+    height: auto;
+  }
+
+  .day {
+    flex-basis: calc(100% / 7);
+    box-sizing: border-box;
+    width: 48px;
+    align-items: center;
+    padding: 10px;
+    height: 32px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .filler {
+    color: grey;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+  .calendar-wrapper {
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    width: auto;
+  }
+
+  .selected-date,
+  .range-start,
+  .range-end {
+    border-radius: 4px;
+    background: #a5d3f3;
+    color: white;
+  }
+
+  .range-start {
+    background: #a5d3f3;
+    border-radius: 4px 0 0 4px;
+    color: white;
+  }
+
+  .range-end {
+    background: #a5d3f3;
+    border-radius: 0 4px 4px 0;
+    color: white;
+  }
+
+  .range-middle {
+    background: #a5d3f3;
+    color: white;
+    border-radius: 0;
+  }
+
+  .day.selected {
+    background: #a5d3f3;
+    color: white;
+    border-radius: 4px;
+  }
+
+  .day.in-range {
+    background: #a5d3f3;
+    color: white;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+  .base {
+    background-color: white;
+    border-radius: 4px;
+    padding-bottom: 20px;
+    width: 365px;
+  }
+
+  .base__range {
+    width: 730px;
+  }
+
+  .calender-input {
+    padding: 20px;
+    padding-bottom: 0px;
+    background: white;
+  }
+
+  .from {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .manual-input {
+    width: 100%;
+  }
+
+  .manual-input-label {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .button-contaner {
+    width: 100%;
+    text-align: right;
+    padding: 10px 0;
+  }
+`;
+
+export default [styles];