Conjunto de mudanças 6746 no repositório publico
- Timestamp:
- 03/09/2012 16:54:21 (10 anos atrás)
- 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 } 1 22 2 23 .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 } 2 31 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 6 76 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 { 10 235 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 236 } 21 237 } 238 239 .il-tabs > div > br { 240 clear: both; 241 }
Note: Veja
TracChangeset
para ajuda no uso do visualizador de conjunto de mudanças.