diff options
Diffstat (limited to 'app/assets/stylesheets/pages/projects.scss')
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 188 |
1 files changed, 105 insertions, 83 deletions
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 584b0579b72..aa83e5bdebc 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; } @@ -205,7 +206,6 @@ .project-repo-buttons, .group-buttons { .btn { - @include btn-gray; padding: 3px 10px; &:last-child { @@ -231,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; } } @@ -294,7 +294,7 @@ } .count { - @include btn-gray; + @include btn-white; display: inline-block; background: $white-light; border-radius: 2px; @@ -354,30 +354,42 @@ min-width: 200px; } -.deploy-key-content { - @media (min-width: $screen-sm-min) { - float: left; +.deploy-key { + // Ensure that the fingerprint does not overflow on small screens + .fingerprint { + word-break: break-all; + white-space: normal; + } - &:last-child { - float: right; + .deploy-project-label, + .key-created-at { + svg { + vertical-align: text-top; } } -} -.deploy-key-projects { - @media (min-width: $screen-sm-min) { - line-height: 42px; + .btn svg { + vertical-align: top; + } + + .key-created-at { + line-height: unset; } } -a.deploy-project-label { - padding: 5px; - margin-right: 5px; - color: $gl-text-color; - background-color: $row-hover; +.deploy-project-list { + margin-bottom: -$gl-padding-4; - &:hover { - color: $gl-link-color; + a.deploy-project-label { + margin-right: $gl-padding-4; + margin-bottom: $gl-padding-4; + color: $gl-text-color-secondary; + background-color: $theme-gray-100; + line-height: $gl-btn-line-height; + + &:hover { + color: $gl-link-color; + } } } @@ -427,11 +439,11 @@ a.deploy-project-label { 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}); } @@ -485,6 +497,12 @@ a.deploy-project-label { &:not(:first-child) { border-top: 1px solid $border-color; } + + .btn-template-icon { + position: absolute; + left: $gl-padding; + top: $gl-padding; + } } .template-title { @@ -502,12 +520,6 @@ a.deploy-project-label { } } - svg { - position: absolute; - left: $gl-padding; - top: $gl-padding; - } - .project-fields-form { display: none; @@ -518,33 +530,23 @@ a.deploy-project-label { } .template-input-group { - position: relative; - - @media (min-width: $screen-sm-min) { - display: flex; - } - - .input-group-addon { + .input-group-prepend { flex: 1; - text-align: left; - padding-left: ($gl-padding * 3); - background-color: $white-light; } - .selected-template { - line-height: 20px; + .input-group-text { + width: 100%; + background-color: $white-light; } .selected-icon { + padding-right: $gl-padding; + svg { display: none; top: 7px; height: 20px; width: 20px; - - &.active { - display: block; - } } } } @@ -584,12 +586,12 @@ a.deploy-project-label { 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; @@ -608,31 +610,31 @@ a.deploy-project-label { .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; @@ -640,7 +642,7 @@ a.deploy-project-label { } // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { padding-top: 30px; } @@ -660,7 +662,7 @@ a.deploy-project-label { line-height: 20px; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { left: 50%; top: 0; transform: translateX(-50%); @@ -680,7 +682,7 @@ a.deploy-project-label { top: 0; // Mobile - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(xs) { top: 10px; left: 10px; right: 10px; @@ -718,7 +720,7 @@ a.deploy-project-label { vertical-align: top; margin-top: 0; - @media (min-width: $screen-lg-min) { + @include media-breakpoint-up(lg) { float: right; } } @@ -849,17 +851,11 @@ pre.light-well { } } -.panel .projects-list li { +.card .projects-list li { padding: 10px 15px; margin: 0; } -.commits-search-form { - .input-short { - min-width: 200px; - } -} - .git-clone-holder { width: 380px; @@ -877,11 +873,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%; } } @@ -910,7 +906,8 @@ pre.light-well { } .project-tip-command { - > .input-group-btn:first-child { + > .input-group-prepend:first-child, + > .input-group-append:first-child { width: auto; } } @@ -935,11 +932,6 @@ pre.light-well { } } - .dropdown-menu-toggle { - width: 100%; - max-width: 300px; - } - .flash-container { padding: 0; } @@ -966,7 +958,7 @@ pre.light-well { .dropdown-menu-projects { width: 300px; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 500px; } @@ -980,7 +972,7 @@ pre.light-well { .inline-input-group { width: 100%; - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { width: 300px; } } @@ -991,8 +983,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; } } @@ -1030,7 +1022,7 @@ pre.light-well { } &.form-group { - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { margin-bottom: 0; } } @@ -1058,12 +1050,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; } } @@ -1121,3 +1113,33 @@ pre.light-well { padding-top: $gl-padding; padding-bottom: 37px; } + +.project-ci-body { + .incorrect-syntax { + font-size: 18px; + color: $lint-incorrect-color; + } + + .correct-syntax { + font-size: 18px; + color: $lint-correct-color; + } +} + +.project-ci-linter { + .ci-editor { + height: 400px; + } + + .ci-template pre { + white-space: pre-wrap; + } +} + +.project-badge { + opacity: 0.9; + + &:hover { + opacity: 1; + } +} |