diff --git a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss index 526d22f..33049f1 100644 --- a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss @@ -277,11 +277,29 @@ .checkbox input { margin-top: 4.2vh; box-sizing: border-box; - // appearance: none; + appearance: none; padding: 1.3vh; border-radius: 3px; } +.checkbox input[type="checkbox"]:checked { + border-color: var(--vscode-activityBar-activeBorder); +} + +.checkbox input[type="checkbox"]:checked::after { + content: ""; + left: 5px; + top: 1px; + width: 5px; + height: 10px; + border: solid var(--vscode-activityBar-activeBorder); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + display: block; + margin: -6.5px -3px -3px -2px; + margin-left: -2.5px; +} + .h3 { padding: 0; display: flex; diff --git a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss index 6d0f597..38d11c5 100644 --- a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss @@ -161,39 +161,37 @@ h4 { margin-right: auto; } -// .checkbox input[type="checkbox"]:checked { -// background-color: #2196f3; // or your preferred color -// border-color: #2196f3; -// } +.checkbox input[type="checkbox"]:checked { + border-color: var(--vscode-activityBar-activeBorder); +} -// .checkbox input[type="checkbox"]:checked::after { -// content: ''; -// position: absolute; -// left: 5px; -// top: 1px; -// width: 5px; -// height: 10px; -// border: solid blue; -// border-width: 0 2px 2px 0; -// transform: rotate(45deg); -// display: block; -// } +.checkbox input[type="checkbox"]:checked::after { + content: ""; + left: 5px; + top: 1px; + width: 5px; + height: 10px; + border: solid var(--vscode-activityBar-activeBorder); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + display: block; + margin: -6.5px -3px -3px -1.6px; + margin-left: -3px; + margin-top: -7px; +} .checkbox input { margin-top: 3.5vh; box-sizing: border-box; - // appearance: none; padding: 1.3vh; - border-radius: 3px; - // appearance: none; + border-radius: 4px; } -// .checkbox input[type="checkbox"] { -// appearance: none; -// width: 18px; -// height: 18px; -// // border: 2px solid #888; -// } +.checkbox input[type="checkbox"] { + appearance: none; + width: 18px; + height: 18px; +} .input-group input[type="checkbox"]:disabled { opacity: 0.6;