Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] debug CellEditor styles

Browse source
This commit is contained in:
Maxim Kadushkin 2016-11-25 12:45:25 +03:00
parent aad520a23f
commit 63db0e3ad8
2 changed files with 26 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/spreadsheeteditor/mobile/app/template/Editor.template
View file

@ -7,12 +7,12 @@
<span id="ce-cell-name"></span> <span id="ce-cell-name"></span>
<button id="ce-func-label" type="button" class="btn"><span class="btn-icon">&fnof;&#8333;&#8339;&#8334;</span></button> <button id="ce-func-label" type="button" class="btn"><span class="btn-icon">&fnof;&#8333;&#8339;&#8334;</span></button>
</div> </div>
<div class="ce-group group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret">&#10095;</span></button>
</div>
<div class="ce-group group-content"> <div class="ce-group group-content">
<textarea id="ce-cell-content" spellcheck="false" rows="1" cols="20"></textarea> <textarea id="ce-cell-content" spellcheck="false" rows="1" cols="20"></textarea>
</div> </div>
<div class="ce-group group-expand">
<button id="ce-btn-expand" type="button" class="btn"><span class="caret">&#10095;</span></button>
</div>
</div> </div>
<div id="editor_sdk" class="page-content no-fastclick"> <div id="editor_sdk" class="page-content no-fastclick">
</div> </div>

39
apps/spreadsheeteditor/mobile/resources/less/celleditor.less
View file

@ -16,6 +16,8 @@
border-bottom: solid 1px @gray-dark; border-bottom: solid 1px @gray-dark;
min-height: @cellEditorHeight; min-height: @cellEditorHeight;
background-color: #fff; background-color: #fff;
display: flex;
align-items: stretch;
.btn { .btn {
border: 0 none; border: 0 none;
@ -23,14 +25,7 @@
background-color: transparent; background-color: transparent;
} }
.caret {
display: block;
transform: rotate(90deg);
font-size: 16px;
}
.ce-group { .ce-group {
height: @cellEditorHeight;
} }
.group-name { .group-name {
@ -76,34 +71,32 @@
.group-expand { .group-expand {
float: right; float: right;
}
.group-content {
padding-left: 1px;
border-left: 1px solid @gray-dark;
flex-grow: 1;
height: 100%;
}
#ce-btn-expand { #ce-btn-expand {
width: @cellEditorHeight; width: @cellEditorHeight;
background: transparent; background: transparent;
padding: 0 2px 0; padding: 0 2px 0;
&:active,
&.active {
.caret { .caret {
background-color: #5d6c35; display: block;
//background-position: @arrow-small-offset-x @arrow-small-offset-y; transform: rotate(90deg);
} font-size: 16px;
} }
&.btn-collapse { &.collapse {
.caret { .caret {
background-color: #5d6c35; transform: rotate(-90deg);
//background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
} }
} }
} }
}
.group-content {
padding-left: 1px;
margin: 0 30px 0 128px;
border-left: 1px solid @gray-dark;
}
#ce-cell-content { #ce-cell-content {
display: block; display: block;
@ -116,7 +109,7 @@
height: 100%; height: 100%;
resize: none; resize: none;
min-height: 19px; min-height: @cellEditorHeight;
border: 0 none; border: 0 none;
font-size: 16px; font-size: 16px;