diff options
author | David O'Regan <doregan@gitlab.com> | 2023-08-15 01:05:37 +0300 |
---|---|---|
committer | David O'Regan <doregan@gitlab.com> | 2023-08-15 01:05:37 +0300 |
commit | 1fd18d39e1a4103211d57a7b8dcf1f26fa014a25 (patch) | |
tree | 04d77206140895348c9eb1d34ea785bb5f1a9e5f /content/assets/stylesheets/stylesheet.scss | |
parent | fb97a56db704f205050a150e05176e2af4990b4b (diff) | |
parent | cd05967b7f674a4a778b7c6955ede163df5aecb4 (diff) |
Merge branch '1690-badge-refactor' into 'main'
Refactor tier badges
See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4153
Merged-by: David O'Regan <doregan@gitlab.com>
Approved-by: David O'Regan <doregan@gitlab.com>
Approved-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>
Diffstat (limited to 'content/assets/stylesheets/stylesheet.scss')
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 114 |
1 files changed, 12 insertions, 102 deletions
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index ebaa60bd..3a1d074a 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -374,115 +374,25 @@ p.result-snippet { font-size: 0.875rem; } -//badges -.badges-drop { - display: inline-block; - cursor: pointer; - transition: background-color 0.5s ease-in-out; - /* stylelint-disable declaration-no-important */ - border-bottom: 0 !important; - /* stylelint-enable declaration-no-important */ - - &:hover { +// Badges +.docs-badges-wrapper { + a.gl-link { border-bottom: 0; + color: inherit; } - - .badge-tier, - .badge-self-managed, - .badge-saas, - .badge-contribute { - &::after { - content: ''; - display: block; - width: 0; - height: 1px; - transition: width 0.3s; - opacity: 0.5; - } - } - - .badge-tier, - .badge-contribute { - &::after { - background: $badge-tier; - } - } - - .badge-self-managed { - &::after { - background: $badge-self-managed; - } - } - - .badge-saas { - &::after { - background: $badge-saas; - } - } - &:hover { - .badge-tier, - .badge-self-managed, - .badge-saas, - .badge-contribute { - &::after { - width: 100%; - } - } - } -} - -.badge-tier { - color: $badge-tier; -} - -.badge-self-managed { - color: $badge-self-managed; - padding-left: 5px; -} - -.badge-saas { - color: $badge-saas; - padding-left: 5px; } - -.badge-contribute { - color: $badge-tier; - padding-left: 5px; +// Badges in headings +.badge-heading-true span.gl-badge { + vertical-align: super; } - -.badge-small { - color: $badge-self-managed; - opacity: 0.6; - transition: opacity 0.3s; - &:hover { - opacity: 1; - &::after { - content: attr(data-title); - text-transform: uppercase; - font-weight: 700; - font-size: 0.7em; - display: inline; - position: absolute; - padding: 1px 5px; - opacity: 1; - background-color: $white; - white-space: nowrap; - border-radius: 2px; - max-width: 150px; - } - } +// Badges in regular content +.badge-heading-false span.gl-badge { + vertical-align: middle; } -.badge-display { - text-transform: uppercase; - text-align: center; - display: inline-block; - margin-left: 2px; - border-radius: 2px; +// Tooltips +.tooltip { font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.02em; - line-height: 1.4; } //in-page styles |