Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/scss/components/_search-form.scss

Issue 29485575: Issue 5385 - Create Site Header Component for Help Center (Closed)
Patch Set: Addressed NITs Created Aug. 21, 2017, 3:21 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « static/scss/base/_variables.scss ('k') | static/scss/content/_typography.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH
3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version.
8 //
9 // help.eyeo.com is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details.
13 //
14 // You should have received a copy of the GNU General Public License
15 // along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
16
17 #site-search
18 {
19 display: none;
20 clear: both;
21
22 &.open
23 {
24 display: block;
25 }
26
27 @media (min-width: $tablet-breakpoint)
28 {
29 display: block;
30 clear: none;
31 width: auto;
32 }
33 }
34
35 .no-js #site-search
36 {
37 display: block;
38 }
39
40 // Product Website Link
41
42 #product-website-link
43 {
44 float: right;
45 }
46
47 #product-website-link img
48 {
49 height: 1em;
50 margin-left: 0.5em;
51 }
52
53 #site-search.open #product-website-link,
54 .no-js #product-website-link
55 {
56 float: none;
57
58 @media (min-width: $mobile-breakpoint)
59 {
60 float: right;
61 margin-top: 20px;
62 }
63
64 @media (min-width: $tablet-breakpoint)
65 {
66 margin-top: 0;
67 }
68 }
69
70 // Search Form
71
72 #search-form
73 {
74 display: inline-block;
75 position: relative;
76 overflow: hidden;
77 width: 100%;
78 height: $search-form-height;
79 border-radius: 4px;
80 color: $gray;
81 background: #fff;
82 line-height: 1;
83 vertical-align: middle;
84
85 @media (min-width: $mobile-breakpoint)
86 {
87 max-width: $search-form-width;
88 }
89 }
90
91 #site-search.open #search-form,
92 .no-js #search-form
93 {
94 margin-top: 20px;
95
96 @media (min-width: $tablet-breakpoint)
97 {
98 margin-top: 0;
99 }
100 }
101
102 #search-form input
103 {
104 width: 100%;
105 height: $search-form-height - 2px;
106 padding-right: $search-form-height + 5px;
107 padding-left: 10px;
108 border: 0;
109 font-family: $primary-font;
110 font-size: $small-font;
111 }
112
113 #search-form button
114 {
115 position: absolute;
116 top: 0;
117 right: 0;
118 width: $search-form-height;
119 height: 100%;
120 border: 0;
121 background-color: transparent;
122 font-size: 1em;
123 }
124
125 #search-form button img
126 {
127 height: 1em;
128 }
129
130 html[dir="rtl"]
131 {
132 #search-form input
133 {
134 padding-right: 10px;
135 padding-left: $search-form-height + 5px;
136 }
137
138 #search-form button
139 {
140 right: auto;
141 left: 0;
142 }
143
144 #product-website-link
145 {
146 float: left;
147 }
148
149 #product-website-link img
150 {
151 margin-right: 0.5em;
152 margin-left: 0;
153 }
154 }
OLDNEW
« no previous file with comments | « static/scss/base/_variables.scss ('k') | static/scss/content/_typography.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld