Railsのターボリンクに関するcssプロパティ

元のコード

.turbolinks-progress-bar{
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: #0076ff;
  z-index: 9999;
  transition: width 300ms ease-out, opaicty 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}

カスタマイズした

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

僕は下コードのようにヘッダー上に border-top: 5px solid $main_color をとり、そのラインとプログレスバーを合わせるようにしてみました。

.turbolinks-progress-bar{
  height: 5px
  background: $sub_color
}

コメントを残す

メールアドレスが公開されることはありません。