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
684 lines
14 KiB
SCSS
684 lines
14 KiB
SCSS
// lms - application - account settings
|
|
// ====================
|
|
|
|
// Table of Contents
|
|
// * +Container - Account Settings
|
|
// * +Main - Header
|
|
// * +Settings Section
|
|
// * +Alert Messages
|
|
|
|
|
|
// +Container - Account Settings
|
|
.wrapper-account-settings {
|
|
background: $white;
|
|
width: 100%;
|
|
|
|
.account-settings-container {
|
|
max-width: grid-width(12);
|
|
padding: 10px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ui-loading-indicator,
|
|
.ui-loading-error {
|
|
@extend .ui-loading-base;
|
|
// center horizontally
|
|
@include margin-left(auto);
|
|
@include margin-right(auto);
|
|
|
|
padding: ($baseline*3);
|
|
text-align: center;
|
|
|
|
.message-error {
|
|
color: $alert-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Main - Header
|
|
.wrapper-account-settings {
|
|
.wrapper-header {
|
|
max-width: grid-width(12);
|
|
height: 139px;
|
|
border-bottom: 4px solid $m-gray-l4;
|
|
|
|
.header-title {
|
|
@extend %t-title4;
|
|
|
|
margin-bottom: ($baseline/2);
|
|
padding-top: ($baseline*2);
|
|
}
|
|
|
|
.header-subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.account-nav {
|
|
@include float(left);
|
|
|
|
margin: ($baseline/2) 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
.account-nav-link {
|
|
@include float(left);
|
|
|
|
font-size: em(14);
|
|
color: $gray;
|
|
padding: $baseline/4 $baseline*1.25 $baseline;
|
|
display: inline-block;
|
|
box-shadow: none;
|
|
border-bottom: 4px solid transparent;
|
|
border-radius: 0;
|
|
background: transparent none;
|
|
}
|
|
|
|
button {
|
|
@extend %ui-clear-button;
|
|
@extend %btn-no-style;
|
|
|
|
@include appearance(none);
|
|
|
|
display: block;
|
|
padding: ($baseline/4);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
border-bottom-color: $courseware-border-bottom-color;
|
|
}
|
|
|
|
&.active {
|
|
border-bottom-color: theme-color("dark");
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
border-bottom-color: transparent;
|
|
|
|
.account-nav {
|
|
display: flex;
|
|
border-bottom: none;
|
|
|
|
.account-nav-link {
|
|
border-bottom: 4px solid theme-color("light");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Settings Section
|
|
.account-settings-sections {
|
|
.section-header {
|
|
@extend %t-title5;
|
|
@extend %t-strong;
|
|
|
|
padding-top: ($baseline/2)*3;
|
|
color: $dark-gray1;
|
|
}
|
|
|
|
.section {
|
|
background-color: $white;
|
|
margin: $baseline 5% 0;
|
|
border-bottom: 4px solid $m-gray-l4;
|
|
|
|
.account-settings-header-subtitle {
|
|
font-size: em(14);
|
|
line-height: normal;
|
|
color: $dark-gray;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.account-settings-header-subtitle-warning {
|
|
@extend .account-settings-header-subtitle;
|
|
|
|
color: $alert-color;
|
|
}
|
|
|
|
.account-settings-section-body {
|
|
.u-field {
|
|
border-bottom: 2px solid $m-gray-l4;
|
|
padding: $baseline*0.75 0;
|
|
|
|
.field {
|
|
width: 30%;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
select {
|
|
@include appearance(none);
|
|
|
|
padding: 14px 30px 14px 15px;
|
|
border: 1px solid $gray58-border;
|
|
background-color: transparent;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
&::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
~ .icon-caret-down {
|
|
&::after {
|
|
content: "";
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 7px solid $blue;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 20px;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-label {
|
|
display: block;
|
|
width: auto;
|
|
margin-bottom: 0.625rem;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
color: $dark-gray;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.field-input {
|
|
@include transition(all 0.125s ease-in-out 0s);
|
|
|
|
display: inline-block;
|
|
padding: 0.625rem;
|
|
border: 1px solid $gray58-border;
|
|
border-radius: 2px;
|
|
background: $white;
|
|
font-size: $body-font-size;
|
|
color: $dark-gray;
|
|
width: 100%;
|
|
height: 48px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.u-field-link {
|
|
@extend %ui-clear-button;
|
|
|
|
// set styles
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include font-size(18);
|
|
|
|
width: 100%;
|
|
border: 1px solid $blue;
|
|
color: $blue;
|
|
padding: 11px 14px;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
|
|
.u-field-order {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: em(16);
|
|
font-weight: 600;
|
|
color: $dark-gray;
|
|
width: 100%;
|
|
padding-top: $baseline;
|
|
padding-bottom: $baseline;
|
|
line-height: normal;
|
|
flex-flow: row wrap;
|
|
|
|
span {
|
|
padding: $baseline;
|
|
}
|
|
|
|
.u-field-order-number {
|
|
@include float(left);
|
|
|
|
width: 30%;
|
|
}
|
|
|
|
.u-field-order-date {
|
|
@include float(left);
|
|
|
|
padding-left: 30px;
|
|
width: 20%;
|
|
}
|
|
|
|
.u-field-order-price {
|
|
@include float(left);
|
|
|
|
width: 15%;
|
|
}
|
|
|
|
.u-field-order-link {
|
|
width: 10%;
|
|
padding: 0;
|
|
|
|
.u-field-link {
|
|
@extend %ui-clear-button;
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include font-size(14);
|
|
|
|
border: 1px solid $blue;
|
|
color: $blue;
|
|
line-height: normal;
|
|
padding: 10px;
|
|
width: 110px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field-order-lines {
|
|
@extend .u-field-order;
|
|
|
|
padding: 5px 0 0;
|
|
font-weight: 100;
|
|
|
|
.u-field-order-number {
|
|
padding: 20px 10px 20px 30px;
|
|
}
|
|
}
|
|
|
|
.social-field-linked {
|
|
background: $m-gray-l4;
|
|
box-shadow: 0 1px 2px 1px $shadow-l2;
|
|
padding: 1.25rem;
|
|
box-sizing: border-box;
|
|
margin: 10px;
|
|
width: 100%;
|
|
|
|
.field-label {
|
|
@include font-size(24);
|
|
}
|
|
|
|
.u-field-social-help {
|
|
display: inline-block;
|
|
padding: 20px 0 6px;
|
|
}
|
|
|
|
.u-field-link {
|
|
@include font-size(14);
|
|
@include text-align(left);
|
|
|
|
border: none;
|
|
margin-top: $baseline;
|
|
font-weight: $font-semibold;
|
|
padding: 0;
|
|
|
|
&:focus,
|
|
&:hover,
|
|
&:active {
|
|
background-color: transparent;
|
|
color: $m-blue-d3;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.social-field-unlinked {
|
|
background: $m-gray-l4;
|
|
box-shadow: 0 1px 2px 1px $shadow-l2;
|
|
padding: 1.25rem;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
margin: 10px;
|
|
width: 100%;
|
|
|
|
.field-label {
|
|
@include font-size(24);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.u-field-link {
|
|
@include font-size(14);
|
|
|
|
margin-top: $baseline;
|
|
font-weight: $font-semibold;
|
|
}
|
|
}
|
|
|
|
.u-field-message {
|
|
position: relative;
|
|
padding: $baseline*0.75 0 0 ($baseline*4);
|
|
width: 60%;
|
|
|
|
.u-field-message-notification {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
padding: 38px 0 0 ($baseline*5);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: ($baseline*2);
|
|
}
|
|
|
|
// Responsive behavior
|
|
@include media-breakpoint-down(md) {
|
|
.u-field-value {
|
|
width: 100%;
|
|
}
|
|
|
|
.u-field-message {
|
|
width: 100%;
|
|
padding: $baseline/2 0;
|
|
|
|
.u-field-message-notification {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.u-field-order {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
.u-field-order-number,
|
|
.u-field-order-date,
|
|
.u-field-order-price,
|
|
.u-field-order-link {
|
|
width: auto;
|
|
float: none;
|
|
flex-grow: 1;
|
|
|
|
&:first-of-type {
|
|
flex-grow: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field {
|
|
&.u-field-dropdown,
|
|
&.editable-never &.mode-display {
|
|
.u-field-value {
|
|
margin-bottom: ($baseline);
|
|
|
|
.u-field-title {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.u-field-value-readonly {
|
|
font-size: 22px;
|
|
color: #636c72;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field-readonly .u-field-title {
|
|
font-size: 16px;
|
|
color: #636c72;
|
|
line-height: 22px;
|
|
padding-top: ($baseline/2);
|
|
padding-bottom: 0;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
.u-field-readonly .u-field-value {
|
|
font-size: 22px;
|
|
color: #636c72;
|
|
line-height: 30px;
|
|
padding-top: 8px;
|
|
padding-bottom: ($baseline);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.u-field-orderHistory {
|
|
border-bottom: none;
|
|
border: 1px solid $m-gray-l4;
|
|
margin-bottom: $baseline;
|
|
padding: 0;
|
|
|
|
&:last-child {
|
|
border-bottom: 1px solid $m-gray-l4;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $light-gray4;
|
|
}
|
|
}
|
|
|
|
.u-field-order-orderId {
|
|
border: none;
|
|
margin-top: $baseline;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.u-field-order {
|
|
font-weight: $font-semibold;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
|
|
.u-field-order-title {
|
|
font-size: em(16);
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-field-social {
|
|
border-bottom: none;
|
|
margin-right: 20px;
|
|
width: 30%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
.u-field-social-help {
|
|
@include font-size(12);
|
|
|
|
color: $m-gray-d1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-deletion-details {
|
|
.btn-outline-primary {
|
|
@extend %ui-clear-button;
|
|
|
|
// set styles
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include font-size(18);
|
|
|
|
border: 1px solid $blue;
|
|
color: $blue;
|
|
padding: 11px 14px;
|
|
line-height: normal;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.paragon__modal-open {
|
|
overflow-y: scroll;
|
|
color: $dark-gray;
|
|
|
|
.paragon__modal-title {
|
|
font-weight: $font-semibold;
|
|
}
|
|
|
|
.paragon__modal-body {
|
|
line-height: 1.5;
|
|
|
|
.alert-title {
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.paragon__alert-warning {
|
|
color: $dark-gray;
|
|
}
|
|
|
|
.next-steps {
|
|
margin-bottom: 10px;
|
|
font-weight: $font-semibold;
|
|
}
|
|
|
|
.confirm-password-input {
|
|
width: 50%;
|
|
}
|
|
|
|
.paragon__btn:not(.cancel-btn) {
|
|
@extend %btn-primary-blue;
|
|
}
|
|
}
|
|
|
|
.modal-alert {
|
|
display: flex;
|
|
|
|
.icon-wrapper {
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.alert-content {
|
|
.alert-title {
|
|
color: $dark-gray;
|
|
margin-bottom: 10px;
|
|
font: {
|
|
size: 1rem;
|
|
weight: $font-semibold;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $blue-u1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-confirmation-wrapper {
|
|
.paragon__modal-footer {
|
|
.paragon__btn-outline-primary {
|
|
@extend %ui-clear-button;
|
|
|
|
// set styles
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include margin-left(25px);
|
|
|
|
border-color: $blue;
|
|
color: $blue;
|
|
padding: 11px 14px;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// * +Alert Messages
|
|
.account-settings-message,
|
|
.account-settings-section-message {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
margin-top: 15px;
|
|
margin-bottom: 30px;
|
|
|
|
.alert-message {
|
|
color: #292b2c;
|
|
font-family: $font-family-sans-serif;
|
|
position: relative;
|
|
padding: 10px 10px 10px 35px;
|
|
border: 1px solid transparent;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
margin-bottom: 8px;
|
|
|
|
& > .fa {
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 13px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.success {
|
|
background-color: #ecfaec;
|
|
border-color: #b9edb9;
|
|
}
|
|
|
|
.info {
|
|
background-color: #d8edf8;
|
|
border-color: #bbdff2;
|
|
}
|
|
|
|
.warning {
|
|
background-color: #fcf8e3;
|
|
border-color: #faebcc;
|
|
}
|
|
|
|
.error {
|
|
background-color: #f2dede;
|
|
border-color: #ebccd1;
|
|
}
|
|
}
|
|
|
|
.account-settings-message {
|
|
margin-bottom: 0;
|
|
|
|
.alert-message {
|
|
padding: 10px;
|
|
|
|
.alert-actions {
|
|
margin-top: 10px;
|
|
|
|
.btn-alert-primary {
|
|
@extend %btn-primary-blue;
|
|
|
|
@include font-size(18);
|
|
|
|
border: 1px solid $m-blue-d3;
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
padding: 11px 14px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.btn-alert-secondary {
|
|
@extend %ui-clear-button;
|
|
|
|
// set styles
|
|
@extend %btn-pl-default-base;
|
|
|
|
@include font-size(18);
|
|
|
|
background-color: white;
|
|
border: 1px solid $blue;
|
|
color: $blue;
|
|
padding: 11px 14px;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|