Skip to content

Commit

Permalink
fix(styling): extra styling shouldn't override default bootstrap style (
Browse files Browse the repository at this point in the history
#570)

- also added a "lite" version since the material/salesforce theme now also include the without-bootstrap-styling and also flatpickr/multipleSelect stylings
  • Loading branch information
ghiscoding authored Sep 3, 2020
1 parent 979a5d7 commit 5cdc4d9
Show file tree
Hide file tree
Showing 13 changed files with 1,082 additions and 811 deletions.
6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,18 @@
"postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --output-style compressed",
"sass-build-task:scss-compile:material-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.bare.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:material-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.bare.css dist/styles/css/slickgrid-theme-material.bare.css --output-style compressed",
"sass-build-task:scss-compile:material-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:material-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.lite.css dist/styles/css/slickgrid-theme-material.lite.css --output-style compressed",
"sass-build-task:scss-compile:salesforce": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:salesforce": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --output-style compressed",
"sass-build-task:scss-compile:salesforce-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.bare.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:salesforce-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.bare.css dist/styles/css/slickgrid-theme-salesforce.bare.css --output-style compressed",
"sass-build-task:scss-compile:salesforce-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:salesforce-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.lite.css dist/styles/css/slickgrid-theme-salesforce.lite.css --output-style compressed",
"sass:build": "run-p sass-build-task:scss-compile:*",
"presass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/css",
"sass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass",
"postsass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/sass",
"presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap",
"sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- -watch",
"presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss';
@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss';

/*
www.OnlineWebFonts.Com
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.scss';
@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss';

.icon {
align-items: center;
Expand Down
1,432 changes: 717 additions & 715 deletions src/app/modules/angular-slickgrid/styles/_variables.scss

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions src/app/modules/angular-slickgrid/styles/flatpickr.min.scss

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
191 changes: 191 additions & 0 deletions src/app/modules/angular-slickgrid/styles/multiple-select.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
/**
* @author zhixin wen <[email protected]>
*/

.ms-parent {
display: inline-block;
position: relative;
vertical-align: middle;
}

.ms-choice {
display: block;
width: 100%;
height: 26px;
padding: 0;
overflow: hidden;
cursor: pointer;
border: 1px solid #aaa;
text-align: left;
white-space: nowrap;
line-height: 26px;
color: #444;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
}

.ms-choice.disabled {
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}

.ms-choice > span {
position: absolute;
top: 0;
left: 0;
right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-left: 8px;
}

.ms-choice > span.placeholder {
color: #999;
}

.ms-choice > div {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 25px;
background: url('~/multiple-select.png') left top no-repeat;
}

.ms-choice > div.open {
background: url('~/multiple-select.png') right top no-repeat;
}

.ms-drop {
width: 100%;
overflow: hidden;
display: none;
margin-top: -1px;
padding: 0;
position: absolute;
z-index: 1000;
background: #fff;
color: #000;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.ms-drop.bottom {
top: 100%;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.ms-drop.top {
bottom: 100%;
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}

.ms-search {
display: inline-block;
margin: 0;
min-height: 26px;
padding: 4px;
position: relative;
white-space: nowrap;
width: 100%;
z-index: 10000;
}

.ms-search input {
width: 100%;
height: auto !important;
min-height: 24px;
padding: 0 20px 0 5px;
margin: 0;
outline: 0;
font-family: sans-serif;
font-size: 1em;
border: 1px solid #aaa;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: #fff url('~/multiple-select.png') no-repeat 100% -22px;
background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('~/multiple-select.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('~/multiple-select.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('~/multiple-select.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('~/multiple-select.png') no-repeat 100% -22px, linear-gradient(to top, #ffffff 85%, #eeeeee 99%);
}

.ms-search, .ms-search input {
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.ms-drop ul {
overflow: auto;
margin: 0;
padding: 5px 8px;
}

.ms-drop ul > li {
list-style: none;
display: list-item;
background-image: none;
position: static;
}

.ms-drop ul > li .disabled {
opacity: .35;
filter: Alpha(Opacity=35);
}

.ms-drop ul > li.multiple {
display: block;
float: left;
}

.ms-drop ul > li.group {
clear: both;
}

.ms-drop ul > li.multiple label {
width: 100%;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.ms-drop ul > li label {
font-weight: normal;
display: block;
white-space: nowrap;
}

.ms-drop ul > li label.optgroup {
font-weight: bold;
}

.ms-drop input[type="checkbox"] {
vertical-align: middle;
}

.ms-drop .ms-no-results {
display: none;
}
4 changes: 4 additions & 0 deletions src/app/modules/angular-slickgrid/styles/slick-plugins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -946,8 +946,12 @@ input.slider-filter-input[type=range] {
}
}
.search-filter {
height: $header-input-height;

.slider-value {
padding: 0;
height: 100%;

.input-group-text {
padding: $slider-filter-number-padding;
font-size: $slider-filter-number-font-size;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,45 +1,52 @@
@import './variables';

/** Bootstrap buttons styling copied and changed slightly for Material Design */
.btn {
cursor: pointer;
font-family: $font-family;
display: inline-block;
margin-bottom: 0;
font-weight: 500;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
}
.slick-editor-modal, .slick-large-editor-text {
.btn {
cursor: pointer;
font-family: $font-family;
display: inline-block;
margin-bottom: 0;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
}

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default {
color: $button-primary-color;
background-color: #fff;
border-color: #ccc;
}

.btn-primary {
color: #fff;
background-color: $primary-color;
}
.btn-primary {
color: #fff;
background-color: $button-primary-bg-color;
}

.btn-xs,
.btn-group-xs>.btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
.btn-xs,
.btn-group-xs>.btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}

.slick-pane {
.gridPane, .grid-pane, .slick-editor-modal {
font-family: $font-family;

.form-control {
display: block;
width: 100%;
font-size: 14px;
font-size: $font-size-base;
line-height: 1.42857143;
color: #555;
background-color: #fff;
Expand Down Expand Up @@ -126,4 +133,24 @@
border-color: lighten($primary-color, 10%);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3);
}

.slick-pagination {
.slick-pagination-nav {
.pagination > li {
a, span {
position: relative;
float: left;
margin-left: -1px;
}
}
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
cursor: not-allowed;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/*!
* SlickGrid custom styling for Material (https://github.com/ghiscoding/angular-slickgrid)
* Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE)
* @author: Ghislain B. (ghiscoding)
*//*!
/** SlickGrid Material Theme */
@import './variables-theme-material';
@import './roboto-font';
@import './slick-default-theme';
@import './slick-grid';
@import './slick-controls';
@import './slick-editors';
@import './slick-plugins';
@import './slick-pagination';
@import './slick-footer';
@import './slickgrid-examples';
@import './slick-bootstrap';
@import './ui-autocomplete';
@import './material-svg-icons';
@import './material-svg-utilities';

$link-color: $primary-color !default;
@import './colors.scss';
@import './extra-styling.scss';
Loading

0 comments on commit 5cdc4d9

Please sign in to comment.