@sankhyalabs/ezui 1.1.8 → 1.1.9

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

@@ -1,266 +1,266 @@
-:host {
-
-  /***************
-     Regular mode
-  ***************/
-  /*dimensions */
-  /*@doc Define a largura do box do checkbox */
-  --chk--box--width: 18px;
-  /*@doc Define a altura do box do checkbox */
-  --chk--box--height: 18px;
-  --chk--width: calc(var(--chk--box--width) + 14px);
-  --chk--height: calc(var(--chk--box--width) + 14px);
-  
-  /*general*/
-  --chk--border-radius: var(--border--radius-small);
-  
-  /*box*/
-  --chk--checked--background-color: var(--color--primary-200);
-  --chk--focus--background-color: var(--color--strokes, #FFFFFF);
-  --chk--hover--background-color: var(--background--medium);
-  --chk--checked--disabled--background-color: var(--color--disable-secondary);
-  
-  --chk--border:  var(--border--medium) var(--title--primary);
-  --chk--disabled--border: var(--border--medium) var(--color--strokes);
-  --chk--checked--border: var(--border--medium) var(--color--primary);
-  
-  
-  --chk--checked--hover--background-color: var(--color--primary-200);
-  --chk--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
-  
-  /*check*/
-  --chk--check--clip-path: polygon(40% 70%, 46% 73%, 51% 71%, 93% 21%, 93% 16%, 83% 8%, 76% 9%, 47% 45%, 43% 44%, 38% 39%, 30% 37%, 22% 47%, 23% 54%, 40% 70%);
-  --chk--check--background-color: var(--color--primary);
-  --chk--check--disabled--background-color: var(--color--strokes);
-  
-  /***************
-    Switch mode
-  ***************/
-  /*dimensions */
-  --swt--slider--width: 34px;
-  --swt--slider--height: 14px;
-  --swt--pin--width: 20px;
-  --swt--pin--height: 20px;
-  --swt--focus--width: 32px;
-  --swt--focus--height: 32px;
-  
-  /*background*/
-  --swt--background-color: var(--color--strokes);
-  --swt--disabled--background-color: var(--color--disable-secondary);
-  --swt--checked--background-color: var(--color--primary-300);
-    
-  /*pin*/
-  --swt--pin--background-color: var(--background--xlight);
-  --swt--pin--disabled--background-color: var(--color--disable-secondary);
-  --swt--pin--checked--background-color: var(--color--primary);
-  --swt--pin--checked--disabled--background-color: #E8F7F4;
-  --swt--pin--focus--background-color: var(--text--disable);
-  --swt--pin--checked--focus--background-color: var(--color--primary);
-  
-  /***************
-     host style  
-  ***************/
-  /*private*/
-  width: 100%;
-}
-
-/******** REGULAR MODE ********/
-/*---------------------------unchecked------------------------------*/
-input.regularMode {
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  cursor: pointer;
-  border-radius: 50%;
-
-  /*public*/
-  width: var(--chk--width);
-  height: var(--chk--height);
-}
-
-
-input.regularMode:enabled:hover{
-  /*public*/
-  background-color: var(--chk--hover--background-color);
-}
-
-input.regularMode:enabled:focus{
-  /*private*/
-  outline: none;
-  
-  /*public*/
-  background-color: var(--chk--focus--background-color);
-}
-
-input.regularMode:disabled{
-  /*private*/
-  cursor: auto;
-  background: none;
-}
-
-input.regularMode::before{
-  /*private*/
-  box-sizing: border-box;
-  content: "";
-  display: block;
-
-  /*public*/
-  width: var(--chk--box--width);
-  height: var(--chk--box--height);
-  border-radius: var(--chk--border-radius);
-  border: var(--chk--border);
-}
-
-input.regularMode:disabled::before{
-  /*public*/
-  border: var(--chk--disabled--border);
-}
-
-/*-------------------------------checked---------------------------------*/
-input.regularMode:checked:enabled:hover{
-  /*public*/
-  background-color: var(--chk--checked--hover--background-color);
-}
-
-input.regularMode:checked:enabled:focus{
-  /*public*/
-  background-color: var(--chk--checked--focus--background-color);
-}
-
-input.regularMode:checked::before{
-  /*public*/
-  border: var(--chk--checked--border);
-  background-color: var(--chk--checked--background-color);
-}
-
-input.regularMode:checked:disabled:before{
-  /*public*/
-  border: var(--chk--disabled--border);
-  background-color: var(--chk--checked--disabled--background-color);
-}
-
-input.regularMode:checked::after{
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  content: "";
-  position: absolute;
-  margin-top: 3px;
-  margin-left: -1px;
-  width: 12px;
-  height: 12px;
-  background-color: var(--chk--check--background-color);
-
-  /*public*/
-  clip-path: var(--chk--check--clip-path);
-}
-
-input.regularMode:checked:disabled::after{
-  /*public*/
-  background-color: var(--chk--check--disabled--background-color);
-}
-
-/******** SWITCH MODE ********/
-/*-------------------------------OFF---------------------------------*/
-input.switchMode{
-  /*private*/
-  appearance: none;
-  position: relative;
-  outline: none;
-  cursor: pointer;
-  border-radius: 20px;
-  border: none;
-  transition: background-color var(--transition);
-
-  /*public*/
-  width: var(--swt--slider--width);
-  height: var(--swt--slider--height);
-  background-color: var(--swt--background-color);
-}
-
-input.switchMode:disabled{
-  /*public*/
-  background-color:var(--swt--disabled--background-color);
-}
-
-input.switchMode::after{
-  /*private*/
-  content: "";
-  display: block;
-  position: absolute;
-  box-shadow: var(--shadow);
-  transition: transform var(--transition);
-  transition: background-color var(--transition);
-  transform: translateY(-3px);
-  border-radius: 50%;
-
-  /*public*/
-  width: var(--swt--pin--width);
-  height: var(--swt--pin--height);
-  background-color: var(--swt--pin--background-color);
-}
-
-input.switchMode:disabled::after{
-  /*public*/
-  background-color: var(--swt--pin--disabled--background-color);
-}
-
-/*-------------------------------ON---------------------------------*/
-input.switchMode:checked{
-  /*private*/
-  transition: background-color var(--transition);
-
-  /*public*/
-  background-color: var(--swt--checked--background-color);
-}
-
-input.switchMode::before{
-   /*private*/
-  display: block;
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-
-   /*public*/
-  width: var(--swt--focus--width);
-  height: var(--swt--focus--height);
-  top: calc((var(--swt--slider--height) - var(--swt--focus--height)) / 2);
-  left: calc((var(--swt--pin--width) - var(--swt--focus--width))/2);
-  background-color: var(--swt--pin--focus--background-color);
-}
-
-input.switchMode:focus::before{
-   /*private*/
-  opacity: 0.24;
-  transition: opacity var(--transition);
-}
-
-input.switchMode:checked:focus::before{
-  /*private*/
-  background-color: var(--swt--pin--checked--focus--background-color);
-  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width)));
-}
-
-input.switchMode:checked::after{
-  /*private*/
-  transition: transform var(--transition);
-  transition: background-color var(--transition);
-  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width))) translateY(-3px);
-  box-shadow: var(--shadow);
-  
-  /*public*/
-  background-color: var(--swt--pin--checked--background-color);
-}
-
-input.switchMode:checked:disabled::after{
-  /*public*/
-  background-color: var(--swt--pin--checked--disabled--background-color);
+:host {
+
+  /***************
+     Regular mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do box do checkbox */
+  --chk--box--width: 18px;
+  /*@doc Define a altura do box do checkbox */
+  --chk--box--height: 18px;
+  --chk--width: calc(var(--chk--box--width) + 14px);
+  --chk--height: calc(var(--chk--box--width) + 14px);
+  
+  /*general*/
+  --chk--border-radius: var(--border--radius-small);
+  
+  /*box*/
+  --chk--checked--background-color: var(--color--primary-200);
+  --chk--focus--background-color: var(--color--strokes, #FFFFFF);
+  --chk--hover--background-color: var(--background--medium);
+  --chk--checked--disabled--background-color: var(--color--disable-secondary);
+  
+  --chk--border:  var(--border--medium) var(--title--primary);
+  --chk--disabled--border: var(--border--medium) var(--color--strokes);
+  --chk--checked--border: var(--border--medium) var(--color--primary);
+  
+  
+  --chk--checked--hover--background-color: var(--color--primary-200);
+  --chk--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+  
+  /*check*/
+  --chk--check--clip-path: polygon(40% 70%, 46% 73%, 51% 71%, 93% 21%, 93% 16%, 83% 8%, 76% 9%, 47% 45%, 43% 44%, 38% 39%, 30% 37%, 22% 47%, 23% 54%, 40% 70%);
+  --chk--check--background-color: var(--color--primary);
+  --chk--check--disabled--background-color: var(--color--strokes);
+  
+  /***************
+    Switch mode
+  ***************/
+  /*dimensions */
+  --swt--slider--width: 34px;
+  --swt--slider--height: 14px;
+  --swt--pin--width: 20px;
+  --swt--pin--height: 20px;
+  --swt--focus--width: 32px;
+  --swt--focus--height: 32px;
+  
+  /*background*/
+  --swt--background-color: var(--color--strokes);
+  --swt--disabled--background-color: var(--color--disable-secondary);
+  --swt--checked--background-color: var(--color--primary-300);
+    
+  /*pin*/
+  --swt--pin--background-color: var(--background--xlight);
+  --swt--pin--disabled--background-color: var(--color--disable-secondary);
+  --swt--pin--checked--background-color: var(--color--primary);
+  --swt--pin--checked--disabled--background-color: #E8F7F4;
+  --swt--pin--focus--background-color: var(--text--disable);
+  --swt--pin--checked--focus--background-color: var(--color--primary);
+  
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  width: 100%;
+}
+
+/******** REGULAR MODE ********/
+/*---------------------------unchecked------------------------------*/
+input.regularMode {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  cursor: pointer;
+  border-radius: 50%;
+
+  /*public*/
+  width: var(--chk--width);
+  height: var(--chk--height);
+}
+
+
+input.regularMode:enabled:hover{
+  /*public*/
+  background-color: var(--chk--hover--background-color);
+}
+
+input.regularMode:enabled:focus{
+  /*private*/
+  outline: none;
+  
+  /*public*/
+  background-color: var(--chk--focus--background-color);
+}
+
+input.regularMode:disabled{
+  /*private*/
+  cursor: auto;
+  background: none;
+}
+
+input.regularMode::before{
+  /*private*/
+  box-sizing: border-box;
+  content: "";
+  display: block;
+
+  /*public*/
+  width: var(--chk--box--width);
+  height: var(--chk--box--height);
+  border-radius: var(--chk--border-radius);
+  border: var(--chk--border);
+}
+
+input.regularMode:disabled::before{
+  /*public*/
+  border: var(--chk--disabled--border);
+}
+
+/*-------------------------------checked---------------------------------*/
+input.regularMode:checked:enabled:hover{
+  /*public*/
+  background-color: var(--chk--checked--hover--background-color);
+}
+
+input.regularMode:checked:enabled:focus{
+  /*public*/
+  background-color: var(--chk--checked--focus--background-color);
+}
+
+input.regularMode:checked::before{
+  /*public*/
+  border: var(--chk--checked--border);
+  background-color: var(--chk--checked--background-color);
+}
+
+input.regularMode:checked:disabled:before{
+  /*public*/
+  border: var(--chk--disabled--border);
+  background-color: var(--chk--checked--disabled--background-color);
+}
+
+input.regularMode:checked::after{
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  content: "";
+  position: absolute;
+  margin-top: 3px;
+  margin-left: -1px;
+  width: 12px;
+  height: 12px;
+  background-color: var(--chk--check--background-color);
+
+  /*public*/
+  clip-path: var(--chk--check--clip-path);
+}
+
+input.regularMode:checked:disabled::after{
+  /*public*/
+  background-color: var(--chk--check--disabled--background-color);
+}
+
+/******** SWITCH MODE ********/
+/*-------------------------------OFF---------------------------------*/
+input.switchMode{
+  /*private*/
+  appearance: none;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: none;
+  transition: background-color var(--transition);
+
+  /*public*/
+  width: var(--swt--slider--width);
+  height: var(--swt--slider--height);
+  background-color: var(--swt--background-color);
+}
+
+input.switchMode:disabled{
+  /*public*/
+  background-color:var(--swt--disabled--background-color);
+}
+
+input.switchMode::after{
+  /*private*/
+  content: "";
+  display: block;
+  position: absolute;
+  box-shadow: var(--shadow);
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateY(-3px);
+  border-radius: 50%;
+
+  /*public*/
+  width: var(--swt--pin--width);
+  height: var(--swt--pin--height);
+  background-color: var(--swt--pin--background-color);
+}
+
+input.switchMode:disabled::after{
+  /*public*/
+  background-color: var(--swt--pin--disabled--background-color);
+}
+
+/*-------------------------------ON---------------------------------*/
+input.switchMode:checked{
+  /*private*/
+  transition: background-color var(--transition);
+
+  /*public*/
+  background-color: var(--swt--checked--background-color);
+}
+
+input.switchMode::before{
+   /*private*/
+  display: block;
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+
+   /*public*/
+  width: var(--swt--focus--width);
+  height: var(--swt--focus--height);
+  top: calc((var(--swt--slider--height) - var(--swt--focus--height)) / 2);
+  left: calc((var(--swt--pin--width) - var(--swt--focus--width))/2);
+  background-color: var(--swt--pin--focus--background-color);
+}
+
+input.switchMode:focus::before{
+   /*private*/
+  opacity: 0.24;
+  transition: opacity var(--transition);
+}
+
+input.switchMode:checked:focus::before{
+  /*private*/
+  background-color: var(--swt--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width)));
+}
+
+input.switchMode:checked::after{
+  /*private*/
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width))) translateY(-3px);
+  box-shadow: var(--shadow);
+  
+  /*public*/
+  background-color: var(--swt--pin--checked--background-color);
+}
+
+input.switchMode:checked:disabled::after{
+  /*public*/
+  background-color: var(--swt--pin--checked--disabled--background-color);
 }