Commit 96b2959fe394835c53c248938a76011234f1d49d

Authored by Dmitriy Zaporozhets
1 parent 378ae951

Styled chosen css. Lighter box shadow for blocks

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   -}
... ...