diff options
Diffstat (limited to 'app/assets/stylesheets/components')
7 files changed, 222 insertions, 89 deletions
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss index 2e2c1fefc79..ce33aa94df3 100644 --- a/app/assets/stylesheets/components/dashboard_skeleton.scss +++ b/app/assets/stylesheets/components/dashboard_skeleton.scss @@ -68,7 +68,7 @@ background-size: cover; background-image: linear-gradient(to right, $gray-100 0%, - $gray-50 20%, + $gray-10 20%, $gray-100 40%, $gray-100 100%); border-radius: $gl-padding; 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; +} diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss new file mode 100644 index 00000000000..aacb1f91e59 --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design_list_item.scss @@ -0,0 +1,19 @@ +.design-list-item { + height: 280px; + text-decoration: none; + + .icon-version-status { + position: absolute; + right: 10px; + top: 10px; + } + + .design-event { + top: $gl-padding; + right: $gl-padding; + } + + .card-body { + height: 230px; + } +} diff --git a/app/assets/stylesheets/components/design_management/design_version_dropdown.scss b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss new file mode 100644 index 00000000000..f79d672e238 --- /dev/null +++ b/app/assets/stylesheets/components/design_management/design_version_dropdown.scss @@ -0,0 +1,3 @@ +.design-version-dropdown > button { + background: inherit; +} diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss new file mode 100644 index 00000000000..e0637088bbb --- /dev/null +++ b/app/assets/stylesheets/components/milestone_combobox.scss @@ -0,0 +1,13 @@ +.selected-item::before { + content: '\f00c'; + color: $green-500; + position: absolute; + left: 16px; + top: 16px; + transform: translateY(-50%); + font: 14px FontAwesome; +} + +.dropdown-item-space { + padding: 8px 12px; +} diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index ce1039832d3..61f971a3185 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -1,9 +1,11 @@ $item-path-max-width: 160px; $item-milestone-max-width: 120px; $item-weight-max-width: 48px; +$item-remove-button-space: 42px; .related-items-list { padding: $gl-padding-4; + padding-right: $gl-padding-6; &, .list-item:last-child { @@ -11,16 +13,16 @@ $item-weight-max-width: 48px; } } -.sortable-link { - max-width: 85%; -} - .related-items-tree { .card-header { .gl-label { line-height: $gl-line-height; } } + + .sortable-link { + white-space: normal; + } } .item-body { @@ -48,17 +50,12 @@ $item-weight-max-width: 48px; cursor: help; } - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - margin-right: $gl-padding-4; - } - .confidential-icon { color: $orange-600; } .item-title-wrapper { - max-width: 100%; + max-width: calc(100% - #{$item-remove-button-space}); } .item-title { @@ -69,11 +66,6 @@ $item-weight-max-width: 48px; font-weight: $gl-font-weight-bold; } - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: none; - } - .sortable-link { color: $gray-900; font-weight: normal; @@ -90,17 +82,14 @@ $item-weight-max-width: 48px; white-space: nowrap; } - @include media-breakpoint-down(lg) { - .issue-count-badge { - padding-left: 0; - } + .health-label-short { + display: none; } } .item-body, .card-header { .health-label-short { - display: initial; max-width: 0; } @@ -135,6 +124,12 @@ $item-weight-max-width: 48px; } } +.card-header { + .health-label-short { + display: initial; + } +} + .item-meta { flex-basis: 100%; font-size: $gl-font-size; @@ -227,25 +222,28 @@ $item-weight-max-width: 48px; font-weight: $gl-font-weight-bold; max-width: $item-path-max-width; } - - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: block; - } } .btn-item-remove { position: absolute; - right: 0; top: $gl-padding-4 / 2; + right: 0; padding: $gl-padding-4; margin-right: $gl-padding-4 / 2; line-height: 0; border-color: transparent; color: $gl-text-color-secondary; + .related-items-tree & { + position: relative; + top: initial; + padding: $btn-sm-side-margin; + margin-right: initial; + } + &:hover { color: $gl-text-color; + border-color: $border-color; } } @@ -269,7 +267,6 @@ $item-weight-max-width: 48px; max-width: 90%; } - .item-body, .card-header { .health-label-short { max-width: 30px; @@ -279,6 +276,15 @@ $item-weight-max-width: 48px; /* Small devices (landscape phones, 768px and up) */ @include media-breakpoint-up(md) { + .item-body .item-contents { + max-width: 95%; + } + + .related-items-tree .item-contents, + .item-body .item-title { + max-width: 100%; + } + .sortable-link { text-overflow: ellipsis; overflow: hidden; @@ -290,27 +296,8 @@ $item-weight-max-width: 48px; .item-contents { min-width: 0; } - - .item-title { - flex-basis: unset; - // 95% because we compensate - // for remove button which is - // positioned absolutely - width: 95%; - } - - .btn-item-remove { - order: 1; - } - } - - .item-meta { - .item-meta-child { - flex-basis: unset; - } } - .item-body, .card-header { .health-label-short { max-width: 60px; @@ -330,7 +317,6 @@ $item-weight-max-width: 48px; } } - .item-body, .card-header { .health-label-short { max-width: 100px; @@ -346,32 +332,13 @@ $item-weight-max-width: 48px; @include media-breakpoint-up(xl) { .item-body { .item-title { - min-width: 0; width: auto; flex-basis: auto; flex-shrink: 1; font-weight: $gl-font-weight-normal; - - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: block; - margin-right: $gl-padding-8; - } - } - - .item-title-wrapper { - max-width: calc(100% - 500px); - } - - .item-info-area { - flex-basis: auto; } } - .health-label-short { - display: initial; - } - .health-label-long { display: none; } @@ -380,16 +347,7 @@ $item-weight-max-width: 48px; overflow: hidden; } - .item-meta { - flex: 1; - } - .item-assignees { - .avatar { - height: $gl-padding-24; - width: $gl-padding-24; - } - .avatar-counter { height: $gl-padding-24; min-width: $gl-padding-24; @@ -401,12 +359,8 @@ $item-weight-max-width: 48px; .btn-item-remove { position: relative; top: initial; - right: 0; padding: $btn-sm-side-margin; - - &:hover { - border-color: $border-color; - } + margin-right: $gl-padding-4 / 2; } .sortable-link { @@ -415,8 +369,7 @@ $item-weight-max-width: 48px; } @media only screen and (min-width: 1500px) { - .card-header, - .item-body { + .card-header { .health-label-short { display: none; } @@ -425,10 +378,4 @@ $item-weight-max-width: 48px; display: initial; } } - - .item-body { - .item-title-wrapper { - max-width: calc(100% - 640px); - } - } } diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss new file mode 100644 index 00000000000..eca0f1114af --- /dev/null +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -0,0 +1,11 @@ +// Overrides styles from ToastUI editor +.tui-editor-defaultUI-toolbar .toolbar-button { + color: $gl-gray-600; + border: 0; + + &:hover, + &:active { + color: $blue-500; + border: 0; + } +} |