diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..afc157a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,33 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +indent_style = space +indent_size = 4 + +[*.scss] +indent_style = space +indent_size = 4 + +[*.vue] +indent_style = space +indent_size = 4 + +[*.ts] +indent_style = space +indent_size = 4 + +[*.js] +indent_style = space +indent_size = 4 + +[*.md] +trim_trailing_whitespace = false \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs index 8544740..e92ae46 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -5,7 +5,17 @@ import prettierPlugin from "eslint-plugin-prettier/recommended"; import typescriptConfig from "@vue/eslint-config-typescript"; import prettierConfig from "@vue/eslint-config-prettier"; +import { includeIgnoreFile } from "@eslint/compat"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const gitignorePath = path.resolve(__dirname, ".gitignore"); + export default [ + // include ignore .gitignore patterns + includeIgnoreFile(gitignorePath), // add more generic rulesets here ...vuePlugin.configs["flat/recommended"], ...typescriptConfig(), diff --git a/package-lock.json b/package-lock.json index b5bde10..0b46b4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "bootstrap": "^5.3.3" }, "devDependencies": { + "@eslint/compat": "^1.2.7", "@oruga-ui/examples": "0.9.3", "@oruga-ui/oruga-next": "0.9.3", "@types/node": "^22.13.5", @@ -637,6 +638,24 @@ "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, + "node_modules/@eslint/compat": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.7.tgz", + "integrity": "sha512-xvv7hJE32yhegJ8xNAnb62ggiAwTYHBpUCWhRxEj/ksvgDJuSXfoDkBcRYaYNFiJ+jH0IE3K16hd+xXzhBgNbg==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "peerDependencies": { + "eslint": "^9.10.0" + }, + "peerDependenciesMeta": { + "eslint": { + "optional": true + } + } + }, "node_modules/@eslint/config-array": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz", diff --git a/package.json b/package.json index de3a4f5..2dc165c 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "bootstrap": "^5.3.3" }, "devDependencies": { + "@eslint/compat": "^1.2.7", "@oruga-ui/examples": "0.9.3", "@oruga-ui/oruga-next": "0.9.3", "@types/node": "^22.13.5", @@ -66,4 +67,4 @@ "vue-router": "4.5.0", "vue-tsc": "2.2.4" } -} \ No newline at end of file +} diff --git a/src/App.vue b/src/App.vue index 3c4ad27..9a14ce4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,107 +3,107 @@ import components from "@/components"; diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss index d9f2b9f..735b275 100644 --- a/src/assets/scss/components/_autocomplete.scss +++ b/src/assets/scss/components/_autocomplete.scss @@ -3,12 +3,12 @@ $autocomplete-menu-max-height: 200px !default; /* @docs */ .autocomplete { - --#{$prefix}autocomplete-menu-max-height: #{$autocomplete-menu-max-height}; - display: inline-block; + --#{$prefix}autocomplete-menu-max-height: #{$autocomplete-menu-max-height}; + display: inline-block; - .dropdown-menu { - max-height: var(--#{$prefix}autocomplete-menu-max-height); - overflow: auto; - width: 100%; - } + .dropdown-menu { + max-height: var(--#{$prefix}autocomplete-menu-max-height); + overflow: auto; + width: 100%; + } } diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss index 8d9c689..8bb3bf7 100644 --- a/src/assets/scss/components/_button.scss +++ b/src/assets/scss/components/_button.scss @@ -56,86 +56,88 @@ $btn-hover-box-shadow: $box-shadow-sm !default; /* @bootstrap docs */ .btn { - --#{$prefix}btn-spacer: #{$btn-spacer}; - --#{$prefix}btn-height: #{$btn-height}; - --#{$prefix}btn-border-color: #{$btn-border-color}; - --#{$prefix}btn-hover-border-color: #{$btn-hover-border-color}; - --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow}; - --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color); - - display: inline-flex; - align-items: center; - justify-content: center; - min-height: var(--#{$prefix}btn-height); - - .button-wrapper { + --#{$prefix}btn-spacer: #{$btn-spacer}; + --#{$prefix}btn-height: #{$btn-height}; + --#{$prefix}btn-border-color: #{$btn-border-color}; + --#{$prefix}btn-hover-border-color: #{$btn-hover-border-color}; + --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow}; + --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color); + display: inline-flex; align-items: center; - } + justify-content: center; + min-height: var(--#{$prefix}btn-height); + + .button-wrapper { + display: inline-flex; + align-items: center; + } - .icon { - margin: 0 4px; + .icon { + margin: 0 4px; - &:not(:last-child) { - margin-right: var(--#{$prefix}btn-spacer); + &:not(:last-child) { + margin-right: var(--#{$prefix}btn-spacer); + } + + &:not(:first-child) { + margin-left: var(--#{$prefix}btn-spacer); + } } - &:not(:first-child) { - margin-left: var(--#{$prefix}btn-spacer); + &:hover { + box-shadow: var(--#{$prefix}btn-hover-box-shadow); } - } - - &:hover { - box-shadow: var(--#{$prefix}btn-hover-box-shadow); - } - - &.expanded { - width: 100%; - } - - &.disabled, - &.btn-disabled { - pointer-events: auto; - cursor: auto; - } - - &.btn-inverted { - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-border-color: transparent; - } - - // inverted color - @each $name, $color in $theme-colors { - &.variant-#{$name}-inverted, - &.btn-inverted-#{$name} { - // default style - --#{$prefix}btn-color: var(--#{$prefix}#{$name}); - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-border-color: transparent; - - // hover style - --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}); - --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}-bg-subtle); - --#{$prefix}btn-hover-border-color: var( - --#{$prefix}#{$name}-border-subtle - ); + + &.expanded { + width: 100%; + } + + &.disabled, + &.btn-disabled { + pointer-events: auto; + cursor: auto; + } + + &.btn-inverted { + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; } - &.variant-#{$name}-subtle, - &.btn-#{$name}-subtle { - // default style - --#{$prefix}btn-color: var(--#{$prefix}#{$name}); - --#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle); - --#{$prefix}btn-border-color: var(--#{$prefix}#{$name}-border-subtle); - - // hover style - --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-contrast); - --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}); - --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name}); + // inverted color + @each $name, $color in $theme-colors { + &.variant-#{$name}-inverted, + &.btn-inverted-#{$name} { + // default style + --#{$prefix}btn-color: var(--#{$prefix}#{$name}); + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; + + // hover style + --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}); + --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}-bg-subtle); + --#{$prefix}btn-hover-border-color: var( + --#{$prefix}#{$name}-border-subtle + ); + } + + &.variant-#{$name}-subtle, + &.btn-#{$name}-subtle { + // default style + --#{$prefix}btn-color: var(--#{$prefix}#{$name}); + --#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle); + --#{$prefix}btn-border-color: var( + --#{$prefix}#{$name}-border-subtle + ); + + // hover style + --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-contrast); + --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name}); + --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name}); + } } - } } .btn:not(:last-child):not(.btn-expanded):has(+ .btn) { - margin-right: var(--#{$prefix}btn-spacer); + margin-right: var(--#{$prefix}btn-spacer); } diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss index 243395f..bfacf6c 100644 --- a/src/assets/scss/components/_carousel.scss +++ b/src/assets/scss/components/_carousel.scss @@ -38,170 +38,170 @@ $carousel-indicator-spacer: $spacer !default; /* @bootstrap docs */ .carousel { - --#{$prefix}carousel-control-top: #{$carousel-control-top}; - --#{$prefix}carousel-overlay-background: #{$carousel-overlay-background}; - --#{$prefix}carousel-overlay-zindex: #{$carousel-overlay-zindex}; - --#{$prefix}carousel-indicator-bg: #{$carousel-indicator-bg}; - --#{$prefix}carousel-indicator-size: #{$carousel-indicator-size}; - --#{$prefix}carousel-indicator-spacer: #{$carousel-indicator-spacer}; - - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - position: relative; - overflow: hidden; - width: 100%; - - &.carousel-overlay { - position: fixed; - bottom: 0; - left: 0; - right: 0; - top: 0; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - max-height: 100vh; - background-color: var(--#{$prefix}carousel-overlay-background); - z-index: var(--#{$prefix}carousel-overlay-zindex); - - .carousel-indicator.has-background { - background: transparent; - } - } - - .carousel-scene { - width: 100%; + --#{$prefix}carousel-control-top: #{$carousel-control-top}; + --#{$prefix}carousel-overlay-background: #{$carousel-overlay-background}; + --#{$prefix}carousel-overlay-zindex: #{$carousel-overlay-zindex}; + --#{$prefix}carousel-indicator-bg: #{$carousel-indicator-bg}; + --#{$prefix}carousel-indicator-size: #{$carousel-indicator-size}; + --#{$prefix}carousel-indicator-spacer: #{$carousel-indicator-spacer}; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; position: relative; + overflow: hidden; + width: 100%; - .carousel-items { - display: flex; - overflow: visible; + &.carousel-overlay { + position: fixed; + bottom: 0; + left: 0; + right: 0; + top: 0; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + max-height: 100vh; + background-color: var(--#{$prefix}carousel-overlay-background); + z-index: var(--#{$prefix}carousel-overlay-zindex); + + .carousel-indicator.has-background { + background: transparent; + } + } - &:not(.dragging) { - transition: all $speed-slower ease-out 0s; - } + .carousel-scene { + width: 100%; + position: relative; - .carousel-item { - flex-shrink: 0; - border: 2px solid transparent; - display: block; - margin: unset; - } - } - } - - .carousel-indicators { - .carousel-indicator { - flex: 0 1 auto; - padding: 0; - box-sizing: content-box; - margin-right: var( - --#{$prefix}carousel-indicator-spacer, - $carousel-indicator-spacer - ); - margin-left: var( - --#{$prefix}carousel-indicator-spacer, - $carousel-indicator-spacer - ); - cursor: pointer; - border: 0; - border-top: var( - --#{$prefix}carousel-indicator-hit-area-height, - $carousel-indicator-hit-area-height - ) - solid transparent; - border-bottom: var( - --#{$prefix}carousel-indicator-hit-area-height, - $carousel-indicator-hit-area-height - ) - solid transparent; - - & > .carousel-indicator-item { - display: block; - background-color: var( - --#{$prefix}carousel-indicator-active-bg, - $carousel-indicator-active-bg - ); - background-clip: padding-box; - opacity: var( - --#{$prefix}carousel-indicator-opacity, - $carousel-indicator-opacity - ); - transition: var( - --#{$prefix}carousel-indicator-transition, - $carousel-indicator-transition - ); - width: var( - --#{$prefix}carousel-indicator-width, - $carousel-indicator-width - ); - height: var( - --#{$prefix}carousel-indicator-height, - $carousel-indicator-height - ); - - &.active { - opacity: var( - --#{$prefix}carousel-indicator-active-opacity, - $carousel-indicator-active-opacity - ); - } + .carousel-items { + display: flex; + overflow: visible; - &.indicator-dots, - &.indicator-boxes { - height: var(--#{$prefix}carousel-indicator-size); - width: var(--#{$prefix}carousel-indicator-size); - } + &:not(.dragging) { + transition: all $speed-slower ease-out 0s; + } - &.indicator-dots { - border-radius: 50%; + .carousel-item { + flex-shrink: 0; + border: 2px solid transparent; + display: block; + margin: unset; + } } - } } - &:not(.inside) { - position: relative; + .carousel-indicators { + .carousel-indicator { + flex: 0 1 auto; + padding: 0; + box-sizing: content-box; + margin-right: var( + --#{$prefix}carousel-indicator-spacer, + $carousel-indicator-spacer + ); + margin-left: var( + --#{$prefix}carousel-indicator-spacer, + $carousel-indicator-spacer + ); + cursor: pointer; + border: 0; + border-top: var( + --#{$prefix}carousel-indicator-hit-area-height, + $carousel-indicator-hit-area-height + ) + solid transparent; + border-bottom: var( + --#{$prefix}carousel-indicator-hit-area-height, + $carousel-indicator-hit-area-height + ) + solid transparent; + + & > .carousel-indicator-item { + display: block; + background-color: var( + --#{$prefix}carousel-indicator-active-bg, + $carousel-indicator-active-bg + ); + background-clip: padding-box; + opacity: var( + --#{$prefix}carousel-indicator-opacity, + $carousel-indicator-opacity + ); + transition: var( + --#{$prefix}carousel-indicator-transition, + $carousel-indicator-transition + ); + width: var( + --#{$prefix}carousel-indicator-width, + $carousel-indicator-width + ); + height: var( + --#{$prefix}carousel-indicator-height, + $carousel-indicator-height + ); + + &.active { + opacity: var( + --#{$prefix}carousel-indicator-active-opacity, + $carousel-indicator-active-opacity + ); + } + + &.indicator-dots, + &.indicator-boxes { + height: var(--#{$prefix}carousel-indicator-size); + width: var(--#{$prefix}carousel-indicator-size); + } + + &.indicator-dots { + border-radius: 50%; + } + } + } - .carousel-indicator > .carousel-indicator-item { - background-color: var( - --#{$prefix}carousel-indicator-bg, - $carousel-indicator-bg - ); - } - } + &:not(.inside) { + position: relative; - &.inside { - position: absolute; + .carousel-indicator > .carousel-indicator-item { + background-color: var( + --#{$prefix}carousel-indicator-bg, + $carousel-indicator-bg + ); + } + } - &.position-bottom { - bottom: 0; - top: unset; - margin-bottom: var(--#{$prefix}carousel-indicator-spacer); - } + &.inside { + position: absolute; - &.position-top { - top: 0; - bottom: unset; - margin-top: var(--#{$prefix}carousel-indicator-spacer); - } + &.position-bottom { + bottom: 0; + top: unset; + margin-bottom: var(--#{$prefix}carousel-indicator-spacer); + } + + &.position-top { + top: 0; + bottom: unset; + margin-top: var(--#{$prefix}carousel-indicator-spacer); + } + } } - } - - .carousel-control-next-icon, - .carousel-control-prev-icon { - cursor: pointer; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - top: var(--#{$prefix}carousel-control-top); - width: var(--#{$prefix}carousel-control-width, $carousel-control-width); - - i { - visibility: hidden; + + .carousel-control-next-icon, + .carousel-control-prev-icon { + cursor: pointer; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + top: var(--#{$prefix}carousel-control-top); + width: var(--#{$prefix}carousel-control-width, $carousel-control-width); + + i { + visibility: hidden; + } } - } } diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss index 0100ea0..328bfde 100644 --- a/src/assets/scss/components/_checkbox.scss +++ b/src/assets/scss/components/_checkbox.scss @@ -37,119 +37,127 @@ /* @bootstrap docs */ @function checkmarkSVG($color) { - @return escape-svg( - str-replace( - $form-check-input-checked-bg-image, - "#{$form-check-input-checked-color}", - $color - ) - ); + @return escape-svg( + str-replace( + $form-check-input-checked-bg-image, + "#{$form-check-input-checked-color}", + $color + ) + ); } @function checkcircleSVG($color) { - @return escape-svg( - str-replace( - $form-check-radio-checked-bg-image, - "#{$form-check-input-checked-color}", - $color - ) - ); + @return escape-svg( + str-replace( + $form-check-radio-checked-bg-image, + "#{$form-check-input-checked-color}", + $color + ) + ); } @function indeterminateSVG($color) { - @return escape-svg( - str-replace( - $form-check-input-indeterminate-bg-image, - "#{$form-check-input-indeterminate-color}", - $color - ) - ); + @return escape-svg( + str-replace( + $form-check-input-indeterminate-bg-image, + "#{$form-check-input-indeterminate-color}", + $color + ) + ); } .form-check { - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - input[type="radio"], - input[type="checkbox"] { - background-color: var(--#{$prefix}#{$name}); - border-color: var(--#{$prefix}#{$name}); - } - } - } - - // Color variant inverted - @each $name, $color in $theme-colors { - &.variant-#{$name}-inverted { - input[type="radio"], - input[type="checkbox"] { - background-color: transparent; - border-color: var(--#{$prefix}#{$name}); - - &[type="checkbox"] { - &:checked { - --#{$prefix}form-check-bg-image: #{checkmarkSVG($color)}; - } - - &:indeterminate { - --#{$prefix}form-check-bg-image: #{indeterminateSVG($color)}; - } - } - - &[type="radio"]:checked { - --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)}; + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + input[type="radio"], + input[type="checkbox"] { + background-color: var(--#{$prefix}#{$name}); + border-color: var(--#{$prefix}#{$name}); + } } - } } - &.variant-#{$name}-subtle { - $color: map.get($theme-colors-bg-subtle, #{$name}); - - input[type="radio"], - input[type="checkbox"] { - background-color: transparent; - border-color: var(--#{$prefix}#{$name}-border-subtle); - - &[type="checkbox"] { - &:checked { - --#{$prefix}form-check-bg-image: #{checkmarkSVG($color)}; - } - - &:indeterminate { - --#{$prefix}form-check-bg-image: #{indeterminateSVG($color)}; - } + // Color variant inverted + @each $name, $color in $theme-colors { + &.variant-#{$name}-inverted { + input[type="radio"], + input[type="checkbox"] { + background-color: transparent; + border-color: var(--#{$prefix}#{$name}); + + &[type="checkbox"] { + &:checked { + --#{$prefix}form-check-bg-image: #{checkmarkSVG( + $color + )}; + } + + &:indeterminate { + --#{$prefix}form-check-bg-image: #{indeterminateSVG( + $color + )}; + } + } + + &[type="radio"]:checked { + --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)}; + } + } } - &[type="radio"]:checked { - --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)}; + &.variant-#{$name}-subtle { + $color: map.get($theme-colors-bg-subtle, #{$name}); + + input[type="radio"], + input[type="checkbox"] { + background-color: transparent; + border-color: var(--#{$prefix}#{$name}-border-subtle); + + &[type="checkbox"] { + &:checked { + --#{$prefix}form-check-bg-image: #{checkmarkSVG( + $color + )}; + } + + &:indeterminate { + --#{$prefix}form-check-bg-image: #{indeterminateSVG( + $color + )}; + } + } + + &[type="radio"]:checked { + --#{$prefix}form-check-bg-image: #{checkcircleSVG($color)}; + } + } } - } } - } - - // Sizes - @each $name, $size in $sizes { - &.size-#{$name} { - font-size: $size; - - // input size should not defined for switch style - &:not(.form-switch) { - input[type="radio"], - input[type="checkbox"] { - width: $size; - height: $size; - margin-right: calc(#{$size} / 2); + + // Sizes + @each $name, $size in $sizes { + &.size-#{$name} { + font-size: $size; + + // input size should not defined for switch style + &:not(.form-switch) { + input[type="radio"], + input[type="checkbox"] { + width: $size; + height: $size; + margin-right: calc(#{$size} / 2); + } + } } - } } - } - &.disabled, - &.disabled .form-check-label { - cursor: not-allowed; - } + &.disabled, + &.disabled .form-check-label { + cursor: not-allowed; + } } .input-field.input-group { - .form-check { - @extend .form-check-inline; - } + .form-check { + @extend .form-check-inline; + } } diff --git a/src/assets/scss/components/_collapse.scss b/src/assets/scss/components/_collapse.scss index 91ac583..a10f0f7 100644 --- a/src/assets/scss/components/_collapse.scss +++ b/src/assets/scss/components/_collapse.scss @@ -4,14 +4,14 @@ /* @bootstrap docs */ .collapse { - @extend .show; + @extend .show; - &-trigger { - cursor: pointer; - display: inline-block; - } + &-trigger { + cursor: pointer; + display: inline-block; + } - &-content { - display: inherit; - } + &-content { + display: inherit; + } } diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss index 95ba7b0..f4746f7 100644 --- a/src/assets/scss/components/_datepicker.scss +++ b/src/assets/scss/components/_datepicker.scss @@ -26,252 +26,259 @@ $datepicker-dropdown-max-width: 420px !default; /* @docs */ .datepicker { - --#{$prefix}datepicker-section-spacer: #{$datepicker-section-spacer}; - --#{$prefix}datepicker-section-border: #{$datepicker-section-border}; - - .datepicker-header { - padding-bottom: var(--#{$prefix}datepicker-section-spacer); - margin-bottom: var(--#{$prefix}datepicker-section-spacer); - border-bottom: var(--#{$prefix}datepicker-section-border); - justify-content: center; - - .pagination { - --#{$prefix}datepicker-pagination-spacer: #{$datepicker-pagination-spacer}; - - justify-content: center; - text-align: center; - gap: var(--#{$prefix}datepicker-pagination-spacer); - min-width: calc(295px + 4 * $datepicker-pagination-spacer); - - .pagination-previous, - .pagination-next { - margin: 0; - color: var(--#{$prefix}btn-color); - } - - .pagination-previous { - order: 1; - } - - .pagination-list { - order: 2; - display: flex; - flex-wrap: wrap; - gap: inherit; + --#{$prefix}datepicker-section-spacer: #{$datepicker-section-spacer}; + --#{$prefix}datepicker-section-border: #{$datepicker-section-border}; + + .datepicker-header { + padding-bottom: var(--#{$prefix}datepicker-section-spacer); + margin-bottom: var(--#{$prefix}datepicker-section-spacer); + border-bottom: var(--#{$prefix}datepicker-section-border); justify-content: center; - } - .pagination-next { - order: 3; - } - } - } - - .datepicker-footer { - padding-top: var(--#{$prefix}datepicker-section-spacer); - margin-top: var(--#{$prefix}datepicker-section-spacer); - border-top: var(--#{$prefix}datepicker-section-border); - } - - .datepicker-cell { - --#{$prefix}datepicker-cell-padding: #{$datepicker-cell-padding}; - --#{$prefix}datepicker-cell-width: #{$datepicker-cell-width}; - --#{$prefix}datepicker-cell-border-width: #{$datepicker-cell-border-width}; - --#{$prefix}datepicker-cell-border-color: #{$datepicker-cell-border-color}; - --#{$prefix}datepicker-cell-border-radius: #{$datepicker-cell-border-radius}; - --#{$prefix}datepicker-cell-font-weight: #{$datepicker-cell-font-weight}; - --#{$prefix}datepicker-cell-color: #{$datepicker-cell-color}; - --#{$prefix}datepicker-cell-bg: #{$datepicker-cell-bg}; - --#{$prefix}datepicker-cell-hovered-color: #{$datepicker-cell-hovered-color}; - --#{$prefix}datepicker-cell-hovered-bg: #{$datepicker-cell-hovered-bg}; - --#{$prefix}datepicker-cell-selected-color: #{$datepicker-cell-selected-color}; - --#{$prefix}datepicker-cell-selected-bg: #{$datepicker-cell-selected-bg}; - - display: table-cell; - padding: var(--#{$prefix}datepicker-cell-padding); - width: var(--#{$prefix}datepicker-cell-width); - color: var(--#{$prefix}datepicker-cell-color); - background-color: var(--#{$prefix}datepicker-cell-bg); - font-weight: var(--#{$prefix}datepicker-cell-font-weight); - text-decoration: none; - text-align: center; - border: var(--#{$prefix}datepicker-cell-border-width) solid - var(--#{$prefix}datepicker-cell-border-color); - border-radius: var(--#{$prefix}datepicker-cell-border-radius); - - &.selectable { - font-weight: var(--#{$prefix}datepicker-cell-font-weight); - } + .pagination { + --#{$prefix}datepicker-pagination-spacer: #{$datepicker-pagination-spacer}; - &.today { - --#{$prefix}datepicker-cell-color: var( - --#{$prefix}datepicker-cell-selected-bg - ); - --#{$prefix}datepicker-cell-border-color: var( - --#{$prefix}datepicker-cell-selected-bg - ); - } + justify-content: center; + text-align: center; + gap: var(--#{$prefix}datepicker-pagination-spacer); + min-width: calc(295px + 4 * $datepicker-pagination-spacer); - &.selected { - --#{$prefix}datepicker-cell-color: var( - --#{$prefix}datepicker-cell-selected-color - ); - --#{$prefix}datepicker-cell-bg: var( - --#{$prefix}datepicker-cell-selected-bg - ); - } + .pagination-previous, + .pagination-next { + margin: 0; + color: var(--#{$prefix}btn-color); + } - &[class*="hovered-"] { - --#{$prefix}datepicker-cell-color: var( - --#{$prefix}datepicker-cell-hovered-color - ); - --#{$prefix}datepicker-cell-bg: var( - --#{$prefix}datepicker-cell-hovered-bg - ); - } + .pagination-previous { + order: 1; + } - &.hovered-first, - &.selected-first { - opacity: 1; - border-radius: var(--#{$prefix}datepicker-cell-border-radius); - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + .pagination-list { + order: 2; + display: flex; + flex-wrap: wrap; + gap: inherit; + justify-content: center; + } - &.hovered-last, - &.selected-last { - opacity: 1; - border-radius: var(--#{$prefix}datepicker-cell-border-radius); - border-top-left-radius: 0; - border-bottom-left-radius: 0; + .pagination-next { + order: 3; + } + } } - &.hovered-within, - &.selected-within:not([class*="hovered-"]) { - opacity: 0.5; - border-radius: 0; + .datepicker-footer { + padding-top: var(--#{$prefix}datepicker-section-spacer); + margin-top: var(--#{$prefix}datepicker-section-spacer); + border-top: var(--#{$prefix}datepicker-section-border); } - } - .datepicker-table { - display: table; - margin: 0 auto 0 auto; + .datepicker-cell { + --#{$prefix}datepicker-cell-padding: #{$datepicker-cell-padding}; + --#{$prefix}datepicker-cell-width: #{$datepicker-cell-width}; + --#{$prefix}datepicker-cell-border-width: #{$datepicker-cell-border-width}; + --#{$prefix}datepicker-cell-border-color: #{$datepicker-cell-border-color}; + --#{$prefix}datepicker-cell-border-radius: #{$datepicker-cell-border-radius}; + --#{$prefix}datepicker-cell-font-weight: #{$datepicker-cell-font-weight}; + --#{$prefix}datepicker-cell-color: #{$datepicker-cell-color}; + --#{$prefix}datepicker-cell-bg: #{$datepicker-cell-bg}; + --#{$prefix}datepicker-cell-hovered-color: #{$datepicker-cell-hovered-color}; + --#{$prefix}datepicker-cell-hovered-bg: #{$datepicker-cell-hovered-bg}; + --#{$prefix}datepicker-cell-selected-color: #{$datepicker-cell-selected-color}; + --#{$prefix}datepicker-cell-selected-bg: #{$datepicker-cell-selected-bg}; + + display: table-cell; + padding: var(--#{$prefix}datepicker-cell-padding); + width: var(--#{$prefix}datepicker-cell-width); + color: var(--#{$prefix}datepicker-cell-color); + background-color: var(--#{$prefix}datepicker-cell-bg); + font-weight: var(--#{$prefix}datepicker-cell-font-weight); + text-decoration: none; + text-align: center; + border: var(--#{$prefix}datepicker-cell-border-width) solid + var(--#{$prefix}datepicker-cell-border-color); + border-radius: var(--#{$prefix}datepicker-cell-border-radius); + + &.selectable { + font-weight: var(--#{$prefix}datepicker-cell-font-weight); + } - .datepicker-header { - display: table-header-group; - margin-bottom: 0; + &.today { + --#{$prefix}datepicker-cell-color: var( + --#{$prefix}datepicker-cell-selected-bg + ); + --#{$prefix}datepicker-cell-border-color: var( + --#{$prefix}datepicker-cell-selected-bg + ); + } - .datepicker-cell { - font-weight: 600; - } - } + &.selected { + --#{$prefix}datepicker-cell-color: var( + --#{$prefix}datepicker-cell-selected-color + ); + --#{$prefix}datepicker-cell-bg: var( + --#{$prefix}datepicker-cell-selected-bg + ); + } - .datepicker-body { - display: table-row-group; + &[class*="hovered-"] { + --#{$prefix}datepicker-cell-color: var( + --#{$prefix}datepicker-cell-hovered-color + ); + --#{$prefix}datepicker-cell-bg: var( + --#{$prefix}datepicker-cell-hovered-bg + ); + } - .datepicker-row { - display: table-row; + &.hovered-first, + &.selected-first { + opacity: 1; + border-radius: var(--#{$prefix}datepicker-cell-border-radius); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - .datepicker-cell { - position: relative; + &.hovered-last, + &.selected-last { + opacity: 1; + border-radius: var(--#{$prefix}datepicker-cell-border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } - &.unselectable { + &.hovered-within, + &.selected-within:not([class*="hovered-"]) { opacity: 0.5; - cursor: not-allowed; - } - - &.has-event { - .events { - display: flex; - justify-content: center; - position: absolute; - left: 0; - width: 100%; - - .event { - background-color: $danger; // Default variant - - @each $name, $color in $theme-colors { - &.variant-#{$name} { - background-color: $color; - } - } - } - } + border-radius: 0; + } + } - &.dots .event { - border-radius: 50%; - height: 0.35em; - margin: 0 0.1em; - width: 0.35em; - } + .datepicker-table { + display: table; + margin: 0 auto 0 auto; - &.bars .event { - height: 0.25em; - width: 100%; - } - } + .datepicker-header { + display: table-header-group; + margin-bottom: 0; - &.selected .events .event { - // Currently datepicker only uses primary coloring - // Ensure indicator is visible when selected + .datepicker-cell { + font-weight: 600; + } + } - &.variant-primary { - background-color: color.adjust($primary, $lightness: 15%); + .datepicker-body { + display: table-row-group; + + .datepicker-row { + display: table-row; + + .datepicker-cell { + position: relative; + + &.unselectable { + opacity: 0.5; + cursor: not-allowed; + } + + &.has-event { + .events { + display: flex; + justify-content: center; + position: absolute; + left: 0; + width: 100%; + + .event { + background-color: $danger; // Default variant + + @each $name, $color in $theme-colors { + &.variant-#{$name} { + background-color: $color; + } + } + } + } + + &.dots .event { + border-radius: 50%; + height: 0.35em; + margin: 0 0.1em; + width: 0.35em; + } + + &.bars .event { + height: 0.25em; + width: 100%; + } + } + + &.selected .events .event { + // Currently datepicker only uses primary coloring + // Ensure indicator is visible when selected + + &.variant-primary { + background-color: color.adjust( + $primary, + $lightness: 15% + ); + } + } + } } - } } - } } - } - - .datepicker-month { - --#{$prefix}datepicker-month-width: #{$datepicker-month-width}; - --#{$prefix}datepicker-month-cell-spacer: #{$datepicker-month-cell-spacer}; - --#{$prefix}datepicker-month-cell-height: #{$datepicker-month-cell-height}; - - display: table; - margin: 0 auto 0 auto; - - .datepicker-body { - .datepicker-table { - display: inline-flex; - flex-wrap: wrap; - flex-direction: row; - width: var(--#{$prefix}datepicker-month-width); - gap: var(--#{$prefix}datepicker-month-cell-spacer); - margin-right: calc(var(--#{$prefix}datepicker-month-cell-spacer) * -1); - - .datepicker-cell { - width: calc(33.33% - var(--#{$prefix}datepicker-month-cell-spacer)); - height: var(--#{$prefix}datepicker-month-cell-height); + + .datepicker-month { + --#{$prefix}datepicker-month-width: #{$datepicker-month-width}; + --#{$prefix}datepicker-month-cell-spacer: #{$datepicker-month-cell-spacer}; + --#{$prefix}datepicker-month-cell-height: #{$datepicker-month-cell-height}; + + display: table; + margin: 0 auto 0 auto; + + .datepicker-body { + .datepicker-table { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + width: var(--#{$prefix}datepicker-month-width); + gap: var(--#{$prefix}datepicker-month-cell-spacer); + margin-right: calc( + var(--#{$prefix}datepicker-month-cell-spacer) * -1 + ); + + .datepicker-cell { + width: calc( + 33.33% - var(--#{$prefix}datepicker-month-cell-spacer) + ); + height: var(--#{$prefix}datepicker-month-cell-height); + } + } } - } } - } - - // on mobile modal - &.mobile { - .pagination > .pagination-list { - flex-grow: 1; - flex-shrink: 1; - justify-content: center; + + // on mobile modal + &.mobile { + .pagination > .pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: center; + } } - } - // modal size adjustments - &.dropdown.dropdown-modal > .dropdown-menu { - --#{$prefix}dropdown-width: #{$datepicker-dropdown-width}; - --#{$prefix}dropdown-min-width: #{$datepicker-dropdown-min-width}; - --#{$prefix}dropdown-max-width: #{$datepicker-dropdown-max-width}; - } + // modal size adjustments + &.dropdown.dropdown-modal > .dropdown-menu { + --#{$prefix}dropdown-width: #{$datepicker-dropdown-width}; + --#{$prefix}dropdown-min-width: #{$datepicker-dropdown-min-width}; + --#{$prefix}dropdown-max-width: #{$datepicker-dropdown-max-width}; + } - // datetimepicker overrides - .timepicker { - .dropdown-menu { - --#{$prefix}dropdown-border-color: transparent; + // datetimepicker overrides + .timepicker { + .dropdown-menu { + --#{$prefix}dropdown-border-color: transparent; - display: contents; + display: contents; + } } - } } diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss index 4394d5f..f526834 100644 --- a/src/assets/scss/components/_dropdown.scss +++ b/src/assets/scss/components/_dropdown.scss @@ -40,166 +40,166 @@ $dropdown-modal-backdrop-zindex: $zindex-modal-backdrop !default; /* @bootstrap docs */ .dropdown { - display: inline-block; - vertical-align: middle; - - .dropdown-trigger { display: inline-block; - } - - &.expanded, - &.expanded .dropdown-trigger { - width: 100%; - display: block; - } - - &.disabled { - cursor: not-allowed; - } - - .dropdown-menu { - // disable dropdown-item effects when not clickable - .dropdown-item:not(.clickable) { - &:hover, - &:active { - --#{$prefix}dropdown-link-active-bg: transparent; - --#{$prefix}dropdown-link-hover-bg: transparent; - } + vertical-align: middle; + + .dropdown-trigger { + display: inline-block; } - // position classes - &.position { - &-top { - top: auto; - right: auto; - bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); - left: 50%; - transform: translateX(-50%); - } - - &-left { - top: 50%; - right: calc(100% + var(--#{$prefix}dropdown-spacer)); - bottom: auto; - left: auto; - transform: translateY(-50%); - } - - &-bottom { - top: calc(100% + var(--#{$prefix}dropdown-spacer)); - left: 50%; - bottom: auto; - right: auto; - transform: translateX(-50%); - } - - &-right { - top: 50%; - right: auto; - bottom: auto; - left: calc(100% + var(--#{$prefix}dropdown-spacer)); - transform: translateY(-50%); - } - - &-top-right { - top: auto; - right: 0; - bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); - left: auto; - } - - &-top-left { - top: auto; - right: auto; - bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); - left: 0; - } - - &-bottom-right { - top: calc(100% + var(--#{$prefix}dropdown-spacer)); - right: 0; - bottom: auto; - left: auto; - } - - &-bottom-left { - top: calc(100% + var(--#{$prefix}dropdown-spacer)); - right: auto; - bottom: auto; - left: 0; - } + &.expanded, + &.expanded .dropdown-trigger { + width: 100%; + display: block; } - } - &.teleported { - .dropdown-menu { - // position - &.position { - &-top, - &-top-left, - &-top-right { - margin-top: calc(-2 * var(--#{$prefix}dropdown-spacer)); - } + &.disabled { + cursor: not-allowed; + } - &-bottom, - &-bottom-left, - &-bottom-right { - margin-top: var(--#{$prefix}dropdown-spacer); + .dropdown-menu { + // disable dropdown-item effects when not clickable + .dropdown-item:not(.clickable) { + &:hover, + &:active { + --#{$prefix}dropdown-link-active-bg: transparent; + --#{$prefix}dropdown-link-hover-bg: transparent; + } } - &-right { - margin-left: var(--#{$prefix}dropdown-spacer); + // position classes + &.position { + &-top { + top: auto; + right: auto; + bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); + left: 50%; + transform: translateX(-50%); + } + + &-left { + top: 50%; + right: calc(100% + var(--#{$prefix}dropdown-spacer)); + bottom: auto; + left: auto; + transform: translateY(-50%); + } + + &-bottom { + top: calc(100% + var(--#{$prefix}dropdown-spacer)); + left: 50%; + bottom: auto; + right: auto; + transform: translateX(-50%); + } + + &-right { + top: 50%; + right: auto; + bottom: auto; + left: calc(100% + var(--#{$prefix}dropdown-spacer)); + transform: translateY(-50%); + } + + &-top-right { + top: auto; + right: 0; + bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); + left: auto; + } + + &-top-left { + top: auto; + right: auto; + bottom: calc(100% + var(--#{$prefix}dropdown-spacer)); + left: 0; + } + + &-bottom-right { + top: calc(100% + var(--#{$prefix}dropdown-spacer)); + right: 0; + bottom: auto; + left: auto; + } + + &-bottom-left { + top: calc(100% + var(--#{$prefix}dropdown-spacer)); + right: auto; + bottom: auto; + left: 0; + } } + } - &-left { - margin-left: calc(-2 * var(--#{$prefix}dropdown-spacer)); + &.teleported { + .dropdown-menu { + // position + &.position { + &-top, + &-top-left, + &-top-right { + margin-top: calc(-2 * var(--#{$prefix}dropdown-spacer)); + } + + &-bottom, + &-bottom-left, + &-bottom-right { + margin-top: var(--#{$prefix}dropdown-spacer); + } + + &-right { + margin-left: var(--#{$prefix}dropdown-spacer); + } + + &-left { + margin-left: calc(-2 * var(--#{$prefix}dropdown-spacer)); + } + } } - } } - } - // mobile class - &.dropdown-modal:not(&.inline) { - .dropdown-menu { - --#{$prefix}dropdown-width: 75%; - --#{$prefix}dropdown-min-width: 25%; - --#{$prefix}dropdown-max-width: 90%; - --#{$prefix}dropdown-zindex: #{$dropdown-modal-menu-zindex}; - - position: fixed; - top: 25%; - left: 50%; - width: clamp( - var(--#{$prefix}dropdown-min-width), - var(--#{$prefix}dropdown-width), - var(--#{$prefix}dropdown-max-width) - ); - transform: translate3d(-50%, -25%, 0); - z-index: var(--#{$prefix}dropdown-zindex); - } + // mobile class + &.dropdown-modal:not(&.inline) { + .dropdown-menu { + --#{$prefix}dropdown-width: 75%; + --#{$prefix}dropdown-min-width: 25%; + --#{$prefix}dropdown-max-width: 90%; + --#{$prefix}dropdown-zindex: #{$dropdown-modal-menu-zindex}; + + position: fixed; + top: 25%; + left: 50%; + width: clamp( + var(--#{$prefix}dropdown-min-width), + var(--#{$prefix}dropdown-width), + var(--#{$prefix}dropdown-max-width) + ); + transform: translate3d(-50%, -25%, 0); + z-index: var(--#{$prefix}dropdown-zindex); + } - .dropdown-backdrop { - --#{$prefix}backdrop-bg: #{$modal-backdrop-bg}; - --#{$prefix}backdrop-zindex: #{$dropdown-modal-backdrop-zindex}; - --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity}; - - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: var(--#{$prefix}backdrop-zindex); - background-color: var(--#{$prefix}backdrop-bg); - opacity: var(--#{$prefix}backdrop-opacity); + .dropdown-backdrop { + --#{$prefix}backdrop-bg: #{$modal-backdrop-bg}; + --#{$prefix}backdrop-zindex: #{$dropdown-modal-backdrop-zindex}; + --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity}; + + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: var(--#{$prefix}backdrop-zindex); + background-color: var(--#{$prefix}backdrop-bg); + opacity: var(--#{$prefix}backdrop-opacity); + } } - } - &.inline { - display: inline-block; + &.inline { + display: inline-block; - .dropdown-menu { - --#{$prefix}dropdown-zindex: 10; - position: relative; + .dropdown-menu { + --#{$prefix}dropdown-zindex: 10; + position: relative; + } } - } } diff --git a/src/assets/scss/components/_field.scss b/src/assets/scss/components/_field.scss index e2d0345..aa4d4d0 100644 --- a/src/assets/scss/components/_field.scss +++ b/src/assets/scss/components/_field.scss @@ -19,163 +19,167 @@ $input-field-btn-border-color: $input-border-color !default; */ @mixin radii($selector) { - // the first and the last inputs should be rounded - &:first-child:not(:last-child) { - #{$selector} { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + // the first and the last inputs should be rounded + &:first-child:not(:last-child) { + #{$selector} { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } } - } - &:last-child:not(:first-child) { - #{$selector} { - border-bottom-left-radius: 0; - border-top-left-radius: 0; + &:last-child:not(:first-child) { + #{$selector} { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } } - } - // The input in middle shouldn't be rounded - &:not(:first-child):not(:last-child) { - #{$selector} { - --#{$prefix}border-radius: 0; + // The input in middle shouldn't be rounded + &:not(:first-child):not(:last-child) { + #{$selector} { + --#{$prefix}border-radius: 0; + } } - } - // The input is first and the last - &:first-child:last-child { - #{$selector} { - --#{$prefix}border-radius: #{$border-radius}; + // The input is first and the last + &:first-child:last-child { + #{$selector} { + --#{$prefix}border-radius: #{$border-radius}; + } } - } } .input-field { - --#{$prefix}input-field-grouped-spacer: #{$input-field-grouped-spacer}; - --#{$prefix}input-field-margin-bottom: #{$input-field-margin-bottom}; - --#{$prefix}input-field-btn-border-color: #{$input-border-color}; + --#{$prefix}input-field-grouped-spacer: #{$input-field-grouped-spacer}; + --#{$prefix}input-field-margin-bottom: #{$input-field-margin-bottom}; + --#{$prefix}input-field-btn-border-color: #{$input-border-color}; - margin-bottom: var(--#{$prefix}input-field-margin-bottom); + margin-bottom: var(--#{$prefix}input-field-margin-bottom); - &.row > div { - @extend .col; - } + &.row > div { + @extend .col; + } - .form-label { - display: block; - } + .form-label { + display: block; + } - &.grouped-multiline { - flex-wrap: wrap; + &.grouped-multiline { + flex-wrap: wrap; - &:last-child { - margin-bottom: calc(-1 * var(--#{$prefix}input-field-margin-bottom)); - } - } - - &.field-horizontal { - .col-form-label { - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - text-align: right; + &:last-child { + margin-bottom: calc( + -1 * var(--#{$prefix}input-field-margin-bottom) + ); + } } - .col-form-field { - flex-basis: 0; - flex-grow: 5; - flex-shrink: 1; - } - } - - // input expanded - .input, - .select, - .dropdown, - .btn { - flex-shrink: 0; - - &.expanded { - flex-grow: 1; - flex-shrink: 1; - - &.btn { - width: 100%; - } + &.field-horizontal { + .col-form-label { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + text-align: right; + } + + .col-form-field { + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + } } - } - // has group - .input-group { - flex-shrink: 0; - - > .btn { - --#{$prefix}btn-spacer: 0; + // input expanded + .input, + .select, + .dropdown, + .btn { + flex-shrink: 0; + + &.expanded { + flex-grow: 1; + flex-shrink: 1; + + &.btn { + width: 100%; + } + } } - // prevent nested components - > *:not(.dropdown-menu) { - // remove margin - .input, - .select, - .dropdown, - .btn { - margin: 0; - } - - // Btn with border if it transparent - .btn:not(.btn-primary):not(.btn-secondary):not(.btn-info):not( - .btn-danger - ):not(.btn-success):not(.btn-warning):not(.btn-dark):not(.btn-light) { - --#{$prefix}btn-border-color: #{$input-field-btn-border-color}; - --#{$prefix}btn-bg: #{$input-field-btn-border-color}; - } - - // set border radii - & > button:first-child:not(:only-child), - & > .input:first-child:not(:only-child):not(.form-check-input), - & > .select:first-child:not(:only-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - - @include radii("button, select, input:not(.form-check-input)"); - - .input { - @include radii(".form-control"); - } - - .dropdown { - @include radii(".dropdown-trigger .btn"); - } - - .select { - @include radii(".form-select"); - } - } - } - - // is grouped - .input-grouped { - display: flex; - margin-left: calc(-1 * var(--#{$prefix}input-field-grouped-spacer)); - margin-right: calc(-1 * var(--#{$prefix}input-field-grouped-spacer)); - - // Margin - & > * { - margin-left: var(--#{$prefix}input-field-grouped-spacer); - margin-right: var(--#{$prefix}input-field-grouped-spacer); + // has group + .input-group { + flex-shrink: 0; + + > .btn { + --#{$prefix}btn-spacer: 0; + } + + // prevent nested components + > *:not(.dropdown-menu) { + // remove margin + .input, + .select, + .dropdown, + .btn { + margin: 0; + } + + // Btn with border if it transparent + .btn:not(.btn-primary):not(.btn-secondary):not(.btn-info):not( + .btn-danger + ):not(.btn-success):not(.btn-warning):not(.btn-dark):not( + .btn-light + ) { + --#{$prefix}btn-border-color: #{$input-field-btn-border-color}; + --#{$prefix}btn-bg: #{$input-field-btn-border-color}; + } + + // set border radii + & > button:first-child:not(:only-child), + & > .input:first-child:not(:only-child):not(.form-check-input), + & > .select:first-child:not(:only-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + @include radii("button, select, input:not(.form-check-input)"); + + .input { + @include radii(".form-control"); + } + + .dropdown { + @include radii(".dropdown-trigger .btn"); + } + + .select { + @include radii(".form-select"); + } + } } - // & > input:not(:last-child), - // & > .input:not(:last-child), - // & > select:not(:last-child), - // & > .select:not(:last-child), - // & > .dropdown:not(:last-child), - // & > .btn:not(:last-child), - // & > button:not(:last-child), - // & > .datepicker:not(:last-child), - // & > .input-field:not(:last-child) { - // margin-right: var(--#{$prefix}input-field-grouped-spacer); - // } - } + // is grouped + .input-grouped { + display: flex; + margin-left: calc(-1 * var(--#{$prefix}input-field-grouped-spacer)); + margin-right: calc(-1 * var(--#{$prefix}input-field-grouped-spacer)); + + // Margin + & > * { + margin-left: var(--#{$prefix}input-field-grouped-spacer); + margin-right: var(--#{$prefix}input-field-grouped-spacer); + } + + // & > input:not(:last-child), + // & > .input:not(:last-child), + // & > select:not(:last-child), + // & > .select:not(:last-child), + // & > .dropdown:not(:last-child), + // & > .btn:not(:last-child), + // & > button:not(:last-child), + // & > .datepicker:not(:last-child), + // & > .input-field:not(:last-child) { + // margin-right: var(--#{$prefix}input-field-grouped-spacer); + // } + } } diff --git a/src/assets/scss/components/_icon.scss b/src/assets/scss/components/_icon.scss index f865558..37e93b3 100644 --- a/src/assets/scss/components/_icon.scss +++ b/src/assets/scss/components/_icon.scss @@ -3,34 +3,34 @@ $icon-spin-animation-duration: 1.5s !default; /* @docs */ @keyframes icon-spin { - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } .icon { - align-items: center; - display: inline-flex; - justify-content: center; - transition: - transform 150ms ease-out, - opacity 0.3s ease-out; + align-items: center; + display: inline-flex; + justify-content: center; + transition: + transform 150ms ease-out, + opacity 0.3s ease-out; - &.spin { - --#{$prefix}icon-spin-duration: #{$icon-spin-animation-duration}; + &.spin { + --#{$prefix}icon-spin-duration: #{$icon-spin-animation-duration}; - display: inline-block; - animation-name: icon-spin; - animation-iteration-count: infinite; - animation-timing-function: linear; - animation-duration: var(--#{$prefix}icon-spin-duration); - } + display: inline-block; + animation-name: icon-spin; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-duration: var(--#{$prefix}icon-spin-duration); + } - // Sizes - @each $name, $size in $sizes { - &.size-#{$name} { - font-size: $size; + // Sizes + @each $name, $size in $sizes { + &.size-#{$name} { + font-size: $size; + } } - } } diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss index a18e26d..dfa859f 100644 --- a/src/assets/scss/components/_input.scss +++ b/src/assets/scss/components/_input.scss @@ -131,59 +131,59 @@ $input-icon-padding-lg: 3rem !default; .select, .input { - display: inline-block; - position: relative; + display: inline-block; + position: relative; - &.expanded { - width: 100%; - } - - // Space for the icon - .form-select, - .form-control { - --#{$prefix}input-icon-padding: #{$input-icon-padding}; - - &.form-control-sm { - --#{$prefix}input-icon-padding: #{$input-icon-padding-sm}; - } - // if icon and the input are large, we give more space to icon - &.form-control-lg { - --#{$prefix}input-icon-padding: #{$input-icon-padding-lg}; + &.expanded { + width: 100%; } - // if the icon is in left then set that padding - &.icon-left { - padding-left: var(--#{$prefix}input-icon-padding); + // Space for the icon + .form-select, + .form-control { + --#{$prefix}input-icon-padding: #{$input-icon-padding}; + + &.form-control-sm { + --#{$prefix}input-icon-padding: #{$input-icon-padding-sm}; + } + // if icon and the input are large, we give more space to icon + &.form-control-lg { + --#{$prefix}input-icon-padding: #{$input-icon-padding-lg}; + } + + // if the icon is in left then set that padding + &.icon-left { + padding-left: var(--#{$prefix}input-icon-padding); + } + + // if the icon is in right then set that padding + &.icon-right { + padding-right: var(--#{$prefix}input-icon-padding); + } } - // if the icon is in right then set that padding - &.icon-right { - padding-right: var(--#{$prefix}input-icon-padding); - } - } - - // remove arrow if not arrowed - .form-select:not(.arrowed) { - --#{$prefix}form-select-bg-img: unset; - } - - // the Position of the icon - .icon { - --#{$prefix}input-icon-color: #{$input-icon-color}; - --#{$prefix}input-icon-spacer: #{$input-icon-spacer}; - - position: absolute; - margin: 0; - top: 0; - height: 100%; - color: var(--#{$prefix}input-icon-color); - - &.icon-left { - left: var(--#{$prefix}input-icon-spacer); + // remove arrow if not arrowed + .form-select:not(.arrowed) { + --#{$prefix}form-select-bg-img: unset; } - &.icon-right { - right: var(--#{$prefix}input-icon-spacer); + // the Position of the icon + .icon { + --#{$prefix}input-icon-color: #{$input-icon-color}; + --#{$prefix}input-icon-spacer: #{$input-icon-spacer}; + + position: absolute; + margin: 0; + top: 0; + height: 100%; + color: var(--#{$prefix}input-icon-color); + + &.icon-left { + left: var(--#{$prefix}input-icon-spacer); + } + + &.icon-right { + right: var(--#{$prefix}input-icon-spacer); + } } - } } diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss index c110f55..d42b9d2 100644 --- a/src/assets/scss/components/_loading.scss +++ b/src/assets/scss/components/_loading.scss @@ -5,36 +5,36 @@ $loading-overlay: rgba(255, 255, 255, 0.5) !default; /* @docs */ .loading { - --#{$prefix}loading-zindex: #{$loading-zindex}; - --#{$prefix}loading-overlay: #{$loading-overlay}; + --#{$prefix}loading-zindex: #{$loading-zindex}; + --#{$prefix}loading-overlay: #{$loading-overlay}; - position: absolute; - bottom: 0; - left: 0; - right: 0; - top: 0; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - z-index: var(--#{$prefix}loading-zindex); - - &.fullpage { - --#{$prefix}loading-zindex: #{$loading-zindex-fullpage}; - - position: fixed; - } - - &-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; - background-color: var(--#{$prefix}loading-overlay); - } + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + z-index: var(--#{$prefix}loading-zindex); + + &.fullpage { + --#{$prefix}loading-zindex: #{$loading-zindex-fullpage}; + + position: fixed; + } + + &-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + background-color: var(--#{$prefix}loading-overlay); + } - &-label { - margin-left: 1rem; - } + &-label { + margin-left: 1rem; + } } diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss index 4ae6f2b..7885809 100644 --- a/src/assets/scss/components/_menu.scss +++ b/src/assets/scss/components/_menu.scss @@ -18,70 +18,76 @@ $menu-submenu-margin: 0.75em !default; /* @docs */ .menu { - .menu-label { - --#{$prefix}menu-label-bg: #{$menu-label-bg}; - --#{$prefix}menu-label-color: #{$menu-label-color}; - --#{$prefix}menu-label-font-size: #{$menu-label-font-size}; + .menu-label { + --#{$prefix}menu-label-bg: #{$menu-label-bg}; + --#{$prefix}menu-label-color: #{$menu-label-color}; + --#{$prefix}menu-label-font-size: #{$menu-label-font-size}; - background: var(--#{$prefix}menu-label-bg); - color: var(--#{$prefix}menu-label-color); - font-size: var(--#{$prefix}menu-label-font-size); - text-transform: uppercase; - } + background: var(--#{$prefix}menu-label-bg); + color: var(--#{$prefix}menu-label-color); + font-size: var(--#{$prefix}menu-label-font-size); + text-transform: uppercase; + } - .menu-list { - --#{$prefix}menu-list-line-height: #{$menu-list-line-height}; + .menu-list { + --#{$prefix}menu-list-line-height: #{$menu-list-line-height}; - line-height: var(--#{$prefix}menu-list-line-height); + line-height: var(--#{$prefix}menu-list-line-height); - .menu-item { - --#{$prefix}menu-item-padding: #{$menu-item-padding}; - --#{$prefix}menu-item-bg: #{$menu-item-bg}; - --#{$prefix}menu-item-color: #{$menu-item-color}; - --#{$prefix}menu-item-active-bg: #{$menu-item-active-bg}; - --#{$prefix}menu-item-active-color: #{$menu-item-active-color}; - --#{$prefix}menu-item-disabled-bg: #{$menu-item-disabled-bg}; - --#{$prefix}menu-item-disabled-color: #{$menu-item-disabled-color}; - --#{$prefix}menu-item-border-radius: #{$menu-item-border-radius}; + .menu-item { + --#{$prefix}menu-item-padding: #{$menu-item-padding}; + --#{$prefix}menu-item-bg: #{$menu-item-bg}; + --#{$prefix}menu-item-color: #{$menu-item-color}; + --#{$prefix}menu-item-active-bg: #{$menu-item-active-bg}; + --#{$prefix}menu-item-active-color: #{$menu-item-active-color}; + --#{$prefix}menu-item-disabled-bg: #{$menu-item-disabled-bg}; + --#{$prefix}menu-item-disabled-color: #{$menu-item-disabled-color}; + --#{$prefix}menu-item-border-radius: #{$menu-item-border-radius}; - list-style: none; + list-style: none; - .menu-button { - display: block; - list-style: none; - background: var(--#{$prefix}menu-item-bg); - color: var(--#{$prefix}menu-item-color); - padding: var(--#{$prefix}menu-item-padding); - border-radius: var(--#{$prefix}menu-item-border-radius); + .menu-button { + display: block; + list-style: none; + background: var(--#{$prefix}menu-item-bg); + color: var(--#{$prefix}menu-item-color); + padding: var(--#{$prefix}menu-item-padding); + border-radius: var(--#{$prefix}menu-item-border-radius); - &.active { - --#{$prefix}menu-item-bg: var(--#{$prefix}menu-item-active-bg); - --#{$prefix}menu-item-color: var(--#{$prefix}menu-item-active-color); - } + &.active { + --#{$prefix}menu-item-bg: var( + --#{$prefix}menu-item-active-bg + ); + --#{$prefix}menu-item-color: var( + --#{$prefix}menu-item-active-color + ); + } - &.disabled { - --#{$prefix}menu-item-bg: var(--#{$prefix}menu-item-disabled-bg); - --#{$prefix}menu-item-color: var( - --#{$prefix}menu-item-disabled-color - ); - } + &.disabled { + --#{$prefix}menu-item-bg: var( + --#{$prefix}menu-item-disabled-bg + ); + --#{$prefix}menu-item-color: var( + --#{$prefix}menu-item-disabled-color + ); + } - &.menu-icon .icon { - --#{$prefix}menu-icon-spacer: #{$menu-icon-spacer}; + &.menu-icon .icon { + --#{$prefix}menu-icon-spacer: #{$menu-icon-spacer}; - margin-right: var(--#{$prefix}menu-icon-spacer); - } - } + margin-right: var(--#{$prefix}menu-icon-spacer); + } + } - .menu-submenu { - --#{$prefix}menu-submenu-border-left: #{$menu-submenu-border-left}; - --#{$prefix}menu-submenu-padding-left: #{$menu-submenu-padding-left}; - --#{$prefix}menu-submenu-margin: #{$menu-submenu-margin}; + .menu-submenu { + --#{$prefix}menu-submenu-border-left: #{$menu-submenu-border-left}; + --#{$prefix}menu-submenu-padding-left: #{$menu-submenu-padding-left}; + --#{$prefix}menu-submenu-margin: #{$menu-submenu-margin}; - border-left: var(--#{$prefix}menu-submenu-border-left); - padding-left: var(--#{$prefix}menu-submenu-padding-left); - margin: var(--#{$prefix}menu-submenu-margin); - } + border-left: var(--#{$prefix}menu-submenu-border-left); + padding-left: var(--#{$prefix}menu-submenu-padding-left); + margin: var(--#{$prefix}menu-submenu-margin); + } + } } - } } diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 81c76a7..154bc4a 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -42,51 +42,51 @@ /* @bootstrap docs */ .modal { - display: flex; + display: flex; - &-backdrop { - opacity: var(--#{$prefix}backdrop-opacity); - } - - &-dialog { - z-index: var(--#{$prefix}modal-zindex); - pointer-events: all; - - &.fullscreen { - --#{$prefix}modal-width: 100%; - width: 100%; + &-backdrop { + opacity: var(--#{$prefix}backdrop-opacity); } - &:not(.fullscreen) { - margin-right: auto; - margin-left: auto; - } + &-dialog { + z-index: var(--#{$prefix}modal-zindex); + pointer-events: all; - .modal-content { - overflow: hidden; - - .modal-header { - > .icon { - position: absolute; - top: 1.5rem; - right: 1.2rem; + &.fullscreen { + --#{$prefix}modal-width: 100%; + width: 100%; } - &:has(> .icon.clickable) { - padding-right: 3rem; + &:not(.fullscreen) { + margin-right: auto; + margin-left: auto; } - } - &:has(> .icon.clickable) + .icon.clickable { - display: none; - } - } + .modal-content { + overflow: hidden; - > .btn-close { - --#{$prefix}btn-close-opacity: 1; - position: fixed; - top: 1.5rem; - right: 1.5rem; + .modal-header { + > .icon { + position: absolute; + top: 1.5rem; + right: 1.2rem; + } + + &:has(> .icon.clickable) { + padding-right: 3rem; + } + } + + &:has(> .icon.clickable) + .icon.clickable { + display: none; + } + } + + > .btn-close { + --#{$prefix}btn-close-opacity: 1; + position: fixed; + top: 1.5rem; + right: 1.5rem; + } } - } } diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss index e838044..869c2ea 100644 --- a/src/assets/scss/components/_notification.scss +++ b/src/assets/scss/components/_notification.scss @@ -39,108 +39,110 @@ $notification-icon-margin-right: 0.5rem !default; /* @bootstrap docs */ .notifictation { - .notifictation-wrapper { - display: flex; - - .icon { - margin-right: $notification-icon-margin-right; - } - - .notifictation-content { - padding-right: calc($notification-close-btn-position + $alert-padding-x); + .notifictation-wrapper { + display: flex; + + .icon { + margin-right: $notification-icon-margin-right; + } + + .notifictation-content { + padding-right: calc( + $notification-close-btn-position + $alert-padding-x + ); + } } - } } .alert { - & > button { - background-color: transparent; - border: 0; - position: absolute; - top: $notification-close-btn-position; - right: $notification-close-btn-position; - } - - // Colors variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - @extend .alert-#{$name}; - - > .btn-close { - filter: unset; - } + & > button { + background-color: transparent; + border: 0; + position: absolute; + top: $notification-close-btn-position; + right: $notification-close-btn-position; + } + + // Colors variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + @extend .alert-#{$name}; + + > .btn-close { + filter: unset; + } + } } - } - // default color variant light - &:not([class*="variant-"]) { - @extend .alert-light; - } + // default color variant light + &:not([class*="variant-"]) { + @extend .alert-light; + } } .toast { - @extend .show; - padding: var(--#{$prefix}toast-padding-x) var(--#{$prefix}toast-padding-y); - margin-bottom: var(--#{$prefix}alert-margin-bottom); - - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - --#{$prefix}toast-color: var(--#{$prefix}#{$name}-contrast); - --#{$prefix}toast-bg: var(--#{$prefix}#{$name}); + @extend .show; + padding: var(--#{$prefix}toast-padding-x) var(--#{$prefix}toast-padding-y); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + --#{$prefix}toast-color: var(--#{$prefix}#{$name}-contrast); + --#{$prefix}toast-bg: var(--#{$prefix}#{$name}); + } } - } } .notifictations { - --#{$prefix}notification-notices-padding: #{$notification-notices-padding}; - --#{$prefix}notification-notices-zindex: #{$notification-notices-zindex}; - --#{$prefix}notification-notices-max-width: #{$notification-notices-max-width}; - - display: flex; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - pointer-events: none; - padding: var(--#{$prefix}notification-notices-padding); - z-index: var(--#{$prefix}notification-notices-zindex); - - .alert { - pointer-events: auto; - max-width: var(--#{$prefix}notification-notices-max-width); + --#{$prefix}notification-notices-padding: #{$notification-notices-padding}; + --#{$prefix}notification-notices-zindex: #{$notification-notices-zindex}; + --#{$prefix}notification-notices-max-width: #{$notification-notices-max-width}; - &.position { - &-top, - &-bottom { - align-self: center; - } - - &-top-right, - &-bottom-right { - align-self: flex-end; - } - - &-top-left, - &-bottom-left { - align-self: flex-start; - } + display: flex; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + pointer-events: none; + padding: var(--#{$prefix}notification-notices-padding); + z-index: var(--#{$prefix}notification-notices-zindex); + + .alert { + pointer-events: auto; + max-width: var(--#{$prefix}notification-notices-max-width); + + &.position { + &-top, + &-bottom { + align-self: center; + } + + &-top-right, + &-bottom-right { + align-self: flex-end; + } + + &-top-left, + &-bottom-left { + align-self: flex-start; + } + } } - } - &.position { - &-top { - flex-direction: column; - } + &.position { + &-top { + flex-direction: column; + } - &-bottom { - flex-direction: column-reverse; + &-bottom { + flex-direction: column-reverse; - > .div:first-child { - margin-bottom: 0; - } + > .div:first-child { + margin-bottom: 0; + } + } } - } } diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss index 943d933..1e90c47 100644 --- a/src/assets/scss/components/_pagination.scss +++ b/src/assets/scss/components/_pagination.scss @@ -43,141 +43,145 @@ $pagination-items-spacer: 0.5rem !default; /* @bootstrap docs */ @mixin roundEdge { - .pagination { - li:first-child .page-link { - border-top-left-radius: $pagination-border-radius; - border-bottom-left-radius: $pagination-border-radius; - } + .pagination { + li:first-child .page-link { + border-top-left-radius: $pagination-border-radius; + border-bottom-left-radius: $pagination-border-radius; + } - li:last-child .page-link { - border-top-right-radius: $pagination-border-radius; - border-bottom-right-radius: $pagination-border-radius; + li:last-child .page-link { + border-top-right-radius: $pagination-border-radius; + border-bottom-right-radius: $pagination-border-radius; + } } - } } @mixin vertical-centered { - display: flex; - align-items: center; + display: flex; + align-items: center; } .pagination-wrapper { - @extend .pagination; + @extend .pagination; - --#{$prefix}pagination-items-spacer: #{$pagination-items-spacer}; + --#{$prefix}pagination-items-spacer: #{$pagination-items-spacer}; - position: relative; - display: flex; - flex-direction: row; + position: relative; + display: flex; + flex-direction: row; - .pagination { - order: 2; - margin: 0; - - &-prev, - &-next { - @include vertical-centered; - - .icon { - margin: unset; - } - } + .pagination { + order: 2; + margin: 0; - &-prev { - order: 1; - margin: 0; - border-top-left-radius: $pagination-border-radius; - border-bottom-left-radius: $pagination-border-radius; - } - - &-next { - order: 3; - margin: 0; - border-top-right-radius: $pagination-border-radius; - border-bottom-right-radius: $pagination-border-radius; - } - - &-ellipsis { - @include vertical-centered; - height: 100%; - margin-right: var(--#{$prefix}pagination-items-spacer); - margin-left: var(--#{$prefix}pagination-items-spacer); - } + &-prev, + &-next { + @include vertical-centered; - &-info { - @include vertical-centered; - margin-right: var(--#{$prefix}pagination-items-spacer); - } - - .page-link { - height: 100%; - } - } - - &:not(.simple) { - &.order { - &-left { - @include roundEdge; - justify-content: space-between; - - .pagination-prev { - order: 2; + .icon { + margin: unset; + } } - .pagination-next { - order: 3; + &-prev { + order: 1; + margin: 0; + border-top-left-radius: $pagination-border-radius; + border-bottom-left-radius: $pagination-border-radius; } - .pagination { - order: 1; - flex-grow: 1; - justify-content: flex-start; - margin-right: var(--#{$prefix}pagination-items-spacer); + &-next { + order: 3; + margin: 0; + border-top-right-radius: $pagination-border-radius; + border-bottom-right-radius: $pagination-border-radius; } - } - &-centered { - @include roundEdge; - justify-content: space-between; - - .pagination { - margin-left: var(--#{$prefix}pagination-items-spacer); - margin-right: var(--#{$prefix}pagination-items-spacer); + &-ellipsis { + @include vertical-centered; + height: 100%; + margin-right: var(--#{$prefix}pagination-items-spacer); + margin-left: var(--#{$prefix}pagination-items-spacer); } - } - &-right { - @include roundEdge; - justify-content: space-between; + &-info { + @include vertical-centered; + margin-right: var(--#{$prefix}pagination-items-spacer); + } - .pagination-next { - order: 2; + .page-link { + height: 100%; } + } - .pagination { - order: 3; - flex-grow: 1; - justify-content: flex-end; - margin-left: var(--#{$prefix}pagination-items-spacer); + &:not(.simple) { + &.order { + &-left { + @include roundEdge; + justify-content: space-between; + + .pagination-prev { + order: 2; + } + + .pagination-next { + order: 3; + } + + .pagination { + order: 1; + flex-grow: 1; + justify-content: flex-start; + margin-right: var(--#{$prefix}pagination-items-spacer); + } + } + + &-centered { + @include roundEdge; + justify-content: space-between; + + .pagination { + margin-left: var(--#{$prefix}pagination-items-spacer); + margin-right: var(--#{$prefix}pagination-items-spacer); + } + } + + &-right { + @include roundEdge; + justify-content: space-between; + + .pagination-next { + order: 2; + } + + .pagination { + order: 3; + flex-grow: 1; + justify-content: flex-end; + margin-left: var(--#{$prefix}pagination-items-spacer); + } + } } - } } - } - &.simple { - &.order { - &-centered { - justify-content: center; - } + &.simple { + &.order { + &-centered { + justify-content: center; + } - &-right { - justify-content: flex-end; - } + &-right { + justify-content: flex-end; + } + } } - } - .rounded, - .rounded-pill { - margin-right: calc(var(--#{$prefix}pagination-items-spacer) / 2) !important; - margin-left: calc(var(--#{$prefix}pagination-items-spacer) / 2) !important; - } + .rounded, + .rounded-pill { + margin-right: calc( + var(--#{$prefix}pagination-items-spacer) / 2 + ) !important; + margin-left: calc( + var(--#{$prefix}pagination-items-spacer) / 2 + ) !important; + } } diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss index f2e3735..df4cbb6 100644 --- a/src/assets/scss/components/_sidebar.scss +++ b/src/assets/scss/components/_sidebar.scss @@ -20,89 +20,89 @@ $sidebar-reduced-height: 10vh !default; /* @bootstrap docs */ @mixin size($height, $width) { - &.offcanvas-start, - &.offcanvas-end { - --#{$prefix}offcanvas-width: #{$width}; - } - - &.offcanvas-top, - &.offcanvas-bottom { - --#{$prefix}offcanvas-height: #{$height}; - } -} - -.sidebar { - .offcanvas { - .btn-close { - position: absolute; - right: 0.5rem; - top: 0.5rem; - cursor: pointer; - } - - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - --#{$prefix}offcanvas-color: var(--#{$prefix}#{$name}-contrast); - --#{$prefix}offcanvas-bg: var(--#{$prefix}#{$name}); - } + &.offcanvas-start, + &.offcanvas-end { + --#{$prefix}offcanvas-width: #{$width}; } - &.fullwidth { - --#{$prefix}offcanvas-width: 100%; - } - - &.fullheight { - --#{$prefix}offcanvas-height: 100%; + &.offcanvas-top, + &.offcanvas-bottom { + --#{$prefix}offcanvas-height: #{$height}; } +} - &.reduced { - transition: - width $speed-slow $easing, - height $speed-slow $easing; +.sidebar { + .offcanvas { + .btn-close { + position: absolute; + right: 0.5rem; + top: 0.5rem; + cursor: pointer; + } - @include size($sidebar-reduced-height, $sidebar-reduced-width); + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + --#{$prefix}offcanvas-color: var(--#{$prefix}#{$name}-contrast); + --#{$prefix}offcanvas-bg: var(--#{$prefix}#{$name}); + } + } - &.reduced-expand:hover:not(.reduced-delayed) { &.fullwidth { - @include size(100%, 100%); + --#{$prefix}offcanvas-width: 100%; } - &:not(.fullwidth) { - @include size( - $offcanvas-vertical-height, - $offcanvas-horizontal-width - ); + &.fullheight { + --#{$prefix}offcanvas-height: 100%; + } - &.reduced-expand-fixed { - position: fixed; - } + &.reduced { + transition: + width $speed-slow $easing, + height $speed-slow $easing; + + @include size($sidebar-reduced-height, $sidebar-reduced-width); + + &.reduced-expand:hover:not(.reduced-delayed) { + &.fullwidth { + @include size(100%, 100%); + } + + &:not(.fullwidth) { + @include size( + $offcanvas-vertical-height, + $offcanvas-horizontal-width + ); + + &.reduced-expand-fixed { + position: fixed; + } + } + } } - } } - } - &.inline, - &.show { - .offcanvas, - .offcanvas-backdrop { - @extend .show; + &.inline, + &.show { + .offcanvas, + .offcanvas-backdrop { + @extend .show; + } } - } - &.inline { - position: relative; + &.inline { + position: relative; - .offcanvas { - --#{$prefix}offcanvas-zindex: 0; + .offcanvas { + --#{$prefix}offcanvas-zindex: 0; - position: relative; - } + position: relative; + } - .offcanvas-backdrop { - position: absolute; - height: auto; - margin: auto; + .offcanvas-backdrop { + position: absolute; + height: auto; + margin: auto; + } } - } } diff --git a/src/assets/scss/components/_skeleton.scss b/src/assets/scss/components/_skeleton.scss index 6b834e2..d1e454d 100644 --- a/src/assets/scss/components/_skeleton.scss +++ b/src/assets/scss/components/_skeleton.scss @@ -1,57 +1,57 @@ /* @docs */ $skeleton-bg-color: $dark-bg-subtle !default; $skeleton-bg: linear-gradient( - 90deg, - $skeleton-bg-color 25%, - rgba($skeleton-bg-color, 0.5) 50%, - $skeleton-bg-color 75% + 90deg, + $skeleton-bg-color 25%, + rgba($skeleton-bg-color, 0.5) 50%, + $skeleton-bg-color 75% ) !default; $skeleton-duration: 1.5s !default; $skeleton-margin: 0.5rem 0 0 0 !default; /* @docs */ @keyframes skeleton-loading { - 0% { - background-position: 100% 50%; - } + 0% { + background-position: 100% 50%; + } - 100% { - background-position: 0 50%; - } + 100% { + background-position: 0 50%; + } } .skeleton { - --#{$prefix}skeleton-bg: #{$skeleton-bg}; - --#{$prefix}skeleton-duration: #{$skeleton-duration}; - --#{$prefix}skeleton-margin: #{$skeleton-margin}; - - display: inline-flex; - flex-direction: column; - vertical-align: middle; - width: 100%; + --#{$prefix}skeleton-bg: #{$skeleton-bg}; + --#{$prefix}skeleton-duration: #{$skeleton-duration}; + --#{$prefix}skeleton-margin: #{$skeleton-margin}; - .skeleton-item { + display: inline-flex; + flex-direction: column; + vertical-align: middle; width: 100%; - background-image: var(--#{$prefix}skeleton-bg); - margin: var(--#{$prefix}skeleton-margin); - line-height: 1em; - - &.animated { - background-size: 400% 100%; - animation-name: skeleton-loading; - animation-iteration-count: infinite; - animation-duration: var(--#{$prefix}skeleton-duration); - } - - &::after { - content: "\00a0"; - } - // Sizes - @each $name, $value in $sizes { - &.size-#{$name} { - line-height: $value; - } + .skeleton-item { + width: 100%; + background-image: var(--#{$prefix}skeleton-bg); + margin: var(--#{$prefix}skeleton-margin); + line-height: 1em; + + &.animated { + background-size: 400% 100%; + animation-name: skeleton-loading; + animation-iteration-count: infinite; + animation-duration: var(--#{$prefix}skeleton-duration); + } + + &::after { + content: "\00a0"; + } + + // Sizes + @each $name, $value in $sizes { + &.size-#{$name} { + line-height: $value; + } + } } - } } diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss index 4656a85..5dadee1 100644 --- a/src/assets/scss/components/_slider.scss +++ b/src/assets/scss/components/_slider.scss @@ -27,161 +27,165 @@ $slider-tick-bg: var(--#{$prefix}gray) !default; /* @bootstrap docs */ .slider { - --#{$prefix}slider-width: #{$form-range-track-width}; - --#{$prefix}slider-height: #{$form-range-track-height}; - --#{$prefix}slider-border-radius: #{$form-range-track-border-radius}; - --#{$prefix}slider-bg: #{$form-range-track-bg}; - --#{$prefix}slider-cursor: #{$form-range-track-cursor}; - --#{$prefix}slider-box-shadow: #{$form-range-track-box-shadow}; - --#{$prefix}slider-disabled-bg: #{$form-range-thumb-disabled-bg}; - - position: relative; - width: var(--#{$prefix}slider-width); - height: var(--#{$prefix}slider-height); - border-radius: var(--#{$prefix}slider-border-radius); - background: var(--#{$prefix}slider-bg); - box-shadow: var(--#{$prefix}slider-box-shadow); - - .slider-track { - display: flex; - align-items: center; - box-shadow: var(--#{$prefix}slider-shadow); - - .slider-fill { - --#{$prefix}slider-track-border-radius: #{$form-range-track-border-radius}; - --#{$prefix}slider-bg: transparent; - - position: absolute; - left: 0%; - top: 50%; - transform: translateY(-50%); - height: 100%; - border-radius: var(--#{$prefix}slider-track-border-radius); - background: var(--#{$prefix}slider-bg); - - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - --#{$prefix}slider-bg: var(--#{$prefix}#{$name}); - } - } - } - - .slider-thumb-wrapper { - display: inline-flex; - flex-direction: column; - align-items: center; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - cursor: grab; - - .slider-thumb { - --#{$prefix}slider-thumb-width: #{$form-range-thumb-width}; - --#{$prefix}slider-thumb-height: #{$form-range-thumb-height}; - --#{$prefix}slider-thumb-border: #{$form-range-thumb-border}; - --#{$prefix}slider-thumb-border-radius: #{$form-range-thumb-border-radius}; - --#{$prefix}slider-thumb-bg: #{$form-range-thumb-bg}; - --#{$prefix}slider-thumb-transition: #{$form-range-thumb-transition}; - --#{$prefix}slider-thumb-box-shadow: #{$form-range-thumb-box-shadow}; - - width: var(--#{$prefix}slider-thumb-width); - height: var(--#{$prefix}slider-thumb-height); - background: var(--#{$prefix}slider-thumb-bg); - border: var(--#{$prefix}slider-thumb-border); - border-radius: var(--#{$prefix}slider-thumb-border-radius); - transition: var(--#{$prefix}slider-thumb-transition); - - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - --#{$prefix}slider-thumb-bg: var(--#{$prefix}#{$name}); - } + --#{$prefix}slider-width: #{$form-range-track-width}; + --#{$prefix}slider-height: #{$form-range-track-height}; + --#{$prefix}slider-border-radius: #{$form-range-track-border-radius}; + --#{$prefix}slider-bg: #{$form-range-track-bg}; + --#{$prefix}slider-cursor: #{$form-range-track-cursor}; + --#{$prefix}slider-box-shadow: #{$form-range-track-box-shadow}; + --#{$prefix}slider-disabled-bg: #{$form-range-thumb-disabled-bg}; + + position: relative; + width: var(--#{$prefix}slider-width); + height: var(--#{$prefix}slider-height); + border-radius: var(--#{$prefix}slider-border-radius); + background: var(--#{$prefix}slider-bg); + box-shadow: var(--#{$prefix}slider-box-shadow); + + .slider-track { + display: flex; + align-items: center; + box-shadow: var(--#{$prefix}slider-shadow); + + .slider-fill { + --#{$prefix}slider-track-border-radius: #{$form-range-track-border-radius}; + --#{$prefix}slider-bg: transparent; + + position: absolute; + left: 0%; + top: 50%; + transform: translateY(-50%); + height: 100%; + border-radius: var(--#{$prefix}slider-track-border-radius); + background: var(--#{$prefix}slider-bg); + + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + --#{$prefix}slider-bg: var(--#{$prefix}#{$name}); + } + } } - &:active, - &:hover { - box-shadow: var(--#{$prefix}focus-ring-x, 0) - var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) - var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); + .slider-thumb-wrapper { + display: inline-flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + cursor: grab; + + .slider-thumb { + --#{$prefix}slider-thumb-width: #{$form-range-thumb-width}; + --#{$prefix}slider-thumb-height: #{$form-range-thumb-height}; + --#{$prefix}slider-thumb-border: #{$form-range-thumb-border}; + --#{$prefix}slider-thumb-border-radius: #{$form-range-thumb-border-radius}; + --#{$prefix}slider-thumb-bg: #{$form-range-thumb-bg}; + --#{$prefix}slider-thumb-transition: #{$form-range-thumb-transition}; + --#{$prefix}slider-thumb-box-shadow: #{$form-range-thumb-box-shadow}; + + width: var(--#{$prefix}slider-thumb-width); + height: var(--#{$prefix}slider-thumb-height); + background: var(--#{$prefix}slider-thumb-bg); + border: var(--#{$prefix}slider-thumb-border); + border-radius: var(--#{$prefix}slider-thumb-border-radius); + transition: var(--#{$prefix}slider-thumb-transition); + + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + --#{$prefix}slider-thumb-bg: var(--#{$prefix}#{$name}); + } + } + + &:active, + &:hover { + box-shadow: var(--#{$prefix}focus-ring-x, 0) + var(--#{$prefix}focus-ring-y, 0) + var(--#{$prefix}focus-ring-blur, 0) + var(--#{$prefix}focus-ring-width) + var(--#{$prefix}focus-ring-color); + } + + &:active { + transform: scale(1.2); + } + + &:not(.focus-ring) { + box-shadow: var(--#{$prefix}slider-thumb-box-shadow); + } + + &:focus { + --#{$prefix}slider-thumb-focus-box-shadow: #{$form-range-thumb-focus-box-shadow}; + + transform: scale(1.2); + + &:not(.focus-ring) { + box-shadow: var( + --#{$prefix}slider-thumb-focus-box-shadow + ); + } + } + } } - &:active { - transform: scale(1.2); + .slider-tick { + --#{$prefix}slider-tick-width: #{$slider-tick-width}; + --#{$prefix}slider-tick-height: #{$slider-tick-height}; + --#{$prefix}slider-tick-bg: #{$slider-tick-bg}; + --#{$prefix}slider-tick-radius: #{$slider-tick-radius}; + + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: var(--#{$prefix}slider-tick-width); + height: var(--#{$prefix}slider-tick-height); + background: var(--#{$prefix}slider-tick-bg); + border-radius: var(--#{$prefix}slider-tick-radius); + + &-hidden { + background: transparent; + } + + &-label { + position: relative; + bottom: calc(-1 * $form-range-thumb-height); + } } - - &:not(.focus-ring) { - box-shadow: var(--#{$prefix}slider-thumb-box-shadow); - } - - &:focus { - --#{$prefix}slider-thumb-focus-box-shadow: #{$form-range-thumb-focus-box-shadow}; - - transform: scale(1.2); - - &:not(.focus-ring) { - box-shadow: var(--#{$prefix}slider-thumb-focus-box-shadow); - } - } - } } - .slider-tick { - --#{$prefix}slider-tick-width: #{$slider-tick-width}; - --#{$prefix}slider-tick-height: #{$slider-tick-height}; - --#{$prefix}slider-tick-bg: #{$slider-tick-bg}; - --#{$prefix}slider-tick-radius: #{$slider-tick-radius}; - - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: var(--#{$prefix}slider-tick-width); - height: var(--#{$prefix}slider-tick-height); - background: var(--#{$prefix}slider-tick-bg); - border-radius: var(--#{$prefix}slider-tick-radius); - - &-hidden { - background: transparent; - } - - &-label { - position: relative; - bottom: calc(-1 * $form-range-thumb-height); - } + &.disabled { + cursor: not-allowed; + opacity: 0.5; + background: var(--#{$prefix}slider-disabled-bg); } - } - - &.disabled { - cursor: not-allowed; - opacity: 0.5; - background: var(--#{$prefix}slider-disabled-bg); - } - - // Sizes - @each $name, $size in $sizes { - &.size-#{$name} { - height: $size; - - @if ($name == "small") { - $size: 0.5rem; - height: $size * 0.5; - } - - .slider-track { - .slider-thumb { - height: calc($size * 1.35); - width: calc($size * 1.35); - } - } - - .slider-tick { - height: calc($size * 0.5); - width: calc($size * 0.5); - &-label { - bottom: calc(-1 * $size); + // Sizes + @each $name, $size in $sizes { + &.size-#{$name} { + height: $size; + + @if ($name == "small") { + $size: 0.5rem; + height: $size * 0.5; + } + + .slider-track { + .slider-thumb { + height: calc($size * 1.35); + width: calc($size * 1.35); + } + } + + .slider-tick { + height: calc($size * 0.5); + width: calc($size * 0.5); + + &-label { + bottom: calc(-1 * $size); + } + } } - } } - } } diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss index 16f6d5c..27fec7f 100644 --- a/src/assets/scss/components/_steps.scss +++ b/src/assets/scss/components/_steps.scss @@ -13,272 +13,272 @@ $steps-vertical-padding: 1em 0 !default; /* @docs */ @mixin steps-size($size) { - .steps-list { - min-height: $size * 2; - - .step-item { - .step-marker { - width: $size * 2; - height: $size * 2; - font-size: $size; - } - - .step-title { - font-size: $size; - } + .steps-list { + min-height: $size * 2; + + .step-item { + .step-marker { + width: $size * 2; + height: $size * 2; + font-size: $size; + } + + .step-title { + font-size: $size; + } + } } - } } @mixin steps-color($color) { - &.previous { - .divider, - &::before, - &::after { - background-color: $color; - } + &.previous { + .divider, + &::before, + &::after { + background-color: $color; + } - .step-marker { - --#{$prefix}steps-marker-bg: #{$color}; - --#{$prefix}steps-marker-border: #{$color}; - --#{$prefix}steps-marker-color: #{$white}; + .step-marker { + --#{$prefix}steps-marker-bg: #{$color}; + --#{$prefix}steps-marker-border: #{$color}; + --#{$prefix}steps-marker-color: #{$white}; + } } - } - &.active { - .divider, - &::before, - &::after { - background-color: $color; - } + &.active { + .divider, + &::before, + &::after { + background-color: $color; + } - .step-marker { - --#{$prefix}steps-marker-bg: #{$white}; - --#{$prefix}steps-marker-border: #{$color}; - --#{$prefix}steps-marker-color: #{$color}; + .step-marker { + --#{$prefix}steps-marker-bg: #{$white}; + --#{$prefix}steps-marker-border: #{$color}; + --#{$prefix}steps-marker-color: #{$color}; + } } - } } .steps { - // Default size - @include steps-size(1em); + // Default size + @include steps-size(1em); - // Sizes - @each $name, $size in $sizes { - &.size-#{$name} { - @include steps-size($size); - } - } - - .steps-list { - --#{$prefix}steps-divider-height: #{$steps-divider-height}; - --#{$prefix}steps-title-bg: #{$steps-title-bg}; - --#{$prefix}steps-title-color: #{$steps-title-color}; - --#{$prefix}steps-title-font-weight: #{$steps-title-font-weight}; - --#{$prefix}steps-marker-bg: #{$steps-marker-bg}; - --#{$prefix}steps-marker-border: #{$steps-marker-border}; - --#{$prefix}steps-marker-color: #{$steps-marker-color}; - - position: relative; - display: flex; - flex-wrap: wrap; - padding: 0; - margin: 0; - - .step-item { - position: relative; - display: flex; - flex-grow: 1; - flex-basis: 1em; - list-style: none; - justify-content: center; - - .divider { - background: var(--#{$prefix}steps-marker-bg); - background-size: 200% 100%; - background-position: right bottom; - height: var(--#{$prefix}steps-divider-height); - display: block; - position: absolute; - top: $font-size-base; - left: -50%; - width: 100%; - z-index: -1; - } - - .step-link { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: transparent; - border: transparent; - - &.clickable .step-marker { - cursor: pointer; - } - - &:not(.clickable) { - cursor: auto; - } - - &.label-right { - flex-direction: row; + // Sizes + @each $name, $size in $sizes { + &.size-#{$name} { + @include steps-size($size); } + } - &.label-left { - flex-direction: row-reverse; - } - } + .steps-list { + --#{$prefix}steps-divider-height: #{$steps-divider-height}; + --#{$prefix}steps-title-bg: #{$steps-title-bg}; + --#{$prefix}steps-title-color: #{$steps-title-color}; + --#{$prefix}steps-title-font-weight: #{$steps-title-font-weight}; + --#{$prefix}steps-marker-bg: #{$steps-marker-bg}; + --#{$prefix}steps-marker-border: #{$steps-marker-border}; + --#{$prefix}steps-marker-color: #{$steps-marker-color}; - .step-marker { + position: relative; display: flex; - justify-content: center; - align-items: center; - text-align: center; - background: var(--#{$prefix}steps-marker-bg); - border: 1px solid var(--#{$prefix}steps-marker-border); - color: var(--#{$prefix}steps-marker-color); - margin: 0 auto; - font-weight: 700; - overflow: hidden; - - .icon { - margin: 0; - } - } - - .step-title { - color: var(--#{$prefix}steps-title-color); - font-weight: var(--#{$prefix}steps-title-font-weight); - text-align: center; - z-index: 1; - background: var(--#{$prefix}steps-title-bg); - padding: 0.2em; - } - - &:only-child { - &::before, - &::after { - // This will contain the divider - content: " "; - background: var(--#{$prefix}steps-marker-bg); - background-size: 200% 100%; - background-position: right bottom; - height: var(--#{$prefix}steps-divider-height); - display: block; - position: absolute; - top: $font-size-base; - width: 25%; - z-index: -1; + flex-wrap: wrap; + padding: 0; + margin: 0; + + .step-item { + position: relative; + display: flex; + flex-grow: 1; + flex-basis: 1em; + list-style: none; + justify-content: center; + + .divider { + background: var(--#{$prefix}steps-marker-bg); + background-size: 200% 100%; + background-position: right bottom; + height: var(--#{$prefix}steps-divider-height); + display: block; + position: absolute; + top: $font-size-base; + left: -50%; + width: 100%; + z-index: -1; + } + + .step-link { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background: transparent; + border: transparent; + + &.clickable .step-marker { + cursor: pointer; + } + + &:not(.clickable) { + cursor: auto; + } + + &.label-right { + flex-direction: row; + } + + &.label-left { + flex-direction: row-reverse; + } + } + + .step-marker { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + background: var(--#{$prefix}steps-marker-bg); + border: 1px solid var(--#{$prefix}steps-marker-border); + color: var(--#{$prefix}steps-marker-color); + margin: 0 auto; + font-weight: 700; + overflow: hidden; + + .icon { + margin: 0; + } + } + + .step-title { + color: var(--#{$prefix}steps-title-color); + font-weight: var(--#{$prefix}steps-title-font-weight); + text-align: center; + z-index: 1; + background: var(--#{$prefix}steps-title-bg); + padding: 0.2em; + } + + &:only-child { + &::before, + &::after { + // This will contain the divider + content: " "; + background: var(--#{$prefix}steps-marker-bg); + background-size: 200% 100%; + background-position: right bottom; + height: var(--#{$prefix}steps-divider-height); + display: block; + position: absolute; + top: $font-size-base; + width: 25%; + z-index: -1; + } + + &::before { + right: 50%; + } + + &::after { + left: 50%; + } + } + + // Colors default variants + @include steps-color($steps-color-active); + + // Colors variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + @include steps-color($color); + } + } } - &::before { - right: 50%; + &.animated { + .step-item { + .divider { + transition: background $speed-slow $easing; + } + } } + } - &::after { - left: 50%; - } - } + .step-content { + --#{$prefix}steps-content-spacer: #{$steps-content-spacer}; + --#{$prefix}steps-content-padding: #{$steps-content-padding}; - // Colors default variants - @include steps-color($steps-color-active); + position: relative; + display: flex; + flex-direction: column; + overflow: visible; + margin-top: var(--#{$prefix}steps-content-spacer); - // Colors variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - @include steps-color($color); + &.transition { + overflow: hidden; } - } - } - &.animated { - .step-item { - .divider { - transition: background $speed-slow $easing; + &:not(:has(.step-item:empty)) { + padding: var(--#{$prefix}steps-content-padding); } - } } - } - - .step-content { - --#{$prefix}steps-content-spacer: #{$steps-content-spacer}; - --#{$prefix}steps-content-padding: #{$steps-content-padding}; - - position: relative; - display: flex; - flex-direction: column; - overflow: visible; - margin-top: var(--#{$prefix}steps-content-spacer); - - &.transition { - overflow: hidden; - } - - &:not(:has(.step-item:empty)) { - padding: var(--#{$prefix}steps-content-padding); - } - } - - &.vertical { - --#{$prefix}steps-vertical-padding: #{$steps-vertical-padding}; - display: flex; - flex-direction: row; - flex-wrap: wrap; + &.vertical { + --#{$prefix}steps-vertical-padding: #{$steps-vertical-padding}; - > .steps-list { - flex-direction: column; - overflow: hidden; - - .step-item { display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: var(--#{$prefix}steps-vertical-padding); - - .step-title { - background: var(--#{$prefix}steps-title-bg); + flex-direction: row; + flex-wrap: wrap; + + > .steps-list { + flex-direction: column; + overflow: hidden; + + .step-item { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: var(--#{$prefix}steps-vertical-padding); + + .step-title { + background: var(--#{$prefix}steps-title-bg); + } + + .divider, + &::before, + &::after { + height: 100%; + width: var(--#{$prefix}steps-divider-height); + } + + .divider { + top: -50%; + left: 48%; + } + + &:only-child { + &::before { + right: unset; + top: -25%; + } + + &::after { + left: unset; + top: 25%; + } + } + } } - .divider, - &::before, - &::after { - height: 100%; - width: var(--#{$prefix}steps-divider-height); + > .step-content { + flex-grow: 1; } - .divider { - top: -50%; - left: 48%; + > .step-navigation { + flex-basis: 100%; } - &:only-child { - &::before { - right: unset; - top: -25%; - } - - &::after { - left: unset; - top: 25%; - } + &.position-right { + flex-direction: row-reverse; } - } - } - - > .step-content { - flex-grow: 1; - } - - > .step-navigation { - flex-basis: 100%; - } - - &.position-right { - flex-direction: row-reverse; } - } } diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss index e65c85a..ebc5d6f 100644 --- a/src/assets/scss/components/_switch.scss +++ b/src/assets/scss/components/_switch.scss @@ -21,83 +21,83 @@ $switch-spacer: 0.5rem !default; /* @bootstrap docs */ @function switchSVG($color, $svg, $replacement) { - @return escape-svg(str-replace($svg, "#{$form-switch-color}", $color)); + @return escape-svg(str-replace($svg, "#{$form-switch-color}", $color)); } .form-switch { - --#{$prefix}switch-spacer: #{$switch-spacer}; - - position: relative; - - &:not(:last-child) { - margin-right: var(--#{$prefix}switch-spacer); - } - - // Variant - @each $name, $color in $theme-colors { - &.variant-#{$name} input[type="checkbox"] { - background-color: transparent; - border-color: var(--#{$prefix}#{$name}); - - --#{$prefix}form-switch-bg: #{switchSVG( - $color, - $form-switch-bg-image, - $form-switch-color - )}; - - &:checked { - background-color: var(--#{$prefix}#{$name}); - --#{$prefix}form-switch-bg: #{switchSVG( - $white, - $form-switch-checked-bg-image, - $form-switch-checked-color - )}; - } - } + --#{$prefix}switch-spacer: #{$switch-spacer}; + + position: relative; - // possive colors variant - &.variant-#{$name}-passive { - input[type="checkbox"]:checked { - background-color: var(--#{$prefix}#{$name}); - border-color: var(--#{$prefix}#{$name}); - } + &:not(:last-child) { + margin-right: var(--#{$prefix}switch-spacer); } - // subtle color variant - &.variant-#{$name}-subtle input[type="checkbox"] { - $color: map.get($theme-colors-bg-subtle, #{$name}); - - background-color: transparent; - border-color: var(--#{$prefix}#{$name}-border-subtle); - - --#{$prefix}form-switch-bg: #{switchSVG( - $color, - $form-switch-bg-image, - $form-switch-color - )}; - - &:checked { - background-color: var(--#{$prefix}#{$name}-bg-subtle); - --#{$prefix}form-switch-bg: #{switchSVG( - $white, - $form-switch-checked-bg-image, - $form-switch-checked-color - )}; - } + // Variant + @each $name, $color in $theme-colors { + &.variant-#{$name} input[type="checkbox"] { + background-color: transparent; + border-color: var(--#{$prefix}#{$name}); + + --#{$prefix}form-switch-bg: #{switchSVG( + $color, + $form-switch-bg-image, + $form-switch-color + )}; + + &:checked { + background-color: var(--#{$prefix}#{$name}); + --#{$prefix}form-switch-bg: #{switchSVG( + $white, + $form-switch-checked-bg-image, + $form-switch-checked-color + )}; + } + } + + // possive colors variant + &.variant-#{$name}-passive { + input[type="checkbox"]:checked { + background-color: var(--#{$prefix}#{$name}); + border-color: var(--#{$prefix}#{$name}); + } + } + + // subtle color variant + &.variant-#{$name}-subtle input[type="checkbox"] { + $color: map.get($theme-colors-bg-subtle, #{$name}); + + background-color: transparent; + border-color: var(--#{$prefix}#{$name}-border-subtle); + + --#{$prefix}form-switch-bg: #{switchSVG( + $color, + $form-switch-bg-image, + $form-switch-color + )}; + + &:checked { + background-color: var(--#{$prefix}#{$name}-bg-subtle); + --#{$prefix}form-switch-bg: #{switchSVG( + $white, + $form-switch-checked-bg-image, + $form-switch-checked-color + )}; + } + } } - } - &.reversed { - display: flex; - padding-left: unset; + &.reversed { + display: flex; + padding-left: unset; - .form-check-input { - order: 2; - margin-left: 0.5em; - } + .form-check-input { + order: 2; + margin-left: 0.5em; + } - .form-check-label { - order: 1; + .form-check-label { + order: 1; + } } - } } diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss index c08d7c5..2aac875 100644 --- a/src/assets/scss/components/_table.scss +++ b/src/assets/scss/components/_table.scss @@ -54,189 +54,195 @@ $table-card-spacer: $spacer; /* @bootstrap docs */ .table-wrapper { - --#{$prefix}table-sticky-zindex: #{$table-sticky-zindex}; - --#{$prefix}table-sticky-bg: #{$table-sticky-bg}; - --#{$prefix}table-sticky-color: #{$table-sticky-color}; - --#{$prefix}table-sticky-header-height: #{$table-sticky-header-height}; - --#{$prefix}table-sortable-hover-border-color: #{$table-sortable-hover-border-color}; - --#{$prefix}table-current-sort-bg: #{$table-current-sort-bg}; - - position: relative; - - .table-inner:focus { - border-radius: var(--#{$prefix}border-radius); - box-shadow: var(--#{$prefix}focus-ring-x, 0) - var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) - var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); - } - - .table { - --#{$prefix}table-head-bg: #{$table-head-bg}; - --#{$prefix}table-head-color: #{$table-head-color}; - --#{$prefix}table-head-border-width: #{$table-head-border-width}; - - // override sticky hover values - &.table-hover > tbody > tr:hover > .sticky { - --#{$prefix}table-color-state: var( - --#{$prefix}table-sticky-color, - var(--#{$prefix}table-hover-color) - ); - --#{$prefix}table-bg-state: var( - --#{$prefix}table-sticky-bg, - var(--#{$prefix}table-hover-bg) - ); + --#{$prefix}table-sticky-zindex: #{$table-sticky-zindex}; + --#{$prefix}table-sticky-bg: #{$table-sticky-bg}; + --#{$prefix}table-sticky-color: #{$table-sticky-color}; + --#{$prefix}table-sticky-header-height: #{$table-sticky-header-height}; + --#{$prefix}table-sortable-hover-border-color: #{$table-sortable-hover-border-color}; + --#{$prefix}table-current-sort-bg: #{$table-current-sort-bg}; + + position: relative; + + .table-inner:focus { + border-radius: var(--#{$prefix}border-radius); + box-shadow: var(--#{$prefix}focus-ring-x, 0) + var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) + var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); } - // override sticky striped values - &.table-striped > tbody > tr:nth-of-type(odd) > .sticky { - --#{$prefix}table-color-type: var( - --#{$prefix}table-sticky-color, - var(--#{$prefix}table-striped-color) - ); - --#{$prefix}table-bg-type: var( - --#{$prefix}table-sticky-bg, - var(--#{$prefix}table-striped-bg) - ); - } - - th, - td { - vertical-align: middle; - - &.sticky { - position: -webkit-sticky; - position: sticky; - left: 0; - z-index: var(--#{$prefix}table-sticky-zindex); - --#{$prefix}table-accent-color: var(--#{$prefix}table-sticky-color); - --#{$prefix}table-accent-bg: var(--#{$prefix}table-sticky-bg); - } - } - - thead th { - --#{$prefix}table-color-state: var(--#{$prefix}table-head-color); - --#{$prefix}table-bg-state: var(--#{$prefix}table-head-bg); - - position: relative; - border-bottom-width: var(--#{$prefix}table-head-border-width); - - &.sortable { - cursor: pointer; + .table { + --#{$prefix}table-head-bg: #{$table-head-bg}; + --#{$prefix}table-head-color: #{$table-head-color}; + --#{$prefix}table-head-border-width: #{$table-head-border-width}; + + // override sticky hover values + &.table-hover > tbody > tr:hover > .sticky { + --#{$prefix}table-color-state: var( + --#{$prefix}table-sticky-color, + var(--#{$prefix}table-hover-color) + ); + --#{$prefix}table-bg-state: var( + --#{$prefix}table-sticky-bg, + var(--#{$prefix}table-hover-bg) + ); + } - > span { - display: block; - position: relative; + // override sticky striped values + &.table-striped > tbody > tr:nth-of-type(odd) > .sticky { + --#{$prefix}table-color-type: var( + --#{$prefix}table-sticky-color, + var(--#{$prefix}table-striped-color) + ); + --#{$prefix}table-bg-type: var( + --#{$prefix}table-sticky-bg, + var(--#{$prefix}table-striped-bg) + ); } - &:hover { - border-color: var(--#{$prefix}table-sortable-hover-border-color); + th, + td { + vertical-align: middle; + + &.sticky { + position: -webkit-sticky; + position: sticky; + left: 0; + z-index: var(--#{$prefix}table-sticky-zindex); + --#{$prefix}table-accent-color: var( + --#{$prefix}table-sticky-color + ); + --#{$prefix}table-accent-bg: var(--#{$prefix}table-sticky-bg); + } } - } - &.current-sort { - --#{$prefix}table-bg-type: var(--#{$prefix}table-current-sort-bg); - } + thead th { + --#{$prefix}table-color-state: var(--#{$prefix}table-head-color); + --#{$prefix}table-bg-state: var(--#{$prefix}table-head-bg); + + position: relative; + border-bottom-width: var(--#{$prefix}table-head-border-width); + + &.sortable { + cursor: pointer; + + > span { + display: block; + position: relative; + } + + &:hover { + border-color: var( + --#{$prefix}table-sortable-hover-border-color + ); + } + } + + &.current-sort { + --#{$prefix}table-bg-type: var( + --#{$prefix}table-current-sort-bg + ); + } + + .sort-icon { + position: absolute; + right: 0; + } + } - .sort-icon { - position: absolute; - right: 0; - } + tbody tr { + &.table-detail { + --#{$prefix}table-detail-bg: #{$table-detail-bg}; + --#{$prefix}table-detail-padding: #{$table-detail-padding}; + + td { + background-color: var(--#{$prefix}table-detail-bg); + padding: var(--#{$prefix}table-detail-padding); + box-shadow: unset; + } + } + } } - tbody tr { - &.table-detail { - --#{$prefix}table-detail-bg: #{$table-detail-bg}; - --#{$prefix}table-detail-padding: #{$table-detail-padding}; + .table-sticky { + height: var(--#{$prefix}table-sticky-header-height); + overflow-y: auto; - td { - background-color: var(--#{$prefix}table-detail-bg); - padding: var(--#{$prefix}table-detail-padding); - box-shadow: unset; + .table thead th { + position: -webkit-sticky; + position: sticky; + left: 0; + top: 0; + z-index: calc(var(--#{$prefix}table-sticky-zindex) + 10); } - } } - } - - .table-sticky { - height: var(--#{$prefix}table-sticky-header-height); - overflow-y: auto; - - .table thead th { - position: -webkit-sticky; - position: sticky; - left: 0; - top: 0; - z-index: calc(var(--#{$prefix}table-sticky-zindex) + 10); + + .icon { + transition: + transform $speed-slow $easing, + opacity 86ms $easing; } - } - .icon { - transition: - transform $speed-slow $easing, - opacity 86ms $easing; - } + // mobile version + &.mobile-cards { + --#{$prefix}table-card-spacer: #{$table-card-spacer}; - // mobile version - &.mobile-cards { - --#{$prefix}table-card-spacer: #{$table-card-spacer}; + thead { + display: none; + } - thead { - display: none; - } + tbody > tr { + @extend .card; + overflow: hidden; + } - tbody > tr { - @extend .card; - overflow: hidden; - } + tfoot th { + border: 0; + display: inherit; + } - tfoot th { - border: 0; - display: inherit; - } + tr { + width: 100%; + + td { + border: 0; + display: inherit; - tr { - width: 100%; + &:last-child { + border-bottom: 0 !important; + } + } - td { - border: 0; - display: inherit; + &:not(:last-child) { + margin-bottom: var(--#{$prefix}table-card-spacer); + } - &:last-child { - border-bottom: 0 !important; + &:has(+ .table-detail) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; + } + + &.table-detail { + border-top-left-radius: 0; + border-top-right-radius: 0; + } } - } - - &:not(:last-child) { - margin-bottom: var(--#{$prefix}table-card-spacer); - } - - &:has(+ .table-detail) { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; - } - - &.table-detail { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } - tr:not(.table-detail):not(.table-empty):not(.table-footer) { - td { - display: flex; - justify-content: space-between; - align-items: end; - border-bottom: var(--#{$prefix}border-width) solid - var(--#{$prefix}table-border-color); - - &:before { - content: attr(data-label); - font-weight: bold; - padding-right: 0.5em; - text-align: left; + tr:not(.table-detail):not(.table-empty):not(.table-footer) { + td { + display: flex; + justify-content: space-between; + align-items: end; + border-bottom: var(--#{$prefix}border-width) solid + var(--#{$prefix}table-border-color); + + &:before { + content: attr(data-label); + font-weight: bold; + padding-right: 0.5em; + text-align: left; + } + } } - } } - } } diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss index 06d7b8d..6fb0081 100644 --- a/src/assets/scss/components/_tabs.scss +++ b/src/assets/scss/components/_tabs.scss @@ -37,126 +37,126 @@ $nav-underline-link-active-border-color: currentcolor !default; /* @bootstrap docs */ .tabs { - --#{$prefix}nav-tabs-spacer: #{$nav-tabs-spacer}; - --#{$prefix}nav-tabs-disabled-opacity: #{$nav-tabs-disabled-opacity}; + --#{$prefix}nav-tabs-spacer: #{$nav-tabs-spacer}; + --#{$prefix}nav-tabs-disabled-opacity: #{$nav-tabs-disabled-opacity}; - .nav { - margin-bottom: var(--#{$prefix}nav-tabs-spacer); + .nav { + margin-bottom: var(--#{$prefix}nav-tabs-spacer); - &-link { - .icon { - margin-right: 0.5em; - } + &-link { + .icon { + margin-right: 0.5em; + } - &:not(.disabled) { - cursor: pointer; - } + &:not(.disabled) { + cursor: pointer; + } - &.disabled { - cursor: not-allowed; - opacity: var(--#{$prefix}nav-tabs-disabled-opacity); - } - } + &.disabled { + cursor: not-allowed; + opacity: var(--#{$prefix}nav-tabs-disabled-opacity); + } + } - &:not(.nav-default) .nav-link { - --#{$prefix}nav-link-color: #{$nav-tabs-color}; - } + &:not(.nav-default) .nav-link { + --#{$prefix}nav-link-color: #{$nav-tabs-color}; + } - // style toggle / underline - &-default, - &-toggle { - @extend .nav-underline; - } + // style toggle / underline + &-default, + &-toggle { + @extend .nav-underline; + } - &-underline, - &-toggle { - --#{$prefix}nav-underline-link-active-bg: #{$nav-underline-link-active-bg}; - --#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color}; - - .nav-link.active { - background-color: var(--#{$prefix}nav-underline-link-active-bg); - border-bottom-color: var( - --#{$prefix}nav-underline-link-active-border-color - ); - } - } + &-underline, + &-toggle { + --#{$prefix}nav-underline-link-active-bg: #{$nav-underline-link-active-bg}; + --#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color}; + + .nav-link.active { + background-color: var(--#{$prefix}nav-underline-link-active-bg); + border-bottom-color: var( + --#{$prefix}nav-underline-link-active-border-color + ); + } + } - // style boxed / tabs - &-boxed { - @extend .nav-tabs; - } + // style boxed / tabs + &-boxed { + @extend .nav-tabs; + } - &-content { - position: relative; - } - } - - // Sizes - @each $name, $size in $sizes { - .size-#{$name} { - --#{$prefix}nav-link-font-size: #{$size}; - --#{$prefix}nav-link-padding-x: #{calc( - $nav-link-padding-x * strip-unit($size) - )}; - --#{$prefix}nav-link-padding-y: #{calc( - $nav-link-padding-y * strip-unit($size) - )}; + &-content { + position: relative; + } } - } - - // position vetical - &.vertical { - --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; - --#{$prefix}nav-underline-border-color: #{$nav-tabs-border-color}; - display: flex; - flex-direction: row; + // Sizes + @each $name, $size in $sizes { + .size-#{$name} { + --#{$prefix}nav-link-font-size: #{$size}; + --#{$prefix}nav-link-padding-x: #{calc( + $nav-link-padding-x * strip-unit($size) + )}; + --#{$prefix}nav-link-padding-y: #{calc( + $nav-link-padding-y * strip-unit($size) + )}; + } + } - .nav { - display: block; - - .nav-link { - width: 100%; - } - - &-default .nav-link { - border-bottom: var(--#{$prefix}nav-underline-border-width) solid - var(--#{$prefix}nav-underline-border-color); - text-align: left; - } - - &-tabs { - .nav-item:not(:has(+ [aria-selected="true"])) .nav-link { - border-bottom: var(--#{$prefix}nav-underline-border-width) solid - var(--#{$prefix}nav-underline-border-color); + // position vetical + &.vertical { + --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; + --#{$prefix}nav-underline-border-color: #{$nav-tabs-border-color}; + + display: flex; + flex-direction: row; + + .nav { + display: block; + + .nav-link { + width: 100%; + } + + &-default .nav-link { + border-bottom: var(--#{$prefix}nav-underline-border-width) solid + var(--#{$prefix}nav-underline-border-color); + text-align: left; + } + + &-tabs { + .nav-item:not(:has(+ [aria-selected="true"])) .nav-link { + border-bottom: var(--#{$prefix}nav-underline-border-width) + solid var(--#{$prefix}nav-underline-border-color); + } + } + + &-boxed { + border-bottom: 0; + } + + &-content { + flex-grow: 1; + } } - } - &-boxed { - border-bottom: 0; - } + &:not(.is-right) { + .nav { + margin-right: var(--#{$prefix}nav-tabs-spacer); + } + } - &-content { - flex-grow: 1; - } - } + &.position-right { + flex-direction: row-reverse; - &:not(.is-right) { - .nav { - margin-right: var(--#{$prefix}nav-tabs-spacer); - } + .nav { + margin-left: var(--#{$prefix}nav-tabs-spacer); + } + } } - &.position-right { - flex-direction: row-reverse; - - .nav { - margin-left: var(--#{$prefix}nav-tabs-spacer); - } + &.expanded:not(.vertical) .nav { + @extend .nav-fill; } - } - - &.expanded:not(.vertical) .nav { - @extend .nav-fill; - } } diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss index 0daa799..b104189 100644 --- a/src/assets/scss/components/_taginput.scss +++ b/src/assets/scss/components/_taginput.scss @@ -18,104 +18,106 @@ $taginput-counter-font-size: 0.75rem !default; /* @bootstrap docs */ .taginput { - .btn-close { - font-size: 0.8em; - } - - .taginput-wrapper { - --#{$prefix}taginput-border-width: #{$input-border-width}; - --#{$prefix}taginput-border-color: #{$input-border-color}; - --#{$prefix}taginput-border-radius: #{$input-border-radius}; - - display: flex; - flex-wrap: wrap; - border: var(--#{$prefix}taginput-border-width) solid - var(--#{$prefix}taginput-border-color); - border-radius: var(--#{$prefix}taginput-border-radius); - - &:hover, - &:focus-within { - box-shadow: var(--#{$prefix}focus-ring-x, 0) - var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) - var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); + .btn-close { + font-size: 0.8em; } - .badge { - --#{$prefix}badge-color: #{$taginput-badge-color}; - --#{$prefix}badge-font-size: #{$taginput-badge-font-size}; - --#{$prefix}badge-margin: #{$taginput-badge-margin}; - --#{$prefix}badge-bg: #{$taginput-badge-bg}; - --#{$prefix}badge-icon-space: #{$taginput-badge-icon-space}; - - display: inline-flex; - align-items: center; - background: var(--#{$prefix}badge-bg); - margin: var(--#{$prefix}badge-margin); - - // Color variants - @each $name, $color in $theme-colors { - &.variant-#{$name} { - --#{$prefix}badge-color: var(--#{$prefix}#{$name}-contrast); - --#{$prefix}badge-bg: var(--#{$prefix}#{$name}); + .taginput-wrapper { + --#{$prefix}taginput-border-width: #{$input-border-width}; + --#{$prefix}taginput-border-color: #{$input-border-color}; + --#{$prefix}taginput-border-radius: #{$input-border-radius}; + + display: flex; + flex-wrap: wrap; + border: var(--#{$prefix}taginput-border-width) solid + var(--#{$prefix}taginput-border-color); + border-radius: var(--#{$prefix}taginput-border-radius); + + &:hover, + &:focus-within { + box-shadow: var(--#{$prefix}focus-ring-x, 0) + var(--#{$prefix}focus-ring-y, 0) + var(--#{$prefix}focus-ring-blur, 0) + var(--#{$prefix}focus-ring-width) + var(--#{$prefix}focus-ring-color); } - } - .icon { - margin-left: var(--#{$prefix}badge-icon-space); - margin-bottom: 0; - cursor: pointer; - } + .badge { + --#{$prefix}badge-color: #{$taginput-badge-color}; + --#{$prefix}badge-font-size: #{$taginput-badge-font-size}; + --#{$prefix}badge-margin: #{$taginput-badge-margin}; + --#{$prefix}badge-bg: #{$taginput-badge-bg}; + --#{$prefix}badge-icon-space: #{$taginput-badge-icon-space}; + + display: inline-flex; + align-items: center; + background: var(--#{$prefix}badge-bg); + margin: var(--#{$prefix}badge-margin); + + // Color variants + @each $name, $color in $theme-colors { + &.variant-#{$name} { + --#{$prefix}badge-color: var(--#{$prefix}#{$name}-contrast); + --#{$prefix}badge-bg: var(--#{$prefix}#{$name}); + } + } + + .icon { + margin-left: var(--#{$prefix}badge-icon-space); + margin-bottom: 0; + cursor: pointer; + } + } + + .dropdown.expanded { + width: auto; + } } - .dropdown.expanded { - width: auto; + input { + border: 0; + box-shadow: none; + + // disable input focus shadow + &:focus { + box-shadow: none !important; + } } - } - input { - border: 0; - box-shadow: none; + .counter { + --#{$prefix}taginput-counter-margin: #{$taginput-counter-margin}; + --#{$prefix}taginput-counter-font-size: #{$taginput-counter-font-size}; - // disable input focus shadow - &:focus { - box-shadow: none !important; + position: relative; + display: block; + float: right; + font-size: var(--#{$prefix}taginput-counter-font-size); + margin: var(--#{$prefix}taginput-counter-margin); } - } - - .counter { - --#{$prefix}taginput-counter-margin: #{$taginput-counter-margin}; - --#{$prefix}taginput-counter-font-size: #{$taginput-counter-font-size}; - - position: relative; - display: block; - float: right; - font-size: var(--#{$prefix}taginput-counter-font-size); - margin: var(--#{$prefix}taginput-counter-margin); - } - - &.expanded { - width: 100%; - } - - &.disabled { - .taginput { - --#{$prefix}taginput-disabled-bg: #{$input-disabled-bg}; - --#{$prefix}taginput-disabled-color: #{$input-disabled-color}; - --#{$prefix}taginput-disabled-border-color: #{$input-disabled-border-color}; - - color: var(--#{$prefix}taginput-disabled-color); - background: var(--#{$prefix}taginput-disabled-bg); - border-color: var(--#{$prefix}taginput-disabled-border-color) - var(--#{$prefix}border-color); - cursor: not-allowed; - - input { - cursor: not-allowed; - } - - .btn-close { - display: none; - } + + &.expanded { + width: 100%; + } + + &.disabled { + .taginput { + --#{$prefix}taginput-disabled-bg: #{$input-disabled-bg}; + --#{$prefix}taginput-disabled-color: #{$input-disabled-color}; + --#{$prefix}taginput-disabled-border-color: #{$input-disabled-border-color}; + + color: var(--#{$prefix}taginput-disabled-color); + background: var(--#{$prefix}taginput-disabled-bg); + border-color: var(--#{$prefix}taginput-disabled-border-color) + var(--#{$prefix}border-color); + cursor: not-allowed; + + input { + cursor: not-allowed; + } + + .btn-close { + display: none; + } + } } - } } diff --git a/src/assets/scss/components/_timepicker.scss b/src/assets/scss/components/_timepicker.scss index d65f84b..f6323ca 100644 --- a/src/assets/scss/components/_timepicker.scss +++ b/src/assets/scss/components/_timepicker.scss @@ -2,36 +2,36 @@ /* @docs */ .timepicker { - .dropdown { - .dropdown-menu { - --#{$prefix}dropdown-width: auto; - --#{$prefix}dropdown-min-width: unset; - --#{$prefix}dropdown-padding-y: 0; - --#{$prefix}dropdown-link-active-bg: transparent; - --#{$prefix}dropdown-link-active-color: --#{$prefix}dropdown-link-color; - } + .dropdown { + .dropdown-menu { + --#{$prefix}dropdown-width: auto; + --#{$prefix}dropdown-min-width: unset; + --#{$prefix}dropdown-padding-y: 0; + --#{$prefix}dropdown-link-active-bg: transparent; + --#{$prefix}dropdown-link-active-color: --#{$prefix}dropdown-link-color; + } - .dropdown-item { - display: inline-flex; - border-radius: inherit; - width: max-content; + .dropdown-item { + display: inline-flex; + border-radius: inherit; + width: max-content; - .separator { - transform: translateY(15%); - font-weight: bolder; - } + .separator { + transform: translateY(15%); + font-weight: bolder; + } - .select { - .form-select { - border: transparent; - background-color: transparent; - cursor: pointer; + .select { + .form-select { + border: transparent; + background-color: transparent; + cursor: pointer; - &:focus { - box-shadow: none; - } + &:focus { + box-shadow: none; + } + } + } } - } } - } } diff --git a/src/assets/scss/components/_tooltip.scss b/src/assets/scss/components/_tooltip.scss index a2e1c80..b0a8941 100644 --- a/src/assets/scss/components/_tooltip.scss +++ b/src/assets/scss/components/_tooltip.scss @@ -22,298 +22,324 @@ $tooltip-zindex: $zindex-tooltip; /* @bootstrap docs */ .tooltip-wrapper { - --#{$prefix}tooltip-max-width: #{$tooltip-max-width}; - --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; - --#{$prefix}tooltip-font-size: #{$tooltip-font-size}; - --#{$prefix}tooltip-shadow: #{$tooltip-shadow}; - --#{$prefix}tooltip-zindex: #{$tooltip-zindex}; - --#{$prefix}tooltip-bg: #{$tooltip-bg}; - --#{$prefix}tooltip-color: #{$tooltip-color}; - - --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; - --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; - --#{$prefix}tooltip-arrow-spacer: #{$tooltip-arrow-spacer}; - --#{$prefix}tooltip-content-multiline-width: #{$tooltip-content-multiline-width}; - - $tooltip-arrow-size: min( - var(--#{$prefix}tooltip-arrow-width), - var(--#{$prefix}tooltip-arrow-height) - ); - - position: relative; - display: inline-flex; - - // Color variants - @each $name, $color in $theme-colors { - .variant-#{$name} { - --#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast); - --#{$prefix}tooltip-bg: var(--#{$prefix}#{$name}); - } - - .variant-#{$name}-subtle { - --#{$prefix}tooltip-color: var(--#{$prefix}body-color); - --#{$prefix}tooltip-bg: var(--#{$prefix}#{$name}-border-subtle); - } - } - - .tooltip-trigger { - width: 100%; - } - - .tooltip-content { - position: absolute; - white-space: nowrap; - color: var(--#{$prefix}tooltip-color); - border-radius: var(--#{$prefix}tooltip-border-radius); - background: var(--#{$prefix}tooltip-bg); - box-shadow: var(--#{$prefix}tooltip-shadow); - width: auto; - max-width: var(--#{$prefix}tooltip-max-width); - padding: $tooltip-padding-y $tooltip-padding-x; - font-size: var(--#{$prefix}tooltip-font-size); - z-index: var(--#{$prefix}tooltip-zindex); - - &::before { - position: absolute; - content: ""; - pointer-events: none; - border-top-color: var(--#{$prefix}tooltip-bg); - width: var(--#{$prefix}tooltip-arrow-width); - height: var(--#{$prefix}tooltip-arrow-height); - z-index: var(--#{$prefix}tooltip-zindex); - } - - &.always { - visibility: visible; - } - - &.multiline { - text-align: center; - white-space: normal; - width: var(--#{$prefix}tooltip-content-multiline-width); - } - - // Positioning - &.position { - &-top { - top: auto; - right: auto; - bottom: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - left: 50%; - transform: translateX(-50%); - - &::before { - top: 100%; - right: auto; - bottom: auto; - left: 50%; - transform: translateX(-50%); - border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-right: $tooltip-arrow-size solid transparent; - border-left: $tooltip-arrow-size solid transparent; + --#{$prefix}tooltip-max-width: #{$tooltip-max-width}; + --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; + --#{$prefix}tooltip-font-size: #{$tooltip-font-size}; + --#{$prefix}tooltip-shadow: #{$tooltip-shadow}; + --#{$prefix}tooltip-zindex: #{$tooltip-zindex}; + --#{$prefix}tooltip-bg: #{$tooltip-bg}; + --#{$prefix}tooltip-color: #{$tooltip-color}; + + --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; + --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; + --#{$prefix}tooltip-arrow-spacer: #{$tooltip-arrow-spacer}; + --#{$prefix}tooltip-content-multiline-width: #{$tooltip-content-multiline-width}; + + $tooltip-arrow-size: min( + var(--#{$prefix}tooltip-arrow-width), + var(--#{$prefix}tooltip-arrow-height) + ); + + position: relative; + display: inline-flex; + + // Color variants + @each $name, $color in $theme-colors { + .variant-#{$name} { + --#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast); + --#{$prefix}tooltip-bg: var(--#{$prefix}#{$name}); } - } - - &-bottom { - top: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - right: auto; - bottom: auto; - left: 50%; - transform: translateX(-50%); - &::before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-right: $tooltip-arrow-size solid transparent; - border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-left: $tooltip-arrow-size solid transparent; + .variant-#{$name}-subtle { + --#{$prefix}tooltip-color: var(--#{$prefix}body-color); + --#{$prefix}tooltip-bg: var(--#{$prefix}#{$name}-border-subtle); } - } - - &-right { - top: 50%; - right: auto; - bottom: auto; - left: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - transform: translateY(-50%); + } - &::before { - top: 50%; - right: 100%; - bottom: auto; - left: auto; - transform: translateY(-50%); - border-top: $tooltip-arrow-size solid transparent; - border-right: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-bottom: $tooltip-arrow-size solid transparent; - } - } + .tooltip-trigger { + width: 100%; + } - &-left { - top: 50%; - right: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - bottom: auto; - left: auto; - transform: translateY(-50%); + .tooltip-content { + position: absolute; + white-space: nowrap; + color: var(--#{$prefix}tooltip-color); + border-radius: var(--#{$prefix}tooltip-border-radius); + background: var(--#{$prefix}tooltip-bg); + box-shadow: var(--#{$prefix}tooltip-shadow); + width: auto; + max-width: var(--#{$prefix}tooltip-max-width); + padding: $tooltip-padding-y $tooltip-padding-x; + font-size: var(--#{$prefix}tooltip-font-size); + z-index: var(--#{$prefix}tooltip-zindex); &::before { - top: 50%; - right: auto; - bottom: auto; - left: 100%; - transform: translateY(-50%); - border-top: $tooltip-arrow-size solid transparent; - border-bottom: $tooltip-arrow-size solid transparent; - border-left: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); + position: absolute; + content: ""; + pointer-events: none; + border-top-color: var(--#{$prefix}tooltip-bg); + width: var(--#{$prefix}tooltip-arrow-width); + height: var(--#{$prefix}tooltip-arrow-height); + z-index: var(--#{$prefix}tooltip-zindex); } - } - - &-top-right { - top: auto; - right: 0; - bottom: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - left: auto; - transform: translateX(50%); - &::before { - top: 100%; - right: auto; - bottom: auto; - left: 50%; - transform: translateX(-50%); - border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-right: calc($tooltip-arrow-size * 2) solid transparent; - border-left: 0 solid transparent; + &.always { + visibility: visible; } - } - &-top-left { - top: auto; - right: auto; - bottom: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - left: 0; - transform: translateX(-50%); - - &::before { - top: 100%; - right: auto; - bottom: auto; - left: 50%; - transform: translateX(-50%); - border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-right: 0 solid transparent; - border-left: calc($tooltip-arrow-size * 2) solid transparent; + &.multiline { + text-align: center; + white-space: normal; + width: var(--#{$prefix}tooltip-content-multiline-width); } - } - &-bottom-right { - top: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - right: 0; - bottom: auto; - left: auto; - transform: translateX(50%); - - &::before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-right: calc($tooltip-arrow-size * 2) solid transparent; - border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); - border-left: 0 solid transparent; + // Positioning + &.position { + &-top { + top: auto; + right: auto; + bottom: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + left: 50%; + transform: translateX(-50%); + + &::before { + top: 100%; + right: auto; + bottom: auto; + left: 50%; + transform: translateX(-50%); + border-top: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-right: $tooltip-arrow-size solid transparent; + border-left: $tooltip-arrow-size solid transparent; + } + } + + &-bottom { + top: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + right: auto; + bottom: auto; + left: 50%; + transform: translateX(-50%); + + &::before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-right: $tooltip-arrow-size solid transparent; + border-bottom: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-left: $tooltip-arrow-size solid transparent; + } + } + + &-right { + top: 50%; + right: auto; + bottom: auto; + left: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + transform: translateY(-50%); + + &::before { + top: 50%; + right: 100%; + bottom: auto; + left: auto; + transform: translateY(-50%); + border-top: $tooltip-arrow-size solid transparent; + border-right: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-bottom: $tooltip-arrow-size solid transparent; + } + } + + &-left { + top: 50%; + right: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + bottom: auto; + left: auto; + transform: translateY(-50%); + + &::before { + top: 50%; + right: auto; + bottom: auto; + left: 100%; + transform: translateY(-50%); + border-top: $tooltip-arrow-size solid transparent; + border-bottom: $tooltip-arrow-size solid transparent; + border-left: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + } + } + + &-top-right { + top: auto; + right: 0; + bottom: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + left: auto; + transform: translateX(50%); + + &::before { + top: 100%; + right: auto; + bottom: auto; + left: 50%; + transform: translateX(-50%); + border-top: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-right: calc($tooltip-arrow-size * 2) solid + transparent; + border-left: 0 solid transparent; + } + } + + &-top-left { + top: auto; + right: auto; + bottom: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + left: 0; + transform: translateX(-50%); + + &::before { + top: 100%; + right: auto; + bottom: auto; + left: 50%; + transform: translateX(-50%); + border-top: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-right: 0 solid transparent; + border-left: calc($tooltip-arrow-size * 2) solid transparent; + } + } + + &-bottom-right { + top: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + right: 0; + bottom: auto; + left: auto; + transform: translateX(50%); + + &::before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-right: calc($tooltip-arrow-size * 2) solid + transparent; + border-bottom: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + border-left: 0 solid transparent; + } + } + + &-bottom-left { + top: calc( + 100% + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ); + right: auto; + bottom: auto; + left: 0; + transform: translateX(-50%); + + &::before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-right: 0 solid transparent; + border-left: calc($tooltip-arrow-size * 2) solid transparent; + border-bottom: $tooltip-arrow-size solid + var(--#{$prefix}tooltip-bg); + } + } } - } - - &-bottom-left { - top: calc( - 100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - right: auto; - bottom: auto; - left: 0; - transform: translateX(-50%); + } - &::before { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-right: 0 solid transparent; - border-left: calc($tooltip-arrow-size * 2) solid transparent; - border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg); + &.teleported { + // position + .position { + &-top, + &-top-left, + &-top-right { + margin-top: calc( + -1 * + ( + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ) + ); + } + + &-bottom, + &-bottom-left, + &-bottom-right { + margin-top: calc( + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) + ); + } + + &-right { + margin-left: calc( + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) + ); + } + + &-left { + margin-left: calc( + -1 * + ( + $tooltip-arrow-size + + var(--#{$prefix}tooltip-arrow-spacer) + ) + ); + } } - } - } - } - - &.teleported { - // position - .position { - &-top, - &-top-left, - &-top-right { - margin-top: calc( - -1 * ($tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)) - ); - } - - &-bottom, - &-bottom-left, - &-bottom-right { - margin-top: calc( - $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - } - - &-right { - margin-left: calc( - $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer) - ); - } - - &-left { - margin-left: calc( - -1 * ($tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)) - ); - } } - } - // States - &[disabled="true"] { - .tooltip-content { - display: none; + // States + &[disabled="true"] { + .tooltip-content { + display: none; + } } - } - &.dashed { - .tooltip-content { - border-bottom: 1px dashed var(--#{$prefix}gray-light); + &.dashed { + .tooltip-content { + border-bottom: 1px dashed var(--#{$prefix}gray-light); + } } - } - &.square { - .tooltip-content { - border-radius: 0; + &.square { + .tooltip-content { + border-radius: 0; + } } - } } diff --git a/src/assets/scss/components/_upload.scss b/src/assets/scss/components/_upload.scss index 7689aa2..11e33ca 100644 --- a/src/assets/scss/components/_upload.scss +++ b/src/assets/scss/components/_upload.scss @@ -12,47 +12,47 @@ $upload-disabled-opacity: 0.5 !default; /* @docs */ .upload { - --#{$prefix}upload-disabled-opacity: #{$upload-disabled-opacity}; - - input { - display: none; - } - - &.expanded { - width: 100%; - } - - &.disabled { - cursor: not-allowed; - opacity: var(--#{$prefix}upload-disabled-opacity); - } - - .upload-draggable { - --#{$prefix}upload-draggable-bg: #{$upload-draggable-bg}; - --#{$prefix}upload-draggable-bg-hover: #{$upload-draggable-bg-hover}; - --#{$prefix}upload-draggable-border-color: #{$upload-draggable-border-color}; - --#{$prefix}upload-draggable-border-color-hover: #{$upload-draggable-border-color-hover}; - --#{$prefix}upload-draggable-border-width: #{$upload-draggable-border-width}; - --#{$prefix}upload-draggable-border-radius: #{$upload-draggable-border-radius}; - --#{$prefix}upload-draggable-padding: #{$upload-draggable-padding}; - - background: var(--#{$prefix}upload-draggable-bg); - border: var(--#{$prefix}upload-draggable-border-width) dashed - var(--#{$prefix}upload-draggable-border-color); - border-radius: var(--#{$prefix}upload-draggable-border-radius); - padding: var(--#{$prefix}upload-draggable-padding); - - &.hovered { - background-color: var(--#{$prefix}upload-draggable-bg-hover); - border-color: var(--#{$prefix}upload-draggable-border-color-hover); + --#{$prefix}upload-disabled-opacity: #{$upload-disabled-opacity}; + + input { + display: none; + } + + &.expanded { + width: 100%; + } + + &.disabled { + cursor: not-allowed; + opacity: var(--#{$prefix}upload-disabled-opacity); } - // Color variant - @each $name, $color-light in $theme-colors { - &.variant-#{$name} { - background-color: var(--#{$prefix}#{$name}-bg-subtle); - border-color: var(--#{$prefix}#{$name}); - } + .upload-draggable { + --#{$prefix}upload-draggable-bg: #{$upload-draggable-bg}; + --#{$prefix}upload-draggable-bg-hover: #{$upload-draggable-bg-hover}; + --#{$prefix}upload-draggable-border-color: #{$upload-draggable-border-color}; + --#{$prefix}upload-draggable-border-color-hover: #{$upload-draggable-border-color-hover}; + --#{$prefix}upload-draggable-border-width: #{$upload-draggable-border-width}; + --#{$prefix}upload-draggable-border-radius: #{$upload-draggable-border-radius}; + --#{$prefix}upload-draggable-padding: #{$upload-draggable-padding}; + + background: var(--#{$prefix}upload-draggable-bg); + border: var(--#{$prefix}upload-draggable-border-width) dashed + var(--#{$prefix}upload-draggable-border-color); + border-radius: var(--#{$prefix}upload-draggable-border-radius); + padding: var(--#{$prefix}upload-draggable-padding); + + &.hovered { + background-color: var(--#{$prefix}upload-draggable-bg-hover); + border-color: var(--#{$prefix}upload-draggable-border-color-hover); + } + + // Color variant + @each $name, $color-light in $theme-colors { + &.variant-#{$name} { + background-color: var(--#{$prefix}#{$name}-bg-subtle); + border-color: var(--#{$prefix}#{$name}); + } + } } - } } diff --git a/src/assets/scss/utils/_animations.scss b/src/assets/scss/utils/_animations.scss index f3b06c0..32f68ca 100644 --- a/src/assets/scss/utils/_animations.scss +++ b/src/assets/scss/utils/_animations.scss @@ -2,94 +2,94 @@ // Fade out @keyframes fadeOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .fadeOut { - animation-name: fadeOut; + animation-name: fadeOut; } @keyframes fadeOutDown { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, 100%, 0); - } + to { + opacity: 0; + transform: translate3d(0, 100%, 0); + } } .fadeOutDown { - animation-name: fadeOutDown; + animation-name: fadeOutDown; } @keyframes fadeOutUp { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, -100%, 0); - } + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } } .fadeOutUp { - animation-name: fadeOutUp; + animation-name: fadeOutUp; } // Fade In @keyframes fadeIn { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } .fadeIn { - animation-name: fadeIn; + animation-name: fadeIn; } @keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -100%, 0); - } + from { + opacity: 0; + transform: translate3d(0, -100%, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInDown { - animation-name: fadeInDown; + animation-name: fadeInDown; } @keyframes fadeInUp { - from { - opacity: 0; - transform: translate3d(0, 100%, 0); - } + from { + opacity: 0; + transform: translate3d(0, 100%, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInUp { - animation-name: fadeInUp; + animation-name: fadeInUp; } /** @@ -99,53 +99,53 @@ // Fade .fade-enter-active, .fade-leave-active { - transition: opacity $speed-slow $easing; + transition: opacity $speed-slow $easing; } .fade-enter, .fade-enter-from, .fade-leave-to { - opacity: 0; + opacity: 0; } // Zoom In .zoom-in-enter-active, .zoom-in-leave-active { - transition: opacity $speed-slow $easing; + transition: opacity $speed-slow $easing; - .animation-content { - transition: transform $speed-slow $easing; - } + .animation-content { + transition: transform $speed-slow $easing; + } } .zoom-in-enter, .zoom-in-enter-from, .zoom-in-leave-active { - opacity: 0; + opacity: 0; - .animation-content { - transform: scale(0.95); - } + .animation-content { + transform: scale(0.95); + } } // Zoom Out .zoom-out-enter-active, .zoom-out-leave-active { - transition: opacity $speed-slow $easing; + transition: opacity $speed-slow $easing; - .animation-content { - transition: transform $speed-slow $easing; - } + .animation-content { + transition: transform $speed-slow $easing; + } } .zoom-out-enter, .zoom-out-enter-from, .zoom-out-leave-active { - opacity: 0; + opacity: 0; - .animation-content { - transform: scale(1.05); - } + .animation-content { + transform: scale(1.05); + } } // Slide @@ -153,67 +153,67 @@ .slide-next-leave-active, .slide-prev-enter-active, .slide-prev-leave-active { - transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86); + transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slide-prev-leave-to, .slide-next-enter, .slide-next-enter-from { - transform: translate3d(-100%, 0, 0); - position: absolute; - width: 100%; + transform: translate3d(-100%, 0, 0); + position: absolute; + width: 100%; } .slide-prev-enter, .slide-prev-enter-from, .slide-next-leave-to { - transform: translate3d(100%, 0, 0); - position: absolute; - width: 100%; + transform: translate3d(100%, 0, 0); + position: absolute; + width: 100%; } .slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active { - transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86); + transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slide-down-enter, .slide-up-leave-to, .slide-down-enter-from { - transform: translate3d(0, -100%, 0); - position: absolute; - height: 100%; + transform: translate3d(0, -100%, 0); + position: absolute; + height: 100%; } .slide-up-enter, .slide-up-enter-from, .slide-down-leave-to { - transform: translate3d(0, 100%, 0); - position: absolute; - height: 100%; + transform: translate3d(0, 100%, 0); + position: absolute; + height: 100%; } .slide-enter-active { - transition: $speed-slow $easing; + transition: $speed-slow $easing; } .slide-leave-active { - transition: $speed-slow $easing; - transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + transition: $speed-slow $easing; + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slide-leave, .slide-enter-to, .slide-leave-from { - max-height: 100px; - overflow: hidden; + max-height: 100px; + overflow: hidden; } .slide-enter, .slide-enter-from, .slide-leave-to { - overflow: hidden; - max-height: 0; + overflow: hidden; + max-height: 0; } diff --git a/src/assets/scss/utils/_functions.scss b/src/assets/scss/utils/_functions.scss index 5a63410..39d364c 100644 --- a/src/assets/scss/utils/_functions.scss +++ b/src/assets/scss/utils/_functions.scss @@ -8,9 +8,9 @@ /// @param {Number} $number - Number to remove unit from /// @return {Number} - Unitless number @function strip-unit($number) { - @if type-of($number) == "number" and not unitless($number) { - @return math.div($number, ($number * 0 + 1)); - } + @if type-of($number) == "number" and not unitless($number) { + @return math.div($number, ($number * 0 + 1)); + } - @return $number; + @return $number; } diff --git a/src/assets/scss/utils/_root.scss b/src/assets/scss/utils/_root.scss index 0c7c58c..91aa89f 100644 --- a/src/assets/scss/utils/_root.scss +++ b/src/assets/scss/utils/_root.scss @@ -4,33 +4,33 @@ // generate global color classes @each $name, $color in $colors { - .bg-#{$name} { - background-color: rgba( - var(--#{$prefix}#{$name}-rgb), - var(--#{$prefix}bg-opacity, 1) - ); - } + .bg-#{$name} { + background-color: rgba( + var(--#{$prefix}#{$name}-rgb), + var(--#{$prefix}bg-opacity, 1) + ); + } - .bg-#{$name}-subtle { - background-color: rgba( - to-rgb(tint-color($color, 80%)), - var(--#{$prefix}bg-opacity, 1) - ); - } + .bg-#{$name}-subtle { + background-color: rgba( + to-rgb(tint-color($color, 80%)), + var(--#{$prefix}bg-opacity, 1) + ); + } - .text-#{$name} { - color: var(--#{$prefix}#{$name}); - } + .text-#{$name} { + color: var(--#{$prefix}#{$name}); + } } :root { - // generate color rgb variables - @each $name, $color in $colors { - --#{$prefix}#{$name}-rgb: #{to-rgb($color)}; - } + // generate color rgb variables + @each $name, $color in $colors { + --#{$prefix}#{$name}-rgb: #{to-rgb($color)}; + } - // generate contrast variables - @each $name, $color in $theme-colors { - --#{$prefix}#{$name}-contrast: #{color-contrast($color)}; - } + // generate contrast variables + @each $name, $color in $theme-colors { + --#{$prefix}#{$name}-contrast: #{color-contrast($color)}; + } } diff --git a/src/assets/scss/utils/_utility.scss b/src/assets/scss/utils/_utility.scss index ca9e03b..f9e0d08 100644 --- a/src/assets/scss/utils/_utility.scss +++ b/src/assets/scss/utils/_utility.scss @@ -7,120 +7,120 @@ .btn-close > .icon, .btn-close.icon > i, .btn-close.icon > svg { - visibility: hidden; + visibility: hidden; } @each $name, $pair in $theme-colors { - .variant-#{$name} > .btn-close { - @extend .btn-close-white; - } + .variant-#{$name} > .btn-close { + @extend .btn-close-white; + } } // global scroll classes html.scroll-clipped, body.scroll-clipped { - overflow: hidden; - padding-right: 1rem; + overflow: hidden; + padding-right: 1rem; } html.scroll-hidden, body.scroll-hidden { - position: fixed; - width: 100%; - bottom: 0; - overflow-x: hidden; - overflow-y: scroll; + position: fixed; + width: 100%; + bottom: 0; + overflow-x: hidden; + overflow-y: scroll; } // utlity classes .clickable { - cursor: pointer; + cursor: pointer; } .not-clickable { - cursor: unset !important; + cursor: unset !important; } .fit-content { - width: fit-content; + width: fit-content; } .max-content { - width: max-content; + width: max-content; } .max-width, .fullwidth { - width: 100%; + width: 100%; } .width-unset { - width: unset; + width: unset; } .max-height, .fullheight { - height: 100%; + height: 100%; } .height-unset { - height: unset; + height: unset; } // utility classes for text .text-right { - text-align: right; + text-align: right; } .text-left { - text-align: left; + text-align: left; } .text-center { - text-align: center; + text-align: center; } // Utitlity classes for z-index sass variables (see https://getbootstrap.com/docs/5.3/layout/z-index/) .z-dropdown { - z-index: $zindex-dropdown; + z-index: $zindex-dropdown; } .z-sticky { - z-index: $zindex-sticky; + z-index: $zindex-sticky; } .z-fixed { - z-index: $zindex-fixed; + z-index: $zindex-fixed; } .z-offcanvas-backdrop { - z-index: $zindex-offcanvas-backdrop; + z-index: $zindex-offcanvas-backdrop; } .z-offcanvas { - z-index: $zindex-offcanvas; + z-index: $zindex-offcanvas; } .z-modal-backdrop { - z-index: $zindex-modal-backdrop; + z-index: $zindex-modal-backdrop; } .z-modal { - z-index: $zindex-modal; + z-index: $zindex-modal; } .z-popover { - z-index: $zindex-popover; + z-index: $zindex-popover; } .z-tooltip { - z-index: $zindex-tooltip; + z-index: $zindex-tooltip; } .z-toast { - z-index: $zindex-toast; + z-index: $zindex-toast; } diff --git a/src/assets/scss/utils/_variables.scss b/src/assets/scss/utils/_variables.scss index f81d9c1..bb7afb1 100644 --- a/src/assets/scss/utils/_variables.scss +++ b/src/assets/scss/utils/_variables.scss @@ -10,16 +10,16 @@ $easing: ease !default; // Sizes $sizes: ( - "x-small": 0.5rem, - "small": 0.75rem, - "medium": 1.25rem, - "large": 1.5rem, - "x-large": 2rem, + "x-small": 0.5rem, + "small": 0.75rem, + "medium": 1.25rem, + "large": 1.5rem, + "x-large": 2rem, ) !default; // Adding aditional gray-light color to colors map $custom-colors: ( - "gray-light": $gray-300, + "gray-light": $gray-300, ); $colors: map.merge($colors, $custom-colors); diff --git a/src/components.ts b/src/components.ts index 2b9d7a4..32d40da 100644 --- a/src/components.ts +++ b/src/components.ts @@ -1,31 +1,31 @@ export default [ - "Autocomplete", - "Button", - "Carousel", - "Checkbox", - "Collapse", - "Datepicker", - "Datetimepicker", - "Dropdown", - "Field", - "Icon", - "Input", - "Loading", - "Menu", - "Modal", - "Notification", - "Pagination", - "Radio", - "Select", - "Sidebar", - "Skeleton", - "Slider", - "Steps", - "Switch", - "Table", - "Tabs", - "Taginput", - "Timepicker", - "Tooltip", - "Upload", + "Autocomplete", + "Button", + "Carousel", + "Checkbox", + "Collapse", + "Datepicker", + "Datetimepicker", + "Dropdown", + "Field", + "Icon", + "Input", + "Loading", + "Menu", + "Modal", + "Notification", + "Pagination", + "Radio", + "Select", + "Sidebar", + "Skeleton", + "Slider", + "Steps", + "Switch", + "Table", + "Tabs", + "Taginput", + "Timepicker", + "Tooltip", + "Upload", ]; diff --git a/src/main.ts b/src/main.ts index c976dc5..f3b549f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,20 +13,20 @@ import "@oruga-ui/examples/dist/style.css"; import { bootstrapConfig } from "./plugins/theme"; createApp(App) - .use(router) - .use(Oruga, { - iconPack: "fas", - customIconPacks: { - fas: { - sizes: { - default: "", - small: "fa-sm", - medium: "fa-lg", - large: "fa-xl", + .use(router) + .use(Oruga, { + iconPack: "fas", + customIconPacks: { + fas: { + sizes: { + default: "", + small: "fa-sm", + medium: "fa-lg", + large: "fa-xl", + }, + }, }, - }, - }, - ...bootstrapConfig, - }) - .use(Examples) - .mount("#app"); + ...bootstrapConfig, + }) + .use(Examples) + .mount("#app"); diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts index c967298..ce4c9f5 100644 --- a/src/plugins/theme.ts +++ b/src/plugins/theme.ts @@ -4,534 +4,535 @@ import type { OrugaOptions, ComponentProps } from "@oruga-ui/oruga-next"; import "../assets/scss/bootstrap-build.scss"; const bootstrapConfig: OrugaOptions = { - autocomplete: { - override: true, - rootClass: "autocomplete", - itemHoverClass: "active", - itemEmptyClass: "disabled", - itemGroupTitleClass: "fw-bold", - }, - button: { - override: true, - rootClass: "btn", - wrapperClass: "button-wrapper", - sizeClass: (size: string) => { - if (size == "small") return "btn-sm"; - else if (size == "medium") return "btn-md"; - else if (size == "large") return "btn-lg"; - else return `btn-${size}`; + autocomplete: { + override: true, + rootClass: "autocomplete", + itemHoverClass: "active", + itemEmptyClass: "disabled", + itemGroupTitleClass: "fw-bold", }, - variantClass: (_: string, props: ComponentProps) => { - if (props.outlined) return ""; - return `btn-${props.variant}`; + button: { + override: true, + rootClass: "btn", + wrapperClass: "button-wrapper", + sizeClass: (size: string) => { + if (size == "small") return "btn-sm"; + else if (size == "medium") return "btn-md"; + else if (size == "large") return "btn-lg"; + else return `btn-${size}`; + }, + variantClass: (_: string, props: ComponentProps) => { + if (props.outlined) return ""; + return `btn-${props.variant}`; + }, + outlinedClass: (_: string, props: ComponentProps) => { + if (!props.variant) return "btn-outline"; + return `btn-outline-${props.variant}`; + }, + invertedClass: (variant) => { + if (!variant) return "btn-inverted"; + return `btn-inverted-${variant}`; + }, + roundedClass: "rounded-pill", + expandedClass: "expanded", + disabledClass: "btn-disabled", + loadingClass: "loading", }, - outlinedClass: (_: string, props: ComponentProps) => { - if (!props.variant) return "btn-outline"; - return `btn-outline-${props.variant}`; + carousel: { + override: true, + rootClass: "carousel", + overlayClass: "carousel-overlay", + wrapperClass: "carousel-scene", + itemsClass: "carousel-items carousel-inner", + itemsDraggingClass: "dragging", + itemClass: "carousel-item", + itemActiveClass: "active", + itemClickableClass: "clickable", + arrowIconClass: "carousel-control", + arrowIconNextClass: "carousel-control-next carousel-control-next-icon", + arrowIconPrevClass: "carousel-control-prev carousel-control-prev-icon", + indicatorPosition: "position-", + indicatorsClass: "carousel-indicators", + indicatorClass: "carousel-indicator", + indicatorsInsideClass: "inside", + indicatorsInsidePositionClass: "position-", + indicatorItemClass: "carousel-indicator-item", + indicatorItemStyleClass: "indicator-", + indicatorItemActiveClass: "active", }, - invertedClass: (variant) => { - if (!variant) return "btn-inverted"; - return `btn-inverted-${variant}`; + checkbox: { + override: true, + rootClass: "form-check", + disabledClass: "disabled", + inputClass: "form-check-input", + labelClass: "form-check-label", + variantClass: "variant-", + sizeClass: "size-", }, - roundedClass: "rounded-pill", - expandedClass: "expanded", - disabledClass: "btn-disabled", - loadingClass: "loading", - }, - carousel: { - override: true, - rootClass: "carousel", - overlayClass: "carousel-overlay", - wrapperClass: "carousel-scene", - itemsClass: "carousel-items carousel-inner", - itemsDraggingClass: "dragging", - itemClass: "carousel-item", - itemActiveClass: "active", - itemClickableClass: "clickable", - arrowIconClass: "carousel-control", - arrowIconNextClass: "carousel-control-next carousel-control-next-icon", - arrowIconPrevClass: "carousel-control-prev carousel-control-prev-icon", - indicatorPosition: "position-", - indicatorsClass: "carousel-indicators", - indicatorClass: "carousel-indicator", - indicatorsInsideClass: "inside", - indicatorsInsidePositionClass: "position-", - indicatorItemClass: "carousel-indicator-item", - indicatorItemStyleClass: "indicator-", - indicatorItemActiveClass: "active", - }, - checkbox: { - override: true, - rootClass: "form-check", - disabledClass: "disabled", - inputClass: "form-check-input", - labelClass: "form-check-label", - variantClass: "variant-", - sizeClass: "size-", - }, - collapse: { - override: true, - rootClass: "collapse", - triggerClass: "collapse-trigger", - contentClass: "collapse-content", - }, - dropdown: { - override: true, - rootClass: "dropdown", - triggerClass: "dropdown-trigger", - disabledClass: "disabled", - expandedClass: "expanded", - inlineClass: "inline", - overlayClass: "dropdown-backdrop", - menuClass: "dropdown-menu", - menuPositionClass: "position-", - menuActiveClass: "show", - itemTag: "div", - itemClass: "dropdown-item", - itemActiveClass: "active", - itemClickableClass: "clickable", - itemDisabledClass: "disabled", - mobileClass: "dropdown-modal", - teleportClass: "teleported", - scrollClipClass: "scroll-clipped", - noScrollClass: "scroll-hidden", - }, - datepicker: { - override: true, - rootClass: "datepicker", - boxClass: "dropdown-item", - headerClass: "datepicker-header", - footerClass: "datepicker-footer", - headerButtonsClass: "pagination", - listsClass: "pagination-list", - prevButtonClass: "pagination-previous btn", - nextButtonClass: "pagination-next btn", - tableClass: "datepicker-table", - tableBodyClass: "datepicker-body", - tableHeadClass: "datepicker-header", - tableHeadCellClass: "datepicker-cell", - tableRowClass: "datepicker-row", - tableCellClass: "datepicker-cell focus-ring", - tableCellSelectableClass: "selectable", - tableCellUnselectableClass: "unselectable", - tableCellTodayClass: "today", - tableCellSelectedClass: "selected", - tableCellWithinHoveredClass: "hovered-within", - tableCellFirstHoveredClass: "hovered-first", - tableCellLastHoveredClass: "hovered-last", - tableCellFirstSelectedClass: "selected-first", - tableCellLastSelectedClass: "selected-last", - tableCellWithinSelectedClass: "selected-within", - monthClass: "datepicker-month", - monthBodyClass: "datepicker-body", - monthTableClass: "datepicker-table", - monthCellClass: "datepicker-cell", - monthCellSelectableClass: "selectable", - monthCellUnselectableClass: "unselectable", - monthCellTodayClass: "today", - monthCellSelectedClass: "selected", - monthCellWithinHoveredClass: "hovered-within", - monthCellFirstHoveredClass: "hovered-first", - monthCellLastHoveredClass: "hovered-last", - monthCellFirstSelectedClass: "selected-first", - monthCellLastSelectedClass: "selected-last", - monthCellWithinSelectedClass: "selected-within", - tableCellInvisibleClass: "", - tableCellNearbyClass: "nearby", - tableCellEventsClass: (_: string, props: ComponentProps) => { - const classes = ["has-event"]; - if (props.indicators) classes.push(`${props.indicators}`); - return classes.join(" "); + collapse: { + override: true, + rootClass: "collapse", + triggerClass: "collapse-trigger", + contentClass: "collapse-content", }, - tableEventVariantClass: "variant-", - tableEventsClass: "events", - tableEventClass: "event", - mobileClass: "mobile", - }, - timepicker: { - override: true, - rootClass: "timepicker", - boxClass: "dropdown-item", - selectClasses: { - rootClass: "select", - selectClass: "form-select", + dropdown: { + override: true, + rootClass: "dropdown", + triggerClass: "dropdown-trigger", + disabledClass: "disabled", + expandedClass: "expanded", + inlineClass: "inline", + overlayClass: "dropdown-backdrop", + menuClass: "dropdown-menu", + menuPositionClass: "position-", + menuActiveClass: "show", + itemTag: "div", + itemClass: "dropdown-item", + itemActiveClass: "active", + itemClickableClass: "clickable", + itemDisabledClass: "disabled", + mobileClass: "dropdown-modal", + teleportClass: "teleported", + scrollClipClass: "scroll-clipped", + noScrollClass: "scroll-hidden", }, - separatorClass: "separator", - footerClass: "timepicker-footer", - sizeClass: "size-", - }, - datetimepicker: { - override: true, - datepickerWrapperClass: "datepicker-wrapper", - timepickerWrapperClass: "timepicker-wrapper d-flex justify-content-center", - }, - field: { - override: true, - rootClass: "input-field", - bodyClass: "field-wrapper", - labelClass: "form-label", - messageClass: "help", - messageVariantClass: "text-", - addonsClass: "input-group", - groupedClass: "input-grouped", - groupMultilineClass: "grouped-multiline", - horizontalClass: "field-horizontal row", - horizontalLabelClass: "col-form-label", - horizontalBodyClass: "col-form-field", - }, - icon: { - override: true, - rootClass: "icon", - variantClass: "text-", - sizeClass: "size-", - clickableClass: "clickable", - spinClass: "spin", - }, - input: { - override: true, - rootClass: "input", - inputClass: (_: string, props: ComponentProps) => { - const classes = ["form-control"]; - if (props.icon) classes.push("icon-left"); - if (props.iconRight) classes.push("icon-right"); - return classes.join(" "); + datepicker: { + override: true, + rootClass: "datepicker", + boxClass: "dropdown-item", + headerClass: "datepicker-header", + footerClass: "datepicker-footer", + headerButtonsClass: "pagination", + listsClass: "pagination-list", + prevButtonClass: "pagination-previous btn", + nextButtonClass: "pagination-next btn", + tableClass: "datepicker-table", + tableBodyClass: "datepicker-body", + tableHeadClass: "datepicker-header", + tableHeadCellClass: "datepicker-cell", + tableRowClass: "datepicker-row", + tableCellClass: "datepicker-cell focus-ring", + tableCellSelectableClass: "selectable", + tableCellUnselectableClass: "unselectable", + tableCellTodayClass: "today", + tableCellSelectedClass: "selected", + tableCellWithinHoveredClass: "hovered-within", + tableCellFirstHoveredClass: "hovered-first", + tableCellLastHoveredClass: "hovered-last", + tableCellFirstSelectedClass: "selected-first", + tableCellLastSelectedClass: "selected-last", + tableCellWithinSelectedClass: "selected-within", + monthClass: "datepicker-month", + monthBodyClass: "datepicker-body", + monthTableClass: "datepicker-table", + monthCellClass: "datepicker-cell", + monthCellSelectableClass: "selectable", + monthCellUnselectableClass: "unselectable", + monthCellTodayClass: "today", + monthCellSelectedClass: "selected", + monthCellWithinHoveredClass: "hovered-within", + monthCellFirstHoveredClass: "hovered-first", + monthCellLastHoveredClass: "hovered-last", + monthCellFirstSelectedClass: "selected-first", + monthCellLastSelectedClass: "selected-last", + monthCellWithinSelectedClass: "selected-within", + tableCellInvisibleClass: "", + tableCellNearbyClass: "nearby", + tableCellEventsClass: (_: string, props: ComponentProps) => { + const classes = ["has-event"]; + if (props.indicators) classes.push(`${props.indicators}`); + return classes.join(" "); + }, + tableEventVariantClass: "variant-", + tableEventsClass: "events", + tableEventClass: "event", + mobileClass: "mobile", }, - textareaClass: (_: string, props: ComponentProps) => { - const classes = ["form-control"]; - if (props.icon) classes.push("icon-left"); - if (props.iconRight) classes.push("icon-right"); - return classes.join(" "); + timepicker: { + override: true, + rootClass: "timepicker", + boxClass: "dropdown-item", + selectClasses: { + rootClass: "select", + selectClass: "form-select", + }, + separatorClass: "separator", + footerClass: "timepicker-footer", + sizeClass: "size-", }, - sizeClass: (_: string, props: ComponentProps) => { - if (props.size == "small") return "form-control-sm"; - else if (props.size == "medium") return "form-control-md"; - else if (props.size == "large") return "form-control-lg"; + datetimepicker: { + override: true, + datepickerWrapperClass: "datepicker-wrapper", + timepickerWrapperClass: + "timepicker-wrapper d-flex justify-content-center", }, - variantClass: "border-", - expandedClass: "expanded", - disabledClass: "disabled", - roundedClass: "rounded-pill", - iconLeftClass: "icon-left", - iconRightClass: "icon-right", - // iconLeftSpaceClass: 'input-group-text', - // iconRightSpaceClass: 'input-group-text', - counterClass: "help counter", - }, - loading: { - override: true, - rootClass: "loading", - fullPageClass: "fullpage", - overlayClass: "loading-overlay", - labelClass: "loading-label", - iconClass: "icon", - scrollClipClass: "scroll-clipped", - noScrollClass: "scroll-hidden", - }, - menu: { - override: true, - rootClass: "menu", - listClass: "menu-list", - listLabelClass: "menu-label", - itemClass: "menu-item", - itemButtonClass: "menu-button", - itemButtonActiveClass: "active", - itemButtonDisabledClass: "disabled", - itemButtonIconClass: "menu-icon", - itemSubmenuClass: "menu-submenu", - }, - modal: { - override: true, - rootClass: "modal fade", - activeClass: "show", - overlayClass: "modal-backdrop", - contentClass: (_: string, props: ComponentProps) => { - const classes = ["modal-dialog"]; - if (!props.fullScreen) classes.push("modal-dialog-centered"); - return classes.join(" "); + field: { + override: true, + rootClass: "input-field", + bodyClass: "field-wrapper", + labelClass: "form-label", + messageClass: "help", + messageVariantClass: "text-", + addonsClass: "input-group", + groupedClass: "input-grouped", + groupMultilineClass: "grouped-multiline", + horizontalClass: "field-horizontal row", + horizontalLabelClass: "col-form-label", + horizontalBodyClass: "col-form-field", }, - closeIcon: "", - closeClass: "btn-close", - fullScreenClass: "fullscreen", - mobileClass: "mobile", - scrollClipClass: ["scroll-clipped", "modal-open"], - noScrollClass: "scroll-hidden", - }, - notification: { - override: true, - rootClass: "notifictation alert", - variantClass: "variant-", - wrapperClass: "notifictation-wrapper", - contentClass: "notifictation-content", - positionClass: "position-", - iconClass: "media", - closeClass: "btn-close", - noticeClass: "notifictations", - noticePositionClass: "position-", - }, - pagination: { - override: true, - rootClass: "pagination-wrapper", - sizeClass: (_: string, props: ComponentProps) => { - if (props.size == "small") return "pagination-sm"; - else if (props.size == "medium") return "pagination-md"; - else if (props.size == "large") return "pagination-lg"; + icon: { + override: true, + rootClass: "icon", + variantClass: "text-", + sizeClass: "size-", + clickableClass: "clickable", + spinClass: "spin", }, - roundedClass: "rounded-pill", - simpleClass: "simple", - orderClass: "order-", - listClass: (_: string, props: ComponentProps) => { - const classes = ["pagination"]; - if (props.size == "small") classes.push("pagination-sm"); - else if (props.size == "medium") classes.push("pagination-md"); - else if (props.size == "large") classes.push("pagination-lg"); - return classes.join(" "); + input: { + override: true, + rootClass: "input", + inputClass: (_: string, props: ComponentProps) => { + const classes = ["form-control"]; + if (props.icon) classes.push("icon-left"); + if (props.iconRight) classes.push("icon-right"); + return classes.join(" "); + }, + textareaClass: (_: string, props: ComponentProps) => { + const classes = ["form-control"]; + if (props.icon) classes.push("icon-left"); + if (props.iconRight) classes.push("icon-right"); + return classes.join(" "); + }, + sizeClass: (_: string, props: ComponentProps) => { + if (props.size == "small") return "form-control-sm"; + else if (props.size == "medium") return "form-control-md"; + else if (props.size == "large") return "form-control-lg"; + }, + variantClass: "border-", + expandedClass: "expanded", + disabledClass: "disabled", + roundedClass: "rounded-pill", + iconLeftClass: "icon-left", + iconRightClass: "icon-right", + // iconLeftSpaceClass: 'input-group-text', + // iconRightSpaceClass: 'input-group-text', + counterClass: "help counter", }, - listItemClass: "page-item", - buttonClass: "page-link", - buttonCurrentClass: "active", - buttonDisabledClass: "disabled", - ellipsisClass: (_: string, props: ComponentProps) => { - const classes = ["pagination-ellipsis"]; - if (props.rounded) classes.push("rounded-pill"); - return classes.join(" "); + loading: { + override: true, + rootClass: "loading", + fullPageClass: "fullpage", + overlayClass: "loading-overlay", + labelClass: "loading-label", + iconClass: "icon", + scrollClipClass: "scroll-clipped", + noScrollClass: "scroll-hidden", }, - buttonNextClass: "pagination-next page-item", - buttonPrevClass: "pagination-prev page-item", - infoClass: "pagination-info", - }, - radio: { - override: true, - rootClass: "form-check", - disabledClass: "disabled", - inputClass: "form-check-input", - labelClass: "form-check-label", - variantClass: "variant-", - sizeClass: "size-", - }, - select: { - override: true, - rootClass: "select", - selectClass: (_: string, props: ComponentProps) => { - const classes = ["form-select"]; - if (props.icon) classes.push("icon-left"); - if (props.iconRight) classes.push("icon-right"); - return classes.join(" "); + menu: { + override: true, + rootClass: "menu", + listClass: "menu-list", + listLabelClass: "menu-label", + itemClass: "menu-item", + itemButtonClass: "menu-button", + itemButtonActiveClass: "active", + itemButtonDisabledClass: "disabled", + itemButtonIconClass: "menu-icon", + itemSubmenuClass: "menu-submenu", }, - sizeClass: (_: string, props: ComponentProps) => { - if (props.size == "small") return "form-select-sm"; - else if (props.size == "medium") return "form-select-md"; - else if (props.size == "large") return "form-select-lg"; + modal: { + override: true, + rootClass: "modal fade", + activeClass: "show", + overlayClass: "modal-backdrop", + contentClass: (_: string, props: ComponentProps) => { + const classes = ["modal-dialog"]; + if (!props.fullScreen) classes.push("modal-dialog-centered"); + return classes.join(" "); + }, + closeIcon: "", + closeClass: "btn-close", + fullScreenClass: "fullscreen", + mobileClass: "mobile", + scrollClipClass: ["scroll-clipped", "modal-open"], + noScrollClass: "scroll-hidden", }, - variantClass: "border-", - expandedClass: "expanded", - disabledClass: "disabled", - roundedClass: "rounded-pill", - iconLeftClass: "icon-left", - iconRightClass: "icon-right", - multipleClass: "multiple", - placeholderClass: "empty", - arrowClass: "arrowed", - }, - sidebar: { - override: true, - rootClass: "sidebar", - overlayClass: "offcanvas-backdrop", - activeClass: "show", - positionClass: (_: string, props: ComponentProps) => { - if (props.position === "left") return "offcanvas-start"; - else if (props.position === "right") return "offcanvas-end"; - else if (props.position === "top") return "offcanvas-top"; - else if (props.position === "bottom") return "offcanvas-bottom"; - else return "offcanvas-start"; + notification: { + override: true, + rootClass: "notifictation alert", + variantClass: "variant-", + wrapperClass: "notifictation-wrapper", + contentClass: "notifictation-content", + positionClass: "position-", + iconClass: "media", + closeClass: "btn-close", + noticeClass: "notifictations", + noticePositionClass: "position-", }, - contentClass: "offcanvas", - reduceClass: "reduced", - expandOnHoverClass: "reduced-expand", - fullheightClass: "fullheight", - fullwidthClass: "fullwidth", - mobileClass: "mobile", - inlineClass: "inline", - teleportClass: "teleported", - scrollClipClass: "scroll-clipped", - noScrollClass: "scroll-hidden", - }, - skeleton: { - override: true, - rootClass: "skeleton", - itemClass: "skeleton-item", - itemRoundedClass: "rounded-pill", - animationClass: "animated", - sizeClass: "size-", - positionClass: (position: string) => { - if (position == "left") return "align-items-start"; - else if (position == "centered") return "align-items-center"; - else if (position == "right") return "align-items-end"; + pagination: { + override: true, + rootClass: "pagination-wrapper", + sizeClass: (_: string, props: ComponentProps) => { + if (props.size == "small") return "pagination-sm"; + else if (props.size == "medium") return "pagination-md"; + else if (props.size == "large") return "pagination-lg"; + }, + roundedClass: "rounded-pill", + simpleClass: "simple", + orderClass: "order-", + listClass: (_: string, props: ComponentProps) => { + const classes = ["pagination"]; + if (props.size == "small") classes.push("pagination-sm"); + else if (props.size == "medium") classes.push("pagination-md"); + else if (props.size == "large") classes.push("pagination-lg"); + return classes.join(" "); + }, + listItemClass: "page-item", + buttonClass: "page-link", + buttonCurrentClass: "active", + buttonDisabledClass: "disabled", + ellipsisClass: (_: string, props: ComponentProps) => { + const classes = ["pagination-ellipsis"]; + if (props.rounded) classes.push("rounded-pill"); + return classes.join(" "); + }, + buttonNextClass: "pagination-next page-item", + buttonPrevClass: "pagination-prev page-item", + infoClass: "pagination-info", }, - }, - slider: { - override: true, - rootClass: "slider", - disabledClass: "disabled", - variantClass: "variant-", - trackClass: "slider-track", - fillClass: "slider-fill", - thumbWrapperClass: "slider-thumb-wrapper", - sizeClass: "size-", - thumbClass: (_: string, props: ComponentProps) => { - const classes = ["slider-thumb", "focus-ring"]; - if (props.variant) classes.push(`variant-${props.variant}`); - if (props.variant) classes.push(`focus-ring-${props.variant}`); - return classes.join(" "); + radio: { + override: true, + rootClass: "form-check", + disabledClass: "disabled", + inputClass: "form-check-input", + labelClass: "form-check-label", + variantClass: "variant-", + sizeClass: "size-", }, - tickClass: "slider-tick", - tickLabelClass: "slider-tick-label", - tickHiddenClass: "slider-tick-hidden", - thumbRoundedClass: "rounded-pill", - thumbDraggingClass: "dragging", - }, - steps: { - override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["steps"]; - if (props.variant) classes.push(`variant-${props.variant}`); - if (props.disabled) classes.push("disabled"); - return classes.join(" "); + select: { + override: true, + rootClass: "select", + selectClass: (_: string, props: ComponentProps) => { + const classes = ["form-select"]; + if (props.icon) classes.push("icon-left"); + if (props.iconRight) classes.push("icon-right"); + return classes.join(" "); + }, + sizeClass: (_: string, props: ComponentProps) => { + if (props.size == "small") return "form-select-sm"; + else if (props.size == "medium") return "form-select-md"; + else if (props.size == "large") return "form-select-lg"; + }, + variantClass: "border-", + expandedClass: "expanded", + disabledClass: "disabled", + roundedClass: "rounded-pill", + iconLeftClass: "icon-left", + iconRightClass: "icon-right", + multipleClass: "multiple", + placeholderClass: "empty", + arrowClass: "arrowed", }, - sizeClass: "size-", - positionClass: "position-", - verticalClass: "vertical", - animatedClass: "animated", - navClass: "steps-list", - navItemClass: "step-item", - navItemVariantClass: "variant-", - navItemActiveClass: "active", - navItemPreviousClass: "previous", - navItemNextClass: "next", - stepClass: "step-link", - stepLabelClass: "step-title", - stepClickableClass: "clickable", - stepLabelPositionClass: "label-", - markerClass: "step-marker", - markerRoundedClass: "rounded-pill", - dividerClass: "divider", - stepPanelClass: "step-item", - contentClass: "step-content", - transitioningClass: "transition", - navigationClass: "step-navigation", - }, - switch: { - override: true, - rootClass: "form-check form-switch", - positionClass: (position: string) => { - if (position == "left") return "reversed"; + sidebar: { + override: true, + rootClass: "sidebar", + overlayClass: "offcanvas-backdrop", + activeClass: "show", + positionClass: (_: string, props: ComponentProps) => { + if (props.position === "left") return "offcanvas-start"; + else if (props.position === "right") return "offcanvas-end"; + else if (props.position === "top") return "offcanvas-top"; + else if (props.position === "bottom") return "offcanvas-bottom"; + else return "offcanvas-start"; + }, + contentClass: "offcanvas", + reduceClass: "reduced", + expandOnHoverClass: "reduced-expand", + fullheightClass: "fullheight", + fullwidthClass: "fullwidth", + mobileClass: "mobile", + inlineClass: "inline", + teleportClass: "teleported", + scrollClipClass: "scroll-clipped", + noScrollClass: "scroll-hidden", }, - inputClass: (_: string, props: ComponentProps) => { - const classes = ["form-check-input"]; - if (props.rounded) classes.push("rounded-pill"); - return classes.join(" "); + skeleton: { + override: true, + rootClass: "skeleton", + itemClass: "skeleton-item", + itemRoundedClass: "rounded-pill", + animationClass: "animated", + sizeClass: "size-", + positionClass: (position: string) => { + if (position == "left") return "align-items-start"; + else if (position == "centered") return "align-items-center"; + else if (position == "right") return "align-items-end"; + }, }, - labelClass: "form-check-label", - disabledClass: "disabled", - sizeClass: "size-", - variantClass: "variant-", - passiveVariantClass: "variant-", - switchClass: "d-none", - }, - table: { - override: true, - rootClass: "table-wrapper", - wrapperClass: "table-inner", - tableClass: "table", - stickyHeaderClass: "table-sticky", - borderedClass: "table-bordered", - stripedClass: "table-striped", - narrowedClass: "table-sm", - hoverableClass: "table-hover", - emptyClass: "table-empty", - detailedClass: "table-detail", - footerClass: "table-footer", - paginationWrapperClass: "table-pagination", - scrollableClass: "scrollable", - trSelectedClass: "table-active", - trCheckedClass: "table-checked", - thClass: "table-th", - thSortableClass: "sortable", - thCurrentSortClass: "current-sort", - thSortIconClass: "sort-icon", - thUnselectableClass: "unselectable", - thDetailedClass: "chevron", - thStickyClass: "sticky", - thCheckboxClass: "checkbox", - thPositionClass: "text-", - tdClass: "table-td", - tdDetailedChevronClass: "chevron", - tdStickyClass: "sticky", - tdCheckboxClass: "checkbox", - tdPositionClass: "text-", - mobileClass: "mobile-cards", - mobileSortClass: "table-mobile-sort", - }, - tabs: { - override: true, - rootClass: "tabs", - positionClass: "position-", - expandedClass: "expanded", - verticalClass: "vertical", - multilineClass: "multiline", - navClass: "nav", - navTypeClass: "nav-", - navSizeClass: "size-", - navPositionClass: (position: string) => { - if (position === "left") return "justify-content-start"; - else if (position === "centered") return "justify-content-center"; - else if (position === "right") return "justify-content-end"; + slider: { + override: true, + rootClass: "slider", + disabledClass: "disabled", + variantClass: "variant-", + trackClass: "slider-track", + fillClass: "slider-fill", + thumbWrapperClass: "slider-thumb-wrapper", + sizeClass: "size-", + thumbClass: (_: string, props: ComponentProps) => { + const classes = ["slider-thumb", "focus-ring"]; + if (props.variant) classes.push(`variant-${props.variant}`); + if (props.variant) classes.push(`focus-ring-${props.variant}`); + return classes.join(" "); + }, + tickClass: "slider-tick", + tickLabelClass: "slider-tick-label", + tickHiddenClass: "slider-tick-hidden", + thumbRoundedClass: "rounded-pill", + thumbDraggingClass: "dragging", }, - navItemClass: "nav-item", - itemTag: "button", - tabClass: "nav-link", - tabActiveClass: () => "active", - tabDisabledClass: () => "disabled", - contentClass: "nav-content", - transitioningClass: "transition", - }, - taginput: { - override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["taginput"]; - if (props.disabled) classes.push("disabled"); - return classes.join(" "); + steps: { + override: true, + rootClass: (_: string, props: ComponentProps) => { + const classes = ["steps"]; + if (props.variant) classes.push(`variant-${props.variant}`); + if (props.disabled) classes.push("disabled"); + return classes.join(" "); + }, + sizeClass: "size-", + positionClass: "position-", + verticalClass: "vertical", + animatedClass: "animated", + navClass: "steps-list", + navItemClass: "step-item", + navItemVariantClass: "variant-", + navItemActiveClass: "active", + navItemPreviousClass: "previous", + navItemNextClass: "next", + stepClass: "step-link", + stepLabelClass: "step-title", + stepClickableClass: "clickable", + stepLabelPositionClass: "label-", + markerClass: "step-marker", + markerRoundedClass: "rounded-pill", + dividerClass: "divider", + stepPanelClass: "step-item", + contentClass: "step-content", + transitioningClass: "transition", + navigationClass: "step-navigation", }, - containerClass: (_: string, props: ComponentProps) => { - const classes = ["taginput-wrapper", "focus-ring"]; - if (props.variant) classes.push(`focus-ring-${props.variant}`); - return classes.join(" "); + switch: { + override: true, + rootClass: "form-check form-switch", + positionClass: (position: string) => { + if (position == "left") return "reversed"; + }, + inputClass: (_: string, props: ComponentProps) => { + const classes = ["form-check-input"]; + if (props.rounded) classes.push("rounded-pill"); + return classes.join(" "); + }, + labelClass: "form-check-label", + disabledClass: "disabled", + sizeClass: "size-", + variantClass: "variant-", + passiveVariantClass: "variant-", + switchClass: "d-none", + }, + table: { + override: true, + rootClass: "table-wrapper", + wrapperClass: "table-inner", + tableClass: "table", + stickyHeaderClass: "table-sticky", + borderedClass: "table-bordered", + stripedClass: "table-striped", + narrowedClass: "table-sm", + hoverableClass: "table-hover", + emptyClass: "table-empty", + detailedClass: "table-detail", + footerClass: "table-footer", + paginationWrapperClass: "table-pagination", + scrollableClass: "scrollable", + trSelectedClass: "table-active", + trCheckedClass: "table-checked", + thClass: "table-th", + thSortableClass: "sortable", + thCurrentSortClass: "current-sort", + thSortIconClass: "sort-icon", + thUnselectableClass: "unselectable", + thDetailedClass: "chevron", + thStickyClass: "sticky", + thCheckboxClass: "checkbox", + thPositionClass: "text-", + tdClass: "table-td", + tdDetailedChevronClass: "chevron", + tdStickyClass: "sticky", + tdCheckboxClass: "checkbox", + tdPositionClass: "text-", + mobileClass: "mobile-cards", + mobileSortClass: "table-mobile-sort", + }, + tabs: { + override: true, + rootClass: "tabs", + positionClass: "position-", + expandedClass: "expanded", + verticalClass: "vertical", + multilineClass: "multiline", + navClass: "nav", + navTypeClass: "nav-", + navSizeClass: "size-", + navPositionClass: (position: string) => { + if (position === "left") return "justify-content-start"; + else if (position === "centered") return "justify-content-center"; + else if (position === "right") return "justify-content-end"; + }, + navItemClass: "nav-item", + itemTag: "button", + tabClass: "nav-link", + tabActiveClass: () => "active", + tabDisabledClass: () => "disabled", + contentClass: "nav-content", + transitioningClass: "transition", + }, + taginput: { + override: true, + rootClass: (_: string, props: ComponentProps) => { + const classes = ["taginput"]; + if (props.disabled) classes.push("disabled"); + return classes.join(" "); + }, + containerClass: (_: string, props: ComponentProps) => { + const classes = ["taginput-wrapper", "focus-ring"]; + if (props.variant) classes.push(`focus-ring-${props.variant}`); + return classes.join(" "); + }, + itemClass: "badge", + closeClass: "btn-close", + variantClass: "variant-", + expandedClass: "expanded", + counterClass: "counter", + }, + tooltip: { + override: true, + rootClass: "tooltip-wrapper", + contentClass: "tooltip-content", + triggerClass: "tooltip-trigger", + alwaysClass: "always", + multilineClass: "multiline", + variantClass: "variant-", + positionClass: "position-", + teleportClass: "teleported", + }, + upload: { + override: true, + rootClass: "upload", + variantClass: "variant-", + draggableClass: "upload-draggable", + expandedClass: "expanded", + disabledClass: "disabled", + hoveredClass: "hovered", }, - itemClass: "badge", - closeClass: "btn-close", - variantClass: "variant-", - expandedClass: "expanded", - counterClass: "counter", - }, - tooltip: { - override: true, - rootClass: "tooltip-wrapper", - contentClass: "tooltip-content", - triggerClass: "tooltip-trigger", - alwaysClass: "always", - multilineClass: "multiline", - variantClass: "variant-", - positionClass: "position-", - teleportClass: "teleported", - }, - upload: { - override: true, - rootClass: "upload", - variantClass: "variant-", - draggableClass: "upload-draggable", - expandedClass: "expanded", - disabledClass: "disabled", - hoveredClass: "hovered", - }, }; export { bootstrapConfig, bootstrapConfig as config }; diff --git a/src/router/index.ts b/src/router/index.ts index 7db69c1..2bc2cde 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,7 +1,7 @@ import { - createRouter, - createWebHistory, - type RouteRecordRaw, + createRouter, + createWebHistory, + type RouteRecordRaw, } from "vue-router"; import Home from "@/views/Home.vue"; import Component from "@/views/Component.vue"; @@ -9,23 +9,23 @@ import Component from "@/views/Component.vue"; import components from "@/components"; const routes: Array = [ - { - path: "/", - alias: "/home", - name: "Home", - component: Home, - }, - ...components.map((component) => ({ - path: "/components/" + component.toLocaleLowerCase(), - name: component, - props: { component }, - component: Component, - })), + { + path: "/", + alias: "/home", + name: "Home", + component: Home, + }, + ...components.map((component) => ({ + path: "/components/" + component.toLocaleLowerCase(), + name: component, + props: { component }, + component: Component, + })), ]; const router = createRouter({ - history: createWebHistory("/"), - routes, + history: createWebHistory("/"), + routes, }); export default router; diff --git a/src/views/Component.vue b/src/views/Component.vue index 6da2f1c..d28dd68 100644 --- a/src/views/Component.vue +++ b/src/views/Component.vue @@ -1,16 +1,16 @@ diff --git a/src/views/Home.vue b/src/views/Home.vue index be05ff9..77d2adc 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,24 +1,24 @@ diff --git a/vite.config.ts b/vite.config.ts index bebb154..5529d0c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,77 +10,77 @@ import { resolve } from "path"; import pkg from "./package.json" with { type: "json" }; function generate(version: string): string { - const preview_build = process.env.ORUGA_PREVIEW_BUILD; + const preview_build = process.env.ORUGA_PREVIEW_BUILD; - if (preview_build) { - version = `${version} (build ${preview_build})`; - } + if (preview_build) { + version = `${version} (build ${preview_build})`; + } - return `/*! Oruga Bootstrap Theme v${version} | MIT License | github.com/oruga-ui/theme-bootstrap */`; + return `/*! Oruga Bootstrap Theme v${version} | MIT License | github.com/oruga-ui/theme-bootstrap */`; } // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { - if (mode === "development") { - return { - root: __dirname, - plugins: [vue()], - resolve: { - alias: { - "@": fileURLToPath(new URL("./src", import.meta.url)), - }, - }, - }; - } else { - return { - build: { - emptyOutDir: true, - copyPublicDir: false, - minify: "terser", - lib: { - entry: resolve(__dirname, "src/plugins/theme.ts"), - name: "OrugaThemeBootstrap", - fileName: "bootstrap", - formats: ["es", "cjs", "umd"], - }, - rollupOptions: { - // make sure to externalize deps that shouldn't be bundled - // into your library - external: ["vue", /oruga\/.*/], - output: { - assetFileNames: "bootstrap.[ext]", - }, - }, - }, - css: { - // rename default `style.css` to `bootstrap.css` - postcss: { to: "bootstrap.css" }, - preprocessorOptions: { - includePaths: ["node_modules"], - scss: { - // this can be removed with bootstrap 5.4 (https://github.com/twbs/bootstrap/issues/40962) - silenceDeprecations: [ - "mixed-decls", - "color-functions", - "global-builtin", - "import", + if (mode === "development") { + return { + root: __dirname, + plugins: [vue()], + resolve: { + alias: { + "@": fileURLToPath(new URL("./src", import.meta.url)), + }, + }, + }; + } else { + return { + build: { + emptyOutDir: true, + copyPublicDir: false, + minify: "terser", + lib: { + entry: resolve(__dirname, "src/plugins/theme.ts"), + name: "OrugaThemeBootstrap", + fileName: "bootstrap", + formats: ["es", "cjs", "umd"], + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ["vue", /oruga\/.*/], + output: { + assetFileNames: "bootstrap.[ext]", + }, + }, + }, + css: { + // rename default `style.css` to `bootstrap.css` + postcss: { to: "bootstrap.css" }, + preprocessorOptions: { + includePaths: ["node_modules"], + scss: { + // this can be removed with bootstrap 5.4 (https://github.com/twbs/bootstrap/issues/40962) + silenceDeprecations: [ + "mixed-decls", + "color-functions", + "global-builtin", + "import", + ], + }, + }, + }, + plugins: [ + // build types in dist/types + dts({ + outDir: "./dist/types", + include: ["src/plugins/theme.ts"], + }), + // copy assets into dist + copy({ + targets: [{ src: "src/assets/scss", dest: "." }], + }), + // adds a banner to every generated dist file + banner(generate(pkg.version)), ], - }, - }, - }, - plugins: [ - // build types in dist/types - dts({ - outDir: "./dist/types", - include: ["src/plugins/theme.ts"], - }), - // copy assets into dist - copy({ - targets: [{ src: "src/assets/scss", dest: "." }], - }), - // adds a banner to every generated dist file - banner(generate(pkg.version)), - ], - }; - } + }; + } });