@wordpress/components 29.12.0 → 29.13.1-next.719a03cbe.0

package/build-style/style-rtl.css

@@ -589,6 +589,364 @@ p + .components-button.is-tertiary {
     background-position: right 200px top 0;
   }
 }
+/* Root of the component. */
+.components-calendar {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+  display: inline flow-root;
+  color: #1e1e1e;
+  background-color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  z-index: 0;
+}
+.components-calendar *,
+.components-calendar *::before,
+.components-calendar *::after {
+  box-sizing: border-box;
+}
+
+.components-calendar__day {
+  padding: 0;
+  position: relative;
+}
+.components-calendar__day:has(.components-calendar__day-button:disabled) {
+  color: #949494;
+}
+.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.components-calendar__day-button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 2px;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+}
+.components-calendar__day-button::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border: none;
+  border-radius: 2px;
+}
+.components-calendar__day-button::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  pointer-events: none;
+}
+.components-calendar__day-button:disabled {
+  cursor: revert;
+}
+@media (forced-colors: active) {
+  .components-calendar__day-button:disabled {
+    text-decoration: line-through;
+  }
+}
+.components-calendar__day-button:focus-visible {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: 1px;
+}
+
+.components-calendar__caption-label {
+  z-index: 1;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 0;
+  text-transform: capitalize;
+}
+
+.components-calendar__button-next,
+.components-calendar__button-previous {
+  border: none;
+  border-radius: 2px;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  color: inherit;
+}
+.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
+.components-calendar__button-previous:disabled,
+.components-calendar__button-previous[aria-disabled=true] {
+  cursor: revert;
+  color: #949494;
+}
+.components-calendar__button-next:focus-visible,
+.components-calendar__button-previous:focus-visible {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.components-calendar__chevron {
+  display: inline-block;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
+  transform: rotate(-180deg);
+  transform-origin: 50%;
+}
+
+.components-calendar__month-caption {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 2rem;
+  margin-bottom: 12px;
+}
+
+.components-calendar__months {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: fit-content;
+}
+
+.components-calendar__month-grid {
+  border-collapse: separate;
+  border-spacing: 0 4px;
+}
+
+.components-calendar__nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2rem;
+}
+
+.components-calendar__weekday {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: #757575;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/* DAY MODIFIERS */
+.components-calendar__day--today::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 2px;
+  inset-inline-end: 2px;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+}
+
+.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
+.components-calendar__day-button:hover:not(:disabled)) {
+  color: #fff;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
+  background-color: #1e1e1e;
+  border: 1px solid transparent;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
+  background-color: #949494;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
+  background-color: #2f2f2f;
+}
+
+.components-calendar__day--hidden {
+  visibility: hidden;
+}
+
+.components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button, .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button::before {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.components-calendar__range-middle .components-calendar__day-button::before {
+  background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
+  border-radius: 0;
+  border-width: 1px 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button, .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button::before {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/*
+ * RANGE PREVIEW (range calendar only)
+ *
+ * The preview is rendered in the button's ::after pseudo-element, so that it
+ * can be rendered over the button's contents.
+ * The selection preview is shown with a dashed border. In order to have
+ * control over the dash pattern (especially the seams between days), the
+ * dashed borders are rendered as SVGs via the url() CSS function.
+ * Since SVGs rendered in the url() function don't seem to be able to access
+ * CSS variables, we're using the SVGs as masks, and using `background-color`
+ * to consume the accent color variable.
+ */
+.components-calendar__day--preview svg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
+}
+@media (forced-colors: active) {
+  .components-calendar__day--preview svg {
+    color: inherit;
+  }
+}
+.components-calendar[dir=rtl] .components-calendar__day--preview svg {
+  transform: scaleX(-1);
+}
+
+.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
+  border: none;
+}
+
+/* ANIMATIONS */
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-in-right {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-out-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-out-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+  animation-duration: 0s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: forwards;
+}
+@media not (prefers-reduced-motion) {
+  .components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+    animation-duration: 0.3s;
+  }
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
+  animation-name: slide-in-left;
+}
+
+.components-calendar__weeks-before-exit,
+.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
+  animation-name: slide-out-left;
+}
+
+.components-calendar__weeks-after-enter,
+.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
+  animation-name: slide-in-right;
+}
+
+.components-calendar__weeks-after-exit,
+.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
+  animation-name: slide-out-right;
+}
+
+.components-calendar__caption-after-enter {
+  animation-name: fade-in;
+}
+
+.components-calendar__caption-after-exit {
+  animation-name: fade-out;
+}
+
+.components-calendar__caption-before-enter {
+  animation-name: fade-in;
+}
+
+.components-calendar__caption-before-exit {
+  animation-name: fade-out;
+}
+
 .components-checkbox-control {
   --checkbox-input-size: 24px;
   --checkbox-input-margin: 8px;
@@ -2976,11 +3334,6 @@ body.lockscroll {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
 
-@media (max-width: 782px) {
-  .components-base-control .components-base-control__field .components-select-control__input {
-    font-size: 16px;
-  }
-}
 .components-snackbar {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;