From 8bd4a30e38ae02e865fb1cb2f63030506ff3541d Mon Sep 17 00:00:00 2001
From: tejagerjovic <teja.gerjovic@fdv.uni-lj.si>
Date: Wed, 10 Nov 2021 14:29:49 +0100
Subject: [PATCH] Redesign - typography, disabled popravki

---
 admin/survey/redesign_test.php                | 45 ++++++++++---------
 public/css/admin_new.css                      | 35 ++++++++++++---
 resources/sass/admin_new/basic/basic.scss     |  1 +
 resources/sass/admin_new/basic/colors.scss    |  1 +
 resources/sass/admin_new/basic/font.scss      |  8 ----
 resources/sass/admin_new/basic/icons.scss     |  6 +++
 resources/sass/admin_new/basic/links.scss     |  4 +-
 .../sass/admin_new/basic/typography.scss      |  7 +++
 .../admin_new/components/form/button.scss     |  3 ++
 .../sass/admin_new/components/form/input.scss | 26 +++++++++++
 10 files changed, 99 insertions(+), 37 deletions(-)
 create mode 100644 resources/sass/admin_new/basic/typography.scss

diff --git a/admin/survey/redesign_test.php b/admin/survey/redesign_test.php
index a2809b0bd..cb6842ef5 100644
--- a/admin/survey/redesign_test.php
+++ b/admin/survey/redesign_test.php
@@ -71,7 +71,7 @@
                             <span class="menu_left-title paid">
                                 Plačljivi moduli
                             </span>
-                            <span class="faicon yellow lock_close"></span>
+                            <span class="faicon yellow lock_close yellow"></span>
                             
                                     
                             <ul class="menu_left-list paid">
@@ -185,9 +185,9 @@
                                         <label for="r2">Option 2</label>
                                     </div>
 
-                                    <div class="setting_item">
-                                        <input class="radio disabled" type="radio" id="r3" name="radio">
-                                        <label for="r3">Option 3 - disabled</label>
+                                    <div class="setting_item disabled">
+                                        <input class="radio" type="radio" id="r3" name="radio" disabled>
+                                        <label for="r3" disabled>Option 3 - disabled</label>
                                     </div>
 
                                 </div>
@@ -195,31 +195,32 @@
                                 <div class="setting_holder">
                                     <span class="setting_title">Checkboxi - related:</span>
                                     <div class="setting_item">
-                                        <input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
-                                        <label for="c1">Option 1</label>
+                                        <input class="checkbox" type="checkbox" id="o1" name="checkbox"></input>
+                                        <label for="o1">Option 1</label>
                                     </div>
                                     <div class="setting_item">    
-                                        <input class="checkbox" type="checkbox" id="c2" name="checkbox"></input>
-                                        <label for="c2">Option 2</label>
+                                        <input class="checkbox" type="checkbox" id="o2" name="checkbox" disabled></input>
+                                        <label for="o2" disabled>Option 2 - disabled</label>
                                     </div>
                                 </div>
 
-                                <div class="setting_holder unrelated">
-                                    <span class="setting_title">Checkboxi - unrelated:</span>
-                                    <div class="setting_item">
-                                        <input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
+                                
+                                <p>Checkboxi - unrelated</p>
+
+                                <div class="setting_holder">
+                                    <input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
                                         <label for="c1">Ena nastavitev</label>
-                                    </div>
-                                    <div class="setting_item checkbox">    
-                                        <input class="checkbox" type="checkbox" id="c2" name="checkbox"></input>
-                                        <label for="c2">Druga nastavitev</label>
-                                    </div>
-                                    <div class="setting_item checkbox">    
-                                        <input class="checkbox" type="checkbox" id="c3" name="checkbox"></input>
-                                        <label for="c3">Tretja nastavitev</label>
-                                    </div>
-
                                 </div>
+                                <div class="setting_holder">    
+                                    <input class="checkbox" type="checkbox" id="c2" name="checkbox"></input>
+                                    <label for="c2">Druga nastavitev</label>
+                                </div>
+                                <div class="setting_holder">    
+                                    <input class="checkbox" type="checkbox" id="c3" name="checkbox"></input>
+                                    <label for="c3">Tretja nastavitev</label>
+                                </div>
+
+                                
 
                                 <div class="setting_holder">
                                     <label class="input_label">Gumbi:</label><br><br>
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 675da8389..39f289ae4 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -5048,6 +5048,9 @@ body {
   font-family: Source Sans Pro, sans-serif;
 }
 
+/* 
+    All colors
+*/
 p, span {
   font-size: 16px;
 }
@@ -5055,9 +5058,6 @@ p.warning, span.warning {
   color: #FF0000;
 }
 
-/* 
-    All colors
-*/
 /* 
     Only layout styles - position, display, max-width...
 */
@@ -5123,6 +5123,10 @@ span.faicon.small,
 a.faicon.small {
   font-size: 10px !important;
 }
+span.faicon.yellow,
+a.faicon.yellow {
+  color: #FFC700;
+}
 
 span.faicon.lock_open::before {
   content: "\f3c1";
@@ -5135,10 +5139,10 @@ span.faicon.lock_close::before {
 a {
   cursor: pointer;
   color: #1E88E5;
-  transition: 0.3s;
+  transition: 0.2s;
 }
 a:hover {
-  color: #FFC700 !important;
+  color: #0059ab !important;
 }
 a.menu-left {
   color: inherit;
@@ -5239,6 +5243,7 @@ button.blue,
 submit.blue {
   color: #FFFFFF;
   background-color: #1E88E5;
+  border: 1px #1E88E5 solid;
 }
 button.blue:hover,
 submit.blue:hover {
@@ -5278,6 +5283,7 @@ button.yellow,
 submit.yellow {
   color: #333333;
   background-color: #FFC700;
+  border: 1px #FFC700 solid;
 }
 button.yellow:hover,
 submit.yellow:hover {
@@ -5287,6 +5293,7 @@ button.red,
 submit.red {
   color: #FFFFFF;
   background-color: #FF0000;
+  border: 1px #FF0000 solid;
 }
 button.red:hover,
 submit.red:hover {
@@ -5298,6 +5305,10 @@ label {
   margin-right: 13px;
   font-size: 16px;
 }
+label[disabled] {
+  color: #777777;
+  pointer-events: none;
+}
 
 input[type=text] {
   border: 1px solid #C4C4C4;
@@ -5363,6 +5374,20 @@ input[type=radio] + label:before {
 input[type=radio]:checked + label:before {
   content: "\f192";
 }
+input[type=radio][disabled] + label:before {
+  color: #777777;
+}
+input[type=checkbox][disabled] + label:before {
+  color: #777777;
+}
+input[type=checkbox][disabled] + label:before {
+  color: #777777;
+  pointer-events: none;
+}
+input[type=radio][disabled] + label:before {
+  color: #777777;
+  pointer-events: none;
+}
 input.disabled {
   border-color: #C4C4C4;
   background-color: #E5E5E5;
diff --git a/resources/sass/admin_new/basic/basic.scss b/resources/sass/admin_new/basic/basic.scss
index 2de2cac3a..5e31a9497 100644
--- a/resources/sass/admin_new/basic/basic.scss
+++ b/resources/sass/admin_new/basic/basic.scss
@@ -6,6 +6,7 @@
 @import "font";
 @import "colors";
 @import "variables";
+@import "typography";
 @import "layout";
 @import "animations";
 @import "icons";
diff --git a/resources/sass/admin_new/basic/colors.scss b/resources/sass/admin_new/basic/colors.scss
index 25de9013f..b57526fab 100644
--- a/resources/sass/admin_new/basic/colors.scss
+++ b/resources/sass/admin_new/basic/colors.scss
@@ -5,6 +5,7 @@
 
 
 $blue: #1E88E5;
+$dark-blue: #0059ab;
 
 $black: #333333;
 $white: #FFFFFF;
diff --git a/resources/sass/admin_new/basic/font.scss b/resources/sass/admin_new/basic/font.scss
index 911fccfe6..8e14231dc 100644
--- a/resources/sass/admin_new/basic/font.scss
+++ b/resources/sass/admin_new/basic/font.scss
@@ -11,12 +11,4 @@ $fontawesome: "Font Awesome 5 Free";
 
 body {
 	font-family: $font_family;
-}
-
-p,span {
-	font-size: 16px;
-	
-	&.warning {
-		color: #FF0000; //porpaviti v spremenljivko
-	}
 }
\ No newline at end of file
diff --git a/resources/sass/admin_new/basic/icons.scss b/resources/sass/admin_new/basic/icons.scss
index 0a171238e..a977ce409 100644
--- a/resources/sass/admin_new/basic/icons.scss
+++ b/resources/sass/admin_new/basic/icons.scss
@@ -26,6 +26,12 @@ a.faicon{
         &.small {
             font-size: 10px !important;
         }
+
+        //BARVE
+
+        &.yellow {
+            color: $yellow;
+        }
 }
 
 span.faicon.lock_open::before{
diff --git a/resources/sass/admin_new/basic/links.scss b/resources/sass/admin_new/basic/links.scss
index 0591f16b9..92300c949 100644
--- a/resources/sass/admin_new/basic/links.scss
+++ b/resources/sass/admin_new/basic/links.scss
@@ -1,10 +1,10 @@
 a {
     cursor: pointer;
     color: $blue;
-    transition: 0.3s;
+    transition: 0.2s;
 
     &:hover {
-        color: $yellow !important;
+        color: $dark-blue !important;
     }
 
     &.menu-left {
diff --git a/resources/sass/admin_new/basic/typography.scss b/resources/sass/admin_new/basic/typography.scss
new file mode 100644
index 000000000..b8a254960
--- /dev/null
+++ b/resources/sass/admin_new/basic/typography.scss
@@ -0,0 +1,7 @@
+p,span {
+	font-size: 16px;
+	
+	&.warning {
+		color: $red;
+    }
+}
\ No newline at end of file
diff --git a/resources/sass/admin_new/components/form/button.scss b/resources/sass/admin_new/components/form/button.scss
index 8abcd504e..502f643f4 100644
--- a/resources/sass/admin_new/components/form/button.scss
+++ b/resources/sass/admin_new/components/form/button.scss
@@ -34,6 +34,7 @@ submit{
         color: $white;
 
         background-color: $blue;
+        border: 1px $blue solid;
 
         &:hover {
             background-color: darken($blue, 3%);
@@ -73,6 +74,7 @@ submit{
         color: $black;
 
         background-color: $yellow;
+        border: 1px $yellow solid;
 
         &:hover {
             background-color: darken($yellow, 2%);
@@ -82,6 +84,7 @@ submit{
         color: $white;
 
         background-color: $red;
+        border: 1px $red solid;
 
         &:hover {
             background-color: darken($red, 5%);
diff --git a/resources/sass/admin_new/components/form/input.scss b/resources/sass/admin_new/components/form/input.scss
index 18049ce0c..6286c172a 100644
--- a/resources/sass/admin_new/components/form/input.scss
+++ b/resources/sass/admin_new/components/form/input.scss
@@ -3,6 +3,11 @@ label{
 
     margin-right: 13px;
     font-size: 16px;
+
+    &[disabled] {
+        color: $very-dark-gray;
+        pointer-events: none;
+    }
 }
 
 input {
@@ -85,7 +90,27 @@ input {
         content: "\f192";
     }
 
+
+    &[type=radio][disabled] + label:before{
+        color: $very-dark-gray;
+    }
+
+    &[type=checkbox][disabled] + label:before{
+        color: $very-dark-gray;
+    }
+
     //Disabled polja
+
+    &[type=checkbox][disabled] + label:before {
+        color: $very-dark-gray;
+        pointer-events: none;
+    }
+
+    &[type=radio][disabled] + label:before {
+        color: $very-dark-gray;
+        pointer-events: none;
+    }
+
     &.disabled {
         border-color: $dark-gray;
         background-color: $gray;
@@ -94,3 +119,4 @@ input {
         pointer-events: none;
     }
 }
+