Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Checkbox] refactor indicators style #2721

Merged
merged 8 commits into from
Jul 24, 2018
Merged

[Checkbox] refactor indicators style #2721

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
75deb07
Basic ::before styles at the top
Jul 24, 2018
7bff901
Indicator uses 1em for size
Jul 24, 2018
986a24a
Radio indicator::before uses radial-gradient
Jul 24, 2018
c5a6335
Switch indicator-colors() mixin for legibility
Jul 24, 2018
b4f83e1
Remove unused Switch variables
Jul 24, 2018
96a0dac
move large modifier up to general section
Jul 24, 2018
c99cc7e
lint
Jul 24, 2018
acd71b2
opacity for disabled radio
Jul 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Basic ::before styles at the top
  • Loading branch information
Gilad Gray committed Jul 24, 2018
commit 75deb073dc9f6f82e6d1bb20cc46e4a4b5642775
20 changes: 7 additions & 13 deletions packages/core/src/components/forms/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,13 @@ $control-indicator-spacing: $pt-grid-size !default;
height: $control-indicator-size;
vertical-align: middle;
user-select: none;

&::before {
display: inline-block;
width: 1em;
height: 1em;
content: "";
}
}

&:hover .#{$ns}-control-indicator {
Expand Down Expand Up @@ -190,13 +197,6 @@ $control-indicator-spacing: $pt-grid-size !default;

.#{$ns}-control-indicator {
border-radius: $pt-border-radius;

&::before {
display: block;
width: 100%;
height: 100%;
content: "";
}
}

input:checked ~ .#{$ns}-control-indicator {
Expand Down Expand Up @@ -237,16 +237,12 @@ $control-indicator-spacing: $pt-grid-size !default;
}

input:checked ~ .#{$ns}-control-indicator::before {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: $white;
width: 1em;
height: 1em;
content: "";
}

input:checked:disabled ~ .#{$ns}-control-indicator::before {
Expand Down Expand Up @@ -320,7 +316,6 @@ $control-indicator-spacing: $pt-grid-size !default;
transition: background-color $pt-transition-duration $pt-transition-ease;

&::before {
display: block;
position: relative;
top: $switch-indicator-margin;
left: $switch-indicator-margin;
Expand All @@ -330,7 +325,6 @@ $control-indicator-spacing: $pt-grid-size !default;
background-clip: padding-box;
width: $switch-height - ($switch-indicator-margin * 2);
height: $switch-height - ($switch-indicator-margin * 2);
content: "";
transition: left $pt-transition-duration $pt-transition-ease;
}
}
Expand Down