@sankhyalabs/sankhyablocks 1.4.0-beta.1 → 1.4.0-beta.11

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.css

@@ -0,0 +1,272 @@
+@keyframes activate {
+  0% {
+    clip-path: inset(calc(100% - 3px) 50% 0px 50%);
+  }
+
+  100% {
+    clip-path: inset(calc(100% - 3px) 0px 0px 0px);
+  }
+}
+
+:host {
+  /*@doc Contém o ícone de voltar para a aba anterior.*/
+  --snk-tab-config--backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="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"/></svg>');
+  /*@doc Contém o ícone de avançar para a aba posterior.*/
+  --snk-tab-config--forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="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"/></svg>');
+
+  display: flex;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tab-config__scroll {
+  display: flex;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tab-config__scroll--start-hidden {
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
+}
+
+.tab-config__scroll--middle {
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.tab-config__scroll--end-hidden {
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.tab-config__lower-bar {
+  position: absolute;
+  left: 0%;
+  right: 0%;
+  top: 91%;
+  bottom: 0%;
+  border-radius: 2px;
+
+  /*public*/
+  background: var(--color--disable-primary);
+  border: 2px solid var(--color--disable-primary)
+}
+
+.tab-config__tab {
+  display: flex;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  min-width: fit-content;
+
+  /*public*/
+  color: var(--text--primary, #626e82);
+  font-family: var(--font-pattern, "Roboto");
+  font-size: var(--title--small, 14px);
+  padding: var(--space--small, 6px) var(--space--medium, 12px);
+}
+
+.tab-config__tab:focus,
+.tab-config__forward-button,
+.tab-config__backward-button {
+  outline: none;
+}
+
+.tab-config__tab--is-active {
+  position: relative;
+
+  /*public*/
+  color: var(--color--primary, #008561);
+}
+
+.tab-config__tab:hover {
+  /*public*/
+  color: var(--color--secondary, #383c45);
+}
+
+.tab-config__tab--is-active:hover {
+  /*public*/
+  color: var(--color--primary, #008561);
+}
+
+.tab-config__tab--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;
+}
+
+.tab-config__tab--is-focused {
+  /*public*/
+  border: 1px dashed var(--color--primary, #000000c5);
+}
+
+.tab-config__tab-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  /*public*/
+  text-shadow: var(--text-shadow);
+  margin-bottom: var(--space--extra-small, 3px);
+}
+
+.tab-config__forward-button,
+.tab-config__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;
+}
+
+.tab-config__new-button {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0px;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+
+.tab-config__new-button ez-icon {
+  --ez-icon--color: var(--color--secondary-700, #1C1D22);
+}
+
+.tab-config__backward-button {
+  left: 0px;
+  box-shadow: 10px 10px 5px 5px white;
+  background: white;
+}
+
+.tab-config__forward-button {
+  box-shadow: 10px 10px 5px 20px white;
+  background: white;
+}
+
+.tab-config__forward-button::after,
+.tab-config__backward-button::after {
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 10px;
+  height: 16px;
+}
+
+.tab-config__forward-button::after {
+  /*public*/
+  -webkit-mask-image: var(--snk-tab-config--forward-icon);
+  mask-image: var(--snk-tab-config--forward-icon);
+}
+
+.tab-config__backward-button::after {
+  /*public*/
+  -webkit-mask-image: var(--snk-tab-config--backward-icon);
+  mask-image: var(--snk-tab-config--backward-icon);
+}
+
+.tab-config__forward-button:hover::after,
+.tab-config__backward-button:hover::after {
+  /*public*/
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+.tab-config__new-button:hover ez-icon {
+  --ez-icon--color: var(--color--primary, #4e4e4e);
+}
+
+.tab-config__hidden {
+  display: none;
+}
+
+.tab-config__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-config__left-icon {
+  /*public*/
+  padding-right: var(--space--small);
+  --ez-icon--color: var(--text--disable);
+}
+
+.tab-config__left-icon--eye-off {
+  /*public*/
+  --ez-icon--color: var(--text--disable, #AFB6C0);
+}
+
+.tab-config__right-icon {  
+  visibility: hidden;
+
+  /*public*/
+  padding-left: var(--space--small);
+}
+
+.tab-config__tab:hover .tab-config__right-icon {
+  visibility: visible;
+}
+
+.tab-config__tab--is-active .tab-config__right-icon{
+  visibility: visible;
+
+  /*public*/
+  --ez-icon--color: var(--color--primary);
+}
+
+.tab-config__tab:hover .tab-config__right-icon{
+  /*public*/
+  --ez-icon--color: var(--color--secondary, #383c45);
+}
+
+.tab-config__tab--is-active:hover .tab-config__right-icon{
+  /*public*/
+  --ez-icon--color: var(--color--primary);
+}
+
+.tab-config__actions-button {
+  --ez-actions-button__btn-action--min-width: 100px;
+  visibility: hidden;
+  opacity: 0;
+  transition:visibility 1s linear,opacity 0.3s linear;
+}
+
+.tab-config__tab:hover .tab-config__actions-button {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.2s linear, opacity 0.10s linear;
+}
+
+[data-draggable-element] {
+  cursor: grab;
+}
+
+.tab-config__tab-label-disabled {
+  /*public*/
+  color: var(--text--disable, #AFB6C0);
+}
+
+.tab-config__slot {
+  /*public*/
+  margin-left: var(--space--small, 6px);
+}