Skip to content
GitLab
Commit 1ff0b6f4 authored by Liam's avatar Liam Committed by Rebecca Blundell
Browse files

Bug #1765276: Upgraded bootstrap to 4.2.1 

Change-Id: Ibbd5c46556979fb75506dbfa9e401b543aad795f
parent 103d8b19
Expand all Hide whitespace changes
Inline Side-by-side
htdocs/lib/bootstrap/assets/javascripts/README.Mahara
View file @ 1ff0b6f4
......@@ -2,10 +2,10 @@ Bootstrap for Sass
==================
Website: https://getbootstrap.com/
Version: 4.1
Version: 4.2.1
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Changes:
- Only kept the 'javaScripts/' directory
- used the information from 'scss/' directory in the 'theme/raw/sass/lib/' directory but highly customised
- Moved '/sass' directory to 'theme/raw/sass/lib/'
htdocs/theme/raw/sass/lib/bootstrap4/_alert.scss
View file @ 1ff0b6f4
......@@ -27,7 +27,7 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: ($close-font-size + $alert-padding-x * 2);
padding-right: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
......
htdocs/theme/raw/sass/lib/bootstrap4/_badge.scss
View file @ 1ff0b6f4
......@@ -14,6 +14,12 @@
vertical-align: baseline;
@include border-radius($badge-border-radius);
@at-root a#{&} {
@include hover-focus {
text-decoration: none;
}
}
// Empty badges collapse automatically
&:empty {
display: none;
......
htdocs/theme/raw/sass/lib/bootstrap4/_button-group.scss
View file @ 1ff0b6f4
......@@ -9,7 +9,7 @@
> .btn {
position: relative;
flex: 0 1 auto;
flex: 1 1 auto;
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
......@@ -22,14 +22,6 @@
z-index: 1;
}
}
// Prevent double borders when buttons are next to each other
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -$btn-border-width;
}
}
// Optional: Group multiple button groups together for a toolbar
......@@ -44,8 +36,10 @@
}
.btn-group {
> .btn:first-child {
margin-left: 0;
// Prevent double borders when buttons are next to each other
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
}
// Reset rounded corners
......@@ -119,17 +113,14 @@
align-items: flex-start;
justify-content: center;
.btn,
.btn-group {
> .btn,
> .btn-group {
width: 100%;
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
margin-left: 0;
}
// Reset rounded corners
......
htdocs/theme/raw/sass/lib/bootstrap4/_buttons.scss
View file @ 1ff0b6f4
......@@ -7,16 +7,17 @@
.btn {
display: inline-block;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
// Share hover and focus styles
@include hover-focus {
@include hover {
color: $body-color;
text-decoration: none;
}
......@@ -40,7 +41,6 @@
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active {
background-image: none;
@include box-shadow($btn-active-box-shadow);
&:focus {
......@@ -81,19 +81,15 @@ fieldset:disabled a.btn {
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
background-color: transparent;
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
border-color: transparent;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
border-color: transparent;
box-shadow: none;
}
......@@ -112,11 +108,11 @@ fieldset:disabled a.btn {
//
.btn-lg {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}
......
htdocs/theme/raw/sass/lib/bootstrap4/_card.scss
View file @ 1ff0b6f4
......@@ -43,7 +43,7 @@
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
......@@ -68,6 +68,7 @@
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: $card-cap-color;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
......@@ -98,15 +99,15 @@
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
}
// Card image
......@@ -277,25 +278,33 @@
//
.accordion {
.card:not(:first-of-type):not(:last-of-type) {
border-bottom: 0;
border-radius: 0;
}
.card {
overflow: hidden;
&:not(:first-of-type) {
.card-header:first-child {
border-radius: 0;
}
.card:not(:first-of-type) {
.card-header:first-child {
border-radius: 0;
&:not(:last-of-type) {
border-bottom: 0;
border-radius: 0;
}
}
}
.card:first-of-type {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:first-of-type {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.card:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
&:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.card-header {
margin-bottom: -$card-border-width;
}
}
}
htdocs/theme/raw/sass/lib/bootstrap4/_carousel.scss
View file @ 1ff0b6f4
// Notes on the classes:
//
// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
// the active slide is heading.
// 2. .active.carousel-item is the current slide.
// 3. .active.carousel-item-left and .active.carousel-item-right is the current
// 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// is the upcoming slide in transition.
.carousel {
position: relative;
}
.carousel.pointer-event {
touch-action: pan-y;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
@include clearfix();
}
.carousel-item {
position: relative;
display: none;
align-items: center;
float: left;
width: 100%;
@include transition($carousel-transition);
margin-right: -100%;
backface-visibility: hidden;
perspective: 1000px;
@include transition($carousel-transition);
}
.carousel-item.active,
......@@ -34,37 +42,14 @@
display: block;
}
.carousel-item-next,
.carousel-item-prev {
position: absolute;
top: 0;
}
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0);
}
}
.carousel-item-prev,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
transform: translateX(-100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0);
}
}
......@@ -75,31 +60,22 @@
.carousel-fade {
.carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
transform: none;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
z-index: 0;
opacity: 0;
}
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active,
.active.carousel-item-left,
.active.carousel-item-prev {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
@include transition(0s $carousel-transition-duration opacity);
}
}
......@@ -113,6 +89,7 @@
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
......@@ -121,15 +98,14 @@
color: $carousel-control-color;
text-align: center;
opacity: $carousel-control-opacity;
// We can't have a transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
@include transition($carousel-control-transition);
// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: .9;
opacity: $carousel-control-hover-opacity;
}
}
.carousel-control-prev {
......@@ -170,7 +146,7 @@
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
......@@ -182,38 +158,25 @@
list-style: none;
li {
position: relative;
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
background-color: rgba($carousel-indicator-active-bg, .5);
// Use pseudo classes to increase the hit area by 10px on top and bottom.
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;
@include transition($carousel-indicator-transition);
}
.active {
background-color: $carousel-indicator-active-bg;
opacity: 1;
}
}
......@@ -224,9 +187,9 @@
.carousel-caption {
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
left: ((100% - $carousel-caption-width) / 2);
left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
......
htdocs/theme/raw/sass/lib/bootstrap4/_close.scss
View file @ 1ff0b6f4
......@@ -7,14 +7,18 @@
text-shadow: $close-text-shadow;
opacity: .5;
@include hover-focus {
// Override <a>'s hover style
@include hover {
color: $close-color;
text-decoration: none;
opacity: .75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
&:not(:disabled):not(.disabled) {
@include hover-focus {
opacity: .75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
cursor: pointer;
}
}
......@@ -24,11 +28,17 @@
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
}
// Future-proof disabling of clicks on `<a>` elements
// stylelint-disable-next-line selector-no-qualifying-type
a.close.disabled {
pointer-events: none;
}
// stylelint-enable
htdocs/theme/raw/sass/lib/bootstrap4/_code.scss
View file @ 1ff0b6f4
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
font-size: $code-font-size;
......
htdocs/theme/raw/sass/lib/bootstrap4/_custom-forms.scss
View file @ 1ff0b6f4
......@@ -10,8 +10,8 @@
.custom-control {
position: relative;
display: block;
min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
}
.custom-control-inline {
......@@ -26,18 +26,28 @@
&:checked ~ .custom-control-label::before {
color: $custom-control-indicator-checked-color;
border-color: $custom-control-indicator-checked-border-color;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow);
}
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-indicator-focus-box-shadow;
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: $custom-control-indicator-focus-border-color;
}
&:active ~ .custom-control-label::before {
&:not(:disabled):active ~ .custom-control-label::before {
color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg;
border-color: $custom-control-indicator-active-border-color;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
......@@ -54,31 +64,33 @@
// Custom control indicators
//
// Build the custom controls out of psuedo-elements.
// Build the custom controls out of pseudo-elements.
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: top;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
content: "";
user-select: none;
background-color: $custom-control-indicator-bg;
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
......@@ -100,9 +112,6 @@
}
.custom-control-input:checked ~ .custom-control-label {
&::before {
@include gradient-bg($custom-control-indicator-checked-bg);
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
......@@ -110,6 +119,7 @@