ベーステンプレートを更新しました (C2-24.1203)(C2-24.1211)


目次[非表示]

  1. 1.管理Vr C2-24.1203
    1. 1.1.シャドウ用クラスの廃止
    2. 1.2.共通パーツの編集画面用記述の廃止
    3. 1.3.col空処理のコード変更
    4. 1.4.カラム内要素の位置調整用MIXINを追加


管理Vr C2-24.1203

シャドウ用クラスの廃止

デフォルトの機能に実装されたので廃止

廃止コード

//シャドウ専用
.shadow_all {
  box-shadow: $box_shadow_common;
  &:empty {
    box-shadow: none;
  }
}


共通パーツの編集画面用記述の廃止

デフォルト機能でダーク背景が実装されたので廃止

廃止コード

  //共通パーツに白文字を使った時の対策用
  //000は共通パーツのidです(共通パーツのページurlに書いてます)
  .inner > :is(.id-000) {
    &::before {
      content: "";
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
    }
    &::after {
      content: "文字が見やすくするための黒背景設定です。公開画面では表示されません。\A(この共通パーツ専用です)";
      color: #c70909;
      font-size: 14px;
      line-height: 1.3;
      white-space: pre;
      padding: 10px;
      border: 1px solid #c70909;
      position: absolute;
      top: -63px;
      left: 6px;
    }
  }
  //共通パーツに白文字を使った時の対策用 end


col空処理のコード変更

colにデフォルト機能でボックスシャドウが設置できるようになり、空処理が効かなくなったので対応

//col空処理
@include theme-fo-base {
  .inner {
    .row {
      .col {
        &:empty {
          background: none;
          border: 0;
          @include breakpoint-sp {
            display: none !important;
          }
        }
        &.styles_col-shadow__imO2S {
          &:empty {
            box-shadow: none;
          }
        }
      }
    }
  }
}


カラム内要素の位置調整用MIXINを追加

rownにflexをかけた時の対策MIXIN

以下追記(C2-24.1211)

※注意点:PCのみclassは出力されます

// カラム内要素の位置調整
@mixin row-col-flex($directio:column) {
  .col {
    &:is(.vertical_position_top,.vertical_position_middle,.vertical_position_bottom) {
      @include breakpoint-pc {
        display: flex;
        flex-direction: #{$directio};
        align-self: auto !important;
      }
      .component {
        & + .component {
          @include breakpoint-pc {
            margin-top: 0;
          }
        }
      }
    }
    &.vertical_position_top {
      @include breakpoint-pc {
        justify-content: start;
      }
    }
    &.vertical_position_middle {
      @include breakpoint-pc {
        justify-content: center;
      }
    }
    &.vertical_position_bottom {
      @include breakpoint-pc {
        justify-content: end;
      }
    }
  }
}


pagetop