Skip to content

Commit

Permalink
feat(Navigation): 调整组件样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@koppthe
koppthe committed Aug 14, 2018
1 parent 6f6eae2 commit 18a6e44
Show file tree
Hide file tree
Showing 14 changed files with 165 additions and 129 deletions.
32 changes: 6 additions & 26 deletions src/components/drawer/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import '../../style/theme/default.scss';

$drawer-content-width: 460px;

.at-drawer {
position: relative;
z-index: $zindex-drawer;
Expand All @@ -12,42 +14,20 @@
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 225ms $ease-in-out-quart;
transition: opacity 300ms $timing-func;
}

&__content {
position: fixed;
top: 0;
bottom: 0;
width: 460px;
background-color: #fff;
z-index: 1;
width: $drawer-content-width;
text-align: left;
background-color: $color-bg;
opacity: 0;
z-index: 1;
}

// &__list {
// margin: 0 0 0 18px;
// max-height: 100%;
// overflow-y: scroll;

// &-icon {
// position: absolute;
// right: 20px;
// top: 50%;
// transform: translateY(-50%);
// }

// &-item {
// height: 90px;
// line-height: 90px;
// font-size: 34px;
// color: $color-black-0;
// border-bottom: 1px solid #ddd;
// position: relative;
// }
// }

&.at-drawer--left {
.at-drawer__content {
left: 0;
Expand Down
21 changes: 8 additions & 13 deletions src/components/nav-bar/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@

.at-nav-bar {
display: flex;
width: 100%;
padding: $spacing-v-sm;
background-color: #fff;
box-sizing: border-box;
align-items: center;
justify-content: center;
width: 100%;
padding: $spacing-v-md $spacing-h-md;
background-color: $color-bg;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
@include border-thin-bottom;
Expand All @@ -27,12 +27,6 @@
overflow: hidden;
}

&__left_text {
font-size: $font-size-lg;
vertical-align: middle;
display: inline-block;
}

&__right_view {
flex: 2;
overflow: hidden;
Expand All @@ -41,18 +35,19 @@

&__title {
flex: 5;
font-size: $font-size-base;
color: $color-text-base;
font-size: $font-size-xl;
line-height: $line-height-zh;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

&__text {
display: inline-block;
font-size: $font-size-base;
font-size: $font-size-lg;
}

&__container {
Expand Down
22 changes: 12 additions & 10 deletions src/components/pagination/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
@import "../../style/theme/default.scss";

$pagination-margin: 40px;
$pagination-height: 60px;

.at-pagination {
position: relative;
margin: 0 $pagination-margin;
font-size: 0;
width: 670px;
height: 60px;
overflow: hidden;
margin: 0 auto;
position: relative;

&__btns {
display: flex;
Expand All @@ -23,15 +24,16 @@
}

&__number {
font-size: 28px;
color: #354052;
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: $pagination-height;
color: $color-text-base;
font-size: $font-size-base;
text-align: center;
line-height: $pagination-height;
overflow: hidden;
left: 50%;
top: 0;
height: 100%;
line-height: 60px;
transform: translateX(-50%);

&-current {
Expand Down
18 changes: 9 additions & 9 deletions src/components/segmented-control/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,25 @@
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
@include border-thin(#6190E8);
@include border-thin($color: $color-brand, $width: 1PX);

&__item {
flex: 1;
box-sizing: border-box;
min-width: 50px;
min-height: 10px;
font-size: $font-size-base;
line-height: $line-height-base;
padding: $spacing-v-sm;
padding: $spacing-v-xs $spacing-h-sm;
min-width: 120px;
min-height: 40px;
color: $color-text-base;
overflow: hidden;
font-size: $font-size-base;
line-height: $line-height-zh;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #fff;
background-color: $color-bg;
overflow: hidden;
}

&__item + &__item {
@include border-thin-left(#6190E8);
@include border-thin-left($color: $color-brand, $width: 1PX);
}

&--disabled {
Expand Down
12 changes: 6 additions & 6 deletions src/components/tab-bar/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
display: flex;
width: 100%;
min-height: 50px;
padding: $spacing-v-sm 0;
padding: $spacing-v-sm 0 $spacing-v-xs;
text-align: center;
box-sizing: border-box;
justify-content: center;
Expand All @@ -15,16 +15,16 @@

&__item {
flex: 1;
font-size: $font-size-base;
padding: $spacing-v-xs;
color: $color-black-1;
padding: $spacing-v-sm $spacing-v-sm 0;
color: $color-text-base;
font-size: $font-size-xs;
}

&__title {
display: block;
max-width: 200px;
font-size: $font-size-base;
padding: $spacing-v-xs 0;
max-width: 200px;
font-size: $font-size-xs;
line-height: $line-height-base;
white-space: nowrap;
overflow: hidden;
Expand Down
10 changes: 5 additions & 5 deletions src/components/tabs/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
&__item {
position: relative;
flex: 1;
font-size: 30px;
padding: 20px;
padding: $spacing-v-lg $spacing-h-lg;
font-size: $font-size-base;
color: $color-text-base;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;

&::after {
content: '';
Expand All @@ -36,12 +36,12 @@

&__header {
position: relative;
background-color: $color-bg;
display: flex;
text-align: center;
width: 100%;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
background-color: $color-bg;
overflow: -moz-scrollbars-none;

&--scroll {
Expand Down
55 changes: 29 additions & 26 deletions src/components/timeline/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,47 @@
@import '../../style/theme/default.scss';

$timeline-margin-left: 40px;
$timeline-dot-size: 24px;

.at-timelineitem {
position: relative;
padding: 0 0 12px;
padding: 0 0 $spacing-v-sm;

&__content {
margin-left: $timeline-margin-left;
min-height: 56px;
color: $color-text-base;
font-size: $font-size-base;
color: $color-black-1;
line-height: $line-height-zh;
text-align: left;
margin-left: 36px;
height: 50px;
}

&__dot,
&__icon {
font-size: 0;
position: absolute;
left: 0;
top: 8px;
width: 36px;
height: 30px;
top: 5px;
width: 32px;
height: 32px;
font-size: 0;
text-align: left;
vertical-align: middle;
box-sizing: border-box;
background-color: #fff;
background-color: $color-bg;
z-index: 1;
text-align: left;
}

&__dot {
&::after {
content: '';
width: 20px;
height: 20px;
margin-top: 5px;
display: inline-block;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: 50%;
width: $timeline-dot-size;
height: $timeline-dot-size;
border: 1PX solid transparent;
border-radius: $border-radius-circle;
border-color: $color-info;
margin-top: 5px;
}

&.at-timelineitem__icon {
Expand All @@ -47,44 +52,42 @@
}

&__icon {
left: -5px;
// top: 7px;
left: -6px;
color: $color-info;
// padding-top: 2px;
}

&--green {
.at-timelineitem__icon {
color: #00D06D;
color: $color-success;
}

.at-timelineitem__dot {
&::after {
border-color: #00D06D;
border-color: $color-success;
}
}
}

&--red {
.at-timelineitem__icon {
color: #FF4849;
color: $color-error;
}

.at-timelineitem__dot {
&::after {
border-color: #FF4849;
border-color: $color-error;
}
}
}

&--yellow {
.at-timelineitem__icon {
color: #FFCA3E;
color: $color-warning;
}

.at-timelineitem__dot {
&::after {
border-color: #FFCA3E;
border-color: $color-warning;
}
}
}
Expand All @@ -93,8 +96,8 @@
position: absolute;
top: 20px;
bottom: -10px;
left: 8px;
border-left: 2px solid #ececec;
left: 10px;
border-left: 2px solid $color-border-lighter;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/pages/navigation/drawer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default class DrawerPage extends Taro.Component {
<View className='panel__title'>左边滑出</View>
<View className='panel__content no-padding'>
<View className='example'>
<AtButton onClick={this.leftDrawerClick.bind(this)}>显示drawer</AtButton>
<AtButton onClick={this.leftDrawerClick.bind(this)}>显示 Drawer</AtButton>
{this.state.leftDrawerShow && <AtDrawer show={this.state.leftDrawerShow} mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
</AtDrawer>}
</View>
Expand All @@ -70,7 +70,7 @@ export default class DrawerPage extends Taro.Component {
<View className='panel__title'>右边滑出</View>
<View className='panel__content no-padding'>
<View className='example'>
<AtButton onClick={this.rightDrawerClick.bind(this)}>显示drawer</AtButton>
<AtButton onClick={this.rightDrawerClick.bind(this)}>显示 Drawer</AtButton>
{this.state.rightDrawerShow && <AtDrawer show={this.state.rightDrawerShow} right mask onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}>
</AtDrawer>}
</View>
Expand Down
Loading

0 comments on commit 18a6e44

Please sign in to comment.