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.css b/core/modules/edit/css/edit.base.css similarity index 59% rename from core/modules/edit/css/edit.css rename to core/modules/edit/css/edit.base.css index 6a5ac83..564f291 100644 --- a/core/modules/edit/css/edit.css +++ b/core/modules/edit/css/edit.base.css @@ -1,78 +1,4 @@ /** - * 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 @@ -89,6 +15,7 @@ } .edit-field.edit-editable, .edit-field .edit-editable { + -webkit-box-shadow: 0 0 1px 1px #4d9de9; box-shadow: 0 0 1px 1px #4d9de9; } @@ -100,18 +27,19 @@ .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 { @@ -122,30 +50,29 @@ } - - /** * Edit mode: modal. */ -#edit_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 { +.edit-modal .main { font-size: 130%; margin: 25px; padding-left: 40px; background: transparent url('../images/attention.png') no-repeat; } -#edit_modal .actions { +.edit-modal .actions { border-top: 1px solid #ddd; padding: 3px inherit; text-align: right; @@ -153,8 +80,6 @@ } - - /** * Edit mode: type=direct. */ @@ -169,13 +94,12 @@ 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. */ @@ -186,6 +110,7 @@ .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; @@ -204,8 +129,6 @@ .edit-form input { max-width: 100%; } - - /** * Edit mode: toolbars */ @@ -236,6 +159,7 @@ 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; @@ -293,11 +217,10 @@ } - /** * Edit mode: buttons (in both modal and toolbar). */ -#edit_modal button, +.edit-modal button, .edit-toolbar button { float: left; /* LTR */ display: block; @@ -312,61 +235,8 @@ font-size: 13px; cursor: pointer; } -#edit_modal button { +.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..72ecfa4 --- /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: 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: 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 += '