change button
This commit is contained in:
Boyuzhou
parent
79dbfd1c1c
commit
6646f55d55
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tinper-bee-core",
|
||||
"version": "0.0.17",
|
||||
"version": "0.0.18",
|
||||
"description": "style core and js util for tinper-bee",
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 112/16 * $unit;
|
||||
font-size: 112/10 * $unit;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 56/16 * $unit;
|
||||
font-size: 56/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.02em;
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
|
||||
@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 45/16 * $unit;
|
||||
font-size: 45/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 48/16 * $unit;
|
||||
line-height: 48/10 * $unit;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
|
||||
@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 34/16 * $unit;
|
||||
font-size: 34/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 40/16 * $unit;
|
||||
line-height: 40/10 * $unit;
|
||||
|
||||
@if $colorContrast {
|
||||
opacity: 0.54;
|
||||
|
|
@ -55,9 +55,9 @@
|
|||
|
||||
@mixin typo-headline($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 24/16 * $unit;
|
||||
font-size: 24/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 32/16 * $unit;
|
||||
line-height: 32/10 * $unit;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@if $colorContrast {
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
@mixin typo-title($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 20/16 * $unit;
|
||||
font-size: 20/10 * $unit;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
|
|
@ -79,9 +79,9 @@
|
|||
|
||||
@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16/16 * $unit;
|
||||
font-size: 16/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 24/16 * $unit;
|
||||
line-height: 24/10 * $unit;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
|
||||
@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 16/16 * $unit;
|
||||
font-size: 16/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 28/16 * $unit;
|
||||
line-height: 28/10 * $unit;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@if $colorContrast {
|
||||
|
|
@ -103,13 +103,13 @@
|
|||
|
||||
@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14/16 * $unit;
|
||||
font-size: 14/10 * $unit;
|
||||
@if $usePreferred {
|
||||
font-weight: 500;
|
||||
} @else {
|
||||
font-weight: bold;
|
||||
}
|
||||
line-height: 24/16 * $unit;
|
||||
line-height: 24/10 * $unit;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
|
|
@ -119,9 +119,9 @@
|
|||
|
||||
@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14/16 * $unit;
|
||||
font-size: 14/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 24/16 * $unit;
|
||||
line-height: 24/10 * $unit;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $colorContrast {
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
|
||||
@mixin typo-caption($colorContrast: false, $usePreferred: false) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 12/16 * $unit;
|
||||
font-size: 12/10 * $unit;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
position: relative;
|
||||
font-size: 24/16 * $unit;
|
||||
font-size: 24/10 * $unit;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
line-height: 1.35;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
|
||||
@mixin typo-menu($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 14/16 * $unit;
|
||||
font-size: 14/10 * $unit;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
|
||||
@mixin typo-button($colorContrast: false, $usePreferred: true) {
|
||||
@include typo-preferred-font($usePreferred);
|
||||
font-size: 13/16 * $unit;
|
||||
font-size: 14/10 * $unit;
|
||||
font-weight: 500;
|
||||
// text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
|
||||
// Focus shadow mixin.
|
||||
@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() {
|
||||
|
|
@ -203,44 +203,44 @@
|
|||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2/16 * $unit 2/16 * $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 1/16 * $unit 5/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
box-shadow: 0 2/16 * $unit 2/16 * $unit 0 rgb(0, 0, 0),
|
||||
0 3/16 * $unit 1/16 * $unit -2/16 * $unit rgb(0, 0, 0),
|
||||
0 1/16 * $unit 5/16 * $unit 0 rgb(0, 0, 0) \9;
|
||||
box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgb(0, 0, 0),
|
||||
0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgb(0, 0, 0),
|
||||
0 1/10 * $unit 5/10 * $unit 0 rgb(0, 0, 0) \9;
|
||||
}
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3/16 * $unit 4/16 * $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 1/16 * $unit 8/16 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
box-shadow: 0 3/10 * $unit 4/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3/10 * $unit 3/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1/10 * $unit 8/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4/16 * $unit 5/16 * $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 2/16 * $unit 4/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
box-shadow: 0 4/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 2/10 * $unit 4/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6/16 * $unit 10/16 * $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 3/16 * $unit 5/16 * $unit -1/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
box-shadow: 0 6/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1/10 * $unit 18/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 3/10 * $unit 5/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8/16 * $unit 10/16 * $unit 1/16 * $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 5/16 * $unit 5/16 * $unit -3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
box-shadow: 0 8/10 * $unit 10/10 * $unit 1/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3/10 * $unit 14/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 5/10 * $unit 5/10 * $unit -3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16/16 * $unit 24/16 * $unit 2/16 * $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 8/16 * $unit 10/16 * $unit -5/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
box-shadow: 0 16/10 * $unit 24/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 6/10 * $unit 30/10 * $unit 5/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 8/10 * $unit 10/10 * $unit -5/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-24dp() {
|
||||
box-shadow: 0 9/16 * $unit 46/16 * $unit 8/16 * $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 24/16 * $unit 38/16 * $unit 3/16 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
box-shadow: 0 9/10 * $unit 46/10 * $unit 8/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 11/10 * $unit 15/10 * $unit -7/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 24/10 * $unit 38/10 * $unit 3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
font-size: $font-size;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
//徽章
|
||||
|
|
|
|||
|
|
@ -206,34 +206,23 @@ $color-danger: unquote("rgb(#{$palette-red-500})") !default;
|
|||
|
||||
//redius
|
||||
|
||||
$default-border-radius: 6px;
|
||||
$default-border-radius: 4px;
|
||||
|
||||
/* UButton */
|
||||
|
||||
// Default button colors.
|
||||
$button-primary-color: unquote("rgb(#{$color-white})") !default;
|
||||
$button-primary-color-IE8: unquote("rgb(#{$color-white})") !default;
|
||||
$button-default-color: $brand-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-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-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-padding-y-lg:6px;
|
||||
$button-padding-y-lg:8px;
|
||||
$button-padding-x-lg:15px;
|
||||
$font-size-lg:14px;
|
||||
$button-border-radius-lg:3px;
|
||||
$font-size-lg:1.4 * $unit;
|
||||
|
||||
|
||||
//特大型按钮
|
||||
$button-padding-y-xg:10px;
|
||||
$button-padding-x-xg:18px;
|
||||
$font-size-xg:18px;
|
||||
$button-border-radius-xg:4px;
|
||||
$font-size-xg:1.6 * $unit;
|
||||
|
||||
|
||||
//小型按钮
|
||||
$button-padding-y-sm:1px;
|
||||
$button-padding-y-sm:3px;
|
||||
$button-padding-x-sm:5px;
|
||||
$font-size-sm:12px;
|
||||
$button-border-radius-sm:2px;
|
||||
$font-size-sm:1.2 * $unit;
|
||||
|
||||
|
||||
|
||||
/* UText */
|
||||
|
|
|
|||
Loading…
Reference in New Issue