dibk-design 0.4.42 → 0.4.45

package/dist/components/CheckBoxIcon.module.scss

@@ -1,62 +1,62 @@
-@import "../style/global.scss";
-
-:local(.checkBoxIcon) {
-  @include border-radius(0);
-  @include transition(all 0.1s ease-in-out);
-  @include box-sizing(content-box);
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  min-width: 20px;
-  margin-right: 0.2em;
-  line-height: 1;
-  text-align: center;
-  cursor: pointer;
-
-  &:local(.showBox) {
-    margin-right: 0.4em;
-    margin-top: 2px;
-    background: white;
-    &:not(:local(.hasErrors)) {
-      @include box-shadow(0 0 0 1px #afaba8);
-    }
-    &:local(.hasErrors) {
-      @include box-shadow(0 0 2px 1px #9d2024);
-    }
-  }
-
-  &:local(.checked) {
-    color: $color-primary;
-    &:local(.hasErrors) {
-      span {
-        color: #9d2024;
-      }
-    }
-    &:local(.showBox) {
-      &:not(:local(.hasErrors)) {
-        @include box-shadow(0 0 0 1px #afaba8);
-      }
-      &:local(.hasErrors) {
-        @include box-shadow(0 0 2px 1px #9d2024);
-      }
-    }
-  }
-
-  &:local(.disabled) {
-    opacity: 0.5;
-    background: rgba(0, 0, 0, 0.25);
-    cursor: default;
-  }
-
-  :local(.checkmark) {
-    font-size: 1em;
-    line-height: 0.75em;
-  }
-  :not(:local(.showBox)) {
-    &:local(.checkmark) {
-      line-height: 1.05em;
-    }
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxIcon) {
+  @include border-radius(0);
+  @include transition(all 0.1s ease-in-out);
+  @include box-sizing(content-box);
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 10px;
+  width: 10px;
+  height: 10px;
+  min-width: 20px;
+  margin-right: 0.2em;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+
+  &:local(.showBox) {
+    margin-right: 0.4em;
+    margin-top: 2px;
+    background: white;
+    &:not(:local(.hasErrors)) {
+      @include box-shadow(0 0 0 1px #afaba8);
+    }
+    &:local(.hasErrors) {
+      @include box-shadow(0 0 2px 1px #9d2024);
+    }
+  }
+
+  &:local(.checked) {
+    color: $color-primary;
+    &:local(.hasErrors) {
+      span {
+        color: #9d2024;
+      }
+    }
+    &:local(.showBox) {
+      &:not(:local(.hasErrors)) {
+        @include box-shadow(0 0 0 1px #afaba8);
+      }
+      &:local(.hasErrors) {
+        @include box-shadow(0 0 2px 1px #9d2024);
+      }
+    }
+  }
+
+  &:local(.disabled) {
+    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.25);
+    cursor: default;
+  }
+
+  :local(.checkmark) {
+    font-size: 1em;
+    line-height: 0.75em;
+  }
+  :not(:local(.showBox)) {
+    &:local(.checkmark) {
+      line-height: 1.05em;
+    }
+  }
+}

package/dist/components/CheckBoxInput.js

@@ -59,7 +59,8 @@ var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         theme: this.props.theme,
         hasErrors: this.props.hasErrors,
-        checkmarkCharacter: this.props.checkmarkCharacter
+        checkmarkCharacter: this.props.checkmarkCharacter,
+        expandable: this.props.expandable
       }), /*#__PURE__*/_react.default.createElement("input", {
         onChange: this.props.onChange,
         type: "checkbox",
@@ -88,7 +89,8 @@ CheckBoxInput.propTypes = {
   contentOnly: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  expandable: _propTypes.default.bool
 };
 CheckBoxInput.defaultProps = {
   checked: false,
@@ -96,7 +98,8 @@ CheckBoxInput.defaultProps = {
   name: '',
   contentOnly: false,
   hasErrors: false,
-  checkmarkCharacter: '✔'
+  checkmarkCharacter: '✔',
+  expandable: false
 };
 var _default = CheckBoxInput;
 exports.default = _default;

package/dist/components/CheckBoxInput.md

@@ -1,51 +1,58 @@
-Checkbox input example:
-
-```js
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-</div>
-```
-
-
-Themed Checkbox input example:
-
-```js
-import customTheme from 'data/customTheme';
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-</div>
-```
+Checkbox input example:
+
+```js
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded true</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded false</span>
+</CheckBoxInput>
+
+</div>
+```
+
+
+Themed Checkbox input example:
+
+```js
+import customTheme from 'data/customTheme';
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+</div>
+```

package/dist/components/CheckBoxInput.module.scss

@@ -1,24 +1,24 @@
-@import "../style/global.scss";
-
-:local(.checkBoxInput) {
-  display: flex;
-  margin-right: 1em;
-
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
-    }
-  }
-
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxInput) {
+  display: flex;
+  margin-right: 1em;
+
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
+    cursor: pointer;
+    input {
+      cursor: pointer;
+    }
+  }
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/CheckBoxListItem.md

@@ -1,82 +1,82 @@
-Check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
-  Label for disabled unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
-  Label for disabled checked checkbox with custom checkmark
-</CheckBoxListItem>
-```
-
-Compact check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
-  Label for checked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
-  Label for unchecked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
-  Label for disabled checked checkbox with error
-</CheckBoxListItem>
-```
-
-Themed Check box list item example:
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
-    Label for checked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
-    Label for unchecked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
-    Label for checked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
-    Label for unchecked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
-    Label for checked checkbox with custom checkmark
-  </CheckBoxListItem>
-</React.Fragment>
-```
+Check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
+  Label for disabled unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
+  Label for disabled checked checkbox with custom checkmark
+</CheckBoxListItem>
+```
+
+Compact check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
+  Label for checked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
+  Label for unchecked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
+  Label for disabled checked checkbox with error
+</CheckBoxListItem>
+```
+
+Themed Check box list item example:
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
+    Label for checked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
+    Label for unchecked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
+    Label for checked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
+    Label for unchecked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
+    Label for checked checkbox with custom checkmark
+  </CheckBoxListItem>
+</React.Fragment>
+```

package/dist/components/CheckBoxListItem.module.scss

@@ -1,71 +1,71 @@
-@import "../style/global.scss";
-
-:local(.checkBoxListItem) {
-  @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  font-family: $default-font;
-  position: relative;
-  font-size: 17px;
-  color: #000;
-
-  &:not(:local(.contentOnly)):not(:local(.compact)) {
-    @include box-shadow(0 0 2px $color-dark-blue);
-    background: white;
-    margin-bottom: 10px;
-  }
-
-  &:local(.contentOnly) {
-    cursor: auto;
-    label {
-      cursor: auto;
-      padding: 5px 10px;
-    }
-  }
-
-  &:local(.disabled) {
-    label {
-      cursor: auto;
-    }
-  }
-
-  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
-  }
-
-  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
-  }
-
-  &:focus {
-    outline-color: #54acb8;
-  }
-
-  label {
-    width: 100%;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  &:local(.compact) {
-    display: table;
-    label {
-      padding: 6px 4px;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxListItem) {
+  @include box-sizing(content-box);
+  @include border-radius(5px);
+  @include transition(all 0.1s ease-in-out);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+  font-family: $default-font;
+  position: relative;
+  font-size: 17px;
+  color: #000;
+
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
+    background: white;
+    margin-bottom: 10px;
+  }
+
+  &:local(.contentOnly) {
+    cursor: auto;
+    label {
+      cursor: auto;
+      padding: 5px 10px;
+    }
+  }
+
+  &:local(.disabled) {
+    label {
+      cursor: auto;
+    }
+  }
+
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
+    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+  }
+
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
+    @include box-shadow(0 0 6px $color-dark-blue);
+  }
+
+  &:focus {
+    outline-color: #54acb8;
+  }
+
+  label {
+    width: 100%;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &:local(.compact) {
+    display: table;
+    label {
+      padding: 6px 4px;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}