may/1KA_F2F
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign - typography, disabled popravki

Browse Source
This commit is contained in:
tejagerjovic 2021-11-10 14:29:49 +01:00
parent 15ae4d66e7
commit 8bd4a30e38
10 changed files with 99 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
admin/survey/redesign_test.php
View File

@ -71,7 +71,7 @@
<span class="menu_left-title paid"> <span class="menu_left-title paid">
Plačljivi moduli Plačljivi moduli
</span> </span>
<span class="faicon yellow lock_close"></span> <span class="faicon yellow lock_close yellow"></span>
<ul class="menu_left-list paid"> <ul class="menu_left-list paid">
@ -185,9 +185,9 @@
<label for="r2">Option 2</label> <label for="r2">Option 2</label>
</div> </div>
<div class="setting_item"> <div class="setting_item disabled">
<input class="radio disabled" type="radio" id="r3" name="radio"> <input class="radio" type="radio" id="r3" name="radio" disabled>
<label for="r3">Option 3 - disabled</label> <label for="r3" disabled>Option 3 - disabled</label>
</div> </div>
</div> </div>
@ -195,31 +195,32 @@
<div class="setting_holder"> <div class="setting_holder">
<span class="setting_title">Checkboxi - related:</span> <span class="setting_title">Checkboxi - related:</span>
<div class="setting_item"> <div class="setting_item">
<input class="checkbox" type="checkbox" id="c1" name="checkbox"></input> <input class="checkbox" type="checkbox" id="o1" name="checkbox"></input>
<label for="c1">Option 1</label> <label for="o1">Option 1</label>
</div> </div>
<div class="setting_item"> <div class="setting_item">
<input class="checkbox" type="checkbox" id="c2" name="checkbox"></input> <input class="checkbox" type="checkbox" id="o2" name="checkbox" disabled></input>
<label for="c2">Option 2</label> <label for="o2" disabled>Option 2 - disabled</label>
</div> </div>
</div> </div>
<div class="setting_holder unrelated">
<span class="setting_title">Checkboxi - unrelated:</span> <p>Checkboxi - unrelated</p>
<div class="setting_item">
<input class="checkbox" type="checkbox" id="c1" name="checkbox"></input> <div class="setting_holder">
<input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
<label for="c1">Ena nastavitev</label> <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>
<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"> <div class="setting_holder">
<label class="input_label">Gumbi:</label><br><br> <label class="input_label">Gumbi:</label><br><br>

35
public/css/admin_new.css
View File

@ -5048,6 +5048,9 @@ body {
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
} }
/*
All colors
*/
p, span { p, span {
font-size: 16px; font-size: 16px;
} }
@ -5055,9 +5058,6 @@ p.warning, span.warning {
color: #FF0000; color: #FF0000;
} }
/*
All colors
*/
/* /*
Only layout styles - position, display, max-width... Only layout styles - position, display, max-width...
*/ */
@ -5123,6 +5123,10 @@ span.faicon.small,
a.faicon.small { a.faicon.small {
font-size: 10px !important; font-size: 10px !important;
} }
span.faicon.yellow,
a.faicon.yellow {
color: #FFC700;
}
span.faicon.lock_open::before { span.faicon.lock_open::before {
content: "\f3c1"; content: "\f3c1";
@ -5135,10 +5139,10 @@ span.faicon.lock_close::before {
a { a {
cursor: pointer; cursor: pointer;
color: #1E88E5; color: #1E88E5;
transition: 0.3s; transition: 0.2s;
} }
a:hover { a:hover {
color: #FFC700 !important; color: #0059ab !important;
} }
a.menu-left { a.menu-left {
color: inherit; color: inherit;
@ -5239,6 +5243,7 @@ button.blue,
submit.blue { submit.blue {
color: #FFFFFF; color: #FFFFFF;
background-color: #1E88E5; background-color: #1E88E5;
border: 1px #1E88E5 solid;
} }
button.blue:hover, button.blue:hover,
submit.blue:hover { submit.blue:hover {
@ -5278,6 +5283,7 @@ button.yellow,
submit.yellow { submit.yellow {
color: #333333; color: #333333;
background-color: #FFC700; background-color: #FFC700;
border: 1px #FFC700 solid;
} }
button.yellow:hover, button.yellow:hover,
submit.yellow:hover { submit.yellow:hover {
@ -5287,6 +5293,7 @@ button.red,
submit.red { submit.red {
color: #FFFFFF; color: #FFFFFF;
background-color: #FF0000; background-color: #FF0000;
border: 1px #FF0000 solid;
} }
button.red:hover, button.red:hover,
submit.red:hover { submit.red:hover {
@ -5298,6 +5305,10 @@ label {
margin-right: 13px; margin-right: 13px;
font-size: 16px; font-size: 16px;
} }
label[disabled] {
color: #777777;
pointer-events: none;
}
input[type=text] { input[type=text] {
border: 1px solid #C4C4C4; border: 1px solid #C4C4C4;
@ -5363,6 +5374,20 @@ input[type=radio] + label:before {
input[type=radio]:checked + label:before { input[type=radio]:checked + label:before {
content: "\f192"; 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 { input.disabled {
border-color: #C4C4C4; border-color: #C4C4C4;
background-color: #E5E5E5; background-color: #E5E5E5;

1
resources/sass/admin_new/basic/basic.scss
View File

@ -6,6 +6,7 @@
@import "font"; @import "font";
@import "colors"; @import "colors";
@import "variables"; @import "variables";
@import "typography";
@import "layout"; @import "layout";
@import "animations"; @import "animations";
@import "icons"; @import "icons";

1
resources/sass/admin_new/basic/colors.scss
View File

@ -5,6 +5,7 @@
$blue: #1E88E5; $blue: #1E88E5;
$dark-blue: #0059ab;
$black: #333333; $black: #333333;
$white: #FFFFFF; $white: #FFFFFF;

8
resources/sass/admin_new/basic/font.scss
View File

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

6
resources/sass/admin_new/basic/icons.scss
View File

@ -26,6 +26,12 @@ a.faicon{
&.small { &.small {
font-size: 10px !important; font-size: 10px !important;
} }
//BARVE
&.yellow {
color: $yellow;
}
} }
span.faicon.lock_open::before{ span.faicon.lock_open::before{

4
resources/sass/admin_new/basic/links.scss
View File

@ -1,10 +1,10 @@
a { a {
cursor: pointer; cursor: pointer;
color: $blue; color: $blue;
transition: 0.3s; transition: 0.2s;
&:hover { &:hover {
color: $yellow !important; color: $dark-blue !important;
} }
&.menu-left { &.menu-left {

7
resources/sass/admin_new/basic/typography.scss Normal file
View File

@ -0,0 +1,7 @@
p,span {
font-size: 16px;
&.warning {
color: $red;
}
}

3
resources/sass/admin_new/components/form/button.scss
View File

@ -34,6 +34,7 @@ submit{
color: $white; color: $white;
background-color: $blue; background-color: $blue;
border: 1px $blue solid;
&:hover { &:hover {
background-color: darken($blue, 3%); background-color: darken($blue, 3%);
@ -73,6 +74,7 @@ submit{
color: $black; color: $black;
background-color: $yellow; background-color: $yellow;
border: 1px $yellow solid;
&:hover { &:hover {
background-color: darken($yellow, 2%); background-color: darken($yellow, 2%);
@ -82,6 +84,7 @@ submit{
color: $white; color: $white;
background-color: $red; background-color: $red;
border: 1px $red solid;
&:hover { &:hover {
background-color: darken($red, 5%); background-color: darken($red, 5%);

26
resources/sass/admin_new/components/form/input.scss
View File

@ -3,6 +3,11 @@ label{
margin-right: 13px; margin-right: 13px;
font-size: 16px; font-size: 16px;
&[disabled] {
color: $very-dark-gray;
pointer-events: none;
}
} }
input { input {
@ -85,7 +90,27 @@ input {
content: "\f192"; content: "\f192";
} }
&[type=radio][disabled] + label:before{
color: $very-dark-gray;
}
&[type=checkbox][disabled] + label:before{
color: $very-dark-gray;
}
//Disabled polja //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 { &.disabled {
border-color: $dark-gray; border-color: $dark-gray;
background-color: $gray; background-color: $gray;
@ -94,3 +119,4 @@ input {
pointer-events: none; pointer-events: none;
} }
} }