MOBILE-4600 styles: Separate bootstrap to a component
This commit is contained in:
Pau Ferrer Ocaña
parent
0771ccc278
commit
1c6bbbfca8
@ -24,6 +24,8 @@ $grid-column-paddings: (
|
|||||||
|
|
||||||
::ng-deep {
|
::ng-deep {
|
||||||
|
|
||||||
|
@import "theme/components/bootstrap/bootstrap.scss";
|
||||||
|
|
||||||
table {
|
table {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
34
src/theme/components/bootstrap/_alert.scss
Normal file
34
src/theme/components/bootstrap/_alert.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
.alert {
|
||||||
|
position: relative;
|
||||||
|
padding: .75rem 1.25rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 0 solid transparent;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Headings for larger alerts
|
||||||
|
.alert-heading {
|
||||||
|
// Specified to prevent conflicts of changing headings-color
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Provide class for links that match alerts
|
||||||
|
.alert-link {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name, $unused in global.$colors {
|
||||||
|
.alert-#{$color-name} {
|
||||||
|
--color-base: var(--#{$color-name});
|
||||||
|
color: var(--#{$color-name}-shade);
|
||||||
|
border-color: var(--color-base);
|
||||||
|
background-color: var(--#{$color-name}-tint);
|
||||||
|
|
||||||
|
.alert-link, a {
|
||||||
|
color: var(--#{$color-name}-shade);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alert-#{$color-name} p {
|
||||||
|
color: var(--color-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
23
src/theme/components/bootstrap/_buttons.scss
Normal file
23
src/theme/components/bootstrap/_buttons.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
.btn-link {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .btn {
|
||||||
|
margin: 4px 8px;
|
||||||
|
padding-left: 12px;
|
||||||
|
padding-right: 12px;
|
||||||
|
border-radius: var(--core-input-radius);
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name, $unused in global.$colors {
|
||||||
|
.btn.btn-#{$color-name} {
|
||||||
|
--color-base: var(--#{$color-name});
|
||||||
|
color: var(--#{$color-name}-shade);
|
||||||
|
border-color: var(--color-base);
|
||||||
|
background-color: var(--#{$color-name}-tint);
|
||||||
|
}
|
||||||
|
}
|
||||||
36
src/theme/components/bootstrap/_forms.scss
Normal file
36
src/theme/components/bootstrap/_forms.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
.form-check {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: .3rem;
|
||||||
|
margin-left: -1.25rem;
|
||||||
|
|
||||||
|
&[disabled] ~ .form-check-label,
|
||||||
|
&:disabled ~ .form-check-label {
|
||||||
|
color: global.$gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-inline {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-right: .75rem;
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
position: static;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: .3125rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
8
src/theme/components/bootstrap/_media.scss
Normal file
8
src/theme/components/bootstrap/_media.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.media {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
6
src/theme/components/bootstrap/_reboot.scss
Normal file
6
src/theme/components/bootstrap/_reboot.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
5
src/theme/components/bootstrap/_utilities.scss
Normal file
5
src/theme/components/bootstrap/_utilities.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@import "utilities/align";
|
||||||
|
@import "utilities/borders";
|
||||||
|
@import "utilities/flex";
|
||||||
|
@import "utilities/text";
|
||||||
|
@import "utilities/visibility";
|
||||||
39
src/theme/components/bootstrap/bootstrap.scss
vendored
Normal file
39
src/theme/components/bootstrap/bootstrap.scss
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
@use "theme/globals" as global;
|
||||||
|
|
||||||
|
// Bootstrap 4 Styles
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
@import "reboot";
|
||||||
|
@import "forms";
|
||||||
|
|
||||||
|
@import "buttons";
|
||||||
|
@import "alert";
|
||||||
|
@import "media";
|
||||||
|
@import "utilities";
|
||||||
|
|
||||||
|
// Deprecated styles.
|
||||||
|
.label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: .25em .4em;
|
||||||
|
font-size: 75%;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: baseline;
|
||||||
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||||
|
color: var(--white);
|
||||||
|
background-color: var(--medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-important {
|
||||||
|
color: var(--danger-contrast);
|
||||||
|
background-color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name, $unused in global.$colors {
|
||||||
|
.label-#{$color-name} {
|
||||||
|
color: var(--#{$color-name}-contrast);
|
||||||
|
background-color: var(--#{$color-name});
|
||||||
|
}
|
||||||
|
}
|
||||||
8
src/theme/components/bootstrap/utilities/_align.scss
Normal file
8
src/theme/components/bootstrap/utilities/_align.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
|
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||||
|
.align-top { vertical-align: top !important; }
|
||||||
|
.align-middle { vertical-align: middle !important; }
|
||||||
|
.align-bottom { vertical-align: bottom !important; }
|
||||||
|
.align-text-bottom { vertical-align: text-bottom !important; }
|
||||||
|
.align-text-top { vertical-align: text-top !important; }
|
||||||
69
src/theme/components/bootstrap/utilities/_borders.scss
Normal file
69
src/theme/components/bootstrap/utilities/_borders.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
.border { border: 1px solid var(--gray-500) !important; }
|
||||||
|
.border-top { border-top: 1px solid var(--gray-500) !important; }
|
||||||
|
.border-right { border-right: 1px solid var(--gray-500) !important; }
|
||||||
|
.border-bottom { border-bottom: 1px solid var(--gray-500) !important; }
|
||||||
|
.border-left { border-left: 1px solid var(--gray-500) !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; }
|
||||||
|
|
||||||
|
@each $color-name, $unused in global.$colors {
|
||||||
|
.border-#{$color-name} {
|
||||||
|
border-color: var(--#{$color-name}) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-white {
|
||||||
|
border-color: var(--white) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Border-radius
|
||||||
|
//
|
||||||
|
|
||||||
|
.rounded-sm {
|
||||||
|
border-radius: var(--mdl-shape-borderRadius-sm) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded {
|
||||||
|
border-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-top {
|
||||||
|
border-top-left-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
border-top-right-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-right {
|
||||||
|
border-top-right-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
border-bottom-right-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-bottom {
|
||||||
|
border-bottom-right-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
border-bottom-left-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-left {
|
||||||
|
border-top-left-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
border-bottom-left-radius: var(--mdl-shape-borderRadius-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-lg {
|
||||||
|
border-radius: var(--mdl-shape-borderRadius-lg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-circle {
|
||||||
|
border-radius: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-pill {
|
||||||
|
border-radius: 50rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-0 {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
39
src/theme/components/bootstrap/utilities/_flex.scss
Normal file
39
src/theme/components/bootstrap/utilities/_flex.scss
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
.flex-row { flex-direction: row !important; }
|
||||||
|
.flex-column { flex-direction: column !important; }
|
||||||
|
.flex-row-reverse { flex-direction: row-reverse !important; }
|
||||||
|
.flex-column-reverse { flex-direction: column-reverse !important; }
|
||||||
|
|
||||||
|
.flex-wrap { flex-wrap: wrap !important; }
|
||||||
|
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||||
|
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||||
|
.flex-fill { flex: 1 1 auto !important; }
|
||||||
|
.flex-grow-0 { flex-grow: 0 !important; }
|
||||||
|
.flex-grow-1 { flex-grow: 1 !important; }
|
||||||
|
.flex-shrink-0 { flex-shrink: 0 !important; }
|
||||||
|
.flex-shrink-1 { flex-shrink: 1 !important; }
|
||||||
|
|
||||||
|
.justify-content-start { justify-content: flex-start !important; }
|
||||||
|
.justify-content-end { justify-content: flex-end !important; }
|
||||||
|
.justify-content-center { justify-content: center !important; }
|
||||||
|
.justify-content-between { justify-content: space-between !important; }
|
||||||
|
.justify-content-around { justify-content: space-around !important; }
|
||||||
|
|
||||||
|
.align-items-start { align-items: flex-start !important; }
|
||||||
|
.align-items-end { align-items: flex-end !important; }
|
||||||
|
.align-items-center { align-items: center !important; }
|
||||||
|
.align-items-baseline { align-items: baseline !important; }
|
||||||
|
.align-items-stretch { align-items: stretch !important; }
|
||||||
|
|
||||||
|
.align-content-start { align-content: flex-start !important; }
|
||||||
|
.align-content-end { align-content: flex-end !important; }
|
||||||
|
.align-content-center { align-content: center !important; }
|
||||||
|
.align-content-between { align-content: space-between !important; }
|
||||||
|
.align-content-around { align-content: space-around !important; }
|
||||||
|
.align-content-stretch { align-content: stretch !important; }
|
||||||
|
|
||||||
|
.align-self-auto { align-self: auto !important; }
|
||||||
|
.align-self-start { align-self: flex-start !important; }
|
||||||
|
.align-self-end { align-self: flex-end !important; }
|
||||||
|
.align-self-center { align-self: center !important; }
|
||||||
|
.align-self-baseline { align-self: baseline !important; }
|
||||||
|
.align-self-stretch { align-self: stretch !important; }
|
||||||
@ -1,4 +1,7 @@
|
|||||||
// Text for accessibility, hidden from the view.
|
//
|
||||||
|
// Screenreaders
|
||||||
|
//
|
||||||
|
|
||||||
.sr-only, .accesshide {
|
.sr-only, .accesshide {
|
||||||
@include sr-only();
|
@include sr-only();
|
||||||
|
|
||||||
64
src/theme/components/bootstrap/utilities/_text.scss
Normal file
64
src/theme/components/bootstrap/utilities/_text.scss
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
|
//
|
||||||
|
// Text
|
||||||
|
//
|
||||||
|
|
||||||
|
.text-monospace { font-family: var(--mdl-typography-monospace-font) !important; }
|
||||||
|
|
||||||
|
// Alignment
|
||||||
|
|
||||||
|
.text-justify { text-align: justify !important; }
|
||||||
|
.text-wrap { white-space: normal !important; }
|
||||||
|
.text-nowrap { white-space: nowrap !important; }
|
||||||
|
.text-truncate { @include global.ellipsis(); }
|
||||||
|
|
||||||
|
// Responsive alignment
|
||||||
|
|
||||||
|
.text-left { text-align: left !important; }
|
||||||
|
.text-right { text-align: right !important; }
|
||||||
|
.text-center { text-align: center !important; }
|
||||||
|
|
||||||
|
// Transformation
|
||||||
|
|
||||||
|
.text-lowercase { text-transform: lowercase !important; }
|
||||||
|
.text-uppercase { text-transform: uppercase !important; }
|
||||||
|
.text-capitalize { text-transform: capitalize !important; }
|
||||||
|
|
||||||
|
// Weight and italics
|
||||||
|
|
||||||
|
.font-weight-light { font-weight: 300 !important; }
|
||||||
|
.font-weight-lighter { font-weight: lighter !important; }
|
||||||
|
.font-weight-normal { font-weight: 400 !important; }
|
||||||
|
.font-weight-bold { font-weight: 700 !important; }
|
||||||
|
.font-weight-bolder { font-weight: bolder !important; }
|
||||||
|
.font-italic { font-style: italic !important; }
|
||||||
|
|
||||||
|
// Contextual colors
|
||||||
|
|
||||||
|
.text-white { color: var(--white) !important; }
|
||||||
|
|
||||||
|
@each $color-name, $unused in global.$colors {
|
||||||
|
.text-#{$color-name} {
|
||||||
|
color: var(--#{$color-name});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-body { color: var(--ion-text-color) !important; }
|
||||||
|
.text-muted { color: var(--subdued-text-color) !important; }
|
||||||
|
|
||||||
|
.text-black-50 { color: rgb(0 0 0 / 50%) !important; }
|
||||||
|
.text-white-50 { color: rgb(255 255 255 / 50%) !important; }
|
||||||
|
|
||||||
|
// Misc
|
||||||
|
|
||||||
|
.text-decoration-none { text-decoration: none !important; }
|
||||||
|
|
||||||
|
.text-break {
|
||||||
|
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
|
||||||
|
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset
|
||||||
|
|
||||||
|
.text-reset { color: inherit !important; }
|
||||||
13
src/theme/components/bootstrap/utilities/_visibility.scss
Normal file
13
src/theme/components/bootstrap/utilities/_visibility.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
|
//
|
||||||
|
// Visibility utilities
|
||||||
|
//
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
@ -364,271 +364,8 @@ core-rich-text-editor .core-rte-editor {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Bootstrap 4 Styles
|
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
// _reboot.scss
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// _media.scss
|
|
||||||
.media {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-body {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// _alert.scss
|
|
||||||
.alert {
|
|
||||||
position: relative;
|
|
||||||
padding: .75rem 1.25rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 0 solid transparent;
|
|
||||||
border-radius: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Headings for larger alerts
|
|
||||||
.alert-heading {
|
|
||||||
// Specified to prevent conflicts of changing headings-color
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Provide class for links that match alerts
|
|
||||||
.alert-link {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $color-name, $unused in global.$colors {
|
|
||||||
.alert-#{$color-name} {
|
|
||||||
--color-base: var(--#{$color-name});
|
|
||||||
color: var(--#{$color-name}-shade);
|
|
||||||
border-color: var(--color-base);
|
|
||||||
background-color: var(--#{$color-name}-tint);
|
|
||||||
|
|
||||||
.alert-link, a {
|
|
||||||
color: var(--#{$color-name}-shade);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.alert-#{$color-name} p {
|
|
||||||
color: var(--color-base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// _forms.scss
|
|
||||||
.form-check {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
padding-left: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-input {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: .3rem;
|
|
||||||
margin-left: -1.25rem;
|
|
||||||
|
|
||||||
&[disabled] ~ .form-check-label,
|
|
||||||
&:disabled ~ .form-check-label {
|
|
||||||
color: global.$gray-600;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-inline {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 0;
|
|
||||||
margin-right: .75rem;
|
|
||||||
|
|
||||||
.form-check-input {
|
|
||||||
position: static;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-right: .3125rem;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// utilities/_align.scss
|
|
||||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
|
||||||
.align-top { vertical-align: top !important; }
|
|
||||||
.align-middle { vertical-align: middle !important; }
|
|
||||||
.align-bottom { vertical-align: bottom !important; }
|
|
||||||
.align-text-bottom { vertical-align: text-bottom !important; }
|
|
||||||
.align-text-top { vertical-align: text-top !important; }
|
|
||||||
|
|
||||||
// utilities/_border.scss
|
|
||||||
.border { border: 1px solid var(--gray-500) !important; }
|
|
||||||
.border-top { border-top: 1px solid var(--gray-500) !important; }
|
|
||||||
.border-right { border-right: 1px solid var(--gray-500) !important; }
|
|
||||||
.border-bottom { border-bottom: 1px solid var(--gray-500) !important; }
|
|
||||||
.border-left { border-left: 1px solid var(--gray-500) !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; }
|
|
||||||
|
|
||||||
@each $color-name, $unused in global.$colors {
|
|
||||||
.border-#{$color-name} {
|
|
||||||
border-color: var(--#{$color-name}) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-white {
|
|
||||||
border-color: var(--white) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// utilities/_flex.scss
|
|
||||||
.flex-row { flex-direction: row !important; }
|
|
||||||
.flex-column { flex-direction: column !important; }
|
|
||||||
.flex-row-reverse { flex-direction: row-reverse !important; }
|
|
||||||
.flex-column-reverse { flex-direction: column-reverse !important; }
|
|
||||||
|
|
||||||
.flex-wrap { flex-wrap: wrap !important; }
|
|
||||||
.flex-nowrap { flex-wrap: nowrap !important; }
|
|
||||||
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
|
||||||
.flex-fill { flex: 1 1 auto !important; }
|
|
||||||
.flex-grow-0 { flex-grow: 0 !important; }
|
|
||||||
.flex-grow-1 { flex-grow: 1 !important; }
|
|
||||||
.flex-shrink-0 { flex-shrink: 0 !important; }
|
|
||||||
.flex-shrink-1 { flex-shrink: 1 !important; }
|
|
||||||
|
|
||||||
.justify-content-start { justify-content: flex-start !important; }
|
|
||||||
.justify-content-end { justify-content: flex-end !important; }
|
|
||||||
.justify-content-center { justify-content: center !important; }
|
|
||||||
.justify-content-between { justify-content: space-between !important; }
|
|
||||||
.justify-content-around { justify-content: space-around !important; }
|
|
||||||
|
|
||||||
.align-items-start { align-items: flex-start !important; }
|
|
||||||
.align-items-end { align-items: flex-end !important; }
|
|
||||||
.align-items-center { align-items: center !important; }
|
|
||||||
.align-items-baseline { align-items: baseline !important; }
|
|
||||||
.align-items-stretch { align-items: stretch !important; }
|
|
||||||
|
|
||||||
.align-content-start { align-content: flex-start !important; }
|
|
||||||
.align-content-end { align-content: flex-end !important; }
|
|
||||||
.align-content-center { align-content: center !important; }
|
|
||||||
.align-content-between { align-content: space-between !important; }
|
|
||||||
.align-content-around { align-content: space-around !important; }
|
|
||||||
.align-content-stretch { align-content: stretch !important; }
|
|
||||||
|
|
||||||
.align-self-auto { align-self: auto !important; }
|
|
||||||
.align-self-start { align-self: flex-start !important; }
|
|
||||||
.align-self-end { align-self: flex-end !important; }
|
|
||||||
.align-self-center { align-self: center !important; }
|
|
||||||
.align-self-baseline { align-self: baseline !important; }
|
|
||||||
.align-self-stretch { align-self: stretch !important; }
|
|
||||||
|
|
||||||
// utilities/_visibility.scss
|
|
||||||
.visible {
|
|
||||||
visibility: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invisible {
|
|
||||||
visibility: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// utilities/_text.scss
|
|
||||||
.text-monospace { font-family: var(--mdl-typography-monospace-font) !important; }
|
|
||||||
.text-justify { text-align: justify !important; }
|
|
||||||
.text-wrap { white-space: normal !important; }
|
|
||||||
.text-nowrap { white-space: nowrap !important; }
|
|
||||||
.text-truncate {
|
|
||||||
@include ellipsis();
|
|
||||||
}
|
|
||||||
.text-left { text-align: left !important; }
|
|
||||||
.text-right { text-align: right !important; }
|
|
||||||
.text-center { text-align: center !important; }
|
|
||||||
.text-lowercase { text-transform: lowercase !important; }
|
|
||||||
.text-uppercase { text-transform: uppercase !important; }
|
|
||||||
.text-capitalize { text-transform: capitalize !important; }
|
|
||||||
.font-weight-light { font-weight: 300 !important; }
|
|
||||||
.font-weight-lighter { font-weight: lighter !important; }
|
|
||||||
.font-weight-normal { font-weight: 400 !important; }
|
|
||||||
.font-weight-bold { font-weight: 700 !important; }
|
|
||||||
.font-weight-bolder { font-weight: bolder !important; }
|
|
||||||
.font-italic { font-style: italic !important; }
|
|
||||||
.text-white { color: var(--white) !important; }
|
|
||||||
|
|
||||||
@each $color-name, $unused in global.$colors {
|
|
||||||
.text-#{$color-name} {
|
|
||||||
color: var(--#{$color-name});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-body { color: var(--ion-text-color) !important; }
|
|
||||||
.text-muted { color: var(--subdued-text-color) !important; }
|
|
||||||
.text-black-50 { color: rgb(0 0 0 / 50%) !important; }
|
|
||||||
.text-white-50 { color: rgb(255 255 255 / 50%) !important; }
|
|
||||||
.text-decoration-none { text-decoration: none !important; }
|
|
||||||
.text-break {
|
|
||||||
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
|
|
||||||
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
|
|
||||||
}
|
|
||||||
.text-reset { color: inherit !important; }
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: inline-block;
|
|
||||||
padding: .25em .4em;
|
|
||||||
font-size: 75%;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.1;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: baseline;
|
|
||||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
||||||
color: var(--white);
|
|
||||||
background-color: var(--medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-important {
|
|
||||||
color: var(--danger-contrast);
|
|
||||||
background-color: var(--danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $color-name, $unused in global.$colors {
|
|
||||||
.label-#{$color-name} {
|
|
||||||
color: var(--#{$color-name}-contrast);
|
|
||||||
background-color: var(--#{$color-name});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-link {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, .btn {
|
|
||||||
margin: 4px 8px;
|
|
||||||
padding-left: 12px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-radius: var(--core-input-radius);
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $color-name, $unused in global.$colors {
|
|
||||||
.btn.btn-#{$color-name} {
|
|
||||||
--color-base: var(--#{$color-name});
|
|
||||||
color: var(--#{$color-name}-shade);
|
|
||||||
border-color: var(--color-base);
|
|
||||||
background-color: var(--#{$color-name}-tint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@import "theme/components/atto.scss";
|
@import "theme/components/atto.scss";
|
||||||
|
@import "theme/components/bootstrap/bootstrap.scss";
|
||||||
}
|
}
|
||||||
|
|
||||||
// h1 is too big and ugly, reduce size when loading.
|
// h1 is too big and ugly, reduce size when loading.
|
||||||
|
|||||||
@ -61,7 +61,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Some styles from 3rd party libraries. */
|
/* Some styles from 3rd party libraries. */
|
||||||
@import "bootstrap.scss";
|
@import "components/bootstrap/utilities/screenreaders.scss";
|
||||||
|
|
||||||
/* Core CSS required for Ionic components to work properly */
|
/* Core CSS required for Ionic components to work properly */
|
||||||
@import "@ionic/angular/css/core.css";
|
@import "@ionic/angular/css/core.css";
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user