Skip to content

Commit

Permalink
Merge pull request EC-CUBE#143 from yasui05821/issue139
Browse files Browse the repository at this point in the history 
Issue139　ファイルアップロードコンポーネント修正
  • Loading branch information
@mikakane
mikakane committed Jun 21, 2018
2 parents b38bf40 + d10e12c commit 9b678c4
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 26 deletions.
54 changes: 28 additions & 26 deletions assets/scss/component/_form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,23 @@ form.text-center.w-100.py-5.border-ec-dashed.mb-2.rounded
a(onclick="$('#fileForm').click()").btn.btn-ec-regular.mr-2 ファイルを選択
.c-form__fileUploadThumbnails
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/150x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/600x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
p 項目の内容はドラッグ＆ドロップで変更可能です。
Styleguide 9.0
Expand All @@ -50,39 +62,29 @@ p 項目の内容はドラッグ＆ドロップで変更可能です。
height:100%;
background: transparent;
}
&::after{
display: none;
content: "\f00d";
font-family: FontAwesome;
font-size: 18px;
line-height: 1;
color: #54687A;
padding: 5px;
background: #fff;
border-radius: 3px;
position: absolute;
top:2px;
right: 2px;
}
}
&ThumbnailClose {
display: none;
font-size: 18px;
line-height: 1;
color: #54687A;
padding: 5px;
background: #fff;
border-radius: 3px;
position: absolute;
top:2px;
right: 2px;
}
&Thumbnail:hover {
&::before{
background: rgba(0,0,0,0.5);
}

&::after{
.c-form__fileUploadThumbnailClose {
display: inline-block;
content: "\f00d";
font-family: FontAwesome;
font-size: 18px;
line-height: 1;
color: #54687A;
padding: 5px;
background: #fff;
border-radius: 3px;
position: absolute;
top:2px;
right: 2px;
&:hover {
opacity: .8;
}
}
}
}
12 changes: 12 additions & 0 deletions assets/tmpl/components/fileUpload.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,22 @@ mixin c-fileUpload
a(onclick="$('#fileForm').click()").btn.btn-ec-regular.mr-2 ファイルを選択
.c-form__fileUploadThumbnails
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/150x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/600x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x150')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
.c-form__fileUploadThumbnail(style="background-image:url('http://via.placeholder.com/350x600')")
a(tabindex="-1").c-form__fileUploadThumbnailClose
i.fa.fa-close
p 項目の内容はドラッグ＆ドロップで変更可能です。

0 comments on commit 9b678c4

Please sign in to comment.