123 lines
3.0 KiB
SCSS
123 lines
3.0 KiB
SCSS
|
@import "inc/bootstrap";
|
||
|
|
|
||
|
|
.qti-orderInteraction {
|
||
|
|
.arrow-bar {
|
||
|
|
text-align: center;
|
||
|
|
span {
|
||
|
|
margin: 3px auto;
|
||
|
|
@include font-size(25);
|
||
|
|
color: mix(#fff, $textColor, 50%);
|
||
|
|
background: mix(#fff, $uiClickableDefaultBg, 50%);
|
||
|
|
cursor: default;
|
||
|
|
height: 40px;
|
||
|
|
&.active {
|
||
|
|
background: $uiClickableDefaultBg;
|
||
|
|
cursor: pointer;
|
||
|
|
color: $textColor;
|
||
|
|
&:hover {
|
||
|
|
color: $textHighlight;
|
||
|
|
background: $uiClickableHoverBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.triggered {
|
||
|
|
color: $textHighlight;
|
||
|
|
background: $uiClickableHoverBg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.qti-vertical {
|
||
|
|
.order-interaction-area {
|
||
|
|
display: table;
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 5px 5px 5px 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
ul.source, ul.target,
|
||
|
|
ol.source, ol.target {
|
||
|
|
display: table-cell;
|
||
|
|
width: 43%;
|
||
|
|
padding-left: 40px;
|
||
|
|
padding-right: 3px;
|
||
|
|
|
||
|
|
@include rtl {
|
||
|
|
padding-left: 3px;
|
||
|
|
padding-right: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.arrow-bar {
|
||
|
|
.icon-move-before {
|
||
|
|
@include icon-up;
|
||
|
|
}
|
||
|
|
.icon-move-behind {
|
||
|
|
@include icon-down;
|
||
|
|
}
|
||
|
|
display: table-cell;
|
||
|
|
vertical-align: middle;
|
||
|
|
padding: 5px;
|
||
|
|
span {
|
||
|
|
padding: 8px 0;
|
||
|
|
display: block;
|
||
|
|
width: 50px;
|
||
|
|
&.inactive {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.middle {
|
||
|
|
span.inactive {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon-add-to-selection,
|
||
|
|
.icon-remove-from-selection {
|
||
|
|
@include rtl {
|
||
|
|
transform: scale(-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.qti-horizontal {
|
||
|
|
.block-listing {
|
||
|
|
min-height: 38px;
|
||
|
|
}
|
||
|
|
.arrow-bar {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0 15px;
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1.6;
|
||
|
|
&.inactive {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
&.icon-move-before {
|
||
|
|
@include icon-up;
|
||
|
|
}
|
||
|
|
&.icon-move-behind {
|
||
|
|
@include icon-down;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon-move-after,
|
||
|
|
.icon-move-before {
|
||
|
|
@include rtl {
|
||
|
|
transform: scale(-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
&.dragged {
|
||
|
|
border-color: whiten($info, .2) !important;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.drag-container {
|
||
|
|
position: absolute;
|
||
|
|
display: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|