Redesign - typography, disabled popravki

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

View File

@ -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>

View File

@ -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;

View File

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

View File

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

View File

@ -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
}
}

View File

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

View File

@ -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 {

View File

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

View File

@ -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%);

View File

@ -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;
}
}