Revert "[BD-10] [DEPR-92] Remove pattern library of certificate styles." (#24633)
This commit is contained in:
Adam Butterworth
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -16,51 +16,8 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
font-family: $font-family-sans;
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #TYPOGRAPHY
|
||||
// ------------------------------
|
||||
// Level one heading
|
||||
.hd-1 {
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
font-size: rem(38);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Level two heading
|
||||
.hd-2 {
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
font-size: rem(28);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Level three heading
|
||||
.hd-3 {
|
||||
margin-bottom: map-get($spacing-vertical, x-small);
|
||||
font-size: rem(24);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Level four heading
|
||||
.hd-4 {
|
||||
margin-bottom: map-get($spacing-vertical, x-small);
|
||||
font-size: rem(21);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Level five heading
|
||||
.hd-5 {
|
||||
margin-bottom: map-get($spacing-vertical, x-small);
|
||||
font-size: rem(18);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Level six heading
|
||||
.hd-6 {
|
||||
margin-bottom: map-get($spacing-vertical, xx-small);
|
||||
font-size: rem(16);
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
// #HEADINGS
|
||||
// ------------------------------
|
||||
%hd-subsection {
|
||||
margin-bottom: map-get($spacing-vertical, mid-small);
|
||||
border-bottom: rem(2) solid $gray-x-back;
|
||||
padding-bottom: map-get($spacing-vertical, x-small);
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
padding-bottom: spacing-vertical(x-small);
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -31,18 +31,18 @@
|
||||
// ------------------------------
|
||||
%depth-base-focus {
|
||||
background: $white;
|
||||
padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
|
||||
padding: spacing-vertical(small) spacing-horizontal(base);
|
||||
}
|
||||
|
||||
%depth-well {
|
||||
box-shadow: 0 rem(1) rem(3) 0 $gray-back inset;
|
||||
padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
|
||||
background: $gray-x-back;
|
||||
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 $gray-back;
|
||||
padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, base);
|
||||
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
|
||||
padding: spacing-vertical(small) spacing-horizontal(base);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
.wrapper-header {
|
||||
@extend %divider-2;
|
||||
|
||||
border-bottom-color: $gray-x-back;
|
||||
border-bottom-color: palette(grayscale, x-back);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
@@ -92,14 +92,13 @@
|
||||
// message to user-centric banner
|
||||
.wrapper-banner-user {
|
||||
box-shadow: inset 0 rem(2) rem(2) 0 $black;
|
||||
background: $gray-dark;
|
||||
background: palette(grayscale, dark);
|
||||
}
|
||||
|
||||
.banner-user {
|
||||
.message-title {
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
font-weight: font-weight(semi-bold);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
@@ -107,27 +106,25 @@
|
||||
}
|
||||
|
||||
.message-actions .action {
|
||||
@include button-outline-variant($gray-x-back, $gray-dark);
|
||||
|
||||
padding: 0.625rem;
|
||||
font-size: rem(14);
|
||||
transition: color 0.125s ease-in-out 0s, border-color 0.125s ease-in-out 0s, background 0.125s ease-in-out 0s, box-shadow 0.125s ease-in-out 0s;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-family: $font-family-sans;
|
||||
font-weight: 600;
|
||||
// STATE: hover, active, focus
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
// customizations from UXPL
|
||||
color: palette(grayscale, dark);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include margin-right(map-get($spacing-horizontal, x-small));
|
||||
@include margin-right(spacing-horizontal(x-small));
|
||||
|
||||
font-size: rem(18);
|
||||
font-size: font-size(large);
|
||||
}
|
||||
|
||||
// CASE: icon display only
|
||||
&.icon-only {
|
||||
.action-label {
|
||||
@include sr-only;
|
||||
@extend %a11y-hide;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,14 +139,9 @@
|
||||
// #INTRODUCTION
|
||||
// ------------------------------
|
||||
.introduction {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
@include text-align(center);
|
||||
|
||||
.introduction-copy {
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -165,7 +157,7 @@
|
||||
|
||||
// main accomplishment
|
||||
.accomplishment-main {
|
||||
background: $gray-x-back;
|
||||
background: palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
// brief accomplishment
|
||||
@@ -202,15 +194,15 @@
|
||||
}
|
||||
|
||||
%rendering-section {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
border-bottom: rem(2) solid $gray-x-back;
|
||||
padding-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
padding-bottom: spacing-vertical(base);
|
||||
}
|
||||
|
||||
%rendering-hd-section {
|
||||
margin-bottom: map-get($spacing-vertical, mid-small);
|
||||
border-bottom: rem(2) solid $gray-x-back;
|
||||
padding-bottom: map-get($spacing-vertical, x-small);
|
||||
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);
|
||||
@@ -220,15 +212,15 @@
|
||||
@extend %depth-card;
|
||||
|
||||
position: relative;
|
||||
top: -(map-get($spacing-vertical, base));
|
||||
top: -(spacing-vertical(base));
|
||||
border-top: rem(4) solid $cert-base-color;
|
||||
|
||||
// type
|
||||
.accomplishment-type {
|
||||
@include text-align(center);
|
||||
|
||||
margin-top: -(map-get($spacing-vertical, large));
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-top: -(spacing-vertical(large));
|
||||
margin-bottom: spacing-vertical(base);
|
||||
}
|
||||
|
||||
.accomplishment-type-label,
|
||||
@@ -237,16 +229,16 @@
|
||||
}
|
||||
|
||||
.accomplishment-type-label {
|
||||
@include make-col(10);
|
||||
@include span(10);
|
||||
|
||||
margin: 0 auto;
|
||||
font-weight: 600;
|
||||
font-weight: font-weight(semi-bold);
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(100));
|
||||
|
||||
margin: 0 auto map-get($spacing-vertical, small) auto;
|
||||
margin: 0 auto spacing-vertical(small) auto;
|
||||
}
|
||||
|
||||
// statement
|
||||
@@ -266,15 +258,12 @@
|
||||
|
||||
.accomplishment-summary {
|
||||
@extend %rendering-accomplishment-line;
|
||||
@extend %copy-lead;
|
||||
|
||||
margin-bottom: map-get($spacing-vertical, mid-small);
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
}
|
||||
|
||||
.accomplishment-course {
|
||||
@extend %rendering-accomplishment-line;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.accomplishment-course-description {
|
||||
@@ -283,12 +272,15 @@
|
||||
|
||||
.accomplishment-statement-detail {
|
||||
@extend %rendering-accomplishment-line;
|
||||
@extend %copy-lead;
|
||||
}
|
||||
|
||||
// organizations
|
||||
.accomplishment-orgs {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
.list-orgs {
|
||||
@extend %list-unstyled;
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-orgs-title {
|
||||
@@ -299,10 +291,13 @@
|
||||
.accomplishment-signatories {
|
||||
@extend %rendering-section;
|
||||
|
||||
.list-signatories {
|
||||
@extend %list-unstyled;
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
display: block;
|
||||
margin: 0 auto map-get($spacing-vertical, x-small) auto;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto spacing-vertical(x-small) auto;
|
||||
}
|
||||
|
||||
.signatory-name,
|
||||
@@ -311,16 +306,10 @@
|
||||
}
|
||||
|
||||
.signatory-name {
|
||||
margin-bottom: map-get($spacing-vertical, xx-small);
|
||||
margin-top: 0;
|
||||
font-weight: 400;
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.signatory-credentials {
|
||||
@extend %copy-micro;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
.role,
|
||||
.organization {
|
||||
white-space: pre-line;
|
||||
@@ -336,36 +325,35 @@
|
||||
|
||||
// metadata
|
||||
.accomplishment-metadata {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
.metadata {
|
||||
@extend %list-unstyled;
|
||||
|
||||
.label {
|
||||
@extend %copy-meta;
|
||||
|
||||
margin-bottom: map-get($spacing-vertical, xx-small);
|
||||
padding: 0 rem(8);
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.label-explanation {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
margin-top: map-get($spacing-vertical, xx-small);
|
||||
font-weight: font-weight(normal);
|
||||
margin-top: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.value {
|
||||
@extend %copy-base;
|
||||
|
||||
font-weight: 600;
|
||||
color: $gray-dark;
|
||||
margin: 0;
|
||||
padding: 0 rem(8);
|
||||
font-weight: font-weight(semi-bold);
|
||||
color: palette(grayscale, dark);
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-img,
|
||||
.recipient-details {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.recipient-img {
|
||||
@@ -373,7 +361,7 @@
|
||||
|
||||
width: rem(100);
|
||||
|
||||
@include margin-right(map-get($spacing-horizontal, small));
|
||||
@include margin-right(spacing-horizontal(small));
|
||||
|
||||
.src {
|
||||
max-height: 100%;
|
||||
@@ -384,17 +372,16 @@
|
||||
.recipient-details {
|
||||
@extend %copy-base;
|
||||
|
||||
font-weight: 600;
|
||||
max-width: calc(100% - (#{rem(100)} + #{map-get($spacing-horizontal, small)} + 5px));
|
||||
font-weight: font-weight(semi-bold);
|
||||
max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
|
||||
}
|
||||
|
||||
.recipient-name {
|
||||
margin-bottom: map-get($spacing-vertical, xx-small);
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.recipient-username {
|
||||
margin-bottom: 0;
|
||||
margin-top: rem(28);
|
||||
}
|
||||
|
||||
.accomplishment-id .value {
|
||||
@@ -405,7 +392,7 @@
|
||||
.accomplishment-metadata-title {
|
||||
@extend %hd-subsection;
|
||||
|
||||
border-bottom-color: $gray-back;
|
||||
border-bottom-color: palette(grayscale, back);
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -464,10 +451,6 @@
|
||||
color: $cert-decorative-color;
|
||||
}
|
||||
|
||||
.wrapper-statement-and-signatories {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// statement
|
||||
.accomplishment-statement,
|
||||
.accomplishment-statement-lead,
|
||||
@@ -490,7 +473,7 @@
|
||||
}
|
||||
|
||||
.accomplishment-main {
|
||||
background: $gray-x-back;
|
||||
background: palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
@@ -509,11 +492,11 @@
|
||||
// certificate - distinguished + verified
|
||||
.layout-accomplishment.certificate-verified {
|
||||
.introduction {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
}
|
||||
|
||||
.accomplishment-main {
|
||||
background: $primary-back;
|
||||
background: palette(primary, back);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
@@ -550,13 +533,13 @@
|
||||
// #FOOTER
|
||||
// ------------------------------
|
||||
.footer-app {
|
||||
border-top: rem(4) solid $gray-x-back;
|
||||
padding-top: map-get($spacing-vertical, base);
|
||||
border-top: rem(4) solid palette(grayscale, x-back);
|
||||
padding-top: spacing-vertical(base);
|
||||
}
|
||||
|
||||
.footer-app-nav {
|
||||
.list {
|
||||
padding: 0;
|
||||
@extend %list-unstyled;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -567,8 +550,8 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: $gray-transparent; /* dim the background */
|
||||
z-index: z-index(front);
|
||||
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
@@ -578,34 +561,30 @@
|
||||
|
||||
box-sizing: content-box;
|
||||
position: fixed;
|
||||
top: map-get($spacing-vertical, large);
|
||||
top: spacing-vertical(large);
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: z-index(very-front);
|
||||
max-width: 50%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
border-top: rem(10) solid $primary-back;
|
||||
background: $gray-x-back;
|
||||
padding-right: map-get($spacing-horizontal, large);
|
||||
padding-left: map-get($spacing-horizontal, large);
|
||||
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: $gray-dark;
|
||||
color: palette(grayscale, dark);
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: map-get($spacing-horizontal, mid-small);
|
||||
top: map-get($spacing-vertical, small);
|
||||
font-weight: 700;
|
||||
right: spacing-horizontal(mid-small);
|
||||
top: spacing-vertical(small);
|
||||
font-weight: font-weight(bold);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badges-steps {
|
||||
display: table;
|
||||
|
||||
a {
|
||||
@extend %link;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
@@ -623,7 +602,7 @@
|
||||
|
||||
.backpack-logo {
|
||||
@include float(right);
|
||||
@include margin-left(map-get($spacing-horizontal, small));
|
||||
@include margin-left(spacing-horizontal(small));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -631,7 +610,7 @@
|
||||
.modal-hr {
|
||||
display: block;
|
||||
border: none;
|
||||
background-color: $gray-back;
|
||||
background-color: palette(grayscale, back);
|
||||
height: rem(2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -6,150 +6,27 @@
|
||||
// #VARIABLES
|
||||
// ------------------------------
|
||||
|
||||
$gray-dark: rgba(17, 17, 17, 100);
|
||||
$gray-base: rgba(65, 65, 65, 100);
|
||||
$gray-accent: rgba(160, 160, 160, 100);
|
||||
$gray-back: rgba(217, 217, 217, 100);
|
||||
$gray-x-back: rgba(245, 245, 245, 100);
|
||||
$gray-transparent: rgba(65, 65, 65, 0.5);
|
||||
|
||||
$primary-accent: rgba(41, 145, 195, 100);
|
||||
$primary-back: rgba(204, 227, 240, 100);
|
||||
|
||||
// certificate characteristics
|
||||
$cert-base-color: $gray-dark;
|
||||
$cert-distinguished-color: $primary-accent;
|
||||
$cert-base-color: palette(grayscale, dark);
|
||||
$cert-distinguished-color: palette(primary, accent);
|
||||
|
||||
$cert-decorative-color: $gray-back;
|
||||
$cert-decorative-color-de-emphasized: $gray-back;
|
||||
$cert-decorative-color-emphasized: $gray-accent;
|
||||
$cert-decorative-color: palette(grayscale, back);
|
||||
$cert-decorative-color-de-emphasized: palette(grayscale, back);
|
||||
$cert-decorative-color-emphasized: palette(grayscale, accent);
|
||||
|
||||
// typography: config
|
||||
$font-path: '../../certificates/fonts';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Domine';
|
||||
font-weight: 400;
|
||||
src: url('#{$font-path}/Domine/Domine-Regular-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/Domine/Domine-Regular-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/Domine/Domine-Regular-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Domine';
|
||||
font-weight: 700;
|
||||
src: url('#{$font-path}/Domine/Domine-Bold-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/Domine/Domine-Bold-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/Domine/Domine-Bold-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 300;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-Light-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 400;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-Regular-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSansOpenSans-Regular-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 600;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 700;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
src: url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.woff');
|
||||
src:
|
||||
url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
|
||||
url('#{$font-path}/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
|
||||
}
|
||||
@include font-face(
|
||||
'Domine',
|
||||
'../../certificates/fonts/Domine/Domine-Regular-webfont',
|
||||
400,
|
||||
$file-formats: woff woff2 ttf
|
||||
);
|
||||
@include font-face(
|
||||
'Domine',
|
||||
'../../certificates/fonts/Domine/Domine-Bold-webfont',
|
||||
700,
|
||||
$file-formats: woff woff2 ttf
|
||||
);
|
||||
|
||||
// typography: config - stacks
|
||||
$font-family-serif: 'Domine', serif;
|
||||
$font-family-sans: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
|
||||
// vertical spacing
|
||||
$baseline-vertical: 2.5rem !default;
|
||||
|
||||
$spacing-vertical: (
|
||||
base: $baseline-vertical,
|
||||
mid-small: ($baseline-vertical*0.75),
|
||||
small: ($baseline-vertical/2),
|
||||
x-small: ($baseline-vertical/4),
|
||||
xx-small: ($baseline-vertical/8),
|
||||
xxx-small: ($baseline-vertical/10),
|
||||
mid-large: ($baseline-vertical*1.5),
|
||||
large: ($baseline-vertical*2),
|
||||
x-large: ($baseline-vertical*4)
|
||||
);
|
||||
|
||||
// horizontal spacing
|
||||
$baseline-horizontal: 1.25rem !default;
|
||||
|
||||
$spacing-horizontal: (
|
||||
base: $baseline-horizontal,
|
||||
mid-small: ($baseline-horizontal*0.75),
|
||||
small: ($baseline-horizontal/2),
|
||||
x-small: ($baseline-horizontal/4),
|
||||
xx-small: ($baseline-horizontal/8),
|
||||
mid-large: ($baseline-horizontal*1.5),
|
||||
large: ($baseline-horizontal*2),
|
||||
x-large: ($baseline-horizontal*4)
|
||||
);
|
||||
|
||||
@@ -10,10 +10,10 @@
|
||||
// #BASE
|
||||
// ------------------------------
|
||||
%layout-wrapper {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
padding: 0 5%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@media (min-width: $bp-screen-md) {
|
||||
padding: 0 2.5%;
|
||||
}
|
||||
}
|
||||
@@ -26,8 +26,8 @@
|
||||
.wrapper-header {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
padding-top: map-get($spacing-vertical, small);
|
||||
padding-bottom: map-get($spacing-vertical, small);
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.header-app {
|
||||
@@ -36,7 +36,7 @@
|
||||
.logo {
|
||||
display: block;
|
||||
|
||||
@include size(rem(100), auto);
|
||||
@include size(rem(100) auto);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
.header-app-title {
|
||||
@include text-align(center);
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
@@ -58,8 +58,8 @@
|
||||
.wrapper-banner {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
padding-top: map-get($spacing-vertical, small);
|
||||
padding-bottom: map-get($spacing-vertical, small);
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
|
||||
.banner {
|
||||
@extend %layout;
|
||||
@@ -68,13 +68,13 @@
|
||||
|
||||
// message to user-centric banner
|
||||
.wrapper-banner-user {
|
||||
margin-top: -(map-get($spacing-vertical, base)); // abut the global header, plz
|
||||
margin-top: -(spacing-vertical(base)); // abut the global header, plz
|
||||
}
|
||||
|
||||
.banner-user {
|
||||
@include text-align(center);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@media (min-width: $bp-screen-lg) {
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
@@ -82,17 +82,16 @@
|
||||
@include grid-container();
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
margin-top: 0;
|
||||
margin-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
|
||||
.action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto map-get($spacing-vertical, small) auto;
|
||||
margin: 0 auto spacing-vertical(small) auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -100,8 +99,8 @@
|
||||
|
||||
// CASE: icon display only
|
||||
&.icon-only {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: map-get($spacing-vertical, x-small) map-get($spacing-horizontal, base);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(base);
|
||||
|
||||
.icon {
|
||||
@include margin-right(0);
|
||||
@@ -109,13 +108,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@media (min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 130px;
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
margin-right: map-get($spacing-horizontal, mid-small);
|
||||
margin-right: spacing-horizontal(mid-small);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
@@ -136,47 +135,36 @@
|
||||
}
|
||||
|
||||
.footer-app-copyright {
|
||||
@extend %copy-micro;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(6);
|
||||
@include margin-left(0);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(6, after);
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-app-nav {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(6);
|
||||
@include margin-right(0);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(6, before);
|
||||
}
|
||||
|
||||
.list {
|
||||
.nav-item {
|
||||
@extend %copy-meta;
|
||||
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: map-get($spacing-vertical, x-small);
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@media (min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right(map-get($spacing-horizontal, base));
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
@extend %link;
|
||||
}
|
||||
}
|
||||
|
||||
.list-legal {
|
||||
@include media-breakpoint-up(md) {
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include text-align(right);
|
||||
}
|
||||
}
|
||||
@@ -189,7 +177,7 @@
|
||||
.wrapper-introduction {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
margin-bottom: map-get($spacing-vertical, large);
|
||||
margin-bottom: spacing-vertical(large);
|
||||
|
||||
.introduction {
|
||||
@extend %layout;
|
||||
@@ -199,59 +187,57 @@
|
||||
.wrapper-accomplishment-rendering {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
@extend %layout;
|
||||
|
||||
position: relative;
|
||||
top: -(map-get($spacing-vertical, base));
|
||||
top: -(spacing-vertical(base));
|
||||
|
||||
.accomplishment-course,
|
||||
.accomplishment-recipient,
|
||||
.accomplishment-type {
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
}
|
||||
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-orgs {
|
||||
@include make-container();
|
||||
@include grid-row;
|
||||
|
||||
.wrapper-orgs {
|
||||
@include text-align(center);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper-organization {
|
||||
@include make-col(6);
|
||||
@include span(6);
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: rem(100);
|
||||
width: calc(50% - 1rem);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(3);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(2);
|
||||
@media (min-width: $bp-screen-lg) {
|
||||
@include span(2);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(2);
|
||||
@media (min-width: $bp-screen-xl) {
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -269,10 +255,6 @@
|
||||
@include left(50%);
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@include rtl {
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -284,27 +266,26 @@
|
||||
.signatory {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(4);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(3);
|
||||
@media (min-width: $bp-screen-lg) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(3);
|
||||
@media (min-width: $bp-screen-xl) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: rem(100);
|
||||
padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, small);
|
||||
padding: spacing-vertical(small) spacing-horizontal(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -316,33 +297,29 @@
|
||||
@extend %layout;
|
||||
|
||||
.accomplishment-metadata-title {
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-metadata {
|
||||
@extend %layout;
|
||||
|
||||
@include make-container();
|
||||
|
||||
padding: 0;
|
||||
|
||||
.metadata {
|
||||
@extend %divider-2;
|
||||
|
||||
@include make-col(12);
|
||||
@include span(12);
|
||||
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
border-bottom-color: $gray-x-back;
|
||||
padding-bottom: map-get($spacing-vertical, small);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
border-bottom-color: palette(grayscale, x-back);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(4);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
@@ -359,15 +336,15 @@
|
||||
}
|
||||
|
||||
.accomplishment-brief {
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(6);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(50));
|
||||
@include margin-right(map-get($spacing-horizontal, base));
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -380,40 +357,17 @@
|
||||
}
|
||||
|
||||
.about-item {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(6);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %link;
|
||||
}
|
||||
|
||||
.about-edx-title,
|
||||
.about-title {
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
|
||||
@include margin(0, rem(8), rem(10), rem(8));
|
||||
}
|
||||
|
||||
.about-copy,
|
||||
.about-edx-copy {
|
||||
@extend %copy-meta;
|
||||
|
||||
margin: 0 rem(8);
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
%print-rendering-section {
|
||||
margin-bottom: map-get($spacing-vertical, small);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
body {
|
||||
height: auto;
|
||||
margin: map-get($spacing-vertical, mid-large) map-get($spacing-vertical, mid-small) 0 map-get($spacing-vertical, mid-small) !important;
|
||||
margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -124,64 +124,64 @@
|
||||
|
||||
// headings
|
||||
.hd-1 {
|
||||
font-size: rem(21);
|
||||
line-height: 1.5;
|
||||
font-size: font-size(x-large);
|
||||
line-height: line-height(x-large);
|
||||
}
|
||||
|
||||
.hd-2 {
|
||||
font-size: rem(18);
|
||||
line-height: 1.6;
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
}
|
||||
|
||||
.hd-3 {
|
||||
font-size: rem(18);
|
||||
line-height: 1.6;
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
}
|
||||
|
||||
.hd-4 {
|
||||
font-size: rem(16);
|
||||
line-height: 1.5;
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.hd-5 {
|
||||
font-size: rem(14);
|
||||
line-height: 1.6;
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.hd-6 {
|
||||
font-size: rem(12);
|
||||
line-height: 1.5;
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
.hd-7 {
|
||||
font-size: rem(11);
|
||||
line-height: 1.5;
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
// copy
|
||||
.copy.copy-lead {
|
||||
font-size: rem(16);
|
||||
line-height: 1.5;
|
||||
.copy-lead {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy.copy-large {
|
||||
font-size: rem(16);
|
||||
line-height: 1.5;
|
||||
.copy-large {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy.copy-base {
|
||||
font-size: rem(14);
|
||||
line-height: 1.6;
|
||||
.copy-base {
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy.copy-meta {
|
||||
font-size: rem(12);
|
||||
line-height: 1.6;
|
||||
.copy-meta {
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy.copy-micro {
|
||||
font-size: rem(11);
|
||||
line-height: 1.5;
|
||||
.copy-micro {
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
// accomplishment
|
||||
@@ -191,17 +191,14 @@
|
||||
|
||||
.accomplishment-rendering {
|
||||
top: 0 !important;
|
||||
border: rem(1) solid $gray-back;
|
||||
border: rem(1) solid palette(grayscale, back);
|
||||
border-top: rem(2) solid $cert-base-color;
|
||||
box-shadow: none;
|
||||
padding: map-get($spacing-vertical, small) map-get($spacing-horizontal, mid-large);
|
||||
padding: spacing-vertical(small) spacing-horizontal(mid-large);
|
||||
|
||||
@include rtl {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.accomplishment-type {
|
||||
margin-top: -(map-get($spacing-vertical, mid-large));
|
||||
margin-top: -(spacing-vertical(mid-large));
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@@ -211,20 +208,20 @@
|
||||
}
|
||||
|
||||
.wrapper-statement-and-signatories {
|
||||
border-bottom: rem(2) solid $gray-x-back;
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
.accomplishment-statement {
|
||||
@extend %print-rendering-section;
|
||||
|
||||
@include make-col(8);
|
||||
@include span(8);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
margin-bottom: map-get($spacing-vertical, mid-small);
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
}
|
||||
|
||||
.wrapper-orgs::after {
|
||||
@@ -238,8 +235,8 @@
|
||||
|
||||
.wrapper-organization {
|
||||
height: rem(48);
|
||||
margin-top: map-get($spacing-vertical, mid-small) !important;
|
||||
margin-bottom: map-get($spacing-vertical, mid-small) !important;
|
||||
margin-top: spacing-vertical(mid-small) !important;
|
||||
margin-bottom: spacing-vertical(mid-small) !important;
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
@@ -251,8 +248,7 @@
|
||||
.accomplishment-signatories {
|
||||
@extend %print-rendering-section;
|
||||
|
||||
@include make-col(12);
|
||||
@include margin-right(0);
|
||||
@include span(12, before);
|
||||
|
||||
.signatory-credentials {
|
||||
font-size: 8pt;
|
||||
@@ -260,7 +256,7 @@
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
height: map-get($spacing-vertical, small);
|
||||
height: spacing-vertical(small);
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 0 !important;
|
||||
@@ -268,7 +264,7 @@
|
||||
}
|
||||
|
||||
.signatory-name {
|
||||
font-size: rem(12);
|
||||
font-size: font-size(x-small);
|
||||
}
|
||||
|
||||
.signatory-credentials {
|
||||
@@ -278,7 +274,7 @@
|
||||
// CASE: > 4 signatures
|
||||
&.has-many {
|
||||
.signatory {
|
||||
@include make-col(2);
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -305,12 +301,12 @@
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
font-size: rem(12);
|
||||
line-height: 1.6;
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include margin-right(map-get($spacing-horizontal, small));
|
||||
@include margin-right(spacing-horizontal(small));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -319,8 +315,6 @@
|
||||
float: left;
|
||||
width: 65% !important;
|
||||
margin: 0 !important;
|
||||
flex: none !important;
|
||||
max-width: 65% !important;
|
||||
|
||||
@include text-align(left);
|
||||
}
|
||||
@@ -329,8 +323,6 @@
|
||||
float: right;
|
||||
width: 35% !important;
|
||||
margin: 0 !important;
|
||||
flex: none !important;
|
||||
max-width: 35% !important;
|
||||
|
||||
@include text-align(right);
|
||||
}
|
||||
@@ -348,3 +340,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,163 +10,21 @@
|
||||
// ------------------------------
|
||||
// #FUNCTIONS
|
||||
// ------------------------------
|
||||
@function rem($size) {
|
||||
$remSize: $size / 16;
|
||||
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #MIXINS
|
||||
// ------------------------------
|
||||
@mixin grid-container() {
|
||||
display: flex;
|
||||
max-width: 73.125rem;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@mixin triangle($size, $color, $direction) {
|
||||
$width: nth($size, 1);
|
||||
$height: nth($size, length($size));
|
||||
$foreground-color: nth($color, 1);
|
||||
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
||||
$width: $width / 2;
|
||||
$height: if(length($size) > 1, $height, $height/2);
|
||||
|
||||
@if $direction == up {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
|
||||
@else if $direction == right {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-left: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
}
|
||||
|
||||
@else if $direction == down {
|
||||
border-left: $width solid $background-color;
|
||||
border-right: $width solid $background-color;
|
||||
border-top: $height solid $foreground-color;
|
||||
}
|
||||
|
||||
@else if $direction == left {
|
||||
border-bottom: $width solid $background-color;
|
||||
border-right: $height solid $foreground-color;
|
||||
border-top: $width solid $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == up-right) or ($direction == up-left) {
|
||||
border-top: $height solid $foreground-color;
|
||||
|
||||
@if $direction == up-right {
|
||||
border-left: $width solid $background-color;
|
||||
}
|
||||
|
||||
@else if $direction == up-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == down-right) or ($direction == down-left) {
|
||||
border-bottom: $height solid $foreground-color;
|
||||
|
||||
@if $direction == down-right {
|
||||
border-left: $width solid $background-color;
|
||||
}
|
||||
|
||||
@else if $direction == down-left {
|
||||
border-right: $width solid $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@else if ($direction == inset-up) {
|
||||
border-color: $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-down) {
|
||||
border-color: $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $height $width;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-right) {
|
||||
border-color: $background-color $background-color $background-color $foreground-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
}
|
||||
|
||||
@else if ($direction == inset-left) {
|
||||
border-color: $background-color $foreground-color $background-color $background-color;
|
||||
border-style: solid;
|
||||
border-width: $width $height;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #HELPERS
|
||||
// ------------------------------
|
||||
// visual dividers
|
||||
%divider-1 {
|
||||
border-bottom-width: map-get($spacing-vertical, xxx-small);
|
||||
border-bottom-width: rem(4);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
%divider-2 {
|
||||
border-bottom-width: 0.125rem;
|
||||
border-bottom-width: rem(2);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
%copy-meta {
|
||||
font-size: rem(14);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%copy-base {
|
||||
font-size: rem(16);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%copy-large {
|
||||
font-size: rem(18);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%copy-lead {
|
||||
font-size: rem(21);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%copy-micro {
|
||||
font-size: rem(12);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
%copy-meta {
|
||||
font-size: rem(14);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%link {
|
||||
color: $primary-accent;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,18 +24,16 @@
|
||||
}
|
||||
|
||||
.content-main {
|
||||
margin-bottom: map-get($spacing-vertical, base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(9);
|
||||
@include margin-left(0);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(9, after);
|
||||
}
|
||||
}
|
||||
|
||||
.content-secondary {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(3);
|
||||
@include margin-right(0);
|
||||
@media (min-width: $bp-screen-md) {
|
||||
@include span(3, before);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,10 +6,11 @@
|
||||
// NOTE: This is the left to right (LTR) configured style compile.
|
||||
// It should mirror main-rtl w/ the exception of bi-app references.
|
||||
|
||||
@import '../sass/vendor/bi-app/bi-app-ltr';
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
@import 'bootstrap/scss/mixins';
|
||||
|
||||
// Load the LTR version of the edX Pattern Library
|
||||
$pattern-library-path: '../../edx-pattern-library' !default;
|
||||
|
||||
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
|
||||
|
||||
// Load the shared build
|
||||
@import 'build';
|
||||
|
||||
@@ -6,10 +6,11 @@
|
||||
// NOTE: This is the right to left (RTL) configured style compile.
|
||||
// It should mirror main-ltr w/ the exception of bi-app references.
|
||||
|
||||
@import '../sass/vendor/bi-app/bi-app-rtl';
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
@import 'bootstrap/scss/mixins';
|
||||
|
||||
// Load the RTL version of the edX Pattern Library
|
||||
$pattern-library-path: '../../edx-pattern-library' !default;
|
||||
|
||||
@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
|
||||
|
||||
// Load the shared build
|
||||
@import 'build';
|
||||
|
||||
Reference in New Issue
Block a user