ベーステンプレートを更新しました (C-23.1012)
目次[非表示]
- 1.管理Vr - C-23.1012
- 1.1.ユニバーサルクラス
- 1.1.1.「余白(_all)」削除
- 1.1.2.「iframe」の調整
管理Vr - C-23.1012
フォームの崩れ修正
spでフォームがオーバーフローしてたのを修正（LP）
プライバシーのリンク（URL）の記述「overflow-wrap: break-word;」を削除
変更前
//規約リンク
.service_term_link {
font-size: inherit;
margin-top: 20px;
margin-bottom: 5px;
a {
overflow-wrap: break-word;
color: $lp_a_text_color;
letter-spacing: 0;
text-decoration: none;
&:hover {
opacity: .4;
}
}変更後
//規約リンク
.service_term_link {
font-size: inherit;
margin-top: 20px;
margin-bottom: 5px;
a {
color: $lp_a_text_color;
letter-spacing: 0;
text-decoration: none;
&:hover {
opacity: .4;
}
}ユニバーサルクラス
「余白(_all)」削除
for文の使用禁止に伴い、余白の設定でよく使われてる「_all」を削除。
大元のmixinも削除。
以下を削除
//余白
.theme-fo-base {
//width
@include space-loop(".width", "width");
////sp
@include sp-space-loop(".sp_width", "width");
//padding
@include space-loop(".pt", "padding-top");
@include space-loop(".pb", "padding-bottom");
@include space-loop(".pl", "padding-left");
@include space-loop(".pr", "padding-right");
@include space-loop(".padding", "padding");
@include space-loop(".paddingx", "padding", "x");
@include space-loop(".paddingy", "padding", "y");
////sp
@include sp-space-loop(".sp_pt", "padding-top");
@include sp-space-loop(".sp_pb", "padding-bottom");
@include sp-space-loop(".sp_pl", "padding-left");
@include sp-space-loop(".sp_pr", "padding-right");
@include sp-space-loop(".sp_padding", "padding");
@include sp-space-loop(".sp_paddingx", "padding", "x");
@include sp-space-loop(".sp_paddingy", "padding", "y");
//margin
@include space-loop(".mt", "margin-top");
@include space-loop(".mb", "margin-bottom");
@include space-loop(".ml", "margin-left");
@include space-loop(".mr", "margin-right");
@include space-loop(".margin", "margin");
@include space-loop(".marginx", "margin" ,"x");
@include space-loop(".marginy", "margin" ,"y");
////sp
@include sp-space-loop(".sp_mt", "margin-top");
@include sp-space-loop(".sp_mb", "margin-bottom");
@include sp-space-loop(".sp_ml", "margin-left");
@include sp-space-loop(".sp_mr", "margin-right");
@include sp-space-loop(".sp_margin", "margin");
@include sp-space-loop(".sp_marginx", "margin" ,"x");
@include sp-space-loop(".sp_marginy", "margin" ,"y");
}「iframe」の調整
for文の使用禁止により削除する予定ですが、開発がパーツに修正を加えるまでは暫定で10px単位で出力できるように調整。
また、動画に対応できるように、アスペクト比が入ったclassを準備。
追加クラス
- if_16-9
- if_4-3
- if_1-1
- if_9-16
- f_235-1
修正前
//iframe
.component {
&.iframe {
display: flex;
//左寄せ
&.right {
justify-content: flex-end;
}
//中央寄せ
&.center {
justify-content: center;
}
&.if_custom {
width: 100%;
height: 0;
position: relative;
@for $var from 1 through 3000 {
&.pc-h#{$var} {
height: #{$var}px;
}
}
@for $var from 1 through 3000 {
&.sp-h#{$var} {
@include breakpoint-sp {
height: #{$var}px;
}
}
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
}修正後
//iframe
.component {
&.iframe {
display: flex;
//左寄せ
&.right {
justify-content: flex-end;
}
//中央寄せ
&.center {
justify-content: center;
}
//ワイド
&.if_16-9 {
aspect-ratio: 16/9;
}
//スタンダート
&.if_4-3 {
aspect-ratio: 4/3;
}
//スクエア
&.if_1-1 {
aspect-ratio: 1/1;
}
//縦撮り
&.if_9-16 {
aspect-ratio: 9/16;
}
//シネマスコープ
&.if_235-1 {
aspect-ratio: 2.35/1;
}
&.if_custom {
width: 100%;
height: 0;
position: relative;
$var: 300;
@while $var <= 3000 {
&.pc-h#{$var} {
@include breakpoint-pc {
height: #{$var}px;
}
}
&.sp-h#{$var} {
@include breakpoint-sp {
height: #{$var}px;
}
}
$var: $var + 10;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
}
