spawntree
/
washnroll
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

css

master
Florian Eisenmenger 3 years ago
parent
90f90b4206
commit
21b5b7bf79
25 changed files with 527 additions and 88 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +30
    -7
      files/wash-n-roll/internal/js/scripts.js
  2. +13
    -1
      files/wash-n-roll/internal/scss/abstracts/_mixins.scss
  3. +32
    -1
      files/wash-n-roll/internal/scss/base/_basic.scss
  4. +1
    -0
      files/wash-n-roll/internal/scss/base/_components.scss
  5. +64
    -5
      files/wash-n-roll/internal/scss/components/_blog.scss
  6. +3
    -3
      files/wash-n-roll/internal/scss/components/_cart.scss
  7. +16
    -2
      files/wash-n-roll/internal/scss/components/_category-navigation.scss
  8. +10
    -6
      files/wash-n-roll/internal/scss/components/_checkout.scss
  9. +14
    -2
      files/wash-n-roll/internal/scss/components/_error.scss
  10. +1
    -1
      files/wash-n-roll/internal/scss/components/_faq.scss
  11. +4
    -1
      files/wash-n-roll/internal/scss/components/_form.scss
  12. +11
    -2
      files/wash-n-roll/internal/scss/components/_gallery.scss
  13. +3
    -0
      files/wash-n-roll/internal/scss/components/_image.scss
  14. +58
    -19
      files/wash-n-roll/internal/scss/components/_product.scss
  15. +5
    -5
      files/wash-n-roll/internal/scss/components/_slider.scss
  16. +81
    -6
      files/wash-n-roll/internal/scss/components/_teaser-large.scss
  17. +28
    -1
      files/wash-n-roll/internal/scss/components/_text.scss
  18. +66
    -5
      files/wash-n-roll/internal/scss/components/_youtube.scss
  19. +4
    -4
      files/wash-n-roll/internal/scss/layout/_____forms.scss
  20. +37
    -9
      files/wash-n-roll/internal/scss/layout/_footer.scss
  21. +36
    -5
      files/wash-n-roll/internal/scss/layout/_header.scss
  22. +5
    -2
      files/wash-n-roll/internal/scss/layout/_headlines.scss
  23. +3
    -0
      files/wash-n-roll/internal/scss/layout/_main.scss
  24. +1
    -1
      files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss
  25. +1
    -0
      files/wash-n-roll/internal/scss/wash-n-roll.scss

+ 30
- 7
files/wash-n-roll/internal/js/scripts.js View File

@@ -6,6 +6,7 @@ $('.quickContactclose').click(function () {
});*/

$(document).ready((e) => {
// home slider
$(".ce_sliderStart .slider-wrapper").slick({
autoplay: true,
autoplaySpeed: 5000,
@@ -15,14 +16,13 @@ $(document).ready((e) => {
arrows: false,
dots: true,
// responsive: [{
// breakpoint: 1640,
// breakpoint: 1005,
// settings: {
// autoplaySpeed: 2000,
// slidesToShow: 4,
// slidesToScroll: 1,
// arrows: true,
// slidesToShow: 1,
// slidesToScroll: 1
// }
// }, {
// }]
// , {
// breakpoint: 992,
// settings: {
// slidesToShow: 3,
@@ -39,6 +39,7 @@ $(document).ready((e) => {
// }]
});

// related products
$(".product-slider .product_list, .mod_iso_relatedproducts .product_list").slick({
autoplay: false,
slidesToShow: 3,
@@ -46,8 +47,22 @@ $(document).ready((e) => {
infinite: true,
arrows: true,
dots: false,
responsive: [{
breakpoint: 1281,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});

// Product detail product shots
$(".spwn-image-gallery").slick({
autoplay: false,
slidesToShow: 1,
@@ -66,7 +81,7 @@ $(document).ready((e) => {
$("#header-basket-items").appendTo("header a.isotope-basket, header strong.isotope-basket");
// FAQ list toggle
$(".mod_faqlist ul li h3").on("click", (e) => {
$(".mod_faqlist ul li h3").on("click", function() {
if ($(this).parents("li").hasClass("open")) {
$(this).parents("li").find(".answer").slideUp(300);
$(this).parents("li").removeClass("open");
@@ -115,6 +130,14 @@ $(document).ready((e) => {
h3.append("<span class='edit-span'>(<span></span>)</span>");
$(this).appendTo(h3.find(".edit-span span"));
});
$(".widget p.error").on("click", function() {
$(this).fadeOut(300);
$(this).parents(".widget").find(".mandatory").focus();
});
$(".widget .mandatory").on("click", function() {
$(this).parents(".widget").find("p.error").fadeOut(300);
});
});

jQuery(function ($) {


+ 13
- 1
files/wash-n-roll/internal/scss/abstracts/_mixins.scss View File

@@ -3,6 +3,17 @@ $base-size: 16;
@return ($target / $context) * 1rem;
}

@mixin afterOverflow {
&:after {
content:".";
display:block;
clear:both;
font-size:0;
height:0;
visibility:hidden;
}
}

@mixin transition {
transition: all 0.3s ease-out;
}
@@ -25,13 +36,14 @@ $base-size: 16;
line-height: size(20);
text-decoration: none;
color: $font;
white-space: nowrap;
border: none;
background: $tertiary;
border-radius: 20px;
cursor: pointer;
@include transition();
&:hover {
color: #fff;
color: $white;
}
}



+ 32
- 1
files/wash-n-roll/internal/scss/base/_basic.scss View File

@@ -16,7 +16,7 @@ body {
line-height: size(24);
color: $font;
font-weight: 400;
background: #fff;
background: $white;
overflow-x: hidden;
}
@@ -30,10 +30,12 @@ table, td, th {
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
strong {
font-weight: 700;
}
@@ -86,11 +88,40 @@ img {
#container {
padding: 5rem 0 0 0;
@media (max-width: 1004px) {
padding-top: 3rem;
}
.nopadding & {
padding-top: 0;
}
}
.mod_article {
padding: 0 190px;
@media (max-width: 1280px) {
padding-left: 14.85vw;
padding-right: 14.85vw;
}
@media (max-width: 1004px) {
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 768px) {
padding-left: 20px;
padding-right: 20px;
}
&.spwn-full-width {
padding-left: 40px;
padding-right: 40px;
@media (max-width: 768px) {
padding-left: 20px;
padding-right: 20px;
}
}
}
input:-moz-placeholder,
textarea:-moz-placeholder {


+ 1
- 0
files/wash-n-roll/internal/scss/base/_components.scss View File

@@ -1,5 +1,6 @@
@import 'components/slider';
@import 'components/text';
@import 'components/image';
@import 'components/youtube';
@import 'components/category-navigation';
@import 'components/teaser-large';


+ 64
- 5
files/wash-n-roll/internal/scss/components/_blog.scss View File

@@ -2,10 +2,24 @@
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 70px 2rem 70px;
margin: 0 -120px;
padding: 0 0 2rem 0;
@media (max-width: 1280px) {
margin-left: calc(-(14.85vw + 40px));
margin-right: calc(-(14.85vw + 40px));
}
@media (max-width: 1004px) {
margin-left: 0;
margin-right: 0;
}

.layout_latest {
width: calc(50% - 20px);
margin: 0 0 4.5rem 0;
@media (max-width: 768px) {
width: 100%;
}

a {
display: block;
position: relative;
@@ -13,38 +27,70 @@
padding: 0 0 24px 0;
}
}

p {
margin: 0;
}

.spwn-head {
display: flex;
justify-content: space-between;
padding: 0 0 0.5rem 0;

p {
&.category {
color: $primary;
font-weight: 700;
}

&.info {
font-weight: 300;
}
}
}

.image_container {
padding: 0 0 1rem 0;

img {
width: 100%;
height: 310px;
object-fit: cover;
@include transition();
@media (max-width: 1280px) {
height: 280px;
}
@media (max-width: 1004px) {
height: 210px;
}
@media (max-width: 768px) {
height: 330px;
}
@media (max-width: 575px) {
height: 280px;
}
@media (max-width: 430px) {
height: 220px;
}
}
}

h3 {
padding: 0 0 0.75rem 0;
font-size: size(20);
line-height: size(24);
font-family: 'Lato', sans-serif;
}

.ce_text {
padding: 0;

p {
padding: 0 !important;
}
}

.more {
position: absolute;
right: 0;
@@ -52,9 +98,11 @@
font-weight: 700;
text-decoration: underline;
}

a {
color: $font;
text-decoration: none;

&:hover {
.more {
color: $primary;
@@ -64,29 +112,40 @@
}

.mod_newsreader {
padding: 0 190px 2rem 190px;
.spwn-head {
display: flex;
justify-content: space-between;
padding: 0 0 0.5rem 0;

p {
margin: 0;

&.category {
color: $primary;
font-weight: 700;
}

&.info {
font-weight: 300;
}
}
}
.ce_text {
padding: 0 0 2rem 0;
.spwn-js-img {
padding-bottom: 2rem;
}

.block {
padding-left: 0;
padding-right: 0;
}

h2 {
font-size: size(40);
line-height: size(46);
}

.spwn-subhl {
margin-top: -2rem;
}


+ 3
- 3
files/wash-n-roll/internal/scss/components/_cart.scss View File

@@ -1,5 +1,5 @@
.mod_iso_cart {
padding: 0 190px 3rem 190px;
padding: 0 0 2rem 0;

.spwn-qc {
display: flex;
@@ -101,9 +101,9 @@
.submit {
@include button();
width: 100%;
border: 2px solid #fff;
border: 2px solid $white;
background-color: #b0b0b0;
color: #fff;
color: $white;
font-size: size(22);
font-weight: 400;



+ 16
- 2
files/wash-n-roll/internal/scss/components/_category-navigation.scss View File

@@ -5,9 +5,19 @@
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);

.ce_image {

padding: 0;
.image_container {
height: 264px;
@media (max-width: 1004px) {
height: 230px;
}
@media (max-width: 768px) {
height: 200px;
}
@media (max-width: 575px) {
height: 160px;
}
}

img {
@@ -53,7 +63,7 @@
a, strong {
display: block;
padding: 15px 0 8px 0;
color: #fff;
color: $white;
font-family: 'Mohave', sans-serif;
font-weight: 700;
text-align: center;
@@ -61,6 +71,10 @@
font-size: size(54);
line-height: size(64);
@include transition();
@media (max-width: 1004px) {
font-size: size(28);
line-height: size(34);
}
}

a {


+ 10
- 6
files/wash-n-roll/internal/scss/components/_checkout.scss View File

@@ -1,5 +1,5 @@
.mod_iso_checkout {
padding: 0 190px 3rem 190px;
padding: 0 0 2rem 0;

.steps {
padding: 0 0 5.5rem 0;
@@ -121,8 +121,11 @@

}

input {
input,
select,
textarea {
display: block;
z-index: 1;
}
}

@@ -157,21 +160,22 @@
h3 {
padding: 0 0 16px 0;
color: $primary;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: size(24);
line-height: size(32);

.edit-span {
padding: 0 0 0 4px;
color: $font;
font-size: size(12);

span {
}
}

a {
color: $font;
@include transition();

&:hover {
color: $primary;
}


+ 14
- 2
files/wash-n-roll/internal/scss/components/_error.scss View File

@@ -1,4 +1,16 @@
.error {
label.error,
p.error {
color: #f00;
font-weight: 700;
}
}

.widget {
p.error {
position: absolute;
left: 10px;
bottom: calc(2rem + 10px);
z-index: 10;
margin: 0;
background: $white;
}
}

+ 1
- 1
files/wash-n-roll/internal/scss/components/_faq.scss View File

@@ -1,5 +1,5 @@
.mod_faqlist {
padding: 0 190px 2rem 190px;
padding: 0 0 2rem 0;
ul {
}


+ 4
- 1
files/wash-n-roll/internal/scss/components/_form.scss View File

@@ -1,5 +1,5 @@
.ce_form {
padding: 0 190px 3rem 190px;
padding: 0 0 3rem 0;
}

.mod_iso_checkout form,
@@ -18,6 +18,9 @@
.widget {
width: calc(50% - 20px);
padding: 0 0 2rem 0;
@media (max-width: 575px) {
width: 100%;
}

&.widget-textarea {
width: 100%;


+ 11
- 2
files/wash-n-roll/internal/scss/components/_gallery.scss View File

@@ -3,15 +3,24 @@
ul {
display: flex;
justify-content: space-evenly;
padding: 40px 0 55px 0;
flex-wrap: wrap;
padding: 2.5rem 0 1.5rem 0;
margin: 0 auto;
max-width: calc(1280px - 24px);
max-width: calc(1200px - 24px);
}
li {
flex-grow: 1;
flex-basis: 0;
padding-bottom: 2rem;
}
.image_container {
padding: 0 0.5rem;
@media (max-width: 1004px) {
padding: 0 1.5rem;
}
@media (max-width: 768px) {
padding: 0 2.5rem 1rem 2.5rem;
}
img {
width: 64px;
margin: 0 auto 15px auto;


+ 3
- 0
files/wash-n-roll/internal/scss/components/_image.scss View File

@@ -0,0 +1,3 @@
.ce_image {
padding: 0 0 2rem 0;
}

+ 58
- 19
files/wash-n-roll/internal/scss/components/_product.scss View File

@@ -1,6 +1,10 @@
.mod_iso_productlist,
.mod_iso_relatedproducts {
padding: 0 90px 5rem 90px;
padding: 0 0 5rem 0;
@media (max-width: 575px) {
padding-left: 0;
padding-right: 0;
}

.product_list {
display: flex;
@@ -10,7 +14,10 @@

.product {
position: relative;
padding: 0 0 7.5rem 0;
padding: 0 0.5rem 7.5rem 0.5rem;
@media (max-width: 768px) {
padding-bottom: 3.5rem;
}

.formbody {
position: relative;
@@ -19,6 +26,9 @@
width: 270px;
margin: 0 auto;
padding: 0 0 2rem 0;
@media (max-width: 575px) {
width: 60vw;
}
}

h3 {
@@ -26,7 +36,6 @@
margin: 0 auto;
padding: 0 0 1rem 0;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: size(20);
line-height: size(26);
color: $font;
@@ -38,6 +47,7 @@

.image_container {
order: 1;
margin: 0 auto;

a {
display: block;
@@ -48,9 +58,13 @@
border: 4px solid $secondary;
width: 270px;
height: 270px;
object-fit: contain;
background: #fff;
object-fit: cover;
background: $white;
border-radius: 50%;
@media (max-width: 575px) {
width: 60vw;
height: 60vw;
}
}
}

@@ -91,7 +105,7 @@
border-radius: 10px;
padding: 1px 11px 0 11px;
font-weight: 500;
color: #fff;
color: $white;
font-size: size(18);
}

@@ -126,6 +140,12 @@
}
}
}

.empty {
text-align: center;
font-weight: 700;
color: $primary;
}
}

.mod_iso_productreader {
@@ -141,6 +161,10 @@
width: 100%;
position: relative;
padding: 0 0 2rem 0;
margin: 0 auto;
@media (max-width: 768px) {
width: 80%;
}

.spwn-image-gallery {

@@ -152,6 +176,12 @@
bottom: 150px;
transform: translate(310px, 0);
font-family: 'Mohave', sans-serif;
@media (max-width: 768px) {
right: 300px;
}
@media (max-width: 575px) {
bottom: 75px;
}

.price {
background: $secondary;
@@ -174,7 +204,7 @@
border-radius: 10px;
padding: 1px 11px 0 11px;
font-weight: 500;
color: #fff;
color: $white;
font-size: size(18);
}

@@ -195,6 +225,9 @@
img {
width: 554px;
margin: 0 auto;
@media (max-width: 768px) {
width: 100%;
}
}

.slick-dots {
@@ -221,7 +254,6 @@
}

h3 {
font-family: 'Lato', sans-serif;
color: $primary;
padding-bottom: 1.5rem;
}
@@ -231,25 +263,31 @@
}

.description {
padding: 0 190px 3rem 190px;
padding: 0 0 3rem 0;
font-weight: 700;
}

.spwn-additional-text {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin: 0 -50vw 2rem -50vw;
margin: 0 0 2rem 0;

&.spwn-bg {
@include fullwidth();
margin-bottom: 2rem;
padding: 2rem 0 0 0;
background: #f5f5f5;
}

.spwn-inner {
max-width: 876px;
margin: 0 auto;
.spwn-inner {
max-width: calc(1280px - 24px - 190px - 190px);
margin: 0 auto;
@media (max-width: 1280px) {
max-width: calc(100% - 14.85vw - 14.85vw);
}
@media (max-width: 1004px) {
max-width: calc(100% - 40px - 40px);
}
@media (max-width: 768px) {
max-width: calc(100% - 20px - 20px);
}
}
}

ul {
@@ -275,6 +313,7 @@
.submit_container {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0 0 4rem 0;



+ 5
- 5
files/wash-n-roll/internal/scss/components/_slider.scss View File

@@ -67,7 +67,7 @@
content: "";
display: block;
position: absolute;
right: 185px;
right: 171px;
top: calc(100% + 9px);
z-index: 4;
width: 25px;
@@ -106,9 +106,9 @@
display: inline-block;
padding: 10px 75px;
text-decoration: none;
color: #fff;
color: $white;
background: rgba(0, 0, 0, .23);
border: 1px solid #fff;
border: 1px solid $white;
border-radius: 20px;
@include transition();

@@ -118,8 +118,8 @@
}
}

h1, h2, h3 {
color: #fff;
h1, h2 {
color: $white;
line-height: size(52);
padding: 0 0 2rem 0;
}

+ 81
- 6
files/wash-n-roll/internal/scss/components/_teaser-large.scss View File

@@ -3,7 +3,11 @@
margin: 5rem 0 7.5rem 0;
background-color: $secondary;
border-radius: 30px;
color: #fff;
color: $white;
@media (max-width: 575px) {
margin-top: 7rem;
}

&.bg-nav-teaser {
background-image: url("../images/backgrounds/category-navigation.jpg");
background-repeat: no-repeat;
@@ -16,6 +20,17 @@
left: 34px;
top: 50%;
transform: translate(0, -50%);
padding: 0;
@media (max-width: 768px) {
left: 0;
margin-top: -45px;
}
@media (max-width: 575px) {
position: relative;
left: auto;
top: auto;
transform: translate(0,-50px);
}

.image_container {
position: relative;
@@ -23,6 +38,14 @@
height: 298px;
background: transparent url("../images/elements/highlight-star.svg") no-repeat left top;
background-size: 100% auto;
@media (max-width: 768px) {
width: 198px;
height: 198px;
}
@media (max-width: 575px) {
width: 298px;
height: 298px;
}
}

img {
@@ -31,17 +54,37 @@
top: 50%;
transform: translate(-50%, -50%);
width: 230px;
@media (max-width: 768px) {
width: 130px;
}
@media (max-width: 575px) {
width: 230px;
}
}
}

.ce_text {
padding: 25px 0 12px 330px;
padding: 25px 20px 12px 330px;
@media (max-width: 768px) {
padding-left: 210px;
}
@media (max-width: 575px) {
padding-top: 0;
padding-left: 20px;
}

h3 {
padding: 0 0 5px 0;
font-family: 'Lato', sans-serif;
font-size: size(34);
line-height: size(40);
@media (max-width: 575px) {
font-size: size(28);
line-height: size(34);
}
@media (max-width: 575px) {
font-size: size(34);
line-height: size(40);
}
}

.text {
@@ -53,6 +96,14 @@
margin: 0;
font-size: size(28);
line-height: size(34);
@media (max-width: 768px) {
font-size: size(20);
line-height: size(28);
}
@media (max-width: 575px) {
font-size: size(28);
line-height: size(34);
}
}
}

@@ -79,17 +130,33 @@
background: $secondary;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
@media (max-width: 768px) {
padding-left: 0;
}
@media (max-width: 575px) {
display: block;
padding-left: 0;
}
}

li {
flex-grow: 1;
flex-basis: 0;

&:first-child {
a, strong {
@media (min-width: 576px) and (max-width: 768px) {
border-bottom-left-radius: 30px;
}
}
}
&:last-child {
a, strong {
color: #fff;
color: $white;
background: $font;
border-bottom-right-radius: 30px;
@media (max-width: 575px) {
border-bottom-left-radius: 30px;
}

&:hover {
color: rgba(255, 255, 255, .3);
@@ -110,9 +177,17 @@
line-height: size(64);
text-decoration: none;
@include transition();
@media (max-width: 1004px) {
font-size: size(28);
line-height: size(34);
}
@media (max-width: 575px) {
font-size: size(54);
line-height: size(68);
}

&:hover {
color: #fff;
color: $white;
}
}
}


+ 28
- 1
files/wash-n-roll/internal/scss/components/_text.scss View File

@@ -1,9 +1,36 @@
.ce_text {
padding: 0 190px 2rem 190px;
padding: 0 0 2rem 0;
@include afterOverflow();
&.txt-col-3 {
.text {
column-count: 3;
column-gap: 2rem;
}
}
.image_container {
&.float_above {
margin: 0 0 1.5rem 0;
}
&.float_below {
margin: 0;
}
&.float-left {
float: left;
width: 50%;
margin: 0 1.5rem 1.5rem 0;
}
&.float-right {
float: right;
width: 50%;
margin: 0 0 1.5rem 1.5rem;
}
@media (max-width: 768px) {
&.float-left,
&.float-right {
float: none;
width: 100%;
margin: 0 0 1.5rem 0;
}
}
}
}

+ 66
- 5
files/wash-n-roll/internal/scss/components/_youtube.scss View File

@@ -25,6 +25,12 @@
justify-content: flex-end;
min-height: 300px;
margin-bottom: 6rem;
@media (max-width: 1004px) {
margin-top: 4rem;
}
@media (max-width: 575px) {
margin-bottom: 3rem;
}

&:before {
content: "";
@@ -37,21 +43,68 @@
height: 268px;
background: $secondary;
border-radius: 30px;
@media (max-width: 1280px) {
height: 230px;
}
@media (max-width: 1004px) {
width: 70%;
height: 168px;
transform: translate(0, -130%);
}
@media (max-width: 575px) {
height: 120px;
transform: translate(0, -170%);
}
}

h2, h3 {
color: #fff;
h2 {
color: $white;
position: absolute;
left: 50px;
top: 50%;
transform: translate(0, -50%);
padding-bottom: 0;
padding: 0 800px 0 0;
@media (max-width: 1280px) {
padding-right: calc(50vw + 90px);
font-size: size(48);
line-height: size(56);
}
@media (max-width: 1004px) {
top: 0;
transform: translate(0, -50%);
padding-right: 0;
margin-right: 27vw;
font-size: size(40);
line-height: size(48);
}
@media (max-width: 768px) {
font-size: size(32);
line-height: size(38);
}
@media (max-width: 575px) {
font-size: size(26);
line-height: size(32);
}
}

.video_container {
width: 717px;
padding-bottom: 0;
margin-right: 85px;
@media (max-width: 1280px) {
width: 50vw;
}
@media (max-width: 1004px) {
width: 60vw;
margin-top: 2rem;
}
@media (max-width: 768px) {
width: 85%;
margin-right: 0;
}
@media (max-width: 575px) {
height: 52vw;
}

.responsive {
position: relative;
@@ -75,7 +128,10 @@
mask-repeat: no-repeat;
mask-position: left top;
mask-size: 100% auto;
background-color: #fff;
background-color: $white;
@media (max-width: 575px) {
transform: translate(-50%, -50%) scale(50%);
}
}

&:hover {
@@ -98,7 +154,12 @@
padding-right: 30px;
font-size: size(24);
line-height: size(30);
color: #fff;
color: $white;
@media (max-width: 575px) {
bottom: 50px;
font-size: size(18);
line-height: size(24);
}
}
}
}

+ 4
- 4
files/wash-n-roll/internal/scss/layout/_____forms.scss View File

@@ -6,8 +6,8 @@
font-size: size(15);
background: transparent;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
border-bottom: 1px solid $white;
color: $white;
margin-bottom: 15px;
&::placeholder {
@@ -16,7 +16,7 @@
}
textarea {
border: 1px solid #fff;
border: 1px solid $white;
margin-top: 15px;
}
@@ -55,7 +55,7 @@
content: '';
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #ffff;
border: 1px solid $white;
padding: 8px;
display: block;
width: 18px;


+ 37
- 9
files/wash-n-roll/internal/scss/layout/_footer.scss View File

@@ -1,38 +1,56 @@
footer {
border-top: 4rem solid #fff;
border-top: 4rem solid $white;
background: #5C5B5B;
color: #fff;
color: $white;
@media (max-width: 768px) {
border-top-width: 1rem;
}
.inside {
@include make-container();
max-width: 1280px;
width: 100%;
max-width: 1200px;
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 70px 0 45px 0;
font-weight: 300;
@media (max-width: 1280px) {
max-width: 1280px;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 768px) {
padding-left: 20px;
padding-right: 20px;
}
h3 {
font-size: size(24);
line-height: size(29);
padding-bottom: 1.5rem;
font-family: 'Lato', sans-serif;
}
.mod_navigation {
width: 50%;
@media (max-width: 768px) {
width: 100%;
padding-bottom: 2.5rem;
}
ul {
li {
font-size: size(18);
line-height: size(22);
padding: 0 0 12px 0;
a {
display: inline-block;
padding: 5px 0;
font-size: size(16);
text-decoration: none;
color: #fff;
color: $white;
&:hover {
text-decoration: underline;
}
@@ -41,15 +59,23 @@ footer {
}
}
}
.social-media {
display: flex;
justify-content: flex-start;
position: absolute;
left: 50%;
bottom: 65px;
@media (max-width: 768px) {
position: relative;
left: auto;
bottom: auto;
}
li {
padding: 0 1.5rem 0 0;
}
a {
display: block;
width: 42px;
@@ -58,12 +84,14 @@ footer {
line-height: 1px;
text-indent: -9999px;
}
.fb {
a {
background: transparent url("../images/logos/sm-logo-facebook.svg") no-repeat left top;
background-size: 100% auto;
}
}
.ig {
a {
background: transparent url("../images/logos/sm-logo-instagram.svg") no-repeat left top;
@@ -98,7 +126,7 @@ footer {
//
// &:hover {
// background: $secondary;
// color: #fff;
// color: $white;
// }
// }
// }


+ 36
- 5
files/wash-n-roll/internal/scss/layout/_header.scss View File

@@ -1,12 +1,21 @@
header {
.inside {
@include make-container();
max-width: 1280px;
padding-top: 45px;
padding-bottom: 25px;
width: 100%;
max-width: 1200px;
padding: 45px 0 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 1280px) {
max-width: 1280px;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 768px) {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 576px) {
padding-top: 45px;
padding-bottom: 25px;
@@ -14,21 +23,33 @@ header {
}
.ce_image {
padding: 0;
img {
max-width: 198px;
@media (min-width: 576px) {
@include transition();
@media (max-width: 1004px) {
max-width: 160px;
}
@media (max-width: 768px) {
max-width: 198px;
}
}
}
.mod_navigation {
@media (max-width: 768px) {
display: none;
}
ul {
display: flex;
justify-content: flex-start;
}
li {
margin-left: 22px;
a, strong {
display: block;
width: 125px;
@@ -41,18 +62,26 @@ header {
border: 1px solid #F5F5F5;
border-radius: 20px;
@include transition();
@media (max-width: 1004px) {
width: 100px;
padding: 6px 0;
}
&:hover {
color: $secondary;
border-color: $secondary;
}
&.active,
&.trail {
background: $secondary;
border-color: $secondary;
&:hover {
color: $font;
}
}
&.isotope-basket {
position: relative;
background: $tertiary url("../images/elements/basket.svg") no-repeat 15px 9px;
@@ -60,6 +89,7 @@ header {
border-color: $tertiary;
text-indent: -9999px;
width: 78px;
&:hover {
background-color: #F5F5F5;
border-color: $secondary;
@@ -69,11 +99,12 @@ header {
}
}
}
#header-basket-items {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0,-50%);
transform: translate(0, -50%);
text-indent: 0;
}
}

+ 5
- 2
files/wash-n-roll/internal/scss/layout/_headlines.scss View File

@@ -19,10 +19,14 @@ h1 {
margin-left: -3px;
}
h3 {
font-family: 'Lato', sans-serif;
font-size: size(24);
line-height: size(30);
font-weight: 700;
padding-bottom: 3rem;
@media (max-width: 575px) {
padding-bottom: 1rem;
}
}
h1.ce_headline,
@@ -31,6 +35,5 @@ h3.ce_headline,
h4.ce_headline,
h5.ce_headline,
h6.ce_headline {
padding-left: 190px;
padding-right: 190px;
}

+ 3
- 0
files/wash-n-roll/internal/scss/layout/_main.scss View File

@@ -8,6 +8,9 @@ main {
.spwn-center {
text-align: center;
@media (max-width: 575px) {
text-align: left;
}
}
}
}

+ 1
- 1
files/wash-n-roll/internal/scss/vendors/slick/_slick-theme.scss View File

@@ -43,7 +43,7 @@ $slick-opacity-not-active: 0.25 !default;
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
background: $white slick-image-url("ajax-loader.gif") center center no-repeat;
}
}


+ 1
- 0
files/wash-n-roll/internal/scss/wash-n-roll.scss View File

@@ -2,6 +2,7 @@ $primary: #3AAA35; // green
$secondary: #BCD03C; // neon green
$tertiary: #BFD4E0; // blue
$font: #000;
$white: #fff;
$youtube-red: #eb3223;

@import "abstracts/variables";


Write Preview
Loading…
Cancel
Save