mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
328 lines
6.4 KiB
SCSS
328 lines
6.4 KiB
SCSS
//
|
|
// Forms
|
|
// ---
|
|
// bigchaindb.com
|
|
//
|
|
.form {
|
|
padding: $spacer;
|
|
background: $gray-dark;
|
|
border-radius: $border-radius;
|
|
margin-bottom: $spacer;
|
|
|
|
@media ($screen-sm) {
|
|
padding: ($spacer * 1.5) ($spacer * 2.5);
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
@extend .transition;
|
|
display: block;
|
|
width: 100%;
|
|
appearance: none;
|
|
padding: $input-padding-x $input-padding-y;
|
|
font-family: $input-font;
|
|
font-weight: $input-font-weight;
|
|
font-size: $font-size-base;
|
|
color: $input-color;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid $input-border-color;
|
|
border-radius: 0;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
border-color: $input-border-focus;
|
|
}
|
|
|
|
// Placeholder
|
|
&::placeholder {
|
|
color: $input-color-placeholder;
|
|
|
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
|
opacity: 1;
|
|
}
|
|
|
|
// Disabled and read-only inputs
|
|
//
|
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
// don't honor that edge case; we style them as disabled anyway.
|
|
&:disabled,
|
|
&[readonly] {
|
|
background-color: $input-bg-disabled;
|
|
|
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
|
opacity: 1;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: disabled;
|
|
}
|
|
|
|
//
|
|
// required indicator after the label
|
|
//
|
|
&:required,
|
|
&[required] {
|
|
+ .form-label,
|
|
+ .select2-container--bigchaindb + .form-label {
|
|
&:after {
|
|
@extend .required;
|
|
content: '*';
|
|
}
|
|
}
|
|
}
|
|
|
|
// the active state
|
|
&:focus ~ .form-label,
|
|
&:valid:not(.is-empty) ~ .form-label,
|
|
&:invalid:not(.is-empty) ~ .form-label,
|
|
//&.parsley-error ~ .form-label,
|
|
&.parsley-success ~ .form-label {
|
|
transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
|
|
color: $input-border-focus;
|
|
}
|
|
|
|
|
|
//
|
|
// Form Validation States
|
|
//
|
|
|
|
// Success style
|
|
&:valid:not(.is-empty):not(select),
|
|
&.parsley-success {
|
|
&,
|
|
&:focus {
|
|
border-color: $brand-success;
|
|
}
|
|
}
|
|
|
|
// Error style
|
|
&:invalid:not(.is-empty),
|
|
&.parsley-error {
|
|
&,
|
|
&:focus {
|
|
border-color: $brand-danger;
|
|
color: $brand-danger;
|
|
}
|
|
}
|
|
|
|
.background--photo & {
|
|
border-bottom-color: rgba(#fff, .5);
|
|
}
|
|
}
|
|
|
|
.form-control--sm {
|
|
padding: $input-padding-x-sm $input-padding-y-sm;
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
|
|
//
|
|
// required indicator
|
|
//
|
|
.required {
|
|
color: $brand-main-violet;
|
|
padding-left: .1rem;
|
|
padding-right: .1rem;
|
|
}
|
|
|
|
|
|
//
|
|
// Floating placeholder labels
|
|
//
|
|
.form-label {
|
|
position: absolute;
|
|
top: $input-padding-x;
|
|
left: $input-padding-y;
|
|
right: $input-padding-y;
|
|
transition: .15s ease-out;
|
|
user-select: none;
|
|
cursor: text;
|
|
|
|
// style like placeholder
|
|
font-family: $input-font;
|
|
font-weight: $input-font-weight;
|
|
font-size: $font-size-base;
|
|
line-height: $line-height;
|
|
color: $input-color-placeholder;
|
|
transform-origin: left;
|
|
|
|
// hide on selects
|
|
select + & {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.background--photo & {
|
|
color: rgba(#fff, .5);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Form groups
|
|
//
|
|
.form-group {
|
|
margin-bottom: $spacer;
|
|
position: relative;
|
|
// make room for floating labels
|
|
margin-top: $spacer;
|
|
|
|
&:last-of-type {
|
|
.btn {
|
|
margin-top: $spacer;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Text areas
|
|
//
|
|
textarea.form-control {
|
|
// Leave resizing to js
|
|
// https://github.com/CodingAspect/Textarea-Autogrow#usage
|
|
resize: none;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
|
|
//
|
|
// Selects
|
|
//
|
|
select.form-control {
|
|
color: $input-color-placeholder;
|
|
font-weight: $input-font-weight;
|
|
|
|
&:focus::-ms-value {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Checkboxes and radios
|
|
//
|
|
.radio,
|
|
.checkbox {
|
|
position: relative;
|
|
display: block;
|
|
margin-bottom: ($spacer * .75);
|
|
|
|
label {
|
|
padding-left: 1.75rem;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
// When there's no labels, don't position the input.
|
|
input:only-child {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
label {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
.radio input[type='radio'],
|
|
.radio-inline input[type='radio'],
|
|
.checkbox input[type='checkbox'],
|
|
.checkbox-inline input[type='checkbox'] {
|
|
position: absolute;
|
|
margin-bottom: -.25rem;
|
|
margin-left: -1.75rem;
|
|
margin-right: .25rem;
|
|
|
|
// reset styling, then style
|
|
appearance: button;
|
|
background: none;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
border-radius: $border-radius;
|
|
border: 2px solid $input-border-color;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
border-color: $input-border-focus;
|
|
}
|
|
|
|
&:checked {
|
|
background: $brand-primary;
|
|
border-color: $input-border-focus;
|
|
}
|
|
}
|
|
|
|
.radio input[type='radio'],
|
|
.radio-inline input[type='radio'] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.radio + .radio,
|
|
.checkbox + .checkbox {
|
|
// Move up sibling radios or checkboxes for tighter spacing
|
|
margin-top: -.25rem;
|
|
}
|
|
|
|
// Radios and checkboxes on same line
|
|
.radio-inline,
|
|
.checkbox-inline {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: 1.25rem;
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.radio-inline + .radio-inline,
|
|
.checkbox-inline + .checkbox-inline {
|
|
margin-top: 0;
|
|
margin-left: .75rem;
|
|
}
|
|
|
|
// Apply same disabled cursor tweak as for inputs
|
|
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
|
|
//
|
|
// Note: Neither radios nor checkboxes can be readonly.
|
|
input[type='radio'],
|
|
input[type='checkbox'] {
|
|
&:disabled,
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Error messages
|
|
//
|
|
.form-group,
|
|
.input-group { position: relative; }
|
|
|
|
.parsley-errors-list {
|
|
@extend .list-unstyled;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: $spacer * 1.2;
|
|
font-size: $font-size-xs;
|
|
|
|
&,
|
|
li { color: $brand-danger; }
|
|
|
|
&.filled {
|
|
animation: errors-list-show .2s $timing-bounce forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes errors-list-show {
|
|
from { transform: translate3d(0, 0, 0); }
|
|
to { transform: translate3d(0, ( $font-size-sm + ($spacer / 4)), 0); }
|
|
}
|