mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: change ui base font to fira-sans!

Browse Source
This commit is contained in:
07akioni 2019-12-28 13:46:37 +08:00
parent 395ee67a21
commit 48233c995e
14 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/documentation/components/layout/enUS/absolute.md
View File

@ -13,10 +13,10 @@ All layout components can use absolute positioning. It can be used when you want
Cool Sider
</n-layout-sider>
<n-layout mode="absolute">
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">

4
demo/documentation/components/layout/enUS/collapse.md
View File

@ -27,7 +27,7 @@ Use `collapsed-width` and `width` to set sider's width.
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<h1>Footer</h1>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>
@ -47,7 +47,7 @@ Use `collapsed-width` and `width` to set sider's width.
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"

4
demo/documentation/components/layout/enUS/debug.md
View File

@ -13,14 +13,14 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<n-layout-content>
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<h1>Footer</h1>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>

8
demo/documentation/components/layout/enUS/scrollbar.md
View File

@ -10,10 +10,10 @@ Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You
Cool Sider
</n-layout-sider>
<n-layout mode="absolute" :use-native-scrollbar="false">
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<h1>Long</h1><h1>Long</h1><h1>Long</h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
</n-layout>
</n-layout>
<n-layout-footer mode="absolute" style="height: 64px">

6
demo/documentation/components/layout/enUS/showSiderContent.md
View File

@ -16,14 +16,14 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout>
<n-layout-content>
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<h1>Footer</h1>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>
@ -44,7 +44,7 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"

8
demo/documentation/components/layout/enUS/triggerButton.md
View File

@ -15,14 +15,14 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout style="padding: 24px;">
<n-layout-content>
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<h1>Footer</h1>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>
@ -42,7 +42,7 @@
@collapse="collapsed = true"
@expand="collapsed = false"
>
<h1>Sider</h1>
<n-h1>Sider</n-h1>
</n-layout-sider>
<n-layout
mode="absolute"
@ -52,7 +52,7 @@
<span>Content</span>
</n-layout-content>
<n-layout-footer>
<h1>Footer</h1>
<n-h1>Footer</n-h1>
</n-layout-footer>
</n-layout>
</n-layout>

2
styles/Message.scss
View File

@ -40,7 +40,7 @@
height: 40px;
border-radius: 20px;
flex-shrink: 0;
font-weight: 500;
font-weight: 400;
overflow: hidden;
&#{&}-transition-enter, &#{&}-transition-leave-to {
opacity: 0;

2
styles/Select.scss
View File

@ -46,7 +46,7 @@
transform: translateZ(0);
}
@include b(select-menu) {
@include fade-in-scale-up-transition(select-menu);
@include fade-in-scale-up-transition(select-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier));
}
}
}

1
styles/base.scss
View File

@ -1,5 +1,6 @@
@import './fonts/Lato.scss';
@import './fonts/FiraCode.scss';
@import './fonts/FiraSans.scss';
@import './themes/commonVars.scss';
@import './themes/light/index.scss';
@import './Detachable.scss';

11
styles/fonts/FiraSans.scss Normal file
View File

@ -0,0 +1,11 @@
@font-face {
font-family: 'FiraSans';
font-weight: 400;
src: url('./resources/fonts/FiraSans-Regular.ttf');
}
@font-face {
font-family: 'FiraSans';
font-weight: 500;
src: url('./resources/fonts/FiraSans-Medium.ttf');
}

BIN
styles/resources/fonts/FiraSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
styles/resources/fonts/FiraSans-Regular.ttf Normal file
View File

Binary file not shown.

2
styles/themes/commonVars.scss
View File

@ -1,4 +1,4 @@
$--n-font-family: 'Lato';
$--n-font-family: 'FiraSans';
$--n-mono-font-family: 'FiraCode', monospace;

6
styles/themes/vars.scss
View File

@ -248,14 +248,14 @@ $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
}
}
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: ()) {
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
&.#{$namespace}-#{$block}--transition-leave-active {
transform-origin: $origin;
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transform-origin: $origin;
transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;