diff --git a/core/modules/quickedit/css/quickedit.icons.theme.css b/core/modules/quickedit/css/quickedit.icons.theme.css index 7845416..fd55636 100644 --- a/core/modules/quickedit/css/quickedit.icons.theme.css +++ b/core/modules/quickedit/css/quickedit.icons.theme.css @@ -3,22 +3,23 @@ * Icons for Quick Edit module. */ -.quickedit .icon { +.quickedit-icon { min-height: 1em; min-width: 2.5em; position: relative; } -.quickedit .icon.icon-only { +.quickedit-icon--only { text-indent: -9999px; + direction: ltr; } -.quickedit .icon.icon-end { +.quickedit-icon--end { padding-right: 2.5em; /* LTR */ } -[dir="rtl"] .quickedit .icon.icon-end { +[dir="rtl"] .quickedit-icon--end { padding-left: 2.5em; padding-right: 0; } -.quickedit .icon:before { +.quickedit-icon:before { background-attachment: scroll; background-color: transparent; background-position: center center; @@ -31,43 +32,37 @@ top: 0; width: 100%; } -[dir="rtl"] .quickedit .icon:before { +[dir="rtl"] .quickedit-icon:before { left: auto; right: 0; } -.quickedit .icon-end:before { +.quickedit-icon--end:before { left: auto; /* LTR */ right: 0.5em; /* LTR */ width: 18px; } -[dir="rtl"] .quickedit .icon-end:before { +[dir="rtl"] .quickedit-icon--end:before { left: 0.5em; right: auto; } -.quickedit button.icon { - font-size: 1em; -} -.quickedit .icon-pencil { - margin-left: .5em; +.quickedit-icon--pencil { + margin-left: 0.5em; padding-left: 1.5em; } -/** - * Images. - */ -.quickedit .icon-close:before { +.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-icon--close:hover:before, +.quickedit-icon--close:active:before { background-image: url(../../../misc/icons/000000/ex.svg); } -.quickedit .icon-throbber:before { +.quickedit-icon--throbber:before { background-image: url(../images/icon-throbber.gif); } -.quickedit .icon-pencil:before { +.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..a801d28 100644 --- a/core/modules/quickedit/css/quickedit.module.css +++ b/core/modules/quickedit/css/quickedit.module.css @@ -7,59 +7,45 @@ * necessary. */ -/** - * Editable. - */ +/* Editable. */ .quickedit-editable { z-index: 98; position: relative; cursor: pointer; } -.quickedit-editable:focus { - outline: none; -} -/** - * Highlighted (hovered) editable. - */ +/* Highlighted (hovered) editable. */ .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; } -/** - * In-place editors that don't use a popup. - */ -.quickedit-validation-errors { +/* In-place editors that don't use a popup. */ +.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; } -/** - * Styling specific to the 'form' in-place editor. - */ -#quickedit_backstage { - display: none; -} +/* Styling specific to the 'form' in-place editor. */ .quickedit-form { position: absolute; z-index: 300; @@ -69,9 +55,7 @@ min-height: 22px; } -/** - * Default form styling overrides. - */ +/* Default form styling overrides. */ .quickedit-form .form-wrapper .form-wrapper { margin: inherit; } @@ -82,18 +66,15 @@ max-width: 100%; } -/** - * Entity toolbar. - */ -.quickedit-toolbar-container { +/* Entity toolbar. */ +.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 +85,16 @@ vertical-align: baseline; z-index: 100; } -.quickedit-toolgroup.ops { +.quickedit-toolgroup--ops { float: right; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.ops { +[dir="rtl"] .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..8e98762 100644 --- a/core/modules/quickedit/css/quickedit.theme.css +++ b/core/modules/quickedit/css/quickedit.theme.css @@ -3,41 +3,32 @@ * Styling for Quick Edit module. */ -/** - * Editable. - */ -.quickedit-field.quickedit-editable, -.quickedit-field .quickedit-editable { +/* Editable. */ +.quickedit-editable { box-shadow: 0 0 0 2px #74b7ff; } -/** - * Highlighted (hovered) editable. - */ -.quickedit-field.quickedit-highlighted, -.quickedit-form.quickedit-highlighted, -.quickedit-field .quickedit-highlighted { +/* Highlighted (hovered) editable. */ +.quickedit-highlighted, +.quickedit-form.quickedit-highlighted { box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff; } -.quickedit-field.quickedit-changed, -.quickedit-form.quickedit-changed, -.quickedit-field .quickedit-changed { +.quickedit-changed, +.quickedit-form.quickedit-changed { box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a; } .quickedit-editing.quickedit-validation-error, .quickedit-form.quickedit-validation-error { - box-shadow: 0 0 0px 1px #ee8b74, 0 0 0 2px #fa2209; + box-shadow: 0 0 0 1px #ee8b74, 0 0 0 2px #fa2209; } -.quickedit-editing.quickedit-editor-is-popup { +.quickedit-editor-is-popup { box-shadow: none; } .quickedit-form .form-item .error { border: 1px solid #eea0a0; } -/** - * Default form styling overrides. - */ +/* Default form styling overrides. */ .quickedit-form form { padding: 0.5em; } @@ -45,67 +36,59 @@ margin: 0; } .quickedit-form .form-wrapper { - margin: .5em; + margin: 0.5em; } -/** - * Animations. - */ -.quickedit-animate-invisible { +/* Animations. */ +.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); +/* 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, 0.5); background-color: white; } -/** - * Styling specific to the 'form' in-place editor. - */ +/* Styling specific to the 'form' in-place editor. */ .quickedit-form { box-shadow: 0 0 30px 4px #4f4f4f; background-color: white; } -/** - * Toolbars. - */ -.quickedit-toolbar-container { +/* Toolbars. */ +.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,10 +101,10 @@ 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); + box-shadow: 0 0 0 1px #818181, 0 0 0 4px rgba(150, 150, 150, 0.5); display: block; height: 16px; left: 18px; /* LTR */ @@ -132,17 +115,17 @@ 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); + box-shadow: 0 0 0 1px #818181, 0 3px 0 1px rgba(150, 150, 150, 0.5); display: block; left: 0; position: absolute; @@ -150,18 +133,16 @@ top: 7px; 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 */ } - [dir="rtl"] .quickedit-toolbar-label .field:after { content: ' ← '; } @@ -170,35 +151,31 @@ .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 { +/* Info toolgroup. */ +.quickedit-toolbar--fullwidth { width: 100%; } -.quickedit-toolgroup.wysiwyg-floated { +.quickedit-toolbar__wysiwyg-floated { float: right; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.wysiwyg-floated { +[dir="rtl"] .quickedit-toolbar__wysiwyg-floated { float: left; } -.quickedit-toolgroup.wysiwyg-main { +.quickedit-toolbar__wysiwyg-main { clear: both; width: 100%; padding-left: 0; /* LTR */ } -[dir="rtl"] .quickedit-toolgroup.wysiwyg-main { +[dir="rtl"] .quickedit-toolbar__wysiwyg-main { padding-left: 0; padding-right: 0; } -/** - * Buttons. - */ +/* Buttons. */ .quickedit-button { background-color: #e4e4e4; border: 1px solid #d2d2d2; @@ -208,10 +185,10 @@ 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"] { +.quickedit .quickedit-button[aria-hidden="true"] { visibility: hidden; opacity: 0; } @@ -222,31 +199,28 @@ margin-left: auto; margin-right: 0.25em; } + /* Button with icons. */ -.quickedit-button:hover, -.quickedit-button:active { - background-color: #c8c8c8; - border: 1px solid #a0a0a0; - color: #2e2e2e; -} -.quickedit-toolbar-container .quickedit-button.action-cancel { +.quickedit-button--cancel { background-color: transparent; border: 1px solid transparent; } -.quickedit-button.action-save { +.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--save:hover, +.quickedit-button--save:active { + background-image: -webkit-linear-gradient(top,#007bc6,#0071b8); + background-image: linear-gradient(to bottom,#007bc6,#0071b8); border: 1px solid #a0a0a0; } -.quickedit-button.action-saving, -.quickedit-button.action-saving:hover, -.quickedit-button.action-saving:active { +.quickedit-button--saving, +.quickedit-button--saving:hover, +.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 49fc6f0..2f28895 100644 --- a/core/modules/quickedit/js/editors/formEditor.js +++ b/core/modules/quickedit/js/editors/formEditor.js @@ -246,7 +246,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 93dc3f2..6a0a09d 100644 --- a/core/modules/quickedit/js/theme.js +++ b/core/modules/quickedit/js/theme.js @@ -37,14 +37,14 @@ */ Drupal.theme.quickeditEntityToolbar = function (settings) { var html = ''; - html += '