配下ページ
方針
- Bootstrap 3 の拡張だった Agile Admin は外す
- まずプレーンな Bootstrap 4 のコードで大きな崩れがないようにコーディング
- SCSS で Agile Admin に寄せたデザインに変更
- react-bootstrap は廃止、state管理を要するコンポーネントは reactstrap を使用する
- 共通の部品が多いため、変更箇所をココに追加していく。追加された部品は、追加した人がデザイン調整済みと認識し、それ以外の人はスタイル調整しないようにする
- bootstrap4 で使われてるマジックナンバーがあればそれを優先して使用する
- https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss external_link
- growi用に値を変えたければ
_override-bootstrap-variables.scssで上書きする
- Sidebar に関しては
- @atlaskit/global-navigation external_link を用いる
- こんなの入れたいよね
- bookmark/star
- 最近更新されたページ
- タグ
- こんなの入れたいよね
- @atlaskit/global-navigation external_link を用いる
具体的な変更
- チェックボックスをスイッチに変更すべきとこは変更する
- panel, well→ card(
.card)に変更.wellは.card.wellで再現
- グリッドシステムのv3→v4変更箇所の修正
- 具体的にはここ
- lebel → badge
- dropdown-toggle の caret を消したいとき
.dropdown { .dropdown-toggle.dropdown-toggle-no-caret }