1KA_F2F/resources/sass/admin/branching/branching_expanded.scss

509 lines
9.4 KiB
SCSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 07-Aug-2018, 09:43:11
Author : podkrizniku
*/
$loop_background: #eef9ff;
$block_background: #f1f1ff;
$if_background: $soft_blue_lighten;
#placeholder{
display: flex;
width: 98%;
max-width: 1450px;
margin: 5px 0 0 30px;
}
#branching {
min-height: 400px;
width: calc(96% - 315px);
margin: 0;
background-color: white;
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
div.if_remove {
display: none;
}
}
li.spr {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
div.spr_edit {
display: none;
}
&:hover {
div.spr_edit {
display: block;
}
}
}
li.if {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
span.conditions_display {
background-color: $if_background;
cursor: pointer;
}
div.if_remove {
display: block;
}
}
}
li.block {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
span.conditions_display {
background-color: $block_background;
cursor: pointer;
}
div.if_remove {
display: block;
}
}
}
li.loop {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
span.conditions_display {
background-color: $loop_background;
cursor: pointer;
}
div.if_remove {
display: block;
}
}
}
li.endif {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
background-color: $if_background;
cursor: pointer;
}
}
li.endblock {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
background-color: $block_background;
cursor: pointer;
}
}
li.endloop {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
background-color: $loop_background;
cursor: pointer;
}
}
li.inout {
margin-left: 40px;
position: relative;
border-left: 2.5px solid transparent;
&:hover {
background-color: $block_background;
cursor: pointer;
}
}
li.if.if_editing {
border-color: $strong_blue;
background-color: $if_background;
div.if_remove {
display: block;
}
}
li.block.if_editing {
border-color: $strong_blue;
background-color: $block_background;
div.if_remove {
display: block;
}
}
li.loop.if_editing {
border-color: $strong_blue;
background-color: $loop_background;
div.if_remove {
display: block;
}
}
ul.if_editing {
li.spr {
border-color: $strong_blue;
}
li.if {
border-color: $strong_blue;
}
li.block {
border-color: $strong_blue;
}
li.loop {
border-color: $strong_blue;
}
li.endif {
border-color: $strong_blue;
}
li.endblock {
border-color: $strong_blue;
}
li.endloop {
border-color: $strong_blue;
}
li.inout {
border-color: $strong_blue;
}
li.drop {
border-color: $strong_blue;
}
li.nodrop {
border-color: $strong_blue;
}
}
li.if.if_hovering {
border-color: $strong_blue;
background-color: $if_background;
}
li.block.if_hovering {
border-color: $strong_blue;
background-color: $block_background;
}
li.loop.if_hovering {
border-color: $strong_blue;
background-color: $loop_background;
}
ul.if_hovering {
li.spr {
border-color: $strong_blue;
}
li.if {
border-color: $strong_blue;
}
li.block {
border-color: $strong_blue;
}
li.loop {
border-color: $strong_blue;
}
li.endif {
border-color: $strong_blue;
}
li.endblock {
border-color: $strong_blue;
}
li.endloop {
border-color: $strong_blue;
}
li.inout {
border-color: $strong_blue;
}
li.drop {
border-color: $strong_blue;
}
li.nodrop {
border-color: $strong_blue;
}
li.endloop {
background-color: $loop_background;
}
li.endblock {
background-color: $block_background;
}
li.endif {
background-color: $if_background;
}
}
li.spr.ui-draggable-dragging {
z-index: 99999;
}
div.spr_edit {
cursor: pointer;
color: $grey_normal;
cursor: pointer;
display: inline-block;
height: 26px;
a.arhiv {
background-position: -16px -30px;
}
a {
cursor: pointer;
display: inline-block;
margin-left: 9px;
width: 20px;
height: 20px;
}
span.scale_ordnom {
vertical-align: 2px;
margin-right: 20px;
color: $strong_blue;
a {
cursor: pointer;
display: inline-block;
height: 20px;
width: auto;
margin: 0;
background-image: none;
color: $strong_blue;
&:hover {
color: $orange;
}
}
}
a.hide {
cursor: pointer;
display: inline-block;
margin-right: 5px;
width: 20px;
height: 20px;
}
}
li.spr.spr_editing {
div.spr_edit {
display: block;
padding-top: 9px;
}
}
li.drop.branchinghover {
background-color: $orange_lighten !important;
a {
display: none;
}
}
li.nodrop.branchinghover {
background-color: $orange_lighten !important;
a {
display: none;
}
}
a.pm {
position: absolute;
left: auto;
float: none;
margin: 9px 0 0 -15px;
cursor: pointer;
}
a.pm.minus {
margin-top: 12px;
}
.spr_editing {
.spremenljivka_content {
background-color: white;
border: 1px solid transparent;
.spremenljivka_settings {
background-color: $orange !important;
border: 1px solid $orange;
.spr_settings{
span.red {
color: white !important;
}
}
#spr_settings_intro_concl{
div.red{
color: white !important;
}
}
}
.content_div_normalmode{
border: 1px solid $orange;
}
.comment_container_inline {
border-top: none;
border-left: 1px solid $soft_blue;
border-right: 1px solid $soft_blue;
border-bottom: 1px solid $soft_blue;
}
.spremenljivka_tekst_form {
border: 1px solid $orange;
}
}
.variable_name {
color: white;
}
}
.variable_name {
cursor: move;
}
div.if_remove {
a {
cursor: pointer;
display: inline-block;
margin-left: 9px;
width: 20px;
height: 20px;
/*background-image: url(../../../admin/survey/img_new/sprites.png);
background-repeat: no-repeat;*/
}
padding-top: 0px;
margin-top: 4px;
}
li.spr_editing {
div.spr_edit {
span.scale_ordnom {
color: white;
a {
color: white;
}
}
a.faicon{
color: white !important;
}
}
}
}
#branching.expanded {
li.spr {
padding-top: 1px;
padding-bottom: 1px;
}
li.if {
padding-top: 1px;
padding-bottom: 1px;
}
li.block {
padding-top: 1px;
padding-bottom: 1px;
}
li.loop {
padding-top: 1px;
padding-bottom: 1px;
}
li.drop {
min-height: 16px;
margin: 2px 0 2px 50px;
margin: 0px 0 0px 40px;
padding: 2px 0px 2px 10px;
//border-left: 2px solid transparent;
span.pb_on {
display: inline-block;
width: 100%;
height: 16px;
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 100px 10px;
color: $grey_normal;
font-size: 14px;
font-weight: 600;
height: 20px;
line-height: 20px;
margin-top: 0;
}
span.pb_off {
display: inline-block;
width: 100%;
height: 16px;
}
span.pb_new {
display: inline-block;
width: 100%;
height: 16px;
}
&:hover {
span.pb_on {
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 100px -52px;
cursor: pointer;
}
span.pb_new {
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 0px -23px;
cursor: pointer;
}
}
}
li.nodrop {
min-height: 16px;
margin: 2px 0 2px 50px;
margin: 0px 0 0px 40px;
padding: 2px 0px 2px 0px;
border-left: 2.5px solid transparent;
span.pb_on {
display: inline-block;
width: 100%;
height: 16px;
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 100px 10px;
color: $grey_normal;
font-size: 14px;
font-weight: 600;
height: 20px;
line-height: 20px;
margin-top: 0;
}
span.pb_off {
display: inline-block;
width: 100%;
height: 16px;
}
span.pb_new {
display: inline-block;
width: 100%;
height: 16px;
}
&:hover {
span.pb_on {
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 100px -52px;
cursor: pointer;
}
span.pb_new {
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 0px -23px;
cursor: pointer;
}
span.permanent {
background: url('../../../admin/survey/img_0/sprites_pb_expanded.png') no-repeat 100px 10px;
cursor: default;
}
}
}
span.pb_on {
span {
background-color: white;
padding-right: 20px;
pointer-events: none;
}
}
}
.branchinghover {
background: url('../../../admin/survey/img_0/hover_background.png') repeat-x top left !important;
}
.blockSwitch {
position: relative;
margin: 10px auto 0;
text-align: center;
p {
display: inline;
font-size: 14px;
}
}
#spremenljivka_content_-1 {
position: relative;
span.display_editor {
top: 40px;
}
}
#spremenljivka_content_-2 {
position: relative;
span.display_editor {
top: 40px;
}
}