Skip to content

Commit 4083920

Browse files
jhardyjhardy
committed
Inital commit
0 parents  commit 4083920

File tree

10 files changed

+541
-0
lines changed

10 files changed

+541
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.sass-cache/

‎config.rb

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Require any additional compass plugins here.
2+
require "ceaser-easing"
3+
# Set this to the root of your project when deployed:
4+
http_path = "/"
5+
css_dir = "stylesheets"
6+
sass_dir = "sass"
7+
images_dir = "images"
8+
javascripts_dir = "javascripts"
9+
10+
# You can select your preferred output style here (can be overridden via the command line):
11+
# output_style = :expanded or :nested or :compact or :compressed
12+
13+
# To enable relative paths to assets via compass helper functions. Uncomment:
14+
# relative_assets = true
15+
16+
# To disable debugging comments that display the original location of your selectors. Uncomment:
17+
line_comments = false
18+
19+
20+
# If you prefer the indented syntax, you might want to regenerate this
21+
# project again passing --syntax sass, or you can uncomment this:
22+
# preferred_syntax = :sass
23+
# and then run:
24+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

‎index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE HTML>
2+
<html lang="ru-RU">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Path Nav</title>
6+
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
7+
8+
</head>
9+
<body>
10+
<nav id="path_nav">
11+
<a href="#" id="path_nav_expand">
12+
<div id="x">
13+
<div class="vert"></div>
14+
<div class="horz"></div>
15+
</div>
16+
</a>
17+
<ul>
18+
<li><a href="#">1</a></li>
19+
<li><a href="#">2</a></li>
20+
<li><a href="#">3</a></li>
21+
<li><a href="#">4</a></li>
22+
<li><a href="#">5</a></li>
23+
<li><a href="#">6</a></li>
24+
</ul>
25+
</nav>
26+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
27+
<script type="text/javascript">
28+
$(function() {
29+
30+
var pathNav = $("#path_nav"),
31+
expander = $("#path_nav_expand");
32+
33+
expander.click(function(e) {
34+
e.preventDefault();
35+
pathNav.toggleClass("active");
36+
})
37+
38+
});
39+
</script>
40+
</body>
41+
</html>

‎sass/_ceaser.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import "ceaser-easing";
2+
3+
// The ceaser sass function to be used when declaring a timing function for a transition or an animation
4+
5+
#transition {
6+
-webkit-transition-property: all;
7+
-webkit-transition-duration: 1.2s;
8+
-webkit-transition-timing-function: ceaser("ease-in"); }
9+
10+
#animation {
11+
-webkit-animation-name: animateMe;
12+
-webkit-animation-iteration-count: infinite;
13+
-webkit-animation-timing-function: ceaser("easeInSine");
14+
-webkit-animation-duration: 10s; }
15+
16+
// The ceaser transition easing mixin with its argument descriptions
17+
// @mixin ceaser-transition(ease type, transition property, duration, delay)
18+
19+
// Example mixin call that will create a 500 millisecond transition on only the width property with a delay of 1 second
20+
// here is how to create that transition for an html element with id of box.
21+
22+
#ceaser-transition {
23+
@include ceaser-transition("easeInOutExpo", width, 500ms, 1s); }
24+
25+
/* ==========================
26+
*
27+
* List of all timing function
28+
*
29+
* linear
30+
* ease (default)
31+
* ease-in
32+
* ease-out
33+
* ease-in-out
34+
*
35+
* easeInQuad
36+
* easeInCubic
37+
* easeInQuart
38+
* easeInQuint
39+
* easeInSine
40+
* easeInExpo
41+
* easeInCirc
42+
* easeInBack
43+
*
44+
* easeOutQuad
45+
* easeOutCubic
46+
* easeOutQuart
47+
* easeOutQuint
48+
* easeOutSine
49+
* easeOutExpo
50+
* easeOutCirc
51+
* easeOutBack
52+
*
53+
* easeInOutQuad
54+
* easeInOutCubic
55+
* easeInOutQuart
56+
* easeInOutQuint
57+
* easeInOutSine
58+
* easeInOutExpo
59+
* easeInOutCirc
60+
* easeInOutBack
61+
* ======================== */

‎sass/ie.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Welcome to Compass. Use this file to write IE specific override styles.
2+
* Import this file using the following HTML or equivalent:
3+
* <!--[if IE]>
4+
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
5+
* <![endif]--> */

‎sass/print.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Welcome to Compass. Use this file to define print styles.
2+
* Import this file using the following HTML or equivalent:
3+
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

‎sass/screen.scss

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Welcome to Compass.
2+
* In this file you should write your main styles. (or centralize your imports)
3+
* Import this file using the following HTML or equivalent:
4+
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
5+
6+
@import "compass/reset";
7+
@import "ceaser-easing";
8+
@import "compass/css3";
9+
10+
$num: 6;
11+
$arc: 90;
12+
13+
// calculate position for outer circles on arc. Someone better at math can probably do a better job.
14+
@mixin spread($num, $arc) {
15+
$radius: 260;
16+
$angle: $arc/$num;
17+
18+
@for $i from 1 through $num {
19+
$unit: ($i - 1) * $angle;
20+
$radians: $unit * (pi()/180);
21+
$sin: sin($radians);
22+
$cos: cos($radians);
23+
24+
&:nth-child(#{$i}) {
25+
left: ($sin * $radius) - (round($sin * 10) * $i) + px;
26+
top: -($cos * $radius) + 80 + px;
27+
28+
}
29+
}
30+
}
31+
32+
33+
#path_nav {
34+
position: relative;
35+
top: 450px;
36+
left: 550px;
37+
38+
a {
39+
display: block;
40+
width: 45px;
41+
height: 45px;
42+
border: solid 5px #fff;
43+
background: #44403d;
44+
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.2), inset 0 0 2px rgba(0, 0, 0, 1));
45+
@include border-radius(2.6em);
46+
color: #fff;
47+
text-align: center;
48+
line-height: 3em;
49+
font-weight: bold;
50+
font-size: 16px;
51+
font-family: sans-serif;
52+
text-decoration: none;
53+
}
54+
55+
li {
56+
position: absolute;
57+
top: 8px;
58+
left: 8px;
59+
z-index: 0;
60+
61+
@for $i from 1 through $num {
62+
&:nth-child(#{$i}) {
63+
@include transition("all", .3s, ceaser("easeOutBack"), ($num - $i) * 0.035s);
64+
}
65+
}
66+
}
67+
68+
#path_nav_expand {
69+
width: 60px;
70+
height: 60px;
71+
position: absolute;
72+
@include linear-gradient(color-stops(#e85839, #e64e30 49%, #ce2c16 50%));
73+
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.2), inset 0 0 1px darken(#ce2c16, 10%), inset 0 2px 2px rgba(255, 255, 255, 0.5));
74+
z-index: 1000;
75+
76+
#x {
77+
width: 40px;
78+
height: 40px;
79+
position: relative;
80+
top: 10px;
81+
left: 10px;
82+
@include transition("all", .4s);
83+
84+
.vert { width: 10px; height: 40px; background: #fff; @include border-radius(2px); position: absolute; top: 0px; left: 15px;}
85+
.horz { @extend .vert; width: 40px; height: 10px; top: 15px; left: 0px;}
86+
87+
}
88+
}
89+
90+
&.active {
91+
li {
92+
@include transform(rotate(1800deg));
93+
@include spread;
94+
}
95+
96+
#x {
97+
@include transform-origin(center, center);
98+
@include rotate(-45deg);
99+
}
100+
}
101+
}

‎stylesheets/ie.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Welcome to Compass. Use this file to write IE specific override styles.
2+
* Import this file using the following HTML or equivalent:
3+
* <!--[if IE]>
4+
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
5+
* <![endif]--> */

‎stylesheets/print.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Welcome to Compass. Use this file to define print styles.
2+
* Import this file using the following HTML or equivalent:
3+
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

0 commit comments

Comments
 (0)