diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
32 files changed, 3627 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss new file mode 100644 index 00000000000..36e582d4854 --- /dev/null +++ b/app/assets/stylesheets/framework/avatar.scss @@ -0,0 +1,49 @@ +.avatar { + float: left; + margin-right: 12px; + width: 40px; + height: 40px; + padding: 0; + @include border-radius($avatar_radius); + + &.avatar-inline { + float: none; + margin-left: 4px; + margin-bottom: 2px; + + &.s16 { margin-right: 4px; } + &.s24 { margin-right: 4px; } + } + + &.group-avatar, &.project-avatar, &.avatar-tile { + @include border-radius(0px); + } + + &.s16 { width: 16px; height: 16px; margin-right: 6px; } + &.s24 { width: 24px; height: 24px; margin-right: 8px; } + &.s26 { width: 26px; height: 26px; margin-right: 8px; } + &.s32 { width: 32px; height: 32px; margin-right: 10px; } + &.s36 { width: 36px; height: 36px; margin-right: 10px; } + &.s46 { width: 46px; height: 46px; margin-right: 15px; } + &.s48 { width: 48px; height: 48px; margin-right: 10px; } + &.s60 { width: 60px; height: 60px; margin-right: 12px; } + &.s90 { width: 90px; height: 90px; margin-right: 15px; } + &.s110 { width: 110px; height: 110px; margin-right: 15px; } + &.s140 { width: 140px; height: 140px; margin-right: 20px; } + &.s160 { width: 160px; height: 160px; margin-right: 20px; } +} + +.identicon { + text-align: center; + vertical-align: top; + + &.s16 { font-size: 12px; line-height: 1.33; } + &.s24 { font-size: 14px; line-height: 1.8; } + &.s26 { font-size: 20px; line-height: 1.33; } + &.s32 { font-size: 22px; line-height: 32px; } + &.s60 { font-size: 32px; line-height: 60px; } + &.s90 { font-size: 36px; line-height: 90px; } + &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; } + &.s140 { font-size: 72px; line-height: 140px; } + &.s160 { font-size: 96px; line-height: 160px; } +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss new file mode 100644 index 00000000000..6ce34b5c3e8 --- /dev/null +++ b/app/assets/stylesheets/framework/blocks.scss @@ -0,0 +1,62 @@ +.light-well { + background-color: #f8fafc; + padding: 15px; +} + +.centered-light-block { + text-align: center; + color: $gl-gray; + margin: 20px; +} + +.nothing-here-block { + text-align: center; + padding: 20px; + color: $gl-gray; + font-weight: normal; + font-size: 16px; + line-height: 36px; +} + +.gray-content-block { + margin: -$gl-padding; + background-color: $background-color; + padding: $gl-padding; + margin-bottom: 0px; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; + color: $gl-gray; + + &.top-block { + border-top: none; + } + + &.middle-block { + margin-top: 0; + margin-bottom: 0; + } + + &.clear-block { + margin-bottom: $gl-padding - 1px; + padding-bottom: $gl-padding; + } + + &.second-block { + margin-top: -1px; + margin-bottom: 0; + } + + &.footer-block { + margin-top: 0; + border-bottom: none; + margin-bottom: -$gl-padding; + } + + .title { + color: $gl-text-color; + } + + .oneline { + line-height: 42px; + } +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss new file mode 100644 index 00000000000..e5f0c0ad9ef --- /dev/null +++ b/app/assets/stylesheets/framework/buttons.scss @@ -0,0 +1,171 @@ +@mixin btn-default { + @include border-radius(2px); + border-width: 1px; + border-style: solid; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + line-height: 18px; + padding: 11px $gl-padding; + letter-spacing: .4px; + + &:focus, + &:active { + outline: none; + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + } +} + +@mixin btn-middle { + @include btn-default; + @include border-radius(2px); + padding: 11px 24px; +} + +@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { + background-color: $light; + border-color: $border-light; + color: $color; + + &:hover, + &:focus { + background-color: $normal; + border-color: $border-normal; + color: $color; + } + + &:active { + @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + + background-color: $dark; + border-color: $border-dark; + color: $color; + } +} + +@mixin btn-green { + @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF); +} + +@mixin btn-blue { + @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF); +} + +@mixin btn-orange { + @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF); +} + +@mixin btn-red { + @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF); +} + +@mixin btn-gray { + @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236); +} + +@mixin btn-white { + @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236); +} + +.btn { + @include btn-default; + @include btn-white; + + &.btn-sm { + padding: 5px 10px; + } + + &.btn-xs { + padding: 1px 5px; + } + + &.btn-success, + &.btn-new, + &.btn-create, + &.btn-save, + &.btn-green { + @include btn-green; + } + + &.btn-gray { + @include btn-gray; + } + + &.btn-primary, + &.btn-info { + @include btn-blue; + } + + &.btn-warning { + @include btn-orange; + } + + &.btn-danger, + &.btn-remove, + &.btn-red { + @include btn-red; + } + + &.btn-cancel { + float: right; + } + + &.btn-close { + color: $gl-danger; + border-color: $gl-danger; + &:hover { + color: #B94A48; + } + } + + &.btn-reopen { + color: $gl-success; + border-color: $gl-success; + &:hover { + color: #468847; + } + } + + &.btn-grouped { + margin-right: 7px; + float: left; + &:last-child { + margin-right: 0px; + } + } +} + +.btn-block { + width: 100%; + margin: 0; + margin-bottom: 15px; + &.btn { + padding: 6px 0; + } +} + +.btn-group { + &.btn-grouped { + margin-right: 7px; + float: left; + &:last-child { + margin-right: 0px; + } + } +} + +.btn-group-next { + .btn { + padding: 9px 0px; + font-size: 15px; + color: #7f8fa4; + border-color: #e7e9ed; + width: 140px; + + &.active { + border-color: $gl-info; + background: $gl-info; + color: #fff; + } + } +} diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss new file mode 100644 index 00000000000..a36fefe22c5 --- /dev/null +++ b/app/assets/stylesheets/framework/calendar.scss @@ -0,0 +1,90 @@ +.user-calendar-activities { + .calendar_onclick_hr { + padding: 0; + margin: 10px 0; + } + + .str-truncated { + max-width: 70%; + } + + .text-expander { + background: #eee; + color: #555; + padding: 0 5px; + cursor: pointer; + margin-left: 4px; + &:hover { + background-color: #ddd; + } + } +} +/** +* This overwrites the default values of the cal-heatmap gem +*/ +.calendar { + .qi { + background-color: #999; + fill: #fff; + } + + .q1 { + background-color: #dae289; + fill: #ededed; + } + + .q2 { + background-color: #cedb9c; + fill: #ACD5F2; + } + + .q3 { + background-color: #b5cf6b; + fill: #7FA8D1; + } + + .q4 { + background-color: #637939; + fill: #49729B; + } + + .q5 { + background-color: #3b6427; + fill: #254E77; + } + + .domain-background { + fill: none; + shape-rendering: crispedges; + } + + .ch-tooltip { + position: absolute; + display: none; + margin-top: 22px; + margin-left: 1px; + font-size: 13px; + padding: 3px; + font-weight: 550; + background-color: #222; + span { + position: absolute; + width: 200px; + text-align: center; + visibility: hidden; + border-radius: 10px; + &:after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -8px; + width: 0; + height: 0; + border-top: 8px solid #000000; + border-right: 8px solid transparent; + border-left: 8px solid transparent; + } + } + } +} diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss new file mode 100644 index 00000000000..f1699d21c9b --- /dev/null +++ b/app/assets/stylesheets/framework/callout.scss @@ -0,0 +1,45 @@ +/* + * Callouts from Bootstrap3 docs + * + * Not quite alerts, but custom and helpful notes for folks reading the docs. + * Requires a base and modifier class. + */ + +/* Common styles for all types */ +.bs-callout { + margin: 20px 0; + padding: 20px; + border-left: 3px solid #eee; + color: #666; + background: #f9f9f9; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} + +/* Variations */ +.bs-callout-danger { + background-color: #fdf7f7; + border-color: #eed3d7; + color: #b94a48; +} +.bs-callout-warning { + background-color: #faf8f0; + border-color: #faebcc; + color: #8a6d3b; +} +.bs-callout-info { + background-color: #f4f8fa; + border-color: #bce8f1; + color: #34789a; +} +.bs-callout-success { + background-color: #dff0d8; + border-color: #5cA64d; + color: #3c763d; +} + diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss new file mode 100644 index 00000000000..e1a1793be9c --- /dev/null +++ b/app/assets/stylesheets/framework/common.scss @@ -0,0 +1,400 @@ +/** COLORS **/ +.cgray { color: $gl-gray; } +.clgray { color: #BBB } +.cred { color: $gl-text-red; } +.cgreen { color: $gl-text-green; } +.cdark { color: #444 } + +/** COMMON CLASSES **/ +.prepend-top-10 { margin-top:10px } +.prepend-top-default { margin-top: $gl-padding; } +.prepend-top-20 { margin-top:20px } +.prepend-left-10 { margin-left:10px } +.prepend-left-20 { margin-left:20px } +.append-right-10 { margin-right:10px } +.append-right-20 { margin-right:20px } +.append-bottom-10 { margin-bottom:10px } +.append-bottom-15 { margin-bottom:15px } +.append-bottom-20 { margin-bottom:20px } +.inline { display: inline-block } +.center { text-align: center } + +.underlined-link { text-decoration: underline; } +.hint { font-style: italic; color: #999; } +.light { color: $gl-gray; } + +.slead { + color: $gl-gray; + font-size: 15px; + margin-bottom: 12px; + font-weight: normal; + line-height: 24px; +} + +.tab-content { + overflow: visible; +} + +pre { + &.clean { + background: none; + border: none; + margin: 0; + padding: 0; + } + + &.well-pre { + border: 1px solid #EEE; + background: #f9f9f9; + border-radius: 0; + color: #555; + } +} + +.dropdown-menu > li > a { + text-shadow: none; +} + +.dropdown-menu-align-right { + left: auto; + right: 0px; +} + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + background: $gl-primary; + color: #FFF +} + +.str-truncated { + @include str-truncated; +} + +/** FLASH message **/ +.author_link { + color: $gl-link-color; +} + +.back-link { + font-size: 14px; +} + +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} + +.loading { + margin: 20px auto; + height: 40px; + color: #555; + font-size: 32px; + text-align: center; +} + +span.update-author { + display: block; + color: #999; + font-weight: normal; + font-style: italic; + strong { + font-weight: bold; + font-style: normal; + } +} + +.user-mention { + color: #2FA0BB; + font-weight: bold; +} + +.field_with_errors { + display: inline; +} + +.line_holder { + &:hover { + td { + background: #FFFFCF !important; + } + } +} + +p.time { + color: #999; + font-size: 90%; + margin: 30px 3px 3px 2px; +} + +.highlight { + text-shadow: none; +} + +.thin_area{ + height: 150px; +} + +// Fixes alignment on notes. +.new_note { + label { + text-align: left; + } +} + +// Fix issue with notes & lists creating a bunch of bottom borders. +li.note { + img { max-width:100% } + .note-title { + li { + border-bottom:none !important; + } + } +} + +.markdown { + img { + max-width: 100%; + } +} + +.wiki_content code, .readme code{ + background-color: inherit; +} + +.project_member_show { + td:first-child { + color: #aaa; + } +} + +.rss-icon { + img { + width: 24px; + vertical-align: top; + } + + strong { + line-height: 24px; + } +} + +.show-suppressed-diff, +.show-all-commits { + cursor: pointer; +} + +.git_error_tips { + @extend .col-md-6; + text-align: left; + margin-top: 40px; + pre { + background: white; + border: none; + font-size: 12px; + } +} + +.error-message { + padding: 10px; + background: #C67; + margin: 0; + color: #FFF; + + a { + color: #fff; + text-decoration: underline; + } +} + +.browser-alert { + padding: 10px; + text-align: center; + background: #C67; + color: #fff; + font-weight: bold; + a { + color: #fff; + text-decoration: underline; + } +} + +.warning_message { + border-left: 4px solid #ed9; + color: #b90; + padding: 10px; + margin-bottom: 10px; + background: #ffffe6; + padding-left: 20px; + + &.centered { + text-align: center; + } +} + +.gitlab-promo { + a { + color: #aaa; + margin-right: 30px; + } +} + +.milestone { + &.milestone-closed { + background: #f9f9f9; + } + .progress { + margin-bottom: 0; + margin-top: 4px; + } +} + +.control-group { + .controls { + span { + &.descr { + position: relative; + top: 2px; + left: 5px; + color: #666; + } + } + } +} + +img.emoji { + height: 20px; + vertical-align: middle; + width: 20px; +} + +.chart { + overflow: hidden; + height: 220px; +} + +.description-block { + @extend .light-well; + @extend .light; + margin-bottom: 10px; +} + +table { + td.permission-x { + background: #D9EDF7 !important; + text-align: center; + } +} + +.dashboard-intro-icon { + float: left; + text-align: center; + font-size: 32px; + color: #AAA; + width: 60px; +} + +.dashboard-intro-text { + display: inline-block; + margin-left: -60px; + padding-left: 60px; + width: 100%; +} + +.btn-sign-in { + margin-top: 8px; + text-shadow: none; +} + +.side-filters { + fieldset { + margin-bottom: 15px; + } +} + +.wiki .highlight, .note-body .highlight { + margin: 12px 0 12px 0; +} + +.wiki .code { + overflow-x: auto; +} + +.footer-links { + margin-bottom: 20px; + a { + margin-right: 15px; + } +} + +.search_box { + @extend .well; + text-align: center; +} + +.task-status { + margin-left: 10px; +} + +#nprogress .spinner { + top: 15px !important; + right: 10px !important; +} + +.header-with-avatar { + h3 { + margin: 0; + font-weight: bold; + } + + .username { + font-size: 18px; + color: #666; + margin-top: 8px; + } + + .description { + font-size: $gl-font-size; + color: #666; + margin-top: 8px; + } +} + +.profiler-results { + top: 73px !important; + + .profiler-button, + .profiler-controls { + border-color: #EEE !important; + } +} + +.center-top-menu { + @include nav-menu; + text-align: center; + margin-top: 5px; + margin-bottom: $gl-padding; + height: 56px; + margin-top: -$gl-padding; + padding-top: $gl-padding; + + &.no-bottom { + margin-bottom: 0; + } + + &.no-top { + margin-top: 0; + } +} + +.dropzone .dz-preview .dz-progress { + border-color: $border-color !important; +} + +.dropzone .dz-preview .dz-progress .dz-upload { + background: $gl-success !important; +} + +.space-right { + margin-right: 10px; +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss new file mode 100644 index 00000000000..9dd77747884 --- /dev/null +++ b/app/assets/stylesheets/framework/files.scss @@ -0,0 +1,171 @@ +/** + * File content holder + * + */ +.file-holder { + margin-left: -$gl-padding; + margin-right: -$gl-padding; + border: none; + border-top: 1px solid #E7E9EE; + border-bottom: 1px solid #E7E9EE; + margin-bottom: 1em; + + table { + @extend .table; + } + + .file-title { + position: relative; + background: $background-color; + border-bottom: 1px solid $border-color; + text-shadow: 0 1px 1px #fff; + margin: 0; + text-align: left; + padding: 10px 15px; + + .file-actions { + float: right; + position: absolute; + top: 5px; + right: 15px; + + .btn { + padding: 0px 10px; + font-size: 13px; + line-height: 28px; + } + } + + .left-options { + margin-top: -3px; + } + } + .file-content { + background: #fff; + + &.image_file { + background: #eee; + text-align: center; + img { + padding: 100px; + max-width: 50%; + } + } + + &.wiki { + padding: $gl-padding; + + .highlight { + margin-bottom: 9px; + + > pre { + margin: 0; + } + } + } + + &.blob_file { + + } + + &.blob-no-preview { + background: #eee; + text-shadow: 0 1px 2px #FFF; + padding: 100px 0; + } + + /** + * Blame file + */ + &.blame { + table { + border: none; + box-shadow: none; + margin: 0; + } + tr { + border-bottom: 1px solid #eee; + } + td { + &:first-child { + border-left: none; + } + &:last-child { + border-right: none; + } + background: #fff; + padding: 10px $gl-padding; + } + .lines { + pre { + padding: 0; + margin: 0; + background: none; + border: none; + } + } + img.avatar { + border: 0 none; + float: none; + margin: 0; + padding: 0; + } + td.blame-commit { + background: #f9f9f9; + min-width: 350px; + + .commit-author-link { + color: #888; + } + } + td.blame-numbers { + pre { + color: #AAA; + white-space: pre; + } + background: #f1f1f1; + border-left: 1px solid #DDD; + } + td.lines { + code { + font-family: $monospace_font; + } + } + } + + &.logs { + background: #eee; + max-height: 700px; + overflow-y: auto; + + ol { + margin-left: 40px; + padding: 10px 0; + border-left: 1px solid $border-color; + margin-bottom: 0; + background: white; + li { + color: #888; + p { + margin: 0; + color: #333; + line-height: 24px; + padding-left: 10px; + } + + &:hover { + background: $hover; + } + } + } + } + + /** + * Code file + */ + &.code { + padding: 0; + } + } +} + diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss new file mode 100644 index 00000000000..8e6922c9231 --- /dev/null +++ b/app/assets/stylesheets/framework/filters.scss @@ -0,0 +1,30 @@ +.filter-item { + margin-right: 15px; +} + +@media (min-width: 800px) { + .issues-filters, + .issues_bulk_update { + select, .select2-container { + width: 120px !important; + display: inline-block; + } + } +} + +@media (min-width: 1200px) { + .issues-filters, + .issues_bulk_update { + select, .select2-container { + width: 150px !important; + display: inline-block; + } + } +} + +.issues-filters, +.issues_bulk_update { + .select2-container .select2-choice { + color: #444 !important; + } +} diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss new file mode 100644 index 00000000000..82eb50ad4be --- /dev/null +++ b/app/assets/stylesheets/framework/flash.scss @@ -0,0 +1,17 @@ +.flash-container { + cursor: pointer; + margin: 0; + font-size: 14px; + width: 100%; + z-index: 100; + + .flash-notice { + @extend .alert; + @extend .alert-info; + } + + .flash-alert { + @extend .alert; + @extend .alert-danger; + } +} diff --git a/app/assets/stylesheets/framework/fonts.scss b/app/assets/stylesheets/framework/fonts.scss new file mode 100644 index 00000000000..e214567eca1 --- /dev/null +++ b/app/assets/stylesheets/framework/fonts.scss @@ -0,0 +1,25 @@ +/* latin-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), font-url('SourceSansPro-Light.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro'), local('SourceSansPro-Regular'), font-url('SourceSansPro-Regular.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), font-url('SourceSansPro-Semibold.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), font-url('SourceSansPro-Bold.ttf'); +} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss new file mode 100644 index 00000000000..0edfe24f195 --- /dev/null +++ b/app/assets/stylesheets/framework/forms.scss @@ -0,0 +1,94 @@ +textarea { + resize: vertical; +} + +input[type='search'].search-text-input { + background-image: image-url("icon-search.png"); + background-repeat: no-repeat; + background-position: 10px; + padding-left: 25px; +} + +input[type='text'].danger { + background: #F2DEDE!important; + border-color: #D66; + text-shadow: 0 1px 1px #fff +} + +.datetime-controls { + select { + width: 100px; + } +} + +.form-actions { + padding: 17px 20px 18px; + margin-top: 18px; + margin-bottom: 18px; + background-color: $background-color; + border-top: 1px solid $border-color; +} + +label { + &.control-label { + @extend .col-sm-2; + } + + &.inline-label { + margin: 0; + } +} + +.inline-input-group { + width: 250px; +} + +.custom-form-control { + width: 150px; +} + +@media (min-width: $screen-sm-min) { + .custom-form-control { + width: 150px; + } +} + +/* Medium devices (desktops, 992px and up) */ +@media (min-width: $screen-md-min) { + .custom-form-control { + width: 170px; + } +} + +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: $screen-lg-min) { + .custom-form-control { + width: 200px; + } +} + +.fieldset-form fieldset { + margin-bottom: 20px; +} + +.form-control { + @include box-shadow(none); +} + +.wiki-content { + margin-top: 35px; +} + +.form-group .control-label { + font-weight: normal; +} + +.form-control::-webkit-input-placeholder { + color: #7f8fa4; +} + +.input-group { + .input-group-addon { + background-color: #f7f8fa; + } +} diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss new file mode 100644 index 00000000000..5ae0520fd7b --- /dev/null +++ b/app/assets/stylesheets/framework/gfm.scss @@ -0,0 +1,26 @@ +/** + * Styles that apply to all GFM related forms. + */ +.issue-form, .merge-request-form, .wiki-form { + .description { + height: 16em; + border-top-left-radius: 0; + } +} + +.wiki-form { + .description { + height: 26em; + } +} + +.milestone-form { + .description { + height: 14em; + } +} + +.gfm-commit, .gfm-commit_range { + font-family: $monospace_font; + font-size: 90%; +} diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss new file mode 100644 index 00000000000..8d9a0aae568 --- /dev/null +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -0,0 +1,120 @@ +/** + * Styles the GitLab application with a specific color theme + * + * $color-light - + * $color - + * $color-darker - + * $color-dark - + */ +@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { + .page-with-sidebar { + .header-logo { + background-color: $color; + border-color: $color; + + a { + color: $color-light; + + h3 { + color: $color-light; + } + } + + &:hover { + background-color: $color-darker; + a { + color: #FFF; + } + } + } + + .collapse-nav a { + color: #FFF; + background: $color; + } + + .sidebar-wrapper { + background: $color-darker; + + .sidebar-user { + background: $color-darker; + color: $color-light; + + &:hover { + background-color: $color-dark; + color: #FFF; + text-decoration: none; + } + } + } + + .nav-sidebar li { + a { + color: $color-light; + + &:hover, &:focus, &:active { + background: $color-dark; + } + + i { + color: $color-light; + } + + .count { + color: $color-light; + background: $color-dark; + } + } + + &.separate-item { + border-top: 1px solid $color; + } + + &.active a { + color: #FFF; + background: $color-dark; + + &.no-highlight { + border: none; + } + + i { + color: #FFF + } + } + } + } +} + +$theme-blue: #2980B9; +$theme-charcoal: #333c47; +$theme-graphite: #888888; +$theme-gray: #373737; +$theme-green: #019875; +$theme-violet: #554488; + +body { + &.ui_blue { + @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099); + } + + &.ui_charcoal { + @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D); + } + + &.ui_graphite { + @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666); + } + + &.ui_gray { + @include gitlab-theme(#979797, $theme-gray, #272727, #222222); + } + + &.ui_green { + @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855); + } + + &.ui_violet { + @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255); + } +} diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss new file mode 100644 index 00000000000..91e6975e269 --- /dev/null +++ b/app/assets/stylesheets/framework/header.scss @@ -0,0 +1,169 @@ +/* + * Application Header + * + */ +header { + transition-duration: .3s; + + &.navbar-empty { + background: #FFF; + border-bottom: 1px solid #EEE; + + .center-logo { + margin: 8px 0; + text-align: center; + + img { + height: 32px; + } + } + } + + &.navbar-gitlab { + padding: 0 20px; + z-index: 100; + margin-bottom: 0; + min-height: $header-height; + background-color: #fff; + border: none; + + .container-fluid { + width: 100% !important; + filter: none; + padding: 0; + + .nav > li > a { + color: #7f8fa4; + font-size: 18px; + padding: 0; + margin: ($header-height - 28) / 2 0; + margin-left: 10px; + height: 28px; + width: 28px; + line-height: 28px; + text-align: center; + + &:hover, &:focus, &:active { + background-color: #FFF; + } + } + + .navbar-toggle { + color: #666; + margin: 6px 0; + border-radius: 0; + position: absolute; + right: 2px; + + &:hover { + background-color: #EEE; + } + &.active { + color: #7f8fa4; + } + } + } + } + + .header-content { + height: $header-height; + + .title { + margin: 0; + overflow: hidden; + font-size: 19px; + line-height: $header-height; + font-weight: normal; + color: #4c4e54; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + + a { + color: #4c4e54; + &:hover { + text-decoration: underline; + } + } + } + + .navbar-collapse { + float: right; + border-top: none; + } + } + + .search { + margin-right: 10px; + margin-left: 10px; + margin-top: ($header-height - 36) / 2; + + form { + margin: 0; + padding: 0; + } + + .search-input { + width: 220px; + background-image: image-url("icon-search.png"); + background-repeat: no-repeat; + background-position: 195px; + @include input-big; + + &:focus { + @include box-shadow(none); + outline: none; + border-color: #DDD; + background-color: #FFF; + } + } + } +} + +@mixin collapsed-header { + margin-left: $sidebar_collapsed_width; +} + +@media (max-width: $screen-md-max) { + .header-collapsed, .header-expanded { + @include collapsed-header; + } +} + +@media(min-width: $screen-md-max) { + .header-collapsed { + @include collapsed-header; + } + + .header-expanded { + margin-left: $sidebar_width; + } +} + +@media (max-width: $screen-xs-max) { + header .container-fluid { + font-size: 18px; + + .navbar-nav { + margin: 0px; + float: none !important; + + .visible-xs, .visable-sm { + display: table-cell !important; + } + } + + .navbar-collapse { + padding-left: 5px; + + li { + display: table-cell; + width: 1%; + + a { + margin-left: 8px !important; + } + } + } + } +} diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss new file mode 100644 index 00000000000..2e13ee842e0 --- /dev/null +++ b/app/assets/stylesheets/framework/highlight.scss @@ -0,0 +1,70 @@ +.file-content.code { + border: none; + box-shadow: none; + margin: 0px; + padding: 0px; + table-layout: fixed; + + pre { + padding: 10px; + border: none; + border-radius: 0; + font-family: $monospace_font; + font-size: $code_font_size !important; + line-height: $code_line_height !important; + margin: 0; + overflow: auto; + overflow-y: hidden; + white-space: pre; + word-wrap: normal; + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 0; + + .line { + display: inline; + } + } + } + + .line-numbers { + padding: 10px; + text-align: right; + float: left; + + a { + font-family: $monospace_font; + display: block; + font-size: $code_font_size !important; + line-height: $code_line_height !important; + white-space: nowrap; + + i { + visibility: hidden; + @extend .pull-left; + } + + &:hover i { + visibility: visible; + } + } + } +} + +.note-text .code { + border: none; + box-shadow: none; + background: $background-color; + padding: 1em; + overflow-x: auto; + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 0; + } +} diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss new file mode 100644 index 00000000000..93377e45e70 --- /dev/null +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -0,0 +1,35 @@ +/** + * Issue box for showing Open/Closed state: + * Used for Issue#show page, MergeRequest#show page etc + * + */ + +.issue-box { + @include border-radius(2px); + + display: inline-block; + padding: 10px $gl-padding; + font-weight: normal; + margin-right: 10px; + font-size: $gl-font-size; + + &.issue-box-closed { + background-color: $gl-danger; + color: #FFF; + } + + &.issue-box-merged { + background-color: $gl-primary; + color: #FFF; + } + + &.issue-box-open { + background-color: #019875; + color: #FFF; + } + + &.issue-box-expired { + background: #cea61b; + color: #FFF; + } +} diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss new file mode 100644 index 00000000000..871b808bad4 --- /dev/null +++ b/app/assets/stylesheets/framework/jquery.scss @@ -0,0 +1,55 @@ +.ui-widget { + font-family: $regular_font; + font-size: $font-size-base; + + &.ui-datepicker-inline { + border: 1px solid #DDD; + padding: 10px; + width: 270px; + + .ui-datepicker-header { + background: #FFF; + border-color: #DDD; + } + + .ui-datepicker-calendar td a { + padding: 5px; + text-align: center; + } + } + + &.ui-autocomplete { + border-color: #DDD; + padding: 0; + margin-top: 2px; + z-index: 1001; + + .ui-menu-item a { + padding: 4px 10px; + } + } + + .ui-state-default { + border: 1px solid #FFF; + background: #FFF; + color: #777; + } + + .ui-state-highlight { + border: 1px solid #EEE; + background: #EEE; + } + + .ui-state-active { + border: 1px solid $gl-primary; + background: $gl-primary; + color: #FFF; + } + + .ui-state-hover, + .ui-state-focus { + border: 1px solid $hover; + background: $hover; + color: #333; + } +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss new file mode 100644 index 00000000000..c7b3b60e769 --- /dev/null +++ b/app/assets/stylesheets/framework/layout.scss @@ -0,0 +1,27 @@ +html { + overflow-y: scroll; + + &.touch .tooltip { display: none !important; } + + body { + padding-top: $header-height; + text-rendering: geometricPrecision; + } +} + +.container { + padding-top: 0; + z-index: 5; +} + +.container .content { + margin: 0 0; +} + +.navless-container { + margin-top: 30px; +} + +.container-limited { + max-width: $fixed-layout-width; +} diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss new file mode 100644 index 00000000000..c5764c36597 --- /dev/null +++ b/app/assets/stylesheets/framework/lists.scss @@ -0,0 +1,129 @@ +/** + * Well styled list + * + */ +.well-list { + margin: 0; + padding: 0; + list-style: none; + + li { + padding: 10px 15px; + min-height: 20px; + border-bottom: 1px solid #eee; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + + &:after { + content: " "; + display: table; + clear: both; + } + + &.disabled { + color: #888; + } + + &.unstyled { + &:hover { + background: none; + } + } + + &.warning-row { + background-color: #fcf8e3; + border-color: #faebcc; + color: #8a6d3b; + } + + &.smoke { background-color: $background-color; } + + &:hover { + background: $hover; + } + + &:last-child { + border-bottom: none; + + &.bottom { + background: $background-color; + } + } + + .list-item-name { + float: left; + position: relative; + top: 3px; + } + + p { + padding-top: 1px; + margin: 0; + color: $gray-dark; + img { + position: relative; + top: 3px; + } + } + + .well-title { + font-size: $list-font-size; + line-height: 18px; + } + } +} + +ol, ul { + &.styled { + li { + padding: 2px; + } + } +} + +/** light list with border-bottom between li **/ +ul.bordered-list { + @include basic-list; + + &.top-list { + li:first-child { + padding-top: 0; + + h4, h5 { + margin-top: 0; + } + } + } +} + +li.task-list-item { + list-style-type: none; +} + +ul.content-list { + @include basic-list; + + margin: 0; + padding: 0; + + > li { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 4px; + float: right; + + .btn { + padding: 10px 14px; + } + } + } +} + diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss new file mode 100644 index 00000000000..ed0333d2336 --- /dev/null +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -0,0 +1,115 @@ +.div-dropzone-wrapper { + .div-dropzone { + position: relative; + padding: 0; + border: 0; + margin-bottom: 5px; + + .div-dropzone-focus { + border-color: #66afe9 !important; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important; + outline: 0 !important; + } + + .div-dropzone-hover { + position: absolute; + top: 50%; + left: 50%; + margin-top: -0.5em; + margin-left: -0.6em; + opacity: 0; + font-size: 50px; + transition: opacity 200ms ease-in-out; + pointer-events: none; + } + + .div-dropzone-spinner { + position: absolute; + top: 100%; + left: 100%; + margin-top: -1.1em; + margin-left: -1.1em; + opacity: 0; + font-size: 30px; + transition: opacity 200ms ease-in-out; + } + + .div-dropzone-icon { + display: block; + text-align: center; + font-size: inherit; + } + + .div-dropzone-progress { + position: absolute; + top: 7px; + left: -40px; + width: 35px; + font-size: 13px; + text-align: right; + } + + .dz-preview { + display: none; + } + } +} + +.div-dropzone-alert { + margin-top: 5px; + margin-bottom: 0; + transition: opacity 200ms ease-in-out; +} + +.md-area { + position: relative; +} + +.md-header { + ul { + float: left; + margin-bottom: 1px; + } +} + +.referenced-users { + padding: 10px 0; + color: #999; + margin-left: 10px; + margin-top: 1px; + margin-right: 130px; +} + +.md-preview-holder { + background: #FFF; + border: 1px solid #ddd; + min-height: 169px; + padding: 5px; + box-shadow: none; +} + +.new_note, +.edit_note, +.issuable-description, +.milestone-description, +.wiki-content, +.merge-request-form { + .nav-tabs { + margin-bottom: 0; + border: none; + + li a, + li.active a { + border: 1px solid #DDD; + } + } +} + +.markdown-area { + background: #FFF; + border: 1px solid #ddd; + min-height: 140px; + padding: 5px; + box-shadow: none; + width: 100%; +} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss new file mode 100644 index 00000000000..089e6958eeb --- /dev/null +++ b/app/assets/stylesheets/framework/mixins.scss @@ -0,0 +1,160 @@ +/** + * Generic mixins + */ + @mixin box-shadow($shadow) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + -ms-box-shadow: $shadow; + -o-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; +} + +@mixin border-radius-left($radius) { + @include border-radius($radius 0 0 $radius) +} + +@mixin border-radius-right($radius) { + @include border-radius(0 0 $radius $radius) +} + +@mixin linear-gradient($from, $to) { + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); + background-image: -webkit-linear-gradient($from, $to); + background-image: -moz-linear-gradient($from, $to); + background-image: -ms-linear-gradient($from, $to); + background-image: -o-linear-gradient($from, $to); +} + +@mixin transition($transition) { + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +/** + * Prefilled mixins + * Mixins with fixed values + */ + +@mixin shade { + @include box-shadow(0 0 3px #ddd); +} + +@mixin solid-shade { + @include box-shadow(0 0 0 3px #f1f1f1); +} + +@mixin str-truncated($max_width: 82%) { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + max-width: $max_width; +} + +/* + * Base mixin for lists in GitLab + */ +@mixin basic-list { + margin: 5px 0px; + padding: 0px; + list-style: none; + + > li { + padding: 10px 0; + border-bottom: 1px solid #EEE; + overflow: hidden; + display: block; + margin: 0px; + + &:last-child { + border-bottom: none; + } + + &.active { + background: #f9f9f9; + a { + font-weight: 600; + } + } + + &.hide { + display: none; + } + + &.light { + a { + color: $gl-gray; + } + } + } +} + +@mixin input-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; + color: #7f8fa4; + background-color: #fff; + border-color: #e7e9ed; +} + +@mixin btn-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; +} + +@mixin nav-menu { + padding: 0; + margin: 0; + list-style: none; + margin-top: 5px; + height: 56px; + + li { + display: inline-block; + + a { + padding: 14px; + font-size: 17px; + line-height: 28px; + color: #7f8fa4; + border-bottom: 2px solid transparent; + + &:hover, &:active, &:focus { + text-decoration: none; + } + } + + &.active a { + color: #4c4e54; + border-bottom: 2px solid #1cacfc; + } + + .badge { + font-weight: normal; + background-color: #fff; + background-color: #eee; + color: #78a; + } + } +} + +.fa-align { + top: 20px; + position: relative; +} diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss new file mode 100644 index 00000000000..cea47fba192 --- /dev/null +++ b/app/assets/stylesheets/framework/mobile.scss @@ -0,0 +1,147 @@ +/** Common mobile (screen XS, SM) styles **/ +@media (max-width: $screen-xs-max) { + .container .content { + margin-top: 20px; + } + + .container-fluid { + padding-left: 5px; + padding-right: 5px; + } + + .nav.nav-tabs > li > a { + padding: 10px; + font-size: 12px; + margin-right: 3px; + + .badge { + display: none; + } + } + + .referenced-users { + margin-right: 0; + } + + .issues-details-filters, + .dash-projects-filters, + .check-all-holder { + display: none; + } + + .rss-btn { + display: none !important; + } + + .project-home-links { + display: none; + } + + .project-avatar { + display: none; + } + + .project-home-panel { + padding-left: 0 !important; + + .project-avatar { + display: block; + } + + .project-home-desc { + font-size: 21px; + } + + .project-repo-buttons, + .git-clone-holder { + display: none; + } + } + + .project-stats { + display: none; + } + + .container .title { + padding-left: 15px !important; + } + + .issue-info, .merge-request-info { + display: none; + } + + .issue-details { + .creator, + .page-title .btn-close { + display: none; + } + } + + %ul.notes .note-role, .note-actions { + display: none; + } + + .center-top-menu { + height: 45px; + margin-bottom: 30px; + + li a { + font-size: 14px; + padding: 19px 10px; + } + } + + .activity-filter-block { + display: none; + } + + .projects-search-form { + .btn { + display: none; + } + } +} + +@media (max-width: $screen-sm-max) { + .page-with-sidebar .content-wrapper { + padding: 0; + padding-top: 1px; + } + + .issues-filters { + .milestone-filter, .labels-filter { + display: none; + } + } + + .page-title { + .note_created_ago, .new-issue-link { + display: none; + } + } + + .issue_edited_ago, .note_edited_ago { + display: none; + } + + aside { + display: none; + } + + .show-aside { + display: block !important; + } +} + +.show-aside { + display: none; + position: fixed; + right: 0px; + top: 30%; + padding: 5px 15px; + background: #EEE; + font-size: 20px; + color: #777; + z-index: 100; + @include box-shadow(0 1px 2px #DDD); +} diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss new file mode 100644 index 00000000000..6677f94dafd --- /dev/null +++ b/app/assets/stylesheets/framework/pagination.scss @@ -0,0 +1,34 @@ +.gl-pagination { + border-top: 1px solid $border-color; + background-color: $background-color; + margin: -$gl-padding; + margin-top: 0; + + .pagination { + padding: 0; + margin: 0; + display: block; + + li.first, + li.last, + li.next, + li.prev { + > a { + color: $link-color; + + &:hover { + color: #fff; + } + } + } + + li > a, + li > span { + border: none; + margin: 0; + @include border-radius(0 !important); + padding: 13px 19px; + border-right: 1px solid $border-color; + } + } +} diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss new file mode 100644 index 00000000000..cba621635b6 --- /dev/null +++ b/app/assets/stylesheets/framework/selects.scss @@ -0,0 +1,146 @@ +/** Select2 selectbox style override **/ +.select2-container, .select2-container.select2-drop-above { + .select2-choice { + background: #FFF; + border-color: #DDD; + height: 42px; + padding: 8px $gl-padding; + font-size: $gl-font-size; + line-height: 1.42857143; + + @include border-radius(2px); + + .select2-arrow { + background: #FFF; + border-left: none; + padding-top: 5px; + } + } +} + +.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{ + color: #7f8fa4; + border: 1px solid #e7e9ed; +} + +.select2-drop { + @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); + @include border-radius (0px); + + padding: 16px; + border: none !important; +} + +.select2-results .select2-result-label { + padding: 16px; +} + +.select2-drop{ + color: #7f8fa4; +} + +.select2-highlighted { + background: #3084bb !important; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: 600; + color: #313236; +} + + +.select2-container-multi .select2-choices { + @include border-radius(2px); + border-color: #CCC; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 8px 14px; + font-size: 13px; + line-height: 18px; + height: auto; +} + +.select2-drop-active { + border: 1px solid #BBB !important; + margin-top: 4px; + font-size: 13px; + + &.select2-drop-above { + margin-bottom: 8px; + } + + .select2-search input { + background: #fafafa; + border-color: #DDD; + } + + .select2-results { + max-height: 350px; + .select2-highlighted { + background: $gl-primary; + } + } +} + +.select2-container { + width: 100% !important; +} + +/** Branch/tag selector **/ +.project-refs-form .select2-container { + width: 160px !important; +} + +.ajax-users-dropdown, .ajax-project-users-dropdown { + .select2-search { + padding-top: 2px; + } +} + +.ajax-users-select { + width: 400px; + + &.input-large { + width: 210px; + } + + &.input-clamp { + max-width: 100%; + } +} + +.group-result { + .group-image { + float: left; + } + .group-name { + font-weight: bold; + } + .group-path { + color: #999; + } +} + +.user-result { + .user-image { + float: left; + } + .user-name { + } +} + +.namespace-result { + .namespace-kind { + color: #AAA; + font-weight: normal; + } + .namespace-path { + margin-left: 10px; + font-weight: bolder; + } +} + +.ajax-users-dropdown { + min-width: 250px !important; +} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss new file mode 100644 index 00000000000..c5ea3aca7ca --- /dev/null +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -0,0 +1,267 @@ +.page-with-sidebar { + .sidebar-wrapper { + position: fixed; + top: 0; + bottom: 0; + overflow-y: auto; + overflow-x: hidden; + left: 0; + height: 100%; + transition-duration: .3s; + } +} + +.sidebar-wrapper { + z-index: 99; + background: $background-color; + transition-duration: .3s; +} + +.content-wrapper { + min-height: 100vh; + width: 100%; + padding: 20px; + background: #EAEBEC; + + .container-fluid { + background: #FFF; + padding: $gl-padding; + min-height: 90vh; + + &.container-blank { + background: none; + padding: 0; + border: none; + } + } +} + +.nav-sidebar { + margin-top: 14 + $header-height; + margin-bottom: 100px; + transition-duration: .3s; + list-style: none; + overflow: hidden; + + &.navbar-collapse { + padding: 0px !important; + } + + li { + width: $sidebar_width; + + &.separate-item { + padding-top: 10px; + margin-top: 10px; + } + + a { + padding: 7px 15px; + font-size: $gl-font-size; + line-height: 24px; + color: $gray; + display: block; + text-decoration: none; + padding-left: 22px; + font-weight: normal; + + &:hover { + text-decoration: none; + } + + &:active, &:focus { + text-decoration: none; + } + + i { + width: 16px; + color: $gray-light; + margin-right: 13px; + } + + .count { + float: right; + background: #eee; + padding: 0px 8px; + @include border-radius(6px); + } + } + } +} + +.sidebar-subnav { + margin-left: 0px; + padding-left: 0px; + + li { + list-style: none; + } +} + +@mixin expanded-sidebar { + padding-left: $sidebar_width; + transition-duration: .3s; + + .sidebar-wrapper { + width: $sidebar_width; + + .nav-sidebar { + width: $sidebar_width; + } + + .nav-sidebar li a{ + width: 230px; + + &.back-link { + i { + visibility: hidden; + } + } + } + } +} + +@mixin folded-sidebar { + padding-left: 60px; + transition-duration: .3s; + + .sidebar-wrapper { + width: $sidebar_collapsed_width; + + .header-logo { + width: $sidebar_collapsed_width; + + a { + padding-left: 12px; + + .gitlab-text-container { + display: none; + } + } + } + + .nav-sidebar { + width: $sidebar_collapsed_width; + + li a { + span { + display: none; + } + } + } + + .collapse-nav a { + width: $sidebar_collapsed_width; + } + + .sidebar-user { + padding-left: 12px; + width: $sidebar_collapsed_width; + + .username { + display: none; + } + } + } +} + +.collapse-nav a { + width: $sidebar_width; + position: fixed; + bottom: 0; + left: 0; + font-size: 13px; + background: transparent; + height: 40px; + text-align: center; + line-height: 40px; + transition-duration: .3s; +} + +.collapse-nav a:hover { + text-decoration: none; + background: #f2f6f7; +} + +@media (max-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include folded-sidebar; + } + + .collapse-nav { + display: none; + } +} + +@media(min-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include expanded-sidebar; + } +} + +.sidebar-user { + padding: 9px 22px; + position: fixed; + bottom: 40px; + width: $sidebar_width; + overflow: hidden; + transition-duration: .3s; + + .username { + margin-left: 10px; + width: $sidebar_width - 2 * 10px; + font-size: 16px; + line-height: 34px; + } +} + +.sidebar-wrapper { + .header-logo { + border-bottom: 1px solid transparent; + float: left; + height: $header-height; + width: $sidebar_width; + overflow: hidden; + transition-duration: .3s; + + a { + float: left; + height: $header-height; + width: 100%; + padding: 10px 22px; + overflow: hidden; + + img { + width: 36px; + height: 36px; + float: left; + } + + .gitlab-text-container { + width: 230px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 14px; + font-size: 19px; + line-height: 41px; + font-weight: normal; + } + } + } + + &:hover { + background-color: #EEE; + } + } +} diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss new file mode 100644 index 00000000000..789b34020c1 --- /dev/null +++ b/app/assets/stylesheets/framework/tables.scss @@ -0,0 +1,36 @@ +table { + &.table { + .dropdown-menu a { + text-decoration: none; + } + + .success, + .warning, + .danger, + .info { + color: #fff; + + a:not(.btn) { + text-decoration: underline; + color: #fff; + } + } + + tr { + td, th { + padding: 8px 10px; + line-height: 20px; + vertical-align: middle; + } + th { + font-weight: normal; + font-size: 15px; + border-bottom: 1px solid $border-color !important; + } + td { + border-color: $table-border-color !important; + border-bottom: 1px solid; + } + } + } +} diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss new file mode 100644 index 00000000000..bf21d7fce76 --- /dev/null +++ b/app/assets/stylesheets/framework/timeline.scss @@ -0,0 +1,70 @@ +.timeline { + @include basic-list; + + margin: 0; + padding: 0; + + .timeline-entry { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + border-bottom: 1px solid #ECEEF1; + border-right: 1px solid #ECEEF1; + + &:last-child { + border-bottom: none; + } + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 10px; + float: right; + } + } + + .note-text { + p:last-child { + margin-bottom: 0; + } + } + + .system-note { + .note-text { + color: $gl-gray !important; + } + } + + .diff-file { + border: 1px solid $border-color; + border-bottom: none; + margin-left: 0; + margin-right: 0; + } +} + +@media (max-width: $screen-xs-max) { + .timeline { + &:before { + background: none; + } + .timeline-entry .timeline-entry-inner { + .timeline-icon { + display: none; + } + + .timeline-content { + margin-left: 0; + } + } + } +} + +.discussion .timeline-entry { + margin: 0; + border-right: none; +} diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss new file mode 100644 index 00000000000..99d028d1228 --- /dev/null +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -0,0 +1,251 @@ +/* + * Twitter bootstrap with GitLab customizations/additions + * + */ + +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset +@import "bootstrap/normalize"; +@import "bootstrap/print"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/list-group"; +@import "bootstrap/wells"; +@import "bootstrap/close"; +@import "bootstrap/panels"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Utility classes +.clearfix { + @include clearfix(); +} +.center-block { + @include center-block(); +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.hide { + display: none; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + @include text-hide(); +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.affix { + position: fixed; +} + +@import "bootstrap/responsive-utilities"; + +// Labels +.label { + padding: 2px 4px; + font-size: 13px; + font-style: normal; + font-weight: normal; + display: inline-block; + + &.label-gray { + background-color: #f8fafc; + color: $gl-gray; + text-shadow: none; + } + + &.label-inverse { + background-color: #333333; + } +} + +// Nav tabs +.nav.nav-tabs { + margin-bottom: 15px; + + li { + > a { + margin-right: 5px; + line-height: 20px; + border-color: #EEE; + color: #888; + border-bottom: 1px solid #ddd; + .badge { + background-color: #eee; + color: #888; + text-shadow: 0 1px 1px #fff; + } + i.fa { + line-height: 14px; + } + } + &.active { + > a { + border-color: #CCC; + border-bottom: 1px solid #fff; + color: #333; + font-weight: bold; + } + } + } +} + +.nav-tabs > li > a, +.nav-pills > li > a { + color: #666; +} + +.nav-pills > .active > a > span > .badge { + background-color: #fff; + color: $gl-primary; +} + + +/** + * fix to keep tooltips position in top navigation bar + * + */ +.navbar .nav > li { + position: relative; + white-space: nowrap; +} + +/** + * Add some extra stuff to panels + * + */ + +.container-blank .panel .panel-heading { + font-size: 17px; + line-height: 38px; +} + +.panel { + box-shadow: none; + + .panel-heading { + .panel-head-actions { + position: relative; + top: -5px; + float: right; + } + } + + .panel-body { + form { + margin: 0; + } + + .form-actions { + margin: -15px; + margin-top: 18px; + } + } + + .panel-footer { + .pagination { + margin: 0; + } + + .btn { + min-width: 124px; + } + } + + &.panel-small { + .panel-heading { + padding: 6px 15px; + font-size: 13px; + font-weight: normal; + a { + color: #777; + } + } + } +} + +.panel-succes .panel-heading, +.panel-info .panel-heading, +.panel-danger .panel-heading, +.panel-warning .panel-heading, +.panel-primary .panel-heading, +.alert { + a:not(.btn) { + @extend .alert-link; + color: #fff; + text-decoration: underline; + } +} + +.alert-help { + background-color: $background-color; + border: 1px solid $border-color; + color: $gl-gray; +} + +// Typography ================================================================= + +.text-primary, +.text-primary:hover { + color: $brand-primary; +} + +.text-success, +.text-success:hover { + color: $brand-success; +} + +.text-danger, +.text-danger:hover { + color: $brand-danger; +} + +.text-warning, +.text-warning:hover { + color: $brand-warning; +} + +.text-info, +.text-info:hover { + color: $brand-info; +} diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss new file mode 100644 index 00000000000..63868a34e2a --- /dev/null +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -0,0 +1,160 @@ +// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3): +// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +// $gray-base: #000 +// $gray-darker: lighten($gray-base, 13.5%) // #222 +// $gray-dark: lighten($gray-base, 20%) // #333 +// $gray: lighten($gray-base, 33.5%) // #555 +// $gray-light: lighten($gray-base, 46.7%) // #777 +// $gray-lighter: lighten($gray-base, 93.5%) // #eee + +$brand-primary: $gl-primary; +$brand-success: $gl-success; +$brand-info: $gl-info; +$brand-warning: $gl-warning; +$brand-danger: $gl-danger; + +$border-radius-base: 2px !default; +$border-radius-large: 2px !default; +$border-radius-small: 2px !default; + + +//== Scaffolding +// +$text-color: $gl-text-color; +$link-color: $gl-link-color; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: $regular_font; +$font-family-monospace: $monospace_font; +$font-size-base: $gl-font-size; + + +//== Components +// +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$padding-base-vertical: 9px; +$padding-base-horizontal: $gl-padding; +$component-active-color: #fff; +$component-active-bg: $brand-info; + +//== Forms +// +//## + +$input-color: $text-color; +$input-border: #e7e9ed; +$input-border-focus: #7F8FA4; +$legend-color: $text-color; + + +//== Pagination +// +//## + +$pagination-color: $gl-gray; +$pagination-bg: $background-color; +$pagination-border: transparent; + +$pagination-hover-color: #fff; +$pagination-hover-bg: $brand-info; +$pagination-hover-border: transparent; + +$pagination-active-color: #fff; +$pagination-active-bg: $brand-info; +$pagination-active-border: transparent; + +$pagination-disabled-color: #fff; +$pagination-disabled-bg: lighten($brand-info, 15%); +$pagination-disabled-border: transparent; + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +$state-success-text: #fff; +$state-success-bg: $brand-success; +$state-success-border: $brand-success; + +$state-info-text: #fff; +$state-info-bg: $brand-info; +$state-info-border: $brand-info; + +$state-warning-text: #fff; +$state-warning-bg: $brand-warning; +$state-warning-border: $brand-warning; + +$state-danger-text: #fff; +$state-danger-bg: $brand-danger; +$state-danger-border: $brand-danger; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +$alert-border-radius: 0; + + +//== Panels +// +//## + +$panel-border-radius: 2px; +$panel-default-text: $text-color; +$panel-default-border: $border-color; +$panel-default-heading-bg: $background-color; +$panel-footer-bg: $background-color; +$panel-inner-border: $border-color; + +//== Wells +// +//## + +$well-bg: #F9F9F9; +$well-border: #EEE; + +//== Code +// +//## + +$code-color: #c7254e; +$code-bg: #f9f2f4; + +$kbd-color: #fff; +$kbd-bg: #333; + +//== Buttons +// +//## +$btn-default-color: $gl-text-color; +$btn-default-bg: #fff; +$btn-default-border: #e7e9ed; + +//== Nav +// +//## +$nav-link-padding: 13px $gl-padding; + +//== Code +// +//## +$pre-bg: #f8fafc !default; +$pre-color: $gl-gray !default; +$pre-border-color: #e7e9ed; + +$table-bg-accent: $background-color; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss new file mode 100644 index 00000000000..bf36f96cc97 --- /dev/null +++ b/app/assets/stylesheets/framework/typography.scss @@ -0,0 +1,271 @@ +@mixin md-typography { + color: $md-text-color; + + a { + color: $md-link-color; + } + + img { + max-width: 100%; + } + + *:first-child { + margin-top: 0; + } + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 1px 2px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #555; + vertical-align: middle; + background-color: #FCFCFC; + border-width: 1px; + border-style: solid; + border-color: #CCC #CCC #BBB; + border-image: none; + border-radius: 3px; + box-shadow: 0px -1px 0px #BBB inset; + } + + h1 { + font-size: 1.3em; + font-weight: 600; + margin: 24px 0 12px 0; + padding: 0 0 10px 0; + border-bottom: 1px solid #e7e9ed; + color: #313236; + } + + h2 { + font-size: 1.2em; + font-weight: 600; + margin: 24px 0 12px 0; + color: #313236; + } + + h3 { + margin: 24px 0 12px 0; + font-size: 1.25em; + } + + h4 { + margin: 24px 0 12px 0; + font-size: 1.1em; + } + + h5 { + margin: 24px 0 12px 0; + font-size: 1em; + } + + h6 { + margin: 24px 0 12px 0; + font-size: 0.90em; + } + + blockquote { + padding: 8px 21px; + margin: 12px 0 12px; + border-left: 3px solid #e7e9ed; + } + + blockquote p { + color: #7f8fa4 !important; + font-size: 15px; + line-height: 1.5; + } + + p { + color:#5c5d5e; + margin:6px 0 0 0; + } + + table { + @extend .table; + @extend .table-bordered; + margin: 12px 0 12px 0; + color: #5c5d5e; + th { + background: #f8fafc; + } + } + + pre { + margin: 12px 0 12px 0 !important; + background-color: #f8fafc !important; + font-size: 13px !important; + color: #5b6169 !important; + line-height: 1.6em !important; + @include border-radius(2px); + } + + p > code { + font-weight: inherit; + } + + + ul { + color: #5c5d5e; + } + + li { + line-height: 1.6em; + } + + a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] { + &:before { + margin-right: 4px; + + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + content: "\f0c6"; + } + + &:hover:before { + text-decoration: none; + } + } +} + + +/** + * Headers + * + */ +body { + text-rendering:optimizeLegibility; + -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; +} + +.page-title { + margin-top: 0px; + line-height: 1.3; + font-size: 1.25em; + font-weight: 600; +} + +.page-title-empty { + margin-top: 0px; + line-height: 1.3; + font-size: 1.25em; + font-weight: 600; + margin: 12px 7px 12px 7px; +} + +h1, h2, h3, h4, h5, h6 { + color: $gl-header-color; + font-weight: 500; +} + +/** CODE **/ +pre { + font-family: $monospace_font; + + &.dark { + background: #333; + color: $background-color; + } + + &.plain-readme { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: 14px; + } +} + +.monospace { + font-family: $monospace_font; +} + +code { + &.key-fingerprint { + background: $body-bg; + color: $text-color; + } +} + +a > code { + color: $link-color; +} + +/** + * Wiki typography + * + */ +.wiki { + @include md-typography; + + word-wrap: break-word; + padding: 7px; + + /* Link to current header. */ + h1, h2, h3, h4, h5, h6 { + position: relative; + + a.anchor { + // Setting `display: none` would prevent the anchor being scrolled to, so + // instead we set the height to 0 and it gets updated on hover. + height: 0; + } + + &:hover > a.anchor { + $size: 16px; + position: absolute; + right: 100%; + top: 50%; + margin-top: -$size/2; + margin-right: 0px; + padding-right: 20px; + display: inline-block; + width: $size; + height: $size; + background-image: image-url("icon-link.png"); + background-size: contain; + background-repeat: no-repeat; + } + } + + ul,ol { + padding: 0; + margin: 6px 0 6px 18px !important; + } + ol { + color: #5c5d5e; + } +} + +.md-area { + @include md-typography; +} + +.md { + @include md-typography; +} + +/** + * Textareas intended for GFM + * + */ +textarea.js-gfm-input { + font-family: $monospace_font; +} + +.md-preview { +} + +.strikethrough { + text-decoration: line-through; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss new file mode 100644 index 00000000000..91954683c3e --- /dev/null +++ b/app/assets/stylesheets/framework/variables.scss @@ -0,0 +1,99 @@ +$hover: #FFFAF1; +$gl-text-color: #54565B; +$gl-text-green: #4A2; +$gl-text-red: #D12F19; +$gl-text-orange: #D90; +$gl-header-color: #4c4e54; +$gl-link-color: #333c48; +$md-text-color: #444; +$md-link-color: #3084bb; +$nprogress-color: #c0392b; +$gl-font-size: 15px; +$list-font-size: 15px; +$sidebar_collapsed_width: 62px; +$sidebar_width: 230px; +$avatar_radius: 50%; +$code_font_size: 13px; +$code_line_height: 1.5; +$border-color: #dce0e6; +$table-border-color: #eef0f2; +$background-color: #F7F8FA; +$header-height: 58px; +$fixed-layout-width: 1200px; +$gl-gray: #7f8fa4; +$gl-padding: 16px; +$gl-avatar-size: 46px; + +/* + * Color schema + */ + +$white-light: #FFFFFF; +$white-normal: #DCE0E5; +$white-dark: #E4E7ED; + +$gray-light: #F0F2F5; +$gray-normal: #DCE0E5; +$gray-dark: #E4E7ED; + +$green-light: #31AF64; +$green-normal: #2FAA60; +$green-dark: #2CA05B; + +$blue-light: #2EA8E5; +$blue-normal: #2D9FD8; +$blue-dark: #2897CE; + +$orange-light: #FC6443; +$orange-normal: #E75E40; +$orange-dark: #CE5237; + +$red-light: #F43263; +$red-normal: #E52C5A; +$red-dark: #D22852; + +$border-white-light: #E3E7EC; +$border-white-normal: #D6DAE2; +$border-white-dark: #C6CACF; + +$border-gray-light: #DCE0E5; +$border-gray-normal: #D6DAE2; +$border-gray-dark: #C6CACF; + +$border-green-light: #2FAA60; +$border-green-normal: #2CA05B; +$border-green-dark: #279654; + +$border-blue-light: #2D9FD8; +$border-blue-normal: #2897CE; +$border-blue-dark: #258DC1; + +$border-orange-light: #ED5C3D; +$border-orange-normal: #CE5237; +$border-orange-dark: #C14E35; + +$border-red-light: #E52C5A; +$border-red-normal: #D22852; +$border-red-dark: #CA264F; + + +/* + * State colors: + */ +$gl-primary: $blue-normal; +$gl-success: $green-normal; +$gl-info: $blue-normal; +$gl-warning: $orange-normal; +$gl-danger: $red-normal; + +/* + * Commit Diff Colors + */ +$added: #63c363; +$deleted: #f77; + +/* + * Fonts + */ +$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; +$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss new file mode 100644 index 00000000000..32e2c020e06 --- /dev/null +++ b/app/assets/stylesheets/framework/zen.scss @@ -0,0 +1,86 @@ +.zennable { + .zen-toggle-comment { + display: none; + } + + .zen-enter-link { + color: $gl-gray; + position: absolute; + top: 0px; + right: 4px; + line-height: 40px; + } + + .zen-leave-link { + display: none; + color: $gl-text-color; + position: absolute; + top: 10px; + right: 10px; + padding: 5px; + font-size: 36px; + + &:hover { + color: #111; + } + } + + // Hide the Enter link when we're in Zen mode + input:checked ~ .zen-backdrop .zen-enter-link { + display: none; + } + + // Show the Leave link when we're in Zen mode + input:checked ~ .zen-backdrop .zen-leave-link { + display: block; + position: absolute; + top: 0; + } + + input:checked ~ .zen-backdrop { + background-color: white; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1031; + + textarea { + border: none; + box-shadow: none; + border-radius: 0; + color: #000; + font-size: 20px; + line-height: 26px; + padding: 30px; + display: block; + outline: none; + resize: none; + height: 100vh; + max-width: 900px; + margin: 0 auto; + } + } + + // Make the color of the placeholder text in the Zenned-out textarea darker, + // so it becomes visible + + input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder { + color: #A8A8A8; + } + + input:checked ~ .zen-backdrop textarea:-moz-placeholder { + color: #A8A8A8; + opacity: 1; + } + + input:checked ~ .zen-backdrop textarea::-moz-placeholder { + color: #A8A8A8; + opacity: 1; + } + + input:checked ~ .zen-backdrop textarea:-ms-input-placeholder { + color: #A8A8A8; + } +} |