From 324d2dc4c98ae8a2a9331b9584257cc430975f40 Mon Sep 17 00:00:00 2001 From: xdavidwu Date: Wed, 7 Oct 2020 12:01:23 +0800 Subject: [PATCH] scss: block unused for comments --- _sass/minimal-mistakes.scss | 2 +- _sass/minimal-mistakes/_forms.scss | 725 +++++++++++++++-------------- _sass/minimal-mistakes/_page.scss | 135 +++--- assets/css/main.scss | 3 + 4 files changed, 436 insertions(+), 429 deletions(-) diff --git a/_sass/minimal-mistakes.scss b/_sass/minimal-mistakes.scss index 9b9dd7e..b30450c 100644 --- a/_sass/minimal-mistakes.scss +++ b/_sass/minimal-mistakes.scss @@ -17,7 +17,7 @@ /* Core CSS */ @import "minimal-mistakes/reset"; @import "minimal-mistakes/base"; -//@import "minimal-mistakes/forms"; +@import "minimal-mistakes/forms"; @import "minimal-mistakes/tables"; @import "minimal-mistakes/animations"; diff --git a/_sass/minimal-mistakes/_forms.scss b/_sass/minimal-mistakes/_forms.scss index e6d6e74..abe0fde 100644 --- a/_sass/minimal-mistakes/_forms.scss +++ b/_sass/minimal-mistakes/_forms.scss @@ -1,379 +1,382 @@ -/* ========================================================================== - Forms - ========================================================================== */ - -form { - margin: 0 0 5px 0; - padding: 1em; - background-color: $form-background-color; - - fieldset { - margin-bottom: 5px; - padding: 0; - border-width: 0; +@if $comments-provider == staticman or $comments-provider == staticman_v2 { + /* ========================================================================== + Forms + ========================================================================== */ + + form { + margin: 0 0 5px 0; + padding: 1em; + background-color: $form-background-color; + + fieldset { + margin-bottom: 5px; + padding: 0; + border-width: 0; + } + + legend { + display: block; + width: 100%; + margin-bottom: 5px * 2; + padding: 0; + color: $text-color; + border: 0; + white-space: normal; + } + + p { + margin-bottom: (5px / 2); + } + + ul { + list-style-type: none; + margin: 0 0 5px 0; + padding: 0; + } + + br { + display: none; + } + } + + label, + input, + button, + select, + textarea { + vertical-align: baseline; + } + + input, + button, + select, + textarea { + box-sizing: border-box; } - - legend { + + label { display: block; + margin-bottom: 0.25em; + color: $text-color; + cursor: pointer; + + small { + font-size: $type-size-6; + } + + input, + textarea, + select { + display: block; + } + } + + input, + textarea, + select { + display: inline-block; width: 100%; - margin-bottom: 5px * 2; - padding: 0; + padding: 0.25em; + margin-bottom: 0.5em; color: $text-color; - border: 0; - white-space: normal; + background-color: $background-color; + border: $border-color; + border-radius: $border-radius; + box-shadow: $box-shadow; } - - p { - margin-bottom: (5px / 2); + + .input-mini { + width: 60px; } - - ul { - list-style-type: none; - margin: 0 0 5px 0; + + .input-small { + width: 90px; + } + + input[type="image"], + input[type="checkbox"], + input[type="radio"] { + width: auto; + height: auto; padding: 0; + margin: 3px 0; + line-height: normal; + cursor: pointer; + border-radius: 0; + box-shadow: none; } - - br { - display: none; + + input[type="checkbox"], + input[type="radio"] { + box-sizing: border-box; + padding: 0; } -} - -label, -input, -button, -select, -textarea { - vertical-align: baseline; -} - -input, -button, -select, -textarea { - box-sizing: border-box; -} - -label { - display: block; - margin-bottom: 0.25em; - color: $text-color; - cursor: pointer; - - small { - font-size: $type-size-6; + + input[type="image"] { + border: 0; } - - input, - textarea, + + input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + border: initial; + background-color: transparent; + background-color: initial; + box-shadow: none; + } + + input[type="button"], + input[type="reset"], + input[type="submit"] { + width: auto; + height: auto; + cursor: pointer; + } + select { + width: auto; + background-color: #fff; + } + + select[multiple], + select[size] { + height: auto; + } + + textarea { + resize: vertical; + height: auto; + overflow: auto; + vertical-align: top; + } + + input[type="hidden"] { + display: none; + } + + .form { + position: relative; + } + + .radio, + .checkbox { + padding-left: 18px; + font-weight: normal; + } + + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: left; + margin-left: -18px; + } + + .radio.inline, + .checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; + } + + .radio.inline + .radio.inline, + .checkbox.inline + .checkbox.inline { + margin-left: 10px; + } + + /* + Disabled state + ========================================================================== */ + + input[disabled], + select[disabled], + textarea[disabled], + input[readonly], + select[readonly], + textarea[readonly] { + opacity: 0.5; + cursor: not-allowed; + } + + /* + Focus & active state + ========================================================================== */ + + input:focus, + textarea:focus { + border-color: $primary-color; + outline: 0; + box-shadow: inset 0 1px 3px rgba($text-color, 0.06), + 0 0 5px rgba($primary-color, 0.7); + } + + input[type="file"]:focus, + input[type="radio"]:focus, + input[type="checkbox"]:focus, + select:focus { + box-shadow: none; + } + + /* + Help text + ========================================================================== */ + + .help-block, + .help-inline { + color: $muted-text-color; + } + + .help-block { display: block; + margin-bottom: 1em; + line-height: 1em; } -} - -input, -textarea, -select { - display: inline-block; - width: 100%; - padding: 0.25em; - margin-bottom: 0.5em; - color: $text-color; - background-color: $background-color; - border: $border-color; - border-radius: $border-radius; - box-shadow: $box-shadow; -} - -.input-mini { - width: 60px; -} - -.input-small { - width: 90px; -} - -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - line-height: normal; - cursor: pointer; - border-radius: 0; - box-shadow: none; -} - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -input[type="image"] { - border: 0; -} - -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - border: initial; - background-color: transparent; - background-color: initial; - box-shadow: none; -} - -input[type="button"], -input[type="reset"], -input[type="submit"] { - width: auto; - height: auto; - cursor: pointer; -} - -select { - width: auto; - background-color: #fff; -} - -select[multiple], -select[size] { - height: auto; -} - -textarea { - resize: vertical; - height: auto; - overflow: auto; - vertical-align: top; -} - -input[type="hidden"] { - display: none; -} - -.form { - position: relative; -} - -.radio, -.checkbox { - padding-left: 18px; - font-weight: normal; -} - -.radio input[type="radio"], -.checkbox input[type="checkbox"] { - float: left; - margin-left: -18px; -} - -.radio.inline, -.checkbox.inline { - display: inline-block; - padding-top: 5px; - margin-bottom: 0; - vertical-align: middle; -} - -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { - margin-left: 10px; -} - -/* - Disabled state - ========================================================================== */ - -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - opacity: 0.5; - cursor: not-allowed; -} - -/* - Focus & active state - ========================================================================== */ - -input:focus, -textarea:focus { - border-color: $primary-color; - outline: 0; - box-shadow: inset 0 1px 3px rgba($text-color, 0.06), - 0 0 5px rgba($primary-color, 0.7); -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - box-shadow: none; -} - -/* - Help text - ========================================================================== */ - -.help-block, -.help-inline { - color: $muted-text-color; -} - -.help-block { - display: block; - margin-bottom: 1em; - line-height: 1em; -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; -} - -/* - .form-group - ========================================================================== */ - -.form-group { - margin-bottom: 5px; - padding: 0; - border-width: 0; -} - -/* - .form-inline - ========================================================================== */ - -.form-inline input, -.form-inline textarea, -.form-inline select { - display: inline-block; - margin-bottom: 0; -} - -.form-inline label { - display: inline-block; -} - -.form-inline .radio, -.form-inline .checkbox, -.form-inline .radio { - padding-left: 0; - margin-bottom: 0; - vertical-align: middle; -} - -.form-inline .radio input[type="radio"], -.form-inline .checkbox input[type="checkbox"] { - float: left; - margin-left: 0; - margin-right: 3px; -} - -/* - .form-search - ========================================================================== */ - -.form-search input, -.form-search textarea, -.form-search select { - display: inline-block; - margin-bottom: 0; -} - -.form-search .search-query { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; - border-radius: 14px; -} - -.form-search label { - display: inline-block; -} - -.form-search .radio, -.form-search .checkbox, -.form-inline .radio { - padding-left: 0; - margin-bottom: 0; - vertical-align: middle; -} - -.form-search .radio input[type="radio"], -.form-search .checkbox input[type="checkbox"] { - float: left; - margin-left: 0; - margin-right: 3px; -} - -/* - .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 - ========================================================================== */ - -#goog-fixurl { - ul { - list-style: none; + + .help-inline { + display: inline-block; + vertical-align: middle; + padding-left: 5px; + } + + /* + .form-group + ========================================================================== */ + + .form-group { + margin-bottom: 5px; + padding: 0; + border-width: 0; + } + + /* + .form-inline + ========================================================================== */ + + .form-inline input, + .form-inline textarea, + .form-inline select { + display: inline-block; + margin-bottom: 0; + } + + .form-inline label { + display: inline-block; + } + + .form-inline .radio, + .form-inline .checkbox, + .form-inline .radio { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; + } + + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + float: left; margin-left: 0; + margin-right: 3px; + } + + /* + .form-search + ========================================================================== */ + + .form-search input, + .form-search textarea, + .form-search select { + display: inline-block; + margin-bottom: 0; + } + + .form-search .search-query { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; + border-radius: 14px; + } + + .form-search label { + display: inline-block; + } + + .form-search .radio, + .form-search .checkbox, + .form-inline .radio { padding-left: 0; - li { - list-style-type: none; + margin-bottom: 0; + vertical-align: middle; + } + + .form-search .radio input[type="radio"], + .form-search .checkbox input[type="checkbox"] { + float: left; + margin-left: 0; + margin-right: 3px; + } + + /* + .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 + ========================================================================== */ + + #goog-fixurl { + ul { + list-style: none; + margin-left: 0; + padding-left: 0; + li { + list-style-type: none; + } } } -} - -#goog-wm-qt { - width: auto; - margin-right: 10px; - margin-bottom: 20px; - padding: 8px 20px; - display: inline-block; - font-size: $type-size-6; - background-color: #fff; - color: #000; - border-width: 2px !important; - border-style: solid !important; - border-color: $border-color; - border-radius: $border-radius; -} - -#goog-wm-sb { - @extend .btn; + + #goog-wm-qt { + width: auto; + margin-right: 10px; + margin-bottom: 20px; + padding: 8px 20px; + display: inline-block; + font-size: $type-size-6; + background-color: #fff; + color: #000; + border-width: 2px !important; + border-style: solid !important; + border-color: $border-color; + border-radius: $border-radius; + } + + #goog-wm-sb { + @extend .btn; + } + } diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 390b0a4..a7e2dc7 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -380,82 +380,83 @@ body { border-top: 1px solid $border-color; } -.page__comments-form { - transition: $global-transition; - - &.disabled { - input, - button, - textarea, - label { - pointer-events: none; - cursor: not-allowed; - filter: alpha(opacity=65); - box-shadow: none; - opacity: 0.65; +@if $comments-provider == staticman or $comments-provider == staticman_v2 { + .page__comments-form { + transition: $global-transition; + + &.disabled { + input, + button, + textarea, + label { + pointer-events: none; + cursor: not-allowed; + filter: alpha(opacity=65); + box-shadow: none; + opacity: 0.65; + } } } -} - -.comment { - @include clearfix(); - margin: 1em 0; - - &:not(:last-child) { - border-bottom: 1px solid $border-color; + + .comment { + @include clearfix(); + margin: 1em 0; + + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } } -} - -.comment__avatar-wrapper { - float: left; - width: 60px; - height: 60px; - - @include breakpoint($large) { - width: 100px; - height: 100px; + + .comment__avatar-wrapper { + float: left; + 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__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 { - float: right; - width: calc(100% - 60px); - - @include breakpoint($large) { - width: calc(100% - 100px); + + .comment__content-wrapper { + float: right; + width: calc(100% - 60px); + + @include breakpoint($large) { + width: calc(100% - 100px); + } } -} - -.comment__author { - margin: 0; - - a { - text-decoration: none; + + .comment__author { + margin: 0; + + a { + text-decoration: none; + } } -} - -.comment__date { - @extend .page__meta; - margin: 0; - - a { - text-decoration: none; + + .comment__date { + @extend .page__meta; + margin: 0; + + a { + text-decoration: none; + } } } - /* Related ========================================================================== */ diff --git a/assets/css/main.scss b/assets/css/main.scss index ee32e5f..db57cac 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -4,6 +4,9 @@ @charset "utf-8"; +// jekyll variables +$comments-provider: {{ site.comments.provider }}; + @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin @media (prefers-color-scheme: light) { -- 2.43.0