Skip to content

Commit

Permalink
feat(@clayui/css): Cadmin Custom Forms custom-control, `custom-chec…
Browse files Browse the repository at this point in the history 
…kbox`, and `custom-radio` convert to using Sass map pattern
  • Loading branch information
@pat270
pat270 committed Oct 25, 2021
1 parent d60970d commit c8826b2
Show file tree
Hide file tree
Showing 2 changed files with 277 additions and 185 deletions.
180 changes: 15 additions & 165 deletions packages/clay-css/src/scss/cadmin/components/_custom-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,15 @@
@include clay-css($cadmin-custom-control);

&:only-child {
margin-bottom: 0;
$only-child: setter(map-get($cadmin-custom-control, only-child), ());

@include clay-css($only-child);
}

label {
cursor: map-get($cadmin-custom-control-label, cursor);
display: inline;
font-size: $cadmin-font-size-base;
margin-bottom: 0;
$label: setter(map-get($cadmin-custom-control, label), ());

@include clay-css($label);
}
}

Expand All @@ -82,7 +83,7 @@
}

label.custom-control-label {
font-size: map-get($cadmin-custom-control-label, font-size);
@include clay-css($cadmin-label-custom-control-label);
}

.custom-control-label-text {
Expand All @@ -105,182 +106,31 @@ label.custom-control-label {
// Custom Control Indicator

.custom-control-label::before {
background-color: $cadmin-custom-control-indicator-bg;
border-color: $cadmin-custom-control-indicator-border-color;
border-style: $cadmin-custom-control-indicator-border-style;
border-width: $cadmin-custom-control-indicator-border-width;

@include box-shadow($cadmin-custom-control-indicator-box-shadow);

content: '';
display: block;
float: left;
font-size: $cadmin-custom-control-indicator-size;
height: $cadmin-custom-control-indicator-size;
left: 0;
position: relative;
top: $cadmin-custom-control-indicator-position-top;

@include transition($cadmin-custom-forms-transition);
$before: setter(map-get($cadmin-custom-control-label, before), ());

width: $cadmin-custom-control-indicator-size;
@include clay-css($before);
}

.custom-control-label::after {
background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size};
content: '';
display: block;
height: $cadmin-custom-control-indicator-size;
left: 0;
position: absolute;
top: $cadmin-custom-control-indicator-position-top;
width: $cadmin-custom-control-indicator-size;
}

.custom-control-input {
cursor: $cadmin-form-check-input-cursor;
height: $cadmin-custom-control-indicator-size;
left: 0;
opacity: 0;
position: absolute;
top: $cadmin-custom-control-indicator-position-top;
width: $cadmin-custom-control-indicator-size;
z-index: 1;

&:focus ~ .custom-control-label::before {
@if $cadmin-enable-shadows {
box-shadow: $cadmin-input-box-shadow, $cadmin-input-focus-box-shadow;
} @else {
box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
}
}

&:focus:not(:checked) ~ .custom-control-label::before {
border-color: $cadmin-custom-control-indicator-focus-border-color;
}

&:active ~ .custom-control-label::before {
background-color: $cadmin-custom-control-indicator-active-bg;
border-color: $cadmin-custom-control-indicator-active-border-color;
$after: setter(map-get($cadmin-custom-control-label, after), ());

@include box-shadow($cadmin-custom-control-indicator-active-box-shadow);

color: $cadmin-custom-control-indicator-active-color;
}

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

&:checked ~ .custom-control-label::before {
@include gradient-bg($cadmin-custom-control-indicator-checked-bg);

border-color: $cadmin-custom-control-indicator-checked-border-color;

@include box-shadow(
$cadmin-custom-control-indicator-checked-box-shadow
);

color: $cadmin-custom-control-indicator-checked-color;
}

// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247

&[disabled],
&:disabled {
cursor: $cadmin-custom-control-indicator-disabled-cursor;

~ .custom-control-label::before {
background-color: $cadmin-custom-control-indicator-disabled-bg;
border-color: $cadmin-custom-control-indicator-disabled-border-color;
box-shadow: none;
}

~ .custom-control-label {
@include clay-container($cadmin-custom-control-label-disabled);
}
}

&:disabled:checked ~ .custom-control-label::before {
background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
border-color: $cadmin-custom-control-indicator-checked-disabled-border-color;
}
@include clay-css($after);
}

.custom-control .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
.custom-control-input {
@include clay-custom-control-input-variant($cadmin-custom-control-input);
}

// Custom Checkbox

.custom-checkbox {
.custom-control-input {
&:checked ~ .custom-control-label::after {
background-image: escape-svg(
$cadmin-custom-checkbox-indicator-icon-checked
);
background-size: $cadmin-custom-checkbox-indicator-icon-checked-bg-size;
}

&:indeterminate ~ .custom-control-label::before {
@include gradient-bg(
$cadmin-custom-checkbox-indicator-indeterminate-bg
);

border-color: $cadmin-custom-control-indicator-indeterminate-border-color;

@include box-shadow(
$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
);
}

&:indeterminate ~ .custom-control-label::after {
background-image: escape-svg(
$cadmin-custom-checkbox-indicator-icon-indeterminate
);
background-size: $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size;
}

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

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

.custom-control-label::before {
@include border-radius($cadmin-custom-checkbox-indicator-border-radius);
}
@include clay-custom-control-variant($cadmin-custom-checkbox);
}

// Custom Radio

.custom-radio {
.custom-control-input {
&:checked ~ .custom-control-label::after {
background-image: escape-svg(
$cadmin-custom-radio-indicator-icon-checked
);
background-size: $cadmin-custom-radio-indicator-icon-checked-bg-size;
}

&:disabled ~ .custom-control-label::before {
border-color: $cadmin-custom-radio-indicator-disabled-border-color;
}

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

.custom-control-label::before {
border-radius: $cadmin-custom-radio-indicator-border-radius;
}
@include clay-custom-control-variant($cadmin-custom-radio);
}

// Custom Control Inline
Expand Down
Loading

0 comments on commit c8826b2

Please sign in to comment.