houdini/app/assets/stylesheets/components/forms.css.scss
Bradley M. Kuhn 46193ab5fe Relicense all .scss files under new project license.
The primary license of the project is changing to:
  AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later

with some specific files to be licensed under the one of two licenses:
   CC0-1.0
   LGPL-3.0-or-later

This commit is one of the many steps to relicense the entire codebase.

Documentation granting permission for this relicensing (from all past
contributors who hold copyrights) is on file with Software Freedom
Conservancy, Inc.
2018-03-25 15:10:40 -04:00

152 lines
2.7 KiB
SCSS

/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
// 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;
}
}