diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/milestone.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/milestone.scss | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss new file mode 100644 index 00000000000..858e13fc558 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -0,0 +1,254 @@ +@import 'mixins_and_variables_and_functions'; + +$status-box-line-height: 26px; + +.issues-sortable-list .str-truncated { + max-width: 90%; +} + +.milestones { + padding: $gl-padding-8; + margin-top: $gl-padding-8; + border-radius: $border-radius-default; + background-color: var(--gray-100, $gray-100); + + .milestone { + border: 0; + padding: $gl-padding-top $gl-padding; + border-radius: $border-radius-default; + background-color: var(--white, $white); + + &:not(:last-child) { + margin-bottom: $gl-padding-4; + } + + h4 { + font-weight: $gl-font-weight-bold; + } + + .progress { + width: 100%; + height: 6px; + margin-bottom: $gl-padding-4; + } + + .milestone-progress, + .milestone-release-links { + a { + color: var(--blue-600, $blue-600); + } + } + + .status-box { + font-size: $tooltip-font-size; + margin-top: 0; + margin-right: $gl-padding-4; + line-height: $status-box-line-height; + + @include media-breakpoint-down(xs) { + line-height: unset; + padding: $gl-padding-4 $gl-input-padding; + } + } + } +} + +.milestone-content { + .issues-count { + margin-right: 17px; + float: right; + width: 105px; + } + + .issuable-row { + span { + a { + color: var(--gray-900, $gray-900); + word-wrap: break-word; + } + + .gl-label-link { + color: inherit; + } + } + } + + .card-header { + line-height: $line-height-base; + padding: 14px 16px; + display: flex; + + .title { + flex: 1; + flex-grow: 2; + } + + .counter { + flex: 0; + padding-left: 16px; + } + } +} + +.milestone-sidebar { + .milestone-progress { + .title { + padding-top: 5px; + } + + .progress { + height: 6px; + margin: 0; + } + + .sidebar-collapsed-icon { + clear: both; + padding: 15px 5px 5px; + + .progress { + margin: 5px 0; + } + } + } + + .collapsed-milestone-date { + font-size: 12px; + } + + .milestone-date { + display: block; + } + + .date-separator { + line-height: 5px; + } + + .remaining-days strong { + font-weight: $gl-font-weight-normal; + } + + .milestone-stat { + float: left; + margin-right: 14px; + } + + .milestone-stat:last-child { + margin-right: 0; + } + + .right-sidebar-expanded & { + .gutter-toggle { + margin-bottom: $sidebar-milestone-toggle-bottom-margin; + } + } + + .right-sidebar-collapsed & { + .milestone-progress { + padding-top: 0; + } + + .reference { + border-top: 1px solid $border-gray-normal; + } + } +} + +.milestone-issues-list, +.milestone-merge_requests-list { + .issuable-detail { + display: block; + margin-top: 7px; + + .issue-link { + display: inline-block; + } + + .issuable-number { + color: var(--gray-500, $gray-500); + margin-right: 5px; + } + + .avatar { + float: none; + } + + > a:not(:last-of-type) { + margin-right: 5px; + } + } +} + +.milestone-detail { + border-bottom: 1px solid var(--border-color, $border-color); +} + +@include media-breakpoint-down(xs) { + .milestone-actions { + @include clearfix(); + padding-top: $gl-vert-padding; + + .btn:first-child { + margin-left: 0; + } + } +} + +.milestone-page-header { + display: flex; + flex-flow: row; + align-items: center; + flex-wrap: wrap; + + .status-box { + margin-top: 0; + order: 1; + } + + .milestone-buttons { + margin-left: auto; + order: 2; + + .verbose { + display: none; + } + } + + .header-text-content { + order: 3; + width: 100%; + } + + @include media-breakpoint-up(xs) { + .milestone-buttons .verbose { + display: inline; + } + + .header-text-content { + order: 2; + width: auto; + } + + .milestone-buttons { + order: 3; + } + } +} + +.issuable-row { + background-color: var(--white, $white); +} + +.milestone-popover-instructions-list { + padding-left: 2em; + + > li { + padding-left: 1em; + } +} + +@include media-breakpoint-down(xs) { + .milestone-banner-text, + .milestone-banner-link { + display: inline; + } +} |