// Styles for angular xeditable

.property-required {
  font-weight: 500;
  color: $state-danger-text;
}
.property-required .editable-empty i {
  color: $state-danger-text;

}
.editable-click,
a.editable-click {
  color: $text-color;
  text-decoration: none;
  border: solid 1px rgba(255,255,255,0);
}
.editable-click:hover,
a.editable-click:hover {
  color: $text-color;
  text-decoration: none;
  border: solid 1px #ccc;
  cursor: pointer;

}
.editable-empty i {
  color: $brand-primary;
}
.editable-discreet.editable-click {
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

#scaleEditableInput .editable-wrap .editable-controls > input {
  width: 50%;
}

.editable-controls {
  width: 100%;
}
.editable-input-lg {
  width: 100% !important;
}

.property-display-label-ellipsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// for a better display of editable form in property display directive
property-display [editable-text] + form.editable-wrap,
property-display [editable-textarea] + form.editable-wrap {
  width: auto;
}

.form-horizontal property-display [editable-text] + form.editable-wrap .form-group,
.form-horizontal property-display [editable-textarea] + form.editable-wrap .form-group {
  margin-right: 0;
}

.form-control-inline {
  width: 80%;
  display: inline;
  padding: 0px 10px;
  height: 25px;
}

select.form-control-inline {
  width: 70%;
}

.editable-number, .editable-texarea {
  white-space: nowrap;
}

.editable-property span {
  @extend .not-overflow;
  max-width: 120px;
}

/* ---- It is the css class for secret editable --------*/
.editable-secret {
  @extend .editable-property;
  background-color: #DCDCDC;
  border-radius: 0.25em;
}

.editable-secret:hover {
  background-color: #F0F0F0;
}

.editable-secret {
  display: -webkit-inline-flex;
  margin-left: 1em;
  margin-right: 1em;
}

.editable-secret i {
  padding-top: 3px;
}
/* ------------------------------------*/