Create fancySelect.scss

fancySelect.scss

@@ -0,0 +1,120 @@
+.fancy-select {
+	position: relative;
+	font-weight: bold;
+	text-transform: uppercase;
+	font-size: 13px;
+	color: #46565D;
+
+    &.disabled {
+    	opacity: 0.5;
+    }
+
+    select:focus + div.trigger {
+    	box-shadow: 0 0 0 2px #4B5468;
+
+        &.open {
+        	box-shadow: none;
+        }
+    }
+
+    div.trigger {
+    	border-radius: 4px;
+    	cursor: pointer;
+    	padding: 10px 24px 9px 9px;
+    	white-space: nowrap;
+    	overflow: hidden;
+    	text-overflow: ellipsis;
+    	position: relative;
+    	background: #99A5BE;
+    	border: 1px solid #99A5BE;
+    	border-top-color: #A5B2CB;
+    	color: #4B5468;
+    	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    	width: 200px;
+
+    	transition: all 240ms ease-out;
+
+        &:after{
+            content: "";
+        	display: block;
+        	position: absolute;
+        	width: 0;
+        	height: 0;
+        	border: 5px solid transparent;
+        	border-top-color: #4B5468;
+        	top: 20px;
+        	right: 9px;
+        }
+
+        &.open{
+            background: #4A5368;
+        	border: 1px solid #475062;
+        	color: #7A8498;
+        	box-shadow: none;
+
+            &:after{
+                border-top-color: #7A8498;
+            }
+        }
+    }
+
+    ul.options {
+    	list-style: none;
+    	margin: 0;
+    	position: absolute;
+    	top: 40px;
+    	left: 0;
+    	visibility: hidden;
+    	opacity: 0;
+    	z-index: 50;
+    	max-height: 200px;
+    	overflow: auto;
+    	background: #62C8BF;
+    	border-radius: 4px;
+    	border-top: 1px solid #7DD8D2;
+    	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    	min-width: 200px;
+
+    	transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
+
+        &.open {
+        	visibility: visible;
+        	top: 50px;
+        	opacity: 1;
+
+        	transition: opacity 300ms ease-out, top 300ms ease-out;
+        }
+
+        &.overflowing {
+        	top: auto;
+        	bottom: 40px;
+
+        	transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
+
+            &.open {
+            	top: auto;
+            	bottom: 50px;
+
+            	transition: opacity 300ms ease-out, bottom 300ms ease-out;
+            }
+        }
+
+        li {
+        	padding: 8px 12px;
+        	color: #2B8686;
+        	cursor: pointer;
+        	white-space: nowrap;
+
+        	transition: all 150ms ease-out;
+
+            &.selected {
+            	background: rgba(43,134,134,0.3);
+            	color: rgba(255,255,255,0.75);
+            }
+
+            &.hover {
+            	color: #fff;
+            }
+        }
+    }
+}