diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
6 files changed, 320 insertions, 14 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 0b847902525..57053c7f0cb 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -19,14 +19,6 @@ display: none; } - .monaco-editor .selected-text { - z-index: 1; - } - - .monaco-editor .view-lines { - z-index: 2; - } - .is-readonly .editor.original { .view-lines { cursor: default; @@ -98,11 +90,11 @@ } .char-insert { - background-color: $line-added-dark; + background-color: $line-added-dark-transparent; } .char-delete { - background-color: $line-removed-dark; + background-color: $line-removed-dark-transparent; } .line-numbers { @@ -111,11 +103,11 @@ .view-overlays { .line-insert { - background-color: $line-added; + background-color: $line-added-transparent; } .line-delete { - background-color: $line-removed; + background-color: $line-removed-transparent; } } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index dfd7fd355a4..1e239877428 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -84,7 +84,8 @@ color: var(--ide-input-border, $gl-text-color-tertiary); } - .dropdown-input .fa { + .dropdown-input .fa, + .dropdown-input .dropdown-input-clear { color: var(--ide-input-border, $dropdown-input-fa-color); } diff --git a/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss new file mode 100644 index 00000000000..0e8ea5e2d52 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss @@ -0,0 +1,21 @@ +/** + This file contains only imports of Bootstrap, GitLab UI and GitLab mixins, + variables and functions, in the correct order. + + It is meant to be used in page_bundles, but SHOULD NOT introduce any + styles of it's own. We actually check in CI that compiling _this_ file doesn't + result in any additional styles. + + See: scripts/frontend/check_page_bundle_mixins_css_for_sideeffects.js + */ +@import 'framework/variables'; +@import 'framework/variables_overrides'; +@import 'framework/mixins'; + +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; + +@import '@gitlab/ui/src/scss/functions'; +@import '@gitlab/ui/src/scss/variables'; +@import '@gitlab/ui/src/scss/utility-mixins/index'; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 36587ecde3d..71e74297ee8 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px; max-width: 24px; padding: 0; margin: 0 ($grid-size / 2); - color: var(--ide-text-color-secondary, $gl-gray-light); + color: var(--ide-text-color-secondary, $gray-600); &:first-child { margin-left: 0; diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss new file mode 100644 index 00000000000..83d16f29d49 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -0,0 +1,33 @@ +@import 'framework/variables'; + +$atlaskit-border-color: #dfe1e6; + +.ac-content { + margin: 20px; + + .subscription-form { + margin-bottom: 20px; + + .field-group-input { + display: flex; + padding-top: $gl-padding-4; + + .ak-button { + height: auto; + margin-left: $btn-margin-5; + } + } + } +} + +.subscriptions { + tbody { + tr { + border-bottom: 1px solid $atlaskit-border-color; + } + + td { + padding: $gl-padding-8; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss new file mode 100644 index 00000000000..3eec5b53a30 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -0,0 +1,259 @@ +@import 'mixins_and_variables_and_functions'; + +/** + * Dashboard Todos + * + */ + +.todos-list > .todo { + // workaround because we cannot use border-collapse + border-top: 1px solid transparent; + display: flex; + flex-direction: row; + + &:hover { + background-color: var(--blue-50, $blue-50); + border-color: var(--blue-200, $blue-200); + cursor: pointer; + } + + // overwrite border style of .content-list + &:last-child { + border-bottom: 1px solid transparent; + + &:hover { + border-color: var(--blue-200, $blue-200); + } + } + + .todo-avatar, + .todo-actions { + @include transition(opacity); + flex: 0 0 auto; + } + + .todo-actions { + display: flex; + justify-content: center; + flex-direction: column; + margin-left: 10px; + min-width: 55px; + } + + .todo-item { + flex: 0 1 100%; + min-width: 0; + } + + &.todo-pending.done-reversible { + &:hover { + border-color: var(--border-color, $border-color); + background-color: var(--gray-50, $gray-50); + border-top: 1px solid transparent; + + .todo-avatar, + .todo-item { + opacity: 0.6; + } + } + + .todo-avatar, + .todo-item { + opacity: 0.2; + } + + .btn { + background-color: var(--gray-50, $gray-50); + } + } +} + +.todo-item { + @include transition(opacity); + + .todo-title { + > .title-item { + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + .todo-label { + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .status-box { + margin: 0; + float: none; + display: inline-block; + font-weight: $gl-font-weight-normal; + padding: 0 5px; + line-height: inherit; + font-size: 14px; + } + + .todo-label, + .todo-project { + a { + font-weight: $gl-font-weight-normal; + color: var(--blue-600, $blue-600); + } + } + + .todo-body { + .badge.badge-pill, + p { + color: var(--gl-text-color, $gl-text-color); + } + + .md { + color: $gl-grayish-blue; + font-size: $gl-font-size; + } + + code { + white-space: pre-wrap; + } + + pre { + border: 0; + background: var(--gray-50, $gray-50); + border-radius: 0; + color: var(--gray-500, $gray-500); + margin: 0 20px; + overflow: hidden; + } + + .note-image-attach { + margin-top: 4px; + margin-left: 0; + max-width: 200px; + float: none; + } + + p:last-child { + margin-bottom: 0; + } + } + + .gl-label-scoped { + --label-inset-border: inset 0 0 0 1px currentColor; + } +} + +@include media-breakpoint-down(lg) { + .todos-filters { + .filter-categories { + width: 75%; + + .filter-item { + margin-bottom: 10px; + } + } + } +} + +@include media-breakpoint-down(sm) { + .container-fluid .todos-list-container { + margin: 0 (-$gl-padding); + } + + .todo { + .avatar { + display: none; + } + } + + .todo-item { + .todo-title { + margin-bottom: 10px; + + .todo-label { + white-space: normal; + } + } + + .todo-body { + margin: 0; + border-left: 2px solid var(--border-color, $border-color); + padding-left: 10px; + } + } + + .todos-filters { + .filter-categories { + width: auto; + } + + .dropdown-menu-toggle { + width: 100%; + } + + .dropdown-menu-toggle-sort { + width: auto; + } + } +} + +.todos-empty { + display: flex; + flex-direction: column; + max-width: 900px; + margin-left: auto; + margin-right: auto; + + @include media-breakpoint-up(sm) { + flex-direction: row; + padding-top: 80px; + } +} + +.todos-empty-content { + align-self: center; + max-width: 480px; + margin-right: 20px; +} + +.todos-empty-hero { + width: 200px; + margin-left: auto; + margin-right: auto; + + @include media-breakpoint-up(sm) { + width: 300px; + margin-right: 0; + order: 2; + } +} + +.todos-all-done { + padding-top: 20px; + + @include media-breakpoint-up(sm) { + padding-top: 50px; + } + + > svg { + display: block; + max-width: 300px; + margin: 0 auto 20px; + } + + p { + max-width: 470px; + margin-left: auto; + margin-right: auto; + } + + a { + font-weight: $gl-font-weight-bold; + } +} |