@sankhyalabs/ezui 1.1.8 → 1.1.9

package/dist/collection/components/ez-tabselector/ez-tabselector.css

@@ -1,126 +1,126 @@
-@keyframes activate {
-  0% { clip-path: inset(calc(100% - 3px) 50% 0px 50% ); }
-  100% { clip-path: inset(calc(100% - 3px) 0px 0px 0px ); }
-}
-
-:host {
-  display: flex;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-
-  margin-bottom: var(--space--large, 24px);
-  --tab__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); 
-}
-
-.scroll {
-  display: flex;
-  width: 100%;
-  scroll-behavior: smooth;
-  overflow-x: auto;
-}
-
-.scroll.startHidden{
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
-}
-
-.scroll.midle{
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
-.scroll.endHidden{
-  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
-.tab{
-  display: flex;
-  border: none;
-  min-width: 100px;
-  background-color: unset;
-  cursor: pointer;
-  padding: 6px 12px;/*FIXME: Oza - precisamos usar tokens?*/
-  align-items: center;
-  justify-content: center;
-  color: var(--text--primary, #626e82);
-  font-family: var(--font-pattern, "Sora, Algerian");
-  font-size: var(--title--small, 14px);
-}
-
-.tab:focus, .forward-button, .backward-button{
-  outline: none;
-}
-
-.is-active{
-  position: relative;
-  color: var(--color--primary, #008561);
-}
-
-.is-active::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color--primary, #008561);
-  clip-path: inset(calc(100% - 3px) 0px 0px 0px );
-  animation: activate 0.25s ease-in-out;
-}
-
-.is-focused{
-  border: 1px dashed var(--color--primary, #000000c5);
-  /* border-radius: 5px 5px 0px 0px; */
-  /* box-shadow: var(--tab__box--box-shadow); */
-}
-
-.tab-label{
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-shadow: var(--text-shadow);
-  margin-bottom: var(--space--extra-small, 3px);
-}
-
-.forward-button, .backward-button{
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0px;
-  top: 0px;
-  right: 0px;
-  width: 16px;
-  height: 100%;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-
-.backward-button{
-  left: 0px;
-}
-
-.forward-button::after, .backward-button::after{
-  content: '';
-  display: flex;
-  background-color: var(--text--primary, #008561);
-  width: 10px;
-  height: 16px;
-  clip-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
-}
-.backward-button::after{
-  clip-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
-}
-
-.forward-button:hover::after, .backward-button:hover::after{
-  background-color: var(--color--primary, #4e4e4e);
-}
-
-.hidden{
-  display: none;
-}
-
-.scroll::-webkit-scrollbar{
-  display: none;
+@keyframes activate {
+  0% { clip-path: inset(calc(100% - 3px) 50% 0px 50% ); }
+  100% { clip-path: inset(calc(100% - 3px) 0px 0px 0px ); }
+}
+
+:host {
+  display: flex;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+
+  margin-bottom: var(--space--large, 24px);
+  --tab__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); 
+}
+
+.scroll {
+  display: flex;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow-x: auto;
+}
+
+.scroll.startHidden{
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
+}
+
+.scroll.midle{
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.scroll.endHidden{
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.tab{
+  display: flex;
+  border: none;
+  min-width: 100px;
+  background-color: unset;
+  cursor: pointer;
+  padding: 6px 12px;/*FIXME: Oza - precisamos usar tokens?*/
+  align-items: center;
+  justify-content: center;
+  color: var(--text--primary, #626e82);
+  font-family: var(--font-pattern, "Sora, Algerian");
+  font-size: var(--title--small, 14px);
+}
+
+.tab:focus, .forward-button, .backward-button{
+  outline: none;
+}
+
+.is-active{
+  position: relative;
+  color: var(--color--primary, #008561);
+}
+
+.is-active::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color--primary, #008561);
+  clip-path: inset(calc(100% - 3px) 0px 0px 0px );
+  animation: activate 0.25s ease-in-out;
+}
+
+.is-focused{
+  border: 1px dashed var(--color--primary, #000000c5);
+  /* border-radius: 5px 5px 0px 0px; */
+  /* box-shadow: var(--tab__box--box-shadow); */
+}
+
+.tab-label{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-shadow: var(--text-shadow);
+  margin-bottom: var(--space--extra-small, 3px);
+}
+
+.forward-button, .backward-button{
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0px;
+  top: 0px;
+  right: 0px;
+  width: 16px;
+  height: 100%;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+
+.backward-button{
+  left: 0px;
+}
+
+.forward-button::after, .backward-button::after{
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 10px;
+  height: 16px;
+  clip-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
+}
+.backward-button::after{
+  clip-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
+}
+
+.forward-button:hover::after, .backward-button:hover::after{
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+.hidden{
+  display: none;
+}
+
+.scroll::-webkit-scrollbar{
+  display: none;
 }