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

Jump to bottom

fix(switch): moved nested element rules to the root #2610

Merged
merged 2 commits into from Feb 7, 2020
Merged

fix(switch): moved nested element rules to the root #2610

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58c4bf6
fix(switch): moved nested element rules to the root
mcoker Jan 24, 2020
981dea3
chore(switch): rearranged vars, commented var order
mcoker Jan 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
192 changes: 97 additions & 95 deletions src/patternfly/components/Switch/switch.scss
View file
Open in desktop
@@ -1,9 +1,19 @@
.pf-c-switch {
// Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
--pf-c-switch--FontSize: var(--pf-global--FontSize--md);

// Switch icon
--pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
--pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
--pf-c-switch__toggle-icon--PaddingLeft: calc(var(--pf-c-switch--FontSize) * .4); // during breaking change period, remove this and make it the value for `left`
--pf-c-switch__toggle-icon--Top: 50%;
--pf-c-switch__toggle-icon--Left: 0; // This var is sized relative to the switch's font size, so that it scales responsively.
--pf-c-switch__toggle-icon--Transform: translateY(-50%);
--pf-c-switch__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.

// Switch
--pf-c-switch--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
--pf-c-switch--Width: calc(var(--pf-c-switch--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
--pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
--pf-c-switch--FontSize: var(--pf-global--FontSize--md);
--pf-c-switch--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));

// Switch input
--pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
Expand All @@ -17,15 +27,6 @@
--pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
--pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);

// Switch icon
--pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
--pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
--pf-c-switch__toggle-icon--PaddingLeft: calc(var(--pf-c-switch--FontSize) * .4); // during breaking change period, remove this and make it the value for `left`
--pf-c-switch__toggle-icon--Top: 50%;
--pf-c-switch__toggle-icon--Left: 0; // This var is sized relative to the switch's font size, so that it scales responsively.
--pf-c-switch__toggle-icon--Transform: translateY(-50%);
--pf-c-switch__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.

// Switch toggle
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
--pf-c-switch__toggle--BorderRadius: var(--pf-c-switch--Height);
Expand All @@ -38,6 +39,9 @@
--pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
--pf-c-switch__toggle--before--Transition: transform .25s ease 0s;

// Switch
--pf-c-switch--Width: calc(var(--pf-c-switch--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));

// Switch label
--pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
--pf-c-switch__label--FontSize: var(--pf-c-switch--FontSize); // remove at breaking change period
Expand All @@ -52,112 +56,110 @@
line-height: var(--pf-c-switch--LineHeight);
vertical-align: middle;
cursor: pointer;
}

.pf-c-switch__input {
position: absolute;
cursor: pointer;
opacity: 0;
.pf-c-switch__input {
position: absolute;
cursor: pointer;
opacity: 0;

&:focus ~ .pf-c-switch__toggle {
outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
&:focus ~ .pf-c-switch__toggle {
outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
}

&:checked {
~ .pf-c-switch__label {
color: var(--pf-c-switch__input--checked__label--Color);
}

// stylelint-disable
&:checked {
~ .pf-c-switch__label {
color: var(--pf-c-switch__input--checked__label--Color);
~ .pf-c-switch__toggle {
background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);

&::before {
transform: var(--pf-c-switch__input--checked__toggle--before--Transform);
}
}

~ .pf-c-switch__toggle {
background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
~ .pf-m-off {
display: none;
}
}

&::before {
transform: var(--pf-c-switch__input--checked__toggle--before--Transform);
}
}
&:not(:checked) {
~ .pf-c-switch__label {
color: var(--pf-c-switch__input--not-checked__label--Color);
}

~ .pf-m-off {
~ .pf-c-switch__toggle {
.pf-c-switch__toggle-icon {
display: none;
visibility: hidden;
}
}

&:not(:checked) {
~ .pf-c-switch__label {
color: var(--pf-c-switch__input--not-checked__label--Color);
}
~ .pf-m-on {
display: none;
}
}

~ .pf-c-switch__toggle {
.pf-c-switch__toggle-icon {
display: none;
visibility: hidden;
}
}
&:disabled {
cursor: not-allowed;

~ .pf-m-on {
display: none;
}
~ .pf-c-switch__label {
color: var(--pf-c-switch__input--disabled__label--Color);
cursor: not-allowed;
}

&:disabled {
~ .pf-c-switch__toggle {
cursor: not-allowed;
background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);

~ .pf-c-switch__label {
color: var(--pf-c-switch__input--disabled__label--Color);
cursor: not-allowed;
&::before {
background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
}

~ .pf-c-switch__toggle {
cursor: not-allowed;
background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);

&::before {
background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
}
}
}
}
// stylelint-enable

.pf-c-switch__toggle {
position: relative;
display: inline-block;
width: var(--pf-c-switch--Width);
height: var(--pf-c-switch--Height);
background-color: var(--pf-c-switch__toggle--BackgroundColor);
border-radius: var(--pf-c-switch__toggle--BorderRadius);

&::before {
position: absolute;
top: var(--pf-c-switch__toggle--before--Top);
left: var(--pf-c-switch__toggle--before--Left);
display: block;
width: var(--pf-c-switch__toggle--before--Width);
height: var(--pf-c-switch__toggle--before--Height);
content: "";
background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
transition: var(--pf-c-switch__toggle--before--Transition);
}
}
}

.pf-c-switch__toggle-icon {
.pf-c-switch__toggle {
position: relative;
display: inline-block;
width: var(--pf-c-switch--Width);
height: var(--pf-c-switch--Height);
background-color: var(--pf-c-switch__toggle--BackgroundColor);
border-radius: var(--pf-c-switch__toggle--BorderRadius);

&::before {
position: absolute;
top: var(--pf-c-switch__toggle-icon--Top);
left: var(--pf-c-switch__toggle-icon--Left);
padding-left: var(--pf-c-switch__toggle-icon--PaddingLeft);
font-size: var(--pf-c-switch__toggle-icon--FontSize);
color: var(--pf-c-switch__toggle-icon--Color);
transform: var(--pf-c-switch__toggle-icon--Transform);
top: var(--pf-c-switch__toggle--before--Top);
left: var(--pf-c-switch__toggle--before--Left);
display: block;
width: var(--pf-c-switch__toggle--before--Width);
height: var(--pf-c-switch__toggle--before--Height);
content: "";
background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
transition: var(--pf-c-switch__toggle--before--Transition);
}
}

.pf-c-switch__label {
display: inline-block;
padding-left: var(--pf-c-switch__label--PaddingLeft);
font-weight: var(--pf-c-switch__label--FontWeight); // remove at breaking change
line-height: var(--pf-c-switch__label--LineHeight); // remove at breaking change
color: var(--pf-c-switch__label--Color);
vertical-align: top;
}
.pf-c-switch__toggle-icon {
position: absolute;
top: var(--pf-c-switch__toggle-icon--Top);
left: var(--pf-c-switch__toggle-icon--Left);
padding-left: var(--pf-c-switch__toggle-icon--PaddingLeft);
font-size: var(--pf-c-switch__toggle-icon--FontSize);
color: var(--pf-c-switch__toggle-icon--Color);
transform: var(--pf-c-switch__toggle-icon--Transform);
}

.pf-c-switch__label {
display: inline-block;
padding-left: var(--pf-c-switch__label--PaddingLeft);
font-weight: var(--pf-c-switch__label--FontWeight); // remove at breaking change
line-height: var(--pf-c-switch__label--LineHeight); // remove at breaking change
color: var(--pf-c-switch__label--Color);
vertical-align: top;
}