diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss new file mode 100644 index 0000000..0a51e9d --- /dev/null +++ b/app/assets/stylesheets/forms.css.scss @@ -0,0 +1,74 @@ +#main { + font-size: 16px; +} +h1 { + margin: 0 0 1em 0; + font-size: 2em; +} +.input { + position: relative; + margin: 0 0 1em 0; + border-top: 0.1em dotted #999; + padding: 1em 0; +} +.input label { + font-size: 1em; + display: block; + width: 12em; + float: left; +} +.input input, .input textarea, .input select { + font-size: 1em; + width: 20em; + float: left; +} +.input textarea { + height: 8em; +} +.input .hint, .input .error { + display: block; + clear: both; + font-size: 0.75em; + font-style: italic; + width: 20em; + margin: 0 0 0 16em; + padding: 1em 0 0 0; +} +.input .error { + font-style: normal; + padding: 1em 0 0 0; + color: #F00; +} +.input .error::before { + content: "⇧"; + display: inline-block; + font-size: 2em; + margin: 0 0.2em 0 0; + transform: translate(0, 0.1em); +} +.btn { + display: block; + margin: 2em 0 0 13em; +} + +/* styling of the button */ +.btn { + background: #233e83; + padding: 0.4em 0.8em; + border-radius: 0.2em; + color: #FFF; + border: none; + border-bottom: 0.2em solid #7A95DC; + cursor: pointer; + transition: background 200ms, border 200ms, transform 200ms; + -webkit-transition: background 200ms, border 200ms, transform 200ms; +} +.btn:hover { + background: #152551; +} +.btn:active { + background: #597AD2; + border-bottom: 0.2em solid #000; + transform: translate(0, 0.1em); + -webkit-transform: translate(0, 0.1em); +}