PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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 → trunk 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 }