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

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

@@ -0,0 +1,213 @@
+/*
+Copyright (c) 2003-2013, 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 --+ | | |
+| |                      | | |                     | | |                      | | | |
+| |                      | | |                     | | +----------------------+ | | |
+| |                      | | +---------------------+ +--------------------------+ | |
+| +----------------------+ +------------------------------------------------------+ |
++-----------------------------------------------------------------------------------+
+*/
+@import "inc/bootstrap";
+/* The box that hold the entire combo widget */
+.cke_combo {
+  display: inline-block;
+}
+
+.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;
+  margin: 0 2px 0 0;
+
+  @include simple-border();
+  @include border-radius();
+
+  background: white();
+  max-height: 26px;
+  white-space: nowrap;
+}
+
+/* Different states of the container. */
+.cke_combo_off a.cke_combo_button:hover,
+.cke_combo_off a.cke_combo_button:focus {
+
+  outline: none;
+}
+
+
+.cke_combo_off a.cke_combo_button:hover,
+.cke_combo_off a.cke_combo_button:focus,
+.cke_combo_off a.cke_combo_button:active {
+  background-color: $uiClickableActiveBg;
+  text-shadow: none;
+}
+
+.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,
+.cke_hc .cke_combo_off a.cke_combo_button:hover,
+.cke_hc .cke_combo_off a.cke_combo_button:focus,
+.cke_hc .cke_combo_off a.cke_combo_button: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;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  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 {
+  display: inline-block;
+  font-size: 0;
+  height: 26px;
+  line-height: 17px;
+  margin: 0;
+  text-align: center;
+  width: 20px;
+  cursor: pointer;
+  &:hover {
+    color: $textHighlight;
+    background: $uiClickableHoverBg;
+  }
+}
+
+.cke_combo_button:hover {
+  color: $textHighlight !important;
+  background: $uiClickableHoverBg !important;
+  .cke_combo_text{
+    color: $darkBarTxt !important;
+  }
+}
+
+.cke_combo_on {
+  .cke_combo_button {
+    background-color: $info;
+    .cke_combo_text {
+      color: $darkBarTxt !important;
+    }
+  }
+}
+
+.cke_hc .cke_combo_open {
+  cursor: default;
+  display: inline-block;
+  font-size: 0;
+  height: 26px;
+  line-height: 17px;
+  margin: 0;
+  text-align: center;
+  width: 20px;
+}
+
+/* The arrow which is displayed inside of the .cke_combo_open handler. */
+.cke_combo_arrow, .cke_button_arrow {
+  margin: 8px 0 0;
+  float: left;
+  left: 7px;
+  position: relative;
+  font-family: 'tao';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.cke_combo_arrow, .cke_button_arrow {
+  @include tao-icon-setup;
+  @include icon-down;
+}
+
+.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_disabled .cke_combo_open {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,59 @@
+@import "inc/bootstrap";
+
+[class^="icon-"], [class*=" icon-"] {
+    text-shadow: 0 1px 0 white(.5);
+}
+
+.cke_button {
+    min-width: 14px;
+    text-decoration: none !important;
+    text-align: center;
+}
+
+.cke_top,
+.cke_top:before,
+.cke_top:after,
+.cke_top *,
+.cke_top *:before,
+.cke_top *:after {
+    box-sizing: content-box !important;
+}
+
+.cke_button_icon, .cke_button {
+    padding-top: 1px;
+    line-height: 0.9;
+    font-size: 16px;
+}
+
+.cke_nose {
+    position: absolute;
+    bottom: -6px;
+    transform: rotate(45deg);
+    border: 1px $uiClickableDefaultBg solid;
+    border-left: none;
+    border-top: none;
+    width: 12px;
+    height: 12px;
+    background: $uiClickableDefaultBg;
+    box-shadow: 2px 1px 1px 0 rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    &.float-space-left {
+        opacity: 1;
+        transition: opacity .1s ease-in-out;
+        right: auto;
+        left: 5px;
+    }
+    &.float-space-right {
+        opacity: 1;
+        transition: opacity .1s ease-in-out;
+        right: 5px;
+        left: auto;
+    }
+    &.float-space-bottom {
+        top: -6px;
+        box-shadow: none;
+    }
+    &.float-space-top {
+        bottom: -6px;
+    }
+}

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

@@ -0,0 +1,301 @@
+/*
+Copyright (c) 2003-2013, 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 --+ |
+| |                      | |                       | |
+| +----------------------+ +-----------------------+ |
++----------------------------------------------------+
+
+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.
+*/
+@import "inc/bootstrap";
+/* The box that holds each toolbar. */
+.cke_toolbar {
+  float: left;
+  position: relative;
+  z-index: 10005
+}
+
+.cke_rtl .cke_toolbar {
+  float: right;
+}
+
+@media (pointer:coarse) {
+  .cke .cke_toolbar .cke_button_off.cke_button_off:hover {
+    background: white !important;
+    color: $textColor !important;
+  }
+}
+
+/* The box that holds buttons. */
+.cke_toolgroup {
+  float: left;
+  margin: 0 2px 2px 0;
+  @include simple-border();
+  @include border-radius(1);
+
+  background: white();
+}
+
+.cke_hc .cke_toolgroup {
+  border: 0;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.cke_rtl .cke_toolgroup {
+  float: right;
+  margin-left: 6px;
+  margin-right: 0;
+}
+
+/* A toolbar button . */
+.cke .cke_toolbar .cke_button {
+  display: inline-block;
+  height: 18px;
+  padding: 4px 6px;
+  outline: none;
+  cursor: pointer;
+  border: 0;
+  color: $textColor;
+}
+
+.cke .cke_toolbar .cke_button:hover {
+  background: $uiClickableHoverBg !important;
+  color: $textHighlight !important;
+}
+
+.cke_reset_all, .cke_reset_all *
+.cke .cke_top .cke_toolbar .cke_button_disabled:hover {
+  background: white !important;
+  cursor: default !important;
+}
+
+.cke_rtl .cke_button {
+  float: right;
+}
+
+.cke_hc .cke_button {
+  border: 1px solid black;
+
+  /* Compensate the added border */
+  padding: 3px 5px;
+  margin: -2px 4px 0 -2px;
+}
+
+/* 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 .cke_toolbar a.cke_button_on {
+  background-color: $info;
+  color: $textHighlight;
+}
+
+.cke_button_disabled span {
+  opacity: 0.4 !important;
+}
+
+a.cke_button_on:hover,
+a.cke_button_on:focus,
+a.cke_button_on:active {
+
+  cursor: pointer;
+}
+
+a.cke_button_off:hover,
+a.cke_button_off:focus,
+a.cke_button_off:active,
+a.cke_button_disabled:hover,
+a.cke_button_disabled:focus,
+a.cke_button_disabled:active {
+
+  background-color: $uiClickableActiveBg;
+
+  cursor: default;
+  text-shadow: none;
+}
+
+/* The icon which is a visual representation of the button. */
+.cke_button_icon {
+  cursor: inherit;
+  background-repeat: no-repeat;
+  margin-top: 1px;
+  width: 16px;
+  height: 16px;
+  float: left;
+}
+
+.cke_rtl .cke_button_icon {
+  float: right;
+}
+
+.cke_hc .cke_button_icon {
+  display: none;
+}
+
+/* The label of the button that stores the name of the feature. By default,
+   labels are invisible. They can be revealed on demand though. */
+.cke_button_label {
+  display: none;
+  padding-left: 3px;
+  margin-top: 1px;
+  line-height: 17px;
+  vertical-align: middle;
+  float: left;
+  cursor: default;
+  color: #474747;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+
+.cke_rtl .cke_button_label {
+  padding-right: 3px;
+  padding-left: 0;
+  float: right;
+}
+
+.cke_hc .cke_button_label {
+  padding: 0;
+  display: inline-block;
+  font-size: 12px;
+}
+
+.cke_rtl .cke_button_arrow {
+  margin-right: 5px;
+  margin-left: 0;
+}
+
+.cke_hc .cke_button_arrow {
+  font-size: 10px;
+  margin: 3px -2px 0 3px;
+  width: auto;
+  border: 0;
+}
+
+.cke_button_arrow {
+  padding: 0 8px 5px 0;
+  position: relative;
+  top: -4px;
+  opacity: .8
+}
+
+/* The vertical separator which is used within a single toolbar to split
+   buttons into sub-groups. */
+.cke_toolbar_separator {
+  float: left;
+  background-color: #c0c0c0;
+  background-color: rgba(0, 0, 0, .2);
+  margin: 5px 2px 0;
+  height: 18px;
+  width: 1px;
+}
+
+.cke_rtl .cke_toolbar_separator {
+  float: right;
+}
+
+.cke_hc .cke_toolbar_separator {
+  width: 0;
+  border-left: 1px solid;
+  margin: 1px 5px 0 0px;
+}
+
+/* The dummy element that breaks toolbars.
+   Once it is placed, the very next toolbar is moved to the new row. */
+.cke_toolbar_break {
+  display: block;
+  clear: left;
+}
+
+.cke_rtl .cke_toolbar_break {
+  clear: right;
+}
+
+/* The button, which when clicked hides (collapses) all the toolbars. */
+.cke_toolbox_collapser {
+  width: 12px;
+  height: 11px;
+  float: right;
+  margin: 11px 0 0;
+  font-size: 0;
+  cursor: default;
+  text-align: center;
+  border: 1px solid #a6a6a6;
+  border-bottom-color: #979797;
+  border-radius: 3px;
+  background: #fff;
+}
+
+.cke_toolbox_collapser.cke_toolbox_collapser_min {
+  margin: 0 2px 4px;
+}
+
+.cke_rtl .cke_toolbox_collapser {
+  float: left;
+}
+
+/* The CSS arrow, which belongs to the toolbar collapser. */
+.cke_toolbox_collapser .cke_arrow {
+  display: inline-block;
+  height: 0;
+  width: 0;
+  font-size: 0;
+  margin-top: 1px;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid #474747;
+  border-top: 3px solid transparent;
+}
+
+.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow {
+  margin-top: 4px;
+  border-bottom-color: transparent;
+  border-top-color: #474747;
+}
+
+.cke_hc .cke_toolbox_collapser .cke_arrow {
+  font-size: 8px;
+  width: auto;
+  border: 0;
+  margin-top: 0;
+  margin-right: 2px;
+}