Skip to content
Permalink
Browse files

Merge branch 't/13119' into major

  • Loading branch information...
oleq committed Jun 1, 2015
2 parents cb5fd3a + 14b7f0f commit 2e0eee9fc1c9af5b9df1e784d85bf4489420e655
@@ -32,6 +32,7 @@ Fixed Issues:

Other Changes:

* [#13119](http://dev.ckeditor.com/ticket/13119): Improved compatibility of editor skins ([Moono](http://ckeditor.com/addon/moono) and [Kama](http://ckeditor.com/addon/kama)) with external web page style sheets.
* Toolbar configurators:
* [#13147](http://dev.ckeditor.com/ticket/13147): Add buttons to the sticky toolbar.
* [#13207](http://dev.ckeditor.com/ticket/13207): Use modal window to display help in toolbar configurator.
@@ -250,7 +250,7 @@ a.cke_dialog_tab_disabled

/* The close button at the top of the dialog. */

.cke_dialog_close_button
a.cke_dialog_close_button
{
background-image: url(images/sprites.png);
background-repeat: no-repeat;
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
}

/* Each item of the elements path. */
.cke_path_item,
a.cke_path_item,
/* Empty element available at the end of the elements path, to help us keeping
the proper box size when the elements path is empty. */
.cke_path_empty
span.cke_path_empty
{
display: inline-block;
float: left;
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
}

/* Editable regions */
.cke_source
textarea.cke_source
{
font-family: 'Courier New', Monospace;
font-size: small;
background-color: #fff;
white-space: pre-wrap;
border: none;
padding: 0;
margin: 0;
display: block;
}

.cke_wysiwyg_frame, .cke_wysiwyg_div
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
}

/* Reset for elements and their children. */
.cke_reset_all, .cke_reset_all *
.cke_reset_all, .cke_reset_all *,
.cke_reset_all a, .cke_reset_all textarea
{
/* The following must be identical to .cke_reset. */
margin: 0;
@@ -73,6 +74,7 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
text-align: left;
white-space: nowrap;
cursor: auto;
float: none;
}

.cke_reset_all .cke_rtl *
@@ -57,7 +57,7 @@ The visual representation of a rich combo widget looks as follows:
}

/* The container for combo text and arrow. */
.cke_combo_button
a.cke_combo_button
{
display: inline-block;
-moz-border-radius: 5px;
@@ -135,7 +135,7 @@ a.cke_button
/* This class is applied to the button when it is "active" (pushed).
This style indicates that the feature associated with the button is active
i.e. currently writing in bold or when spell checking is enabled. */
.cke_button_on
a.cke_button_on
{
background-color: #a3d7ff;
}
@@ -150,7 +150,7 @@ a.cke_button

/* This class is applied to the button when the feature associated with the
button is available but currently not active.*/
.cke_button_off
a.cke_button_off
{
opacity: 0.7;
}
@@ -159,7 +159,7 @@ a.cke_button
button cannot be used (grayed-out).
i.e. paste button remains disabled when there is nothing in the clipboard to
be pasted. */
.cke_button_disabled
a.cke_button_disabled
{
opacity: 0.3;
}
@@ -309,7 +309,7 @@ a.cke_button_off:active
}

/* The button, which when clicked hides (collapses) all the toolbars. */
.cke_toolbox_collapser
a.cke_toolbox_collapser
{
width: 12px;
height: 11px;
@@ -317,7 +317,7 @@ a.cke_dialog_tab_disabled

/* The close button at the top of the dialog. */

.cke_dialog_close_button
a.cke_dialog_close_button
{
background-image: url(images/close.png);
background-repeat: no-repeat;
@@ -327,7 +327,7 @@ a.cke_dialog_tab_disabled
text-align: center;
height: 20px;
width: 20px;
top: 5px;
top: 4px;
z-index: 5;
opacity: 0.8;
filter: alpha(opacity = 80);
@@ -27,10 +27,10 @@ The following is a visual representation of its main elements:
}

/* Each item of the elements path. */
.cke_path_item,
a.cke_path_item,
/* Empty element available at the end of the elements path, to help us keeping
the proper box size when the elements path is empty. */
.cke_path_empty
span.cke_path_empty
{
display: inline-block;
float: left;
@@ -23,12 +23,16 @@ For licensing, see LICENSE.md or http://ckeditor.com/license
}

/* Editable regions */
.cke_source
textarea.cke_source
{
font-family: 'Courier New', Monospace;
font-size: small;
background-color: #fff;
white-space: pre-wrap;
border: none;
padding: 0;
margin: 0;
display: block;
}

.cke_wysiwyg_frame, .cke_wysiwyg_div
@@ -46,7 +46,8 @@ http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
}

/* Reset for elements and their children. */
.cke_reset_all, .cke_reset_all *
.cke_reset_all, .cke_reset_all *,
.cke_reset_all a, .cke_reset_all textarea
{
/* The following must be identical to .cke_reset. */
margin: 0;
@@ -60,7 +60,7 @@ The visual representation of a rich combo widget looks as follows:
}

/* The container for combo text and arrow. */
.cke_combo_button
a.cke_combo_button
{
cursor: default;
display: inline-block;
@@ -147,7 +147,7 @@ a.cke_button
/* This class is applied to the button when it is "active" (pushed).
This style indicates that the feature associated with the button is active
i.e. currently writing in bold or when spell checking is enabled. */
.cke_button_on
a.cke_button_on
{
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset, 0 1px 0 rgba(0,0,0,.2);
@@ -348,7 +348,7 @@ a.cke_button_disabled:active
}

/* The button, which when clicked hides (collapses) all the toolbars. */
.cke_toolbox_collapser
a.cke_toolbox_collapser
{
width: 12px;
height: 11px;
@@ -0,0 +1,56 @@
/*
There's only sense testing rules with specificity 11
because CKEditor's reset is not able to override higher ones.
It also only makes sense to test some reasonable selectors.
It is of course possible to do:
.styled * { float: left }
but it's unrealistic and it would be a developer's fault.
Realistic, imprecise styles are based on specific tag names like `a` or `table`.
*/

* {
box-sizing: border-box;
font-family: Courier;
font-size: 20px;
}

input, textarea, a, label {
border: solid 5px blue;
padding: 5px;
text-decoration: underline;
}

table {
table-layout: fixed;
width: 800px;
float: right;
border: solid 2px blue;
}

p, h1 {
color: red;
}

iframe {
width: 500px;
border: solid 2px green;
}

/* Links are pretty often styled with similar styles
and are used by us in many places in the UI. */
.styled a {
text-decoration: underline;
border: solid 2px green;
color: red;
font-size: 15px;
background: blue;
padding: 5px;
}

.styled textarea {
margin: 20px;
padding: 10px;
border: solid 5px red;
width: 200px;
background: red;
}
@@ -0,0 +1,18 @@
<head>
<link rel="stylesheet" href="_assets/styles.css">
</head>

<body class="styled">
<div id="editor">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>

<script>
CKEDITOR.replace( 'editor', {
toolbarCanCollapse: true
} );
</script>
</body>
@@ -0,0 +1,10 @@
@bender-tags: 4.5.0, tc
@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font,about, language, elementspath, resize, justify, undo
@bender-ui: collapsed

Test whether skin of the editor was not affected by page's styling. Check:

* Links in the elements path.
* All dialogs.
* Sourcearea.
* Button states.
@@ -0,0 +1,19 @@
<head>
<link rel="stylesheet" href="_assets/styles.css">
</head>

<body class="styled">
<div id="editor">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>

<script>
CKEDITOR.replace( 'editor', {
skin: 'kama',
toolbarCanCollapse: true
} );
</script>
</body>
@@ -0,0 +1,10 @@
@bender-tags: 4.5.0, tc
@bender-ckeditor-plugins: wysiwygarea, sourcearea, toolbar, basicstyles, colorbutton, image, font, about, language, elementspath, resize, justify, undo
@bender-ui: collapsed

Test whether skin of the editor was not affected by page's styling. Check:

* Links in the elements path.
* All dialogs.
* Sourcearea.
* Button states.

0 comments on commit 2e0eee9

Please sign in to comment.
You can’t perform that action at this time.