.settings__modal { color: $darkGrey; .modal-body { h5 { margin-bottom: 1.5em; letter-spacing: .1rem; small { letter-spacing: initial; } } form > h3, form > h5 { color: $blue; font-size: $font-size-titulos-mobile-vw; font-weight: 700; // text-transform: uppercase; @media (min-width: $mobile-l) { font-size: $font-size-titulos-tablet; } } } button { &.tabButton { font-size: $font-size-secundarios-mobile-vw; font-weight: 700; &:first-of-type { // margin-left: -8%; margin-left: -2em; } &:last-of-type { // margin-right: -8%; margin-right: -2em; } @media (min-width: $tablet) { font-size: $font-size-base-tablet; &:first-of-type, &:last-of-type { margin-left: 0; margin-right: 0; } } } } &--account { button { &.tabButton { font-size: $font-size-terciarios-mobile; font-weight: 700; padding: 0.5em 0.9em; @media (min-width: $tablet) { font-size: $font-size-terciarios-tablet; } } } .overflowTabButtons { text-align: center; @media (min-width: $tablet) { margin-left: -12%; margin-right: -12%; } button { &.tabButton { font-size: 2.8vw; font-weight: 700; padding: 0.5em 0.5em; @media (min-width: $tablet) { font-size: $font-size-terciarios-tablet; padding: 0.5em 0.9em; } } } } } .deactivate { padding-top: 2em; & > .form-group { text-align: left; @include flexboxPrefix(); @include flexAlign(flex-start); @include flexJustify(center); @media (min-width: $tablet - 1) { @include flexAlign(center); } button.btn-orange { margin: 0 0.8em 0 0; padding: 0.3em/* 0.6em*/; width: auto; .button__icon { display: table-cell; // vertical-align: middle; height: 100%; i { // display: inline; display: block; margin: 0.1em -0.1em 0 0.1em; position: static; text-align: left; width: 1em; &.fa-check-square-o { // margin-right: -0.15em; } &:before { width: 1em; } } } .button__text { display: none; } } a { color: $orange; text-decoration: underline; &:hover, &:focus { color: $turquoise; } } } } .form-group { &.checkbox { input { &:checked { & + label { &:before { background-color: $blue; box-shadow: 0 0 0 1.5px $blue; } } } } } } // Get Pro CTA moved to _getProCTA module // .get-pro { // text-align: center; // // &__cta { // background-color: $lighterGrey; // margin: 3em auto; // max-width: 70%; // padding: 2em 2em $form-ctrl-padding-top-bottom; // position: relative; // // &:before { // @include transform(rotate(-12deg)); // content: url("../images/pro-feather-hat.svg"); // height: auto; // left: calc(50% - 2.5em); // // opacity: 0.36; // position: absolute; // width: 6em; // top: -2em; // z-index: 0; // } // // .btn-turquoise { // color: $blue; // display: block; // // padding-left: 1em; // // padding-right: 1em; // } // } // } .pro-settings { h4 { color: $blue; font-size: $font-size-secundarios-tablet-relative; font-weight: 700; margin-bottom: $module-marginbottom; text-align: center; text-transform: uppercase; @media (min-width: $tablet) { margin-bottom: $module-marginbottom-fixed-tablet; } } .link--button { margin-bottom: 0; padding: 0; width: auto; &.link--button--block { display: block; margin-left: auto; margin-right: auto; } } &__subscription { // @include flexboxPrefix(); // @include flexWrap(wrap); margin-bottom: $module-marginbottom; &:before { @include transition(all, 0.5s); content: url("../images/icon-pro.svg"); float: left; height: auto; margin: 0 1em $module-marginbottom 0; // pointer-events: none; // position: absolute; // right: -12.82%; // top: -2.29em; width: 2.666667em; // z-index: 1; } &__detail { margin-bottom: $module-marginbottom; // margin-left: 1em; text-align: left; h3 { color: $blue; font-size: 1em; span { text-transform: uppercase; } } @at-root main.setting #{&} > p:not(:last-child), #{&}__next-pay { font-size: $font-size-secundarios-tablet-relative; margin-bottom: 0; } .cancelled { color: red; display: inline-block; font-weight: 700; margin-left: 0.5em; } button { } } &__history { background-color: $lighterGrey; padding: $module-marginbottom; width: 100%; } } //Card module &__card { @include transition(all, 0.5s); max-height: 50vw; &--colapse { max-height: 0; overflow: hidden; } > h4 { text-align: left; } .flash { margin-bottom: 0.5em; } &__info, &__cancelAcc { &--delete { background-color: $lighterGrey; .form-container { padding: $module-marginbottom; text-align: center; } } } // &__cancelAcc { // &--delete { // background-color: $lighterGrey; // // } // } } } } .pay-history { &__item { @include flexboxPrefix(); border-bottom: 1px solid $white; padding-bottom: $form-ctrl-padding-top-bottom; padding-top: $form-ctrl-padding-top-bottom; &:last-of-type, &:only-of-type { border-bottom: none; } &__date { flex-grow: 2; } &__amount { margin-left: 1em; margin-right: 1em; text-align: right; } &__receipt { text-align: right; width: 3.5em; a { color: $orange; font-size: $font-size-secundarios-tablet-relative; text-decoration: underline; &:hover, &:focus { color: $turquoise; } } } } } .cardInfo { @include flexboxPrefix(); @include flexJustify(space-between); background-color: $lighterGrey; margin-bottom: $module-marginbottom; padding: $form-ctrl-padding; &__buttons { @include flexboxPrefix(); &:before { @include orderPrefix(0); color: $lightGrey; content: '|'; display: inline-block; margin: 0 0.5em; } button { &:first-of-type { @include orderPrefix(-1) } } } } .stripe-elements-form .elements-wrapper { background-color: #f3f3f6; display: block; font-weight: 500; padding: $form-ctrl-padding; }