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 |
||
| 6 | ***/ |
||
| 7 | |||
| 8 | .pricing { |
||
| 9 | position:relative; |
||
| 10 | margin-bottom:15px; |
||
| 11 | border:3px solid #eee; |
||
| 12 | } |
||
| 13 | .pricing-active { |
||
| 14 | border:3px solid #36d7ac; |
||
| 15 | margin-top: -10px; |
||
| 16 | box-shadow: 7px 7px rgba(#36d7ac, 0.2); |
||
| 17 | } |
||
| 18 | .pricing:hover { |
||
| 19 | border:3px solid #36d7ac; |
||
| 20 | } |
||
| 21 | .pricing:hover h4 { |
||
| 22 | color:#36d7ac; |
||
| 23 | } |
||
| 24 | .pricing-head { |
||
| 25 | text-align:center; |
||
| 26 | } |
||
| 27 | .pricing-head h3, |
||
| 28 | .pricing-head h4 { |
||
| 29 | margin:0; |
||
| 30 | line-height:normal; |
||
| 31 | } |
||
| 32 | .pricing-head h3 span, |
||
| 33 | .pricing-head h4 span { |
||
| 34 | display:block; |
||
| 35 | margin-top:5px; |
||
| 36 | font-size:14px; |
||
| 37 | font-style:italic; |
||
| 38 | } |
||
| 39 | .pricing-head h3 { |
||
| 40 | font-weight: 300; |
||
| 41 | color:#fafafa; |
||
| 42 | padding:12px 0; |
||
| 43 | font-size:27px; |
||
| 44 | background:#36d7ac; |
||
| 45 | border-bottom:solid 1px #41b91c; |
||
| 46 | } |
||
| 47 | .pricing-head h4 { |
||
| 48 | color:#bac39f; |
||
| 49 | padding:5px 0; |
||
| 50 | font-size:54px; |
||
| 51 | font-weight:300; |
||
| 52 | background:#fbfef2; |
||
| 53 | border-bottom:solid 1px #f5f9e7; |
||
| 54 | } |
||
| 55 | .pricing-head-active h4 { |
||
| 56 | color:#36d7ac; |
||
| 57 | } |
||
| 58 | .pricing-head h4 i { |
||
| 59 | top:-8px; |
||
| 60 | font-size:28px; |
||
| 61 | font-style:normal; |
||
| 62 | position:relative; |
||
| 63 | } |
||
| 64 | .pricing-head h4 span { |
||
| 65 | top:-10px; |
||
| 66 | font-size:14px; |
||
| 67 | font-style:normal; |
||
| 68 | position:relative; |
||
| 69 | } |
||
| 70 | |||
| 71 | /*Pricing Content*/ |
||
| 72 | .pricing-content li { |
||
| 73 | color:#888; |
||
| 74 | font-size:12px; |
||
| 75 | padding:7px 15px; |
||
| 76 | border-bottom:solid 1px #f5f9e7; |
||
| 77 | } |
||
| 78 | .pricing-content li i { |
||
| 79 | top:2px; |
||
| 80 | color:#36d7ac; |
||
| 81 | font-size:16px; |
||
| 82 | margin-right:5px; |
||
| 83 | position:relative; |
||
| 84 | } |
||
| 85 | |||
| 86 | /*Pricing Footer*/ |
||
| 87 | .pricing-footer { |
||
| 88 | color:#777; |
||
| 89 | font-size:11px; |
||
| 90 | line-height:17px; |
||
| 91 | text-align:center; |
||
| 92 | padding:0 20px 19px; |
||
| 93 | } |
||
| 94 | |||
| 95 | /*Priceing Active*/ |
||
| 96 | .price-active, |
||
| 97 | .pricing:hover { |
||
| 98 | z-index:9; |
||
| 99 | } |
||
| 100 | .price-active h4 { |
||
| 101 | color:#36d7ac; |
||
| 102 | } |
||
| 103 | |||
| 104 | .no-space-pricing .pricing:hover { |
||
| 105 | transition:box-shadow 0.2s ease-in-out; |
||
| 106 | } |
||
| 107 | .no-space-pricing .price-active .pricing-head h4, |
||
| 108 | .no-space-pricing .pricing:hover .pricing-head h4 { |
||
| 109 | color:#36d7ac; |
||
| 110 | padding:15px 0; |
||
| 111 | font-size:80px; |
||
| 112 | transition:color 0.5s ease-in-out; |
||
| 113 | } |