js-pkg

/*Definition*/ @skin:"material"; @font-family: 'Roboto',Segoe UI,Helvetica Neue,Ubuntu,Arial; @font-size: 14px; @font-path: "common-images"; @font-icon-path: "material/icons"; @border-size: 1px; @border-type: solid; @header-font-weight:bold; @header-font-size:16px; @content-font-weight: normal; @gheader-font-size: 14px; @gantt-content-font-size:12px; @gantt-header-font-family:@font-family; @gantt-header-font-size:14px; @gantt-parentGanttRecord-font-weight:bold; @gantt-schedule-font-weight:500; @gantt-schedule-font-size: 13px; @gantt-tooltip-font-size: 12px; @gantt-tasklable-font-family:@font-family; @gantt-tasklable-font-size:13px; @gantt-tasklable-font-style:normal; @treegrid-headercell-height:36px; @treegrid-header-padding:9px; @input-height: 32px; @input-width: 328px; @visual-mode-padding: 2px 19px 5px 4px; @visual-mode-rtl-padding: 2px 4px 5px 19px; @progressbar-height: 20px; @toolbar-padding: 4px; @toolbar-margin-right: 1px; @toolbar-res-margin-top: 5px; @menu-horizontal-line-height: 38px; @menu-vertical-line-height: 38px; @menu-hor-child-line-height: 24px; @menu-ver-child-line-height: 24px; @slider-size: 2px; @slider-border-radius: 2px; @slider-handle-size: 12px; @slider-bs-border-radius: 20px; @treeview-text-padding: 4px 7px 5px 7px; @treeview-edit-text-padding: 0 0 0 7px; @treeview-rtl-edit-text-padding: 0 7px 0 0; @treeview-ul-padding: 2px 0px 0px 24px; @treeview-icon-margin: 4px; @treeview-rtl-item-padding: 2px 24px 2px 0px; @treeview-rtl-ul-padding: 2px 24px 0px 0px; @treeview-ul-margin-bottom: -2px; @treeview-chk-margin-top: 7px; @treeview-fullrow-height: 32px; @rte-ul-margin-buttom: 5px; @rte-ul-margin-top: 6px; @rte-split-height: 34px; @rte-toolbar-res-margin-top: 12px; @fe-toolbar-res-margin-top: 10px; @fe-treeview-image-top: 5px; @button-height: 36px; @border-radius: 2px; @border-left-radius: @border-radius 0 0 @border-radius; @border-right-radius: 0 @border-radius @border-radius 0; @border-top-radius: @border-radius @border-radius 0 0; @border-bottom-radius: 0 0 @border-radius @border-radius; @inner-border-radius: @border-radius - 1; @inner-border-left-radius: @inner-border-radius 0 0 @inner-border-radius; @inner-border-right-radius: 0 @inner-border-radius @inner-border-radius 0; @inner-border-top-radius: @inner-border-radius @inner-border-radius 0 0; @box-shadow: 0 1.83px 1px rgba(0, 0, 0, 0.20); @button-box-shadow: 0 1.83px 1px rgba(0, 0, 0, 0.20); @schedule-commonviewbutton: 10px; @schedule-input-height:30px; @schedule-viewstable-margin-top:0px; @schedule-agendaday-line-height:34px; @schedule-box-shadow:@box-shadow; @schedule-commonviewbutton-box-shadow: none; @ribbon-line-height:33px; @ribbon-resizebtn-height:auto; @tools-border-radius: 0; @header-border-size: 0; @grid-box-shadow:@box-shadow; @input-border-width:0px 0px 1px 0px; @box-shadow-color:#000000; @spreadsheet-font-family: 'Roboto', Regular; @spreadsheet-font-size:12px; .e-ribbon.e-js .e-header .e-active a,.e-ribbon .e-header > .e-apptab .e-apptabanchor, .e-ribbon .e-expandcollapse span{ border-radius: @border-radius; } .e-ribbon .e-menu.e-horizontal > .e-list > a, .e-menu.e-horizontal > .e-list > span{ line-height:@ribbon-line-height; } .e-ribbon .e-groupdiv .e-resizebtn{ height: @ribbon-resizebtn-height; } .e-spanicon.e-radsmaller .e-icon.e-rad-icon { text-indent: 1.2px; } .e-radiobtn-wrap .e-radmedium .e-rad-icon { text-indent: -1.5px; } @widget: none; & { .mixin(@widget); } .mixin(@widget) when (@widget = common), (@widget = none) { .border-radius(@radius) when not(@radius = 0px) { /* Common Core */ .e-atc-popup, .e-atc .e-in-wrap, .e-atc .e-in-wrap .e-input, .e-acrdn-scroller, .e-acrdn .e-select, .e-chkbox-wrap div > span, .e-datepicker.e-popup, .e-datewidget .e-in-wrap, .e-datewidget .e-in-wrap .e-input, .e-daterangepicker-popup.e-popup, .e-daterangewidget .e-in-wrap, .e-daterangewidget .e-in-wrap .e-input, .e-daterangepicker-popup.e-popup, .e-drpbuttons, .e-daterangepicker-popup.e-popup .e-custom-dateranges li, .e-datetime-popup.e-popup, .e-datetime-popup .e-dt-button, .e-datetime-wrap .e-in-wrap, .e-datetime-wrap .e-in-wrap .e-input, .e-dialog-wrap, .e-dialog-wrap > .e-header .e-dialog-icon, .e-ddl-popup.e-popup, .e-ddl .e-in-wrap, .e-ddl .e-in-wrap .e-input, .e-numeric .e-in-wrap, .e-numeric .e-in-wrap .e-input, .e-percent .e-in-wrap, .e-percent .e-in-wrap .e-input, .e-currency .e-in-wrap, .e-currency .e-in-wrap .e-input, .e-mask .e-in-wrap, .e-mask .e-in-wrap .e-input, .e-textbox, .e-textarea, .e-menu, .e-tab, .e-time-popup.e-popup, .e-timewidget .e-in-wrap, .e-timewidget .e-in-wrap .e-input, .e-toolbar, .e-toolbar .e-tooltxt, .e-upload-box .e-selectpart, .e-upload-box .e-btn, .e-treeview .e-text, .e-fullrow-wrap .e-fullrow, .e-dragedNode, .e-splitbutton, .e-fileexplorer .e-tilenode, .e-rte, .e-rte.e-dialog .e-inputtext, .e-btn.e-select, .e-progressbar, .e-check-wrap .e-chk-inact, .e-check-wrap .e-chk-act, .e-check-wrap .e-chk-indeter { border-radius: @radius; } .e-groupbutton ul li.e-grp-btn-item:first-child { border-top-left-radius: @border-radius; border-bottom-left-radius: @border-radius; } .e-groupbutton ul li.e-grp-btn-item:last-child { border-top-right-radius: @border-radius; border-bottom-right-radius: @border-radius; } .e-groupbutton.e-rtl ul li.e-grp-btn-item:first-child { border-top-right-radius: @border-radius; border-bottom-right-radius: @border-radius; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .e-groupbutton.e-rtl ul li.e-grp-btn-item:last-child { border-top-left-radius: @border-radius; border-bottom-left-radius: @border-radius; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } } .border-radius(@border-radius); .e-colorwidget.e-split.e-disable .e-in-wrap .e-select:hover, .e-colorwidget.e-split.e-disable .e-color-container:hover, .e-dialog.e-disable .e-dialog-icon:hover, .e-dialog.e-disable > .e-header, .e-ddl .e-disable.e-select:hover, .e-in-wrap .e-disable.e-select .e-icon, .e-in-wrap .e-disable.e-select, .e-rte .e-horizontal .e-disable, .e-slider.e-disable .e-handle.e-select { cursor: default; } .e-corner, .e-corner .e-input, .e-acrdn-scroller.e-corner, .e-acrdn.e-corner .e-select, .e-corner .e-dt-button, .e-corner > .e-header .e-dialog-icon, .e-corner .e-tooltxt, .e-corner + .e-dialog, .e-corner + .e-dialog > .e-header .e-dialog-icon, .e-corner + .e-dialog > .e-btn { & when not(@skin="office-365"){ border-radius: 4px 4px 4px 4px; } & when (@skin="office-365"){ border-radius:0px; } } .border-radius(@radius) when not(@radius = 0px) { .e-tab > ul.e-addborderright .e-item, .e-tab .e-addborderleft.e-content-item, .e-split .e-splitarrowleft .e-splitbutton, .e-split .e-splitarrowright .e-drp-btn, .e-rtl.e-split .e-splitarrowright .e-splitbutton, .e-rtl.e-split .e-splitarrowleft .e-drp-btn, .e-fileexplorer .e-grid tr td.e-last-rowcell, .e-fileexplorer .e-grid.e-rtl tr td:first-child { & when (@skin= "material") { /*material*/ border-radius: 0; } & when not (@skin= "material") { /*other*/ border-radius: @border-right-radius; } } .e-tab > ul.e-addborderleft .e-item, .e-tab .e-addborderright.e-content-item, .e-split .e-splitarrowright .e-splitbutton, .e-split .e-splitarrowleft .e-drp-btn, .e-rtl.e-split .e-splitarrowleft .e-splitbutton, .e-rtl.e-split .e-splitarrowright .e-drp-btn, .e-fileexplorer .e-grid tr td:first-child, .e-fileexplorer .e-grid.e-rtl tr td.e-last-rowcell { & when (@skin= "material") { /*material*/ border-radius: 0; } & when not (@skin= "material") { /*other*/ border-radius: @border-left-radius; } } .e-acrdn .e-select.e-active, .e-datepicker.e-popup .e-header, .e-tab > ul.e-addborderbottom .e-item, .e-tab .e-addbordertop.e-content-item, .e-split .e-splitarrowtop .e-drp-btn, .e-split .e-splitarrowbottom .e-splitbutton, .e-rte .e-toolbar, .e-datetime-popup .e-header, .e-fileexplorer .e-toolbar { border-radius: @border-top-radius; } .e-acrdn-content-active, .e-dialog-wrap .e-widget-content, .e-tab > ul.e-addbordertop .e-item, .e-tab .e-addborderbottom.e-content-item, .e-split .e-splitarrowbottom .e-drp-btn, .e-split .e-splitarrowtop .e-splitbutton, .e-rte .e-rte-footer, .e-datetime-popup .e-time-popup { border-radius: @border-bottom-radius; } } .e-corner.e-tab > ul.e-addborderright .e-item, .e-corner.e-tab .e-addborderleft.e-content-item, .e-split .e-splitarrowleft .e-splitbutton.e-corner, .e-split .e-splitarrowright .e-corner + .e-drp-btn, .e-rtl.e-split .e-splitarrowright .e-splitbutton.e-corner, .e-rtl.e-split .e-splitarrowleft .e-corner + .e-drp-btn { & when (@skin="office-365") { border-radius: 0px; } & when not (@skin="office-365") { border-radius: 0 4px 4px 0; } } .e-corner.e-tab > ul.e-addborderleft .e-item, .e-corner.e-tab .e-addborderright.e-content-item, .e-split .e-splitarrowright .e-splitbutton.e-corner, .e-split .e-splitarrowleft .e-corner + .e-drp-btn, .e-rtl.e-split .e-splitarrowleft .e-splitbutton.e-corner, .e-rtl.e-split .e-splitarrowright .e-corner + .e-drp-btn { border-radius: 4px 0 0 4px; } .e-acrdn.e-corner .e-select.e-active, .e-datepicker.e-popup.e-corner .e-header, .e-corner.e-tab > ul.e-addborderbottom .e-item, .e-corner.e-tab .e-addbordertop.e-content-item, .e-split .e-splitarrowtop .e-corner + .e-drp-btn, .e-split .e-splitarrowbottom .e-splitbutton.e-corner, .e-datetime-popup.e-corner .e-header { border-radius: 4px 4px 0 0; } .e-corner .e-acrdn-content-active, .e-corner.e-dialog-wrap .e-widget-content, .e-corner.e-tab > ul.e-addbordertop .e-item, .e-corner.e-tab .e-addborderbottom.e-content-item, .e-split .e-splitarrowbottom .e-corner + .e-drp-btn, .e-split .e-splitarrowtop .e-splitbutton.e-corner, .e-datetime-popup.e-corner .e-time-popup { border-radius: 0 0 4px 4px; } .border-radius(@radius) when not(@radius = 0px) { .e-progressbar .e-progress.e-complete { border-radius: @inner-border-radius; } .e-atc.e-rtl .e-in-wrap.e-padding .e-input, .e-atc .e-in-wrap.e-padding .e-select, .e-datewidget.e-rtl .e-in-wrap.e-padding .e-input, .e-datewidget .e-in-wrap.e-padding .e-select, .e-datetime-wrap.e-rtl .e-in-wrap.e-padding .e-input, .e-datetime-wrap .e-in-wrap.e-padding .e-select, .e-ddl.e-rtl .e-in-wrap .e-input, .e-ddl .e-in-wrap .e-select, .e-numeric.e-rtl .e-in-wrap.e-padding .e-input, .e-numeric .e-in-wrap.e-padding .e-select, .e-percent.e-rtl .e-in-wrap.e-padding .e-input, .e-percent .e-in-wrap.e-padding .e-select, .e-currency.e-rtl .e-in-wrap.e-padding .e-input, .e-currency .e-in-wrap.e-padding .e-select, .e-timewidget.e-rtl .e-in-wrap.e-padding .e-input, .e-timewidget .e-in-wrap.e-padding .e-select { border-radius: @inner-border-right-radius; } .e-atc .e-in-wrap.e-padding .e-input, .e-atc.e-rtl .e-in-wrap.e-padding .e-select, .e-datewidget .e-in-wrap.e-padding .e-input, .e-datewidget.e-rtl .e-in-wrap.e-padding .e-select, .e-datetime-wrap .e-in-wrap.e-padding .e-input, .e-datetime-wrap.e-rtl .e-in-wrap.e-padding .e-select, .e-ddl .e-in-wrap .e-input, .e-ddl.e-rtl .e-in-wrap .e-select, .e-numeric .e-in-wrap.e-padding .e-input, .e-numeric.e-rtl .e-in-wrap.e-padding .e-select, .e-percent .e-in-wrap.e-padding .e-input, .e-percent.e-rtl .e-in-wrap.e-padding .e-select, .e-currency .e-in-wrap.e-padding .e-input, .e-currency.e-rtl .e-in-wrap.e-padding .e-select, .e-timewidget .e-in-wrap.e-padding .e-input, .e-timewidget.e-rtl .e-in-wrap.e-padding .e-select, .e-progressbar .e-progress { border-radius: @inner-border-left-radius; } .e-dialog-wrap > .e-header { border-radius: @inner-border-top-radius; } } .e-listbox li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .e-corner.e-progressbar .e-progress.e-complete { border-radius: 3px 3px 3px 3px; } .e-atc.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-atc .e-corner.e-in-wrap.e-padding .e-select, .e-daterangewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-select, .e-datewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-datewidget .e-corner.e-in-wrap.e-padding .e-select, .e-datetime-wrap.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-datetime-wrap .e-corner.e-in-wrap.e-padding .e-select, .e-ddl.e-rtl .e-corner.e-in-wrap .e-input, .e-ddl .e-corner.e-in-wrap .e-select, .e-numeric.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-numeric .e-corner.e-in-wrap.e-padding .e-select, .e-percent.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-percent .e-corner.e-in-wrap.e-padding .e-select, .e-currency.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-currency .e-corner.e-in-wrap.e-padding .e-select, .e-timewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-input, .e-timewidget .e-corner.e-in-wrap.e-padding .e-select { border-radius: 0 3px 3px 0; } .e-atc .e-corner.e-in-wrap.e-padding .e-input, .e-atc.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-datewidget .e-corner.e-in-wrap.e-padding .e-input, .e-datewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-input, .e-daterangewidget .e-corner.e-in-wrap.e-padding .e-input, .e-datetime-wrap .e-corner.e-in-wrap.e-padding .e-input, .e-datetime-wrap.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-ddl .e-corner.e-in-wrap .e-input, .e-ddl.e-rtl .e-corner.e-in-wrap .e-select, .e-numeric .e-corner.e-in-wrap.e-padding .e-input, .e-numeric.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-percent .e-corner.e-in-wrap.e-padding .e-input, .e-percent.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-currency .e-corner.e-in-wrap.e-padding .e-input, .e-currency.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-timewidget .e-corner.e-in-wrap.e-padding .e-input, .e-timewidget.e-rtl .e-corner.e-in-wrap.e-padding .e-select, .e-corner.e-progressbar .e-progress { border-radius: 3px 0 0 3px; } .e-corner.e-dialog-wrap > .e-header { border-radius: 3px 3px 0 0; } input.e-input, input[type="text"].e-input, .e-input.e-placeholder, .e-ddl.e-widget .e-ul.e-boxes { & when (@skin= "material") { -webkit-box-shadow: none; box-shadow: none; } & when not (@skin= "material") { -webkit-box-shadow: @box-shadow; box-shadow: @box-shadow; } } .e-float-container { & when (@skin= "material") { margin-bottom: 8px; padding-top: 16px; position: relative; width: auto; } } .e-float-text { & when (@skin= "material") { font-family: "Roboto", Segoe UI; top: -4px; font-weight: 400; padding-left: 2px; pointer-events: none; position: absolute; transform: translate3d(0, 28px, 0) scale(1); transform-origin: left top; transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); width: 100%; color: #9e9e9e; } } .e-focus + .e-float-text, .e-valid + .e-float-text { & when (@skin= "material") { top: -8px; -webkit-transform: translate3d(0, 6px, 0) scale(0.85); transform: translate3d(0, 6px, 0) scale(0.85); -webkit-transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; } } .e-focus + .e-float-text { & when (@skin= "material") { color: #ff4081; } } .e-disable { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } .e-corner-all { border-radius: 4px 4px 4px 4px; } .e-corner-top, .e-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } .e-corner-top, .e-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } .e-corner-bottom, .e-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .e-corner-bottom, .e-corner-right { -moz-border-radius-topright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* validation message */ .e-validation-error { & when (@skin= "material") { font-family: @font-family; font-size: 12px; color: #f44336; font-weight: normal; margin-bottom: 0px; margin-top: 8px; width: 328px; display: inline-block; } & when (@skin= "office-365") { font-family: @font-family; font-size: 12px; margin: 10px 0 0 0; font-weight: 400; } & when not (@skin= "material") and not (@skin="office-365") { font-size: 14px; color: #cd0a0a; } } .e-validation-error:before { & when (@skin= "material") { font-family: 'ej-webfont'; content: "\e64c"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 16px; height: 16px; float: right; font-size: 16px; } } .e-textbox.e-validation-error, .e-textarea.e-validation-error { & when (@skin= "office-365") { margin: 0; } } .e-input, .e-tooltipbox, .e-btn, .e-time-popup, .e-datepicker.e-calendar, .e-menu, .e-uploadbox .e-file-name-txt, .e-uploadbox .e-selectpart, .e-uploadbox .e-uploadbtn, .e-uploadbox .e-uploadclosebtn, .e-waitpopup-pane .e-text, .e-tagcloud, .e-toolbar, .e-progressbar, .e-scale .e-tick .tick-value, .e-datetime-popup .e-dt-button, .e-grid, .e-ejinputtext, .e-pager, .e-fileexplorer, .e-textbox, .e-textarea { font-family: @font-family; & when not (@skin = "material") { font-size: @font-size; } & when (@skin = "material") { font-size: 12px; } } .e-menu, input.e-input, input[type="text"].e-input, .e-mask, .e-ul, .e-btn .e-btn-span, .e-tbtn.e-chkbx-hidden, .e-datepicker table, .e-datepicker table th, .e-datepicker table td, .e-menu.e-horizontal > .e-list, .e-menu.e-vertical > li.e-separator, .e-menu.e-context > li.e-separator, .e-tab.e-js > .e-header, .e-uploadbox .e-action-perform, .e-uploadbox .e-uploaddialog.e-dialog.e-dialog-content, .e-tagcloud .e-load, .e-scale, .e-select, .e-input.e-placeholder { margin: 0; padding: 0; outline: 0 none; line-height: normal; } .e-btn, .e-btn .e-btn-span, .e-datepicker .e-header .e-next, .e-datepicker .e-header .e-prev, .e-datepicker .e-header .e-text, .e-menu > .e-list > a > img, .e-menu > .e-list > span > img, .e-menu > .e-list > a > div, .e-menu > .e-list > span > div, .e-menu > .e-list > a > span, .e-menu > .e-list > span > span, .e-menu .e-list > a span.e-icon, .e-menu .e-list > span span.e-icon, .e-menu.e-horizontal > .e-list, .e-menu.e-vertical, .e-menu.e-context, .e-chkbox-wrap, .e-radiobtn-wrap, .e-chkbox-wrap div, .e-chkbox-wrap .e-text, .e-radiobtn-wrap .e-text, .e-tab.e-js > .e-header, .e-tab .e-header li, .e-tab .e-header li a, .e-dialog .e-dialog-icon, .e-dialog .e-icon, .e-uploadbox .e-selectpart, .e-uploadbox .e-file-list, .e-treeview .e-text, .e-tagcloud .e-cloud, .e-tagcloud .e-list, .e-tagcloud .e-cloud .e-tagitems, .e-h-scale .e-tick, .e-grid .e-groupheadercell, .e-grid .e-groupheadercell:hover, .e-pager, .e-pager .e-disableditem, .e-grid div.e-parentmsgbar, .e-grid .e-toolbaricons, .e-pager .e-pagercontainer { display: inline-block; } .e-ul { list-style-type: none; } input.e-input, input[type="text"].e-input, .e-input.e-placeholder { border: medium none; height: 100%; width: 100%; display: block; line-height: 1.908em; & when not (@skin= "material") { padding-left: 0.857em; } } .e-rtl input.e-input, .e-rtl input[type="text"].e-input, .e-rtl .e-input.e-placeholder, .e-textbox.e-rtl, .e-textarea.e-rtl { text-align: right; padding-left: 0; padding-right: 0.857em; } .e-in-wrap { display: block; height: 100%; position: relative; overflow: hidden; border: 1px solid; } .e-rtl { direction: rtl; } .e-widget, .e-widget [class^="e-"], .e-widget [class*=" e-"] { -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box; /* Firefox, other Gecko */ box-sizing: content-box; /* Opera/IE 8+ */ } .e-widget.e-box, .e-widget .e-box, .e-widget button.e-btn, button.e-btn.e-widget, input.e-btn.e-widget, input.e-input, input[type="text"].e-input, .e-input.e-placeholder, .e-widget input.e-input, .e-lv.e-js .e-header.e-box, .e-textbox, .e-textarea { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .e-scheduledialog.e-dialog .e-dialog-scroller, .e-ss-dialog.e-dialog .e-dialog-scroller { -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box; /* Firefox, other Gecko */ box-sizing: content-box; /* Opera/IE 8+ */ } .e-shadow { -moz-box-shadow: 0 0 9px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 9px rgba(0,0,0,.4); box-shadow: 0 0 9px rgba(0,0,0,.4); } .e-overlay { background-color: gray; opacity: 0.5; filter: alpha(opacity= 50); width: 100%; height: 100%; } .e-tooltipbox { font-weight: 600; height: auto; position: absolute; width: auto; min-width: 10px; text-align: center; z-index: 10000; & when (@skin= "material") { font-size: 10px; padding: 4px 8px 0px 8px; border: 0 none; height: 22px; box-sizing: border-box; } & when (@skin= "office-365") { font-size: 12px; padding: 0px 12px; height: 20px; border: 1px solid; box-sizing: border-box; border-radius: 0px; } & when not (@skin= "material") and not (@skin= "office-365") { padding: 2px; border: 1px solid; } } .e-slider-wrap.e-horizontal.e-scale-wrap .e-slider.e-js { & when (@skin="office-365") { border-top: 3px solid; border-bottom: 3px solid; box-sizing: content-box; } } .e-slider-wrap.e-default-wrap.e-horizontal.e-scale-wrap .e-slider.e-js { & when (@skin="office-365") { border-top: 4px solid; border-bottom: 4px solid; } } .e-slider-wrap.e-horizontal.e-default-wrap .e-scale.e-h-scale { & when (@skin="office-365") { margin-top: -6px; height: 26px !important; } } .e-slider-wrap.e-horizontal.e-default-wrap .e-scale .e-tick:not(.e-large) { & when (@skin="office-365") { height: 20px !important; top: -3px !important; } } .e-slider-wrap.e-horizontal .e-scale.e-h-scale { & when (@skin="office-365") { margin-top: -3px; } } .e-slider-wrap.e-default-wrap.e-horizontal .e-scale.e-h-scale { & when (@skin="office-365") { margin-top: -5px; } } .e-slider-wrap.e-vertical.e-scale-wrap .e-slider.e-js { & when (@skin="office-365") { border-left: 3px solid; border-right: 3px solid; box-sizing: content-box; } } .e-slider-wrap.e-default-wrap.e-vertical.e-scale-wrap .e-slider.e-js { & when (@skin="office-365") { border-left: 4px solid; border-right: 4px solid; } } .e-slider-wrap.e-default-wrap.e-vertical .e-scale.e-v-scale { & when (@skin="office-365") { margin-left: 3px; width: 26px !important; } } .e-slider-wrap.e-vertical .e-scale.e-v-scale { & when (@skin="office-365") { margin-left: 3px; } } .e-slider-wrap.e-vertical.e-default-wrap .e-scale .e-tick:not(.e-large) { & when (@skin="office-365") { width: 20px !important; left: 3px !important; } } .e-slider-wrap.e-vertical .e-scale .e-tick .e-tick-value { & when (@skin="office-365") { margin-right: 2px; } } .e-input::-ms-clear { display: none; } .edge-browser ::-webkit-input-placeholder { opacity: 1 !important; } .e-input::-webkit-input-placeholder, .e-textbox::-webkit-input-placeholder, .e-textarea::-webkit-input-placeholder { .watermerk-style(); } .e-input::-moz-placeholder, .e-textbox::-moz-placeholder, .e-textarea::-moz-placeholder { .watermerk-style(); } .e-input:-moz-placeholder, .e-textbox:-moz-placeholder, .e-textarea:-moz-placeholder { .watermerk-style(); } .e-input:-ms-input-placeholder, .e-textbox:-ms-input-placeholder, .e-textarea:-ms-input-placeholder { .watermerk-style(); } .e-input.e-watermark { .watermerk-style(); } .watermerk-style() { & when (@skin= "material") { font-style: normal; } & when (@skin= "office-365") { font-weight: 400; font-size: 14px; } & when not (@skin= "material") and not (@skin="office-365") { font-style: italic; opacity: 0.6; filter: alpha(opacity=60); } } .e-widget .e-input.e-placeholder { top: 0; position: absolute; white-space: nowrap; text-align: left; & when (@skin= "material") { font-style: normal; } & when (@skin= "office-365") { font-weight: 400; font-size: 14px; line-height: 2.1em; } & when not (@skin= "material") and not (@skin="office-365") { font-style: italic; } } .e-textbox { height: @input-height; } .e-textbox, .e-textarea { line-height: 1.908em; outline: medium none; border: 1px solid; & when (@skin= "bootstrap") { box-shadow: @box-shadow; } & when (@skin= "material") { border-width: 0 0 1px 0; border-radius: 0px; padding-left: 0px; font-size: 13px; box-shadow: none; width: 328px; } & when (@skin= "office-365") { width: 300px; padding-left: 10px; font-size: 14px; font-weight: 400; box-shadow: none; } & when not (@skin= "material") and not (@skin="office-365") { width: 100%; padding-left: 0.857em; } } .e-textbox.e-rtl, .e-textarea.e-rtl { & when (@skin= "material") { padding-right: 0px; } & when (@skin= "office-365") { padding-right: 10px; } } .e-textbox[disabled], .e-textarea[disabled] { & when (@skin= "office-365") { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } } .e-textbox:focus, .e-textarea:focus { & when (@skin= "material") { border-width: 0 0 2px 0; } } .e-textbox.e-animation:focus, .e-textarea.e-animation:focus { & when (@skin= "material") { border-width: 0 0 1px 0; } } .e-pinch { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; } .e-pan-x { -ms-touch-action: pinch-zoom pan-x; touch-action: pinch-zoom pan-x; } .e-pan-y { -ms-touch-action: pinch-zoom pan-y; touch-action: pinch-zoom pan-y; } .e-numeric .e-select .e-spin-up:after, .e-numeric .e-select .e-spin-down:after, .e-percent .e-select .e-spin-up:after, .e-percent .e-select .e-spin-down:after, .e-currency .e-select .e-spin-up:after, .e-currency .e-select .e-spin-down:after, .e-treeview .e-plus:after, .e-treeview .e-minus:after, .e-treeview .e-icon.e-load:after, .e-treeview-wrap:not(.e-fullrow-wrap) .e-text:after, .e-fullrow-wrap .e-fullrow:after, .e-pager .e-icon.e-animate:after, .e-pager .e-numericitem.e-animate:after, .e-schedule .e-resourceexpand:after, .e-schedule .e-resourcecollapse:after, .e-btn.e-select:after, .e-tbtn.e-btn:after, .e-split .e-split-btn.e-select.e-left-btn:after, .e-split .e-split-btn.e-select.e-drp-btn:after, .e-groupbutton > .e-ul > .e-grp-btn-item:after, .e-datepicker.e-popup .e-header .e-prev:after, .e-datepicker.e-popup .e-header .e-next:after, .e-tooltxt:after, .e-colorwidget .e-color-container .e-selected-color::after, .e-colorpicker .e-colorblock .e-color-image.e-add:after, .e-colorwidget .e-select .e-icon::after, .e-uploadbox.e-widget .e-selectpart.e-select:after, .e-pivotgrid .filter:after, .e-pivotgrid .sorting:after, .e-pivotgrid .removeBtn:after, .e-datepicker.e-popup .e-header .e-prev:not(:active):after, .e-datepicker.e-popup .e-header .e-next:not(:active):after, .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:not(:active):after, .e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:not(:active):after, .e-datepicker .e-footer.e-btn.e-select.e-flat:not(:active):after, .e-datetime-popup .e-dt-button.e-btn.e-select.e-flat:not(:active):after, .e-datepicker .e-datepicker-days td:after,.e-pivotclient .firstPage.pageEnabled:after, .e-pivotclient .prevPage.pageEnabled:after, .e-pivotclient .nextPage.pageEnabled:after, .e-pivotclient .lastPage.pageEnabled:after { & when (@skin= "material") { .e-ripple-style(); } } .e-btn.e-select:after, .e-tbtn.e-btn:after, .e-split .e-split-btn.e-select.e-left-btn:after, .e-split .e-split-btn.e-select.e-drp-btn:after, .e-groupbutton > .e-ul > .e-grp-btn-item:after, .e-datepicker.e-popup .e-header .e-prev:after, .e-datepicker.e-popup .e-header .e-next:after, .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:after, .e-colorwidget .e-color-container .e-selected-color::after, .e-colorpicker .e-colorblock .e-color-image.e-add:after, .e-colorwidget .e-select .e-icon::after { & when (@skin= "material") { visibility: hidden; } } .e-numeric .e-select .e-animate.e-spin-up:not(:active):after, .e-numeric .e-select .e-animate.e-spin-down:not(:active):after, .e-percent .e-select .e-animate.e-spin-up:not(:active):after, .e-percent .e-select .e-animate.e-spin-down:not(:active):after, .e-currency .e-select .e-animate.e-spin-up:not(:active):after, .e-currency .e-select .e-animate.e-spin-down:not(:active):after, .e-treeview .e-animate.e-plus:not(:active):after, .e-treeview .e-animate.e-minus:not(:active):after, .e-treeview .e-load.e-animate:not(:active):after, .e-pager .e-icon.e-animate:not(:active):after, .e-pager .e-numericitem.e-animate:not(:active):after, .e-schedule .e-resourcecollapse:not(:active):after, .e-schedule .e-resourceexpand:not(:active):after, .e-button.e-btn.e-animate:not(:active):after, .e-tbtn.e-btn.e-animate:not(:active):after, .e-split .e-split-btn.e-select.e-btn:not(:active):after, .e-split .e-split-btn.e-select.e-btn:not(:active):after, .e-groupbutton > .e-ul > .e-grp-btn-item.e-active:not(:active):after, .e-groupbutton > .e-ul > .e-grp-btn-item:not(:active):after, .e-tbtn.e-btn.e-flat.e-animate:not(:active):after, .e-button.e-btn.e-flat.e-animate:not(:active):after, .e-pivotgrid .filter:active:after, .e-pivotgrid .sorting:active:after, .e-pivotgrid .removeBtn:active:after, .e-datepicker .e-datepicker-days td.e-active:after, .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-start-date:after, .e-daterangepicker-popup .e-datepicker .e-datepicker-days td.e-end-date:after, .e-datetime-popup .e-dt-button.e-btn.e-select.e-flat.e-focus:not(:active):after, .e-datepicker .e-footer.e-btn.e-select.e-flat:focus:not(:active):after, .e-daterangepicker-popup .e-drp-button.e-btn.e-select.e-flat:focus:not(:active):after, .e-datepicker.e-popup .e-header .e-prev:not(:active):after, .e-datepicker.e-popup .e-header .e-next:not(:active):after, .e-datetime-popup .e-drillDowncontainer .e-timepicker.e-popup .e-header .e-icon:not(:active):after, .e-uploadbox.e-widget .e-selectpart.e-select:active:after,.e-pivotclient .firstPage.pageEnabled:active:after, .e-pivotclient .prevPage.pageEnabled:active:after, .e-pivotclient .nextPage.pageEnabled:active:after, .e-pivotclient .lastPage.pageEnabled:active:after { & when (@skin= "material") { .e-ripple-animation(); } } .e-ripple-style() { content: ''; display: block; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0.75; filter: alpha(opacity=75); width: 50%; height: 50%; left: 25%; top: 25%; } .e-ripple-animation() { -webkit-animation: e-icon-ripple 0.45s linear; -moz-animation: e-icon-ripple 0.45s linear; -o-animation: e-icon-ripple 0.45s linear; -ms-animation: e-icon-ripple 0.45s linear; animation: e-icon-ripple 0.45s linear; } @-webkit-keyframes e-icon-ripple { 100% { opacity: 0; -webkit-transform: scale(4); } } @keyframes e-icon-ripple { 100% { opacity: 0; transform: scale(4); } } .e-treeview-wrap:not(.e-fullrow-wrap) .e-text:after, .e-fullrow-wrap .e-fullrow:after { & when (@skin= "material") { width: 10px; height: 10px; top: 33%; left: 45%; } } .e-treeview-wrap:not(.e-fullrow-wrap) .e-text.e-active.e-animate:not(:active):after { & when (@skin= "material") { -webkit-animation: e-text-ripple 0.45s linear; -moz-animation: e-text-ripple 0.45s linear; -o-animation: e-text-ripple 0.45s linear; -ms-animation: e-text-ripple 0.45s linear; animation: e-text-ripple 0.45s linear; } } @-webkit-keyframes e-text-ripple { 100% { opacity: 0; -webkit-transform: scale(20); } } @keyframes e-text-ripple { 100% { opacity: 0; transform: scale(20); } } .e-fullrow-wrap .e-animate:not(:active) + .e-fullrow:after, .e-fullrow-wrap .e-fullrow.e-animate:not(:active):after { & when (@skin= "material") { -webkit-animation: e-full-text-ripple 0.45s linear; -moz-animation: e-full-text-ripple 0.45s linear; -o-animation: e-full-text-ripple 0.45s linear; -ms-animation: e-full-text-ripple 0.45s linear; animation: e-full-text-ripple 0.45s linear; } } @-webkit-keyframes e-full-text-ripple { 100% { opacity: 0; -webkit-transform: scale(70); } } @keyframes e-full-text-ripple { 100% { opacity: 0; transform: scale(70); } } .e-treeview-wrap:not(.e-fullrow-wrap) .e-text { & when (@skin= "material") { position: relative; overflow: hidden; } } .e-ripple-bar { & when (@skin= "material") { position: relative; box-shadow: none; outline: medium none; width: 328px; display: block; } } .e-numeric .e-in-wrap:before, .e-percent .e-in-wrap:before, .e-currency .e-in-wrap:before, .e-mask .e-in-wrap:before, .e-numeric .e-in-wrap:after, .e-percent .e-in-wrap:after, .e-currency .e-in-wrap:after, .e-mask .e-in-wrap:after, .e-ripple-bar:before, .e-ripple-bar:after, .e-datewidget .e-in-wrap:before, .e-datewidget .e-in-wrap:after, .e-daterangewidget .e-in-wrap:before, .e-daterangewidget .e-in-wrap:after, .e-timewidget .e-in-wrap:before, .e-timewidget .e-in-wrap:after, .e-datetime-wrap .e-in-wrap:before, .e-datetime-wrap .e-in-wrap:after, .e-atc .e-in-wrap:before, .e-atc .e-in-wrap:after, .e-ddl .e-in-wrap:before, .e-ddl .e-in-wrap:after, .e-colorpicker .e-codeeditor:after, .e-colorpicker .e-buttons .e-codeeditor::before { & when (@skin= "material") { content: ''; height: 2px; width: 0; bottom: -1px; position: absolute; z-index: 10; transition: .2s cubic-bezier(.4,0,.4,1); -moz-transition: .2s cubic-bezier(.4,0,.4,1); -webkit-transition: .2s cubic-bezier(.4,0,.4,1); } } .e-colorpicker .e-buttons .e-codeeditor.e-focus::before{ & when (@skin= "material") { width:100%; left: 0px; } } .e-colorpicker .e-buttons .e-codeeditor .e-color-code{ & when (@skin= "material"){ border-width:0 0 1px 0; overflow:visible; } } .e-colorpicker .e-buttons .e-codeeditor .e-color-code:focus{ & when (@skin= "material"){ box-shadow:none; } } .e-ddl .e-in-wrap:before, .e-ddl .e-in-wrap:after { & when (@skin= "material") { content: ''; height: 2px; width: 0; bottom: 0px; position: absolute; z-index: 10; transition: .2s cubic-bezier(.4,0,.4,1); -moz-transition: .2s cubic-bezier(.4,0,.4,1); -webkit-transition: .2s cubic-bezier(.4,0,.4,1); } } .e-textbox + .e-ripple-bar:before, .e-textbox + .e-ripple-bar:after { & when (@skin= "material") { bottom: 0px; } } .e-textarea + .e-ripple-bar:before, .e-textarea + .e-ripple-bar:after { & when (@skin= "material") { bottom: 5px; } } .e-numeric .e-in-wrap:before, .e-percent .e-in-wrap:before, .e-currency .e-in-wrap:before, .e-mask .e-in-wrap:before, .e-ripple-bar:before, .e-datewidget .e-in-wrap:before, .e-daterangewidget .e-in-wrap:before, .e-timewidget .e-in-wrap:before, .e-datetime-wrap .e-in-wrap:before, .e-atc .e-in-wrap:before, .e-ddl .e-in-wrap:before, .e-colorpicker .e-codeeditor:before { & when (@skin= "material") { left: 50%; } } .e-numeric .e-in-wrap:after, .e-percent .e-in-wrap:after, .e-currency .e-in-wrap:after, .e-mask .e-in-wrap:after, .e-ripple-bar:after, .e-datewidget .e-in-wrap:after, .e-daterangewidget .e-in-wrap:after, .e-timewidget .e-in-wrap:after, .e-datetime-wrap .e-in-wrap:after, .e-atc .e-in-wrap:after, .e-ddl .e-in-wrap:after, .e-colorpicker .e-codeeditor:after { & when (@skin= "material") { right: 50%; } } .e-numeric.e-focus .e-in-wrap:before, .e-percent.e-focus .e-in-wrap:before, .e-currency.e-focus .e-in-wrap:before, .e-mask.e-focus .e-in-wrap:before, .e-numeric.e-focus .e-in-wrap:after, .e-percent.e-focus .e-in-wrap:after, .e-currency.e-focus .e-in-wrap:after, .e-mask.e-focus .e-in-wrap:after, .e-textbox:focus + .e-ripple-bar:before, .e-textbox:focus + .e-ripple-bar:after, .e-textarea:focus + .e-ripple-bar:before, .e-textarea:focus + .e-ripple-bar:after, .e-datewidget.e-focus .e-in-wrap:before, .e-datewidget.e-focus .e-in-wrap:after, .e-daterangewidget.e-focus .e-in-wrap:before, .e-daterangewidget.e-focus .e-in-wrap:after, .e-timewidget.e-focus .e-in-wrap:before, .e-timewidget.e-focus .e-in-wrap:after, .e-datetime-wrap.e-focus .e-in-wrap:before, .e-datetime-wrap.e-focus .e-in-wrap:after, .e-atc.e-focus .e-in-wrap:before, .e-atc.e-focus .e-in-wrap:after, .e-ddl.e-popactive .e-in-wrap:before, .e-ddl.e-popactive .e-in-wrap:after, .e-colorpicker .e-codeeditor:focus::after { & when (@skin= "material") { width: 50%; } } .e-numeric .e-in-wrap, .e-percent .e-in-wrap, .e-currency .e-in-wrap, .e-mask .e-in-wrap, .e-datewidget .e-in-wrap, .e-daterangewidget .e-in-wrap, .e-timewidget .e-in-wrap, .e-datetime-wrap .e-in-wrap, .e-atc .e-in-wrap, .e-ddl .e-in-wrap, .e-colorpicker .e-codeeditor { & when (@skin= "material") { overflow: visible; } } .e-ddl .e-in-wrap { & when (@skin= "material") { overflow: hidden; } } html { -webkit-tap-highlight-color: rgba(0,0,0,0); } } .mixin(@widget) when (@widget = tooltip), (@widget = none) { .e-tooltip-wrap { display: none; position: absolute; max-width: 350px; min-width: 50px; visibility: visible; padding: 0px; } .e-tooltip-wrap .e-arrowTip { height: 10px; left: 50%; top: 100%; overflow: hidden; position: absolute; width: 20px; } .e-tooltip-wrap .e-tipContainer { position: relative; overflow: hidden; } .e-tooltipShadowLeft { box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.06); } .e-tooltipShadowRight { box-shadow: -4px -4px 4px 0px rgba(0,0,0,0.06); } .e-tooltip-wrap .e-tipContainer .e-tooltipHeader { position: relative; overflow: hidden; display: block; & when (@skin= "office-365") { padding: 8px; } & when not (@skin= "office-365") { padding: 5px 7px 5px 7px; } } .e-tooltip-wrap .e-tipContainer .e-header { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; float: left; & when (@skin= "office-365") { font-weight: 600; font-size: 14px; } & when not (@skin= "office-365") { font-weight: bold; font-size: 15px; } } .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-tooltipTitle { overflow: hidden; text-overflow: ellipsis; & when (@skin= "office-365") { font-weight: 600; } & when not (@skin= "office-365") { font-weight: bold; } } .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close:before { content: "\e6f7"; } .e-tooltip-wrap .e-cross-circle:before { content: "\e60a"; color: #474747; } .e-tooltip-wrap .e-cross-circle { top: -9px; right: -9px; float: right; position: absolute; } .e-tooltip-wrap .e-tipContainer .e-tooltipHeader .e-close { float: right; padding: 5px; & when (@skin= "office-365") { width: 12px; height: 12px; padding-right: 8px; } } .e-def { word-wrap: break-word; } .e-tooltip-wrap .e-tipContainer .e-tipcontent { & when (@skin= "material") { padding: 2px 8px 2px 8px; } & when not (@skin= "material") { & when (@skin= "office-365") { padding: 10px 8px; } & when not (@skin= "office-365") { padding: 5px 7px; } } } .e-tooltip-wrap .e-corner { border-radius: 2px 2px 2px 2px; } div.e-tooltip-wrap.e-customAnimation { & when (@skin="material") { webkit-transition: all .4s cubic-bezier(.25,.8,.25,1); transition: all .4s cubic-bezier(.25,.8,.25,1); -webkit-transform: scale(1.1); transform: scale(1.1); } } .e-disable { opacity: 0.35; filter: alpha(opacity=35); background-image: none; } .e-rtl { direction: rtl; } } .mixin(@widget) when (@widget = button), (@widget = none) { .e-btn { cursor: pointer; overflow: hidden; text-align: center; text-decoration: none; border: medium none; box-shadow: @button-box-shadow; & when (@skin="office-365") { font-family: @font-family; font-weight:600; font-size:14px; } } .e-btn.e-select { & when not(@skin="material") { border: 1px solid; } } .e-btn, .e-btn .e-btn-span { vertical-align: middle; border-spacing: 0; } .e-btn .e-icon, .e-split-btn-div .e-icon { display: table-cell; padding: 4px 3px; visibility: visible; vertical-align: middle; } .e-split-btn-div .e-icon { & when (@skin="material") { font-size: 14px; } & when not (@skin="material") { font-size: 10px; } & when (@skin="office-365") { font-size: 14px; } } .e-btn.e-btn-normal .e-icon { & when (@skin="material") { padding: 8px; } } .e-rtl .e-splitarrowleft .e-split-btn.e-left-btn { border-left: 1px solid; } .e-rtl .e-splitarrowright .e-split-btn.e-left-btn { & when (@skin="office-365") { border:none; } & when not (@skin="office-365") { border-right: 1px solid; } } .e-split.e-btn-normal .e-in-wrap .e-left-btn .e-icon { & when (@skin="material") { padding: 4px; } } .e-btn.e-btn-normal.e-txt { & when (@skin="office-365") { padding: 0px 20px 0px; } } .e-btn.e-txt { & when not (@skin="material") { padding: 0.1em 0.4em 0.3em; } } .e-split .e-splitarrowright .e-splitbutton.e-corner, .e-split .e-splitarrowleft .e-corner+.e-drp-btn, .e-rtl.e-split .e-splitarrowleft .e-splitbutton.e-corner, .e-rtl.e-split .e-splitarrowright .e-corner+.e-drp-btn { & when (