Skip to content

Commit 4a2ec0a

Browse files
louismaximepitonlouismaximepiton
committed
Add Checkbox component
1 parent 4d5a8a8 commit 4a2ec0a

File tree

9 files changed

+665
-314
lines changed

9 files changed

+665
-314
lines changed

‎.github/workflows/node-sass.yml‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎scss/_root.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -417,8 +417,6 @@
417417
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
418418
// scss-docs-end root-form-validation-variables
419419

420-
--#{$prefix}form-check-filter: #{$form-check-filter}; // OUDS mod
421-
--#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color}; // OUDS mod
422420
--#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // OUDS mod
423421
--#{$prefix}form-select-indicator: #{$form-select-indicator}; // OUDS mod
424422
--#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // OUDS mod
@@ -513,8 +511,6 @@
513511
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
514512
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
515513
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
516-
--#{$prefix}form-check-filter: #{$form-check-filter-dark}; // OUDS mod
517-
--#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // OUDS mod
518514
--#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // OUDS mod
519515
--#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // OUDS mod
520516
--#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};

‎scss/_variables-dark.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,6 @@ $svg-as-custom-props-dark: (
9898
// Forms
9999
//
100100

101-
$form-check-filter-dark: none !default; // OUDS mod
102-
$form-check-input-disabled-color-dark: $gray-700 !default; // OUDS mod
103101
$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // OUDS mod
104102
$form-switch-square-bg-dark: $ouds-color-functional-dark-gray-880 !default; // OUDS mod
105103

‎scss/_variables.scss‎

Lines changed: 58 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ $escaped-characters: (
368368
$chevron-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2 7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
369369
$cross-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
370370
$cross-icon-stroke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='116 116 767 767' fill='#{$black}'><path d='M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z'/></svg>") !default;
371-
$check-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
371+
$check-icon: url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path fill='#000' fill-rule='evenodd' d='M875,240a64.568,64.568,0,0,0-108.864-47.408l-0.011-.012L383.621,565,257.594,424.648l-0.011.014a64.372,64.372,0,0,0-87.784,3.375l-25.862,26a65.23,65.23,0,0,0-4.758,86.56l-0.011.008,206.9,260,0.01-.008a64.407,64.407,0,0,0,100.953,0l0.011,0.009,413.793-520-0.011-.008A64.916,64.916,0,0,0,875,240Z' transform='scale(.1)'/></svg>") !default;
372372
$burger-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='M28 21v2H2v-2h26Zm0-7v2H2v-2h26Zm0-7v2H2V7h26Z'/></svg>") !default;
373373
$burger-icon-small: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='#{$black}'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
374374
$success-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
@@ -1057,44 +1057,61 @@ $form-color-disabled-filter: brightness(0) invert(1) brightness(.8) !
10571057
// scss-docs-end form-input-variables
10581058

10591059
// scss-docs-start form-check-variables
1060-
$form-check-input-width: 1em !default;
1061-
$form-check-min-height: calc(#{$font-size-base} * #{$input-btn-line-height}) !default; // stylelint-disable-line function-disallowed-list
1062-
$form-check-padding-start: $form-check-input-width + .5em !default;
1063-
$form-check-margin-bottom: .125rem !default;
1064-
$form-check-label-padding-top: .4375rem !default; // OUDS mod
1065-
$form-check-label-color: null !default;
1066-
$form-check-label-cursor: null !default;
1067-
$form-check-transition: null !default;
1068-
$form-check-filter: $invert-filter !default; // OUDS mod
1069-
1070-
$form-check-input-active-filter: null !default;
1071-
$form-check-input-active-bg-color: $component-active-bg !default; // OUDS mod
1072-
1073-
$form-check-input-bg: $input-bg !default;
1074-
$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color !default; // OUDS mod: instead of `var(--#{$prefix}border-width) solid var(--#{$prefix}border-color)`
1075-
$form-check-input-border-radius: 0 !default;
1076-
$form-check-radio-border-radius: 50% !default;
1077-
$form-check-input-focus-border: null !default;
1078-
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
1079-
1080-
$form-check-input-checked-color: $component-active-color !default;
1081-
$form-check-input-checked-bg-color: $component-active-bg !default;
1082-
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
1083-
$form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
1084-
$form-check-input-disabled-color: $gray-900 !default; // OUDS mod
1085-
$form-check-input-disabled-filter: var(--#{$prefix}form-check-filter) !default; // OUDS mod
1086-
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
1087-
1088-
$form-check-input-indeterminate-color: $form-check-input-checked-color !default;
1089-
$form-check-input-indeterminate-bg-color: $form-check-input-checked-bg-color !default;
1090-
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
1091-
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;
1092-
1093-
$form-check-input-disabled-opacity: null !default;
1094-
$form-check-label-disabled-opacity: null !default;
1095-
$form-check-btn-check-disabled-opacity: null !default;
1096-
1097-
$form-check-inline-margin-end: 1rem !default;
1060+
$form-check-input-width: $ouds-checkbox-size-indicator !default; // OUDS mod: instead of `1em`
1061+
$form-check-min-height: $ouds-control-item-size-min-height !default; // OUDS mod: instead of `$font-size-base * $line-height-base`
1062+
// OUDS mod: no `$form-check-padding-start`
1063+
// OUDS mod: no `$form-check-margin-bottom`
1064+
// OUDS mod: no `$form-check-label-color`
1065+
$form-check-label-cursor: pointer !default; // OUDS mod: instead of `null`
1066+
// OUDS mod: no `$form-check-transition`
1067+
// OUDS mod: no `$form-check-filter`
1068+
1069+
// OUDS mod: no `$form-check-input-active-filter`
1070+
1071+
// ouds mod: no `$form-check-input-color`
1072+
// OUDS mod: no `$form-check-input-border`
1073+
$form-check-input-border-radius: $ouds-checkbox-border-radius !default; // OUDS mod: instead of `0`
1074+
// OUDS mod: no `$form-check-radio-border-radius`
1075+
// OUDS mod: no `$form-check-input-focus-border`
1076+
// OUDS mod: no `$form-check-input-focus-box-shadow`
1077+
1078+
// OUDS mod
1079+
$ouds-checkbox-calc-multiplicator: 2 !default; // Here to handle 1px border using svg
1080+
$ouds-checkbox-calc-viewbox: calc(strip-units($form-check-input-width) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1081+
$ouds-checkbox-calc-border-radius: calc(strip-units($form-check-input-border-radius) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1082+
$ouds-checkbox-calc-border-width-unselected: calc(strip-units($ouds-checkbox-border-width-unselected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1083+
$ouds-checkbox-calc-width-unselected: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-unselected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1084+
$ouds-checkbox-calc-border-width-unselected-hover: calc(strip-units($ouds-checkbox-border-width-unselected-hover) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1085+
$ouds-checkbox-calc-width-unselected-hover: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-unselected-hover) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1086+
$ouds-checkbox-calc-border-width-indeterminate: calc(strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1087+
$ouds-checkbox-calc-width-indeterminate: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1088+
$ouds-checkbox-calc-border-width-selected: calc(strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1089+
$ouds-checkbox-calc-width-selected: calc($ouds-checkbox-calc-viewbox - strip-units($ouds-checkbox-border-width-selected) * $ouds-checkbox-calc-multiplicator) !default; // stylelint-disable-line function-disallowed-list
1090+
// End mod
1091+
1092+
// OUDS mod: no `$form-check-input-checked-color`
1093+
// OUDS mod: no `$form-check-input-checked-bg-color`
1094+
// OUDS mod: no `$form-check-input-checked-border-color`
1095+
$form-check-input-checked-bg-image: "<svg viewBox='0 0 20 20' width='#{$ouds-checkbox-calc-viewbox}' height='#{$ouds-checkbox-calc-viewbox}' x='0' y='0'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>" !default; // OUDS mod: instead of `var(--#{$prefix}check-icon)`
1096+
// OUDS mod: no `$form-check-radio-checked-bg-image`
1097+
1098+
// OUDS mod: no `$form-check-input-indeterminate-color`
1099+
// OUDS mod: no `$form-check-input-indeterminate-bg-color`
1100+
// OUDS mod: no `$form-check-input-indeterminate-border-color`
1101+
$form-check-input-indeterminate-bg-image: "<svg viewBox='0 0 20 20' width='#{$ouds-checkbox-calc-viewbox}' height='#{$ouds-checkbox-calc-viewbox}' x='0' y='0'><path fill='#000' d='M4.5 9.375c0-.345.28-.625.625-.625h9.75c.345 0 .625.28.625.625v1.25c0 .345-.28.625-.625.625h-9.75a.625.625 0 0 1-.625-.625v-1.25Z'/></svg>" !default;
1102+
1103+
// OUDS mod: no `$form-check-input-disabled-opacity`
1104+
// OUDS mod: no `$form-check-label-disabled-opacity`
1105+
// OUDS mod: no `$form-check-btn-check-disabled-opacity`
1106+
1107+
// OUDS mod: no `$form-check-inline-margin-end`
1108+
1109+
// scss-docs-start ouds-composite-checks
1110+
$ouds-checkbox-unselected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-unselected / 2)}' y='#{calc($ouds-checkbox-calc-border-width-unselected / 2)}' width='#{$ouds-checkbox-calc-width-unselected}' height='#{$ouds-checkbox-calc-width-unselected}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-unselected}'/></svg>") !default;
1111+
$ouds-checkbox-unselected-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-unselected-hover / 2)}' y='#{calc($ouds-checkbox-calc-border-width-unselected-hover / 2)}' width='#{$ouds-checkbox-calc-width-unselected-hover}' height='#{$ouds-checkbox-calc-width-unselected-hover}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-unselected-hover}'/></svg>") !default;
1112+
$ouds-checkbox-selected-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-selected / 2)}' y='#{calc($ouds-checkbox-calc-border-width-selected / 2)}' width='#{$ouds-checkbox-calc-width-selected}' height='#{$ouds-checkbox-calc-width-selected}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-selected}'/>#{$form-check-input-checked-bg-image}</svg>") !default;
1113+
$ouds-checkbox-indeterminate-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$ouds-checkbox-calc-viewbox} #{$ouds-checkbox-calc-viewbox}'><rect x='#{calc($ouds-checkbox-calc-border-width-indeterminate / 2)}' y='#{calc($ouds-checkbox-calc-border-width-indeterminate / 2)}' width='#{$ouds-checkbox-calc-width-indeterminate}' height='#{$ouds-checkbox-calc-width-indeterminate}' rx='#{$ouds-checkbox-calc-border-radius}' ry='#{$ouds-checkbox-calc-border-radius}' fill='none' stroke='#000' stroke-width='#{$ouds-checkbox-calc-border-width-indeterminate}'/>#{$form-check-input-indeterminate-bg-image}</svg>") !default;
1114+
// scss-docs-end ouds-composite-checks
10981115

10991116
// OUDS mod: Star rating
11001117
$form-star-size: 1.5625rem !default;
@@ -1110,10 +1127,10 @@ $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,<svg
11101127
$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#{$black}' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
11111128
$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#{$black}' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
11121129
$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
1113-
11141130
// End mod
11151131
// scss-docs-end form-check-variables
11161132

1133+
// fusv-disable
11171134
// scss-docs-start form-switch-variables
11181135
// OUDS mod: no $form-switch-color
11191136
$form-switch-width: $spacer * 3 !default; // OUDS mod
@@ -1149,6 +1166,7 @@ $form-switch-checked-focus-inner: var(--#{$prefix}color-border-foc
11491166
$form-switch-checked-focus-outer: var(--#{$prefix}color-border-focus) !default; // OUDS mod
11501167
$form-switch-unchecked-invalid-border-color: #31c3eb !default; // OUDS mod: will be rendered red when mixed with the filter
11511168
// scss-docs-end form-switch-variables
1169+
// fusv-enable
11521170

11531171
// scss-docs-start input-group-variables
11541172
$input-group-addon-padding-y: $input-padding-y !default;

0 commit comments

Comments
 (0)