/*
* created by thomas at 2019/10/24.
*/

// 组件命名前缀
@sino-prefix: sn;

// 主题色
@theme-color: #262DD9;

// 通用颜色
@primary-color: @theme-color;
@success-color: #23cda7;
@info-color: #a4acb2;
@warning-color: #ffa501;
@warning-color-2: #F49939;
@danger-color: #FF4E3A;
@danger-color-2: #E32D2D;

@body-color: #F6F9FD;
@text-color: #222;
@text-color-2: #666;
@text-color-3: #999;
@text-color-4: #A4ACB2;
@text-color-5: #C2C2C2;
@text-color-6: #575757;
@text-color-7: #CB8D0C;
@placeholder-color: #c2c2c2;
@link-color: @theme-color;

// 通用字体大小
@font-size-base: .32rem;
@font-size-lg: @font-size-base + .02rem;
@font-size-sm: @font-size-base - .02rem;

// 通用行高
@line-height: 1.4;

// 通用边框颜色
@border-color: #E8E8E8;
@border-color-2: #D3D3D3;
@border-color-3: #E8E8E8;

// 通用圆角大小
@border-radius-base: .2rem;
@border-radius-lg: .26rem;
@border-radius-sm: .14rem;

// 通用内边距
@padding-base: .16rem;
@padding-lg: .24rem;
@padding-sm: .12rem;
@padding-xs: .1rem;

// 水平间距
@horizontal-spacing-base: .3rem;
@horizontal-spacing-lg: .5rem;
@horizontal-spacing-sm: .1rem;

// 垂直间距
@vertical-spacing-base: .2rem;
@vertical-spacing-lg: .3rem;
@vertical-spacing-sm: .1rem;

// 通用禁用透明度
@disabled-opacity: .4;

// 通用阴影
@shadow-color: rgba(3, 2, 2, 0.1);

// 动画
@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);
@animation-duration-base: 300ms;

// 按钮
@btn-default-color: @text-color;
@btn-default-border-color: @text-color-3;
@btn-default-hover-color: #adadad;
@btn-default-active-color: #8a8a8a;
@btn-primary-bg-color: @primary-color;
@btn-primary-hover-color: #5157e1;
@btn-primary-active-color: #2229c3;
@btn-success-bg-color: @success-color;
@btn-success-hover-color: #4fd7b9;
@btn-success-active-color: #20b996;
@btn-info-bg-color: @info-color;
@btn-info-hover-color: #b6bdc1;
@btn-info-active-color: #949ba0;
@btn-warning-bg-color: @warning-color;
@btn-warning-hover-color: #ffb734;
@btn-warning-active-color: #e69501;
@btn-danger-bg-color: @danger-color;
@btn-danger-hover-color: #ff7161;
@btn-danger-active-color: #e64634;
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-disabled-opacity: @disabled-opacity;

@btn-max-width: 400px;
@btn-height-base: .88rem;
@btn-height-md: .64rem;
@btn-height-sm: .48rem;

@btn-font-size-base: @font-size-base;
@btn-font-size-md: @font-size-base;
@btn-font-size-sm: .28rem;

@btn-padding-base: 0 .4rem;

@btn-hover-mixin-percent: 20%;
@btn-hover-mixin-color: #ffffff;
@btn-active-mixin-percent: 10%;
@btn-active-mixin-color: #000000;

@btn-icon-spacing: .06rem;
@btn-icon-size: .32rem;
@btn-icon-color: #ffffff;

// 标签页
@tabs-line-height: .88rem;
@tabs-nav-background-color: #fff;
@tabs-card-height: .88rem;
@tabs-bottom-bar-height: .04rem;
@tabs-bottom-bar-border-radius: 0;
@tabs-bottom-bar-color: @primary-color;
@tabs-default-color: @text-color;
@tab-text-color: @text-color-2;
@tab-active-text-color: @text-color;
@tab-font-size: .3rem;
@tab-font-weight-bold: bold;
@tab-disabled-text-color: @text-color-3;

// 日历
@calendar-padding: .15rem;
@calendar-weekday-height: .74rem;
@calendar-weekday-height: .74rem;
@calendar-weekday-font-size: .26rem;
@calendar-weekday-font-weight: 500;
@calendar-date-height: .56rem;
@calendar-date-margin-bottom: .15rem;
@calendar-date-color: #666;
@calendar-date-font-size: .26rem;
@calendar-date-background-color: #F6F9FD;
@calendar-day-size: calc(~'(100vw - 2 * @{calendar-padding}) / 7');
@calendar-day-max-size: 45px;
@calendar-day-color: #333;
@calendar-day-disabled-color: #999;
@calendar-day-active-border-radius: .12rem;
@calendar-out-month-day-color: #999;

// 日期选择器视图
@datetime-picker-view-header-height: .9rem;
@datetime-picker-view-header-font-size: .3rem;
@datetime-picker-view-header-font-weight: 500;
@datetime-picker-view-header-color: #333;

// 日期选择器
@datetime-picker-border-radius: @border-radius-base;

// 时间段选择器
@range-picker-border-radius: @border-radius-base;

// 单选按钮
@radio-size: @font-size-base;
@radio-icon-color: @text-color-3;
@radio-icon-size: .4rem;
@radio-transition-duration: @animation-duration-base;
@radio-checked-icon-color: @theme-color;
@radio-disabled-icon-background-color: rgba(211, 211, 211, 0.4);
@radio-label-margin: .1rem;
@radio-label-color: @text-color;

// 复选框
@checkbox-size: @font-size-base;
@checkbox-icon-color: @text-color-3;
@checkbox-icon-size: .4rem;
@checkbox-transition-duration: @animation-duration-base;
@checkbox-checked-icon-color: @theme-color;
@checkbox-disabled-icon-background-color: rgba(211, 211, 211, 0.4);
@checkbox-label-margin: .1rem;
@checkbox-label-color: @text-color;

// 搜索
@search-height: .88rem;
@search-bg-color: #F6F9FD;
@search-horizontal-padding: @horizontal-spacing-base;
@search-border-radius: @border-radius-base;
@search-icon-font-size: .28rem;
@search-icon-color: #C2C2C2;
@search-icon-margin-right: .12rem;
@search-input-height: .68rem;
@search-input-color: #333;
@search-input-padding: .2rem;
@search-input-font-size: .28rem;
@search-input-placeholder-color: #C2C2C2;
@search-clear-font-size: .28rem;
@search-clear-color: #E8E8E8;
@search-cancel-font-size: .3rem;
@search-cancel-color: #999;


// 选择器视图
@picker-view-toolbar-height: @btn-height-base;
@picker-view-title-font-size: @font-size-base;
@picker-view-cancel-text-color: #999;
@picker-view-action-padding: 0 .3rem;
@picker-view-action-font-size: .3rem;
@picker-view-action-text-color: @link-color;
@picker-view-option-font-size: @font-size-base;
@picker-view-option-text-color: #000;
@picker-view-option-disabled-opacity: .3;

// 滑动开关
@switch-width: .86rem;
@switch-height: .44rem;
@switch-size: .3rem;
@switch-font-color: #999999;
@switch-background-color: #EBF0F7;
@switch-border: none;
@switch-transition-duration: @animation-duration-base;
@switch-node-size: .36rem;
@switch-node-z-index: 100;
@switch-on-background-color: @theme-color;
@switch-node-background-color: #fff;
@switch-node-on-box-shadow: 0 .02rem .04rem 0 #1E24B6;
@switch-node-off-box-shadow: 0 .02rem .04rem 0 #D5DCE6;
@switch-disabled-opacity: .5;

// 文本输入
@input-item-title-color: @text-color-2;

// 多行输入
@textarea-item-title-color: @text-color-2;

// 数字输入框
@input-number-item-title-color: @text-color-2;

// 数字键盘
@number-keyboard-background-color: #fff;
@number-keyboard-key-height: 54px;
@number-keyboard-key-background: #ebedf0;
@number-keyboard-key-font-size: 24px;
@number-keyboard-key-active-color: #f2f3f5;
@number-keyboard-delete-font-size: .28rem;
@number-keyboard-title-color: @text-color-3;
@number-keyboard-title-height: 30px;
@number-keyboard-title-font-size: .28rem;
@number-keyboard-close-padding: 0 .1rem;
@number-keyboard-close-color: @primary-color;
@number-keyboard-close-font-size: .28rem;
@number-keyboard-button-text-color: #fff;
@number-keyboard-button-background-color: @primary-color;
@number-keyboard-cursor-color: @text-color;
@number-keyboard-cursor-width: 1px;
@number-keyboard-cursor-height: 40%;
@number-keyboard-cursor-animation-duration: 1s;

// 上传
@upload-list-padding: @list-item-horizontal-padding @list-item-vertical-padding;
@upload-list-item-width: .6rem;
@upload-list-item-height: .6rem;

// 列表
@list-icon-margin-right: .1rem;
@list-text-color: @text-color-3;
@list-text-font-size: @btn-font-size-sm;
@list-text-line-height: .8rem;

// 列表项
@list-item-vertical-padding: .3rem;
@list-item-horizontal-padding: .33rem;
@list-item-active-color: #e5e5e5;
@list-item-text-color: @text-color;
@list-item-font-size: @font-size-base;
@list-item-line-height: @line-height;
@list-item-border-color: @border-color;
@list-item-border-bottom-left: @list-item-vertical-padding;
@list-item-border-bottom-right: 0;

@list-item-label-margin-top: .1rem;
@list-item-label-color: @text-color-3;
@list-item-label-font-size: .24rem;
@list-item-label-line-height: .34rem;

@list-item-value-color: @text-color;

@list-item-icon-size: .44rem;
@list-item-right-icon-color: @text-color-6;
@list-item-right-icon-arrow-color: @text-color-5;

@list-item-required-color: @danger-color;

// 空状态
@empty-padding-base: @padding-base;

// 下拉菜单
@dropdown-menu-height: @btn-height-base;
@dropdown-menu-background-color: #ffffff;
@dropdown-menu-title-disabled-text-color: @text-color-3;
@dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-font-size: .28rem;
@dropdown-menu-title-line-height: @line-height;
@dropdown-menu-title-active-text-color: @theme-color;
@dropdown-menu-item-active-opacity: 1;
@dropdown-menu-option-active-color: @theme-color;
@dropdown-menu-content-max-height: 80vh;

// 对话框
@modal-width: 294px;
@modal-padding: .6rem .3rem;
@modal-background-color: #ffffff;
@modal-border-radius: @border-radius-base;
@modal-transition: @animation-duration-base;
@modal-header-padding: @modal-padding;
@modal-header-font-size: @font-size-base;
@modal-header-font-weight: bold;
@modal-header-line-height: .44rem;
@modal-header-isolated-padding: .4rem .3rem .3rem;
@modal-content-padding: @modal-padding;
@modal-message-max-height: 5rem;
@modal-message-font-size: .3rem;
@modal-message-line-height: .42rem;
@modal-cancel-button-text-color: #7F7F7F;
@modal-confirm-button-text-color: @theme-color;

// 折叠面板
@collapse-right-arrow-color: #1f1414;
@collapse-right-arrow-active-color: #c2c2c2;

// 气泡弹出
@popover-padding: .18rem .24rem;
@popover-line-height: .36rem;
@popover-font-size: .26rem;
@popover-border-radius: .12rem;
@popover-background-color: #404040;
@popover-box-shadow: 0 .04rem .08rem 0 rgba(114, 103, 103, 0.1);

@popover-close-font-size: .28rem;

@popover-arrow-width: .2rem;
@popover-arrow-height: .24rem;
@popover-arrow-color: @popover-background-color;

// 走马灯
@carousel-indicator-size: .15rem;
@carousel-indicator-margin: .2rem;
@carousel-indicator-bg: #fff;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-opacity: .5;
@carousel-indicator-active-opacity: 1;

// 徽标
@badge-size: .28rem;
@badge-color: #fff;
@badge-padding: 0 .06rem;
@badge-font-size: .2rem;
@badge-font-weight: normal;
@badge-border-width: 0;
@badge-background-color: @danger-color;
@badge-dot-color: @danger-color;
@badge-dot-size: .16rem;

// 加载中
@loading-icon-font-size: .4rem;
@loading-icon-color: @text-color-3;
@loading-text-margin: .08rem;
@loading-text-font-size: .3rem;
@loading-text-color: @text-color-3;

// 轻提示
@toast-min-width: 2.24rem;
@toast-max-width: 5.7rem;
@toast-padding: .3rem .4rem;
@toast-text-color: #fff;
@toast-font-size: .28rem;
@toast-line-height: .4rem;
@toast-background-color: rgba(0, 0, 0, @toast-opacity);
@toast-border-radius: .2rem;
@toast-text-min-width: 1rem;
@toast-text-padding: 20px 20px;
@toast-position-top-distance: 20vh;
@toast-position-bottom-distance: 20vh;
@toast-icon-size: 1rem;
@toast-loading-icon-color: #fff;
@toast-opacity: .88;

// 动作面板
@action-sheet-border-radius: @border-radius-base;
@action-sheet-message-line-height: .4rem;
@action-sheet-message-font-size: .28rem;
@action-sheet-message-color: #999;
@action-sheet-item-line-height: @line-height;
@action-sheet-item-font-size: @font-size-base;
@action-sheet-item-color: @theme-color;

// 屏幕尺寸
@screen-sm: 480px;
@screen-md: 700px;
@screen-lg: 1100px;

// PC通用字体大小
@pc-font-size-base: 14px;

// PC通用内边距
@pc-padding-base: 30px;
@pc-padding-lg: 50px;
@pc-padding-sm: 15px;
