1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
//
// An UL,LI menu that looks like a cutout and is positioned at the bottom
// of the enclosing block.
//
// This mixin is applied to the enclosing block.
//
// the markup should look like this:
//
// enclosing-block
// ul#id
// li.tab
// a.tab
// li.tab
// a.tab
//
// the id for the ul is passed in as the first argument.
//
// it is difficult to create cutout tabs with a border that look good
// in all browsers and at different client font-sizes.
//
// the problem is that the tab element needs to line up exactly with the
// bottom of the enclosing block in order to make the cutout illusion work.
// most methods of doing this create weird jitters in webkit
// and gecko when resizing the screen or changing the font size. it does not
// look so good to have a dark line under your tab, breaking the illusion of
// a cutout.
//
// the method which makes this jitter-free is to use a height and a line-height
// for the <a> tag instead of vertical padding. This requires that <a> is a block
// which requires that the <li> is block & floated, instead of inline.
//
// This method seems to produce by far the most consistant results of letting
// the active tab sit snugly on the bottom of the enclosing div.
//
// Change with caution: I spent way too much time getting this to work.
//
@mixin cutout-menu(
$ul-id,
$active-bg: white,
$left-indent: 10px,
$padding: 7px 14px,
$text-size: 14px,
$small-left-indent: 10px,
$small-padding: 5px 10px,
$small-text-size: 12px,
$small-screen: $small-sm-max) {
$border: false;
// allows us to put the menu at the bottom
position: relative;
ul##{$ul-id} {
margin: 0;
padding: 0;
// allows us to put the menu at the bottom
position: absolute;
// puts the menu at the bottom of the enclosing block,
// minus the overhand needed to cover the border:
// bottom: -(border_width($border));
bottom: -1px;
// padding-left: don't do it.
// ^^ In some cases, we need width of 100% to actually be the screen width,
// but adding padding makes 100% width be wider than the screen.
// So, instead, we add margin to the first and last li.
white-space: nowrap;
li.tab {
display: block;
float: left;
&.first {
margin-left: $left-indent;
@media (max-width: $small-screen) {
margin-left: $small-left-indent;
}
}
a.tab {
display: block;
padding: $padding;
@media (max-width: $small-screen) {
padding: $small-padding;
}
// line-height makes for much more consistant rendering than using vertical
// padding. essential to prevent tabs from looking horrible at different fonts sizes.
font-size: $text-size;
line-height: $text-size;
@media (max-width: $small-screen) {
font-size: $small-text-size;
line-height: $small-text-size;
}
// the transparent border is needed to prevent the menu from jittering
// when the active border is applied.
border: 1px solid transparent;
border-bottom: 0;
&.active {
background-color: $active-bg;
@if $border {
border: $border;
border-bottom: 0;
}
}
}
}
}
}
|
