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

Redizajn mockup - css elementi

Browse Source
This commit is contained in:
tejagerjovic 2021-11-05 16:43:46 +01:00
parent 3ee0c9e238
commit e9c417682e
8 changed files with 1443 additions and 1214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
admin/survey/redesign_test.php
View File

@ -97,55 +97,92 @@
<fieldset> <fieldset>
<legend>Box z vsebino</legend> <legend>Box z vsebino</legend>
<div class="ContentDiv"> <div class="content_div">
<label class="InputLabel">Vnos teksta:</label> <label class="InputLabel">Veliko tekstovno polje:</label>
<form> <form>
<input class="Text" type="text"> <input class="text large" type="text">
</form> </form>
</div> </div>
<div class="ContentDiv"> <div class="content_div">
<label class="InputLabel">Dropdown meni:</label> <label class="InputLabel">Srednje tekstovno polje:</label>
<form> <form>
<select class="Dropdown"> <input class="text medium" type="text">
<option>Option 1</option> </form>
<option>Option 2</option> </div>
<div class="content_div">
<label class="InputLabel">Malo tekstovno polje:</label>
<form>
<input class="text small" type="text">
</form>
</div>
<div class="content_div">
<label class="input_label">Veliki dropdown meni:</label>
<form>
<select class="dropdown large">
<option>Q1: veliko besedilaaaaaaaaaaaaaaa</option>
<option>Q2: manj besedila</option>
<option>Q3: malo</option>
</select> </select>
</form> </form>
</div> </div>
<div class="ContentDiv"> <div class="content_div">
<label class="InputLabel">Radio gumbi:</label> <label class="input_label">Srednji dropdown meni:</label>
<form> <form>
<input class="Radio" type="radio" id="1" name="radio"></input> <select class="dropdown medium">
<option>Q1: veliko besedilaaaaaaaaaaaaaaa</option>
<option>Q2: manj besedila</option>
<option>Q3: malo</option>
</select>
</form>
</div>
<div class="content_div">
<label class="input_label">Mali dropdown meni:</label>
<form>
<select class="dropdown small">
<option>Q1: veliko besedilaaaaaaaaaaaaaaa</option>
<option>Q2: manj besedila</option>
<option>Q3: malo</option>
</select>
</form>
</div>
<div class="content_div">
<label class="input_label">Radio gumbi:</label>
<form>
<input class="radio" type="radio" id="1" name="radio"></input>
<label>Option 1</label> <label>Option 1</label>
<input class="Radio" type="radio" id="2" name="radio"></input> <input class="radio" type="radio" id="2" name="radio"></input>
<label>Option 2</label> <label>Option 2</label>
</form> </form>
</div> </div>
<div class="ContentDiv"> <div class="content_div">
<label class="InputLabel">Checkbox:</label> <label class="input_label">Checkbox:</label>
<form> <form>
<input class="Radio" type="checkbox" id="1" name="checkbox"></input> <input class="checkbox" type="checkbox" id="1" name="checkbox"></input>
<label>Option 1</label> <label>Option 1</label>
<input class="Radio" type="checkbox" id="2" name="checkbox"></input> <input class="checkbox" type="checkbox" id="2" name="checkbox"></input>
<label>Option 2</label> <label>Option 2</label>
</form> </form>
</div> </div>
<div class="ContentDiv"> <div class="content_div">
<label class="InputLabel">Button:</label> <label class="input_label">Button:</label>
<button class="small red">Gumb - majhen rdeč</button> <button class="small red">Gumb - majhen rdeč</button>
<button class="large blue">Gumb - velik moder</button> <button class="large blue">Gumb - velik moder</button>
</div> </div>
<div class="ContentDiv"> <div class="content_div">
Povezava: <a class="ContentLink" href="https://www.1ka.si/">www.1ka.si</a> Povezava: <a href="https://www.1ka.si/">www.1ka.si</a>
</div> </div>
</fieldset> </fieldset>

2472
public/css/admin_new.css
View File

File diff suppressed because it is too large Load Diff

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

@ -9,6 +9,7 @@ $blue: #1E88E5;
$black: #333333; $black: #333333;
$white: #FFFFFF; $white: #FFFFFF;
$gray: #E5E5E5; $gray: #E5E5E5;
$light-gray: #F8F8F8;
$yellow: #FFC700; $yellow: #FFC700;
$red: #FF0000; $red: #FF0000;

42
resources/sass/admin_new/components/form/dropdown.scss Normal file
View File

@ -0,0 +1,42 @@
select.dropdown {
border: 1px solid $gray;
box-sizing: border-box;
border-radius: 2px;
&.large {
width: 229px;
height: 40px;
option {
font-size: 16px;
line-height: 20px;
display: flex;
align-items: center;
color: $black;
}
}
&.medium {
width: 229px;
height: 32px;
option {
font-size: 14px;
line-height: 18px;
display: flex;
align-items: center;
}
}
&.small {
width: 229px;
height: 26px;
option {
font-size: 14px;
line-height: 18px;
display: flex;
align-items: center;
color: $black;
}
}
}

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

@ -1,4 +1,5 @@
fieldset{ fieldset{
padding: 32px; padding: 32px;
box-sizing: border-box;
border: 1px solid $gray;
} }

1
resources/sass/admin_new/components/form/form.scss
View File

@ -6,3 +6,4 @@
@import "button"; @import "button";
@import "input"; @import "input";
@import "fieldset"; @import "fieldset";
@import "dropdown";

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

@ -0,0 +1,52 @@
input {
&.text {
border: 1px solid $gray;
box-sizing: border-box;
border-radius: 2px;
width: 245px;
&.large {
height: 40px;
}
&.medium {
height: 32px;
}
&.small {
height: 26px;
}
}
&.checkbox {
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid $gray;
box-sizing: border-box;
border-radius: 2px;
&:checked { //manjka prikaz kljukice
background: $blue;
border: 1px solid $blue;
}
}
&.radio {
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid $gray;
box-sizing: border-box;
border-radius: 50px;
&:checked { //manjka prikaz pikice
background: $blue;
border: 1px solid $blue;
}
}
}

7
resources/sass/admin_new/components/main/menu_left.scss
View File

@ -0,0 +1,7 @@
div.left{
padding: 32px;
border: 1px solid $gray;
box-sizing: border-box;
box-shadow: -10px 10px 0px $light-gray;
margin-right: 64px;
}