Project

General

Profile

Download (2.28 KB) Statistics
| Branch: | Tag: | Revision:
1
/**
2
 * @file
3
 * Tabs Styling
4
 *
5
 * Adds styles for the primary and secondary tabs.
6
 *
7
 * Compare this with default CSS found in the system module's stylesheet (a copy
8
 * of which is in drupal7-reference.css.)
9
 */
10

    
11
@import "base";
12

    
13

    
14
// Some variables to make altering the styling easier.
15
$tabs-container-bg: #fff;
16
$tabs-border: #bbb;
17

    
18

    
19
/*
20
 * Basic positioning styles shared by primary and secondary tabs.
21
 */
22

    
23
ul.primary,
24
ul.secondary {
25
  @include clearfix;
26
  border-bottom: 1px solid $tabs-border;
27
  list-style: none;
28
  margin: 1em 0 1.5em;
29
  padding: 0 2px;
30
  white-space: nowrap;
31

    
32
  li {
33
    float: left; /* LTR */
34
    margin: 0.5em 3px 0;
35
  }
36

    
37
  a {
38
    border: 1px solid #e9e9e9;
39
    border-right: 0;
40
    border-bottom: 0;
41
    display: block;
42
    line-height: 1.5em;
43
    text-decoration: none;
44
  }
45
}
46

    
47
/*
48
 * Primary tabs
49
 */
50

    
51
ul.primary {
52
  li {
53
    @include border-top-radius(4px);
54
    @include single-text-shadow(#fff, 1px, 1px, 0);
55
    border: 1px solid $tabs-border;
56
    border-bottom: 0;
57
    margin: 0.5em 0 0 3px; /* LTR */
58
  }
59
  li.active {
60
    border-bottom: 1px solid $tabs-container-bg;
61
    margin-bottom: -1px; /* Overlap the ul's border. */
62
  }
63

    
64
  a:link,
65
  a:visited {
66
    @include border-top-radius(4px);
67
    @include transition(background-color 0.3s);
68
    color: #333;
69
    background-color: #dedede;
70
    letter-spacing: 1px;
71
    padding: 0 1em;
72
    text-align: center;
73
  }
74
  a:hover,
75
  a:focus {
76
    background-color: #e9e9e9;
77
    border-color: #f2f2f2;
78
  }
79
  a.active {
80
    background-color: transparent;
81
    @include filter-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0));
82
    @include background-image(linear-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0)));
83
    border-color: #fff;
84
  }
85
}
86

    
87
/*
88
 * Secondary tabs
89
 */
90

    
91
ul.secondary {
92
  font-size: .9em;
93
  margin-top: -1.5em; /* Collapse bottom margin of ul.primary. */
94
  padding-bottom: .5em;
95

    
96
  a:link,
97
  a:visited {
98
    @include border-radius(.75em);
99
    @include transition(background-color 0.3s);
100
    @include single-text-shadow(#fff, 1px, 1px, 0);
101
    background-color: #f2f2f2;
102
    color: #666;
103
    padding: 0 .5em;
104
  }
105
  a:hover,
106
  a:focus {
107
    background-color: #dedede;
108
    border-color: #999;
109
    color: #333;
110
  }
111
  a.active,
112
  a:active {
113
    @include single-text-shadow(#333, 1px, 1px, 0);
114
    background-color: #666;
115
    border-color: #000;
116
    color: #fff;
117
  }
118
}
(18-18/20)