diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 5533110d815f9..82b7359eb832a 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -328,6 +328,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro text: l10n.deletePermanently, controller: this.controller, priority: -55, + size: '', click: function() { var removed = [], destroy = [], diff --git a/src/js/media/views/button/delete-selected.js b/src/js/media/views/button/delete-selected.js index b5ad9f8d3b14f..04be114079406 100644 --- a/src/js/media/views/button/delete-selected.js +++ b/src/js/media/views/button/delete-selected.js @@ -41,6 +41,9 @@ DeleteSelected = Button.extend(/** @lends wp.media.view.DeleteSelectedButton.pro render: function() { Button.prototype.render.apply( this, arguments ); + this.model.set( { + size: '' + } ); if ( this.controller.isModeActive( 'select' ) ) { this.$el.addClass( 'delete-selected-button' ); } else { diff --git a/src/js/media/views/button/select-mode-toggle.js b/src/js/media/views/button/select-mode-toggle.js index 858c0e16cb2e4..9bd21b50346c7 100644 --- a/src/js/media/views/button/select-mode-toggle.js +++ b/src/js/media/views/button/select-mode-toggle.js @@ -40,7 +40,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto render: function() { Button.prototype.render.apply( this, arguments ); - this.$el.addClass( 'select-mode-toggle-button button-compact' ); + this.$el.addClass( 'select-mode-toggle-button' ); return this; }, @@ -52,7 +52,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto // @todo The Frame should be doing all of this. if ( this.controller.isModeActive( 'select' ) ) { this.model.set( { - size: 'large', + size: '', text: l10n.cancel } ); children.not( '.spinner, .media-button' ).hide(); diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 313666e3ded73..e5a979182a134 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -65,7 +65,8 @@ span.wp-media-buttons-icon:before { .media-modal .delete-attachment, .media-modal .trash-attachment, .media-modal .untrash-attachment, -.wp-core-ui .button-link-delete { +/* Needs higher specificity to override the default button-link. */ +.wp-core-ui .button-link-delete.button-link-delete { color: tokens.$alert-red; } @@ -75,8 +76,9 @@ span.wp-media-buttons-icon:before { .media-modal .delete-attachment:focus, .media-modal .trash-attachment:focus, .media-modal .untrash-attachment:focus, -.wp-core-ui .button-link-delete:hover, -.wp-core-ui .button-link-delete:focus { +/* Need higher specificity to override the default button-link. */ +.wp-core-ui .button-link-delete.button-link-delete:hover, +.wp-core-ui .button-link-delete.button-link-delete:focus { color: color.adjust(tokens.$alert-red, $lightness: 10%); } @@ -158,7 +160,7 @@ input[type="radio"]:focus { .wp-core-ui { /* Default button - theme color border and text (matches secondary) */ - .button { + .button:not(.button-link) { @include mixins.button-secondary(); } diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index dbce2c705995c..8b77b749ef7cd 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -557,6 +557,7 @@ border color while dragging a file over the uploader drop area */ .media-frame.mode-grid .media-toolbar { margin-bottom: 15px; height: auto; + min-height: 80px; } .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) {