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 60% rename from core/modules/edit/css/edit.css rename to core/modules/edit/css/edit.base.css index 6a5ac83..386c42c 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,8 @@ } .edit-field.edit-editable, .edit-field .edit-editable { + -moz-box-shadow: 0 0 1px 1px #4d9de9; + -webkit-box-shadow: 0 0 1px 1px #4d9de9; box-shadow: 0 0 1px 1px #4d9de9; } @@ -100,18 +28,21 @@ .edit-field.edit-editable.edit-highlighted, .edit-form.edit-editable.edit-highlighted, .edit-field .edit-editable.edit-highlighted { + -moz-box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); + -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 { + -moz-box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); + -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,8 +53,6 @@ } - - /** * Edit mode: modal. */ @@ -132,6 +61,8 @@ position: fixed; top: 40%; left: 40%; + -moz-box-shadow: 3px 3px 5px #333; + -webkit-box-shadow: 3px 3px 5px #333; box-shadow: 3px 3px 5px #333; background-color: white; border: 1px solid #0199ff; @@ -153,8 +84,6 @@ } - - /** * Edit mode: type=direct. */ @@ -169,13 +98,13 @@ left: -5px; margin: 0; border: none; + -moz-box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5); + -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 +115,8 @@ .edit-form { position: absolute; z-index: 300; + -moz-box-shadow: 0 0 30px 4px #4f4f4f; + -webkit-box-shadow: 0 0 30px 4px #4f4f4f; box-shadow: 0 0 30px 4px #4f4f4f; max-width: 35em; background-color: white; @@ -204,8 +135,6 @@ .edit-form input { max-width: 100%; } - - /** * Edit mode: toolbars */ @@ -236,6 +165,8 @@ height: auto; position: absolute; bottom: 1px; + -moz-box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5); + -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,7 +224,6 @@ } - /** * Edit mode: buttons (in both modal and toolbar). */ @@ -306,6 +236,8 @@ padding: 3px 6px 6px 6px; margin: 4px 5px 1px 0; border: 1px solid #fff; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; border-radius: 3px; color: white; text-decoration: none; @@ -317,56 +249,3 @@ 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..e0de5b6 --- /dev/null +++ b/core/modules/edit/css/edit.icons.css @@ -0,0 +1,63 @@ +/** + * @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%); + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + 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%); + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + 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; + -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.2); + -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; + -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.1); + -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..7ffc0da --- /dev/null +++ b/core/modules/edit/css/edit.theme.css @@ -0,0 +1,75 @@ +/** + * Animations. + */ +.edit-animate-invisible { + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -moz-opacity: 0; + -khtml-opacity: 0; + 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; +} +