配下ページ

方針

• Bootstrap 3 の拡張だった Agile Admin は外す
• まずプレーンな Bootstrap 4 のコードで大きな崩れがないようにコーディング
  • Bootstrap4 グリッド
  • Bootstrap4 フォーム
  • Bootstrap4 カード
• SCSS で Agile Admin に寄せたデザインに変更
• react-bootstrap は廃止、state管理を要するコンポーネントは reactstrap を使用する
• 共通の部品が多いため、変更箇所をココに追加していく。追加された部品は、追加した人がデザイン調整済みと認識し、それ以外の人はスタイル調整しないようにする
• bootstrap4 で使われてるマジックナンバーがあればそれを優先して使用する
  • https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
  • growi用に値を変えたければ_override-bootstrap-variables.scss で上書きする
• Sidebar に関しては
  • @atlaskit/global-navigation を用いる
    • こんなの入れたいよね
      • bookmark/star
      • 最近更新されたページ
      • タグ

具体的な変更

• チェックボックスをスイッチに変更すべきとこは変更する
• panel, well→ card( .card )に変更
  • .well は .card.well で再現
• グリッドシステムのv3→v4変更箇所の修正
  • 具体的にはここ
• lebel → badge
• dropdown-toggle の caret を消したいとき
  • .dropdown { .dropdown-toggle.dropdown-toggle-no-caret }