PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/components/style-rtl.css +54 -85 24.0.0 → 24.1.0 View file →
@@ -167,12 +167,13 @@
167 167 min-height: 36px;
168 168 text-align: right;
169 169 width: 100%;
170 170 font-weight: var(--wpds-typography-font-weight-default, 400);
171 + position: relative;
171 172 }
172 -.components-autocomplete__result.components-button:focus:not(:disabled) {
173 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
174 - outline: 2px solid transparent;
173 +.components-autocomplete__result.components-button:focus:not(:disabled):not(:active) {
174 + box-shadow: 0 0 0 calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
175 + z-index: 1;
175 176 }
176 177
177 178 .components-badge {
178 179 box-sizing: border-box;
@@ -551,8 +552,9 @@
551 552 }
552 553
553 554 .components-checkbox-control__label {
554 555 line-height: var(--checkbox-input-size);
556 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
555 557 }
556 558 .components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
557 559 cursor: var(--wpds-cursor-control, pointer);
558 560 }
@@ -557,9 +559,9 @@
557 559 cursor: var(--wpds-cursor-control, pointer);
558 560 }
559 561
560 562 .components-checkbox-control__input[type=checkbox] {
561 - border: 1px solid #1e1e1e;
563 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
562 564 margin-left: 12px;
563 565 transition: none;
564 566 border-radius: 2px;
565 567 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -577,9 +579,9 @@
577 579 /* Override core line-height. To be reviewed. */
578 580 line-height: normal;
579 581 }
580 582 }
581 -.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
583 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
582 584 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
583 585 }
584 586 .components-checkbox-control__input[type=checkbox]:focus {
585 587 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
@@ -589,8 +591,11 @@
589 591 }
590 592 .components-checkbox-control__input[type=checkbox]::placeholder {
591 593 color: rgba(30, 30, 30, 0.62);
592 594 }
595 +.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
596 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
597 +}
593 598 .components-checkbox-control__input[type=checkbox]:focus {
594 599 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
595 600 outline: 2px solid transparent;
596 601 }
@@ -617,9 +622,9 @@
617 622 display: inline-block;
618 623 vertical-align: middle;
619 624 width: 16px;
620 625 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
621 - font: normal 30px/1 dashicons;
626 + font: 400 30px/1 dashicons;
622 627 speak: none;
623 628 -webkit-font-smoothing: antialiased;
624 629 -moz-osx-font-smoothing: grayscale;
625 630 }
@@ -629,13 +634,17 @@
629 634 font-size: 21px;
630 635 }
631 636 }
632 637 .components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
633 - background: #f0f0f0;
634 - border-color: #ddd;
638 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
639 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
640 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
635 641 cursor: default;
636 642 opacity: 1;
637 643 }
644 +.components-checkbox-control__input[type=checkbox][aria-disabled=true]:checked::before, .components-checkbox-control__input[type=checkbox][aria-disabled=true][aria-checked=mixed]::before, .components-checkbox-control__input[type=checkbox]:disabled:checked::before, .components-checkbox-control__input[type=checkbox]:disabled[aria-checked=mixed]::before {
645 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
646 +}
638 647 .components-checkbox-control__input[type=checkbox] {
639 648 background: #fff;
640 649 color: #1e1e1e;
641 650 clear: none;
@@ -683,9 +692,8 @@
683 692 }
684 693
685 694 svg.components-checkbox-control__checked,
686 695 svg.components-checkbox-control__indeterminate {
687 - --checkmark-size: var(--checkbox-input-size);
688 696 color: #fff;
689 697 cursor: var(--wpds-cursor-control, pointer);
690 698 position: absolute;
691 699 right: 50%;
@@ -690,24 +698,18 @@
690 698 position: absolute;
691 699 right: 50%;
692 700 top: 50%;
693 701 transform: translate(50%, -50%);
694 - width: var(--checkmark-size);
695 - height: var(--checkmark-size);
702 + width: var(--checkbox-input-size);
703 + height: var(--checkbox-input-size);
696 704 -webkit-user-select: none;
697 705 user-select: none;
698 706 pointer-events: none;
699 707 }
700 -@media (min-width: 600px) {
701 - svg.components-checkbox-control__checked,
702 - svg.components-checkbox-control__indeterminate {
703 - --checkmark-size: calc(var(--checkbox-input-size) + 4px);
704 - }
705 -}
706 708
707 709 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
708 710 .components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
709 - color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
711 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
710 712 }
711 713
712 714 .components-checkbox-control__help {
713 715 display: inline-block;
@@ -745,14 +747,14 @@
745 747 transform: scale(1);
746 748 }
747 749 @media not (prefers-reduced-motion) {
748 750 .components-circular-option-picker__option-wrapper {
749 - transition: 100ms transform ease;
751 + transition: 100ms transform ease-out;
750 752 will-change: transform;
751 753 }
752 754 }
753 755 .components-circular-option-picker__option-wrapper:hover {
754 - transform: scale(1.2);
756 + transform: scale(1.1);
755 757 }
756 758 .components-circular-option-picker__option-wrapper > div {
757 759 height: 100%;
758 760 width: 100%;
@@ -760,12 +762,9 @@
760 762
761 763 .components-circular-option-picker__option-wrapper::before {
762 764 content: "";
763 765 position: absolute;
764 - top: 1px;
765 - right: 1px;
766 - bottom: 1px;
767 - left: 1px;
766 + inset: 1px;
768 767 border-radius: 50%;
769 768 z-index: -1;
770 769 background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
771 770 }
@@ -787,13 +786,9 @@
787 786 }
788 787 .components-circular-option-picker__option {
789 788 cursor: var(--wpds-cursor-control, pointer);
790 789 }
791 -.components-circular-option-picker__option:hover {
792 - box-shadow: inset 0 0 0 14px !important;
793 -}
794 790 .components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
795 - box-shadow: inset 0 0 0 4px;
796 791 position: relative;
797 792 z-index: 1;
798 793 overflow: visible;
799 794 }
@@ -807,34 +802,13 @@
807 802 }
808 803 .components-circular-option-picker__option::after {
809 804 content: "";
810 805 position: absolute;
811 - top: -1px;
812 - right: -1px;
813 - bottom: -1px;
814 - left: -1px;
806 + inset: -1px;
807 + border: 1px solid transparent;
815 808 border-radius: 50%;
816 809 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
817 - border: 1px solid transparent;
818 - box-sizing: inherit;
819 810 }
820 -.components-circular-option-picker__option:focus::after {
821 - content: "";
822 - border-radius: 50%;
823 - box-shadow: inset 0 0 0 2px #fff;
824 - position: absolute;
825 - top: 50%;
826 - right: 50%;
827 - transform: translate(50%, -50%);
828 - border: 2px solid #757575;
829 - width: calc(100% + 4px);
830 - height: calc(100% + 4px);
831 -}
832 -.components-circular-option-picker__option.components-button:focus {
833 - background-color: transparent;
834 - box-shadow: inset 0 0 0 14px;
835 - outline: none;
836 -}
837 811
838 812 .components-circular-option-picker__button-action .components-circular-option-picker__option {
839 813 color: #fff;
840 814 background: #fff;
@@ -852,12 +826,8 @@
852 826 width: 260px;
853 827 padding: 8px;
854 828 }
855 829
856 -.components-dropdown-menu__menu .components-palette-edit__menu-button {
857 - width: 100%;
858 -}
859 -
860 830 .component-color-indicator {
861 831 width: 20px;
862 832 height: 20px;
863 833 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -910,9 +880,9 @@
910 880 /* Override core line-height. To be reviewed. */
911 881 line-height: normal;
912 882 }
913 883 }
914 -.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
884 +.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true]) {
915 885 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
916 886 }
917 887 .components-combobox-control__suggestions-container:focus {
918 888 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
@@ -1042,14 +1012,19 @@
1042 1012 width: inherit;
1043 1013 border-radius: 50%;
1044 1014 padding: 0;
1045 1015 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1046 - outline: 2px solid transparent;
1047 1016 }
1048 -.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 {
1017 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1049 1018 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);
1050 - outline: 1.5px solid transparent;
1051 1019 }
1020 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
1021 + outline-offset: 1px;
1022 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1023 +}
1024 +.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
1025 + 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), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
1026 +}
1052 1027
1053 1028 .components-custom-gradient-picker__remove-control-point-wrapper {
1054 1029 padding-bottom: 8px;
1055 1030 }
@@ -1444,9 +1419,9 @@
1444 1419 /* Override core line-height. To be reviewed. */
1445 1420 line-height: normal;
1446 1421 }
1447 1422 }
1448 -.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
1423 +.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
1449 1424 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1450 1425 }
1451 1426 .components-form-token-field__input-container:focus {
1452 1427 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
@@ -2190,13 +2165,9 @@
2190 2165 margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2191 2166 }
2192 2167 .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
2193 2168 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2194 - background-color: transparent;
2195 2169 }
2196 -.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2197 - box-shadow: none;
2198 -}
2199 2170
2200 2171 .components-notice-list {
2201 2172 display: flex;
2202 2173 flex-direction: column;
@@ -2386,9 +2357,9 @@
2386 2357 font-size: 13px;
2387 2358 letter-spacing: initial;
2388 2359 line-height: initial;
2389 2360 text-transform: none;
2390 - font-weight: normal;
2361 + font-weight: 400;
2391 2362 }
2392 2363
2393 2364 .components-placeholder__label {
2394 2365 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
@@ -2441,9 +2412,9 @@
2441 2412 /* Override core line-height. To be reviewed. */
2442 2413 line-height: normal;
2443 2414 }
2444 2415 }
2445 -.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
2416 +.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
2446 2417 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2447 2418 }
2448 2419 .components-placeholder__input[type=url]:focus {
2449 2420 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
@@ -2784,8 +2755,9 @@
2784 2755
2785 2756 .components-radio-control__label {
2786 2757 grid-column: 2;
2787 2758 grid-row: 1;
2759 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2788 2760 }
2789 2761 .components-radio-control__input:not(:disabled) + .components-radio-control__label {
2790 2762 cursor: var(--wpds-cursor-control, pointer);
2791 2763 }
@@ -3042,14 +3014,10 @@
3042 3014 .components-snackbar__action.components-external-link {
3043 3015 margin-right: 32px;
3044 3016 color: #fff;
3045 3017 flex-shrink: 0;
3018 + --focus-color: #fff;
3046 3019 }
3047 -.components-snackbar__action.components-button:focus,
3048 -.components-snackbar__action.components-external-link:focus {
3049 - box-shadow: none;
3050 - outline: 1px dotted #fff;
3051 -}
3052 3020 .components-snackbar__action.components-button:hover,
3053 3021 .components-snackbar__action.components-external-link:hover {
3054 3022 text-decoration: none;
3055 3023 color: currentColor;
@@ -3205,22 +3173,22 @@
3205 3173 /* Override core line-height. To be reviewed. */
3206 3174 line-height: normal;
3207 3175 }
3208 3176 }
3209 -.components-text-control__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3210 -.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3211 -.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3212 -.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3213 -.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3214 -.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3215 -.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3216 -.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3217 -.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3218 -.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3219 -.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3220 -.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3221 -.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
3222 -.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
3177 +.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
3178 +.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
3179 +.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
3180 +.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
3181 +.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
3182 +.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
3183 +.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
3184 +.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
3185 +.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
3186 +.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
3187 +.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
3188 +.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
3189 +.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
3190 +.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
3223 3191 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
3224 3192 }
3225 3193 .components-text-control__input:focus,
3226 3194 .components-text-control__input[type=text]:focus,
@@ -3311,8 +3279,9 @@
3311 3279 }
3312 3280
3313 3281 .components-toggle-control__label {
3314 3282 line-height: 16px;
3283 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3315 3284 }
3316 3285 .components-toggle-control__label:not(.is-disabled) {
3317 3286 cursor: var(--wpds-cursor-control, pointer);
3318 3287 }