moodle_theme_ilb/scss/moodle/bs4alphacompat.scss

$font-size-xs: ($font-size-base * .75) !default;
$font-size-root: $font-size-base;

$zindex-navbar-fixed: 1030 !default;
$tag-padding-y: .25rem !default;

/* stylelint-disable function-url-scheme-blacklist */
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
/* stylelint-enable function-url-scheme-blacklist */

$input-bg-disabled: $input-disabled-bg;
$table-sm-cell-padding: $table-cell-padding-sm;
$popover-arrow-outer-width: 11px !default;
$modal-title-padding: $modal-header-padding;
$pagination-hover-border: $pagination-hover-border-color;
$pagination-active-border: $pagination-active-border-color;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

$brand-primary: $primary;
$brand-success: $success;
$brand-info: $info;
$brand-warning: $warning;
$brand-danger: $danger;

$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$gray-dark: $gray-900;
$gray: $gray-700;
$gray-light: $gray-600;
$gray-lighter: $gray-300;
$gray-lightest: $gray-100;

$table-bg-hover: $table-hover-bg;
$table-bg-accent: $table-accent-bg;

$tag-default-bg: $gray-light !default;
$tag-primary-bg: $brand-primary !default;
$tag-success-bg: $brand-success !default;
$tag-info-bg: $brand-info !default;
$tag-warning-bg: $brand-warning !default;
$tag-danger-bg: $brand-danger !default;

$state-success-text: $success;
$state-success-bg: theme-color-level("success", -10) !default;
$state-success-border: theme-color-level("success", -9) !default;

$state-info-text: $info;
$state-info-bg: theme-color-level("info", -10) !default;
$state-info-border: theme-color-level("info", -9) !default;

$state-warning-text: $warning;
$state-warning-bg: theme-color-level("warning", -10) !default;
$state-warning-border: theme-color-level("warning", -10) !default;

$state-danger-text: $danger;
$state-danger-bg: theme-color-level("danger", -10) !default;
$state-danger-border: theme-color-level("danger", -9) !default;

@mixin form-control-validation($color) {
    // Color the label and help text
    .form-control-feedback,
    .form-control-label,
    .form-check-label,
    .form-check-inline,
    .custom-control {
        color: $color;
    }
    // Set the border and box shadow on specific inputs to match
    .form-control {
        border-color: $color;
    }

    // Set validation states also for addons
    .input-group-addon {
        color: $color;
        border-color: $color;
        background-color: lighten($color, 40%);
    }
    // Optional feedback icon
    .form-control-feedback {
        color: $color;
    }
}

$tag-padding-x: .4em !default;
$tag-padding-y: .25em !default;
$tag-font-size: 75% !default;
$tag-color: #fff !default;
$tag-font-weight: bold !default;

.tag {
    display: inline-block;
    padding: $tag-padding-y $tag-padding-x;
    font-size: $tag-font-size;
    font-weight: $tag-font-weight;
    line-height: 1;
    color: $tag-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    @include border-radius();

    // Empty tags collapse automatically
    &:empty {
        display: none;
    }
}

.form-control-success,
.form-control-warning,
.form-control-danger {
    padding-right: ($input-padding-x * 3);
    background-repeat: no-repeat;
    background-position: center right ($input-height / 4);
    background-size: ($input-height / 2) ($input-height / 2);
}

// .form-check-input {
//     position: static;
// }

@mixin tag-variant($color) {
    background-color: $color;

    &[href] {
        @include hover-focus {
            background-color: darken($color, 10%);
        }
    }
}

.tag-default {
    @include tag-variant($tag-default-bg);
}

.tag-primary {
    @include tag-variant($tag-primary-bg);
}

.tag-success {
    @include tag-variant($tag-success-bg);
}

.tag-info {
    @include tag-variant($tag-info-bg);
}

.tag-warning {
    @include tag-variant($tag-warning-bg);
}

.tag-danger {
    @include tag-variant($tag-danger-bg);
}

@mixin pull-left() {
    @include float-left();
}

@mixin pull-right() {
    @include float-right();
}

.custom-select {
    width: auto;
}

.fade.in {
    opacity: 1;
}

// Adding compatibility for m-side-* classes.
// stylelint-disable
$spacer: 1rem !default;
$bs4aspacers: () !default;
$bs4aspacers: map-merge((
  0: 0,
  1: ($spacer * 1),
  2: ($spacer * 2),
  3: ($spacer * 3)
), $bs4aspacers);

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $length in $bs4aspacers {

    .#{$abbrev}-a-#{$size} { #{$prop}: $length !important; }
    .#{$abbrev}-t-#{$size},
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top: $length !important;
    }
    .#{$abbrev}-r-#{$size},
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right: $length !important;
    }
    .#{$abbrev}-b-#{$size},
    .#{$abbrev}-y-#{$size} {
      #{$prop}-bottom: $length !important;
    }
    .#{$abbrev}-l-#{$size},
    .#{$abbrev}-x-#{$size} {
      #{$prop}-left: $length !important;
    }
  }
}

// Adding compatibility for col-xs-* classes.
@for $i from 1 through $grid-columns {
  .col-xs-#{$i} {
    @extend .col-#{$i};
  }
}

input[disabled] {
    cursor: not-allowed;
}

.row-fluid {
  @include make-row();
}

// These have been removed in BS4 Stable. Adding in so RTL dropdowns will work.
/*rtl:raw:
.dropdown-menu-right {
    right: 0;
    left: auto;
}
.dropdown-menu-left {
    right: auto;
    left: 0;
}
*/