313 lines
5.7 KiB
SCSS
313 lines
5.7 KiB
SCSS
// Styles necessary for Quill
|
|
|
|
$LIST_STYLE: (decimal, lower-alpha, lower-roman) !default;
|
|
$LIST_STYLE_WIDTH: 1.2em !default;
|
|
$LIST_STYLE_MARGIN: 0.3em !default;
|
|
$LIST_STYLE_OUTER_WIDTH: $LIST_STYLE_MARGIN + $LIST_STYLE_WIDTH !default;
|
|
$MAX_INDENT: 9 !default;
|
|
|
|
@function resets($from, $to) {
|
|
$list: (unquote('')); // sass wont allow empty "()" property list
|
|
|
|
@for $num from $from through $to {
|
|
$list: append($list, unquote('list-' + $num), space);
|
|
}
|
|
|
|
@return $list;
|
|
}
|
|
|
|
.ql-container {
|
|
box-sizing: border-box;
|
|
// font-family: Helvetica, Arial, sans-serif;
|
|
// font-size: 13px;
|
|
height: 100%;
|
|
margin: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.ql-container.ql-disabled {
|
|
.ql-tooltip {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.ql-container:not(.ql-disabled) {
|
|
li[data-list='checked'],
|
|
li[data-list='unchecked'] {
|
|
> .ql-ui {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ql-clipboard {
|
|
left: -100000px;
|
|
height: 1px;
|
|
overflow-y: hidden;
|
|
position: absolute;
|
|
top: 50%;
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.ql-editor {
|
|
box-sizing: border-box;
|
|
counter-reset: resets(0, $MAX_INDENT);
|
|
line-height: 1.42;
|
|
height: 100%;
|
|
outline: none;
|
|
overflow-y: auto;
|
|
padding: 12px 15px;
|
|
tab-size: 4;
|
|
-moz-tab-size: 4;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.ql-editor, .quill-render {
|
|
> * {
|
|
cursor: text;
|
|
}
|
|
|
|
// p,
|
|
// ol,
|
|
// pre,
|
|
// blockquote,
|
|
// h1,
|
|
// h2,
|
|
// h3,
|
|
// h4,
|
|
// h5,
|
|
// h6 {
|
|
// margin: 0;
|
|
// padding: 0;
|
|
// }
|
|
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@supports (counter-set: none) {
|
|
counter-set: resets(0, $MAX_INDENT);
|
|
}
|
|
@supports not (counter-set: none) {
|
|
counter-reset: resets(0, $MAX_INDENT);
|
|
}
|
|
}
|
|
|
|
table {
|
|
@extend .table;
|
|
@extend .table-bordered;
|
|
@extend .table-sm;
|
|
}
|
|
|
|
|
|
ol {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
padding-left: $LIST_STYLE_OUTER_WIDTH;
|
|
position: relative;
|
|
|
|
> .ql-ui:before {
|
|
display: inline-block;
|
|
margin-left: -1 * $LIST_STYLE_OUTER_WIDTH;
|
|
margin-right: $LIST_STYLE_MARGIN;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
width: $LIST_STYLE_WIDTH;
|
|
}
|
|
}
|
|
|
|
li[data-list='checked'],
|
|
li[data-list='unchecked'] {
|
|
> .ql-ui {
|
|
color: #777;
|
|
}
|
|
}
|
|
|
|
li[data-list='bullet'] > .ql-ui:before {
|
|
content: '\2022';
|
|
}
|
|
|
|
li[data-list='checked'] > .ql-ui:before {
|
|
content: '\2611';
|
|
}
|
|
|
|
li[data-list='unchecked'] > .ql-ui:before {
|
|
content: '\2610';
|
|
}
|
|
|
|
li[data-list] {
|
|
@supports (counter-set: none) {
|
|
counter-set: resets(1, $MAX_INDENT);
|
|
}
|
|
@supports not (counter-set: none) {
|
|
counter-reset: resets(1, $MAX_INDENT);
|
|
}
|
|
}
|
|
|
|
li[data-list='ordered'] {
|
|
counter-increment: list-0;
|
|
> .ql-ui:before {
|
|
content: unquote('counter(list-0, ' + nth($LIST_STYLE, 1) + ')') '. '; // indexs stars with 1
|
|
}
|
|
}
|
|
|
|
@for $num from 1 through $MAX_INDENT {
|
|
li[data-list='ordered'].ql-indent-#{$num} {
|
|
counter-increment: unquote('list-' + $num);
|
|
|
|
> .ql-ui:before {
|
|
content: unquote(
|
|
'counter(list-' + $num + ', ' + nth($LIST_STYLE, 1 + ($num % 3)) + ')'
|
|
)
|
|
'. ';
|
|
}
|
|
}
|
|
|
|
@if $num < $MAX_INDENT {
|
|
li[data-list].ql-indent-#{$num} {
|
|
@supports (counter-set: none) {
|
|
counter-set: resets(($num + 1), $MAX_INDENT);
|
|
}
|
|
@supports not (counter-set: none) {
|
|
counter-reset: resets(($num + 1), $MAX_INDENT);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $num from 1 through $MAX_INDENT {
|
|
.ql-indent-#{$num}:not(.ql-direction-rtl) {
|
|
padding-left: #{3 * $num}em;
|
|
}
|
|
li.ql-indent-#{$num}:not(.ql-direction-rtl) {
|
|
padding-left: #{(3 * $num + $LIST_STYLE_OUTER_WIDTH)};
|
|
}
|
|
.ql-indent-#{$num}.ql-direction-rtl.ql-align-right {
|
|
padding-right: #{(3 * $num)}em;
|
|
}
|
|
li.ql-indent-#{$num}.ql-direction-rtl.ql-align-right {
|
|
padding-right: #{(3 * $num + $LIST_STYLE_OUTER_WIDTH)};
|
|
}
|
|
}
|
|
|
|
li.ql-direction-rtl {
|
|
padding-right: $LIST_STYLE_OUTER_WIDTH;
|
|
|
|
> .ql-ui:before {
|
|
margin-left: $LIST_STYLE_MARGIN;
|
|
margin-right: -1 * $LIST_STYLE_OUTER_WIDTH;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
table {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
|
|
td {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.ql-code-block-container {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.ql-video {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ql-video.ql-align-center {
|
|
margin: 0 auto;
|
|
}
|
|
.ql-video.ql-align-right {
|
|
margin: 0 0 0 auto;
|
|
}
|
|
.ql-bg-black {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
.ql-bg-red {
|
|
background-color: rgb(230, 0, 0);
|
|
}
|
|
.ql-bg-orange {
|
|
background-color: rgb(255, 153, 0);
|
|
}
|
|
.ql-bg-yellow {
|
|
background-color: rgb(255, 255, 0);
|
|
}
|
|
.ql-bg-green {
|
|
background-color: rgb(0, 138, 0);
|
|
}
|
|
.ql-bg-blue {
|
|
background-color: rgb(0, 102, 204);
|
|
}
|
|
.ql-bg-purple {
|
|
background-color: rgb(153, 51, 255);
|
|
}
|
|
.ql-color-white {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.ql-color-red {
|
|
color: rgb(230, 0, 0);
|
|
}
|
|
.ql-color-orange {
|
|
color: rgb(255, 153, 0);
|
|
}
|
|
.ql-color-yellow {
|
|
color: rgb(255, 255, 0);
|
|
}
|
|
.ql-color-green {
|
|
color: rgb(0, 138, 0);
|
|
}
|
|
.ql-color-blue {
|
|
color: rgb(0, 102, 204);
|
|
}
|
|
.ql-color-purple {
|
|
color: rgb(153, 51, 255);
|
|
}
|
|
.ql-font-serif {
|
|
font-family: Georgia, Times New Roman, serif;
|
|
}
|
|
.ql-font-monospace {
|
|
font-family: Monaco, Courier New, monospace;
|
|
}
|
|
.ql-size-small {
|
|
font-size: 0.75em;
|
|
}
|
|
.ql-size-large {
|
|
font-size: 1.5em;
|
|
}
|
|
.ql-size-huge {
|
|
font-size: 2.5em;
|
|
}
|
|
.ql-direction-rtl {
|
|
direction: rtl;
|
|
text-align: inherit;
|
|
}
|
|
.ql-align-center {
|
|
text-align: center;
|
|
}
|
|
.ql-align-justify {
|
|
text-align: justify;
|
|
}
|
|
.ql-align-right {
|
|
text-align: right;
|
|
}
|
|
.ql-ui {
|
|
position: absolute;
|
|
}
|
|
}
|