1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00
site/_src/_assets/styles/bigchain/_forms.scss

155 lines
3.1 KiB
SCSS

//
// Forms
// ---
// bigchain.io
//
.form-control {
@extend .transition;
display: block;
width: 100%;
appearance: none;
padding: $input-padding-x $input-padding-y;
font-family: $input-font;
font-weight: $font-weight-bold;
font-size: $font-size-base;
line-height: $line-height;
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;
}
.background--photo & {
border-bottom-color: rgba(#fff, .5);
}
}
//
// Floating placeholder labels
//
.form-label {
position: absolute;
top: $input-padding-x;
left: $input-padding-y;
transition: .15s ease-out;
user-select: none;
// 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;
.background--photo & {
color: rgba(#fff, .5);
}
}
.form-control {
// 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(.75);
transform-origin: left top;
}
}
//
// Form groups
//
.form-group {
margin-bottom: ($spacer * 2);
position: relative;
// make room for floating labels
margin-top: $spacer;
}
//
// Form Validation States
//
.form-control {
// Success style
&:valid:not(.is-empty),
&.parsley-success {
&,
&:focus {
border-color: $brand-success;
}
}
// Error style
&:invalid:not(.is-empty),
&.parsley-error {
&,
&:focus {
border-color: $brand-danger;
color: $brand-danger;
}
}
}
//
// Error messages
//
.form-group,
.input-group { position: relative; }
.parsley-errors-list {
@extend .list-unstyled;
position: absolute;
left: 0;
bottom: 0;
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); }
}