大企業営業から未経験ITエンジニアを目指すブログ

アラサー大企業営業から未経験ITエンジニアを目指すブログ。日々学んだことを忘備録的に記します。

Laravel標準app.cssの解読

.form-group {

 margin-bottom:15px

}

.has-error .checkbox,

.has-error .checkbox-inline,

.has-error.checkbox-inline label,

.has-error.checkbox label,

.has-error .control-label,

.has-error .help-block,

.has-error .radio,

.has-error .radio-inline,

.has-error.radio-inline label,

.has-error.radio label{

 color:#a94442

}

.has-error .form-control{

 border-color:#a94442;

 -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);

 /*

①ベンダープレフィックス

 ブラウザベンダー(Chromeなど)が独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のこと。将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されている。

 主なブラウザ向けは下記。

 -moz-  …… Firefox
 -webkit- …… Google ChromeSafari
 -o-    …… Opera
 -ms-   …… Internet Explorer

一方、草案(Working Draft)が勧告候補(Candidate Recommendation)になったときには外すことが推奨されている。新しいブラウザでは逆に動作しない可能性もあるため将来に備え、ベンダープレフィックス無しの指定を併記するのが良い。

②box-shadow

 ボックスに1つまたは複数の影をつける。

{①影のX軸流れ幅、②影のY軸流れ幅(正の値で下へ、負の値で上へ)、③ぼかしの強さ、④影の大きさ、⑤色、⑥insetオプション=内に向かう影に変更}*/

 

 box-shadow:inset 0 1px 1px rgba(0,0,0,.075)

}

.has-error .form-control:focus{

 /*クリックして入力受付状態になっているところ*/

 border-color:#843534;

 -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;

 box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483

}

.has-error .input-group-addon{

 color:#a94442;border-color:#a94442;

 background-color:#f2dede

}

.has-error .form-control-feedback{

 color:#a94442

}

 

.help-block{

 display:block; /*ブロックレベル要素にする*/

 margin-top:5px;

 margin-bottom:10px;

 color:#a4aaae /*文字色*/

}