diff --git a/static/scss/detail/header.scss b/static/scss/detail/header.scss index 57c443369..164b4972a 100644 --- a/static/scss/detail/header.scss +++ b/static/scss/detail/header.scss @@ -224,7 +224,10 @@ height: auto; .hs-form-field { - padding-bottom: 16px; + > label:first-child > span { + padding-top: 16px; + display: inline-block; + } label { color: #495057; @@ -279,78 +282,39 @@ align-items: center; .hs-form-radio { - label { - position: relative; - input { height: 22px; - left: 0; - opacity: 0; position: absolute; - top: 0; width: 22px; } span { - display: inline-block; margin-left: 28px; margin-right: 32px; - - &::before { - color: $hs-form-field-radio-gray; - border: 2px solid; - content: ""; - height: 22px; - left: 0; - position: absolute; - top: 0; - width: 22px; - border-radius: 50%; - } - - &::after { - color: $primary; - content: ""; - opacity: 0; - border: 6px solid; - border-radius: 50%; - position: absolute; - left: 5px; - top: 5px; - transition: opacity 0.2s ease-in-out; - } - } - - input:checked + span::after { - opacity: 1; - } - - input:checked + span::before { - color: $primary; - } - - input:not(:checked):hover + span::before { - background: $close-hover-background; - color: $primary; - } - - input:not(:checked):hover + span { - cursor: pointer; } } } .hs-form-checkbox { span { - display: inline-block; margin-left: 8px; margin-right: 32px; } } + + .hs-form-radio,.hs-form-checkbox { + input, span { + cursor: pointer; + } + } } } + .hs-recaptcha, .hs-submit { + padding-top: 16px; + } + .hs-submit { padding-bottom: 10px; text-align: right; diff --git a/static/scss/detail/subnav.scss b/static/scss/detail/subnav.scss index afdb7910f..0e952a7a7 100644 --- a/static/scss/detail/subnav.scss +++ b/static/scss/detail/subnav.scss @@ -188,7 +188,10 @@ height: auto; .hs-form-field { - padding-bottom: 16px; + > label:first-child > span { + padding-top: 16px; + display: inline-block; + } label { color: #495057; @@ -244,78 +247,39 @@ align-items: center; .hs-form-radio { - label { - position: relative; - input { height: 22px; - left: 0; - opacity: 0; position: absolute; - top: 0; width: 22px; } span { - display: inline-block; margin-left: 28px; margin-right: 32px; - - &::before { - color: $hs-form-field-radio-gray; - border: 2px solid; - content: ""; - height: 22px; - left: 0; - position: absolute; - top: 0; - width: 22px; - border-radius: 50%; - } - - &::after { - color: $primary; - content: ""; - opacity: 0; - border: 6px solid; - border-radius: 50%; - position: absolute; - left: 5px; - top: 5px; - transition: opacity 0.2s ease-in-out; - } - } - - input:checked + span::after { - opacity: 1; - } - - input:checked + span::before { - color: $primary; - } - - input:not(:checked):hover + span::before { - background: $close-hover-background; - color: $primary; - } - - input:not(:checked):hover + span { - cursor: pointer; } } } .hs-form-checkbox { span { - display: inline-block; margin-left: 8px; margin-right: 32px; } } + + .hs-form-radio,.hs-form-checkbox { + input, span { + cursor: pointer; + } + } } } + .hs-recaptcha, .hs-submit { + padding-top: 16px; + } + .hs-submit { padding-bottom: 10px; text-align: right;