723 lines
19 KiB
SCSS
723 lines
19 KiB
SCSS
|
@import "inc/bootstrap";
|
||
|
|
|
||
|
|
|
||
|
|
@mixin respond-to($media : medium) {
|
||
|
|
$break-small : 1024px;
|
||
|
|
$break-wide : 1280px;
|
||
|
|
@if $media == small {
|
||
|
|
@media only screen and (max-width: $break-small) { @content; }
|
||
|
|
}
|
||
|
|
@else if $media == medium {
|
||
|
|
@media only screen and (min-width: $break-small + 1) and (max-width: $break-wide) { @content; }
|
||
|
|
}
|
||
|
|
@else if $media == wide {
|
||
|
|
@media only screen and (min-width: $break-wide + 1) { @content; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin responsive($key, $small, $medium, $wide){
|
||
|
|
@include respond-to(small) { #{$key} : $small; }
|
||
|
|
@include respond-to(medium) { #{$key} : $medium; }
|
||
|
|
@include respond-to(wide) { #{$key} : $wide; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#test-creator{
|
||
|
|
|
||
|
|
$toolbarHeight : 50px;
|
||
|
|
$minHeight : 500px;
|
||
|
|
|
||
|
|
$sideWidthWide : 350px;
|
||
|
|
$sideWidthMedium : 300px;
|
||
|
|
$sideWidthSmall : 250px;
|
||
|
|
|
||
|
|
$propsColor: $uiOverlay;
|
||
|
|
$testPartColor: $websiteBorder;
|
||
|
|
$sectionColor: $darkBlueGrey;
|
||
|
|
$rubColor: whiten($info, 0.3);
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
height: calc(100vh - 99px);
|
||
|
|
min-height: $minHeight;
|
||
|
|
@include flex-container;
|
||
|
|
|
||
|
|
& > section {
|
||
|
|
@include simple-flex-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-creator-toolbar{
|
||
|
|
position: relative;
|
||
|
|
height: $toolbarHeight;
|
||
|
|
background-color: $uiHeaderBg;
|
||
|
|
color: $textColor;
|
||
|
|
|
||
|
|
& > ul {
|
||
|
|
|
||
|
|
height: $toolbarHeight;
|
||
|
|
|
||
|
|
li {
|
||
|
|
float: left;
|
||
|
|
height: $toolbarHeight;
|
||
|
|
position: relative;
|
||
|
|
padding: 12px 20px 0 20px;
|
||
|
|
line-height: 1.2;
|
||
|
|
text-align: center;
|
||
|
|
@include font-size(12);
|
||
|
|
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
display: block;
|
||
|
|
@include font-size(20);
|
||
|
|
color: $darkBrown;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
color: $textHighlight;
|
||
|
|
background-color: $logoRed;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
cursor: pointer;
|
||
|
|
color: $textHighlight;
|
||
|
|
background-color: $logoRed;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.disabled {
|
||
|
|
background-color: inherit;
|
||
|
|
[class^="icon-"], [class*=" icon-"]{
|
||
|
|
background-color: inherit;
|
||
|
|
cursor: not-allowed;
|
||
|
|
color: $darkBrown;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-creator-sidebar {
|
||
|
|
background-color: $canvas;
|
||
|
|
color: $textColor;
|
||
|
|
@include responsive('width', $sideWidthSmall, $sideWidthMedium, $sideWidthWide);
|
||
|
|
@include vendor-prefix(flex, 0 1 auto, property, (-ms-, -webkit-, ''));
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.duration-group {
|
||
|
|
@include flex-container(nowrap, row);
|
||
|
|
@include vendor-prefix(align-items, center, property, (-ms-, -webkit-, ''));
|
||
|
|
}
|
||
|
|
|
||
|
|
.duration-ctrl-wrapper, .incrementer-ctrl-wrapper {
|
||
|
|
.incrementer {
|
||
|
|
text-align: center;
|
||
|
|
padding-right: 14px;
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-creator-items{
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
border-right: 1px #ddd $uiGeneralContentBorder;
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
@include font-size(14);
|
||
|
|
background-color: $uiHeaderBg;
|
||
|
|
color: $textColor;
|
||
|
|
margin-top: 1px;
|
||
|
|
margin-bottom : 0;
|
||
|
|
padding: 5px;
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
@include tao-icon-setup;
|
||
|
|
@include icon-item;
|
||
|
|
margin-right: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.item-selection {
|
||
|
|
position: relative;
|
||
|
|
height: calc(100% - 65px);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-creator-props{
|
||
|
|
position: relative;
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
color: $textColor;
|
||
|
|
border-left: 1px solid $uiGeneralContentBorder;
|
||
|
|
h1 {
|
||
|
|
@include font-size(14);
|
||
|
|
background-color: $uiHeaderBg;
|
||
|
|
color: $textColor;
|
||
|
|
margin-top: 1px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding: 5px;
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
@include tao-icon-setup;
|
||
|
|
@include icon-settings;
|
||
|
|
@include font-size(16);
|
||
|
|
margin-right: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
padding: 6px;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
@include font-size(13);
|
||
|
|
line-height: 1.3;
|
||
|
|
background-color: $uiHeaderBg;
|
||
|
|
color: $textColor;
|
||
|
|
margin-top: 1px;
|
||
|
|
padding: 6px;
|
||
|
|
position: relative;
|
||
|
|
clear: both;
|
||
|
|
|
||
|
|
&.toggler{
|
||
|
|
cursor: pointer;
|
||
|
|
&:after{
|
||
|
|
position: absolute;
|
||
|
|
right: 15px;
|
||
|
|
top: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.props {
|
||
|
|
height: calc(100% - 65px);
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-row {
|
||
|
|
padding-left: 6px;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
max-width: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
height: 29px;
|
||
|
|
}
|
||
|
|
input.duration-ctrl {
|
||
|
|
height: 29px;
|
||
|
|
border: solid 1px transparent;
|
||
|
|
width: 37px !important;
|
||
|
|
min-width: 37px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background-color: $uiClickableActiveBg;
|
||
|
|
color: $textHighlight;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
padding: 0 6px;
|
||
|
|
margin: 2px 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
background-color: $uiGeneralContentBg;
|
||
|
|
color: $textColor;
|
||
|
|
font-size: 1rem;
|
||
|
|
padding: 0 6px;
|
||
|
|
margin: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.align-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.panel {
|
||
|
|
clear : both;
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
label {
|
||
|
|
width: 40%;
|
||
|
|
}
|
||
|
|
input, select {
|
||
|
|
position: relative;
|
||
|
|
max-width: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
[data-role='upload-trigger'] {
|
||
|
|
max-width: inherit;
|
||
|
|
min-width: inherit;
|
||
|
|
width: 80%;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
@include font-size(13);
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
.icon-help {
|
||
|
|
float: right;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-creator-test{
|
||
|
|
@include simple-flex-box;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: $uiGeneralContentBg;
|
||
|
|
color: $textColor;
|
||
|
|
|
||
|
|
h1, h2, li {
|
||
|
|
& > span:first-child {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.actions {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
display: inline-table;
|
||
|
|
width: auto;
|
||
|
|
max-width: 300px;
|
||
|
|
height: 39px;
|
||
|
|
z-index: 100;
|
||
|
|
.tlb {
|
||
|
|
display: inline-block;
|
||
|
|
background: none;
|
||
|
|
margin-left: 15px;
|
||
|
|
@include font-size(14);
|
||
|
|
.tlb-top {
|
||
|
|
background: none !important;
|
||
|
|
border-width: 0 !important;
|
||
|
|
@include box-shadow(0, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > h1 {
|
||
|
|
position: relative;
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
height: 30px;
|
||
|
|
padding: 4px 60px 3px 48px ;
|
||
|
|
margin-bottom: 0;
|
||
|
|
margin-top : 1px;
|
||
|
|
@include font-size(16);
|
||
|
|
font-weight: bold;
|
||
|
|
&:before {
|
||
|
|
@include tao-icon-setup;
|
||
|
|
@include icon-test;
|
||
|
|
position: absolute;
|
||
|
|
left: 22px;
|
||
|
|
top: 6px;
|
||
|
|
}
|
||
|
|
.actions{
|
||
|
|
margin-right: 12px;
|
||
|
|
margin-top: -3px;
|
||
|
|
}
|
||
|
|
& > span:first-child {
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1.2em;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 1.2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.test-content {
|
||
|
|
padding: 0 0 0 10px;
|
||
|
|
height: calc(100% - 65px);
|
||
|
|
overflow-y : auto;
|
||
|
|
h1, h2 {
|
||
|
|
position: relative;
|
||
|
|
height: 35px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.testpart-content {
|
||
|
|
& > button{
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.testpart {
|
||
|
|
color: $textColor;
|
||
|
|
border-left: solid 5px $testPartColor;
|
||
|
|
padding: 0 5px;
|
||
|
|
margin: 10px 0;
|
||
|
|
|
||
|
|
& > h1 {
|
||
|
|
background-color: whiten($testPartColor, 0.2);
|
||
|
|
padding: 0 5px;
|
||
|
|
margin-right: 5px;
|
||
|
|
margin-top: 0;
|
||
|
|
color: $textHighlight;
|
||
|
|
@include border-radius;
|
||
|
|
& > .toggler {
|
||
|
|
position: absolute;
|
||
|
|
right: 15px;
|
||
|
|
color: $textHighlight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions .tlb-group {
|
||
|
|
min-width: 126px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.sections {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
color: $textColor;
|
||
|
|
border-left: solid 5px $sectionColor;
|
||
|
|
padding: 0 5px 0 15px;
|
||
|
|
margin: 10px 0 10px 10px;
|
||
|
|
|
||
|
|
& > h2 {
|
||
|
|
color: blacken($sectionColor, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child{
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.actions .tlb-group {
|
||
|
|
min-width: 157px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rublocks{
|
||
|
|
border-left: solid 5px $rubColor;
|
||
|
|
padding: 0 5px 0 15px;
|
||
|
|
margin: 0px 0 10px 0px;
|
||
|
|
h3 {
|
||
|
|
color: $rubColor;
|
||
|
|
float: none;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rubricblocks {
|
||
|
|
clear: both;
|
||
|
|
padding-left: 25px;
|
||
|
|
& > li, .rubricblock-content {
|
||
|
|
position: relative;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
& > li {
|
||
|
|
padding: 4px;
|
||
|
|
border: solid 1px $uiGeneralContentBorder;
|
||
|
|
@include border-radius;
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
clear: both;
|
||
|
|
|
||
|
|
.rubricblock-binding {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.rubricblock-content {
|
||
|
|
@include border-radius;
|
||
|
|
background-color: $uiGeneralContentBg;
|
||
|
|
padding: 4px;
|
||
|
|
border: solid 1px $uiGeneralContentBg;
|
||
|
|
margin: 30px 0 0 0;
|
||
|
|
min-height: 30px;
|
||
|
|
|
||
|
|
.grid-row{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.actions{
|
||
|
|
position: absolute;
|
||
|
|
right: -3px;
|
||
|
|
top: -2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.itemrefs-wrapper {
|
||
|
|
|
||
|
|
border: solid 1px $uiGeneralContentBorder;
|
||
|
|
@include border-radius(3);
|
||
|
|
padding-left: 15px;
|
||
|
|
h3 {
|
||
|
|
color: blacken($sectionColor, 0.4);
|
||
|
|
}
|
||
|
|
.itemrefs {
|
||
|
|
position: relative;
|
||
|
|
padding: 0;
|
||
|
|
margin-left: 15px;
|
||
|
|
&:before{
|
||
|
|
color: $uiGeneralContentBorder;
|
||
|
|
}
|
||
|
|
& > li {
|
||
|
|
position: relative;
|
||
|
|
height: 39px;
|
||
|
|
line-height: 39px;
|
||
|
|
padding: 2px ;
|
||
|
|
clear: both;
|
||
|
|
&:nth-child(even){
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
}
|
||
|
|
.actions {
|
||
|
|
.tlb-group {
|
||
|
|
min-width: 124px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.itemref-placeholder {
|
||
|
|
display: none;
|
||
|
|
margin: 5px 5px 5px 0;
|
||
|
|
height: 35px;
|
||
|
|
line-height: 35px;
|
||
|
|
padding-left: 5px;
|
||
|
|
border: dashed 1px $uiClickableHoverBg;
|
||
|
|
color : $uiClickableHoverBg;
|
||
|
|
background-color: whiten($uiClickableHoverBg, .7);
|
||
|
|
cursor: pointer;
|
||
|
|
@include font-size(18);
|
||
|
|
@include border-radius(3);
|
||
|
|
@include transition;
|
||
|
|
&:before {
|
||
|
|
@include tao-icon-setup;
|
||
|
|
@include icon-add;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background-color: whiten($uiClickableHoverBg, .9);
|
||
|
|
@include transition;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// QTI Widget authoring related-styles
|
||
|
|
// Those styles have been copied from taoQtiItem extension for TAO-5146.
|
||
|
|
// They could be factorised at some point if more and more of the QTI Authoring framework starts leaking from taoQtiItem
|
||
|
|
|
||
|
|
$qtiCreatorMiniTlbIconColor: rgb(34, 34, 34);
|
||
|
|
$qtiCreatorMiniTlbBorderColor: rgb(221, 221, 221);
|
||
|
|
$qtiCreatorMiniTlbBgColor: #fff;
|
||
|
|
|
||
|
|
.qti-widget-properties {
|
||
|
|
.panel {
|
||
|
|
padding: 0 5px;
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 1.17em;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"] {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
%mini-tlb {
|
||
|
|
display: none; //initially hidden
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 5000;
|
||
|
|
@include font-size(13, true);
|
||
|
|
|
||
|
|
border: 1px $qtiCreatorMiniTlbBorderColor solid !important;
|
||
|
|
list-style-type: none;
|
||
|
|
cursor: pointer !important;
|
||
|
|
border-radius: 0;
|
||
|
|
background-color: $qtiCreatorMiniTlbBgColor;
|
||
|
|
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
@include font-size(16);
|
||
|
|
position: relative;
|
||
|
|
top: 4px;
|
||
|
|
color: $qtiCreatorMiniTlbIconColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tlb-button {
|
||
|
|
width: 26px;
|
||
|
|
height: 24px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
margin: 0;
|
||
|
|
display: inline-block;
|
||
|
|
color: $qtiCreatorMiniTlbIconColor !important;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
font-size: 14px !important;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background-color: $info;
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
color: $qtiCreatorMiniTlbBgColor;
|
||
|
|
}
|
||
|
|
color: $uiClickableHoverBg !important;
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
color: $info !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget-box {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&.widget-inline {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid whiten($info, .5);
|
||
|
|
}
|
||
|
|
&.edit-active {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
[class^="icon-"], [class*=" icon-"] {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mini-tlb {
|
||
|
|
@extend %mini-tlb;
|
||
|
|
|
||
|
|
position: absolute !important;
|
||
|
|
top: -2px !important;
|
||
|
|
right: -32px !important;
|
||
|
|
.tlb-button {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
height: 24px !important;
|
||
|
|
width: 24px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dummy-element {
|
||
|
|
position: relative;
|
||
|
|
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;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Printed Variable specific style
|
||
|
|
.widget-box.widget-printedVariable {
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
border: 1px solid $uiGeneralContentBorder;
|
||
|
|
padding: 2px 3px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
&.edit-active {
|
||
|
|
background-color: $lightBlueGrey;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//widget to lock the 2 durations fields
|
||
|
|
.lockedtime-container {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.grid-row {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
.locker {
|
||
|
|
position: absolute;
|
||
|
|
border: solid 1px $websiteBorder;
|
||
|
|
border-left-color: transparent;
|
||
|
|
@include border-radius(4);
|
||
|
|
top: 14px;
|
||
|
|
right: 42px;
|
||
|
|
width: 30px;
|
||
|
|
height : 50px;
|
||
|
|
z-index: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
background-color: $uiClickableDefaultBg;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 450;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
width: 19px;
|
||
|
|
height: 30px;
|
||
|
|
top: 8px;
|
||
|
|
right: -10px;
|
||
|
|
@include simple-border;
|
||
|
|
@include border-radius;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
span:before{
|
||
|
|
color: $textColor;
|
||
|
|
position: absolute;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
left: 3px;
|
||
|
|
top: 6px;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
&:hover span:before {
|
||
|
|
color: $uiClickableHoverBg;
|
||
|
|
}
|
||
|
|
&.unlocked span:before{
|
||
|
|
@include icon-unlink;
|
||
|
|
}
|
||
|
|
&.locked span:before{
|
||
|
|
@include icon-link;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.duration-ctrl-wrapper {
|
||
|
|
z-index: 500;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|