Commit 4c1267e09f8718cd24b7a4701818336cdb45a0bf

Authored by randx
1 parent e1344a08

CSS refactoring. Notes better styled

app/assets/stylesheets/gitlab_bootstrap.scss
... ... @@ -335,6 +335,9 @@ img.avatar {
335 335 &.s24 {
336 336 width:24px;
337 337 }
  338 + &.s32 {
  339 + width:32px;
  340 + }
338 341 }
339 342  
340 343 img.lil_av {
... ...
app/assets/stylesheets/header.scss
... ... @@ -1,228 +0,0 @@
1   -/*
2   - * Application Header
3   - *
4   - */
5   -header {
6   - width:100%;
7   - padding:0;
8   - margin:0;
9   - top:1px;
10   - left:0;
11   - background: #F1F1F1; /* for non-css3 browsers */
12   - border-bottom: 1px solid #ccc;
13   - box-shadow: 0 -1px 0 white inset;
14   - -moz-box-shadow: 0 -1px 0 white inset;
15   - -webkit-box-shadow: 0 -1px 0 white inset;
16   - z-index:10;
17   - height:60px;
18   -
19   - /**
20   - *
21   - * Logo holder
22   - *
23   - */
24   - .app_logo {
25   - width:230px;
26   - float:left;
27   - position:relative;
28   - top:-5px;
29   -
30   - a {
31   - float:left;
32   -
33   - h1 {
34   - text-indent:-9999px;
35   - width:102px;
36   - background: url('logo_text.png') no-repeat 0px -3px;
37   - float:left;
38   - margin-left:5px;
39   - font-size:20px;
40   - line-height:36px;
41   - font-weight:bold;
42   - color:#aaa;
43   - text-shadow: 0 1px 1px #FFF;
44   - padding-left:50px;
45   - }
46   - }
47   - .separator {
48   - margin-left:20px;
49   - float: left;
50   - height: 60px;
51   - width: 1px;
52   - background: white;
53   - border-left: 1px solid #DDD;
54   - margin-top: -10px;
55   - }
56   - }
57   - .container {
58   - .top_panel_content {
59   - margin:auto;
60   - position:relative;
61   - padding:15px 0;
62   - }
63   - }
64   -
65   - /**
66   - *
67   - * Project / Area name
68   - *
69   - */
70   - .project_name {
71   - float:left;
72   - margin:0;
73   - margin-right:30px;
74   - font-size:24px;
75   - line-height:36px;
76   - font-weight:500;
77   - color:$style_color;
78   - text-shadow: 0 1px 1px #FFF;
79   - }
80   -
81   - .fbtn {
82   - float: right;
83   - margin-right:10px;
84   - .btn {
85   - margin-left:7px;
86   - background: #F1F1F1;
87   - border: 1px solid #CCC;
88   - }
89   - }
90   -
91   -
92   - /**
93   - *
94   - * Search box
95   - *
96   - */
97   - .search {
98   - float: right;
99   - margin-right: 50px;
100   -
101   - .search-input {
102   - @extend .span2;
103   - background-image: url("icon-search.png");
104   - background-repeat: no-repeat;
105   - background-position: 10px;
106   - padding-left:25px;
107   - @include border-radius(5px);
108   - border:1px solid #ccc;
109   - }
110   - }
111   -
112   - /**
113   - *
114   - * Account box
115   - *
116   - */
117   - .account-box {
118   - position: absolute;
119   - right: 0;
120   - top: 13px;
121   - z-index: 10000;
122   - width: 128px;
123   - font-size: 11px;
124   - float: right;
125   - display: block;
126   - cursor: pointer;
127   - img {
128   - border-radius: 4px;
129   - right: 5px;
130   - position: absolute;
131   - width: 31px;
132   - height: 31px;
133   - display: block;
134   - top: 0;
135   - &:after {
136   - content: " ";
137   - display: block;
138   - position: absolute;
139   - top: 0;
140   - right: 0;
141   - left: 0;
142   - bottom: 0;
143   - float: right;
144   - border-radius: 5px;
145   - border: 1px solid rgba(255, 255, 255, 0.1);
146   - border-bottom: 0;
147   - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
148   - background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
149   - background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
150   - -webkit-background-origin: border-box;
151   - -moz-background-origin: border;
152   - background-origin: border-box; } } }
153   -
154   - .account-box {
155   - &.hover {
156   - height: 138px; }
157   - &:hover > .account-links {
158   - display: block; } }
159   -
160   - .account-links {
161   - background: #79C3E0;
162   - display: none;
163   - border-radius: 5px;
164   - width: 100px;
165   - margin-top: 0;
166   - float: right;
167   - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
168   - position: relative;
169   - &:before {
170   - content: ".";
171   - width: 0;
172   - height: 0;
173   - position: absolute;
174   - border: 5px solid transparent;
175   - border-color: rgba(255, 255, 255, 0);
176   - border-bottom-color: #333;
177   - text-indent: -9999px;
178   - top: -10px;
179   - line-height: 0;
180   - right: 10px;
181   - z-index: 10; }
182   - background: #333;
183   - display: none;
184   - z-index: 100000;
185   - border-radius: 5px;
186   - width: 100px;
187   - position: absolute;
188   - right: 10px;
189   - top: 46px;
190   - margin-top: 0;
191   - float: right;
192   - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
193   - a {
194   - color: #EEE;
195   - padding: 6px 10px;
196   - display: block;
197   - text-shadow: none;
198   - border-bottom: 1px solid #555;
199   - &:hover {
200   - color:#eee;
201   - background: #444;
202   - }
203   - }
204   - }
205   -
206   - .account-box.hover .arrow-up {
207   - top: 41px;
208   - right: 6px;
209   - position: absolute; }
210   -
211   - .account-links a {
212   - &:first-child {
213   - -webkit-border-top-left-radius: 5px;
214   - -webkit-border-top-right-radius: 5px;
215   - -moz-border-radius-topleft: 5px;
216   - -moz-border-radius-topright: 5px;
217   - border-top-left-radius: 5px;
218   - border-top-right-radius: 5px; }
219   - &:last-child {
220   - -webkit-border-bottom-right-radius: 5px;
221   - -webkit-border-bottom-left-radius: 5px;
222   - -moz-border-radius-bottomright: 5px;
223   - -moz-border-radius-bottomleft: 5px;
224   - border-bottom-right-radius: 5px;
225   - border-bottom-left-radius: 5px;
226   - border-bottom: 0; } }
227   -}
228   -
app/assets/stylesheets/login.scss
... ... @@ -1,44 +0,0 @@
1   -/* Login Page */
2   -body.login-page{
3   - padding-top: 10%;
4   - background:#f1f1f1;
5   -}
6   -
7   -.login-box{
8   - width: 304px;
9   - position: relative;
10   - border-radius: 5px;
11   - margin: auto;
12   - padding: 20px;
13   - background: white;
14   -}
15   -
16   -.login-box .login-logo{
17   - margin: 10px 0 30px 0;
18   - display: block;
19   -}
20   -
21   -.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px}
22   -
23   -.login-box input.text.top{
24   - -webkit-border-top-left-radius: 5px;
25   - -webkit-border-top-right-radius: 5px;
26   - -moz-border-radius-topleft: 5px;
27   - -moz-border-radius-topright: 5px;
28   - border-top-left-radius: 5px;
29   - border-top-right-radius: 5px;
30   -}
31   -
32   -.login-box input.text.bottom{
33   - -webkit-border-bottom-right-radius: 5px;
34   - -webkit-border-bottom-left-radius: 5px;
35   - -moz-border-radius-bottomright: 5px;
36   - -moz-border-radius-bottomleft: 5px;
37   - border-bottom-right-radius: 5px;
38   - border-bottom-left-radius: 5px;
39   - border-top: 0;
40   - margin-bottom: 20px;
41   -}
42   -
43   -.login-box a.forgot{float: right; padding-top: 6px}
44   -
app/assets/stylesheets/main.scss
... ... @@ -76,13 +76,13 @@ $hover: #FDF5D9;
76 76 * Header of application.
77 77 * Contain application logo, search panel, profile icon
78 78 */
79   -@import "header.scss";
  79 +@import "sections/header.scss";
80 80  
81 81 /**
82 82 * Navigation menu of application.
83 83 * Panel with links to pages depends on project, profile or admin area
84 84 */
85   -@import "nav.scss";
  85 +@import "sections/nav.scss";
86 86  
87 87 /**
88 88 * This file represent some UI that can be changed
... ... @@ -147,12 +147,12 @@ $hover: #FDF5D9;
147 147 /**
148 148 * This file represent notes(comments) styles
149 149 */
150   -@import "notes.scss";
  150 +@import "sections/notes.scss";
151 151  
152 152 /**
153 153 * Devise styles
154 154 */
155   -@import "login.scss";
  155 +@import "sections/login.scss";
156 156  
157 157 /**
158 158 * CODE HIGHTLIGHT BASE
... ...
app/assets/stylesheets/nav.scss
... ... @@ -1,98 +0,0 @@
1   -/*
2   - * Main Menu of Application
3   - *
4   - */
5   -ul.main_menu {
6   - border-radius: 4px;
7   - margin: auto;
8   - margin:30px 0;
9   - background:#eee;
10   - border:1px solid #bbb;
11   - height:37px;
12   - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
13   - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
14   - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
15   - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
16   - position:relative;
17   - @include shade;
18   - .count {
19   - position: relative;
20   - top: -1px;
21   - display: inline-block;
22   - height: 15px;
23   - margin: 0 0 0 5px;
24   - padding: 0 8px 1px 8px;
25   - height: auto;
26   - font-size: 0.82em;
27   - line-height: 14px;
28   - text-align: center;
29   - color: #777;
30   - background: #f2f2f2;
31   - border-top: 1px solid #CCC;
32   - border-radius: 8px;
33   - -moz-border-radius: 8px;
34   - }
35   - .label {
36   - background:$hover;
37   - text-shadow:none;
38   - color:$style_color;
39   - }
40   - li {
41   - list-style-type: none;
42   - margin: 0;
43   - display: table-cell;
44   - width: 1%;
45   - border-right: 1px solid #DDD;
46   - border-left: 1px solid #EEE;
47   - border-bottom:2px solid #CFCFCF;
48   -
49   - &:first-child{
50   - -webkit-border-top-left-radius: 4px;
51   - -webkit-border-bottom-left-radius: 4px;
52   - -moz-border-radius-topleft: 4px;
53   - -moz-border-radius-bottomleft: 4px;
54   - border-top-left-radius: 4px;
55   - border-bottom-left-radius: 4px;
56   - border-left: 0;
57   - }
58   -
59   - &.current {
60   - background-color:#D5D5D5;
61   - border-bottom: 2px solid $style_color;
62   - border-right: 1px solid #BBB;
63   - border-left: 1px solid #BBB;
64   - border-radius: 0 0 1px 1px;
65   - &:first-child{
66   - border-bottom:none;
67   - border-left:none;
68   - }
69   - }
70   -
71   - &.home {
72   - a {
73   - background: url(home_icon.PNG) no-repeat center center;
74   - text-indent:-9999px;
75   - min-width:20px;
76   - img {
77   - position:relative;
78   - top:4px;
79   - }
80   - }
81   - }
82   - }
83   - a {
84   - display: block;
85   - text-align: center;
86   - font-weight:bold;
87   - height:35px;
88   - line-height:36px;
89   - color: $style_color;
90   - text-shadow:0 1px 1px white;
91   -
92   - }
93   -}
94   -/*
95   - * End of Main Menu
96   - *
97   - */
98   -
app/assets/stylesheets/notes.scss
... ... @@ -1,181 +0,0 @@
1   -/**
2   - * Notes
3   - *
4   - */
5   -#notes-list,
6   -#new_notes_list {
7   - display:block;
8   - list-style:none;
9   - margin:0px;
10   - padding:0px;
11   -}
12   -
13   -#new_notes_list li:last-child{
14   - border-bottom:1px solid #aaa;
15   -}
16   -
17   -.issue_notes,
18   -.wiki_notes {
19   - .note_content {
20   - float:left;
21   - width:400px;
22   - }
23   -}
24   -
25   -/* Note textare */
26   -#note_note {
27   - height:80px;
28   - width:99%;
29   - font-size:14px;
30   -}
31   -
32   -#new_note {
33   - #note_note {
34   - height:25px;
35   - }
36   - .attach_holder {
37   - display:none;
38   - }
39   -}
40   -
41   -.note .delete-note {
42   - display:none;
43   - float:right;
44   -}
45   -.note:hover .delete-note { display:block; }
46   -.note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
47   -.note img{float: left; margin-right: 10px;}
48   -.note span.note-title{display: block;}
49   -.note span.note-title{margin-bottom: 10px}
50   -.note span.note-author{color: #999; font-weight: normal; font-style: italic;}
51   -.note span.note-author strong{font-weight: bold; font-style: normal;}
52   -.note p { color:$style_color; }
53   -.note .note-author { color: $style_color;}
54   -
55   -.note .note-title { margin-left:55px; }
56   -
57   -p.notify_controls input{
58   - margin: 5px;
59   -}
60   -
61   -p.notify_controls span{
62   - font-weight: 700;
63   -}
64   -
65   -tr.line_notes_row {
66   - border-bottom:1px solid #DDD;
67   - border-left: 7px solid #2A79A3;
68   -
69   - &.reply {
70   - background:#eee;
71   - border-left: 7px solid #2A79A3;
72   - border-top:1px solid #ddd;
73   - td {
74   - padding:7px 10px;
75   - }
76   - a.line_note_reply_link {
77   - @include round-borders-all(4px);
78   - padding: 3px 10px;
79   - margin-left:5px;
80   - color: white;
81   - background: #2A79A3;
82   - border-color: #2A79A3;
83   - }
84   - }
85   - ul {
86   - margin:0;
87   - li {
88   - padding:0;
89   - border:none;
90   - }
91   - }
92   -}
93   -
94   -.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
95   -
96   -.per_line_form {
97   - background:#f5f5f5;
98   - border-top:1px solid #eee;
99   - form { margin: 0; }
100   - td {
101   - border-bottom:1px solid #ddd;
102   - }
103   - .note_actions {
104   - margin:0;
105   - padding-top: 10px;
106   -
107   - .buttons {
108   - float:left;
109   - width:300px;
110   - }
111   - .options {
112   - .labels {
113   - float:left;
114   - padding-left:10px;
115   - label {
116   - padding: 6px 0;
117   - margin: 0;
118   - width:120px;
119   - }
120   - }
121   - }
122   - }
123   -}
124   -
125   -td .line_note_link {
126   - position:absolute;
127   - margin-left:-70px;
128   - margin-top:-10px;
129   - z-index:10;
130   - background: url("comment_add.png") no-repeat left 0;
131   - width:32px;
132   - height:32px;
133   -
134   - opacity: 0.0;
135   - filter: alpha(opacity=0);
136   -
137   - &:hover {
138   - opacity: 1.0;
139   - filter: alpha(opacity=100);
140   - }
141   -}
142   -
143   -.diff_file_content tr.line_holder:hover > td { background: $hover !important; }
144   -.diff_file_content tr.line_holder:hover > td .line_note_link {
145   - opacity: 1.0;
146   - filter: alpha(opacity=100);
147   -}
148   -
149   -.new_note {
150   - .input-file {
151   - font: 500px monospace;
152   - opacity:0;
153   - filter: alpha(opacity=0);
154   - position: absolute;
155   - z-index: 1;
156   - top:0;
157   - right:0;
158   - padding:0;
159   - margin: 0;
160   - }
161   -
162   - .file_upload {
163   - position: absolute;
164   - right:14px;
165   - top:7px;
166   - }
167   -
168   - div.attachments {
169   - position:relative;
170   - width: 350px;
171   - height: 36px;
172   - overflow:hidden;
173   - margin:0 0 5px !important;
174   - }
175   - .file_name {
176   - line-height:30px;
177   - width:240px;
178   - height:28px;
179   - overflow:hidden;
180   - }
181   -}
app/assets/stylesheets/sections/header.scss 0 → 100644
... ... @@ -0,0 +1,228 @@
  1 +/*
  2 + * Application Header
  3 + *
  4 + */
  5 +header {
  6 + width:100%;
  7 + padding:0;
  8 + margin:0;
  9 + top:1px;
  10 + left:0;
  11 + background: #F1F1F1; /* for non-css3 browsers */
  12 + border-bottom: 1px solid #ccc;
  13 + box-shadow: 0 -1px 0 white inset;
  14 + -moz-box-shadow: 0 -1px 0 white inset;
  15 + -webkit-box-shadow: 0 -1px 0 white inset;
  16 + z-index:10;
  17 + height:60px;
  18 +
  19 + /**
  20 + *
  21 + * Logo holder
  22 + *
  23 + */
  24 + .app_logo {
  25 + width:230px;
  26 + float:left;
  27 + position:relative;
  28 + top:-5px;
  29 +
  30 + a {
  31 + float:left;
  32 +
  33 + h1 {
  34 + text-indent:-9999px;
  35 + width:102px;
  36 + background: url('logo_text.png') no-repeat 0px -3px;
  37 + float:left;
  38 + margin-left:5px;
  39 + font-size:20px;
  40 + line-height:36px;
  41 + font-weight:bold;
  42 + color:#aaa;
  43 + text-shadow: 0 1px 1px #FFF;
  44 + padding-left:50px;
  45 + }
  46 + }
  47 + .separator {
  48 + margin-left:20px;
  49 + float: left;
  50 + height: 60px;
  51 + width: 1px;
  52 + background: white;
  53 + border-left: 1px solid #DDD;
  54 + margin-top: -10px;
  55 + }
  56 + }
  57 + .container {
  58 + .top_panel_content {
  59 + margin:auto;
  60 + position:relative;
  61 + padding:15px 0;
  62 + }
  63 + }
  64 +
  65 + /**
  66 + *
  67 + * Project / Area name
  68 + *
  69 + */
  70 + .project_name {
  71 + float:left;
  72 + margin:0;
  73 + margin-right:30px;
  74 + font-size:24px;
  75 + line-height:36px;
  76 + font-weight:500;
  77 + color:$style_color;
  78 + text-shadow: 0 1px 1px #FFF;
  79 + }
  80 +
  81 + .fbtn {
  82 + float: right;
  83 + margin-right:10px;
  84 + .btn {
  85 + margin-left:7px;
  86 + background: #F1F1F1;
  87 + border: 1px solid #CCC;
  88 + }
  89 + }
  90 +
  91 +
  92 + /**
  93 + *
  94 + * Search box
  95 + *
  96 + */
  97 + .search {
  98 + float: right;
  99 + margin-right: 50px;
  100 +
  101 + .search-input {
  102 + @extend .span2;
  103 + background-image: url("icon-search.png");
  104 + background-repeat: no-repeat;
  105 + background-position: 10px;
  106 + padding-left:25px;
  107 + @include border-radius(5px);
  108 + border:1px solid #ccc;
  109 + }
  110 + }
  111 +
  112 + /**
  113 + *
  114 + * Account box
  115 + *
  116 + */
  117 + .account-box {
  118 + position: absolute;
  119 + right: 0;
  120 + top: 13px;
  121 + z-index: 10000;
  122 + width: 128px;
  123 + font-size: 11px;
  124 + float: right;
  125 + display: block;
  126 + cursor: pointer;
  127 + img {
  128 + border-radius: 4px;
  129 + right: 5px;
  130 + position: absolute;
  131 + width: 31px;
  132 + height: 31px;
  133 + display: block;
  134 + top: 0;
  135 + &:after {
  136 + content: " ";
  137 + display: block;
  138 + position: absolute;
  139 + top: 0;
  140 + right: 0;
  141 + left: 0;
  142 + bottom: 0;
  143 + float: right;
  144 + border-radius: 5px;
  145 + border: 1px solid rgba(255, 255, 255, 0.1);
  146 + border-bottom: 0;
  147 + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
  148 + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  149 + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  150 + -webkit-background-origin: border-box;
  151 + -moz-background-origin: border;
  152 + background-origin: border-box; } } }
  153 +
  154 + .account-box {
  155 + &.hover {
  156 + height: 138px; }
  157 + &:hover > .account-links {
  158 + display: block; } }
  159 +
  160 + .account-links {
  161 + background: #79C3E0;
  162 + display: none;
  163 + border-radius: 5px;
  164 + width: 100px;
  165 + margin-top: 0;
  166 + float: right;
  167 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  168 + position: relative;
  169 + &:before {
  170 + content: ".";
  171 + width: 0;
  172 + height: 0;
  173 + position: absolute;
  174 + border: 5px solid transparent;
  175 + border-color: rgba(255, 255, 255, 0);
  176 + border-bottom-color: #333;
  177 + text-indent: -9999px;
  178 + top: -10px;
  179 + line-height: 0;
  180 + right: 10px;
  181 + z-index: 10; }
  182 + background: #333;
  183 + display: none;
  184 + z-index: 100000;
  185 + border-radius: 5px;
  186 + width: 100px;
  187 + position: absolute;
  188 + right: 10px;
  189 + top: 46px;
  190 + margin-top: 0;
  191 + float: right;
  192 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  193 + a {
  194 + color: #EEE;
  195 + padding: 6px 10px;
  196 + display: block;
  197 + text-shadow: none;
  198 + border-bottom: 1px solid #555;
  199 + &:hover {
  200 + color:#eee;
  201 + background: #444;
  202 + }
  203 + }
  204 + }
  205 +
  206 + .account-box.hover .arrow-up {
  207 + top: 41px;
  208 + right: 6px;
  209 + position: absolute; }
  210 +
  211 + .account-links a {
  212 + &:first-child {
  213 + -webkit-border-top-left-radius: 5px;
  214 + -webkit-border-top-right-radius: 5px;
  215 + -moz-border-radius-topleft: 5px;
  216 + -moz-border-radius-topright: 5px;
  217 + border-top-left-radius: 5px;
  218 + border-top-right-radius: 5px; }
  219 + &:last-child {
  220 + -webkit-border-bottom-right-radius: 5px;
  221 + -webkit-border-bottom-left-radius: 5px;
  222 + -moz-border-radius-bottomright: 5px;
  223 + -moz-border-radius-bottomleft: 5px;
  224 + border-bottom-right-radius: 5px;
  225 + border-bottom-left-radius: 5px;
  226 + border-bottom: 0; } }
  227 +}
  228 +
... ...
app/assets/stylesheets/sections/login.scss 0 → 100644
... ... @@ -0,0 +1,43 @@
  1 +/* Login Page */
  2 +body.login-page{
  3 + padding-top: 10%;
  4 + background:#f1f1f1;
  5 +}
  6 +
  7 +.login-box{
  8 + width: 304px;
  9 + position: relative;
  10 + border-radius: 5px;
  11 + margin: auto;
  12 + padding: 20px;
  13 + background: white;
  14 +}
  15 +
  16 +.login-box .login-logo{
  17 + margin: 10px 0 30px 0;
  18 + display: block;
  19 +}
  20 +
  21 +.login-box input.text{background-color: #f1f1f1; font-size: 16px; border-radius: 0; padding: 14px 10px; width: 280px}
  22 +
  23 +.login-box input.text.top{
  24 + -webkit-border-top-left-radius: 5px;
  25 + -webkit-border-top-right-radius: 5px;
  26 + -moz-border-radius-topleft: 5px;
  27 + -moz-border-radius-topright: 5px;
  28 + border-top-left-radius: 5px;
  29 + border-top-right-radius: 5px;
  30 +}
  31 +
  32 +.login-box input.text.bottom{
  33 + -webkit-border-bottom-right-radius: 5px;
  34 + -webkit-border-bottom-left-radius: 5px;
  35 + -moz-border-radius-bottomright: 5px;
  36 + -moz-border-radius-bottomleft: 5px;
  37 + border-bottom-right-radius: 5px;
  38 + border-bottom-left-radius: 5px;
  39 + border-top: 0;
  40 + margin-bottom: 20px;
  41 +}
  42 +
  43 +.login-box a.forgot{float: right; padding-top: 6px}
... ...
app/assets/stylesheets/sections/nav.scss 0 → 100644
... ... @@ -0,0 +1,98 @@
  1 +/*
  2 + * Main Menu of Application
  3 + *
  4 + */
  5 +ul.main_menu {
  6 + border-radius: 4px;
  7 + margin: auto;
  8 + margin:30px 0;
  9 + background:#eee;
  10 + border:1px solid #bbb;
  11 + height:37px;
  12 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  13 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  14 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  15 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  16 + position:relative;
  17 + @include shade;
  18 + .count {
  19 + position: relative;
  20 + top: -1px;
  21 + display: inline-block;
  22 + height: 15px;
  23 + margin: 0 0 0 5px;
  24 + padding: 0 8px 1px 8px;
  25 + height: auto;
  26 + font-size: 0.82em;
  27 + line-height: 14px;
  28 + text-align: center;
  29 + color: #777;
  30 + background: #f2f2f2;
  31 + border-top: 1px solid #CCC;
  32 + border-radius: 8px;
  33 + -moz-border-radius: 8px;
  34 + }
  35 + .label {
  36 + background:$hover;
  37 + text-shadow:none;
  38 + color:$style_color;
  39 + }
  40 + li {
  41 + list-style-type: none;
  42 + margin: 0;
  43 + display: table-cell;
  44 + width: 1%;
  45 + border-right: 1px solid #DDD;
  46 + border-left: 1px solid #EEE;
  47 + border-bottom:2px solid #CFCFCF;
  48 +
  49 + &:first-child{
  50 + -webkit-border-top-left-radius: 4px;
  51 + -webkit-border-bottom-left-radius: 4px;
  52 + -moz-border-radius-topleft: 4px;
  53 + -moz-border-radius-bottomleft: 4px;
  54 + border-top-left-radius: 4px;
  55 + border-bottom-left-radius: 4px;
  56 + border-left: 0;
  57 + }
  58 +
  59 + &.current {
  60 + background-color:#D5D5D5;
  61 + border-bottom: 2px solid $style_color;
  62 + border-right: 1px solid #BBB;
  63 + border-left: 1px solid #BBB;
  64 + border-radius: 0 0 1px 1px;
  65 + &:first-child{
  66 + border-bottom:none;
  67 + border-left:none;
  68 + }
  69 + }
  70 +
  71 + &.home {
  72 + a {
  73 + background: url(home_icon.PNG) no-repeat center center;
  74 + text-indent:-9999px;
  75 + min-width:20px;
  76 + img {
  77 + position:relative;
  78 + top:4px;
  79 + }
  80 + }
  81 + }
  82 + }
  83 + a {
  84 + display: block;
  85 + text-align: center;
  86 + font-weight:bold;
  87 + height:35px;
  88 + line-height:36px;
  89 + color: $style_color;
  90 + text-shadow:0 1px 1px white;
  91 +
  92 + }
  93 +}
  94 +/*
  95 + * End of Main Menu
  96 + *
  97 + */
  98 +
... ...
app/assets/stylesheets/sections/notes.scss 0 → 100644
... ... @@ -0,0 +1,191 @@
  1 +/**
  2 + * Notes
  3 + *
  4 + */
  5 +#notes-list,
  6 +#new_notes_list {
  7 + display:block;
  8 + list-style:none;
  9 + margin:0px;
  10 + padding:0px;
  11 +}
  12 +
  13 +#new_notes_list li:last-child{
  14 + border-bottom:1px solid #aaa;
  15 +}
  16 +
  17 +.issue_notes,
  18 +.wiki_notes {
  19 + .note_content {
  20 + float:left;
  21 + width:400px;
  22 + }
  23 +}
  24 +
  25 +/* Note textare */
  26 +#note_note {
  27 + height:80px;
  28 + width:99%;
  29 + font-size:14px;
  30 +}
  31 +
  32 +#new_note {
  33 + #note_note {
  34 + height:25px;
  35 + }
  36 + .attach_holder {
  37 + display:none;
  38 + }
  39 +}
  40 +
  41 +.note {
  42 + padding: 8px 0;
  43 + border-bottom: 1px solid #eee;
  44 + overflow: hidden;
  45 + display: block;
  46 + img {float: left; margin-right: 10px;}
  47 + .note-author cite{font-style: italic;}
  48 + p { color:$style_color; }
  49 + .note-author { color: $style_color;}
  50 +
  51 + .note-title { margin-left:50px; padding-top: 5px;}
  52 + .avatar {
  53 + margin-top:3px;
  54 + }
  55 +
  56 + .delete-note {
  57 + display:none;
  58 + float:right;
  59 + }
  60 +
  61 + &:hover {
  62 + .delete-note { display:block; }
  63 + }
  64 +}
  65 +
  66 +
  67 +p.notify_controls input{
  68 + margin: 5px;
  69 +}
  70 +
  71 +p.notify_controls span{
  72 + font-weight: 700;
  73 +}
  74 +
  75 +tr.line_notes_row {
  76 + border-bottom:1px solid #DDD;
  77 + border-left: 7px solid #2A79A3;
  78 +
  79 + &.reply {
  80 + background:#eee;
  81 + border-left: 7px solid #2A79A3;
  82 + border-top:1px solid #ddd;
  83 + td {
  84 + padding:7px 10px;
  85 + }
  86 + a.line_note_reply_link {
  87 + @include round-borders-all(4px);
  88 + padding: 3px 10px;
  89 + margin-left:5px;
  90 + color: white;
  91 + background: #2A79A3;
  92 + border-color: #2A79A3;
  93 + }
  94 + }
  95 + ul {
  96 + margin:0;
  97 + li {
  98 + padding:0;
  99 + border:none;
  100 + }
  101 + }
  102 +}
  103 +
  104 +.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  105 +
  106 +.per_line_form {
  107 + background:#f5f5f5;
  108 + border-top:1px solid #eee;
  109 + form { margin: 0; }
  110 + td {
  111 + border-bottom:1px solid #ddd;
  112 + }
  113 + .note_actions {
  114 + margin:0;
  115 + padding-top: 10px;
  116 +
  117 + .buttons {
  118 + float:left;
  119 + width:300px;
  120 + }
  121 + .options {
  122 + .labels {
  123 + float:left;
  124 + padding-left:10px;
  125 + label {
  126 + padding: 6px 0;
  127 + margin: 0;
  128 + width:120px;
  129 + }
  130 + }
  131 + }
  132 + }
  133 +}
  134 +
  135 +td .line_note_link {
  136 + position:absolute;
  137 + margin-left:-70px;
  138 + margin-top:-10px;
  139 + z-index:10;
  140 + background: url("comment_add.png") no-repeat left 0;
  141 + width:32px;
  142 + height:32px;
  143 +
  144 + opacity: 0.0;
  145 + filter: alpha(opacity=0);
  146 +
  147 + &:hover {
  148 + opacity: 1.0;
  149 + filter: alpha(opacity=100);
  150 + }
  151 +}
  152 +
  153 +.diff_file_content tr.line_holder:hover > td { background: $hover !important; }
  154 +.diff_file_content tr.line_holder:hover > td .line_note_link {
  155 + opacity: 1.0;
  156 + filter: alpha(opacity=100);
  157 +}
  158 +
  159 +.new_note {
  160 + .input-file {
  161 + font: 500px monospace;
  162 + opacity:0;
  163 + filter: alpha(opacity=0);
  164 + position: absolute;
  165 + z-index: 1;
  166 + top:0;
  167 + right:0;
  168 + padding:0;
  169 + margin: 0;
  170 + }
  171 +
  172 + .file_upload {
  173 + position: absolute;
  174 + right:14px;
  175 + top:7px;
  176 + }
  177 +
  178 + div.attachments {
  179 + position:relative;
  180 + width: 350px;
  181 + height: 36px;
  182 + overflow:hidden;
  183 + margin:0 0 5px !important;
  184 + }
  185 + .file_name {
  186 + line-height:30px;
  187 + width:240px;
  188 + height:28px;
  189 + overflow:hidden;
  190 + }
  191 +}
... ...
app/views/notes/_show.html.haml
1 1 %li{:id => dom_id(note), :class => "note"}
2   - = image_tag gravatar_icon(note.author.email), :class => "left", :width => 40, :style => "padding-right:5px;"
  2 + = image_tag gravatar_icon(note.author.email), :class => "avatar"
3 3 %div.note-author
4 4 %strong= note.author_name
5 5 = link_to "##{dom_id(note)}", name: dom_id(note) do
... ... @@ -7,7 +7,9 @@
7 7 = time_ago_in_words(note.updated_at)
8 8 ago
9 9 - if(note.author_id == current_user.id) || can?(current_user, :admin_note, @project)
10   - %strong= link_to "Remove", [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn small"
  10 + = link_to [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn very_small" do
  11 + %i.icon-trash
  12 + Remove
11 13  
12 14 %div.note-title
13 15 = preserve do
... ...