diff --git a/core/modules/quickedit/css/quickedit.icons.theme.css b/core/modules/quickedit/css/quickedit.icons.theme.css index 7845416..ced33b7 100644 --- a/core/modules/quickedit/css/quickedit.icons.theme.css +++ b/core/modules/quickedit/css/quickedit.icons.theme.css @@ -3,22 +3,22 @@ * Icons for Quick Edit module. */ -.quickedit .icon { +.quickedit .quickedit-icon { min-height: 1em; min-width: 2.5em; position: relative; } -.quickedit .icon.icon-only { +.quickedit .quickedit-icon.quickedit-icon--only { text-indent: -9999px; } -.quickedit .icon.icon-end { +.quickedit .quickedit-icon.quickedit-icon--end { padding-right: 2.5em; /* LTR */ } -[dir="rtl"] .quickedit .icon.icon-end { +[dir="rtl"] .quickedit .quickedit-icon.quickedit-icon--end { padding-left: 2.5em; padding-right: 0; } -.quickedit .icon:before { +.quickedit .quickedit-icon:before { background-attachment: scroll; background-color: transparent; background-position: center center; @@ -31,43 +31,40 @@ top: 0; width: 100%; } -[dir="rtl"] .quickedit .icon:before { +[dir="rtl"] .quickedit .quickedit-icon:before { left: auto; right: 0; } -.quickedit .icon-end:before { +.quickedit .quickedit-icon--end:before { left: auto; /* LTR */ right: 0.5em; /* LTR */ width: 18px; } -[dir="rtl"] .quickedit .icon-end:before { +[dir="rtl"] .quickedit .quickedit-icon--end:before { left: 0.5em; right: auto; } -.quickedit button.icon { +.quickedit button.quickedit-icon { font-size: 1em; } -.quickedit .icon-pencil { - margin-left: .5em; +.quickedit .quickedit-icon--pencil { + margin-left: 0.5em; padding-left: 1.5em; } -/** - * Images. - */ -.quickedit .icon-close:before { +.quickedit .quickedit-icon--close:before { background-image: url(../../../misc/icons/787878/ex.svg); height: 12px; top: 10px; } -.quickedit .icon-close:hover:before, -.quickedit .icon-close:active:before { +.quickedit .quickedit-icon--close:hover:before, +.quickedit .quickedit-icon--close:active:before { background-image: url(../../../misc/icons/000000/ex.svg); } -.quickedit .icon-throbber:before { +.quickedit .quickedit-icon--throbber:before { background-image: url(../images/icon-throbber.gif); } -.quickedit .icon-pencil:before { +.quickedit .quickedit-icon--pencil:before { background-image: url(../../../misc/icons/5181c6/pencil.svg); background-position: left center; background-size: 1.3em; diff --git a/core/modules/quickedit/css/quickedit.module.css b/core/modules/quickedit/css/quickedit.module.css index 8ac9a55..bc9e8b1 100644 --- a/core/modules/quickedit/css/quickedit.module.css +++ b/core/modules/quickedit/css/quickedit.module.css @@ -25,11 +25,11 @@ .quickedit-editable.quickedit-highlighted { z-index: 99; } -.quickedit-validation-errors > .messages { +.quickedit__validation-errors > .messages { margin-left: 0; margin-right: 0; } -.quickedit-validation-errors > .messages > ul { +.quickedit__validation-errors > .messages > ul { list-style: none; margin: 0; padding: 0; @@ -38,18 +38,18 @@ /** * In-place editors that don't use a popup. */ -.quickedit-validation-errors { +.quickedit__validation-errors { z-index: 300; position: relative; } -.quickedit-validation-errors .messages.error { +.quickedit__validation-errors .messages.error { position: absolute; top: 6px; left: -5px; /* LTR */ margin: 0; border: none; } -[dir="rtl"] .quickedit-validation-errors .messages.error { +[dir="rtl"] .quickedit__validation-errors .messages.error { left: auto; right: -5px; } @@ -57,9 +57,6 @@ /** * Styling specific to the 'form' in-place editor. */ -#quickedit_backstage { - display: none; -} .quickedit-form { position: absolute; z-index: 300; @@ -85,15 +82,15 @@ /** * Entity toolbar. */ -.quickedit-toolbar-container { +.quickedit-toolbar__container { max-width: 100%; position: absolute; max-width: 320px; width: 320px; z-index: 100; } -.quickedit-toolbar-container > .quickedit-toolbar-pointer, -.quickedit-toolbar-container > .quickedit-toolbar-lining { +.quickedit-toolbar__container > .quickedit-toolbar__pointer, +.quickedit-toolbar__container > .quickedit-toolbar__lining { display: none; } .quickedit-form-container { @@ -104,16 +101,16 @@ vertical-align: baseline; z-index: 100; } -.quickedit-toolgroup.ops { +.quickedit-toolgroup.quickedit-toolgroup--ops { float: right; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.ops { +[dir="rtl"] .quickedit-toolgroup.quickedit-toolgroup--ops { float: left; } -.quickedit-toolbar-label { +.quickedit-toolbar__label { overflow: hidden; } -#quickedit-toolbar-fence { +.quickedit-fence { bottom: 0; left: 0; right: 0; diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css index 399db7a..08e009a 100644 --- a/core/modules/quickedit/css/quickedit.theme.css +++ b/core/modules/quickedit/css/quickedit.theme.css @@ -45,45 +45,45 @@ margin: 0; } .quickedit-form .form-wrapper { - margin: .5em; + margin: 0.5em; } /** * Animations. */ -.quickedit-animate-invisible { +.quickedit-toolgroup.animate-invisible { opacity: 0; } -.quickedit-animate-default { - -webkit-transition: all .4s ease; - transition: all .4s ease; +.quickedit-toolgroup.animate-default { + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; } -.quickedit-animate-slow { - -webkit-transition: all .6s ease; - transition: all .6s ease; +.quickedit-toolgroup.animate-slow { + -webkit-transition: all 0.6s ease; + transition: all 0.6s ease; } -.quickedit-animate-delay-veryfast { - -webkit-transition-delay: .05s; - transition-delay: .05s; +.quickedit-toolgroup.animate-delay-veryfast { + -webkit-transition-delay: 0.05s; + transition-delay: 0.05s; } -.quickedit-animate-delay-fast { - -webkit-transition-delay: .2s; - transition-delay: .2s; +.quickedit-toolgroup.animate-delay-fast { + -webkit-transition-delay: 0.2s; + transition-delay: 0.2s; } -.quickedit-animate-disable-width { +.quickedit-toolgroup.animate-disable-width { -webkit-transition: width 0s; transition: width 0s; } -.quickedit-animate-only-visibility { - -webkit-transition: opacity .2s ease; - transition: opacity .2s ease; +.quickedit-toolgroup.animate-only-visibility { + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } /** * In-place editors that don't use a popup. */ -.quickedit-validation-errors .messages.error { - box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); +.quickedit__validation-errors .messages.error { + box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, 0.5); background-color: white; } @@ -98,14 +98,14 @@ /** * Toolbars. */ -.quickedit-toolbar-container { +.quickedit-toolbar__container { font-family: 'Source Sans Pro','Lucida Grande', sans-serif; padding-bottom: 7px; padding-top: 7px; -webkit-transition: all 1s; transition: all 1s; } -.quickedit-toolbar-container > .quickedit-toolbar-content { +.quickedit-toolbar__container > .quickedit-toolbar__content { background-image: -webkit-linear-gradient(top, #fff, #e4e4e4); background-image: linear-gradient(to bottom, #fff, #e4e4e4); box-sizing: border-box; @@ -118,7 +118,7 @@ user-select: none; z-index: 2; } -.quickedit-toolbar-container > .quickedit-toolbar-pointer { +.quickedit-toolbar__container > .quickedit-toolbar__pointer { background-color: #e4e4e4; bottom: 2px; box-shadow: 0 0 0 1px #818181, 0px 0px 0 4px rgba(150, 150, 150, 0.5); @@ -132,15 +132,15 @@ width: 16px; z-index: 1; } -[dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer { +[dir="rtl"] .quickedit-toolbar__container > .quickedit-toolbar__pointer { left: auto; right: 18px; } -.quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer { +.quickedit-toolbar__container.quickedit-toolbar__pointer--top > .quickedit-toolbar__pointer { bottom: auto; top: 2px; } -.quickedit-toolbar-container > .quickedit-toolbar-lining { +.quickedit-toolbar__container > .quickedit-toolbar__lining { bottom: 7px; box-shadow: 0 0 0 1px #818181, 0px 3px 0px 1px rgba(150, 150, 150, 0.5); display: block; @@ -151,14 +151,14 @@ z-index: 0; } -.quickedit-toolbar-label { +.quickedit-toolbar__label { font-style: italic; overflow: hidden; padding: 0.333em 0.4em; text-overflow: ellipsis; white-space: nowrap; } -.quickedit-toolbar-label .field:after { ++.quickedit-toolbar__label .field:after { content: ' → '; /* LTR */ } @@ -170,28 +170,28 @@ .quickedit-toolbar { font-family: 'Droid sans', 'Lucida Grande', sans-serif; } -.quickedit-toolbar-entity { +.quickedit-toolbar__entity { padding: 0.1667em 0.2em; } /** * Info toolgroup. */ -.quickedit-toolbar-fullwidth { +.quickedit-toolbar--fullwidth { width: 100%; } -.quickedit-toolgroup.wysiwyg-floated { +.quickedit-toolbar .quickedit-toolbar__wysiwyg-floated { float: right; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.wysiwyg-floated { +[dir="rtl"] .quickedit-toolbar .quickedit-toolbar__wysiwyg-floated { float: left; } -.quickedit-toolgroup.wysiwyg-main { +.quickedit-toolbar .quickedit-toolbar__wysiwyg-main { clear: both; width: 100%; padding-left: 0; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.wysiwyg-main { +[dir="rtl"] .quickedit-toolbar .quickedit-toolbar__wysiwyg-main { padding-left: 0; padding-right: 0; } @@ -208,8 +208,8 @@ margin: 0; opacity: 1; padding: 0.345em; - -webkit-transition: opacity .1s ease; - transition: opacity .1s ease; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; } .quickedit-button[aria-hidden="true"] { visibility: hidden; @@ -229,24 +229,24 @@ border: 1px solid #a0a0a0; color: #2e2e2e; } -.quickedit-toolbar-container .quickedit-button.action-cancel { +.quickedit-toolbar__container .quickedit-button.quickedit-button--cancel { background-color: transparent; border: 1px solid transparent; } -.quickedit-button.action-save { +.quickedit-button.quickedit-button--save { color: white; background-color: #50a0e9; background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc); background-image: linear-gradient(to bottom, #50a0e9, #4481dc); border: 1px solid transparent; } -.quickedit-button.action-save:hover, -.quickedit-button.action-save:active { +.quickedit-button.quickedit-button--save:hover, +.quickedit-button.quickedit-button--save:active { border: 1px solid #a0a0a0; } -.quickedit-button.action-saving, -.quickedit-button.action-saving:hover, -.quickedit-button.action-saving:active { +.quickedit-button.quickedit-button--saving, +.quickedit-button.quickedit-button--saving:hover, +.quickedit-button.quickedit-button--saving:active { background-color: #e4e4e4; background-image: none; border-color: #d2d2d2; diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.js index 4a5468e..5df2746 100644 --- a/core/modules/quickedit/js/editors/formEditor.js +++ b/core/modules/quickedit/js/editors/formEditor.js @@ -244,7 +244,7 @@ showValidationErrors: function () { this.$formContainer .find('.quickedit-form') - .addClass('quickedit-validation-error') + .addClass('quickedit__validation-error') .find('form') .prepend(this.model.get('validationErrors')); } diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js index 8d47b10..af61110 100644 --- a/core/modules/quickedit/js/theme.js +++ b/core/modules/quickedit/js/theme.js @@ -35,14 +35,14 @@ */ Drupal.theme.quickeditEntityToolbar = function (settings) { var html = ''; - html += '