chore(atlas-core): adding 3 state checkbox

mendix · Jan 22, 2024 · 7a5a8d5 · 7a5a8d5
1 parent 313c673
commit 7a5a8d5
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## Added
+
+-   We added three state checkbox styling to atlas-core.
+
 ## [3.13.1] Atlas Core - 2024-1-17
 
 ### Fixed

diff --git a/packages/atlas-core/package.json b/packages/atlas-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "atlas-core",
   "moduleName": "Atlas Core",
-  "version": "3.13.1",
+  "version": "3.13.2",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2024. All rights reserved.",
   "repository": {

diff --git a/packages/atlas/src/themesource/atlas_core/web/core/helpers/_three-state-checkbox.scss b/packages/atlas/src/themesource/atlas_core/web/core/helpers/_three-state-checkbox.scss
@@ -0,0 +1,35 @@
+//
+// DISCLAIMER:
+// Do not change this file because it is core styling.
+// Customizing core files will make updating Atlas much more difficult in the future.
+// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
+//
+
+@mixin three-state-checkbox() {
+    /* ==========================================================================
+       Three state check box
+
+       Default Mendix three state check box widget
+========================================================================== */
+
+    input[type="checkbox"].three-state-checkbox {
+        &:indeterminate:after {
+            // Checkmark
+            width: 8px;
+            height: 4px;
+            margin: 5px 4px;
+            transform: rotate(0deg);
+            pointer-events: none;
+            border: 0 solid #ffffff;
+            border-bottom-width: 2px;
+            transition: border 0s;
+        }
+        &:indeterminate:before {
+            border-color: $form-input-border-focus-color;
+            background-color: $form-input-border-focus-color;
+        }
+        &:indeterminate:after {
+            content: "";
+        }
+    }
+}
diff --git a/packages/atlas/src/themesource/atlas_core/web/main.scss b/packages/atlas/src/themesource/atlas_core/web/main.scss
@@ -101,8 +101,10 @@
 }
 
 @import "core/widgets/check-box";
+@import "core/helpers/three-state-checkbox";
 @if not $exclude-check-box {
     @include check-box();
+    @include three-state-checkbox();
 }
 
 @import "core/widgets/grid";