forgetest1
/
tinper-bee-core
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Button增加secondary定义

This commit is contained in:
yangchch6 2019-01-16 14:59:26 +08:00
parent 6521d0a421
commit ad95793764
6 changed files with 214 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/minxin-mixins.scss
View File

@ -318,8 +318,9 @@
@mixin border-button-styles-variant($text-color,$bg-color,$bg-hover-color,$bg-active-color) {
color: $text-color;
border:1px $bg-color solid;
background-color: #fff;
border:1px $bg-color solid;
&.focus, &:focus, &:hover {
background-color: $bg-hover-color;
border-color: $bg-hover-color;

48
scss/minxin-themeColors-hxlh.scss Normal file
View File

@ -0,0 +1,48 @@
@import "minxin-colors";
// 默认色
$default-color: $palette-grey-300;
$default-color-dark: $palette-grey-400;
$default-color-light: $palette-grey-200;
// 主题色
$color-primary: "7,72,166" !default;
$color-primary-dark: "3,61,143" !default;
$color-primary-light: "24,87,178" !default;
// 次按钮
$secondary-color: $palette-red-300 !default;
$secondary-color-dark: $palette-red-400 !default;
$secondary-color-light: $palette-red-200 !default;
// 字体
$font-family-primary: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif !default;
// 主字号
$font-size-base: 14px !default;
// 主文本色
$text-color-base: $color-dark-contrast !default;
// 边框色
$border-color: $palette-grey-400 !default;
// Button 细化样式变量:
// 1.次按钮背景色
$button-secondary-bg-color: $color-dark-contrast !default;
// 2.次按钮边框色
$button-secondary-border-color: $palette-u-gray-700 !default;
// 3.次按钮文本色
$button-secondary-text-color: $color-primary !default;
// 辅色
$color-accent: $palette-green-600 !default;
$color-accent-dark: $palette-green-800 !default;
$color-accent-light: $palette-green-400 !default;
// cyan主题
//$color-primary: $palette-cyan-500 !default;
//$color-primary-dark: $palette-cyan-700 !default;
//$color-accent: $palette-light-blue-500 !default;
// orange主题
//$color-primary: $palette-orange-500 !default;
//$color-primary-dark: $palette-orange-700 !default;
//$color-accent: $palette-deep-orange-500 !default;

50
scss/minxin-themeColors-ncc.scss Normal file
View File

@ -0,0 +1,50 @@
@import "minxin-colors";
// 默认色
$default-color: $palette-grey-300;
$default-color-dark: $palette-grey-400;
$default-color-light: $palette-grey-200;
// 主题色
$color-primary: "231,0,18" !default;
$color-primary-dark: "200,0,16" !default;
$color-primary-light: "233,71,84" !default;
// 次按钮
$secondary-color: "235,236,240" !default;
$secondary-color-dark: $palette-red-400 !default;
$secondary-color-light: $palette-red-200 !default;
// 字体
$font-family-primary: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif !default;
// 主字号
$font-size-base: 14px !default;
// 主文本色
$text-color-base: $color-dark-contrast !default;
// 边框色
$border-color: $palette-grey-400 !default;
// 辅色
$color-accent: $palette-green-600 !default;
$color-accent-dark: $palette-green-800 !default;
$color-accent-light: $palette-green-400 !default;
// Button 细化样式变量:
// 1.次按钮背景色
$button-secondary-bg-color: $color-dark-contrast !default;
// 2.次按钮边框色
$button-secondary-border-color: $palette-u-gray-700 !default;
// 3.次按钮文本色
$button-secondary-text-color: $color-primary !default;
// cyan主题
//$color-primary: $palette-cyan-500 !default;
//$color-primary-dark: $palette-cyan-700 !default;
//$color-accent: $palette-light-blue-500 !default;
// orange主题
//$color-primary: $palette-orange-500 !default;
//$color-primary-dark: $palette-orange-700 !default;
//$color-accent: $palette-deep-orange-500 !default;

50
scss/minxin-themeColors-yxy.scss Normal file
View File

@ -0,0 +1,50 @@
@import "minxin-colors";
// 默认色
$default-color: $palette-grey-300;
$default-color-dark: $palette-grey-400;
$default-color-light: $palette-grey-200;
// 主题色
$color-primary: "231,0,18" !default;
$color-primary-dark: "200,0,16" !default;
$color-primary-light: "233,71,84" !default;
// 次按钮
$secondary-color: "235,236,240" !default;
$secondary-color-dark: $palette-red-400 !default;
$secondary-color-light: $palette-red-200 !default;
// 字体
$font-family-primary: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif !default;
// 主字号
$font-size-base: 14px !default;
// 主文本色
$text-color-base: $color-dark-contrast !default;
// 边框色
$border-color: $palette-grey-400 !default;
// 辅色
$color-accent: $palette-green-600 !default;
$color-accent-dark: $palette-green-800 !default;
$color-accent-light: $palette-green-400 !default;
// Button 细化样式变量:
// 1.次按钮背景色
$button-secondary-bg-color: $color-dark-contrast !default;
// 2.次按钮边框色
$button-secondary-border-color: $palette-u-gray-700 !default;
// 3.次按钮文本色
$button-secondary-text-color: $color-primary !default;
// cyan主题
//$color-primary: $palette-cyan-500 !default;
//$color-primary-dark: $palette-cyan-700 !default;
//$color-accent: $palette-light-blue-500 !default;
// orange主题
//$color-primary: $palette-orange-500 !default;
//$color-primary-dark: $palette-orange-700 !default;
//$color-accent: $palette-deep-orange-500 !default;

26
scss/minxin-themeColors.scss
View File

@ -1,21 +1,28 @@
@import "minxin-colors";
// 主色
// 默认色
$default-color: $palette-grey-300;
$default-color-dark: $palette-grey-400;
$default-color-light: $palette-grey-200;
// 主题色
$color-primary: $palette-blue-600 !default;
$color-primary-dark: $palette-blue-800 !default;
$color-primary-light: $palette-blue-400 !default;
// 次按钮
$secondary-color: $palette-grey-300 !default;
$secondary-color-dark: $palette-red-400 !default;
$secondary-color-light: $palette-red-200 !default;
// 字体
$font-family-primary: "Open Sans", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif !default;
// 主字号
$font-size-base: 14px !default;
// 主文本色
$text-color-base: $color-dark-contrast !default;
// 辅色
$color-accent: $palette-green-600 !default;
$color-accent-dark: $palette-green-800 !default;
$color-accent-light: $palette-green-400 !default;
$text-color-base: $color-dark-contrast !default;
// 边框色
$border-color: $palette-grey-400 !default;
// Button 细化样式变量:
// 1.次按钮背景色
@ -25,6 +32,11 @@ $button-secondary-border-color: $palette-u-gray-700 !default;
// 3.次按钮文本色
$button-secondary-text-color: $color-primary !default;
// 辅色
$color-accent: $palette-green-600 !default;
$color-accent-dark: $palette-green-800 !default;
$color-accent-light: $palette-green-400 !default;
// cyan主题
//$color-primary: $palette-cyan-500 !default;

76
scss/minxin-variables.scss
View File

@ -61,7 +61,8 @@ $gray-light: unquote("rgb(#{$palette-grey-400})") !default;
$gray-lighter: unquote("rgb(#{$palette-grey-300})") !default;
$gray-lightest:unquote("rgb(#{$palette-grey-200})") !default;
$inverse: unquote("rgb(#{$color-white})") !default;
$border-color-base: $gray-lighter;
// $border-color-base: $gray-lighter;
$border-color-base: unquote("rgb(#{$border-color})") !default;
$line-height-base: 1.57142857;
@ -145,17 +146,21 @@ $link-hover-color: $hover-color-base;
$link-active-color: $active-color-base;
// 品牌色
// $brand-default: $gray-lighter;
// $brand-default-hover: $gray-lightest;
// $brand-default-active: $gray-light;
$brand-default: unquote("rgb(#{$color-primary})");
$brand-default-hover: unquote("rgb(#{$color-primary-light})");
$brand-default-active: unquote("rgb(#{$color-primary-dark})");
$brand-default: $gray-lighter;
$brand-default-hover: $gray-lightest;
$brand-default-active: $gray-light;
// $brand-default: unquote("rgb(#{$color-primary})");
// $brand-default-hover: unquote("rgb(#{$color-primary-light})");
// $brand-default-active: unquote("rgb(#{$color-primary-dark})");
$brand-primary : unquote("rgb(#{$color-primary})") !default;
$brand-primary-hover: unquote("rgb(#{$color-primary-light})") !default;
$brand-primary-active: unquote("rgb(#{$color-primary-dark})") !default;
$brand-secondary : unquote("rgb(#{$secondary-color})") !default;
$brand-secondary-hover: unquote("rgb(#{$secondary-color-light})") !default;
$brand-secondary-active: unquote("rgb(#{$secondary-color-dark})") !default;
$brand-success: unquote("rgb(#{$palette-green-500})") !default;
$brand-success-hover: unquote("rgb(#{$palette-green-300})") !default;
$brand-success-active: unquote("rgb(#{$palette-green-700})") !default;
@ -203,37 +208,25 @@ $default-border-radius: 4px;
// UButton
// Button 基础背景色.
// 主按钮
$button-default-color: $brand-default;
$button-default-color-IE8: $brand-default;
// 次按钮
$button-bg-color: unquote("rgb(#{$button-secondary-bg-color})");
// 默认按钮(<Button></Button>)
$button-default-color: unquote("rgb(#{$default-color})");
$button-default-color-IE8: unquote("rgb(#{$default-color})");
// 边框按钮(shape:'border')
$button-border-bg-color: unquote("rgb(#{$color-dark-contrast})");
// Button 不同状态下的背景色 ：hover、active、focus状态.
$button-hover-color: $brand-default-hover;
$button-active-color: $brand-default-active;
$button-focus-color: $brand-default-active;
// Button 文字颜色.
// 主按钮
$button-default-text-color: unquote("rgb(#{$text-color-base})") !default;
// 次按钮
$button-text-color: unquote("rgb(#{$button-secondary-text-color})") !default;
// Button 边框样式及颜色.
$button-border-style:unquote("solid") !default;
$button-border-color:unquote("rgb(#{$button-secondary-border-color})") !default;
$button-default-border-color:$brand-default !default;
// Button 不同状态下的边框颜色 ：hover、active、focus状态.
$button-hover-border-color: $brand-default-hover;
$button-active-border-color: $brand-default-active;
$button-focus-border-color: $brand-default-active;
$button-hover-color: unquote("rgb(#{$default-color-light})");
$button-active-color: unquote("rgb(#{$default-color-dark})");
$button-focus-color: unquote("rgb(#{$default-color-dark})");
// Button 配置不同colors属性时的背景色.
$button-primary-color: $brand-primary;
$button-primary-active-color: $brand-primary-active;
$button-primary-hover-color: $brand-primary-hover;
$button-secondary-color: $brand-secondary;
$button-secondary-active-color: $brand-secondary-active;
$button-secondary-hover-color: $brand-secondary-hover;
$button-success-color: $brand-success;
$button-success-active-color: $brand-success-active;
$button-success-hover-color: $brand-success-hover;
@ -250,6 +243,27 @@ $button-dark-color: $brand-dark;
$button-dark-active-color: $brand-dark-active;
$button-dark-hover-color: $brand-dark-hover;
// Button 文字颜色.
// 主按钮(colors:'primary')
$button-primary-text-color: unquote("rgb(#{$text-color-base})") !default;
$button-text-color: $button-primary-text-color;
// 次按钮(colors:'secondary')
$button-secondary-text-color: unquote("rgb(#{$button-secondary-text-color})") !default;
// 默认按钮(<Button></Button>)
$button-default-text-color: unquote("rgb(#{$color-light-contrast})") !default;
// 边框按钮(shape:'border')
$button-border-text-color: unquote("rgb(#{$color-primary})") !default;
// Button 边框样式及颜色.
$button-border-style: unquote("solid") !default;
$button-border-color: $border-color-base;
$button-default-border-color: $button-default-color !default;
// Button 不同状态下的边框颜色 ：hover、active、focus状态.
$button-hover-border-color: $brand-default-hover;
$button-active-border-color: $brand-default-active;
$button-focus-border-color: $brand-default-active;
// FAB colors and sizes.
$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
$button-fab-hover-color-alt: unquote("rgb(#{$color-accent-light})") !default;