Skip to content

Commit

Permalink
Added focus state to anchor tags within EuiText
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos committed Sep 4, 2018
1 parent 649c900 commit bbf5a3b
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 74 deletions.
111 changes: 37 additions & 74 deletions src-docs/src/views/text/text.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,35 @@
import React from 'react';

import {
EuiText,
EuiHorizontalRule,
} from '../../../../src/components';
import { EuiText, EuiHorizontalRule } from '../../../../src/components';

export default () => (
<div>
<EuiText grow={false}>
<h1>This is Heading One</h1>
<p>
Far out in the uncharted backwaters of the unfashionable end of
the western spiral arm of the Galaxy lies a small unregarded
yellow sun.

When suddenly some wild JavaScript code appeared! <code>const whoa = &quot;!&quot;</code>
Far out in the uncharted backwaters of the <a href="#">unfashionable</a> end of the western
spiral arm of the Galaxy lies a small unregarded yellow sun. When suddenly some wild
JavaScript code appeared! <code>const whoa = &quot;!&quot;</code>
</p>

<pre>
<code>
const completelyUnexpected = &quot;the audacity!&quot;;
</code>
<code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
</pre>

<p>
That was close.
</p>
<p>That was close.</p>

<blockquote>
<p>
I&apos;ve seen things you people wouldn&apos;t believe.
Attack ships on fire off the shoulder of Orion.
I watched C-beams glitter in the dark near the Tannhäuser Gate.
All those moments will be lost in time, like tears in rain. Time to die.
I&apos;ve seen things you people wouldn&apos;t believe. Attack ships on fire off the
shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All
those moments will be lost in time, like tears in rain. Time to die.
</p>
</blockquote>

<p>
Orbiting this at a distance of roughly ninety-two million miles
is an utterly insignificant little blue green planet whose ape-
descended life forms are so amazingly primitive that they still
think digital watches are a pretty neat idea.
Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant
little blue green planet whose ape- descended life forms are so amazingly primitive that
they still think digital watches are a pretty neat idea.
</p>

<ul>
Expand All @@ -50,12 +39,11 @@ export default () => (
</ul>

<p>
This planet has - or rather had - a problem, which was this: most
of the people living on it were unhappy for pretty much of the time.
Many solutions were suggested for this problem, but most of these
were largely concerned with the movements of small green pieces
of paper, which is odd because on the whole it was not the small
green pieces of paper that were unhappy.
This planet has - or rather had - a problem, which was this: most of the people living on it
were unhappy for pretty much of the time. Many solutions were suggested for this problem,
but most of these were largely concerned with the movements of small green pieces of paper,
which is odd because on the whole it was not the small green pieces of paper that were
unhappy.
</p>

<h2>This is Heading Two</h2>
Expand All @@ -67,28 +55,27 @@ export default () => (
</ol>

<p>
But the dog wasn&rsquo;t lazy, it was just
practicing mindfulness, so it had a greater sense of
life-satisfaction than that fox with all its silly jumping.
But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it had a greater sense
of life-satisfaction than that fox with all its silly jumping.
</p>

<p>
And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>, low-hanging
fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>,
low-hanging fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
</p>

<h3>This is Heading Three</h3>

<p>
So it thought the dog was making a poor life choice by focusing so much on mindfulness.
What if its car broke down?
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What
if its car broke down?
</p>

<h4>This is Heading Four</h4>

<p>
So it thought the dog was making a poor life choice by focusing so much on mindfulness.
What if its car broke down?
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What
if its car broke down?
</p>

<h5>This is Heading Five</h5>
Expand All @@ -105,47 +92,23 @@ export default () => (
<EuiHorizontalRule />

<dl>
<dt>
The Elder Scrolls: Morrowind
</dt>
<dd>
The opening music alone evokes such strong memories.
</dd>
<dt>
TIE Fighter
</dt>
<dd>
The sequel to XWING, join the dark side and fly for the Emporer.
</dd>
<dt>
Quake 2
</dt>
<dd>
The game that made me drop out of college.
</dd>
<dt>The Elder Scrolls: Morrowind</dt>
<dd>The opening music alone evokes such strong memories.</dd>
<dt>TIE Fighter</dt>
<dd>The sequel to XWING, join the dark side and fly for the Emporer.</dd>
<dt>Quake 2</dt>
<dd>The game that made me drop out of college.</dd>
</dl>

<EuiHorizontalRule />

<dl className="eui-definitionListReverse">
<dt>
Name
</dt>
<dd>
The Elder Scrolls: Morrowind
</dd>
<dt>
Game style
</dt>
<dd>
Open-world, fantasy, action role-playing
</dd>
<dt>
Release date
</dt>
<dd>
2002
</dd>
<dt>Name</dt>
<dd>The Elder Scrolls: Morrowind</dd>
<dt>Game style</dt>
<dd>Open-world, fantasy, action role-playing</dd>
<dt>Release date</dt>
<dd>2002</dd>
</dl>
</EuiText>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/components/text/_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,12 @@
color: darken($euiLinkColor, 10%);
text-decoration: underline;
}

&:focus {
text-decoration: underline;
outline: solid 3px transparentize($euiLinkColor, .9);
background-color: transparentize($euiLinkColor, .9);
}
}

img {
Expand Down

0 comments on commit bbf5a3b

Please sign in to comment.