tuxedo-css-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +12 -0
- data/.rspec +2 -0
- data/.travis.yml +5 -0
- data/CODE_OF_CONDUCT.md +74 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +63 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/tuxedo-css-rails.rb +8 -0
- data/tuxedo-css-rails.gemspec +27 -0
- data/vendor/assets/javascripts/three-minified.js +14 -0
- data/vendor/assets/javascripts/three-render.js +172 -0
- data/vendor/assets/javascripts/tuxedo-css.js +118 -0
- data/vendor/assets/stylesheets/_animations.scss +3 -0
- data/vendor/assets/stylesheets/_buttons.scss +68 -0
- data/vendor/assets/stylesheets/_fonts.scss +83 -0
- data/vendor/assets/stylesheets/_footer.scss +14 -0
- data/vendor/assets/stylesheets/_forms.scss +285 -0
- data/vendor/assets/stylesheets/_global.scss +21 -0
- data/vendor/assets/stylesheets/_grid.scss +101 -0
- data/vendor/assets/stylesheets/_helpers.scss +172 -0
- data/vendor/assets/stylesheets/_hero.scss +132 -0
- data/vendor/assets/stylesheets/_mediaQueries.scss +4 -0
- data/vendor/assets/stylesheets/_nav.scss +213 -0
- data/vendor/assets/stylesheets/_reset.scss +9 -0
- data/vendor/assets/stylesheets/_sidebar.scss +53 -0
- data/vendor/assets/stylesheets/_threejs.scss +16 -0
- data/vendor/assets/stylesheets/tuxedo-css.scss +13 -0
- metadata +117 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//change variables below to customize the tuxedo framework
|
|
2
|
+
|
|
3
|
+
//colors
|
|
4
|
+
$dark: #262525;
|
|
5
|
+
$dark-grey: #5c5c5c;
|
|
6
|
+
$md-grey: #c8c8c8;
|
|
7
|
+
$light: #f4f4f4;
|
|
8
|
+
$color-pop: #2A7F62;
|
|
9
|
+
|
|
10
|
+
//fonts - to update, import a new font below
|
|
11
|
+
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100i,300,700,700i|Lato:300,400,700');
|
|
12
|
+
|
|
13
|
+
//Define font family for header and body font. Must already be imported above
|
|
14
|
+
$header-font: 'Josefin Sans', sans-serif;
|
|
15
|
+
$body-font: 'Lato', sans-serif;
|
|
16
|
+
|
|
17
|
+
%body-font {
|
|
18
|
+
font-family: 'Lato', sans-serif;
|
|
19
|
+
font-weight: lighter;
|
|
20
|
+
letter-spacing: .5px;
|
|
21
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
// These following two rules apply to both basic grid and flex grid
|
|
2
|
+
.container {
|
|
3
|
+
max-width: 1200px; //change how wide container is allowed to go
|
|
4
|
+
width: 100%;
|
|
5
|
+
margin: auto;
|
|
6
|
+
padding: 40px 30px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// =========== Basic Grid Rules for 12-column grid ========= //
|
|
10
|
+
|
|
11
|
+
$column-gutter: 1%; // CHANGE COLUMN GUTTER HERE: must use %;
|
|
12
|
+
|
|
13
|
+
[class^='col-'] {
|
|
14
|
+
float: left;
|
|
15
|
+
min-height: 1px;
|
|
16
|
+
margin-bottom: $column-gutter;
|
|
17
|
+
margin-left: $column-gutter/2;
|
|
18
|
+
margin-right: $column-gutter/2;
|
|
19
|
+
}
|
|
20
|
+
// base column styling
|
|
21
|
+
.col-1 {
|
|
22
|
+
width: 8.33% - ($column-gutter);
|
|
23
|
+
}
|
|
24
|
+
.col-2 {
|
|
25
|
+
width: 16.66% - ($column-gutter);
|
|
26
|
+
}
|
|
27
|
+
.col-3 {
|
|
28
|
+
width: 25% - ($column-gutter);
|
|
29
|
+
}
|
|
30
|
+
.col-4 {
|
|
31
|
+
width: 33.33% - ($column-gutter);
|
|
32
|
+
}
|
|
33
|
+
.col-5 {
|
|
34
|
+
width: 41.67% - ($column-gutter);
|
|
35
|
+
}
|
|
36
|
+
.col-6 {
|
|
37
|
+
width: 50% - ($column-gutter);
|
|
38
|
+
}
|
|
39
|
+
.col-7 {
|
|
40
|
+
width: 58.33% - ($column-gutter);
|
|
41
|
+
}
|
|
42
|
+
.col-8 {
|
|
43
|
+
width: 66.67% - ($column-gutter);
|
|
44
|
+
}
|
|
45
|
+
.col-9 {
|
|
46
|
+
width: 75% - ($column-gutter);
|
|
47
|
+
}
|
|
48
|
+
.col-10 {
|
|
49
|
+
width: 83.33% - ($column-gutter);
|
|
50
|
+
}
|
|
51
|
+
.col-11 {
|
|
52
|
+
width: 91.66% - ($column-gutter);
|
|
53
|
+
}
|
|
54
|
+
.col-12 {
|
|
55
|
+
width: 100% - ($column-gutter);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
[class*='col-'] {
|
|
59
|
+
@media screen and #{$mobile} {
|
|
60
|
+
width: 100%;
|
|
61
|
+
margin-left: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// =============== Rules for Flex Grid =============== //
|
|
66
|
+
.f-row { //Implement f-row to create grid with flexbox
|
|
67
|
+
width: 100%;
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-wrap: wrap;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[class*="f-col"] {
|
|
73
|
+
padding: 10px 20px;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
margin: 5px; //gutter between each flexed column
|
|
76
|
+
}
|
|
77
|
+
.f-col-1 {
|
|
78
|
+
flex: 1;
|
|
79
|
+
}
|
|
80
|
+
.f-col-2 {
|
|
81
|
+
flex: 2;
|
|
82
|
+
}
|
|
83
|
+
.f-col-3 {
|
|
84
|
+
flex: 3;
|
|
85
|
+
}
|
|
86
|
+
.f-col-4 {
|
|
87
|
+
flex: 4;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.responsive {
|
|
91
|
+
.f-col-1, .f-col-2 {
|
|
92
|
+
@media screen and #{$mobile} {
|
|
93
|
+
flex: 100%;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.f-col-3, .f-col-4 {
|
|
97
|
+
@media screen and #{$tablet} {
|
|
98
|
+
flex: 100%;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
// Background Helpers
|
|
2
|
+
|
|
3
|
+
.bg-dark {
|
|
4
|
+
background: $dark;
|
|
5
|
+
}
|
|
6
|
+
.bg-dark-grey {
|
|
7
|
+
background: $dark-grey;
|
|
8
|
+
}
|
|
9
|
+
.bg-md-grey {
|
|
10
|
+
background: $md-grey;
|
|
11
|
+
}
|
|
12
|
+
.bg-light {
|
|
13
|
+
background: $light;
|
|
14
|
+
}
|
|
15
|
+
.bg-pop {
|
|
16
|
+
background: $color-pop;
|
|
17
|
+
}
|
|
18
|
+
.bg-t-light {
|
|
19
|
+
background: transparentize($light, 0.3);
|
|
20
|
+
}
|
|
21
|
+
.bg-t-dark {
|
|
22
|
+
background: transparentize($dark, 0.3);
|
|
23
|
+
}
|
|
24
|
+
.bg-t-pop {
|
|
25
|
+
background: transparentize($color-pop, 0.3);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// Text Helpers
|
|
31
|
+
|
|
32
|
+
.text-dark {
|
|
33
|
+
color: $dark;
|
|
34
|
+
}
|
|
35
|
+
.text-md-grey {
|
|
36
|
+
color: $md-grey;
|
|
37
|
+
}
|
|
38
|
+
.text-dark-grey {
|
|
39
|
+
color: $dark-grey;
|
|
40
|
+
}
|
|
41
|
+
.text-light {
|
|
42
|
+
color: $light;
|
|
43
|
+
}
|
|
44
|
+
.text-pop {
|
|
45
|
+
color: $color-pop;
|
|
46
|
+
}
|
|
47
|
+
.text-center {
|
|
48
|
+
text-align: center;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Position helpers
|
|
52
|
+
|
|
53
|
+
.fixed {
|
|
54
|
+
position: fixed;
|
|
55
|
+
}
|
|
56
|
+
.absolute {
|
|
57
|
+
position: absolute;
|
|
58
|
+
}
|
|
59
|
+
.relative {
|
|
60
|
+
position: relative;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Media Query helpers
|
|
64
|
+
.tablet-hide {
|
|
65
|
+
@media screen and #{$tablet} {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.tablet-show {
|
|
70
|
+
display: none;
|
|
71
|
+
@media screen and #{$tablet} {
|
|
72
|
+
display: block;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
.tablet-flex {
|
|
76
|
+
display: none;
|
|
77
|
+
@media screen and #{$tablet} {
|
|
78
|
+
display: flex;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
.mobile-hide {
|
|
82
|
+
@media screen and #{$mobile} {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.mobile-show {
|
|
87
|
+
display: none;
|
|
88
|
+
@media screen and #{$mobile} {
|
|
89
|
+
display: block;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
.mobile-flex {
|
|
93
|
+
display: none;
|
|
94
|
+
@media screen and #{$mobile} {
|
|
95
|
+
display: flex;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Border helpers
|
|
100
|
+
|
|
101
|
+
.box-pop {
|
|
102
|
+
border: 2px solid $color-pop;
|
|
103
|
+
padding: 40px;
|
|
104
|
+
}
|
|
105
|
+
.box-dark {
|
|
106
|
+
border: 2px solid $dark;
|
|
107
|
+
padding: 40px;
|
|
108
|
+
}
|
|
109
|
+
.box-light {
|
|
110
|
+
border: 2px solid $light;
|
|
111
|
+
padding: 40px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.border-left-pop {
|
|
115
|
+
border-left: 2px solid $color-pop;
|
|
116
|
+
padding-left: 40px;
|
|
117
|
+
}
|
|
118
|
+
.border-left-dark {
|
|
119
|
+
border-left: 2px solid $dark;
|
|
120
|
+
padding-left: 40px;
|
|
121
|
+
}
|
|
122
|
+
.border-left-light {
|
|
123
|
+
border-left: 2px solid $light;
|
|
124
|
+
padding-left: 40px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.underline-dark {
|
|
128
|
+
border-bottom: 2px solid $dark;
|
|
129
|
+
margin-bottom: 20px;
|
|
130
|
+
}
|
|
131
|
+
.underline-light {
|
|
132
|
+
border-bottom: 2px solid $light;
|
|
133
|
+
margin-bottom: 20px;
|
|
134
|
+
}
|
|
135
|
+
.underline-pop {
|
|
136
|
+
border-bottom: 2px solid $color-pop;
|
|
137
|
+
margin-bottom: 20px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
// flex helper classes to add to flexed elements
|
|
142
|
+
[class*='flex-center'], [class*='flex-end'] {
|
|
143
|
+
display: flex;
|
|
144
|
+
}
|
|
145
|
+
.flex-center {
|
|
146
|
+
justify-content: center;
|
|
147
|
+
align-items: center;
|
|
148
|
+
}
|
|
149
|
+
.flex-center-h {
|
|
150
|
+
align-items: center;
|
|
151
|
+
justify-content: flex-start;
|
|
152
|
+
}
|
|
153
|
+
.flex-center-v {
|
|
154
|
+
justify-content: center;
|
|
155
|
+
align-items: flex-start;
|
|
156
|
+
}
|
|
157
|
+
.flex-center-end {
|
|
158
|
+
justify-content: center;
|
|
159
|
+
align-items: flex-end;
|
|
160
|
+
}
|
|
161
|
+
.flex-end-v {
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
align-items: flex-start;
|
|
164
|
+
}
|
|
165
|
+
.flex-end-h {
|
|
166
|
+
align-items: flex-end;
|
|
167
|
+
justify-content: flex-start;
|
|
168
|
+
}
|
|
169
|
+
.flex-end {
|
|
170
|
+
justify-content: flex-end;
|
|
171
|
+
align-items: flex-end;
|
|
172
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.hero {
|
|
2
|
+
position: relative;
|
|
3
|
+
font-family: $header-font;
|
|
4
|
+
height: 100vh;
|
|
5
|
+
min-height: 500px; //change the minimum height for hero
|
|
6
|
+
&-content {
|
|
7
|
+
max-width: 1080px;
|
|
8
|
+
width: 100%;
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: 50%;
|
|
11
|
+
left: 50%;
|
|
12
|
+
transform: translate(-50%, -50%);
|
|
13
|
+
}
|
|
14
|
+
header {
|
|
15
|
+
width: 70%;
|
|
16
|
+
padding: 20px;
|
|
17
|
+
margin: auto;
|
|
18
|
+
text-align: center;
|
|
19
|
+
font-size: 1.5rem;
|
|
20
|
+
transition: width ease-in 200ms;
|
|
21
|
+
img {
|
|
22
|
+
max-width: 100%;
|
|
23
|
+
}
|
|
24
|
+
@media screen and #{$tablet} {
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&-body {
|
|
29
|
+
margin: auto;
|
|
30
|
+
position: relative;
|
|
31
|
+
padding: 10px 0;
|
|
32
|
+
width: 70%;
|
|
33
|
+
transition: width ease-in 200ms;
|
|
34
|
+
@media screen and #{$mobile} {
|
|
35
|
+
width: 100%;
|
|
36
|
+
padding: 10px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
&-image {
|
|
40
|
+
display: block;
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100vh;
|
|
43
|
+
min-height:500px;
|
|
44
|
+
object-fit: cover;
|
|
45
|
+
@media screen and #{$mobile-landscape} {
|
|
46
|
+
height: 170vh; //customize this height to control how large hero should be in landscape mode on mobile devices
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
//=============Hero Slideshows==============//
|
|
52
|
+
|
|
53
|
+
.hero-slideshow {
|
|
54
|
+
position: relative;
|
|
55
|
+
height: 100vh;
|
|
56
|
+
min-height: 500px; //change the minimum height for slideshow section
|
|
57
|
+
.images {
|
|
58
|
+
img {
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 0;
|
|
61
|
+
bottom: 0;
|
|
62
|
+
left: 0;
|
|
63
|
+
right: 0;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100vh;
|
|
66
|
+
display: block;
|
|
67
|
+
object-fit: cover;
|
|
68
|
+
min-height: 500px; //change the minimum height for images
|
|
69
|
+
transition: opacity ease-in-out 1s;
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
.active {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
.hero-text {
|
|
77
|
+
position: absolute;
|
|
78
|
+
left: 50%;
|
|
79
|
+
top: 50%;
|
|
80
|
+
transform: translate(-50%, -50%);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.left-arrow {
|
|
84
|
+
position: absolute;
|
|
85
|
+
left: 0;
|
|
86
|
+
top: 50%;
|
|
87
|
+
background: url('data:image/svg+xml;utf8,<svg width="40px" height="40px" viewBox="4 0 9 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon id="Path-2" stroke="none" fill="#F4F4F4" fill-rule="evenodd" transform="translate(8.500000, 9.065085) rotate(-270.000000) translate(-8.500000, -9.065085) " points="-3.60600438e-13 5 17 5 8.5 13.1301693"></polygon></svg>');
|
|
88
|
+
background-repeat: no-repeat;
|
|
89
|
+
background-position: center;
|
|
90
|
+
height: 40px;
|
|
91
|
+
width: 40px;
|
|
92
|
+
&:hover {
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.right-arrow {
|
|
97
|
+
position: absolute;
|
|
98
|
+
right: 0;
|
|
99
|
+
top: 50%;
|
|
100
|
+
background: url('data:image/svg+xml;utf8,<svg width="40px" height="40px" viewBox="4 0 9 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon id="Path-2" stroke="none" fill="#F4F4F4" fill-rule="evenodd" transform="translate(8.500000, 9.065085) rotate(-90.000000) translate(-8.500000, -9.065085) " points="-3.60600438e-13 5 17 5 8.5 13.1301693"></polygon></svg>');
|
|
101
|
+
background-repeat: no-repeat;
|
|
102
|
+
background-position: center;
|
|
103
|
+
height: 40px;
|
|
104
|
+
width: 40px;
|
|
105
|
+
&:hover {
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
.circles {
|
|
110
|
+
display: flex;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
}
|
|
113
|
+
.circle {
|
|
114
|
+
background: url('data:image/svg+xml;utf8,<svg width="15px" height="15px" viewBox="3 3 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle id="Oval-2" stroke="#F4F4F4" stroke-width="3" fill="none" cx="15.5" cy="15.5" r="10.5"></circle></svg>');
|
|
115
|
+
background-repeat: no-repeat;
|
|
116
|
+
background-position: center;
|
|
117
|
+
height: 25px;
|
|
118
|
+
width: 25px;
|
|
119
|
+
&:hover {
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
.circle.active {
|
|
124
|
+
background: url('data:image/svg+xml;utf8,<svg width="15px" height="15px" viewBox="3 3 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle id="Oval-2" stroke="#F4F4F4" stroke-width="3" fill="#f4f4f4" cx="15.5" cy="15.5" r="10.5"></circle></svg>');
|
|
125
|
+
background-repeat: no-repeat;
|
|
126
|
+
background-position: center;
|
|
127
|
+
height: 25px;
|
|
128
|
+
width: 25px;
|
|
129
|
+
&:hover {
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
nav {
|
|
2
|
+
position: absolute; //change to position: relative for bar that starts above content & position: fixed for a fixed nav
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 60px;
|
|
5
|
+
max-width: 1200px; //change how wide nav is allowed to go
|
|
6
|
+
left: 50%;
|
|
7
|
+
display: flex;
|
|
8
|
+
transform: translate(-50%,0);
|
|
9
|
+
z-index: 2;
|
|
10
|
+
font-family: $header-font;
|
|
11
|
+
@media screen and #{$tablet} {
|
|
12
|
+
padding-right: 30px;
|
|
13
|
+
}
|
|
14
|
+
.menu-items {
|
|
15
|
+
flex: 3;
|
|
16
|
+
max-width: 700px; //maximum width of container holding menu items
|
|
17
|
+
list-style: none;
|
|
18
|
+
display: flex;
|
|
19
|
+
@media screen and #{$tablet} { //hides menu items at tablet size
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
a, li { //hover effect when nav links or dropdowns are selected
|
|
23
|
+
margin: 0;
|
|
24
|
+
.dropdown a:hover { //override so dropdown links will not be effected by hover below
|
|
25
|
+
background: $dark;
|
|
26
|
+
color: $light;
|
|
27
|
+
}
|
|
28
|
+
&:hover {
|
|
29
|
+
background: $light;
|
|
30
|
+
color: $dark;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
}
|
|
33
|
+
a:hover {
|
|
34
|
+
color: inherit;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
header {
|
|
39
|
+
padding-left: 30px;
|
|
40
|
+
flex: 1;
|
|
41
|
+
align-self: center;
|
|
42
|
+
img {
|
|
43
|
+
height: 18px;
|
|
44
|
+
object-fit: cover;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
.nav-light {
|
|
49
|
+
background: $light;
|
|
50
|
+
max-width: 100%;
|
|
51
|
+
color: $dark;
|
|
52
|
+
}
|
|
53
|
+
.nav-dark {
|
|
54
|
+
max-width: 100%;
|
|
55
|
+
background: $dark;
|
|
56
|
+
color: $light;
|
|
57
|
+
}
|
|
58
|
+
.nav-pop {
|
|
59
|
+
max-width: 100%;
|
|
60
|
+
background: $color-pop;
|
|
61
|
+
color: $light;
|
|
62
|
+
}
|
|
63
|
+
.nav-ghost-light {
|
|
64
|
+
border-bottom: 2px solid $light;
|
|
65
|
+
color: $light;
|
|
66
|
+
}
|
|
67
|
+
.nav-ghost-dark {
|
|
68
|
+
border-bottom: 2px solid $dark;
|
|
69
|
+
color: $dark;
|
|
70
|
+
}
|
|
71
|
+
.nav-ghost-pop {
|
|
72
|
+
border-bottom: 2px solid $color-pop;
|
|
73
|
+
color: $color-pop;
|
|
74
|
+
}
|
|
75
|
+
.dropdown { //styling of dropdown class
|
|
76
|
+
position: relative;
|
|
77
|
+
.dropdown-menu { //styling of ul dropdown-menu
|
|
78
|
+
display: none;
|
|
79
|
+
list-style: none;
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 58px;
|
|
82
|
+
left: 0;
|
|
83
|
+
width: 100%;
|
|
84
|
+
background: $light;
|
|
85
|
+
li {
|
|
86
|
+
transition: background ease-in 100ms, color ease-in 100ms;
|
|
87
|
+
background: $light;
|
|
88
|
+
color: $dark;
|
|
89
|
+
padding: 15px 20px;
|
|
90
|
+
&:hover {
|
|
91
|
+
background: $dark;
|
|
92
|
+
color: $light;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.sub-dropdown-menu { //for dropdown menu nested within a dropdown
|
|
97
|
+
display: none;
|
|
98
|
+
list-style: none;
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: 0;
|
|
101
|
+
width: 160px; //change width of sub-dropdown-menu
|
|
102
|
+
height: 100%;
|
|
103
|
+
left: 100%; //switch to right to display on other side of menu
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
.dropdown:hover > .dropdown-menu {
|
|
107
|
+
display: block;
|
|
108
|
+
}
|
|
109
|
+
.dropdown:hover > .sub-dropdown-menu {
|
|
110
|
+
display: block;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//===========Mobile Menu=========//
|
|
114
|
+
.mobile-nav {
|
|
115
|
+
display: none;
|
|
116
|
+
width: 0;
|
|
117
|
+
@media screen and #{$tablet} {
|
|
118
|
+
width: auto;
|
|
119
|
+
display: flex;
|
|
120
|
+
}
|
|
121
|
+
&:hover {
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
}
|
|
124
|
+
.hamburger { //three bars that display to trigger mobile menu
|
|
125
|
+
display: none;
|
|
126
|
+
position: relative;
|
|
127
|
+
background: url('data:image/svg+xml;utf8,<svg width="27px" height="21px" viewBox="299 11 27 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" fill="none" transform="translate(301.000000, 13.000000)" stroke-linecap="round" stroke-width="1" fill-rule="evenodd"><g id="Nav/Menu" stroke="#F4F4F4"><path d="M0.409326823,1.5 L22.5119031,1.5" stroke-width="3"></path><path d="M0.409326823,8.5 L22.5119031,8.5" stroke-width="3"></path><path d="M0.409326823,15.5 L22.5119031,15.5" stroke-width="3"></path></g></g></svg>');
|
|
128
|
+
background-repeat: no-repeat;
|
|
129
|
+
background-position: center;
|
|
130
|
+
height: 21px;
|
|
131
|
+
width: 27px;
|
|
132
|
+
@media screen and #{$tablet} {
|
|
133
|
+
display: block;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
.flyout { //styling for mobile flyout to display mobile menu
|
|
138
|
+
position: absolute;
|
|
139
|
+
top: 0;
|
|
140
|
+
bottom: 0;
|
|
141
|
+
left: 0;
|
|
142
|
+
right: 0;
|
|
143
|
+
z-index: 5;
|
|
144
|
+
display: none;
|
|
145
|
+
overflow: auto;
|
|
146
|
+
background-image: linear-gradient(-180deg, transparentize($dark, 0) 20%, transparentize($dark, 0.1) 100%); //color gradient for flyout menu
|
|
147
|
+
width: 100%;
|
|
148
|
+
height: 100vh;
|
|
149
|
+
.bar { //bar at top of mobile flyout
|
|
150
|
+
display: flex;
|
|
151
|
+
height: 60px;
|
|
152
|
+
width: 100%;
|
|
153
|
+
background: $dark;
|
|
154
|
+
padding-left: 5px;
|
|
155
|
+
.close { //styling for x icon that closes mobile flyout
|
|
156
|
+
flex: 1;
|
|
157
|
+
z-index: 5;
|
|
158
|
+
background: url('data:image/svg+xml;utf8, <svg width="19px" height="19px" viewBox="-1 -1 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Nav/Menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="M0.65145077,0.6658667 L16.2803323,16.2947482" stroke="#F4F4F4" stroke-width="3"></path>
|
|
159
|
+
<path d="M0.65145077,0.6658667 L16.2803323,16.2947482" stroke="#F4F4F4" stroke-width="3" transform="translate(8.465892, 8.480307) scale(-1, 1) translate(-8.465892, -8.480307) "></path></g></svg>'); //x icon for close as svg paths
|
|
160
|
+
background-repeat: no-repeat;
|
|
161
|
+
background-position: 70%;
|
|
162
|
+
&:hover {
|
|
163
|
+
cursor: pointer;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
.flyout-menu { //styling of flyout menu items
|
|
169
|
+
margin: 20px 0 40px 0;
|
|
170
|
+
list-style: none;
|
|
171
|
+
li {
|
|
172
|
+
width: 280px;
|
|
173
|
+
font-size: 1.4rem;
|
|
174
|
+
text-transform: uppercase;
|
|
175
|
+
padding: 20px 0;
|
|
176
|
+
margin: 0 auto;
|
|
177
|
+
border-bottom: 2px solid $light;
|
|
178
|
+
a {
|
|
179
|
+
text-transform: uppercase;
|
|
180
|
+
font-size: 1.4rem;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
.fly-dropdown, .sub-fly-dropdown { //styling of flyout menu dropdowns
|
|
184
|
+
&:hover {
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
}
|
|
187
|
+
.dropdown-menu {
|
|
188
|
+
display: none;
|
|
189
|
+
list-style: none;
|
|
190
|
+
li {
|
|
191
|
+
border-bottom: none;
|
|
192
|
+
text-align: left;
|
|
193
|
+
font-size: 1rem;
|
|
194
|
+
padding: 0;
|
|
195
|
+
line-height: 2rem;
|
|
196
|
+
a {
|
|
197
|
+
font-size: 1rem;
|
|
198
|
+
line-height: 2rem;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
.sub-dropdown-menu { //styling of nested dropdown menu
|
|
202
|
+
display: none;
|
|
203
|
+
border-top: 1px solid $light;
|
|
204
|
+
padding-top: 10px;
|
|
205
|
+
list-style: none;
|
|
206
|
+
padding-left: 20px;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
.fly-dropdown .dropdown-menu {
|
|
212
|
+
margin-top: 10px; //seperates dropdown in fly from original li
|
|
213
|
+
}
|