Fix Sass quality issues in lms/static/sass/features
Sass fixes
This commit is contained in:
Andy Armstrong
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
display: block;
|
||||
border: 1px solid $lms-border-color;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.list-item-breadcrumbtrail {
|
||||
color: palette(primary, base);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-color: palette(primary, base);
|
||||
|
||||
.results-list-item-view {
|
||||
@include float(right);
|
||||
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;
|
||||
.list-item-breadcrumbtrail {
|
||||
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));
|
||||
}
|
||||
}
|
||||
.results-list-item-view {
|
||||
@include float(right);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
.btn-brand {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.message-header,
|
||||
.message-actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
&: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;
|
||||
|
||||
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
||||
display: none;
|
||||
}
|
||||
background-image: url('#{$static-path}/images/certificates/audit.png');
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
color: $base-font-color;
|
||||
margin-top: $baseline/2;
|
||||
&.mode-honor {
|
||||
border-color: $honor-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
}
|
||||
|
||||
.card-supertitle {
|
||||
@extend %t-title6;
|
||||
color: $lightest-base-font-color;
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/verified.png');
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-image: url('#{$static-path}/images/certificates/audit.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-honor {
|
||||
border-color: $honor-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.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-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-profile {
|
||||
$profile-image-dimension: 120px;
|
||||
$profile-image-dimension: 120px;
|
||||
|
||||
.window-wrap,
|
||||
.content-wrapper {
|
||||
background-color: $white;
|
||||
.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;
|
||||
}
|
||||
|
||||
.u-field-image {
|
||||
padding-top: 0;
|
||||
padding-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
i {
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include show-hover-state();
|
||||
|
||||
border-color: $link-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));
|
||||
|
||||
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 {
|
||||
@extend .ui-loading-base;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
// center horizontally
|
||||
@include margin-left(auto);
|
||||
@include margin-right(auto);
|
||||
width: ($baseline*5);
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-image-field {
|
||||
button {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
.profile-self {
|
||||
.wrapper-profile-field-account-privacy {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.u-field-image {
|
||||
padding-top: 0;
|
||||
padding-bottom: ($baseline/4);
|
||||
}
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border: 1px solid $gray-l3;
|
||||
background-color: $gray-l4;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.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, .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 {
|
||||
@include show-hover-state();
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 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);
|
||||
}
|
||||
|
||||
.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-value {
|
||||
width: auto;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-profile-sections {
|
||||
.u-field-account_privacy {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0 ($baseline*3);
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
@include padding(0, $baseline*2, $baseline, $baseline*3);
|
||||
.u-field-title {
|
||||
@extend %t-strong;
|
||||
|
||||
@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);
|
||||
}
|
||||
width: auto;
|
||||
color: $base-font-color;
|
||||
cursor: text;
|
||||
text-shadow: none; // override bad lms styles on labels
|
||||
}
|
||||
|
||||
.header {
|
||||
@extend %t-title4;
|
||||
@extend %t-ultrastrong;
|
||||
display: inline-block;
|
||||
}
|
||||
.u-field-value {
|
||||
width: auto;
|
||||
|
||||
.subheader {
|
||||
@extend %t-title6;
|
||||
}
|
||||
}
|
||||
@include margin-left($baseline/2);
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper-profile-section-container-two {
|
||||
.u-field-message {
|
||||
@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%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
color: $base-font-color;
|
||||
|
||||
.u-field-message-notification {
|
||||
color: $gray-d2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
@include padding(0, $baseline*2, $baseline, $baseline*3);
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
.header {
|
||||
@extend %t-title4;
|
||||
@extend %t-ultrastrong;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
@extend %t-title6;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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-textarea {
|
||||
@include padding(0, ($baseline*.75), ($baseline*.75), 0);
|
||||
margin-bottom: ($baseline/2);
|
||||
.u-field {
|
||||
font-weight: $font-semibold;
|
||||
|
||||
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
||||
@include padding-left($baseline/4);
|
||||
@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;
|
||||
}
|
||||
|
||||
.u-field-header {
|
||||
position: relative;
|
||||
&:not(:last-child) {
|
||||
padding-bottom: $baseline/4;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.u-field-message {
|
||||
@include right(0);
|
||||
top: $baseline/4;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&.editable-toggle {
|
||||
cursor: pointer;
|
||||
&:hover.mode-placeholder {
|
||||
padding-bottom: $baseline/5;
|
||||
border-bottom: 2px dashed $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
& > .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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
select {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.u-field-message {
|
||||
@include float(right);
|
||||
width: auto;
|
||||
@include right(0);
|
||||
|
||||
.message-can-edit {
|
||||
position: absolute;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
|
||||
.icon {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-field.mode-placeholder {
|
||||
padding: $baseline;
|
||||
margin: $baseline*0.75 0;
|
||||
border: 2px dashed $gray-l3;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
@include padding-right(5px);
|
||||
vertical-align: middle;
|
||||
color: $base-font-color;
|
||||
}
|
||||
.u-field-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.wrapper-profile-section-container-two {
|
||||
@include float(left);
|
||||
@include padding-left($baseline);
|
||||
|
||||
.u-field-value {
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
@extend %t-copy-sub1;
|
||||
color: $base-font-color;
|
||||
}
|
||||
width: calc(100% - 380px);
|
||||
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
|
||||
font-family: $sans-serif;
|
||||
|
||||
&: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;
|
||||
@include float(right);
|
||||
margin-top: $baseline/4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-private-message {
|
||||
@include padding-left($baseline*0.75);
|
||||
line-height: 3.0em;
|
||||
}
|
||||
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
||||
width: 90%;
|
||||
margin-top: $baseline;
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
.badge-paging-header {
|
||||
padding-top: $baseline;
|
||||
.u-field-textarea {
|
||||
@include padding(0, ($baseline*0.75), ($baseline*0.75), 0);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&.editable-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content-nav {
|
||||
@extend %page-content-nav;
|
||||
.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;
|
||||
}
|
||||
|
||||
.badge-set-display {
|
||||
@extend .container;
|
||||
padding: 0 0;
|
||||
.u-field-value {
|
||||
@extend %t-copy-base;
|
||||
|
||||
.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;
|
||||
}
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.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-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 */
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 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-message {
|
||||
@include float(right);
|
||||
|
||||
width: auto;
|
||||
|
||||
.message-can-edit {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.u-field.mode-placeholder {
|
||||
padding: $baseline;
|
||||
margin: $baseline*0.75 0;
|
||||
border: 2px dashed $gray-l3;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
|
||||
@include padding-right(5px);
|
||||
|
||||
vertical-align: middle;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
.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);
|
||||
.u-field-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-field-value {
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
&: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;
|
||||
|
||||
@include float(right);
|
||||
|
||||
margin-top: $baseline/4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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-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 0.5s;
|
||||
|
||||
.share-prefix {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.share-icon-container {
|
||||
display: inline-block;
|
||||
|
||||
img.icon-mozillaopenbadges {
|
||||
max-width: 1.5em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-l4;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 4px 15px 0 $black-t2;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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:]]/}
|
||||
|
||||
Reference in New Issue
Block a user