am-commons 0.0.1 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/am-commons-0.0.1.gem +0 -0
  3. data/lib/am-commons/version.rb +1 -1
  4. data/package.json +1 -1
  5. data/stylesheets/_am-commons.scss +1 -2
  6. data/stylesheets/am-commons/_am-american-flags.scss +93 -0
  7. data/stylesheets/am-commons/_am-components.scss +1767 -0
  8. data/stylesheets/am-commons/_am-footer.scss +102 -0
  9. data/stylesheets/am-commons/_am-header.scss +160 -0
  10. data/stylesheets/am-commons/_am-icons-definition.scss +616 -0
  11. data/stylesheets/am-commons/_am-icons.scss +57 -0
  12. data/stylesheets/am-commons/_am-main-menu.scss +243 -0
  13. data/stylesheets/am-commons/_am-print.scss +35 -0
  14. data/stylesheets/am-commons/_am-social-menu.scss +34 -0
  15. data/stylesheets/am-commons/_am-sprite-splash.scss +109 -0
  16. data/stylesheets/am-commons/_am-utils.scss +249 -0
  17. data/stylesheets/am-commons/_am-variables.scss +69 -0
  18. data/stylesheets/am-commons/_epp-grid.scss +1395 -0
  19. data/stylesheets/am-commons/_epp-mixins.scss +38 -0
  20. data/stylesheets/am-commons/_epp-pixelator.scss +352 -0
  21. data/stylesheets/am-commons/_epp-utils.scss +1230 -0
  22. data/stylesheets/am-commons/_fonts.scss +156 -0
  23. data/stylesheets/am-commons/am-airlines.scss +74 -0
  24. data/stylesheets/am-commons/am-checkout.scss +258 -0
  25. data/stylesheets/am-commons/am-common.scss +19 -0
  26. data/stylesheets/am-commons/am-flights-result.scss +2404 -0
  27. data/stylesheets/am-commons/am-flights-resultv2.scss +390 -0
  28. data/stylesheets/am-commons/am-not-found.scss +74 -0
  29. data/stylesheets/am-commons/am.scss +16 -0
  30. data/stylesheets/am-commons/epp-visual-help.scss +36 -0
  31. data/stylesheets/am-commons/epp.scss +12 -0
  32. data/stylesheets/am-commons/flight-result-searchbox.scss +69 -0
  33. metadata +29 -8
  34. data/stylesheets/am-commons/_am.scss +0 -5
  35. data/stylesheets/am-commons/_components.scss +0 -1
  36. data/stylesheets/am-commons/_utils.scss +0 -5
  37. data/stylesheets/am-commons/am/_variables.scss +0 -0
  38. data/stylesheets/am-commons/components/_example.scss +0 -0
  39. data/stylesheets/am-commons/utils/_example.scss +0 -0
@@ -0,0 +1,243 @@
1
+ //---------------------------------\\
2
+ //----------Table of Content-------\\
3
+ //---------------------------------\\
4
+
5
+ // 01 Placeholder for selected btn
6
+ // 02 Main Menu Container
7
+ // 03 Main Menu
8
+ // 04 Main Menu Responsive
9
+
10
+ @import "compass/css3";
11
+ @import "am-variables";
12
+
13
+
14
+ //----------Placeholder for selected btn-------\\
15
+
16
+ %selected{
17
+ color:$orange!important;
18
+ cursor: default;
19
+ &:after {
20
+ content: "";
21
+ background:$orange;
22
+ width:100%;
23
+ height:5px;
24
+ position: absolute;
25
+ top:-3px;
26
+ left: 0;
27
+ }
28
+ &:before {
29
+ content: "";
30
+ width: 0;
31
+ height: 0;
32
+ border-top: 7px solid $orange;
33
+ border-left: 8px solid transparent;
34
+ border-right: 8px solid transparent;
35
+ position: absolute;
36
+ top: 0px;
37
+ left: 41%;
38
+ }
39
+ &:hover{
40
+ color: $orange;
41
+ &:after {
42
+ content: "";
43
+ background:$orange;
44
+ width:100%;
45
+ height:5px;
46
+ position: absolute;
47
+ top:-3px;
48
+ left: 0;
49
+ }
50
+ &:before {
51
+ content: "";
52
+ width: 0;
53
+ height: 0;
54
+ border-top: 7px solid $orange;
55
+ border-left: 8px solid transparent;
56
+ border-right: 8px solid transparent;
57
+ position: absolute;
58
+ top: 0px;
59
+ left: 41%;
60
+ }
61
+ }
62
+ }
63
+
64
+
65
+ .main-menu-ctn{
66
+ border-top:1px solid $gray-light;
67
+ border-bottom:1px solid $gray-light;
68
+ margin:0 auto 0 auto;
69
+ z-index: 1;
70
+ position: relative;
71
+ @include box-shadow(0px 3px 5px 0px rgba(50, 50, 50, 0.2));
72
+ }
73
+ .main-menu {
74
+ width:100%;
75
+ font-size: 0;
76
+ &__button {
77
+ display:inline-block;
78
+ color:$gray !important;
79
+ position:relative;
80
+ padding: 0 14px;
81
+ text-transform: capitalize;
82
+ @include font-rem(normal,14px,38px);
83
+ &:hover{
84
+ color:$gray-light !important;
85
+ text-decoration: none;
86
+ &:after {
87
+ content: "";
88
+ background:$gray-light;
89
+ width:100%;
90
+ height:5px;
91
+ position: absolute;
92
+ top:-3px;
93
+ left: 0;
94
+ }
95
+ &:before {
96
+ content: "";
97
+ width: 0;
98
+ height: 0;
99
+ border-top: 8px solid $gray-light;
100
+ border-left: 8px solid transparent;
101
+ border-right: 8px solid transparent;
102
+ position: absolute;
103
+ top: 0px;
104
+ left: 41%;
105
+ }
106
+ }
107
+ &__icon {
108
+ margin-right:2px;
109
+ width:16px;
110
+ height:16px;
111
+ line-height: 16px;
112
+ display:inline-block;
113
+ }
114
+ &__hamburger {
115
+ float: left;
116
+ &:before {
117
+ content: "";
118
+ width: 0;
119
+ height: 0;
120
+ border-top: 7px solid transparent;
121
+ border-left: 8px solid transparent;
122
+ border-right: 8px solid transparent;
123
+ position: absolute;
124
+ top: 0px;
125
+ left: 41%;
126
+ }
127
+ &:hover{
128
+ color:$gray-light !important;
129
+ text-decoration: none;
130
+ &:after {
131
+ content: "";
132
+ background:transparent;
133
+ width:100%;
134
+ height:5px;
135
+ position: absolute;
136
+ top:-3px;
137
+ left: 0;
138
+ }
139
+ &:before {
140
+ content: "";
141
+ width: 0;
142
+ height: 0;
143
+ border-top: 7px solid transparent;
144
+ border-left: 8px solid transparent;
145
+ border-right: 8px solid transparent;
146
+ position: absolute;
147
+ top: 0px;
148
+ left: 41%;
149
+ }
150
+ }
151
+ }
152
+ .aereos &, .TKT &{
153
+ &.main-menu__button--aereos, &.main-menu__button--TKT{
154
+ @extend %selected;
155
+ }
156
+ }
157
+ .hoteles &, .HTL &{
158
+ &.main-menu__button--hoteles, &.main-menu__button--HTL{
159
+ @extend %selected;
160
+ }
161
+ }
162
+ .paquetes &, .PKT &{
163
+ &.main-menu__button--paquetes, &.main-menu__button--PKT{
164
+ @extend %selected;
165
+ }
166
+ }
167
+ .cruceros &, .CRU &{
168
+ &.main-menu__button--cruceros, &.main-menu__button--CRU{
169
+ @extend %selected;
170
+ }
171
+ }
172
+ .autos &, .CAR &{
173
+ &.main-menu__button--autos, &.main-menu__button--CAR{
174
+ @extend %selected;
175
+ }
176
+ }
177
+ .escapadas &, .SCA &{
178
+ &.main-menu__button--escapadas, &.main-menu__button--SCA{
179
+ @extend %selected;
180
+ }
181
+ }
182
+ .disney &, .PDN &{
183
+ &.main-menu__button--disney, &.main-menu__button--PDN{
184
+ @extend %selected;
185
+ }
186
+ }
187
+ .trenes &, .PTR &{
188
+ &.main-menu__button--trenes, &.main-menu__button--PTR{
189
+ @extend %selected;
190
+ }
191
+ }
192
+ .servicios &, .SRV &{
193
+ &.main-menu__button--servicios, &.main-menu__button--SRV{
194
+ @extend %selected;
195
+ }
196
+ }
197
+ .seguros &, .SME &{
198
+ &.main-menu__button--seguros, &.main-menu__button--SME{
199
+ @extend %selected;
200
+ }
201
+ }
202
+ .destinos &, .DTN &{
203
+ &.main-menu__button--destinos, &.main-menu__button--DTN{
204
+ @extend %selected;
205
+ }
206
+ }
207
+ .excursiones &, .EXC &{
208
+ &.main-menu__button--excursiones, &.main-menu__button--EXC{
209
+ @extend %selected;
210
+ }
211
+ }
212
+ }
213
+ &--responsive{
214
+ box-shadow: none;
215
+ border-bottom: none;
216
+ text-align: left;
217
+ height: 500px;
218
+ margin: 0 0 40px 0;
219
+ .main-menu__button{
220
+ display: block;
221
+ border-bottom: 1px solid $gray-light;
222
+ padding: 0;
223
+ margin-left: 0;
224
+ &:before {
225
+ content: "";
226
+ width: 0;
227
+ height: 0;
228
+ border-top: 0 solid transparent!important;
229
+ border-left: 0 solid transparent!important;
230
+ border-right: 0 solid transparent!important;
231
+ position: absolute;
232
+ top: 0px;
233
+ left: 41%;
234
+ }
235
+ &:after{
236
+ content: "";
237
+ background:transparent!important;
238
+ width:0!important;
239
+ height:0!important;
240
+ }
241
+ }
242
+ }
243
+ }
@@ -0,0 +1,35 @@
1
+ @media print {
2
+ body {
3
+ background: white;
4
+ font-size: 12pt;
5
+ }
6
+
7
+ .header, .main-menu-ctn, .footer {
8
+ display: none;
9
+ }
10
+
11
+ .epp-ctn {
12
+ width: auto;
13
+ margin: 0 5%;
14
+ padding: 0;
15
+ border: 0;
16
+ float: none !important;
17
+ color: black;
18
+ background: transparent none;
19
+ }
20
+
21
+ a:link,
22
+ a:visited {
23
+ color: #520;
24
+ background: transparent;
25
+ font-weight: bold;
26
+ text-decoration: underline;
27
+ }
28
+
29
+ a:link:after,
30
+ a:visited:after {
31
+ content: " (" attr(href) ") ";
32
+ font-size: 90%;
33
+ }
34
+
35
+ }
@@ -0,0 +1,34 @@
1
+ //---------------------------------\\
2
+ //----------Table of Content-------\\
3
+ //---------------------------------\\
4
+
5
+ // 01 Social Menu
6
+
7
+ .social-menu {
8
+ margin: 20px 0;
9
+ padding: 0;
10
+ display: inline-block;
11
+ font-size: 0;
12
+ vertical-align: top;
13
+ line-height: 22px;
14
+ &__item{
15
+ display: inline-block;
16
+ list-style-type: none;
17
+ text-decoration: none;
18
+ font-size: 22px;
19
+ color: red;
20
+ vertical-align: top;
21
+ line-height: 22px;
22
+ width: 22px;
23
+ height: 22px;
24
+ margin-right: 5px;
25
+ &__button{
26
+ color: $gray !important;
27
+ width: 22px;
28
+ height: 22px;
29
+ &:hover {
30
+ text-decoration:none;
31
+ }
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,109 @@
1
+ //---------------------------------\\
2
+ //----------Table of Content-------\\
3
+ //---------------------------------\\
4
+
5
+ // 01 Splash Flags
6
+
7
+ [class*="flag-"]{
8
+ display: inline-block;
9
+ background: url($cdn-url+'sprite-splash.png') no-repeat;
10
+ overflow: hidden;
11
+ text-indent: -9999px;
12
+ text-align: left;
13
+ }
14
+
15
+ .flag-ar {
16
+ background-position: -0px -0px;
17
+ width: 56px;
18
+ height: 56px;
19
+ }
20
+ .flag-br {
21
+ background-position: -0px -56px;
22
+ width: 56px;
23
+ height: 56px;
24
+ }
25
+ .flag-mx {
26
+ background-position: -0px -112px;
27
+ width: 56px;
28
+ height: 56px;
29
+ }
30
+ .flag-bo {
31
+ background-position: -0px -168px;
32
+ width: 48px;
33
+ height: 48px;
34
+ }
35
+ .flag-cl {
36
+ background-position: -0px -216px;
37
+ width: 48px;
38
+ height: 48px;
39
+ }
40
+ .flag-co {
41
+ background-position: -0px -264px;
42
+ width: 48px;
43
+ height: 48px;
44
+ }
45
+ .flag-cr {
46
+ background-position: -0px -312px;
47
+ width: 48px;
48
+ height: 48px;
49
+ }
50
+ .flag-do {
51
+ background-position: -0px -360px;
52
+ width: 48px;
53
+ height: 48px;
54
+ }
55
+ .flag-ec {
56
+ background-position: -0px -408px;
57
+ width: 48px;
58
+ height: 48px;
59
+ }
60
+ .flag-gt {
61
+ background-position: -0px -456px;
62
+ width: 48px;
63
+ height: 48px;
64
+ }
65
+ .flag-hn {
66
+ background-position: -0px -504px;
67
+ width: 48px;
68
+ height: 48px;
69
+ }
70
+ .flag-ni {
71
+ background-position: -0px -552px;
72
+ width: 48px;
73
+ height: 48px;
74
+ }
75
+ .flag-pa {
76
+ background-position: -0px -600px;
77
+ width: 48px;
78
+ height: 48px;
79
+ }
80
+ .flag-pe {
81
+ background-position: -0px -648px;
82
+ width: 48px;
83
+ height: 48px;
84
+ }
85
+ .flag-pr {
86
+ background-position: -0px -696px;
87
+ width: 48px;
88
+ height: 48px;
89
+ }
90
+ .flag-sv {
91
+ background-position: -0px -744px;
92
+ width: 48px;
93
+ height: 48px;
94
+ }
95
+ .flag-us {
96
+ background-position: -0px -792px;
97
+ width: 48px;
98
+ height: 48px;
99
+ }
100
+ .flag-uy {
101
+ background-position: -0px -840px;
102
+ width: 48px;
103
+ height: 48px;
104
+ }
105
+ .flag-py {
106
+ background-position: -0px -888px;
107
+ width: 48px;
108
+ height: 48px;
109
+ }
@@ -0,0 +1,249 @@
1
+ //---------------------------------\\
2
+ //----------Table of Content-------\\
3
+ //---------------------------------\\
4
+
5
+
6
+ // 01 Tipography
7
+ // 01-1 Titles
8
+ // 01-2 Only Readers
9
+ // 01-3 Text
10
+ // 01-3 Link Style
11
+ // 02 Transition
12
+
13
+
14
+ //---------------------------------\\
15
+ //------------Tipography-----------\\
16
+ //---------------------------------\\
17
+
18
+ //--------------Text-------------\\
19
+
20
+ .am-text--legal, .text--legal {
21
+ @include font-rem(normal,10px,16px);
22
+ }
23
+
24
+ .am-title--smallest, .am-text--smallest, .text--smallest{
25
+ @include font-rem(normal,12px,16px);
26
+ }
27
+ .am-title--smaller, .am-text--smaller, .text--smaller{
28
+ @include font-rem(normal,14px,16px);
29
+ }
30
+ .am-title--xxs, .am-text--xxs, .text--xxs{
31
+ @include font-rem(normal,16px,24px);
32
+ }
33
+ .am-title--xs, .am-text--xs, .text--xs{
34
+ @include font-rem(normal,18px,24px);
35
+ }
36
+ .am-title--sm, .am-text--sm, .text--sm{
37
+ @include font-rem(normal,20px,24px);
38
+ }
39
+ .am-title--md, .am-text--md, .text--md{
40
+ @include font-rem(normal,24px,32px);
41
+ }
42
+ .am-title--lg, .am-text--lg, .text--lg{
43
+ @include font-rem(normal,28px,32px);
44
+ }
45
+ .am-title--xl, .am-text--xl, .text--xl{
46
+ @include font-rem(normal,32px,40px);
47
+ }
48
+ .am-title--xxl, .am-text--xxl, .text--xxl{
49
+ @include font-rem(normal,36px,40px);
50
+ }
51
+ .am-title--larger, .am-text--larger, .text--larger{
52
+ @include font-rem(normal,48px,56px);
53
+ }
54
+ .am-title--largest, .am-text--largest, .text--largest{
55
+ @include font-rem(normal,56px,64px);
56
+ }
57
+ .am-title--shadow, .am-text--shadow, .text--shadow{
58
+ @include text-shadow(1px 1px 1px black);
59
+ }
60
+ .am-title--bold, .am-text--bold, .text--bold {
61
+ font-weight:bold;
62
+ }
63
+
64
+ .text--italic {
65
+ font-style:italic;
66
+ }
67
+
68
+ //-----------Only Readers----------\\
69
+
70
+ .am-only-readers, .only-readers{
71
+ font: 0/0 serif;
72
+ text-shadow: none;
73
+ color: transparent;
74
+ position: absolute;
75
+ }
76
+
77
+ //------------Link Style-----------\\
78
+
79
+ .link-style {
80
+ color:$link;
81
+ text-decoration: none;
82
+ cursor:pointer;
83
+ &:active{
84
+ color:$link-dark;
85
+ text-decoration: underline;
86
+ }
87
+ &:hover{
88
+ color:$link-light;
89
+ text-decoration: underline;
90
+ }
91
+ &[class*="icon-"]:hover {
92
+ text-decoration:none;
93
+ }
94
+ }
95
+
96
+ //------------Colors-----------\\
97
+
98
+
99
+ .color--primary-light {
100
+ color: $blue-light;
101
+ }
102
+ .color--primary {
103
+ color: $blue;
104
+ }
105
+ .color--primary-dark {
106
+ color: $blue-dark;
107
+ }
108
+
109
+ .color--secondary-light {
110
+ color: $orange-light;
111
+ }
112
+ .color--secondary {
113
+ color: $orange;
114
+ }
115
+ .color--secondary-dark {
116
+ color: $orange-dark;
117
+ }
118
+
119
+ .color--link-light {
120
+ color: $link-light;
121
+ }
122
+ .color--link {
123
+ color: $link;
124
+ }
125
+ .color--link-dark {
126
+ color: $link-dark;
127
+ }
128
+
129
+ .color--facebook {
130
+ color: $facebook;
131
+ }
132
+ .color--facebook-light {
133
+ color: $facebook-light;
134
+ }
135
+ .color--facebook-dark {
136
+ color: $facebook-dark;
137
+ }
138
+
139
+ .color--error, .color--important {
140
+ color: $error;
141
+ }
142
+ .color--error-light, .color--important-light {
143
+ color: $error-light;
144
+ }
145
+ .color--error-dark, .color--important-dark {
146
+ color: $error-dark;
147
+ }
148
+ .color--ok {
149
+ color: $ok;
150
+ }
151
+ .color--ok-light {
152
+ color: $ok-light;
153
+ }
154
+ .color--ok-dark {
155
+ color: $ok-dark;
156
+ }
157
+ .color--warning {
158
+ color: $warning;
159
+ }
160
+ .color--warning-light {
161
+ color: $warning-light;
162
+ }
163
+ .color--warning-dark {
164
+ color: $warning-dark;
165
+ }
166
+ .color--notification {
167
+ color: $notification;
168
+ }
169
+ .color--notification-light {
170
+ color: $notification-light;
171
+ }
172
+ .color--notification-dark {
173
+ color: $notification-dark;
174
+ }
175
+
176
+
177
+
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+ .color--gray-lightest {
190
+ color: $gray-lightest;
191
+ }
192
+ .color--gray-lighter {
193
+ color: $gray-lighter;
194
+ }
195
+ .color--gray-light {
196
+ color: $gray-light;
197
+ }
198
+ .color--gray {
199
+ color: $gray;
200
+ }
201
+ .color--gray-dark {
202
+ color: $gray-dark;
203
+ }
204
+ .color--gray-darker {
205
+ color: $gray-darker;
206
+ }
207
+ .color--gray-darkest {
208
+ color: $gray-darkest;
209
+ }
210
+
211
+ .color--cyan-light {
212
+ color: $cyan-light;
213
+ }
214
+ .color--cyan {
215
+ color: $cyan;
216
+ }
217
+
218
+ .color--red-light {
219
+ color: $red-light;
220
+ }
221
+ .color--red {
222
+ color: $red;
223
+ }
224
+ .color--red-dark {
225
+ color: $red-dark;
226
+ }
227
+ .color--green-light {
228
+ color: $green-light;
229
+ }
230
+ .color--green {
231
+ color: $green;
232
+ }
233
+ .color--green-dark {
234
+ color: $green-dark;
235
+ }
236
+ .color--white {
237
+ color: $white;
238
+ }
239
+ .color--black {
240
+ color: $black;
241
+ }
242
+
243
+ //---------------------------------\\
244
+ //------------Transition-----------\\
245
+ //---------------------------------\\
246
+
247
+ .transition {
248
+ @include transition(all, 0.2s, ease);
249
+ }