Merge pull request #16211 from edx/andya/further-stylelint-fixes
More Sass quality fixes
This commit is contained in:
Andy Armstrong
@@ -1,2 +1,4 @@
|
||||
common/lib/xmodule/xmodule/css
|
||||
common/static/sass/bourbon
|
||||
common/static/xmodule/modules/css
|
||||
lms/static/sass/vendor
|
||||
|
||||
@@ -22,16 +22,18 @@ $annotatable--body-font-size: em(14);
|
||||
border-radius: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&.shaded { background-color: #EDEDED; }
|
||||
&.shaded { background-color: #ededed; }
|
||||
|
||||
.annotatable-section-title {
|
||||
font-weight: bold;
|
||||
a { font-weight: normal; }
|
||||
}
|
||||
|
||||
.annotatable-section-body {
|
||||
border-top: 1px solid $annotatable--border-color;
|
||||
margin-top: 0.5em;
|
||||
padding-top: 0.5em;
|
||||
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
@@ -40,6 +42,7 @@ $annotatable--body-font-size: em(14);
|
||||
margin-left: 4em;
|
||||
b { font-weight: bold; }
|
||||
i { font-style: italic; }
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
white-space: pre;
|
||||
@@ -58,9 +61,11 @@ $annotatable--body-font-size: em(14);
|
||||
|
||||
.annotatable-span {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
display: inline;
|
||||
|
||||
$highlight_index: 0;
|
||||
|
||||
@each $highlight in (
|
||||
(yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
|
||||
(red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
|
||||
@@ -80,6 +85,7 @@ $annotatable--body-font-size: em(14);
|
||||
&.selected { background-color: $selected_color; }
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-#{$marker} {
|
||||
background-color: $color;
|
||||
&.selected { background-color: $selected_color; }
|
||||
@@ -89,6 +95,7 @@ $annotatable--body-font-size: em(14);
|
||||
&.hide {
|
||||
cursor: none;
|
||||
background-color: inherit;
|
||||
|
||||
.annotatable-icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -113,20 +120,24 @@ $annotatable--body-font-size: em(14);
|
||||
background-color: transparent;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
border: none;
|
||||
|
||||
.ui-tooltip-title {
|
||||
padding: ($baseline/4) 0;
|
||||
border-bottom: 2px solid #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-tooltip-icon {
|
||||
right: 10px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.ui-state-hover {
|
||||
color: inherit;
|
||||
border: 1px solid $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tooltip-content {
|
||||
color: inherit;
|
||||
font-size: em(14);
|
||||
@@ -136,16 +147,19 @@ $annotatable--body-font-size: em(14);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
color: inherit;
|
||||
line-height: normal;
|
||||
color: inherit;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-tooltip.qtip.ui-tooltip-annotatable {
|
||||
max-width: 375px;
|
||||
|
||||
.ui-tooltip-content {
|
||||
padding: 0 ($baseline/2);
|
||||
|
||||
.annotatable-comment {
|
||||
display: block;
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
@@ -153,6 +167,7 @@ $annotatable--body-font-size: em(14);
|
||||
overflow: auto;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.annotatable-reply {
|
||||
display: block;
|
||||
border-top: 2px solid #333;
|
||||
@@ -161,6 +176,7 @@ $annotatable--body-font-size: em(14);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
||||
@@ -46,10 +46,10 @@ $asterisk-icon: '\f069'; // .fa-asterisk
|
||||
// +Mixins - Status Icon - Capa
|
||||
// ====================
|
||||
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
|
||||
|
||||
.status-icon {
|
||||
&:after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
color: $color;
|
||||
font-size: 1.2em;
|
||||
content: $fontAwesomeIcon;
|
||||
@@ -65,6 +65,7 @@ h2 {
|
||||
|
||||
&.problem-header {
|
||||
display: inline-block;
|
||||
|
||||
section.staff {
|
||||
margin-top: ($baseline*1.5);
|
||||
font-size: 80%;
|
||||
@@ -92,6 +93,7 @@ h2 {
|
||||
|
||||
.feedback-hint-incorrect {
|
||||
@extend %feedback-hint;
|
||||
|
||||
.icon {
|
||||
color: $incorrect;
|
||||
}
|
||||
@@ -100,6 +102,7 @@ h2 {
|
||||
.feedback-hint-partially-correct,
|
||||
.feedback-hint-correct {
|
||||
@extend %feedback-hint;
|
||||
|
||||
.icon {
|
||||
color: $correct;
|
||||
}
|
||||
@@ -200,12 +203,14 @@ div.problem {
|
||||
// Choice Group - silent class
|
||||
%choicegroup-base {
|
||||
@include clearfix();
|
||||
|
||||
min-width: 100px;
|
||||
width: auto !important;
|
||||
width: 100px;
|
||||
|
||||
label {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
margin-bottom: ($baseline/2);
|
||||
@@ -224,6 +229,7 @@ div.problem {
|
||||
|
||||
&.choicegroup_correct {
|
||||
@include status-icon($correct, $checkmark-icon);
|
||||
|
||||
border: 2px solid $correct;
|
||||
|
||||
// keep green for correct answers on hover.
|
||||
@@ -234,6 +240,7 @@ div.problem {
|
||||
|
||||
&.choicegroup_partially-correct {
|
||||
@include status-icon($partially-correct, $asterisk-icon);
|
||||
|
||||
border: 2px solid $partially-correct;
|
||||
|
||||
// keep green for correct answers on hover.
|
||||
@@ -244,6 +251,7 @@ div.problem {
|
||||
|
||||
&.choicegroup_incorrect {
|
||||
@include status-icon($incorrect, $cross-icon);
|
||||
|
||||
border: 2px solid $incorrect;
|
||||
|
||||
// keep red for incorrect answers on hover.
|
||||
@@ -283,9 +291,11 @@ div.problem {
|
||||
div.problem {
|
||||
.choicegroup {
|
||||
@extend %choicegroup-base;
|
||||
|
||||
label {
|
||||
@include padding($baseline/2);
|
||||
@include padding-left($baseline*1.9);
|
||||
|
||||
position: relative;
|
||||
font-size: $base-font-size;
|
||||
line-height: normal;
|
||||
@@ -295,6 +305,7 @@ div.problem {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@include left(em(9));
|
||||
|
||||
position: absolute;
|
||||
top: em(9);
|
||||
}
|
||||
@@ -317,9 +328,8 @@ div.problem {
|
||||
// ====================
|
||||
// Summary status indicators shown after the input area
|
||||
div.problem {
|
||||
|
||||
.indicator-container {
|
||||
@include margin-left($baseline*.75);
|
||||
@include margin-left($baseline*.75);
|
||||
|
||||
.status {
|
||||
width: $baseline;
|
||||
@@ -398,6 +408,7 @@ div.problem {
|
||||
|
||||
span.clarification i {
|
||||
font-style: normal;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
@@ -447,10 +458,12 @@ div.problem {
|
||||
|
||||
&:before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline;
|
||||
content: "Answer: ";
|
||||
|
||||
}
|
||||
|
||||
&:empty {
|
||||
&:before {
|
||||
display: none;
|
||||
@@ -468,6 +481,7 @@ div.problem {
|
||||
|
||||
img.loading {
|
||||
@include padding-left($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -533,12 +547,14 @@ div.problem {
|
||||
|
||||
.reload {
|
||||
@include float(right);
|
||||
|
||||
margin: ($baseline/2);
|
||||
}
|
||||
|
||||
|
||||
.grader-status {
|
||||
@include clearfix();
|
||||
|
||||
margin: $baseline/2 0;
|
||||
padding: $baseline/2;
|
||||
border-radius: 5px;
|
||||
@@ -583,6 +599,7 @@ div.problem {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.evaluation {
|
||||
p {
|
||||
margin-bottom: ($baseline/5);
|
||||
@@ -598,6 +615,7 @@ div.problem {
|
||||
.evaluation-response {
|
||||
header {
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
font-size: .85em;
|
||||
}
|
||||
@@ -686,7 +704,6 @@ div.problem {
|
||||
table-layout: auto;
|
||||
|
||||
td, th {
|
||||
|
||||
&.cont-justified-left {
|
||||
text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
|
||||
}
|
||||
@@ -702,6 +719,7 @@ div.problem {
|
||||
|
||||
th {
|
||||
@extend %t-strong;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -760,9 +778,9 @@ div.problem {
|
||||
// ====================
|
||||
.problem {
|
||||
.capa_inputtype.textline, .inputtype.formulaequationinput {
|
||||
|
||||
input {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
border: 2px solid $gray-l4;
|
||||
border-radius: 3px;
|
||||
min-width: 160px;
|
||||
@@ -777,7 +795,6 @@ div.problem {
|
||||
|
||||
// CASE: incorrect answer
|
||||
> .incorrect {
|
||||
|
||||
input {
|
||||
border: 2px solid $incorrect;
|
||||
}
|
||||
@@ -789,7 +806,6 @@ div.problem {
|
||||
|
||||
// CASE: partially correct answer
|
||||
> .partially-correct {
|
||||
|
||||
input {
|
||||
border: 2px solid $partially-correct;
|
||||
}
|
||||
@@ -801,7 +817,6 @@ div.problem {
|
||||
|
||||
// CASE: correct answer
|
||||
> .correct {
|
||||
|
||||
input {
|
||||
border: 2px solid $correct;
|
||||
}
|
||||
@@ -813,7 +828,6 @@ div.problem {
|
||||
|
||||
// CASE: submitted, correctness withheld
|
||||
> .submitted {
|
||||
|
||||
input {
|
||||
border: 2px solid $submitted;
|
||||
}
|
||||
@@ -825,7 +839,6 @@ div.problem {
|
||||
|
||||
// CASE: unanswered and unsubmitted
|
||||
> .unanswered, > .unsubmitted {
|
||||
|
||||
input {
|
||||
border: 2px solid $gray-l4;
|
||||
}
|
||||
@@ -843,6 +856,7 @@ div.problem {
|
||||
|
||||
.trailing_text {
|
||||
@include margin-right($baseline/2);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -871,7 +885,6 @@ div.problem {
|
||||
// +Problem - CodeMirror
|
||||
// ====================
|
||||
div.problem {
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid black;
|
||||
font-size: 14px;
|
||||
@@ -879,9 +892,9 @@ div.problem {
|
||||
resize: none;
|
||||
|
||||
.cm-tab {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -899,6 +912,7 @@ div.problem {
|
||||
|
||||
&.CodeMirror-cursor {
|
||||
@extend %ui-depth1;
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
@@ -944,6 +958,7 @@ div.problem .action {
|
||||
|
||||
.problem-action-button-wrapper {
|
||||
@include border-right(1px solid $light-gray1);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
&:last-child {
|
||||
@@ -953,6 +968,7 @@ div.problem .action {
|
||||
|
||||
.problem-action-btn {
|
||||
@include margin-right($baseline / 5);
|
||||
|
||||
max-width: 110px;
|
||||
|
||||
.icon {
|
||||
@@ -974,15 +990,18 @@ div.problem .action {
|
||||
max-width: 100%;
|
||||
padding-bottom: $baseline;
|
||||
}
|
||||
|
||||
.submit {
|
||||
@include margin-right($baseline / 2);
|
||||
@include float(left);
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.submission-feedback {
|
||||
@include margin-right($baseline / 2);
|
||||
|
||||
margin-top: $baseline / 2;
|
||||
display: inline-block;
|
||||
color: $gray-d1;
|
||||
@@ -1034,6 +1053,7 @@ div.problem {
|
||||
|
||||
&:first-child {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1043,12 +1063,12 @@ div.problem {
|
||||
.detailed-targeted-feedback-partially-correct,
|
||||
.detailed-targeted-feedback-correct {
|
||||
> p {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
|
||||
&:first-child {
|
||||
@extend %t-strong;
|
||||
}
|
||||
&:first-child {
|
||||
@extend %t-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1063,6 +1083,7 @@ div.problem {
|
||||
|
||||
.notification {
|
||||
@include float(left);
|
||||
|
||||
margin-top: $baseline / 2;
|
||||
padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2);
|
||||
line-height: $base-line-height;
|
||||
@@ -1089,6 +1110,7 @@ div.problem {
|
||||
|
||||
.icon {
|
||||
@include margin-right(3 * $baseline / 4);
|
||||
|
||||
color: $uxpl-gray-dark;
|
||||
}
|
||||
|
||||
@@ -1103,6 +1125,7 @@ div.problem {
|
||||
|
||||
.icon {
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
top: $baseline / 5;
|
||||
}
|
||||
@@ -1133,6 +1156,7 @@ div.problem {
|
||||
|
||||
.notification-btn {
|
||||
@include float(right);
|
||||
|
||||
padding: ($baseline / 10) ($baseline / 4);
|
||||
min-width: ($baseline * 3);
|
||||
display: block;
|
||||
@@ -1183,7 +1207,7 @@ div.problem {
|
||||
}
|
||||
|
||||
.capa_reset>h2 {
|
||||
color: #aa0000;
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
.capa_reset li {
|
||||
@@ -1195,6 +1219,7 @@ div.problem {
|
||||
|
||||
h3 {
|
||||
@extend %t-strong;
|
||||
|
||||
padding: 9px;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
background: #eee;
|
||||
@@ -1236,6 +1261,7 @@ div.problem {
|
||||
|
||||
h3 {
|
||||
@extend %t-strong;
|
||||
|
||||
color: #aaa;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
@@ -1263,6 +1289,7 @@ div.problem {
|
||||
a.full {
|
||||
@include position(absolute, 0 0 1px 0);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: block;
|
||||
padding: ($baseline/5);
|
||||
background: $gray-l4;
|
||||
@@ -1355,7 +1382,7 @@ div.problem {
|
||||
background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat;
|
||||
|
||||
.result-actual-output {
|
||||
color: #B00;
|
||||
color: #b00;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1366,7 +1393,7 @@ div.problem {
|
||||
border-left: 20px solid #fafafa;
|
||||
|
||||
bs {
|
||||
color: #bb0000;
|
||||
color: #b00;
|
||||
}
|
||||
|
||||
bg {
|
||||
@@ -1446,6 +1473,7 @@ div.problem {
|
||||
|
||||
.annotation-header {
|
||||
@extend %t-strong;
|
||||
|
||||
padding: .5em 1em;
|
||||
border-bottom: 1px solid $gray-l3;
|
||||
}
|
||||
@@ -1487,6 +1515,7 @@ div.problem {
|
||||
|
||||
.tag {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
display: inline-block;
|
||||
margin-left: ($baseline*2);
|
||||
border: 1px solid rgb(102,102,102);
|
||||
@@ -1495,6 +1524,7 @@ div.problem {
|
||||
background-color: $annotation-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-status {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -1507,6 +1537,7 @@ div.problem {
|
||||
$num-lines-to-show: 5;
|
||||
$line-height: 1.4em;
|
||||
$padding: .2em;
|
||||
|
||||
padding: $padding (2 * $padding);
|
||||
width: 100%;
|
||||
height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);
|
||||
@@ -1529,6 +1560,7 @@ div.problem {
|
||||
|
||||
&:before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
content: "debug input value";
|
||||
text-transform: uppercase;
|
||||
@@ -1575,6 +1607,7 @@ div.problem {
|
||||
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
|
||||
&:after {
|
||||
@include margin-left($baseline*.75);
|
||||
|
||||
content: url('#{$static-path}/images/correct-icon.png');
|
||||
}
|
||||
}
|
||||
@@ -1590,7 +1623,6 @@ div.problem {
|
||||
|
||||
// NOTE: temporary override until image inputs use same base html structure as other common capa input types.
|
||||
div.problem .imageinput.capa_inputtype {
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -1621,7 +1653,6 @@ div.problem .imageinput.capa_inputtype {
|
||||
|
||||
// NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types.
|
||||
div.problem .annotation-input {
|
||||
|
||||
.tag-status {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,13 +9,16 @@
|
||||
.editor-bar {
|
||||
@include clearfix();
|
||||
@include linear-gradient(top, #d4dee8, #c9d5e2);
|
||||
|
||||
position: relative;
|
||||
padding: ($baseline/4);
|
||||
border-bottom-color: #a5aaaf;
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
|
||||
@include float(left);
|
||||
|
||||
padding: 3px ($baseline/2) 5px;
|
||||
margin-left: 7px;
|
||||
border: 0;
|
||||
@@ -23,7 +26,7 @@
|
||||
background: transparent;
|
||||
|
||||
.icon {
|
||||
height: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -36,6 +39,7 @@
|
||||
.editor-tabs {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
@include right(10px);
|
||||
@include text-align(left);
|
||||
@include direction();
|
||||
@@ -55,7 +59,9 @@
|
||||
padding: 7px 20px 3px;
|
||||
border: 1px solid #a5aaaf;
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
@include linear-gradient(top, $transparent 87%, rgba(0, 0, 0, .06));
|
||||
|
||||
background-color: #e5ecf3;
|
||||
font-size: 13px;
|
||||
color: #3c3c3c;
|
||||
|
||||
@@ -4,11 +4,12 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $baseFontColor;
|
||||
font: normal 2em/1.4em $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
@include margin(0, 0, 1.416em, 0);
|
||||
}
|
||||
color: $baseFontColor;
|
||||
font: normal 2em/1.4em $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include margin(0, 0, 1.416em, 0);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #646464;
|
||||
@@ -20,6 +21,7 @@ h2 {
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@include margin(0, 0, ($baseline/2), 0);
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -73,6 +75,7 @@ blockquote {
|
||||
ol, ul {
|
||||
// Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
|
||||
@include bi-app-compact(padding, 0, 0, 0, 1em);
|
||||
|
||||
margin: 1em 0;
|
||||
color: $baseFontColor;
|
||||
|
||||
@@ -152,9 +155,9 @@ th {
|
||||
|
||||
// modal - image zoom, fill window
|
||||
.wrapper-modal-image {
|
||||
|
||||
.modal-ui-icon {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
padding: ($baseline/4) 7px;
|
||||
@@ -175,6 +178,7 @@ th {
|
||||
|
||||
.image-link {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@@ -192,6 +196,7 @@ th {
|
||||
.image-modal {
|
||||
@extend %ui-fake-link;
|
||||
@extend %ui-depth5;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -247,9 +252,11 @@ th {
|
||||
&.action-zoom-in {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
&.action-zoom-out {
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
@@ -275,11 +282,11 @@ th {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.image-is-zoomed {
|
||||
display: block;
|
||||
|
||||
.image-content .image-wrapper {
|
||||
|
||||
img {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
.CodeMirror {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
height: 435px;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,46 +12,48 @@ div.problem-progress {
|
||||
|
||||
|
||||
div.lti {
|
||||
// align center
|
||||
margin: 0 auto;
|
||||
// align center
|
||||
margin: 0 auto;
|
||||
|
||||
.wrapper-lti-link {
|
||||
@include font-size(14);
|
||||
background-color: $sidebar-color;
|
||||
padding: $baseline;
|
||||
.wrapper-lti-link {
|
||||
@include font-size(14);
|
||||
|
||||
.lti-link {
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
background-color: $sidebar-color;
|
||||
padding: $baseline;
|
||||
|
||||
.link_lti_new_window {
|
||||
@extend .gray-button;
|
||||
@include font-size(13);
|
||||
@include line-height(14);
|
||||
}
|
||||
}
|
||||
.lti-link {
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
|
||||
.link_lti_new_window {
|
||||
@extend .gray-button;
|
||||
|
||||
@include font-size(13);
|
||||
@include line-height(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.ltiLaunchForm {
|
||||
display: none;
|
||||
}
|
||||
form.ltiLaunchForm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
iframe.ltiLaunchFrame {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
display: block;
|
||||
border: 0px;
|
||||
}
|
||||
iframe.ltiLaunchFrame {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
display: block;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
h4.problem-feedback-label {
|
||||
font-weight: 100;
|
||||
font-size: em(16);
|
||||
font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
|
||||
}
|
||||
h4.problem-feedback-label {
|
||||
font-weight: 100;
|
||||
font-size: em(16);
|
||||
font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
|
||||
}
|
||||
|
||||
div.problem-feedback {
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/4);
|
||||
div.problem-feedback {
|
||||
margin-top: ($baseline/4);
|
||||
margin-bottom: ($baseline/4);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ div.poll_question {
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -42,7 +42,7 @@ div.poll_question {
|
||||
margin-bottom: $baseline;
|
||||
|
||||
&.short {
|
||||
clear: both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.question {
|
||||
@@ -59,6 +59,7 @@ div.poll_question {
|
||||
|
||||
.button {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-background-clip: padding-box;
|
||||
-webkit-border-image: none;
|
||||
@@ -94,13 +95,11 @@ div.poll_question {
|
||||
/* display: inline-block; */
|
||||
display: inline;
|
||||
float: left;
|
||||
|
||||
font-family: 'Open Sans', Verdana, Geneva, sans-serif;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: bold;
|
||||
|
||||
letter-spacing: normal;
|
||||
line-height: 25.59375px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
@@ -113,13 +112,12 @@ div.poll_question {
|
||||
text-transform: none;
|
||||
vertical-align: top;
|
||||
white-space: pre-line;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
word-spacing: 0px;
|
||||
writing-mode: lr-tb;
|
||||
}
|
||||
|
||||
.button.answered {
|
||||
-webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
|
||||
background-color: rgb(29, 157, 217);
|
||||
@@ -136,6 +134,7 @@ div.poll_question {
|
||||
|
||||
.text {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 80%;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
.editor-bar {
|
||||
|
||||
.editor-tabs {
|
||||
|
||||
.advanced-toggle {
|
||||
height: auto;
|
||||
margin-top: -4px;
|
||||
@@ -47,9 +45,12 @@
|
||||
left: 100%;
|
||||
width: 0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
@include linear-gradient(left, $shadow-l1, $transparent 4px);
|
||||
|
||||
background-color: $white;
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(width .3s linear 0s);
|
||||
|
||||
&.shown {
|
||||
@@ -70,6 +71,7 @@
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
|
||||
padding-bottom: 5px !important;
|
||||
margin-bottom: 10px !important;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
@@ -88,7 +90,7 @@
|
||||
margin-right: 30px;
|
||||
|
||||
.icon {
|
||||
height: ($baseline * 1.5);
|
||||
height: ($baseline * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,8 +107,8 @@
|
||||
}
|
||||
|
||||
.problem-editor {
|
||||
// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
|
||||
.markdown-box+.CodeMirror {
|
||||
// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
|
||||
.markdown-box+.CodeMirror {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ $seq-nav-height: 44px;
|
||||
// repeated extends - needed since LMS styling was referenced
|
||||
.block-link {
|
||||
@include border-left(1px solid $seq-nav-border-color);
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -18,6 +19,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
.topbar {
|
||||
@include clearfix();
|
||||
|
||||
border-bottom: 1px solid $seq-nav-border-color;
|
||||
|
||||
@media print {
|
||||
@@ -27,6 +29,7 @@ $seq-nav-height: 44px;
|
||||
a {
|
||||
&.block-link {
|
||||
@include border-left(1px solid $seq-nav-border-color);
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -43,7 +46,6 @@ $seq-nav-height: 44px;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
background-clip: border-box;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
@@ -57,6 +59,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
.sequence-nav {
|
||||
@extend .topbar;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
@@ -74,6 +77,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
.sequence-list-wrapper {
|
||||
@extend %ui-depth2;
|
||||
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
@@ -151,7 +155,9 @@ $seq-nav-height: 44px;
|
||||
|
||||
.sequence-tooltip {
|
||||
@include text-align(left);
|
||||
|
||||
@extend %ui-depth2;
|
||||
|
||||
margin-top: ($baseline/5);
|
||||
background: $seq-nav-tooltip-color;
|
||||
color: $white;
|
||||
@@ -176,6 +182,7 @@ $seq-nav-height: 44px;
|
||||
&::after {
|
||||
@include transform(rotate(45deg));
|
||||
@include right(18px);
|
||||
|
||||
background: $seq-nav-tooltip-color;
|
||||
content: " ";
|
||||
display: block;
|
||||
@@ -197,6 +204,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
.sequence-nav-button {
|
||||
@extend %ui-depth3;
|
||||
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
|
||||
.CodeMirror {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 379px;
|
||||
|
||||
@@ -18,11 +18,13 @@
|
||||
|
||||
.editor-with-tabs {
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
.edit-header {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
padding: 18px $baseline;
|
||||
top: 0 !important; // ugly override for second level tab override
|
||||
right: 0;
|
||||
@@ -62,17 +64,19 @@
|
||||
margin-left: 8px;
|
||||
|
||||
a.tab {
|
||||
@include font-size(14);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
padding: ($baseline/4) ($baseline);
|
||||
background-color: $blue;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
@include font-size(14);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
padding: ($baseline/4) ($baseline);
|
||||
background-color: $blue;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
|
||||
&.current {
|
||||
@include linear-gradient($blue, $blue);
|
||||
|
||||
color: $blue-d1;
|
||||
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
||||
background-color: $blue-d4;
|
||||
@@ -81,7 +85,7 @@
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow;
|
||||
background-image: linear-gradient(#009FE6, #009FE6) !important;
|
||||
background-image: linear-gradient(#009fe6, #009fe6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
|
||||
.a11y-menu-list {
|
||||
@extend %ui-depth3;
|
||||
|
||||
top: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -34,6 +35,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
|
||||
li {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
@@ -92,6 +94,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
> a {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include font-size(12);
|
||||
|
||||
display: block;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background-color: $very-light-text;
|
||||
@@ -105,6 +108,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
|
||||
&:after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
content: "\f0d7";
|
||||
position: absolute;
|
||||
right: ($baseline*0.5);
|
||||
@@ -135,6 +139,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
|
||||
.contextmenu, .submenu {
|
||||
@extend %ui-depth5;
|
||||
|
||||
border: 1px solid #333;
|
||||
background: $white;
|
||||
color: #333;
|
||||
@@ -149,7 +154,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
white-space: nowrap;
|
||||
|
||||
&.is-opened {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item, .submenu-item {
|
||||
@@ -158,8 +163,8 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
outline: none;
|
||||
|
||||
& > span {
|
||||
color: #333;
|
||||
}
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
@@ -217,6 +222,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
|
||||
.overlay {
|
||||
@extend %ui-depth4;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -17,7 +17,7 @@ $secondary-light: rgb(219, 139, 175); // UXPL secondary light
|
||||
$cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
& {
|
||||
margin-bottom: ($baseline*1.5);
|
||||
margin-bottom: ($baseline*1.5);
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
@@ -26,6 +26,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video {
|
||||
@include clearfix();
|
||||
|
||||
background: rgb(245, 245, 245); // UXPL grayscale x-back
|
||||
display: block;
|
||||
margin: 0 -12px;
|
||||
@@ -40,9 +41,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.is-initialized {
|
||||
|
||||
.video-wrapper {
|
||||
|
||||
.spinner {
|
||||
display: none;
|
||||
}
|
||||
@@ -51,7 +50,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
// CASE: video pre-roll state
|
||||
&.is-pre-roll {
|
||||
|
||||
.slider {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -70,6 +68,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.tc-wrapper {
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -80,71 +79,72 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.downloads-heading {
|
||||
margin: 1em 0 0 0;
|
||||
.downloads-heading {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
.wrapper-downloads {
|
||||
display: flex;
|
||||
|
||||
.hd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wrapper-downloads {
|
||||
display: flex;
|
||||
.wrapper-download-video,
|
||||
.wrapper-download-transcripts,
|
||||
.wrapper-handouts,
|
||||
.branding {
|
||||
flex: 1;
|
||||
margin-top: $baseline;
|
||||
|
||||
.hd {
|
||||
margin: 0;
|
||||
}
|
||||
@include padding-right($baseline);
|
||||
|
||||
.wrapper-download-video,
|
||||
.wrapper-download-transcripts,
|
||||
.wrapper-handouts,
|
||||
.branding {
|
||||
flex: 1;
|
||||
margin-top: $baseline;
|
||||
@include padding-right($baseline);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper-download-video {
|
||||
|
||||
.video-sources {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-download-transcripts {
|
||||
|
||||
.list-download-transcripts {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.transcript-option {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.branding {
|
||||
@include padding-right(0);
|
||||
|
||||
.host-tag {
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
max-height: ($baseline*2);
|
||||
padding: ($baseline/4) 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wrapper-download-video {
|
||||
.video-sources {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-download-transcripts {
|
||||
.list-download-transcripts {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.transcript-option {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.branding {
|
||||
@include padding-right(0);
|
||||
|
||||
.host-tag {
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
max-height: ($baseline*2);
|
||||
padding: ($baseline/4) 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter(9));
|
||||
|
||||
width: flex-grid(6, 9);
|
||||
background-color: black;
|
||||
position: relative;
|
||||
@@ -161,12 +161,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-player-pre,
|
||||
.video-player-post {
|
||||
height: 50px;
|
||||
background-color: rgb(17, 16, 16) // UXPL grayscale black;
|
||||
height: 50px;
|
||||
background-color: rgb(17, 16, 16) // UXPL grayscale black;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
@include transform(translate(-50%, -50%));
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
@@ -177,6 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&:after{
|
||||
@include animation(rotateCW 3s infinite linear);
|
||||
|
||||
content: '';
|
||||
display: block;
|
||||
width: 30px;
|
||||
@@ -190,6 +192,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.btn-play {
|
||||
@include transform(translate(-50%, -50%));
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 46%;
|
||||
@@ -214,6 +217,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.closed-captions {
|
||||
@include left(5%);
|
||||
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
@@ -228,27 +232,29 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
background: rgba(0, 0, 0, .75);
|
||||
color: $yellow;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
|
||||
@include left($baseline);
|
||||
|
||||
margin-top: -.6em;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f142";
|
||||
color: $white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-dragging {
|
||||
background: rgba(0, 0, 0, 1.0);
|
||||
cursor: move;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
@include left($baseline);
|
||||
margin-top: -.6em;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f142";
|
||||
color: $white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-dragging {
|
||||
background: rgba(0, 0, 0, 1.0);
|
||||
cursor: move;
|
||||
|
||||
&:before {
|
||||
opacity: 1.0;
|
||||
}
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
@@ -273,6 +279,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
iframe,
|
||||
video {
|
||||
@include left(0);
|
||||
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
@@ -290,6 +297,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-controls {
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
border: 0;
|
||||
background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
|
||||
@@ -297,7 +305,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
ul,
|
||||
div {
|
||||
opacity: 1;
|
||||
@@ -307,6 +314,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
%video-control {
|
||||
@extend %t-strong;
|
||||
@extend %t-title7;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
@@ -348,6 +356,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
@include clearfix();
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(height .7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
@@ -375,8 +384,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.ui-slider-handle {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(all .7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
top: -1px;
|
||||
height: ($baseline / 4);
|
||||
@@ -398,17 +409,20 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.vcr {
|
||||
@include float(left);
|
||||
|
||||
list-style: none;
|
||||
|
||||
@include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark
|
||||
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
@include margin-right(lh(0.5));
|
||||
|
||||
font-size: em(14);
|
||||
}
|
||||
|
||||
.video_control {
|
||||
|
||||
&:focus {
|
||||
position: relative;
|
||||
}
|
||||
@@ -421,12 +435,14 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.vidtime {
|
||||
@extend %t-strong;
|
||||
@extend %t-title7;
|
||||
|
||||
@include padding-left(lh(.75));
|
||||
|
||||
display: inline-block;
|
||||
color: rgb(207, 216, 220); // UXPL grayscale-cool light
|
||||
-webkit-font-smoothing: antialiased;;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
@media (max-width: 1120px) {
|
||||
@include padding-left(lh(0.5));
|
||||
}
|
||||
}
|
||||
@@ -448,7 +464,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.add-fullscreen,
|
||||
.quality-control,
|
||||
.toggle-transcript {
|
||||
|
||||
&:focus {
|
||||
position: relative;
|
||||
}
|
||||
@@ -459,11 +474,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.menu {
|
||||
@include transition(none);
|
||||
|
||||
@extend %ui-depth1;
|
||||
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: ($baseline * 2);
|
||||
|
||||
@include right(0); // right-align menus since this whole collection is on the right
|
||||
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
@@ -474,11 +493,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
li {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
|
||||
|
||||
.speed-option,
|
||||
.control-lang {
|
||||
@include text-align(left);
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
@@ -500,10 +521,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
.speed-option,
|
||||
.control-lang {
|
||||
@include border-left($baseline/10 solid rgb(14, 166, 236));
|
||||
|
||||
font-weight: $font-bold;
|
||||
color: rgb(14, 166, 236); // UXPL primary accent
|
||||
}
|
||||
@@ -512,7 +533,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
|
||||
.menu {
|
||||
display: block;
|
||||
}
|
||||
@@ -526,13 +546,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
.speeds {
|
||||
|
||||
&.is-opened {
|
||||
|
||||
.control {
|
||||
|
||||
.icon {
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
@@ -545,9 +561,9 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
.speed-button {
|
||||
|
||||
.label {
|
||||
@include padding(0 ($baseline/3) 0 0);
|
||||
|
||||
font-family: $body-font-family;
|
||||
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
|
||||
|
||||
@@ -558,6 +574,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.value {
|
||||
@include padding(0, lh(0.5), 0, 0);
|
||||
|
||||
color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
|
||||
font-weight: bold;
|
||||
|
||||
@@ -569,16 +586,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
.lang {
|
||||
|
||||
.language-menu {
|
||||
width: $baseline;
|
||||
padding: ($baseline / 2) 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
|
||||
.icon {
|
||||
|
||||
@include rtl {
|
||||
@include transform(rotate(-180deg));
|
||||
}
|
||||
@@ -586,11 +600,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
|
||||
.control {
|
||||
|
||||
.icon {
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
@@ -608,7 +619,6 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
position: relative;
|
||||
|
||||
&.is-opened {
|
||||
|
||||
.volume-slider-container {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
@@ -621,11 +631,15 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.volume-slider-container {
|
||||
@include transition(none);
|
||||
|
||||
@extend %ui-depth1;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: ($baseline * 2);
|
||||
|
||||
@include right(0);
|
||||
|
||||
width: 41px;
|
||||
height: 120px;
|
||||
background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
|
||||
@@ -640,8 +654,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.ui-slider-handle {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
@include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
|
||||
@include left(-5px);
|
||||
|
||||
box-sizing: border-box;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
@@ -682,14 +698,12 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
.toggle-transcript {
|
||||
|
||||
&.is-active {
|
||||
color: rgb(14, 166, 236); // UXPL primary accent
|
||||
}
|
||||
&.is-active {
|
||||
color: rgb(14, 166, 236); // UXPL primary accent
|
||||
}
|
||||
}
|
||||
|
||||
.lang {
|
||||
|
||||
& > .hide-subtitles {
|
||||
@include transition(none);
|
||||
}
|
||||
@@ -698,9 +712,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.video-controls {
|
||||
|
||||
.slider {
|
||||
height: ($baseline / 1.5);
|
||||
|
||||
@@ -714,18 +726,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.video-fullscreen {
|
||||
.closed-captions {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.closed-captions {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
&.closed .closed-captions {
|
||||
width: 90%;
|
||||
}
|
||||
&.closed .closed-captions {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitles {
|
||||
@include float(left);
|
||||
|
||||
overflow: auto;
|
||||
max-height: 460px;
|
||||
width: flex-grid(3, 9);
|
||||
@@ -734,7 +746,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
visibility: visible;
|
||||
|
||||
a {
|
||||
color: #0074b5;
|
||||
color: #0074b5;
|
||||
}
|
||||
|
||||
.subtitles-menu {
|
||||
@@ -745,6 +757,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
li {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
margin-bottom: 8px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@@ -775,19 +788,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
&.spacing:last-of-type {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
.transcript-end {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.transcript-end {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.closed {
|
||||
|
||||
.video-wrapper {
|
||||
width: flex-grid(9,9);
|
||||
background-color: inherit;
|
||||
@@ -803,7 +815,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-wrapper .video-player-pre,
|
||||
.video-wrapper .video-player-post {
|
||||
height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.video-wrapper .video-player {
|
||||
@@ -813,25 +825,27 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
|
||||
.subtitles {
|
||||
@extend .is-hidden;
|
||||
@extend .is-hidden;
|
||||
}
|
||||
|
||||
.subtitles.html5 {
|
||||
@extend %ui-depth0;
|
||||
background-color: rgba(243, 243, 243, 0.8);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 275px;
|
||||
padding: 0 $baseline;
|
||||
display: none;
|
||||
@extend %ui-depth0;
|
||||
|
||||
background-color: rgba(243, 243, 243, 0.8);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 275px;
|
||||
padding: 0 $baseline;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.video-fullscreen {
|
||||
@extend %ui-depth4;
|
||||
|
||||
background: rgba(#000, .95);
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
@@ -855,11 +869,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-wrapper .video-player-pre,
|
||||
.video-wrapper .video-player-post {
|
||||
height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: static;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.video-wrapper .video-player {
|
||||
@@ -870,15 +884,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.tc-wrapper {
|
||||
@include clearfix();
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: static;
|
||||
|
||||
.video-wrapper {
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
|
||||
@include margin-right(0);
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
object,
|
||||
@@ -892,6 +908,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-controls {
|
||||
@extend %ui-depth4;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -903,8 +920,10 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
padding: lh();
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include transition(none);
|
||||
|
||||
background: $black;
|
||||
visibility: visible;
|
||||
|
||||
@@ -933,6 +952,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
.video-pre-roll {
|
||||
@extend %ui-depth3;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
.input-cloud {
|
||||
margin: ($baseline/4);
|
||||
margin: ($baseline/4);
|
||||
}
|
||||
|
||||
.result_cloud_section {
|
||||
display: none;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: none;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.result_cloud_section.active {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 1em;
|
||||
|
||||
h3 {
|
||||
font-size: 100%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.your_words{
|
||||
font-size: 0.85em;
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -26,50 +26,57 @@
|
||||
// inherited - dividers
|
||||
.faded-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-hr-divider-medium {
|
||||
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
|
||||
rgba(240,240,240, 1) 50%,
|
||||
rgba(240,240,240, 0)));
|
||||
rgba(240,240,240, 1) 50%,
|
||||
rgba(240,240,240, 0)));
|
||||
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-hr-divider-light {
|
||||
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
|
||||
rgba(255,255,255, 0.8) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
rgba(255,255,255, 0.8) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faded-vertical-divider {
|
||||
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
rgba(200,200,200, 1) 50%,
|
||||
rgba(200,200,200, 0)));
|
||||
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.faded-vertical-divider-light {
|
||||
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
|
||||
rgba(255,255,255, 0.6) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
rgba(255,255,255, 0.6) 50%,
|
||||
rgba(255,255,255, 0)));
|
||||
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
@extend .faded-vertical-divider;
|
||||
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -79,11 +86,14 @@
|
||||
|
||||
.horizontal-divider {
|
||||
border: none;
|
||||
|
||||
@extend .faded-hr-divider;
|
||||
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend .faded-hr-divider-light;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -93,13 +103,15 @@
|
||||
|
||||
.fade-right-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
|
||||
rgba(200,200,200, 1)));
|
||||
rgba(200,200,200, 1)));
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fade-left-hr-divider {
|
||||
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
|
||||
rgba(200,200,200, 0)));
|
||||
rgba(200,200,200, 0)));
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -108,6 +120,7 @@
|
||||
// inherited - ui
|
||||
.window {
|
||||
@include clearfix();
|
||||
|
||||
box-shadow: 0 1px 1px $shadow-l1;
|
||||
border-radius: 3px;
|
||||
margin-bottom: $baseline;
|
||||
@@ -120,8 +133,10 @@
|
||||
// mixins - grandfathered
|
||||
@mixin button {
|
||||
@include transition(background-color 0.15s, box-shadow 0.15s);
|
||||
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4);
|
||||
@@ -133,6 +148,7 @@
|
||||
color: $gray-d1 !important;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
}
|
||||
@@ -146,6 +162,7 @@
|
||||
@mixin green-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $uxpl-green-base;
|
||||
border-radius: 3px;
|
||||
@@ -168,6 +185,7 @@
|
||||
@mixin blue-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $uxpl-blue-base;
|
||||
border-radius: 3px;
|
||||
background-color: $uxpl-blue-base;
|
||||
@@ -189,6 +207,7 @@
|
||||
@mixin red-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $red-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $red;
|
||||
@@ -210,6 +229,7 @@
|
||||
@mixin pink-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $pink-d1;
|
||||
border-radius: 3px;
|
||||
background-color: $pink;
|
||||
@@ -231,6 +251,7 @@
|
||||
@mixin orange-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $orange-d1;
|
||||
border-radius: 3px;
|
||||
@@ -253,6 +274,7 @@
|
||||
@mixin white-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $mediumGrey;
|
||||
border-radius: 3px;
|
||||
@@ -269,6 +291,7 @@
|
||||
@mixin grey-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
|
||||
border: 1px solid $gray-d2;
|
||||
border-radius: 3px;
|
||||
@@ -284,6 +307,7 @@
|
||||
.gray-button {
|
||||
@include button;
|
||||
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
|
||||
|
||||
box-shadow: 0 1px 0 $white-t1 inset;
|
||||
border: 1px solid $gray-d1;
|
||||
border-radius: 3px;
|
||||
@@ -319,6 +343,7 @@
|
||||
|
||||
h5 {
|
||||
@extend %t-strong;
|
||||
|
||||
margin-bottom: 8px;
|
||||
color: $white;
|
||||
}
|
||||
@@ -331,11 +356,13 @@
|
||||
|
||||
.save-button {
|
||||
@include blue-button;
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
@include white-button;
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -345,6 +372,7 @@
|
||||
// sunsetted mixins
|
||||
@mixin active {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
|
||||
|
||||
box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
|
||||
@@ -98,11 +98,13 @@
|
||||
@include keyframes(bounceIn) {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
|
||||
@include transform(scale(0.3));
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1.0;
|
||||
|
||||
@include transform(scale(1.05));
|
||||
}
|
||||
|
||||
@@ -119,11 +121,13 @@
|
||||
|
||||
50% {
|
||||
opacity: 1.0;
|
||||
|
||||
@include transform(scale(1.05));
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.0;
|
||||
|
||||
@include transform(scale(0.3));
|
||||
}
|
||||
}
|
||||
@@ -144,11 +148,11 @@
|
||||
|
||||
// flash - double
|
||||
@include keyframes(flashDouble) {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
0%, 50%, 100% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
25%, 75% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,6 +61,7 @@ $spacing-horizontal: (
|
||||
}
|
||||
|
||||
@warn "Unknown `#{$key}` in $spacing-vertical.";
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
@@ -71,6 +72,7 @@ $spacing-horizontal: (
|
||||
}
|
||||
|
||||
@warn "Unknown `#{$key}` in $spacing-horizontal.";
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
@@ -104,6 +106,7 @@ $font-sizes: (
|
||||
}
|
||||
|
||||
@warn "Unknown `#{$key}` in $font-sizes.";
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
@@ -114,6 +117,7 @@ $font-sizes: (
|
||||
}
|
||||
|
||||
@warn "Unknown `#{$key}` in $font-weights.";
|
||||
|
||||
@return null;
|
||||
}
|
||||
|
||||
@@ -233,8 +237,10 @@ $btn-small-padding-horizontal: spacing-horizontal(small);
|
||||
|
||||
@mixin notification-by-type($color) {
|
||||
border-top: 3px solid $color;
|
||||
|
||||
.icon {
|
||||
@include margin-right(3 * $baseline/ 4);
|
||||
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
||||
|
||||
@if length($query) == 1 {
|
||||
$query: $default-feature nth($query, 1) $total-columns;
|
||||
}
|
||||
|
||||
@@ -31,11 +31,13 @@
|
||||
@function container-span($span: $span) {
|
||||
@if length($span) == 3 {
|
||||
$container-columns: nth($span, 3);
|
||||
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@else if length($span) == 2 {
|
||||
$container-columns: nth($span, 2);
|
||||
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@@ -49,11 +51,13 @@
|
||||
|
||||
@if length($shift) == 3 {
|
||||
$container-columns: nth($shift, 3);
|
||||
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@else if length($shift) == 2 {
|
||||
$container-columns: nth($shift, 2);
|
||||
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@@ -95,7 +99,9 @@
|
||||
|
||||
@if $layout == LTR or $layout == RTL {
|
||||
$direction: direction-from-layout($layout);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
$direction: direction-from-layout($default);
|
||||
}
|
||||
|
||||
@@ -107,7 +113,9 @@
|
||||
|
||||
@if $layout == LTR {
|
||||
$direction: right;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
$direction: left;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
@media screen and ($default-feature: nth($query, 1)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns !global;
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns !global;
|
||||
}
|
||||
@@ -20,6 +21,7 @@
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
|
||||
@while $i <= $loopTo {
|
||||
$mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
|
||||
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
|
||||
@if $direction != default {
|
||||
@warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@mixin outer-container {
|
||||
@include clearfix();
|
||||
|
||||
max-width: $max-width;
|
||||
margin: {
|
||||
left: auto;
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@mixin pad($padding: flex-gutter()) {
|
||||
$padding-list: null;
|
||||
|
||||
@each $value in $padding {
|
||||
$value: if($value == 'default', flex-gutter(), $value);
|
||||
$padding-list: join($padding-list, $value);
|
||||
}
|
||||
|
||||
padding: $padding-list;
|
||||
}
|
||||
|
||||
@@ -8,11 +8,13 @@ $layout-direction: nil !default;
|
||||
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
||||
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
|
||||
@return percentage($width / $container-width);
|
||||
}
|
||||
|
||||
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
||||
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
||||
|
||||
@return percentage($gutter / $container-width);
|
||||
}
|
||||
|
||||
@@ -23,7 +25,9 @@ $layout-direction: nil !default;
|
||||
@function get-parent-columns($columns) {
|
||||
@if $columns != $grid-columns {
|
||||
$parent-columns: $columns !global;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
$parent-columns: $grid-columns !global;
|
||||
}
|
||||
|
||||
@@ -35,7 +39,9 @@ $layout-direction: nil !default;
|
||||
|
||||
@if $container-is-display-table == true {
|
||||
$display-table: true;
|
||||
} @else if $display == table {
|
||||
}
|
||||
|
||||
@else if $display == table {
|
||||
$display-table: true;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
|
||||
@if $display == table {
|
||||
display: table;
|
||||
|
||||
@include fill-parent;
|
||||
|
||||
table-layout: fixed;
|
||||
$container-display-table: true !global;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,9 @@
|
||||
@if $display-table {
|
||||
display: table-cell;
|
||||
width: percentage($columns / $container-columns);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
float: #{$opposite-direction};
|
||||
|
||||
@if $display != no-display {
|
||||
@@ -31,7 +33,9 @@
|
||||
width: flex-grid($columns, $container-columns);
|
||||
}
|
||||
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
margin-#{$direction}: flex-gutter($container-columns);
|
||||
width: flex-grid($columns, $container-columns);
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
@media screen and ($default-feature: nth($query, 1)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
@@ -14,6 +15,7 @@
|
||||
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
@@ -23,6 +25,7 @@
|
||||
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: nth($query, 3);
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
@@ -32,6 +35,7 @@
|
||||
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
@@ -41,6 +45,7 @@
|
||||
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: nth($query, 5);
|
||||
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
@@ -53,5 +58,6 @@
|
||||
|
||||
@mixin nth-omega($nth, $display: block, $direction: default) {
|
||||
@warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
|
||||
|
||||
@include omega($nth $display, $direction);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,9 @@
|
||||
body:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
||||
@include grid-column-gradient(gradient-stops($grid-columns));
|
||||
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$visual-grid: false !default; // Display the base grid
|
||||
$visual-grid-color: #EEE !default;
|
||||
$visual-grid-color: #eee !default;
|
||||
$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
|
||||
$visual-grid-opacity: 0.4 !default;
|
||||
$visual-grid-breakpoints: () !default;
|
||||
|
||||
@@ -262,5 +262,5 @@ $sans-serif: $f-sans-serif;
|
||||
$body-line-height: golden-ratio(.875em, 1);
|
||||
|
||||
// carried over from LMS for xmodules
|
||||
$action-primary-active-bg: #1AA1DE; // $m-blue
|
||||
$action-primary-active-bg: #1aa1de; // $m-blue
|
||||
$very-light-text: $white;
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
// #BASE
|
||||
// ------------------------------
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
|
||||
@@ -21,41 +21,41 @@
|
||||
// #HEADINGS
|
||||
// ------------------------------
|
||||
%hd-subsection {
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
padding-bottom: 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);
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #DEPTH
|
||||
// ------------------------------
|
||||
%depth-base-focus {
|
||||
background: $white;
|
||||
padding: spacing-vertical(small) spacing-horizontal(base);
|
||||
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);
|
||||
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;
|
||||
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;
|
||||
@extend %depth-base-focus;
|
||||
}
|
||||
|
||||
.depth-well {
|
||||
@extend %depth-well;
|
||||
@extend %depth-well;
|
||||
}
|
||||
|
||||
.depth-card {
|
||||
@extend %depth-card;
|
||||
@extend %depth-card;
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -63,21 +63,21 @@
|
||||
// ------------------------------
|
||||
// circular cropped
|
||||
%img-cropped {
|
||||
|
||||
.src {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.src {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #HEADER APP
|
||||
// ------------------------------
|
||||
.wrapper-header {
|
||||
@extend %divider-2;
|
||||
border-bottom-color: palette(grayscale, x-back);
|
||||
background: $white;
|
||||
@extend %divider-2;
|
||||
|
||||
border-bottom-color: palette(grayscale, x-back);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.header-app {
|
||||
@@ -88,63 +88,62 @@
|
||||
// #BANNER
|
||||
// ------------------------------
|
||||
.banner {
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.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);
|
||||
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-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);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
color: $white;
|
||||
.icon {
|
||||
@include margin-right(spacing-horizontal(x-small));
|
||||
|
||||
font-size: font-size(large);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
// 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);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
@include text-align(center);
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -152,240 +151,251 @@
|
||||
// ------------------------------
|
||||
// base accomplishment
|
||||
.accomplishment {
|
||||
|
||||
.accomplishment-type-symbol .src {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.accomplishment-type-symbol .src {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// main accomplishment
|
||||
.accomplishment-main {
|
||||
background: palette(grayscale, x-back);
|
||||
background: palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
// brief accomplishment
|
||||
.accomplishment-brief {
|
||||
@extend %depth-card;
|
||||
@extend %depth-card;
|
||||
|
||||
.accomplishment-type-symbol, .accomplishment-details {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.accomplishment-type-symbol, .accomplishment-details {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@include size(20%);
|
||||
}
|
||||
.accomplishment-type-symbol {
|
||||
@include size(20%);
|
||||
}
|
||||
|
||||
.accomplishment-details {
|
||||
width: 70%;
|
||||
}
|
||||
.accomplishment-details {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
|
||||
.accomplishment-summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.accomplishment-summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #RENDERING
|
||||
// ------------------------------
|
||||
%rendering-accomplishment-line {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
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);
|
||||
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);
|
||||
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;
|
||||
@extend %depth-card;
|
||||
|
||||
// type
|
||||
.accomplishment-type {
|
||||
@include text-align(center);
|
||||
margin-top: -(spacing-vertical(large));
|
||||
margin-bottom: spacing-vertical(base);
|
||||
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 {
|
||||
@include 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;
|
||||
}
|
||||
|
||||
.accomplishment-type-label, .accomplishment-type-symbol {
|
||||
.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-type-label {
|
||||
@include 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;
|
||||
}
|
||||
.accomplishment-signatories-title {
|
||||
@extend %rendering-hd-section;
|
||||
}
|
||||
}
|
||||
|
||||
// metadata
|
||||
.accomplishment-metadata {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
.metadata {
|
||||
@extend %list-unstyled;
|
||||
.metadata {
|
||||
@extend %list-unstyled;
|
||||
|
||||
.label {
|
||||
@extend %copy-meta;
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
.label {
|
||||
@extend %copy-meta;
|
||||
|
||||
.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);
|
||||
}
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.recipient-img, .recipient-details {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.label-explanation {
|
||||
display: block;
|
||||
font-weight: font-weight(normal);
|
||||
margin-top: spacing-vertical(xx-small);
|
||||
}
|
||||
|
||||
.recipient-img {
|
||||
@extend %img-cropped;
|
||||
width: rem(100);
|
||||
@include margin-right(spacing-horizontal(small));
|
||||
.value {
|
||||
@extend %copy-base;
|
||||
|
||||
.src {
|
||||
max-height: 100%;
|
||||
border: rem(4) solid $white;
|
||||
}
|
||||
font-weight: font-weight(semi-bold);
|
||||
color: palette(grayscale, dark);
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-details {
|
||||
@extend %copy-base;
|
||||
font-weight: font-weight(semi-bold);
|
||||
max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
|
||||
}
|
||||
.recipient-img, .recipient-details {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.recipient-name {
|
||||
margin-bottom: spacing-vertical(xx-small);
|
||||
}
|
||||
.recipient-img {
|
||||
@extend %img-cropped;
|
||||
|
||||
.recipient-username {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
width: rem(100);
|
||||
|
||||
.accomplishment-id .value {
|
||||
word-wrap: break-word;
|
||||
@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);
|
||||
max-width: calc(100% - (#{rem(100)} + #{spacing-horizontal(small)} + 5px));
|
||||
}
|
||||
|
||||
.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);
|
||||
@extend %hd-subsection;
|
||||
|
||||
border-bottom-color: palette(grayscale, back);
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -396,7 +406,7 @@
|
||||
}
|
||||
|
||||
.accomplishment-related-title {
|
||||
@extend %hd-subsection;
|
||||
@extend %hd-subsection;
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -404,127 +414,127 @@
|
||||
// ------------------------------
|
||||
// certficate - default
|
||||
.certificate {
|
||||
.accomplishment-rendering {
|
||||
|
||||
.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);
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
margin-bottom: 0;
|
||||
.accomplishment-main {
|
||||
background: palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
.accomplishment-type {
|
||||
margin-top: 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;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.accomplishment-main {
|
||||
background: palette(primary, back);
|
||||
.deco-corner-tr {
|
||||
@include triangle(20px, $cert-distinguished-color, up-left);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
background: $white url('../images/bg-verified.png') center no-repeat;
|
||||
background-size: 65%;
|
||||
.deco-corner-bl {
|
||||
@include triangle(20px, $cert-distinguished-color, down-right);
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -538,82 +548,84 @@
|
||||
// #FOOTER
|
||||
// ------------------------------
|
||||
.footer-app {
|
||||
border-top: rem(4) solid palette(grayscale, x-back);
|
||||
padding-top: spacing-vertical(base);
|
||||
border-top: rem(4) solid palette(grayscale, x-back);
|
||||
padding-top: spacing-vertical(base);
|
||||
}
|
||||
|
||||
.footer-app-nav {
|
||||
|
||||
.list {
|
||||
@extend %list-unstyled;
|
||||
}
|
||||
.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: 0;
|
||||
top: spacing-vertical(large);
|
||||
right: 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;
|
||||
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);
|
||||
|
||||
.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));
|
||||
}
|
||||
.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%;
|
||||
display: block;
|
||||
border: none;
|
||||
background-color: palette(grayscale, back);
|
||||
height: rem(2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -16,14 +16,13 @@ $cert-decorative-color-emphasized: palette(grayscale, accent);
|
||||
|
||||
// typography: config
|
||||
@include font-face(
|
||||
'Domine',
|
||||
'Domine',
|
||||
'../../certificates/fonts/Domine/Domine-Regular-webfont',
|
||||
400,
|
||||
$file-formats: woff woff2 ttf
|
||||
);
|
||||
|
||||
@include font-face(
|
||||
'Domine',
|
||||
'Domine',
|
||||
'../../certificates/fonts/Domine/Domine-Bold-webfont',
|
||||
700,
|
||||
$file-formats: woff woff2 ttf
|
||||
|
||||
@@ -10,352 +10,365 @@
|
||||
// #BASE
|
||||
// ------------------------------
|
||||
%layout-wrapper {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
padding: 0 5%;
|
||||
margin-bottom: spacing-vertical(base);
|
||||
padding: 0 5%;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
padding: 0 2.5%;
|
||||
}
|
||||
@media(min-width: $bp-screen-md) {
|
||||
padding: 0 2.5%;
|
||||
}
|
||||
}
|
||||
|
||||
%layout {
|
||||
@include grid-container();
|
||||
@include grid-container();
|
||||
}
|
||||
|
||||
// app header
|
||||
.wrapper-header {
|
||||
@extend %layout-wrapper;
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
@extend %layout-wrapper;
|
||||
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.header-app {
|
||||
@extend %layout;
|
||||
@extend %layout;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
@include size(rem(100) auto);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.logo {
|
||||
display: block;
|
||||
|
||||
.logo-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
@include size(rem(100) auto);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-app-title {
|
||||
@include text-align(center);
|
||||
@include span(12);
|
||||
margin: 0;
|
||||
@include text-align(center);
|
||||
@include span(12);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// banner
|
||||
.wrapper-banner {
|
||||
@extend %layout-wrapper;
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.banner {
|
||||
@extend %layout;
|
||||
}
|
||||
padding-top: spacing-vertical(small);
|
||||
padding-bottom: spacing-vertical(small);
|
||||
|
||||
.banner {
|
||||
@extend %layout;
|
||||
}
|
||||
}
|
||||
|
||||
// message to user-centric banner
|
||||
.wrapper-banner-user {
|
||||
margin-top: -(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 text-align(center);
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include text-align(left);
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
.wrapper-copy-and-actions {
|
||||
@include grid-container();
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.wrapper-copy-and-actions {
|
||||
@include grid-container();
|
||||
.message-actions {
|
||||
@include span(12);
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
.action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto spacing-vertical(small) auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
@include span(12);
|
||||
// CASE: icon display only
|
||||
&.icon-only {
|
||||
@media(min-width: $bp-screen-md) {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(base);
|
||||
|
||||
.action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto spacing-vertical(small) auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// CASE: icon display only
|
||||
&.icon-only {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(base);
|
||||
|
||||
.icon {
|
||||
@include margin-right(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 130px;
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
margin-right: spacing-horizontal(mid-small);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
@include margin-right(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 130px;
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
margin-right: spacing-horizontal(mid-small);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// app footer
|
||||
.wrapper-footer {
|
||||
@extend %layout-wrapper;
|
||||
@extend %layout-wrapper;
|
||||
}
|
||||
|
||||
.footer-app {
|
||||
@extend %layout;
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.footer-app-copyright {
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, after);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, after);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-app-nav {
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, before);
|
||||
}
|
||||
|
||||
.list {
|
||||
.nav-item {
|
||||
display: block;
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-legal {
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6, before);
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-legal {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include text-align(right);
|
||||
}
|
||||
@include text-align(right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
// #ACCOMPLISHMENT
|
||||
// ------------------------------
|
||||
.layout-accomplishment {
|
||||
.wrapper-introduction {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.wrapper-introduction {
|
||||
@extend %layout-wrapper;
|
||||
margin-bottom: spacing-vertical(large);
|
||||
margin-bottom: spacing-vertical(large);
|
||||
|
||||
.introduction {
|
||||
@extend %layout;
|
||||
}
|
||||
.introduction {
|
||||
@extend %layout;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-rendering {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
margin-bottom: spacing-vertical(small);
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
@extend %layout;
|
||||
|
||||
position: relative;
|
||||
top: -(spacing-vertical(base));
|
||||
|
||||
.accomplishment-course,
|
||||
.accomplishment-recipient,
|
||||
.accomplishment-type {
|
||||
@include span(12);
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-rendering {
|
||||
@extend %layout-wrapper;
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
@include span(12);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
height: rem(100);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(2);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
|
||||
.organization {
|
||||
@include size(100%);
|
||||
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
max-width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
@include left(50%);
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-signatories {
|
||||
.wrapper-signatories {
|
||||
@include text-align(center);
|
||||
}
|
||||
|
||||
.signatory {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include span(12);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: rem(100);
|
||||
padding: spacing-vertical(small) spacing-horizontal(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-metadata {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.accomplishment-metadata {
|
||||
@extend %layout;
|
||||
|
||||
.accomplishment-metadata-title {
|
||||
@include span(12);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-metadata {
|
||||
@extend %layout;
|
||||
|
||||
.metadata {
|
||||
@extend %divider-2;
|
||||
|
||||
@include span(12);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-related {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.accomplishment-related {
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
@extend %layout;
|
||||
position: relative;
|
||||
top: -(spacing-vertical(base));
|
||||
.accomplishment-brief {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
.accomplishment-course,
|
||||
.accomplishment-recipient,
|
||||
.accomplishment-type {
|
||||
@include span(12);
|
||||
}
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
}
|
||||
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
@include span(12);
|
||||
}
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(50));
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-about {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.about {
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.accomplishment-orgs {
|
||||
@include grid-row;
|
||||
.about-item {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
.wrapper-orgs {
|
||||
@include text-align(center);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wrapper-organization {
|
||||
@include span(6);
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: rem(100);
|
||||
margin-bottom: spacing-vertical(small);
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
|
||||
&:last-child {
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(2);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
|
||||
.organization {
|
||||
@include size(100%);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
max-width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include left(50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-signatories {
|
||||
|
||||
.wrapper-signatories {
|
||||
@include text-align(center);
|
||||
}
|
||||
|
||||
.signatory {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include span(12);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-lg) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-xl) {
|
||||
@include span(3);
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: rem(100);
|
||||
padding: spacing-vertical(small) spacing-horizontal(small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-metadata {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.accomplishment-metadata {
|
||||
@extend %layout;
|
||||
|
||||
.accomplishment-metadata-title {
|
||||
@include span(12);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-metadata {
|
||||
@extend %layout;
|
||||
|
||||
.metadata {
|
||||
@extend %divider-2;
|
||||
@include span(12);
|
||||
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;
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(4);
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-accomplishment-related {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.accomplishment-related {
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.accomplishment-brief {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(50));
|
||||
@include margin-right(spacing-horizontal(base));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-about {
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.about {
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(6);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,39 +15,39 @@
|
||||
|
||||
// page set up - only available to modern browsers now
|
||||
@page {
|
||||
size : landscape;
|
||||
size : landscape;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
// helpers
|
||||
%print-no-background {
|
||||
background: none !important;
|
||||
}
|
||||
// helpers
|
||||
%print-no-background {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
%print-hide {
|
||||
display: none !important;
|
||||
}
|
||||
%print-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
%print-black-on-white {
|
||||
background: $white !important;
|
||||
color: $black !important;
|
||||
}
|
||||
%print-black-on-white {
|
||||
background: $white !important;
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
%print-layout-wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
%print-layout-wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
%print-rendering-section {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
%print-rendering-section {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -55,40 +55,40 @@
|
||||
// ------------------------------
|
||||
@media print {
|
||||
|
||||
// prevent images from bleeding over the edge of the printed page
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
// prevent images from bleeding over the edge of the printed page
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
// prevent large elements from being split across multiple pages
|
||||
ul, img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
// prevent large elements from being split across multiple pages
|
||||
ul, img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
// reset body/view properties
|
||||
html,
|
||||
body {
|
||||
@extend %print-black-on-white;
|
||||
}
|
||||
// reset body/view properties
|
||||
html,
|
||||
body {
|
||||
@extend %print-black-on-white;
|
||||
}
|
||||
|
||||
body {
|
||||
height: auto;
|
||||
margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
height: auto;
|
||||
margin: spacing-vertical(mid-large) spacing-vertical(mid-small) 0 spacing-vertical(mid-small) !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper-view {
|
||||
margin-bottom: 0 !important;
|
||||
.wrapper-view {
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// force background images and colors
|
||||
@media print and (color) {
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -96,25 +96,25 @@
|
||||
// ------------------------------
|
||||
@media print {
|
||||
|
||||
// hide elements not needed for print rendering
|
||||
.wrapper-banner-user,
|
||||
.wrapper-about,
|
||||
.wrapper-footer,
|
||||
.wrapper-header,
|
||||
.wrapper-introduction,
|
||||
.accomplishment-metadata-title,
|
||||
.accomplishment-metadata .accomplishment-recipient,
|
||||
.deco-corner,
|
||||
.accomplishment-date .label {
|
||||
@extend %print-hide;
|
||||
}
|
||||
// hide elements not needed for print rendering
|
||||
.wrapper-banner-user,
|
||||
.wrapper-about,
|
||||
.wrapper-footer,
|
||||
.wrapper-header,
|
||||
.wrapper-introduction,
|
||||
.accomplishment-metadata-title,
|
||||
.accomplishment-metadata .accomplishment-recipient,
|
||||
.deco-corner,
|
||||
.accomplishment-date .label {
|
||||
@extend %print-hide;
|
||||
}
|
||||
|
||||
// remove layout wrappers' padding
|
||||
.wrapper-introduction,
|
||||
.wrapper-accomplishment-rendering,
|
||||
.wrapper-accomplishment-metadata {
|
||||
@extend %print-layout-wrapper;
|
||||
}
|
||||
// remove layout wrappers' padding
|
||||
.wrapper-introduction,
|
||||
.wrapper-accomplishment-rendering,
|
||||
.wrapper-accomplishment-metadata {
|
||||
@extend %print-layout-wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -122,204 +122,211 @@
|
||||
// ------------------------------
|
||||
@media print {
|
||||
|
||||
// headings
|
||||
.hd-1 {
|
||||
font-size: font-size(x-large);
|
||||
line-height: line-height(x-large);
|
||||
// headings
|
||||
.hd-1 {
|
||||
font-size: font-size(x-large);
|
||||
line-height: line-height(x-large);
|
||||
}
|
||||
|
||||
.hd-2 {
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
}
|
||||
|
||||
.hd-3 {
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
}
|
||||
|
||||
.hd-4 {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.hd-5 {
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.hd-6 {
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
.hd-7 {
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
// copy
|
||||
.copy-lead {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy-large {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy-base {
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy-meta {
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy-micro {
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
// accomplishment
|
||||
.accomplishment-main {
|
||||
@extend %print-no-background;
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
top: 0 !important;
|
||||
border: rem(1) solid palette(grayscale, back);
|
||||
border-top: rem(2) solid $cert-base-color;
|
||||
box-shadow: none;
|
||||
padding: spacing-vertical(small) spacing-horizontal(mid-large);
|
||||
|
||||
|
||||
.accomplishment-type {
|
||||
margin-top: -(spacing-vertical(mid-large));
|
||||
}
|
||||
|
||||
.hd-2 {
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(75));
|
||||
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.hd-3 {
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(large);
|
||||
.wrapper-statement-and-signatories {
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
.hd-4 {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
.accomplishment-statement {
|
||||
@extend %print-rendering-section;
|
||||
|
||||
@include span(8);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hd-5 {
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
}
|
||||
|
||||
.hd-6 {
|
||||
.wrapper-orgs::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accomplishment-orgs {
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.wrapper-organization {
|
||||
height: rem(48);
|
||||
margin-top: spacing-vertical(mid-small) !important;
|
||||
margin-bottom: spacing-vertical(mid-small) !important;
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
max-width: 100%;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-signatories {
|
||||
@extend %print-rendering-section;
|
||||
|
||||
@include span(12, before);
|
||||
|
||||
.signatory-credentials {
|
||||
font-size: 8pt;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
height: spacing-vertical(small);
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.signatory-name {
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
}
|
||||
|
||||
.hd-7 {
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
.signatory-credentials {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// copy
|
||||
.copy-lead {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy-large {
|
||||
font-size: font-size(base);
|
||||
line-height: line-height(base);
|
||||
}
|
||||
|
||||
.copy-base {
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy-meta {
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.copy-micro {
|
||||
font-size: font-size(xx-small);
|
||||
line-height: line-height(x-small);
|
||||
}
|
||||
|
||||
// accomplishment
|
||||
.accomplishment-main {
|
||||
@extend %print-no-background;
|
||||
}
|
||||
|
||||
.accomplishment-rendering {
|
||||
top: 0 !important;
|
||||
border: rem(1) solid palette(grayscale, back);
|
||||
border-top: rem(2) solid $cert-base-color;
|
||||
box-shadow: none;
|
||||
padding: spacing-vertical(small) spacing-horizontal(mid-large);
|
||||
|
||||
|
||||
.accomplishment-type {
|
||||
margin-top: -(spacing-vertical(mid-large));
|
||||
}
|
||||
|
||||
.accomplishment-type-symbol {
|
||||
@include size(rem(75));
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.wrapper-statement-and-signatories {
|
||||
border-bottom: rem(2) solid palette(grayscale, x-back);
|
||||
}
|
||||
|
||||
.accomplishment-statement {
|
||||
@extend %print-rendering-section;
|
||||
@include span(8);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.accomplishment-summary,
|
||||
.accomplishment-statement-detail {
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
}
|
||||
|
||||
.wrapper-orgs::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accomplishment-orgs {
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.wrapper-organization {
|
||||
height: rem(48);
|
||||
margin-top: spacing-vertical(mid-small) !important;
|
||||
margin-bottom: spacing-vertical(mid-small) !important;
|
||||
}
|
||||
|
||||
.organization-logo {
|
||||
max-width: 100%;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-signatories {
|
||||
@extend %print-rendering-section;
|
||||
@include span(12, before);
|
||||
|
||||
.signatory-credentials {
|
||||
font-size: 8pt;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.signatory-signature {
|
||||
height: spacing-vertical(small);
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.signatory-name {
|
||||
font-size: font-size(x-small);
|
||||
}
|
||||
|
||||
.signatory-credentials {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// CASE: > 4 signatures
|
||||
&.has-many {
|
||||
|
||||
.signatory {
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
// CASE: > 4 signatures
|
||||
&.has-many {
|
||||
.signatory {
|
||||
@include span(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-accomplishment .wrapper-accomplishment-metadata {
|
||||
.layout-accomplishment .wrapper-accomplishment-metadata {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accomplishment-metadata {
|
||||
margin-bottom: 0;
|
||||
|
||||
.wrapper-metadata {
|
||||
@include clearfix();
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
.metadata {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.label, .value {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include margin-right(spacing-horizontal(small));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accomplishment-metadata {
|
||||
margin-bottom: 0;
|
||||
|
||||
.wrapper-metadata {
|
||||
@include clearfix();
|
||||
margin-bottom: 0;
|
||||
|
||||
.metadata {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.label, .value {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include margin-right(spacing-horizontal(small));
|
||||
}
|
||||
}
|
||||
}
|
||||
.accomplishment-id {
|
||||
float: left;
|
||||
width: 65% !important;
|
||||
margin: 0 !important;
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
.accomplishment-date {
|
||||
float: right;
|
||||
width: 35% !important;
|
||||
margin: 0 !important;
|
||||
@include text-align(right);
|
||||
}
|
||||
.accomplishment-id {
|
||||
float: left;
|
||||
width: 65% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
.accomplishment-date {
|
||||
float: right;
|
||||
width: 35% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
@include text-align(right);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------
|
||||
@@ -327,12 +334,10 @@
|
||||
// ------------------------------
|
||||
// certificate - distinguished
|
||||
@media print {
|
||||
|
||||
.certificate-distinguished {
|
||||
|
||||
.accomplishment-rendering {
|
||||
border-top-color: $cert-distinguished-color;
|
||||
}
|
||||
.certificate-distinguished {
|
||||
.accomplishment-rendering {
|
||||
border-top-color: $cert-distinguished-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,11 +20,11 @@
|
||||
// ------------------------------
|
||||
// visual dividers
|
||||
%divider-1 {
|
||||
border-bottom-width: rem(4);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: rem(4);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
%divider-2 {
|
||||
border-bottom-width: rem(2);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: rem(2);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
// #INVALID
|
||||
// ------------------------------
|
||||
.wrapper-content.status-invalid {
|
||||
@extend %layout-wrapper;
|
||||
@extend %layout-wrapper;
|
||||
|
||||
.wrapper-content-grid {
|
||||
@extend %layout;
|
||||
}
|
||||
.wrapper-content-grid {
|
||||
@extend %layout;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
margin-bottom: spacing-vertical(base);
|
||||
@@ -32,7 +32,6 @@
|
||||
}
|
||||
|
||||
.content-secondary {
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@include span(3, before);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
// 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
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
// 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
|
||||
|
||||
@@ -303,11 +303,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-in-animation{ @include fade-in-keyframes; }
|
||||
@-webkit-keyframes fade-in-animation { @include fade-in-keyframes; }
|
||||
|
||||
@-moz-keyframes fade-in-animation{ @include fade-in-keyframes; }
|
||||
@-moz-keyframes fade-in-animation { @include fade-in-keyframes; }
|
||||
|
||||
@keyframes fade-in-animation{ @include fade-in-keyframes; }
|
||||
@keyframes fade-in-animation { @include fade-in-keyframes; }
|
||||
|
||||
|
||||
// +utility animations
|
||||
|
||||
@@ -12,7 +12,7 @@ html, body {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
html{
|
||||
html {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
|
||||
.has-actions {
|
||||
.msg-content {
|
||||
width: flex-grid(9,12);
|
||||
width: flex-grid(9, 12);
|
||||
}
|
||||
|
||||
.msg-actions {
|
||||
@extend %t-copy-base;
|
||||
|
||||
display: inline-block;
|
||||
width: flex-grid(3,12);
|
||||
width: flex-grid(3, 12);
|
||||
|
||||
.btn {
|
||||
@extend %btn-primary-blue;
|
||||
|
||||
@@ -5,7 +5,7 @@ $notification-highlight-border-color: $uxpl-green-base !default;
|
||||
$lms-border-color: $uxpl-gray-background !default;
|
||||
$notification-background: rgb(255, 255, 255) !default
|
||||
|
||||
.home{
|
||||
.home {
|
||||
@include clearfix();
|
||||
|
||||
max-width: 1140px;
|
||||
|
||||
@@ -39,7 +39,8 @@
|
||||
|
||||
@include transition(none);
|
||||
|
||||
div#location_sub, div#language_sub {
|
||||
div#location_sub,
|
||||
div#language_sub {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
|
||||
@@ -54,9 +55,6 @@
|
||||
margin: lh(0.5) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&[type="input"]{
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
@@ -80,7 +78,8 @@
|
||||
text-transform: uppercase;
|
||||
top: 9px;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
@@ -111,7 +110,8 @@
|
||||
text-transform: uppercase;
|
||||
top: 9px;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
@@ -171,7 +171,8 @@
|
||||
padding: 5px 18px 6px;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -182,7 +183,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .credit-eligibility{
|
||||
> .credit-eligibility {
|
||||
border-top: 1px solid $lightGrey;
|
||||
margin-top: lh();
|
||||
|
||||
@@ -205,7 +206,7 @@
|
||||
@include padding-left(0.2em);
|
||||
}
|
||||
|
||||
> .detail-collapse{
|
||||
> .detail-collapse {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
@@ -216,7 +217,7 @@
|
||||
padding: lh(0.25);
|
||||
}
|
||||
|
||||
> span{
|
||||
> span {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -224,7 +225,7 @@
|
||||
> .requirement-container {
|
||||
padding: lh();
|
||||
|
||||
> .requirement{
|
||||
> .requirement {
|
||||
border-bottom: 1px solid $lightGrey;
|
||||
padding: lh(0.5);
|
||||
|
||||
@@ -233,26 +234,26 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .requirement-status{
|
||||
> .requirement-status {
|
||||
width: bi-app-invert-percentage(60%);
|
||||
|
||||
@include float(right);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.fa-times{
|
||||
.fa-times {
|
||||
@extend %t-icon6;
|
||||
|
||||
color: $alert-color;
|
||||
}
|
||||
|
||||
.fa-check{
|
||||
.fa-check {
|
||||
@extend %t-icon6;
|
||||
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
> .not-achieve{
|
||||
> .not-achieve {
|
||||
color: $darkGrey;
|
||||
}
|
||||
}
|
||||
@@ -300,7 +301,7 @@
|
||||
width: flex-grid(7, 9);
|
||||
|
||||
> div {
|
||||
padding:0 0 lh() 0;
|
||||
padding: 0 0 lh() 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
|
||||
@@ -104,7 +104,7 @@ input[type="password"] {
|
||||
|
||||
&:focus {
|
||||
border-color: lighten($link-color, 20%);
|
||||
box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15);
|
||||
box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.email-background{
|
||||
.email-background {
|
||||
.content-history-email-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
#ui-datepicker-div{z-index: 12000 !important; width: 16.5em !important}
|
||||
#ui-datepicker-div {
|
||||
z-index: 12000 !important;
|
||||
width: 16.5em !important;
|
||||
}
|
||||
|
||||
|
||||
.instructor-dashboard-wrapper-2 {
|
||||
@@ -27,7 +30,7 @@
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
.studio-edit-link{
|
||||
.studio-edit-link {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
||||
@@ -83,7 +86,7 @@
|
||||
// TYPE: confirm
|
||||
.msg-confirm {
|
||||
display: none;
|
||||
background: tint($confirm-color,95%);
|
||||
background: tint($confirm-color, 95%);
|
||||
border-top: 2px solid $confirm-color;
|
||||
color: $confirm-color;
|
||||
}
|
||||
@@ -98,9 +101,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.msg-success{
|
||||
.msg-success {
|
||||
border-top: 2px solid $confirm-color;
|
||||
background: tint($confirm-color,95%);
|
||||
background: tint($confirm-color, 95%);
|
||||
color: $confirm-color;
|
||||
}
|
||||
|
||||
@@ -141,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-blue {
|
||||
@extend %btn-primary-blue;
|
||||
|
||||
@@ -526,22 +529,23 @@
|
||||
|
||||
input[name="send_to"] {
|
||||
float: left;
|
||||
margin-top: .3em;
|
||||
margin-left: .1em;
|
||||
margin-top: 0.3em;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
input[name="send_to"]+label {
|
||||
input[name="send_to"] + label {
|
||||
display: block;
|
||||
padding-left: 1.3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[name="send_to"]:checked+label {
|
||||
input[name="send_to"]:checked + label {
|
||||
// "bolds" the text without causing a width recalculation
|
||||
text-shadow: 1px 0 0;
|
||||
}
|
||||
|
||||
input[name="send_to"]:focus+label, input[name="send_to"]:hover:not([disabled])+label {
|
||||
input[name="send_to"]:focus + label,
|
||||
input[name="send_to"]:hover:not([disabled]) + label {
|
||||
background-color: #efefef;
|
||||
|
||||
* {
|
||||
@@ -549,7 +553,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
input[name="send_to"]:disabled+label {
|
||||
input[name="send_to"]:disabled + label {
|
||||
font-weight: lighter;
|
||||
background-color: $light-gray3
|
||||
}
|
||||
@@ -596,7 +600,7 @@
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
legend {
|
||||
// use the same styles as H3s
|
||||
font-size: 1.2em;
|
||||
@@ -671,14 +675,14 @@
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ***
|
||||
* Ideally we want to handle functionality with JS.
|
||||
* This functionality should eventually be moved into CS/JS, and out of here. */
|
||||
.has-hint:hover > .hint {
|
||||
* This functionality should eventually be moved into CS/JS, and out of here. */
|
||||
.has-hint:hover > .hint {
|
||||
@include left($baseline*10);
|
||||
}
|
||||
|
||||
|
||||
.has-hint input:focus ~ .hint {
|
||||
@include left($baseline*10);
|
||||
}
|
||||
@@ -799,7 +803,8 @@
|
||||
color: $lighter-base-font-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $alert-color;
|
||||
}
|
||||
}
|
||||
@@ -1091,7 +1096,7 @@
|
||||
text-shadow: none;
|
||||
padding: 0;
|
||||
color: $uxpl-blue-base;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
@@ -1385,7 +1390,7 @@
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.divided-discussion-text{
|
||||
.divided-discussion-text {
|
||||
color: $uxpl-blue-base;
|
||||
}
|
||||
|
||||
@@ -1446,7 +1451,7 @@
|
||||
|
||||
// view - data download
|
||||
// --------------------
|
||||
.instructor-dashboard-wrapper-2 section.idash-section#data_download{
|
||||
.instructor-dashboard-wrapper-2 section.idash-section#data_download {
|
||||
input {
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3em;
|
||||
@@ -1658,13 +1663,13 @@ input[name="subject"] {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
|
||||
span{
|
||||
span {
|
||||
@include float(right);
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
span{
|
||||
span {
|
||||
background: #ddd;
|
||||
padding: 2px 9px;
|
||||
border-radius: 2px;
|
||||
@@ -1674,7 +1679,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
span.tip{
|
||||
span.tip {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
@@ -1683,7 +1688,7 @@ input[name="subject"] {
|
||||
color: #3c3c3c;
|
||||
line-height: 30px;
|
||||
|
||||
.add{
|
||||
.add {
|
||||
@include button(simple, $uxpl-blue-base);
|
||||
|
||||
@extend .button-reset;
|
||||
@@ -1696,7 +1701,7 @@ input[name="subject"] {
|
||||
|
||||
}
|
||||
|
||||
#e-commerce{
|
||||
#e-commerce {
|
||||
input[name='list-order-sale-csv'] {
|
||||
@include margin-right(14px);
|
||||
}
|
||||
@@ -1749,7 +1754,7 @@ input[name="subject"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content{
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@@ -1770,15 +1775,15 @@ input[name="subject"] {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
|
||||
tr.always-gray{
|
||||
tr.always-gray {
|
||||
background: #eee !important;
|
||||
border-top: 2px solid $white;
|
||||
}
|
||||
|
||||
tr.always-white{
|
||||
tr.always-white {
|
||||
background: #fff !important;
|
||||
|
||||
td{
|
||||
td {
|
||||
padding: ($baseline*1.5) 0 ($baseline/2);
|
||||
}
|
||||
}
|
||||
@@ -1792,7 +1797,7 @@ input[name="subject"] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
th:first-child{
|
||||
th:first-child {
|
||||
padding-left: $baseline;
|
||||
}
|
||||
|
||||
@@ -1826,7 +1831,7 @@ input[name="subject"] {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&.c_dsc{
|
||||
&.c_dsc {
|
||||
width: 200px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@@ -1834,22 +1839,22 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
// in_active coupon rows style
|
||||
.inactive_coupon{
|
||||
.inactive_coupon {
|
||||
background: #fff0f0 !important;
|
||||
text-decoration: line-through;
|
||||
color: rgba(51,51,51,0.2);
|
||||
color: rgba(51, 51, 51, 0.2);
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
td {
|
||||
a {
|
||||
color: rgba(51,51,51,0.2);
|
||||
color: rgba(51, 51, 51, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
// in_active coupon rows style
|
||||
.expired_coupon{
|
||||
background: #feefb3 !important;
|
||||
color: rgba(51,51,51,0.2);
|
||||
.expired_coupon {
|
||||
background: #feefb3 !important;
|
||||
color: rgba(51, 51, 51, 0.2);
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
td:nth-child(3) {
|
||||
@@ -1865,7 +1870,7 @@ input[name="subject"] {
|
||||
line-height: normal;
|
||||
font-size: 14px;
|
||||
|
||||
span.old-price{
|
||||
span.old-price {
|
||||
top: -1px;
|
||||
|
||||
@include left(-75px);
|
||||
@@ -1877,7 +1882,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
td:nth-child(5),td:first-child{
|
||||
td:nth-child(5),td:first-child {
|
||||
@include padding-left($baseline);
|
||||
}
|
||||
|
||||
@@ -1895,8 +1900,8 @@ input[name="subject"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td{
|
||||
a.edit-right{
|
||||
td {
|
||||
a.edit-right {
|
||||
@include margin-left(15px);
|
||||
}
|
||||
}
|
||||
@@ -1910,7 +1915,7 @@ input[name="subject"] {
|
||||
}
|
||||
// coupon edit and add modals
|
||||
#add-coupon-modal, #invalidate_registration_code_modal, #edit-coupon-modal,
|
||||
#set-course-mode-price-modal, #registration_code_generation_modal{
|
||||
#set-course-mode-price-modal, #registration_code_generation_modal {
|
||||
.inner-wrapper {
|
||||
background: $white;
|
||||
}
|
||||
@@ -1960,8 +1965,8 @@ input[name="subject"] {
|
||||
background: #fbf2f3;
|
||||
}
|
||||
|
||||
ol.list-input{
|
||||
li{
|
||||
ol.list-input {
|
||||
li {
|
||||
width: 278px;
|
||||
|
||||
@include float(left);
|
||||
@@ -1991,12 +1996,12 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child{
|
||||
li:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
table.tb_registration_code_status{
|
||||
table.tb_registration_code_status {
|
||||
margin-top: $baseline;
|
||||
color: #555;
|
||||
|
||||
@@ -2014,15 +2019,15 @@ input[name="subject"] {
|
||||
tr td:last-child {
|
||||
text-align: center;
|
||||
|
||||
a:first-child{
|
||||
a:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form#generate_codes ol.list-input{
|
||||
li{
|
||||
form#generate_codes ol.list-input {
|
||||
li {
|
||||
width: 278px;
|
||||
|
||||
@include float(left);
|
||||
@@ -2041,7 +2046,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
li#generate-registration-modal-field-city, li#generate-registration-modal-field-state,
|
||||
li#generate-registration-modal-field-zipcode{
|
||||
li#generate-registration-modal-field-zipcode {
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
@@ -2067,7 +2072,7 @@ input[name="subject"] {
|
||||
@include margin-left(15px !important);
|
||||
}
|
||||
|
||||
li:last-child{
|
||||
li:last-child {
|
||||
label {
|
||||
@include float(right);
|
||||
@include right(27px);
|
||||
@@ -2096,7 +2101,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
li#set-course-mode-modal-field-price{
|
||||
li#set-course-mode-modal-field-price {
|
||||
width: 100%;
|
||||
|
||||
label.required::after {
|
||||
@@ -2105,7 +2110,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
li#set-course-mode-modal-field-currency{
|
||||
li#set-course-mode-modal-field-currency {
|
||||
@include margin-left(0px !important);
|
||||
|
||||
select {
|
||||
@@ -2206,12 +2211,25 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
#add-coupon-modal{
|
||||
ol.list-input{
|
||||
li{
|
||||
input[type="checkbox"]#expiry-check , input[type="checkbox"]#expiry-check + label {display: inline-block; width: auto;margin-top: 10px;}
|
||||
&.full-width{width: 100%;}
|
||||
input#coupon_expiration_date{width: 278px;display: inline-block;float: right;}
|
||||
#add-coupon-modal {
|
||||
ol.list-input {
|
||||
li {
|
||||
input[type="checkbox"]#expiry-check,
|
||||
input[type="checkbox"]#expiry-check + label {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input#coupon_expiration_date {
|
||||
width: 278px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2229,7 +2247,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
input[name="subject"] {
|
||||
width:600px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.enrollment-wrapper {
|
||||
@@ -2248,13 +2266,13 @@ input[name="subject"] {
|
||||
|
||||
@include padding-left(25px);
|
||||
|
||||
span{
|
||||
span {
|
||||
@include float(right);
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
span{
|
||||
span {
|
||||
float: none;
|
||||
padding: 2px 9px;
|
||||
background: #ddd;
|
||||
@@ -2264,7 +2282,7 @@ input[name="subject"] {
|
||||
}
|
||||
}
|
||||
|
||||
span.tip{
|
||||
span.tip {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
@@ -2273,7 +2291,7 @@ input[name="subject"] {
|
||||
color: #3c3c3c;
|
||||
line-height: 30px;
|
||||
|
||||
.add{
|
||||
.add {
|
||||
@include button(simple, $uxpl-blue-base);
|
||||
|
||||
@extend .button-reset;
|
||||
@@ -2301,7 +2319,7 @@ input[name="subject"] {
|
||||
color: #3c3c3c;
|
||||
line-height: 30px;
|
||||
|
||||
.add{
|
||||
.add {
|
||||
@include button(simple, $uxpl-blue-base);
|
||||
|
||||
@extend .button-reset;
|
||||
@@ -2317,7 +2335,7 @@ input[name="subject"] {
|
||||
|
||||
@include padding(($baseline/2) 15px ($baseline/2) 1px);
|
||||
|
||||
.add{
|
||||
.add {
|
||||
font-size: em(13);
|
||||
}
|
||||
}
|
||||
@@ -2333,7 +2351,7 @@ input[name="subject"] {
|
||||
color: #3c3c3c;
|
||||
line-height: 30px;
|
||||
|
||||
.add{
|
||||
.add {
|
||||
@include button(simple, $uxpl-blue-base);
|
||||
|
||||
@extend .button-reset;
|
||||
@@ -2360,7 +2378,7 @@ input[name="subject"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th:first-child{
|
||||
th:first-child {
|
||||
padding-left: $baseline;
|
||||
}
|
||||
|
||||
@@ -2434,7 +2452,7 @@ input[name="subject"] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
td:first-child{
|
||||
td:first-child {
|
||||
@include padding-left($baseline);
|
||||
}
|
||||
|
||||
@@ -2602,7 +2620,7 @@ input[name="subject"] {
|
||||
}
|
||||
|
||||
.certificates-wrapper {
|
||||
.message{
|
||||
.message {
|
||||
@extend %exception-message;
|
||||
}
|
||||
}
|
||||
@@ -2617,23 +2635,23 @@ input[name="subject"] {
|
||||
border-top: 7px solid #646464;
|
||||
}
|
||||
|
||||
.certificate-generation-history{
|
||||
table{
|
||||
thead{
|
||||
.certificate-generation-history {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
td.task-name{
|
||||
td.task-name {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
td.task-date{
|
||||
td.task-date {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody{
|
||||
tbody {
|
||||
tr {
|
||||
td{
|
||||
td {
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
text-align: left;;
|
||||
@@ -2685,7 +2703,7 @@ input[name="subject"] {
|
||||
text-align: left;
|
||||
color: $gray;
|
||||
|
||||
&.date{
|
||||
&.date {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.course-material{
|
||||
.course-material {
|
||||
@extend %inner-wrapper;
|
||||
}
|
||||
|
||||
|
||||
@@ -243,7 +243,7 @@
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.timestamp{
|
||||
.timestamp {
|
||||
margin-top: ($baseline*0.75);
|
||||
padding: 15px 0 0 10px;
|
||||
border-top: 1px solid $light-gray;
|
||||
@@ -597,7 +597,7 @@
|
||||
margin-top: ($baseline*2);
|
||||
}
|
||||
|
||||
#cheatsheet-body pre{
|
||||
#cheatsheet-body pre {
|
||||
color: $black;
|
||||
text-align: left;
|
||||
background: #eee;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
%pattern-library-btn {
|
||||
@include transition(
|
||||
color 0.125s ease-in-out 0s,
|
||||
border-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
|
||||
);
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
border-radius: $forum-border-radius;
|
||||
|
||||
header {
|
||||
.anonymous{
|
||||
.anonymous {
|
||||
font-size: $forum-base-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.profile-stat-label{
|
||||
.profile-stat-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
}
|
||||
|
||||
// CASE: label - community TA response
|
||||
&.community-ta{
|
||||
&.community-ta {
|
||||
padding-top: 38px;
|
||||
border-color: $forum-color-community-ta;
|
||||
}
|
||||
|
||||
@@ -328,7 +328,7 @@
|
||||
color: $action-primary-fg;
|
||||
}
|
||||
|
||||
%btn-pl-white-base{
|
||||
%btn-pl-white-base {
|
||||
@extend %btn-pl-default-base;
|
||||
|
||||
background-color: $action-primary-fg;
|
||||
|
||||
@@ -404,7 +404,7 @@
|
||||
|
||||
// states - all
|
||||
&.disabled, &.submitted {
|
||||
color: rgba(0,0,0,.25);
|
||||
color: rgba(0, 0,0,.25);
|
||||
|
||||
label {
|
||||
cursor: text;
|
||||
@@ -416,7 +416,7 @@
|
||||
|
||||
textarea, input {
|
||||
background: $container-bg;
|
||||
color: rgba(0,0,0,.25);
|
||||
color: rgba(0, 0,0,.25);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -434,7 +434,7 @@
|
||||
// states - disabled
|
||||
&.disabled {
|
||||
label::after {
|
||||
color: rgba(0,0,0,.35);
|
||||
color: rgba(0, 0,0,.35);
|
||||
content: "(Disabled Currently)";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
background: $course-profile-bg;
|
||||
background-image: $homepage-bg-image;
|
||||
background-size: cover;
|
||||
box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 1px 80px 0 rgba(0, 0,0, 0.5);
|
||||
border-bottom: 1px solid $border-color-3;
|
||||
box-shadow: inset 0 1px 5px 0 $shadow-l1;
|
||||
height: 280px;
|
||||
@@ -20,7 +20,7 @@
|
||||
.intro-inner-wrapper {
|
||||
background: $course-header-bg;
|
||||
border: 1px solid $border-color-3;
|
||||
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
@@ -207,7 +207,7 @@
|
||||
position: relative;
|
||||
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
|
||||
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 12px 0 $shadow-d1;
|
||||
@@ -235,7 +235,7 @@
|
||||
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
text-shadow: 0 -1px rgba(0,0,0, 0.8);
|
||||
text-shadow: 0 -1px rgba(0, 0,0, 0.8);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
@@ -250,9 +250,9 @@
|
||||
text-decoration: none;
|
||||
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
|
||||
|
||||
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
|
||||
border-color: rgba(255,255,255, 0.9);
|
||||
|
||||
&::after {
|
||||
@@ -394,7 +394,7 @@
|
||||
width: flex-grid(4);
|
||||
|
||||
> section {
|
||||
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
|
||||
box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
|
||||
border: 1px solid $border-color-2;
|
||||
|
||||
&.course-summary {
|
||||
@@ -485,12 +485,12 @@
|
||||
}
|
||||
|
||||
.sharing-message {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
|
||||
rgba(0,0,0, 0.7) 100%));
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.9) 0%,
|
||||
rgba(0, 0,0, 0.7) 100%));
|
||||
|
||||
border: 1px solid rgba(0,0,0, 0.5);
|
||||
border: 1px solid rgba(0, 0,0, 0.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
|
||||
@@ -138,7 +138,7 @@ $facet-background-color: #007db8;
|
||||
background-image: $homepage-bg-image;
|
||||
background-position: center top !important;
|
||||
border-bottom: 1px solid $border-color-3;
|
||||
box-shadow: inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3);
|
||||
box-shadow: inset 0 -1px 8px 0 rgba(0, 0,0, 0.2), inset 0 1px 12px 0 rgba(0, 0,0, 0.3);
|
||||
height: 430px;
|
||||
margin-top: $header_image_margin;
|
||||
width: 100%;
|
||||
@@ -156,7 +156,7 @@ $facet-background-color: #007db8;
|
||||
background: $white;
|
||||
background: $course-header-bg;
|
||||
border: 1px solid $border-color-3;
|
||||
box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
|
||||
padding: $baseline ($baseline*1.5);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@@ -781,7 +781,7 @@
|
||||
width: flex-grid(9, 12);
|
||||
display: inline-block;
|
||||
|
||||
.message-copy-bold{
|
||||
.message-copy-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -804,7 +804,7 @@
|
||||
@include left($baseline/2);
|
||||
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
|
||||
|
||||
.action-upgrade-icon{
|
||||
.action-upgrade-icon {
|
||||
@include float(left);
|
||||
|
||||
display: inline;
|
||||
@@ -1403,7 +1403,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
p.course-block{
|
||||
p.course-block {
|
||||
border-style: solid;
|
||||
border-color: #e3dc86;
|
||||
padding: ($baseline/4);
|
||||
@@ -1412,7 +1412,7 @@ p.course-block{
|
||||
|
||||
}
|
||||
|
||||
.enter-course-blocked{
|
||||
.enter-course-blocked {
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
|
||||
@@ -1440,7 +1440,7 @@ p.course-block{
|
||||
}
|
||||
}
|
||||
|
||||
a.disable-look{
|
||||
a.disable-look {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
@@ -1558,7 +1558,7 @@ a.fade-cover {
|
||||
border: $palette-info-border 1px solid;
|
||||
padding: 5px;
|
||||
|
||||
.message-title{
|
||||
.message-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -170,7 +170,7 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
@include border-left(0);
|
||||
@include box-sizing(border-box);
|
||||
// box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
|
||||
// box-shadow: 0 4px 25px 0 rgba(0, 0,0, 0.5);
|
||||
height: 120px;
|
||||
|
||||
@include float(left);
|
||||
@@ -193,7 +193,7 @@ $course-search-input-height: ($button-size);
|
||||
background-size: cover;
|
||||
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.65), rgba(0, 0,0, 0.75)));
|
||||
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 12px 0 $shadow-d1;
|
||||
@@ -228,7 +228,7 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
text-shadow: 0 -1px rgba(0,0,0, 0.8);
|
||||
text-shadow: 0 -1px rgba(0, 0,0, 0.8);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
@@ -241,9 +241,9 @@ $course-search-input-height: ($button-size);
|
||||
|
||||
&:hover, &:focus {
|
||||
.play-intro {
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
|
||||
@include background-image(linear-gradient(-90deg, rgba(0, 0,0, 0.75), rgba(0, 0,0, 0.8)));
|
||||
|
||||
box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
|
||||
box-shadow: 0 1px 12px 0 rgba(0, 0,0, 0.5);
|
||||
border-color: rgba(255,255,255, 0.9);
|
||||
|
||||
&::after {
|
||||
@@ -546,7 +546,7 @@ $course-search-input-height: ($button-size);
|
||||
.news {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
|
||||
box-shadow: inset 0 0 3px 0 rgba(0, 0,0, 0.15);
|
||||
padding: 20px;
|
||||
width: flex-grid(12);
|
||||
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
width: flex-grid(9,12);
|
||||
width: flex-grid(9, 12);
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(3,12);
|
||||
width: flex-grid(3, 12);
|
||||
margin-top: ($baseline*2);
|
||||
}
|
||||
|
||||
|
||||
@@ -41,123 +41,123 @@ $lms-max-width: 1180px !default;
|
||||
// ----------------------------
|
||||
// #COLORS
|
||||
// ----------------------------
|
||||
$transparent: rgba(0,0,0,0) !default; // used when color value is needed for UI width/transitions but element is transparent
|
||||
$transparent: rgba(0, 0, 0, 0) !default; // used when color value is needed for UI width/transitions but element is transparent
|
||||
|
||||
$black: rgb(0,0,0) !default;
|
||||
$black: rgb(0, 0, 0) !default;
|
||||
$black-t0: rgba($black, 0.125) !default;
|
||||
$black-t1: rgba($black, 0.25) !default;
|
||||
$black-t2: rgba($black, 0.5) !default;
|
||||
$black-t3: rgba($black, 0.75) !default;
|
||||
|
||||
$white: rgb(255,255,255) !default;
|
||||
$white: rgb(255, 255, 255) !default;
|
||||
$white-t0: rgba($white, 0.125) !default;
|
||||
$white-t1: rgba($white, 0.25) !default;
|
||||
$white-t2: rgba($white, 0.5) !default;
|
||||
$white-t3: rgba($white, 0.75) !default;
|
||||
|
||||
$gray: rgb(118,118,118) !default;
|
||||
$gray-l1: tint($gray,20%) !default;
|
||||
$gray-l2: tint($gray,40%) !default;
|
||||
$gray-l3: tint($gray,60%) !default;
|
||||
$gray-l4: tint($gray,80%) !default;
|
||||
$gray-l5: tint($gray,90%) !default;
|
||||
$gray-l6: tint($gray,95%) !default;
|
||||
$gray-l7: tint($gray,99%) !default;
|
||||
$gray-d1: shade($gray,20%) !default;
|
||||
$gray-d2: shade($gray,40%) !default;
|
||||
$gray-d3: shade($gray,60%) !default;
|
||||
$gray-d4: shade($gray,80%) !default;
|
||||
$gray: rgb(118, 118, 118) !default;
|
||||
$gray-l1: tint($gray, 20%) !default;
|
||||
$gray-l2: tint($gray, 40%) !default;
|
||||
$gray-l3: tint($gray, 60%) !default;
|
||||
$gray-l4: tint($gray, 80%) !default;
|
||||
$gray-l5: tint($gray, 90%) !default;
|
||||
$gray-l6: tint($gray, 95%) !default;
|
||||
$gray-l7: tint($gray, 99%) !default;
|
||||
$gray-d1: shade($gray, 20%) !default;
|
||||
$gray-d2: shade($gray, 40%) !default;
|
||||
$gray-d3: shade($gray, 60%) !default;
|
||||
$gray-d4: shade($gray, 80%) !default;
|
||||
|
||||
$yellow: rgb(255, 252, 221) !default;
|
||||
|
||||
$pink: rgb(182,37,103) !default;
|
||||
$pink-l1: tint($pink,20%) !default;
|
||||
$pink-l2: tint($pink,40%) !default;
|
||||
$pink-l3: tint($pink,60%) !default;
|
||||
$pink-l4: tint($pink,80%) !default;
|
||||
$pink-l5: tint($pink,90%) !default;
|
||||
$pink-d1: shade($pink,20%) !default;
|
||||
$pink-d2: shade($pink,40%) !default;
|
||||
$pink-d3: shade($pink,60%) !default;
|
||||
$pink-d4: shade($pink,80%) !default;
|
||||
$pink-s1: saturate($pink,15%) !default;
|
||||
$pink-s2: saturate($pink,30%) !default;
|
||||
$pink-s3: saturate($pink,45%) !default;
|
||||
$pink-u1: desaturate($pink,15%) !default;
|
||||
$pink-u2: desaturate($pink,30%) !default;
|
||||
$pink-u3: desaturate($pink,45%) !default;
|
||||
$pink: rgb(182, 37, 103) !default;
|
||||
$pink-l1: tint($pink, 20%) !default;
|
||||
$pink-l2: tint($pink, 40%) !default;
|
||||
$pink-l3: tint($pink, 60%) !default;
|
||||
$pink-l4: tint($pink, 80%) !default;
|
||||
$pink-l5: tint($pink, 90%) !default;
|
||||
$pink-d1: shade($pink, 20%) !default;
|
||||
$pink-d2: shade($pink, 40%) !default;
|
||||
$pink-d3: shade($pink, 60%) !default;
|
||||
$pink-d4: shade($pink, 80%) !default;
|
||||
$pink-s1: saturate($pink, 15%) !default;
|
||||
$pink-s2: saturate($pink, 30%) !default;
|
||||
$pink-s3: saturate($pink, 45%) !default;
|
||||
$pink-u1: desaturate($pink, 15%) !default;
|
||||
$pink-u2: desaturate($pink, 30%) !default;
|
||||
$pink-u3: desaturate($pink, 45%) !default;
|
||||
|
||||
$red: rgb(178, 6, 16) !default;
|
||||
$red-l1: tint($red,20%) !default;
|
||||
$red-l2: tint($red,40%) !default;
|
||||
$red-l3: tint($red,60%) !default;
|
||||
$red-l4: tint($red,80%) !default;
|
||||
$red-l5: tint($red,90%) !default;
|
||||
$red-d1: shade($red,20%) !default;
|
||||
$red-d2: shade($red,40%) !default;
|
||||
$red-d3: shade($red,60%) !default;
|
||||
$red-d4: shade($red,80%) !default;
|
||||
$red-s1: saturate($red,15%) !default;
|
||||
$red-s2: saturate($red,30%) !default;
|
||||
$red-s3: saturate($red,45%) !default;
|
||||
$red-u1: desaturate($red,15%) !default;
|
||||
$red-u2: desaturate($red,30%) !default;
|
||||
$red-u3: desaturate($red,45%) !default;
|
||||
$red-l1: tint($red, 20%) !default;
|
||||
$red-l2: tint($red, 40%) !default;
|
||||
$red-l3: tint($red, 60%) !default;
|
||||
$red-l4: tint($red, 80%) !default;
|
||||
$red-l5: tint($red, 90%) !default;
|
||||
$red-d1: shade($red, 20%) !default;
|
||||
$red-d2: shade($red, 40%) !default;
|
||||
$red-d3: shade($red, 60%) !default;
|
||||
$red-d4: shade($red, 80%) !default;
|
||||
$red-s1: saturate($red, 15%) !default;
|
||||
$red-s2: saturate($red, 30%) !default;
|
||||
$red-s3: saturate($red, 45%) !default;
|
||||
$red-u1: desaturate($red, 15%) !default;
|
||||
$red-u2: desaturate($red, 30%) !default;
|
||||
$red-u3: desaturate($red, 45%) !default;
|
||||
|
||||
$green: rgb(37, 184, 90) !default;
|
||||
$green-l1: tint($green,20%) !default;
|
||||
$green-l2: tint($green,40%) !default;
|
||||
$green-l3: tint($green,60%) !default;
|
||||
$green-l4: tint($green,80%) !default;
|
||||
$green-l5: tint($green,90%) !default;
|
||||
$green-d1: shade($green,20%) !default;
|
||||
$green-d2: shade($green,40%) !default;
|
||||
$green-d3: shade($green,60%) !default;
|
||||
$green-d4: shade($green,80%) !default;
|
||||
$green-s1: saturate($green,15%) !default;
|
||||
$green-s2: saturate($green,30%) !default;
|
||||
$green-s3: saturate($green,45%) !default;
|
||||
$green-u1: desaturate($green,15%) !default;
|
||||
$green-u2: desaturate($green,30%) !default;
|
||||
$green-u3: desaturate($green,45%) !default;
|
||||
$green-l1: tint($green, 20%) !default;
|
||||
$green-l2: tint($green, 40%) !default;
|
||||
$green-l3: tint($green, 60%) !default;
|
||||
$green-l4: tint($green, 80%) !default;
|
||||
$green-l5: tint($green, 90%) !default;
|
||||
$green-d1: shade($green, 20%) !default;
|
||||
$green-d2: shade($green, 40%) !default;
|
||||
$green-d3: shade($green, 60%) !default;
|
||||
$green-d4: shade($green, 80%) !default;
|
||||
$green-s1: saturate($green, 15%) !default;
|
||||
$green-s2: saturate($green, 30%) !default;
|
||||
$green-s3: saturate($green, 45%) !default;
|
||||
$green-u1: desaturate($green, 15%) !default;
|
||||
$green-u2: desaturate($green, 30%) !default;
|
||||
$green-u3: desaturate($green, 45%) !default;
|
||||
|
||||
$yellow: rgb(255, 252, 221) !default; // yellow color used by LMS
|
||||
//$yellow: rgb(237, 189, 60) !default; // yellow color used by Studio
|
||||
$yellow-l1: tint($yellow,20%) !default;
|
||||
$yellow-l2: tint($yellow,40%) !default;
|
||||
$yellow-l3: tint($yellow,60%) !default;
|
||||
$yellow-l4: tint($yellow,80%) !default;
|
||||
$yellow-l5: tint($yellow,90%) !default;
|
||||
$yellow-d1: shade($yellow,20%) !default;
|
||||
$yellow-d2: shade($yellow,40%) !default;
|
||||
$yellow-d3: shade($yellow,60%) !default;
|
||||
$yellow-d4: shade($yellow,80%) !default;
|
||||
$yellow-s1: saturate($yellow,15%) !default;
|
||||
$yellow-s2: saturate($yellow,30%) !default;
|
||||
$yellow-s3: saturate($yellow,45%) !default;
|
||||
$yellow-u1: desaturate($yellow,15%) !default;
|
||||
$yellow-u2: desaturate($yellow,30%) !default;
|
||||
$yellow-u3: desaturate($yellow,45%) !default;
|
||||
$yellow-l1: tint($yellow, 20%) !default;
|
||||
$yellow-l2: tint($yellow, 40%) !default;
|
||||
$yellow-l3: tint($yellow, 60%) !default;
|
||||
$yellow-l4: tint($yellow, 80%) !default;
|
||||
$yellow-l5: tint($yellow, 90%) !default;
|
||||
$yellow-d1: shade($yellow, 20%) !default;
|
||||
$yellow-d2: shade($yellow, 40%) !default;
|
||||
$yellow-d3: shade($yellow, 60%) !default;
|
||||
$yellow-d4: shade($yellow, 80%) !default;
|
||||
$yellow-s1: saturate($yellow, 15%) !default;
|
||||
$yellow-s2: saturate($yellow, 30%) !default;
|
||||
$yellow-s3: saturate($yellow, 45%) !default;
|
||||
$yellow-u1: desaturate($yellow, 15%) !default;
|
||||
$yellow-u2: desaturate($yellow, 30%) !default;
|
||||
$yellow-u3: desaturate($yellow, 45%) !default;
|
||||
|
||||
$blue: rgb(0, 121, 188) !default;
|
||||
$blue-l1: tint($blue,20%) !default;
|
||||
$blue-l2: tint($blue,40%) !default;
|
||||
$blue-l3: tint($blue,60%) !default;
|
||||
$blue-l4: tint($blue,80%) !default;
|
||||
$blue-l5: tint($blue,90%) !default;
|
||||
$blue-d1: shade($blue,20%) !default;
|
||||
$blue-d2: shade($blue,40%) !default;
|
||||
$blue-d3: shade($blue,60%) !default;
|
||||
$blue-d4: shade($blue,80%) !default;
|
||||
$blue-s1: saturate($blue,15%) !default;
|
||||
$blue-s2: saturate($blue,30%) !default;
|
||||
$blue-s3: saturate($blue,45%) !default;
|
||||
$blue-u1: desaturate($blue,15%) !default;
|
||||
$blue-u2: desaturate($blue,30%) !default;
|
||||
$blue-u3: desaturate($blue,45%) !default;
|
||||
$blue-l1: tint($blue, 20%) !default;
|
||||
$blue-l2: tint($blue, 40%) !default;
|
||||
$blue-l3: tint($blue, 60%) !default;
|
||||
$blue-l4: tint($blue, 80%) !default;
|
||||
$blue-l5: tint($blue, 90%) !default;
|
||||
$blue-d1: shade($blue, 20%) !default;
|
||||
$blue-d2: shade($blue, 40%) !default;
|
||||
$blue-d3: shade($blue, 60%) !default;
|
||||
$blue-d4: shade($blue, 80%) !default;
|
||||
$blue-s1: saturate($blue, 15%) !default;
|
||||
$blue-s2: saturate($blue, 30%) !default;
|
||||
$blue-s3: saturate($blue, 45%) !default;
|
||||
$blue-u1: desaturate($blue, 15%) !default;
|
||||
$blue-u2: desaturate($blue, 30%) !default;
|
||||
$blue-u3: desaturate($blue, 45%) !default;
|
||||
$blue-t0: rgba($blue, 0.125) !default;
|
||||
$blue-t1: rgba($blue, 0.25) !default;
|
||||
$blue-t2: rgba($blue, 0.50) !default;
|
||||
$blue-t2: rgba($blue, 0.5) !default;
|
||||
$blue-t3: rgba($blue, 0.75) !default;
|
||||
|
||||
$uxpl-blue-base: rgb(0, 117, 180) !default; // wcag2a compliant
|
||||
@@ -172,21 +172,21 @@ $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compli
|
||||
$uxpl-grayscale-x-back: rgb(245, 245, 245) !default; // UXPL grayscale, x-back
|
||||
|
||||
$orange: rgb(237, 189, 60) !default;
|
||||
$orange-l1: tint($orange,20%) !default;
|
||||
$orange-l2: tint($orange,40%) !default;
|
||||
$orange-l3: tint($orange,60%) !default;
|
||||
$orange-l4: tint($orange,80%) !default;
|
||||
$orange-l5: tint($orange,90%) !default;
|
||||
$orange-d1: shade($orange,20%) !default;
|
||||
$orange-d2: shade($orange,40%) !default;
|
||||
$orange-d3: shade($orange,60%) !default;
|
||||
$orange-d4: shade($orange,80%) !default;
|
||||
$orange-s1: saturate($orange,15%) !default;
|
||||
$orange-s2: saturate($orange,30%) !default;
|
||||
$orange-s3: saturate($orange,45%) !default;
|
||||
$orange-u1: desaturate($orange,15%) !default;
|
||||
$orange-u2: desaturate($orange,30%) !default;
|
||||
$orange-u3: desaturate($orange,45%) !default;
|
||||
$orange-l1: tint($orange, 20%) !default;
|
||||
$orange-l2: tint($orange, 40%) !default;
|
||||
$orange-l3: tint($orange, 60%) !default;
|
||||
$orange-l4: tint($orange, 80%) !default;
|
||||
$orange-l5: tint($orange, 90%) !default;
|
||||
$orange-d1: shade($orange, 20%) !default;
|
||||
$orange-d2: shade($orange, 40%) !default;
|
||||
$orange-d3: shade($orange, 60%) !default;
|
||||
$orange-d4: shade($orange, 80%) !default;
|
||||
$orange-s1: saturate($orange, 15%) !default;
|
||||
$orange-s2: saturate($orange, 30%) !default;
|
||||
$orange-s3: saturate($orange, 45%) !default;
|
||||
$orange-u1: desaturate($orange, 15%) !default;
|
||||
$orange-u2: desaturate($orange, 30%) !default;
|
||||
$orange-u3: desaturate($orange, 45%) !default;
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -204,10 +204,10 @@ $google-red: #d73924;
|
||||
$microsoft-black: #000;
|
||||
|
||||
// shadows
|
||||
$shadow: rgba(0,0,0,0.2) !default;
|
||||
$shadow-l1: rgba(0,0,0,0.1) !default;
|
||||
$shadow-l2: rgba(0,0,0,0.05) !default;
|
||||
$shadow-d1: rgba(0,0,0,0.4) !default;
|
||||
$shadow: rgba(0, 0, 0, 0.2) !default;
|
||||
$shadow-l1: rgba(0, 0, 0, 0.1) !default;
|
||||
$shadow-l2: rgba(0, 0, 0, 0.05) !default;
|
||||
$shadow-d1: rgba(0, 0, 0, 0.4) !default;
|
||||
$shadow-d2: rgba($black, 0.6) !default;
|
||||
|
||||
// system feedback-based colors
|
||||
@@ -215,7 +215,7 @@ $error-color: rgb(203, 7, 18) !default;
|
||||
$warning-color: rgb(255, 192, 31) !default;
|
||||
$confirm-color: rgb(0, 132, 1) !default;
|
||||
$active-color: $blue !default;
|
||||
$highlight-color: rgb(255,255,0) !default;
|
||||
$highlight-color: rgb(255, 255, 0) !default;
|
||||
$alert-color: rgb(212, 64, 64) !default;
|
||||
$success-color: rgb(0, 155, 0) !default;
|
||||
$success-color-hover: rgb(0, 129, 0) !default;
|
||||
@@ -245,7 +245,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||
// ----------------------------
|
||||
|
||||
// logo colors
|
||||
$audit-mode-color: rgb(74,74,74) !default;
|
||||
$audit-mode-color: rgb(74, 74, 74) !default;
|
||||
$honor-mode-color: $uxpl-blue-base !default;
|
||||
$verified-mode-color: $uxpl-green-base !default;
|
||||
$micromasters-color: #005585 !default;
|
||||
@@ -257,76 +257,76 @@ $lms-preview-menu-color: #c8c8c8 !default;
|
||||
|
||||
// old color variables
|
||||
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
|
||||
$dark-gray1: rgb(74,74,74) !default;
|
||||
$light-gray1: rgb(242,242,242) !default;
|
||||
$light-gray2: rgb(171,171,171) !default;
|
||||
$light-gray3: rgb(249,249,249) !default;
|
||||
$light-gray4: rgb(252,252,252) !default;
|
||||
$dark-gray2: rgb(151,151,151) !default;
|
||||
$blue1: rgb(74,144,226) !default;
|
||||
$blue2: rgb(0,161,229) !default;
|
||||
$green1: rgb(97,161,46) !default;
|
||||
$red1: rgb(208,2,27) !default;
|
||||
$dark-gray1: rgb(74, 74, 74) !default;
|
||||
$light-gray1: rgb(242, 242, 242) !default;
|
||||
$light-gray2: rgb(171, 171, 171) !default;
|
||||
$light-gray3: rgb(249, 249, 249) !default;
|
||||
$light-gray4: rgb(252, 252, 252) !default;
|
||||
$dark-gray2: rgb(151, 151, 151) !default;
|
||||
$blue1: rgb(74, 144, 226) !default;
|
||||
$blue2: rgb(0, 161, 229) !default;
|
||||
$green1: rgb(97, 161, 46) !default;
|
||||
$red1: rgb(208, 2, 27) !default;
|
||||
|
||||
// edx-specific: marketing site variables
|
||||
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
|
||||
$m-gray: rgb(138,140,143) !default; //C8F
|
||||
$m-gray-l1: rgb(151,153,155) !default;
|
||||
$m-gray-l2: rgb(164,166,168) !default;
|
||||
$m-gray-l3: rgb(177,178,180) !default;
|
||||
$m-gray-l4: rgb(245,245,245) !default;
|
||||
$m-gray: rgb(138, 140, 143) !default; //C8F
|
||||
$m-gray-l1: rgb(151, 153, 155) !default;
|
||||
$m-gray-l2: rgb(164, 166, 168) !default;
|
||||
$m-gray-l3: rgb(177, 178, 180) !default;
|
||||
$m-gray-l4: rgb(245, 245, 245) !default;
|
||||
$m-gray-d1: rgb(111, 112, 116) !default;
|
||||
$m-gray-d2: rgb(112,114,118) !default;
|
||||
$m-gray-d3: rgb(100,102,104) !default;
|
||||
$m-gray-d4: rgb(5,5,5) !default;
|
||||
$m-gray-t0: rgba($m-gray,0.125) !default;
|
||||
$m-gray-t1: rgba($m-gray,0.25) !default;
|
||||
$m-gray-t2: rgba($m-gray,0.50) !default;
|
||||
$m-gray-t3: rgba($m-gray,0.75) !default;
|
||||
$m-gray-d2: rgb(112, 114, 118) !default;
|
||||
$m-gray-d3: rgb(100, 102, 104) !default;
|
||||
$m-gray-d4: rgb(5, 5, 5) !default;
|
||||
$m-gray-t0: rgba($m-gray, 0.125) !default;
|
||||
$m-gray-t1: rgba($m-gray, 0.25) !default;
|
||||
$m-gray-t2: rgba($m-gray, 0.5) !default;
|
||||
$m-gray-t3: rgba($m-gray, 0.75) !default;
|
||||
|
||||
$m-blue: $uxpl-blue-base; // uxpl blue base
|
||||
$m-blue-l1: rgb(43,172,230) !default;
|
||||
$m-blue-l2: rgb(66,181,233) !default;
|
||||
$m-blue-l3: rgb(89,190,236) !default;
|
||||
$m-blue-l4: tint($m-blue,90%) !default;
|
||||
$m-blue-l5: tint($m-blue,95%) !default;
|
||||
$m-blue-l1: rgb(43, 172, 230) !default;
|
||||
$m-blue-l2: rgb(66, 181, 233) !default;
|
||||
$m-blue-l3: rgb(89, 190, 236) !default;
|
||||
$m-blue-l4: tint($m-blue, 90%) !default;
|
||||
$m-blue-l5: tint($m-blue, 95%) !default;
|
||||
$m-blue-l6: #4bb4fb !default;
|
||||
$m-blue-d1: rgb(23,144,199) !default;
|
||||
$m-blue-d1: rgb(23, 144, 199) !default;
|
||||
$m-blue-d2: $blue !default;
|
||||
$m-blue-d3: rgb(18,111,154) !default;
|
||||
$m-blue-d4: rgb(10,74,103) !default;
|
||||
$m-blue-d5: rgb(0,158,231) !default;
|
||||
$m-blue-d3: rgb(18, 111, 154) !default;
|
||||
$m-blue-d4: rgb(10, 74, 103) !default;
|
||||
$m-blue-d5: rgb(0, 158, 231) !default;
|
||||
$m-blue-d6: #256a97 !default;
|
||||
$m-blue-t0: rgba($m-blue,0.125) !default;
|
||||
$m-blue-t1: rgba($m-blue,0.25) !default;
|
||||
$m-blue-t2: rgba($m-blue,0.50) !default;
|
||||
$m-blue-t3: rgba($m-blue,0.75) !default;
|
||||
$m-blue-t0: rgba($m-blue, 0.125) !default;
|
||||
$m-blue-t1: rgba($m-blue, 0.25) !default;
|
||||
$m-blue-t2: rgba($m-blue, 0.5) !default;
|
||||
$m-blue-t3: rgba($m-blue, 0.75) !default;
|
||||
|
||||
$m-pink: $uxpl-pink-base; // uxpl pink base
|
||||
$m-pink-l1: rgb(202,47,115) !default;
|
||||
$m-pink-l2: rgb(211,63,128) !default;
|
||||
$m-pink-l3: rgb(215,84,142) !default;
|
||||
$m-pink-l4: tint($m-pink,75%) !default;
|
||||
$m-pink-l5: tint($m-pink,85%) !default;
|
||||
$m-pink-d1: rgb(160,37,91) !default;
|
||||
$m-pink-d2: rgb(140,32,79) !default;
|
||||
$m-pink-d3: rgb(119,28,68) !default;
|
||||
$m-pink-l1: rgb(202, 47, 115) !default;
|
||||
$m-pink-l2: rgb(211, 63, 128) !default;
|
||||
$m-pink-l3: rgb(215, 84, 142) !default;
|
||||
$m-pink-l4: tint($m-pink, 75%) !default;
|
||||
$m-pink-l5: tint($m-pink, 85%) !default;
|
||||
$m-pink-d1: rgb(160, 37, 91) !default;
|
||||
$m-pink-d2: rgb(140, 32, 79) !default;
|
||||
$m-pink-d3: rgb(119, 28, 68) !default;
|
||||
|
||||
$m-green: $uxpl-green-base; // uxpl green base
|
||||
$m-green-s1: rgb(96, 188, 97) !default;
|
||||
$m-green-l1: tint($m-green,20%) !default;
|
||||
$m-green-l2: tint($m-green,40%) !default;
|
||||
$m-green-l3: tint($m-green,60%) !default;
|
||||
$m-green-l4: tint($m-green,90%) !default;
|
||||
$m-green-l5: tint($m-green,95%) !default;
|
||||
$m-green-d1: shade($m-green,20%) !default;
|
||||
$m-green-d2: shade($m-green,40%) !default;
|
||||
$m-green-d3: shade($m-green,60%) !default;
|
||||
$m-green-d4: shade($m-green,90%) !default;
|
||||
$m-green-t0: rgba($m-green,0.125) !default;
|
||||
$m-green-t1: rgba($m-green,0.25) !default;
|
||||
$m-green-t2: rgba($m-green,0.50) !default;
|
||||
$m-green-t3: rgba($m-green,0.75) !default;
|
||||
$m-green-l1: tint($m-green, 20%) !default;
|
||||
$m-green-l2: tint($m-green, 40%) !default;
|
||||
$m-green-l3: tint($m-green, 60%) !default;
|
||||
$m-green-l4: tint($m-green, 90%) !default;
|
||||
$m-green-l5: tint($m-green, 95%) !default;
|
||||
$m-green-d1: shade($m-green, 20%) !default;
|
||||
$m-green-d2: shade($m-green, 40%) !default;
|
||||
$m-green-d3: shade($m-green, 60%) !default;
|
||||
$m-green-d4: shade($m-green, 90%) !default;
|
||||
$m-green-t0: rgba($m-green, 0.125) !default;
|
||||
$m-green-t1: rgba($m-green, 0.25) !default;
|
||||
$m-green-t2: rgba($m-green, 0.5) !default;
|
||||
$m-green-t3: rgba($m-green, 0.75) !default;
|
||||
|
||||
// edx-specific: verified
|
||||
$verified-color-lvl1: $m-green !default;
|
||||
@@ -351,7 +351,7 @@ $audit-color-lvl1: rgb(221, 221, 221) !default;
|
||||
$audit-color-lvl2: tint($audit-color-lvl1, 33%) !default;
|
||||
|
||||
// edx-specific: credit
|
||||
$credit-color-base: rgb(244,195,0) !default; // accessible with black text
|
||||
$credit-color-base: rgb(244, 195, 0) !default; // accessible with black text
|
||||
|
||||
// edx-specific: Studio/Staff actions
|
||||
$staff-color: $uxpl-pink-base !default;
|
||||
@@ -386,11 +386,11 @@ $support-form-base-font-size: 16px;
|
||||
// ----------------------------
|
||||
// #TIMING
|
||||
// ----------------------------
|
||||
$tmg-s3: 3.0s !default;
|
||||
$tmg-s2: 2.0s !default;
|
||||
$tmg-s1: 1.0s !default;
|
||||
$tmg-s3: 3s !default;
|
||||
$tmg-s2: 2s !default;
|
||||
$tmg-s1: 1s !default;
|
||||
$tmg-avg: 0.75s !default;
|
||||
$tmg-f1: 0.50s !default;
|
||||
$tmg-f1: 0.5s !default;
|
||||
$tmg-f2: 0.25s !default;
|
||||
$tmg-f3: 0.125s !default;
|
||||
|
||||
@@ -405,43 +405,43 @@ $form-bg-color: $white !default;
|
||||
// ----------------------------
|
||||
// font sizes
|
||||
$body-font-size: em(14) !default;
|
||||
$body-line-height: golden-ratio(.875em, 1) !default;
|
||||
$body-line-height: golden-ratio(0.875em, 1) !default;
|
||||
|
||||
// font colors
|
||||
$base-font-color: rgb(60,60,60) !default;
|
||||
$base-font-color: rgb(60, 60, 60) !default;
|
||||
$baseFontColor: $base-font-color !default;
|
||||
$darkest-base-font-color: $black !default;
|
||||
$lighter-base-font-color: rgb(100,100,100) !default;
|
||||
$lighter-base-font-color: rgb(100, 100, 100) !default;
|
||||
$lightest-base-font-color: $gray; // Lightest font that can be used on a white background
|
||||
$very-light-text: rgb(255,255,255) !default;
|
||||
$very-light-text: rgb(255, 255, 255) !default;
|
||||
$text-color: rgb(51, 51, 51) !default;
|
||||
|
||||
// borders
|
||||
$border-color-1: rgb(190,190,190) !default;
|
||||
$border-color-2: rgb(200,200,200) !default;
|
||||
$border-color-3: rgb(100,100,100) !default;
|
||||
$border-color-4: rgb(252,252,252) !default;
|
||||
$border-color-1: rgb(190, 190, 190) !default;
|
||||
$border-color-2: rgb(200, 200, 200) !default;
|
||||
$border-color-3: rgb(100, 100, 100) !default;
|
||||
$border-color-4: rgb(252, 252, 252) !default;
|
||||
$border-color-l1: $m-gray-l1 !default;
|
||||
$border-color-l2: $m-gray-l2 !default;
|
||||
$border-color-l3: $m-gray-l3 !default;
|
||||
$border-color-l4: $m-gray-l4 !default;
|
||||
|
||||
// visual horizontal rules
|
||||
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)) !default;
|
||||
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)) !default;
|
||||
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)) !default;
|
||||
$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0)) !default;
|
||||
$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)) !default;
|
||||
$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)) !default;
|
||||
$faded-hr-image-1: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1) 50%, rgba(200, 200, 200, 0)) !default;
|
||||
$faded-hr-image-2: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, rgba(200, 200, 200, 1)) !default;
|
||||
$faded-hr-image-3: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 0)) !default;
|
||||
$faded-hr-image-4: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 50%, rgba(240, 240, 240, 0)) !default;
|
||||
$faded-hr-image-5: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)) !default;
|
||||
$faded-hr-image-6: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)) !default;
|
||||
|
||||
// notifications
|
||||
$notify-banner-bg-1: rgb(56,56,56) !default;
|
||||
$notify-banner-bg-2: rgb(136,136,136) !default;
|
||||
$notify-banner-bg-1: rgb(56, 56, 56) !default;
|
||||
$notify-banner-bg-2: rgb(136, 136, 136) !default;
|
||||
$notify-banner-bg-3: $shadow-l2 !default;
|
||||
$msg-bg: $m-blue-d3 !default;
|
||||
|
||||
// actions
|
||||
$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%) !default;
|
||||
$button-bg-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(250, 250, 250) 50%, rgb(237, 237, 237) 50%, rgb(220, 220, 220) 100%) !default;
|
||||
$button-bg-color: transparent !default;
|
||||
$button-bg-hover-color: $white !default;
|
||||
|
||||
@@ -479,17 +479,17 @@ $link-color-d1: $link-color !default;
|
||||
$link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/
|
||||
$site-status-color: $pink !default;
|
||||
$button-color: $uxpl-blue-base !default;
|
||||
$button-archive-color: rgb(238,238,238) !default; // #eeeeee
|
||||
$button-archive-color: rgb(238, 238, 238) !default; // #eeeeee
|
||||
|
||||
// larger, random elements
|
||||
$dark-trans-bg: rgba(0, 0, 0, .75) !default;
|
||||
$dark-trans-bg: rgba(0, 0, 0, 0.75) !default;
|
||||
|
||||
$body-bg: $uxpl-grayscale-x-back !default;
|
||||
|
||||
$container-bg: $white !default;
|
||||
|
||||
// header
|
||||
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default;
|
||||
$header-image: linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 0.9)) !default;
|
||||
$header-bg: $white !default;
|
||||
$header-border-color: $blue !default;
|
||||
$header-graphic-super-color: $m-blue-d1 !default;
|
||||
@@ -503,17 +503,17 @@ $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0 !default;
|
||||
|
||||
// modal
|
||||
$shadow-color: $blue !default;
|
||||
$modal-bg-color: rgb(245,245,245) !default;
|
||||
$modal-bg-color: rgb(245, 245, 245) !default;
|
||||
|
||||
// courseware elements
|
||||
$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238)) !default;
|
||||
$courseware-header-image: linear-gradient(top, rgb(255, 255, 255), rgb(238, 238, 238)) !default;
|
||||
$courseware-header-bg: transparent !default;
|
||||
$courseware-footer-border: none !default;
|
||||
$courseware-footer-shadow: none !default;
|
||||
$courseware-footer-margin: 0 !default;
|
||||
$courseware-border-bottom-color: rgb(68,162,222) !default;
|
||||
$courseware-button-border-color: rgb(230,230,230) !default;
|
||||
$courseware-hover-color: rgb(51,52,53) !default;
|
||||
$courseware-border-bottom-color: rgb(68, 162, 222) !default;
|
||||
$courseware-button-border-color: rgb(230, 230, 230) !default;
|
||||
$courseware-hover-color: rgb(51, 52, 53) !default;
|
||||
$courseware-navigation-color: $uxpl-blue-base !default;
|
||||
|
||||
// homepage, onboarding, and course discovery
|
||||
@@ -533,9 +533,9 @@ $passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-backgroun
|
||||
$video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg' !default;
|
||||
|
||||
// dashboard elements
|
||||
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)) !default;
|
||||
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255, 255, 255), rgb(245, 245, 245)) !default;
|
||||
$dashboard-profile-header-color: transparent !default;
|
||||
$dashboard-profile-color: rgb(252,252,252) !default;
|
||||
$dashboard-profile-color: rgb(252, 252, 252) !default;
|
||||
$dot-color: rgb(221, 221, 221) !default;
|
||||
$dashboard-course-cover-border: rgb(221, 221, 221) !default;
|
||||
|
||||
@@ -557,17 +557,17 @@ $learner-profile-container-flex: 768px;
|
||||
$content-wrapper-bg: $white !default;
|
||||
$course-bg-color: $uxpl-grayscale-x-back !default;
|
||||
$account-content-wrapper-bg: shade($body-bg, 2%) !default;
|
||||
$course-profile-bg: rgb(245,245,245) !default;
|
||||
$course-header-bg: rgba(255,255,255, 0.93) !default;
|
||||
$course-profile-bg: rgb(245, 245, 245) !default;
|
||||
$course-header-bg: rgba(255, 255, 255, 0.93) !default;
|
||||
|
||||
// search/listing results
|
||||
$result-highlight-color-base: rgba($highlight-color, 0.25) !default;
|
||||
|
||||
// sidebar
|
||||
$sidebar-chapter-bg-top: rgba(255, 255, 255, .5) !default;
|
||||
$sidebar-chapter-bg-top: rgba(255, 255, 255, 0.5) !default;
|
||||
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0) !default;
|
||||
$sidebar-chapter-bg: rgb(246,246,246) !default;
|
||||
$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214)) !default;
|
||||
$sidebar-chapter-bg: rgb(246, 246, 246) !default;
|
||||
$sidebar-active-image: linear-gradient(top, rgb(230, 230, 230), rgb(214, 214, 214)) !default;
|
||||
|
||||
|
||||
// student notes
|
||||
@@ -586,9 +586,9 @@ $sidebar-color: rgb(246, 246, 246) !default;
|
||||
$outer-border-color: $gray-l3 !default;
|
||||
|
||||
// used by descriptor css
|
||||
$lightGrey: rgb(237,241,245) !default;
|
||||
$lightGrey: rgb(237, 241, 245) !default;
|
||||
$mediumGrey: #ced2db !default;
|
||||
$darkGrey: rgb(136,145,161) !default;
|
||||
$darkGrey: rgb(136, 145, 161) !default;
|
||||
$extraDarkGrey: #3d4043 !default;
|
||||
$lightGrey1: $gray-l3 !default;
|
||||
$paleYellow: #fffcf1 !default;
|
||||
|
||||
@@ -99,14 +99,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav-item{
|
||||
.tab-nav-item {
|
||||
@include float(left);
|
||||
|
||||
display: flex;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
|
||||
.tab-nav-link{
|
||||
.tab-nav-link {
|
||||
font-size: font-size(base);
|
||||
font-weight: font-weight(semi-bold);
|
||||
color: palette(grayscale, dark);
|
||||
@@ -120,7 +120,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
.active {
|
||||
border-bottom: 4px solid $black-t3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
&::before {
|
||||
@include background-image(
|
||||
radial-gradient(
|
||||
50% 50%, circle closest-side,
|
||||
50% 50%, circle closest-side,
|
||||
$white-opacity-80 0%,
|
||||
$white-transparent 100%
|
||||
)
|
||||
@@ -77,7 +77,7 @@
|
||||
hr {
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
180deg,
|
||||
180deg,
|
||||
$white-transparent 0%,
|
||||
$white-opacity-80 50%,
|
||||
$white-transparent
|
||||
@@ -94,7 +94,7 @@
|
||||
&::after {
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
180deg,
|
||||
180deg,
|
||||
$light-grey-transparent 0%,
|
||||
$light-grey-solid 50%,
|
||||
$light-grey-transparent
|
||||
|
||||
@@ -41,7 +41,7 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
|
||||
$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
|
||||
$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
|
||||
|
||||
$black: rgb(0,0,0) !default;
|
||||
$black: rgb(0, 0,0) !default;
|
||||
$black-t0: rgba($black, 0.125) !default;
|
||||
$black-t1: rgba($black, 0.25) !default;
|
||||
$black-t2: rgba($black, 0.5) !default;
|
||||
@@ -71,7 +71,7 @@ $lms-dark-icon-background-color: palette(grayscale, black) !default;
|
||||
|
||||
$site-status-color: rgb(182,37,103) !default;
|
||||
|
||||
$shadow-l1: rgba(0,0,0,0.1) !default;
|
||||
$shadow-l1: rgba(0, 0,0, 0.1) !default;
|
||||
|
||||
$error-color: rgb(203, 7, 18) !default;
|
||||
$warning-color: rgb(255, 192, 31) !default;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
z-index: 9;
|
||||
|
||||
&.fixed-top {
|
||||
box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
|
||||
box-shadow: 0 1px 15px 0 rgba(0, 0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
|
||||
max-width: 1200px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
|
||||
box-shadow: 0 1px 10px 0 rgba(0, 0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
|
||||
margin-bottom: ($baseline*1.5);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -68,11 +68,11 @@
|
||||
.meta-info {
|
||||
background: $dark-trans-bg;
|
||||
bottom: 6px;
|
||||
border: 1px solid rgba(0,0,0, 0.5);
|
||||
border: 1px solid rgba(0, 0,0, 0.5);
|
||||
|
||||
@include border-right-radius(2px);
|
||||
|
||||
box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15);
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0,0, 0.15);
|
||||
|
||||
@include clearfix();
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ input[type="tel"] {
|
||||
|
||||
&:focus {
|
||||
border-color: darken($button-archive-color, 50%);
|
||||
box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15);
|
||||
box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0, 0,0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
.user-dropdown-menu, .dropdown-menu {
|
||||
background: $white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0,0, 0.3);
|
||||
border: 1px solid $gray-l3;
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
@@ -295,7 +295,7 @@
|
||||
|
||||
@include float(left);
|
||||
|
||||
.tab-nav-item{
|
||||
.tab-nav-item {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
@@ -304,19 +304,19 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.tab-nav-link{
|
||||
.tab-nav-link {
|
||||
font-size: em(16);
|
||||
color: $gray;
|
||||
padding: 5px 25px 23px;
|
||||
display: inline-block;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
border-bottom: 4px solid $courseware-border-bottom-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
.active {
|
||||
border-bottom: 4px solid $black-t3 !important;
|
||||
}
|
||||
}
|
||||
@@ -437,7 +437,7 @@
|
||||
.nav-global {
|
||||
@include float(left);
|
||||
|
||||
.tab-nav-item{
|
||||
.tab-nav-item {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
@@ -446,19 +446,19 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
.tab-nav-link{
|
||||
.tab-nav-link {
|
||||
font-size: em(16);
|
||||
color: $gray;
|
||||
display: inline-block;
|
||||
padding: 5px 25px 19px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
border-bottom: 4px solid $courseware-border-bottom-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
.active {
|
||||
border-bottom: 4px solid $black-t3 !important;
|
||||
}
|
||||
}
|
||||
@@ -624,7 +624,7 @@
|
||||
.user-dropdown-menu, .dropdown-menu {
|
||||
background: $border-color-4;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
|
||||
box-shadow: 0 2px 24px 0 rgba(0, 0,0, 0.3);
|
||||
border: 1px solid $border-color-3;
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
border-bottom: 4px solid $courseware-border-bottom-color !important;
|
||||
}
|
||||
|
||||
&.active{
|
||||
&.active {
|
||||
border-bottom: 4px solid $black-t3 !important;
|
||||
}
|
||||
}
|
||||
@@ -138,11 +138,11 @@
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
&::-ms-expand{
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
~ .icon-caret-down{
|
||||
~ .icon-caret-down {
|
||||
&::after {
|
||||
content: "";
|
||||
border-left: 6px solid transparent;
|
||||
|
||||
@@ -936,7 +936,7 @@ $light-border: 1px solid $gray-l5;
|
||||
}
|
||||
}
|
||||
|
||||
.error-text{
|
||||
.error-text {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: block;
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
.page-header.has-secondary {
|
||||
.page-header-main {
|
||||
display: inline-block;
|
||||
width: flex-grid(8,12);
|
||||
width: flex-grid(8, 12);
|
||||
}
|
||||
|
||||
.page-header-secondary {
|
||||
|
||||
@@ -516,7 +516,7 @@
|
||||
|
||||
.wrapper-sts {
|
||||
display: inline-block;
|
||||
width: flex-grid(9,12);
|
||||
width: flex-grid(9, 12);
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
@@ -1226,6 +1226,7 @@
|
||||
.copy {
|
||||
@extend %t-copy-lead1;
|
||||
@extend %t-weight4;
|
||||
|
||||
@include left(calc(50% - 46px));
|
||||
|
||||
position: absolute;
|
||||
|
||||
@@ -13,7 +13,7 @@ set -e
|
||||
# Violations thresholds for failing the build
|
||||
export PYLINT_THRESHOLD=3600
|
||||
export ESLINT_THRESHOLD=9134
|
||||
export STYLELINT_THRESHOLD=5155
|
||||
export STYLELINT_THRESHOLD=1942
|
||||
|
||||
XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
|
||||
export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
// Certificate overrides for edge.edx.org
|
||||
|
||||
.certificate-card {
|
||||
// Note: edx.org no longer supports audit certificates, but there are
|
||||
// legacy certificates that might be rendered. In this situation, they
|
||||
// are styled as honor certificates.
|
||||
&.mode-honor, &.mode-audit {
|
||||
border-color: $honor-mode-color;
|
||||
// Note: edx.org no longer supports audit certificates, but there are
|
||||
// legacy certificates that might be rendered. In this situation, they
|
||||
// are styled as honor certificates.
|
||||
&.mode-honor, &.mode-audit {
|
||||
border-color: $honor-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/verified.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/verified.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
// Certificate overrides for edx.org
|
||||
|
||||
.certificate-card {
|
||||
// Note: edx.org no longer supports audit certificates, but there are
|
||||
// legacy certificates that might be rendered. In this situation, they
|
||||
// are styled as honor certificates.
|
||||
&.mode-honor, &.mode-audit {
|
||||
border-color: $honor-mode-color;
|
||||
// Note: edx.org no longer supports audit certificates, but there are
|
||||
// legacy certificates that might be rendered. In this situation, they
|
||||
// are styled as honor certificates.
|
||||
&.mode-honor, &.mode-audit {
|
||||
border-color: $honor-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/honor.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/verified.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/verified.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/professional.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
// Certificate overrides for the red theme
|
||||
|
||||
.certificate-card {
|
||||
&.mode-audit {
|
||||
border-color: $audit-mode-color;
|
||||
&.mode-audit {
|
||||
border-color: $audit-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-honor {
|
||||
border-color: $honor-mode-color;
|
||||
&.mode-honor {
|
||||
border-color: $honor-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
&.mode-verified {
|
||||
border-color: $verified-mode-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
&.mode-professional {
|
||||
border-color: $professional-certificate-color;
|
||||
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
.card-logo {
|
||||
background-image: url('#{$static-path}/images/certificates/red-certificate.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user