Pickles 2 CSS Components.
npm install px2styleInstall with npm.
``bash`
$ npm install --save px2style
Install with composer.
`bash`
$ composer require pickles2/px2style
`scss`
:root {
--px2-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Helvetica Neue", "Arial", sans-serif;
--px2-main-color: #00a0e6;
--px2-text-color: #333;
--px2-background-color: #f9f9f9;
--px2-border-color: #f0f0f0;
}
- .px2-form-input-list, .px2-vertical-list, .px2-horizontal-list, .px2-note-list, および テーマスタイル の微修正。.px2-image-slider
- の重なり順に関する問題を修正。
- .px2-viewport-fit のレイアウトが崩れる場合がある問題を修正。
- .px2-viewport-fit のポリシーを変更: フィットさせる処理はテーマによる拡張に委ねることにした。
- px2-btn, px2-a について、デバイスによるスタイリングの差異を修正。px2-linklist
- と ショルダーメニュー付き見出し の組み合わせで、ショルダーメニューが表示されない不具合を修正。
- px2-modal: スクロールロックが無効になっていた不具合を修正。
- プレースホルダ画像を broccoli.getNoimagePlaceholder() から取得するようになった。
- コンテナクエリ導入に関する不具合の修正。
- px2style.closeModal()、 modal.close() の第一引数が、 onclose() の引数として呼び出し側に返されるようになった。:lists/index
- 目次モジュール の編集中の表示を英語化した。
- メディアクエリで制御されていたモジュールを、コンテナクエリでの制御に移行した。
- その他、いくつかの細かい改善。
- Image List フィールドを追加。
- Image Slider モジュールを追加。
- 従来のカルーセルモジュールに非推奨フラグを追加。
- px2-modal: タブキー操作に関する動作の改善。px2-modal
- の contentFill オプションを有効にした場合のDOM構造を変更した。filenameAutoSetter
- 画像フィールドの オプションのデフォルトを、 従来の ifEmpty から random に変更した。format
- 画像フィールドの オプションが、デフォルトで image/webp に変換されるようにした。format
- 画像フィールドの オプションに、フォーマット変換を行わない Boolean false または String pass の設定を追加した。
- その他、いくつかの細かい改善。
- px2-modal: ダークモードでのスタイリングに関する修正。auto
- テーマを追加した。px2-horizontal-list
- のマージン設定を改善。
- その他、いくつかの細かい改善。
- .px2-index-list を追加。darkmode
- テーマを更新した。
- その他、いくつかの細かい改善。
- imageフィールドの自動リサイズ機能で、GIFを登録された場合に変換しないように変更した。
- px2style.css に、いくつかのモジュールがビルドされていなかった不具合を修正。px2style.css
- とテーマの分離に関する不具合の修正。
- .px2-viewport-fit の処理を改善した。.px2-grid
- の内容が幅に満たない場合に、中央に揃えられるようになった。
- .px2-p、 .px2-section、 .px2-notice、 .px2-tabs のスタイルの修正。darkmode
- ベーススタイルシートと defaultテーマ が切り離された。
- テーマを更新した。
- px2style.form() を追加。.px2-table.px2-table--dl
- を追加。.px2-radio-switch
- を追加。.px2-tabs
- に、タブの折返しオプションを追加.format
- imageフィールドに、登録した画像が自動的にリサイズされる機能を追加した。
- imageフィールドに、 オプションを追加した。
- その他、いくつかの細かい改善。
- .px2-a のスタイリングを改善。
- モジュールのカテゴリ分けを改善した。
- px2style__image フィールドを追加。.px2-linklist
- のスタイリングを改善。.px2-grid
- に 5/6幅 を追加した。.px2-grid
- のマージン設計を改善。.px2-image
- から、 href, target フィールドを削除した。.px2-image-banner-link
- 新しいモジュール を追加した。.px2-grid
- bug fix: で 3/4幅 が効かない不具合を修正。
- 各Broccoliモジュールに、モジュールIDを明示した。
- その他、いくつかの細かい改善。
- px2style.modal() が重ねて開かれたとき、背景色が重なりすぎる問題を修正した。px2style.modal()
- について、要素への自動フォーカス機能を改善した。px2style.modal()
- に、オプション height, contentFill を追加。px2style.getOpenedModalCount()
- を追加。px2style.modal()
- リンクリストのスタイリングを改善。
- 画像モジュールで、拡大画像のモーダルを で開くように修正した。
- その他、細かい内部コードの改善。
- px2style.modal() のオプションに onbgclick を追加した。px2style.modal()
- のオプションに type を追加した。drawer-left と drawer-right を追加した。px2style.modal()
- で、タイトル、ボタンがない場合に、自動的にヘッダー、フッターを隠すようになった。
- Broccoliモジュールを追加し、モジュール機能が統合された。
- @layer px2style を導入した。px2style.modal()
- で、背景がスクロールされないようにする制御を追加した。px2style.modal()
- のコンテナを dialog 要素に変更した。.px2-section
- セクションモジュール を追加した。.px2-button
- 、 .px2-input、 .px-input-group, .px2-form-input-list の微調整。.px2-header
- 、 .px2-editor-type、 .px2-document、 .px2-slim を削除。px2style.setConfig()
- 、 px2style.getConfig() を廃止。
- ダークモードを テーマファイルに分離した。
- その他、いくつかの不具合の修正。
- px2style.modal() で、特定の操作により、背景にフォーカスを移動できる問題を修正。
- px2style.modal() で、モーダルを開いた直後に、モーダルのタイトルにフォーカスするようになった。px2style.modal()
- に、 replaceBody() メソッドを追加。.px2-note
- 、 .px2-error を追加。
- その他、いくつかの不具合の修正。
- .px2-modal で、閉じるボタンクリック時にフォームを送信してしまうことがある問題を修正。px2style.modal()
- は modalオブジェクトを返すようになった。
- .px2-modal で、フォームロック中に閉じるボタンを隠すようになった。
- .px2-header で、スモールスクリーンのときにショルダーメニューに収められるグローバルメニューの下に仕切り線を追加した。.px2-editor-type--html-gui
- のラベルを GUI から Block に変更。.px2-loading
- は .px2-modal よりも手前に表示されるようになった。.px2-open-in-new-window
- を追加。.px2-modal
- のスタイル改善。.px2-notice
- のダークモード対応を追加。
- カスタムプロパティが設定されていない場合に、デフォルトの値が適用されるようになった。
- その他いくつかの細かい修正。
- --px2-text-color、 --px2-background-color を追加。
- .px2-modal に、一時的にフォーム操作をできなくする機能を追加。
- その他いくつかの細かい修正。
- ダークモードのコントラストをやや下げた。
- .px2-modal に、一時的に閉じれなくする機能を追加。.px2-input
- に、エラー表現 .px2-input--error を追加。.px2-form-input-list
- フォームの入力リストモジュール を追加。.px2-form-submit-area
- フォームの送信エリアモジュール を追加。
- その他いくつかの細かい修正。
- .px2-grid を追加。.px2-modal
- に閉じるボタンを追加。.px2-input--block
- を追加。body.px2-darkmode
- ダークモード対応 を追加。
- .px2-note-list を追加。.px2-btn
- で disabled が有効なとき、マウス操作に反応して見える問題を修正。burette
- スペルミスの修正: -> bulletadditionalClassName
- JavaScriptの初期化オプションに を追加。styles.css
- ファイル名を変更: -> px2style.css, scripts.js -> px2style.js
- .px2-btn--toggle-on を追加。.px2-input
- を追加。.px2-input-group
- を追加。
- .px2-notice を追加。px2style.flashMessage()
- を追加。.px2-modal
- のスタイリングを改善。px2style.modal()
- で、タブキー操作に関する制御を改善。px2style.modal()
- が、ESCキーで閉じるようになった。px2style.modal()
- に、オプション onclose を追加。px2style.modal()
- が、多重に開けるようになった。
- .px2-modal のスタイリングを改善。px2style.modal()
- に、オプション buttonsSecondary を追加。
- .px2-btn が、 macOS Catalina で適切なフォントで表示されない問題を修正。.px2-font-size-ll
- ユーティリティ , .px2-font-size-l, .px2-font-size-s, .px2-font-size-ss を追加。.px2-text-align-left
- ユーティリティ , .px2-text-align-center, .px2-text-align-right を追加。.px2-vertical-list
- を追加。
- その他いくつかの細かい修正。
- .px2-header で、サブメニューの開閉制御に関わる問題を修正。.px2-header
- が、小さい画面のときを考慮してスタイルが変化するようになった。.px2-header
- で、ハンバーガーメニューの書き方を修正。
- px2style.message() を px2style.loadingMessage() に改名した。
- .px2-header を追加。px2style.loading()
- 、 px2style.message()、 px2style.closeLoading() を追加。
- その他いくつかの細かい修正。
- .px2-link を追加。.px2-link.px2-link--burette
- を追加。.px2-editor-type
- に alias を追加。.px2-editor-type__
- を .px2-editor-type.px2-editor-type-- に変更。(ただし古い書き方も互換性維持のため残します)px2-modal
- List カテゴリを追加。
- ボタンアクションに "押した感触" を追加。
- に form オプションを追加。
- .px2-table を追加。.px2-document
- を追加。.px2-p
- を追加。.px2-slim
- を追加。.px2-responsive
- を追加。px2style.modal()
- に、オプション width を追加。
- ボタンの背景色を不透過にした。
- px2-modal を追加。window.px2style` に変更。
- JavaScriptオブジェクト名を
- Initial Release.
MIT License
- Tomoya Koyanagi
- website:
- Twitter: @tomk79