// // quill.scss // Quill plugin overrides //
.ql-container {
font-family: $font-family-base;
}
.ql-toolbar {
position: relative; padding: $input-padding-y $input-padding-x; background-color: $input-bg; border: $input-border-width solid $input-border-color; border-radius: $input-border-radius $input-border-radius 0 0; color: $input-color;
}
.ql-toolbar + .ql-container {
margin-top: -$border-width;
}
.ql-toolbar + .ql-container .ql-editor {
border-top-left-radius: 0; border-top-right-radius: 0;
}
.ql-editor {
min-height: $line-height-base * $font-size-base * 4; display: block; width: 100%; padding: $input-padding-y $input-padding-x; font-size: $font-size-base; line-height: $input-line-height; color: $input-color; background-color: $input-bg; background-clip: padding-box; border: $input-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. @if $enable-rounded { // Manually use the if/else instead of the mixin to account for iOS override border-radius: $input-border-radius; } @else { // Otherwise undo the iOS default border-radius: 0; } @include box-shadow($input-box-shadow); @include transition($input-transition); // Unstyle the caret on `<select>`s in IE10+. &::-ms-expand { background-color: transparent; border: 0; } // Customize the `:focus` state to imitate native WebKit styles. @include form-control-focus($ignore-warning: true);
}
.ql-hidden {
position: absolute; transform: scale(0);
}
// Placeholder
.ql-editor.ql-blank::before {
top: $input-padding-y; left: $input-padding-x; font-style: normal; color: $input-placeholder-color;
} .ql-editor:focus {
color: #12263F; background-color: #FFFFFF; border-color: $blue; outline: 0; box-shadow: none, transparent;
}
.ql-editor:focus::before {
display: none;
}
// Toolbar
.ql-formats {
padding-left: .5rem; padding-right: .5rem; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; }
}
.ql-toolbar button {
padding: 0 .25rem; background: none; border: none; color: $body-color; cursor: pointer; transition: $transition-base; &:hover { color: $primary; } &:first-child { margin-left: -.25rem; }
}
.ql-toolbar .ql-active {
color: $primary;
}
.ql-toolbar button svg {
height: $font-size-lg; width: $font-size-lg;
}
.ql-toolbar .ql-stroke {
stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ql-toolbar .ql-thin {
stroke-width: 1;
}
.ql-toolbar .ql-fill {
fill: currentColor;
}
.ql-toolbar input.ql-image {
position: absolute; transform: scale(0);
}
// Tooltip
.ql-tooltip {
position: absolute; display: flex; flex-wrap: nowrap; width: 18.5rem; background-color: $popover-bg; border: $popover-border-width solid $popover-border-color; border-radius: $popover-border-radius; padding: $input-padding-y $input-padding-x; margin-top: .6rem; // arrow width box-shadow: $popover-box-shadow; // Arrow &:before, &:after { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); } &:before { border-bottom: .6rem solid $popover-border-color; border-left: .6rem solid transparent; border-right: .6rem solid transparent; } &:after { border-bottom: .5rem solid $popover-bg; border-left: .5rem solid transparent; border-right: .5rem solid transparent; }
}
.ql-container .ql-tooltip:hover {
display: flex !important;
}
.ql-tooltip .ql-preview {
width: 100%; @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); @include transition($btn-transition);
}
.ql-tooltip.ql-editing .ql-preview {
display: none;
}
.ql-tooltip input {
display: none; width: 100%; padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); background-color: transparent; font-size: $font-size-sm; line-height: $input-line-height-sm; border: none; color: $input-color; &:focus { outline: none; }
}
.ql-tooltip.ql-editing input {
display: block;
}
.ql-tooltip .ql-action, .ql-tooltip .ql-remove {
margin-left: .25rem;
}
.ql-tooltip .ql-action::before, .ql-tooltip .ql-remove::before {
display: inline-block; font-weight: $btn-font-weight; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: $btn-border-width solid transparent; cursor: pointer; @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); @include transition($btn-transition); // Share hover and focus styles @include hover-focus { text-decoration: none; } &:focus, &.focus { outline: 0; box-shadow: $btn-focus-box-shadow; }
}
.ql-tooltip .ql-action::before, .ql-tooltip.ql-editing .ql-action::before {
@include button-variant($primary, $primary);
}
.ql-tooltip .ql-action::before {
content: 'Edit';
}
.ql-tooltip.ql-editing .ql-action::before {
content: 'Save';
}
.ql-tooltip .ql-remove::before {
@include button-variant($white, $white); content: 'Remove'; border-color: $gray-300;
}
.ql-tooltip.ql-editing .ql-remove::before {
display: none;
}
// Formatting
.ql-editor blockquote {
margin-bottom: $spacer; font-size: $blockquote-font-size;
}
.ql-editor img {
max-width: 100%; height: auto;
}