From 680788b9b456c6d87875234d9f2c033cfbb7e18f Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Fri, 13 Mar 2020 19:59:40 -0400 Subject: [PATCH] feat(styling): add more material design stylings --- packages/common/src/styles/_variables.scss | 10 +- .../common/src/styles/multiple-select.scss | 191 ++++++++++++++++++ packages/common/src/styles/slick-plugins.scss | 26 +++ .../src/styles/slickgrid-theme-material.scss | 9 + 4 files changed, 234 insertions(+), 2 deletions(-) create mode 100644 packages/common/src/styles/multiple-select.scss diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index d57b5e7ef..3f14b6b9b 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -473,14 +473,20 @@ $multiselect-checkbox-hover-bg-color: $row-mouse-hover-color !default; $multiselect-select-all-border-bottom: 1px solid #ddd !default; $multiselect-select-all-text-color: darken($primary-color, 5%) !default; $multiselect-select-all-text-hover-color: darken($primary-color, 10%) !default; +$multiselect-icon-font-size: 16px !default; +$multiselect-icon-arrow-down: "\f0d7" !default; +$multiselect-icon-arrow-up: "\f0d8" !default; +$multiselect-icon-arrow-font-size: $multiselect-icon-font-size !default; $multiselect-icon-color: $primary-color !default; $multiselect-icon-checked: "\f14a" !default; $multiselect-icon-unchecked: "\f096" !default; $multiselect-icon-radio-checked: "\f192" !default; $multiselect-icon-radio-unchecked: "\f10c" !default; -$multiselect-icon-font-size: 16px !default; +$multiselect-icon-search: "\f002" !default; +$multiselect-icon-search-margin-right: 8px !default; +$multiselect-ok-button-font-weight: 600 !default; $multiselect-label-margin-bottom: 5px !default; -$multiselect-unchecked-opacity: 0.5 !default; +$multiselect-unchecked-opacity: 0.6 !default; $multiselect-placeholder-font-family: $filter-placeholder-font-family !default; $multiselect-ok-button-bg-color: #fff !default; $multiselect-ok-button-bg-hover-color: darken($row-mouse-hover-color, 3%) !default; diff --git a/packages/common/src/styles/multiple-select.scss b/packages/common/src/styles/multiple-select.scss new file mode 100644 index 000000000..a57bbad1c --- /dev/null +++ b/packages/common/src/styles/multiple-select.scss @@ -0,0 +1,191 @@ +/** + * @author zhixin wen + */ + +.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; +} diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 0855d57a1..e3162e1a4 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -1,5 +1,6 @@ /* plugin variables */ @import './variables'; +@import './multiple-select'; // ---------------------------------------------- // Cell Menu Plugin (Action menu @@ -467,6 +468,21 @@ border: $multiselect-input-filter-border; background-color: transparent; + div { + &:before { + font-family: $icon-font-family; + font-size: $multiselect-icon-arrow-font-size; + content: $multiselect-icon-arrow-down; + } + &.open { + &:before { + font-family: $icon-font-family; + font-size: $multiselect-icon-arrow-font-size; + content: $multiselect-icon-arrow-up; + } + } + } + span { font-size: $multiselect-input-filter-font-size; font-family: $multiselect-input-filter-font-family; @@ -532,6 +548,7 @@ .ms-select-all { border-bottom: $multiselect-select-all-border-bottom; label { + display: inline-block; font-weight: normal; padding: 5px 8px; color: $multiselect-select-all-text-color; @@ -558,6 +575,15 @@ color: $multiselect-ok-button-text-hover-color; } } + .ms-search { + &:before { + font-family: $icon-font-family; + font-size: $multiselect-icon-font-size; + content: $multiselect-icon-search; + right: $multiselect-icon-search-margin-right; + position: absolute; + } + } } // ---------------------------------------------- diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss index d6bc379f9..c1447b979 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -54,6 +54,15 @@ $grid-menu-title-font-size: 18px; $header-menu-button-icon-font-size: 16px; $header-menu-icon-font-size: 18px; $header-menu-button-icon: "\FB0B"; +$multiselect-icon-arrow-down: "\F35D"; +$multiselect-icon-arrow-up: "\F360"; +$multiselect-icon-arrow-font-size: $icon-font-size - 4px; +$multiselect-icon-checked: "\F132"; +$multiselect-icon-unchecked: "\F131"; +$multiselect-icon-radio-checked: "\FAA4"; +$multiselect-icon-radio-unchecked: "\F130"; +$multiselect-icon-search: "\F349"; +$multiselect-unchecked-opacity: 0.8; $slider-editor-height: 26px; $primary-color: #009530; $row-mouse-hover-color: #ebfaef;