Created
September 1, 2014 14:59
-
-
Save lipelopeslage/cffc8eedb35c3af85074 to your computer and use it in GitHub Desktop.
estilo
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
| @import "utils.scss"; | |
| .joyride-modal-bg{ | |
| z-index: 9999; | |
| } | |
| .joyride-tip-guide{ | |
| z-index: 10000; | |
| } | |
| .cont-mask{ | |
| overflow: hidden; | |
| } | |
| .customer{ | |
| .picture{ | |
| display: inline-block; | |
| margin-right: 5px; | |
| } | |
| .info{ | |
| display: inline-block; | |
| } | |
| } | |
| .gravatar-holder{ | |
| display: inline-block; | |
| overflow: hidden; | |
| width: 60px; | |
| height: 60px; | |
| -webkit-border-radius: 50px; | |
| -moz-border-radius: 50px; | |
| border-radius: 50px; | |
| &.small{ | |
| width: 30px; | |
| height: 30px; | |
| -webkit-border-radius: 30px; | |
| -moz-border-radius: 30px; | |
| border-radius: 30px; | |
| } | |
| } | |
| table { | |
| tr { | |
| .gravatar-holder{ | |
| @include transition(opacity, .15s, linear); | |
| opacity: .6; | |
| filter: alpha(opacity = 60); | |
| } | |
| &:hover .gravatar-holder{ | |
| opacity: 1; | |
| filter: alpha(opacity = 100); | |
| } | |
| } | |
| } | |
| .question-circle{ //ícones de interrogação | |
| display: inline; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-size: 14px; | |
| color: #999; | |
| &:before{ | |
| content: "\f059"; | |
| } | |
| &:hover{ | |
| text-decoration: none; | |
| color: #999; | |
| } | |
| } | |
| .tag{ | |
| font-size: 10px; | |
| color: white; | |
| padding: 3px; | |
| background-color: #f0ad4e; | |
| &.info{ | |
| background-color: #5bc0de; | |
| } | |
| &.success{ | |
| background-color: #5cb85c; | |
| } | |
| &.error{ | |
| background-color: #d9534f; | |
| } | |
| } | |
| .tag-icon{ | |
| display: block; | |
| position: relative; | |
| float: left; | |
| overflow: hidden; | |
| font-size: 9px; | |
| line-height: 9px; | |
| padding: 2px 3px 3px 5px; | |
| margin-right: 3px; | |
| color: white; | |
| i{ | |
| position: relative; | |
| font-size: 12px; | |
| color: white; | |
| top: 1px; | |
| } | |
| span{ | |
| position: relative; | |
| z-index: 1; | |
| } | |
| &:before{ | |
| z-index: 0; | |
| top: -8px; | |
| left: 6px; | |
| width:245px; | |
| height:121px; | |
| display: block; | |
| position:absolute; | |
| -moz-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| background: #d9534f; | |
| content: ''; | |
| background-color: #f0ad4e; | |
| } | |
| &.info:before{ | |
| background-color: #5bc0de; | |
| } | |
| &.success:before{ | |
| background-color: #5cb85c; | |
| } | |
| &.error:before{ | |
| background-color: #d9534f; | |
| } | |
| } | |
| .xlink-tag{ | |
| font-size: 10px; | |
| line-height: 10px; | |
| display: block; | |
| position: absolute; | |
| line-height: inherit; | |
| right: 2px; | |
| bottom: -1px; | |
| opacity: .8; | |
| filter: alpha(opacity = 80); | |
| padding-right: 17px !important; | |
| &.rel{ | |
| display: inline; | |
| position: relative; | |
| text-align: inherit; | |
| &:before{ | |
| bottom: -5px; | |
| } | |
| } | |
| &:before{ | |
| @include block-absolute; | |
| font-family: FontAwesome; | |
| right: 4px; | |
| vertical-align: middle; | |
| bottom: -2px; | |
| content: "\f08e"; | |
| } | |
| } | |
| // mensagem de ambiente de produção | |
| body.test-enviroment{ // body com classe .test-ambient para mensagem de aviso | |
| .navbar{ | |
| .alert.alert-danger{ | |
| text-align: center; | |
| margin-bottom: 0; | |
| } | |
| } | |
| main{ | |
| &:before{ | |
| @include block-relative; | |
| @include dimensions(100%, 35px, white); | |
| content: ""; | |
| } | |
| } | |
| } | |
| @media (max-width: 980px){ | |
| body.test-enviroment main{ | |
| &:before{ | |
| height: 0; | |
| } | |
| } | |
| } | |
| .mt0{ | |
| display: inline-block; | |
| margin-top: 0; | |
| } | |
| .mb0{ | |
| display: inline-block; | |
| margin-bottom: 0; | |
| } | |
| .ml15{ | |
| margin-left: 15px; | |
| } | |
| .ml40{ | |
| margin-left: 40px; | |
| } | |
| .lh30{ | |
| line-height: 30px; | |
| } | |
| .mb6{ | |
| display: inline-block; | |
| margin-bottom: 6px; | |
| } | |
| .mb20{ | |
| display: inline-block; | |
| margin-bottom: 20px; | |
| } | |
| .mb16{ | |
| display: inline-block; | |
| margin-bottom: 16px !important; | |
| } | |
| .mt10{ | |
| display: inline-block; | |
| margin-top: 10px; | |
| } | |
| .mt16{ | |
| display: inline-block; | |
| margin-top: 16px; | |
| } | |
| .mb10{ | |
| display: inline-block; | |
| margin-bottom: 10px !important; | |
| } | |
| .mt6{ | |
| display: inline-block; | |
| margin-top: 6px; | |
| } | |
| .pt27{ | |
| padding-top: 27px; | |
| } | |
| .txt-center{ | |
| text-align: center !important; | |
| } | |
| .txt-right{ | |
| text-align: right !important; | |
| } | |
| .txt-left{ | |
| text-align: left !important; | |
| } | |
| .fz21{ | |
| font-size: 21px; | |
| } | |
| .fz30{ | |
| font-size: 30px; | |
| } | |
| .txt-number{ | |
| font-family: helveticaneuemd-cd; | |
| } | |
| .tx-md-num{ | |
| font-family: helveticaneuemd-cd; | |
| } | |
| .tx-lt-num{ | |
| font-family: helveticaltstd-cond; | |
| } | |
| .mb45{ | |
| margin-bottom: 45px; | |
| } | |
| .cl-blue{ | |
| color: $blue-light; | |
| } | |
| .cl-gray{ | |
| color: $breadcrumb; | |
| } | |
| .cl-white{ | |
| color: white; | |
| } | |
| label{ | |
| line-height: 30px; | |
| &.radio{ | |
| line-height: 23px !important; | |
| span.radio{ | |
| top: 2px; | |
| } | |
| } | |
| } | |
| small{ | |
| font-size: 12px; | |
| } | |
| input, textarea{ | |
| font-family: helvetica_neue_lt_std45_light; | |
| } | |
| input, select, textarea{ | |
| &.error{ | |
| border: 1px solid red; | |
| &:focus{ | |
| border: 1px solid red; | |
| outline: 0; | |
| -moz-box-shadow: none; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| } | |
| } | |
| a [class^="fa-"], a [class*=" fa-"] { | |
| text-decoration: none; | |
| } | |
| input[type='radio'].custom{ | |
| z-index: 10; | |
| position: relative; | |
| } | |
| .nav.nav-tabs{ | |
| margin-bottom: 0; | |
| .active { | |
| color: $form-label; | |
| a:hover, a:focus{ | |
| color: $form-label; | |
| border-bottom-color: white !important; | |
| } | |
| } | |
| a{ | |
| &:hover{ | |
| color: $blue-light; | |
| background-color: transparent; | |
| border: 1px solid $border-common; | |
| } | |
| } | |
| } | |
| .tab-content{ | |
| overflow: visible; | |
| padding: 20px 0; | |
| border: 1px solid $border-common; | |
| border-top: 0; | |
| } | |
| span.radio{ | |
| @include block-absolute; | |
| @include dimensions(20px, 23px, image-url("moip/sprite.png") no-repeat -105px -9px); | |
| z-index: 0; | |
| top: 5px; | |
| left: 0px; | |
| border-radius: 10px; | |
| padding-left: 0; | |
| margin-right: 20px; | |
| &.selected{ | |
| background-position: -77px -9px; | |
| } | |
| } | |
| .clickable { | |
| cursor:pointer; | |
| } | |
| .truncate { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| min-height: 20px !important; | |
| } | |
| /*#################### | |
| ############# | |
| .error-page | |
| - Topo de qualquer seção, dentro de .page-content | |
| */ | |
| .error-page { | |
| margin-top: 120px; | |
| .code{ | |
| letter-spacing: -10px; | |
| margin-top: 0px; | |
| line-height: 158px; | |
| font-size: 158px; | |
| font-weight: 300; | |
| text-align: right; | |
| &.page-404{ | |
| color: #7bbbd6; | |
| } | |
| &.page-500{ | |
| color: #ec8c8c; | |
| } | |
| } | |
| p{ | |
| margin-bottom: 10px; | |
| a{ | |
| @include block-relative; | |
| margin-top: 10px; | |
| } | |
| } | |
| } | |
| .error-page .details { | |
| padding-top: 10px; | |
| } | |
| /* | |
| .error-page (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .topo-secao | |
| - Topo de qualquer seção, dentro de .page-content | |
| */ | |
| .topo-secao{ | |
| @extend .bootstrap-row-fluid; | |
| padding-bottom: 22px; | |
| .breadcrumb{ | |
| @include block-relative; | |
| @include set-font(Arial, 13px, auto, $breadcrumb); | |
| padding: 0; | |
| margin: 0; | |
| left: -3px; | |
| background: none; | |
| i{ | |
| &.home{ | |
| font-size: 17px; | |
| margin-right: 8px; | |
| } | |
| &.arw{ | |
| width: 10px; | |
| } | |
| } | |
| li{ | |
| &.last{ | |
| color: $breadcrumb-last; | |
| } | |
| a{ | |
| color: $breadcrumb; | |
| font-size: 13px !important; | |
| } | |
| } | |
| } | |
| } | |
| // responsividade | |
| @media (max-width: 767px){ | |
| .topo-secao{ | |
| .breadcrumb{ | |
| margin-bottom: 23px; | |
| } | |
| } | |
| .head-details{ | |
| padding-left: 18px; | |
| margin-bottom: 15px; | |
| .label-detail{ | |
| margin-bottom: 5px; | |
| } | |
| } | |
| } | |
| /* | |
| .topo-secao (fim) | |
| ############# | |
| ####################*/ | |
| h1{ | |
| @include set-font(helvetica_neue_lt_std45_light, 40px, 40px, #58595b, left); | |
| margin: 19px 0 0 0 !important; | |
| small{ | |
| font-size: 14px; | |
| } | |
| } | |
| /*#################### | |
| ############# | |
| h2, h3 | |
| - Padrão visual dos cabeçalhos de nível 2 e 3, dentro de uma seção (.page-content) | |
| */ | |
| h2{ | |
| @include set-font(helvetica_neue_lt_std45_light, 21px, 41px, $blue-moip, left); | |
| padding-bottom: 5px; | |
| &:before{ | |
| display: inline-block; | |
| position: relative; | |
| font-family: FontAwesome; | |
| top: -2px; | |
| color: $blue-light; | |
| font-size: 13px; | |
| margin: 0 10px 0 0; | |
| content: "\f054"; | |
| } | |
| small{ | |
| font-size: 14px; | |
| } | |
| } | |
| h3{ | |
| @include set-font(helvetica_neue_lt_std45_light, 18px, 20px, inherit, left); | |
| small{ | |
| font-size: 14px; | |
| } | |
| } | |
| /* | |
| h2,h3 (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .box | |
| - Box de informação com cantos chanfrados | |
| */ | |
| .mini-box{ | |
| @extend .box; | |
| width: auto !important; | |
| height: 0; | |
| min-width: 30px !important; | |
| min-height: 30px !important; | |
| } | |
| .box { | |
| @include round-border(5px, 5px, 5px, 5px); | |
| @include transition(all, .2s, ease-in-out); | |
| position: relative; | |
| width: 213px; | |
| min-height: 107px; | |
| padding: 26px 23px; | |
| margin-bottom: 25px; | |
| .more{ | |
| @include block-relative; | |
| @include round-border(10px, 10px, 10px, 10px); | |
| clear: both; | |
| color: #fff; | |
| font-size: 11px; | |
| font-weight: 600; | |
| margin-top: 10px; | |
| span{ | |
| text-decoration: underline; | |
| } | |
| i{ | |
| float: right; | |
| } | |
| }/* .more */ | |
| .details { | |
| .desc{ | |
| @include block-relative; | |
| @include set-font(helvetica_neue_lt_std45_light, 16px, 20px, white, center); | |
| } | |
| .number{ | |
| @include block-relative; | |
| //@include set-font(helveticaltstd-cond, 32px, 40px, white, left); | |
| @extend .tx-lt-num; | |
| @extend .cl-white; | |
| text-align: center; | |
| font-size: 32px; | |
| line-height: 40px; | |
| clear: both; | |
| margin-top: 22px; | |
| left: 1px; | |
| small{ | |
| text-align: right; | |
| font-size: 16px; | |
| letter-spacing: -1px; | |
| font-weight: 500; | |
| } | |
| &.big{ | |
| font-size: 42px; | |
| padding-top: 10px; | |
| } | |
| .balance-box-currency { font-size: 20px;} | |
| .balance-box-period { font-size: 16px;} | |
| .balance-box-info { display: block; font-size:14px; padding: 0; line-height: 16px; text-align: center; color: inherit;} | |
| } | |
| }/* .details */ | |
| input[type=text] { | |
| color: $form-label; | |
| line-height: 38px; | |
| height: 42px; | |
| text-align: right; | |
| font-size:30px; | |
| } | |
| &.deselected { | |
| opacity: 0.6; | |
| filter: alpha(opacity=60); | |
| } | |
| &:hover { | |
| text-decoration: none; | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| } | |
| &.blue{ | |
| background-color: $blue-light; | |
| } | |
| &.lightgrey{ | |
| background-color: #D1D3D4; | |
| .more{ | |
| color: $form-label; | |
| } | |
| .details { | |
| .desc { | |
| color: $form-label; | |
| } | |
| .number{ | |
| color: $form-label; | |
| } | |
| } | |
| } | |
| &.white{ | |
| background-color: #fff; | |
| border: 1px solid #D1D3D4; | |
| .more{ | |
| color: $form-label; | |
| } | |
| .details { | |
| .desc { | |
| color: $form-label; | |
| } | |
| .number{ | |
| color: $form-label; | |
| } | |
| } | |
| } | |
| &.purple { | |
| background-color: #7957a5; | |
| } | |
| &.red{ | |
| background-color: #FF9C90; | |
| .more{ | |
| color: white; | |
| } | |
| } | |
| &.bank-account .details { | |
| .desc { | |
| font-size: 22px; | |
| } | |
| .number{ | |
| font-size: 26px; | |
| } | |
| } | |
| &.deselected .more { | |
| color: $form-label; | |
| } | |
| } | |
| .box-content { | |
| @include block-absolute; | |
| @include round-border(10px, 10px, 10px, 10px); | |
| @include transition(opacity, .2s, linear); | |
| opacity: 0; | |
| filter: alpha(opacity=0); | |
| background-color: inherit; | |
| left: 0; | |
| top: 0; | |
| font-size:13px; font-family: open_sansregular; width: 259px; | |
| ul{ | |
| list-style:none; margin:0; padding:5px 0 0; | |
| li{ | |
| padding: 5px 20px !important; border-bottom: 1px solid #DDD; | |
| i{ | |
| vertical-align:middle; | |
| } | |
| strong{ | |
| font-family: open_sansbold; | |
| } | |
| &:nth-child(even) { color:#E02222; } | |
| &:last-child { border-bottom:none; font-weight: bold; } | |
| } | |
| } | |
| &.show{ | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| } | |
| } | |
| .box-holder{ | |
| float: left; | |
| width: 275px; | |
| min-height: 207px; | |
| margin-left: 0; | |
| margin-right: 2.127659574468085%; | |
| } | |
| /* | |
| .box (fim) | |
| ############# | |
| ####################*/ | |
| .alert{ | |
| &.alert-moip-gray{ | |
| background-color: #eee; | |
| border-color: #ddd; | |
| color: #999; | |
| } | |
| &.alert-moip-lightpurple{ | |
| background-color: #e0d5e8; | |
| color: #ac62e2; | |
| border-color: #d8c6e5; | |
| } | |
| &.alert-moip-yellow{ | |
| background-color: #FDE5D4; | |
| color: #e78c4c; | |
| border-color: #e3ccbc; | |
| } | |
| &.alert-moip-lightblue{ | |
| background-color: #dbebf4; | |
| color: $blue-light; | |
| border-color: #a2d6f6; | |
| } | |
| } | |
| /* | |
| .column - coluna lateral de 'disclaimer' | |
| */ | |
| .column{ | |
| @include round-border(5px, 5px, 5px, 5px); | |
| @include transition(all, .2s, ease-in-out); | |
| font-size: 14px; | |
| position: relative; | |
| width: 213px; | |
| min-height: 107px; | |
| padding: 26px 23px; | |
| margin-bottom: 25px; | |
| &.lightgray{ | |
| background-color: #D1D3D4; | |
| } | |
| h3{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| font-size: 18px; | |
| line-height: 20px; | |
| margin-bottom: 5px; | |
| bdi{ | |
| display: block; | |
| font-family: helvetica_neue_lt_std45_light; | |
| text-decoration: underline; | |
| } | |
| } | |
| ul{ | |
| margin-top: 10px; | |
| li{ | |
| margin-bottom: 10px; | |
| strong{ | |
| display: block; | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| } | |
| } | |
| } | |
| /*#################### | |
| ############# | |
| BOTÕES | |
| - Configurações e padronizações gerais dos novos botões | |
| */ | |
| .btn-moip{ | |
| @include inline-block; | |
| @include set-font(helveticaltstd-cond, 16px, 16px/* 31px */, white, center); | |
| @include round-border(3px); | |
| white-space: nowrap; | |
| text-shadow: none; | |
| //min-height: 30px; | |
| padding: 7px 31px 7px 29px; | |
| border: 0; | |
| &:hover{ | |
| cursor: pointer; | |
| box-shadow: 0px 1px 2px #cfcfcf; | |
| } | |
| &.box-friendly{ | |
| padding: 7px 0 7px 0 !important; // para ficar alinhado abaixo de um box | |
| } | |
| &[disabled="disabled"]{ | |
| opacity: .6; | |
| filter: alpha(opacity=60); | |
| } | |
| &[disabled="disabled"]:hover{ | |
| cursor: default; | |
| box-shadow: none; | |
| } | |
| } | |
| .btn-moip-lg{ | |
| @extend .btn-moip; | |
| @include set-font(helveticaneuemd-cd, 26px, 69px, white); | |
| @include round-border(20px); | |
| height: 69px; | |
| padding: 0 54px 0 50px; | |
| } | |
| .btn-moip-dropdown{ | |
| @extend .btn-moip-gray; | |
| padding-left: 10px; | |
| padding-right: 15px; | |
| .caret{ | |
| position: relative; | |
| top: 8px; | |
| right: 0px; | |
| border-top-color: white; | |
| } | |
| /* | |
| @include set-font(helveticaltstd-cond, 16px, 22px, white !important); | |
| @extend .btn-bg-gray; | |
| background: #a8a9ad !important; | |
| box-shadow: none !important; | |
| border: 0 !important; | |
| text-shadow: none !important; | |
| */ | |
| } | |
| .btn-bg-purple{ | |
| background: $purple; | |
| color: white; | |
| &:hover{ | |
| background: $purple; /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmYThkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNDdjYzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
| background: -moz-linear-gradient(top, $purple 0%, #7f479e 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$purple), color-stop(100%,#7f479e)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, $purple 0%,#7f479e 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, $purple 0%,#7f479e 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, $purple 0%,#7f479e 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, $purple 0%,#7f479e 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$purple', endColorstr='#7f479e',GradientType=0 ); /* IE6-8 */ | |
| } | |
| &[disabled="disabled"]:hover{ | |
| background: $purple; | |
| } | |
| } | |
| .btn-bg-blue{ | |
| background: #3994D1; | |
| color: white; | |
| &:hover{ | |
| background: #247cc2; /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmYThkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNDdjYzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
| background: -moz-linear-gradient(top, #247cc2 0%, #4fa8da 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#247cc2), color-stop(100%,#4fa8da)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #247cc2 0%,#4fa8da 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #247cc2 0%,#4fa8da 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #247cc2 0%,#4fa8da 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #247cc2 0%,#4fa8da 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#247cc2', endColorstr='#4fa8da',GradientType=0 ); /* IE6-8 */ | |
| } | |
| &[disabled="disabled"]:hover{ | |
| background: #3994D1; | |
| } | |
| } | |
| .btn-bg-gray{ | |
| background: #a8a9ad; | |
| color: white; | |
| &:hover{ | |
| background: #818284; /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgxODI4NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iI2E4YTlhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(top, #818284 0%, #a8a9ad 74%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818284), color-stop(74%,#a8a9ad)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #818284 0%,#a8a9ad 74%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #818284 0%,#a8a9ad 74%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #818284 0%,#a8a9ad 74%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #818284 0%,#a8a9ad 74%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818284', endColorstr='#a8a9ad',GradientType=0 ); /* IE6-8 */ | |
| } | |
| &[disabled="disabled"]:hover{ | |
| background: #a8a9ad; | |
| } | |
| } | |
| .btn-bg-red{ | |
| background: #f93832; | |
| color: white; | |
| &:hover{ | |
| background: #f93832; /* Old browsers */ | |
| /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgxODI4NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iI2E4YTlhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(top, #f93832 0%, #fb5045 74%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f93832), color-stop(74%,#fb5045)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #f93832 0%,#fb5045 74%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #f93832 0%,#fb5045 74%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #f93832 0%,#fb5045 74%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #f93832 0%,#fb5045 74%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f93832', endColorstr='#fb5045',GradientType=0 ); /* IE6-8 */ | |
| } | |
| } | |
| /* | |
| BOTÕES (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .btn-moip-<cor> | |
| - Botão colorido | |
| - Azul, cinza e vermelho (normal) | |
| - Roxo (grande) | |
| */ | |
| .btn-moip-blue{ | |
| @extend .btn-moip; | |
| @extend .btn-bg-blue; | |
| &:hover{ | |
| color: white; | |
| text-decoration: none; | |
| } | |
| } | |
| .btn-moip-gray{ | |
| @extend .btn-moip; | |
| @extend .btn-bg-gray; | |
| &:hover{ | |
| color: white; | |
| text-decoration: none; | |
| } | |
| } | |
| .btn-moip-red{ | |
| @extend .btn-moip; | |
| @extend .btn-bg-red; | |
| &:hover{ | |
| color: white; | |
| text-decoration: none; | |
| } | |
| } | |
| .btn-moip-lg-purple{ | |
| @extend .btn-moip-lg; | |
| @extend .btn-bg-purple; | |
| &:hover{ | |
| color: white; | |
| text-decoration: none; | |
| } | |
| } | |
| /* | |
| .btn-moip-<cor> (fim) | |
| ############# | |
| ####################*/ | |
| .tooltips img{ | |
| vertical-align: middle; | |
| } | |
| .well{ | |
| @extend .bootstrap-well; | |
| hr{ | |
| margin: 19px 0 18px 0; | |
| } | |
| strong{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| } | |
| /*#################### | |
| ############# | |
| .itens-valores | |
| - Lista de item + valor, separados por uma seta azul utilizano o formato .well(bootstrap) customizado | |
| */ | |
| .itens-valores{ | |
| @extend .bootstrap-well; | |
| div.titulo{ | |
| @extend .bootstrap-row-fluid; | |
| margin-top: 25px; | |
| text-align: right; | |
| strong{ | |
| @extend .span4; | |
| color: #444; | |
| left: -27px; | |
| position: relative; | |
| float: left; | |
| text-align: right; | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| &:first-child{ | |
| margin-top: 0; | |
| } | |
| } | |
| div.linha{ | |
| @extend .bootstrap-row-fluid; | |
| margin-top: 10px; | |
| .item{ | |
| @extend .span4; | |
| left: -27px; | |
| position: relative; | |
| float: left; | |
| text-align: right; | |
| &:before{ | |
| @include block-absolute; | |
| @include dimensions(5px, 14px); | |
| @include set-font(FontAwesome, 14px, 14px, #A7A9AC); | |
| right: -25px; | |
| top: 4px; | |
| content: "\f0da"; | |
| } | |
| i{ | |
| position: absolute; | |
| font-size: 14px; | |
| //margin-left: 16px; | |
| //margin-right: 2px; | |
| top: 4px; | |
| right: -25px; | |
| color: $breadcrumb; | |
| } | |
| } | |
| .valor{ | |
| @extend .span4; | |
| @include set-font(helvetica_neue_lt_std65Md, 21px, 21px, $blue-light, right); | |
| margin-left: 16px; | |
| float: left; | |
| white-space: nowrap; | |
| //position: relative; | |
| //text-align: right; | |
| //width: 132px; | |
| small{ | |
| font-size: 10px; | |
| top: -2px; | |
| position: relative; | |
| } | |
| bdi{ | |
| position: relative; | |
| } | |
| i{ | |
| @include block-absolute; | |
| font-size: 14px; | |
| color: $breadcrumb; | |
| top: 7px; | |
| right: -13px; | |
| //margin-left: 2px; | |
| //right: -13px; | |
| } | |
| &.clickable{ | |
| bdi:before{ | |
| @include block-absolute; | |
| @include dimensions(12px, 14px); | |
| @include set-font(FontAwesome, 14px, 14px, #a7a9ac); | |
| top: 7px; | |
| right: -13px; | |
| content: "\f059"; | |
| } | |
| } | |
| } | |
| &:first-child{ | |
| margin-top: 0; | |
| } | |
| } | |
| } | |
| // responsividade | |
| @media (max-width: 767px) { | |
| .itens-valores{ | |
| div.titulo{ | |
| font-size: 13px; | |
| line-height: 13px; | |
| strong{ | |
| width: 38%; | |
| } | |
| } | |
| div.linha{ | |
| font-size: 13px; | |
| line-height: 13px; | |
| .item{ | |
| padding-top: 3px; | |
| width: 38%; | |
| float: left; | |
| } | |
| .valor{ | |
| //width: 55%; | |
| font-size: 17px; | |
| float: left; | |
| i{ | |
| top: 4px; | |
| //right: -14px; | |
| //margin-left: 6px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* | |
| .itens-valores (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .popover | |
| - Hint que aparece ao clicar em determinado ícone | |
| */ | |
| .popover { | |
| max-width: 350px; | |
| width: auto; | |
| font-size: 13px; | |
| line-height: 16px; | |
| font-family: helvetica_neue_lt_std45_light; | |
| .popover-content p{ | |
| font-size: 13px; | |
| line-height: 16px; | |
| margin-bottom: 5px; | |
| } | |
| h4{ | |
| font-size: 16px; | |
| line-height: 36px; | |
| color: $form-label; | |
| } | |
| ul{ | |
| list-style: disc inside; | |
| li{ | |
| padding-left: 10px; | |
| } | |
| } | |
| strong{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| color: $form-label; | |
| } | |
| } | |
| /* | |
| .popover (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| table | |
| - Comportamento para todas as tabelas | |
| */ | |
| table{ | |
| &.table-bordered{ | |
| border: 1px solid $border-common !important; | |
| } | |
| &.table-hover-clickables{ | |
| tr.clickable:hover td{ | |
| background-color: #f5f5f5 !important; | |
| } | |
| } | |
| thead{ | |
| th{ | |
| @include set-font(helvetica_neue_lt_std65Md, 13px, 20px, $form-label); | |
| padding: 12px 8px 7px 8px !important; | |
| background-color: $table-thead; | |
| &.order-payment{ | |
| text-align: center; | |
| } | |
| } | |
| } | |
| tbody{ | |
| td{ | |
| //width: 16% !important; | |
| font-family: open_sansregular; | |
| color: $form-label; | |
| font-size: 12px; | |
| line-height: 18px; | |
| border: 0 !important; | |
| &.masked{ | |
| overflow: hidden; | |
| .mask{ | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| width: 0px; | |
| height: 100%; | |
| white-space: nowrap; | |
| } | |
| } | |
| .holder{ | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| width: 0px; | |
| height: 0; | |
| } | |
| strong{ | |
| font-family: open_sansbold; | |
| } | |
| &.order-id{ | |
| font-size: 9px; | |
| line-height: 18px; | |
| padding-top: 12px; | |
| } | |
| &.order-payment{ | |
| text-align: center; | |
| font-size: 9px; | |
| padding-top: 5px; | |
| span{ | |
| @include block-relative; | |
| margin-top: -16px; | |
| } | |
| } | |
| &.order-value{ | |
| //font-size: 16px; | |
| } | |
| &.order-status{ | |
| small{ | |
| @include block-relative; | |
| } | |
| } | |
| .tooltips img{ | |
| vertical-align: baseline !important; | |
| } | |
| } | |
| } | |
| &.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#e6e7e8;} | |
| &.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#f5f5f5;} | |
| &.table-striped tbody > tr:nth-child(odd) { | |
| td, .table-striped tbody > tr:nth-child(odd) > th { | |
| //background-color: #e6e7e8; | |
| } | |
| } | |
| i{ | |
| font-size: 9px; | |
| } | |
| } | |
| /* | |
| table (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .titulo-tabela-resultados | |
| - Título que precede uma tabela de resultados. | |
| */ | |
| .titulo-tabela-resultados{ | |
| @include set-font(helvetica_neue_lt_std45_light, 16px, 33px, $gray-text-light); | |
| margin-bottom: 0px; | |
| strong{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| color: $form-label; | |
| } | |
| } | |
| /* | |
| .titulo-tabela-resultados (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .alert | |
| - Estilização para qualquer alert | |
| */ | |
| .alert{ | |
| font-size: 13px; | |
| line-height: 16px; | |
| margin-bottom: 6px; | |
| text-shadow: none; | |
| font-family: helvetica_neue_lt_std45_light; | |
| strong{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| } | |
| /* | |
| .alert (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .label-detail | |
| - Estilização para informações no formato titulo->subtitulo, | |
| com titulo acima e subtitulo embaixo | |
| */ | |
| .label-detail { | |
| @include set-font(helvetica_neue_lt_std65Md, 13px, 14px, $breadcrumb); | |
| padding:0 20px 0 0; | |
| margin-bottom:10px; | |
| bdi { | |
| @include block; | |
| @include set-font(helvetica_neue_lt_std65Md, 21px, 20px, $gray-text); | |
| padding-top: 4px; | |
| &.big-blue{ | |
| color: $blue-light; | |
| font-size: 30px; | |
| line-height: 27px; | |
| } | |
| img{ | |
| @include relative; | |
| top: -6px; | |
| vertical-align: top; | |
| } | |
| } | |
| &.blue{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| font-size: 21px; | |
| line-height: 24px; | |
| color: $blue-light; | |
| } | |
| &.thin{ | |
| span{ | |
| font-family: helvetica_neue_lt_std45_light; | |
| font-size: 16px; | |
| line-height: 20px; | |
| color: $gray-text-light; | |
| } | |
| } | |
| span img{ | |
| //vertical-align: middle; | |
| } | |
| } | |
| /* | |
| .label-detail (fim) | |
| ############# | |
| ####################*/ | |
| /*#################### | |
| ############# | |
| .modal | |
| - Estilização para os modais, tentando prever todas as informações já existentes até então | |
| */ | |
| body.modal-scrollable{ | |
| overflow-y: hidden; | |
| .modal-wrapper{ | |
| &.scrolling{ | |
| .modal{ | |
| &.fade{ | |
| top: -25% !important; | |
| } | |
| &.in{ | |
| top: 0% !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .modal-wrapper{ | |
| display: none; | |
| position: fixed; | |
| overflow-y: scroll; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| z-index: 1000000; | |
| } | |
| .modal-backdrop{ | |
| z-index: 99999; | |
| } | |
| .modal{ | |
| @include set-font(helvetica_neue_lt_std45_light, 16px, 20px, $gray-text-light, left); | |
| position: absolute; | |
| //max-height: 85%; | |
| strong{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| .modal-h1{ | |
| @include block-relative; | |
| font-size: 40px; | |
| line-height: 40px; | |
| color: $form-label; | |
| padding-bottom: 30px; | |
| } | |
| .modal-h2{ | |
| @include block-relative; | |
| color: $blue-moip !important; | |
| font-size: 21px; | |
| margin-bottom: 10px; | |
| &:before{ | |
| display: inline-block; | |
| position: relative; | |
| font-family: FontAwesome; | |
| top: -2px; | |
| color: $blue-light; | |
| font-size: 13px; | |
| margin: 0 10px 0 0; | |
| content: "\f054"; | |
| } | |
| } | |
| .modal-h3{ | |
| @include block-relative; | |
| } | |
| .modal-h4{ | |
| @include block-relative; | |
| } | |
| .modal-header{ | |
| position: relative; | |
| padding: 42px 36px 2px 36px; | |
| border: 0; | |
| p{ | |
| @include set-font(helvetica_neue_lt_std45_light, 16px, 20px, $gray-text-light, left); | |
| } | |
| button.close{ | |
| @include block-relative; | |
| @include dimensions(21px, 21px, image-url("moip/sprite.png") -325px -17px); | |
| z-index: 99; | |
| &:hover{ | |
| opacity: .9; | |
| filter: alpha(opacity=90); | |
| } | |
| } | |
| } | |
| .modal-body{ | |
| overflow-y: visible; | |
| max-height: 100% !important;//1600px; | |
| padding: 0 41px; | |
| border: 0; | |
| label{ | |
| &.radio.inline{ | |
| margin-left: 0; | |
| input[type="radio"]{ | |
| margin: 0 12px 0 0; | |
| } | |
| } | |
| } | |
| select{ | |
| width: 100%; | |
| } | |
| .well{ | |
| padding: 26px 20px 20px 20px; | |
| } | |
| .pull-right { | |
| strong{ | |
| @include block-relative; | |
| } | |
| hr{ | |
| margin: 13px 0 17px 0; | |
| } | |
| .total{ | |
| font-family: helvetica_neue_lt_std65Md; | |
| } | |
| } | |
| .receiver-debited-cloned, #tax-amount-line{ | |
| div{ | |
| min-height: 16px; | |
| } | |
| } | |
| &:before{ | |
| @include dimensions(100%, 1px, #e6e7e8); | |
| display: table; | |
| position: relative; | |
| bottom: -8px; | |
| margin-bottom: 26px; | |
| content: ""; | |
| } | |
| } | |
| .modal-footer{ | |
| text-align: left; | |
| padding: 39px 41px 33px 41px; | |
| border: 0; | |
| background-color: white; | |
| button{ | |
| margin-right: 16px; | |
| } | |
| &:before{ | |
| @include dimensions(100%, 1px, #e6e7e8); | |
| display: table; | |
| position: relative; | |
| top: -23px; | |
| content: ""; | |
| } | |
| } | |
| hr{ | |
| border-top: 1px solid #e6e7e8; | |
| &.sep{ | |
| width: 90%; | |
| margin: 19px auto 17px auto; | |
| } | |
| } | |
| label.inline.radio{ | |
| @include block-relative; | |
| padding-left: 0; | |
| text-indent: 12px; | |
| padding-top: 2px; | |
| /* span.radio{ | |
| left: 16px; | |
| } */ | |
| } | |
| .span1, .span9{ | |
| position: relative; | |
| } | |
| } | |
| @media all and (min-width: 768px){ | |
| .modal{ | |
| width: 70%; | |
| margin-left: -36%; | |
| } | |
| } | |
| /* | |
| .modal (fim) | |
| ############# | |
| ####################*/ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment