saas-platform/frontend/saas-web/app/view/main/Main.scss

$circle-border-radius: dynamic(50%);
$base-border-color: dynamic(#ddd);
$lightest-color: dynamic(#fff);
$font-weight: dynamic(400);
$font-weight-bold: dynamic(500);

$accordion-header-background-color: dynamic($lightest-color);
$accordion-header-color: dynamic(#333);

$panel-body-background: dynamic(#f4f4f4) !default;

$treelist-nav-ui: (
        padding: 0 10px,
        background-color: $panel-navigation-background-color,
        toolstrip-background-color: #32404e,
        tool-float-indicator-color: $panel-header-background-color,
        tool-float-indicator-width: 5px,
        tool-indicator-selected-color: $panel-header-background-color,
        tool-indicator-selected-width: 5px,
        tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
        item-expanded-background-color: #2c3845,
        item-line-height: $panel-navigation-item-line-height,
        row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
        row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
        item-icon-color: $panel-navigation-item-text-color,
        item-expander-color: #fff,
        item-text-color: #ADB3B8,
        item-icon-over-color: #fff,
        item-expander-over-color: #fff,
        item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
        item-text-font-size: 14px,
        item-icon-font-size: 18px,
        //item-icon-width: 44px,
        item-expander-font-size: 16px,
        item-expander-width: 24px,
        row-indicator-width: 5px,
        row-indicator-selected-color: $panel-header-background-color,
        row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
        row-indicator-over-color: transparent
);

.x-treelist-item-text{
    padding-left: 10px;
}

.main-right-tabpanel {
    .x-tab-default-top {
        .x-tab-inner-default {
            font-size: 14px;
        }
    }
    .x-panel-bodyWrap {

        // &>.x-tab-bar {
        //     height: 40px;
        //     &>.x-tab-bar-body {
        //         height: 40px;
        //         padding: 0;
        //     }
        // }
        #main-tab-panel-body {
            background: $panel-body-background;

        }
    }

}

.main-logo-wrap {
    background-color: $base-color;
    height: 50px;

    font-size: 16px;
    font-weight: $font-weight-bold;
    color: $lightest-color;
    margin-left: 17px;

    .main-logo {
        background: #34BAF6;

        img {
            width: 32px;
            height: 32px;
            top: 8px;
            left: 28px;
            position: relative;
        }

        .logo-text {
            // font-family: 'pingFangSC-Regular';
            font-size: 18px;
            color: #FFFFFF;
            text-align: left;
            top: 22px;
            position: absolute;
            left: 64px;
        }
    }
}
/*.x-tab-bar-default-top > .x-tab-bar-body-default {
    padding: 0px 4px 0 0px;
}
.x-tab-bar-default-top .x-box-scroller-tab-bar-default {
    margin-top: -2px;
}
.x-tab-default-top{
    padding: 12px 12px 12px 12px;
}*/
.x-keyboard-mode .x-tab-focus.x-tab-default {
    outline: 0px;
}
.main-headerbar {
    padding: 0 30px 0 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    border: none;

    .header-right-profile-image {
        background: url(../../../../resources/images/default/user-profile-default.png) 0 0 no-repeat;
        background-position: center;
    }

    .x-btn,.x-btn-over,.x-btn-pressed{
        .x-btn-wrap{
          .x-btn-button{
            .x-btn-inner{
              color:#34BAF6 !important;
            }
          }
        }
      }
}
.x-btn.header-right-profile-image.x-btn-menu-active.x-btn-header-small,
.x-btn.header-right-profile-image.x-btn-pressed.x-btn-header-small {
    background: url(../../../../resources/images/default/user-profile-default.png) 0 0 no-repeat !important;
    background-position: center;
}
.top-english-button {
    .x-btn-icon-el {
        width: 21px;
        height: 14px;
    }
}
.collapsed {
    .x-tree-elbow-img {
        display: none;
    }

    .x-tree-node-text {
        display: none;
    }
}
.x-grid-cell{
    position: relative;
}

.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;

    &.hot-icon:after,
    &.new-icon:after {
        background: $panel-header-background-color;
        content: '';
    }
}

//Add border around html editor field
.x-html-editor-input {
    border: 1px solid #ccc;
}

.x-query-menu {
    width:68px !important;
}
.x-query-menu .x-menu-item-text-default.x-menu-item-indent-no-separator {
    margin-left: 11px !important;
}
.x-tbar-display  {
    margin-top: 2.5px !important;
}
.x-tbar-display .x-form-display-field-default {
    font: 400 16px/17px 'Microsoft YaHei';
}

.x-gudie-information{
    width: 50px;
    height: 50px;
    background: url(../../../../resources/images/guide/information.png) 0 0 no-repeat;
}

.x-gudie-end{
    width: 50px;
    height: 50px;
    background: url(../../../../resources/images/guide/end.png) 0 0 no-repeat;
}

.x-guide-background{
    background-size: 100% 100% !important;
    background: url(../../../../resources/images/guide/background.png) no-repeat;
}

.x-grid-checkcolumn-btn {
	margin-top: -1px;
    width: 34px;
    height: 21px;
    background: url(../../../../resources/images/grid/uncheck.png) 0 0 no-repeat;
}
.x-grid-checkcolumn-checked-btn {
	margin-top: 0px;
	width: 34px;
    height: 21px;
    background: url(../../../../resources/images/grid/check.png) 0 0 no-repeat;
}
body > .x-mask {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.3);
}
.icon-usoftchina{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/usoftchina.png) 0 0 no-repeat; 
   
}
.nav-menu{
    color: #48C1F8 !important;
}
.icon-feedback{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/feedback.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
} 
.user-icon{
    margin-top: 0px;
    background: url(../../../../resources/images/default/user-icon.png) 0 0 no-repeat; 
    background-size: 32px 32px;
    background-position: center;
}
.x-guide-mask{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.sa-nav-menu {
    background: #f8fbff;
    border: 1px solid #34baf6;
    margin-top: 10px;
}

.sa-nav-button {
    color: #34BAF6;
    padding: 0;
    box-shadow: none !important;
    border: none;
    background-color: transparent !important;

    .x-btn-icon-el {
        color: #34BAF6;
    }
}

.sa-nav-menu.x-menu-item-text-default,
.sa-nav-menu .sa-navicon {
    //font-family: PingFangSC-Regular;
    //font-size: 14px;
    color: #34BAF6;
    letter-spacing: 0;
    text-align: center;
}

.x-menu.sa-nav-menu .x-menu-bodyWrap {
    margin-left: -0.5px;
}
/* .x-main-menu .x-fa.sa-navicon{
    color: #34BAF6;
}  */
.sa-nav-menu .x-menu-item.x-menu-item-default-focus  .x-menu-item-text-default ,
.sa-nav-menu .x-menu-item.x-menu-item-active  .x-menu-item-text-default,
.sa-nav-menu .x-menu-item.x-menu-item-default-focus  .sa-navicon ,
.sa-nav-menu .x-menu-item.x-menu-item-active  .sa-navicon{
    color: white;
}

.x-main-menu::before{
    content: ' ';
    display: block;
    border-style: solid;
    background-color: #f8fbff;
    transform: rotate(45deg);
    border-color: #34baf6;
    position: fixed;
    width: 15px;
    height: 15px;
    clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -moz-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -o-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -ms-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -khtml-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    border-width: 1px 0px 0px 1px !important;
    margin-top: -7.5px;
    margin-left: 16px;
}
.x-main-menu2::before{
    /* content: ' ';
    display: block;
    border-style: solid;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(15, 136, 232, 0.6);
    box-shadow: aliceblue;
    border-width: 17px;
    border-color: #cccccc;
    position: fixed;
    top: 26px;
    -moz-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
    -webkit-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
    -o-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
    -ms-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
    -khtml-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin-top: 25px;
    margin-left: 47px; */

    content: ' ';
    display: block;
    border-style: solid;
    background-color: #f8fbff;
    transform: rotate(45deg);
    border-color: #34baf6;
    position: fixed;
    width: 15px;
    height: 15px;
    clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -moz-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -o-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -ms-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    -khtml-clip-path: polygon(0% 0, 100% 0%, 0 100%);
    border-width: 1px 0px 0px 1px !important;
    margin-top: -7.5px;
    margin-left: 55px;
}

.x-boundlist-item {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.x-main-master,
.x-main-master.x-btn-menu-active,
.x-main-master.x-btn-pressed {
    .x-btn-wrap{
        &:after {
            color: #34BAF6,
        }
        .x-btn-button{
            .x-btn-inner{
                font-size: 16px;
                padding: 0;
                color:#34BAF6 !important;
            }
        }
    }
}

#main-navigation-toggle-btn {
    .x-btn-icon-el-header-small {
        font-size: 12px;
        color: #34BAF6;
    }
}

.x-header-redpoint:after{
    z-index: 100;
    content: ' ';
    display: block;
    width: 8px;
    height: 8px;
    background-color: red;
    border: 1px solid red;
    border-radius: 12px;
    position: absolute;
    left: 76px;
    top: -7px;
}

.x-menu-redpoint:after{
    z-index: 100;
    content: ' ';
    display: block;
    width: 5px;
    height: 5px;
    background-color: red;
    border: 1px solid red;
    border-radius: 12px;
    position: absolute;
    left: 88px;
    top: 72px;
}