3.0 source code
This commit is contained in:
agolybev
@@ -0,0 +1,43 @@
|
||||
.toolbar-btn-icon(advanced-btn-ratio, 74, 20px);
|
||||
|
||||
.combo-arrow-style {
|
||||
.form-control {
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
|
||||
&.image {
|
||||
.background-ximage('@{app-image-path}/right-panels/Begin-EndStyle.png', '@{app-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px 0;
|
||||
background-attachment: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&:active:not(.disabled),
|
||||
&.active:not(.disabled){
|
||||
.caret {
|
||||
background-position: @arrow-small-offset-x @arrow-small-offset-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
.background-ximage('@{app-image-path}/right-panels/Begin-EndStyle.png', '@{app-image-path}/right-panels/Begin-EndStyle@2x.png', 480px);
|
||||
width:44px;
|
||||
height:20px;
|
||||
}
|
||||
|
||||
.advanced-settings-dlg {
|
||||
.div-category {
|
||||
padding: 0 15px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
141
OfficeWeb/apps/spreadsheeteditor/main/resources/less/app.less
Normal file
141
OfficeWeb/apps/spreadsheeteditor/main/resources/less/app.less
Normal file
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// Common
|
||||
// --------------------------------------------------
|
||||
|
||||
// App variables
|
||||
@import "variables.less";
|
||||
|
||||
@import "../../../../common/main/resources/less/asc-mixins.less";
|
||||
|
||||
// Bootstrap overwrite
|
||||
@import "../../../../common/main/resources/less/variables.less";
|
||||
|
||||
//
|
||||
// Bootstrap
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core variables and mixins
|
||||
//@import "../../../../vendor/bootstrap/less/variables.less";
|
||||
@import "../../../../../vendor/bootstrap/less/mixins.less";
|
||||
|
||||
// Reset
|
||||
@import "../../../../../vendor/bootstrap/less/normalize.less";
|
||||
//@import "print.less";
|
||||
|
||||
// Core CSS
|
||||
@import "../../../../../vendor/bootstrap/less/scaffolding.less";
|
||||
@import "../../../../../vendor/bootstrap/less/type.less";
|
||||
//@import "code.less";
|
||||
//@import "grid.less";
|
||||
//@import "tables.less";
|
||||
@import "../../../../../vendor/bootstrap/less/forms.less";
|
||||
@import "../../../../../vendor/bootstrap/less/buttons.less";
|
||||
|
||||
// Components
|
||||
@import "../../../../../vendor/bootstrap/less/component-animations.less";
|
||||
//@import "glyphicons.less";
|
||||
@import "../../../../../vendor/bootstrap/less/dropdowns.less";
|
||||
@import "../../../../../vendor/bootstrap/less/button-groups.less";
|
||||
@import "../../../../../vendor/bootstrap/less/input-groups.less";
|
||||
@import "../../../../../vendor/bootstrap/less/navs.less";
|
||||
//@import "navbar.less";
|
||||
//@import "breadcrumbs.less";
|
||||
//@import "pagination.less";
|
||||
//@import "pager.less";
|
||||
//@import "labels.less";
|
||||
//@import "badges.less";
|
||||
//@import "jumbotron.less";
|
||||
//@import "thumbnails.less";
|
||||
//@import "alerts.less";
|
||||
//@import "progress-bars.less";
|
||||
//@import "media.less";
|
||||
//@import "list-group.less";
|
||||
//@import "panels.less";
|
||||
//@import "wells.less";
|
||||
//@import "close.less";
|
||||
|
||||
// Components w/ JavaScript
|
||||
//@import "modals.less";
|
||||
@import "../../../../../vendor/bootstrap/less/tooltip.less";
|
||||
//@import "popovers.less";
|
||||
//@import "carousel.less";
|
||||
|
||||
// Utility classes
|
||||
@import "../../../../../vendor/bootstrap/less/utilities.less";
|
||||
@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
|
||||
|
||||
//
|
||||
// Perfect scrollbar
|
||||
// --------------------------------------------------
|
||||
|
||||
@import (inline) "../../../../../vendor/perfect-scrollbar/src/perfect-scrollbar.css";
|
||||
|
||||
//
|
||||
// Common
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "../../../../common/main/resources/less/header.less";
|
||||
@import "../../../../common/main/resources/less/buttons.less";
|
||||
@import "../../../../common/main/resources/less/dropdown-menu.less";
|
||||
@import "../../../../common/main/resources/less/dropdown-submenu.less";
|
||||
@import "../../../../common/main/resources/less/separator.less";
|
||||
@import "../../../../common/main/resources/less/input.less";
|
||||
@import "../../../../common/main/resources/less/combobox.less";
|
||||
@import "../../../../common/main/resources/less/window.less";
|
||||
@import "../../../../common/main/resources/less/spinner.less";
|
||||
@import "../../../../common/main/resources/less/loadmask.less";
|
||||
@import "../../../../common/main/resources/less/checkbox.less";
|
||||
@import "../../../../common/main/resources/less/radiobox.less";
|
||||
@import "../../../../common/main/resources/less/dataview.less";
|
||||
@import "../../../../common/main/resources/less/listview.less";
|
||||
@import "../../../../common/main/resources/less/colorpalette.less";
|
||||
@import "../../../../common/main/resources/less/theme-colorpalette.less";
|
||||
@import "../../../../common/main/resources/less/dimension-picker.less";
|
||||
@import "../../../../common/main/resources/less/hsb-colorpicker.less";
|
||||
@import "../../../../common/main/resources/less/table-styler.less";
|
||||
@import "../../../../common/main/resources/less/masked-field.less";
|
||||
@import "../../../../common/main/resources/less/extended-color-picker.less";
|
||||
@import "../../../../common/main/resources/less/layout.less";
|
||||
@import "../../../../common/main/resources/less/combo-border-size.less";
|
||||
@import "../../../../common/main/resources/less/combo-dataview.less";
|
||||
@import "../../../../common/main/resources/less/slider.less";
|
||||
@import "../../../../common/main/resources/less/multislider-gradient.less";
|
||||
@import "../../../../common/main/resources/less/advanced-settings-window.less";
|
||||
@import "../../../../common/main/resources/less/chat.less";
|
||||
@import "../../../../common/main/resources/less/comments.less";
|
||||
@import "../../../../common/main/resources/less/searchdialog.less";
|
||||
@import "../../../../common/main/resources/less/about.less";
|
||||
@import "../../../../common/main/resources/less/tooltip.less";
|
||||
@import "../../../../common/main/resources/less/scroller.less";
|
||||
@import "../../../../common/main/resources/less/synchronize-tip.less";
|
||||
@import "../../../../common/main/resources/less/tabbar.less";
|
||||
@import "../../../../common/main/resources/less/common.less";
|
||||
|
||||
// App
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "layout.less";
|
||||
@import "toolbar.less";
|
||||
@import "statusbar.less";
|
||||
@import "leftmenu.less";
|
||||
@import "rightmenu.less";
|
||||
@import "advanced-settings.less";
|
||||
@import "celleditor.less";
|
||||
@import "formuladialog.less";
|
||||
@import "filterdialog.less";
|
||||
@import "opendialog.less";
|
||||
|
||||
.font-size-small {
|
||||
.fontsize(@font-size-small);
|
||||
}
|
||||
|
||||
.font-size-normal {
|
||||
.fontsize(@font-size-base);
|
||||
}
|
||||
|
||||
.font-size-large {
|
||||
.fontsize(@font-size-large);
|
||||
}
|
||||
|
||||
@huge-icon-size: 37px;
|
||||
@x-huge-icon-size: 45px;
|
||||
@@ -0,0 +1,120 @@
|
||||
#cell-editing-box {
|
||||
border-bottom: solid 1px @gray-dark;
|
||||
border-left: solid 1px @gray-dark;
|
||||
min-height: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.ce-group-name {
|
||||
float: left;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid @gray-dark;
|
||||
background-color: @gray-light;
|
||||
|
||||
#ce-cell-name {
|
||||
width: 70px;
|
||||
height: 19px;
|
||||
background-color: @gray-light;
|
||||
padding: 1px 0 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
border: 0 none;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid @gray-dark;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: @gray-darker;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#ce-func-label {
|
||||
height: 20px;
|
||||
margin-left: -3px;
|
||||
.border-radius(0);
|
||||
|
||||
span.btn-icon {
|
||||
height: 14px;
|
||||
margin-top: 3px;
|
||||
background-position: 0px -1304px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span.btn-icon {
|
||||
background-position: -20px -1304px;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
span.btn-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ce-group-expand {
|
||||
float: right;
|
||||
height: 20px;
|
||||
|
||||
#ce-btn-expand {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
.border-radius(0);
|
||||
background: transparent;
|
||||
padding: 0 2px 0;
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
.caret {
|
||||
background-position: @arrow-small-offset-x @arrow-small-offset-y;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-collapse {
|
||||
.caret {
|
||||
background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ce-group-content {
|
||||
padding-left: 1px;
|
||||
margin: 0 16px 0 90px;
|
||||
height: 100%;
|
||||
border-left: 1px solid @gray-dark;
|
||||
|
||||
#ce-cell-content {
|
||||
height: 100%;
|
||||
resize: none;
|
||||
min-height: 19px;
|
||||
border: 0 none;
|
||||
font-size: 12px;
|
||||
|
||||
&[disabled] {
|
||||
color: @gray-darker;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#ce-cell-name, #ce-cell-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&+.layout-resizer {
|
||||
border-top: 0 none;
|
||||
border-bottom: 0 none;
|
||||
|
||||
&.move {
|
||||
border-top: 1px solid @gray-dark;
|
||||
border-bottom: 1px solid @gray-dark;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
.filter-dlg {
|
||||
|
||||
.combo-values {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.border-values {
|
||||
border: 1px solid @input-border;
|
||||
}
|
||||
|
||||
.body {
|
||||
height: auto;
|
||||
top: 34px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box > div {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
vertical-align: top;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
|
||||
.inner-content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
.font-size-normal();
|
||||
font-weight: normal;
|
||||
|
||||
&.input-label{
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-placeholder {
|
||||
// background-color: red;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
&.split {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
&.border {
|
||||
border: 1px solid @gray;
|
||||
.border-radius(1px);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 15px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.justify {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.formula-dlg {
|
||||
|
||||
.combo-functions {
|
||||
width: 100%;
|
||||
height: 242px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.body {
|
||||
height: auto;
|
||||
top: 34px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box > div {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
vertical-align: top;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
|
||||
.inner-content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
.font-size-normal();
|
||||
font-weight: normal;
|
||||
|
||||
&.input-label{
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding-top: 15px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.justify {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.user-select(none);
|
||||
color: @gray-deep;
|
||||
|
||||
&.safari {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
#viewport {
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#viewport {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top:0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #f4f4f4;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-region {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#editor_sdk {
|
||||
border-top: 1px solid @gray-dark;
|
||||
border-left: 1px solid @gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip.main-info {
|
||||
z-index: @zindex-popover;
|
||||
|
||||
.tooltip-inner {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,518 @@
|
||||
.tool-menu {
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
&.left {
|
||||
overflow: hidden;
|
||||
|
||||
.tool-menu-btns {
|
||||
border-right: 1px solid @gray-dark;
|
||||
|
||||
.toolbar-btn-icon(btn-menu-file, 61, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-menu-search, 62, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-menu-comments, 63, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-menu-chat, 59, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-menu-about, 58, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-menu-support, 75, @toolbar-icon-size);
|
||||
|
||||
button.notify .btn-menu-chat,
|
||||
button.notify.over > .btn-menu-chat {background-position: -0*@toolbar-icon-size -60*@toolbar-icon-size;}
|
||||
button.notify:active > .btn-menu-chat {background-position: -1*@toolbar-icon-size -60*@toolbar-icon-size;}
|
||||
button.notify.disabled > .btn-menu-chat {background-position: -2*@toolbar-icon-size -60*@toolbar-icon-size;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#left-menu {
|
||||
&+.layout-resizer {
|
||||
border-left: 0 none;
|
||||
border-right: 0 none;
|
||||
|
||||
&.move {
|
||||
border-left: 1px solid @gray-dark;
|
||||
border-right: 1px solid @gray-dark;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-menu-btns {
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding-top: 15px;
|
||||
|
||||
button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
padding-left: 40px;
|
||||
height: 100%;
|
||||
border-right: 1px solid @gray-dark;
|
||||
|
||||
#left-panel-chat {
|
||||
height: 100%;
|
||||
}
|
||||
#left-panel-comments {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu-full-ct {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 40px;
|
||||
padding-right: 40px;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: @zindex-dropdown - 5;
|
||||
background-color: @gray-light;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#file-menu-panel {
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-menu {
|
||||
width: 260px;
|
||||
float: left;
|
||||
border-right: 1px solid @gray-dark;
|
||||
background-color: @gray-light;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
&.fm-btn {
|
||||
height: 27px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: @secondary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline: 0;
|
||||
background-color: @primary;
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.devider {
|
||||
.dropdown-menu .divider;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
> a {
|
||||
&:extend(.dropdown-menu > li > a);
|
||||
padding-top: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-context {
|
||||
width: 100%;
|
||||
padding-left: 260px;
|
||||
background-color: #fff;
|
||||
|
||||
.content-box {
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
|
||||
label.empty {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#panel-saveas {
|
||||
table {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 65px;
|
||||
|
||||
.btn-doc-format {
|
||||
display: block;
|
||||
width: 98px;
|
||||
height: 125px;
|
||||
cursor: pointer;
|
||||
margin: 65px 25px 0px;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
.background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 408px);
|
||||
|
||||
.icon-document-format(@shift-x, @shift-y: 0) {
|
||||
background-position: @shift-x @shift-y;
|
||||
|
||||
&:hover {
|
||||
background-position: @shift-x+102 @shift-y;
|
||||
}
|
||||
}
|
||||
|
||||
&.xlsx {.icon-document-format(-102px);}
|
||||
&.ods {.icon-document-format(-102px, -129px);}
|
||||
&.csv {.icon-document-format(-306px, -129px);}
|
||||
&.html {.icon-document-format(-306px);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#panel-settings {
|
||||
padding: 0;
|
||||
|
||||
#id-settings-menu {
|
||||
.dataview {
|
||||
border-right: 1px solid @gray-dark;
|
||||
|
||||
& > div:not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
.box-shadow(none);
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
|
||||
.settings-item-wrap {
|
||||
padding: 7px 2px 7px 20px;
|
||||
|
||||
.settings-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
.background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
|
||||
|
||||
&.mnu-print {
|
||||
background-position: 0 -220px;
|
||||
}
|
||||
|
||||
&.mnu-settings-general {
|
||||
background-position: 0 -1141px;
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
vertical-align: middle;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.over {
|
||||
background-color: @gray-light;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: @primary;
|
||||
color: @dropdown-link-active-color;
|
||||
|
||||
.settings-icon {
|
||||
&.mnu-print {
|
||||
background-position: -20px -220px;
|
||||
}
|
||||
|
||||
&.mnu-settings-general {
|
||||
background-position: -20px -1141px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
padding: 5px 10px;
|
||||
|
||||
&.left {
|
||||
text-align: right;
|
||||
width: 30%;
|
||||
|
||||
label {
|
||||
font-family: tahoma, arial, verdana, sans-serif;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.main {
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
tr td {
|
||||
padding: 0 20px 0 0;
|
||||
vertical-align: top;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-settings-panel {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#panel-createnew {
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 10pt;
|
||||
color: #665;
|
||||
font-weight: bold;
|
||||
padding: 0 0 10px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.blank-document {
|
||||
min-width: 650px;
|
||||
}
|
||||
|
||||
.blank-document-info {
|
||||
vertical-align: top;
|
||||
width: 445px;
|
||||
display: inline-block;
|
||||
|
||||
h3 {
|
||||
padding-left: 0;
|
||||
padding-top: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.blank-document-btn {
|
||||
display: inline-block;
|
||||
margin: 25px 20px 65px;
|
||||
.background-ximage('@{app-image-path}/file-templates.png', '@{app-image-path}/file-templates@2x.png', 256px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-position: -128px 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
border-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.thumb-list {
|
||||
.thumb-wrap {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
padding: 30px 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.thumb {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
.background-ximage('@{app-image-path}/file-templates.png', '@{app-image-path}/file-templates@2x.png', 256px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#panel-recentfiles {
|
||||
.dataview {
|
||||
& > div:not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
|
||||
border: none;
|
||||
width: 100%;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-wrap {
|
||||
height: 65px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover,
|
||||
&.over {
|
||||
background-color: @gray-light;
|
||||
}
|
||||
|
||||
.recent-icon {
|
||||
float: left;
|
||||
width: 35px;
|
||||
height: 45px;
|
||||
margin-right: 10px;
|
||||
.background-ximage('@{app-image-path}/file-recent.png', '@{app-image-path}/file-recent@2x.png', 38px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#panel-help {
|
||||
padding: 0;
|
||||
overflow-y: hidden;
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dataview {
|
||||
border-right: 1px solid @gray-dark;
|
||||
|
||||
& > div:not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail) {
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
.box-shadow(none);
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
|
||||
&:not(.header-name) {
|
||||
&:hover,
|
||||
&.over {
|
||||
background-color: @gray-light;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: @primary;
|
||||
color: @dropdown-link-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-item-wrap {
|
||||
padding: 7px 2px 7px 20px;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
padding: 7px 2px 7px 10px;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#panel-info {
|
||||
padding: 0 30px;
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
padding: 0 20px 5px 0;
|
||||
|
||||
&.left {
|
||||
padding: 5px 10px;
|
||||
text-align: right;
|
||||
width: 30%;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding: 5px 10px;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.main {
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.userLink {
|
||||
.background-ximage('@{app-image-path}/profile.png', '@{app-image-path}/profile@2x.png', 12px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 17px;
|
||||
}
|
||||
|
||||
label, span {
|
||||
font-family: tahoma, arial, verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.open-dlg {
|
||||
|
||||
.body {
|
||||
height: auto;
|
||||
top: 34px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box > div {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
vertical-align: top;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
|
||||
.inner-content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
.font-size-normal();
|
||||
font-weight: normal;
|
||||
|
||||
&.input-label{
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
padding-top: 15px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.justify {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
|
||||
.tool-menu.right {
|
||||
.tool-menu-btns {
|
||||
position: absolute;
|
||||
border-left: 1px solid @gray-dark;
|
||||
background-color: @gray-light;
|
||||
right: 0;
|
||||
|
||||
/*menuText*/
|
||||
.toolbar-btn-icon(btn-menu-text, 64, @toolbar-icon-size);
|
||||
|
||||
/*menuImage*/
|
||||
.toolbar-btn-icon(btn-menu-image, 34, @toolbar-icon-size);
|
||||
|
||||
/*menuChart*/
|
||||
.toolbar-btn-icon(btn-menu-chart, 36, @toolbar-icon-size);
|
||||
|
||||
/*menuShape*/
|
||||
.toolbar-btn-icon(btn-menu-shape, 47, @toolbar-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
display: none;
|
||||
padding: 0 10px 0 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid @gray-dark;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
margin-top: 7px;
|
||||
|
||||
& > table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.padding-small {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.padding-large {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.finish-cell {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
.font-size-normal();
|
||||
font-weight: normal;
|
||||
|
||||
&.input-label{
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.header {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.separator { width: 100%;}
|
||||
|
||||
.settings-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-change-shape {
|
||||
.background-ximage('@{app-image-path}/right-panels/rowscols_icon.png', '@{app-image-path}/right-panels/rowscols_icon@2x.png', 84px);
|
||||
margin-right: 2px !important;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.btn-change-shape {background-position: 0 -16px;}
|
||||
button.over .btn-change-shape {background-position: -28px -16px;}
|
||||
.btn-group.open .btn-change-shape,
|
||||
button.active .btn-change-shape,
|
||||
button:active .btn-change-shape {background-position: -56px -16px;}
|
||||
|
||||
.combo-pattern-item {
|
||||
.background-ximage('@{app-image-path}/right-panels/patterns.png', '@{app-image-path}/right-panels/patterns@2x.png', 112px);
|
||||
}
|
||||
|
||||
.combo-dataview-menu {
|
||||
.form-control {
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
|
||||
&.text {
|
||||
background: white;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-gradient {
|
||||
.background-ximage('@{app-image-path}/right-panels/gradients.png', '@{app-image-path}/right-panels/gradients@2x.png', 150px);
|
||||
width:50px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.item-gradient-separator {
|
||||
margin-right: 62px !important;
|
||||
}
|
||||
|
||||
.gradient-left-top {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.gradient-top {
|
||||
background-position: -50px 0;
|
||||
}
|
||||
|
||||
.gradient-right-top {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
|
||||
.gradient-left {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
|
||||
.gradient-right {
|
||||
background-position: -100px -50px;
|
||||
}
|
||||
|
||||
.gradient-left-bottom {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
.gradient-bottom {
|
||||
background-position: -50px -100px;
|
||||
}
|
||||
|
||||
.gradient-right-bottom {
|
||||
background-position: -100px -100px;
|
||||
}
|
||||
|
||||
.gradient-radial-center {
|
||||
background-position: -100px -150px;
|
||||
}
|
||||
|
||||
// charts
|
||||
.item-wrap {
|
||||
width:50px;
|
||||
height:50px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.menu-insertchart {
|
||||
.group-description {
|
||||
float: left;
|
||||
width: 125px;
|
||||
line-height: 58px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.group-items-container {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
float: left;
|
||||
margin: 0 0 0 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-chartlist {
|
||||
.background-ximage('@{app-image-path}/charttypes.png', '@{app-image-path}/charttypes@2x.png', 150px);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.line-stack {
|
||||
background-position: -50px 0;
|
||||
}
|
||||
|
||||
.line-pstack {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
|
||||
.column-normal {
|
||||
background-position: 0 -50px;
|
||||
}
|
||||
|
||||
.column-stack{
|
||||
background-position: -50px -50px;
|
||||
}
|
||||
|
||||
.column-pstack{
|
||||
background-position: -100px -50px;
|
||||
}
|
||||
|
||||
.bar-normal {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
.bar-stack{
|
||||
background-position: -50px -100px;
|
||||
}
|
||||
|
||||
.bar-pstack{
|
||||
background-position: -100px -100px;
|
||||
}
|
||||
|
||||
.area-normal {
|
||||
background-position: 0 -150px;
|
||||
}
|
||||
|
||||
.area-stack{
|
||||
background-position: -50px -150px;
|
||||
}
|
||||
|
||||
.area-pstack{
|
||||
background-position: -100px -150px;
|
||||
}
|
||||
|
||||
.pie-normal {
|
||||
background-position: 0 -200px;
|
||||
}
|
||||
|
||||
.point-normal{
|
||||
background-position: -50px -200px;
|
||||
}
|
||||
|
||||
.stock-normal{
|
||||
background-position: -100px -200px;
|
||||
}
|
||||
|
||||
.pie-doughnut{
|
||||
background-position: 0 -250px;
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
.statusbar {
|
||||
padding: 0 2px 0;
|
||||
height: 25px;
|
||||
background-color: @gray-light;
|
||||
.box-inner-shadow(0 1px 0 @gray-dark);
|
||||
z-index: 500;
|
||||
|
||||
#status-tabs-scroll {
|
||||
width: 112px;
|
||||
float: left;
|
||||
padding: 3px 12px 0 10px;
|
||||
}
|
||||
|
||||
#status-zoom-box {
|
||||
width: 160px;
|
||||
float: right;
|
||||
padding-top: 3px;
|
||||
|
||||
.separator {
|
||||
margin-right: 10px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#status-label-zoom {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
color: @gray-darker;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#status-users-box {
|
||||
width: 63px;
|
||||
float: right;
|
||||
height: 100%;
|
||||
|
||||
#status-users-icon,#status-users-count {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#status-users-count {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
#status-users-icon {
|
||||
.background-ximage('@{app-image-path}/toolbar-menu.png', '@{app-image-path}/toolbar-menu@2x.png', 60px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -1320px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 3px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
#status-addtabs-box {
|
||||
float: left;
|
||||
padding: 3px 8px 0 8px;
|
||||
border-left: 1px solid @gray-dark;
|
||||
border-right: 1px solid @gray-dark;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#status-math-box {
|
||||
float: right;
|
||||
padding-top: 6px;
|
||||
padding-right: 14px;
|
||||
|
||||
label {
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
#status-sheets-bar-box {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 32px;
|
||||
left: 112px;
|
||||
right: 160px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#status-sheets-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
height: 100%;
|
||||
|
||||
> li {
|
||||
background-color: @gray-light;
|
||||
|
||||
&:first-child > a {
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
.border-radius(0);
|
||||
padding: 0 10px 0;
|
||||
line-height: 24px;
|
||||
margin-right: -1px;
|
||||
background-color: @gray-light;
|
||||
outline: none;
|
||||
border-left-color: @gray-dark;
|
||||
border-right-color: @gray-dark;
|
||||
border-top-color: @gray-dark;
|
||||
|
||||
&:hover {
|
||||
border-top-color: @gray-dark;
|
||||
border-bottom-color: @gray-dark;
|
||||
color: @black !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> a {
|
||||
border-bottom-color: @body-bg;
|
||||
background-color: @body-bg;
|
||||
outline: none;
|
||||
|
||||
box-shadow: 0px 3px 0 @primary inset;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.coauth-locked {
|
||||
> a {
|
||||
outline: none;
|
||||
}
|
||||
> a:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-bottom: 7px solid red;
|
||||
border-left: 7px solid transparent;
|
||||
bottom: 0;
|
||||
margin-left: -7px;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
> a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
> a {
|
||||
color: @gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-tab {
|
||||
.border-radius(4px);
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-weight: bold;
|
||||
color: @gray-deep;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-tpl(@top-position) {
|
||||
.btn-icon {
|
||||
background-position: 0 @top-position;
|
||||
|
||||
&:active {
|
||||
background-position: -20px @top-position;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] .btn-icon {
|
||||
background-position: -60px @top-position;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.btn-icon {
|
||||
background-position: -20px @top-position;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-btn-icon(btn-zoom-down, 68, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-zoom-up, 67, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-tab-first, 71, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-tab-back, 72, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-tab-next, 70, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-tab-last, 69, @toolbar-icon-size);
|
||||
|
||||
.status-group {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cnt-zoom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 80px;
|
||||
margin-left: -4px;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
|
||||
> a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-bottom: 6px;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
&.short {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs.bottom {
|
||||
margin-bottom: 6px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
.toolbar {
|
||||
padding: 10px 0;
|
||||
background-color: @gray-light;
|
||||
.box-inner-shadow(0 -1px 0 @gray-dark);
|
||||
|
||||
.toolbar-group {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
padding-left: 12px;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
height: 20px;
|
||||
font-size: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-left: 12px;
|
||||
|
||||
&.long {
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
&.short {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-placeholder {
|
||||
// background-color: red;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
&.split {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
&.border {
|
||||
border: 1px solid @gray;
|
||||
.border-radius(1px);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.masked {
|
||||
button.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-showmode) {
|
||||
background-position-x: 0px !important;
|
||||
}
|
||||
.toolbar-group:not(.no-mask) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 48px;
|
||||
right: 45px;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background-color: @gray-light;
|
||||
z-index: @zindex-modal - 1;
|
||||
}
|
||||
|
||||
.color-schemas-menu {
|
||||
span {
|
||||
&.colors {
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&.color {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// menu zoom
|
||||
.menu-zoom {
|
||||
.title {
|
||||
padding: 5px 0 5px 20px;
|
||||
float: left;
|
||||
max-width: 95px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.zoom {
|
||||
padding: 5px 3px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@toolbar-icon-size: 20px;
|
||||
.toolbar-btn-icon(btn-fontcolor, 0, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-valign-top, 1, @toolbar-icon-size);
|
||||
//
|
||||
.toolbar-btn-icon(btn-bold, 3, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-all, 4, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-clearstyle, 5, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-incdecimal, 6, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-decdecimal, 7, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-italic, 8, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-fillparag, 9, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-merge, 10, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-print, 11, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-redo, 12, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-save, 13, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-sort-down, 14, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-formula, 15, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-undo, 16, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-wrap, 17, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-underline, 18, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-align-left, 21, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-align-center, 19, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-align-right, 22, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-align-just, 20, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-valign-middle, 23, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-valign-bottom, 24, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-out, 25, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-top, 26, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-bottom, 27, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-left, 28, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-right, 29, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-no, 30, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-center, 31, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-hmiddle, 32, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-vmiddle, 33, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-insertimage, 34, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-inserthyperlink, 35, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-insertchart, 36, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-copy, 37, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-paste, 38, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-synch, 39, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-autofilter, 40, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-colorschemas, 41, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-newdocument, 42, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-opendocument, 43, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-incfont, 44, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-decfont, 45, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-text-orient, 46, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-insertshape, 47, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-text, 48, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-sort-up, 49, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-clear-filter, 50, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-percent-style, 51, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-currency-style, 52, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-addcell, 53, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-delcell, 54, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-ttempl, 55, @toolbar-icon-size);
|
||||
//
|
||||
.toolbar-btn-icon(btn-showmode, 56, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-settings, 57, @toolbar-icon-size);
|
||||
//
|
||||
.toolbar-btn-icon(btn-zoomin, 67, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-zoomout, 68, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-copystyle, 73, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-save-coauth, 76, @toolbar-icon-size);
|
||||
|
||||
.toolbar-btn-icon(btn-border-diagup, 42, @toolbar-icon-size);
|
||||
.toolbar-btn-icon(btn-border-diagdown, 43, @toolbar-icon-size);
|
||||
|
||||
@menu-icon-size: 22px;
|
||||
.menu-btn-icon(mnu-align-center, 0, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-align-just, 1, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-align-left, 2, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-align-right, 3, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-valign-bottom, 4, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-valign-middle, 5, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-valign-top, 6, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-all, 7, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-center, 8, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-bottom, 9, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-hmiddle, 10, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-top, 11, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-no, 12, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-out, 13, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-left, 14, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-vmiddle, 15, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-right, 16, @menu-icon-size);
|
||||
//
|
||||
.menu-btn-icon(mnu-arrange-front, 19, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-arrange-back, 20, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-arrange-forward, 21, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-arrange-backward, 22, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-sort-asc, 23, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-sort-desc, 24, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-filter-add, 25, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-filter-clear, 26, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-direct-horiz, 27, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-direct-ccw, 28, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-direct-cw, 29, @menu-icon-size);
|
||||
//
|
||||
.menu-btn-icon(mnu-direct-rup, 31, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-direct-rdown, 32, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-group, 33, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-ungroup, 34, @menu-icon-size);
|
||||
//
|
||||
.menu-btn-icon(mnu-border-diagup, 36, @menu-icon-size);
|
||||
.menu-btn-icon(mnu-border-diagdown, 37, @menu-icon-size);
|
||||
|
||||
.username-tip {
|
||||
background-color: #ee3525;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 2px 10px;
|
||||
color: #ffffff;
|
||||
font-family: arial;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#id-toolbar-btn-num-format button .caption {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
// Active color
|
||||
// -------------------------
|
||||
@green-darker: #0f0;
|
||||
@green-dark: #7e983f;
|
||||
@green: #8ca946;
|
||||
@green-light: #98b259;
|
||||
@green-lighter: #0f0;
|
||||
|
||||
@brand-active: @green-dark;
|
||||
@brand-active-light: @green-light;
|
||||
|
||||
@red: #d92b29;
|
||||
|
||||
// Header
|
||||
// -------------------------
|
||||
@app-header-height: 20px;
|
||||
@app-header-bg-color: @green;
|
||||
@app-header-bg-color-dark: @green-dark;
|
||||
@app-header-bg-color-light: @green-light;
|
||||
Reference in New Issue
Block a user