437 lines
9.4 KiB
SCSS
437 lines
9.4 KiB
SCSS
@import "bootstrap_overrides";
|
|
@import "bootstrap";
|
|
@import "font-awesome";
|
|
@import "rails_bootstrap_forms";
|
|
@import 'trix/dist/trix';
|
|
@import "dropzone/dist/dropzone";
|
|
@import 'bootstrap-datepicker';
|
|
|
|
// Global styles
|
|
label {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
// Wordmarks
|
|
.suite-wordmark {
|
|
font-weight: normal;
|
|
span:first-child {
|
|
background-color: $red;
|
|
color: white;
|
|
padding: 5px;
|
|
text-transform: uppercase;
|
|
}
|
|
span:last-child {
|
|
color: $body-color;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.product-wordmark {
|
|
span:last-child {
|
|
font-weight: normal;
|
|
margin-left: 5px;
|
|
padding: 0 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&.release-me {
|
|
span:last-child {
|
|
background-color: $teal;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.direct-me {
|
|
span:last-child {
|
|
background-color: $green;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.edit-me {
|
|
span:last-child {
|
|
background-color: $blue;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.deliver-me {
|
|
span:last-child {
|
|
background-color: $purple;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.task-me {
|
|
span:last-child {
|
|
background-color: $yellow;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.cast-me {
|
|
span:last-child {
|
|
background-color: $dark-red;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
span:last-child {
|
|
background-color: $gray-500 !important;
|
|
color: $body-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertically align all direct descendant elements to the middle
|
|
.align-all-middle tr td {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
// Create horizontal padding on table rows by targeting table cells
|
|
@each $name, $value in $spacers {
|
|
.tr-px-#{$name} {
|
|
&, tr {
|
|
th, td {
|
|
&:first-child {
|
|
padding-left: $value;
|
|
}
|
|
&:last-child {
|
|
padding-right: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show the state of a collapse panel using up and down chevron circle icons
|
|
.collapse-indicator {
|
|
cursor: pointer;
|
|
font-family: "FontAwesome";
|
|
|
|
&:after {
|
|
content: "\f13a";
|
|
}
|
|
}
|
|
.collapsed .collapse-indicator:after {
|
|
content: "\f139";
|
|
}
|
|
|
|
// Used for the person photo image upload preview
|
|
.photo-preview {
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
|
|
// Fix for Trix rich text editor element + Bootstrap
|
|
// Allows the text area to scroll as content is added
|
|
trix-editor.form-control {
|
|
height: 15rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Provide some styling for required form fields
|
|
.required small:after, label.required:after {
|
|
color: $red;
|
|
content: "Required";
|
|
margin-left: 5px;
|
|
font-size: 0.5rem;
|
|
}
|
|
html[lang="es"] .required:after {
|
|
content: "Necesario";
|
|
}
|
|
|
|
// Used when a release has been confirmed for a given video
|
|
.releasable[data-confirmed="true"] {
|
|
button {
|
|
border-width: 5px !important;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// Used when a suggested_match has been confirmed for a given video
|
|
.releasable-match[data-confirmed="true"] {
|
|
button {
|
|
border-width: 5px !important;
|
|
}
|
|
}
|
|
|
|
// Overrode the above style for audio matches
|
|
#audio_matches .releasable-match[data-confirmed="true"] {
|
|
button {
|
|
border-width: 1px !important;
|
|
}
|
|
}
|
|
|
|
// Used when hiding checkmark next to releasable-match
|
|
.releasable-match[data-confirmed="false"] [data-ujs-target=match-confirmed-check] {
|
|
display: none;
|
|
}
|
|
|
|
// Used when hiding checkmark next to graphics-match
|
|
.graphics-match[data-confirmed="false"] [data-ujs-target=graphics-confirmed-check] {
|
|
display: none;
|
|
}
|
|
|
|
// Colored borders that correspond to the type of release
|
|
.border-appearance_release {
|
|
border-color: rgb(0,255,0) !important;
|
|
}
|
|
.border-talent_release {
|
|
border-color: rgb(0,0,255) !important;
|
|
}
|
|
|
|
// Used to hide confirmed releases
|
|
.hidden-when-confirmed[data-confirmed="true"] {
|
|
display: none;
|
|
}
|
|
|
|
// Markers
|
|
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'info');
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker:hover .standard-marker-inner,
|
|
.markers-plugin .markers-plugin-markers .standard-marker.bookmark-marker.hover .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'info');
|
|
box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'info'), 0.2);
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearance-marker .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'danger');
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearancebookmark-marker:hover .standard-marker-inner,
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-appearancebookmark-marker.hover .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'danger');
|
|
box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'danger'), 0.2);
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'warning');
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'warning');
|
|
}
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker:hover .standard-marker-inner,
|
|
.markers-plugin .markers-plugin-markers .standard-marker.unreleased-warning-marker.hover .standard-marker-inner {
|
|
background-color: map-get($theme-colors, 'warning');
|
|
box-shadow: 0 0 0 8px rgba(map-get($theme-colors, 'warning'), 0.2);
|
|
}
|
|
|
|
// Uses a dashed border style
|
|
.border-dashed {
|
|
border-style: dashed !important;
|
|
}
|
|
|
|
// Increases the width of the border
|
|
.border-thick {
|
|
border-width: 2px !important;
|
|
}
|
|
.border-thicker {
|
|
border-width: 5px !important;
|
|
}
|
|
|
|
// Style as a keyboard shortcut key
|
|
.keyboard-key {
|
|
background-color: map-get($grays, "100");
|
|
background-image: linear-gradient($white, map-get($grays, "100"));
|
|
border-radius: 3px;
|
|
border: 1px solid map-get($grays, "500");
|
|
color: $black;
|
|
font-family: $font-family-monospace;
|
|
font-size: $font-size-sm;
|
|
padding: map-get($spacers, 1);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// Remove default button styles
|
|
.btn-no-style {
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
}
|
|
|
|
// Cursors
|
|
.cursor-copy {
|
|
cursor: copy;
|
|
}
|
|
.cursor-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// These borders only appear when an element is hovered
|
|
@each $color, $value in $theme-colors {
|
|
.border-hover-#{$color}:hover {
|
|
border-color: $value !important;
|
|
}
|
|
}
|
|
|
|
// Customized tooltip colors
|
|
@each $color, $value in $theme-colors {
|
|
.tooltip-#{$color} {
|
|
& > .tooltip-inner {
|
|
background-color: $value;
|
|
}
|
|
&.bs-tooltip-top > .arrow::before {
|
|
border-top-color: $value;
|
|
}
|
|
&.bs-tooltip-right > .arrow::before {
|
|
border-right-color: $value;
|
|
}
|
|
&.bs-tooltip-bottom > .arrow::before {
|
|
border-bottom-color: $value;
|
|
}
|
|
&.bs-tooltip-left > .arrow::before {
|
|
border-left-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fix for custom file input label in an inline form
|
|
.form-inline .custom-file-label {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
// Customized carousel colors
|
|
.carousel-bg-black {
|
|
& > .carousel-inner {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
|
|
// Text size
|
|
.x-small {
|
|
font-size: 60%;
|
|
}
|
|
|
|
// Fix long name wrapping in file inputs
|
|
.custom-file {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hidden-file-input {
|
|
width: 0px;
|
|
height: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-behavior=fillable-fields] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-behavior=seekable-timecode] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Fixes known issue with collapsible elements which don't normally receive click events on iOS
|
|
// https://github.com/twbs/bootstrap/issues/16213#issuecomment-88995656
|
|
[data-toggle=collapse][data-target] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Pins a modal to the right side of the screen on large devices
|
|
.modal-right {
|
|
@include media-breakpoint-up(lg) {
|
|
left: 25%;
|
|
right: 0%;
|
|
}
|
|
}
|
|
|
|
// Provides extra padding to main content area when there is a fixed bottom alert
|
|
.alert.fixed-bottom + main {
|
|
padding-bottom: $alert-padding-y * 5 !important;
|
|
}
|
|
|
|
// Allows <hr> divider to be used on a dark background
|
|
.divider-light {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
// Sets line height to 0
|
|
.no-line-height {
|
|
line-height: 0;
|
|
}
|
|
|
|
// Even lighter text color
|
|
.text-more-muted {
|
|
color: $gray-500 !important;
|
|
}
|
|
|
|
// A dark version of the pills nav
|
|
.nav-pills-dark {
|
|
a {
|
|
color: $gray-500;
|
|
|
|
&:hover {
|
|
background-color: $gray-800;
|
|
color: lighten($gray-500, 15%);
|
|
}
|
|
|
|
&.active {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// A comma separated list
|
|
ul.list-comma-separated {
|
|
li:not(:last-child):after {
|
|
content: ",";
|
|
}
|
|
}
|
|
|
|
a[data-behavior=seekable-timecode] {
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.embeded-contract-preview {
|
|
display: block;
|
|
margin: 0 auto;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
// Border radius
|
|
.rounded-pill-left {
|
|
border-top-left-radius: $rounded-pill;
|
|
border-bottom-left-radius: $rounded-pill;
|
|
}
|
|
.rounded-pill-right {
|
|
border-top-right-radius: $rounded-pill;
|
|
border-bottom-right-radius: $rounded-pill;
|
|
}
|
|
|
|
// A nav-pills component that uses white color for the active element
|
|
.nav-pills-white {
|
|
.nav-link.active,
|
|
.show > .nav-link {
|
|
color: $body-color;
|
|
background-color: $white;
|
|
}
|
|
}
|
|
|
|
// A custom background color that is semi-transparent
|
|
.bg-semi-transparent {
|
|
background-color: rgba($black, 0.05);
|
|
}
|
|
|
|
// Custom width
|
|
.w-65 {
|
|
width: 65% !important;
|
|
}
|
|
|
|
// Maximum height
|
|
.mh-30 {
|
|
max-height: 30rem;
|
|
}
|
|
|
|
// Fix height and width
|
|
.fix-h-and-w {
|
|
width: 308px;
|
|
height:308px;
|
|
}
|