Skip to content
Permalink
Browse files

fix(visual-picker): add focus styling (#3093)

  • Loading branch information...
engai committed Feb 22, 2018
1 parent 42cb1d0 commit cbd07e9eace9201818b3a8ad17df0df51e6a3c03
@@ -57,6 +57,10 @@
box-shadow: $elevation-shadow-4;
}

&:focus ~ label .slds-visual-picker__body > *:first-child {
text-decoration: underline;
}

/**
* @summary Non-selected state
* @selector .slds-is-not-selected
@@ -17,6 +17,12 @@ import { UtilityIcon } from '../../icons/base/example';
// Partial(s)
/// ////////////////////////////////////////

export const Option = props => (
<span className="slds-text-title" key={_.uniqueId()}>
{props.label}
</span>
);

export let VisualPicker = props => {
const uniqueId = _.uniqueId('visual-picker-');

@@ -139,15 +145,15 @@ export default (
icon
sprite="utility"
symbol="connected_apps"
label="Connected App"
label={<Option label="Connected App" />}
size="medium"
/>
<VisualPicker
type="radio"
icon
sprite="utility"
symbol="custom_apps"
label="Custom App"
label={<Option label="Custom App" />}
size="medium"
/>
</FormElementControl>
@@ -167,7 +173,7 @@ export let states = [
icon
sprite="utility"
symbol="connected_apps"
label="Connected App"
label={<Option label="Connected App" />}
size="medium"
/>
<VisualPicker
@@ -176,7 +182,7 @@ export let states = [
icon
sprite="utility"
symbol="custom_apps"
label="Custom App"
label={<Option label="Custom App" />}
size="medium"
/>
</FormElementControl>
@@ -198,23 +204,23 @@ export let examples = [
icon
sprite="standard"
symbol="account"
label="Account"
label={<Option label="Account" />}
size="medium"
/>
<VisualPicker
type="checkbox"
icon
sprite="standard"
symbol="lead"
label="Lead"
label={<Option label="Lead" />}
size="medium"
/>
<VisualPicker
type="checkbox"
icon
sprite="standard"
symbol="orders"
label="Orders"
label={<Option label="Orders" />}
size="medium"
/>
</FormElementControl>
@@ -22,11 +22,15 @@

+ .slds-visual-picker_vertical {
margin-left: 0;
margin-top: $spacing-large;
margin-top: $spacing-medium;
}

.slds-visual-picker__figure,
.slds-visual-picker__body {
width: $size-large;
}

input:focus ~ label .slds-visual-picker__text .slds-text-heading_medium {
text-decoration: underline;
}
}

0 comments on commit cbd07e9

Please sign in to comment.
You can’t perform that action at this time.