Skip to content

Commit

Permalink
feat(module: styles): styles in sync with antd mobile of react (#376)
Browse files Browse the repository at this point in the history 
* feat(module: styles): styles in sync with antd mobile of react
  • Loading branch information
@fisherspy @Guoyuanqiang
fisherspy authored and Guoyuanqiang committed Apr 11, 2019
1 parent 97bf63e commit 0c4b966
Show file tree
Hide file tree
Showing 43 changed files with 303 additions and 252 deletions.
6 changes: 5 additions & 1 deletion components/accordion/style/addon.less
View file
Expand Up @@ -2,4 +2,8 @@

.@{accordionPrefixCls} {
display: block;
}
}

accordionpanel {
display: block;
}
4 changes: 0 additions & 4 deletions components/accordion/style/index.less
View file
Expand Up @@ -3,10 +3,6 @@

@accordionPrefixCls: am-accordion;

accordionpanel {
display: block;
}

.@{accordionPrefixCls} {
position: relative;
.hairline('top');
Expand Down
22 changes: 19 additions & 3 deletions components/action-sheet/style/index.less
View file
Expand Up @@ -43,19 +43,35 @@
height: @actionsheet-item-height;
line-height: @actionsheet-item-height;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
.hairline('top');
&&-active {
background-color: @fill-tap;
}
}

&-badge {
display: flex;
align-items: center;
justify-content: center;
.am-badge {
margin-left: 8 * @hd;
flex-shrink: 0;
}
}
&-item-content {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.@{ActionSheetPrefixCls}-cancel-button {
margin-top: @v-spacing-sm;
padding-top: @v-spacing-sm;
position: relative;

&-mask {
position: absolute;
top: -@v-spacing-sm;
top: 0;
left: 0;
width: 100%;
height: @v-spacing-sm;
Expand Down
4 changes: 2 additions & 2 deletions components/activity-indicator/style/index.less
View file
@@ -1,5 +1,5 @@
@import '../../style/mixins';
@import '../../style/themes/default';
@import '../../style/mixins';

@activityIndicatorPrefixCls: am-activity-indicator;

Expand Down Expand Up @@ -74,4 +74,4 @@
transform: rotate(360deg);
}
}
}
}
3 changes: 3 additions & 0 deletions components/button/style/index.less
View file
Expand Up @@ -89,6 +89,9 @@
&-inline {
display: inline-block;
padding: 0 @h-spacing-lg;
&.@{buttonPrefixCls}-icon {
display: inline-flex;
}
}

&-small {
Expand Down
1 change: 0 additions & 1 deletion components/calendar/style/index.less
View file
@@ -1,6 +1,5 @@
@import '../../style/mixins';
@import '../../style/themes/default';
//@import './common/index';
@prefixClass: am-calendar;

// Animation
Expand Down
25 changes: 25 additions & 0 deletions components/carousel/style/addon.less
View file
Expand Up @@ -2,6 +2,10 @@ dotindicator{
display: block;
}

carouselslide {
display: block;
}

.carousel {
position: relative;
display: block;
Expand Down Expand Up @@ -29,3 +33,24 @@ dotindicator{
transform: translate3d(0px, 0px, 0px);
box-sizing: border-box;
}

.carousel-container {
position: absolute;
display: inline-block;
list-style-type: none;
vertical-align: top;
height: auto;
box-sizing: border-box;
}

.carousel-slide {
background: white;
}

.dot-indicator {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
20 changes: 0 additions & 20 deletions components/carousel/style/carousel-slide.less
View file

This file was deleted.

4 changes: 0 additions & 4 deletions components/carousel/style/index.less
View file
@@ -1,10 +1,6 @@
@import '../../style/mixins';
@import '../../style/themes/default';

carouselslide {
display: block;
}

.am-carousel {
position: relative;

Expand Down
4 changes: 1 addition & 3 deletions components/components.less
View file
Expand Up @@ -12,7 +12,6 @@
@import "./calendar/style/addon.less";
@import "./card/style/index.less";
@import "./card/style/addon.less";
@import "./carousel/style/carousel-slide.less";
@import "./carousel/style/index.less";
@import "./carousel/style/addon.less";
@import "./checkbox/style/index.less";
Expand All @@ -29,7 +28,6 @@
@import "./image-picker/style/addon.less";
@import "./input-item/style/custom-keyboard.less";
@import "./input-item/style/index.less";
@import "./input-item/style/input-item.less";
@import "./input-item/style/addon.less";
@import "./list/style/index.less";
@import "./list/style/addon.less";
Expand All @@ -41,7 +39,6 @@
@import "./modal/style/addon.less";
@import "./nav-bar/style/index.less";
@import "./notice-bar/style/index.less";
@import "./notice-bar/style/notice-bar.less";
@import "./notice-bar/style/addon.less";
@import "./pagination/style/index.less";
@import "./pagination/style/addon.less";
Expand All @@ -52,6 +49,7 @@
@import "./picker-view/style/addon.less";
@import "./popover/style/base.less";
@import "./popover/style/index.less";
@import "./popover/style/addon.less";
@import "./progress/style/index.less";
@import "./progress/style/addon.less";
@import "./pull-to-refresh/style/index.less";
Expand Down
16 changes: 11 additions & 5 deletions components/flex/style/index.less
View file
Expand Up @@ -19,10 +19,16 @@

&&-dir-column {
flex-direction: column;
.@{flexPrefixCls}-item {
margin-left: 0;
}
}

&&-dir-column-reverse {
flex-direction: column-reverse;
.@{flexPrefixCls}-item {
margin-left: 0;
}
}

&&-nowrap {
Expand Down Expand Up @@ -82,23 +88,23 @@
}

&&-align-content-end {
align-items: flex-end;
align-content: flex-end;
}

&&-align-content-center {
align-items: center;
align-content: center;
}

&&-align-content-between {
align-items: stretch;
align-content: space-between;
}

&&-align-content-around {
align-items: baseline;
align-content: space-around;
}

&&-align-content-stretch {
align-items: baseline;
align-content: stretch;
}

& &-item {
Expand Down
24 changes: 10 additions & 14 deletions components/grid/style/index.less
View file
Expand Up @@ -27,7 +27,6 @@
width: 100%;
height: 100%;
padding: @v-spacing-lg 0;
box-sizing: content-box;

.@{gridPrefixCls}-item-inner-content {
display: flex;
Expand All @@ -38,16 +37,12 @@
.@{gridPrefixCls}-icon {
max-width: 100%;
}
.error {
color: red;
font-size: 24px;
}

.@{gridPrefixCls}-text {
margin-top: @v-spacing-md;
font-size: @font-size-caption-sm;
color: @color-text-base;
text-align: center;
line-height: 1;
}

&.column-num-3 {
Expand Down Expand Up @@ -80,19 +75,20 @@

.@{flexPrefixCls}-item {
position: relative;
// &:first-child {
// .hairline('left');
// }
&:first-child {
.hairline('left');
}
&:not(:last-child) {
.hairline('right');
}
}
}
}
&.@{gridPrefixCls}-carousel {
.@{gridPrefixCls}-carousel-page {
.hairline('top');
.hairline('right');

&.@{gridPrefixCls}-carousel {
.@{gridPrefixCls}-carousel-page {
.hairline('top');
.hairline('right');
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/icon/style/index.less
View file
@@ -1,5 +1,5 @@
@import '../../style/mixins';
@import '../../style/themes/default';
@import '../../style/mixins';

.am-icon {
fill: currentColor;
Expand Down
2 changes: 1 addition & 1 deletion components/image-picker/style/index.less
View file
@@ -1,5 +1,5 @@
@import '../../style/mixins';
@import '../../style/themes/default';
@import '../../style/mixins';

@imagePickerPrefixCls: am-image-picker;

Expand Down
48 changes: 48 additions & 0 deletions components/input-item/style/addon.less
View file
Expand Up @@ -9,3 +9,51 @@ customKeyboard,
customInput {
display: block;
}

.am-list-item.am-list-item-middle .am-list-line {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.am-list-item .am-list-line {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
padding-right: 15px;
overflow: hidden;
}

.am-list-item.am-input-item {
height: 44px;
padding-left: 15px;
}

.am-list-item {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-left: 15px;
min-height: 44px;
background-color: #fff;
vertical-align: middle;
overflow: hidden;
-webkit-transition: background-color 200ms;
transition: background-color 200ms;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
4 changes: 1 addition & 3 deletions components/input-item/style/custom-keyboard.less
View file
@@ -1,7 +1,6 @@
@import '../../style/themes/default';
@import '../../style/mixins';


@listPrefixCls: am-list;
@inputPrefixCls: am-input;
@keyboardPrefixCls: am-number-keyboard;
Expand Down Expand Up @@ -80,7 +79,6 @@
left: 0;
right: 0;
width: 100%;
height: 200 * @hd;
z-index: 10000;
font-family: 'PingFang SC';
background-color: #f6f6f7;
Expand Down Expand Up @@ -163,4 +161,4 @@
to {
opacity: 1;
}
}
}

1 comment on commit 0c4b966

@Guoyuanqiang
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

close #380

Please sign in to comment.