[Rails] pagyのデザインを整える

備忘録の記事です。
pagyによるページネーションを実装したのですが、デザインがそのままだと微妙なので整えてみました。

movies/index.html

<%== pagy_bootstrap_nav(@pagy) %>

Before

bootstrapをつけただけだと、なんだか物足りない印象です。これにもう少し手を加えてみます。

app/assets/stylesheets/application.css

//ページネーション自体のデザイン
.pagination>li>a {          
  border: none;     //枠線をなくす
  color: #696969;   //文字の色を変える
  border-radius: 15px;
}
.page-item.active
.page-link {
  z-index: 3;
  background-color: #3aabd2;
}
//ホバー時のデザイン
.pagination>li>a:hover {
  color: #035c7c;
}
.page-item:first-child .page-link {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.page-item:last-child .page-link {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

After

今風のデザインになりました。

参考：