/* ------------------------------------------------------------------------------
*
* # X-editable
*
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
// Base
.editable {
background-color: transparent;
.form-horizontal & {
padding-top: (@padding-base-vertical + 1);
display: inline-block;
}
}
// Pre wrapped content
.editable-pre-wrapped {
white-space: pre-wrap;
}
// Layout
// ------------------------------
// Form
.editableform {
// Remove bottom spacing
.form-group:last-child {
margin-bottom: 0;
}
// Set min width to the input field
.form-control {
min-width: 150px;
}
// Checkbox, radio
.checkbox,
.radio {
margin-top: 0;
margin-bottom: 0;
> div {
margin-top: (@padding-base-vertical + 1);
margin-bottom: (@padding-base-vertical + 1);
position: relative;
}
}
}
// Buttons
.editable-buttons {
display: inline-block;
vertical-align: top;
margin-left: 5px;
&.editable-buttons-bottom {
display: block;
margin-top: @line-height-computed;
margin-left: 0;
text-align: center;
}
.editable-cancel {
margin-left: 5px;
}
}
// Editable inputs
.editable-input {
vertical-align: top;
display: inline-block;
width: auto;
white-space: normal;
// Remove bottom margin from help block
.help-block {
margin-bottom: 0;
}
// Set fixed width to input group
.input-group {
width: 250px;
}
// Elastic textarea
.elastic {
height: 100px;
}
}
// Loading icon
.editableform-loading {
width: @icon-font-size;
height: @icon-font-size;
margin: auto;
// Icon
&:after {
content: '\eb55';
font-family: 'icomoon';
font-size: @icon-font-size;
display: block;
line-height: 1;
margin: auto;
width: @icon-font-size;
height: @icon-font-size;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.animation(rotation 1s ease infinite);
}
}
// Errors
.editable-error {
color: @brand-danger;
}
.editable-error-block {
max-width: 300px;
margin: @padding-base-vertical 0 0 0;
width: auto;
white-space: normal;
}
// Transition
.editable-bg-transition {
color: inherit;
background-color: transparent;
.transition(background-color 0.2s ease-out);
}
// Clear buttons
// ------------------------------
// Date inputs clear button
.editable-clear {
clear: both;
text-decoration: none;
text-align: right;
}
// Clear input button
.editable-clear-x {
position: absolute;
right: @padding-base-horizontal - 3;
top: ((@input-height-base - @icon-font-size) / 2);
line-height: 1;
cursor: pointer;
z-index: 100;
.opacity(0.6);
&:hover {
.opacity(1);
}
&:after {
content: '\ed6b';
font-family: 'icomoon';
display: block;
font-size: @icon-font-size;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
// Links
// ------------------------------
// Link
.editable-click {
&,
a& {
&,
&:hover {
border-bottom: 1px dashed @link-color;
}
}
&.editable-disabled {
&,
a& {
&,
&:hover {
color: @text-muted;
cursor: default;
border-bottom: 0;
}
}
}
.label {
margin-top: 1px;
margin-bottom: 1px;
}
}
// Empty link
.editable-empty {
&,
&:hover,
&:focus {
font-style: italic;
color: @brand-danger;
}
a& {
&,
&:hover,
&:focus {
border-bottom-color: @brand-danger;
}
}
}
// Input types
// ------------------------------
// Combodate
.combodate {
white-space: nowrap;
.day,
.year,
.hour,
.minute {
min-width: 80px;
}
.form-control {
display: inline-block;
}
}
// Daterange
.input-daterange {
input {
text-align: center;
&:first-child {
.border-left-radius(@border-radius-base);
}
&:last-child {
.border-right-radius(@border-radius-base);
}
}
}
// Address
.editable-address {
display: block;
> label > span {
width: 70px;
display: inline-block;
margin-bottom: @padding-base-vertical;
}
}
// Date
.editable-date {
padding: 0;
margin: 0;
float: left;
}
// Checklist
.editable-checklist label {
white-space: nowrap;
> input[type="checkbox"] {
vertical-align: middle;
margin: 0;
}
}
// WYSIHTML5 editor
.editable-wysihtml5 {
width: 566px;
height: 250px;
}
// Editable modes
// ------------------------------
// Editable modes
.editable-container {
&.editable-popup {
max-width: none !important;
}
&.editable-inline {
display: inline-block;
vertical-align: middle;
width: auto;
.editableform-loading {
background-position: left 5px;
}
.add-on .icon-th {
margin-top: 3px;
margin-left: 1px;
}
}
&.popover {
width: auto;
min-width: 200px;
}
}