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

package/components/ids-calendar/ids-calendar.css

@@ -1,314 +1,240 @@
-.ids-calendar {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
+.ids-calendar-event:not([color]) {
+  background-color: var(--ids-calendar-event-color-background);
 }
-
-.calendar-legend-pane,
-.calendar-details-pane {
-  display: none;
-  width: 220px;
-  height: auto;
+.ids-calendar-event:not([color]):not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-default);
 }
-
-.ids-calendar.show-legend .calendar-legend-pane,
-.ids-calendar.show-details .calendar-details-pane {
-  display: block;
+.ids-calendar-event:not([color]):not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.calendar-contents {
-  flex-grow: 1;
+.ids-calendar-event:not([color]):focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.calendar-toolbar-pane {
-  display: block;
-  border-width: 1px 1px 0;
-  border-style: solid;
-  background-color: var(--ids-calendar-toolbar-color-background);
-  border-color: var(--ids-calendar-toolbar-color-border);
-  left: 0;
-  top: 0;
-  z-index: 4;
-  flex-shrink: 0;
+.ids-calendar-event[color=azure] {
+  background-color: var(--ids-calendar-event-color-background-accent-azure);
 }
-
-ids-toolbar-section::part(container),
-.ids-toolbar-section {
-  align-items: center;
+.ids-calendar-event[color=azure]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-azuret-azure);
 }
-
-.calendar-details-pane ids-accordion-header[color=azure]::part(header) {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event[color=azure]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.calendar-details-pane ids-accordion-header[color=amber]::part(header) {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event[color=azure]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
-.calendar-details-pane ids-accordion-header[color=amethyst]::part(header) {
-  background-color: var(--ids-color-amethyst-60);
+
+.ids-calendar-event[color=amber] {
+  background-color: var(--ids-calendar-event-color-background-accent-amber);
 }
-.calendar-details-pane ids-accordion-header[color=emerald]::part(header) {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event[color=amber]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-amber);
 }
-.calendar-details-pane ids-accordion-header[color=ruby]::part(header) {
-  background-color: var(--ids-color-ruby-60);
+.ids-calendar-event[color=amber]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.calendar-details-pane ids-accordion-header[color=turquoise]::part(header) {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event[color=amber]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
-.calendar-details-pane ids-accordion-header[color=slate]::part(header) {
-  background-color: var(--ids-color-neutral-60);
+
+.ids-calendar-event[color=amethyst] {
+  background-color: var(--ids-calendar-event-color-background-accent-amethyst);
 }
-.calendar-details-pane ids-accordion-header::part(header) {
-  color: var(--ids-color-neutral-00);
+.ids-calendar-event[color=amethyst]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-amethyst);
 }
-.calendar-details-pane ids-accordion-header ids-text::part(text) {
-  overflow: hidden;
-  width: 150px;
-  white-space: nowrap;
-}
-.calendar-details-pane .panel-content {
-  padding-top: 15px;
-  padding-bottom: 15px;
+.ids-calendar-event[color=amethyst]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.calendar-details-pane .panel-content hr {
-  border-bottom: none;
-  margin: 20px 0;
+.ids-calendar-event[color=amethyst]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-ids-accordion-panel::part(content) {
-  padding: 4px 0;
+.ids-calendar-event[color=emerald] {
+  background-color: var(--ids-calendar-event-color-background-accent-emerald);
 }
-
-.btn-previous,
-.btn-next {
-  height: 36px;
+.ids-calendar-event[color=emerald]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-emerald);
 }
-
-.btn-today-text {
-  color: var(--ids-color-azure-60);
+.ids-calendar-event[color=emerald]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.calendar-events-list {
-  margin-top: 20px;
-  padding: 0;
-}
-.calendar-events-list .detail-item[color=azure] {
-  border-inline-start-color: var(--ids-color-azure-60);
-}
-.calendar-events-list .detail-item[color=amber] {
-  border-inline-start-color: var(--ids-color-amber-60);
-}
-.calendar-events-list .detail-item[color=amethyst] {
-  border-inline-start-color: var(--ids-color-amethyst-60);
-}
-.calendar-events-list .detail-item[color=emerald] {
-  border-inline-start-color: var(--ids-color-emerald-60);
-}
-.calendar-events-list .detail-item[color=ruby] {
-  border-inline-start-color: var(--ids-color-ruby-60);
-}
-.calendar-events-list .detail-item[color=turquoise] {
-  border-inline-start-color: var(--ids-color-turquoise-60);
-}
-.calendar-events-list .detail-item[color=slate] {
-  border-inline-start-color: var(--ids-color-neutral-60);
-}
-.calendar-events-list .detail-item {
-  background-color: var(--ids-calendar-toolbar-color-background);
-  border-style: solid;
-  border-color: var(--ids-calendar-toolbar-color-border);
-  border-width: 1px;
-  border-inline-start-width: 4px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  align-items: center;
-  padding: 15px;
-}
-.calendar-events-list .detail-item:focus {
-  border-color: var(--ids-color-primary);
+.ids-calendar-event[color=emerald]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
   outline: none;
 }
-.calendar-events-list .calendar-detail-content {
-  flex-grow: 1;
-}
-.calendar-events-list .detail-item-duration {
-  padding: 0 8px;
-}
-
-.event-type-label,
-.event-types-legend {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
 
-.event-types-legend {
-  display: none;
-  padding: 10px;
+.ids-calendar-event[color=ruby] {
+  background-color: var(--ids-calendar-event-color-background-accent-ruby);
 }
-.event-types-legend .event-type-color[color=azure] {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event[color=ruby]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-ruby);
 }
-.event-types-legend .event-type-color[color=amber] {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event[color=ruby]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-.event-types-legend .event-type-color[color=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
-}
-.event-types-legend .event-type-color[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event[color=ruby]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
-.event-types-legend .event-type-color[color=ruby] {
-  background-color: var(--ids-color-ruby-60);
+
+.ids-calendar-event[color=turquoise] {
+  background-color: var(--ids-calendar-event-color-background-accent-turqoise);
 }
-.event-types-legend .event-type-color[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event[color=turquoise]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-turqoise);
 }
-.event-types-legend .event-type-color[color=slate] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event[color=turquoise]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-
-.event-type-label {
-  margin: 0 8px;
+.ids-calendar-event[color=turquoise]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-.event-type-color {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 10px;
-  margin: 0 3px;
+.ids-calendar-event[color=slate] {
+  background-color: var(--ids-calendar-event-color-background-accent-slate);
 }
-
-.inline-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.ids-calendar-event[color=slate]:not(.calendar-event-continue):not(.calendar-event-ends) {
+  border-inline-start-width: 5px;
+  border-inline-start-color: var(--ids-calendar-event-color-border-accent-slate);
 }
-
-#event-form-popup {
-  width: 320px;
+.ids-calendar-event[color=slate]:not(.calendar-event-continue):not(.calendar-event-ends):focus {
+  border-inline-start-color: var(--ids-calendar-event-color-border-focus);
 }
-#event-form-popup::part(popup) {
-  padding-top: 0;
-  padding-bottom: 0;
+.ids-calendar-event[color=slate]:focus {
+  box-shadow: var(--ids-shadow-20);
+  border-color: var(--ids-calendar-event-color-border-focus);
+  outline: none;
 }
 
-#event-form-header {
-  align-items: center;
-  color: var(--ids-color-neutral-10);
-  height: 40px;
-  padding-inline-start: 16px;
-  padding-inline-end: 8px;
-}
-#event-form-header ids-icon[data-action=close] {
-  color: var(--ids-color-neutral-10);
-  padding: 5px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-#event-form-header ids-icon[data-action=close]:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+.ids-calendar-event {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 1;
+  background: var(--ids-calendar-event-color-background);
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--ids-calendar-event-color-text);
+  height: 20px;
+  overflow: hidden;
+  text-decoration: none;
 }
-
-#event-form {
-  display: flex;
-  flex-direction: column;
+.ids-calendar-event .calendar-event-content {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  padding: 2px 5px;
+}
+.ids-calendar-event .calendar-event-content ids-text {
+  display: block;
   width: 100%;
   height: 100%;
 }
-#event-form #event-form-header[color=azure] {
-  background-color: var(--ids-color-azure-60);
+.ids-calendar-event .calendar-event-icon {
+  vertical-align: bottom;
 }
-#event-form #event-form-header[color=amber] {
-  background-color: var(--ids-color-amber-60);
+.ids-calendar-event .calendar-event-icon[icon=success-alert] {
+  color: var(--ids-calendar-event-color-icon-success);
 }
-#event-form #event-form-header[color=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
+.ids-calendar-event .calendar-event-icon[icon=alert-alert] {
+  color: var(--ids-calendar-event-color-icon-alert);
 }
-#event-form #event-form-header[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+.ids-calendar-event .calendar-event-icon[icon=clock] {
+  color: var(--ids-calendar-event-color-icon-clock);
 }
-#event-form #event-form-header[color=ruby] {
-  background-color: var(--ids-color-ruby-60);
+.ids-calendar-event .calendar-event-icon[icon=pending] {
+  color: var(--ids-calendar-event-color-icon-pending);
 }
-#event-form #event-form-header[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+.ids-calendar-event .calendar-event-title {
+  line-height: 12px;
 }
-#event-form #event-form-header[color=slate] {
-  background-color: var(--ids-color-neutral-60);
+.ids-calendar-event .calendar-event-title::part(text) {
+  text-transform: initial;
 }
-#event-form ids-list-box {
-  max-width: 278px;
+.ids-calendar-event.is-cutoff {
+  border-radius: 3px 3px 0 0;
 }
-#event-form ids-list-box-option {
-  text-align: left;
+.ids-calendar-event.is-ellipsis .calendar-event-content {
+  white-space: nowrap;
 }
-#event-form ids-date-picker,
-#event-form ids-time-picker {
-  max-width: 128px;
+.ids-calendar-event.reduced-padding .calendar-event-content {
+  padding: 0 5px;
 }
-
-#event-form-content {
-  flex-grow: 1;
-  box-sizing: border-box;
-  padding: 12px 20px;
+.ids-calendar-event.reduced-padding .calendar-event-title {
   position: relative;
+  top: -1.6px;
 }
 
-#event-form-actions ids-button {
-  flex-grow: 1;
-  border: 1px solid var(--ids-color-neutral-40);
-  border-bottom-width: 0;
+.ids-calendar-event.all-day {
+  top: 1px;
 }
-#event-form-actions ids-button::part(button) {
+.ids-calendar-event.all-day.calendar-event-start, .ids-calendar-event.all-day.calendar-event-continue, .ids-calendar-event.all-day.calendar-event-ends {
   border-radius: 0;
-  padding-top: 13px;
-  padding-bottom: 13px;
 }
-#event-form-actions ids-button[data-action=close] {
-  border-inline-start-width: 0;
+.ids-calendar-event.all-day.calendar-event-start {
+  border-start-start-radius: 3px;
+  border-end-start-radius: 3px;
 }
-#event-form-actions ids-button[data-action=submit] {
-  border-inline-end-width: 0;
+.ids-calendar-event.all-day.calendar-event-continue {
+  width: calc(100% + 2px);
   margin-inline-start: -1px;
 }
-#event-form-actions ids-button[data-action=submit]::part(button) {
-  color: var(--ids-color-azure-70);
+.ids-calendar-event.all-day.calendar-event-ends {
+  border-end-end-radius: 3px;
+  border-start-end-radius: 3px;
+}
+.ids-calendar-event.all-day.calendar-event-continue ids-icon, .ids-calendar-event.all-day.calendar-event-ends ids-icon {
+  visibility: hidden;
 }
-#event-form-actions ids-button[data-action=submit]::part(button):hover {
-  color: var(--ids-color-azure-80);
+.ids-calendar-event.all-day.calendar-event-continue .calendar-event-title, .ids-calendar-event.all-day.calendar-event-ends .calendar-event-title {
+  color: transparent;
 }
 
-@media (max-width: 840px) {
-  .ids-calendar {
-    display: block;
-  }
-  .ids-calendar.show-legend .calendar-legend-pane {
-    display: none;
-  }
-  .calendar-view-pane,
-  .calendar-details-pane {
-    width: 100%;
-  }
-  #event-form-popup {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-  #event-form-popup::part(popup) {
-    height: 100%;
-    width: 100%;
-  }
-  #event-form-content ids-date-picker,
-  #event-form-content ids-time-picker {
-    max-width: unset;
-  }
-  #event-form-content .inline-container {
-    display: block;
-  }
+.ids-calendar-event.is-month-view {
+  position: absolute;
+  display: block;
+  height: 16px;
+}
+.ids-calendar-event.is-month-view:not(.all-day) {
+  width: calc(100% - 10px);
+  margin: 0 5px;
+}
+.ids-calendar-event.is-month-view.calendar-event-start, .ids-calendar-event.is-month-view.calendar-event-continue, .ids-calendar-event.is-month-view.calendar-event-ends {
+  width: calc(100% - 5px);
+}
+.ids-calendar-event.is-month-view.calendar-event-start {
+  margin-inline-start: 5px;
+}
+.ids-calendar-event.is-month-view.calendar-event-continue {
+  width: 100%;
+  margin-inline-start: 0;
+}
+.ids-calendar-event.is-month-view.calendar-event-ends {
+  margin-inline-end: 5px;
+}
+.ids-calendar-event.is-month-view.hidden {
+  display: none;
+}
+.ids-calendar-event.is-month-view .calendar-event-content {
+  padding: 0 5px;
 }