Refactoring less-styles v2
This commit is contained in:
parent
6902c6b58b
commit
6753994332
|
@ -68,8 +68,13 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.inner-range-title {
|
.inner-range-title {
|
||||||
|
color: @text-normal;
|
||||||
padding: 15px 0 0 15px;
|
padding: 15px 0 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.range-number {
|
||||||
|
color: @text-normal;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.page-content {
|
.page-content {
|
||||||
&.no-padding-top {
|
&.no-padding-top {
|
||||||
|
|
|
@ -151,7 +151,7 @@
|
||||||
.table-styles .row div:not(:first-child) {
|
.table-styles .row div:not(:first-child) {
|
||||||
margin: 2px auto 0px;
|
margin: 2px auto 0px;
|
||||||
}
|
}
|
||||||
.table-styles li, .table-styles .row div {
|
.table-styles .skeleton-list li, .table-styles .row div {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.table-styles .row .skeleton-list{
|
.table-styles .row .skeleton-list{
|
||||||
|
@ -160,30 +160,6 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Color Schemes
|
|
||||||
|
|
||||||
.color-schemes-menu {
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
// background-color: #fff;
|
|
||||||
.item-inner {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.color-schema-block {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.color {
|
|
||||||
min-width: 26px;
|
|
||||||
min-height: 26px;
|
|
||||||
margin: 0 2px 0 0;
|
|
||||||
box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
|
|
||||||
}
|
|
||||||
.item-title {
|
|
||||||
margin-left: 20px;
|
|
||||||
// color: #212121;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Picker
|
// Picker
|
||||||
|
|
||||||
.row-picker {
|
.row-picker {
|
||||||
|
|
|
@ -205,7 +205,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
@ -229,7 +229,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onOpacity(value)}}
|
onRangeChanged={(value) => {props.onOpacity(value)}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateOpacity + ' %'}
|
{stateOpacity + ' %'}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
.table-styles .row div:not(:first-child) {
|
.table-styles .row div:not(:first-child) {
|
||||||
margin: 2px auto 0px;
|
margin: 2px auto 0px;
|
||||||
}
|
}
|
||||||
.table-styles li, .table-styles .row div {
|
.table-styles .skeleton-list li, .table-styles .row div {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.table-styles .row .skeleton-list{
|
.table-styles .row .skeleton-list{
|
||||||
|
|
|
@ -162,7 +162,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
@ -186,7 +186,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onOpacity(value)}}
|
onRangeChanged={(value) => {props.onOpacity(value)}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateOpacity + ' %'}
|
{stateOpacity + ' %'}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
|
@ -37,8 +37,7 @@ const PageApplicationSettings = props => {
|
||||||
onChange={() => changeMeasureSettings(2)}></ListItem>
|
onChange={() => changeMeasureSettings(2)}></ListItem>
|
||||||
</List>
|
</List>
|
||||||
<List>
|
<List>
|
||||||
<ListItem>
|
<ListItem title={_t.textSpellcheck}>
|
||||||
<span>{_t.textSpellcheck}</span>
|
|
||||||
<Toggle checked={isSpellChecking}
|
<Toggle checked={isSpellChecking}
|
||||||
onToggleChange={() => {
|
onToggleChange={() => {
|
||||||
store.changeSpellCheck(!isSpellChecking);
|
store.changeSpellCheck(!isSpellChecking);
|
||||||
|
|
|
@ -156,7 +156,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
@ -180,7 +180,7 @@ const PageStyle = props => {
|
||||||
onRangeChanged={(value) => {props.onOpacity(value)}}
|
onRangeChanged={(value) => {props.onOpacity(value)}}
|
||||||
></Range>
|
></Range>
|
||||||
</div>
|
</div>
|
||||||
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
<div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
||||||
{stateOpacity + ' %'}
|
{stateOpacity + ' %'}
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
|
@ -65,8 +65,7 @@ const PageApplicationSettings = props => {
|
||||||
}
|
}
|
||||||
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
|
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
|
||||||
<List>
|
<List>
|
||||||
<ListItem>
|
<ListItem title={_t.textComments}>
|
||||||
<span>{_t.textComments}</span>
|
|
||||||
<Toggle checked={isComments}
|
<Toggle checked={isComments}
|
||||||
onToggleChange={() => {
|
onToggleChange={() => {
|
||||||
storeApplicationSettings.changeDisplayComments(!isComments);
|
storeApplicationSettings.changeDisplayComments(!isComments);
|
||||||
|
@ -74,8 +73,7 @@ const PageApplicationSettings = props => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem title={_t.textResolvedComments}>
|
||||||
<span>{_t.textResolvedComments}</span>
|
|
||||||
<Toggle checked={isResolvedComments} disabled={!isComments}
|
<Toggle checked={isResolvedComments} disabled={!isComments}
|
||||||
onToggleChange={() => {
|
onToggleChange={() => {
|
||||||
storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
|
storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
|
||||||
|
@ -85,8 +83,7 @@ const PageApplicationSettings = props => {
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
<List>
|
<List>
|
||||||
<ListItem>
|
<ListItem title={_t.textR1C1Style}>
|
||||||
<span>{_t.textR1C1Style}</span>
|
|
||||||
<Toggle checked={isRefStyle}
|
<Toggle checked={isRefStyle}
|
||||||
onToggleChange={() => {
|
onToggleChange={() => {
|
||||||
storeApplicationSettings.changeRefStyle(!isRefStyle);
|
storeApplicationSettings.changeRefStyle(!isRefStyle);
|
||||||
|
|
|
@ -238,16 +238,14 @@ const PageSpreadsheetSettings = props => {
|
||||||
onPageMarginsChange: props.onPageMarginsChange
|
onPageMarginsChange: props.onPageMarginsChange
|
||||||
}}></ListItem>
|
}}></ListItem>
|
||||||
</List>
|
</List>
|
||||||
<List simpleList>
|
<List>
|
||||||
<ListItem>
|
<ListItem title={_t.textHideHeadings}>
|
||||||
<span>{_t.textHideHeadings}</span>
|
|
||||||
<Toggle checked={isHideHeadings} onToggleChange={() => {
|
<Toggle checked={isHideHeadings} onToggleChange={() => {
|
||||||
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
|
storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
|
||||||
props.clickCheckboxHideHeadings(!isHideHeadings)
|
props.clickCheckboxHideHeadings(!isHideHeadings)
|
||||||
}} />
|
}} />
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem>
|
<ListItem title={_t.textHideGridlines}>
|
||||||
<span>{_t.textHideGridlines}</span>
|
|
||||||
<Toggle checked={isHideGridlines} onToggleChange={() => {
|
<Toggle checked={isHideGridlines} onToggleChange={() => {
|
||||||
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
|
storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
|
||||||
props.clickCheckboxHideGridlines(!isHideGridlines)
|
props.clickCheckboxHideGridlines(!isHideGridlines)
|
||||||
|
|
Loading…
Reference in a new issue