delovanje pojavnih oken za prijavo in frontend oekn za prijave

frontend/drupal9/web/modules/custom/prijava_1ka/templates/prijava-arnes-modal-block.html.twig

@@ -3,11 +3,6 @@
     <div class="modal-box"><img src="/tema1ka/img/ikone/zapri.svg" class="closemodal">
 
 
-        <div class="vrni-na-intro-page modal-open-intro-obrazec">
-            << {{ lang['back'] }}
-        </div>
-
-
 {#        // Naslov#}
         <div class="row">
             <div class="col">
@@ -15,14 +10,14 @@
             </div>
         </div>
 
-        <div>
+        {# <div>
             <div class="col w-clearfix center">
                 <a href="https://1ka.arnes.si"  class="submit-btn w-button gumb-aai" style="margin: 0;">
                     <span class="modal-intro-title modal-intro-login-text">{{ lang['login_short'] }}</span>
                     <span class="modal-intro-title modal-intro-registration-text">{{ lang['e_login_register'] }}</span>
                 </a>
             </div>
-        </div>
+        </div> #}
 
         <p class="aai-obvestilo">{{ lang['cms_aai_login_redirect_text'] | raw  }}</p>
 
@@ -34,7 +29,7 @@
 
         <div>
             <div class="col w-clearfix center">
-                <a href="https://1ka.arnes.si"  class="submit-btn w-button gumb-aai">
+                <a href="https://1ka.arnes.si"  class="submit-btn w-button gumb gumb-aai login">
                     <span class="modal-intro-title modal-intro-login-text">{{ lang['login_short'] }}</span>
                     <span class="modal-intro-title modal-intro-registration-text">{{  lang['e_login_register'] }}</span>
                 </a>

frontend/drupal9/web/modules/custom/prijava_1ka/templates/prijava-block.html.twig

@@ -48,12 +48,6 @@
 
         {% else %}
 
-            {%  if(jezik == 'sl') %}
-                <div class="vrni-na-intro-page modal-open-intro-obrazec">
-                    <<  {{ lang['back']  }}
-                </div>
-            {%  endif %}
-
             <div class="row">
                 <div class="col">
                     <h3 class="modra center">
@@ -123,12 +117,6 @@
                             </div>
                         </div>
 
-                        <div class="col w-clearfix">
-                            <p class="paragraph">
-                                {{ lang['cms_login_registration_link'] | raw }}
-                            </p>
-                        </div>
-
                     </div>
 
 {#                    // Poročilo o napaki#}
@@ -163,6 +151,12 @@
                 </div>
             </div>
 
+            <div class="col w-clearfix">
+                <p class="paragraph">
+                    {{ lang['cms_login_registration_link'] | raw }}
+                </p>
+            </div>
+
        {% endif %}
 
    </div>

frontend/drupal9/web/modules/custom/prijava_1ka/templates/prijava-intro-block.html.twig

@@ -1,7 +1,7 @@
 {%  if not prijavljen %}
     <div class="rexister-modal" id="modal-info-login">
         <div class="modal-box">
-            <img src="/tema1ka/svg/icons-x.svg" class="closemodal">
+            <img src="/tema1ka/img/ikone/zapri.svg" class="closemodal">
  
 
             <div class="dva-stolpca">
@@ -52,14 +52,12 @@
                     <div class="display-block">
                         <div class="col">
                             <p class="besedilo" style="padding-top: 0.5rem;">{{ lang['cms_intro_modal_1ka_text'] | raw }}<br /><br /></p>
-                            <div class="ikona ikona-custom-login">
                             <div class="submit-btn w-button gumb" id="modal-open-1ka">
                                 <span class="modal-intro-title modal-intro-login-text">{{ lang['login_short'] }}</span>
                                 <span class="modal-intro-title modal-intro-registration-text"> {{ lang['e_login_register'] }}</span>
                             </div>
                         </div>
                     </div>
-                    </div>
 
                 </div>
 

frontend/drupal9/web/modules/custom/registracija_1ka/templates/registracija-block.html.twig

@@ -1,12 +1,6 @@
 <div class="rexister-modal" id="modal-registration">
     <div class="modal-box w-max-1024"><img src="/tema1ka/img/ikone/zapri.svg" class="closemodal">
         
-        {%  if(jezik == 'sl')  %}
-            <div class="vrni-na-intro-page modal-open-intro-obrazec">
-                << {{ lang['back'] }}
-            </div>
-        {%  endif %}
-        
         <div class="row glavni-naslov">
             <div class="col">
                 <h3 class="modra center">{{ lang['cms_register_title'] }}</h3>

frontend/drupal9/web/themes/custom/pro1ka/js/script.js

@@ -236,11 +236,9 @@
           jQuery('.rexister-modal').hide();
 
           if(jQuery(this).hasClass('modal-goto-registration')){
-
             jQuery('#modal-registration').css('display', 'flex');
 
           } else {
-
             jQuery('#modal-login').css('display', 'flex');
           }
 

frontend/drupal9/web/themes/custom/pro1ka/sass/bolaric/1ka.scss

@@ -431,11 +431,16 @@ p {
   text-decoration: none;
   cursor: pointer;
 
-  -webkit-transition: background-color 200ms linear;
+  
+
+/*   -webkit-transition: background-color 200ms linear;
   -moz-transition: background-color 200ms linear;
   -o-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
-  transition: background-color 200ms linear;
+  transition: background-color 200ms linear; */
+
+
+
 }
 
 .button:hover {
@@ -455,32 +460,61 @@ p {
 }
 
 .button.main-button {
-  background-color: #1e88e5;
+  background: linear-gradient(to left, #1e88e5 50%, $temo-modra 50%) right;
+  background-size: 200%;
+  transition: .2s ease-out;
   color: #fff;
+
+  img{
+    opacity:1;
+    transition:opacity 200ms;
+  }
 }
 
 .button.main-button-white {
   background-color: #fff;
   color: #1e88e5;
+
+  background: linear-gradient(to left, white 50%, #1e88e5 50%) right;
+  background-size: 200%;
+  transition: .2s ease-out;
+
+  img{
+    opacity:1;
+    transition:opacity 200ms;
+  }
 }
 
 .button.main-button:hover {
-  color: #fff;
+  border: 1px solid $temo-modra;
-  background-color: $temo-modra;
+  background-position: left;
+
+  img{
+    opacity:0;
+  }
 }
 
 
 .secondary-button{
-  border: 1px solid #1e88e5;
+  background: linear-gradient(to left, white 50%, #1e88e5 50%) right;
-  padding: 11px 7px 11px 17px;
+  background-size: 200%;
+  transition: .2s ease-out;
   color: #1e88e5;
 
-  &:hover{
+  border: 1px solid #1e88e5;
-    background-color: #1e88e5;
+  padding: 11px 7px 11px 17px;
-    color: #fff;
   
   img{
-      content: url("/tema1ka/svg/icons8-chevron-right-bela.svg");
+    opacity:1;
+    transition:opacity 200ms;
+  }
+
+  &:hover{
+    background-position: left;
+    color: white;
+
+    img{
+      opacity:0;
     }
   }
 }
@@ -490,6 +524,15 @@ p {
   width: 196px;
   padding: 11px 7px 11px 17px;
   color: #fff !important;
+
+  background: linear-gradient(to left, #1e88e5 50%, white 50%) right;
+  background-size: 200%;
+  transition: .2s ease-out;
+  
+  img{
+    opacity:1;
+    transition:opacity 200ms;
+  }
 }
 
 .buttons-row .secondary-button-white{
@@ -787,22 +830,24 @@ p {
 }
 .secondary-button-white:hover{
   color: #1e88e5 !important;
-  background-color: white;
+
+  background-position: left;
 
   img{
-    content: url("/tema1ka/svg/icons8-chevron-right.svg");
+    opacity:0;
   }
 }
 .button-flyin-blue{
   background-color: #fff;
 }
 .main-button-white:hover{
-  background-color: #1e88e5;
   color: white;
   border: 1px solid #fff;
 
+  background-position: left;
+
   img{
-    content: url("/tema1ka/svg/icons8-chevron-right-bela.svg");
+    opacity:0;
   }
 }
 

frontend/drupal9/web/themes/custom/pro1ka/sass/components/_popup.scss

@@ -25,13 +25,17 @@
       overflow: auto;
       max-height: 90vh;
       max-width: 750px;
-      padding: 53px 50px 30px;
+      padding: 50px;
       -webkit-box-flex: 1;
       -webkit-flex: 1;
       -ms-flex: 1;
       flex: 1;
       background-color: #fff;
 
+    .paragraph{
+      text-align: center;
+    }
+
     .closemodal{
       position: absolute;
       left: auto;
@@ -49,33 +53,143 @@
       font-size: 30px;
       line-height: 48px;
       font-weight: 400;
+
+      text-transform: uppercase;
+
+      &.center{
+        margin: auto;
+        padding-bottom: 25px;
+      }
+    }
+
+    h4{
+      font-weight: 400;
+      padding-bottom: 16px;
     }
 
     .w-input{
       border-style: solid;
       border-width: 1px;
-      border-color: #b3d8eb;
+      border-color: #d1d1d1;
+      margin-bottom: 16px;
+    }
+
+    .w-checkbox{
+      margin-bottom: 16px;
+      input{
+        float: none;
+      }
     }
 
     .submit{
       width: 100%;
       border: 0;
     }
+
+    .submit-prijava{
+      width: 100%;
+      border: 0;
+      margin-bottom: 16px;
+
+      background: $modra;
+      color: #ffffff;
+      padding: 0.5rem 1rem;
+      max-width: 250px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      cursor: pointer;
+      text-transform: uppercase;
+
+      transition: 0.2s;
+
+      &:hover {
+        background: $modra-hover;
+      }
+
+    }
+
+    .aai-obvestilo{
+      background: #f1f1f1;
+      border: 1px solid $siva;
+      padding: 1rem;
+      margin-bottom: 16px;
+    }
+
+    .gumb {
+      padding-right: 1rem;
+      background: $modra;
+      color: #ffffff;
+      padding: 0.5rem 1rem;
+      max-width: 250px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      cursor: pointer;
+  
+      transition: 0.2s;
+  
+      &:hover {
+        background: $modra-hover;
+      }
+  
+      &.gumb-aai{
+        text-transform: uppercase;
+        background: #e35205;
+        letter-spacing: 0.5px;
+        
+        &.login{
+          margin-top: 6px;
+          width: 50%;
+          padding: 14px 49px;
+        }
+
+        span{
+          justify-content: center;
+        }
+  
+        &:hover{
+          background: #fa6c21;
+        }
+      }
+  
+      img {
+        height: 1.6rem;
+        width: 52px;
+        padding-right: 1rem;
+        float: left;
+      }
+    }
+
+    ul{
+      margin-top: -10px;
+    }
+
   }
 }
 
 .dva-stolpca {
   display: flex;
+  margin-bottom: 25px;
 
   .preko-racunov {
     padding-left: 1rem;
-    border-left: 1px solid $crna-pisava;
+    border-left: 1px solid #d1d1d1;
+
+    h4{
+      margin-left: auto;
+      margin-right: auto;
+    }
 
     .ostale-prijave {
       display: flex;
       flex-direction: column;
       width: 300px;
 
+      .gumb{
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 16px;
+      }
+
       .aai-prijava-small{
         font-size: 0.8rem;
         line-height: 1.2;
@@ -87,9 +201,6 @@
     }
   }
 
-  .ikona {
-    //margin: 1rem;
-
   .gumb {
     padding-right: 1rem;
     background: $modra;
@@ -122,7 +233,6 @@
       float: left;
     }
   }
-  }
 
   .registracija {
     padding-right: 1rem;
@@ -138,10 +248,12 @@
     flex-direction: column;
 
     .naslov-url {
+      font-size: 20px;
       text-align: center;
       text-transform: uppercase;
       font-weight: bold;
       color: $modra;
+      margin-bottom: 20px;
     }
 
     .siv-url{
@@ -154,11 +266,12 @@
       color: #535050;
       font-size: 16px;
       line-height: 160%;
+      margin-bottom: 40px;
     }
 
     .submit-btn {
       margin-top: 3px;
-      margin-bottom: 27px;
+      //margin-bottom: 27px;
       padding: 14px 49px;
       font-weight: 600;
       text-transform: uppercase;

frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig

@@ -76,7 +76,7 @@
               </div>
             {% else %}
               <a href="#" id="modal-open-login" class="login">Prijava</a>
-              <a href="#" class="register w-button">Registracija</a>
+              <a href="#" id="modal-open-registration"class="register w-button">Registracija</a>
             {% endif %}
           </div>