mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(header): type

Browse Source
This commit is contained in:
07akioni 2019-12-21 22:06:06 +08:00
parent a7533dfbf2
commit aa567bd1f2
4 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/documentation/components/typography/enUS/header.md
View File

@ -9,9 +9,13 @@
width: 24px;
background-color: rgba(128, 128, 128, .5);
"></div>
<n-h1>sin(x)</n-h1>
<n-h1 prefix="bar">sin(x)</n-h1>
<n-h1 prefix="bar" align-text>sin(x)</n-h1>
<n-h1><n-text type="primary">sin(x)</n-text></n-h1>
<n-h1 prefix="bar"><n-text type="primary">sin(x)</n-text></n-h1>
<n-h1 prefix="bar" align-text><n-text type="primary">sin(x)</n-text></n-h1>
<n-h1 prefix="bar" align-text type="success"><n-text type="success">sin(x)</n-text></n-h1>
<n-h1 prefix="bar" align-text type="info"><n-text type="info">sin(x)</n-text></n-h1>
<n-h1 prefix="bar" align-text type="warning"><n-text type="warning">sin(x)</n-text></n-h1>
<n-h1 prefix="bar" align-text type="error"><n-text type="error">sin(x)</n-text></n-h1>
<n-h2>cos(x)</n-h2>
<n-h2 prefix="bar">cos(x)</n-h2>
<n-h2 prefix="bar" align-text>cos(x)</n-h2>

2
packages/common/Typography/src/header.js
View File

@ -6,7 +6,7 @@ export default level =>({
props: {
type: {
type: String,
default: null
default: 'default'
},
prefix: {
type: String,

23
styles/GradientText.scss
View File

@ -10,9 +10,9 @@
@include themes-mixin {
@include b(gradient-text) {
@include once {
display: inline-block;
font-weight: 700;
font-size: inherit;
// background-image: $default-text-gradient;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
@ -22,26 +22,5 @@
@include gradient-text-type-mixin(warning);
@include gradient-text-type-mixin(error);
@include gradient-text-type-mixin(info);
// &.n-gradient-text--default-type {
// background-image: $default-text-gradient;
// // -webkit-background-clip: text;
// // background-clip: text;
// }
// &.n-gradient-text--warning-type {
// background-image: $default-text-gradient-warning;
// // -webkit-background-clip: text;
// // background-clip: text;
// }
// &.n-gradient-text--danger-type {
// background-image: $default-text-gradient-danger;
// // -webkit-background-clip: text;
// // background-clip: text;
// }
// &.n-gradient-text--success-type {
// background-image: $default-text-gradient-success;
// // -webkit-background-clip: text;
// // background-clip: text;
// }
}
}

38
styles/Typography.scss
View File

@ -68,6 +68,36 @@ $--header-bar-width: (
left: -(map-get($--header-prefix-width, $level));
}
}
@include m(default-type) {
&::before {
background-color: $--primary-6;
}
}
@include m(primary-type) {
&::before {
background-color: $--primary-6;
}
}
@include m(info-type) {
&::before {
background-color: $--info-6;
}
}
@include m(success-type) {
&::before {
background-color: $--success-6;
}
}
@include m(warning-type) {
&::before {
background-color: $--warning-6;
}
}
@include m(error-type) {
&::before {
background-color: $--error-6;
}
}
}
}
}
@ -131,7 +161,6 @@ $--header-bar-width: (
text-decoration: underline;
}
@include b(text) {
font-size: 14px;
display: inline-block;
transition: color .3s $default-cubic-bezier;
color: $--n-secondary-text-color;
@ -144,7 +173,7 @@ $--header-bar-width: (
color: $--n-secondary-text-color;
padding: .15em .45em .15em .45em;
border-radius: 3px;
font-size: 13px;
font-size: .85em;
background-color: $--n-alpha-input-color;
border: 1px solid $--n-alpha-border-color;
}
@ -157,6 +186,9 @@ $--header-bar-width: (
@include m(underline) {
text-decoration: underline;
}
@include m(primary-type) {
color: $--primary-6;
}
@include m(info-type) {
color: $--info-6;
}
@ -190,7 +222,7 @@ $--header-bar-width: (
margin-top: 12px;
margin-bottom: 12px;
transition: color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
border-left: 4px solid $--n-divider-color;
border-left: 4px solid $--n-border-color;
padding-left: 12px;
color: $--n-secondary-text-color;
@include m(align-text) {