1456 lines
38 KiB
SCSS
1456 lines
38 KiB
SCSS
|
@import "inc/bootstrap";
|
||
|
|
@import "inc/farbtastic";
|
||
|
|
@import "shared/functions";
|
||
|
|
|
||
|
|
$mainContainer : '.item-editor-item';
|
||
|
|
|
||
|
|
//all shades of colors
|
||
|
|
$itemCreatorBlue90: mix(#fff, $info, 90%);
|
||
|
|
$itemCreatorBlue95: mix(#fff, $info, 95%);
|
||
|
|
$itemCreatorBlue20 : mix(#fff, $info, 20%);
|
||
|
|
|
||
|
|
//colors used accross the item creator
|
||
|
|
$itemCreatorSideBarBgColor: mix(#fff, $grey, 85%);
|
||
|
|
$itemCreatorSideBarHeaderColor: mix(#fff, $websiteBorder, 70%);
|
||
|
|
$itemCreatorAddOptionBorderColor: $itemCreatorBlue20;
|
||
|
|
$itemCreatorAddOptionBgColor: $itemCreatorBlue90;
|
||
|
|
$itemCreatorMiniTlbBorderColor: $itemCreatorBlue20;
|
||
|
|
$itemCreatorMiniTlbBgColor: $itemCreatorBlue95;
|
||
|
|
|
||
|
|
// @todo this a temporary solution, see taoQtiItem/views/js/qtiCreator/editor/gridEditor/draggable.js, createDraggable()
|
||
|
|
span.dragging, img.dragging.ui-draggable-dragging {
|
||
|
|
opacity: 0.8 !important;
|
||
|
|
z-index: 999999;
|
||
|
|
font-size: 5rem;
|
||
|
|
padding: 20px 80px;
|
||
|
|
position: absolute;
|
||
|
|
background: rgba($uiClickableDefaultBg, 1);
|
||
|
|
-webkit-box-shadow: 1px 1px 6px 2px #777;
|
||
|
|
box-shadow: 1px 1px 6px 2px #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
img.dragging.ui-draggable-dragging {
|
||
|
|
max-height: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
%editHover {
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid whiten($info, .5);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
%editActive {
|
||
|
|
cursor: default;
|
||
|
|
z-index: 9;
|
||
|
|
border: 1px solid whiten($info, .2);
|
||
|
|
-webkit-box-shadow: 1px 1px 3px 1px whiten($info, .2);
|
||
|
|
box-shadow: 1px 1px 3px 1px whiten($info, .2);
|
||
|
|
}
|
||
|
|
|
||
|
|
%mini-tlb {
|
||
|
|
display: none; //initially hidden
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
@include font-size(13, true);
|
||
|
|
|
||
|
|
border: 1px $itemCreatorMiniTlbBorderColor solid !important;
|
||
|
|
list-style-type: none;
|
||
|
|
cursor: pointer !important;
|
||
|
|
border-radius: 0;
|
||
|
|
background-color: $itemCreatorMiniTlbBgColor;
|
||
|
|
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
@include font-size(16);
|
||
|
|
position: relative;
|
||
|
|
top: 4px;
|
||
|
|
color: $info;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tlb-button:hover {
|
||
|
|
background-color: $info;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
color: $itemCreatorMiniTlbBgColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&[data-edit="answer"]{
|
||
|
|
.tlb-button:hover {
|
||
|
|
background-color: $itemCreatorMiniTlbBgColor;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tlb-button {
|
||
|
|
width: 26px;
|
||
|
|
height: 24px;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
display: inline-block;
|
||
|
|
color: $info !important;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
font-size: 14px !important;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
color: $uiClickableHoverBg !important;
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
color: $info !important;
|
||
|
|
}
|
||
|
|
.score {
|
||
|
|
left: 0;
|
||
|
|
min-width: 0;
|
||
|
|
width: 35px !important;
|
||
|
|
position: relative;
|
||
|
|
top: 1px;
|
||
|
|
height: 22px;
|
||
|
|
padding: 0px 4px
|
||
|
|
}
|
||
|
|
&[data-role="cke-launcher"] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
ul[data-button-group] {
|
||
|
|
background: transparent !important;
|
||
|
|
border:none;
|
||
|
|
& > li {
|
||
|
|
display:none;
|
||
|
|
background: transparent !important;
|
||
|
|
min-width: 0;
|
||
|
|
padding: 0;
|
||
|
|
float:none;
|
||
|
|
span {
|
||
|
|
color: $textColor;
|
||
|
|
text-shadow: none !important;
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
display:inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
%add-option{
|
||
|
|
color: $info;
|
||
|
|
border: 1px $itemCreatorAddOptionBorderColor dashed !important;
|
||
|
|
list-style-type: none;
|
||
|
|
cursor: pointer !important;
|
||
|
|
border-radius: 3px;
|
||
|
|
background-color: $itemCreatorAddOptionBgColor;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
@include font-size(16);
|
||
|
|
position: relative;
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
color: $info;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
opacity: .8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-selector {
|
||
|
|
optgroup {
|
||
|
|
font-style: normal;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-weight: normal;
|
||
|
|
font-size: 1.4rem;
|
||
|
|
color: $darkBrown;
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
option {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: #222
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#appearance-trigger {
|
||
|
|
.icon-item {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#item-editor-widget-bar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#panel-authoring {
|
||
|
|
height: calc(100vh - 135px);
|
||
|
|
}
|
||
|
|
#item-editor-scope {
|
||
|
|
height: calc(100% - 35px);
|
||
|
|
& > nav.action-bar {
|
||
|
|
z-index: 15;
|
||
|
|
padding: 0;
|
||
|
|
@include flex-container();
|
||
|
|
|
||
|
|
.action-group {
|
||
|
|
padding: 5px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.menu-left {
|
||
|
|
@include simple-flex-box(195px);
|
||
|
|
border-right: 1px solid $uiGeneralContentBorder;
|
||
|
|
}
|
||
|
|
.menu-right {
|
||
|
|
@include simple-flex-box(195px);
|
||
|
|
border-left: 1px solid $uiGeneralContentBorder;
|
||
|
|
}
|
||
|
|
.menu {
|
||
|
|
@include simple-flex-box(auto);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel-authoring {
|
||
|
|
height: calc(100vh - 135px);
|
||
|
|
#item-editor-scope {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#item-editor-wrapper {
|
||
|
|
margin: 0;
|
||
|
|
position: relative;
|
||
|
|
background-color: $itemCreatorSideBarBgColor;
|
||
|
|
height: 100%;
|
||
|
|
@include flex-container();
|
||
|
|
|
||
|
|
.item-editor-item {
|
||
|
|
position : relative;
|
||
|
|
[class*=" col-"], [class^="col-"] {
|
||
|
|
padding: 3px; //not consistent with commonRenderer ! @todo : fix this
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-response-related {
|
||
|
|
.response-mapping-info {
|
||
|
|
.feedback-info {
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-css-editor {
|
||
|
|
select {
|
||
|
|
min-width: 0 !important;
|
||
|
|
width: auto !important
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// hide all sections on right sidebar
|
||
|
|
.sidebar-right-section-box {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@import "qtiCreator/_outcome-editor";
|
||
|
|
@import "qtiCreator/_interaction-sidebar";
|
||
|
|
@import "qtiCreator/_math-input";
|
||
|
|
|
||
|
|
.item-editor-sidebar-wrapper {
|
||
|
|
background: $canvas;
|
||
|
|
position: relative;
|
||
|
|
padding-bottom: 35px;
|
||
|
|
|
||
|
|
@include simple-flex-box(195px);
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
|
||
|
|
&.left-bar {
|
||
|
|
.item-editor-sidebar {
|
||
|
|
border-right: 1px solid $uiGeneralContentBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.right-bar {
|
||
|
|
.item-editor-sidebar {
|
||
|
|
border-left: 1px solid $uiGeneralContentBg;
|
||
|
|
}
|
||
|
|
.tooltip {
|
||
|
|
max-width: 200px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-sidebar {
|
||
|
|
|
||
|
|
.tool-group {
|
||
|
|
h2 {
|
||
|
|
@include font-size(14);
|
||
|
|
border-top: 1px white solid;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 0 6px;
|
||
|
|
letter-spacing: .06rem;
|
||
|
|
clear: left;
|
||
|
|
margin: 0 0 0 0;
|
||
|
|
color: black();
|
||
|
|
position: relative;
|
||
|
|
background: $itemCreatorSideBarHeaderColor;
|
||
|
|
cursor: pointer;
|
||
|
|
.icon-down {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.icon-up {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
&.closed {
|
||
|
|
.icon-down {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.icon-up {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
position: absolute;
|
||
|
|
top: 9px;
|
||
|
|
right: 9px;
|
||
|
|
}
|
||
|
|
&.toggler:after {
|
||
|
|
float: right;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
hr {
|
||
|
|
margin: 6px 8px 4px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
padding: 15px 5px 8px 5px;
|
||
|
|
.panel {
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
hr {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
padding: 0 0 12px 0;
|
||
|
|
margin: 0;
|
||
|
|
@include font-size(14);
|
||
|
|
max-width: 450px;
|
||
|
|
display: inline-block;
|
||
|
|
&.full-width{
|
||
|
|
max-width: none;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
select, input[type="text"], textarea {
|
||
|
|
width: 100%;
|
||
|
|
&.has-icon {
|
||
|
|
width: 140px;
|
||
|
|
min-width: 140px;
|
||
|
|
max-width: 140px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
select.short {
|
||
|
|
width: auto;
|
||
|
|
min-width: 100px;
|
||
|
|
}
|
||
|
|
.icon-help.tooltipstered {
|
||
|
|
cursor: pointer;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
&:last-child, .panel-row {
|
||
|
|
margin-bottom: 7px
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
padding: 0;
|
||
|
|
@include font-size(13);
|
||
|
|
&.has-icon {
|
||
|
|
width: 140px;
|
||
|
|
min-width: 140px;
|
||
|
|
max-width: 140px;
|
||
|
|
display: inline-block
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input.score {
|
||
|
|
width: 40px;
|
||
|
|
min-width: 40px;
|
||
|
|
}
|
||
|
|
button.block {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
.feedbackRule-panel {
|
||
|
|
.adder {
|
||
|
|
:before {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.subpanel {
|
||
|
|
@include simple-border();
|
||
|
|
background-color:white(.8);
|
||
|
|
padding:8px;
|
||
|
|
margin: 5px 0;
|
||
|
|
@include font-size(13);
|
||
|
|
}
|
||
|
|
.icon-help.tooltipstered{
|
||
|
|
color: $info;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.inset {
|
||
|
|
margin-left: 6px;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
&:first-child {
|
||
|
|
right: auto;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.reset-group {
|
||
|
|
select {
|
||
|
|
width: 140px;
|
||
|
|
min-width: 140px;
|
||
|
|
max-width: 140px;
|
||
|
|
}
|
||
|
|
.reset-button {
|
||
|
|
position: relative;
|
||
|
|
top: 6px;
|
||
|
|
right: 3px;
|
||
|
|
float: right;
|
||
|
|
padding: 0;
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
text-align: right;
|
||
|
|
cursor: pointer;
|
||
|
|
&:hover {
|
||
|
|
color: $uiClickableHoverBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-unit-input-box {
|
||
|
|
position: relative;
|
||
|
|
display: inline;
|
||
|
|
input {
|
||
|
|
padding-right: 28px;
|
||
|
|
}
|
||
|
|
.unit-indicator {
|
||
|
|
width: 28px;
|
||
|
|
line-height: 28px;
|
||
|
|
height: 28px;
|
||
|
|
color: mix(#fff, $textColor, 50%);
|
||
|
|
@include border-radius();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#item-editor-item-resizer {
|
||
|
|
.reset-group {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cbr-right {
|
||
|
|
width: 100%;
|
||
|
|
span {
|
||
|
|
&.icon-checkbox,
|
||
|
|
&.icon-radio {
|
||
|
|
float: right
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.spinner {
|
||
|
|
min-width: 100px;
|
||
|
|
line-height: 22px;
|
||
|
|
& ~ .tooltipstered {
|
||
|
|
top: 6px;
|
||
|
|
}
|
||
|
|
&.short {
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.min-max-panel .spinner {
|
||
|
|
min-width: 90px;
|
||
|
|
}
|
||
|
|
.incrementer.large{
|
||
|
|
min-width: 55px !important;
|
||
|
|
}
|
||
|
|
.incrementer-ctrl {
|
||
|
|
top: -3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#item-editor-font-size-changer {
|
||
|
|
padding-top: 1px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: table;
|
||
|
|
width: 140px;
|
||
|
|
float: left;
|
||
|
|
a {
|
||
|
|
display: table-cell;
|
||
|
|
padding: 0 10px;
|
||
|
|
color: $textColor;
|
||
|
|
text-decoration: none !important;
|
||
|
|
width: 70px;
|
||
|
|
line-height: 21px;
|
||
|
|
text-align: left;
|
||
|
|
&.icon-smaller {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon-smaller {
|
||
|
|
@include font-size(12);
|
||
|
|
}
|
||
|
|
.icon-larger {
|
||
|
|
@include font-size(18);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// css manager
|
||
|
|
#style-sheet-toggler {
|
||
|
|
.style-sheet-toggler {
|
||
|
|
@include font-size(11);
|
||
|
|
@include simple-border(#ccc);
|
||
|
|
display: inline-block;
|
||
|
|
width: 20px;
|
||
|
|
height: 18px;
|
||
|
|
padding: 2px 0 1px 3px;
|
||
|
|
cursor: pointer !important;
|
||
|
|
margin: 0 4px 0 2px;
|
||
|
|
&.disabled {
|
||
|
|
&:before {
|
||
|
|
@include tao-icon-setup;
|
||
|
|
@include icon-eye-slash;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.style-sheet-label-editor {
|
||
|
|
display: none;
|
||
|
|
width: 100px;
|
||
|
|
min-width: 100px;
|
||
|
|
padding: 0px 3px;
|
||
|
|
@include font-size(13);
|
||
|
|
position: relative;
|
||
|
|
top: 1px;
|
||
|
|
}
|
||
|
|
.icon-download, .icon-bin {
|
||
|
|
float: right;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-left: 5px;
|
||
|
|
position: relative;
|
||
|
|
top: 2px;
|
||
|
|
}
|
||
|
|
.not-available, .not-available * {
|
||
|
|
color: whiten($textColor, .5);
|
||
|
|
cursor: default !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-label {
|
||
|
|
display: inline-block;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 100px;
|
||
|
|
line-height: .9;
|
||
|
|
position: relative;
|
||
|
|
@include font-size(13);
|
||
|
|
top: 2px;
|
||
|
|
&:hover {
|
||
|
|
color: $uiClickableHoverBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#stylesheet-uploader {
|
||
|
|
width: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-color-picker {
|
||
|
|
.color-trigger {
|
||
|
|
width: 40px;
|
||
|
|
display: inline-block;
|
||
|
|
height: 18px;
|
||
|
|
float: right;
|
||
|
|
font-size: 9px;
|
||
|
|
cursor: pointer;
|
||
|
|
@include border-radius();
|
||
|
|
@include simple-border();
|
||
|
|
}
|
||
|
|
.reset-button {
|
||
|
|
@include font-size(13);
|
||
|
|
top: 5px;
|
||
|
|
}
|
||
|
|
#color-picker-container {
|
||
|
|
top: -235px;
|
||
|
|
label {
|
||
|
|
max-width: 60% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.color-picker {
|
||
|
|
margin-top: -5px
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.compass {
|
||
|
|
position: relative;
|
||
|
|
width: 100px;
|
||
|
|
margin: auto;
|
||
|
|
span {
|
||
|
|
display: block;
|
||
|
|
@include font-size(25);
|
||
|
|
line-height: 1.1;
|
||
|
|
width: 33%;
|
||
|
|
background: $uiGeneralContentBg;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px dotted #aaa;
|
||
|
|
&:hover {
|
||
|
|
background: $uiClickableHoverBg;
|
||
|
|
color: $textHighlight
|
||
|
|
}
|
||
|
|
&.icon-up, &.icon-down {
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
&.icon-left {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
&.icon-right {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// begin pop-up
|
||
|
|
|
||
|
|
.sidebar-popup {
|
||
|
|
background: $canvas;
|
||
|
|
padding: 1px;
|
||
|
|
position: absolute;
|
||
|
|
right: ($sidebarWidth + 2) * 1px;
|
||
|
|
top: 37px; //height of blue action bar plus a bit
|
||
|
|
width: $sidebarWidth * 1px;
|
||
|
|
@include vendor-prefix(box-shadow, 0 0 2px 0px rgba($websiteBorder,.75), property, (-webkit-, -moz-, ''));
|
||
|
|
display: none;
|
||
|
|
z-index: 15000;
|
||
|
|
.sidebar-popup-content {
|
||
|
|
overflow-y: auto;
|
||
|
|
& > .panel {
|
||
|
|
padding-left: 5px !important;
|
||
|
|
padding-right: 5px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sidebar-popup-title {
|
||
|
|
color: $textHighlight;
|
||
|
|
background: whiten($info, .2);
|
||
|
|
margin-bottom: 2px;
|
||
|
|
cursor: move;
|
||
|
|
a {
|
||
|
|
color: $textHighlight;
|
||
|
|
}
|
||
|
|
.closer {
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
right: 2px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
padding: 0 5px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
input, textarea {
|
||
|
|
width: 100%;
|
||
|
|
max-width: none;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
&.one-twenty-five {
|
||
|
|
width: $sidebarWidth * 1.25px;
|
||
|
|
}
|
||
|
|
&.one-fifty {
|
||
|
|
width: $sidebarWidth * 1.5px;
|
||
|
|
}
|
||
|
|
&.two {
|
||
|
|
width: $sidebarWidth * 2px;
|
||
|
|
}
|
||
|
|
&.two-twenty-five {
|
||
|
|
width: $sidebarWidth * 2.25px;
|
||
|
|
}
|
||
|
|
&.two-fifty {
|
||
|
|
width: $sidebarWidth * 2.5px;
|
||
|
|
}
|
||
|
|
&.three {
|
||
|
|
width: $sidebarWidth * 3px;
|
||
|
|
}
|
||
|
|
&.three-twenty-five {
|
||
|
|
width: $sidebarWidth * 3.25px;
|
||
|
|
}
|
||
|
|
&.three-fifty {
|
||
|
|
width: $sidebarWidth * 3.5px;
|
||
|
|
}
|
||
|
|
&.mathml {
|
||
|
|
input {
|
||
|
|
display: none;
|
||
|
|
font-family: $monospaceFont;
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
height: 250px;
|
||
|
|
font-family: $monospaceFont;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.latex {
|
||
|
|
textarea {
|
||
|
|
display: none;
|
||
|
|
font-family: $monospaceFont;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.color-picker-container {
|
||
|
|
right:0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// end pop-up
|
||
|
|
|
||
|
|
#item-editor-panel {
|
||
|
|
@import "qtiCreator/_editor-bar";
|
||
|
|
// those elements cannot go lower as they style markup in the panel container
|
||
|
|
@import "qtiCreator/_table";
|
||
|
|
@import "qtiCreator/_widget-popup";
|
||
|
|
@import "qtiCreator/_tooltip";
|
||
|
|
|
||
|
|
padding: 0;
|
||
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAAAAAA7VNdtAAAFQElEQVR42iXWW45kSREEUDN/xM3M6h4GJCT2vyl2gVBPV1XeCHc3PjirOPFvQE0HWecC3rZ4D9JFcpqSEy4MRO2Cw6M7y6xFY/xaz9fuThJGVSVNpvK7jL3Ggoyp4NsDzjd8dYJS+H8/HtNCo1HjRoNxoto8Wj1xntjG41srvQ7S67JC9UN30vz3snNpfBrEyNaOi5g3ctJFeluZra4rgwJIpMema9qCmEWtsK/I+fpbeDfSXe+AlQMoSxlwreFXRifYhNd4DL6erzoImTTg83iJFbCoM2Z3QqoGeLSmix3Hcvp11yzyax6ujkMEaV02MD/xYB1j2/SoK+IOi738OidmWCrfzwa2zy975XQeOMxNu1+kFS2esEGHrU+vR48LNyVTyQnrz4WK6oVmkaProfD3o1bvRcfywb4/Xsf9IBi70Ethc9qdj2dJXrNiazeN1XDJ+rdbtHkNE/b6/v6JAALjhrn1YHy9A68JGAQCZ/IfIMyaz7OZZjjBQbg0mo3Hd8RnXKSp348L3cdc+6qF6ePCvPPPniFkFIka9P7jn9GVhx5WeT7jB+qOmTRD0xzec/OaovsMn1/TDyBk8/2Rfnq5E0debzcsHwgqNNkS2ylitYcsytui5a14jaCrYp1kjxPHTa/9zqRGxOd6lqgw79pJoX01SPCpW1edJSW3aiwJVifmfk77O1Lx6ESH4Nh5m8e46RzDxYMnzLBd49Lj7u44gRtXb99uRqoTJlicX/FY7O1mU2QjOfIXH7/19zhujmIxUeU+Y1QKf6YTLa8Oo6YHwLmkaAszyLJfczoMUJK0Ssfo6KM+OetMDtBI2/NUhw3uDJi2X7px2XGNqcjTafYRezNhNrERruMnbpiZXFwxjBmQaEouS1RfvtrwJmjhkNe7Yruln4DMBIEDOQ4uFA/O9jLTjJs1j7tcEYZK2NhqsD6f+5rqyB4ddCnj/R2ewSHpjuOPHdf00AChWR4EYtu0hRXEq97FqHFqbFTz/FZs9/eHVIYJpKPdeVdYw/DE8AKNFyGU7E7MBFDZ5kQ1zX0KzEDPwC7zz35dN4ygpi67/DaP19ij7ycgo6M3hZOvrnzPC4pq0F0wFaCAeYWFYFadZibt79fomJg38vbsoV2ghpuL3RO00EC6vjsc1sRrlaJbpnTUODAa2poFTr0XnfHuH7qtftuDGJPB5vfPPM6AQou7fIzWM4p4XMDEG2D1j8Bk70tqWVqbOzTHDco5l4rs4RA8O5aG6z62mfY6CIgvb8OACvvGIgC1Qx7Y1ExcLWmlHb0t8QBcYYAoeY/Y5t7lbY9uu+7xZwANoTKzaoYO63EvBFqYtK3rasyS/Db5ZIfPROCMjQlJoLuYBNkTENIk9JnLtGBdZwUQGvNmPRxdEfdb50cLevs1Elk7c50Rre4n/vOvQPqRPIRDmbEjsuAiImQDk9gpdlKw/fyh8K4JSMxmGXFfD3doyOvux32enindFoDMb3MF0IGK8gHTZgxoqggpTInvH9ao9B6Td9oo5qyBw8eBBntCRj5GOuTktVxz//XHk+p2mXrifiMokq5BR94DNkPCsJBt3f4071kDOQwd/hPz/rnHgbGRns3vxTOOy2ff5uf7mReOgQ4K8gDID62De5VRZe/rfuSMYKOrdsczymEhx4hTJyZvrbYYie0QBj/1V4agcVV4JXqmYgFb8sxYQ95BFdsNyPPHoadIqM1fLYdiT4gQ+P00xZfZih5YtkFn7Xdw7P/FIeltYjSfW+Q1IZ7wcQgU4DupThfe9aN3wtCUjJoLktqBD27/HztqGm4EFwGoAAAAAElFTkSuQmCC);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 100%;
|
||
|
|
@include simple-flex-box(auto);
|
||
|
|
|
||
|
|
&.has-item {
|
||
|
|
#item-editor-scroll-outer {
|
||
|
|
background-image: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-weight: 300;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.item-editor-drop-area {
|
||
|
|
min-height: 300px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
margin-top: 20px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.item-editor-row {
|
||
|
|
min-height: 100px;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: visible;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#item-editor-scoll-container{
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
@include simple-flex-box(auto);
|
||
|
|
overflow: auto;
|
||
|
|
#item-editor-scroll-inner {
|
||
|
|
padding: 80px 60px 20px;
|
||
|
|
}
|
||
|
|
#item-editor-scroll-outer {
|
||
|
|
background-image: url(data:image/gif;base64,R0lGODlhKwALAPEAAN3d3TMzM4mJiTMzMyH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=);
|
||
|
|
background-position: center 250px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-editor-item {
|
||
|
|
@include simple-border();
|
||
|
|
@include box-shadow(0px, 6px, 8px, 0px, mix(#fff, $darkBrown, 50%));
|
||
|
|
[class*=" col-"], [class^="col-"] {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inserting {
|
||
|
|
.widget-block, .widget-blockInteraction {
|
||
|
|
border: 1px dashed #ddd;
|
||
|
|
}
|
||
|
|
.widget-img {
|
||
|
|
img {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.hoverable {
|
||
|
|
.widget-box {
|
||
|
|
&.edit-sleep {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
display:block;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.widget-inline {
|
||
|
|
display: inline-block;
|
||
|
|
&.hover {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
&.edit-active {
|
||
|
|
@extend %editActive;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.widget-block {
|
||
|
|
display: block;
|
||
|
|
&.hover {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
&.edit-active {
|
||
|
|
@extend %editActive;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.widget-rubricBlock {
|
||
|
|
&.hover .qti-rubricBlock-body {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
&.edit-active .qti-rubricBlock-body {
|
||
|
|
@extend %editActive;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.widget-blockInteraction {
|
||
|
|
&.hover {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
&.edit-active {
|
||
|
|
@extend %editActive;
|
||
|
|
padding-top : 24px;
|
||
|
|
}
|
||
|
|
&.edit-question {
|
||
|
|
th.qti-choice {
|
||
|
|
&.hover {
|
||
|
|
.inner-wrapper {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.edit-choice {
|
||
|
|
.inner-wrapper {
|
||
|
|
@extend %editActive;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qti-choice:not(th) {
|
||
|
|
&.hover {
|
||
|
|
@extend %editHover;
|
||
|
|
}
|
||
|
|
&.edit-choice {
|
||
|
|
@extend %editActive;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.widget-img {
|
||
|
|
img {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-box {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
position: relative;
|
||
|
|
.overlay {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba($uiClickableDefaultBg, .5);
|
||
|
|
.message {
|
||
|
|
padding: 10px;
|
||
|
|
background: rgba($uiClickableDefaultBg, .6);
|
||
|
|
margin: auto;
|
||
|
|
position: absolute;
|
||
|
|
top: 40%;
|
||
|
|
left: 0;
|
||
|
|
bottom: auto;
|
||
|
|
right: auto;
|
||
|
|
display: block;
|
||
|
|
min-height: 30px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tlb-bar {
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
.tlb-wrapper {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
left : 0;
|
||
|
|
top: 0px;
|
||
|
|
display: block;
|
||
|
|
cursor: default;
|
||
|
|
color: white;
|
||
|
|
background: whiten($info, .1);
|
||
|
|
text-shadow: 1px 1px 0 blacken($info, .2);
|
||
|
|
z-index: 999;
|
||
|
|
|
||
|
|
-webkit-box-shadow: 0 0 0 1px whiten($info, .2);
|
||
|
|
box-shadow: 0 0 0 1px whiten($info, .2);
|
||
|
|
|
||
|
|
.tlb-title {
|
||
|
|
margin-top: 3px;
|
||
|
|
line-height: 1.4;
|
||
|
|
@include font-size(14, true);
|
||
|
|
}
|
||
|
|
.tlb {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
content: '';
|
||
|
|
height: 100%;
|
||
|
|
width: 10px;
|
||
|
|
position: absolute;
|
||
|
|
right: 100%;
|
||
|
|
top: 0;
|
||
|
|
background: linear-gradient(left, transparent, whiten($info, .2));
|
||
|
|
}
|
||
|
|
.state-switcher {
|
||
|
|
float: right;
|
||
|
|
padding: 0;
|
||
|
|
@include font-size(14, true);
|
||
|
|
}
|
||
|
|
& > div {
|
||
|
|
margin: 3px 0 2px;
|
||
|
|
}
|
||
|
|
.state-switcher {
|
||
|
|
margin-right: 15px;
|
||
|
|
|
||
|
|
.selected {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.link {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.separator {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tlb-button {
|
||
|
|
padding: 3px 6px 0px;
|
||
|
|
opacity: 0.8;
|
||
|
|
@include font-size(13);
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: bold;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
font-size: inherit;
|
||
|
|
text-shadow: 1px 1px 0 blacken($info, .2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> .common-tlb {
|
||
|
|
overflow: hidden;
|
||
|
|
margin: auto;
|
||
|
|
width: 20px;
|
||
|
|
display: none; //initially hidden
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
padding: 0;
|
||
|
|
background: rgba($uiClickableDefaultBg, .5);
|
||
|
|
}
|
||
|
|
&.hover > .common-tlb {
|
||
|
|
display: inline-block;
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
.float-space-top.cke_nose {
|
||
|
|
display: block;
|
||
|
|
right: 5px;
|
||
|
|
bottom: -6px;
|
||
|
|
}
|
||
|
|
.float-space-bottom.cke_nose {
|
||
|
|
display: block;
|
||
|
|
top: -6px;
|
||
|
|
}
|
||
|
|
&.invalid {
|
||
|
|
border: 1px solid $warning !important;
|
||
|
|
}
|
||
|
|
&.widget-blockInteraction {
|
||
|
|
.qti-choice {
|
||
|
|
&:not(th) {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
}
|
||
|
|
.inner-wrapper {
|
||
|
|
min-width: 1rem;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
& > div > div {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qti-interaction {
|
||
|
|
.add-option {
|
||
|
|
@extend %add-option;
|
||
|
|
& > div {
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
display: table-cell;
|
||
|
|
@include font-size(60);
|
||
|
|
position: static !important;
|
||
|
|
vertical-align: middle;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
top: 0;
|
||
|
|
left: auto;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qti-prompt .cke_editable{
|
||
|
|
margin-top: 1px;
|
||
|
|
}
|
||
|
|
&.qti-orderInteraction {
|
||
|
|
.qti-choice.edit-answer.active {
|
||
|
|
cursor: default;
|
||
|
|
z-index: 9;
|
||
|
|
border: 1px solid #3e7da7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.widget-ok {
|
||
|
|
display: none;
|
||
|
|
float: right;
|
||
|
|
margin: 5px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.widget-box-placeholder {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0;
|
||
|
|
min-width: 150px;
|
||
|
|
position: relative;
|
||
|
|
vertical-align: middle;
|
||
|
|
background-color: #eee;
|
||
|
|
}
|
||
|
|
[data-edit] {
|
||
|
|
display: none;
|
||
|
|
& > [class*=" col-"], [class^="col-"] {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
&.mini-tlb {
|
||
|
|
@extend %mini-tlb;
|
||
|
|
}
|
||
|
|
&.mini-tlb-label {
|
||
|
|
position: absolute;
|
||
|
|
top: -30px;
|
||
|
|
left: -10px;
|
||
|
|
background: $uiClickableDefaultBg;
|
||
|
|
label {
|
||
|
|
color: $info;
|
||
|
|
cursor: default;
|
||
|
|
@include font-size(12);
|
||
|
|
padding: 2px 4px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner-wrapper {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dummy-element {
|
||
|
|
min-width: 50px;
|
||
|
|
@include simple-border();
|
||
|
|
background-color: #eee;
|
||
|
|
font-style: italic;
|
||
|
|
color: white;
|
||
|
|
padding: 0;
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 24px;
|
||
|
|
cursor: default;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
font-size: inherit;
|
||
|
|
line-height: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-inline{
|
||
|
|
z-index: 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-inline,
|
||
|
|
.inline-text-wrapper {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
width: 100%;
|
||
|
|
top: -2px;
|
||
|
|
}
|
||
|
|
& ~ span.mini-tlb[data-edit]{
|
||
|
|
position: absolute !important;
|
||
|
|
top: -2px !important;
|
||
|
|
right: -32px !important;
|
||
|
|
.tlb-button {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
height: 24px !important;
|
||
|
|
width: 24px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mini-tlb[data-edit]{
|
||
|
|
right:-32px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-include,
|
||
|
|
.qti-hottext,
|
||
|
|
.qti-gap,
|
||
|
|
.dummy-element {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
top: -2px;
|
||
|
|
}
|
||
|
|
& ~ span.mini-tlb[data-edit]{
|
||
|
|
position: absolute !important;
|
||
|
|
top: -2px !important;
|
||
|
|
right: -30px !important;
|
||
|
|
.tlb-button {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
height: 24px !important;
|
||
|
|
width: 24px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mini-tlb[data-edit]{
|
||
|
|
right:-32px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qti-hottext {
|
||
|
|
.hottext-content {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qti-gap{
|
||
|
|
margin-right: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@import "qtiCreator/_object";
|
||
|
|
@import "qtiCreator/_choice";
|
||
|
|
@import "qtiCreator/_order";
|
||
|
|
@import "qtiCreator/_associate";
|
||
|
|
@import "qtiCreator/_match";
|
||
|
|
@import "qtiCreator/_inline-choice";
|
||
|
|
@import "qtiCreator/_text-entry";
|
||
|
|
@import "qtiCreator/_end-attempt";
|
||
|
|
@import "qtiCreator/_extended-text";
|
||
|
|
@import "qtiCreator/_gap-match";
|
||
|
|
@import "qtiCreator/_hottext";
|
||
|
|
@import "qtiCreator/_rubric-block";
|
||
|
|
@import "qtiCreator/_math";
|
||
|
|
@import "qtiCreator/_mapping-editor";
|
||
|
|
@import "qtiCreator/_graphic";
|
||
|
|
@import "qtiCreator/_graphic-gap";
|
||
|
|
@import "qtiCreator/_grid-editor";
|
||
|
|
@import "qtiCreator/_custom";
|
||
|
|
@import "qtiCreator/_element-selector";
|
||
|
|
@import "qtiCreator/_include";
|
||
|
|
@import "qtiCreator/_item_buttons";
|
||
|
|
|
||
|
|
/* Below is a temporary solution to address Bug #2768. Eventually this will be fixed by implementing feature #2771. */
|
||
|
|
.qti-hottextInteraction {
|
||
|
|
.mini-tlb {
|
||
|
|
right: -31px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qti-interaction {
|
||
|
|
.qti-prompt {
|
||
|
|
& ~ .mini-tlb {
|
||
|
|
right: -31px !important;
|
||
|
|
top:1px
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-textBlock {
|
||
|
|
.mini-tlb {
|
||
|
|
right: -36px;
|
||
|
|
top: -2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qti-flow-container{
|
||
|
|
.mini-tlb{
|
||
|
|
right: -31px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* end tmp fix #2768 */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/*style for modal feedback*/
|
||
|
|
@import "qtiCreator/_modal-feedback";
|
||
|
|
|
||
|
|
/*style for html editable area highlight*/
|
||
|
|
.edit-question [data-html-editable]{
|
||
|
|
min-height: 20px;
|
||
|
|
}
|
||
|
|
[data-html-editable] {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
outline: 1px solid transparent !important;
|
||
|
|
[html-editable-shield] {
|
||
|
|
padding: 0;
|
||
|
|
min-width: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* edit-* classes are used to represents the different states of an interaction */
|
||
|
|
.edit-question .qti-interaction, .qti-modalFeedback.edit-active {
|
||
|
|
[data-html-editable-container]:hover {
|
||
|
|
[data-html-editable][contenteditable=true] {
|
||
|
|
border: 1px dotted $info;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
[data-html-editable] {
|
||
|
|
margin-right: 0px; //@todo value to be determined
|
||
|
|
&[contenteditable=true]:focus {
|
||
|
|
border: 1px dotted $info;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.edit-question .qti-blockInteraction .horizontal {
|
||
|
|
margin-top: 28px;
|
||
|
|
|
||
|
|
.qti-choice {
|
||
|
|
margin-top: 25px;
|
||
|
|
.mini-tlb{
|
||
|
|
white-space: nowrap;
|
||
|
|
.tlb-button{
|
||
|
|
display: block;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
// hack to implement TAO-4554 and avoid overlapping toolbars
|
||
|
|
.widget-box {
|
||
|
|
.mini-tlb {
|
||
|
|
top: 0 !important;
|
||
|
|
right:-30px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-rubricBlock, .widget-textBlock {
|
||
|
|
[data-html-editable] {
|
||
|
|
min-height: 3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cke-cover-up {
|
||
|
|
padding: 0 !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
position: absolute !important;
|
||
|
|
cursor: pointer !important;
|
||
|
|
border: none !important;
|
||
|
|
background: black !important;
|
||
|
|
opacity: .05 !important;
|
||
|
|
display: inline-block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cke-qti-wrapper {
|
||
|
|
position: relative !important;
|
||
|
|
display: inline-block !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cke-placeholder:not(:focus)::before {
|
||
|
|
content:attr(data-placeholder);
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extendedText{
|
||
|
|
.incrementer-ctrl-wrapper{
|
||
|
|
right: 10px; // to compensate the next change below
|
||
|
|
.incrementer{
|
||
|
|
width: 50px !important // 10px more than the default 40px value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.select2-result.rtl-lang {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.select2-chosen .rtl-lang,
|
||
|
|
.select2-result.rtl-lang span.select2-match {
|
||
|
|
&:after {
|
||
|
|
content: 'RTL';
|
||
|
|
display: block;
|
||
|
|
color: $grey;
|
||
|
|
border: $grey 1px solid;
|
||
|
|
border-radius: 2px;
|
||
|
|
position: absolute;
|
||
|
|
right: 20px;
|
||
|
|
font-size: 10px;
|
||
|
|
top: 6px;
|
||
|
|
line-height: 12px;
|
||
|
|
padding: 0 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.select2-result.rtl-lang {
|
||
|
|
&.select2-highlighted {
|
||
|
|
span.select2-match {
|
||
|
|
&:after {
|
||
|
|
color: #fff;
|
||
|
|
border-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
|
||
|
|
html body #tabs {
|
||
|
|
margin: 0 !important;
|
||
|
|
min-height: 0 !important;
|
||
|
|
width: auto !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body .item-editor-sidebar-wrapper {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body .item-no-print {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body #item-editor-scroll-inner {
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body .action-bar {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body #item-editor-panel {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body .item-editor-row {
|
||
|
|
border: none !important;
|
||
|
|
background: none !important;
|
||
|
|
}
|
||
|
|
html body .qti-item {
|
||
|
|
border-radius: 0;
|
||
|
|
box-shadow: none;
|
||
|
|
margin: 0 !important;
|
||
|
|
border: none !important;
|
||
|
|
width: 100% !important;
|
||
|
|
[class*="col-"] {
|
||
|
|
border-color: transparent !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
html body [data-edit], html body .mini-tlb {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
html body [class^="btn-"],
|
||
|
|
html body [class*=" btn-"],
|
||
|
|
html body button,
|
||
|
|
html body input[type="submit"],
|
||
|
|
html body input[type="reset"] {
|
||
|
|
color: #222 !important;
|
||
|
|
border: 1px solid #dddddd !important;
|
||
|
|
border-radius: 2px !important;
|
||
|
|
-webkit-border-radius: 2px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 1366x768
|
||
|
|
@media screen and (min-width: 1366px) {
|
||
|
|
|
||
|
|
.item-editor-sidebar-wrapper.left-bar {
|
||
|
|
@include simple-flex-box(262px);
|
||
|
|
#item-editor-interaction-bar {
|
||
|
|
.tool-list {
|
||
|
|
li {
|
||
|
|
width: (100 / 3) * 1%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sub-group-cover:after, .sub-group-cover:before {
|
||
|
|
left: 17% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#item-editor-scope > nav.action-bar .menu-left {
|
||
|
|
@include simple-flex-box(262px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 1920x1080
|
||
|
|
@media screen and (min-width: 1920px) {
|
||
|
|
|
||
|
|
.item-editor-sidebar-wrapper.left-bar {
|
||
|
|
@include simple-flex-box(344px);
|
||
|
|
#item-editor-interaction-bar {
|
||
|
|
.tool-list {
|
||
|
|
li {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sub-group-cover:after, .sub-group-cover:before {
|
||
|
|
left: 12% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#item-editor-scope > nav.action-bar .menu-left {
|
||
|
|
@include simple-flex-box(344px);
|
||
|
|
}
|
||
|
|
}
|