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

change button

This commit is contained in:
Boyuzhou 2016-12-27 14:32:22 +08:00
parent 79dbfd1c1c
commit 6646f55d55
3 changed files with 65 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "tinper-bee-core", "name": "tinper-bee-core",
"version": "0.0.17", "version": "0.0.18",
"description": "style core and js util for tinper-bee", "description": "style core and js util for tinper-bee",
"main": "lib/index.js", "main": "lib/index.js",
"engines": { "engines": {

95
scss/minxin-mixins.scss
View File

@ -9,7 +9,7 @@
@mixin typo-display-4($colorContrast: false, $usePreferred: true) { @mixin typo-display-4($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 112/16 * $unit; font-size: 112/10 * $unit;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: -0.04em; letter-spacing: -0.04em;
@ -21,7 +21,7 @@
@mixin typo-display-3($colorContrast: false, $usePreferred: true) { @mixin typo-display-3($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 56/16 * $unit; font-size: 56/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 1.35; line-height: 1.35;
letter-spacing: -0.02em; letter-spacing: -0.02em;
@ -33,9 +33,9 @@
@mixin typo-display-2($colorContrast: false, $usePreferred: true) { @mixin typo-display-2($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 45/16 * $unit; font-size: 45/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 48/16 * $unit; line-height: 48/10 * $unit;
@if $colorContrast { @if $colorContrast {
opacity: 0.54; opacity: 0.54;
@ -44,9 +44,9 @@
@mixin typo-display-1($colorContrast: false, $usePreferred: true) { @mixin typo-display-1($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 34/16 * $unit; font-size: 34/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 40/16 * $unit; line-height: 40/10 * $unit;
@if $colorContrast { @if $colorContrast {
opacity: 0.54; opacity: 0.54;
@ -55,9 +55,9 @@
@mixin typo-headline($colorContrast: false, $usePreferred: true) { @mixin typo-headline($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 24/16 * $unit; font-size: 24/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 32/16 * $unit; line-height: 32/10 * $unit;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@if $colorContrast { @if $colorContrast {
@ -67,7 +67,7 @@
@mixin typo-title($colorContrast: false, $usePreferred: true) { @mixin typo-title($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 20/16 * $unit; font-size: 20/10 * $unit;
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@ -79,9 +79,9 @@
@mixin typo-subhead($colorContrast: false, $usePreferred: true) { @mixin typo-subhead($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 16/16 * $unit; font-size: 16/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 24/16 * $unit; line-height: 24/10 * $unit;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@if $colorContrast { @if $colorContrast {
@ -91,9 +91,9 @@
@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) { @mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 16/16 * $unit; font-size: 16/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 28/16 * $unit; line-height: 28/10 * $unit;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@if $colorContrast { @if $colorContrast {
@ -103,13 +103,13 @@
@mixin typo-body-2($colorContrast: false, $usePreferred: false) { @mixin typo-body-2($colorContrast: false, $usePreferred: false) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 14/16 * $unit; font-size: 14/10 * $unit;
@if $usePreferred { @if $usePreferred {
font-weight: 500; font-weight: 500;
} @else { } @else {
font-weight: bold; font-weight: bold;
} }
line-height: 24/16 * $unit; line-height: 24/10 * $unit;
letter-spacing: 0; letter-spacing: 0;
@if $colorContrast { @if $colorContrast {
@ -119,9 +119,9 @@
@mixin typo-body-1($colorContrast: false, $usePreferred: false) { @mixin typo-body-1($colorContrast: false, $usePreferred: false) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 14/16 * $unit; font-size: 14/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 24/16 * $unit; line-height: 24/10 * $unit;
letter-spacing: 0; letter-spacing: 0;
@if $colorContrast { @if $colorContrast {
@ -131,7 +131,7 @@
@mixin typo-caption($colorContrast: false, $usePreferred: false) { @mixin typo-caption($colorContrast: false, $usePreferred: false) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 12/16 * $unit; font-size: 12/10 * $unit;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
letter-spacing: 0; letter-spacing: 0;
@ -144,7 +144,7 @@
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) { @mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
position: relative; position: relative;
font-size: 24/16 * $unit; font-size: 24/10 * $unit;
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
line-height: 1.35; line-height: 1.35;
@ -168,7 +168,7 @@
@mixin typo-menu($colorContrast: false, $usePreferred: true) { @mixin typo-menu($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 14/16 * $unit; font-size: 14/10 * $unit;
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
letter-spacing: 0; letter-spacing: 0;
@ -180,7 +180,7 @@
@mixin typo-button($colorContrast: false, $usePreferred: true) { @mixin typo-button($colorContrast: false, $usePreferred: true) {
@include typo-preferred-font($usePreferred); @include typo-preferred-font($usePreferred);
font-size: 13/16 * $unit; font-size: 14/10 * $unit;
font-weight: 500; font-weight: 500;
// text-transform: uppercase; // text-transform: uppercase;
line-height: 1; line-height: 1;
@ -195,7 +195,7 @@
// Focus shadow mixin. // Focus shadow mixin.
@mixin focus-shadow() { @mixin focus-shadow() {
box-shadow: 0 0 8/16 * $unit rgba(0,0,0,.18),0 8/16 * $unit 16/16 * $unit rgba(0,0,0,.36); box-shadow: 0 0 8/10 * $unit rgba(0,0,0,.18),0 8/10 * $unit 16/10 * $unit rgba(0,0,0,.36);
} }
@mixin shadow-0dp() { @mixin shadow-0dp() {
@ -203,44 +203,44 @@
} }
@mixin shadow-2dp() { @mixin shadow-2dp() {
box-shadow: 0 2/16 * $unit 2/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3/16 * $unit 1/16 * $unit -2/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1/16 * $unit 5/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
box-shadow: 0 2/16 * $unit 2/16 * $unit 0 rgb(0, 0, 0), box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgb(0, 0, 0),
0 3/16 * $unit 1/16 * $unit -2/16 * $unit rgb(0, 0, 0), 0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgb(0, 0, 0),
0 1/16 * $unit 5/16 * $unit 0 rgb(0, 0, 0) \9; 0 1/10 * $unit 5/10 * $unit 0 rgb(0, 0, 0) \9;
} }
@mixin shadow-3dp() { @mixin shadow-3dp() {
box-shadow: 0 3/16 * $unit 4/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 3/10 * $unit 4/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3/16 * $unit 3/16 * $unit -2/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 3/10 * $unit 3/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1/16 * $unit 8/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1/10 * $unit 8/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
} }
@mixin shadow-4dp() { @mixin shadow-4dp() {
box-shadow: 0 4/16 * $unit 5/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 4/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1/16 * $unit 10/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 1/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 2/16 * $unit 4/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 2/10 * $unit 4/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-6dp() { @mixin shadow-6dp() {
box-shadow: 0 6/16 * $unit 10/16 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 6/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 1/16 * $unit 18/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 1/10 * $unit 18/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 3/16 * $unit 5/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 3/10 * $unit 5/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-8dp() { @mixin shadow-8dp() {
box-shadow: 0 8/16 * $unit 10/16 * $unit 1/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 8/10 * $unit 10/10 * $unit 1/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 3/16 * $unit 14/16 * $unit 2/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 3/10 * $unit 14/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 5/16 * $unit 5/16 * $unit -3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 5/10 * $unit 5/10 * $unit -3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-16dp() { @mixin shadow-16dp() {
box-shadow: 0 16/16 * $unit 24/16 * $unit 2/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 16/10 * $unit 24/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 6/16 * $unit 30/16 * $unit 5/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 6/10 * $unit 30/10 * $unit 5/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 8/16 * $unit 10/16 * $unit -5/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 8/10 * $unit 10/10 * $unit -5/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-24dp() { @mixin shadow-24dp() {
box-shadow: 0 9/16 * $unit 46/16 * $unit 8/16 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity), box-shadow: 0 9/10 * $unit 46/10 * $unit 8/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
0 11/16 * $unit 15/16 * $unit -7/16 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 11/10 * $unit 15/10 * $unit -7/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 24/16 * $unit 38/16 * $unit 3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 24/10 * $unit 38/10 * $unit 3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
/* Animations */ /* Animations */
@ -352,10 +352,9 @@
} }
//按钮尺寸 //按钮尺寸
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; font-size: $font-size;
border-radius: $border-radius;
} }
//徽章 //徽章

45
scss/minxin-variables.scss
View File

@ -206,34 +206,23 @@ $color-danger: unquote("rgb(#{$palette-red-500})") !default;
//redius //redius
$default-border-radius: 6px; $default-border-radius: 4px;
/* UButton */ /* UButton */
// Default button colors. // Default button colors.
$button-primary-color: unquote("rgb(#{$color-white})") !default; $button-default-color: $brand-default;
$button-primary-color-IE8: unquote("rgb(#{$color-white})") !default; $button-default-color-IE8: $brand-default;
$button-hover-color: $brand-default-hover;
$button-active-color: $brand-default-active;
$button-focus-color: $brand-default-active;
$button-secondary-color: unquote("rgb(#{$palette-u-gray-A100})") !default; $button-secondary-color: unquote("rgb(#{$palette-u-gray-A100})") !default;
$button-hover-color: #F7F7F7 !default;
$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
// Colored button colors.
$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
$button-primary-hover-color-alt: unquote("rgb(#{$color-primary-light})") !default;
$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
$button-focus-color-alt: $button-focus-color !default;
// Ripple color for colored raised buttons.
$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
// Disabled button colors.
$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
$button-primary-color: $brand-primary; $button-primary-color: $brand-primary;
$button-primary-active-color: $brand-primary-active; $button-primary-active-color: $brand-primary-active;
@ -289,22 +278,22 @@ $button-raised-font-size: 14/10 * $unit !default;
$button-border-color:unquote("rgb(#{$palette-grey-300})") !default; $button-border-color:unquote("rgb(#{$palette-grey-300})") !default;
// 大按钮 // 大按钮
$button-padding-y-lg:6px; $button-padding-y-lg:8px;
$button-padding-x-lg:15px; $button-padding-x-lg:15px;
$font-size-lg:14px; $font-size-lg:1.4 * $unit;
$button-border-radius-lg:3px;
//特大型按钮 //特大型按钮
$button-padding-y-xg:10px; $button-padding-y-xg:10px;
$button-padding-x-xg:18px; $button-padding-x-xg:18px;
$font-size-xg:18px; $font-size-xg:1.6 * $unit;
$button-border-radius-xg:4px;
//小型按钮 //小型按钮
$button-padding-y-sm:1px; $button-padding-y-sm:3px;
$button-padding-x-sm:5px; $button-padding-x-sm:5px;
$font-size-sm:12px; $font-size-sm:1.2 * $unit;
$button-border-radius-sm:2px;
/* UText */ /* UText */