// The prefix to use on all css classes from ant. @ant-prefix : ant; @mat-prefix : mat; // -------- Colors ----------- @primary-color : #0091fb; @success-color : #00a854; @error-color : #f04134; // @highlight-color : @red-6; // @warning-color : @yellow-6; // @normal-color : #d9d9d9; // @font-color : #4a4a4a; // Color used by default to control hover and active backgrounds and for // alert info backgrounds. // Base Scaffolding Variables // --- // Background color for `` @body-background : #fff; // Base background color for most components @component-background : #fff; @font-family : "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @code-family : Consolas, Menlo, Courier, monospace; // @heading-color : fade(#000, 85%); @text-color : #4a4a4a; @text-color-assit : #9b9b9b; // @heading-color-dark : fade(#fff, 97%); // @text-color-dark : fade(#fff, 91%); @text-color-secondary : fade(#fff, 67%); @font-size-base : 12px; @font-size-lg : @font-size-base + 2px; @font-size-xl : @font-size-base + 4px; @font-size-xxl : @font-size-base + 6px; @line-height-base : 1.4; @border-radius-base : 4px; @height-base : 25px; // @border-radius-sm : 2px; // // The background colors for active and hover states for things like // // list items or table cells. // @item-active-bg : @primary-1; @item-hover-bg : @primary-color; // // ICONFONT @iconfont-css-prefix : anticon; // @icon-url : "https://at.alicdn.com/t/font_zck90zmlh7hf47vi"; // // LINK @link-color : @primary-color; // @link-hover-color : @primary-5; // @link-active-color : @primary-7; // @link-hover-decoration : none; // // Animation // @ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); // @ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); // @ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); // @ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); // @ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); // @ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); // @ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); // @ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); // @ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); // @ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); // @ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); // @ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); // // Border color @border-color-base : #ebebeb; // base border outline a component @border-color-dark : #d9d9d9; @border-color-split : #e9e9e9; // split border inside a component @border-width-base : 1px; // width of the border for a component @border-style-base : solid; // style of a components border // // Outline // @outline-blur-size : 0; // @outline-width : 2px; @outline-color : @primary-color; // // Default background color for disabled states, Collapse wrappers, // // and several active and hover states. @background-color-base : #f7f7f7; // @background-color-active: #eee; // // Disabled states @disabled-color : #bfbfbf; @disabled-bg : @background-color-base; // @disabled-color-dark : fade(#fff, 35%); // // Shadow // @shadow-color : rgba(0, 0, 0, .2); // @box-shadow-base : @shadow-1-down; // @shadow-1-up : 0 -1px 6px @shadow-color; // @shadow-1-down : 0 1px 6px @shadow-color; // @shadow-1-left : -1px 0 6px @shadow-color; // @shadow-1-right : 1px 0 6px @shadow-color; // @shadow-2 : 0 2px 8px @shadow-color; // // Buttons // @btn-font-weight : 500; @btn-border-radius-base : 0; @btn-height : @height-base; @btn-height-lg : 30px; @btn-padding : 0 22px; // @btn-border-radius-sm : @border-radius-base; @btn-primary-bg : #53b6ff; @btn-primary-hover-bg : #87cdff; @btn-primary-active-bg : #0091FB; @btn-primary-disabled-bg : #C8E8FF; @btn-default-color : @text-color; @btn-default-bg : @background-color-base; @btn-default-border : #dadada; @btn-default-active-border: @text-color-assit; // @btn-danger-color : @error-color; @btn-danger-bg : @error-color; @btn-danger-border : @btn-danger-bg; @btn-danger-hover-bg : #f04134; @btn-danger-active-bg : #d53f33; @btn-danger-disabled-bg : #fcdbd9; // @btn-disable-color : @disabled-color; // @btn-disable-bg : @disabled-bg; // @btn-disable-border : @border-color-base; // @btn-padding-base : 0 16px; // @btn-font-size-lg : @font-size-lg; // @btn-padding-lg : @btn-padding-base; // @btn-padding-sm : 0 12px; // @btn-height-base : 30px; // @btn-height-lg : 34px; // @btn-height-sm : 24px; // @btn-circle-size : @btn-height-base; // @btn-circle-size-lg : @btn-height-lg; // @btn-circle-size-sm : @btn-height-sm; // @btn-group-border : @primary-7; // // Radio buttons // @radio-button-bg : @btn-default-bg; // @radio-button-color : @btn-default-color; // // Media queries breakpoints // // Extra small screen / phone // @screen-xs : 480px; // @screen-xs-min : @screen-xs; // // Small screen / tablet // @screen-sm : 768px; // @screen-sm-min : @screen-sm; // // Medium screen / desktop // @screen-md : 992px; // @screen-md-min : @screen-md; // // Large screen / wide desktop // @screen-lg : 1200px; // @screen-lg-min : @screen-lg; // // Extra Large screen / full hd // @screen-xl : 1600px; // @screen-xl-min : @screen-xl; // // provide a maximum // @screen-xs-max : (@screen-sm-min - 1px); // @screen-sm-max : (@screen-md-min - 1px); // @screen-md-max : (@screen-lg-min - 1px); // @screen-lg-max : (@screen-xl-min - 1px); // // Grid system // @grid-columns : 24; // @grid-gutter-width : 0; // // Layout // @layout-body-background : #ececec; @layout-header-bg : #03599a; @layout-header-hover-bg : #0568b0; @layout-header-height : 40px; @layout-header-padding : 0 10px; // @layout-footer-padding : 24px 50px; // @layout-sider-background : @layout-header-background; // @layout-trigger-height : 48px; // @layout-trigger-background : tint(@heading-color, 20%); // @layout-trigger-color : #fff; // @layout-zero-trigger-width : 36px; // @layout-zero-trigger-height : 42px; // // z-index list // @zindex-affix : 10; // @zindex-back-top : 10; // @zindex-modal-mask : 1000; // @zindex-modal : 1000; // @zindex-notification : 1010; // @zindex-message : 1010; // @zindex-popover : 1030; // @zindex-picker : 1050; // @zindex-dropdown : 1050; // @zindex-tooltip : 1060; // // Animation // @animation-duration-slow: .3s; // Modal // @animation-duration-base: .2s; // @animation-duration-fast: .1s; // Tooltip // // Form // // --- // @label-required-color : @highlight-color; // @label-color : @heading-color; // @form-item-margin-bottom : 24px; // @form-item-trailing-colon : true; // // Input // // --- @input-height-base : @height-base; @input-padding : 4px 10px; // @input-height-lg : 32px; // @input-height-sm : 22px; // @input-padding-horizontal : 7px; // @input-padding-vertical-base : 4px; // @input-padding-vertical-sm : 1px; // @input-padding-vertical-lg : 6px; // @input-placeholder-color : @disabled-color; // @input-color : @text-color; @input-border-color : @border-color-base; // @input-bg : #fff; // @input-addon-bg : #eee; @input-hover-border-color : @primary-color; @input-disabled-bg : @disabled-bg; // // Tooltip // // --- // //* Tooltip max width // @tooltip-max-width: 250px; // //** Tooltip text color // @tooltip-color: #fff; // //** Tooltip background color // @tooltip-bg: rgba(64, 64, 64, .85); // //** Tooltip arrow width // @tooltip-arrow-width: 5px; // //** Tooltip distance with trigger // @tooltip-distance: @tooltip-arrow-width - 1px + 4px; // //** Tooltip arrow color // @tooltip-arrow-color: @tooltip-bg; // // Popover // // --- // //** Popover body background color // @popover-bg: #fff; // //** Popover text color // @popover-color: @text-color; // //** Popover maximum width // @popover-min-width: 177px; // //** Popover arrow width // @popover-arrow-width: 4px; // //** Popover arrow color // @popover-arrow-color: @popover-bg; // //** Popover outer arrow width // @popover-arrow-outer-width: (@popover-arrow-width + 1px); // //** Popover outer arrow color // @popover-arrow-outer-color: fadeout(@border-color-base, 30%); // //** Popover distance with trigger // @popover-distance: @popover-arrow-width + 4px; // Modal // // -- // @modal-mask-bg: rgba(55, 55, 55, 0.6); @modal-header-padding: 7px 15px; @modal-header-height : 35px; // // Progress // // -- // @process-default-color: @primary-color; // @progress-remaining-color: @background-color-base; // // Menu // // --- // @menu-dark-bg: @layout-header-background; // @menu-dark-submenu-bg: #333; // // Spin // // --- // @spin-dot-size-sm: 14px; // @spin-dot-size: 20px; // @spin-dot-size-lg: 32px; // // Table // // -- // @table-header-bg: #fff; @table-header-color : #98a2ad; @table-border-color : @border-color-dark; @table-th-border-color : #a4a4a4; // @table-header-sort-bg: @background-color-active; // @table-row-hover-bg: @primary-1; // @table-selected-row-bg: #fafafa; @table-space-row-bg: #f5f5f5; @table-td-padding : 6px 14px; @table-td-height: 30px; // Pagination @pg-border-color: @border-color-dark ; @pg-color: #30B4FE; @pg-item-height: @height-base; // Panel @panel-header-bg: #f4f4f4; @panel-header-hover-bg: #ebebeb; @panel-header-border-left-color: #28a2ff; @panel-header-height: 35px; // // Tag // // -- // @tag-default-bg: #f3f3f3; // @tag-default-color: @text-color; // @tag-font-size: @font-size-base; // // TimePicker // // --- // @time-picker-panel-column-width: 56px; // @time-picker-panel-width: @time-picker-panel-column-width * 3; // @time-picker-selected-bg: @background-color-base; // // Carousel // // --- // @carousel-dot-width: 16px; // @carousel-dot-height: 3px; // @carousel-dot-active-width: 24px; // // Badge // // --- // @badge-height: 20px; // @badge-dot-size: 8px; // @badge-font-size: @font-size-base; // // Rate // // --- // @rate-star-color: #f5a623; // @rate-star-bg: #e9e9e9; // // Card // // --- // @card-head-height: 48px; // @card-head-color: @heading-color; // @card-head-background: @component-background; // // Tabs // // --- @tabs-height: 40px; @tabs-bg: #f5f5f5; @tabs-item-bg: #f9f9f9; @tabs-color: @text-color-assit; @tabs-border-color: #dcdcdc; // @tabs-title-font-size: @font-size-lg; // // BackTop // @back-top-color: #fff; // @back-top-bg: rgba(64, 64, 64, 0.4); // @back-top-hover-bg: rgba(64, 64, 64, 0.6); // // Avatar // @avatar-size-base: 32px; // @avatar-size-lg: 40px; // @avatar-size-sm: 24px; // @avatar-font-size-base: 18px; // @avatar-font-size-lg: 24px; // @avatar-font-size-sm: 14px; // @avatar-bg: #ccc; // @avatar-color: #fff; // @avatar-border-radius: @border-radius-base; // @table-row-bg: #f5f5f5; // @border-color-table: #d8d8d8; /** * Modules **/ // platform @platform-header-bg: #ebebeb; @platform-menu-width: 220px; // login @login-header-height: 90px; @login-content-padding: 60px 90px; // transfer @control-padding-horizontal: 10px;