Pickles 2 CSS components.
Install with npm.
$ npm install --save px2styleInstall with composer.
$ composer require pickles2/px2style: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;
}-
px2style.closeModal()、modal.close()の第一引数が、onclose()の引数として呼び出し側に返されるようになった。 - 目次モジュール
:lists/indexの編集中の表示を英語化した。 - メディアクエリで制御されていたモジュールを、コンテナクエリでの制御に移行した。
- その他、いくつかの細かい改善。
- Image List フィールドを追加。
- Image Slider モジュールを追加。
- 従来のカルーセルモジュールに非推奨フラグを追加。
-
px2-modal: タブキー操作に関する動作の改善。 -
px2-modalのcontentFillオプションを有効にした場合のDOM構造を変更した。 - 画像フィールドの
filenameAutoSetterオプションのデフォルトを、 従来のifEmptyからrandomに変更した。 - 画像フィールドの
formatオプションが、デフォルトでimage/webpに変換されるようにした。 - 画像フィールドの
formatオプションに、フォーマット変換を行わない Booleanfalseまたは Stringpassの設定を追加した。 - その他、いくつかの細かい改善。
-
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のスタイルの修正。 - ベーススタイルシートと defaultテーマ が切り離された。
-
darkmodeテーマを更新した。
-
px2style.form()を追加。 -
.px2-table.px2-table--dlを追加。 -
.px2-radio-switchを追加。 -
.px2-tabsに、タブの折返しオプションを追加. - imageフィールドに、登録した画像が自動的にリサイズされる機能を追加した。
- imageフィールドに、
formatオプションを追加した。 - その他、いくつかの細かい改善。
-
.px2-aのスタイリングを改善。
- モジュールのカテゴリ分けを改善した。
-
px2style__imageフィールドを追加。 -
.px2-linklistのスタイリングを改善。 -
.px2-gridに 5/6幅 を追加した。 -
.px2-gridのマージン設計を改善。 -
.px2-imageから、href,targetフィールドを削除した。 - 新しいモジュール
.px2-image-banner-linkを追加した。 - bug fix:
.px2-gridで 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->bullet - JavaScriptの初期化オプションに
additionalClassNameを追加。 - ファイル名を変更:
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--***に変更。(ただし古い書き方も互換性維持のため残します) - List カテゴリを追加。
- ボタンアクションに "押した感触" を追加。
-
px2-modalにformオプションを追加。
-
.px2-tableを追加。 -
.px2-documentを追加。 -
.px2-pを追加。 -
.px2-slimを追加。 -
.px2-responsiveを追加。 -
px2style.modal()に、オプションwidthを追加。
- ボタンの背景色を不透過にした。
-
px2-modalを追加。 - JavaScriptオブジェクト名を
window.px2styleに変更。
- Initial Release.
MIT License
- Tomoya Koyanagi tomk79@gmail.com
- website: https://www.pxt.jp/
- Twitter: @tomk79 https://twitter.com/tomk79/