diff --git a/_sass/_forms.scss b/_sass/_forms.scss index c8ecd158..a1f0f146 100644 --- a/_sass/_forms.scss +++ b/_sass/_forms.scss @@ -51,17 +51,20 @@ input, button, select, textarea { - font-family: $sans-serif; box-sizing: border-box; + font-family: $sans-serif; } label { display: block; - margin-bottom: 10px / 8; - font-weight: bold; + margin-bottom: 0.25em; color: $text-color; cursor: pointer; + small { + font-size: $type-size-6; + } + input, textarea, select { @@ -74,11 +77,13 @@ textarea, select { display: inline-block; width: 100%; - padding: 4px; - margin-bottom: 5px / 4; + padding: 0.25em; + margin-bottom: 0.5em; + color: $text-color; background-color: #fff; border: 1px solid mix(#fff, #000, 80%); - color: $text-color; + border-radius: $border-radius; + box-shadow: $box-shadow; &:hover { border-color: mix(#fff, $primary-color, 50%); @@ -165,6 +170,10 @@ input[type="hidden"] { display: none; } +.form { + position: relative; +} + .radio, .checkbox { 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 ========================================================================== */ diff --git a/_sass/_page.scss b/_sass/_page.scss index a1343b00..420dcccb 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -300,6 +300,61 @@ 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 diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss index f3263585..87536a45 100644 --- a/_sass/_utilities.scss +++ b/_sass/_utilities.scss @@ -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 ========================================================================== */ @@ -402,4 +457,14 @@ a.reversefootnote { &:hover { text-decoration: underline; } -} \ No newline at end of file +} + + +/* + Required + ========================================================================== */ + +.required { + color: $danger-color; + font-weight: bold; +}