@aquera/nile-elements 2.0.18 → 2.0.20

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

@@ -649,6 +649,361 @@ export const styles = css`
 :host([disabled]) .duration__value {
   cursor: not-allowed;
 }
+
+.base--date-time-picker {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--nile-width-288px, var(--ng-width-312));
+  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+  font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
+  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+  line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+  overflow: hidden;
+  padding-bottom: var(--nile-height-3px, var(--ng-height-3px));
+  border: none;
+  box-shadow:
+    inset 0 0 0 var(--nile-border-size-1, var(--ng-border-width-1))
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt)),
+    var(
+      --nile-box-shadow-15,
+      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)
+    );
+}
+
+:host([hidetypes]) .base--date-time-picker .calendar-header {
+  border-top: var(--nile-border-size-1, var(--ng-border-width-1)) solid
+    var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));
+}
+
+.base--date-time-picker .calendar-wrapper,
+.base--date-time-picker .calendar-container {
+  background: transparent;
+}
+
+.base--date-time-picker .calendar-config,
+.base--date-time-picker .calendar-wrapper,
+.base--date-time-picker .tp-chevron,
+.base--date-time-picker .tp-footer {
+  flex-shrink: 0;
+}
+
+.base--date-time-picker .calendar-header {
+  font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
+  padding: var(--nile-spacing-xl, var(--ng-spacing-xl))
+    var(--nile-spacing-xl, var(--ng-spacing-xl))
+    var(--nile-spacing-lg, var(--ng-spacing-lg))
+    var(--nile-spacing-xl, var(--ng-spacing-xl));
+}
+
+.base--date-time-picker.base--tp-height-locked {
+  height: var(--nile-calendar-tp-locked-height);
+}
+
+/* positioning parent of the today dot (.current__date__dot is absolutely positioned) */
+.base--date-time-picker .day-label {
+  position: relative;
+}
+
+/* centred under the number (the base rule's left: 25% sits left of centre for two digits) */
+.base--date-time-picker .day-label .current__date__dot {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.base--date-time-picker.base--tp-expanded .days_container {
+  grid-row-gap: var(--nile-height-1px, var(--ng-spacing-none));
+  padding-bottom: var(--nile-height-1px, var(--ng-spacing-none));
+}
+
+.base--date-time-picker .days_container {
+  padding-bottom: var(--nile-height-1px, var(--ng-spacing-none));
+  padding-inline: var(--nile-width-18px, var(--ng-spacing-lg));
+  grid-row-gap: var(--nile-spacing-none, var(--ng-spacing-none));
+}
+
+.base--date-time-picker .day_name {
+  font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+  line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+  height: var(--nile-spacing-4xl, var(--ng-width-10));
+}
+
+.base--date-time-picker nile-menu-item[selected] {
+  background: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+}
+
+.base--date-time-picker nile-menu-item[selected]::part(base):hover {
+  background: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+  border-radius: 0px;
+}
+
+.base--date-time-picker .day_date:hover {
+  border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+}
+
+.base--date-time-picker nile-tab::part(base) {
+  font-size: var(--nile-font-size-base, var(--ng-font-size-text-md));
+  height: var(--nile-height-30px, var(--ng-height-36px));
+}
+
+.base--date-time-picker .calendar-config {
+  padding: var(--nile-spacing-xl, var(--ng-spacing-xl))
+    var(--nile-spacing-none, var(--ng-spacing-none))
+    var(--nile-spacing-none, var(--ng-spacing-none))
+    var(--nile-spacing-none, var(--ng-spacing-none));
+  gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  border-bottom: var(--nile-spacing-none, var(--ng-border-width-1)) solid
+    var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));
+}
+
+.base--date-time-picker .calendar-switcher {
+  margin-top: var(--nile-spacing-none, var(--ng-spacing-none));
+}
+
+.base--date-time-picker .units-wrapper {
+  margin: var(--nile-spacing-none, var(--ng-spacing-none));
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.base--date-time-picker .duration-name {
+  font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
+  line-height: var(--nile-line-height-small, var(--ng-line-height-text-xs));
+}
+
+.base--date-time-picker .duration-units {
+  font-size: var(--nile-font-size-base, var(--ng-font-size-text-sm));
+}
+
+.base--date-time-picker .duration__value {
+  box-sizing: border-box;
+  width: var(--nile-width-34px, var(--ng-width-10));
+  height: var(--nile-height-34px, var(--ng-width-10));
+  flex-shrink: 0;
+}
+
+.base--date-time-picker .tp-chevron {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--nile-spacing-xs, var(--ng-spacing-xs))
+    var(--nile-spacing-none, var(--ng-spacing-none));
+  cursor: pointer;
+}
+
+.base--date-time-picker .tp-chevron nile-icon {
+  transition: transform
+    var(--nile-transition-base, var(--ng-transition-duration-default));
+}
+
+.base--date-time-picker .tp-chevron--expanded nile-icon {
+  transform: rotate(180deg);
+}
+
+.base--date-time-picker .tp-scroll-area {
+  padding: var(--nile-spacing-none, var(--ng-spacing-none))
+    var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.base--date-time-picker.base--tp-fewfields .tp-scroll-content {
+  margin-block: auto;
+}
+
+.base--date-time-picker .tp-scroll-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
+}
+
+.base--date-time-picker .tp-inner-calendar {
+  width: 100%;
+  display: block;
+}
+
+.base--date-time-picker .tp-inner-calendar::part(calendar-container) {
+  border: none;
+  box-shadow: none;
+  width: 100%;
+}
+
+.base--date-time-picker .tp-footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  padding: var(--nile-spacing-md, var(--ng-spacing-md))
+    var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
+    var(--nile-spacing-2xl, var(--ng-spacing-2xl))
+    var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
+  box-sizing: border-box;
+}
+
+.base--date-time-picker .tp-footer-actions {
+  display: flex;
+  flex: 1;
+  gap: var(--nile-spacing-md, var(--ng-spacing-md));
+}
+
+.base--date-time-picker .tp-footer-actions nile-button {
+  flex: 1 1 0;
+}
+
+.base--date-time-picker .tp-footer:not(.tp-footer--relative) .tp-footer-actions {
+  display: contents;
+}
+
+.base--date-time-picker .tp-footer:not(.tp-footer--relative) .tp-footer-actions nile-button {
+  flex: 0 0 auto;
+}
+
+.base--date-time-picker .tp-footer nile-lite-tooltip {
+  display: contents;
+}
+
+.base--date-time-picker .tp-footer--relative {
+  justify-content: flex-end;
+  margin-top: var(--nile-spacing-md, var(--ng-spacing-md));
+  padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
+}
+
+.base--date-time-picker .tp-footer--relative .tp-footer-actions {
+  flex: 0 0 auto;
+  gap: var(--nile-spacing-xl, var(--ng-spacing-lg));
+}
+
+.base--date-time-picker .tp-footer--relative .tp-footer-actions nile-button {
+  flex: none;
+}
+
+.base--date-time-picker .tp-footer-actions nile-button::part(base) {
+  width: 100%;
+}
+
+.base--date-time-picker .tp-footer nile-button::part(base) {
+  padding-left: var(--nile-spacing-md, var(--ng-spacing-lg-alt));
+  padding-right: var(--nile-spacing-md, var(--ng-spacing-lg-alt));
+  height: var(--nile-height-38px, var(--ng-height-40px));
+}
+
+.base--date-time-picker .tp-set-to-now-button nile-glyph {
+  margin-left: var(--nile-spacing-xs, var(--ng-spacing-xs));
+}
+
+.base--date-time-picker .tp-set-to-now-button::part(base) {
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  border: var(--nile-border-size-1, var(--ng-border-width-1)) solid
+    var(--nile-colors-neutral-500, transparent);
+}
+
+.base--date-time-picker .tp-time-fields.tp-time-fields--stacked {
+  grid-template-columns: 1fr;
+}
+
+.base--date-time-picker .tp-time-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  row-gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  padding-top: var(--nile-spacing-none, var(--ng-spacing-none));
+}
+
+.base--date-time-picker .tp-time-fields nile-input {
+  min-width: 0;
+  width: 100%;
+}
+
+.base--date-time-picker .tp-time-fields nile-input::part(base) {
+  height: var(--nile-height-38px, var(--ng-height-40px));
+}
+
+.base--date-time-picker .tp-stepper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.base--date-time-picker .tp-stepper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  cursor: pointer;
+}
+
+.base--date-time-picker .tp-time-fields nile-input.tp-time-field::part(form-control-label) {
+  user-select: none;
+  -webkit-user-select: none;
+  margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+  line-height: var(--nile-type-scale-2, var(--ng-line-height-text-xs));
+}
+
+.base--date-time-picker .tp-stepper-btn--up nile-icon {
+  transform: rotate(180deg);
+}
+
+:host([disabled]) .base--date-time-picker .tp-stepper-btn {
+  pointer-events: none;
+}
+
+.base--date-time-picker .tp-timezone {
+  padding-top: var(--nile-spacing-none, var(--ng-spacing-none));
+}
+
+.base--date-time-picker .tp-timezone-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+}
+
+.base--date-time-picker .tp-timezone-label {
+  font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+  line-height: var(--nile-type-scale-2, var(--ng-line-height-text-xs));
+  font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+}
+
+.base--date-time-picker .tp-timezone-local-link {
+  font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+  line-height: var(--nile-type-scale-2, var(--ng-line-height-text-xs));
+  color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+  cursor: pointer;
+}
+
+.base--date-time-picker .tp-timezone-select {
+  width: 100%;
+}
+
+.base--date-time-picker .tp-timezone-select::part(combobox) {
+  height: var(--nile-height-38px, var(--ng-height-40px));
+}
+
+.base--date-time-picker .tp-timezone-select::part(listbox) {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+:host([disabled]) .base--date-time-picker .tp-timezone-local-link {
+  pointer-events: none;
+  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+}
+
+:host([disabled]) .base--date-time-picker .tp-chevron {
+  pointer-events: none;
+}
 `;
 
 export default [styles];