ids-enterprise-wc 1.0.0-beta.16 → 1.0.0-beta.18

package/components/ids-date-picker/ids-date-picker.css

@@ -1,115 +1,84 @@
-ids-popup::part(popup) {
-  padding-block: 0;
-}
-
-ids-popup[visible][animated] {
-  transition: none;
-}
-
-.ids-date-picker-popup .ids-popup.menu {
-  padding-block: 0;
-}
-
-ids-month-view {
-  width: 100%;
-}
-
-#month-year-view-trigger {
-  margin: 4px;
+:root {
+  display: block;
+  height: 100%;
 }
 
-.ids-date-picker-popup {
-  min-width: 350px;
-}
-.ids-date-picker-popup:not(.has-time) ids-month-view::part(table-container) {
-  margin-bottom: 10px;
-}
-.ids-date-picker-popup ids-popup::part(popup) {
-  padding-block: 0;
-}
-.ids-date-picker-popup .popup-footer {
-  border-top: 1px solid var(--ids-date-picker-popup-footer-color-border);
+.picklist {
   display: flex;
-}
-.ids-date-picker-popup .popup-footer ids-modal-button:not([hidden]) + ids-modal-button,
-.ids-date-picker-popup .popup-footer .ids-modal-button:not([hidden]) + .ids-modal-button {
-  border-left: 1px solid;
-  border-left-color: var(--ids-date-picker-popup-footer-color-border);
-}
-.ids-date-picker-popup .popup-btn {
-  width: 100%;
-}
-
-.ids-date-picker-content {
+  height: 100%;
   position: relative;
 }
 
-ids-expandable-area {
-  display: block;
-}
-
-ids-expandable-area:not([expanded]),
-ids-expandable-area[expanded=false] {
-  pointer-events: none;
+:not(.is-expanded) .picklist-section::before {
+  background-color: transparent;
 }
 
-ids-expandable-area::part(container) {
-  margin: 0;
-  padding: 0;
+.picklist-section {
   height: 100%;
-  position: absolute;
-  z-index: 3;
-  border: none;
-  left: 0;
-  width: 100%;
+  width: 50%;
+  flex: 0 0 50%;
 }
-
-ids-expandable-area::part(header) {
-  display: none;
-}
-
-ids-expandable-area::part(pane) {
-  background-color: var(--ids-date-picker-color-background);
+.picklist-section:only-child {
+  width: 100%;
+  flex: 0 0 100%;
 }
-
-ids-expandable-area::part(footer) {
-  display: none;
+.picklist-section + .picklist-section::before {
+  background-color: var(--ids-color-neutral-30);
+  position: absolute;
+  content: " ";
+  width: 1px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  height: calc(75% + 14px);
+  top: calc(12.5% - 4px);
 }
 
-ids-expandable-area::part(pane-content) {
+.picklist-list {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 0;
   margin-top: 0;
+  margin-bottom: 0;
   height: 100%;
 }
 
-ids-time-picker {
+.picklist-item {
   display: flex;
+  cursor: pointer;
+  border: 1px solid transparent;
+  color: var(--ids-date-picker-picklist-item-color-text-default);
+  padding-block: 1px;
+  box-sizing: border-box;
+  user-select: none;
+  height: 12.5%;
+  align-items: center;
   justify-content: center;
+  contain: content;
+  width: 100%;
 }
-
-.btn-today {
-  margin-right: -7px;
+.picklist-item ids-text {
+  line-height: 0;
 }
-.btn-today::part(button) {
-  padding: 10px 8px;
-  margin: 3px;
+.picklist-item.is-selected {
+  color: var(--ids-date-picker-picklist-item-color-text-selected);
+  background-color: var(--ids-date-picker-picklist-item-color-background-selected);
 }
-
-.btn-today-text {
-  color: var(--ids-date-picker-popup-button-today-color-text);
+.picklist-item.is-selected ids-text::part(text) {
+  font-weight: 600;
 }
-
-.btn-previous,
-.btn-next {
-  padding-inline-start: 0;
-  margin: 3px;
+.picklist-item:focus {
+  border-color: var(--ids-date-picker-item-color-border-focus);
+  box-shadow: var(--ids-date-picker-item-shadow-focus);
+  outline: none;
 }
-.btn-previous::part(button),
-.btn-next::part(button) {
-  padding: 0;
-  width: 44px;
-  height: 44px;
+.picklist-item.is-year-nav, .picklist-item.is-month-nav {
+  z-index: 1;
 }
-
-.btn-next {
-  margin: 3px 3px 3px -5px;
+.picklist-item.is-month-nav {
+  width: calc(100% + 1px);
 }