From 1c6bbbfca84db4552f196800fb8c69442f888e01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 27 May 2024 13:09:17 +0200 Subject: [PATCH] MOBILE-4600 styles: Separate bootstrap to a component --- src/addons/mod/data/data.scss | 2 + src/theme/components/bootstrap/_alert.scss | 34 +++ src/theme/components/bootstrap/_buttons.scss | 23 ++ src/theme/components/bootstrap/_forms.scss | 36 +++ src/theme/components/bootstrap/_media.scss | 8 + src/theme/components/bootstrap/_reboot.scss | 6 + .../components/bootstrap/_utilities.scss | 5 + src/theme/components/bootstrap/bootstrap.scss | 39 +++ .../bootstrap/utilities/_align.scss | 8 + .../bootstrap/utilities/_borders.scss | 69 +++++ .../components/bootstrap/utilities/_flex.scss | 39 +++ .../bootstrap/utilities/_screenreaders.scss} | 5 +- .../components/bootstrap/utilities/_text.scss | 64 +++++ .../bootstrap/utilities/_visibility.scss | 13 + src/theme/components/format-text.scss | 265 +----------------- src/theme/theme.scss | 2 +- 16 files changed, 352 insertions(+), 266 deletions(-) create mode 100644 src/theme/components/bootstrap/_alert.scss create mode 100644 src/theme/components/bootstrap/_buttons.scss create mode 100644 src/theme/components/bootstrap/_forms.scss create mode 100644 src/theme/components/bootstrap/_media.scss create mode 100644 src/theme/components/bootstrap/_reboot.scss create mode 100644 src/theme/components/bootstrap/_utilities.scss create mode 100644 src/theme/components/bootstrap/bootstrap.scss create mode 100644 src/theme/components/bootstrap/utilities/_align.scss create mode 100644 src/theme/components/bootstrap/utilities/_borders.scss create mode 100644 src/theme/components/bootstrap/utilities/_flex.scss rename src/theme/{bootstrap.scss => components/bootstrap/utilities/_screenreaders.scss} (84%) create mode 100644 src/theme/components/bootstrap/utilities/_text.scss create mode 100644 src/theme/components/bootstrap/utilities/_visibility.scss diff --git a/src/addons/mod/data/data.scss b/src/addons/mod/data/data.scss index 4929ee909..4bd4670bc 100644 --- a/src/addons/mod/data/data.scss +++ b/src/addons/mod/data/data.scss @@ -24,6 +24,8 @@ $grid-column-paddings: ( ::ng-deep { + @import "theme/components/bootstrap/bootstrap.scss"; + table { display: block; } diff --git a/src/theme/components/bootstrap/_alert.scss b/src/theme/components/bootstrap/_alert.scss new file mode 100644 index 000000000..437642366 --- /dev/null +++ b/src/theme/components/bootstrap/_alert.scss @@ -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); + } +} diff --git a/src/theme/components/bootstrap/_buttons.scss b/src/theme/components/bootstrap/_buttons.scss new file mode 100644 index 000000000..550229259 --- /dev/null +++ b/src/theme/components/bootstrap/_buttons.scss @@ -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); + } +} diff --git a/src/theme/components/bootstrap/_forms.scss b/src/theme/components/bootstrap/_forms.scss new file mode 100644 index 000000000..6d5cf10bc --- /dev/null +++ b/src/theme/components/bootstrap/_forms.scss @@ -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; + } + +} diff --git a/src/theme/components/bootstrap/_media.scss b/src/theme/components/bootstrap/_media.scss new file mode 100644 index 000000000..b573052c1 --- /dev/null +++ b/src/theme/components/bootstrap/_media.scss @@ -0,0 +1,8 @@ +.media { + display: flex; + align-items: flex-start; +} + +.media-body { + flex: 1; +} diff --git a/src/theme/components/bootstrap/_reboot.scss b/src/theme/components/bootstrap/_reboot.scss new file mode 100644 index 000000000..8fed4f348 --- /dev/null +++ b/src/theme/components/bootstrap/_reboot.scss @@ -0,0 +1,6 @@ +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} diff --git a/src/theme/components/bootstrap/_utilities.scss b/src/theme/components/bootstrap/_utilities.scss new file mode 100644 index 000000000..cd93459f1 --- /dev/null +++ b/src/theme/components/bootstrap/_utilities.scss @@ -0,0 +1,5 @@ +@import "utilities/align"; +@import "utilities/borders"; +@import "utilities/flex"; +@import "utilities/text"; +@import "utilities/visibility"; diff --git a/src/theme/components/bootstrap/bootstrap.scss b/src/theme/components/bootstrap/bootstrap.scss new file mode 100644 index 000000000..076a9867e --- /dev/null +++ b/src/theme/components/bootstrap/bootstrap.scss @@ -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}); + } +} diff --git a/src/theme/components/bootstrap/utilities/_align.scss b/src/theme/components/bootstrap/utilities/_align.scss new file mode 100644 index 000000000..8b7df9f76 --- /dev/null +++ b/src/theme/components/bootstrap/utilities/_align.scss @@ -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; } diff --git a/src/theme/components/bootstrap/utilities/_borders.scss b/src/theme/components/bootstrap/utilities/_borders.scss new file mode 100644 index 000000000..d947e3b5a --- /dev/null +++ b/src/theme/components/bootstrap/utilities/_borders.scss @@ -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; +} diff --git a/src/theme/components/bootstrap/utilities/_flex.scss b/src/theme/components/bootstrap/utilities/_flex.scss new file mode 100644 index 000000000..f1639e312 --- /dev/null +++ b/src/theme/components/bootstrap/utilities/_flex.scss @@ -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; } diff --git a/src/theme/bootstrap.scss b/src/theme/components/bootstrap/utilities/_screenreaders.scss similarity index 84% rename from src/theme/bootstrap.scss rename to src/theme/components/bootstrap/utilities/_screenreaders.scss index 673073c71..1296bf9bc 100644 --- a/src/theme/bootstrap.scss +++ b/src/theme/components/bootstrap/utilities/_screenreaders.scss @@ -1,4 +1,7 @@ -// Text for accessibility, hidden from the view. +// +// Screenreaders +// + .sr-only, .accesshide { @include sr-only(); diff --git a/src/theme/components/bootstrap/utilities/_text.scss b/src/theme/components/bootstrap/utilities/_text.scss new file mode 100644 index 000000000..79920db8e --- /dev/null +++ b/src/theme/components/bootstrap/utilities/_text.scss @@ -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; } diff --git a/src/theme/components/bootstrap/utilities/_visibility.scss b/src/theme/components/bootstrap/utilities/_visibility.scss new file mode 100644 index 000000000..7756c3bfa --- /dev/null +++ b/src/theme/components/bootstrap/utilities/_visibility.scss @@ -0,0 +1,13 @@ +// stylelint-disable declaration-no-important + +// +// Visibility utilities +// + +.visible { + visibility: visible !important; +} + +.invisible { + visibility: hidden !important; +} diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 69080473e..8817196ec 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -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. diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 4596a0cf2..31a41afe7 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -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";