Skip to content

Commit

Permalink
Merge pull request #1084 from pat270/clay-1083
Browse files Browse the repository at this point in the history 
New: (Fixes #1083) Custom Form added `$custom-control-indicator-check…
  • Loading branch information
@marcoscv-work
marcoscv-work authored Aug 21, 2018
2 parents 99bde23 + d1303af commit 0e30835
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 17 deletions.
35 changes: 29 additions & 6 deletions packages/clay-css/src/scss/atlas/variables/_custom-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,38 @@ $custom-control-indicator-border-style: solid !default;
$custom-control-indicator-border-width: 0.0625rem !default; // 1px
$custom-control-indicator-box-shadow: none !default;

$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px lighten($component-active-bg, 22.94) !default;

$custom-control-indicator-active-bg: #FFF !default;
$custom-control-indicator-active-border-color: $custom-control-indicator-border-color !default;
$custom-control-indicator-active-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !default;
$custom-control-indicator-active-checked-bg: $component-active-bg !default;
$custom-control-indicator-active-checked-border-color: $custom-control-indicator-active-checked-bg !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px lighten($component-active-bg, 22.94) !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-active-checked-bg !default;
$custom-control-indicator-indeterminate-border-color: $custom-control-indicator-active-checked-bg !default;

$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
$custom-control-indicator-disabled-border-color: $input-disabled-border-color !default;

// Custom Control Indicator Checked

// $custom-control-indicator-active-checked-bg is deprecated as of v2.2.1
$custom-control-indicator-active-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-active-bg: $custom-control-indicator-active-checked-bg !default;

// $custom-control-indicator-active-checked-border-color is deprecated as of v2.2.1
$custom-control-indicator-active-checked-border-color: $custom-control-indicator-checked-active-bg !default;
$custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default;

$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-active-bg !default;

// $custom-control-indicator-disabled-checked-bg is deprecated as of v2.2.1
$custom-control-indicator-disabled-checked-bg: lighten($component-active-bg, 32.94) !default;
$custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disabled-checked-bg !default;

// $custom-control-indicator-disabled-checked-border-color is deprecated as of v2.2.1
$custom-control-indicator-disabled-checked-border-color: $custom-control-indicator-disabled-checked-bg !default;
$custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;

// Custom Control Indicator Indeterminate

$custom-control-indicator-indeterminate-border-color: $custom-control-indicator-checked-active-bg !default;

// Custom Control Description

Expand All @@ -38,4 +58,7 @@ $custom-checkbox-indicator-border-radius: 0.125rem !default; // 2px
$custom-radio-indicator-icon-checked-bg-size: 70% !default;

$custom-radio-indicator-disabled-border-color: $custom-control-indicator-disabled-bg !default;
$custom-radio-indicator-disabled-checked-border-color: $custom-control-indicator-disabled-checked-border-color !default;

// $custom-radio-indicator-disabled-checked-border-color is deprecated as of v2.2.1
$custom-radio-indicator-disabled-checked-border-color: $custom-control-indicator-disabled-checked-border-color !default;
$custom-radio-indicator-checked-disabled-border-color: $custom-radio-indicator-disabled-checked-border-color !default;
14 changes: 7 additions & 7 deletions packages/clay-css/src/scss/components/_custom-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@
}

&:active:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-active-checked-bg;
border-color: $custom-control-indicator-active-checked-border-color;
background-color: $custom-control-indicator-checked-active-bg;
border-color: $custom-control-indicator-checked-active-border-color;
}

&:checked ~ .custom-control-label::before {
Expand All @@ -122,8 +122,8 @@
}

&:disabled:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-disabled-checked-bg;
border-color: $custom-control-indicator-disabled-checked-border-color;
background-color: $custom-control-indicator-checked-disabled-bg;
border-color: $custom-control-indicator-checked-disabled-border-color;
}
}

Expand All @@ -149,8 +149,8 @@
}

&:disabled:indeterminate ~ .custom-control-label::before {
background-color: $custom-control-indicator-disabled-checked-bg;
border-color: $custom-control-indicator-disabled-checked-border-color;
background-color: $custom-control-indicator-checked-disabled-bg;
border-color: $custom-control-indicator-checked-disabled-border-color;
}
}
}
Expand All @@ -168,7 +168,7 @@
}

&:disabled:checked ~ .custom-control-label::before {
border-color: $custom-radio-indicator-disabled-checked-border-color;
border-color: $custom-radio-indicator-checked-disabled-border-color;
}
}
}
Expand Down
30 changes: 26 additions & 4 deletions packages/clay-css/src/scss/variables/_custom-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,33 @@ $custom-control-indicator-border-style: null !default;
$custom-control-indicator-border-width: null !default;

$custom-control-indicator-active-border-color: null !default;

$custom-control-indicator-disabled-border-color: null !default;
$custom-control-indicator-disabled-cursor: $disabled-cursor !default;

// Custom Control Indicator Checked

// $custom-control-indicator-active-checked-bg is deprecated as of v2.2.1
$custom-control-indicator-active-checked-bg: null !default;
$custom-control-indicator-checked-active-bg: $custom-control-indicator-active-checked-bg !default;

// $custom-control-indicator-active-checked-border-color is deprecated as of v2.2.1
$custom-control-indicator-active-checked-border-color: null !default;
$custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default;

$custom-control-indicator-checked-border-color: null !default;
$custom-control-indicator-indeterminate-border-color: null !default;
$custom-control-indicator-disabled-border-color: null !default;

// $custom-control-indicator-disabled-checked-bg is deprecated as of v2.2.1
$custom-control-indicator-disabled-checked-bg: null !default;
$custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disabled-checked-bg !default;

// $custom-control-indicator-disabled-checked-border-color is deprecated as of v2.2.1
$custom-control-indicator-disabled-checked-border-color: null !default;
$custom-control-indicator-disabled-cursor: $disabled-cursor !default;
$custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;

// Custom Control Indicator Indeterminate

$custom-control-indicator-indeterminate-border-color: null !default;

// Custom Description

Expand All @@ -30,4 +49,7 @@ $custom-checkbox-indicator-icon-indeterminate-bg-size: null !default;
$custom-radio-indicator-icon-checked-bg-size: null !default;

$custom-radio-indicator-disabled-border-color: null !default;
$custom-radio-indicator-disabled-checked-border-color: null !default;

// $custom-radio-indicator-disabled-checked-border-color is deprecated as of v2.2.1
$custom-radio-indicator-disabled-checked-border-color: null !default;
$custom-radio-indicator-checked-disabled-border-color: $custom-radio-indicator-disabled-checked-border-color !default;

0 comments on commit 0e30835

Please sign in to comment.