Skip to content

E
edx-platform
Commit 3bb63166 by Andy Armstrong
Options

Fix Sass quality issues in lms/static/sass/features 

Sass fixes
parent e5cab618
Showing with 805 additions and 700 deletions
lms/static/sass/features/_bookmarks-v1.scss
...@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -8,6 +8,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
> div { > div {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
} }
} }
...@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -22,11 +23,13 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// set styles // set styles
@extend %btn-pl-default-base; @extend %btn-pl-default-base;
@include font-size(13); @include font-size(13);
width: 100%; width: 100%;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
&:before { &::before {
content: $bookmarked-icon; content: $bookmarked-icon;
font-family: FontAwesome; font-family: FontAwesome;
} }
...@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -35,9 +38,9 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for bookmark icon shown on each sequence nav item // Rules for bookmark icon shown on each sequence nav item
.course-content { .course-content {
.bookmark-icon.bookmarked { .bookmark-icon.bookmarked {
@include right($baseline / 4); @include right($baseline / 4);
top: -3px; top: -3px;
position: absolute; position: absolute;
} }
...@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -48,17 +51,15 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
} }
.bookmark-button { .bookmark-button {
&::before {
&:before {
content: $bookmark-icon; content: $bookmark-icon;
font-family: FontAwesome; font-family: FontAwesome;
} }
&.bookmarked { &.bookmarked {
&:before { &::before {
content: $bookmarked-icon; content: $bookmarked-icon;
} }
} }
} }
} }
lms/static/sass/features/_bookmarks.scss
...@@ -3,85 +3,87 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark ...@@ -3,85 +3,87 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for Bookmarks Results Header // Rules for Bookmarks Results Header
.bookmarks-results-header { .bookmarks-results-header {
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
// Rules for Bookmarks Results // Rules for Bookmarks Results
.bookmarks-results-list { .bookmarks-results-list {
padding-top: ($baseline/2); padding-top: ($baseline/2);
.bookmarks-results-list-item { .bookmarks-results-list-item {
@include padding(0, $baseline, ($baseline/4), $baseline); @include padding(0, $baseline, ($baseline/4), $baseline);
display: block;
border: 1px solid $lms-border-color;
margin-bottom: $baseline;
&:hover { display: block;
border-color: palette(primary, base); border: 1px solid $lms-border-color;
margin-bottom: $baseline;
.list-item-breadcrumbtrail {
color: palette(primary, base);
}
}
}
.results-list-item-view {
@include float(right);
margin-top: $baseline;
}
.list-item-date { &:hover {
margin-top: ($baseline/4); border-color: palette(primary, base);
color: $lms-gray;
font-size: font-size(small);
}
.bookmarks-results-list-item:before { .list-item-breadcrumbtrail {
content: $bookmarked-icon;
position: relative;
top: -7px;
font-family: FontAwesome;
color: palette(primary, base); color: palette(primary, base);
}
} }
}
.list-item-content { .results-list-item-view {
overflow: hidden; @include float(right);
}
.list-item-left-section { margin-top: $baseline;
display: inline-block; }
vertical-align: middle;
width: 90%; .list-item-date {
} margin-top: ($baseline/4);
color: $lms-gray;
.list-item-right-section { font-size: font-size(small);
display: inline-block; }
vertical-align: middle;
.bookmarks-results-list-item::before {
.fa-arrow-right { content: $bookmarked-icon;
position: relative;
@include rtl { top: -7px;
@include transform(rotate(180deg)); font-family: FontAwesome;
} color: palette(primary, base);
} }
.list-item-content {
overflow: hidden;
}
.list-item-left-section {
display: inline-block;
vertical-align: middle;
width: 90%;
}
.list-item-right-section {
display: inline-block;
vertical-align: middle;
.fa-arrow-right {
@include rtl {
@include transform(rotate(180deg));
}
} }
}
} }
// Rules for empty bookmarks list // Rules for empty bookmarks list
.bookmarks-empty { .bookmarks-empty {
margin-top: $baseline; margin-top: $baseline;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
padding: $baseline; padding: $baseline;
background-color: $white; background-color: $white;
} }
.bookmarks-empty-header { .bookmarks-empty-header {
@extend %t-title5; @extend %t-title5;
margin-bottom: ($baseline/2);
margin-bottom: ($baseline/2);
} }
.bookmarks-empty-detail { .bookmarks-empty-detail {
@extend %t-copy-sub1; @extend %t-copy-sub1;
} }
lms/static/sass/features/_course-experience.scss
...@@ -26,8 +26,10 @@ ...@@ -26,8 +26,10 @@
margin: $baseline 0; margin: $baseline 0;
} }
&:after, &:before { &::after,
&::before {
@include left(0); @include left(0);
bottom: 35%; bottom: 35%;
border: solid transparent; border: solid transparent;
height: 0; height: 0;
...@@ -40,15 +42,17 @@ ...@@ -40,15 +42,17 @@
} }
} }
&:after { &::after {
@include border-right-color($white); @include border-right-color($white);
@include margin-left($baseline*-1+1); @include margin-left($baseline*-1+1);
border-width: $baseline/2; border-width: $baseline/2;
} }
&:before { &::before {
@include margin-left($baseline*-1); @include margin-left($baseline*-1);
@include border-right-color($lms-border-color); @include border-right-color($lms-border-color);
border-width: $baseline/2; border-width: $baseline/2;
} }
...@@ -65,14 +69,19 @@ ...@@ -65,14 +69,19 @@
} }
// Welcome message / Latest Update message // Welcome message / Latest Update message
.welcome-message, .update-message{ .welcome-message,
.update-message {
border: solid 1px $lms-border-color; border: solid 1px $lms-border-color;
@include border-left(solid 4px $black); @include border-left(solid 4px $black);
margin-bottom: $baseline; margin-bottom: $baseline;
padding: $baseline; padding: $baseline;
overflow: hidden; overflow: hidden;
h1, h2, h3 { h1,
h2,
h3 {
font-size: font-size(large); font-size: font-size(large);
font-weight: $font-bold; font-weight: $font-bold;
color: $black; color: $black;
...@@ -80,14 +89,16 @@ ...@@ -80,14 +89,16 @@
img { img {
@include float(left); @include float(left);
margin: $baseline/2; margin: $baseline/2;
max-width: 100%; max-width: 100%;
} }
.dismiss-message { .dismiss-message {
@include float(right); @include float(right);
.btn-link { .btn-link {
color: palette(grayscale, base); color: palette(grayscale, base);
} }
} }
} }
...@@ -123,6 +134,7 @@ ...@@ -123,6 +134,7 @@
.section-name { .section-name {
@include margin(0, 0, ($baseline / 2), ($baseline / 2)); @include margin(0, 0, ($baseline / 2), ($baseline / 2));
padding: 0; padding: 0;
h3 { h3 {
...@@ -140,7 +152,6 @@ ...@@ -140,7 +152,6 @@
padding-bottom: $baseline; padding-bottom: $baseline;
border-bottom: 1px solid $light-grey-solid; border-bottom: 1px solid $light-grey-solid;
margin: 0 0 ($baseline / 2) 0; margin: 0 0 ($baseline / 2) 0;
.subsection { .subsection {
list-style-type: none; list-style-type: none;
...@@ -157,7 +168,8 @@ ...@@ -157,7 +168,8 @@
margin: 0; margin: 0;
} }
&:hover, &:focus { &:hover,
&:focus {
background-color: palette(primary, x-back); background-color: palette(primary, x-back);
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
text-decoration: none; text-decoration: none;
...@@ -205,6 +217,7 @@ ...@@ -205,6 +217,7 @@
.date-summary { .date-summary {
@include clearfix; @include clearfix;
@include border-left(3px solid $gray-l3); @include border-left(3px solid $gray-l3);
padding: $baseline/2; padding: $baseline/2;
.heading { .heading {
...@@ -223,6 +236,7 @@ ...@@ -223,6 +236,7 @@
.date-summary-link { .date-summary-link {
font-weight: $font-semibold; font-weight: $font-semibold;
a { a {
color: $link-color; color: $link-color;
font-weight: $font-regular; font-weight: $font-regular;
...@@ -284,7 +298,7 @@ ...@@ -284,7 +298,7 @@
// Course Reviews Page // Course Reviews Page
.course-reviews { .course-reviews {
.page-header.has-secondary > .page-header-main { .page-header.has-secondary > .page-header-main {
display: block; display: block;
position: relative; position: relative;
......
lms/static/sass/features/_course-search.scss
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
.search-count { .search-count {
@include text-align(right); @include text-align(right);
display: block; display: block;
color: $lms-gray; color: $lms-gray;
} }
.search-results-item { .search-results-item {
@include padding-right(140px); @include padding-right(140px);
position: relative; position: relative;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
padding: $baseline ($baseline/2); padding: $baseline ($baseline/2);
...@@ -51,6 +53,7 @@ ...@@ -51,6 +53,7 @@
.result-link { .result-link {
@include right($baseline/2); @include right($baseline/2);
position: absolute; position: absolute;
top: $baseline; top: $baseline;
line-height: 1.6em; line-height: 1.6em;
...@@ -58,6 +61,7 @@ ...@@ -58,6 +61,7 @@
.result-type { .result-type {
@include right($baseline/2); @include right($baseline/2);
position: absolute; position: absolute;
color: $lms-gray; color: $lms-gray;
font-size: 14px; font-size: 14px;
......
lms/static/sass/features/_course-sock.scss
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: $baseline;
max-width: $lms-max-width; max-width: $lms-max-width;
margin: $baseline auto 0; margin: $baseline auto 0;
-webkit-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;
...@@ -14,6 +13,7 @@ ...@@ -14,6 +13,7 @@
.action-toggle-verification-sock { .action-toggle-verification-sock {
@include left(50%); @include left(50%);
@include margin-left(-1 * $baseline * 15/2); @include margin-left(-1 * $baseline * 15/2);
position: absolute; position: absolute;
top: (-1 * $baseline); top: (-1 * $baseline);
width: ($baseline * 15); width: ($baseline * 15);
...@@ -71,6 +71,7 @@ ...@@ -71,6 +71,7 @@
.mini-cert { .mini-cert {
@include right($baseline); @include right($baseline);
position: absolute; position: absolute;
top: $baseline; top: $baseline;
width: ($baseline * 13); width: ($baseline * 13);
...@@ -96,7 +97,7 @@ ...@@ -96,7 +97,7 @@
width: ($baseline * 5/2); width: ($baseline * 5/2);
} }
.story-quote > .author{ .story-quote > .author {
display: block; display: block;
margin-top: ($baseline / 4); margin-top: ($baseline / 4);
font-weight: 600; font-weight: 600;
...@@ -135,6 +136,7 @@ ...@@ -135,6 +136,7 @@
&.attached { &.attached {
@include right($baseline); @include right($baseline);
position: fixed; position: fixed;
bottom: $baseline; bottom: $baseline;
top: auto; top: auto;
......
lms/static/sass/features/_course-upgrade-message.scss
...@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -17,7 +17,7 @@ $upgrade-message-background-color: $blue-d1;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:after { &::after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
...@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1; ...@@ -28,12 +28,14 @@ $upgrade-message-background-color: $blue-d1;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1rem; margin-bottom: 1rem;
@include float(left); @include float(left);
} }
.vc-selling-points { .vc-selling-points {
@include clear(left); @include clear(left);
@include padding-left(0); @include padding-left(0);
font-size: 0.825rem; font-size: 0.825rem;
margin: 1rem 0; margin: 1rem 0;
display: table; display: table;
...@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1; ...@@ -42,19 +44,21 @@ $upgrade-message-background-color: $blue-d1;
list-style: none; list-style: none;
display: table-row; display: table-row;
&:before { &::before {
content: "\2022"; content: "\2022";
display: table-cell; display: table-cell;
@include padding-right($baseline/2); @include padding-right($baseline/2);
} }
&:after { &::after {
content: ""; content: "";
display: table-row; display: table-row;
height: 0.25rem; height: 0.25rem;
} }
} }
} }
img { img {
max-width: 100%; max-width: 100%;
} }
...@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1; ...@@ -62,12 +66,14 @@ $upgrade-message-background-color: $blue-d1;
// Show/hide button // Show/hide button
.vc-toggle { .vc-toggle {
@include float(right); @include float(right);
color: $white; color: $white;
} }
// Upgrade Button // Upgrade Button
.btn-upgrade { .btn-upgrade {
@extend %btn-primary-green; @extend %btn-primary-green;
background: $uxpl-green-base; background: $uxpl-green-base;
} }
...@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -75,6 +81,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-hero { .vc-hero {
@include float(right); @include float(right);
@include padding-left(1rem); @include padding-left(1rem);
clear: both; clear: both;
width: 35%; width: 35%;
...@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -95,6 +102,7 @@ $upgrade-message-background-color: $blue-d1;
.vc-title { .vc-title {
margin: 0; margin: 0;
@include margin-right(auto); @include margin-right(auto);
} }
......
lms/static/sass/features/_learner-profile.scss
...@@ -2,748 +2,822 @@ ...@@ -2,748 +2,822 @@
// ==================== // ====================
.learner-achievements { .learner-achievements {
.learner-message { .learner-message {
@extend %no-content; @extend %no-content;
margin: $baseline*0.75 0;
.message-header, .message-actions { margin: $baseline*0.75 0;
text-align: center;
}
.message-actions { .message-header,
margin-top: $baseline/2; .message-actions {
text-align: center;
}
.btn-brand { .message-actions {
color: $white; margin-top: $baseline/2;
}
} .btn-brand {
color: $white;
}
} }
}
} }
.certificate-card { .certificate-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: $baseline; margin-bottom: $baseline;
padding: $baseline/2; padding: $baseline/2;
border: 1px; border: 1px;
border-style: solid; border-style: solid;
background-color: $white; background-color: $white;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
box-shadow: 0 0 1px 1px $gray-l2; box-shadow: 0 0 1px 1px $gray-l2;
}
.card-logo {
@include margin-right($baseline);
width: 100px;
height: 100px;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
display: none;
} }
}
.card-content {
color: $base-font-color;
margin-top: $baseline/2;
}
.card-supertitle {
@extend %t-title6;
color: $lightest-base-font-color;
}
.card-title {
@extend %t-title5;
@extend %t-strong;
margin-bottom: $baseline/2;
}
.card-text {
@extend %t-title8;
color: $lightest-base-font-color;
}
&.mode-audit {
border-color: $audit-mode-color;
.card-logo { .card-logo {
@include margin-right($baseline); background-image: url('#{$static-path}/images/certificates/audit.png');
width: 100px; }
height: 100px; }
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap &.mode-honor {
display: none; border-color: $honor-mode-color;
}
.card-logo {
background-image: url('#{$static-path}/images/certificates/honor.png');
} }
}
.card-content { &.mode-verified {
color: $base-font-color; border-color: $verified-mode-color;
margin-top: $baseline/2;
.card-logo {
background-image: url('#{$static-path}/images/certificates/verified.png');
} }
}
&.mode-professional {
border-color: $professional-certificate-color;
.card-supertitle { .card-logo {
@extend %t-title6; background-image: url('#{$static-path}/images/certificates/professional.png');
color: $lightest-base-font-color;
} }
}
}
.card-title { .view-profile {
@extend %t-title5; $profile-image-dimension: 120px;
@extend %t-strong;
margin-bottom: $baseline/2; .window-wrap,
.content-wrapper {
background-color: $white;
}
.ui-loading-indicator {
@extend .ui-loading-base;
padding-bottom: $baseline;
// center horizontally
@include margin-left(auto);
@include margin-right(auto);
width: ($baseline*5);
}
.profile-image-field {
button {
background: transparent !important;
border: none !important;
padding: 0;
} }
.card-text { .u-field-image {
@extend %t-title8; padding-top: 0;
color: $lightest-base-font-color; padding-bottom: ($baseline/4);
} }
&.mode-audit { .image-wrapper {
border-color: $audit-mode-color; width: $profile-image-dimension;
position: relative;
margin: auto;
.image-frame {
display: block;
position: relative;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
overflow: hidden;
border: 3px solid $gray-l6;
margin-top: $baseline*-0.75;
background: $white;
}
.u-field-upload-button {
position: absolute;
top: 0;
opacity: 0;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
border: 2px dashed transparent;
background: rgba(229, 241, 247, 0.8);
color: $link-color;
text-shadow: none;
@include transition(all $tmg-f1 ease-in-out 0s);
z-index: 6;
.card-logo { i {
background-image: url('#{$static-path}/images/certificates/audit.png'); color: $link-color;
} }
}
&.mode-honor { &:focus,
border-color: $honor-mode-color; &:hover {
@include show-hover-state();
.card-logo { border-color: $link-color;
background-image: url('#{$static-path}/images/certificates/honor.png');
} }
}
&.mode-verified { &.in-progress {
border-color: $verified-mode-color; opacity: 1;
}
}
.button-visible {
@include show-hover-state();
}
.upload-button-icon,
.upload-button-title {
display: block;
margin-bottom: ($baseline/4);
@include transform(translateY(35px));
.card-logo { line-height: 1.3em;
background-image: url('#{$static-path}/images/certificates/verified.png'); text-align: center;
z-index: 7;
color: $base-font-color;
}
.upload-button-input {
position: absolute;
top: 0;
@include left(0);
width: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
height: 100%;
cursor: pointer;
z-index: 5;
outline: 0;
opacity: 0;
}
.u-field-remove-button {
position: relative;
display: block;
width: $profile-image-dimension;
margin-top: ($baseline / 4);
padding: ($baseline / 5) 0 0;
text-align: center;
opacity: 0;
transition: opacity 0.5s;
}
&:hover,
&:active {
.u-field-remove-button {
opacity: 1;
} }
}
} }
}
.wrapper-profile {
min-height: 200px;
background-color: $gray-l6;
.ui-loading-indicator {
margin-top: 100px;
}
}
.profile-self {
.wrapper-profile-field-account-privacy {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
margin: 0 auto;
border: 1px solid $gray-l3;
background-color: $gray-l4;
padding: ($baseline*0.75) 0;
.u-field-account_privacy {
@extend .container;
border: none;
box-shadow: none;
padding: 0 ($baseline*3);
}
.u-field-title {
@extend %t-strong;
&.mode-professional { width: auto;
border-color: $professional-certificate-color; color: $base-font-color;
cursor: text;
text-shadow: none; // override bad lms styles on labels
}
.u-field-value {
width: auto;
.card-logo { @include margin-left($baseline/2);
background-image: url('#{$static-path}/images/certificates/professional.png'); }
.u-field-message {
@include float(left);
width: 100%;
padding: 0;
color: $base-font-color;
.u-field-message-notification {
color: $gray-d2;
} }
}
} }
} }
.view-profile { .wrapper-profile-sections {
$profile-image-dimension: 120px; @extend .container;
.window-wrap, @include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
.content-wrapper {
background-color: $white; min-width: 0;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0);
@include padding($baseline*1.5, 0, $baseline*1.5, 0);
} }
}
.ui-loading-indicator { .profile-header {
@extend .ui-loading-base; @include padding(0, $baseline*2, $baseline, $baseline*3);
padding-bottom: $baseline;
// center horizontally @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(auto); @include padding(0, $baseline*2, $baseline, $baseline*0.75);
@include margin-right(auto);
width: ($baseline*5);
} }
.profile-image-field { .header {
button { @extend %t-title4;
background: transparent !important; @extend %t-ultrastrong;
border: none !important;
padding: 0;
}
.u-field-image { display: inline-block;
padding-top: 0; }
padding-bottom: ($baseline/4);
}
.image-wrapper { .subheader {
width: $profile-image-dimension; @extend %t-title6;
position: relative; }
margin: auto; }
.image-frame {
display: block;
position: relative;
width: $profile-image-dimension;
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
overflow: hidden;
border: 3px solid $gray-l6;
margin-top: $baseline*-0.75;
background: $white;
}
.u-field-upload-button { .wrapper-profile-section-container-one {
position: absolute; @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
top: 0; width: 90%;
opacity: 0; padding: 0 5%;
width: $profile-image-dimension; }
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
border: 2px dashed transparent;
background: rgba(229,241,247, .8);
color: $link-color;
text-shadow: none;
@include transition(all $tmg-f1 ease-in-out 0s);
z-index: 6;
i {
color: $link-color;
}
&:focus,
&:hover {
@include show-hover-state();
border-color: $link-color;
}
&.in-progress {
opacity: 1;
}
}
.button-visible { .wrapper-profile-section-one {
@include show-hover-state(); @include float(left);
} @include margin-left($baseline*3);
.upload-button-icon, width: 300px;
.upload-button-title { background-color: $white;
display: block; border-top: 5px solid $blue;
margin-bottom: ($baseline/4); padding-bottom: $baseline;
@include transform(translateY(35px));
line-height: 1.3em; @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
text-align: center; @include margin-left(0);
z-index: 7;
color: $base-font-color; width: 100%;
} }
.upload-button-input { .profile-section-one-fields {
position: absolute; margin: 0 $baseline/2;
top: 0;
@include left(0); .social-links {
width: $profile-image-dimension; @include padding($baseline/4, 0, 0, $baseline/4);
border-radius: ($profile-image-dimension/2);
height: 100%; font-size: 2rem;
cursor: pointer;
z-index: 5; & > span {
outline: 0; color: $gray-l4;
opacity: 0; }
a {
.fa-facebook-square {
color: $facebook-blue;
} }
.u-field-remove-button { .fa-twitter-square {
position: relative; color: $twitter-blue;
display: block;
width: $profile-image-dimension;
margin-top: ($baseline / 4);
padding: ($baseline / 5) 0 0;
text-align: center;
opacity: 0;
transition: opacity 0.5s;
} }
&:hover, &:active { .fa-linkedin-square {
.u-field-remove-button { color: $linkedin-blue;
opacity: 1;
}
} }
}
} }
}
.wrapper-profile { .u-field {
min-height: 200px; font-weight: $font-semibold;
background-color: $gray-l6;
.ui-loading-indicator { @include padding(0, 0, 0, 3px);
margin-top: 100px;
}
}
.profile-self { color: $base-font-color;
.wrapper-profile-field-account-privacy { margin-top: $baseline/5;
@include clearfix();
@include box-sizing(border-box); .u-field-value,
width: 100%; .u-field-title {
margin: 0 auto 0; font-weight: 500;
border: 1px solid $gray-l3; width: calc(100% - 40px);
background-color: $gray-l4; color: $lightest-base-font-color;
padding: ($baseline*0.75) 0; }
.u-field-account_privacy { .u-field-value-readonly {
@extend .container; font-family: $sans-serif;
border: none; color: $darkest-base-font-color;
box-shadow: none; }
padding: 0 ($baseline*3);
}
.u-field-title { &.u-field-dropdown {
@extend %t-strong; position: relative;
width: auto;
color: $base-font-color; &:not(.editable-never) {
cursor: text; cursor: pointer;
text-shadow: none; // override bad lms styles on labels
} }
}
.u-field-value { &:not(.u-field-readonly) {
width: auto; &.u-field-value {
@include margin-left($baseline/2); @extend %t-weight3;
} }
.u-field-message { &:not(:last-child) {
@include float(left); padding-bottom: $baseline/4;
width: 100%; border-bottom: 1px solid $border-color;
padding: 0;
color: $base-font-color;
.u-field-message-notification { &:hover.mode-placeholder {
color: $gray-d2; padding-bottom: $baseline/5;
} border-bottom: 2px dashed $link-color;
}
} }
}
} }
}
.wrapper-profile-sections { & > .u-field {
@extend .container; &:not(:first-child) {
@include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0); font-size: $body-font-size;
min-width: 0; color: $base-font-color;
font-weight: $font-light;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap margin-bottom: 0;
@include margin-left(0); }
@include padding($baseline*1.5, 0, $baseline*1.5, 0);
}
}
.profile-header { &:first-child {
@include padding(0, $baseline*2, $baseline, $baseline*3); @extend %t-title4;
@extend %t-weight4;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap font-size: em(24);
@include padding(0, $baseline*2, $baseline, $baseline*0.75); }
} }
.header { select {
@extend %t-title4; width: 85%;
@extend %t-ultrastrong;
display: inline-block;
} }
.subheader { .u-field-message {
@extend %t-title6; @include right(0);
position: absolute;
top: 0;
width: 20px;
.icon {
vertical-align: baseline;
}
} }
}
} }
}
.wrapper-profile-section-container-one {
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: 90%;
padding: 0 5%;
}
.wrapper-profile-section-one { .wrapper-profile-section-container-two {
@include float(left); @include float(left);
@include margin-left($baseline*3); @include padding-left($baseline);
width: 300px;
background-color: $white;
border-top: 5px solid $blue;
padding-bottom: $baseline;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0);
width: 100%;
}
.profile-section-one-fields { width: calc(100% - 380px);
margin: 0 $baseline/2; max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
font-family: $sans-serif;
.social-links {
@include padding($baseline/4, 0, 0, $baseline/4); @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
font-size: 2rem; width: 90%;
margin-top: $baseline;
& > span { padding: 0 5%;
color: $gray-l4;
}
a {
.fa-facebook-square {
color: $facebook-blue;
}
.fa-twitter-square {
color: $twitter-blue;
}
.fa-linkedin-square {
color: $linkedin-blue;
}
}
}
.u-field {
font-weight: $font-semibold;
@include padding(0, 0, 0, 3px);
color: $base-font-color;
margin-top: $baseline/5;
.u-field-value, .u-field-title {
font-weight: 500;
width: calc(100% - 40px);
color: $lightest-base-font-color;
}
.u-field-value-readonly {
font-family: $sans-serif;
color: $darkest-base-font-color;
}
&.u-field-dropdown {
position: relative;
&:not(.editable-never) {
cursor: pointer;
}
}
&:not(.u-field-readonly) {
&.u-field-value {
@extend %t-weight3;
}
&:not(:last-child) {
padding-bottom: $baseline/4;
border-bottom: 1px solid $border-color;
&:hover.mode-placeholder {
padding-bottom: $baseline/5;
border-bottom: 2px dashed $link-color;
}
}
}
}
&>.u-field {
&:not(:first-child) {
font-size: $body-font-size;
color: $base-font-color;
font-weight: $font-light;
margin-bottom: 0;
}
&:first-child {
@extend %t-title4;
@extend %t-weight4;
font-size: em(24);
}
}
select {
width: 85%
}
.u-field-message {
@include right(0);
position: absolute;
top: 0;
width: 20px;
.icon {
vertical-align: baseline;
}
}
}
}
} }
.u-field-textarea {
@include padding(0, ($baseline*0.75), ($baseline*0.75), 0);
.wrapper-profile-section-container-two { margin-bottom: ($baseline/2);
@include float(left);
@include padding-left($baseline); @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: calc(100% - 380px); @include padding-left($baseline/4);
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap }
font-family: $sans-serif;
.u-field-header {
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap position: relative;
width: 90%;
margin-top: $baseline; .u-field-message {
padding: 0 5%; @include right(0);
top: $baseline/4;
position: absolute;
} }
}
.u-field-textarea { &.editable-toggle {
@include padding(0, ($baseline*.75), ($baseline*.75), 0); cursor: pointer;
margin-bottom: ($baseline/2); }
}
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap .u-field-title {
@include padding-left($baseline/4); @extend %t-title6;
}
.u-field-header { display: inline-block;
position: relative; margin-top: 0;
margin-bottom: ($baseline/4);
color: $gray-d3;
width: 100%;
font: $font-semibold 1.4em/1.4em $sans-serif;
}
.u-field-message { .u-field-value {
@include right(0); @extend %t-copy-base;
top: $baseline/4;
position: absolute;
}
}
&.editable-toggle { width: 100%;
cursor: pointer; overflow: auto;
}
}
.u-field-title { textarea {
@extend %t-title6; width: 100%;
display: inline-block; background-color: transparent;
margin-top: 0; border-radius: 5px;
margin-bottom: ($baseline/4); border-color: $gray-d1;
color: $gray-d3; resize: none;
width: 100%; white-space: pre-line;
font: $font-semibold 1.4em/1.4em $sans-serif; outline: 0;
} box-shadow: none;
-webkit-appearance: none;
}
a {
color: inherit;
}
}
.u-field-value { .u-field-message {
@extend %t-copy-base; @include float(right);
width: 100%;
overflow: auto;
textarea {
width: 100%;
background-color: transparent;
border-radius: 5px;
border-color: $gray-d1;
resize: none;
white-space: pre-line;
outline: 0;
box-shadow: none;
-webkit-appearance: none;
}
a { width: auto;
color: inherit;
}
}
.u-field-message { .message-can-edit {
@include float(right); position: absolute;
width: auto; }
}
.message-can-edit { .u-field.mode-placeholder {
position: absolute; padding: $baseline;
} margin: $baseline*0.75 0;
} border: 2px dashed $gray-l3;
.u-field.mode-placeholder { i {
padding: $baseline; font-size: 12px;
margin: $baseline*0.75 0;
border: 2px dashed $gray-l3;
i { @include padding-right(5px);
font-size: 12px;
@include padding-right(5px);
vertical-align: middle;
color: $base-font-color;
}
.u-field-title {
width: 100%;
text-align: center;
}
.u-field-value { vertical-align: middle;
text-align: center; color: $base-font-color;
line-height: 1.5em; }
@extend %t-copy-sub1;
color: $base-font-color;
}
&:hover { .u-field-title {
border: 2px dashed $link-color; width: 100%;
text-align: center;
}
.u-field-title, i { .u-field-value {
color: $link-color; text-align: center;
} line-height: 1.5em;
}
}
.wrapper-u-field { @extend %t-copy-sub1;
font-size: $body-font-size;
color: $base-font-color;
.u-field-header .u-field-title{ color: $base-font-color;
color: $base-font-color; }
}
.u-field-footer { &:hover {
.field-textarea-character-count { border: 2px dashed $link-color;
@extend %t-weight1;
@include float(right); .u-field-title,
margin-top: $baseline/4; i {
} color: $link-color;
}
} }
}
}
.wrapper-u-field {
font-size: $body-font-size;
color: $base-font-color;
.u-field-header .u-field-title {
color: $base-font-color;
}
.u-field-footer {
.field-textarea-character-count {
@extend %t-weight1;
.profile-private-message { @include float(right);
@include padding-left($baseline*0.75);
line-height: 3.0em; margin-top: $baseline/4;
} }
}
} }
.badge-paging-header { .profile-private-message {
padding-top: $baseline; @include padding-left($baseline*0.75);
line-height: 3em;
} }
}
.badge-paging-header {
padding-top: $baseline;
}
.page-content-nav {
@extend %page-content-nav;
}
.badge-set-display {
@extend .container;
padding: 0;
.page-content-nav { .badge-list {
@extend %page-content-nav; // We're using a div instead of ul for accessibility, so we have to match the style
// used by ul.
margin: 1em 0;
padding: 0 0 0 40px;
} }
.badge-set-display { .badge-display {
@extend .container; width: 50%;
padding: 0 0; display: inline-block;
vertical-align: top;
padding: 2em 0;
.badge-image-container {
padding-right: $baseline;
margin-left: 1em;
width: 20%;
vertical-align: top;
display: inline-block;
img.badge {
width: 100%;
}
.badge-list { .accomplishment-placeholder {
// We're using a div instead of ul for accessibility, so we have to match the style border: 4px dotted $gray-l4;
// used by ul. border-radius: 50%;
margin: 1em 0; display: block;
padding: 0 0 0 40px; width: 100%;
padding-bottom: 100%;
} }
}
.badge-display { .badge-details {
width: 50%; @extend %t-copy-sub1;
display: inline-block; @extend %t-regular;
vertical-align: top;
padding: 2em 0; max-width: 70%;
.badge-image-container { display: inline-block;
padding-right: $baseline; color: $gray-d1;
margin-left: 1em;
width: 20%; .badge-name {
vertical-align: top; @extend %t-strong;
display: inline-block; @extend %t-copy-base;
img.badge {
width: 100%; color: $gray-d3;
}
.accomplishment-placeholder {
border: 4px dotted $gray-l4;
border-radius: 50%;
display: block;
width: 100%;
padding-bottom: 100%;
}
}
.badge-details {
@extend %t-copy-sub1;
@extend %t-regular;
max-width: 70%;
display: inline-block;
color: $gray-d1;
.badge-name {
@extend %t-strong;
@extend %t-copy-base;
color: $gray-d3;
}
.badge-description {
padding-bottom: $baseline;
line-height: 1.5em;
}
.badge-date-stamp{
@extend %t-copy-sub1;
}
.find-button-container {
border: 1px solid $blue-l1;
padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
display: inline-block;
border-radius: 5px;
font-weight: bold;
color: $blue-s3;
}
.share-button {
@extend %t-action3;
@extend %button-reset;
background: $gray-l6;
color: $gray-d1;
padding: ($baseline / 4) ($baseline / 2);
margin-bottom: ($baseline / 2);
display: inline-block;
border-radius: 5px;
border: 2px solid $gray-d1;
cursor: pointer;
transition: background .5s;
.share-prefix {
display: inline-block;
vertical-align: middle;
}
.share-icon-container {
display: inline-block;
img.icon-mozillaopenbadges {
max-width: 1.5em;
margin-right: .25em;
}
}
&:hover {
background: $gray-l4;
}
&:active {
box-shadow: inset 0 4px 15px 0 $black-t2;
transition: none;
}
}
}
} }
.badge-placeholder {
background-color: $gray-l7; .badge-description {
box-shadow: inset 0 0 4px 0 $gray-l4; padding-bottom: $baseline;
line-height: 1.5em;
} }
}
// ------------------------------ .badge-date-stamp {
// #BADGES MODAL @extend %t-copy-sub1;
// ------------------------------ }
.badges-overlay {
@extend %ui-depth1;
position: fixed;
top: 0;
left: 0;
background-color: $dark-trans-bg; /* dim the background */
width: 100%;
height: 100%;
vertical-align: middle;
.badges-modal { .find-button-container {
@extend %t-copy-lead1; border: 1px solid $blue-l1;
@extend %ui-depth2; padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
color: $lighter-base-font-color; display: inline-block;
box-sizing: content-box; border-radius: 5px;
position: fixed; font-weight: bold;
top: 50%; color: $blue-s3;
left: 50%; }
transform: translate(-50%, -50%);
width: 80%;
max-width: 700px;
max-height: calc(100% - 100px);
margin-right: auto;
margin-left: auto;
border-top: rem(10) solid $blue-l2;
background: $light-gray3;
padding-right: ($baseline * 2);
padding-left: ($baseline * 2);
padding-bottom: ($baseline);
overflow-x: hidden;
.modal-header {
margin-top: ($baseline / 2);
margin-bottom: ($baseline / 2);
}
.close { .share-button {
@extend %button-reset; @extend %t-action3;
@extend %t-strong; @extend %button-reset;
color: $lighter-base-font-color;
position: absolute; background: $gray-l6;
right: ($baseline); color: $gray-d1;
top: $baseline; padding: ($baseline / 4) ($baseline / 2);
cursor: pointer; margin-bottom: ($baseline / 2);
padding: ($baseline / 4) ($baseline / 2); display: inline-block;
@include transition(all $tmg-f2 ease-in-out 0s); border-radius: 5px;
&:focus, &:hover { border: 2px solid $gray-d1;
background-color: $blue-d2; cursor: pointer;
border-radius: 3px; transition: background 0.5s;
color: $white;
} .share-prefix {
} display: inline-block;
vertical-align: middle;
}
.badges-steps { .share-icon-container {
display: table; display: inline-block;
}
.image-container{ img.icon-mozillaopenbadges {
// Lines the image up with the content of the above list. max-width: 1.5em;
@include ltr { margin-right: 0.25em;
@include padding-left(2em);
}
@include rtl {
@include padding-right(1em);
float: right;
}
} }
}
.backpack-logo { &:hover {
@include float(right); background: $gray-l4;
@include margin-left($baseline); }
}
&:active {
box-shadow: inset 0 4px 15px 0 $black-t2;
transition: none;
}
} }
}
} }
.modal-hr { .badge-placeholder {
display: block; background-color: $gray-l7;
border: none; box-shadow: inset 0 0 4px 0 $gray-l4;
background-color: $light-gray; }
height: rem(2); }
width: 100%;
// ------------------------------
// #BADGES MODAL
// ------------------------------
.badges-overlay {
@extend %ui-depth1;
position: fixed;
top: 0;
left: 0;
background-color: $dark-trans-bg; /* dim the background */
width: 100%;
height: 100%;
vertical-align: middle;
.badges-modal {
@extend %t-copy-lead1;
@extend %ui-depth2;
color: $lighter-base-font-color;
box-sizing: content-box;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 700px;
max-height: calc(100% - 100px);
margin-right: auto;
margin-left: auto;
border-top: rem(10) solid $blue-l2;
background: $light-gray3;
padding-right: ($baseline * 2);
padding-left: ($baseline * 2);
padding-bottom: ($baseline);
overflow-x: hidden;
.modal-header {
margin-top: ($baseline / 2);
margin-bottom: ($baseline / 2);
}
.close {
@extend %button-reset;
@extend %t-strong;
color: $lighter-base-font-color;
position: absolute;
right: ($baseline);
top: $baseline;
cursor: pointer;
padding: ($baseline / 4) ($baseline / 2);
@include transition(all $tmg-f2 ease-in-out 0s);
&:focus,
&:hover {
background-color: $blue-d2;
border-radius: 3px;
color: $white;
}
}
.badges-steps {
display: table;
}
.image-container {
// Lines the image up with the content of the above list.
@include ltr {
@include padding-left(2em);
}
@include rtl {
@include padding-right(1em);
float: right;
}
}
.backpack-logo {
@include float(right);
@include margin-left($baseline);
}
} }
}
.modal-hr {
display: block;
border: none;
background-color: $light-gray;
height: rem(2);
width: 100%;
}
} }
scripts/all-tests.sh
...@@ -13,7 +13,7 @@ set -e ...@@ -13,7 +13,7 @@ set -e
# Violations thresholds for failing the build # Violations thresholds for failing the build
export PYLINT_THRESHOLD=3600 export PYLINT_THRESHOLD=3600
export ESLINT_THRESHOLD=9134 export ESLINT_THRESHOLD=9134
export STYLELINT_THRESHOLD=18431 export STYLELINT_THRESHOLD=18416
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json` XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/} export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment