From d10e12c5798929e170e17989166db92e66bc0dc5 Mon Sep 17 00:00:00 2001 From: yasui05821 Date: Wed, 13 Jun 2018 16:26:30 +0900 Subject: [PATCH] =?UTF-8?q?issue=20#139=20=E5=89=8A=E9=99=A4=E3=83=9C?= =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E7=96=91=E4=BC=BC=E8=A6=81=E7=B4=A0?= =?UTF-8?q?=E3=81=8B=E3=82=89a=E3=82=BF=E3=82=B0=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/scss/component/_form.scss | 54 ++++++++++++++------------- assets/tmpl/components/fileUpload.pug | 12 ++++++ 2 files changed, 40 insertions(+), 26 deletions(-) diff --git a/assets/scss/component/_form.scss b/assets/scss/component/_form.scss index 5ed77c8..4860f89 100755 --- a/assets/scss/component/_form.scss +++ b/assets/scss/component/_form.scss @@ -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 @@ -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; + } } } } \ No newline at end of file diff --git a/assets/tmpl/components/fileUpload.pug b/assets/tmpl/components/fileUpload.pug index c285f28..f9c11ea 100644 --- a/assets/tmpl/components/fileUpload.pug +++ b/assets/tmpl/components/fileUpload.pug @@ -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 項目の内容はドラッグ＆ドロップで変更可能です。