Redesign - disabled polja, warnings, links

admin/survey/redesign_test.php

@@ -106,10 +106,19 @@
                                     <textarea class="textarea" id="textarea1" name="textarea1"></textarea>
                                 </form>
 
-                                </div>  
+                                </div>
+                                
+                                <div class="setting_holder">
+                                <label for="textarea1">Disabled tekstovno polje:</label>
+                                    
+                                <form>
+                                    <textarea class="textarea disabled" id="textarea1" name="textarea1">Besedilo v disabled polju.</textarea>
+                                </form>
+
+                                </div>
 
                                 <div class="setting_holder">
-                                    <label for="text1" class="InputLabel">Input text - small:</label>
+                                    <label for="text1" class="InputLabel">Input text - large:</label>
                                     <form>
                                         <input id="text1" class="text large" type="text">
                                     </form>
@@ -123,9 +132,9 @@
                                 </div>
 
                                 <div class="setting_holder">
-                                    <label for="text3" class="InputLabel">Input text - large:</label>
+                                    <label for="text3" class="InputLabel">Input text - small - disabled:</label>
                                     <form>
-                                        <input id="text3" class="text small" type="text">
+                                        <input id="text3" class="text small disabled" type="text">
                                     </form>
                                 </div>
 
@@ -152,9 +161,9 @@
                                 </div>
 
                                 <div class="setting_holder">
-                                    <label for="dropdown3" class="input_label">Mali dropdown meni:</label>
+                                    <label for="dropdown3" class="input_label">Mali dropdown meni - disabled:</label>
                                     <form>
-                                        <select id="dropdown3" class="dropdown small">
+                                        <select id="dropdown3" class="dropdown small disabled">
                                             <option>Q1: veliko besedilaaaaa</option>
                                             <option>Q2: manj besedila</option>
                                             <option>Q3: malo</option>
@@ -176,18 +185,39 @@
                                         <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>
+
                                 </div>
 
                                 <div class="setting_holder">
-                                    <span class="setting_title">Checkboxi:</span>
+                                    <span class="setting_title">Checkboxi - related:</span>
-                                    <div class="setting_item checkbox">
+                                    <div class="setting_item">
                                         <input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
                                         <label for="c1">Option 1</label>
                                     </div>
-                                    <div class="setting_item checkbox">    
+                                    <div class="setting_item">    
                                         <input class="checkbox" type="checkbox" id="c2" name="checkbox"></input>
                                         <label for="c2">Option 2</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>
+                                        <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>
 
@@ -208,10 +238,13 @@
                                 </div>
 
                                 <div class="setting_holder">
-                                    <span class="faicon blue lock_close"></span>
+                                <a class="noline" href="https://www.1ka.si/"><span class="faicon lock_close link-right"></span>Povezava z ikono: www.1ka.si</a>
-                                    Povezava z ikono: <a href="https://www.1ka.si/">www.1ka.si</a>
                                 </div>
 
+                                <p>Tole je navaden normalen odstavek teksta.</p>
+                                <p class="warning">To je opozorilo, ki je celo rdeče.</p>
+                                <p><span class="warning">Opozorilo:</span> Tole je opozorilo, ki ni celo rdeče.<p>
+
                                 
                                 
                             </fieldset>

resources/sass/admin_new/basic/basic.scss

@@ -9,3 +9,4 @@
 @import "layout";
 @import "animations";
 @import "icons";
+@import "links";

resources/sass/admin_new/basic/colors.scss

@@ -9,7 +9,7 @@ $blue: #1E88E5;
 $black: #333333;
 $white: #FFFFFF;
 
-$very-dark-gray: #707070;
+$very-dark-gray: #777777;
 $dark-gray: #C4C4C4;
 $gray: #E5E5E5;
 $light-gray: #F8F8F8;

resources/sass/admin_new/basic/font.scss

@@ -11,4 +11,12 @@ $fontawesome: "Font Awesome 5 Free";
 
 body {
 	font-family: $font_family;
+}
+
+p,span {
+	font-size: 16px;
+	
+	&.warning {
+		color: #FF0000; //porpaviti v spremenljivko
+	}
 }

resources/sass/admin_new/basic/icons.scss

@@ -5,6 +5,12 @@ a.faicon{
         display: inline-block;
         font-weight: 900;
 
+        &.link-right {
+            margin-right: 10px;    
+        }
+
+        //VELIKOSTI
+
         &.large {
             font-size: 32px !important;
         }
@@ -20,14 +26,6 @@ a.faicon{
         &.small {
             font-size: 10px !important;
         }
-
-        &.blue {
-            color: $blue;
-        }
-
-        &.yellow {
-            color: $yellow;
-        }
 }
 
 span.faicon.lock_open::before{

resources/sass/admin_new/basic/links.scss

@@ -0,0 +1,18 @@
+a {
+    cursor: pointer;
+    color: $blue;
+    transition: 0.3s;
+
+    &:hover {
+        color: $yellow !important;
+    }
+
+    &.menu-left {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &.noline {
+        text-decoration: none;
+    }
+}

resources/sass/admin_new/components/form/dropdown.scss

@@ -26,7 +26,8 @@ select.dropdown {
 
         option {
             font-size: 14px;
-            line-height: 18px;               
+            line-height: 18px;
+            color: $black;               
         }
     }
     &.small {
@@ -49,4 +50,12 @@ select.dropdown {
         border-color: $blue;
     }
 
+    &.disabled {
+        border-color: $dark-gray;
+        background-color: $gray;
+        color: $very-dark-gray;
+
+        pointer-events: none;
+    }
+
 }

resources/sass/admin_new/components/form/input.scss

@@ -84,4 +84,13 @@ input {
     &[type=radio]:checked + label:before {
         content: "\f192";
     }
+
+    //Disabled polja
+    &.disabled {
+        border-color: $dark-gray;
+        background-color: $gray;
+        color: $very-dark-gray;
+
+        pointer-events: none;
+    }
 }

resources/sass/admin_new/components/form/textarea.scss

@@ -4,7 +4,7 @@ textarea {
 
     border: 1px solid $dark-gray;
     box-sizing: border-box;
-    border-radius: 4px;
+    border-radius: 2px;
     resize: none;
 
     margin-top: 4px;
@@ -13,6 +13,14 @@ textarea {
     font-family: $font_family;
     font-size: 16px;
 
+    &.disabled {
+        border-color: $dark-gray;
+        background-color: $gray;
+        color: $very-dark-gray;
+
+        pointer-events: none;
+    }
+
     &:focus {
         outline-style: none;
         box-shadow: none;

resources/sass/admin_new/components/main/main.scss

@@ -1,16 +1 @@
-@import "menu_left";
+@import "menu_left";
-
-a {
-    cursor: pointer;
-    color: $blue;
-    transition: 0.3s;
-
-    &:hover {
-        color: darken($blue, 10%);
-    }
-
-    &.menu-left {
-        color: inherit;
-        text-decoration: none;
-    }
-}

resources/sass/admin_new/components/main/menu_left.scss

@@ -29,6 +29,10 @@ ul.menu_left-list {
     margin-bottom: 32px;
     font-size: 16px;
 
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+
     &.paid {
         color: $very-dark-gray;
         pointer-events: none;