From 35025e358f550de0e58b5d3eb10be2d0c0f61cd2 Mon Sep 17 00:00:00 2001
From: urospodkriznik <uros.podkriznik@gmail.com>
Date: Mon, 10 Oct 2022 17:29:21 +0200
Subject: [PATCH] drupal - responsive popravki frontpage, footer, menu, ceniki,
 generic site

---
 .../web/themes/custom/pro1ka/css/style.css    |  93 +++++++++--
 .../custom/pro1ka/sass/bacis/frontpage.scss   | 152 ++++++++++++------
 .../custom/pro1ka/sass/bolaric/1ka.scss       |  47 ++++--
 .../pro1ka/sass/bolaric/components.scss       |   1 +
 .../pro1ka/sass/components/_footer.scss       |  16 ++
 .../custom/pro1ka/sass/components/_menu.scss  |  12 ++
 .../pro1ka/sass/components/_quicktabs.scss    |  13 ++
 7 files changed, 263 insertions(+), 71 deletions(-)

diff --git a/frontend/drupal9/web/themes/custom/pro1ka/css/style.css b/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
index 7585b92a4..d8fe3e76f 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
+++ b/frontend/drupal9/web/themes/custom/pro1ka/css/style.css
@@ -943,6 +943,39 @@ body {
   width: 35%;
   line-height: 1.4; }
 
+@media screen and (max-width: 991px) {
+  .slider-right {
+    height: auto;
+    margin-top: 40px; } }
+@media screen and (max-width: 479px) {
+  .slider-right {
+    height: 335px !important;
+    margin-top: 10px !important;
+    margin-bottom: -40px !important; }
+
+  .slider-title {
+    font-size: 30px !important;
+    margin-bottom: 20px !important;
+    font-weight: 400 !important; }
+
+  .slider-subtitle {
+    margin-bottom: 20px !important; }
+
+  .section-title {
+    padding: 0 !important; }
+    .section-title .title {
+      font-size: 23px !important;
+      line-height: 29px !important; }
+
+  .flexcol .content {
+    padding: 0 !important; }
+
+  .blok .text {
+    font-size: 40px !important;
+    line-height: 40px !important; }
+
+  .pridruzi-se-nam .row {
+    flex-direction: column; } }
 .breadcrumbs {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1030,6 +1063,13 @@ ul.seznam-tem {
       font-size: 18px;
       font-weight: 400; }
 
+@media screen and (max-width: 479px) {
+  ul.quicktabs-tabs li {
+    margin: 0 !important;
+    padding: 10px !important; }
+    ul.quicktabs-tabs li a {
+      font-size: 15px;
+      line-height: 19px; } }
 .modal, .rexister-modal {
   position: fixed;
   left: 0%;
@@ -2151,6 +2191,12 @@ nav.tabs {
     .nav-menu .menu-icon img {
       height: 35px;
       cursor: pointer; } }
+@media screen and (max-width: 479px) {
+  .nav-menu .menu-icon {
+    margin-right: 25px; }
+
+  .mobile-nav-menu {
+    min-width: unset; } }
 #block-languageswitcher {
   margin-right: 40px; }
   #block-languageswitcher ul {
@@ -2228,6 +2274,14 @@ a {
 .blue-section .secondary-button-white {
   color: white; }
 
+@media screen and (max-width: 479px) {
+  .div-block-17 .buttons-row {
+    flex-direction: column; }
+    .div-block-17 .buttons-row a {
+      max-width: unset;
+      width: unset; }
+      .div-block-17 .buttons-row a.main-button-white {
+        margin-bottom: 10px; } }
 #search-api-page-block-form-iskanje {
   display: flex; }
   #search-api-page-block-form-iskanje .js-form-type-search {
@@ -2424,7 +2478,8 @@ body {
 img {
   max-width: 100%;
   vertical-align: middle;
-  display: inline-block; }
+  display: inline-block;
+  align-self: center; }
 
 html.w-mod-touch * {
   background-attachment: scroll !important; }
@@ -4862,7 +4917,8 @@ p {
   z-index: 3;
   padding-right: 20px;
   font-size: 16px;
-  font-weight: 600; }
+  font-weight: 600;
+  align-self: center; }
 
 .si {
   width: 50%;
@@ -6439,16 +6495,24 @@ p {
     font-size: 14px; }
 
   .compare-col.leftcol {
-    -webkit-box-flex: 2;
-    -webkit-flex: 2;
-    -ms-flex: 2;
-    flex: 2; }
-
-  .ostale-storitve .compare-col.leftcol {
     -webkit-box-flex: 100%;
     -webkit-flex: 100%;
     -ms-flex: 100%;
     flex: 100%; }
+
+  .h2-compare {
+    margin-bottom: 0 !important; }
+
+  .accordion-title:not(.title-cena) {
+    line-height: normal;
+    align-self: center;
+    min-height: 35px;
+    display: flex;
+    align-items: center; }
+
+  .accordion-title-block .accordion-icon {
+    margin-top: 0; }
+
   .ostale-storitve .accordion-title-block {
     display: block; }
     .ostale-storitve .accordion-title-block .title-cena {
@@ -6593,8 +6657,8 @@ p {
     margin-right: 0px; }
 
   .col {
-    padding-right: 10px;
-    padding-left: 10px; }
+    padding-right: 0 !important;
+    padding-left: 0 !important; }
 
   .col._6-12-12-12 {
     -webkit-box-flex: 0;
@@ -6699,6 +6763,14 @@ p {
     -ms-flex: 0 0 33.3333%;
     flex: 0 0 33.3333%; }
 
+  .ostale-storitve.compare-col {
+    padding-right: 2px;
+    padding-left: 2px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1; }
+
   .compare-col.leftcol {
     margin-top: 0px;
     padding-top: 0px;
@@ -6727,6 +6799,7 @@ p {
     font-size: 14px; }
 
   .div-block-22 {
+    margin-top: 40px;
     display: block;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/frontpage.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/frontpage.scss
index 5d5f54d4a..b35e1bd15 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/frontpage.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/bacis/frontpage.scss
@@ -1,4 +1,4 @@
-.section.uvodni-slider{
+.section.uvodni-slider {
   padding-top: 0;
   z-index: 121;
   display: -webkit-box;
@@ -21,7 +21,7 @@
   background-color: #fff;
   text-align: left;
 
-  .slider-right{
+  .slider-right {
     height: 460px;
     position: relative;
     display: -webkit-box;
@@ -41,7 +41,7 @@
     -ms-flex: 1;
     flex: 1;
 
-    .slider-slika{
+    .slider-slika {
       position: absolute;
       z-index: 3;
       width: 100%;
@@ -51,7 +51,7 @@
     }
   }
 
-  .slider-left{
+  .slider-left {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -66,7 +66,7 @@
     -ms-flex: 0 50%;
     flex: 0 50%;
 
-    .slider-title{
+    .slider-title {
       margin-bottom: 40px;
       color: #333;
       font-size: 50px;
@@ -74,7 +74,7 @@
       font-weight: 300;
     }
 
-    .slider-subtitle{
+    .slider-subtitle {
       margin-bottom: 40px;
       color: #333;
       font-size: 19px;
@@ -85,7 +85,7 @@
   }
 }
 
-.section{
+.section {
   .section-title {
     padding-right: 50px;
     padding-left: 50px;
@@ -110,21 +110,21 @@
   }
 }
 
-.izbira-paketa{
-  .section-main{
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+.izbira-paketa {
+  .section-main {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
 
-    .col{
+    .col {
       padding-right: 25px;
       padding-left: 25px;
       width: 33.3333%;
@@ -134,17 +134,17 @@
       flex: 0 0 33.3333%;
       text-align: center;
 
-      img.package{
+      img.package {
         margin-bottom: 20px;
       }
 
-      .icon{
+      .icon {
         width: 150px;
         height: 150px;
         margin-bottom: 20px;
       }
 
-      .title{
+      .title {
         margin-bottom: 10px;
         color: $temo-modra;
         font-size: 18px;
@@ -156,8 +156,8 @@
   }
 }
 
-.funkcionalnost{
-  .section-main{
+.funkcionalnost {
+  .section-main {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -171,7 +171,7 @@
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 
-    .flexcol{
+    .flexcol {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -182,13 +182,13 @@
       -ms-flex: 0 50%;
       flex: 0 50%;
 
-      .content{
+      .content {
         padding-top: 0;
         padding-right: 25px;
         padding-left: 25px;
         display: flex;
 
-        .icon{
+        .icon {
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
@@ -211,7 +211,7 @@
           background-color: $sv-modra;
           opacity: 1;
 
-          img{
+          img {
             width: 34px;
             height: 34px;
             opacity: 1;
@@ -242,8 +242,8 @@
   }
 }
 
-.koraki-spletnega-anketiranja{
-  .section-title{
+.koraki-spletnega-anketiranja {
+  .section-title {
     padding-right: 25px;
     padding-left: 25px;
     -webkit-box-flex: 1;
@@ -296,7 +296,7 @@
         }
       }
 
-      .gumb{
+      .gumb {
         width: 33.3333%;
         -webkit-box-flex: 0;
         -webkit-flex: 0 0 33.3333%;
@@ -304,7 +304,7 @@
         flex: 0 0 33.3333%;
         padding: 0 25px;
 
-        .button{
+        .button {
           max-width: 200px;
           -webkit-box-flex: 1;
           -webkit-flex: 1;
@@ -340,7 +340,7 @@
   }
 }
 
-.pridruzi-se-nam{
+.pridruzi-se-nam {
   .row {
     display: -webkit-box;
     display: -webkit-flex;
@@ -354,7 +354,7 @@
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 
-    .gumb{
+    .gumb {
       //margin-top: 30px;
       //margin-bottom: 20px;
       -webkit-box-pack: center;
@@ -446,7 +446,7 @@
         flex: 0 50%;
       }
 
-      &.tretina{
+      &.tretina {
         width: 33.3333%;
         -webkit-box-flex: 0;
         -webkit-flex: 0 0 33.3333%;
@@ -458,8 +458,8 @@
   }
 }
 
-.zaupajo-nam{
-  .row-logotipi{
+.zaupajo-nam {
+  .row-logotipi {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -472,7 +472,7 @@
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 
-    img{
+    img {
       max-width: 100%;
       vertical-align: middle;
       display: inline-block;
@@ -486,13 +486,13 @@
   }
 }
 
-.col-6-blue{
+.col-6-blue {
   -webkit-box-flex: 0;
   padding-right: 25px;
   padding-left: 25px;
   max-width: 800px;
 
-  &.vert-center{
+  &.vert-center {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -504,7 +504,7 @@
   }
 }
 
-.stolpec-4{
+.stolpec-4 {
   padding-right: 25px;
   padding-left: 25px;
   -webkit-box-flex: 1;
@@ -512,13 +512,13 @@
   -ms-flex: 1;
   min-width: 200px;
 
-  &.logotipi{
-    img{
+  &.logotipi {
+    img {
       height: 60px;
       margin: 0.75rem 0;
       margin-right: 20px;
 
-      &.fdv{
+      &.fdv {
         width: 214px;
         height: auto;
       }
@@ -532,12 +532,12 @@
   }
 }
 
-.koraki-spletnega-anketiranja{
-  .slika{
+.koraki-spletnega-anketiranja {
+  .slika {
     position: relative;
   }
 
-  .centered_text{
+  .centered_text {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -549,3 +549,57 @@
     line-height: 1.4;
   }
 }
+
+@media screen and (max-width: 991px) {
+  .slider-right {
+    height: auto;
+    margin-top: 40px;
+  }
+}
+
+@media screen and (max-width: 479px) {
+
+  .slider-right {
+    height: 335px !important;
+    margin-top: 10px !important;
+    margin-bottom: -40px !important;
+  }
+
+  .slider-title {
+    font-size: 30px !important;
+    margin-bottom: 20px !important;
+    font-weight: 400 !important;
+  }
+
+  .slider-subtitle {
+    margin-bottom: 20px !important;
+  }
+
+  .section-title {
+    padding: 0 !important;
+
+    .title {
+      font-size: 23px !important;
+      line-height: 29px !important;
+    }
+  }
+
+  .flexcol {
+    .content {
+      padding: 0 !important;
+    }
+  }
+
+  .blok {
+    .text {
+      font-size: 40px !important;
+      line-height: 40px !important;
+    }
+  }
+
+  .pridruzi-se-nam{
+    .row{
+      flex-direction: column;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss
index 577530bd6..82c4b7c6b 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss
@@ -825,6 +825,7 @@ p {
   padding-right: 20px;
   font-size: 16px;
   font-weight: 600;
+  align-self: center;
 }
 
 .si {
@@ -2659,20 +2660,31 @@ p {
   }
 
   .compare-col.leftcol {
-    -webkit-box-flex: 2;
-    -webkit-flex: 2;
-    -ms-flex: 2;
-    flex: 2;
-  }
-
-  .ostale-storitve{
-    .compare-col.leftcol {
-      -webkit-box-flex: 100%;
+    -webkit-box-flex: 100%;
       -webkit-flex: 100%;
       -ms-flex: 100%;
       flex: 100%;
-    }
+  }
 
+  .h2-compare {
+    margin-bottom: 0 !important;
+  }
+
+  .accordion-title:not(.title-cena){
+    line-height: normal;
+    align-self: center;
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+  }
+
+  .accordion-title-block{
+    .accordion-icon{
+      margin-top: 0;
+    }
+  }
+
+  .ostale-storitve{
     .accordion-title-block{
       display: block;
 
@@ -2864,8 +2876,8 @@ p {
   }
 
   .col {
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
   }
 
   .col._6-12-12-12 {
@@ -2997,6 +3009,16 @@ p {
     flex: 0 0 33.3333%;
   }
 
+  .ostale-storitve.compare-col {
+    padding-right: 2px;
+    padding-left: 2px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+  }
+
+
   .compare-col.leftcol {
     margin-top: 0px;
     padding-top: 0px;
@@ -3031,6 +3053,7 @@ p {
   }
 
   .div-block-22 {
+    margin-top: 40px;
     display: block;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/components.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/components.scss
index 41e7c0ff4..e3ae4061f 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/components.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/components.scss
@@ -59,6 +59,7 @@ img {
   max-width: 100%;
   vertical-align: middle;
   display: inline-block;
+  align-self: center;
 }
 html.w-mod-touch * {
   background-attachment: scroll !important;
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_footer.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_footer.scss
index 9fef7ff9c..3c6496e74 100755
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_footer.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_footer.scss
@@ -3,3 +3,19 @@
     color: white;
   }
 }
+
+@media screen and (max-width: 479px) {
+  .div-block-17{
+    .buttons-row{
+      flex-direction: column;
+      a{
+        max-width: unset;
+        width: unset;
+
+        &.main-button-white{
+          margin-bottom: 10px;
+        }
+      }
+    }
+  } 
+}
\ No newline at end of file
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
index 6881f1594..e1cc5b5b4 100755
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
@@ -405,4 +405,16 @@ nav.tabs {
       }
     }
   }
+}
+
+@media screen and (max-width: 479px) {
+  .nav-menu {
+    .menu-icon {
+      margin-right: 25px;
+    }
+  }
+
+  .mobile-nav-menu{
+    min-width: unset;
+  }
 }
\ No newline at end of file
diff --git a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_quicktabs.scss b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_quicktabs.scss
index 0b9217e1e..edc897f8a 100644
--- a/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_quicktabs.scss
+++ b/frontend/drupal9/web/themes/custom/pro1ka/sass/components/_quicktabs.scss
@@ -75,3 +75,16 @@ ul.seznam-tem{
     }
   }
 }
+
+@media screen and (max-width: 479px) {
+  ul.quicktabs-tabs{
+    li{
+      margin: 0 !important;
+      padding: 10px !important;
+      a{
+        font-size: 15px;
+        line-height: 19px;
+      }
+    }
+  } 
+}
\ No newline at end of file