@ardium-ui/ui 5.0.0-alpha.65 → 5.0.0-alpha.67

package/prebuilt-themes/default/inputs/search-bar.css

@@ -1,135 +0,0 @@
-/**
- * Should be applied to the first element in the component's template.
- */
-:root {
-  --ard-search-bar-gap: 0.625rem;
-  --ard-search-bar-line-height: 1.25;
-  --ard-search-bar-line-height-compact: 1;
-  --ard-search-bar-font-weight: 400;
-  --ard-search-bar-placeholder-opacity: 60%;
-  --ard-search-bar-min-width: 10rem;
-  --ard-search-bar-max-width: 100%;
-  --ard-search-bar-disabled-opacity: 50%;
-}
-
-.ard-search-bar {
-  height: var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem));
-  position: relative;
-  font-family: var(--ard-font-family);
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  gap: var(--ard-search-bar-gap, 0.625rem);
-  cursor: text;
-  box-sizing: border-box;
-  font-size: var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem));
-  line-height: var(--ard-search-bar-line-height, 1.25);
-  font-weight: var(--ard-search-bar-font-weight, 400);
-  padding: var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem));
-  color: var(--ard-search-bar-color, var(--ard-text));
-  min-width: var(--ard-search-bar-min-width, 10rem);
-  max-width: var(--ard-search-bar-max-width, 100%);
-}
-.ard-search-bar .ard-input-container {
-  flex-grow: 1;
-  text-size-adjust: 100%;
-  display: flex;
-  align-items: center;
-}
-.ard-search-bar .ard-input-container .ard-placeholder {
-  font: inherit;
-  opacity: var(--ard-search-bar-placeholder-opacity, 60%);
-  color: var(--ard-search-bar-placeholder-color, var(--ard-text));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  pointer-events: none;
-}
-.ard-search-bar .ard-input-container input {
-  border: none;
-  background: transparent;
-  outline: none;
-  font: inherit;
-  padding: 0;
-  color: inherit;
-  display: block;
-  width: 100%;
-}
-.ard-search-bar.ard-compact {
-  height: var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
-  font-size: var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
-  line-height: var(--ard-search-bar-line-height-compact, 1);
-  padding: var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
-}
-.ard-search-bar ard-clear-button {
-  height: var(--ard-clear-button-size);
-  width: var(--ard-clear-button-size);
-  position: relative;
-}
-.ard-search-bar .ard-clear-btn-wrapper {
-  cursor: pointer;
-  font-size: medium;
-  color: var(--ard-detail);
-  width: var(--ard-clear-button-size);
-  height: var(--ard-clear-button-size);
-  line-height: 1em;
-  border-radius: 999px;
-  border: none;
-  padding: 0;
-  background: transparent;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  outline: none;
-  color: inherit;
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-hitbox {
-  position: absolute;
-  left: -1px;
-  right: -1px;
-  top: -1px;
-  bottom: -1px;
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-focus-overlay {
-  position: absolute;
-  top: calc(-1 * 1px);
-  bottom: calc(-1 * 1px);
-  left: calc(-1 * 1px);
-  right: calc(-1 * 1px);
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  background: currentColor;
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn::before {
-  content: "close";
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-  font-size: 70%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:hover .ard-focus-overlay {
-  opacity: 5%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:focus .ard-focus-overlay {
-  opacity: 8%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:active .ard-focus-overlay {
-  opacity: 15%;
-}
-
-.ard-disabled .ard-search-bar {
-  pointer-events: none;
-  opacity: var(--ard-search-bar-disabled-opacity, 50%);
-}
-
-/*# sourceMappingURL=search-bar.css.map */

package/prebuilt-themes/default/inputs/search-bar.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/search-bar.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAKA;EAEA;EACA;EACA;;;AAGF;EDPE,QCSE;EDRF;EACA;EACA;EACA;EACA;EACA,KCKE;EDJF;EACA;EACA,WCGE;EDFF,aCIE;EDHF,aCKE;EDJF,SCKE;EDJF,OCME;EAIF;EACA;;ADTA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCFF;EDGE,OCJF;EDKE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCnCA;EDoCA,WCjCA;EDkCA,aChCA;EDiCA,SC9BA;;AClCF;EACE,QCmCgB;EDlChB,OCkCgB;EDjChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OC0BgB;EDzBhB,QCyBgB;EDxBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADlBN;EACE;EACA","file":"search-bar.css"}

package/themes/default/inputs/search-bar.scss

@@ -1,55 +0,0 @@
-@use './shared' as inputMixin;
-@use '../mixins' as defaultMixins;
-@use '../clear-button' as CB;
-@use '../../variables' as ARD;
-
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-search-bar-height: ;
-  // --ard-search-bar-height-compact: ;
-  --ard-search-bar-gap: 0.625rem;
-  // --ard-search-bar-font-size: ;
-  // --ard-search-bar-font-size-compact: ;
-  --ard-search-bar-line-height: 1.25;
-  --ard-search-bar-line-height-compact: 1;
-  --ard-search-bar-font-weight: 400;
-  // --ard-search-bar-padding: ;
-  // --ard-search-bar-padding-compact: ;
-  // --ard-search-bar-color: ;
-  // --ard-search-bar-placeholder-color: ;
-  --ard-search-bar-placeholder-opacity: 60%;
-
-  --ard-search-bar-min-width: 10rem;
-  --ard-search-bar-max-width: 100%;
-  --ard-search-bar-disabled-opacity: 50%;
-}
-
-.ard-search-bar {
-  @include inputMixin.genericInput(
-    var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem)),
-    var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
-    var(--ard-search-bar-gap, 0.625rem),
-    var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem)),
-    var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
-    var(--ard-search-bar-line-height, 1.25),
-    var(--ard-search-bar-line-height-compact, 1),
-    var(--ard-search-bar-font-weight, 400),
-    var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
-    var(--ard-search-bar-color, #{ARD.$text}),
-    var(--ard-search-bar-placeholder-color, #{ARD.$text}),
-    var(--ard-search-bar-placeholder-opacity, 60%)
-  );
-  min-width: var(--ard-search-bar-min-width, 10rem);
-  max-width: var(--ard-search-bar-max-width, 100%);
-
-  @include CB.clearButton();
-}
-//! disabled state
-.ard-disabled {
-  .ard-search-bar {
-    pointer-events: none;
-    opacity: var(--ard-search-bar-disabled-opacity, 50%);
-  }
-}