saas-one/frontend/operation-web/app/Application.scss

html,
body {
  height: 100%;
  margin: 0;
}

body.launching {
  @include background-size(cover);
  background-color: $auth-background-color;
  background-image: $auth-background-image;
  background-position: center;

  &::after {
    @include animation(rotate-animation 1s linear infinite);
    @include transform-origin(50% 50%);
    @include background-size(cover);
    background-image: url(get-resource-path('images/loading.gif'));
    background-position: center;
    content: '';
    position: absolute;
    margin-top: -15px;
    margin-left: -15px;
    top: 65%;
    left: 50%;
    width: 64px;
    height: 64px;
  }
}

@mixin btn-border($background-color) {
  background-color: $background-color;
  border-color: $background-color !important;

  .x-btn-inner-default-toolbar-small {
    color: $lightest-color;
  }

  &:hover {
    background-color: transparent;

    .x-btn-inner-default-toolbar-small,
    .x-btn-inner-default-small {
      color: $background-color;
    }

    .x-btn-icon-el-default-small,
    .x-btn-icon-el-default-toolbar-small {
      color: $background-color;
    }
  }
}

.x-menu-header {
  z-index: 0 !important;
}

// .x-css-shadow {
//   box-shadow: none !important;
// }

.shadow {
  @include box-shadow(rgba(0, 0, 0, 0.2) 0 1px 2px);
}

.x-fa {
  display: inline-block;
}

.alignRight {
  float: right;
}

.boldFont {
  font-weight: bold;
}

// default font-family
.x-body,
.x-btn-inner,
.x-panel-body-default,
.x-toolbar-text-default,
.x-form-item-label-default,
.x-form-text-default,
.x-column-header,
.x-grid-item,
.x-grid-row-summary .x-grid-cell, .x-grid-row-summary .x-grid-rowwrap, .x-grid-row-summary .x-grid-cell-rowbody,
.x-boundlist-item {
  // font-family: 'pingFangSC-Regular';
}

.x-form-item-label-default {
  // font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #505363;
  text-align: right;
  line-height: 20px;
}

// toolbar button
.x-btn-default-toolbar-small {
  color: #fff;
  background-color: #F8FCFF;
  border-color: #35BAF6;
  border-radius: 2px;
  min-width: 86px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  .x-btn-inner-default-toolbar-small {
    color: #34BAF6 ;
  }
}

.x-form-item-default.x-form-readonly {
  opacity: 1;

  .x-form-item-label-default {
    color: #8C97B2;
  }

  .x-form-text-default {
    background: #EEF1F7;
  }
  .x-form-trigger {
    background: #EEF1F7;
  }
}

.x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
.x-btn-over.x-btn-default-toolbar-small {
  border-color: #1592ca;
  background: #34BAF6;
  opacity: 0.72;
}

.x-btn-over{
  .x-btn-wrap{
    .x-btn-button{
      .x-btn-inner{
        color:#fff;
      }
    }
  }
}

.x-toolbar {
  .x-btn-over.x-btn-plain-toolbar-small{
    .x-btn-wrap{
      .x-btn-button{
        .x-btn-inner{
          color: #606060;
        }
      }
    }
  }
}

.x-btn-pressed{
  .x-btn-wrap{
    .x-btn-button{
      .x-btn-inner{
        color:#fff !important;
      }
    }
  }
}

.x-btn-showicon{
  .x-btn-wrap{
    .x-btn-button{
      .x-btn-inner{
        color:#999 !important;
      }
    }
  }
}

.x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
  background: inherit;
  opacity: 1;
  box-shadow: none;
  border:1px solid #34BAF6;
}

.x-segmented-button-item .x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
  background: #34BAF6 !important;
  border:1px solid #34BAF6 !important;
  opacity: 1;
  box-shadow: none;
}

.x-keyboard-mode .x-btn-focus.x-btn-over.x-btn-default-toolbar-small {
  background: #34BAF6;
  box-shadow: none;
}

.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
  color: #79d3dc;
}

.x-btn.x-btn-disabled.x-btn-default-toolbar-small {
  border-color: #E6E6E6;
  background: #E6E6E6;

  .x-btn-inner-default-toolbar-small {
    color: #606060;
  }
}

.x-btn-default-small,
.x-btn-default-toolbar-small{
  border-radius: 2px !important;
}

.x-formpanel-btn-orange {
  border-color: #f67f00;
  background: linear-gradient(to bottom,#da7101 0,#f67f00 100%) !important;
  
  .x-btn-inner-default-toolbar-small{
      color:#fff !important;
  }
}

.x-formpanel-btn-blue {
  background: #34BAF6;
  border-color: #34BAF6;
  .x-btn-inner-default-toolbar-small{
      color:#fff !important;
  }
}
.x-formpanel-btn-white {
    border: 1px solid #c1c1c1 !important;
    //border-radius: 2px;
    //box-shadow: 0 1px 1px rgba(0,0,0,.15);
    /*background: #fff;
    background: -moz-linear-gradient(top,#fff,#f4f4f4);
    background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f4f4f4));
    background: -o-linear-gradient(top,#fff,#f4f4f4);
    background: -ms-linear-gradient(top,#fff 0,#f4f4f4 100%);
    background: linear-gradient(top,#fff,#f4f4f4); */
    // border-color: #fff;
    // background: linear-gradient(to bottom,#fff,#f4f4f4 100%) !important;
    .x-btn-inner-default-toolbar-small{
      color: #555;
  }
}
.x-grid-body {
  border-width: 1px;
  border-color: #ABDAFF;
}

.x-column-header {
  background: #E5F7FF;
  border-right: 1px solid #ABDAFF;

  // &:last-child {
  //   border: none;
  // }
}

.x-column-header-text-inner {
  font-size: 14px;
  color: #505363;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  // font-family: PingFangSC-Medium;
  font-weight: normal;
}

.x-panel-default-outer-border-trbl {
  border-color: #ABDAFF !important;
}

.x-form-trigger-wrap-default {
  border-color: #CACFE1;
  border-radius: 2px;
}

.x-form-trigger-default {
  color: #5E5E5E;
}

.x-grid-header-ct {
  border-top-color: #ABDAFF !important;
  border-right-color: #ABDAFF !important;
  border-left-color: #ABDAFF !important;
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
}

.x-panel-default-outer-border-rl,
.x-panel-default-outer-border-rbl {
  border-color: #ABDAFF !important;
}

.x-grid-item-alt {
  background-color: #F1F9FF;
}

.x-grid-locked .x-grid-inner-locked {
  border-width: 0 1px 0 0;
}

.x-grid-scrollbar-clipper-locked, .x-grid-scrollbar-locked {
  // border-color: #ABDAFF;
  border-color: transparent;
}

.x-grid-inner-locked {
  // border-color: #ABDAFF;
  border-color: transparent;
}

.x-grid-with-row-lines .x-grid-item:first-child {
  border-color: #ffffff;
}

.x-grid-with-row-lines .x-grid-item {
  // border-color: #ABDAFF;
  border-color: transparent;
}

.x-keyboard-mode  .x-grid-item-focused .x-grid-cell-inner:before {
  border: none;
}

.x-grid-item-over {
  background-color: #bde5f7;
}

.x-grid-cell-special {
  // border-color: #ABDAFF;
  border-color: transparent;
}

.x-grid-item-selected {
  background-color: #ffefbb;
}

/*滚动条样式*/
div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  background: #C2EAFC;
  border-radius: 8px;

  &:hover {
    background: #74c3e6;
  }
}
div::-webkit-scrollbar-track {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
/**date-picker*/
.x-datepicker-month .x-btn-inner {
  font-size: 12px;
}
.x-datepicker {
  width: 212px;
}
.x-datepicker-column-header {
  width: 30px;
}
.x-datepicker-column-header-inner {
  line-height: 25px;
  padding: 0 9px 0 0;
}
.x-datepicker-cell {
  text-align: right;
  border: 1px solid #fff;
}
.x-datepicker-date {
  padding: 0 7px 0 0;
  cursor: pointer;
  line-height: 23px;
}
.x-datepicker-footer, .x-monthpicker-buttons {
  padding: 3px 0;
  text-align: center;
}
.x-monthpicker {
  width: 212px;
  border-width: 1px;
}
.x-monthpicker-months {
  width: 105px;
}
.x-monthpicker-item-inner {
  margin: 0 5px 0 5px;
  line-height: 22px;
}
.x-monthpicker-months .x-monthpicker-item {
  width: 52px;
}
.x-monthpicker-years {
  width: 105px;
}
.x-monthpicker-years .x-monthpicker-item {
  width: 52px;
}
.x-monthpicker-yearnav {
  height: 34px;
}
.x-monthpicker-yearnav-button-ct {
  width: 52px;
}
.x-monthpicker-yearnav-button {
  height: 12px;
  width: 12px;
  cursor: pointer;
  margin-top: 11px;
}
.x-datepicker-footer .x-btn-default-toolbar-small{
  padding: 2px 2px 2px 2px;
  min-width: 56px;
}
.x-monthpicker-buttons .x-btn-default-toolbar-small{
  padding: 2px 2px 2px 2px;
  min-width: 56px;
}

/** charts **/
.x-tip-default {
  background-color: #485465;
  border-color: #485465;
}

/** datepicker icon **/
.x-form-field-date .x-form-date-trigger {
  background: #F1F9FF;
  border-left: 1px solid #D2D6E5;
  
  &:before {
    // content: "\e80f";
    // font-family: font-saas;
    color: #5AC6F8;
  }
}

/** toast **/

.x-toast-success{
  border-color: #adeaa4 !important;
  border-radius: 4px !important;
  .x-window-body{
      background: #f3ffef !important;
      border-color: #f3ffef !important;
  }
  .x-autocontainer-innerCt{
      word-wrap: break-word;
      color: #3ec12a;
      padding: 4px 30px 4px 46px !important;
  }
  .x-autocontainer-innerCt::before{
      margin-left: -19px;
      margin-top: 1px;
      content: ' ';
      width: 16px;
      position: absolute;
      display: block;
      height: 16px;
      background: url(../../../../resources/images/default/toast_over.png) 0 0 no-repeat; 
      background-size: 16px 16px;
      background-position: center;
  }
}

.x-toast-error{
  border-color: #f39d70 !important;
  border-radius: 4px !important;
  .x-window-body{
      background: #fdefcd !important;
      border-color: #fdefcd !important;
  }
  .x-autocontainer-innerCt{
      word-wrap: break-word;
      color: #ea800e;
      padding: 4px 30px 4px 46px !important;
  }
  .x-autocontainer-innerCt::before{
      margin-left: -19px;
      margin-top: 1px;
      content: ' ';
      width: 16px;
      position: absolute;
      display: block;
      height: 16px;
      background: url(../../../../resources/images/default/toast_close.png) 0 0 no-repeat; 
      background-size: 16px 16px;
      background-position: center;
  }
}

/** tab **/
.x-tab-default.x-tab-active .x-tab-close-btn {
  color: #34BAF6;
}

/** tabclosemenu **/
.x-menu.x-tab-close-menu {
  & > div > div > div.x-box-inner.x-box-scroller-body-vertical.x-scroller > div > div > a > span {
    margin-left: 28px;
  }
}

/** responsivecolumn **/
.x-responsivecolumn {
  padding: 0;

  & > * {
      margin: 0;

  }
}

// @mixin responsivecolumn-item($width: 100%) {
//   width: #{$width};
// }

.big-100 {
  // width: 100%;
  @include responsivecolumn-item(100%);
}

.big-60 {
  // width: 60%;
  @include responsivecolumn-item(60%);
}

.big-50 {
  float: left;
  // width: 50%;
  @include responsivecolumn-item(50%);
}

.big-40 {
  float: left;
  // width: 40%;
  @include responsivecolumn-item(40%);
}

.big-33 {
  float: left;
  // width: 33.33%;
  @include responsivecolumn-item(33.33%);
}

.big-20 {
  float: left;
  // width: 20%;
  @include responsivecolumn-item(20%);
}

//--------------------------------------------------------
// And classes for small-size responsive items

.x-responsivecolumn-small {
   > .small-100 {
      float: left;
      // width: 100%;
      @include responsivecolumn-item(100%);
   }

   > .small-50 {
      float: left;
      // width: 50%;
      @include responsivecolumn-item(50%);
   }
}