mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: input css variables extract

Browse Source
This commit is contained in:
07akioni 2019-06-25 11:09:11 +08:00
parent 5c15591c8a
commit 3bf14ba5ba
5 changed files with 91 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
demo/components/inputDemo.vue
View File

@ -147,6 +147,44 @@ export default {
/>
value: {{ value }}
<script>
export default {
data () {
return {
value: null
}
}
}
</script></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
disabled
</div>
<div class="n-doc-section__view">
<n-input
v-model="value"
type="input"
size="small"
placeholder="Stairway to Heaven"
disabled
round
/>
<br>
value: {{ value }}
</div>
<div class="n-doc-section__source">
<textarea v-pre>
<n-input
v-model="value"
type="input"
size="small"
placeholder="Stairway to Heaven"
round
/>
value: {{ value }}
<script>
export default {
data () {
@ -165,6 +203,7 @@ export default {
<div class="n-doc-section__view not-code">
<n-input
v-model="value"
placeholder="Nowhere Man"
type="textarea"
size="small"
:rows="5"
@ -182,6 +221,7 @@ export default {
<textarea v-pre>
<n-input
v-model="value"
placeholder="Nowhere Man"
type="textarea"
size="small"
:rows="5"

2
index.js
View File

@ -16,6 +16,7 @@ import Input from './packages/common/Input'
import Message from './packages/common/Message'
import Notification from './packages/common/Notification'
import Pagination from './packages/common/Pagination'
import Tooltip from './packages/common/Tooltip'
import ServiceCard from './packages/nimbus/ServiceCard'
import HomeLayout from './packages/nimbus/HomeLayout'
@ -49,6 +50,7 @@ function installUiToVue (Vue) {
Notification.install(Vue)
NimbusConfirmCard.install(Vue)
Pagination.install(Vue)
Tooltip.install(Vue)
}
export default installUiToVue

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "naive-ui",
"version": "0.1.50",
"version": "0.1.51",
"description": "",
"main": "index.js",
"scripts": {

54
styles/Input.scss
View File

@ -8,8 +8,12 @@
cursor: not-allowed;
.n-input__input, .n-input__textarea {
cursor: not-allowed;
background-color: #6F778D;
color: #9FA5B3FF;
background-color: $disabled-input-background-color;
color: $disabled-input-text-color;
box-shadow: none;
&::placeholder {
color: $disabled-input-placeholder-color;
}
}
}
.n-input__icon {
@ -18,64 +22,60 @@
width: 18px;
left: 0;
top: calc(50% - 8px);
margin-left: 16px;
margin-left: 12px;
i::before {
font-size: 20px;
line-height: 17px;
color: rgba(255,255,255,0.15);
color: $input-icon-color;
}
}
.n-input__input, .n-input__textarea {
box-sizing: border-box;
border: none;
border-radius: 8px;
border-radius: $input-border-radius;
outline: none;
color: #fff;
font-family: $default-font-family;
background-color: rgba(255, 255, 255, 0.1);
background-color: $input-background-color;
width: 100%;
caret-color: #63E2B7;
box-shadow: inset 0 0 0px 1px #6F778DFF;
caret-color: $input-caret-color;
box-shadow: none;
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
&:focus:hover {
box-shadow: inset 0 0 0px 1px rgba(99,226,183,1), 0px 0px 10px 1px rgba(54,101,85,1);
box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
}
&:hover {
box-shadow: inset 0 0 0px 1px rgba(99,226,183,1);
box-shadow: inset 0 0 0px 1px $main-color;
}
&:focus {
box-shadow: inset 0 0 0px 1px rgba(99,226,183,1);
background-color: rgba(99, 226, 183, 0.12);
.n-input__icon {
i::before {
color: rgba(57, 97, 101, 1);
}
}
box-shadow: inset 0 0 0px 1px $main-color;
background-color: $hover-input-background-color;
}
&::placeholder {
color: $input-placeholder-color;
opacity: 1;
}
}
.n-input__input {
&.n-input__input--small-size {
height: $small-height;
line-height: $small-height;
padding: 0 18px;
padding: 0 14px;
font-size: $small-input-font-size;
}
&.n-input__input--default-size, &.n-input__input--medium-size {
height: $default-height;
line-height: $default-height;
padding: 0 18px;
padding: 0 14px;
font-size: $default-input-font-size;
}
&.n-input__input--large-size {
height: $large-height;
line-height: $large-height;
padding: 0 18px;
padding: 0 14px;
font-size: $large-input-font-size;
}
&::placeholder {
color: rgba(255, 255, 255, .4);
opacity: 1;
}
}
.n-input__input.n-input__input--round {
&.n-input__input--small-size {
@ -89,7 +89,7 @@
}
}
.n-input__input.n-input__input--icon {
padding-left: 44px;
padding-left: 40px;
}
.n-input__textarea {
padding: 10px 14px;
@ -103,9 +103,5 @@
&.n-input__textarea--large-size {
font-size: $large-input-font-size;
}
&::placeholder {
color: rgba(255, 255, 255, .4);
opacity: 1;
}
}
}

28
styles/theme/default.scss
View File

@ -1,14 +1,32 @@
$body-background-color: #1a2033;
$small-input-font-size: 14px;
$default-input-font-size: 14px;
$large-input-font-size: 14px;
/**
* genaral
*/
$small-height: 28px;
$default-height: 34px;
$large-height: 40px;
$main-color: #63E2B7;
/**
* n-input
*/
$small-input-font-size: 14px;
$default-input-font-size: 14px;
$large-input-font-size: 14px;
$input-background-color: rgba(255, 255, 255, 0.12);
$disabled-input-background-color:rgba(255,255,255,0.06);
$disabled-input-text-color: rgba(255, 255, 255, .2);
$disabled-input-placeholder-color: rgba(255, 255, 255, .2);
$input-caret-color: $main-color;
$input-placeholder-color: rgba(255, 255, 255, .4);
$hover-input-background-color: rgba(99, 226, 183, 0.1);
$input-border-radius: 8px;
$input-icon-color: rgba(255,255,255,0.2);
$amazing-font-size: 20px;
$huge-font-size: 18px;
$large-font-size: 16px;