// Editable tags // -------------------------------------------------- @import "../variables/colors"; @import "../variables/sizes"; @import "../variables/mixins"; @import 'cdb-variables/colors'; @import 'cdb-variables/sizes'; $fieldBgColor: transparent; $fieldBorderColor: #DFE8EC; .EditableField { .EditableField-button { margin-right: 0; &:hover { text-decoration: underline; } } .EditableField-input { display: none; width: 100%; height: 100%; overflow: hidden; border: none; outline: none; background: none; background: -webkit-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; background: -moz-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; background: -ms-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; background: -o-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; background: linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; /* stylelint-disable-line */ background-size: 100% $baseSize * 2; } } .EditableField.is-editing { width: 100%; .EditableField-button { display: none; } .EditableField-input { display: block; resize: none; } }