boletia_ui 0.1.1

data/vendor/assets/boletia_ui/stylesheets/menu/_header.scss

@@ -0,0 +1,314 @@
+/* NEW FRONT HEADER */
+
+.u-menu-height {line-height:6.4rem}
+
+
+.o-frontheader {
+  width: 100%;
+
+  ul {
+    padding-left: 0;
+    margin:0;
+  }
+
+  .ss-icon {
+    font-size: .8rem;
+    color: $white;
+  }
+}
+
+.o-frontheader--absolute, .o-frontheader--fixed {
+  top:0;
+  z-index: 1001;
+}
+
+.o-frontheader--absolute {position: relative;}
+.o-frontheader--relative {position: relative;}
+.o-frontheader--fixed {position: fixed;}
+
+
+.o-frontheader__logo {
+  margin-right: $base-space * 1.5;
+  height:6.4rem;
+  width: 11.8rem;
+  vertical-align: middle;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center; 
+  background-size: 100% auto;
+  @extend .u-menu-height; 
+
+  img {
+    height:2.2rem;
+    vertical-align: middle;
+    width: auto;
+  }
+}
+
+.o-frontheader__logo--small {
+  width: 5rem;
+  margin-right: $base-space * 0.5;
+}
+
+
+.o-frontheader__title {
+  line-height: 6.4rem;
+}
+
+
+.o-frontheader__item {
+  @extend .u-inline-block-middle;
+  @extend .u-menu-height;
+  position: relative;
+  letter-spacing:1px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  text-transform: uppercase;
+  margin-left: $base-space ;
+
+  a {@include animate;}
+
+  .ss-icon {display: inline-block;}
+}
+
+
+/* MAIN MENU ITEMS */
+
+.o-main-menu {
+  list-style-type: none;
+  position: relative;
+
+  li {margin-bottom: 0} /* OVERRIDE FOR MAIN.LESS*/
+}
+
+.o-main-menu--cta {
+  li {
+    margin-right: $base-space * 1.75;
+    display: inline-block;
+
+    &:last-child {margin-right: 0;}
+
+    a {padding: 0;}
+  }
+}
+
+
+
+
+
+/* MAIN MENU BUTTONS */
+
+.o-menu__button {
+  border: 2px solid;
+  display: inline-block;
+  line-height: 1;
+  padding: $base-space * 0.75  $base-space * 1;
+  @include border-radius(5px);
+}
+
+.o-menu__button--default {
+  background: darken($black,5%);
+  border-color: darken($black,5%);
+
+  &:hover {color:darken($lightgray,10%)}
+}
+
+.o-menu__button--primary {
+  background: $darkorange;
+  border-color: $darkorange;
+
+  &:hover {background:darken($darkorange,5%)}
+}
+
+.o-menu__button--secondary {
+  background: none;
+  color: $lightgray;
+
+  &:hover {color:darken($lightgray,10%)}
+}
+
+
+
+/* MOBILE STYLE MENU */
+.o-main-menu--slider {
+  display: none;
+
+  li { 
+    display: block;
+    line-height: 5.4rem;
+  }
+  
+  a {
+    border-top: 1px solid lighten($black,3%);
+    padding: 0 $base-space * 0.75;
+    display: block;
+
+    &:hover {
+      background: none;
+      color: $blue;}
+  }
+
+  .o-main-menu__phone {color: darken($lightgray,40%);}
+}
+
+
+
+
+
+/* HEADER PHONE */
+
+.c-phone-list {
+  list-style-type: none;
+  display: inline-block;
+  font-size: 12px;
+  vertical-align: middle;
+
+  li { 
+    display: block; 
+    margin: 0;
+  }
+
+  li a {
+    color: darken($lightgray,25%);
+    text-decoration: none;
+    letter-spacing:1px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    @include animate;
+
+    &:hover,&:focus {color: darken($lightgray,15%);}
+  }
+}
+
+
+
+
+
+/** SEARCH HEADER */
+
+
+.o-header-search {
+  position: relative;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-left-style: solid;
+  border-left-width: 1px;
+
+}
+
+
+.o-header-search__icon {
+  background-size: 100%;
+  position: absolute;
+  width: 1.7rem;
+  height: 1.7rem;
+  top: 2.4rem;
+  left:1.4rem;
+}
+
+
+.o-header-search__input {
+    background: none;
+    border: none;
+    padding:0;
+    padding-left: $base-space * 3;
+    width: 28.0rem;
+    font-size: 1.6rem;
+    font-weight: 300;
+    display: block;
+    vertical-align: middle;
+    @include animate;
+    @extend .u-menu-height;
+    @extend .u-border-box;
+}
+
+
+
+/* AUTOCOMPLETE */
+
+.o-header-search__autocomplete {
+
+  background: lighten($lightgray,3%);
+
+  .ui-menu-item {
+    display: block;
+    padding: $base-space * 0.5 $base-space * 1.25;
+    border-bottom: 1px solid darken($lightgray,2%);
+    text-decoration: none;
+    color: $bodytext;
+    font-size: 1.4rem;
+
+    &:hover,&:focus { 
+      background: $blue;
+      color: $lightgray
+    }
+
+  }
+}
+
+/** SEARCH  INTPUT THEMES */
+
+
+
+/* THEMES */
+
+.t-frontheader--white {
+  background: $white;
+  @include shadow(lighten($black,70%));
+
+  .o-frontheader__item a {color: $black;}
+
+  .o-menu__button--secondary {
+    border-color: $black;
+    color: $black;
+  }
+
+  .o-frontheader__logo {background-image: url(../images/logo/header-logo-black.png);}
+  .o-frontheader__logo--small {background-image: url(../images/logo/icon-logo140.png);}
+  .o-main-menu--slider a {border-color: $lightgray;}
+
+  .o-header-search {
+    border-color: darken($lightgray,5%);
+    border-color: darken($lightgray,5%);
+  }
+
+  .o-header-search__input {
+    color: $bodytext;
+  }
+
+}
+
+
+.t-frontheader--black {
+  background: $black;
+
+  .o-frontheader__item { color: darken($lightgray,20%);}
+  .o-frontheader__item a { color: $lightgray;}
+  .o-menu__button--secondary {border-color: $lightgray;}
+  .o-frontheader__logo {background-image: url(../images/logo/header-logo-white.png);}
+  .o-frontheader__logo--small {background-image: url(../images/logo/icon-logo140.png);}
+  .o-frontheader__title { color: $lightgray;}
+
+
+  .o-header-search {
+    border-color: lighten($black,7%);
+    border-color: lighten($black,7%);
+  }
+
+  .o-header-search__input {
+    color: darken($lightgray,10%);
+  }
+
+}
+
+
+
+/* MEDIA QUERIES */
+
+@media screen and (max-width:64em)  {
+  .u-wide-menu {display:none}
+}
+
+@media screen and (min-width:64em)  {
+  .u-mobile-button  {display: none; }
+}

data/vendor/assets/boletia_ui/stylesheets/menu/_new_front_footer.scss

@@ -0,0 +1,117 @@
+/* NEW FOOTER */
+
+.o-footer {
+  background: $black;
+  padding: $base-space * 3 0;
+  position: relative
+}
+
+.o-footer__title {
+  color:$lightgray;
+  text-transform: uppercase;
+  letter-spacing:1px;
+  font-weight: 600;
+  font-size: 1.3rem;
+}
+
+.o-footer__menu-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  font-size: 1.3rem;
+  clear: both;
+
+  li {margin-bottom: 0.2rem;}
+
+  li:last-child {margin-bottom: 0;}
+
+  li a {
+    color: darken($lightgray,30%);
+    text-decoration: none;
+    @include animate;
+
+    &:hover,&:focus { color: $lightgray;}
+  }
+}
+
+.o-footer__menu-list--inline {
+  
+  li { 
+    display: inline-block; 
+    margin-bottom: 0;
+  }
+
+  li a { margin: 0 0.4rem; }
+
+}
+
+.o-footer__payment-logos {
+  height: 3.6rem;
+  display: inline-block;
+}
+
+
+.o-footer__separator {
+  width: $base-space * 3.4;
+  margin: $base-space * 0.25 0 $base-space * 0.75;
+  border: 1px solid darken($lightgray,50%);
+}
+
+.o-footer__copyright {
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 0;
+  margin-top: 2.0rem;
+  color: darken($lightgray,30%);
+  font-size: 1.2rem;
+}
+
+.o-footer__small-logo {
+  width: 6rem;
+  display: block;
+  margin: 0 auto;
+}
+
+.o-footer__full-logo {
+  height: 2.2rem;
+  display: inline-block;
+  margin-top: 2rem;
+}
+
+.o-footer__mobile-nav {
+  text-align: center;
+
+  li {display: inline-block;}
+
+  li a { margin: 0 0.4rem;}
+}
+
+/* MEDIA QUERIES */
+
+
+@media screen and (max-width:64em)  {
+  .o-footer {
+    background: $black;
+    padding: $base-space 0;
+  }
+}
+
+@media screen and (max-width:50em)  {
+  .is-desktop {display: none;}
+  .is-mobile {display: block;}
+}
+
+@media screen and (min-width:50em)  {
+
+  .push-front {padding-bottom: 24rem;}
+  .footer-front {margin-top: -24rem}
+
+
+  .is-desktop {display: block;}
+  .is-mobile {display: none;}
+
+  .o-footer {
+    background: $black;
+    padding: $base-space * 3 0;
+  }
+}

data/vendor/assets/boletia_ui/stylesheets/menu/_new_front_header.scss

@@ -0,0 +1,314 @@
+/* NEW FRONT HEADER */
+
+.u-menu-height {line-height:6.4rem}
+
+
+.o-frontheader {
+  width: 100%;
+
+  ul {
+    padding-left: 0;
+    margin:0;
+  }
+
+  .ss-icon {
+    font-size: .8rem;
+    color: $white;
+  }
+}
+
+.o-frontheader--absolute, .o-frontheader--fixed {
+  top:0;
+  z-index: 1001;
+}
+
+.o-frontheader--absolute {position: relative;}
+.o-frontheader--relative {position: relative;}
+.o-frontheader--fixed {position: fixed;}
+
+
+.o-frontheader__logo {
+  margin-right: $base-space * 1.5;
+  height:6.4rem;
+  width: 11.8rem;
+  vertical-align: middle;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center; 
+  background-size: 100% auto;
+  @extend .u-menu-height; 
+
+  img {
+    height:2.2rem;
+    vertical-align: middle;
+    width: auto;
+  }
+}
+
+.o-frontheader__logo--small {
+  width: 5rem;
+  margin-right: $base-space * 0.5;
+}
+
+
+.o-frontheader__title {
+  line-height: 6.4rem;
+}
+
+
+.o-frontheader__item {
+  @extend .u-inline-block-middle;
+  @extend .u-menu-height;
+  position: relative;
+  letter-spacing:1px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  text-transform: uppercase;
+  margin-left: $base-space ;
+
+  a {@include animate;}
+
+  .ss-icon {display: inline-block;}
+}
+
+
+/* MAIN MENU ITEMS */
+
+.o-main-menu {
+  list-style-type: none;
+  position: relative;
+
+  li {margin-bottom: 0} /* OVERRIDE FOR MAIN.LESS*/
+}
+
+.o-main-menu--cta {
+  li {
+    margin-right: $base-space * 1.75;
+    display: inline-block;
+
+    &:last-child {margin-right: 0;}
+
+    a {padding: 0;}
+  }
+}
+
+
+
+
+
+/* MAIN MENU BUTTONS */
+
+.o-menu__button {
+  border: 2px solid;
+  display: inline-block;
+  line-height: 1;
+  padding: $base-space * 0.75  $base-space * 1;
+  @include border-radius(5px);
+}
+
+.o-menu__button--default {
+  background: darken($black,5%);
+  border-color: darken($black,5%);
+
+  &:hover {color:darken($lightgray,10%)}
+}
+
+.o-menu__button--primary {
+  background: $darkorange;
+  border-color: $darkorange;
+
+  &:hover {background:darken($darkorange,5%)}
+}
+
+.o-menu__button--secondary {
+  background: none;
+  color: $lightgray;
+
+  &:hover {color:darken($lightgray,10%)}
+}
+
+
+
+/* MOBILE STYLE MENU */
+.o-main-menu--slider {
+  display: none;
+
+  li { 
+    display: block;
+    line-height: 5.4rem;
+  }
+  
+  a {
+    border-top: 1px solid lighten($black,3%);
+    padding: 0 $base-space * 0.75;
+    display: block;
+
+    &:hover {
+      background: none;
+      color: $blue;}
+  }
+
+  .o-main-menu__phone {color: darken($lightgray,40%);}
+}
+
+
+
+
+
+/* HEADER PHONE */
+
+.c-phone-list {
+  list-style-type: none;
+  display: inline-block;
+  font-size: 12px;
+  vertical-align: middle;
+
+  li { 
+    display: block; 
+    margin: 0;
+  }
+
+  li a {
+    color: darken($lightgray,25%);
+    text-decoration: none;
+    letter-spacing:1px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    @include animate;
+
+    &:hover,&:focus {color: darken($lightgray,15%);}
+  }
+}
+
+
+
+
+
+/** SEARCH HEADER */
+
+
+.o-header-search {
+  position: relative;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-left-style: solid;
+  border-left-width: 1px;
+
+}
+
+
+.o-header-search__icon {
+  background-size: 100%;
+  position: absolute;
+  width: 1.7rem;
+  height: 1.7rem;
+  top: 2.4rem;
+  left:1.4rem;
+}
+
+
+.o-header-search__input {
+    background: none;
+    border: none;
+    padding:0;
+    padding-left: $base-space * 3;
+    width: 28.0rem;
+    font-size: 1.6rem;
+    font-weight: 300;
+    display: block;
+    vertical-align: middle;
+    @include animate;
+    @extend .u-menu-height;
+    @extend .u-border-box;
+}
+
+
+
+/* AUTOCOMPLETE */
+
+.o-header-search__autocomplete {
+
+  background: lighten($lightgray,3%);
+
+  .ui-menu-item {
+    display: block;
+    padding: $base-space * 0.5 $base-space * 1.25;
+    border-bottom: 1px solid darken($lightgray,2%);
+    text-decoration: none;
+    color: $bodytext;
+    font-size: 1.4rem;
+
+    &:hover,&:focus { 
+      background: $blue;
+      color: $lightgray
+    }
+
+  }
+}
+
+/** SEARCH  INTPUT THEMES */
+
+
+
+/* THEMES */
+
+.t-frontheader--white {
+  background: $white;
+  @include shadow(lighten($black,70%));
+
+  .o-frontheader__item a {color: $black;}
+
+  .o-menu__button--secondary {
+    border-color: $black;
+    color: $black;
+  }
+
+  .o-frontheader__logo {background-image: url(../images/logo/header-logo-black.png);}
+  .o-frontheader__logo--small {background-image: url(../images/logo/icon-logo140.png);}
+  .o-main-menu--slider a {border-color: $lightgray;}
+
+  .o-header-search {
+    border-color: darken($lightgray,5%);
+    border-color: darken($lightgray,5%);
+  }
+
+  .o-header-search__input {
+    color: $bodytext;
+  }
+
+}
+
+
+.t-frontheader--black {
+  background: $black;
+
+  .o-frontheader__item { color: darken($lightgray,20%);}
+  .o-frontheader__item a { color: $lightgray;}
+  .o-menu__button--secondary {border-color: $lightgray;}
+  .o-frontheader__logo {background-image: url(../images/logo/header-logo-white.png);}
+  .o-frontheader__logo--small {background-image: url(../images/logo/icon-logo140.png);}
+  .o-frontheader__title { color: $lightgray;}
+
+
+  .o-header-search {
+    border-color: lighten($black,7%);
+    border-color: lighten($black,7%);
+  }
+
+  .o-header-search__input {
+    color: darken($lightgray,10%);
+  }
+
+}
+
+
+
+/* MEDIA QUERIES */
+
+@media screen and (max-width:64em)  {
+  .u-wide-menu {display:none}
+}
+
+@media screen and (min-width:64em)  {
+  .u-mobile-button  {display: none; }
+}