diff options
Diffstat (limited to 'app/assets/stylesheets/components/design_management/design.scss')
-rw-r--r-- | app/assets/stylesheets/components/design_management/design.scss | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss new file mode 100644 index 00000000000..1061aae2bbb --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -0,0 +1,140 @@ +.design-detail { + background-color: rgba($black, 0.9); + + .with-performance-bar & { + top: 35px; + } + + .inactive { + opacity: 0.5; + } +} + +.design-presentation-wrapper { + top: 0; + left: 0; +} + +.design-scaler { + z-index: 1; +} + +.design-scaler-wrapper { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.design-checkbox { + position: absolute; + top: $gl-padding; + left: 30px; +} + +.image-notes { + overflow-y: scroll; + padding: $gl-padding; + padding-top: 50px; + background-color: $white; + flex-shrink: 0; + min-width: 400px; + flex-basis: 28%; + + .badge.badge-pill { + margin-left: $gl-padding; + background-color: $blue-400; + color: $white; + border: $white 1px solid; + min-height: 28px; + padding: 7px 10px; + border-radius: $gl-padding; + } + + .design-discussion { + margin: $gl-padding 0; + + &::before { + content: ''; + border-left: 1px solid $gray-200; + position: absolute; + left: 28px; + top: -18px; + height: 18px; + } + + .design-note { + padding: $gl-padding; + list-style: none; + + a { + color: inherit; + } + + .note-text a { + color: $blue-600; + } + } + + .reply-wrapper { + padding: $gl-padding; + } + } + + .reply-wrapper { + border-top: 1px solid $border-color; + } + + .new-discussion-disclaimer { + line-height: 20px; + } +} + +@media (max-width: map-get($grid-breakpoints, lg)) { + .design-detail { + overflow-y: scroll; + } + + .image-notes { + overflow-y: auto; + min-width: 100%; + flex-grow: 1; + flex-basis: auto; + } +} + +.design-dropzone-border { + border: 2px dashed $gray-200; +} + +.design-dropzone-card { + transition: border $general-hover-transition-duration $general-hover-transition-curve; + + &:focus, + &:active { + outline: none; + border: 2px dashed $purple; + color: $gl-text-color; + } + + &:hover { + border-color: $gray-500; + } +} + +.design-dropzone-overlay { + border: 2px dashed $purple; + top: 0; + left: 0; + pointer-events: none; + opacity: 1; +} + +.design-dropzone-fade-enter-active, +.design-dropzone-fade-leave-active { + transition: opacity $general-hover-transition-duration $general-hover-transition-curve; +} + +.design-dropzone-fade-enter, +.design-dropzone-fade-leave-to { + opacity: 0; +} |