@event-calendar/core 4.7.1 → 5.0.0

package/src/styles/index.scss

@@ -1,553 +0,0 @@
-@use "theme";
-@use "timeline";
-@use "time-grid";
-@use "day-grid";
-
-/* Grid */
-.ec-days,
-.ec-day,
-.ec-resource {
-  flex: 1 1 0;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.ec {
-  display: flex;
-  flex-direction: column;
-  color: var(--ec-text-color);
-  background-color: var(--ec-bg-color);
-  -webkit-tap-highlight-color: transparent;
-
-  /* Scrollbar */
-  ::-webkit-scrollbar {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 4px solid transparent;
-    box-shadow: none;
-    background-color: var(--ec-border-color);
-    background-clip: padding-box;
-    border-radius: 8px;
-    min-height: 40px;
-  }
-
-  :hover::-webkit-scrollbar-thumb {
-    background-color: var(--ec-accent-color);
-  }
-}
-
-.ec-hidden-scroll {
-  display: none;
-  overflow-y: scroll;
-  visibility: hidden;
-  flex-shrink: 0;
-
-  .ec-with-scroll & {
-    display: block;
-  }
-}
-
-/* Toolbar */
-.ec-toolbar {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1em;
-
-  > * {
-    margin-bottom: -.5em;
-
-    > * {
-      margin-bottom: .5em;
-
-      &:not(:last-child) {
-        margin-right: .75em;
-      }
-    }
-  }
-}
-
-.ec-title {
-  margin: 0;
-}
-
-.ec-button {
-  background-color: var(--ec-button-bg-color);
-  border: 1px solid var(--ec-button-border-color);
-  padding: .375rem .75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: .25rem;
-
-  &:not(:disabled) {
-    color: var(--ec-button-text-color);
-    cursor: pointer;
-  }
-
-  &:not(:disabled):hover,
-  &.ec-active {
-    background-color: var(--ec-button-active-bg-color);
-    border-color: var(--ec-button-active-border-color);
-    color: var(--ec-button-active-text-color);
-    z-index: 1;  // make all borders visible
-  }
-}
-
-.ec-expander {
-  margin-right: .25em;
-  width: 1.25em;
-
-  .ec-button {
-    line-height: normal;
-    padding: 0;
-    aspect-ratio: 1;
-    height: 1.25em;
-  }
-}
-
-.ec-button-group {
-  display: inline-flex;
-
-  .ec-button:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-left: -1px;
-  }
-
-  .ec-button:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
-
-.ec-icon {
-  display: inline-block;
-  width: 1em;
-
-  &.ec-prev:after,
-  &.ec-next:after {
-    content: '';
-    position: relative;
-    width: .5em;
-    height: .5em;
-    border-top: 2px solid currentcolor;
-    border-right: 2px solid currentcolor;
-    display: inline-block;
-  }
-
-  &.ec-prev:after {
-    transform: rotate(-135deg) translate(-2px, 2px);
-  }
-
-  &.ec-next:after {
-    transform: rotate(45deg) translate(-2px, 2px);
-  }
-}
-
-/* Header */
-.ec-header,
-.ec-all-day,
-.ec-body,
-.ec-days,
-.ec-day,
-.ec-day-head {
-  border: 1px solid var(--ec-border-color);
-}
-
-.ec-header {
-  display: flex;
-  flex-shrink: 0;
-
-  .ec-resource {
-    flex-direction: column;
-
-    .ec-days {
-      border-top-style: solid;
-    }
-  }
-
-  .ec-days {
-    border-bottom: none;
-  }
-
-  .ec-day {
-    min-height: 24px;
-    line-height: 24px;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-/* All Day */
-.ec-all-day {
-  flex-shrink: 0;
-  border-top: none;
-
-  .ec-days {
-    border-bottom: none;
-  }
-
-  .ec-day {
-    padding-bottom: 4px;
-    position: relative;
-  }
-}
-
-/* Body */
-.ec-body {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .ec:not(.ec-list) & {
-    border-top: none;
-  }
-}
-
-.ec-sidebar {
-  flex: 0 0 auto;
-  width: auto;
-  max-width: 100%;
-  padding: 0 4px 0 8px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ec-content {
-  display: flex;
-
-  .ec-list & {
-    flex-direction: column;
-  }
-}
-
-.ec-resource {
-  display: flex;
-}
-
-.ec-days {
-  display: flex;
-  border-style: none none solid;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .ec-day-grid &,
-  .ec-resource & {
-    flex: 1 0 auto;
-  }
-}
-
-.ec-day {
-  border-style: none none none solid;
-
-  &.ec-today {
-    background-color: var(--ec-today-bg-color);
-  }
-
-  &.ec-highlight {
-    background-color: var(--ec-highlight-color);
-  }
-
-  &.ec-disabled {
-    position: relative;
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0 0 0 0;
-      background-color: var(--ec-bg-event-color);
-      opacity: .3;
-    }
-  }
-
-  &.ec-other-month .ec-day-head time {
-    opacity: .3;
-  }
-
-  .ec-list & {
-    border: none;
-  }
-}
-
-.ec-list {
-  .ec-day-head {
-    background-color: var(--ec-list-day-bg-color);
-    border-style: solid none;
-    margin: -1px 0 0;
-    padding: 8px 14px;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-  }
-  .ec-day.ec-today .ec-day-head:before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background-color: var(--ec-today-bg-color);
-  }
-
-  .ec-day:first-child .ec-day-head {
-    border-top: none;
-  }
-
-  .ec-day-side {
-    float: right;
-  }
-
-  .ec-no-events {
-    text-align: center;
-    padding: 5em 0;
-  }
-}
-
-.ec-events {
-  margin: 0 6px 0 0;
-
-  .ec-time-grid &,
-  &.ec-preview {
-    position: relative;
-  }
-
-  .ec-day-grid &,
-  .ec-all-day & {
-    display: flow-root;
-  }
-}
-
-.ec-event {
-  display: flex;
-  padding: 2px;
-  color: var(--ec-event-text-color);
-  box-sizing: border-box;
-  box-shadow: 0 0 1px 0 var(--ec-border-color);
-  background-color: var(--ec-event-bg-color);
-  border-radius: 3px;
-  font-size: .85em;
-  line-height: 1.5;
-  z-index: 1;  // put it above the pointer event (for multi-day events in month view)
-
-  .ec-day-grid &,
-  .ec-all-day & {
-    position: relative;
-  }
-
-  .ec-list & {
-    flex-direction: row;
-    padding: 8px 14px;
-    color: inherit;
-    background-color: transparent;
-    border-radius: 0;
-  }
-
-  &.ec-preview {
-    position: absolute;
-    z-index: 1000;
-    width: 100%;
-    user-select: none;
-    opacity: .8;
-  }
-
-  &.ec-pointer {
-    color: inherit;
-    pointer-events: none;
-    user-select: none;
-    position: absolute;
-    z-index: 0;
-    box-shadow: none;
-    display: flex;
-  }
-}
-
-.ec-event-body {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .ec-day-grid &,
-  .ec-all-day &,
-  .ec-timeline & {
-    flex-direction: row;
-  }
-}
-
-.ec-event-tag {
-  width: 4px;
-  border-radius: 2px;
-  margin-right: 8px;
-}
-
-.ec-event-time {
-  overflow: hidden;
-  white-space: nowrap;
-  margin: 0 0 1px 0;
-  flex-shrink: 0;
-  max-height: 100%;
-
-  .ec-day-grid &,
-  .ec-timeline & {
-    margin: 0 3px 0 0;
-    max-width: 100%;
-    text-overflow: ellipsis;
-  }
-}
-
-.ec-event-title {
-  overflow: hidden;
-  margin: unset;
-  font-weight: inherit;
-
-  .ec-day-grid &,
-  .ec-all-day &,
-  .ec-timeline & {
-    min-height: 1.5em;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .ec-list & {
-    font-size: 1rem;
-  }
-}
-
-.ec-draggable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.ec-ghost {
-  opacity: .5;
-  user-select: none;
-  pointer-events: none;
-}
-
-.ec-bg-events {
-  position: relative;
-
-  .ec-day-grid &,
-  .ec-all-day & {
-    position: absolute;
-    inset: 0;
-  }
-}
-
-.ec-bg-event {
-  position: absolute;
-  background-color: var(--ec-bg-event-color);
-  opacity: var(--ec-bg-event-opacity);
-
-  .ec-day-grid &,
-  .ec-all-day & {
-    height: 100%;
-    z-index: auto;
-  }
-}
-
-.ec-time {
-  white-space: nowrap;
-}
-
-.ec-popup {
-  position: absolute;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  width: 110%;
-  min-width: 180px;
-  z-index: 1010;
-  padding: 8px 10px 14px;
-  background-color: var(--ec-popup-bg-color);
-  border: 1px solid var(--ec-border-color);
-  border-radius: 6px;
-  outline: 1px solid transparent;
-  box-shadow: 0 1px 3px 0 hsla(var(--ec-hs), 50%, .15), 0 4px 8px 3px hsla(var(--ec-hs), 50%, .15);
-
-  .ec-day-head {
-    text-align: left;
-    display: flex;
-    justify-content: space-between;
-
-    a {
-      cursor: pointer;
-      font-size: 1.5em;
-      line-height: .8;
-    }
-  }
-
-  .ec-events {
-    margin: 0;
-    min-height: 0;
-    overflow: auto;
-  }
-}
-
-.ec-extra {
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-  margin-left: -6.5px;
-  user-select: none;
-}
-
-.ec-now-indicator {
-  position: absolute;
-  z-index: 1005;
-  pointer-events: none;
-  .ec-time-grid & {
-    width: 100%;
-    border-top: var(--ec-now-indicator-color) solid 2px;
-  }
-  .ec-timeline & {
-    border-left: var(--ec-now-indicator-color) solid 2px;
-    will-change: transform;
-  }
-
-  &:before {
-    background: var(--ec-now-indicator-color);
-    border-radius: 50%;
-    content: "";
-    display: block;
-    height: 12px;
-    margin-top: -7px;
-    width: 12px;
-    .ec-timeline & {
-      margin-left: -7px;
-    }
-  }
-}
-
-.ec-resizer {
-  position: absolute;
-  user-select: none;
-
-  .ec-day-grid &,
-  .ec-all-day &,
-  .ec-timeline & {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 50%;
-    max-width: 8px;
-    cursor: ew-resize;
-
-    &.ec-start {
-      right: auto;
-      left: 0;
-    }
-  }
-}
-
-.ec-dragging, .ec-dragging * {
-  cursor: pointer!important;
-}
-.ec-resizing-y, .ec-resizing-y * {
-  cursor: ns-resize!important;
-}
-.ec-resizing-x, .ec-resizing-x * {
-  cursor: ew-resize!important;
-}

package/src/styles/theme.scss

@@ -1,95 +0,0 @@
-@mixin light-theme() {
-  color-scheme: light;
-  --ec-h: 0;
-  --ec-s: 0%;
-  //--ec-l-50: 97.30%;
-  //--ec-l-100: 95.70%;
-  //--ec-l-200: 93.70%;
-  --ec-l-300: 91.00%;
-  //--ec-l-400: 87.80%;
-  --ec-l-500: 83.50%;
-  --ec-l-600: 78.40%;
-  --ec-l-700: 71.40%;
-  //--ec-l-800: 62.40%;
-  //--ec-l-900: 48.20%;
-  //--ec-l-950: 13.30%;
-  --ec-bg-fallback-color: #fff;
-}
-
-@mixin dark-theme() {
-  color-scheme: dark;
-  --ec-h: 215;
-  --ec-s: 15%;
-  //--ec-l-50: 5.10%;
-  //--ec-l-100: 8.60%;
-  //--ec-l-200: 13.30%;
-  --ec-l-300: 25.50%;
-  //--ec-l-400: 34.10%;
-  --ec-l-500: 42.40%;
-  --ec-l-600: 49.80%;
-  --ec-l-700: 57.30%;
-  //--ec-l-800: 64.70%;
-  //--ec-l-900: 72.50%;
-  //--ec-l-950: 80.40%;
-  --ec-bg-fallback-color: #22272e;
-}
-
-.ec {
-  /* HSL */
-  @include light-theme;
-  --ec-hs: var(--ec-h), var(--ec-s);
-
-  /* Main color */
-  //--ec-color-50: hsl(var(--ec-hs), var(--ec-l-50));
-  //--ec-color-100: hsl(var(--ec-hs), var(--ec-l-100));
-  //--ec-color-200: hsl(var(--ec-hs), var(--ec-l-200));
-  --ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));
-  //--ec-color-400: hsl(var(--ec-hs), var(--ec-l-400));
-  --ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));
-  --ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));
-  --ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));
-  //--ec-color-800: hsl(var(--ec-hs), var(--ec-l-800));
-  //--ec-color-900: hsl(var(--ec-hs), var(--ec-l-900));
-  //--ec-color-950: hsl(var(--ec-hs), var(--ec-l-950));
-
-  /* General props */
-  //--ec-bg-color: <color>;  // can be set by the user
-  //--ec-text-color: <color>;  // can be set by the user
-  --ec-border-color: var(--ec-color-500);
-  --ec-accent-color: var(--ec-color-600);
-
-  /* Buttons */
-  --ec-button-bg-color: var(--ec-bg-color);
-  --ec-button-border-color: var(--ec-color-600);
-  --ec-button-text-color: var(--ec-text-color);
-  --ec-button-active-bg-color: var(--ec-color-300);
-  --ec-button-active-border-color: var(--ec-color-700);
-  --ec-button-active-text-color: var(--ec-button-text-color);
-
-  /* Events */
-  --ec-event-bg-color: #039be5;
-  --ec-event-text-color: #fff;
-  --ec-bg-event-color: var(--ec-color-500);
-  --ec-bg-event-opacity: 0.3;
-
-  /* Days */
-  --ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
-  --ec-today-bg-color: rgba(255, 220, 40, .15);
-  --ec-highlight-color: rgba(188, 232, 241, .3);
-
-  /* Popup */
-  --ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
-
-  /* Now Indicator */
-  --ec-now-indicator-color: #ea4335;
-
-  .ec-dark & {
-    @include dark-theme;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .ec-auto-dark & {
-      @include dark-theme;
-    }
-  }
-}

package/src/styles/time-grid.scss

@@ -1,83 +0,0 @@
-.ec-time-grid {
-  .ec-body {
-    .ec-event {
-      position: absolute;
-    }
-
-    .ec-event-title {
-      position: sticky;
-      top: 0;
-    }
-
-    .ec-resizer {
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 50%;
-      max-height: 8px;
-      cursor: ns-resize;
-
-      &.ec-start {
-        bottom: auto;
-        top: 0;
-      }
-    }
-  }
-
-  .ec-bg-event {
-    width: 100%;
-    z-index: 1;
-  }
-
-  .ec-time {
-    position: relative;
-    line-height: 24px;
-    top: -12px;
-    text-align: right;
-
-    &.ec-minor {
-      visibility: hidden;
-    }
-  }
-
-  .ec-header .ec-time ,
-  .ec-all-day .ec-time  {
-    visibility: hidden;
-    overflow-y: hidden;
-    height: 0;
-  }
-
-  .ec-time,
-  .ec-line {
-    height: 24px;
-  }
-
-  .ec-lines {
-    width: 8px;
-  }
-
-  .ec-line:not(:first-child):after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    border-bottom: 1px solid var(--ec-border-color);
-    pointer-events: none;
-  }
-
-  .ec-line.ec-minor:after {
-    border-bottom-style: dotted;
-  }
-
-  .ec-sidebar-title {
-    visibility: hidden;
-    overflow-y: hidden;
-    height: 0;
-    text-align: right;
-  }
-
-  .ec-all-day .ec-sidebar-title {
-    visibility: visible;
-    height: auto;
-    padding: 8px 0;
-  }
-}