amis/scss/themes/cxd.scss

@import "../functions";
$remFactor: 16px;

$ns: 'cxd-';

$info: #108cee;
$primary: #108cee;
$success: #5fb333;
$warning: #f39000;
$danger: #ea2e2e;
$light: #eaf6fe;
$white: #fff;

$info-bg: #eaf6fe;
$success-bg: #F1FDEB;
$warning-bg: #FCF7F1;
$danger-bg: #FFF5F5;

$body-bg: #E8ECF0;
$text-color: #666;
$text--muted-color: #999;
$text--loud-color: #333;
$borderColor: #E8EBEE;

$link-onHover-decoration: none;

$Layout-header-boxShadow: none;
$Layout-aside-width: px2rem(180px);
$Layout-aside-bg: #19233c;
$Layout-brand-bg: #121A2C;
$Layout-brand-color: #fff;
$Layout-asideLink-color: #fff;
$Layout-asideLink-onHover-iconSize: px2rem(16px);
$Layout-asideLink-onHover-iconColor: #42AAFA;
$Layout-asideLink-fontSize: px2rem(12px);
$Layout-asideLink-arrowFontSize: px2rem(12px);
$Layout-asideLink-arrowVendor: "iconfont";
$Layout-asideLink-arrowIcon: "\e63b";
$Layout-asideLink-arrowColor: #8D99b0;
$Layout-asideLink-onHover-arrowColor: #FFF;
$Layout-headerBar-borderBottom: px2rem(1px) solid $body-bg;
$Layout-asideDivider-margin: 0 px2rem(10px);

$Page-aside-bg: #ffffff;
$Page-aside-width: px2rem(160px);
$Page-content-paddingY: px2rem(20px);
$Page-content-paddingX: px2rem(20px);
$Page-main-bg: #fff;
$Page-header-paddingY: px2rem(18px);


$Form-item-gap: px2rem(20px);
$Form-input-height: px2rem(30px);
$Form-input-onFocused-bg: #f8fbfe;
$Form-input-borderRadius: 0;
$Form-input-borderColor: #ccc;
$Form-input-onFocused-borderColor: #108cee;
$Form-input-paddingX: px2rem(10px);
$Form-fontSize: px2rem(12px);
$Form-description-color: #999;
$Form-input-onError-bg: #fffbfb;
$Form-input-onDisabled-bg: #f7f7f7;
$Form--horizontal-label-widthBase: px2rem(90px);
$Form--horizontal-label-align: left;
$Form--horizontal-label-widthXs: px2rem(50px);
$Form--horizontal-label-widthSm: px2rem(70px);
$Form--horizontal-label-widthMd: px2rem(140px);
$Form--horizontal-label-widthLg: px2rem(190px);
$Form-input-addOnBg: #eaf6fe;
$Form-input-addOnColor: #108cee;
$Form-input-addOnDividerBorderWidth: 0;

$Form-select-borderWidth: 0;
$Form-select-borderRadius: 0;
$Form-select-bg: #eaf6fe;
$Form-select-onHover-bg: #d2ecfd;
$Form-select-placeholderColor: #108cee;
$Form-select-color: #108cee;
$Form-select-caret-vender: "iconfont";
$Form-select-caret-icon: "\e605";
$Form-select-caret-iconColor: inherit;
$Form-select-caret-fontSize: px2rem(12px);
$Form-select-outer-borderWidth: 0;
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
$Form-select-menu-color: #333;

$InputGroup-select-borderWidth: px2rem(1px);
$InputGroup-select-bg: #f6f7fb;
$InputGroup-select-onFocused-bg: #eaf6fe;
$InputGroup-select-color: #333;
$InputGroup-select-onFocused-color: #108cee;
$InputGroup-select-arrowColor: #999;
$InputGroup-select-onFocused-arrowColor: #108cee;
$InputGroup-button-borderWidth: px2rem(1px);
$InputGroup-button-borderRadius: 0;

$Number-bg: #eaf6fe;
$Number-borderWidth: 0;
$Number-handler-mode: "horizontal";
$Number-handler-width: px2rem(30px);
$Number-handler-color: #fff;
$Number-handler-onDisabled-color: #999;
$Number-handler-bg: #108cee;
$Number-handler-onHover-bg: #209bfd;
$Number-handler-onHover-bg: #047bd8;
$Number-handler-onDisabled-bg: #eceff8;
$Number-handler-fontFamily: "iconfont";
$Number-handler-fontSize: px2rem(16px);
$Number-handler--up-content: "\e600";
$Number-handler--down-content: "\e602";

$Checkbox-size: px2rem(14px);
$Checkbox-inner-size: px2rem(8px);
$Checkbox--full-inner-size: px2rem(10px);
$Radio-size: px2rem(16px);
$Radio-inner-size: px2rem(10px);

$Switch-bgColor: $danger;
$Switch-borderColor: #f0f0f0;
$Switch-onActive-bgColor: $primary;
$Switch-onDisabled-bgColor: #ccc;

$ColorPicker-borderWidth: 0;
$ColorPicker-borderRadius: 0;
$ColorPicker-bg: #eaf6fe;
$ColorPicker-onHover-bg: #d2ecfd;
$ColorPicker-color: #108cee;
$ColorPicker-placeholderColor: #108cee;
$ColorPicker-onDisabled-bg: #f6f7fb;
$ColorPicker-onDisabled-color: #999;

$DatePicker-borderWidth: 0;
$DatePicker-borderRadius: 0;
$DatePicker-bg: #eaf6fe;
$DatePicker-onHover-bg: #d2ecfd;
$DatePicker-color: #108cee;
$DatePicker-placeholderColor: #108cee;
$DatePicker-onDisabled-bg: #f6f7fb;
$DatePicker-onDisabled-color: #999;
$DatePicker-iconColor: #108cee;
$DatePicker-onHover-iconColor: #108cee;
$DatePicker-toggler-vendor: "iconfont";
$DatePicker-toggler-fontSize: px2rem(12px);
$DatePicker-toggler-icon: "\e7b1";
$DatePicker-prevBtn-vendor: "iconfont";
$DatePicker-prevBtn-fontSize: px2rem(14px);
$DatePicker-prevBtn-icon: "\e854" ;
$DatePicker-nextBtn-vendor: "iconfont";
$DatePicker-nextBtn-fontSize: px2rem(14px);
$DatePicker-nextBtn-icon: "\e63b";

$Calendar-input-borderRadius: 0;

// button
$Button-mimWidth: px2rem(68px);
$Button-borderWidth: 0;
$Button-boxShadow: none;
$Button-onActive-boxShadow: none;
$Button-borderRadius: 0;
$Button--lg-borderRadius: 0;
$Button--sm-borderRadius: 0;
$Button-onDisabled-opacity: 1;
$Button-onDisabled-bg: #f6f7fb;
$Button-onDisabledActive-bg: #e2e5ec;
$Button-onDisabled-color: #999;
$Button-paddingX: px2rem(10px);

$Button--lg-height: px2rem(40px);
$Button--lg-fontSize: px2rem(14px);

$Button--default-bg: #eaf6fe;
$Button--default-onHover-bg: #d2ecfd;
$Button--default-onActive-bg: #eaf6fe;
$Button--default-color: #108cee;

$Button--primary-bg: #108cee;
$Button--primary-onHover-bg: #209bfd;
$Button--primary-onActive-bg: #047bd8;

$Button--danger-bg: #ea2e2e;
$Button--danger-onHover-bg: #f64545;
$Button--danger-onActive-bg: #d72b2b;

$ButtonGroup-divider-width: px2rem(1px);
$ButtonGroup-divider-color: #fff;

$Button--link-color: $Button--default-color;
$Button--link-onHover-color: $Button--default-color;

$Spinner-bg: url('./spinner-cxd.svg');

$Crud-toolbar-gap: px2rem(10px);

// Table
$Table-bg: #fff;
$Table-fontSize: px2rem(12px);
$Table-color: #333;
$Table-thead-color: #333;
$Table-lineHeight: 20 / 12;
$Table-borderColor: #eceff8;
$Table-thead-bg: #f6f7fb;
$Table-thead-borderColor: #fff;
$Table-thead-iconColor: #999;
$Table-strip-bg: transparent;
$Table-onHover-bg: #f5fbff;
$Table-onHover-borderColor: #eceff8;
$Table-onChecked-bg: transparent;
$Table-onChecked-borderColor: #eceff8;
$Table-onChecked-color: #333;
$Table-onChecked-onHover-bg: #f5fbff;
$Table-onChecked-onHover-borderColor: #eceff8;
$Table-onChecked-onHover-color: #666;
$TableCell-paddingX: px2rem(10px);

$TableCell-sortBtn-width: px2rem(14px);
$TableCell-sortBtn--down-iconVendor: "iconfont";
$TableCell-sortBtn--down-icon: "\e712";
$TableCell-sortBtn--up-iconVendor: "iconfont";
$TableCell-sortBtn--up-icon: "\e713";
$TableCell-sortBtn--default-iconVendor: "iconfont";
$TableCell-sortBtn--default-icon: "\e711";
$TableCell-sortBtn--default-opacity: 0;
$TableCell-sortBtn--default-onActive-opacity: 1;

$TableCell-filterPopOver-dropDownItem-height: px2rem(30px);
$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px);

// listControl
$ListControl-item-borderWidth: 0;
$ListControl-item-paddingX: px2rem(10px);
$ListControl-item-bg: $Button--default-bg;
$ListControl-item-color: $Button--default-color;
$ListControl-item-onHover-color: $ListControl-item-color;
$ListControl-item-onHover-bg: $Button--default-onHover-bg;
$ListControl-item-onHover-borderColor: $ListControl-item-onHover-color;
$ListControl-item-onActive-bg: #108cee;
$ListControl-item-onActive-onHover-bg: #209bfd;
$ListControl-item-onActive-color: #fff;
$ListControl-item-onDisabled-opacity: 1;
$ListControl-item-onDisabled-bg: #eceff8;
$ListControl-item-onDisabled-color: #999;
$ListControl-item-onDisabled-borderColor: #ccc;

// Modal
$Modal-overlay-bg: rgba(0, 0, 0, 0.7);
$Modal-content-borderWidth: 0;
$Modal-content-borderRadius: 0;
$Modal-content-minHeight: px2rem(193px);
$Modal-header-bg: #f6f7fb;
$Modal-title-color: #333;
$Modal-body-paddingY: px2rem(30px);
$Modal-body-paddingX: px2rem(30px);
$Modal-body-borderTop: none;
$Modal-body-borderBottom: px2rem(1px) solid #ECEFF8;
$Modal-footer-marginX: px2rem(30px);
$Modal-footer-padding: px2rem(15px) 0;

// Remark
$Remark-icon-fontSize: px2rem(12px);
$Remark-iconColor: #999;
$Remark-onHover-iconColor: #fff;
$Remark-bg: #fff;
$Remark-onHover-bg: #f38900;
$Remark-borderWidth: px2rem(1px);
$Remark-borderColor: #999;
$Remark-onHover-borderColor: #f38900;

// Wizard
$Wizard-steps-bg: #fff;
$Wizard-steps-borderWidth: 0;
$Wizard-steps-textAlign: center;
$Wizard-steps-ulDisplay: inline-block;
$Wizard-steps-height: px2rem(60px);
$Wizard-steps-padding: px2rem(10) 0;
$Wizard-steps-liVender: "iconfont";
$Wizard-steps-liAfterContent: "\e6ee";
$Wizard-steps-liAfterBorder: 0 !important;
$Wizard-steps-bg--isComplete: #fff;
$Wizard-badge-size: px2rem(26px);
$Wizard-badge-fontSize: px2rem(16px);
$Wizard-badge-borderRadius: 50%;
$Wizard-badge-bg: $text--muted-color;
$Wizard-badge-marginRight: px2rem(6px);

// Tabs
$Tabs-linkFontSize: px2rem(16px);
$Tabs-color: $text-color;
$Tabs-onActive-color: $info;
$Tabs-onActive-borderColor: transparent;
$Tabs-onHover-borderColor: transparent;
$Tabs-onActive-borderBottomColor: $info;
$Tabs-onActive-borderBottomWidth: px2rem(2px);


// Pagination
$Pagination-arrowVendor: "iconfont";
$Pagination-prevArrowContent: "\e759";
$Pagination-nextArrowContent: "\e757";
$Pagination-fontSize: px2rem(12px);

// Panel
$Panel-borderRadius: 0;

// Nav
$Nav-item-fontSize: px2rem(16px);
$Nav-item-borderRadius: 0;
$Nav-item-onActive-bg: #f6f7fb;
$Nav-item-onActive-color: $primary;
$Nav-item-onActive-borderLeft: px2rem(4px) solid $primary;
$Nav-subItem-fontSize: px2rem(12px);
$Nav-subItem-onActiveBeforeBg: $primary;

// Range
$InputRange-label--value-display: none;

// TransferSelect
$TransferSelect--table-heading-bg: $white;
$TransferSelect--normal-heading-bg: #f6f7fb;
$TransferSelect-heading-borderBottom: 0;

// Alert
$Alert-xs: px2rem(5px);
$Alert-md: px2rem(20px);

$Alert-height: px2rem(30px);
$Alert-fontSize: px2rem(12px) ;
$Alert-paddingX: $Alert-md;
$Alert-paddingY: $Alert-xs;
$Alert-borderRadius: 0;
$Alert-marginBottom: $Alert-md;

$Alert--danger-color: $danger;
$Alert--danger-borderColor: $danger-bg;

$Alert--info-color: $info;
$Alert--info-borderColor: $info-bg;

$Alert--success-color: $success;
$Alert--success-borderColor: $success-bg;

$Alert--warning-color: $warning;
$Alert--warning-borderColor: $warning-bg;


// Toast

$Toast-xs: px2rem(5px);
$Toast-sm: px2rem(10px);
$Toast-base: px2rem(15px);
$Toast-md: px2rem(20px);
$Toast-lg: px2rem(30px);

// Toast size
$Toast-width: px2rem(300px);
$Toast-borderRadius: 0;
$Toast-paddingY: $Toast-xs;
$Toast-paddingX: $Toast-md;
$Toast-paddingL: px2rem(26px);
$Toast--info-paddingL: 0;
$Toast-border-width: px2rem(1px);
$Toast-icon-fontSize: px2rem(16px);
$Toast-opacity: 1;
$Toast-display: inline-block;

// Toast color
$Toast-color: $white;

$Toast--danger-color: $danger;
$Toast--danger-bgColor: $danger-bg;
$Toast--danger-borderColor: $danger;

$Toast--info-color: $info;
$Toast--info-bgColor: $info-bg;
$Toast--info-borderColor: $info;

$Toast--success-color: $success;
$Toast--success-bgColor: $success-bg;
$Toast--success-borderColor: $success;

$Toast--warning-color: $warning;
$Toast--warning-bgColor: $warning-bg;
$Toast--warning-borderColor: $warning;

$Toast-iconVendor: "iconfont";

$Toast--error-icon: "\e6d2";
$Toast--warning-icon: "\e6e5";
$Toast--info-icon: "";
$Toast--success-icon: "\e6e8";

$TagControl-sugTip-color: $primary;

@import "../variables";
@import "../mixins";
@import "../base/reset";
@import "../base/normalize";
@import "../base/typography";

@import "../layout/layout";
@import "../layout/grid";
@import "../layout/aside";
@import "../layout/hbox";
@import "../layout/vbox";
@import"../components/modal";
@import"../components/drawer";
@import "../components/tooltip";
@import "../components/popover";
@import"../components/toast";
@import"../components/alert";
@import "../components/tabs";
@import "../components/nav";
@import "../components/page";
@import "../components/remark";
@import "../components/chart";
@import "../components/video";
@import "../components/panel";
@import "../components/service";
@import "../components/spinner";
@import "../components/button";
@import "../components/button-group";
@import "../components/dropdown";
@import"../components/collapse";
@import"../components/wizard";
@import"../components/crud";
@import"../components/table";
@import"../components/list";
@import"../components/cards";
@import"../components/card";
@import"../components/quick-edit";
@import"../components/popoverable";
@import"../components/copyable";
@import"../components/divider";
@import"../components/pagination";
@import"../components/wrapper";
@import"../components/status";

@import "../components/form/fieldset";
@import "../components/form/group";
@import "../components/form/input-group";
@import "../components/form/text";
@import "../components/form/textarea";
@import "../components/form/checks";
@import "../components/form/switch";
@import "../components/form/number";
@import "../components/form/select";
@import "../components/form/list";
@import "../components/form/matrix";
@import "../components/form/color";
@import "../components/form/date";
@import "../components/form/date-range";
@import "../components/form/image";
@import "../components/form/editor";
@import "../components/form/rich-text";
@import "../components/form/range";
@import "../components/form/repeat";
@import "../components/form/tree";
@import "../components/form/tree-select";
@import "../components/form/combo";
@import "../components/form/sub-form";
@import "../components/form/chained-select";
@import "../components/form/picker";
@import "../components/form/qr-code";
@import "../components/form/tag";
@import "../components/form/rating";
@import "../components/form/form";
@import "../components/form/transfer-select";
@import "../components/form/nested-select";
@import "../components/form/icon-picker";


@import "../utilities";