Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding focus state to input box.

  • Loading branch information...
commit a7cea8b58471ef3515342055a02438a89611c67f 1 parent c152bcb
@brianloveswords authored
Showing with 45 additions and 1 deletion.
  1. +24 −0 css/main.css
  2. +21 −1 css/main.less
View
24 css/main.css
@@ -51,6 +51,12 @@ header[role="main"] {
/* end nav > ul*/
}
+header[role="main"] input::-webkit-input-placeholder {
+ color: #fff;
+}
+header[role="main"] input:-moz-placeholder {
+ color: #fff;
+}
header[role="main"] h1 {
text-indent: -999em;
overflow: hidden;
@@ -190,7 +196,16 @@ section[role="masthead"] p {
section[role="course-search"] {
padding-bottom: 85px;
}
+section[role="course-search"] input::-webkit-input-placeholder {
+ color: #fff;
+}
+section[role="course-search"] input:-moz-placeholder {
+ color: #fff;
+}
section[role="course-search"] input {
+ -moz-transition: all 0.2s;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
background: #bec8d9;
border: 2px solid #f08c00;
color: #fff;
@@ -198,6 +213,15 @@ section[role="course-search"] input {
padding: 7px 18px;
font-size: 17px;
background: #bec8d9 url('/images/icon.loupe.png') no-repeat 605px center;
+ outline: none;
+}
+section[role="course-search"] input:focus {
+ -moz-transition: all 0.2s;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ -webkit-box-shadow: 0 0 4px #f08c00;
+ -moz-box-shadow: 0 0 4px #f08c00;
+ box-shadow: 0 0 4px #f08c00;
}
section[role="course-search"] ul[role="languages"] {
overflow: hidden;
View
22 css/main.less
@@ -17,7 +17,17 @@
height: @height;
width: @width;
}
-
+.transition (@params) {
+ -moz-transition: @params;
+ -webkit-transition: @params;
+ transition: @params;
+}
+.box-shadow(@params) {
+ -webkit-box-shadow: 0 0 4px @orange;
+ -moz-box-shadow: 0 0 4px @orange;
+ box-shadow: 0 0 4px @orange;
+}
+
a { text-decoration: none; }
em { font-style: normal; }
@@ -55,6 +65,8 @@ header[role="main"] {
font-size: 17px;
height: 218px;
margin: 0 0 20px;
+ input::-webkit-input-placeholder { color: #fff;}
+ input:-moz-placeholder { color: #fff; }
h1 { .image-replace('/images/logo.png', 262px, 218px); position: absolute; z-index: 2;}
nav {
position: absolute;
@@ -177,7 +189,10 @@ section[role="masthead"] {
section[role="course-search"] {
padding-bottom: 85px;
+ input::-webkit-input-placeholder { color: #fff;}
+ input:-moz-placeholder { color: #fff; }
input {
+ .transition(all 0.2s);
background: #bec8d9;
border: 2px solid @orange;
color: #fff;
@@ -185,6 +200,11 @@ section[role="course-search"] {
padding: 7px 18px;
font-size: 17px;
background: #bec8d9 url('/images/icon.loupe.png') no-repeat 605px center;
+ outline: none;
+ &:focus {
+ .transition(all 0.2s);
+ .box-shadow(0 0 4px @orange);
+ }
}
ul[role="languages"] {
overflow: hidden;
Please sign in to comment.
Something went wrong with that request. Please try again.