2018-12-11 13:03:43 +01:00

104 lines
2.5 KiB
SCSS

ion-app.app-root core-rich-text-editor {
height: 40vh;
overflow: hidden;
min-height: 200px; /* Just in case vh is not supported */
min-height: 40vh;
width: 100%;
position: relative;
display: block;
> div {
position: absolute;
@include position(0, 0, 0, 0);
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.core-rte-editor, .core-textarea {
padding: 2px;
margin: 2px;
width: 100%;
resize: none;
background-color: $white;
flex-grow: 1;
* {
overflow: hidden;
}
}
.core-rte-editor {
-webkit-user-select: auto !important;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
cursor: text;
img {
@include padding(null, null, null, 2px);
max-width: 95%;
}
&:empty:before {
content: attr(data-placeholder-text);
display: block;
color: $gray-light;
font-weight: bold;
}
// Make empty elements selectable (to move the cursor).
*:empty:after {
content: '\200B';
}
}
.core-textarea {
position: relative;
textarea {
margin: 0 !important;
padding: 0;
height: 100% !important;
width: 100% !important;
resize: none;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
@include position(0, 0, 0, 0);
}
}
div.core-rte-toolbar {
background: $gray-darker;
@include margin(0px, 1px, 15px, 1px);
text-align: center;
flex-grow: 0;
width: 100%;
z-index: 1;
.core-rte-buttons {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
button {
background: $gray-darker;
color: $white;
font-size: 1.1em;
height: 35px;
min-width: 30px;
@include padding(null, 3px, null, 3px);
@include border-end(qpx, solid, $gray-dark);
border-bottom: 1px solid $gray-dark;
@include position(-6px, 0, null, null);
flex-grow: 1;
margin: 0;
}
}
}
}
body.keyboard-is-open ion-app.app-root core-rich-text-editor {
min-height: 200px;
}