css/sass 備忘録

style関連の備忘録。随時追記。

縦に中央寄せしたい

※指摘頂いたように編集済。

hoge.sass

.parents {
  display: flex;
  align-items: center;
  justify-content: center;
}

参考

• flex-direction: column;
• CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
• position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

ページ両サイドスペースの背景色を設定する。

body {
    background: #fff;/*背景色の指定*/
}

参考

MakeShopサポート │ ショップの背景や両端に好きな色や画像の設定方法

labelの文字列を途中で改行させない

チェックボックスやラジオボタンの文字列が、ウィンドウサイズの関係で途中で改行されるのを防ぐ。

sass

.hoge{
  label{
    display: inline-block;
  }
}

slim

.hoge
  = collection_check_boxes(:user, :something_ids, @obj, :id, :name) do |cb|
    = cb.label { cb.check_box + cb.text }

css でボタン非活性

class に is-disabled をつけると非活性とする。

@mixin btn-disabled-base() {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

  a.is-disabled{
    @include btn-disabled-base();
  }

使い方

xxx.html.erb

<%= link_to 'submit', submit_path(model), method: :post, , class: "button is-register is-submit #{'is-disabled' if model.disabled?}" %>