diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/todos.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/todos.scss | 259 |
1 files changed, 259 insertions, 0 deletions
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; + } +} |