Created
April 28, 2014 20:16
-
-
Save ggazzo/11382786 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style>@font-face { | |
| font-family: "Ubuntu"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.svg#Ubuntu") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.svg#OpenSansRegular") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.svg#open_sanssemibold") format("svg"); | |
| font-weight: 600; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.svg#open_sansbold") format("svg"); | |
| font-weight: bold; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "terra-webfont"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.svg#terra-webfont") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: "terra-webfont"; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-uni1:before, | |
| .icon-delete:before { | |
| content: "\21"; | |
| } | |
| .icon-uni2:before, | |
| .icon-aquarius:before { | |
| content: "\22"; | |
| } | |
| .icon-uni3:before, | |
| .icon-aries:before { | |
| content: "\23"; | |
| } | |
| .icon-uni4:before, | |
| .icon-soccer:before { | |
| content: "\24"; | |
| } | |
| .icon-uni5:before, | |
| .icon-cancer:before, | |
| .icon-horoscope:before { | |
| content: "\25"; | |
| } | |
| .icon-uni6:before, | |
| .icon-capricorn:before { | |
| content: "\26"; | |
| } | |
| .icon-uni7:before, | |
| .icon-email:before { | |
| content: "\27"; | |
| } | |
| .icon-uni8:before, | |
| .icon-scorpio:before { | |
| content: "\28"; | |
| } | |
| .icon-uni9:before, | |
| .icon-gemini:before { | |
| content: "\29"; | |
| } | |
| .icon-uni10:before, | |
| .icon-leo:before { | |
| content: "\30"; | |
| } | |
| .icon-uni11:before, | |
| .icon-libra:before { | |
| content: "\31"; | |
| } | |
| .icon-uni12:before, | |
| .icon-link:before { | |
| content: "\32"; | |
| } | |
| .icon-uni13:before, | |
| .icon-search:before { | |
| content: "\33"; | |
| } | |
| .icon-uni14:before, | |
| .icon-burger:before { | |
| content: "\34"; | |
| } | |
| .icon-uni15:before, | |
| .icon-pisces:before { | |
| content: "\35"; | |
| } | |
| .icon-uni16:before, | |
| .icon-sagittarius:before { | |
| content: "\36"; | |
| } | |
| .icon-uni17:before, | |
| .icon-select:before { | |
| content: "\37"; | |
| } | |
| .icon-uni18:before, | |
| .icon-weather:before { | |
| content: "\38"; | |
| } | |
| .icon-uni19:before, | |
| .icon-taurus:before { | |
| content: "\39"; | |
| } | |
| .icon-uni20:before, | |
| .icon-gemini:before { | |
| content: "\40"; | |
| } | |
| .icon-uni21:before, | |
| .icon-versus:before { | |
| content: "\41"; | |
| } | |
| .icon-uni22:before, | |
| .icon-virgo:before { | |
| content: "\42"; | |
| } | |
| .icon-uni23:before, | |
| .icon-chevron-up:before { | |
| content: "\43"; | |
| } | |
| .icon-uni24:before, | |
| .icon-chevron-down:before { | |
| content: "\44"; | |
| } | |
| .icon-uni25:before, | |
| .icon-chevron-right:before { | |
| content: "\45"; | |
| } | |
| .icon-uni26:before, | |
| .icon-chevron-left:before { | |
| content: "\46"; | |
| } | |
| .icon-seta5:before { | |
| content: "\47"; | |
| } | |
| .icon-aovivo:before { | |
| content: "\48"; | |
| } | |
| .icon-calendar:before { | |
| content: "\49"; | |
| } | |
| .icon-uni50:before { | |
| content: "\50"; | |
| } | |
| .icon-uni51:before, | |
| .icon-minus:before { | |
| content: "\51"; | |
| } | |
| .icon-uni52:before, | |
| .icon-plus:before { | |
| content: "\52"; | |
| } | |
| .icon-uni53:before { | |
| content: "\53"; | |
| } | |
| .icon-uni54:before, | |
| .icon-chat:before { | |
| content: "\54"; | |
| } | |
| .icon-uni55:before, | |
| .icon-friends:before { | |
| content: "\55"; | |
| } | |
| .icon-uni56:before, | |
| .icon-switch-on:before { | |
| content: "\56"; | |
| } | |
| .icon-uni57:before, | |
| .icon-switch-off:before { | |
| content: "\57"; | |
| } | |
| .icon-uni58:before, | |
| .icon-check:before { | |
| content: "\58"; | |
| } | |
| html, | |
| body, | |
| div, | |
| span, | |
| applet, | |
| object, | |
| iframe, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| p, | |
| blockquote, | |
| pre, | |
| a, | |
| abbr, | |
| acronym, | |
| address, | |
| big, | |
| cite, | |
| code, | |
| del, | |
| dfn, | |
| em, | |
| img, | |
| ins, | |
| kbd, | |
| q, | |
| s, | |
| samp, | |
| small, | |
| strike, | |
| strong, | |
| sub, | |
| sup, | |
| tt, | |
| var, | |
| b, | |
| u, | |
| i, | |
| center, | |
| dl, | |
| dt, | |
| dd, | |
| ol, | |
| ul, | |
| li, | |
| fieldset, | |
| form, | |
| label, | |
| legend, | |
| table, | |
| caption, | |
| tbody, | |
| tfoot, | |
| thead, | |
| tr, | |
| th, | |
| td, | |
| article, | |
| aside, | |
| canvas, | |
| details, | |
| embed, | |
| figure, | |
| figcaption, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| output, | |
| ruby, | |
| section, | |
| summary, | |
| time, | |
| mark, | |
| audio, | |
| video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, | |
| ul { | |
| list-style: none; | |
| } | |
| blockquote, | |
| q { | |
| quotes: none; | |
| } | |
| blockquote:before, | |
| blockquote:after, | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| vertical-align: baseline; | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| a { | |
| background: transparent; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| dfn { | |
| font-style: italic; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| img { | |
| border: 0; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| pre { | |
| overflow: auto; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; | |
| font: inherit; | |
| margin: 0; | |
| } | |
| button { | |
| overflow: visible; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| cursor: pointer; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input { | |
| line-height: normal; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; | |
| padding: 0; | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| } | |
| textarea { | |
| overflow: auto; | |
| } | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| * { | |
| -ms-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| *::before, | |
| *::after, | |
| *:before, | |
| *:after { | |
| -ms-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| * html:before { | |
| content: 'Terra Networks'; | |
| font: 0/0 'Ubuntu'; | |
| } | |
| html, | |
| body { | |
| font-size: 62.5%; | |
| font-family: "OpenSans", sans-serif; | |
| line-height: 1.2; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| html:before { | |
| content: 'Terra Networks'; | |
| font: 0/0 'Ubuntu'; | |
| } | |
| body > * { | |
| font-size: 1.6rem; | |
| } | |
| ul, | |
| li { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .seoTitle { | |
| font: 0/0 "OpenSans", sans-serif; | |
| } | |
| .headline, | |
| .subtitle--L, | |
| .subtitle--M, | |
| .subtitle--S, | |
| .subtitle--XS { | |
| font-family: "OpenSans"; | |
| font-weight: 600; | |
| color: #191917; | |
| cursor: pointer; | |
| } | |
| .headline:hover, | |
| .subtitle--L:hover, | |
| .subtitle--M:hover, | |
| .subtitle--S:hover, | |
| .subtitle--XS:hover, | |
| .headline:focus, | |
| .subtitle--L:focus, | |
| .subtitle--M:focus, | |
| .subtitle--S:focus, | |
| .subtitle--XS:focus { | |
| opacity: .8; | |
| } | |
| .headline { | |
| font-size: 2.2rem; | |
| font-family: "Ubuntu"; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .headlinePic { | |
| font-size: 4rem; | |
| } | |
| .subtitle--L { | |
| font-size: 3.2rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--M { | |
| font-size: 2.2rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--S { | |
| font-size: 1.6rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--XS { | |
| font-size: 1.4rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .quote { | |
| font-family: "Ubuntu"; | |
| line-height: 1.4; | |
| font-size: 2.2rem; | |
| color: #33332f; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .quote:before { | |
| position: relative; | |
| top: 1rem; | |
| content: ""; | |
| display: inline-block; | |
| background-image: url("http://terra.zaz-icons.master.hlg-fe.tpn.terra.com/svg-sprites/mainset/zaz-mainset-sprite.svg"); | |
| width: 40px; | |
| height: 40px; | |
| background-size: 1540px auto; | |
| background-position: -924px 0; | |
| } | |
| .quote:after { | |
| position: relative; | |
| top: 1rem; | |
| content: ""; | |
| display: inline-block; | |
| background-image: url("http://terra.zaz-icons.master.hlg-fe.tpn.terra.com/svg-sprites/mainset/zaz-mainset-sprite.svg"); | |
| width: 40px; | |
| height: 40px; | |
| background-size: 1540px auto; | |
| background-position: -968px 0; | |
| } | |
| .article__txt { | |
| display: block; | |
| color: #33332f; | |
| font-size: 1.4rem; | |
| line-height: 1.4; | |
| margin-bottom: 2em; | |
| clear: both; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| float: left; | |
| margin: 0.2rem 1rem 0 0; | |
| font-size: 6rem; | |
| font-weight: bold; | |
| line-height: .7; | |
| } | |
| .article__link { | |
| padding: 0 .2em; | |
| color: #33332f; | |
| text-decoration: underline; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .article__link:hover { | |
| background-color: #ff7212; | |
| color: #FFF; | |
| text-decoration: none; | |
| } | |
| .article__excerpt { | |
| color: #65655d; | |
| line-height: 1.4; | |
| font-size: 1.6rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .btn--default, | |
| .btn--branding, | |
| .btn--important, | |
| .btn--social, | |
| .btn--notification, | |
| .btn--sva { | |
| font-size: 1.6rem; | |
| font-family: "Ubuntu"; | |
| padding: 1rem 2rem; | |
| text-decoration: none; | |
| text-align: center; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| border: none; | |
| display: inline-block; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .btn--default:hover, | |
| .btn--branding:hover, | |
| .btn--important:hover, | |
| .btn--social:hover, | |
| .btn--notification:hover, | |
| .btn--sva:hover, | |
| .btn--default:focus, | |
| .btn--branding:focus, | |
| .btn--important:focus, | |
| .btn--social:focus, | |
| .btn--notification:focus, | |
| .btn--sva:focus { | |
| opacity: .8; | |
| } | |
| .btn--default { | |
| color: #65655d; | |
| background-color: #FFF; | |
| border: solid 1px #d7d7d7; | |
| } | |
| .btn--default:hover, | |
| .btn--default:focus { | |
| background-color: #d7d7d7; | |
| } | |
| .btn--branding { | |
| color: #FFF; | |
| background-color: #ff7212; | |
| } | |
| .btn--important { | |
| color: #FFF; | |
| background-color: #c11c05; | |
| } | |
| .btn--social { | |
| color: #FFF; | |
| background-color: #245be7; | |
| } | |
| .btn--notification { | |
| color: #FFF; | |
| background-color: #50bc37; | |
| } | |
| .btn--sva { | |
| color: #FFF; | |
| background-color: #00958c; | |
| } | |
| .btn--large { | |
| font-size: 1.8rem; | |
| padding: 1.8rem 2.5rem; | |
| } | |
| .btn--small { | |
| font-size: 1.5rem; | |
| padding: 0.8rem 1.5rem; | |
| } | |
| .btn--xsmall { | |
| font-size: 1.4rem; | |
| padding: 0.5rem 1rem; | |
| } | |
| .txtDialog { | |
| font-size: 1.5rem; | |
| padding: .25em 1em; | |
| color: #65655d; | |
| border-radius: 40px; | |
| border: solid 1px #d7d7d7; | |
| font-style: italic; | |
| } | |
| .txtDialog:focus { | |
| color: #33332f; | |
| font-style: normal; | |
| outline: none; | |
| } | |
| .txtDialog[readonly] { | |
| background-color: #F1F1F1; | |
| color: #65655D; | |
| cursor: not-allowed; | |
| } | |
| .txtDialog[readonly]:focus { | |
| font-style: italic; | |
| } | |
| .txtDialog--large { | |
| padding: 1.5rem 1rem; | |
| } | |
| .txtDialog--xlarge { | |
| font-size: 1.6rem; | |
| padding: 2rem 1rem; | |
| } | |
| @media all and (min-width: 76.8em) and (max-width: 102.39em) { | |
| .headline { | |
| font-size: 3.4rem; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| font-size: 9rem; | |
| margin-top: 0.4rem; | |
| } | |
| .article__txt { | |
| font-size: 1.6rem; | |
| } | |
| .article__excerpt { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media all and (min-width: 102.4em) { | |
| .headline { | |
| font-size: 3.6rem; | |
| } | |
| .quote { | |
| font-size: 3rem; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| font-size: 9.2rem; | |
| margin-top: 0.4rem; | |
| } | |
| .article__txt { | |
| font-size: 1.8rem; | |
| } | |
| .article__excerpt { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| </style> | |
| <table class="curveTable"> | |
| <caption class="curveTable__caption">teste</caption> | |
| <thead class="curveTable__head"> | |
| <tr> | |
| <th colspan="2"><div class="curveTable__head-wrap--curve">Classificação</div></th> | |
| <th title="pontos"><div class="curveTable__block-wrap">P</div></th> | |
| <th title="jogos"><div class="curveTable__block-wrap">J</div></th> | |
| <th title="vitorias"><div class="curveTable__block-wrap--rounded">V</div></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">1</div></td> | |
| <td> | |
| <span class="curveTable__block-wrap" href="http://esportes.terra.com.br/fluminense"><a class="teste">asdas</a></span> | |
| </td> | |
| <td><div class="curveTable__block-wrap">6</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">2</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">2</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/sao-paulo">São Paulo</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">3</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/corinthians">Corinthians</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">4</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/atletico-pr">Atlético-PR</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| </tbody> | |
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| .curveTable{ | |
| &__caption{ | |
| font: 0/0 a; | |
| } | |
| &__head{ | |
| color: black; | |
| font-style: italic; | |
| font-size: 14px; | |
| line-height: 26px; | |
| } | |
| &__head-wrap--curve{ | |
| @extend %__block-wrap; | |
| border-top-left-radius: 7px; | |
| background:red; | |
| &:before{ | |
| bottom: -35px; | |
| left: 0; | |
| width: 15px; | |
| height: 100%; | |
| background-color: red; | |
| content: ""; | |
| position: absolute; | |
| z-index:-1; | |
| } | |
| } | |
| %__block-wrap{ | |
| position: relative; | |
| display: block; | |
| border-bottom: 2px solid #D6D6D6; | |
| height: 100%; | |
| padding:25px; | |
| background:white; | |
| } | |
| &__block-wrap{ | |
| @extend %__block-wrap; | |
| } | |
| &__block-wrap--rounded{ | |
| @extend %__block-wrap; | |
| &:before{ | |
| border-top-right-radius: 21px; | |
| border-bottom-right-radius: 21px; | |
| position: absolute; | |
| right: -15px; | |
| top:0; | |
| width: 15px; | |
| height: 100%; | |
| background: red; | |
| content: ""; | |
| } | |
| } | |
| &__block-wrap--curveUp{ | |
| @extend %__block-wrap; | |
| &:before{ | |
| position: absolute; | |
| right: -15px; | |
| z-index: 2; | |
| width: 15px; | |
| height: 25px; | |
| background: #FFF; | |
| content: ""; | |
| bottom:-2px; | |
| border-bottom: 2px solid #D6D6D6; | |
| border-bottom-right-radius: 20px; | |
| } | |
| } | |
| &__block-wrap--curveDown{ | |
| @extend %__block-wrap; | |
| border-top-left-radius: 10px; | |
| &:before{ | |
| position: absolute; | |
| bottom: -10px; | |
| left: 0; | |
| width: 100%; | |
| height: 10px; | |
| background: white; | |
| content: ""; | |
| } | |
| &:after{ | |
| position: absolute; | |
| bottom: -12px; | |
| left: 0; | |
| width: 200%; | |
| height: 10px; | |
| border-top: 2px solid #D6D6D6; | |
| border-top-left-radius: 30px; | |
| background: #FFF; | |
| content: ""; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .curveTable__caption { | |
| font: 0/0 a; | |
| } | |
| .curveTable__head { | |
| color: black; | |
| font-style: italic; | |
| font-size: 14px; | |
| line-height: 26px; | |
| } | |
| .curveTable__head-wrap--curve { | |
| border-top-left-radius: 7px; | |
| background: red; | |
| } | |
| .curveTable__head-wrap--curve:before { | |
| bottom: -35px; | |
| left: 0; | |
| width: 15px; | |
| height: 100%; | |
| background-color: red; | |
| content: ""; | |
| position: absolute; | |
| z-index: -1; | |
| } | |
| .curveTable .curveTable__head-wrap--curve, .curveTable .curveTable__block-wrap, .curveTable .curveTable__block-wrap--rounded, .curveTable .curveTable__block-wrap--curveUp, .curveTable .curveTable__block-wrap--curveDown { | |
| position: relative; | |
| display: block; | |
| border-bottom: 2px solid #D6D6D6; | |
| height: 100%; | |
| padding: 25px; | |
| background: white; | |
| } | |
| .curveTable__block-wrap--rounded:before { | |
| border-top-right-radius: 21px; | |
| border-bottom-right-radius: 21px; | |
| position: absolute; | |
| right: -15px; | |
| top: 0; | |
| width: 15px; | |
| height: 100%; | |
| background: red; | |
| content: ""; | |
| } | |
| .curveTable__block-wrap--curveUp:before { | |
| position: absolute; | |
| right: -15px; | |
| z-index: 2; | |
| width: 15px; | |
| height: 25px; | |
| background: #FFF; | |
| content: ""; | |
| bottom: -2px; | |
| border-bottom: 2px solid #D6D6D6; | |
| border-bottom-right-radius: 20px; | |
| } | |
| .curveTable__block-wrap--curveDown { | |
| border-top-left-radius: 10px; | |
| } | |
| .curveTable__block-wrap--curveDown:before { | |
| position: absolute; | |
| bottom: -10px; | |
| left: 0; | |
| width: 100%; | |
| height: 10px; | |
| background: white; | |
| content: ""; | |
| } | |
| .curveTable__block-wrap--curveDown:after { | |
| position: absolute; | |
| bottom: -12px; | |
| left: 0; | |
| width: 200%; | |
| height: 10px; | |
| border-top: 2px solid #D6D6D6; | |
| border-top-left-radius: 30px; | |
| background: #FFF; | |
| content: ""; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style>@font-face { | |
| font-family: "Ubuntu"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/ubuntu/ubuntu-regular.svg#Ubuntu") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/opensans-regular.svg#OpenSansRegular") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/semibold/opensans-semibold-webfont.svg#open_sanssemibold") format("svg"); | |
| font-weight: 600; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "OpenSans"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.eot"); | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/opensans/bold/opensans-bold-webfont.svg#open_sansbold") format("svg"); | |
| font-weight: bold; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: "terra-webfont"; | |
| src: url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.eot?#iefix") format("embedded-opentype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.woff") format("woff"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.ttf") format("truetype"), url("//s1.trrsf.com.br/fe/zaz-morph/fonts/terra-webfont/terra-webfont.svg#terra-webfont") format("svg"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: "terra-webfont"; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-uni1:before, | |
| .icon-delete:before { | |
| content: "\21"; | |
| } | |
| .icon-uni2:before, | |
| .icon-aquarius:before { | |
| content: "\22"; | |
| } | |
| .icon-uni3:before, | |
| .icon-aries:before { | |
| content: "\23"; | |
| } | |
| .icon-uni4:before, | |
| .icon-soccer:before { | |
| content: "\24"; | |
| } | |
| .icon-uni5:before, | |
| .icon-cancer:before, | |
| .icon-horoscope:before { | |
| content: "\25"; | |
| } | |
| .icon-uni6:before, | |
| .icon-capricorn:before { | |
| content: "\26"; | |
| } | |
| .icon-uni7:before, | |
| .icon-email:before { | |
| content: "\27"; | |
| } | |
| .icon-uni8:before, | |
| .icon-scorpio:before { | |
| content: "\28"; | |
| } | |
| .icon-uni9:before, | |
| .icon-gemini:before { | |
| content: "\29"; | |
| } | |
| .icon-uni10:before, | |
| .icon-leo:before { | |
| content: "\30"; | |
| } | |
| .icon-uni11:before, | |
| .icon-libra:before { | |
| content: "\31"; | |
| } | |
| .icon-uni12:before, | |
| .icon-link:before { | |
| content: "\32"; | |
| } | |
| .icon-uni13:before, | |
| .icon-search:before { | |
| content: "\33"; | |
| } | |
| .icon-uni14:before, | |
| .icon-burger:before { | |
| content: "\34"; | |
| } | |
| .icon-uni15:before, | |
| .icon-pisces:before { | |
| content: "\35"; | |
| } | |
| .icon-uni16:before, | |
| .icon-sagittarius:before { | |
| content: "\36"; | |
| } | |
| .icon-uni17:before, | |
| .icon-select:before { | |
| content: "\37"; | |
| } | |
| .icon-uni18:before, | |
| .icon-weather:before { | |
| content: "\38"; | |
| } | |
| .icon-uni19:before, | |
| .icon-taurus:before { | |
| content: "\39"; | |
| } | |
| .icon-uni20:before, | |
| .icon-gemini:before { | |
| content: "\40"; | |
| } | |
| .icon-uni21:before, | |
| .icon-versus:before { | |
| content: "\41"; | |
| } | |
| .icon-uni22:before, | |
| .icon-virgo:before { | |
| content: "\42"; | |
| } | |
| .icon-uni23:before, | |
| .icon-chevron-up:before { | |
| content: "\43"; | |
| } | |
| .icon-uni24:before, | |
| .icon-chevron-down:before { | |
| content: "\44"; | |
| } | |
| .icon-uni25:before, | |
| .icon-chevron-right:before { | |
| content: "\45"; | |
| } | |
| .icon-uni26:before, | |
| .icon-chevron-left:before { | |
| content: "\46"; | |
| } | |
| .icon-seta5:before { | |
| content: "\47"; | |
| } | |
| .icon-aovivo:before { | |
| content: "\48"; | |
| } | |
| .icon-calendar:before { | |
| content: "\49"; | |
| } | |
| .icon-uni50:before { | |
| content: "\50"; | |
| } | |
| .icon-uni51:before, | |
| .icon-minus:before { | |
| content: "\51"; | |
| } | |
| .icon-uni52:before, | |
| .icon-plus:before { | |
| content: "\52"; | |
| } | |
| .icon-uni53:before { | |
| content: "\53"; | |
| } | |
| .icon-uni54:before, | |
| .icon-chat:before { | |
| content: "\54"; | |
| } | |
| .icon-uni55:before, | |
| .icon-friends:before { | |
| content: "\55"; | |
| } | |
| .icon-uni56:before, | |
| .icon-switch-on:before { | |
| content: "\56"; | |
| } | |
| .icon-uni57:before, | |
| .icon-switch-off:before { | |
| content: "\57"; | |
| } | |
| .icon-uni58:before, | |
| .icon-check:before { | |
| content: "\58"; | |
| } | |
| html, | |
| body, | |
| div, | |
| span, | |
| applet, | |
| object, | |
| iframe, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| p, | |
| blockquote, | |
| pre, | |
| a, | |
| abbr, | |
| acronym, | |
| address, | |
| big, | |
| cite, | |
| code, | |
| del, | |
| dfn, | |
| em, | |
| img, | |
| ins, | |
| kbd, | |
| q, | |
| s, | |
| samp, | |
| small, | |
| strike, | |
| strong, | |
| sub, | |
| sup, | |
| tt, | |
| var, | |
| b, | |
| u, | |
| i, | |
| center, | |
| dl, | |
| dt, | |
| dd, | |
| ol, | |
| ul, | |
| li, | |
| fieldset, | |
| form, | |
| label, | |
| legend, | |
| table, | |
| caption, | |
| tbody, | |
| tfoot, | |
| thead, | |
| tr, | |
| th, | |
| td, | |
| article, | |
| aside, | |
| canvas, | |
| details, | |
| embed, | |
| figure, | |
| figcaption, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| output, | |
| ruby, | |
| section, | |
| summary, | |
| time, | |
| mark, | |
| audio, | |
| video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, | |
| ul { | |
| list-style: none; | |
| } | |
| blockquote, | |
| q { | |
| quotes: none; | |
| } | |
| blockquote:before, | |
| blockquote:after, | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| vertical-align: baseline; | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| a { | |
| background: transparent; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| dfn { | |
| font-style: italic; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| img { | |
| border: 0; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| pre { | |
| overflow: auto; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; | |
| font: inherit; | |
| margin: 0; | |
| } | |
| button { | |
| overflow: visible; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| cursor: pointer; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input { | |
| line-height: normal; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; | |
| padding: 0; | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| } | |
| textarea { | |
| overflow: auto; | |
| } | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| * { | |
| -ms-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| *::before, | |
| *::after, | |
| *:before, | |
| *:after { | |
| -ms-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| * html:before { | |
| content: 'Terra Networks'; | |
| font: 0/0 'Ubuntu'; | |
| } | |
| html, | |
| body { | |
| font-size: 62.5%; | |
| font-family: "OpenSans", sans-serif; | |
| line-height: 1.2; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| html:before { | |
| content: 'Terra Networks'; | |
| font: 0/0 'Ubuntu'; | |
| } | |
| body > * { | |
| font-size: 1.6rem; | |
| } | |
| ul, | |
| li { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .seoTitle { | |
| font: 0/0 "OpenSans", sans-serif; | |
| } | |
| .headline, | |
| .subtitle--L, | |
| .subtitle--M, | |
| .subtitle--S, | |
| .subtitle--XS { | |
| font-family: "OpenSans"; | |
| font-weight: 600; | |
| color: #191917; | |
| cursor: pointer; | |
| } | |
| .headline:hover, | |
| .subtitle--L:hover, | |
| .subtitle--M:hover, | |
| .subtitle--S:hover, | |
| .subtitle--XS:hover, | |
| .headline:focus, | |
| .subtitle--L:focus, | |
| .subtitle--M:focus, | |
| .subtitle--S:focus, | |
| .subtitle--XS:focus { | |
| opacity: .8; | |
| } | |
| .headline { | |
| font-size: 2.2rem; | |
| font-family: "Ubuntu"; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .headlinePic { | |
| font-size: 4rem; | |
| } | |
| .subtitle--L { | |
| font-size: 3.2rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--M { | |
| font-size: 2.2rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--S { | |
| font-size: 1.6rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .subtitle--XS { | |
| font-size: 1.4rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .quote { | |
| font-family: "Ubuntu"; | |
| line-height: 1.4; | |
| font-size: 2.2rem; | |
| color: #33332f; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .quote:before { | |
| position: relative; | |
| top: 1rem; | |
| content: ""; | |
| display: inline-block; | |
| background-image: url("http://terra.zaz-icons.master.hlg-fe.tpn.terra.com/svg-sprites/mainset/zaz-mainset-sprite.svg"); | |
| width: 40px; | |
| height: 40px; | |
| background-size: 1540px auto; | |
| background-position: -924px 0; | |
| } | |
| .quote:after { | |
| position: relative; | |
| top: 1rem; | |
| content: ""; | |
| display: inline-block; | |
| background-image: url("http://terra.zaz-icons.master.hlg-fe.tpn.terra.com/svg-sprites/mainset/zaz-mainset-sprite.svg"); | |
| width: 40px; | |
| height: 40px; | |
| background-size: 1540px auto; | |
| background-position: -968px 0; | |
| } | |
| .article__txt { | |
| display: block; | |
| color: #33332f; | |
| font-size: 1.4rem; | |
| line-height: 1.4; | |
| margin-bottom: 2em; | |
| clear: both; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| float: left; | |
| margin: 0.2rem 1rem 0 0; | |
| font-size: 6rem; | |
| font-weight: bold; | |
| line-height: .7; | |
| } | |
| .article__link { | |
| padding: 0 .2em; | |
| color: #33332f; | |
| text-decoration: underline; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .article__link:hover { | |
| background-color: #ff7212; | |
| color: #FFF; | |
| text-decoration: none; | |
| } | |
| .article__excerpt { | |
| color: #65655d; | |
| line-height: 1.4; | |
| font-size: 1.6rem; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .btn--default, | |
| .btn--branding, | |
| .btn--important, | |
| .btn--social, | |
| .btn--notification, | |
| .btn--sva { | |
| font-size: 1.6rem; | |
| font-family: "Ubuntu"; | |
| padding: 1rem 2rem; | |
| text-decoration: none; | |
| text-align: center; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| border: none; | |
| display: inline-block; | |
| -ms-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .btn--default:hover, | |
| .btn--branding:hover, | |
| .btn--important:hover, | |
| .btn--social:hover, | |
| .btn--notification:hover, | |
| .btn--sva:hover, | |
| .btn--default:focus, | |
| .btn--branding:focus, | |
| .btn--important:focus, | |
| .btn--social:focus, | |
| .btn--notification:focus, | |
| .btn--sva:focus { | |
| opacity: .8; | |
| } | |
| .btn--default { | |
| color: #65655d; | |
| background-color: #FFF; | |
| border: solid 1px #d7d7d7; | |
| } | |
| .btn--default:hover, | |
| .btn--default:focus { | |
| background-color: #d7d7d7; | |
| } | |
| .btn--branding { | |
| color: #FFF; | |
| background-color: #ff7212; | |
| } | |
| .btn--important { | |
| color: #FFF; | |
| background-color: #c11c05; | |
| } | |
| .btn--social { | |
| color: #FFF; | |
| background-color: #245be7; | |
| } | |
| .btn--notification { | |
| color: #FFF; | |
| background-color: #50bc37; | |
| } | |
| .btn--sva { | |
| color: #FFF; | |
| background-color: #00958c; | |
| } | |
| .btn--large { | |
| font-size: 1.8rem; | |
| padding: 1.8rem 2.5rem; | |
| } | |
| .btn--small { | |
| font-size: 1.5rem; | |
| padding: 0.8rem 1.5rem; | |
| } | |
| .btn--xsmall { | |
| font-size: 1.4rem; | |
| padding: 0.5rem 1rem; | |
| } | |
| .txtDialog { | |
| font-size: 1.5rem; | |
| padding: .25em 1em; | |
| color: #65655d; | |
| border-radius: 40px; | |
| border: solid 1px #d7d7d7; | |
| font-style: italic; | |
| } | |
| .txtDialog:focus { | |
| color: #33332f; | |
| font-style: normal; | |
| outline: none; | |
| } | |
| .txtDialog[readonly] { | |
| background-color: #F1F1F1; | |
| color: #65655D; | |
| cursor: not-allowed; | |
| } | |
| .txtDialog[readonly]:focus { | |
| font-style: italic; | |
| } | |
| .txtDialog--large { | |
| padding: 1.5rem 1rem; | |
| } | |
| .txtDialog--xlarge { | |
| font-size: 1.6rem; | |
| padding: 2rem 1rem; | |
| } | |
| @media all and (min-width: 76.8em) and (max-width: 102.39em) { | |
| .headline { | |
| font-size: 3.4rem; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| font-size: 9rem; | |
| margin-top: 0.4rem; | |
| } | |
| .article__txt { | |
| font-size: 1.6rem; | |
| } | |
| .article__excerpt { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media all and (min-width: 102.4em) { | |
| .headline { | |
| font-size: 3.6rem; | |
| } | |
| .quote { | |
| font-size: 3rem; | |
| } | |
| .article__txt:first-of-type:first-letter { | |
| font-size: 9.2rem; | |
| margin-top: 0.4rem; | |
| } | |
| .article__txt { | |
| font-size: 1.8rem; | |
| } | |
| .article__excerpt { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| </style> | |
| <table class="curveTable"> | |
| <caption class="curveTable__caption">teste</caption> | |
| <thead class="curveTable__head"> | |
| <tr> | |
| <th colspan="2"><div class="curveTable__head-wrap--curve">Classificação</div></th> | |
| <th title="pontos"><div class="curveTable__block-wrap">P</div></th> | |
| <th title="jogos"><div class="curveTable__block-wrap">J</div></th> | |
| <th title="vitorias"><div class="curveTable__block-wrap--rounded">V</div></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">1</div></td> | |
| <td> | |
| <span class="curveTable__block-wrap" href="http://esportes.terra.com.br/fluminense"><a class="teste">asdas</a></span> | |
| </td> | |
| <td><div class="curveTable__block-wrap">6</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">2</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">2</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/sao-paulo">São Paulo</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">3</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/corinthians">Corinthians</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| <tr class=""> | |
| <td><div class="curveTable__block-wrap--curveDown">4</div></td> | |
| <td> | |
| <a class="curveTable__block-wrap" href="http://esportes.terra.com.br/atletico-pr">Atlético-PR</a> | |
| </td> | |
| <td><div class="curveTable__block-wrap">4</div></td> | |
| <td><div class="curveTable__block-wrap">2</div></td> | |
| <td><div class="curveTable__block-wrap--curveUp">1</div></td> | |
| </tr> | |
| </tbody> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment