summaryrefslogtreecommitdiffstats
path: root/angular-multi-select.css
diff options
context:
space:
mode:
Diffstat (limited to 'angular-multi-select.css')
-rw-r--r--angular-multi-select.css316
1 files changed, 217 insertions, 99 deletions
diff --git a/angular-multi-select.css b/angular-multi-select.css
index 1e69a31..4c7eb5e 100644
--- a/angular-multi-select.css
+++ b/angular-multi-select.css
@@ -1,171 +1,289 @@
-.multiSelect {
+/*
+ * Don't modify things marked with ! - unless you know what you're doing
+ */
+
+/* ! vertical layout */
+.multiSelect .vertical {
+ float: none;
+}
+
+/* ! horizontal layout */
+.multiSelect .horizontal:not(.multiSelectGroup) {
+ float: left;
+}
+
+/* ! create a "column" */
+.multiSelect .acol {
+ display: inline-block;
+ min-width: 12px;
+}
+
+/* ! create a "row" */
+.multiSelect .line {
+ height: 26px;
+ padding-bottom: 8px;
}
-.multiSelect.inlineBlock {
+/* ! */
+.multiSelect .inlineBlock {
display: inline-block;
}
-/* button */
+/*
+:focus { outline:none; }
+::-moz-focus-inner {border:0;}
+*/
+
+/* the multiselect button */
.multiSelect .button {
display: block;
position: relative;
- margin:0 auto;
- text-align: center;
+ text-align: center;
cursor: pointer;
- border: 1px solid #c6c6c6;
- padding: 5px 8px 6px;
+ border: 1px solid #c6c6c6;
+ padding: 1px 8px 1px 8px;
font-size: 14px;
- line-height: 1.4;
- border-radius: 2px;
- color: #333;
- -webkit-user-select: none;
+ min-height : 38px !important;
+ border-radius: 4px;
+ color: #555;
+ -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space:normal;
background-color: #fff;
- background-image: linear-gradient(#fff, #e4e4e4);
-
+ background-image: linear-gradient(#fff, #f7f7f7);
}
-/* button on mouse hover */
-.multiSelect .button:hover {
- background-image: linear-gradient(#fff, #eee);
+/* button: hover */
+.multiSelect .button:hover {
+ background-image: linear-gradient(#fff, #e9e9e9);
}
-/* helper buttons style (select all, none, reset, clear filter); */
-.multiSelect .helperButton {
+/* button: clicked */
+.multiSelect .buttonClicked {
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* labels on the button */
+.multiSelect .buttonLabel {
display: inline-block;
- text-align: center;
- vertical-align: top;
- cursor: pointer;
- border: 1px solid #ccc;
- padding: 2px 7px;
- font-size: 14px;
- line-height: 1;
- border-radius: 2px;
- color: #666;
+ padding: 5px 0px 5px 0px;
}
-.multiSelect .button > div {
- float: left;
+/* downward pointing arrow */
+.multiSelect .caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin: 0px 0px 1px 12px !important;
+ vertical-align: middle;
+ border-top: 4px solid #333;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ border-bottom: 0 dotted;
}
-/* The checkboxes container */
+/* the main checkboxes and helper layer */
.multiSelect .checkboxLayer {
background-color: #fff;
position: absolute;
z-index: 999;
- border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
- background-clip: padding-box;
- padding: 14px 0px 7px 14px;
- min-width:270px;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ min-width:278px;
+ display: none !important;
+ margin-right: 30px;
}
-/* Downward pointing arrow */
-.multiSelect .caret {
- display: inline-block;
- width: 0;
- height: 0;
- margin-left: 15px !important;
- vertical-align: middle;
- border-top: 4px solid #333;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- border-bottom: 0 dotted;
+/* container of helper elements */
+.multiSelect .helperContainer {
+ border-bottom: 1px solid #ddd;
+ padding: 8px 8px 0px 8px;
}
-.multiSelect.multiSelectItem {
- display: block;
- min-height: 30px;
- color: #777;
+/* helper buttons (select all, none, reset); */
+.multiSelect .helperButton {
+ display: inline;
+ text-align: center;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ height: 26px;
+ font-size: 13px;
+ border-radius: 2px;
+ color: #666;
+ background-color: #f1f1f1;
+ line-height: 1.6;
}
-.multiSelect .vertical {
- float: none;
+/* clear button */
+.multiSelect .clearButton {
+ position: absolute;
+ display: inline;
+ text-align: center;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ height: 22px;
+ width: 22px;
+ font-size: 13px;
+ border-radius: 2px;
+ color: #666;
+ background-color: #f1f1f1;
+ line-height: 1.4;
+ right : 2px;
+ top: 2px;
}
-.multiSelect .horizontal {
- float: left;
+/* filter */
+.multiSelect .inputFilter {
+ border-radius: 2px;
+ border: 1px solid #ccc;
+ height: 26px;
+ font-size: 14px;
+ width:100%;
+ padding-left:7px;
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
+ color: #888;
}
-.multiSelect .acol {
- display: table-cell;
- line-height: 1.4;
- min-width: 14px;
+/* helper elements on hover & focus */
+.multiSelect .clearButton:hover,
+.multiSelect .helperButton:hover {
+ border: 1px solid #ccc;
+ color: #999;
+ background-color: #f4f4f4;
+}
+
+.multiSelect .clearButton:focus,
+.multiSelect .helperButton:focus,
+.multiSelect .inputFilter:focus {
+ border: 1px solid #66AFE9 !important;
+ box-shadow: inset 0 0px 1px rgba(0,0,0,.035), 0 0 5px rgba(82,168,236,.7) !important;
}
-label.multiSelect span {
- white-space:nowrap;
- margin: 0;
- padding: 0;
+/* container of multi select items */
+.multiSelect .checkBoxContainer {
display: inline-block;
- -webkit-user-select: none;
+ padding: 8px;
+
+ /* Enable this to set a height limit
+ max-height:200px;
+ overflow-y: scroll;
+ */
+
+}
+
+/* ! to show / hide the checkbox layer above */
+.multiSelect .show {
+ display: block !important;
+}
+
+/* item labels */
+.multiSelect .multiSelectItem {
+ display: block;
+ padding: 3px;
+ color: #444;
+ white-space: nowrap;
+ -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
- user-select: none;
+ user-select: none;
+ border: 1px solid transparent;
+ position: relative;
+ min-width:278px;
}
-/* hide the checkbox away */
-.multiSelect .checkbox {
- position: absolute;
- left: -9999px;
- cursor: pointer;
+/* Item labels: selected - Enable this if you want to apply styling on selected items */
+.multiSelect .multiSelectItem:not(.multiSelectGroup).selected
+{
+ background-image: linear-gradient( #e9e9e9, #f1f1f1 );
+ color: #555;
+ cursor: pointer;
+ border-top: 1px solid #e4e4e4;
+ border-left: 1px solid #e4e4e4;
+ border-right: 1px solid #d9d9d9;
}
-.multiSelect .show {
- display: inline-block;
+/* item labels focus on mouse hover */
+.multiSelect .multiSelectItem:hover,
+.multiSelect .multiSelectGroup:hover {
+ background-image: linear-gradient( #c1c1c1, #999 ) !important;
+ color: #fff !important;
+ cursor: pointer;
+ border: 1px solid #ccc !important;
}
-.multiSelect .hide {
- display: none;
+/* item labels focus using keyboard */
+.multiSelect .multiSelectFocus {
+ background-image: linear-gradient( #c1c1c1, #999 ) !important;
+ color: #fff !important;
+ cursor: pointer;
+ border: 1px solid #ccc !important;
}
-.multiSelect .line {
- margin-bottom: 15px;
+/* change mouse pointer into the pointing finger */
+.multiSelect .multiSelectItem span:hover,
+.multiSelect .multiSelectGroup span:hover
+{
+ cursor: pointer;
}
-.multiSelect .helperButton + .helperButton {
- margin-left: 1px;
+/* ! group labels */
+.multiSelect .multiSelectGroup {
+ display: block;
+ clear: both;
}
-/* On mouse over and focus */
-label.multiSelect input:focus ~ span::after,
-label.multiSelect span:focus::after,
-label.multiSelect span:hover::after {
- /* Enable this if you want some arrow pointer on focus */
- /* content: ' \00AB'; */
+/* right-align the tick mark (✔) */
+.multiSelect .tickMark {
+ display:inline-block;
+ position: absolute;
+ right: 10px;
+ top: 7px;
+ font-size: 10px;
}
-label.multiSelect input:focus ~ span,
-label.multiSelect span:hover {
- color: #333;
- cursor: pointer;
- /* Enable this if you want some arrow pointer on focus */
- /* content: ' \00AB'; */
+/* hide the original HTML checkbox away */
+.multiSelect .checkbox {
+ color: #ddd !important;
+ position: absolute;
+ left: -9999px;
+ cursor: pointer;
+}
+
+/* Some visual aids on item labels
+.multiSelect label input:focus ~ span::after,
+.multiSelect label span:focus::after,
+.multiSelect label span:hover::after {
+ /* Enable this if you want some arrow pointer on focus
+ content: ' \00AB';
}
+*/
-/* for checkboxes currently selected */
-.multiSelect .checkboxSelected {
- color: #000;
- text-shadow: 1px 0px #eee;
+/* Another visual aid - highlight during TAB / SHIFT+TAB keyboard operations
+.multiSelect label input:focus ~ span {
+ color: #ff0000;
+ text-shadow: 1px 0px #ccc;
+ /* Enable this if you want some arrow pointer on focus
+ content: ' \00AB';
}
+*/
/* checkboxes currently disabled */
-.multiSelect.disabled, .multiSelect.disabled:hover {
- color: #ccc;
- cursor: not-allowed;
+.multiSelect .disabled,
+.multiSelect .disabled:hover,
+.multiSelect .disabled label input:hover ~ span {
+ color: #c4c4c4 !important;
+ cursor: not-allowed !important;
}
-/*
- * If you use images in button / checkbox label, you might want to change the image style here.
- */
+/* If you use images in button / checkbox label, you might want to change the image style here. */
.multiSelect img {
vertical-align: middle;
margin-bottom:0px;
generated by cgit v1.1 at 2025-05-10 21:10:57 +0000