@oat-sa/tao-core-ui 1.54.2 → 1.55.0

package/src/scss/ckeditor/skins/tao/scss/editor.scss

@@ -0,0 +1,111 @@
+/*
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+/*
+editor.css
+============
+
+
+This is he heart of the skin system. This is the file loaded by the editor to
+style all elements inside its main interface.
+
+To make it easier to maintain, instead of including all styles here, we import
+other files.
+*/
+@import "inc/bootstrap";
+
+/* "Reset" styles, necessary to avoid the editor UI being broken by external CSS. */
+@import 'inc/reset';
+
+/* Styles the main interface structure (holding box). */
+@import 'inc/mainui';
+
+/* Styles all "panels", which are the floating elements that appear when
+   opening toolbar combos, menu buttons, context menus, etc. */
+@import 'inc/panel';
+
+/* Styles the color panel displayed by the color buttons. */
+@import 'inc/colorpanel';
+
+/* Styles to toolbar. */
+@import 'inc/toolbar';
+
+/* Styles menus, which are lists of selectable items (context menu, menu button). */
+@import 'inc/menu';
+
+/* Styles toolbar combos. */
+@import 'inc/richcombo';
+
+/* Styles the elements path bar, available at the bottom of the editor UI.*/
+@import 'inc/elementspath';
+
+/* Contains hard-coded presets for "configurable-like" options of the UI
+   (e.g. display labels on specific buttons) */
+@import 'inc/presets';
+
+/* Tao specific stuff */
+@import 'inc/tao';
+
+/* Icon set */
+@import 'inc/ck-icons';
+
+/* Important!
+   To avoid showing the editor UI while its styles are still not available, the
+   editor creates it with visibility:hidden. Here, we restore the UI visibility. */
+.cke_chrome {
+	visibility: inherit;
+}
+
+/* For accessibility purposes, several "voice labels" are present in the UI.
+   These are usually <span> elements that show not be visible, but that are
+   used by screen-readers to announce other elements. Here, we hide these
+   <spans>, in fact. */
+.cke_voice_label {
+	display: none;
+}
+
+legend.cke_voice_label {
+	display: none;
+}
+
+.cke_top {
+  display:table;
+}
+
+.txt-ctr {
+  text-align: center;
+}
+
+.txt-lft {
+  text-align: left;
+}
+
+.txt-rgt {
+  text-align: right;
+}
+
+.txt-jty {
+  text-align: justify;
+}
+
+// added to make _u_ in ck QTI compatible
+.txt-underline {
+  text-decoration: underline;
+  font-size : inherit;
+}
+
+.txt-highlight {
+  padding: 0 5px;
+  background: #FF6416;
+  color: white;
+}
+
+.cke_editable:focus .qti-table .cke_table-faked-selection {
+	/* We have to use !important here, as td might specify it's own background, thus table selection
+	would not be visible. */
+	background: #b3d4fc !important;
+  text-shadow: none;
+  color: $textColor;
+}

package/src/scss/ckeditor/skins/tao/scss/inc/_ck-icons.scss

@@ -0,0 +1,59 @@
+/* Do not edit */@import "inc/bootstrap";
+.cke .cke_top .cke_toolbar .cke_button_icon {background-image: none!important;}
+.cke_button_icon, .cke_button { @include tao-icon-setup;}
+.cke_button__anchor_icon:before { @include icon-anchor;}
+.cke_button__bgcolor_icon:before { @include icon-background-color;}
+.cke_button__bidiltr_icon:before { @include icon-left-right;}
+.cke_button__bidirtl_icon:before { @include icon-right-left;}
+.cke_button__blockquote_icon:before { @include icon-block-quote;}
+.cke_button__bold_icon:before { @include icon-bold;}
+.cke_button__bulletedlist_icon:before { @include icon-ul;}
+.cke_button__copy_icon:before { @include icon-copy;}
+.cke_button__creatediv_icon:before { @include icon-div-container;}
+.cke_button__cut_icon:before { @include icon-cut;}
+.cke_button__find_icon:before { @include icon-find;}
+.cke_button__horizontalrule_icon:before { @include icon-insert-horizontal-line;}
+.cke_button__image_icon:before { @include icon-image;}
+.cke_button__indent_icon:before { @include icon-increase-indent;}
+.cke_button__italic_icon:before { @include icon-italic;}
+.cke_button__justifyblock_icon:before { @include icon-justify;}
+.cke_button__justifycenter_icon:before { @include icon-center;}
+.cke_button__justifyleft_icon:before { @include icon-align-left;}
+.cke_button__justifyright_icon:before { @include icon-align-right;}
+.cke_button__link_icon:before { @include icon-link;}
+.cke_button__newpage_icon:before { @include icon-new-page;}
+.cke_button__numberedlist_icon:before { @include icon-ol;}
+.cke_button__outdent_icon:before { @include icon-decrease-indent;}
+.cke_button__paste_icon:before { @include icon-paste;}
+.cke_button__pastefromword_icon:before { @include icon-paste-word;}
+.cke_button__pastetext_icon:before { @include icon-paste-text;}
+.cke_button__radio_icon:before { @include icon-radio-checked;}
+.cke_button__redo_icon:before { @include icon-redo;}
+.cke_button__replace_icon:before { @include icon-replace;}
+.cke_button__scayt_icon:before { @include icon-spell-check;}
+.cke_button__selectall_icon:before { @include icon-select-all;}
+.cke_button__sourcedialog_icon:before { @include icon-source;}
+.cke_button__specialchar_icon:before { @include icon-special-character;}
+.cke_button__strike_icon:before { @include icon-strike-through;}
+.cke_button__subscript_icon:before { @include icon-subscript;}
+.cke_button__superscript_icon:before { @include icon-superscript;}
+.cke_button__table_icon:before { @include icon-table;}
+.cke_button__templates_icon:before { @include icon-templates;}
+.cke_button__textcolor_icon:before { @include icon-text-color;}
+.cke_button__taohighlight_icon:before { @include icon-text-marker;}
+.cke_button__underline_icon:before { @include icon-underline;}
+.cke_button__taounderline_icon:before { @include icon-underline;}
+.cke_button__undo_icon:before { @include icon-undo;}
+.cke_button__unlink_icon:before { @include icon-unlink;}
+.cke_button__taomediamanager_icon:before { @include icon-media;}
+.cke_button__taoqtiimage_icon:before { @include icon-image;}
+.cke_button__taoqtimaths_icon:before { @include icon-maths;}
+.cke_button__taoqtimedia_icon:before { @include icon-media;}
+.cke_button__taoqtiinclude_icon:before { @include icon-shared-file;}
+.cke_button__taoqtitable_icon:before { @include icon-table;}
+.cke_button__taotooltip_icon:before { @include icon-tooltip;}
+.cke_button__taoqtiprintedvariable_icon:before { @include icon-variable;}
+.cke_button__taotab_icon:before { @include icon-tab;}
+.cke_button__taountab_icon:before { @include icon-untab;}
+.cke_combo_arrow:before { @include icon-down;}
+.cke_button_arrow:before { @include icon-down;}

package/src/scss/ckeditor/skins/tao/scss/inc/_colorpanel.scss

@@ -0,0 +1,118 @@
+/*
+Copyright (c) 2003-2013, 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: #808080 1px solid;
+  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: #fff 1px solid;
+  padding: 2px;
+  float: left;
+  width: 12px;
+  height: 12px;
+}
+
+.cke_rtl a.cke_colorbox {
+  float: right;
+}
+
+/* Different states of the a.cke_colorbox wrapper. */
+a:hover.cke_colorbox,
+a:focus.cke_colorbox,
+a:active.cke_colorbox {
+  border: #b6b6b6 1px solid;
+  background-color: #e5e5e5;
+}
+
+/* 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: #fff 1px solid;
+  padding: 2px;
+  display: block;
+  cursor: pointer;
+}
+
+/* Different states of cke_colorauto/cke_colormore buttons. */
+a:hover.cke_colorauto,
+a:hover.cke_colormore,
+a:focus.cke_colorauto,
+a:focus.cke_colormore,
+a:active.cke_colorauto,
+a:active.cke_colormore {
+  border: #b6b6b6 1px solid;
+  background-color: #e5e5e5;
+}

package/src/scss/ckeditor/skins/tao/scss/inc/_elementspath.scss

@@ -0,0 +1,69 @@
+/*
+Copyright (c) 2003-2013, 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;
+  text-shadow: 0 1px 0 #fff;
+  font-weight: bold;
+  font-size: 11px;
+}
+
+.cke_rtl .cke_path,
+.cke_rtl .cke_path_item,
+.cke_rtl .cke_path_empty {
+  float: right;
+}
+
+/* The items are <a> elements, so we define its hover states here. */
+a.cke_path_item:hover,
+a.cke_path_item:focus,
+a.cke_path_item:active {
+  background-color: #bfbfbf;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  border-radius: 2px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
+}
+
+.cke_hc a.cke_path_item:hover,
+.cke_hc a.cke_path_item:focus,
+.cke_hc a.cke_path_item:active {
+  border: 2px solid;
+  padding: 1px 2px;
+}

package/src/scss/ckeditor/skins/tao/scss/inc/_mainui.scss

@@ -0,0 +1,194 @@
+/*
+Copyright (c) 2003-2013, 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;
+  padding: 0;
+}
+
+/* The inner boundary of the interface. */
+.cke_inner {
+  /* This is <span>, so transform it into a block.*/
+  display: block;
+
+  -webkit-touch-callout: none;
+
+  padding: 0;
+  position: relative;
+  z-index: 10001;
+
+}
+
+/* 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_float .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;
+}
+
+/* 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 {
+  /*border: 1px solid #b2b2b2;*/
+  /* Allow breaking toolbars when in a narrow editor. (#9947) */
+  white-space: normal;
+  padding: 4px 3px 0px 4px;
+  background: $uiClickableDefaultBg;
+  @include simple-border($uiClickableDefaultBg);
+  @include box-shadow();
+}
+
+.cke_float .cke_top {
+  border: 3px solid $uiClickableDefaultBg;
+
+}
+
+.cke_bottom {
+  padding: 1px;
+  position: relative;
+  @include simple-border();
+  /*
+    border-top: 1px solid #bfbfbf;
+
+    box-shadow: 0 1px 0 #fff inset;
+
+    background: #cfd1cf;
+    background-image: linear-gradient(top, #ebebeb, #cfd1cf);
+    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ebebeb', endColorstr='#cfd1cf');*/
+}
+
+/* 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 #666 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;
+
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
+}
+
+.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 #A5A5A5;
+  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;
+  @include border-box();
+}