scinote-web/app/assets/stylesheets/shared/inline_edit.scss

86 lines
1.6 KiB
SCSS
Raw Normal View History

2022-06-09 20:40:45 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
.sci-inline-edit {
2022-06-09 20:40:45 +08:00
column-gap: .25em;
display: grid;
grid-template-columns: auto repeat(2, max-content);
transition: .4s $timing-function-sharp border;
2022-07-11 16:45:25 +08:00
&.editing .sci-inline-edit__content {
.sci-inline-edit__content {
padding-top: 0;
}
2022-07-11 16:45:25 +08:00
}
2022-06-09 20:40:45 +08:00
.sci-inline-edit__content {
display: flex;
flex-direction: column;
margin-left: -.25em;
min-height: 36px;
padding-left: .25em;
position: relative;
2022-06-09 20:40:45 +08:00
width: 100%;
textarea,
.sci-inline-edit__view {
min-height: 36px;
padding: .3em .2em .2em;
}
2022-06-09 20:40:45 +08:00
.sci-inline-edit__view {
border: 1px solid transparent;
2022-06-09 20:40:45 +08:00
cursor: pointer;
white-space: pre-wrap;
2022-06-09 20:40:45 +08:00
width: 100%;
2022-06-09 20:40:45 +08:00
&.blank {
color: $color-silver-chalice;
}
}
2022-06-09 20:40:45 +08:00
textarea {
background-color: $color-white;
border: 1px solid $brand-focus;
border-radius: 4px;
outline: none;
2022-06-09 20:40:45 +08:00
overflow: hidden;
width: 100%;
&:focus {
outline: none;
}
}
2022-06-09 20:40:45 +08:00
.sci-inline-edit__error {
bottom: -16px;
2022-06-09 20:40:45 +08:00
color: $brand-danger;
font-size: 12px;
font-weight: normal;
line-height: 12px;
position: absolute;
}
}
2022-06-09 20:40:45 +08:00
&.editing {
margin-top: 0;
2022-06-09 20:40:45 +08:00
.sci-inline-edit__content {
&.error {
border-color: $brand-danger;
margin-bottom: 16px;
textarea {
border-color: $brand-danger;
}
}
}
.sci-inline-edit__control {
&.btn-disabled {
background: $color-silver-chalice;
color: $color-concrete;
}
2022-06-09 20:40:45 +08:00
}
}
}