diff --git a/lib/src/styles/_variables.scss b/lib/src/styles/_variables.scss index ead4e469..36aec7eb 100644 --- a/lib/src/styles/_variables.scss +++ b/lib/src/styles/_variables.scss @@ -1,26 +1,74 @@ +/* + * Multiple-Select-Vanilla SASS variables + */ $primary-color: #000 !default; $ms-item-border: 1px solid transparent !default; $ms-item-hover-border: 1px solid #d5d5d5 !default; -$ms-icon-font-size: 16px !default; $ms-checkbox-hover-bg-color: #fafafa !default; +$ms-choice-border: 1px solid #aaa !default; +$ms-choice-bgcolor: #fff !default; +$ms-choice-disabled-bgcolor: #f4f4f4 !default; +$ms-choice-disabled-border: 1px solid #ddd !default; +$ms-choice-border-radius: 4px !default; +$ms-choice-color: #444 !default; +$ms-choice-text-align: left !default; +$ms-choice-line-height: 26px !default; +$ms-drop-background: #fff !default; +$ms-drop-color: #000 !default; +$ms-drop-border: 1px solid #aaa !default; +$ms-drop-bottom-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15) !default; +$ms-drop-top-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15) !default; +$ms-drop-border-radius: 4px !default; +$ms-drop-hide-radio-padding: 0 !default; +$ms-drop-hide-radio-hover-bgcolor: #f8f9fa !default; +$ms-drop-hide-radio-label-margin-bottom: 0 !default; +$ms-drop-hide-radio-label-padding: 5px 8px !default; +$ms-drop-hide-radio-selected-color: #fff !default; +$ms-drop-hide-radio-selected-bgcolor: #007bff !default; +$ms-drop-input-margin-left: -1.25rem !default; +$ms-drop-input-margin-top: 0.3rem !default; +$ms-drop-optgroup-font-weight: bold !default; +$ms-drop-list-item-level1-padding-left: 28px !default; +$ms-drop-option-divider-padding: 0 !default; +$ms-drop-option-divider-border-top: 1px solid #e9ecef !default; +$ms-drop-margin-top: -1px !default; +$ms-drop-padding: 0 !default; +$ms-drop-list-item-padding: 0.25rem 8px !default; +$ms-drop-list-item-disabled-filter: Alpha(Opacity = 35) !default; +$ms-drop-list-item-disabled-opacity: 0.35 !default; +$ms-drop-zindex: 1050 !default; +$ms-label-margin-bottom: 0 !default; +$ms-label-padding-left: 1.25rem !default; $ms-ok-button-bg-color: #fff !default; $ms-ok-button-bg-hover-color: #f9f9f9 !default; $ms-ok-button-border-color: #ccc !default; $ms-ok-button-border-radius: 0 0 4px 4px !default; $ms-ok-button-border-width: 1px 0 0 0 !default; $ms-ok-button-font-weight: 600 !default; +$ms-ok-button-padding: 0 !default; $ms-ok-button-text-color: $primary-color !default; $ms-ok-button-text-hover-color: darken($primary-color, 5%) !default; $ms-ok-button-height: 26px !default; $ms-ok-button-width: 100% !default; $ms-ok-button-text-align: center !default; -$ms-all-border-bottom: 1px solid #ddd !default; -$ms-all-label-border: $ms-item-border !default; -$ms-all-label-hover-border: 1px solid transparent !default; -$ms-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default; -$ms-all-label-padding: 4px !default; -$ms-all-line-height: calc(#{$ms-icon-font-size} + 2px) !default; -$ms-all-padding: 4px !default; -$ms-all-text-color: darken($primary-color, 5%) !default; -$ms-all-text-hover-color: transparent !default; +$ms-placeholder-color: #999 !default; +$ms-search-margin: 0 !default; +$ms-search-min-height: 26px !default; +$ms-search-padding: 4px !default; +$ms-search-zindex: 10000 !default; +$ms-search-input-border: 1px solid #aaa !default; +$ms-search-input-border-radius: 5px !default; +$ms-search-input-min-height: 24px !default; +$ms-search-input-margin: 0 !default; +$ms-search-input-padding: 0 5px !default; +$ms-select-all-border-bottom: 1px solid #ddd !default; +$ms-select-all-label-border: $ms-item-border !default; +$ms-select-all-label-hover-border: 1px solid transparent !default; +$ms-select-all-label-hover-bg-color: $ms-checkbox-hover-bg-color !default; +$ms-select-all-label-padding: 4px !default; +$ms-select-all-label-span-padding-left: $ms-label-padding-left !default; +$ms-select-all-line-height: 18px !default; +$ms-select-all-padding: 4px !default; +$ms-select-all-text-color: darken($primary-color, 5%) !default; +$ms-select-all-text-hover-color: transparent !default; diff --git a/lib/src/styles/multiple-select.scss b/lib/src/styles/multiple-select.scss index 2254f8b2..bd906349 100644 --- a/lib/src/styles/multiple-select.scss +++ b/lib/src/styles/multiple-select.scss @@ -1,4 +1,4 @@ -/* sass variables */ +/* css/sass variables */ @import './variables'; /*! @@ -27,26 +27,26 @@ } .ms-choice { + cursor: pointer; 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; + background-color: var(--ms-choice-bgcolor, $ms-choice-bgcolor); + border: var(--ms-choice-border, $ms-choice-border); + border-radius: var(--ms-choice-border-radius, $ms-choice-border-radius); + line-height: var(--ms-choice-line-height, $ms-choice-line-height); + color: var(--ms-choice-color, $ms-choice-color); + text-align: var(--ms-choice-text-align, $ms-choice-text-align); text-decoration: none; - border-radius: 4px; - background-color: #fff; user-select: none; + white-space: nowrap; &.disabled { - background-color: #f4f4f4; + border: var(--ms-choice-disabled-border, $ms-choice-disabled-border); + background-color: var(--ms-choice-disabled-bgcolor, $ms-choice-disabled-bgcolor); background-image: none; - border: 1px solid #ddd; cursor: default; } @@ -63,7 +63,7 @@ padding-left: 8px; &.ms-placeholder { - color: #999; + color: var(--ms-placeholder-color, $ms-placeholder-color); } } div.icon-close { @@ -110,51 +110,51 @@ min-width: 100%; overflow: hidden; display: none; - margin-top: -1px; - padding: 0; position: absolute; - z-index: 1050; - background: #fff; - color: #000; - border: 1px solid #aaa; - border-radius: 4px; + background: var(--ms-drop-background, $ms-drop-background); + border: var(--ms-drop-border, $ms-drop-border); + border-radius: var(--ms-drop-border-radius, $ms-drop-border-radius); + color: var(--ms-drop-color, $ms-drop-color); + margin-top: var(--ms-drop-margin-top, $ms-drop-margin-top); + padding: var(--ms-drop-padding, $ms-drop-padding); + z-index: var(--ms-drop-zindex, $ms-drop-zindex); &.bottom { top: 100%; - box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); + box-shadow: var(--ms-drop-bottom-box-shadow, $ms-drop-bottom-box-shadow); } &.top { bottom: 100%; - box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15); + box-shadow: var(--ms-drop-top-box-shadow, $ms-drop-top-box-shadow); } .ms-select-all { - border-bottom: var(--ms-all-border-bottom, $ms-all-border-bottom); - padding: var(--ms-all-padding, $ms-all-padding); - line-height: var(--ms-all-line-height, $ms-all-line-height); + border-bottom: var(--ms-select-all-border-bottom, $ms-select-all-border-bottom); + line-height: var(--ms-select-all-line-height, $ms-select-all-line-height); + padding: var(--ms-select-all-padding, $ms-select-all-padding); width: 100%; &:hover { - background-color: var(--ms-all-text-hover-color, $ms-all-text-hover-color); + background-color: var(--ms-select-all-text-hover-color, $ms-select-all-text-hover-color); } label { display: inline-block; font-weight: normal; - padding: var(--ms-all-label-padding, $ms-all-label-padding); - border: var(--ms-all-label-border, $ms-all-label-border); - color: var(--ms-all-text-color, $ms-all-text-color); + padding: var(--ms-select-all-label-padding, $ms-select-all-label-padding); + border: var(--ms-select-all-label-border, $ms-select-all-label-border); + color: var(--ms-select-all-text-color, $ms-select-all-text-color); width: 100%; &:hover { cursor: pointer; - border: var(--ms-all-label-hover-border, $ms-all-label-hover-border); - background-color: var(--ms-all-label-hover-bg-color, $ms-all-label-hover-bg-color); + border: var(--ms-select-all-label-hover-border, $ms-select-all-label-hover-border); + background-color: var(--ms-select-all-label-hover-bg-color, $ms-select-all-label-hover-bg-color); } input { margin-left: 0; } span { - padding-left: 1.25rem; + padding-left: var(--ms-select-all-label-span-padding-left, $ms-select-all-label-span-padding-left); } } } @@ -162,7 +162,7 @@ .ms-ok-button { cursor: pointer; display: block; - padding: 0; + padding: var(--ms-ok-button-padding, $ms-ok-button-padding); width: var(--ms-ok-button-width, $ms-ok-button-width); height: var(--ms-ok-button-height, $ms-ok-button-height); border-color: var(--ms-ok-button-border-color, $ms-ok-button-border-color); @@ -181,25 +181,25 @@ .ms-search { display: inline-block; - margin: 0; - min-height: 26px; - padding: 4px; position: relative; white-space: nowrap; width: 100%; - z-index: 10000; + margin: var(--ms-search-margin, $ms-search-margin); + min-height: var(--ms-search-min-height, $ms-search-min-height); + padding: var(--ms-search-padding, $ms-search-padding); + z-index: var(--ms-search-zindex, $ms-search-zindex); input { - width: 100%; + box-shadow: none; + font-family: sans-serif; height: auto !important; - min-height: 24px; - padding: 0 5px; - margin: 0; outline: 0; - font-family: sans-serif; - border: 1px solid #aaa; - border-radius: 5px; - box-shadow: none; + width: 100%; + border: var(--ms-search-input-border, $ms-search-input-border); + border-radius: var(--ms-search-input-border-radius, $ms-search-input-border-radius); + min-height: var(--ms-search-input-min-height, $ms-search-input-min-height); + padding: var(--ms-search-input-padding, $ms-search-input-padding); + margin: var(--ms-search-input-margin, $ms-search-input-margin); } box-sizing: border-box; @@ -212,17 +212,17 @@ padding: 0; > li { - list-style: none; - display: list-item; background-image: none; + display: list-item; + list-style: none; position: static; - padding: 0.25rem 8px; + padding: var(--ms-drop-list-item-padding, $ms-drop-list-item-padding); .disabled { - font-weight: normal !important; - opacity: 0.35; - filter: Alpha(Opacity = 35); cursor: default; + font-weight: normal !important; + opacity: var(--ms-drop-list-item-disabled-opacity, $ms-drop-list-item-disabled-opacity); + filter: var(--ms-drop-list-item-disabled-filter, $ms-drop-list-item-disabled-filter); } &.multiple { @@ -243,35 +243,35 @@ } label { - position: relative; - padding-left: 1.25rem; - margin-bottom: 0; - font-weight: normal; + cursor: pointer; display: block; + font-weight: normal; + position: relative; white-space: nowrap; - cursor: pointer; + margin-bottom: var(--ms-label-margin-bottom, $ms-label-margin-bottom); + padding-left: var(--ms-label-padding-left, $ms-label-padding-left); &.optgroup { - font-weight: bold; + font-weight: var(--ms-drop-optgroup-font-weight, $ms-drop-optgroup-font-weight); } } &.hide-radio { - padding: 0; + padding: var(--ms-drop-hide-radio-padding, $ms-drop-hide-radio-padding); &:focus, &:hover { - background-color: #f8f9fa; + background-color: var(--ms-drop-hide-radio-hover-bgcolor, $ms-drop-hide-radio-hover-bgcolor); } &.selected { - color: #fff; - background-color: #007bff; + color: var(--ms-drop-hide-radio-selected-color, $ms-drop-hide-radio-selected-color); + background-color: var(--ms-drop-hide-radio-selected-bgcolor, $ms-drop-hide-radio-selected-bgcolor); } label { - margin-bottom: 0; - padding: 5px 8px; + margin-bottom: var(--ms-drop-hide-radio-label-margin-bottom, $ms-drop-hide-radio-label-margin-bottom); + padding: var(--ms-drop-hide-radio-label-padding, $ms-drop-hide-radio-label-padding); } input { @@ -281,13 +281,13 @@ &.option-level-1 { label { - padding-left: 28px; + padding-left: var(--ms-drop-list-item-level1-padding-left, $ms-drop-list-item-level1-padding-left); } } &.option-divider { - padding: 0; - border-top: 1px solid #e9ecef; + padding: var(--ms-drop-option-divider-padding, $ms-drop-option-divider-padding); + border-top: var(--ms-drop-option-divider-border-top, $ms-drop-option-divider-border-top); } } } @@ -296,8 +296,8 @@ &[type='radio'], &[type='checkbox'] { position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; + margin-left: var(--ms-drop-input-margin-left, $ms-drop-input-margin-left); + margin-top: var(--ms-drop-input-margin-top, $ms-drop-input-margin-top); } } diff --git a/lib/src/styles/themes/_variables-theme-bootstrap.scss b/lib/src/styles/themes/_variables-theme-bootstrap.scss new file mode 100644 index 00000000..6efb6750 --- /dev/null +++ b/lib/src/styles/themes/_variables-theme-bootstrap.scss @@ -0,0 +1,16 @@ +/* + * Multiple-Select-Vanilla SASS variables + */ +$ms-choice-border: 0 !default; +$ms-parent-form-control-border-radius: 4px !default; +$ms-parent-form-control-padding: 0 !default; +$ms-drop-input-sm-margin-top: 0.4rem !default; +$ms-drop-input-lg-margin-top: 0.5rem !default; +$ms-drop-list-item-padding: 0.25rem 8px !default; +$ms-drop-hide-radio-font-size: 87.5% !default; +$ms-drop-hide-radio-margin-bottom: 0 !default; +$ms-drop-hide-radio-color: #6c757d !default; +$ms-drop-hide-radio-opacity: 1 !default; +$ms-drop-hide-radio-option-level1-padding-left: 8px !default; +$ms-dropdown-divider-group-border-top: 1px solid #e9ecef !default; +$ms-dropdown-divider-first-group-border-top: none !default; diff --git a/lib/src/styles/themes/bootstrap.scss b/lib/src/styles/themes/bootstrap.scss index 355c0aac..45345a67 100644 --- a/lib/src/styles/themes/bootstrap.scss +++ b/lib/src/styles/themes/bootstrap.scss @@ -1,10 +1,13 @@ +/* css/sass variables */ +@import './variables-theme-bootstrap'; + .ms-parent.form-control { - padding: 0; height: 100%; - border-radius: 4px; + padding: var(--ms-parent-form-control-padding, $ms-parent-form-control-padding); + border-radius: var(--ms-parent-form-control-border-radius, $ms-parent-form-control-border-radius); .ms-choice { - border: 0; + border: var(--ms-choice-border, $ms-choice-border); height: 100%; > span { @@ -16,40 +19,40 @@ &.form-control-sm { .ms-drop input[type='radio'], .ms-drop input[type='checkbox'] { - margin-top: 0.4rem; + margin-top: var(--ms-drop-input-sm-margin-top, ms-drop-input-sm-margin-top); } } &.form-control-lg { .ms-drop input[type='radio'], .ms-drop input[type='checkbox'] { - margin-top: 0.5rem; + margin-top: var(--ms-drop-input-lg-margin-top, $ms-drop-input-lg-margin-top); } } &.ms-dropdown { .ms-drop ul > li { &.group.hide-radio label.optgroup { - margin-bottom: 0; - font-size: 87.5%; - color: #6c757d; + margin-bottom: var(--ms-drop-hide-radio-margin-bottom, $ms-drop-hide-radio-margin-bottom); + font-size: var(--ms-drop-hide-radio-font-size, $ms-drop-hide-radio-font-size); + color: var(--ms-drop-hide-radio-color, $ms-drop-hide-radio-color); + opacity: var(--ms-drop-hide-radio-opacity, $ms-drop-hide-radio-opacity); white-space: nowrap; - opacity: 1; } &.hide-radio.option-level-1 label { - padding-left: 8px; + padding-left: var(--ms-drop-hide-radio-option-level1-padding-left, $ms-drop-hide-radio-option-level1-padding-left); } } &.ms-dropdown-divider { .ms-drop ul > li { &.group.hide-radio label.optgroup { - border-top: 1px solid #e9ecef; + border-top: var(--ms-dropdown-divider-group-border-top, $ms-dropdown-divider-group-border-top); } &.group:first-child label.optgroup { - border-top: none; + border-top: var(--ms-dropdown-divider-first-group-border-top, $ms-dropdown-divider-first-group-border-top); } } }