You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.4 KiB
142 lines
3.4 KiB
label,
|
|
legend {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
margin-bottom: ($font-size-base * .31);
|
|
font-family: $font-family-heading;
|
|
font-size: ($font-size-base + 2);
|
|
font-size: 1.2rem;
|
|
color: $colour-text;
|
|
|
|
p {
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
font-size: 1rem;
|
|
margin-bottom: 1em;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
select,
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="date"],
|
|
input[type="month"],
|
|
input[type="time"],
|
|
input[type="week"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="color"] {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 2.5em;
|
|
margin-bottom: $reflex-grid-spacing;
|
|
padding: ($reflex-grid-spacing / 2) $reflex-grid-spacing;
|
|
line-height: $line-height-base;
|
|
color: $colour-text;
|
|
background-color: $colour-white;
|
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
|
border: $card-border;
|
|
border-radius: $card-border-radius;
|
|
box-shadow: $shadow-form-inset;
|
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $colour-text;
|
|
border-color: $colour-grid-bg;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: $colour-white;
|
|
box-shadow: $shadow-form-inset-focus, $shadow-form-focus;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical; // Only allow vertical resizing of texareas
|
|
min-height: 10em;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
float: left;
|
|
margin-top: .75em;
|
|
margin-left: 1em;
|
|
|
|
&:focus {
|
|
outline: 3px solid $colour-text;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
}
|
|
|
|
+ label {
|
|
display: block;
|
|
margin-bottom: ($font-size-base * .31); // same size as default white space between inline elements
|
|
padding: .5em 1em .5em 2.5em;
|
|
border-radius: $card-border-radius;
|
|
|
|
&:hover {
|
|
background-color: rgba($colour-text, .1);
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
+ label {
|
|
background-color: $colour-state-success;
|
|
}
|
|
}
|
|
}
|
|
|
|
button,
|
|
.button,
|
|
[type="button"] {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
margin-bottom: ($font-size-base * .31); // same size as default white space between inline-block elements
|
|
padding: ($font-size-base / 2) ($font-size-base * 2);
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-base;
|
|
line-height: $line-height-base;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
background-image: none;
|
|
border: 1px solid $colour-col;
|
|
border-radius: $card-border-radius;
|
|
background-color: $colour-col;
|
|
color: $colour-text;
|
|
transition: border-color .1s ease-out, background-color .1s ease-out, box-shadow .2s ease-out;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: darken($colour-col, 10%);
|
|
border-color: $colour-grid-bg;
|
|
color: $colour-text;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: $shadow-form-focus;
|
|
}
|
|
}
|
|
|
|
|