zulip/static/styles/portico/billing.scss

275 lines
6.3 KiB
SCSS
Raw Normal View History

.billing-upgrade-page {
font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
background-color: hsl(0, 0%, 98%);
height: 100vh;
.hero {
background-color: hsl(153, 32%, 55%);
color: hsl(153, 32%, 55%);
position: absolute;
top: 0;
width: 100%;
}
.small-hero {
padding: 120px 50px 0;
}
.main {
width: 800px;
max-width: 90%;
margin: 0 auto;
}
h1 {
margin: 30px 0;
font-weight: bold;
}
.nav {
margin-bottom: 0;
}
.nav-tabs {
border-bottom: 0;
font-size: 1.2em;
a {
font-weight: bold;
}
}
.tab-content {
border: 1px solid hsl(0, 0%, 87%);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 20px;
background-color: hsl(0, 0%, 100%);
font-size: 1.1em;
}
.support-link {
margin: 10px 20px;
a,
a:hover,
a:visited {
color: hsl(170, 47%, 33%);
font-weight: 500;
}
}
.license-management,
.payment-schedule {
label {
display: inline-block;
}
input[type="radio"] {
display: none;
&:checked {
+ .box {
background-color: hsl(153, 32%, 55%);
color: hsl(0, 0%, 100%);
border-color: hsl(152, 33%, 39%);
}
}
}
.box {
width: 120px;
height: 70px;
background-color: hsl(0, 0%, 94%);
transition: all .2s ease;
display: inline-block;
text-align: center;
cursor: pointer;
position: relative;
border: 1px solid hsl(0, 0%, 91%);
border-radius: 8px;
margin: 0 10px 5px 0;
padding: 30px 20px;
vertical-align: top;
&:hover {
background-color: hsl(0, 0%, 91%);
border-color: hsl(0, 0%, 80%);
}
.schedule-time {
font-weight: bold;
font-size: 1.2em;
margin-top: 10px;
}
.schedule-amount {
margin-top: 5px;
font-size: 1.1em;
height: 50px;
}
.schedule-amount-2 {
font-size: 0.9em;
}
.management-type {
font-weight: bold;
font-size: 1.2em;
2019-01-29 15:30:19 +01:00
margin-top: 10px;
}
.management-type-text {
font-size: 1.1em;
margin-top: 5px;
}
}
}
.stripe-button-el {
padding: 11px 25px 11px 25px;
font-weight: 400;
color: hsl(0, 0%, 100%);
background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
border: 0;
height: 40px;
margin: 5px 0 0 0;
span {
background: 0;
box-shadow: none;
font-family: 'Source Sans Pro', Helvetica, Arial;
font-size: 1.4em;
line-height: 20px;
}
}
.stripe-button-el:hover {
background-color: hsl(169, 65%, 42%);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
}
.stripe-button-el:active,
.stripe-button-el:not(:disabled):active {
background-color: hsl(169, 70%, 32%);
span {
background: 0;
box-shadow: none;
}
}
.stripe-button-el:disabled {
span {
background: none;
}
}
.stripe-button-el:hover:disabled {
box-shadow: none;
background-color: hsl(0, 0%, 78%);
pointer-events: none;
}
.invoice-button {
font-size: 17px;
font-weight: 700 !important;
}
#mix_license_count,
#manual_license_count,
#invoiced_licenses {
width: 50px;
}
#error-message-box {
margin-top: 10px;
font-weight: 600;
display: none;
}
#planchange-loading,
#cardchange-loading,
#invoice-loading,
#autopay-loading {
display: none;
min-height: 55px;
text-align: center;
}
#planchange-success,
#cardchange-success,
#invoice-success,
#autopay-success {
text-align: center;
display: none;
}
#planchange-error,
#cardchange-error,
#invoice-error,
#autopay-error {
text-align: center;
display: none;
}
#update-card-button-span {
display: block;
min-height: 30px;
}
.zulip-loading-logo {
margin: 0 auto;
width: 24px;
height: 24px;
}
.zulip-loading-logo svg circle {
fill: hsl(0, 0%, 27%);
stroke: hsl(0, 0%, 27%);
}
.zulip-loading-logo svg path {
fill: hsl(0, 0%, 100%);
stroke: hsl(0, 0%, 100%);
}
#planchange_loading_indicator,
#cardchange_loading_indicator,
#invoice_loading_indicator,
#autopay_loading_indicator {
margin: 10px auto;
}
#planchange_loading_indicator_box_container,
#cardchange_loading_indicator_box_container,
#invoice_loading_indicator_box_container,
#autopay_loading_indicator_box_container {
position: absolute;
left: 50%;
}
#planchange_loading_indicator_box,
#cardchange_loading_indicator_box,
#invoice_loading_indicator_box,
#autopay_loading_indicator_box {
position: relative;
left: -50%;
top: -41px;
z-index: 1;
border-radius: 6px;
}
#planchange_loading_indicator .loading_indicator_text,
#cardchange_loading_indicator .loading_indicator_text,
#invoice_loading_indicator .loading_indicator_text,
#autopay_loading_indicator .loading_indicator_text {
margin-left: -25px;
}
#license-automatic-section,
#license-manual-section,
#license-mix-section {
display: none;
}
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}