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 | 3 | @import 'font-awesome'; |
4 | 4 | |
5 | 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 | 9 | $hover: #D9EDF7; |
10 | +$hover_border: #ADF; | |
10 | 11 | |
11 | 12 | /** GitLab Fonts **/ |
12 | 13 | @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } |
... | ... | @@ -19,9 +20,9 @@ $hover: #D9EDF7; |
19 | 20 | } |
20 | 21 | |
21 | 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 | 28 | @mixin border-radius($radius) { |
... | ... | @@ -64,6 +65,14 @@ $hover: #D9EDF7; |
64 | 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 | 76 | @mixin bg-gray-gradient { |
68 | 77 | background:#eee; |
69 | 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 | 19 | margin-right: 10px; |
20 | 20 | |
21 | 21 | .chzn-drop { |
22 | - margin:7px 0; | |
23 | 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 | 48 | .chzn-results { |
49 | + margin-top: 5px; | |
28 | 50 | max-height:300px; |
29 | 51 | |
30 | 52 | .group-result { |
31 | - color: $blue_link; | |
53 | + color: $style_color; | |
54 | + border-bottom: 1px solid #EEE; | |
55 | + padding: 8px; | |
32 | 56 | } |
33 | 57 | .active-result { |
58 | + border-radius: 0; | |
59 | + | |
34 | 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 | 80 | .chzn-single { |
46 | - @include bg-gray-gradient; | |
81 | + @include bg-light-gray-gradient; | |
47 | 82 | |
48 | 83 | div { |
49 | 84 | background:transparent; |
... | ... | @@ -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 | -} | ... | ... |