Use triangle for current tab highlight

Dmitriy Zaporozhets
1 parent f15e8a0c
Showing 1 changed file with 16 additions and 4 deletions Show diff stats
app/assets/stylesheets/sections/nav.scss
@@ -6,9 +6,7 @@
  
   ul {
     margin: auto;
-    height: 41px;
-    position: relative;
-    top: 3px;
+    height: 42px;
     overflow: hidden;
     .count {
       font-weight: normal;
@@ -34,10 +32,23 @@
       display: table-cell;
       width: 1%;
       &.active {
-        border-bottom: 3px solid #777;
         a {
           color: $style_color;
           font-weight: bolder;
+
+          &:after {
+            content: '';
+            display: block;
+            position: relative;
+            bottom: 8px;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-color: transparent transparent #777 transparent;
+            border-style: solid;
+            border-width: 6px;
+            margin-left: -6px;
+          }
         }
       }
  
@@ -67,6 +78,7 @@
       text-shadow: 0 1px 1px white;
       padding: 0 10px;
       text-decoration: none;
+      padding-top: 4px;
     }
   }
 }
...	...	@@ -6,9 +6,7 @@
6	6
7	7	ul {
8	8	margin: auto;
9		- height: 41px;
10		- position: relative;
11		- top: 3px;
	9	+ height: 42px;
12	10	overflow: hidden;
13	11	.count {
14	12	font-weight: normal;
...	...	@@ -34,10 +32,23 @@
34	32	display: table-cell;
35	33	width: 1%;
36	34	&.active {
37		- border-bottom: 3px solid #777;
38	35	a {
39	36	color: $style_color;
40	37	font-weight: bolder;
	38	+
	39	+ &:after {
	40	+ content: '';
	41	+ display: block;
	42	+ position: relative;
	43	+ bottom: 8px;
	44	+ left: 50%;
	45	+ width: 0;
	46	+ height: 0;
	47	+ border-color: transparent transparent #777 transparent;
	48	+ border-style: solid;
	49	+ border-width: 6px;
	50	+ margin-left: -6px;
	51	+ }
41	52	}
42	53	}
43	54
...	...	@@ -67,6 +78,7 @@
67	78	text-shadow: 0 1px 1px white;
68	79	padding: 0 10px;
69	80	text-decoration: none;
	81	+ padding-top: 4px;
70	82	}
71	83	}
72	84	}
...	...