Redesign - typography, disabled popravki
This commit is contained in:
parent
15ae4d66e7
commit
8bd4a30e38
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -6,6 +6,7 @@
|
||||
@import "font";
|
||||
@import "colors";
|
||||
@import "variables";
|
||||
@import "typography";
|
||||
@import "layout";
|
||||
@import "animations";
|
||||
@import "icons";
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
|
||||
$blue: #1E88E5;
|
||||
$dark-blue: #0059ab;
|
||||
|
||||
$black: #333333;
|
||||
$white: #FFFFFF;
|
||||
|
@ -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
|
||||
}
|
||||
}
|
@ -26,6 +26,12 @@ a.faicon{
|
||||
&.small {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
//BARVE
|
||||
|
||||
&.yellow {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
span.faicon.lock_open::before{
|
||||
|
@ -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 {
|
||||
|
7
resources/sass/admin_new/basic/typography.scss
Normal file
7
resources/sass/admin_new/basic/typography.scss
Normal file
@ -0,0 +1,7 @@
|
||||
p,span {
|
||||
font-size: 16px;
|
||||
|
||||
&.warning {
|
||||
color: $red;
|
||||
}
|
||||
}
|
@ -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%);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user