@watermarkinsights/ripple 5.6.0-0 → 5.6.0-2

package/dist/collection/components/selects/priv-option-list/priv-option-list.css

@@ -0,0 +1,104 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+.search {
+  box-sizing: border-box;
+  border-bottom: 2px solid;
+  border-color: var(--wmcolor-select-option-border);
+  padding: 1.25rem;
+}
+.search .searchfield-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  width: 100%;
+  padding: 0 0.75rem;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid;
+  border-color: var(--wmcolor-select-search-border);
+}
+.search .searchfield-wrapper:focus, .search .searchfield-wrapper.focus {
+  outline: 2px solid var(--wmcolor-input-border-focus);
+  border-color: var(--wmcolor-input-border-focus);
+}
+.search .searchfield {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  margin-left: 0.25rem;
+}
+.search .icon:before {
+  display: inline-block;
+  font: normal normal normal 24px/1 "Material Design Icons";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f349";
+  color: var(--wmcolor-select-search-icon);
+  font-size: 1.12rem;
+}
+
+.search-results-message {
+  padding: 1.25rem;
+  color: var(--wmcolor-select-searchresults-text);
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+.select-all {
+  width: 100%;
+  cursor: pointer;
+  padding: 1.25rem;
+  border: none;
+  margin: 0;
+  border-bottom: 2px solid;
+  border-color: var(--wmcolor-select-selectall-border);
+  background: var(--wmcolor-select-selectall-background);
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  text-align: start;
+  font-weight: 500;
+  color: var(--wmcolor-select-selectall-text);
+  user-select: none;
+}
+.select-all:hover, .select-all:focus {
+  outline: none;
+  background: #f4f4f4;
+}