diff --git a/package.json b/package.json index 94e59463..1bb959ab 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "sinon": "^11.1.2", "typescript": "^4.4.4", "vite": "^2.6.13", - "vue": "^3.2.20", + "vue": "^3.5.13", "vue-jest": "^5.0.0-0", "vuepress": "^2.0.0-rc.15", "webpack-node-externals": "^3.0.0" diff --git a/src/components/VgtGlobalSearch.vue b/src/components/VgtGlobalSearch.vue index 818a044f..4d793ca7 100644 --- a/src/components/VgtGlobalSearch.vue +++ b/src/components/VgtGlobalSearch.vue @@ -1,17 +1,17 @@ <template> <div v-if="showControlBar" class="vgt-global-search vgt-clearfix"> - <div class="vgt-global-search__input vgt-pull-left"> + <div class="vgt-global-search__input vgt-pull-start"> <form @submit.prevent v-if="searchEnabled" role="search"> <label :for="id"> <span aria-hidden="true" class="input__icon"> - <div class="magnifying-glass"></div> + <div class="magnifying-glass"></div> </span> <span class="sr-only">Search</span> </label> <input :id="id" type="text" - class="vgt-input vgt-pull-left" + class="vgt-input vgt-pull-start" :placeholder="globalSearchPlaceholder" :value="value" @input="updateValue($event.target.value)" diff --git a/src/components/VgtHeaderRow.vue b/src/components/VgtHeaderRow.vue index af5c6bf7..c9b6d2ce 100644 --- a/src/components/VgtHeaderRow.vue +++ b/src/components/VgtHeaderRow.vue @@ -55,24 +55,24 @@ > <th v-if="headerRow.mode !== 'span' && !column.hidden" - class="vgt-row-header" - :class="getClasses(i, 'td')" + class="vgt-row-header" + :class="getClasses(i, 'td')" @click="columnCollapsable(i) ? $emit('vgtExpand', !headerRow.vgtIsExpanded) : () => {}" > - <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span> - <slot + <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span> + <slot name="table-header-row" - :row="headerRow" - :column="column" - :formattedRow="formattedRow(headerRow, true)" + :row="headerRow" + :column="column" + :formattedRow="formattedRow(headerRow, true)" > - <span v-if="!column.html"> - {{ collectFormatted(headerRow, column, true) }} - </span> - <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)"> - </span> - </slot> - </th> + <span v-if="!column.html"> + {{ collectFormatted(headerRow, column, true) }} + </span> + <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)"> + </span> + </slot> + </th> </template> </tr> </template> diff --git a/src/components/pagination/VgtPagination.vue b/src/components/pagination/VgtPagination.vue index 03847d45..d141b809 100644 --- a/src/components/pagination/VgtPagination.vue +++ b/src/components/pagination/VgtPagination.vue @@ -32,13 +32,28 @@ :page-text="pageText" :info-fn="infoFn" :mode="mode" /> + <button + v-if="jumpFirstOrLast" + type="button" + aria-controls="vgt-table" + class="footer__navigation__page-btn" + :class="{ disabled: !firstIsPossible }" + @click.prevent.stop="firstPage" + > + <span + aria-hidden="true" + class="chevron start" + ></span> + <span>{{ firstText }}</span> + </button> + <button type="button" aria-controls="vgt-table" class="footer__navigation__page-btn" :class="{ disabled: !prevIsPossible }" @click.prevent.stop="previousPage"> - <span aria-hidden="true" class="chevron" v-bind:class="{ 'left': !rtl, 'right': rtl }"></span> + <span aria-hidden="true" class="chevron start"></span> <span>{{prevText}}</span> </button> @@ -49,7 +64,22 @@ :class="{ disabled: !nextIsPossible }" @click.prevent.stop="nextPage"> <span>{{nextText}}</span> - <span aria-hidden="true" class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span> + <span aria-hidden="true" class="chevron end"></span> + </button> + + <button + v-if="jumpFirstOrLast" + type="button" + aria-controls="vgt-table" + class="footer__navigation__page-btn" + :class="{ disabled: !lastIsPossible }" + @click.prevent.stop="lastPage" + > + <span>{{ lastText }}</span> + <span + aria-hidden="true" + class="chevron end" + ></span> </button> </div> </div> @@ -73,8 +103,11 @@ export default { customRowsPerPageDropdown: { default() { return []; } }, paginateDropdownAllowAll: { default: true }, mode: { default: PAGINATION_MODES.Records }, + jumpFirstOrLast: { default: false }, // text options + firstText: { default: "First" }, + lastText: { default: "Last" }, nextText: { default: 'Next' }, prevText: { default: 'Prev' }, rowsPerPageText: { default: 'Rows per page:' }, @@ -104,8 +137,8 @@ export default { customRowsPerPageDropdown: { handler() { - this.handlePerPage(); - }, + this.handlePerPage(); + }, deep: true, }, @@ -121,12 +154,26 @@ export default { computed: { // Number of pages pagesCount() { + // if the setting is set to 'all' + if(this.currentPerPage === -1) { + return 1; + } const quotient = Math.floor(this.total / this.currentPerPage); const remainder = this.total % this.currentPerPage; return remainder === 0 ? quotient : quotient + 1; }, + // Can go to first page + firstIsPossible() { + return this.currentPage > 1; + }, + + // Can go to last page + lastIsPossible() { + return this.currentPage < Math.ceil(this.total / this.currentPerPage); + }, + // Can go to next page nextIsPossible() { return this.currentPage < this.pagesCount; @@ -151,6 +198,24 @@ export default { } }, + // Go to first page + firstPage() { + if (this.firstIsPossible) { + this.currentPage = 1; + this.prevPage = 0; + this.pageChanged(); + } + }, + + // Go to last page + lastPage() { + if (this.lastIsPossible) { + this.currentPage = this.pagesCount; + this.prev = this.currentPage - 1; + this.pageChanged(); + } + }, + // Go to next page nextPage() { if (this.nextIsPossible) { diff --git a/src/components/pagination/VgtPaginationPageInfo.vue b/src/components/pagination/VgtPaginationPageInfo.vue index 92e2b260..e525bf7c 100644 --- a/src/components/pagination/VgtPaginationPageInfo.vue +++ b/src/components/pagination/VgtPaginationPageInfo.vue @@ -70,6 +70,10 @@ export default { return ((this.currentPage - 1) * this.currentPerPage) + 1; }, lastRecordOnPage() { + // if the setting is set to 'all' + if(this.currentPerPage === -1) { + return this.totalRecords; + } return Math.min(this.totalRecords, this.currentPage * this.currentPerPage); }, recordInfo() { @@ -93,7 +97,7 @@ export default { lastRecordOnPage: last, totalRecords: this.totalRecords, currentPage: this.currentPage, - totalPages: this.lastPage, + totalPage: this.lastPage, }; }, }, diff --git a/src/components/types/date.js b/src/components/types/date.js index 26661b69..be3d7e2e 100644 --- a/src/components/types/date.js +++ b/src/components/types/date.js @@ -5,23 +5,10 @@ const date = Object.assign({}, def); date.isRight = true; -/** - * Compare the two dates and return 1 if the first date is after the second, -1 if the first date is before the second or 0 if dates are equal. - * @param {*} x Date 1 - * @param {*} y Date 2 - * @param {Object} column Additional parameters (e.g. dateInputFormat, dateOutputFormat) - * @returns - */ date.compare = function (x, y, column) { function cook(d) { if (column && column.dateInputFormat) { return parse(`${d}`, `${column.dateInputFormat}`, new Date()); - } else if (typeof d === 'string') { - try { - return Date.parse(d); - } catch(err) { - return d; - } } return d; } diff --git a/src/styles/_bordered.scss b/src/styles/_bordered.scss index dee11b8a..e788f060 100644 --- a/src/styles/_bordered.scss +++ b/src/styles/_bordered.scss @@ -1,8 +1,10 @@ +@use "variables"; + .vgt-table{ &.bordered td, &.bordered th { - border: 1px solid $border-color; + border: 1px solid variables.$border-color; } &.bordered th.vgt-row-header{ - border-bottom: 3px solid $border-color; + border-bottom: 3px solid variables.$border-color; } } \ No newline at end of file diff --git a/src/styles/_compact.scss b/src/styles/_compact.scss index ed582611..1accc5a2 100644 --- a/src/styles/_compact.scss +++ b/src/styles/_compact.scss @@ -23,7 +23,7 @@ &:before { content: attr(data-label); position: relative; - float: left; + float: inline-start; left: 0; width: 40%; padding-left: 10px; diff --git a/src/styles/_control-bar.scss b/src/styles/_control-bar.scss index 67a0bd0f..4da401d4 100644 --- a/src/styles/_control-bar.scss +++ b/src/styles/_control-bar.scss @@ -1,11 +1,14 @@ +@use "variables"; +@use 'sass:color'; + .vgt-global-search{ padding: 5px 0px; display: flex; flex-wrap: nowrap; align-items: stretch; - border: 1px solid $border-color; + border: 1px solid variables.$border-color; border-bottom: 0px; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); form { display: flex; label { @@ -56,13 +59,13 @@ } .vgt-selection-info-row{ - background: $notify-bg-color; + background: variables.$notify-bg-color; padding: 5px 16px; font-size: 13px; - border-top: 1px solid $border-color; - border-left: 1px solid $border-color; - border-right: 1px solid $border-color; - color: lighten($notify-fg-color, 10%); + border-top: 1px solid variables.$border-color; + border-left: 1px solid variables.$border-color; + border-right: 1px solid variables.$border-color; + color: color.adjust(variables.$notify-fg-color, $lightness: 10%); font-weight: bold; a{ font-weight: bold; diff --git a/src/styles/_input.scss b/src/styles/_input.scss index f7269daa..47d148cd 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -1,3 +1,5 @@ +@use "variables"; + .vgt-input, .vgt-select{ width: 100%; @@ -7,20 +9,20 @@ font-size: 14px; font-weight: normal; padding: 6px 12px; - color: $text-color; + color: variables.$text-color; border-radius: 4px; box-sizing: border-box; background-image: none; background-color: #fff; - border: 1px solid $input-border-color; + border: 1px solid variables.$input-border-color; transition: border-color .2s cubic-bezier(.645,.045,.355,1); &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } &:focus{ outline: none; - border-color: $link-color; + border-color: variables.$link-color; } } diff --git a/src/styles/_loading.scss b/src/styles/_loading.scss index 0ba765a4..56c7e4c9 100644 --- a/src/styles/_loading.scss +++ b/src/styles/_loading.scss @@ -1,11 +1,14 @@ +@use "variables"; +@use 'sass:color'; + .vgt-loading{ position: absolute; width: 100%; z-index: 10; margin-top: 117px; &__content{ - background-color: lighten($link-color, 25%); - color: $link-color; + background-color: color.adjust(variables.$link-color, $lightness: 25%) ; + color: variables.$link-color; padding: 7px 30px; border-radius: 3px; } diff --git a/src/styles/_rtl.scss b/src/styles/_rtl.scss index 77cac38b..a68e39ad 100644 --- a/src/styles/_rtl.scss +++ b/src/styles/_rtl.scss @@ -2,20 +2,12 @@ direction: rtl; .vgt-table{ - thead th, &.condensed thead th { - padding-left: 1.5em; - padding-right: .75em; - } th.sorting:after, th.sorting-asc:after{ margin-right: 5px; margin-left: 0px; } - th.sortable:after, - th.sortable:before { - right: inherit; - left: 6px; - } + } } diff --git a/src/styles/_table-footer.scss b/src/styles/_table-footer.scss index 1162cc67..a017e5ba 100644 --- a/src/styles/_table-footer.scss +++ b/src/styles/_table-footer.scss @@ -1,17 +1,19 @@ +@use "variables"; + $footer-font-size: 1.1rem; .vgt-wrap__actions-footer{ - border: 1px solid $border-color; + border: 1px solid variables.$border-color; } .vgt-wrap__footer{ - color: $text-color; + color: variables.$text-color; font-size: $footer-font-size; padding: 1em; - border: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + border: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); .footer__row-count{ position: relative; - padding-right: 3px; + padding-inline-end: 3px; &__label, &__select{ display: inline-block; vertical-align: middle; @@ -27,20 +29,20 @@ $footer-font-size: 1.1rem; border: 0; border-radius: 0; height: auto; - margin-left: 8px; - color: $text-color; + margin-inline-start: 8px; + color: variables.$text-color; font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding-right: 15px; - padding-left: 5px; + padding-inline-end: 15px; + padding-inline-start: 5px; &::-ms-expand{ display: none; } &:focus{ outline: none; - border-color: $link-color; + border-color: variables.$link-color; } } &::after{ @@ -49,12 +51,11 @@ $footer-font-size: 1.1rem; position: absolute; height: 0px; width: 0px; - right: 6px; + inset-inline-end: 6px; top: 50%; margin-top: -1px; - border-top: 6px solid $text-color; - border-left: 6px solid transparent; - border-right: 6px solid transparent; + border-top: 6px solid variables.$text-color; + border-inline: 6px solid transparent; border-bottom: none; pointer-events: none } @@ -67,7 +68,7 @@ $footer-font-size: 1.1rem; &__page-btn, &__info, &__page-info{ display: inline-block; vertical-align: middle; - color: $secondary-text-color; + color: variables.$secondary-text-color; } &__page-btn{ -webkit-appearance: none; @@ -76,7 +77,7 @@ $footer-font-size: 1.1rem; background: transparent; border: none; text-decoration: none; - color: $text-color; + color: variables.$text-color; font-weight: bold; white-space:nowrap; vertical-align: middle; @@ -87,11 +88,11 @@ $footer-font-size: 1.1rem; &.disabled:hover { opacity: 0.5; cursor: not-allowed; - .chevron.left:after{ - border-right-color: $text-color; + .chevron.start:after{ + border-inline-start-color: variables.$text-color; } - .chevron.right:after{ - border-left-color: $text-color; + .chevron.end:after{ + border-inline-end-color: variables.$text-color; } } span{ @@ -111,26 +112,20 @@ $footer-font-size: 1.1rem; content: ''; position: absolute; display: block; - left: 50%; + inset-inline-start: 50%; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; + margin-inline-start: -3px; } - &.left::after{ - border-right: 6px solid $link-color; - margin-left: -3px; - } - - &.right::after{ - border-left: 6px solid $link-color; - margin-left: -3px; - } + &.start::after {border-inline-end: 6px solid variables.$link-color;} + &.end::after {border-inline-start: 6px solid variables.$link-color;} } } &__info, &__page-info{ display: inline-block; - margin: 0px 16px; + margin-inline: 16px; } &__page-info{ span{ @@ -142,7 +137,7 @@ $footer-font-size: 1.1rem; text-align: center; vertical-align: middle; display: inline-block; - margin: 0px 10px; + margin-inline: 10px; font-weight: bold; } } diff --git a/src/styles/_table-th.scss b/src/styles/_table-th.scss index 3ed9814f..62f476c2 100644 --- a/src/styles/_table-th.scss +++ b/src/styles/_table-th.scss @@ -1,10 +1,13 @@ +@use "variables"; +@use 'sass:color'; + $sort-chevron-width: 5px; .vgt-table{ & th{ - padding: .75em 1.5em .75em .75em; + padding: .75em .75em .75em .75em; vertical-align: middle; - position: relative; + position: relative; &.sortable{ button { -webkit-appearance: none; @@ -14,8 +17,9 @@ $sort-chevron-width: 5px; border: none; position: absolute; top: 0; - left: 0; - width: 100%; + inset-inline-end: 0; + cursor:pointer; + width: 1rem; height: 100%; &:focus{ outline: none; @@ -25,45 +29,45 @@ $sort-chevron-width: 5px; position: absolute; height: 0px; width: 0px; - right: 6px; + inset-inline-end: 6px; top: 50%; margin-top: -7px; - border-left: $sort-chevron-width solid transparent; - border-right: $sort-chevron-width solid transparent; - border-bottom: $sort-chevron-width solid $chevron-color; + border-inline: $sort-chevron-width solid transparent; + border-bottom: $sort-chevron-width solid variables.$chevron-color; } &:before{ content: ''; position: absolute; height: 0px; width: 0px; - right: 6px; + inset-inline-end: 6px; top: 50%; margin-bottom: -7px; - border-left: $sort-chevron-width solid transparent; - border-right: $sort-chevron-width solid transparent; - border-top: $sort-chevron-width solid $chevron-color; + border-inline: $sort-chevron-width solid transparent; + border-top: $sort-chevron-width solid variables.$chevron-color; } } } + + .drag {position:absolute;top:0; bottom:0; background-color: variables.$border-color; user-select: none; inset-inline-end: 0; width: 0.4rem; cursor: e-resize;} } & th.line-numbers, & th.vgt-checkbox-col { padding: 0 .75em 0 .75em; - color: $text-color; - border-right: 1px solid $border-color; + color: variables.$text-color; + border-inline-end: 1px solid variables.$border-color; word-wrap: break-word; width: 25px; text-align: center; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); } & th.filter-th { padding: .75em .75em .75em .75em; } th.vgt-row-header{ - border-bottom: 2px solid $border-color; - border-top: 2px solid $border-color; - background-color: lighten($border-color, 10%); + border-bottom: 2px solid variables.$border-color; + border-top: 2px solid variables.$border-color; + background-color: color.adjust(variables.$border-color, $lightness: 10%); .triangle { width: 24px; height: 24px; @@ -74,13 +78,13 @@ $sort-chevron-width: 5px; content: ''; position: absolute; display: block; - left: 50%; + inset-inline-start: 50%; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; - border-left: 6px solid $text-color; - margin-left: -3px; + border-inline-end: 6px solid variables.$text-color; + margin-inline-end: -3px; transition: 0.3s ease transform; } &.expand:after { @@ -90,22 +94,22 @@ $sort-chevron-width: 5px; } thead th{ - color: $text-color; + color: variables.$text-color; vertical-align: bottom; - border-bottom: 1px solid $border-color; - padding-right: 1.5em; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + border-bottom: 1px solid variables.$border-color; + padding-inline-end: 1.5em; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); &.vgt-checkbox-col{ vertical-align: middle; } &.sorting-asc button { &:after{ - border-bottom: $sort-chevron-width solid $link-color; + border-bottom: $sort-chevron-width solid variables.$link-color; } } &.sorting-desc button { &:before{ - border-top: $sort-chevron-width solid $link-color; + border-top: $sort-chevron-width solid variables.$link-color; } } } diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 29c8b71c..f0ac8544 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -1,21 +1,23 @@ +@use "variables"; + table.vgt-table{ font-size: 16px; border-collapse: collapse; - background-color: $table-bg; + background-color: variables.$table-bg; width: 100%; max-width: 100%; table-layout: auto; - border: 1px solid $border-color; + border: 1px solid variables.$border-color; & td { padding: .75em .75em .75em .75em; vertical-align: top; - border-bottom: 1px solid $border-color; - color: $text-color; + border-bottom: 1px solid variables.$border-color; + color: variables.$text-color; } & tr.clickable { cursor: pointer; &:hover{ - background-color: $highlight-color; + background-color: variables.$highlight-color; } } } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index a641f9cf..77087562 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,5 @@ +@use "variables"; + /* Utility styles ************************************************/ .vgt-right-align{ @@ -26,14 +28,14 @@ clear: both; } -.vgt-responsive { +.vgt-responsive-old { width: 100%; overflow-x: auto; position: relative; } .vgt-text-disabled{ - color: $secondary-text-color; + color: variables.$secondary-text-color; } .sr-only { diff --git a/src/styles/_wrap.scss b/src/styles/_wrap.scss index c284f751..b9bb98f1 100644 --- a/src/styles/_wrap.scss +++ b/src/styles/_wrap.scss @@ -1,8 +1,11 @@ -.vgt-wrap{ - position: relative; -} +.vgt-wrap { position: relative;} + .vgt-fixed-header{ position: absolute; z-index: 10; overflow-x: auto; +} + +.vgt-responsive { overflow-x: auto; overflow-y: scroll; display: flex; + #vgt-table {flex: 1 1 auto; align-self: baseline} } \ No newline at end of file diff --git a/src/styles/black-rhino/_overrides.scss b/src/styles/black-rhino/_overrides.scss index a3f06d40..c3696695 100644 --- a/src/styles/black-rhino/_overrides.scss +++ b/src/styles/black-rhino/_overrides.scss @@ -1,18 +1,21 @@ +@use "../variables"; +@use 'sass:color'; + $thead-bg-color-1: #4c5c79; -$thead-bg-color-2: #4e5d7c; +variables.$thead-bg-color-2: #4e5d7c; -$chevron-color: lighten($thead-bg-color-1, 10%); +variables.$chevron-color: color.adjust(variables.$thead-bg-color-1, $lightness: 10%); -$text-color: #dae2f0; +variables.$text-color: #dae2f0; $text-color-td: rgb(73, 81, 94); -$text-shadow-color: lighten(#2C394F, 10%); +$text-shadow-color: color.adjust(#2C394F, $lightness: 10%); -$secondary-text-color: rgb(152, 165, 185) ; -$border-color: #435169; +variables.$secondary-text-color: rgb(152, 165, 185) ; +variables.$border-color: #435169; $border-color-td: #bbc5d6; -$input-border-color: transparent; +variables.$input-border-color: transparent; $input-bg: #34445f; -$table-bg: #dfe5ee; -$highlight-color:#fff; \ No newline at end of file +variables.$table-bg: #dfe5ee; +variables.$highlight-color:#fff; \ No newline at end of file diff --git a/src/styles/black-rhino/black-rhino.scss b/src/styles/black-rhino/black-rhino.scss index 1ac440aa..f89e4a02 100644 --- a/src/styles/black-rhino/black-rhino.scss +++ b/src/styles/black-rhino/black-rhino.scss @@ -1,49 +1,52 @@ -@import './overrides'; +@use 'sass:color'; +@use 'overrides'; +@use "../variables"; + // suggested by wifey .vgt-table.black-rhino{ - border: 1px solid $border-color; - background-color: $table-bg; + border: 1px solid variables.$border-color; + background-color: variables.$table-bg; & tr.clickable { &:hover{ - background-color: $highlight-color; + background-color: variables.$highlight-color; } } // td & td { - border-bottom: 1px solid $border-color-td; - color: $text-color-td; + border-bottom: 1px solid overrides.$border-color-td; + color: overrides.$text-color-td; } //th & th.line-numbers, & th.vgt-checkbox-col { - color: $text-color; - border-right: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + border-inline-end: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); } thead th{ - color: $text-color; - text-shadow: 1px 1px $text-shadow-color; - border-bottom: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + text-shadow: 1px 1px overrides.$text-shadow-color; + border-bottom: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); &.sortable { - // color: lighten($text-color, 15%); + // color: l_ighten($text-color, 15%); &:before{ - border-top-color: $chevron-color; + border-top-color: variables.$chevron-color; } &:after{ - border-bottom-color: $chevron-color; + border-bottom-color: variables.$chevron-color; } &.sorting-asc{ color: white; &:after{ - border-bottom-color: $link-color; + border-bottom-color: variables.$link-color; } } &.sorting-desc { &:before{ - border-top-color: $link-color; + border-top-color: variables.$link-color; } } } @@ -51,20 +54,20 @@ //bordered &.bordered td { - border: 1px solid $border-color-td; + border: 1px solid overrides.$border-color-td; } &.bordered th { - border: 1px solid $border-color; + border: 1px solid variables.$border-color; } //input .vgt-input, .vgt-select{ - color: $text-color; - background-color: $input-bg; - border: 1px solid $input-border-color; + color: variables.$text-color; + background-color: overrides.$input-bg; + border: 1px solid variables.$input-border-color; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } } @@ -72,30 +75,30 @@ .vgt-wrap.black-rhino{ .vgt-wrap__footer{ - color: $text-color; - border: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + border: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); .footer__row-count{ position: relative; - padding-right: 3px; + padding-inline-end: 3px; &__label{ - color: $secondary-text-color; + color: variables.$secondary-text-color; } &__select{ - color: $text-color-td; - background: $input-bg; + color: overrides.$text-color-td; + background: overrides.$input-bg; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding-right: 15px; - padding-left: 5px; + padding-inline-end: 15px; + padding-inline-start : 5px; border-radius: 3px; &::-ms-expand{ display: none; } &:focus{ - border-color: $link-color; + border-color: variables.$link-color; } } &::after{ @@ -104,55 +107,51 @@ position: absolute; height: 0px; width: 0px; - right: 6px; + inset-inline-end: 6px; top: 50%; margin-top: -1px; - border-top: 6px solid $text-color-td; - border-left: 6px solid transparent; - border-right: 6px solid transparent; + border-top: 6px solid overrides.$text-color-td; + border-inline : 6px solid transparent; border-bottom: none; pointer-events: none } } .footer__navigation{ &__page-btn{ - color: $text-color; + color: variables.$text-color; &.disabled, &.disabled:hover { - .chevron.left:after{ - border-right-color: $text-color; - } - .chevron.right:after{ - border-left-color: $text-color; + .chevron:after{ + border-inline-end-color: variables.$text-color; } } } &__info, &__page-info{ - color: $text-color; + color: variables.$text-color; } } } // control bar .vgt-global-search{ - border: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + border: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); } .vgt-global-search__input{ .input__icon{ .magnifying-glass{ - border: 2px solid darken($border-color, 2%); + border: 2px solid color.adjust(variables.$border-color, $lightness: -2%); &:before{ - background: darken($border-color, 2%); + background: color.adjust(variables.$border-color, $lightness: -2%); } } } .vgt-input, .vgt-select{ - color: $text-color; - background-color: darken($thead-bg-color-2, 5%); - border: 1px solid $input-border-color; + color: variables.$text-color; + background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%); + border: 1px solid variables.$input-border-color; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } } diff --git a/src/styles/nocturnal/_overrides.scss b/src/styles/nocturnal/_overrides.scss index 361adb70..050cb1f0 100644 --- a/src/styles/nocturnal/_overrides.scss +++ b/src/styles/nocturnal/_overrides.scss @@ -1,11 +1,14 @@ -$thead-bg-color-1: #2C394F; -$thead-bg-color-2: #2C394F; -$chevron-color: lighten($thead-bg-color-1, 10%); +@use "../variables"; -$text-color: #C7CED8; -$secondary-text-color: #8290A7 ; -$border-color: #435169; -$input-border-color: $border-color; +@use 'sass:color'; +variables.$thead-bg-color-1: #2C394F; +variables.$thead-bg-color-2: #2C394F; +variables.$chevron-color: color.adjust(variables.$thead-bg-color-1, $lightness: 10%); -$table-bg: #324057; -$highlight-color: #445168; \ No newline at end of file +variables.$text-color: #C7CED8; +variables.$secondary-text-color: #8290A7 ; +variables.$border-color: #435169; +variables.$input-border-color: variables.$border-color; + +variables.$table-bg: #324057; +variables.$highlight-color: #445168; \ No newline at end of file diff --git a/src/styles/nocturnal/nocturnal.scss b/src/styles/nocturnal/nocturnal.scss index 5497b3dd..db41fd76 100644 --- a/src/styles/nocturnal/nocturnal.scss +++ b/src/styles/nocturnal/nocturnal.scss @@ -1,49 +1,53 @@ -@import './overrides'; +@use 'sass:color'; +@use 'overrides'; +@use "../variables.scss"; + + // suggested by wifey .vgt-table.nocturnal{ - border: 1px solid $border-color; - background-color: $table-bg; + border: 1px solid variables.$border-color; + background-color: variables.$table-bg; & tr.clickable { &:hover{ - background-color: $highlight-color; + background-color: variables.$highlight-color; } } // td & td { - border-bottom: 1px solid $border-color; - color: $text-color; + border-bottom: 1px solid variables.$border-color; + color: variables.$text-color; } //th & th.line-numbers, & th.vgt-checkbox-col { - color: $text-color; - border-right: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + border-right: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); } thead th{ - color: $text-color; - border-bottom: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + border-bottom: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); &.sortable { - // color: lighten($text-color, 15%); + // color: _$text-color, 15%); &:before{ - border-top-color: $chevron-color; + border-top-color: variables.$chevron-color; } &:after{ - border-bottom-color: $chevron-color; + border-bottom-color: variables.$chevron-color; } &.sorting-asc{ color: white; &:after{ - border-bottom-color: $link-color; + border-bottom-color: variables.$link-color; } } &.sorting-desc { color: white; &:before{ - border-top-color: $link-color; + border-top-color: variables.$link-color; } } } @@ -51,16 +55,16 @@ //bordered &.bordered td, &.bordered th { - border: 1px solid $border-color; + border: 1px solid variables.$border-color; } //input .vgt-input, .vgt-select{ - color: $text-color; - background-color: darken($thead-bg-color-2, 5%); - border: 1px solid $input-border-color; + color: variables.$text-color; + background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%); + border: 1px solid variables.$input-border-color; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } } @@ -68,17 +72,17 @@ .vgt-wrap.nocturnal{ .vgt-wrap__footer{ - color: $text-color; - border: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + color: variables.$text-color; + border: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); .footer__row-count{ position: relative; &__label{ - color: $secondary-text-color; + color: variables.$secondary-text-color; } &__select{ - color: $text-color; - background: darken($thead-bg-color-2, 5%); + color: variables.$text-color; + background: color.adjust(variables.$thead-bg-color-2, $lightness: -5%); border: none; -webkit-appearance: none; -moz-appearance: none; @@ -88,7 +92,7 @@ border-radius: 3px; text-align: center; &:focus{ - border-color: $link-color; + border-color: variables.$link-color; } } &::after{ @@ -100,7 +104,7 @@ right: 6px; top: 50%; margin-top: -1px; - border-top: 6px solid $text-color; + border-top: 6px solid variables.$text-color; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: none; @@ -109,43 +113,43 @@ } .footer__navigation{ &__page-btn{ - color: $text-color; + color: variables.$text-color; &.disabled, &.disabled:hover { .chevron.left:after{ - border-right-color: $text-color; + border-right-color: variables.$text-color; } .chevron.right:after{ - border-left-color: $text-color; + border-left-color: variables.$text-color; } } } &__info, &__page-info{ - color: $secondary-text-color; + color: variables.$secondary-text-color; } } } // control bar .vgt-global-search{ - border: 1px solid $border-color; - background: linear-gradient($thead-bg-color-1, $thead-bg-color-2); + border: 1px solid variables.$border-color; + background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2); } .vgt-global-search__input{ .input__icon{ .magnifying-glass{ - border: 2px solid darken($border-color, 2%); + border: 2px solid color.adjust(variables.$border-color, $lightness: -2%); &:before{ - background: darken($border-color, 2%); + background: color.adjust(variables.$border-color, $lightness: -2%); } } } .vgt-input, .vgt-select{ - color: $text-color; - background-color: darken($thead-bg-color-2, 5%); - border: 1px solid $input-border-color; + color: variables.$text-color; + background-color: color.adjust(variables.$thead-bg-color-2, $lightness: -5%); + border: 1px solid variables.$input-border-color; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } } diff --git a/src/styles/polar-bear/_overrides.scss b/src/styles/polar-bear/_overrides.scss index 41b4e10c..09eab695 100644 --- a/src/styles/polar-bear/_overrides.scss +++ b/src/styles/polar-bear/_overrides.scss @@ -1,21 +1,26 @@ +@use "../black-rhino/overrides"; +@use "../variables"; +@use 'sass:color'; + + $thead-bg-color-1: #E4EBF3; -$thead-bg-color-2: #E4EBF3; +variables.$thead-bg-color-2: #E4EBF3; $thead-bg-color-3: #f7fafc; -$header-color: darken(#8395aa, 10%); -$text-color: #394567; -$link-color: #5e72e4; +$header-color: color.adjust(#8395aa, $lightness: -10%); +variables.$text-color: #394567; +variables.$link-color: #5e72e4; $focus-color: #4D96FB; -$text-color-td: #525f7f; -$text-shadow-color: lighten(#2C394F, 10%); +overrides.$text-color-td: #525f7f; +overrides.$text-shadow-color: color.adjust(#2C394F, $lightness: 10%); -$secondary-text-color: rgb(152, 165, 185) ; -$border-color: #e3e8ee; -$border-color-td: #E4EBF3; +variables.$secondary-text-color: rgb(152, 165, 185) ; +variables.$border-color: #e3e8ee; +overrides.$border-color-td: #E4EBF3; -$input-border-color: transparent; -$input-bg: #34445f; +variables.$input-border-color: transparent; +overrides.$input-bg: #34445f; -$table-bg: #FFFFFF; -$highlight-color:#fff; +variables.$table-bg: #FFFFFF; +variables.$highlight-color:#fff; $white: #FFFFFF; \ No newline at end of file diff --git a/src/styles/polar-bear/polar-bear.scss b/src/styles/polar-bear/polar-bear.scss index 7d408566..44ec5b0d 100644 --- a/src/styles/polar-bear/polar-bear.scss +++ b/src/styles/polar-bear/polar-bear.scss @@ -1,4 +1,8 @@ -@import './overrides'; +@use 'overrides'; +@use 'sass:color'; +@use "../black-rhino/overrides" as overrides2; +@use "../variables"; + // suggested by wifey .vgt-inner-wrap{ border-radius: 0.25rem; @@ -9,109 +13,108 @@ border-spacing: 0; border-collapse: separate; font-size: 1rem; - background-color: $white; - border: 1px solid $border-color; + background-color: overrides.$white; + border: 1px solid variables.$border-color; border-bottom: none; border-radius: 0.25rem; // td & td { padding: 1em .75em 1em .75em; - border-bottom: 1px solid $border-color-td; - color: $text-color-td; - &.vgt-right-align{ - text-align: right; - } + border-bottom: 1px solid overrides2.$border-color-td; + color: overrides2.$text-color-td; + text-align: start; + } //th & th.line-numbers, & th.vgt-checkbox-col { - color: $text-color; - border-right: 1px solid $border-color; - background: $thead-bg-color-3; + color: variables.$text-color; + border-inline-end: 1px solid variables.$border-color; + background: overrides.$thead-bg-color-3; } thead th{ - color: $header-color; + color: overrides.$header-color; font-weight: 600; // text-shadow: 1px 1px $text-shadow-color; - border-bottom: 1px solid $border-color; - background: $thead-bg-color-3; + border-bottom: 1px solid variables.$border-color; + background: overrides.$thead-bg-color-3; &.sorting-asc, &.sorting-desc { - color: $link-color; + color: variables.$link-color; } &.sorting-desc{ &:before{ - border-top: 5px solid lighten($link-color, 5%); + border-top: 5px color.adjust(variables.$link-color, $lightness: 5%) solid ; } } &.sorting-asc{ &:after{ - border-bottom: 5px solid lighten($link-color, 5%); + border-bottom: 5px solid color.adjust(variables.$link-color, $lightness: 5%) ; } } .vgt-input, .vgt-select{ height: 2.75em; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); - border: 1px solid $border-color-td; + border: 1px solid overrides2.$border-color-td; } .vgt-input:focus, .vgt-select:focus { outline: 0; - border-color: lighten($focus-color, 25%); + border-color: color.adjust(overrides.$focus-color, $lightness: 25%); } } thead tr:first-child{ th:first-child{ - border-top-left-radius: 0.25rem; + border-start-start-radius: 0.25rem; } th:last-child{ - border-top-right-radius: 0.25rem; + border-start-end-radius: 0.25rem; } } //bordered &.bordered td { - border: 1px solid $border-color; - background: $white; + border: 1px solid variables.$border-color; + background: overrides.$white; } &.bordered th { // border: none; - border: 1px solid $border-color; + border: 1px solid variables.$border-color; } } .vgt-wrap.polar-bear{ .vgt-wrap__footer{ - color: $text-color; - border: 1px solid $border-color; + color: variables.$text-color; + border: 1px solid variables.$border-color; border-bottom: 0px; border-top: 0px; - background: linear-gradient($thead-bg-color-3, $thead-bg-color-3); + background: linear-gradient(overrides.$thead-bg-color-3, overrides.$thead-bg-color-3); .footer__row-count{ position: relative; - padding-right: 3px; + padding-inline-end: 3px; &__label{ - color: $secondary-text-color; + color: variables.$secondary-text-color; } &__select{ text-align: center; - color: $text-color-td; - background: $table-bg; + color: overrides2.$text-color-td; + background: variables.$table-bg; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px; - padding-right: 30px; + padding-inline-end: 30px; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); - border: 1px solid $border-color-td; + border: 1px solid overrides2.$border-color-td; &::-ms-expand{ display: none; } &:focus{ - border-color: $link-color; + border-color: variables.$link-color; } } &::after{ @@ -120,58 +123,57 @@ position: absolute; height: 0px; width: 0px; - right: 15px; + inset-inline-end: 15px; top: 50%; margin-top: -3px; - border-top: 6px solid $text-color-td; - border-left: 6px solid transparent; - border-right: 6px solid transparent; + border-top: 6px solid overrides2.$text-color-td; + border-inline: 6px solid transparent; border-bottom: none; pointer-events: none } } .footer__navigation{ &__page-btn{ - color: $text-color; + color: variables.$text-color; &.disabled, &.disabled:hover { .chevron.left:after{ - border-right-color: $text-color; + border-inline-start-color: variables.$text-color; } .chevron.right:after{ - border-left-color: $text-color; + border-inline-end-color: variables.$text-color; } } } &__info, &__page-info{ - color: $text-color; + color: variables.$text-color; } } } // control bar .vgt-global-search{ - border: 1px solid $border-color; + border: 1px solid variables.$border-color; border-bottom: 0px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - background: $thead-bg-color-3; + border-start-start-radius: 3px; + border-start-end-radius: 3px; + background: overrides.$thead-bg-color-3; } .vgt-global-search__input{ .input__icon{ .magnifying-glass{ - border: 2px solid darken($border-color, 2%); + border: 2px solid color.adjust(variables.$border-color, $lightness: -2%); &:before{ - background: darken($border-color, 2%); + background: color.adjust(variables.$border-color, $lightness: -2%); } } } .vgt-input, .vgt-select{ height: 2.75em; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); - border: 1px solid $border-color-td; + border: 1px solid overrides2.$border-color-td; &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: $text-color; + color: variables.$text-color; opacity: 0.3; /* Firefox */ } } diff --git a/src/styles/style.scss b/src/styles/style.scss index 400cbb44..d8db7e5e 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,28 +1,28 @@ -@import './striped'; +@use 'striped'; // base table styles -@import './variables'; -@import './utils'; -@import './wrap'; -@import './table'; -@import './table-th'; -@import './input'; -@import './loading'; -@import './expand-rows'; +@use 'variables'; +@use 'utils'; +@use 'wrap'; +@use 'table'; +@use 'table-th'; +@use 'input'; +@use 'loading'; +@use 'expand-rows'; // table enhancements -@import './bordered'; -@import './rtl'; -@import './condensed'; -@import './compact'; +@use 'bordered'; +@use 'rtl'; +@use 'condensed'; +@use 'compact'; // controls on top -@import './control-bar'; +@use 'control-bar'; // table footer -@import './table-footer'; +@use 'table-footer'; //themes -@import './nocturnal/nocturnal'; -@import './black-rhino/black-rhino'; -@import './polar-bear/polar-bear'; +@use 'nocturnal/nocturnal'; +@use 'black-rhino/black-rhino'; +@use 'polar-bear/polar-bear';