synapse-react-client 3.0.0 → 3.0.3

package/dist/template_style/_form.scss

@@ -1,4 +1,6 @@
 @use '../style/abstracts/variables' as SRC;
+@use 'sass:map';
+
 //////////////////////////////////////////////////////////////
 // params: $primary-action-color                            //
 //////////////////////////////////////////////////////////////
@@ -19,6 +21,12 @@
   margin-top: 0px;
   margin-bottom: 0px;
 }
+
+.checkbox label,
+.radio label {
+  padding-left: 0px;
+}
+
 // PORTALS-2053: if checkbox/radio was generated by rjsf, then we do need some space between the elements
 .rjsf {
   .checkbox,
@@ -27,120 +35,157 @@
   }
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  // We don't hide the input tag with display: none because it makes the input inaccessible (you can't 'tab' into it)
-  // See https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  margin-left: unset;
-}
+@mixin customCheckbox($checkbox-top-offset: 0px) {
+  $radio-before-top-offset: 1px;
+  $radio-before-left-offset: 4px;
 
-input[type='checkbox'] + label,
-input[type='checkbox'] + span,
-input[type='radio'] + label,
-input[type='radio'] + span {
-  position: relative;
-  padding-left: 22px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
+  $radio-after-top-offset: $radio-before-top-offset + 3px;
+  $radio-after-left-offset: $radio-before-left-offset + 3px;
 
-input[type='checkbox'] + label::before,
-input[type='checkbox'] + span::before,
-input[type='radio'] + label::before,
-input[type='radio'] + span::before {
-  position: absolute;
-  content: '';
-  display: inline-block;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #888;
-  background: radial-gradient(white, #eee);
-}
+  $checkbox-before-top-offset: $checkbox-top-offset;
+  $checkbox-before-left-offset: 0px;
+  $checkbox-after-top-offset: $checkbox-before-top-offset + 2px;
+  $checkbox-after-left-offset: $checkbox-before-left-offset + 6px;
 
-input[type='checkbox'] + label::before,
-input[type='checkbox'] + span::before {
-  border-radius: 2px;
-  left: 0px;
-  top: 2px;
-}
+  input[type='checkbox'],
+  input[type='radio'] {
+    // We don't hide the input tag with display: none because it makes the input inaccessible (you can't 'tab' into it)
+    // See https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    margin-left: unset;
+  }
 
-input[type='radio'] + label::before,
-input[type='radio'] + span::before {
-  border-radius: 50%;
-  left: 4px;
-  top: 2px;
-}
+  input[type='checkbox'] + label,
+  input[type='checkbox'] + span,
+  input[type='radio'] + label,
+  input[type='radio'] + span {
+    position: relative;
+    padding-left: 22px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
 
-input[type='checkbox']:focus + label::before,
-input[type='checkbox']:focus + span::before,
-input[type='radio']:focus + label::before,
-input[type='radio']:focus + span::before {
-  box-shadow: 0px 0px 2px 2px SRC.$primary-action-color-active;
-}
+  input[type='checkbox'] + label::before,
+  input[type='checkbox'] + span::before,
+  input[type='radio'] + label::before,
+  input[type='radio'] + span::before {
+    position: absolute;
+    content: '';
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    border: 1px solid map.get(SRC.$colors, 'gray-600');
+    background: white;
+  }
 
-input[type='checkbox']:disabled + label::before,
-input[type='checkbox']:disabled + span::before,
-input[type='radio']:disabled + label::before,
-input[type='radio']:disabled + span::before {
-  background: #ddd;
-}
-input[type='checkbox']:disabled + label,
-input[type='checkbox']:disabled + span,
-input[type='radio']:disabled + label,
-input[type='radio']:disabled + span {
-  color: #777;
-}
+  .indeterminate-checkbox input[type='checkbox'] + label::before,
+  input[type='checkbox']:checked + label::before,
+  input[type='checkbox']:checked + span::before {
+    border: none;
+    background: map.get(SRC.$secondary-color-palette, 500);
+  }
 
-.indeterminate-checkbox input[type='checkbox'] + label::after,
-.indeterminate-checkbox input[type='checkbox'] + span::after {
-  content: '-';
-  color: SRC.$primary-action-color;
-  font-size: 24px;
-  position: absolute;
-  top: -9px;
-  left: 3px;
-  font-weight: bolder;
-}
+  input[type='checkbox'] + label::before,
+  input[type='checkbox'] + span::before {
+    top: $checkbox-before-top-offset;
+    left: $checkbox-before-left-offset;
+  }
 
-input[type='checkbox']:checked + label::after,
-input[type='checkbox']:checked + span::after {
-  content: '✓';
-  color: SRC.$primary-action-color;
-  font-size: 14px;
-  position: absolute;
-  left: 2px;
-  font-weight: bolder;
-}
+  input[type='radio'] + label::before,
+  input[type='radio'] + span::before {
+    border-radius: 50%;
+    top: $radio-before-top-offset;
+    left: $radio-before-left-offset;
+  }
+  input[type='checkbox']:focus + label::before,
+  input[type='checkbox']:focus + span::before,
+  input[type='radio']:focus:checked + label::before,
+  input[type='radio']:focus:checked + span::before,
+  input[type='checkbox']:hover:checked:not(:disabled) + label::before,
+  input[type='checkbox']:hover:checked:not(:disabled) + span::before,
+  input[type='radio']:hover:checked:not(:disabled) + label::before,
+  input[type='radio']:hover:checked:not(:disabled) + span::before {
+    box-shadow: 0px 0px 2px 2px map.get(SRC.$secondary-color-palette, 100);
+  }
 
-input[type='radio']:checked + label::after,
-input[type='radio']:checked + span::after {
-  content: '';
-  display: inline-block;
-  vertical-align: middle;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: SRC.$primary-action-color;
-  position: absolute;
-  top: 5px;
-  left: 7px;
-}
+  input[type='checkbox']:hover:not(:checked):not(:disabled) + label::before,
+  input[type='checkbox']:hover:not(:checked):not(:disabled) + span::before,
+  input[type='radio']:hover:not(:checked):not(:disabled) + label::before,
+  input[type='radio']:hover:not(:checked):not(:disabled) + span::before {
+    box-shadow: 0px 0px 2px 2px map.get(SRC.$colors, 'gray-400');
+  }
 
-input[type='radio'] + label,
-input[type='radio'] + span,
-input[type='radio'] + label,
-input[type='radio'] + span {
-  padding-left: 23px;
-  color: #515359;
-}
+  input[type='checkbox']:disabled:checked + label::before,
+  input[type='checkbox']:disabled:checked + span::before {
+    background: #ddd;
+  }
+  input[type='radio']:disabled:checked + label::after,
+  input[type='radio']:disabled:checked + span::after {
+    background: map.get(SRC.$colors, 'gray-400');
+  }
 
-.checkbox label,
-.radio label {
-  padding-left: 0px;
+  input[type='checkbox']:disabled:not(:checked) + label::before,
+  input[type='checkbox']:disabled:not(:checked) + span::before,
+  input[type='radio']:disabled + label::before,
+  input[type='radio']:disabled + span::before {
+    background: white;
+  }
+
+  input[type='checkbox']:disabled + label,
+  input[type='checkbox']:disabled + span,
+  input[type='radio']:disabled + label,
+  input[type='radio']:disabled + span {
+    color: #777;
+  }
+
+  .indeterminate-checkbox input[type='checkbox'] + label::after,
+  .indeterminate-checkbox input[type='checkbox'] + span::after {
+    content: '—';
+    color: white;
+    font-size: 12px;
+    position: absolute;
+    top: $checkbox-before-top-offset - 1px;
+    left: $checkbox-before-left-offset + 3px;
+    font-weight: bolder;
+  }
+
+  input[type='checkbox']:checked + label::after,
+  input[type='checkbox']:checked + span::after {
+    content: '';
+    transform: rotate(45deg);
+    height: 9px;
+    width: 4px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    position: absolute;
+    top: $checkbox-after-top-offset;
+    left: $checkbox-after-left-offset;
+  }
+
+  input[type='radio']:checked + label::after,
+  input[type='radio']:checked + span::after {
+    content: '';
+    vertical-align: middle;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: map.get(SRC.$secondary-color-palette, 500);
+    position: absolute;
+    top: $radio-after-top-offset;
+    left: $radio-after-left-offset;
+  }
+
+  input[type='radio'] + label,
+  input[type='radio'] + span,
+  input[type='radio'] + label,
+  input[type='radio'] + span {
+    padding-left: 23px;
+    color: #515359;
+  }
 }
+
+@include customCheckbox();