@wordpress/components 19.10.0 → 19.13.0

package/build-style/style-rtl.css

@@ -158,7 +158,7 @@
     opacity: 0.5;
   }
 }
-.components-autocomplete__popover .components-popover__content > div {
+.components-autocomplete__popover .components-popover__content {
   padding: 16px;
   min-width: 220px;
 }
@@ -738,6 +738,7 @@ svg.components-checkbox-control__indeterminate {
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   border: 1px solid transparent;
+  box-sizing: inherit;
 }
 .components-circular-option-picker__option:focus::after {
   content: "";
@@ -768,12 +769,6 @@ svg.components-checkbox-control__indeterminate {
   line-height: 22px;
 }
 
-@media (min-width: 782px) {
-  .components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
-    margin-left: 156px;
-    margin-top: -49px;
-  }
-}
 .components-palette-edit__popover .components-custom-gradient-picker__gradient-bar {
   margin-top: 0;
 }
@@ -918,11 +913,8 @@ input.components-combobox-control__input[type=text]:focus {
   overflow: visible;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
   border: none;
+  outline: none;
   border-radius: 2px;
-  max-height: -moz-fit-content !important;
-  max-height: fit-content !important;
-}
-.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content > div {
   padding: 0;
 }
 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content .react-colorful__saturation {
@@ -930,17 +922,6 @@ input.components-combobox-control__input[type=text]:focus {
   border-top-right-radius: 2px;
 }
 
-@media (min-width: 782px) {
-  .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar .components-popover__content.components-popover__content {
-    margin-left: 156px;
-  }
-  .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content {
-    margin-top: -60px;
-  }
-  .components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-bottom .components-popover__content {
-    margin-bottom: -60px;
-  }
-}
 .components-color-palette__custom-color-name {
   text-align: right;
 }
@@ -960,11 +941,10 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   height: 48px;
   margin-bottom: 20px;
-  padding-right: 16px;
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
   position: relative;
-  width: calc(100% - 32px);
+  width: calc(100% - 48px);
   margin-right: auto;
   margin-left: auto;
 }
@@ -995,7 +975,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
   box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
-  outline: 4px solid transparent;
+  outline: 1.5px solid transparent;
 }
 
 .components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
@@ -2138,63 +2118,24 @@ input.components-combobox-control__input[type=text]:focus {
   width: 15px;
   fill: #cacccd;
 }
-.components-datetime {
-  padding: 16px;
-}
-.components-panel__body .components-datetime {
-  padding: 0;
+.components-datetime__date .CalendarMonthGrid__horizontal,
+.components-datetime__date .DayPicker_weekHeader_li {
+  transform: none !important;
+  width: 100% !important;
 }
-.components-datetime .components-datetime__calendar-help {
-  padding: 16px;
-  min-width: 260px;
+.components-datetime__date .CalendarMonthGrid_month__horizontal,
+.components-datetime__date .CalendarMonth_table,
+.components-datetime__date .DayPicker_weekHeader {
+  width: 100%;
 }
-.components-datetime .components-datetime__calendar-help h4 {
+.components-datetime__date .DayPicker_weekHeaders__horizontal {
   margin: 0;
 }
-.components-datetime .components-datetime__buttons {
+.components-datetime__date .DayPicker_weekHeader_ul {
   display: flex;
-  justify-content: space-between;
-}
-.components-datetime .components-datetime__date-help-toggle {
-  display: block;
-  margin-right: auto;
 }
-.components-datetime fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.components-datetime select,
-.components-datetime input {
-  box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
-  border-radius: 2px;
-  border: 1px solid #757575;
-}
-@media (prefers-reduced-motion: reduce) {
-  .components-datetime select,
-.components-datetime input {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.components-datetime select,
-.components-datetime input[type=number],
-.components-datetime .components-button {
-  height: 30px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.components-datetime .components-button:focus {
-  z-index: 1;
-}
-
-.components-datetime__date {
-  min-height: 236px;
-  border-top: 1px solid #ddd;
-}
-.components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault {
-  left: 13px;
+.components-datetime__date .DayPicker_weekHeader {
+  top: 50px;
 }
 .components-datetime__date .CalendarMonth_caption {
   font-size: 13px;
@@ -2204,160 +2145,32 @@ input.components-combobox-control__input[type=text]:focus {
   border-spacing: 2px;
 }
 .components-datetime__date .CalendarDay {
-  font-size: 13px;
   border: none;
+  font-size: 13px;
   border-radius: 50%;
-  text-align: center;
+  background: #fff;
+}
+.components-datetime__date .CalendarDay:hover {
+  color: var(--wp-admin-theme-color);
 }
 .components-datetime__date .CalendarDay:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
   outline: 2px solid transparent;
 }
+.components-datetime__date .CalendarDay__today {
+  background: #f0f0f0;
+}
 .components-datetime__date .CalendarDay__selected {
   background: var(--wp-admin-theme-color);
   border: 2px solid transparent;
 }
 .components-datetime__date .CalendarDay__selected:hover {
   background: var(--wp-admin-theme-color-darker-20);
+  color: #fff;
 }
 .components-datetime__date .CalendarDay__selected:focus {
   box-shadow: inset 0 0 0 1px #fff;
 }
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault {
-  padding: 2px 8px;
-  top: 20px;
-}
-.components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-datetime__date .DayPicker_weekHeader {
-  top: 50px;
-}
-.components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul {
-  margin: 1px;
-  padding-right: 0;
-  padding-left: 0;
-}
-.components-datetime__date.is-description-visible .DayPicker {
-  visibility: hidden;
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  flex-direction: column;
-  position: relative;
-}
-.components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before {
-  content: " ";
-  width: 4px;
-  height: 4px;
-  border-radius: 2px;
-  position: absolute;
-  right: 50%;
-  margin-right: -2px;
-  bottom: 0;
-  background-color: #fff;
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-  background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-  padding-bottom: 16px;
-}
-.components-datetime__time fieldset {
-  position: relative;
-  margin-bottom: 0.5em;
-}
-.components-datetime__time fieldset + fieldset {
-  margin-bottom: 0;
-}
-.components-datetime__time .components-datetime__time-field-am-pm fieldset {
-  margin-top: 0;
-}
-.components-datetime__time .components-datetime__time-wrapper {
-  display: flex;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {
-  display: inline-block;
-  padding: 0 0 0 3px;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time {
-  direction: ltr;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {
-  margin-left: 4px;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] {
-  padding: 2px;
-  margin-left: 4px;
-  text-align: center;
-  -moz-appearance: textfield;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus {
-  position: relative;
-  z-index: 1;
-}
-.components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-day input {
-  margin: -4px 0 0 !important;
-  border-radius: 0 2px 2px 0 !important;
-}
-.components-datetime__time.is-12-hour .components-datetime__time-field-year input {
-  border-radius: 2px 0 0 2px !important;
-}
-
-.components-datetime__timezone {
-  line-height: 30px;
-  margin-right: 4px;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-  font-weight: 600;
-  margin-top: 0.5em;
-}
-.components-datetime__time-legend.invisible {
-  position: absolute;
-  top: -999em;
-  right: -999em;
-}
-
-.components-datetime__time-field-integer-field {
-  font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-  width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-  width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-  max-width: 145px;
-}
-
-.components-popover .components-datetime__date {
-  padding-right: 4px;
-}
 
 .block-editor-dimension-control .components-base-control__field {
   display: flex;
@@ -2451,7 +2264,7 @@ body.is-dragging-components-draggable {
   display: inline-block;
 }
 
-.components-dropdown__content .components-popover__content > div {
+.components-dropdown__content .components-popover__content {
   padding: 8px;
 }
 .components-dropdown__content [role=menuitem] {
@@ -2828,7 +2641,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless {
   position: relative;
-  padding: 0 0 0 16px;
+  padding: 0 0 0 24px;
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
@@ -2840,6 +2653,7 @@ body.is-dragging-components-draggable {
   position: absolute;
   top: 1px;
   left: 0;
+  padding: 0;
 }
 .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
   color: #4ab866;
@@ -3561,6 +3375,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.components-placeholder .components-base-control__label {
   font-size: 13px;
 }
+.components-placeholder.components-placeholder.has-illustration {
+  background: none;
+  border: none;
+  box-shadow: none;
+  min-width: 100px;
+}
 
 .components-placeholder__error,
 .components-placeholder__instructions,
@@ -3713,172 +3533,55 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.is-small .components-button {
   padding: 0 8px 2px;
 }
-.components-popover {
-  position: fixed;
-  z-index: 1000000;
+
+.components-placeholder__illustration {
+  border: 1px dashed currentColor;
+  box-sizing: border-box;
+  position: absolute;
   top: 0;
   left: 0;
-  opacity: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  stroke-dasharray: 3;
+  opacity: 0.4;
 }
-.components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] {
-  opacity: 1;
+
+.components-popover {
+  z-index: 1000000;
 }
 .components-popover.is-expanded {
+  position: fixed;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   z-index: 1000000 !important;
 }
-.components-popover:not(.is-without-arrow) {
-  margin-left: 2px;
-}
-.components-popover:not(.is-without-arrow)::before {
-  border: 8px solid #ccc;
-}
-.components-popover:not(.is-without-arrow).is-alternate::before {
-  border-color: #1e1e1e;
-}
-.components-popover:not(.is-without-arrow)::after {
-  border: 8px solid #fff;
-}
-.components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after {
-  content: "";
-  position: absolute;
-  height: 0;
-  width: 0;
-  line-height: 0;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=top] {
-  margin-top: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
-  bottom: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
-  bottom: -6px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
-  border-bottom: none;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-top-style: solid;
-  margin-left: -10px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
-  margin-top: 8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
-  top: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
-  top: -6px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
-  border-bottom-style: solid;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-top: none;
-  margin-left: -10px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
-  margin-left: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
-  right: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
-  right: -6px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
-  border-bottom-color: transparent;
-  border-left-style: solid;
-  border-right: none;
-  border-top-color: transparent;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
-  margin-left: 8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
-  left: -8px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
-  left: -6px;
-}
-.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
-  border-bottom-color: transparent;
-  border-left: none;
-  border-right-style: solid;
-  border-top-color: transparent;
-}
-.components-popover[data-y-axis=top] {
-  bottom: 100%;
-}
-.components-popover[data-y-axis=bottom] {
-  top: 100%;
-}
-.components-popover[data-y-axis=middle] {
-  align-items: center;
-  display: flex;
-}
-.components-popover.is-from-top {
-  margin-top: 12px;
-}
-.components-popover.is-from-bottom {
-  margin-top: -12px;
-}
-.components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {
-  margin-left: 12px;
-}
-.components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
-  margin-right: 12px;
-}
 
 .components-popover__content {
-  height: 100%;
   background: #fff;
-  border: 1px solid #ccc;
+  outline: 1px solid #ccc;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   border-radius: 2px;
+  box-sizing: border-box;
+  width: min-content;
 }
 .is-alternate .components-popover__content {
-  border: 1px solid #1e1e1e;
+  outline: 1px solid #1e1e1e;
   box-shadow: none;
 }
-.components-popover .components-popover__content {
-  position: absolute;
-  height: auto;
-  overflow-y: auto;
-}
 .components-popover.is-expanded .components-popover__content {
   position: static;
   height: calc(100% - 48px);
   overflow-y: visible;
   min-width: auto;
   border: none;
+  outline: none;
   border-top: 1px solid #1e1e1e;
 }
-.components-popover[data-y-axis=top] .components-popover__content {
-  bottom: 100%;
-}
-.components-popover[data-x-axis=center] .components-popover__content {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.components-popover[data-x-axis=right] .components-popover__content {
-  position: absolute;
-  left: 100%;
-}
-.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
-  margin-left: -25px;
-}
-.components-popover[data-x-axis=left] .components-popover__content {
-  position: absolute;
-  right: 100%;
-}
-.components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
-  margin-right: -25px;
-}
 
 .components-popover__header {
   align-items: center;
@@ -3886,7 +3589,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: flex;
   height: 48px;
   justify-content: space-between;
-  padding: 0 8px 0 16px;
+  padding: 0 16px 0 8px;
 }
 
 .components-popover__header-title {
@@ -3899,6 +3602,19 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-popover__close.components-button {
   z-index: 5;
 }
+
+.components-popover__arrow {
+  position: absolute;
+  background: #ccc;
+  width: 8px;
+  height: 8px;
+  transform: rotate(-45deg);
+  z-index: -1;
+}
+.is-alternate .components-popover__arrow {
+  background: #1e1e1e;
+}
+
 .components-radio-control {
   display: flex;
   flex-direction: column;
@@ -4427,7 +4143,7 @@ body.lockscroll {
   box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
 }
 .components-tab-panel__tabs-item.is-active::before {
@@ -4437,13 +4153,13 @@ body.lockscroll {
   bottom: 1px;
   left: 0;
   right: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: 1.5px solid transparent;
 }
 .components-tab-panel__tabs-item:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
 }
 
 .components-text-control__input,
@@ -4803,14 +4519,13 @@ div.components-toolbar > div + div.has-left-divider::before {
   background: #1e1e1e;
   border-radius: 2px;
   border-width: 0;
+  outline: none;
   color: #fff;
   white-space: nowrap;
   text-align: center;
   line-height: 1.4;
   font-size: 12px;
   box-shadow: none;
-}
-.components-tooltip .components-popover__content > div {
   padding: 4px 8px;
 }