@esri/calcite-components 1.0.0-beta.7 → 1.0.0-beta.70

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css

@@ -1,35 +1,155 @@
-body {
-  font-family: "Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
+/* mixins & extensions */
+
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
-.overflow-hidden {
-  overflow: hidden;
+@keyframes in-down {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, -5px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+
+@keyframes in-scale {
+  0% {
+    opacity: 0;
+    transform: scale3D(0.95, 0.95, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3D(1, 1, 1);
+  }
+}
+
+:root {
+  --calcite-animation-timing: 300ms;
+}
+
+.calcite-animate {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
 }
 
-calcite-tab {
+/**
+* Currently only used in Checkbox.
+*/
+
+:root {
+  --calcite-popper-transition: 150ms ease-in-out;
+}
+
+:host([hidden]) {
   display: none;
 }
 
-calcite-tab[is-active] {
-  display: block;
+:host {
+  position: relative;
+  display: flex;
 }
 
-a {
-  color: #007ac2;
+:host([scale=s]) {
+  min-height: 1.5rem;
+}
+
+:host([scale=m]) {
+  min-height: 2rem;
+}
+
+:host([scale=l]) {
+  min-height: 2.75rem;
 }
 
 .tab-nav {
   display: flex;
-  justify-content: var(--calcite-tabs-layout);
+  width: 100%;
   overflow: auto;
+  justify-content: flex-start;
+  -webkit-overflow-scrolling: touch;
+  padding: 0.25rem;
+  margin: -0.25rem;
+}
+
+:host([layout=center]) .tab-nav {
+  justify-content: center;
+}
+
+.tab-nav-active-indicator-container {
+  width: 100%;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  overflow: hidden;
+  height: 0.125rem;
+}
+
+.tab-nav-active-indicator {
+  position: absolute;
+  bottom: 0;
+  display: block;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  background-color: var(--calcite-ui-brand);
+  height: 0.125rem;
+}
+
+:host([position=below]) .tab-nav-active-indicator {
+  bottom: unset;
+  top: 0;
+}
+
+:host([position=below]) .tab-nav-active-indicator-container {
+  bottom: unset;
+  top: 0;
 }
 
-::slotted(calcite-tab-title) {
-  margin-right: var(--calcite-tabs-tab-margin-start);
-  margin-left: var(--calcite-tabs-tab-margin-end);
+:host([bordered]) .tab-nav-active-indicator-container {
+  bottom: unset;
 }
 
-:host([dir=rtl]) ::slotted(calcite-tab-title) {
-  margin-right: var(--calcite-tabs-tab-margin-end);
-  margin-left: var(--calcite-tabs-tab-margin-start);
+:host([bordered][position=below]) .tab-nav-active-indicator-container {
+  bottom: 0;
+  top: unset;
 }