@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/scheduler/nylas-scheduler/nylas-scheduler.css

@@ -0,0 +1,182 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  border-radius: var(--nylas-border-radius-2x);
+  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  background: var(--nylas-base-0);
+  position: relative;
+}
+
+.error {
+  padding: 8rem 12rem;
+  color: var(--nylas-base-0);
+  background-color: var(--nylas-error);
+  margin: 1.5rem;
+  border-radius: var(--nylas-border-radius-2x);
+}
+
+.loading {
+  margin: 1.5rem;
+  display: flex;
+  gap: 1rem;
+}
+.loading .skeleton {
+  border-radius: var(--nylas-border-radius-2x);
+  animation: pulsate 1.5s infinite;
+}
+.loading .skeleton:nth-child(2) {
+  animation-delay: -100ms;
+}
+.loading .skeleton:nth-child(3) {
+  animation-delay: -200ms;
+}
+.loading .skeleton:nth-child(4) {
+  animation-delay: -300ms;
+}
+.loading .skeleton:nth-child(5) {
+  animation-delay: -400ms;
+}
+.loading .left .skeleton {
+  height: 100%;
+  width: 400px;
+}
+.loading .right .skeleton {
+  height: 5rem;
+  width: 300px;
+  margin-bottom: 1rem;
+}
+.loading .right .skeleton:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes pulsate {
+  0% {
+    background-color: var(--nylas-base-50);
+  }
+  50% {
+    background-color: var(--nylas-base-100);
+  }
+  100% {
+    background-color: var(--nylas-base-50);
+  }
+}
+.select-date-page,
+.additional-data-page {
+  display: flex;
+}
+
+.additional-data-page {
+  background-color: var(--nylas-base-50);
+}
+
+.booked-event-page {
+  background-color: var(--nylas-base-50);
+}
+
+.cancelled-event-page {
+  padding: 1rem;
+  height: 496px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.booked-event-page,
+.cancelled-event-page {
+  min-width: 784px;
+}
+
+.left-panel {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  gap: 1rem;
+  border-right-width: 1px;
+  height: 500px;
+  min-width: 384px;
+}
+
+.border {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  border-top-width: 1px;
+  height: 1px;
+  background-color: var(--nylas-base-200);
+}
+
+.right-panel {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 360px;
+  background-color: var(--nylas-base-50);
+}
+
+.right-panel .wrapper {
+  width: 100%;
+}
+
+.right-panel .wrapper h2 {
+  display: flex;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  gap: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+}
+
+nylas-selected-event-card,
+nylas-booking-form {
+  height: 496px;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px;
+  font-size: 14px;
+  font-weight: 300;
+  color: var(--nylas-base-500);
+  border-top: 1px solid var(--nylas-base-100);
+}
+.footer svg {
+  fill: var(--nylas-base-500);
+}
+
+.footer svg {
+  margin-top: 1px;
+}
+
+nylas-selected-event-card::part(nsec__timezone) {
+  position: absolute;
+  bottom: 0;
+}