Commit 96b2959fe394835c53c248938a76011234f1d49d
1 parent
378ae951
Exists in
master
and in
4 other branches
Styled chosen css. Lighter box shadow for blocks
Showing
2 changed files
with
58 additions
and
25 deletions
Show diff stats
app/assets/stylesheets/main.scss
@@ -3,10 +3,11 @@ | @@ -3,10 +3,11 @@ | ||
3 | @import 'font-awesome'; | 3 | @import 'font-awesome'; |
4 | 4 | ||
5 | /** GitLab colors **/ | 5 | /** GitLab colors **/ |
6 | -$link_color:#3A89A3; | ||
7 | -$blue_link: #2fa0bb; | ||
8 | -$style_color: #474d57; | 6 | +$link_color: #3A89A3; |
7 | +$blue_link: #2FA0BB; | ||
8 | +$style_color: #474D57; | ||
9 | $hover: #D9EDF7; | 9 | $hover: #D9EDF7; |
10 | +$hover_border: #ADF; | ||
10 | 11 | ||
11 | /** GitLab Fonts **/ | 12 | /** GitLab Fonts **/ |
12 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } | 13 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } |
@@ -19,9 +20,9 @@ $hover: #D9EDF7; | @@ -19,9 +20,9 @@ $hover: #D9EDF7; | ||
19 | } | 20 | } |
20 | 21 | ||
21 | @mixin solid_shade { | 22 | @mixin solid_shade { |
22 | - -moz-box-shadow: 0 0 0 3px #eee; | ||
23 | - -webkit-box-shadow: 0 0 0 3px #eee; | ||
24 | - box-shadow: 0 0 0 3px #eee; | 23 | + -moz-box-shadow: 0 0 0 3px #f1f1f1; |
24 | + -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
25 | + box-shadow: 0 0 0 3px #f1f1f1; | ||
25 | } | 26 | } |
26 | 27 | ||
27 | @mixin border-radius($radius) { | 28 | @mixin border-radius($radius) { |
@@ -64,6 +65,14 @@ $hover: #D9EDF7; | @@ -64,6 +65,14 @@ $hover: #D9EDF7; | ||
64 | background-image: -o-linear-gradient($from, $to); | 65 | background-image: -o-linear-gradient($from, $to); |
65 | } | 66 | } |
66 | 67 | ||
68 | +@mixin bg-light-gray-gradient { | ||
69 | + background:#f1f1f1; | ||
70 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
71 | + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
72 | + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
73 | + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
74 | +} | ||
75 | + | ||
67 | @mixin bg-gray-gradient { | 76 | @mixin bg-gray-gradient { |
68 | background:#eee; | 77 | background:#eee; |
69 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | 78 | background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); |
app/assets/stylesheets/ref_select.scss
@@ -19,31 +19,66 @@ | @@ -19,31 +19,66 @@ | ||
19 | margin-right: 10px; | 19 | margin-right: 10px; |
20 | 20 | ||
21 | .chzn-drop { | 21 | .chzn-drop { |
22 | - margin:7px 0; | ||
23 | min-width: 400px; | 22 | min-width: 400px; |
24 | - border: 2px solid $blue_link; | ||
25 | - @include border-radius(4px); | 23 | + .chzn-results { |
24 | + max-height:300px; | ||
25 | + } | ||
26 | + .chzn-search input { | ||
27 | + min-width:365px; | ||
28 | + } | ||
29 | + } | ||
30 | +} | ||
31 | + | ||
32 | +/** Fix for Search Dropdown Border **/ | ||
33 | +.chzn-container { | ||
34 | + .chzn-search { | ||
35 | + input:focus { | ||
36 | + -webkit-box-shadow: none; | ||
37 | + -moz-box-shadow: none; | ||
38 | + box-shadow: none; | ||
39 | + } | ||
40 | + } | ||
41 | + | ||
42 | + .chzn-drop { | ||
43 | + margin:7px 0; | ||
44 | + min-width: 200px; | ||
45 | + border: 1px solid #bbb; | ||
46 | + border-radius:0; | ||
26 | 47 | ||
27 | .chzn-results { | 48 | .chzn-results { |
49 | + margin-top: 5px; | ||
28 | max-height:300px; | 50 | max-height:300px; |
29 | 51 | ||
30 | .group-result { | 52 | .group-result { |
31 | - color: $blue_link; | 53 | + color: $style_color; |
54 | + border-bottom: 1px solid #EEE; | ||
55 | + padding: 8px; | ||
32 | } | 56 | } |
33 | .active-result { | 57 | .active-result { |
58 | + border-radius: 0; | ||
59 | + | ||
34 | &.highlighted { | 60 | &.highlighted { |
35 | - background: $blue_link; | 61 | + background: $hover; |
62 | + color: $style_color; | ||
63 | + } | ||
64 | + &.result-selected { | ||
65 | + background: #EEE; | ||
66 | + border-left: 4px solid #CCC; | ||
36 | } | 67 | } |
37 | } | 68 | } |
38 | } | 69 | } |
39 | 70 | ||
40 | - .chzn-search input { | ||
41 | - min-width:365px; | 71 | + .chzn-search { |
72 | + @include bg-gray-gradient; | ||
73 | + input { | ||
74 | + min-width:165px; | ||
75 | + border-color: #CCC; | ||
76 | + } | ||
42 | } | 77 | } |
43 | } | 78 | } |
44 | 79 | ||
45 | .chzn-single { | 80 | .chzn-single { |
46 | - @include bg-gray-gradient; | 81 | + @include bg-light-gray-gradient; |
47 | 82 | ||
48 | div { | 83 | div { |
49 | background:transparent; | 84 | background:transparent; |
@@ -55,14 +90,3 @@ | @@ -55,14 +90,3 @@ | ||
55 | } | 90 | } |
56 | } | 91 | } |
57 | } | 92 | } |
58 | - | ||
59 | -/** Fix for Search Dropdown Border **/ | ||
60 | -.chzn-container { | ||
61 | - .chzn-search { | ||
62 | - input:focus { | ||
63 | - -webkit-box-shadow: none; | ||
64 | - -moz-box-shadow: none; | ||
65 | - box-shadow: none; | ||
66 | - } | ||
67 | - } | ||
68 | -} |