Files
Airframe-React/app/styles/plugins/_react-quill.scss
2019-08-15 00:54:44 +02:00

98 lines
2.1 KiB
SCSS
Executable File

/* React Quill Overrides */
@import "~bootstrap/scss/mixins/_border-radius.scss";
@import "./../variables.scss";
.card .quill {
display: flex;
flex-direction: column;
.ql-toolbar {
// START Bootstrap Card Header
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
+ .list-group {
.list-group-item:first-child {
border-top: 0;
}
}
// END Bootstrap Card Header
flex: 0 0 auto;
border-width: 0 0 1px 0;
background-color: $gray-100;
}
.ql-container {
font-family: inherit;
font-size: inherit;
flex: 1 1 auto;
border: none;
display: flex;
flex-direction: column;
.ql-editor {
flex: 1 1 auto;
color: $body-color;
background: $white;
}
}
.ql-snow .ql-stroke {
stroke: $body-color;
}
.ql-snow .ql-fill {
fill: $body-color;
}
}
// Button SVG modifiers
.quill .ql-snow {
.ql-stroke {
stroke: $gray-500;
}
.ql-fill {
fill: $gray-500;
}
}
// Hover button SVG modifiers
.quill .ql-snow.ql-toolbar button:hover {
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}
// Active button SVG modifiers
.quill .ql-snow.ql-toolbar button.ql-active {
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}
// Focus button SVG modifiers
.quill .ql-snow.ql-toolbar button:focus {
outline: none;
.ql-stroke {
stroke: $primary;
}
.ql-fill {
fill: $primary;
}
}