diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss index 77258baee6..fb67fd7afa 100644 --- a/lms/static/sass/views/_account-settings.scss +++ b/lms/static/sass/views/_account-settings.scss @@ -64,10 +64,10 @@ font-size: em(14); color: $gray; - padding: 5px 25px 23px; + padding: $baseline/4 $baseline*1.25 $baseline; display: inline-block; box-shadow: none; - border: none; + border-bottom: 4px solid transparent; border-radius: 0; background: transparent none; } @@ -84,11 +84,24 @@ &:hover, &:focus { text-decoration: none; - border-bottom: 4px solid $courseware-border-bottom-color !important; + border-bottom-color: $courseware-border-bottom-color; } &.active { - border-bottom: 4px solid $black-t3 !important; + 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"); } } } @@ -338,6 +351,41 @@ 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-readonly .u-field-value {