diff options
Diffstat (limited to 'app/assets/stylesheets/components')
3 files changed, 86 insertions, 21 deletions
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 21133316291..81f2091e915 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -1,3 +1,6 @@ +$design-pin-diameter: 28px; +$t-gray-a-16-design-pin: rgba($black, 0.16); + .layout-page.design-detail-layout { max-height: 100vh; } @@ -9,34 +12,61 @@ top: 35px; } - .design-pin { - transition: opacity $gl-transition-duration-medium $general-hover-transition-curve; - - &.inactive { - @include gl-opacity-5; - - &:hover { - @include gl-opacity-10; - } - } - } - .badge.badge-pill { display: flex; - height: 28px; - width: 28px; - background-color: $blue-400; + height: $design-pin-diameter; + width: $design-pin-diameter; + box-sizing: content-box; + background-color: $purple-500; color: $white; - border: $white 1px solid; + font-weight: $gl-font-weight-bold; border-radius: 50%; + z-index: 1; + padding: 0; &.resolved { background-color: $gray-500; } } - .design-detail-overlay-add-comment { - cursor: crosshair; + .comment-indicator { + border-radius: 50%; + } + + .comment-indicator, + .frame .badge.badge-pill { + &:active { + cursor: grabbing; + } + } + + /** + * Design pin that overlays the design + */ + .frame .badge.badge-pill { + box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; + border: $white 2px solid; + will-change: transform, box-shadow, opacity; + // NOTE: verbose transition property required for Safari + transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; + transform-origin: 0 0; + transform: translate(-50%, -50%); + + &:hover { + transform: scale(1.2) translate(-50%, -50%); + } + + &:active { + box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; + } + + &.inactive { + @include gl-opacity-5; + + &:hover { + @include gl-opacity-10; + } + } } } @@ -105,8 +135,8 @@ border-left: 1px solid $gray-100; position: absolute; left: 28px; - top: -18px; - height: 18px; + top: -17px; + height: 17px; } .design-note { @@ -152,6 +182,10 @@ } } +.design-card-header { + background: transparent; +} + .design-dropzone-border { border: 2px dashed $gray-100; } diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index b1189137d59..d97a9bc227d 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -44,3 +44,11 @@ @include gl-line-height-20; } } + +/** +* Styling below ensures that YouTube videos are displayed in the editor the same as they would in about.gitlab.com +* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/stylesheets/_base.scss#L977 +*/ +.video_container { + padding-bottom: 56.25%; +} diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 4fff900f5a5..6c58346b750 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -1,9 +1,32 @@ +.whats-new-drawer { + margin-top: $header-height; + @include gl-shadow-none; +} + +.with-performance-bar .whats-new-drawer { + margin-top: calc(#{$performance-bar-height} + #{$header-height}); +} + .gl-badge.whats-new-item-badge { background-color: $purple-light; color: $purple; - font-weight: bold; + @include gl-font-weight-bold; } .whats-new-item-image { border-color: $gray-50; } + +.whats-new-modal-backdrop { + z-index: 9; +} + +.whats-new-notification-count { + @include gl-bg-gray-900; + @include gl-font-sm; + @include gl-line-height-normal; + @include gl-text-white; + @include gl-vertical-align-top; + border-radius: 20px; + padding: 3px 10px; +} |