Conjunto de mudanças 6746 no repositório publico


Ignorar:
Timestamp:
03/09/2012 16:54:21 (6 anos atrás)
Autor:
marcospaulosp10
Mensagem:

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

Localização:
PortalInterlegis/produtos/il.portalinterlegis/trunk/src/il/portalinterlegis/sass
Arquivos:
2 editados

Legenda:

Não Modificado
Adicionado
Removido
  • PortalInterlegis/produtos/il.portalinterlegis/trunk/src/il/portalinterlegis/sass/_pml.scss

    r6699 r6746  
     1.pml {
     2    a {
     3        font-size: 8pt;
     4    }
     5    .saiba-mais {
     6        bottom: 0;
     7        float: left;
     8        left: 0;
     9        padding-left: 10px;
     10        padding-bottom: 10px;
     11        position: absolute;
     12    }
     13    .faq {
     14        bottom: 0;
     15        float: right;
     16        padding-right: 10px;
     17        padding-bottom: 10px;
     18        position: absolute;
     19        right: 0;
     20    }
     21}
    122
    223.products-services-container {
  • PortalInterlegis/produtos/il.portalinterlegis/trunk/src/il/portalinterlegis/sass/_tabs.scss

    r6704 r6746  
    1 .pml {
     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    }
    231    a {
    3         font-size: 8pt;
    4     }
    5     .saiba-mais {
     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
    676        bottom: 0;
    7         float: left;
    8         left: 0;
    9         padding-left: 10px;
     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 {
    10235        padding-bottom: 10px;
    11         position: absolute;
    12     }
    13     .faq {
    14         bottom: 0;
    15         float: right;
    16         padding-right: 10px;
    17         padding-bottom: 10px;
    18         position: absolute;
    19         right: 0;
    20236    }
    21237}
     238
     239.il-tabs > div > br {
     240    clear: both;
     241}
Note: Veja TracChangeset para ajuda no uso do visualizador de conjunto de mudanças.
 

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