p5.js-web-editor/client/styles/components/_editable-input.scss
2019-11-25 14:53:58 +01:00

51 lines
1 KiB
SCSS

.editable-input {
height: 70%;
display: flex;
align-items: center;
}
.editable-input__label {
@include themify() {
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
& .editable-input__icon path {
fill: getThemifyVariable('primary-text-color');
}
}
}
cursor: pointer;
line-height: #{18 / $base-font-size}rem;
font-size: unset;
font-weight: unset;
}
.editable-input__icon svg {
width: 1.5rem;
height: 1.5rem;
@include themify() {
path {
fill: getThemifyVariable('inactive-text-color');
}
}
}
.editable-input:hover {
@include themify() {
.editable-input__icon path {
fill: getThemifyVariable('primary-text-color');
}
}
}
.editable-input--is-not-editing .editable-input__input,
.editable-input--is-editing .editable-input__label {
display: none;
}
.editable-input--is-editing .editable-input__input,
.editable-input--is-not-editing .editable-input__label {
display: block;
}