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 {
|
||||
|
||||
@import "theme/components/bootstrap/bootstrap.scss";
|
||||
|
||||
table {
|
||||
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 {
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
// 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.
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user