mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-06 14:30:46 +08:00
refactor: extract sass variables & demo page
This commit is contained in:
07akioni
parent
7716ae4f61
commit
debb25c3d8
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="section">
|
||||
<div class="section title">
|
||||
Card
|
||||
</div>
|
||||
<nv-card
|
||||
:width="300"
|
||||
title="Apply For Github Access"
|
||||
content="Lorem ipsum dolor sit amet, ea est eros munere. Voluptua phaedrum oportere quo cu, nam id laboramus dissentias, diam meliore singulis in quo. Duo in lorem qualisque aliquando. Id per aliquip cotidieque, denique mediocritatem pri ea. Usu nihil utamur quaestio ad, pro in tota euismod incorrupte, eum an paulo nonumes."
|
||||
/>
|
||||
<router-link to="/home">
|
||||
home
|
||||
</router-link>
|
||||
<br>
|
||||
<router-link to="/sidemenu">
|
||||
service
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -19,6 +19,7 @@ import ServiceLayout from 'packages/nimbus/ServiceLayout'
|
||||
|
||||
import sideMenuDemo from './components/sideMenuDemo'
|
||||
import homeDemo from './components/homeDemo'
|
||||
import demo from './demo'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -37,8 +38,9 @@ Table.install(Vue)
|
||||
WithMargin.install(Vue)
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: demo },
|
||||
{ path: '/sidemenu', component: sideMenuDemo },
|
||||
{ path: '/', component: homeDemo }
|
||||
{ path: '/home', component: homeDemo }
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import WithMargin from './src/main.vue'
|
||||
|
||||
WithMargin.install = function (Vue) {
|
||||
Vue.component(WithMargin.name, WithMargin)
|
||||
}
|
||||
|
||||
export default WithMargin
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="nv-with-margin"
|
||||
:style="style"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NvWithMargin',
|
||||
props: {
|
||||
marginTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
marginRight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
marginBottom: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
marginLeft: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style () {
|
||||
const marginStyle = {}
|
||||
if (this.marginTop) marginStyle.marginTop = this.marginTop + 'px'
|
||||
if (this.marginRight) marginStyle.marginRight = this.marginRight + 'px'
|
||||
if (this.marginBottom) marginStyle.marginBottom = this.marginBottom + 'px'
|
||||
if (this.marginLeft) marginStyle.marginLeft = this.marginLeft + 'px'
|
||||
return marginStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="nv-nimbus-service-layout">
|
||||
<div
|
||||
class="body"
|
||||
:class="{ 'is-collapsed': isCollapsed, active: !isCollapsed }"
|
||||
@ -138,227 +138,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
background: #171D33;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
& {
|
||||
position: absolute;
|
||||
left: 272px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
overflow: auto;
|
||||
}
|
||||
&.active {
|
||||
left: 272px;
|
||||
}
|
||||
&.is-collapsed {
|
||||
left: 48px;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
& {
|
||||
display: inline-block;
|
||||
background-color: #1f263e;
|
||||
width: 272px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
|
||||
}
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
.toggle-button {
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transform: translateX(50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
&.is-collapsed {
|
||||
transform: translateX(-224px);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
.toggle-button {
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.item-wrapper {
|
||||
.item.active {
|
||||
span {
|
||||
opacity: .4;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover::before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.item.is-group-header {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&.is-collapsed::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
opacity: .9;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
.toggle-button {
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
.item-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-left: 48px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
opacity: .4;
|
||||
}
|
||||
&.active span{
|
||||
opacity: .9;
|
||||
}
|
||||
&:hover span {
|
||||
opacity: .9;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
&.active::before {
|
||||
opacity: .9;
|
||||
}
|
||||
&.is-group-header {
|
||||
&::after {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-left: 2px solid #63E2B7;
|
||||
border-top: 2px solid #63E2B7;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: calc(50% - 1px);
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 25% 25%;
|
||||
opacity: 1;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
&.is-collapsed::after {
|
||||
transform: rotate(225deg) ;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
transform-origin: 50% 50%;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(.6, 0.2, 0.4, 1);
|
||||
background: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
&.is-group-item {
|
||||
padding-left: 64px;
|
||||
}
|
||||
&.is-group-header.group-item-is-choosed {
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-items {
|
||||
overflow: hidden;
|
||||
max-height: 600px;
|
||||
transition: max-height .45s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
&.is-collapsed {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,4 +2,6 @@
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
@port 8086
|
||||
@port 8086
|
||||
# .Vue 文件内部的样式或者分离样式
|
||||
如果一个组件是业务组件，那么在 Vue 文件内部写样式，但是这样会让主题的切换变得困难，因为一些基础变量的来源难以控制。所以还是要把样式抽离出来，这样的话又要给每一个组件增加命名空间...
|
||||
@ -1,14 +1,14 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(gradient-header) {
|
||||
& > .header {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
& > .content {
|
||||
background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background: $default-header-gradient;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
226
styles/NimbusServiceLayout.scss
Normal file
226
styles/NimbusServiceLayout.scss
Normal file
@ -0,0 +1,226 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@include b(nimbus-service-layout) {
|
||||
& {
|
||||
background: #171D33;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
& {
|
||||
position: absolute;
|
||||
left: 272px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
overflow: auto;
|
||||
}
|
||||
&.active {
|
||||
left: 272px;
|
||||
}
|
||||
&.is-collapsed {
|
||||
left: 48px;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
background:linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
& {
|
||||
display: inline-block;
|
||||
background-color: #1f263e;
|
||||
width: 272px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
|
||||
}
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
.toggle-button {
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transform: translateX(50%) translateY(-50%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
&.is-collapsed {
|
||||
transform: translateX(-224px);
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
.toggle-button {
|
||||
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
transform: translateX(50%) translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.item-wrapper {
|
||||
.item.active {
|
||||
span {
|
||||
opacity: .4;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover::before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.item.is-group-header {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&.is-collapsed::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
padding-top: 21px;
|
||||
padding-bottom: 21px;
|
||||
padding-left: 48px;
|
||||
font-size: 16px;
|
||||
.content {
|
||||
opacity: .9;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
.toggle-button {
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
.item-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-left: 48px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
opacity: .4;
|
||||
}
|
||||
&.active span{
|
||||
opacity: .9;
|
||||
}
|
||||
&:hover span {
|
||||
opacity: .9;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
&.active::before {
|
||||
opacity: .9;
|
||||
}
|
||||
&.is-group-header {
|
||||
&::after {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-left: 2px solid #63E2B7;
|
||||
border-top: 2px solid #63E2B7;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: calc(50% - 1px);
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 25% 25%;
|
||||
opacity: 1;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
&.is-collapsed::after {
|
||||
transform: rotate(225deg) ;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
transform-origin: 50% 50%;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(.6, 0.2, 0.4, 1);
|
||||
background: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
&.is-group-item {
|
||||
padding-left: 64px;
|
||||
}
|
||||
&.is-group-header.group-item-is-choosed {
|
||||
span {
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-items {
|
||||
overflow: hidden;
|
||||
max-height: 600px;
|
||||
transition: max-height .45s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
&.is-collapsed {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,20 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(table) {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-size: $small-font-size;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
|
||||
box-shadow: $table-box-shadow;
|
||||
padding-bottom: 8px;
|
||||
background-color: #1f263e;
|
||||
background-color: $table-body-background-color;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
thead {
|
||||
background-color: rgb(43,49,71);
|
||||
color: #fff;
|
||||
background-color: $table-header-background-color;
|
||||
color: $primary-text-color;
|
||||
tr {
|
||||
th {
|
||||
padding: 16px 6px 16px 6px;
|
||||
@ -31,8 +32,8 @@
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
background-color: #1f263e;
|
||||
color: #fff;
|
||||
background-color: $table-body-background-color;
|
||||
color: $regular-text-color;
|
||||
tr {
|
||||
td {
|
||||
padding: 16px 6px 12px 6px;
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
@import './fonts/OpenSans.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Open Sans';
|
||||
min-width: 1280px;
|
||||
background: #1a2033;
|
||||
background: $body-background-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
@ -7,4 +7,6 @@
|
||||
@import './WithPadding.scss';
|
||||
@import './ServiceCard.scss';
|
||||
@import './Table.scss';
|
||||
@import './WithMargin.scss';
|
||||
@import './WithMargin.scss';
|
||||
|
||||
@import './NimbusServiceLayout.scss';
|
||||
20
styles/theme/default.scss
Normal file
20
styles/theme/default.scss
Normal file
@ -0,0 +1,20 @@
|
||||
$body-background-color: #1a2033;
|
||||
|
||||
$amazing-font-size: 20px;
|
||||
$huge-font-size: 18px;
|
||||
$large-font-size: 16px;
|
||||
$regular-font-size: 14px;
|
||||
$small-font-size: 12px;
|
||||
$normal-font-size: $regular-font-size;
|
||||
$meta-font-size: $small-font-size;
|
||||
|
||||
$primary-text-color: rgba(255, 255, 255, .8);
|
||||
$regular-text-color: rgba(255, 255, 255, .6);
|
||||
$secondary-text-color: rgba(255, 255, 255, .4);
|
||||
|
||||
$table-header-background-color: rgb(43,49,71);
|
||||
$table-body-background-color: #1f263e;
|
||||
$table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
|
||||
|
||||
$default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
$default-header-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
|
||||
Loading…
x
Reference in New Issue
Block a user