Browse Source

css commit

master
myitinos 2 years ago
parent
commit
c30695520d
24 changed files with 3001 additions and 0 deletions
  1. +25
    -0
      input/skins/bootstrapck/scss/browser-specific/gecko/editor_gecko.scss
  2. +62
    -0
      input/skins/bootstrapck/scss/browser-specific/ie/dialog_ie.scss
  3. +71
    -0
      input/skins/bootstrapck/scss/browser-specific/ie/editor_ie.scss
  4. +68
    -0
      input/skins/bootstrapck/scss/browser-specific/ie7/dialog_ie7.scss
  5. +213
    -0
      input/skins/bootstrapck/scss/browser-specific/ie7/editor_ie7.scss
  6. +24
    -0
      input/skins/bootstrapck/scss/browser-specific/ie8/dialog_ie8.scss
  7. +27
    -0
      input/skins/bootstrapck/scss/browser-specific/ie8/editor_ie8.scss
  8. +21
    -0
      input/skins/bootstrapck/scss/browser-specific/iequirks/dialog_iequirks.scss
  9. +79
    -0
      input/skins/bootstrapck/scss/browser-specific/iequirks/editor_iequirks.scss
  10. +31
    -0
      input/skins/bootstrapck/scss/browser-specific/opera/dialog_opera.scss
  11. +119
    -0
      input/skins/bootstrapck/scss/components/_colorpanel.scss
  12. +66
    -0
      input/skins/bootstrapck/scss/components/_elementspath.scss
  13. +189
    -0
      input/skins/bootstrapck/scss/components/_mainui.scss
  14. +182
    -0
      input/skins/bootstrapck/scss/components/_menu.scss
  15. +199
    -0
      input/skins/bootstrapck/scss/components/_panel.scss
  16. +32
    -0
      input/skins/bootstrapck/scss/components/_presets.scss
  17. +107
    -0
      input/skins/bootstrapck/scss/components/_reset.scss
  18. +174
    -0
      input/skins/bootstrapck/scss/components/_richcombo.scss
  19. +317
    -0
      input/skins/bootstrapck/scss/components/_toolbar.scss
  20. +66
    -0
      input/skins/bootstrapck/scss/components/editor.scss
  21. +61
    -0
      input/skins/bootstrapck/scss/config/_colors.scss
  22. +9
    -0
      input/skins/bootstrapck/scss/config/_config.scss
  23. +37
    -0
      input/skins/bootstrapck/scss/config/_defaults.scss
  24. +822
    -0
      input/skins/bootstrapck/scss/dialog/dialog.scss

+ 25
- 0
input/skins/bootstrapck/scss/browser-specific/gecko/editor_gecko.scss View File

@ -0,0 +1,25 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_gecko.css
==================
This file contains styles to used by all Gecko based browsers (Firefox) only.
*/
/* Base it on editor.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_bottom
{
padding-bottom: 3px;
}
.cke_combo_text
{
margin-bottom: -1px;
margin-top: 1px;
}

+ 62
- 0
input/skins/bootstrapck/scss/browser-specific/ie/dialog_ie.scss View File

@ -0,0 +1,62 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie.css
===============
This file contains styles to used by all versions of Internet Explorer only.
*/
/* Base it on dialog.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* IE doesn't leave enough padding in text input for cursor to blink in RTL. (#6087) */
.cke_rtl input.cke_dialog_ui_input_text,
.cke_rtl input.cke_dialog_ui_input_password
{
padding-right: 2px;
}
/* Compensate the padding added above on container. */
.cke_rtl div.cke_dialog_ui_input_text,
.cke_rtl div.cke_dialog_ui_input_password
{
padding-left: 2px;
}
.cke_rtl div.cke_dialog_ui_input_text {
padding-right: 1px;
}
.cke_rtl .cke_dialog_ui_vbox_child,
.cke_rtl .cke_dialog_ui_hbox_child,
.cke_rtl .cke_dialog_ui_hbox_first,
.cke_rtl .cke_dialog_ui_hbox_last
{
padding-right: 2px !important;
}
/* Disable filters for HC mode. */
.cke_hc .cke_dialog_title,
.cke_hc .cke_dialog_footer,
.cke_hc a.cke_dialog_tab,
.cke_hc a.cke_dialog_ui_button,
.cke_hc a.cke_dialog_ui_button:hover,
.cke_hc a.cke_dialog_ui_button_ok,
.cke_hc a.cke_dialog_ui_button_ok:hover
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/* Remove border from dialog field wrappers in HC
to avoid double borders. */
.cke_hc div.cke_dialog_ui_input_text,
.cke_hc div.cke_dialog_ui_input_password,
.cke_hc div.cke_dialog_ui_input_textarea,
.cke_hc div.cke_dialog_ui_input_select,
.cke_hc div.cke_dialog_ui_input_file
{
border: 0;
}

+ 71
- 0
input/skins/bootstrapck/scss/browser-specific/ie/editor_ie.scss View File

@ -0,0 +1,71 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie.css
===============
This file contains styles to used by all versions of Internet Explorer only.
*/
/* Base it on editor.css, overriding it with styles defined in this file. */
@import "../../components/editor";
a.cke_button_disabled,
/* Those two are to overwrite the gradient filter since we cannot have both of them. */
a.cke_button_disabled:hover,
a.cke_button_disabled:focus,
a.cke_button_disabled:active
{
filter: alpha(opacity = 30);
}
/* PNG Alpha Transparency Fix For IE<9 */
.cke_button_disabled .cke_button_icon
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff);
}
.cke_button_off:hover,
.cke_button_off:focus,
.cke_button_off:active
{
filter: alpha(opacity = 100);
}
.cke_combo_disabled .cke_combo_inlinelabel,
.cke_combo_disabled .cke_combo_open
{
filter: alpha(opacity = 30);
}
.cke_toolbox_collapser
{
border: 1px solid #a6a6a6;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 1px;
}
/* Gradient filters must be removed for HC mode to reveal the background. */
.cke_hc .cke_top,
.cke_hc .cke_bottom,
.cke_hc .cke_combo_button,
.cke_hc a.cke_combo_button:hover,
.cke_hc a.cke_combo_button:focus,
.cke_hc .cke_toolgroup,
.cke_hc .cke_button_on,
.cke_hc a.cke_button_off:hover,
.cke_hc a.cke_button_off:focus,
.cke_hc a.cke_button_off:active,
.cke_hc .cke_toolbox_collapser,
.cke_hc .cke_toolbox_collapser:hover,
.cke_hc .cke_panel_grouptitle
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

+ 68
- 0
input/skins/bootstrapck/scss/browser-specific/ie7/dialog_ie7.scss View File

@ -0,0 +1,68 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie7.css
===============
This file contains styles to used by Internet Explorer 7 only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
.cke_dialog_title
{
/* gradient fix */
zoom: 1;
}
.cke_dialog_footer
{
/* IE7 ignores footer's outline. Use border instead. */
border-top: 1px solid #bfbfbf;
}
/* IE7 needs position static #6806 */
.cke_dialog_footer_buttons
{
position: static;
}
/* IE7 crops the bottom pixels of footer buttons (#9491) */
.cke_dialog_footer_buttons a.cke_dialog_ui_button
{
vertical-align: top;
}
/* IE7 margin loose on float. */
.cke_dialog .cke_resizer_ltr
{
padding-left: 4px;
}
.cke_dialog .cke_resizer_rtl
{
padding-right: 4px;
}
/* IE7 doesn't support box-sizing and therefore we cannot
have sexy inputs which go well with the layout. */
.cke_dialog_ui_input_text,
.cke_dialog_ui_input_password,
.cke_dialog_ui_input_textarea,
.cke_dialog_ui_input_select
{
padding: 0 !important;
}
/* Predefined border to avoid visual size change impact. */
.cke_dialog_ui_checkbox_input,
.cke_dialog_ui_ratio_input,
.cke_btn_reset,
.cke_btn_locked,
.cke_btn_unlocked
{
border: 1px solid transparent !important;
}

+ 213
- 0
input/skins/bootstrapck/scss/browser-specific/ie7/editor_ie7.scss View File

@ -0,0 +1,213 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie7.css
===============
This file contains styles to used by Internet Explorer 7 only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_button,
.cke_rtl .cke_button *,
.cke_rtl .cke_combo,
.cke_rtl .cke_combo *,
.cke_rtl .cke_path_item,
.cke_rtl .cke_path_item *,
.cke_rtl .cke_path_empty
{
float: none;
}
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_combo_button,
.cke_rtl .cke_combo_button *,
.cke_rtl .cke_button,
.cke_rtl .cke_button_icon,
{
display: inline-block;
vertical-align: top;
}
.cke_toolbox
{
display:inline-block;
padding-bottom: 5px;
height: 100%;
}
.cke_rtl .cke_toolbox
{
padding-bottom: 0;
}
.cke_toolbar
{
margin-bottom: 5px;
}
.cke_rtl .cke_toolbar
{
margin-bottom: 0;
}
/* IE7: toolgroup must be adapted to toolbar items height. */
.cke_toolgroup
{
height: 26px;
}
/* Avoid breaking elements that use background gradient when page zoom > 1 (#9548) */
.cke_toolgroup,
.cke_combo
{
position: relative;
}
a.cke_button
{
/* IE7: buttons must not float to wrap the toolbar in a whole. */
float:none;
/* IE7: buttons have to be aligned to top. Otherwise, some buttons like
* source and scayt are displayed a few pixels below the base line.
*/
vertical-align:top;
}
.cke_toolbar_separator
{
display: inline-block;
float: none;
vertical-align: top;
background-color: #c0c0c0;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 0;
}
.cke_toolbox_collapser .cke_arrow
{
border-width:4px;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
{
border-width:3px;
}
.cke_rtl .cke_button_arrow
{
padding-top: 8px;
margin-right: 2px;
}
.cke_rtl .cke_combo_inlinelabel
{
display: table-cell;
vertical-align: middle;
}
/*
* Editor menus are display:table-driven. IE7 doesn't support this approach,
* hence this position&float hybrid fall-back.
*/
.cke_menubutton
{
display: block;
height: 24px;
}
.cke_menubutton_inner
{
display: block;
position: relative;
}
.cke_menubutton_icon
{
height: 16px;
width: 16px;
}
.cke_menubutton_icon,
.cke_menubutton_label,
.cke_menuarrow
{
display: inline-block;
}
.cke_menubutton_label
{
width: auto;
vertical-align: top;
line-height: 24px;
height: 24px;
margin: 0 10px 0 0;
}
.cke_menuarrow
{
width: 5px;
height: 6px;
padding: 0;
position: absolute;
right: 8px;
top: 10px;
background-position: 0 0;
}
/* Menus in RTL mode. */
.cke_rtl .cke_menubutton_icon
{
position: absolute;
right: 0px;
top: 0px;
}
.cke_rtl .cke_menubutton_label
{
float: right;
clear: both;
margin: 0 24px 0 10px;
}
.cke_hc .cke_rtl .cke_menubutton_label
{
margin-right: 0;
}
.cke_rtl .cke_menuarrow
{
left: 8px;
right: auto;
background-position: 0 -24px;
}
.cke_hc .cke_menuarrow
{
top: 5px;
padding: 0 5px;
}
.cke_rtl input.cke_dialog_ui_input_text,
.cke_rtl input.cke_dialog_ui_input_password
{
/* Positioning is required for IE7 on text inputs not to stretch dialog horizontally. (#8971)*/
position: relative;
}
/* Reset vertical paddings which put editing area under bottom UI space. (#9721) */
.cke_wysiwyg_div
{
padding-top: 0 !important;
padding-bottom: 0 !important;
}

+ 24
- 0
input/skins/bootstrapck/scss/browser-specific/ie8/dialog_ie8.scss View File

@ -0,0 +1,24 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie8.css
===============
This file contains styles to used by Internet Explorer 8 only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* Without the following, IE8 cannot compensate footer button thick borders
on :focus/:active. */
a.cke_dialog_ui_button_ok:focus span,
a.cke_dialog_ui_button_ok:active span,
a.cke_dialog_ui_button_cancel:focus span,
a.cke_dialog_ui_button_cancel:active span
{
display: block;
}

+ 27
- 0
input/skins/bootstrapck/scss/browser-specific/ie8/editor_ie8.scss View File

@ -0,0 +1,27 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_ie8.css
===============
This file contains styles to used by Internet Explorer 8 only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_toolbox_collapser .cke_arrow
{
border-width:4px;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow
{
border-width:3px;
}
.cke_toolbox_collapser .cke_arrow
{
margin-top: 0;
}

+ 21
- 0
input/skins/bootstrapck/scss/browser-specific/iequirks/dialog_iequirks.scss View File

@ -0,0 +1,21 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_ie7.css
===============
This file contains styles to used by Internet Explorer in
Quirks mode only.
*/
/* Base it on dialog_ie.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* [IE7-8] Filter on footer causes background artifacts when opening dialog. */
.cke_dialog_footer
{
filter: "";
}

+ 79
- 0
input/skins/bootstrapck/scss/browser-specific/iequirks/editor_iequirks.scss View File

@ -0,0 +1,79 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
editor_iequirks.css
===============
This file contains styles to used by all versions of Internet Explorer
in Quirks mode only.
*/
/* Base it on editor_ie.css, overriding it with styles defined in this file. */
@import "../../components/editor";
.cke_top,
.cke_contents,
.cke_bottom
{
width: 100%; /* hasLayout = true */
}
.cke_button_arrow
{
font-size: 0; /* Set minimal font size, so arrow won't be streched by the text that doesn't exist. */
}
/* Bring back toolbar buttons in RTL. */
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_button,
.cke_rtl .cke_button *,
.cke_rtl .cke_combo,
.cke_rtl .cke_combo *,
.cke_rtl .cke_path_item,
.cke_rtl .cke_path_item *,
.cke_rtl .cke_path_empty
{
float: none;
}
.cke_rtl .cke_toolgroup,
.cke_rtl .cke_toolbar_separator,
.cke_rtl .cke_combo_button,
.cke_rtl .cke_combo_button *,
.cke_rtl .cke_button,
.cke_rtl .cke_button_icon,
{
display: inline-block;
vertical-align: top;
}
/* Otherwise formatting toolbar breaks when editing a mixed content (#9893). */
.cke_rtl .cke_button_icon
{
float: none;
}
.cke_resizer
{
width: 10px;
}
.cke_source
{
white-space: normal;
}
.cke_bottom
{
position: static; /* Without this bottom space doesn't move when resizing editor. */
}
.cke_colorbox
{
font-size: 0; /* Set minimal font size, so button won't be streched by the text that doesn't exist. */
}

+ 31
- 0
input/skins/bootstrapck/scss/browser-specific/opera/dialog_opera.scss View File

@ -0,0 +1,31 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
dialog_opera.css
===============
This file contains styles to used by all versions of Opera only.
*/
/* Base it on dialog.css, overriding it with styles defined in this file. */
@import "../../dialog/dialog";
/* Opera has problem with box-shadow and td with border-collapse: collapse */
/* inset shadow is mis-aligned */
.cke_dialog_footer
{
display: block;
height: 38px;
}
.cke_ltr .cke_dialog_footer > *
{
float:right;
}
.cke_rtl .cke_dialog_footer > *
{
float:left;
}

+ 119
- 0
input/skins/bootstrapck/scss/components/_colorpanel.scss View File

@ -0,0 +1,119 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
colorpanel.css (part of editor.css)
=====================================
The color panel is related to the contents part of the panels that are
displayed when clicking the color buttons of the toolbar. See panels.css for
styles related to the outer part of panels.
The following is the visual representation of the color panel contents:
+-- .cke_panel_block.cke_colorblock --+
| +-- a.cke_colorauto --------------+ |
| | | |
| | AUTOMATIC COLOR | |
| | | |
| +---------------------------------+ |
| +-- table ------------------------+ |
| | | |
| | COLOR PALETTE | |
| | | |
| |---------------------------------| |
| | "More Colors" | |
| +---------------------------------+ |
+-------------------------------------+
The AUTOMATIC COLOR section is an <a> containing a table with two cells with
the following contents:
+-- TD -----------------+ +-- TD -----------------+
| +-- .cke_colorbox --+ | | |
| | | | | "Automatic" |
| +-------------------+ | | |
+-----------------------+ +-----------------------+
The COLOR PALETTE section instead is a table with a variable number of cells
(by default 8). Each cell represents a color box, with the following structure:
+-- A.cke_colorbox ---------+
| +-- SPAN.cke_colorbox --+ |
| | | |
| +-----------------------+ |
+---------------------------+
*/
/* The container of the color palette. */
.cke_colorblock {
padding: 3px;
font-size: 11px;
font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif;
}
.cke_colorblock,
.cke_colorblock a {
text-decoration: none;
color: #000;
}
/* The box which is to represent a single color on the color palette.
It is a small, square-shaped element which can be selected from the palette. */
span.cke_colorbox {
width: 10px;
height: 10px;
border: 1px solid $gray;
float: left;
}
.cke_rtl span.cke_colorbox {
float: right;
}
/* The wrapper of the span.cke_colorbox. It provides an extra border and padding. */
a.cke_colorbox {
border: 1px solid #fff;
padding: 2px;
float: left;
width: 12px;
height: 12px;
border-radius: 2px;
}
.cke_rtl a.cke_colorbox {
float: right;
}
/* Different states of the a.cke_colorbox wrapper. */
a {
&:hover, &:focus, &:active {
&.cke_colorbox {
border: 1px solid $hr-border;
background-color: $gray-lighter;
}
}
}
/* Buttons which are visible at the top/bottom of the color palette:
- cke_colorauto (TOP) applies the automatic color.
- cke_colormore (BOTTOM) executes the color dialog.
*/
a.cke_colorauto, a.cke_colormore {
border: 1px solid #fff;
padding: 2px;
display: block;
cursor: pointer;
}
/* Different states of cke_colorauto/cke_colormore buttons. */
a {
&:hover, &:focus, &:active {
&.cke_colorauto, &.cke_colormore {
border: 1px solid $hr-border;
background-color: $gray-lighter;
}
}
}

+ 66
- 0
input/skins/bootstrapck/scss/components/_elementspath.scss View File

@ -0,0 +1,66 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
elementspath.css (part of editor.css)
=======================================
This file styles the "Elements Path", whith is the list of element names
present at the the bottom bar of the CKEditor interface.
The following is a visual representation of its main elements:
+-- .cke_path ---------------------------------------------------------------+
| +-- .cke_path_item ----+ +-- .cke_path_item ----+ +-- .cke_path_empty ---+ |
| | | | | | | |
| +----------------------+ +----------------------+ +----------------------+ |
+----------------------------------------------------------------------------+
*/
/* The box that holds the entire elements path. */
.cke_path {
float: left;
margin: -2px 0 2px;
}
/* Each item of the elements path. */
.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 {
display: inline-block;
float: left;
padding: 3px 4px;
margin-right: 2px;
cursor: default;
text-decoration: none;
outline: 0;
border: 0;
color: #4c4c4c;
font-weight: bold;
font-size: 11px;
}
.cke_rtl {
.cke_path, .cke_path_item, .cke_path_empty {
float: right;
}
}
/* The items are <a> elements, so we define its hover states here. */
a.cke_path_item {
&:hover, &:focus, &:active {
background-color: #bfbfbf;
color: #333;
border-radius: 2px;
}
}
.cke_hc a.cke_path_item {
&:hover, &:focus, &:active {
border: 2px solid;
padding: 1px 2px;
}
}

+ 189
- 0
input/skins/bootstrapck/scss/components/_mainui.scss View File

@ -0,0 +1,189 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
mainui.css (part of editor.css)
=================================
This file styles the basic structure of the CKEditor user interface - the box
that holds everything.
CKEditor offers two main editing modes. The main UI blocks that compose these
modes are:
For "Theme UI" mode, the one most generally used:
+-- .cke_chrome ----------------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_contents --------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_bottom ----------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
For "Inline Editing" mode:
+-- .cke_chrome .cke_float------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
*/
/* The outer boundary of the interface. */
.cke_chrome {
/* This is <span>, so transform it into a block.*/
display: block;
border: 1px solid $hr-border;
border-radius: $border-radius;
padding: 0 3px;
background: $gray-lighter;
}
/* The inner boundary of the interface. */
.cke_inner {
/* This is <span>, so transform it into a block.*/
display: block;
-webkit-touch-callout: none;
background: transparent;
padding: 0;
}
/* Added to the outer boundary of the UI when in inline editing,
when the UI is floating. */
.cke_float {
/* Make white the space between the outer and the inner borders. */
border: none;
.cke_inner {
/* As we don't have blocks following top (toolbar) we suppress the padding
as the toolbar defines its own margin. */
padding-bottom: 0;
}
.cke_top {
border: 1px solid $hr-border;
}
}
/* Make the main spaces enlarge to hold potentially floated content. */
.cke_top, .cke_contents, .cke_bottom {
/* These are <span>s, so transform them into blocks.*/
display: block;
/* Ideally this should be "auto", but it shows scrollbars in IE7. */
overflow: hidden;
}
.cke_top, .cke_bottom {
padding: 3px 0 0;
background: $gray-lighter;
}
.cke_top {
/* Allow breaking toolbars when in a narrow editor. (#9947) */
white-space: normal;
}
.cke_contents {
background-color: #fff;
border: 1px solid $hr-border;
border-radius: $border-radius;
}
.cke_bottom {
position: relative;
}
/* On iOS we need to manually enable scrolling in the contents block. (#9945) */
.cke_browser_ios .cke_contents {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* The resizer is the small UI element that is rendered at the bottom right
part of the editor. It makes is possible to resize the editor UI. */
.cke_resizer {
/* To avoid using images for the resizer, we create a small triangle,
using some CSS magic. */
width: 0;
height: 0;
overflow: hidden;
width: 0;
height: 0;
overflow: hidden;
border-width: 10px 10px 0 0;
border-color: transparent $gray-dark transparent transparent;
border-style: dashed solid dashed dashed;
font-size: 0;
vertical-align: bottom;
margin-top: 6px;
/* A margin in case of no other element in the same container
to keep a distance to the bottom edge. */
margin-bottom: 2px;
}
.cke_hc .cke_resizer {
font-size: 15px;
width: auto;
height: auto;
border-width: 0;
}
.cke_resizer_ltr {
cursor: se-resize;
float: right;
margin-right: -4px;
}
/* This class is added in RTL mode. This is a special case for the resizer
(usually the .cke_rtl class is used), because it may not necessarily be in
RTL mode if the main UI is RTL. It depends instead on the context where the
editor is inserted on. */
.cke_resizer_rtl {
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent $gray;
border-style: dashed dashed dashed solid;
cursor: sw-resize;
float: left;
margin-left: -4px;
right: auto;
}
/* The editing area (where users type) can be rendered as an editable <div>
element (e.g. divarea plugin). In that case, this is the class applied to
that element. */
.cke_wysiwyg_div {
display: block;
height: 100%;
overflow: auto;
padding: 0 8px;
outline-style: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

+ 182
- 0
input/skins/bootstrapck/scss/components/_menu.scss View File

@ -0,0 +1,182 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
menu.css (part of editor.css)
===============================
This file styles menus used in the editor UI. These menus are the list of
options available inside some "floating panels", like menu buttons of the
toolbar or the context menu.
Note that the menu itself doesn't include the floating element that holds it.
That element is styles in the panel.css file.
The following is a visual representation of the main elements of a menu:
+-- .cke_menu -----------------+
| +-- .cke_menuitem --------+ |
| | +-- .cke_menubutton ---+ | |
| | | | | |
| | +----------------------+ | |
| +--------------------------+ |
| +-- .cke_menuseparator ----+ |
| ... |
+------------------------------+
This is the .cke_menubutton structure:
(Note that the menu button icon shares with toolbar button the common class .cke_button_icon to achieve the same outlook.)
+-- .cke_menubutton -------------------------------------------------------------------------+
| +-- .cke_menubutton_inner ---------------------------------------------------------------+ |
| | +-- .cke_menubutton_icon ---+ +-- .cke_menubutton_label --+ +-- .cke_cke_menuarrow --+ | |
| | | +-- .cke_button_icon ---+ | | | | | | |
| | | | | | | | | | | |
| | | +-----------------------+ | | | | | | |
| | +---------------------------+ +---------------------------+ +------------------------+ | |
| +----------------------------------------------------------------------------------------+ |
+--------------------------------------------------------------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
.cke_rtl: Available when the editor UI is on RTL.
*/
/* .cke_menuitem is the element that holds the entire structure of each of the
menu items. */
.cke_menubutton {
/* The "button" inside a menu item is a <a> element.
Transforms it into a block. */
display: block;
}
.cke_button_icon {
opacity: .8;
}
.cke_menuitem span {
/* Avoid the text selection cursor inside menu items. */
cursor: default;
}
.cke_menubutton {
&:hover, &:focus, &:active {
background-color: #D3D3D3;
display: block;
}
}
.cke_hc .cke_menubutton {
padding: 2px;
&:hover, &:focus, &:active {
border: 2px solid;
padding: 0;
}
}
.cke_menubutton_inner {
display: table-row;
}
.cke_menubutton_icon,
.cke_menubutton_label,
.cke_menuarrow {
display: table-cell;
}
/* The menu item icon. */
.cke_menubutton_icon {
background-color: #D7D8D7;
opacity: 0.70; /* Safari, Opera and Mozilla */
filter: alpha(opacity=70); /* IE */
padding: 4px;
}
.cke_hc .cke_menubutton_icon {
height: 16px;
width: 0;
padding: 4px 0;
}
.cke_menubutton {
&:hover, &:focus, &:active {
.cke_menubutton_icon {
background-color: #D0D2D0;
}
}
}
.cke_menubutton_disabled {
&:hover, &:focus, &:active {
.cke_menubutton_icon {
/* The icon will get opacity as well when hovered. */
opacity: 0.3;
filter: alpha(opacity=30);
}
}
}
/* The textual part of each menu item. */
.cke_menubutton_label {
padding: 0 5px;
background-color: transparent;
width: 100%;
vertical-align: middle;
}
.cke_menubutton_disabled .cke_menubutton_label {
/* Greyed label text indicates a disabled menu item. */
opacity: 0.3;
filter: alpha(opacity=30);
}
.cke_menubutton_on {
border: 1px solid #dedede;
background-color: #f2f2f2;
.cke_menubutton_icon {
padding-right: 3px;
}
}
.cke_menubutton {
&:hover, &:focus, &:active {
background-color: #EFF0EF;
}
}
.cke_panel_frame .cke_menubutton_label {
display: none;
}
/* The separator used to separate menu item groups. */
.cke_menuseparator {
background-color: #D3D3D3;
height: 1px;
filter: alpha(opacity=70); /* IE */
opacity: 0.70; /* Safari, Opera and Mozilla */
}
/* The small arrow shown for item with sub-menus. */
.cke_menuarrow {
background-image: url(images/arrow.png);
background-position: 0 10px;
background-repeat: no-repeat;
padding: 0 5px;
span {
display: none;
}
}
.cke_rtl .cke_menuarrow {
background-position: 5px -13px;
background-repeat: no-repeat;
}
.cke_hc .cke_menuarrow span {
vertical-align: middle;
display: inline;
}

+ 199
- 0
input/skins/bootstrapck/scss/components/_panel.scss View File

@ -0,0 +1,199 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
panel.css (part of editor.css)
================================
Panels are floating elements that can hold different types of contents.
The following are common uses of it:
- The element that toolbar combos display when opening them.
- The context menu.
- The list of items displayed by "menu buttons" (e.g. scayt).
- The panel shown when opening "panel buttons" (e.g. color buttons).
Panel contents are wrapped into an iframe, so it is possible to have additional
CSS loaded inside them (e.g. to have more accurate preview on the styles combo).
The following is a visual representation of the outer elements of a panel:
+-- .cke_panel(*) ---------------------+
| +-- IFRAME.cke_panel_frame --------+ |
| | +-- HTML.cke_panel_container --+ | |
| | | +-- .cke_panel_block ------+ | | |
| | | | | | | |
| | | | (contents here) | | | |
| | | | | | | |
| | | +--------------------------+ | | |
| | +------------------------------+ | |
| +----------------------------------+ |
+--------------------------------------+
(*) All kinds of panel share the above structure. Menu panels adds the
.cke_menu_panel class to the outer element, while toolbar combos add the
.cke_combopanel class.
This file also defines styles for panel lists (used by combos). For menu-like
panel contents and color panels check menu.css and colorpanel.css.
*/
/* The box that holds an IFRAME. It's inserted into a host document and positioned
absolutely by the application. It floats above the host document/editor. */
.cke_panel {
/* Restore the loading hide */
visibility: visible;
width: 120px;
height: 100px;
overflow: hidden;
margin-top: 5px;
background-color: #fff;
border: 1px solid $gray;
border-radius: $border-radius;
}
/* This class represents panels which are used as context menus. */
.cke_menu_panel {
padding: 0;
margin: 0;
}
/* This class represents panels which are used by rich combos. */
.cke_combopanel {
width: 150px;
height: 178px;
}
/* The IFRAME the panel is wrapped into. */
.cke_panel_frame {
width: 100%;
height: 100%;
font-size: 12px;
overflow: auto;
overflow-x: hidden;
}
/* The HTML document which is a direct descendant of the IFRAME */
.cke_panel_container {
overflow-y: auto;
overflow-x: hidden;
}
/*
Here we start the definition of panel lists (e.g. combo panels). The following
is its visual representation:
+-- .cke_panel_block -----------------+
| +-- .cke_panel_grouptitle --------+ |
| | | |
| +---------------------------------+ |
| +-- .cke_panel_list --------------+ |
| | +-- .cke_panel_listItem ------+ | |
| | | +-- a --------------------+ | | |
| | | | +-- span -------------+ | | | |
| | | | | | | | | |
| | | | +---------------------+ | | | |
| | | +-------------------------+ | | |
| | +-----------------------------+ | |
| | +-- .cke_panel_listItem ------+ | |
| | | +-- a --------------------+ | | |
| | | | +-- span -------------+ | | | |
| | | | | | | | | |
| | | | +---------------------+ | | | |
| | | +-------------------------+ | | |
| | +-----------------------------+ | |
| | ... | |
| +---------------------------------+ |
+-------------------------------------+
*/
/* The list of panel items. */
.cke_panel_list {
list-style-type: none;
margin: 3px;
padding: 0;
white-space: nowrap;
}
/* The item of .cke_panel_list */
.cke_panel_listItem {
margin: 0;
padding-bottom: 1px;
}
/* The child of .cke_panel_listItem. These elements contain spans which are
to display a real name of the property which is visible for an end-user. */
.cke_panel_listItem a {
padding: 3px 4px;
display: block;
border: 1px solid #fff;
color: inherit !important;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 2px;
&:hover, &:focus, &:active {
background-color: $primary-lighter;
}
}
/* IE6 */
* html .cke_panel_listItem a {
width : 100%;
/* IE is not able to inherit the color, so we must force it to black */
color: #000;
}
/* IE7 */
*:first-child+html .cke_panel_listItem a {
/* IE is not able to inherit the color, so we must force it to black */
color: #000;
}
.cke_panel_listItem.cke_selected a {
background-color: $primary-light;
outline: none;
}
.cke_hc .cke_panel_listItem a {
border-style: none;
}
.cke_hc .cke_panel_listItem a {
&:hover, &:focus, &:active {
border: 2px solid;
padding: 1px 2px;
}
}
/* The title of the entire panel which is visible on top of the list. */
.cke_panel_grouptitle {
font-size: 11px;
font-weight: bold;
white-space: nowrap;
margin: 0;
padding: 6px 6px;
color: #474747;
border-bottom: 1px solid $gray;
background: $gray-lighter;
&:first-child {
border-radius: $border-radius $border-radius 0 0;
}
}
/* The following styles set defaults of the elements used by the Paragraph
Format panel. */
.cke_panel_listItem {
p, h1, h2, h3, h4, h5, h6, pre {
margin-top: 0px;
margin-bottom: 0px;
}
}

+ 32
- 0
input/skins/bootstrapck/scss/components/_presets.scss View File

@ -0,0 +1,32 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/* "Source" button label */
.cke_button__source_label,
.cke_button__sourcedialog_label {
display: inline;
}
/* "Font Size" combo width */
.cke_combo__fontsize .cke_combo_text {
width: 30px;
}
/* "Font Size" panel size */
.cke_combopanel__fontsize {
width: 120px;
}
/* Editable regions */
.cke_source {
font-family: 'Courier New' , Monospace;
font-size: small;
background-color: #fff;
white-space: pre;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
background-color: #fff;
}

+ 107
- 0
input/skins/bootstrapck/scss/components/_reset.scss View File

@ -0,0 +1,107 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
reset.css (part of editor.css)
================================
This file holds the "reset" requirements of CKEditor, as well as define the
default interface styles.
CKEditor includes two main "reset" class names in the DOM structure created for
editors:
* .cke_reset: Intended to reset a specific element, but not its children.
Because of this, only styles that will not be inherited can be defined.
* .cke_reset_all: Intended to reset not only the element holding it, but
also its child elements.
To understand why "reset" is needed, check the CKEditor Skin SDK:
http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Reset
*/
/* Reset for single elements, not their children. */
.cke_reset {
/* Do not include inheritable rules here. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
width: auto;
height: auto;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
position: static;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
}
/* Reset for elements and their children. */
.cke_reset_all, .cke_reset_all * {
/* The following must be identical to .cke_reset. */
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
width: auto;
height: auto;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
position: static;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
/* These are rule inherited by all children elements. */
border-collapse: collapse;
font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
color: $gray-darker;
text-align: left;
white-space: nowrap;
cursor: auto;
float: none;
}
.cke_reset_all {
.cke_rtl * {
text-align: right;
}
/* Defaults for some elements. */
iframe {
vertical-align: inherit; /** For IE */
}
textarea {
white-space: pre;
}
textarea, input[type="text"], input[type="password"] {
cursor: text;
}
textarea[disabled], input[type="text"][disabled], input[type="password"][disabled] {
cursor: default;
}
fieldset {
padding: 10px;
margin-top: 10px;
border: 1px solid $hr-border;
legend {
padding: 0 5px;
}
}
select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
}

+ 174
- 0
input/skins/bootstrapck/scss/components/_richcombo.scss View File

@ -0,0 +1,174 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
richcombo.css (part of editor.css)
=================================
This file holds the style set of the "Rich Combo" widget which is commonly used
in the toolbar. It doesn't, however, styles the panel that is displayed when
clicking on the combo, which is instead styled by panel.css.
The visual representation of a rich combo widget looks as follows:
+-- .cke_combo----------------------------------------------------------------------+
| +-- .cke_combo_label --+ +-- .cke_combo_button ---------------------------------+ |
| | | | +-- .cke_combo_text --+ +-- .cke_combo_open -------+ | |
| | | | | | | +-- .cke_combo_arrow --+ | | |
| | | | | | | | | | | |
| | | | | | | +----------------------+ | | |
| | | | +---------------------+ +--------------------------+ | |
| +----------------------+ +------------------------------------------------------+ |
+-----------------------------------------------------------------------------------+
*/
/* The box that hold the entire combo widget */
.cke_combo {
display: inline-block;
float: left;
}
.cke_rtl .cke_combo {
float: right;
}
.cke_hc .cke_combo {
margin-top: -2px;
}
/* The label of the combo widget. It is invisible by default, yet
it's important for semantics and accessibility. */
.cke_combo_label {
display: none;
float: left;
line-height: 26px;
vertical-align: top;
margin-right: 5px;
}
.cke_rtl .cke_combo_label {
float: right;
margin-left: 5px;
margin-right: 0;
}
/* The container for combo text and arrow. */
.cke_combo_button {
display: inline-block;
float: left;
margin: 0 6px 5px 0;
border: 1px solid $hr-border;
border-radius: $border-radius;
background: #fff;
}
/* Different states of the container. */
.cke_combo_off {
a.cke_combo_button {
&:hover, &:focus {
outline: none;
}
&:active {
border-color: $gray-darker;
}
}
}
.cke_combo_on {
a.cke_combo_button {
border-color: $gray-darker;
}
}
.cke_rtl .cke_combo_button {
float: right;
margin-left: 5px;
margin-right: 0;
}
.cke_hc a.cke_combo_button {
padding: 3px;
}
.cke_hc .cke_combo_on a.cke_combo_button {
border-width: 3px;
padding: 1px;
}
.cke_hc .cke_combo_off a.cke_combo_button {
&:hover, &:focus, &:active {
border-width: 3px;
padding: 1px;
}
}
/* The label that shows the current value of the rich combo.
By default, it holds the name of the property.
See: .cke_combo_inlinelabel */
.cke_combo_text {
line-height: 26px;
padding-left: 10px;
text-overflow: ellipsis;
overflow: hidden;
float: left;
cursor: default;
color: #474747;
width: 60px;
}
.cke_rtl .cke_combo_text {
float: right;
text-align: right;
padding-left: 0;
padding-right: 10px;
}
.cke_hc .cke_combo_text {
line-height: 18px;
font-size: 12px;
}
/* The handler which opens the panel of rich combo properties.
It holds an arrow as a visual indicator. */
.cke_combo_open {
cursor: default;
display: inline-block;
font-size: 0;
height: 19px;
line-height: 17px;
margin: 1px 7px 1px;
width: 5px;
}
.cke_hc .cke_combo_open {
height: 12px;
}
/* The arrow which is displayed inside of the .cke_combo_open handler. */
.cke_combo_arrow {
margin: 11px 0 0;
float: left;
/* Pure CSS Arrow */
height: 0;
width: 0;
font-size: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid $text-color;
}
.cke_hc .cke_combo_arrow {
font-size: 10px;
width: auto;
border: 0;
margin-top: 3px;
}
/* Disabled combo button styles. */
.cke_combo_disabled {
.cke_combo_inlinelabel, .cke_combo_open {
opacity: 0.3;
}
}

+ 317
- 0
input/skins/bootstrapck/scss/components/_toolbar.scss View File

@ -0,0 +1,317 @@
/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
/*
toolbar.css (part of editor.css)
==================================
This files styles the CKEditor toolbar and its buttons. For toolbar combo
styles, check richcombo.css.
The toolbar is rendered as a big container (called toolbox), which contains
smaller "toolbars". Each toolbar represents a group of items that cannot be
separated. The following is the visual representation of the toolbox.
+-- .cke_toolbox ----------------------------------------------------------+
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
| | | | | | | |
| +------------------+ +------------------+ +------------------------+ |
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... |
| | | | | |
| +------------------+ +------------------+ |
+--------------------------------------------------------------------------+
The following instead is the visual representation of a single toolbar:
+-- .cke_toolbar ----------------------------------------------------------------+
| +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
| | | | | | | |
| +------------------------+ +------------------------+ +----------------------+ |
+--------------------------------------------------------------------------------+
(*) .cke_toolgroup is available only when the toolbar items can be grouped
(buttons). If the items can't be group (combos), this box is not available
and the items are rendered straight in that place.
This file also styles toolbar buttons, which are rendered inside the above
.cke_toolgroup containers. This is the visual representation of a button:
+-- .cke_button -------------------------------------+
| +-- .cke_button_icon --+ +-- .cke_button_label --+ |