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