source: publico/PortalInterlegis/produtos/il.portalinterlegis/trunk/src/il/portalinterlegis/sass/_tabs.scss @ 6746

Última Alteração nesse arquivo desde 6746 foi 6746, incluída por marcospaulosp10, 8 anos atrás

retornado _tabs.scss de 6628b172034 (alterado por engano)

File size: 6.1 KB
Linha 
1// based on http://css-tricks.com/tabs-with-round-out-borders/
2
3// XXX: nao consigo avaliar uma variavel de nome dinamico
4// @mixin bg-tab-color($tab) {
5//     background: '$color-' + $tab;
6// }
7
8.il-tabs > ul {
9    list-style: none;
10    padding: 0 10px;
11
12    // correspondent to the original "group" class from the article
13    &:before, &:after {
14        content: "";
15        display: table;
16    }
17    &:after {
18        clear: both;
19    }
20    zoom: 1;
21
22    li {
23        // Makes a horizontal row
24        float: left;
25
26        // So the pseudo elements can be abs. positioned inside
27        position: relative;
28
29        @include header-font;
30    }
31    a {
32        // Make them block level and only as wide as they need
33        float: left;
34        padding: 8px 0 8px 20px;
35        text-align: left;
36        width: 230px - 20px;
37
38        // Default text color
39        color: white;
40
41        // Only round the top corners
42        -webkit-border-top-left-radius: 15px;
43        -webkit-border-top-right-radius: 15px;
44        -moz-border-radius-topleft: 15px;
45        -moz-border-radius-topright: 15px;
46        border-top-left-radius: 15px;
47        border-top-right-radius: 15px;
48    }
49
50    // XXX: nao consigo avaliar uma variavel de nome dinamico
51    // $tabs: informacao, capacitacao, tecnologia, comunicacao;
52    // @each $tab in $tabs {
53    //     > .tab-#{$tab} a, .active.tab-#{$tab} a {
54    //         @include bg-tab-color($tab);
55    //     }
56    // }
57
58    .active {
59        // Active tab is on top
60        z-index: 3;
61    }
62    .tab-informacao a, .active.tab-informacao a {
63        background: $color-informacao;
64    }
65    .tab-capacitacao a, .active.tab-capacitacao a {
66        background: $color-capacitacao;
67    }
68    .tab-tecnologia a, .active.tab-tecnologia a {
69        background: $color-tecnologia;
70    }
71    .tab-comunicacao a, .active.tab-comunicacao a {
72        background: $color-comunicacao;
73    }
74    li:before, li:after, li a:before, li a:after {
75        // All pseudo elements are abs. positioned and on bottom
76        bottom: 0;
77        position: absolute;
78    }
79    // Only the first, last, and active tabs need pseudo elements at all
80    li:last-child:after, li:last-child a:after,
81    li:first-child:before, li:first-child a:before,
82    .active:after, .active:before,
83    .active a:after, .active a:before {
84        content: "";
85    }
86    .active:before, .active:after {
87        // Squares below circles
88        z-index: 1;
89    }
90    .active.tab-informacao:before, .active.tab-informacao:after {
91        background: $color-informacao;
92    }
93    .active.tab-capacitacao:before, .active-tab-capacitacao:after {
94        background: $color-capacitacao;
95    }
96    .active.tab-tecnologia:before, .active-tab-tecnologia:after {
97        background: $color-tecnologia;
98    }
99    .active.tab-comunicacao:before, .active-tab-comunicacao:after {
100        background: $color-comunicacao;
101    }
102    // Squares
103    li:before, li:after {
104        height: 10px;
105        width: 10px;
106    }
107    li.tab-informacao:before {
108        background: $color-informacao;
109    }
110    li.tab-capacitacao:after {
111        background: $color-capacitacao;
112    }
113    li.tab-tecnologia:after {
114        background: $color-tecnologia;
115    }
116    li.tab-comunicacao:after {
117        background: $color-comunicacao;
118    }
119    li:before {
120        left: -10px;
121    }
122    li:after {
123        right: -10px;
124    }
125    // Circles
126    li a:after, li a:before {
127        height: 20px;
128        width: 20px;
129        // Circles are circular
130        -webkit-border-radius: 10px;
131        -moz-border-radius:    10px;
132        border-radius:         10px;
133        background: #fff;
134        // Circles over squares
135        z-index: 2;
136    }
137    .active.tab-informacao a:after {
138        background: $color-capacitacao;
139    }
140    .active.tab-capacitacao a:before {
141        background: $color-informacao;
142    }
143    .active.tab-capacitacao a:after {
144        background: $color-tecnologia;
145    }
146    .active.tab-tecnologia a:before {
147        background: $color-capacitacao;
148    }
149    .active.tab-tecnologia a:after {
150        background: $color-comunicacao;
151    }
152    .active.tab-comunicacao a:before {
153        background: $color-tecnologia;
154    }
155    // First and last tabs have different outside color needs
156    li:first-child.active a:before,
157    li:last-child.active a:after {
158        background: #fff;
159    }
160    li a:before {
161        left: -20px;
162    }
163    li a:after {
164        right: -20px;
165    }
166}
167
168// XXX: sombra retirada temporariamente. Retornar quando a funcionalidade estiver completa.
169// $shadow: 0 -4px 2px -2px rgba(0, 0, 0, 0.3);
170$shadow: 0;
171
172.il-tabs {
173    > div {
174        border: 8px solid transparent;
175        -moz-box-shadow: $shadow;
176        -webkit-box-shadow: $shadow;
177        box-shadow: $shadow;
178        min-height: 200px;
179        position: relative;
180    }
181    > div > div {
182        background: url("../images/icons/rss-big.png") no-repeat center left;
183        font-weight: normal;
184        margin: 0 10px;
185    }
186    > div > div > h2 {
187        margin: 15px 0;
188        padding-left: 35px;
189        text-transform: uppercase;
190    }
191    .related {
192        p {
193            margin-top: 10px;
194            color:#000000;
195            font-size: 8pt;
196            line-height: 150%;
197        }
198        h3 {
199                color:#dd9b3c;
200                font-weight: normal;
201                margin-top: 10px;
202                line-height: 120%;
203            b {
204                color: #9e6305;
205                font-weight: normal;
206            }
207        }
208    }
209
210    > div.tab-informacao {
211        border-color: $color-informacao;
212        div > h2 {
213           color: darken($color-informacao, 20);
214        }
215    }
216    > div.tab-capacitacao {
217        border-color: $color-capacitacao;
218        div > h2 {
219           color: darken($color-capacitacao, 20);
220        }
221    }
222    > div.tab-tecnologia {
223        border-color: $color-tecnologia;
224        div > h2 {
225           color: darken($color-tecnologia, 20);
226        }
227    }
228    > div.tab-comunicacao {
229        border-color: $color-comunicacao;
230        div > h2 {
231           color: darken($color-comunicacao, 20);
232        }
233    }
234    .row {
235        padding-bottom: 10px;
236    }
237}
238
239.il-tabs > div > br {
240    clear: both;
241}
Note: Veja TracBrowser para ajuda no uso do navegador do trac.
 

The contents and data of this website are published under license:
Creative Commons 4.0 Brasil - Atribuir Fonte - Compartilhar Igual.