Skip to content

Commit 2eab8d0

Browse files
stygiansabyssstygiansabyss
committed
Adding menu css and updating less file to point correctly
1 parent f7cff95 commit 2eab8d0

File tree

2 files changed

+275
-5
lines changed

2 files changed

+275
-5
lines changed

‎public/css/menu.css

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
/* ****************************************
2+
3+
4+
Utopian CSS3 Dropdown Menus
5+
by Justin Carroll (3circlestudio.com)
6+
7+
Version: 1.0
8+
9+
10+
**************************************** */
11+
12+
13+
/* Horizontal Style */
14+
15+
16+
#utopian-navigation, #utopian-navigation ul {
17+
font-size: 14px;
18+
list-style: none;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
#utopian-navigation a {
24+
color: #808080;
25+
display: block;
26+
line-height: 1;
27+
font-weight: bold;
28+
padding: 10px 20px;
29+
text-decoration: none;
30+
}
31+
#utopian-navigation a:hover {
32+
color: #ffffff;
33+
}
34+
35+
#utopian-navigation li {
36+
float: left;
37+
}
38+
39+
#utopian-navigation li:last-of-type {
40+
float: right;
41+
}
42+
43+
#utopian-navigation li ul {
44+
background: #666666;
45+
background: -moz-radial-gradient(80% 0% 0deg, circle cover, #787878, #666666, #666666 90%);
46+
background: -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#8a8a8a), to(#666666));
47+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
48+
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
49+
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
50+
left: -9999px;
51+
position: absolute;
52+
width: 190px;
53+
z-index: 1000;
54+
}
55+
56+
#utopian-navigation li ul a {
57+
border-top: 1px solid #838383;
58+
border-right: 1px solid #7b7b7b;
59+
border-bottom: 1px solid #484848;
60+
border-left: 1px solid #4c4c4c;
61+
color: #a4a4a4;
62+
font-weight: normal;
63+
padding: 9px 19px;
64+
text-shadow: #4d4d4d -1px -1px 0;
65+
width: 150px;
66+
box-sizing: content-box !important;
67+
}
68+
#utopian-navigation li ul a:hover, #utopian-navigation > li.dropdown li.dropdown > a:hover, #utopian-navigation > li.dropdown li.dropdown:hover > a {
69+
background: #0099ff;
70+
background: -moz-linear-gradient(100% 100% 90deg, #017bcd, #33adff);
71+
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33adff), to(#017bcd));
72+
border-top: 0;
73+
color: #ffffff;
74+
font-weight: bold;
75+
padding-top: 10px;
76+
text-shadow: #1c567c -1px -1px 0;
77+
}
78+
79+
#utopian-navigation > li.dropdown li.dropdown > a:hover, #utopian-navigation > li.dropdown li.dropdown:hover > a {
80+
background: #0099ff url(../../img/css_images/arrow-right-white.gif) no-repeat center right;
81+
background-image: url(../../img/css_images/arrow-right-white.gif), -moz-linear-gradient(100% 100% 90deg, #017bcd, #33adff);
82+
background-image: url(../../img/css_images/arrow-right-white.gif), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33adff), to(#017bcd));
83+
}
84+
85+
#utopian-navigation li ul ul {
86+
margin: -34px 0 0 190px;
87+
}
88+
89+
#utopian-navigation li:hover ul ul, #utopian-navigation li:hover ul ul ul {
90+
left: -9999px;
91+
}
92+
93+
#utopian-navigation li:hover ul, #utopian-navigation li li:hover ul, #utopian-navigation li li li:hover ul { /* lists nested under hovered list items */
94+
left: auto;
95+
}
96+
97+
#utopian-navigation > li.dropdown > a {
98+
background: url(../../img/css_images/arrow-down-gray.gif) no-repeat center right;
99+
padding-right: 35px;
100+
}
101+
102+
#utopian-navigation > li.dropdown:hover > a {
103+
background: #666666 url(../../img/css_images/arrow-down-white.gif) no-repeat center right;
104+
background-image: url(../../img/css_images/arrow-down-white.gif), -moz-radial-gradient(80% 0% 0deg, circle cover, #787878, #666666, #666666 90%);
105+
background-image: url(../../img/css_images/arrow-down-white.gif), -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#8a8a8a), to(#666666));
106+
border-top: 1px solid #8d8d8d;
107+
border-right: 1px solid #7b7b7b;
108+
border-bottom: 1px solid #484848;
109+
border-left: 1px solid #4c4c4c;
110+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
111+
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
112+
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
113+
color: #ffffff;
114+
padding: 9px 34px 9px 19px;
115+
text-shadow: #595959 -1px -1px 0;
116+
}
117+
118+
#utopian-navigation > li.dropdown li.dropdown > a {
119+
background: url(../../img/css_images/arrow-right-gray.gif) no-repeat center right;
120+
}
121+
122+
#utopian-navigation > li.active > a, #utopian-navigation > li.active > a:hover {
123+
color: #64a6b0;
124+
}
125+
126+
/* Sub Menu */
127+
128+
#utopian-navigation.subMenu, #utopian-navigation.subMenu ul {
129+
font-size: 10px;
130+
}
131+
132+
#utopian-navigation.subMenu li {
133+
float: left;
134+
}
135+
136+
#utopian-navigation.subMenu li:last-of-type {
137+
float: left;
138+
}
139+
140+
#utopian-navigation.subMenu li:hover:last-of-type ul, #utopian-navigation.subMenu li:last-of-type li:hover ul, #utopian-navigation.subMenu li:last-of-type li li:hover ul {
141+
left: auto;
142+
right: auto;
143+
}
144+
145+
/* Vertical Style */
146+
147+
148+
#utopian-navigation.vertical {
149+
width: 190px;
150+
}
151+
152+
#utopian-navigation.vertical a {
153+
width: 150px;
154+
}
155+
156+
#utopian-navigation.vertical li ul {
157+
margin: -34px 0 0 190px;
158+
}
159+
160+
#utopian-navigation.vertical > li.dropdown > a {
161+
background: url(../../img/css_images/arrow-right-gray.gif) no-repeat center right;
162+
width: 135px;
163+
}
164+
#utopian-navigation.vertical > li.dropdown:hover > a {
165+
background: #666666 url(../../img/css_images/arrow-right-white.gif) no-repeat center right;
166+
background-image: url(../../img/css_images/arrow-right-white.gif), -moz-radial-gradient(80% 0% 0deg, circle cover, #787878, #666666, #666666 90%);
167+
background-image: url(../../img/css_images/arrow-right-white.gif), -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#8a8a8a), to(#666666));
168+
}
169+
170+
171+
/* Black */
172+
173+
174+
#utopian-navigation.black li ul {
175+
background: #000000;
176+
background: -moz-radial-gradient(90% -20% 0deg, circle cover, #252525, #000000, #000000 150%);
177+
background: -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#444444), to(#000000));
178+
}
179+
180+
#utopian-navigation.black li ul a {
181+
border-top-color: #1c1c1c;
182+
border-right-color: #1a1a1a;
183+
border-bottom-color: #000000;
184+
border-left-color: #000000;
185+
color: #c9c9c9;
186+
text-shadow: #000000 -1px -1px 0;
187+
}
188+
#utopian-navigation.black li ul a:hover, #utopian-navigation.black > li.dropdown li.dropdown > a:hover, #utopian-navigation.black > li.dropdown li.dropdown:hover > a {
189+
background: #181818;
190+
background: -moz-linear-gradient(100% 100% 90deg, #181818, #252525);
191+
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#181818));
192+
color: #ffffff;
193+
font-weight: bold;
194+
}
195+
196+
#utopian-navigation.black > li.dropdown li.dropdown > a:hover, #utopian-navigation.black > li.dropdown li.dropdown:hover > a {
197+
background: #181818 url(../../img/css_images/arrow-right-white.gif) no-repeat center right;
198+
background-image: url(../../img/css_images/arrow-right-white.gif), -moz-linear-gradient(100% 100% 90deg, #181818, #252525);
199+
background-image: url(../../img/css_images/arrow-right-white.gif), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#181818));
200+
}
201+
202+
#utopian-navigation.black > li.dropdown:hover > a {
203+
background: #000000 url(../../img/css_images/arrow-down-white.gif) no-repeat center right;
204+
background-image: url(../../img/css_images/arrow-down-white.gif), -moz-radial-gradient(90% -20% 0deg, circle cover, #191919, #000000, #000000 150%);
205+
background-image: url(../../img/css_images/arrow-down-white.gif), -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#444444), to(#000000));
206+
border-top-color: #1c1c1c;
207+
border-right-color: #1a1a1a;
208+
border-bottom-color: #000000;
209+
border-left-color: #000000;
210+
color: #ffffff;
211+
text-shadow: none;
212+
}
213+
#utopian-navigation.vertical.black > li.dropdown:hover > a {
214+
background: #000000 url(../../img/css_images/arrow-right-white.gif) no-repeat center right;
215+
background-image: url(../../img/css_images/arrow-right-white.gif), -moz-radial-gradient(90% 0% 0deg, circle cover, #191919, #000000, #000000 150%);
216+
background-image: url(../../img/css_images/arrow-right-white.gif), -webkit-gradient(radial, 160 -100, 0, 160 -100, 200, from(#4d4d4d), to(#000000));
217+
}
218+
219+
#utopian-navigation.black > li.dropdown li.dropdown > a {
220+
background: url(../../img/css_images/arrow-right-darkgray.gif) no-repeat center right;
221+
text-shadow: none;
222+
}
223+
224+
225+
/* White */
226+
227+
228+
#utopian-navigation.white li ul {
229+
background: #ffffff;
230+
}
231+
232+
#utopian-navigation.white li ul a {
233+
border-top-color: #ffffff;
234+
border-right-color: #e1e1e1;
235+
border-bottom-color: #dddddd;
236+
border-left-color: #ffffff;
237+
color: #999999;
238+
text-shadow: #ffffff 1px 1px 0;
239+
}
240+
#utopian-navigation.white li ul a:hover, #utopian-navigation.white > li.dropdown li.dropdown > a:hover, #utopian-navigation.white > li.dropdown li.dropdown:hover > a {
241+
background: #eaeaea;
242+
background: -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f9f9f9);
243+
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#eaeaea));
244+
color: #000000;
245+
font-weight: bold;
246+
}
247+
248+
#utopian-navigation.white > li.dropdown li.dropdown > a:hover, #utopian-navigation.white > li.dropdown li.dropdown:hover > a {
249+
background: #eaeaea url(../../img/css_images/arrow-right-black.gif) no-repeat center right;
250+
background-image: url(../../img/css_images/arrow-right-black.gif), -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f9f9f9);
251+
background-image: url(../../img/css_images/arrow-right-black.gif), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#eaeaea));
252+
}
253+
254+
#utopian-navigation.white > li.dropdown:hover > a {
255+
background: #ffffff url(../../img/css_images/arrow-down-black.gif) no-repeat center right;
256+
border-top-color: #ffffff;
257+
border-right-color: #e1e1e1;
258+
border-bottom-color: #dddddd;
259+
border-left-color: #ffffff;
260+
color: #000000;
261+
text-shadow: none;
262+
}
263+
#utopian-navigation.vertical.white > li.dropdown:hover > a {
264+
background: #ffffff url(../../img/css_images/arrow-right-black.gif) no-repeat center right;
265+
}
266+
267+
#utopian-navigation.white > li.dropdown li.dropdown > a {
268+
background: url(../../img/css_images/arrow-right-darkgray.gif) no-repeat center right;
269+
text-shadow: none;
270+
}

‎public/less/master.less

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,23 @@
2525
@siteStyle: dark;
2626

2727
.imports (@siteStyle) when (@siteStyle = dark) {
28-
@import (less) "../../vendor/darkstrap3/darkstrap.css";
28+
@import (less) "../../../../../public/vendor/darkstrap3/darkstrap.css";
2929
}
3030

3131
// Cross-browser compatibility
3232
@import "prefixer.less";
3333

34-
@import "../../vendor/bootstrap3/less/bootstrap";
34+
@import "../../../../../public/vendor/bootstrap3/less/bootstrap";
3535

3636
// Site style based importing
3737
.imports(@siteStyle);
3838

3939
// Bring in utopian menu
40-
@import (less) "menu.css";
40+
@import (less) "../css/menu.css";
4141

4242
// Custom changes to bootstrap/darkstrap
4343
@import "master_mixins";
4444

4545
// Fuel UX wizard mixins
46-
@import "../../vendor/fuelux/dist/less/variables";
47-
@import "../../vendor/fuelux/dist/less/wizard";
46+
@import "../../../../../public/vendor/fuelux/dist/less/variables";
47+
@import "../../../../../public/vendor/fuelux/dist/less/wizard";

0 commit comments

Comments
 (0)