scinote-web/app/assets/stylesheets/partials/_inline_editing.scss

121 lines
2.1 KiB
SCSS
Raw Normal View History

@import "constants";
@import "mixins";
.inline-editing-container {
2019-11-12 18:26:18 +08:00
line-height: 32px;
position: relative;
2019-11-12 18:26:18 +08:00
width: 100%;
.button-container {
2020-07-08 19:02:47 +08:00
font-size: 16px;
height: 32px;
line-height: 32px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 72px;
span {
color: $color-silver;
cursor: pointer;
display: inline-block;
2019-11-12 18:26:18 +08:00
line-height: 32px;
position: absolute;
text-align: center;
width: 36px;
&:nth-child(1) {left: 0;}
&:nth-child(2) {right: 0;}
}
}
.error-block {
bottom: 3px;
color: $brand-danger;
display: none;
font-size: 11px;
line-height: 11px;
position: absolute;
}
2019-11-12 18:26:18 +08:00
&.error {
.error-block {
display: block;
}
2019-11-12 18:26:18 +08:00
.input-field {
font-size: 16px;
line-height: 20px;
padding-bottom: 10px;
padding-top: 0;
}
}
&:hover input,
&:hover .view-mode {
border: 1px solid $color-silver;
border-radius: 3px;
&:disabled {
border: 1px solid $color-gainsboro;
}
}
.view-mode {
border: 1px solid transparent;
cursor: pointer;
line-height: 26px;
margin-left: -5px;
2019-11-15 23:23:48 +08:00
min-height: 30px;
2019-05-20 17:20:08 +08:00
overflow: hidden;
padding: 2px 4px;
padding-right: 36px;
text-overflow: ellipsis;
2019-05-20 17:20:08 +08:00
white-space: nowrap;
width: calc(100% - 32px);
2019-11-15 23:23:48 +08:00
2019-11-15 23:28:08 +08:00
&:empty:not(:focus):before {
2019-11-15 23:23:48 +08:00
color: $color-silver-chalice;
2019-11-15 23:28:08 +08:00
content: attr(data-placeholder);
2019-11-15 23:23:48 +08:00
font-weight: normal;
}
}
input {
border: 1px solid $color-silver;
border-radius: $border-radius-small;
cursor: pointer;
2019-11-12 18:26:18 +08:00
display: block;
line-height: 26px;
margin-left: -5px;
padding: 2px 4px;
padding-right: 36px;
width: calc(100% - 32px);
2019-11-15 23:23:48 +08:00
&::placeholder {
color: $color-silver-chalice;
font-weight: normal;
}
&:focus {
outline: 0;
}
&:disabled {
background: transparent;
border: 1px solid transparent;
cursor: pointer;
2019-04-26 20:15:46 +08:00
pointer-events: none;
user-select: none;
+ .button-container {
display: none;
}
}
}
}