From 93bd3dd8a8f587dc860c72653364d853c27bc6fd Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Fri, 21 Oct 2016 13:49:09 +0200 Subject: Upgrade gl_field_errors to support more use cases. --- app/assets/stylesheets/framework/forms.scss | 32 +++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 761c07384f4..514d0868ba1 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -136,3 +136,35 @@ label { color: $red-normal; } +.show-gl-field-errors { + .gl-field-success-outline { + border: 1px solid $green-normal; + + &:focus { + box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal; + border: 0 none; + } + } + + .gl-field-error-outline { + border: 1px solid $red-normal; + + &:focus { + box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6); + border: 0 none; + } + } + + .gl-field-success-message { + color: $green-normal; + } + + .gl-field-error-message { + color: $red-normal; + } + + .gl-field-hint { + color: $gl-text-color; + } +} + -- cgit v1.2.1 From 4281daf30a0319103e46b98cc2d0f64228415443 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 27 Oct 2016 15:45:38 -0500 Subject: Update links in side nav and header --- app/assets/stylesheets/framework/gitlab-theme.scss | 87 ++++++++++++---------- app/assets/stylesheets/framework/header.scss | 6 +- app/assets/stylesheets/framework/sidebar.scss | 5 ++ 3 files changed, 58 insertions(+), 40 deletions(-) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 3f877d86a26..91ab1503439 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -21,57 +21,66 @@ background: $color-darker; } - .nav-sidebar li { - a { - color: $color-light; - - &:hover, - &:focus, - &:active { - background: $color-dark; - } + .sidebar-header, + .sidebar-action-buttons { + color: $color-light; + background-color: lighten($color-darker, 5%); + } - i { + .nav-sidebar { + li { + a { color: $color-light; - } - - path, - polygon { - fill: $color-light; - } - .count { - color: $color-light; - background: $color-dark; + &:hover, + &:focus, + &:active { + background: $color-dark; + } + + i { + color: $color-light; + } + + path, + polygon { + fill: $color-light; + } + + .count { + color: $color-light; + background: $color-dark; + } + + svg { + position: relative; + top: 3px; + } } - svg { - position: relative; - top: 3px; + &.separate-item { + border-top: 1px solid $color; } - } - - &.separate-item { - border-top: 1px solid $color; - } - &.active a { - color: $white-light; - background: $color-dark; + &.active a { + color: $white-light; + background: $color-dark; - &.no-highlight { - border: none; - } + &.no-highlight { + border: none; + } - i { - color: $white-light; - } + i { + color: $white-light; + } - path, - polygon { - fill: $white-light; + path, + polygon { + fill: $white-light; + } } } + } } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 53ee1ed309e..4993ca7572a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -49,12 +49,16 @@ header { font-size: 18px; padding: 0; margin: ($header-height - 28) / 2 0; - margin-left: 10px; + margin-left: 8px; height: 28px; min-width: 28px; line-height: 28px; text-align: center; + &.header-user-dropdown-toggle { + margin-left: 14px; + } + &:hover, &:focus, &:active { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index c54f7b27575..d74c14ee2a4 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -59,6 +59,11 @@ padding: 0 !important; } + .sidebar-header { + padding: 11px 22px 12px; + font-size: 20px; + } + li { &.separate-item { padding-top: 10px; -- cgit v1.2.1 From fb99a430f91f8a4c5cdf2954cb35c825002d1832 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Mon, 31 Oct 2016 12:14:05 -0700 Subject: 23545 Fix distorted project and group avatars --- app/assets/stylesheets/framework/avatar.scss | 63 +++++++++++++++++++--------- app/assets/stylesheets/framework/lists.scss | 4 -- 2 files changed, 43 insertions(+), 24 deletions(-) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 98e301d3799..ce117c3fba5 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -1,11 +1,36 @@ -.avatar { +@mixin avatar-size($size, $margin-right) { + width: $size; + height: $size; + margin-right: $margin-right; +} + +.avatar-container { float: left; - margin-right: 12px; + margin-right: 15px; + border-radius: $avatar_radius; + border: 1px solid rgba(0, 0, 0, .1); + &.s16 { @include avatar-size(16px, 6px); } + &.s20 { @include avatar-size(20px, 7px); } + &.s24 { @include avatar-size(24px, 8px); } + &.s26 { @include avatar-size(26px, 8px); } + &.s32 { @include avatar-size(32px, 10px); } + &.s36 { @include avatar-size(36px, 10px); } + &.s40 { @include avatar-size(40px, 10px); } + &.s46 { @include avatar-size(46px, 15px); } + &.s48 { @include avatar-size(48px, 10px); } + &.s60 { @include avatar-size(60px, 12px); } + &.s70 { @include avatar-size(70px, 14px); } + &.s90 { @include avatar-size(90px, 15px); } + &.s110 { @include avatar-size(110px, 15px); } + &.s140 { @include avatar-size(140px, 15px); } + &.s160 { @include avatar-size(160px, 20px); } +} + +.avatar { + @extend .avatar-container; width: 40px; height: 40px; padding: 0; - border-radius: $avatar_radius; - border: 1px solid rgba(0, 0, 0, .1); &.avatar-inline { float: none; @@ -20,22 +45,6 @@ border-radius: 0; border: none; } - - &.s16 { width: 16px; height: 16px; margin-right: 6px; } - &.s20 { width: 20px; height: 20px; margin-right: 7px; } - &.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; } - &.s40 { width: 40px; height: 40px; 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; } - &.s70 { width: 70px; height: 70px; margin-right: 14px; } - &.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 { @@ -54,3 +63,17 @@ &.s140 { font-size: 72px; line-height: 138px; } &.s160 { font-size: 96px; line-height: 158px; } } + +.image-container { + @extend .avatar-container; + overflow: hidden; + display: flex; + + .avatar { + border-radius: 0; + border: none; + height: auto; + margin: 0; + align-self: center; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 78464af94bd..bc0610cc417 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -142,10 +142,6 @@ ul.content-list { } } - .avatar { - margin-right: 15px; - } - .controls { float: right; -- cgit v1.2.1 From 69164211159ac1d4e80d53d5a9d4f3578b689454 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 27 Oct 2016 16:08:16 +0100 Subject: Makes table pagination responsive Media queries for medium screens Adds entry to CHANGELOG Rollback to previous design Adds class for previous sibling Fix removed class Fixes after review Fix scss linter --- app/assets/stylesheets/framework/pagination.scss | 43 ++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index b6f21fd8c91..2700d5db9f0 100644 --- a/app/assets/stylesheets/framework/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss @@ -7,8 +7,51 @@ .pagination { padding: 0; } + + .gap, + .gap:hover { + background-color: $gray-light; + padding: 6px; + cursor: default; + } } .panel > .gl-pagination { margin: 0; } + +/** + * Small screen pagination + */ + +@media (max-width: $screen-xs) { + .gl-pagination { + .pagination li a { + padding: 6px 14px; + } + + .page { + display: none; + + &.active { + display: inline; + } + } + } +} + +/** + * Medium screen pagination + */ +@media (min-width: $screen-xs) and (max-width: $screen-md-max) { + .gl-pagination { + .page { + display: none; + + &.active, + &.sibling { + display: inline; + } + } + } +} -- cgit v1.2.1 From 5f4bb33d1cd3cf4ed3f0c6596cf8dc2b66be19a0 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 1 Nov 2016 17:19:27 +0000 Subject: Fixes after review --- app/assets/stylesheets/framework/pagination.scss | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index 2700d5db9f0..820fb4243e8 100644 --- a/app/assets/stylesheets/framework/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss @@ -21,13 +21,32 @@ } /** - * Small screen pagination + * Extra-small screen pagination. */ +@media (max-width: 320px) { + .gl-pagination { + .first, + .last { + display: none; + } + .page { + display: none; + + &.active { + display: inline; + } + } + } +} + +/** + * Small screen pagination + */ @media (max-width: $screen-xs) { .gl-pagination { .pagination li a { - padding: 6px 14px; + padding: 6px 10px; } .page { -- cgit v1.2.1 From b59c6f2658e3d896dc8cd36217913653f37c446d Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 1 Nov 2016 17:31:36 +0000 Subject: Adds variable. Fixes changelog --- app/assets/stylesheets/framework/pagination.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index 820fb4243e8..cb2c351c368 100644 --- a/app/assets/stylesheets/framework/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss @@ -11,7 +11,7 @@ .gap, .gap:hover { background-color: $gray-light; - padding: 6px; + padding: $gl-vert-padding; cursor: default; } } -- cgit v1.2.1 From d939fbed0953be5e19308ec7dc7832cfd1d38160 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Wed, 2 Nov 2016 11:35:21 +0100 Subject: Change show-gl-field-errors to gl-show-field-errors --- app/assets/stylesheets/framework/forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/stylesheets/framework') diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 514d0868ba1..f0727e9688a 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -136,7 +136,7 @@ label { color: $red-normal; } -.show-gl-field-errors { +.gl-show-field-errors { .gl-field-success-outline { border: 1px solid $green-normal; -- cgit v1.2.1