am-commons 0.0.13 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b2cd3e3a84be5101a63cd469c49f65d4e88c0706
-  data.tar.gz: 6ed9686458b45178f12dae6110f9b06be9571436
+  metadata.gz: a326f9fa178ab0a5afa5b1fa643131a45f4bd709
+  data.tar.gz: 312248f091ffe6625810a79c39b347cdb18d5ac1
 SHA512:
-  metadata.gz: ec4719a1b47f60008e300f110ef394aec0779ae70cc30875b07bd7bd78d211ee358437157230f1abd819a17aadf03d99292b49879829383f8564527fff9d83ac
-  data.tar.gz: feb94f35d99e5e26e8c38fefc0d9144c25aa434736bdd9ee5c445e2317713f93693c78367480c21c255b21713ab4081083ca424170310310b4649caad3c3361b
+  metadata.gz: 0cfac12154b9e6c7139295a46f895c146afc0b786db70859d37d02de998ae3072bba6ce4886f5cfbdd06b5447af55405ffc0502229ac3d15aba718fe6110353d
+  data.tar.gz: 41da7e5d8e488fc07e0533bf7d44e36d12b007df2de81c015009cda84c18bef71eb3cf341ef1c02091eadede42de1ec558520702eed21c17755d8358cc13534d

data/lib/am-commons/version.rb

@@ -1,3 +1,3 @@
 module AmCommons
-  VERSION = "0.0.13"
+  VERSION = "0.0.14"
 end

data/package.json

@@ -1,4 +1,4 @@
 {
     "name": "am-commons",
-    "version": "0.0.13"
+    "version": "0.0.14"
 }

data/stylesheets/_am.scss

@@ -10,6 +10,7 @@
 @import "am-commons/epp-mixins";
 @import "am-commons/am-variables";
 @import "am-commons/am-icons";
+@import "am-commons/am-amt";
 @import "am-commons/am-components";
 @import "am-commons/am-utils";
 @import "am-commons/am-print";

data/stylesheets/am-commons/_am-american-flags.scss

@@ -10,25 +10,25 @@
 	background:url(http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/sprite-flags.png) no-repeat;
 	display:inline-block;
 }
-.flag.flag--ar,.flag.flag--AAR {
+.flag.flag--ar,.flag.flag--ARG {
     background-position: -16px 0
 }
-.flag.flag--bo ,.flag.flag--ABO {
+.flag.flag--bo ,.flag.flag--BOL {
     background-position: -32px 0
 }
-.flag.flag--br ,.flag.flag--ABR {
+.flag.flag--br ,.flag.flag--BRA {
     background-position: -48px 0
 }
 .flag.flag--ca, .flag.flag--ACA {
     background-position: -64px 0
 }
-.flag.flag--cl, .flag.flag--ACL {
+.flag.flag--cl, .flag.flag--CHL {
     background-position: -80px 0
 }
-.flag.flag--co,.flag.flag--ACO  {
+.flag.flag--co,.flag.flag--COL  {
     background-position: 0 -11px
 }
-.flag.flag--cr ,.flag.flag--ACR {
+.flag.flag--cr ,.flag.flag--CRI {
     background-position: -16px -11px
 }
 .flag.flag--cu , .flag.flag--ACU {
@@ -37,13 +37,13 @@
 .flag.flag--de, .flag.flag--ADE {
     background-position: -48px -11px
 }
-.flag.flag--dm, .flag.flag--ADO {
+.flag.flag--dm, .flag.flag--DOM {
     background-position: -64px -11px
 }
-.flag.flag--ec , .flag.flag--AEC {
+.flag.flag--ec , .flag.flag--ECU {
     background-position: -80px -11px
 }
-.flag.flag--es , .flag.flag--AES {
+.flag.flag--es , .flag.flag--ESP {
     background-position: 0 -22px
 }
 .flag.flag--fr , .flag.flag--AFR {
@@ -52,37 +52,37 @@
 .flag.flag--gb , .flag.flag--ADE {
     background-position: -32px -22px
 }
-.flag.flag--gt, .flag.flag--AGT {
+.flag.flag--gt, .flag.flag--GTM {
     background-position: -48px -22px
 }
-.flag.flag--hn, .flag.flag--AHN {
+.flag.flag--hn, .flag.flag--HND {
     background-position: -64px -22px
 }
-.flag.flag--mx , .flag.flag--AMX {
+.flag.flag--mx , .flag.flag--MEX {
     background-position: -80px -22px
 }
-.flag.flag--ni , .flag.flag--ANI {
+.flag.flag--ni , .flag.flag--NIC {
     background-position: 0 -33px
 }
-.flag.flag--pa , .flag.flag--APA {
+.flag.flag--pa , .flag.flag--PAN {
     background-position: -16px -33px
 }
-.flag.flag--pe, .flag.flag--APE {
+.flag.flag--pe, .flag.flag--PER {
     background-position: -32px -33px
 }
-.flag.flag--pr , .flag.flag--APR {
+.flag.flag--pr , .flag.flag--PRI {
     background-position: -48px -33px
 }
-.flag.flag--py , .flag.flag--APY {
+.flag.flag--py , .flag.flag--PRY {
     background-position: -64px -33px
 }
-.flag.flag--sv, .flag.flag--ASV {
+.flag.flag--sv, .flag.flag--SLV {
     background-position: -80px -33px
 }
-.flag.flag--us , .flag.flag--ASU {
+.flag.flag--us , .flag.flag--USA {
     background-position: 0 -44px
 }
-.flag.flag--uy, .flag.flag--AUY {
+.flag.flag--uy, .flag.flag--URY {
     background-position: -16px -44px
 }
 .flag.flag--ve ,.flag.flag--AVE{

data/stylesheets/am-commons/_am-components.scss

@@ -256,16 +256,18 @@ ul{
         @include box-shadow (none);
         @include text-shadow(none);
         &:hover{
-            background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
-            background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
-            background-image: linear-gradient(to top right, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
-            color:$gray-lighter;
-            cursor:default;
-            -webkit-animation: barberpole 0.5s linear infinite;
-            -webkit-animation: barberpole 0.5s linear infinite;
-            -moz-animation: barberpole 0.5s linear infinite;
-            -o-animation: barberpole 0.5s linear infinite;
-            animation: barberpole 0.5s linear infinite;
+            @extend .button--loading;
+            //background-image: -webkit-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
+            //background-image: -o-linear-gradient(bottom left, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
+            //background-image: linear-gradient(to top right, rgba(black, 0.1) 25%, transparent 25%, transparent 50%, rgba(black, 0.1) 50%, rgba(black, 0.1) 75%, transparent 75%, transparent);
+            //color:$gray-lighter;
+            //cursor:default;
+            //-webkit-animation: barberpole 0.5s linear infinite;
+            //-webkit-animation: barberpole 0.5s linear infinite;
+            //-moz-animation: barberpole 0.5s linear infinite;
+            //-o-animation: barberpole 0.5s linear infinite;
+            //animation: barberpole 0.5s linear infinite;
+            //background-color:$gray-light;
         }
     }
     &.button--link{
@@ -357,6 +359,24 @@ ul{
 
 //--------------Logo-------------\\
 
+.logo-am {
+    
+    width:192px;
+    height:32px;
+    margin:8px;
+
+    &--sm {
+        width:144px;
+        height:24px;
+    }
+
+    &--lg {
+        width:432px;
+        height:72px;
+    }
+
+}
+
 .background-am-logo {
     background:rgba(255,255,255,0.5);
     padding-top:16px;
@@ -582,7 +602,6 @@ ul{
         left: 0;
         background: white;
         border: 1px solid $gray-lighter;
-        display: none;
         list-style-type: none;
         margin: 0;
         padding: 0;
@@ -667,7 +686,7 @@ ul{
 
 .search{
     background-repeat: repeat-x;
-    height: 344px;
+    height: 336px;
     margin-bottom: 32px;
     @include respond-to(ph){
         height: auto;
@@ -678,8 +697,8 @@ ul{
     &__ctn{
         background-position: center center;
         background-size: cover;
-        padding-top: 16px;
-        padding-bottom: 16px;
+        padding-top: 8px;
+        padding-bottom: 8px;
         height: 312px;
         @include respond-to(ph){
             height: auto;
@@ -692,17 +711,47 @@ ul{
             position: relative;
             z-index: 2;
             min-height: 312px;
+            .form {
+                padding:8px;
+            }
             label{
                 color: white;
-                font-size: 14px;
+                @include font-rem(bold,14px,24px);
+            }
+            .label-xs {
+                display:inline-block;
+                margin-right:16px;
+                @include font-rem(bold,12px,16px);
+
+                & .description {
+                    display:inline-block;
+
+                    &:first-letter {
+                        text-transform:uppercase;
+                    }
+
+                }
+
+                .field-radio {
+                    vertical-align:top;
+                    margin-right:8px;
+
+                    @include respond-to(ph) {
+                        margin-right:4px;
+                    }
+
+                }
+
+                @include respond-to(ph) {
+                    margin-right:8px;
+                }
+
             }
             input[type="text"], input[type="search"], select{
                 margin-bottom: 8px;
             }
-            h1{
-                font-size: 24px;
-                line-height: 32px;
-                font-weight: normal;
+            h1, .title{
+                @include font-rem(normal,18px,24px);
                 color:white;
                 margin-bottom: 8px;
             }
@@ -837,8 +886,110 @@ ul{
         background:$white;
         padding:0px;
 
+        // &__container {
+        //     min-width:0;
+        // }
+
         &__container {
-            min-width:0;
+            padding:16px 8px;
+            background:$white;
+            min-width:120px;
+            border-width:0px 1px 1px 1px;
+            border-style:solid;
+            border-color:$gray-lightest;            
+
+            & .label-age {
+                //background:$notification-light;
+                //padding:4px;
+                display:inline-block;
+                line-height:32px !important;
+                //margin-top:4px;
+            }
+
+            & .separator {
+                border-bottom:1px dashed $gray-lighter;
+            }
+
+            & .circle-button {
+                @include font-rem(normal, 24px, 24px);
+                cursor:pointer;
+
+                &--disabled {
+                    cursor:auto;
+                    color:$gray-lighter;
+                    border-color:$gray-lighter;
+                }
+
+            }
+
+            & .number-input {
+                @include font-rem(normal, 24px, 24px);
+                display:inline-block;
+                text-align:center;
+                min-width:24px;
+                vertical-align:top;
+            }
+
+            & .highlight {
+                background:$warning;
+            }
+
+            & .text-option {
+                
+            }
+
+            &__list {
+                list-style:none;
+                margin-bottom:0px !important;
+
+                &__item {
+                    cursor:pointer;
+                    margin-bottom:8px;
+
+                    &:hover {
+                        background:$gray-lighter;
+                        font-weight:bold;
+                        color:$gray-darker;
+                    }
+                }
+            }
+
+        }
+
+        &--passenger {
+            display:none;
+            margin-top:4px !important;
+            box-sizing:border-box;
+            min-width:288px;
+            position:absolute;
+            z-index:3;
+            //box-shadow:1px -1px 0px $gray-lighter inset, -1px 0px 0px $gray-lighter inset;
+            box-shadow:0px 0px 3px rgba(0,0,0,0.75);
+            @include border-radius(4px);
+            border:4px solid $gray-lighter;
+
+            @include respond-to(ph) {
+                min-width:240px !important;
+                max-width:280px !important;
+            }
+
+            & .label-child {
+                color:$gray-darker !important;
+                line-height: (16px / 16px) * 1rem !important;
+                font-size: (12px / 16px) * 1rem !important;
+
+                &-xs {
+                    line-height: (16px / 16px) * 1rem !important;
+                    font-size: (12px / 16px) * 1rem !important;
+                    color:$gray-darker !important;
+                    font-weight:normal !important;
+                }
+            }
+
+            & input:focus {
+                border:2px solid $gray-lighter;
+            }
+
         }
 
         &--persons {
@@ -896,6 +1047,15 @@ ul{
 
     }
     &--flight{
+        
+        & .searchbox {
+            background-color:$orange-dark;
+        }
+
+        .type-group {
+            margin-bottom:8px;
+        }
+
         //background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-paris-bg.png');
         background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-grecia-bg.jpg');
         @include respond-to(ph){
@@ -905,6 +1065,7 @@ ul{
             //background-image: none!important;
         }
         .search__ctn{
+
             //background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-paris.png');
             background-image: url('http://2359891acbe3ccae04ac-e2a9c8f39dfb2e0608050999cf0e668b.r35.cf5.rackcdn.com/cover-grecia.png');
             @include respond-to(ph){
@@ -919,6 +1080,81 @@ ul{
                     display: inline-block;
                 }
             }
+
+            .addStep {
+                color:$white;
+                cursor:pointer;
+                padding-top:16px;
+                padding-bottom:16px;
+                border-top:1px solid $orange-dark;
+                border-bottom:1px solid $orange-dark;
+                @include font-rem(normal,14px,16px);
+                margin-top:8px;
+                margin-bottom:16px;
+                
+                & [class*="icon-"] {
+                    @include font-rem(bold,14px,16px);
+                    vertical-align:middle;
+                    margin-right:8px;
+                }
+
+                &-text {
+                    text-decoration:underline;
+                    @include font-rem(bold,14px,16px);
+                }
+
+            }
+
+            .removeStep {
+                color:$white;
+
+                &-text {
+                    text-decoration:underline;
+                }
+
+                &-ctn {
+                    cursor:pointer;
+                }
+
+            }
+
+            .add-hotel {
+                margin: 24px 0 8px 0;
+
+                .field {
+                    margin-right:8px;
+                }
+
+                .label{
+                    display: inline-block;
+                    @include font-rem(normal,12px,16px);
+                }
+
+                &__modif {
+                    display:inline-block;
+                    color:$white;
+                    margin-left:16px;
+                    padding-left:16px;
+                    border-left:1px solid $orange;
+                    cursor:pointer;
+                }
+
+                & .icon {
+                  @include font-rem(bold,14px,16px);
+                  margin-right:8px;
+                  vertical-align:middle;
+                }
+
+                & .text {
+                    display:inline-block;
+                    @include font-rem(bold,14px,16px);
+                }
+
+                @include respond-to(ph) {
+                    margin-top:8px;
+                }
+            }
+
         }
     }
     &--hotel{
@@ -1053,15 +1289,28 @@ ul{
 .jumbopromo{
     background-color: $gray;
     background-color: rgba(0,0,0,0.2);
+    padding:8px;
+    text-align:center;
+
     .jumbopromo__txt{
-        color: white;
+        color: $white;
         @include font-rem(normal,24px,32px);
         @include text-shadow(1px 1px 1px black);
     }
-    img{
-        width: 100%;
-        max-width: 624px;
+
+    .promoslider {
+
+        .item {
+            
+            img{
+                width: 100%;
+                max-width: 624px;
+            }  
+
+        }
+
     }
+
 }
 
 
@@ -1123,6 +1372,10 @@ ul{
             background:$error-light;
         }
 
+        .alert__close {
+            color:$error;
+        }
+
     }
 
     &--warning {
@@ -1139,6 +1392,10 @@ ul{
             background:$warning-light;
         }
 
+        .alert__close {
+            color:$warning-dark;
+        }
+
     }
 
     &--ok {
@@ -1154,6 +1411,11 @@ ul{
         .alert__text {
             background:$ok-light;
         }
+
+        .alert__close {
+            color:$ok;
+        }
+
     }
     &--notification {
 
@@ -1168,6 +1430,11 @@ ul{
         .alert__text {
             background:$notification-light;
         }
+
+        .alert__close {
+            color:$notification;
+        }
+
     }
     &--arrow-bottom {
 
@@ -1263,6 +1530,19 @@ ul{
             @include font-rem(normal,16px,16px,null);
         }
     }
+    &--dismiss {
+        .alert__close {
+            position:absolute;
+            top:50%;
+            right:16px;
+            margin-top:-8px;
+            @include font-rem(normal,16px,16px,null);
+            cursor:pointer;
+        }
+        .alert__text {
+            padding-right:48px;
+        }
+    }
 }
 
 //--------------Modal-------------\\
@@ -1560,7 +1840,7 @@ ul{
     &__item {
         display:inline-block;
         margin-left:0px;
-        @include font-rem(normal, 13px, 16px);
+        @include font-rem(normal, 14px, 16px);
 
         border-top:1px solid $gray-lighter;
         border-bottom:1px solid $gray-lighter;
@@ -1923,7 +2203,7 @@ ul{
         z-index:10;
         position:absolute !important;
         @include background-clip(padding-box);
-        padding:8px 0px;
+        padding:0px;
         box-shadow:0px 0px 3px rgba(0,0,0,0.75);
         @include border-radius(4px);
         border:4px solid $gray-lighter;
@@ -1932,19 +2212,63 @@ ul{
 
 
         li {
-            line-height: 24px;
             margin: 0;
-            padding: 4px 8px;
-            font-weight:bold;
-
-            &:hover, &.current{
+            line-height: initial;
+            span:hover, span.current{
                 background:$cyan-light;
                 cursor: pointer;
+
+                & mark {
+                    background:$cyan-light;
+                }
+
             }
 
-            & mark {
-                font-weight:normal !important;
+            span{
+                line-height: 24px;
+                font-size:12px;
+                margin: 0;
+                padding: 2px 8px 2px 32px;
+                font-weight: normal;
+                display: inline-block;
+                width: 100%;
+                @include box-sizing(border-box);
+                mark {
+                    font-weight: bold !important;
+                    background:$white;
+                    &:hover {
+                        background:$cyan-light;
+                    }
+                }
             }
+
+            .group-title {
+                background:$gray-lightest;
+                margin-bottom:0px;
+                color:$gray;
+
+                .title__icon, .title__text {
+                    @include font-rem(normal,14px,16px);
+                    width:auto;
+                    display:inline-block;
+                    font-weight:bold;
+                    &:hover{
+                        background:$gray-lightest;
+                        cursor:auto;
+                    }
+                }
+
+                .title__icon {
+                    padding-left:8px;
+                    font-weight:normal;
+                }
+
+                .title__text {
+                    padding:0;
+                }
+
+            }
+
         } 
     }
 }