MOBILE-3320 quiz: Improve drag and drop question styles
parent
f55d59c1c2
commit
0e70d9e353
|
@ -1,4 +1,4 @@
|
|||
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
|
||||
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
|
||||
<!-- Content is outside the core-loading to let the script calculate drag items position -->
|
||||
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
|
||||
|
||||
|
@ -15,10 +15,13 @@
|
|||
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
|
||||
(afterRender)="textRendered()">
|
||||
</core-format-text>
|
||||
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
|
||||
<ion-label>
|
||||
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
|
||||
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
|
|
@ -2,18 +2,29 @@
|
|||
|
||||
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
|
||||
:host {
|
||||
.addon-qtype-ddimageortext-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
}
|
||||
--ddimageortext-border-drop: var(--gray-darker);
|
||||
--ddimageortext-draghome-background: nth($core-dd-question-colors, 2);
|
||||
}
|
||||
|
||||
.addon-qtype-ddimageortext-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
}
|
||||
|
||||
core-format-text ::ng-deep {
|
||||
|
||||
div.ddarea {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
user-select: none;
|
||||
|
||||
core-format-text ::ng-deep {
|
||||
.qtext {
|
||||
margin-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.droparea img {
|
||||
border: 1px solid var(--gray-darker);
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
@ -27,9 +38,9 @@
|
|||
}
|
||||
|
||||
div.draghome {
|
||||
border: 1px solid var(--gray-darker);
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
cursor: pointer;
|
||||
background-color: #B0C4DE;
|
||||
background-color: var(--ddimageortext-draghome-background);
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
@ -39,37 +50,40 @@
|
|||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
|
||||
}
|
||||
}
|
||||
|
||||
.group2 {
|
||||
border-radius: 10px 0 0 0;
|
||||
border-radius: var(--core-dd-question-radius) 0 0 0;
|
||||
}
|
||||
.group3 {
|
||||
border-radius: 0 10px 0 0;
|
||||
border-radius: 0 var(--core-dd-question-radius) 0 0;
|
||||
}
|
||||
.group4 {
|
||||
border-radius: 0 0 10px 0;
|
||||
border-radius: 0 0 var(--core-dd-question-radius) 0;
|
||||
}
|
||||
.group5 {
|
||||
border-radius: 0 0 0 10px;
|
||||
border-radius: 0 0 0 var(--core-dd-question-radius);
|
||||
}
|
||||
.group6 {
|
||||
border-radius: 0 10px 10px 0;
|
||||
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
|
||||
}
|
||||
.group7 {
|
||||
border-radius: 10px 0 0 10px;
|
||||
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
|
||||
}
|
||||
.group8 {
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
|
||||
}
|
||||
|
||||
.drag {
|
||||
border: 1px solid var(--gray-darker);
|
||||
color: var(--ion-text-color);
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
.drag.placed {
|
||||
border: 1px solid var(--ddimageortext-border-drop);
|
||||
}
|
||||
.dragitems.readonly .drag {
|
||||
cursor: auto;
|
||||
}
|
||||
|
@ -85,16 +99,11 @@
|
|||
.drag img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.ddarea {
|
||||
text-align : center;
|
||||
position: relative;
|
||||
}
|
||||
.dropbackground {
|
||||
margin:0 auto;
|
||||
}
|
||||
.dropzone {
|
||||
border: 1px solid var(--gray-darker);
|
||||
border: 1px solid var(--ddimageortext-border-drop);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
@ -104,7 +113,7 @@
|
|||
}
|
||||
|
||||
div.dragitems div.draghome, div.dragitems div.drag {
|
||||
font:13px/1.231 arial,helvetica,clean,sans-serif;
|
||||
font: 13px/1.231 arial, helvetica, clean, sans-serif;
|
||||
}
|
||||
.drag.beingdragged {
|
||||
z-index: 3;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
|
||||
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
|
||||
<!-- Content is outside the core-loading to let the script calculate drag items position -->
|
||||
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
|
||||
|
||||
|
@ -14,9 +14,13 @@
|
|||
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
|
||||
(afterRender)="textRendered()">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
|
||||
<ion-label>
|
||||
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
|
||||
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
|
||||
</core-format-text>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
|
|
@ -1,150 +1,150 @@
|
|||
// Style ddmarker content a bit. Almost all these styles are copied from Moodle.
|
||||
:host {
|
||||
.addon-qtype-ddmarker-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
.addon-qtype-ddmarker-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
}
|
||||
|
||||
core-format-text ::ng-deep {
|
||||
.ddarea, .ddform {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
core-format-text ::ng-deep {
|
||||
.ddarea, .ddform {
|
||||
user-select: none;
|
||||
}
|
||||
.qtext {
|
||||
margin-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qtext {
|
||||
margin-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
.droparea {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.droparea {
|
||||
display: inline-block;
|
||||
}
|
||||
div.droparea img {
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div.droparea img {
|
||||
border: 1px solid var(--gray-darker);
|
||||
max-width: 100%;
|
||||
}
|
||||
.dropzones svg {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.dropzones svg {
|
||||
z-index: 3;
|
||||
}
|
||||
.dragitem.beingdragged .markertext {
|
||||
z-index: 5;
|
||||
box-shadow: var(--core-dd-question-selected-shadow);
|
||||
}
|
||||
|
||||
.dragitem.beingdragged .markertext {
|
||||
z-index: 5;
|
||||
box-shadow: var(--core-dd-question-selected-shadow);
|
||||
}
|
||||
|
||||
.dragitems, // Previous to 3.9.
|
||||
.draghomes {
|
||||
&.readonly {
|
||||
.dragitem,
|
||||
.marker {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dragitem, // Previous to 3.9.
|
||||
.draghome,
|
||||
.marker {
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
&.dragplaceholder {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
&.active {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.unplaced {
|
||||
position: relative;
|
||||
}
|
||||
&.placed {
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.droparea {
|
||||
.dragitems, // Previous to 3.9.
|
||||
.draghomes {
|
||||
&.readonly {
|
||||
.dragitem,
|
||||
.marker {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
z-index: 2;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
div.ddarea {
|
||||
text-align: center;
|
||||
.dragitem, // Previous to 3.9.
|
||||
.draghome,
|
||||
.marker {
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
div.ddarea .dropzones,
|
||||
div.ddarea .markertexts {
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 80px;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.dropbackground {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.dragitems div.draghome,
|
||||
div.dragitems div.dragitem,
|
||||
div.draghome,
|
||||
div.drag,
|
||||
div.draghomes div.marker,
|
||||
div.marker,
|
||||
div.drag {
|
||||
font: 13px/1.231 arial,helvetica,clean,sans-serif;
|
||||
}
|
||||
div.dragitems span.markertext,
|
||||
div.draghomes span.markertext,
|
||||
div.markertexts span.markertext {
|
||||
margin: 0 5px;
|
||||
z-index: 2;
|
||||
background-color: var(--white);
|
||||
border: 2px solid var(--gray-darker);
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
border-radius: 10px;
|
||||
color: var(--ion-text-color);
|
||||
}
|
||||
div.markertexts span.markertext {
|
||||
z-index: 3;
|
||||
background-color: var(--yellow-light);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--yellow);
|
||||
position: absolute;
|
||||
}
|
||||
span.wrongpart {
|
||||
background-color: var(--yellow-light);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--yellow);
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
opacity: 0.6;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
div.dragitems img.target,
|
||||
div.draghomes img.target {
|
||||
position: absolute;
|
||||
left: -7px; /* This must be half the size of the target image, minus 0.5. */
|
||||
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
|
||||
}
|
||||
div.dragitems div.draghome img.target,
|
||||
div.draghomes div.marker img.target {
|
||||
display: none;
|
||||
&.dragplaceholder {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
&.active {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.unplaced {
|
||||
position: relative;
|
||||
}
|
||||
&.placed {
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.droparea {
|
||||
.dragitem,
|
||||
.marker {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
div.ddarea {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
div.ddarea .dropzones,
|
||||
div.ddarea .markertexts {
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 80px;
|
||||
position: absolute;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.dropbackground {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.dragitems div.draghome,
|
||||
div.dragitems div.dragitem,
|
||||
div.draghome,
|
||||
div.drag,
|
||||
div.draghomes div.marker,
|
||||
div.marker,
|
||||
div.drag {
|
||||
font: 13px/1.231 arial, helvetica, clean, sans-serif;
|
||||
}
|
||||
div.dragitems span.markertext,
|
||||
div.draghomes span.markertext,
|
||||
div.markertexts span.markertext {
|
||||
margin: 0 5px;
|
||||
z-index: 2;
|
||||
background-color: var(--ion-item-background);
|
||||
border: 2px solid var(--core-dd-question-border);
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
border-radius: 10px;
|
||||
color: var(--ion-text-color);
|
||||
}
|
||||
div.markertexts span.markertext {
|
||||
z-index: 3;
|
||||
background-color: var(--yellow-light);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--yellow);
|
||||
position: absolute;
|
||||
color: var(--black);
|
||||
}
|
||||
span.wrongpart {
|
||||
background-color: var(--yellow-light);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--yellow);
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
opacity: 0.6;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
color: var(--black);
|
||||
}
|
||||
div.dragitems img.target,
|
||||
div.draghomes img.target {
|
||||
position: absolute;
|
||||
left: -7px; /* This must be half the size of the target image, minus 0.5. */
|
||||
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
|
||||
}
|
||||
div.dragitems div.draghome img.target,
|
||||
div.draghomes div.marker img.target {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
|
||||
<div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
|
||||
<!-- Content is outside the core-loading to let the script calculate drag items position -->
|
||||
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
|
||||
|
||||
<ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded">
|
||||
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
|
||||
<ion-label>
|
||||
<ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
|
||||
<ion-item>
|
||||
|
@ -14,10 +14,12 @@
|
|||
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
|
||||
(afterRender)="textRendered()">
|
||||
</core-format-text>
|
||||
|
||||
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
|
||||
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
|
||||
</core-format-text>
|
||||
|
||||
<div class="drags"></div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
|
|
@ -1,126 +1,120 @@
|
|||
@import "~core/features/question/question";
|
||||
|
||||
// Style ddwtos content a bit. Almost all these styles are copied from Moodle.
|
||||
:host {
|
||||
.addon-qtype-ddwtos-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
.addon-qtype-ddwtos-container {
|
||||
min-height: 80px; // To display the loading.
|
||||
}
|
||||
|
||||
core-format-text ::ng-deep, .drags ::ng-deep {
|
||||
.qtext {
|
||||
margin-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
core-format-text ::ng-deep, .drags ::ng-deep {
|
||||
.qtext {
|
||||
margin-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
.draghome {
|
||||
margin-bottom: 1em;
|
||||
max-width: calc(100%);
|
||||
}
|
||||
|
||||
.draghome {
|
||||
margin-bottom: 1em;
|
||||
max-width: calc(100%);
|
||||
}
|
||||
.answertext {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.answertext {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.drop {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.draghome, .drag {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.draghome, .drag.unplaced{
|
||||
border: 1px solid var(--core-dd-question-border);
|
||||
}
|
||||
.draghome {
|
||||
visibility: hidden;
|
||||
}
|
||||
.drag {
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.drag.selected,
|
||||
.drop.selected {
|
||||
z-index: 3;
|
||||
box-shadow: var(--core-dd-question-selected-shadow);
|
||||
}
|
||||
|
||||
.drop {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border: 1px solid var(--gray-darker);
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.draghome, .drag {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.draghome, .drag.unplaced{
|
||||
border: 1px solid var(--gray-darker);
|
||||
}
|
||||
.draghome {
|
||||
visibility: hidden;
|
||||
}
|
||||
.drag {
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.drag.selected {
|
||||
z-index: 3;
|
||||
box-shadow: var(--core-dd-question-selected-shadow);
|
||||
}
|
||||
&.notreadonly .drag,
|
||||
&.notreadonly .draghome,
|
||||
&.notreadonly .drop,
|
||||
&.notreadonly .answercontainer {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.drop.selected {
|
||||
border-color: var(--yellow-light);
|
||||
box-shadow: 0 0 5px 5px var(--yellow-light);
|
||||
}
|
||||
&.readonly .drag,
|
||||
&.readonly .draghome,
|
||||
&.readonly .drop,
|
||||
&.readonly .answercontainer {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.notreadonly .drag,
|
||||
&.notreadonly .draghome,
|
||||
&.notreadonly .drop,
|
||||
&.notreadonly .answercontainer {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
span.incorrect {
|
||||
background-color: var(--core-question-incorrect-color-bg);
|
||||
}
|
||||
span.correct {
|
||||
background-color: var(--core-question-correct-color-bg);
|
||||
}
|
||||
|
||||
&.readonly .drag,
|
||||
&.readonly .draghome,
|
||||
&.readonly .drop,
|
||||
&.readonly .answercontainer {
|
||||
cursor: default;
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
|
||||
}
|
||||
}
|
||||
|
||||
span.incorrect {
|
||||
background-color: var(--core-question-incorrect-color-bg);
|
||||
}
|
||||
span.correct {
|
||||
background-color: var(--core-question-correct-color-bg);
|
||||
}
|
||||
.group2 {
|
||||
border-radius: var(--core-dd-question-radius) 0 0 0;
|
||||
}
|
||||
.group3 {
|
||||
border-radius: 0 var(--core-dd-question-radius) 0 0;
|
||||
}
|
||||
.group4 {
|
||||
border-radius: 0 0 var(--core-dd-question-radius) 0;
|
||||
}
|
||||
.group5 {
|
||||
border-radius: 0 0 0 var(--core-dd-question-radius);
|
||||
}
|
||||
.group6 {
|
||||
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
|
||||
}
|
||||
.group7 {
|
||||
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
|
||||
}
|
||||
.group8 {
|
||||
border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
|
||||
}
|
||||
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: var(--ion-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.group2 {
|
||||
border-radius: 10px 0 0 0;
|
||||
}
|
||||
.group3 {
|
||||
border-radius: 0 10px 0 0;
|
||||
}
|
||||
.group4 {
|
||||
border-radius: 0 0 10px 0;
|
||||
}
|
||||
.group5 {
|
||||
border-radius: 0 0 0 10px;
|
||||
}
|
||||
.group6 {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
.group7 {
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.group8 {
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 80%;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.4em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.2em;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 80%;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.4em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.2em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -237,7 +237,7 @@ $colors-dark: (
|
|||
|
||||
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
|
||||
|
||||
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
|
||||
$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
|
||||
|
||||
/*
|
||||
* Layout Breakpoints
|
||||
|
|
|
@ -117,6 +117,7 @@
|
|||
--core-question-feedback-background-color: var(--yellow-dark);
|
||||
|
||||
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
|
||||
--core-dd-question-border: var(--gray-light);
|
||||
|
||||
--addon-messages-message-bg: #{$addon-messages-message-bg-dark};
|
||||
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};
|
||||
|
|
|
@ -275,6 +275,8 @@
|
|||
--core-question-feedback-background-color: var(--yellow-light);
|
||||
|
||||
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
|
||||
--core-dd-question-radius: 10px;
|
||||
--core-dd-question-border: var(--gray-darker);
|
||||
|
||||
@if ($core-more-icon) {
|
||||
--core-more-icon: #{$core-more-icon};
|
||||
|
|
Loading…
Reference in New Issue