Use class instead id for css styles

Dmitriy Zaporozhets
1 parent 69751aac
Showing 4 changed files with 12 additions and 23 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/lists.scss
app/assets/stylesheets/sections/tree.scss
app/views/tree/_tree.html.haml
app/views/tree/show.html.haml
@@ -13,7 +13,10 @@ ul {
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  
     &.smoke { background-color:#f5f5f5; }
-    &:hover { background:$hover; }
+    &:hover {
+      background:$hover;
+      border-bottom:1px solid #ADF;
+    }
     &:last-child { border:none }
     .author { color: #999; }
  
-#tree-holder {
-  #tree-content-holder {
+.tree-holder {
+  .tree-content-holder {
     float:left;
     width:100%;
   }
-  #tree-readme-holder {
-    float:left;
-    width:100%;
-    .readme {
-      border:1px solid #ccc;
-      padding:12px;
-      background: #F7F7F7;
-
-      pre {
-        overflow: auto;
-      }
-    }
-  }
  
   .tree_progress {
     display:none;
@@ -25,7 +12,7 @@
     }
   }
  
-  #tree-slider {
+  .tree-table {
     @include border-radius(0);
     .tree-item {
       &:hover {
@@ -55,8 +42,7 @@
     }
   }
  
-
-  #tree-slider {
+  .tree-table {
     td {
       background:#fafafa;
     }
@@ -72,5 +58,4 @@
       text-decoration: underline;
     }
   }
-
 }
@@ -8,12 +8,12 @@
     %li= link
 .clear
 %div.tree_progress
-#tree-content-holder
+%div#tree-content-holder.tree-content-holder
   - if tree.is_blob?
     = render partial: "tree/tree_file", locals: { name: tree.name, content: tree.data, file: tree }
   - else
     - contents = tree.contents
-    %table#tree-slider{class: "table_#{@hex_path}" }
+    %table#tree-slider{class: "table_#{@hex_path} tree-table" }
       %thead
         %th Name
         %th Last Update
 = render "head"
-#tree-holder= render partial: "tree", locals: {commit: @commit, tree: @tree}
+%div#tree-holder.tree-holder
+  = render "tree", commit: @commit, tree: @tree
  
 :javascript
   $(function() {
...	...	@@ -13,7 +13,10 @@ ul {
13	13	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
14	14
15	15	&.smoke { background-color:#f5f5f5; }
16		- &:hover { background:$hover; }
	16	+ &:hover {
	17	+ background:$hover;
	18	+ border-bottom:1px solid #ADF;
	19	+ }
17	20	&:last-child { border:none }
18	21	.author { color: #999; }
19	22
...	...
1		-#tree-holder {
2		- #tree-content-holder {
	1	+.tree-holder {
	2	+ .tree-content-holder {
3	3	float:left;
4	4	width:100%;
5	5	}
6		- #tree-readme-holder {
7		- float:left;
8		- width:100%;
9		- .readme {
10		- border:1px solid #ccc;
11		- padding:12px;
12		- background: #F7F7F7;
13		-
14		- pre {
15		- overflow: auto;
16		- }
17		- }
18		- }
19	6
20	7	.tree_progress {
21	8	display:none;
...	...	@@ -25,7 +12,7 @@
25	12	}
26	13	}
27	14
28		- #tree-slider {
	15	+ .tree-table {
29	16	@include border-radius(0);
30	17	.tree-item {
31	18	&:hover {
...	...	@@ -55,8 +42,7 @@
55	42	}
56	43	}
57	44
58		-
59		- #tree-slider {
	45	+ .tree-table {
60	46	td {
61	47	background:#fafafa;
62	48	}
...	...	@@ -72,5 +58,4 @@
72	58	text-decoration: underline;
73	59	}
74	60	}
75		-
76	61	}
...	...
...	...	@@ -8,12 +8,12 @@
8	8	%li= link
9	9	.clear
10	10	%div.tree_progress
11		-#tree-content-holder
	11	+%div#tree-content-holder.tree-content-holder
12	12	- if tree.is_blob?
13	13	= render partial: "tree/tree_file", locals: { name: tree.name, content: tree.data, file: tree }
14	14	- else
15	15	- contents = tree.contents
16		- %table#tree-slider{class: "table_#{@hex_path}" }
	16	+ %table#tree-slider{class: "table_#{@hex_path} tree-table" }
17	17	%thead
18	18	%th Name
19	19	%th Last Update
...	...
1	1	= render "head"
2		-#tree-holder= render partial: "tree", locals: {commit: @commit, tree: @tree}
	2	+%div#tree-holder.tree-holder
	3	+ = render "tree", commit: @commit, tree: @tree
3	4
4	5	:javascript
5	6	$(function() {
...	...