test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 19:17:54 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
liaoxuezhi 2019-10-24 14:06:35 +08:00
parent 4f72ba9079
commit 0b5db38285
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
scss/components/form/_form.scss
View File

@ -7,7 +7,7 @@
} }
&--inline { &--inline {
> .#{$ns}PlainField { >.#{$ns}PlainField {
display: inline-block; display: inline-block;
padding-top: $Form-input-paddingY; padding-top: $Form-input-paddingY;
// padding-bottom: $Form-input-paddingY; // padding-bottom: $Form-input-paddingY;
@ -20,8 +20,9 @@
margin-bottom: px2rem(5px); margin-bottom: px2rem(5px);
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
position: relative;
> span { >span {
position: relative; position: relative;
} }
} }
@ -30,9 +31,8 @@
color: $red; color: $red;
font-size: $fontSizeXs; font-size: $fontSizeXs;
position: absolute; position: absolute;
left: 100%; left: px2rem(-7px);
top: px2rem(5px); top: px2rem(4px);
margin-left: px2rem(3px);
line-height: 1; line-height: 1;
} }
@ -60,11 +60,11 @@
.#{$ns}Form-item { .#{$ns}Form-item {
margin-bottom: $Form-item-gap; margin-bottom: $Form-item-gap;
.#{$ns}Grid-form > &:last-child { .#{$ns}Grid-form>&:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.#{$ns}Form--inline > &--inline { .#{$ns}Form--inline>&--inline {
margin-bottom: $Form-item-gap/2; margin-bottom: $Form-item-gap/2;
margin-right: $Form-item-gap/2; margin-right: $Form-item-gap/2;
@ -80,18 +80,18 @@
} }
&--horizontal { &--horizontal {
> .#{$ns}Form-label { >.#{$ns}Form-label {
text-align: $Form--horizontal-label-align; text-align: $Form--horizontal-label-align;
} }
} }
&--normal { &--normal {
> .#{$ns}Form-label { >.#{$ns}Form-label {
display: block; display: block;
} }
} }
&.is-error > .#{$ns}Form-label { &.is-error>.#{$ns}Form-label {
color: $danger; color: $danger;
} }
} }
@ -136,13 +136,13 @@
margin-left: -$Form--horizontal-gutterWidth / 2; margin-left: -$Form--horizontal-gutterWidth / 2;
margin-right: -$Form--horizontal-gutterWidth / 2; margin-right: -$Form--horizontal-gutterWidth / 2;
> * { >* {
padding-left: $Form--horizontal-gutterWidth / 2; padding-left: $Form--horizontal-gutterWidth / 2;
padding-right: $Form--horizontal-gutterWidth / 2; padding-right: $Form--horizontal-gutterWidth / 2;
} }
> .#{$ns}Form-label, >.#{$ns}Form-label,
> .#{$ns}Form-value { >.#{$ns}Form-value {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100%;
@ -157,7 +157,7 @@
flex-basis: unset; flex-basis: unset;
} }
> .#{$ns}Form-label { >.#{$ns}Form-label {
padding-top: $Form-label-paddingTop; padding-top: $Form-label-paddingTop;
margin-bottom: 0; margin-bottom: 0;
} }
@ -195,7 +195,7 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
> .#{$ns}Form-label { >.#{$ns}Form-label {
padding-top: $Form-label-paddingTop; padding-top: $Form-label-paddingTop;
margin-bottom: 0; margin-bottom: 0;
margin-right: $Form-item-gap/2; margin-right: $Form-item-gap/2;
@ -205,19 +205,19 @@
} }
} }
> .#{$ns}Form-value { >.#{$ns}Form-value {
display: inline; display: inline;
> .#{$ns}Form-control { >.#{$ns}Form-control {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
} }
> .#{$ns}Form-control.#{$ns}InputGroup { >.#{$ns}Form-control.#{$ns}InputGroup {
display: inline-flex; display: inline-flex;
} }
> .#{$ns}TextControl--withAddOn { >.#{$ns}TextControl--withAddOn {
display: inline-flex; display: inline-flex;
} }
} }
@ -232,7 +232,7 @@
margin-right: -$Form-row-gutterWidth / 2; margin-right: -$Form-row-gutterWidth / 2;
align-items: flex-start; align-items: flex-start;
> * { >* {
padding-left: $Form-row-gutterWidth / 2; padding-left: $Form-row-gutterWidth / 2;
padding-right: $Form-row-gutterWidth / 2; padding-right: $Form-row-gutterWidth / 2;
} }
@ -248,14 +248,14 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
> .#{$ns}Form-label { >.#{$ns}Form-label {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding-top: $Form-label-paddingTop; padding-top: $Form-label-paddingTop;
padding-right: $Form-row-gutterWidth; padding-right: $Form-row-gutterWidth;
} }
> .#{$ns}Form-control { >.#{$ns}Form-control {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
} }

2
src/icons/upload.svg
View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463"> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
<g stroke="#666666" stroke-width="2" fill="none" fill-rule="evenodd"> <g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M8,12.2426 L8,1.2426"></path> <path d="M8,12.2426 L8,1.2426"></path>
<path d="M4.4648,4.9496 L8.7068,0.7076"></path> <path d="M4.4648,4.9496 L8.7068,0.7076"></path>
<path d="M11.5352,4.9496 L7.2932,0.7076"></path> <path d="M11.5352,4.9496 L7.2932,0.7076"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 534 B