635 lines
10 KiB
SCSS
635 lines
10 KiB
SCSS
/*
|
|
Osnovna tema ankete - 1ka - brez definiranih barv
|
|
*/
|
|
|
|
|
|
/* Barve */
|
|
$color_gray: #E5E5E5;
|
|
|
|
$color_warning: #ffa608;
|
|
$color_text: #333333;
|
|
|
|
|
|
/* Fonti */
|
|
$font_family: Source Sans Pro, sans-serif;
|
|
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
color: $color_text;
|
|
font-size: 100%;
|
|
font-family: $font_family !important;
|
|
|
|
background: #ffffff;
|
|
}
|
|
body.preview, body.testdata{
|
|
margin-top: 26px;
|
|
}
|
|
|
|
#outercontainer {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
|
|
.outercontainer_header {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 80px;
|
|
|
|
border-bottom: 2px $color_strong solid;
|
|
}
|
|
|
|
#container {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0px auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Warning bar (preview, cookie) */
|
|
#cookie_alert,
|
|
#test_alert {
|
|
height: 26px;
|
|
|
|
font-size: 15px;
|
|
line-height: 25px;
|
|
color: #ffffff;
|
|
|
|
background-color: $color_warning;
|
|
border-bottom: 1px solid $color_warning;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: #ffffff;
|
|
|
|
a {
|
|
color: #ffffff;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Header - logo, naslov, progressbar */
|
|
h1 {
|
|
margin: 0px auto;
|
|
padding: 114px 0 32px 0;
|
|
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
line-height: 40px;
|
|
color: $color_title;
|
|
text-align: center;
|
|
|
|
border-bottom: 1px solid $color_gray;
|
|
}
|
|
h1.evalvacija{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
#logo {
|
|
right: auto;
|
|
left: 0;
|
|
top: 13px;
|
|
|
|
max-height: 56px !important;
|
|
|
|
background: url("../../../public/img/logo/1ka_logo_slo.svg");
|
|
background-repeat: no-repeat !important;
|
|
background-size: auto 100% !important;
|
|
|
|
a{
|
|
width: 250px;
|
|
height: 56px;
|
|
}
|
|
}
|
|
#logo.english{
|
|
background: url("../../../public/img/logo/1ka_logo_eng.svg");
|
|
}
|
|
#logo.namestitev{
|
|
background: url("../../../public/img/logo/1ka_logo_namestitev.svg");
|
|
}
|
|
|
|
|
|
.header_settings_holder{
|
|
top: 0px;
|
|
right: 20px;
|
|
left: auto;
|
|
|
|
.progress_bar{
|
|
span {
|
|
float: left !important; /* ie6,7 doesnt support inline-block */
|
|
display: block;
|
|
width: 20px;
|
|
|
|
font-size: 11px;
|
|
color: #6D87AF;
|
|
}
|
|
|
|
div {
|
|
height: 10px;
|
|
width: 130px;
|
|
padding: 2px;
|
|
margin: 0 5px;
|
|
|
|
border: 1px #cccccc solid;
|
|
background-color: #ffffff;
|
|
|
|
span {
|
|
height: 10px;
|
|
background-color: $color_strong;
|
|
}
|
|
}
|
|
|
|
p a {
|
|
color: $color_strong;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.continue_later_setting{
|
|
a {
|
|
color: $color_strong;
|
|
|
|
&:hover {
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tawk_chat{
|
|
a {
|
|
color: $color_strong;
|
|
|
|
&:hover {
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Uvod in zakljucek */
|
|
.intro,
|
|
.concl{
|
|
|
|
.spremenljivka .naslov{
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* Spremenljivke */
|
|
.spremenljivka {
|
|
margin: 0;
|
|
padding: 48px 0 !important;
|
|
|
|
border-bottom: 1px $color_gray solid;
|
|
|
|
.naslov{
|
|
padding: 0 !important;
|
|
margin: 0 0 24px 0;
|
|
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
|
|
.spremenljivka_info{
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
.sequence_number{
|
|
background-color: $color_light_lighter;
|
|
color: $color_light;
|
|
|
|
&:hover{
|
|
background-color: darken($color_light_lighter, 10%);
|
|
}
|
|
|
|
&.active{
|
|
background-color: $color_light;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.counter{
|
|
font-size: 18px;
|
|
}
|
|
|
|
#dynamic_count {
|
|
color: $color_strong;
|
|
}
|
|
|
|
.arrow {
|
|
color: $color_link;
|
|
|
|
&:hover{
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
}
|
|
.spremenljivka.limited{
|
|
outline: 1px #F15A24 solid;
|
|
}
|
|
.required, .required_require, .required_limit {
|
|
outline: 1px #F15A24 solid;
|
|
}
|
|
|
|
|
|
div.variabla,
|
|
td.variabla,
|
|
td.question,
|
|
td.differential,
|
|
.variabla_sum label{
|
|
font-size: 16px;
|
|
}
|
|
|
|
div.variable_holder {
|
|
padding: 0 !important;
|
|
|
|
.variabla{
|
|
padding: 0;
|
|
margin-bottom: 16px;
|
|
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
thead,
|
|
tr.table-header {
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
|
|
td{
|
|
padding: 10px 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
table.grid_table{
|
|
|
|
tbody tr.table-header td{
|
|
border-top: 2px $color_light solid;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
tbody tr:nth-child(2n+1) {
|
|
background-color: $color_light_lighter;
|
|
}
|
|
tbody tr:nth-child(2n) {
|
|
background-color: #ffffff;
|
|
}
|
|
td {
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
|
|
span.reminder {
|
|
left: 3px;
|
|
}
|
|
|
|
/* Textboxi, textarea, select */
|
|
input, textarea, select{
|
|
font-family: $font_family !important;
|
|
}
|
|
input[type="text"], textarea, select{
|
|
padding: 10px 15px;
|
|
|
|
border-radius: 3px;
|
|
border: 1px solid #d1d1d1;
|
|
border-radius: 3px;
|
|
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* ranking */
|
|
.dropzone{
|
|
border-top: 1px $color_light_lighter solid;
|
|
margin-top: 12px;
|
|
padding-top: 17px;
|
|
}
|
|
table.ranking_table ul{
|
|
margin-top: 19px;
|
|
}
|
|
.ranking,
|
|
.ranking_long,
|
|
.handle,
|
|
.handle_long,
|
|
.ime,
|
|
.izbran,
|
|
.frame_ranking,
|
|
.frame_ranking_hover,
|
|
.frame_dropping,
|
|
.frame_dropping_hover,
|
|
.frame_moving{
|
|
font-size: 13px;
|
|
padding: 7px 10px 9px;
|
|
|
|
border: 2px solid $color_strong;
|
|
background-color: #ffffff;
|
|
}
|
|
.ranking:hover{
|
|
background-color: #f5fafe;
|
|
}
|
|
div.variable_holder .frame_ranking_hover{
|
|
border: 2px $color_strong solid;
|
|
background-color: $color_light_lighter;
|
|
}
|
|
div.variable_holder .frame_ranking,
|
|
div.variable_holder .frame_moving,
|
|
div.variable_holder .frame_dropping,
|
|
div.variable_holder .frame_dropping_hover{
|
|
text-indent: -35px;
|
|
|
|
border: 2px $color_light solid;
|
|
background-color: $color_light_lighter;
|
|
}
|
|
table.ranking_table b{
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* Photo upload button */
|
|
button.record_foto{
|
|
border: 2px solid $color_link;
|
|
|
|
&::before{
|
|
color: $color_link;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus{
|
|
border-color: $color_link_hover;
|
|
|
|
&::before{
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Koledar */
|
|
.ui-datepicker{
|
|
font-size: 14px;
|
|
}
|
|
button.ui-datepicker-trigger{
|
|
color: $color_link;
|
|
|
|
&:hover,
|
|
&:focus{
|
|
color: $color_link_hover;
|
|
}
|
|
}
|
|
|
|
|
|
/* Slider */
|
|
.grupa .spremenljivka{
|
|
|
|
.ui-slider-pips .ui-slider-pip{
|
|
color: $color_text;
|
|
}
|
|
.slider.ui-widget-content{
|
|
/*background-color: $color_light !important;*/
|
|
background-image: none !important;
|
|
border: 0;
|
|
}
|
|
.ui-slider-horizontal{
|
|
height: 8px;
|
|
}
|
|
.ui-slider-handle {
|
|
cursor: pointer;
|
|
|
|
height: 10px !important;
|
|
width: 18px !important;
|
|
margin-top: 1px;
|
|
|
|
border: 0;
|
|
border-radius: 15px 15px !important;
|
|
background-color: $color_strong !important;
|
|
background-image: none !important;
|
|
|
|
&:active{
|
|
background-color: $color_strong !important;
|
|
}
|
|
}
|
|
|
|
.sliderText{
|
|
padding-top: 2px;
|
|
|
|
color: $color_text;
|
|
|
|
background-color: $color_light;
|
|
border: 0;
|
|
}
|
|
.sliderText::after{
|
|
border-color: $color_light transparent;
|
|
}
|
|
}
|
|
|
|
|
|
/* Warning levo od vprasanja */
|
|
.validation_alert {
|
|
position: absolute;
|
|
z-index: 51;
|
|
|
|
top: 20px;
|
|
left: -150px;
|
|
width: 130px;
|
|
min-height: 29px;
|
|
margin: 0;
|
|
|
|
text-align: center;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
|
|
background-color: $color_light_lighter;
|
|
|
|
border: 2px solid red;
|
|
padding: 4px 7px;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/* Gumbi na dnu */
|
|
div.buttons {
|
|
padding: 64px 0;
|
|
margin: 0;
|
|
|
|
input {
|
|
cursor: pointer;
|
|
|
|
margin: 8px 10px;
|
|
padding: 0 32px;
|
|
height: 40px;
|
|
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
|
|
border: 0;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
input.next {
|
|
background-color: $color_link;
|
|
border: 1px solid $color_link;
|
|
|
|
&:hover,
|
|
&:focus{
|
|
background-color: $color_link_hover;
|
|
border: 1px solid $color_link_hover;
|
|
}
|
|
}
|
|
|
|
input.prev {
|
|
color: $color_link;
|
|
background-color: #fff;
|
|
border: 1px solid $color_link;
|
|
|
|
&:hover,
|
|
&:focus{
|
|
color: #fff;
|
|
background-color: $color_link;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Footer */
|
|
#footer_survey {
|
|
padding: 48px 0 64px 0;
|
|
|
|
background-color: #ffffff;
|
|
border-top: 1px $color_gray solid;
|
|
|
|
p, a, a:visited {
|
|
color: $color_text;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:active {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* awesome radio in checkboxi */
|
|
input[type="checkbox"] + span.enka-checkbox-radio,
|
|
input[type="radio"] + span.enka-checkbox-radio,
|
|
.custom_radio_picture.obarvan > label > span.enka-custom-radio:before,
|
|
.visual-radio-scale.checked .enka-vizualna-skala{
|
|
color: $color_light;
|
|
font-size: 20px;
|
|
vertical-align: -1px;
|
|
}
|
|
|
|
input[type="checkbox"]:focus + span.enka-checkbox-radio:before,
|
|
input[type="radio"]:focus + span.enka-checkbox-radio:before,
|
|
input[type="radio"]:focus + span.enka-custom-radio:before,
|
|
input[type="radio"]:focus + span.enka-vizualna-skala::before{
|
|
color: darken($color_light, 25%);
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
textarea:focus{
|
|
border-color: $color_light;
|
|
}
|
|
|
|
|
|
/* Ranking drag drop */
|
|
.drag_and_drop {
|
|
top: -9px;
|
|
left: -12px;
|
|
}
|
|
|
|
.drag_and_drop_right{
|
|
top: -9px!important;
|
|
left: -12px!important;
|
|
}
|
|
|
|
.frame_dropping_titles {
|
|
width: 240px;
|
|
padding: 5px;
|
|
margin: 0px auto 0px auto;
|
|
height: 15px;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
border-top: 2px solid #b9c5d9;
|
|
border-left: 2px solid #b9c5d9;
|
|
border-right: 2px solid #b9c5d9;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.drag_and_drop_box {
|
|
top: -9px;
|
|
left: -12px;
|
|
|
|
img {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.drag_and_drop_box_right{
|
|
top: 19px!important;
|
|
left: -12px!important;
|
|
}
|
|
|
|
.drag_and_drop_box_right_after_refresh{
|
|
/*top: 44px!important;*/
|
|
left: -12px!important;
|
|
}
|
|
|
|
.drag_and_drop_box_right_over{
|
|
left: -12px!important;
|
|
}
|
|
|
|
.frame_dropping_titles_box {
|
|
width: 240px;
|
|
padding: 5px;
|
|
margin: 0px auto 0px auto;
|
|
height: 15px;
|
|
text-align: center;
|
|
background-color: #FFFFFF;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.frame_dropping {
|
|
padding: 7px 10px 9px;
|
|
}
|
|
.frame_dropping_box {
|
|
padding: 7px 10px 9px;
|
|
} |