diff options
author | Justin Ho Tuan Duong <hduong@gitlab.com> | 2020-04-23 04:51:32 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2020-04-23 04:51:32 +0300 |
commit | b6f88710ac78a83f7a4dffcf12efd1d6a10cd39e (patch) | |
tree | 5171bd9700fe08792190a8d5bae8a5a5ca0c3800 /content/assets | |
parent | b97f07ea3ac68b9dd194e6075bebde69cdcd7ba9 (diff) |
Update colors and spacing
After UX feedback
Diffstat (limited to 'content/assets')
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 8 | ||||
-rw-r--r-- | content/assets/stylesheets/comments.scss | 149 | ||||
-rw-r--r-- | content/assets/stylesheets/help.scss | 112 |
3 files changed, 120 insertions, 149 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 1076a506..f39f8138 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -178,6 +178,14 @@ $topic-runner-header-color: rgb(203, 88, 15); $subtopic-color: rgba(0, 0, 0, .6); $subtopic-border-color: rgb(79, 172, 225); +// Help & feedback section colors +$help-indigo-50: #f1f1ff; +$help-indigo-500: #6666c4; +$help-blue-500: #1068bf; +$help-gray-100: #dbdbdb; +$help-gray-200: #bfbfbf; +$help-gray-900: #303030; + // Other colors $hr-border-color: $border-color; $pre-background-color: rgba(238, 238, 238, .35); diff --git a/content/assets/stylesheets/comments.scss b/content/assets/stylesheets/comments.scss deleted file mode 100644 index e544f8cb..00000000 --- a/content/assets/stylesheets/comments.scss +++ /dev/null @@ -1,149 +0,0 @@ ---- -version: 4 ---- - -@import "variables"; - -.comments { - margin: 15px -10px 0; - padding: 10px 10px 0; - border-top-style: solid; - border-top-color: $border-color; - border-top-width: 3px; - border-bottom-style: solid; - border-bottom-color: $border-color; - border-bottom-width: 3px; - background-color: $feedback-bg; - - @media all and (min-width: $mobile-width) { - margin-left: -40px; - margin-right: -40px; - padding-left: 40px; - padding-right: 40px; - } -} - -.comments-filter { - a { - color: $color-tanuki-dark; - border-color: $color-tanuki-light; - - i { - color: $color-tanuki-dark; - padding-right: 5px; - display: inline-block; - } - - &:hover { - color: $color-tanuki-light; - border-color: $color-tanuki-dark; - } - - &.comments-holder { - display: inline-block; - width: 100%; - background-color: $buttons-bg; - - &:hover { - background-color: $color-white; - } - } - } - - h2 { - border-bottom: 0; - } - - i { - color: $color-tanuki-dark; - - &.black-icon { - color: $color-gray; - padding-left: 5px; - } - } -} - -.disqus-comments-gitlab { - a { - margin-bottom: 13px; - } - - iframe { - padding-left: 15px; - padding-right: 15px; - background-color: $color-white; - border-radius: 5px; - box-shadow: 2px 2px 7px $search-border; - margin-top: 25px; - } -} - -.comments-holder { - padding-top: 10px; - padding-bottom: 10px; - color: $color-tanuki-dark; - box-shadow: 1px 2px 3px transparent; - font-size: 13px; - - &:hover { - color: $color-tanuki-dark; - background-color: $color-white; - box-shadow: 1px 2px 3px $color-gray-extra-light; - } - - @media all and (max-width: $medium-width) { - font-size: 12px; - } -} - -.tab-content { - .row { - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: solid 1px $border-color; - - &:last-child { - border-bottom: 0; - margin-bottom: 0; - padding-bottom: 7px; - } - } -} - -.tab-pane { - padding-bottom: 15px; - - &:last-child { - padding-bottom: 0; - } -} - -// Fixes padding in this row when the Disqus row isn't shown -// scss-lint:disable IdSelector -#doc-issue-row { - padding-bottom: 20px; -} -// scss-lint:enable IdSelector - -// scss-lint:disable ImportantRule -.nav-tabs { - > li { - > a { - color: $body-color; - border: solid 1px $tabs-border; - background-color: $inactive-tabs; - - &:hover { - color: $body-color; - border: solid 1px $border-color; - background-color: $color-white; - } - } - - &.active > a { - background-color: $feedback-bg !important; - } - } -} -// scss-lint:enable ImportantRule diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss new file mode 100644 index 00000000..6eee1ea4 --- /dev/null +++ b/content/assets/stylesheets/help.scss @@ -0,0 +1,112 @@ +--- +version: 1 +--- + +@import "variables"; + +.help-and-feedback-section { + background-color: $help-indigo-50; + border-radius: 4px; + padding: 1rem; + margin-top: 2rem; + color: $help-gray-900; + font-size: 14px; + line-height: 20px; + + .right-col { + @media all and (min-width: 768px) { + border-left: 1px solid $help-gray-100; + } + } + + .help-subsection { + @media all and (max-width: 767px) { + margin-top: 1rem; + } + } + + // scss-lint:disable QualifyingElement + h4, + h5 { + border-bottom: 0; + margin-bottom: 0; + padding-bottom: 0; + } + + h4[id]::before { + display: none; + } + + p { + margin-bottom: 0; + } + // scss-lint:enable QualifyingElement + + .help-icon, + .toggle-icon { + fill: $help-indigo-500; + vertical-align: text-top; + } + + // scss-lint:disable ImportantRule + .help-icon { + margin-left: 0 !important; + } + // scss-lint:enable ImportantRule + + .toggle-icon { + float: right; + transition: .35s ease-in-out; + } + + .help-and-feedback-toggle { + color: $gds-gray-950; + + &:hover { + color: $gds-gray-950; + text-decoration: none; + } + + &.collapsed .toggle-icon { + transform: rotate(180deg); + } + } + + .help-and-feedback-title { + font-size: 16px; + font-weight: 700; + } + + .help-and-feedback-heading { + color: $gds-gray-950; + font-size: 14px; + font-weight: 700; + margin-bottom: .25rem; + } + + .help-and-feedback-link { + text-decoration: underline; + } + + .support-btn { + background-color: $gds-white; + border-color: $help-gray-200; + color: $help-gray-900; + font-size: 14px; + + &:hover { + color: $help-gray-900; + } + } +} + +.disqus-comments-gitlab { + iframe { + padding-left: 15px; + padding-right: 15px; + background-color: $color-white; + border-radius: 5px; + box-shadow: 2px 2px 7px $search-border; + margin-top: 25px; + } +} |