MOBILE-2782 styles: Join RTE and editor styles
Pau Ferrer Ocaña
parent
0c9545a7f8
commit
6d97bbb2b6
|
|
@ -6,5 +6,6 @@
|
||||||
},
|
},
|
||||||
"type": "ionic-angular",
|
"type": "ionic-angular",
|
||||||
"watchPatterns": [],
|
"watchPatterns": [],
|
||||||
"pro_id": "com.moodle.moodlemobile"
|
"pro_id": "com.moodle.moodlemobile",
|
||||||
}
|
"id": "com.moodle.moodlemobile"
|
||||||
|
}
|
||||||
|
|
|
||||||
344
src/app/app.scss
344
src/app/app.scss
|
|
@ -69,27 +69,6 @@ ion-app.app-root {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin core-headings() {
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 2.6rem;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
h6 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Define an alternative way to set a heading in an item without using a heading tag.
|
// Define an alternative way to set a heading in an item without using a heading tag.
|
||||||
// This is done for accessibility reasons when a heading is semantically incorrect.
|
// This is done for accessibility reasons when a heading is semantically incorrect.
|
||||||
.item .item-heading {
|
.item .item-heading {
|
||||||
|
|
@ -212,92 +191,97 @@ ion-app.app-root {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Format Text */
|
/** Format Text - Show more styles. */
|
||||||
|
/** Styles of elements inside the directive should be placed in format-text.scss */
|
||||||
core-format-text {
|
core-format-text {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
|
||||||
|
|
||||||
core-format-text[maxHeight],
|
&[maxHeight],
|
||||||
core-format-text[ng-reflect-max-height] {
|
&[ng-reflect-max-height] {
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
/* Force display inline */
|
|
||||||
&.inline {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is to allow clicks in radio/checkbox content.
|
|
||||||
&.core-text-formatted {
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: auto;
|
|
||||||
|
|
||||||
.core-show-more {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.core-shortened) {
|
|
||||||
max-height: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.core-shortened {
|
|
||||||
color: $gray-darker;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 50px;
|
|
||||||
|
|
||||||
.core-show-more {
|
|
||||||
color: color($colors, dark);
|
|
||||||
@include text-align('end');
|
|
||||||
font-size: 14px;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
@include position(null, 0, 0, null);
|
|
||||||
z-index: 1001;
|
|
||||||
background-color: $white;
|
|
||||||
@include padding(null, null, null, 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
@include position(null, 0, 0, 0);
|
|
||||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
||||||
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
|
||||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
||||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
||||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
||||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.core-expand-in-fullview {
|
|
||||||
.core-show-more {
|
|
||||||
@include svg-background-image($item-md-detail-push-svg, true);
|
|
||||||
@include padding-horizontal(null, 18px);
|
|
||||||
@include background-position(end, 0, center);
|
|
||||||
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 14px 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
core-format-text[singleLine="true"],
|
|
||||||
core-format-text[ng-reflect-single-line="true"] {
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* Force display inline */
|
||||||
|
&.inline {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is to allow clicks in radio/checkbox content.
|
||||||
|
&.core-text-formatted {
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
|
||||||
|
.core-show-more {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.core-shortened) {
|
||||||
|
max-height: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.core-shortened {
|
||||||
|
color: $gray-darker;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 50px;
|
||||||
|
|
||||||
|
.core-show-more {
|
||||||
|
color: color($colors, dark);
|
||||||
|
@include text-align('end');
|
||||||
|
font-size: 14px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
@include position(null, 0, 0, null);
|
||||||
|
z-index: 1001;
|
||||||
|
background-color: $white;
|
||||||
|
@include padding(null, null, null, 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
@include position(null, 0, 0, 0);
|
||||||
|
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||||
|
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
||||||
|
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||||
|
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||||
|
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.core-expand-in-fullview {
|
||||||
|
.core-show-more {
|
||||||
|
@include svg-background-image($item-md-detail-push-svg, true);
|
||||||
|
@include padding-horizontal(null, 18px);
|
||||||
|
@include background-position(end, 0, center);
|
||||||
|
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 14px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[singleLine="true"],
|
||||||
|
&[ng-reflect-single-line="true"] {
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio, video, a, iframe {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-media-adapt-width {
|
.core-media-adapt-width {
|
||||||
|
|
@ -336,84 +320,6 @@ ion-app.app-root {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
core-format-text {
|
|
||||||
audio, video, a, iframe {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix lists styles in core-format-text.
|
|
||||||
ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
ul, ol {
|
|
||||||
-webkit-padding-start: 15px;
|
|
||||||
list-style-position: inside;
|
|
||||||
ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style-type: lower-latin;
|
|
||||||
}
|
|
||||||
ul, ol {
|
|
||||||
list-style-position: inside;
|
|
||||||
@include margin(null, null, null, 15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.core-disable-media-adapt,
|
|
||||||
.core-disable-media-adapt .core-media-adapt-width {
|
|
||||||
max-width: none !important;
|
|
||||||
max-height: none !important;
|
|
||||||
width: initial !important;
|
|
||||||
height: initial !important;
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include core-headings();
|
|
||||||
|
|
||||||
img.icon {
|
|
||||||
font-size: 16px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item core-format-text {
|
|
||||||
@include core-headings();
|
|
||||||
}
|
|
||||||
|
|
||||||
.item core-format-text,
|
|
||||||
core-format-text {
|
|
||||||
p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
|
|
||||||
ion-card core-format-text img {
|
|
||||||
width: min-content;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Message item.
|
|
||||||
.item-message {
|
|
||||||
core-format-text > p:only-child {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Media item, ideal for icons.
|
// Media item, ideal for icons.
|
||||||
.item-media {
|
.item-media {
|
||||||
min-height: $item-media-height + ($content-padding * 2);
|
min-height: $item-media-height + ($content-padding * 2);
|
||||||
|
|
@ -506,7 +412,6 @@ ion-app.app-root {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// File uploader.
|
// File uploader.
|
||||||
// -------------------------
|
// -------------------------
|
||||||
.core-fileuploader-file-handler {
|
.core-fileuploader-file-handler {
|
||||||
|
|
@ -607,85 +512,6 @@ ion-app.app-root {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Atto styles
|
|
||||||
// -------------------------
|
|
||||||
.atto_image_preview {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_preview_box {
|
|
||||||
max-height: 200px;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor_atto_content img {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_size {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_size input[type=checkbox] {
|
|
||||||
@include margin(null, 1em, null, 1em);
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_size input[type=text] {
|
|
||||||
width: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_size label {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_button_text-top,
|
|
||||||
.atto_image_button_middle,
|
|
||||||
.atto_image_button_text-bottom,
|
|
||||||
.atto_image_button_left,
|
|
||||||
.atto_image_button_right {
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0.5em;
|
|
||||||
|
|
||||||
&.img-responsive {
|
|
||||||
/* If the image is display: block then linking the image to URLs won't work. */
|
|
||||||
/*display: inline-block;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_button_text-top {
|
|
||||||
vertical-align: text-top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_button_middle {
|
|
||||||
vertical-align: middle; }
|
|
||||||
|
|
||||||
.atto_image_button_text-bottom {
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rtl:begin:ignore*/
|
|
||||||
.atto_image_button_left {
|
|
||||||
@include float(start);
|
|
||||||
@include margin(0, 0.5em, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.atto_image_button_right {
|
|
||||||
@include float(end);
|
|
||||||
@include margin(0, 0, 0, 0.5em);
|
|
||||||
}
|
|
||||||
/*rtl:end:ignore*/
|
|
||||||
|
|
||||||
.action-sheet-group {
|
.action-sheet-group {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,28 +48,6 @@ ion-app.app-root core-rich-text-editor {
|
||||||
*:empty:after {
|
*:empty:after {
|
||||||
content: '\200B';
|
content: '\200B';
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
ul, ol {
|
|
||||||
-webkit-padding-start: 15px;
|
|
||||||
list-style-position: inside;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
list-style-type: lower-latin;
|
|
||||||
}
|
|
||||||
ul, ol {
|
|
||||||
list-style-position: inside;
|
|
||||||
@include margin(null, null, null, 15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-textarea {
|
.core-textarea {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
/** Styles to match web platform */
|
||||||
|
ion-app.app-root core-format-text,
|
||||||
|
ion-app.app-root .item core-format-text,
|
||||||
|
ion-app.app-root .core-rte-editor {
|
||||||
|
@include core-headings();
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix lists styles in core-format-text.
|
||||||
|
ul {
|
||||||
|
padding-left: 1rem;
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
-webkit-padding-start: 15px;
|
||||||
|
list-style-position: inside;
|
||||||
|
ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style-type: lower-latin;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
list-style-position: inside;
|
||||||
|
@include margin(null, null, null, 15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-disable-media-adapt,
|
||||||
|
.core-disable-media-adapt .core-media-adapt-width {
|
||||||
|
max-width: none !important;
|
||||||
|
max-height: none !important;
|
||||||
|
width: initial !important;
|
||||||
|
height: initial !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.icon {
|
||||||
|
font-size: 16px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Atto styles
|
||||||
|
// -------------------------
|
||||||
|
.atto_image_preview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_preview_box {
|
||||||
|
max-height: 200px;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor_atto_content img {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_size {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_size input[type=checkbox] {
|
||||||
|
@include margin(null, 1em, null, 1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_size input[type=text] {
|
||||||
|
width: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_size label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_button_text-top,
|
||||||
|
.atto_image_button_middle,
|
||||||
|
.atto_image_button_text-bottom,
|
||||||
|
.atto_image_button_left,
|
||||||
|
.atto_image_button_right {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
|
||||||
|
&.img-responsive {
|
||||||
|
/* If the image is display: block then linking the image to URLs won't work. */
|
||||||
|
/*display: inline-block;*/
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_button_text-top {
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_button_middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_button_text-bottom {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*rtl:begin:ignore*/
|
||||||
|
.atto_image_button_left {
|
||||||
|
@include float(start);
|
||||||
|
@include margin(0, 0.5em, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.atto_image_button_right {
|
||||||
|
@include float(end);
|
||||||
|
@include margin(0, 0, 0, 0.5em);
|
||||||
|
}
|
||||||
|
/*rtl:end:ignore*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Special fixes
|
||||||
|
// -------------------------
|
||||||
|
ion-app.app-root {
|
||||||
|
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
|
||||||
|
ion-card core-format-text img {
|
||||||
|
width: min-content;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Message item.
|
||||||
|
.item-message core-format-text > p:only-child {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -403,3 +403,6 @@ $core-question-state-incorrect-color: $red-light !default;
|
||||||
// Font Awesome
|
// Font Awesome
|
||||||
$fa-font-path: $font-path;
|
$fa-font-path: $font-path;
|
||||||
@import "font-awesome";
|
@import "font-awesome";
|
||||||
|
|
||||||
|
// Format text styles.
|
||||||
|
@import "format-text";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue