42cc0d0145
* Fix all stylelint errors For any errors that fixing would require changing the output of the css disable stylelint for that line instead of modifying. * Update quality.py Make stylelint quality check pass when there are no errors * Delete empty selectors
1235 lines
23 KiB
SCSS
1235 lines
23 KiB
SCSS
// lms - views - shopping cart
|
||
// ====================
|
||
|
||
$enrollment-details-width-difference: $baseline*11.85;
|
||
$data-input-width-difference: $baseline*12.25;
|
||
$date-span-width-difference: $baseline*35;
|
||
$cart-list-border: 1px solid $border-color-1;
|
||
$hr-border: 1px solid $dark-gray2;
|
||
$input-border: 2px solid $dark-gray2;
|
||
$discount-border: 2px solid $light-gray1;
|
||
$steps-border: 3px solid $light-gray1;
|
||
$light-border: 1px solid $gray-l5;
|
||
|
||
.pull-right {
|
||
@include float(right);
|
||
}
|
||
|
||
.fa-caret-right {
|
||
// flip the icon for RTL
|
||
&::before {
|
||
@include rtl {
|
||
content: "\f0d9"; // FA icon arrow to the right
|
||
}
|
||
}
|
||
}
|
||
|
||
.notification {
|
||
padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
|
||
}
|
||
|
||
.error_msg {
|
||
margin: $baseline;
|
||
border: 1px solid $red;
|
||
padding: ($baseline/4);
|
||
color: $red;
|
||
}
|
||
|
||
.cart-errors {
|
||
@include text-align(center);
|
||
|
||
@extend %t-copy-base;
|
||
|
||
display: none;
|
||
margin-bottom: $baseline;
|
||
border-bottom: 1px solid $pink;
|
||
padding: ($baseline/2) 0;
|
||
background: $pink-l5;
|
||
color: $pink;
|
||
}
|
||
|
||
#expiry-msg {
|
||
@extend %t-copy-sub1;
|
||
|
||
margin-top: ($baseline*0.15);
|
||
border-top: $light-border;
|
||
background-color: $gray-l5;
|
||
padding: ($baseline*0.75);
|
||
text-shadow: 0 1px 1px $white;
|
||
}
|
||
|
||
.confirm-enrollment {
|
||
.title {
|
||
@include text-align(left);
|
||
|
||
@extend %t-title4;
|
||
|
||
border-bottom: $light-border;
|
||
}
|
||
|
||
.course-image {
|
||
@include float(left);
|
||
@include margin-right($baseline/2);
|
||
|
||
width: ($baseline*11.15);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.enrollment-details {
|
||
@include float(left);
|
||
|
||
margin-bottom: ($baseline);
|
||
width: calc(100% - #{$enrollment-details-width-difference});
|
||
|
||
.sub-title {
|
||
@extend %t-title5;
|
||
|
||
color: $gray-l1;
|
||
}
|
||
|
||
.course-date-label {
|
||
@include float(right);
|
||
|
||
color: $gray-l1;
|
||
}
|
||
|
||
.course-dates {
|
||
@include float(right);
|
||
|
||
@extend %t-copy-lead1;
|
||
}
|
||
|
||
.course-title h1 {
|
||
@include text-align(left);
|
||
|
||
@extend %t-title4;
|
||
@extend %t-strong;
|
||
|
||
color: $black-t3;
|
||
}
|
||
|
||
.enrollment-text {
|
||
@extend %t-copy-base;
|
||
|
||
line-height: normal;
|
||
color: $gray-l1;
|
||
}
|
||
}
|
||
|
||
a.contact-support-bg-color {
|
||
box-shadow: 0 1px 0 0 $gray-l1 inset;
|
||
border: 16px solid $gray-l1;
|
||
background-color: $gray-l1;
|
||
background-image: linear-gradient($gray-l1, $gray-l1);
|
||
text-shadow: 0 1px 0 $gray-l1;
|
||
}
|
||
|
||
a.course-link-bg-color {
|
||
box-shadow: 0 1px 0 0 $blue2 inset;
|
||
border: 16px solid $blue2;
|
||
background-color: $blue2;
|
||
text-shadow: 0 1px 0 $blue2;
|
||
}
|
||
|
||
a.link-button {
|
||
@include float(right);
|
||
@include border-radius(3px);
|
||
@include text-align(center);
|
||
|
||
@extend %t-copy-lead2;
|
||
|
||
display: inline-block;
|
||
background-clip: padding-box;
|
||
padding: ($baseline*0.3) ($baseline*0.9);
|
||
width: ($baseline*12.5);
|
||
text-transform: none;
|
||
text-decoration: none;
|
||
color: $white;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
box-shadow: 0 1px 0 0 $blue inset;
|
||
border: 16px solid $blue;
|
||
background: $blue;
|
||
}
|
||
}
|
||
|
||
button[type="submit"] {
|
||
@include float(right);
|
||
@include border-radius(3px);
|
||
|
||
@extend %t-copy-lead2;
|
||
|
||
display: inline-block;
|
||
box-shadow: 0 1px 0 0 $blue2 inset;
|
||
border: 1px solid $blue2;
|
||
background-color: $blue2;
|
||
background-image: linear-gradient($blue2, $blue2);
|
||
background-clip: padding-box;
|
||
padding: ($baseline*0.35) ($baseline*0.9);
|
||
width: ($baseline*22.5);
|
||
height: ($baseline*3.5);
|
||
text-shadow: 0 1px 0 $blue2;
|
||
text-transform: none;
|
||
text-decoration: none;
|
||
color: $white;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
box-shadow: none;
|
||
background: $blue;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopping-cart {
|
||
a.blue {
|
||
@include border-radius(3px);
|
||
|
||
@extend %t-copy-lead2;
|
||
@extend %t-regular;
|
||
|
||
display: inline-block;
|
||
margin: ($baseline/2) 0 $baseline 0;
|
||
background: $blue2;
|
||
padding: $baseline ($baseline*2);
|
||
color: white;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
select {
|
||
@extend %t-action2;
|
||
@extend %t-strong;
|
||
|
||
border: $input-border;
|
||
padding: ($baseline*0.4) ($baseline*0.6);
|
||
width: ($baseline*13);
|
||
height: auto;
|
||
font-style: normal;
|
||
|
||
// STATE: focus
|
||
&:focus {
|
||
box-shadow: none;
|
||
border-color: $dark-gray2;
|
||
}
|
||
|
||
// CASE: has class error
|
||
&.error {
|
||
border-color: $red1;
|
||
}
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.show {
|
||
display: inline-block;
|
||
}
|
||
|
||
h1 {
|
||
@include text-align(left);
|
||
|
||
@extend %t-title4;
|
||
|
||
margin: ($baseline/2) 0 0 0;
|
||
padding: ($baseline*1.5) 0;
|
||
letter-spacing: 0;
|
||
color: $dark-gray1;
|
||
}
|
||
|
||
.steps {
|
||
@extend %ui-no-list;
|
||
|
||
border-top: $steps-border;
|
||
border-bottom: $steps-border;
|
||
|
||
li {
|
||
@include font-size(20);
|
||
|
||
display: inline-block;
|
||
position: relative;
|
||
margin: 0 ($baseline*1.5);
|
||
padding: ($baseline*1.3) ($baseline*1.5);
|
||
color: $dark-gray1;
|
||
font-weight: 100;
|
||
|
||
//STATE: active
|
||
&.active {
|
||
@extend %t-regular;
|
||
|
||
border-bottom: $steps-border;
|
||
}
|
||
|
||
//CASE: is first child
|
||
&:first-child {
|
||
@include margin-left(0);
|
||
@include padding-left($baseline*1.5);
|
||
}
|
||
|
||
//CASE: is last child
|
||
&:last-child {
|
||
@include margin-right(0);
|
||
@include padding-right($baseline*1.5);
|
||
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
@include ltr {
|
||
right: -($baseline*2);
|
||
content: "\f178";
|
||
}
|
||
|
||
@include rtl {
|
||
left: -($baseline*2);
|
||
content: "\f177";
|
||
}
|
||
|
||
position: absolute;
|
||
top: ($baseline*1.3);
|
||
color: $light-gray;
|
||
font-family: FontAwesome;
|
||
font-weight: 100;
|
||
}
|
||
}
|
||
}
|
||
|
||
hr {
|
||
border-top: $hr-border;
|
||
}
|
||
|
||
.user-data {
|
||
margin: $baseline 0;
|
||
|
||
.image {
|
||
@include float(left);
|
||
|
||
width: ($baseline*11);
|
||
}
|
||
|
||
.data-input {
|
||
@include float(left);
|
||
@include margin-left($baseline*1.25);
|
||
|
||
width: calc(100% - #{$data-input-width-difference});
|
||
|
||
h3,
|
||
h3 span {
|
||
@extend %t-title6;
|
||
|
||
padding: 0;
|
||
color: $light-gray2;
|
||
}
|
||
|
||
.course-title-info {
|
||
display: inline-block;
|
||
width: 60%;
|
||
}
|
||
|
||
.course-meta-info {
|
||
@include float(right);
|
||
@include text-align(right);
|
||
|
||
display: inline-block;
|
||
width: 35%;
|
||
}
|
||
|
||
.course-registration-title,
|
||
.course-dates-title {
|
||
@extend %t-title6;
|
||
|
||
display: block;
|
||
padding: 0;
|
||
color: $light-gray2;
|
||
}
|
||
|
||
.course-display-name,
|
||
.course-display-dates {
|
||
@extend %t-title4;
|
||
|
||
display: block;
|
||
color: $dark-gray2;
|
||
}
|
||
|
||
.course-display-dates {
|
||
@include clearfix();
|
||
}
|
||
|
||
h1 {
|
||
@include float(left);
|
||
|
||
@extend %t-title4;
|
||
|
||
padding: 0 0 ($baseline/2) 0;
|
||
width: ($baseline*35);
|
||
text-transform: capitalize;
|
||
color: $dark-gray1;
|
||
|
||
// Adding this content to ensure proper display of closing parentheses
|
||
&::after {
|
||
content: "\200E";
|
||
}
|
||
|
||
span {
|
||
@extend %t-copy-base;
|
||
}
|
||
}
|
||
|
||
span.date {
|
||
@include float(right);
|
||
@include text-align(right);
|
||
|
||
width: calc(100% - #{$date-span-width-difference});
|
||
}
|
||
|
||
hr {
|
||
clear: both;
|
||
border-top: $hr-border;
|
||
}
|
||
|
||
.three-col {
|
||
.col-1 {
|
||
@include float(left);
|
||
|
||
@extend %t-copy-base;
|
||
@extend %t-regular;
|
||
|
||
padding-top: ($baseline*0.55);
|
||
width: ($baseline*22.5);
|
||
color: $light-gray2;
|
||
|
||
.price {
|
||
span {
|
||
@include padding-left($baseline);
|
||
|
||
@extend %t-copy-lead2;
|
||
|
||
color: $dark-gray1;
|
||
}
|
||
|
||
// CASE: has class green
|
||
&.green {
|
||
color: $green1;
|
||
}
|
||
|
||
.line-through {
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
|
||
.col-2 {
|
||
@include float(left);
|
||
@include line-height(29.73);
|
||
|
||
margin-top: ($baseline*0.15);
|
||
width: ($baseline*17.5);
|
||
color: $light-gray2;
|
||
|
||
.numbers-row {
|
||
position: relative;
|
||
|
||
label {
|
||
@extend %t-copy-base;
|
||
@extend %t-strong;
|
||
|
||
cursor: text;
|
||
color: $light-gray2;
|
||
font-style: normal;
|
||
}
|
||
|
||
.counter {
|
||
@include margin-left($baseline*1.25);
|
||
@include border-radius(3px);
|
||
@include padding($baseline*0.3, $baseline*1.5, $baseline*0.3, $baseline/2);
|
||
|
||
display: inline-block;
|
||
border: $input-border;
|
||
|
||
input[type="text"] {
|
||
@include text-align(center);
|
||
|
||
@extend %t-copy-lead2;
|
||
@extend %t-strong;
|
||
|
||
box-shadow: none;
|
||
border: none;
|
||
padding: ($baseline*0.4) 0;
|
||
width: ($baseline*3.75);
|
||
height: auto;
|
||
color: $black-t2;
|
||
font-style: normal;
|
||
|
||
//STATE: focus
|
||
&:focus {
|
||
@extend %no-outline;
|
||
}
|
||
}
|
||
}
|
||
|
||
button {
|
||
@include margin-left(-$baseline*1.5);
|
||
|
||
position: absolute;
|
||
box-shadow: none;
|
||
border: none;
|
||
background: none;
|
||
padding: 0;
|
||
height: ($baseline*0.85);
|
||
text-shadow: none;
|
||
|
||
i {
|
||
@extend %t-icon3;
|
||
|
||
color: $dark-gray2;
|
||
|
||
span {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
//CASE: has class inc
|
||
&.inc {
|
||
@extend %no-outline;
|
||
|
||
top: ($baseline*0.45);
|
||
width: auto;
|
||
}
|
||
|
||
//CASE: has class dec
|
||
&.dec {
|
||
@extend %no-outline;
|
||
|
||
top: ($baseline*1.5);
|
||
width: auto;
|
||
height: ($baseline*1.1);
|
||
}
|
||
}
|
||
|
||
//STATE: is disabled
|
||
&.disabled {
|
||
.counter {
|
||
border: 2px solid $gray;
|
||
|
||
//STATE: hover
|
||
&:hover {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
input {
|
||
color: $gray-l3;
|
||
}
|
||
}
|
||
|
||
.button i {
|
||
color: $gray-l3;
|
||
}
|
||
}
|
||
|
||
.updateBtn {
|
||
@include float(right);
|
||
@include padding($baseline*1.25, $baseline*1.75, $baseline*1.25, 0);
|
||
|
||
@extend %t-action2;
|
||
|
||
display: inline-block;
|
||
|
||
// STATE: focus
|
||
&:focus {
|
||
@extend %no-outline;
|
||
}
|
||
}
|
||
|
||
span.error-text {
|
||
display: block;
|
||
text-transform: lowercase;
|
||
}
|
||
}
|
||
|
||
.disable-numeric-counter {
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.col-3 {
|
||
@include float(right);
|
||
|
||
padding-top: ($baseline*0.65);
|
||
width: ($baseline*2);
|
||
|
||
button.btn-remove {
|
||
@include float(right);
|
||
|
||
opacity: 0.8;
|
||
box-shadow: none;
|
||
border: none;
|
||
width: auto;
|
||
height: auto;
|
||
text-shadow: none;
|
||
|
||
i {
|
||
@include line-height(27.02);
|
||
|
||
@extend %t-icon3;
|
||
|
||
color: $dark-gray2;
|
||
}
|
||
|
||
//STATE: hover
|
||
&:hover {
|
||
opacity: 1;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.discount {
|
||
margin: $baseline 0;
|
||
border-top: $discount-border;
|
||
border-bottom: $discount-border;
|
||
padding: ($baseline*0.85) ($baseline) ($baseline*0.75) ($baseline);
|
||
min-height: ($baseline*2.25);
|
||
|
||
.code-text {
|
||
@include clearfix();
|
||
|
||
a {
|
||
@extend %t-copy-lead1;
|
||
@extend %t-strong;
|
||
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
padding: ($baseline/2) 0;
|
||
color: $blue1;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
span {
|
||
@include margin-right(-$baseline);
|
||
|
||
display: inline-block;
|
||
padding: ($baseline*0.45) 0;
|
||
|
||
b {
|
||
@include padding-left($baseline);
|
||
|
||
@extend %t-copy-lead2;
|
||
@extend %t-strong;
|
||
|
||
letter-spacing: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.code-input {
|
||
@include float(left);
|
||
|
||
display: inline-block;
|
||
|
||
input[type="text"] {
|
||
@extend %t-copy-base;
|
||
@extend %t-strong;
|
||
|
||
border: $input-border;
|
||
padding: ($baseline*0.4) ($baseline*0.6);
|
||
width: ($baseline*13);
|
||
height: auto;
|
||
font-style: normal;
|
||
|
||
// STATE: focus
|
||
&:focus {
|
||
box-shadow: none;
|
||
border-color: $dark-gray2;
|
||
}
|
||
|
||
// CASE: has class error
|
||
&.error {
|
||
border-color: $red1;
|
||
}
|
||
}
|
||
|
||
.error-text {
|
||
@extend %t-copy-sub2;
|
||
|
||
display: block;
|
||
padding-bottom: 0;
|
||
color: $red1;
|
||
}
|
||
|
||
button[type="submit"] {
|
||
padding: ($baseline*0.45) ($baseline*1.75);
|
||
width: auto;
|
||
height: ($baseline*2.25);
|
||
}
|
||
}
|
||
|
||
.code-applied {
|
||
display: inline-block;
|
||
|
||
.green {
|
||
@include margin-right($baseline);
|
||
|
||
@extend %t-strong;
|
||
|
||
color: $green1;
|
||
}
|
||
|
||
button[type="submit"] {
|
||
box-shadow: none;
|
||
border: $input-border;
|
||
background: $white;
|
||
padding: ($baseline*0.45) ($baseline*1.75);
|
||
text-shadow: none;
|
||
color: $dark-gray2;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
border: $input-border;
|
||
background: $white;
|
||
color: $dark-gray1;
|
||
}
|
||
}
|
||
}
|
||
|
||
button[type="submit"] {
|
||
@extend %t-action2;
|
||
@extend %t-strong;
|
||
|
||
float: none;
|
||
padding: ($baseline*0.35) $baseline;
|
||
width: auto;
|
||
height: auto;
|
||
letter-spacing: 0;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
box-shadow: none;
|
||
border: 1px solid transparent;
|
||
background: $blue;
|
||
}
|
||
}
|
||
}
|
||
|
||
.col-two {
|
||
border-bottom: 2px solid $gray-l5;
|
||
padding-bottom: $baseline;
|
||
overflow: hidden;
|
||
|
||
.row-inside {
|
||
@include float(left);
|
||
|
||
padding: ($baseline/2) 0;
|
||
width: 50%;
|
||
|
||
.billing-detail-label {
|
||
@include margin-right($baseline);
|
||
|
||
@extend %t-copy-sub1;
|
||
|
||
display: inline-block;
|
||
width: ($baseline*9.5);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.billing-detail-value {
|
||
@extend %t-copy-sub1;
|
||
|
||
display: inline-block;
|
||
margin: 0;
|
||
cursor: text;
|
||
width: ($baseline*60);
|
||
word-wrap: break-word;
|
||
color: $gray-d3;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.col-1 {
|
||
@include float(left);
|
||
|
||
width: 35%;
|
||
|
||
span.radio-group {
|
||
@include margin($baseline/2, 0, $baseline/2, $baseline/4);
|
||
@include border-radius(3px);
|
||
|
||
display: inline-block;
|
||
border: $input-border;
|
||
|
||
// CASE: is first child
|
||
&:first-child {
|
||
@include margin-left($baseline*0.75);
|
||
}
|
||
|
||
// CASE: has class blue
|
||
&.blue {
|
||
border-color: $blue2;
|
||
|
||
label {
|
||
color: $blue2;
|
||
}
|
||
}
|
||
|
||
label {
|
||
@include padding($baseline*0.4, $baseline*0.75, $baseline*0.4, $baseline*0.3);
|
||
|
||
@extend %t-copy-base;
|
||
@extend %t-regular;
|
||
|
||
display: inline-block;
|
||
margin-bottom: 0;
|
||
color: $dark-gray2;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
input[type="radio"] {
|
||
@include margin-left($baseline/2);
|
||
}
|
||
}
|
||
|
||
.col-2 {
|
||
@include float(right);
|
||
|
||
width: 65%;
|
||
|
||
button[type="submit"] {
|
||
@include float(right);
|
||
@include margin-left($baseline*0.75);
|
||
@include padding($baseline*0.75, $baseline*3, $baseline*1.1, $baseline*1.5);
|
||
|
||
@extend %t-copy-lead2;
|
||
@extend %t-strong;
|
||
|
||
width: auto;
|
||
height: ($baseline*3.35);
|
||
letter-spacing: 0;
|
||
|
||
// CASE: has id register
|
||
&#register {
|
||
padding: ($baseline*0.9) ($baseline*1.5);
|
||
}
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
box-shadow: none;
|
||
background: $blue;
|
||
}
|
||
}
|
||
|
||
p {
|
||
@include text-align(right);
|
||
|
||
@extend %t-copy-base;
|
||
|
||
padding: ($baseline*0.65) 0;
|
||
}
|
||
|
||
form {
|
||
position: relative;
|
||
}
|
||
|
||
.fa-caret-right {
|
||
@include right($baseline*1.5);
|
||
|
||
@extend %t-icon3;
|
||
|
||
position: absolute;
|
||
top: ($baseline*1.1);
|
||
color: $white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.disclaimer {
|
||
@include text-align(right);
|
||
|
||
@extend %t-light;
|
||
|
||
padding: ($baseline/2) 0;
|
||
color: $light-gray2;
|
||
}
|
||
|
||
h3 {
|
||
@extend %t-title6;
|
||
@extend %t-regular;
|
||
|
||
padding: ($baseline*1.5) $baseline;
|
||
color: $dark-gray1;
|
||
}
|
||
|
||
.billing-data {
|
||
display: table;
|
||
width: 100%;
|
||
|
||
h3 {
|
||
@extend %t-title5;
|
||
|
||
margin-bottom: ($baseline/4);
|
||
padding: ($baseline*0.6) 0;
|
||
color: $dark-gray1;
|
||
}
|
||
|
||
.row {
|
||
display: table-row;
|
||
}
|
||
|
||
.col-half {
|
||
@include float(left);
|
||
@include border-radius(4px);
|
||
|
||
margin-bottom: ($baseline*0.75);
|
||
background: $light-gray1;
|
||
padding: $baseline;
|
||
width: 45%;
|
||
min-height: ($baseline*12);
|
||
|
||
// CASE: index of child is even
|
||
&:nth-child(even) {
|
||
@include margin-left($baseline);
|
||
}
|
||
|
||
.data-group {
|
||
margin-bottom: ($baseline*0.75);
|
||
|
||
label {
|
||
@extend %t-copy-base;
|
||
@extend %t-regular;
|
||
|
||
display: block;
|
||
color: $dark-gray2;
|
||
font-style: normal;
|
||
}
|
||
|
||
input {
|
||
@extend %t-copy-base;
|
||
|
||
margin-bottom: ($baseline/4);
|
||
width: 100%;
|
||
}
|
||
|
||
// CASE: index of child is a multiple of 4
|
||
&:nth-child(4n) {
|
||
@include margin-right(0);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.error-text {
|
||
@extend %t-copy-sub2;
|
||
|
||
display: block;
|
||
padding-bottom: 0;
|
||
color: $red1;
|
||
}
|
||
|
||
.gray-bg {
|
||
@include border-radius(3px);
|
||
@include padding($baseline, $baseline, $baseline, $baseline*1.5);
|
||
|
||
margin: $baseline 0;
|
||
background: $light-gray1;
|
||
overflow: hidden;
|
||
|
||
.message-left {
|
||
@include float(left);
|
||
@include line-height(16.22);
|
||
|
||
width: 100%;
|
||
color: $dark-gray1;
|
||
|
||
b {
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
a.blue {
|
||
@include margin(0, 0, 0, $baseline);
|
||
|
||
i {
|
||
@include margin-left($baseline/2);
|
||
}
|
||
}
|
||
|
||
.mt-7 {
|
||
display: block;
|
||
margin-top: ($baseline*0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
.bordered-bar {
|
||
margin-bottom: $baseline;
|
||
border-top: $discount-border;
|
||
border-bottom: $discount-border;
|
||
padding: $baseline;
|
||
|
||
h2 {
|
||
@extend %t-strong;
|
||
|
||
margin-bottom: 0;
|
||
color: $dark-gray1;
|
||
|
||
span {
|
||
@include padding-left($baseline*3);
|
||
|
||
text-transform: capitalize;
|
||
letter-spacing: 0;
|
||
|
||
.blue-link {
|
||
@extend %t-copy-sub1;
|
||
|
||
color: $blue2;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pattern {
|
||
margin-top: ($baseline/2);
|
||
margin-bottom: $baseline;
|
||
padding: $baseline;
|
||
color: $dark-gray1;
|
||
|
||
h2 {
|
||
@extend %t-title5;
|
||
}
|
||
}
|
||
|
||
hr.border {
|
||
border-top: $discount-border;
|
||
}
|
||
|
||
.no-border {
|
||
border: none !important;
|
||
}
|
||
|
||
table.course-receipt {
|
||
margin: auto;
|
||
margin-bottom: ($baseline*1.35);
|
||
width: 94%;
|
||
|
||
thead th {
|
||
@include text-align(center);
|
||
|
||
border-bottom: $hr-border;
|
||
padding: ($baseline*0.4) 0;
|
||
color: $light-gray2;
|
||
font-weight: normal;
|
||
|
||
// CASE: has first child
|
||
&:first-child {
|
||
@include text-align(left);
|
||
}
|
||
|
||
// CASE: has last child
|
||
&:last-child {
|
||
@include text-align(center);
|
||
}
|
||
}
|
||
|
||
tr {
|
||
border-bottom: 1px solid $light-gray1;
|
||
|
||
// CASE: has last child
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
td {
|
||
@include text-align(center);
|
||
|
||
padding: ($baseline*0.75) 0;
|
||
width: 30%;
|
||
color: $dark-gray1;
|
||
|
||
// CASE: index of child is a multiple of 2
|
||
&:nth-child(2) {
|
||
width: 20%;
|
||
}
|
||
|
||
// CASE: index of child is a multiple of 3
|
||
&:nth-child(3) {
|
||
width: 40%;
|
||
}
|
||
|
||
// CASE: has first child
|
||
&:first-child {
|
||
@extend %t-copy-lead1;
|
||
|
||
@include text-align(left);
|
||
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
// CASE: has last child
|
||
&:last-child {
|
||
@include text-align(center);
|
||
|
||
span {
|
||
@include border-radius(3px);
|
||
@include text-align(center);
|
||
|
||
@extend %t-copy-sub1;
|
||
|
||
display: inline-block;
|
||
padding: ($baseline/10) ($baseline/2);
|
||
min-width: ($baseline*2.75);
|
||
color: $white;
|
||
|
||
// CASE: has class red
|
||
&.red {
|
||
background: rgb(231, 92, 92);
|
||
}
|
||
|
||
// CASE: has class green
|
||
&.green {
|
||
background: rgb(108, 204, 108);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.course-image,
|
||
.image {
|
||
.item-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.empty-cart {
|
||
@include border-radius(3px);
|
||
@include text-align(center);
|
||
|
||
margin: $baseline 0;
|
||
background: $light-gray1;
|
||
padding: $baseline 0;
|
||
|
||
h2 {
|
||
@include text-align(center);
|
||
|
||
@extend %t-title5;
|
||
@extend %t-strong;
|
||
|
||
margin-top: $baseline;
|
||
margin-bottom: ($baseline/4);
|
||
text-transform: initial;
|
||
letter-spacing: 0;
|
||
color: $gray-l1;
|
||
}
|
||
|
||
p {
|
||
@include text-align(center);
|
||
|
||
@extend %t-copy-sub1;
|
||
|
||
text-shadow: 0 1px 1px $white;
|
||
color: $gray-l1;
|
||
}
|
||
|
||
a.blue {
|
||
@include border-radius(3px);
|
||
|
||
@extend %t-copy-lead2;
|
||
@extend %t-regular;
|
||
|
||
display: inline-block;
|
||
margin: ($baseline/2) 0 $baseline 0;
|
||
background: $blue2;
|
||
padding: $baseline ($baseline*2);
|
||
color: white;
|
||
|
||
// STATE: hover
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Print
|
||
|
||
@media print {
|
||
a[href]::after {
|
||
content: none !important;
|
||
}
|
||
|
||
.steps,
|
||
.blue.pull-right,
|
||
.bordered-bar .pull-right,
|
||
.left.nav-global.authenticated {
|
||
display: none;
|
||
}
|
||
|
||
.shopping-cart {
|
||
@include padding-right($baseline*2);
|
||
|
||
font-size: 14px;
|
||
|
||
.gray-bg {
|
||
margin: 0;
|
||
background: none;
|
||
padding: ($baseline/2) 0 $baseline 0;
|
||
|
||
.message-left {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.bordered-bar {
|
||
h2 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
span {
|
||
@include float(right);
|
||
}
|
||
}
|
||
|
||
.user-data .data-input h1 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
table.course-receipt {
|
||
.redemption-url {
|
||
&::before {
|
||
display: inline-block;
|
||
content: " " attr(data-base-url) " ";
|
||
}
|
||
}
|
||
|
||
th:last-child {
|
||
display: none;
|
||
}
|
||
|
||
td:last-child {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|