saas-platform/frontend/saas-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;
}

.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%);
  }
}

input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #C3C3C3;
}

.x-quotation-detail{
  width: 1105px !important;
  .x-grid-row{
    border-color:#fff !important;
    background-color: #fff !important;
  }
  .x-grid-item-selected{
    border-color:#fff !important;
    background-color: #fff !important;
  }
}

.x-quotation-main{
  .x-grid-row{
    border-color:#fff !important;
    background-color: #fff !important;
  }
  .x-grid-item-selected{
    border-color:#fff !important;
    background-color: #fff !important;
  }
}

.x-btn-quotation{
  .x-btn-over {
    .x-btn-wrap {
      .x-btn-button {
        .x-btn-inner {
          color: #34baf6;
        }
      }
    }
  }
}