web-apps/apps/spreadsheeteditor/mobile/src/less/celleditor.less

80 lines
1.8 KiB
Plaintext
Raw Normal View History

2020-12-15 21:18:16 +00:00
@cellEditorHeight: 30px;
@cellEditorExpandedHeight: 70px;
@contentBackColor: #fff;
@gray-light: #f1f1f1;
#idx-celleditor {
display: flex;
height: @cellEditorHeight;
min-height: @cellEditorHeight;
background-color: @contentBackColor;
&.expanded {
min-height: @cellEditorExpandedHeight;
//height: @cellEditorExpandedHeight;
transition: min-height .1s;
}
&:after {
content: '';
position: absolute;
background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
#box-cell-name {
background-color: var(--f7-navbar-bg-color);
}
#ce-cell-content {
padding: 3px 3px;
line-height: 1.428571429;
color: #000;
vertical-align: middle;
background-color: @contentBackColor;
min-height: @cellEditorHeight;
height: 100%;
width: 100%;
}
.caret {
&::after {
content: '';
position: absolute;
top: 8px;
left: 6px;
width: 8px;
height: 8px;
background-color: transparent;
border: solid 1px black;
border-bottom: none;
border-right: none;
transition: transform 0.2s ease;
transform: rotate(-135deg);
}
width: 30px;
height: 16px;
}
&.expanded {
.caret {
&::after {
transform: rotate(45deg) translate(3px, 3px);
}
}
}
}