From dc7731cd889fac40b0553ffa63332b7f78458b59 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Thu, 14 May 2015 20:05:36 +0200
Subject: [PATCH] Styled sorting select element #98

---
 dist/main.css            | Bin 35159 -> 36065 bytes
 dist/main.js             | Bin 176310 -> 176501 bytes
 src/scripts/settings.js  |  54 ++++++++++++++++++++---------------
 src/styles/_message.scss |  59 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/dist/main.css b/dist/main.css
index 9ed0a91ce63b1e4da8d1db986b7499f44add887a..8cacfed74fdb461ef8b696a1a4334f3663cf77fb 100644
GIT binary patch
delta 712
zcmZuvziSjh6vh-u6O188#2?_A5Q5-_-8(hsOe35MLV_F^JBzv5+1(+tGsEoMZMcx!
z#X@46S6Svi5Cls*D=Q1J*4oC}#@Xx!PcGGi?|r=Q2k-mI%#U|7i;rkZOwO#gvh(7p
z-(JD*+as7CUuoRk=#iY$Z50vWZRAWaYT@e$!>_|dcs4qQo8xbw$8+%b=+$hsKG|O0
z)GFteD~Svf#PR{d88Hc$DAar2eZ7Y@i6Sl&6ySnKHbr3=I25+#uR(Ay3!gg+@TIs8
ze_r0mns;!lr1f(?WRB-(f=lM7j3=o@;R6S#0W+~s1xk4oF^N^*mK=B8Ei9)*_(bqT
zqRj0DJGdYeLL|1#0O>9X>g1TTX#MBg({*glblOhFDvj>BNtI9rtu~tvTTeQZ=1MP9
z=FZF)mD|lAz*=#4-uP_bG;-)JEQM8ZUN!dXsvNT}$!U6}eqB{FScC5Ct7{il(NiX3
z#wD*ifa6=YMSy#R?j}a{W#m`xtsyek#5fO=OP-O0A*m$8ex`;#(V7uQrRQM5db`|C
z;s1DLpvHfJP^@S_--l1b<xc%VbyQF3@=K-@PZ~z6aU7p_-fFer(qRLh?=&ENa~Xb*
Lw?3R6eVqFXfiMTN

delta 63
zcmaDjlj-^-rpW<}A{$jz>L>rL6P&!WzGHHLm&D}OdgaNU^#VY?;N+l&Ba`p9_)NB|
SVV^A97z<>xZ#HUO&kg`@MH_nn

diff --git a/dist/main.js b/dist/main.js
index c26d0955ed7f0f991eac9fcc9d4bececbf0dc034..eeee61e45563e89550de4cf8d33975f13030b4db 100644
GIT binary patch
delta 413
zcmdn?kn8Isu7(!IEldds5(SBQ3duQ%#l^NUO2w%;smUcVN_H`MoYNJOm?WncCoqXj
z-<rrIFnwAAlj8K$WG2Ds`;wTXA!09*m^2_P`D7;f>28Tkd`33<#XuuLCICTZo<d?C
zglPj3#$!`SB9kb@te445av+xebQhq-Y!Cyd+ok|*jf-L8oGy^WB!<`7x)5_>l7Mak
zySO`vNg1!(!S)GE_eo}w0;w|u+f1fc6sDg^X5z!+mF+;UZ0BL*n*ODLY2WnVLMGwq
PAM%;Rw%;jax@89dzJ`T7

delta 263
zcmezRh-=$Ju7(!IEldds(-$Q%2~VGxz$7w#Spt&*h~S@YlguOoVPzyUX+T&Dl9^<u
zn<g>wvuEZhB<98BO`ns*BstwGjfrRaxkM&Th^m<>OmfrNl9=?sN~bfY0?mz!0m|kj
zF^PffQU|FMo_;rpNgASqBbiAB!op#z97Oh9GLsa9^&^={5yK@4)2maM_#g^U9kCtg
ahz&f`w-hq%W8|8?u$W16`|Kj7TXp~g5LQh9

diff --git a/src/scripts/settings.js b/src/scripts/settings.js
index c268b30..eda7102 100644
--- a/src/scripts/settings.js
+++ b/src/scripts/settings.js
@@ -321,35 +321,43 @@ settings.setSorting = function() {
 	msg =	`
 			<p>
 				Sort albums by
-				<select id='settings_albums_type'>
-					<option value='id'>Creation Time</option>
-					<option value='title'>Title</option>
-					<option value='description'>Description</option>
-					<option value='public'>Public</option>
-				</select>
+				<span class="select">
+					<select id='settings_albums_type'>
+						<option value='id'>Creation Time</option>
+						<option value='title'>Title</option>
+						<option value='description'>Description</option>
+						<option value='public'>Public</option>
+					</select>
+				</span>
 				in an
-				<select id='settings_albums_order'>
-					<option value='ASC'>Ascending</option>
-					<option value='DESC'>Descending</option>
-				</select>
+				<span class="select">
+					<select id='settings_albums_order'>
+						<option value='ASC'>Ascending</option>
+						<option value='DESC'>Descending</option>
+					</select>
+				</span>
 				order.
 			</p>
 			<p>
 				Sort photos by
-				<select id='settings_photos_type'>
-					<option value='id'>Upload Time</option>
-					<option value='takestamp'>Take Date</option>
-					<option value='title'>Title</option>
-					<option value='description'>Description</option>
-					<option value='public'>Public</option>
-					<option value='star'>Star</option>
-					<option value='type'>Photo Format</option>
-				</select>
+				<span class="select">
+					<select id='settings_photos_type'>
+						<option value='id'>Upload Time</option>
+						<option value='takestamp'>Take Date</option>
+						<option value='title'>Title</option>
+						<option value='description'>Description</option>
+						<option value='public'>Public</option>
+						<option value='star'>Star</option>
+						<option value='type'>Photo Format</option>
+					</select>
+				</span>
 				in an
-				<select id='settings_photos_order'>
-					<option value='ASC'>Ascending</option>
-					<option value='DESC'>Descending</option>
-				</select>
+				<span class="select">
+					<select id='settings_photos_order'>
+						<option value='ASC'>Ascending</option>
+						<option value='DESC'>Descending</option>
+					</select>
+				</span>
 				order.
 			</p>
 			`
diff --git a/src/styles/_message.scss b/src/styles/_message.scss
index 159f49f..a3a4898 100644
--- a/src/styles/_message.scss
+++ b/src/styles/_message.scss
@@ -172,6 +172,65 @@
 		}
 	}
 
+	/* Select ------------------------------------------------*/
+	.select {
+		display: inline-block;
+		position: relative;
+		margin: 1px 5px;
+		padding: 0;
+		width: 110px;
+		background: black(.3);
+		color: #fff;
+		border-radius: 3px;
+		border: 1px solid black(.2);
+		box-shadow: 0 1px 0 white(.02);
+		font-size: 11px;
+		line-height: 16px;
+		overflow: hidden;
+		outline: 0;
+		vertical-align: middle;
+
+		&::after {
+			position: absolute;
+			content: '≡';
+			right: 8px;
+			top: 4px;
+			color: $colorBlue;
+			font-size: 16px;
+			line-height: 16px;
+			font-weight: bold;
+			pointer-events: none;
+		}
+
+		select {
+			margin: 0;
+			padding: 4px 8px;
+			width: 120%;
+			color: #fff;
+			font-size: 11px;
+			line-height: 16px;
+			border: 0;
+			outline: 0;
+			box-shadow: none;
+			border-radius: 0;
+			background-color: transparent;
+			background-image: none;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			appearance: none;
+
+			&:focus { outline: none; }
+		}
+
+		select option {
+			margin: 0;
+			padding: 0;
+			background: #fff;
+			color: #333;
+			transition: none;
+		}
+	}
+
 	/* Version ------------------------------------------------*/
 	.version {
 		margin: -5px 0 0;