// ---- color ---- 这是之前在用的颜色,后续开发中使用新的色值 $primary-color: #f0250f !default; $normal-color: #848484 !default; $link-color: $primary-color !default; $link-hover-color: mix($link-color, #000, 80%) !default; $title-color: #2d2d2d !default; $text-color: #848484 !default; $light-color: #f6f6f6 !default; $dark-color: #dadada !default; // v3.0 主要色值 // ---- 主色调color ---- $primary-color-jd-red: #E1251B !default; // 京东红,主要用于对外C端产品。 $primary-color-jc-blue: #3C6EF0 !default; // 京牛蓝,主要用于对内B端产品。 // ---- 辅助color ---- $assist-color-green: #26A872 !default; // 常用于成功信息/成功icon,或者卡片标签 $assist-color-orange: #FF6E4C !default; // 常用于警告信息/警告icon,或者卡片标签 $assist-color-yellow: #FFBA12 !default; // 常用于提示信息/提示icon,或者卡片标签 $assist-color-blue: #2CA6E1 !default; // 冷链蓝,主要用于京东冷链相关产品,也可以用于卡片标签或页面其他元素 $assist-color-purple: #6236FF !default; $assist-color-gray: #7C7A8A !default; // 常用于卡片标签或页面其他元素 $assist-color-light-gray: #D9D9D9 !default; // 常用于弱标签背景色 // ---- 文本color ---- $text-black-1: #323232 !default; // 重要文字颜色,用于Narbar等大标题 $text-black-2: #646464 !default; // 普通文字颜色,用于段落、表单标题、列表内容等 $text-black-3: #969696 !default; // 辅助文字,用于次要信息 $text-black-4: #C8C8C8 !default; // 一般文字,用于提示性文字 $text-jd-red: #E1251B !default; // 用于报错文字颜色 // ---- 背景/分割线color ---- $body-background-color: #F7F7F7 !default; // 用于页面整体背景 $split-line-color: #E6E6E6 !default; // 用于分割线,按钮描边,1px $disabled-bg-color: #DCDCDC !default; // 用于按钮置灰 // ---- v3.0 常用字号 ---- $font-size-title-large: 20px; // 用于标题类文字 $font-size-title-normal: 18px; // 用于全局操作类文字 $font-size-body-large: 17px; // 常用字号,用于需要强调的文字信息 $font-size-body-normal: 16px; // 最常用的正文字号 $font-size-body-small: 14px; // 常用字号,用于较弱的文字信息 $font-size-display-large: 14px; // 常用于辅助说明文字 $font-size-display-normal: 13px; // 常用字号,用于解释信息 $font-size-display-small: 12px; // 常用于标签信息展示 // ---- base ---- $body-background: #f6f6f6 !default; $mask-bg: rgba(0, 0, 0, 0.5) !default; $font-family: PingHei, 'Lucida Grande', 'Lucida Sans Unicode', STHeiti, Helvetica, Arial, Verdana, 'sans-serif', 'PingHei-light', SimHei, 'Droid Sans' !default; $font-size-base: 14px !default; $font-size-small: 12px !default; $font-size-large: 16px !default; $line-height-base: 1.5 !default; $border-radius-base: 8px !default; $border-radius-small: 3px !default; $border-radius-large: 50px !default; // ---- Animation ---- $animation-duration: 0.25s !default; $transition-duration: 0.2s !default; $transition-duration-fast: 0.2s !default; $transition-duration-slow: 0.4s !default; $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default; $ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95); $ease-out: cubic-bezier(0.895, 0.03, 0.685, 0.22); // ---- Border color ---- $border-color-base: $dark-color !default; $border-color-dark: #ababab !default; $border-width-base: 1px !default; $border-style-base: solid !default; $border-color-active: $primary-color !default; // ---- Disabled ---- $disabled-color: #f6f6f6 !default; $disabled-bg: #dadada !default; $disabled-primary-bg: #eb8a7e !default; // ---- Shadow ---- $shadow-color: rgba(0, 0, 0, 0.15) !default; $shadow-up: 0 -2px 8px $shadow-color !default; $shadow-down: 0 2px 8px $shadow-color !default; $shadow-left: -2px 0 8px $shadow-color !default; $shadow-right: 2px 0 8px $shadow-color !default; $shadow-base: $shadow-down !default; // ---- Buttons ---- $btn-font-weight: normal !default; $btn-border-radius-base: 8px !default; $btn-border-radius-small: 3px !default; $btn-border-radius-large: 50px !default; $btn-height-small: 30px !default; $btn-height-big: 40px !default; $btn-icon-height-small: 12px !default; $btn-icon-height-big: 16px !default; $btn-menu-icon-height: 20px !default; $btn-menu-height: 50px !default; $btn-primary-color: #fff !default; $btn-primary-bg: $primary-color !default; $btn-gradient-color: #fff !default; $btn-gradient-start-color: #ff4f18; $btn-gradient-end-color: #f20000; $btn-gradient-bg: linear-gradient(315deg, $btn-gradient-start-color 0%, $btn-gradient-end-color 100%) !default; $btn-gradient-active-bg: linear-gradient(315deg, darken($btn-gradient-start-color, 10%) 0%, darken($btn-gradient-end-color, 10%) 100%) !default; $btn-default-color: $normal-color !default; $btn-default-bg: #fff !default; $btn-default-border: $border-color-dark !default; $btn-active-color: #fff !default; $btn-active-bg: $primary-color !default; $btn-active-border: 􏰅􏴦􏵘􏵑􏱱􏵘􏴦$primary-color !default; $btn-disable-color: $disabled-color !default; $btn-disable-bg: $disabled-bg !default; $btn-disable-border: $disabled-color !default; $btn-icon-margin: 5px; $btn-label-light-bg: rgba(240, 37, 15, 0.05); // ---- z-index ---- $zindex-mask: 9998 !default; $zindex-actionsheet: 10001 !default; $zindex-dialog: 10000 !default; $zindex-picker: 10050 !default; // ---- Assets path ---- $assetsPath: '../../assets' !default; // ---- Stepper ---- $stepper-color: #333 !default; $stepperbar-width: 11px !default; $stepperbar-color: #333 !default;