Skip to content

Commit 2976206

Browse files
nathanjdnathanjd
committed
I iz pretty now.
1 parent 20b62b8 commit 2976206

File tree

9 files changed

+247
-32
lines changed

9 files changed

+247
-32
lines changed

‎assets/stylesheets/globals/_base.scss

Lines changed: 60 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
body {
22
margin: 8px 0;
3+
@include bodyFont();
4+
}
5+
6+
h1, h2, h3, h4, h5 {
7+
@include headerFont();
8+
}
9+
10+
a {
11+
color: $brandColor;
12+
text-decoration: none;
313
}
414

515
#Wrapper {
@@ -21,6 +31,11 @@ body {
2131
&#SimilarProductsByCustomerViews {
2232
border-top: 0;
2333
}
34+
// Removed as this feature does not work on mobile. The url is generated by
35+
// by javascript so was not rewritten.
36+
.CompareButton {
37+
display: none;
38+
}
2439
}
2540
[data-ur-carousel-component="scroll_container"] {
2641
list-style-type: none;
@@ -31,27 +46,37 @@ body {
3146
padding: 5px 5px 40px 5px;
3247
position: relative;
3348
width: 120px;
34-
height: 240px;
35-
}
49+
height: 200px;
3650

37-
.button.add-to-cart {
38-
display: inline-block;
39-
position: absolute;
40-
bottom: 5px;
41-
left: 5px;
42-
@include sprites-AddCartButton();
43-
color: transparent;
44-
}
45-
.button.choose-options {
46-
display: inline-block;
47-
position: absolute;
48-
bottom: 5px;
49-
left: 5px;
51+
.ProductImage {
52+
height: 120px;
53+
}
54+
55+
.ProductCompareButton, .TopSellerNumber {
56+
display: none;
57+
}
58+
.button.add-to-cart {
59+
display: inline-block;
60+
position: absolute;
61+
bottom: 5px;
62+
left: 5px;
63+
@include sprites-AddCartButton();
64+
color: transparent;
65+
}
66+
.button.choose-options {
67+
display: inline-block;
68+
position: absolute;
69+
bottom: 5px;
70+
left: 5px;
71+
}
5072
}
5173

74+
75+
5276
// Accordions
5377
[data-ur-set="toggler"] {
54-
h2 {
78+
h2,
79+
h3 {
5580
position: relative;
5681
padding: 10px;
5782
margin-bottom: 0;
@@ -61,14 +86,18 @@ body {
6186
border-right-width: 1px;
6287
border-bottom-width: 0;
6388
border-left-width: 1px;
64-
border-top-right-radius: 5px;
65-
border-top-left-radius: 5px;
89+
border-top-right-radius: $borderRadius;
90+
border-top-left-radius: $borderRadius;
6691
font-size: 103%;
6792
font-weight: 100;
6893
background-color: $brandColor;
6994
color: white;
7095
cursor: pointer;
7196

97+
&[data-ur-state="disabled"] {
98+
border-bottom-right-radius: $borderRadius;
99+
border-bottom-left-radius: $borderRadius;
100+
}
72101
&[data-ur-state="enabled"] {
73102
.mw_indicator {
74103
@include sprites-minus();
@@ -82,15 +111,16 @@ body {
82111
@include sprites-plus();
83112
}
84113
}
85-
.BlockContent {
114+
.BlockContent,
115+
.FindByCategory {
86116
border-color: $brandBorderColor;
87117
border-style: solid;
88118
border-top-width: 0;
89119
border-right-width: 1px;
90120
border-bottom-width: 1px;
91121
border-left-width: 1px;
92-
border-bottom-right-radius: 5px;
93-
border-bottom-left-radius: 5px;
122+
border-bottom-right-radius: $borderRadius;
123+
border-bottom-left-radius: $borderRadius;
94124

95125
ul {
96126
list-style-type: none;
@@ -132,18 +162,23 @@ body {
132162
ul {
133163
padding: 0;
134164
list-style-type: none;
165+
display: none;
166+
167+
// Some product pages display multiple breadcrumbs. Hide all but the first.
168+
&:first-of-type {
169+
display: block;
170+
}
135171

136172
li {
137173
position: relative;
138174
display: inline-block;
139-
padding-left: 10px;
175+
padding-left: 20px;
140176
list-style: none;
141-
margin-right: 10px;
142177

143178
&:before {
144179
position: absolute;
145180
top: 5px;
146-
left: -5px;
181+
left: 5px;
147182
content: '';
148183
@include sprites-breadcrumb();
149184
}
@@ -158,7 +193,7 @@ body {
158193
margin-top: 1em;
159194
padding: 10px;
160195
border: 1px solid $brandBorderColor;
161-
border-radius: 5px;
196+
border-radius: $borderRadius;
162197
background-color: $brandColor;
163198
color: white;
164199

‎assets/stylesheets/globals/_lib.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,30 @@
1+
// fonts
2+
@mixin headerFont() {
3+
font-family: $headerFontFamily;
4+
font-weight: $headerFontWeight;
5+
}
6+
@mixin bodyFont() {
7+
font-family: $bodyFontFamily;
8+
font-weight: $bodyFontWeight;
9+
line-height: $bodyLineHeight;
10+
}
11+
112
@mixin brandGradient() {
213
@include background(linear-gradient(top, #852201, #6a1b00));
314
}
415

516
@mixin menuItemGradient() {
617
@include background(linear-gradient(top, #000, #222));
18+
}
19+
20+
@mixin actionButton() {
21+
background: $brandColor;
22+
border: 1px solid $brandBorderColor;
23+
border-radius: $borderRadius;
24+
padding: 20px;
25+
font-size: 120%;
26+
color: white;
27+
box-shadow: 0 2px 4px #888888;
28+
cursor: pointer;
29+
text-align: center;
730
}

‎assets/stylesheets/globals/_variables.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
// fonts
2+
$headerFontFamily: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
3+
$headerFontWeight: 600;
4+
5+
$bodyFontFamily: "Times New Roman", Times, serif;
6+
$bodyFontWeight: 300;
7+
$bodyLineHeight: 1.2;
8+
19
// colors
210
$headerColor: #b03b01;
311
$linkColor: #075899;
412

513
$brandColor: #7e270b;
6-
$brandBorderColor: #501507;
14+
$brandBorderColor: #501507;
15+
$borderRadius: 4px;

‎assets/stylesheets/pages/_product.scss

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,41 @@
11
body._product {
2-
#ImageScrollNext, #ImageScrollPrev {
2+
.AddThisButtonBox {
3+
a {
4+
display: inline-block;
5+
padding: 10px;
6+
border: 1px solid #ccc;
7+
border-radius: 4px;
8+
margin-right: 10px;
9+
margin-bottom: 10px;
10+
11+
.at300bs {
12+
width: auto;
13+
height: auto;
14+
padding-left: 21px;
15+
16+
.at_a11y {
17+
width: auto !important;
18+
height: auto !important;
19+
position: inherit !important;
20+
overflow: inherit !important;
21+
top: inherit !important;
22+
}
23+
}
24+
}
25+
}
26+
#ImageScrollNext,
27+
#ImageScrollPrev {
328
display: none;
429
}
530

31+
.ProductThumb {
32+
margin: 0 auto;
33+
34+
.ProductThumbImage {
35+
margin: 10px 0;
36+
}
37+
}
38+
639
.ProductMain {
740
background-color: #f3f4f8;
841
border: 1px solid #ccc;
@@ -13,10 +46,85 @@ body._product {
1346

1447
.Label {
1548
display: inline-block;
49+
font-weight: bold;
1650
}
1751
.Value {
1852
display: inline-block;
1953
}
2054
}
55+
56+
.productAttributeLabel {
57+
font-weight: bold;
58+
}
59+
60+
// Make radios usable on mobile
61+
.productOptionViewRadio,
62+
.productOptionViewProductPickList {
63+
ul {
64+
margin: 0;
65+
padding: 0;
66+
list-style-type: none;
67+
68+
li {
69+
list-style: none;
70+
71+
label {
72+
display: block;
73+
padding: 10px;
74+
border: 1px solid #ccc;
75+
border-radius: 4px;
76+
margin-right: 10px;
77+
margin-bottom: 10px;
78+
}
79+
}
80+
}
81+
}
82+
83+
// Make quantity select usable on mobile
84+
.AddCartButton {
85+
width: 100%;
86+
87+
select {
88+
width: 100%;
89+
}
90+
}
91+
92+
.add-to-cart,
93+
.add-to-wish-list {
94+
@include actionButton();
95+
width: 100%;
96+
}
97+
}
98+
99+
.write-a-review {
100+
@include actionButton();
101+
display: block;
102+
}
103+
104+
.ProductReviewForm {
105+
box-sizing: border-box;
106+
padding: 0 10px 10px;
107+
overflow: auto;
108+
background-color: #f3f4f8;
109+
110+
dd {
111+
margin: 0;
112+
padding: 0;
113+
}
114+
115+
select,
116+
input,
117+
textarea {
118+
box-sizing: border-box;
119+
display: block;
120+
width: 100%;
121+
}
122+
123+
input[type="text"] {
124+
padding: 5px;
125+
}
126+
input[type="submit"] {
127+
@include actionButton();
128+
}
21129
}
22130
}

‎assets/stylesheets/sections/_header.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ header.mw-header {
44

55
#Header {
66
border-top: 1px solid black;
7+
position: relative;
8+
79
#Logo {
810
// #b4421d (top) to #943517 (bottom)
911
@include background(linear-gradient(#b4421d 0, #943517 100%));
@@ -15,6 +17,7 @@ header.mw-header {
1517
h1 {
1618
margin: 0;
1719
padding: 10px;
20+
font-weight: 300;
1821

1922
a {
2023
font-size: 22px;
@@ -25,12 +28,15 @@ header.mw-header {
2528
}
2629

2730
#TopMenu {
31+
position: absolute;
2832
display: inline-block;
29-
float: right;
33+
top: 0;
34+
right: 0;
3035

3136
ul {
3237
list-style: none;
3338
margin: 0;
39+
padding: 0;
3440

3541
li {
3642
display: inline-block;
@@ -77,6 +83,8 @@ header.mw-header {
7783
margin: 0;
7884
width: 100%;
7985
display: block;
86+
border-top-left-radius: $borderRadius;
87+
border-bottom-left-radius: $borderRadius;
8088
}
8189
.mw_search_btn {
8290
height: 33px;

0 commit comments

Comments
 (0)