Skip to content

Commit 674e3b4

Browse files
johndjamesonjohndjameson
committed
Add Select structure
1 parent 5dffbe2 commit 674e3b4

3 files changed

Lines changed: 105 additions & 0 deletions

File tree

‎client/stylesheets/application.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
@import 'structures/link'
5959
@import 'structures/message'
6060
@import 'structures/newsletter'
61+
@import 'structures/select'
6162
@import 'structures/state'
6263
@import 'structures/video'
6364

‎client/stylesheets/foundation/_config.sass‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,11 @@ $link--state-color: darken($link-color, 15%)
134134
$link--inverted-color: $c-text-invert
135135
$link--inverted--state-color: rgba($link--inverted-color, 0.5)
136136

137+
// Select
138+
139+
$select-background: $form-input-background
140+
$select-color: $c-text
141+
137142
// ----- Vendor ----- //
138143
139144
$tooltip-background: $slate
@@ -336,6 +341,11 @@ $link-borderWidth: 2px
336341
$link-borderStyle: solid
337342
$link-border: $link-borderWidth $link-borderStyle
338343

344+
// ----- Select ----- //
345+
346+
$select-borderRadius: $b-borderRadius
347+
$select-caret-size: 6px
348+
339349
// -------------------------------------
340350
// Vendor
341351
// -------------------------------------

‎client/stylesheets/structures/_select.sass‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// *************************************
2+
//
3+
// Select
4+
// -> Menu input
5+
//
6+
// Dependencies: .form
7+
//
8+
// -------------------------------------
9+
// Template (Haml)
10+
// -------------------------------------
11+
//
12+
// .select
13+
// %input.select-input
14+
// %option.select-input-option
15+
//
16+
// *************************************
17+
18+
.select
19+
border-radius: $select-borderRadius
20+
border: $b-borderWidth $b-borderStyle darken($c-border, 8%)
21+
color: $select-color
22+
display: block
23+
font-family: $b-fontFamily
24+
font-size: $b-fontSize
25+
position: relative
26+
27+
&::after
28+
border-bottom: $select-caret-size solid transparent
29+
border-left: $select-caret-size solid transparent
30+
border-right: $select-caret-size solid transparent
31+
border-top: $select-caret-size solid
32+
content: ''
33+
display: inline-block
34+
height: 0
35+
line-height: 1
36+
pointer-events: none
37+
position: absolute
38+
right: $b-space
39+
top: calc(50% - 2px) // FIXME: Magic number!
40+
width: 0
41+
42+
// -------------------------------------
43+
// Scaffolding
44+
// -------------------------------------
45+
46+
// ----- Input ----- //
47+
48+
.select-input
49+
-moz-appearance: none
50+
-webkit-appearance: none
51+
appearance: none
52+
background-color: $select-background
53+
border-radius: $select-borderRadius
54+
border: 0
55+
box-shadow: none
56+
box-sizing: border-box
57+
color: $select-color
58+
cursor: pointer
59+
display: block
60+
line-height: $form-shared-lineHeight
61+
margin: 0
62+
outline: 0
63+
padding: $b-space-s $b-space
64+
width: 100%
65+
66+
&:focus
67+
border-color: $c-highlight
68+
69+
&:-moz-focusring
70+
color: transparent
71+
text-shadow: 0 0 0 $select-color
72+
73+
// -------------------------------------
74+
// Browser Support
75+
// -------------------------------------
76+
77+
// ----- Internet Explorer ----- //
78+
79+
// IE9+
80+
81+
@media screen and (min-width:0\0)
82+
83+
.select::after
84+
display: none
85+
86+
// IE10+
87+
88+
.select-input::-ms-expand
89+
display: none
90+
91+
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
92+
93+
.select::after
94+
display: inline-block

0 commit comments

Comments
 (0)