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