@zohodesk/components 1.0.0-temp-52 → 1.0.0-temp-55

package/es/Tooltip/Tooltip.module.css

@@ -1,103 +1,104 @@
-.tooltiptext {
-  position: fixed;
-  z-index: 9999999; /*Hook for editor alert*/
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-  pointer-events: none;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  border-radius: var(--zd_size4);
-}
-.tooltipcont {
-  background-color: var(--zdt_tooltip_default_bg);
-  color: var(--zdt_tooltip_default_text);
-  padding: 0 var(--zd_size10);
-  font-size: var(--zd_font_size13);
-  font-family: var(--zd_semibold);
-  word-break: break-word;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
-  max-width: 420px;
-  line-height: var(--zd_size20);
-  min-height: var(--zd_size24);
-  white-space: normal;
-  overflow: hidden;
-}
-/*rtl:begin:ignore*/
-.tooltiparrow {
-  content: '';
-  position: absolute;
-  top: 0;
-  border-top-left-radius: 3px;
-}
-.arrowUp,
-.arrowDown {
-  width: 11px;
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-}
-.arrowDown {
-  margin-top: -4px !important; /* put important because of '.wms-mainui *' have margin: 0; */
-}
-.arrowLeft,
-.arrowRight {
-  width: 11px;
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-}
-.arrowRight {
-  margin-left: -2px;
-}
-.arrowLeft {
-  margin-left: 1px;
-}
-.arrowUp {
-  transform: rotate(45deg);
-}
-.arrowDown {
-  transform: rotate(225deg);
-}
-.arrowLeft {
-  transform: rotate(315deg) translateY(-50%);
-}
-.arrowRight {
-  transform: rotate(135deg) translateY(50%);
-}
-/*rtl:end:ignore*/
-@keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-moz-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-ms-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+.tooltiptext {
+  position: fixed;
+  z-index: 9999999; /*Hook for editor alert*/
+  pointer-events: none;
+  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+  border-radius: var(--zd_size4);
+}[dir=ltr] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}[dir=rtl] .tooltiptext {
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
+}
+.tooltipcont {
+  color: var(--zdt_tooltip_default_text);
+  font-size: var(--zd_font_size13);
+  font-family: var(--zd_semibold);
+  word-break: break-word;
+  max-width: 420px;
+  line-height: var(--zd_size20);
+  min-height: var(--zd_size24);
+  white-space: normal;
+  overflow: hidden;
+  background-color: var(--zdt_tooltip_default_bg);
+  padding: 0 var(--zd_size10);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
+}
+.tooltiparrow {
+  content: '';
+  position: absolute;
+  top: 0;
+  border-top-left-radius: 3px;
+}
+.arrowUp,
+.arrowDown {
+  width: 11px;
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+}
+.arrowDown {
+  margin-top: -4px !important; /* put important because of '.wms-mainui *' have margin: 0; */
+}
+.arrowLeft,
+.arrowRight {
+  width: 11px;
+  height: 11px;
+  border-top: solid 6px var(--zdt_tooltip_default_bg);
+  border-left: solid 6px var(--zdt_tooltip_default_bg);
+  border-right: solid 6px transparent;
+  border-bottom: solid 6px transparent;
+}
+.arrowRight {
+  margin-left: -2px;
+}
+.arrowLeft {
+  margin-left: 1px;
+}
+.arrowUp {
+  transform: rotate(45deg);
+}
+.arrowDown {
+  transform: rotate(225deg);
+}
+.arrowLeft {
+  transform: rotate(315deg) translateY(-50%);
+}
+.arrowRight {
+  transform: rotate(135deg) translateY(50%);
+}
+@keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-ms-keyframes tooltip-grow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/es/beta/FocusRing/FocusRing.module.css

@@ -1,127 +1,152 @@
-.input{
-  width:100%;
-  border: 1px;
-  border-bottom: 1px solid #ddd;
-  outline: 0
-}
-.badFocus {
-  display: inline-block;
-  margin-top: 10px;
-  border-radius: 2px;
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-  margin-right: 5px;
-  margin-bottom: 30px;
-  padding: 2px;
-  margin: 10px;
-}
-:focus{
-  outline: 0;
-}
-.goodFocus {
-  display: inline-block;
-  border-radius: 2px;
-  padding: 2px;
-  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
-}
-.inpFocus{
-  padding: 5px;
-  border-radius: 2px;
-  margin: 10px;
-  width: auto;
-}
-.mouseFocus,.inpFocus:focus{
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-}
-.tabFocus,.tabFocus:focus{
-  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
-}
-.freezeLayer{
-  position: fixed;
-  left:0;
-  right: 0;
-  top:0;
-  bottom: 0;
-  background-color: rgba(20,20,20,.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.element{
-  margin:1rem 0 1rem .5rem;
-}
-.container{
-  background-color: #fff;
-  border-radius: 10px;
-  min-width: 400px;
-  padding: 20px;
-  transition: .3s ease-in-out;
-  position: absolute;
-}
-.formContainer{
-  display: flex;
-  flex-direction: column;
-}
-label{
-  font-weight: 400;
-  font-size: 20px;
-}
-.sOpt:focus{
-  background-color: red;
-}
-.button {
-  -webkit-appearance: none;
-  appearance: none;
-  background: green;
-  border: none;
-  color: white;
-  font-size: 14px;
-  padding: 4px 8px;
-}
-
-.focus-ring {
-  outline: 2px solid dodgerblue;
-  outline-offset: 2px;
-}
-.box{
-  display: flex;
-  flex-direction: column;
-}
-.box1{
-  transform: scale(1);
-}
-.manage{
-  right: 0;
-}
-.primary{
-    background: #00aefe;
-    color: #fff;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: 13px;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #00aefe;
-    margin:10px
-  }
-  .secondary{
-    background: #fff;
-    color: #8c8c8c;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    text-decoration: none;
-    font-size: 13px;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #8c8c8c
-  }
-  
-  .primary:focus{
-    box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  .secondary:focus{
-    box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+.input{
+  width:100%;
+  outline: 0;
+  border: 1px;
+  border-bottom: 1px solid #ddd
+}
+.badFocus {
+  display: inline-block;
+  margin-top: 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+  margin-bottom: 30px;
+  padding: 2px;
+  margin: 10px;
+}
+[dir=ltr] .badFocus {
+  margin-right: 5px;
+}
+[dir=rtl] .badFocus {
+  margin-left: 5px;
+}
+:focus{
+  outline: 0;
+}
+.goodFocus {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 2px;
+  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
+}
+.inpFocus{
+  width: auto;
+  padding: 5px;
+  border-radius: 2px;
+  margin: 10px;
+}
+.mouseFocus, .inpFocus:focus{
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+}
+.tabFocus, .tabFocus:focus{
+  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
+}
+.freezeLayer{
+  position: fixed;
+  top:0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(20,20,20,.5);
+}
+[dir=ltr] .freezeLayer{
+  left:0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer{
+  right:0;
+  left: 0;
+}
+[dir=ltr] .element{
+  margin:1rem 0 1rem .5rem;
+}
+[dir=rtl] .element{
+  margin:1rem .5rem 1rem 0;
+}
+.container{
+  min-width: 400px;
+  transition: .3s ease-in-out;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+}
+.formContainer{
+  display: flex;
+  flex-direction: column;
+}
+label{
+  font-weight: 400;
+  font-size: 20px;
+}
+.sOpt:focus{
+  background-color: red;
+}
+.button {
+  -webkit-appearance: none;
+  appearance: none;
+  color: white;
+  font-size: 14px;
+  background: green;
+  border: none;
+  padding: 4px 8px;
+}
+
+.focus-ring {
+  outline: 2px solid dodgerblue;
+  outline-offset: 2px;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+}
+.box1{
+  transform: scale(1);
+}
+[dir=ltr] .manage{
+  right: 0;
+}
+[dir=rtl] .manage{
+  left: 0;
+}
+.primary{
+    color: #fff;
+    text-decoration: none;
+    font-size: 13px;
+    background: #00aefe;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #00aefe;
+    margin:10px
+  }
+  .secondary{
+    color: #8c8c8c;
+    text-decoration: none;
+    font-size: 13px;
+    background: #fff;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #8c8c8c
+  }
+  
+  [dir=ltr] .primary:focus{
+  box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  [dir=rtl] .primary:focus{
+    box-shadow: -2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  [dir=ltr] .secondary:focus{
+  box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+  }
+  
+  [dir=rtl] .secondary:focus{
+    box-shadow: -2px 2px 6px 0 rgba(39, 40, 41, 0.493)
   }