EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4600 styles: Separate bootstrap to a component

main
Pau Ferrer Ocaña 2024-05-27 13:09:17 +02:00
parent 0771ccc278
commit 1c6bbbfca8
16 changed files with 352 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/mod/data/data.scss
View File

@ -24,6 +24,8 @@ $grid-column-paddings: (
::ng-deep {
@import "theme/components/bootstrap/bootstrap.scss";
table {
display: block;
}

34
src/theme/components/bootstrap/_alert.scss 100644
View 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 100644
View 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 100644
View 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 100644
View File

@ -0,0 +1,8 @@
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}

6
src/theme/components/bootstrap/_reboot.scss 100644
View File

@ -0,0 +1,6 @@
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}

5
src/theme/components/bootstrap/_utilities.scss 100644
View 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 100644
View 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 100644
View 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 100644
View 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 100644
View 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; }

5
src/theme/bootstrap.scss → src/theme/components/bootstrap/utilities/_screenreaders.scss
View File

@ -1,4 +1,7 @@
// Text for accessibility, hidden from the view.
//
// Screenreaders
//
.sr-only, .accesshide {
@include sr-only();

64
src/theme/components/bootstrap/utilities/_text.scss 100644
View 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 100644
View File

@ -0,0 +1,13 @@
// stylelint-disable declaration-no-important
//
// Visibility utilities
//
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}

265
src/theme/components/format-text.scss
View File

@ -364,271 +364,8 @@ core-rich-text-editor .core-rte-editor {
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/bootstrap/bootstrap.scss";
}
// h1 is too big and ugly, reduce size when loading.

2
src/theme/theme.scss
View File

@ -61,7 +61,7 @@ html {
}
/* Some styles from 3rd party libraries. */
@import "bootstrap.scss";
@import "components/bootstrap/utilities/screenreaders.scss";
/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";