latest
latest
検証コントロールのCSS
本製品の検証コントロールに適用できるCSSの一覧をこちらに記載します。
これらのCSSは以下の通知に適用されます。
- ツールチップ通知（GcTipNotifier）
- アイコン通知（GcIconNotifier）
- コントロール状態通知（GcControlStateNotifier）
ツールチップ通知
| CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
| .gcim-notify__tip-content （ツールチップの基本スタイル） |
境界線 | border-width |
| 角丸 | border-radius | |
| フォント | font-family, font-weight | |
| 影 | box-shadow | |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-content 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-content （ツールチップの色） |
文字色 | color |
| 背景色 | background-color | |
| 境界線の色 | border-color | |
| .gcim-notify__tip-arrow （ツールチップの矢印） |
矢印の大きさ | border-width |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-arrow.right 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-arrow.right （ツールチップをコントロールの右に表示する場合の矢印） |
矢印の色 | border-color: [上] [右] [下] [左](例) border-color: transparent #ff0000 transparent transparent |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-arrow.left 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-arrow.left （ツールチップをコントロールの左に表示する場合の矢印） |
矢印の色 | border-color: [上] [右] [下] [左](例) border-color: transparent transparent transparent #ff0000 |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-arrow.top 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-arrow.top （ツールチップをコントロールの上に表示する場合の矢印） |
矢印の色 | border-color: [上] [右] [下] [左](例) border-color: #ff0000 transparent transparent transparent |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-arrow.bottom 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-arrow.bottom （ツールチップをコントロールの下に表示する場合の矢印） |
矢印の色 | border-color: [上] [右] [下] [左](例) border-color: transparent transparent #ff0000 transparent |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-close div 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-close div （ツールチップのクローズボタン） |
ボタンの色 | background-color |
|
【検証失敗時のスタイル】 [gcim-notify__tip-state='fail'] .gcim-notify__tip-close:hover div 【検証成功時のスタイル】 [gcim-notify__tip-state='success'] .gcim-notify__tip-close:hover div （ホバー時のクローズボタン） |
ボタンの色 | background-color |
アイコン通知
| CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
|
【検証失敗時のスタイル】 .gcim-notify__icon[gcim-notify__icon-state='fail'] 【検証成功時のスタイル】 .gcim-notify__icon[gcim-notify__icon-state='success'] （通知アイコン） |
アイコン画像 | background-image |
コントロール状態通知
| CSSクラス（概要） | 適用箇所 | CSSプロパティ |
|---|---|---|
|
【検証失敗時のスタイル】 .gcim-notify__state-container[gcim-notify__control-state='fail'] 【検証成功時のスタイル】 .gcim-notify__state-container[gcim-notify__control-state='success'] （コントロールの境界線） |
境界線の色 | border-color |
| 境界線のスタイル | border-style | |
| 境界線の太さ | border-width | |
|
【検証失敗時のスタイル】 .gcim-notify__state-container[gcim-notify__control-state='fail'].gcim-notify__state-input 【検証成功時のスタイル】 .gcim-notify__state-container[gcim-notify__control-state='success'].gcim-notify__state-input （コントロールのテキスト） |
文字色 | color |