overleaf/services/web/frontend/stylesheets/app/subscription.less

289 lines
4.4 KiB
Text
Raw Normal View History

.form-helper {
display: inline-block;
width: 1.3em;
height: 1.3em;
line-height: 1.3;
vertical-align: initial;
background-color: @gray;
color: #fff;
font-weight: bolder;
border-radius: 50%;
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
}
.price-breakdown {
text-align: center;
margin-bottom: -10px;
}
2016-08-22 12:03:29 -04:00
.input-feedback-message {
display: none;
font-size: 0.8em;
2018-05-30 08:06:27 -04:00
.has-error & {
display: inline-block;
}
2016-08-22 12:03:29 -04:00
}
.payment-submit {
padding-top: (@line-height-computed / 2);
}
.payment-method-toggle {
margin-bottom: (@line-height-computed / 2);
&-switch {
display: inline-block;
width: 50%;
text-align: center;
border: solid 1px @gray-lighter;
border-radius: @border-radius-large 0 0 @border-radius-large;
padding: (@line-height-computed / 2);
color: @btn-switch-color;
&:hover,
&:focus {
color: @btn-switch-color;
text-decoration: none;
}
&:hover {
color: @btn-switch-hover-color;
}
& + & {
border-left-width: 0;
border-radius: 0 @border-radius-large @border-radius-large 0;
}
&-selected {
color: @link-active-color;
box-shadow: inset 0 -2px 0 0;
&:hover,
&:focus {
color: @link-active-color;
}
}
}
2018-04-17 06:26:02 -04:00
}
2018-05-30 08:06:27 -04:00
.team-invite .message {
margin: 3em 0;
2018-05-30 08:06:27 -04:00
}
.team-invite-name {
word-break: break-word;
}
2018-04-17 06:26:02 -04:00
.capitalised {
text-transform: capitalize;
2018-05-30 08:06:27 -04:00
}
.three-d-secure-container,
.three-d-secure-container--react {
> .three-d-secure-recurly-container {
height: 400px;
> div[data-recurly='three-d-secure-container'] {
height: 100%;
}
}
}
.price-switch-header {
margin-bottom: @line-height-computed;
h2 {
margin: 0;
}
.student-disclaimer {
font-size: 14px;
color: @gray;
margin: 12.5px 0 0 0;
}
}
.price-feature-description {
h3 {
margin-top: 0;
}
h4 {
margin-top: 5px;
margin-bottom: 15px;
}
ul {
padding-left: 10px;
}
li {
list-style-position: inside;
}
.number-of-collaborators {
margin-bottom: 5px;
}
}
.price-summary {
padding-bottom: 7.5px;
.price-summary-line {
display: flex;
justify-content: space-between;
.price-summary-line-width {
width: 70%;
}
}
.price-summary-total-line {
margin-top: 5px;
font-size: 16px;
.price-summary-due {
color: @green-50;
}
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
}
.price-nowrap {
white-space: nowrap;
}
.price-details-spacing {
height: @line-height-computed / 2;
}
.price-cancel-anytime {
font-size: 12px;
}
.trial-coupon-summary {
font-size: 12px;
padding-top: 7.5px;
padding-bottom: 7.5px;
.trial-coupon-summary-list-container {
padding-left: 0;
li {
display: flex;
align-items: center;
font-size: 14px;
justify-content: flex-start;
margin-bottom: 8px;
gap: 12px;
}
}
}
.toggle-address-second-line {
margin-bottom: @line-height-computed / 2;
}
.payment-method-toggle {
border-bottom: 1px solid @hr-border;
}
.change-currency {
margin-top: 5px;
}
.change-currency-toggle {
padding-left: 0px;
font-size: 12px;
text-decoration: underline;
color: @text-small-color;
&:hover,
&:focus {
color: @text-small-color;
}
}
.change-currency-dropdown-selected-icon {
position: absolute;
left: 10px;
}
.recurly-hosted-field-input {
&:extend(.form-control);
}
.back-btn {
padding: 0 10px 2px 12px;
border-radius: 50%;
border: none;
color: @gray-dark;
&:hover {
background-color: @neutral-20;
color: @gray-dark;
}
&:active {
background-color: @gray-lighter;
}
}
a.row-link {
line-height: 24px;
color: @neutral-70;
display: flex;
flex-direction: row;
text-decoration: none;
padding: 6px 0;
&:active,
&:focus,
&:hover {
text-decoration: none;
outline: none;
background-color: @gray-lightest;
}
.icon {
display: flex;
flex: 1 1 5%;
padding: 0 16px;
margin-top: 16px;
> span {
font-size: 16px;
}
&.arrow {
margin-top: 12px;
> span {
font-size: 24px;
}
}
}
.text {
flex: 1 1 90%;
display: flex;
flex-direction: column;
.heading {
font-weight: @btn-font-weight;
}
.subtext {
font-weight: 400;
}
}
}
.check-icon {
background-color: #ebf6ea;
border-radius: 50%;
color: #5bb553;
height: 20px;
width: 20px;
}