houdini/app/assets/stylesheets/components/forms.css.scss

152 lines
2.6 KiB
SCSS
Raw Normal View History

// Errors and form statuses
@import 'mixins';
form {
margin: 0;
}
.form--flatFields fieldset {
margin-bottom: 0;
}
.form-error-message {
color: #A05B5B;
}
.form--inline input, .form--inline select, .form--inline button {
display: inline-block;
}
.status {
line-height: 1.3;
font-size: 13px;
text-align: center;
}
.ff-button-error,
.small-error,
.error {
margin: 10px auto;
color: #A05B5B;
font-size: 13px;
text-align: center;
}
input.narrow {
width: 75px;
}
form .field,
fieldset {
margin-bottom: 10px;
}
.steps--narrow .step {
max-width: 450px;
margin: 0 auto;
}
.form--pill input,
.form--pill button {
line-height: 34px;
display: inline;
border: 1px solid rgba(black, 0.1) !important;
}
.form--pill input {
font-size: 15px;
border-radius: 30px 0px 0px 30px !important;
padding: 0 10px 0 15px !important;
width: 250px;
border-right: none !important;
}
.form--pill button,
.form--pill button:active {
font-size: 17px;
border-radius: 0px 30px 30px 0px !important;
padding: 0 15px 0 10px !important;
border-left: none !important;
@include transform(translateX(-10px));
@include setBackgroundAndHover($oj);
}
form[autosubmit] .reloadMessage { display: none; }
.twoField {
text-align: left;
}
.well {
overflow: hidden;
background: rgba($grey, 0.1);
border-left: 1px solid rgba($grey, 0.2);
border-right: 1px solid rgba($grey, 0.2);
border-top: 1px solid rgba($grey, 0.2);
border-bottom: 2px solid rgba($grey, 0.2);
margin: 0 auto;
padding: 8px;
}
.twoField input, .twoField select {
width: 48% !important; // This is me (j) being lazy. Change this when you can better override bootstrap (aka satan)
padding: 3px 8px !important;
margin-bottom: 10px;
}
// Flim-flam form validation error message styling
.ff-field {
position: relative;
}
.ff-field--invalid {
input[type="text"], input, input[type="email"], input[type="number"], input[type="password"], select {
border-color: $red;
}
}
.ff-field-errorMessage {
position: absolute;
top: -41px;
left: 0;
margin: 0;
padding: 4px 8px;
box-shadow: -3px -1px 7px 0 $cloudy;
background: $blue-grey;
font-weight: bold;
color: white;
white-space: nowrap;
}
.ff-field-errorMessage:before {
content: "";
border: solid;
border-color: $blue-grey rgba(0, 0, 0, 0);
border-width: 9px 10px 0 10px;
bottom: -9px;
left: 0;
position: absolute;
z-index: 99;
}
@media screen and (max-width: 500px) {
.form--pill input {
width: 180px;
}
.form--pill button {
font-size: 16px;
}
}
@media screen and (max-width: 350px) {
.form--pill input {
width: 170px;
}
.form--pill button {
font-size: 15px;
}
}