.components-color-picker__hue-gradient {
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
.components-color-picker__hue-pointer,
.components-color-picker__alpha-pointer {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
transform: translate(-7px, -1px);
.components-color-picker__hue-pointer,
.components-color-picker__saturation-pointer {
transition: box-shadow 0.1s linear;
@media (prefers-reduced-motion: reduce) {
.components-color-picker__hue-pointer,
.components-color-picker__saturation-pointer {
.components-color-picker__saturation-pointer:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007cba, 0 0 5px 0 #007cba, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color), 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
.components-color-picker__hue-pointer:focus,
.components-color-picker__alpha-pointer:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 2px #007cba, 0 0 3px 0 #007cba;
box-shadow: 0 0 0 2px var(--wp-admin-theme-color), 0 0 3px 0 var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-color-picker__inputs-wrapper {
.components-color-picker__inputs-wrapper fieldset {
.components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type=number] {
.components-color-picker__inputs-field {
.components-color-picker__inputs-fields {
.components-color-picker__inputs-fields .components-base-control + .components-base-control {
.components-color-picker__inputs-fields .components-base-control__field {
.components-color-picker__inputs-toggle {
.components-combobox-control {
input.components-combobox-control__input[type=text] {
@media (min-width: 600px) {
input.components-combobox-control__input[type=text] {
input.components-combobox-control__input[type=text]:focus {
.components-combobox-control__suggestions-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border: 1px solid #757575;
/* Fonts smaller than 16px causes mobile safari to zoom. */
/* Override core line-height. To be reviewed. */
@media (prefers-reduced-motion: reduce) {
.components-combobox-control__suggestions-container {
@media (min-width: 600px) {
.components-combobox-control__suggestions-container {
/* Override core line-height. To be reviewed. */
.components-combobox-control__suggestions-container:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-combobox-control__suggestions-container::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-combobox-control__suggestions-container::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-combobox-control__suggestions-container:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-combobox-control__suggestions-container::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-combobox-control__suggestions-container::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-combobox-control__suggestions-container:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.components-combobox-control__suggestions-container:focus-within {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-combobox-control__reset.components-button {
.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
.components-custom-gradient-picker__gradient-bar {
.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point {
.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg {
.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
border: 2px solid transparent;
box-shadow: inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
.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: 0 0 0 1px #fff, 0 0 0 3px #1e1e1e;
.components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
.components-custom-gradient-picker__inserter {
.components-custom-gradient-picker__liner-gradient-indicator {
.components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker,
.components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker {
.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
border: 1px solid #949494;
.components-custom-select-control {
.components-custom-select-control__label {
.components-custom-select-control__button {
border: 1px solid #757575;
.components-custom-select-control__button.components-custom-select-control__button {
.components-custom-select-control__button:focus:not(:disabled) {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
.components-custom-select-control__button .components-custom-select-control__button-icon {
.components-custom-select-control__menu {
border: 1px solid #1e1e1e;
.components-custom-select-control__menu[aria-hidden=true] {
.components-custom-select-control__item {
.components-custom-select-control__item.is-highlighted {
.components-custom-select-control__item .components-custom-select-control__item-icon {
.components-custom-select-control__item:last-child {
* Parts of this source were derived and modified from react-dates,
* released under the MIT license.
* https://github.com/airbnb/react-dates
* Copyright (c) 2016 Airbnb
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
.PresetDateRangePicker_panel {
.PresetDateRangePicker_button {
border: 2px solid #00a699;
.PresetDateRangePicker_button:active {
.PresetDateRangePicker_button__selected {
.SingleDatePickerInput__withBorder {
border: 1px solid #dbdbdb;
.SingleDatePickerInput__rtl {
.SingleDatePickerInput__disabled {
background-color: #f2f2f2;
.SingleDatePickerInput__block {
.SingleDatePickerInput__showClearDate {
.SingleDatePickerInput_clearDate {
transform: translateY(-50%);
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
.SingleDatePickerInput_clearDate__small {
.SingleDatePickerInput_clearDate__hide {
.SingleDatePickerInput_clearDate_svg {
.SingleDatePickerInput_clearDate_svg__small {
.SingleDatePickerInput_calendarIcon {
.SingleDatePickerInput_calendarIcon_svg {
.SingleDatePicker__block {
.SingleDatePicker_picker {
.SingleDatePicker_picker__rtl {