diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
37 files changed, 296 insertions, 278 deletions
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 6bb40bae9ed..1c3d312f7ac 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -58,7 +58,7 @@ .boards-app { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { transition: width $sidebar-transition-duration; width: 100%; @@ -81,11 +81,11 @@ white-space: nowrap; min-height: 200px; - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include media-breakpoint-only(sm) { height: calc(100vh - #{$issue-board-list-difference-sm}); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { height: calc(100vh - #{$issue-board-list-difference-md}); } @@ -94,13 +94,13 @@ 100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height} ); - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include media-breakpoint-only(sm) { height: calc( 100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height} ); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { height: calc( 100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height} ); @@ -117,7 +117,7 @@ white-space: normal; vertical-align: top; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 400px; } @@ -274,7 +274,7 @@ font-size: (26px / $issue-boards-font-size) * 1em; } -.card { +.board-card { position: relative; padding: 11px 10px 11px $gl-padding; background: $white-light; @@ -290,7 +290,7 @@ } &.is-active, - &.is-active .card-assignee:hover a { + &.is-active .board-card-assignee:hover a { background-color: $row-hover; &:first-child:not(:only-child) { @@ -298,7 +298,7 @@ } } - .label { + .badge { border: 0; outline: 0; } @@ -310,7 +310,7 @@ } } -.card-title { +.board-card-title { @include overflow-break-word(); margin: 0 30px 0 0; font-size: 1em; @@ -322,11 +322,11 @@ } } -.card-header { +.board-card-header { display: flex; min-height: 20px; - .card-assignee { + .board-card-assignee { display: flex; justify-content: flex-end; position: absolute; @@ -397,16 +397,16 @@ } } -.card-footer { +.board-card-footer { margin: 0 0 5px; - .label { + .badge { margin-top: 5px; margin-right: 6px; } } -.card-number { +.board-card-number { font-size: 12px; color: $gl-text-color-secondary; } @@ -564,11 +564,11 @@ .add-issues-list-column { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 50%; } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: (100% / 3); } } @@ -583,11 +583,11 @@ margin-right: -$gl-vert-padding; overflow-y: scroll; - .card-parent { + .board-card-parent { padding: 0 5px 5px; } - .card { + .board-card { border: 1px solid $border-gray-dark; box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3); cursor: pointer; @@ -637,7 +637,7 @@ display: none; margin-right: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: block; } } @@ -645,7 +645,7 @@ .dropdown-menu-toggle { width: 100px; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: 140px; } } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 50f32660445..9ee02ca1d83 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -215,7 +215,7 @@ } .header-action-buttons { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .sidebar-toggle-btn { margin-top: 0; margin-left: 10px; @@ -277,10 +277,6 @@ &.coverage { padding: 0 16px 11px; } - - .btn-group-justified { - margin-top: 5px; - } } .block-last { @@ -305,7 +301,7 @@ background-color: $white-light; } - .label { + .badge.badge-pill { margin-left: 2px; } @@ -320,7 +316,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { display: block; .btn { diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 3fd13078131..2b6d92016d5 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -63,7 +63,7 @@ text-decoration: none; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { > div { display: flex; align-items: center; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 0a27c6e0a25..a4ca82de90e 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -23,7 +23,7 @@ } .commit-hash-full { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { width: 80px; white-space: nowrap; overflow: hidden; @@ -183,7 +183,7 @@ } .commit-actions { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { .fa-spinner { font-size: 12px; } @@ -327,11 +327,11 @@ } &.invalid { - @include status-color($gray-dark, $gray, $gray-darkest); + @include status-color($gray-dark, color("gray"), $gray-darkest); border-color: $gray-darkest; &:not(span):hover { - color: $gray; + color: color("gray"); } } } diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss index fb1899284fd..bd338326154 100644 --- a/app/assets/stylesheets/pages/convdev_index.scss +++ b/app/assets/stylesheets/pages/convdev_index.scss @@ -53,19 +53,19 @@ $space-between-cards: 8px; padding: $space-between-cards / 2; position: relative; - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { width: percentage(1 / 4); } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: percentage(1 / 5); } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: percentage(1 / 6); } - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { width: percentage(1 / 10); } } @@ -82,7 +82,7 @@ $space-between-cards: 8px; .convdev-card-low { border-top-color: $color-low-score; - .card-score-big { + .board-card-score-big { background-color: $red-50; } } @@ -90,7 +90,7 @@ $space-between-cards: 8px; .convdev-card-average { border-top-color: $color-average-score; - .card-score-big { + .board-card-score-big { background-color: $orange-50; } } @@ -98,7 +98,7 @@ $space-between-cards: 8px; .convdev-card-high { border-top-color: $color-high-score; - .card-score-big { + .board-card-score-big { background-color: $green-50; } } @@ -112,14 +112,14 @@ $space-between-cards: 8px; margin: 0 0 2px; } - .text-light { + .light-text { font-size: 13px; line-height: 1.25; color: $gl-text-color-secondary; } } -.card-scores { +.board-card-scores { display: flex; justify-content: space-around; align-items: center; @@ -127,22 +127,22 @@ $space-between-cards: 8px; line-height: 1; } -.card-score { +.board-card-score { color: $gl-text-color-secondary; - .card-score-name { + .board-card-score-name { font-size: 13px; margin-top: 4px; } } -.card-score-value { +.board-card-score-value { font-size: 16px; color: $gl-text-color; font-weight: $gl-font-weight-normal; } -.card-score-big { +.board-card-score-big { border-top: 2px solid $border-color; border-bottom: 1px solid $border-color; font-size: 22px; @@ -150,7 +150,7 @@ $space-between-cards: 8px; font-weight: $gl-font-weight-normal; } -.card-buttons { +.board-card-buttons { display: flex; > * { diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index cfef6476d4d..a22c666a525 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -15,7 +15,7 @@ max-width: 480px; padding: 0 $gl-padding; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { margin: 0 auto; } } @@ -75,13 +75,13 @@ } } - .panel { + .card { .content-block { padding: 24px 0; border-bottom: 0; position: relative; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 6px 0 24px; } } @@ -89,7 +89,7 @@ .column { text-align: center; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 15px 0; } @@ -106,7 +106,7 @@ } &:last-child { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; } } @@ -213,7 +213,7 @@ .stage-panel { min-width: 968px; - .panel-heading { + .card-header { padding: 0; background-color: transparent; } @@ -266,7 +266,9 @@ &.issue-title, &.commit-title, &.merge-merquest-title { - @include text-overflow(); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; max-width: 100%; display: block; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 2f2c04206e2..7b36bcb3c7d 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -14,7 +14,7 @@ white-space: nowrap; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; } } @@ -25,7 +25,7 @@ display: flex; flex-grow: 1; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 0; padding-right: 0; } @@ -36,7 +36,7 @@ flex-shrink: 0; flex: 0 0 auto; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; margin-top: 10px; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 70ce5de6a6c..f06c9dcdf8c 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -86,13 +86,13 @@ &.left-side-selected { td.line_content.parallel.right-side { - @include user-select(none); + user-select: none; } } &.right-side-selected { td.line_content.parallel.left-side { - @include user-select(none); + user-select: none; } } } @@ -109,7 +109,7 @@ .old_line, .new_line { - @include user-select(none); + user-select: none; margin: 0; border: 0; padding: 0 5px; @@ -592,14 +592,14 @@ } .commit-stat-summary { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-left: -$gl-padding; padding-left: $gl-padding; background-color: $white-light; } } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { position: -webkit-sticky; position: sticky; top: 24px; @@ -610,10 +610,6 @@ top: 76px; } - &:not(.is-stuck) .diff-stats-additions-deletions-collapsed { - display: none; - } - &.is-stuck { padding-top: 0; padding-bottom: 0; @@ -622,13 +618,21 @@ .diff-stats-additions-deletions-expanded, .inline-parallel-buttons { - display: none; + display: none !important; + } + } + } + + @include media-breakpoint-up(lg) { + &.is-stuck { + .diff-stats-additions-deletions-collapsed { + display: block !important; } } } } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .with-performance-bar { .diff-files-changed.diff-files-changed-merge-request { top: 76px + $performance-bar-height; @@ -641,7 +645,7 @@ width: 100%; z-index: 150; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { left: $gl-padding; } @@ -772,9 +776,9 @@ } } -.frame .badge, -.image-diff-avatar-link .badge, -.notes > .badge { +.frame .badge.badge-pill, +.image-diff-avatar-link .badge.badge-pill, +.notes > .badge.badge-pill { position: absolute; background-color: $blue-400; color: $white-light; @@ -788,7 +792,7 @@ } } -.frame .badge, +.frame .badge.badge-pill, .frame .image-comment-badge { // Center align badges on the frame transform: translate(-50%, -50%); @@ -811,14 +815,14 @@ .image-diff-avatar-link { position: relative; - .badge, + .badge.badge-pill, .image-comment-badge { top: 25px; right: 8px; } } -.notes > .badge { +.notes > .badge.badge-pill { display: none; left: -13px; } @@ -840,7 +844,7 @@ display: none; } - .notes > .badge { + .notes > .badge.badge-pill { display: block; } } diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 8ecda50602d..437621299e0 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -37,7 +37,7 @@ padding-top: 7px; padding-bottom: 7px; - .pull-right { + .float-right { height: 20px; } } @@ -63,11 +63,11 @@ max-width: 450px; float: left; - @media(max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { width: 280px; } - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { width: 180px; } } @@ -111,10 +111,10 @@ } -@media(max-width: $screen-xs-max){ +@include media-breakpoint-down(xs) { .file-editor { .file-title { - .pull-right { + .float-right { height: auto; } } @@ -153,7 +153,7 @@ vertical-align: top; display: inline-block; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; margin: 19px 0 12px; } @@ -166,7 +166,7 @@ padding: 0 0 0 14px; border-left: 1px solid $border-color; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -181,7 +181,7 @@ margin-top: 6px; line-height: 21px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; margin: 5px 0; } @@ -193,7 +193,7 @@ vertical-align: top; margin: 5px 0 0 8px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 0 0 16px; @@ -209,7 +209,7 @@ font-family: $regular_font; margin-top: -5px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -223,7 +223,7 @@ width: 250px; vertical-align: top; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 5px 0; @@ -237,7 +237,7 @@ display: inline-block; margin: 7px 0 0 10px; - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { display: block; width: 100%; margin: 20px 0; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 1f406cc1c2d..cd0d67613c3 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -1,4 +1,4 @@ -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .deployments-container { width: 100%; overflow: auto; @@ -138,7 +138,7 @@ border-left: 0; border-right: 0; - @media (min-width: $screen-sm-max) { + @media (min-width: map-get($grid-breakpoints, md)-1) { border-top: 0; } } @@ -251,7 +251,7 @@ font-size: 16px; } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { min-width: 100%; } } @@ -432,7 +432,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { .label-axis-text, .text-metric-usage, .legend-axis-text { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index d9267f5cdf3..f79586b68b9 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -70,7 +70,7 @@ .md { font-size: $gl-font-size; - .label { + .badge.badge-pill { color: $gl-text-color; } @@ -173,7 +173,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .event-item { padding-left: 0; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 409b7285f82..c2b42e02eee 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -2,7 +2,7 @@ @include str-truncated(90%); } -.dashboard .side .panel .panel-heading .input-group { +.dashboard .side .card .card-header .input-group { .form-control { height: 42px; @@ -40,7 +40,7 @@ flex: 1; } - .dropdown-menu-align-right { + .dropdown-menu-right { margin-top: 0; } @@ -102,7 +102,7 @@ } } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { &, .dropdown, .dropdown .dropdown-toggle, @@ -149,14 +149,14 @@ padding: 50px 100px; overflow: hidden; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { padding: 50px 0; } svg { float: right; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { float: none; display: block; width: 250px; @@ -171,7 +171,7 @@ width: 460px; margin-top: 120px; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { float: none; margin-top: 60px; width: auto; @@ -205,7 +205,7 @@ max-width: 480px; padding: 0 $gl-padding; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { margin: 0 auto; } } diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index 9cc9e11bcd1..0350fe5752e 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -28,8 +28,8 @@ } .key { - @extend .label; - @extend .label-inverse; + @extend .badge.badge-pill; + background-color: $label-inverse-bg; font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 3px 5px; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index a8110f069d4..4aea9740735 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -373,7 +373,7 @@ /* Extra small devices (phones, less than 768px) */ display: none; /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: block; } @@ -656,7 +656,7 @@ } .issuable-form-padding-top { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-top: 7px; } } @@ -670,7 +670,7 @@ padding-left: 9px; padding-right: 9px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; height: auto; align-self: center; @@ -678,7 +678,7 @@ } .issuable-gutter-toggle { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { margin-left: $btn-side-margin; } } @@ -696,7 +696,7 @@ width: 100%; } - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { margin-bottom: $gl-padding; } } @@ -737,7 +737,7 @@ } } - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .issuable-meta { .controls li { margin-right: 0; @@ -772,7 +772,7 @@ } } - @media(max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { .task-status, .issuable-due-date, .project-ref-path { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0d17b9bae7e..19fb99bfa93 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -141,7 +141,7 @@ ul.related-merge-requests > li { } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .detail-page-header { .issuable-meta { line-height: 18px; @@ -203,7 +203,7 @@ ul.related-merge-requests > li { } } - .btn-group:not(.hide) { + .btn-group:not(.hidden) { display: flex; } @@ -245,7 +245,7 @@ ul.related-merge-requests > li { display: block; } -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { .emoji-block .row { display: flex; @@ -256,8 +256,8 @@ ul.related-merge-requests > li { } .create-mr-dropdown-wrap { - .btn-group:not(.hide) { - display: inline-block; + .btn-group:not(.hidden) { + display: inline-flex; } } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d81236c5883..e178371d21f 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -62,13 +62,13 @@ display: inline-block; margin-bottom: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 200px; margin-left: $gl-padding * 2; margin-bottom: 0; } - .label { + .badge { overflow: hidden; text-overflow: ellipsis; max-width: 100%; @@ -80,7 +80,7 @@ margin-bottom: 10px; margin-left: 50px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; width: 100px; margin-left: 10px; @@ -101,7 +101,7 @@ color: $blue-600; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: inline-block; max-width: 50%; margin-left: 10px; @@ -110,7 +110,7 @@ } } - .label { + .badge { padding: 4px $grid-size; font-size: $label-font-size; position: relative; @@ -122,6 +122,7 @@ padding: 0 $grid-size; line-height: 16px; border-radius: $label-border-radius; + color: $white-light; } .dropdown-labels-error { @@ -132,7 +133,7 @@ } .manage-labels-list { - @media(min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { &.content-list li { padding: $gl-padding 0; } @@ -171,12 +172,12 @@ } .dropdown { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .dropdown-menu { min-width: 100%; } @@ -283,7 +284,7 @@ } .label-subscribe-button { - @media(min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { min-width: 105px; margin-left: $gl-padding; } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 97303d02666..c1b1d2e028d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -191,9 +191,9 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .login-page { - .col-sm-5.pull-right { + .col-md-5.float-right { float: none !important; margin-bottom: 45px; } @@ -243,7 +243,7 @@ .navless-container { padding: 65px 15px; // height of footer + bottom padding of email confirmation link - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding: 0 15px 65px; } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index d5ae141dd7e..de2b5701e2d 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -9,9 +9,13 @@ } } +.member-sort-dropdown { + margin-left: $gl-padding-8; +} + .member { .list-item-name { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; width: 50%; } @@ -22,12 +26,12 @@ } .controls { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; } - .dropdown-menu.dropdown-menu-align-right { + .dropdown-menu.dropdown-menu-right { margin-top: -2px; } } @@ -35,7 +39,7 @@ .form-horizontal { margin-top: 20px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; margin-top: 3px; @@ -45,20 +49,20 @@ .btn-remove { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: auto; } } &.existing-title { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; } } } .member-form-control { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-bottom: 5px; margin-left: 0; margin-right: 0; @@ -73,7 +77,7 @@ .member-search-form { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: right; } @@ -86,7 +90,7 @@ width: 100%; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-top: 0; width: 155px; } @@ -96,7 +100,7 @@ width: 100%; padding-right: 35px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 250px; } } @@ -114,7 +118,7 @@ border: 0; outline: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { right: 160px; } } @@ -125,7 +129,7 @@ align-items: center; justify-content: center; - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { display: block; .flex-project-title { @@ -141,7 +145,7 @@ text-overflow: ellipsis; } - .badge { + .badge.badge-pill { height: 17px; line-height: 16px; margin-right: 5px; @@ -156,14 +160,14 @@ } } -.panel { - .panel-heading { - .badge { +.card { + .card-header { + .badge.badge-pill { margin-top: 0; } - @media (max-width: $screen-sm-min) { - .badge { + @include media-breakpoint-down(sm) { + .badge.badge-pill { margin-right: 0; margin-left: 0; } @@ -207,7 +211,7 @@ margin-right: 0; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; .controls > .btn { @@ -235,7 +239,7 @@ } } -.panel-mobile { +.card-mobile { .content-list.members-list li { display: block; diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index 3d5ed9ef3c5..e76525fdbf6 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -291,7 +291,7 @@ $colors: ( } .resolve-info { - @media (max-width: $screen-md-max) { + @media(max-width: map-get($grid-breakpoints, lg)-1) { margin-bottom: $gl-padding; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 3581dd36a10..9eceb3e9a33 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -131,7 +131,7 @@ color: $gl-text-color; display: flex; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-wrap: wrap; } } @@ -282,7 +282,7 @@ display: inline-block; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { p { font-size: 13px; } @@ -494,18 +494,18 @@ } } -.panel-new-merge-request { - .panel-heading { +.card-new-merge-request { + .card-header { padding: 5px 10px; font-weight: $gl-font-weight-bold; line-height: 25px; } - .panel-body { + .card-body { padding: 10px 5px; } - .panel-footer { + .card-footer { padding: 0; .btn { @@ -519,7 +519,7 @@ } .item-title { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 45%; } } @@ -550,7 +550,7 @@ margin-bottom: 0; } - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { float: left; width: 50%; margin-bottom: 0; @@ -648,7 +648,7 @@ background-color: $white-light; border-bottom: 1px solid $border-color; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { position: sticky; position: -webkit-sticky; } @@ -657,7 +657,7 @@ left: 0; transition: right .15s; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { right: 0; } @@ -700,7 +700,7 @@ display: flex; justify-content: space-between; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { flex-direction: column-reverse; } } @@ -736,7 +736,7 @@ display: flex; flex-wrap: wrap; - @media (min-width: $screen-xs) { + @include media-breakpoint-up(xs) { flex-wrap: nowrap; white-space: nowrap; } @@ -753,7 +753,7 @@ min-width: 100px; max-width: 150px; - @media (min-width: $screen-xs) { + @include media-breakpoint-up(xs) { min-width: 0; max-width: 100%; } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index bac3b70c734..dba83e56d72 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -31,7 +31,7 @@ } } - .panel-heading { + .card-header { line-height: $line-height-base; padding: 14px 16px; display: -webkit-flex; @@ -145,7 +145,7 @@ padding: 20px 0; } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .milestone-actions { @include clearfix(); padding-top: $gl-vert-padding; @@ -181,7 +181,7 @@ width: 100%; } - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { .milestone-buttons .verbose { display: inline; } @@ -229,7 +229,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .milestone-banner-text, .milestone-banner-link { display: inline; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 4a528bc2bb1..3b037d066dc 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -51,7 +51,7 @@ } .note-image-attach { - @extend .col-md-4; + @extend .col-lg-4; margin-left: 45px; float: none; } @@ -93,7 +93,7 @@ -webkit-flex-flow: row wrap; width: 100%; - .pull-right { + .float-right { // Flexbox quirk to make sure right-aligned items stay right-aligned. margin-left: auto; } @@ -185,12 +185,12 @@ } .notes.notes-form > li.timeline-entry { - @include notes-media('max', $screen-sm-max) { + @include notes-media('max', map-get($grid-breakpoints, md) - 1) { padding: 0; } .timeline-content { - @include notes-media('max', $screen-sm-max) { + @include notes-media('max', map-get($grid-breakpoints, md) - 1) { margin: 0; } } @@ -326,7 +326,7 @@ outline: 0; } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { float: left; margin-right: $gl-padding; @@ -350,13 +350,13 @@ line-height: 16px; margin-top: 2px; - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { float: left; } } .note-form-actions { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .btn { float: none; width: 100%; @@ -375,7 +375,7 @@ left: 127px; top: 2px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { position: relative; top: 0; left: 0; @@ -410,7 +410,7 @@ width: 298px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: flex; width: 100%; margin-bottom: 10px; @@ -432,7 +432,7 @@ .uploading-container { float: right; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { float: left; margin-top: 5px; } @@ -444,7 +444,7 @@ } .uploading-error-message { - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { &::after { content: "\a"; white-space: pre; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index feee964f9bb..299eda53140 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -22,7 +22,7 @@ ul.notes { .discussion-body { padding-top: 8px; - .panel { + .card { margin-bottom: 0; } } @@ -42,7 +42,7 @@ ul.notes { position: relative; border-bottom: 0; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { padding-left: $note-icon-gutter-width; } @@ -66,7 +66,7 @@ ul.notes { } .timeline-icon { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: -$note-icon-gutter-width; } } @@ -74,7 +74,7 @@ ul.notes { .timeline-content { margin-left: $note-icon-gutter-width; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 0; } } @@ -154,7 +154,7 @@ ul.notes { .note-header { - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { .inline { display: block; } @@ -217,7 +217,7 @@ ul.notes { .timeline-icon { float: left; - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 0; width: auto; } @@ -231,7 +231,7 @@ ul.notes { } .timeline-content { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-left: 30px; } } @@ -423,7 +423,7 @@ ul.notes { } .note-header-author-name { - @include notes-media('max', $screen-xs-max) { + @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { display: none; } } @@ -431,7 +431,7 @@ ul.notes { .note-headline-light { display: inline; - @include notes-media('max', $screen-xs-min) { + @include notes-media('max', map-get($grid-breakpoints, xs)) { display: block; } } @@ -486,7 +486,7 @@ ul.notes { margin-left: 10px; color: $gray-darkest; - @include notes-media('max', $screen-xs-max) { + @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { float: none; margin-left: 0; } @@ -634,6 +634,10 @@ ul.notes { margin-left: -55px; position: absolute; z-index: 10; + + .new & { + margin-top: -10px; + } } .discussion-body, @@ -668,7 +672,7 @@ ul.notes { } .line-resolve-all-container { - @include notes-media('min', $screen-sm-min) { + @include notes-media('min', map-get($grid-breakpoints, sm)) { margin-right: 0; padding-left: $gl-padding; } diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index bdf07a99daf..e98cb444f0a 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -2,7 +2,7 @@ line-height: 34px; .dropdown-menu { - @extend .dropdown-menu-align-right; + @extend .dropdown-menu-right; } } diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss index bc7fa8a26d9..86e70955389 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -69,7 +69,7 @@ .cron-preset-radio-input { display: inline-block; - @media (max-width: $screen-md-max) { + @include media-breakpoint-down(md) { display: block; margin: 0 0 5px 5px; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1264d977b2f..0188a55cbf3 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -16,13 +16,13 @@ margin: 0; white-space: normal; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { justify-content: flex-end; } } .ci-table { - .label { + .badge { margin-bottom: 3px; } @@ -82,7 +82,7 @@ } } -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .content-list { &.builds-content-list { width: 100%; @@ -150,14 +150,14 @@ color: $gl-link-color; } - .label { + .badge { margin-right: 4px; } .label-container { font-size: 0; - .label { + .badge { margin-top: 5px; } } @@ -226,7 +226,7 @@ .stage-cell { &.table-section { - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/ margin-right: -4px; } @@ -800,7 +800,7 @@ button.mini-pipeline-graph-dropdown-toggle { display: block; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 60%; } } @@ -887,7 +887,7 @@ button.mini-pipeline-graph-dropdown-toggle { transform: translate(-50%, 0); border-width: 0 5px 6px; - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(sm) { left: 100%; margin-left: -12px; } @@ -909,7 +909,7 @@ button.mini-pipeline-graph-dropdown-toggle { &.dropdown-menu { transform: translate(-80%, 0); - @media (min-width: $screen-md-min) { + @media(min-width: map-get($grid-breakpoints, md)) { transform: translate(-50%, 0); right: auto; left: 50%; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index b199f9876d3..06078f1d12e 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -5,7 +5,7 @@ } .avatar-image { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; margin-bottom: 0; } @@ -119,7 +119,7 @@ .key-list-item { .key-list-item-info { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { float: left; } } @@ -188,7 +188,7 @@ .modal-dialog { width: 380px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: auto; } @@ -242,7 +242,7 @@ left: 0; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .cover-block { padding-top: 20px; } @@ -352,7 +352,7 @@ table.u2f-registrations { } } - @media(max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { text-align: center; .bordered-box { @@ -414,7 +414,7 @@ table.u2f-registrations { } &.unverified { - @include status-color($gray-dark, $gray, $common-gray-dark); + @include status-color($gray-dark, color("gray"), $common-gray-dark); } } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 53d021086bf..22964163e95 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -9,7 +9,7 @@ .new_project, .edit-project, .import-project { - .help-block { + .form-text.text-muted { margin-bottom: 10px; } @@ -34,7 +34,7 @@ } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .input-group > div { &:last-child { margin-bottom: 0; @@ -46,7 +46,8 @@ } } - .input-group-addon { + .input-group-prepend, + .input-group-append { overflow: hidden; text-overflow: ellipsis; line-height: unset; @@ -82,7 +83,7 @@ border: 1px solid $border-color; padding: 10px 32px; - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { padding: 10px 20px; } } @@ -134,7 +135,7 @@ max-width: 400px; } - @media (max-width: $screen-xs-min) { + @include media-breakpoint-down(xs) { padding-left: 20px; } } @@ -144,7 +145,7 @@ padding-top: 24px; padding-bottom: 24px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { border-bottom: 1px solid $border-color; } @@ -230,11 +231,11 @@ } .notification-dropdown .dropdown-menu { - @extend .dropdown-menu-align-right; + @extend .dropdown-menu-right; } .download-button { - @media (max-width: $screen-md-max) { + @include media-breakpoint-down(md) { margin-left: 0; } } @@ -444,11 +445,11 @@ height: 200px; width: calc((100% / 2) - #{$gl-padding * 2}); - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { width: calc((100% / 4) - #{$gl-padding * 2}); } - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { width: calc((100% / 5) - #{$gl-padding * 2}); } @@ -537,11 +538,12 @@ .template-input-group { position: relative; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; } - .input-group-addon { + .input-group-prepend, + .input-group-append { flex: 1; text-align: left; padding-left: ($gl-padding * 3); @@ -601,12 +603,12 @@ margin: 0 auto 4px; font-size: 24px; - @media (min-width: $screen-xs-max) { + @media (min-width: map-get($grid-breakpoints, sm)-1) { top: 0; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .btn-template-icon { display: inline-block; height: 14px; @@ -625,31 +627,31 @@ .create-project-options { display: flex; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { display: block; } .first-column { - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { max-width: 50%; padding-right: 30px; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 100%; width: 100%; } } .second-column { - @media (min-width: $screen-xs-min) { + @include media-breakpoint-up(xs) { width: 50%; flex: 1; padding-left: 30px; position: relative; } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { max-width: 100%; width: 100%; padding-left: 0; @@ -657,7 +659,7 @@ } // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-top: 30px; } @@ -677,7 +679,7 @@ line-height: 20px; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { left: 50%; top: 0; transform: translateX(-50%); @@ -697,7 +699,7 @@ top: 0; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { top: 10px; left: 10px; right: 10px; @@ -735,7 +737,7 @@ vertical-align: top; margin-top: 0; - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { float: right; } } @@ -866,13 +868,14 @@ pre.light-well { } } -.panel .projects-list li { +.card .projects-list li { padding: 10px 15px; margin: 0; } .git-clone-holder { width: 380px; + height: 28px; .btn-clipboard { border: 1px solid $border-color; @@ -888,11 +891,11 @@ pre.light-well { .form-control { @extend .monospace; - background: $white-light; + background-color: $white-light; + border-color: $border-color; font-size: 14px; margin-left: -1px; cursor: auto; - width: 101%; } } @@ -921,7 +924,8 @@ pre.light-well { } .project-tip-command { - > .input-group-btn:first-child { + > .input-group-prepend:first-child, + > .input-group-append:first-child { width: auto; } } @@ -972,7 +976,7 @@ pre.light-well { .dropdown-menu-projects { width: 300px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 500px; } @@ -986,7 +990,7 @@ pre.light-well { .inline-input-group { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 300px; } } @@ -997,8 +1001,8 @@ pre.light-well { text-align: center; margin-top: -20px; - @media (min-width: $screen-sm-min) { - margin-top: 0; + @include media-breakpoint-up(sm) { + margin: 0 $gl-padding-8; width: auto; } } @@ -1036,7 +1040,7 @@ pre.light-well { } &.form-group { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-bottom: 0; } } @@ -1064,12 +1068,12 @@ pre.light-well { .project-feature { padding-top: 10px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 45px; } &.nested { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-left: 90px; } } diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 35985d3c8f3..17d7087bd85 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -854,7 +854,7 @@ } } - .help-block { + .form-text.text-muted { margin-top: 0; line-height: 0; } diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss index 5fb97b13470..2734faec558 100644 --- a/app/assets/stylesheets/pages/runners.scss +++ b/app/assets/stylesheets/pages/runners.scss @@ -51,7 +51,7 @@ } } -@media (max-width: $screen-md-max) { +@include media-breakpoint-down(md) { .runners-content { width: 100%; overflow: auto; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index dbde0720993..a35c4ff7c80 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -47,6 +47,7 @@ input[type="checkbox"]:hover { } .location-badge { + white-space: nowrap; height: 32px; font-size: 12px; margin: -4px 4px -4px -4px; @@ -166,7 +167,7 @@ input[type="checkbox"]:hover { } .search-holder { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: -webkit-flex; display: flex; } @@ -178,7 +179,7 @@ input[type="checkbox"]:hover { position: relative; margin-right: 0; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-right: 5px; } } @@ -202,7 +203,7 @@ input[type="checkbox"]:hover { width: 100%; margin-top: 5px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: auto; margin-top: 0; margin-left: 5px; @@ -210,7 +211,7 @@ input[type="checkbox"]:hover { } .dropdown { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-left: 5px; margin-right: 5px; } @@ -220,7 +221,7 @@ input[type="checkbox"]:hover { width: 100%; margin-top: 5px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 180px; margin-top: 0; } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index c410049bc0b..2b3773eebad 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -70,7 +70,7 @@ animation: none; } - @media(max-width: $screen-sm-max) { + @media(max-width: map-get($grid-breakpoints, md)-1) { padding-right: 20px; } @@ -98,8 +98,8 @@ } .bs-callout, - .checkbox:first-child, - .help-block { + .form-check:first-child, + .form-text.text-muted { margin-top: 0; } @@ -131,12 +131,12 @@ color: $gl-danger; } -.service-settings .control-label { +.service-settings .form-control-label { padding-top: 0; } .integration-settings-form { - .well { + .card.card-body { padding: $gl-padding / 2; box-shadow: none; } @@ -158,7 +158,7 @@ } .visibility-level-setting { - .radio { + .form-check { margin-bottom: 10px; i.fa { @@ -174,7 +174,7 @@ .option-description, .option-disabled-reason { - margin-left: 29px; + margin-left: 45px; color: $project-option-descr-color; } @@ -199,22 +199,22 @@ } .prometheus-metrics-monitoring { - .panel { - .panel-toggle { + .card { + .card-toggle { width: 14px; } - .badge { + .badge.badge-pill { font-size: 12px; line-height: 12px; } - .panel-heading .badge-count { + .card-header .label-count { color: $white-light; background: $common-gray-dark; } - .panel-body { + .card-body { padding: 0; } @@ -249,7 +249,7 @@ li { padding: $gl-padding; - .badge { + .badge.badge-pill { margin-left: 5px; background: $badge-bg; } diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss index 8e2c42c1bd3..3f6f5f06075 100644 --- a/app/assets/stylesheets/pages/stat_graph.scss +++ b/app/assets/stylesheets/pages/stat_graph.scss @@ -14,7 +14,10 @@ } #contributors-master { - @include make-md-column(12); + @include media-breakpoint-up(md) { + @include make-col-ready(); + @include make-col(12); + } svg { width: 100%; @@ -33,10 +36,14 @@ } .person { - @include make-md-column(6); + @include media-breakpoint-up(md) { + @include make-col-ready(); + @include make-col(6); + } + margin-top: 10px; - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { width: 100%; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index ade5ddd147b..620297e589d 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -58,7 +58,7 @@ } } -.visible-xs-inline { +.d-block.d-sm-none-inline { .ci-status-link { position: relative; top: 2px; diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 4b9824fab0c..e5d7dd13915 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -126,7 +126,7 @@ color: $gl-grayish-blue; font-size: $gl-font-size; - .label { + .badge.badge-pill { color: $gl-text-color; } @@ -162,7 +162,7 @@ } } -@media (max-width: $screen-sm-max) { +@include media-breakpoint-down(sm) { .todos-filters { .dropdown-menu-toggle { width: 130px; @@ -174,7 +174,7 @@ } } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(xs) { .todo { .avatar { display: none; @@ -214,7 +214,7 @@ margin-left: auto; margin-right: auto; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { -webkit-flex-direction: row; flex-direction: row; padding-top: 80px; @@ -233,7 +233,7 @@ margin-left: auto; margin-right: auto; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 300px; margin-right: 0; -webkit-order: 2; @@ -244,7 +244,7 @@ .todos-all-done { padding-top: 20px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { padding-top: 50px; } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index e0ee7e9aa3d..efd26cb1f81 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -7,7 +7,7 @@ color: $gl-text-color-secondary; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { display: flex; .tree-ref-container { @@ -41,15 +41,10 @@ position: relative; } } - - .add-to-tree-dropdown { - position: absolute; - left: 18px; - } } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { .repo-breadcrumb { margin-top: 10px; position: relative; @@ -121,7 +116,7 @@ margin-left: 5px; } - @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include media-breakpoint-only(md) { @include str-truncated(450px); } diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index e70a57c2a67..800f5c68e39 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -65,7 +65,7 @@ display: block; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { &.has-sidebar-toggle { padding-right: 40px; } @@ -81,7 +81,7 @@ } } - @media (min-width: $screen-md-min) { + @include media-breakpoint-up(md) { &.has-sidebar-toggle { padding-right: 0; } |