AFormsは、scssを編集してデザインをカスタマイズできるように作られています。
このシリーズでは、3つの記事に分けて、フォームのデザインをカスタマイズする方法を説明しています。
第3回の今回は、scssファイルで使われているクラスを解説します。
v1.1.0時点でのクラスです。
.wq-Image
画像を表示する汎用部品です。
指定されたサイズの中で、指定されたスケーリング方法で画像を表示します。
.wq-scaling-???
画像のスケーリングを指定するモディファイアです。coverは外接（表示領域を画像がギリギリ埋め尽くすようにスケーリング）です。containは内接（表示領域に画像がギリギリ収まるようにスケーリング）です。center（既定値）は拡大しない内接（表示領域に画像がギリギリ収まるように縮小しますが、拡大はしません）です。
.wq-Image > .wq–img
画像部品の中のimgタグの要素です。
.wq-TextInput
テキストの入力ボックスを表示する汎用部品です。1行です。
.wq-size-???
入力ボックスの幅を指定するモディファイアです。 nanoは一番小さく、半角3文字分程度です。miniは半角5文字分程度です。smallは半角8文字分程度です。normal（既定値）は半角13文字分程度です。fullは横幅いっぱいです。
.wq-TextArea
テキストの入力ボックスを表示する汎用部品です。複数行です。
.wq-size-???
入力ボックスの高さを指定するモディファイアです。nanoは一番小さく、2行分程度です。miniは3行分程度です。smallは4行分程度です。normal（既定値）は6行分程度です。fullは10行分程度です。
.wq-Radio
ラジオボタンを表示する汎用部品です。
.wq-Checkbox
チェックボックスを表示する汎用部品です。
.wq-Echo
入力画面で入力されたデータを、確認画面で表示するための汎用部品です。
.wq-Button
ボタンを表示する汎用部品です。
.wq-type-???
ボタンの種類を指定するモディファイアです。
normal（既定値）は通常のボタンを表します。
primaryは、それが主要なボタンであることを表します。
.wq-InputGroup
子の部品を横に並べて表示する汎用部品です。
.wq-gutter-???
子の部品の間の隙間を指定するモディファイアです。none（既定値）は隙間を作りません。miniは最小の隙間を作ります。smallはminiより大きな隙間を作ります。
.wq-Control
ラベル、入力部品、注意書き、エラーメッセージを1つにまとめ上げて、フォームの入力フィールドとして成立させるための部品です。「コントロール」と呼んでいます。
.wq-Control > .wq–header
コントロールのヘッダー部の要素です。
ヘッダー部にはラベルが表示されます。
.wq-content-empty
.wq-Control > .wq--headerのモディファイアで、コントロールのラベルが空であることを表します。
.wq-Control > .wq–header > .wq–label
コントロールのラベル要素です。
.wq-Control > .wq–header > .wq–label > .wq–required
コントロールが入力必須項目の場合に表示される「必須」の文字の要素です。
.wq-Control > .wq–body
コントロールのボディ部の要素です。
ボディ部は入力部品、注意書き、エラーメッセージで構成されています。
.wq-Control > .wq–body > .wq–note
コントロールの注意書きの要素です。
このタグの中には任意のHTMLが入る可能性があります。
.wq-Control > .wq–body > .wq–message
コントロールのエラーメッセージの要素です。
入力内容に問題がある場合に表示されます。
.wq-Option
料金計算の選択肢を表示する部品です。
.wq-Option > .wq–input
選択肢の状態を表す要素です。
.wq-Option > .wq–label
選択肢のラベルとなる要素です。
.wq-Option > .wq–label > .wq–media
選択肢のメディア部を表示する要素です。
.wq-Option > .wq–label > .wq–main
選択肢のメイン部を表示する要素です。
.wq-Option > .wq–label > .wq–main > .wq–name
選択肢の名前を表示する要素です。
.wq-Option > .wq–label > .wq–main > .wq–note
選択肢の注意書きを表示する要素です。
.wq-Option > .wq–label > .wq–main > .wq–prices
選択肢の料金をまとめて表示する要素です。
「まとめて」というのは、選択肢は「通常料金」と「（販売）料金」を並べて表示できるからです。この要素はこれらの料金をグループ化します。
.wq-Option > .wq–label > .wq–main > .wq-prices > .wq–normalPrice
選択肢の通常料金を表示する要素です。
.wq-Option > .wq–label > .wq–main > .wq–prices > .wq–price
選択肢の（販売）料金を表示する要素です。
.wq-Selector
料金計算の選択項目を表す部品です。
.wq-Selector > .wq–head
選択項目のヘッダーを表す要素です。
.wq-Selector > .wq–head > .wq–media
選択項目のヘッダーのメディア部を表す要素です。
.wq-Selector > .wq–head > .wq–main
選択項目のヘッダーのメイン部を表す要素です。
.wq-Selector > .wq–head > .wq–main > .wq–name
選択項目の名前を表す要素です。
.wq-Selector > .wq–head > .wq–main > .wq–note
選択項目の注意書きを表す要素です。
.wq-Selector > .wq–head > .wq–message
選択項目のエラーメッセージを表す要素です。
.wq-Selector > .wq–body
選択項目の本体部分を表す要素です。
この中に選択肢（.wq-Option）が複数配置されます。
.wq-Quantity
数量項目の部品です。.wq-Quantityの構造は.wq-Selectorと似ています。
.wq-Quantity > .wq–head
数量項目のヘッダーを表す要素です。
.wq-Quantity > .wq–head > .wq–media
数量項目のヘッダーのメディア部を表す要素です。
.wq-Quantity > .wq–head > .wq–main
数量項目のヘッダーのメイン部を表す要素です。
.wq-Quantity > .wq–head > .wq–main > .wq–name
数量項目の名前を表す要素です。
.wq-Quantity > .wq–head > .wq–main > .wq–note
数量項目の注意書きを表す要素です。
.wq-Quantity > .wq–head > .wq–message
数量項目のエラーメッセージを表す要素です。
.wq-Quantity > .wq–body
数量項目の本体部分を表す要素です。
この中に、入力ボックス（.wq-InputText）と単位を含む入力グループ（.wq-InputGroup）が配置されます。
.wq-Quantity > .wq–body .wq–suffix
数量項目の入力補助となる「単位」を表す要素です。
.wq-HNavigator
フロー形式の見積計算を表す部品です。
.wq-HNavigator > .wq–items
フロー形式の見積計算の各項目をグループ化する要素です。
この要素の中に選択項目や数量項目が配置されます。
.wq-WNavigator
ウィザード形式の見積計算を表す部品です。
.wq-is-active
.wq-WNavigator部品のモディファイアで、ウィザードダイアログが表示されていることを表します。
.wq-WNavigator > .wq–base
.wq-WNavigator部品の「地」の要素です。ウィザードダイアログが表示されていなくても、この部分は表示されます。
通常は、ここにはウィザードダイアログを開くためのボタンだけが配置されています。
.wq-WNavigator > .wq–base > .wq–message
エラーメッセージを表す要素です。
.wq-WNavigator > .wq–overlay
ウィザードダイアログが表示される際に、「地」の部分を覆うための要素です。
ウィザードダイアログの親です。
.wq-WNavigator > .wq–overlay > .wq–dialog
ウィザードダイアログを表す要素です。
.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–main
ウィザードダイアログの本体部分を表す要素です。
この中でスライドが動きます。
.wq-is-flipped
wq-WNavigator > .wq--overlay > .wq--dialog > .wq--mainのモディファイアで、スライドを逆方向に遷移させるべきであることを表します。
.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–main > .wq–slide
ウィザードダイアログのスライドを表す要素です。
.wq-WNavigator > .wq–overlay > .wq–dialog > .wq–action
ウィザードダイアログの下部に表示されるアクションボタンのリストを表す要素です。
.wq-Monitor
計算された見積を表示する部品です。
.wq-Monitor > .wq–menu
見積表示を操作するためのメニューを表す要素です。
.wq-Monitor > .wq–entries
見積表示の明細行をまとめる要素です。ヘッダ行を含みます。
.wq-Monitor > .wq–entries > .wq–entry
見積表示の行を表す要素です。
.wq-Monitor > .wq–entries > .wq–entry > .wq–prop
見積表示の列を表す要素です。
.wq-Monitor > .wq–footer
見積表示の合計行をまとめる要素です。
.wq-Monitor > .wq–footer > .wq–entry
見積表示の合計行を表す要素です。
.wq-NavBar
ナビゲーションバーを表す部品です。
.wq-is-monitor-shown
ナビゲーションバーのモディファイアで、ユーザーの操作により明示的に見積表示（.wq-Monitor）が表示されたことを表します。
.wq-NavBar > .wq–progress
入力の進み具合を表す要素です。
.wq-NavBar > .wq–progress > .wq–bar
入力の進み具合を表示するプログレスバーの要素です。
.wq-NavBar > .wq–progress > .wq–bar > .wq–bar-content
プログレスバーの「進み具合」を表す要素です。
.wq-NavBar > .wq–progress > .wq–min
入力の進み具合を数字で表現した場合の、初期状態の数値を表す要素です。
.wq-NavBar > .wq–progress > .wq–current
入力の進み具合を数字で表現した場合の、現在の数値を表す要素です。
.wq-NavBar > .wq–progress > .wq-max
入力の進み具合を数字で表現した場合の、最終状態の数値を表す要素です。
.wq-NavBar > .wq–progress > .wq–percentage
入力の進み具合をパーセンテージで表現した場合の数値を表す要素です。
.wq-NavBar > .wq–commands
フォーム全体に関わる操作を行うためのボタンをグループ化する要素です。
.wq-Attributes
お客様情報の入力欄をまとめる部品です。
この中に.wq-Controlが配置されます。
.wq-Form
フォーム全体をまとめる部品です。
.wq-Form > .wq–lead
フォームのリード文を表す要素です。
.wq-lct-enabled
部品や要素がライフサイクルトランジションをサポートすることを表すモディファイアです。
このクラスが付いている部品や要素は、下記の.wq-is-createdや.wq-is-removedを用いて、作成時・削除時のCSSトランジションを記述できます。
.wq-is-created
要素が作られた直後であることを示します。
CSSトランジションで使うことを想定しています。
.wq-is-removed
要素が削除される直前であることを示します。
CSSトランジションで使うことを想定しています。
.wq-is-run
要素がトランジションの最中であることを表します。
.wq-for-created
トランジションが「作成」のために行われていることを表します。
.wq-is-invalid
入力ボックスに対するユーザーの入力が適切でないことを表します。
.wq-is-confirming
確認画面を表示中であることを表します。
.wq-belongs-???
このモディファイアが付与された要素が、どの部品に属しているかを教えます。
.wq-for-???
このモディファイアが付与された要素が、何のために使われているかを教えます。
.wq-x-suspended
モーダルが表示されているときに、「地」のhtml要素とbody要素に付与されます。「地」の文書のスクロールを無効にするために使われます。
en_US
ja
AForms
AForms Eats