diff --git a/core/modules/edit/css/edit.base-rtl.css b/core/modules/edit/css/edit.base-rtl.css new file mode 100644 index 0000000..18176aa --- /dev/null +++ b/core/modules/edit/css/edit.base-rtl.css @@ -0,0 +1,28 @@ +/** + * @file edit.module-rtl.css + * RTL styles for edit module + */ + +/* The toolbar contains toolgroups; these are visible. */ +.edit-toolgroup { + float: right; +} + +/* Info toolgroup. */ +.edit-toolgroup.info { + float: right; +} + +/* Operations toolgroup. */ +.edit-toolgroup.ops { + float: left; +} + +/** + * Edit mode: buttons (in both modal and toolbar). + */ +#edit_modal button, +.edit-toolbar button { + float: right; +} + diff --git a/core/modules/edit/css/edit.base.css b/core/modules/edit/css/edit.base.css new file mode 100644 index 0000000..564f291 --- /dev/null +++ b/core/modules/edit/css/edit.base.css @@ -0,0 +1,242 @@ +/** + * Candidate editables + editables being edited. + * + * Note: every class is prefixed with "edit-" to prevent collisions with modules + * or themes. In IPE-specific DOM subtrees, this is not necessary. + */ + +/* Editable. */ +.edit-editable { + z-index: 300; + position: relative; +} +.edit-editable:focus { + outline: none; +} +.edit-field.edit-editable, +.edit-field .edit-editable { + -webkit-box-shadow: 0 0 1px 1px #4d9de9; + box-shadow: 0 0 1px 1px #4d9de9; +} + +/* Highlighted (hovered) editable. */ +.edit-editable.edit-highlighted { + z-index: 305; + min-width: 200px; +} +.edit-field.edit-editable.edit-highlighted, +.edit-form.edit-editable.edit-highlighted, +.edit-field .edit-editable.edit-highlighted { + -webkit-box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); +} +.edit-field.edit-editable.edit-highlighted.edit-validation-error, +.edit-form.edit-editable.edit-highlighted.edit-validation-error, +.edit-field .edit-editable.edit-highlighted.edit-validation-error { + -webkit-box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); +} +.edit-form.edit-editable .form-item .error { + border: 1px solid #eea0a0; +} + +/* Editing (focused) editable. */ +.edit-form.edit-editable.edit-editing, +.edit-field .edit-editable.edit-editing { + /* In the latest design, there's no special styling when editing as opposed to + * just hovering. + * This will be necessary again for http://drupal.org/node/1844220. + */ +} + + +/** + * Edit mode: modal. + */ +.edit-modal { + z-index: 350; + position: fixed; + top: 40%; + left: 40%; + -webkit-box-shadow: 3px 3px 5px #333; + box-shadow: 3px 3px 5px #333; + background-color: white; + border: 1px solid #0199ff; + font-family: 'Droid sans', 'Lucida Grande', sans-serif; +} + +.edit-modal .main { + font-size: 130%; + margin: 25px; + padding-left: 40px; + background: transparent url('../images/attention.png') no-repeat; +} + +.edit-modal .actions { + border-top: 1px solid #ddd; + padding: 3px inherit; + text-align: right; + background: #f5f5f5; +} + + +/** + * Edit mode: type=direct. + */ +.edit-validation-errors { + z-index: 300; + position: relative; +} + +.edit-validation-errors .messages.error { + position: absolute; + top: 6px; + left: -5px; + margin: 0; + border: none; + -webkit-box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); + background-color: white; +} + + +/** + * Edit mode: type=form. + */ +#edit_backstage { + display: none; +} + +.edit-form { + position: absolute; + z-index: 300; + -webkit-box-shadow: 0 0 30px 4px #4f4f4f; + box-shadow: 0 0 30px 4px #4f4f4f; + max-width: 35em; + background-color: white; +} + +.edit-form .placeholder { + min-height: 22px; +} + +/* Default form styling overrides. */ +.edit-form form { padding: 1em; } +.edit-form .form-item { margin: 0; } +.edit-form .form-wrapper { margin: .5em; } +.edit-form .form-wrapper .form-wrapper { margin: inherit; } +.edit-form .form-actions { display: none; } +.edit-form input { max-width: 100%; } + + +/** + * Edit mode: toolbars + */ + +/* Trick: wrap statically positioned elements in relatively positioned element + without changing its location. This allows us to absolutely position the + toolbar. +*/ +.edit-toolbar-container, +.edit-form-container { + position: relative; + padding: 0; + border: 0; + margin: 0; + vertical-align: baseline; + z-index: 310; +} +.edit-toolbar-container { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.edit-toolbar-heightfaker { + height: auto; + position: absolute; + bottom: 1px; + -webkit-box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); + background: #fff; + display: none; +} +.edit-highlighted .edit-toolbar-heightfaker { + display: block; +} + +/* The toolbar; these are not necessarily visible. */ +.edit-toolbar { + position: relative; + height: 100%; + font-family: 'Droid sans', 'Lucida Grande', sans-serif; +} +.edit-toolbar-heightfaker { + clip: rect(-1000px, 1000px, auto, -1000px); /* Remove bottom box-shadow. */ +} +/* Exception: when the toolbar is instructed to be "full width". */ +.edit-toolbar-fullwidth .edit-toolbar-heightfaker { + width: 100%; + clip: auto; +} + + +/* The toolbar contains toolgroups; these are visible. */ +.edit-toolgroup { + float: left; /* LTR */ +} + +/* Info toolgroup. */ +.edit-toolgroup.info { + float: left; /* LTR */ + font-weight: bolder; + padding: 0 5px; + background: #fff url('../images/throbber.gif') no-repeat -60px 60px; +} +.edit-toolgroup.info.loading { + padding-right: 35px; + background-position: 90% 50%; +} + +/* Operations toolgroup. */ +.edit-toolgroup.ops { + float: right; /* LTR */ + margin-left: 5px; +} + +.edit-toolgroup.wysiwyg-floated { + float: right; +} +.edit-toolgroup.wysiwyg-main { + clear: left; + width: 100%; + padding-left: 0; +} + + +/** + * Edit mode: buttons (in both modal and toolbar). + */ +.edit-modal button, +.edit-toolbar button { + float: left; /* LTR */ + display: block; + height: 29px; + min-width: 29px; + padding: 3px 6px 6px 6px; + margin: 4px 5px 1px 0; + border: 1px solid #fff; + border-radius: 3px; + color: white; + text-decoration: none; + font-size: 13px; + cursor: pointer; +} +.edit-modal button { + float: none; + display: inline-block; +} + diff --git a/core/modules/edit/css/edit.css b/core/modules/edit/css/edit.css deleted file mode 100644 index 6a5ac83..0000000 --- a/core/modules/edit/css/edit.css +++ /dev/null @@ -1,372 +0,0 @@ -/** - * Animations. - */ -.edit-animate-invisible { - opacity: 0; -} - -.edit-animate-fast { --webkit-transition: all .2s ease; - -moz-transition: all .2s ease; - -ms-transition: all .2s ease; - -o-transition: all .2s ease; - transition: all .2s ease; -} - -.edit-animate-default { - -webkit-transition: all .4s ease; - -moz-transition: all .4s ease; - -ms-transition: all .4s ease; - -o-transition: all .4s ease; - transition: all .4s ease; -} - -.edit-animate-slow { --webkit-transition: all .6s ease; - -moz-transition: all .6s ease; - -ms-transition: all .6s ease; - -o-transition: all .6s ease; - transition: all .6s ease; -} - -.edit-animate-delay-veryfast { - -webkit-transition-delay: .05s; - -moz-transition-delay: .05s; - -ms-transition-delay: .05s; - -o-transition-delay: .05s; - transition-delay: .05s; -} - -.edit-animate-delay-fast { - -webkit-transition-delay: .2s; - -moz-transition-delay: .2s; - -ms-transition-delay: .2s; - -o-transition-delay: .2s; - transition-delay: .2s; -} - -.edit-animate-disable-width { - -webkit-transition: width 0s; - -moz-transition: width 0s; - -ms-transition: width 0s; - -o-transition: width 0s; - transition: width 0s; -} - -.edit-animate-only-visibility { - -webkit-transition: opacity .2s ease; - -moz-transition: opacity .2s ease; - -ms-transition: opacity .2s ease; - -o-transition: opacity .2s ease; - transition: opacity .2s ease; -} - -.edit-animate-only-background-and-padding { - -webkit-transition: background, padding .2s ease; - -moz-transition: background, padding .2s ease; - -ms-transition: background, padding .2s ease; - -o-transition: background, padding .2s ease; - transition: background, padding .2s ease; -} - - - - -/** - * Candidate editables + editables being edited. - * - * Note: every class is prefixed with "edit-" to prevent collisions with modules - * or themes. In IPE-specific DOM subtrees, this is not necessary. - */ - -/* Editable. */ -.edit-editable { - z-index: 300; - position: relative; -} -.edit-editable:focus { - outline: none; -} -.edit-field.edit-editable, -.edit-field .edit-editable { - box-shadow: 0 0 1px 1px #4d9de9; -} - -/* Highlighted (hovered) editable. */ -.edit-editable.edit-highlighted { - z-index: 305; - min-width: 200px; -} -.edit-field.edit-editable.edit-highlighted, -.edit-form.edit-editable.edit-highlighted, -.edit-field .edit-editable.edit-highlighted { - box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); -} -.edit-field.edit-editable.edit-highlighted.edit-validation-error, -.edit-form.edit-editable.edit-highlighted.edit-validation-error, -.edit-field .edit-editable.edit-highlighted.edit-validation-error { - box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); -} -.edit-form.edit-editable .form-item .error { - border: 1px solid #eea0a0; -} - - -/* Editing (focused) editable. */ -.edit-form.edit-editable.edit-editing, -.edit-field .edit-editable.edit-editing { - /* In the latest design, there's no special styling when editing as opposed to - * just hovering. - * This will be necessary again for http://drupal.org/node/1844220. - */ -} - - - - -/** - * Edit mode: modal. - */ -#edit_modal { - z-index: 350; - position: fixed; - top: 40%; - left: 40%; - box-shadow: 3px 3px 5px #333; - background-color: white; - border: 1px solid #0199ff; - font-family: 'Droid sans', 'Lucida Grande', sans-serif; -} - -#edit_modal .main { - font-size: 130%; - margin: 25px; - padding-left: 40px; - background: transparent url('../images/attention.png') no-repeat; -} - -#edit_modal .actions { - border-top: 1px solid #ddd; - padding: 3px inherit; - text-align: right; - background: #f5f5f5; -} - - - - -/** - * Edit mode: type=direct. - */ -.edit-validation-errors { - z-index: 300; - position: relative; -} - -.edit-validation-errors .messages.error { - position: absolute; - top: 6px; - left: -5px; - margin: 0; - border: none; - box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); - background-color: white; -} - - - - -/** - * Edit mode: type=form. - */ -#edit_backstage { - display: none; -} - -.edit-form { - position: absolute; - z-index: 300; - box-shadow: 0 0 30px 4px #4f4f4f; - max-width: 35em; - background-color: white; -} - -.edit-form .placeholder { - min-height: 22px; -} - -/* Default form styling overrides. */ -.edit-form form { padding: 1em; } -.edit-form .form-item { margin: 0; } -.edit-form .form-wrapper { margin: .5em; } -.edit-form .form-wrapper .form-wrapper { margin: inherit; } -.edit-form .form-actions { display: none; } -.edit-form input { max-width: 100%; } - - - - -/** - * Edit mode: toolbars - */ - -/* Trick: wrap statically positioned elements in relatively positioned element - without changing its location. This allows us to absolutely position the - toolbar. -*/ -.edit-toolbar-container, -.edit-form-container { - position: relative; - padding: 0; - border: 0; - margin: 0; - vertical-align: baseline; - z-index: 310; -} -.edit-toolbar-container { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} - -.edit-toolbar-heightfaker { - height: auto; - position: absolute; - bottom: 1px; - box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); - background: #fff; - display: none; -} -.edit-highlighted .edit-toolbar-heightfaker { - display: block; -} - -/* The toolbar; these are not necessarily visible. */ -.edit-toolbar { - position: relative; - height: 100%; - font-family: 'Droid sans', 'Lucida Grande', sans-serif; -} -.edit-toolbar-heightfaker { - clip: rect(-1000px, 1000px, auto, -1000px); /* Remove bottom box-shadow. */ -} -/* Exception: when the toolbar is instructed to be "full width". */ -.edit-toolbar-fullwidth .edit-toolbar-heightfaker { - width: 100%; - clip: auto; -} - - -/* The toolbar contains toolgroups; these are visible. */ -.edit-toolgroup { - float: left; /* LTR */ -} - -/* Info toolgroup. */ -.edit-toolgroup.info { - float: left; /* LTR */ - font-weight: bolder; - padding: 0 5px; - background: #fff url('../images/throbber.gif') no-repeat -60px 60px; -} -.edit-toolgroup.info.loading { - padding-right: 35px; - background-position: 90% 50%; -} - -/* Operations toolgroup. */ -.edit-toolgroup.ops { - float: right; /* LTR */ - margin-left: 5px; -} - -.edit-toolgroup.wysiwyg-floated { - float: right; -} -.edit-toolgroup.wysiwyg-main { - clear: left; - width: 100%; - padding-left: 0; -} - - - -/** - * Edit mode: buttons (in both modal and toolbar). - */ -#edit_modal button, -.edit-toolbar button { - float: left; /* LTR */ - display: block; - height: 29px; - min-width: 29px; - padding: 3px 6px 6px 6px; - margin: 4px 5px 1px 0; - border: 1px solid #fff; - border-radius: 3px; - color: white; - text-decoration: none; - font-size: 13px; - cursor: pointer; -} -#edit_modal button { - float: none; - display: inline-block; -} - -/* Button with icons. */ -#edit_modal button span, -.edit-toolbar button span { - width: 22px; - height: 19px; - display: block; - float: left; -} -.edit-toolbar span.close { - background: url('../images/close.png') no-repeat 3px 2px; - text-indent: -999em; - direction: ltr; -} - -.edit-toolbar button.blank-button { - color: black; - background-color: #fff; - font-weight: bolder; -} - -#edit_modal button.blue-button, -.edit-toolbar button.blue-button { - color: white; - background-image: -webkit-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); - background-image: -moz-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); - background-image: linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); - border-radius: 5px; -} - -#edit_modal button.gray-button, -.edit-toolbar button.gray-button { - color: #666; - background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ccc 100%); - background-image: -moz-linear-gradient(top, #f5f5f5 0%, #ccc 100%); - background-image: linear-gradient(top, #f5f5f5 0%, #ccc 100%); - border-radius: 5px; -} - -#edit_modal button.blue-button:hover, -.edit-toolbar button.blue-button:hover, -#edit_modal button.blue-button:active, -.edit-toolbar button.blue-button:active { - border: 1px solid #55a5d3; - box-shadow: 0 2px 1px rgba(0,0,0,0.2); -} - -#edit_modal button.gray-button:hover, -.edit-toolbar button.gray-button:hover, -#edit_modal button.gray-button:active, -.edit-toolbar button.gray-button:active { - border: 1px solid #cdcdcd; - box-shadow: 0 2px 1px rgba(0,0,0,0.1); -} diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css new file mode 100644 index 0000000..e9464ca --- /dev/null +++ b/core/modules/edit/css/edit.icons.css @@ -0,0 +1,57 @@ +/** + * @file edit.icons.css + * Styles for the edit module buttons with icons. + */ + +/* Button with icons. */ +.edit-modal button span, +.edit-toolbar button span { + width: 22px; + height: 19px; + display: block; + float: left; +} +.edit-toolbar span.close { + background: url('../images/close.png') no-repeat 3px 2px; + text-indent: -999em; + direction: ltr; +} + +.edit-toolbar button.blank-button { + color: black; + background-color: #fff; + font-weight: bolder; +} + +.edit-modal button.blue-button, +.edit-toolbar button.blue-button { + color: white; + background-image: -webkit-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); + background-image: -moz-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%); + border-radius: 5px; +} + +.edit-modal button.gray-button, +.edit-toolbar button.gray-button { + color: #666; + background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ccc 100%); + background-image: -moz-linear-gradient(top, #f5f5f5 0%, #ccc 100%); + border-radius: 5px; +} + +.edit-modal button.blue-button:hover, +.edit-toolbar button.blue-button:hover, +.edit-modal button.blue-button:active, +.edit-toolbar button.blue-button:active { + border: 1px solid #55a5d3; + -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.2); + box-shadow: 0 2px 1px rgba(0,0,0,0.2); +} + +.edit-modal button.gray-button:hover, +.edit-toolbar button.gray-button:hover, +.edit-modal button.gray-button:active, +.edit-toolbar button.gray-button:active { + border: 1px solid #cdcdcd; + -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); +} diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css new file mode 100644 index 0000000..2e8a346 --- /dev/null +++ b/core/modules/edit/css/edit.theme.css @@ -0,0 +1,48 @@ +/** + * Animations. + */ +.edit-animate-invisible { + filter: alpha(opacity=0); + opacity: 0; +} + +.edit-animate-fast { + -webkit-transition: all .2s ease; + transition: all .2s ease; +} + +.edit-animate-default { + -webkit-transition: all .4s ease; + transition: all .4s ease; +} + +.edit-animate-slow { + -webkit-transition: all .6s ease; + transition: all .6s ease; +} + +.edit-animate-delay-veryfast { + -webkit-transition-delay: .05s; + transition-delay: .05s; +} + +.edit-animate-delay-fast { + -webkit-transition-delay: .2s; + transition-delay: .2s; +} + +.edit-animate-disable-width { + -webkit-transition: width 0s; + transition: width 0s; +} + +.edit-animate-only-visibility { + -webkit-transition: opacity .2s ease; + transition: opacity .2s ease; +} + +.edit-animate-only-background-and-padding { + -webkit-transition: background, padding .2s ease; + transition: background, padding .2s ease; +} + diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index a6ee046..28996d0 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -103,7 +103,9 @@ function edit_library_info() { ), ), 'css' => array( - $path . '/css/edit.css' => array(), + $path . '/css/edit.base.css' => array(), + $path . '/css/edit.icons.css' => array(), + $path . '/css/edit.theme.css' => array(), ), 'dependencies' => array( array('system', 'jquery'), diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js index 7bef553..2739888 100644 --- a/core/modules/edit/js/theme.js +++ b/core/modules/edit/js/theme.js @@ -48,7 +48,7 @@ Drupal.theme.editBackstage = function(settings) { Drupal.theme.editModal = function(settings) { var classes = 'edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast'; var html = ''; - html += '