mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-12 14:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: style lint!!!

Browse Source
This commit is contained in:
07akioni 2019-06-28 15:38:44 +08:00
parent 88812534be
commit 381e788682
6 changed files with 127 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.stylelintrc.js
View File

@ -1,3 +1,6 @@
module.exports = {
"extends": "stylelint-config-recommended-scss"
"extends": "stylelint-config-recommended-scss",
"rules": {
'no-descending-specificity': null
}
}

2
styles/Input.scss
View File

@ -29,7 +29,7 @@
color: $input-icon-color;
}
}
.n-input__input, .n-input__textarea {
& .n-input__input, .n-input__textarea {
-webkit-appearance: none;
box-sizing: border-box;
border: none;

1
styles/MasonryGroup.scss
View File

@ -1,4 +1,5 @@
@import './mixins/mixins.scss';
@include b(masonry-group) {
position: relative;
}

93
styles/Message.scss
View File

@ -4,59 +4,58 @@
@include b(message) {
&.n-message__container {
.n-message__cell {
display: flex;
transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
max-height: 40px;
opacity: 1;
margin-bottom: 12px;
padding: 0 40px;
height: 40px;
border-radius: 20px;
background-color: red;
flex-shrink: 0;
font-weight: 700;
box-shadow:0px 2px 30px 0px rgba(255,255,255,0.22);
color: #ffffff;
overflow: hidden;
.n-message-cell__content {
display: inline-block;
height: 40px;
line-height: 40px;
}
.n-message-cell__icon {
margin-right: 11px;
display: inline-flex;
height: 40px;
line-height: 40px;
align-items: center;
i::before {
font-size: 20px;
}
}
&.n-message__cell--success {
background-color: #2A947DFF;
.n-message-cell__icon {
i::before {
color: #63E2B7FF
}
}
}
&.n-message__cell--error {
background-color: #D03A52FF;
.n-message-cell__icon {
i::before {
color: #FF92A4FF
}
}
}
&.is-going-to-emerge {
opacity: 0;
transform: translateY(-12px);
max-height: 0px;
margin-bottom: 0;
}
& {
display: flex;
transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
max-height: 40px;
opacity: 1;
margin-bottom: 12px;
padding: 0 40px;
height: 40px;
border-radius: 20px;
background-color: red;
flex-shrink: 0;
font-weight: 700;
box-shadow:0px 2px 30px 0px rgba(255,255,255,0.22);
color: #ffffff;
overflow: hidden;
.n-message-cell__content {
display: inline-block;
height: 40px;
line-height: 40px;
}
.n-message-cell__icon {
margin-right: 11px;
display: inline-flex;
height: 40px;
line-height: 40px;
align-items: center;
i::before {
font-size: 20px;
}
}
&.n-message__cell--success {
background-color: #2A947DFF;
.n-message-cell__icon {
i::before {
color: #63E2B7FF
}
}
}
&.n-message__cell--error {
background-color: #D03A52FF;
.n-message-cell__icon {
i::before {
color: #FF92A4FF
}
}
}
}
&.is-vanishing {
opacity: 0;
transform: translateY(-12px);

172
styles/NimbusServiceLayout.scss
View File

@ -1,50 +1,34 @@
@import './mixins/mixins.scss';
.n-nimbus-service-layout{
& {
background: #171D33;
background: #171D33;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
.n-nimbus-service-layout__body {
position: absolute;
left: 272px;
right: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.n-nimbus-service-layout__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;
transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: auto;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
& {
/* width */
&::-webkit-scrollbar {
width: 5px;
}
&::-moz-scrollbar {
width: 5px;
}
/* Track */
&::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
}
&.n-nimbus-service-layout__body--active {
left: 272px;
}
@ -56,36 +40,14 @@
}
}
.n-nimbus-service-layout__drawer {
& {
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);
}
&.n-nimbus-service-layout__drawer--active {
transform: translateX(0);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.n-nimbus-service-layout-drawer__toggle-button {
transform: translateX(50%) translateY(-50%) rotate(0deg);
}
.n-nimbus-service-layout-drawer__item-wrapper {
opacity: 1;
}
}
&.n-nimbus-service-layout__drawer--collapsed {
transform: translateX(-224px);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.n-nimbus-service-layout-drawer__toggle-button {
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
.n-nimbus-service-layout-drawer__item-wrapper {
opacity: 0;
}
}
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);
.n-nimbus-service-layout-drawer__toggle-button {
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
cursor: pointer;
@ -96,10 +58,6 @@
top: 50%;
right: 0;
}
.n-nimbus-service-layout-drawer__divider {
margin: 0px 25px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.n-nimbus-service-layout-drawer__item-wrapper {
position: absolute;
top: 0;
@ -108,27 +66,18 @@
right: 0;
overflow-y: auto;
transition: opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
& {
/* width */
&::-webkit-scrollbar {
width: 5px;
}
/* Track */
&::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
.n-nimbus-service-layout-drawer__header {
position: relative;
@ -198,6 +147,10 @@
opacity: .9;
}
&.n-nimbus-service-layout-drawer__item--is-group-header {
span {
transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
color: #E9E9EC;
}
&::after { // down arrow
content: '';
height: 6px;
@ -219,10 +172,7 @@
&.n-nimbus-service-layout-drawer__item--collapsed::after {
transform: rotate(225deg) ;
}
span {
transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
color: #E9E9EC;
}
}
&.n-nimbus-service-layout-drawer__item--is-group-item {
padding-left: 64px;
@ -236,5 +186,29 @@
}
}
}
&.n-nimbus-service-layout__drawer--active {
transform: translateX(0);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.n-nimbus-service-layout-drawer__toggle-button {
transform: translateX(50%) translateY(-50%) rotate(0deg);
}
.n-nimbus-service-layout-drawer__item-wrapper {
opacity: 1;
}
}
&.n-nimbus-service-layout__drawer--collapsed {
transform: translateX(-224px);
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
.n-nimbus-service-layout-drawer__toggle-button {
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
.n-nimbus-service-layout-drawer__item-wrapper {
opacity: 0;
}
}
.n-nimbus-service-layout-drawer__divider {
margin: 0px 25px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
}
}

6
styles/Pagination.scss
View File

@ -54,10 +54,8 @@
.n-pagination-item__fast-backward-icon, .n-pagination-item__fast-forward-icon {
display: block;
.n-icon {
& {
display: inline-block;
width: 6px;
}
display: inline-block;
width: 6px;
&::before{
color: $pagination-color--active;
}