@wordpress/components 19.8.4 → 19.11.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;
 }
@@ -995,7 +976,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 {
@@ -2451,7 +2432,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] {
@@ -3122,6 +3103,13 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button.is-primary .components-menu-item__item {
   margin-left: 0;
 }
+.components-menu-item__button:disabled.is-tertiary, .components-menu-item__button[aria-disabled=true].is-tertiary,
+.components-menu-item__button.components-button:disabled.is-tertiary,
+.components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
+  background: none;
+  color: var(--wp-admin-theme-color-darker-10);
+  opacity: 0.3;
+}
 
 .components-menu-item__info-wrapper {
   display: flex;
@@ -3706,172 +3694,40 @@ 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;
-  top: 0;
-  left: 0;
-  opacity: 0;
-}
-.components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] {
-  opacity: 1;
 }
 .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;
@@ -3879,7 +3735,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 {
@@ -3892,6 +3748,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;
@@ -4420,7 +4289,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 {
@@ -4430,13 +4299,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,
@@ -4721,12 +4590,29 @@ body.lockscroll {
   display: inline-flex;
   flex-shrink: 0;
   flex-wrap: wrap;
+  padding-right: 6px;
+  padding-left: 6px;
   line-height: 0;
 }
 .components-toolbar-group .components-toolbar-group.components-toolbar-group {
   border-width: 0;
   margin: 0;
 }
+.components-toolbar-group .components-button.components-button,
+.components-toolbar-group .components-button.has-icon.has-icon {
+  min-width: 36px;
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.components-toolbar-group .components-button.components-button svg,
+.components-toolbar-group .components-button.has-icon.has-icon svg {
+  min-width: 24px;
+}
+.components-toolbar-group .components-button.components-button::before,
+.components-toolbar-group .components-button.has-icon.has-icon::before {
+  right: 2px;
+  left: 2px;
+}
 
 .components-toolbar {
   min-height: 48px;
@@ -4779,14 +4665,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;
 }