@zanichelli/albe-web-components 2.29.1 → 2.30.0-rc2

package/dist/collection/components/z-popover/styles.css

@@ -1,236 +1,236 @@
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-
-  position: relative;
-  display: inline-block;
-
-  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
-  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
-}
-
-.popover-content-container {
-  box-sizing: border-box;
-  visibility: hidden;
-  position: absolute;
-  min-width: 64px;
-  min-height: 32px;
-  z-index: 999;
-}
-
-.popover-content-container.visible {
-  visibility: visible;
-}
-
-/** Border-radius */
-
-.popover-content-container.border-radius-none {
-  border-radius: 0;
-}
-
-.popover-content-container.border-radius-small {
-  border-radius: var(--border-radius-small);
-}
-
-.popover-content-container.border-radius-medium {
-  border-radius: var(--border-radius);
-}
-
-/*
-Box-shadow
-*/
-
-.popover-content-container.shadow-1 {
-  box-shadow: var(--shadow-1);
-}
-
-.popover-content-container.shadow-2 {
-  box-shadow: var(--shadow-2);
-}
-
-.popover-content-container.shadow-3 {
-  box-shadow: var(--shadow-3);
-}
-
-.popover-content-container.shadow-4 {
-  box-shadow: var(--shadow-4);
-}
-
-.popover-content-container.shadow-6 {
-  box-shadow: var(--shadow-6);
-}
-
-.popover-content-container.shadow-8 {
-  box-shadow: var(--shadow-8);
-}
-
-.popover-content-container.shadow-12 {
-  box-shadow: var(--shadow-12);
-}
-
-.popover-content-container.shadow-16 {
-  box-shadow: var(--shadow-16);
-}
-
-.popover-content-container.shadow-24 {
-  box-shadow: var(--shadow-24);
-}
-
-/*
-Popover-positions
-*/
-
-.popover-content-container.after-down {
-  top: 0;
-  left: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.after-center {
-  top: 50%;
-  left: calc(100% + var(--space-unit));
-  transform: translateY(-50%);
-}
-
-.popover-content-container.after-up {
-  bottom: 0;
-  left: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.below-right {
-  left: 0;
-  top: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.below-center {
-  left: 50%;
-  top: calc(100% + var(--space-unit));
-  transform: translateX(-50%);
-}
-
-.popover-content-container.below-left {
-  right: 0;
-  top: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.before-down {
-  top: 0;
-  right: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.before-center {
-  top: 50%;
-  right: calc(100% + var(--space-unit));
-  transform: translateY(-50%);
-}
-
-.popover-content-container.before-up {
-  bottom: 0;
-  right: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.above-right {
-  left: 0;
-  bottom: calc(100% + var(--space-unit));
-}
-
-.popover-content-container.above-center {
-  left: 50%;
-  bottom: calc(100% + var(--space-unit));
-  transform: translateX(-50%);
-}
-
-.popover-content-container.above-left {
-  right: 0;
-  bottom: calc(100% + var(--space-unit));
-}
-
-/*
-Arrows
-*/
-.popover-content-container:before {
-  display: none;
-  position: absolute;
-  content: "";
-  width: 8px;
-  height: 8px;
-  z-index: -1;
-  background-color: inherit;
-  transform: rotate(45deg);
-}
-
-.popover-content-container.after-down:before {
-  top: 12px;
-  left: -4px;
-  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.after-center:before {
-  top: calc(50% - 4px);
-  left: -4px;
-  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.after-up:before {
-  bottom: 12px;
-  left: -4px;
-  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.below-right:before {
-  left: 12px;
-  top: -4px;
-  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
-}
-
-.popover-content-container.below-center:before {
-  left: calc(50% - 4px);
-  top: -4px;
-  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
-}
-
-.popover-content-container.below-left:before {
-  right: 12px;
-  top: -4px;
-  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
-}
-
-.popover-content-container.before-down:before {
-  top: 12px;
-  right: -4px;
-  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.before-center:before {
-  top: calc(50% - 4px);
-  right: -4px;
-  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.before-up:before {
-  bottom: 12px;
-  right: -4px;
-  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.above-right:before {
-  left: 12px;
-  bottom: -4px;
-  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.above-center:before {
-  left: calc(50% - 4px);
-  bottom: -4px;
-  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-.popover-content-container.above-left:before {
-  right: 12px;
-  bottom: -4px;
-  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
-}
-
-/** Show/Hide arrow */
-.popover-content-container.show-arrow:before {
-  display: block;
-}
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+
+  position: relative;
+  display: inline-block;
+
+  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
+  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
+}
+
+.popover-content-container {
+  box-sizing: border-box;
+  visibility: hidden;
+  position: absolute;
+  min-width: 64px;
+  min-height: 32px;
+  z-index: 999;
+}
+
+.popover-content-container.visible {
+  visibility: visible;
+}
+
+/** Border-radius */
+
+.popover-content-container.border-radius-none {
+  border-radius: 0;
+}
+
+.popover-content-container.border-radius-small {
+  border-radius: var(--border-radius-small);
+}
+
+.popover-content-container.border-radius-medium {
+  border-radius: var(--border-radius);
+}
+
+/*
+Box-shadow
+*/
+
+.popover-content-container.shadow-1 {
+  box-shadow: var(--shadow-1);
+}
+
+.popover-content-container.shadow-2 {
+  box-shadow: var(--shadow-2);
+}
+
+.popover-content-container.shadow-3 {
+  box-shadow: var(--shadow-3);
+}
+
+.popover-content-container.shadow-4 {
+  box-shadow: var(--shadow-4);
+}
+
+.popover-content-container.shadow-6 {
+  box-shadow: var(--shadow-6);
+}
+
+.popover-content-container.shadow-8 {
+  box-shadow: var(--shadow-8);
+}
+
+.popover-content-container.shadow-12 {
+  box-shadow: var(--shadow-12);
+}
+
+.popover-content-container.shadow-16 {
+  box-shadow: var(--shadow-16);
+}
+
+.popover-content-container.shadow-24 {
+  box-shadow: var(--shadow-24);
+}
+
+/*
+Popover-positions
+*/
+
+.popover-content-container.after-down {
+  top: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.after-center {
+  top: 50%;
+  left: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.after-up {
+  bottom: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-right {
+  left: 0;
+  top: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-center {
+  left: 50%;
+  top: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
+}
+
+.popover-content-container.below-left {
+  right: 0;
+  top: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.before-down {
+  top: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.before-center {
+  top: 50%;
+  right: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.before-up {
+  bottom: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-right {
+  left: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-center {
+  left: 50%;
+  bottom: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
+}
+
+.popover-content-container.above-left {
+  right: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+/*
+Arrows
+*/
+.popover-content-container:before {
+  display: none;
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  z-index: -1;
+  background-color: inherit;
+  transform: rotate(45deg);
+}
+
+.popover-content-container.after-down:before {
+  top: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-center:before {
+  top: calc(50% - 4px);
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-up:before {
+  bottom: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.below-right:before {
+  left: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-center:before {
+  left: calc(50% - 4px);
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-left:before {
+  right: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.before-down:before {
+  top: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-center:before {
+  top: calc(50% - 4px);
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-up:before {
+  bottom: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-right:before {
+  left: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-center:before {
+  left: calc(50% - 4px);
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-left:before {
+  right: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+/** Show/Hide arrow */
+.popover-content-container.show-arrow:before {
+  display: block;
+}