Make the course content page responsive
LEARNER-2754
This commit is contained in:
Andy Armstrong
@@ -12,12 +12,12 @@ $annotatable--body-font-size: em(14);
|
||||
}
|
||||
|
||||
.annotatable-header {
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.annotatable-section {
|
||||
position: relative;
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid $annotatable--border-color;
|
||||
border-radius: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
@@ -55,8 +55,8 @@ $annotatable--body-font-size: em(14);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 2px 1em 2px 0;
|
||||
&.expanded:after { content: " \2191" }
|
||||
&.collapsed:after { content: " \2193" }
|
||||
&.expanded::after { content: " \2191"; }
|
||||
&.collapsed::after { content: " \2193"; }
|
||||
}
|
||||
|
||||
.annotatable-span {
|
||||
@@ -75,9 +75,9 @@ $annotatable--body-font-size: em(14);
|
||||
(purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
|
||||
|
||||
$highlight_index: $highlight_index + 1;
|
||||
$marker: nth($highlight,1);
|
||||
$color: nth($highlight,2);
|
||||
$selected_color: nth($highlight,3);
|
||||
$marker: nth($highlight, 1);
|
||||
$color: nth($highlight, 2);
|
||||
$selected_color: nth($highlight, 3);
|
||||
|
||||
@if $highlight_index == 1 {
|
||||
&.highlight {
|
||||
@@ -177,7 +177,7 @@ $annotatable--body-font-size: em(14);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
|
||||
// +Variables - Capa
|
||||
// ====================
|
||||
$annotation-yellow: rgba(255, 255,10, 0.3);
|
||||
$color-copy-tip: rgb(100,100,100);
|
||||
$annotation-yellow: rgba(255, 255, 10, 0.3);
|
||||
$color-copy-tip: rgb(100, 100, 100);
|
||||
|
||||
// FontAwesome Icon code
|
||||
// ====================
|
||||
@@ -45,9 +45,9 @@ $asterisk-icon: '\f069'; // .fa-asterisk
|
||||
|
||||
// +Mixins - Status Icon - Capa
|
||||
// ====================
|
||||
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
|
||||
@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
|
||||
.status-icon {
|
||||
&:after {
|
||||
&::after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
color: $color;
|
||||
@@ -219,7 +219,7 @@ div.problem {
|
||||
padding: ($baseline/2);
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include margin-left($baseline*0.75);
|
||||
}
|
||||
|
||||
@@ -365,7 +365,7 @@ div.problem {
|
||||
div.problem {
|
||||
ol.enumerate {
|
||||
li {
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
@@ -456,7 +456,7 @@ div.problem {
|
||||
margin-top: ($baseline / 2);
|
||||
margin-bottom: 0;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: inline;
|
||||
@@ -465,7 +465,7 @@ div.problem {
|
||||
}
|
||||
|
||||
&:empty {
|
||||
&:before {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -845,7 +845,7 @@ div.problem {
|
||||
|
||||
.status {
|
||||
.status-icon {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
@@ -871,11 +871,11 @@ div.problem {
|
||||
.indicator-container {
|
||||
display: inline-block;
|
||||
|
||||
.status.correct:after,
|
||||
.status.partially-correct:after,
|
||||
.status.incorrect:after,
|
||||
.status.submitted:after,
|
||||
.status.unanswered:after {
|
||||
.status.correct::after,
|
||||
.status.partially-correct::after,
|
||||
.status.incorrect::after,
|
||||
.status.submitted::after,
|
||||
.status.unanswered::after {
|
||||
@include margin-left(0);
|
||||
}
|
||||
}
|
||||
@@ -1485,7 +1485,7 @@ div.problem {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a.annotation-return:after { content: " \2191" }
|
||||
a.annotation-return::after { content: " \2191" }
|
||||
|
||||
.block, ul.tags {
|
||||
margin: .5em 0;
|
||||
@@ -1557,7 +1557,7 @@ div.problem {
|
||||
|
||||
pre { background-color: $gray-l3; color: $black; }
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
@extend %t-strong;
|
||||
|
||||
display: block;
|
||||
@@ -1603,7 +1603,7 @@ div.problem {
|
||||
}
|
||||
|
||||
label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
|
||||
&:after {
|
||||
&::after {
|
||||
@include margin-left($baseline*0.75);
|
||||
|
||||
content: url('#{$static-path}/images/correct-icon.png');
|
||||
|
||||
@@ -19,7 +19,10 @@ h2 {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include margin(0, 0, ($baseline/2), 0);
|
||||
|
||||
font-weight: 600;
|
||||
@@ -34,7 +37,7 @@ h4 {
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: .83em;
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@@ -48,7 +51,8 @@ p {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
em, i {
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
|
||||
span {
|
||||
@@ -56,7 +60,8 @@ em, i {
|
||||
}
|
||||
}
|
||||
|
||||
strong, b {
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
@@ -64,7 +69,9 @@ strong, b {
|
||||
}
|
||||
}
|
||||
|
||||
p + p, ul + p, ol + p {
|
||||
p + p,
|
||||
ul + p,
|
||||
ol + p {
|
||||
margin-top: $baseline;
|
||||
}
|
||||
|
||||
@@ -72,7 +79,8 @@ blockquote {
|
||||
margin: 1em ($baseline*2);
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
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);
|
||||
|
||||
@@ -93,7 +101,11 @@ ul {
|
||||
}
|
||||
|
||||
a {
|
||||
&:link, &:visited, &:hover, &:active, &:focus {
|
||||
&:link,
|
||||
&:visited,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
@@ -124,7 +136,8 @@ table {
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
margin: $baseline 0;
|
||||
padding: ($baseline/2);
|
||||
border: 1px solid $gray-l3;
|
||||
@@ -162,37 +175,37 @@ th {
|
||||
display: block;
|
||||
padding: ($baseline/4) 7px;
|
||||
border-radius: 5px;
|
||||
opacity: .9;
|
||||
opacity: 0.9;
|
||||
background: $white;
|
||||
color: $black;
|
||||
border: 2px solid $black;
|
||||
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-link {
|
||||
@extend %ui-fake-link;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
|
||||
.action-fullscreen {
|
||||
display: none;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
&:hover .action-fullscreen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-modal {
|
||||
@extend %ui-fake-link;
|
||||
@extend %ui-depth5;
|
||||
@@ -204,7 +217,7 @@ th {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
|
||||
.image-content {
|
||||
position: relative;
|
||||
top: 2.5%;
|
||||
@@ -213,10 +226,10 @@ th {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -226,12 +239,12 @@ th {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-close {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.image-controls {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
@@ -239,16 +252,16 @@ th {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
.image-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
.modal-ui-icon {
|
||||
position: relative;
|
||||
|
||||
|
||||
&.action-zoom-in {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
@@ -265,17 +278,17 @@ th {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.image-is-fit-to-screen {
|
||||
display: block;
|
||||
|
||||
|
||||
// !important used here to override jQuery.
|
||||
.image-content .image-wrapper {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
|
||||
img {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
@@ -285,7 +298,7 @@ th {
|
||||
|
||||
&.image-is-zoomed {
|
||||
display: block;
|
||||
|
||||
|
||||
.image-content .image-wrapper {
|
||||
img {
|
||||
max-width: none;
|
||||
|
||||
@@ -179,7 +179,7 @@ div.poll_question {
|
||||
|
||||
.percent {
|
||||
background-color: gray;
|
||||
width: 0px;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
|
||||
&.short { }
|
||||
@@ -202,16 +202,16 @@ div.poll_question {
|
||||
}
|
||||
|
||||
.poll_answer.answered {
|
||||
-webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
|
||||
-webkit-box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
|
||||
background-color: rgb(29, 157, 217);
|
||||
background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
|
||||
border-bottom-color: rgb(13, 114, 162);
|
||||
border-left-color: rgb(13, 114, 162);
|
||||
border-right-color: rgb(13, 114, 162);
|
||||
border-top-color: rgb(13, 114, 162);
|
||||
box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
|
||||
box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: rgb(7, 103, 148) 0px 1px 0px;
|
||||
text-shadow: rgb(7, 103, 148) 0 1px 0;
|
||||
}
|
||||
|
||||
.button.reset-button {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
background-color: $white;
|
||||
overflow: hidden;
|
||||
|
||||
@include transition(width .3s linear 0s);
|
||||
@include transition(width 0.3s linear 0s);
|
||||
|
||||
&.shown {
|
||||
width: 20%;
|
||||
@@ -108,7 +108,7 @@
|
||||
|
||||
.problem-editor {
|
||||
// adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
|
||||
.markdown-box+.CodeMirror {
|
||||
.markdown-box + .CodeMirror {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,8 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@@ -32,14 +33,15 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%ui-clear-button {
|
||||
%ui-clear-button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: center 14px;
|
||||
@@ -60,16 +62,13 @@ $seq-nav-height: 44px;
|
||||
.sequence-nav {
|
||||
@extend .topbar;
|
||||
|
||||
margin: 0 0 $baseline 0;
|
||||
margin: 0 auto $baseline;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
z-index: 0;
|
||||
height: $seq-nav-height;
|
||||
display: flex;
|
||||
|
||||
.sequence-nav-button {
|
||||
max-width: 200px;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
@@ -81,6 +80,11 @@ $seq-nav-height: 44px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
@@ -88,7 +92,7 @@ $seq-nav-height: 44px;
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
min-width: 20px;
|
||||
min-width: 40px;
|
||||
flex-grow: 1;
|
||||
border-color: $seq-nav-border-color;
|
||||
border-width: 1px;
|
||||
@@ -127,28 +131,28 @@ $seq-nav-height: 44px;
|
||||
|
||||
//video
|
||||
&.seq_video {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f008"; // .fa-film
|
||||
}
|
||||
}
|
||||
|
||||
//other
|
||||
&.seq_other {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f02d"; // .fa-book
|
||||
}
|
||||
}
|
||||
|
||||
//vertical
|
||||
&.seq_vertical {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f00b"; // .fa-tasks
|
||||
}
|
||||
}
|
||||
|
||||
//problems
|
||||
&.seq_problem {
|
||||
.icon:before {
|
||||
.icon::before {
|
||||
content: "\f044"; // .fa-pencil-square-o
|
||||
}
|
||||
}
|
||||
@@ -207,38 +211,60 @@ $seq-nav-height: 44px;
|
||||
|
||||
display: block;
|
||||
top: 0;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
height: 100%;
|
||||
text-shadow: none; // overrides default button text-shadow
|
||||
background: none; // overrides default button gradient
|
||||
background-color: white;
|
||||
background-color: theme-color("inverse");
|
||||
border-color: $seq-nav-border-color;
|
||||
box-shadow: none;
|
||||
min-width: 120px;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
padding: 0 $baseline;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
span:not(:last-child) {
|
||||
@include padding-right($baseline / 2);
|
||||
@include media-breakpoint-up(md) {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span:not(:last-child) {
|
||||
@include padding-right($baseline / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.sequence-nav-button-label {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-previous {
|
||||
@include left(0);
|
||||
@include border-top-left-radius(3px);
|
||||
@include border-top-right-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
@include border-bottom-left-radius(3px);
|
||||
order: -999;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include left(0);
|
||||
@include border-top-left-radius(3px);
|
||||
@include border-top-right-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
@include border-bottom-left-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-next {
|
||||
@include right(0);
|
||||
@include border-top-left-radius(0);
|
||||
@include border-top-right-radius(3px);
|
||||
@include border-bottom-right-radius(3px);
|
||||
@include border-bottom-left-radius(0);
|
||||
order: 999;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include right(0);
|
||||
@include border-top-left-radius(0);
|
||||
@include border-top-right-radius(3px);
|
||||
@include border-bottom-right-radius(3px);
|
||||
@include border-bottom-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@@ -250,7 +276,7 @@ $seq-nav-height: 44px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.sequence-bottom {
|
||||
.sequence-bottom {
|
||||
position: relative;
|
||||
height: 45px;
|
||||
margin: lh(2) auto;
|
||||
@@ -259,6 +285,9 @@ nav.sequence-bottom {
|
||||
|
||||
.sequence-nav-button {
|
||||
position: relative;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:last-of-type {
|
||||
@include border-left(none);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.editor{
|
||||
.editor {
|
||||
@include clearfix();
|
||||
|
||||
.CodeMirror {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings)
|
||||
|
||||
|
||||
.tabs-wrapper{
|
||||
.tabs-wrapper {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
a.tab {
|
||||
@include font-size(14);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
|
||||
border: 1px solid $blue-d1;
|
||||
border-radius: 3px;
|
||||
@@ -83,7 +83,8 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: inset 0 1px 2px 1px $shadow;
|
||||
background-image: linear-gradient(#009fe6, #009fe6) !important;
|
||||
}
|
||||
@@ -106,7 +107,7 @@
|
||||
.comp-subtitles-import-list {
|
||||
> li {
|
||||
display: block;
|
||||
margin: $baseline/2 0px $baseline/2 0;
|
||||
margin: $baseline/2 0;
|
||||
}
|
||||
|
||||
.blue-button {
|
||||
@@ -118,8 +119,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.component-tab {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
$a11y--gray: rgb(127, 127, 127);
|
||||
$a11y--blue: rgb(0, 159, 230);
|
||||
$a11y--gray-d1: shade($gray,20%);
|
||||
$a11y--gray-l2: tint($gray,40%);
|
||||
$a11y--gray-l3: tint($gray,60%);
|
||||
$a11y--blue-s1: saturate($blue,15%);
|
||||
$a11y--gray-d1: shade($gray, 20%);
|
||||
$a11y--gray-l2: tint($gray, 40%);
|
||||
$a11y--gray-l3: tint($gray, 60%);
|
||||
$a11y--blue-s1: saturate($blue, 15%);
|
||||
|
||||
%use-font-awesome {
|
||||
font-family: FontAwesome;
|
||||
@@ -50,12 +50,13 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $a11y--gray-d1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
&.active {
|
||||
a {
|
||||
color: $a11y--blue;
|
||||
}
|
||||
@@ -84,11 +85,10 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
background-color: $action-primary-active-bg;
|
||||
color: $very-light-text;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
color: $very-light-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> a {
|
||||
@@ -106,7 +106,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@extend %use-font-awesome;
|
||||
|
||||
content: "\f0d7";
|
||||
@@ -137,7 +137,8 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
}
|
||||
|
||||
|
||||
.contextmenu, .submenu {
|
||||
.contextmenu,
|
||||
.submenu {
|
||||
@extend %ui-depth5;
|
||||
|
||||
border: 1px solid #333;
|
||||
@@ -157,7 +158,8 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item, .submenu-item {
|
||||
.menu-item,
|
||||
.submenu-item {
|
||||
border-top: 1px solid $gray-l3;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
outline: none;
|
||||
@@ -184,7 +186,7 @@ $a11y--blue-s1: saturate($blue,15%);
|
||||
position: relative;
|
||||
padding: ($baseline/4) $baseline ($baseline/4) ($baseline/2);
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '\25B6';
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
|
||||
@@ -57,7 +57,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.video-player {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
@@ -75,16 +75,18 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.focus_grabber {
|
||||
position: relative;
|
||||
display: inline;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.downloads-heading {
|
||||
margin: 1em 0 0 0;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.wrapper-downloads {
|
||||
display: flex;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hd {
|
||||
margin: 0;
|
||||
@@ -154,8 +156,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
color: theme-color("primary");
|
||||
}
|
||||
|
||||
.btn-play:after {
|
||||
background: $white;
|
||||
.btn-play::after {
|
||||
background: theme-color("inverse");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +178,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
padding: 30px;
|
||||
border-radius: 25%;
|
||||
|
||||
&:after{
|
||||
&::after {
|
||||
@include animation(rotateCW 3s infinite linear);
|
||||
|
||||
content: '';
|
||||
@@ -200,7 +202,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
font-size: 4em;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
background: $white;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
@@ -229,17 +231,17 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
max-height: ($baseline * 3);
|
||||
border-radius: ($baseline / 5);
|
||||
padding: 8px ($baseline / 2) 8px ($baseline * 1.5);
|
||||
background: rgba(0, 0, 0, .75);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: $yellow;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
|
||||
@include left($baseline);
|
||||
|
||||
margin-top: -.6em;
|
||||
margin-top: -0.6em;
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f142";
|
||||
color: $white;
|
||||
@@ -248,11 +250,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&:hover,
|
||||
&.is-dragging {
|
||||
background: rgba(0, 0, 0, 1.0);
|
||||
background: rgba(0, 0, 0, 1);
|
||||
cursor: move;
|
||||
|
||||
&:before {
|
||||
opacity: 1.0;
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -269,7 +271,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
}
|
||||
}
|
||||
|
||||
.video-error, .video-hls-error {
|
||||
.video-error,
|
||||
.video-hls-error {
|
||||
padding: ($baseline / 5);
|
||||
background: black;
|
||||
color: white !important; // the pattern library headings shim is more scoped
|
||||
@@ -355,7 +358,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
.slider {
|
||||
@include clearfix();
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(height .7s ease-in-out 0s);
|
||||
@include transition(height 0.7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
@@ -386,7 +389,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
@extend %ui-fake-link;
|
||||
|
||||
@include transform-origin(bottom left);
|
||||
@include transition(all .7s ease-in-out 0s);
|
||||
@include transition(all 0.7s ease-in-out 0s);
|
||||
|
||||
box-sizing: border-box;
|
||||
top: -1px;
|
||||
@@ -436,13 +439,13 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
@extend %t-strong;
|
||||
@extend %t-title7;
|
||||
|
||||
@include padding-left(lh(.75));
|
||||
@include padding-left(lh(0.75));
|
||||
|
||||
display: inline-block;
|
||||
color: rgb(207, 216, 220); // UXPL grayscale-cool light
|
||||
-webkit-font-smoothing: antialiased;;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
@media (max-width: 1120px) {
|
||||
@include padding-left(lh(0.5));
|
||||
}
|
||||
}
|
||||
@@ -801,7 +804,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
&.closed {
|
||||
.video-wrapper {
|
||||
width: flex-grid(9,9);
|
||||
width: flex-grid(9, 9);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
@@ -846,7 +849,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
&.video-fullscreen {
|
||||
@extend %ui-depth4;
|
||||
|
||||
background: rgba(#000, .95);
|
||||
background: rgba(#000, 0.95);
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
@@ -899,7 +902,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
|
||||
object,
|
||||
iframe,
|
||||
video{
|
||||
video {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@@ -974,7 +977,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
|
||||
background: $black-t2;
|
||||
box-shadow: none;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
// the button class, ties to functionality, also uses an icon font
|
||||
// we're overriding it here so we can use our image instead
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user