Created
February 21, 2018 08:09
-
-
Save nanasess/24f48b53786e995f12cd60e00731bf52 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- ../Eccube-Styleguide/public/style.css 2017-09-01 09:56:10.000000000 +0900 | |
| +++ pscss.css 2018-02-21 17:07:18.000000000 +0900 | |
| @@ -1,5 +1,3 @@ | |
| -@charset "UTF-8"; | |
| -@import url(/node_modules/normalize.css/normalize.css); | |
| body { | |
| font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif; | |
| color: #525263; | |
| @@ -18,7 +16,6 @@ | |
| p { | |
| -webkit-margin-before: 0; | |
| -webkit-margin-after: 0; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -26,26 +23,19 @@ | |
| */ | |
| /* | |
| 見出し | |
| - | |
| ページ内で見出しとして機能する要素のスタイル群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 1.1 | |
| */ | |
| /* | |
| 見出し | |
| - | |
| 商品紹介等で利用される、一般的な見出しのスタイルです。 | |
| - | |
| ex [商品詳細ページ 商品見出し部分](http://demo3.ec-cube.net/products/detail/27) | |
| - | |
| Markup: | |
| .ec-headingTitle マトリョーシカ | |
| - | |
| Styleguide 1.1.1 | |
| */ | |
| .ec-headingTitle { | |
| @@ -53,18 +43,13 @@ | |
| font-size: 32px; | |
| font-weight: normal; | |
| color: #525263; } | |
| - | |
| /* | |
| ページヘッダ | |
| - | |
| 各種ページで用いられるページヘッダのデザインです。 | |
| - | |
| ex [利用規約ページ ページヘッダ部](http://demo3.ec-cube.net/help/agreement) | |
| - | |
| Markup: | |
| .ec-pageHeader | |
| h1 利用規約 | |
| - | |
| Styleguide 1.1.2 | |
| */ | |
| .ec-pageHeader h1 { | |
| @@ -82,32 +67,22 @@ | |
| padding: 8px; | |
| font-size: 32px; | |
| font-weight: bold; } } | |
| - | |
| /* | |
| サブ見出し | |
| - | |
| 利用規約など、文字主体のページで用いられるサブ見出しです。 | |
| - | |
| ex [利用規約ページ サブ見出し部分](http://demo3.ec-cube.net/help/agreement) | |
| - | |
| Markup: | |
| .ec-heading 第1条 (会員) | |
| - | |
| Styleguide 1.1.3 | |
| */ | |
| .ec-heading { | |
| margin: 24px 0; } | |
| - | |
| /* | |
| サブ見出し(太字) | |
| - | |
| 文字主体のページで用いられるサブ見出しの太字のスタイルです。 | |
| - | |
| ex [プライバシーポリシー サブ見出し部分](http://demo3.ec-cube.net/help/privacy) | |
| - | |
| Markup: | |
| .ec-heading-bold 個人情報の定義 | |
| - | |
| Styleguide 1.1.4 | |
| */ | |
| .ec-heading-bold { | |
| @@ -117,40 +92,29 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-heading-bold { | |
| font-size: 18px; } } | |
| - | |
| /* | |
| 背景付き見出し | |
| - | |
| マイページ注文履歴等で用いられる背景付きの見出しです。 | |
| - | |
| ex [ご注文履歴詳細 背景付き見出し部分](http://demo3.ec-cube.net/mypage/history/1063) | |
| - | |
| Markup: | |
| .ec-rectHeading | |
| h2 配送情報 | |
| .ec-rectHeading | |
| h2 お支払について | |
| - | |
| Styleguide 1.1.5 | |
| */ | |
| -.ec-rectHeading h1, .ec-rectHeading h2, .ec-rectHeading h3, | |
| -.ec-rectHeading h4, .ec-rectHeading h5, .ec-rectHeading h6 { | |
| - background: #F3F3F3; | |
| +.ec-rectHeading h1, .ec-rectHeading h2, .ec-rectHeading h3, .ec-rectHeading h4, .ec-rectHeading h5, .ec-rectHeading h6 { | |
| + background: #f3f3f3; | |
| padding: 8px 12px; | |
| font-size: 20px; | |
| font-weight: bold; } | |
| - | |
| /* | |
| メッセージ見出し | |
| - | |
| ユーザが行った操作に対する、完了報告やエラー表示のページで使用される見出しのスタイルです。 | |
| - | |
| ex [注文完了 ログイン後、カートに商品を入れ注文完了まで行う](http://demo3.ec-cube.net/shopping/) | |
| - | |
| Markup: | |
| .ec-reportHeading | |
| h2 ご注文ありがとうございました | |
| - | |
| Styleguide 1.1.6 | |
| */ | |
| .ec-reportHeading { | |
| @@ -165,15 +129,12 @@ | |
| .ec-reportHeading { | |
| border-top: 0; | |
| font-size: 32px; } } | |
| - .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3, | |
| - .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p { | |
| + .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3, .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p { | |
| font-weight: bold; | |
| font-size: 24px; } | |
| @media only screen and (min-width: 768px) { | |
| - .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3, | |
| - .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p { | |
| + .ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3, .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p { | |
| font-size: 32px; } } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -181,82 +142,61 @@ | |
| */ | |
| /* | |
| 文字装飾 | |
| - | |
| 文字装飾をするためのスタイル群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 1.2 | |
| */ | |
| /* | |
| テキストリンク | |
| - | |
| テキストリンクのスタイルです。 | |
| - | |
| Markup: | |
| a(href="#").ec-link さくらのクラウド | |
| - | |
| Styleguide 1.2.1 | |
| */ | |
| .ec-link { | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| .ec-link:hover { | |
| - color: #33A8D0; | |
| + color: #33a8d0; | |
| text-decoration: none; } | |
| - | |
| /* | |
| テキスト（太字） | |
| - | |
| テキストを太くするためのスタイルです。 | |
| - | |
| Markup: | |
| p.ec-font-bold この季節にぴったりな商品をご用意しました | |
| - | |
| Styleguide 1.2.2 | |
| */ | |
| .ec-font-bold { | |
| font-weight: bold; } | |
| - | |
| /* | |
| テキスト（グレー） | |
| - | |
| テキストをグレーにするためのスタイルです。 | |
| - | |
| Markup: | |
| p.ec-color-grey 青色が美しい職人が仕上げた吹きガラス | |
| - | |
| Styleguide 1.2.3 | |
| */ | |
| .ec-color-grey { | |
| color: #9a947e; } | |
| - | |
| /* | |
| テキスト（赤） | |
| - | |
| テキストを赤にするためのスタイルです。 | |
| - | |
| Markup: | |
| p.ec-color-red ¥ 2,728 税込 | |
| p.ec-color-accent ¥ 2,728 税込 | |
| - | |
| Styleguide 1.2.4 | |
| */ | |
| .ec-color-red { | |
| - color: #DE5D50; } | |
| + color: #de5d50; } | |
| .ec-color-accent { | |
| - color: #DE5D50; } | |
| - | |
| + color: #de5d50; } | |
| /* | |
| フォントサイズ | |
| - | |
| フォントサイズを指定するためのスタイルです。 | |
| - | |
| Markup: | |
| .ec-font-size-1 さわやかな日差しが過ごしやすい季節 | |
| .ec-font-size-2 さわやかな日差しが過ごしやすい季節 | |
| @@ -264,8 +204,6 @@ | |
| .ec-font-size-4 さわやかな日差しが過ごしやすい季節 | |
| .ec-font-size-5 さわやかな日差しが過ごしやすい季節 | |
| .ec-font-size-6 さわやかな日差しが過ごしやすい季節 | |
| - | |
| - | |
| Styleguide 1.2.5 | |
| */ | |
| .ec-font-size-1 { | |
| @@ -285,36 +223,26 @@ | |
| .ec-font-size-6 { | |
| font-size: 40px; } | |
| - | |
| /* | |
| テキスト水平位置 | |
| - | |
| テキストをセンタリングするためのスタイルです。 | |
| - | |
| Markup: | |
| p.ec-text-ac さわやかな日差しが過ごしやすい季節 | |
| - | |
| Styleguide 1.2.6 | |
| */ | |
| .ec-text-ac { | |
| text-align: center; } | |
| - | |
| /* | |
| 価格テキスト | |
| - | |
| 価格を表示するテキストです。 | |
| - | |
| 価格文字にスペースを取るほか、税込み等の表示を小さくする効果もあります。 | |
| - | |
| spanを用いたインライン要素として利用します。 | |
| - | |
| Markup: | |
| div(style="color:#DE5D50;font-size:28px") | |
| span.ec-price | |
| span.ec-price__unit ¥ | |
| span.ec-price__price 1,280 | |
| span.ec-price__tax 税込 | |
| - | |
| Styleguide 1.2.7 | |
| */ | |
| .ec-price .ec-price__unit { | |
| @@ -323,28 +251,23 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-price .ec-price__unit { | |
| font-size: 1em; } } | |
| - | |
| .ec-price .ec-price__price { | |
| display: inline-block; | |
| - padding: 0 .3em; | |
| + padding: 0 0.3em; | |
| font-size: 18px; | |
| font-weight: bold; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-price .ec-price__price { | |
| font-size: 1em; } } | |
| - | |
| .ec-price .ec-price__tax { | |
| font-size: 10px; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-price .ec-price__tax { | |
| font-size: 0.57em; } } | |
| - | |
| /* | |
| テキストの位置 | |
| - | |
| テキストや、入れ子にしたインライン要素を | |
| 「左揃え」「中央揃え」「右揃え」に設定することができます。 | |
| - | |
| Markup: | |
| h3 左揃え | |
| p.text-left | |
| @@ -357,7 +280,6 @@ | |
| h3 右揃え | |
| p.text-right | |
| | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos? | |
| - | |
| Styleguide 1.2.8 | |
| */ | |
| .text-left { | |
| @@ -368,14 +290,10 @@ | |
| .text-right { | |
| text-align: right; } | |
| - | |
| /* | |
| メッセージテキスト | |
| - | |
| ユーザが行った操作に対する、完了報告やエラー表示のページで使用されるテキストのスタイルです。 | |
| - | |
| ex [注文完了 （ログイン後、カートに商品を入れ注文完了まで行う）](http://demo3.ec-cube.net/shopping/) | |
| - | |
| Markup: | |
| .ec-reportHeading | |
| h2 ご注文ありがとうございました | |
| @@ -385,8 +303,6 @@ | |
| | 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| br | |
| | 今後ともご愛顧賜りますようよろしくお願い申し上げます。 | |
| - | |
| - | |
| Styleguide 1.2.9 | |
| */ | |
| .ec-reportDescription { | |
| @@ -394,23 +310,16 @@ | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 1.4; } | |
| - | |
| /* | |
| テキスト下部のスペース | |
| - | |
| テキストの下に余白を追加することができます。 .ec-para-nomalで16pxの余白をつけることができます。 | |
| - | |
| Markup: | |
| -p.para-big 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| -p.para-large 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| -p.para-small 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| -p.para-exsmall 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| - | |
| + p.ec-para-nomal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| + p.ec-para-nomal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。 | |
| Styleguide 1.2.10 | |
| */ | |
| .ec-para-nomal { | |
| margin-bottom: 16px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -418,25 +327,18 @@ | |
| */ | |
| /* | |
| リスト | |
| - | |
| シンプルなリストを構成するためのスタイル群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 1.3 | |
| */ | |
| /* | |
| 水平定義リスト | |
| - | |
| シンプルな定義リストのスタイルを定義します。 | |
| - | |
| dl要素を用いてコーディングします。 | |
| - | |
| ex [当サイトについて 水平定義リスト部分](http://demo3.ec-cube.net/help/about) | |
| - | |
| Markup: | |
| dl.ec-definitions | |
| dt 店名 | |
| @@ -447,7 +349,6 @@ | |
| dl.ec-definitions--soft | |
| dt 所在地 | |
| dd 〒 550-0001 | |
| - | |
| Styleguide 1.3.1 | |
| */ | |
| .ec-definitions, .ec-definitions--soft { | |
| @@ -461,16 +362,11 @@ | |
| .ec-definitions--soft dt { | |
| font-weight: normal; } | |
| - | |
| /* | |
| 下線つき定義リスト | |
| - | |
| 線が添えられた定義リストのスタイルを定義します。 | |
| - | |
| dl要素を用いてコーディングします。 | |
| - | |
| ex [当サイトについて 下線つき定義リスト](http://demo3.ec-cube.net/help/about) | |
| - | |
| Markup: | |
| .ec-borderedDefs | |
| dl | |
| @@ -482,7 +378,6 @@ | |
| dl | |
| dt 所在地 | |
| dd 〒550 - 0001 | |
| - | |
| Styleguide 1.3.2 | |
| */ | |
| .ec-borderedDefs { | |
| @@ -538,21 +433,15 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-list-chilled dd { | |
| padding: 16px; } } | |
| - | |
| /* | |
| ボーダーリスト | |
| - | |
| 線が添えられたリストを表示します。 | |
| - | |
| ex [当サイトについて ボーダーリスト](http://demo3.ec-cube.net/help/about) | |
| - | |
| Markup: | |
| ul.ec-borderedList | |
| li: p lorem | |
| li: p lorem | |
| li: p lorem | |
| - | |
| - | |
| Styleguide 1.3.3 | |
| */ | |
| .ec-borderedList { | |
| @@ -578,32 +467,24 @@ | |
| width: 30%; } | |
| .ec-list-chilled dd { | |
| padding: 16px; } | |
| - | |
| /* | |
| ボタンサイズ | |
| - | |
| ボタンサイズを変更するスタイル群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 2.1 | |
| */ | |
| /* | |
| 通常ボタン | |
| - | |
| インラインの要素としてボタンを定義出来ます。 | |
| - | |
| ex [トップページ ボタン部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| .ec-inlineBtn 住所検索 | |
| .ec-inlineBtn--primary もっと見る | |
| .ec-inlineBtn--action カートに入れる | |
| .ec-inlineBtn--cancel キャンセル | |
| - | |
| Styleguide 2.1.1 | |
| */ | |
| .ec-inlineBtn { | |
| @@ -619,7 +500,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -628,9 +509,9 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #525263; | |
| - background-color: #F5F7F8; | |
| + background-color: #f5f7f8; | |
| border-color: #ccc; } | |
| - .ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus { | |
| + .ec-inlineBtn:focus, .ec-inlineBtn:active:focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus { | |
| @@ -639,10 +520,9 @@ | |
| .ec-inlineBtn:active, .ec-inlineBtn.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-inlineBtn.disabled, .ec-inlineBtn[disabled], | |
| - fieldset[disabled] .ec-inlineBtn { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-inlineBtn.disabled, .ec-inlineBtn[disabled], fieldset[disabled] .ec-inlineBtn { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -656,29 +536,21 @@ | |
| color: #525263; | |
| background-color: #d7dfe3; | |
| border-color: #adadad; } | |
| - .ec-inlineBtn:active, .ec-inlineBtn.active, | |
| - .open > .ec-inlineBtn.dropdown-toggle { | |
| + .ec-inlineBtn:active, .ec-inlineBtn.active, .open > .ec-inlineBtn.dropdown-toggle { | |
| color: #525263; | |
| background-color: #d7dfe3; | |
| border-color: #adadad; } | |
| - .ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:hover, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus, | |
| - .open > .ec-inlineBtn.dropdown-toggle:hover, | |
| - .open > .ec-inlineBtn.dropdown-toggle:focus, | |
| - .open > .ec-inlineBtn.dropdown-toggle.focus { | |
| + .ec-inlineBtn:active:hover, .ec-inlineBtn.active:hover, .open > .ec-inlineBtn.dropdown-toggle:hover, .ec-inlineBtn:active:focus, .ec-inlineBtn.active:focus, .open > .ec-inlineBtn.dropdown-toggle:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active.focus, .open > .ec-inlineBtn.dropdown-toggle.focus { | |
| color: #525263; | |
| background-color: #c2ced4; | |
| border-color: #8c8c8c; } | |
| - .ec-inlineBtn:active, .ec-inlineBtn.active, | |
| - .open > .ec-inlineBtn.dropdown-toggle { | |
| + .ec-inlineBtn:active, .ec-inlineBtn.active, .open > .ec-inlineBtn.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-inlineBtn.disabled:hover, .ec-inlineBtn.disabled:focus, .ec-inlineBtn.disabled.focus, .ec-inlineBtn[disabled]:hover, .ec-inlineBtn[disabled]:focus, .ec-inlineBtn[disabled].focus, | |
| - fieldset[disabled] .ec-inlineBtn:hover, | |
| - fieldset[disabled] .ec-inlineBtn:focus, | |
| - fieldset[disabled] .ec-inlineBtn.focus { | |
| - background-color: #F5F7F8; | |
| + .ec-inlineBtn.disabled:hover, .ec-inlineBtn[disabled]:hover, fieldset[disabled] .ec-inlineBtn:hover, .ec-inlineBtn.disabled:focus, .ec-inlineBtn[disabled]:focus, fieldset[disabled] .ec-inlineBtn:focus, .ec-inlineBtn.disabled.focus, .ec-inlineBtn[disabled].focus, fieldset[disabled] .ec-inlineBtn.focus { | |
| + background-color: #f5f7f8; | |
| border-color: #ccc; } | |
| .ec-inlineBtn .badge { | |
| - color: #F5F7F8; | |
| + color: #f5f7f8; | |
| background-color: #525263; } | |
| .ec-inlineBtn .ec-icon img { | |
| width: 1em; | |
| @@ -697,7 +569,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -706,9 +578,9 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #fff; | |
| - background-color: #5CB1B1; | |
| - border-color: #5CB1B1; } | |
| - .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus { | |
| + background-color: #5cb1b1; | |
| + border-color: #5cb1b1; } | |
| + .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus { | |
| @@ -717,10 +589,9 @@ | |
| .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled], | |
| - fieldset[disabled] .ec-inlineBtn--primary { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled], fieldset[disabled] .ec-inlineBtn--primary { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -734,29 +605,21 @@ | |
| color: #fff; | |
| background-color: #479393; | |
| border-color: #438d8d; } | |
| - .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, | |
| - .open > .ec-inlineBtn--primary.dropdown-toggle { | |
| + .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, .open > .ec-inlineBtn--primary.dropdown-toggle { | |
| color: #fff; | |
| background-color: #479393; | |
| border-color: #438d8d; } | |
| - .ec-inlineBtn--primary:active:hover, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:hover, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus, | |
| - .open > .ec-inlineBtn--primary.dropdown-toggle:hover, | |
| - .open > .ec-inlineBtn--primary.dropdown-toggle:focus, | |
| - .open > .ec-inlineBtn--primary.dropdown-toggle.focus { | |
| + .ec-inlineBtn--primary:active:hover, .ec-inlineBtn--primary.active:hover, .open > .ec-inlineBtn--primary.dropdown-toggle:hover, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary.active:focus, .open > .ec-inlineBtn--primary.dropdown-toggle:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active.focus, .open > .ec-inlineBtn--primary.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #3b7b7b; | |
| border-color: #2e6060; } | |
| - .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, | |
| - .open > .ec-inlineBtn--primary.dropdown-toggle { | |
| + .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, .open > .ec-inlineBtn--primary.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-inlineBtn--primary.disabled:hover, .ec-inlineBtn--primary.disabled:focus, .ec-inlineBtn--primary.disabled.focus, .ec-inlineBtn--primary[disabled]:hover, .ec-inlineBtn--primary[disabled]:focus, .ec-inlineBtn--primary[disabled].focus, | |
| - fieldset[disabled] .ec-inlineBtn--primary:hover, | |
| - fieldset[disabled] .ec-inlineBtn--primary:focus, | |
| - fieldset[disabled] .ec-inlineBtn--primary.focus { | |
| - background-color: #5CB1B1; | |
| - border-color: #5CB1B1; } | |
| + .ec-inlineBtn--primary.disabled:hover, .ec-inlineBtn--primary[disabled]:hover, fieldset[disabled] .ec-inlineBtn--primary:hover, .ec-inlineBtn--primary.disabled:focus, .ec-inlineBtn--primary[disabled]:focus, fieldset[disabled] .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.disabled.focus, .ec-inlineBtn--primary[disabled].focus, fieldset[disabled] .ec-inlineBtn--primary.focus { | |
| + background-color: #5cb1b1; | |
| + border-color: #5cb1b1; } | |
| .ec-inlineBtn--primary .badge { | |
| - color: #5CB1B1; | |
| + color: #5cb1b1; | |
| background-color: #fff; } | |
| .ec-inlineBtn--primary .ec-icon img { | |
| width: 1em; | |
| @@ -775,7 +638,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -784,9 +647,9 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #fff; | |
| - background-color: #DE5D50; | |
| - border-color: #DE5D50; } | |
| - .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus { | |
| + background-color: #de5d50; | |
| + border-color: #de5d50; } | |
| + .ec-inlineBtn--action:focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-inlineBtn--action:hover, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus { | |
| @@ -795,10 +658,9 @@ | |
| .ec-inlineBtn--action:active, .ec-inlineBtn--action.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled], | |
| - fieldset[disabled] .ec-inlineBtn--action { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled], fieldset[disabled] .ec-inlineBtn--action { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -812,29 +674,21 @@ | |
| color: #fff; | |
| background-color: #d33828; | |
| border-color: #cb3526; } | |
| - .ec-inlineBtn--action:active, .ec-inlineBtn--action.active, | |
| - .open > .ec-inlineBtn--action.dropdown-toggle { | |
| + .ec-inlineBtn--action:active, .ec-inlineBtn--action.active, .open > .ec-inlineBtn--action.dropdown-toggle { | |
| color: #fff; | |
| background-color: #d33828; | |
| border-color: #cb3526; } | |
| - .ec-inlineBtn--action:active:hover, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:hover, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus, | |
| - .open > .ec-inlineBtn--action.dropdown-toggle:hover, | |
| - .open > .ec-inlineBtn--action.dropdown-toggle:focus, | |
| - .open > .ec-inlineBtn--action.dropdown-toggle.focus { | |
| + .ec-inlineBtn--action:active:hover, .ec-inlineBtn--action.active:hover, .open > .ec-inlineBtn--action.dropdown-toggle:hover, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action.active:focus, .open > .ec-inlineBtn--action.dropdown-toggle:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active.focus, .open > .ec-inlineBtn--action.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #b53022; | |
| border-color: #93271c; } | |
| - .ec-inlineBtn--action:active, .ec-inlineBtn--action.active, | |
| - .open > .ec-inlineBtn--action.dropdown-toggle { | |
| + .ec-inlineBtn--action:active, .ec-inlineBtn--action.active, .open > .ec-inlineBtn--action.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-inlineBtn--action.disabled:hover, .ec-inlineBtn--action.disabled:focus, .ec-inlineBtn--action.disabled.focus, .ec-inlineBtn--action[disabled]:hover, .ec-inlineBtn--action[disabled]:focus, .ec-inlineBtn--action[disabled].focus, | |
| - fieldset[disabled] .ec-inlineBtn--action:hover, | |
| - fieldset[disabled] .ec-inlineBtn--action:focus, | |
| - fieldset[disabled] .ec-inlineBtn--action.focus { | |
| - background-color: #DE5D50; | |
| - border-color: #DE5D50; } | |
| + .ec-inlineBtn--action.disabled:hover, .ec-inlineBtn--action[disabled]:hover, fieldset[disabled] .ec-inlineBtn--action:hover, .ec-inlineBtn--action.disabled:focus, .ec-inlineBtn--action[disabled]:focus, fieldset[disabled] .ec-inlineBtn--action:focus, .ec-inlineBtn--action.disabled.focus, .ec-inlineBtn--action[disabled].focus, fieldset[disabled] .ec-inlineBtn--action.focus { | |
| + background-color: #de5d50; | |
| + border-color: #de5d50; } | |
| .ec-inlineBtn--action .badge { | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| background-color: #fff; } | |
| .ec-inlineBtn--action .ec-icon img { | |
| width: 1em; | |
| @@ -853,7 +707,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -864,7 +718,7 @@ | |
| color: #fff; | |
| background-color: #525263; | |
| border-color: #525263; } | |
| - .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus { | |
| + .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus { | |
| @@ -873,10 +727,9 @@ | |
| .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled], | |
| - fieldset[disabled] .ec-inlineBtn--cancel { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled], fieldset[disabled] .ec-inlineBtn--cancel { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -890,25 +743,17 @@ | |
| color: #fff; | |
| background-color: #3b3b47; | |
| border-color: #363642; } | |
| - .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, | |
| - .open > .ec-inlineBtn--cancel.dropdown-toggle { | |
| + .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, .open > .ec-inlineBtn--cancel.dropdown-toggle { | |
| color: #fff; | |
| background-color: #3b3b47; | |
| border-color: #363642; } | |
| - .ec-inlineBtn--cancel:active:hover, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:hover, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus, | |
| - .open > .ec-inlineBtn--cancel.dropdown-toggle:hover, | |
| - .open > .ec-inlineBtn--cancel.dropdown-toggle:focus, | |
| - .open > .ec-inlineBtn--cancel.dropdown-toggle.focus { | |
| + .ec-inlineBtn--cancel:active:hover, .ec-inlineBtn--cancel.active:hover, .open > .ec-inlineBtn--cancel.dropdown-toggle:hover, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel.active:focus, .open > .ec-inlineBtn--cancel.dropdown-toggle:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active.focus, .open > .ec-inlineBtn--cancel.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #2b2b34; | |
| border-color: #18181d; } | |
| - .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, | |
| - .open > .ec-inlineBtn--cancel.dropdown-toggle { | |
| + .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, .open > .ec-inlineBtn--cancel.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-inlineBtn--cancel.disabled:hover, .ec-inlineBtn--cancel.disabled:focus, .ec-inlineBtn--cancel.disabled.focus, .ec-inlineBtn--cancel[disabled]:hover, .ec-inlineBtn--cancel[disabled]:focus, .ec-inlineBtn--cancel[disabled].focus, | |
| - fieldset[disabled] .ec-inlineBtn--cancel:hover, | |
| - fieldset[disabled] .ec-inlineBtn--cancel:focus, | |
| - fieldset[disabled] .ec-inlineBtn--cancel.focus { | |
| + .ec-inlineBtn--cancel.disabled:hover, .ec-inlineBtn--cancel[disabled]:hover, fieldset[disabled] .ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel.disabled:focus, .ec-inlineBtn--cancel[disabled]:focus, fieldset[disabled] .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.disabled.focus, .ec-inlineBtn--cancel[disabled].focus, fieldset[disabled] .ec-inlineBtn--cancel.focus { | |
| background-color: #525263; | |
| border-color: #525263; } | |
| .ec-inlineBtn--cancel .badge { | |
| @@ -917,20 +762,15 @@ | |
| .ec-inlineBtn--cancel .ec-icon img { | |
| width: 1em; | |
| vertical-align: text-bottom; } | |
| - | |
| /* | |
| ブロックボタン（全幅） | |
| - | |
| ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。 | |
| - | |
| ex [商品詳細ページ カートボタン部分](http://demo3.ec-cube.net/products/detail/30) | |
| - | |
| Markup: | |
| p: .ec-blockBtn 住所検索 | |
| p: .ec-blockBtn--primary もっと見る | |
| p: .ec-blockBtn--action カートに入れる | |
| p: .ec-blockBtn--cancel キャンセル | |
| - | |
| Styleguide 2.1.2 | |
| */ | |
| .ec-blockBtn { | |
| @@ -946,7 +786,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -955,7 +795,7 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #525263; | |
| - background-color: #F5F7F8; | |
| + background-color: #f5f7f8; | |
| border-color: #ccc; | |
| display: block; | |
| width: 100%; | |
| @@ -963,7 +803,7 @@ | |
| line-height: 56px; | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| - .ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus { | |
| + .ec-blockBtn:focus, .ec-blockBtn:active:focus, .ec-blockBtn.active:focus, .ec-blockBtn.focus, .ec-blockBtn:active.focus, .ec-blockBtn.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus { | |
| @@ -972,10 +812,9 @@ | |
| .ec-blockBtn:active, .ec-blockBtn.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-blockBtn.disabled, .ec-blockBtn[disabled], | |
| - fieldset[disabled] .ec-blockBtn { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-blockBtn.disabled, .ec-blockBtn[disabled], fieldset[disabled] .ec-blockBtn { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -989,29 +828,21 @@ | |
| color: #525263; | |
| background-color: #d7dfe3; | |
| border-color: #adadad; } | |
| - .ec-blockBtn:active, .ec-blockBtn.active, | |
| - .open > .ec-blockBtn.dropdown-toggle { | |
| + .ec-blockBtn:active, .ec-blockBtn.active, .open > .ec-blockBtn.dropdown-toggle { | |
| color: #525263; | |
| background-color: #d7dfe3; | |
| border-color: #adadad; } | |
| - .ec-blockBtn:active:hover, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:hover, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus, | |
| - .open > .ec-blockBtn.dropdown-toggle:hover, | |
| - .open > .ec-blockBtn.dropdown-toggle:focus, | |
| - .open > .ec-blockBtn.dropdown-toggle.focus { | |
| + .ec-blockBtn:active:hover, .ec-blockBtn.active:hover, .open > .ec-blockBtn.dropdown-toggle:hover, .ec-blockBtn:active:focus, .ec-blockBtn.active:focus, .open > .ec-blockBtn.dropdown-toggle:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active.focus, .open > .ec-blockBtn.dropdown-toggle.focus { | |
| color: #525263; | |
| background-color: #c2ced4; | |
| border-color: #8c8c8c; } | |
| - .ec-blockBtn:active, .ec-blockBtn.active, | |
| - .open > .ec-blockBtn.dropdown-toggle { | |
| + .ec-blockBtn:active, .ec-blockBtn.active, .open > .ec-blockBtn.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-blockBtn.disabled:hover, .ec-blockBtn.disabled:focus, .ec-blockBtn.disabled.focus, .ec-blockBtn[disabled]:hover, .ec-blockBtn[disabled]:focus, .ec-blockBtn[disabled].focus, | |
| - fieldset[disabled] .ec-blockBtn:hover, | |
| - fieldset[disabled] .ec-blockBtn:focus, | |
| - fieldset[disabled] .ec-blockBtn.focus { | |
| - background-color: #F5F7F8; | |
| + .ec-blockBtn.disabled:hover, .ec-blockBtn[disabled]:hover, fieldset[disabled] .ec-blockBtn:hover, .ec-blockBtn.disabled:focus, .ec-blockBtn[disabled]:focus, fieldset[disabled] .ec-blockBtn:focus, .ec-blockBtn.disabled.focus, .ec-blockBtn[disabled].focus, fieldset[disabled] .ec-blockBtn.focus { | |
| + background-color: #f5f7f8; | |
| border-color: #ccc; } | |
| .ec-blockBtn .badge { | |
| - color: #F5F7F8; | |
| + color: #f5f7f8; | |
| background-color: #525263; } | |
| .ec-blockBtn .ec-icon img { | |
| width: 1em; | |
| @@ -1030,7 +861,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -1039,15 +870,15 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #fff; | |
| - background-color: #5CB1B1; | |
| - border-color: #5CB1B1; | |
| + background-color: #5cb1b1; | |
| + border-color: #5cb1b1; | |
| display: block; | |
| width: 100%; | |
| height: 56px; | |
| line-height: 56px; | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| - .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus { | |
| + .ec-blockBtn--primary:focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus { | |
| @@ -1056,10 +887,9 @@ | |
| .ec-blockBtn--primary:active, .ec-blockBtn--primary.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled], | |
| - fieldset[disabled] .ec-blockBtn--primary { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled], fieldset[disabled] .ec-blockBtn--primary { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -1073,29 +903,21 @@ | |
| color: #fff; | |
| background-color: #479393; | |
| border-color: #438d8d; } | |
| - .ec-blockBtn--primary:active, .ec-blockBtn--primary.active, | |
| - .open > .ec-blockBtn--primary.dropdown-toggle { | |
| + .ec-blockBtn--primary:active, .ec-blockBtn--primary.active, .open > .ec-blockBtn--primary.dropdown-toggle { | |
| color: #fff; | |
| background-color: #479393; | |
| border-color: #438d8d; } | |
| - .ec-blockBtn--primary:active:hover, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:hover, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus, | |
| - .open > .ec-blockBtn--primary.dropdown-toggle:hover, | |
| - .open > .ec-blockBtn--primary.dropdown-toggle:focus, | |
| - .open > .ec-blockBtn--primary.dropdown-toggle.focus { | |
| + .ec-blockBtn--primary:active:hover, .ec-blockBtn--primary.active:hover, .open > .ec-blockBtn--primary.dropdown-toggle:hover, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary.active:focus, .open > .ec-blockBtn--primary.dropdown-toggle:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active.focus, .open > .ec-blockBtn--primary.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #3b7b7b; | |
| border-color: #2e6060; } | |
| - .ec-blockBtn--primary:active, .ec-blockBtn--primary.active, | |
| - .open > .ec-blockBtn--primary.dropdown-toggle { | |
| + .ec-blockBtn--primary:active, .ec-blockBtn--primary.active, .open > .ec-blockBtn--primary.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-blockBtn--primary.disabled:hover, .ec-blockBtn--primary.disabled:focus, .ec-blockBtn--primary.disabled.focus, .ec-blockBtn--primary[disabled]:hover, .ec-blockBtn--primary[disabled]:focus, .ec-blockBtn--primary[disabled].focus, | |
| - fieldset[disabled] .ec-blockBtn--primary:hover, | |
| - fieldset[disabled] .ec-blockBtn--primary:focus, | |
| - fieldset[disabled] .ec-blockBtn--primary.focus { | |
| - background-color: #5CB1B1; | |
| - border-color: #5CB1B1; } | |
| + .ec-blockBtn--primary.disabled:hover, .ec-blockBtn--primary[disabled]:hover, fieldset[disabled] .ec-blockBtn--primary:hover, .ec-blockBtn--primary.disabled:focus, .ec-blockBtn--primary[disabled]:focus, fieldset[disabled] .ec-blockBtn--primary:focus, .ec-blockBtn--primary.disabled.focus, .ec-blockBtn--primary[disabled].focus, fieldset[disabled] .ec-blockBtn--primary.focus { | |
| + background-color: #5cb1b1; | |
| + border-color: #5cb1b1; } | |
| .ec-blockBtn--primary .badge { | |
| - color: #5CB1B1; | |
| + color: #5cb1b1; | |
| background-color: #fff; } | |
| .ec-blockBtn--primary .ec-icon img { | |
| width: 1em; | |
| @@ -1114,7 +936,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -1123,15 +945,15 @@ | |
| padding: 10px 16px; | |
| text-decoration: none; | |
| color: #fff; | |
| - background-color: #DE5D50; | |
| - border-color: #DE5D50; | |
| + background-color: #de5d50; | |
| + border-color: #de5d50; | |
| display: block; | |
| width: 100%; | |
| height: 56px; | |
| line-height: 56px; | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| - .ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus { | |
| + .ec-blockBtn--action:focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus { | |
| @@ -1140,10 +962,9 @@ | |
| .ec-blockBtn--action:active, .ec-blockBtn--action.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled], | |
| - fieldset[disabled] .ec-blockBtn--action { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled], fieldset[disabled] .ec-blockBtn--action { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -1157,29 +978,21 @@ | |
| color: #fff; | |
| background-color: #d33828; | |
| border-color: #cb3526; } | |
| - .ec-blockBtn--action:active, .ec-blockBtn--action.active, | |
| - .open > .ec-blockBtn--action.dropdown-toggle { | |
| + .ec-blockBtn--action:active, .ec-blockBtn--action.active, .open > .ec-blockBtn--action.dropdown-toggle { | |
| color: #fff; | |
| background-color: #d33828; | |
| border-color: #cb3526; } | |
| - .ec-blockBtn--action:active:hover, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:hover, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus, | |
| - .open > .ec-blockBtn--action.dropdown-toggle:hover, | |
| - .open > .ec-blockBtn--action.dropdown-toggle:focus, | |
| - .open > .ec-blockBtn--action.dropdown-toggle.focus { | |
| + .ec-blockBtn--action:active:hover, .ec-blockBtn--action.active:hover, .open > .ec-blockBtn--action.dropdown-toggle:hover, .ec-blockBtn--action:active:focus, .ec-blockBtn--action.active:focus, .open > .ec-blockBtn--action.dropdown-toggle:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active.focus, .open > .ec-blockBtn--action.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #b53022; | |
| border-color: #93271c; } | |
| - .ec-blockBtn--action:active, .ec-blockBtn--action.active, | |
| - .open > .ec-blockBtn--action.dropdown-toggle { | |
| + .ec-blockBtn--action:active, .ec-blockBtn--action.active, .open > .ec-blockBtn--action.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-blockBtn--action.disabled:hover, .ec-blockBtn--action.disabled:focus, .ec-blockBtn--action.disabled.focus, .ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled].focus, | |
| - fieldset[disabled] .ec-blockBtn--action:hover, | |
| - fieldset[disabled] .ec-blockBtn--action:focus, | |
| - fieldset[disabled] .ec-blockBtn--action.focus { | |
| - background-color: #DE5D50; | |
| - border-color: #DE5D50; } | |
| + .ec-blockBtn--action.disabled:hover, .ec-blockBtn--action[disabled]:hover, fieldset[disabled] .ec-blockBtn--action:hover, .ec-blockBtn--action.disabled:focus, .ec-blockBtn--action[disabled]:focus, fieldset[disabled] .ec-blockBtn--action:focus, .ec-blockBtn--action.disabled.focus, .ec-blockBtn--action[disabled].focus, fieldset[disabled] .ec-blockBtn--action.focus { | |
| + background-color: #de5d50; | |
| + border-color: #de5d50; } | |
| .ec-blockBtn--action .badge { | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| background-color: #fff; } | |
| .ec-blockBtn--action .ec-icon img { | |
| width: 1em; | |
| @@ -1198,7 +1011,7 @@ | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| + line-height: 1.428571429; | |
| border-radius: 0px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| @@ -1215,7 +1028,7 @@ | |
| line-height: 56px; | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| - .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus { | |
| + .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active.focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| .ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus { | |
| @@ -1224,10 +1037,9 @@ | |
| .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active { | |
| outline: 0; | |
| background-image: none; | |
| - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } | |
| - .ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled], | |
| - fieldset[disabled] .ec-blockBtn--cancel { | |
| + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); | |
| + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } | |
| + .ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled], fieldset[disabled] .ec-blockBtn--cancel { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| @@ -1241,25 +1053,17 @@ | |
| color: #fff; | |
| background-color: #3b3b47; | |
| border-color: #363642; } | |
| - .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, | |
| - .open > .ec-blockBtn--cancel.dropdown-toggle { | |
| + .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, .open > .ec-blockBtn--cancel.dropdown-toggle { | |
| color: #fff; | |
| background-color: #3b3b47; | |
| border-color: #363642; } | |
| - .ec-blockBtn--cancel:active:hover, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:hover, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus, | |
| - .open > .ec-blockBtn--cancel.dropdown-toggle:hover, | |
| - .open > .ec-blockBtn--cancel.dropdown-toggle:focus, | |
| - .open > .ec-blockBtn--cancel.dropdown-toggle.focus { | |
| + .ec-blockBtn--cancel:active:hover, .ec-blockBtn--cancel.active:hover, .open > .ec-blockBtn--cancel.dropdown-toggle:hover, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel.active:focus, .open > .ec-blockBtn--cancel.dropdown-toggle:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active.focus, .open > .ec-blockBtn--cancel.dropdown-toggle.focus { | |
| color: #fff; | |
| background-color: #2b2b34; | |
| border-color: #18181d; } | |
| - .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, | |
| - .open > .ec-blockBtn--cancel.dropdown-toggle { | |
| + .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, .open > .ec-blockBtn--cancel.dropdown-toggle { | |
| background-image: none; } | |
| - .ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled]:hover, .ec-blockBtn--cancel[disabled]:focus, .ec-blockBtn--cancel[disabled].focus, | |
| - fieldset[disabled] .ec-blockBtn--cancel:hover, | |
| - fieldset[disabled] .ec-blockBtn--cancel:focus, | |
| - fieldset[disabled] .ec-blockBtn--cancel.focus { | |
| + .ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel[disabled]:hover, fieldset[disabled] .ec-blockBtn--cancel:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel[disabled]:focus, fieldset[disabled] .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled].focus, fieldset[disabled] .ec-blockBtn--cancel.focus { | |
| background-color: #525263; | |
| border-color: #525263; } | |
| .ec-blockBtn--cancel .badge { | |
| @@ -1268,30 +1072,22 @@ | |
| .ec-blockBtn--cancel .ec-icon img { | |
| width: 1em; | |
| vertical-align: text-bottom; } | |
| - | |
| /* | |
| アイコンボタン | |
| - | |
| SVGアイコンを用いたアイコンボタンです。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| Styleguide 2.2 | |
| */ | |
| /* | |
| アイコンボタン | |
| - | |
| 閉じるなどSVGアイコンを用いたボタン装飾で利用します。 | |
| - | |
| ex [ログイン画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/login) | |
| - | |
| Markup: | |
| a.ec-closeBtn | |
| .ec-icon | |
| img(src='/moc/icon/cross.svg', alt='close') | |
| - | |
| Styleguide 2.2.1 | |
| */ | |
| .ec-closeBtn { | |
| @@ -1304,23 +1100,15 @@ | |
| position: relative; | |
| top: -1px; | |
| vertical-align: middle; } | |
| - | |
| /* | |
| アイコンボタン(○) | |
| - | |
| 閉じるなどSVGアイコンを用いたボタン装飾で利用します。 | |
| - | |
| ex [ログイン画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/login) | |
| - | |
| - | |
| - | |
| ex [お届け先編集画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/delivery) | |
| - | |
| Markup: | |
| a.ec-closeBtn--circle | |
| .ec-icon | |
| img(src='/moc/icon/cross-white.svg', alt='close') | |
| - | |
| Styleguide 2.2.2 | |
| */ | |
| .ec-closeBtn--circle { | |
| @@ -1331,7 +1119,7 @@ | |
| text-shadow: none; | |
| box-shadow: none; | |
| border-radius: 50%; | |
| - background: #B8BEC4; | |
| + background: #b8bec4; | |
| cursor: pointer; | |
| width: 40px; | |
| min-width: 40px; | |
| @@ -1343,36 +1131,33 @@ | |
| text-align: center; } | |
| .ec-closeBtn--circle .ec-icon img { | |
| display: block; | |
| - margin-top: -.5em; | |
| - margin-left: -.5em; | |
| + margin-top: -0.5em; | |
| + margin-left: -0.5em; | |
| width: 1em; | |
| height: 1em; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; } | |
| - | |
| +/** | |
| + メディアクエリ | |
| + SP フォーストで記述する。 | |
| + Twitter Bootstrap デフォルト準拠 | |
| + */ | |
| /* | |
| その他のボタン | |
| - | |
| 通常のボタンや、アイコンボタン以外のボタンを定義します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 2.3 | |
| */ | |
| /* | |
| ページトップボタン | |
| - | |
| ページトップボタンを表示します | |
| - | |
| ex [商品詳細ページ カートボタン部分](http://demo3.ec-cube.net/products/detail/30) | |
| - | |
| Markup: | |
| .ec-blockTopBtn | |
| - | |
| Styleguide 2.3.1 | |
| */ | |
| .ec-blockTopBtn { | |
| @@ -1382,7 +1167,7 @@ | |
| right: 0; | |
| bottom: 10px; | |
| cursor: pointer; | |
| - color: #FFFFFF; | |
| + color: #fff; | |
| text-align: center; | |
| line-height: 40px; | |
| opacity: 0.8; | |
| @@ -1393,7 +1178,6 @@ | |
| bottom: 30px; } } | |
| .ec-blockTopBtn:after { | |
| content: "ページトップへ"; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -1401,68 +1185,49 @@ | |
| */ | |
| /* | |
| フォーム部品(テキスト) | |
| - | |
| テキストや数値の入力項目に関する要素を定義します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 3.1 | |
| */ | |
| /* | |
| フォーム | |
| - | |
| `.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。 | |
| - | |
| - | |
| ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| p.ec-input | |
| input(type="number") | |
| p.ec-input | |
| textarea(rows="6") | |
| - | |
| Styleguide 3.1.1 | |
| */ | |
| .ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - | |
| -.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"], | |
| -.ec-input input[type="checkbox"], .ec-halfInput input[type="checkbox"], .ec-numberInput input[type="checkbox"], .ec-zipInput input[type="checkbox"], .ec-telInput input[type="checkbox"], .ec-select input[type="checkbox"], .ec-birth input[type="checkbox"] { | |
| + .ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"], .ec-input input[type="checkbox"], .ec-halfInput input[type="checkbox"], .ec-numberInput input[type="checkbox"], .ec-zipInput input[type="checkbox"], .ec-telInput input[type="checkbox"], .ec-select input[type="checkbox"], .ec-birth input[type="checkbox"] { | |
| margin: 4px 0 0; | |
| margin-top: 1px \9; | |
| line-height: normal; } | |
| - | |
| .ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] { | |
| display: block; } | |
| - | |
| .ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] { | |
| display: block; | |
| width: 100%; } | |
| - | |
| -.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple], | |
| -.ec-input select[size], .ec-halfInput select[size], .ec-numberInput select[size], .ec-zipInput select[size], .ec-telInput select[size], .ec-select select[size], .ec-birth select[size] { | |
| + .ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple], .ec-input select[size], .ec-halfInput select[size], .ec-numberInput select[size], .ec-zipInput select[size], .ec-telInput select[size], .ec-select select[size], .ec-birth select[size] { | |
| height: auto; } | |
| - | |
| -.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus, | |
| -.ec-input input[type="radio"]:focus, .ec-halfInput input[type="radio"]:focus, .ec-numberInput input[type="radio"]:focus, .ec-zipInput input[type="radio"]:focus, .ec-telInput input[type="radio"]:focus, .ec-select input[type="radio"]:focus, .ec-birth input[type="radio"]:focus, | |
| -.ec-input input[type="checkbox"]:focus, .ec-halfInput input[type="checkbox"]:focus, .ec-numberInput input[type="checkbox"]:focus, .ec-zipInput input[type="checkbox"]:focus, .ec-telInput input[type="checkbox"]:focus, .ec-select input[type="checkbox"]:focus, .ec-birth input[type="checkbox"]:focus { | |
| + .ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus, .ec-input input[type="radio"]:focus, .ec-halfInput input[type="radio"]:focus, .ec-numberInput input[type="radio"]:focus, .ec-zipInput input[type="radio"]:focus, .ec-telInput input[type="radio"]:focus, .ec-select input[type="radio"]:focus, .ec-birth input[type="radio"]:focus, .ec-input input[type="checkbox"]:focus, .ec-halfInput input[type="checkbox"]:focus, .ec-numberInput input[type="checkbox"]:focus, .ec-zipInput input[type="checkbox"]:focus, .ec-telInput input[type="checkbox"]:focus, .ec-select input[type="checkbox"]:focus, .ec-birth input[type="checkbox"]:focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| - | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1477,8 +1242,8 @@ | |
| .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -1489,34 +1254,19 @@ | |
| .ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], | |
| - fieldset[disabled] .ec-input input, | |
| - fieldset[disabled] .ec-halfInput input, | |
| - fieldset[disabled] .ec-numberInput input, | |
| - fieldset[disabled] .ec-zipInput input, | |
| - fieldset[disabled] .ec-telInput input, | |
| - fieldset[disabled] .ec-select input, | |
| - fieldset[disabled] .ec-birth input { | |
| - background-color: #eeeeee; | |
| + .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], | |
| - fieldset[disabled] .ec-input input, | |
| - fieldset[disabled] .ec-halfInput input, | |
| - fieldset[disabled] .ec-numberInput input, | |
| - fieldset[disabled] .ec-zipInput input, | |
| - fieldset[disabled] .ec-telInput input, | |
| - fieldset[disabled] .ec-select input, | |
| - fieldset[disabled] .ec-birth input { | |
| + .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1531,8 +1281,8 @@ | |
| .ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -1543,34 +1293,19 @@ | |
| .ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], | |
| - fieldset[disabled] .ec-input select, | |
| - fieldset[disabled] .ec-halfInput select, | |
| - fieldset[disabled] .ec-numberInput select, | |
| - fieldset[disabled] .ec-zipInput select, | |
| - fieldset[disabled] .ec-telInput select, | |
| - fieldset[disabled] .ec-select select, | |
| - fieldset[disabled] .ec-birth select { | |
| - background-color: #eeeeee; | |
| + .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], | |
| - fieldset[disabled] .ec-input select, | |
| - fieldset[disabled] .ec-halfInput select, | |
| - fieldset[disabled] .ec-numberInput select, | |
| - fieldset[disabled] .ec-zipInput select, | |
| - fieldset[disabled] .ec-telInput select, | |
| - fieldset[disabled] .ec-select select, | |
| - fieldset[disabled] .ec-birth select { | |
| + .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1585,8 +1320,8 @@ | |
| .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -1597,30 +1332,14 @@ | |
| .ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], | |
| - fieldset[disabled] .ec-input textarea, | |
| - fieldset[disabled] .ec-halfInput textarea, | |
| - fieldset[disabled] .ec-numberInput textarea, | |
| - fieldset[disabled] .ec-zipInput textarea, | |
| - fieldset[disabled] .ec-telInput textarea, | |
| - fieldset[disabled] .ec-select textarea, | |
| - fieldset[disabled] .ec-birth textarea { | |
| - background-color: #eeeeee; | |
| + .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], | |
| - fieldset[disabled] .ec-input textarea, | |
| - fieldset[disabled] .ec-halfInput textarea, | |
| - fieldset[disabled] .ec-numberInput textarea, | |
| - fieldset[disabled] .ec-zipInput textarea, | |
| - fieldset[disabled] .ec-telInput textarea, | |
| - fieldset[disabled] .ec-select textarea, | |
| - fieldset[disabled] .ec-birth textarea { | |
| + .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus { | |
| box-shadow: none; | |
| border-color: #3c8dbc; } | |
| - | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| height: 40px; | |
| font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif; | |
| @@ -1628,37 +1347,32 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| margin-bottom: 16px; } } | |
| - | |
| + .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea { | |
| + height: auto; | |
| + min-height: 100px; } | |
| .ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p { | |
| line-height: 1.4; } | |
| - | |
| .ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage { | |
| margin-bottom: 25px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| - color: #DE5D50; } | |
| + color: #de5d50; } | |
| -.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select { | |
| +.error.ec-input input, .ec-halfInput.error input, .ec-numberInput.error input, .ec-zipInput.error input, .ec-telInput.error input, .ec-select.error input, .ec-birth.error input, .error.ec-input select, .ec-halfInput.error select, .ec-numberInput.error select, .ec-zipInput.error select, .ec-telInput.error select, .ec-select.error select, .ec-birth.error select { | |
| margin-bottom: 5px; | |
| - border-color: #CF3F34; | |
| - background: #FDF1F0; } | |
| - | |
| + border-color: #cf3f34; | |
| + background: #fdf1f0; } | |
| /* | |
| フォーム（text２つ） | |
| - | |
| 姓名など2つ入力させたい入力項目で使用します。 | |
| - | |
| 入力フォームを半分で用意したいときにも利用可能です。 | |
| - | |
| ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| p.ec-halfInput | |
| input(type="text") | |
| input(type="text") | |
| p.ec-halfInput | |
| input(type="text") | |
| - | |
| Styleguide 3.1.2 | |
| */ | |
| .ec-halfInput input[type='text'] { | |
| @@ -1669,24 +1383,17 @@ | |
| .ec-halfInput input[type='text'] { | |
| margin-left: 15px; | |
| width: 45%; } } | |
| - | |
| .ec-halfInput input[type='text']:first-child { | |
| margin-left: 0; } | |
| - | |
| /* | |
| 数量ボタン | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 数値表示に最適化するため、数字は右端揃えで表示されます。 | |
| - | |
| ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27) | |
| - | |
| Markup: | |
| .ec-numberInput | |
| span 数量 | |
| input(type="number",value="0") | |
| - | |
| Styleguide 3.1.3 | |
| */ | |
| .ec-numberInput input[type='number'] { | |
| @@ -1694,16 +1401,11 @@ | |
| width: auto; | |
| max-width: 100px; | |
| text-align: right; } | |
| - | |
| /* | |
| 郵便番号フォーム | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 内部に input 要素を配置してコーディングします。 | |
| - | |
| ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| .ec-zipInput | |
| span 〒 | |
| @@ -1718,7 +1420,6 @@ | |
| span 郵便番号検索 | |
| .ec-zipAuto | |
| a.ec-inlineBtn 郵便番号から自動入力 | |
| - | |
| Styleguide 3.1.4 | |
| */ | |
| .ec-zipInput { | |
| @@ -1762,23 +1463,18 @@ | |
| .ec-zipInputHelp span { | |
| margin-left: 8px; | |
| display: inline-block; | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| vertical-align: 3px; } | |
| .ec-zipAuto { | |
| margin-bottom: 16px; } | |
| .ec-zipAuto .ec-inlineBtn { | |
| font-weight: normal; } | |
| - | |
| /* | |
| 電話番号ボタン | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 内部に input 要素を配置してコーディングします。 | |
| - | |
| ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| .ec-telInput | |
| input(type="text") | |
| @@ -1786,7 +1482,6 @@ | |
| input(type="text") | |
| span - | |
| input(type="text") | |
| - | |
| Styleguide 3.1.5 | |
| */ | |
| .ec-telInput input { | |
| @@ -1795,12 +1490,10 @@ | |
| font-size: 16px; | |
| text-align: right; | |
| max-width: 5em; } | |
| - | |
| .ec-telInput span { | |
| display: inline-block; | |
| padding: 0 5px 0 3px; | |
| margin-left: 5px; } | |
| - | |
| /** | |
| * ECCUBE 固有のスタイルユーティリティ | |
| */ | |
| @@ -1811,68 +1504,49 @@ | |
| */ | |
| /* | |
| フォーム部品(テキスト) | |
| - | |
| テキストや数値の入力項目に関する要素を定義します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 3.1 | |
| */ | |
| /* | |
| フォーム | |
| - | |
| `.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。 | |
| - | |
| - | |
| ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| p.ec-input | |
| input(type="number") | |
| p.ec-input | |
| textarea(rows="6") | |
| - | |
| Styleguide 3.1.1 | |
| */ | |
| .ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - | |
| -.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"], | |
| -.ec-input input[type="checkbox"], .ec-halfInput input[type="checkbox"], .ec-numberInput input[type="checkbox"], .ec-zipInput input[type="checkbox"], .ec-telInput input[type="checkbox"], .ec-select input[type="checkbox"], .ec-birth input[type="checkbox"] { | |
| + .ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"], .ec-input input[type="checkbox"], .ec-halfInput input[type="checkbox"], .ec-numberInput input[type="checkbox"], .ec-zipInput input[type="checkbox"], .ec-telInput input[type="checkbox"], .ec-select input[type="checkbox"], .ec-birth input[type="checkbox"] { | |
| margin: 4px 0 0; | |
| margin-top: 1px \9; | |
| line-height: normal; } | |
| - | |
| .ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] { | |
| display: block; } | |
| - | |
| .ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] { | |
| display: block; | |
| width: 100%; } | |
| - | |
| -.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple], | |
| -.ec-input select[size], .ec-halfInput select[size], .ec-numberInput select[size], .ec-zipInput select[size], .ec-telInput select[size], .ec-select select[size], .ec-birth select[size] { | |
| + .ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple], .ec-input select[size], .ec-halfInput select[size], .ec-numberInput select[size], .ec-zipInput select[size], .ec-telInput select[size], .ec-select select[size], .ec-birth select[size] { | |
| height: auto; } | |
| - | |
| -.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus, | |
| -.ec-input input[type="radio"]:focus, .ec-halfInput input[type="radio"]:focus, .ec-numberInput input[type="radio"]:focus, .ec-zipInput input[type="radio"]:focus, .ec-telInput input[type="radio"]:focus, .ec-select input[type="radio"]:focus, .ec-birth input[type="radio"]:focus, | |
| -.ec-input input[type="checkbox"]:focus, .ec-halfInput input[type="checkbox"]:focus, .ec-numberInput input[type="checkbox"]:focus, .ec-zipInput input[type="checkbox"]:focus, .ec-telInput input[type="checkbox"]:focus, .ec-select input[type="checkbox"]:focus, .ec-birth input[type="checkbox"]:focus { | |
| + .ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus, .ec-input input[type="radio"]:focus, .ec-halfInput input[type="radio"]:focus, .ec-numberInput input[type="radio"]:focus, .ec-zipInput input[type="radio"]:focus, .ec-telInput input[type="radio"]:focus, .ec-select input[type="radio"]:focus, .ec-birth input[type="radio"]:focus, .ec-input input[type="checkbox"]:focus, .ec-halfInput input[type="checkbox"]:focus, .ec-numberInput input[type="checkbox"]:focus, .ec-zipInput input[type="checkbox"]:focus, .ec-telInput input[type="checkbox"]:focus, .ec-select input[type="checkbox"]:focus, .ec-birth input[type="checkbox"]:focus { | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; } | |
| - | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1887,8 +1561,8 @@ | |
| .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -1899,34 +1573,19 @@ | |
| .ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], | |
| - fieldset[disabled] .ec-input input, | |
| - fieldset[disabled] .ec-halfInput input, | |
| - fieldset[disabled] .ec-numberInput input, | |
| - fieldset[disabled] .ec-zipInput input, | |
| - fieldset[disabled] .ec-telInput input, | |
| - fieldset[disabled] .ec-select input, | |
| - fieldset[disabled] .ec-birth input { | |
| - background-color: #eeeeee; | |
| + .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], | |
| - fieldset[disabled] .ec-input input, | |
| - fieldset[disabled] .ec-halfInput input, | |
| - fieldset[disabled] .ec-numberInput input, | |
| - fieldset[disabled] .ec-zipInput input, | |
| - fieldset[disabled] .ec-telInput input, | |
| - fieldset[disabled] .ec-select input, | |
| - fieldset[disabled] .ec-birth input { | |
| + .ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1941,8 +1600,8 @@ | |
| .ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -1953,34 +1612,19 @@ | |
| .ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], | |
| - fieldset[disabled] .ec-input select, | |
| - fieldset[disabled] .ec-halfInput select, | |
| - fieldset[disabled] .ec-numberInput select, | |
| - fieldset[disabled] .ec-zipInput select, | |
| - fieldset[disabled] .ec-telInput select, | |
| - fieldset[disabled] .ec-select select, | |
| - fieldset[disabled] .ec-birth select { | |
| - background-color: #eeeeee; | |
| + .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], | |
| - fieldset[disabled] .ec-input select, | |
| - fieldset[disabled] .ec-halfInput select, | |
| - fieldset[disabled] .ec-numberInput select, | |
| - fieldset[disabled] .ec-zipInput select, | |
| - fieldset[disabled] .ec-telInput select, | |
| - fieldset[disabled] .ec-select select, | |
| - fieldset[disabled] .ec-birth select { | |
| + .ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea { | |
| display: block; | |
| width: 100%; | |
| height: 34px; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| - line-height: 1.42857; | |
| - color: #555555; | |
| + line-height: 1.428571429; | |
| + color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| @@ -1995,8 +1639,8 @@ | |
| .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus { | |
| border-color: #66afe9; | |
| outline: 0; | |
| - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); | |
| - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } | |
| + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); | |
| + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } | |
| .ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder { | |
| color: #999; | |
| opacity: 1; } | |
| @@ -2007,30 +1651,14 @@ | |
| .ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand { | |
| border: 0; | |
| background-color: transparent; } | |
| - .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], | |
| - fieldset[disabled] .ec-input textarea, | |
| - fieldset[disabled] .ec-halfInput textarea, | |
| - fieldset[disabled] .ec-numberInput textarea, | |
| - fieldset[disabled] .ec-zipInput textarea, | |
| - fieldset[disabled] .ec-telInput textarea, | |
| - fieldset[disabled] .ec-select textarea, | |
| - fieldset[disabled] .ec-birth textarea { | |
| - background-color: #eeeeee; | |
| + .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea { | |
| + background-color: #eee; | |
| opacity: 1; } | |
| - .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], | |
| - fieldset[disabled] .ec-input textarea, | |
| - fieldset[disabled] .ec-halfInput textarea, | |
| - fieldset[disabled] .ec-numberInput textarea, | |
| - fieldset[disabled] .ec-zipInput textarea, | |
| - fieldset[disabled] .ec-telInput textarea, | |
| - fieldset[disabled] .ec-select textarea, | |
| - fieldset[disabled] .ec-birth textarea { | |
| + .ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea { | |
| cursor: not-allowed; } | |
| - | |
| .ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus { | |
| box-shadow: none; | |
| border-color: #3c8dbc; } | |
| - | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| height: 40px; | |
| font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif; | |
| @@ -2038,37 +1666,32 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input { | |
| margin-bottom: 16px; } } | |
| - | |
| + .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea { | |
| + height: auto; | |
| + min-height: 100px; } | |
| .ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p { | |
| line-height: 1.4; } | |
| - | |
| .ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage { | |
| margin-bottom: 25px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| - color: #DE5D50; } | |
| + color: #de5d50; } | |
| -.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select { | |
| +.error.ec-input input, .ec-halfInput.error input, .ec-numberInput.error input, .ec-zipInput.error input, .ec-telInput.error input, .ec-select.error input, .ec-birth.error input, .error.ec-input select, .ec-halfInput.error select, .ec-numberInput.error select, .ec-zipInput.error select, .ec-telInput.error select, .ec-select.error select, .ec-birth.error select { | |
| margin-bottom: 5px; | |
| - border-color: #CF3F34; | |
| - background: #FDF1F0; } | |
| - | |
| + border-color: #cf3f34; | |
| + background: #fdf1f0; } | |
| /* | |
| フォーム（text２つ） | |
| - | |
| 姓名など2つ入力させたい入力項目で使用します。 | |
| - | |
| 入力フォームを半分で用意したいときにも利用可能です。 | |
| - | |
| ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| p.ec-halfInput | |
| input(type="text") | |
| input(type="text") | |
| p.ec-halfInput | |
| input(type="text") | |
| - | |
| Styleguide 3.1.2 | |
| */ | |
| .ec-halfInput input[type='text'] { | |
| @@ -2079,24 +1702,17 @@ | |
| .ec-halfInput input[type='text'] { | |
| margin-left: 15px; | |
| width: 45%; } } | |
| - | |
| .ec-halfInput input[type='text']:first-child { | |
| margin-left: 0; } | |
| - | |
| /* | |
| 数量ボタン | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 数値表示に最適化するため、数字は右端揃えで表示されます。 | |
| - | |
| ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27) | |
| - | |
| Markup: | |
| .ec-numberInput | |
| span 数量 | |
| input(type="number",value="0") | |
| - | |
| Styleguide 3.1.3 | |
| */ | |
| .ec-numberInput input[type='number'] { | |
| @@ -2104,16 +1720,11 @@ | |
| width: auto; | |
| max-width: 100px; | |
| text-align: right; } | |
| - | |
| /* | |
| 郵便番号フォーム | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 内部に input 要素を配置してコーディングします。 | |
| - | |
| ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| .ec-zipInput | |
| span 〒 | |
| @@ -2128,7 +1739,6 @@ | |
| span 郵便番号検索 | |
| .ec-zipAuto | |
| a.ec-inlineBtn 郵便番号から自動入力 | |
| - | |
| Styleguide 3.1.4 | |
| */ | |
| .ec-zipInput { | |
| @@ -2172,23 +1782,18 @@ | |
| .ec-zipInputHelp span { | |
| margin-left: 8px; | |
| display: inline-block; | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| vertical-align: 3px; } | |
| .ec-zipAuto { | |
| margin-bottom: 16px; } | |
| .ec-zipAuto .ec-inlineBtn { | |
| font-weight: normal; } | |
| - | |
| /* | |
| 電話番号ボタン | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 内部に input 要素を配置してコーディングします。 | |
| - | |
| ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change) | |
| - | |
| Markup: | |
| .ec-telInput | |
| input(type="text") | |
| @@ -2196,7 +1801,6 @@ | |
| input(type="text") | |
| span - | |
| input(type="text") | |
| - | |
| Styleguide 3.1.5 | |
| */ | |
| .ec-telInput input { | |
| @@ -2205,32 +1809,23 @@ | |
| font-size: 16px; | |
| text-align: right; | |
| max-width: 5em; } | |
| - | |
| .ec-telInput span { | |
| display: inline-block; | |
| padding: 0 5px 0 3px; | |
| margin-left: 5px; } | |
| - | |
| /* | |
| フォーム部品(その他) | |
| - | |
| フォーム部品でテキストの入力以外の動作要素を定義します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| Styleguide 3.2 | |
| */ | |
| /* | |
| ラジオ（水平） | |
| - | |
| 水平に並ぶラジオボタンフィールドです。 | |
| - | |
| 各要素をlabelでくくって、コーディングします。 | |
| - | |
| ex [新規会員登録画面 性別選択部分](http://demo3.ec-cube.net/entry) | |
| - | |
| Markup: | |
| .ec-radio | |
| label | |
| @@ -2239,28 +1834,20 @@ | |
| label | |
| input(type="radio") | |
| span 女性 | |
| - | |
| Styleguide 3.2.2 | |
| */ | |
| .ec-radio label { | |
| margin-right: 20px; } | |
| - | |
| .ec-radio input { | |
| margin-right: 10px; | |
| margin-bottom: 10px; } | |
| - | |
| .ec-radio span { | |
| font-weight: normal; } | |
| - | |
| /* | |
| ラジオ(垂直) | |
| - | |
| 垂直に並ぶラジオボタンフィールドです。 | |
| - | |
| 各要素をlabelでくくって、コーディングします。 | |
| - | |
| ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping) | |
| - | |
| Markup: | |
| .ec-blockRadio | |
| label | |
| @@ -2275,25 +1862,18 @@ | |
| label | |
| input(type="radio") | |
| span 代金引換 | |
| - | |
| Styleguide 3.2.3 | |
| */ | |
| .ec-blockRadio label { | |
| display: block; } | |
| - | |
| .ec-blockRadio span { | |
| padding-left: 10px; | |
| font-weight: normal; } | |
| - | |
| /* | |
| セレクトボックス | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 数値表示に最適化するため、数字は右端揃えで表示されます。 | |
| - | |
| ex [新規会員登録画面 都道府県選択部分](http://demo3.ec-cube.net/entry) | |
| - | |
| Markup: | |
| .ec-select | |
| select | |
| @@ -2310,7 +1890,6 @@ | |
| option コンピュータ関連技術職 | |
| option コンピュータ関連以外の技術職 | |
| option ... | |
| - | |
| Styleguide 3.2.4 | |
| */ | |
| .ec-selects { | |
| @@ -2346,16 +1925,11 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-select__time { | |
| display: inline-block; } } | |
| - | |
| /* | |
| 生年月日選択 | |
| - | |
| 数量を表示するための小さなコンポーネントです。 | |
| - | |
| 数値表示に最適化するため、数字は右端揃えで表示されます。 | |
| - | |
| ex [新規会員登録画面 生年月日選択部分](http://demo3.ec-cube.net/entry) | |
| - | |
| Markup: | |
| .ec-birth | |
| select | |
| @@ -2378,7 +1952,6 @@ | |
| option 02 | |
| option 03 | |
| option ... | |
| - | |
| Styleguide 3.2.5 | |
| */ | |
| .ec-birth select { | |
| @@ -2393,10 +1966,8 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-birth select { | |
| margin: 0 8px 10px; } } | |
| - | |
| .ec-birth span { | |
| margin-left: 5px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -2404,9 +1975,7 @@ | |
| */ | |
| /* | |
| フォームラベル | |
| - | |
| フォームのラベルに関する要素を定義します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-registerRole"> | |
| <div class="ec-off1Grid"> | |
| @@ -2417,16 +1986,12 @@ | |
| </div> | |
| </div> | |
| </div> | |
| - | |
| Styleguide 3.3 | |
| */ | |
| /* | |
| ラベル | |
| - | |
| フォーム要素で利用するラベル要素です。 | |
| - | |
| ex [お問い合わせページ ラベル部分](http://demo3.ec-cube.net/contact) | |
| - | |
| Markup: | |
| .ec-borderedDefs | |
| dl | |
| @@ -2435,22 +2000,16 @@ | |
| dd | |
| .ec-input | |
| input(type="text") | |
| - | |
| Styleguide 3.3.1 | |
| */ | |
| .ec-label { | |
| display: inline-block; | |
| font-weight: bold; | |
| margin-bottom: 5px; } | |
| - | |
| /* | |
| 必須ラベル | |
| - | |
| 必須文字を表示するラベル要素です。 | |
| - | |
| ex [お問い合わせページ 必須ラベル部分](http://demo3.ec-cube.net/contact) | |
| - | |
| - | |
| Markup: | |
| .ec-borderedDefs | |
| dl | |
| @@ -2460,40 +2019,33 @@ | |
| dd | |
| .ec-input | |
| input(type="text") | |
| - | |
| Styleguide 3.3.2 | |
| */ | |
| .ec-required { | |
| display: inline-block; | |
| - margin-left: .8em; | |
| + margin-left: 0.8em; | |
| vertical-align: 2px; | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| font-size: 12px; | |
| font-weight: normal; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-required { | |
| margin-left: 1em; } } | |
| - | |
| /* | |
| アイコン | |
| - | |
| デフォルトテンプレートのアイコンは`.ec-icon`>`img`タグで使用することができます | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/4.1.icon.pug | |
| div(style="background-color: rgba(130,130,130,.15); padding: 20px;") | |
| +icon-all | |
| - | |
| Styleguide 4.1 | |
| */ | |
| .ec-icon img { | |
| max-width: 80px; | |
| max-height: 80px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -2501,32 +2053,24 @@ | |
| */ | |
| /* | |
| グリッド | |
| - | |
| 画面を12分割し、グリッドレイアウトに対応するためのスタイルです。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 5.1 | |
| */ | |
| /* | |
| 2分割グリッド | |
| - | |
| 画面 ２分割の グリッドです。 | |
| Bootstrap の col-sm-6 相当のグリッドを提供します。 | |
| - | |
| Markup: | |
| .ec-grid2 | |
| .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell | |
| .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 5.1.1 | |
| */ | |
| .ec-grid2 { | |
| @@ -2541,6 +2085,7 @@ | |
| @media (min-width: 768px) { | |
| .ec-grid2 .ec-grid2__cell { | |
| width: 50%; } } | |
| + | |
| .ec-grid2 .ec-grid2__cell2 { | |
| position: relative; | |
| min-height: 1px; } | |
| @@ -2550,16 +2095,12 @@ | |
| /* | |
| 3分割グリッド | |
| - | |
| 画面 ３分割の グリッドです。 | |
| - | |
| - | |
| Markup: | |
| .ec-grid3 | |
| .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell | |
| .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell | |
| .ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell | |
| - | |
| Styleguide 5.1.2 | |
| */ | |
| .ec-grid3 { | |
| @@ -2573,13 +2114,15 @@ | |
| min-height: 1px; } | |
| @media (min-width: 768px) { | |
| .ec-grid3 .ec-grid3__cell { | |
| - width: 33.33333%; } } | |
| + width: 33.3333333333%; } } | |
| + | |
| .ec-grid3 .ec-grid3__cell2 { | |
| position: relative; | |
| min-height: 1px; } | |
| @media (min-width: 768px) { | |
| .ec-grid3 .ec-grid3__cell2 { | |
| - width: 66.66667%; } } | |
| + width: 66.6666666667%; } } | |
| + | |
| .ec-grid3 .ec-grid3__cell3 { | |
| position: relative; | |
| min-height: 1px; } | |
| @@ -2589,17 +2132,13 @@ | |
| /* | |
| 4分割グリッド | |
| - | |
| 画面 ４分割の グリッドです。 | |
| - | |
| - | |
| Markup: | |
| .ec-grid4 | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell | |
| - | |
| Styleguide 5.1.3 | |
| */ | |
| .ec-grid4 { | |
| @@ -2617,10 +2156,7 @@ | |
| /* | |
| 6分割グリッド | |
| - | |
| 2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。 | |
| - | |
| - | |
| Markup: | |
| .ec-grid6 | |
| .ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell | |
| @@ -2636,7 +2172,6 @@ | |
| .ec-grid6 | |
| .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3 | |
| .ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3 | |
| - | |
| Styleguide 5.1.4 | |
| */ | |
| .ec-grid6 { | |
| @@ -2650,13 +2185,15 @@ | |
| min-height: 1px; } | |
| @media (min-width: 768px) { | |
| .ec-grid6 .ec-grid6__cell { | |
| - width: 16.66667%; } } | |
| + width: 16.6666666667%; } } | |
| + | |
| .ec-grid6 .ec-grid6__cell2 { | |
| position: relative; | |
| min-height: 1px; } | |
| @media (min-width: 768px) { | |
| .ec-grid6 .ec-grid6__cell2 { | |
| - width: 33.33333%; } } | |
| + width: 33.3333333333%; } } | |
| + | |
| .ec-grid6 .ec-grid6__cell3 { | |
| position: relative; | |
| min-height: 1px; } | |
| @@ -2666,15 +2203,11 @@ | |
| /* | |
| 中央寄せグリッド 10/12 | |
| - | |
| 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の１０グリッドです | |
| - | |
| ex [ご利用規約ページ 本文](http://demo3.ec-cube.net/help/agreement) | |
| - | |
| Markup: | |
| .ec-off1Grid | |
| .ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| - | |
| Styleguide 5.1.5 | |
| */ | |
| .ec-off1Grid { | |
| @@ -2692,21 +2225,17 @@ | |
| .ec-off1Grid .ec-off1Grid__cell { | |
| position: relative; | |
| min-height: 1px; | |
| - margin-left: 8.33333%; } } | |
| + margin-left: 8.3333333333%; } } | |
| @media only screen and (min-width: 768px) and (min-width: 768px) { | |
| .ec-off1Grid .ec-off1Grid__cell { | |
| - width: 83.33333%; } } | |
| + width: 83.3333333333%; } } | |
| /* | |
| 中央寄せグリッド 8/12 | |
| - | |
| 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです | |
| - | |
| - | |
| Markup: | |
| .ec-off2Grid | |
| .ec-off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| - | |
| Styleguide 5.1.6 | |
| */ | |
| .ec-off2Grid { | |
| @@ -2721,21 +2250,17 @@ | |
| .ec-off2Grid .ec-off2Grid__cell { | |
| position: relative; | |
| min-height: 1px; | |
| - margin-left: 16.66667%; } } | |
| + margin-left: 16.6666666667%; } } | |
| @media only screen and (min-width: 768px) and (min-width: 768px) { | |
| .ec-off2Grid .ec-off2Grid__cell { | |
| - width: 66.66667%; } } | |
| + width: 66.6666666667%; } } | |
| /* | |
| 中央寄せグリッド 6/12 | |
| - | |
| 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです | |
| - | |
| - | |
| Markup: | |
| .ec-off3Grid | |
| .ec-off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| - | |
| Styleguide 5.1.7 | |
| */ | |
| .ec-off3Grid { | |
| @@ -2757,15 +2282,10 @@ | |
| /* | |
| 中央寄せグリッド 4/12 | |
| - | |
| 左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです | |
| - | |
| - | |
| Markup: | |
| .ec-off4Grid | |
| .ec-off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| - | |
| - | |
| Styleguide 5.1.8 | |
| */ | |
| .ec-off4Grid { | |
| @@ -2780,70 +2300,55 @@ | |
| .ec-off4Grid .ec-off4Grid__cell { | |
| position: relative; | |
| min-height: 1px; | |
| - margin-left: 33.33333%; } } | |
| + margin-left: 33.3333333333%; } } | |
| @media only screen and (min-width: 768px) and (min-width: 768px) { | |
| .ec-off4Grid .ec-off4Grid__cell { | |
| - width: 33.33333%; } } | |
| + width: 33.3333333333%; } } | |
| /* | |
| グリッドオプション | |
| - | |
| グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| Styleguide 5.1.9 | |
| */ | |
| /* | |
| グリッドセルの左寄せ | |
| - | |
| .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 | |
| - | |
| Markup: | |
| .ec-grid4.ec-grid--left | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| - | |
| Styleguide 5.1.10 | |
| */ | |
| .ec-grid--left { | |
| justify-content: flex-start; } | |
| - | |
| /* | |
| グリッドセルの右寄せ | |
| - | |
| .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 | |
| - | |
| Markup: | |
| .ec-grid4.ec-grid--right | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| - | |
| Styleguide 5.1.11 | |
| */ | |
| .ec-grid--right { | |
| justify-content: flex-end; } | |
| - | |
| /* | |
| グリッドセルの中央寄せ | |
| - | |
| .ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。 | |
| - | |
| Markup: | |
| .ec-grid4.ec-grid--center | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| .ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell | |
| - | |
| Styleguide 5.1.12 | |
| */ | |
| .ec-grid--center { | |
| justify-content: center; } | |
| - | |
| /** | |
| * ECCUBE 固有のスタイルユーティリティ | |
| */ | |
| @@ -2854,32 +2359,23 @@ | |
| */ | |
| /* | |
| レイアウト | |
| - | |
| 様々なレイアウトを変更する為のスタイル群です。 | |
| - | |
| Styleguide 5.2 | |
| */ | |
| /* | |
| 画像レイアウト | |
| - | |
| 画像とテキストを水平に並べるレイアウトです。 | |
| - | |
| 画像は20%で表示されます。 | |
| - | |
| ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| .ec-imageGrid | |
| .ec-imageGrid__img: img(src="http://demo3.ec-cube.net/upload/save_image/0701113537_559351f959620.jpeg") | |
| .ec-imageGrid__content | |
| p.ec-font-bold ホーローマグ | |
| p ¥ 1,728 x 1 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 5.2.1 | |
| */ | |
| .ec-imageGrid { | |
| @@ -2903,7 +2399,6 @@ | |
| margin-left: 10px; } | |
| .ec-imageGrid .ec-imageGrid__content p { | |
| margin-bottom: 0; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -2914,40 +2409,32 @@ | |
| */ | |
| /* | |
| ログイン | |
| - | |
| 主にログインフォームのスタイルを表示します。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 6.1 | |
| */ | |
| /* | |
| ログインフォーム | |
| - | |
| ログインフォームを表示します。 | |
| - | |
| ex [ログイン画面](http://demo3.ec-cube.net/mypage/login) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/6.3.login.pug | |
| +ec-login | |
| - | |
| - | |
| Styleguide 6.1.1 | |
| */ | |
| .ec-login { | |
| margin: 0 0 20px; | |
| padding: 30px 13% 20px; | |
| height: auto; | |
| - background: #F3F4F4; | |
| + background: #f3f4f4; | |
| box-sizing: border-box; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-login { | |
| margin: 0 16px; | |
| - height: 430px; } } | |
| + padding: 30px 13% 60px; } } | |
| .ec-login .ec-login__icon { | |
| text-align: center; } | |
| .ec-login .ec-icon { | |
| @@ -2975,24 +2462,16 @@ | |
| .ec-login .ec-login__link { | |
| margin-left: 20px; } } | |
| .ec-login .ec-errorMessage { | |
| - color: #DE5D50; } | |
| - | |
| -@media only screen and (min-width: 768px) { | |
| - .ec-login.error { | |
| - height: 500px; } } | |
| - | |
| + color: #de5d50; | |
| + margin-bottom: 20px; } | |
| /* | |
| ゲスト購入 | |
| - | |
| ゲスト購入ボタンとそのフォームを表示します。 | |
| - | |
| ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/6.3.login.pug | |
| +ec-guest | |
| hoge | |
| - | |
| Styleguide 6.1.2 | |
| */ | |
| .ec-guest { | |
| @@ -3001,10 +2480,10 @@ | |
| padding: 13%; | |
| height: auto; | |
| box-sizing: border-box; | |
| - background: #F3F4F4; } | |
| + background: #f3f4f4; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-guest { | |
| - height: 430px; | |
| + height: 100%; | |
| margin: 0 16px; } } | |
| .ec-guest .ec-guest__inner { | |
| display: table-cell; | |
| @@ -3025,7 +2504,6 @@ | |
| .ec-guest .ec-guest__icon { | |
| font-size: 70px; | |
| text-align: center; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -3036,28 +2514,20 @@ | |
| */ | |
| /* | |
| 商品掲載 | |
| - | |
| トップページに商品掲載するスタイルガイド群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 7.1 | |
| */ | |
| /* | |
| 商品アイテム（商品紹介B） | |
| - | |
| ３項目横並びの商品アイテムを表示します。 | |
| 必要に応じて商品詳細や、キャッチコピーなどを添えることが出来ます。 | |
| - | |
| ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.1.itembanner.pug | |
| +ec-displayB | |
| - | |
| Styleguide 7.1.1 | |
| */ | |
| .ec-displayB { | |
| @@ -3083,7 +2553,7 @@ | |
| .ec-displayB .ec-displayB__cell:hover { | |
| text-decoration: none; } | |
| .ec-displayB .ec-displayB__cell:hover img { | |
| - opacity: .8; } | |
| + opacity: 0.8; } | |
| .ec-displayB .ec-displayB__cell:hover a { | |
| text-decoration: none; } | |
| .ec-displayB .ec-displayB__img { | |
| @@ -3102,19 +2572,14 @@ | |
| text-decoration: none; | |
| font-weight: bold; | |
| color: #9a947e; } | |
| - | |
| /* | |
| 商品アイテム（商品紹介C） | |
| - | |
| ４項目横並びの商品アイテムを表示します。 | |
| - | |
| ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.1.itembanner.pug | |
| +ec-displayC | |
| p hoge | |
| - | |
| Styleguide 7.1.2 | |
| */ | |
| .ec-displayC { | |
| @@ -3135,7 +2600,7 @@ | |
| .ec-displayC .ec-displayC__cell:hover a { | |
| text-decoration: none; } | |
| .ec-displayC .ec-displayC__cell:hover img { | |
| - opacity: .8; } | |
| + opacity: 0.8; } | |
| .ec-displayC .ec-displayC__img { | |
| display: block; | |
| width: 100%; | |
| @@ -3158,19 +2623,14 @@ | |
| display: block; | |
| width: 100%; | |
| font-weight: bold; | |
| - color: #DE5D50; } | |
| - | |
| + color: #de5d50; } | |
| /* | |
| 商品アイテム（商品紹介D） | |
| - | |
| ６項目横並びの商品アイテムを表示します。 | |
| - | |
| ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.1.itembanner.pug | |
| +ec-displayD | |
| - | |
| Styleguide 7.1.3 | |
| */ | |
| .ec-displayD { | |
| @@ -3196,11 +2656,10 @@ | |
| .ec-displayD .ec-displayD__cell:hover { | |
| text-decoration: none; } | |
| .ec-displayD .ec-displayD__cell:hover img { | |
| - opacity: .8; } | |
| + opacity: 0.8; } | |
| .ec-displayD .ec-displayD__img { | |
| display: block; | |
| width: 100%; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -3211,31 +2670,24 @@ | |
| */ | |
| /* | |
| 検索・一覧表示 | |
| - | |
| 検索欄や、一覧表示に使用するスタイル群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 7.2 | |
| */ | |
| /* | |
| トピックパス | |
| - | |
| 検索結果で表示されるトピックパスのスタイルです。 | |
| - | |
| ex [商品一覧ページ 横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.2.search.pug | |
| +ec-topicpath | |
| - | |
| Styleguide 7.2.1 | |
| */ | |
| .ec-topicpath { | |
| - letter-spacing: -.4em; | |
| + letter-spacing: -0.4em; | |
| -webkit-margin-before: 0; | |
| -webkit-margin-after: 0; | |
| -webkit-margin-start: 0; | |
| @@ -3247,7 +2699,7 @@ | |
| list-style: none; | |
| overflow: hidden; | |
| font-size: 12px; | |
| - color: #0092C4; } | |
| + color: #0092c4; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-topicpath { | |
| padding: 30px 0 10px; | |
| @@ -3260,9 +2712,7 @@ | |
| text-decoration: none; } | |
| .ec-topicpath .ec-topicpath__divider { | |
| color: #000; } | |
| - .ec-topicpath .ec-topicpath__item, | |
| - .ec-topicpath .ec-topicpath__divider, | |
| - .ec-topicpath .ec-topicpath__item--active { | |
| + .ec-topicpath .ec-topicpath__item, .ec-topicpath .ec-topicpath__divider, .ec-topicpath .ec-topicpath__item--active { | |
| display: inline-block; | |
| min-width: 16px; | |
| text-align: center; | |
| @@ -3275,18 +2725,13 @@ | |
| text-decoration: none; } | |
| .ec-topicpath .ec-topicpath__item--active a:hover { | |
| text-decoration: none; } | |
| - | |
| /* | |
| ページャ | |
| - | |
| 検索結果で表示される商品一覧のスタイルです。 | |
| - | |
| ex [商品一覧ページ ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.2.search.pug | |
| +ec-pager | |
| - | |
| Styleguide 7.2.2 | |
| */ | |
| .ec-pager { | |
| @@ -3295,35 +2740,29 @@ | |
| margin: 0 auto; | |
| padding: 1em 0; | |
| text-align: center; } | |
| - .ec-pager .ec-pager__item, | |
| - .ec-pager .ec-pager__item--active { | |
| + .ec-pager .ec-pager__item, .ec-pager .ec-pager__item--active { | |
| display: inline-block; | |
| min-width: 29px; | |
| padding: 0 3px 0 2px; | |
| text-align: center; | |
| position: relative; } | |
| - .ec-pager .ec-pager__item a, | |
| - .ec-pager .ec-pager__item--active a { | |
| + .ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a { | |
| color: inherit; | |
| text-decoration: none; } | |
| - .ec-pager .ec-pager__item a:hover, | |
| - .ec-pager .ec-pager__item--active a:hover { | |
| + .ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover { | |
| text-decoration: none; } | |
| - .ec-pager .ec-pager__item a, | |
| - .ec-pager .ec-pager__item--active a { | |
| + .ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a { | |
| color: inherit; | |
| display: block; | |
| line-height: 1.8; | |
| padding: 5px 1em; | |
| text-decoration: none; } | |
| - .ec-pager .ec-pager__item a:hover, | |
| - .ec-pager .ec-pager__item--active a:hover { | |
| + .ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover { | |
| color: inherit; } | |
| .ec-pager .ec-pager__item--active { | |
| - background: #F3F3F3; } | |
| + background: #f3f3f3; } | |
| .ec-pager .ec-pager__item:hover { | |
| - background: #F3F3F3; } | |
| - | |
| + background: #f3f3f3; } | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -3333,6 +2772,7 @@ | |
| 0% { | |
| opacity: 0; | |
| visibility: hidden; } | |
| + | |
| 100% { | |
| opacity: 1; | |
| visibility: visible; } } | |
| @@ -3341,43 +2781,33 @@ | |
| 0% { | |
| opacity: 1; | |
| visibility: visible; } | |
| + | |
| 100% { | |
| opacity: 0; | |
| visibility: hidden; } } | |
| - | |
| /** | |
| * ECCUBE 固有のスタイルユーティリティ | |
| */ | |
| /* | |
| カート | |
| - | |
| ショッピングカートに関するスタイルです。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 7.3 | |
| */ | |
| /* | |
| カートヘッダ | |
| - | |
| 購入完了までの手順や、現在の状態を表示します。 | |
| - | |
| ul 要素を用いたリスト要素としてマークアップします。 | |
| - | |
| ex [カートページ ヘッダ部分](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.3.cart.pug | |
| +ec-progress | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 7.3.1 | |
| */ | |
| .ec-progress { | |
| @@ -3435,31 +2865,24 @@ | |
| .ec-progress .ec-progress__label { | |
| font-size: 12px; } | |
| .ec-progress .is-complete .ec-progress__number { | |
| - background: #5CB1B1; } | |
| + background: #5cb1b1; } | |
| .ec-progress .is-complete .ec-progress__label { | |
| - color: #5CB1B1; } | |
| - | |
| + color: #5cb1b1; } | |
| /* | |
| カートナビゲーション | |
| - | |
| カートナビゲーションを表示します。 カートに追加された商品の個数も表示します。 | |
| - | |
| ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.2.header.pug | |
| +ec-headerCart | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| - | |
| Styleguide 7.3.5 | |
| */ | |
| .ec-cartNavi { | |
| - border: 1px solid #D9D9D9; | |
| + border: 1px solid #d9d9d9; | |
| width: 256px; | |
| position: relative; | |
| display: block; | |
| @@ -3501,7 +2924,7 @@ | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: baseline; | |
| - background-color: #DE5D50; | |
| + background-color: #de5d50; | |
| border-radius: 10px; | |
| display: inline-block; | |
| opacity: 1; | |
| @@ -3524,10 +2947,8 @@ | |
| opacity: 0; | |
| visibility: hidden; | |
| animation: fadeOut 150ms linear 0s; } | |
| - | |
| .is_active .ec-cartNavi__badge { | |
| display: none; } | |
| - | |
| .is_active .ec-cartNavi__iconClose { | |
| display: inline-block; | |
| opacity: 1; | |
| @@ -3547,12 +2968,12 @@ | |
| visibility: hidden; | |
| animation: fadeOut 150ms linear 0s; } | |
| .ec-cartNaviNull .ec-cartNaviNull__message { | |
| - border: 1px solid #D9D9D9; | |
| + border: 1px solid #d9d9d9; | |
| padding: 16px 0; | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #fff; | |
| - background-color: #F99; } | |
| + background-color: #f99; } | |
| .ec-cartNaviNull .ec-cartNaviNull__message p { | |
| margin: 0; } | |
| @@ -3562,21 +2983,16 @@ | |
| visibility: visible; | |
| animation: fadeIn 150ms linear 0s; | |
| display: block; } | |
| - | |
| .is_active .ec-cartNaviIsset { | |
| display: block; | |
| opacity: 1; | |
| visibility: visible; | |
| animation: fadeIn 150ms linear 0s; | |
| display: block; } | |
| - | |
| /* | |
| カートナビゲーションのポップアップ(商品詳細) | |
| - | |
| カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。 | |
| - | |
| ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| div(style="height:350px;") | |
| // 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要) | |
| @@ -3602,7 +3018,6 @@ | |
| +e.action | |
| a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む | |
| a.ec-blockBtn.ec-cartNavi--cancel キャンセル | |
| - | |
| Styleguide 7.3.6 | |
| */ | |
| .ec-cartNaviIsset { | |
| @@ -3619,7 +3034,7 @@ | |
| visibility: hidden; | |
| animation: fadeOut 150ms linear 0s; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cart { | |
| - border-bottom: 1px solid #E8E8E8; | |
| + border-bottom: 1px solid #e8e8e8; | |
| margin-bottom: 16px; | |
| padding-bottom: 32px; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cart:after { | |
| @@ -3629,12 +3044,12 @@ | |
| clear: both; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cartImage { | |
| float: left; | |
| - width: 50%; } | |
| + width: 45%; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cartImage img { | |
| width: 100%; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cartContent { | |
| float: right; | |
| - width: 50%; | |
| + width: 55%; | |
| padding-left: 16px; | |
| text-align: left; | |
| box-sizing: border-box; } | |
| @@ -3649,17 +3064,13 @@ | |
| display: inline-block; | |
| font-size: 12px; | |
| font-weight: normal; | |
| - margin-left: 5px; } | |
| + margin-left: 2px; } | |
| .ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber { | |
| font-size: 14px; } | |
| - | |
| /* | |
| カートナビゲーションのポップアップ(商品なし) | |
| - | |
| カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。 | |
| - | |
| ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| div(style="height:170px;") | |
| // 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要) | |
| @@ -3690,31 +3101,25 @@ | |
| // +e.action | |
| // a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む | |
| // a.ec-blockBtn キャンセル | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| - | |
| Styleguide 7.3.7 | |
| */ | |
| /* | |
| 総計 | |
| - | |
| 会計時の合計金額、総計を表示します。 | |
| - | |
| ex [カートページ 統計部分](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/7.3.cart.pug | |
| +ec-totalBox | |
| - | |
| Styleguide 7.3.8 | |
| */ | |
| .ec-totalBox { | |
| - background: #F3F3F3; | |
| - padding: 16px; } | |
| + background: #f3f3f3; | |
| + padding: 16px; | |
| + margin-bottom: 16px; } | |
| .ec-totalBox .ec-totalBox__spec { | |
| position: relative; | |
| margin-bottom: 8px; } | |
| @@ -3730,10 +3135,10 @@ | |
| right: 0; | |
| text-align: right; } | |
| .ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal { | |
| - color: #DE5D50; } | |
| + color: #de5d50; } | |
| .ec-totalBox .ec-totalBox__total { | |
| - padding: 8px 0; | |
| border-top: 1px dotted #ccc; | |
| + padding: 8px 0; | |
| text-align: right; | |
| font-size: 14px; | |
| font-weight: bold; } | |
| @@ -3741,13 +3146,13 @@ | |
| margin-left: 16px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| - color: #DE5D50; } | |
| + color: #de5d50; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-totalBox .ec-totalBox__price { | |
| font-size: 24px; } } | |
| .ec-totalBox .ec-totalBox__taxLabel { | |
| margin-left: 8px; | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| font-size: 12px; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-totalBox .ec-totalBox__taxLabel { | |
| @@ -3762,7 +3167,6 @@ | |
| .ec-totalBox .ec-totalBox__btn .ec-blockBtn--action { | |
| font-size: 16px; | |
| font-weight: bold; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -3770,32 +3174,25 @@ | |
| */ | |
| /* | |
| お知らせ | |
| - | |
| 新着情報やバナーなどの掲載項目を紹介していきます。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 8.1 | |
| */ | |
| /* | |
| 新着情報 | |
| - | |
| 新着情報の掲載をします。 | |
| - | |
| ex [トップページ 新着情報部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/8.1.info.pug | |
| +ec-news | |
| - | |
| Styleguide 8.1.1 | |
| */ | |
| .ec-news { | |
| margin-bottom: 16px; | |
| - background: #F8F8F8; } | |
| + background: #f8f8f8; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-news { | |
| margin-right: 3%; } } | |
| @@ -3816,14 +3213,10 @@ | |
| padding: 0; | |
| list-style: none; | |
| border-top: 1px dotted #ccc; } | |
| - | |
| /* | |
| 折りたたみ項目 | |
| - | |
| 折りたたみ項目を掲載します。 | |
| - | |
| ex [トップページ 折りたたみ項目部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/8.1.info.pug | |
| +b.ec-news | |
| @@ -3840,7 +3233,6 @@ | |
| .ec-icon | |
| img(src='/moc/icon/angle-down-white.svg', alt='') | |
| +e.description 一人暮らしからオフィスなどさまざまなシーンで あなたの生活をサポートするグッズをご家庭へお届けします！ | |
| - | |
| Styleguide 8.1.2 | |
| */ | |
| .ec-newsline { | |
| @@ -3876,31 +3268,26 @@ | |
| .ec-newsline .ec-newsline__description { | |
| width: 100%; | |
| height: 0; | |
| - transition: all .2s ease-out; } | |
| + transition: all 0.2s ease-out; } | |
| .ec-newsline.is_active .ec-newsline__description { | |
| height: auto; | |
| - transition: all .2s ease-out; | |
| + transition: all 0.2s ease-out; | |
| padding-bottom: 16px; } | |
| .ec-newsline.is_active .ec-icon img { | |
| transform: rotateX(180deg); } | |
| - | |
| /* | |
| バナー | |
| - | |
| バナー形式でお知ら情報を伝える際の背景つきボックスです。 | |
| - | |
| ex [トップページ バナー部分](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/8.1.info.pug | |
| +ec-banner | |
| - | |
| Styleguide 8.1.3 | |
| */ | |
| .ec-banner { | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| - background: #F8F8F8; | |
| + background: #f8f8f8; | |
| text-align: center; | |
| font-weight: bold; | |
| border: 1px solid #ccc; } | |
| @@ -3909,14 +3296,13 @@ | |
| margin-left: 3%; | |
| margin-bottom: 16px; } } | |
| .ec-banner .ec-banner__intro { | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| font-size: 20px; | |
| font-weight: bold; } | |
| .ec-banner .ec-banner__title { | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| font-size: 32px; | |
| font-weight: bold; } | |
| - | |
| /** | |
| * ECCUBE 固有のスタイルユーティリティ | |
| */ | |
| @@ -3927,35 +3313,26 @@ | |
| */ | |
| /* | |
| マイページ | |
| - | |
| マイページで利用するためのスタイルガイド群です。 | |
| - | |
| sg-wrapper: | |
| <div class="ec-role"> | |
| <sg-wrapper-content/> | |
| - | |
| - | |
| Styleguide 9.1 | |
| */ | |
| /* | |
| マイページ | |
| - | |
| マイページで表示するメニューリストです。 | |
| - | |
| ul を利用したリスト要素で記述します。 | |
| - | |
| ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/9.1.mypage.pug | |
| +ec-navlist | |
| - | |
| Styleguide 9.1.1 | |
| */ | |
| .ec-navlistRole .ec-navlistRole__navlist { | |
| display: flex; | |
| flex-wrap: wrap; | |
| - border-color: #D0D0D0; | |
| + border-color: #d0d0d0; | |
| border-style: solid; | |
| border-width: 1px 0 0 1px; | |
| margin-bottom: 32px; | |
| @@ -3969,10 +3346,9 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-navlistRole .ec-navlistRole__navlist { | |
| flex-wrap: nowrap; } } | |
| - | |
| .ec-navlistRole .ec-navlistRole__item { | |
| width: 50%; | |
| - border-color: #D0D0D0; | |
| + border-color: #d0d0d0; | |
| border-style: solid; | |
| border-width: 0 1px 1px 0; | |
| text-align: center; | |
| @@ -3983,36 +3359,25 @@ | |
| display: inline-block; } | |
| .ec-navlistRole .ec-navlistRole__item a:hover { | |
| background: #f5f7f8; } | |
| - | |
| .ec-navlistRole .active a { | |
| - color: #DE5D50; } | |
| - | |
| + color: #de5d50; } | |
| /* | |
| マイページ（お気に入り機能無効） | |
| - | |
| マイページで表示するメニューリストです。 | |
| - | |
| ul を利用したリスト要素で記述します。 | |
| - | |
| ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/9.1.mypage.pug | |
| +ec-navlist_noFavorite | |
| - | |
| Styleguide 9.1.2 | |
| */ | |
| /* | |
| Welcome メッセージ | |
| - | |
| マイページで表示するログイン名の表示コンポーネントです。 | |
| - | |
| ex [マイページ メニューリスト下部分](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/9.1.mypage.pug | |
| +ec-welcomeMsg | |
| - | |
| Styleguide 9.1.3 | |
| */ | |
| .ec-welcomeMsg { | |
| @@ -4045,9 +3410,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-welcomeMsg *, | |
| - .ec-welcomeMsg *::before, | |
| - .ec-welcomeMsg *::after { | |
| + .ec-welcomeMsg *, .ec-welcomeMsg *::before, .ec-welcomeMsg *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4057,23 +3420,17 @@ | |
| .ec-welcomeMsg { | |
| padding-left: 26px; | |
| padding-right: 26px; } } | |
| - | |
| /* | |
| お気に入り一覧 | |
| - | |
| お気に入り一覧で表示するアイテムの表示コンポーネントです。 | |
| - | |
| ex [マイページ お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/9.1.mypage.pug | |
| +ec-favorite | |
| - | |
| Styleguide 9.1.4 | |
| */ | |
| .ec-favoriteRole .ec-favoriteRole__header { | |
| margin-bottom: 16px; } | |
| - | |
| .ec-favoriteRole .ec-favoriteRole__itemList { | |
| display: flex; | |
| flex-wrap: wrap; | |
| @@ -4085,7 +3442,6 @@ | |
| text-decoration: none; } | |
| .ec-favoriteRole .ec-favoriteRole__itemList a:hover { | |
| text-decoration: none; } | |
| - | |
| .ec-favoriteRole .ec-favoriteRole__item { | |
| margin-bottom: 8px; | |
| width: 47.5%; | |
| @@ -4103,19 +3459,15 @@ | |
| .ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img { | |
| width: 1em; | |
| height: 1em; } | |
| - | |
| .ec-favoriteRole .ec-favoriteRole__itemThumb { | |
| display: block; | |
| height: auto; | |
| margin-bottom: 8px; } | |
| - | |
| .ec-favoriteRole .ec-favoriteRole__itemTitle { | |
| margin-bottom: 2px; } | |
| - | |
| .ec-favoriteRole .ec-favoriteRole__itemPrice { | |
| font-weight: bold; | |
| margin-bottom: 0; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -4123,15 +3475,11 @@ | |
| */ | |
| /* | |
| 標準セクション | |
| - | |
| 通常のコンテナブロックです。 | |
| - | |
| ex [商品詳細ページ コンテナ](http://demo3.ec-cube.net/products/detail/33) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.1.role.pug | |
| +ec-roleRole | |
| - | |
| Styleguide 11.1 | |
| */ | |
| .ec-role { | |
| @@ -4161,26 +3509,19 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-role *, | |
| - .ec-role *::before, | |
| - .ec-role *::after { | |
| + .ec-role *, .ec-role *::before, .ec-role *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-role img { | |
| width: 100%; } | |
| - | |
| /* | |
| マイページセクション | |
| - | |
| マイページ専用のコンテナブロックです。 | |
| - | |
| ex [マイページ コンテナ](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.1.role.pug | |
| +ec-mypageRole | |
| - | |
| Styleguide 11.1.2 | |
| */ | |
| .ec-mypageRole { | |
| @@ -4209,9 +3550,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-mypageRole *, | |
| - .ec-mypageRole *::before, | |
| - .ec-mypageRole *::after { | |
| + .ec-mypageRole *, .ec-mypageRole *::before, .ec-mypageRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4223,8 +3562,8 @@ | |
| padding-right: 26px; } } | |
| @media only screen and (min-width: 768px) { | |
| .ec-mypageRole .ec-pageHeader h1 { | |
| - margin: 10px 0 48px; } } | |
| - | |
| + margin: 10px 0 48px; | |
| + padding: 8px 0 18px; } } | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -4237,6 +3576,7 @@ | |
| 0% { | |
| opacity: 0; | |
| visibility: hidden; } | |
| + | |
| 100% { | |
| opacity: 1; | |
| visibility: visible; } } | |
| @@ -4245,17 +3585,14 @@ | |
| 0% { | |
| opacity: 1; | |
| visibility: visible; } | |
| + | |
| 100% { | |
| opacity: 0; | |
| visibility: hidden; } } | |
| - | |
| /* | |
| ヘッダー | |
| - | |
| ヘッダー用のプロジェクトコンポーネントを提供します。 | |
| - | |
| ex [トップページ ヘッダー](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.2.header.pug | |
| include /assets/tmpl/elements/11.3.headerNavi.pug | |
| @@ -4265,7 +3602,6 @@ | |
| +ec-headerRole | |
| +ec-headerNaviRole | |
| +ec-cateoryNaviRole | |
| - | |
| Styleguide 11.2 | |
| */ | |
| .ec-layoutRole { | |
| @@ -4293,12 +3629,10 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-layoutRole .ec-layoutRole__mainBetweenColumn { | |
| width: 50%; } } | |
| - .ec-layoutRole .ec-layoutRole__left, | |
| - .ec-layoutRole .ec-layoutRole__right { | |
| + .ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right { | |
| display: none; } | |
| @media only screen and (min-width: 768px) { | |
| - .ec-layoutRole .ec-layoutRole__left, | |
| - .ec-layoutRole .ec-layoutRole__right { | |
| + .ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right { | |
| display: block; | |
| width: 25%; } } | |
| @@ -4343,9 +3677,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-headerRole *, | |
| - .ec-headerRole *::before, | |
| - .ec-headerRole *::after { | |
| + .ec-headerRole *, .ec-headerRole *::before, .ec-headerRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4367,6 +3699,7 @@ | |
| .ec-headerRole:after { | |
| content: " "; | |
| display: table; } | |
| + | |
| .ec-headerRole:after { | |
| clear: both; } } | |
| .ec-headerRole .ec-headerRole__title { | |
| @@ -4425,9 +3758,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-headerNaviRole *, | |
| - .ec-headerNaviRole *::before, | |
| - .ec-headerNaviRole *::after { | |
| + .ec-headerNaviRole *, .ec-headerNaviRole *::before, .ec-headerNaviRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4497,7 +3828,7 @@ | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: baseline; | |
| - background: #DE5D50; | |
| + background: #de5d50; | |
| border-radius: 10px; | |
| position: absolute; | |
| top: 0; | |
| @@ -4510,7 +3841,7 @@ | |
| cursor: pointer; } | |
| .ec-headerNavSP .ec-headerNavSP__itemMenu span { | |
| display: inline-block; | |
| - transition: all .4s; | |
| + transition: all 0.4s; | |
| box-sizing: border-box; | |
| position: absolute; | |
| left: 0; | |
| @@ -4520,37 +3851,31 @@ | |
| .ec-headerNavSP .ec-headerNavSP__itemMenu span:nth-of-type(1) { | |
| top: 0; | |
| transform: translateY(0) rotate(0); | |
| - transition: all .3s; } | |
| + transition: all 0.3s; } | |
| .ec-headerNavSP .ec-headerNavSP__itemMenu span:nth-of-type(2) { | |
| top: 6px; | |
| opacity: 1; | |
| - transition: all .3s; } | |
| + transition: all 0.3s; } | |
| .ec-headerNavSP .ec-headerNavSP__itemMenu span:nth-of-type(3) { | |
| bottom: 0; | |
| transform: translateY(0) rotate(0); | |
| - transition: all .3s; } | |
| + transition: all 0.3s; } | |
| .have_curtain .ec-headerNavSP__itemMenu span:nth-of-type(1) { | |
| transform: translateY(2px) rotate(-45deg); | |
| - transition: all .3s; } | |
| - | |
| + transition: all 0.3s; } | |
| .have_curtain .ec-headerNavSP__itemMenu span:nth-of-type(2) { | |
| opacity: 0; | |
| - transition: all .3s; } | |
| - | |
| + transition: all 0.3s; } | |
| .have_curtain .ec-headerNavSP__itemMenu span:nth-of-type(3) { | |
| transform: translateY(-10px) rotate(45deg); | |
| - transition: all .3s; } | |
| - | |
| + transition: all 0.3s; } | |
| /* | |
| ヘッダー：タイトル | |
| - | |
| ヘッダー内で使用されるタイトルコンポーネントです。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.2.header.pug | |
| +ec-headerTitle | |
| - | |
| Styleguide 11.2.1 | |
| */ | |
| .ec-headerTitle { | |
| @@ -4568,9 +3893,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-headerTitle *, | |
| - .ec-headerTitle *::before, | |
| - .ec-headerTitle *::after { | |
| + .ec-headerTitle *, .ec-headerTitle *::before, .ec-headerTitle *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4600,28 +3923,23 @@ | |
| margin-bottom: 10px; } } | |
| .ec-headerTitle .ec-headerTitle__subtitle a { | |
| display: inline-block; | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| - | |
| /* | |
| ヘッダー：ユーザナビゲーション | |
| - | |
| ヘッダー内でユーザに関与するナビゲーションコンポーネントです。 | |
| <br><br> | |
| `.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.3.headerNavi.pug | |
| +ec-headerNav | |
| - | |
| sg-wrapper: | |
| <div class="ec-headerNaviRole"> | |
| <div class="ec-headerNaviRole__nav"> | |
| <sg-wrapper-content/> | |
| </div> | |
| </div> | |
| - | |
| Styleguide 11.2.3 | |
| */ | |
| .ec-headerNav { | |
| @@ -4646,34 +3964,27 @@ | |
| height: 30px; | |
| vertical-align: middle; | |
| margin-right: 5px; } | |
| - | |
| /* | |
| ヘッダー：検索ボックス | |
| - | |
| ヘッダー内で使用される商品検索コンポーネントです。 | |
| <br><br> | |
| `.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.3.headerNavi.pug | |
| +ec-headerSearch | |
| - | |
| sg-wrapper: | |
| <div class="ec-headerNaviRole"> | |
| <div class="ec-headerNaviRole__search"> | |
| <sg-wrapper-content/> | |
| </div> | |
| </div> | |
| - | |
| Styleguide 11.2.4 | |
| */ | |
| .ec-headerSearch:after { | |
| content: " "; | |
| display: table; } | |
| - | |
| .ec-headerSearch:after { | |
| clear: both; } | |
| - | |
| .ec-headerSearch .ec-headerSearch__category { | |
| float: none; } | |
| @media only screen and (min-width: 768px) { | |
| @@ -4697,7 +4008,6 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-headerSearch .ec-headerSearch__category select { | |
| max-width: 180px; } } | |
| - | |
| .ec-headerSearch .ec-headerSearch__keyword { | |
| float: none; | |
| height: 50px; | |
| @@ -4721,7 +4031,6 @@ | |
| .ec-headerSearch .ec-headerSearch__keyword .ec-icon { | |
| width: 25px; | |
| height: 25px; } | |
| - | |
| .ec-headerSearch .ec-headerSearch__keywordBtn { | |
| border: 0; | |
| background: none; | |
| @@ -4733,21 +4042,16 @@ | |
| overflow: hidden; | |
| white-space: nowrap; | |
| z-index: 1; } | |
| - | |
| /* | |
| ヘッダー：カテゴリナビ | |
| - | |
| ヘッダー内で使用されている商品のカテゴリ一覧として使用します。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.4.categoryNavi.pug | |
| +ec-itemNav | |
| - | |
| sg-wrapper: | |
| <div class="ec-cateoryNaviRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 11.2.5 | |
| */ | |
| .ec-cateoryNaviRole { | |
| @@ -4778,9 +4082,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-cateoryNaviRole *, | |
| - .ec-cateoryNaviRole *::before, | |
| - .ec-cateoryNaviRole *::after { | |
| + .ec-cateoryNaviRole *, .ec-cateoryNaviRole *::before, .ec-cateoryNaviRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -4793,6 +4095,7 @@ | |
| .ec-cateoryNaviRole a { | |
| color: inherit; | |
| text-decoration: none; } | |
| + | |
| .ec-cateoryNaviRole a:hover { | |
| text-decoration: none; } } | |
| @@ -4808,8 +4111,8 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-itemNav { | |
| margin: 20px 0 30px; | |
| - border-bottom: 1px solid #D9D9D9; | |
| - border-top: 1px solid #D9D9D9; } } | |
| + border-bottom: 1px solid #d9d9d9; | |
| + border-top: 1px solid #d9d9d9; } } | |
| .ec-itemNav .ec-itemNav__item { | |
| display: inline-block; | |
| font-weight: bold; } | |
| @@ -4828,52 +4131,49 @@ | |
| .ec-itemNav .ec-itemNav__item:hover > .ec-itemNavAccordion { | |
| overflow: visible; | |
| height: 50px; | |
| - transition: all .2s ease-out; } | |
| + transition: all 0.2s ease-out; } | |
| .ec-itemNav .ec-itemNav__item:hover > .ec-itemNavAccordion .ec-itemNavAccordion__item { | |
| height: 50px; | |
| - transition: all .2s ease-out; } | |
| + transition: all 0.2s ease-out; } | |
| .ec-itemNav .ec-itemNavAccordion { | |
| z-index: 1000; | |
| position: absolute; | |
| padding: 0; | |
| height: 0; | |
| overflow: hidden; | |
| - transition: all .2s ease-out; } | |
| + transition: all 0.2s ease-out; } | |
| .ec-itemNav .ec-itemNavAccordion .ec-itemNavAccordion__item { | |
| border-bottom: 1px solid #ccc; | |
| list-style: none; | |
| height: 0; | |
| - transition: all .2s ease-out; } | |
| + transition: all 0.2s ease-out; } | |
| .ec-itemNav .ec-itemNavAccordion .ec-itemNavAccordion__item a { | |
| list-style: none; | |
| - border-top: 1px solid #E8E8E8; | |
| - border-bottom: 1px solid #E8E8E8; | |
| + border-top: 1px solid #e8e8e8; | |
| + border-bottom: 1px solid #e8e8e8; | |
| margin-top: 0; | |
| padding: 15px 10px; | |
| min-width: 200px; | |
| width: 100%; | |
| text-align: left; | |
| background: #fff; | |
| - transition: all .5s ease-out; } | |
| + transition: all 0.5s ease-out; } | |
| .ec-itemNav .ec-itemNavAccordion .ec-itemNavAccordion__item a:hover { | |
| background: #fafafa; } | |
| - | |
| /* | |
| ヘッダー：SPヘッダー | |
| - | |
| SP時のみ出現するヘッダーに関係するコンポーネントです。<br> | |
| ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。<br> | |
| <br> | |
| `.ec-drawerRole`：SPのドロワー内の要素をwrapするコンポーネントです。<br> | |
| `.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します。<br><br> | |
| `.ec-overlayRole`：SPのドロワー出現時にz-indexがドロワー以下の要素に半透明の黒背景をかぶせるコンポーネントです。<br> | |
| - | |
| Styleguide 11.2.6 | |
| */ | |
| .ec-drawerRole { | |
| overflow-y: scroll; | |
| display: block; | |
| - background: #F6F6F6; | |
| + background: #f6f6f6; | |
| position: fixed; | |
| top: 0; | |
| width: 260px; | |
| @@ -4894,11 +4194,10 @@ | |
| .ec-drawerRole .ec-headerSearch { | |
| padding: 16px 8px 26px; | |
| - background: #EBEBEB; | |
| + background: #ebebeb; | |
| color: #636378; } | |
| .ec-drawerRole .ec-headerSearch select { | |
| width: 100% !important; } | |
| - | |
| .ec-drawerRole .ec-headerNav .ec-headerNav__item { | |
| text-align: left; | |
| display: block; | |
| @@ -4911,7 +4210,6 @@ | |
| .ec-drawerRole .ec-headerNav .ec-headerNav__item { | |
| padding: 0 10px; | |
| height: 50px; } } | |
| - | |
| .ec-drawerRole .ec-itemNav .ec-itemNav__item { | |
| display: block; | |
| text-align: left; | |
| @@ -4921,7 +4219,6 @@ | |
| .ec-drawerRole .ec-itemNav .ec-itemNav__item a { | |
| padding: 0 10px; | |
| height: 50px; } | |
| - | |
| .ec-drawerRole .ec-itemNav .ec-itemNavAccordion { | |
| display: none; } | |
| @@ -4934,21 +4231,34 @@ | |
| opacity: 0; | |
| background: transparent; | |
| transform: translateX(0); | |
| - transition: all .3s; | |
| - opacity: 0; | |
| - visibility: hidden; | |
| - animation: fadeOut 150ms linear 0s; } | |
| + transition: all 0.3s; | |
| + visibility: hidden; } | |
| .have_curtain .ec-overlayRole { | |
| + display: block; | |
| opacity: 1; | |
| background: rgba(0, 0, 0, 0.5); | |
| transform: translateX(-260px); | |
| - transition: all .3s; | |
| - display: block; | |
| - opacity: 1; | |
| - visibility: visible; | |
| - animation: fadeIn 150ms linear 0s; } | |
| - | |
| + transition: all 0.3s; | |
| + visibility: visible; } | |
| +/* | |
| + ヘッダー：test | |
| + test | |
| + Markup: | |
| + span.ec-itemAccordionParent test1 | |
| + ul.ec-itemNavAccordion | |
| + li.ec-itemNavAccordion__item | |
| + a(href='') test2 | |
| + ul.ec-itemNavAccordion | |
| + li.ec-itemNavAccordion__item | |
| + a(href='') test3 | |
| + ul.ec-itemNavAccordion | |
| + li.ec-itemNavAccordion__item | |
| + a(href='') test4 | |
| + Styleguide 11.2.7 | |
| + */ | |
| +.ec-itemNavAccordion { | |
| + display: none; } | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -4959,15 +4269,11 @@ | |
| */ | |
| /* | |
| フッター | |
| - | |
| 全ページで使用されるフッターのプロジェクトコンポーネントです。 | |
| - | |
| ex [トップページ フッター](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.8.footer.pug | |
| +ec-footerRole | |
| - | |
| Styleguide 11.3 | |
| */ | |
| .ec-footerRole { | |
| @@ -5007,31 +4313,24 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-footerRole .ec-footerRole__inner *, | |
| - .ec-footerRole .ec-footerRole__inner *::before, | |
| - .ec-footerRole .ec-footerRole__inner *::after { | |
| + .ec-footerRole .ec-footerRole__inner *, .ec-footerRole .ec-footerRole__inner *::before, .ec-footerRole .ec-footerRole__inner *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-footerRole .ec-footerRole__inner img { | |
| width: 100%; } | |
| - | |
| /* | |
| フッターナビ | |
| - | |
| フッタープロジェクトで使用するナビゲーション用のコンポーネントです。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.8.footer.pug | |
| +ec-footerNav | |
| - | |
| sg-wrapper: | |
| <div class="ec-footerRole"> | |
| <div class="ec-footerRole__inner"> | |
| <sg-wrapper-content/> | |
| </div> | |
| </div> | |
| - | |
| Styleguide 11.3.1 | |
| */ | |
| .ec-footerNavi { | |
| @@ -5047,23 +4346,18 @@ | |
| .ec-footerNavi .ec-footerNavi__link:hover a { | |
| color: #686868; | |
| text-decoration: none; } | |
| - | |
| /* | |
| フッタータイトル | |
| - | |
| フッタープロジェクトで使用するタイトル用のコンポーネントです。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/11.8.footer.pug | |
| +ec-footerTitle | |
| - | |
| sg-wrapper: | |
| <div class="ec-footerRole"> | |
| <div class="ec-footerRole__inner"> | |
| <sg-wrapper-content/> | |
| </div> | |
| </div> | |
| - | |
| Styleguide 11.3.2 | |
| */ | |
| .ec-footerTitle { | |
| @@ -5092,8 +4386,7 @@ | |
| font-size: 10px; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-footerTitle .ec-footerTitle__copyright { | |
| - font-size: .8em; } } | |
| - | |
| + font-size: 0.8em; } } | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -5101,15 +4394,11 @@ | |
| */ | |
| /* | |
| トップページ | |
| - | |
| トップページ スライド部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [トップページ](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/12.1.slider.pug | |
| +ec-sliderRole | |
| - | |
| Styleguide 12.1 | |
| */ | |
| .ec-sliderRole { | |
| @@ -5140,9 +4429,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-sliderRole *, | |
| - .ec-sliderRole *::before, | |
| - .ec-sliderRole *::after { | |
| + .ec-sliderRole *, .ec-sliderRole *::before, .ec-sliderRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5180,9 +4467,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-sliderItemRole *, | |
| - .ec-sliderItemRole *::before, | |
| - .ec-sliderItemRole *::after { | |
| + .ec-sliderItemRole *, .ec-sliderItemRole *::before, .ec-sliderItemRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5200,14 +4485,13 @@ | |
| margin-bottom: 0; } } | |
| .ec-sliderItemRole .slideThumb { | |
| margin-bottom: 25px; | |
| - opacity: .8; } | |
| + opacity: 0.8; } | |
| .ec-sliderItemRole .slideThumb:focus { | |
| outline: none; } | |
| .ec-sliderItemRole .slideThumb:hover { | |
| opacity: 1; } | |
| .ec-sliderItemRole .slideThumb img { | |
| width: 80%; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -5215,15 +4499,11 @@ | |
| */ | |
| /* | |
| アイキャッチ | |
| - | |
| トップページ アイキャッチ部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/12.2.eyecatch.pug | |
| +ec-eyecatchRole | |
| - | |
| Styleguide 12.2 | |
| */ | |
| .ec-eyecatchRole { | |
| @@ -5255,9 +4535,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-eyecatchRole *, | |
| - .ec-eyecatchRole *::before, | |
| - .ec-eyecatchRole *::after { | |
| + .ec-eyecatchRole *, .ec-eyecatchRole *::before, .ec-eyecatchRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5279,25 +4557,17 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-eyecatchRole p { | |
| font-size: 20px; } } | |
| - | |
| /* | |
| トップページ | |
| - | |
| アイキャッチで使用する 分割画像レイアウトです。 | |
| - | |
| ex [トップページ](http://demo3.ec-cube.net/) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/12.2.eyecatch.pug | |
| +ec-eyecatchTop | |
| - | |
| sg-wrapper: | |
| <div class="ec-eyecatchRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| - | |
| - | |
| Styleguide 12.2.1 | |
| */ | |
| .ec-splitImg { | |
| @@ -5316,7 +4586,6 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-splitImg .ec-splitImg__item:nth-of-type(2) { | |
| padding-left: 3%; } } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -5324,18 +4593,13 @@ | |
| */ | |
| /* | |
| 検索ラベル | |
| - | |
| 商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/13.1.searchnav.pug | |
| +ec-searchnavRole__topicpath | |
| +ec-searchnavRole__info | |
| - | |
| Styleguide 13.1 | |
| - | |
| */ | |
| .ec-searchnavRole { | |
| margin-bottom: 0; | |
| @@ -5357,23 +4621,27 @@ | |
| .ec-searchnavRole:after { | |
| content: " "; | |
| display: table; } | |
| + | |
| .ec-searchnavRole:after { | |
| clear: both; } | |
| + | |
| .ec-searchnavRole textarea { | |
| /* for chrome fontsize bug */ | |
| font-family: sans-serif; } | |
| + | |
| .ec-searchnavRole img { | |
| max-width: 100%; } | |
| + | |
| .ec-searchnavRole html { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-searchnavRole *, | |
| - .ec-searchnavRole *::before, | |
| - .ec-searchnavRole *::after { | |
| + | |
| + .ec-searchnavRole *, .ec-searchnavRole *::before, .ec-searchnavRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| + | |
| .ec-searchnavRole img { | |
| width: 100%; } } | |
| .ec-searchnavRole .ec-searchnavRole__infos { | |
| @@ -5408,9 +4676,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-searchnavRole .ec-searchnavRole__infos *, | |
| - .ec-searchnavRole .ec-searchnavRole__infos *::before, | |
| - .ec-searchnavRole .ec-searchnavRole__infos *::after { | |
| + .ec-searchnavRole .ec-searchnavRole__infos *, .ec-searchnavRole .ec-searchnavRole__infos *::before, .ec-searchnavRole .ec-searchnavRole__infos *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5436,7 +4702,6 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-searchnavRole .ec-searchnavRole__actions { | |
| width: 50%; } } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -5447,18 +4712,13 @@ | |
| */ | |
| /* | |
| 商品一覧 | |
| - | |
| 商品一覧 に関する Project コンポーネントを定義します。 | |
| - | |
| SP版２列、PC版４列の特殊グリッドを構成します。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/13.2.shelf.pug | |
| +b.ec-shelfRole | |
| +ec-shelfGrid | |
| - | |
| Styleguide 13.2 | |
| - | |
| */ | |
| .ec-shelfRole { | |
| margin-right: auto; | |
| @@ -5487,29 +4747,21 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-shelfRole *, | |
| - .ec-shelfRole *::before, | |
| - .ec-shelfRole *::after { | |
| + .ec-shelfRole *, .ec-shelfRole *::before, .ec-shelfRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-shelfRole img { | |
| width: 100%; } | |
| - | |
| /* | |
| 商品一覧グリッド | |
| - | |
| 商品一覧 で使用するグリッドコンポーネントです。 | |
| - | |
| SP版２列、PC版４列の特殊グリッドを構成します。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/13.2.shelf.pug | |
| +b.ec-shelfRole | |
| +ec-shelfGrid | |
| - | |
| Styleguide 13.2.1 | |
| - | |
| */ | |
| .ec-shelfGrid { | |
| display: flex; | |
| @@ -5551,22 +4803,16 @@ | |
| margin-bottom: 7px; } | |
| .ec-shelfGrid .ec-shelfGrid__plice { | |
| font-weight: bold; } | |
| - | |
| /* | |
| 13.2.2 商品一覧グリッド（中央寄せ） | |
| - | |
| 商品一覧 で使用するグリッドコンポーネントです。 | |
| - | |
| SP版２列、PC版４列の特殊グリッドを構成します。 | |
| 商品のあまりはセンタリングされ、中央に表示されます。 | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/13.2.shelf.pug | |
| +b.ec-shelfRole | |
| +ec-shelfGridCenter | |
| - | |
| Styleguide 13.2.2 | |
| - | |
| */ | |
| .ec-shelfGridCenter { | |
| display: flex; | |
| @@ -5609,20 +4855,14 @@ | |
| margin-bottom: 7px; } | |
| .ec-shelfGridCenter .ec-shelfGridCenter__plice { | |
| font-weight: bold; } | |
| - | |
| /* | |
| 商品一覧フッター | |
| - | |
| 商品一覧 フッター に関する Project コンポーネントを定義します。 | |
| - | |
| ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/13.3.pager.pug | |
| +ec-pagerRole | |
| - | |
| Styleguide 13.3 | |
| - | |
| */ | |
| /** | |
| メディアクエリ | |
| @@ -5631,16 +4871,11 @@ | |
| */ | |
| /* | |
| 商品詳細 | |
| - | |
| 商品詳細ページに関する Project コンポーネントを定義します。 | |
| - | |
| ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18) | |
| - | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/14.1.product.pug | |
| +ec-productSimpleRole | |
| - | |
| Styleguide 14.1 | |
| */ | |
| .ec-productRole { | |
| @@ -5670,9 +4905,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-productRole *, | |
| - .ec-productRole *::before, | |
| - .ec-productRole *::after { | |
| + .ec-productRole *, .ec-productRole *::before, .ec-productRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5706,16 +4939,16 @@ | |
| list-style: none; | |
| font-size: 80%; | |
| color: #525263; | |
| - border: solid 1px #D7DADD; | |
| + border: solid 1px #d7dadd; | |
| border-radius: 3px; | |
| - background-color: #F5F7F8; } | |
| + background-color: #f5f7f8; } | |
| .ec-productRole .ec-productRole__priceRegular { | |
| padding-top: 14px; } | |
| .ec-productRole .ec-productRole__priceRegularTax { | |
| margin-left: 5px; | |
| font-size: 12px; } | |
| .ec-productRole .ec-productRole__price { | |
| - color: #DE5D50; | |
| + color: #de5d50; | |
| font-size: 28px; | |
| padding: 0; | |
| border-bottom: 0; } | |
| @@ -5730,7 +4963,7 @@ | |
| padding: 14px 0; | |
| border-bottom: 1px dotted #ccc; } | |
| .ec-productRole .ec-productRole__category a { | |
| - color: #33A8D0; } | |
| + color: #33a8d0; } | |
| .ec-productRole .ec-productRole__category ul { | |
| list-style: none; | |
| padding: 0; | |
| @@ -5755,7 +4988,6 @@ | |
| min-width: 350px; } } | |
| .ec-productRole .ec-productRole__description { | |
| margin-bottom: 16px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -5766,19 +4998,13 @@ | |
| */ | |
| /* | |
| カート | |
| - | |
| カート 注文詳細 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [カートページ](http://demo3.ec-cube.net/shopping) | |
| - | |
| (カート内に商品がある状態でアクセス) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| +ec-cartRole | |
| - | |
| Styleguide 15.1 | |
| - | |
| */ | |
| .ec-cartRole { | |
| margin-right: auto; | |
| @@ -5810,9 +5036,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-cartRole *, | |
| - .ec-cartRole *::before, | |
| - .ec-cartRole *::after { | |
| + .ec-cartRole *, .ec-cartRole *::before, .ec-cartRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -5823,6 +5047,12 @@ | |
| .ec-cartRole .ec-cartRole__progress { | |
| width: 100%; | |
| text-align: center; } | |
| + .ec-cartRole .ec-cartRole__error { | |
| + width: 100%; | |
| + text-align: center; } | |
| + .ec-cartRole .ec-cartRole__error .ec-alert-warning { | |
| + max-width: 80%; | |
| + display: inline-block; } | |
| .ec-cartRole .ec-cartRole__totalText { | |
| margin-bottom: 0; | |
| padding: 16px 0 6px; | |
| @@ -5859,23 +5089,17 @@ | |
| font-size: 24px; } } | |
| .ec-cartRole .ec-blockBtn--action { | |
| margin-bottom: 10px; } | |
| - | |
| /* | |
| カート商品表示枠（テーブルヘッダ） | |
| - | |
| カート内の商品をを表示するテーブル枠です。 | |
| - | |
| ex [カートページ テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| +ec-cartTable | |
| - | |
| sg-wrapper: | |
| <div class="ec-cartRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 15.1.2 | |
| */ | |
| .ec-cartTable { | |
| @@ -5885,33 +5109,25 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-cartTable { | |
| border-top: none; } } | |
| - | |
| /* | |
| カート商品表示枠（テーブルヘッダ） | |
| - | |
| カート内の商品を表示するテーブルのヘッダです。 | |
| スマホでは非表示となります。 | |
| - | |
| ex [カートページ カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart) | |
| - | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| .ec-cartTable | |
| +ec-cartHeader | |
| - | |
| sg-wrapper: | |
| <div class="ec-cartRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| - | |
| Styleguide 15.1.3 | |
| */ | |
| .ec-cartHeader { | |
| display: none; | |
| width: 100%; | |
| - background: #F4F3F0; } | |
| + background: #f4f3f0; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-cartHeader { | |
| display: table-row; } } | |
| @@ -5919,7 +5135,7 @@ | |
| display: table-cell; | |
| padding: 16px; | |
| text-align: center; | |
| - background: #F4F3F0; | |
| + background: #f4f3f0; | |
| overflow-x: hidden; | |
| font-weight: bold; } | |
| @@ -5950,36 +5166,26 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-cartCompleteRole *, | |
| - .ec-cartCompleteRole *::before, | |
| - .ec-cartCompleteRole *::after { | |
| + .ec-cartCompleteRole *, .ec-cartCompleteRole *::before, .ec-cartCompleteRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-cartCompleteRole img { | |
| width: 100%; } | |
| - | |
| /* | |
| カート内商品 | |
| - | |
| カート内のアイテムを表示するテーブル行です。 | |
| スマホでは非表示となります。 | |
| - | |
| ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart) | |
| - | |
| (カート内に商品がある状態でアクセス) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| .ec-cartTable | |
| +ec-cartRow | |
| - | |
| sg-wrapper: | |
| <div class="ec-cartRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| - | |
| Styleguide 15.1.4 | |
| */ | |
| .ec-cartRow { | |
| @@ -6069,12 +5275,12 @@ | |
| .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img { | |
| display: block; | |
| margin-left: -0.4em; | |
| - width: .8em; | |
| - height: .8em; | |
| + width: 0.8em; | |
| + height: 0.8em; | |
| position: absolute; | |
| top: 28%; | |
| left: 50%; } | |
| - .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton { | |
| + .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled { | |
| margin: 0 2px; | |
| display: inline-block; | |
| border: 2px solid #c9c9c9; | |
| @@ -6089,14 +5295,16 @@ | |
| position: relative; | |
| text-align: center; | |
| background: #fff; } | |
| - .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img { | |
| + .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img { | |
| display: block; | |
| margin-left: -0.4em; | |
| - width: .8em; | |
| - height: .8em; | |
| + width: 0.8em; | |
| + height: 0.8em; | |
| position: absolute; | |
| top: 28%; | |
| left: 50%; } | |
| + .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled { | |
| + cursor: default; } | |
| .ec-cartRow .ec-cartRow__subtotalColumn { | |
| display: none; | |
| border-bottom: 1px dotted #ccc; | |
| @@ -6105,61 +5313,66 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-cartRow .ec-cartRow__subtotalColumn { | |
| display: table-cell; } } | |
| - | |
| +/* | |
| + カート内商品(商品が１の場合) | |
| + 商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。 | |
| + ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart) | |
| + (カート内に商品がある状態でアクセス) | |
| + Markup: | |
| + include /assets/tmpl/elements/15.1.cart.pug | |
| + .ec-cartTable | |
| + +ec-cartRowOnly | |
| + sg-wrapper: | |
| + <div class="ec-cartRole"> | |
| + <sg-wrapper-content/> | |
| + </div> | |
| + Styleguide 15.1.5 | |
| + */ | |
| +.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled { | |
| + cursor: default; } | |
| /* | |
| アラート | |
| - | |
| カート内の商品に問題があることを示す警告メッセージです。 | |
| - | |
| ex [マイページ カート](http://demo3.ec-cube.net/cart) | |
| - | |
| (カート内に商品がある状態でアクセス) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| .ec-cartRole | |
| .ec-cartRole__cart | |
| +ec-alert-warning | |
| - | |
| -Styleguide 15.1.5 | |
| + Styleguide 15.1.6 | |
| */ | |
| .ec-alert-warning { | |
| width: 100%; | |
| padding: 10px; | |
| text-align: center; | |
| - background: #F99; | |
| + background: #f99; | |
| margin-bottom: 20px; } | |
| .ec-alert-warning .ec-alert-warning__icon { | |
| display: inline-block; | |
| + margin-right: 1rem; | |
| width: 20px; | |
| height: 20px; | |
| color: #fff; | |
| fill: #fff; | |
| - position: absolute; | |
| - left: -30px; } | |
| + vertical-align: top; } | |
| .ec-alert-warning .ec-alert-warning__text { | |
| display: inline-block; | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #fff; | |
| position: relative; } | |
| - | |
| /* | |
| アラート(空) | |
| - | |
| カートが空であることを示す警告メッセージです。 | |
| - | |
| ex [マイページ カート](http://demo3.ec-cube.net/cart) | |
| - | |
| (カート内に商品がある状態でアクセス) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.1.cart.pug | |
| .ec-off3Grid | |
| .ec-off3Grid__cell | |
| +ec-alert-warningEnpty | |
| - | |
| -Styleguide 15.1.6 | |
| + Styleguide 15.1.7 | |
| */ | |
| /** | |
| メディアクエリ | |
| @@ -6171,15 +5384,11 @@ | |
| */ | |
| /* | |
| 注文内容確認 | |
| - | |
| カート内 注文内容確認に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ 注文詳細](http://demo3.ec-cube.net/shopping) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.2.order.pug | |
| +ec-orderRole | |
| - | |
| Styleguide 15.2 | |
| */ | |
| .ec-orderRole { | |
| @@ -6212,9 +5421,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-orderRole *, | |
| - .ec-orderRole *::before, | |
| - .ec-orderRole *::after { | |
| + .ec-orderRole *, .ec-orderRole *::before, .ec-orderRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -6235,29 +5442,28 @@ | |
| width: 66.66666%; } } | |
| .ec-orderRole .ec-orderRole__summary { | |
| width: 100%; } | |
| + .ec-orderRole .ec-orderRole__summary .ec-inlineBtn { | |
| + display: inline-block; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-orderRole .ec-orderRole__summary { | |
| width: 33.33333%; | |
| - padding: 0 16px; } } | |
| + padding: 0 16px; } | |
| + .ec-orderRole .ec-orderRole__summary .ec-inlineBtn { | |
| + display: none; } } | |
| .ec-orderRole .ec-borderedList { | |
| margin-bottom: 20px; | |
| border-top: 1px dotted #ccc; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-orderRole .ec-borderedList { | |
| border-top: none; } } | |
| - | |
| /* | |
| 注文履歴詳細 オーダ情報 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ オーダ情報](http://demo3.ec-cube.net/mypage) | |
| (要ログイン → 詳細を見るボタン押下) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.2.order.pug | |
| +ec-orderInfo | |
| - | |
| Styleguide 15.2.1 | |
| */ | |
| .ec-orderOrder { | |
| @@ -6265,18 +5471,13 @@ | |
| .ec-orderOrder .ec-orderOrder__items { | |
| border-bottom: 1px dotted #ccc; | |
| border-top: 1px dotted #ccc; } | |
| - | |
| /* | |
| 注文履歴詳細 お客様情報 | |
| - | |
| マイページ 注文詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.2.order.pug | |
| +ec-orderAccount | |
| - | |
| Styleguide 15.2.2 | |
| */ | |
| .ec-orderAccount { | |
| @@ -6294,18 +5495,13 @@ | |
| float: right; } | |
| .ec-orderAccount .ec-orderAccount__account { | |
| margin-bottom: 16px; } | |
| - | |
| /* | |
| 注文詳細 配送情報 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ 配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.2.order.pug | |
| +ec-orderDelivery | |
| - | |
| Styleguide 15.2.3 | |
| */ | |
| .ec-orderDelivery .ec-orderDelivery__title { | |
| @@ -6313,54 +5509,44 @@ | |
| font-weight: bold; | |
| font-size: 18px; | |
| position: relative; } | |
| - | |
| .ec-orderDelivery .ec-orderDelivery__change { | |
| display: inline-block; | |
| position: absolute; | |
| right: 0; | |
| top: 0; } | |
| - | |
| .ec-orderDelivery .ec-orderDelivery__items { | |
| border-bottom: 1px dotted #ccc; | |
| border-top: 1px dotted #ccc; } | |
| - | |
| .ec-orderDelivery .ec-orderDelivery__address { | |
| margin: 10px 0px 18px; } | |
| .ec-orderDelivery .ec-orderDelivery__address p { | |
| margin: 0; } | |
| - | |
| /* | |
| 注文履歴詳細 支払情報 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ 支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| .ec-orderRole | |
| .ec-orderPayment | |
| .ec-rectHeading | |
| h2 お支払方法 | |
| p 支払方法： 郵便振替 | |
| - | |
| Styleguide 15.2.4 | |
| */ | |
| + | |
| /* | |
| 注文履歴詳細 お問い合わせ | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage) | |
| - | |
| Markup: | |
| .ec-orderRole | |
| .ec-orderConfirm | |
| .ec-rectHeading | |
| h2 お問い合わせ | |
| p 記載なし | |
| - | |
| Styleguide 15.2.5 | |
| */ | |
| + | |
| .ec-orderConfirm { | |
| margin-bottom: 20px; } | |
| @media only screen and (min-width: 768px) { | |
| @@ -6368,19 +5554,14 @@ | |
| margin-bottom: 0; } } | |
| .ec-orderConfirm .ec-input textarea, .ec-orderConfirm .ec-halfInput textarea, .ec-orderConfirm .ec-numberInput textarea, .ec-orderConfirm .ec-zipInput textarea, .ec-orderConfirm .ec-telInput textarea, .ec-orderConfirm .ec-select textarea, .ec-orderConfirm .ec-birth textarea { | |
| height: 96px; } | |
| - | |
| /* | |
| お届け先の複数指定 | |
| - | |
| お届け先の複数指定に関するコンポーネントを定義します。 | |
| - | |
| ex [マイページ お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple) | |
| (商品購入画面 → 「お届け先を追加する」を押下) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/15.2.order.pug | |
| +ec-orderAddAddress | |
| - | |
| Styleguide 15.2.6 | |
| */ | |
| .ec-AddAddress { | |
| @@ -6439,7 +5620,6 @@ | |
| width: 80px; } | |
| .ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action { | |
| margin-bottom: 8px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -6450,59 +5630,21 @@ | |
| */ | |
| /* | |
| 注文履歴一覧 | |
| - | |
| マイページ 注文履歴部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage) | |
| (要ログイン) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/16.1.history.pug | |
| +ec-historyRole | |
| - | |
| Styleguide 16.1 | |
| */ | |
| -.ec-historyRole { | |
| - margin-right: auto; | |
| - margin-left: auto; | |
| - padding-left: 10px; | |
| - padding-right: 10px; | |
| - box-sizing: border-box; | |
| - font-size: 16px; | |
| - font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif; | |
| - line-height: 1.4; | |
| - color: #525263; | |
| - -webkit-text-size-adjust: 100%; | |
| - width: 100%; | |
| - max-width: 1150px; } | |
| - .ec-historyRole:after { | |
| - content: " "; | |
| - display: table; } | |
| - .ec-historyRole:after { | |
| - clear: both; } | |
| - .ec-historyRole textarea { | |
| - /* for chrome fontsize bug */ | |
| - font-family: sans-serif; } | |
| - .ec-historyRole img { | |
| - max-width: 100%; } | |
| - .ec-historyRole html { | |
| - -webkit-box-sizing: border-box; | |
| - -moz-box-sizing: border-box; | |
| - box-sizing: border-box; } | |
| - .ec-historyRole *, | |
| - .ec-historyRole *::before, | |
| - .ec-historyRole *::after { | |
| - -webkit-box-sizing: inherit; | |
| - -moz-box-sizing: inherit; | |
| - box-sizing: inherit; } | |
| - .ec-historyRole img { | |
| - width: 100%; } | |
| .ec-historyRole .ec-historyRole__contents { | |
| padding-top: 1em; | |
| padding-bottom: 16px; | |
| border-top: 1px solid #ccc; | |
| display: flex; | |
| - flex-direction: column; } | |
| + flex-direction: column; | |
| + color: #525263; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-historyRole .ec-historyRole__contents { | |
| flex-direction: row; } } | |
| @@ -6516,24 +5658,48 @@ | |
| width: 100%; } | |
| .ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) { | |
| border-top: none; } | |
| + .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle { | |
| + margin-bottom: 8px; | |
| + font-size: 1.6rem; | |
| + font-weight: bold; } | |
| + .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice { | |
| + margin-bottom: 8px; | |
| + font-size: 1.6rem; | |
| + font-weight: bold; } | |
| @media only screen and (min-width: 768px) { | |
| .ec-historyRole .ec-historyRole__detail { | |
| width: 66.6666%; | |
| border-top: none; } } | |
| - | |
| +/* | |
| + 注文履歴一覧 規格 | |
| + マイページ 注文履歴内アイテムの規格を定義します。 | |
| + ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage) | |
| + (要ログイン) | |
| + Markup: | |
| + include /assets/tmpl/elements/16.1.history.pug | |
| + +ec-historyRole-option | |
| + Styleguide 16.1.1 | |
| + */ | |
| +.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption { | |
| + display: inline-block; | |
| + margin-bottom: 8px; | |
| + margin-right: 0.5rem; | |
| + font-size: 1.6rem; } | |
| + .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after { | |
| + display: inline-block; | |
| + padding-left: 0.5rem; | |
| + content: "/"; | |
| + font-weight: bold; } | |
| /* | |
| 注文履歴一覧ヘッダ | |
| - | |
| 注文履歴一覧で使用するヘッダのコンポーネントを定義します。 | |
| - | |
| ex [マイページ 注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage) | |
| (要ログイン) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/16.1.history.pug | |
| +ec-historyHeader | |
| - | |
| -Styleguide 16.1.1 | |
| + p hofe | |
| + Styleguide 16.1.2 | |
| */ | |
| .ec-historyListHeader .ec-historyListHeader__date { | |
| font-weight: bold; | |
| @@ -6542,7 +5708,6 @@ | |
| .ec-historyListHeader .ec-historyListHeader__date { | |
| font-weight: bold; | |
| font-size: 20px; } } | |
| - | |
| .ec-historyListHeader .ec-historyListHeader__action { | |
| margin: 16px 0; } | |
| .ec-historyListHeader .ec-historyListHeader__action a { | |
| @@ -6551,60 +5716,54 @@ | |
| @media only screen and (min-width: 768px) { | |
| .ec-historyListHeader .ec-historyListHeader__action a { | |
| font-size: 14px; } } | |
| - | |
| /** | |
| * ECCUBE 固有のスタイルユーティリティ | |
| */ | |
| +/** | |
| + メディアクエリ | |
| + SP フォーストで記述する。 | |
| + Twitter Bootstrap デフォルト準拠 | |
| + */ | |
| /* | |
| 注文履歴詳細 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ 注文詳細](http://demo3.ec-cube.net/mypage) | |
| (要ログイン → 詳細を見るボタン押下) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/16.2.historyDetail.pug | |
| +ec-historyDetailRole | |
| - | |
| Styleguide 16.2 | |
| */ | |
| /* | |
| 注文履歴詳細 メール履歴 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ メール履歴](http://demo3.ec-cube.net/mypage) | |
| (要ログイン → 詳細を見るボタン押下) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/16.2.historyDetail.pug | |
| +ec-historyDetailMail | |
| - | |
| Styleguide 16.2.5 | |
| */ | |
| .ec-orderMails .ec-orderMails__item { | |
| padding-bottom: 10px; | |
| border-bottom: 1px dotted #ccc; } | |
| - | |
| .ec-orderMails .ec-orderMails__time { | |
| margin: 0; } | |
| - | |
| .ec-orderMails .ec-orderMails__body { | |
| display: none; } | |
| - | |
| + .ec-orderMails .ec-inlineBtn { | |
| + display: none; } | |
| + @media only screen and (min-width: 768px) { | |
| + .ec-orderMails .ec-inlineBtn { | |
| + display: inline-block; } } | |
| /* | |
| 注文履歴詳細 メール履歴個別 | |
| - | |
| マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ メール履歴個別](http://demo3.ec-cube.net/mypage) | |
| (要ログイン → 詳細を見るボタン押下) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/16.2.historyDetail.pug | |
| +ec-historyDetailMailHistory | |
| - | |
| Styleguide 16.2.6 | |
| */ | |
| .ec-orderMail { | |
| @@ -6618,41 +5777,33 @@ | |
| .ec-orderMail .ec-orderMail__time { | |
| margin-bottom: 4px; } | |
| .ec-orderMail .ec-orderMail__link a { | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| .ec-orderMail .ec-orderMail__link a:hover { | |
| - color: #33A8D0; } | |
| + color: #33a8d0; } | |
| .ec-orderMail .ec-orderMail__close a { | |
| - color: #0092C4; | |
| + color: #0092c4; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| .ec-orderMail .ec-orderMail__close a:hover { | |
| - color: #33A8D0; } | |
| - | |
| + color: #33a8d0; } | |
| /* | |
| 住所一覧 | |
| - | |
| カート 注文詳細 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/17.1.address.pug | |
| +ec-addressList | |
| +ec-addressRole | |
| - | |
| sg-wrapper: | |
| <div class="ec-addressRole"> | |
| <sg-wrapper-content/> | |
| </div> | |
| - | |
| Styleguide 17.1 | |
| - | |
| */ | |
| .ec-addressRole .ec-addressRole__item { | |
| border-top: 1px dotted #ccc; } | |
| - | |
| .ec-addressRole .ec-addressRole__actions { | |
| margin-top: 32px; | |
| padding-bottom: 20px; | |
| @@ -6663,7 +5814,6 @@ | |
| width: 100%; | |
| position: relative; | |
| border-bottom: 1px dotted #ccc; } | |
| - | |
| .ec-addressList .ec-addressList__remove { | |
| display: table-cell; | |
| vertical-align: middle; | |
| @@ -6672,19 +5822,16 @@ | |
| .ec-addressList .ec-addressList__remove .ec-icon img { | |
| width: 1em; | |
| height: 1em; } | |
| - | |
| .ec-addressList .ec-addressList__address { | |
| display: table-cell; | |
| vertical-align: middle; | |
| padding: 16px; | |
| margin-right: 4em; } | |
| - | |
| .ec-addressList .ec-addressList__action { | |
| position: relative; | |
| vertical-align: middle; | |
| top: 27px; | |
| right: 0; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -6692,19 +5839,13 @@ | |
| */ | |
| /* | |
| パスワードリセット | |
| - | |
| カート 注文詳細 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot) | |
| - | |
| (カート内に商品がある状態でアクセス) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/18.1.password.pug | |
| +ec-passwordRole | |
| - | |
| Styleguide 18.1 | |
| - | |
| */ | |
| .ec-forgotRole { | |
| margin-right: auto; | |
| @@ -6733,9 +5874,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-forgotRole *, | |
| - .ec-forgotRole *::before, | |
| - .ec-forgotRole *::after { | |
| + .ec-forgotRole *, .ec-forgotRole *::before, .ec-forgotRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -6745,7 +5884,6 @@ | |
| font-size: 16px; } | |
| .ec-forgotRole .ec-forgotRole__form { | |
| margin-bottom: 16px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -6753,17 +5891,12 @@ | |
| */ | |
| /* | |
| 会員登録 | |
| - | |
| 新規会員登録 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [新規会員登録画面 会員登録](http://demo3.ec-cube.net/entry) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/19.1.register.pug | |
| +ec-registerRole | |
| - | |
| Styleguide 19.1 | |
| - | |
| */ | |
| .ec-registerRole { | |
| margin-right: auto; | |
| @@ -6792,9 +5925,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-registerRole *, | |
| - .ec-registerRole *::before, | |
| - .ec-registerRole *::after { | |
| + .ec-registerRole *, .ec-registerRole *::before, .ec-registerRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -6838,15 +5969,12 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-registerCompleteRole *, | |
| - .ec-registerCompleteRole *::before, | |
| - .ec-registerCompleteRole *::after { | |
| + .ec-registerCompleteRole *, .ec-registerCompleteRole *::before, .ec-registerCompleteRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-registerCompleteRole img { | |
| width: 100%; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -6854,17 +5982,12 @@ | |
| */ | |
| /* | |
| お問い合わせ | |
| - | |
| お問い合わせ に関する Project コンポーネントを定義します。 | |
| - | |
| ex [お問い合わせ](http://demo3.ec-cube.net/contact) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/19.2.contact.pug | |
| +ec-contactRole | |
| - | |
| Styleguide 19.2 | |
| - | |
| */ | |
| .ec-contactRole { | |
| margin-right: auto; | |
| @@ -6893,9 +6016,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-contactRole *, | |
| - .ec-contactRole *::before, | |
| - .ec-contactRole *::after { | |
| + .ec-contactRole *, .ec-contactRole *::before, .ec-contactRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -6933,9 +6054,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-contactConfirmRole *, | |
| - .ec-contactConfirmRole *::before, | |
| - .ec-contactConfirmRole *::after { | |
| + .ec-contactConfirmRole *, .ec-contactConfirmRole *::before, .ec-contactConfirmRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -6973,15 +6092,12 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-contactCompleteRole *, | |
| - .ec-contactCompleteRole *::before, | |
| - .ec-contactCompleteRole *::after { | |
| + .ec-contactCompleteRole *, .ec-contactCompleteRole *::before, .ec-contactCompleteRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-contactCompleteRole img { | |
| width: 100%; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -6989,18 +6105,13 @@ | |
| */ | |
| /* | |
| お客様情報の入力 | |
| - | |
| ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。 | |
| - | |
| ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/19.3.customer.pug | |
| +ec-customerRole | |
| hoge | |
| - | |
| Styleguide 19.3 | |
| - | |
| */ | |
| .ec-customerRole { | |
| margin-right: auto; | |
| @@ -7029,9 +6140,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-customerRole *, | |
| - .ec-customerRole *::before, | |
| - .ec-customerRole *::after { | |
| + .ec-customerRole *, .ec-customerRole *::before, .ec-customerRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -7072,9 +6181,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-contactConfirmRole *, | |
| - .ec-contactConfirmRole *::before, | |
| - .ec-contactConfirmRole *::after { | |
| + .ec-contactConfirmRole *, .ec-contactConfirmRole *::before, .ec-contactConfirmRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -7112,15 +6219,12 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-contactCompleteRole *, | |
| - .ec-contactCompleteRole *::before, | |
| - .ec-contactCompleteRole *::after { | |
| + .ec-contactCompleteRole *, .ec-contactCompleteRole *::before, .ec-contactCompleteRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| .ec-contactCompleteRole img { | |
| width: 100%; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -7130,6 +6234,7 @@ | |
| 0% { | |
| opacity: 0; | |
| visibility: hidden; } | |
| + | |
| 100% { | |
| opacity: 1; | |
| visibility: visible; } } | |
| @@ -7138,23 +6243,18 @@ | |
| 0% { | |
| opacity: 1; | |
| visibility: visible; } | |
| + | |
| 100% { | |
| opacity: 0; | |
| visibility: hidden; } } | |
| - | |
| /* | |
| 404ページ | |
| - | |
| 404 エラー画面で使用するページコンポーネントです。 | |
| - | |
| ex [404エラー画面](http://demo3.ec-cube.net/404) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/20.1.404.pug | |
| +ec-404Role | |
| - | |
| Styleguide 20.1 | |
| - | |
| */ | |
| .ec-404Role { | |
| font-size: 16px; | |
| @@ -7176,9 +6276,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-404Role *, | |
| - .ec-404Role *::before, | |
| - .ec-404Role *::after { | |
| + .ec-404Role *, .ec-404Role *::before, .ec-404Role *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -7190,7 +6288,6 @@ | |
| .ec-404Role .ec-404Role__title { | |
| font-weight: bold; | |
| font-size: 25px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -7198,17 +6295,12 @@ | |
| */ | |
| /* | |
| 退会手続き | |
| - | |
| 退会手続きで使用するページコンポーネントです。 | |
| - | |
| ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/21.1.withdraw.pug | |
| +ec-withdrawRole | |
| - | |
| Styleguide 21.1 | |
| - | |
| */ | |
| .ec-withdrawRole { | |
| margin-right: auto; | |
| @@ -7239,9 +6331,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-withdrawRole *, | |
| - .ec-withdrawRole *::before, | |
| - .ec-withdrawRole *::after { | |
| + .ec-withdrawRole *, .ec-withdrawRole *::before, .ec-withdrawRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } | |
| @@ -7257,37 +6347,27 @@ | |
| .ec-withdrawRole .ec-icon img { | |
| width: 100px; | |
| height: 100px; } | |
| - | |
| /* | |
| 退会手続き実行確認 | |
| - | |
| 退会手続き実行確認で使用するページコンポーネントです。 | |
| - | |
| ex [退会手続き 退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/21.1.withdraw.pug | |
| +ec-withdrawConfirm | |
| - | |
| Styleguide 21.1.2 | |
| - | |
| */ | |
| .ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel { | |
| margin-bottom: 20px; } | |
| - | |
| .ec-withdrawConfirmRole .ec-withdrawConfirmRole__title { | |
| margin-bottom: 16px; | |
| font-weight: bold; | |
| font-size: 24px; } | |
| - | |
| .ec-withdrawConfirmRole .ec-withdrawConfirmRole__description { | |
| margin-bottom: 32px; | |
| font-size: 16px; } | |
| - | |
| .ec-withdrawConfirmRole .ec-icon img { | |
| width: 100px; | |
| height: 100px; } | |
| - | |
| /** | |
| メディアクエリ | |
| SP フォーストで記述する。 | |
| @@ -7295,17 +6375,12 @@ | |
| */ | |
| /* | |
| 会員情報編集完了 | |
| - | |
| 会員情報編集完了で使用するページコンポーネントです。 | |
| - | |
| ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete) | |
| - | |
| Markup: | |
| include /assets/tmpl/elements/22.1.editComplete.pug | |
| +ec-userEditCompleteRole | |
| - | |
| Styleguide 22.1 | |
| - | |
| */ | |
| .ec-userEditCompleteRole { | |
| margin-right: auto; | |
| @@ -7336,9 +6411,7 @@ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| - .ec-userEditCompleteRole *, | |
| - .ec-userEditCompleteRole *::before, | |
| - .ec-userEditCompleteRole *::after { | |
| + .ec-userEditCompleteRole *, .ec-userEditCompleteRole *::before, .ec-userEditCompleteRole *::after { | |
| -webkit-box-sizing: inherit; | |
| -moz-box-sizing: inherit; | |
| box-sizing: inherit; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment