-@import '_variables';
-@import '_mixins';
+// Bootstrap grid utilities require functions, variables and mixins
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/grid';
+
+@import 'variables';
+@import 'mixins';
label {
font-weight: $font-regular;
}
.title-page a {
- color: var(--mainForegroundColor);
+ color: pvar(--mainForegroundColor);
&:hover {
text-decoration: none;
.captions-header {
text-align: right;
+ margin-bottom: 1rem;
.create-caption {
@include create-button;
a.caption-entry-label {
@include disable-default-a-behaviour;
+ flex-grow: 1;
color: #000;
&:hover {
display: inline-block;
margin-right: 25px;
- color: $grey-foreground-color;
+ color: pvar(--greyForegroundColor);
font-size: 15px;
}
}
}
-@include ng2-tags
+@include ng2-tags;
+
+// columns for the video
+.col-video-edit {
+ @include make-col-ready();
+
+ @include media-breakpoint-up(md) {
+ @include make-col(7);
+
+ & + .col-video-edit {
+ @include make-col(5);
+ }
+ }
+
+ @include media-breakpoint-up(xl) {
+ @include make-col(8);
+
+ & + .col-video-edit {
+ @include make-col(4);
+ }
+ }
+}
+
+:host-context(.expanded) {
+ .col-video-edit {
+ @include media-breakpoint-up(md) {
+ @include make-col(8);
+
+ & + .col-video-edit {
+ @include make-col(4);
+ }
+ }
+ }
+}