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

Redesign - popravki radio in checkboxov

Browse Source
This commit is contained in:
pero1203 2021-11-08 10:16:18 +01:00
parent e9c417682e
commit 68a926e4ed
4 changed files with 1293 additions and 1252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
admin/survey/redesign_test.php
View File

@ -154,10 +154,10 @@
<div class="content_div"> <div class="content_div">
<label class="input_label">Radio gumbi:</label> <label class="input_label">Radio gumbi:</label>
<form> <form>
<input class="radio" type="radio" id="1" name="radio"></input> <input class="radio" type="radio" id="r1" name="radio"></input>
<label>Option 1</label> <label for="r1">Option 1</label>
<input class="radio" type="radio" id="2" name="radio"></input> <input class="radio" type="radio" id="r2" name="radio"></input>
<label>Option 2</label> <label for="r2">Option 2</label>
</form> </form>
</div> </div>
@ -165,10 +165,10 @@
<div class="content_div"> <div class="content_div">
<label class="input_label">Checkbox:</label> <label class="input_label">Checkbox:</label>
<form> <form>
<input class="checkbox" type="checkbox" id="1" name="checkbox"></input> <input class="checkbox" type="checkbox" id="c1" name="checkbox"></input>
<label>Option 1</label> <label for="c1">Option 1</label>
<input class="checkbox" type="checkbox" id="2" name="checkbox"></input> <input class="checkbox" type="checkbox" id="c2" name="checkbox"></input>
<label>Option 2</label> <label for="c2">Option 2</label>
</form> </form>
</div> </div>

2448
public/css/admin_new.css
View File

File diff suppressed because it is too large Load Diff

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

@ -8,6 +8,8 @@ $blue: #1E88E5;
$black: #333333; $black: #333333;
$white: #FFFFFF; $white: #FFFFFF;
$dark-gray: #C4C4C4;
$gray: #E5E5E5; $gray: #E5E5E5;
$light-gray: #F8F8F8; $light-gray: #F8F8F8;

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

@ -1,6 +1,14 @@
label{
cursor: pointer;
margin-right: 13px;
font-size: 16px;
}
input { input {
&.text { &[type="text"] {
border: 1px solid $gray; border: 1px solid $gray;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
@ -16,37 +24,50 @@ input {
&.small { &.small {
height: 26px; height: 26px;
} }
} }
&.checkbox {
-webkit-appearance: none; // Radio button and checkbox
width: 18px; &[type=radio],
height: 18px; &[type=checkbox]{
border: 0;
border: 1px solid $gray; clip: rect(0 0 0 0);
box-sizing: border-box; height: 1px;
border-radius: 2px; margin: -1px;
overflow: hidden;
&:checked { //manjka prikaz kljukice padding: 0;
background: $blue; position: absolute;
border: 1px solid $blue; width: 1px;
} }
&[type=radio] + label:before,
&[type=checkbox] + label:before {
cursor: pointer;
font-family: $fontawesome;
display: inline-block;
color: $dark-gray;
letter-spacing: 8px;
font-size: 18px;
vertical-align: -1px;
}
&[type=radio]:checked + label:before,
&[type=checkbox]:checked + label:before {
color: $blue;
} }
&.radio { &[type=checkbox] + label:before {
-webkit-appearance: none; content: "\f0c8";
width: 18px; }
height: 18px; &[type=checkbox]:checked + label:before {
content: "\f14a";
border: 1px solid $gray; font-weight: bold;
box-sizing: border-box;
border-radius: 50px;
&:checked { //manjka prikaz pikice
background: $blue;
border: 1px solid $blue;
}
} }
} &[type=radio] + label:before {
content: "\f111";
}
&[type=radio]:checked + label:before {
content: "\f192";
}
}