619 lines
13 KiB
SCSS
619 lines
13 KiB
SCSS
// ------------------------------
|
|
// // Open edX Certificates: Components
|
|
|
|
// About: styling for specific UI components ranging from global to modular.
|
|
|
|
// #HEADINGS
|
|
// #DEPTH
|
|
// #MESSAGES
|
|
// #IMAGES
|
|
|
|
// #HEADER APP
|
|
// #BANNER
|
|
// #INTRODUCTION
|
|
// #ACCOMPLISHMENT
|
|
// #RENDERING
|
|
// #ACCOMPLISHMENT RELATED
|
|
// #CERTIFICATE
|
|
// #ABOUT
|
|
|
|
// ------------------------------
|
|
// #HEADINGS
|
|
// ------------------------------
|
|
%hd-subsection {
|
|
margin-bottom: spacing-vertical(mid-small);
|
|
border-bottom: rem(2) solid palette(grayscale, x-back);
|
|
padding-bottom: spacing-vertical(x-small);
|
|
}
|
|
|
|
// ------------------------------
|
|
// #DEPTH
|
|
// ------------------------------
|
|
%depth-base-focus {
|
|
background: $white;
|
|
padding: spacing-vertical(small) spacing-horizontal(base);
|
|
}
|
|
|
|
%depth-well {
|
|
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
|
|
padding: spacing-vertical(small) spacing-horizontal(base);
|
|
background: palette(grayscale, x-back);
|
|
}
|
|
|
|
%depth-card {
|
|
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
|
|
padding: spacing-vertical(small) spacing-horizontal(base);
|
|
background: $white;
|
|
}
|
|
|
|
.depth-base-focus {
|
|
@extend %depth-base-focus;
|
|
}
|
|
|
|
.depth-well {
|
|
@extend %depth-well;
|
|
}
|
|
|
|
.depth-card {
|
|
@extend %depth-card;
|
|
}
|
|
|
|
// ------------------------------
|
|
// #IMAGES
|
|
// ------------------------------
|
|
// circular cropped
|
|
%img-cropped {
|
|
|
|
.src {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #HEADER APP
|
|
// ------------------------------
|
|
.wrapper-header {
|
|
@extend %divider-2;
|
|
border-bottom-color: palette(grayscale, x-back);
|
|
background: $white;
|
|
}
|
|
|
|
.header-app {
|
|
|
|
}
|
|
|
|
// ------------------------------
|
|
// #BANNER
|
|
// ------------------------------
|
|
.banner {
|
|
|
|
.message-copy {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// message to user-centric banner
|
|
.wrapper-banner-user {
|
|
box-shadow: inset 0 rem(2) rem(2) 0 $black;
|
|
background: palette(grayscale, dark);
|
|
}
|
|
|
|
.banner-user {
|
|
|
|
.message-title {
|
|
color: $white;
|
|
font-weight: font-weight(semi-bold);
|
|
}
|
|
|
|
.message-copy {
|
|
color: $white;
|
|
}
|
|
|
|
.message-actions .action {
|
|
|
|
// STATE: hover, active, focus
|
|
&:hover, &:active, &:focus {
|
|
// customizations from UXPL
|
|
color: palette(grayscale, dark);
|
|
}
|
|
|
|
.icon {
|
|
@include margin-right(spacing-horizontal(x-small));
|
|
font-size: font-size(large);
|
|
}
|
|
|
|
// CASE: icon display only
|
|
&.icon-only {
|
|
|
|
.action-label {
|
|
@extend %a11y-hide;
|
|
}
|
|
}
|
|
|
|
// CASE mozilla open badges logo
|
|
.icon-mozillaopenbadges {
|
|
width: rem(18);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #INTRODUCTION
|
|
// ------------------------------
|
|
.introduction {
|
|
margin-bottom: spacing-vertical(base);
|
|
@include text-align(center);
|
|
}
|
|
|
|
// ------------------------------
|
|
// #ACCOMPLISHMENTS
|
|
// ------------------------------
|
|
// base accomplishment
|
|
.accomplishment {
|
|
|
|
.accomplishment-type-symbol .src {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// main accomplishment
|
|
.accomplishment-main {
|
|
background: palette(grayscale, x-back);
|
|
}
|
|
|
|
// brief accomplishment
|
|
.accomplishment-brief {
|
|
@extend %depth-card;
|
|
|
|
.accomplishment-type-symbol, .accomplishment-details {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.accomplishment-type-symbol {
|
|
@include size(20%);
|
|
}
|
|
|
|
.accomplishment-details {
|
|
width: 70%;
|
|
}
|
|
|
|
|
|
.accomplishment-summary {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #RENDERING
|
|
// ------------------------------
|
|
%rendering-accomplishment-line {
|
|
display: block;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
%rendering-section {
|
|
margin-bottom: spacing-vertical(base);
|
|
border-bottom: rem(2) solid palette(grayscale, x-back);
|
|
padding-bottom: spacing-vertical(base);
|
|
}
|
|
|
|
%rendering-hd-section {
|
|
margin-bottom: spacing-vertical(mid-small);
|
|
border-bottom: rem(2) solid palette(grayscale, x-back);
|
|
padding-bottom: spacing-vertical(x-small);
|
|
color: $cert-base-color;
|
|
@include text-align(center);
|
|
}
|
|
|
|
.accomplishment-rendering {
|
|
@extend %depth-card;
|
|
position: relative;
|
|
top: -(spacing-vertical(base));
|
|
border-top: rem(4) solid $cert-base-color;
|
|
|
|
// type
|
|
.accomplishment-type {
|
|
@include text-align(center);
|
|
margin-top: -(spacing-vertical(large));
|
|
margin-bottom: spacing-vertical(base);
|
|
}
|
|
|
|
.accomplishment-type-label, .accomplishment-type-symbol {
|
|
display: block;
|
|
}
|
|
|
|
.accomplishment-type-label {
|
|
width: span(10);
|
|
margin: 0 auto;
|
|
font-weight: font-weight(semi-bold);
|
|
}
|
|
|
|
.accomplishment-type-symbol {
|
|
@include size(rem(100));
|
|
margin: 0 auto spacing-vertical(small) auto;
|
|
}
|
|
|
|
// statement
|
|
.accomplishment-statement {
|
|
@extend %rendering-section;
|
|
@include text-align(center);
|
|
}
|
|
|
|
.accomplishment-statement-lead {
|
|
@extend .hd-2;
|
|
}
|
|
|
|
.accomplishment-recipient {
|
|
@extend %rendering-accomplishment-line;
|
|
}
|
|
|
|
.accomplishment-summary {
|
|
@extend %rendering-accomplishment-line;
|
|
margin-bottom: spacing-vertical(mid-small);
|
|
}
|
|
|
|
.accomplishment-course {
|
|
@extend %rendering-accomplishment-line;
|
|
}
|
|
|
|
.accomplishment-course-org {
|
|
}
|
|
|
|
.accomplishment-course-name {
|
|
}
|
|
|
|
.accomplishment-course-description {
|
|
@extend %rendering-accomplishment-line;
|
|
}
|
|
|
|
.accomplishment-statement-detail {
|
|
@extend %rendering-accomplishment-line;
|
|
}
|
|
|
|
// organizations
|
|
.accomplishment-orgs {
|
|
margin-bottom: spacing-vertical(base);
|
|
|
|
.list-orgs {
|
|
@extend %list-unstyled;
|
|
}
|
|
}
|
|
|
|
.accomplishment-orgs-title {
|
|
@extend %rendering-hd-section;
|
|
}
|
|
|
|
// signatories
|
|
.accomplishment-signatories {
|
|
@extend %rendering-section;
|
|
|
|
.list-signatories {
|
|
@extend %list-unstyled;
|
|
}
|
|
|
|
.signatory-signature {
|
|
display: block;
|
|
margin: 0 auto spacing-vertical(x-small) auto;
|
|
}
|
|
|
|
.signatory-name, .signatory-credentials {
|
|
@include text-align(center);
|
|
}
|
|
|
|
.signatory-name {
|
|
margin-bottom: spacing-vertical(xx-small);
|
|
}
|
|
|
|
.signatory-credentials {
|
|
|
|
.role, .organization {
|
|
white-space: pre-line;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accomplishment-signatories-title {
|
|
@extend %rendering-hd-section;
|
|
}
|
|
}
|
|
|
|
// metadata
|
|
.accomplishment-metadata {
|
|
margin-bottom: spacing-vertical(base);
|
|
|
|
.metadata {
|
|
@extend %list-unstyled;
|
|
|
|
.label {
|
|
@extend %copy-meta;
|
|
margin-bottom: spacing-vertical(xx-small);
|
|
}
|
|
|
|
.label-explanation {
|
|
display: block;
|
|
font-weight: font-weight(normal);
|
|
margin-top: spacing-vertical(xx-small);
|
|
}
|
|
|
|
.value {
|
|
@extend %copy-base;
|
|
font-weight: font-weight(semi-bold);
|
|
color: palette(grayscale, dark);
|
|
}
|
|
}
|
|
|
|
.recipient-img, .recipient-details {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.recipient-img {
|
|
@extend %img-cropped;
|
|
width: rem(100);
|
|
@include margin-right(spacing-horizontal(small));
|
|
|
|
.src {
|
|
max-height: 100%;
|
|
border: rem(4) solid $white;
|
|
}
|
|
}
|
|
|
|
.recipient-details {
|
|
@extend %copy-base;
|
|
font-weight: font-weight(semi-bold);
|
|
}
|
|
|
|
.recipient-name {
|
|
margin-bottom: spacing-vertical(xx-small);
|
|
}
|
|
|
|
.recipient-username {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.accomplishment-id .value {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.accomplishment-metadata-title {
|
|
@extend %hd-subsection;
|
|
border-bottom-color: palette(grayscale, back);
|
|
}
|
|
|
|
// ------------------------------
|
|
// #ACCOMPLISHMENT RELATED
|
|
// ------------------------------
|
|
.accomplishment-related {
|
|
|
|
}
|
|
|
|
.accomplishment-related-title {
|
|
@extend %hd-subsection;
|
|
}
|
|
|
|
// ------------------------------
|
|
// #CERTIFICATE
|
|
// ------------------------------
|
|
// certficate - default
|
|
.certificate {
|
|
|
|
.accomplishment-rendering {
|
|
|
|
// decorative corners for certs
|
|
.deco-corner {
|
|
position: absolute;
|
|
}
|
|
|
|
.deco-corner-tl {
|
|
@include triangle(20px, $cert-base-color, up-right);
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.deco-corner-tr {
|
|
@include triangle(20px, $cert-base-color, up-left);
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.deco-corner-bl {
|
|
@include triangle(20px, $cert-base-color, down-right);
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.deco-corner-br {
|
|
@include triangle(20px, $cert-base-color, down-left);
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.accomplishment-type-label {
|
|
color: $cert-base-color;
|
|
}
|
|
|
|
.accomplishment-signatories-title, .accomplishment-orgs-title {
|
|
color: $cert-decorative-color;
|
|
}
|
|
|
|
// statement
|
|
.accomplishment-statement,
|
|
.accomplishment-statement-lead,
|
|
.accomplishment-recipient,
|
|
.accomplishment-course,
|
|
{
|
|
font-family: $font-family-serif;
|
|
}
|
|
|
|
.accomplishment-recipient,
|
|
.accomplishment-course {
|
|
letter-spacing: rem(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// certificate - base + honor
|
|
.layout-accomplishment.certificate-honor {
|
|
|
|
.introduction {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.accomplishment-main {
|
|
background: palette(grayscale, x-back);
|
|
}
|
|
|
|
.accomplishment-rendering {
|
|
|
|
.accomplishment-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
// hide the fancy
|
|
.accomplishment-signatories .signatory-signature,
|
|
.accomplishment-type-symbol {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// certificate - distinguished + verified
|
|
.layout-accomplishment.certificate-verified {
|
|
|
|
.introduction {
|
|
margin-bottom: spacing-vertical(base);
|
|
}
|
|
|
|
.accomplishment-main {
|
|
background: palette(primary, back);
|
|
}
|
|
|
|
.accomplishment-rendering {
|
|
background: $white url('../images/bg-verified.png') center no-repeat;
|
|
background-size: 65%;
|
|
|
|
.deco-corner-tl {
|
|
@include triangle(20px, $cert-distinguished-color, up-right);
|
|
}
|
|
|
|
.deco-corner-tr {
|
|
@include triangle(20px, $cert-distinguished-color, up-left);
|
|
}
|
|
|
|
.deco-corner-bl {
|
|
@include triangle(20px, $cert-distinguished-color, down-right);
|
|
|
|
}
|
|
|
|
.deco-corner-br {
|
|
@include triangle(20px, $cert-distinguished-color, down-left);
|
|
}
|
|
}
|
|
|
|
.accomplishment-rendering {
|
|
border-color: $cert-distinguished-color;
|
|
|
|
.accomplishment-type-label {
|
|
color: $cert-distinguished-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #ABOUT
|
|
// ------------------------------
|
|
.about {
|
|
|
|
}
|
|
|
|
// ------------------------------
|
|
// #FOOTER
|
|
// ------------------------------
|
|
.footer-app {
|
|
border-top: rem(4) solid palette(grayscale, x-back);
|
|
padding-top: spacing-vertical(base);
|
|
}
|
|
|
|
.footer-app-nav {
|
|
|
|
.list {
|
|
@extend %list-unstyled;
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #BADGES MODAL
|
|
// ------------------------------
|
|
.badges-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: z-index(front);
|
|
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
|
|
.badges-modal {
|
|
@extend %copy-large;
|
|
box-sizing: content-box;
|
|
position: fixed;
|
|
top: spacing-vertical(large);
|
|
right: 0;
|
|
left: 0;
|
|
z-index: z-index(very-front);
|
|
max-width: 50%;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
border-top: rem(10) solid palette(primary, back);
|
|
background: palette(grayscale, x-back);
|
|
padding-right: spacing-horizontal(large);
|
|
padding-left: spacing-horizontal(large);
|
|
overflow-x: hidden;
|
|
color: palette(grayscale, dark);
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: spacing-horizontal(mid-small);
|
|
top: spacing-vertical(small);
|
|
font-weight: font-weight(bold);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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(spacing-horizontal(small));
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-hr {
|
|
display: block;
|
|
border: none;
|
|
background-color: palette(grayscale, back);
|
|
height: rem(2);
|
|
width: 100%;
|
|
}
|