diff options
author | Enrique Alcantara <ealcantara@gitlab.com> | 2019-05-16 14:05:56 -0400 |
---|---|---|
committer | Enrique Alcantara <ealcantara@gitlab.com> | 2019-06-07 08:52:43 -0400 |
commit | b57633f0cafcff811aaf13349390f7a49d799b2a (patch) | |
tree | d22437e62a0f54a96810c49952d6e5ef6b0542ff /app/assets/stylesheets/components/popover.scss | |
parent | 2320e4451fa0c0c60326a7d29fa53599559b6484 (diff) | |
download | gitlab-ce-b57633f0cafcff811aaf13349390f7a49d799b2a.tar.gz |
Style popovers according to the design specs
- Apply new styles for header, padding, border, and fonts
- Remove bootstrap 3 backward compat code
Diffstat (limited to 'app/assets/stylesheets/components/popover.scss')
-rw-r--r-- | app/assets/stylesheets/components/popover.scss | 91 |
1 files changed, 82 insertions, 9 deletions
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss index 774be9ef588..3d915928565 100644 --- a/app/assets/stylesheets/components/popover.scss +++ b/app/assets/stylesheets/components/popover.scss @@ -1,37 +1,102 @@ .popover { - min-width: 300px; + max-width: $popover-max-width; + border: 1px solid $gray-200; + box-shadow: 0 2px 3px 1px $gray-200; + font-size: $gl-font-size-small; - .popover-body .user-popover { - padding: $gl-padding-8; - font-size: $gl-font-size-small; - line-height: $gl-line-height; - - .category-icon { - color: $gray-600; - } + .category-icon { + color: $gray-600; } + /** + * Blue popover variation + */ &.blue { background-color: $blue-600; + border-color: $blue-600; .popover-body { color: $white-light; } &.bs-popover-bottom { + .arrow::before, .arrow::after { border-bottom-color: $blue-600; } } &.bs-popover-top { + .arrow::before, .arrow::after { border-top-color: $blue-600; } } + + &.bs-popover-right { + .arrow::after, + .arrow::before { + border-right-color: $blue-600; + } + } + + &.bs-popover-left { + .arrow::before, + .arrow::after { + border-left-color: $blue-600; + } + } + } +} + +.bs-popover-top { + /* When popover position is top, the arrow is translated 1 pixel + * due to the box-shadow include in our custom styles. + */ + > .arrow::before { + border-top-color: $gray-200; + bottom: 1px; + } + + > .arrow::after { + bottom: 2px; + } +} + +.bs-popover-bottom { + > .arrow::before { + border-bottom-color: $gray-200; + } + + > .popover-header::before { + border-color: $white-light; + } +} + +.bs-popover-right > .arrow::before { + border-right-color: $gray-200; +} + +.bs-popover-left > .arrow::before { + border-left-color: $gray-200; +} + +.popover-header { + background-color: $white-light; + font-size: $gl-font-size-small; +} + +.popover-body { + padding: $gl-padding; + + > .popover-hr { + margin: $gl-padding 0; } } +/** +* mr_popover component +*/ .mr-popover { .text-secondary { font-size: 12px; @@ -58,6 +123,14 @@ } } +/** +* user_popover component +*/ +.user-popover { + padding: $gl-padding-8; + line-height: $gl-line-height; +} + .onboarding-welcome-page { .popover { min-width: auto; |