@open-condo/ui 2.17.1 → 2.18.0

package/dist/style-vars/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Apr 2024 14:02:37 GMT
+ * Generated on Thu, 02 May 2024 09:35:32 GMT
  */
 
 :root {

package/dist/style-vars/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 11 Apr 2024 14:02:37 GMT
+// Generated on Thu, 02 May 2024 09:35:32 GMT
 
 @condo-global-spacing-4: 4px;
 @condo-global-spacing-8: 8px;

package/dist/styles.css

@@ -717,6 +717,9 @@
   text-align: right;
 }
 .condo-typography {
+  transition-timing-function: ease-in;
+  transition-duration: 0.15s;
+  transition-property: color opacity text-decoration-color;
   word-break: break-word;
 }
 .condo-typography-break-spaces {
@@ -4873,50 +4876,70 @@ a.condo-btn-secondary {
 }
 .condo-checkbox-wrapper .condo-checkbox {
   top: 0;
-}
-.condo-checkbox-wrapper .condo-checkbox-input {
-  margin: 0;
+  border-color: #d0d3e5;
+  transition-timing-function: ease-in;
+  transition-duration: 0.15s;
+  transition-property: border-color;
 }
 .condo-checkbox-wrapper .condo-checkbox-inner {
   box-sizing: content-box;
   border-color: #d0d3e5;
+  outline: none;
+  transition-timing-function: ease-in;
+  transition-duration: 0.15s;
+  transition-property: border-color opacity;
+}
+.condo-checkbox-wrapper .condo-checkbox-inner::before {
+  box-sizing: border-box;
+  background: linear-gradient(90deg, #85eba4 0%, #9fd5ff 100%) border-box;
+  border: 2px solid transparent;
+  opacity: 1;
+  -webkit-mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
+          mask: linear-gradient(#111 0, #111 0) padding-box, linear-gradient(#fff 0, #fff 0);
+  -webkit-mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
 }
 .condo-checkbox-wrapper .condo-checkbox-inner::after {
   transition: none;
 }
-.condo-checkbox-wrapper .condo-checkbox-indeterminate > .condo-checkbox-inner::after {
-  width: 12px;
-  height: 4px;
-  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
-  border-radius: 1px;
+.condo-checkbox-wrapper .condo-checkbox-checked::after {
+  border: none;
 }
-.condo-checkbox-wrapper .condo-checkbox-indeterminate > .condo-checkbox-inner::before {
+.condo-checkbox-wrapper .condo-checkbox::after {
   position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
-  border-radius: 3px;
+  top: -4px;
+  left: -4px;
+  width: 32px;
+  height: 32px;
+  background-color: transparent;
+  border-radius: 4px;
+  visibility: visible;
   content: "";
 }
-.condo-checkbox-wrapper .condo-checkbox-checked::after {
-  border: none;
+.condo-checkbox-wrapper-disabled .condo-checkbox-inner {
+  opacity: 0.5;
 }
-.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-inner {
-  box-sizing: content-box;
-  background: #d0d3e5 border-box;
-  border-color: transparent;
+.condo-checkbox-wrapper .condo-checkbox-input {
+  margin: 0;
 }
-.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-inner::before {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
-  border-radius: 3px;
-  content: "";
+.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner {
+  border-color: #d0d3e5;
+}
+.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-indeterminate > .condo-checkbox-inner {
+  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%);
+}
+.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-indeterminate > .condo-checkbox-inner::after {
+  width: 12px;
+  height: 4px;
+  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
+  border-radius: 1px;
 }
-.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-inner::after {
+.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-checked > .condo-checkbox-inner {
+  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%);
+}
+.condo-checkbox-wrapper .condo-checkbox.condo-checkbox-checked > .condo-checkbox-inner::after {
   top: 10px;
   left: 5px;
   box-sizing: content-box;
@@ -4928,94 +4951,34 @@ a.condo-btn-secondary {
   transform: rotate(48deg) scale(1) translate(-50%, -50%);
   transition: none;
 }
-.condo-checkbox-wrapper .condo-checkbox-disabled > .condo-checkbox-inner {
-  border-color: #e1e5ed !important;
-}
-.condo-checkbox-wrapper .condo-checkbox-disabled > .condo-checkbox-inner {
-  background-color: #f2f4f6;
-}
-.condo-checkbox-wrapper .condo-checkbox-disabled.condo-checkbox-checked > .condo-checkbox-inner::before {
-  background: #f2f4f6;
-}
-.condo-checkbox-wrapper .condo-checkbox-disabled.condo-checkbox-checked > .condo-checkbox-inner::after {
-  border-color: #d0d3e5;
-  border-image-source: none;
-}
-.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner {
-  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
-  border-color: transparent;
-}
-.condo-checkbox-wrapper .condo-checkbox-input:focus + .condo-checkbox-inner::before {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: #fff border-box;
-  border-radius: 3px;
-  content: "";
-}
-.condo-checkbox-wrapper .condo-checkbox-indeterminate.condo-checkbox-disabled > .condo-checkbox-inner::after {
-  background: #d0d3e5;
+.condo-checkbox-wrapper-disabled .condo-checkbox:not(.condo-checkbox-indeterminate):not(.condo-checkbox-checked) > .condo-checkbox-inner {
+  background: transparent;
 }
-.condo-checkbox-wrapper .condo-checkbox-indeterminate.condo-checkbox-disabled > .condo-checkbox-inner::before {
+.condo-checkbox-wrapper .condo-checkbox-input.focus-visible + .condo-checkbox-inner::before {
   position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: #fff border-box;
-  border-radius: 3px;
+  top: -5px;
+  right: -5px;
+  bottom: -5px;
+  left: -5px;
+  display: block;
+  border-radius: inherit;
   content: "";
+  border-radius: 8px;
 }
-.condo-checkbox-wrapper .condo-checkbox::after {
+.condo-checkbox-wrapper .condo-checkbox-input:focus-visible + .condo-checkbox-inner::before {
   position: absolute;
-  top: -4px;
-  left: -4px;
-  width: 32px;
-  height: 32px;
-  background-color: transparent;
-  border-radius: 4px;
-  visibility: visible;
+  top: -5px;
+  right: -5px;
+  bottom: -5px;
+  left: -5px;
+  display: block;
+  border-radius: inherit;
   content: "";
+  border-radius: 8px;
 }
-.condo-checkbox-wrapper:hover > .condo-checkbox > .condo-checkbox-inner {
+.condo-checkbox-wrapper:hover:not(.condo-checkbox-wrapper-disabled) > .condo-checkbox > .condo-checkbox-inner {
   border-color: #707695;
 }
-.condo-checkbox-wrapper:hover > .condo-checkbox-checked > .condo-checkbox-inner::before {
-  border-radius: 3px;
-}
-.condo-checkbox-wrapper .condo-checkbox-indeterminate > .condo-checkbox-input:focus + .condo-checkbox-inner::before {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
-  border-radius: 3px;
-  content: "";
-}
-.condo-checkbox-wrapper:hover > .condo-checkbox-checked > .condo-checkbox-inner {
-  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
-  border-color: transparent;
-}
-.condo-checkbox-wrapper:hover > .condo-checkbox-disabled > .condo-checkbox-inner {
-  background: #f2f4f6 border-box;
-  border-color: transparent;
-}
-.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-input:focus + .condo-checkbox-inner {
-  background: linear-gradient(90deg, #26c756 0%, #4ba2e4 100%) border-box;
-  border-color: transparent;
-}
-.condo-checkbox-wrapper .condo-checkbox-checked > .condo-checkbox-input:focus + .condo-checkbox-inner::before {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, #e2ffeb 0%, #e7f4ff 100%) border-box;
-  border-radius: 3px;
-  content: "";
-}
-.condo-checkbox-wrapper:hover > .condo-checkbox::after {
-  visibility: visible;
-}
 
 .condo-control {
   width: 40px !important;