@zanichelli/albe-web-components 7.3.2 → 7.3.4

package/dist/collection/components/inputs/z-combobox/styles.css

@@ -1,197 +1,197 @@
-:host {
-  display: block;
-}
-
-:host > div.fixed {
-  position: relative;
-}
-
-:host > div > .header {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  min-height: 42px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 calc(var(--space-unit) * 1.5);
-  border: var(--border-size-small) solid var(--bg-grey-700);
-  margin: 0;
-  background-color: var(--bg-white);
-  border-radius: var(--border-radius-small);
-  cursor: pointer;
-}
-
-:host([size="small"]) > div > .header {
-  min-height: 34px;
-  font-size: var(--font-size-2);
-}
-
-:host([size="x-small"]) > div > .header {
-  min-height: 30px;
-  font-size: var(--font-size-2);
-}
-
-:host([size="x-small"]) > div > .header p.body-3 {
-  padding: calc(var(--space-unit) * 0.5) 0;
-}
-
-:host > div > .header:hover {
-  outline: var(--border-size-medium) solid var(--gray700);
-  outline-offset: -2px;
-}
-
-:host > div.open > div.header:focus:focus-visible {
-  box-shadow: none;
-}
-
-:host > div > div.header:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
-:host > div > .header > p.body-3 {
-  padding: var(--space-unit) 0;
-  margin: 0;
-  color: var(--text-grey-800);
-}
-
-:host > div > .header > p.body-3 > span {
-  font-weight: var(--font-sb);
-}
-
-:host > div > .header > z-icon {
-  fill: var(--text-grey-800);
-  transform: rotate(360deg);
-  transition: all 200ms linear;
-}
-
-:host > div > .header > z-icon.small,
-:host > div > .header > z-icon.x-small {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-}
-
-:host > div.open > .header {
-  border: var(--border-size-small) solid var(--blue500);
-  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
-}
-
-:host > div.disabled {
-  pointer-events: none;
-}
-
-:host > div.disabled .header {
-  border-color: var(--color-disabled01);
-  fill: var(--color-disabled01);
-}
-
-:host > div.disabled .header > p.body-3 {
-  color: var(--text-grey-700);
-}
-
-:host > div.disabled .header > z-icon:last-child {
-  fill: var(--color-disabled01);
-}
-
-:host > div.open > .header > z-icon {
-  fill: var(--text-grey-800);
-  transform: rotate(180deg);
-  transition: all 200ms linear;
-}
-
-:host > div.open > div.open-combo-data {
-  position: relative;
-  z-index: 12;
-  padding: var(--space-unit) calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--gray200);
-  border-top: 0;
-  background-color: var(--bg-white);
-  border-radius: 0;
-}
-
-:host > div.open > div.open-combo-data > div {
-  overflow: auto;
-  max-height: 235px;
-  padding: 0;
-  scrollbar-color: var(--myz-blue) var(--gray200);
-  scrollbar-width: thin;
-}
-
-:host > div.open > div.open-combo-data > z-input {
-  width: 100%;
-  margin-bottom: calc(var(--space-unit) * 2);
-}
-
-:host > div.open > div.open-combo-data > div > ul {
-  max-height: 235px;
-  padding: 0 3px; /* needed for checkbox focus shadow */
-  margin: 0;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);
-  border-radius: var(--border-radius);
-}
-
-::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--myz-blue);
-  border-radius: var(--border-radius);
-}
-
-:host > div.open > z-input {
-  position: relative;
-  z-index: 1;
-  width: 238px;
-  margin: 0 calc(var(--space-unit) * 2);
-  color: var(--myz-blue);
-}
-
-:host > div.open > div.open-combo-data > div.search {
-  overflow: hidden;
-  max-height: auto;
-  margin-top: 0;
-  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
-}
-
-:host > div.open > div.open-combo-data > div.search > ul {
-  overflow: auto;
-  max-height: 180px;
-  padding: var(--space-unit) calc(var(--space-unit) * 2);
-  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
-  scrollbar-width: thin;
-}
-
-:host > div.open > div.open-combo-data > div.search > div {
-  display: flex;
-  justify-content: center;
-}
-
-:host > div.open > div.open-combo-data > div.search > div > a {
-  display: inline-block;
-  height: 44px;
-  color: var(--myz-blue);
-  cursor: pointer;
-  font-family: var(--dashboard-font);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  line-height: 44px;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-:host > div.open > div.open-combo-data > div.check-all-wrapper {
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
-  border-bottom: var(--border-size-small) solid var(--gray800);
-  margin-bottom: var(--space-unit);
-  text-align: left;
-}
-
-:host([size="small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
-  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
-}
-
-:host([size="x-small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
-  padding: var(--space-unit) calc(var(--space-unit) * 0.5);
-}
+:host {
+  display: block;
+}
+
+:host > div.fixed {
+  position: relative;
+}
+
+:host > div > .header {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  border: var(--border-size-small) solid var(--bg-grey-700);
+  margin: 0;
+  background-color: var(--bg-white);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+}
+
+:host([size="small"]) > div > .header {
+  min-height: 34px;
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) > div > .header {
+  min-height: 30px;
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) > div > .header p.body-3 {
+  padding: calc(var(--space-unit) * 0.5) 0;
+}
+
+:host > div > .header:hover {
+  outline: var(--border-size-medium) solid var(--gray700);
+  outline-offset: -2px;
+}
+
+:host > div.open > div.header:focus:focus-visible {
+  box-shadow: none;
+}
+
+:host > div > div.header:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+:host > div > .header > p.body-3 {
+  padding: var(--space-unit) 0;
+  margin: 0;
+  color: var(--text-grey-800);
+}
+
+:host > div > .header > p.body-3 > span {
+  font-weight: var(--font-sb);
+}
+
+:host > div > .header > z-icon {
+  fill: var(--text-grey-800);
+  transform: rotate(360deg);
+  transition: all 200ms linear;
+}
+
+:host > div > .header > z-icon.small,
+:host > div > .header > z-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host > div.open > .header {
+  border: var(--border-size-small) solid var(--blue500);
+  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
+}
+
+:host > div.disabled {
+  pointer-events: none;
+}
+
+:host > div.disabled .header {
+  border-color: var(--color-disabled01);
+  fill: var(--color-disabled01);
+}
+
+:host > div.disabled .header > p.body-3 {
+  color: var(--text-grey-700);
+}
+
+:host > div.disabled .header > z-icon:last-child {
+  fill: var(--color-disabled01);
+}
+
+:host > div.open > .header > z-icon {
+  fill: var(--text-grey-800);
+  transform: rotate(180deg);
+  transition: all 200ms linear;
+}
+
+:host > div.open > div.open-combo-data {
+  position: relative;
+  z-index: 12;
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+  border: var(--border-size-small) solid var(--gray200);
+  border-top: 0;
+  background-color: var(--bg-white);
+  border-radius: 0;
+}
+
+:host > div.open > div.open-combo-data > div {
+  overflow: auto;
+  max-height: 235px;
+  padding: 0;
+  scrollbar-color: var(--myz-blue) var(--gray200);
+  scrollbar-width: thin;
+}
+
+:host > div.open > div.open-combo-data > z-input {
+  width: 100%;
+  margin-bottom: calc(var(--space-unit) * 2);
+}
+
+:host > div.open > div.open-combo-data > div > ul {
+  max-height: 235px;
+  padding: 0 3px; /* needed for checkbox focus shadow */
+  margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);
+  border-radius: var(--border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--myz-blue);
+  border-radius: var(--border-radius);
+}
+
+:host > div.open > z-input {
+  position: relative;
+  z-index: 1;
+  width: 238px;
+  margin: 0 calc(var(--space-unit) * 2);
+  color: var(--myz-blue);
+}
+
+:host > div.open > div.open-combo-data > div.search {
+  overflow: hidden;
+  max-height: auto;
+  margin-top: 0;
+  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
+}
+
+:host > div.open > div.open-combo-data > div.search > ul {
+  overflow: auto;
+  max-height: 180px;
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
+  scrollbar-width: thin;
+}
+
+:host > div.open > div.open-combo-data > div.search > div {
+  display: flex;
+  justify-content: center;
+}
+
+:host > div.open > div.open-combo-data > div.search > div > a {
+  display: inline-block;
+  height: 44px;
+  color: var(--myz-blue);
+  cursor: pointer;
+  font-family: var(--dashboard-font);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  line-height: 44px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+:host > div.open > div.open-combo-data > div.check-all-wrapper {
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);
+  border-bottom: var(--border-size-small) solid var(--gray800);
+  margin-bottom: var(--space-unit);
+  text-align: left;
+}
+
+:host([size="small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
+}
+
+:host([size="x-small"]) > div.open > div.open-combo-data > div.check-all-wrapper {
+  padding: var(--space-unit) calc(var(--space-unit) * 0.5);
+}