_legacy.scss 2.69 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// ------------------------------------
// LMS support for legacy Sass partials
//
// The intention is that this makes it
// easier to reuse existing partials
// that were not built with Bootstrap
// in mind.
// ------------------------------------

@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages

@mixin font-size($sizeValue: 16) {
  font-size: ($sizeValue/10) + rem;
}

16 17 18 19 20 21 22
// Adds a simple extension that indicates that this element should not print
%ui-print-excluded {
  @media print {
    display: none;
  }
}

23 24
// Support .sr as a synonym for .sr-only
.sr {
25
  @extend .sr-only;
26 27 28 29 30 31 32 33 34 35 36 37 38 39
}

// ----------------------------
// #LEGACY VARIABLES
// ----------------------------

// ----------------------------
// #GRID
// ----------------------------

$grid-breakpoints-sm: 576px !default;
$grid-breakpoints-md: 768px !default;
$grid-breakpoints-lg: 992px !default;

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
// Wrap grids with grid-container.
@mixin grid-container() {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}

@mixin span($cols, $margin:'') {
  @include margin-left(calc(0.5 * #{$grid-gutter-width}));
  @include margin-right(calc(0.5 * #{$grid-gutter-width}));

  width: calc(#{cols($cols)} - #{$grid-gutter-width});

  @if ($margin == 'before') {
    @include margin-right(0);

    width: calc(#{cols($cols)} - 0.5 * #{$grid-gutter-width});
  } @else if ($margin == 'after') {
    @include margin-left(0);

    width: calc(#{cols($cols)} - 0.5 * #{$grid-gutter-width});
  } @else if ($margin == 'none') {
    @include margin-left(0);
    @include margin-right(0);

    width: cols($cols);
  }
}

73 74 75 76 77 78 79 80 81 82 83 84 85 86
// ----------------------------
// #FONTS
// ----------------------------

$body-font-size: $font-size-base !default;
$font-light: 300 !default;
$font-regular: 400 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;

// ----------------------------
// #COLORS
// ----------------------------

87
$gray: $gray-600 !default;
88 89
$lms-container-background-color: theme-color("inverse") !default;
$lms-preview-menu-color: $gray-400 !default;
90
$success-color-hover: darken($success, 15%) !default;
91
$lms-hero-color: #005e90 !default;
92 93
$border-color-2: $gray-400 !default;
$link-hover: #065683 !default; // wcag2a compliant
94 95 96 97 98 99 100 101 102 103 104 105 106 107

// Blacks
$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;

// 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-d2: rgba($black, 0.6) !default;