7.3カスタムテーマで「圧縮されたような」コントロールパネルメニューを解決する

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

問題

• カスタムテーマを7.2から7.3にアップグレードしようとしたところ、カスタムテーマとクラシックテーマを比較すると、新しい右上のコントロールパネルメニューが「圧縮」されたように見える（クラシックテーマよりも縦の余白が少ない）問題に遭遇しました。
• カスタムテーマを調整できるように、この間隔を定義するためにどのようなクラスが使用されますか？

Environment

• DXP 7.3

解決策

• 7.3では、7.2バージョンと比較して、Classicテーマには以下のような追加ファイルが含まれています。
  • custom_properties.scss
  • custom_properties_set.scss
  • custom_properties_variables.scss
  • liferay_variables_custom.scss
• これらのファイルでは、スペーサーが定義されており、あなたのチームのユースケースに合うように、次のように修正することができます。
  

  // Spacers 
  --spacer: #{$spacer};
  
  @each $key, $value in $spacers { 
  $multiplier: nth($value, 1) / $spacer; 
  @if ($value == 0) { 
  $multiplier: 0; 
  }
  
  --spacer-#{$key}: calc(var(--spacer) * #{$multiplier}); 
  }

追加情報

• 関連情報は、以下の記事でご覧いただけます。
  • CSSカスタムプロパティ（CCP）の使い方
  • UIアーキテクチャ。テーマ
  • ポートレット、テーマ、およびレイアウトテンプレートの構成
  • サイトのテーマを変更する