230 lines
5.9 KiB
SCSS
230 lines
5.9 KiB
SCSS
// npm package: tinymce
|
|
// github link: https://github.com/tinymce/tinymce
|
|
|
|
.tox.tox-tinymce {
|
|
border: 1px solid $input-border-color;
|
|
border-radius: $input-border-radius;
|
|
.tox-promotion {
|
|
background-color: $input-bg;
|
|
}
|
|
.tox-menubar,
|
|
.tox-toolbar-overlord,
|
|
.tox-toolbar,
|
|
.tox-toolbar__overflow,
|
|
.tox-toolbar__primary {
|
|
background-color: $input-bg;
|
|
background-image: none;
|
|
border-bottom: 1px solid $input-border-color;
|
|
}
|
|
.tox-toolbar-overlord {
|
|
border-bottom: none;
|
|
border-top: 1px solid $input-border-color;
|
|
}
|
|
&:not(.tox-tinymce-inline) .tox-editor-header {
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
.tox-edit-area__iframe { // Not working
|
|
background-color: $input-bg;
|
|
}
|
|
.tox-edit-area::before {
|
|
border: 1px solid $input-focus-border-color;
|
|
}
|
|
&.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
|
|
// border-right-color: $input-border-color;
|
|
// border-left-color: $input-border-color; // RTL
|
|
}
|
|
.tox-statusbar {
|
|
background-color: $input-bg;
|
|
border-color: $input-border-color;
|
|
color: $secondary;
|
|
}
|
|
.tox-statusbar a,
|
|
.tox-statusbar__path-item,
|
|
.tox-statusbar__wordcount {
|
|
color: $secondary;
|
|
}
|
|
.tox-mbtn {
|
|
color: var(--#{$prefix}body-color);
|
|
background: transparent;
|
|
}
|
|
.tox-tbtn {
|
|
background: transparent;
|
|
}
|
|
.tox-tbtn:hover {
|
|
background: $component-hover-bg;
|
|
color: $component-hover-color;
|
|
svg {
|
|
fill: $component-hover-color;
|
|
}
|
|
}
|
|
.tox-tbtn:focus:not(.tox-tbtn--disabled) {
|
|
color: $component-active-color;
|
|
svg {
|
|
fill: $component-active-color;
|
|
}
|
|
}
|
|
.tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
|
|
background: $component-hover-bg;
|
|
color: $component-hover-color;
|
|
}
|
|
.tox-mbtn:focus:not(:disabled)::after {
|
|
box-shadow: none;
|
|
}
|
|
.tox-mbtn:focus:not(:disabled),
|
|
.tox-mbtn:focus:not(:disabled).tox-mbtn--active:focus,
|
|
.tox-mbtn--active {
|
|
background: $component-active-bg;
|
|
color: $component-active-color;
|
|
}
|
|
.tox-tbtn svg {
|
|
fill: $secondary;
|
|
}
|
|
.tox-tbtn--disabled svg,
|
|
.tox-tbtn--disabled:hover svg,
|
|
.tox-tbtn:disabled svg,
|
|
.tox-tbtn:disabled:hover svg {
|
|
fill: $input-disabled-bg;
|
|
}
|
|
.tox-split-button:hover {
|
|
box-shadow: 0 0 0 1px $input-border-color inset;
|
|
}
|
|
.tox-split-button:focus {
|
|
background: $component-active-bg;
|
|
&::after {
|
|
box-shadow: none;
|
|
}
|
|
svg {
|
|
fill: $component-active-color;
|
|
}
|
|
}
|
|
.tox-tbtn--enabled,
|
|
.tox-tbtn--enabled:hover,
|
|
.tox-tbtn:focus {
|
|
background: $component-active-bg;
|
|
svg {
|
|
fill: $component-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
div.tox {
|
|
.tox-menu {
|
|
background-color: $dropdown-bg;
|
|
border-color: $dropdown-border-color;
|
|
}
|
|
.tox-collection__item {
|
|
color: $dropdown-color;
|
|
}
|
|
.tox-collection--list .tox-collection__item--enabled {
|
|
background-color: $component-active-bg;
|
|
color: $component-active-color;
|
|
}
|
|
.tox-collection--list .tox-collection__group {
|
|
border-color: var(--#{$prefix}border-color);
|
|
}
|
|
.tox-collection--toolbar .tox-collection__item--active {
|
|
background-color: $component-active-bg;
|
|
}
|
|
.tox-collection--toolbar .tox-collection__item--enabled,
|
|
.tox-collection--toolbar .tox-collection__item--enabled.tox-collection__item--active,
|
|
.tox-collection--toolbar .tox-collection__item--enabled.tox-collection__item--active:hover {
|
|
background-color: $component-active-bg;
|
|
color: $component-active-color;
|
|
}
|
|
.tox-collection--list .tox-collection__item--active {
|
|
background-color: $component-hover-bg;
|
|
|
|
}
|
|
.tox-collection--toolbar .tox-collection__item--active:focus::after {
|
|
box-shadow: none;
|
|
}
|
|
.tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
|
|
color: var(--#{$prefix}body-color);
|
|
background-color: $component-hover-bg;
|
|
}
|
|
.tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
|
|
color: $component-hover-color;
|
|
}
|
|
|
|
|
|
.tox-dialog-wrap__backdrop {
|
|
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
|
|
|
|
}
|
|
.tox-dialog,
|
|
.tox-dialog__header,
|
|
.tox-dialog__footer {
|
|
background-color: var(--#{$prefix}body-bg);
|
|
border-color: var(--#{$prefix}border-color);
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
.tox-button--secondary {
|
|
@extend .btn-secondary;
|
|
}
|
|
.tox-button {
|
|
@extend .btn;
|
|
&:not(.tox-button--naked):not(.tox-button--secondary) {
|
|
@extend .btn-primary;
|
|
}
|
|
}
|
|
.tox-button--secondary:hover:not(:disabled) {
|
|
background-color: $secondary;
|
|
border-color: $secondary;
|
|
color: $white;
|
|
}
|
|
.tox-button--naked:hover:not(:disabled) {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
.tox-button--naked.tox-button--icon:hover:not(:disabled) {
|
|
color: $secondary;
|
|
}
|
|
.tox-button--naked:focus:not(:disabled) {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
.tox-label {
|
|
color: var(--#{$prefix}body-color);
|
|
margin-bottom: $form-label-margin-bottom;
|
|
}
|
|
.tox-listboxfield .tox-listbox--select,
|
|
.tox-textarea,
|
|
.tox-textfield,
|
|
.tox-toolbar-textfield {
|
|
background-color: $input-bg;
|
|
border-color: $input-border-color;
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
.tox-form__group {
|
|
@extend .mb-3;
|
|
}
|
|
.tox-listboxfield .tox-listbox--select:focus,
|
|
.tox-textarea:focus,
|
|
.tox-textfield:focus {
|
|
background-color: $input-focus-bg;
|
|
border-color: $input-focus-border-color;
|
|
box-shadow: none;
|
|
}
|
|
.tox-dialog__table tbody tr {
|
|
border-color: var(--#{$prefix}border-color);
|
|
}
|
|
.tox-dialog__body {
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
.tox-dialog__body-nav-item {
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
.tox-dialog__body-nav-item--active {
|
|
color: $component-active-bg;
|
|
border-bottom: none;
|
|
}
|
|
.tox-dialog__body-nav-item:focus {
|
|
background-color: transparent;
|
|
}
|
|
.tox-button::before {
|
|
box-shadow: none;
|
|
}
|
|
} |