Skip to content

Commit

Permalink
Updated Sass and refined the SCSS file
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenzhixin
wenzhixin committed Nov 20, 2024
1 parent 75274c1 commit ef5c979
Show file tree
Hide file tree
Showing 21 changed files with 144 additions and 127 deletions.
26 changes: 13 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,35 @@
"doc": "site"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.4",
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^28.0.0",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-inject": "^5.0.5",
"@rollup/plugin-multi-entry": "^6.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-terser": "^0.4.4",
"@vitejs/plugin-vue": "^5.1.2",
"@vitejs/plugin-vue": "^5.2.0",
"chalk": "^5.3.0",
"clean-css-cli": "^5.6.3",
"core-js": "^3.38.1",
"core-js": "^3.39.0",
"cross-env": "^7.0.3",
"cspell": "^8.14.2",
"cypress": "^13.13.3",
"cspell": "^8.16.0",
"cypress": "^13.16.0",
"editorconfig-checker": "^6.0.0",
"eslint": "^8.57.0",
"foreach-cli": "^1.8.1",
"glob": "^11.0.0",
"headr": "^0.0.4",
"npm-run-all": "^4.1.5",
"rimraf": "^6.0.1",
"rollup": "^4.21.0",
"rollup": "^4.27.3",
"rollup-plugin-copy": "^3.5.0",
"sass": "^1.77.8",
"stylelint": "^16.8.2",
"sass": "^1.81.0",
"stylelint": "^16.10.0",
"stylelint-config-standard-scss": "^13.1.0",
"vite": "^5.4.2",
"vue": "^3.4.38"
"vite": "^5.4.11",
"vue": "^3.5.13"
},
"scripts": {
"lint:js": "eslint src",
Expand Down
3 changes: 1 addition & 2 deletions src/bootstrap-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
* https://github.com/wenzhixin/bootstrap-table/
*/

@import "./themes/bootstrap/variables";
@import "./themes/theme";
@use "themes/theme";
32 changes: 16 additions & 16 deletions src/themes/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "./variables";
@use "variables";

.bootstrap-table {
.fixed-table-toolbar {
Expand Down Expand Up @@ -116,23 +116,23 @@
}

.both {
background-image: url($sort-background-image-url-both);
background-image: url(variables.$sort-background-image-url-both);
background-size: 16px 16px;
background-position: center right 2px;
}

.asc {
background-image: url($sort-background-image-url-asc);
background-image: url(variables.$sort-background-image-url-asc);
}

.desc {
background-image: url($sort-background-image-url-desc);
background-image: url(variables.$sort-background-image-url-desc);
}
}

tbody tr {
&.selected td {
background-color: $hover-bg;
background-color: variables.$hover-bg;
}

&.no-records-found td {
Expand Down Expand Up @@ -177,28 +177,28 @@

&.fixed-height {
&:not(.has-footer) {
border-bottom: 1px solid $border-color;
border-bottom: 1px solid variables.$border-color;
}

&.has-card-view {
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-top: 1px solid variables.$border-color;
border-bottom: 1px solid variables.$border-color;
}

.fixed-table-border {
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
border-left: 1px solid variables.$border-color;
border-right: 1px solid variables.$border-color;
}

.table {
thead th {
border-bottom: 1px solid $border-color;
border-bottom: 1px solid variables.$border-color;
}
}

.table-dark {
thead th {
border-bottom: 1px solid $dark-border-color;
border-bottom: 1px solid variables.$dark-border-color;
}
}
}
Expand All @@ -213,7 +213,7 @@

.fixed-table-loading {
align-items: center;
background: $background;
background: variables.$background;
display: flex;
justify-content: center;
position: absolute;
Expand Down Expand Up @@ -252,7 +252,7 @@
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: loading;
background: $color;
background: variables.$color;
border-radius: 50%;
display: block;
height: 5px;
Expand All @@ -271,12 +271,12 @@
}

&.table-dark {
background: $color;
background: variables.$color;

.animation-dot,
.animation-wrap::after,
.animation-wrap::before {
background: $background;
background: variables.$background;
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/themes/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
$border-color: #dee2e6;
$hover-bg: rgba(0, 0, 0, 0.075);
$background: #fff;
$color: #212529;
$dark-border-color: #32383e;

/* stylelint-disable annotation-no-unknown, max-line-length */
$sort-background-image-url-both: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23dcdcdc"><path d="m103.05877,41.4c9.37707,-12.5 24.60541,-12.5 33.98248,0l96.02113,128c6.90152,9.2 8.92696,22.9 5.17614,34.9s-12.45274,19.8 -22.20489,19.8l-192.04225,-0.1c-9.67713,0 -18.45406,-7.8 -22.20489,-19.8s-1.65036,-25.7 5.17614,-34.9l96.02113,-128l0.07501,0.1zm0,429.3l-96.02113,-128c-6.90152,-9.2 -8.92696,-22.9 -5.17614,-34.9s12.45274,-19.8 22.20489,-19.8l192.04225,0c9.67713,0 18.45406,7.8 22.20489,19.8s1.65036,25.7 -5.17614,34.9l-96.02113,128c-9.37707,12.5 -24.60541,12.5 -33.98248,0l-0.07501,0z"/></svg>' !default;
$sort-background-image-url-asc: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%237B83DB"><path d="m136.9496,41.4c-9.3763,-12.5 -24.60342,-12.5 -33.97972,0l-96.01334,128c-6.90096,9.2 -8.92624,22.9 -5.17572,34.9s12.45173,19.8 22.20309,19.8l192.02668,0c9.67634,0 18.45256,-7.8 22.20309,-19.8s1.65023,-25.7 -5.17572,-34.9l-96.01334,-128l-0.07501,0z"/></svg>' !default;
Expand Down
16 changes: 16 additions & 0 deletions src/themes/bootstrap-table/_custom.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@use "sass:color";
@use "../variables";

variables.$border-color: #dbdbdb;
variables.$hover-bg: hsl(0, 0%, 98%);
variables.$background: #fff;
variables.$color: #363636;
variables.$dark-border-color: #32383e;

// custom
$background-hover: color.adjust(variables.$background, $lightness: -4%);
$primary-background: #3679e4;
$primary-background-hover: color.adjust($primary-background, $lightness: -10%);
$btn-padding: 9px 12px;
$btn-border: #ccc;
$btn-border-radius: 4px;
13 changes: 0 additions & 13 deletions src/themes/bootstrap-table/_variables.scss
View file

This file was deleted.

61 changes: 32 additions & 29 deletions src/themes/bootstrap-table/bootstrap-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@
* @author Dustin Utecht
* https://github.com/wenzhixin/bootstrap-table/
*/
@import "./variables";
@import "../theme";
@import "./font";

@use "sass:color";
@use "custom";
@use "../variables";
@use "../theme";
@use "font";

.bootstrap-table {
* {
Expand All @@ -14,10 +17,10 @@
input.form-control,
select.form-control,
.btn {
border-radius: $btn-border-radius;
background-color: $background;
border: 1px solid $btn-border;
padding: $btn-padding;
border-radius: custom.$btn-border-radius;
background-color: variables.$background;
border: 1px solid custom.$btn-border;
padding: custom.$btn-padding;
}

select.form-control {
Expand All @@ -29,12 +32,12 @@
cursor: pointer;

&.active {
background-color: darken($background, 8);
background-color: color.adjust(variables.$background, $lightness: -8%);
}

&:focus,
&:hover {
background-color: $background-hover;
background-color: custom.$background-hover;
}
}

Expand All @@ -52,10 +55,10 @@

.detail-icon {
text-decoration: none;
color: $primary-background;
color: custom.$primary-background;

&:hover {
color: darken($primary-background, 20);
color: color.adjust(custom.$primary-background, $lightness: -20%);
}
}

Expand Down Expand Up @@ -98,7 +101,7 @@
}

.dropdown-divider {
border-bottom: 1px solid $border-color;
border-bottom: 1px solid variables.$border-color;
}
}

Expand Down Expand Up @@ -138,32 +141,32 @@

.dropdown-menu {
display: none;
background-color: $background;
background-color: variables.$background;
position: absolute;
right: 0;
min-width: 120px;
margin-top: 2px;
border: 1px solid $btn-border;
border: 1px solid custom.$btn-border;
border-radius: 4px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.175);

.dropdown-item {
color: $color;
color: variables.$color;
text-decoration: none;
display: block;
padding: 5px 12px;
white-space: nowrap;

&:hover {
background-color: $background-hover;
background-color: custom.$background-hover;
}

&.active {
background-color: $primary-background;
background-color: custom.$primary-background;
color: #fff;

&:hover {
background-color: $primary-background-hover;
background-color: custom.$primary-background-hover;
}
}
}
Expand Down Expand Up @@ -195,7 +198,7 @@
&.table-bordered {
thead tr th,
tbody tr td {
border: 1px solid $border-color;
border: 1px solid variables.$border-color;
}

tbody tr td {
Expand All @@ -205,7 +208,7 @@

&.table-hover {
tbody tr:hover {
background: $hover-bg;
background: variables.$hover-bg;
}
}
}
Expand All @@ -227,34 +230,34 @@
list-style: none;

.page-item {
border: 1px solid $border-color;
background-color: $background;
border: 1px solid variables.$border-color;
background-color: variables.$background;
border-radius: 4px;
margin: 2px;
padding: 5px 2px;

&:hover {
background-color: $background-hover;
background-color: custom.$background-hover;
}

.page-link {
padding: 6px 12px;
line-height: 1.4286;
color: $color;
color: variables.$color;
text-decoration: none;
outline: none;
}

&.active {
background-color: $primary-background;
border: 1px solid darken($primary-background, 5);
background-color: custom.$primary-background;
border: 1px solid color.adjust(custom.$primary-background, $lightness: -5%);

.page-link {
color: #fff;
}

&:hover {
background-color: $primary-background-hover;
background-color: custom.$primary-background-hover;
}
}
}
Expand Down Expand Up @@ -312,8 +315,8 @@

.btn {
border-radius: 4px;
background-color: $background;
border: 1px solid $btn-border;
background-color: variables.$background;
border: 1px solid custom.$btn-border;
padding: 6px 12px;
outline: none;
cursor: pointer;
Expand Down
5 changes: 0 additions & 5 deletions src/themes/bootstrap/_variables.scss
View file

This file was deleted.

7 changes: 7 additions & 0 deletions src/themes/bulma/_custom.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@use '../variables';

variables.$border-color: #dbdbdb;
variables.$hover-bg: hsl(0, 0%, 98%);
variables.$background: #fff;
variables.$color: #363636;
variables.$dark-border-color: #32383e;
5 changes: 0 additions & 5 deletions src/themes/bulma/_variables.scss
View file

This file was deleted.

Loading

0 comments on commit ef5c979

Please sign in to comment.