MDL-63303 theme_bootstrapbase: add bs4 compat classes
This commit is contained in:
Ryan Wyllie
@@ -176,6 +176,170 @@
|
||||
margin: 3 * @baseFontSize !important;
|
||||
}
|
||||
|
||||
|
||||
// Bootstrap 4 stable utilities
|
||||
.p-1 {
|
||||
padding: @baseFontSize / 4 !important;
|
||||
}
|
||||
.p-2 {
|
||||
padding: @baseFontSize / 2 !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: @baseFontSize !important;
|
||||
}
|
||||
.p-4 {
|
||||
padding: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
|
||||
.pl-1,
|
||||
.px-1 {
|
||||
padding-left: @baseFontSize / 4 !important;
|
||||
}
|
||||
.pl-2,
|
||||
.px-2 {
|
||||
padding-left: @baseFontSize / 2 !important;
|
||||
}
|
||||
.pl-3,
|
||||
.px-3 {
|
||||
padding-left: @baseFontSize !important;
|
||||
}
|
||||
.pl-4,
|
||||
.px-4 {
|
||||
padding-left: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.pr-1,
|
||||
.px-1 {
|
||||
padding-right: @baseFontSize / 4 !important;
|
||||
}
|
||||
.pr-2,
|
||||
.px-2 {
|
||||
padding-right: @baseFontSize / 2 !important;
|
||||
}
|
||||
.pr-3,
|
||||
.px-3 {
|
||||
padding-right: @baseFontSize !important;
|
||||
}
|
||||
.pr-4,
|
||||
.px-4 {
|
||||
padding-right: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.pt-1,
|
||||
.py-1 {
|
||||
padding-top: @baseFontSize / 4 !important;
|
||||
}
|
||||
.pt-2,
|
||||
.py-2 {
|
||||
padding-top: @baseFontSize / 2 !important;
|
||||
}
|
||||
.pt-3,
|
||||
.py-3 {
|
||||
padding-top: @baseFontSize !important;
|
||||
}
|
||||
.pt-4,
|
||||
.py-4 {
|
||||
padding-top: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.pb-1,
|
||||
.py-1 {
|
||||
padding-bottom: @baseFontSize / 4 !important;
|
||||
}
|
||||
.pb-2,
|
||||
.py-2 {
|
||||
padding-bottom: @baseFontSize / 2 !important;
|
||||
}
|
||||
.pb-3,
|
||||
.py-3 {
|
||||
padding-bottom: @baseFontSize !important;
|
||||
}
|
||||
.pb-4,
|
||||
.py-4 {
|
||||
padding-bottom: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
|
||||
|
||||
.ml-1,
|
||||
.mx-1 {
|
||||
margin-left: @baseFontSize / 4 !important;
|
||||
}
|
||||
.ml-2,
|
||||
.mx-2 {
|
||||
margin-left: @baseFontSize / 2 !important;
|
||||
}
|
||||
.ml-3,
|
||||
.mx-3 {
|
||||
margin-left: @baseFontSize !important;
|
||||
}
|
||||
.ml-4,
|
||||
.mx-4 {
|
||||
margin-left: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.mr-1,
|
||||
.mx-1 {
|
||||
margin-right: @baseFontSize / 4 !important;
|
||||
}
|
||||
.mr-2,
|
||||
.mx-2 {
|
||||
margin-right: @baseFontSize / 2 !important;
|
||||
}
|
||||
.mr-3,
|
||||
.mx-3 {
|
||||
margin-right: @baseFontSize !important;
|
||||
}
|
||||
.mr-4,
|
||||
.mx-4 {
|
||||
margin-right: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.mb-1,
|
||||
.my-1 {
|
||||
margin-bottom: @baseFontSize / 4 !important;
|
||||
}
|
||||
.mb-2,
|
||||
.my-2 {
|
||||
margin-bottom: @baseFontSize / 2 !important;
|
||||
}
|
||||
.mb-3,
|
||||
.my-3 {
|
||||
margin-bottom: @baseFontSize !important;
|
||||
}
|
||||
.mb-4,
|
||||
.my-4 {
|
||||
margin-bottom: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
.mt-1,
|
||||
.my-1 {
|
||||
margin-top: @baseFontSize / 4 !important;
|
||||
}
|
||||
.mt-2,
|
||||
.my-2 {
|
||||
margin-top: @baseFontSize / 2 !important;
|
||||
}
|
||||
.mt-3,
|
||||
.my-3 {
|
||||
margin-top: @baseFontSize !important;
|
||||
}
|
||||
.mt-4,
|
||||
.my-4 {
|
||||
margin-top: @baseFontSize * 1.5 !important;
|
||||
}
|
||||
|
||||
|
||||
.ml-auto,
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mr-auto,
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mt-auto,
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-auto,
|
||||
.my-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
@@ -303,10 +467,46 @@
|
||||
&-primary[href] {
|
||||
background-color: darken(@blue, 10%);
|
||||
}
|
||||
&-faded,
|
||||
&-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
&-white {
|
||||
background-color: @white !important;
|
||||
}
|
||||
&-secondary {
|
||||
background-color: #e9ecef !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-faded {
|
||||
background-color: @grayLighter;
|
||||
.border-left {
|
||||
border-left: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-top {
|
||||
border-top: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
|
||||
.border-0 {
|
||||
border: 0 !important;
|
||||
}
|
||||
.border-top-0 {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
.border-right-0 {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
.border-bottom-0 {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
.border-left-0 {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
@@ -332,11 +532,6 @@
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.align-self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
@@ -344,29 +539,80 @@
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
.h-100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
.position-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
.align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
.rounded-circle {
|
||||
.border-radius(50%);
|
||||
}
|
||||
.rounded {
|
||||
.border-radius(4px);
|
||||
}
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
.box-initial {
|
||||
box-sizing: initial;
|
||||
& * {
|
||||
box-sizing: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: @baseFontSize / 2 !important;
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: @white;
|
||||
}
|
||||
.list-group-item-action {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-3 {
|
||||
height: 36px !important;
|
||||
width: 36px !important;
|
||||
img {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.icon-size-4 {
|
||||
height: 44px !important;
|
||||
width: 44px !important;
|
||||
img {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -21805,6 +21805,162 @@ ul.indented-list {
|
||||
.m-a-3 {
|
||||
margin: 42px !important;
|
||||
}
|
||||
.p-1 {
|
||||
padding: 3.5px !important;
|
||||
}
|
||||
.p-2 {
|
||||
padding: 7px !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: 14px !important;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 21px !important;
|
||||
}
|
||||
.pl-1,
|
||||
.px-1 {
|
||||
padding-left: 3.5px !important;
|
||||
}
|
||||
.pl-2,
|
||||
.px-2 {
|
||||
padding-left: 7px !important;
|
||||
}
|
||||
.pl-3,
|
||||
.px-3 {
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
.pl-4,
|
||||
.px-4 {
|
||||
padding-left: 21px !important;
|
||||
}
|
||||
.pr-1,
|
||||
.px-1 {
|
||||
padding-right: 3.5px !important;
|
||||
}
|
||||
.pr-2,
|
||||
.px-2 {
|
||||
padding-right: 7px !important;
|
||||
}
|
||||
.pr-3,
|
||||
.px-3 {
|
||||
padding-right: 14px !important;
|
||||
}
|
||||
.pr-4,
|
||||
.px-4 {
|
||||
padding-right: 21px !important;
|
||||
}
|
||||
.pt-1,
|
||||
.py-1 {
|
||||
padding-top: 3.5px !important;
|
||||
}
|
||||
.pt-2,
|
||||
.py-2 {
|
||||
padding-top: 7px !important;
|
||||
}
|
||||
.pt-3,
|
||||
.py-3 {
|
||||
padding-top: 14px !important;
|
||||
}
|
||||
.pt-4,
|
||||
.py-4 {
|
||||
padding-top: 21px !important;
|
||||
}
|
||||
.pb-1,
|
||||
.py-1 {
|
||||
padding-bottom: 3.5px !important;
|
||||
}
|
||||
.pb-2,
|
||||
.py-2 {
|
||||
padding-bottom: 7px !important;
|
||||
}
|
||||
.pb-3,
|
||||
.py-3 {
|
||||
padding-bottom: 14px !important;
|
||||
}
|
||||
.pb-4,
|
||||
.py-4 {
|
||||
padding-bottom: 21px !important;
|
||||
}
|
||||
.ml-1,
|
||||
.mx-1 {
|
||||
margin-left: 3.5px !important;
|
||||
}
|
||||
.ml-2,
|
||||
.mx-2 {
|
||||
margin-left: 7px !important;
|
||||
}
|
||||
.ml-3,
|
||||
.mx-3 {
|
||||
margin-left: 14px !important;
|
||||
}
|
||||
.ml-4,
|
||||
.mx-4 {
|
||||
margin-left: 21px !important;
|
||||
}
|
||||
.mr-1,
|
||||
.mx-1 {
|
||||
margin-right: 3.5px !important;
|
||||
}
|
||||
.mr-2,
|
||||
.mx-2 {
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
.mr-3,
|
||||
.mx-3 {
|
||||
margin-right: 14px !important;
|
||||
}
|
||||
.mr-4,
|
||||
.mx-4 {
|
||||
margin-right: 21px !important;
|
||||
}
|
||||
.mb-1,
|
||||
.my-1 {
|
||||
margin-bottom: 3.5px !important;
|
||||
}
|
||||
.mb-2,
|
||||
.my-2 {
|
||||
margin-bottom: 7px !important;
|
||||
}
|
||||
.mb-3,
|
||||
.my-3 {
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
.mb-4,
|
||||
.my-4 {
|
||||
margin-bottom: 21px !important;
|
||||
}
|
||||
.mt-1,
|
||||
.my-1 {
|
||||
margin-top: 3.5px !important;
|
||||
}
|
||||
.mt-2,
|
||||
.my-2 {
|
||||
margin-top: 7px !important;
|
||||
}
|
||||
.mt-3,
|
||||
.my-3 {
|
||||
margin-top: 14px !important;
|
||||
}
|
||||
.mt-4,
|
||||
.my-4 {
|
||||
margin-top: 21px !important;
|
||||
}
|
||||
.ml-auto,
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mr-auto,
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mt-auto,
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-auto,
|
||||
.my-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
@@ -21894,8 +22050,42 @@ ul.indented-list {
|
||||
.bg-primary[href] {
|
||||
background-color: #0378a9;
|
||||
}
|
||||
.bg-faded {
|
||||
background-color: #eee;
|
||||
.bg-faded,
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.bg-white {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: #e9ecef !important;
|
||||
}
|
||||
.border-left {
|
||||
border-left: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-top {
|
||||
border-top: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dee2e6 !important;
|
||||
}
|
||||
.border-0 {
|
||||
border: 0 !important;
|
||||
}
|
||||
.border-top-0 {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
.border-right-0 {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
.border-bottom-0 {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
.border-left-0 {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
@@ -21915,26 +22105,71 @@ ul.indented-list {
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.align-self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
.h-100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
.position-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: 7px !important;
|
||||
.align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
.align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.rounded-circle {
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rounded {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
.box-initial {
|
||||
box-sizing: initial;
|
||||
}
|
||||
.box-initial * {
|
||||
box-sizing: initial;
|
||||
}
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.box-border * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: #fff;
|
||||
}
|
||||
.list-group-item-action:hover,
|
||||
.list-group-item-action:focus {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon-size-3 {
|
||||
height: 36px !important;
|
||||
@@ -21943,5 +22178,12 @@ ul.indented-list {
|
||||
.icon-size-3 img {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
padding-right: 0;
|
||||
}
|
||||
.icon-size-4 {
|
||||
height: 44px !important;
|
||||
width: 44px !important;
|
||||
}
|
||||
.icon-size-4 img {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user