condition-management.less revision a500a8ecaba8363492aa1f4a62d5af939b2a91e6
/* VARIABLES */
@or-color: #DDE9FF;
@and-color: #C3DFC5;
@not-color: #E7D1CB;
@subject-color: #CCC;
@grabber-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAFCAYAAABvsz2cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpiZGBg8AViBhYQ8f///3pGIHEGxAExGFAYAAEGABbSDZWLLysMAAAAAElFTkSuQmCC";
/* XUI Overrides */
#content {
/*stop dragged items from cropping when they go out of content bounds*/
overflow: visible;
}
body{
/* This will prevent to sudden shift of content which can sometimes occur
* when navigating between them long views which require a scroll bar and
* short ones which do not.
*/
overflow-y: scroll;
}
/* POLICY */
body.dragging,
body.dragging *{
cursor: move !important;
}
body.editing{
#dialog-background{
height:auto;
opacity:0.5;
z-index:500;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(60, 60, 60, 0.1) 35px, rgba(60, 60, 60, 0.1) 70px);
}
#condition-management ol.condition-management-group li.rule.editing{
position: absolute;
left: 0;
right: 0;
z-index: 700;
margin: -8px 48px 0;
.icon-pencil {
display:none;
}
.icon-checkmark {
font-size: 36px;
display:block;
}
.icon-remove {
display:none;
}
&:first-child {
margin-top: -3px;
}
}
}
#condition-management{
select {
width:auto;
height:auto;
padding:0;
}
label {
display: block;
float: left;
padding: 0 5px 0 0;
text-align:left;
white-space: nowrap;
}
input[type="text"], textarea, select {
border-radius:0;
padding:5px;
font-size: 13px;
text-overflow: ellipsis;
}
ol ol{
padding: 1px;
background: white;
margin: 5px 0 0;
min-height: 8px;
}
#pickup-area{
padding:10px 8px;
margin:5px;
border: 1px solid #ccc;
ol#pickUpItem {
li.operator, li.rule{
margin: 10px 0 0;
cursor: move;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.5);
background-image:url(@grabber-image);
&:not(.dragged){
margin-left:5px;
margin-right:5px;
/*To stop it appearing over accordion. Overridden later*/
display: none;
}
span.item-button-panel{
display:none;
}
}
}
}
span.item-button-panel {
float:right;
padding: 8px 3px;
> span {
padding: 0 5px;
&.tooltips {
&:hover span, &:focus span {
margin-left: -53px;
width: 100px;
}
}
}
}
li.operator > span.item-button-panel{
padding-top: 0;
}
li.editing span.item-button-panel{
position: absolute;
top: 5px;
right: 0;
}
li.dragged{
position: absolute;
top: 0;
opacity: 0.9;
z-index: 200;
}
li.dragged.dropped{
opacity: 1;
}
ol.dropbox li.dragged {
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
cursor: move;
background-color: #ccc;
}
ol.condition-management-group {
li {
display: block;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
background: 0 0 repeat-y #ddd;
transition: background 200ms ease-out 0ms, box-shadow 100ms linear 0ms,;
&.operator {
&.or {
background-color:@or-color;
> span, > select {color:darken(@or-color, 40%)}
&.dragged, &:focus {background-color:darken(@or-color, 10%)}
> ol > .placeholder {background-color:darken(@or-color, 20%)}
}
&.and {
background-color:@and-color;
> span, > select {color:darken(@and-color, 40%)}
&.dragged, &:focus {background-color:darken(@and-color, 10%)}
> ol > .placeholder {background-color:darken(@and-color, 20%)}
}
&.not {
background-color:@not-color;
> span, > select {color:darken(@not-color, 40%) }
&.dragged, &:focus {background-color:darken(@not-color, 10%)}
> ol > .placeholder {background-color:darken(@not-color, 20%)}
}
&.or,&.and,&.not{
cursor: default;
&:focus{
cursor: move;
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
}
}
}
&.rule{
cursor: default;
&:focus{
cursor: move;
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
background-color: #ccc;
}
}
&.placeholder {
position: relative;
margin: 5px;
padding: 0;
border: none;
height: 10px;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
background-size:100% 100px;
box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.5) inset;
}
}
}
.item-data{
padding: 7px 5px 0 5px;
> div {
color: #444;
font-size:11px;
line-height: 11px;
border-right: 1px solid #eee;
padding-right: 10px;
margin-right: 10px;
float:left;
&:last-of-type{
border-right: none;
}
&.invalid{
color: #888;
}
h3{
font-weight: bold;
font-size: 11px;
line-height: 11px;
padding-bottom: 5px;
}
> span {
min-height: 11px;
display: block;
padding-bottom: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width:500px;
}
&.no-float{
float:none;
margin:0 0 0 203px;
}
}
div.field-float-selectize {
float: left;
min-width: 133px;
max-width: 588px; // margin-bottom:0; required for clearing
margin: 5px 5px 0 5px;
}
}
li.editing .item-data, ol#pickUpItem li:not(.dragged) .item-data{
padding: 0;
}
.field-float-pattern, .field-float-select, .field-float-selectize{
label {
font-size:11px;
color:#555;
transition: all 0.1s linear;
font-weight:bold;
padding: 0;
line-height: 11px;
margin: 0;
}
}
.field-float-pattern, .field-float-select{
margin-top: 18px;
position:relative;
margin: 5px;
float:left;
label{
position:absolute;
top:10px;
opacity:0;
&.showLabel {
top:0;
opacity:1;
}
}
input{
margin-top: 16px;
width:133px;
/* Stop chromes autofill adding yellow backgrounds to datalists */
&:-webkit-autofill{
-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset,0 0 0 50px white inset;
&:focus {
-webkit-box-shadow: 0 0 1px 1px #4481c4,0 0 0 50px white inset;
}
}
}
&#typeSelector label{
top:0;
opacity:1;
}
select {
margin-top: 16px;
min-width: 177px;
clear:left;
float:left;
padding:5px 20px 5px 5px;
-webkit-appearance: none;
background: url('../img/sort_both.png') no-repeat right #fff;
background-color:#fff;
&.placeholderText {
color: #ddd;
background-color:transparent;
border-color: transparent;
box-shadow: none;
}
&:invalid{
.invalid-background;
transition: background 0.3s ease-in-out 0s;
}
}
}
}
/*Overrides for accordion states*/
section.active-step{
#condition-management #pickup-area ol#pickUpItem li.operator:not(.dragged),
#condition-management #pickup-area ol#pickUpItem li.rule:not(.dragged) {
display: block;
}
}
#condition-management ol.condition-management-group ul.buttonControl{
margin-top: 16px;
font-size: 0;
li{
border:none;
display:inline-block;
margin:0;
padding:0;
a.button{
border-radius:0;
margin-left:0;
background-color:lighten(@color-inactive, 5%);
transition:background 100ms;
&:not(.selected){
border-color:@color-inactive;
background-image:none;
&:hover{
background-color:average(@color-active, @color-inactive)
}
}
&.selected:hover{
.linear-gradient(top, @color-active, darken(@color-active, 10%));
}
}
&:first-of-type{
a.button{
border-radius:5px 0 0 5px;
}
}
&:last-of-type{
a.button{
border-radius:0 5px 5px 0;
}
}
}
a.button {
line-height:12px;
}
}
#condition-management .item-data > div span.inline-right{
padding: 0;
margin: 0 4px 4px 0;
position: absolute;
right: 0;
bottom: 0;
color: #ddd;
}
#condition-management .item-data div.field-float-pattern.time-field{
min-width:0;
input{
width:70px;
}
}
#condition-management .item-data div.field-float-select.day-field{
min-width:0;
select{
width:100px;
min-width:0;
}
}
.ruleHelperText{
padding: 10px 10px 0 10px;;
p {
font-size:12px;
}
}
#condition-management .item-data {
> div#conditionAttrTimeDate, > div.ruleHelperText{
border-right: none;
margin-right:0;
div.float-left {
float: left;
border-right: 1px solid #eee;
&:last-of-type{
border-right: none;
}
}
.datePicker{
width:100px;
}
}
}
/* Jquery-UI overrides */
.ui-widget-content {
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
z-index:710;
}