Skip to content

Commit f925ea3

Browse files
drewbarontinidrewbarontini
committed
Add Highlight component, apply to some links
1 parent ad717eb commit f925ea3

5 files changed

Lines changed: 113 additions & 3 deletions

File tree

‎client/stylesheets/application.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
@import 'components/cell'
2626
@import 'components/form'
2727
@import 'components/grid'
28+
@import 'components/highlight'
2829
@import 'components/list'
2930
@import 'components/row'
3031
@import 'components/thumb'

‎client/stylesheets/components/_highlight.sass‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
// *************************************
2+
//
3+
// Highlight
4+
// -> Highly stylized link
5+
// Credit: http://www.webdesignerdepot.com/
6+
// CodePen: http://codepen.io/drewbarontini/pen/vOYgwE
7+
//
8+
// -------------------------------------
9+
// Template (Haml)
10+
// -------------------------------------
11+
//
12+
// %a.highlight
13+
//
14+
// *************************************
15+
16+
.highlight
17+
background-image: linear-gradient(to right, rgba(white, 0) 50%, $highlight-background 50%)
18+
background-position: 0 0
19+
background-size: 200% auto
20+
border-bottom: $highlight-border
21+
color: $highlight-color
22+
text-decoration: $highlight-textDecoration
23+
transition: background-position $b-transition
24+
25+
&:active,
26+
&:focus,
27+
&:hover
28+
background-position: -100% 0
29+
color: $highlight-color
30+
31+
// -------------------------------------
32+
// Modifiers
33+
// -------------------------------------
34+
35+
// ----- Bordered ----- //
36+
37+
.highlight--bordered
38+
position: relative
39+
40+
&::after,
41+
&::before
42+
content: ''
43+
height: $highlight--bordered-borderWidth
44+
left: 0
45+
position: absolute
46+
top: 100%
47+
width: 100%
48+
49+
&::after
50+
background: $highlight--bordered-borderColor
51+
52+
&::before
53+
background: $highlight--bordered-cover-background
54+
transform: translateX(0)
55+
transition: transform $b-transition
56+
z-index: 1
57+
58+
&:active,
59+
&:focus,
60+
&:hover
61+
background: none
62+
63+
&::before
64+
transform: translateX(100%)
65+
66+
// Bordered: Modifiers: Alt
67+
68+
.highlight--bordered--alt
69+
70+
&::before
71+
background: $highlight--bordered--alt-cover-background
72+
73+
// Bordered: Modifiers: Inverted
74+
75+
.highlight--bordered--inverted
76+
77+
&::after
78+
background: $highlight-background
79+
80+
&::before
81+
background: $highlight--bordered--inverted-cover-background
82+
83+
// Bordered: States: Active
84+
85+
.highlight--bordered.is-active
86+
87+
&::before
88+
display: none

‎client/stylesheets/foundation/_config.sass‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,16 @@ $form-input--dark--focus-color: shade($form-input--dark-color, 10%)
7979
$form-input--dark-background: shade($form-input--dark-color, 25%)
8080
$form-input--dark--focus-background: shade($form-input--dark-color, 30%)
8181

82+
// Highlight
83+
84+
$highlight-background: $c-highlight
85+
$highlight--bordered--alt-cover-background: $regent
86+
$highlight--bordered-borderColor: $c-background
87+
$highlight--bordered-cover-background: $c-highlight
88+
$highlight--bordered--inverted-cover-background: $c-background
89+
$highlight--bordered--inverted-borderColor: $highlight-background
90+
$highlight-color: $c-text
91+
8292
// ----- Sector ----- //
8393
8494
$sector--white-background: $white
@@ -215,6 +225,17 @@ $g-silent: false
215225
216226
$g-selector: if($g-silent, unquote("%"), unquote("."))
217227

228+
// ----- Highlight ----- //
229+
230+
// Borders
231+
232+
$highlight-border: 0
233+
$highlight--bordered-borderWidth: $b-borderWidth
234+
235+
// Text
236+
237+
$highlight-textDecoration: none
238+
218239
// -------------------------------------
219240
// Structures
220241
// -------------------------------------

‎views/flow/index.jade‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ block content
4444
img.thumb(src='http://placehold.it/40')
4545
.bucket-content
4646
h2.h.h--3
47-
a.tct.twb(href='#') This is an Article's Title in Title Case
47+
a.highlight.highlight--bordered.highlight--bordered--inverted.tct.twb(href='#') This is an Article's Title in Title Case
4848
p.tcs.tfh Given Surname | 3 hours ago
4949
p.mbf.
5050
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

‎views/partials/_header.jade‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ header.row.header.layout-header(class=(headerPartial.bleed ? 'bc-regent' : '' ))
1616
nav.split-cell
1717
each url, title in menu
1818
if current_page == title
19-
a.header-link.is-active(href=url)= title
19+
a.header-link.highlight.highlight--bordered.is-active(href=url class=(headerPartial.bleed ? 'highlight--bordered--alt' : '' ))= title
2020
else
21-
a.header-link(href=url)= title
21+
a.highlight.highlight--bordered.header-link(href=url class=(headerPartial.bleed ? 'highlight--bordered--alt' : '' ))= title

0 commit comments

Comments
 (0)