Skip to content

Commit 6dc5748

Browse files
philwarehamphilwareham
committed
Use flexbox instead of float...
...and simplify navgation CSS somewhat. Fixes #564
1 parent 3e121d9 commit 6dc5748

File tree

6 files changed

+115
-115
lines changed

6 files changed

+115
-115
lines changed

‎dist/four-point-eight/styles/default.css‎

Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -181,11 +181,18 @@ nav ol::after,
181181
* Example HTML:
182182
*
183183
* <nav class="site-navigation">
184-
* <ul>
185-
* <li class="active"><a></li>
186-
* <li><a></li>
187-
* <li><a></li>
188-
* </ul>
184+
* <div>
185+
* <ul>
186+
* <li class="active"><a></li>
187+
* <li><a></li>
188+
* <li><a></li>
189+
* </ul>
190+
* <div class="search">
191+
* <form>
192+
* <input type="search">
193+
* </form>
194+
* </div>
195+
* </div>
189196
* </nav>
190197
*/
191198
.site-navigation {
@@ -199,15 +206,15 @@ nav ol::after,
199206
.site-navigation ul {
200207
margin: 0;
201208
padding: 0;
209+
border: solid #cccccc;
210+
border-width: 1px 0;
202211
list-style: none;
203212
}
204213
.site-navigation li {
205-
border-bottom: 1px solid #cccccc;
214+
border: solid #cccccc;
215+
border-width: 1px 0;
206216
background-color: #eeeeee;
207217
}
208-
.site-navigation li:first-child {
209-
border-top: 1px solid #cccccc;
210-
}
211218
.site-navigation li:hover {
212219
background-color: #f8f8f8;
213220
}
@@ -349,11 +356,6 @@ h6 a:active {
349356
transform: translateY(0);
350357
}
351358

352-
[dir=rtl] .skip-link {
353-
right: 1px;
354-
left: auto;
355-
}
356-
357359
/* Typography
358360
========================================================================== */
359361
/**
@@ -719,6 +721,15 @@ bdo[dir=rtl] {
719721
margin: 0;
720722
}
721723

724+
/**
725+
* Swap `select` icon position in RTL languages.
726+
*/
727+
[dir=rtl] select {
728+
padding-right: 0.1875em;
729+
padding-left: 1.5em;
730+
background-position: 0.5em center;
731+
}
732+
722733
/**
723734
* Swap paginator (prev/next) navigation links on articles/article lists.
724735
*/
@@ -729,6 +740,14 @@ bdo[dir=rtl] {
729740
float: left;
730741
}
731742

743+
/**
744+
* Swap ‘skip links’ position in RTL languages.
745+
*/
746+
[dir=rtl] .skip-link {
747+
right: 1px;
748+
left: auto;
749+
}
750+
732751
/**
733752
* Swap anchor float position on comments.
734753
*/
@@ -1072,15 +1091,6 @@ textarea:focus {
10721091
text-transform: none;
10731092
}
10741093

1075-
/**
1076-
* Swap `select` icon position in RTL languages.
1077-
*/
1078-
[dir=rtl] select {
1079-
padding-right: 0.1875em;
1080-
padding-left: 1.5em;
1081-
background-position: 0.5em center;
1082-
}
1083-
10841094
/**
10851095
* Remove browser-specific `select` UI in IE 11.
10861096
*/
@@ -1409,55 +1419,47 @@ textarea:-moz-ui-invalid {
14091419
* Example HTML:
14101420
*
14111421
* <nav class="site-navigation">
1412-
* <ul>
1413-
* <li class="active"><a></li>
1414-
* <li><a></li>
1415-
* <li><a></li>
1416-
* </ul>
1422+
* <div>
1423+
* <ul>
1424+
* <li class="active"><a></li>
1425+
* <li><a></li>
1426+
* <li><a></li>
1427+
* </ul>
1428+
* <div class="search">
1429+
* <form>
1430+
* <input type="search">
1431+
* </form>
1432+
* </div>
1433+
* </div>
14171434
* </nav>
14181435
*/
14191436
.site-navigation {
14201437
border-top: 1px solid #cccccc;
14211438
border-bottom: 1px solid #cccccc;
14221439
}
14231440
.site-navigation > div {
1441+
display: flex;
1442+
flex-wrap: wrap;
1443+
justify-content: space-between;
14241444
width: 88%;
14251445
}
1426-
.site-navigation li {
1427-
float: left;
1428-
border-right: 1px solid #cccccc;
1429-
border-bottom: 0;
1430-
}
1431-
.site-navigation li:first-child {
1432-
border-top: 0;
1433-
border-left: 1px solid #cccccc;
1434-
}
1435-
[dir=rtl] .site-navigation li {
1436-
float: right;
1437-
}
1438-
[dir=rtl] .site-navigation li:first-child {
1439-
border-left: 0;
1446+
.site-navigation ul {
1447+
display: flex;
1448+
flex-wrap: wrap;
1449+
border: 0;
14401450
}
1441-
[dir=rtl] .site-navigation li:last-child {
1442-
border-left: 1px solid #cccccc;
1451+
.site-navigation li {
1452+
border-width: 0 1px;
14431453
}
14441454
.site-navigation a {
14451455
padding: 0.5em 1em;
14461456
}
14471457

14481458
.search {
1449-
position: absolute;
1450-
z-index: 2;
1451-
top: 50%;
1452-
right: 0;
1453-
margin-top: -1.0625em;
1459+
margin-top: 0.2em;
14541460
padding: 0;
14551461
background: transparent;
14561462
}
1457-
[dir=rtl] .search {
1458-
right: auto;
1459-
left: 0;
1460-
}
14611463
.search input[type=search] {
14621464
width: 2.125em;
14631465
padding-right: 0;

‎src/scss/modules/_forms.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -157,18 +157,6 @@ select {
157157
text-transform: none;
158158
}
159159

160-
/**
161-
* Swap `select` icon position in RTL languages.
162-
*/
163-
164-
[dir="rtl"] {
165-
select {
166-
padding-right: 0.1875em; // 3px / 16px
167-
padding-left: 1.5em; // 24px / 16px
168-
background-position: 0.5em center; // 8px / 16px
169-
}
170-
}
171-
172160
/**
173161
* Remove browser-specific `select` UI in IE 11.
174162
*/

‎src/scss/modules/_internationalization.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,18 @@ bdo[dir="rtl"] {
149149
}
150150
}
151151

152+
/**
153+
* Swap `select` icon position in RTL languages.
154+
*/
155+
156+
[dir="rtl"] {
157+
select {
158+
padding-right: 0.1875em; // 3px / 16px
159+
padding-left: 1.5em; // 24px / 16px
160+
background-position: 0.5em center; // 8px / 16px
161+
}
162+
}
163+
152164
/**
153165
* Swap paginator (prev/next) navigation links on articles/article lists.
154166
*/
@@ -163,6 +175,15 @@ bdo[dir="rtl"] {
163175
}
164176
}
165177

178+
/**
179+
* Swap ‘skip links’ position in RTL languages.
180+
*/
181+
182+
[dir="rtl"] .skip-link {
183+
right: 1px;
184+
left: auto;
185+
}
186+
166187
/**
167188
* Swap anchor float position on comments.
168189
*/

‎src/scss/modules/_links.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,3 @@ h6 {
100100
transform: translateY(0);
101101
}
102102
}
103-
104-
[dir="rtl"] .skip-link {
105-
right: 1px;
106-
left: auto;
107-
}

‎src/scss/modules/_navigation.scss‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,18 @@
88
* Example HTML:
99
*
1010
* <nav class="site-navigation">
11-
* <ul>
12-
* <li class="active"><a></li>
13-
* <li><a></li>
14-
* <li><a></li>
15-
* </ul>
11+
* <div>
12+
* <ul>
13+
* <li class="active"><a></li>
14+
* <li><a></li>
15+
* <li><a></li>
16+
* </ul>
17+
* <div class="search">
18+
* <form>
19+
* <input type="search">
20+
* </form>
21+
* </div>
22+
* </div>
1623
* </nav>
1724
*/
1825

@@ -28,17 +35,16 @@
2835
ul {
2936
margin: 0;
3037
padding: 0;
38+
border: solid $color-gradient-border;
39+
border-width: 1px 0;
3140
list-style: none;
3241
}
3342

3443
li {
35-
border-bottom: 1px solid $color-gradient-border;
44+
border: solid $color-gradient-border;
45+
border-width: 1px 0;
3646
background-color: $color-gradient-from;
3747

38-
&:first-child {
39-
border-top: 1px solid $color-gradient-border;
40-
}
41-
4248
&:hover {
4349
background-color: lighten($color-gradient-from, 4%);
4450
}

‎src/scss/modules/_responsive.scss‎

Lines changed: 23 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@
99
* Example HTML:
1010
*
1111
* <nav class="site-navigation">
12-
* <ul>
13-
* <li class="active"><a></li>
14-
* <li><a></li>
15-
* <li><a></li>
16-
* </ul>
12+
* <div>
13+
* <ul>
14+
* <li class="active"><a></li>
15+
* <li><a></li>
16+
* <li><a></li>
17+
* </ul>
18+
* <div class="search">
19+
* <form>
20+
* <input type="search">
21+
* </form>
22+
* </div>
23+
* </div>
1724
* </nav>
1825
*/
1926

@@ -22,30 +29,20 @@
2229
border-bottom: 1px solid $color-border;
2330

2431
> div {
32+
display: flex;
33+
flex-wrap: wrap;
34+
justify-content: space-between;
2535
width: 88%;
2636
}
2737

28-
li {
29-
float: left;
30-
border-right: 1px solid $color-gradient-border;
31-
border-bottom: 0;
32-
33-
&:first-child {
34-
border-top: 0;
35-
border-left: 1px solid $color-gradient-border;
36-
}
37-
38-
[dir="rtl"] & {
39-
float: right;
40-
41-
&:first-child {
42-
border-left: 0;
43-
}
38+
ul {
39+
display: flex;
40+
flex-wrap: wrap;
41+
border: 0;
42+
}
4443

45-
&:last-child {
46-
border-left: 1px solid $color-gradient-border;
47-
}
48-
}
44+
li {
45+
border-width: 0 1px;
4946
}
5047

5148
a {
@@ -54,19 +51,10 @@
5451
}
5552

5653
.search {
57-
position: absolute;
58-
z-index: 2;
59-
top: 50%;
60-
right: 0;
61-
margin-top: -1.0625em;
54+
margin-top: 0.2em;
6255
padding: 0;
6356
background: transparent;
6457

65-
[dir="rtl"] & {
66-
right: auto;
67-
left: 0;
68-
}
69-
7058
input[type="search"] {
7159
width: 2.125em;
7260
padding-right: 0;

0 commit comments

Comments
 (0)