Style static comments, form, and modal

This commit is contained in:
Michael Rose 2016-08-10 15:45:48 -04:00
parent a1c7c022e6
commit fb32147148
3 changed files with 168 additions and 7 deletions

View file

@ -51,17 +51,20 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: $sans-serif;
box-sizing: border-box; box-sizing: border-box;
font-family: $sans-serif;
} }
label { label {
display: block; display: block;
margin-bottom: 10px / 8; margin-bottom: 0.25em;
font-weight: bold;
color: $text-color; color: $text-color;
cursor: pointer; cursor: pointer;
small {
font-size: $type-size-6;
}
input, input,
textarea, textarea,
select { select {
@ -74,11 +77,13 @@ textarea,
select { select {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 4px; padding: 0.25em;
margin-bottom: 5px / 4; margin-bottom: 0.5em;
color: $text-color;
background-color: #fff; background-color: #fff;
border: 1px solid mix(#fff, #000, 80%); border: 1px solid mix(#fff, #000, 80%);
color: $text-color; border-radius: $border-radius;
box-shadow: $box-shadow;
&:hover { &:hover {
border-color: mix(#fff, $primary-color, 50%); border-color: mix(#fff, $primary-color, 50%);
@ -165,6 +170,10 @@ input[type="hidden"] {
display: none; display: none;
} }
.form {
position: relative;
}
.radio, .radio,
.checkbox { .checkbox {
padding-left: 18px; padding-left: 18px;
@ -315,6 +324,38 @@ select:focus {
} }
/*
.form--loading
========================================================================== */
.form--loading:before {
content: '';
}
.form--loading .form__spinner {
display: block;
}
.form:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 10;
}
.form__spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
}
/* /*
Google search form Google search form
========================================================================== */ ========================================================================== */

View file

@ -300,6 +300,61 @@
text-transform: uppercase; text-transform: uppercase;
} }
.comment {
margin: 2em 0;
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
}
.comment__avatar-wrapper {
display: table-cell;
vertical-align: top;
width: 60px;
height: 60px;
@include breakpoint($large) {
width: 100px;
height: 100px;
}
}
.comment__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
@include breakpoint($large) {
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid $border-color;
}
}
.comment__content-wrapper {
display: table-cell;
vertical-align: top;
}
.comment__author {
margin: 0;
a {
text-decoration: none;
}
}
.comment__date {
@extend .page__meta;
margin: 0;
a {
text-decoration: none;
}
}
/* /*
Related Related

View file

@ -377,6 +377,61 @@ body:hover .visually-hidden button {
} }
/*
Modals
========================================================================== */
.show-modal {
overflow: hidden;
position: relative;
&:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(255, 255, 255, 0.85);
}
.modal {
display: block;
}
}
.modal {
display: none;
position: fixed;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
min-height: 0;
z-index: 9999;
background: #fff;
border: 1px solid $border-color;
border-radius: $border-radius;
box-shadow: $box-shadow;
&__title {
margin: 0;
padding: 0.5em 1em;
}
&__supporting-text {
padding: 0 1em 0.5em 1em;
}
&__actions {
padding: 0.5em 1em;
border-top: 1px solid $border-color;
}
}
/* /*
Footnotes Footnotes
========================================================================== */ ========================================================================== */
@ -403,3 +458,13 @@ a.reversefootnote {
text-decoration: underline; text-decoration: underline;
} }
} }
/*
Required
========================================================================== */
.required {
color: $danger-color;
font-weight: bold;
}