Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | @import '../global/_variables'; // global variables. |
| 2 | @import '../global/components/_mixins'; // global mixings. |
||
| 3 | |||
| 4 | /*** |
||
| 5 | Pricing Table 1 |
||
| 6 | ***/ |
||
| 7 | |||
| 8 | // BEGIN : PRICING 1 |
||
| 9 | |||
| 10 | .pricing-content-1 { |
||
| 11 | @include clearfix(); |
||
| 12 | |||
| 13 | background-color: #fff; |
||
| 14 | |||
| 15 | .arrow-down { |
||
| 16 | width: 0; |
||
| 17 | height: 0; |
||
| 18 | border-left: 15px solid transparent; |
||
| 19 | border-right: 15px solid transparent; |
||
| 20 | border-top: 15px solid; |
||
| 21 | margin:auto; |
||
| 22 | |||
| 23 | &.arrow-blue{ |
||
| 24 | border-top-color: #3598DC; |
||
| 25 | } |
||
| 26 | |||
| 27 | &.arrow-green{ |
||
| 28 | border-top-color: #32C5D2; |
||
| 29 | } |
||
| 30 | |||
| 31 | &.arrow-dark{ |
||
| 32 | border-top-color: #2F353B; |
||
| 33 | } |
||
| 34 | |||
| 35 | &.arrow-grey{ |
||
| 36 | border-top-color: #f7f9fb; |
||
| 37 | } |
||
| 38 | } |
||
| 39 | |||
| 40 | .price-ribbon { |
||
| 41 | position: absolute; |
||
| 42 | top:75px; |
||
| 43 | right:-4px; |
||
| 44 | width: 90px; |
||
| 45 | font-size: 14px; |
||
| 46 | text-transform: uppercase; |
||
| 47 | font-weight: 300; |
||
| 48 | padding: 6px 20px 6px 15px; |
||
| 49 | color: #fff; |
||
| 50 | background-color: #D91E18; |
||
| 51 | text-shadow: 0px 1px 2px #bbb; |
||
| 52 | -webkit-box-shadow: 0px 2px 4px #888; |
||
| 53 | -moz-box-shadow: 0px 2px 4px #888; |
||
| 54 | box-shadow: 0px 2px 4px #888; |
||
| 55 | |||
| 56 | &:after{ |
||
| 57 | content: ' '; |
||
| 58 | position: absolute; |
||
| 59 | width: 0; |
||
| 60 | height: 0; |
||
| 61 | right: 0px; |
||
| 62 | top: 100%; |
||
| 63 | border-width: 5px 10px; |
||
| 64 | border-style: solid; |
||
| 65 | border-color: #64120f transparent transparent #64120f; |
||
| 66 | } |
||
| 67 | |||
| 68 | } |
||
| 69 | |||
| 70 | .pricing-title{ |
||
| 71 | border-bottom:1px solid; |
||
| 72 | border-color:#fff; |
||
| 73 | |||
| 74 | >h1{ |
||
| 75 | margin:20px 0; |
||
| 76 | } |
||
| 77 | } |
||
| 78 | |||
| 79 | .price-column-container{ |
||
| 80 | text-align: center; |
||
| 81 | margin:0; |
||
| 82 | background-color: #fff; |
||
| 83 | |||
| 84 | &.border-active{ |
||
| 85 | border:1px solid #e5e9ee; |
||
| 86 | } |
||
| 87 | |||
| 88 | &:first-child{ |
||
| 89 | margin-left:0; |
||
| 90 | } |
||
| 91 | |||
| 92 | &:last-child{ |
||
| 93 | margin-right: 0; |
||
| 94 | } |
||
| 95 | } |
||
| 96 | |||
| 97 | .price-table-head{ |
||
| 98 | color:#fff; |
||
| 99 | padding:20px 0; |
||
| 100 | |||
| 101 | h2{ |
||
| 102 | font-size: 26px; |
||
| 103 | } |
||
| 104 | |||
| 105 | &.price-1{ |
||
| 106 | background-color: #3598DC; |
||
| 107 | } |
||
| 108 | |||
| 109 | &.price-2{ |
||
| 110 | background-color: #32C5D2; |
||
| 111 | } |
||
| 112 | |||
| 113 | &.price-3{ |
||
| 114 | background-color: #2F353B; |
||
| 115 | } |
||
| 116 | } |
||
| 117 | |||
| 118 | .price-table-pricing{ |
||
| 119 | >h3{ |
||
| 120 | font-size: 60px; |
||
| 121 | position: relative; |
||
| 122 | |||
| 123 | >.price-sign{ |
||
| 124 | font-size:24px; |
||
| 125 | position: absolute; |
||
| 126 | margin-left: -15px; |
||
| 127 | } |
||
| 128 | } |
||
| 129 | |||
| 130 | >p{ |
||
| 131 | margin-top:0; |
||
| 132 | } |
||
| 133 | |||
| 134 | } |
||
| 135 | |||
| 136 | .price-table-content{ |
||
| 137 | background-color: #f7f9fb; |
||
| 138 | color:#5c6d7e; |
||
| 139 | font-weight: 600; |
||
| 140 | font-size: 16px; |
||
| 141 | |||
| 142 | .row{ |
||
| 143 | padding-top:10px; |
||
| 144 | padding-bottom: 10px; |
||
| 145 | |||
| 146 | i{ |
||
| 147 | color:#6cade6; |
||
| 148 | } |
||
| 149 | |||
| 150 | &:first-child{ |
||
| 151 | padding-top:20px; |
||
| 152 | } |
||
| 153 | |||
| 154 | &:last-child{ |
||
| 155 | padding-bottom: 20px; |
||
| 156 | } |
||
| 157 | } |
||
| 158 | } |
||
| 159 | |||
| 160 | .price-table-footer{ |
||
| 161 | padding:20px 0; |
||
| 162 | |||
| 163 | >.price-button{ |
||
| 164 | font-weight: bold; |
||
| 165 | padding:10px 20px; |
||
| 166 | } |
||
| 167 | } |
||
| 168 | } |
||
| 169 | |||
| 170 | // END |
||
| 171 | |||
| 172 | // MOBILE |
||
| 173 | |||
| 174 | @media (max-width: 1024px){ |
||
| 175 | |||
| 176 | .pricing-content-1{ |
||
| 177 | |||
| 178 | .mobile-padding{ |
||
| 179 | padding:0; |
||
| 180 | margin:0; |
||
| 181 | |||
| 182 | > i{ |
||
| 183 | margin-right:5px; |
||
| 184 | } |
||
| 185 | } |
||
| 186 | |||
| 187 | .price-table-content{ |
||
| 188 | padding-left:10px; |
||
| 189 | padding-right:10px; |
||
| 190 | } |
||
| 191 | } |
||
| 192 | } |
||
| 193 | |||
| 194 | @media (max-width: 1024px){ |
||
| 195 | |||
| 196 | .pricing-content-1{ |
||
| 197 | |||
| 198 | .mobile-padding{ |
||
| 199 | padding:0 15px; |
||
| 200 | margin:0 -15px; |
||
| 201 | |||
| 202 | > i{ |
||
| 203 | margin-right:20px; |
||
| 204 | } |
||
| 205 | } |
||
| 206 | |||
| 207 | .price-table-content{ |
||
| 208 | padding-left:15px; |
||
| 209 | padding-right:15px; |
||
| 210 | } |
||
| 211 | } |
||
| 212 | } |
||
| 213 | |||
| 214 | // END : PRICING 1 |
||
| 215 | |||
| 216 | /*** |
||
| 217 | Pricing Table 2 |
||
| 218 | ***/ |
||
| 219 | |||
| 220 | // BEGIN : PRICING 2 |
||
| 221 | |||
| 222 | .pricing-content-2 { |
||
| 223 | background-color: #fff; |
||
| 224 | |||
| 225 | .no-padding { |
||
| 226 | padding:0; |
||
| 227 | } |
||
| 228 | |||
| 229 | .text-left { |
||
| 230 | text-align: left; |
||
| 231 | } |
||
| 232 | |||
| 233 | .text-right{ |
||
| 234 | text-align: right; |
||
| 235 | } |
||
| 236 | |||
| 237 | &.pricing-bg-dark{ |
||
| 238 | background-color: #2F353B; |
||
| 239 | } |
||
| 240 | |||
| 241 | .pricing-title{ |
||
| 242 | border-color:#444; |
||
| 243 | |||
| 244 | > h1 { |
||
| 245 | color: #fff; |
||
| 246 | } |
||
| 247 | } |
||
| 248 | |||
| 249 | .pricing-table-container{ |
||
| 250 | padding-top:40px; |
||
| 251 | padding-bottom:40px; |
||
| 252 | |||
| 253 | .padding-fix{ |
||
| 254 | padding-left:15px; |
||
| 255 | padding-right:15px; |
||
| 256 | } |
||
| 257 | |||
| 258 | .price-column-container{ |
||
| 259 | background-color: #fff; |
||
| 260 | margin:30px 0; |
||
| 261 | padding:60px 0; |
||
| 262 | text-align: center; |
||
| 263 | border-bottom:4px solid #ccc; |
||
| 264 | |||
| 265 | &.border-right{ |
||
| 266 | border-right:1px solid #ccc; |
||
| 267 | } |
||
| 268 | |||
| 269 | &.border-left{ |
||
| 270 | border-left:1px solid #ccc; |
||
| 271 | } |
||
| 272 | |||
| 273 | &.border-top{ |
||
| 274 | border-top:1px solid #ccc; |
||
| 275 | } |
||
| 276 | |||
| 277 | &.featured-price{ |
||
| 278 | margin:0; |
||
| 279 | padding:89px 0; |
||
| 280 | border:1px solid; |
||
| 281 | border-bottom: 4px solid; |
||
| 282 | border-color:#ccc; |
||
| 283 | |||
| 284 | >.price-feature-label{ |
||
| 285 | position: absolute; |
||
| 286 | top: 0; |
||
| 287 | left: 50%; |
||
| 288 | display: inline-block; |
||
| 289 | width: 110px; |
||
| 290 | margin: 0 0 0 -60px; |
||
| 291 | padding: 7px 15px; |
||
| 292 | color: #fff; |
||
| 293 | font-weight: 300; |
||
| 294 | } |
||
| 295 | } |
||
| 296 | |||
| 297 | >.price-table-head{ |
||
| 298 | |||
| 299 | > h2{ |
||
| 300 | letter-spacing: 1px; |
||
| 301 | font-weight:600; |
||
| 302 | font-size:18px; |
||
| 303 | color:#ACB5C3; |
||
| 304 | |||
| 305 | &.opt-pricing-5{ |
||
| 306 | padding:7px 15px; |
||
| 307 | display: inline; |
||
| 308 | margin:0 auto 20px auto; |
||
| 309 | font-size:16px; |
||
| 310 | } |
||
| 311 | } |
||
| 312 | } |
||
| 313 | |||
| 314 | >.price-table-pricing{ |
||
| 315 | >h3{ |
||
| 316 | font-size: 60px; |
||
| 317 | position: relative; |
||
| 318 | font-weight: 600; |
||
| 319 | |||
| 320 | >.price-sign{ |
||
| 321 | font-size:24px; |
||
| 322 | position: absolute; |
||
| 323 | margin-left: -15px; |
||
| 324 | } |
||
| 325 | } |
||
| 326 | |||
| 327 | >p{ |
||
| 328 | margin-top:0; |
||
| 329 | } |
||
| 330 | |||
| 331 | } |
||
| 332 | |||
| 333 | >.price-table-content{ |
||
| 334 | color:#333; |
||
| 335 | font-weight: 300; |
||
| 336 | font-size: 16px; |
||
| 337 | |||
| 338 | .row{ |
||
| 339 | padding-top:20px; |
||
| 340 | padding-bottom: 20px; |
||
| 341 | border-bottom: 1px solid; |
||
| 342 | border-color: #eee; |
||
| 343 | |||
| 344 | &:first-child{ |
||
| 345 | border-top:1px solid; |
||
| 346 | border-color: #eee; |
||
| 347 | } |
||
| 348 | |||
| 349 | } |
||
| 350 | } |
||
| 351 | |||
| 352 | >.price-table-footer{ |
||
| 353 | padding:40px 0 0 0 ; |
||
| 354 | |||
| 355 | >.featured-price{ |
||
| 356 | font-size:20px; |
||
| 357 | font-weight: 300; |
||
| 358 | border-bottom: 3px solid #3FABA4; |
||
| 359 | } |
||
| 360 | |||
| 361 | } |
||
| 362 | |||
| 363 | } |
||
| 364 | } |
||
| 365 | } |
||
| 366 | |||
| 367 | @media (max-width: 991px){ |
||
| 368 | .pricing-content-2 { |
||
| 369 | |||
| 370 | .price-column-container{ |
||
| 371 | border-left:1px solid; |
||
| 372 | border-right:1px solid; |
||
| 373 | border-color: #ccc; |
||
| 374 | } |
||
| 375 | } |
||
| 376 | } |