Revert "Update to UXPL 0.17 (grids compilation performance work)"
This commit is contained in:
@@ -228,7 +228,7 @@
|
||||
}
|
||||
|
||||
.accomplishment-type-label {
|
||||
@include span(10);
|
||||
width: span(10);
|
||||
margin: 0 auto;
|
||||
font-weight: font-weight(semi-bold);
|
||||
}
|
||||
|
||||
@@ -11,15 +11,15 @@
|
||||
// ------------------------------
|
||||
%layout-wrapper {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
padding: 0 5%;
|
||||
padding: 0 (gutter()*2);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
padding: 0 2.5%;
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
padding: 0 gutter();
|
||||
}
|
||||
}
|
||||
|
||||
%layout {
|
||||
@include grid-container();
|
||||
@include container();
|
||||
}
|
||||
|
||||
// app header
|
||||
@@ -45,9 +45,8 @@
|
||||
}
|
||||
|
||||
.header-app-title {
|
||||
@include text-align(center);
|
||||
@include span(12);
|
||||
margin: 0;
|
||||
@include text-align(center);
|
||||
}
|
||||
|
||||
// banner
|
||||
@@ -69,12 +68,12 @@
|
||||
.banner-user {
|
||||
@include text-align(center);
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include susy-breakpoint($bp-screen-lg, $susy) {
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
.wrapper-copy-and-actions {
|
||||
@include grid-container();
|
||||
@include container();
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
@@ -92,7 +91,7 @@
|
||||
// CASE: icon display only
|
||||
&.icon-only {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(base);
|
||||
|
||||
.icon {
|
||||
@@ -101,7 +100,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
@@ -127,16 +126,16 @@
|
||||
|
||||
.footer-app-copyright {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, after);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include span(6 first);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-app-nav {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, before);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include span(6 last);
|
||||
}
|
||||
|
||||
.list {
|
||||
@@ -145,7 +144,7 @@
|
||||
display: block;
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
@@ -156,7 +155,7 @@
|
||||
|
||||
.list-legal {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include text-align(right);
|
||||
}
|
||||
}
|
||||
@@ -187,46 +186,52 @@
|
||||
top: -(spacing-vertical(base));
|
||||
|
||||
.accomplishment-course,
|
||||
.accomplishment-recipient,
|
||||
.accomplishment-type {
|
||||
@include span(12);
|
||||
.accomplishment-recipient {
|
||||
width: span(12);
|
||||
|
||||
@include susy-breakpoint($bp-screen-lg, $susy) {
|
||||
width: span(10);
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
@include span(12);
|
||||
width: span(12);
|
||||
|
||||
@include susy-breakpoint($bp-screen-lg, $susy) {
|
||||
width: span(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-orgs {
|
||||
@include grid-row;
|
||||
|
||||
.wrapper-orgs {
|
||||
@include text-align(center);
|
||||
}
|
||||
|
||||
.wrapper-organization {
|
||||
@include span(6);
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: span(6);
|
||||
height: rem(100);
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(3);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
width: span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(2);
|
||||
@include susy-breakpoint($bp-screen-lg, $susy) {
|
||||
width: span(2);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(2);
|
||||
@include susy-breakpoint($bp-screen-xl, $susy) {
|
||||
width: span(2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -254,18 +259,18 @@
|
||||
.signatory {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include span(12);
|
||||
width: span(12);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
width: span(4);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(3);
|
||||
@include susy-breakpoint($bp-screen-lg, $susy) {
|
||||
width: span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(3);
|
||||
@include susy-breakpoint($bp-screen-xl, $susy) {
|
||||
width: span(3);
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
@@ -281,32 +286,24 @@
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.accomplishment-metadata {
|
||||
@extend %layout;
|
||||
|
||||
.accomplishment-metadata-title {
|
||||
@include span(12);
|
||||
}
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.wrapper-metadata {
|
||||
@extend %layout;
|
||||
.wrapper-metadata .metadata {
|
||||
@extend %divider-2;
|
||||
margin-bottom: spacing-vertical(small);
|
||||
border-bottom-color: palette(grayscale, x-back);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
|
||||
.metadata {
|
||||
@extend %divider-2;
|
||||
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;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include gallery(4);
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -321,8 +318,8 @@
|
||||
.accomplishment-brief {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include gallery(6);
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@@ -346,8 +343,8 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include gallery(6);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
|
||||
.accomplishment-statement {
|
||||
@extend %print-rendering-section;
|
||||
@include span(8);
|
||||
width: span(8);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -244,7 +244,7 @@
|
||||
|
||||
.accomplishment-signatories {
|
||||
@extend %print-rendering-section;
|
||||
@include span(12, before);
|
||||
@include span(12 last);
|
||||
|
||||
.signatory-credentials {
|
||||
font-size: 8pt;
|
||||
@@ -271,7 +271,7 @@
|
||||
&.has-many {
|
||||
|
||||
.signatory {
|
||||
@include span(2);
|
||||
@include gallery(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,15 +26,15 @@
|
||||
.content-main {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(9, after);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include span(9 of 12 first);
|
||||
}
|
||||
}
|
||||
|
||||
.content-secondary {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(3, before);
|
||||
@include susy-breakpoint($bp-screen-md, $susy) {
|
||||
@include span(3 of 12 last);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,6 +177,7 @@ body.discussion {
|
||||
|
||||
.container .discussion-body {
|
||||
@include clearfix();
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
@@ -294,7 +295,7 @@ body.discussion {
|
||||
// inline discussion module
|
||||
.discussion-module {
|
||||
@extend .discussion-body;
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
margin: $baseline 0;
|
||||
padding: $baseline;
|
||||
|
||||
@@ -22,7 +22,7 @@ $full-width-banner-margin: 20px;
|
||||
background: $black;
|
||||
opacity: 0.65;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@@ -31,7 +31,7 @@ $full-width-banner-margin: 20px;
|
||||
.banner-background-image {
|
||||
height: $full-width-banner-img-height;
|
||||
|
||||
@media(min-width: $full-width-banner-img-width) {
|
||||
@include susy-media($full-width-banner-img-width) {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
.course-card {
|
||||
@include span(10);
|
||||
@include pre(1);
|
||||
@include post(1);
|
||||
width: 85%;
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
@@ -10,7 +8,9 @@
|
||||
padding: $baseline/2 0;
|
||||
|
||||
.section {
|
||||
@extend .grid-container;
|
||||
@extend .grid-manual;
|
||||
|
||||
padding: $baseline/2 $baseline;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
.header-img {
|
||||
max-width: 100%;
|
||||
@media(min-width: $bp-screen-sm) {
|
||||
@include susy-media($bp-screen-sm) {
|
||||
max-width: 191px;
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
.course-details {
|
||||
@include float(right);
|
||||
width: 100%;
|
||||
@media(min-width: $bp-screen-sm) { width: calc(100% - 191px); }
|
||||
@include susy-media($bp-screen-sm) { width: calc(100% - 191px); }
|
||||
padding-left: $baseline*1.5;
|
||||
|
||||
.course-title {
|
||||
@@ -131,17 +131,17 @@
|
||||
.message {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upgrade-message,
|
||||
.certificate-status {
|
||||
border-top: 1px solid palette(grayscale, back);
|
||||
padding-top: $baseline;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -7,20 +7,17 @@
|
||||
}
|
||||
|
||||
.program-card {
|
||||
@include span(12);
|
||||
@include span(12);
|
||||
border: 1px solid $border-color-l3;
|
||||
border-bottom: none;
|
||||
margin-bottom: $baseline;
|
||||
position: relative;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
@include span(6);
|
||||
|
||||
&:nth-child(2n) {
|
||||
@include span(6, before);
|
||||
}
|
||||
&:nth-child(2n+1) {
|
||||
@include span(6, after);
|
||||
@include margin-right(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +30,7 @@
|
||||
border: 0;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -45,9 +42,9 @@
|
||||
overflow: hidden;
|
||||
height: 166px;
|
||||
|
||||
@media(min-width: $bp-screen-sm) { height: 242px; }
|
||||
@media(min-width: $bp-screen-md) { height: 116px; }
|
||||
@media(min-width: $bp-screen-lg) { height: 145px; }
|
||||
@include susy-media($bp-screen-sm) { height: 242px; }
|
||||
@include susy-media($bp-screen-md) { height: 116px; }
|
||||
@include susy-media($bp-screen-lg) { height: 145px; }
|
||||
|
||||
.banner-image {
|
||||
@include left(50%);
|
||||
@@ -65,9 +62,9 @@
|
||||
position: relative;
|
||||
margin-top: 156px;
|
||||
|
||||
@media(min-width: $bp-screen-sm) { margin-top: 232px; }
|
||||
@media(min-width: $bp-screen-md) { margin-top: 106px; }
|
||||
@media(min-width: $bp-screen-lg) { margin-top: 135px; }
|
||||
@include susy-media($bp-screen-sm) { margin-top: 232px; }
|
||||
@include susy-media($bp-screen-md) { margin-top: 106px; }
|
||||
@include susy-media($bp-screen-lg) { margin-top: 135px; }
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
@@ -79,13 +76,13 @@
|
||||
}
|
||||
|
||||
.organization {
|
||||
@include span(6, none);
|
||||
@include span(6);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category {
|
||||
@include span(6, none);
|
||||
@include span(6);
|
||||
@include text-align(right);
|
||||
|
||||
.category-text {
|
||||
@@ -116,7 +113,7 @@
|
||||
color: palette(grayscale, dark);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
.secondary {
|
||||
@extend %hide-until-focus;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@include span(12, none);
|
||||
width: span(12);
|
||||
margin: 0 auto;
|
||||
|
||||
@media print {
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
.colophon {
|
||||
@include span(12);
|
||||
|
||||
@media(min-width: $bp-screen-sm) {
|
||||
@include susy-media($bp-screen-sm) {
|
||||
@include span(8);
|
||||
}
|
||||
|
||||
@@ -168,7 +168,7 @@
|
||||
@include text-align(right);
|
||||
vertical-align: bottom;
|
||||
|
||||
@media(min-width: $bp-screen-sm) {
|
||||
@include susy-media($bp-screen-sm) {
|
||||
@include span(4);
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
.wrapper-header {
|
||||
@include clearfix();
|
||||
box-sizing: border-box;
|
||||
height: 74px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 10px 0;
|
||||
width: 100%;
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
margin: 0 auto;
|
||||
padding: 18px ($baseline/2) 0;
|
||||
max-width: grid-width(12);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1.logo {
|
||||
@@ -323,6 +324,7 @@
|
||||
|
||||
.nav-courseware {
|
||||
@include float(right);
|
||||
margin-top: ($baseline/4);
|
||||
list-style: none;
|
||||
|
||||
li, div {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
.breadcrumb-wrapper {
|
||||
padding: $full-width-banner-margin;
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include susy-media(1200px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,10 +3,9 @@
|
||||
}
|
||||
|
||||
.program-cards-container {
|
||||
@include grid-container();
|
||||
@include span(12);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
@include span(9);
|
||||
}
|
||||
}
|
||||
@@ -16,7 +15,7 @@
|
||||
@include float(right);
|
||||
margin-bottom: $baseline;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include susy-media($bp-screen-md) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@@ -67,7 +66,6 @@
|
||||
}
|
||||
|
||||
.empty-programs-message {
|
||||
@include span(12);
|
||||
border: 3px solid $gray-l4;
|
||||
background: $gray-l6;
|
||||
padding: ($baseline*2) 0;
|
||||
|
||||
Reference in New Issue
Block a user